From bcd074d1fbce8754d428538df723ba402603e2c8 Mon Sep 17 00:00:00 2001
From: Thomas Allmer <thomas.allmer@ing.com>
Date: Wed, 25 Mar 2020 10:20:17 +0100
Subject: [PATCH] feat: use markdown javascript (mdjs) for documentation

Co-authored-by: CubLion <alex.ghiu@ing.com>
---
 .eslintrc.js                                  |    1 +
 .markdownlint.json                            |    2 +-
 .storybook/main.js                            |   23 +-
 README.md                                     |  205 +-
 .../10-announcement.stories.mdx => README.md} |   31 +-
 demo/docs/20-lea-tabs.md                      |  253 ++
 .../{stories => docs/assets}/side-by-side.png |  Bin
 demo/stories/20-lea-tabs.stories.mdx          |  255 --
 docs/README.md                                |   12 +-
 docs/definitions.md                           |   52 -
 docs/guidelines-styling.md                    |  205 --
 docs/guidelines/10-guidelines-definitions.md  |   63 +
 docs/guidelines/20-guidelines-styling.md      |   46 +
 .../30-guidelines-scoped-elements.md          |  107 +
 .../40-guidelines-subclasser-apis.md}         |   17 +-
 docs/intros/intros-buttons.md                 |   22 +
 .../intros/intros-icon.md                     |   10 +-
 docs/intros/intros-navigation.md              |   20 +
 docs/intros/intros-others.md                  |   17 +
 docs/rationals/001-side-effects.md            |    6 +
 es-dev-server.config.js                       |    8 +
 package.json                                  |    4 +-
 packages/ajax/README.md                       |  178 +
 .../ajax/{stories => docs/assets}/data.json   |    0
 packages/ajax/package.json                    |    1 +
 packages/ajax/stories/index.stories.mdx       |  279 --
 packages/babel-plugin-extend-docs/README.md   |    6 +
 packages/button/README.md                     |  120 +-
 .../{stories => docs/assets}/icon.svg.js      |    0
 packages/button/package.json                  |    1 +
 packages/button/stories/index.stories.mdx     |  173 -
 packages/calendar/README.md                   |  199 +
 packages/calendar/package.json                |    1 +
 packages/calendar/stories/index.stories.mdx   |  257 --
 packages/checkbox-group/README.md             |  155 +-
 packages/checkbox-group/package.json          |    1 +
 .../checkbox-group/stories/index.stories.mdx  |  328 --
 packages/choice-input/README.md               |   14 +-
 packages/core/README.md                       |   69 +-
 packages/core/stories/index.stories.mdx       |   67 -
 packages/dialog/README.md                     |  175 +
 .../{stories => docs}/demo-dialog-style.js    |    0
 .../styled-dialog-content.js                  |    0
 packages/dialog/package.json                  |    1 +
 packages/dialog/stories/index.stories.mdx     |  279 --
 packages/field/README.md                      |   38 +-
 packages/field/docs/CustomFieldsTutorial.md   |   14 +-
 packages/field/docs/FormFundaments.md         |    8 +
 packages/field/docs/FormattingAndParsing.md   |    8 +
 packages/fieldset/README.md                   |   45 +-
 .../helpers/demo-fieldset-child.js            |    0
 .../fieldset/stories/overview.stories.mdx     |   41 -
 packages/form-system/README.md                |   52 +-
 .../form-system/docs/15-features-overview.md  |  153 +
 .../docs/17-validation-examples.md            |  405 +++
 .../20-system-overview.md}                    |   14 +-
 .../25-system-model-value.md}                 |   10 +-
 .../30-system-formatting.md}                  |  221 +-
 .../docs/35-system-interaction-states.md      |  178 +
 .../40-system-creating-a-custom-field.md}     |   22 +-
 .../docs/50-content-inside-fields.md          |   23 +
 .../form-system/docs/fieldset-examples.md     |  192 +
 .../{stories => docs}/helper-wc/h-output.js   |    1 +
 .../form-system/stories/10-intro.stories.mdx  |   33 -
 .../stories/15-features-overview.stories.mdx  |  159 -
 .../17-Validation-Examples.stories.mdx        |  694 ----
 .../35-System-InteractionStates.stories.mdx   |  180 -
 .../50-Content-inside-fields.stories.mdx      |   26 -
 .../stories/fieldset-examples.stories.mdx     |  387 --
 .../stories/flow-diagrams.stories.js          |   17 -
 .../stories/form-examples.stories.mdx         |  181 -
 packages/form/README.md                       |   36 +
 packages/form/stories/overview.stories.mdx    |   33 -
 packages/helpers/README.md                    |   14 +
 packages/helpers/sb-action-logger/README.md   |  170 +-
 .../stories/index.stories.mdx                 |  167 -
 .../helpers/stories/helpers-intro.stories.mdx |   13 -
 packages/icon/README.md                       |  104 +-
 .../{stories => docs}/icons/bugs/bug01.svg.js |    0
 .../{stories => docs}/icons/bugs/bug02.svg.js |    0
 .../{stories => docs}/icons/bugs/bug05.svg.js |    0
 .../{stories => docs}/icons/bugs/bug06.svg.js |    0
 .../{stories => docs}/icons/bugs/bug08.svg.js |    0
 .../{stories => docs}/icons/bugs/bug12.svg.js |    0
 .../{stories => docs}/icons/bugs/bug19.svg.js |    0
 .../{stories => docs}/icons/bugs/bug23.svg.js |    0
 .../{stories => docs}/icons/bugs/bug24.svg.js |    0
 .../{stories => docs}/icons/iconset-bugs.js   |    0
 .../{stories => docs}/icons/iconset-misc.js   |    0
 .../{stories => docs}/icons/iconset-space.js  |    0
 .../icons/misc/arrowLeft.svg.js               |    0
 .../icons/space/aliens-spaceship.svg.js       |    0
 .../icons/space/meteor.svg.js                 |    0
 .../icons/space/moon-flag.svg.js              |    0
 .../{stories => docs}/icons/space/moon.svg.js |    0
 .../icons/space/night.svg.js                  |    0
 .../icons/space/orbit.svg.js                  |    0
 .../icons/space/planet.svg.js                 |    0
 .../icons/space/robot.svg.js                  |    0
 .../icons/space/rocket.svg.js                 |    0
 .../icons/space/satellite.svg.js              |    0
 .../icons/space/signal.svg.js                 |    0
 .../icons/space/space-helmet.svg.js           |    0
 .../{stories => docs}/icons/space/sun.svg.js  |    0
 .../icons/space/telescope.svg.js              |    0
 .../system.stories.mdx => docs/system.md}     |   15 +-
 packages/icon/stories/icon-resolvers.js       |   14 -
 packages/icon/stories/icon.stories.mdx        |  132 -
 packages/input-amount/README.md               |  134 +-
 .../input-amount/stories/index.stories.mdx    |  193 -
 packages/input-date/README.md                 |   98 +-
 packages/input-date/stories/index.stories.mdx |  155 -
 packages/input-datepicker/README.md           |  113 +-
 .../stories/index.stories.mdx                 |  169 -
 packages/input-email/README.md                |   69 +-
 .../input-email/stories/index.stories.mdx     |  124 -
 packages/input-iban/README.md                 |   83 +-
 packages/input-iban/stories/index.stories.mdx |  120 -
 packages/input-range/README.md                |   92 +-
 .../input-range/stories/index.stories.mdx     |  153 -
 packages/input/README.md                      |  190 +-
 packages/input/stories/index.stories.mdx      |  283 --
 packages/input/stories/translations/de-DE.js  |    5 -
 packages/input/stories/translations/de.js     |    6 -
 packages/input/stories/translations/en-GB.js  |    5 -
 packages/input/stories/translations/en.js     |   15 -
 packages/input/stories/translations/fr-FR.js  |    5 -
 packages/input/stories/translations/fr.js     |    6 -
 packages/input/stories/translations/nl-NL.js  |    5 -
 packages/input/stories/translations/nl.js     |    6 -
 packages/input/stories/translations/zh-CN.js  |    5 -
 packages/input/stories/translations/zh.js     |    6 -
 .../intros/stories/buttons-intro.stories.mdx  |   20 -
 .../stories/lion-web-components.stories.mdx   |   76 -
 .../stories/navigation-intro.stories.mdx      |   18 -
 .../intros/stories/others-intro.stories.mdx   |   15 -
 packages/localize/README.md                   |   56 +-
 .../localize/{docs => _docs}/amount-html.md   |    0
 packages/localize/{docs => _docs}/date.md     |    0
 packages/localize/{docs => _docs}/message.md  |    0
 packages/localize/{docs => _docs}/number.md   |    0
 .../localize/docs/10-features-overview.md     |  157 +
 packages/localize/docs/20-numbers.md          |  221 ++
 packages/localize/docs/30-dates.md            |  199 +
 .../50-system-overview.md}                    |   10 +-
 .../60-system-rationale.md}                   |   10 +-
 .../localize/{stories => docs}/all-locales.js |    0
 .../{stories => docs}/translations/en-AU.js   |    0
 .../{stories => docs}/translations/en-GB.js   |    0
 .../{stories => docs}/translations/en-US.js   |    0
 .../{stories => docs}/translations/en.js      |    0
 .../{stories => docs}/translations/nl-BE.js   |    0
 .../{stories => docs}/translations/nl-NL.js   |    0
 .../{stories => docs}/translations/nl.js      |    0
 .../localize/stories/10-intro.stories.mdx     |   38 -
 .../stories/12-features-overview.stories.mdx  |   99 -
 packages/localize/stories/15-text.stories.mdx |   42 -
 .../localize/stories/25-numbers.stories.mdx   |  216 --
 .../localize/stories/30-dates.stories.mdx     |  197 -
 packages/localize/stories/message.stories.js  |   61 -
 packages/overlays/README.md                   |   20 +-
 .../20-index.stories.mdx => docs/20-index.md} |  582 +--
 .../30-system-rationale.md}                   |   12 +-
 .../overlays/docs/40-system-configuration.md  |  365 ++
 packages/overlays/docs/OverlaySystemScope.md  |   10 +-
 .../applyDemoOverlayStyles.js                 |    0
 .../{stories => docs}/demo-overlay-system.js  |    1 +
 .../{stories => docs}/directives/ref.js       |    0
 .../overlays/stories/10-intro.stories.mdx     |   35 -
 .../40-system-configuration.stories.mdx       |  568 ---
 packages/radio-group/README.md                |  170 +-
 .../radio-group/stories/index.stories.mdx     |  258 --
 packages/remark-extend/README.md              |    6 +
 packages/select-rich/README.md                |  388 +-
 .../select-rich/stories/index.stories.mdx     |  585 ---
 packages/select/README.md                     |  121 +-
 packages/select/stories/index.stories.mdx     |  191 -
 packages/singleton-manager/README.md          |    6 +
 packages/steps/README.md                      |  192 +-
 packages/steps/package.json                   |    1 +
 packages/steps/stories/index.stories.mdx      |  265 --
 packages/switch/README.md                     |   91 +
 packages/switch/package.json                  |    1 +
 packages/switch/stories/index.stories.mdx     |  173 -
 packages/tabs/README.md                       |  220 ++
 packages/tabs/package.json                    |    1 +
 packages/tabs/stories/index.stories.mdx       |  247 --
 packages/textarea/README.md                   |  107 +-
 packages/textarea/stories/index.stories.mdx   |  143 -
 packages/tooltip/README.md                    |  218 +-
 packages/tooltip/stories/index.stories.mdx    |  274 --
 packages/tooltip/stories/tooltipDemoStyles.js |   26 -
 packages/validate/README.md                   |   68 +-
 .../validate/docs/{ => assets}/FlowDiagram.md |    0
 .../Overview.stories.mdx => docs/system.md}   |   23 +-
 yarn.lock                                     | 3208 ++++++-----------
 196 files changed, 7740 insertions(+), 11774 deletions(-)
 rename demo/{stories/10-announcement.stories.mdx => README.md} (97%)
 create mode 100644 demo/docs/20-lea-tabs.md
 rename demo/{stories => docs/assets}/side-by-side.png (100%)
 delete mode 100644 demo/stories/20-lea-tabs.stories.mdx
 delete mode 100644 docs/definitions.md
 delete mode 100644 docs/guidelines-styling.md
 create mode 100644 docs/guidelines/10-guidelines-definitions.md
 create mode 100644 docs/guidelines/20-guidelines-styling.md
 create mode 100644 docs/guidelines/30-guidelines-scoped-elements.md
 rename docs/{subclasser-apis.md => guidelines/40-guidelines-subclasser-apis.md} (67%)
 create mode 100644 docs/intros/intros-buttons.md
 rename packages/intros/stories/icon-intro.stories.mdx => docs/intros/intros-icon.md (87%)
 create mode 100644 docs/intros/intros-navigation.md
 create mode 100644 docs/intros/intros-others.md
 create mode 100644 es-dev-server.config.js
 rename packages/ajax/{stories => docs/assets}/data.json (100%)
 delete mode 100644 packages/ajax/stories/index.stories.mdx
 rename packages/button/{stories => docs/assets}/icon.svg.js (100%)
 delete mode 100644 packages/button/stories/index.stories.mdx
 delete mode 100644 packages/calendar/stories/index.stories.mdx
 delete mode 100644 packages/checkbox-group/stories/index.stories.mdx
 delete mode 100644 packages/core/stories/index.stories.mdx
 rename packages/dialog/{stories => docs}/demo-dialog-style.js (100%)
 rename packages/dialog/{stories => docs}/styled-dialog-content.js (100%)
 delete mode 100644 packages/dialog/stories/index.stories.mdx
 rename packages/fieldset/{stories => docs}/helpers/demo-fieldset-child.js (100%)
 delete mode 100644 packages/fieldset/stories/overview.stories.mdx
 create mode 100644 packages/form-system/docs/15-features-overview.md
 create mode 100644 packages/form-system/docs/17-validation-examples.md
 rename packages/form-system/{stories/20-System-Overview.stories.mdx => docs/20-system-overview.md} (92%)
 rename packages/form-system/{stories/25-System-ModelValue.stories.mdx => docs/25-system-model-value.md} (89%)
 rename packages/form-system/{stories/30-System-Formatting.stories.mdx => docs/30-system-formatting.md} (53%)
 create mode 100644 packages/form-system/docs/35-system-interaction-states.md
 rename packages/form-system/{stories/40-System-creating-a-custom-field.stories.mdx => docs/40-system-creating-a-custom-field.md} (88%)
 create mode 100644 packages/form-system/docs/50-content-inside-fields.md
 create mode 100644 packages/form-system/docs/fieldset-examples.md
 rename packages/form-system/{stories => docs}/helper-wc/h-output.js (97%)
 delete mode 100644 packages/form-system/stories/10-intro.stories.mdx
 delete mode 100644 packages/form-system/stories/15-features-overview.stories.mdx
 delete mode 100644 packages/form-system/stories/17-Validation-Examples.stories.mdx
 delete mode 100644 packages/form-system/stories/35-System-InteractionStates.stories.mdx
 delete mode 100644 packages/form-system/stories/50-Content-inside-fields.stories.mdx
 delete mode 100644 packages/form-system/stories/fieldset-examples.stories.mdx
 delete mode 100644 packages/form-system/stories/flow-diagrams.stories.js
 delete mode 100644 packages/form-system/stories/form-examples.stories.mdx
 delete mode 100644 packages/form/stories/overview.stories.mdx
 delete mode 100644 packages/helpers/sb-action-logger/stories/index.stories.mdx
 delete mode 100644 packages/helpers/stories/helpers-intro.stories.mdx
 rename packages/icon/{stories => docs}/icons/bugs/bug01.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/bugs/bug02.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/bugs/bug05.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/bugs/bug06.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/bugs/bug08.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/bugs/bug12.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/bugs/bug19.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/bugs/bug23.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/bugs/bug24.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/iconset-bugs.js (100%)
 rename packages/icon/{stories => docs}/icons/iconset-misc.js (100%)
 rename packages/icon/{stories => docs}/icons/iconset-space.js (100%)
 rename packages/icon/{stories => docs}/icons/misc/arrowLeft.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/aliens-spaceship.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/meteor.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/moon-flag.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/moon.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/night.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/orbit.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/planet.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/robot.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/rocket.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/satellite.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/signal.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/space-helmet.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/sun.svg.js (100%)
 rename packages/icon/{stories => docs}/icons/space/telescope.svg.js (100%)
 rename packages/icon/{stories/system.stories.mdx => docs/system.md} (94%)
 delete mode 100644 packages/icon/stories/icon-resolvers.js
 delete mode 100644 packages/icon/stories/icon.stories.mdx
 delete mode 100644 packages/input-amount/stories/index.stories.mdx
 delete mode 100644 packages/input-date/stories/index.stories.mdx
 delete mode 100644 packages/input-datepicker/stories/index.stories.mdx
 delete mode 100644 packages/input-email/stories/index.stories.mdx
 delete mode 100644 packages/input-iban/stories/index.stories.mdx
 delete mode 100644 packages/input-range/stories/index.stories.mdx
 delete mode 100644 packages/input/stories/index.stories.mdx
 delete mode 100644 packages/input/stories/translations/de-DE.js
 delete mode 100644 packages/input/stories/translations/de.js
 delete mode 100644 packages/input/stories/translations/en-GB.js
 delete mode 100644 packages/input/stories/translations/en.js
 delete mode 100644 packages/input/stories/translations/fr-FR.js
 delete mode 100644 packages/input/stories/translations/fr.js
 delete mode 100644 packages/input/stories/translations/nl-NL.js
 delete mode 100644 packages/input/stories/translations/nl.js
 delete mode 100644 packages/input/stories/translations/zh-CN.js
 delete mode 100644 packages/input/stories/translations/zh.js
 delete mode 100644 packages/intros/stories/buttons-intro.stories.mdx
 delete mode 100644 packages/intros/stories/lion-web-components.stories.mdx
 delete mode 100644 packages/intros/stories/navigation-intro.stories.mdx
 delete mode 100644 packages/intros/stories/others-intro.stories.mdx
 rename packages/localize/{docs => _docs}/amount-html.md (100%)
 rename packages/localize/{docs => _docs}/date.md (100%)
 rename packages/localize/{docs => _docs}/message.md (100%)
 rename packages/localize/{docs => _docs}/number.md (100%)
 create mode 100644 packages/localize/docs/10-features-overview.md
 create mode 100644 packages/localize/docs/20-numbers.md
 create mode 100644 packages/localize/docs/30-dates.md
 rename packages/localize/{stories/50-system-overview.stories.mdx => docs/50-system-overview.md} (99%)
 rename packages/localize/{stories/60-system-rationale.stories.mdx => docs/60-system-rationale.md} (96%)
 rename packages/localize/{stories => docs}/all-locales.js (100%)
 rename packages/localize/{stories => docs}/translations/en-AU.js (100%)
 rename packages/localize/{stories => docs}/translations/en-GB.js (100%)
 rename packages/localize/{stories => docs}/translations/en-US.js (100%)
 rename packages/localize/{stories => docs}/translations/en.js (100%)
 rename packages/localize/{stories => docs}/translations/nl-BE.js (100%)
 rename packages/localize/{stories => docs}/translations/nl-NL.js (100%)
 rename packages/localize/{stories => docs}/translations/nl.js (100%)
 delete mode 100644 packages/localize/stories/10-intro.stories.mdx
 delete mode 100644 packages/localize/stories/12-features-overview.stories.mdx
 delete mode 100644 packages/localize/stories/15-text.stories.mdx
 delete mode 100644 packages/localize/stories/25-numbers.stories.mdx
 delete mode 100644 packages/localize/stories/30-dates.stories.mdx
 delete mode 100644 packages/localize/stories/message.stories.js
 rename packages/overlays/{stories/20-index.stories.mdx => docs/20-index.md} (55%)
 rename packages/overlays/{stories/30-system-rationale.stories.mdx => docs/30-system-rationale.md} (98%)
 create mode 100644 packages/overlays/docs/40-system-configuration.md
 rename packages/overlays/{stories => docs}/applyDemoOverlayStyles.js (100%)
 rename packages/overlays/{stories => docs}/demo-overlay-system.js (95%)
 rename packages/overlays/{stories => docs}/directives/ref.js (100%)
 delete mode 100644 packages/overlays/stories/10-intro.stories.mdx
 delete mode 100644 packages/overlays/stories/40-system-configuration.stories.mdx
 delete mode 100644 packages/radio-group/stories/index.stories.mdx
 delete mode 100644 packages/select-rich/stories/index.stories.mdx
 delete mode 100644 packages/select/stories/index.stories.mdx
 delete mode 100644 packages/steps/stories/index.stories.mdx
 delete mode 100644 packages/switch/stories/index.stories.mdx
 delete mode 100644 packages/tabs/stories/index.stories.mdx
 delete mode 100644 packages/textarea/stories/index.stories.mdx
 delete mode 100644 packages/tooltip/stories/index.stories.mdx
 delete mode 100644 packages/tooltip/stories/tooltipDemoStyles.js
 rename packages/validate/docs/{ => assets}/FlowDiagram.md (100%)
 rename packages/validate/{stories/Overview.stories.mdx => docs/system.md} (93%)

diff --git a/.eslintrc.js b/.eslintrc.js
index 562ab2e5e..67da708c8 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -8,6 +8,7 @@ module.exports = {
         '**/test-node/**/*.js',
         '**/demo/**/*.js',
         '**/stories/**/*.js',
+        '**/docs/**/*.js',
         '**/*.config.js',
       ],
       rules: {
diff --git a/.markdownlint.json b/.markdownlint.json
index df0c79855..beda11a36 100644
--- a/.markdownlint.json
+++ b/.markdownlint.json
@@ -3,6 +3,6 @@
     "line_length": -1
   },
   "no-trailing-punctuation": {
-    "punctuation": ".,;:!。，；：！"
+    "punctuation": ".,;。，；：！"
   }
 }
diff --git a/.storybook/main.js b/.storybook/main.js
index 6db921120..19cd7f675 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -3,9 +3,26 @@ const path = require('path');
 
 module.exports = {
   stories: [
-    '../packages/*/stories/*.stories.{js,mdx}',
-    '../packages/helpers/*/stories/*.stories.{js,mdx}',
-    '../demo/stories/*.stories.{js,mdx}',
+    '../packages/*/README.md',
+    '../packages/*/docs/*.md',
+    '../docs/README.md',
+    '../docs/**/*.md',
+    '../README.md',
+    '../demo/README.md',
+    '../demo/docs/*.md',
+    '../packages/helpers/README.md',
+    '../packages/helpers/*/README.md',
+  ],
+  addons: [
+    // order of tabs in addons panel
+    'storybook-prebuilt/addon-actions/register.js',
+    'storybook-prebuilt/addon-knobs/register.js',
+    'storybook-prebuilt/addon-a11y/register.js',
+    'storybook-prebuilt/addon-docs/register.js',
+    // no tab in addons panel (e.g. load order does not matter here)
+    'storybook-prebuilt/addon-backgrounds/register.js',
+    'storybook-prebuilt/addon-links/register.js',
+    'storybook-prebuilt/addon-viewport/register.js',
   ],
   addons: [
     'storybook-prebuilt/addon-docs/register.js',
diff --git a/README.md b/README.md
index be472d400..8c3147b1e 100644
--- a/README.md
+++ b/README.md
@@ -1,5 +1,11 @@
 # Lion Web Components
 
+```js script
+export default {
+  title: 'Intro/Lion Web Components',
+};
+```
+
 Lion web components is a set of highly performant, accessible and flexible Web Components.
 They provide an unopinionated, white label layer that can be extended to your own layer of components.
 
@@ -13,6 +19,32 @@ We do have a [live Storybook](http://lion-web-components.netlify.com) which show
 
 **Please note:** This project uses Yarn [Workspaces](https://classic.yarnpkg.com/en/docs/workspaces). If you want to run all demos locally you need to get [Yarn](https://classic.yarnpkg.com/en/docs/install) and install all depencies by executing `yarn install`.
 
+## Features
+
+- pure es modules
+- exposes functions/classes and web components
+- provides pure functionality
+- fully accessible
+- built to be extended
+
+> Note: These demos may look a little bland but that is on purpose. They only come with functional stylings.
+> This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.
+
+## Systems
+
+Lion web components is logically organized in groups of systems.
+
+| System                                           | Description                                                                                                                                           |
+| ------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [Forms](?path=/docs/forms-intro--page)           | A system that lets you make complex forms with ease. Add validation, translations and use a wide range of pre made form controls.                     |
+| [Buttons](?path=/docs/buttons-intro--page)       | Every application needs buttons to allow interactions. These web components bring common UX patterns while still full integrated with (native) forms. |
+| [Overlays](?path=/docs/overlays-intro--page)     | If something needs to overlay content this is your place. Dialogs, Tooltips and a full overlay system to build more if needed                         |
+| [Navigation](?path=/docs/navigation-intro--page) | Components which are used to guide users                                                                                                              |
+| [Localize](?path=/docs/localize-intro--page)     | Localize text, numbers, dates and a way to store/fetch these data within web components                                                               |
+| [Icons](?path=/docs/icons-intro--page)           | Loading and displaying icons                                                                                                                          |
+| [Others](?path=/docs/others-intro--page)         | Features not fitting any other category                                                                                                               |
+| [Helpers](?path=/docs/helpers-intro--page)       | Helpers to make your and your life easier                                                                                                             |
+
 ## How to install
 
 ```bash
@@ -23,43 +55,43 @@ npm i @lion/<package-name>
 
 The accessibility column indicates whether the functionality is accessible in its core. Aspects like styling and content determine actual accessibility in usage.
 
-| Package                                         | Version                                                                                                                              | Description                                            | Accessibility              |
-| ----------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------------- |
-| **-- Buttons --**                               |                                                                                                                                      |                                                        |                            |
-| [button](./packages/button)                     | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button)                               | Button                                                 | ✔️                         |
-| [switch](./packages/switch)                     | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch)                               | Switch                                                 | ✔️                         |
-| **-- Forms --**                                 |                                                                                                                                      |                                                        |                            |
-| [form](./packages/form)                         | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                     | Wrapper for multiple form elements                     | ✔️                         |
-| [field](./packages/field)                       | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field)                                  | Base Class for all inputs                              | ✔️                         |
-| [fieldset](./packages/fieldset)                 | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                         | Group for form inputs                                  | ✔️                         |
-| [validate](./packages/validate)                 | [![validate](https://img.shields.io/npm/v/@lion/validate.svg)](https://www.npmjs.com/package/@lion/validate)                         | Validation for form components                         | n/a                        |
-| [checkbox](./packages/checkbox)                 | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox)                         | Checkbox form element                                  | ✔️                         |
-| [checkbox-group](./packages/checkbox-group)     | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group)       | Group of checkboxes                                    | ✔️                         |
-| [input](./packages/input)                       | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input)                                  | Input element for strings                              | ✔️                         |
-| [input-amount](./packages/input-amount)         | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount)             | Input element for amounts                              | ✔️                         |
-| [input-date](./packages/input-date)             | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date)                   | Input element for dates                                | ✔️                         |
-| [input-datepicker](./packages/input-datepicker) | [![input-datepicker](https://img.shields.io/npm/v/@lion/input-datepicker.svg)](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker              | ✔️                         |
-| [input-email](./packages/input-email)           | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email)                | Input element for e-mails                              | ✔️                         |
-| [input-iban](./packages/input-iban)             | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban)                   | Input element for IBANs                                | ✔️                         |
-| [input-range](./packages/input-range)           | [![input-range](https://img.shields.io/npm/v/@lion/input-range.svg)](https://www.npmjs.com/package/@lion/input-range)                | Input element for a range of values                    | ✔️                         |
-| [radio](./packages/radio)                       | [![radio](https://img.shields.io/npm/v/@lion/radio.svg)](https://www.npmjs.com/package/@lion/radio)                                  | Radio from element                                     | ✔️                         |
-| [radio-group](./packages/radio-group)           | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group)                | Group of radios                                        | ✔️                         |
-| [select](./packages/select)                     | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select)                               | Simple native dropdown element                         | ✔️                         |
-| [textarea](./packages/textarea)                 | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea)                         | Multiline text input                                   | ✔️                         |
-| **-- Overlays --**                              |                                                                                                                                      |                                                        |                            |
-| [overlays](./packages/overlays)                 | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays)                         | Overlay System                                         | ✔️                         |
-| [dialog](./packages/dialog)                     | [![dialog](https://img.shields.io/npm/v/@lion/dialog.svg)](https://www.npmjs.com/package/@lion/dialog)                               | Dialog element                                         | ✔️                         |
-| [tooltip](./packages/tooltip)                   | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip)                            | Tooltip element                                        | [#175][i175]               |
-| **-- Icons --**                                 |                                                                                                                                      |                                                        |                            |
-| [icon](./packages/icon)                         | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon)                                     | Display our svg icons                                  | [#173][i173], [#172][i172] |
-| **-- Navigation --**                            |                                                                                                                                      |                                                        |                            |
-| [steps](./packages/steps)                       | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps)                                  | Multi Step System                                      | n/a                        |
-| [tabs](./packages/tabs)                         | [![tBS](https://img.shields.io/npm/v/@lion/tabs.svg)](https://www.npmjs.com/package/@lion/tabs)                                      | Move between a small number of equally important views | n/a                        |
-| **-- Others --**                                |                                                                                                                                      |                                                        |                            |
-| [core](./packages/core)                         | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core)                                     | Core System (exports LitElement, lit-html)             | n/a                        |
-| [calendar](./packages/calendar)                 | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar)                         | Standalone calendar                                    | [#195][i195], [#194][i194] |
-| [localize](./packages/localize)                 | [![localize](https://img.shields.io/npm/v/@lion/localize.svg)](https://www.npmjs.com/package/@lion/localize)                         | Localize and translate your application/components     | n/a                        |
-| [ajax](./packages/ajax)                         | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax)                                     | Fetching data via ajax request                         | n/a                        |
+| Package                                                               | Version                                                                                                                              | Description                                            | Accessibility              |
+| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ | -------------------------- |
+| **-- Forms --**                                                       |                                                                                                                                      |                                                        | ✔️                         |
+| [form](?path=/docs/forms-form-overview--page)                         | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                     | Wrapper for multiple form elements                     | ✔️                         |
+| [field](?path=/docs/forms-system-overview--page)                      | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field)                                  | Base Class for all inputs                              | ✔️                         |
+| [fieldset](?path=/docs/forms-fieldset-overview--page)                 | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                         | Group for form inputs                                  | ✔️                         |
+| [validate](?path=/docs/form-system-validate-system--page)             | [![validate](https://img.shields.io/npm/v/@lion/validate.svg)](https://www.npmjs.com/package/@lion/validate)                         | Validation for form components                         | n/a                        |
+| [checkbox](?path=/docs/forms-checkbox--default-story)                 | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox)                         | Checkbox form element                                  | ✔️                         |
+| [checkbox-group](?path=/docs/forms-checkbox-group--default-story)     | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group)       | Group of checkboxes                                    | ✔️                         |
+| [input](?path=/docs/forms-input--default-story)                       | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input)                                  | Input element for strings                              | ✔️                         |
+| [input-amount](?path=/docs/forms-input-amount--default-story)         | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount)             | Input element for amounts                              | ✔️                         |
+| [input-date](?path=/docs/forms-input-date--default-story)             | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date)                   | Input element for dates                                | ✔️                         |
+| [input-datepicker](?path=/docs/forms-input-datepicker--default-story) | [![input-datepicker](https://img.shields.io/npm/v/@lion/input-datepicker.svg)](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker              | ✔️                         |
+| [input-email](?path=/docs/forms-input-email--default-story)           | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email)                | Input element for e-mails                              | ✔️                         |
+| [input-iban](?path=/docs/forms-input-iban--default-story)             | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban)                   | Input element for IBANs                                | ✔️                         |
+| [input-range](?path=/docs/forms-input-range--default-story)           | [![input-range](https://img.shields.io/npm/v/@lion/input-range.svg)](https://www.npmjs.com/package/@lion/input-range)                | Input element for a range of values                    | ✔️                         |
+| [radio](?path=/docs/forms-radio--default-story)                       | [![radio](https://img.shields.io/npm/v/@lion/radio.svg)](https://www.npmjs.com/package/@lion/radio)                                  | Radio from element                                     | ✔️                         |
+| [radio-group](?path=/docs/forms-radio-group--default-story)           | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group)                | Group of radios                                        | ✔️                         |
+| [select](?path=/docs/forms-select--default-story)                     | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select)                               | Simple native dropdown element                         | ✔️                         |
+| [textarea](?path=/docs/forms-textarea--default-story)                 | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea)                         | Multiline text input                                   | ✔️                         |
+| **-- Buttons --**                                                     |                                                                                                                                      |                                                        |                            |
+| [button](?path=/docs/buttons-button--default-story)                   | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button)                               | Button                                                 | ✔️                         |
+| [switch](?path=/docs/buttons-switch--default-off)                     | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch)                               | Switch                                                 | ✔️                         |
+| **-- Overlays --**                                                    |                                                                                                                                      |                                                        |                            |
+| [overlays](?path=/docs/overlays-system-overview--default-story)       | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays)                         | Overlay System                                         | ✔️                         |
+| [dialog](?path=/docs/overlays-dialog--default-story)                  | [![dialog](https://img.shields.io/npm/v/@lion/dialog.svg)](https://www.npmjs.com/package/@lion/dialog)                               | Dialog element                                         | ✔️                         |
+| [tooltip](?path=/docs/overlays-tooltip--default-story)                | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip)                            | Tooltip element                                        | [#175][i175]               |
+| **-- Icons --**                                                       |                                                                                                                                      |                                                        |                            |
+| [icon](?path=/docs/icons-icon--default-story)                         | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon)                                     | Display our svg icons                                  | [#173][i173], [#172][i172] |
+| **-- Navigation --**                                                  |                                                                                                                                      |                                                        |                            |
+| [steps](?path=/docs/navigation-steps--default-story)                  | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps)                                  | Multi Step System                                      | n/a                        |
+| [tabs](?path=/docs/navigation-tabs--default-story)                    | [![tBS](https://img.shields.io/npm/v/@lion/tabs.svg)](https://www.npmjs.com/package/@lion/tabs)                                      | Move between a small number of equally important views | n/a                        |
+| **-- Others --**                                                      |                                                                                                                                      |                                                        |                            |
+| [core](?path=/docs/deep-dives-core--page)                             | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core)                                     | Core System (exports LitElement, lit-html)             | n/a                        |
+| [localize](?path=/docs/localize-localize--default-story)              | [![localize](https://img.shields.io/npm/v/@lion/localize.svg)](https://www.npmjs.com/package/@lion/localize)                         | Localize and translate your application/components     | n/a                        |
+| [ajax](?path=/docs/others-ajax--default-story)                        | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax)                                     | Fetching data via ajax request                         | n/a                        |
+| [calendar](?path=/docs/calendar--default-story)                       | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar)                         | Standalone calendar                                    | [#195][i195], [#194][i194] |
 
 ## How to use
 
@@ -135,100 +167,6 @@ Check out our [coding guidelines](./docs/README.md) for more detailed informatio
 Lion Web Components are only as good as its contributions.
 Read our [contribution guide](./CONTRIBUTING.md) and feel free to enhance/improve Lion. We keep feature requests closed while we're not working on them.
 
-## Scoped elements
-
-The [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) provides methods for registering custom elements. One of the limitations of working with this global registry is that multiple versions of the same element cannot co-exist. This causes bottlenecks in software delivery that should be managed by the teams and complex build systems. [Scoped Custom Element Registries](https://github.com/w3c/webcomponents/issues/716) is a proposal that will solve the problem. Since this functionality won't be available (especially not cross browser) anytime soon, we've adopted [OpenWC's Scoped Elements](https://open-wc.org/scoped-element).
-
-Whenever a lion component uses composition (meaning it uses another lion component inside), we
-apply ScopedElementsMixin to make sure it uses the right version of this internal component.
-
-```js
-import { ScopedElementsMixin, LitElement, html } from '@lion/core';
-
-import { LionInput } from '@lion/input';
-import { LionButton } from '@lion/button';
-
-class MyElement extends ScopedElementsMixin(LitElement) {
-  static get scopedElements() {
-    return {
-      'lion-input': LionInput,
-      'lion-button': LionButton,
-    };
-  }
-
-  render() {
-    return html`
-      <lion-input label="Greeting" name="greeting" .modelValue=${'Hello world'}></lion-input>
-      <lion-button>Save</lion-button>
-    `;
-  }
-}
-```
-
-### Query selectors
-
-Since Scoped Elements changes tagnames under the hood, a tagname querySelector should be written
-like this:
-
-```js
-this.querySelector(this.constructor.getScopedTagName('lion-input'));
-```
-
-### CSS selectors
-
-Avoid tagname css selectors (we already avoid query selectors internally in lion, but just be aware
-that a selector like `lion-input {...}` will stop working ).
-
-### Edge cases
-
-Sometimes we need to render parts of a template to light dom for [accessibility](https://wicg.github.io/aom/explainer.html). For instance we render a node via lit-html that we append to the host element, so
-it gets slotted in the right position.
-In this case, we should also make sure that we also scope the rendered element.
-
-We can do this as follows:
-
-```js
-_myLightTemplate() {
-  return html`
-    This template may be overridden by a Subclasser.
-    Even I don't end up in shadow root, I need to be scoped to constructor.scopedElements as well.
-    <div>
-      <lion-button>True</lion-button>
-      <lion-input label="xyz"></lion-input>
-    </div>
-  `;
-}
-
-__getLightDomNode() {
-  const renderParent = document.createElement('div');
-  this.constructor.render(this._myLightTemplate(), renderParent, {
-    scopeName: this.localName,
-    eventContext: this,
-  });
-  // this node will be appended to the host
-  return renderParent.firstElementChild;
-}
-
-connectedCallback() {
-  super.connectedCallback();
-  this.appendChild(this.__getLightDomNode());
-}
-```
-
-In a less complex case, we might just want to add a child node to the dom.
-
-```js
-import { ScopedElementsMixin, LitElement } from '@lion/core';
-
-...
-
-__getLightDomNode() {
-  return document.createElement(this.constructor.getScopedTagName('lion-input'));
-}
-```
-
-We encourage you to have a look at [OpenWC's Scoped elements](https://open-wc.org/scoped-elements).
-
 ## Contact
 
 Feel free to create a github issue for any feedback or questions you might have.
@@ -236,11 +174,6 @@ You can also find us on the Polymer slack in the [#lion](https://polymer.slack.c
 
 You can join the Polymer slack by visiting [https://www.polymer-project.org/slack-invite](https://www.polymer-project.org/slack-invite).
 
-## Support and issues
-
-As stated above "support and issues time" is currently rather limited: feel free to open a discussion.
-However, we can not guarantee any response times.
-
 [i172]: https://github.com/ing-bank/lion/issues/172
 [i173]: https://github.com/ing-bank/lion/issues/173
 [i175]: https://github.com/ing-bank/lion/issues/175
diff --git a/demo/stories/10-announcement.stories.mdx b/demo/README.md
similarity index 97%
rename from demo/stories/10-announcement.stories.mdx
rename to demo/README.md
index a0bf42454..8e0f442d7 100644
--- a/demo/stories/10-announcement.stories.mdx
+++ b/demo/README.md
@@ -1,9 +1,11 @@
-import { Story, Meta, html, Preview } from '@open-wc/demoing-storybook';
-
-<Meta title="Intro/Announcement" />
-
 # ING open sources Lion: A library of performant, accessible & flexible Web Components
 
+```js script
+export default {
+  title: 'Intro/Announcement',
+};
+```
+
 **TL;DR:** Web development can be hard, whether you're making your own components, implementing Design Systems, support many different browsers, incorporating accessibility, or adding third party dependencies. Lion aims to make your life a little bit easier, by taking the groundwork of feature complete, accessible, performant, and framework agnostic components out of your hands! Check out the repo at [ing-bank/lion](https://github.com/ing-bank/lion).
 
 As some of you may already know, ING has a long and rich history of building Web Components, starting out with the Polymer library, all the way up to the recently released LitElement.
@@ -18,7 +20,7 @@ So today, I'm happy to share with you all that ING is open-sourcing its own core
 
 Imagine the following fictional scenario:
 
-> Lea is a developer who works at Betatech, and is working on a new in-house application. 
+> Lea is a developer who works at Betatech, and is working on a new in-house application.
 
 ### Framework Agnostic
 
@@ -51,6 +53,7 @@ Or, alternatively
 Does Lea's story feel relatable?
 
 It highlights multiple common issues in modern web development:
+
 - Finding and adding a dependency is a big deal
 - Picking something because of looks alone might not always be the best choice
 - Adjusting behavior or styling can be tough to maintain
@@ -60,7 +63,7 @@ It highlights multiple common issues in modern web development:
 
 🤔 Imagine having components that purely focus on functionality, and leave the design up to you  
 🤔 Imagine that these components come with great accessibility and performance  
-🤔 Imagine these components are highly extendable and flexible  
+🤔 Imagine these components are highly extendable and flexible
 
 Now stop imagining, and look at Lion 🦁
 
@@ -71,20 +74,22 @@ Now stop imagining, and look at Lion 🦁
 Lion is a white-label, open-source, framework-agnostic component library, and can be the foundation for your codified in-house Design System. Aligning on design and usability is already a tough challenge, with Lion, we hope to take some of the work out of your hands.
 
 ### White Label
+
 Lion is a core package of white label Web Components. What this means is that the core components only consist of very minimal styling, yet has all the fundamental functionalities. White label products are often created so others can easily rebrand them with their own visual identity. This is great because it means that everyone can use the core functionalities of our components while bringing their own branding or Design System because surprisingly, not everyone loves orange.
 
 And this is exactly what we at ING do as well. Our very own ing-web components extend the Lion components and apply our own ING visual identity which mostly is a thin layer on top of Lion.
 
 Check out the [Lion demo's](http://lion-web-components.netlify.com/). Looks plain, doesn't it? And now compare Lion to ing-web:
 
-![Lion - ing-web side by side](https://raw.githubusercontent.com/ing-bank/lion/master/demo/stories/side-by-side.png)
+![Lion - ing-web side by side](https://raw.githubusercontent.com/ing-bank/lion/master/demo/docs/assets/side-by-side.png)
 
 ### 🎯 Focus
+
 Lion was designed with a focus on global usage and reusability in mind. And as such, the following features were incorporated right from the start:
 
 ♻️ Reusability - Our components are meant to be distributed and used on a global scale  
 🚹 Accessibility - Our components are meant to be accessible for everyone  
-🚀 Performance - Our components are meant to be small, performant and fast  
+🚀 Performance - Our components are meant to be small, performant and fast
 
 These features allow us to roll out our components globally and have a single point of truth. It ensures that everyone in ING has a solid set of building blocks to build their application with, and get up and running in no time.
 
@@ -102,7 +107,7 @@ Lion is built from the ground up to allow for accessibility and extendability as
 
 > Everyone should use web components but not everyone should write them
 
-*- [Erik Kroes](https://twitter.com/erikkroes)*
+_- [Erik Kroes](https://twitter.com/erikkroes)_
 
 ## 🙋‍ Join us!
 
@@ -116,7 +121,7 @@ Additionally, the more users and contributors Lion has, the more stable the Lion
 
 ### Contribute to Lion!
 
-At the time of writing, Lion is still in beta phase. We'd love to have your feedback before going to a stable release, so: Do you like open source, and do you want to help Lion out? 
+At the time of writing, Lion is still in beta phase. We'd love to have your feedback before going to a stable release, so: Do you like open source, and do you want to help Lion out?
 You can do so by:
 
 - Reporting/fixing issues
@@ -153,7 +158,7 @@ export class LeaTabs extends LionTabs {
       super.styles,
       css`
         /* my stylings */
-      `
+      `,
     ];
   }
 
@@ -177,7 +182,9 @@ import { LitElement, html, css } from 'lit-element';
 
 export class LeaTab extends LitElement {
   static get styles() {
-    return css`/* my stylings */`;
+    return css`
+      /* my stylings */
+    `;
   }
 
   render() {
diff --git a/demo/docs/20-lea-tabs.md b/demo/docs/20-lea-tabs.md
new file mode 100644
index 000000000..4ece82176
--- /dev/null
+++ b/demo/docs/20-lea-tabs.md
@@ -0,0 +1,253 @@
+# lea Tabs
+
+> This is not a real implementation!
+>
+> It is an example of how you can reuse the functionality of Lion to create your own Style System
+
+`lea-tabs` implements tabs view to allow users to quickly move between a small number of equally important views.
+
+```js script
+import { html } from 'lit-html';
+import { LitElement } from '@lion/core';
+
+import '../lea-tabs.js';
+import '../lea-tab.js';
+import '../lea-tab-panel.js';
+
+export default {
+  title: 'Intro/Tabs Example',
+};
+```
+
+```js preview-story
+export const main = () => html`
+  <lea-tabs>
+    <lea-tab slot="tab">Info</lea-tab>
+    <lea-tab-panel slot="panel">
+      Info page with lots of information about us.
+    </lea-tab-panel>
+    <lea-tab slot="tab">Work</lea-tab>
+    <lea-tab-panel slot="panel">
+      Work page that showcases our work.
+    </lea-tab-panel>
+  </lea-tabs>
+`;
+```
+
+## How to use
+
+### Installation
+
+```sh
+npm i --save @lion/tabs;
+```
+
+### Usage
+
+```js
+import '@lion/tabs/lea-tabs.js';
+```
+
+```html
+<lea-tabs>
+  <lea-tab slot="tab">Info</lea-tab>
+  <lea-tab-panel slot="panel">
+    Info page with lots of information about us.
+  </lea-tab-panel>
+  <lea-tab slot="tab">Work</lea-tab>
+  <lea-tab-panel slot="panel">
+    Work page that showcases our work.
+  </lea-tab-panel>
+</lea-tabs>
+```
+
+## Examples
+
+### Selected Index
+
+You can set the `selectedIndex` to select a certain tab.
+
+```js preview-story
+export const selectedIndex = () => html`
+  <lea-tabs .selectedIndex=${1}>
+    <lea-tab slot="tab">Info</lea-tab>
+    <lea-tab-panel slot="panel">
+      Info page with lots of information about us.
+    </lea-tab-panel>
+    <lea-tab slot="tab">Work</lea-tab>
+    <lea-tab-panel slot="panel">
+      Work page that showcases our work.
+    </lea-tab-panel>
+  </lea-tabs>
+`;
+```
+
+### Slots Order
+
+The tab and panel slots are ordered by DOM order.
+
+This means you can switch the grouping in your `lea-tabs` from tab + panel to all tabs first or all panels first.
+
+```js preview-story
+export const slotsOrder = () => html`
+  <lea-tabs>
+    <lea-tab slot="tab">Info</lea-tab>
+    <lea-tab slot="tab">Work</lea-tab>
+    <lea-tab-panel slot="panel">
+      Info page with lots of information about us.
+    </lea-tab-panel>
+    <lea-tab-panel slot="panel">
+      Work page that showcases our work.
+    </lea-tab-panel>
+  </lea-tabs>
+`;
+```
+
+### Distribute New Elements
+
+Below, we demonstrate on how you could dynamically add new tab + panels.
+
+```js preview-story
+export const distributeNewElements = () => {
+  const tagName = 'lea-tabs-experimental';
+  if (!customElements.get(tagName)) {
+    customElements.define(
+      tagName,
+      class extends LitElement {
+        static get properties() {
+          return {
+            __collection: { type: Array },
+          };
+        }
+        render() {
+          return html`
+            <h3>Append</h3>
+            <button @click="${this.__handleAppendClick}">
+              Append
+            </button>
+            <lea-tabs id="appendTabs">
+              <lea-tab slot="tab">tab 1</lea-tab>
+              <lea-tab-panel slot="panel">panel 1</lea-tab-panel>
+              <lea-tab slot="tab">tab 2</lea-tab>
+              <lea-tab-panel slot="panel">panel 2</lea-tab-panel>
+            </lea-tabs>
+            <hr />
+            <h3>Push</h3>
+            <button @click="${this.__handlePushClick}">
+              Push
+            </button>
+            <lea-tabs id="pushTabs">
+              <lea-tab slot="tab">tab 1</lea-tab>
+              <lea-tab-panel slot="panel">panel 1</lea-tab-panel>
+              <lea-tab slot="tab">tab 2</lea-tab>
+              <lea-tab-panel slot="panel">panel 2</lea-tab-panel>
+              ${this.__collection.map(
+                item => html`
+                  <lea-tab slot="tab">${item.button}</lea-tab>
+                  <lea-tab-panel slot="panel">${item.panel}</lea-tab-panel>
+                `,
+              )}
+            </lea-tabs>
+          `;
+        }
+        constructor() {
+          super();
+          this.__collection = [];
+        }
+        __handleAppendClick() {
+          const tabsElement = this.shadowRoot.querySelector('#appendTabs');
+          const c = 2;
+          const n = Math.floor(tabsElement.children.length / 2);
+          for (let i = n + 1; i < n + c; i += 1) {
+            const tab = document.createElement('lea-tab');
+            tab.setAttribute('slot', 'tab');
+            tab.innerText = `tab ${i}`;
+            const panel = document.createElement('lea-tab-panel');
+            panel.setAttribute('slot', 'panel');
+            panel.innerText = `panel ${i}`;
+            tabsElement.append(tab);
+            tabsElement.append(panel);
+          }
+        }
+        __handlePushClick() {
+          const tabsElement = this.shadowRoot.querySelector('#pushTabs');
+          const i = Math.floor(tabsElement.children.length / 2) + 1;
+          this.__collection = [
+            ...this.__collection,
+            {
+              button: `tab ${i}`,
+              panel: `panel ${i}`,
+            },
+          ];
+        }
+      },
+    );
+  }
+  return html`
+    <lea-tabs-experimental></lea-tabs-experimental>
+  `;
+};
+```
+
+One way is by creating the DOM elements and appending them as needed.
+
+Inside your `lea-tabs` extension, an example for appending nodes on a certain button click:
+
+```js
+__handleAppendClick() {
+  const tabsAmount = this.children.length / 2;
+  const tab = document.createElement('lea-tab');
+  tab.setAttribute('slot', 'tab');
+  tab.innerText = `tab ${tabsAmount + 1}`;
+  const panel = document.createElement('lea-tab-panel');
+  panel.setAttribute('slot', 'panel');
+  panel.innerText = `panel ${tabsAmount + 1}`;
+  this.append(tab);
+  this.append(panel);
+}
+```
+
+The other way is by adding data to a Lit property where you loop over this property in your template.
+You then need to ensure this causes a re-render.
+
+```js
+__handlePushClick() {
+  const tabsAmount = this.children.length;
+  myCollection = [
+    ...myCollection,
+    {
+      button: `tab ${tabsAmount + 1}`,
+      panel: `panel ${tabsAmount + 1}`,
+    },
+  ];
+  renderMyCollection();
+}
+```
+
+Make sure your template re-renders when myCollection is updated.
+
+```html
+<lea-tabs id="pushTabs">
+  ${myCollection.map(item => html`
+  <lea-tab slot="tab">${item.button}</lea-tab>
+  <lea-tab-panel slot="panel">${item.panel}</lea-tab-panel>
+  `)}
+</lea-tabs>
+```
+
+## Rationale
+
+### No separate active/focus state when using keyboard
+
+We will immediately switch content as all our content comes from light dom (e.g. no latency)
+
+See Note at <https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-19>
+
+> It is recommended that tabs activate automatically when they receive focus as long as their
+> associated tab panels are displayed without noticeable latency. This typically requires tab
+> panel content to be preloaded.
+
+### Panels are not focusable
+
+Focusable elements should have a means to interact with them. Tab panels themselves do not offer any interactiveness.
+If there is a button or a form inside the tab panel then these elements get focused directly.
diff --git a/demo/stories/side-by-side.png b/demo/docs/assets/side-by-side.png
similarity index 100%
rename from demo/stories/side-by-side.png
rename to demo/docs/assets/side-by-side.png
diff --git a/demo/stories/20-lea-tabs.stories.mdx b/demo/stories/20-lea-tabs.stories.mdx
deleted file mode 100644
index 384b9eff6..000000000
--- a/demo/stories/20-lea-tabs.stories.mdx
+++ /dev/null
@@ -1,255 +0,0 @@
-import { Story, Meta, html, Preview } from '@open-wc/demoing-storybook';
-import { LitElement } from '@lion/core';
-
-import '../lea-tabs.js';
-import '../lea-tab.js';
-import '../lea-tab-panel.js';
-
-<Meta title="Intro/Tabs Example" parameters={{ component: 'lea-tabs' }} />
-
-# lea Tabs
-
-> This is not a real implementation!
->
-> It is an example of how you can reuse the functionality of Lion to create your own Style System
-
-`lea-tabs` implements tabs view to allow users to quickly move between a small number of equally important views.
-
-<Preview>
-  <Story name="default">
-    {html`
-      <lea-tabs>
-        <lea-tab slot="tab">Info</lea-tab>
-        <lea-tab-panel slot="panel">
-          Info page with lots of information about us.
-        </lea-tab-panel>
-        <lea-tab slot="tab">Work</lea-tab>
-        <lea-tab-panel slot="panel">
-          Work page that showcases our work.
-        </lea-tab-panel>
-      </lea-tabs>
-    `}
-  </Story>
-</Preview>
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/tabs;
-```
-
-### Usage
-
-```js
-import '@lion/tabs/lea-tabs.js';
-```
-
-```html
-<lea-tabs>
-  <lea-tab slot="tab">Info</lea-tab>
-  <lea-tab-panel slot="panel">
-    Info page with lots of information about us.
-  </lea-tab-panel>
-  <lea-tab slot="tab">Work</lea-tab>
-  <lea-tab-panel slot="panel">
-    Work page that showcases our work.
-  </lea-tab-panel>
-</lea-tabs>
-```
-
-## Examples
-
-### Selected Index
-
-You can set the `selectedIndex` to select a certain tab.
-
-<Preview>
-  <Story name="Selected index">
-    {html`
-      <lea-tabs .selectedIndex=${1}>
-        <lea-tab slot="tab">Info</lea-tab>
-        <lea-tab-panel slot="panel">
-          Info page with lots of information about us.
-        </lea-tab-panel>
-        <lea-tab slot="tab">Work</lea-tab>
-        <lea-tab-panel slot="panel">
-          Work page that showcases our work.
-        </lea-tab-panel>
-      </lea-tabs>
-    `}
-  </Story>
-</Preview>
-
-### Slots Order
-
-The tab and panel slots are ordered by DOM order.
-
-This means you can switch the grouping in your `lea-tabs` from tab + panel to all tabs first or all panels first.
-
-<Preview>
-  <Story name="Slots order">
-    {html`
-      <lea-tabs>
-        <lea-tab slot="tab">Info</lea-tab>
-        <lea-tab slot="tab">Work</lea-tab>
-        <lea-tab-panel slot="panel">
-          Info page with lots of information about us.
-        </lea-tab-panel>
-        <lea-tab-panel slot="panel">
-          Work page that showcases our work.
-        </lea-tab-panel>
-      </lea-tabs>
-    `}
-  </Story>
-</Preview>
-
-### Distribute New Elements
-
-Below, we demonstrate on how you could dynamically add new tab + panels.
-
-<Story name="Distribute new elements">
-  {() => {
-    const tagName = 'lea-tabs-experimental';
-    if (!customElements.get(tagName)) {
-      customElements.define(
-        tagName,
-        class extends LitElement {
-          static get properties() {
-            return {
-              __collection: { type: Array },
-            };
-          }
-          render() {
-            return html`
-              <h3>Append</h3>
-              <button @click="${this.__handleAppendClick}">
-                Append
-              </button>
-              <lea-tabs id="appendTabs">
-                <lea-tab slot="tab">tab 1</lea-tab>
-                <lea-tab-panel slot="panel">panel 1</lea-tab-panel>
-                <lea-tab slot="tab">tab 2</lea-tab>
-                <lea-tab-panel slot="panel">panel 2</lea-tab-panel>
-              </lea-tabs>
-              <hr />
-              <h3>Push</h3>
-              <button @click="${this.__handlePushClick}">
-                Push
-              </button>
-              <lea-tabs id="pushTabs">
-                <lea-tab slot="tab">tab 1</lea-tab>
-                <lea-tab-panel slot="panel">panel 1</lea-tab-panel>
-                <lea-tab slot="tab">tab 2</lea-tab>
-                <lea-tab-panel slot="panel">panel 2</lea-tab-panel>
-                ${this.__collection.map(
-                  item => html`
-                    <lea-tab slot="tab">${item.button}</lea-tab>
-                    <lea-tab-panel slot="panel">${item.panel}</lea-tab-panel>
-                  `,
-                )}
-              </lea-tabs>
-            `;
-          }
-          constructor() {
-            super();
-            this.__collection = [];
-          }
-          __handleAppendClick() {
-            const tabsElement = this.shadowRoot.querySelector('#appendTabs');
-            const c = 2;
-            const n = Math.floor(tabsElement.children.length / 2);
-            for (let i = n + 1; i < n + c; i += 1) {
-              const tab = document.createElement('lea-tab');
-              tab.setAttribute('slot', 'tab');
-              tab.innerText = `tab ${i}`;
-              const panel = document.createElement('lea-tab-panel');
-              panel.setAttribute('slot', 'panel');
-              panel.innerText = `panel ${i}`;
-              tabsElement.append(tab);
-              tabsElement.append(panel);
-            }
-          }
-          __handlePushClick() {
-            const tabsElement = this.shadowRoot.querySelector('#pushTabs');
-            const i = Math.floor(tabsElement.children.length / 2) + 1;
-            this.__collection = [
-              ...this.__collection,
-              {
-                button: `tab ${i}`,
-                panel: `panel ${i}`,
-              },
-            ];
-          }
-        },
-      );
-    }
-    return html`
-      <lea-tabs-experimental></lea-tabs-experimental>
-    `;
-  }}
-</Story>
-
-One way is by creating the DOM elements and appending them as needed.
-
-Inside your `lea-tabs` extension, an example for appending nodes on a certain button click:
-
-```js
-__handleAppendClick() {
-  const tabsAmount = this.children.length / 2;
-  const tab = document.createElement('lea-tab');
-  tab.setAttribute('slot', 'tab');
-  tab.innerText = `tab ${tabsAmount + 1}`;
-  const panel = document.createElement('lea-tab-panel');
-  panel.setAttribute('slot', 'panel');
-  panel.innerText = `panel ${tabsAmount + 1}`;
-  this.append(tab);
-  this.append(panel);
-}
-```
-
-The other way is by adding data to a Lit property where you loop over this property in your template.
-You then need to ensure this causes a re-render.
-
-```js
-__handlePushClick() {
-  const tabsAmount = this.children.length;
-  myCollection = [
-    ...myCollection,
-    {
-      button: `tab ${tabsAmount + 1}`,
-      panel: `panel ${tabsAmount + 1}`,
-    },
-  ];
-  renderMyCollection();
-}
-```
-
-Make sure your template re-renders when myCollection is updated.
-
-```html
-<lea-tabs id="pushTabs">
-  ${myCollection.map(item => html`
-  <lea-tab slot="tab">${item.button}</lea-tab>
-  <lea-tab-panel slot="panel">${item.panel}</lea-tab-panel>
-  `)}
-</lea-tabs>
-```
-
-## Rationale
-
-### No separate active/focus state when using keyboard
-
-We will immediately switch content as all our content comes from light dom (e.g. no latency)
-
-See Note at <https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-19>
-
-> It is recommended that tabs activate automatically when they receive focus as long as their
-> associated tab panels are displayed without noticeable latency. This typically requires tab
-> panel content to be preloaded.
-
-### Panels are not focusable
-
-Focusable elements should have a means to interact with them. Tab panels themselves do not offer any interactiveness.
-If there is a button or a form inside the tab panel then these elements get focused directly.
diff --git a/docs/README.md b/docs/README.md
index 9671ac7c7..74610c7a8 100644
--- a/docs/README.md
+++ b/docs/README.md
@@ -1,5 +1,13 @@
 # Coding Guidelines
 
-First be sure to understand our [definitions](./definitions.md).
+```js script
+export default {
+  title: 'Guidelines/Intro',
+};
+```
 
-- [Guidelines for Styling](./guidelines-styling.md)
+First be sure to understand our [definitions](?path=/docs/guidelines-definitions--page).
+
+- [Guidelines for Styling](?path=/docs/guidelines-styling--page)
+- [Guidelines for Scoped Elements](?path=/docs/guidelines-scoped-elements--page)
+- [Guidelines for SubClasser APIs](?path=/docs/guidelines-subclasser-apis--page)
diff --git a/docs/definitions.md b/docs/definitions.md
deleted file mode 100644
index 81bd921fc..000000000
--- a/docs/definitions.md
+++ /dev/null
@@ -1,52 +0,0 @@
-# Definitions and terms
-
-Below you will find a list of definitions and terms that will be used throughout our code
-documentation.
-
-- `Application Developer`:
-  Developers consuming our webcomponents inside an application (not extending them).
-  Application Developers are only allowed to interact with `public` properties and methods.
-  Can be abbreviated as `AD`. Sometimes also called `Consuming Developer`.
-
-- `Subclasser`:
-  Developers extending our webcomponents. For instance: `MaterialInput extends LionInput`.
-  Subclassers have access to protected methods (prefixed with an underscore or marked as protected),
-  but not to private methods.
-
-- `public`:
-  Methods and properties are public when they are not prefixed by an underscore.
-  They can be used by Application Developers.
-
-  ```js
-  class SoccerPlayer {
-    kickBall() {
-      // Soccer player can kick a ball
-    }
-  }
-  ```
-
-- `protected`:
-  Methods and properties are protected when they contain one underscore or are explicitly marked as
-  protected in the code.
-  They can be used by Subclassers.
-
-  ```js
-  class SoccerPlayer {
-    _catchBall() {
-      // Soccer player usually do not need to catch a ball (with it's hands)
-    }
-  }
-  ```
-
-- `private`:
-  Methods and properties are protected when they contain two underscores or are explicitly marked as
-  private in the code.
-  They can be used within the class where they are defined (developers of Lion components).
-
-  ```js
-  class SoccerPlayer {
-    __score() {
-      // internally save how many goals have been made
-    }
-  }
-  ```
diff --git a/docs/guidelines-styling.md b/docs/guidelines-styling.md
deleted file mode 100644
index 77ceaf519..000000000
--- a/docs/guidelines-styling.md
+++ /dev/null
@@ -1,205 +0,0 @@
-# Guidlines for Styling
-
-## Markup and styling
-
-All Lion webcomponents have white label styling: this means theming is not applied,
-but functional styling is.
-
-### Functional styling
-
-Functional styling can be divided into defaults for 'basic layout' and 'accessibility'.
-Examples for both categories can be found below:
-
-- Basic layout examples:
-
-  - A dropdown menu has 'position: absolute'
-  - A lion-button might behave as an 'display: inline-block' element
-  - A suffix attached to an input is horizontally positioned (instead of vertically stacked)
-
-- Accessibility examples:
-  - content (for instance a caption in a table) can be 'visually hidden': it will be
-    readable by screen readers, but invisible for end users
-  - when an html table is used, we allow [subclassers](./definitions.md) to override the display
-    property ('table-cell') to 'flex'. By putting the proper accessible roles ('role="cell"') in the
-    markup, we guaruantee our markup stays accessible
-
-Although Lion components try to stay as unbiased as possible with regard to styling, defaults will
-be needed. In these cases we try to follow the platform as much as possible. If the platform
-doesn't provide defaults, the largest common denominator across exisiting UI frameworks is taken as
-a lead.
-
-## Style components
-
-A style component consists of a set of css classes mapping to a certain html structure. Although css
-components are often implemented by webcomponents, they should be considered modules on their own,
-reusable in different contexts: they should be considered the lowest abstraction layer of a
-webcomponent.
-
-A webcomponent usually implements a css module (mapped at host level), but the opposite is not
-necessarily true: a css module doesn't have to be used inside a webcomponent or at the root level
-of a webcomponent.
-
-Advantages of developing style components isolated from webcomponents are:
-
-- They can be reused in non shadow dom contexts.
-- Not everything has to be a webcomponent: anchor or card styling inside a webcomponent would be a
-  matter of importing a style component into a shadowroot.
-
-### Requirements
-
-Style components are written with the following assumptions in mind:
-
-- **Environment agnostic**: Lion webcomponents are unopinionated about their environment: they
-  should be usable in every context/framework/technology thinkable, regardless of whether shadow dom
-  is used.
-- **Customisable**: They should provide an api for [subclassers](./definitions.md):
-  - **white label**: components (just like webcomponents) are white label components. They provide
-    a flexible html structure which should be mappable to any Design System.
-    This approach is inspired by [Inuitcss](https://github.com/inuitcss/inuitcss) (an architectural
-    foundation for white label style components) and [Bootstrap Material](https://fezvrasta.github.io/bootstrap-material-design/)
-    (a Material Design system based on existing Bootstrap html/class names).
-    This is also [a great example of a Design System](https://www.carbondesignsystem.com/components/checkbox/code)
-    taking this(style components as lowest abstraction layer) approach.
-  - **well structured**: for clear, readable and maintainable code we use [BEM](http://getbem.com/):
-    it forces the
-    developer to think about component structure in terms of 'block', 'element' and 'modifier'
-    parts/roles. The classes defined in a BEM component form the api for a
-    [subclasser](./definitions.md): he can 'fill in' the BEM selectors by overriding them in the
-    `static get styles()` configuration property on the constructor of a webcomponent.
-  - **flexible markup**: By making the HTML structure purposely 'loose', multiple Design Systems can
-    be made compatible with the style component. When the default html/css structure is not flexible
-    enough, it can be extended by creating new BEM element selectors.
-
-## Why BEM?
-
-For css class naming, we use [BEM](http://getbem.com/) naming conventions. This helps you identify
-semantics of your markup at a quick glance, resulting in more readable and maintainable code.
-BEM provides us the following advantages:
-
-- **Clear namings** that convey meaning about semantics and structure at a quick glance
-- **Prevent collisions** within shadow roots. Larger shadow roots using multiple style components
-  would easily collide when css selectors would be scoped to the shadow dom in which they were
-  created. For instance, calling the header of a card '.header' instead of '.c-card\_\_header'
-  would make the card component not reusable in different contexts.
-- **Maximum flexibility** we can write css regardless of context. When we create a style component
-  for a card, we can offer it as a style component only and later decide to offer it as a webcomponent.
-  Or offer the style component
-  as a more lower level api for advanced use cases and the webcomponent (that has limiting markup and
-  styling options) for the majority of cases.
-  Also, when we already have a webcomponent for the card and people want to create a custom card
-  component, it might make more sense to write a new webcomponent instead of extending the existing
-  card webcomponent.
-  Having style components as described above, allows for maximum flexibility in these scenarios.
-  Future CSS updates can then be done from a central place, without having to rewrite forked webcomponents.
-- **Performance** we aim for applications having a limited number of shadow roots and we consider
-  shadow root creation a performance concern. Style components reduce the need for shadow roots.
-  <!-- TODO: we definitely suffered here in the Polymer era. We might want to create some new perf
-  tests for our lit-element based apps to verify this claim again. -->
-
-### Challenges with BEM in shadow dom
-
-Mapping BEM components to shadow root is not really straightforward:
-
-1. host styles should be rewritten to `:host {}` instead of `.my-block {}`
-2. slot styles be rewritten to `::slotted(.my-block__element)` instead of `.my-block__element`
-3. we should not [self-apply classes](https://developers.google.com/web/fundamentals/web-components/best-practices)
-  on host level. Apart from this being a bad practice, it will trigger linting errors in our setup.
-
-### Mapping host and slot styles
-
-The [CSS Module](https://github.com/w3c/webcomponents/issues/759) and [CSS Selector](https://github.com/w3c/csswg-drafts/issues/3714) proposals would allow us to reuse BEM components more easily within webcomponents.
-We might also think about other ways of creating build steps that would allow us to map BEM
-components to a shadow root, making it possible to map hosts and slots in an eay way.
-
-<!-- TODO: quite important that we find a solution to this problem -->
-
-### No self-application of classes
-
-In order to adhere to this rule, notation of our BEM modifiers that live on the host (which are
-ususally written like `.my-block--my-modifier`) will be rewritten to `.my-block[my-modifier]`
-Although this would only be needed for the third challenge as described above, for consistency,
-we apply it to all our modifiers within our style component.
-So for instance `.my-block__element--my-other-modifier` becomes
-`.my-block__element[my-other-modifier]`.
-
-### Why mapping style components to the host matters
-
-- **flexible host overrides**:
-  Imagine we have a style component `.c-alert` and we want to map this to a webcomponent `<my-alert>`.
-  In our Design system it might be a good practice to give all our block components a default bottom
-  margin of 16px. An [Application Developer](./definitions.md) might need an instance of `<my-alert>` where he wants to
-  set this bottom margin to 0.
-  If the margin-bottom of 16px would not be defined on the host level but one level deeper (the first
-  div element within the shadow root of `<my-alert>`), the Application Developer needs to apply a
-  negative margin of -16px. The latter would be a bad practice.
-
-- **easily map modifiers**:
-  If we continue with our alert example and we have a flag 'is-closeable', we might need to adjust
-  styling based on that. In this case we assume the attribute 'is-closeable' serves as a styling
-  hook for the `.c-alert` component.
-
-## Css variables
-
-Css variables will not be added in our white label style components, but adding them in your own
-extension layer would be a perfect fit.
-
-## Parts and themes
-
-The `::part` and `::theme` specs might currently not be widely adopted enough to be used inside
-style components. When they are, we could be consider to add them later to our components as a means
-to theme components (changing a whole Design System is not a good idea).
-
-<!-- TODO: check if needed for story above, else delete
-It would mainly be benificial when:
-
-- styles need to be reused in a context where extending is not a solution/forking is needed (which
-happened quite some times in our previous components lib, making our core styles less scalable).
-
-- style components (and their corresponding html structure) are considered the core building
-blocks of a Design System. Webcomponents provide a developer friendly abstraction that mainly
-sees fit
-
-### Naming Conventions
-
-For css class naming, we use BEM naming conventions. This helps you identify semantics of
-your markup at a quick glance, resulting in more readable and maintainable code.
-BEM is an abbreviation for:
-- Block
-- Element
-- Modifier
-
-## webcomponents
-
-### HTML Structure
-
-Despite not having applied any styling by default, our components do have an html structure that
-allows [subclassers](./definitions.md) to easily extend them.
-Webcomponents can be
-
-### BEM and shadow DOM
-
-Although BEM naming conventions partly encapsulate
-
-All CSS our components is written from a generic mindset, following BEM conventions:
-https://en.bem.info/methodology/
-
-Although the CSS and HTML are implemented by the component, they should be regarded as
-totally decoupled.
-
-Not only does this force us to write better structured css, it also allows for future
-reusability in many different ways like:
- - disabling shadow DOM for a component (for water proof encapsulation can be combined with
-  a build step)
- - easier translation to more flexible, WebComponents agnostic solutions like JSS
-  (allowing extends, mixins, reasoning, IDE integration, tree shaking etc.)
- - export to a CSS module for reuse in an outer context
-
-Please note that the HTML structure is purposely 'loose', allowing multiple design systems
-to be compatible with the style component.
-Note that every occurence of '::slotted(*)' can be rewritten to '> *' for use in an other
-context
--->
-
-<!-- TODO:
- - follow https://cssguidelin.es/ and/or inuitcss: by prefixing our components with 'c-', we mark
-    our components as core components, ensuring they never conflict with css created by  -->
diff --git a/docs/guidelines/10-guidelines-definitions.md b/docs/guidelines/10-guidelines-definitions.md
new file mode 100644
index 000000000..d44cc3312
--- /dev/null
+++ b/docs/guidelines/10-guidelines-definitions.md
@@ -0,0 +1,63 @@
+# Guidelines definitions and terms
+
+```js script
+export default {
+  title: 'Guidelines/Definitions',
+};
+```
+
+Below you will find a list of definitions and terms that will be used throughout our code
+documentation.
+
+## Application Developer
+
+Developers consuming our web components inside an application (not extending them).
+Application Developers are only allowed to interact with `public` properties and methods.
+Can be abbreviated as `AD`. Sometimes also called `Consuming Developer`.
+
+## Subclasser
+
+Developers extending our web components. For instance: `class MaterialInput extends LionInput`.
+Subclassers have access to protected methods (prefixed with an underscore or marked as protected),
+but not to private methods.
+
+## public
+
+Methods and properties are public when they are not prefixed by an underscore.
+They can be used by Application Developers.
+
+```js
+class SoccerPlayer {
+  kickBall() {
+    // Soccer player can kick a ball
+  }
+}
+```
+
+## protected
+
+Methods and properties are protected when they contain one underscore or are explicitly marked as
+protected in the code.
+They can be used by Subclassers.
+
+```js
+class SoccerPlayer {
+  _catchBall() {
+    // Soccer player usually do not need to catch a ball (with it's hands)
+  }
+}
+```
+
+## private
+
+Methods and properties are protected when they contain two underscores or are explicitly marked as
+private in the code.
+They can be only used within the class where they are defined (developers of Lion components).
+
+```js
+class SoccerPlayer {
+  __score() {
+    // internally save how many goals have been made
+  }
+}
+```
diff --git a/docs/guidelines/20-guidelines-styling.md b/docs/guidelines/20-guidelines-styling.md
new file mode 100644
index 000000000..e7a3ea9d4
--- /dev/null
+++ b/docs/guidelines/20-guidelines-styling.md
@@ -0,0 +1,46 @@
+# Guidelines for Styling
+
+```js script
+export default {
+  title: 'Guidelines/Styling',
+};
+```
+
+## Markup and styling
+
+All Lion web components have white label styling: this means theming is not applied,
+but functional styling is.
+
+### Functional styling
+
+Functional styling can be divided into defaults for `basic layout` and `accessibility`.
+Examples for both categories can be found below:
+
+- Basic layout examples:
+
+  - A dropdown menu has `position: absolute;`
+  - A lion-button might behave as an `display: inline-block;` element
+  - A suffix attached to an input is horizontally positioned (instead of vertically stacked)
+
+- Accessibility examples:
+  - content (for instance a caption in a table) can be `visually hidden`: it will be
+    readable by screen readers, but invisible for end users
+  - when an html table is used, we allow [subclassers](?path=/docs/guidelines-definitions--page#subclasser) to override the display
+    property (`table-cell`) to `flex`. By putting the proper accessible roles (`role="cell"`) in the
+    markup, we guarantee our markup stays accessible
+
+Although Lion components try to stay as unbiased as possible with regard to styling, defaults will
+be needed. In these cases we try to follow the platform as much as possible. If the platform
+doesn't provide defaults, the largest common denominator across existing UI frameworks is taken as
+a lead.
+
+## Css variables
+
+Css variables will not be added in our white label style components, but adding them in your own
+extension layer would be a perfect fit.
+
+## Parts and themes
+
+The `::part` and `::theme` specs might currently not be widely adopted enough to be used inside
+style components. When they are, we could be consider to add them later to our components as a means
+to theme components (changing a whole Design System is not a good idea).
diff --git a/docs/guidelines/30-guidelines-scoped-elements.md b/docs/guidelines/30-guidelines-scoped-elements.md
new file mode 100644
index 000000000..74f616ed7
--- /dev/null
+++ b/docs/guidelines/30-guidelines-scoped-elements.md
@@ -0,0 +1,107 @@
+# Guidelines Scoped Elements
+
+```js script
+export default {
+  title: 'Guidelines/Scoped Elements',
+};
+```
+
+The [CustomElementRegistry](https://developer.mozilla.org/en-US/docs/Web/API/CustomElementRegistry) provides methods for registering custom elements. One of the limitations of working with this global registry is that multiple versions of the same element cannot co-exist. This causes bottlenecks in software delivery that should be managed by the teams and complex build systems. [Scoped Custom Element Registries](https://github.com/w3c/webcomponents/issues/716) is a proposal that will solve the problem. Since this functionality won't be available (especially not cross browser) anytime soon, we've adopted [OpenWC's Scoped Elements](https://open-wc.org/scoped-element).
+
+Whenever a lion component uses composition (meaning it uses another lion component inside), we
+apply ScopedElementsMixin to make sure it uses the right version of this internal component.
+
+```js
+import { ScopedElementsMixin, LitElement, html } from '@lion/core';
+
+import { LionInput } from '@lion/input';
+import { LionButton } from '@lion/button';
+
+class MyElement extends ScopedElementsMixin(LitElement) {
+  static get scopedElements() {
+    return {
+      'lion-input': LionInput,
+      'lion-button': LionButton,
+    };
+  }
+
+  render() {
+    return html`
+      <lion-input label="Greeting" name="greeting" .modelValue=${'Hello world'}></lion-input>
+      <lion-button>Save</lion-button>
+    `;
+  }
+}
+```
+
+## Query selectors
+
+Since Scoped Elements changes tagnames under the hood, a tagname querySelector should be written
+like this:
+
+```js
+this.querySelector(getTagName('lion-input', this.constructor.scopedElements));
+```
+
+## CSS selectors
+
+Avoid tagname css selectors.
+We already avoid query selectors internally in lion, but just be aware that a selector like
+
+```css
+lion-input {
+  padding: 20px;
+}
+```
+
+will stop working.
+
+## Edge cases
+
+Sometimes we need to render parts of a template to light dom for [accessibility](https://wicg.github.io/aom/explainer.html). For instance we render a node via lit-html that we append to the host element, so
+it gets slotted in the right position.
+In this case, we should also make sure that we also scope the rendered element.
+
+We can do this as follows:
+
+```js
+_myLightTemplate() {
+  return html`
+    This template may be overridden by a Subclasser.
+    Even I don't end up in shadow root, I need to be scoped to constructor.scopedElements as well.
+    <div>
+      <lion-button>True</lion-button>
+      <lion-input label="xyz"></lion-input>
+    </div>
+  `;
+}
+
+__getLightDomNode() {
+  const renderParent = document.createElement('div');
+  this.constructor.render(this._myLightTemplate(), renderParent, {
+    scopeName: this.localName,
+    eventContext: this,
+  });
+  // this node will be appended to the host
+  return renderParent.firstElementChild;
+}
+
+connectedCallback() {
+  super.connectedCallback();
+  this.appendChild(this.__getLightDomNode());
+}
+```
+
+In a less complex case, we might just want to add a child node to the dom.
+
+```js
+import { ScopedElementsMixin, LitElement, getScopedTagNamegetScopedTagName  } from '@lion/core';
+
+...
+
+__getLightDomNode() {
+  return document.createElement(getScopedTagName('lion-input', this.constructor.scopedElements));
+}
+```
+
+We encourage you to have a look at [OpenWC's Scoped elements](https://open-wc.org/scoped-elements).
diff --git a/docs/subclasser-apis.md b/docs/guidelines/40-guidelines-subclasser-apis.md
similarity index 67%
rename from docs/subclasser-apis.md
rename to docs/guidelines/40-guidelines-subclasser-apis.md
index 41bfe1022..207e8ea01 100644
--- a/docs/subclasser-apis.md
+++ b/docs/guidelines/40-guidelines-subclasser-apis.md
@@ -1,5 +1,11 @@
 # Subclasser apis
 
+```js script
+export default {
+  title: 'Guidelines/Subclasser APIs',
+};
+```
+
 In order to make it easy for Subclassers to extend our components, we follow a certain set
 of best practices naming conventions to make our code predictable.
 
@@ -7,20 +13,19 @@ of best practices naming conventions to make our code predictable.
 
 ### Template naming conventions
 
-For template, we have the naming convention that every overridable template starts with an
-underscore and ends with
+For template, that do need access to the instance of the web component there is a prefix `_render/__render`.
+Examples are `__renderHeader` and `__renderData`.
 
-### Seperation of concerns
+### Separation of concerns
 
 Our components should make it possible to override markup and styling, without having to redefine
 functionality.
-By using the spread directive, we can achieve this. For more info, see:
-[https://github.com/ing-bank/lion/issues/591](explanation).
+By using the spread directive, we can achieve this. For more info, see [explanation](https://github.com/ing-bank/lion/issues/591).
 
 ## Node references
 
 As a Subclasser, you sometimes need access to a protected node inside the shadow dom.
-Most functional nodes have their own getters. A Subclasser can acces those in his extension and
+Most functional nodes have their own getters. A Subclasser can access those in his extension and
 in some cases, override these getters.
 
 ### Node naming conventions
diff --git a/docs/intros/intros-buttons.md b/docs/intros/intros-buttons.md
new file mode 100644
index 000000000..37f17609d
--- /dev/null
+++ b/docs/intros/intros-buttons.md
@@ -0,0 +1,22 @@
+# Buttons
+
+Buttons are clickable elements.
+
+## Features
+
+- fully accessible
+
+## Packages
+
+The following buttons area published.
+
+| Package                                             | Version                                                                                                | Description |
+| --------------------------------------------------- | ------------------------------------------------------------------------------------------------------ | ----------- |
+| [button](?path=/docs/buttons-button--default-story) | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button) | Button      |
+| [switch](?path=/docs/buttons-switch--default-off)   | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch) | Switch      |
+
+```js script
+export default {
+  title: 'Buttons/Intro',
+};
+```
diff --git a/packages/intros/stories/icon-intro.stories.mdx b/docs/intros/intros-icon.md
similarity index 87%
rename from packages/intros/stories/icon-intro.stories.mdx
rename to docs/intros/intros-icon.md
index a878edcee..1b7e7e24b 100644
--- a/packages/intros/stories/icon-intro.stories.mdx
+++ b/docs/intros/intros-icon.md
@@ -1,7 +1,3 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-<Meta title="Icons/Intro" />
-
 # Icons
 
 Icon system for managing iconsets, taking into account performance, maintainability and scalability.
@@ -13,3 +9,9 @@ Icons are SVGs so they can be easily scaled and styled with CSS.
 | Package                                       | Version                                                                                          | Description |
 | --------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------- |
 | [icon](?path=/docs/icons-icon--default-story) | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon) | Icon        |
+
+```js script
+export default {
+  title: 'Icons/Intro',
+};
+```
diff --git a/docs/intros/intros-navigation.md b/docs/intros/intros-navigation.md
new file mode 100644
index 000000000..c221c9576
--- /dev/null
+++ b/docs/intros/intros-navigation.md
@@ -0,0 +1,20 @@
+# Navigation
+
+Navigational elements are used to guide users within your page.
+
+## Features
+
+- fully accessible
+
+## Packages
+
+| Package                                              | Version                                                                                             | Description                                            |
+| ---------------------------------------------------- | --------------------------------------------------------------------------------------------------- | ------------------------------------------------------ |
+| [steps](?path=/docs/navigation-steps--default-story) | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps) | Multi Step System                                      |
+| [tabs](?path=/docs/navigation-tabs--default-story)   | [![tBS](https://img.shields.io/npm/v/@lion/tabs.svg)](https://www.npmjs.com/package/@lion/tabs)     | Move between a small number of equally important views |
+
+```js script
+export default {
+  title: 'Navigation/Intro',
+};
+```
diff --git a/docs/intros/intros-others.md b/docs/intros/intros-others.md
new file mode 100644
index 000000000..18a669150
--- /dev/null
+++ b/docs/intros/intros-others.md
@@ -0,0 +1,17 @@
+# Others
+
+Features not fitting any other category.
+
+## Packages
+
+| Package                                                | Version                                                                                                      | Description |
+| ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------ | ----------- |
+| [ajax](?path=/docs/others-ajax--default-story)         | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax)             | Ajax        |
+| [calendar](?path=/docs/others-calendar--default-story) | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar) | Calendar    |
+| [core](?path=/docs/others-system-core--page)           | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core)             | Core        |
+
+```js script
+export default {
+  title: 'Others/Intro',
+};
+```
diff --git a/docs/rationals/001-side-effects.md b/docs/rationals/001-side-effects.md
index d6a84b766..be313baa2 100644
--- a/docs/rationals/001-side-effects.md
+++ b/docs/rationals/001-side-effects.md
@@ -198,6 +198,12 @@ console.log(somethingElse2);
 // console.log(ctrl.manager.list);
 ```
 
+```js script
+export default {
+  title: 'Rationals/Side Effects',
+};
+```
+
 [1]: https://rollupjs.org/repl/?version=2.10.2&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMHNvbWV0aGluZ0Vsc2UlMkMlMjBvdmVybGF5cyUyMCU3RCUyMGZyb20lMjAnLiUyRm92ZXJsYXlzLmpzJyUzQiU1Q24lNUNuY29uc29sZS5sb2coc29tZXRoaW5nRWxzZSklM0IlMjIlMkMlMjJpc0VudHJ5JTIyJTNBdHJ1ZSU3RCUyQyU3QiUyMm5hbWUlMjIlM0ElMjJvdmVybGF5cy5qcyUyMiUyQyUyMmNvZGUlMjIlM0ElMjJjbGFzcyUyME92ZXJsYXlNYW5hZ2VyJTIwJTdCJTdEJTVDbiU1Q25leHBvcnQlMjBsZXQlMjBvdmVybGF5cyUyMCUzRCUyMG5ldyUyME92ZXJsYXlNYW5hZ2VyKCklM0IlNUNuJTVDbmV4cG9ydCUyMGZ1bmN0aW9uJTIwc2V0T3ZlcmxheXMobmV3T3ZlcmxheXMpJTIwJTdCJTVDbiU1Q3RvdmVybGF5cyUyMCUzRCUyMG5ld092ZXJsYXlzJTNCJTVDbiU3RCU1Q24lNUNuZXhwb3J0JTIwY29uc3QlMjBzb21ldGhpbmdFbHNlJTIwJTNEJTIwJ3NvbWV0aGluZyUyMGVsc2UnJTNCJTIyJTdEJTVEJTJDJTIyb3B0aW9ucyUyMiUzQSU3QiUyMmZvcm1hdCUyMiUzQSUyMmVzJTIyJTJDJTIybmFtZSUyMiUzQSUyMm15QnVuZGxlJTIyJTJDJTIyYW1kJTIyJTNBJTdCJTIyaWQlMjIlM0ElMjIlMjIlN0QlMkMlMjJnbG9iYWxzJTIyJTNBJTdCJTdEJTdEJTJDJTIyZXhhbXBsZSUyMiUzQW51bGwlN0Q=
 [2]: https://rollupjs.org/repl/?version=2.10.2&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMHNvbWV0aGluZ0Vsc2UlMkMlMjBvdmVybGF5cyUyMCU3RCUyMGZyb20lMjAnLiUyRm92ZXJsYXlzLmpzJyUzQiU1Q25pbXBvcnQlMjAnLiUyRm92ZXJyaWRlLmpzJyUzQiU1Q24lNUNuY29uc29sZS5sb2coc29tZXRoaW5nRWxzZSklM0IlNUNuJTVDbiUyRiUyRiUyMHRoaXMlMjB3aWxsJTIwdHJpZ2dlciUyMGxvYWRpbmclMjBvZiUyMGZ1bGwlMjBvdmVybGF5cy5qcyUyMCUyNiUyMG92ZXJyaWRlLmpzJTIwY29kZSU1Q24lMkYlMkYlMjBjb25zb2xlLmxvZyhvdmVybGF5cy5saXN0KSUzQiUyMiUyQyUyMmlzRW50cnklMjIlM0F0cnVlJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMm92ZXJsYXlzLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmNsYXNzJTIwT3ZlcmxheU1hbmFnZXIlMjAlN0IlN0QlNUNuJTVDbmV4cG9ydCUyMGxldCUyMG92ZXJsYXlzJTIwJTNEJTIwbmV3JTIwT3ZlcmxheU1hbmFnZXIoKSUzQiU1Q24lNUNuZXhwb3J0JTIwZnVuY3Rpb24lMjBzZXRPdmVybGF5cyhuZXdPdmVybGF5cyklMjAlN0IlNUNuJTVDdG92ZXJsYXlzJTIwJTNEJTIwbmV3T3ZlcmxheXMlM0IlNUNuJTdEJTVDbiU1Q25leHBvcnQlMjBjb25zdCUyMHNvbWV0aGluZ0Vsc2UlMjAlM0QlMjAnc29tZXRoaW5nJTIwZWxzZSclM0IlMjIlN0QlMkMlN0IlMjJuYW1lJTIyJTNBJTIyb3ZlcnJpZGUuanMlMjIlMkMlMjJjb2RlJTIyJTNBJTIyaW1wb3J0JTIwJTdCJTIwc2V0T3ZlcmxheXMlMjAlN0QlMjBmcm9tJTIwJy4lMkZvdmVybGF5cy5qcyclM0IlNUNuJTVDbnNldE92ZXJsYXlzKG5ldyUyME9iamVjdCgpKSUzQiUyMiU3RCU1RCUyQyUyMm9wdGlvbnMlMjIlM0ElN0IlMjJmb3JtYXQlMjIlM0ElMjJlcyUyMiUyQyUyMm5hbWUlMjIlM0ElMjJteUJ1bmRsZSUyMiUyQyUyMmFtZCUyMiUzQSU3QiUyMmlkJTIyJTNBJTIyJTIyJTdEJTJDJTIyZ2xvYmFscyUyMiUzQSU3QiU3RCU3RCUyQyUyMmV4YW1wbGUlMjIlM0FudWxsJTdE
 [3]: https://rollupjs.org/repl/?version=2.10.2&shareable=JTdCJTIybW9kdWxlcyUyMiUzQSU1QiU3QiUyMm5hbWUlMjIlM0ElMjJtYWluLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMHNvbWV0aGluZ0Vsc2UlMkMlMjBzZXRPdmVybGF5cyUyQyUyMG92ZXJsYXlzJTIwJTdEJTIwZnJvbSUyMCcuJTJGb3ZlcmxheXMuanMnJTNCJTVDbmltcG9ydCUyMCU3QiUyME92ZXJsYXlDb250cm9sbGVyJTJDJTIwc29tZXRoaW5nRWxzZTIlMjAlN0QlMjBmcm9tJTIwJy4lMkZPdmVybGF5Q29udHJvbGxlci5qcyclM0IlNUNuJTVDbiUyRiUyRiUyMHRoZSUyMGZvbGxvd2luZyUyMGNvZGUlMjB3aWxsJTIwdHJlZSUyMHNoYWtlJTIwb3ZlcmxheXMlMjBhd2F5JTIwaGVuY2UlMjBvdmVybGF5cyUyMGlzJTIwc2lkZSUyMGVmZmVjdCUyMGZyZWUlMjAlNUNuJTVDbnNldE92ZXJsYXlzKG5ldyUyME9iamVjdCgpKSUzQiU1Q25jb25zb2xlLmxvZyhzb21ldGhpbmdFbHNlKSUzQiU1Q25jb25zb2xlLmxvZyhzb21ldGhpbmdFbHNlMiklM0IlNUNuJTVDbiUyRiUyRioqJTIwVGhlJTIwZm9sbG93aW5nJTIwd2lsbCUyMHRvZ2dsZSUyMGltcG9ydGluZyUyMG9mJTIwb3ZlcmxheXMlMjAqJTJGJTVDbiU1Q24lMkYlMkYlMjAxLiUyMGltcG9ydCUyMG92ZXJsYXlzJTIwZGlyZWN0bHklMjBhbmQlMjBhY2Nlc3MlMjBpdCU1Q24lMkYlMkYlMjBjb25zb2xlLmxvZyhvdmVybGF5cy5saXN0KSUzQiUyMCU1Q24lNUNuJTJGJTJGJTIwMi4lMjBjcmVhdGUlMjBhbiUyME92ZXJsYXlDb250cm9sbGVyJTIwd2hpY2glMjBpbnRlcm5hbGx5JTIwYWNjZXNzZXMlMjBvdmVybGF5cyU1Q24lMkYlMkYlMjBjb25zdCUyMGN0cmwlMjAlM0QlMjBuZXclMjBPdmVybGF5Q29udHJvbGxlcigpJTNCJTVDbiUyRiUyRiUyMGNvbnNvbGUubG9nKGN0cmwubWFuYWdlci5saXN0KSUzQiU1Q24lNUNuJTIyJTJDJTIyaXNFbnRyeSUyMiUzQXRydWUlN0QlMkMlN0IlMjJuYW1lJTIyJTNBJTIyb3ZlcmxheXMuanMlMjIlMkMlMjJjb2RlJTIyJTNBJTIyY2xhc3MlMjBPdmVybGF5TWFuYWdlciUyMCU3QiU1Q24lNUN0Y29uc3RydWN0b3IoKSUyMCU3QiU1Q24lNUN0JTVDdHRoaXMubGlzdCUyMCUzRCUyMCU1QiU1RCUzQiU1Q24lNUN0JTdEJTVDbiUyMCUyMGFkZChhKSUyMCU3QiU1Q24lMjAlMjAlMjAlMjB0aGlzLmxpc3QucHVzaChhKSUzQiU1Q24lNUN0JTdEJTVDbiU3RCU1Q24lNUNuZXhwb3J0JTIwbGV0JTIwb3ZlcmxheXMlMjAlM0QlMjBuZXclMjBPdmVybGF5TWFuYWdlcigpJTNCJTVDbiU1Q25leHBvcnQlMjBmdW5jdGlvbiUyMHNldE92ZXJsYXlzKG5ld092ZXJsYXlzKSUyMCU3QiU1Q24lNUN0b3ZlcmxheXMlMjAlM0QlMjBuZXdPdmVybGF5cyUzQiU1Q24lN0QlNUNuJTVDbmV4cG9ydCUyMGNvbnN0JTIwc29tZXRoaW5nRWxzZSUyMCUzRCUyMCdzb21ldGhpbmclMjBlbHNlJyUzQiU1Q24lNUNuJTJGJTJGJTIwdGhlJTIwZm9sbG93aW5nJTIwbGluZSUyMGlzJTIwYSUyMHNpZGUlMjBlZmZlY3QlMjBhcyUyMGl0JTIwYWx3YXlzJTIwd2lsbCUyMGJlJTIwaW5jbHVkZWQlNUNuY29uc29sZS5sb2coJ292ZXJsYXlzJTIwc2lkZSUyMGVmZmVjdCcpJTNCJTIyJTJDJTIyaXNFbnRyeSUyMiUzQWZhbHNlJTdEJTJDJTdCJTIybmFtZSUyMiUzQSUyMk92ZXJsYXlDb250cm9sbGVyLmpzJTIyJTJDJTIyY29kZSUyMiUzQSUyMmltcG9ydCUyMCU3QiUyMG92ZXJsYXlzJTIwJTdEJTIwZnJvbSUyMCcuJTJGb3ZlcmxheXMuanMnJTNCJTVDbiU1Q25leHBvcnQlMjBjbGFzcyUyME92ZXJsYXlDb250cm9sbGVyJTIwJTdCJTVDbiUyMCUyMCUyMGNvbnN0cnVjdG9yKGNvbmZpZyUyMCUzRCUyMCU3QiU3RCUyQyUyMG1hbmFnZXIlMjAlM0QlMjBvdmVybGF5cyklMjAlN0IlNUNuJTIwJTIwJTIwJTIwJTIwdGhpcy5tYW5hZ2VyJTIwJTNEJTIwbWFuYWdlciUzQiU1Q24lNUN0JTVDdCUyMHRoaXMubWFuYWdlci5hZGQodGhpcyklM0IlNUNuJTVDdCUyMCU3RCU1Q24lN0QlNUNuJTVDbmV4cG9ydCUyMGNvbnN0JTIwc29tZXRoaW5nRWxzZTIlMjAlM0QlMjAnc29tZXRoaW5nJTIwZWxzZSclM0IlMjIlN0QlNUQlMkMlMjJvcHRpb25zJTIyJTNBJTdCJTIyZm9ybWF0JTIyJTNBJTIyZXMlMjIlMkMlMjJuYW1lJTIyJTNBJTIybXlCdW5kbGUlMjIlMkMlMjJhbWQlMjIlM0ElN0IlMjJpZCUyMiUzQSUyMiUyMiU3RCUyQyUyMmdsb2JhbHMlMjIlM0ElN0IlN0QlN0QlMkMlMjJleGFtcGxlJTIyJTNBbnVsbCU3RA==
diff --git a/es-dev-server.config.js b/es-dev-server.config.js
new file mode 100644
index 000000000..c12d13415
--- /dev/null
+++ b/es-dev-server.config.js
@@ -0,0 +1,8 @@
+const { mdjsTransformer } = require('@mdjs/core');
+
+module.exports = {
+  nodeResolve: true,
+  // open: 'packages/button/README.md',
+  watch: true,
+  responseTransformers: [mdjsTransformer],
+};
diff --git a/package.json b/package.json
index de00ac6fa..53f66ce57 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,8 @@
     "@open-wc/building-rollup": "^1.2.1",
     "@commitlint/cli": "^7.0.0",
     "@commitlint/config-conventional": "^7.0.0",
-    "@open-wc/demoing-storybook": "^2.0.0",
+    "@mdjs/core": "^0.3.1",
+    "@open-wc/demoing-storybook": "^2.0.2",
     "@open-wc/eslint-config": "^1.0.0",
     "@open-wc/testing": "^2.5.0",
     "@open-wc/testing-helpers": "^1.0.0",
@@ -39,6 +40,7 @@
     "whatwg-fetch": "^3.0.0"
   },
   "scripts": {
+    "dev-server": "es-dev-server",
     "start": "npm run storybook",
     "storybook": "start-storybook -p 9001",
     "storybook:build": "build-storybook",
diff --git a/packages/ajax/README.md b/packages/ajax/README.md
index 5023298d3..2bd7151e2 100644
--- a/packages/ajax/README.md
+++ b/packages/ajax/README.md
@@ -3,10 +3,26 @@
 `ajax` is the global manager for handling all ajax requests.
 It is a promise based system for fetching data, based on [axios](https://github.com/axios/axios)
 
+```js script
+import { html } from 'lit-html';
+import { ajax } from './src/ajax.js';
+import { AjaxClass } from './src/AjaxClass.js';
+
+export default {
+  title: 'Others/Ajax',
+};
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/fetch-system-ajax) for a live demo and documentation
 
+## Features
+
+- only JS functions, no (unnecessarily expensive) web components
+- supports GET, POST, PUT, DELETE, REQUEST, PATCH and HEAD methods
+- can be used with or without XSRF token
+
 ## How to use
 
 ### Installation
@@ -15,6 +31,10 @@ It is a promise based system for fetching data, based on [axios](https://github.
 npm i --save @lion/ajax
 ```
 
+```js
+import { ajax, AjaxClass } from '@lion/ajax';
+```
+
 ### Example
 
 ```js
@@ -22,3 +42,161 @@ import { ajax } from '@lion/ajax';
 
 ajax.get('data.json').then(response => console.log(response));
 ```
+
+### Performing requests
+
+Performing a `GET` request:
+
+```js preview-story
+export const performingGetRequests = () => html`
+  <button
+    @click=${() => {
+      ajax
+        .get('./packages/ajax/docs/assets/data.json')
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }}
+  >
+    Execute Request to Action Logger
+  </button>
+`;
+```
+
+To post data to the server, pass the data as the second argument in the `POST` request:
+
+```js
+const body = {
+  ant: {
+    type: 'insect',
+    limbs: 6,
+  },
+};
+ajax
+  .post('zooApi/animals/addAnimal', body)
+  .then(response => {
+    console.log(`POST successful: ${response.status} ${response.statusText}`);
+  })
+  .catch(error => {
+    console.log(error);
+  });
+```
+
+## Configuration
+
+### JSON prefix
+
+The called API might add a JSON prefix to the response in order to prevent hijacking.
+The prefix renders the string syntactically invalid as a script so that it cannot be hijacked.
+This prefix should be stripped before parsing the string as JSON.
+Pass the prefix with the `jsonPrefix` option.
+
+```js
+const myAjax = AjaxClass.getNewInstance({ jsonPrefix: ")]}'," });
+myAjax
+  .get('./packages/ajax/docs/assets/data.json')
+  .then(response => {
+    console.log(response.data);
+  })
+  .catch(error => {
+    console.log(error);
+  });
+```
+
+### Additional headers
+
+Add additional headers to the requests with the `headers` option.
+
+```js preview-story
+export const additionalHeaders = () => html`
+  <button
+    @click=${() => {
+      const myAjax = AjaxClass.getNewInstance({ headers: { 'MY-HEADER': 'SOME-HEADER-VALUE' } });
+      myAjax
+        .get('./packages/ajax/docs/assets/data.json')
+        .then(response => {
+          console.log(response);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }}
+  >
+    Execute Request to Action Logger
+  </button>
+`;
+```
+
+When executing the request above, check the Network tab in the Browser's dev tools and look for the Request Header on the GET call.
+
+### Cancelable Request
+
+It is possible to make an Ajax request cancelable, and then call `cancel()` to make the request provide a custom error once fired.
+
+```js preview-story
+export const cancelableRequests = () => html`
+  <button
+    @click=${() => {
+      const myAjax = AjaxClass.getNewInstance({ cancelable: true });
+      requestAnimationFrame(() => {
+        myAjax.cancel('too slow');
+      });
+      myAjax
+        .get('./packages/ajax/docs/assets/data.json')
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.log(error);
+        });
+    }}
+  >
+    Execute Request to Action Logger
+  </button>
+`;
+```
+
+### Cancel concurrent requests
+
+You can cancel concurrent requests with the `cancelPreviousOnNewRequest` option.
+
+```js preview-story
+export const cancelConcurrentRequests = () => html`
+  <button
+    @click=${() => {
+      const myAjax = AjaxClass.getNewInstance({ cancelPreviousOnNewRequest: true });
+      myAjax
+        .get('./packages/ajax/docs/assets/data.json')
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.log(error.message);
+        });
+      myAjax
+        .get('./packages/ajax/docs/assets/data.json')
+        .then(response => {
+          console.log(response.data);
+        })
+        .catch(error => {
+          console.log(error.message);
+        });
+    }}
+  >
+    Execute Both Requests to Action Logger
+  </button>
+`;
+```
+
+## Considerations
+
+Due to a [bug in axios](https://github.com/axios/axios/issues/385) options may leak in to other instances.
+So please avoid setting global options in axios. Interceptors have no issues.
+
+## Future plans
+
+- Eventually we want to remove axios and replace it with [Fetch](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)
+- This wrapper exist to prevent this switch from causing breaking changes for our users
diff --git a/packages/ajax/stories/data.json b/packages/ajax/docs/assets/data.json
similarity index 100%
rename from packages/ajax/stories/data.json
rename to packages/ajax/docs/assets/data.json
diff --git a/packages/ajax/package.json b/packages/ajax/package.json
index efd600042..518f9762e 100644
--- a/packages/ajax/package.json
+++ b/packages/ajax/package.json
@@ -14,6 +14,7 @@
     "directory": "packages/ajax"
   },
   "scripts": {
+    "start": "cd ../../ && yarn dev-server --open packages/ajax/README.md",
     "prepublishOnly": "../../scripts/npm-prepublish.js",
     "test": "cd ../../ && yarn test:browser --grep \"packages/ajax/test/**/*.test.js\"",
     "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/ajax/test/**/*.test.js\""
diff --git a/packages/ajax/stories/index.stories.mdx b/packages/ajax/stories/index.stories.mdx
deleted file mode 100644
index 4648fd231..000000000
--- a/packages/ajax/stories/index.stories.mdx
+++ /dev/null
@@ -1,279 +0,0 @@
-import {
-  Story,
-  Meta,
-  html,
-} from '@open-wc/demoing-storybook';
-
-import { ajax } from '../src/ajax.js';
-import { AjaxClass } from '../src/AjaxClass.js';
-
-<Meta title="Others/Ajax" parameters={{ component: 'lion-ajax' }} />
-
-# Ajax
-
-`lion-ajax` is the global manager for handling all ajax requests.
-It is a promise based system for fetching data, based on <a href="https://github.com/axios/axios" target="_blank">
-axios</a>
-
-<Story name="Default">
-  {html`
-    <button
-      @click=${() => {
-        ajax
-          .get('./packages/ajax/stories/data.json')
-          .then(response => {
-            console.log(response.data);
-          })
-          .catch(error => {
-            console.log(error);
-          });
-      }}
-    >
-      Execute Request to Action Logger
-    </button>
-  `}
-</Story>
-
-```js
-ajax.get('./packages/ajax/stories/data.json').then(response => console.log(response.data));
-```
-
-## Features
-
-- only JS functions, no (unnecessarily expensive) web components
-- supports GET, POST, PUT, DELETE, REQUEST, PATCH and HEAD methods
-- can be used with or without XSRF token
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/ajax
-```
-
-```js
-import { ajax, AjaxClass } from '@lion/ajax';
-```
-
-### Performing requests
-
-Performing a `GET` request:
-
-<Story name="GET">
-  {html`
-    <button
-      @click=${() => {
-        ajax
-          .get('./packages/ajax/stories/data.json')
-          .then(response => {
-            console.log(response.data);
-          })
-          .catch(error => {
-            console.log(error);
-          });
-      }}
-    >
-      Execute Request to Action Logger
-    </button>
-  `}
-</Story>
-
-```js
-ajax
-  .get('./packages/ajax/stories/data.json')
-  .then(response => {
-    console.log(response.data);
-  })
-  .catch(error => {
-    console.log(error);
-  });
-```
-
-To post data to the server, pass the data as the second argument in the `POST` request:
-
-```js
-const body = {
-  ant: {
-    type: "insect",
-    limbs: 6,
-  }
-};
-
-ajax
-  .post('zooApi/animals/addAnimal', body)
-  .then(response => {
-    console.log(`POST successful: ${response.status} ${response.statusText}`);
-  })
-  .catch(error => {
-    console.log(error);
-  });
-```
-
-## Configuration
-
-### JSON prefix
-
-The called API might add a JSON prefix to the response in order to prevent hijacking.
-The prefix renders the string syntactically invalid as a script so that it cannot be hijacked.
-This prefix should be stripped before parsing the string as JSON.
-Pass the prefix with the `jsonPrefix` option.
-
-```js
-const myAjax = AjaxClass.getNewInstance({ jsonPrefix: ")]}'," });
-myAjax
-  .get('./packages/ajax/stories/data.json')
-  .then(response => {
-    console.log(response.data);
-  })
-  .catch(error => {
-    console.log(error);
-  });
-```
-
-### Additional headers
-
-Add additional headers to the requests with the `headers` option.
-
-<Story name="Headers">
-  {html`
-    <button
-      @click=${() => {
-        const myAjax = AjaxClass.getNewInstance({ headers: { 'MY-HEADER': 'SOME-HEADER-VALUE' } });
-        myAjax
-          .get('./packages/ajax/stories/data.json')
-          .then(response => {
-            console.log(response);
-          })
-          .catch(error => {
-            console.log(error);
-          });
-      }}
-    >
-      Execute Request to Action Logger
-    </button>
-  `}
-</Story>
-
-```js
-const myAjax = AjaxClass.getNewInstance({ headers: { 'X-CUSTOM-HEADER': 'SOME-HEADER-VALUE' } });
-myAjax
-  .get('./packages/ajax/stories/data.json')
-  .then(response => {
-    console.log(response);
-  })
-  .catch(error => {
-    console.log(error);
-  });
-```
-
-When executing the request above, check the Network tab in the Browser's dev tools and look for the Request Header on the GET call.
-
-### Cancelable Request
-
-It is possible to make an Ajax request cancelable, and then call `cancel()` to make the request provide a custom error once fired.
-
-<Story name="Cancelable">
-  {html`
-    <button
-      @click=${() => {
-        const myAjax = AjaxClass.getNewInstance({ cancelable: true });
-        requestAnimationFrame(() => {
-          myAjax.cancel('too slow');
-        });
-        myAjax
-          .get('./packages/ajax/stories/data.json')
-          .then(response => {
-            console.log(response.data);
-          })
-          .catch(error => {
-            console.log(error);
-          });
-      }}
-    >
-      Execute Request to Action Logger
-    </button>
-  `}
-</Story>
-
-```js
-const myAjax = AjaxClass.getNewInstance({ cancelable: true });
-
-requestAnimationFrame(() => {
-  myAjax.cancel('too slow');
-});
-
-myAjax
-  .get('./packages/ajax/stories/data.json')
-  .then(response => {
-    console.log(response.data);
-  })
-  .catch(error => {
-    console.log(error);
-  });
-```
-
-### Cancel concurrent requests
-
-You can cancel concurrent requests with the `cancelPreviousOnNewRequest` option.
-
-<Story name="Cancel Previous on New Request">
-  {html`
-    <button
-      @click=${() => {
-        const myAjax = AjaxClass.getNewInstance({ cancelPreviousOnNewRequest: true });
-        myAjax
-          .get('./packages/ajax/stories/data.json')
-          .then(response => {
-            console.log(response.data);
-          })
-          .catch(error => {
-            console.log(error.message);
-          });
-        myAjax
-          .get('./packages/ajax/stories/data.json')
-          .then(response => {
-            console.log(response.data);
-          })
-          .catch(error => {
-            console.log(error.message);
-          });
-      }}
-    >
-      Execute Both Requests to Action Logger
-    </button>
-  `}
-</Story>
-
-```js
-const myAjax = AjaxClass.getNewInstance({ cancelPreviousOnNewRequest: true });
-
-myAjax
-  .get('./packages/ajax/stories/data.json')
-  .then(response => {
-    console.log(response.data);
-  })
-  .catch(error => {
-    console.log(error.message);
-  });
-
-myAjax
-  .get('./packages/ajax/stories/data.json')
-  .then(response => {
-    console.log(response.data);
-  })
-  .catch(error => {
-    console.log(error.message);
-  });
-```
-
-## Considerations
-
-Due to a <a href="https://github.com/axios/axios/issues/385" target="_blank"> bug in axios</a> options may leak in to other instances.
-So please avoid setting global options in axios. Interceptors have no issues.
-
-## Future plans
-
-- Eventually we want to remove axios and replace it with <a href="https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API" target="_blank">
-Fetch</a>
-- This wrapper exist to prevent this switch from causing breaking changes for our users
diff --git a/packages/babel-plugin-extend-docs/README.md b/packages/babel-plugin-extend-docs/README.md
index 36d5780f0..d44315876 100644
--- a/packages/babel-plugin-extend-docs/README.md
+++ b/packages/babel-plugin-extend-docs/README.md
@@ -223,3 +223,9 @@ module.exports = {
   ],
 };
 ```
+
+```js script
+export default {
+  title: 'Tools/BabelPluginExtendDocs',
+};
+```
diff --git a/packages/button/README.md b/packages/button/README.md
index 9e81bc177..5c43bb195 100644
--- a/packages/button/README.md
+++ b/packages/button/README.md
@@ -1,11 +1,34 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Button
 
-`lion-button` provides a button component that is easily stylable and is accessible.
+`lion-button` provides a button component that is easily styleable and is accessible.
+
+```js script
+import { html } from 'lit-html';
+
+import './lion-button.js';
+import iconSvg from './docs/assets/icon.svg.js';
+
+export default {
+  title: 'Buttons/Button',
+};
+```
+
+```js story
+export const main = () => html` <lion-button>Default</lion-button> `;
+```
 
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/buttons-button) for a live demo and API documentation
 
+## Features
+
+- Clickable area that is bigger than visual size
+- Works with native form / inputs
+- Has integration for implicit form submission similar to how native `<form>`, `<input>` and `<button>` work together.
+
 ## How to use
 
 ### Installation
@@ -15,6 +38,8 @@ npm i --save @lion/button
 ```
 
 ```js
+import { LionButton } from '@lion/button';
+// or
 import '@lion/button/lion-button.js';
 ```
 
@@ -23,3 +48,96 @@ import '@lion/button/lion-button.js';
 ```html
 <lion-button>Button Text</lion-button>
 ```
+
+## Buttons
+
+### With click handler
+
+```js preview-story
+export const handler = () => html`
+  <lion-button @click="${ev => console.log('clicked/spaced/entered', ev)}">
+    Click | Space | Enter me and see log
+  </lion-button>
+`;
+```
+
+### Icon button
+
+```js preview-story
+export const iconButton = () => html` <lion-button>${iconSvg(html)} Bug</lion-button> `;
+```
+
+### Icon only button
+
+```js preview-story
+export const iconOnly = () =>
+  html` <lion-button aria-label="Bug"> ${iconSvg(html)} </lion-button> `;
+```
+
+### Disabled button
+
+```js preview-story
+export const disabled = () => html` <lion-button disabled>Disabled</lion-button> `;
+```
+
+### Usage with native form
+
+Supports the following use cases:
+
+- Submit on button click
+- Reset native form fields when using type="reset"
+- Submit on button enter or space keypress
+- Submit on enter keypress inside an input
+
+```js preview-story
+export const withinForm = () => html`
+  <form
+    @submit=${ev => {
+      ev.preventDefault();
+      console.log('submit handler');
+    }}
+  >
+    <label for="firstNameId">First name</label>
+    <input id="firstNameId" name="firstName" />
+    <label for="lastNameId">Last name</label>
+    <input id="lastNameId" name="lastName" />
+    <lion-button @click=${() => console.log('click handler')}>Submit</lion-button>
+  </form>
+`;
+```
+
+Important notes:
+
+- A (lion)-button of type submit is mandatory for the last use case, if you have multiple inputs. This is native behavior.
+- `@click` on `<lion-button>` and `@submit` on `<form>` are triggered by these use cases. We strongly encourage you to listen to the submit handler if your goal is to do something on form-submit.
+- To prevent form submission full page reloads, add a **submit handler on the form** `@submit` with `event.preventDefault()`. Adding it on the `<lion-button>` is not enough.
+
+## Considerations
+
+### Why a Web Component?
+
+There are multiple reasons why we used a Web Component as opposed to a CSS component.
+
+- **Target size**: The minimum target size is 40 pixels, which makes even the small buttons easy to activate. A container element was needed to make this size possible.
+- **Advanced styling**: There are advanced styling options regarding icons in buttons, where it is a lot more maintainable to handle icons in our button using slots. An example is that a sticky icon-only buttons may looks different from buttons which have both icons and text.
+- **Native form integration**: The lion button works with native `<form>` submission, and even implicit form submission on-enter. A lot of delegation logic had to be created for this to work.
+
+### Event target
+
+We want to ensure that the event target returned to the user is `<lion-button>`, not `button`. Therefore, simply delegating the click to the native button immediately, is not desired. Instead, we catch the click event in the `<lion-button>`, and ensure delegation inside of there.
+
+### Flashing a native button click as a direct child of form
+
+By delegating the `click()` to the native button, it will bubble back up to `<lion-button>` which would cause duplicate actions. We have to simulate the full `.click()` however, otherwise form submission is not triggered. So this bubbling cannot be prevented.
+Therefore, on click, we flash a `<button>` to the form as a direct child and fire the click on that button. We then immediately remove that button. This is a fully synchronous process; users or developers will not notice this, it should not cause problems.
+
+### Native button & implicit form submission
+
+Flashing the button in the way we do solves almost all issues except for one.
+One of the specs of W3C is that when you have a form with multiple inputs,
+pressing enter while inside one of the inputs only triggers a form submit if that form has a button of type submit.
+
+To get this particular implicit form submission to work, having a native button in our `<lion-button>` is a hard requirement.
+Therefore, not only do we flash a native button on the form to delegate `<lion-button>` trigger to `<button>`
+and thereby trigger form submission, we **also** add a native `button` inside the `<lion-button>`
+whose `type` property is synchronized with the type of the `<lion-button>`.
diff --git a/packages/button/stories/icon.svg.js b/packages/button/docs/assets/icon.svg.js
similarity index 100%
rename from packages/button/stories/icon.svg.js
rename to packages/button/docs/assets/icon.svg.js
diff --git a/packages/button/package.json b/packages/button/package.json
index 5400659fa..ba142f6d1 100644
--- a/packages/button/package.json
+++ b/packages/button/package.json
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "prepublishOnly": "../../scripts/npm-prepublish.js",
+    "start": "cd ../../ && yarn dev-server --open packages/button/README.md",
     "test": "cd ../../ && yarn test:browser --grep \"packages/button/test/**/*.test.js\"",
     "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/button/test/**/*.test.js\""
   },
diff --git a/packages/button/stories/index.stories.mdx b/packages/button/stories/index.stories.mdx
deleted file mode 100644
index 4ccf99a5e..000000000
--- a/packages/button/stories/index.stories.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-import '../lion-button.js';
-import iconSvg from './icon.svg.js';
-
-<Meta title="Buttons/Button" parameters={{ component: 'lion-button' }} />
-
-# Button
-
-`lion-button` provides a button component that is easily stylable and is accessible.
-
-<Story name="Default">
-  {html`
-    <lion-button>Default</lion-button>
-  `}
-</Story>
-
-```html
-<lion-button>Default</lion-button>
-```
-
-## Features
-
-- Clickable area that is bigger than visual size
-- Works with native form / inputs
-- Has integration for implicit form submission similar to how native `<form>`, `<input>` and `<button>` work together.
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/button
-```
-
-```js
-import '@lion/button/lion-button.js';
-```
-
-### Example
-
-```html
-<lion-button>Button Text</lion-button>
-```
-
-## Buttons
-
-### With click handler
-
-<Story name="Handler">
-  {html`
-    <lion-button @click="${e => console.log('clicked/spaced/entered', e)}">
-      Click | Space | Enter me and see log
-    </lion-button>
-  `}
-</Story>
-
-```html
-<lion-button @click="${e => console.log('clicked/spaced/entered', e)}">
-  Click | Space | Enter me and see log
-</lion-button>
-```
-
-### Icon button
-
-<Story name="Icon">
-  {html`<lion-button>${iconSvg(html)} Bug</lion-button>`}
-</Story>
-
-```html
-<lion-button>${iconSvg(html)} Bug</lion-button>
-```
-
-### Icon only button
-
-<Story name="Icon-only">{html`
-  <lion-button aria-label="Bug">
-    ${iconSvg(html)}
-  </lion-button>
-`}</Story>
-
-```html
-<lion-button aria-label="Bug">
-  ${iconSvg(html)}
-</lion-button>
-```
-
-### Disabled button
-
-<Story name="Disabled">
-  {html`<lion-button disabled>Disabled</lion-button>`}
-</Story>
-
-```html
-<lion-button disabled>Disabled</lion-button>
-```
-
-### Usage with native form
-
-Supports the following use cases:
-
-- Submit on button click
-- Reset native form fields when using type="reset"
-- Submit on button enter or space keypress
-- Submit on enter keypress inside an input
-
-<Story name="Within native form">
-  {html`
-    <form
-      @submit=${ev => {
-        ev.preventDefault();
-        console.log('submit handler');
-      }}
-    >
-      <label for="firstNameId">First name</label>
-      <input id="firstNameId" name="firstName" />
-      <label for="lastNameId">Last name</label>
-      <input id="lastNameId" name="lastName" />
-      <lion-button @click=${() => console.log('click handler')}>Submit</lion-button>
-    </form>
-  `}
-</Story>
-
-```html
-<form
-  @submit=${ev => {
-    ev.preventDefault();
-    console.log('submit handler');
-  }}
->
-  <label for="firstNameId">First name</label>
-  <input id="firstNameId" name="firstName" />
-  <label for="lastNameId">Last name</label>
-  <input id="lastNameId" name="lastName" />
-  <lion-button @click=${() => console.log('click handler')}>Submit</lion-button>
-</form>
-```
-
-Important notes:
-
-- A (lion)-button of type submit is mandatory for the last use case, if you have multiple inputs. This is native behavior.
-- `@click` on `<lion-button>` and `@submit` on `<form>` are triggered by these use cases. We strongly encourage you to listen to the submit handler if your goal is to do something on form-submit.
-- To prevent form submission full page reloads, add a **submit handler on the form** `@submit` with `event.preventDefault()`. Adding it on the `<lion-button>` is not enough.
-
-## Considerations
-
-### Why a Web Component?
-
-There are multiple reasons why we used a Web Component as opposed to a CSS component.
-
-- **Target size**: The minimum target size is 40 pixels, which makes even the small buttons easy to activate. A container element was needed to make this size possible.
-- **Advanced styling**: There are advanced styling options regarding icons in buttons, where it is a lot more maintainable to handle icons in our button using slots. An example is that a sticky icon-only buttons may looks different from buttons which have both icons and text.
-- **Native form integration**: The lion button works with native `<form>` submission, and even implicit form submission on-enter. A lot of delegation logic had to be created for this to work.
-
-### Event target
-
-We want to ensure that the event target returned to the user is `<lion-button>`, not `button`. Therefore, simply delegating the click to the native button immediately, is not desired. Instead, we catch the click event in the `<lion-button>`, and ensure delegation inside of there.
-
-### Flashing a native button click as a direct child of form
-
-By delegating the `click()` to the native button, it will bubble back up to `<lion-button>` which would cause duplicate actions. We have to simulate the full `.click()` however, otherwise form submission is not triggered. So this bubbling cannot be prevented.
-Therefore, on click, we flash a `<button>` to the form as a direct child and fire the click on that button. We then immediately remove that button. This is a fully synchronous process; users or developers will not notice this, it should not cause problems.
-
-### Native button & implicit form submission
-
-Flashing the button in the way we do solves almost all issues except for one.
-One of the specs of W3C is that when you have a form with multiple inputs,
-pressing enter while inside one of the inputs only triggers a form submit if that form has a button of type submit.
-
-To get this particular implicit form submission to work, having a native button in our `<lion-button>` is a hard requirement.
-Therefore, not only do we flash a native button on the form to delegate `<lion-button>` trigger to `<button>`
-and thereby trigger form submission, we **also** add a native `button` inside the `<lion-button>`
-whose `type` property is synchronized with the type of the `<lion-button>`.
diff --git a/packages/calendar/README.md b/packages/calendar/README.md
index ca93f6619..74942ba0d 100644
--- a/packages/calendar/README.md
+++ b/packages/calendar/README.md
@@ -2,10 +2,54 @@
 
 `lion-calendar` is a reusable and accessible calendar view.
 
+```js script
+import { html, css } from '@lion/core';
+import './lion-calendar.js';
+
+export default {
+  title: 'Others/Calendar',
+};
+
+const calendarDemoStyle = css`
+  .demo-calendar {
+    border: 1px solid #adadad;
+    box-shadow: 0 0 16px #ccc;
+    max-width: 500px;
+  }
+`;
+```
+
+```js story
+export const main = () => {
+  return html`
+    <style>
+      ${calendarDemoStyle}
+    </style>
+    <lion-calendar class="demo-calendar"></lion-calendar>
+  `;
+};
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/calendar-standalone) for a live demo and API documentation
 
+## Features
+
+- fully accessible keyboard navigation (Arrow Keys, PgUp, PgDn, ALT+PgUp, ALT+PgDn)
+- **minDate**: disables all dates before a given date
+- **maxDate**: disables all dates after a given date
+- **disableDates**: disables some dates within an available range
+- **selectedDate**: currently selected date
+- **centralDate**: date that determines the currently visible month and that will be focused when keyboard moves the focus to the month grid
+- **focusedDate**: (getter only) currently focused date (if there is any with real focus)
+- **focusDate(date)**: focus on a certain date
+- **focusSelectedDate()**: focus on the current selected date
+- **focusCentralDate()**: focus on the current central date
+- **firstDayOfWeek**: typically Sunday (default) or Monday
+- **weekdayHeaderNotation**: long/short/narrow for the current locale (e.g. Thursday/Thu/T)
+- **locale**: different locale for the current component only
+
 ## How to use
 
 ### Installation
@@ -23,3 +67,158 @@ import '@lion/calendar/lion-calendar.js';
 ```html
 <lion-calendar></lion-calendar>
 ```
+
+## Move to the selected date
+
+The `selectedDate` is the date which is currently marked as selected.
+You usually select a date by clicking on it with the mouse or hitting Enter on the keyboard.
+
+The `selectedDate` might not be within the dates in the current month view.
+
+```js preview-story
+export const selectedDate = () => html`
+  <style>
+    ${calendarDemoStyle}
+  </style>
+  <lion-calendar class="demo-calendar" .selectedDate=${new Date(1988, 2, 5)}></lion-calendar>
+`;
+```
+
+## Central Date
+
+The `centralDate` defines which day will be focused when keyboard moves the focus to the current month grid.
+By default it is set to today, or the enabled day of the current month view that is closest to today's date.
+
+The next and previous months' buttons work by changing the `centralDate` with plus or minus one month.
+Changing the `centralDate` may mean a different view will be displayed to your users if it is in a different month.
+Usually if you change only the day, "nothing" happens as it's already currently in view.
+
+The `centralDate` can be different from `selectedDate` as you can have today as actively selected but still look at date that is years ago.
+When the `selectedDate` changes, it will sync its value to the `centralDate`.
+
+```js preview-story
+export const centralDate = () => {
+  const today = new Date();
+  const centralDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
+  return html`
+    <style>
+      ${calendarDemoStyle}
+    </style>
+    <lion-calendar class="demo-calendar" .centralDate="${centralDate}"></lion-calendar>
+  `;
+};
+```
+
+## Controlling focus
+
+You can control the focus by calling the following methods
+
+- `focusCentralDate()`
+- `focusSelectedDate()`
+- `focusDate(dateInstanceToFocus)`
+
+Be aware that the central date changes when a new date is focused.
+
+```js preview-story
+export const controllingFocus = () => {
+  const today = new Date();
+  const selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
+  const centralDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
+  return html`
+    <style>
+      ${calendarDemoStyle}
+    </style>
+    <lion-calendar
+      id="js-demo-calendar"
+      class="demo-calendar"
+      .selectedDate="${selectedDate}"
+      .centralDate="${centralDate}"
+    ></lion-calendar>
+    <p>
+      Focus
+      <button @click="${() => document.querySelector('#js-demo-calendar').focusCentralDate()}">
+        Central date
+      </button>
+      <button @click="${() => document.querySelector('#js-demo-calendar').focusSelectedDate()}">
+        Selected date
+      </button>
+      <button @click="${() => document.querySelector('#js-demo-calendar').focusDate(today)}">
+        Today
+      </button>
+    </p>
+  `;
+};
+```
+
+## Limiting selectable values
+
+### Providing a lower limit
+
+To give a lower limit you can bind a date to the `minDate` property.
+
+```js preview-story
+export const providingLowerLimit = () => {
+  const minDate = new Date();
+  return html`
+    <style>
+      ${calendarDemoStyle}
+    </style>
+    <lion-calendar class="demo-calendar" .minDate="${minDate}"></lion-calendar>
+  `;
+};
+```
+
+### Provide a higher limit
+
+To give a higher limit you can bind a date to the `maxDate` property. In this example, we show how to create an offset of + 2 days.
+
+```js preview-story
+export const providingHigherLimit = () => {
+  const today = new Date();
+  const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2);
+  return html`
+    <style>
+      ${calendarDemoStyle}
+    </style>
+    <lion-calendar class="demo-calendar" .maxDate="${maxDate}"></lion-calendar>
+  `;
+};
+```
+
+### Provide a list of disabled dates
+
+In some cases a specific date or day of the week needs to be disabled, supply those days to the `disableDates` property.
+
+```js preview-story
+export const disabledDates = () => html`
+  <style>
+    ${calendarDemoStyle}
+  </style>
+  <lion-calendar
+    class="demo-calendar"
+    .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
+  ></lion-calendar>
+`;
+```
+
+### Combined disable dates
+
+To limit the scope of possible dates further, combine the methods mentioned above.
+
+```js preview-story
+export const combinedDisabledDates = () => {
+  const today = new Date();
+  const maxDate = new Date(today.getFullYear(), today.getMonth() + 2, today.getDate());
+  return html`
+    <style>
+      ${calendarDemoStyle}
+    </style>
+    <lion-calendar
+      class="demo-calendar"
+      .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
+      .minDate="${new Date()}"
+      .maxDate="${maxDate}"
+    ></lion-calendar>
+  `;
+};
+```
diff --git a/packages/calendar/package.json b/packages/calendar/package.json
index 0d3191e04..b4a1910c6 100644
--- a/packages/calendar/package.json
+++ b/packages/calendar/package.json
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "prepublishOnly": "../../scripts/npm-prepublish.js",
+    "start": "cd ../../ && yarn dev-server --open packages/calendar/README.md",
     "test": "cd ../../ && yarn test:browser --grep \"packages/calendar/test/**/*.test.js\"",
     "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/calendar/test/**/*.test.js\""
   },
diff --git a/packages/calendar/stories/index.stories.mdx b/packages/calendar/stories/index.stories.mdx
deleted file mode 100644
index ca9483051..000000000
--- a/packages/calendar/stories/index.stories.mdx
+++ /dev/null
@@ -1,257 +0,0 @@
-import {
-  Story,
-  Meta,
-  html,
-} from '@open-wc/demoing-storybook';
-import { css } from '@lion/core';
-
-import '../lion-calendar.js';
-
-<Meta title="Others/Calendar" parameters={{ component: 'lion-calendar' }} />
-
-# Calendar
-
-`lion-calendar` is a reusable and accessible calendar view.
-
-export const calendarDemoStyle = css`
-  .demo-calendar {
-    border: 1px solid #adadad;
-    box-shadow: 0 0 16px #ccc;
-    max-width: 500px;
-  }
-`;
-
-<Story name="Default">
-  {html`
-    <style>
-      ${calendarDemoStyle}
-    </style>
-    <lion-calendar class="demo-calendar"></lion-calendar>
-  `}
-</Story>
-
-```html
-<lion-calendar></lion-calendar>
-```
-
-## Features
-
-- fully accessible keyboard navigation (Arrow Keys, PgUp, PgDn, ALT+PgUp, ALT+PgDn)
-- **minDate**: disables all dates before a given date
-- **maxDate**: disables all dates after a given date
-- **disableDates**: disables some dates within an available range
-- **selectedDate**: currently selected date
-- **centralDate**: date that determines the currently visible month and that will be focused when keyboard moves the focus to the month grid
-- **focusedDate**: (getter only) currently focused date (if there is any with real focus)
-- **focusDate(date)**: focus on a certain date
-- **focusSelectedDate()**: focus on the current selected date
-- **focusCentralDate()**: focus on the current central date
-- **firstDayOfWeek**: typically Sunday (default) or Monday
-- **weekdayHeaderNotation**: long/short/narrow for the current locale (e.g. Thursday/Thu/T)
-- **locale**: different locale for the current component only
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/calendar
-```
-
-```js
-import '@lion/calendar/lion-calendar.js';
-```
-
-## Move to the selected date
-
-The `selectedDate` is the date which is currently marked as selected.
-You usually select a date by clicking on it with the mouse or hitting Enter on the keyboard.
-
-The `selectedDate` might not be within the dates in the current month view.
-
-<Story name="Selected Date">
-  {html`
-    <style>
-      ${calendarDemoStyle}
-    </style>
-    <lion-calendar class="demo-calendar" .selectedDate=${new Date(1988, 2, 5)}></lion-calendar>
-  `}
-</Story>
-
-```html
-<lion-calendar .selectedDate="${new Date(1988, 2, 5)}"></lion-calendar>
-```
-
-## Central Date
-
-The `centralDate` defines which day will be focused when keyboard moves the focus to the current month grid.
-By default it is set to today, or the enabled day of the current month view that is closest to today's date.
-
-The next and previous months' buttons work by changing the `centralDate` with plus or minus one month.
-Changing the `centralDate` may mean a different view will be displayed to your users if it is in a different month.
-Usually if you change only the day, "nothing" happens as it's already currently in view.
-
-The `centralDate` can be different from `selectedDate` as you can have today as actively selected but still look at date that is years ago.
-When the `selectedDate` changes, it will sync its value to the `centralDate`.
-
-<Story name="Central Date">
-  {() => {
-    const today = new Date();
-    const centralDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
-    return html`
-      <style>
-        ${calendarDemoStyle}
-      </style>
-      <lion-calendar class="demo-calendar" .centralDate="${centralDate}"></lion-calendar>
-    `;
-  }}
-</Story>
-
-```html
-<lion-calendar .centralDate="${new Date(1988, 2, 5)}"></lion-calendar>
-```
-
-## Controlling focus
-
-You can control the focus by calling the following methods
-- `focusCentralDate()`
-- `focusSelectedDate()`
-- `focusDate(dateInstanceToFocus)`
-
-Be aware that the central date changes when a new date is focused.
-
-<Story name="Controlling focus">
-  {() => {
-    const today = new Date();
-    const selectedDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 1);
-    const centralDate = new Date(today.getFullYear(), today.getMonth() + 1, today.getDate());
-    return html`
-      <style>
-        ${calendarDemoStyle}
-      </style>
-      <lion-calendar
-        id="js-demo-calendar"
-        class="demo-calendar"
-        .selectedDate="${selectedDate}"
-        .centralDate="${centralDate}"
-      ></lion-calendar>
-      <p>
-        Focus
-        <button @click="${() => document.querySelector('#js-demo-calendar').focusCentralDate()}">
-          Central date
-        </button>
-        <button @click="${() => document.querySelector('#js-demo-calendar').focusSelectedDate()}">
-          Selected date
-        </button>
-        <button @click="${() => document.querySelector('#js-demo-calendar').focusDate(today)}">
-          Today
-        </button>
-      </p>
-    `;
-  }}
-</Story>
-
-## Limiting selectable values
-
-### Providing a lower limit
-
-To give a lower limit you can bind a date to the `minDate` property.
-
-<Story name="minDate">
-  {() => {
-    const minDate = new Date();
-    return html`
-      <style>
-        ${calendarDemoStyle}
-      </style>
-      <lion-calendar class="demo-calendar" .minDate="${minDate}"></lion-calendar>
-    `;
-  }}
-</Story>
-
-```html
-<lion-calendar .minDate="${new Date()}"></lion-calendar>
-```
-
-### Provide a higher limit
-
-To give a higher limit you can bind a date to the `maxDate` property. In this example, we show how to create an offset of + 2 days.
-
-<Story name="maxDate">
-  {() => {
-  const today = new Date();
-  const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2);
-  return html`
-    <style>
-      ${calendarDemoStyle}
-    </style>
-    <lion-calendar class="demo-calendar" .maxDate="${maxDate}"></lion-calendar>
-  `;
-  }}
-</Story>
-
-```js
-const today = new Date();
-const maxDate = new Date(today.getFullYear(), today.getMonth(), today.getDate() + 2);
-```
-
-```html
-<lion-calendar .maxDate="${maxDate}"></lion-calendar>
-```
-
-### Provide a list of disabled dates
-
-In some cases a specific date or day of the week needs to be disabled, supply those days to the `disableDates` property.
-
-<Story name="disableDates">
-  {html`
-    <style>
-      ${calendarDemoStyle}
-    </style>
-    <lion-calendar
-      class="demo-calendar"
-      .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
-    ></lion-calendar>
-  `}
-</Story>
-
-```html
-<lion-calendar
-  .disableDates="${day => day.getDay() === 6 || day.getDay() === 0}"
-></lion-calendar>
-```
-
-### Combined disable dates
-
-To limit the scope of possible dates further, combine the methods mentioned above.
-
-<Story name="Combined disable dates">
-  {() => {
-    const today = new Date();
-    const maxDate = new Date(today.getFullYear(), today.getMonth() + 2, today.getDate());
-    return html`
-      <style>
-        ${calendarDemoStyle}
-      </style>
-      <lion-calendar
-        class="demo-calendar"
-        .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
-        .minDate="${new Date()}"
-        .maxDate="${maxDate}"
-      ></lion-calendar>
-    `;
-  }}
-</Story>
-
-```js
-const today = new Date();
-const maxDate = new Date(today.getFullYear(), today.getMonth() + 2, today.getDate());
-```
-
-```html
-<lion-calendar
-  .disableDates=${day => day.getDay() === 6 || day.getDay() === 0}
-  .minDate="${new Date()}"
-  .maxDate="${maxDate}"
-></lion-calendar>
-```
diff --git a/packages/checkbox-group/README.md b/packages/checkbox-group/README.md
index b424858a9..631b11f38 100644
--- a/packages/checkbox-group/README.md
+++ b/packages/checkbox-group/README.md
@@ -1,13 +1,45 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Checkbox Group
 
-`lion-checkbox-group` component enhances the functionality of the native `<input type="checkbox">` element. Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle.
+`lion-checkbox-group` component enhances the functionality of the native `<input type="checkbox">` element.
+Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle.
 
-You should use `lion-checkbox` inside this element.
+> You should use [lion-checkbox](https://github.com/ing-bank/lion/tree/master/packages/checkbox) elements as the children of the `<lion-checkbox-group>`.
+
+```js script
+import { html } from 'lit-html';
+import { Required, Validator, loadDefaultFeedbackMessages } from '@lion/validate';
+import './lion-checkbox-group.js';
+import './lion-checkbox.js';
+
+export default {
+  title: 'Forms/Checkbox Group',
+};
+
+loadDefaultFeedbackMessages();
+```
+
+```js story
+export const main = () => html`
+  <lion-checkbox-group name="scientists[]" label="Favorite scientists">
+    <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
+    <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
+    <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+  </lion-checkbox-group>
+`;
+```
+
+> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
 
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-checkbox-group--default-story) for a live demo and API documentation
 
+## Features
+
+Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
+
 ## How to use
 
 ### Installation
@@ -21,6 +53,26 @@ import '@lion/checkbox-group/lion-checkbox-group.js';
 import '@lion/checkbox-group/lion-checkbox.js';
 ```
 
+### Model value
+
+The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked.
+
+Given the scientists example above, say that we were to select the first and last options (Archimedes & Marie Curie).
+
+Then the `modelValue` of the `lion-checkbox-group` will look as follows:
+
+```js
+const groupElement = [parent].querySelector('lion-checkbox-group');
+groupElement.modelValue;
+  => ["Archimedes", "Marie Curie"];
+```
+
+### The `name` attribute
+
+The `name` attribute of a `lion-checkbox-group` automatically gets assigned to its `lion-checkbox` children. You can also specify names for the `lion-checkbox` elements, but if this name is different from the name assigned to `lion-checkbox-group`, then an exception will be thrown.
+
+Our recommendation would be to set the `name` attribute only on the `lion-checkbox-group` and not on the `lion-checkbox` elements.
+
 ### Example
 
 ```html
@@ -33,3 +85,102 @@ import '@lion/checkbox-group/lion-checkbox.js';
   <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
 </lion-checkbox-group>
 ```
+
+### Pre-select
+
+You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`.
+
+```js preview-story
+export const preselect = () => html`
+  <lion-checkbox-group name="scientists" label="Favorite scientists">
+    <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
+    <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'} checked></lion-checkbox>
+    <lion-checkbox
+      label="Marie Curie"
+      .modelValue=${{ value: 'Marie Curie', checked: true }}
+    ></lion-checkbox>
+  </lion-checkbox-group>
+`;
+```
+
+### Disabled
+
+You can disable the entire group by setting the `disabled` attribute on the `<lion-checkbox-group>`.
+
+```js preview-story
+export const disabled = () => html`
+  <lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
+    <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
+    <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
+    <lion-checkbox
+      label="Marie Curie"
+      .modelValue=${{ value: 'Marie Curie', checked: true }}
+    ></lion-checkbox>
+  </lion-checkbox-group>
+`;
+```
+
+### Validation
+
+You can apply validation to the `<lion-checkbox-group>`, similar to how you would do so in any fieldset.
+The interaction states of the `<lion-checkbox-group>` are evaluated in order to hide or show feedback messages.
+
+```js preview-story
+export const validation = () => {
+  const validate = () => {
+    const checkboxGroup = document.querySelector('#scientists');
+    checkboxGroup.submitted = !checkboxGroup.submitted;
+  };
+  return html`
+    <lion-checkbox-group
+      id="scientists"
+      name="scientists[]"
+      label="Favorite scientists"
+      .validators=${[new Required()]}
+    >
+      <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
+      <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
+      <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+    </lion-checkbox-group>
+    <button @click="${() => validate()}">Validate</button>
+  `;
+};
+```
+
+### Validation advanced
+
+Below is a more advanced validator on the group that evaluates the children checkboxes' checked states.
+
+```js preview-story
+export const validationAdvanced = () => {
+  class HasMinTwoChecked extends Validator {
+    execute(value) {
+      return value.length < 2;
+    }
+    static get validatorName() {
+      return 'HasMinTwoChecked';
+    }
+    static async getMessage() {
+      return 'You need to select at least 2 values.';
+    }
+  }
+  const validate = () => {
+    const checkboxGroup = document.querySelector('#scientists2');
+    checkboxGroup.submitted = !checkboxGroup.submitted;
+  };
+  return html`
+    <lion-checkbox-group
+      id="scientists2"
+      name="scientists[]"
+      label="Favorite scientists"
+      help-text="You should have at least 2 of those"
+      .validators=${[new Required(), new HasMinTwoChecked()]}
+    >
+      <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
+      <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
+      <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
+    </lion-checkbox-group>
+    <button @click="${() => validate()}">Validate</button>
+  `;
+};
+```
diff --git a/packages/checkbox-group/package.json b/packages/checkbox-group/package.json
index 19454e352..02616e5da 100644
--- a/packages/checkbox-group/package.json
+++ b/packages/checkbox-group/package.json
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "prepublishOnly": "../../scripts/npm-prepublish.js",
+    "start": "cd ../../ && yarn dev-server --open packages/checkbox-group/README.md",
     "test": "cd ../../ && yarn test:browser --grep \"packages/checkbox-group/test/**/*.test.js\"",
     "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/checkbox-group/test/**/*.test.js\""
   },
diff --git a/packages/checkbox-group/stories/index.stories.mdx b/packages/checkbox-group/stories/index.stories.mdx
deleted file mode 100644
index 1736b9e37..000000000
--- a/packages/checkbox-group/stories/index.stories.mdx
+++ /dev/null
@@ -1,328 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { Required, Validator, loadDefaultFeedbackMessages } from '@lion/validate';
-
-import '../lion-checkbox-group.js';
-import '../lion-checkbox.js';
-
-<Meta title="Forms/Checkbox Group" parameters={{ component: 'lion-checkbox-group' }} />
-
-# Checkbox Group
-
-`lion-checkbox-group` component enhances the functionality of the native `<input type="checkbox">` element.
-Its purpose is to provide a way for users to check **multiple** options amongst a set of choices, or to function as a single toggle.
-
-> You should use <a href="https://github.com/ing-bank/lion/tree/master/packages/checkbox" target="_blank">`<lion-checkbox>`</a> elements as the children of the `<lion-checkbox-group>`.
-
-<Story name="Default">
-  {html`
-    <lion-checkbox-group
-      name="scientists[]"
-      label="Favorite scientists"
-    >
-      <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-      <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
-      <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
-    </lion-checkbox-group>
-  `}
-</Story>
-
-```html
-<lion-checkbox-group
-  name="scientists[]"
-  label="Favourite scientists"
->
-  <lion-checkbox label="Archimedes" .choiceValue=${'Archimedes'}></lion-checkbox>
-  <lion-checkbox label="Francis Bacon" .choiceValue=${'Francis Bacon'}></lion-checkbox>
-  <lion-checkbox label="Marie Curie" .choiceValue=${'Marie Curie'}></lion-checkbox>
-</lion-checkbox-group>
-```
-
-> Make sure that the checkbox-group also has a name attribute, this is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
-
-## Features
-
-Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/checkbox-group
-```
-
-```js
-import '@lion/checkbox-group/lion-checkbox-group.js';
-import '@lion/checkbox-group/lion-checkbox.js';
-```
-
-### Model value
-
-The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked.
-
-Given the scientists example above, say that we were to select the first and last options (Archimedes & Marie Curie).
-
-Then the `modelValue` of the `lion-checkbox-group` will look as follows:
-
-```js
-const groupElement = [parent].querySelector('lion-checkbox-group');
-groupElement.modelValue;
-  => ["Archimedes", "Marie Curie"];
-```
-
-### The `name` attribute
-
-The `name` attribute of a `lion-checkbox-group` automatically gets assigned to its `lion-checkbox` children. You can also specify names for the `lion-checkbox` elements, but if this name is different from the name assigned to `lion-checkbox-group`, then an exception will be thrown.
-
-Our recommendation would be to set the `name` attribute only on the `lion-checkbox-group` and not on the `lion-checkbox` elements.
-
-## Examples
-
-### Pre-select
-
-You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`.
-
-<Story name="Pre-select">
-  {html`
-    <lion-checkbox-group name="scientists" label="Favorite scientists">
-      <lion-checkbox
-        label="Archimedes"
-        .choiceValue=${'Archimedes'}
-      ></lion-checkbox>
-      <lion-checkbox
-        label="Francis Bacon"
-        .choiceValue=${'Francis Bacon'}
-        checked
-      ></lion-checkbox>
-      <lion-checkbox
-        label="Marie Curie"
-        .modelValue=${{ value: 'Marie Curie', checked: true }}
-      ></lion-checkbox>
-    </lion-checkbox-group>
-  `}
-</Story>
-
-```html
-<lion-checkbox-group name="scientists[]" label="Favorite scientists">
-  <lion-checkbox
-    label="Archimedes"
-    .choiceValue=${'Archimedes'}
-  ></lion-checkbox>
-  <lion-checkbox
-    label="Francis Bacon"
-    .choiceValue=${'Francis Bacon'}
-    checked
-  ></lion-checkbox>
-  <lion-checkbox
-    label="Marie Curie"
-    .modelValue=${{ value: 'Marie Curie', checked: true }}
-  ></lion-checkbox>
-</lion-checkbox-group>
-```
-
-### Disabled
-
-You can disable the entire group by setting the `disabled` attribute on the `<lion-checkbox-group>`.
-
-<Story name="Disabled">
-  {html`
-    <lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
-      <lion-checkbox
-        label="Archimedes"
-        .choiceValue=${'Archimedes'}
-      ></lion-checkbox>
-      <lion-checkbox
-        label="Francis Bacon"
-        .choiceValue=${'Francis Bacon'}
-      ></lion-checkbox>
-      <lion-checkbox
-        label="Marie Curie"
-        .modelValue=${{ value: 'Marie Curie', checked: true }}
-      ></lion-checkbox>
-    </lion-checkbox-group>
-  `}
-</Story>
-
-```html
-<lion-checkbox-group name="scientists[]" label="Favorite scientists" disabled>
-  <lion-checkbox
-    label="Archimedes"
-    .choiceValue=${'Archimedes'}
-  ></lion-checkbox>
-  <lion-checkbox
-    label="Francis Bacon"
-    .choiceValue=${'Francis Bacon'}
-  ></lion-checkbox>
-  <lion-checkbox
-    label="Marie Curie"
-    .modelValue=${{ value: 'Marie Curie', checked: true }}
-  ></lion-checkbox>
-</lion-checkbox-group>
-```
-
-### Validation
-
-You can apply validation to the `<lion-checkbox-group>`, similar to how you would do so in any fieldset.
-The interaction states of the `<lion-checkbox-group>` are evaluated in order to hide or show feedback messages.
-
-<Story name="Validation">
-  {() => {
-    loadDefaultFeedbackMessages();
-    const validate = () => {
-      const checkboxGroup = document.querySelector('#scientists');
-      checkboxGroup.submitted = !checkboxGroup.submitted;
-    };
-    return html`
-      <lion-checkbox-group
-        id="scientists"
-        name="scientists[]"
-        label="Favorite scientists"
-        .validators=${[new Required()]}
-      >
-        <lion-checkbox
-          label="Archimedes"
-          .choiceValue=${'Archimedes'}
-        ></lion-checkbox>
-        <lion-checkbox
-          label="Francis Bacon"
-          .choiceValue=${'Francis Bacon'}
-        ></lion-checkbox>
-        <lion-checkbox
-          label="Marie Curie"
-          .choiceValue=${'Marie Curie'}
-        ></lion-checkbox>
-      </lion-checkbox-group>
-      <button @click="${() => validate()}">Validate</button>
-    `;
-  }}
-</Story>
-
-```js
-import { Required, loadDefaultFeedbackMessages } from '@lion/validate';
-loadDefaultFeedbackMessages();
-const validate = () => {
-  const checkboxGroup = document.querySelector('#scientists');
-  checkboxGroup.submitted = !checkboxGroup.submitted;
-};
-```
-
-```html
-<lion-checkbox-group
-  id="scientists"
-  name="scientists[]"
-  label="Favorite scientists"
-  .validators=${[new Required()]}
->
-  <lion-checkbox
-    label="Archimedes"
-    .choiceValue=${'Archimedes'}
-  ></lion-checkbox>
-  <lion-checkbox
-    label="Francis Bacon"
-    .choiceValue=${'Francis Bacon'}
-  ></lion-checkbox>
-  <lion-checkbox
-    label="Marie Curie"
-    .choiceValue=${'Marie Curie'}
-  ></lion-checkbox>
-</lion-checkbox-group>
-<button @click="${() => validate()}">Validate</button>
-```
-
-### Validation advanced
-
-Below is a more advanced validator on the group that evaluates the children checkboxes' checked states.
-
-<Story name="Validation Advanced">
-  {() => {
-    loadDefaultFeedbackMessages();
-    class HasMinTwoChecked extends Validator {
-      execute(value) {
-        return value.length < 2;
-      }
-      static get validatorName() {
-        return 'HasMinTwoChecked';
-      }
-      static async getMessage() {
-        return 'You need to select at least 2 values.';
-      }
-    }
-    const validate = () => {
-      const checkboxGroup = document.querySelector('#scientists2');
-      checkboxGroup.submitted = !checkboxGroup.submitted;
-    };
-    return html`
-      <lion-checkbox-group
-        id="scientists2"
-        name="scientists[]"
-        label="Favorite scientists"
-        help-text="You should have at least 2 of those"
-        .validators=${[new Required(), new HasMinTwoChecked()]}
-      >
-        <lion-checkbox
-          label="Archimedes"
-          .choiceValue=${'Archimedes'}
-        ></lion-checkbox>
-        <lion-checkbox
-          label="Francis Bacon"
-          .choiceValue=${'Francis Bacon'}
-        ></lion-checkbox>
-        <lion-checkbox
-          label="Marie Curie"
-          .choiceValue=${'Marie Curie'}
-        ></lion-checkbox>
-      </lion-checkbox-group>
-      <button @click="${() => validate()}">Validate</button>
-    `;
-  }}
-</Story>
-
-```js
-import { Required, Validator, loadDefaultFeedbackMessages } from '@lion/validate';
-
-loadDefaultFeedbackMessages();
-
-class HasMinTwoChecked extends Validator {
-
-  execute(value) {
-    return value.length < 2;
-  }
-
-  static get validatorName() {
-    return 'HasMinTwoChecked';
-  }
-
-  static async getMessage() {
-    return 'You need to select at least 2 values.';
-  }
-}
-
-const validate = () => {
-  const checkboxGroup = document.querySelector('#scientists2');
-  checkboxGroup.submitted = !checkboxGroup.submitted;
-};
-```
-
-```html
-<lion-checkbox-group
-  id="scientists2"
-  name="scientists[]"
-  label="Favorite scientists"
-  help-text="You should have at least 2 of those"
-  .validators=${[new Required(), new HasMinTwoChecked()]}
->
-  <lion-checkbox
-    label="Archimedes"
-    .choiceValue=${'Archimedes'}
-  ></lion-checkbox>
-  <lion-checkbox
-    label="Francis Bacon"
-    .choiceValue=${'Francis Bacon'}
-  ></lion-checkbox>
-  <lion-checkbox
-    label="Marie Curie"
-    .choiceValue=${'Marie Curie'}
-  ></lion-checkbox>
-</lion-checkbox-group>
-<button @click="${() => validate()}">Validate</button>
-```
diff --git a/packages/choice-input/README.md b/packages/choice-input/README.md
index dcd4e7012..00d8ba714 100644
--- a/packages/choice-input/README.md
+++ b/packages/choice-input/README.md
@@ -1,11 +1,19 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # ChoiceInputMixin
 
+```js script
+export default {
+  title: 'Forms/System/Choice',
+};
+```
+
 `lion-choice-input` mixin is a fundamental building block of form controls which return a checked-state. It is used in:
 
 - [lion-checkbox](../checkbox/)
-- [lion-option](../option/))
-- [lion-radio](../radio/))
-- [lion-switch](../switch/))
+- [lion-option](../option/)
+- [lion-radio](../radio/)
+- [lion-switch](../switch/)
 
 ## Features
 
diff --git a/packages/core/README.md b/packages/core/README.md
index d379cda9f..7e03a51b7 100644
--- a/packages/core/README.md
+++ b/packages/core/README.md
@@ -1,11 +1,35 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Core
 
-`lion-input-amount` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an amount.
+The `@lion/core` package is mostly for in depth usage.
+It handles the version of `lit-element` and `lit-html`.
+
+In order to be sure a compatible version is used import it via this package.
+
+```js script
+export default {
+  title: 'Others/System/Core',
+};
+```
+
+```js
+import { LitElement, html, render } from '@lion/core';
+```
 
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/core) for a live demo and API documentation
 
+## Features
+
+- [function to deduplicate mixins (dedupeMixin)](#deduping-of-mixins)
+- Mixin to handle disabled (DisabledMixin)
+- Mixin to handle disabled AND tabIndex (DisabledWithTabIndexMixin)
+- Mixin to manage auto generated needed slot elements in light dom (SlotMixin)
+
+> These features are not well documented - care to help out?
+
 ## How to use
 
 ### Installation
@@ -25,3 +49,46 @@ const BaseMixin = dedupeMixin((superClass) => {
   return class extends superClass { ... };
 });
 ```
+
+## Deduping of mixins
+
+### Why is deduping of mixins necessary?
+
+Imagine you are developing web components and creating ES classes for Custom Elements. You have two generic mixins (let's say `M1` and `M2`) which require independently the same even more generic mixin (`BaseMixin`). `M1` and `M2` can be used independently, that means they have to inherit from `BaseMixin` also independently. But they can be also used in combination. Sometimes `M1` and `M2` are used in the same component and can mess up the inheritance chain if `BaseMixin` is applied twice.
+In other words, this may happen to the protoype chain `... -> M2 -> BaseMixin -> M1 -> BaseMixin -> ...`.
+
+An example of this may be a `LocalizeMixin` used across different components and mixins. Some mixins may need it and many components need it too and can not rely on other mixins to have it by default, so must inherit from it independently.
+
+The more generic the mixin is, the higher the chance of being appliend more than once. As a mixin author you can't control how it is used, and can't always predict it. So as a safety measure it is always recommended to create deduping mixins.
+
+### Usage of dedupeMixin()
+
+This is an example of how to make a conventional ES mixin deduping.
+
+```js
+const BaseMixin = dedupeMixin((superClass) => {
+  return class extends superClass { ... };
+});
+
+// inherits from BaseMixin
+const M1 = dedupeMixin((superClass) => {
+  return class extends BaseMixin(superClass) { ... };
+});
+
+// inherits from BaseMixin
+const M2 = dedupeMixin((superClass) => {
+  return class extends BaseMixin(superClass) { ... };
+});
+
+// component inherits from M1
+// MyCustomElement -> M1 -> BaseMixin -> BaseCustomElement;
+class MyCustomElement extends M1(BaseCustomElement) { ... }
+
+// component inherits from M2
+// MyCustomElement -> M2 -> BaseMixin -> BaseCustomElement;
+class MyCustomElement extends M2(BaseCustomElement) { ... }
+
+// component inherits from both M1 and M2
+// MyCustomElement -> M2 -> M1 -> BaseMixin -> BaseCustomElement;
+class MyCustomElement extends M2(M1(BaseCustomElement)) { ... }
+```
diff --git a/packages/core/stories/index.stories.mdx b/packages/core/stories/index.stories.mdx
deleted file mode 100644
index bf1981cdf..000000000
--- a/packages/core/stories/index.stories.mdx
+++ /dev/null
@@ -1,67 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-<Meta title="Others/System/Core" />
-
-# Core
-
-The `@lion/core` package is mostly for in depth usage.
-It handles the version of `lit-element` and `lit-html`.
-
-In order to be sure a compatible version is used import it via this package.
-
-```js
-import { LitElement, html, render } from '@lion/core';
-```
-
-It offers low level functionality for
-
-- [function to deduplicate mixins (dedupeMixin)](#deduping-of-mixins)
-- Mixin to handle disabled (DisabledMixin)
-- Mixin to handle disabled AND tabIndex (DisabledWithTabIndexMixin)
-- Mixin to manage auto generated needed slot elements in light dom (SlotMixin)
-
-
-> These features are not well documented - care to help out?
-
-## Deduping of mixins
-
-### Why is deduping of mixins necessary?
-
-Imagine you are developing web components and creating ES classes for Custom Elements. You have two generic mixins (let's say `M1` and `M2`) which require independently the same even more generic mixin (`BaseMixin`). `M1` and `M2` can be used independently, that means they have to inherit from `BaseMixin` also independently. But they can be also used in combination. Sometimes `M1` and `M2` are used in the same component and can mess up the inheritance chain if `BaseMixin` is applied twice.
-In other words, this may happen to the protoype chain `... -> M2 -> BaseMixin -> M1 -> BaseMixin -> ...`.
-
-An example of this may be a `LocalizeMixin` used across different components and mixins. Some mixins may need it and many components need it too and can not rely on other mixins to have it by default, so must inherit from it independently.
-
-The more generic the mixin is, the higher the chance of being appliend more than once. As a mixin author you can't control how it is used, and can't always predict it. So as a safety measure it is always recommended to create deduping mixins.
-
-### Usage of dedupeMixin()
-
-This is an example of how to make a conventional ES mixin deduping.
-
-```js
-const BaseMixin = dedupeMixin((superClass) => {
-  return class extends superClass { ... };
-});
-
-// inherits from BaseMixin
-const M1 = dedupeMixin((superClass) => {
-  return class extends BaseMixin(superClass) { ... };
-});
-
-// inherits from BaseMixin
-const M2 = dedupeMixin((superClass) => {
-  return class extends BaseMixin(superClass) { ... };
-});
-
-// component inherits from M1
-// MyCustomElement -> M1 -> BaseMixin -> BaseCustomElement;
-class MyCustomElement extends M1(BaseCustomElement) { ... }
-
-// component inherits from M2
-// MyCustomElement -> M2 -> BaseMixin -> BaseCustomElement;
-class MyCustomElement extends M2(BaseCustomElement) { ... }
-
-// component inherits from both M1 and M2
-// MyCustomElement -> M2 -> M1 -> BaseMixin -> BaseCustomElement;
-class MyCustomElement extends M2(M1(BaseCustomElement)) { ... }
-```
diff --git a/packages/dialog/README.md b/packages/dialog/README.md
index a2f968e23..82ef8b28a 100644
--- a/packages/dialog/README.md
+++ b/packages/dialog/README.md
@@ -1,12 +1,54 @@
+<<<<<<< HEAD
+=======
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
+>>>>>>> feat: use markdown javascript (mdjs) for documentation
 # Dialog
 
 `lion-dialog` is a component wrapping a modal dialog controller.
 Its purpose is to make it easy to use our Overlay System declaratively.
 
+```js script
+import { html } from 'lit-html';
+import demoStyle from './docs/demo-dialog-style.js';
+import './docs/styled-dialog-content.js';
+import './lion-dialog.js';
+
+export default {
+  title: 'Overlays/Dialog',
+};
+```
+
+```js story
+export const main = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <lion-dialog>
+    <button slot="invoker">Click me to open dialog</button>
+    <div slot="content" class="dialog">
+      Hello! You can close this dialog here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </lion-dialog>
+`;
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/overlays-specific-wc-dialog) for a live demo and documentation
 
+## Features
+
+- Show content when clicking the invoker
+- Respond to close event in the slot="content" element, to close the content
+- Have a `.config` object to set or update the OverlayController's configuration
+
 ## How to use
 
 ### Installation
@@ -16,9 +58,27 @@ npm i --save @lion/dialog
 ```
 
 ```js
+import { LionDialog } from '@lion/dialog';
+// or
 import '@lion/dialog/lion-dialog.js';
 ```
 
+## Usage notes
+
+- Your `slot="content"` node will be moved to the global overlay container during initialization.
+  After, your content node is no longer a child of `lion-dialog`.
+  If you still need to access it from the `lion-dialog` you can do so by using the `._overlayContentNode` property.
+- To close the overlay from within the content node, you need to dispatch a `close-overlay` event that bubbles.
+  It has to be able to reach the content node.
+- If you need to traverse shadow boundaries, you will have to add `composed: true` as well, although this is discouraged as a practice.
+
+## Changing the configuration
+
+You can use the `config` property on the dialog to change the configuration.
+The documentation of the full config object can be found in the `lion/overlay` package or here in [Overlay System - Configuration](/?path=/docs/overlays-system-configuration--placement-mode-local).
+
+The `config` property uses a setter to merge the passed configuration with the current, so you only **overwrite what you pass** when updating `config`.
+
 ### Example
 
 ```html
@@ -30,3 +90,118 @@ import '@lion/dialog/lion-dialog.js';
   <button slot="invoker">Click me</button>
 </lion-dialog>
 ```
+
+### Styling content
+
+It's not possible to style content from the dialog component. This is because the content slot is moved to the global root node. This is why a custom component should be created and slotted in as the content. This ensures style encapsulation on the dialog content.
+
+```js preview-story
+export const stylingContent = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <lion-dialog .config=${{ hidesOnOutsideClick: true, hidesOnEsc: true }}>
+    <button slot="invoker">Styled dialog</button>
+    <styled-dialog-content slot="content"></styled-dialog-content>
+  </lion-dialog>
+`;
+```
+
+### Close overlay from component slotted as content
+
+The overlay cannot be closed by dispatching the `close-overlay` from a button in a styled component that is slotted in as content, because it will not cross the shadow boundary of the component. A method should be created that will dispatch the `close-overlay` event from the component.
+
+```js preview-story
+export const closeOverlayFromComponent = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <lion-dialog .config=${{ hidesOnOutsideClick: true, hidesOnEsc: true }}>
+    <button slot="invoker">Styled dialog</button>
+    <styled-dialog-content slot="content"></styled-dialog-content>
+  </lion-dialog>
+`;
+```
+
+### Placement overrides
+
+```js preview-story
+export const placementOverrides = () => {
+  const dialog = placement => html`
+    <lion-dialog .config=${{ viewportConfig: { placement } }}>
+      <button slot="invoker">Dialog ${placement}</button>
+      <div slot="content" class="dialog">
+        Hello! You can close this notification here:
+        <button
+          class="close-button"
+          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+        >
+          ⨯
+        </button>
+      </div>
+    </lion-dialog>
+  `;
+  return html`
+    <style>
+      ${demoStyle}
+    </style>
+    <div class="demo-box_placements">
+      ${dialog('center')} ${dialog('top-left')} ${dialog('top-right')} ${dialog('bottom-left')} ${dialog(
+        'bottom-right',
+      )}
+    </div>
+  `;
+};
+```
+
+Configuration passed to `config` property:
+
+```js
+{
+  viewportConfig: {
+    placement: ... // <-- choose a position
+  }
+}
+```
+
+### Other overrides
+
+No backdrop, hides on escape, prevents scrolling while opened, and focuses the body when hiding.
+
+```js preview-story
+export const otherOverrides = () => html`
+  <style>
+    ${demoStyle}
+  </style>
+  <lion-dialog
+    .config=${{
+      hasBackdrop: false,
+      hidesOnEscape: true,
+      preventsScroll: true,
+      elementToFocusAfterHide: document.body,
+    }}
+  >
+    <button slot="invoker">Click me to open dialog</button>
+    <div slot="content" class="dialog">
+      Hello! You can close this dialog here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </lion-dialog>
+`;
+```
+
+Configuration passed to `config` property:
+
+```js
+{
+  hasBackdrop: false,
+  hidesOnEscape: true,
+  preventsScroll: true,
+  elementToFocusAfterHide: document.body
+}
+```
diff --git a/packages/dialog/stories/demo-dialog-style.js b/packages/dialog/docs/demo-dialog-style.js
similarity index 100%
rename from packages/dialog/stories/demo-dialog-style.js
rename to packages/dialog/docs/demo-dialog-style.js
diff --git a/packages/dialog/stories/styled-dialog-content.js b/packages/dialog/docs/styled-dialog-content.js
similarity index 100%
rename from packages/dialog/stories/styled-dialog-content.js
rename to packages/dialog/docs/styled-dialog-content.js
diff --git a/packages/dialog/package.json b/packages/dialog/package.json
index f4684a189..5e95aa774 100644
--- a/packages/dialog/package.json
+++ b/packages/dialog/package.json
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "prepublishOnly": "../../scripts/npm-prepublish.js",
+    "start": "cd ../../ && yarn dev-server --open packages/dialog/README.md",
     "test": "cd ../../ && yarn test:browser --grep \"packages/dialog/test/**/*.test.js\"",
     "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/dialog/test/**/*.test.js\""
   },
diff --git a/packages/dialog/stories/index.stories.mdx b/packages/dialog/stories/index.stories.mdx
deleted file mode 100644
index 5ea69d905..000000000
--- a/packages/dialog/stories/index.stories.mdx
+++ /dev/null
@@ -1,279 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import demoStyle from './demo-dialog-style.js';
-import './styled-dialog-content.js';
-import '../lion-dialog.js';
-
-<Meta title="Overlays/Dialog" parameters={{ component: 'lion-dialog' }} />
-
-# Dialog
-
-`lion-dialog` is a component wrapping a modal dialog controller.
-Its purpose is to make it easy to use our Overlay System declaratively.
-
-<Story name="Default">
-  {html`
-    <style>${demoStyle}</style>
-    <lion-dialog>
-      <button slot="invoker">Click me to open dialog</button>
-      <div slot="content" class="dialog">
-        Hello! You can close this dialog here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </lion-dialog>
-  `}
-</Story>
-
-```html
-<lion-dialog>
-  <button slot="invoker">Click me to open dialog</button>
-  <div slot="content" class="dialog">
-    Hello! You can close this dialog here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</lion-dialog>
-```
-
-## Features
-
-- Show content when clicking the invoker
-- Respond to close event in the slot="content" element, to close the content
-- Have a `.config` object to set or update the OverlayController's configuration
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/dialog
-```
-
-```js
-import '@lion/dialog/lion-dialog.js';
-```
-
-## Usage notes
-
-- Your `slot="content"` node will be moved to the global overlay container during initialization.
-  After, your content node is no longer a child of `lion-dialog`.
-  If you still need to access it from the `lion-dialog` you can do so by using the `._overlayContentNode` property.
-- To close the overlay from within the content node, you need to dispatch a `close-overlay` event that bubbles.
-  It has to be able to reach the content node.
-- If you need to traverse shadow boundaries, you will have to add `composed: true` as well, although this is discouraged as a practice.
-
-## Changing the configuration
-
-You can use the `config` property on the dialog to change the configuration.
-The documentation of the full config object can be found in the `lion/overlay` package or here in [Overlay System - Configuration](/?path=/docs/overlays-system-configuration--placement-mode-local).
-
-The `config` property uses a setter to merge the passed configuration with the current, so you only **overwrite what you pass** when updating `config`.
-
-### Styling content
-
-It's not possible to style content from the dialog component. This is because the content slot is moved to the global root node. This is why a custom component should be created and slotted in as the content. This ensures style encapsulation on the dialog content.
-
-<Story name="Styling content">
-  {() => {
-    return html`
-      <style>${demoStyle}</style>
-      <lion-dialog .config=${{ hidesOnOutsideClick: true, hidesOnEsc: true }}>
-        <button slot="invoker">Styled dialog</button>
-        <styled-dialog-content slot="content"></styled-dialog-content>
-      </lion-dialog>
-    `;
-  }}
-</Story>
-
-```html
-<lion-dialog .config=${{ hidesOnOutsideClick: true, hidesOnEsc: true }}>
-  <button slot="invoker">Styled dialog</button>
-  <styled-dialog-content slot="content"></styled-dialog-content>
-</lion-dialog>
-```
-
-```js
-class StyledDialogContent extends LitElement {
-  static get styles() {
-    return [
-      css`
-        :host {
-          background-color: #fff;
-        }
-        .nice {
-          font-weight: bold;
-          color: green;
-        }
-        .close-button {
-          color: black;
-          font-size: 28px;
-          line-height: 28px;
-        }
-      `
-    ];
-  }
-
-  _closeOverlay() {
-    this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
-  }
-
-  render() {
-    return html`
-      <div><p>Hello person who opened the dialog!</p></div>
-      <div><p>Look how nice this <span class="nice">dialog</span> looks!</p>/div>
-      <button
-        class="close-button"
-        @click=${this._closeOverlay}
-      >⨯
-      </button>
-    `;
-  }
-}
-
-customElements.define('styled-dialog-content',StyledDialogContent);
-```
-
-### Close overlay from component slotted as content
-
-The overlay cannot be closed by dispatching the `close-overlay` from a button in a styled component that is slotted in as content, because it will not cross the shadow boundary of the component. A method should be created that will dispatch the `close-overlay` event from the component.
-
-<Story name="Close overlay from component">
-  {() => {
-    return html`
-      <style>${demoStyle}</style>
-      <lion-dialog .config=${{ hidesOnOutsideClick: true, hidesOnEsc: true }}>
-        <button slot="invoker">Styled dialog</button>
-        <styled-dialog-content slot="content"></styled-dialog-content>
-      </lion-dialog>
-    `;
-  }}
-</Story>
-
-```js
-_closeOverlay() {
-  this.dispatchEvent(new Event('close-overlay', { bubbles: true }));
-}
-
-render() {
-  return html`
-    <div><p>Hello person who opened the dialog!</p></div>
-    <div><p>Look how nice this <span class="nice">dialog</span> looks!</p>/div>
-    <button
-      class="close-button"
-      @click=${this._closeOverlay}
-    >⨯
-    </button>
-  `;
-}
-```
-### Placement overrides
-
-<Story name="Placement overrides">
-  {() => {
-    const dialog = placement => html`
-      <lion-dialog .config=${{ viewportConfig: { placement } }}>
-        <button slot="invoker">Dialog ${placement}</button>
-        <div slot="content" class="dialog">
-          Hello! You can close this notification here:
-          <button
-            class="close-button"
-            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-          >
-            ⨯
-          </button>
-        </div>
-      </lion-dialog>
-    `;
-    return html`
-      <style>${demoStyle}</style>
-      <div class="demo-box_placements">
-        ${dialog('center')} ${dialog('top-left')} ${dialog('top-right')} ${dialog('bottom-left')}
-        ${dialog('bottom-right')}
-      </div>
-    `;
-  }}
-</Story>
-
-```html
-<lion-dialog .config=${{ viewportConfig: { placement: 'top-left' } }}>
-  <button slot="invoker">Dialog top-left</button>
-  <div slot="content" class="dialog">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</lion-dialog>
-```
-
-Configuration passed to `config` property:
-```js
-{
-  viewportConfig: {
-    placement: ... // <-- choose a position
-  }
-}
-```
-
-### Other overrides
-
-No backdrop, hides on escape, prevents scrolling while opened, and focuses the body when hiding.
-
-<Story name="Other overrides">
-  {html`
-    <style>${demoStyle}</style>
-    <lion-dialog .config=${{
-      hasBackdrop: false,
-      hidesOnEscape: true,
-      preventsScroll: true,
-      elementToFocusAfterHide: document.body
-    }}>
-      <button slot="invoker">Click me to open dialog</button>
-      <div slot="content" class="dialog">
-        Hello! You can close this dialog here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </lion-dialog>
-  `}
-</Story>
-
-```html
-<lion-dialog .config="${{}}">
-  <button slot="invoker">Open dialog</button>
-  <div slot="content" class="dialog">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</lion-dialog>
-```
-
-Configuration passed to `config` property:
-```js
-{
-  hasBackdrop: false,
-  hidesOnEscape: true,
-  preventsScroll: true,
-  elementToFocusAfterHide: document.body
-}
-```
diff --git a/packages/field/README.md b/packages/field/README.md
index 01c8762ef..cc94cb649 100644
--- a/packages/field/README.md
+++ b/packages/field/README.md
@@ -1,5 +1,13 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Form Fundaments
 
+```js script
+export default {
+  title: 'Forms/Field/Overview',
+};
+```
+
 `Form control`s are the most fundamental building block of the Forms. They are the basis of
 both `field`s and `fieldset`s, and the `form` itself.
 
@@ -21,17 +29,15 @@ On top of this, they feature:
 
 ### Platform fields (wrappers)
 
-- [`LionInput`](../input/), a wrapper for `<input>`
-- [`LionTextarea`](../textarea/), a wrapper for `<textarea>`
-- [`LionSelect`](../select/), a wrapper for `<select>`
-- [`LionRadio`](../radio/), a wrapper for `<input type="radio">`
-- [`LionCheckbox`](../checkbox/), a wrapper for `<input type="checkbox">`
+- [LionInput](?path=/docs/forms-input--main), a wrapper for `<input>`
+- [LionTextarea](?path=/docs/forms-textarea--main), a wrapper for `<textarea>`
+- [LionSelect](?path=/docs/forms-select--main), a wrapper for `<select>`
+- [LionRadio](?path=/docs/forms-radio-group--main), a wrapper for `<input type="radio">`
+- [LionCheckbox](?path=/docs/forms-checkbox-group--main), a wrapper for `<input type="checkbox">`
 
 ### Custom fields (wrappers)
 
-Whenever a native form control doesn't exist or is not sufficient, a
-[custom form field](./docs/CustomFieldsTutorial.md) should be created. One could think of components
-like:
+Whenever a native form control doesn't exist or is not sufficient, a [custom form field](?path=/docs/forms-field-custom-fields-tutorial--page) should be created. One could think of components like:
 
 - slider
 - combobox
@@ -44,15 +50,13 @@ Fieldsets are groups of fields. They can be considered fields on their own as we
 partly share the normalized api via `FormControlMixin`.
 Fieldsets are the basis for:
 
-- [`LionFieldset`](../fieldset/)
-- [`LionForm`](../form/)
-- [`LionRadioGroup`](../radio-group/)
-- [`LionCheckboxGroup`](../checkbox-group/)
+- [LionFieldset](?path=/docs/forms-fieldset-overview--main)
+- [LionForm](?path=/docs/forms-form-overview--main)
+- [LionRadioGroup](?path=/docs/forms-radio-group--main)
+- [LionCheckboxGroup](?path=/docs/forms-checkbox-group--main)
 
 ## Other Resources
 
-- [Model Value](./docs/modelValue.md)
-- [Formatting and parsing](./docs/FormattingAndParsing.md)
-- [Interaction states](./docs/InteractionStates.md)
-- [Validation System](../validate/docs/ValidationSystem.md)
-- [Custom Fields](./docs/CustomFieldsTutorial.md)
+- [Form fundamentals](?path=/docs/forms-field-fundaments--page)
+- [Formatting and parsing](?path=/docs/forms-field-formatting-and-parsing--page)
+- [Custom Fields](?path=/docs/forms-field-custom-fields-tutorial--page)
diff --git a/packages/field/docs/CustomFieldsTutorial.md b/packages/field/docs/CustomFieldsTutorial.md
index 6524158d8..ceafe3899 100644
--- a/packages/field/docs/CustomFieldsTutorial.md
+++ b/packages/field/docs/CustomFieldsTutorial.md
@@ -1,5 +1,13 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Creating a custom field
 
+```js script
+export default {
+  title: 'Forms/Field/Custom fields tutorial',
+};
+```
+
 Custom fields can be created in just a few steps. All you need is an interaction element
 (like for instance a slider, a listbox or a combobox) and connect it to the [Field](../README.md)
 functionality.
@@ -8,9 +16,7 @@ functionality.
 
 An interaction element provides the means for the end user to enter a certain value, just like
 native elements provide in this (think of `<input>`, `<textarea>` and `<select>`).
-An example of a non native element is the
-[slider design pattern](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/#slider)
-described here.
+An example of a non native element is the [slider design pattern](https://www.w3.org/TR/2017/NOTE-wai-aria-practices-1.1-20171214/#slider) described here.
 
 For this tutorial, we assume we have a component `<my-slider>` that exposes its value via property
 `mySliderValue` and sends an event `my-slider-changed` on every value change. To make it focusable,
@@ -19,7 +25,7 @@ it has a tabindex=“0” applied.
 ## Connecting the interaction element to the field
 
 Now we want to integrate the slider in our form framework to enrich the user interface, get
-validation support and get all the other [benefits of LionField](../README.md).
+validation support and get all the other [benefits of LionField](?path=/docs/forms-field-overview--page).
 We start of by creating a component `<lion-slider>` that extends from `LionField`.
 Then we follow the steps below:
 
diff --git a/packages/field/docs/FormFundaments.md b/packages/field/docs/FormFundaments.md
index 3cec7713a..0b854227b 100644
--- a/packages/field/docs/FormFundaments.md
+++ b/packages/field/docs/FormFundaments.md
@@ -1,5 +1,13 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Form Fundaments
 
+```js script
+export default {
+  title: 'Forms/Field/Fundaments',
+};
+```
+
 `Form control`s are the most fundamental building block of the Forms. They are the basis of
 both `field`s and `fieldset`s, and the `form` itself.
 
diff --git a/packages/field/docs/FormattingAndParsing.md b/packages/field/docs/FormattingAndParsing.md
index 982b8f742..f3d1a7fe2 100644
--- a/packages/field/docs/FormattingAndParsing.md
+++ b/packages/field/docs/FormattingAndParsing.md
@@ -1,5 +1,13 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Formatting and parsing
 
+```js script
+export default {
+  title: 'Forms/Field/Formatting and parsing',
+};
+```
+
 The `FormatMixin` keeps track of the `modelValue`, `formattedValue` and `serializedValue`.
 It is designed to work in conjunction with `LionField`.
 
diff --git a/packages/fieldset/README.md b/packages/fieldset/README.md
index e2199ed85..1ccf45fc2 100644
--- a/packages/fieldset/README.md
+++ b/packages/fieldset/README.md
@@ -2,10 +2,50 @@
 
 `lion-fieldset` groups multiple input fields or other fieldsets together.
 
+```js script
+import { html } from 'lit-html';
+import '@lion/input/lion-input.js';
+import { localize } from '@lion/localize';
+import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
+import './lion-fieldset.js';
+import './docs/helpers/demo-fieldset-child.js';
+
+export default {
+  title: 'Forms/Fieldset/Overview',
+};
+```
+
+We have three specific fieldset implementations:
+
+- [lion-form](?path=/docs/forms-form-overview--page)
+- [lion-checkbox-group](?path=/docs/forms-checkbox-group--default-story)
+- [lion-radio-group](?path=/docs/forms-radio-group--default-story)
+
+```js story
+export const main = () => html`
+  <lion-fieldset name="nameGroup" label="Name">
+    <lion-input name="FirstName" label="First Name"></lion-input>
+    <lion-input name="LastName" label="Last Name"></lion-input>
+  </lion-fieldset>
+`;
+```
+
+A native fieldset element should always have a legend-element for a11y purposes.
+However, our fieldset element is not native and should not have a legend-element.
+Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`.
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-fieldset-overview--page) for a live demo and documentation
 
+## Features
+
+- Easy retrieval of form data based on field names
+- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
+- Can have [validate](?path=/docs/forms-validation-overview--page) on fieldset level and shows the validation feedback below the fieldset
+- Can disable input fields on fieldset level
+- Accessible out of the box
+
 ## How to use
 
 ### Installation
@@ -15,8 +55,9 @@ npm i --save @lion/fieldset
 ```
 
 ```js
+import { LionFieldset } from '@lion/fieldset';
+// or
 import '@lion/fieldset/lion-fieldset.js';
-import '@lion/input/lion-input.js';
 ```
 
 ### Example
@@ -26,3 +67,5 @@ import '@lion/input/lion-input.js';
   <lion-input name="title" label="Title"></lion-input>
 </lion-fieldset>
 ```
+
+For more examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples--default-story).
diff --git a/packages/fieldset/stories/helpers/demo-fieldset-child.js b/packages/fieldset/docs/helpers/demo-fieldset-child.js
similarity index 100%
rename from packages/fieldset/stories/helpers/demo-fieldset-child.js
rename to packages/fieldset/docs/helpers/demo-fieldset-child.js
diff --git a/packages/fieldset/stories/overview.stories.mdx b/packages/fieldset/stories/overview.stories.mdx
deleted file mode 100644
index 4edaa7310..000000000
--- a/packages/fieldset/stories/overview.stories.mdx
+++ /dev/null
@@ -1,41 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import '@lion/input/lion-input.js';
-import { localize } from '@lion/localize';
-import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
-import '../lion-fieldset.js';
-import './helpers/demo-fieldset-child.js';
-
-<Meta title="Forms/Fieldset/Overview" parameters={{ component: 'lion-fieldset' }} />
-
-# Fieldset
-
-`lion-fieldset` groups multiple input fields or other fieldsets together.
-
-We have three specific fieldset implementations:
-
-- [lion-form](?path=/docs/forms-form-overview--page)
-- [lion-checkbox-group](?path=/docs/forms-checkbox-group--default-story)
-- [lion-radio-group](?path=/docs/forms-radio-group--default-story)
-
-```html
-<lion-fieldset name="nameGroup" label="Name">
-  <lion-input name="FirstName" label="First Name"></lion-input>
-  <lion-input name="LastName" label="Last Name"></lion-input>
-</lion-fieldset>
-```
-
-A native fieldset element should always have a legend-element for a11y purposes.
-However, our fieldset element is not native and should not have a legend-element.
-Our fieldset instead has a label attribute or you can add a label with a div- or heading-element using `slot="label"`.
-
-## Features
-
-- Easy retrieval of form data based on field names
-- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
-- Can have [validate](?path=/docs/forms-validation-overview--page) on fieldset level and shows the validation feedback below the fieldset
-- Can disable input fields on fieldset level
-- Accessible out of the box
-
-## Examples
-
-For examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples--default-story).
diff --git a/packages/form-system/README.md b/packages/form-system/README.md
index 1dfe8e4eb..1a5c34291 100644
--- a/packages/form-system/README.md
+++ b/packages/form-system/README.md
@@ -1,33 +1,39 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Form System
 
-The Form System allows you to create complex forms with various validation in an easy way.
+The Form System allows you to create complex forms with various validations in an easy way.
+
+```js script
+export default {
+  title: 'Forms/Intro',
+};
+```
 
 ## Features
 
-- Built in [validate](../validate) for error/warning/info/success
+- Built in [validate](?path=/docs/forms-validation-overview--page) for error/warning/info/success
 - Formatting of values
 - Accessible
 
+For a more in depth description look into the [Form System Overview](?path=/docs/forms-system-overview--page).
+
 ## Packages
 
-| Package                             | Description                        |
-| ----------------------------------- | ---------------------------------- |
-| [checkbox](../checkbox)             | Checkbox form element              |
-| [checkbox-group](../checkbox-group) | Group of checkboxes                |
-| [field](../field)                   | Base class for all inputs          |
-| [form](../form)                     | Wrapper for multiple form elements |
-| [input](../input)                   | Input element for strings          |
-| [input-amount](../input-amount)     | Input element for amounts          |
-| [input-date](../input-date)         | Input element for dates            |
-| [input-email](../input-email)       | Input element for e-mails          |
-| [input-iban](../input-iban)         | Input element for IBANs            |
-| [radio](../radio)                   | Radio form element                 |
-| [radio-group](../radio-group)       | Group of radios                    |
-| [select](../select)                 | Simple native dropdown element     |
-| [textarea](../textarea)             | Multiline text input               |
-| [validate](../validate)             | Validation for our form components |
-
-## Meta Package
-
-This is a meta package to show interaction between various form elements.
-For usage and installation please see the appropriate packages.
+| Package                                                             | Description                        |
+| ------------------------------------------------------------------- | ---------------------------------- |
+| [checkbox](?path=/docs/forms-checkbox--default-story)               | Checkbox form element              |
+| [checkbox-group](?path=/docs/forms-checkbox-group--default-story)   | Group of checkboxes                |
+| [field](?path=/docs/forms-field--default-story)                     | Base class for all inputs          |
+| [fieldset](?path=/docs/forms-fieldset-overview--page)               | Group for form inputs              |
+| [form](?path=/docs/forms-form-overview--page)                       | Wrapper for multiple form elements |
+| [input](?path=/docs/forms-input--default-story)                     | Input element for strings          |
+| [input-amount](?path=/docs/forms-input-amount--default-story)       | Input element for amounts          |
+| [input-date](?path=/docs/forms-input-date--default-story)           | Input element for dates            |
+| [input-email](?path=/docs/forms-input-email--default-story)         | Input element for e-mails          |
+| [input-iban](?path=/docs/forms-input-iban--default-story)           | Input element for IBANs            |
+| [radio](?path=/docs/forms-radio--default-story)                     | Radio form element                 |
+| [radio-group](?path=/docs/forms-radio-group--default-story)         | Group of radios                    |
+| [select](?path=/docs/forms-select--default-story)                   | Simple native dropdown element     |
+| [textarea](?path=/docs/forms-textarea--default-story)               | Multiline text input               |
+| [validate](?path=/docs/forms-system-validate-system--default-story) | Validation for our form components |
diff --git a/packages/form-system/docs/15-features-overview.md b/packages/form-system/docs/15-features-overview.md
new file mode 100644
index 000000000..5658c6420
--- /dev/null
+++ b/packages/form-system/docs/15-features-overview.md
@@ -0,0 +1,153 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
+# Features Overview
+
+This is a meta package to show interaction between various form elements.
+For usage and installation please see the appropriate packages.
+
+```js script
+import { html } from 'lit-html';
+import '@lion/checkbox-group/lion-checkbox-group.js';
+import '@lion/checkbox-group/lion-checkbox.js';
+import '@lion/fieldset/lion-fieldset.js';
+import '@lion/form/lion-form.js';
+import '@lion/input-amount/lion-input-amount.js';
+import '@lion/input-date/lion-input-date.js';
+import '@lion/input-datepicker/lion-input-datepicker.js';
+import '@lion/input-email/lion-input-email.js';
+import '@lion/input-iban/lion-input-iban.js';
+import '@lion/input-range/lion-input-range.js';
+import '@lion/input/lion-input.js';
+import '@lion/radio-group/lion-radio-group.js';
+import '@lion/radio-group/lion-radio.js';
+import '@lion/select/lion-select.js';
+import '@lion/select-rich/lion-option.js';
+import '@lion/select-rich/lion-options.js';
+import '@lion/select-rich/lion-select-rich.js';
+import '@lion/textarea/lion-textarea.js';
+import { MinLength, Required } from '@lion/validate';
+
+export default {
+  title: 'Forms/Features Overview',
+};
+```
+
+## Umbrella Form
+
+```js story
+export const main = () => {
+  Required.getMessage = () => 'Please enter a value';
+  return html`
+    <lion-form
+      @model-value-changed="${ev => {
+        console.log('lion-form::', ev.target.name, ':', ev.detail.formPath);
+      }}"
+    >
+      <form>
+        <lion-fieldset
+          name="full_name"
+          @model-value-changed="${ev => {
+            console.log('lion-fieldset::', ev.target.name, ':', ev.detail.formPath);
+          }}"
+        >
+          <lion-input
+            name="first_name"
+            label="First Name"
+            .validators="${[new Required()]}"
+          ></lion-input>
+          <lion-input
+            name="last_name"
+            label="Last Name"
+            .validators="${[new Required()]}"
+          ></lion-input>
+        </lion-fieldset>
+        <lion-input-date
+          name="date"
+          label="Date of application"
+          .modelValue="${new Date('2000-12-12')}"
+          .validators="${[new Required()]}"
+        ></lion-input-date>
+        <lion-input-datepicker
+          name="datepicker"
+          label="Date to be picked"
+          .modelValue="${new Date('2020-12-12')}"
+          .validators="${[new Required()]}"
+        ></lion-input-datepicker>
+        <lion-textarea
+          name="bio"
+          label="Biography"
+          .validators="${[new Required(), new MinLength(10)]}"
+          help-text="Please enter at least 10 characters"
+        ></lion-textarea>
+        <lion-input-amount name="money" label="Money"></lion-input-amount>
+        <lion-input-iban name="iban" label="Iban"></lion-input-iban>
+        <lion-input-email name="email" label="Email"></lion-input-email>
+        <lion-checkbox-group
+          @model-value-changed="${ev => {
+            console.log('lion-cb-group::', ev.target.name, ':', ev.detail.formPath);
+          }}"
+          label="What do you like?"
+          name="checkers"
+          .validators="${[new Required()]}"
+        >
+          <lion-checkbox .choiceValue=${'foo'} label="I like foo"></lion-checkbox>
+          <lion-checkbox .choiceValue=${'bar'} label="I like bar"></lion-checkbox>
+          <lion-checkbox .choiceValue=${'baz'} label="I like baz"></lion-checkbox>
+        </lion-checkbox-group>
+        <lion-radio-group
+          @model-value-changed="${ev => {
+            console.log('lion-radio-group::', ev.target.name, ':', ev.detail.formPath);
+          }}"
+          name="dinosaurs"
+          label="Favorite dinosaur"
+          .validators="${[new Required()]}"
+        >
+          <lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
+          <lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio>
+          <lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
+        </lion-radio-group>
+        <lion-select-rich name="favoriteColor" label="Favorite color">
+          <lion-options slot="input">
+            <lion-option .choiceValue=${'red'}>Red</lion-option>
+            <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
+            <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+          </lion-options>
+        </lion-select-rich>
+        <lion-select label="Lyrics" name="lyrics" .validators="${[new Required()]}">
+          <select slot="input">
+            <option value="1">Fire up that loud</option>
+            <option value="2">Another round of shots...</option>
+            <option value="3">Drop down for what?</option>
+          </select>
+        </lion-select>
+        <lion-input-range
+          name="range"
+          min="1"
+          max="5"
+          .modelValue="${2.3}"
+          unit="%"
+          step="0.1"
+          label="Input range"
+        ></lion-input-range>
+        <lion-checkbox-group
+          .mulipleChoice="${false}"
+          name="terms"
+          .validators="${[new Required()]}"
+        >
+          <lion-checkbox label="I blindly accept all terms and conditions"></lion-checkbox>
+        </lion-checkbox-group>
+        <lion-textarea name="comments" label="Comments"></lion-textarea>
+        <div class="buttons">
+          <lion-button raised>Submit</lion-button>
+          <lion-button
+            type="button"
+            raised
+            @click=${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}
+            >Reset</lion-button
+          >
+        </div>
+      </form>
+    </lion-form>
+  `;
+};
+```
diff --git a/packages/form-system/docs/17-validation-examples.md b/packages/form-system/docs/17-validation-examples.md
new file mode 100644
index 000000000..95bb2fc00
--- /dev/null
+++ b/packages/form-system/docs/17-validation-examples.md
@@ -0,0 +1,405 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
+# Validation examples
+
+## Required Validator
+
+The required validator can be put onto every form field element and will make sure that element is
+not empty.
+For an input that may mean that it is not an empty string,
+while for a checkbox group it means at least one checkbox needs to be checked.
+
+```js script
+import { html } from 'lit-html';
+/* eslint-disable import/no-extraneous-dependencies */
+import { LionInput } from '@lion/input';
+import '@lion/input-amount/lion-input-amount.js';
+import '@lion/input-date/lion-input-date.js';
+import '@lion/input-email/lion-input-email.js';
+import '@lion/input/lion-input.js';
+import {
+  DefaultSuccess,
+  EqualsLength,
+  IsDate,
+  IsEmail,
+  IsNumber,
+  loadDefaultFeedbackMessages,
+  MaxDate,
+  MaxLength,
+  MaxNumber,
+  MinDate,
+  MinLength,
+  MinMaxDate,
+  MinMaxLength,
+  MinMaxNumber,
+  MinNumber,
+  Required,
+  Validator,
+} from '@lion/validate';
+
+export default {
+  title: 'Forms/Validation/Examples',
+};
+
+loadDefaultFeedbackMessages();
+```
+
+```js preview-story
+export const requiredValidator = () => html`
+  <lion-input .validators=${[new Required()]} label="Required"></lion-input>
+`;
+```
+
+## String Validators
+
+Useful on input elements it allows to define how many characters can be entered.
+
+```js preview-story
+export const stringValidators = () => html`
+  <lion-input
+    .validators=${[new EqualsLength(7)]}
+    .modelValue=${'not exactly'}
+    label="EqualsLength"
+  ></lion-input>
+  <lion-input
+    .validators=${[new MinLength(10)]}
+    .modelValue=${'too short'}
+    label="MinLength"
+  ></lion-input>
+  <lion-input
+    .validators=${[new MaxLength(7)]}
+    .modelValue=${'too long'}
+    label="MaxLength"
+  ></lion-input>
+  <lion-input
+    .validators=${[new MinMaxLength({ min: 10, max: 20 })]}
+    .modelValue=${'that should be enough'}
+    label="MinMaxLength"
+  ></lion-input>
+`;
+```
+
+## Number Validators
+
+Number validations assume that it's modelValue is actually a number.
+Therefore it may only be used on input that have an appropriate parser/formatter like the input-amount.
+
+```js preview-story
+export const numberValidators = () => html`
+  <lion-input-amount
+    .validators="${[new IsNumber()]}"
+    .modelValue="${'foo'}"
+    label="IsNumber"
+  ></lion-input-amount>
+  <lion-input-amount
+    .validators="${[new MinNumber(7)]}"
+    .modelValue="${5}"
+    label="MinNumber"
+  ></lion-input-amount>
+  <lion-input-amount
+    .validators="${[new MaxNumber(7)]}"
+    .modelValue="${9}"
+    label="MaxNumber"
+  ></lion-input-amount>
+  <lion-input-amount
+    .validators="${[new MinMaxNumber({ min: 10, max: 20 })]}"
+    .modelValue="${5}"
+    label="MinMaxNumber"
+  ></lion-input-amount>
+`;
+```
+
+## Date Validators
+
+Date validators work with real javascript dates. Use them on input-date.
+
+```js preview-story
+export const dateValidators = () => {
+  const today = new Date();
+  const year = today.getFullYear();
+  const month = today.getMonth();
+  const day = today.getDate();
+  const yesterday = new Date(year, month, day - 1);
+  const tomorrow = new Date(year, month, day + 1);
+  return html`
+    <lion-input-date
+      .validators=${[new IsDate()]}
+      .modelValue=${'foo'}
+      label="IsDate"
+    ></lion-input-date>
+    <lion-input-date
+      .validators=${[new MinDate(today)]}
+      .modelValue=${new Date(yesterday)}
+      label="MinDate"
+    ></lion-input-date>
+    <lion-input-date
+      .validators=${[new MaxDate(today)]}
+      .modelValue=${new Date(tomorrow)}
+      label="MaxDate"
+    ></lion-input-date>
+    <lion-input-date
+      .validators=${[new MinMaxDate({ min: new Date(yesterday), max: new Date(tomorrow) })]}
+      .modelValue=${new Date(today)}
+      label="MinMaxDate"
+    ></lion-input-date>
+  `;
+};
+```
+
+## Email Validator
+
+```js preview-story
+export const emailValidator = () => html`
+  <lion-input-email
+    .validators="${[new IsEmail()]}"
+    .modelValue="${'foo'}"
+    label="IsEmail"
+  ></lion-input-email>
+`;
+```
+
+## Validation Types
+
+When defining your own component you can decide to allow for multiple types of validation.
+By default only `error` is used, however there are certainly use cases where warning or success messages make sense.
+
+```js preview-story
+export const validationTypes = () => {
+  try {
+    class MyTypesInput extends LionInput {
+      static get validationTypes() {
+        return ['error', 'warning', 'info', 'success'];
+      }
+    }
+    customElements.define('my-types-input', MyTypesInput);
+  } catch (err) {
+    // expected as it is a demo
+  }
+  return html`
+    <style>
+      .demo-types-input {
+        padding: 0.5rem;
+      }
+      .demo-types-input[shows-feedback-for~='success'] {
+        background-color: #e4ffe4;
+        border: 1px solid green;
+      }
+      .demo-types-input[shows-feedback-for~='error'] {
+        background-color: #ffd4d4;
+        border: 1px solid red;
+      }
+      .demo-types-input[shows-feedback-for~='warning'] {
+        background-color: #ffe4d4;
+        border: 1px solid orange;
+      }
+      .demo-types-input[shows-feedback-for~='info'] {
+        background-color: #d4e4ff;
+        border: 1px solid blue;
+      }
+    </style>
+    <my-types-input
+      .validators="${[
+        new Required(),
+        new MinLength(7, { type: 'warning' }),
+        new MaxLength(10, {
+          type: 'info',
+          getMessage: () => `Please, keep the length below the 10 characters.`,
+        }),
+        new DefaultSuccess(),
+      ]}"
+      .modelValue="${'exactly'}"
+      label="Validation Types"
+      class="demo-types-input"
+    ></my-types-input>
+  `;
+};
+```
+
+## Custom Validators
+
+Here is an example how you can make your own validator and providing the error messages directly within.
+You can even hard code localization in there if needed or you can use a localization system.
+
+```js preview-story
+export const customValidators = () => {
+  class MyValidator extends Validator {
+    static get validatorName() {
+      return 'myValidator';
+    }
+    execute(modelValue, param) {
+      return modelValue !== param;
+    }
+    static getMessage({ fieldName, modelValue, params: param }) {
+      if (modelValue.length >= param.length - 1 && param.startsWith(modelValue)) {
+        return 'Almost there...';
+      }
+      return `No "${param}" found in ${fieldName}`;
+    }
+  }
+  return html`
+    <lion-input
+      label="Custom validator"
+      help-text="Type 'mine' please"
+      .validators="${[new MyValidator('mine')]}"
+      .modelValue="${'mi'}"
+    ></lion-input>
+  `;
+};
+```
+
+## Default messages
+
+To get default validation messages you need to import and call the `loadDefaultFeedbackMessages` function once in your application.
+
+Sometimes the default messages don't make sense for your input field. In that case you want to override it by adding a `getMessage` function to your validator.
+
+```js preview-story
+export const defaultMessages = () => html`
+  <lion-input
+    .validators="${[new EqualsLength(4, { getMessage: () => '4 chars please...' })]}"
+    .modelValue="${'123'}"
+    label="Custom message for validator instance"
+  ></lion-input>
+  <lion-input
+    .validators="${[
+      new EqualsLength(4, {
+        getMessage: ({ modelValue, params: param }) => {
+          const diff = modelValue.length - param;
+          return `${Math.abs(diff)} too ${diff > 0 ? 'much' : 'few'}...`;
+        },
+      }),
+    ]}"
+    .modelValue="${'way too much'}"
+    label="Dynamic message for validator instance"
+  ></lion-input>
+`;
+```
+
+## Override fieldName
+
+In the scenario that the default messages are correct, but you only want to change the `fieldName`, this can both be done for a single specific validator or for all at once.
+
+```js preview-story
+export const overrideFieldName = () => html`
+  <lion-input
+    .validators="${[new EqualsLength(4, { fieldName: 'custom fieldName' })]}"
+    .modelValue="${'123'}"
+    label="Custom fieldName for 1 validator"
+  ></lion-input>
+  <lion-input
+    .validators="${[new Required(), new EqualsLength(4)]}"
+    .fieldName="${'custom fieldName'}"
+    .modelValue="${'123'}"
+    label="Custom fieldName for all validators"
+  ></lion-input>
+`;
+```
+
+## Asynchronous validation
+
+```js preview-story
+export const asynchronousValidation = () => {
+  function pause(ms = 0) {
+    return new Promise(resolve => {
+      setTimeout(() => {
+        resolve();
+      }, ms);
+    });
+  }
+  class AsyncValidator extends Validator {
+    constructor(...args) {
+      super(...args);
+    }
+    static get validatorName() {
+      return 'asyncValidator';
+    }
+    static get async() {
+      return true;
+    }
+    async execute() {
+      console.log('async pending...');
+      await pause(2000);
+      console.log('async done...');
+      return true;
+    }
+    static getMessage({ modelValue }) {
+      return `validated for modelValue: ${modelValue}...`;
+    }
+  }
+  return html`
+    <style>
+      lion-input[is-pending] {
+        opacity: 0.5;
+      }
+    </style>
+    <lion-input
+      label="Async validation"
+      .validators="${[new AsyncValidator()]}"
+      .modelValue="${'123'}"
+    ></lion-input>
+  `;
+};
+```
+
+## Dynamic parameter change
+
+```js preview-story
+export const dynamicParameterChange = () => {
+  const beginDate = new Date('09/09/1990');
+  const minDateValidatorRef = new MinDate(beginDate, {
+    message: 'Fill in a date after your birth date',
+  });
+  return html`
+    <lion-input-date
+      label="Birth date"
+      help-text="Adjust this date to retrigger validation of the input below..."
+      .modelValue="${beginDate}"
+      @model-value-changed="${({ target: { modelValue, errorState } }) => {
+        if (!errorState) {
+          // Since graduation date is usually not before birth date
+          minDateValidatorRef.param = modelValue;
+        }
+      }}"
+    ></lion-input-date>
+    <lion-input-date
+      label="Graduation date"
+      .modelValue="${new Date('09/09/1989')}"
+      .validators="${[minDateValidatorRef]}"
+    ></lion-input-date>
+  `;
+};
+```
+
+## Disabled inputs validation
+
+According to the W3C specs, Disabled fields should not be validated.
+Therefor if the attribute disabled is present on a lion-input it will not be validated.
+
+```js preview-story
+export const disabledInputsValidation = () => html`
+  <lion-input
+    disabled
+    .validators=${[new EqualsLength(7)]}
+    .modelValue=${'not exactly'}
+    label="EqualsLength"
+  ></lion-input>
+  <lion-input
+    disabled
+    .validators=${[new MinLength(10)]}
+    .modelValue=${'too short'}
+    label="MinLength"
+  ></lion-input>
+  <lion-input
+    disabled
+    .validators=${[new MaxLength(7)]}
+    .modelValue=${'too long'}
+    label="MaxLength"
+  ></lion-input>
+  <lion-input
+    disabled
+    .validators=${[new MinMaxLength({ min: 10, max: 20 })]}
+    .modelValue=${'that should be enough'}
+    label="MinMaxLength"
+  ></lion-input>
+`;
+```
diff --git a/packages/form-system/stories/20-System-Overview.stories.mdx b/packages/form-system/docs/20-system-overview.md
similarity index 92%
rename from packages/form-system/stories/20-System-Overview.stories.mdx
rename to packages/form-system/docs/20-system-overview.md
index b318b8a66..112d51f08 100644
--- a/packages/form-system/stories/20-System-Overview.stories.mdx
+++ b/packages/form-system/docs/20-system-overview.md
@@ -1,9 +1,13 @@
-import { Meta } from '@open-wc/demoing-storybook';
-
-<Meta title="Forms/System/Overview" />
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
 
 # Form System Overview
 
+```js script
+export default {
+  title: 'Forms/System/Overview',
+};
+```
+
 This page should be used as a starting point when first using the Form System.
 It provides an overview of its essential building blocks and provides links to detailed explanations
 of most of its core concepts.
@@ -33,8 +37,8 @@ On top of this, they offer:
 - advanced [validation](?path=/docs/forms-validation-overview--page) possibilities
 - creation of advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
 - provision of labels and help texts in an easy, declarative manner
-- accessibility out of the box <!-- TODO: write how our form system manages to deliver accessible components with all challenges that shadow dom provide -->
-- advanced styling possibilities: map your own Design System to the internal HTML structure <!-- TODO: link to example of Material Design Datepicker-->
+- accessibility out of the box
+- advanced styling possibilities: map your own Design System to the internal HTML structure
 
 #### Platform fields (wrappers)
 
diff --git a/packages/form-system/stories/25-System-ModelValue.stories.mdx b/packages/form-system/docs/25-system-model-value.md
similarity index 89%
rename from packages/form-system/stories/25-System-ModelValue.stories.mdx
rename to packages/form-system/docs/25-system-model-value.md
index 9a1d056ab..cdb6dd056 100644
--- a/packages/form-system/stories/25-System-ModelValue.stories.mdx
+++ b/packages/form-system/docs/25-system-model-value.md
@@ -1,9 +1,13 @@
-import { Meta } from '@open-wc/demoing-storybook';
-
-<Meta title="Forms/System/ModelValue" />
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
 
 # ModelValue
 
+```js script
+export default {
+  title: 'Forms/System/ModelValue',
+};
+```
+
 The modelValue or model can be considered as the ‘aorta’ of our form system.
 It is the single source of truth; not only for the current state
 of the form, also for all derived states: interaction, validation, visibility and other states are
diff --git a/packages/form-system/stories/30-System-Formatting.stories.mdx b/packages/form-system/docs/30-system-formatting.md
similarity index 53%
rename from packages/form-system/stories/30-System-Formatting.stories.mdx
rename to packages/form-system/docs/30-system-formatting.md
index 338037758..f01978d0a 100644
--- a/packages/form-system/stories/30-System-Formatting.stories.mdx
+++ b/packages/form-system/docs/30-system-formatting.md
@@ -1,13 +1,18 @@
-
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import '@lion/input/lion-input.js';
-import { Unparseable } from '@lion/validate';
-import './helper-wc/h-output.js';
-
-<Meta title="Forms/System/Formatting and Parsing" />
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
 
 # Formatting and Parsing
 
+```js script
+import { html } from 'lit-html';
+import '@lion/input/lion-input.js';
+import { Unparseable } from '@lion/validate';
+import '../docs/helper-wc/h-output.js';
+
+export default {
+  title: 'Forms/System/Formatting and Parsing',
+};
+```
+
 > For demo purposes, below we use `<lion-input>` which is a basic extension of `<lion-field>`.
 > Almost all fields share the same functionality as `<lion-input>`.
 
@@ -46,30 +51,20 @@ Examples:
 - For a `date input`: a String '20/01/1999' will be converted to new Date('1999/01/20')
 - For an `amount input`: a formatted String '1.234,56' will be converted to a Number: 1234.56
 
-
 You can set a parser function on the `<lion-input>` to set parsing behavior.
 In this example, we parse the input and try to convert it to a `Number`.
 
-<Story name="Parser">
-  {html`
-    <lion-input
-      label="Number Example"
-      help-text="Uses .parser to create model values from view values"
-      .parser="${viewValue => Number(viewValue)}"
-      .modelValue="${1234567890}"
-      @model-value-changed=${({ target }) => console.log(target) }
-    ></lion-input>
-    <h-output .show="${['modelValue']}"></h-output>
-  `}
-</Story>
-
-```html
-<lion-input
-  label="Number Example"
-  help-text="Uses .parser to create model values from view values"
-  .parser="${viewValue => Number(viewValue)}"
-  .modelValue="${1234567890}"
-></lion-input>
+```js preview-story
+export const parser = () => html`
+  <lion-input
+    label="Number Example"
+    help-text="Uses .parser to create model values from view values"
+    .parser="${viewValue => Number(viewValue)}"
+    .modelValue="${1234567890}"
+    @model-value-changed=${({ target }) => console.log(target)}
+  ></lion-input>
+  <h-output .show="${['modelValue']}"></h-output>
+`;
 ```
 
 #### Unparseable
@@ -83,25 +78,16 @@ what the user tried to input.
 The formatted result of this that is reflected to the user will be the `viewValue` of the
 `Unparseable` instance, so basically nothing happens for the user.
 
-<Story name="Unparseable">
-  {html`
-    <lion-input
-      label="Number Example"
-      help-text="Uses .parser and return undefined if Number() cannot parse"
-      .parser="${viewValue => Number(viewValue) || undefined}"
-      value="${'1234abc567890'}"
-    ></lion-input>
-    <h-output .show="${['modelValue']}"></h-output>
-  `}
-</Story>
-
-```html
-<lion-input
-  label="Number Example"
-  help-text="Uses .parser and return undefined if Number() cannot parse"
-  .parser="${viewValue => Number(viewValue) || undefined}"
-  value="${'1234abc567890'}"
-></lion-input>
+```js preview-story
+export const unparseable = () => html`
+  <lion-input
+    label="Number Example"
+    help-text="Uses .parser and return undefined if Number() cannot parse"
+    .parser="${viewValue => Number(viewValue) || undefined}"
+    value="${'1234abc567890'}"
+  ></lion-input>
+  <h-output .show="${['modelValue']}"></h-output>
+`;
 ```
 
 ### Formatters
@@ -115,49 +101,30 @@ The formatter then uses `Intl.NumberFormat` to format it with thousand separator
 Formatted value is reflected back to the user `on-blur` of the field, but only if the field has no
 errors (validation).
 
-<Story name="Formatter">
-  {() => {
-    const formatDate = (modelValue, options) => {
-      if (!(typeof modelValue === 'number')) {
-        return options.formattedValue;
-      }
-      return new Intl.NumberFormat('en-GB').format(modelValue);
-    };
-    return html`
-      <lion-input
-        label="Number Example"
-        help-text="Uses .formatter to create view value"
-        .parser="${viewValue => Number(viewValue.replace(/[^0-9]/g, ''))}"
-        .formatter="${formatDate}"
-        .modelValue="${1234567890}"
-      >
-      </lion-input>
-      <h-output .show="${['modelValue', 'formattedValue']}"></h-output>
-    `;
-  }}
-</Story>
-
-> The options object holds a fallback value that shows what should be presented on
-> screen when the user input resulted in an invalid `modelValue`.
-
-```js
-const formatDate = (modelValue, options) => {
-  if (!(typeof modelValue === 'number')) {
-    return options.formattedValue;
-  }
-  return new Intl.NumberFormat('en-GB').format(modelValue);
+```js preview-story
+export const formatters = () => {
+  const formatDate = (modelValue, options) => {
+    if (!(typeof modelValue === 'number')) {
+      return options.formattedValue;
+    }
+    return new Intl.NumberFormat('en-GB').format(modelValue);
+  };
+  return html`
+    <lion-input
+      label="Number Example"
+      help-text="Uses .formatter to create view value"
+      .parser="${viewValue => Number(viewValue.replace(/[^0-9]/g, ''))}"
+      .formatter="${formatDate}"
+      .modelValue="${1234567890}"
+    >
+    </lion-input>
+    <h-output .show="${['modelValue', 'formattedValue']}"></h-output>
+  `;
 };
 ```
 
-```html
-<lion-input
-  label="Number Example"
-  help-text="Uses .formatter to create view value"
-  .parser="${viewValue => Number(viewValue.replace(/[^0-9]/g, ''))}"
-  .formatter="${formatDate}"
-  .modelValue="${1234567890}"
-></lion-input>
-```
+> The options object holds a fallback value that shows what should be presented on
+> screen when the user input resulted in an invalid `modelValue`.
 
 ### Serializers and deserializers
 
@@ -170,47 +137,26 @@ This can be useful for prefilling forms with data from APIs.
 > There is no `.deserializedValue` property that stays in sync by default.
 > You need to call `el.deserializer(el.modelValue)` manually yourself.
 
-<Story name="(De)serializers">
-  {() => {
-    const mySerializer = (modelValue, options) => {
-      return parseInt(modelValue, 8);
-    };
-    const myDeserializer = (myValue, options) => {
-      return new Number(myValue);
-    };
-    return html`
-      <lion-input
-        label="Date Example"
-        help-text="Uses .(de)serializer to restore serialized modelValues"
-        .parser="${viewValue => Number(viewValue.replace(/[^0-9]/g, ''))}"
-        .serializer="${mySerializer}"
-        .deserializer="${myDeserializer}"
-        .modelValue="${1234567890}"
-      ></lion-input>
-      <h-output .show="${['modelValue', 'serializedValue']}"></h-output>
-    `;
-  }}
-</Story>
-
-```js
-const mySerializer = (modelValue, options) => {
-  return parseInt(modelValue, 8);
+```js preview-story
+export const deSerializers = () => {
+  const mySerializer = (modelValue, options) => {
+    return parseInt(modelValue, 8);
+  };
+  const myDeserializer = (myValue, options) => {
+    return new Number(myValue);
+  };
+  return html`
+    <lion-input
+      label="Date Example"
+      help-text="Uses .(de)serializer to restore serialized modelValues"
+      .parser="${viewValue => Number(viewValue.replace(/[^0-9]/g, ''))}"
+      .serializer="${mySerializer}"
+      .deserializer="${myDeserializer}"
+      .modelValue="${1234567890}"
+    ></lion-input>
+    <h-output .show="${['modelValue', 'serializedValue']}"></h-output>
+  `;
 };
-
-const myDeserializer = (myValue, options) => {
-  return parseInt(modelValue, 10);
-};
-```
-
-```html
-<lion-input
-  label="Date Example"
-  help-text="Uses .(de)serializer to restore serialized modelValues"
-  .parser="${viewValue => Number(viewValue.replace(/[^0-9]/g, ''))}"
-  .serializer="${mySerializer}"
-  .deserializer="${myDeserializer}"
-  .modelValue="${1234567890}"
-></lion-input>
 ```
 
 ## Flow Diagrams
@@ -218,16 +164,31 @@ const myDeserializer = (myValue, options) => {
 Below we show three flow diagrams to show the flow of formatting, serializing and parsing user input, with the example of a date input:
 
 ### Standard flow
+
 Where a user changes the input with their keyboard
 
-<Story id="forms-system-internals--standard-flow"></Story>
+```js preview-story
+export const standardFlow = () => html`
+  <img src=${new URL('../dev-assets/FormatMixinDiagram-1.svg', import.meta.url)} />
+`;
+```
 
 ### Unparseable flow
+
 Where a user sets the input to something that is not parseable by the parser
 
-<Story id="forms-system-internals--unparseable-flow"></Story>
+```js preview-story
+export const unparseableFlow = () => html`
+  <img src=${new URL('../dev-assets/FormatMixinDiagram-2.svg', import.meta.url)} />
+`;
+```
 
 ### Imperative / programmatic flow
+
 Where the developer sets the modelValue of the input programmatically
 
-<Story id="forms-system-internals--imperative-flow"></Story>
+```js preview-story
+export const imperativeFlow = () => html`
+  <img src=${new URL('../dev-assets/FormatMixinDiagram-3.svg', import.meta.url)} />
+`;
+```
diff --git a/packages/form-system/docs/35-system-interaction-states.md b/packages/form-system/docs/35-system-interaction-states.md
new file mode 100644
index 000000000..2909523fd
--- /dev/null
+++ b/packages/form-system/docs/35-system-interaction-states.md
@@ -0,0 +1,178 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
+# Interaction States
+
+```js script
+import { html } from 'lit-html';
+import { render } from '@lion/core';
+import { renderLitAsNode } from '@lion/helpers';
+import '@lion/input/lion-input.js';
+import { Validator } from '@lion/validate';
+import '../docs/helper-wc/h-output.js';
+
+export default {
+  title: 'Forms/System/Interaction States',
+};
+```
+
+`InteractionStateMixin` saves meta information about interaction states.
+It allows for creating advanced UX scenarios.
+
+Examples of such scenarios already in our fields:
+
+- Show the validation message of an input only after the user has blurred the input field
+- Hide the validation message when an invalid value becomes valid
+
+Something our subclassers can implement:
+
+- Show a red border around the input right after the input became invalid
+
+The meta information that InteractionStateMixin collects, is stored in the Boolean properties on our fields:
+
+- `touched`, the user blurred the field
+- `dirty`, the value in the field has changed
+- `prefilled`, a prepopulated field is not empty
+
+> You can listen to the events `touched-changed` and `dirty-changed`.
+
+```js preview-story
+export const interactionStates = () => html`
+  <lion-input
+    label="Interaction States"
+    help-text="Interact with this field to see how dirty, touched and prefilled change"
+    .modelValue="${'myValue'}"
+  ></lion-input>
+  <h-output .show="${['touched', 'dirty', 'prefilled', 'focused', 'submitted']}"></h-output>
+`;
+```
+
+## Advanced use cases
+
+### Overriding interaction states
+
+When creating an extension of LionField or LionInput, it can be needed to override the way prefilled values are 'computed'.
+
+The example below shows how this is done for checkboxes/radio-inputs.
+
+```js
+/**
+ * @override
+ */
+static _isPrefilled(modelValue) {
+  return modelValue.checked;
+}
+```
+
+## When is feedback shown to the user
+
+We show the validity feedback when one of the following conditions is met:
+
+- **prefilled**,
+  the user already filled in something, or the value is prefilled
+  when the form is initially rendered.
+
+- **touched** && **dirty**
+
+  - When a user starts typing for the first time in a field with for instance `required` validation,
+    error message should not be shown until a field becomes `touched` (a user leaves(blurs) a field).
+  - When a user enters a field without altering the value (making it `dirty` but not `touched`),
+    an error message shouldn't be shown either.
+
+- **submitted**,
+  if the form is submitted, always show the error message.
+
+### Changing the feedback show condition (Subclassers)
+
+You can change the condition upon which feedback gets shown.
+
+In order to override the feedback show conditions, you need to create a custom field and override `_showFeedbackConditionFor` method.
+This method accepts the a `type` parameter which is a String representing the type of feedback (e.g. 'error').
+Then, it returns true of false, depending on whether feedback for that type should be shown or not. That part, you can control.
+
+In the following example we will demonstrate this with interaction states, the most common use case for feedback visibility conditions.
+
+```js preview-story
+export const feedbackCondition = () => {
+  // 1. Initialize variables...
+  // properties on InteractionStateMixin we want to check conditions for
+  const props = ['touched', 'dirty', 'prefilled', 'focused', 'filled', 'submitted'];
+  // Here we will store the conditions (trigger for validation feedback)
+  // provided via the UI of the demo
+  let conditions = [];
+  // 2. Create a validator...
+  // Define a demo validator that should only be visible on an odd amount of characters
+  // const OddValidator = [modelValue => ({ odd: modelValue.length % 2 !== 0 })];
+  class OddValidator extends Validator {
+    static get validatorName() {
+      return 'OddValidator';
+    }
+    // eslint-disable-next-line class-methods-use-this
+    execute(value) {
+      let hasError = false;
+      if (!(value.length % 2 !== 0)) {
+        hasError = true;
+      }
+      return hasError;
+    }
+    _getMessage() {
+      return 'Add or remove one character';
+    }
+  }
+  // 3. Create field overriding .showErrorCondition...
+  // Here we will store a reference to the Field element that overrides the default condition
+  // (function `showErrorCondition`) for triggering validation feedback of `.validators`
+  const fieldElement = renderLitAsNode(html`
+    <lion-input
+      name="interactionField"
+      label="Only an odd amount of characters allowed"
+      help-text="Change feedback condition"
+      .modelValue="${'notodd'}"
+      .validators="${[new OddValidator()]}"
+    >
+      <input slot="input" />
+    </lion-input>
+  `);
+  fieldElement._showFeedbackConditionFor = type => {
+    return conditions.every(condition => {
+      /**
+       * This here shows bug for focused state.
+       * Focused is set to true AFTER we already evaluate feedback conditions
+       * Bug report: https://github.com/ing-bank/lion/issues/455
+       */
+      // setTimeout(() => console.log(fieldElement[condition])); //
+      return fieldElement[condition];
+    });
+  };
+  function fetchConditionsAndReevaluate({ currentTarget: { modelValue } }) {
+    if (!modelValue['props[]']) {
+      return;
+    }
+    // Create props list like: ['touched', 'submitted']
+    conditions = modelValue['props[]'].filter(p => p.checked).map(p => p.value);
+    // Reevaluate
+    fieldElement.validate();
+  }
+  fieldElement.addEventListener('focus', () => {
+    fieldElement.validate();
+  });
+  return html`
+    <lion-form>
+      <form>
+        ${fieldElement}
+        <button>Submit</button>
+      </form>
+    </lion-form>
+    <h-output .field="${fieldElement}" .show="${[...props, 'hasFeedbackFor']}"> </h-output>
+    <h3>
+      Set conditions for validation feedback visibility
+    </h3>
+    <lion-checkbox-group name="props[]" @model-value-changed="${fetchConditionsAndReevaluate}">
+      ${props.map(
+        p => html`
+          <lion-checkbox .label="${p}" .choiceValue="${p}"> </lion-checkbox>
+        `,
+      )}
+    </lion-checkbox-group>
+  `;
+};
+```
diff --git a/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx b/packages/form-system/docs/40-system-creating-a-custom-field.md
similarity index 88%
rename from packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
rename to packages/form-system/docs/40-system-creating-a-custom-field.md
index f0870739c..f115ff036 100644
--- a/packages/form-system/stories/40-System-creating-a-custom-field.stories.mdx
+++ b/packages/form-system/docs/40-system-creating-a-custom-field.md
@@ -1,12 +1,18 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
+# Creating a custom field
+
+```js script
+import { html } from 'lit-html';
 import { render } from '@lion/core';
 import '@lion/input/lion-input.js';
 import { Validator } from '@lion/validate';
-import './helper-wc/h-output.js';
+import '../docs/helper-wc/h-output.js';
 
-<Meta title="Forms/System/Creating a Custom Field" />
-
-# Creating a custom field
+export default {
+  title: 'Forms/System/Creating a Custom Field',
+};
+```
 
 Custom fields can be created in just a few steps. All you need is an interaction element
 (like for instance a slider, a listbox or a combobox) and connect it to the [Field](?path=/docs/forms-system-overview--page)
@@ -29,17 +35,17 @@ validation support and get all the other [benefits of LionField](/?path=/docs/fo
 We start by creating a component `<lion-slider>` that extends from `LionField`.
 Then we follow the steps below:
 
-#### 1. Add your interaction element as ‘input slot'
+### 1. Add your interaction element as ‘input slot'
 
 Here you return the element the user interacts with. By configuring it as a slot, it will end up
 in light DOM, ensuring the best accessibility for the end user.
 
-#### 2. Proxy event `my-slider-changed` to `user-input-changed` event
+### 2. Proxy event `my-slider-changed` to `user-input-changed` event
 
 The `user-input-changed` event is listened to by the FormatMixin: it should be regarded as the
 equivalent of the `input` event of the platform, but for custom built interaction elements.
 
-#### 3. Proxy property `<my-slider>.mySliderValue` to `<lion-slider>.value`
+### 3. Proxy property `<my-slider>.mySliderValue` to `<lion-slider>.value`
 
 Every time the `user-input-changed` fires, the value of `<my-slider>` is synchronized with the
 [`modelValue`](?path=/docs/forms-system-modelvalue--page) of `<my-slider>`. Now the cycle is complete: the modelValue connects
diff --git a/packages/form-system/docs/50-content-inside-fields.md b/packages/form-system/docs/50-content-inside-fields.md
new file mode 100644
index 000000000..efa6782d6
--- /dev/null
+++ b/packages/form-system/docs/50-content-inside-fields.md
@@ -0,0 +1,23 @@
+```js script
+import { html } from 'lit-html';
+import '@lion/input/lion-input.js';
+import '@lion/button/lion-button.js';
+
+export default {
+  title: 'Forms/System/Field integrations',
+};
+```
+
+# Content inside fields
+
+Due to our custom inputs being Web Components, it is possible to put HTML content inside an input.
+For example if you want to add a button as a prefix or suffix.
+
+```js preview-story
+export const ButtonsWithFields = () => html`
+  <lion-input label="Prefix and suffix">
+    <lion-button slot="prefix" type="button">prefix</lion-button>
+    <lion-button slot="suffix" type="button">suffix</lion-button>
+  </lion-input>
+`;
+```
diff --git a/packages/form-system/docs/fieldset-examples.md b/packages/form-system/docs/fieldset-examples.md
new file mode 100644
index 000000000..5ca566008
--- /dev/null
+++ b/packages/form-system/docs/fieldset-examples.md
@@ -0,0 +1,192 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
+# Fieldset Examples
+
+```js script
+import { html } from 'lit-html';
+import '@lion/input/lion-input.js';
+import { localize } from '@lion/localize';
+import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
+import '@lion/fieldset/lion-fieldset.js';
+
+export default {
+  title: 'Forms/Fieldset/Examples',
+};
+```
+
+## With Data
+
+The fieldset's modelValue is an `Object` containing properties where the key is the `name` attribute of the field,
+and the value is the `modelValue` of the field.
+
+```js preview-story
+export const data = () => html`
+  <lion-fieldset name="nameGroup" label="Name">
+    <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+    <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+    <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
+      Log to Action Logger
+    </button>
+  </lion-fieldset>
+`;
+```
+
+## Disabled
+
+Disabling a fieldset disables all its child fields.
+When enabling a fieldset, fields that have disabled explicitly set will stay disabled.
+
+```js preview-story
+export const disabled = () => {
+  function toggleDisabled() {
+    const fieldset = document.querySelector('#fieldset');
+    fieldset.disabled = !fieldset.disabled;
+  }
+  return html`
+    <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
+      <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+      <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+      <lion-fieldset name="nameGroup2" label="Name">
+        <lion-input name="FirstName2" label="First Name" .modelValue=${'Foo'} disabled></lion-input>
+        <lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
+      </lion-fieldset>
+    </lion-fieldset>
+    <button @click=${toggleDisabled}>
+      Toggle disabled
+    </button>
+  `;
+};
+```
+
+## Nesting fieldsets
+
+Fieldsets can also be nested. The level of nesting will correspond one to one with the `modelValue` object.
+
+```js preview-story
+export const nestingFieldsets = () => html`
+  <lion-fieldset>
+    <div slot="label">Personal data</div>
+    <lion-fieldset name="nameGroup" label="Name">
+      <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+      <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+    </lion-fieldset>
+    <lion-fieldset name="location" label="Location">
+      <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
+    </lion-fieldset>
+    <lion-input name="age" label="Age" .modelValue=${21}></lion-input>
+    <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
+      Log everything to Action Logger
+    </button>
+    <br />
+    <button @click=${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}>
+      Log only Name fieldset to Action Logger
+    </button>
+  </lion-fieldset>
+`;
+```
+
+## Validation
+
+You can create validators that work on a fieldset level.
+Below, we mimic a `required` validator, but on the fieldset.
+Try it by typing something in the input, then removing it.
+
+```js preview-story
+export const validation = () => {
+  const DemoValidator = class extends Validator {
+    static get validatorName() {
+      return 'DemoValidator';
+    }
+    execute(value) {
+      if (value && value.input1) {
+        return false; // el.hasError = true
+      }
+      return true;
+    }
+    static async getMessage() {
+      return '[Fieldset Error] Demo error message';
+    }
+  };
+  return html`
+    <lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
+      <lion-input name="input1" label="Label"></lion-input>
+    </lion-fieldset>
+  `;
+};
+```
+
+### Validating multiple inputs in a fieldset
+
+You can have your fieldset validator take into consideration multiple fields.
+
+```js preview-story
+export const validatingMultipleFields = () => {
+  const IsCatsAndDogs = class extends Validator {
+    static get validatorName() {
+      return 'IsCatsAndDogs';
+    }
+    execute(value) {
+      return !(value.input1 === 'cats' && value.input2 === 'dogs');
+    }
+    static async getMessage() {
+      return '[Fieldset Error] Input 1 needs to be "cats" and Input 2 needs to be "dogs"';
+    }
+  };
+  return html`
+    <lion-fieldset .validators="${[new IsCatsAndDogs()]}">
+      <lion-input label="An all time YouTube favorite" name="input1" help-text="cats"> </lion-input>
+      <lion-input label="Another all time YouTube favorite" name="input2" help-text="dogs">
+      </lion-input>
+    </lion-fieldset>
+  `;
+};
+```
+
+Alternatively you can also let the fieldset validator be dependent on the error states of its child fields.
+
+Simply loop over the formElements inside your Validator's `execute` method:
+
+```js
+this.formElements.some(el => el.hasFeedbackFor.includes('error'));
+```
+
+### Validating multiple fieldsets
+
+You can have your fieldset validator take into accounts multiple nested fieldsets.
+
+```js preview-story
+export const validatingMultipleFieldsets = () => {
+  const IsCatsDogs = class extends Validator {
+    static get validatorName() {
+      return 'IsCatsAndDogs';
+    }
+    execute(value) {
+      if (
+        value.inner1 &&
+        value.inner1.input1 === 'cats' &&
+        value.inner2 &&
+        value.inner2.input1 === 'dogs'
+      ) {
+        return false;
+      }
+      return true;
+    }
+    static async getMessage() {
+      return 'There is a problem with one of your fieldsets';
+    }
+  };
+  return html`
+    <lion-fieldset name="outer" .validators=${[new IsCatsDogs()]}>
+      <lion-fieldset name="inner1">
+        <label slot="label">Fieldset no. 1</label>
+        <lion-input label="Write 'cats' here" name="input1"> </lion-input>
+      </lion-fieldset>
+      <hr />
+      <lion-fieldset name="inner2">
+        <label slot="label">Fieldset no. 2</label>
+        <lion-input label="Write 'dogs' here" name="input1"> </lion-input>
+      </lion-fieldset>
+    </lion-fieldset>
+  `;
+};
+```
diff --git a/packages/form-system/stories/helper-wc/h-output.js b/packages/form-system/docs/helper-wc/h-output.js
similarity index 97%
rename from packages/form-system/stories/helper-wc/h-output.js
rename to packages/form-system/docs/helper-wc/h-output.js
index 9f1428f7a..12935c9fb 100644
--- a/packages/form-system/stories/helper-wc/h-output.js
+++ b/packages/form-system/docs/helper-wc/h-output.js
@@ -66,6 +66,7 @@ export class HelperOutput extends LitElement {
     });
   }
 
+  // eslint-disable-next-line class-methods-use-this
   __renderProp(p) {
     if (typeof p === 'boolean') {
       return p === true ? '✓' : '';
diff --git a/packages/form-system/stories/10-intro.stories.mdx b/packages/form-system/stories/10-intro.stories.mdx
deleted file mode 100644
index c67614875..000000000
--- a/packages/form-system/stories/10-intro.stories.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-<Meta title="Forms/Intro" />
-
-# Form System
-
-The Form System allows you to create complex forms with various validations in an easy way.
-
-## Features
-
-- Built in [validate](?path=/docs/forms-validation-overview--page) for error/warning/info/success
-- Formatting of values
-- Accessible
-
-For a more in depth description look into the [Form System Overview](?path=/docs/forms-system-overview--page).
-
-## Packages
-
-| Package                                              | Description                                       |
-| ---------------------------------------------------- | ------------------------------------------------- |
-| [checkbox](?path=/docs/forms-checkbox--default-story)               | Checkbox form element              |
-| [checkbox-group](?path=/docs/forms-checkbox-group--default-story)   | Group of checkboxes                |
-| [field](?path=/docs/forms-field--default-story)                     | Base class for all inputs          |
-| [fieldset](?path=/docs/forms-fieldset-overview--page)               | Group for form inputs              |
-| [form](?path=/docs/forms-form-overview--page)                       | Wrapper for multiple form elements |
-| [input](?path=/docs/forms-input--default-story)                     | Input element for strings          |
-| [input-amount](?path=/docs/forms-input-amount--default-story)       | Input element for amounts          |
-| [input-date](?path=/docs/forms-input-date--default-story)           | Input element for dates            |
-| [input-email](?path=/docs/forms-input-email--default-story)         | Input element for e-mails          |
-| [input-iban](?path=/docs/forms-input-iban--default-story)           | Input element for IBANs            |
-| [radio](?path=/docs/forms-radio--default-story)                     | Radio form element                 |
-| [radio-group](?path=/docs/forms-radio-group--default-story)         | Group of radios                    |
-| [select](?path=/docs/forms-select--default-story)                   | Simple native dropdown element     |
-| [textarea](?path=/docs/forms-textarea--default-story)               | Multiline text input               |
-| [validate](?path=/docs/forms-system-validate-system--default-story) | Validation for our form components |
diff --git a/packages/form-system/stories/15-features-overview.stories.mdx b/packages/form-system/stories/15-features-overview.stories.mdx
deleted file mode 100644
index c2295ef62..000000000
--- a/packages/form-system/stories/15-features-overview.stories.mdx
+++ /dev/null
@@ -1,159 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import '@lion/checkbox-group/lion-checkbox-group.js';
-import '@lion/checkbox-group/lion-checkbox.js';
-import '@lion/fieldset/lion-fieldset.js';
-import '@lion/form/lion-form.js';
-import '@lion/input-amount/lion-input-amount.js';
-import '@lion/input-date/lion-input-date.js';
-import '@lion/input-datepicker/lion-input-datepicker.js';
-import '@lion/input-email/lion-input-email.js';
-import '@lion/input-iban/lion-input-iban.js';
-import '@lion/input-range/lion-input-range.js';
-import '@lion/input/lion-input.js';
-import '@lion/radio-group/lion-radio-group.js';
-import '@lion/radio-group/lion-radio.js';
-import '@lion/select/lion-select.js';
-import '@lion/select-rich/lion-option.js';
-import '@lion/select-rich/lion-options.js';
-import '@lion/select-rich/lion-select-rich.js';
-import '@lion/textarea/lion-textarea.js';
-import { MinLength, Required } from '@lion/validate';
-
-<Meta title="Forms/Features Overview" />
-
-# Features Overview
-
-This is a meta package to show interaction between various form elements.
-For usage and installation please see the appropriate packages.
-
-## Umbrella Form
-
-<Preview>
-  <Story name="Example">
-    {() => {
-      Required.getMessage = () => 'Please enter a value';
-      return html`
-      <lion-form @model-value-changed="${(ev) => { console.log('lion-form::', ev.target.name, ':', ev.detail.formPath) }}">
-        <form>
-          <lion-fieldset name="full_name" @model-value-changed="${(ev) => { console.log('lion-fieldset::', ev.target.name, ':', ev.detail.formPath) }}">
-            <lion-input
-              name="first_name"
-              label="First Name"
-              .validators="${[new Required()]}"
-            ></lion-input>
-            <lion-input
-              name="last_name"
-              label="Last Name"
-              .validators="${[new Required()]}"
-            ></lion-input>
-          </lion-fieldset>
-          <lion-input-date
-            name="date"
-            label="Date of application"
-            .modelValue="${new Date('2000-12-12')}"
-            .validators="${[new Required()]}"
-          ></lion-input-date>
-          <lion-input-datepicker
-            name="datepicker"
-            label="Date to be picked"
-            .modelValue="${new Date('2020-12-12')}"
-            .validators="${[new Required()]}"
-          ></lion-input-datepicker>
-          <lion-textarea
-            name="bio"
-            label="Biography"
-            .validators="${[new Required(), new MinLength(10)]}"
-            help-text="Please enter at least 10 characters"
-          ></lion-textarea>
-          <lion-input-amount name="money" label="Money"></lion-input-amount>
-          <lion-input-iban name="iban" label="Iban"></lion-input-iban>
-          <lion-input-email name="email" label="Email"></lion-input-email>
-          <lion-checkbox-group
-            @model-value-changed="${(ev) => { console.log('lion-cb-group::', ev.target.name, ':', ev.detail.formPath) }}"
-            label="What do you like?"
-            name="checkers"
-            .validators="${[new Required()]}"
-          >
-            <lion-checkbox .choiceValue=${'foo'} label="I like foo"></lion-checkbox>
-            <lion-checkbox .choiceValue=${'bar'} label="I like bar"></lion-checkbox>
-            <lion-checkbox .choiceValue=${'baz'} label="I like baz"></lion-checkbox>
-          </lion-checkbox-group>
-          <lion-radio-group
-            @model-value-changed="${(ev) => { console.log('lion-radio-group::', ev.target.name, ':', ev.detail.formPath) }}"
-            name="dinosaurs"
-            label="Favorite dinosaur"
-            .validators="${[new Required()]}"
-          >
-            <lion-radio .choiceValue=${'allosaurus'} label="allosaurus"></lion-radio>
-            <lion-radio .choiceValue=${'brontosaurus'} label="brontosaurus"></lion-radio>
-            <lion-radio .choiceValue=${'diplodocus'} label="diplodocus"></lion-radio>
-          </lion-radio-group>
-          <lion-select-rich name="favoriteColor" label="Favorite color">
-            <lion-options slot="input">
-              <lion-option .choiceValue=${'red'}>Red</lion-option>
-              <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
-              <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-            </lion-options>
-          </lion-select-rich>
-          <lion-select
-            label="Lyrics"
-            name="lyrics"
-            .validators="${[new Required()]}"
-          >
-            <select slot="input">
-              <option value="1">Fire up that loud</option>
-              <option value="2">Another round of shots...</option>
-              <option value="3">Drop down for what?</option>
-            </select>
-          </lion-select>
-          <lion-input-range
-            name="range"
-            min="1"
-            max="5"
-            .modelValue="${2.3}"
-            unit="%"
-            step="0.1"
-            label="Input range"
-          ></lion-input-range>
-          <lion-checkbox-group .mulipleChoice="${false}" name="terms" .validators="${[new Required()]}">
-            <lion-checkbox
-              label="I blindly accept all terms and conditions"
-            ></lion-checkbox>
-          </lion-checkbox-group>
-          <lion-textarea name="comments" label="Comments"></lion-textarea>
-          <div class="buttons">
-            <lion-button raised>Submit</lion-button>
-            <lion-button
-              type="button"
-              raised
-              @click=${ev => ev.currentTarget.parentElement.parentElement.parentElement.resetGroup()}
-              >Reset</lion-button
-            >
-          </div>
-        </form>
-      </lion-form>
-    `;}}
-  </Story>
-</Preview>
-
-```js
-import '@lion/checkbox-group/lion-checkbox-group.js';
-import '@lion/checkbox-group/lion-checkbox.js';
-import '@lion/fieldset/lion-fieldset.js';
-import '@lion/form/lion-form.js';
-import '@lion/input-amount/lion-input-amount.js';
-import '@lion/input-date/lion-input-date.js';
-import '@lion/input-datepicker/lion-input-datepicker.js';
-import '@lion/input-email/lion-input-email.js';
-import '@lion/input-iban/lion-input-iban.js';
-import '@lion/input-range/lion-input-range.js';
-import '@lion/input/lion-input.js';
-import '@lion/option/lion-option.js';
-import '@lion/radio-group/lion-radio-group.js';
-import '@lion/radio-group/lion-radio.js';
-import '@lion/select/lion-select.js';
-import '@lion/select-rich/lion-options.js';
-import '@lion/select-rich/lion-select-rich.js';
-import '@lion/textarea/lion-textarea.js';
-import { MinLength, Required } from '@lion/validate';
-```
diff --git a/packages/form-system/stories/17-Validation-Examples.stories.mdx b/packages/form-system/stories/17-Validation-Examples.stories.mdx
deleted file mode 100644
index ba5b880e5..000000000
--- a/packages/form-system/stories/17-Validation-Examples.stories.mdx
+++ /dev/null
@@ -1,694 +0,0 @@
-import { Meta, Story, html } from '@open-wc/demoing-storybook';
-/* eslint-disable import/no-extraneous-dependencies */
-import { LionInput } from '@lion/input';
-import '@lion/input-amount/lion-input-amount.js';
-import '@lion/input-date/lion-input-date.js';
-import '@lion/input-email/lion-input-email.js';
-import '@lion/input/lion-input.js';
-import {
-  DefaultSuccess,
-  EqualsLength,
-  IsDate,
-  IsEmail,
-  IsNumber,
-  loadDefaultFeedbackMessages,
-  MaxDate,
-  MaxLength,
-  MaxNumber,
-  MinDate,
-  MinLength,
-  MinMaxDate,
-  MinMaxLength,
-  MinMaxNumber,
-  MinNumber,
-  Required,
-  Validator,
-  Pattern,
-} from '@lion/validate';
-
-<Meta title="Forms/Validation/Examples" parameters={{ component: 'lion-input' }}/>
-
-## Required Validator
-
-The required validator can be put onto every form field element and will make sure that element is
-not empty.
-For an input that may mean that it is not an empty string,
-while for a checkbox group it means at least one checkbox needs to be checked.
-
-<Story name="Required Validator">
-  {() => {
-    loadDefaultFeedbackMessages();
-    return html`
-    <lion-input .validators=${[new Required()]} label="Required"></lion-input>
-  `}}
-</Story>
-
-```html
-<lion-input .validators="${[new Required()]}" label="Required"></lion-input>
-```
-
-## String Validators
-
-Useful on input elements it allows to define how many characters can be entered.
-
-<Story name="String Validators">
-  {html`
-    <lion-input
-      .validators=${[new EqualsLength(7)]}
-      .modelValue=${'not exactly'}
-      label="EqualsLength"
-    ></lion-input>
-    <lion-input
-      .validators=${[new MinLength(10)]}
-      .modelValue=${'too short'}
-      label="MinLength"
-    ></lion-input>
-    <lion-input
-      .validators=${[new MaxLength(7)]}
-      .modelValue=${'too long'}
-      label="MaxLength"
-    ></lion-input>
-    <lion-input
-      .validators=${[new MinMaxLength({ min: 10, max: 20 })]}
-      .modelValue=${'that should be enough'}
-      label="MinMaxLength"
-    ></lion-input>
-    <lion-input
-      .validators=${[new Pattern(/#LionRocks/)]}
-      .modelValue=${'regex checks if "#Lion<NO SPACE>Rocks" is in this input #LionRocks'}
-      label="Pattern"
-    ></lion-input>
-  `}
-</Story>
-
-```html
-<lion-input
-  .validators="${[new EqualsLength(7)]}"
-  .modelValue="${'not exactly'}"
-  label="EqualsLength"
-></lion-input>
-<lion-input
-  .validators="${[new MinLength(10)]}"
-  .modelValue="${'too short'}"
-  label="MinLength"
-></lion-input>
-<lion-input
-  .validators="${[new MaxLength(7)]}"
-  .modelValue="${'too long'}"
-  label="MaxLength"
-></lion-input>
-<lion-input
-  .validators="${[new MinMaxLength({ min: 10, max: 20 })]}"
-  .modelValue="${'that should be enough'}"
-  label="MinMaxLength"
-></lion-input>
-```
-
-## Number Validators
-
-Number validations assume that it's modelValue is actually a number.
-Therefore it may only be used on input that have an appropriate parser/formatter like the input-amount.
-
-<Story name="Number Validators">
-  {html`
-  <lion-input-amount
-    .validators="${[new IsNumber()]}"
-    .modelValue="${'foo'}"
-    label="IsNumber"
-  ></lion-input-amount>
-  <lion-input-amount
-    .validators="${[new MinNumber(7)]}"
-    .modelValue="${5}"
-    label="MinNumber"
-  ></lion-input-amount>
-  <lion-input-amount
-    .validators="${[new MaxNumber(7)]}"
-    .modelValue="${9}"
-    label="MaxNumber"
-  ></lion-input-amount>
-  <lion-input-amount
-    .validators="${[new MinMaxNumber({ min: 10, max: 20 })]}"
-    .modelValue="${5}"
-    label="MinMaxNumber"
-  ></lion-input-amount>
-  `}
-</Story>
-
-```html
-<lion-input-amount
-  .validators="${[new IsNumber()]}"
-  .modelValue="${'foo'}"
-  label="IsNumber"
-></lion-input-amount>
-<lion-input-amount
-  .validators="${[new MinNumber(7)]}"
-  .modelValue="${5}"
-  label="MinNumber"
-></lion-input-amount>
-<lion-input-amount
-  .validators="${[new MaxNumber(7)]}"
-  .modelValue="${9}"
-  label="MaxNumber"
-></lion-input-amount>
-<lion-input-amount
-  .validators="${[new MinMaxNumber({ min: 10, max: 20 })]}"
-  .modelValue="${5}"
-  label="MinMaxNumber"
-></lion-input-amount>
-```
-
-## Date Validators
-
-Date validators work with real javascript dates. Use them on input-date.
-
-<Story name="Date Validators">
-  {() => {
-    const today = new Date();
-    const year = today.getFullYear();
-    const month = today.getMonth();
-    const day = today.getDate();
-    const yesterday = new Date(year, month, day - 1);
-    const tomorrow = new Date(year, month, day + 1);
-    return html`
-      <lion-input-date
-        .validators=${[new IsDate()]}
-        .modelValue=${'foo'}
-        label="IsDate"
-      ></lion-input-date>
-      <lion-input-date
-        .validators=${[new MinDate(today)]}
-        .modelValue=${new Date(yesterday)}
-        label="MinDate"
-      ></lion-input-date>
-      <lion-input-date
-        .validators=${[new MaxDate(today)]}
-        .modelValue=${new Date(tomorrow)}
-        label="MaxDate"
-      ></lion-input-date>
-      <lion-input-date
-        .validators=${[new MinMaxDate({ min: new Date(yesterday), max: new Date(tomorrow) })]}
-        .modelValue=${new Date(today)}
-        label="MinMaxDate"
-      ></lion-input-date>
-    `;
-  }}
-</Story>
-
-
-```js
-const today = new Date();
-const year = today.getFullYear();
-const month = today.getMonth();
-const day = today.getDate();
-const yesterday = new Date(year, month, day - 1);
-const tomorrow = new Date(year, month, day + 1);
-```
-
-```html
-<lion-input-date
-  .validators="${[new IsDate()]}"
-  .modelValue="${'foo'}"
-  label="IsDate"
-></lion-input-date>
-<lion-input-date
-  .validators="${[new MinDate(today)]}"
-  .modelValue="${new Date(yesterday)}"
-  label="MinDate"
-></lion-input-date>
-<lion-input-date
-  .validators="${[new MaxDate(today)]}"
-  .modelValue="${new Date(tomorrow)}"
-  label="MaxDate"
-></lion-input-date>
-<lion-input-date
-  .validators="${[new MinMaxDate({ min: new Date(yesterday), max: new Date(tomorrow) })]}"
-  .modelValue="${new Date(today)}"
-  label="MinMaxDate"
-></lion-input-date>
-```
-
-## Email Validator
-
-<Story name="Email Validator">
-  {html`
-    <lion-input-email
-      .validators="${[new IsEmail()]}"
-      .modelValue="${'foo'}"
-      label="IsEmail"
-    ></lion-input-email>
-  `}
-</Story>
-
-```html
-<lion-input-email
-  .validators="${[new IsEmail()]}"
-  .modelValue="${'foo'}"
-  label="IsEmail"
-></lion-input-email>
-```
-
-## Validation Types
-
-When defining your own component you can decide to allow for multiple types of validation.
-By default only `error` is used, however there are certainly use cases where warning or success messages make sense.
-
-<Story name="Validation Types">
-  {() => {
-    try {
-      class MyTypesInput extends LionInput {
-        static get validationTypes() {
-          return ['error', 'warning', 'info', 'success'];
-        }
-      }
-      customElements.define('my-types-input', MyTypesInput);
-    } catch (err) {
-      // expected as it is a demo
-    }
-    return html`
-      <style>
-        .demo-types-input {
-          padding: 0.5rem;
-        }
-        .demo-types-input[shows-feedback-for~='success'] {
-          background-color: #e4ffe4;
-          border: 1px solid green;
-        }
-        .demo-types-input[shows-feedback-for~='error'] {
-          background-color: #ffd4d4;
-          border: 1px solid red;
-        }
-        .demo-types-input[shows-feedback-for~='warning'] {
-          background-color: #ffe4d4;
-          border: 1px solid orange;
-        }
-        .demo-types-input[shows-feedback-for~='info'] {
-          background-color: #d4e4ff;
-          border: 1px solid blue;
-        }
-      </style>
-      <my-types-input
-        .validators="${[
-          new Required(),
-          new MinLength(7, { type: 'warning' }),
-          new MaxLength(10, {
-            type: 'info',
-            getMessage: () => `Please, keep the length below the 10 characters.`,
-          }),
-          new DefaultSuccess(),
-        ]}"
-        .modelValue="${'exactly'}"
-        label="Validation Types"
-        class="demo-types-input"
-      ></my-types-input>
-    `;
-  }}
-</Story>
-
-```js
-try {
-  class MyTypesInput extends LionInput {
-    static get validationTypes() {
-      return ['error', 'warning', 'info', 'success'];
-    }
-  }
-  customElements.define('my-types-input', MyTypesInput);
-} catch (err) {
-  // expected as it is a demo
-}
-```
-
-```html
-<style>
-  .demo-types-input {
-    padding: 0.5rem;
-  }
-  .demo-types-input[shows-feedback-for~='success'] {
-    background-color: #e4ffe4;
-    border: 1px solid green;
-  }
-  .demo-types-input[shows-feedback-for~='error'] {
-    background-color: #ffd4d4;
-    border: 1px solid red;
-  }
-  .demo-types-input[shows-feedback-for~='warning'] {
-    background-color: #ffe4d4;
-    border: 1px solid orange;
-  }
-  .demo-types-input[shows-feedback-for~='info'] {
-    background-color: #d4e4ff;
-    border: 1px solid blue;
-  }
-</style>
-<my-types-input
-  .validators="${[
-    new Required(),
-    new MinLength(7, { type: 'warning' }),
-    new MaxLength(10, {
-      type: 'info',
-      getMessage: () => `Please, keep the length below the 10 characters.`,
-    }),
-    new DefaultSuccess(),
-  ]}"
-  .modelValue="${'exactly'}"
-  label="Validation Types"
-  class="demo-types-input"
-></my-types-input>
-```
-
-## Custom Validators
-
-Here is an example how you can make your own validator and providing the error messages directly within.
-You can even hard code localization in there if needed or you can use a localization system.
-
-<Story name="Custom Validators">
-  {() => {
-    class MyValidator extends Validator {
-      static get validatorName() {
-        return 'myValidator';
-      }
-      execute(modelValue, param) {
-        return modelValue !== param;
-      }
-      static getMessage({ fieldName, modelValue, params: param }) {
-        if (modelValue.length >= param.length - 1 && param.startsWith(modelValue)) {
-          return 'Almost there...';
-        }
-        return `No "${param}" found in ${fieldName}`;
-      }
-    }
-    return html`
-      <lion-input
-        label="Custom validator"
-        help-text="Type 'mine' please"
-        .validators="${[new MyValidator('mine')]}"
-        .modelValue="${'mi'}"
-      ></lion-input>
-    `;
-    }
-  }
-</Story>
-
-
-```js
-class MyValidator extends Validator {
-  constructor(...args) {
-    super(...args);
-  }
-
-  static get validatorName() {
-    return 'myValidator';
-  }
-
-  execute(modelValue, param) {
-    return modelValue !== param;
-  }
-
-  static getMessage({ fieldName, modelValue, params: param }) {
-    if (modelValue.length >= param.length - 1 && param.startsWith(modelValue)) {
-      return 'Almost there...';
-    }
-    return `No "${param}" found in ${fieldName}`;
-  }
-}
-```
-
-```html
-<lion-input
-  label="Custom validator"
-  help-text="Type 'mine' please"
-  .validators="${[new MyValidator('mine')]}"
-  .modelValue="${'mi'}"
-></lion-input>
-```
-
-## Default messages
-
-To get default validation messages you need to import and call the `loadDefaultFeedbackMessages` function once in your application.
-
-Sometimes the default messages don't make sense for your input field. In that case you want to override it by adding a `getMessage` function to your validator.
-
-<Story name="Override default messages">
-{html`
-  <lion-input
-    .validators="${[new EqualsLength(4, { getMessage: () => '4 chars please...' })]}"
-    .modelValue="${'123'}"
-    label="Custom message for validator instance"
-  ></lion-input>
-  <lion-input
-    .validators="${[
-      new EqualsLength(4, {
-        getMessage: ({ modelValue, params: param }) => {
-          const diff = modelValue.length - param;
-          return `${Math.abs(diff)} too ${diff > 0 ? 'much' : 'few'}...`;
-        },
-      }),
-    ]}"
-    .modelValue="${'way too much'}"
-    label="Dynamic message for validator instance"
-  ></lion-input>
-  `}
-</Story>
-
-```html
-<lion-input
-  .validators="${[new EqualsLength(4, { getMessage: () => '4 chars please...' })]}"
-  .modelValue="${'123'}"
-  label="Custom message for validator instance"
-></lion-input>
-<lion-input
-  .validators="${[
-    new EqualsLength(4, {
-      getMessage: ({ modelValue, params: param }) => {
-        const diff = modelValue.length - param;
-        return `${Math.abs(diff)} too ${diff > 0 ? 'much' : 'few'}...`;
-      },
-    }),
-  ]}"
-  .modelValue="${'way too much'}"
-  label="Dynamic message for validator instance"
-></lion-input>
-```
-
-## Override fieldName
-
-In the scenario that the default messages are correct, but you only want to change the `fieldName`, this can both be done for a single specific validator or for all at once.
-
-<Story name="Override fieldName">
-{html`
-  <lion-input
-    .validators="${[new EqualsLength(4, { fieldName: 'custom fieldName' })]}"
-    .modelValue="${'123'}"
-    label="Custom fieldName for 1 validator"
-  ></lion-input>
-  <lion-input
-    .validators="${[new Required(), new EqualsLength(4)]}"
-    .fieldName="${'custom fieldName'}"
-    .modelValue="${'123'}"
-    label="Custom fieldName for all validators"
-  ></lion-input>
-`}
-</Story>
-
-```html
-<lion-input
-  .validators="${[new EqualsLength(4, { fieldName: 'custom fieldName' })]}"
-  .modelValue="${'123'}"
-  label="Custom fieldName for 1 validator"
-></lion-input>
-<lion-input
-  .validators="${[new Required(), new EqualsLength(4)]}"
-  .fieldName="${'custom fieldName'}"
-  .modelValue="${'123'}"
-  label="Custom fieldName for all validators"
-></lion-input>
-```
-
-## Asynchronous validation
-
-<Story name="Asynchronous validation">
-{() => {
-    function pause(ms = 0) {
-      return new Promise(resolve => {
-        setTimeout(() => {
-          resolve();
-        }, ms);
-      });
-    }
-    class AsyncValidator extends Validator {
-      constructor(...args) {
-        super(...args);
-      }
-      static get validatorName() {
-        return 'asyncValidator';
-      }
-      static get async() { 
-        return true; 
-      }
-      async execute() {
-        console.log('async pending...');
-        await pause(2000);
-        console.log('async done...');
-        return true;
-      }
-      static getMessage({ modelValue }) {
-        return `validated for modelValue: ${modelValue}...`;
-      }
-    }
-    return html`
-      <style>
-        lion-input[is-pending] {
-          opacity: 0.5;
-        }
-      </style>
-      <lion-input
-        label="Async validation"
-        .validators="${[new AsyncValidator()]}"
-        .modelValue="${'123'}"
-      ></lion-input>
-    `}}
-</Story>
-
-```js
-function pause(ms = 0) {
-  return new Promise(resolve => {
-    setTimeout(() => {
-      resolve();
-    }, ms);
-  });
-}
-class AsyncValidator extends Validator {
-  constructor(...args) {
-    super(...args);
-  }
-  static get validatorName() {
-    return 'asyncValidator';
-  }
-  static get async() { 
-    return true; 
-  }
-  async execute() {
-    console.log('async pending...');
-    await pause(2000);
-    console.log('async done...');
-    return true;
-  }
-  static getMessage({ modelValue }) {
-    return `validated for modelValue: ${modelValue}...`;
-  }
-}
-```
-
-## Dynamic parameter change
-
-<Story name="Dynamic parameter change">
-{() => {
-    const beginDate = new Date('09/09/1990');
-    const minDateValidatorRef = new MinDate(beginDate, {
-      message: 'Fill in a date after your birth date',
-    });
-    return html`
-      <lion-input-date
-        label="Birth date"
-        help-text="Adjust this date to retrigger validation of the input below..."
-        .modelValue="${beginDate}"
-        @model-value-changed="${({ target: { modelValue, errorState } }) => {
-          if (!errorState) {
-            // Since graduation date is usually not before birth date
-            minDateValidatorRef.param = modelValue;
-          }
-        }}"
-      ></lion-input-date>
-      <lion-input-date
-        label="Graduation date"
-        .modelValue="${new Date('09/09/1989')}"
-        .validators="${[minDateValidatorRef]}"
-      ></lion-input-date>
-    `}}
-</Story>
-
-```js
-const beginDate = new Date('09/09/1990');
-const minDateValidatorRef = new MinDate(beginDate, {
-  message: 'Fill in a date after your birth date',
-});
-```
-
-```html
-<lion-input-date
-  label="Your birth date"
-  help-text="Adjust this date to retrigger validation of the input below..."
-  .modelValue="${beginDate}"
-  @model-value-changed="${({ target: { modelValue, errorState } }) => {
-    if (!errorState) {
-      // Since graduation date is usually not before birth date
-      minDateValidatorRef.param = modelValue;
-    }
-  }}"
-></lion-input-date>
-<lion-input-date
-  label="Your graduation date"
-  .modelValue="${new Date('09/09/1989')}"
-  .validators="${[minDateValidatorRef]}"
-></lion-input-date>
-```
-
-## Disabled inputs validation
-
-According to the W3C specs, Disabled fields should not be validated.
-Therefor if the attribute disabled is present on a lion-input it will not be validated.
-
-<Story name="Disabled Validators">
-  {html`
-    <lion-input
-      disabled
-      .validators=${[new EqualsLength(7)]}
-      .modelValue=${'not exactly'}
-      label="EqualsLength"
-    ></lion-input>
-    <lion-input
-      disabled
-      .validators=${[new MinLength(10)]}
-      .modelValue=${'too short'}
-      label="MinLength"
-    ></lion-input>
-    <lion-input
-      disabled
-      .validators=${[new MaxLength(7)]}
-      .modelValue=${'too long'}
-      label="MaxLength"
-    ></lion-input>
-    <lion-input
-      disabled
-      .validators=${[new MinMaxLength({ min: 10, max: 20 })]}
-      .modelValue=${'that should be enough'}
-      label="MinMaxLength"
-    ></lion-input>
-  `}
-</Story>
-
-```html
-<lion-input
-  disabled
-  .validators=${[new EqualsLength(7)]}
-  .modelValue=${'not exactly'}
-  label="EqualsLength"
-></lion-input>
-<lion-input
-  disabled
-  .validators=${[new MinLength(10)]}
-  .modelValue=${'too short'}
-  label="MinLength"
-></lion-input>
-<lion-input
-  disabled
-  .validators=${[new MaxLength(7)]}
-  .modelValue=${'too long'}
-  label="MaxLength"
-></lion-input>
-<lion-input
-  disabled
-  .validators=${[new MinMaxLength({ min: 10, max: 20 })]}
-  .modelValue=${'that should be enough'}
-  label="MinMaxLength"
-></lion-input>
-```
diff --git a/packages/form-system/stories/35-System-InteractionStates.stories.mdx b/packages/form-system/stories/35-System-InteractionStates.stories.mdx
deleted file mode 100644
index 36d7e5391..000000000
--- a/packages/form-system/stories/35-System-InteractionStates.stories.mdx
+++ /dev/null
@@ -1,180 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { render } from '@lion/core';
-import { renderLitAsNode } from '@lion/helpers';
-import '@lion/input/lion-input.js';
-import { Validator } from '@lion/validate';
-import './helper-wc/h-output.js';
-
-<Meta title="Forms/System/Interaction States" />
-
-# Interaction States
-
-`InteractionStateMixin` saves meta information about interaction states.
-It allows for creating advanced UX scenarios.
-
-Examples of such scenarios already in our fields:
-
-- Show the validation message of an input only after the user has blurred the input field
-- Hide the validation message when an invalid value becomes valid
-
-Something our subclassers can implement:
-
-- Show a red border around the input right after the input became invalid
-
-The meta information that InteractionStateMixin collects, is stored in the Boolean properties on our fields:
-
-- `touched`, the user blurred the field
-- `dirty`, the value in the field has changed
-- `prefilled`, a prepopulated field is not empty
-
-> You can listen to the events `touched-changed` and `dirty-changed`.
-
-<Story name="Interaction States">
-  {html`
-    <lion-input
-      label="Interaction States"
-      help-text="Interact with this field to see how dirty, touched and prefilled change"
-      .modelValue="${'myValue'}"
-    ></lion-input>
-    <h-output .show="${['touched', 'dirty', 'prefilled', 'focused', 'submitted']}"></h-output>
-  `}
-</Story>
-
-```html
-<lion-input
-  label="Interaction States"
-  help-text="Interact with this field to see how dirty, touched and prefilled change"
-  .modelValue="${'myValue'}"
-></lion-input>
-```
-
-## Advanced use cases
-
-### Overriding interaction states
-
-When creating an extension of LionField or LionInput, it can be needed to override the way prefilled values are 'computed'.
-
-The example below shows how this is done for checkboxes/radio-inputs.
-
-```js
-/**
- * @override
- */
-_isEmpty() {
-  return !this.checked;
-}
-```
-
-## When is feedback shown to the user
-
-We show the validity feedback when one of the following conditions is met:
-
-- **prefilled**,
-  the user already filled in something, or the value is prefilled
-  when the form is initially rendered.
-
-- **touched** && **dirty**
-
-  - When a user starts typing for the first time in a field with for instance `required` validation,
-    error message should not be shown until a field becomes `touched` (a user leaves(blurs) a field).
-  - When a user enters a field without altering the value (making it `dirty` but not `touched`),
-    an error message shouldn't be shown either.
-
-- **submitted**,
-  if the form is submitted, always show the error message.
-
-### Changing the feedback show condition (Subclassers)
-
-You can change the condition upon which feedback gets shown.
-
-In order to override the feedback show conditions, you need to create a custom field and override `_showFeedbackConditionFor` method.
-This method accepts the a `type` parameter which is a String representing the type of feedback (e.g. 'error').
-Then, it returns true of false, depending on whether feedback for that type should be shown or not. That part, you can control.
-
-In the following example we will demonstrate this with interaction states, the most common use case for feedback visibility conditions.
-
-<Story name="Feedback Condition">
-  {() => {
-    // 1. Initialize variables...
-    // properties on InteractionStateMixin we want to check conditions for
-    const props = ['touched', 'dirty', 'prefilled', 'focused', 'filled', 'submitted'];
-    // Here we will store the conditions (trigger for validation feedback)
-    // provided via the UI of the demo
-    let conditions = [];
-    // 2. Create a validator...
-    // Define a demo validator that should only be visible on an odd amount of characters
-    // const OddValidator = [modelValue => ({ odd: modelValue.length % 2 !== 0 })];
-    class OddValidator extends Validator {
-      static get validatorName() {
-        return 'OddValidator';
-      }
-      // eslint-disable-next-line class-methods-use-this
-      execute(value) {
-        let hasError = false;
-        if (!(value.length % 2 !== 0)) {
-          hasError = true;
-        }
-        return hasError;
-      }
-      _getMessage() {
-        return 'Add or remove one character';
-      }
-    }
-    // 3. Create field overriding .showErrorCondition...
-    // Here we will store a reference to the Field element that overrides the default condition
-    // (function `showErrorCondition`) for triggering validation feedback of `.validators`
-    const fieldElement = renderLitAsNode(html`
-      <lion-input
-        name="interactionField"
-        label="Only an odd amount of characters allowed"
-        help-text="Change feedback condition"
-        .modelValue="${'notodd'}"
-        .validators="${[new OddValidator()]}"
-      >
-        <input slot="input" />
-      </lion-input>
-    `);
-    fieldElement._showFeedbackConditionFor = type => {
-      return conditions.every(condition => {
-        /**
-         * This here shows bug for focused state.
-         * Focused is set to true AFTER we already evaluate feedback conditions
-         * Bug report: https://github.com/ing-bank/lion/issues/455
-         */
-        // setTimeout(() => console.log(fieldElement[condition])); //
-        return fieldElement[condition];
-      });
-    };
-    function fetchConditionsAndReevaluate({ currentTarget: { modelValue } }) {
-      if (!modelValue['props[]']) {
-        return;
-      }
-      // Create props list like: ['touched', 'submitted']
-      conditions = modelValue['props[]'].filter(p => p.checked).map(p => p.value);
-      // Reevaluate
-      fieldElement.validate();
-    }
-    fieldElement.addEventListener('focus', () => {
-      fieldElement.validate();
-    });
-    return html`
-      <lion-form>
-        <form>
-          ${fieldElement}
-          <button>Submit</button>
-        </form>
-      </lion-form>
-      <h-output .field="${fieldElement}" .show="${[...props, 'hasFeedbackFor']}"> </h-output>
-      <h3>
-        Set conditions for validation feedback visibility
-      </h3>
-      <lion-checkbox-group name="props[]" @model-value-changed="${fetchConditionsAndReevaluate}">
-        ${props.map(
-          p => html`
-            <lion-checkbox .label="${p}" .choiceValue="${p}"> </lion-checkbox>
-          `,
-        )}
-      </lion-checkbox-group>
-    `;
-  }}
-</Story>
diff --git a/packages/form-system/stories/50-Content-inside-fields.stories.mdx b/packages/form-system/stories/50-Content-inside-fields.stories.mdx
deleted file mode 100644
index c5cc2b02e..000000000
--- a/packages/form-system/stories/50-Content-inside-fields.stories.mdx
+++ /dev/null
@@ -1,26 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import '@lion/input/lion-input.js';
-import '@lion/button/lion-button.js';
-
-<Meta title="Forms/System/Field integrations" />
-
-# Content inside fields
-
-Due to our custom inputs being Web Components, it is possible to put HTML content inside an input.
-For example if you want to add a button as a prefix or suffix.
-
-<Story name="Buttons within fields">
-  {html`
-    <lion-input label="Prefix and sufix">
-      <lion-button slot="prefix" type="button">prefix</lion-button>
-      <lion-button slot="suffix" type="button">suffix</lion-button>
-    </lion-input>
-  `}
-</Story>
-
-```html
-<lion-input label="Prefix and sufix">
-  <lion-button slot="prefix" type="button">prefix</lion-button>
-  <lion-button slot="suffix" type="button">suffix</lion-button>
-</lion-input>
-```
diff --git a/packages/form-system/stories/fieldset-examples.stories.mdx b/packages/form-system/stories/fieldset-examples.stories.mdx
deleted file mode 100644
index 08a62cd16..000000000
--- a/packages/form-system/stories/fieldset-examples.stories.mdx
+++ /dev/null
@@ -1,387 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import '@lion/input/lion-input.js';
-import { localize } from '@lion/localize';
-import { loadDefaultFeedbackMessages, MinLength, Validator, Required } from '@lion/validate';
-import '@lion/fieldset/lion-fieldset.js';
-
-<Meta title="Forms/Fieldset/Examples" parameters={{ component: 'lion-fieldset' }} />
-
-# Fieldset Examples
-
-<Story name="Default">
-  {html`
-    <style>
-      lion-fieldset {
-        margin-top: 20px;
-      }
-    </style>
-    <lion-fieldset name="nameGroup" label="Name">
-      <lion-input name="FirstName" label="First Name"></lion-input>
-      <lion-input name="LastName" label="Last Name"></lion-input>
-    </lion-fieldset>
-  `}
-</Story>
-
-```html
-<lion-fieldset name="nameGroup" label="Name">
-  <lion-input name="FirstName" label="First Name"></lion-input>
-  <lion-input name="LastName" label="Last Name"></lion-input>
-</lion-fieldset>
-```
-
-### With Data
-
-The fieldset's modelValue is an `Object` containing properties where the key is the `name` attribute of the field,
-and the value is the `modelValue` of the field.
-
-<Story name="Data">
-  {html`
-    <lion-fieldset name="nameGroup" label="Name">
-      <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-      <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-      <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
-        Log to Action Logger
-      </button>
-    </lion-fieldset>
-  `}
-</Story>
-
-```html
-<lion-fieldset name="nameGroup" label="Name">
-  <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-  <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-  <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
-    Log to Action Logger
-  </button>
-</lion-fieldset>
-```
-
-### Disabled
-
-Disabling a fieldset disables all its child fields.
-When enabling a fieldset, fields that have disabled explicitly set will stay disabled.
-
-<Story name="Disabled">
-  {() => {
-    function toggleDisabled() {
-      const fieldset = document.querySelector('#fieldset');
-      fieldset.disabled = !fieldset.disabled;
-    }
-    return html`
-      <lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
-        <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-        <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-        <lion-fieldset name="nameGroup2" label="Name">
-          <lion-input
-            name="FirstName2"
-            label="First Name"
-            .modelValue=${'Foo'}
-            disabled
-          ></lion-input>
-          <lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
-        </lion-fieldset>
-      </lion-fieldset>
-      <button @click=${toggleDisabled}>
-        Toggle disabled
-      </button>
-    `;
-  }}
-</Story>
-
-```js
-function toggleDisabled() {
-  const fieldset = document.querySelector('#fieldset');
-  fieldset.disabled = !fieldset.disabled;
-}
-```
-
-```html
-<lion-fieldset name="nameGroup" label="Name" id="fieldset" disabled>
-  <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-  <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-  <lion-fieldset name="nameGroup2" label="Name">
-    <lion-input
-      name="FirstName2"
-      label="First Name"
-      .modelValue=${'Foo'}
-      disabled
-    ></lion-input>
-    <lion-input name="LastName2" label="Last Name" .modelValue=${'Bar'}></lion-input>
-  </lion-fieldset>
-</lion-fieldset>
-<button @click=${toggleDisabled}>
-  Toggle disabled
-</button>
-```
-
-### Nesting fieldsets
-
-Fieldsets can also be nested. The level of nesting will correspond one to one with the `modelValue` object.
-
-<Story name="Nesting fieldsets">
-  {html`
-    <lion-fieldset>
-      <div slot="label">Personal data</div>
-      <lion-fieldset name="nameGroup" label="Name">
-        <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-        <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-      </lion-fieldset>
-      <lion-fieldset name="location" label="Location">
-        <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
-      </lion-fieldset>
-      <lion-input name="age" label="Age" .modelValue=${21}></lion-input>
-      <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
-        Log everything to Action Logger
-      </button>
-      <br />
-      <button
-        @click=${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}
-      >
-        Log only Name fieldset to Action Logger
-      </button>
-    </lion-fieldset>
-  `}
-</Story>
-
-```html
-<lion-fieldset>
-  <div slot="label">Personal data</div>
-  <lion-fieldset name="nameGroup" label="Name">
-    <lion-input name="FirstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-    <lion-input name="LastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-  </lion-fieldset>
-  <lion-fieldset name="location" label="Location">
-    <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
-  </lion-fieldset>
-  <lion-input name="age" label="Age" .modelValue=${21}></lion-input>
-  <button @click=${ev => console.log(ev.target.parentElement.modelValue)}>
-    Log everything to Action Logger
-  </button>
-  <br />
-  <button
-    @click=${ev => console.log(ev.target.parentElement.formElements.nameGroup.modelValue)}
-  >
-    Log only Name fieldset to Action Logger
-  </button>
-</lion-fieldset>
-```
-
-## Validation
-
-You can create validators that work on a fieldset level.
-Below, we mimic a `required` validator, but on the fieldset.
-Try it by typing something in the input, then removing it.
-
-<Story name="Validation">
-  {() => {
-    const DemoValidator = class extends Validator {
-      static get validatorName() {
-        return 'DemoValidator';
-      }
-      execute(value) {
-        if (value && value.input1) {
-          return false; // el.hasError = true
-        }
-        return true;
-      }
-      static async getMessage() {
-        return '[Fieldset Error] Demo error message';
-      }
-    };
-    return html`
-      <lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
-        <lion-input name="input1" label="Label"></lion-input>
-      </lion-fieldset>
-    `;
-  }}
-</Story>
-
-```js
-const DemoValidator = class extends Validator {
-  static get validatorName() {
-    return 'DemoValidator';
-  }
-
-  execute(value) {
-    if (value && value.input1) {
-      return false;
-    }
-    return true;
-  }
-
-  static async getMessage() {
-    return '[Fieldset Error] Demo error message';
-  }
-};
-```
-
-```html
-<lion-fieldset id="someId" .validators="${[new DemoValidator()]}">
-  <lion-input name="input1" label="Label"></lion-input>
-</lion-fieldset>
-```
-
-### Validating multiple inputs in a fieldset
-
-You can have your fieldset validator take into consideration multiple fields.
-
-<Story name="Validating 2 fields">
-  {() => {
-    const IsCatsAndDogs = class extends Validator {
-      static get validatorName() {
-        return 'IsCatsAndDogs';
-      }
-      execute(value) {
-        return !(value.input1 === 'cats' && value.input2 === 'dogs');
-      }
-      static async getMessage() {
-        return '[Fieldset Error] Input 1 needs to be "cats" and Input 2 needs to be "dogs"';
-      }
-    };
-    return html`
-      <lion-fieldset .validators="${[new IsCatsAndDogs()]}">
-        <lion-input
-          label="An all time YouTube favorite"
-          name="input1"
-          help-text="cats"
-        >
-        </lion-input>
-        <lion-input
-          label="Another all time YouTube favorite"
-          name="input2"
-          help-text="dogs"
-        >
-        </lion-input>
-      </lion-fieldset>
-    `;
-  }}
-</Story>
-
-```js
-const IsCatsAndDogs = class extends Validator {
-  static get validatorName() {
-    return 'IsCatsAndDogs';
-  }
-
-  execute(value) {
-    return !(value.input1 === 'cats' && value.input2 === 'dogs');
-  }
-
-  static async getMessage() {
-    return '[Fieldset Error] Input 1 needs to be "cats" and Input 2 needs to be "dogs"';
-  }
-};
-```
-
-```html
-<lion-fieldset .validators="${[new IsCatsAndDogs()]}">
-  <lion-input
-    label="An all time YouTube favorite"
-    name="input1"
-    help-text="cats"
-  >
-  </lion-input>
-  <lion-input
-    label="Another all time YouTube favorite"
-    name="input2"
-    help-text="dogs"
-  >
-  </lion-input>
-</lion-fieldset>
-```
-
-Alternatively you can also let the fieldset validator be dependent on the error states of its child fields.
-
-Simply loop over the formElements inside your Validator's `execute` method:
-```js
-this.formElements.some(el => el.hasFeedbackFor.includes('error'));
-```
-
-### Validating multiple fieldsets
-
-You can have your fieldset validator take into accounts multiple nested fieldsets.
-
-<Story name="Validating 2 fieldsets">
-  {() => {
-    const IsCatsDogs = class extends Validator {
-      static get validatorName() {
-        return 'IsCatsAndDogs';
-      }
-      execute(value) {
-        if ((value.inner1 && value.inner1.input1 === 'cats') &&
-          (value.inner2 && value.inner2.input1 === 'dogs')
-        ) {
-          return false;
-        }
-        return true;
-      }
-      static async getMessage() {
-        return 'There is a problem with one of your fieldsets';
-      }
-    };
-    return html`
-      <lion-fieldset name="outer" .validators=${[new IsCatsDogs()]}>
-        <lion-fieldset name="inner1">
-          <label slot="label">Fieldset no. 1</label>
-          <lion-input
-            label="Write 'cats' here"
-            name="input1"
-          >
-          </lion-input>
-        </lion-fieldset>
-        <hr />
-        <lion-fieldset name="inner2">
-          <label slot="label">Fieldset no. 2</label>
-          <lion-input
-            label="Write 'dogs' here"
-            name="input1"
-          >
-          </lion-input>
-        </lion-fieldset>
-      </lion-fieldset>
-    `;
-  }}
-</Story>
-
-```js
-const IsCatsDogs = class extends Validator {
-  static get validatorName() {
-    return 'IsCatsDogs';
-  }
-
-  execute(value) {
-    if ((value.inner1 && value.inner1.input1 === 'cats') &&
-      (value.inner2 && value.inner2.input1 === 'dogs')
-    ) {
-      return false;
-    }
-    return true;
-  }
-
-  static async getMessage() {
-    return 'There is a problem with one of your fieldsets';
-  }
-};
-```
-
-```html
-<lion-fieldset name="outer" .validators="${[new IsCatsDogs()]}">
-  <lion-fieldset name="inner1">
-    <label slot="label">Fieldset no. 1</label>
-    <lion-input
-      label="Write 'cats' here"
-      name="input1"
-    >
-    </lion-input>
-  </lion-fieldset>
-  <hr />
-  <lion-fieldset name="inner2">
-    <label slot="label">Fieldset no. 2</label>
-    <lion-input
-      label="Write 'dogs' here"
-      name="input1"
-    >
-    </lion-input>
-  </lion-fieldset>
-</lion-fieldset>
-```
diff --git a/packages/form-system/stories/flow-diagrams.stories.js b/packages/form-system/stories/flow-diagrams.stories.js
deleted file mode 100644
index a168c2f69..000000000
--- a/packages/form-system/stories/flow-diagrams.stories.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { html } from '@open-wc/demoing-storybook';
-
-export default {
-  title: 'Forms/System/_internals',
-};
-
-export const standardFlow = () => html`
-  <img src=${new URL('../dev-assets/FormatMixinDiagram-1.svg', import.meta.url)} />
-`;
-
-export const unparseableFlow = () => html`
-  <img src=${new URL('../dev-assets/FormatMixinDiagram-2.svg', import.meta.url)} />
-`;
-
-export const imperativeFlow = () => html`
-  <img src=${new URL('../dev-assets/FormatMixinDiagram-3.svg', import.meta.url)} />
-`;
diff --git a/packages/form-system/stories/form-examples.stories.mdx b/packages/form-system/stories/form-examples.stories.mdx
deleted file mode 100644
index f5f26d27b..000000000
--- a/packages/form-system/stories/form-examples.stories.mdx
+++ /dev/null
@@ -1,181 +0,0 @@
-import { Story, Meta, html, Preview } from '@open-wc/demoing-storybook';
-import { Required, MaxLength, loadDefaultFeedbackMessages } from '@lion/validate';
-import '@lion/fieldset/lion-fieldset.js';
-import '@lion/input/lion-input.js';
-import '@lion/form/lion-form.js';
-
-<Meta title="Forms/Form/Examples" parameters={{ component: 'lion-form' }} />
-
-# Form Examples
-
-A form can have multiple nested fieldsets.
-
-<Preview>
-<Story name="Default">
-  {html`
-    <lion-form id="form">
-      <form>
-        <lion-fieldset label="Personal data" name="personalData">
-          <lion-fieldset label="Full Name" name="fullName">
-            <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-            <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-          </lion-fieldset>
-          <lion-fieldset label="Location" name="location">
-            <lion-input name="country" label="Country" .modelValue=${'Netherlands'}></lion-input>
-            <lion-input name="city" label="City" .modelValue=${'Amsterdam'}></lion-input>
-          </lion-fieldset>
-          <lion-input name="birthdate" label="Birthdate" .modelValue=${'23-04-1991'}></lion-input>
-        </lion-fieldset>
-        <button type="button" @click=${() => console.log(document.querySelector('#form').serializedValue)}>
-          Log to Action Logger
-        </button>
-      </form>
-    </lion-form>
-  `}
-</Story>
-</Preview>
-
-## Form Submit / Reset
-
-You can control whether a form gets submitted based on validation states.
-Same thing goes for resetting the inputs to the original state.
-
-Be sure to call `serializedValue` when a you want to submit a form.
-This value automatically filters out disabled children and makes sure the values
-that are retrieved can be transmitted over a wire. (for instance, an input-date with a modelValue
-of type `Date` will be serialized to an iso formatted string).
-
-
->  Note: Offering a reset button is a bad practice in terms of accessibility.
-This button is only used here to demonstrate the `serializeGroup()` method.
-
-<Preview>
-<Story name="Submit/reset">
-  {() => {
-    loadDefaultFeedbackMessages();
-    const submit = () => {
-      const form = document.querySelector('#form2');
-      if (!form.hasFeedbackFor.includes('error')) {
-        document.getElementById('form2_output').innerText = JSON.stringify(form.serializedValue);
-        document.querySelector('#form2').resetGroup();
-      }
-    };
-    return html`
-      <lion-form id="form2" @submit="${submit}"
-        ><form>
-          <lion-fieldset label="Name" name="name">
-            <lion-input
-              name="firstName"
-              label="First Name"
-              .validators=${[new Required(), new MaxLength(15)]}
-            >
-            </lion-input>
-            <lion-input
-              name="lastName"
-              label="Last Name"
-              .validators=${[new Required(), new MaxLength(15)]}
-            >
-            </lion-input>
-            <lion-input
-              name="address"
-              disabled
-              label="Address"
-              .validators=${[new MaxLength(15)]}
-            >
-            </lion-input>
-          </lion-fieldset>
-          <button type="submit">Submit & Reset (if successfully submitted)</button>
-          <button type="button" @click=${() => {
-            document.querySelector('#form2').resetGroup();
-            const form = document.querySelector('#form2');
-            document.getElementById('form2_output').innerText = JSON.stringify(form.serializedValue);
-          }}>
-            reset
-          </button>
-          <pre id="form2_output">
-          </pre>
-        </form></lion-form
-      >
-    `;
-  }}
-</Story>
-</Preview>
-
-# clearGroup of form
-
-To clear the values of the values of the fields use clearGroup().
-
-<Preview>
-<Story name="clearGroup">
-  {() => {
-    return html`
-      <lion-form id="form3" 
-        ><form>
-          <lion-fieldset label="Name" name="name">
-            <lion-input
-              name="firstName"
-              label="First Name"
-              .modelValue=${'Foo'}
-            >
-            </lion-input>
-            <lion-input
-              name="lastName"
-              label="Last Name"
-            >
-            </lion-input>
-         
-          </lion-fieldset>
-          <button type="button" @click=${() => {
-            document.querySelector('#form3').clearGroup();
-            const form = document.querySelector('#form3');
-            document.getElementById('form3_output').innerText = JSON.stringify(form.serializedValue);
-          }}>
-            Clear
-          </button>
-          <pre id="form3_output">
-          </pre>
-        </form></lion-form
-      >
-    `;
-  }}
-</Story>
-</Preview>
-
-
-
-
-## Serialize in a multistep form
-
-In a multistep form (consisting of multiple forms) it might be handy to wrap the serialized output
-with the name of the form.
-
-<Preview>
-  <Story name="Multistep">
-    {() => {
-      loadDefaultFeedbackMessages();
-      const serializeWithName = (formId, outputId) => {
-        const form = document.getElementById(formId);
-        if (!form.hasFeedbackFor.includes('error')) {
-          const output = { [form.name]: form.serializedValue };
-          document.getElementById(outputId).innerText = JSON.stringify(output);
-        }
-      };
-      return html`
-        <lion-form name="step1FormName" id="form3"><form>
-          <lion-input name="step1InputName" label="Step 1 Input"></lion-input>
-          <button @click="${() => serializeWithName('form3', 'form3_output')}">
-            serialize step 1 with name
-          </button>
-          <pre id="form3_output"></pre>
-        </form></lion-form>
-        <lion-form name="step2FormName" id="form4"><form>
-          <lion-input name="step2InputName" label="Step 2 Input"></lion-input>
-          <button @click="${() => serializeWithName('form4', 'form4_output')}">
-            serialize step 2 with name
-          </button>
-          <pre id="form4_output"></pre>
-        </form></lion-form>
-      `;
-    }}
-  </Story>
-</Preview>
diff --git a/packages/form/README.md b/packages/form/README.md
index 3784fa54b..753808321 100644
--- a/packages/form/README.md
+++ b/packages/form/README.md
@@ -1,11 +1,45 @@
 # Form
 
 `lion-form` is a webcomponent that enhances the functionality of the native `form` component.
+It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview--page).
+
+```js script
+import { html } from 'lit-html';
+import '@lion/input/lion-input.js';
+import './lion-form.js';
+
+export default {
+  title: 'Forms/Form/Overview',
+};
+```
+
+```js story
+export const main = () => html`
+  <lion-form id="form">
+    <form>
+      <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
+      <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
+    </form>
+  </lion-form>
+`;
+```
 
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-form-overview--page) for a live demo and documentation
 
+## Features
+
+- Data synchronization with models
+- Easy retrieval of form data based on field names
+- Advanced validation possibilities
+- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
+- Registration mechanism for [form controls](?path=/docs/forms-system-overview--page)
+- Accessible out of the box
+
+For more information about fields that are designed for lion-form, please read
+[Forms](?path=/docs/forms-system-overview--page).
+
 ## How to use
 
 ### Installation
@@ -29,3 +63,5 @@ import '@lion/form/lion-form.js';
   </form>
 </lion-form>
 ```
+
+For more examples please look at [Form Examples](?path=/docs/forms-form-examples--default-story).
diff --git a/packages/form/stories/overview.stories.mdx b/packages/form/stories/overview.stories.mdx
deleted file mode 100644
index 8e349a9f2..000000000
--- a/packages/form/stories/overview.stories.mdx
+++ /dev/null
@@ -1,33 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-<Meta title="Forms/Form/Overview" />
-
-# Form
-
-`lion-form` is a webcomponent that enhances the functionality of the native `form` component.
-It is designed to interact with (instances of) the [form controls](?path=/docs/forms-system-overview--page).
-
-```html
-<lion-form id="form">
-  <form>
-    <lion-input name="firstName" label="First Name" .modelValue=${'Foo'}></lion-input>
-    <lion-input name="lastName" label="Last Name" .modelValue=${'Bar'}></lion-input>
-  </form>
-</lion-form>
-```
-
-## Features
-
-- Data synchronization with models
-- Easy retrieval of form data based on field names
-- Advanced validation possibilities
-- Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
-- Registration mechanism for [form controls](?path=/docs/forms-system-overview--page)
-- Accessible out of the box
-
-For more information about fields that are designed for lion-form, please read
-[Forms](?path=/docs/forms-system-overview--page).
-
-## Examples
-
-For examples please look at [Form Examples](?path=/docs/forms-form-examples--default-story).
diff --git a/packages/helpers/README.md b/packages/helpers/README.md
index b5a2f4cf9..06d1817fc 100644
--- a/packages/helpers/README.md
+++ b/packages/helpers/README.md
@@ -1,5 +1,13 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Helpers
 
+```js script
+export default {
+  title: 'Helpers/Intro',
+};
+```
+
 A helpers package that contains several helpers that are used inside lion but can be used outside as well.
 
 These helpers are considered developer tools, not actual things to use in production.
@@ -9,6 +17,12 @@ Therefore, they may not have the same quality standards as our other packages.
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/helpers) for a live demo and API documentation
 
+## Packages
+
+| Package                                                                        | Version                                                                                                                  | Description      |
+| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------ | ---------------- |
+| [sb-action-logger](?path=/docs/helpers-storybook-action-logger--default-story) | [![sb-action-logger](https://img.shields.io/npm/v/sb-action-logger.svg)](https://www.npmjs.com/package/sb-action-logger) | sb-action-logger |
+
 ## Installation
 
 ```bash
diff --git a/packages/helpers/sb-action-logger/README.md b/packages/helpers/sb-action-logger/README.md
index 758a859f7..4940adb06 100644
--- a/packages/helpers/sb-action-logger/README.md
+++ b/packages/helpers/sb-action-logger/README.md
@@ -1,6 +1,63 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Storybook Action Logger
 
-A visual element to show action logs in Storybook demos `sb-action-logger`.
+A visual element to show action logs in Storybook demos `sb-action-logger`
+
+```js script
+import { html } from 'lit-html';
+
+import '../sb-action-logger.js';
+
+export default {
+  title: 'Helpers/Storybook Action Logger',
+  parameters: {
+    component: 'sb-action-logger',
+    options: { selectedPanel: 'storybookjs/knobs/panel' },
+  },
+};
+```
+
+```js preview-story
+export const main = () => {
+  const uid = Math.random().toString(36).substr(2, 10);
+  return html`
+    <div>To log: <code>Hello, World!</code></div>
+    <button
+      @click=${() => {
+        document.getElementById(`logger-${uid}`).log('Hello, World!');
+      }}
+    >
+      Click this button
+    </button>
+    <div>Or to log: <code>What's up, Planet!</code></div>
+    <button
+      @click=${() => {
+        document.getElementById(`logger-${uid}`).log(`What's up, Planet!`);
+      }}
+    >
+      Click this button
+    </button>
+    <sb-action-logger id="logger-${uid}"></sb-action-logger>
+  `;
+};
+```
+
+You need some reference to your logger. Above example shows this by using a unique ID.
+
+```js
+const uid = Math.random().toString(36).substr(2, 10);
+```
+
+This connects the logger element to the trigger.
+
+```html
+<div>To log: <code>Hello, World!</code></div>
+<button
+  @click=${() => document.getElementById('logger-${uid}').log('Hello, World!')}
+>Click this button</button>
+<sb-action-logger id="logger-${uid}"></sb-action-logger>
+```
 
 **This is a demonstrative tool**, not a debugging tool (although it may help initially).
 If you try logging complex values such as arrays, objects or promises,
@@ -10,24 +67,113 @@ you should expect to get only the string interpretation as the output in this lo
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/helpers-storybook-action-logger) for a live demo and API documentation
 
-## Installation
+## Features:
+
+- A public method `log` to log things to the action logger.
+- Overridable `title` property.
+- Clear button to clear logs
+- A counter to count the total amount of logs
+- Stacks consecutive duplicate logs and shows a counter
+- `simple` property/attribute to only show a single log
+
+## How to use
+
+### Installation
 
 ```bash
-npm i @lion/helpers
+npm i sb-action-logger
 ```
 
-## Usage
+## API
+
+## Variations
+
+### Simple mode
+
+Simple mode essentially means there is only ever 1 log.
+Duplicates are not counted or stacked, but you will still see the visual cue.
+
+```js preview-story
+export const simpleMode = () => {
+  const uid = Math.random().toString(36).substr(2, 10);
+  return html`
+    <div>To log: <code>Hello, World!</code></div>
+    <button
+      @click=${() => {
+        document.getElementById(`logger-${uid}`).log('Hello, World!');
+      }}
+    >
+      Click this button
+    </button>
+    <div>Or to log: <code>What's up, Planet!</code></div>
+    <button
+      @click=${() => {
+        document.getElementById(`logger-${uid}`).log(`What's up, Planet!`);
+      }}
+    >
+      Click this button
+    </button>
+    <sb-action-logger simple id="logger-${uid}"></sb-action-logger>
+  `;
+};
+```
 
 ```html
-<script type="module">
-  import '@lion/helpers/sb-action-logger/sb-action-logger.js';
-</script>
-
-<sb-action-logger></sb-action-logger>
+<sb-action-logger simple></sb-action-logger>
 ```
 
-Then, with the sb-action-logger instance selected, call the `log` method on it.
+### Custom Title
 
-```js
-myActionLoggerInstance.log('Hello, World!');
+You can customize the action logger title with the `.title` property.
+
+```js preview-story
+export const customTitle = () => {
+  const uid = Math.random().toString(36).substr(2, 10);
+  return html`
+    <button @click=${() => document.getElementById(`logger-${uid}`).log('Hello, World!')}>
+      Log
+    </button>
+    <sb-action-logger id="logger-${uid}" .title=${'Hello World'}></sb-action-logger>
+  `;
+};
 ```
+
+```html
+<sb-action-logger .title=${'Hello World'}></sb-action-logger>
+```
+
+## Rationale
+
+This component was created due to a need for a nice visual action logger in Storybook Docs mode.
+
+In docs mode, you do not have access to the action logger addon component, and it is nice to be able to show actions inline in your demos and documentation.
+
+### Opinionated
+
+I added quite a bit of styling on this component to make it look decent.
+There are a bunch of styles that you can easily override to make it fit your design system which I believe should be enough in most cases.
+If you need more control you can always:
+
+- Override the host styles, there's a few custom CSS props that you can override as well.
+- Extend the component and apply your overrides
+- Open an issue if you believe it would be good to make something more flexible / configurable
+
+Maybe in the future I will abstract this component to a more generic (ugly) one with no styles, so it's more friendly as a shared component.
+
+### Plugin
+
+If you use an action logger inside your Story in Storybook, you will also see it in your canvas, and this may not be your intention.
+
+One idea is to simplify the usage further by making this a Storybook (docs-)plugin or decorator or whatever.
+It would be cool if someone can simply enable an action logger option on a particular Story inside their .mdx,
+and then actions are automatically logged to the visual logger below it.
+Would need to figure out how to catch the action and pass it to the visual logger element.
+
+Isn't investigated yet on the how, but that is the rough idea.
+
+## Future
+
+New planned features can be found in the test folder where they are specified as skipped tests.
+If the feature you'd like is not in the tests, feel free to make an issue so we can add it.
+
+See our CONTRIBUTING.md for more guidelines on how to contribute.
diff --git a/packages/helpers/sb-action-logger/stories/index.stories.mdx b/packages/helpers/sb-action-logger/stories/index.stories.mdx
deleted file mode 100644
index e72421293..000000000
--- a/packages/helpers/sb-action-logger/stories/index.stories.mdx
+++ /dev/null
@@ -1,167 +0,0 @@
-import {
-  Story,
-  Preview,
-  Meta,
-  Props,
-  html,
-} from '@open-wc/demoing-storybook';
-
-import '../../sb-action-logger.js';
-
-<Meta
-  title="Helpers/Storybook Action Logger"
-  parameters={{
-    component: "sb-action-logger",
-    options: { selectedPanel: "storybookjs/knobs/panel" }
-  }}
-/>
-
-# Storybook Action Logger
-
-A visual element to show action logs in Storybook demos `sb-action-logger`
-
-<Story name="Default">
-  {() => {
-    const uid = Math.random().toString(36).substr(2, 10);
-    return html`
-      <div>To log: <code>Hello, World!</code></div>
-      <button
-        @click=${() => {
-          document.getElementById(`logger-${uid}`).log('Hello, World!');
-        }}
-      >Click this button</button>
-      <div>Or to log: <code>What's up, Planet!</code></div>
-      <button
-        @click=${() => {
-          document.getElementById(`logger-${uid}`).log(`What's up, Planet!`);
-        }}
-      >Click this button</button>
-      <sb-action-logger id="logger-${uid}"></sb-action-logger>
-    `;
-  }}
-</Story>
-
-You need some reference to your logger. Above example shows this by using a unique ID.
-
-```js
-const uid = Math.random().toString(36).substr(2, 10);
-```
-
-This connects the logger element to the trigger.
-
-```html
-<div>To log: <code>Hello, World!</code></div>
-<button
-  @click=${() => document.getElementById('logger-${uid}').log('Hello, World!')}
->Click this button</button>
-<sb-action-logger id="logger-${uid}"></sb-action-logger>
-```
-
-## Features:
-
-- A public method `log` to log things to the action logger.
-- Overridable `title` property.
-- Clear button to clear logs
-- A counter to count the total amount of logs
-- Stacks consecutive duplicate logs and shows a counter
-- `simple` property/attribute to only show a single log
-
-## How to use
-
-### Installation
-
-```bash
-npm i sb-action-logger
-```
-
-## API
-
-<Props of="sb-action-logger" />
-
-## Variations
-
-### Simple mode
-
-Simple mode essentially means there is only ever 1 log.
-Duplicates are not counted or stacked, but you will still see the visual cue.
-
-<Story name="Simple mode">
-  {() => {
-    const uid = Math.random().toString(36).substr(2, 10);
-    return html`
-      <div>To log: <code>Hello, World!</code></div>
-      <button
-        @click=${() => {
-          document.getElementById(`logger-${uid}`).log('Hello, World!');
-        }}
-      >Click this button</button>
-      <div>Or to log: <code>What's up, Planet!</code></div>
-      <button
-        @click=${() => {
-          document.getElementById(`logger-${uid}`).log(`What's up, Planet!`);
-        }}
-      >Click this button</button>
-      <sb-action-logger simple id="logger-${uid}"></sb-action-logger>
-    `;
-  }}
-</Story>
-
-```html
-<sb-action-logger simple></sb-action-logger>
-```
-
-### Custom Title
-
-You can customize the action logger title with the `.title` property.
-
-<Story name="Custom Title">
-  {() => {
-    const uid = Math.random().toString(36).substr(2, 10);
-    return html`
-      <button
-        @click=${() => document.getElementById(`logger-${uid}`).log('Hello, World!')}
-      >Log</button>
-      <sb-action-logger id="logger-${uid}" .title=${'Hello World'}></sb-action-logger>
-    `;
-  }}
-</Story>
-
-```html
-<sb-action-logger .title=${'Hello World'}></sb-action-logger>
-```
-
-## Rationale
-
-This component was created due to a need for a nice visual action logger in Storybook Docs mode.
-
-In docs mode, you do not have access to the action logger addon component, and it is nice to be able to show actions inline in your demos and documentation.
-
-### Opinionated
-
-I added quite a bit of styling on this component to make it look decent.
-There are a bunch of styles that you can easily override to make it fit your design system which I believe should be enough in most cases.
-If you need more control you can always:
-
-- Override the host styles, there's a few custom CSS props that you can override as well.
-- Extend the component and apply your overrides
-- Open an issue if you believe it would be good to make something more flexible / configurable
-
-Maybe in the future I will abstract this component to a more generic (ugly) one with no styles, so it's more friendly as a shared component.
-
-### Plugin
-
-If you use an action logger inside your Story in Storybook, you will also see it in your canvas, and this may not be your intention.
-
-One idea is to simplify the usage further by making this a Storybook (docs-)plugin or decorator or whatever.
-It would be cool if someone can simply enable an action logger option on a particular Story inside their .mdx,
-and then actions are automatically logged to the visual logger below it.
-Would need to figure out how to catch the action and pass it to the visual logger element.
-
-Isn't investigated yet on the how, but that is the rough idea.
-
-## Future
-
-New planned features can be found in the test folder where they are specified as skipped tests.
-If the feature you'd like is not in the tests, feel free to make an issue so we can add it.
-
-See our CONTRIBUTING.md for more guidelines on how to contribute.
diff --git a/packages/helpers/stories/helpers-intro.stories.mdx b/packages/helpers/stories/helpers-intro.stories.mdx
deleted file mode 100644
index 07d573353..000000000
--- a/packages/helpers/stories/helpers-intro.stories.mdx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { Meta } from '@open-wc/demoing-storybook';
-
-<Meta title="Helpers/Intro" />
-
-# Helpers
-
-Features that aid in the development process of web components.
-
-## Packages
-
-| Package                                                                        | Version                                                                                                                              | Description                                            |
-| ------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
-| [sb-action-logger](?path=/docs/helpers-storybook-action-logger--default-story) | [![sb-action-logger](https://img.shields.io/npm/v/sb-action-logger.svg)](https://www.npmjs.com/package/sb-action-logger)             | sb-action-logger                                       |
diff --git a/packages/icon/README.md b/packages/icon/README.md
index 885405a94..7fb1f8295 100644
--- a/packages/icon/README.md
+++ b/packages/icon/README.md
@@ -2,6 +2,39 @@
 
 A web component for displaying icons.
 
+```js script
+import { html } from 'lit-html';
+import { icons } from './index.js';
+import './docs/icons/iconset-bugs.js';
+import './docs/icons/iconset-misc.js';
+import * as spaceSet from './docs/icons/iconset-space.js';
+
+import './lion-icon.js';
+
+export default {
+  title: 'Icons/Icon',
+};
+
+icons.addIconResolver('lion', (iconset, name) => {
+  switch (iconset) {
+    case 'bugs':
+      return import('./docs/icons/iconset-bugs.js').then(module => module[name]);
+    case 'space':
+      return import('./docs/icons/iconset-space.js').then(module => module[name]);
+    case 'misc':
+      return import('./docs/icons/iconset-misc.js').then(module => module[name]);
+    default:
+      throw new Error(`Unknown iconset ${iconset}`);
+  }
+});
+```
+
+```js preview-story
+export const main = () => html`
+  <lion-icon icon-id="lion:space:alienSpaceship" style="width: 50px; height: 50px;"></lion-icon>
+`;
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/icon-system-icon) for a live demo and documentation
@@ -15,15 +48,76 @@ npm i --save @lion/icon
 ```
 
 ```js
+import { LionIcon } from '@lion/icon';
+// or
 import '@lion/icon/lion-icon.js';
 ```
 
-### Example
+### Icon sets
 
-```js
-import './somewhere/my-iconset.js';
+Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
+See the [system documentation](?path=/docs/icons-system--page) to learn more about icon sets.
+
+```js preview-story
+export const iconSets = () => html`
+  ${Object.keys(spaceSet).map(
+    name => html`
+      <style>
+        .demo-icon__container {
+          display: inline-flex;
+          position: relative;
+          flex-grow: 1;
+          flex-direction: column;
+          align-items: center;
+          width: 80px;
+          height: 80px;
+          padding: 4px;
+        }
+        .demo-icon__name {
+          font-size: 10px;
+        }
+      </style>
+      <div class="demo-icon__container" title="lion:space:${name}">
+        <lion-icon icon-id="lion:space:${name}" aria-label="icon: ${name}"></lion-icon>
+        <span class="demo-icon__name">${name}</span>
+      </div>
+    `,
+  )}
+`;
 ```
 
-```html
-<lion-icon icon-id="somewhere:myIconset:foo"></lion-icon>
+If for some reason you don't want to lazy load icons, you can still import and use them
+synchronously.
+
+### Accessibility
+
+It is recommended to add an `aria-label` to provide information to visually impaired users:
+
+A `lion-icon` without an `aria-label` attribute will be automatically given an `aria-hidden` attribute.
+
+```js preview-story
+export const accessibleLabel = () => html`
+  <lion-icon icon-id="lion:misc:arrowLeft" aria-label="Pointing left"></lion-icon>
+`;
 ```
+
+### Styling
+
+By default, a `lion-icon` will be `1em` × `1em` (the current line-height).
+
+`lion-icon` uses SVGs and may be styled with CSS, including using CSS properties such as `fill`:
+
+```js preview-story
+export const Styling = () => html`
+  <style>
+    .demo-icon {
+      width: 160px;
+      height: 160px;
+      fill: blue;
+    }
+  </style>
+  <lion-icon icon-id="lion:bugs:bug02" aria-label="Bug" class="demo-icon"></lion-icon>
+`;
+```
+
+See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS" target="_blank">SVG and CSS</a> on MDN web docs for more information.
diff --git a/packages/icon/stories/icons/bugs/bug01.svg.js b/packages/icon/docs/icons/bugs/bug01.svg.js
similarity index 100%
rename from packages/icon/stories/icons/bugs/bug01.svg.js
rename to packages/icon/docs/icons/bugs/bug01.svg.js
diff --git a/packages/icon/stories/icons/bugs/bug02.svg.js b/packages/icon/docs/icons/bugs/bug02.svg.js
similarity index 100%
rename from packages/icon/stories/icons/bugs/bug02.svg.js
rename to packages/icon/docs/icons/bugs/bug02.svg.js
diff --git a/packages/icon/stories/icons/bugs/bug05.svg.js b/packages/icon/docs/icons/bugs/bug05.svg.js
similarity index 100%
rename from packages/icon/stories/icons/bugs/bug05.svg.js
rename to packages/icon/docs/icons/bugs/bug05.svg.js
diff --git a/packages/icon/stories/icons/bugs/bug06.svg.js b/packages/icon/docs/icons/bugs/bug06.svg.js
similarity index 100%
rename from packages/icon/stories/icons/bugs/bug06.svg.js
rename to packages/icon/docs/icons/bugs/bug06.svg.js
diff --git a/packages/icon/stories/icons/bugs/bug08.svg.js b/packages/icon/docs/icons/bugs/bug08.svg.js
similarity index 100%
rename from packages/icon/stories/icons/bugs/bug08.svg.js
rename to packages/icon/docs/icons/bugs/bug08.svg.js
diff --git a/packages/icon/stories/icons/bugs/bug12.svg.js b/packages/icon/docs/icons/bugs/bug12.svg.js
similarity index 100%
rename from packages/icon/stories/icons/bugs/bug12.svg.js
rename to packages/icon/docs/icons/bugs/bug12.svg.js
diff --git a/packages/icon/stories/icons/bugs/bug19.svg.js b/packages/icon/docs/icons/bugs/bug19.svg.js
similarity index 100%
rename from packages/icon/stories/icons/bugs/bug19.svg.js
rename to packages/icon/docs/icons/bugs/bug19.svg.js
diff --git a/packages/icon/stories/icons/bugs/bug23.svg.js b/packages/icon/docs/icons/bugs/bug23.svg.js
similarity index 100%
rename from packages/icon/stories/icons/bugs/bug23.svg.js
rename to packages/icon/docs/icons/bugs/bug23.svg.js
diff --git a/packages/icon/stories/icons/bugs/bug24.svg.js b/packages/icon/docs/icons/bugs/bug24.svg.js
similarity index 100%
rename from packages/icon/stories/icons/bugs/bug24.svg.js
rename to packages/icon/docs/icons/bugs/bug24.svg.js
diff --git a/packages/icon/stories/icons/iconset-bugs.js b/packages/icon/docs/icons/iconset-bugs.js
similarity index 100%
rename from packages/icon/stories/icons/iconset-bugs.js
rename to packages/icon/docs/icons/iconset-bugs.js
diff --git a/packages/icon/stories/icons/iconset-misc.js b/packages/icon/docs/icons/iconset-misc.js
similarity index 100%
rename from packages/icon/stories/icons/iconset-misc.js
rename to packages/icon/docs/icons/iconset-misc.js
diff --git a/packages/icon/stories/icons/iconset-space.js b/packages/icon/docs/icons/iconset-space.js
similarity index 100%
rename from packages/icon/stories/icons/iconset-space.js
rename to packages/icon/docs/icons/iconset-space.js
diff --git a/packages/icon/stories/icons/misc/arrowLeft.svg.js b/packages/icon/docs/icons/misc/arrowLeft.svg.js
similarity index 100%
rename from packages/icon/stories/icons/misc/arrowLeft.svg.js
rename to packages/icon/docs/icons/misc/arrowLeft.svg.js
diff --git a/packages/icon/stories/icons/space/aliens-spaceship.svg.js b/packages/icon/docs/icons/space/aliens-spaceship.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/aliens-spaceship.svg.js
rename to packages/icon/docs/icons/space/aliens-spaceship.svg.js
diff --git a/packages/icon/stories/icons/space/meteor.svg.js b/packages/icon/docs/icons/space/meteor.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/meteor.svg.js
rename to packages/icon/docs/icons/space/meteor.svg.js
diff --git a/packages/icon/stories/icons/space/moon-flag.svg.js b/packages/icon/docs/icons/space/moon-flag.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/moon-flag.svg.js
rename to packages/icon/docs/icons/space/moon-flag.svg.js
diff --git a/packages/icon/stories/icons/space/moon.svg.js b/packages/icon/docs/icons/space/moon.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/moon.svg.js
rename to packages/icon/docs/icons/space/moon.svg.js
diff --git a/packages/icon/stories/icons/space/night.svg.js b/packages/icon/docs/icons/space/night.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/night.svg.js
rename to packages/icon/docs/icons/space/night.svg.js
diff --git a/packages/icon/stories/icons/space/orbit.svg.js b/packages/icon/docs/icons/space/orbit.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/orbit.svg.js
rename to packages/icon/docs/icons/space/orbit.svg.js
diff --git a/packages/icon/stories/icons/space/planet.svg.js b/packages/icon/docs/icons/space/planet.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/planet.svg.js
rename to packages/icon/docs/icons/space/planet.svg.js
diff --git a/packages/icon/stories/icons/space/robot.svg.js b/packages/icon/docs/icons/space/robot.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/robot.svg.js
rename to packages/icon/docs/icons/space/robot.svg.js
diff --git a/packages/icon/stories/icons/space/rocket.svg.js b/packages/icon/docs/icons/space/rocket.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/rocket.svg.js
rename to packages/icon/docs/icons/space/rocket.svg.js
diff --git a/packages/icon/stories/icons/space/satellite.svg.js b/packages/icon/docs/icons/space/satellite.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/satellite.svg.js
rename to packages/icon/docs/icons/space/satellite.svg.js
diff --git a/packages/icon/stories/icons/space/signal.svg.js b/packages/icon/docs/icons/space/signal.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/signal.svg.js
rename to packages/icon/docs/icons/space/signal.svg.js
diff --git a/packages/icon/stories/icons/space/space-helmet.svg.js b/packages/icon/docs/icons/space/space-helmet.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/space-helmet.svg.js
rename to packages/icon/docs/icons/space/space-helmet.svg.js
diff --git a/packages/icon/stories/icons/space/sun.svg.js b/packages/icon/docs/icons/space/sun.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/sun.svg.js
rename to packages/icon/docs/icons/space/sun.svg.js
diff --git a/packages/icon/stories/icons/space/telescope.svg.js b/packages/icon/docs/icons/space/telescope.svg.js
similarity index 100%
rename from packages/icon/stories/icons/space/telescope.svg.js
rename to packages/icon/docs/icons/space/telescope.svg.js
diff --git a/packages/icon/stories/system.stories.mdx b/packages/icon/docs/system.md
similarity index 94%
rename from packages/icon/stories/system.stories.mdx
rename to packages/icon/docs/system.md
index 9705b552c..e640f8c70 100644
--- a/packages/icon/stories/system.stories.mdx
+++ b/packages/icon/docs/system.md
@@ -1,12 +1,11 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import * as bugs from './icons/iconset-bugs.js';
-import '../lion-icon.js';
-import './icon-resolvers.js';
-
-<Meta title="Icons/System" />
-
 # Icon system
 
+```js script
+export default {
+  title: 'Icons/System',
+};
+```
+
 The icon system provides a way of defining icon sets which are lazily loaded on demand when
 icons are rendered on the page. This way icon imports do not block the initial render of your
 application, and you don't need to worry about carefully coordinating the dynamic imports of your icons.
@@ -16,7 +15,7 @@ application, and you don't need to worry about carefully coordinating the dynami
 For security reasons, icons are defined using lit-html templates to guarantee XSS safety:
 
 ```js
-import html from 'lit-html';
+import { html } from 'lit-html';
 
 export default html`
   <svg focusable="false" ...>...</svg>
diff --git a/packages/icon/stories/icon-resolvers.js b/packages/icon/stories/icon-resolvers.js
deleted file mode 100644
index ca6267d84..000000000
--- a/packages/icon/stories/icon-resolvers.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import { icons } from '../index.js';
-
-icons.addIconResolver('lion', (iconset, name) => {
-  switch (iconset) {
-    case 'bugs':
-      return import('./icons/iconset-bugs.js').then(module => module[name]);
-    case 'space':
-      return import('./icons/iconset-space.js').then(module => module[name]);
-    case 'misc':
-      return import('./icons/iconset-misc.js').then(module => module[name]);
-    default:
-      throw new Error(`Unknown iconset ${iconset}`);
-  }
-});
diff --git a/packages/icon/stories/icon.stories.mdx b/packages/icon/stories/icon.stories.mdx
deleted file mode 100644
index 7bb4b85e6..000000000
--- a/packages/icon/stories/icon.stories.mdx
+++ /dev/null
@@ -1,132 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import './icons/iconset-bugs.js';
-import './icons/iconset-misc.js';
-import * as spaceSet from './icons/iconset-space.js';
-
-import '../lion-icon.js';
-import './icon-resolvers.js';
-
-<Meta title="Icons/Icon" />
-
-# Icon
-
-A web component for displaying icons.
-
-<Story name="Default">
-  {html`
-    <style>
-      lion-icon {
-        width: 50px;
-        height: 50px;
-      }
-    </style>
-    <lion-icon icon-id="lion:space:alienSpaceship"></lion-icon>
-  `}
-</Story>
-
-```html
-<lion-icon icon-id="lion:space:alienSpaceship"></lion-icon>
-```
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/icon
-```
-
-```js
-import '@lion/icon/lion-icon.js';
-```
-
-### Icon sets
-
-Icons are displayed using icon sets. These are collections of icons, lazily loaded on demand for performance.
-See the system documentation to learn more about icon sets.
-
-<Story name="Icon sets">
-  {html`
-    ${Object.keys(spaceSet).map(
-      name => html`
-      <style>
-        .demo-icon__container {
-          display: inline-flex;
-          position: relative;
-          flex-grow: 1;
-          flex-direction: column;
-          align-items: center;
-          width: 80px;
-          height: 80px;
-          padding: 4px;
-        }
-        .demo-icon__name {
-          font-size: 10px;
-        }
-      </style>
-      <div class="demo-icon__container" title="lion:space:${name}">
-        <lion-icon
-          icon-id="lion:space:${name}"
-          aria-label="icon: ${name}"
-        ></lion-icon>
-        <span class="demo-icon__name">${name}</span>
-      </div>
-      `
-    )}
-  `}
-</Story>
-
-```html
-<lion-icon icon-id="lion:space:alienSpaceship"></lion-icon>
-```
-
-If for some reason you don't want to lazy load icons, you can still import and use them
-synchronously.
-
-### Accessibility
-
-It is recommended to add an `aria-label` to provide information to visually impaired users:
-
-A `lion-icon` without an `aria-label` attribute will be automatically given an `aria-hidden` attribute.
-
-<Story name="Accessible label">
-  {html`
-    <lion-icon icon-id="lion:misc:arrowLeft" aria-label="Pointing left"></lion-icon>
-  `}
-</Story>
-
-```html
-<lion-icon icon-id="lion:misc:arrowLeft" aria-label="Pointing left"></lion-icon>
-```
-
-### Styling
-
-By default, a `lion-icon` will be `1em` × `1em` (the current line-height).
-
-`lion-icon` uses SVGs and may be styled with CSS, including using CSS properties such as `fill`:
-
-<Story name="Styling">
-  {html`
-    <style>
-      .demo-icon {
-        width: 160px;
-        height: 160px;
-        fill: blue;
-      }
-    </style>
-    <lion-icon icon-id="lion:bugs:bug02" aria-label="Bug" class="demo-icon"></lion-icon>
-  `}
-</Story>
-
-```html
-<style>
-  .demo-icon {
-    width: 160px;
-    height: 160px;
-    fill: blue;
-  }
-</style>
-<lion-icon icon-id="lion:bugs:bug02" aria-label="Bug" class="demo-icon"></lion-icon>
-```
-
-See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/SVG_and_CSS" target="_blank">SVG and CSS</a> on MDN web docs for more information.
diff --git a/packages/input-amount/README.md b/packages/input-amount/README.md
index fda6092e0..935b6e995 100644
--- a/packages/input-amount/README.md
+++ b/packages/input-amount/README.md
@@ -2,10 +2,50 @@
 
 `lion-input-amount` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an amount.
 
+For formatting, we use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank">Intl NumberFormat</a> with some overrides.
+
+For parsing user input, we provide our own parser that takes into account a number of heuristics, locale and ignores invalid characters.
+Valid characters are digits and separators. Formatting happens on-blur.
+
+If there are no valid characters in the input whatsoever, it will provide an error feedback.
+
+```js script
+import { html } from 'lit-html';
+import { loadDefaultFeedbackMessages } from '@lion/validate';
+
+import './lion-input-amount.js';
+
+export default {
+  title: 'Forms/Input Amount',
+};
+
+loadDefaultFeedbackMessages();
+```
+
+```js preview-story
+export const main = () => {
+  return html` <lion-input-amount name="amount" currency="USD"></lion-input-amount> `;
+};
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-amount--default-story) for a live demo and API documentation
 
+## Features
+
+- Based on [lion-input](?path=/docs/forms-system-overview--page)
+- Makes use of [formatNumber](?path=/docs/localize-numbers) for formatting and parsing.
+- Option to show currency as a suffix
+- Option to override locale to change the formatting and parsing
+- Option to provide additional format options overrides
+- Default label in different languages
+- Can make use of number specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
+  - IsNumber (default)
+  - MinNumber
+  - MaxNumber
+  - MinMaxNumber
+
 ## How to use
 
 ### Installation
@@ -15,11 +55,99 @@ npm i --save @lion/input-amount
 ```
 
 ```js
+import { LionInputAmount } from '@lion/input-amount';
+// or
 import '@lion/input-amount/lion-input-amount.js';
 ```
 
-### Example
+## Examples
 
-```html
-<lion-input-amount name="amount" currency="USD"></lion-input-amount>
+### Negative Number
+
+It will accept negative numbers with a minus symbol.
+
+```js preview-story
+export const negativeNumber = () => html`
+  <lion-input-amount label="Amount" .modelValue=${-123456.78}></lion-input-amount>
+`;
 ```
+
+### Set currency suffix
+
+You can optionally set a currency suffix with the `currency` attribute.
+
+```js preview-story
+export const currencySuffix = () => html`
+  <lion-input-amount label="Price" currency="USD" .modelValue=${123456.78}></lion-input-amount>
+`;
+```
+
+### Force locale
+
+Locale can be forced for a specific `lion-input-amount`. It will format the amount according to this locale.
+
+```js preview-story
+export const forceLocale = () => html`
+  <lion-input-amount
+    label="Price"
+    currency="JOD"
+    .formatOptions=${{ locale: 'nl-NL' }}
+    .modelValue=${123456.78}
+  ></lion-input-amount>
+`;
+```
+
+> The separators are now flipped due to Dutch locale. On top of that, due to JOD currency, the minimum amount of decimals is 3 by default for this currency.
+
+### Faulty prefilled
+
+This example will show the error message by prefilling it with a faulty `modelValue`.
+
+> If there is 1 or more digit in the input, it will ignore invalid characters instead of showing an error feedback message.
+
+```js preview-story
+export const faultyPrefilled = () => html`
+  <lion-input-amount
+    label="Amount"
+    help-text="Faulty prefilled input will cause error feedback"
+    .modelValue=${'foo'}
+  ></lion-input-amount>
+`;
+```
+
+### Modifying the amount of decimals
+
+You can override certain formatting options similar to how you would do this when using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank">Intl NumberFormat</a>.
+This example shows formatting to whole numbers.
+
+```js preview-story
+export const noDecimals = () => html`
+  <lion-input-amount
+    label="Amount"
+    help-text="Prefilled and formatted"
+    .formatOptions=${{
+      minimumFractionDigits: 0,
+      maximumFractionDigits: 0,
+    }}
+    .modelValue=${20}
+  >
+  </lion-input-amount>
+`;
+```
+
+### Paste behavior
+
+For copy pasting numbers into the input-amount, there is slightly different parsing behavior.
+
+Normally, when it receives an input with only 1 separator character, we check the locale to determine whether this character is a thousand separator, or a decimal separator.
+When a user pastes the input from a different source, we find this approach (locale-based) quite unreliable, because it may have been copied from somewhere with a different locale.
+Therefore, we use the heuristics based method to parse the input when it is pasted by the user.
+
+#### What this means
+
+If the user in an English locale types `400,0` it will become `4,000.00`
+because the locale determines that the comma is a thousand separator, not a decimal separator.
+
+If the user in an English locale pastes `400,0` instead, it will become `400.00` because we cannot rely on locale.
+Therefore, instead, we determine that the comma cannot be a thousand separator because it is not followed by 3 digits after.
+It is more likely to be a decimal separator.
diff --git a/packages/input-amount/stories/index.stories.mdx b/packages/input-amount/stories/index.stories.mdx
deleted file mode 100644
index 94f1288c4..000000000
--- a/packages/input-amount/stories/index.stories.mdx
+++ /dev/null
@@ -1,193 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { loadDefaultFeedbackMessages } from '@lion/validate';
-
-import '../lion-input-amount.js';
-
-<Meta title="Forms/Input Amount" parameters={{ component: 'lion-input-amount' }} />
-
-# Input Amount
-
-`lion-input-amount` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an amount.
-
-For formatting, we use <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank">Intl NumberFormat</a> with some overrides.
-
-For parsing user input, we provide our own parser that takes into account a number of heuristics, locale and ignores invalid characters.
-Valid characters are digits and separators. Formatting happens on-blur.
-
-If there are no valid characters in the input whatsoever, it will provide an error feedback.
-
-<Story name="Default">
-  {() => {
-    loadDefaultFeedbackMessages();
-    return html`
-      <lion-input-amount name="amount" currency="USD"></lion-input-amount>
-    `;
-  }}
-</Story>
-
-```html
-<lion-input-amount name="amount"></lion-input-amount>
-```
-
-## Features
-
-- Based on [lion-input](?path=/docs/forms-system-overview--page)
-- Makes use of [formatNumber](?path=/docs/localize-numbers) for formatting and parsing.
-- Option to show currency as a suffix
-- Option to override locale to change the formatting and parsing
-- Option to provide additional format options overrides
-- Default label in different languages
-- Can make use of number specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
-  - IsNumber (default)
-  - MinNumber
-  - MaxNumber
-  - MinMaxNumber
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/input-amount
-```
-
-```js
-import '@lion/input-amount/lion-input-amount.js';
-```
-
-## Examples
-
-### Negative Number
-
-It will accept negative numbers with a minus symbol.
-
-<Story name="Negative number">
-  {html`
-    <lion-input-amount label="Amount" .modelValue=${-123456.78}></lion-input-amount>
-  `}
-</Story>
-
-```html
-<lion-input-amount label="Amount" .modelValue=${-123456.78}></lion-input-amount>
-```
-
-### Set currency suffix
-
-You can optionally set a currency suffix with the `currency` attribute.
-
-<Story name="Currency suffix">
-  {html`
-    <lion-input-amount label="Price" currency="USD" .modelValue=${123456.78}></lion-input-amount>
-  `}
-</Story>
-
-```html
-<lion-input-amount label="Price" currency="USD" .modelValue=${123456.78}></lion-input-amount>
-```
-
-### Force locale
-
-Locale can be forced for a specific `lion-input-amount`. It will format the amount according to this locale.
-
-<Story name="Force locale">
-  {html`
-    <lion-input-amount
-      label="Price"
-      currency="JOD"
-      .formatOptions=${{ locale: 'nl-NL' }}
-      .modelValue=${123456.78}
-    ></lion-input-amount>
-  `}
-</Story>
-
-> The separators are now flipped due to Dutch locale. On top of that, due to JOD currency, the minimum amount of decimals is 3 by default for this currency.
-
-```html
-<lion-input-amount
-  label="Price"
-  currency="JOD"
-  .formatOptions=${{ locale: 'nl-NL' }}
-  .modelValue=${123456.78}
-></lion-input-amount>
-```
-
-### Faulty prefilled
-
-This example will show the error message by prefilling it with a faulty `modelValue`.
-
-> If there is 1 or more digit in the input, it will ignore invalid characters instead of showing an error feedback message.
-
-<Story name="Faulty prefilled">
-  {html`
-    <lion-input-amount
-      label="Amount"
-      help-text="Faulty prefilled input will cause error feedback"
-      .modelValue=${'foo'}
-    ></lion-input-amount>
-  `}
-</Story>
-
-```js
-import { loadDefaultFeedbackMessages } from '@lion/validate';
-
-loadDefaultFeedbackMessages();
-```
-
-```html
-<lion-input-amount
-  label="Amount"
-  help-text="Faulty prefilled input will cause error feedback"
-  .modelValue=${'foo'}
-></lion-input-amount>
-```
-
-### Modifying the amount of decimals
-
-You can override certain formatting options similar to how you would do this when using <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat" target="_blank">Intl NumberFormat</a>.
-This example shows formatting to whole numbers.
-
-<Story name="No decimals">
-  {html`
-    <lion-input-amount
-      label="Amount"
-      help-text="Prefilled and formatted"
-      .formatOptions=${{
-        minimumFractionDigits: 0,
-        maximumFractionDigits: 0,
-      }}
-      .modelValue=${20}
-    >
-    </lion-input-amount>
-  `}
-</Story>
-
-```html
-<lion-input-amount
-  label="Amount"
-  help-text="Prefilled and formatted"
-
-  .modelValue=${20}
-  .formatOptions=${{
-    minimumFractionDigits: 0,
-    maximumFractionDigits: 0,
-  }}
->
-</lion-input-amount>
-```
-
-### Paste behavior
-
-For copy pasting numbers into the input-amount, there is slightly different parsing behavior.
-
-Normally, when it receives an input with only 1 separator character, we check the locale to determine whether this character is a thousand separator, or a decimal separator.
-When a user pastes the input from a different source, we find this approach (locale-based) quite unreliable, because it may have been copied from somewhere with a different locale.
-Therefore, we use the heuristics based method to parse the input when it is pasted by the user.
-
-#### What this means
-
-If the user in an English locale types `400,0` it will become `4,000.00`
-because the locale determines that the comma is a thousand separator, not a decimal separator.
-
-If the user in an English locale pastes `400,0` instead, it will become `400.00` because we cannot rely on locale.
-Therefore, instead, we determine that the comma cannot be a thousand separator because it is not followed by 3 digits after.
-It is more likely to be a decimal separator.
diff --git a/packages/input-date/README.md b/packages/input-date/README.md
index 045fc6d15..0a6e81d4d 100644
--- a/packages/input-date/README.md
+++ b/packages/input-date/README.md
@@ -2,10 +2,39 @@
 
 `lion-input-date` component is based on the generic text input field. Its purpose is to provide a way for users to fill in a date.
 
+```js script
+import { html } from 'lit-html';
+import { loadDefaultFeedbackMessages, MinDate, MinMaxDate, MaxDate } from '@lion/validate';
+import { formatDate } from '@lion/localize';
+
+import './lion-input-date.js';
+
+export default {
+  title: 'Forms/Input Date',
+};
+loadDefaultFeedbackMessages();
+```
+
+```js preview-story
+export const main = () => html` <lion-input-date label="Date"></lion-input-date> `;
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-date--default-story) for a live demo and API documentation
 
+## Features
+
+- Based on [lion-input](?path=/docs/forms-input--default-story)
+- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
+- Option to override locale to change the formatting and parsing
+- Default label in different languages
+- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
+  - IsDate (default)
+  - MinDate
+  - MaxDate
+  - MinMaxDate
+
 ## How to use
 
 ### Installation
@@ -15,11 +44,74 @@ npm i --save @lion/input-date
 ```
 
 ```js
+import { LionInputDate } from '@lion/input-date';
+// or
 import '@lion/input-date/lion-input-date.js';
 ```
 
-### Example
+## Examples
 
-```html
-<lion-input-date></lion-input-date>
+### Is a date
+
+```js preview-story
+export const isADate = () => html`
+  <lion-input-date label="IsDate" .modelValue=${new Date('foo')}> </lion-input-date>
+`;
+```
+
+### With minimum date
+
+```js preview-story
+export const withMinimumDate = () => html`
+  <lion-input-date
+    label="MinDate"
+    help-text="Enter a date greater than or equal to today."
+    .modelValue=${new Date('2018/05/30')}
+    .validators=${[new MinDate(new Date())]}
+  >
+  </lion-input-date>
+`;
+```
+
+### With maximum date
+
+```js preview-story
+export const withMaximumDate = () => html`
+  <lion-input-date
+    label="MaxDate"
+    help-text="Enter a date smaller than or equal to today."
+    .modelValue=${new Date('2100/05/30')}
+    .validators=${[new MaxDate(new Date())]}
+  ></lion-input-date>
+`;
+```
+
+### With minimum and maximum date
+
+```js preview-story
+export const withMinimumAndMaximumDate = () => html`
+  <lion-input-date
+    label="MinMaxDate"
+    .modelValue=${new Date('2018/05/30')}
+    .validators=${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}
+  >
+    <div slot="help-text">
+      Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
+        new Date('2018/06/24'),
+      )}.
+    </div>
+  </lion-input-date>
+`;
+```
+
+### Faulty prefilled
+
+```js preview-story
+export const faultyPrefilled = () => html`
+  <lion-input-date
+    label="Date"
+    help-text="Faulty prefilled input will be cleared"
+    .modelValue=${'foo'}
+  ></lion-input-date>
+`;
 ```
diff --git a/packages/input-date/stories/index.stories.mdx b/packages/input-date/stories/index.stories.mdx
deleted file mode 100644
index f8b371fd8..000000000
--- a/packages/input-date/stories/index.stories.mdx
+++ /dev/null
@@ -1,155 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { loadDefaultFeedbackMessages, MinDate, MinMaxDate, MaxDate } from '@lion/validate';
-import { formatDate } from '@lion/localize';
-
-import '../lion-input-date.js';
-
-<Meta title="Forms/Input Date" parameters={{ component: 'lion-input-date' }} />
-
-# Input Date
-
-`lion-input-date` component is based on the generic text input field. Its purpose is to provide a way for users to fill in a date.
-
-<Story name="Default">
-  {() => {
-    loadDefaultFeedbackMessages();
-    return html`
-      <lion-input-date label="Date"></lion-input-date>
-    `;
-  }}
-</Story>
-
-```html
-<lion-input-date label="Date"></lion-input-date>
-```
-
-## Features
-
-- Based on [lion-input](?path=/docs/forms-input--default-story)
-- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
-- Option to override locale to change the formatting and parsing
-- Default label in different languages
-- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
-  - IsDate (default)
-  - MinDate
-  - MaxDate
-  - MinMaxDate
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/input-date
-```
-
-```js
-import '@lion/input-date/lion-input-date.js';
-```
-
-## Examples
-
-### Validation
-
-<Story name="Validation">
-  {html`
-    <style>
-      lion-input-date {
-        margin-bottom: 30px;
-      }
-    </style>
-    <lion-input-date label="IsDate" .modelValue=${new Date('foo')}> </lion-input-date>
-    <lion-input-date
-      label="MinDate"
-      help-text="Enter a date greater than or equal to today."
-      .modelValue=${new Date('2018/05/30')}
-      .validators=${[new MinDate(new Date())]}
-    >
-    </lion-input-date>
-    <lion-input-date
-      label="MaxDate"
-      help-text="Enter a date smaller than or equal to today."
-      .modelValue=${new Date('2100/05/30')}
-      .validators=${[new MaxDate(new Date())]}
-    >
-    </lion-input-date>
-    <lion-input-date
-      label="MinMaxDate"
-      .modelValue=${new Date('2018/05/30')}
-      .validators=${[
-        new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') }),
-      ]}
-    >
-      <div slot="help-text">
-        Enter a date between ${formatDate(new Date('2018/05/24'))} and
-        ${formatDate(new Date('2018/06/24'))}.
-      </div>
-    </lion-input-date>
-  `}
-</Story>
-
-```js
-import { loadDefaultFeedbackMessages, MinDate, MinMaxDate, MaxDate } from '@lion/validate';
-import { formatDate } from '@lion/localize';
-```
-
-IsDate
-```html
-<lion-input-date label="IsDate" .modelValue=${new Date('foo')}> </lion-input-date>
-```
-
-MinDate
-```html
-<lion-input-date
-  label="MinDate"
-  help-text="Enter a date greater than or equal to today."
-  .modelValue=${new Date('2018/05/30')}
-  .validators=${[new MinDate(new Date())]}
-></lion-input-date>
-```
-
-MaxDate
-```html
-<lion-input-date
-  label="MaxDate"
-  help-text="Enter a date smaller than or equal to today."
-  .modelValue=${new Date('2100/05/30')}
-  .validators=${[new MaxDate(new Date())]}
-></lion-input-date>
-```
-
-MinMaxDate
-```html
-<lion-input-date
-  label="MinMaxDate"
-  .modelValue=${new Date('2018/05/30')}
-  .validators=${[
-    new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') }),
-  ]}
->
-  <div slot="help-text">
-    Enter a date between ${formatDate(new Date('2018/05/24'))} and
-    ${formatDate(new Date('2018/06/24'))}.
-  </div>
-</lion-input-date>
-```
-
-### Faulty prefilled
-
-<Story name="Faulty prefilled">
-  {html`
-    <lion-input-date
-      label="Date"
-      help-text="Faulty prefilled input will be cleared"
-      .modelValue=${'foo'}
-    ></lion-input-date>
-  `}
-</Story>
-
-```html
-<lion-input-date
-  label="Date"
-  help-text="Faulty prefilled input will be cleared"
-  .modelValue=${'foo'}
-></lion-input-date>
-```
diff --git a/packages/input-datepicker/README.md b/packages/input-datepicker/README.md
index 914a95602..b82d4bc10 100644
--- a/packages/input-datepicker/README.md
+++ b/packages/input-datepicker/README.md
@@ -1,12 +1,50 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Input Datepicker
 
 `lion-input-datepicker` component is based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
-For an input field with a big range, such as `birthday-input`, a datepicker is not the ultimate tool, so use the standard [lion-input-date](../input-date).
+For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.
+We encourage using the standard [lion-input-date](?path=/docs/form-component-input-date) for this.
+
+```js script
+import { html } from 'lit-html';
+import { loadDefaultFeedbackMessages, MinMaxDate, IsDateDisabled } from '@lion/validate';
+import { formatDate } from '@lion/localize';
+
+import './lion-input-datepicker.js';
+
+export default {
+  title: 'Forms/Input Datepicker',
+};
+loadDefaultFeedbackMessages();
+```
+
+```js preview-story
+export const main = () => {
+  return html`
+    <lion-input-datepicker label="Date" name="date"></lion-input-datepicker>
+  `;
+};
+```
 
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-datepicker--default-story) for a live demo and API documentation
 
+## Features
+
+- Input field with a datepicker to help to choose a date
+- Based on [lion-input-date](?path=/docs/form-component-input-date)
+- Makes use of [lion-calendar](?path=/docs/calendar-standalone) inside the datepicker
+- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
+- Option to overwrite locale to change the formatting and parsing
+- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
+  - IsDate (default)
+  - MinDate
+  - MaxDate
+  - MinMaxDate
+  - IsDateDisabled
+
 ## How to use
 
 ### Installation
@@ -16,11 +54,78 @@ npm i --save @lion/input-datepicker
 ```
 
 ```js
+import { LionInputDatepicker } from '@lion/input-datepicker';
+// or
 import '@lion/input-datepicker/lion-input-datepicker.js';
 ```
 
-### Example
+## Examples
 
-```html
-<lion-input-datepicker label="Date" name="date"></lion-input-datepicker>
+### Minimum and maximum date
+
+Below are examples of different validators for dates.
+
+```js preview-story
+export const minimumAndMaximumDate = () => html`
+  <lion-input-datepicker
+    label="MinMaxDate"
+    .modelValue=${new Date('2018/05/30')}
+    .validators=${[new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') })]}
+  >
+    <div slot="help-text">
+      Enter a date between ${formatDate(new Date('2018/05/24'))} and ${formatDate(
+        new Date('2018/06/24'),
+      )}.
+    </div>
+  </lion-input-datepicker>
+`;
+```
+
+### Disable specific dates
+
+```js preview-story
+export const disableSpecificDates = () => html`
+  <lion-input-datepicker
+    label="IsDateDisabled"
+    help-text="You're not allowed to choose any 15th."
+    .validators=${[new IsDateDisabled(d => d.getDate() === 15)]}
+  ></lion-input-datepicker>
+`;
+```
+
+### Calendar heading
+
+You can modify the heading of the calendar with the `.calendarHeading` property or `calendar-heading` attribute for simple values.
+
+By default, it will take the label value.
+
+```js preview-story
+export const calendarHeading = () => html`
+  <lion-input-datepicker
+    label="Date"
+    .calendarHeading="${'Custom heading'}"
+    .modelValue=${new Date()}
+  ></lion-input-datepicker>
+`;
+```
+
+### Disabled
+
+You can disable datepicker inputs.
+
+```js preview-story
+export const disabled = () => html`
+  <lion-input-datepicker label="Disabled" disabled></lion-input-datepicker>
+`;
+```
+
+### Read only
+
+You can set datepicker inputs to `readonly`, which will prevent the user from opening the calendar popup.
+
+```js preview-story
+export const readOnly = () => html`
+  <lion-input-datepicker label="Readonly" readonly .modelValue="${new Date()}">
+  </lion-input-datepicker>
+`;
 ```
diff --git a/packages/input-datepicker/stories/index.stories.mdx b/packages/input-datepicker/stories/index.stories.mdx
deleted file mode 100644
index 6038adff9..000000000
--- a/packages/input-datepicker/stories/index.stories.mdx
+++ /dev/null
@@ -1,169 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { loadDefaultFeedbackMessages, MinMaxDate, IsDateDisabled } from '@lion/validate';
-import { formatDate } from '@lion/localize';
-
-import '../lion-input-datepicker.js';
-
-<Meta title="Forms/Input Datepicker" parameters={{ component: 'lion-input-datepicker' }} />
-
-# Input Datepicker
-
-`lion-input-datepicker` component is based on the date text input field. Its purpose is to provide a way for users to fill in a date with a datepicker.
-For an input field with a big range, such as `birthday-input`, a datepicker is not the best choice due to the high variance between possible inputs.
-We encourage using the standard [lion-input-date](?path=/docs/form-component-input-date) for this.
-
-<Story name="Default">
-  {() => {
-    loadDefaultFeedbackMessages();
-    return html`
-      <lion-input-datepicker label="Date" name="date"></lion-input-datepicker>
-    `;
-  }}
-</Story>
-
-```html
-<lion-input-datepicker label="Date" name="date"></lion-input-datepicker>
-```
-
-## Features
-
-- Input field with a datepicker to help to choose a date
-- Based on [lion-input-date](?path=/docs/form-component-input-date)
-- Makes use of [lion-calendar](?path=/docs/calendar-standalone) inside the datepicker
-- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
-- Option to overwrite locale to change the formatting and parsing
-- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
-  - IsDate (default)
-  - MinDate
-  - MaxDate
-  - MinMaxDate
-  - IsDateDisabled
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/input-datepicker
-```
-
-```js
-import '@lion/input-datepicker/lion-input-datepicker.js';
-```
-
-## Examples
-
-### Validation
-
-Below are examples of different validators for dates.
-
-<Story name="Validation">
-  {html`
-    <style>
-      lion-input-datepicker {
-        margin-bottom: 30px;
-      }
-    </style>
-    <lion-input-datepicker
-      label="MinMaxDate"
-      .modelValue=${new Date('2018/05/30')}
-      .validators=${[
-        new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') }),
-      ]}
-    >
-      <div slot="help-text">
-        Enter a date between ${formatDate(new Date('2018/05/24'))} and
-        ${formatDate(new Date('2018/06/24'))}.
-      </div>
-    </lion-input-datepicker>
-    <lion-input-datepicker
-      label="IsDateDisabled"
-      help-text="You're not allowed to choose any 15th."
-      .validators=${[new IsDateDisabled(d => d.getDate() === 15)]}
-    ></lion-input-datepicker>
-  `}
-</Story>
-
-```js
-import { loadDefaultFeedbackMessages, MinMaxDate, IsDateDisabled } from '@lion/validate';
-import { formatDate } from '@lion/localize';
-
-loadDefaultFeedbackMessages();
-```
-
-```html
-<lion-input-datepicker
-  label="MinMaxDate"
-  .modelValue=${new Date('2018/05/30')}
-  .validators=${[
-    new MinMaxDate({ min: new Date('2018/05/24'), max: new Date('2018/06/24') }),
-  ]}
->
-  <div slot="help-text">
-    Enter a date between ${formatDate(new Date('2018/05/24'))} and
-    ${formatDate(new Date('2018/06/24'))}.
-  </div>
-</lion-input-datepicker>
-```
-
-```html
-<lion-input-datepicker
-  label="IsDateDisabled"
-  help-text="You're not allowed to choose any 15th."
-  .validators=${[new IsDateDisabled(d => d.getDate() === 15)]}
-></lion-input-datepicker>
-```
-
-### Calendar heading
-
-You can modify the heading of the calendar with the `.calendarHeading` property or `calendar-heading` attribute for simple values.
-
-By default, it will take the label value.
-
-<Story name="Calendar heading">
-  {html`
-    <lion-input-datepicker
-      label="Date"
-      .calendarHeading="${'Custom heading'}"
-      .modelValue=${new Date()}
-    ></lion-input-datepicker>
-  `}
-</Story>
-
-```html
-<lion-input-datepicker
-  label="Date"
-  .calendarHeading="${'Custom heading'}"
-  .modelValue=${new Date()}
-></lion-input-datepicker>
-```
-
-### Disabled
-
-You can disable datepicker inputs.
-
-<Story name="Disabled">
-  {html`
-    <lion-input-datepicker label="Disabled" disabled></lion-input-datepicker>
-  `}
-</Story>
-
-```html
-<lion-input-datepicker label="Disabled" disabled></lion-input-datepicker>
-```
-
-### Read only
-
-You can set datepicker inputs to `readonly`, which will prevent the user from opening the calendar popup.
-
-<Story name="Read only">
-  {html`
-    <lion-input-datepicker label="Readonly" readonly .modelValue="${new Date()}">
-    </lion-input-datepicker>
-  `}
-</Story>
-
-```html
-<lion-input-datepicker label="Readonly" readonly .modelValue="${new Date()}">
-</lion-input-datepicker>
-```
diff --git a/packages/input-email/README.md b/packages/input-email/README.md
index c4fcaa9c5..e808d9abb 100644
--- a/packages/input-email/README.md
+++ b/packages/input-email/README.md
@@ -2,10 +2,34 @@
 
 `lion-input-email` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an email.
 
+```js script
+import { html } from 'lit-html';
+import { loadDefaultFeedbackMessages, Validator } from '@lion/validate';
+
+import './lion-input-email.js';
+
+export default {
+  title: 'Forms/Input Email',
+};
+loadDefaultFeedbackMessages();
+```
+
+```js preview-story
+export const main = () => {
+  return html` <lion-input-email label="Email" name="email"></lion-input-email> `;
+};
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-email--default-story) for a live demo and API documentation
 
+## Features
+
+- Based on [lion-input](?path=/docs/forms-input--default-story)
+- Makes use of email [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
+  - IsEmail (default)
+
 ## How to use
 
 ### Installation
@@ -15,11 +39,50 @@ npm i --save @lion/input-email
 ```
 
 ```js
+import { LionInputEmail } from '@lion/input-email';
+// or
 import '@lion/input-email/lion-input-email.js';
 ```
 
-### Example
+## Examples
 
-```html
-<lion-input-email label="Email" name="email"></lion-input-email>
+### Faulty Prefilled
+
+When prefilling with a faulty input, an error feedback message will show.
+
+Use `loadDefaultFeedbackMessages` to get our default feedback messages displayed on it.
+
+```js preview-story
+export const faultyPrefilled = () => html`
+  <lion-input-email .modelValue=${'foo'} label="Email"></lion-input-email>
+`;
+```
+
+### Custom Validator
+
+```js preview-story
+export const customValidator = () => {
+  class GmailOnly extends Validator {
+    static get validatorName() {
+      return 'GmailOnly';
+    }
+    execute(value) {
+      let hasError = false;
+      if (!(value.indexOf('gmail.com') !== -1)) {
+        hasError = true;
+      }
+      return hasError;
+    }
+    static async getMessage() {
+      return 'You can only use gmail.com email addresses.';
+    }
+  }
+  return html`
+    <lion-input-email
+      .modelValue=${'foo@bar.com'}
+      .validators=${[new GmailOnly()]}
+      label="Email"
+    ></lion-input-email>
+  `;
+};
 ```
diff --git a/packages/input-email/stories/index.stories.mdx b/packages/input-email/stories/index.stories.mdx
deleted file mode 100644
index 893cd46a7..000000000
--- a/packages/input-email/stories/index.stories.mdx
+++ /dev/null
@@ -1,124 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { loadDefaultFeedbackMessages, Validator } from '@lion/validate';
-
-import '../lion-input-email.js';
-
-<Meta title="Forms/Input Email" parameters={{ component: 'lion-input-email' }} />
-
-# Input Email
-
-`lion-input-email` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an email.
-
-<Story name="Default">
-  {() => {
-    loadDefaultFeedbackMessages();
-    return html`
-      <lion-input-email label="Email" name="email"></lion-input-email>
-    `;
-  }}
-</Story>
-
-```html
-<lion-input-email label="Email" name="email"></lion-input-email>
-```
-
-## Features
-
-- Based on [lion-input](?path=/docs/forms-input--default-story)
-- Makes use of email [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
-  - IsEmail (default)
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/input-email
-```
-
-```js
-import '@lion/input-email/lion-input-email.js';
-```
-
-## Examples
-
-### Faulty Prefilled
-
-When prefilling with a faulty input, an error feedback message will show.
-
-Use `loadDefaultFeedbackMessages` to get our default feedback messages displayed on it.
-
-<Story name="Faulty prefilled">
-  {html`
-    <lion-input-email .modelValue=${'foo'} label="Email"></lion-input-email>
-  `}
-</Story>
-
-```js
-import { loadDefaultFeedbackMessages } from '@lion/validate';
-
-loadDefaultFeedbackMessages();
-```
-
-```html
-<lion-input-email .modelValue=${'foo'} label="Email"></lion-input-email>
-```
-
-### Custom Validator
-
-<Story name="Custom Validator">
-  {() => {
-    class GmailOnly extends Validator {
-      static get validatorName() {
-        return 'GmailOnly';
-      }
-      execute(value) {
-        let hasError = false;
-        if (!(value.indexOf('gmail.com') !== -1)) {
-          hasError = true;
-        }
-        return hasError;
-      }
-      static async getMessage() {
-        return 'You can only use gmail.com email addresses.';
-      }
-    }
-    return html`
-      <lion-input-email
-        .modelValue=${'foo@bar.com'}
-        .validators=${[new GmailOnly()]}
-        label="Email"
-      ></lion-input-email>
-    `;
-  }}
-</Story>
-
-```js
-import { Validator } from '@lion/validate';
-
-class GmailOnly extends Validator {
-  static get validatorName() {
-    return 'GmailOnly';
-  }
-
-  execute(value) {
-    let hasError = false;
-    if (!(value.indexOf('gmail.com') !== -1)) {
-      hasError = true;
-    }
-    return hasError;
-  }
-
-  static async getMessage() {
-    return 'You can only use gmail.com email addresses.';
-  }
-}
-```
-
-```html
-<lion-input-email
-  .modelValue=${'foo@bar.com'}
-  .validators=${[new GmailOnly()]}
-  label="Email"
-></lion-input-email>
-```
diff --git a/packages/input-iban/README.md b/packages/input-iban/README.md
index 16a92ecc3..a070d5576 100644
--- a/packages/input-iban/README.md
+++ b/packages/input-iban/README.md
@@ -1,25 +1,96 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Input IBAN
 
-`lion-input-iban` component is based on the generic text input field. Its purpose is to provide a way for users to fill in an iban.
+`lion-input-iban` component is based on the generic text input field.
+Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number).
+
+```js script
+import { html } from 'lit-html';
+import { loadDefaultFeedbackMessages } from '@lion/validate';
+import { IsCountryIBAN } from './src/validators.js';
+
+import './lion-input-iban.js';
+
+export default {
+  title: 'Forms/Input Iban',
+};
+
+loadDefaultFeedbackMessages();
+```
+
+```js preview-story
+export const main = () => {
+  return html` <lion-input-iban label="Account" name="account"></lion-input-iban> `;
+};
+```
 
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-iban--default-story) for a live demo and API documentation
 
+## Features
+
+- Based on [lion-input](?path=/docs/forms-input--default-story)
+- Default label in different languages
+- Makes use of IBAN specific [validate](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
+  - IsIBAN (default)
+  - IsCountryIBAN
+- Parses IBANs automatically
+- Formats IBANs automatically
+
 ## How to use
 
 ### Installation
 
 ```sh
-npm i --save @lion/input-iban
+npm i --save @lion/input-amount
 ```
 
 ```js
-import '@lion/input-iban/lion-input-iban.js';
+import { LionInputIban } from '@lion/input-iban';
+// or
+import '@lion/input-amount/lion-input-amount.js';
 ```
 
-### Example
+## Examples
 
-```html
-<lion-input-iban label="Account" name="account"></lion-input-iban>
+### Prefilled
+
+```js preview-story
+export const prefilled = () => html`
+  <lion-input-iban .modelValue=${'NL20INGB0001234567'} name="iban" label="IBAN"></lion-input-iban>
+`;
+```
+
+### Faulty Prefilled
+
+```js preview-story
+export const faultyPrefilled = () => html`
+  <lion-input-iban
+    .modelValue=${'NL20INGB0001234567XXXX'}
+    name="iban"
+    label="IBAN"
+  ></lion-input-iban>
+`;
+```
+
+### Country Restrictions
+
+By default, we validate the input to ensure the IBAN is valid.
+To get the default feedback message for this default validator, use `loadDefaultFeedbackMessages` from `@lion/validate`.
+
+In the example below, we show how to use an additional validator that restricts the `input-iban` to IBANs from only certain countries.
+
+```js preview-story
+export const countryRestrictions = () => html`
+  <lion-input-iban
+    .modelValue=${'DE89370400440532013000'}
+    .validators=${[new IsCountryIBAN('NL')]}
+    name="iban"
+    label="IBAN"
+  ></lion-input-iban>
+  <br />
+  <small>Demo instructions: you can use NL20 INGB 0001 2345 67</small>
+`;
 ```
diff --git a/packages/input-iban/stories/index.stories.mdx b/packages/input-iban/stories/index.stories.mdx
deleted file mode 100644
index 872e370f1..000000000
--- a/packages/input-iban/stories/index.stories.mdx
+++ /dev/null
@@ -1,120 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { loadDefaultFeedbackMessages } from '@lion/validate';
-import { IsCountryIBAN } from '../src/validators.js';
-
-import '../lion-input-iban.js';
-
-<Meta title="Forms/Input Iban" parameters={{ component: 'lion-input-iban' }} />
-
-# Input IBAN
-
-`lion-input-iban` component is based on the generic text input field.
-Its purpose is to provide a way for users to fill in an IBAN (International Bank Account Number).
-
-<Story name="Default">
-  {() => {
-    loadDefaultFeedbackMessages();
-    return html`
-      <lion-input-iban label="Account" name="account"></lion-input-iban>
-    `;
-  }}
-</Story>
-
-```html
-<lion-input-iban label="Account" name="account"></lion-input-iban>
-```
-
-## Features
-
-- Based on [lion-input](?path=/docs/forms-input--default-story)
-- Default label in different languages
-- Makes use of IBAN specific [validate](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
-  - IsIBAN (default)
-  - IsCountryIBAN
-- Parses IBANs automatically
-- Formats IBANs automatically
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/input-amount
-```
-
-```js
-import '@lion/input-amount/lion-input-amount.js';
-```
-
-## Examples
-
-### Prefilled
-
-<Story name="Prefilled">
-  {html`
-    <lion-input-iban
-      .modelValue=${'NL20INGB0001234567'}
-      name="iban"
-      label="IBAN"
-    ></lion-input-iban>
-  `}
-</Story>
-
-```html
-<lion-input-iban
-  .modelValue=${'NL20INGB0001234567'}
-  name="iban"
-  label="IBAN"
-></lion-input-iban>
-```
-
-### Faulty Prefilled
-
-<Story name="Faulty prefilled">
-  {html`
-    <lion-input-iban
-      .modelValue=${'NL20INGB0001234567XXXX'}
-      name="iban"
-      label="IBAN"
-    ></lion-input-iban>
-  `}
-</Story>
-
-```html
-<lion-input-iban
-  .modelValue=${'NL20INGB0001234567XXXX'}
-  name="iban"
-  label="IBAN"
-></lion-input-iban>
-```
-
-### Country Restrictions
-
-By default, we validate the input to ensure the IBAN is valid.
-To get the default feedback message for this default validator, use `loadDefaultFeedbackMessages` from `@lion/validate`.
-
-In the example below, we show how to use an additional validator that restricts the `input-iban` to IBANs from only certain countries.
-
-<Story name="Country restrictions">
-  {html`
-    <lion-input-iban
-      .modelValue=${'DE89370400440532013000'}
-      .validators=${[new IsCountryIBAN('NL')]}
-      name="iban"
-      label="IBAN"
-    ></lion-input-iban>
-  `}
-</Story>
-
-```js
-import { IsCountryIBAN } from '@lion/input-iban';
-```
-
-```html
-<lion-input-iban
-  .modelValue=${'DE89370400440532013000'}
-  .validators=${[new IsCountryIBAN('NL')]}
-  name="iban"
-  label="IBAN"
-></lion-input-iban>
-```
diff --git a/packages/input-range/README.md b/packages/input-range/README.md
index 35fd6cc8a..f60731d0d 100644
--- a/packages/input-range/README.md
+++ b/packages/input-range/README.md
@@ -3,10 +3,34 @@
 `lion-input-range` component is based on the native range input.
 Its purpose is to provide a way for users to select one value from a range of values.
 
+```js script
+import { html } from 'lit-html';
+
+import './lion-input-range.js';
+
+export default {
+  title: 'Forms/Input Range',
+};
+```
+
+```js preview-story
+export const main = () => html`
+  <lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
+`;
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input-range--default-story) for a live demo and API documentation
 
+## Features
+
+- Based on [lion-input](?path=/docs/forms-input--default-story).
+- Shows `modelValue` and `unit` above the range input.
+- Shows `min` and `max` value after the range input.
+- Can hide the `min` and `max` value via `no-min-max-labels`.
+- Makes use of [formatNumber](?path=/docs/localize-numbers) for formatting and parsing.
+
 ## How to use
 
 ### Installation
@@ -16,11 +40,73 @@ npm i --save @lion/input-range
 ```
 
 ```js
+import { LionInputRange } from '@lion/input-range';
+// or
 import '@lion/input-range/lion-input-range.js';
 ```
 
-### Example
+## Examples
 
-```html
-<lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
+### Units
+
+```js preview-story
+export const units = () => html`
+  <style>
+    lion-input-range {
+      max-width: 400px;
+    }
+  </style>
+  <lion-input-range
+    min="0"
+    max="100"
+    .modelValue="${50}"
+    unit="%"
+    label="Percentage"
+  ></lion-input-range>
+`;
+```
+
+### Steps
+
+```js preview-story
+export const steps = () => html`
+  <lion-input-range
+    style="max-width: 400px;"
+    min="200"
+    max="500"
+    step="50"
+    .modelValue="${300}"
+    label="Input range"
+    help-text="This slider uses increments of 50"
+  ></lion-input-range>
+`;
+```
+
+### Without Min Max Labels
+
+```js preview-story
+export const noMinMaxLabels = () => html`
+  <lion-input-range
+    style="max-width: 400px;"
+    no-min-max-labels
+    min="0"
+    max="100"
+    label="Input range"
+  ></lion-input-range>
+`;
+```
+
+### Disabled
+
+```js preview-story
+export const disabled = () => html`
+  <lion-input-range
+    style="max-width: 400px;"
+    disabled
+    min="200"
+    max="500"
+    .modelValue="${300}"
+    label="Input range"
+  ></lion-input-range>
+`;
 ```
diff --git a/packages/input-range/stories/index.stories.mdx b/packages/input-range/stories/index.stories.mdx
deleted file mode 100644
index 5aaa41db8..000000000
--- a/packages/input-range/stories/index.stories.mdx
+++ /dev/null
@@ -1,153 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-import '../lion-input-range.js';
-
-<Meta title="Forms/Input Range" parameters={{ component: 'lion-input-range' }} />
-
-# Input range
-
-`lion-input-range` component is based on the native range input.
-Its purpose is to provide a way for users to select one value from a range of values.
-
-<Story name="Default">
-  {html`
-    <lion-input-range
-      min="200"
-      max="500"
-      .modelValue="${300}"
-      label="Input range"
-    ></lion-input-range>
-  `}
-</Story>
-
-```html
-<lion-input-range min="200" max="500" .modelValue="${300}" label="Input range"></lion-input-range>
-```
-
-## Features
-
-- Based on [lion-input](?path=/docs/forms-input--default-story).
-- Shows `modelValue` and `unit` above the range input.
-- Shows `min` and `max` value after the range input.
-- Can hide the `min` and `max` value via `no-min-max-labels`.
-- Makes use of [formatNumber](?path=/docs/localize-numbers) for formatting and parsing.
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/input-range
-```
-
-```js
-import '@lion/input-range/lion-input-range.js';
-```
-
-## Examples
-
-### Units
-
-<Story name="Units">
-  {html`
-    <style>
-      lion-input-range {
-        max-width: 400px;
-      }
-    </style>
-    <lion-input-range
-      min="0"
-      max="100"
-      .modelValue="${50}"
-      unit="%"
-      label="Percentage"
-    ></lion-input-range>
-  `}
-</Story>
-
-```html
-<lion-input-range
-  min="0"
-  max="100"
-  .modelValue="${50}"
-  unit="%"
-  label="Percentage"
-></lion-input-range>
-```
-
-### Steps
-
-<Story name="Steps">
-  {html`
-    <style>
-      lion-input-range {
-        max-width: 400px;
-      }
-    </style>
-    <lion-input-range
-      min="200"
-      max="500"
-      step="50"
-      .modelValue="${300}"
-      label="Input range"
-      help-text="This slider uses increments of 50"
-    ></lion-input-range>
-  `}
-</Story>
-
-```html
-<lion-input-range
-  min="200"
-  max="500"
-  step="50"
-  .modelValue="${300}"
-  label="Input range"
-  help-text="This slider uses increments of 50"
-></lion-input-range>
-```
-
-### Without Min Max Labels
-
-<Story name="No Min Max Labels">
-  {html`
-    <style>
-      lion-input-range {
-        max-width: 400px;
-      }
-    </style>
-    <lion-input-range no-min-max-labels min="0" max="100" label="Input range"></lion-input-range>
-  `}
-</Story>
-
-```html
-<lion-input-range no-min-max-labels min="0" max="100" label="Input range"></lion-input-range>
-```
-
-### Disabled
-
-<Story name="Disabled">
-  {html`
-    <style>
-      lion-input-range {
-        max-width: 400px;
-      }
-    </style>
-    <lion-input-range
-      disabled
-      min="200"
-      max="500"
-      .modelValue="${300}"
-      label="Input range"
-    ></lion-input-range>
-  `}
-</Story>
-
-```html
-<lion-input-range
-  disabled
-  min="200"
-  max="500"
-  .modelValue="${300}"
-  label="Input range"
-></lion-input-range>
-```
diff --git a/packages/input/README.md b/packages/input/README.md
index 271bb4601..7d2e3c223 100644
--- a/packages/input/README.md
+++ b/packages/input/README.md
@@ -2,10 +2,41 @@
 
 `lion-input` component is a webcomponent that enhances the functionality of the native `<input>` element.
 
+```js script
+import { html } from 'lit-html';
+import { loadDefaultFeedbackMessages, MaxLength } from '@lion/validate';
+import { localize } from '@lion/localize';
+
+import './lion-input.js';
+
+export default {
+  title: 'Forms/Input',
+};
+```
+
+```js preview-story
+export const main = () => html` <lion-input label="First Name"></lion-input> `;
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-input--default-story) for a live demo and API documentation
 
+## Features
+
+- Based on [field](?path=/docs/forms-system-overview--page)
+- Extra visual elements can be added via `slots`
+  - **label**: can also be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
+    For example add an `u-sr-only` class to the label to make it visually hidden.
+    A label is always needed for accessibility reasons.
+  - **help-text**: a helper text shown below the label to give extra clarification.
+  - **prefix**: does not have an active use case yet, but the option is in place.
+  - **suffix**: can be used for addons to the input like a calculator, datepicker or addressbook. In these cases a button with an icon is used.
+  - **before**: does not have an active use case yet, but the option is in place.
+  - **after**: can be used to show a currency or percentage.
+- Delegates attributes like `type`, `disabled`, `placeholder` and `read-only` to the native input.
+- Can make us of [validation](?path=/docs/forms-validation-overview--page)
+
 ## How to use
 
 ### Installation
@@ -18,8 +49,161 @@ npm i --save @lion/input
 import '@lion/input/lion-input.js';
 ```
 
-### Example
+## Examples
 
-```html
-<lion-input label="My label" name="myName" .modelValue="${'foo'}"></lion-input>
+### Label
+
+Can be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
+For example add an `u-sr-only` class to the label to make it (partially) visually hidden.
+A label is always needed for accessibility reasons.
+
+```js preview-story
+export const label = () => html`
+  <style>
+    .u-sr-only {
+      position: absolute;
+      top: 0;
+      width: 1px;
+      height: 1px;
+      overflow: hidden;
+      clip-path: inset(100%);
+      clip: rect(1px, 1px, 1px, 1px);
+      white-space: nowrap;
+      border: 0;
+      margin: 0;
+      padding: 0;
+    }
+  </style>
+  <lion-input>
+    <label slot="label"
+      >Label <span class="u-sr-only">partially only visible for screen-readers</span></label
+    >
+  </lion-input>
+`;
+```
+
+### Help-text
+
+A helper text shown below the label to give extra clarification.
+
+Just like the `label`, a `help-text` can be provided via the `help-text` attribute, a slot can be used to change the `html` and `CSS` of the help-text.
+For example add an anchor with further explanation.
+
+```js preview-story
+export const helpText = () => html`
+  <lion-input>
+    <label slot="label">Label</label>
+    <div slot="help-text">
+      Help text using <a href="https://example.com/" target="_blank">html</a>
+    </div>
+  </lion-input>
+`;
+```
+
+### Prefilled
+
+```js preview-story
+export const prefilled = () => html`
+  <lion-input .modelValue=${'Prefilled value'} label="Prefilled"></lion-input>
+`;
+```
+
+### Read only
+
+`readonly` attribute will be delegated to the native `<input>` to make it read-only.
+
+This field **will still be included** in the parent fieldset or form's `serializedValue`.
+
+```js preview-story
+export const readOnly = () => html`
+  <lion-input readonly .modelValue=${'This is read only'} label="Read only"></lion-input>
+`;
+```
+
+### Disabled
+
+`disabled` attribute will be delegated to the native `<input>` to make it disabled.
+
+This field **will not be included** in the parent fieldset or form's `serializedValue`.
+
+```js preview-story
+export const disabled = () => html`
+  <lion-input disabled .modelValue=${'This is disabled'} label="Disabled"></lion-input>
+`;
+```
+
+### Prefix
+
+> Prefix slot does not have an active use case yet.
+
+```js preview-story
+export const prefix = () => html`
+  <lion-input label="Prefix">
+    <div slot="prefix">[prefix]</div>
+  </lion-input>
+`;
+```
+
+### Suffix
+
+The suffix can be used for addons to the input like a calculator, datepicker or addressbook.
+In these cases a button with an icon is used.
+
+```js preview-story
+export const suffix = () => html`
+  <lion-input label="Suffix">
+    <div slot="suffix">[suffix]</div>
+  </lion-input>
+`;
+```
+
+### Before
+
+> Before slot does not have an active use case yet.
+
+```js preview-story
+export const before = () => html`
+  <lion-input label="Before">
+    <div slot="before">[before]</div>
+  </lion-input>
+`;
+```
+
+### After
+
+```js preview-story
+export const after = () => html`
+  <lion-input label="Amount">
+    <div slot="after">EUR</div>
+  </lion-input>
+  <lion-input label="Percentage">
+    <div slot="after">%</div>
+  </lion-input>
+`;
+```
+
+## Using validation
+
+The input can be used with [validation](?path=/docs/forms-validation-overview--page).
+On certain conditions, a feedback message can be shown if the input value is invalid.
+
+You can change the locale with the buttons below the field.
+Our default validators come with default translations already.
+
+```js preview-story
+export const validation = () => {
+  loadDefaultFeedbackMessages();
+  return html`
+    <lion-input
+      label="Value"
+      .modelValue=${'Too long input'}
+      .validators=${[new MaxLength(5)]}
+    ></lion-input>
+    <button @click=${() => (localize.locale = 'de-DE')}>DE</button>
+    <button @click=${() => (localize.locale = 'en-GB')}>EN</button>
+    <button @click=${() => (localize.locale = 'fr-FR')}>FR</button>
+    <button @click=${() => (localize.locale = 'nl-NL')}>NL</button>
+    <button @click=${() => (localize.locale = 'zh-CN')}>CN</button>
+  `;
+};
 ```
diff --git a/packages/input/stories/index.stories.mdx b/packages/input/stories/index.stories.mdx
deleted file mode 100644
index 7c3c5b213..000000000
--- a/packages/input/stories/index.stories.mdx
+++ /dev/null
@@ -1,283 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { loadDefaultFeedbackMessages, MaxLength } from '@lion/validate';
-import { localize } from '@lion/localize';
-
-import '../lion-input.js';
-
-<Meta title="Forms/Input" parameters={{ component: 'lion-input' }} />
-
-# Input
-
-`lion-input` component is a webcomponent that enhances the functionality of the native `<input>` element.
-
-<Story name="Default">
-  {html`
-    <lion-input label="First Name"></lion-input>
-  `}
-</Story>
-
-```html
-<lion-input label="First Name"></lion-input>
-```
-
-## Features
-
-- Based on [field](?path=/docs/forms-system-overview--page)
-- Extra visual elements can be added via `slots`
-  - **label**: can also be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
-    For example add an `u-sr-only` class to the label to make it visually hidden.
-    A label is always needed for accessibility reasons.
-  - **help-text**: a helper text shown below the label to give extra clarification.
-  - **prefix**: does not have an active use case yet, but the option is in place.
-  - **suffix**: can be used for addons to the input like a calculator, datepicker or addressbook. In these cases a button with an icon is used.
-  - **before**: does not have an active use case yet, but the option is in place.
-  - **after**: can be used to show a currency or percentage.
-- Delegates attributes like `type`, `disabled`, `placeholder` and `read-only` to the native input.
-- Can make us of [validation](?path=/docs/forms-validation-overview--page)
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/input
-```
-
-```js
-import '@lion/input/lion-input.js';
-```
-
-## Examples
-
-### Label
-
-Can be provided via the `label` attribute, but the slot can be used to change the `html` and `CSS` of the label.
-For example add an `u-sr-only` class to the label to make it (partially) visually hidden.
-A label is always needed for accessibility reasons.
-
-<Story name="Label">
-  {html`
-    <style>
-      .u-sr-only {
-        position: absolute;
-        top: 0;
-        width: 1px;
-        height: 1px;
-        overflow: hidden;
-        clip-path: inset(100%);
-        clip: rect(1px, 1px, 1px, 1px);
-        white-space: nowrap;
-        border: 0;
-        margin: 0;
-        padding: 0;
-      }
-    </style>
-    <lion-input>
-      <label slot="label">Label <span class="u-sr-only">partially only visible for screen-readers</span></label>
-    </lion-input>
-  `}
-</Story>
-
-```html
-<style>
-  .u-sr-only {
-    position: absolute;
-    top: 0;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-    clip-path: inset(100%);
-    clip: rect(1px, 1px, 1px, 1px);
-    white-space: nowrap;
-    border: 0;
-    margin: 0;
-    padding: 0;
-  }
-</style>
-<lion-input>
-  <label slot="label">Label <span class="u-sr-only">partially only visible for screen-readers</span></label>
-</lion-input>
-```
-
-### Help-text
-
-A helper text shown below the label to give extra clarification.
-
-Just like the `label`, a `help-text` can be provided via the `help-text` attribute, a slot can be used to change the `html` and `CSS` of the help-text.
-For example add an anchor with further explanation.
-
-<Story name="Help-text">
-  {html`
-    <lion-input>
-      <label slot="label">Label</label>
-      <div slot="help-text">
-        Help text using <a href="https://example.com/" target="_blank">html</a>
-      </div>
-    </lion-input>
-  `}
-</Story>
-
-```html
-<lion-input>
-  <label slot="label">Label</label>
-  <div slot="help-text">
-    Help text using <a href="https://example.com/" target="_blank">html</a>
-  </div>
-</lion-input>
-```
-
-### Prefilled
-
-<Story name="Prefilled">
-  {html`
-    <lion-input .modelValue=${'Prefilled value'} label="Prefilled"></lion-input>
-  `}
-</Story>
-
-```html
-<lion-input .modelValue=${'Prefilled value'} label="Prefilled"></lion-input>
-```
-
-### Read only
-
-`readonly` attribute will be delegated to the native `<input>` to make it read-only.
-
-This field **will still be included** in the parent fieldset or form's `serializedValue`.
-
-<Story name="Read only">
-  {html`
-    <lion-input readonly .modelValue=${'This is read only'} label="Read only"></lion-input>
-  `}
-</Story>
-
-```html
-<lion-input readonly .modelValue=${'This is read only'} label="Read only"></lion-input>
-```
-
-### Disabled
-
-`disabled` attribute will be delegated to the native `<input>` to make it disabled.
-
-This field **will not be included** in the parent fieldset or form's `serializedValue`.
-
-<Story name="Disabled">
-  {html`
-    <lion-input disabled .modelValue=${'This is disabled'} label="Disabled"></lion-input>
-  `}
-</Story>
-
-```html
-<lion-input disabled .modelValue=${'This is disabled'} label="Disabled"></lion-input>
-```
-
-### Prefix
-
-> Prefix slot does not have an active use case yet.
-
-<Story name="Prefix">
-  {html`
-    <lion-input label="Prefix">
-      <div slot="prefix">[prefix]</div>
-    </lion-input>
-  `}
-</Story>
-
-```html
-<lion-input label="Prefix">
-  <div slot="prefix">[prefix]</div>
-</lion-input>
-```
-
-### Suffix
-
-The suffix can be used for addons to the input like a calculator, datepicker or addressbook.
-In these cases a button with an icon is used.
-
-<Story name="Suffix">
-  {html`
-    <lion-input label="Suffix">
-      <div slot="suffix">[suffix]</div>
-    </lion-input>
-  `}
-</Story>
-
-```html
-<lion-input label="Suffix">
-  <div slot="suffix">[suffix]</div>
-</lion-input>
-```
-
-### Before
-
-> Before slot does not have an active use case yet.
-
-<Story name="Before">
-  {html`
-    <lion-input label="Before">
-      <div slot="before">[before]</div>
-    </lion-input>
-  `}
-</Story>
-
-```html
-<lion-input label="Before">
-  <div slot="before">[before]</div>
-</lion-input>
-```
-
-### After
-
-<Story name="After">
-  {html`
-    <lion-input label="Amount">
-      <div slot="after">EUR</div>
-    </lion-input>
-    <lion-input label="Percentage">
-      <div slot="after">%</div>
-    </lion-input>
-  `}
-</Story>
-
-```html
-<lion-input label="Amount">
-  <div slot="after">EUR</div>
-</lion-input>
-
-<lion-input label="Percentage">
-  <div slot="after">%</div>
-</lion-input>
-```
-
-## Using validation
-
-The input can be used with [validation](?path=/docs/forms-validation-overview--page).
-On certain conditions, a feedback message can be shown if the input value is invalid.
-
-You can change the locale with the buttons below the field.
-Our default validators come with default translations already.
-
-<Story name="Validation">
-  {() => {
-    loadDefaultFeedbackMessages();
-    return html`
-      <lion-input
-        label="Value"
-        .modelValue=${'Too long input'}
-        .validators=${[new MaxLength(5)]}
-      ></lion-input>
-      <button @click=${() => localize.locale = 'de-DE'}>DE</button>
-      <button @click=${() => localize.locale = 'en-GB'}>EN</button>
-      <button @click=${() => localize.locale = 'fr-FR'}>FR</button>
-      <button @click=${() => localize.locale = 'nl-NL'}>NL</button>
-      <button @click=${() => localize.locale = 'zh-CN'}>CN</button>
-    `;
-  }}
-</Story>
-
-```html
-<lion-input
-  label="Value"
-  .modelValue=${'Too long input'}
-  .validators=${[new MaxLength(5)]}
-></lion-input>
-```
diff --git a/packages/input/stories/translations/de-DE.js b/packages/input/stories/translations/de-DE.js
deleted file mode 100644
index 8e3fb7c86..000000000
--- a/packages/input/stories/translations/de-DE.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import de from './de.js';
-
-export default {
-  ...de,
-};
diff --git a/packages/input/stories/translations/de.js b/packages/input/stories/translations/de.js
deleted file mode 100644
index e3f90c05a..000000000
--- a/packages/input/stories/translations/de.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  label: 'Feldname',
-  error: {
-    notEqualsString: 'Dies ist eine Fehlermeldung.',
-  },
-};
diff --git a/packages/input/stories/translations/en-GB.js b/packages/input/stories/translations/en-GB.js
deleted file mode 100644
index e164dab30..000000000
--- a/packages/input/stories/translations/en-GB.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import en from './en.js';
-
-export default {
-  ...en,
-};
diff --git a/packages/input/stories/translations/en.js b/packages/input/stories/translations/en.js
deleted file mode 100644
index 50f64b1a2..000000000
--- a/packages/input/stories/translations/en.js
+++ /dev/null
@@ -1,15 +0,0 @@
-export default {
-  label: 'Fieldname',
-  error: {
-    notEqualsString: 'This is an error message.',
-  },
-  warning: {
-    notEqualsString: 'This is a warning message.',
-  },
-  success: {
-    notEqualsStringFixed: 'This is a success message.',
-  },
-  info: {
-    notEqualsString: 'This is an info message.',
-  },
-};
diff --git a/packages/input/stories/translations/fr-FR.js b/packages/input/stories/translations/fr-FR.js
deleted file mode 100644
index da02615de..000000000
--- a/packages/input/stories/translations/fr-FR.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import fr from './fr.js';
-
-export default {
-  ...fr,
-};
diff --git a/packages/input/stories/translations/fr.js b/packages/input/stories/translations/fr.js
deleted file mode 100644
index 9e7a83786..000000000
--- a/packages/input/stories/translations/fr.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  label: 'Nom de domaine',
-  error: {
-    notEqualsString: "Ceci est un message d'erreur.",
-  },
-};
diff --git a/packages/input/stories/translations/nl-NL.js b/packages/input/stories/translations/nl-NL.js
deleted file mode 100644
index 93467cea6..000000000
--- a/packages/input/stories/translations/nl-NL.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import nl from './nl.js';
-
-export default {
-  ...nl,
-};
diff --git a/packages/input/stories/translations/nl.js b/packages/input/stories/translations/nl.js
deleted file mode 100644
index 383c1ff8c..000000000
--- a/packages/input/stories/translations/nl.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  label: 'Veldnaam',
-  error: {
-    notEqualsString: 'Dit is een foutmelding.',
-  },
-};
diff --git a/packages/input/stories/translations/zh-CN.js b/packages/input/stories/translations/zh-CN.js
deleted file mode 100644
index 6702b7f7f..000000000
--- a/packages/input/stories/translations/zh-CN.js
+++ /dev/null
@@ -1,5 +0,0 @@
-import zh from './zh.js';
-
-export default {
-  ...zh,
-};
diff --git a/packages/input/stories/translations/zh.js b/packages/input/stories/translations/zh.js
deleted file mode 100644
index 7c6c4faaf..000000000
--- a/packages/input/stories/translations/zh.js
+++ /dev/null
@@ -1,6 +0,0 @@
-export default {
-  label: '字段名',
-  error: {
-    notEqualsString: '这是一条错误消息。',
-  },
-};
diff --git a/packages/intros/stories/buttons-intro.stories.mdx b/packages/intros/stories/buttons-intro.stories.mdx
deleted file mode 100644
index 285767297..000000000
--- a/packages/intros/stories/buttons-intro.stories.mdx
+++ /dev/null
@@ -1,20 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-<Meta title="Buttons/Intro" />
-
-# Buttons
-
-Buttons are clickable elements.
-
-## Features
-
-- fully accessible
-
-## Packages
-
-The following buttons area published.
-
-| Package                                                               | Version                                                                                                                              | Description                                            |
-| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
-| [button](?path=/docs/buttons-button--default-story)                   | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button)                               | Button                                                 |
-| [switch](?path=/docs/buttons-switch--default-off)                     | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch)                               | Switch                                                 |
diff --git a/packages/intros/stories/lion-web-components.stories.mdx b/packages/intros/stories/lion-web-components.stories.mdx
deleted file mode 100644
index 7504f5868..000000000
--- a/packages/intros/stories/lion-web-components.stories.mdx
+++ /dev/null
@@ -1,76 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-<Meta title="Intro/Lion Web Components" />
-
-# Lion Web Components
-
-Lion web components is a set of highly performant, accessible and flexible Web Components.
-They provide an unopinionated, white label layer that can be extended to your own layer of components.
-
-## Features
-
-- pure es modules
-- exposes functions/classes and web components
-- provides pure functionality
-- fully accessible
-- built to be extended
-
-> Note: These demos may look a little bland but that is on purpose. They only come with functional stylings.
-> This makes sense as the main use case is to extend those components and if you do you do not want to override existing stylings.
-
-## Systems
-
-Lion web components is logically organized in groups of systems.
-
-| System  | Description |
-| ------- | ----------- |
-| [Forms](?path=/docs/forms-intro--page) | A system that lets you make complex forms with ease. Add validation, translations and use a wide range of pre made form controls. |
-| [Buttons](?path=/docs/buttons-intro--page) | Every application needs buttons to allow interactions. These web components bring common UX patterns while still full integrated with (native) forms. |
-| [Overlays](?path=/docs/overlays-intro--page) | If something needs to overlay content this is your place. Dialogs, Tooltips and a full overlay system to build more if needed  |
-| [Navigation](?path=/docs/navigation-intro--page) | Components which are used to guide users |
-| [Localize](?path=/docs/localize-intro--page) | Localize text, numbers, dates and a way to store/fetch these data within web components  |
-| [Icons](?path=/docs/icons-intro--page) | Loading and displaying icons |
-| [Others](?path=/docs/others-intro--page) | Features not fitting any other category |
-| [Helpers](?path=/docs/helpers-intro--page) | Helpers to make your and your life easier |
-
-## Packages
-
-If you need more details these are the actual npm packages we are publishing
-
-| Package                                                               | Version                                                                                                                              | Description                                            |
-| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
-| **-- Forms --**                                                       |                                                                                                                                      |                                                        |
-| [form](?path=/docs/forms-form-overview--page)                         | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                     | Wrapper for multiple form elements                     |
-| [field](?path=/docs/forms-system-overview--page)                | [![field](https://img.shields.io/npm/v/@lion/field.svg)](https://www.npmjs.com/package/@lion/field)                                  | Base Class for all inputs                              |
-| [fieldset](?path=/docs/forms-fieldset-overview--page)                 | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                         | Group for form inputs                                  |
-| [validate](?path=/docs/form-system-validate-system--page)             | [![validate](https://img.shields.io/npm/v/@lion/validate.svg)](https://www.npmjs.com/package/@lion/validate)                         | Validation for form components                         |
-| [checkbox](?path=/docs/forms-checkbox--default-story)                 | [![checkbox](https://img.shields.io/npm/v/@lion/checkbox.svg)](https://www.npmjs.com/package/@lion/checkbox)                         | Checkbox form element                                  |
-| [checkbox-group](?path=/docs/forms-checkbox-group--default-story)     | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group)       | Group of checkboxes                                    |
-| [input](?path=/docs/forms-input--default-story)                       | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input)                                  | Input element for strings                              |
-| [input-amount](?path=/docs/forms-input-amount--default-story)         | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount)             | Input element for amounts                              |
-| [input-date](?path=/docs/forms-input-date--default-story)             | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date)                   | Input element for dates                                |
-| [input-datepicker](?path=/docs/forms-input-datepicker--default-story) | [![input-datepicker](https://img.shields.io/npm/v/@lion/input-datepicker.svg)](https://www.npmjs.com/package/@lion/input-datepicker) | Input element for dates with a datepicker              |
-| [input-email](?path=/docs/forms-input-email--default-story)           | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email)                | Input element for e-mails                              |
-| [input-iban](?path=/docs/forms-input-iban--default-story)             | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban)                   | Input element for IBANs                                |
-| [input-range](?path=/docs/forms-input-range--default-story)           | [![input-range](https://img.shields.io/npm/v/@lion/input-range.svg)](https://www.npmjs.com/package/@lion/input-range)                | Input element for a range of values                    |
-| [radio](?path=/docs/forms-radio--default-story)                       | [![radio](https://img.shields.io/npm/v/@lion/radio.svg)](https://www.npmjs.com/package/@lion/radio)                                  | Radio from element                                     |
-| [radio-group](?path=/docs/forms-radio-group--default-story)           | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group)                | Group of radios                                        |
-| [select](?path=/docs/forms-select--default-story)                     | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select)                               | Simple native dropdown element                         |
-| [textarea](?path=/docs/forms-textarea--default-story)                 | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea)                         | Multiline text input                                   |
-| **-- Buttons --**                                                       |                                                                                                                                      |                                                        |
-| [button](?path=/docs/buttons-button--default-story)                   | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button)                               | Button                                                 |
-| [switch](?path=/docs/buttons-switch--default-off)                     | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch)                               | Switch                                                 |
-| **-- Overlays --**                                                    |                                                                                                                                      |                                                        |
-| [overlays](?path=/docs/overlays-system-overview--default-story)       | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays)                         | Overlay System                                         |
-| [dialog](?path=/docs/overlays-dialog--default-story)                  | [![dialog](https://img.shields.io/npm/v/@lion/dialog.svg)](https://www.npmjs.com/package/@lion/dialog)                               | Dialog element                                         |
-| [tooltip](?path=/docs/overlays-tooltip--default-story)                | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip)                            | Tooltip element                                        |
-| **-- Icons --**                                                    |                                                                                                                                      |                                                        |
-| [icon](?path=/docs/icons-icon--default-story)                         | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon)                                     | Display our svg icons                                  |
-| **-- Navigation --**                                                    |                                                                                                                                      |                                                        |
-| [steps](?path=/docs/navigation-steps--default-story)                  | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps)                                  | Multi Step System                                      |
-| [tabs](?path=/docs/navigation-tabs--default-story)                    | [![tBS](https://img.shields.io/npm/v/@lion/tabs.svg)](https://www.npmjs.com/package/@lion/tabs)                                      | Move between a small number of equally important views |
-| **-- Others --**                                                    |                                                                                                                                      |                                                        |
-| [core](?path=/docs/deep-dives-core--page)                             | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core)                                     | Core System (exports LitElement, lit-html)             |
-| [localize](?path=/docs/localize-localize--default-story)              | [![localize](https://img.shields.io/npm/v/@lion/localize.svg)](https://www.npmjs.com/package/@lion/localize)                         | Localize and translate your application/components     |
-| [ajax](?path=/docs/others-ajax--default-story)                         | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax)                                     | Fetching data via ajax request                         |
-| [calendar](?path=/docs/calendar--default-story)                       | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar)                         | Standalone calendar                                    |
diff --git a/packages/intros/stories/navigation-intro.stories.mdx b/packages/intros/stories/navigation-intro.stories.mdx
deleted file mode 100644
index 0c413016e..000000000
--- a/packages/intros/stories/navigation-intro.stories.mdx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-<Meta title="Navigation/Intro" />
-
-# Navigation
-
-Navigational elements are used to guide users within your page.
-
-## Features
-
-- fully accessible
-
-## Packages
-
-| Package                                                               | Version                                                                                                                              | Description                                            |
-| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
-| [steps](?path=/docs/navigation-steps--default-story)                  | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps)                                  | Multi Step System                                      |
-| [tabs](?path=/docs/navigation-tabs--default-story)                    | [![tBS](https://img.shields.io/npm/v/@lion/tabs.svg)](https://www.npmjs.com/package/@lion/tabs)                                      | Move between a small number of equally important views |
diff --git a/packages/intros/stories/others-intro.stories.mdx b/packages/intros/stories/others-intro.stories.mdx
deleted file mode 100644
index 9d362d9b5..000000000
--- a/packages/intros/stories/others-intro.stories.mdx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Meta } from '@open-wc/demoing-storybook';
-
-<Meta title="Others/Intro" />
-
-# Others
-
-Features not fitting any other category.
-
-## Packages
-
-| Package                                                               | Version                                                                                                                              | Description                                            |
-| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
-| [ajax](?path=/docs/others-ajax--default-story)                        | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax)                                     | Ajax                                                 |
-| [calendar](?path=/docs/others-calendar--default-story)                | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar)                         | Calendar                                                 |
-| [core](?path=/docs/others-system-core--page)                          | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core)                                     | Core                                                 |
diff --git a/packages/localize/README.md b/packages/localize/README.md
index f9ee8f172..f43648e23 100644
--- a/packages/localize/README.md
+++ b/packages/localize/README.md
@@ -1,11 +1,36 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Localize
 
-The localization system helps to manage localization data split into locales and automate its loading.
+```js script
+export default {
+  title: 'Localize/Intro',
+};
+```
+
+Is meant to translate text into multiple languages.
+In it's simplest form it is a function that returns the translated text for a namespace + key.
 
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/localize--page) for a live demo and documentation
 
+## Features
+
+- Uses es modules
+- Formatting of numbers, amounts
+- Formatting of dates
+
+Further examples can be seen at [Features Overview Demo](?path=/docs/localize-features-overview--as-function) and a more in depth description can be found at [Localize System Overview](?path=/docs/localize-system-overview--page).
+
+## Content
+
+| Feature                                                               | Description                                   |
+| --------------------------------------------------------------------- | --------------------------------------------- |
+| [Translate Text](?path=/docs/localize-features-overview--as-function) | Load and translate text in multiple languages |
+| [Format Numbers](?path=/docs/localize-numbers--formatting)            | Format numbers in multiple languages          |
+| [Format Dates](?path=/docs/localize-dates--formatting)                | Format dates in multiple languages            |
+
 ## How to use
 
 ### Installation
@@ -17,32 +42,3 @@ npm i --save @lion/localize
 ```js
 import { localize } from '@lion/localize';
 ```
-
-### Example
-
-Translation data:
-
-```js
-// path/to/hello-world/translations/en-GB.js
-export default { greeting: 'Hello {name}!', };`
-```
-
-Loading translations:
-
-```js
-// path/to/hello-world/HelloWorld.js
-localize.loadNamespace({
-  'hello-world': locale => {
-    return import(`./translations/${locale}.js`);
-  },
-});
-```
-
-> Note: dynamic variables inside dynamic imports may cause problems with tools that do static analysis, and may not work out of the box
-
-Translating messages:
-
-```js
-localize.msg('hello-world:greeting', { name: 'John' });
-// Hello John!
-```
diff --git a/packages/localize/docs/amount-html.md b/packages/localize/_docs/amount-html.md
similarity index 100%
rename from packages/localize/docs/amount-html.md
rename to packages/localize/_docs/amount-html.md
diff --git a/packages/localize/docs/date.md b/packages/localize/_docs/date.md
similarity index 100%
rename from packages/localize/docs/date.md
rename to packages/localize/_docs/date.md
diff --git a/packages/localize/docs/message.md b/packages/localize/_docs/message.md
similarity index 100%
rename from packages/localize/docs/message.md
rename to packages/localize/_docs/message.md
diff --git a/packages/localize/docs/number.md b/packages/localize/_docs/number.md
similarity index 100%
rename from packages/localize/docs/number.md
rename to packages/localize/_docs/number.md
diff --git a/packages/localize/docs/10-features-overview.md b/packages/localize/docs/10-features-overview.md
new file mode 100644
index 000000000..48418e278
--- /dev/null
+++ b/packages/localize/docs/10-features-overview.md
@@ -0,0 +1,157 @@
+# Features Overview
+
+## Translate Text
+
+### As a function
+
+```js script
+import { html } from 'lit-html';
+import { render, LitElement } from '@lion/core';
+import { localize, formatNumber, formatDate, LocalizeMixin } from '../index.js';
+
+import '../../helpers/sb-locale-switcher.js';
+
+export default {
+  title: 'Localize/Features Overview',
+};
+```
+
+```js preview-story
+export const asFunction = () => {
+  const wrapper = document.createElement('div');
+  let message = 'Loading...';
+  function update() {
+    message = localize.msg('lit-html-example:body');
+    render(
+      html`
+        <p>${message}</p>
+        <sb-locale-switcher></sb-locale-switcher>
+      `,
+      wrapper,
+    );
+  }
+  localize
+    .loadNamespace({
+      'lit-html-example': locale => import(`./translations/${locale}.js`),
+    })
+    .then(() => {
+      update();
+    });
+  localize.addEventListener('localeChanged', () => {
+    localize.loadingComplete.then(() => update());
+  });
+  return wrapper;
+};
+```
+
+```js
+localize.msg('lit-html-example:body'); // for en-GB: I am from England
+localize.msg('lit-html-example:body'); // for nl-NL: Ik kom uit Nederland
+// ...
+```
+
+### Web Component
+
+For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.
+
+```js preview-story
+export const webComponent = () => {
+  class MessageExample extends LocalizeMixin(LitElement) {
+    static get localizeNamespaces() {
+      return [
+        { 'lit-html-example': locale => import(`./translations/${locale}.js`) },
+        ...super.localizeNamespaces,
+      ];
+    }
+
+    render() {
+      return html`
+        <div aria-live="polite">
+          <p>${localize.msg('lit-html-example:body')}</p>
+        </div>
+      `;
+    }
+  }
+  if (!customElements.get('message-example')) {
+    customElements.define('message-example', MessageExample);
+  }
+  return html`
+    <message-example></message-example>
+    <sb-locale-switcher></sb-locale-switcher>
+  `;
+};
+```
+
+```js
+class MessageExample extends LocalizeMixin(LitElement) {
+  render() {
+    return html`
+      <div aria-live="polite">
+        <p>${localize.msg('lit-html-example:body')}</p>
+      </div>
+    `;
+  }
+}
+```
+
+## Numbers
+
+To format numbers you can use `formatNumber`. For more details see [Numbers](?path=/docs/localize-system-numbers--formatting).
+
+```js preview-story
+export const numbers = () => {
+  const wrapper = document.createElement('div');
+  let value = 1234.56;
+  function update() {
+    render(
+      html`
+        <input type="text" value=${value} />
+        <p>${formatNumber(value)}</p>
+        <sb-locale-switcher></sb-locale-switcher>
+      `,
+      wrapper,
+    );
+  }
+  localize.addEventListener('localeChanged', () => {
+    update();
+  });
+  update();
+  const input = wrapper.querySelector('input');
+  input.addEventListener('input', ev => {
+    value = ev.target.value;
+    update();
+  });
+  return wrapper;
+};
+```
+
+## Dates
+
+To format dates you can use `formatDate`. For more details see [Dates](?path=/docs/localize-system-dates--formatting).
+
+```js preview-story
+export const dates = () => {
+  const wrapper = document.createElement('div');
+  let value = '1987/05/12';
+  function update() {
+    render(
+      html`
+        <input type="text" value=${value} />
+        <p>${formatDate(new Date(value))}</p>
+        <sb-locale-switcher></sb-locale-switcher>
+      `,
+      wrapper,
+    );
+  }
+  localize.addEventListener('localeChanged', () => {
+    update();
+  });
+  update();
+  const input = wrapper.querySelector('input');
+  input.addEventListener('input', ev => {
+    value = ev.target.value;
+    update();
+  });
+  return wrapper;
+};
+```
diff --git a/packages/localize/docs/20-numbers.md b/packages/localize/docs/20-numbers.md
new file mode 100644
index 000000000..2ae78ada8
--- /dev/null
+++ b/packages/localize/docs/20-numbers.md
@@ -0,0 +1,221 @@
+# Number localization
+
+## Features
+
+- Small file size
+- Uses `Intl.NumberFormat` but patches browser inconsistencies
+
+## Formatting
+
+With the `formatNumber` you can safely display a number for all languages.
+
+The input value is `1234.56`.
+
+```js script
+import { html, css } from '@lion/core';
+import { formatNumber, formatNumberToParts } from '../index.js';
+import allLocales from './all-locales.js';
+
+export default {
+  title: 'Localize/Numbers',
+};
+
+const formatNumberDemoStyle = css`
+  .demo-table {
+    border-collapse: collapse;
+    text-align: right;
+  }
+  .demo-table thead > tr {
+    border-bottom: 1px solid grey;
+  }
+  .demo-table thead > tr > :first-child,
+  .demo-table tbody > tr > :first-child,
+  .demo-table tfoot > tr > :first-child {
+    text-align: left;
+  }
+  .demo-table th,
+  .demo-table td {
+    padding: 8px;
+  }
+`;
+const value = 1234.56;
+```
+
+```js preview-story
+export const formatting = () => html`
+  <style>
+    ${formatNumberDemoStyle}
+  </style>
+  <table class="demo-table">
+    <thead>
+      <tr>
+        <th>Options</th>
+        <th>Output</th>
+        <th>Code</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>Default</td>
+        <td>${formatNumber(value)}</td>
+        <td></td>
+      </tr>
+      <tr>
+        <td>Currency symbol</td>
+        <td>
+          ${formatNumber(value, {
+            style: 'currency',
+            currencyDisplay: 'symbol',
+            currency: 'EUR',
+          })}
+        </td>
+        <td>
+          <code
+            >formatNumber({ style: 'currency', currencyDisplay: 'symbol', currency: 'EUR' })</code
+          >
+        </td>
+      </tr>
+      <tr>
+        <td>Currency code</td>
+        <td>
+          ${formatNumber(value, {
+            style: 'currency',
+            currencyDisplay: 'code',
+            currency: 'EUR',
+          })}
+        </td>
+        <td>
+          <code>formatNumber({ style: 'currency', currencyDisplay: 'code', currency: 'EUR' })</code>
+        </td>
+      </tr>
+      <tr>
+        <td>Locale</td>
+        <td>${formatNumber(value, { locale: 'nl-NL' })}</td>
+        <td><code>formatNumber({ locale: 'nl-NL' })</code></td>
+      </tr>
+      <tr>
+        <td>No decimals</td>
+        <td>
+          ${formatNumber(value, {
+            minimumFractionDigits: 0,
+            maximumFractionDigits: 0,
+          })}
+        </td>
+        <td>
+          <code>formatNumber({ minimumFractionDigits: 0, maximumFractionDigits: 0, })</code>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+`;
+```
+
+## Formatting parts
+
+`formatNumberToParts` allows to get individual parts of a number on all browsers.
+
+The input value `1234.56` gets formatted via
+
+```js
+formatNumberToParts(value, { style: 'currency', currency: 'EUR' });
+```
+
+```js preview-story
+export const formattingParts = () => html`
+  <style>
+    ${formatNumberDemoStyle}
+  </style>
+  <table class="demo-table">
+    <thead>
+      <tr>
+        <th>Part</th>
+        <th>Output</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${formatNumberToParts(1234.56, { style: 'currency', currency: 'EUR' }).map(
+        part => html`
+          <tr>
+            <td>${part.type}</td>
+            <td>${part.value}</td>
+          </tr>
+        `,
+      )}
+    </tbody>
+  </table>
+`;
+```
+
+## List common locales
+
+The input value is `1234.56`.
+Formatting happens via
+
+```js
+formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' });
+formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' });
+```
+
+```js preview-story
+export const listCommonLocales = () => html`
+  <style>
+    ${formatNumberDemoStyle}
+  </style>
+  <table class="demo-table">
+    <thead>
+      <tr>
+        <th>Locale</th>
+        <th>Output Euro</th>
+        <th>Output US Dollar</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${['en-GB', 'en-US', 'nl-NL', 'nl-BE', 'fr-FR', 'de-DE'].map(
+        locale => html`
+          <tr>
+            <td>${locale}</td>
+            <td>${formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' })}</td>
+            <td>${formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' })}</td>
+          </tr>
+        `,
+      )}
+    </tbody>
+  </table>
+`;
+```
+
+## List all locales
+
+The following list show number formatting for all known locales.
+
+The input value is `1234.56`.
+Formatting happens via
+
+```js
+formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' });
+formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' });
+```
+
+```js preview-story
+export const listAllLocales = () => html`
+  <style>
+    ${formatNumberDemoStyle}
+  </style>
+  <table class="demo-table">
+    <tr>
+      <th>Locale</th>
+      <th>Output Euro</th>
+      <th>Output US Dollar</th>
+    </tr>
+    ${Object.keys(allLocales).map(
+      locale => html`
+        <tr>
+          <td>${locale}</td>
+          <td>${formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' })}</td>
+          <td>${formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' })}</td>
+        </tr>
+      `,
+    )}
+  </table>
+`;
+```
diff --git a/packages/localize/docs/30-dates.md b/packages/localize/docs/30-dates.md
new file mode 100644
index 000000000..d9f7b3788
--- /dev/null
+++ b/packages/localize/docs/30-dates.md
@@ -0,0 +1,199 @@
+# Date localization
+
+## Features
+
+- Small file size
+- Uses `Intl.DateFormat` but patches browser inconsistencies
+
+## Formatting
+
+With the `formatDate` you can safely display dates for all languages.
+
+The input value is `new Date('1987/05/12')`.
+
+```js script
+import { css, html } from '@lion/core';
+import { formatNumber, formatNumberToParts, formatDate } from '../index.js';
+import allLocales from './all-locales.js';
+
+export default {
+  title: 'Localize/Dates',
+};
+
+const formatDateDemoStyle = css`
+  .demo-table {
+    border-collapse: collapse;
+    text-align: right;
+  }
+  .demo-table thead > tr {
+    border-bottom: 1px solid grey;
+  }
+  .demo-table thead > tr > :first-child,
+  .demo-table tbody > tr > :first-child,
+  .demo-table tfoot > tr > :first-child {
+    text-align: left;
+  }
+  .demo-table th,
+  .demo-table td {
+    padding: 8px;
+  }
+`;
+```
+
+```js preview-story
+export const formatting = () => html`
+  <style>
+    ${formatDateDemoStyle}
+  </style>
+  <table class="demo-table">
+    <thead>
+      <tr>
+        <th>Output</th>
+        <th>Options</th>
+        <th>Code</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr>
+        <td>${formatDate(new Date('1987/05/12'))}</td>
+        <td>Default</td>
+        <td><code>formatDate(new Date('1987/05/12'))</code></td>
+      </tr>
+      <tr>
+        <td>
+          ${formatDate(new Date('1987/05/12'), {
+            weekday: 'long',
+            year: 'numeric',
+            month: 'long',
+            day: '2-digit',
+          })}
+        </td>
+        <td>Date display</td>
+        <td>
+          <code
+            >formatDate(new Date(){weekday:'long',year:'numeric',month:'long',day:'2-digit'})</code
+          >
+        </td>
+      </tr>
+      <tr>
+        <td>
+          ${formatDate(new Date('1987/05/12'), {
+            weekday: 'long',
+            month: 'long',
+            day: '2-digit',
+          })}
+        </td>
+        <td>Date without year</td>
+        <td>
+          <code>
+            formatDate(new Date('1987/05/12'), {weekday:'long',month:'long',day:'2-digit'})
+          </code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          ${formatDate(new Date('1987/05/12'), {
+            weekday: 'long',
+            year: 'numeric',
+            day: '2-digit',
+          })}
+        </td>
+        <td>Date without month</td>
+        <td>
+          <code>
+            formatDate(new Date('1987/05/12'), {weekday:'long',year:'numeric',day:'2-digit'})
+          </code>
+        </td>
+      </tr>
+      <tr>
+        <td>
+          ${formatDate(new Date('1987/05/12'), {
+            weekday: 'long',
+            month: 'long',
+            year: 'numeric',
+          })}
+        </td>
+        <td>Date without day</td>
+        <td>
+          <code>
+            formatDate(new Date('1987/05/12'), { weekday:'long',year:'numeric',month:'long' })
+          </code>
+        </td>
+      </tr>
+      <tr>
+        <td>${formatDate(new Date('1987/05/12'), { locale: 'nl-NL' })}</td>
+        <td>Locale</td>
+        <td><code>formatDate(new Date('1987/05/12'){ locale:'nl-NL' })</code></td>
+      </tr>
+    </tbody>
+  </table>
+`;
+```
+
+## List common locales
+
+The input value is `new Date('1987/05/12')`.
+Formatting happens via
+
+```js
+formatDate(new Date('1987/05/12'), { locale });
+```
+
+```js preview-story
+export const listCommonLocales = () => html`
+  <style>
+    ${formatDateDemoStyle}
+  </style>
+  <table class="demo-table">
+    <thead>
+      <tr>
+        <th>Locale</th>
+        <th>Output</th>
+      </tr>
+    </thead>
+    <tbody>
+      ${['en-GB', 'en-US', 'nl-NL', 'nl-BE', 'fr-FR', 'de-DE'].map(
+        locale => html`
+          <tr>
+            <td>${locale}</td>
+            <td>${formatDate(new Date('1987/05/12'), { locale })}</td>
+          </tr>
+        `,
+      )}
+    </tbody>
+  </table>
+`;
+```
+
+## List all locales
+
+The following list shows date formatting for all known locales.
+
+The input value is `new Date('1987/05/12')`.
+Formatting happens via
+
+```js
+formatDate(new Date('1987/05/12'), { locale });
+```
+
+```js preview-story
+export const listAllLocales = () => html`
+  <style>
+    ${formatDateDemoStyle}
+  </style>
+  <table class="demo-table">
+    <tr>
+      <th>Locale</th>
+      <th>Output</th>
+    </tr>
+    ${Object.keys(allLocales).map(
+      locale => html`
+        <tr>
+          <td>${locale}</td>
+          <td>${formatDate(new Date('1987/05/12'), { locale })}</td>
+        </tr>
+      `,
+    )}
+  </table>
+`;
+```
diff --git a/packages/localize/stories/50-system-overview.stories.mdx b/packages/localize/docs/50-system-overview.md
similarity index 99%
rename from packages/localize/stories/50-system-overview.stories.mdx
rename to packages/localize/docs/50-system-overview.md
index d09d84f20..b823b0e9c 100644
--- a/packages/localize/stories/50-system-overview.stories.mdx
+++ b/packages/localize/docs/50-system-overview.md
@@ -1,9 +1,11 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-<Meta title="Localize/System/Overview" />
-
 # Localize
 
+```js script
+export default {
+  title: 'Localize/System/Overview',
+};
+```
+
 The localization system helps to manage localization data split into locales and automate its loading.
 The loading of data tries to be as unobtrusive as possible for a typical workflow while providing a flexible and controllable mechanism for non-trivial use cases.
 The formatting of data containing numbers and dates takes current locale into account by using Intl MessageFormat specification.
diff --git a/packages/localize/stories/60-system-rationale.stories.mdx b/packages/localize/docs/60-system-rationale.md
similarity index 96%
rename from packages/localize/stories/60-system-rationale.stories.mdx
rename to packages/localize/docs/60-system-rationale.md
index 0ed7d8e43..2de910388 100644
--- a/packages/localize/stories/60-system-rationale.stories.mdx
+++ b/packages/localize/docs/60-system-rationale.md
@@ -1,9 +1,11 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-<Meta title="Localize/System/Rationale" />
-
 # Rationale of the `localize` design
 
+```js script
+export default {
+  title: 'Localize/System/Rationale',
+};
+```
+
 ## Requirements
 
 - loading translations per a web component or a module scope
diff --git a/packages/localize/stories/all-locales.js b/packages/localize/docs/all-locales.js
similarity index 100%
rename from packages/localize/stories/all-locales.js
rename to packages/localize/docs/all-locales.js
diff --git a/packages/localize/stories/translations/en-AU.js b/packages/localize/docs/translations/en-AU.js
similarity index 100%
rename from packages/localize/stories/translations/en-AU.js
rename to packages/localize/docs/translations/en-AU.js
diff --git a/packages/localize/stories/translations/en-GB.js b/packages/localize/docs/translations/en-GB.js
similarity index 100%
rename from packages/localize/stories/translations/en-GB.js
rename to packages/localize/docs/translations/en-GB.js
diff --git a/packages/localize/stories/translations/en-US.js b/packages/localize/docs/translations/en-US.js
similarity index 100%
rename from packages/localize/stories/translations/en-US.js
rename to packages/localize/docs/translations/en-US.js
diff --git a/packages/localize/stories/translations/en.js b/packages/localize/docs/translations/en.js
similarity index 100%
rename from packages/localize/stories/translations/en.js
rename to packages/localize/docs/translations/en.js
diff --git a/packages/localize/stories/translations/nl-BE.js b/packages/localize/docs/translations/nl-BE.js
similarity index 100%
rename from packages/localize/stories/translations/nl-BE.js
rename to packages/localize/docs/translations/nl-BE.js
diff --git a/packages/localize/stories/translations/nl-NL.js b/packages/localize/docs/translations/nl-NL.js
similarity index 100%
rename from packages/localize/stories/translations/nl-NL.js
rename to packages/localize/docs/translations/nl-NL.js
diff --git a/packages/localize/stories/translations/nl.js b/packages/localize/docs/translations/nl.js
similarity index 100%
rename from packages/localize/stories/translations/nl.js
rename to packages/localize/docs/translations/nl.js
diff --git a/packages/localize/stories/10-intro.stories.mdx b/packages/localize/stories/10-intro.stories.mdx
deleted file mode 100644
index 91ca67618..000000000
--- a/packages/localize/stories/10-intro.stories.mdx
+++ /dev/null
@@ -1,38 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { render } from '@lion/core';
-import { localize, formatNumber, formatDate } from '../index.js';
-
-<Meta title="Localize/Intro" />
-
-# Localize
-
-Is meant to translate text into multiple languages.
-In it's simplest form it is a function that returns the translated text for a namespace + key.
-
-## Features
-
-- Uses es modules
-- Formatting of numbers, amounts
-- Formatting of dates
-
-Further examples can be seen at [Features Overview Demo](?path=/docs/localize-features-overview--translate-text) and a more in depth description can be found at [Localize System Overview](?path=/docs/localize-system-overview--page).
-
-## Content
-
-| Feature                                                               | Description                                   |
-| --------------------------------------------------------------------- | --------------------------------------------- |
-| [Translate Text](?path=/docs/localize-translate-text--function-story) | Load and translate text in multiple languages |
-| [Format Numbers](?path=/docs/localize-numbers--formatting)            | Format numbers in multiple languages          |
-| [Format Dates](?path=/docs/localize-dates--formatting)                | Format dates in multiple languages            |
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/localize
-```
-
-```js
-import { localize } from '@lion/localize';
-```
diff --git a/packages/localize/stories/12-features-overview.stories.mdx b/packages/localize/stories/12-features-overview.stories.mdx
deleted file mode 100644
index 37f0dc298..000000000
--- a/packages/localize/stories/12-features-overview.stories.mdx
+++ /dev/null
@@ -1,99 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { render } from '@lion/core';
-import { localize, formatNumber, formatDate } from '../index.js';
-
-<Meta title="Localize/Features Overview" />
-
-<Story name="Translate text"></Story>
-
-## Translate Text
-
-### As a function
-
-<Story id="localize-system-internals--as-function" />
-
-```js
-localize.msg('lit-html-example:body'); // for en-GB: I am from England
-localize.msg('lit-html-example:body'); // for nl-NL: Ik kom uit Nederland
-// ...
-```
-
-### Web Component
-
-For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.
-
-<Story id="localize-system-internals--web-component" />
-
-```js
-class MessageExample extends LocalizeMixin(LitElement) {
-  render() {
-    return html`
-      <div aria-live="polite">
-        <p>${localize.msg('lit-html-example:body')}</p>
-      </div>
-    `;
-  }
-}
-```
-
-## Numbers
-
-To format numbers you can use `formatNumber`. For more details see [Numbers](?path=/docs/localize-system-numbers--formatting).
-
-<Story name="Numbers">
-  {() => {
-    const wrapper = document.createElement('div');
-    let value = 1234.56;
-    function update() {
-      render(
-        html`
-          <input type="text" value=${value} />
-          <p>${formatNumber(value)}</p>
-          <sb-locale-switcher></sb-locale-switcher>
-        `,
-        wrapper,
-      );
-    }
-    localize.addEventListener('localeChanged', () => {
-      update();
-    });
-    update();
-    const input = wrapper.querySelector('input');
-    input.addEventListener('input', ev => {
-      value = ev.target.value;
-      update();
-    });
-    return wrapper;
-  }}
-</Story>
-
-## Dates
-
-To format dates you can use `formatDate`. For more details see [Dates](?path=/docs/localize-system-dates--formatting).
-
-<Story name="Dates">
-  {() => {
-    const wrapper = document.createElement('div');
-    let value = '1987/05/12';
-    function update() {
-      render(
-        html`
-          <input type="text" value=${value} />
-          <p>${formatDate(new Date(value))}</p>
-          <sb-locale-switcher></sb-locale-switcher>
-        `,
-        wrapper,
-      );
-    }
-    localize.addEventListener('localeChanged', () => {
-      update();
-    });
-    update();
-    const input = wrapper.querySelector('input');
-    input.addEventListener('input', ev => {
-      value = ev.target.value;
-      update();
-    });
-    return wrapper;
-  }}
-</Story>
diff --git a/packages/localize/stories/15-text.stories.mdx b/packages/localize/stories/15-text.stories.mdx
deleted file mode 100644
index e28ae8fc3..000000000
--- a/packages/localize/stories/15-text.stories.mdx
+++ /dev/null
@@ -1,42 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { render } from '@lion/core';
-import { localize, formatNumber, formatDate } from '../index.js';
-
-<Meta title="Localize/Translate Text" />
-
-<Story name="Function"></Story>
-
-# Translate Text
-
-Is meant to translate text into multiple languages.
-In it's simplest form it is a function that returns the translated text for a `namespace` + `key`.
-
-<Story id="localize-system-internals--as-function" />
-
-```js
-localize.msg('lit-html-example:body'); // for en-GB: I am from England
-localize.msg('lit-html-example:body'); // for nl-NL: Ik kom uit Nederland
-// ...
-```
-
-## Web Component
-
-<Story name="Web component"></Story>
-
-For use in a web component we have `LocalizeMixin` that lets you define namespaces and awaits loading of those translations.
-
-<Story id="localize-system-internals--web-component" />
-
-```js
-class MessageExample extends LocalizeMixin(LitElement) {
-  render() {
-    return html`
-      <div aria-live="polite">
-        <p>${localize.msg('lit-html-example:body')}</p>
-      </div>
-    `;
-  }
-}
-```
-
-For a full overview of all the features, please checkout the [Localize System Overview](?path=/docs/localize-system-overview--page).
diff --git a/packages/localize/stories/25-numbers.stories.mdx b/packages/localize/stories/25-numbers.stories.mdx
deleted file mode 100644
index 72a15c4bc..000000000
--- a/packages/localize/stories/25-numbers.stories.mdx
+++ /dev/null
@@ -1,216 +0,0 @@
-import { css } from '@lion/core';
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { formatNumber, formatNumberToParts } from '../index.js';
-import allLocales from './all-locales.js';
-
-<Meta title="Localize/Numbers" />
-
-export const formatNumberDemoStyle = css`
-  .demo-table {
-    border-collapse: collapse;
-    text-align: right;
-  }
-  .demo-table thead > tr {
-    border-bottom: 1px solid grey;
-  }
-  .demo-table thead > tr > :first-child,
-  .demo-table tbody > tr > :first-child,
-  .demo-table tfoot > tr > :first-child {
-    text-align: left;
-  }
-  .demo-table th,
-  .demo-table td {
-    padding: 8px;
-  }
-`;
-export const value = 1234.56;
-
-# Number localization
-
-## Features
-
-- Small file size
-- Uses `Intl.NumberFormat` but patches browser inconsistencies
-
-## Formatting
-
-With the `formatNumber` you can safely display a number for all languages.
-
-The input value is `1234.56`.
-
-<Story name="Formatting">
-  {() => html`
-    <style>
-      ${formatNumberDemoStyle}
-    </style>
-    <table class="demo-table">
-      <thead>
-        <tr>
-          <th>Options</th>
-          <th>Output</th>
-          <th>Code</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>Default</td>
-          <td>${formatNumber(value)}</td>
-          <td></td>
-        </tr>
-        <tr>
-          <td>Currency symbol</td>
-          <td>
-            ${formatNumber(value, {
-              style: 'currency',
-              currencyDisplay: 'symbol',
-              currency: 'EUR',
-            })}
-          </td>
-          <td>
-            <code
-              >formatNumber({ style: 'currency', currencyDisplay: 'symbol', currency: 'EUR' })</code
-            >
-          </td>
-        </tr>
-        <tr>
-          <td>Currency code</td>
-          <td>
-            ${formatNumber(value, {
-              style: 'currency',
-              currencyDisplay: 'code',
-              currency: 'EUR',
-            })}
-          </td>
-          <td>
-            <code
-              >formatNumber({ style: 'currency', currencyDisplay: 'code', currency: 'EUR' })</code
-            >
-          </td>
-        </tr>
-        <tr>
-          <td>Locale</td>
-          <td>${formatNumber(value, { locale: 'nl-NL' })}</td>
-          <td><code>formatNumber({ locale: 'nl-NL' })</code></td>
-        </tr>
-        <tr>
-          <td>No decimals</td>
-          <td>
-            ${formatNumber(value, {
-              minimumFractionDigits: 0,
-              maximumFractionDigits: 0,
-            })}
-          </td>
-          <td>
-            <code>formatNumber({ minimumFractionDigits: 0, maximumFractionDigits: 0, })</code>
-          </td>
-        </tr>
-      </tbody>
-    </table>
-  `}
-</Story>
-
-## Formatting parts
-
-`formatNumberToParts` allows to get individual parts of a number on all browsers.
-
-The input value `1234.56` gets formatted via `formatNumberToParts(value, { style: 'currency', currency: 'EUR' })`
-
-<Story name="Formatting parts">
-  {() => html`
-    <style>
-      ${formatNumberDemoStyle}
-    </style>
-    <table class="demo-table">
-      <thead>
-        <tr>
-          <th>Part</th>
-          <th>Output</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${formatNumberToParts(1234.56, { style: 'currency', currency: 'EUR' }).map(
-          part => html`
-            <tr>
-              <td>${part.type}</td>
-              <td>${part.value}</td>
-            </tr>
-          `,
-        )}
-      </tbody>
-    </table>
-  `}
-</Story>
-
-## List common locales
-
-The input value is `1234.56`.
-Formatting happens via
-
-```js
-formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' });
-formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' });
-```
-
-<Story name="List common locales">
-  {() => html`
-    <style>
-      ${formatNumberDemoStyle}
-    </style>
-    <table class="demo-table">
-      <thead>
-        <tr>
-          <th>Locale</th>
-          <th>Output Euro</th>
-          <th>Output US Dollar</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${['en-GB', 'en-US', 'nl-NL', 'nl-BE', 'fr-FR', 'de-DE'].map(
-          locale => html`
-            <tr>
-              <td>${locale}</td>
-              <td>${formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' })}</td>
-              <td>${formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' })}</td>
-            </tr>
-          `,
-        )}
-      </tbody>
-    </table>
-  `}
-</Story>
-
-## List all locales
-
-The following list show number formatting for all known locales.
-
-The input value is `1234.56`.
-Formatting happens via
-
-```js
-formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' });
-formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' });
-```
-
-<Story name="List all locales">
-  {() => html`
-    <style>
-      ${formatNumberDemoStyle}
-    </style>
-    <table class="demo-table">
-      <tr>
-        <th>Locale</th>
-        <th>Output Euro</th>
-        <th>Output US Dollar</th>
-      </tr>
-      ${Object.keys(allLocales).map(
-        locale => html`
-          <tr>
-            <td>${locale}</td>
-            <td>${formatNumber(1234.56, { locale, style: 'currency', currency: 'EUR' })}</td>
-            <td>${formatNumber(1234.56, { locale, style: 'currency', currency: 'USD' })}</td>
-          </tr>
-        `,
-      )}
-    </table>
-  `}
-</Story>
diff --git a/packages/localize/stories/30-dates.stories.mdx b/packages/localize/stories/30-dates.stories.mdx
deleted file mode 100644
index f58341970..000000000
--- a/packages/localize/stories/30-dates.stories.mdx
+++ /dev/null
@@ -1,197 +0,0 @@
-import { css } from '@lion/core';
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { formatNumber, formatNumberToParts, formatDate } from '../index.js';
-import allLocales from './all-locales.js';
-
-<Meta title="Localize/Dates" />
-
-export const formatDateDemoStyle = css`
-  .demo-table {
-    border-collapse: collapse;
-    text-align: right;
-  }
-  .demo-table thead > tr {
-    border-bottom: 1px solid grey;
-  }
-  .demo-table thead > tr > :first-child,
-  .demo-table tbody > tr > :first-child,
-  .demo-table tfoot > tr > :first-child {
-    text-align: left;
-  }
-  .demo-table th,
-  .demo-table td {
-    padding: 8px;
-  }
-`;
-
-# Date localization
-
-## Features
-
-- Small file size
-- Uses `Intl.DateFormat` but patches browser inconsistencies
-
-## Formatting
-
-With the `formatDate` you can safely display dates for all languages.
-
-The input value is `new Date('1987/05/12')`.
-
-<Story name="Formatting">
-  {() => html`
-    <style>
-      ${formatDateDemoStyle}
-    </style>
-    <table class="demo-table">
-      <thead>
-        <tr>
-          <th>Output</th>
-          <th>Options</th>
-          <th>Code</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>${formatDate(new Date('1987/05/12'))}</td>
-          <td>Default</td>
-          <td><code>formatDate(new Date('1987/05/12'))</code></td>
-        </tr>
-        <tr>
-          <td>
-            ${formatDate(new Date('1987/05/12'), {
-              weekday: 'long',
-              year: 'numeric',
-              month: 'long',
-              day: '2-digit',
-            })}
-          </td>
-          <td>Date display</td>
-          <td>
-            <code
-              >formatDate(new
-              Date(){weekday:'long',year:'numeric',month:'long',day:'2-digit'})</code
-            >
-          </td>
-        </tr>
-        <tr>
-          <td>
-            ${formatDate(new Date('1987/05/12'), {
-              weekday: 'long',
-              month: 'long',
-              day: '2-digit',
-            })}
-          </td>
-          <td>Date without year</td>
-          <td>
-            <code>
-              formatDate(new Date('1987/05/12'), {weekday:'long',month:'long',day:'2-digit'})
-            </code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            ${formatDate(new Date('1987/05/12'), {
-              weekday: 'long',
-              year: 'numeric',
-              day: '2-digit',
-            })}
-          </td>
-          <td>Date without month</td>
-          <td>
-            <code>
-              formatDate(new Date('1987/05/12'), {weekday:'long',year:'numeric',day:'2-digit'})
-            </code>
-          </td>
-        </tr>
-        <tr>
-          <td>
-            ${formatDate(new Date('1987/05/12'), {
-              weekday: 'long',
-              month: 'long',
-              year: 'numeric',
-            })}
-          </td>
-          <td>Date without day</td>
-          <td>
-            <code>
-              formatDate(new Date('1987/05/12'), { weekday:'long',year:'numeric',month:'long' })
-            </code>
-          </td>
-        </tr>
-        <tr>
-          <td>${formatDate(new Date('1987/05/12'), { locale: 'nl-NL' })}</td>
-          <td>Locale</td>
-          <td><code>formatDate(new Date('1987/05/12'){ locale:'nl-NL' })</code></td>
-        </tr>
-      </tbody>
-    </table>
-  `}
-</Story>
-
-## List common locales
-
-The input value is `new Date('1987/05/12')`.
-Formatting happens via
-
-```js
-formatDate(new Date('1987/05/12'), { locale });
-```
-
-<Story name="List common locales">
-  {() => html`
-    <style>
-      ${formatDateDemoStyle}
-    </style>
-    <table class="demo-table">
-      <thead>
-        <tr>
-          <th>Locale</th>
-          <th>Output</th>
-        </tr>
-      </thead>
-      <tbody>
-        ${['en-GB', 'en-US', 'nl-NL', 'nl-BE', 'fr-FR', 'de-DE'].map(
-          locale => html`
-            <tr>
-              <td>${locale}</td>
-              <td>${formatDate(new Date('1987/05/12'), { locale })}</td>
-            </tr>
-          `,
-        )}
-      </tbody>
-    </table>
-  `}
-</Story>
-
-## List all locales
-
-The following list shows date formatting for all known locales.
-
-The input value is `new Date('1987/05/12')`.
-Formatting happens via
-
-```js
-formatDate(new Date('1987/05/12'), { locale });
-```
-
-<Story name="List all locales">
-  {() => html`
-    <style>
-      ${formatDateDemoStyle}
-    </style>
-    <table class="demo-table">
-      <tr>
-        <th>Locale</th>
-        <th>Output</th>
-      </tr>
-      ${Object.keys(allLocales).map(
-        locale => html`
-          <tr>
-            <td>${locale}</td>
-            <td>${formatDate(new Date('1987/05/12'), { locale })}</td>
-          </tr>
-        `,
-      )}
-    </table>
-  `}
-</Story>
diff --git a/packages/localize/stories/message.stories.js b/packages/localize/stories/message.stories.js
deleted file mode 100644
index f7a1947e6..000000000
--- a/packages/localize/stories/message.stories.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { LitElement, render } from '@lion/core';
-import { html } from '@open-wc/demoing-storybook';
-import { localize, LocalizeMixin } from '../index.js';
-
-import '@lion/helpers/sb-locale-switcher.js';
-
-export default {
-  title: 'Localize/System/_internals',
-};
-
-export const asFunction = () => {
-  const wrapper = document.createElement('div');
-  let message = 'Loading...';
-  function update() {
-    message = localize.msg('lit-html-example:body');
-    render(
-      html`
-        <p>${message}</p>
-        <sb-locale-switcher></sb-locale-switcher>
-      `,
-      wrapper,
-    );
-  }
-  localize
-    .loadNamespace({
-      'lit-html-example': locale => import(`./translations/${locale}.js`),
-    })
-    .then(() => {
-      update();
-    });
-  localize.addEventListener('localeChanged', () => {
-    localize.loadingComplete.then(() => update());
-  });
-  return wrapper;
-};
-
-export const webComponent = () => {
-  class MessageExample extends LocalizeMixin(LitElement) {
-    static get localizeNamespaces() {
-      return [
-        { 'lit-html-example': locale => import(`./translations/${locale}.js`) },
-        ...super.localizeNamespaces,
-      ];
-    }
-
-    render() {
-      return html`
-        <div aria-live="polite">
-          <p>${localize.msg('lit-html-example:body')}</p>
-        </div>
-      `;
-    }
-  }
-  if (!customElements.get('message-example')) {
-    customElements.define('message-example', MessageExample);
-  }
-  return html`
-    <message-example></message-example>
-    <sb-locale-switcher></sb-locale-switcher>
-  `;
-};
diff --git a/packages/overlays/README.md b/packages/overlays/README.md
index 0c80c4ef4..749a3c140 100644
--- a/packages/overlays/README.md
+++ b/packages/overlays/README.md
@@ -1,5 +1,13 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Overlay System
 
+```js script
+export default {
+  title: 'Overlays/Intro',
+};
+```
+
 Supports different types of overlays like dialogs, toasts, tooltips, dropdown, etc.
 
 Manages their position on the screen relative to other elements, including other overlays.
@@ -10,11 +18,14 @@ See [lion-dialog](../dialog) and [lion-tooltip](../tooltip) for example Web Comp
 
 ## Features
 
+- local rendering (at dom location)
+  - positioning with popper.js
+- global rendering (at body level)
+- fully accessible
+- flexible to build multiple overlay components
 - lion-overlay web component:
-
   - Show content when clicking the invoker
   - Have a `.config` object to set or update the OverlayController's configuration
-
 - [**OverlaysManager**](./docs/OverlaysManager.md), a global repository keeping track of all different types of overlays
 - [**OverlayController**](./docs/OverlayController.md), a single controller class for handling overlays
 - **OverlayMixin**, a mixin that can be used to create webcomponents that use the OverlayController under the hood
@@ -26,6 +37,7 @@ Usually you will use `lion-dialog` (or `lion-tooltip` if this makes more sense).
 ### Installation
 
 ```sh
+npm i --save @lion/overlays
 npm i --save @lion/dialog
 ```
 
@@ -54,10 +66,6 @@ html`
 
 Or by creating a controller yourself
 
-```sh
-npm i --save @lion/overlays
-```
-
 ```js
 import { OverlayController } from '@lion/overlays';
 
diff --git a/packages/overlays/stories/20-index.stories.mdx b/packages/overlays/docs/20-index.md
similarity index 55%
rename from packages/overlays/stories/20-index.stories.mdx
rename to packages/overlays/docs/20-index.md
index 2dff7aede..4751f9d47 100644
--- a/packages/overlays/stories/20-index.stories.mdx
+++ b/packages/overlays/docs/20-index.md
@@ -1,17 +1,24 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
+# Overlay System
+
+```js script
+import { html } from 'lit-html';
 import {
   OverlayMixin,
   withBottomSheetConfig,
   withDropdownConfig,
   withModalDialogConfig,
 } from '../index.js';
-import './demo-overlay-system.js';
-import './applyDemoOverlayStyles.js';
-import { ref as r } from './directives/ref.js';
 
-<Meta title="Overlays/System/Overview" parameters={{ component: 'demo-overlay-system' }} />
+import '../docs/demo-overlay-system.js';
+import '../docs/applyDemoOverlayStyles.js';
+import { ref as r } from '../docs/directives/ref.js';
 
-# Overlay System
+export default {
+  title: 'Overlays/System/Overview',
+};
+```
 
 The overlay system allows to create different types of overlays like dialogs, toasts, tooltips,
 dropdown, etc.
@@ -20,60 +27,20 @@ On top of this, the system was built having accessibility in mind.
 
 For a detailed rationale, please consult [Rationale](/?path=/docs/overlays-system-rationale--page).
 
-<Story name="Default">
-  {html`
-    <demo-overlay-system>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-          Hello! You can close this notification here:
-          <button
-            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-          >
-            ⨯
-          </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
+```js story
+export const main = () => html`
+  <demo-overlay-system>
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
 ```
 
-## Features
-- support for various types of (preconfigured) overlays
-- accessibility out of the box
-- advanced positioning for both 'local' and 'global' overlays
-- highly configurable/customizable
-- a base mixin that can be used to build your own overlay web components
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/overlays
-```
-
-The '@lion/overlays' package should only be used by **subclassers** who want to either:
-- Use OverlayMixin to create Web Components that use OverlayController under the hood (common use case)
-- Extend or use OverlayController
-
-Next we will go in depth into the three main layers of our overlay system:
-- OverlayController, handles logic of a single overlay instance
-- OverlayMixin, an easy way to create a Web Component that acts as an overlay
-- OverlaysManager, handles logic which requires knowledge of all active overlays
-
 ## OverlayController
 
 OverlayController is the single class we instantiate whenever creating an overlay instance.
@@ -126,6 +93,7 @@ or in your Web Component with `OverlayMixin`, make sure you override these metho
 - Define a template which includes:
   - invoker slot for your user to provide the invoker node (the element that invokes the overlay content)
   - content slot for your user to provide the content that shows when the overlay is opened
+  - \_overlay-shadow-outlet, this slot is currently necessary under the hood for acting as a wrapper element for placement purposes, but is not something your end user should be concerned with, unless they are extending your component.
 
 ```js
 _defineOverlayConfig() {
@@ -190,52 +158,27 @@ Will be supported in the near future.
 This can be done declaratively as shown below.
 Drag the viewport under 600px and open the overlay to see the `withBottomSheetConfig` applied.
 
-<Story name="Responsive switching">
-  {html`
-    <demo-overlay-system
-      .config=${{ ...withBottomSheetConfig() }}
-      @before-opened=${e => {
-        if (window.innerWidth >= 600) {
-          e.target.config = { ...withModalDialogConfig() };
-        } else {
-          e.target.config = { ...withBottomSheetConfig() };
-        }
-      }}
-    >
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system
-  .config=${{ ...withBottomSheetConfig() }}
-  @before-opened=${e => {
-    if (window.innerWidth >= 600) {
-      e.target.config = { ...withModalDialogConfig() };
-    } else {
-      e.target.config = { ...withBottomSheetConfig() };
-    }
-  }}
->
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
+```js preview-story
+export const responsiveSwitching = () => html`
+  <demo-overlay-system
+    .config=${{ ...withBottomSheetConfig() }}
+    @before-opened=${e => {
+      if (window.innerWidth >= 600) {
+        e.target.config = { ...withModalDialogConfig() };
+      } else {
+        e.target.config = { ...withBottomSheetConfig() };
+      }
+    }}
+  >
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
 ```
 
 Alternative ways to do it is by setting the event listener manually on the `OverlayController` instance.
@@ -278,67 +221,47 @@ _defineOverlay({ invokerNode, contentNode }) {
 
 Below is another demo where you can toggle between configurations using buttons.
 
-<Story name="Responsive Switching 2">
-  {html`
-    <style>
-      .buttons button:not(:first-child) {
-        margin: 10px;
-      }
-    </style>
-    Change config to:
-    <div class="buttons">
-      <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withModalDialogConfig() } }}>
-        Modal Dialog
-      </button>
-      <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withBottomSheetConfig() } }}>
-        Bottom Sheet
-      </button>
-      <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withDropdownConfig() } }}>
-        Dropdown
-      </button>
-    </div>
-    <demo-overlay-system id="respSwitchOverlay" .config=${{ ...withDropdownConfig() }}>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```js
-import { withModalDialogConfig, withBottomSheetConfig, withDropdownConfig } from '@lion/overlays';
-```
-
-```html
-Change config to:
-<div class="buttons">
-  <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withModalDialogConfig() } }}>
-    Modal Dialog
-  </button>
-  <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withBottomSheetConfig() } }}>
-    Bottom Sheet
-  </button>
-  <button @click=${() => { document.getElementById('respSwitchOverlay').config = { ...withDropdownConfig() } }}>
-    Dropdown
-  </button>
-</div>
-<demo-overlay-system id="respSwitchOverlay" .config=${{ ...withDropdownConfig() }}>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
+```js preview-story
+export const responsiveSwitching2 = () => html`
+  <style>
+    .buttons button:not(:first-child) {
+      margin: 10px;
+    }
+  </style>
+  Change config to:
+  <div class="buttons">
     <button
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      @click=${() => {
+        document.getElementById('respSwitchOverlay').config = { ...withModalDialogConfig() };
+      }}
     >
-      ⨯
+      Modal Dialog
+    </button>
+    <button
+      @click=${() => {
+        document.getElementById('respSwitchOverlay').config = { ...withBottomSheetConfig() };
+      }}
+    >
+      Bottom Sheet
+    </button>
+    <button
+      @click=${() => {
+        document.getElementById('respSwitchOverlay').config = { ...withDropdownConfig() };
+      }}
+    >
+      Dropdown
     </button>
   </div>
-</demo-overlay-system>
+  <demo-overlay-system id="respSwitchOverlay" .config=${{ ...withBottomSheetConfig() }}>
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
 ```
 
 ## Opened state
@@ -349,60 +272,31 @@ whether the overlay content is displayed or not.
 You can also listen to the event `opened-changed` which is fired whenever `opened` is toggled.
 This can be useful e.g. if somewhere in your application you need to rely on this "state".
 
-<Story name="Opened state">
-  {() => {
-    const appState = {
-      opened: false,
-    };
-    const refs = {};
-    function onOpenClosed(ev) {
-      appState.opened = ev.target.opened;
-      refs.openedState.innerText = appState.opened;
-    }
-    return html`
-      appState.opened: <span #openedState=${r(refs)}>${appState.opened}</span>
-      <demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
-        <button slot="invoker">Overlay</button>
-        <div slot="content" class="demo-overlay">
-          Hello! You can close this notification here:
-          <button
-            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-          >
-            ⨯
-          </button>
-        </div>
-      </demo-overlay-system>
-    `;
-  }}
-</Story>
-
-```js
-const appState = {
-  opened: false,
+```js preview-story
+export const openedState = () => {
+  const appState = {
+    opened: false,
+  };
+  const refs = {};
+  function onOpenClosed(ev) {
+    appState.opened = ev.target.opened;
+    refs.openedState.innerText = appState.opened;
+  }
+  return html`
+    appState.opened: <span #openedState=${r(refs)}>${appState.opened}</span>
+    <demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
+      <button slot="invoker">Overlay</button>
+      <div slot="content" class="demo-overlay">
+        Hello! You can close this notification here:
+        <button
+          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+        >
+          ⨯
+        </button>
+      </div>
+    </demo-overlay-system>
+  `;
 };
-
-// Function that syncs our appState (and also Node reference to make it visible in our demo)
-function onOpenClosed(ev) {
-  appState.opened = ev.target.opened;
-  openedStateNode.innerText = appState.opened;
-}
-```
-
-```html
-<div>
-  appState.opened: ${openedStateNode}
-</div>
-<demo-overlay-system .opened="${appState.opened}" @opened-changed=${onOpenClosed}>
-  <button slot="invoker">Overlay</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
 ```
 
 ## Intercepting open/close
@@ -410,54 +304,47 @@ function onOpenClosed(ev) {
 It is possible to intercept the open/close process by calling `.preventDefault()` on
 the `before-close` or `before-open` events.
 
-<Story name="Intercept open/close">
-  {() => {
-    // Application code
-    let blockOverlay = true;
-    const refs = {};
-    function intercept(ev) {
-      if (blockOverlay) {
-        ev.preventDefault();
-      }
-    }
-    return html`
-      Overlay blocked state:
-      <button #statusButton=${r(refs)} @click="${() => {
-        blockOverlay = !blockOverlay;
-        refs.statusButton.textContent = blockOverlay;
-      }}">${blockOverlay}</button>
-      <demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
-        <button slot="invoker" @click=${() => console.log('blockOverlay', blockOverlay, 'opened', refs.overlay.opened)}>Overlay</button>
-        <div slot="content" class="demo-overlay">
-          Hello! You can close this notification here:
-          <button @click=${() => refs.overlay.opened = false}>⨯</button>
-        </div>
-      </demo-overlay-system>
-    `;
-  }}
-</Story>
-
-```js
+```js preview-story
+export const interceptingOpenClose = () => {
   // Application code
+  let blockOverlay = true;
   const refs = {};
   function intercept(ev) {
     if (blockOverlay) {
       ev.preventDefault();
     }
   }
+  return html`
+    Overlay blocked state:
+    <button
+      #statusButton=${r(refs)}
+      @click="${() => {
+        blockOverlay = !blockOverlay;
+        refs.statusButton.textContent = blockOverlay;
+      }}"
+    >
+      ${blockOverlay}
+    </button>
+    <demo-overlay-system
+      #overlay=${r(refs)}
+      @before-closed=${intercept}
+      @before-opened=${intercept}
+    >
+      <button
+        slot="invoker"
+        @click=${() => console.log('blockOverlay', blockOverlay, 'opened', refs.overlay.opened)}
+      >
+        Overlay
+      </button>
+      <div slot="content" class="demo-overlay">
+        Hello! You can close this notification here:
+        <button @click=${() => (refs.overlay.opened = false)}>⨯</button>
+      </div>
+    </demo-overlay-system>
+  `;
+};
 ```
 
-```html
-  <demo-overlay-system #overlay=${r(refs)} @before-closed=${intercept} @before-opened=${intercept}>
-    <button slot="invoker">Overlay</button>
-    <div slot="content" class="demo-overlay">
-      Hello! You can close this notification here:
-      <button @click=${() => refs.overlay.opened = false}>⨯</button>
-    </div>
-  </demo-overlay-system>
-```
-
-
 ## OverlayMixin
 
 OverlayMixin is a mixin anyone can use to create a Web Component which has a
@@ -530,74 +417,44 @@ The overlay manager keeps track of all registered overlays and controls which on
 
 Below an example is shown with the `isBlocking` option, which makes use of the OverlaysManager's capabilities.
 
-<Story name="OverlaysManager">
-  {html`
-    <demo-overlay-system .config=${{ hasBackdrop: true }}>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-        <div>
-          <button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
-        </div>
-      </div>
-    </demo-overlay-system>
-    <demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
-      <div slot="content" class="demo-overlay demo-overlay--second">
-        Hello! You can close this notification here:
-        <button
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
+```js preview-story
+export const overlayManager = () => html`
+  <demo-overlay-system .config=${{ hasBackdrop: true }}>
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>
+        ⨯
+      </button>
+      <div>
+        <button @click=${() => (document.getElementById('secondOverlay').opened = true)}>
+          Click me to open another overlay which is blocking
         </button>
       </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ hasBackdrop: true }}>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-    <div>
-      <button @click=${() => document.getElementById('secondOverlay').opened = true }>Click me to open another overlay which is blocking</button>
     </div>
-  </div>
-</demo-overlay-system>
-
-<demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
-  <div slot="content" class="demo-overlay demo-overlay--second">
-    Hello! You can close this notification here:
-    <button
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
+  </demo-overlay-system>
+  <demo-overlay-system id="secondOverlay" .config=${{ hasBackdrop: true, isBlocking: true }}>
+    <div slot="content" class="demo-overlay demo-overlay--second">
+      Hello! You can close this notification here:
+      <button @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}>
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
 ```
 
-
 ## Local Backdrop
+
 We provide a possibility to add a backdrop to a locally placed overlay.
 You can pass your backdropNode as a configuration parameter and control its styling reacting upon OverlayController events.
 Here is the example below
 
-<Story name="Local backdrop">
-  {() => {
-    let backdropNode = document.createElement('div');
-    backdropNode.classList.add('local-backdrop-01');
-    return html`
+```js preview-story
+export const localBackdrop = () => {
+  let backdropNode = document.createElement('div');
+  backdropNode.classList.add('local-backdrop-01');
+  return html`
     <style>
       .local-backdrop-01 {
         position: fixed;
@@ -612,8 +469,8 @@ Here is the example below
       }
     </style>
     <demo-overlay-system
-      @before-opened=${(e) => backdropNode.style.display = 'block'}
-      @before-closed=${(e) => backdropNode.style.display = 'none'}
+      @before-opened=${e => (backdropNode.style.display = 'block')}
+      @before-closed=${e => (backdropNode.style.display = 'none')}
       .config=${{ hasBackdrop: true, placementMode: 'local', backdropNode }}
     >
       <button slot="invoker">Click me to open the overlay!</button>
@@ -626,55 +483,23 @@ Here is the example below
         </button>
       </div>
     </demo-overlay-system>
-  `}}
-</Story>
-
-```js
-  let backdropNode = document.createElement('div');
-  backdropNode.classList.add('local-backdrop-01');
-  return html`
-  <style>
-    .local-backdrop-01 {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      background-color: red;
-      opacity: 0.3;
-      display: none;
-    }
-  </style>
-  <demo-overlay-system
-    @before-opened=${(e) => backdropNode.style.display = 'block'}
-    @before-closed=${(e) => backdropNode.style.display = 'none'}
-    .config=${{ hasBackdrop: true, placementMode: 'local', backdropNode }}
-  >
-    <button slot="invoker">Click me to open the overlay!</button>
-    <div slot="content" class="demo-overlay">
-      Hello! You can close this notification here:
-      <button
-        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-      >
-        ⨯
-      </button>
-    </div>
-  </demo-overlay-system>
+  `;
+};
 ```
 
 ## Declarative Local Backdrop
+
 Another way to add custom backdrop is declaratively add an element with `slot="backdrop"`.
 
-<Story name="Declarative Local Backdrop">
-  {() => {
-    const beforeOpened = () => {
-      document.querySelector('.local-backdrop-02').style.display = 'block';
-    }
-    const beforeClosed = () => {
-      document.querySelector('.local-backdrop-02').style.display = 'none';
-    }
-    return html`
+```js preview-story
+export const declarativeLocalBackdrop = () => {
+  const beforeOpened = () => {
+    document.querySelector('.local-backdrop-02').style.display = 'block';
+  };
+  const beforeClosed = () => {
+    document.querySelector('.local-backdrop-02').style.display = 'none';
+  };
+  return html`
     <style>
       .local-backdrop-02 {
         position: fixed;
@@ -704,49 +529,10 @@ Another way to add custom backdrop is declaratively add an element with `slot="b
         </button>
       </div>
     </demo-overlay-system>
-  `}}
-</Story>
-
-```js
-  const beforeOpened = () => {
-    document.querySelector('.local-backdrop-02').style.display = 'block';
-  }
-  const beforeClosed = () => {
-    document.querySelector('.local-backdrop-02').style.display = 'none';
-  }
-  return html`
-  <style>
-    .local-backdrop-02 {
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1;
-      background-color: red;
-      opacity: 0.3;
-      display: none;
-    }
-  </style>
-  <demo-overlay-system
-    @before-opened=${beforeOpened}
-    @before-closed=${beforeClosed}
-    .config=${{ hasBackdrop: true, placementMode: 'local' }}
-  >
-    <div slot="backdrop" class="local-backdrop-02"></div>
-    <button slot="invoker">Click me to open the overlay!</button>
-    <div slot="content" class="demo-overlay">
-      Hello! You can close this notification here:
-      <button
-        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-      >
-        ⨯
-      </button>
-    </div>
-  </demo-overlay-system>
+  `;
+};
 ```
 
-
 ### Nested Overlays
 
 Overlays can be nested, as the demo below shows.
diff --git a/packages/overlays/stories/30-system-rationale.stories.mdx b/packages/overlays/docs/30-system-rationale.md
similarity index 98%
rename from packages/overlays/stories/30-system-rationale.stories.mdx
rename to packages/overlays/docs/30-system-rationale.md
index 0146521fe..57a371fd4 100644
--- a/packages/overlays/stories/30-system-rationale.stories.mdx
+++ b/packages/overlays/docs/30-system-rationale.md
@@ -1,9 +1,13 @@
-import { Meta } from '@open-wc/demoing-storybook';
-
-<Meta title="Overlays/System/Rationale" />
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
 
 # Rationale
 
+```js script
+export default {
+  title: 'Overlays/System/Rationale',
+};
+```
+
 This page describes the goal and duties of the overlay system, mainly by identifying all different
 appearances and types of overlays.
 
@@ -84,7 +88,7 @@ to consult the W3C. This website shows a full list with specifications of access
 <https://www.w3.org/TR/wai-aria-practices/>.
 A great overview of all widget-, structure- and role relations can be found in the ontology diagram
 below:
-![rdf_model](https://www.w3.org/TR/wai-aria-1.1/img/rdf_model.png)
+
 <https://www.w3.org/WAI/PF/aria-1.1/rdf_model.svg>
 
 Out of all the overlay names mentioned above, we can only identify the dialog and the tooltip as
diff --git a/packages/overlays/docs/40-system-configuration.md b/packages/overlays/docs/40-system-configuration.md
new file mode 100644
index 000000000..fdd16d88c
--- /dev/null
+++ b/packages/overlays/docs/40-system-configuration.md
@@ -0,0 +1,365 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
+# Overlay System - Configuration
+
+```js script
+import { html } from 'lit-html';
+import '../docs/demo-overlay-system.js';
+import '../docs/applyDemoOverlayStyles.js';
+
+export default {
+  title: 'Overlays/System/Configuration',
+};
+```
+
+The `OverlayController` has many configuration options.
+Using different combinations of those properties, different components like a tooltip, popover,
+dialog etc. can be made.
+The `OverlayMixin` exposes these options via `.config`.
+
+## placementMode
+
+Either `'local'` or `'global'`.
+This determines the DOM position of the `contentNode`, either next to the invokerNode,
+or in the `global-overlays` container at the bottom of the `<body>`.
+
+Local:
+
+```js preview-story
+export const placementLocal = () => html`
+  <demo-overlay-system .config=${{ placementMode: 'local' }}>
+    <button slot="invoker">Click me to open the local overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+Global:
+
+```js preview-story
+export const placementGlobal = () => html`
+  <demo-overlay-system .config=${{ placementMode: 'global' }}>
+    <button slot="invoker">Click me to open the global overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+## trapsKeyboardFocus
+
+Boolean property. When true, the focus will rotate through the **focusable elements** inside the `contentNode`.
+
+For Modal Dialogs this is an important feature, since these are considered "their own page",
+so especially from an accessibility point of view, trapping the focus inside the dialog is crucial.
+
+You use the feature on any type of overlay.
+
+```js preview-story
+export const trapsKeyboardFocus = () => html`
+  <demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      <div><a href="#">A focusable anchor</a></div>
+      <div><a href="#">Another focusable anchor</a></div>
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+## hidesOnEsc
+
+Boolean property. Will allow closing the overlay on ESC key when enabled.
+
+> On MacOS with touchbar, it only works if you view the canvas demo and click "Open canvas in new tab".
+
+```js preview-story
+export const hidesOnEsc = () => html`
+  <demo-overlay-system .config=${{ hidesOnEsc: true }}>
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+## hidesOnOutsideClick
+
+Boolean property. Will allow closing the overlay by clicking outside the `contentNode`.
+
+```js preview-story
+export const hidesOnOutsideClick = () => html`
+  <demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+## elementToFocusAfterHide
+
+HTMLElement. Will `.focus()` the HTMLElement passed to this property. By default, this is the `invokerNode`.
+
+In the example, we focus the body instead of the `invokerNode`.
+
+```js preview-story
+export const elementToFocusAfterHide = () => html`
+  <demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+## hasBackdrop
+
+Boolean property. When true, will add a backdrop when the overlay is opened.
+
+> Backdrops will overlay each other if you open nested overlays with enabled backdrops.
+> If this is not what you intend, you can make the overlays not nested, where opening one, closes the other.
+> Fortunately, we also have a configuration option that simulates that behavior in the next section `isBlocking`.
+
+The backdrop styling can be configured by targeting the `.global-overlays .global-overlays__backdrop` css selector.
+
+The backdrop animation can be configured by targeting the
+`.global-overlays .global-overlays__backdrop--fade-in` and
+`.global-overlays .global-overlays__backdrop--fade-out` css selector.
+This currently only supports CSS Animations, because it relies on the `animationend` event to add/remove classes.
+
+```js preview-story
+export const hasBackdrop = () => html`
+  <demo-overlay-system .config=${{ hasBackdrop: true }}>
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+## isBlocking
+
+Boolean property. When true, will add a backdrop when the overlay is opened.
+
+> Backdrops will overlay each other if you open nested overlays with enabled backdrops.
+> If this is not what you intend, you can make the overlays not nested, where opening one, closes the other.
+> Fortunately, we also have a configuration option that simulates that behavior in the next section `isBlocking`.
+
+The backdrop styling can be configured by targeting the `.global-overlays .global-overlays__backdrop` css selector.
+
+The backdrop animation can be configured by targeting the
+`.global-overlays .global-overlays__backdrop--fade-in` and
+`.global-overlays .global-overlays__backdrop--fade-out` css selector.
+This currently only supports CSS Animations, because it relies on the `animationend` event to add/remove classes.
+
+```js preview-story
+export const isBlocking = () => html`
+  <demo-overlay-system .config=${{ hasBackdrop: true }}>
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      <div>
+        <demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
+          <button slot="invoker">Click me to open another overlay which is blocking</button>
+          <div slot="content" class="demo-overlay demo-overlay--blocking">
+            Hello! You can close this notification here:
+            <button
+              class="close-button"
+              @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+            >
+              ⨯
+            </button>
+          </div>
+        </demo-overlay-system>
+      </div>
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+This example shows nested overlays, but they don't have to be. For example, they could be siblings, or completely unrelated.
+When an overlay with `isBlocking` is opened, all other overlays are hidden by the `OverlaysManager`, which, as a global registry, is aware of all active overlays on the page.
+
+## preventsScroll
+
+Boolean property. When true, prevents scrolling content that is outside of the `contentNode`.
+
+```js preview-story
+export const preventsScroll = () => html`
+  <demo-overlay-system .config=${{ preventsScroll: true }}>
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+## viewportConfig
+
+Determines where the overlay is placed relative to the viewport. This can only be used in combination with a 'global' `placementMode`.
+
+Options:
+
+- 'top-left'
+- 'top'
+- 'top-right'
+- 'right'
+- 'bottom-left'
+- 'bottom'
+- 'bottom-right'
+- 'left'
+- 'center'
+
+```js preview-story
+export const viewportConfig = () => html`
+  <demo-overlay-system
+    .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left' } }}
+  >
+    <button slot="invoker">Click me to open the overlay in the top left corner!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+## popperConfig for local overlays (placementMode: 'local')
+
+For locally DOM positioned overlays that position themselves relative to their invoker, we use <a href="https://popper.js.org/" target="_blank">Popper.js</a> for positioning.
+
+> In Popper, `contentNode` is often referred to as `popperElement`, and `invokerNode` is often referred to as the `referenceElement`.
+
+Features:
+
+- Everything Popper features!
+- Currently eagerly loads popper if mode is local, in the constructor. Loading during idle time / using prefetch would be better, this is still WIP. PRs are welcome!
+
+> Popper strictly is scoped on positioning. **It does not change the dimensions of the content node nor the invoker node**.
+> This also means that if you use the arrow feature, you are in charge of styling it properly, use the x-placement attribute for this.
+> An example implementation can be found in [lion-tooltip](?path=/docs/overlays-tooltip), where an arrow is set by default.
+
+To override the default options we set for local mode, you add a `popperConfig` object to the config passed to the OverlayController.
+Here's a succinct overview of some often used popper properties:
+
+```js preview-story
+export const popperConfig = () => html`
+  <demo-overlay-system
+    .config=${{
+      placementMode: 'local',
+      popperConfig: {
+        /* Placement of content node, relative to invoker node */
+        placement: 'bottom-start',
+        positionFixed: true,
+        modifiers: {
+          /* Prevents detachment of content node from invoker node */
+          keepTogether: {
+            enabled: true,
+          },
+          /* When enabled, adds shifting/sliding behavior on secondary axis */
+          preventOverflow: {
+            enabled: false,
+            boundariesElement: 'viewport',
+            /* When enabled, this is the <boundariesElement>-margin for the secondary axis */
+            padding: 32,
+          },
+          /* Use to adjust flipping behavior or constrain directions */
+          flip: {
+            boundariesElement: 'viewport',
+            /* <boundariesElement>-margin for flipping on primary axis */
+            padding: 16,
+          },
+          /* When enabled, adds an offset to either primary or secondary axis */
+          offset: {
+            enabled: true,
+            /* margin between content node and invoker node */
+            offset: `0, 16px`,
+          },
+        },
+      },
+    }}
+  >
+    <button slot="invoker">Click me to open the overlay!</button>
+    <div slot="content" class="demo-overlay">
+      Hello! You can close this notification here:
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </demo-overlay-system>
+`;
+```
+
+> Note: popperConfig reflects [Popper.js API](https://popper.js.org/popper-documentation.html)
diff --git a/packages/overlays/docs/OverlaySystemScope.md b/packages/overlays/docs/OverlaySystemScope.md
index d220a4779..b3cb3d6cc 100644
--- a/packages/overlays/docs/OverlaySystemScope.md
+++ b/packages/overlays/docs/OverlaySystemScope.md
@@ -1,5 +1,13 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Overlay System: Scope
 
+```js script
+export default {
+  title: 'Overlays/Scope',
+};
+```
+
 The goal of this document is to specify the goal and duties of the overlay system, mainly by
 identifying all different appearances and types of overlays.
 
@@ -73,7 +81,7 @@ to consult the W3C. This website shows a full list with specifications of access
 <https://www.w3.org/TR/wai-aria-practices/>.
 A great overview of all widget-, structure- and role relations can be found in the ontology diagram
 below:
-![rdf_model](/uploads/5aa251bd4a7a1ec36241d20e0af8cbb3/rdf_model.png)
+
 <https://www.w3.org/WAI/PF/aria-1.1/rdf_model.svg>
 
 Out of all the overlay names mentioned above, we can only identify the dialog and the tooltip as
diff --git a/packages/overlays/stories/applyDemoOverlayStyles.js b/packages/overlays/docs/applyDemoOverlayStyles.js
similarity index 100%
rename from packages/overlays/stories/applyDemoOverlayStyles.js
rename to packages/overlays/docs/applyDemoOverlayStyles.js
diff --git a/packages/overlays/stories/demo-overlay-system.js b/packages/overlays/docs/demo-overlay-system.js
similarity index 95%
rename from packages/overlays/stories/demo-overlay-system.js
rename to packages/overlays/docs/demo-overlay-system.js
index 589888af8..04751922d 100644
--- a/packages/overlays/stories/demo-overlay-system.js
+++ b/packages/overlays/docs/demo-overlay-system.js
@@ -2,6 +2,7 @@ import { html, LitElement } from '@lion/core';
 import { OverlayMixin } from '../src/OverlayMixin.js';
 
 class DemoOverlaySystem extends OverlayMixin(LitElement) {
+  // eslint-disable-next-line class-methods-use-this
   _defineOverlayConfig() {
     return {
       placementMode: 'global',
diff --git a/packages/overlays/stories/directives/ref.js b/packages/overlays/docs/directives/ref.js
similarity index 100%
rename from packages/overlays/stories/directives/ref.js
rename to packages/overlays/docs/directives/ref.js
diff --git a/packages/overlays/stories/10-intro.stories.mdx b/packages/overlays/stories/10-intro.stories.mdx
deleted file mode 100644
index fff4e95db..000000000
--- a/packages/overlays/stories/10-intro.stories.mdx
+++ /dev/null
@@ -1,35 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-<Meta title="Overlays/Intro" />
-
-# Overlay System
-
-The overlay system allows to create different types of overlays like dialogs, toasts, tooltips, dropdown, etc.
-It's designed to be highly flexible, while still delivering sensible defaults.
-On top of this, the system was built having accessibility in mind.
-
-## Features
-
-- local rendering (at dom location)
-  - positioning with popper.js
-- global rendering (at body level)
-- fully accessible
-- flexible to build multiple overlay components
-
-## Content
-
-The Overlays System offers the following features.
-
-| Package                                                               | Version                                                                                                                              | Description                                            |
-| --------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------ |
-| [overlays](?path=/docs/overlays-system-overview--default-story)       | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays)                         | Overlay System                                         |
-| [dialog](?path=/docs/overlays-dialog--default-story)                  | [![dialog](https://img.shields.io/npm/v/@lion/dialog.svg)](https://www.npmjs.com/package/@lion/dialog)                               | Dialog element                                         |
-| [tooltip](?path=/docs/overlays-tooltip--default-story)                | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip)                            | Tooltip element                                        |
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/overlays
-```
diff --git a/packages/overlays/stories/40-system-configuration.stories.mdx b/packages/overlays/stories/40-system-configuration.stories.mdx
deleted file mode 100644
index 0e7827da3..000000000
--- a/packages/overlays/stories/40-system-configuration.stories.mdx
+++ /dev/null
@@ -1,568 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-import './demo-overlay-system.js';
-import './applyDemoOverlayStyles.js';
-
-<Meta title="Overlays/System/Configuration" parameters={{ component: 'demo-overlay-system' }} />
-
-# Overlay System - Configuration
-
-The `OverlayController` has many configuration options.
-Using different combinations of those properties, different components like a tooltip, popover,
-dialog etc. can be made.
-The `OverlayMixin` exposes these options via `.config`.
-
-## placementMode
-
-Either `'local'` or `'global'`.
-This determines the DOM position of the `contentNode`, either next to the invokerNode,
-or in the `global-overlays` container at the bottom of the `<body>`.
-
-Local:
-<Story name="placementMode: local">
-  {html`
-    <demo-overlay-system .config=${{ placementMode: 'local' }}>
-      <button slot="invoker">Click me to open the local overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ placementMode: 'local' }}>
-  <button slot="invoker">Click me to open the local overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-Global:
-<Story name="placementMode: global">
-  {html`
-    <demo-overlay-system .config=${{ placementMode: 'global' }}>
-      <button slot="invoker">Click me to open the global overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ placementMode: 'global' }}>
-  <button slot="invoker">Click me to open the local overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-## trapsKeyboardFocus
-
-Boolean property. When true, the focus will rotate through the **focusable elements** inside the `contentNode`.
-
-For Modal Dialogs this is an important feature, since these are considered "their own page",
-so especially from an accessibility point of view, trapping the focus inside the dialog is crucial.
-
-You use the feature on any type of overlay.
-
-<Story name="trapsKeyboardFocus">
-  {html`
-    <demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        <div><a href="#">A focusable anchor</a></div>
-        <div><a href="#">Another focusable anchor</a></div>
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ trapsKeyboardFocus: true }}>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    <div><a href="#">A focusable anchor</a></div>
-    <div><a href="#">Another focusable anchor</a></div>
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-## hidesOnEsc
-
-Boolean property. Will allow closing the overlay on ESC key when enabled.
-
-> On MacOS with touchbar, it only works if you view the canvas demo and click "Open canvas in new tab".
-
-<Story name="hidesOnEsc">
-  {html`
-    <demo-overlay-system .config=${{ hidesOnEsc: true }}>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ hidesOnEsc: true }}>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-## hidesOnOutsideClick
-
-Boolean property. Will allow closing the overlay by clicking outside the `contentNode`.
-
-<Story name="hidesOnOutsideClick">
-  {html`
-    <demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ hidesOnOutsideClick: true }}>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-## elementToFocusAfterHide
-
-HTMLElement. Will `.focus()` the HTMLElement passed to this property. By default, this is the `invokerNode`.
-
-In the example, we focus the body instead of the `invokerNode`.
-
-<Story name="elementToFocusAfterHide">
-  {html`
-    <demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ elementToFocusAfterHide: document.body }}>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-## hasBackdrop
-
-Boolean property. When true, will add a backdrop when the overlay is opened.
-
-> Backdrops will overlay each other if you open nested overlays with enabled backdrops.
-> If this is not what you intend, you can make the overlays not nested, where opening one, closes the other.
-> Fortunately, we also have a configuration option that simulates that behavior in the next section `isBlocking`.
-
-The backdrop styling can be configured by targeting the `.global-overlays .global-overlays__backdrop` css selector.
-
-The backdrop animation can be configured by targeting the
-`.global-overlays .global-overlays__backdrop--fade-in` and
-`.global-overlays .global-overlays__backdrop--fade-out` css selector.
-This currently only supports CSS Animations, because it relies on the `animationend` event to add/remove classes.
-
-<Story name="hasBackdrop">
-  {html`
-    <demo-overlay-system .config=${{ hasBackdrop: true }}>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ hasBackdrop: true }}>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-## isBlocking
-
-Boolean property. When true, will add a backdrop when the overlay is opened.
-
-> Backdrops will overlay each other if you open nested overlays with enabled backdrops.
-> If this is not what you intend, you can make the overlays not nested, where opening one, closes the other.
-> Fortunately, we also have a configuration option that simulates that behavior in the next section `isBlocking`.
-
-The backdrop styling can be configured by targeting the `.global-overlays .global-overlays__backdrop` css selector.
-
-The backdrop animation can be configured by targeting the
-`.global-overlays .global-overlays__backdrop--fade-in` and
-`.global-overlays .global-overlays__backdrop--fade-out` css selector.
-This currently only supports CSS Animations, because it relies on the `animationend` event to add/remove classes.
-
-<Story name="isBlocking">
-  {html`
-    <demo-overlay-system .config=${{ hasBackdrop: true }}>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        <div>
-          <demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
-            <button slot="invoker">Click me to open another overlay which is blocking</button>
-            <div slot="content" class="demo-overlay demo-overlay--blocking">
-              Hello! You can close this notification here:
-              <button
-                class="close-button"
-                @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-              >
-                ⨯
-              </button>
-            </div>
-          </demo-overlay-system>
-        </div>
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ hasBackdrop: true }}>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    <div>
-      <demo-overlay-system .config=${{ hasBackdrop: true, isBlocking: true }}>
-        <button slot="invoker">Click me to open another overlay which is blocking</button>
-        <div slot="content" class="demo-overlay demo-overlay--blocking">
-          Hello! You can close this notification here:
-          <button
-            class="close-button"
-            @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-          >
-            ⨯
-          </button>
-        </div>
-      </demo-overlay-system>
-    </div>
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-This example shows nested overlays, but they don't have to be. For example, they could be siblings, or completely unrelated.
-When an overlay with `isBlocking` is opened, all other overlays are hidden by the `OverlaysManager`, which, as a global registry, is aware of all active overlays on the page.
-
-## preventsScroll
-
-Boolean property. When true, prevents scrolling content that is outside of the `contentNode`.
-
-<Story name="preventsScroll">
-  {html`
-    <demo-overlay-system .config=${{ preventsScroll: true }}>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ preventsScroll: true }}>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-## viewportConfig
-
-Determines where the overlay is placed relative to the viewport. This can only be used in combination with a 'global' `placementMode`.
-
-Options:
-
-- 'top-left'
-- 'top'
-- 'top-right'
-- 'right'
-- 'bottom-left'
-- 'bottom'
-- 'bottom-right'
-- 'left'
-- 'center'
-
-<Story name="viewportConfig">
-  {html`
-    <demo-overlay-system .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
-      <button slot="invoker">Click me to open the overlay in the top left corner!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```html
-<demo-overlay-system .config=${{ placementMode: 'global', viewportConfig: { placement: 'top-left'} }}>
-  <button slot="invoker">Click me to open the overlay in the top left corner!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-
-## popperConfig for local overlays (placementMode: 'local')
-
-For locally DOM positioned overlays that position themselves relative to their invoker, we use <a href="https://popper.js.org/" target="_blank">Popper.js</a> for positioning.
-
-> In Popper, `contentNode` is often referred to as `popperElement`, and `invokerNode` is often referred to as the `referenceElement`.
-
-Features:
-
-- Everything Popper features!
-- Currently eagerly loads popper if mode is local, in the constructor. Loading during idle time / using prefetch would be better, this is still WIP. PRs are welcome!
-
-> Popper strictly is scoped on positioning. **It does not change the dimensions of the content node nor the invoker node**.
-> This also means that if you use the arrow feature, you are in charge of styling it properly, use the x-placement attribute for this.
-> An example implementation can be found in [lion-tooltip](?path=/docs/overlays-tooltip), where an arrow is set by default.
-
-To override the default options we set for local mode, you add a `popperConfig` object to the config passed to the OverlayController.
-Here's a succinct overview of some often used popper properties:
-
-<Story name="popperConfig">
-  {html`
-    <demo-overlay-system .config=${{
-      placementMode: 'local',
-      popperConfig: {
-        /* Placement of content node, relative to invoker node */
-        placement: 'bottom-start',
-        positionFixed: true,
-        modifiers: {
-          /* Prevents detachment of content node from invoker node */
-          keepTogether: {
-            enabled: true,
-          },
-          /* When enabled, adds shifting/sliding behavior on secondary axis */
-          preventOverflow: {
-            enabled: false,
-            boundariesElement: 'viewport',
-            /* When enabled, this is the <boundariesElement>-margin for the secondary axis */
-            padding: 32,
-          },
-          /* Use to adjust flipping behavior or constrain directions */
-          flip: {
-            boundariesElement: 'viewport',
-            /* <boundariesElement>-margin for flipping on primary axis */
-            padding: 16,
-          },
-          /* When enabled, adds an offset to either primary or secondary axis */
-          offset: {
-            enabled: true,
-            /* margin between content node and invoker node */
-            offset: `0, 16px`,
-          },
-        },
-      },
-    }}>
-      <button slot="invoker">Click me to open the overlay!</button>
-      <div slot="content" class="demo-overlay">
-        Hello! You can close this notification here:
-        <button
-          class="close-button"
-          @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-        >
-          ⨯
-        </button>
-      </div>
-    </demo-overlay-system>
-  `}
-</Story>
-
-```js
-<demo-overlay-system .config=${{
-  placementMode: 'local',
-  popperConfig: {
-    /* Placement of content node, relative to invoker node */
-    placement: 'bottom-start',
-    positionFixed: true,
-    modifiers: {
-      /* Prevents detachment of content node from invoker node */
-      keepTogether: {
-        enabled: true,
-      },
-      /* When enabled, adds shifting/sliding behavior on secondary axis */
-      preventOverflow: {
-        enabled: false,
-        boundariesElement: 'viewport',
-        /* When enabled, this is the <boundariesElement>-margin for the secondary axis */
-        padding: 32,
-      },
-      /* Use to adjust flipping behavior or constrain directions */
-      flip: {
-        boundariesElement: 'viewport',
-        /* <boundariesElement>-margin for flipping on primary axis */
-        padding: 16,
-      },
-      /* When enabled, adds an offset to either primary or secondary axis */
-      offset: {
-        enabled: true,
-        /* margin between content node and invoker node */
-        offset: `0, 16px`,
-      },
-    },
-  },
-}}>
-  <button slot="invoker">Click me to open the overlay!</button>
-  <div slot="content" class="demo-overlay">
-    Hello! You can close this notification here:
-    <button
-      class="close-button"
-      @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
-    >
-      ⨯
-    </button>
-  </div>
-</demo-overlay-system>
-```
-
-> Note: popperConfig reflects <a href="https://popper.js.org/popper-documentation.html" target="_blank">Popper.js API</a>
diff --git a/packages/radio-group/README.md b/packages/radio-group/README.md
index 2080bef12..d0ed1ffc7 100644
--- a/packages/radio-group/README.md
+++ b/packages/radio-group/README.md
@@ -2,12 +2,48 @@
 
 `lion-radio-group` component is webcomponent that enhances the functionality of the native `<input type="radio">` element. Its purpose is to provide a way for users to check a **single** option amongst a set of choices.
 
-You should use `lion-radio` inside this element.
+You should use `<lion-radio>`s inside this element.
+
+```js script
+import { html } from 'lit-html';
+import { loadDefaultFeedbackMessages, Required, Validator } from '@lion/validate';
+
+import './lion-radio-group.js';
+import './lion-radio.js';
+
+export default {
+  title: 'Forms/Radio Group',
+};
+
+loadDefaultFeedbackMessages();
+```
+
+```js preview-story
+export const main = () => html`
+  <lion-radio-group name="dinos" label="What are your favourite dinosaurs?">
+    <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
+    <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
+    <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
+  </lion-radio-group>
+`;
+```
+
+- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
+- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--default-story) instead
 
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-radio-group--default-story) for a live demo and API documentation
 
+## Features
+
+Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
+
+- Get or set the checked value of the group:
+  - modelValue (default) - `checkedValue()`
+  - formattedValue - `formattedValue()`
+  - serializedValue - `serializedValue()`
+
 ## How to use
 
 ### Installation
@@ -17,19 +53,133 @@ npm i --save @lion/radio-group
 ```
 
 ```js
+import { LionRadioGroup, LionRadio } from '@lion/radio-group';
+// or
 import '@lion/radio-group/lion-radio-group.js';
 import '@lion/radio-group/lion-radio.js';
 ```
 
-### Example
+### Model value
 
-```html
-<lion-radio-group name="dinos" label="What are your favourite dinosaurs?">
-  <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-  <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-  <lion-radio label="diplodocus" .choiceValue=${'diplodocus'} checked></lion-radio>
-</lion-radio-group>
+The `modelValue` of a `lion-radio-group` is string equal to the `choiceValue` of the `lion-radio` element that has been checked.
+
+Given the dinosaur example above, say that we were to select the last option (diplodocus).
+
+Then the `modelValue` of the `lion-radio-group` will look as follows:
+
+```js
+const groupElement = [parent].querySelector('lion-radio-group');
+groupElement.modelValue;
+  => "diplodocus";
 ```
 
-- Make sure that to use a name attribute as it is necessary for the [lion-form](../form)'s serialization result.
-- If you have many options for a user to pick from, consider using [`lion-select`](../select) instead
+### The `name` attribute
+
+The `name` attribute of a `lion-radio-group` automatically gets assigned to its `lion-radio` children. You can also specify names for the `lion-radio` elements, but if this name is different from the name assigned to `lion-radio-group`, then an exception will be thrown.
+
+Our recommendation would be to set the `name` attribute only on the `lion-radio-group` and not on the `lion-checkbox` elements.
+
+## Examples
+
+### Pre-select
+
+You can pre-select an option by adding the checked attribute to the selected `lion-radio`.
+
+```js preview-story
+export const preSelect = () => html`
+  <lion-radio-group name="dinos_2" label="What are your favourite dinosaurs?">
+    <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
+    <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} checked></lion-radio>
+    <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
+  </lion-radio-group>
+`;
+```
+
+### Disabled
+
+You can disable a specific `lion-radio` option by adding the `disabled` attribute.
+
+```js preview-story
+export const disabledRadio = () => html`
+  <lion-radio-group name="dinos_4" label="What are your favourite dinosaurs?">
+    <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
+    <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} disabled></lion-radio>
+    <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
+  </lion-radio-group>
+`;
+```
+
+You can do the same thing for the entire group by setting the `disabled` attribute on the `lion-radio-group` element.
+
+```js preview-story
+export const disabledGroup = () => html`
+  <lion-radio-group name="dinos_6" label="What are your favourite dinosaurs?" disabled>
+    <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
+    <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
+    <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
+  </lion-radio-group>
+`;
+```
+
+### Validation
+
+```js preview-story
+export const validation = () => {
+  const validate = () => {
+    const radioGroup = document.querySelector('#dinos');
+    radioGroup.submitted = !radioGroup.submitted;
+  };
+  return html`
+    <lion-radio-group
+      id="dinos"
+      name="dinos_8"
+      label="Favourite dinosaur"
+      .validators=${[new Required()]}
+    >
+      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
+      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
+      <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
+    </lion-radio-group>
+    <button @click="${() => validate()}">Validate</button>
+  `;
+};
+```
+
+You can also create a validator that validates whether a certain option is checked.
+
+```js preview-story
+export const validateItem = () => {
+  class IsBrontosaurus extends Validator {
+    static get validatorName() {
+      return 'IsBrontosaurus';
+    }
+    execute(value) {
+      let showFeedback = false;
+      if (value !== 'brontosaurus') {
+        showFeedback = true;
+      }
+      return showFeedback;
+    }
+    static async getMessage() {
+      return 'You need to select "brontosaurus"';
+    }
+  }
+  const validate = () => {
+    const radioGroup = document.querySelector('#dinosTwo');
+    radioGroup.submitted = !radioGroup.submitted;
+  };
+  return html`
+    <lion-radio-group
+      id="dinosTwo"
+      name="dinosTwo"
+      label="Favourite dinosaur"
+      .validators=${[new Required(), new IsBrontosaurus()]}
+    >
+      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
+      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
+      <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
+    </lion-radio-group>
+    <button @click="${() => validate()}">Validate</button>
+  `;
+};
+```
diff --git a/packages/radio-group/stories/index.stories.mdx b/packages/radio-group/stories/index.stories.mdx
deleted file mode 100644
index bdee8655f..000000000
--- a/packages/radio-group/stories/index.stories.mdx
+++ /dev/null
@@ -1,258 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { loadDefaultFeedbackMessages, Required, Validator } from '@lion/validate';
-
-import '../lion-radio-group.js';
-import '../lion-radio.js';
-
-<Meta title="Forms/Radio Group" parameters={{ component: 'lion-radio-group' }} />
-
-# Radio Group
-
-You should use `<lion-radio>`s inside this element.
-
-<Story name="Default">
-  {html`
-    <lion-radio-group name="dinos" label="What are your favourite dinosaurs?">
-      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-      <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-    </lion-radio-group>
-  `}
-</Story>
-
-```html
-<lion-radio-group name="dinos_1" label="What are your favourite dinosaurs?">
-  <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-  <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-  <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-</lion-radio-group>
-```
-
-- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
-- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--default-story) instead
-
-## Features
-
-Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
-
-- Get or set the checked value of the group:
-  - modelValue (default) - `checkedValue()`
-  - formattedValue - `formattedValue()`
-  - serializedValue - `serializedValue()`
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/radio-group
-```
-
-```js
-import '@lion/radio-group/lion-radio-group.js';
-import '@lion/radio-group/lion-radio.js';
-```
-
-
-### Model value
-
-The `modelValue` of a `lion-radio-group` is string equal to the `choiceValue` of the `lion-radio` element that has been checked.
-
-Given the dinosaur example above, say that we were to select the last option (diplodocus).
-
-Then the `modelValue` of the `lion-radio-group` will look as follows:
-
-```js
-const groupElement = [parent].querySelector('lion-radio-group');
-groupElement.modelValue;
-  => "diplodocus";
-```
-
-### The `name` attribute
-
-The `name` attribute of a `lion-radio-group` automatically gets assigned to its `lion-radio` children. You can also specify names for the `lion-radio` elements, but if this name is different from the name assigned to `lion-radio-group`, then an exception will be thrown.
-
-Our recommendation would be to set the `name` attribute only on the `lion-radio-group` and not on the `lion-checkbox` elements.
-
-## Examples
-
-### Pre-select
-
-You can pre-select an option by adding the checked attribute to the selected `lion-radio`.
-
-<Story name="Pre-select">
-  {html`
-    <lion-radio-group name="dinos_2" label="What are your favourite dinosaurs?">
-      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} checked></lion-radio>
-      <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-    </lion-radio-group>
-  `}
-</Story>
-
-```html
-<lion-radio-group name="dinos_3" label="What are your favourite dinosaurs?">
-  <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-  <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} checked></lion-radio>
-  <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-</lion-radio-group>
-```
-
-### Disabled
-
-You can disable a specific `lion-radio` option by adding the `disabled` attribute.
-
-<Story name="Disabled radio">
-  {html`
-    <lion-radio-group name="dinos_4" label="What are your favourite dinosaurs?">
-      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} disabled></lion-radio>
-      <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-    </lion-radio-group>
-  `}
-</Story>
-
-```html
-<lion-radio-group name="dinos_5" label="What are your favourite dinosaurs?">
-  <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-  <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} disabled></lion-radio>
-  <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-</lion-radio-group>
-```
-
-You can do the same thing for the entire group by setting the `disabled` attribute on the `lion-radio-group` element.
-
-<Story name="Disabled group">
-  {html`
-    <lion-radio-group name="dinos_6" label="What are your favourite dinosaurs?" disabled>
-      <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-      <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-      <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-    </lion-radio-group>
-  `}
-</Story>
-
-```html
-<lion-radio-group name="dinos_7" label="What are your favourite dinosaurs?">
-  <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-  <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'} disabled></lion-radio>
-  <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-</lion-radio-group>
-```
-
-### Validation
-
-<Story name="Validation">
-  {() => {
-    loadDefaultFeedbackMessages();
-    const validate = () => {
-      const radioGroup = document.querySelector('#dinos');
-      radioGroup.submitted = !radioGroup.submitted;
-    };
-    return html`
-      <lion-radio-group
-        id="dinos"
-        name="dinos_8"
-        label="Favourite dinosaur"
-        .validators=${[new Required()]}
-      >
-        <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-        <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-        <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
-      </lion-radio-group>
-      <button @click="${() => validate()}">Validate</button>
-    `;
-  }}
-</Story>
-
-```js
-import { loadDefaultFeedbackMessages, Required } from '@lion/validate';
-loadDefaultFeedbackMessages();
-const validate = () => {
-  const radioGroup = document.querySelector('#dinosGroup');
-  radioGroup.submitted = !radioGroup.submitted;
-};
-```
-
-```html
-<lion-radio-group
-  id="dinosGroup"
-  name="dinosGroup"
-  label="Favourite dinosaur"
-  .validators=${[new Required()]}
->
-  <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-  <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-  <lion-radio label="diplodocus" .choiceValue="${'diplodocus'}"></lion-radio>
-</lion-radio-group>
-<button @click="${() => validate()}">Validate</button>
-```
-
-You can also create a validator that validates whether a certain option is checked.
-
-<Story name="Validate item">
-  {() => {
-    class IsBrontosaurus extends Validator {
-      static get validatorName() {
-        return 'IsBrontosaurus';
-      }
-      execute(value) {
-        return value === 'brontosaurus';
-      }
-      static async getMessage() {
-        return 'You need to select "brontosaurus"';
-      }
-    }
-    const validate = () => {
-      const radioGroup = document.querySelector('#dinosTwo');
-      radioGroup.submitted = !radioGroup.submitted;
-    };
-    return html`
-      <lion-radio-group
-        id="dinosTwo"
-        name="dinosTwo"
-        label="Favourite dinosaur"
-        .validators=${[new Required(), new IsBrontosaurus()]}
-      >
-        <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-        <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-        <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-      </lion-radio-group>
-      <button @click="${() => validate()}">Validate</button>
-    `;
-  }}
-</Story>
-
-```js
-import { loadDefaultFeedbackMessages, Required, Validator } from '@lion/validate';
-
-class IsBrontosaurus extends Validator {
-  static get validatorName() {
-    return 'IsBrontosaurus';
-  }
-  execute(value) {
-    return value === 'brontosaurus';
-  }
-  static async getMessage() {
-    return 'You need to select "brontosaurus"';
-  }
-}
-const validate = () => {
-  const radioGroup = document.querySelector('#dinosGroupTwo');
-  radioGroup.submitted = !radioGroup.submitted;
-};
-```
-
-```html
-<lion-radio-group
-  id="dinosGroupTwo"
-  name="dinosGroupTwo"
-  label="Favourite dinosaur"
-  .validators=${[new Required(), new IsBrontosaurus()]}
->
-  <lion-radio label="allosaurus" .choiceValue=${'allosaurus'}></lion-radio>
-  <lion-radio label="brontosaurus" .choiceValue=${'brontosaurus'}></lion-radio>
-  <lion-radio label="diplodocus" .choiceValue=${'diplodocus'}></lion-radio>
-</lion-radio-group>
-<button @click="${() => validate()}">Validate</button>
-```
diff --git a/packages/remark-extend/README.md b/packages/remark-extend/README.md
index 5df0eb463..f382dfe44 100644
--- a/packages/remark-extend/README.md
+++ b/packages/remark-extend/README.md
@@ -318,3 +318,9 @@ Starting from `### Red` until the next headline with depth of 3.
 
 the sun can get red
 ```
+
+```js script
+export default {
+  title: 'Tools/Remark Extend',
+};
+```
diff --git a/packages/select-rich/README.md b/packages/select-rich/README.md
index 95fe9ba1b..6d7829fa9 100644
--- a/packages/select-rich/README.md
+++ b/packages/select-rich/README.md
@@ -5,9 +5,41 @@ It allows to provide fully customized options and a fully customized invoker but
 The component is meant to be used whenever the native `<select>` doesn't provide enough
 styling/theming/user interaction opportunities.
 
-## Live Demo/Documentation
+Its implementation is based on the following Design pattern:
+<https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html>
 
-> See our [storybook](http://lion-web-components.netlify.com/?path=/docs/buttons-button) for a live demo and API documentation
+```js script
+import { html } from '@lion/core';
+import { loadDefaultFeedbackMessages, Required } from '@lion/validate';
+import './lion-option.js';
+import './lion-options.js';
+import './lion-select-rich.js';
+
+export default {
+  title: 'Forms/Select Rich',
+};
+loadDefaultFeedbackMessages();
+```
+
+```js preview-story
+export const main = () => html`
+  <lion-select-rich name="favoriteColor" label="Favorite color">
+    <lion-options slot="input">
+      <lion-option .choiceValue=${'red'}>Red</lion-option>
+      <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
+      <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+    </lion-options>
+  </lion-select-rich>
+`;
+```
+
+## Features
+
+- Fully accessible
+- Flexible api
+- Fully customizable option elements
+- Fully customizable invoker element
+- Mimics native select interaction mode (windows/linux and mac)
 
 ## How to use
 
@@ -18,18 +50,362 @@ npm i --save @lion/select-rich
 ```
 
 ```js
+import { LionSelectRich, LionOptions, LionOption } from '@lion/select-rich';
+// or
 import '@lion/select-rich/lion-select-rich.js';
 import '@lion/select-rich/lion-options.js';
 import '@lion/select-rich/lion-option.js';
 ```
 
-### Example
+> No need to npm install `@lion/option` separately, it comes with the rich select as a dependency
+
+## Examples
+
+### Model value
+
+You can set the full `modelValue` for each option, which includes the checked property for whether it is checked or not.
 
 ```html
-<lion-select-rich name="favoriteColor" label="Favorite color">
+<lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
+```
+
+### Options with HTML
+
+The main feature of this rich select that makes it rich, is that your options can contain HTML.
+
+```js preview-story
+export const optionsWithHTML = () => html`
+  <lion-select-rich label="Favorite color" name="color">
+    <lion-options slot="input" class="demo-listbox">
+      <lion-option .modelValue=${{ value: 'red', checked: false }}>
+        <p style="color: red;">I am red</p>
+        <p>and multi Line</p>
+      </lion-option>
+      <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>
+        <p style="color: hotpink;">I am hotpink</p>
+        <p>and multi Line</p>
+      </lion-option>
+      <lion-option .modelValue=${{ value: 'teal', checked: false }}>
+        <p style="color: teal;">I am teal</p>
+        <p>and multi Line</p>
+      </lion-option>
+    </lion-options>
+  </lion-select-rich>
+`;
+```
+
+### Many Options with Scrolling
+
+```js preview-story
+export const manyOptionsWithScrolling = () => html`
+  <style>
+    #scrollSelectRich lion-options {
+      max-height: 200px;
+      overflow-y: auto;
+      display: block;
+    }
+  </style>
+  <lion-select-rich id="scrollSelectRich" label="Favorite color" name="color">
+    <lion-options slot="input" class="demo-listbox">
+      <lion-option .modelValue=${{ value: 'red', checked: false }}>
+        <p style="color: red;">I am red</p>
+      </lion-option>
+      <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>
+        <p style="color: hotpink;">I am hotpink</p>
+      </lion-option>
+      <lion-option .modelValue=${{ value: 'teal', checked: false }}>
+        <p style="color: teal;">I am teal</p>
+      </lion-option>
+      <lion-option .modelValue=${{ value: 'green', checked: false }}>
+        <p style="color: green;">I am green</p>
+      </lion-option>
+      <lion-option .modelValue=${{ value: 'blue', checked: false }}>
+        <p style="color: blue;">I am blue</p>
+      </lion-option>
+    </lion-options>
+  </lion-select-rich>
+`;
+```
+
+### Read only prefilled
+
+You can set the rich select as read only.
+This will block the user from opening the select.
+
+The readonly attribute is delegated to the invoker for disabling opening the overlay, and for styling purposes.
+
+```js preview-story
+export const readOnlyPrefilled = () => html`
+  <lion-select-rich label="Read-only select" readonly name="color">
+    <lion-options slot="input">
+      <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
+      <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
+      <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
+    </lion-options>
+  </lion-select-rich>
+`;
+```
+
+### Disabled Select
+
+You can set the `disabled` attribute to disable either specific options or the entire select.
+
+If you disable the entire select, the disabled attribute is also delegated to the invoker, similar to readonly.
+
+```js preview-story
+export const disabledSelect = () => html`
+  <lion-select-rich label="Disabled select" disabled name="color">
+    <lion-options slot="input">
+      <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
+      <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
+      <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
+    </lion-options>
+  </lion-select-rich>
+`;
+```
+
+```js preview-story
+export const disabledOption = () => html`
+  <lion-select-rich label="Disabled options" name="color">
+    <lion-options slot="input">
+      <lion-option .choiceValue=${'red'} disabled>Red</lion-option>
+      <lion-option .choiceValue=${'blue'}>Blue</lion-option>
+      <lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
+      <lion-option .choiceValue=${'green'}>Green</lion-option>
+      <lion-option .choiceValue=${'teal'} disabled>Teal</lion-option>
+    </lion-options>
+  </lion-select-rich>
+`;
+```
+
+### Validation
+
+Validation can be used on this field as well, same as with other fields. Below is an example with required.
+It can be triggered by opening the select and selecting a valid option, then selecting the first option again, of which the `modelValue` is `null`.
+
+```js preview-story
+export const validation = () => {
+  return html`
+    <lion-select-rich
+      id="color"
+      name="color"
+      label="Favorite color"
+      .validators="${[new Required()]}"
+    >
+      <lion-options slot="input" class="demo-listbox">
+        <lion-option .choiceValue=${null}>select a color</lion-option>
+        <lion-option .choiceValue=${'red'}>Red</lion-option>
+        <lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
+        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+      </lion-options>
+    </lion-select-rich>
+  `;
+};
+```
+
+### Render options
+
+The choiceValue can also be a complex value like an Object.
+
+It is up to you how to render this Object in the DOM.
+
+```js preview-story
+export const renderOptions = () => {
+  const objs = [
+    { type: 'mastercard', label: 'Master Card', amount: 12000, active: true },
+    { type: 'visacard', label: 'Visa Card', amount: 0, active: false },
+  ];
+  function showOutput() {
+    document.getElementById('demoRenderOutput').innerHTML = JSON.stringify(
+      this.checkedValue,
+      null,
+      2,
+    );
+  }
+  return html`
+    <lion-select-rich label="Credit Card" name="color" @select-model-value-changed=${showOutput}>
+      <lion-options slot="input">
+        ${objs.map(
+          obj => html`
+            <lion-option .modelValue=${{ value: obj, checked: false }}>${obj.label}</lion-option>
+          `,
+        )}
+      </lion-options>
+    </lion-select-rich>
+    <p>Full value:</p>
+    <pre id="demoRenderOutput"></pre>
+  `;
+};
+```
+
+### Interaction Mode
+
+You can set the interaction mode to either `mac` or `windows/linux`.
+By default, it will choose based on the user Operating System, but it can be forced.
+
+This changes the keyboard interaction.
+
+```js preview-story
+export const interactionMode = () => html`
+  <lion-select-rich label="Mac mode" name="color" interaction-mode="mac">
+    <lion-options slot="input">
+      <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
+      <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
+      <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
+    </lion-options>
+  </lion-select-rich>
+  <lion-select-rich label="Windows/Linux mode" name="color" interaction-mode="windows/linux">
+    <lion-options slot="input">
+      <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
+      <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
+      <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
+    </lion-options>
+  </lion-select-rich>
+`;
+```
+
+### Checked index & value
+
+You can get/set the checkedIndex and checkedValue.
+
+```js preview-story
+export const checkedIndexAndValue = () => html`
+  <style>
+    .log-button {
+      margin: 10px 0;
+    }
+  </style>
+  <div>
+    <label id="label-richSelectCheckedInput" for="richSelectCheckedInput">
+      Set the checkedIndex
+    </label>
+    <input
+      id="richSelectCheckedInput"
+      aria-labelledby="label-richSelectCheckedInput"
+      type="number"
+      @change=${e => {
+        const selectEl = document.getElementById('checkedRichSelect');
+        selectEl.checkedIndex = e.target.value;
+      }}
+    />
+  </div>
+  <button
+    class="log-button"
+    @click=${() => {
+      const selectEl = document.getElementById('checkedRichSelect');
+      console.log(`checkedIndex: ${selectEl.checkedIndex}`);
+      console.log(`checkedValue: ${selectEl.checkedValue}`);
+    }}
+  >
+    Console log checked index and value
+  </button>
+  <lion-select-rich id="checkedRichSelect" name="favoriteColor" label="Favorite color">
+    <lion-options slot="input">
+      <lion-option .choiceValue=${'red'}>Red</lion-option>
+      <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
+      <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+    </lion-options>
+  </lion-select-rich>
+`;
+```
+
+### No default selection
+
+If you want to set a placeholder option with something like 'Please select', you can of course do this, the same way you would do it in a native select.
+
+Simply put an option with a modelValue that is `null`.
+
+```html
+<lion-option .choiceValue="${null}">select a color</lion-option>
+```
+
+However, this allows the user to explicitly select this option.
+
+Often, you may want a placeholder that appears initially, but cannot be selected explicitly by the user.
+For this you can use `has-no-default-selected` attribute.
+
+Both methods work with the `Required` validator.
+
+```js preview-story
+export const noDefaultSelection = () => html`
+  <lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected>
+    <lion-options slot="input">
+      <lion-option .choiceValue=${'red'}>Red</lion-option>
+      <lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
+      <lion-option .choiceValue=${'teal'}>Teal</lion-option>
+    </lion-options>
+  </lion-select-rich>
+`;
+```
+
+> By default, the placeholder is completely empty in the `LionSelectInvoker`,
+> but subclassers can easily override this in their extension, by the overriding `_noSelectionTemplate()` method.
+
+### Single Option
+
+If there is a single option rendered, then `singleOption` property is set to `true` on `lion-select-rich` and invoker as well. Invoker also gets `single-option` which can be used to having desired templating and styling. As in here the arrow is not displayed for single option
+
+```js preview-story
+export const singleOption = () => html`
+  <lion-select-rich label="Single Option" name="color">
+    <lion-options slot="input">
+      <lion-option .choiceValue=${'red'}>Red</lion-option>
+    </lion-options>
+  </lion-select-rich>
+`;
+```
+
+### Custom Invoker
+
+You can provide a custom invoker using the invoker slot.
+This means it will get the selected value(s) as an input property `.selectedElement`.
+
+You can use this `selectedElement` to then render the content to your own invoker.
+
+```html
+<lion-select-rich>
+  <my-invoker-button slot="invoker"></my-invoker-button>
   <lion-options slot="input">
-    <lion-option .choiceValue=${'red'}>Red</lion-option>
-    <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
+    ...
   </lion-options>
 </lion-select-rich>
 ```
+
+An example of how such a custom invoker class could look like:
+
+```js
+class MyInvokerButton extends LitElement() {
+  static get properties() {
+    return {
+      selectedElement: {
+        type: Object,
+      };
+    }
+  }
+
+  _contentTemplate() {
+    if (this.selectedElement) {
+      const labelNodes = Array.from(this.selectedElement.querySelectorAll('*'));
+      // Nested html in the selected option
+      if (labelNodes.length > 0) {
+        // Cloning is important if you plan on passing nodes straight to a lit template
+        return labelNodes.map(node => node.cloneNode(true));
+      }
+      // Or if it is just text inside the selected option, no html
+      return this.selectedElement.textContent;
+    }
+    return ``;
+  }
+
+  render() {
+    return html`
+      <div>
+        ${this._contentTemplate()}
+      </div>
+    `;
+  }
+}
+```
+
+> This example only works if your option elements don't have ShadowDOM boundaries themselves.
+> Cloning deeply only works up until the first shadow boundary.
diff --git a/packages/select-rich/stories/index.stories.mdx b/packages/select-rich/stories/index.stories.mdx
deleted file mode 100644
index e98c62883..000000000
--- a/packages/select-rich/stories/index.stories.mdx
+++ /dev/null
@@ -1,585 +0,0 @@
-import { Story, Meta, html, Preview } from '@open-wc/demoing-storybook';
-import { loadDefaultFeedbackMessages, Required } from '@lion/validate';
-import '../lion-option.js';
-import '../lion-options.js';
-import '../lion-select-rich.js';
-
-<Meta title="Forms/Select Rich" parameters={{ component: 'lion-select-rich' }} />
-
-# Select Rich
-
-`lion-select-rich` component is a 'rich' version of the native `<select>` element.
-It allows to provide fully customized options and a fully customized invoker button.
-The component is meant to be used whenever the native `<select>` doesn't provide enough
-styling/theming/user interaction opportunities.
-
-Its implementation is based on the following Design pattern:
-<https://www.w3.org/TR/wai-aria-practices/examples/listbox/listbox-collapsible.html>
-
-<Story name="Default">
-  {html`
-    <lion-select-rich name="favoriteColor" label="Favorite color">
-      <lion-options slot="input">
-        <lion-option .choiceValue=${'red'}>Red</lion-option>
-        <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
-        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-      </lion-options>
-    </lion-select-rich>
-  `}
-</Story>
-
-```html
-<lion-select-rich name="favoriteColor" label="Favorite color">
-  <lion-options slot="input">
-    <lion-option .choiceValue=${'red'}>Red</lion-option>
-    <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
-    <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-## Features
-
-- Fully accessible
-- Flexible api
-- Fully customizable option elements
-- Fully customizable invoker element
-- Mimics native select interaction mode (windows/linux and mac)
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/select-rich
-```
-
-```js
-import '@lion/select-rich/lion-select-rich.js';
-import '@lion/select-rich/lion-options.js';
-import '@lion/select-rich/lion-option.js';
-```
-
-> No need to npm install `@lion/option` separately, it comes with the rich select as a dependency
-
-## Examples
-
-### Model value
-
-You can set the full `modelValue` for each option, which includes the checked property for whether it is checked or not.
-
-```html
-  <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
-```
-
-### Options with HTML
-
-The main feature of this rich select that makes it rich, is that your options can contain HTML.
-
-<Story name="Options with HTML">
-  {html`
-    <lion-select-rich label="Favorite color" name="color">
-      <lion-options slot="input" class="demo-listbox">
-        <lion-option .modelValue=${{ value: 'red', checked: false }}>
-          <p style="color: red;">I am red</p>
-          <p>and multi Line</p>
-        </lion-option>
-        <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>
-          <p style="color: hotpink;">I am hotpink</p>
-          <p>and multi Line</p>
-        </lion-option>
-        <lion-option .modelValue=${{ value: 'teal', checked: false }}>
-          <p style="color: teal;">I am teal</p>
-          <p>and multi Line</p>
-        </lion-option>
-      </lion-options>
-    </lion-select-rich>
-  `}
-</Story>
-
-```html
-<lion-select-rich label="Favorite color" name="color">
-  <lion-options slot="input" class="demo-listbox">
-    <lion-option .modelValue=${{ value: 'red', checked: false }}>
-      <p style="color: red;">I am red</p>
-      <p>and multi Line</p>
-    </lion-option>
-    <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>
-      <p style="color: hotpink;">I am hotpink</p>
-      <p>and multi Line</p>
-    </lion-option>
-    <lion-option .modelValue=${{ value: 'teal', checked: false }}>
-      <p style="color: teal;">I am teal</p>
-      <p>and multi Line</p>
-    </lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-### Many Options with Scrolling
-
-<Story name="Many options with scrolling">
-  {html`
-    <style>
-      #scrollSelectRich lion-options {
-        max-height: 200px;
-        overflow-y: auto;
-        display: block;
-      }
-    </style>
-    <lion-select-rich id="scrollSelectRich" label="Favorite color" name="color">
-      <lion-options slot="input" class="demo-listbox">
-        <lion-option .modelValue=${{ value: 'red', checked: false }}>
-          <p style="color: red;">I am red</p>
-        </lion-option>
-        <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>
-          <p style="color: hotpink;">I am hotpink</p>
-        </lion-option>
-        <lion-option .modelValue=${{ value: 'teal', checked: false }}>
-          <p style="color: teal;">I am teal</p>
-        </lion-option>
-        <lion-option .modelValue=${{ value: 'green', checked: false }}>
-          <p style="color: green;">I am green</p>
-        </lion-option>
-        <lion-option .modelValue=${{ value: 'blue', checked: false }}>
-          <p style="color: blue;">I am blue</p>
-        </lion-option>
-      </lion-options>
-    </lion-select-rich>
-  `}
-</Story>
-
-```html
-<style>
-  lion-options {
-    max-height: 200px;
-    overflow-y: auto;
-    display: block;
-  }
-</style>
-<lion-select-rich label="Favorite color" name="color">
-  <lion-options slot="input" class="demo-listbox">
-    <lion-option .modelValue=${{ value: 'red', checked: false }}>
-      <p style="color: red;">I am red</p>
-    </lion-option>
-    <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>
-      <p style="color: hotpink;">I am hotpink</p>
-    </lion-option>
-    <lion-option .modelValue=${{ value: 'teal', checked: false }}>
-      <p style="color: teal;">I am teal</p>
-    </lion-option>
-    <lion-option .modelValue=${{ value: 'green', checked: false }}>
-      <p style="color: green;">I am green</p>
-    </lion-option>
-    <lion-option .modelValue=${{ value: 'blue', checked: false }}>
-      <p style="color: blue;">I am blue</p>
-    </lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-### Read only prefilled
-
-You can set the rich select as read only.
-This will block the user from opening the select.
-
-The readonly attribute is delegated to the invoker for disabling opening the overlay, and for styling purposes.
-
-<Story name="Read only prefilled">
-  {html`
-    <lion-select-rich label="Read-only select" readonly name="color">
-      <lion-options slot="input">
-        <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
-        <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
-        <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
-      </lion-options>
-    </lion-select-rich>
-  `}
-</Story>
-
-### Disabled
-
-You can set the `disabled` attribute to disable either specific options or the entire select.
-
-If you disable the entire select, the disabled attribute is also delegated to the invoker, similar to readonly.
-
-<Story name="Disabled">
-  {html`
-    <lion-select-rich label="Disabled select" disabled name="color">
-      <lion-options slot="input">
-        <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
-        <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
-        <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
-      </lion-options>
-    </lion-select-rich>
-    <lion-select-rich label="Disabled options" name="color">
-      <lion-options slot="input">
-        <lion-option .choiceValue=${'red'} disabled>Red</lion-option>
-        <lion-option .choiceValue=${'blue'}>Blue</lion-option>
-        <lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
-        <lion-option .choiceValue=${'green'}>Green</lion-option>
-        <lion-option .choiceValue=${'teal'} disabled>Teal</lion-option>
-      </lion-options>
-    </lion-select-rich>
-  `}
-</Story>
-
-```html
-<lion-select-rich label="Disabled select" disabled name="color">
-  <lion-options slot="input">
-    <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
-    <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
-    <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-```html
-<lion-select-rich label="Disabled options" name="color">
-  <lion-options slot="input">
-    <lion-option .choiceValue=${'red'} disabled>Red</lion-option>
-    <lion-option .choiceValue=${'blue'}>Blue</lion-option>
-    <lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
-    <lion-option .choiceValue=${'green'}>Green</lion-option>
-    <lion-option .choiceValue=${'teal'} disabled>Teal</lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-### Validation
-
-Validation can be used on this field as well, same as with other fields. Below is an example with required.
-It can be triggered by opening the select and selecting a valid option, then selecting the first option again, of which the `modelValue` is `null`.
-
-<Story name="Validation">
-  {() => {
-    loadDefaultFeedbackMessages();
-    return html`
-      <lion-select-rich
-        id="color"
-        name="color"
-        label="Favorite color"
-        .validators="${[new Required()]}"
-      >
-        <lion-options slot="input" class="demo-listbox">
-          <lion-option .choiceValue=${null}>select a color</lion-option>
-          <lion-option .choiceValue=${'red'}>Red</lion-option>
-          <lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
-          <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-        </lion-options>
-      </lion-select-rich>
-    `;
-  }}
-</Story>
-
-```js
-import { loadDefaultFeedbackMessages, Required } from '@lion/validate';
-```
-
-```html
-<lion-select-rich
-  id="color"
-  name="color"
-  label="Favorite color"
-  .validators="${[new Required()]}"
->
-  <lion-options slot="input" class="demo-listbox">
-    <lion-option .choiceValue=${null}>select a color</lion-option>
-    <lion-option .choiceValue=${'red'}>Red</lion-option>
-    <lion-option .choiceValue=${'hotpink'} disabled>Hotpink</lion-option>
-    <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-### Render options
-
-The choiceValue can also be a complex value like an Object.
-
-It is up to you how to render this Object in the DOM.
-
-<Story name="Render Options">
-  {() => {
-    const objs = [
-      { type: 'mastercard', label: 'Master Card', amount: 12000, active: true },
-      { type: 'visacard', label: 'Visa Card', amount: 0, active: false },
-    ];
-    function showOutput() {
-      document.getElementById('demoRenderOutput').innerHTML = JSON.stringify(
-        this.checkedValue,
-        null,
-        2,
-      );
-    }
-    return html`
-      <lion-select-rich
-        label="Credit Card"
-        name="color"
-        @select-model-value-changed=${showOutput}
-      >
-        <lion-options slot="input">
-          ${objs.map(
-            obj => html`
-              <lion-option .modelValue=${{ value: obj, checked: false }}
-                >${obj.label}</lion-option
-              >
-            `,
-          )}
-        </lion-options>
-      </lion-select-rich>
-      <p>Full value:</p>
-      <pre id="demoRenderOutput"></pre>
-    `;
-  }}
-</Story>
-
-```js
-const objs = [
-  { type: 'mastercard', label: 'Master Card', amount: 12000, active: true },
-  { type: 'visacard', label: 'Visa Card', amount: 0, active: false },
-];
-```
-
-```html
-<lion-select-rich
-  label="Credit Card"
-  name="color"
-  @select-model-value-changed=${showOutput}
->
-  <lion-options slot="input">
-    ${objs.map(
-      obj => html`
-        <lion-option .modelValue=${{ value: obj, checked: false }}
-          >${obj.label}</lion-option
-        >
-      `,
-    )}
-  </lion-options>
-</lion-select-rich>
-```
-
-### Interaction Mode
-
-You can set the interaction mode to either `mac` or `windows/linux`.
-By default, it will choose based on the user Operating System, but it can be forced.
-
-This changes the keyboard interaction.
-
-<Story name="Interaction mode">
-  {html`
-    <lion-select-rich label="Mac mode" name="color" interaction-mode="mac">
-      <lion-options slot="input">
-        <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
-        <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
-        <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
-      </lion-options>
-    </lion-select-rich>
-    <lion-select-rich label="Windows/Linux mode" name="color" interaction-mode="windows/linux">
-      <lion-options slot="input">
-        <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
-        <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
-        <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
-      </lion-options>
-    </lion-select-rich>
-  `}
-</Story>
-
-```html
-<lion-select-rich label="Mac mode" name="color" interaction-mode="mac">
-  <lion-options slot="input">
-    <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
-    <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
-    <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-```html
-<lion-select-rich label="Windows/Linux mode" name="color" interaction-mode="windows/linux">
-  <lion-options slot="input">
-    <lion-option .modelValue=${{ value: 'red', checked: false }}>Red</lion-option>
-    <lion-option .modelValue=${{ value: 'hotpink', checked: true }}>Hotpink</lion-option>
-    <lion-option .modelValue=${{ value: 'teal', checked: false }}>Teal</lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-### Checked index & value
-
-You can get/set the checkedIndex and checkedValue.
-
-<Story name="Checked index and value">
-  {html`
-    <style>
-      .log-button {
-        margin: 10px 0;
-      }
-    </style>
-    <div>
-      <label id="label-richSelectCheckedInput" for="richSelectCheckedInput">
-        Set the checkedIndex
-      </label>
-      <input
-        id="richSelectCheckedInput"
-        aria-labelledby="label-richSelectCheckedInput"
-        type="number"
-        @change=${(e) => {
-          const selectEl = document.getElementById('checkedRichSelect');
-          selectEl.checkedIndex = e.target.value;
-        }}
-      >
-    </div>
-    <button class="log-button" @click=${() => {
-      const selectEl = document.getElementById('checkedRichSelect');
-      console.log(`checkedIndex: ${selectEl.checkedIndex}`);
-      console.log(`checkedValue: ${selectEl.checkedValue}`);
-    }}>Console log checked index and value</button>
-    <lion-select-rich id="checkedRichSelect" name="favoriteColor" label="Favorite color">
-      <lion-options slot="input">
-        <lion-option .choiceValue=${'red'}>Red</lion-option>
-        <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
-        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-      </lion-options>
-    </lion-select-rich>
-  `}
-</Story>
-
-```html
-<lion-select-rich name="favoriteColor" label="Favorite color">
-  <lion-options slot="input">
-    <lion-option .choiceValue=${'red'}>Red</lion-option>
-    <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
-    <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-```js
-console.log(`checkedIndex: ${selectEl.checkedIndex}`); // 1
-console.log(`checkedValue: ${selectEl.checkedValue}`); // 'hotpink'
-selectEl.checkedIndex = 0;
-console.log(`checkedIndex: ${selectEl.checkedIndex}`); // 0
-console.log(`checkedValue: ${selectEl.checkedValue}`); // 'red'
-```
-
-### No default selection
-
-If you want to set a placeholder option with something like 'Please select', you can of course do this, the same way you would do it in a native select.
-
-Simply put an option with a modelValue that is `null`.
-
-```html
-<lion-option .choiceValue=${null}>select a color</lion-option>
-```
-
-However, this allows the user to explicitly select this option.
-
-Often, you may want a placeholder that appears initially, but cannot be selected explicitly by the user.
-For this you can use `has-no-default-selected` attribute.
-
-Both methods work with the `Required` validator.
-
-<Story name="No default selected">
-  {html`
-    <lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected>
-      <lion-options slot="input">
-        <lion-option .choiceValue=${'red'}>Red</lion-option>
-        <lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
-        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-      </lion-options>
-    </lion-select-rich>
-  `}
-</Story>
-
-
-```html
-<lion-select-rich name="favoriteColor" label="Favorite color" has-no-default-selected>
-  <lion-options slot="input">
-    <lion-option .choiceValue=${'red'}>Red</lion-option>
-    <lion-option .choiceValue=${'hotpink'}>Hotpink</lion-option>
-    <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-> By default, the placeholder is completely empty in the `LionSelectInvoker`,
-> but subclassers can easily override this in their extension, by the overriding `_noSelectionTemplate()` method.
-
-
-### Single Option
-
-If there is a single option rendered, then `singleOption` property is set to `true` on `lion-select-rich` and invoker as well. Invoker also gets `single-option` which can be used to having desired templating and styling. As in here the arrow is not displayed for single option
-
-<Story name="Single Option">
-  {html`
-    <lion-select-rich label="Single Option" name="color">
-      <lion-options slot="input">
-        <lion-option .choiceValue=${'red'}>Red</lion-option>
-      </lion-options>
-    </lion-select-rich>
-  `}
-</Story>
-
-```html
-<lion-select-rich label="single option select" name="color">
-  <lion-options slot="input">
-    <lion-option .choiceValue=${'red'}>Red</lion-option>
-  </lion-options>
-</lion-select-rich>
-```
-
-
-### Custom Invoker
-
-You can provide a custom invoker using the invoker slot.
-This means it will get the selected value(s) as an input property `.selectedElement`.
-
-You can use this `selectedElement` to then render the content to your own invoker.
-
-```html
-<lion-select-rich>
-  <my-invoker-button slot="invoker"></my-invoker-button>
-  <lion-options slot="input">
-    ...
-  </lion-options>
-</lion-select-rich>
-```
-
-An example of how such a custom invoker class could look like:
-
-```js
-class MyInvokerButton extends LitElement() {
-  static get properties() {
-    return {
-      selectedElement: {
-        type: Object,
-      };
-    }
-  }
-
-  _contentTemplate() {
-    if (this.selectedElement) {
-      const labelNodes = Array.from(this.selectedElement.querySelectorAll('*'));
-      // Nested html in the selected option
-      if (labelNodes.length > 0) {
-        // Cloning is important if you plan on passing nodes straight to a lit template
-        return labelNodes.map(node => node.cloneNode(true));
-      }
-      // Or if it is just text inside the selected option, no html
-      return this.selectedElement.textContent;
-    }
-    return ``;
-  }
-
-  render() {
-    return html`
-      <div>
-        ${this._contentTemplate()}
-      </div>
-    `;
-  }
-}
-```
-
-> This example only works if your option elements don't have ShadowDOM boundaries themselves.
-> Cloning deeply only works up until the first shadow boundary.
diff --git a/packages/select/README.md b/packages/select/README.md
index f3562c362..89f065c0b 100644
--- a/packages/select/README.md
+++ b/packages/select/README.md
@@ -2,10 +2,48 @@
 
 `lion-select` component is a wrapper around the native `select`.
 
+You cannot use interactive elements inside the options. Avoid very long names to
+facilitate the understandability and perceivability for screen reader users. Sets of options
+where each option name starts with the same word or phrase can also significantly degrade
+usability for keyboard and screen reader users.
+
+```js script
+import { html } from 'lit-html';
+import { loadDefaultFeedbackMessages, Required } from '@lion/validate';
+
+import './lion-select.js';
+
+export default {
+  title: 'Forms/Select',
+};
+loadDefaultFeedbackMessages();
+```
+
+```js preview-story
+export const main = () => html`
+  <lion-select name="favoriteColor" label="Favorite color">
+    <select slot="input">
+      <option selected hidden value>Please select</option>
+      <option value="red">Red</option>
+      <option value="hotpink">Hotpink</option>
+      <option value="teal">Teal</option>
+    </select>
+  </lion-select>
+`;
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-select--default-story) for a live demo and API documentation
 
+For this form element it is important to put the `slot="input"` with the native `select` yourself, because you are responsible for filling it with `<option>`s.
+For most other form elements in `lion` we do this for you, because there's no need to put html inside the native form inputs.
+
+## Features
+
+- Catches and forwards the select events
+- Can be set to required or disabled
+
 ## How to use
 
 ### Installation
@@ -15,18 +53,81 @@ npm i --save @lion/select
 ```
 
 ```js
+import { LionSelect } from '@lion/select';
+// or
 import '@lion/select/lion-select.js';
 ```
 
-### Example
+## Examples
 
-```html
-<lion-select name="favoriteColor" label="Favorite color">
-  <select slot="input">
-    <option selected hidden value>Please select</option>
-    <option value="red">Red</option>
-    <option value="hotpink">Hotpink</option>
-    <option value="teal">Teal</option>
-  </select>
-</lion-select>
+### Pre-select
+
+You can preselect an option by setting the property modelValue.
+
+```js preview-story
+export const preSelect = () => html`
+  <lion-select name="favoriteColor" label="Favorite color" .modelValue=${'hotpink'}>
+    <select slot="input">
+      <option selected hidden value>Please select</option>
+      <option value="red">Red</option>
+      <option value="hotpink">Hotpink</option>
+      <option value="teal">Teal</option>
+    </select>
+  </lion-select>
+`;
+```
+
+### Disabled
+
+You can disable an option by adding the `disabled` attribute to an option.
+
+```js preview-story
+export const disabledOption = () => html`
+  <lion-select name="favoriteColor" label="Favorite color">
+    <select slot="input">
+      <option selected hidden value>Please select</option>
+      <option value="red">Red</option>
+      <option value="hotpink" disabled>Hotpink</option>
+      <option value="teal">Teal</option>
+    </select>
+  </lion-select>
+`;
+```
+
+Or by setting the `disabled` attribute on the entire `lion-select` field.
+
+```js preview-story
+export const disabledSelect = () => html`
+  <lion-select name="favoriteColor" label="Favorite color" disabled>
+    <select slot="input">
+      <option selected hidden value>Please select</option>
+      <option value="red">Red</option>
+      <option value="hotpink">Hotpink</option>
+      <option value="teal">Teal</option>
+    </select>
+  </lion-select>
+`;
+```
+
+### Validation
+
+```js preview-story
+export const validation = () => {
+  const validate = () => {
+    const select = document.querySelector('#color');
+    select.submitted = !select.submitted;
+  };
+  return html`
+    <lion-select id="color" name="color" .validators="${[new Required()]}">
+      <label slot="label">Favorite color</label>
+      <select slot="input">
+        <option selected hidden value>Please select</option>
+        <option value="red">Red</option>
+        <option value="hotpink">Hotpink</option>
+        <option value="teal">Teal</option>
+      </select>
+    </lion-select>
+    <button @click="${() => validate()}">Validate</button>
+  `;
+};
 ```
diff --git a/packages/select/stories/index.stories.mdx b/packages/select/stories/index.stories.mdx
deleted file mode 100644
index d47a434db..000000000
--- a/packages/select/stories/index.stories.mdx
+++ /dev/null
@@ -1,191 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { loadDefaultFeedbackMessages, Required } from '@lion/validate';
-
-import '../lion-select.js';
-
-<Meta title="Forms/Select" parameters={{ component: 'lion-select' }} />
-
-# Select
-
-
-`lion-select` component is a wrapper around the native `select`.
-
-You cannot use interactive elements inside the options. Avoid very long names to
-facilitate the understandability and perceivability for screen reader users. Sets of options
-where each option name starts with the same word or phrase can also significantly degrade
-usability for keyboard and screen reader users.
-
-<Story name="Default">
-  {html`
-    <lion-select name="favoriteColor" label="Favorite color">
-      <select slot="input">
-        <option selected hidden value>Please select</option>
-        <option value="red">Red</option>
-        <option value="hotpink">Hotpink</option>
-        <option value="teal">Teal</option>
-      </select>
-    </lion-select>
-  `}
-</Story>
-
-```html
-<lion-select name="favoriteColor" label="Favorite color">
-  <select slot="input">
-    <option selected hidden value>Please select</option>
-    <option value="red">Red</option>
-    <option value="hotpink">Hotpink</option>
-    <option value="teal">Teal</option>
-  </select>
-</lion-select>
-```
-
-For this form element it is important to put the `slot="input"` with the native `select` yourself, because you are responsible for filling it with `<option>`s.
-For most other form elements in `lion` we do this for you, because there's no need to put html inside the native form inputs.
-
-## Features
-
-- Catches and forwards the select events
-- Can be set to required or disabled
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/select
-```
-
-```js
-import '@lion/select/lion-select.js';
-```
-
-## Examples
-
-### Pre-select
-
-You can preselect an option by setting the property modelValue.
-
-<Story name="Pre-select">
-  {html`
-    <lion-select name="favoriteColor" label="Favorite color" .modelValue=${'hotpink'}>
-      <select slot="input">
-        <option selected hidden value>Please select</option>
-        <option value="red">Red</option>
-        <option value="hotpink">Hotpink</option>
-        <option value="teal">Teal</option>
-      </select>
-    </lion-select>
-  `}
-</Story>
-
-```html
-<lion-select name="favoriteColor" label="Favorite color" .modelValue=${'hotpink'}>
-  <select slot="input">
-    <option selected hidden value>Please select</option>
-    <option value="red">Red</option>
-    <option value="hotpink">Hotpink</option>
-    <option value="teal">Teal</option>
-  </select>
-</lion-select>
-```
-
-### Disabled
-
-You can disable an option by adding the `disabled` attribute to an option.
-
-<Story name="Disabled option">
-  {html`
-    <lion-select name="favoriteColor" label="Favorite color">
-      <select slot="input">
-        <option selected hidden value>Please select</option>
-        <option value="red">Red</option>
-        <option value="hotpink" disabled>Hotpink</option>
-        <option value="teal">Teal</option>
-      </select>
-    </lion-select>
-  `}
-</Story>
-
-```html
-<lion-select name="favoriteColor" label="Favorite color">
-  <select slot="input">
-    <option selected hidden value>Please select</option>
-    <option value="red">Red</option>
-    <option value="hotpink" disabled>Hotpink</option>
-    <option value="teal">Teal</option>
-  </select>
-</lion-select>
-```
-
-Or by setting the `disabled` attribute on the entire `lion-select` field.
-
-<Story name="Disabled select">
-  {html`
-    <lion-select name="favoriteColor" label="Favorite color" disabled>
-      <select slot="input">
-        <option selected hidden value>Please select</option>
-        <option value="red">Red</option>
-        <option value="hotpink">Hotpink</option>
-        <option value="teal">Teal</option>
-      </select>
-    </lion-select>
-  `}
-</Story>
-
-```html
-<lion-select name="favoriteColor" label="Favorite color" disabled>
-  <select slot="input">
-    <option selected hidden value>Please select</option>
-    <option value="red">Red</option>
-    <option value="hotpink">Hotpink</option>
-    <option value="teal">Teal</option>
-  </select>
-</lion-select>
-```
-
-### Validation
-
-<Story name="Validation">
-  {() => {
-    loadDefaultFeedbackMessages();
-    const validate = () => {
-      const select = document.querySelector('#color');
-      select.submitted = !select.submitted;
-    };
-    return html`
-      <lion-select id="color" name="color" .validators="${[new Required()]}">
-        <label slot="label">Favorite color</label>
-        <select slot="input">
-          <option selected hidden value>Please select</option>
-          <option value="red">Red</option>
-          <option value="hotpink">Hotpink</option>
-          <option value="teal">Teal</option>
-        </select>
-      </lion-select>
-      <button @click="${() => validate()}">Validate</button>
-    `;
-  }}
-</Story>
-
-```js
-import { loadDefaultFeedbackMessages, Required } from '@lion/validate';
-
-loadDefaultFeedbackMessages();
-const validate = () => {
-  const select = document.querySelector('#color');
-  select.submitted = !select.submitted;
-};
-```
-
-```html
-<lion-select id="color" name="color" .validators="${[new Required()]}">
-  <label slot="label">Favorite color</label>
-  <select slot="input">
-    <option selected hidden value>Please select</option>
-    <option value="red">Red</option>
-    <option value="hotpink">Hotpink</option>
-    <option value="teal">Teal</option>
-  </select>
-</lion-select>
-<button @click="${() => validate()}">Validate</button>
-```
diff --git a/packages/singleton-manager/README.md b/packages/singleton-manager/README.md
index 681132119..2235aac9b 100644
--- a/packages/singleton-manager/README.md
+++ b/packages/singleton-manager/README.md
@@ -300,3 +300,9 @@ Only by using a more controlled way like
 - [yarn resolutions](https://classic.yarnpkg.com/en/docs/selective-version-resolutions/)
 
 you can "hard" code it to the same versions.
+
+```js script
+export default {
+  title: 'Others/SingletonManager',
+};
+```
diff --git a/packages/steps/README.md b/packages/steps/README.md
index 06ea8ea6a..2ae2e54ba 100644
--- a/packages/steps/README.md
+++ b/packages/steps/README.md
@@ -2,30 +2,212 @@
 
 `lion-steps` breaks a single goal down into dependable sub-tasks.
 
+```js script
+import { html } from 'lit-html';
+import './lion-step.js';
+import './lion-steps.js';
+
+export default {
+  title: 'Navigation/Steps',
+};
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/steps-steps) for a live demo and API documentation
 
+## Features
+
+- navigate between different steps with 'previous' and 'next' functions.
+- keeps status of each step
+  - untouched
+  - entered
+  - left
+  - skipped
+- options
+  - **initial-step**: Set to the first step of the flow, blocks calling `previous` function.
+  - **condition**: Dynamic condition, when true the step is added to the flow.
+  - **invert-condition**: Inverts the condition set.
+
+In many application you build multi-step workflows like multi-step forms where you want to split a long process into smaller steps making easier user's perception of it and making easier filling in data. The idea of this component is to provide a simple way to define such steps and transition from one to another while saving data between them and conditionally skip some steps based on the data.
+
 ## How to use
 
 ### Installation
 
 ```sh
-npm i --save @lion/select
+npm i --save @lion/steps
 ```
 
 ```js
+import { LionSteps, LionStep } from '@lion/steps';
+// or
 import '@lion/steps/lion-steps.js';
 import '@lion/steps/lion-step.js';
 ```
 
 ### Example
 
+```js story
+export const main = () => html`
+  <lion-steps>
+    <lion-step initial-step>
+      <p>Welcome</p>
+      <button disabled>previous</button> &nbsp;
+      <input type="button" value="next" @click=${ev => ev.target.parentElement.controller.next()} />
+    </lion-step>
+    <lion-step>
+      <p>Are you single?</p>
+      <input
+        type="button"
+        value="yes"
+        @click=${ev => {
+          ev.target.parentElement.controller.data.isSingle = true;
+          ev.target.parentElement.controller.next();
+        }}
+      />
+      &nbsp;
+      <input
+        type="button"
+        value="no"
+        @click=${ev => {
+          ev.target.parentElement.controller.data.isSingle = false;
+          ev.target.parentElement.controller.next();
+        }}
+      />
+      <br /><br />
+      <input
+        type="button"
+        value="previous"
+        @click=${ev => ev.target.parentElement.controller.previous()}
+      />
+    </lion-step>
+    <lion-step id="is-single" .condition="${data => data.isSingle}">
+      <p>You are single</p>
+      <input
+        type="button"
+        value="previous"
+        @click=${ev => ev.target.parentElement.controller.previous()}
+      />
+      &nbsp;
+      <input type="button" value="next" @click=${ev => ev.target.parentElement.controller.next()} />
+    </lion-step>
+    <lion-step id="is-not-single" .condition="${data => data.isSingle}" invert-condition>
+      <p>You are NOT single.</p>
+      <input
+        type="button"
+        value="previous"
+        @click=${ev => ev.target.parentElement.controller.previous()}
+      />
+      &nbsp;
+      <input type="button" value="next" @click=${ev => ev.target.parentElement.controller.next()} />
+    </lion-step>
+    <lion-step>
+      <p>Finish</p>
+      <input
+        type="button"
+        value="previous"
+        @click=${ev => ev.target.parentElement.controller.previous()}
+      />
+    </lion-step>
+  </lion-steps>
+`;
+```
+
+### Define steps
+
+We provide two components: `lion-steps` and `lion-step`. Steps need to be direct children of `lion-steps`.
+
+```js preview-story
+export const defineSteps = () => html`
+  <lion-steps id="steps">
+    <lion-step initial-step>Step 1</lion-step>
+    <lion-step>Step 2</lion-step>
+    <lion-step>......</lion-step>
+    <lion-step>Step N</lion-step>
+  </lion-steps>
+`;
+```
+
+The first step needs to be explicitely set via `initial-step` so that it get status `entered`, while others are `untouched` by default. You can navigate between steps using `next()` and `previous()` methods, so that next step gets `entered` status, while previous one becomes `left`:
+
+```js
+next() {
+  return this.shadowRoot.getElementById('steps').next();
+}
+
+previous() {
+  return this.shadowRoot.getElementById('steps').previous();
+}
+```
+
+### Conditions
+
+You can provide a condition to a step (with or without `invert-condition` emulating if-else flow):
+
+```html
+<lion-steps data="[[data]]">
+  <lion-step>...</lion-step>
+  <lion-step>step where `data.smth` is set</lion-step>
+  <lion-step condition="myConditionFunc">if</lion-step>
+  <lion-step condition="myConditionFunc" invert-condition>else</lion-step>
+  <lion-step>...</lion-step>
+</lion-steps>
+
+<script>
+  // you have `data` property defined in the scope
+  ...
+  myConditionFunc(data) {
+    return data.smth === "what-you-need";
+  }
+  ...
+</script>
+```
+
+If a condition was not met a step gets a status `skipped`.
+
+### Forward only steps
+
+If you have an intermediate step loading data via AJAX request and then automatically calling `next()`, you can flag it as `forward-only`. This will ensure that navigation to previous step is possible and does not lead to another AJAX request which leads to next step again breaking flow for a user.
+
 ```html
 <lion-steps>
-  <lion-step initial-step>Step 1</lion-step>
-  <lion-step>Step 2</lion-step>
-  <lion-step>......</lion-step>
-  <lion-step>Step N</lion-step>
+  <lion-step>preliminary step</lion-step>
+  <lion-step forward-only>data is loaded and next() is called automatically afterwards</lion-step>
+  <!-- user decides to go to previous step here -->
+  <lion-step>do smth with data</lion-step>
+</lion-steps>
+```
+
+### Events
+
+If you need to be notified when transition between steps happens use `transition` event providing steps data:
+
+```html
+<lion-steps @transition="${onTransition}">
+  <lion-step>Step 1</lion-step>
+  <lion-step>Step 2</lion-step>
+  <lion-step>Step 3</lion-step>
+</lion-steps>
+
+<script>
+  ...
+  onTransition(event) {
+    console.log(event.detail.fromStep.number); // Number
+    console.log(event.detail.fromStep.element); // <lion-step>
+    console.log(event.detail.toStep.number); // Number
+    console.log(event.detail.toStep.element); // <lion-step>
+  }
+  ...
+</script>
+```
+
+For notifications about specific step status change you can use individual events like this:
+
+```html
+<lion-steps>
+  <lion-step @leave="${onLeave}">Step 1</lion-step>
+  <lion-step @skip="${onSkip}">Step 2</lion-step>
+  <lion-step @enter="${onEnter}">Step 3</lion-step>
 </lion-steps>
 ```
diff --git a/packages/steps/package.json b/packages/steps/package.json
index 5ce2a83b1..b9c248606 100644
--- a/packages/steps/package.json
+++ b/packages/steps/package.json
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "prepublishOnly": "../../scripts/npm-prepublish.js",
+    "start": "cd ../../ && yarn dev-server --open packages/steps/README.md",
     "test": "cd ../../ && yarn test:browser --grep \"packages/steps/test/**/*.test.js\"",
     "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/steps/test/**/*.test.js\""
   },
diff --git a/packages/steps/stories/index.stories.mdx b/packages/steps/stories/index.stories.mdx
deleted file mode 100644
index c6aeb139c..000000000
--- a/packages/steps/stories/index.stories.mdx
+++ /dev/null
@@ -1,265 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-
-import '../lion-step.js';
-import '../lion-steps.js';
-
-<Meta title="Navigation/Steps" />
-
-# Steps
-
-`lion-steps` breaks a single goal down into dependable sub-tasks.
-
-## Features
-
-- navigate between different steps with 'previous' and 'next' functions.
-- keeps status of each step
-  - untouched
-  - entered
-  - left
-  - skipped
-- options
-  - **initial-step**: Set to the first step of the flow, blocks calling `previous` function.
-  - **condition**: Dynamic condition, when true the step is added to the flow.
-  - **invert-condition**: Inverts the condition set.
-
-In many application you build multi-step workflows like multi-step forms where you want to split a long process into smaller steps making easier user's perception of it and making easier filling in data. The idea of this component is to provide a simple way to define such steps and transition from one to another while saving data between them and conditionally skip some steps based on the data.
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/select
-```
-
-```js
-import '@lion/steps/lion-steps.js';
-import '@lion/steps/lion-step.js';
-```
-
-### Define steps
-
-We provide two components: `lion-steps` and `lion-step`. Steps need to be direct children of `lion-steps`.
-
-<Story name="Define steps">
-  {html`
-    <lion-steps id="steps">
-      <lion-step initial-step>Step 1</lion-step>
-      <lion-step>Step 2</lion-step>
-      <lion-step>......</lion-step>
-      <lion-step>Step N</lion-step>
-    </lion-steps>
-  `}
-</Story>
-
-```html
-<lion-steps id="steps">
-  <lion-step initial-step>Step 1</lion-step>
-  <lion-step>Step 2</lion-step>
-  <lion-step>......</lion-step>
-  <lion-step>Step N</lion-step>
-</lion-steps>
-```
-
-The first step needs to be explicitely set via `initial-step` so that it get status `entered`, while others are `untouched` by default. You can navigate between steps using `next()` and `previous()` methods, so that next step gets `entered` status, while previous one becomes `left`:
-
-```js
-...
-next() {
-  return this.shadowRoot.getElementById('steps').next();
-}
-
-previous() {
-  return this.shadowRoot.getElementById('steps').previous();
-}
-...
-```
-
-### Conditions
-
-You can provide a condition to a step (with or without `invert-condition` emulating if-else flow):
-
-```html
-<lion-steps data="[[data]]">
-  <lion-step>...</lion-step>
-  <lion-step>step where `data.smth` is set</lion-step>
-  <lion-step condition="myConditionFunc">if</lion-step>
-  <lion-step condition="myConditionFunc" invert-condition>else</lion-step>
-  <lion-step>...</lion-step>
-</lion-steps>
-
-<script>
-  // you have `data` property defined in the scope
-  ...
-  myConditionFunc(data) {
-    return data.smth === "what-you-need";
-  }
-  ...
-</script>
-```
-
-If a condition was not met a step gets a status `skipped`.
-
-### Forward only steps
-
-If you have an intermediate step loading data via AJAX request and then automatically calling `next()`, you can flag it as `forward-only`. This will ensure that navigation to previous step is possible and does not lead to another AJAX request which leads to next step again breaking flow for a user.
-
-```html
-<lion-steps>
-  <lion-step>preliminary step</lion-step>
-  <lion-step forward-only>data is loaded and next() is called automatically afterwards</lion-step>
-  <!-- user decides to go to previous step here -->
-  <lion-step>do smth with data</lion-step>
-</lion-steps>
-```
-
-### Events
-
-If you need to be notified when transition between steps happens use `transition` event providing steps data:
-
-```html
-<lion-steps @transition="${onTransition}">
-  <lion-step>Step 1</lion-step>
-  <lion-step>Step 2</lion-step>
-  <lion-step>Step 3</lion-step>
-</lion-steps>
-
-<script>
-  ...
-  onTransition(event) {
-    console.log(event.detail.fromStep.number); // Number
-    console.log(event.detail.fromStep.element); // <lion-step>
-    console.log(event.detail.toStep.number); // Number
-    console.log(event.detail.toStep.element); // <lion-step>
-  }
-  ...
-</script>
-```
-
-For notifications about specific step status change you can use individual events like this:
-
-```html
-<lion-steps>
-  <lion-step @leave="${onLeave}">Step 1</lion-step>
-  <lion-step @skip="${onSkip}">Step 2</lion-step>
-  <lion-step @enter="${onEnter}">Step 3</lion-step>
-</lion-steps>
-```
-
-## Example
-
-<Story name="Default">
-  {html`
-    <lion-steps>
-      <lion-step initial-step>
-        <p>Welcome</p>
-        <button disabled>previous</button> &nbsp;
-        <input
-          type="button"
-          value="next"
-          @click=${ev => ev.target.parentElement.controller.next()}
-        />
-      </lion-step>
-      <lion-step>
-        <p>Are you single?</p>
-        <input
-          type="button"
-          value="yes"
-          @click=${ev => {
-            ev.target.parentElement.controller.data.isSingle = true;
-            ev.target.parentElement.controller.next();
-          }}
-        />
-        &nbsp;
-        <input
-          type="button"
-          value="no"
-          @click=${ev => {
-            ev.target.parentElement.controller.data.isSingle = false;
-            ev.target.parentElement.controller.next();
-          }}
-        />
-        <br /><br />
-        <input
-          type="button"
-          value="previous"
-          @click=${ev => ev.target.parentElement.controller.previous()}
-        />
-      </lion-step>
-      <lion-step id="is-single" .condition="${data => data.isSingle}">
-        <p>You are single</p>
-        <input
-          type="button"
-          value="previous"
-          @click=${ev => ev.target.parentElement.controller.previous()}
-        />
-        &nbsp;
-        <input
-          type="button"
-          value="next"
-          @click=${ev => ev.target.parentElement.controller.next()}
-        />
-      </lion-step>
-      <lion-step id="is-not-single" .condition="${data => data.isSingle}" invert-condition>
-        <p>You are NOT single.</p>
-        <input
-          type="button"
-          value="previous"
-          @click=${ev => ev.target.parentElement.controller.previous()}
-        />
-        &nbsp;
-        <input
-          type="button"
-          value="next"
-          @click=${ev => ev.target.parentElement.controller.next()}
-        />
-      </lion-step>
-      <lion-step>
-        <p>Finish</p>
-        <input
-          type="button"
-          value="previous"
-          @click=${ev => ev.target.parentElement.controller.previous()}
-        />
-      </lion-step>
-    </lion-steps>
-  `}
-</Story>
-
-```html
-<lion-steps>
-  <lion-step initial-step>
-    <p>Welcome</p>
-    <button disabled>previous</button> &nbsp; <input type="button" value="next" @click=${ev =>
-    ev.target.parentElement.controller.next()} />
-  </lion-step>
-  <lion-step>
-    <p>Are you single?</p>
-    <input type="button" value="yes" @click=${ev => {
-    ev.target.parentElement.controller.data.isSingle = true;
-    ev.target.parentElement.controller.next(); }} /> &nbsp; <input type="button" value="no"
-    @click=${ev => { ev.target.parentElement.controller.data.isSingle = false;
-    ev.target.parentElement.controller.next(); }} />
-    <br /><br />
-    <input type="button" value="previous" @click=${ev =>
-    ev.target.parentElement.controller.previous()} />
-  </lion-step>
-  <lion-step id="is-single" .condition="${data => data.isSingle}">
-    <p>You are single</p>
-    <input type="button" value="previous" @click=${ev =>
-    ev.target.parentElement.controller.previous()} /> &nbsp; <input type="button" value="next"
-    @click=${ev => ev.target.parentElement.controller.next()} />
-  </lion-step>
-  <lion-step id="is-not-single" .condition="${data => data.isSingle}" invert-condition>
-    <p>You are NOT single.</p>
-    <input type="button" value="previous" @click=${ev =>
-    ev.target.parentElement.controller.previous()} /> &nbsp; <input type="button" value="next"
-    @click=${ev => ev.target.parentElement.controller.next()} />
-  </lion-step>
-  <lion-step>
-    <p>Finish</p>
-    <input type="button" value="previous" @click=${ev =>
-    ev.target.parentElement.controller.previous()} />
-  </lion-step>
-</lion-steps>
-```
diff --git a/packages/switch/README.md b/packages/switch/README.md
index a04f993e2..53400e73f 100644
--- a/packages/switch/README.md
+++ b/packages/switch/README.md
@@ -2,10 +2,32 @@
 
 `lion-switch` is a component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. The Switch is not a Checkbox in disguise and should not be used as part of a form.
 
+```js script
+import { html } from 'lit-html';
+import { Validator } from '@lion/validate';
+import { LionSwitch } from './index.js';
+import './lion-switch.js';
+import '@lion/helpers/sb-action-logger.js';
+
+export default {
+  title: 'Buttons/Switch',
+};
+```
+
+```js story
+export const main = () => html` <lion-switch label="Label" help-text="Help text"></lion-switch> `;
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/buttons-switch) for a live demo and documentation
 
+## Features
+
+- Get or set the checked state (boolean) - `checked` boolean attribute
+- Pre-select an option by setting the `checked` boolean attribute
+- Get or set the value of the choice - `choiceValue()`
+
 ## How to use
 
 ### Installation
@@ -15,6 +37,8 @@ npm i --save @lion/switch
 ```
 
 ```js
+import { LionSwitch } from '@lion/switch';
+// or
 import '@lion/switch/lion-switch.js';
 ```
 
@@ -23,3 +47,70 @@ import '@lion/switch/lion-switch.js';
 ```html
 <lion-switch name="airplaneMode" label="Airplane mode" checked></lion-switch>
 ```
+
+### Disabled
+
+You can disable switches.
+
+```js preview-story
+export const disabled = () => html` <lion-switch label="Label" disabled></lion-switch> `;
+```
+
+### Validation
+
+Simple example that illustrates where validation feedback will be displayed.
+
+```js preview-story
+export const validation = () => {
+  const IsTrue = class extends Validator {
+    static get validatorName() {
+      return 'IsTrue';
+    }
+    execute(value) {
+      return !value.checked;
+    }
+    static async getMessage() {
+      return "You won't get the latest news!";
+    }
+  };
+  const tagName = 'custom-switch';
+  if (!customElements.get(tagName)) {
+    customElements.define(
+      tagName,
+      class CustomSwitch extends LionSwitch {
+        static get validationTypes() {
+          return [...super.validationTypes, 'info'];
+        }
+      },
+    );
+  }
+  return html`
+    <custom-switch
+      id="newsletterCheck"
+      name="newsletterCheck"
+      label="Subscribe to newsletter"
+      .validators="${[new IsTrue(null, { type: 'info' })]}"
+    ></custom-switch>
+  `;
+};
+```
+
+### With checked-changed handler
+
+You can listen for a `checked-changed` event that is fired when the switch is clicked.
+
+```js preview-story
+export const handler = () => {
+  const uid = Math.random().toString(36).substr(2, 10);
+  return html`
+    <lion-switch
+      label="Label"
+      @checked-changed="${e => {
+        document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`);
+      }}"
+    >
+    </lion-switch>
+    <sb-action-logger id="logger-${uid}"></sb-action-logger>
+  `;
+};
+```
diff --git a/packages/switch/package.json b/packages/switch/package.json
index df1fea842..cf2d1ed7a 100644
--- a/packages/switch/package.json
+++ b/packages/switch/package.json
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "prepublishOnly": "../../scripts/npm-prepublish.js",
+    "start": "cd ../../ && yarn dev-server --open packages/switch/README.md",
     "test": "cd ../../ && yarn test:browser --grep \"packages/switch/test/**/*.test.js\"",
     "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/switch/test/**/*.test.js\""
   },
diff --git a/packages/switch/stories/index.stories.mdx b/packages/switch/stories/index.stories.mdx
deleted file mode 100644
index d3e9c4513..000000000
--- a/packages/switch/stories/index.stories.mdx
+++ /dev/null
@@ -1,173 +0,0 @@
-import { Story, Meta, html } from '@open-wc/demoing-storybook';
-import { Validator } from '@lion/validate';
-
-import { LionSwitch } from '../index.js';
-import '../lion-switch.js';
-import '@lion/helpers/sb-action-logger.js';
-
-<Meta title="Buttons/Switch" />
-
-# Switch
-
-`lion-switch` is a component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. The Switch is not a Checkbox in disguise and should not be used as part of a form.
-
-<Story name="Default (off)">{html`
-  <lion-switch label="Label" help-text="Help text"></lion-switch>
-`}</Story>
-
-```html
-<lion-switch label="Label" help-text="Help text"></lion-switch>
-```
-
-<Story name="Checked">{html`
-  <lion-switch label="Label" help-text="Help text" checked></lion-switch>
-`}</Story>
-
-```html
-<lion-switch label="Label" help-text="Help text" checked></lion-switch>
-```
-
-## Features
-
-- Get or set the checked state (boolean) - `checked` boolean attribute
-- Pre-select an option by setting the `checked` boolean attribute
-- Get or set the value of the choice - `choiceValue()`
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/switch
-```
-
-```js
-import '@lion/switch/lion-switch.js';
-```
-
-## Examples
-
-### Disabled
-
-You can disable switches.
-
-<Story name="Disabled">{html`
-  <lion-switch label="Label" disabled></lion-switch>
-`}</Story>
-
-```html
-<lion-switch label="Label" disabled></lion-switch>
-```
-
-### Validation
-
-Simple example that illustrates where validation feedback will be displayed.
-
-<Story name="Validation">
-  {() => {
-    const IsTrue = class extends Validator {
-      static get validatorName() {
-        return 'IsTrue';
-      }
-      execute(value) {
-        return !value.checked;
-      }
-      static async getMessage() {
-        return "You won't get the latest news!";
-      }
-    };
-    const tagName = 'custom-switch';
-    if (!customElements.get(tagName)) {
-      customElements.define(
-        tagName,
-        class CustomSwitch extends LionSwitch {
-          static get validationTypes() {
-            return [...super.validationTypes, 'info'];
-          }
-        },
-      );
-    }
-    return html`
-      <custom-switch
-        id="newsletterCheck"
-        name="newsletterCheck"
-        label="Subscribe to newsletter"
-        .validators="${[new IsTrue(null, { type: 'info' })]}"
-      ></custom-switch>
-    `;
-  }}
-</Story>
-
-```js
-import { Validator } from '@lion/validate';
-import { LionSwitch } from '@lion/switch';
-
-const IsTrue = class extends Validator {
-  static get validatorName() {
-    return 'IsTrue';
-  }
-  execute(value) {
-    return !value.checked;
-  }
-  static async getMessage() {
-    return "You won't get the latest news!";
-  }
-};
-
-class CustomSwitch extends LionSwitch {
-  static get validationTypes() {
-    return [...super.validationTypes, 'info'];
-  }
-}
-customElements.define('custom-switch', CustomSwitch);
-```
-
-```html
-<custom-switch
-  id="newsletterCheck"
-  name="newsletterCheck"
-  label="Subscribe to newsletter"
-  .validators="${[new IsTrue(null, {type: 'info'})]}"
-></custom-switch>
-```
-
-### With checked-changed handler
-
-You can listen for a `checked-changed` event that is fired when the switch is clicked.
-
-<Story name="checked-changed handler">
-  {() => {
-    const uid = Math.random()
-      .toString(36)
-      .substr(2, 10);
-    return html`
-      <lion-switch
-        label="Label"
-        @checked-changed="${e => {
-          document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`);
-        }}"
-      >
-      </lion-switch>
-      <sb-action-logger id="logger-${uid}"></sb-action-logger>
-    `;
-  }}
-</Story>
-
-```js
-import '@lion/helpers/sb-action-logger.js';
-
-const uid = Math.random()
-  .toString(36)
-  .substr(2, 10);
-```
-
-```html
-<lion-switch
-  label="Label"
-  @checked-changed="${(e) => {
-    document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`);
-  }}"
->
-  <sb-action-logger id="logger-${uid}"></sb-action-logger>
-</lion-switch>
-```
diff --git a/packages/tabs/README.md b/packages/tabs/README.md
index dc2bbb2fd..339753955 100644
--- a/packages/tabs/README.md
+++ b/packages/tabs/README.md
@@ -1,7 +1,34 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Tabs
 
 `lion-tabs` implements tabs view to allow users to quickly move between a small number of equally important views.
 
+```js script
+import { LitElement } from 'lit-element';
+import { html } from 'lit-html';
+import './lion-tabs.js';
+
+export default {
+  title: 'Navigation/Tabs',
+};
+```
+
+```js story
+export const main = () => html`
+  <lion-tabs>
+    <button slot="tab">Info</button>
+    <p slot="panel">
+      Info page with lots of information about us.
+    </p>
+    <button slot="tab">Work</button>
+    <p slot="panel">
+      Work page that showcases our work.
+    </p>
+  </lion-tabs>
+`;
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/tabs) for a live demo and API documentation
@@ -17,6 +44,8 @@ npm i --save @lion/tabs;
 ### Usage
 
 ```js
+import { LiontTabs } from '@lion/tabs';
+// or
 import '@lion/tabs/lion-tabs.js';
 ```
 
@@ -32,3 +61,194 @@ import '@lion/tabs/lion-tabs.js';
   </p>
 </lion-tabs>
 ```
+
+## Examples
+
+### Selected Index
+
+You can set the `selectedIndex` to select a certain tab.
+
+```js preview-story
+export const selectedIndex = () => html`
+  <lion-tabs .selectedIndex=${1}>
+    <button slot="tab">Info</button>
+    <p slot="panel">
+      Info page with lots of information about us.
+    </p>
+    <button slot="tab">Work</button>
+    <p slot="panel">
+      Work page that showcases our work.
+    </p>
+  </lion-tabs>
+`;
+```
+
+### Slots Order
+
+The tab and panel slots are ordered by DOM order.
+
+This means you can switch the grouping in your `lion-tabs` from tab + panel to all tabs first or all panels first.
+
+```js preview-story
+export const slotsOrder = () => html`
+  <lion-tabs>
+    <button slot="tab">Info</button>
+    <button slot="tab">Work</button>
+    <p slot="panel">
+      Info page with lots of information about us.
+    </p>
+    <p slot="panel">
+      Work page that showcases our work.
+    </p>
+  </lion-tabs>
+`;
+```
+
+### Distribute New Elements
+
+Below, we demonstrate on how you could dynamically add new tab + panels.
+
+```js preview-story
+export const distributeNewElement = () => {
+  const tagName = 'lion-tabs-experimental';
+  if (!customElements.get(tagName)) {
+    customElements.define(
+      tagName,
+      class extends LitElement {
+        static get properties() {
+          return {
+            __collection: { type: Array },
+          };
+        }
+        render() {
+          return html`
+            <h3>Append</h3>
+            <button @click="${this.__handleAppendClick}">
+              Append
+            </button>
+            <lion-tabs id="appendTabs">
+              <button slot="tab">tab 1</button>
+              <p slot="panel">panel 1</p>
+              <button slot="tab">tab 2</button>
+              <p slot="panel">panel 2</p>
+            </lion-tabs>
+            <hr />
+            <h3>Push</h3>
+            <button @click="${this.__handlePushClick}">
+              Push
+            </button>
+            <lion-tabs id="pushTabs">
+              <button slot="tab">tab 1</button>
+              <p slot="panel">panel 1</p>
+              <button slot="tab">tab 2</button>
+              <p slot="panel">panel 2</p>
+              ${this.__collection.map(
+                item => html`
+                  <button slot="tab">${item.button}</button>
+                  <p slot="panel">${item.panel}</p>
+                `,
+              )}
+            </lion-tabs>
+          `;
+        }
+        constructor() {
+          super();
+          this.__collection = [];
+        }
+        __handleAppendClick() {
+          const tabsElement = this.shadowRoot.querySelector('#appendTabs');
+          const c = 2;
+          const n = Math.floor(tabsElement.children.length / 2);
+          for (let i = n + 1; i < n + c; i += 1) {
+            const tab = document.createElement('button');
+            tab.setAttribute('slot', 'tab');
+            tab.innerText = `tab ${i}`;
+            const panel = document.createElement('p');
+            panel.setAttribute('slot', 'panel');
+            panel.innerText = `panel ${i}`;
+            tabsElement.append(tab);
+            tabsElement.append(panel);
+          }
+        }
+        __handlePushClick() {
+          const tabsElement = this.shadowRoot.querySelector('#pushTabs');
+          const i = Math.floor(tabsElement.children.length / 2) + 1;
+          this.__collection = [
+            ...this.__collection,
+            {
+              button: `tab ${i}`,
+              panel: `panel ${i}`,
+            },
+          ];
+        }
+      },
+    );
+  }
+  return html`
+    <lion-tabs-experimental></lion-tabs-experimental>
+  `;
+};
+```
+
+One way is by creating the DOM elements and appending them as needed.
+
+Inside your `lion-tabs` extension, an example for appending nodes on a certain button click:
+
+```js
+__handleAppendClick() {
+  const tabsAmount = this.children.length / 2;
+  const tab = document.createElement('button');
+  tab.setAttribute('slot', 'tab');
+  tab.innerText = `tab ${tabsAmount + 1}`;
+  const panel = document.createElement('p');
+  panel.setAttribute('slot', 'panel');
+  panel.innerText = `panel ${tabsAmount + 1}`;
+  this.append(tab);
+  this.append(panel);
+}
+```
+
+The other way is by adding data to a Lit property where you loop over this property in your template.
+You then need to ensure this causes a re-render.
+
+```js
+__handlePushClick() {
+  const tabsAmount = this.children.length;
+  myCollection = [
+    ...myCollection,
+    {
+      button: `tab ${tabsAmount + 1}`,
+      panel: `panel ${tabsAmount + 1}`,
+    },
+  ];
+  renderMyCollection();
+}
+```
+
+Make sure your template re-renders when myCollection is updated.
+
+```html
+<lion-tabs id="pushTabs">
+  ${myCollection.map(item => html`
+  <button slot="tab">${item.button}</button>
+  <p slot="panel">${item.panel}</p>
+  `)}
+</lion-tabs>
+```
+
+## Rationale
+
+### No separate active/focus state when using keyboard
+
+We will immediately switch content as all our content comes from light dom (e.g. no latency)
+
+See Note at <https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-19>
+
+> It is recommended that tabs activate automatically when they receive focus as long as their
+> associated tab panels are displayed without noticeable latency. This typically requires tab
+> panel content to be preloaded.
+
+### Panels are not focusable
+
+Focusable elements should have a means to interact with them. Tab panels themselves do not offer any interactiveness.
+If there is a button or a form inside the tab panel then these elements get focused directly.
diff --git a/packages/tabs/package.json b/packages/tabs/package.json
index 825d456cc..5778acaff 100644
--- a/packages/tabs/package.json
+++ b/packages/tabs/package.json
@@ -15,6 +15,7 @@
   },
   "scripts": {
     "prepublishOnly": "../../scripts/npm-prepublish.js",
+    "start": "cd ../../ && yarn dev-server --open packages/tabs/README.md",
     "test": "cd ../../ && yarn test:browser --grep \"packages/tabs/test/**/*.test.js\"",
     "test:watch": "cd ../../ && yarn test:browser:watch --grep \"packages/tabs/test/**/*.test.js\""
   },
diff --git a/packages/tabs/stories/index.stories.mdx b/packages/tabs/stories/index.stories.mdx
deleted file mode 100644
index c506e1df8..000000000
--- a/packages/tabs/stories/index.stories.mdx
+++ /dev/null
@@ -1,247 +0,0 @@
-import { Story, Meta, html, Preview } from '@open-wc/demoing-storybook';
-import { LitElement } from '@lion/core';
-
-import '../lion-tabs.js';
-
-<Meta title="Navigation/Tabs" parameters={{ component: 'lion-tabs' }} />
-
-# Tabs
-
-`lion-tabs` implements tabs view to allow users to quickly move between a small number of equally important views.
-
-<Preview>
-  <Story name="default">
-    {html`
-      <lion-tabs>
-        <button slot="tab">Info</button>
-        <p slot="panel">
-          Info page with lots of information about us.
-        </p>
-        <button slot="tab">Work</button>
-        <p slot="panel">
-          Work page that showcases our work.
-        </p>
-      </lion-tabs>
-    `}
-  </Story>
-</Preview>
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/tabs;
-```
-
-```js
-import '@lion/tabs/lion-tabs.js';
-```
-
-```html
-<lion-tabs>
-  <button slot="tab">Info</button>
-  <p slot="panel">
-    Info page with lots of information about us.
-  </p>
-  <button slot="tab">Work</button>
-  <p slot="panel">
-    Work page that showcases our work.
-  </p>
-</lion-tabs>
-```
-
-## Examples
-
-### Selected Index
-
-You can set the `selectedIndex` to select a certain tab.
-
-<Preview>
-  <Story name="Selected index">
-    {html`
-      <lion-tabs .selectedIndex=${1}>
-        <button slot="tab">Info</button>
-        <p slot="panel">
-          Info page with lots of information about us.
-        </p>
-        <button slot="tab">Work</button>
-        <p slot="panel">
-          Work page that showcases our work.
-        </p>
-      </lion-tabs>
-    `}
-  </Story>
-</Preview>
-
-### Slots Order
-
-The tab and panel slots are ordered by DOM order.
-
-This means you can switch the grouping in your `lion-tabs` from tab + panel to all tabs first or all panels first.
-
-<Preview>
-  <Story name="Slots order">
-    {html`
-      <lion-tabs>
-        <button slot="tab">Info</button>
-        <button slot="tab">Work</button>
-        <p slot="panel">
-          Info page with lots of information about us.
-        </p>
-        <p slot="panel">
-          Work page that showcases our work.
-        </p>
-      </lion-tabs>
-    `}
-  </Story>
-</Preview>
-
-### Distribute New Elements
-
-Below, we demonstrate on how you could dynamically add new tab + panels.
-
-<Story name="Distribute new elements">
-  {() => {
-    const tagName = 'lion-tabs-experimental';
-    if (!customElements.get(tagName)) {
-      customElements.define(
-        tagName,
-        class extends LitElement {
-          static get properties() {
-            return {
-              __collection: { type: Array },
-            };
-          }
-          render() {
-            return html`
-              <h3>Append</h3>
-              <button @click="${this.__handleAppendClick}">
-                Append
-              </button>
-              <lion-tabs id="appendTabs">
-                <button slot="tab">tab 1</button>
-                <p slot="panel">panel 1</p>
-                <button slot="tab">tab 2</button>
-                <p slot="panel">panel 2</p>
-              </lion-tabs>
-              <hr />
-              <h3>Push</h3>
-              <button @click="${this.__handlePushClick}">
-                Push
-              </button>
-              <lion-tabs id="pushTabs">
-                <button slot="tab">tab 1</button>
-                <p slot="panel">panel 1</p>
-                <button slot="tab">tab 2</button>
-                <p slot="panel">panel 2</p>
-                ${this.__collection.map(
-                  item => html`
-                    <button slot="tab">${item.button}</button>
-                    <p slot="panel">${item.panel}</p>
-                  `,
-                )}
-              </lion-tabs>
-            `;
-          }
-          constructor() {
-            super();
-            this.__collection = [];
-          }
-          __handleAppendClick() {
-            const tabsElement = this.shadowRoot.querySelector('#appendTabs');
-            const c = 2;
-            const n = Math.floor(tabsElement.children.length / 2);
-            for (let i = n + 1; i < n + c; i += 1) {
-              const tab = document.createElement('button');
-              tab.setAttribute('slot', 'tab');
-              tab.innerText = `tab ${i}`;
-              const panel = document.createElement('p');
-              panel.setAttribute('slot', 'panel');
-              panel.innerText = `panel ${i}`;
-              tabsElement.append(tab);
-              tabsElement.append(panel);
-            }
-          }
-          __handlePushClick() {
-            const tabsElement = this.shadowRoot.querySelector('#pushTabs');
-            const i = Math.floor(tabsElement.children.length / 2) + 1;
-            this.__collection = [
-              ...this.__collection,
-              {
-                button: `tab ${i}`,
-                panel: `panel ${i}`,
-              },
-            ];
-          }
-        },
-      );
-    }
-    return html`
-      <lion-tabs-experimental></lion-tabs-experimental>
-    `;
-  }}
-</Story>
-
-One way is by creating the DOM elements and appending them as needed.
-
-Inside your `lion-tabs` extension, an example for appending nodes on a certain button click:
-
-```js
-__handleAppendClick() {
-  const tabsAmount = this.children.length / 2;
-  const tab = document.createElement('button');
-  tab.setAttribute('slot', 'tab');
-  tab.innerText = `tab ${tabsAmount + 1}`;
-  const panel = document.createElement('p');
-  panel.setAttribute('slot', 'panel');
-  panel.innerText = `panel ${tabsAmount + 1}`;
-  this.append(tab);
-  this.append(panel);
-}
-```
-
-The other way is by adding data to a Lit property where you loop over this property in your template.
-You then need to ensure this causes a re-render.
-
-```js
-__handlePushClick() {
-  const tabsAmount = this.children.length;
-  myCollection = [
-    ...myCollection,
-    {
-      button: `tab ${tabsAmount + 1}`,
-      panel: `panel ${tabsAmount + 1}`,
-    },
-  ];
-  renderMyCollection();
-}
-```
-
-Make sure your template re-renders when myCollection is updated.
-
-```html
-<lion-tabs id="pushTabs">
-  ${myCollection.map(item => html`
-  <button slot="tab">${item.button}</button>
-  <p slot="panel">${item.panel}</p>
-  `)}
-</lion-tabs>
-```
-
-## Rationale
-
-### No separate active/focus state when using keyboard
-
-We will immediately switch content as all our content comes from light dom (e.g. no latency)
-
-See Note at <https://www.w3.org/TR/wai-aria-practices/#keyboard-interaction-19>
-
-> It is recommended that tabs activate automatically when they receive focus as long as their
-> associated tab panels are displayed without noticeable latency. This typically requires tab
-> panel content to be preloaded.
-
-### Panels are not focusable
-
-Focusable elements should have a means to interact with them. Tab panels themselves do not offer any interactiveness.
-If there is a button or a form inside the tab panel then these elements get focused directly.
diff --git a/packages/textarea/README.md b/packages/textarea/README.md
index a05f7992e..78689c636 100644
--- a/packages/textarea/README.md
+++ b/packages/textarea/README.md
@@ -1,12 +1,38 @@
 # Textarea
 
-`lion-textarea` component is a webcomponent that enhances the functionality of the native `<input type="textarea">` element.
+`lion-textarea` is a webcomponent that enhances the functionality of the native `<input type="textarea">` element.
 Its purpose is to provide a way for users to write text that is multiple lines long.
 
+```js script
+import { html } from 'lit-html';
+import { loadDefaultFeedbackMessages, MaxLength, MinLength, Required } from '@lion/validate';
+
+import './lion-textarea.js';
+
+export default {
+  title: 'Forms/Textarea',
+};
+
+loadDefaultFeedbackMessages();
+```
+
+```js preview-story
+export const main = () => html`
+  <lion-textarea label="Stops growing after 4 rows" max-rows="4"></lion-textarea>
+`;
+```
+
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/forms-textarea--default-story) for a live demo and API documentation
 
+## Features
+
+- Default rows is 2 and it will grow to max-rows of 6.
+- `max-rows` attribute to set the amount of rows it should resize to, before it will scroll
+- `rows` attribute to set the minimum amount of rows
+- `readonly` attribute to prevent changing the content
+
 ## How to use
 
 ### Installation
@@ -16,11 +42,84 @@ npm i --save @lion/textarea
 ```
 
 ```js
+import { LionTextare } from '@lion/textarea';
+// or
 import '@lion/textarea/lion-textarea.js';
 ```
 
-### Example
+## Examples
 
-```html
-<lion-textarea label="Stops growing after 4 rows" max-rows="4"></lion-textarea>
+### Prefilled
+
+You can prefill the textarea. If you want to prefill on multiline, you will have to add newline characters `'\n'`.
+
+```js preview-story
+export const prefilled = () => html`
+  <lion-textarea
+    label="Prefilled"
+    .modelValue=${['batman', 'and', 'robin'].join('\n')}
+  ></lion-textarea>
+`;
+```
+
+### Disabled
+
+The textarea can be disabled with the `disabled` attribute.
+
+```js preview-story
+export const disabled = () => html` <lion-textarea label="Disabled" disabled></lion-textarea> `;
+```
+
+### Readonly
+
+`readonly` attribute indicate that you can't change the content. Compared with `disabled` attribute, the `readonly` attribute doesn't prevent clicking or selecting the element.
+
+```js preview-story
+export const readonly = () => html`
+  <lion-textarea
+    label="Readonly"
+    readonly
+    .modelValue=${['batman', 'and', 'robin'].join('\n')}
+  ></lion-textarea>
+`;
+```
+
+### Stop growing
+
+Use the `max-rows` attribute to make it stop growing after a certain amount of lines.
+
+```js preview-story
+export const stopGrowing = () => html`
+  <lion-textarea
+    label="Stop growing"
+    max-rows="4"
+    .modelValue=${['batman', 'and', 'robin'].join('\n')}
+  ></lion-textarea>
+`;
+```
+
+### Non-growing
+
+To have a fixed size provide `rows` and `max-rows` with the same value.
+
+```js preview-story
+export const nonGrowing = () => html`
+  <lion-textarea label="Non Growing" rows="3" max-rows="3"></lion-textarea>
+`;
+```
+
+### Validation
+
+The textarea can have validation.
+
+```js preview-story
+export const validation = () => {
+  return html`
+    <lion-textarea
+      .validators="${[new Required(), new MinLength(10), new MaxLength(400)]}"
+      label="String"
+      .modelValue="${'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}"
+    ></lion-textarea>
+  `;
+};
 ```
diff --git a/packages/textarea/stories/index.stories.mdx b/packages/textarea/stories/index.stories.mdx
deleted file mode 100644
index 2bfd0a150..000000000
--- a/packages/textarea/stories/index.stories.mdx
+++ /dev/null
@@ -1,143 +0,0 @@
-import { Story, Meta, Preview, html } from '@open-wc/demoing-storybook';
-import { loadDefaultFeedbackMessages, MaxLength, MinLength, Required } from '@lion/validate';
-
-import '../lion-textarea.js';
-
-<Meta title="Forms/Textarea" parameters={{ component: 'lion-textarea' }} />
-
-# Textarea
-
-`lion-textarea` is a webcomponent that enhances the functionality of the native `<input type="textarea">` element.
-Its purpose is to provide a way for users to write text that is multiple lines long.
-
-<Preview>
-  <Story name="Default">
-    {html`
-      <lion-textarea label="Stops growing after 4 rows" max-rows="4"></lion-textarea>
-    `}
-  </Story>
-</Preview>
-
-Default rows is 2 and it will grow to max-rows of 6.
-
-## Features
-
-- `max-rows` attribute to set the amount of rows it should resize to, before it will scroll
-- `rows` attribute to set the minimum amount of rows
-- `readonly` attribute to prevent changing the content
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/textarea
-```
-
-```js
-import '@lion/textarea/lion-textarea.js';
-```
-
-## Examples
-
-### Prefilled
-
-You can prefill the textarea. If you want to prefill on multiline, you will have to add newline characters `'\n'`.
-
-<Preview>
-  <Story name="Prefilled">
-    {html`
-      <lion-textarea
-        label="Prefilled"
-        .modelValue=${['batman', 'and', 'robin'].join('\n')}
-      ></lion-textarea>
-    `}
-  </Story>
-</Preview>
-
-### Disabled
-
-The textarea can be disabled with the `disabled` attribute.
-
-<Preview>
-  <Story name="Disabled">
-    {html`
-      <lion-textarea label="Disabled" disabled></lion-textarea>
-    `}
-  </Story>
-</Preview>
-
-### Readonly
-
-`readonly` attribute indicate that you can't change the content. Compared with `disabled` attribute, the `readonly` attribute doesn't prevent clicking or selecting the element.
-
-<Preview>
-  <Story name="Readonly">
-    {html`
-      <lion-textarea 
-        label="Readonly" 
-        readonly
-        .modelValue=${['batman', 'and', 'robin'].join('\n')}
-      ></lion-textarea>
-    `}
-  </Story>
-</Preview>
-
-### Stop growing
-
-Use the `max-rows` attribute to make it stop growing after a certain amount of lines.
-
-<Preview>
-  <Story name="Stop growing">
-    {html`
-      <lion-textarea
-        label="Stop growing"
-        max-rows="4"
-        .modelValue=${['batman', 'and', 'robin'].join('\n')}
-      ></lion-textarea>
-    `}
-  </Story>
-</Preview>
-
-### Non-growing
-
-To have a fixed size provide `rows` and `max-rows` with the same value.
-
-<Preview>
-  <Story name="Non-growing">
-    {html`
-      <lion-textarea label="Non Growing" rows="3" max-rows="3"></lion-textarea>
-    `}
-  </Story>
-</Preview>
-
-### Validation
-
-The textarea can have validation.
-
-<Story name="Validation">
-  {() => {
-    loadDefaultFeedbackMessages();
-    return html`
-      <lion-textarea
-        .validators="${[new Required(), new MinLength(10), new MaxLength(400)]}"
-        label="String"
-        .modelValue="${'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}"
-      ></lion-textarea>
-    `;
-  }}
-</Story>
-
-```js
-import { loadDefaultFeedbackMessages, MaxLength, MinLength, Required } from '@lion/validate';
-
-loadDefaultFeedbackMessages();
-```
-
-```html
-<lion-textarea
-  .validators="${[new Required(), new MinLength(10), new MaxLength(400)]}"
-  label="String"
-  .modelValue="${'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.'}"
-></lion-textarea>
-```
diff --git a/packages/tooltip/README.md b/packages/tooltip/README.md
index 5628265fe..04192210a 100644
--- a/packages/tooltip/README.md
+++ b/packages/tooltip/README.md
@@ -1,13 +1,73 @@
 # Tooltip
 
 `lion-tooltip` is a component used for basic popups on hover.
-Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard,
-or if the invoker element is focused.
+Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if th
+e invoker element is focused.
+
+```js script
+import { css, html } from '@lion/core';
+import './lion-tooltip.js';
+
+export default {
+  title: 'Overlays/Tooltip',
+  // parameters: {
+  //   component: 'lion-tooltip',
+  //   options: {
+  //     selectedPanel: 'storybookjs/knobs/panel'
+  //   }
+  // }
+  // decorators: [withKnobs]
+};
+
+const tooltipDemoStyles = css`
+  .demo-tooltip-invoker {
+    margin: 50px;
+  }
+
+  .demo-tooltip-content {
+    display: block;
+    font-size: 16px;
+    color: white;
+    background-color: black;
+    border-radius: 4px;
+    padding: 8px;
+  }
+
+  .demo-box-placements {
+    display: flex;
+    flex-direction: column;
+    margin: 40px 0 0 200px;
+  }
+
+  .demo-box-placements lion-tooltip {
+    margin: 20px;
+  }
+`;
+```
+
+```js preview-story
+export const main = () => html`
+    <style>${tooltipDemoStyles}</style>
+    <lion-tooltip>
+      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
+      <div slot="content" class="demo-tooltip-content">This is a tooltip<div>
+    </lion-tooltip>
+  `;
+```
 
 ## Live Demo/Documentation
 
 > See our [storybook](http://lion-web-components.netlify.com/?path=/docs/overlays-specific-wc-tooltip) for a live demo and API documentation
 
+## Features
+
+- Show content when hovering the invoker
+- Show content when the invoker is focused
+- Uses Popper.js under the hood, to have the content pop up relative to the invoker
+- Use `.config` to override the overlay configuration
+- Config has `popperConfig` property that has a one to one relation with Popper.js configuration API.
+- Comes with a default `lion-tooltip-arrow` for an arrow.
+
 ## How to use
 
 ### Installation
@@ -17,14 +77,156 @@ npm i --save @lion/tooltip
 ```
 
 ```js
+import { LionTooltip } from '@lion/tooltip';
+// or
 import '@lion/tooltip/lion-tooltip.js';
 ```
 
-### Example
+## Examples
 
-```html
-<lion-tooltip>
-  <button slot="invoker">Hover me</button>
-  <div slot="content">This is a tooltip<div>
-</lion-tooltip>
+### Placements
+
+You can easily change the placement of the content node relative to the invoker.
+
+```js preview-story
+export const placements = () => html`
+  <style>
+    ${tooltipDemoStyles}
+  </style>
+  <div class="demo-box-placements">
+    <lion-tooltip .config=${{ popperConfig: { placement: 'top' } }}>
+      <button slot="invoker">Top</button>
+      <div slot="content" class="demo-tooltip-content">Its top placement</div>
+      <lion-tooltip-arrow slot="arrow"></lion-tooltip-arrow>
+    </lion-tooltip>
+    <lion-tooltip .config=${{ popperConfig: { placement: 'right' } }}>
+      <button slot="invoker">Right</button>
+      <div slot="content" class="demo-tooltip-content">Its right placement</div>
+      <lion-tooltip-arrow slot="arrow"></lion-tooltip-arrow>
+    </lion-tooltip>
+    <lion-tooltip .config=${{ popperConfig: { placement: 'bottom' } }}>
+      <button slot="invoker">Bottom</button>
+      <div slot="content" class="demo-tooltip-content">Its bottom placement</div>
+      <lion-tooltip-arrow slot="arrow"></lion-tooltip-arrow>
+    </lion-tooltip>
+    <lion-tooltip .config=${{ popperConfig: { placement: 'left' } }}>
+      <button slot="invoker">Left</button>
+      <div slot="content" class="demo-tooltip-content">Its left placement</div>
+      <lion-tooltip-arrow slot="arrow"></lion-tooltip-arrow>
+    </lion-tooltip>
+  </div>
+`;
+```
+
+### Override Popper configuration
+
+You can override the Popper configuration, the API is one to one with Popper's API, and includes modifiers.
+
+```js preview-story
+export const overridePopperConfig = () => html`
+    <style>${tooltipDemoStyles}</style>
+    <lion-tooltip .config=${{
+      popperConfig: {
+        placement: 'bottom-start',
+        positionFixed: true,
+        modifiers: {
+          keepTogether: {
+            enabled: true,
+          },
+          preventOverflow: {
+            enabled: false,
+            boundariesElement: 'viewport',
+            padding: 16,
+          },
+          flip: {
+            enabled: true,
+            boundariesElement: 'viewport',
+            padding: 4,
+          },
+          offset: {
+            enabled: true,
+            offset: `0, 4px`,
+          },
+        },
+      },
+    }}>
+      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
+      <div slot="content" class="demo-tooltip-content">This is a tooltip<div>
+    </lion-tooltip>
+  `;
+```
+
+Modifier explanations:
+
+- keepTogether: prevents detachment of content element from reference element, which could happen if the invoker is not in the viewport anymore. If this is disabled, the content will always be in view.
+- preventOverflow: enables shifting and sliding behavior on the secondary axis (e.g. if top placement, this is horizontal shifting and sliding). The padding property defines the margin with the boundariesElement, which is usually the viewport.
+- flip: enables flipping behavior on the primary axis (e.g. if top placement, flipping to bottom if there is not enough space on the top). The padding property defines the margin with the boundariesElement, which is usually the viewport.
+- offset: enables an offset between the content node and the invoker node. First argument is horizontal marign, second argument is vertical margin.
+
+### Arrow
+
+Popper also comes with an arrow modifier.
+In our tooltip you can pass an arrow element (e.g. an SVG Element) through the `slot="arrow"`.
+
+We export a `lion-tooltip-arrow` that you can use by default for this.
+
+```js preview-story
+export const arrow = () => html`
+    <style>${tooltipDemoStyles}</style>
+    <lion-tooltip>
+      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
+      <div slot="content" class="demo-tooltip-content">This is a tooltip<div>
+      <lion-tooltip-arrow slot="arrow"></lion-tooltip-arrow>
+    </lion-tooltip>
+  `;
+```
+
+#### Use a custom arrow
+
+If you plan on passing your own arrow element, you can extend the `lion-tooltip-arrow`.
+
+All you need to do is override the `render` method to pass your own SVG, and extend the styles to pass the proper dimensions of your arrow.
+The rest of the work is done by Popper.js (for positioning) and the `lion-tooltip-arrow` (arrow dimensions, rotation, etc.).
+
+```js preview-story
+export const customArrow = () => {
+  if (!customElements.get('custom-tooltip')) {
+    customElements.define(
+      'custom-tooltip',
+      class extends LionTooltip {
+        static get styles() {
+          return [
+            super.styles,
+            css`
+              :host {
+                --tooltip-arrow-width: 20px;
+                --tooltip-arrow-height: 8px;
+              }
+            `,
+          ];
+        }
+        constructor() {
+          super();
+          this.hasArrow = true;
+        }
+        _arrowTemplate() {
+          return html`
+            <svg viewBox="0 0 20 8">
+              <path d="M 0,0 h 20 L 10,8 z"></path>
+            </svg>
+          `;
+        }
+      },
+    );
+  }
+  return html`
+    <style>
+      ${tooltipDemoStyles}
+    </style>
+    <custom-tooltip>
+      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
+      <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
+    </custom-tooltip>
+  `;
+};
 ```
diff --git a/packages/tooltip/stories/index.stories.mdx b/packages/tooltip/stories/index.stories.mdx
deleted file mode 100644
index 82d985084..000000000
--- a/packages/tooltip/stories/index.stories.mdx
+++ /dev/null
@@ -1,274 +0,0 @@
-import { Story, Meta, html, object, withKnobs } from '@open-wc/demoing-storybook';
-import { css } from '@lion/core';
-import { tooltipDemoStyles } from './tooltipDemoStyles.js';
-import { LionTooltip } from '../src/LionTooltip.js';
-import '../lion-tooltip.js';
-
-<Meta
-  title="Overlays/Tooltip"
-  parameters={{
-    component: 'lion-tooltip',
-    options: {
-      selectedPanel: 'storybookjs/knobs/panel'
-    }
-  }}
-  decorators={[withKnobs]}
-/>
-
-# Tooltip
-
-`lion-tooltip` is a component used for basic popups on hover.
-Its purpose is to show content appearing when the user hovers over an invoker element with the cursor or with the keyboard, or if th
-e invoker element is focused.
-
-<Story name="Default">
-  {html`
-    <style>${tooltipDemoStyles}</style>
-    <lion-tooltip>
-      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
-      <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
-    </lion-tooltip>
-  `}
-</Story>
-
-```html
-<lion-tooltip>
-  <button slot="invoker">Hover me</button>
-  <div slot="content">This is a tooltip<div>
-</lion-tooltip>
-```
-
-## Features
-
-- Show content when hovering the invoker
-- Show content when the invoker is focused
-- Uses Popper.js under the hood, to have the content pop up relative to the invoker
-- Use `.config` to override the overlay configuration
-- Config has `popperConfig` property that has a one to one relation with Popper.js configuration API.
-- Comes with a default `lion-tooltip-arrow` for an arrow.
-
-## How to use
-
-### Installation
-
-```sh
-npm i --save @lion/tooltip
-```
-
-```js
-import '@lion/tooltip/lion-tooltip.js';
-```
-
-## Examples
-
-### Placements
-
-You can easily change the placement of the content node relative to the invoker.
-
-<Story name="Placements">
-  {html`
-    <style>
-      ${tooltipDemoStyles}
-    </style>
-    <div class="demo-box-placements">
-      <lion-tooltip .config=${{ popperConfig: { placement: 'top' } }} has-arrow>
-        <button slot="invoker">Top</button>
-        <div slot="content" class="demo-tooltip-content">Its top placement</div>
-      </lion-tooltip>
-      <lion-tooltip .config=${{ popperConfig: { placement: 'right' } }} has-arrow>
-        <button slot="invoker">Right</button>
-        <div slot="content" class="demo-tooltip-content">Its right placement</div>
-      </lion-tooltip>
-      <lion-tooltip .config=${{ popperConfig: { placement: 'bottom' } }} has-arrow>
-        <button slot="invoker">Bottom</button>
-        <div slot="content" class="demo-tooltip-content">Its bottom placement</div>
-      </lion-tooltip>
-      <lion-tooltip .config=${{ popperConfig: { placement: 'left' } }} has-arrow>
-        <button slot="invoker">Left</button>
-        <div slot="content" class="demo-tooltip-content">Its left placement</div>
-      </lion-tooltip>
-    </div>
-  `}
-</Story>
-
-```html
-<lion-tooltip .config=${{ popperConfig: { placement: 'top' } }} has-arrow>
-  <button slot="invoker">Top</button>
-  <div slot="content">Its top placement</div>
-</lion-tooltip>
-```
-
-### Override Popper configuration
-
-You can override the Popper configuration, the API is one to one with Popper's API, and includes modifiers.
-
-<Story name="Override Popper config">
-  {html`
-    <style>${tooltipDemoStyles}</style>
-    <lion-tooltip .config=${{
-      popperConfig: object('Popper Configuration', {
-        placement: 'bottom-start',
-        positionFixed: true,
-        modifiers: {
-          keepTogether: {
-            enabled: true,
-          },
-          preventOverflow: {
-            enabled: false,
-            boundariesElement: 'viewport',
-            padding: 16,
-          },
-          flip: {
-            enabled: true,
-            boundariesElement: 'viewport',
-            padding: 4,
-          },
-          offset: {
-            enabled: true,
-            offset: `0, 4px`,
-          },
-        },
-      })}}>
-      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
-      <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
-    </lion-tooltip>
-  `}
-</Story>
-
-```js
-<lion-tooltip .config=${{
-  popperConfig: {
-    placement: 'bottom-start',
-    positionFixed: true,
-    modifiers: {
-      keepTogether: {
-        enabled: true,
-      },
-      preventOverflow: {
-        enabled: false /* disables shifting/sliding behavior on secondary axis */,
-        boundariesElement: 'viewport',
-        padding: 16 /* when enabled, this is the viewport-margin for shifting/sliding */,
-      },
-      flip: {
-        enabled: true,
-        boundariesElement: 'viewport',
-        padding: 4 /* viewport-margin for flipping on primary axis */,
-      },
-      offset: {
-        enabled: true,
-        offset: `0, 4px` /* horizontal and vertical margin (distance between popper and referenceElement) */,
-      },
-    },
-  }
-}}>
-  <button slot="invoker">Hover me</button>
-  <div slot="content">This is a tooltip</div>
-</lion-tooltip>
-```
-
-Modifier explanations:
-
-- keepTogether: prevents detachment of content element from reference element, which could happen if the invoker is not in the viewport anymore. If this is disabled, the content will always be in view.
-- preventOverflow: enables shifting and sliding behavior on the secondary axis (e.g. if top placement, this is horizontal shifting and sliding). The padding property defines the margin with the boundariesElement, which is usually the viewport.
-- flip: enables flipping behavior on the primary axis (e.g. if top placement, flipping to bottom if there is not enough space on the top). The padding property defines the margin with the boundariesElement, which is usually the viewport.
-- offset: enables an offset between the content node and the invoker node. First argument is horizontal marign, second argument is vertical margin.
-
-### Arrow
-
-By default, the arrow is disabled for our tooltip. Via the `has-arrow` property it can be enabled.
-
-> As a Subclasser, you can decide to turn the arrow on by default if this fits in your Design System
-
-<Story name="Arrow">
-  {html`
-    <style>${tooltipDemoStyles}</style>
-    <lion-tooltip has-arrow>
-      <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
-      <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
-    </lion-tooltip>
-  `}
-</Story>
-
-```html
-<lion-tooltip has-arrow>
-  <button slot="invoker">Hover me</button>
-  <div slot="content">This is a tooltip</div>
-</lion-tooltip>
-```
-
-#### Use a custom arrow
-
-If you plan on providing a custom arrow, you can extend the `lion-tooltip`.
-
-All you need to do is override the `_arrowTemplate` method to pass your own SVG, and extend the styles to pass the proper dimensions of your arrow.
-The rest of the work is done by Popper.js (for positioning) and the `lion-tooltip-arrow` (arrow dimensions, rotation, etc.).
-
-<Story name="Custom arrow">
-  {() => {
-    if (!customElements.get('custom-tooltip')) {
-      customElements.define('custom-tooltip', class extends LionTooltip {
-        static get styles() {
-          return [super.styles, css`
-            :host {
-              --tooltip-arrow-width: 20px;
-              --tooltip-arrow-height: 8px;
-            }
-          `];
-        }
-        constructor() {
-          super();
-          this.hasArrow = true;
-        }
-        _arrowTemplate() {
-          return html`
-            <svg viewBox="0 0 20 8">
-              <path d="M 0,0 h 20 L 10,8 z"></path>
-            </svg>
-          `;
-        }
-      });
-    }
-    return html`
-      <style>${tooltipDemoStyles}</style>
-      <custom-tooltip>
-        <button slot="invoker" class="demo-tooltip-invoker">Hover me</button>
-        <div slot="content" class="demo-tooltip-content">This is a tooltip</div>
-      </custom-tooltip>
-    `;
-  }}
-</Story>
-
-```js
-import { html, css } from '@lion/core';
-import { LionTooltipArrow } from '@lion/tooltip';
-
-class CustomTooltip extends LionTooltip {
-  static get styles() {
-    return [super.styles, css`
-      :host {
-        --tooltip-arrow-width: 20px;
-        --tooltip-arrow-height: 8px;
-      }
-    `];
-  }
-  constructor() {
-    super();
-    this.hasArrow = true;
-  }
-  _arrowTemplate() {
-    return html`
-      <svg viewBox="0 0 20 8">
-        <path d="M 0,0 h 20 L 10,8 z"></path>
-      </svg>
-    `;
-  }
-}
-customElements.define('custom-tooltip', CustomTooltip);
-```
-
-```html
-<custom-tooltip>
-  <button slot="invoker">Hover me</button>
-  <div slot="content">This is a tooltip</div>
-</custom-tooltip>
-```
diff --git a/packages/tooltip/stories/tooltipDemoStyles.js b/packages/tooltip/stories/tooltipDemoStyles.js
deleted file mode 100644
index f90dbc5ca..000000000
--- a/packages/tooltip/stories/tooltipDemoStyles.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { css } from '@lion/core';
-
-export const tooltipDemoStyles = css`
-  .demo-tooltip-invoker {
-    margin: 50px;
-  }
-
-  .demo-tooltip-content {
-    display: block;
-    font-size: 16px;
-    color: white;
-    background-color: black;
-    border-radius: 4px;
-    padding: 8px;
-  }
-
-  .demo-box-placements {
-    display: flex;
-    flex-direction: column;
-    margin: 40px 0 0 200px;
-  }
-
-  .demo-box-placements lion-tooltip {
-    margin: 20px;
-  }
-`;
diff --git a/packages/validate/README.md b/packages/validate/README.md
index 38c1d3bf4..199a2f63b 100644
--- a/packages/validate/README.md
+++ b/packages/validate/README.md
@@ -1,5 +1,26 @@
+[//]: # 'AUTO INSERT HEADER PREPUBLISH'
+
 # Validate
 
+```js script
+import { html } from '@lion/core';
+import { LionInput } from '@lion/input';
+import {
+  Required,
+  IsString,
+  MaxLength,
+  DefaultSuccess,
+  Validator,
+  loadDefaultFeedbackMessages,
+} from '@lion/validate';
+
+export default {
+  title: 'Forms/Validation/Overview',
+};
+
+loadDefaultFeedbackMessages();
+```
+
 ## Features
 
 - allow for advanced UX scenarios by updating validation state on every value change
@@ -8,6 +29,11 @@
 - default validators
 - custom validators
 
+Our validation system is designed to:
+
+- allow for advanced UX scenarios by updating validation state on every value change
+- provide a powerful way of writing validations via classes
+
 Validation is applied by default to all [form controls](../field/docs/FormFundaments.md) via the
 ValidateMixin.
 
@@ -26,18 +52,12 @@ import '@lion/input/lion-input.js';
 import { %ValidatorName% } from '@lion/validate';
 ```
 
+### Example
+
 > Note that we import an lion-input here as an example of a form control implementing ValidateMixin.
 > We could equally well use lion-textarea, lion-select, lion-fieldset etc. to illustrate our example.
 
-### Example
-
-All validators are provided as pure functions. They should be applied to the formcontrol (implementing
-`ValidateMixin`) as follows:
-
-```js
-import '@lion/input/lion-input.js';
-import { Required, IsString, MaxLength, DefaultSuccess, Validator } from '@lion/validate';
-
+```js preview-story
 const isInitialsRegex = /^([A-Z]\.)+$/;
 class IsInitialsExample extends Validator {
   static get validatorName() {
@@ -47,24 +67,36 @@ class IsInitialsExample extends Validator {
   execute(value) {
     let hasFeedback = false;
     const isStringValidator = new IsString();
-    if (!isStringValidator.execute(value) || !isInitialsRegex.test(value.toLowerCase())) {
+    if (isStringValidator.execute(value) || !isInitialsRegex.test(value)) {
       hasFeedback = true;
     }
     return hasFeedback;
   }
 
   static getMessage({ fieldName }) {
-    return `Please enter a valid {fieldName} in the format "A.B.C.".`;
+    return `Please enter a valid ${fieldName} in the format "L.I.".`;
   }
 }
-```
 
-```html
-<lion-input
-  label="Initials"
-  name="initials"
-  .validators="${[new Required(), new MaxLength(10), new IsInitialsExample(null, { type: 'warning' }), new DefaultSuccess()]}"
-></lion-input>
+class DemoInput extends LionInput {
+  static get validationTypes() {
+    return ['error', 'warning', 'success'];
+  }
+}
+customElements.define('demo-input', DemoInput);
+
+export const main = () => html`
+  <demo-input
+    label="Initials"
+    name="initials"
+    .validators="${[
+      new Required(),
+      new MaxLength(10),
+      new IsInitialsExample(null, { type: 'warning' }),
+      new DefaultSuccess(),
+    ]}"
+  ></demo-input>
+`;
 ```
 
 In the example above we use different types of validators.
diff --git a/packages/validate/docs/FlowDiagram.md b/packages/validate/docs/assets/FlowDiagram.md
similarity index 100%
rename from packages/validate/docs/FlowDiagram.md
rename to packages/validate/docs/assets/FlowDiagram.md
diff --git a/packages/validate/stories/Overview.stories.mdx b/packages/validate/docs/system.md
similarity index 93%
rename from packages/validate/stories/Overview.stories.mdx
rename to packages/validate/docs/system.md
index 20611df71..063c9e3e8 100644
--- a/packages/validate/stories/Overview.stories.mdx
+++ b/packages/validate/docs/system.md
@@ -1,13 +1,10 @@
-import { Meta } from '@open-wc/demoing-storybook';
+# Validation System
 
-<Meta title="Forms/Validation/Overview" />
-
-# Validation
-
-Our validation system is designed to:
-
-- allow for advanced UX scenarios by updating validation state on every value change
-- provide a powerful way of writing validations via classes
+```js script
+export default {
+  title: 'Forms/Validation/System',
+};
+```
 
 ## When validation happens
 
@@ -110,7 +107,9 @@ function getCustomMessage(data) {
 ```
 
 ```html
-<validatable-el .validators="${[new Required({}, { getMessage: getCustomMessage })]}"></validatable-el>
+<validatable-el
+  .validators="${[new Required({}, { getMessage: getCustomMessage })]}"
+></validatable-el>
 ```
 
 ### Custom Validators
@@ -142,7 +141,9 @@ class AsyncValidator extends Validator {
     return 'AsyncValidator';
   }
 
-  static get async() { return true; }
+  static get async() {
+    return true;
+  }
 
   static getMessage({ modelValue }) {
     return `Validated for modelValue: ${modelValue}`;
diff --git a/yarn.lock b/yarn.lock
index 29b4dafc2..83ac85a4c 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -16,37 +16,16 @@
   dependencies:
     "@babel/highlight" "^7.8.3"
 
-"@babel/compat-data@^7.8.6", "@babel/compat-data@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.9.0.tgz#04815556fc90b0c174abd2c0c1bb966faa036a6c"
-  integrity sha512-zeFQrr+284Ekvd9e7KAX954LkapWiOmQtsfHirhxqfdlX6MEC32iRE+pqUGlYIBchdevaCwvzxWGSy/YBNI85g==
+"@babel/compat-data@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.9.6.tgz#3f604c40e420131affe6f2c8052e9a275ae2049b"
+  integrity sha512-5QPTrNen2bm7RBc7dsOmcA5hbrS4O2Vhmk5XOL4zWW/zD/hV0iinpefDlkm+tBBy8kDtFaaeEvmAqt+nURAV2g==
   dependencies:
-    browserslist "^4.9.1"
+    browserslist "^4.11.1"
     invariant "^2.2.4"
     semver "^5.5.0"
 
-"@babel/core@7.8.4":
-  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/core@^7.1.0", "@babel/core@^7.1.6", "@babel/core@^7.8.4", "@babel/core@^7.9.0":
+"@babel/core@7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.0.tgz#ac977b538b77e132ff706f3b8a4dbad09c03c56e"
   integrity sha512-kWc7L0fw1xwvI0zi8OKVBuxRVefwGOrKSQMvrQ3dW+bIIavBY3/NpXmpjMy7bQnLgwgzWQZ8TlM57YHpHNHz4w==
@@ -68,6 +47,28 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
+"@babel/core@^7.8.4", "@babel/core@^7.9.0":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.9.6.tgz#d9aa1f580abf3b2286ef40b6904d390904c63376"
+  integrity sha512-nD3deLvbsApbHAHttzIssYqgb883yU/d9roe4RZymBCDaZryMJDbptVpEpeQuRh4BJ+SYI8le9YGxKvFEvl1Wg==
+  dependencies:
+    "@babel/code-frame" "^7.8.3"
+    "@babel/generator" "^7.9.6"
+    "@babel/helper-module-transforms" "^7.9.0"
+    "@babel/helpers" "^7.9.6"
+    "@babel/parser" "^7.9.6"
+    "@babel/template" "^7.8.6"
+    "@babel/traverse" "^7.9.6"
+    "@babel/types" "^7.9.6"
+    convert-source-map "^1.7.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.1"
+    json5 "^2.1.2"
+    lodash "^4.17.13"
+    resolve "^1.3.2"
+    semver "^5.4.1"
+    source-map "^0.5.0"
+
 "@babel/generator@7.0.0-beta.44":
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.0.0-beta.44.tgz#c7e67b9b5284afcf69b309b50d7d37f3e5033d42"
@@ -79,12 +80,12 @@
     source-map "^0.5.0"
     trim-right "^1.0.1"
 
-"@babel/generator@^7.4.0", "@babel/generator@^7.8.4", "@babel/generator@^7.9.0", "@babel/generator@^7.9.5":
-  version "7.9.5"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.5.tgz#27f0917741acc41e6eaaced6d68f96c3fa9afaf9"
-  integrity sha512-GbNIxVB3ZJe3tLeDm1HSn2AhuD/mVcyLDpgtLXa5tplmWrJdF/elxB56XNqCuD6szyNkDi6wuoKXln3QeBmCHQ==
+"@babel/generator@^7.4.0", "@babel/generator@^7.9.0", "@babel/generator@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.9.6.tgz#5408c82ac5de98cda0d77d8124e99fa1f2170a43"
+  integrity sha512-+htwWKJbH2bL72HRluF8zumBxzuX0ZZUFl3JLNyoUjM/Ho8wnVpPXM6aUz8cfKDqQ/h7zHqKt4xzJteUosckqQ==
   dependencies:
-    "@babel/types" "^7.9.5"
+    "@babel/types" "^7.9.6"
     jsesc "^2.5.1"
     lodash "^4.17.13"
     source-map "^0.5.0"
@@ -121,29 +122,17 @@
     "@babel/helper-annotate-as-pure" "^7.8.3"
     "@babel/types" "^7.9.0"
 
-"@babel/helper-compilation-targets@^7.8.7":
-  version "7.8.7"
-  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.8.7.tgz#dac1eea159c0e4bd46e309b5a1b04a66b53c1dde"
-  integrity sha512-4mWm8DCK2LugIS+p1yArqvG1Pf162upsIsjE7cNBjez+NjliQpVhj20obE520nao0o14DaTnFJv+Fw5a0JpoUw==
+"@babel/helper-compilation-targets@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.9.6.tgz#1e05b7ccc9d38d2f8b40b458b380a04dcfadd38a"
+  integrity sha512-x2Nvu0igO0ejXzx09B/1fGBxY9NXQlBW2kZsSxCJft+KHN8t9XWzIvFxtPHnBOAXpVsdxZKZFbRUC8TsNKajMw==
   dependencies:
-    "@babel/compat-data" "^7.8.6"
-    browserslist "^4.9.1"
+    "@babel/compat-data" "^7.9.6"
+    browserslist "^4.11.1"
     invariant "^2.2.4"
     levenary "^1.1.1"
     semver "^5.5.0"
 
-"@babel/helper-create-class-features-plugin@^7.8.3":
-  version "7.9.5"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.9.5.tgz#79753d44017806b481017f24b02fd4113c7106ea"
-  integrity sha512-IipaxGaQmW4TfWoXdqjY0TzoXQ1HRS0kPpEgvjosb3u7Uedcq297xFqDQiCcQtRRwzIMif+N1MLVI8C5a4/PAA==
-  dependencies:
-    "@babel/helper-function-name" "^7.9.5"
-    "@babel/helper-member-expression-to-functions" "^7.8.3"
-    "@babel/helper-optimise-call-expression" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/helper-replace-supers" "^7.8.6"
-    "@babel/helper-split-export-declaration" "^7.8.3"
-
 "@babel/helper-create-regexp-features-plugin@^7.8.3", "@babel/helper-create-regexp-features-plugin@^7.8.8":
   version "7.8.8"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.8.8.tgz#5d84180b588f560b7864efaeea89243e58312087"
@@ -267,14 +256,14 @@
     "@babel/types" "^7.8.3"
 
 "@babel/helper-replace-supers@^7.8.3", "@babel/helper-replace-supers@^7.8.6":
-  version "7.8.6"
-  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.8.6.tgz#5ada744fd5ad73203bf1d67459a27dcba67effc8"
-  integrity sha512-PeMArdA4Sv/Wf4zXwBKPqVj7n9UF/xg6slNRtZW84FM7JpE1CbG8B612FyM4cxrf4fMAMGO0kR7voy1ForHHFA==
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.9.6.tgz#03149d7e6a5586ab6764996cd31d6981a17e1444"
+  integrity sha512-qX+chbxkbArLyCImk3bWV+jB5gTNU/rsze+JlcF6Nf8tVTigPJSI1o1oBow/9Resa1yehUO9lIipsmu9oG4RzA==
   dependencies:
     "@babel/helper-member-expression-to-functions" "^7.8.3"
     "@babel/helper-optimise-call-expression" "^7.8.3"
-    "@babel/traverse" "^7.8.6"
-    "@babel/types" "^7.8.6"
+    "@babel/traverse" "^7.9.6"
+    "@babel/types" "^7.9.6"
 
 "@babel/helper-simple-access@^7.8.3":
   version "7.8.3"
@@ -313,14 +302,14 @@
     "@babel/traverse" "^7.8.3"
     "@babel/types" "^7.8.3"
 
-"@babel/helpers@^7.8.4", "@babel/helpers@^7.9.0", "@babel/helpers@^7.9.2":
-  version "7.9.2"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.2.tgz#b42a81a811f1e7313b88cba8adc66b3d9ae6c09f"
-  integrity sha512-JwLvzlXVPjO8eU9c/wF9/zOIN7X6h8DYf7mG4CiFRZRvZNKEF5dQ3H3V+ASkHoIB3mWhatgl5ONhyqHRI6MppA==
+"@babel/helpers@^7.9.0", "@babel/helpers@^7.9.2", "@babel/helpers@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.9.6.tgz#092c774743471d0bb6c7de3ad465ab3d3486d580"
+  integrity sha512-tI4bUbldloLcHWoRUMAj4g1bF313M/o6fBKhIsb3QnGVPwRm9JsNf/gqMkQ7zjqReABiffPV6RWj7hEglID5Iw==
   dependencies:
     "@babel/template" "^7.8.3"
-    "@babel/traverse" "^7.9.0"
-    "@babel/types" "^7.9.0"
+    "@babel/traverse" "^7.9.6"
+    "@babel/types" "^7.9.6"
 
 "@babel/highlight@7.0.0-beta.44":
   version "7.0.0-beta.44"
@@ -340,10 +329,10 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.6", "@babel/parser@^7.4.2", "@babel/parser@^7.4.3", "@babel/parser@^7.6.0", "@babel/parser@^7.7.0", "@babel/parser@^7.8.4", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0", "@babel/parser@^7.9.2":
-  version "7.9.4"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.4.tgz#68a35e6b0319bbc014465be43828300113f2f2e8"
-  integrity sha512-bC49otXX6N0/VYhgOMh4gnP26E9xnDZK3TmbNpxYzzz9BQLBosQwfyOe9/cXUU3txYhTzLCbcqd5c8y/OmCjHA==
+"@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.7.0", "@babel/parser@^7.8.6", "@babel/parser@^7.9.0", "@babel/parser@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.9.6.tgz#3b1bbb30dabe600cd72db58720998376ff653bc7"
+  integrity sha512-AoeIEJn8vt+d/6+PXDRPaksYhnlbMIiejioBZvvMQsOjW/JYK6k/0dKnvvP3EhK5GfMBWDPtrxRtegWdAcdq9Q==
 
 "@babel/plugin-proposal-async-generator-functions@^7.8.3":
   version "7.8.3"
@@ -354,14 +343,6 @@
     "@babel/helper-remap-async-to-generator" "^7.8.3"
     "@babel/plugin-syntax-async-generators" "^7.8.0"
 
-"@babel/plugin-proposal-class-properties@^7.1.0":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.8.3.tgz#5e06654af5cd04b608915aada9b2a6788004464e"
-  integrity sha512-EqFhbo7IosdgPgZggHaNObkmO1kNUe3slaKu54d5OWvy+p9QIKOzK1GAEpAIsZtWVtPXUHSMcT4smvDrCfY4AA==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-proposal-dynamic-import@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.8.3.tgz#38c4fe555744826e97e2ae930b0fb4cc07e66054"
@@ -394,15 +375,7 @@
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-syntax-numeric-separator" "^7.8.3"
 
-"@babel/plugin-proposal-object-rest-spread@7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.8.3.tgz#eb5ae366118ddca67bed583b53d7554cad9951bb"
-  integrity sha512-8qvuPwU/xxUCt78HocNlv0mXXo0wdh9VT1R04WU8HGOfaOob26pF+9P5/lYjN/q7DHOX1bvX60hnhOvuQUJdbA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
-
-"@babel/plugin-proposal-object-rest-spread@^7.0.0", "@babel/plugin-proposal-object-rest-spread@^7.9.5":
+"@babel/plugin-proposal-object-rest-spread@7.9.5":
   version "7.9.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.5.tgz#3fd65911306d8746014ec0d0cf78f0e39a149116"
   integrity sha512-VP2oXvAf7KCYTthbUHwBlewbl1Iq059f6seJGsxMizaCdgHIeczOr7FBqELhSqfkIl04Fi8okzWzl63UKbQmmg==
@@ -411,6 +384,15 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
     "@babel/plugin-transform-parameters" "^7.9.5"
 
+"@babel/plugin-proposal-object-rest-spread@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.9.6.tgz#7a093586fcb18b08266eb1a7177da671ac575b63"
+  integrity sha512-Ga6/fhGqA9Hj+y6whNpPv8psyaK5xzrQwSPsGPloVkvmH+PqW1ixdnfJ9uIO06OjQNYol3PMnfmJ8vfZtkzF+A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.8.3"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.0"
+    "@babel/plugin-transform-parameters" "^7.9.5"
+
 "@babel/plugin-proposal-optional-catch-binding@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-optional-catch-binding/-/plugin-proposal-optional-catch-binding-7.8.3.tgz#9dee96ab1650eed88646ae9734ca167ac4a9c5c9"
@@ -456,13 +438,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-flow@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.8.3.tgz#f2c883bd61a6316f2c89380ae5122f923ba4527f"
-  integrity sha512-innAx3bUbA0KSYj2E2MNFSn9hiCeowOFLxlsuhXzw8hMQnzkDomUr9QCD7E9VF60NmnG1sNTuuv6Qf4f8INYsg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-syntax-import-meta@^7.2.0", "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.8.3.tgz#230afff79d3ccc215b5944b438e4e266daf3d84d"
@@ -526,13 +501,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-syntax-typescript@^7.8.3":
-  version "7.8.3"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.8.3.tgz#c1f659dda97711a569cef75275f7e15dcaa6cabc"
-  integrity sha512-GO1MQ/SGGGoiEXY0e0bSpHimJvxqB7lktLLIq2pv8xG7WZ8IMEle74jIe1FhprHBWjwjZtXHkycDLZXIWM5Wfg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-
 "@babel/plugin-transform-arrow-functions@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.8.3.tgz#82776c2ed0cd9e1a49956daeb896024c9473b8b6"
@@ -615,14 +583,6 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-flow-strip-types@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.9.0.tgz#8a3538aa40434e000b8f44a3c5c9ac7229bd2392"
-  integrity sha512-7Qfg0lKQhEHs93FChxVLAvhBshOPQDtJUTVHr/ZwQNRccCm4O9D79r9tVSoV8iNwjP1YgfD+e/fgHcPkN1qEQg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-flow" "^7.8.3"
-
 "@babel/plugin-transform-for-of@^7.9.0":
   version "7.9.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.9.0.tgz#0f260e27d3e29cd1bb3128da5e76c761aa6c108e"
@@ -652,34 +612,34 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-modules-amd@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.9.0.tgz#19755ee721912cf5bb04c07d50280af3484efef4"
-  integrity sha512-vZgDDF003B14O8zJy0XXLnPH4sg+9X5hFBBGN1V+B2rgrB+J2xIypSN6Rk9imB2hSTHQi5OHLrFWsZab1GMk+Q==
+"@babel/plugin-transform-modules-amd@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.9.6.tgz#8539ec42c153d12ea3836e0e3ac30d5aae7b258e"
+  integrity sha512-zoT0kgC3EixAyIAU+9vfaUVKTv9IxBDSabgHoUCBP6FqEJ+iNiN7ip7NBKcYqbfUDfuC2mFCbM7vbu4qJgOnDw==
   dependencies:
     "@babel/helper-module-transforms" "^7.9.0"
     "@babel/helper-plugin-utils" "^7.8.3"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-commonjs@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.9.0.tgz#e3e72f4cbc9b4a260e30be0ea59bdf5a39748940"
-  integrity sha512-qzlCrLnKqio4SlgJ6FMMLBe4bySNis8DFn1VkGmOcxG9gqEyPIOzeQrA//u0HAKrWpJlpZbZMPB1n/OPa4+n8g==
+"@babel/plugin-transform-modules-commonjs@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.9.6.tgz#64b7474a4279ee588cacd1906695ca721687c277"
+  integrity sha512-7H25fSlLcn+iYimmsNe3uK1at79IE6SKW9q0/QeEHTMC9MdOZ+4bA+T1VFB5fgOqBWoqlifXRzYD0JPdmIrgSQ==
   dependencies:
     "@babel/helper-module-transforms" "^7.9.0"
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/helper-simple-access" "^7.8.3"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    babel-plugin-dynamic-import-node "^2.3.3"
 
-"@babel/plugin-transform-modules-systemjs@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.0.tgz#e9fd46a296fc91e009b64e07ddaa86d6f0edeb90"
-  integrity sha512-FsiAv/nao/ud2ZWy4wFacoLOm5uxl0ExSQ7ErvP7jpoihLR6Cq90ilOFyX9UXct3rbtKsAiZ9kFt5XGfPe/5SQ==
+"@babel/plugin-transform-modules-systemjs@^7.9.0", "@babel/plugin-transform-modules-systemjs@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.9.6.tgz#207f1461c78a231d5337a92140e52422510d81a4"
+  integrity sha512-NW5XQuW3N2tTHim8e1b7qGy7s0kZ2OH3m5octc49K1SdAKGxYxeIx7hiIz05kS1R2R+hOWcsr1eYwcGhrdHsrg==
   dependencies:
     "@babel/helper-hoist-variables" "^7.8.3"
     "@babel/helper-module-transforms" "^7.9.0"
     "@babel/helper-plugin-utils" "^7.8.3"
-    babel-plugin-dynamic-import-node "^2.3.0"
+    babel-plugin-dynamic-import-node "^2.3.3"
 
 "@babel/plugin-transform-modules-umd@^7.9.0":
   version "7.9.0"
@@ -726,7 +686,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-react-jsx@^7.3.0", "@babel/plugin-transform-react-jsx@^7.9.1":
+"@babel/plugin-transform-react-jsx@^7.9.1":
   version "7.9.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.9.4.tgz#86f576c8540bd06d0e95e0b61ea76d55f6cbd03f"
   integrity sha512-Mjqf3pZBNLt854CK0C/kRuXAnE6H/bo7xYojP+WGtX8glDGSibcwnsWwhwoSuRg0+EBnxPC1ouVnuetUIlPSAw==
@@ -751,9 +711,9 @@
     "@babel/helper-plugin-utils" "^7.8.3"
 
 "@babel/plugin-transform-runtime@^7.9.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.9.0.tgz#45468c0ae74cc13204e1d3b1f4ce6ee83258af0b"
-  integrity sha512-pUu9VSf3kI1OqbWINQ7MaugnitRss1z533436waNXp+0N3ur3zfut37sXiQMxkuCF4VUjwZucen/quskCh7NHw==
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.9.6.tgz#3ba804438ad0d880a17bca5eaa0cdf1edeedb2fd"
+  integrity sha512-qcmiECD0mYOjOIt8YHNsAP1SxPooC/rDmfmiSK9BNY72EitdSc7l44WTEklaWuFtbOEBjNhWWyph/kOImbNJ4w==
   dependencies:
     "@babel/helper-module-imports" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
@@ -797,15 +757,6 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/plugin-transform-typescript@^7.9.0":
-  version "7.9.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.9.4.tgz#4bb4dde4f10bbf2d787fce9707fb09b483e33359"
-  integrity sha512-yeWeUkKx2auDbSxRe8MusAG+n4m9BFY/v+lPjmQDgOFX5qnySkUY5oXzkp6FwPdsYqnKay6lorXYdC0n3bZO7w==
-  dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.8.3"
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-syntax-typescript" "^7.8.3"
-
 "@babel/plugin-transform-unicode-regex@^7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.8.3.tgz#0cef36e3ba73e5c57273effb182f46b91a1ecaad"
@@ -814,13 +765,13 @@
     "@babel/helper-create-regexp-features-plugin" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
 
-"@babel/preset-env@^7.1.6", "@babel/preset-env@^7.8.4", "@babel/preset-env@^7.9.0":
-  version "7.9.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.5.tgz#8ddc76039bc45b774b19e2fc548f6807d8a8919f"
-  integrity sha512-eWGYeADTlPJH+wq1F0wNfPbVS1w1wtmMJiYk55Td5Yu28AsdR9AsC97sZ0Qq8fHqQuslVSIYSGJMcblr345GfQ==
+"@babel/preset-env@^7.8.4", "@babel/preset-env@^7.9.0":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.9.6.tgz#df063b276c6455ec6fcfc6e53aacc38da9b0aea6"
+  integrity sha512-0gQJ9RTzO0heXOhzftog+a/WyOuqMrAIugVYxMYf83gh1CQaQDjMtsOpqOwXyDL/5JcWsrCm8l4ju8QC97O7EQ==
   dependencies:
-    "@babel/compat-data" "^7.9.0"
-    "@babel/helper-compilation-targets" "^7.8.7"
+    "@babel/compat-data" "^7.9.6"
+    "@babel/helper-compilation-targets" "^7.9.6"
     "@babel/helper-module-imports" "^7.8.3"
     "@babel/helper-plugin-utils" "^7.8.3"
     "@babel/plugin-proposal-async-generator-functions" "^7.8.3"
@@ -828,7 +779,7 @@
     "@babel/plugin-proposal-json-strings" "^7.8.3"
     "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
     "@babel/plugin-proposal-numeric-separator" "^7.8.3"
-    "@babel/plugin-proposal-object-rest-spread" "^7.9.5"
+    "@babel/plugin-proposal-object-rest-spread" "^7.9.6"
     "@babel/plugin-proposal-optional-catch-binding" "^7.8.3"
     "@babel/plugin-proposal-optional-chaining" "^7.9.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.8.3"
@@ -855,9 +806,9 @@
     "@babel/plugin-transform-function-name" "^7.8.3"
     "@babel/plugin-transform-literals" "^7.8.3"
     "@babel/plugin-transform-member-expression-literals" "^7.8.3"
-    "@babel/plugin-transform-modules-amd" "^7.9.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.9.0"
-    "@babel/plugin-transform-modules-systemjs" "^7.9.0"
+    "@babel/plugin-transform-modules-amd" "^7.9.6"
+    "@babel/plugin-transform-modules-commonjs" "^7.9.6"
+    "@babel/plugin-transform-modules-systemjs" "^7.9.6"
     "@babel/plugin-transform-modules-umd" "^7.9.0"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.8.3"
     "@babel/plugin-transform-new-target" "^7.8.3"
@@ -873,21 +824,13 @@
     "@babel/plugin-transform-typeof-symbol" "^7.8.4"
     "@babel/plugin-transform-unicode-regex" "^7.8.3"
     "@babel/preset-modules" "^0.1.3"
-    "@babel/types" "^7.9.5"
-    browserslist "^4.9.1"
+    "@babel/types" "^7.9.6"
+    browserslist "^4.11.1"
     core-js-compat "^3.6.2"
     invariant "^2.2.2"
     levenary "^1.1.1"
     semver "^5.5.0"
 
-"@babel/preset-flow@^7.0.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.9.0.tgz#fee847c3e090b0b2d9227c1949e4da1d1379280d"
-  integrity sha512-88uSmlshIrlmPkNkEcx3UpSZ6b8n0UGBq0/0ZMZCF/uxAW0XIAUuDHBhIOAh0pvweafH4RxOwi/H3rWhtqOYPA==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-transform-flow-strip-types" "^7.9.0"
-
 "@babel/preset-modules@^0.1.3":
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/@babel/preset-modules/-/preset-modules-0.1.3.tgz#13242b53b5ef8c883c3cf7dddd55b36ce80fbc72"
@@ -899,29 +842,10 @@
     "@babel/types" "^7.4.4"
     esutils "^2.0.2"
 
-"@babel/preset-typescript@^7.1.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.9.0.tgz#87705a72b1f0d59df21c179f7c3d2ef4b16ce192"
-  integrity sha512-S4cueFnGrIbvYJgwsVFKdvOmpiL0XGw9MFW9D0vgRys5g36PBhZRL8NX8Gr2akz8XRtzq6HuDXPD/1nniagNUg==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.8.3"
-    "@babel/plugin-transform-typescript" "^7.9.0"
-
-"@babel/register@^7.0.0":
-  version "7.9.0"
-  resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.9.0.tgz#02464ede57548bddbb5e9f705d263b7c3f43d48b"
-  integrity sha512-Tv8Zyi2J2VRR8g7pC5gTeIN8Ihultbmk0ocyNz8H2nEZbmhp1N6q0A1UGsQbDvGP/sNinQKUHf3SqXwqjtFv4Q==
-  dependencies:
-    find-cache-dir "^2.0.0"
-    lodash "^4.17.13"
-    make-dir "^2.1.0"
-    pirates "^4.0.0"
-    source-map-support "^0.5.16"
-
-"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
-  version "7.9.2"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.2.tgz#d90df0583a3a252f09aaa619665367bae518db06"
-  integrity sha512-NE2DtOdufG7R5vnfQUTehdTfNycfUANEtCa9PssN9O/xmTzP4E08UI797ixaei6hBEVL9BI/PsdJS5x7mWoB9Q==
+"@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.2.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.9.6.tgz#a9102eb5cadedf3f31d08a9ecf294af7827ea29f"
+  integrity sha512-64AF1xY3OAkFHqOb9s4jpgk1Mm5vDZ4L3acHvAml+53nO1XbXLuDodsVpO4OIUsmemlUHMxNdYMNJmsvOwLrvQ==
   dependencies:
     regenerator-runtime "^0.13.4"
 
@@ -960,17 +884,17 @@
     invariant "^2.2.0"
     lodash "^4.2.0"
 
-"@babel/traverse@^7.4.3", "@babel/traverse@^7.7.0", "@babel/traverse@^7.8.3", "@babel/traverse@^7.8.4", "@babel/traverse@^7.8.6", "@babel/traverse@^7.9.0":
-  version "7.9.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.5.tgz#6e7c56b44e2ac7011a948c21e283ddd9d9db97a2"
-  integrity sha512-c4gH3jsvSuGUezlP6rzSJ6jf8fYjLj3hsMZRx/nX0h+fmHN0w+ekubRrHPqnMec0meycA2nwCsJ7dC8IPem2FQ==
+"@babel/traverse@^7.4.3", "@babel/traverse@^7.7.0", "@babel/traverse@^7.8.3", "@babel/traverse@^7.9.0", "@babel/traverse@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.9.6.tgz#5540d7577697bf619cc57b92aa0f1c231a94f442"
+  integrity sha512-b3rAHSjbxy6VEAvlxM8OV/0X4XrG72zoxme6q1MOoe2vd0bEc+TwayhuC1+Dfgqh1QEG+pj7atQqvUprHIccsg==
   dependencies:
     "@babel/code-frame" "^7.8.3"
-    "@babel/generator" "^7.9.5"
+    "@babel/generator" "^7.9.6"
     "@babel/helper-function-name" "^7.9.5"
     "@babel/helper-split-export-declaration" "^7.8.3"
-    "@babel/parser" "^7.9.0"
-    "@babel/types" "^7.9.5"
+    "@babel/parser" "^7.9.6"
+    "@babel/types" "^7.9.6"
     debug "^4.1.0"
     globals "^11.1.0"
     lodash "^4.17.13"
@@ -984,20 +908,15 @@
     lodash "^4.2.0"
     to-fast-properties "^2.0.0"
 
-"@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.6.0", "@babel/types@^7.7.0", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5":
-  version "7.9.5"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.5.tgz#89231f82915a8a566a703b3b20133f73da6b9444"
-  integrity sha512-XjnvNqenk818r5zMaba+sLQjnbda31UfUURv3ei0qPQw4u+j2jMyJ5b11y8ZHYTRSI3NnInQkkkRT4fLqqPdHg==
+"@babel/types@^7.0.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.7.0", "@babel/types@^7.8.3", "@babel/types@^7.8.6", "@babel/types@^7.9.0", "@babel/types@^7.9.5", "@babel/types@^7.9.6":
+  version "7.9.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.9.6.tgz#2c5502b427251e9de1bd2dff95add646d95cc9f7"
+  integrity sha512-qxXzvBO//jO9ZnoasKF1uJzHd2+M6Q2ZPIVfnFps8JJvXy0ZBbwbNOmE6SGIY5XOY6d1Bo5lb9d9RJ8nv3WSeA==
   dependencies:
     "@babel/helper-validator-identifier" "^7.9.5"
     lodash "^4.17.13"
     to-fast-properties "^2.0.0"
 
-"@base2/pretty-print-object@1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.0.tgz#860ce718b0b73f4009e153541faff2cb6b85d047"
-  integrity sha512-4Th98KlMHr5+JkxfcoDT//6vY8vM+iSPrLNpHhRyLx2CFYi8e2RfqPLdpbnpo0Q5lQC5hNB79yes07zb02fvCw==
-
 "@bundled-es-modules/axios@0.18.1":
   version "0.18.1"
   resolved "https://registry.yarnpkg.com/@bundled-es-modules/axios/-/axios-0.18.1.tgz#8beedbc92e9b0ed7df7c6cbdc6dfce84d306d80b"
@@ -1013,14 +932,6 @@
   resolved "https://registry.yarnpkg.com/@bundled-es-modules/message-format/-/message-format-6.0.4.tgz#232da6877adb960f6c8f598c72588a84352de147"
   integrity sha512-NGUoPxqsBzDwvRhY3A3L/AhS1hzS9OWappfyDOyCwE7G3W4ua28gau7QwvJz7QzA6ArbAdeb8c1mLjvd1WUFAA==
 
-"@cnakazawa/watch@^1.0.3":
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a"
-  integrity sha512-v9kIhKwjeZThiWrLmj0y17CWoyddASLj9O2yvbZkbvw/N3rWOYy9zkV66ursAoVr0mV15bL8g0c4QZUE6cdDoQ==
-  dependencies:
-    exec-sh "^0.3.2"
-    minimist "^1.2.0"
-
 "@commitlint/cli@^7.0.0":
   version "7.6.1"
   resolved "https://registry.yarnpkg.com/@commitlint/cli/-/cli-7.6.1.tgz#a93cf995082831999937f6d5ec1a582c8fc0393a"
@@ -1152,11 +1063,6 @@
   dependencies:
     find-up "^2.1.0"
 
-"@egoist/vue-to-react@^1.1.0":
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/@egoist/vue-to-react/-/vue-to-react-1.1.0.tgz#83c884b8608e8ee62e76c03e91ce9c26063a91ad"
-  integrity sha512-MwfwXHDh6ptZGLEtNLPXp2Wghteav7mzpT2Mcwl3NZWKF814i5hhHnNkVrcQQEuxUroSWQqzxLkMKSb+nhPang==
-
 "@emotion/cache@^10.0.27":
   version "10.0.29"
   resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.29.tgz#87e7e64f412c060102d589fe7c6dc042e6f9d1e0"
@@ -1167,7 +1073,7 @@
     "@emotion/utils" "0.11.3"
     "@emotion/weak-memoize" "0.2.5"
 
-"@emotion/core@^10.0.20", "@emotion/core@^10.0.7":
+"@emotion/core@^10.0.7":
   version "10.0.28"
   resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.28.tgz#bb65af7262a234593a9e952c041d0f1c9b9bef3d"
   integrity sha512-pH8UueKYO5jgg0Iq+AmCLxBsvuGtvlmiDCOuv8fGNYn3cowFpLN98L8zO56U0H1PjDIyAlXymgL3Wu7u7v6hbA==
@@ -1231,7 +1137,7 @@
     "@emotion/serialize" "^0.11.15"
     "@emotion/utils" "0.11.3"
 
-"@emotion/styled@^10.0.17", "@emotion/styled@^10.0.7":
+"@emotion/styled@^10.0.7":
   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==
@@ -1365,81 +1271,14 @@
   dependencies:
     "@hapi/hoek" "^8.3.0"
 
-"@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==
-  dependencies:
-    "@jest/source-map" "^24.9.0"
-    chalk "^2.0.1"
-    slash "^2.0.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"
-  integrity sha512-eWQcNa2YSwzXWIMC5KufBh3oWRIijrQFROsIqt6v/NS9Io/gknw1jsAC9c+ih/RQX4A3O7SeWAhQeN0goKhT9A==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    jest-message-util "^24.9.0"
-    jest-mock "^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==
-  dependencies:
-    callsites "^3.0.0"
-    graceful-fs "^4.1.15"
-    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"
-  integrity sha512-XEFrHbBonBJ8dGp2JmF8kP/nQI/ImPpygKHwQ/SY+es59Z3L5PI4Qb9TQQMAEeYsThG1xF0k6tmG0tIKATNiiA==
-  dependencies:
-    "@jest/console" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/istanbul-lib-coverage" "^2.0.0"
-
-"@jest/transform@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-24.9.0.tgz#4ae2768b296553fadab09e9ec119543c90b16c56"
-  integrity sha512-TcQUmyNRxV94S0QpMOnZl0++6RMiqpbH/ZMccFB/amku6Uwvyb1cjYX7xkp5nGNkbX4QPH/FcB6q1HBTHynLmQ==
-  dependencies:
-    "@babel/core" "^7.1.0"
-    "@jest/types" "^24.9.0"
-    babel-plugin-istanbul "^5.1.0"
-    chalk "^2.0.1"
-    convert-source-map "^1.4.0"
-    fast-json-stable-stringify "^2.0.0"
-    graceful-fs "^4.1.15"
-    jest-haste-map "^24.9.0"
-    jest-regex-util "^24.9.0"
-    jest-util "^24.9.0"
-    micromatch "^3.1.10"
-    pirates "^4.0.1"
-    realpath-native "^1.1.0"
-    slash "^2.0.0"
-    source-map "^0.6.1"
-    write-file-atomic "2.4.1"
-
-"@jest/types@^24.9.0":
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/@jest/types/-/types-24.9.0.tgz#63cb26cb7500d069e5a389441a7c6ab5e909fc59"
-  integrity sha512-XKK7ze1apu5JWQ5eZjHITP66AX+QsLlbaJRBGYr8pNzwcAE2JVkwnf0yqjHTsDRcjR0mujy/NmZMXw5kl+kGBw==
-  dependencies:
-    "@types/istanbul-lib-coverage" "^2.0.0"
-    "@types/istanbul-reports" "^1.1.1"
-    "@types/yargs" "^13.0.0"
-
 "@lerna/add@^3.4.1":
-  version "3.20.0"
-  resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.20.0.tgz#bea7edf36fc93fb72ec34cb9ba854c48d4abf309"
-  integrity sha512-AnH1oRIEEg/VDa3SjYq4x1/UglEAvrZuV0WssHUMN81RTZgQk3we+Mv3qZNddrZ/fBcZu2IAdN/EQ3+ie2JxKQ==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/add/-/add-3.21.0.tgz#27007bde71cc7b0a2969ab3c2f0ae41578b4577b"
+  integrity sha512-vhUXXF6SpufBE1EkNEXwz1VLW03f177G9uMOFMQkp6OJ30/PWg4Ekifuz9/3YfgB2/GH8Tu4Lk3O51P2Hskg/A==
   dependencies:
     "@evocateur/pacote" "^9.6.3"
-    "@lerna/bootstrap" "3.20.0"
-    "@lerna/command" "3.18.5"
+    "@lerna/bootstrap" "3.21.0"
+    "@lerna/command" "3.21.0"
     "@lerna/filter-options" "3.20.0"
     "@lerna/npm-conf" "3.16.0"
     "@lerna/validation-error" "3.13.0"
@@ -1448,12 +1287,12 @@
     p-map "^2.1.0"
     semver "^6.2.0"
 
-"@lerna/bootstrap@3.20.0", "@lerna/bootstrap@^3.4.1":
-  version "3.20.0"
-  resolved "https://registry.yarnpkg.com/@lerna/bootstrap/-/bootstrap-3.20.0.tgz#635d71046830f208e851ab429a63da1747589e37"
-  integrity sha512-Wylullx3uthKE7r4izo09qeRGL20Y5yONlQEjPCfnbxCC2Elu+QcPu4RC6kqKQ7b+g7pdC3OOgcHZjngrwr5XQ==
+"@lerna/bootstrap@3.21.0", "@lerna/bootstrap@^3.4.1":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/bootstrap/-/bootstrap-3.21.0.tgz#bcd1b651be5b0970b20d8fae04c864548123aed6"
+  integrity sha512-mtNHlXpmvJn6JTu0KcuTTPl2jLsDNud0QacV/h++qsaKbhAaJr/FElNZ5s7MwZFUM3XaDmvWzHKaszeBMHIbBw==
   dependencies:
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/filter-options" "3.20.0"
     "@lerna/has-npm-version" "3.16.5"
     "@lerna/npm-install" "3.16.5"
@@ -1478,12 +1317,12 @@
     semver "^6.2.0"
 
 "@lerna/changed@^3.4.1":
-  version "3.20.0"
-  resolved "https://registry.yarnpkg.com/@lerna/changed/-/changed-3.20.0.tgz#66b97ebd6c8f8d207152ee524a0791846a9097ae"
-  integrity sha512-+hzMFSldbRPulZ0vbKk6RD9f36gaH3Osjx34wrrZ62VB4pKmjyuS/rxVYkCA3viPLHoiIw2F8zHM5BdYoDSbjw==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/changed/-/changed-3.21.0.tgz#108e15f679bfe077af500f58248c634f1044ea0b"
+  integrity sha512-hzqoyf8MSHVjZp0gfJ7G8jaz+++mgXYiNs9iViQGA8JlN/dnWLI5sWDptEH3/B30Izo+fdVz0S0s7ydVE3pWIw==
   dependencies:
     "@lerna/collect-updates" "3.20.0"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/listable" "3.18.5"
     "@lerna/output" "3.13.0"
 
@@ -1506,11 +1345,11 @@
     strong-log-transformer "^2.0.0"
 
 "@lerna/clean@^3.3.2":
-  version "3.20.0"
-  resolved "https://registry.yarnpkg.com/@lerna/clean/-/clean-3.20.0.tgz#ba777e373ddeae63e57860df75d47a9e5264c5b2"
-  integrity sha512-9ZdYrrjQvR5wNXmHfDsfjWjp0foOkCwKe3hrckTzkAeQA1ibyz5llGwz5e1AeFrV12e2/OLajVqYfe+qdkZUgg==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/clean/-/clean-3.21.0.tgz#c0b46b5300cc3dae2cda3bec14b803082da3856d"
+  integrity sha512-b/L9l+MDgE/7oGbrav6rG8RTQvRiZLO1zTcG17zgJAAuhlsPxJExMlh2DFwJEVi2les70vMhHfST3Ue1IMMjpg==
   dependencies:
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/filter-options" "3.20.0"
     "@lerna/prompt" "3.18.5"
     "@lerna/pulse-till-done" "3.13.0"
@@ -1550,14 +1389,14 @@
     npmlog "^4.1.2"
     slash "^2.0.0"
 
-"@lerna/command@3.18.5":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/command/-/command-3.18.5.tgz#14c6d2454adbfd365f8027201523e6c289cd3cd9"
-  integrity sha512-36EnqR59yaTU4HrR1C9XDFti2jRx0BgpIUBeWn129LZZB8kAB3ov1/dJNa1KcNRKp91DncoKHLY99FZ6zTNpMQ==
+"@lerna/command@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/command/-/command-3.21.0.tgz#9a2383759dc7b700dacfa8a22b2f3a6e190121f7"
+  integrity sha512-T2bu6R8R3KkH5YoCKdutKv123iUgUbW8efVjdGCDnCMthAQzoentOJfDeodBwn0P2OqCl3ohsiNVtSn9h78fyQ==
   dependencies:
     "@lerna/child-process" "3.16.5"
     "@lerna/package-graph" "3.18.5"
-    "@lerna/project" "3.18.0"
+    "@lerna/project" "3.21.0"
     "@lerna/validation-error" "3.13.0"
     "@lerna/write-log-file" "3.13.0"
     clone-deep "^4.0.1"
@@ -1593,13 +1432,13 @@
     npmlog "^4.1.2"
 
 "@lerna/create@^3.4.1":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/create/-/create-3.18.5.tgz#11ac539f069248eaf7bc4c42e237784330f4fc47"
-  integrity sha512-cHpjocbpKmLopCuZFI7cKEM3E/QY8y+yC7VtZ4FQRSaLU8D8i2xXtXmYaP1GOlVNavji0iwoXjuNpnRMInIr2g==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/create/-/create-3.21.0.tgz#e813832adf3488728b139e5a75c8b01b1372e62f"
+  integrity sha512-cRIopzKzE2vXJPmsiwCDMWo4Ct+KTmX3nvvkQLDoQNrrRK7w+3KQT3iiorbj1koD95RsVQA7mS2haWok9SIv0g==
   dependencies:
     "@evocateur/pacote" "^9.6.3"
     "@lerna/child-process" "3.16.5"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/npm-conf" "3.16.0"
     "@lerna/validation-error" "3.13.0"
     camelcase "^5.0.0"
@@ -1625,22 +1464,22 @@
     npmlog "^4.1.2"
 
 "@lerna/diff@^3.3.0":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/diff/-/diff-3.18.5.tgz#e9e2cb882f84d5b84f0487c612137305f07accbc"
-  integrity sha512-u90lGs+B8DRA9Z/2xX4YaS3h9X6GbypmGV6ITzx9+1Ga12UWGTVlKaCXBgONMBjzJDzAQOK8qPTwLA57SeBLgA==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/diff/-/diff-3.21.0.tgz#e6df0d8b9916167ff5a49fcb02ac06424280a68d"
+  integrity sha512-5viTR33QV3S7O+bjruo1SaR40m7F2aUHJaDAC7fL9Ca6xji+aw1KFkpCtVlISS0G8vikUREGMJh+c/VMSc8Usw==
   dependencies:
     "@lerna/child-process" "3.16.5"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/validation-error" "3.13.0"
     npmlog "^4.1.2"
 
 "@lerna/exec@^3.3.2":
-  version "3.20.0"
-  resolved "https://registry.yarnpkg.com/@lerna/exec/-/exec-3.20.0.tgz#29f0c01aee2340eb46f90706731fef2062a49639"
-  integrity sha512-pS1mmC7kzV668rHLWuv31ClngqeXjeHC8kJuM+W2D6IpUVMGQHLcCTYLudFgQsuKGVpl0DGNYG+sjLhAPiiu6A==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/exec/-/exec-3.21.0.tgz#17f07533893cb918a17b41bcc566dc437016db26"
+  integrity sha512-iLvDBrIE6rpdd4GIKTY9mkXyhwsJ2RvQdB9ZU+/NhR3okXfqKc6py/24tV111jqpXTtZUW6HNydT4dMao2hi1Q==
   dependencies:
     "@lerna/child-process" "3.16.5"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/filter-options" "3.20.0"
     "@lerna/profiler" "3.20.0"
     "@lerna/run-topologically" "3.18.5"
@@ -1717,12 +1556,12 @@
     semver "^6.2.0"
 
 "@lerna/import@^3.3.1":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/import/-/import-3.18.5.tgz#a9c7d8601870729851293c10abd18b3707f7ba5e"
-  integrity sha512-PH0WVLEgp+ORyNKbGGwUcrueW89K3Iuk/DDCz8mFyG2IG09l/jOF0vzckEyGyz6PO5CMcz4TI1al/qnp3FrahQ==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/import/-/import-3.21.0.tgz#87b08f2a2bfeeff7357c6fd8490e638d3cd5b32d"
+  integrity sha512-aISkL4XD0Dqf5asDaOZWu65jgj8fWUhuQseZWuQe3UfHxav69fTS2YLIngUfencaOSZVOcVCom28YCzp61YDxw==
   dependencies:
     "@lerna/child-process" "3.16.5"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/prompt" "3.18.5"
     "@lerna/pulse-till-done" "3.13.0"
     "@lerna/validation-error" "3.13.0"
@@ -1731,33 +1570,33 @@
     p-map-series "^1.0.0"
 
 "@lerna/init@^3.3.0":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/init/-/init-3.18.5.tgz#86dd0b2b3290755a96975069b5cb007f775df9f5"
-  integrity sha512-oCwipWrha98EcJAHm8AGd2YFFLNI7AW9AWi0/LbClj1+XY9ah+uifXIgYGfTk63LbgophDd8936ZEpHMxBsbAg==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/init/-/init-3.21.0.tgz#1e810934dc8bf4e5386c031041881d3b4096aa5c"
+  integrity sha512-6CM0z+EFUkFfurwdJCR+LQQF6MqHbYDCBPyhu/d086LRf58GtYZYj49J8mKG9ktayp/TOIxL/pKKjgLD8QBPOg==
   dependencies:
     "@lerna/child-process" "3.16.5"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     fs-extra "^8.1.0"
     p-map "^2.1.0"
     write-json-file "^3.2.0"
 
 "@lerna/link@^3.3.0":
-  version "3.18.5"
-  resolved "https://registry.yarnpkg.com/@lerna/link/-/link-3.18.5.tgz#f24347e4f0b71d54575bd37cfa1794bc8ee91b18"
-  integrity sha512-xTN3vktJpkT7Nqc3QkZRtHO4bT5NvuLMtKNIBDkks0HpGxC9PRyyqwOoCoh1yOGbrWIuDezhfMg3Qow+6I69IQ==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/link/-/link-3.21.0.tgz#8be68ff0ccee104b174b5bbd606302c2f06e9d9b"
+  integrity sha512-tGu9GxrX7Ivs+Wl3w1+jrLi1nQ36kNI32dcOssij6bg0oZ2M2MDEFI9UF2gmoypTaN9uO5TSsjCFS7aR79HbdQ==
   dependencies:
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/package-graph" "3.18.5"
     "@lerna/symlink-dependencies" "3.17.0"
     p-map "^2.1.0"
     slash "^2.0.0"
 
 "@lerna/list@^3.3.2":
-  version "3.20.0"
-  resolved "https://registry.yarnpkg.com/@lerna/list/-/list-3.20.0.tgz#7e67cc29c5cf661cfd097e8a7c2d3dcce7a81029"
-  integrity sha512-fXTicPrfioVnRzknyPawmYIVkzDRBaQqk9spejS1S3O1DOidkihK0xxNkr8HCVC0L22w6f92g83qWDp2BYRUbg==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/list/-/list-3.21.0.tgz#42f76fafa56dea13b691ec8cab13832691d61da2"
+  integrity sha512-KehRjE83B1VaAbRRkRy6jLX1Cin8ltsrQ7FHf2bhwhRHK0S54YuA6LOoBnY/NtA8bHDX/Z+G5sMY78X30NS9tg==
   dependencies:
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/filter-options" "3.20.0"
     "@lerna/listable" "3.18.5"
     "@lerna/output" "3.13.0"
@@ -1903,10 +1742,10 @@
     npmlog "^4.1.2"
     upath "^1.2.0"
 
-"@lerna/project@3.18.0":
-  version "3.18.0"
-  resolved "https://registry.yarnpkg.com/@lerna/project/-/project-3.18.0.tgz#56feee01daeb42c03cbdf0ed8a2a10cbce32f670"
-  integrity sha512-+LDwvdAp0BurOAWmeHE3uuticsq9hNxBI0+FMHiIai8jrygpJGahaQrBYWpwbshbQyVLeQgx3+YJdW2TbEdFWA==
+"@lerna/project@3.21.0":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/project/-/project-3.21.0.tgz#5d784d2d10c561a00f20320bcdb040997c10502d"
+  integrity sha512-xT1mrpET2BF11CY32uypV2GPtPVm6Hgtha7D81GQP9iAitk9EccrdNjYGt5UBYASl4CIDXBRxwmTTVGfrCx82A==
   dependencies:
     "@lerna/package" "3.16.0"
     "@lerna/validation-error" "3.13.0"
@@ -1930,9 +1769,9 @@
     npmlog "^4.1.2"
 
 "@lerna/publish@^3.4.3":
-  version "3.20.2"
-  resolved "https://registry.yarnpkg.com/@lerna/publish/-/publish-3.20.2.tgz#a45d29813099b3249657ea913d0dc3f8ebc5cc2e"
-  integrity sha512-N7Y6PdhJ+tYQPdI1tZum8W25cDlTp4D6brvRacKZusweWexxaopbV8RprBaKexkEX/KIbncuADq7qjDBdQHzaA==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/publish/-/publish-3.21.0.tgz#0112393125f000484c3f50caba71a547f91bd7f4"
+  integrity sha512-JZ+ehZB9UCQ9nqH8Ld/Yqc/If++aK/7XIubkrB9sQ5hf2GeIbmI/BrJpMgLW/e9T5bKrUBZPUvoUN3daVipA5A==
   dependencies:
     "@evocateur/libnpmaccess" "^3.1.2"
     "@evocateur/npm-registry-fetch" "^4.0.0"
@@ -1940,7 +1779,7 @@
     "@lerna/check-working-tree" "3.16.5"
     "@lerna/child-process" "3.16.5"
     "@lerna/collect-updates" "3.20.0"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/describe-ref" "3.16.5"
     "@lerna/log-packed" "3.16.0"
     "@lerna/npm-conf" "3.16.0"
@@ -1955,7 +1794,7 @@
     "@lerna/run-lifecycle" "3.16.2"
     "@lerna/run-topologically" "3.18.5"
     "@lerna/validation-error" "3.13.0"
-    "@lerna/version" "3.20.2"
+    "@lerna/version" "3.21.0"
     figgy-pudding "^3.5.1"
     fs-extra "^8.1.0"
     npm-package-arg "^6.1.0"
@@ -2019,11 +1858,11 @@
     p-queue "^4.0.0"
 
 "@lerna/run@^3.3.2":
-  version "3.20.0"
-  resolved "https://registry.yarnpkg.com/@lerna/run/-/run-3.20.0.tgz#a479f7c42bdf9ebabb3a1e5a2bdebb7a8d201151"
-  integrity sha512-9U3AqeaCeB7KsGS9oyKNp62s9vYoULg/B4cqXTKZkc+OKL6QOEjYHYVSBcMK9lUXrMjCjDIuDSX3PnTCPxQ2Dw==
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/run/-/run-3.21.0.tgz#2a35ec84979e4d6e42474fe148d32e5de1cac891"
+  integrity sha512-fJF68rT3veh+hkToFsBmUJ9MHc9yGXA7LSDvhziAojzOb0AI/jBDp6cEcDQyJ7dbnplba2Lj02IH61QUf9oW0Q==
   dependencies:
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/filter-options" "3.20.0"
     "@lerna/npm-run-script" "3.16.5"
     "@lerna/output" "3.13.0"
@@ -2068,15 +1907,15 @@
   dependencies:
     npmlog "^4.1.2"
 
-"@lerna/version@3.20.2", "@lerna/version@^3.4.1":
-  version "3.20.2"
-  resolved "https://registry.yarnpkg.com/@lerna/version/-/version-3.20.2.tgz#3709141c0f537741d9bc10cb24f56897bcb30428"
-  integrity sha512-ckBJMaBWc+xJen0cMyCE7W67QXLLrc0ELvigPIn8p609qkfNM0L0CF803MKxjVOldJAjw84b8ucNWZLvJagP/Q==
+"@lerna/version@3.21.0", "@lerna/version@^3.4.1":
+  version "3.21.0"
+  resolved "https://registry.yarnpkg.com/@lerna/version/-/version-3.21.0.tgz#5bcc3d2de9eb8f4db18efb0d88973f9a509eccc3"
+  integrity sha512-nIT3u43fCNj6uSMN1dRxFnF4GhmIiOEqSTkGSjrMU+8kHKwzOqS/6X6TOzklBmCyEZOpF/fLlGqH3BZHnwLDzQ==
   dependencies:
     "@lerna/check-working-tree" "3.16.5"
     "@lerna/child-process" "3.16.5"
     "@lerna/collect-updates" "3.20.0"
-    "@lerna/command" "3.18.5"
+    "@lerna/command" "3.21.0"
     "@lerna/conventional-commits" "3.18.5"
     "@lerna/github-client" "3.16.5"
     "@lerna/gitlab-client" "3.15.0"
@@ -2117,18 +1956,19 @@
     mkdirp "^0.5.1"
     rimraf "^2.5.2"
 
-"@mdjs/core@^0.1.9":
-  version "0.1.9"
-  resolved "https://registry.yarnpkg.com/@mdjs/core/-/core-0.1.9.tgz#4855288e3615541778a96838f6637efba3da01f4"
-  integrity sha512-e+lA4ZgnfZg/AoEpFqfrZWHkjrExPl0ZmlHL+4gqxcX3cHIWeM0x6J3sha2NQdGHL/yBYff/qJ5qAiysnHvs7w==
+"@mdjs/core@^0.3.1":
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/@mdjs/core/-/core-0.3.1.tgz#86b7db9b9a7a55671d82e1d960ee14e2434edd45"
+  integrity sha512-SRK/JhBcHB+9f1ytA5TMLWeC82nlqox3Paw7JW2CLtjIaxQVuhadgwA6qK/ZJEYnQTFW+fizWpKE7EFu+0XslQ==
   dependencies:
-    "@mdjs/mdjs-preview" "^0.0.1"
+    "@mdjs/mdjs-preview" "^0.2.0"
     "@mdjs/mdjs-story" "^0.0.1"
     "@types/unist" "^2.0.3"
     "@types/vfile" "^4.0.0"
     es-module-lexer "^0.3.13"
     github-markdown-css "^3.0.1"
     rehype-autolink-headings "^2.0.5"
+    rehype-prism-template "^0.4.1"
     rehype-raw "^4.0.1"
     rehype-slug "^2.0.3"
     rehype-stringify "^6.0.1"
@@ -2146,6 +1986,34 @@
   dependencies:
     lit-element "^2.2.1"
 
+"@mdjs/mdjs-preview@^0.0.2":
+  version "0.0.2"
+  resolved "https://registry.yarnpkg.com/@mdjs/mdjs-preview/-/mdjs-preview-0.0.2.tgz#e97115b3d93a79d1957e98cb054e383fb9ba35b1"
+  integrity sha512-tRm04H6VgsnFLJKvPq15lmV7PUv5qlH++tOaXCDFRAgN/NrOjWs9a2qjD+eRg6yqw5SDgrLT7smoLNrU88nPJw==
+  dependencies:
+    "@mdjs/mdjs-preview" "^0.0.1"
+    "@mdjs/mdjs-story" "^0.0.1"
+    lit-element "^2.3.1"
+
+"@mdjs/mdjs-preview@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@mdjs/mdjs-preview/-/mdjs-preview-0.1.0.tgz#e2497bf8798279b8c0a14b995d2a346fc8b852f9"
+  integrity sha512-vivm1Qr3XGP2VtoRH0q+L7kjRb09tVTdet/G/Tx2yUAyywctW+EnlmQBQbE9B2un4L2MGFXEu1HQ4RIFwuRmmQ==
+  dependencies:
+    "@mdjs/mdjs-preview" "^0.0.2"
+    "@mdjs/mdjs-story" "^0.0.1"
+    lit-element "^2.3.1"
+
+"@mdjs/mdjs-preview@^0.2.0":
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/@mdjs/mdjs-preview/-/mdjs-preview-0.2.0.tgz#c3100d626afc3da9fd97274a81a7ca32dac70fe7"
+  integrity sha512-AIdTbUef2H6vQ3NnUZcVEeRJg0N5aFruJp+uPE4+vAm4XDzytpPUFOOfZovTbkAVQ8ehgmEfyadRaXPBOVUbTA==
+  dependencies:
+    "@mdjs/mdjs-preview" "^0.1.0"
+    "@mdjs/mdjs-story" "^0.0.1"
+    lit-element "^2.3.1"
+    lit-html "^1.2.1"
+
 "@mdjs/mdjs-story@^0.0.1":
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/@mdjs/mdjs-story/-/mdjs-story-0.0.1.tgz#aad15762dd881a532756fbff774113e9964dda88"
@@ -2153,48 +2021,35 @@
   dependencies:
     lit-element "^2.2.1"
 
-"@mdx-js/loader@^1.5.1":
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.5.8.tgz#3d1c4031b934c03309cabbbfe01628f3960e3221"
-  integrity sha512-Tmrx1ZSTDEBF6oBG6aoEmLNhKVvLqfCQe7mpnTFDjAG0O26E96m45Saj/FJkl373ulJ8BRED2EamNjejrKoeJQ==
+"@mdx-js/mdx@^1.5.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.1.tgz#95d53da3bdb0cd9239097e411b5a41ad86dbd059"
+  integrity sha512-DLnHbYZGoXSzfIHKgEtsO4qP8029YbdyJvC746PwfPNrRyGciPsqgWmfz/nEXt/fg+UMBG/6/cZaZx/hvyxnyg==
   dependencies:
-    "@mdx-js/mdx" "^1.5.8"
-    "@mdx-js/react" "^1.5.8"
-    loader-utils "1.2.3"
-
-"@mdx-js/mdx@^1.5.1", "@mdx-js/mdx@^1.5.8":
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.5.8.tgz#40740eaf0b0007b461cee8df13a7ae5a1af8064a"
-  integrity sha512-OzanPTN0p9GZOEVeEuEa8QsjxxGyfFOOnI/+V1oC1su9UIN4KUg1k4n/hWTZC+VZhdW1Lfj6+Ho8nIs6L+pbDA==
-  dependencies:
-    "@babel/core" "7.8.4"
+    "@babel/core" "7.9.0"
     "@babel/plugin-syntax-jsx" "7.8.3"
     "@babel/plugin-syntax-object-rest-spread" "7.8.3"
-    "@mdx-js/util" "^1.5.8"
-    babel-plugin-apply-mdx-type-prop "^1.5.8"
-    babel-plugin-extract-import-names "^1.5.8"
+    "@mdx-js/util" "^1.6.1"
+    babel-plugin-apply-mdx-type-prop "^1.6.1"
+    babel-plugin-extract-import-names "^1.6.1"
     camelcase-css "2.0.1"
     detab "2.0.3"
     hast-util-raw "5.0.2"
     lodash.uniq "4.5.0"
-    mdast-util-to-hast "7.0.0"
-    remark-mdx "^1.5.8"
-    remark-parse "7.0.2"
-    remark-squeeze-paragraphs "3.0.4"
+    mdast-util-to-hast "8.2.0"
+    remark-footnotes "1.0.0"
+    remark-mdx "^1.6.1"
+    remark-parse "8.0.2"
+    remark-squeeze-paragraphs "4.0.0"
     style-to-object "0.3.0"
-    unified "8.4.2"
+    unified "9.0.0"
     unist-builder "2.0.3"
     unist-util-visit "2.0.2"
 
-"@mdx-js/react@^1.5.1", "@mdx-js/react@^1.5.8":
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/@mdx-js/react/-/react-1.5.8.tgz#fc38fe0eb278ae24666b2df3c751e726e33f5fac"
-  integrity sha512-L3rehITVxqDHOPJFGBSHKt3Mv/p3MENYlGIwLNYU89/iVqTLMD/vz8hL9RQtKqRoMbKuWpzzLlKIObqJzthNYg==
-
-"@mdx-js/util@^1.5.8":
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.5.8.tgz#cbadda0378af899c17ce1aa69c677015cab28448"
-  integrity sha512-a7Gjjw8bfBSertA/pTWBA/9WKEhgaSxvQE2NTSUzaknrzGFOhs4alZSHh3RHmSFdSWv5pUuzAgsWseMLhWEVkQ==
+"@mdx-js/util@^1.6.1":
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/@mdx-js/util/-/util-1.6.1.tgz#c1e8480844dfaeecde8b827d0e4bbf8793274659"
+  integrity sha512-A3TBBjg5iVo8S4TTG0VrW8G9YNLob4+M6rALKjY8Sxr9zPExWQ7iTPUSvJVE7YhF9E08EQMubx1vRal3jtpJ9Q==
 
 "@mrmlnc/readdir-enhanced@^2.2.1":
   version "2.2.1"
@@ -2305,16 +2160,16 @@
     universal-user-agent "^4.0.0"
 
 "@octokit/types@^2.0.0", "@octokit/types@^2.0.1", "@octokit/types@^2.11.1":
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-2.11.1.tgz#bd5b059596b42845be3f8e66065667aff8c8bf8b"
-  integrity sha512-QaLoLkmFdfoNbk3eOzPv7vKrUY0nRJIYmZDoz/pTer4ICpqu80aSQTVHnnUxEFuURCiidig76CcxUOYC/bY3RQ==
+  version "2.16.2"
+  resolved "https://registry.yarnpkg.com/@octokit/types/-/types-2.16.2.tgz#4c5f8da3c6fecf3da1811aef678fda03edac35d2"
+  integrity sha512-O75k56TYvJ8WpAakWwYRN8Bgu60KrmX0z1KqFp1kNiFNkgW+JW+9EBKZ+S33PU6SLvbihqd+3drvPxKK68Ee8Q==
   dependencies:
     "@types/node" ">= 8"
 
 "@open-wc/building-rollup@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@open-wc/building-rollup/-/building-rollup-1.2.1.tgz#15532fed6900eeb9db991dfbb4514e5f183e172d"
-  integrity sha512-0WbObzWt2MdXl2w/SJKPAh/na8oM4W6vxEwxlYqI+NALOXLk/A0nN/y9MUpWP1BZQnO9yJdH+42rA5wubHp9kA==
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/@open-wc/building-rollup/-/building-rollup-1.2.7.tgz#e3f9ee98eab9e058c20d8f08e9101efbc1834b3e"
+  integrity sha512-w4/al4IsQYcNOyMmlwpIg8bRw9HJuIv6nf0EAlZH8vqf+TfTCvRbbUoiG0rpvQFizTierX8BMccTxidBY6KI3Q==
   dependencies:
     "@babel/core" "^7.9.0"
     "@babel/helpers" "^7.9.2"
@@ -2326,9 +2181,9 @@
     "@babel/plugin-transform-modules-systemjs" "^7.9.0"
     "@babel/plugin-transform-runtime" "^7.9.0"
     "@babel/preset-env" "^7.9.0"
-    "@open-wc/building-utils" "^2.16.4"
-    "@open-wc/rollup-plugin-html" "^1.0.2"
-    "@open-wc/rollup-plugin-polyfills-loader" "^1.0.3"
+    "@open-wc/building-utils" "^2.18.0"
+    "@open-wc/rollup-plugin-html" "^1.0.5"
+    "@open-wc/rollup-plugin-polyfills-loader" "^1.0.6"
     "@rollup/plugin-node-resolve" "^7.1.1"
     babel-plugin-bundled-import-meta "^0.3.2"
     babel-plugin-template-html-minifier "^4.0.0"
@@ -2341,10 +2196,10 @@
     rollup-plugin-workbox "^5.0.1"
     terser "^4.6.7"
 
-"@open-wc/building-utils@^2.16.3":
-  version "2.16.3"
-  resolved "https://registry.yarnpkg.com/@open-wc/building-utils/-/building-utils-2.16.3.tgz#f512d68198c31458849c79111fa9d3f24f03049d"
-  integrity sha512-lO/HD2wEl2avRSgqISeP4S1zPQEGRQ/+Zh8RBk9AggDma3uPiRU0RbuRvhunmu7hFWVDBj5o1FRJ7xJ94AWCnw==
+"@open-wc/building-utils@^2.18.0":
+  version "2.18.0"
+  resolved "https://registry.yarnpkg.com/@open-wc/building-utils/-/building-utils-2.18.0.tgz#f80929dfcfb6d8a6cb5c933654c721808b4bb2d3"
+  integrity sha512-U1n8sLQlLt3IuqhU7tDsGQAGUfVMiB64xJsAmJEtekposrjqkjtRLU/WipvROl1A2GTsrMojMjNbFqzJghpd6g==
   dependencies:
     "@babel/core" "^7.9.0"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
@@ -2367,39 +2222,7 @@
     resolve "^1.11.1"
     rimraf "^3.0.2"
     shady-css-scoped-element "^0.0.2"
-    systemjs "^4.0.0"
-    terser "^4.6.7"
-    valid-url "^1.0.9"
-    whatwg-fetch "^3.0.0"
-    whatwg-url "^7.0.0"
-
-"@open-wc/building-utils@^2.16.4":
-  version "2.16.4"
-  resolved "https://registry.yarnpkg.com/@open-wc/building-utils/-/building-utils-2.16.4.tgz#10d64e0d2b92c017caf47a57991f8b1eef91c634"
-  integrity sha512-ByknIanbo2wSpNs7gHy/hBHmPOO91IOJCDravSNreK88XdTd4vnCkx0DrRltgwvPIg7GVHWv/NFfSfWecRrh4Q==
-  dependencies:
-    "@babel/core" "^7.9.0"
-    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
-    "@webcomponents/shadycss" "^1.9.4"
-    "@webcomponents/webcomponentsjs" "^2.4.0"
-    arrify "^2.0.1"
-    browserslist "^4.9.1"
-    chokidar "^3.0.0"
-    clean-css "^4.2.1"
-    clone "^2.1.2"
-    core-js-bundle "^3.6.0"
-    deepmerge "^4.2.2"
-    es-module-shims "^0.4.6"
-    html-minifier "^4.0.0"
-    lru-cache "^5.1.1"
-    minimatch "^3.0.4"
-    parse5 "^5.1.1"
-    path-is-inside "^1.0.2"
-    regenerator-runtime "^0.13.3"
-    resolve "^1.11.1"
-    rimraf "^3.0.2"
-    shady-css-scoped-element "^0.0.2"
-    systemjs "^4.0.0"
+    systemjs "^6.3.1"
     terser "^4.6.7"
     valid-url "^1.0.9"
     whatwg-fetch "^3.0.0"
@@ -2413,41 +2236,44 @@
     "@open-wc/semantic-dom-diff" "^0.13.16"
     "@types/chai" "^4.1.7"
 
-"@open-wc/dedupe-mixin@^1.2.1", "@open-wc/dedupe-mixin@^1.2.16":
-  version "1.2.16"
-  resolved "https://registry.yarnpkg.com/@open-wc/dedupe-mixin/-/dedupe-mixin-1.2.16.tgz#ec543814d3f4396dfe6e5f560c6d26ef274acc4c"
-  integrity sha512-7FMRmUyxAmNqFN0Vm5/yLIwxkD3UO97r10ymZc/nz9YyPksfHk0CxjCM4upDBzte5F6qyomhMW5POCr1c7/6vw==
+"@open-wc/dedupe-mixin@^1.2.1", "@open-wc/dedupe-mixin@^1.2.17":
+  version "1.2.17"
+  resolved "https://registry.yarnpkg.com/@open-wc/dedupe-mixin/-/dedupe-mixin-1.2.17.tgz#50fb903fc8785639487d7987caae45d7bba08ec7"
+  integrity sha512-9A3WohqNxEloJa4y1DuBL5zH12cNRNW1vsrkiaLMnOGuQdhibs2XY1oliudsKpvIeNjDXRVRPUdIIzn65BypCw==
 
-"@open-wc/demoing-storybook@^2.0.0":
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/@open-wc/demoing-storybook/-/demoing-storybook-2.1.1.tgz#3167f189573795f6024322b86b4150764ffe5966"
-  integrity sha512-Zmcvg6K8ZsKjn4rS8kCZdaJ+rOLoAkuxFpVRW5BLs2fvLPhGEGuE+ce8+6BAMLP/a1939bWfP3AmGiyHtL+wuA==
+"@open-wc/demoing-storybook@^2.0.2":
+  version "2.2.12"
+  resolved "https://registry.yarnpkg.com/@open-wc/demoing-storybook/-/demoing-storybook-2.2.12.tgz#167018e792f53d85b7cb7dae0a45db9c200e15aa"
+  integrity sha512-EZ8hMoTOnoayBhZqor7f9UEHVp3bvXYM73ohENgd65Enya3qfT3d7LCWyLfgrLW8gxHPYkSmmaqBg4rjKDFo2g==
   dependencies:
     "@babel/core" "^7.9.0"
+    "@babel/generator" "^7.9.6"
+    "@babel/parser" "^7.9.6"
     "@babel/plugin-proposal-dynamic-import" "^7.8.3"
     "@babel/plugin-syntax-import-meta" "^7.8.3"
     "@babel/plugin-transform-react-jsx" "^7.9.1"
     "@babel/preset-env" "^7.9.0"
     "@mdx-js/mdx" "^1.5.1"
-    "@open-wc/rollup-plugin-html" "^1.0.2"
-    "@open-wc/rollup-plugin-polyfills-loader" "^1.0.3"
+    "@open-wc/rollup-plugin-html" "^1.0.5"
+    "@open-wc/rollup-plugin-polyfills-loader" "^1.0.6"
     "@rollup/plugin-node-resolve" "^7.1.1"
-    "@storybook/addon-docs" "5.3.1"
     babel-plugin-bundled-import-meta "^0.3.2"
     babel-plugin-template-html-minifier "^4.0.0"
     command-line-args "^5.0.2"
     command-line-usage "^6.1.0"
     deepmerge "^4.2.2"
-    es-dev-server "^1.47.0"
+    es-dev-server "^1.50.6"
     es-module-lexer "^0.3.13"
     fs-extra "^8.1.0"
     glob "^7.1.3"
+    js-string-escape "^1.0.1"
     lit-html "^1.0.0"
+    lodash "^4.17.15"
     magic-string "^0.25.7"
     rollup "^2.7.2"
     rollup-plugin-babel "^5.0.0-alpha.1"
     rollup-plugin-terser "^5.2.0"
-    storybook-addon-markdown-docs "^0.2.8"
+    storybook-addon-markdown-docs "^0.3.1"
     storybook-prebuilt "^1.5.0"
 
 "@open-wc/eslint-config@^1.0.0":
@@ -2463,47 +2289,48 @@
     eslint-plugin-no-only-tests "^2.3.1"
     eslint-plugin-wc "^1.2.0"
 
-"@open-wc/karma-esm@^2.13.23":
-  version "2.13.23"
-  resolved "https://registry.yarnpkg.com/@open-wc/karma-esm/-/karma-esm-2.13.23.tgz#bd676154cf4f987f980d3d601bb1277fe3f09779"
-  integrity sha512-UnC0Vy06F5doojitKIkG+UMbvJBqfRf6o5bdcXaOAd+7SpvpGRwmOq9+/4mkqzIKe/EIiTKc2SoCIh82JI0CTw==
+"@open-wc/karma-esm@^2.16.6":
+  version "2.16.6"
+  resolved "https://registry.yarnpkg.com/@open-wc/karma-esm/-/karma-esm-2.16.6.tgz#dc064f2b8851f2317e66988caaa4fae67c79964b"
+  integrity sha512-ujPYjzWEiZU2B6sAR6qcZPIYz1WN9Y1veLRrHbwdcCAGPyAIO10EVC0fEJn7i9K/83ZXr4STeXmCgXOxPh0VgA==
   dependencies:
-    "@open-wc/building-utils" "^2.16.3"
+    "@open-wc/building-utils" "^2.18.0"
     babel-plugin-istanbul "^5.1.4"
     chokidar "^3.0.0"
     deepmerge "^4.2.2"
-    es-dev-server "^1.46.2"
+    es-dev-server "^1.50.6"
     minimatch "^3.0.4"
     node-fetch "^2.6.0"
+    polyfills-loader "^1.6.1"
     portfinder "^1.0.21"
     request "^2.88.0"
 
-"@open-wc/rollup-plugin-html@^1.0.2":
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/@open-wc/rollup-plugin-html/-/rollup-plugin-html-1.0.2.tgz#2a3a99754a4ca786c4360c82dd5c56d37896d219"
-  integrity sha512-8e7Uph2XLkT8m5cmI3ZhKT5jmdGVk0DCOwT90GNKQYHXdlL9GCgweI+l8rNKr/9DRIX31y8d+jkzAlcLVekiBw==
+"@open-wc/rollup-plugin-html@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@open-wc/rollup-plugin-html/-/rollup-plugin-html-1.0.5.tgz#81efa681f3c6a12e5813639ada018a250a999b46"
+  integrity sha512-EAFiybd7LgckbkktCIMBSj81NkI4EmXYNc7S4rl+9Y3sLtDXvXy1Xf6x0diOSqids8lATW+k3p/H8vOQUvvccA==
   dependencies:
-    "@open-wc/building-utils" "^2.16.4"
+    "@open-wc/building-utils" "^2.18.0"
     "@types/html-minifier" "^3.5.3"
     fs-extra "^8.1.0"
     html-minifier "^4.0.0"
     parse5 "^5.1.1"
     terser "^4.6.7"
 
-"@open-wc/rollup-plugin-polyfills-loader@^1.0.3":
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/@open-wc/rollup-plugin-polyfills-loader/-/rollup-plugin-polyfills-loader-1.0.3.tgz#8fa2b0a3c77fe49cd46a259c2dc338f49a89e358"
-  integrity sha512-Dpx6nIFEEWcW8uXcrCV7nD3THMt7Yt1ubRk3nVupj8fYm2DqJi609Lr9eF5pQ9Rb6yF0k7cIy/GDOdDlFAynfQ==
+"@open-wc/rollup-plugin-polyfills-loader@^1.0.6":
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/@open-wc/rollup-plugin-polyfills-loader/-/rollup-plugin-polyfills-loader-1.0.6.tgz#23a31a50a4ea395813c61434c857442ad63192e7"
+  integrity sha512-CjR+UgQe2YX+DQBHtphG8hI8xeSAtUacDgbSuYCu0VF1u6wLdtW+zPHQHnog1PqI/yl8er97RwgCYqMhxqpoBQ==
   dependencies:
-    "@open-wc/rollup-plugin-html" "^1.0.2"
-    polyfills-loader "^1.5.6"
+    "@open-wc/rollup-plugin-html" "^1.0.5"
+    polyfills-loader "^1.6.1"
 
-"@open-wc/scoped-elements@^1.0.3":
-  version "1.0.8"
-  resolved "https://registry.yarnpkg.com/@open-wc/scoped-elements/-/scoped-elements-1.0.8.tgz#4bed4c810cb775b8567b7571e8799630b00fa882"
-  integrity sha512-eM6MPG0kArvFdbRUTaOFR9/oUIn6O0GxlGy/T22PSB7flaDWKm6eJtn/Xn6zpWc9a6n84sOq9CWv8Y817NiTRA==
+"@open-wc/scoped-elements@^1.0.3", "@open-wc/scoped-elements@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@open-wc/scoped-elements/-/scoped-elements-1.1.1.tgz#732744dac4d029ffacdeb169d85855714eda9d0c"
+  integrity sha512-Fx9bFOA14xGeNFQpSeyp6GmqW1vJyETr1qlem9pDS3hlK/HpWUtoBRAPyo4yexjY+aeSsenUeAYDXzPWQgeWXw==
   dependencies:
-    "@open-wc/dedupe-mixin" "^1.2.16"
+    "@open-wc/dedupe-mixin" "^1.2.17"
     lit-html "^1.0.0"
 
 "@open-wc/semantic-dom-diff@^0.13.16":
@@ -2511,31 +2338,41 @@
   resolved "https://registry.yarnpkg.com/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.13.21.tgz#718b9ec5f9a98935fc775e577ad094ae8d8b7dea"
   integrity sha512-BONpjHcGX2zFa9mfnwBCLEmlDsOHzT+j6Qt1yfK3MzFXFtAykfzFjAgaxPetu0YbBlCfXuMlfxI4vlRGCGMvFg==
 
-"@open-wc/semantic-dom-diff@^0.17.7":
-  version "0.17.7"
-  resolved "https://registry.yarnpkg.com/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.17.7.tgz#94b7a406275b786e525a6f9b2005f2bc0b2e9782"
-  integrity sha512-7SyZLBoXxYMIq2mQh3kJ80a09+M+ZpOiobBpwbW/8TKZEoOriB+eWAej5yPj6bM/XvUfn4y725vyS58U+GBeSw==
+"@open-wc/semantic-dom-diff@^0.17.9":
+  version "0.17.9"
+  resolved "https://registry.yarnpkg.com/@open-wc/semantic-dom-diff/-/semantic-dom-diff-0.17.9.tgz#15ed61dfdf7a01ebbf21755527e25c90c78bf5e2"
+  integrity sha512-wO4xM3FhLmGGZM3wDexUPFb55tqVX45LJQ9l3uNKj1Roi0/aV1KjIohdE2J0zUJivfCxAWo1Dy45hNkCHO4CVA==
+  dependencies:
+    "@types/chai" "^4.2.11"
 
-"@open-wc/testing-helpers@^1.0.0", "@open-wc/testing-helpers@^1.7.1":
-  version "1.7.1"
-  resolved "https://registry.yarnpkg.com/@open-wc/testing-helpers/-/testing-helpers-1.7.1.tgz#e93a4931e0d117deb7185ce9ea0acc87f6de47c0"
-  integrity sha512-v7AYqIGA50mFfwuZNqCxB0ZWI+aioZtiprBMl5bZT4eRMRz876jRMiX9y327RwwisGie6+HDIJHwhWjrd1GdOA==
+"@open-wc/testing-helpers@^1.0.0", "@open-wc/testing-helpers@^1.8.2":
+  version "1.8.2"
+  resolved "https://registry.yarnpkg.com/@open-wc/testing-helpers/-/testing-helpers-1.8.2.tgz#9120d976b8b4a50d06998c4f5ae9e0ec58bb0fb5"
+  integrity sha512-zxfZZOS4/30sceo7RHGHUxhxSe2F+NUsKYPK7EIATSJbQ1j9/3HIR+9PqYnZcRI3DT3CdPKQka/60dUJPH1kiQ==
+  dependencies:
+    "@open-wc/scoped-elements" "^1.1.1"
+    lit-element "^2.2.1"
+    lit-html "^1.0.0"
 
 "@open-wc/testing-karma-bs@^1.3.30":
-  version "1.3.56"
-  resolved "https://registry.yarnpkg.com/@open-wc/testing-karma-bs/-/testing-karma-bs-1.3.56.tgz#cf7559f15d5fadba3ce76d56a55e5ef013d70289"
-  integrity sha512-pdni8cmFj7GMwQYOkm2UN6pT2S4JZh2r6w7ACGPGKAe3VMgdGz2esWS9j3q10Ry00wnEOC/bFybU6u6z8tYDuQ==
+  version "1.3.71"
+  resolved "https://registry.yarnpkg.com/@open-wc/testing-karma-bs/-/testing-karma-bs-1.3.71.tgz#aa908cb7a0b7ead5f513b39942d4565f5eb89c69"
+  integrity sha512-M7Obxx7FE1BClssT38WJe3wMAdHWpSowwr/fidvWJ1KbPYgg8nEzGx/7yxwmVZu8w9k9ofZn9o1KEV1JVKvxfA==
   dependencies:
-    "@open-wc/testing-karma" "^3.3.12"
+    "@open-wc/testing-karma" "^3.3.28"
     "@types/node" "^11.13.0"
     karma-browserstack-launcher "^1.0.0"
 
-"@open-wc/testing-karma@^3.2.30", "@open-wc/testing-karma@^3.3.12":
-  version "3.3.12"
-  resolved "https://registry.yarnpkg.com/@open-wc/testing-karma/-/testing-karma-3.3.12.tgz#c6e3dc0415789b985369aa4c0ce6a0806845ff43"
-  integrity sha512-Hl0VGwBUQKuyuDrtr2dLi1SdD/BbkImuuE/Ieui37RyRevZy+QH97dIHvHLOSyrCqzaEzV9ePvxiPc7lEHnYIQ==
+"@open-wc/testing-karma@^3.2.30", "@open-wc/testing-karma@^3.3.28":
+  version "3.3.28"
+  resolved "https://registry.yarnpkg.com/@open-wc/testing-karma/-/testing-karma-3.3.28.tgz#2276476630300c6400e373df0e5a191cdbe75215"
+  integrity sha512-0TdTCjhKFWeHY7suWTFmBjjEvrl0fBO5YICVxH4FYQ9ZQyIkqg3QDoCu0RRypskziPVmNgsLY0MJY+iGa4BmYg==
   dependencies:
-    "@open-wc/karma-esm" "^2.13.23"
+    "@open-wc/karma-esm" "^2.16.6"
+    "@types/karma" "^5.0.0"
+    "@types/karma-coverage-istanbul-reporter" "^2.1.0"
+    "@types/karma-mocha" "^1.3.0"
+    "@types/karma-mocha-reporter" "^2.2.0"
     axe-core "^3.3.1"
     karma "^4.1.0"
     karma-chrome-launcher "^3.1.0"
@@ -2556,14 +2393,14 @@
     webpack "^4.28.0"
 
 "@open-wc/testing@^2.5.0":
-  version "2.5.11"
-  resolved "https://registry.yarnpkg.com/@open-wc/testing/-/testing-2.5.11.tgz#97c455ade0645cd2c83b7a902db4ea072f8523d0"
-  integrity sha512-QtLA5jGpfEJOoC0ka2OAqRAAZ0/pbgWPVLzgKPu//OC3CDxvVgKdEObW9pXVKpti5oLa7NRMxeJcTMkE4aO68Q==
+  version "2.5.16"
+  resolved "https://registry.yarnpkg.com/@open-wc/testing/-/testing-2.5.16.tgz#a9bbee796b0d0c456251418275dd621a0cac6898"
+  integrity sha512-XFoAi4w6wX9oLELtJNqZh8luZJH7dKyj8sKY4R6dfWBTMLBntPHozyBmmbFC6E47DPhxblvMJdsx+WFcSL1YjQ==
   dependencies:
     "@open-wc/chai-dom-equals" "^0.12.36"
-    "@open-wc/semantic-dom-diff" "^0.17.7"
-    "@open-wc/testing-helpers" "^1.7.1"
-    "@types/chai" "^4.1.7"
+    "@open-wc/semantic-dom-diff" "^0.17.9"
+    "@open-wc/testing-helpers" "^1.8.2"
+    "@types/chai" "^4.2.11"
     "@types/chai-dom" "^0.0.9"
     "@types/mocha" "^5.0.0"
     "@types/sinon-chai" "^3.2.3"
@@ -2581,9 +2418,9 @@
     "@polymer/polymer" "^3.0.0"
 
 "@polymer/polymer@^3.0.0":
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-3.4.0.tgz#2f6c85456214bfff987cf65883e6a7860d5ce2ff"
-  integrity sha512-f9fQ1RiEBmkFzuT6cCsfA0YGtdyKrvjF7f3HbvSY1uo2x7ON9Acc//dBLOROUrvXbw1ANT+LY/UeHw0+/KtGog==
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/@polymer/polymer/-/polymer-3.4.1.tgz#333bef25711f8411bb5624fb3eba8212ef8bee96"
+  integrity sha512-KPWnhDZibtqKrUz7enIPOiO4ZQoJNOuLwqrhV2MXzIt3VVnUVJVG5ORz4Z2sgO+UZ+/UZnPD0jqY+jmw/+a9mQ==
   dependencies:
     "@webcomponents/shadycss" "^1.9.1"
 
@@ -2617,13 +2454,13 @@
     magic-string "^0.25.5"
 
 "@rollup/pluginutils@^3.0.0", "@rollup/pluginutils@^3.0.8":
-  version "3.0.9"
-  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.9.tgz#aa6adca2c45e5a1b950103a999e3cddfe49fd775"
-  integrity sha512-TLZavlfPAZYI7v33wQh4mTP6zojne14yok3DNSLcjoG/Hirxfkonn6icP5rrNWRn8nZsirJBFFpijVOJzkUHDg==
+  version "3.0.10"
+  resolved "https://registry.yarnpkg.com/@rollup/pluginutils/-/pluginutils-3.0.10.tgz#a659b9025920378494cd8f8c59fbf9b3a50d5f12"
+  integrity sha512-d44M7t+PjmMrASHbhgpSbVgtL6EFyX7J4mYxwQ/c5eoaE6N2VgCgEcWVzNnwycIloti+/MpwFr8qfw+nRw00sw==
   dependencies:
     "@types/estree" "0.0.39"
     estree-walker "^1.0.1"
-    micromatch "^4.0.2"
+    picomatch "^2.2.2"
 
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
@@ -2681,46 +2518,6 @@
     react-dom "^16.8.1"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-docs@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-5.3.1.tgz#1f07015417b2e951c9ee4404e64d52a22866b20b"
-  integrity sha512-bT7gcUeqzCLqvzlLuFr7iQjFkwWGvcMf3yzbFKUEnEMQJ5qwV7o2cw/Tsd6juwrwTmc+X8RkbLkWSO8CeAR0Qg==
-  dependencies:
-    "@babel/generator" "^7.4.0"
-    "@babel/parser" "^7.4.2"
-    "@babel/plugin-transform-react-jsx" "^7.3.0"
-    "@egoist/vue-to-react" "^1.1.0"
-    "@jest/transform" "^24.9.0"
-    "@mdx-js/loader" "^1.5.1"
-    "@mdx-js/mdx" "^1.5.1"
-    "@mdx-js/react" "^1.5.1"
-    "@storybook/addons" "5.3.1"
-    "@storybook/api" "5.3.1"
-    "@storybook/components" "5.3.1"
-    "@storybook/core-events" "5.3.1"
-    "@storybook/csf" "0.0.1"
-    "@storybook/postinstall" "5.3.1"
-    "@storybook/source-loader" "5.3.1"
-    "@storybook/theming" "5.3.1"
-    acorn "^7.1.0"
-    acorn-jsx "^5.1.0"
-    acorn-walk "^7.0.0"
-    core-js "^3.0.1"
-    doctrine "^3.0.0"
-    escodegen "^1.12.0"
-    global "^4.3.2"
-    html-tags "^3.1.0"
-    js-string-escape "^1.0.1"
-    lodash "^4.17.15"
-    prop-types "^15.7.2"
-    react-element-to-jsx-string "^14.1.0"
-    remark-external-links "^5.0.0"
-    remark-slug "^5.1.2"
-    ts-dedent "^1.1.0"
-    util-deprecate "^1.0.2"
-    vue-docgen-api "^4.1.0"
-    vue-docgen-loader "^1.3.0-beta.0"
-
 "@storybook/addons@5.0.11":
   version "5.0.11"
   resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.0.11.tgz#86de70747e0a692d9dd8ea431daa1147d8785697"
@@ -2732,45 +2529,6 @@
     global "^4.3.2"
     util-deprecate "^1.0.2"
 
-"@storybook/addons@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-5.3.1.tgz#617a4c489b936fe9bb4fb04dc06d20f92a9eb065"
-  integrity sha512-nQ935Xip8RESY07qgkmPGdpOA0oSTmfqaFvtueHXZAQ3bekth5FJveef4dbi1A3QyZyf3gCy73aQqOkAhKn0MA==
-  dependencies:
-    "@storybook/api" "5.3.1"
-    "@storybook/channels" "5.3.1"
-    "@storybook/client-logger" "5.3.1"
-    "@storybook/core-events" "5.3.1"
-    core-js "^3.0.1"
-    global "^4.3.2"
-    util-deprecate "^1.0.2"
-
-"@storybook/api@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-5.3.1.tgz#7019e4f2845f823342712d4bdf18b8bd53752038"
-  integrity sha512-PKfEH6ZlH8X7+SyJ6kch+ZkMRXhSsz9BdVUeXie7shSjnwN+4hSvNuSxoxZflcp89KsdzLdybZJOE6EFQ3ppSA==
-  dependencies:
-    "@reach/router" "^1.2.1"
-    "@storybook/channels" "5.3.1"
-    "@storybook/client-logger" "5.3.1"
-    "@storybook/core-events" "5.3.1"
-    "@storybook/csf" "0.0.1"
-    "@storybook/router" "5.3.1"
-    "@storybook/theming" "5.3.1"
-    "@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/channels@5.0.11":
   version "5.0.11"
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.0.11.tgz#fae33809ed14187e7962bb10b813085c6838538c"
@@ -2778,13 +2536,6 @@
   dependencies:
     core-js "^2.6.5"
 
-"@storybook/channels@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-5.3.1.tgz#a7caa03ce652698e5fa54fdfac9dd19804f26c45"
-  integrity sha512-kftIZsMHhn/BVflzH/Q1c4mgQYVc7jEstmy9hYWuphn9Mf3LdpArtTDtU3ebrNgjO52CHM+Rh4NpByXhpR6HvA==
-  dependencies:
-    core-js "^3.0.1"
-
 "@storybook/client-logger@5.0.11":
   version "5.0.11"
   resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.0.11.tgz#1211421355188f418cc421893f760a2feaf22d27"
@@ -2792,13 +2543,6 @@
   dependencies:
     core-js "^2.6.5"
 
-"@storybook/client-logger@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-5.3.1.tgz#6e60e9a4431290c7bb566fb3c4d747822a503375"
-  integrity sha512-9CaUdzItrjMU8B0G4stBrbU0CytcQY2NMom7A1YLRBuov+XFBrKv1td+bO9SfBGFCSP5Kw2sKpY6t0vJSdfEow==
-  dependencies:
-    core-js "^3.0.1"
-
 "@storybook/components@5.0.11":
   version "5.0.11"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.0.11.tgz#0cf3aad5df92bae9d896a4d6cc376d4445bbe27f"
@@ -2830,33 +2574,6 @@
     recompose "^0.30.0"
     render-fragment "^0.1.1"
 
-"@storybook/components@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-5.3.1.tgz#d8e2cc3f5da9e7d3af67455fd4713fd373c9be44"
-  integrity sha512-Ywr4EYk49boBgse07H6emzLWNa5N0v/57XvSlhiTm/BRcwwNztKSIFWcX+77CIdfcCZMie+77Ce/c8R6XPDIhw==
-  dependencies:
-    "@storybook/client-logger" "5.3.1"
-    "@storybook/theming" "5.3.1"
-    "@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"
-    polished "^3.3.1"
-    popper.js "^1.14.7"
-    prop-types "^15.7.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.0.11":
   version "5.0.11"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.0.11.tgz#c7f10df6de6eb9a92cb4fe30b77e956f11b971e6"
@@ -2864,27 +2581,6 @@
   dependencies:
     core-js "^2.6.5"
 
-"@storybook/core-events@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-5.3.1.tgz#15e34ba8088a1e2a63bf78eb1979bb68c631affe"
-  integrity sha512-ewR8jSeBvCBJJifEN2rvGN9ji2PKEM+AFna2zS/lNuX7WlAN1HdLIDeNEqhaZBqsgOx9w7p6CEPhnnoC7CmZjA==
-  dependencies:
-    core-js "^3.0.1"
-
-"@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/postinstall@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-5.3.1.tgz#262505a3d5d36db534a6ec917457ef3259eeedf1"
-  integrity sha512-peseUMtIGkuAGnJqzBUPeIcn4i+88IhumRI6ID8kV1DIBtFRYdOXAQyqbcSo2oAfRmlWeIWuFD+de31GmAfisw==
-  dependencies:
-    core-js "^3.0.1"
-
 "@storybook/router@5.0.11":
   version "5.0.11"
   resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.0.11.tgz#e742ec567f623877bdb45b5b26551cb9380c1bf2"
@@ -2897,37 +2593,6 @@
     memoizerific "^1.11.3"
     qs "^6.5.2"
 
-"@storybook/router@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-5.3.1.tgz#fd675331ec3d3f1b7406ef60f81d6929fbc2eded"
-  integrity sha512-rjPH9QSIwIw2pJNADnTVTck2Y0kdGqdvowHtU98vug5Vryf6aNCZO+VOiMJC6wH4mYBjPzKU9O5mNjSttVxJSA==
-  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/source-loader@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-5.3.1.tgz#fb48ee1cbec6006ceb4c4e45c81c4965efe086f2"
-  integrity sha512-LQED6AJcLgvVT03ErVICt8fVoCZd5EM2XzY7rwVfQ02DZn0jDmDwytLWo9uqvxzF9O5BXatiBI4lcuNsr5CGsQ==
-  dependencies:
-    "@storybook/addons" "5.3.1"
-    "@storybook/client-logger" "5.3.1"
-    "@storybook/csf" "0.0.1"
-    core-js "^3.0.1"
-    estraverse "^4.2.0"
-    global "^4.3.2"
-    loader-utils "^1.2.3"
-    prettier "^1.16.4"
-    prop-types "^15.7.2"
-    regenerator-runtime "^0.13.3"
-
 "@storybook/theming@5.0.11":
   version "5.0.11"
   resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.0.11.tgz#46e243c36324676c36393c01695bdbd6369e79b4"
@@ -2948,24 +2613,6 @@
     prop-types "^15.6.2"
     react-inspector "^2.3.1"
 
-"@storybook/theming@5.3.1":
-  version "5.3.1"
-  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-5.3.1.tgz#26ab6fa785b3c63e433b025fa9d0d28f1199b27a"
-  integrity sha512-eh2QTn1BJ+1U6t3idIXMT/gdlXhqWgyxWxLvjNlLnIGWyOJ9v/G7Ycu7R9RN5BHn237I842iq9gkxdA6r9CCxA==
-  dependencies:
-    "@emotion/core" "^10.0.20"
-    "@emotion/styled" "^10.0.17"
-    "@storybook/client-logger" "5.3.1"
-    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"
-
 "@surma/rollup-plugin-off-main-thread@^1.1.1":
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/@surma/rollup-plugin-off-main-thread/-/rollup-plugin-off-main-thread-1.4.1.tgz#bf1343e5a926e5a1da55e3affd761dda4ce143ef"
@@ -2974,17 +2621,68 @@
     ejs "^2.6.1"
     magic-string "^0.25.0"
 
-"@types/babel-types@*", "@types/babel-types@^7.0.0":
-  version "7.0.7"
-  resolved "https://registry.yarnpkg.com/@types/babel-types/-/babel-types-7.0.7.tgz#667eb1640e8039436028055737d2b9986ee336e3"
-  integrity sha512-dBtBbrc+qTHy1WdfHYjBwRln4+LWqASWakLHsWHR2NWHIFkv4W3O070IGoGLEBrJBvct3r0L1BUPuvURi7kYUQ==
-
-"@types/babylon@^6.16.2":
-  version "6.16.5"
-  resolved "https://registry.yarnpkg.com/@types/babylon/-/babylon-6.16.5.tgz#1c5641db69eb8cdf378edd25b4be7754beeb48b4"
-  integrity sha512-xH2e58elpj1X4ynnKp9qSnWlsRTIs6n3tgLGNfwAGHwePw0mulHQllV34n0T25uYSu1k0hRKkWXF890B1yS47w==
+"@types/accepts@*":
+  version "1.3.5"
+  resolved "https://registry.yarnpkg.com/@types/accepts/-/accepts-1.3.5.tgz#c34bec115cfc746e04fe5a059df4ce7e7b391575"
+  integrity sha512-jOdnI/3qTpHABjM5cx1Hc0sKsPoYCp+DP/GJRGtDlPd7fiV9oXGGIcjW/ZOxLIvjGz8MA+uMZI9metHlgqbgwQ==
   dependencies:
-    "@types/babel-types" "*"
+    "@types/node" "*"
+
+"@types/babel__core@^7.1.3":
+  version "7.1.7"
+  resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.7.tgz#1dacad8840364a57c98d0dd4855c6dd3752c6b89"
+  integrity sha512-RL62NqSFPCDK2FM1pSDH0scHpJvsXtZNiYlMB73DgPBaG1E38ZYVL+ei5EkWRbr+KC4YNiAUNBnRj+bgwpgjMw==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+    "@types/babel__generator" "*"
+    "@types/babel__template" "*"
+    "@types/babel__traverse" "*"
+
+"@types/babel__generator@*":
+  version "7.6.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__generator/-/babel__generator-7.6.1.tgz#4901767b397e8711aeb99df8d396d7ba7b7f0e04"
+  integrity sha512-bBKm+2VPJcMRVwNhxKu8W+5/zT7pwNEqeokFOmbvVSqGzFneNxYcEBro9Ac7/N9tlsaPYnZLK8J1LWKkMsLAew==
+  dependencies:
+    "@babel/types" "^7.0.0"
+
+"@types/babel__template@*":
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/@types/babel__template/-/babel__template-7.0.2.tgz#4ff63d6b52eddac1de7b975a5223ed32ecea9307"
+  integrity sha512-/K6zCpeW7Imzgab2bLkLEbz0+1JlFSrUMdw7KoIIu+IUdu51GWaBZpd3y1VXGVXzynvGa4DaIaxNZHiON3GXUg==
+  dependencies:
+    "@babel/parser" "^7.1.0"
+    "@babel/types" "^7.0.0"
+
+"@types/babel__traverse@*":
+  version "7.0.11"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.0.11.tgz#1ae3010e8bf8851d324878b42acec71986486d18"
+  integrity sha512-ddHK5icION5U6q11+tV2f9Mo6CZVuT8GJKld2q9LqHSZbvLbH34Kcu2yFGckZut453+eQU6btIA3RihmnRgI+Q==
+  dependencies:
+    "@babel/types" "^7.3.0"
+
+"@types/body-parser@*":
+  version "1.19.0"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.0.tgz#0685b3c47eb3006ffed117cdd55164b61f80538f"
+  integrity sha512-W98JrE0j2K78swW4ukqMleo8R7h/pFETjM2DQ90MF6XK2i4LO4W3gQ71Lt4w3bfm2EvVSyWHplECvB5sK22yFQ==
+  dependencies:
+    "@types/connect" "*"
+    "@types/node" "*"
+
+"@types/browserslist-useragent@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/browserslist-useragent/-/browserslist-useragent-3.0.0.tgz#d425c9818182ce71ce53866798cee9c7d41d6e53"
+  integrity sha512-ZBvKzg3yyWNYEkwxAzdmUzp27sFvw+1m080/+2lwrt+eltNefn1f4fnpMyrjOla31p8zLleCYqQXw+3EETfn0w==
+
+"@types/browserslist@^4.8.0":
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/@types/browserslist/-/browserslist-4.8.0.tgz#60489aefdf0fcb56c2d8eb65267ff08dad7a526d"
+  integrity sha512-4PyO9OM08APvxxo1NmQyQKlJdowPCOQIy5D/NLO3aO0vGC57wsMptvGp3b8IbYnupFZr92l1dlVief1JvS6STQ==
+
+"@types/caniuse-api@^3.0.0":
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/@types/caniuse-api/-/caniuse-api-3.0.0.tgz#af31cc52062be0ab24583be072fd49b634dcc2fe"
+  integrity sha512-wT1VfnScjAftZsvLYaefu/UuwYJdYBwD2JDL2OQd01plGmuAoir5V6HnVHgrfh7zEwcasoiyO2wQ+W58sNh2sw==
 
 "@types/chai-dom@^0.0.9":
   version "0.0.9"
@@ -2993,7 +2691,7 @@
   dependencies:
     "@types/chai" "*"
 
-"@types/chai@*", "@types/chai@^4.1.7":
+"@types/chai@*", "@types/chai@^4.1.7", "@types/chai@^4.2.11":
   version "4.2.11"
   resolved "https://registry.yarnpkg.com/@types/chai/-/chai-4.2.11.tgz#d3614d6c5f500142358e6ed24e1bf16657536c50"
   integrity sha512-t7uW6eFafjO+qJ3BIV2gGUyZs27egcNRkUdalkud+Qa3+kg//f129iuOFivHDXQ+vnU3fDXuwgv0cqMCbcE8sw==
@@ -3010,6 +2708,43 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
+"@types/command-line-args@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/command-line-args/-/command-line-args-5.0.0.tgz#484e704d20dbb8754a8f091eee45cdd22bcff28c"
+  integrity sha512-4eOPXyn5DmP64MCMF8ePDvdlvlzt2a+F8ZaVjqmh2yFCpGjc1kI3kGnCFYX9SCsGTjQcWIyVZ86IHCEyjy/MNg==
+
+"@types/command-line-usage@^5.0.1":
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/@types/command-line-usage/-/command-line-usage-5.0.1.tgz#99424950da567ba67b6b65caee57ff03c4e751ec"
+  integrity sha512-/xUgezxxYePeXhg5S04hUjxG9JZi+rJTs1+4NwpYPfSaS7BeDa6tVJkH6lN9Cb6rl8d24Fi2uX0s0Ngg2JT6gg==
+
+"@types/connect@*":
+  version "3.4.33"
+  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.33.tgz#31610c901eca573b8713c3330abc6e6b9f588546"
+  integrity sha512-2+FrkXY4zllzTNfJth7jOqEHC+enpLeGslEhpnTAkg21GkRrWV4SsAtqchtT4YS9/nODBU2/ZfsBY2X4J/dX7A==
+  dependencies:
+    "@types/node" "*"
+
+"@types/content-disposition@*":
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/@types/content-disposition/-/content-disposition-0.5.3.tgz#0aa116701955c2faa0717fc69cd1596095e49d96"
+  integrity sha512-P1bffQfhD3O4LW0ioENXUhZ9OIa0Zn+P7M+pWgkCKaT53wVLSq0mrKksCID/FGHpFhRSxRGhgrQmfhRuzwtKdg==
+
+"@types/cookies@*":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@types/cookies/-/cookies-0.7.4.tgz#26dedf791701abc0e36b5b79a5722f40e455f87b"
+  integrity sha512-oTGtMzZZAVuEjTwCjIh8T8FrC8n/uwy+PG0yTvQcdZ7etoel7C7/3MSd7qrukENTgQtotG7gvBlBojuVs7X5rw==
+  dependencies:
+    "@types/connect" "*"
+    "@types/express" "*"
+    "@types/keygrip" "*"
+    "@types/node" "*"
+
+"@types/debounce@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/debounce/-/debounce-1.2.0.tgz#9ee99259f41018c640b3929e1bb32c3dcecdb192"
+  integrity sha512-bWG5wapaWgbss9E238T0R6bfo5Fh3OkeoSt245CM7JJwVwpw6MEBCbIxLq5z8KzsE3uJhzcIuQkyiZmzV3M/Dw==
+
 "@types/estree@*":
   version "0.0.44"
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.44.tgz#980cc5a29a3ef3bea6ff1f7d021047d7ea575e21"
@@ -3020,11 +2755,37 @@
   resolved "https://registry.yarnpkg.com/@types/estree/-/estree-0.0.39.tgz#e177e699ee1b8c22d23174caaa7422644389509f"
   integrity sha512-EYNwp3bU+98cpU4lAWYYL7Zz+2gryWH1qbdDTidVd6hkiR6weksdbMadyXKXNPEkQFhXM+hVO9ZygomHXp+AIw==
 
+"@types/etag@*":
+  version "1.8.0"
+  resolved "https://registry.yarnpkg.com/@types/etag/-/etag-1.8.0.tgz#37f0b1f3ea46da7ae319bbedb607e375b4c99f7e"
+  integrity sha512-EdSN0x+Y0/lBv7YAb8IU4Jgm6DWM+Bqtz7o5qozl96fzaqdqbdfHS5qjdpFeIv7xQ8jSLyjMMNShgYtMajEHyQ==
+  dependencies:
+    "@types/node" "*"
+
 "@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/express-serve-static-core@*":
+  version "4.17.7"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.7.tgz#dfe61f870eb549dc6d7e12050901847c7d7e915b"
+  integrity sha512-EMgTj/DF9qpgLXyc+Btimg+XoH7A2liE8uKul8qSmMTHCeNYzydDKFdsJskDvw42UsesCnhO63dO0Grbj8J4Dw==
+  dependencies:
+    "@types/node" "*"
+    "@types/qs" "*"
+    "@types/range-parser" "*"
+
+"@types/express@*":
+  version "4.17.6"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.6.tgz#6bce49e49570507b86ea1b07b806f04697fac45e"
+  integrity sha512-n/mr9tZI83kd4azlPG5y997C/M4DNABK9yErhFM6hKdym4kkmd9j0vtsJyjFIwfRBxtrxZtAfGZCNRIBMFLK5w==
+  dependencies:
+    "@types/body-parser" "*"
+    "@types/express-serve-static-core" "*"
+    "@types/qs" "*"
+    "@types/serve-static" "*"
+
 "@types/glob@^7.1.1":
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575"
@@ -3034,11 +2795,6 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/history@*":
-  version "4.7.5"
-  resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.5.tgz#527d20ef68571a4af02ed74350164e7a67544860"
-  integrity sha512-wLD/Aq2VggCJXSjxEwrMafIP51Z+13H78nXIX0ABEuIGhmB5sNGbR113MOKo+yfw+RDo1ZU3DM6yfnnRF/+ouw==
-
 "@types/html-minifier@^3.5.3":
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/@types/html-minifier/-/html-minifier-3.5.3.tgz#5276845138db2cebc54c789e0aaf87621a21e84f"
@@ -3048,90 +2804,153 @@
     "@types/relateurl" "*"
     "@types/uglify-js" "*"
 
-"@types/is-function@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/is-function/-/is-function-1.0.0.tgz#1b0b819b1636c7baf0d6785d030d12edf70c3e83"
-  integrity sha512-iTs9HReBu7evG77Q4EC8hZnqRt57irBDkK9nvmHroiOIVwYMQc4IvYvdRgwKfYepunIY7Oh/dBuuld+Gj9uo6w==
+"@types/http-assert@*":
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@types/http-assert/-/http-assert-1.5.1.tgz#d775e93630c2469c2f980fc27e3143240335db3b"
+  integrity sha512-PGAK759pxyfXE78NbKxyfRcWYA/KwW17X290cNev/qAsn9eQIxkH4shoNBafH37wewhDG/0p1cHPbK6+SzZjWQ==
 
-"@types/istanbul-lib-coverage@*", "@types/istanbul-lib-coverage@^2.0.0":
-  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==
+"@types/karma-coverage-istanbul-reporter@^2.1.0":
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/@types/karma-coverage-istanbul-reporter/-/karma-coverage-istanbul-reporter-2.1.0.tgz#cc913da37827a8d2149021dbebd294a5db01388e"
+  integrity sha512-r6y5GgvSUjAhztwDWpRxiZV+Q6knsudGQtF3/ri80AFyHawD0LC9Oz64ZhfexRU0EYWpU3hQJl35IjgTLGtvUg==
 
-"@types/istanbul-lib-report@*":
+"@types/karma-mocha-reporter@^2.2.0":
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@types/karma-mocha-reporter/-/karma-mocha-reporter-2.2.0.tgz#54b22a7375e695110974ae4c43b7483e34680e36"
+  integrity sha512-dsn9iXtwP3HzBCTkGS++1KLCzkhBWoz9fql8WOAcCGDYHlDlNL43R9DklPcNydl1i0/UMh48a0dPrT8b7kKuxw==
+  dependencies:
+    "@types/karma" "*"
+
+"@types/karma-mocha@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@types/karma-mocha/-/karma-mocha-1.3.0.tgz#1163badc60ba22342964918be0a1a2eee097bdf1"
+  integrity sha512-q7JAJ6oqtMph1/2fpwckutRQXzukvSAJf3ZNIbpOIX1uPktnenDxdqJdpFz7LUMEr+X9Soul3KkHvSR17sPDKQ==
+  dependencies:
+    "@types/karma" "*"
+
+"@types/karma@*", "@types/karma@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@types/karma/-/karma-5.0.0.tgz#6750ffc633c0fbc63dfb725146f198e8c3afcd08"
+  integrity sha512-5quuLnxdJWkzJCEwFatOClM6O7EkeDWfXltGySb01LQnBVjtbLzIky9JLW0IKt+JfzurUjwj7b7Sb/Omsx4QYA==
+  dependencies:
+    "@types/node" "*"
+    log4js "^4.0.0"
+
+"@types/keygrip@*":
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/@types/keygrip/-/keygrip-1.0.2.tgz#513abfd256d7ad0bf1ee1873606317b33b1b2a72"
+  integrity sha512-GJhpTepz2udxGexqos8wgaBx4I/zWIDPh/KOGEwAqtuGDkOUJu5eFvwmdBX4AmB8Odsr+9pHCQqiAqDL/yKMKw==
+
+"@types/koa-compose@*":
+  version "3.2.5"
+  resolved "https://registry.yarnpkg.com/@types/koa-compose/-/koa-compose-3.2.5.tgz#85eb2e80ac50be95f37ccf8c407c09bbe3468e9d"
+  integrity sha512-B8nG/OoE1ORZqCkBVsup/AKcvjdgoHnfi4pZMn5UwAPCbhk/96xyv284eBYW8JlQbQ7zDmnpFr68I/40mFoIBQ==
+  dependencies:
+    "@types/koa" "*"
+
+"@types/koa-compress@^2.0.9":
+  version "2.0.9"
+  resolved "https://registry.yarnpkg.com/@types/koa-compress/-/koa-compress-2.0.9.tgz#5d19f7d928f78b451a9afd148863e2b45f51e541"
+  integrity sha512-1Sa9OsbHd2N2N7gLpdIRHe8W99EZbfIR31D7Iisx16XgwZCnWUtGXzXQejhu74Y1pE/wILqBP6VL49ch/MVpZw==
+  dependencies:
+    "@types/koa" "*"
+    "@types/node" "*"
+
+"@types/koa-etag@^3.0.0":
   version "3.0.0"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-lib-report/-/istanbul-lib-report-3.0.0.tgz#c14c24f18ea8190c118ee7562b7ff99a36552686"
-  integrity sha512-plGgXAPfVKFoYfa9NpYDAkseG+g6Jr294RqeqcqDixSbU34MZVJRi/P+7Y8GDpzkEwLaGZZOpKIEmeVZNtKsrg==
+  resolved "https://registry.yarnpkg.com/@types/koa-etag/-/koa-etag-3.0.0.tgz#d14d3dab45d5577b94bc72960631de96751341d3"
+  integrity sha512-gXQUtKGEnCy0sZLG+uE3wL4mvY1CBPcb6ECjpAoD8RGYy/8ACY1B084k8LTFPIdVcmy7GD6Y4n3up3jnupofcQ==
   dependencies:
-    "@types/istanbul-lib-coverage" "*"
+    "@types/etag" "*"
+    "@types/koa" "*"
 
-"@types/istanbul-reports@^1.1.1":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@types/istanbul-reports/-/istanbul-reports-1.1.1.tgz#7a8cbf6a406f36c8add871625b278eaf0b0d255a"
-  integrity sha512-UpYjBi8xefVChsCoBpKShdxTllC9pwISirfoZsUa2AAdQg/Jd2KQGtSbw+ya7GPo7x/wAPlH6JBhKhAsXUEZNA==
+"@types/koa-send@*":
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/@types/koa-send/-/koa-send-4.1.2.tgz#978f8267ad116d12ac6a18fecd8f34c5657e09ad"
+  integrity sha512-rfqKIv9bFds39Jxvsp8o3YJLnEQVPVriYA14AuO2OY65IHh/4UX4U/iMs5L0wATpcRmm1bbe0BNk23TRwx3VQQ==
   dependencies:
-    "@types/istanbul-lib-coverage" "*"
-    "@types/istanbul-lib-report" "*"
+    "@types/koa" "*"
+
+"@types/koa-static@^4.0.1":
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/@types/koa-static/-/koa-static-4.0.1.tgz#b740d80a549b0a0a7a3b38918daecde88a7a50ec"
+  integrity sha512-SSpct5fEcAeRkBHa3RiwCIRfDHcD1cZRhwRF///ZfvRt8KhoqRrhK6wpDlYPk/vWHVFE9hPGqh68bhzsHkir4w==
+  dependencies:
+    "@types/koa" "*"
+    "@types/koa-send" "*"
+
+"@types/koa@*", "@types/koa@^2.0.48":
+  version "2.11.3"
+  resolved "https://registry.yarnpkg.com/@types/koa/-/koa-2.11.3.tgz#540ece376581b12beadf9a417dd1731bc31c16ce"
+  integrity sha512-ABxVkrNWa4O/Jp24EYI/hRNqEVRlhB9g09p48neQp4m3xL1TJtdWk2NyNQSMCU45ejeELMQZBYyfstyVvO2H3Q==
+  dependencies:
+    "@types/accepts" "*"
+    "@types/content-disposition" "*"
+    "@types/cookies" "*"
+    "@types/http-assert" "*"
+    "@types/keygrip" "*"
+    "@types/koa-compose" "*"
+    "@types/node" "*"
+
+"@types/lru-cache@^5.1.0":
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/@types/lru-cache/-/lru-cache-5.1.0.tgz#57f228f2b80c046b4a1bd5cac031f81f207f4f03"
+  integrity sha512-RaE0B+14ToE4l6UqdarKPnXwVDuigfFv+5j9Dze/Nqr23yyuqdNvzcZi3xB+3Agvi5R4EOgAksfv3lXX4vBt9w==
+
+"@types/mime@*":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-2.0.2.tgz#857a118d8634c84bba7ae14088e4508490cd5da5"
+  integrity sha512-4kPlzbljFcsttWEq6aBW0OZe6BDajAmyvr2xknBG92tejQnvdGtT9+kXSZ580DqpxY9qG2xeQVF9Dq0ymUTo5Q==
 
 "@types/minimatch@*", "@types/minimatch@^3.0.3":
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/@types/minimatch/-/minimatch-3.0.3.tgz#3dca0e3f33b200fc7d1139c0cd96c1268cadfd9d"
   integrity sha512-tHq6qdbT9U1IRSGf14CL0pUlULksvY9OZ+5eEgl1N7t+OA3tGvNpxJCzuKQlsNgCVwbAs670L1vcVQi8j9HjnA==
 
+"@types/minimist@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@types/minimist/-/minimist-1.2.0.tgz#69a23a3ad29caf0097f06eda59b361ee2f0639f6"
+  integrity sha1-aaI6OtKcrwCX8G7aWbNh7i8GOfY=
+
 "@types/mocha@^5.0.0":
   version "5.2.7"
   resolved "https://registry.yarnpkg.com/@types/mocha/-/mocha-5.2.7.tgz#315d570ccb56c53452ff8638738df60726d5b6ea"
   integrity sha512-NYrtPht0wGzhwe9+/idPaBB+TqkY9AhTvOLMkThm0IoEfLaiVQZwBwyJ5puCkO3AUCWrmcoePjp2mbFocKy4SQ==
 
 "@types/node@*", "@types/node@>= 8":
-  version "13.13.0"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-13.13.0.tgz#30d2d09f623fe32cde9cb582c7a6eda2788ce4a8"
-  integrity sha512-WE4IOAC6r/yBZss1oQGM5zs2D7RuKR6Q+w+X2SouPofnWn+LbCqClRyhO3ZE7Ix8nmFgo/oVuuE01cJT2XB13A==
+  version "14.0.4"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.0.4.tgz#43a63fc5edce226bed106b31b875165256271107"
+  integrity sha512-k3NqigXWRzQZVBDS5D1U70A5E8Qk4Kh+Ha/x4M8Bt9pF0X05eggfnC9+63Usc9Q928hRUIpIhTQaXsZwZBl4Ew==
 
 "@types/node@^11.13.0":
-  version "11.15.11"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-11.15.11.tgz#c428d8327dcbd2106d559433728ba261e27bf7c0"
-  integrity sha512-TyWPoOfqHw3zu61/+2nNuUPhk3XUZnw271ot5K5dhcdSPeO35AjMHU+oBXfvsqdrA+Owwa2Z1999E4m2ENtdrg==
+  version "11.15.14"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-11.15.14.tgz#0b837e6d31cde5a2eb7c8f66f506d46f062f1838"
+  integrity sha512-5R/ADTMiAxv+4GAwzsupaUO51T1e0UYdPc8StO/t6a+Fv1o2sbY9MWgmP2QxtKGwge8HqTjq058L360ai5RDug==
+
+"@types/normalize-package-data@^2.4.0":
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
+  integrity sha512-f5j5b/Gf71L+dbqxIpQ4Z2WlmI/mPJ0fOkGGmFgtb6sAu97EPczzbS3/tJKxmcYDj55OX6ssqwDAWOHIYDRDGA==
 
 "@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"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/prop-types@*":
-  version "15.7.3"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
-  integrity sha512-KfRL3PuHmqQLOG+2tGpRO26Ctg+Cq1E01D2DMriKEATHgWLfeNDmq9e29Q9WIky0dQ3NPkd1mzYH8Lm936Z9qw==
+"@types/path-is-inside@^1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@types/path-is-inside/-/path-is-inside-1.0.0.tgz#02d6ff38975d684bdec96204494baf9f29f0e17f"
+  integrity sha512-hfnXRGugz+McgX2jxyy5qz9sB21LRzlGn24zlwN2KEgoPtEvjzNRrLtUkOOebPDPZl3Rq7ywKxYvylVcEZDnEw==
 
-"@types/reach__router@^1.2.3":
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/@types/reach__router/-/reach__router-1.3.4.tgz#98ef393d06f59d296b5c021ba94b94e5fc463245"
-  integrity sha512-DZgYfxUIlVSjvf0AvBbYNbpXLrTFNNpU1HrvCRbnMtx3nvGUUWC1/zlAe4dD4FCPFtc+LQuIPEsDiTb0zQkthg==
-  dependencies:
-    "@types/history" "*"
-    "@types/react" "*"
+"@types/qs@*":
+  version "6.9.3"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.3.tgz#b755a0934564a200d3efdf88546ec93c369abd03"
+  integrity sha512-7s9EQWupR1fTc2pSMtXRQ9w9gLOcrJn+h7HOXw4evxyvVqMi4f+q7d2tnFe3ng3SNHjtK+0EzGMGFUQX4/AQRA==
 
-"@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" "*"
-
-"@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"
-  integrity sha512-PiDL83kPMTolyZAWW3lyzO6ktooTb9tFTntVy7CA83/qFLWKLJ5bLeRboy6J6j3b1e8h2Eec6gBTEOOJRjV14A==
-  dependencies:
-    "@types/react" "*"
-
-"@types/react@*":
-  version "16.9.34"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.9.34.tgz#f7d5e331c468f53affed17a8a4d488cd44ea9349"
-  integrity sha512-8AJlYMOfPe1KGLKyHpflCg5z46n0b5DbRfqDksxBLBTUpB75ypDBAO9eCUcjNwE6LCUslwTz00yyG/X9gaVtow==
-  dependencies:
-    "@types/prop-types" "*"
-    csstype "^2.2.0"
+"@types/range-parser@*":
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.3.tgz#7ee330ba7caafb98090bece86a5ee44115904c2c"
+  integrity sha512-ewFXqrQHlFsgc09MK5jP5iR7vumV/BYayNC6PgJO2LPe8vrnNFyjQjSppfEngITi0qvfKtzFvgKymGheFM9UOA==
 
 "@types/relateurl@*":
   version "0.2.28"
@@ -3145,6 +2964,14 @@
   dependencies:
     "@types/node" "*"
 
+"@types/serve-static@*":
+  version "1.13.4"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.13.4.tgz#6662a93583e5a6cabca1b23592eb91e12fa80e7c"
+  integrity sha512-jTDt0o/YbpNwZbQmE/+2e+lfjJEJJR0I3OFaKQKPWkASkCoW3i6fsUnqudSMcNAfbtmADGu8f4MV4q+GqULmug==
+  dependencies:
+    "@types/express-serve-static-core" "*"
+    "@types/mime" "*"
+
 "@types/sinon-chai@^3.2.3":
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/@types/sinon-chai/-/sinon-chai-3.2.4.tgz#c425625681f4f8d3a43a7551a77f590ce1c49b21"
@@ -3154,9 +2981,9 @@
     "@types/sinon" "*"
 
 "@types/sinon@*":
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-9.0.0.tgz#5b70a360f55645dd64f205defd2a31b749a59799"
-  integrity sha512-v2TkYHkts4VXshMkcmot/H+ERZ2SevKa10saGaJPGCJ8vh3lKrC4u663zYEeRZxep+VbG6YRDtQ6gVqw9dYzPA==
+  version "9.0.3"
+  resolved "https://registry.yarnpkg.com/@types/sinon/-/sinon-9.0.3.tgz#c803f2ebf96db44230ce4e632235c279830edd45"
+  integrity sha512-NWVG++603tEDwmz5k0DwFR1hqP3iBmq5GYi6d+0KCQMQsfDEULF1D7xqZ+iXRJHeGwLVhM+Rv73uzIYuIUVlJQ==
   dependencies:
     "@types/sinonjs__fake-timers" "*"
 
@@ -3165,15 +2992,10 @@
   resolved "https://registry.yarnpkg.com/@types/sinonjs__fake-timers/-/sinonjs__fake-timers-6.0.1.tgz#681df970358c82836b42f989188d133e218c458e"
   integrity sha512-yYezQwGWty8ziyYLdZjwxyMb0CZR49h8JALHGrxjQHWlqGgc8kLdHEgWrgL0uZ29DMvEVBDnHU2Wg36zKSIUtA==
 
-"@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/uglify-js@*":
-  version "3.9.0"
-  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.9.0.tgz#4490a140ca82aa855ad68093829e7fd6ae94ea87"
-  integrity sha512-3ZcoyPYHVOCcLpnfZwD47KFLr8W/mpUcgjpf1M4Q78TMJIw7KMAHSjiCLJp1z3ZrBR9pTLbe191O0TldFK5zcw==
+  version "3.9.2"
+  resolved "https://registry.yarnpkg.com/@types/uglify-js/-/uglify-js-3.9.2.tgz#01992579debba674e1e359cd6bcb1a1d0ab2e02b"
+  integrity sha512-d6dIfpPbF+8B7WiCi2ELY7m0w1joD8cRW4ms88Emdb2w062NeEpbNCeWwVCgzLRpVG+5e74VFSg4rgJ2xXjEiQ==
   dependencies:
     source-map "^0.6.1"
 
@@ -3189,17 +3011,12 @@
   dependencies:
     vfile "*"
 
-"@types/yargs-parser@*":
-  version "15.0.0"
-  resolved "https://registry.yarnpkg.com/@types/yargs-parser/-/yargs-parser-15.0.0.tgz#cb3f9f741869e20cce330ffbeb9271590483882d"
-  integrity sha512-FA/BWv8t8ZWJ+gEOnLLd8ygxH/2UFbAvgEonyfN6yWGLKc7zVjbpl2Y4CTjid9h2RfgPP6SEt6uHwEOply00yw==
-
-"@types/yargs@^13.0.0":
-  version "13.0.8"
-  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-13.0.8.tgz#a38c22def2f1c2068f8971acb3ea734eb3c64a99"
-  integrity sha512-XAvHLwG7UQ+8M4caKIH0ZozIOYay5fQkAgyIXegXT9jPtdIGdhga+sUEdAr1CiG46aB+c64xQEYyEzlwWVTNzA==
+"@types/whatwg-url@^6.4.0":
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/@types/whatwg-url/-/whatwg-url-6.4.0.tgz#1e59b8c64bc0dbdf66d037cf8449d1c3d5270237"
+  integrity sha512-tonhlcbQ2eho09am6RHnHOgvtDfDYINd5rgxD+2YSkKENooVCFsWizJz139MQW/PV8FfClyKrNe9ZbdHrSCxGg==
   dependencies:
-    "@types/yargs-parser" "*"
+    "@types/node" "*"
 
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
@@ -3401,42 +3218,20 @@ accepts@^1.3.5, accepts@~1.3.4:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-globals@^3.0.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-3.1.0.tgz#fd8270f71fbb4996b004fa880ee5d46573a731bf"
-  integrity sha1-/YJw9x+7SZawBPqIDuXUZXOnMb8=
-  dependencies:
-    acorn "^4.0.4"
-
-acorn-jsx@^5.1.0, acorn-jsx@^5.2.0:
+acorn-jsx@^5.2.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@^7.0.0:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.1.1.tgz#345f0dffad5c735e7373d2fec9a1023e6a44b83e"
-  integrity sha512-wdlPY2tm/9XBr7QkKlq0WQVgiuGTX6YWPyRyBviSoScBuLfTVQhvwg6wJ369GJ/1nPfTLMfnrFIfjqVg6d+jQQ==
-
-acorn@^3.1.0:
-  version "3.3.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-3.3.0.tgz#45e37fb39e8da3f25baee3ff5369e2bb5f22017a"
-  integrity sha1-ReN/s56No/JbruP/U2niu18iAXo=
-
-acorn@^4.0.4, acorn@~4.0.2:
-  version "4.0.13"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-4.0.13.tgz#105495ae5361d697bd195c825192e1ad7f253787"
-  integrity sha1-EFSVrlNh1pe9GVyCUZLhrX8lN4c=
-
-acorn@^6.2.1:
+acorn@^6.4.1:
   version "6.4.1"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.4.1.tgz#531e58ba3f51b9dacb9a6646ca4debf5b14ca474"
   integrity sha512-ZVA9k326Nwrj3Cj9jlh3wGFutC2ZornPNARZwsNYqQYgN0EsV2d53w5RN/co65Ohn4sUAUtb1rSUAOD6XN9idA==
 
 acorn@^7.1.0, acorn@^7.1.1:
-  version "7.1.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.1.1.tgz#e35668de0b402f359de515c5482a1ab9f89a69bf"
-  integrity sha512-add7dgA5ppRPxCFJoAGfMDi7PIBXq1RtGo7BhbLaxwrXPOmw8gq48Y9ozT01hUKy9byMjlR20EJhu5zlkErEkg==
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-7.2.0.tgz#17ea7e40d7c8640ff54a694c889c26f31704effe"
+  integrity sha512-apwXVmYVpQ34m/i71vrApRrRKCWQnZZF1+npOD0WV5xZFfwWOmKGQ2RWlfdy9vWITsenisM8M0Qeq8agcFHNiQ==
 
 after@0.8.2:
   version "0.8.2"
@@ -3489,15 +3284,6 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.5.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-align-text@^0.1.1, align-text@^0.1.3:
-  version "0.1.4"
-  resolved "https://registry.yarnpkg.com/align-text/-/align-text-0.1.4.tgz#0cd90a561093f35d0a99256c22b7069433fad117"
-  integrity sha1-DNkKVhCT810KmSVsIrcGlDP60Rc=
-  dependencies:
-    kind-of "^3.0.2"
-    longest "^1.0.1"
-    repeat-string "^1.5.2"
-
 ansi-colors@3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/ansi-colors/-/ansi-colors-3.2.3.tgz#57d35b8686e851e2cc04c403f1c00203976a1813"
@@ -3814,16 +3600,6 @@ 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@0.12.4, ast-types@^0.12.2:
-  version "0.12.4"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.12.4.tgz#71ce6383800f24efc9a1a3308f3a6e420a0974d1"
-  integrity sha512-ky/YVYCbtVAS8TdMIaTiPFHwEpRB5z1hctepJplTr3UW5q8TDrpIMCILyk8pmLxGtn2KCtC/lSn7zOsaI7nzDw==
-
-ast-types@0.13.3:
-  version "0.13.3"
-  resolved "https://registry.yarnpkg.com/ast-types/-/ast-types-0.13.3.tgz#50da3f28d17bdbc7969a3a2d83a0e4a72ae755a7"
-  integrity sha512-XTZ7xGML849LkQP86sWdQzfhwbt3YwIO6MqbX9mUNYY98VKaaVZP7YNNm70IpwecbkkxmfC5IYAzOQ/2p29zRA==
-
 astral-regex@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-1.0.0.tgz#6c8c3fb827dd43ee3918f27b82782ab7658a6fd9"
@@ -3897,11 +3673,6 @@ axios@^0.18.0:
     follow-redirects "1.5.10"
     is-buffer "^2.0.2"
 
-babel-core@^7.0.0-bridge.0:
-  version "7.0.0-bridge.0"
-  resolved "https://registry.yarnpkg.com/babel-core/-/babel-core-7.0.0-bridge.0.tgz#95a492ddd90f9b4e9a4a1da14eb335b87b634ece"
-  integrity sha512-poPX9mZH/5CSanm50Q+1toVci6pv5KSRv/5TWCwtzQS5XEwn40BcCrgIeMFWP9CKKIniKXNxoIOnOq4VVlGXhg==
-
 babel-eslint@^10.0.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/babel-eslint/-/babel-eslint-10.1.0.tgz#6968e568a910b78fb3779cdd8b6ac2f479943232"
@@ -3933,13 +3704,13 @@ babel-extract-comments@^1.0.0:
   dependencies:
     babylon "^6.18.0"
 
-babel-plugin-apply-mdx-type-prop@^1.5.8:
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.5.8.tgz#f5ff6d9d7a7fcde0e5f5bd02d3d3cd10e5cca5bf"
-  integrity sha512-xYp5F9mAnZdDRFSd1vF3XQ0GQUbIulCpnuht2jCmK30GAHL8szVL7TgzwhEGamQ6yJmP/gEyYNM9OR5D2n26eA==
+babel-plugin-apply-mdx-type-prop@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-apply-mdx-type-prop/-/babel-plugin-apply-mdx-type-prop-1.6.1.tgz#7eaf057300f91e2dbce3142001131f578605c843"
+  integrity sha512-chjmLo1x7fCpDRICGUlbkwf2E6sMVG9jjG6PtPBWnQfMEjgV03Gh0jSVGbZJsEUxcMqOpHSsIXvPz1sYip6X3g==
   dependencies:
     "@babel/helper-plugin-utils" "7.8.3"
-    "@mdx-js/util" "^1.5.8"
+    "@mdx-js/util" "^1.6.1"
 
 babel-plugin-bundled-import-meta@^0.3.2:
   version "0.3.2"
@@ -3949,7 +3720,7 @@ babel-plugin-bundled-import-meta@^0.3.2:
     "@babel/plugin-syntax-import-meta" "^7.2.0"
     "@babel/template" "^7.7.0"
 
-babel-plugin-dynamic-import-node@^2.3.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==
@@ -3972,14 +3743,14 @@ babel-plugin-emotion@^10.0.27:
     find-root "^1.1.0"
     source-map "^0.5.7"
 
-babel-plugin-extract-import-names@^1.5.8:
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.5.8.tgz#418057261346451d689dff5036168567036b8cf6"
-  integrity sha512-LcLfP8ZRBZMdMAXHLugyvvd5PY0gMmLMWFogWAUsG32X6TYW2Eavx+il2bw73KDbW+UdCC1bAJ3NuU25T1MI3g==
+babel-plugin-extract-import-names@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/babel-plugin-extract-import-names/-/babel-plugin-extract-import-names-1.6.1.tgz#fc913f9fdb1aa1590ec96269a03c1ce98e8b76b1"
+  integrity sha512-u0uRrPyygx4RlNva1aqz7DM9UBpsQJQZ4NyakHVJF18s73H/iiyXuc+X7k+9tHeN0WKLsohQUGzGLli6z5a0Zw==
   dependencies:
     "@babel/helper-plugin-utils" "7.8.3"
 
-babel-plugin-istanbul@^5.1.0, babel-plugin-istanbul@^5.1.4:
+babel-plugin-istanbul@^5.1.4:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-5.2.0.tgz#df4ade83d897a92df069c4d9a25cf2671293c854"
   integrity sha512-5LphC0USA8t4i1zCtjbbNb6jJj/9+X6P37Qfirc/70EQ34xKlMW+a1RHGwxGI+SwWpNwZ27HqvzAobeqaXwiZw==
@@ -4042,16 +3813,6 @@ babel-runtime@6.26.0, babel-runtime@^6.18.0, babel-runtime@^6.23.0, babel-runtim
     core-js "^2.4.0"
     regenerator-runtime "^0.11.0"
 
-babel-types@^6.26.0:
-  version "6.26.0"
-  resolved "https://registry.yarnpkg.com/babel-types/-/babel-types-6.26.0.tgz#a3b073f94ab49eb6fa55cd65227a334380632497"
-  integrity sha1-o7Bz+Uq0nrb6Vc1lInozQ4BjJJc=
-  dependencies:
-    babel-runtime "^6.26.0"
-    esutils "^2.0.2"
-    lodash "^4.17.4"
-    to-fast-properties "^1.0.3"
-
 babylon@7.0.0-beta.44:
   version "7.0.0-beta.44"
   resolved "https://registry.yarnpkg.com/babylon/-/babylon-7.0.0-beta.44.tgz#89159e15e6e30c5096e22d738d8c0af8a0e8ca1d"
@@ -4170,11 +3931,16 @@ bluebird@^3.3.0, bluebird@^3.5.1, bluebird@^3.5.3, bluebird@^3.5.5:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   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:
+bn.js@^4.0.0, bn.js@^4.1.0, 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==
 
+bn.js@^5.1.1:
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/bn.js/-/bn.js-5.1.1.tgz#48efc4031a9c4041b9c99c6941d903463ab62eb5"
+  integrity sha512-IUTD/REb78Z2eodka1QZyyEk66pciRcP6Sroka0aI3tG/iwIdYLrBD62RsubR7vqdt3WyX8p4jxeatzmRSphtA==
+
 body-parser@^1.16.1:
   version "1.19.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.0.tgz#96b2709e57c9c4e09a6fd66a8fd979844f69f08a"
@@ -4220,7 +3986,7 @@ braces@^2.3.1, braces@^2.3.2:
     split-string "^3.0.2"
     to-regex "^3.0.1"
 
-braces@^3.0.1, braces@^3.0.2, braces@~3.0.2:
+braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
   integrity sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==
@@ -4276,7 +4042,7 @@ browserify-des@^1.0.0:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
-browserify-rsa@^4.0.0:
+browserify-rsa@^4.0.0, browserify-rsa@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/browserify-rsa/-/browserify-rsa-4.0.1.tgz#21e0abfaf6f2029cf2fafb133567a701d4135524"
   integrity sha1-IeCr+vbyApzy+vsTNWenAdQTVSQ=
@@ -4285,17 +4051,19 @@ browserify-rsa@^4.0.0:
     randombytes "^2.0.1"
 
 browserify-sign@^4.0.0:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.0.4.tgz#aa4eb68e5d7b658baa6bf6a57e630cbd7a93d298"
-  integrity sha1-qk62jl17ZYuqa/alfmMMvXqT0pg=
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/browserify-sign/-/browserify-sign-4.2.0.tgz#545d0b1b07e6b2c99211082bf1b12cce7a0b0e11"
+  integrity sha512-hEZC1KEeYuoHRqhGhTy6gWrpJA3ZDjFWv0DE61643ZnOXAKJb3u7yWcrU0mMc9SwAqK1n7myPGndkp0dFG7NFA==
   dependencies:
-    bn.js "^4.1.1"
-    browserify-rsa "^4.0.0"
-    create-hash "^1.1.0"
-    create-hmac "^1.1.2"
-    elliptic "^6.0.0"
-    inherits "^2.0.1"
-    parse-asn1 "^5.0.0"
+    bn.js "^5.1.1"
+    browserify-rsa "^4.0.1"
+    create-hash "^1.2.0"
+    create-hmac "^1.1.7"
+    elliptic "^6.5.2"
+    inherits "^2.0.4"
+    parse-asn1 "^5.1.5"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
 
 browserify-zlib@^0.2.0:
   version "0.2.0"
@@ -4313,17 +4081,7 @@ browserslist-useragent@^3.0.2:
     semver "^7.3.2"
     useragent "^2.3.0"
 
-browserslist@^4.0.0, browserslist@^4.8.5, browserslist@^4.9.1:
-  version "4.11.1"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.11.1.tgz#92f855ee88d6e050e7e7311d987992014f1a1f1b"
-  integrity sha512-DCTr3kDrKEYNw6Jb9HFxVLQNaue8z+0ZfRBRjmCunKDEXEBajKDj2Y+Uelg+Pi29OnvaSGwjOsnRyNEkXzHg5g==
-  dependencies:
-    caniuse-lite "^1.0.30001038"
-    electron-to-chromium "^1.3.390"
-    node-releases "^1.1.53"
-    pkg-up "^2.0.0"
-
-browserslist@^4.12.0:
+browserslist@^4.0.0, browserslist@^4.11.1, browserslist@^4.12.0, browserslist@^4.8.5, browserslist@^4.9.1:
   version "4.12.0"
   resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.12.0.tgz#06c6d5715a1ede6c51fc39ff67fd647f740b656d"
   integrity sha512-UH2GkcEDSI0k/lRkuDSzFl9ZZ87skSy9w2XAn1MsZnL+4c4rqbBd3e82UWHbYDpztABrPBhZsTEeuxVfHppqDg==
@@ -4350,13 +4108,6 @@ browserstack@~1.5.1:
   dependencies:
     https-proxy-agent "^2.2.1"
 
-bser@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/bser/-/bser-2.1.1.tgz#e6787da20ece9d07998533cfd9de6f5c38f4bc05"
-  integrity sha512-gQxTNE/GAfIIrmHLUE3oJyp5FO6HRBfhjnw4/wMmA63ZGDJnWBmgY/lyQBpnDUkGmAhbSe39tx2d/iTOAfglwQ==
-  dependencies:
-    node-int64 "^0.4.0"
-
 btoa-lite@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/btoa-lite/-/btoa-lite-1.0.0.tgz#337766da15801210fdd956c22e9c6891ab9d0337"
@@ -4593,10 +4344,14 @@ camelcase-keys@^4.0.0:
     map-obj "^2.0.0"
     quick-lru "^1.0.0"
 
-camelcase@^1.0.2:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"
-  integrity sha1-m7UwTS4LVmmLLHWLCKPqqdqlijk=
+camelcase-keys@^6.2.2:
+  version "6.2.2"
+  resolved "https://registry.yarnpkg.com/camelcase-keys/-/camelcase-keys-6.2.2.tgz#5e755d6ba51aa223ec7d3d52f25778210f9dc3c0"
+  integrity sha512-YrwaA0vEKazPBkn0ipTiMpSajYDSe+KjQfrjhcBMxJt/znbvlHd8Pw/Vamaz5EB4Wfhs3SUR3Z9mwRu/P3s3Yg==
+  dependencies:
+    camelcase "^5.3.1"
+    map-obj "^4.0.0"
+    quick-lru "^4.0.1"
 
 camelcase@^2.0.0:
   version "2.1.1"
@@ -4613,10 +4368,10 @@ camelcase@^5.0.0, camelcase@^5.3.1:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-5.3.1.tgz#e3c9b31569e106811df242f715725a1f4c494320"
   integrity sha512-L28STB170nwWS63UjtlEOE3dldQApaJXZkOI1uMFfzf3rRuPegHaHesyee+YxQ+W6SvRDQV6UrdOdRiR153wJg==
 
-can-use-dom@^0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/can-use-dom/-/can-use-dom-0.1.0.tgz#22cc4a34a0abc43950f42c6411024a3f6366b45a"
-  integrity sha1-IsxKNKCrxDlQ9CxkEQJKP2NmtFo=
+camelcase@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-6.0.0.tgz#5259f7c30e35e278f1bdc2a4d91230b37cad981e"
+  integrity sha512-8KMDF1Vz2gzOq54ONPJS65IvTUaB1cHJ2DMM7MbPmLZljDH1qpzzLsWdiN9pHh6qvkRVDTi/07+eNGch/oLU4w==
 
 caniuse-api@^3.0.0:
   version "3.0.0"
@@ -4628,22 +4383,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001033, caniuse-lite@^1.0.30001038:
-  version "1.0.30001043"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001043.tgz#1b561de27aefbe6ff99e41866b8d7d87840c513b"
-  integrity sha512-MrBDRPJPDBYwACtSQvxg9+fkna5jPXhJlKmuxenl/ml9uf8LHKlDmLpElu+zTW/bEz7lC1m0wTDD7jiIB+hgFg==
-
-caniuse-lite@^1.0.30001043:
-  version "1.0.30001048"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001048.tgz#4bb4f1bc2eb304e5e1154da80b93dee3f1cf447e"
-  integrity sha512-g1iSHKVxornw0K8LG9LLdf+Fxnv7T1Z+mMsf0/YYLclQX4Cd522Ap0Lrw6NFqHgezit78dtyWxzlV2Xfc7vgRg==
-
-capture-exit@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/capture-exit/-/capture-exit-2.0.0.tgz#fb953bfaebeb781f62898239dabb426d08a509a4"
-  integrity sha512-PiT/hQmTonHhl/HFGN+Lx3JJUznrVYJ3+AQsnthneZbvW7x+f08Tk7yLJTLEOUvBTbduLeeBkxEaYXUOUrRq6g==
-  dependencies:
-    rsvp "^4.8.4"
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001033, caniuse-lite@^1.0.30001043:
+  version "1.0.30001062"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001062.tgz#d814b648338504b315222ace6f1a533d9a55e390"
+  integrity sha512-ei9ZqeOnN7edDrb24QfJ0OZicpEbsWxv7WusOiQGz/f2SfvBgHHbOEwBJ8HKGVSyx8Z6ndPjxzR6m0NQq+0bfw==
 
 caseless@~0.12.0:
   version "0.12.0"
@@ -4655,14 +4398,6 @@ ccount@^1.0.0, ccount@^1.0.3:
   resolved "https://registry.yarnpkg.com/ccount/-/ccount-1.0.5.tgz#ac82a944905a65ce204eb03023157edf29425c17"
   integrity sha512-MOli1W+nfbPLlKEhInaxhRdp7KVLFxLN5ykwzHgLsLI3H3gs5jjFAK4Eoj3OzzcxCtumDaI8onoVDeQyWaNTkw==
 
-center-align@^0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/center-align/-/center-align-0.1.3.tgz#aa0d32629b6ee972200411cbd4461c907bc2b7ad"
-  integrity sha1-qg0yYptu6XIgBBHL1EYckHvCt60=
-  dependencies:
-    align-text "^0.1.3"
-    lazy-cache "^1.0.3"
-
 chai-a11y-axe@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/chai-a11y-axe/-/chai-a11y-axe-1.2.3.tgz#8ad34be265023ac9ea9a40ff5c7fe7723ff0682d"
@@ -4751,13 +4486,6 @@ character-entities@^1.0.0:
   resolved "https://registry.yarnpkg.com/character-entities/-/character-entities-1.2.4.tgz#e12c3939b7eaf4e5b15e7ad4c5e28e1d48c5b16b"
   integrity sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==
 
-character-parser@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/character-parser/-/character-parser-2.2.0.tgz#c7ce28f36d4bcd9744e5ffc2c5fcde1c73261fc0"
-  integrity sha1-x84o821LzZdE5f/CxfzeHHMmH8A=
-  dependencies:
-    is-regex "^1.0.3"
-
 character-reference-invalid@^1.0.0:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560"
@@ -4814,7 +4542,7 @@ chokidar@^2.1.8:
   optionalDependencies:
     fsevents "^1.2.7"
 
-chokidar@^3.0.0:
+chokidar@^3.0.0, chokidar@^3.4.0:
   version "3.4.0"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.4.0.tgz#b30611423ce376357c765b9b8f904b9fba3c0be8"
   integrity sha512-aXAaho2VJtisB/1fg1+3nlLJqGOuewTzQpd/Tz0yTg2R0e4IGtshYvtjowyEumcBv2z+y4+kc75Mz7j5xJskcQ==
@@ -4842,9 +4570,9 @@ chrome-trace-event@^1.0.2:
     tslib "^1.9.0"
 
 ci-env@^1.4.0:
-  version "1.12.0"
-  resolved "https://registry.yarnpkg.com/ci-env/-/ci-env-1.12.0.tgz#8b430c4c8fcfe730cb8ac330836bffaa6e5f2ab8"
-  integrity sha512-4dS9YjX4kpaFmkJWZPuDPK3WlPKdMjx/3JH39vyHj+G4/ED2DCgHQLbh9tKBQjwAwR/sGHOqIVMTlMUZcfJPWw==
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/ci-env/-/ci-env-1.15.0.tgz#68fec4fcd6eaa89ddcd4e9ac8d0766b7495c4ac6"
+  integrity sha512-pXv9CQo9ORLqY6tshecGkj3cRkbHKcHU8RnPf269knEL9ggvpg954Qi+Ow0DpTOk1/Bo5hySxyLHdt44CImMJw==
 
 ci-info@^2.0.0:
   version "2.0.0"
@@ -4869,7 +4597,7 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-clean-css@^4.1.11, clean-css@^4.2.1, clean-css@^4.2.3:
+clean-css@^4.2.1, clean-css@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.3.tgz#507b5de7d97b48ee53d84adb0160ff6216380f78"
   integrity sha512-VcMWDN54ZN/DS+g58HYL5/n4Zrqe8vHJpGA8KdgUXFU4fuP/aHNw8eld9SyEIyabIMJX/0RaY/fplOo5hYLSFA==
@@ -4920,15 +4648,6 @@ clipboard@^2.0.0:
     select "^1.1.2"
     tiny-emitter "^2.0.0"
 
-cliui@^2.1.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cliui/-/cliui-2.1.0.tgz#4b475760ff80264c762c3a1719032e91c7fea0d1"
-  integrity sha1-S0dXYP+AJkx2LDoXGQMukcf+oNE=
-  dependencies:
-    center-align "^0.1.1"
-    right-align "^0.1.1"
-    wordwrap "0.0.2"
-
 cliui@^4.0.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/cliui/-/cliui-4.1.0.tgz#348422dbe82d800b3022eef4f6ac10bf2e4d1b49"
@@ -5037,7 +4756,7 @@ color-support@^1.1.3:
   resolved "https://registry.yarnpkg.com/color-support/-/color-support-1.1.3.tgz#93834379a1cc9a0c61f82f52f0d04322251bd5a2"
   integrity sha512-qiBjkpbMLO/HL68y+lh4q0/O1MZFj2RX6X/KmMa3+gJD3z+WwI1ZzDHysvqHGS3mP6mznPckpXmw1nI9cJjyRg==
 
-colors@^1.1.0, colors@^1.1.2:
+colors@^1.1.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
   integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
@@ -5110,9 +4829,9 @@ commondir@^1.0.1:
   integrity sha1-3dgA2gxmEnOTzKWVDqloo6rxJTs=
 
 compare-func@^1.3.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.2.tgz#99dd0ba457e1f9bc722b12c08ec33eeab31fa648"
-  integrity sha1-md0LpFfh+bxyKxLAjsM+6rMfpkg=
+  version "1.3.4"
+  resolved "https://registry.yarnpkg.com/compare-func/-/compare-func-1.3.4.tgz#6b07c4c5e8341119baf44578085bda0f4a823516"
+  integrity sha512-sq2sWtrqKPkEXAC8tEJA1+BqAH9GbFkGBtUOqrUX57VSfwp8xyktctk+uLoRy5eccTdxzDcVIztlYDpKs3Jv1Q==
   dependencies:
     array-ify "^1.0.0"
     dot-prop "^3.0.0"
@@ -5207,16 +4926,6 @@ console-control-strings@^1.0.0, console-control-strings@~1.1.0:
   resolved "https://registry.yarnpkg.com/console-control-strings/-/console-control-strings-1.1.0.tgz#3d7cf4464db6446ea644bf4b39507f9851008e8e"
   integrity sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=
 
-constantinople@^3.0.1, constantinople@^3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/constantinople/-/constantinople-3.1.2.tgz#d45ed724f57d3d10500017a7d3a889c1381ae647"
-  integrity sha512-yePcBqEFhLOqSBtwYOGGS1exHo/s1xjekXiinh4itpNQGCu4KA1euPh1fg07N2wMITZXQkBz75Ntdt1ctGZouw==
-  dependencies:
-    "@types/babel-types" "^7.0.0"
-    "@types/babylon" "^6.16.2"
-    babel-types "^6.26.0"
-    babylon "^6.18.0"
-
 constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/constants-browserify/-/constants-browserify-1.0.0.tgz#c20b96d8c617748aaf1c16021760cd27fcb8cb75"
@@ -5248,9 +4957,9 @@ conventional-changelog-angular@^1.3.3:
     q "^1.5.1"
 
 conventional-changelog-angular@^5.0.3:
-  version "5.0.6"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.6.tgz#269540c624553aded809c29a3508fdc2b544c059"
-  integrity sha512-QDEmLa+7qdhVIv8sFZfVxU1VSyVvnXPsxq8Vam49mKUcO1Z8VTLEJk9uI21uiJUsnmm0I4Hrsdc9TgkOQo9WSA==
+  version "5.0.10"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-angular/-/conventional-changelog-angular-5.0.10.tgz#5cf7b00dd315b6a6a558223c80d5ef24ddb34205"
+  integrity sha512-k7RPPRs0vp8+BtPsM9uDxRl6KcgqtCJmzRD1wRtgqmhQ96g8ifBGo9O/TZBG23jqlXS/rg8BKRDELxfnQQGiaA==
   dependencies:
     compare-func "^1.3.1"
     q "^1.5.1"
@@ -5275,30 +4984,30 @@ conventional-changelog-core@^3.1.6:
     through2 "^3.0.0"
 
 conventional-changelog-preset-loader@^2.1.1:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.0.tgz#580fa8ab02cef22c24294d25e52d7ccd247a9a6a"
-  integrity sha512-/rHb32J2EJnEXeK4NpDgMaAVTFZS3o1ExmjKMtYVgIC4MQn0vkNSbYpdGRotkfGGRWiqk3Ri3FBkiZGbAfIfOQ==
+  version "2.3.4"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-preset-loader/-/conventional-changelog-preset-loader-2.3.4.tgz#14a855abbffd59027fd602581f1f34d9862ea44c"
+  integrity sha512-GEKRWkrSAZeTq5+YjUZOYxdHq+ci4dNwHvpaBC3+ENalzFWuCWa9EZXSuZBpkr72sMdKB+1fyDV4takK1Lf58g==
 
 conventional-changelog-writer@^4.0.6:
-  version "4.0.11"
-  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-4.0.11.tgz#9f56d2122d20c96eb48baae0bf1deffaed1edba4"
-  integrity sha512-g81GQOR392I+57Cw3IyP1f+f42ME6aEkbR+L7v1FBBWolB0xkjKTeCWVguzRrp6UiT1O6gBpJbEy2eq7AnV1rw==
+  version "4.0.16"
+  resolved "https://registry.yarnpkg.com/conventional-changelog-writer/-/conventional-changelog-writer-4.0.16.tgz#ca10f2691a8ea6d3c2eb74bd35bcf40aa052dda5"
+  integrity sha512-jmU1sDJDZpm/dkuFxBeRXvyNcJQeKhGtVcFFkwTphUAzyYWcwz2j36Wcv+Mv2hU3tpvLMkysOPXJTLO55AUrYQ==
   dependencies:
     compare-func "^1.3.1"
-    conventional-commits-filter "^2.0.2"
+    conventional-commits-filter "^2.0.6"
     dateformat "^3.0.0"
-    handlebars "^4.4.0"
+    handlebars "^4.7.6"
     json-stringify-safe "^5.0.1"
     lodash "^4.17.15"
-    meow "^5.0.0"
+    meow "^7.0.0"
     semver "^6.0.0"
     split "^1.0.0"
     through2 "^3.0.0"
 
-conventional-commits-filter@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.2.tgz#f122f89fbcd5bb81e2af2fcac0254d062d1039c1"
-  integrity sha512-WpGKsMeXfs21m1zIw4s9H5sys2+9JccTzpN6toXtxhpw2VNF2JUXwIakthKBy+LN4DvJm+TzWhxOMWOs1OFCFQ==
+conventional-commits-filter@^2.0.2, conventional-commits-filter@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/conventional-commits-filter/-/conventional-commits-filter-2.0.6.tgz#0935e1240c5ca7698329affee1b6a46d33324c4c"
+  integrity sha512-4g+sw8+KA50/Qwzfr0hL5k5NWxqtrOVw4DDk3/h6L85a9Gz0/Eqp3oP+CWCNfesBvZZZEFHF7OTEbRe+yYSyKw==
   dependencies:
     lodash.ismatch "^4.4.0"
     modify-values "^1.0.0"
@@ -5317,14 +5026,14 @@ conventional-commits-parser@^2.1.0:
     trim-off-newlines "^1.0.0"
 
 conventional-commits-parser@^3.0.3:
-  version "3.0.8"
-  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.0.8.tgz#23310a9bda6c93c874224375e72b09fb275fe710"
-  integrity sha512-YcBSGkZbYp7d+Cr3NWUeXbPDFUN6g3SaSIzOybi8bjHL5IJ5225OSCxJJ4LgziyEJ7AaJtE9L2/EU6H7Nt/DDQ==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/conventional-commits-parser/-/conventional-commits-parser-3.1.0.tgz#10140673d5e7ef5572633791456c5d03b69e8be4"
+  integrity sha512-RSo5S0WIwXZiRxUGTPuYFbqvrR4vpJ1BDdTlthFgvHt5kEdnd1+pdvwWphWn57/oIl4V72NMmOocFqqJ8mFFhA==
   dependencies:
     JSONStream "^1.0.4"
     is-text-path "^1.0.1"
     lodash "^4.17.15"
-    meow "^5.0.0"
+    meow "^7.0.0"
     split2 "^2.0.0"
     through2 "^3.0.0"
     trim-off-newlines "^1.0.0"
@@ -5343,7 +5052,7 @@ conventional-recommended-bump@^5.0.0:
     meow "^4.0.0"
     q "^1.5.1"
 
-convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.7.0:
+convert-source-map@^1.5.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==
@@ -5403,11 +5112,6 @@ core-js@^2.4.0, core-js@^2.5.0, core-js@^2.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
   integrity sha512-5wjnpaT/3dV+XB4borEsnAYQchn00XSgTAWKDkEqv+K8KevjbzmofK6hfJ9TZIlpj2N0xQpazy7PiRQiWHqzWg==
 
-core-js@^3.0.1:
-  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"
@@ -5442,7 +5146,7 @@ create-ecdh@^4.0.0:
     bn.js "^4.1.0"
     elliptic "^6.0.0"
 
-create-hash@^1.1.0, create-hash@^1.1.2:
+create-hash@^1.1.0, create-hash@^1.1.2, create-hash@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/create-hash/-/create-hash-1.2.0.tgz#889078af11a63756bcfb59bd221996be3a9ef196"
   integrity sha512-z00bCGNHDG8mHAkP7CtT1qVu+bFQUPjYq/4Iv3C3kWjTFV10zIjfSoeqXo9Asws8gwSHDGj/hl2u4OGIjapeCg==
@@ -5453,7 +5157,7 @@ create-hash@^1.1.0, create-hash@^1.1.2:
     ripemd160 "^2.0.1"
     sha.js "^2.4.0"
 
-create-hmac@^1.1.0, create-hmac@^1.1.2, create-hmac@^1.1.4:
+create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
   version "1.1.7"
   resolved "https://registry.yarnpkg.com/create-hmac/-/create-hmac-1.1.7.tgz#69170c78b3ab957147b2b8b04572e47ead2243ff"
   integrity sha512-MJG9liiZ+ogc4TzUwuvbER1JRdgvUFSB5+VR/g5h82fGaIRWMWddtKBHi7/sVhfjQZ6SehlyhvQYrcYkaUIpLg==
@@ -5528,7 +5232,7 @@ css-selector-parser@^1.0.0:
   resolved "https://registry.yarnpkg.com/css-selector-parser/-/css-selector-parser-1.4.1.tgz#03f9cb8a81c3e5ab2c51684557d5aaf6d2569759"
   integrity sha512-HYPSb7y/Z7BNDCOrakL4raGO2zltZkbeXyAd6Tg9obzix6QhzxCotdBl6VT0Dv4vZfJGVz3WL/xaEI9Ly3ul0g==
 
-csstype@^2.2.0, csstype@^2.5.7:
+csstype@^2.5.7:
   version "2.6.10"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.10.tgz#e63af50e66d7c266edb6b32909cfd0aabe03928b"
   integrity sha512-D34BqZU4cIlMCY93rZHbrq9pjTAQJ3U8S8rfBqjwHxkGPThWFjzZDQpgMJY0QViLxth6ZKYiwFBo14RdN44U/w==
@@ -5584,11 +5288,6 @@ dateformat@^3.0.0:
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
   integrity sha512-jyCETtSl3VMZMWeRo7iY1FL19ges1t55hMo5yaam4Jrsm5EPL89UQkoQRyiI+Yf4k8r2ZpdngkV8hr1lIdjb3Q==
 
-de-indent@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/de-indent/-/de-indent-1.0.2.tgz#b2038e846dc33baa5796128d0804b455b8c1e21d"
-  integrity sha1-sgOOhG3DO6pXlhKNCAS0VbjB4h0=
-
 debounce@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/debounce/-/debounce-1.2.0.tgz#44a540abc0ea9943018dc0eaa95cce87f65cd131"
@@ -5627,7 +5326,7 @@ debuglog@^1.0.1:
   resolved "https://registry.yarnpkg.com/debuglog/-/debuglog-1.0.1.tgz#aa24ffb9ac3df9a2351837cfb2d279360cd78492"
   integrity sha1-qiT/uaw9+aI1GDfPstJ5NgzXhJI=
 
-decamelize-keys@^1.0.0:
+decamelize-keys@^1.0.0, decamelize-keys@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/decamelize-keys/-/decamelize-keys-1.1.0.tgz#d171a87933252807eb3cb61dc1c1445d078df2d9"
   integrity sha1-0XGoeTMlKAfrPLYdwcFEXQeN8tk=
@@ -5635,7 +5334,7 @@ decamelize-keys@^1.0.0:
     decamelize "^1.1.0"
     map-obj "^1.0.0"
 
-decamelize@^1.0.0, decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
+decamelize@^1.1.0, decamelize@^1.1.2, decamelize@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/decamelize/-/decamelize-1.2.0.tgz#f6534d15148269b20352e7bee26f501f9a191290"
   integrity sha1-9lNNFRSCabIDUue+4m9QH5oZEpA=
@@ -5821,11 +5520,6 @@ detect-libc@^1.0.3:
   resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
   integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
 
-detect-node@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
-  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
-
 dezalgo@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.3.tgz#7f742de066fc748bc8db820569dddce49bf0d456"
@@ -5875,11 +5569,6 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
-doctypes@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/doctypes/-/doctypes-1.1.0.tgz#ea80b106a87538774e8a3a4a5afe293de489e0a9"
-  integrity sha1-6oCxBqh1OHdOijpKWv4pPeSJ4Kk=
-
 dom-serialize@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/dom-serialize/-/dom-serialize-2.2.1.tgz#562ae8999f44be5ea3076f5419dcd59eb43ac95b"
@@ -5921,9 +5610,9 @@ domhandler@^3.0.0:
     domelementtype "^2.0.1"
 
 domutils@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.0.0.tgz#15b8278e37bfa8468d157478c58c367718133c08"
-  integrity sha512-n5SelJ1axbO636c2yUtOGia/IcJtVtlhQbFiVDBZHKV5ReJO1ViX7sFEemtuyoAnBxk5meNSYgA8V4s0271efg==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.1.0.tgz#7ade3201af43703fde154952e3a868eb4b635f16"
+  integrity sha512-CD9M0Dm1iaHfQ1R/TI+z3/JWp/pgub0j4jIQKH89ARR4ATAV2nbaOQS5XxU9maJP5jHaPdDDQSEHuE2UmpUTKg==
   dependencies:
     dom-serializer "^0.2.1"
     domelementtype "^2.0.1"
@@ -6020,22 +5709,17 @@ ejs@^2.6.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.7.4.tgz#48661287573dcc53e366c7a1ae52c3a120eec9ba"
   integrity sha512-7vmuyh5+kuUyJKePhQfRQBhXV5Ce+RnaeeQArKu1EAMpL3WbgMt5WG6uQZpEVvYSSsxMXRKOewtDk9RaTKXRlA==
 
-electron-to-chromium@^1.3.390:
-  version "1.3.413"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.413.tgz#9c457a4165c7b42e59d66dff841063eb9bfe5614"
-  integrity sha512-Jm1Rrd3siqYHO3jftZwDljL2LYQafj3Kki5r+udqE58d0i91SkjItVJ5RwlJn9yko8i7MOcoidVKjQlgSdd1hg==
-
 electron-to-chromium@^1.3.413:
-  version "1.3.420"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.420.tgz#e95b731f475433d29d2835a200dab413e45ba819"
-  integrity sha512-iVmQhf25F+5bdAyDrfOmCMjyLlIwsr9UT/LyYPQ3J1Vrypr9IgHf2PxqlsnzicnRAYDev6S9cl1tYlDHZUHY/g==
+  version "1.3.446"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.446.tgz#12c336bc858e04d6b614a488f32f2dd89561601f"
+  integrity sha512-CLQaFuvkKqR9FD2G3cJrr1fV7DRMXiAKWLP2F8cxtvvtzAS7Tubt0kF47/m+uE61kiT+I7ZEn7HqLnmWdOhmuA==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/elegant-spinner/-/elegant-spinner-1.0.1.tgz#db043521c95d7e303fd8f345bedc3349cfb0729e"
   integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
 
-elliptic@^6.0.0:
+elliptic@^6.0.0, elliptic@^6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.2.tgz#05c5678d7173c049d8ca433552224a495d0e3762"
   integrity sha512-f4x70okzZbIQl/NSRLkI/+tteV/9WqL98zx+SQ69KbXxmVrmjwsNUPn/gYJJ0sHvEak24cZgHIPegRePAtA/xw==
@@ -6063,17 +5747,12 @@ 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==
 
-emojis-list@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
-  integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
-
 emojis-list@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-3.0.0.tgz#5570662046ad29e2e916e71aae260abdff4f6a78"
   integrity sha512-/kyM18EfinwXZbno9FyUGeFh87KC8HRQBQGildHZbEuRyWFOmv1U10o9BBp8XVZDVNNuQKyIGIu5ZYAAXJ0V2Q==
 
-emotion-theming@^10.0.19, emotion-theming@^10.0.7:
+emotion-theming@^10.0.7:
   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==
@@ -6165,9 +5844,9 @@ ent@~2.2.0:
   integrity sha1-6WQhkyWiHQX0RGai9obtbOX13R0=
 
 entities@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.0.tgz#68d6084cab1b079767540d80e56a39b423e4abf4"
-  integrity sha512-D9f7V0JSRwIxlRI2mjMqufDrRDnx8p+eEOz7aUM9SuvF8gsBzra0/6tbjl1m8eQHrZlYj6PxqE00hZ1SAIKPLw==
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/entities/-/entities-2.0.2.tgz#ac74db0bba8d33808bbf36809c3a5c3683531436"
+  integrity sha512-dmD3AvJQBUjKpcNkoqr+x+IF0SdRtPz9Vk0uTy4yWqga9ibB6s4v++QFWNohjiUGoMlF552ZvNyXDxz5iW0qmw==
 
 entities@~1.1.1:
   version "1.1.2"
@@ -6198,12 +5877,7 @@ error-ex@^1.2.0, error-ex@^1.3.1:
   dependencies:
     is-arrayish "^0.2.1"
 
-error-inject@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/error-inject/-/error-inject-1.0.0.tgz#e2b3d91b54aed672f309d950d154850fa11d4f37"
-  integrity sha1-4rPZG1Su1nLzCdlQ0VSFD6EdTzc=
-
-es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstract@^1.17.5:
+es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.5:
   version "1.17.5"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.17.5.tgz#d8c9d1d66c8981fb9200e2251d799eee92774ae9"
   integrity sha512-BR9auzDbySxOcfog0tLECW8l28eRGpDpU3Dm3Hp4q/N+VtLTmyj4EUN088XZWQDW/hzj6sYRDXeOFsaAODKvpg==
@@ -6220,10 +5894,10 @@ es-abstract@^1.17.0, es-abstract@^1.17.0-next.1, es-abstract@^1.17.2, es-abstrac
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
-es-dev-server@^1.46.2:
-  version "1.46.2"
-  resolved "https://registry.yarnpkg.com/es-dev-server/-/es-dev-server-1.46.2.tgz#f2a17cc7a5dab1e8a7fa212b586cb51f3abea32f"
-  integrity sha512-pqJ1bejSEbcxXFcMi4egkLaLWg5ASaxNeSRiGS9vpxu3S5f0aWX8XgYwifT6VeBpEHalkwb10prm/nvDCZKQlw==
+es-dev-server@^1.50.6:
+  version "1.50.6"
+  resolved "https://registry.yarnpkg.com/es-dev-server/-/es-dev-server-1.50.6.tgz#f3827993d151ee7a04ae61701670595d2b175623"
+  integrity sha512-9MZziicHR3pqIKvRYFe6al67RMsdEXiXvIzbMYZ6h2ATtr0P0IWpa7hyplK7rfIiF9zkrss6JPfrk+jVusKZSg==
   dependencies:
     "@babel/core" "^7.9.0"
     "@babel/plugin-proposal-dynamic-import" "^7.8.3"
@@ -6236,10 +5910,24 @@ es-dev-server@^1.46.2:
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
     "@babel/plugin-transform-template-literals" "^7.8.3"
     "@babel/preset-env" "^7.9.0"
-    "@open-wc/building-utils" "^2.16.3"
+    "@open-wc/building-utils" "^2.18.0"
     "@rollup/plugin-node-resolve" "^7.1.1"
     "@rollup/pluginutils" "^3.0.0"
+    "@types/babel__core" "^7.1.3"
+    "@types/browserslist" "^4.8.0"
+    "@types/browserslist-useragent" "^3.0.0"
+    "@types/caniuse-api" "^3.0.0"
+    "@types/command-line-args" "^5.0.0"
+    "@types/command-line-usage" "^5.0.1"
+    "@types/debounce" "^1.2.0"
+    "@types/koa" "^2.0.48"
+    "@types/koa-compress" "^2.0.9"
+    "@types/koa-etag" "^3.0.0"
+    "@types/koa-static" "^4.0.1"
+    "@types/lru-cache" "^5.1.0"
     "@types/minimatch" "^3.0.3"
+    "@types/path-is-inside" "^1.0.0"
+    "@types/whatwg-url" "^6.4.0"
     browserslist "^4.9.1"
     browserslist-useragent "^3.0.2"
     builtin-modules "^3.1.0"
@@ -6261,71 +5949,22 @@ es-dev-server@^1.46.2:
     koa-static "^5.0.0"
     lru-cache "^5.1.1"
     minimatch "^3.0.4"
-    opn "^5.4.0"
+    open "^7.0.3"
     parse5 "^5.1.1"
     path-is-inside "^1.0.2"
-    polyfills-loader "^1.5.4"
+    polyfills-loader "^1.6.1"
     portfinder "^1.0.21"
+    rollup "^2.7.2"
     strip-ansi "^5.2.0"
-    systemjs "^4.0.0"
-    useragent "^2.3.0"
-    whatwg-url "^7.0.0"
-
-es-dev-server@^1.47.0:
-  version "1.47.0"
-  resolved "https://registry.yarnpkg.com/es-dev-server/-/es-dev-server-1.47.0.tgz#d7d257b9a8f1177aa651465b00c47f18bfac6ee7"
-  integrity sha512-5+i5oD+dkE7dl1b+A65uyEky41ee7T85unjsA0S7d0mngOYR9YQjBdqG6lYCDVXNQBwMJ841OlU1WxM4jtWSWA==
-  dependencies:
-    "@babel/core" "^7.9.0"
-    "@babel/plugin-proposal-dynamic-import" "^7.8.3"
-    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-proposal-optional-chaining" "^7.9.0"
-    "@babel/plugin-syntax-class-properties" "^7.8.3"
-    "@babel/plugin-syntax-import-meta" "^7.8.3"
-    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
-    "@babel/plugin-syntax-numeric-separator" "^7.8.3"
-    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
-    "@babel/plugin-transform-template-literals" "^7.8.3"
-    "@babel/preset-env" "^7.9.0"
-    "@open-wc/building-utils" "^2.16.4"
-    "@rollup/plugin-node-resolve" "^7.1.1"
-    "@rollup/pluginutils" "^3.0.0"
-    "@types/minimatch" "^3.0.3"
-    browserslist "^4.9.1"
-    browserslist-useragent "^3.0.2"
-    builtin-modules "^3.1.0"
-    camelcase "^5.3.1"
-    caniuse-api "^3.0.0"
-    caniuse-lite "^1.0.30001033"
-    chokidar "^3.0.0"
-    command-line-args "^5.0.2"
-    command-line-usage "^6.1.0"
-    debounce "^1.2.0"
-    deepmerge "^4.2.2"
-    es-module-lexer "^0.3.13"
-    get-stream "^5.1.0"
-    is-stream "^2.0.0"
-    isbinaryfile "^4.0.2"
-    koa "^2.7.0"
-    koa-compress "^3.0.0"
-    koa-etag "^3.0.0"
-    koa-static "^5.0.0"
-    lru-cache "^5.1.1"
-    minimatch "^3.0.4"
-    opn "^5.4.0"
-    parse5 "^5.1.1"
-    path-is-inside "^1.0.2"
-    polyfills-loader "^1.5.6"
-    portfinder "^1.0.21"
-    strip-ansi "^5.2.0"
-    systemjs "^4.0.0"
+    systemjs "^6.3.1"
+    tslib "^1.11.1"
     useragent "^2.3.0"
     whatwg-url "^7.0.0"
 
 es-module-lexer@^0.3.13:
-  version "0.3.18"
-  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.3.18.tgz#b1a16f8166806c705216acb4517175bdb27d16b5"
-  integrity sha512-xu/9M+womMLsLbr6SVRfVYvGfgUJjZcDtz9c2DdE4ip9s7OhpLpyJcyLofLnI6E1fbqv9LuYGWKBcRK6B6lBFA==
+  version "0.3.19"
+  resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.3.19.tgz#91065ea884f436a2e140e5006b1aaf154ab23f71"
+  integrity sha512-EMav8JgMd66ltDkVTVjknEyjxwjnFg4dfoTJD2T8yH9qunGK3kMKsIqDDSEWied2bOdNm2zTOUcZaKTScjWFiQ==
 
 es-module-shims@^0.4.6:
   version "0.4.6"
@@ -6363,18 +6002,6 @@ 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.12.0:
-  version "1.14.1"
-  resolved "https://registry.yarnpkg.com/escodegen/-/escodegen-1.14.1.tgz#ba01d0c8278b5e95a9a45350142026659027a457"
-  integrity sha512-Bmt7NcRySdIfNPfU2ZoXDrrXsG9ZjvDxcAlMfDUgRBjLOWTuIACXPBFJH7Z+cLb40JeQco5toikyc9t9P8E9SQ==
-  dependencies:
-    esprima "^4.0.1"
-    estraverse "^4.2.0"
-    esutils "^2.0.2"
-    optionator "^0.8.1"
-  optionalDependencies:
-    source-map "~0.6.1"
-
 eslint-config-airbnb-base@^14.0.0:
   version "14.1.0"
   resolved "https://registry.yarnpkg.com/eslint-config-airbnb-base/-/eslint-config-airbnb-base-14.1.0.tgz#2ba4592dd6843258221d9bff2b6831bd77c874e4"
@@ -6533,7 +6160,7 @@ espree@^6.1.2:
     acorn-jsx "^5.2.0"
     eslint-visitor-keys "^1.1.0"
 
-esprima@^4.0.0, esprima@^4.0.1, esprima@~4.0.0:
+esprima@^4.0.0:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/esprima/-/esprima-4.0.1.tgz#13b04cdb3e6c5d19df91ab6987a8695619b0aa71"
   integrity sha512-eGuFFw7Upda+g4p+QHvnW0RyTX/SVeJBDM/gCtMARO0cLuT2HcEKnTPvhjV6aGeqrCB/sbNop0Kszm0jsaWU4A==
@@ -6552,7 +6179,7 @@ esrecurse@^4.1.0:
   dependencies:
     estraverse "^4.1.0"
 
-estraverse@^4.1.0, estraverse@^4.1.1, estraverse@^4.2.0:
+estraverse@^4.1.0, estraverse@^4.1.1:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/estraverse/-/estraverse-4.3.0.tgz#398ad3f3c5a24948be7725e83d11a7de28cdbd1d"
   integrity sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==
@@ -6601,9 +6228,9 @@ eventemitter3@^3.1.0:
   integrity sha512-tvtQIeLVHjDkJYnzf2dgVMxfuSGJeM/7UCG17TT4EumTfNtF+0nebF/4zWOIkCreAbtNqhGEboB6BWrwqNaw4Q==
 
 eventemitter3@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.0.tgz#d65176163887ee59f386d64c82610b696a4a74eb"
-  integrity sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.4.tgz#b5463ace635a083d018bdc7c917b4c5f10a85384"
+  integrity sha512-rlaVLnVxtxvoyLsQQFBx53YmXHDxRIzzTLbdfxqi4yocpSjAxXwkU0cScM5JgSKMqEhrZpnvQ2D9gjylR0AimQ==
 
 events@^3.0.0:
   version "3.1.0"
@@ -6618,11 +6245,6 @@ evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
     md5.js "^1.3.4"
     safe-buffer "^5.1.1"
 
-exec-sh@^0.3.2:
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/exec-sh/-/exec-sh-0.3.4.tgz#3a018ceb526cc6f6df2bb504b2bfe8e3a4934ec5"
-  integrity sha512-sEFIkc61v75sWeOe72qyrqg2Qg0OuLESziUDk/O/z2qgS15y2gWVFrI6f2Qn/qw/0/NCfCEsmNA4zOjkwEZT1A==
-
 execa@^0.7.0:
   version "0.7.0"
   resolved "https://registry.yarnpkg.com/execa/-/execa-0.7.0.tgz#944becd34cc41ee32a63a9faf27ad5a65fc59777"
@@ -6737,11 +6359,6 @@ fancy-log@^1.3.3:
     parse-node-version "^1.0.0"
     time-stamp "^1.0.0"
 
-fast-deep-equal@^2.0.1:
-  version "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"
@@ -6776,13 +6393,6 @@ fault@^1.0.2:
   dependencies:
     format "^0.2.0"
 
-fb-watchman@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/fb-watchman/-/fb-watchman-2.0.1.tgz#fc84fb39d2709cf3ff6d743706157bb5708a8a85"
-  integrity sha512-DkPJKQeY6kKwmuMretBhr7G6Vodr7bFwDYTXIkfG1gjvNpaxBTQV3PbXg6bR1c1UP4jPOX0jHUbbHANL9vRjVg==
-  dependencies:
-    bser "2.1.1"
-
 fbjs@^0.8.1:
   version "0.8.17"
   resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
@@ -6878,7 +6488,7 @@ finalhandler@1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.0"
 
-find-cache-dir@^2.0.0, find-cache-dir@^2.1.0:
+find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-2.1.0.tgz#8d0f94cd13fe43c6c7c261a0d86115ca918c05f7"
   integrity sha512-Tq6PixE0w/VMFfCgbONnkiQIVol/JJL7nRMi20fqzA4NRs9AfeqMGeRdPi3wIhYkxjeBaWh2rxwapn5Tu3IqOQ==
@@ -6921,6 +6531,14 @@ find-up@^2.0.0, find-up@^2.1.0:
   dependencies:
     locate-path "^2.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==
+  dependencies:
+    locate-path "^5.0.0"
+    path-exists "^4.0.0"
+
 flat-cache@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/flat-cache/-/flat-cache-2.0.1.tgz#5d296d6f04bda44a4630a301413bdbc2ec085ec0"
@@ -6942,11 +6560,6 @@ flatted@^2.0.0:
   resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.2.tgz#4575b21e2bcee7434aa9be662f4b7b5f9c2b5138"
   integrity sha512-r5wGx7YeOwNWNlCA0wQ86zKyDLMQr+/RB8xy74M4hTphfmjlijTSSXGuH8rnvKZnfT9i+75zmd8jcKdMR4O6jA==
 
-flow-parser@0.*:
-  version "0.123.0"
-  resolved "https://registry.yarnpkg.com/flow-parser/-/flow-parser-0.123.0.tgz#0fbcf4283335fca86d4cb2cf674dfbc5092a4efc"
-  integrity sha512-scMjcsICxtHm141rFTfWgKnNbz9MUubgc9kNSh+0xvTYIA/L+9AzlPRK0FMcfNiqQTWjn0IMGqiwySLzMZVvtw==
-
 flush-write-stream@^1.0.0, flush-write-stream@^1.0.2:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8"
@@ -6960,10 +6573,10 @@ fn-name@~2.0.1:
   resolved "https://registry.yarnpkg.com/fn-name/-/fn-name-2.0.1.tgz#5214d7537a4d06a4a301c0cc262feb84188002e7"
   integrity sha1-UhTXU3pNBqSjAcDMJi/rhBiAAuc=
 
-focus-lock@^0.6.3, focus-lock@^0.6.7:
-  version "0.6.7"
-  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.7.tgz#65e298f2ba2a3372ab57a4e4c4bdc19e1e32a4e5"
-  integrity sha512-KRo93U/afEqt7w5tBm4t0FHf/Li8tEYav3n4GUiZdeRlRfrtMbL8yQg0xRVnY/kmBRmQ4xkqIlbaMvuqlu53kg==
+focus-lock@^0.6.3:
+  version "0.6.8"
+  resolved "https://registry.yarnpkg.com/focus-lock/-/focus-lock-0.6.8.tgz#61985fadfa92f02f2ee1d90bc738efaf7f3c9f46"
+  integrity sha512-vkHTluRCoq9FcsrldC0ulQHiyBYgVJB2CX53I8r0nTC6KnEij7Of0jpBspjt3/CuNb6fyoj3aOh9J2HgQUM0og==
 
 follow-redirects@1.5.10:
   version "1.5.10"
@@ -7082,9 +6695,9 @@ fs.realpath@^1.0.0:
   integrity sha1-FQStJSMVjKpA20onh8sBQRmU6k8=
 
 fsevents@^1.2.7:
-  version "1.2.12"
-  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.12.tgz#db7e0d8ec3b0b45724fd4d83d43554a8f1f0de5c"
-  integrity sha512-Ggd/Ktt7E7I8pxZRbGIs7vwqAPscSESMrCSkx2FtWeqmheJgCo2R74fTsZFCifr0VTPwqRpPv17+6b8Zp7th0Q==
+  version "1.2.13"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-1.2.13.tgz#f325cb0455592428bcf11b383370ef70e3bfcc38"
+  integrity sha512-oWb1Z6mkHIskLzEJ/XWX0srkpkTQ7vaopMQkyaEIoq0fmtFVxOthb8cCxeT+p3ynTdkk/RZwbgG4brR5BeWECw==
   dependencies:
     bindings "^1.5.0"
     nan "^2.12.1"
@@ -7375,7 +6988,7 @@ global-dirs@^0.1.1:
   dependencies:
     ini "^1.3.4"
 
-global@^4.3.2, global@^4.4.0:
+global@^4.3.2:
   version "4.4.0"
   resolved "https://registry.yarnpkg.com/global/-/global-4.4.0.tgz#3e7b105179006a323ed71aafca3e9c57a5cc6406"
   integrity sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==
@@ -7428,9 +7041,9 @@ good-listener@^1.2.2:
     delegate "^3.1.2"
 
 graceful-fs@^4.0.0, graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.3, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.2:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.3.tgz#4a12ff1b60376ef09862c2093edd908328be8423"
-  integrity sha512-a30VEBm4PEdx1dRB7MFK7BejejvCvBronbLjht+sHuGYj8PHs7M/5Z+rt5lw551vZ7yfTCj4Vuyy3mSJytDWRQ==
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.4.tgz#2256bde14d3632958c465ebc96dc467ca07a29fb"
+  integrity sha512-WjKPNJF79dtJAVniUlGGWHYGz2jWxT6VhN/4m1NdkbZ2nOsEF+cI1Edgql5zCRhs/VsQYRvrXctxktVXZUkixw==
 
 "graceful-readlink@>= 1.0.0":
   version "1.0.1"
@@ -7521,7 +7134,7 @@ gzip-size@^4.0.0:
     duplexer "^0.1.1"
     pify "^3.0.0"
 
-handlebars@^4.4.0:
+handlebars@^4.7.6:
   version "4.7.6"
   resolved "https://registry.yarnpkg.com/handlebars/-/handlebars-4.7.6.tgz#d4c05c1baf90e9945f77aa68a7a219aa4a7df74e"
   integrity sha512-1f2BACcBfiwAfStCKZNrUCgqNZkGsAT7UM3kkYtXuLo0KnaVfjKOyf7PRzB6++aK9STyT1Pd2ZCPe3EGOXleXA==
@@ -7546,6 +7159,11 @@ har-validator@~5.1.3:
     ajv "^6.5.5"
     har-schema "^2.0.0"
 
+hard-rejection@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/hard-rejection/-/hard-rejection-2.1.0.tgz#1c6eda5c1685c63942766d79bb40ae773cecd883"
+  integrity sha512-VIZB+ibDhx7ObhAe7OVtoEbuP4h/MuOTHJ+J8h/eBXotJYl0fBgR72xDFCKgIh22OJZIOVNxBMWuhAr10r8HdA==
+
 has-ansi@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/has-ansi/-/has-ansi-2.0.0.tgz#34f5049ce1ecdf2b0649af3ef24e45ed35416d91"
@@ -7629,17 +7247,13 @@ has@^1.0.3:
     function-bind "^1.1.1"
 
 hash-base@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
-  integrity sha1-X8hoaEfs1zSZQDMZprCj8/auSRg=
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.1.0.tgz#55c381d9e06e1d2997a883b4a3fddfe7f0d3af33"
+  integrity sha512-1nmYp/rhMDiE7AYkDw+lLwlAzz0AntGIe51F3RfFfEqyQ3feY2eI/NcwC6umIQVOASPMsWJLJScWKSSvzL9IVA==
   dependencies:
-    inherits "^2.0.1"
-    safe-buffer "^5.0.1"
-
-hash-sum@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/hash-sum/-/hash-sum-1.0.2.tgz#33b40777754c6432573c120cc3808bbd10d47f04"
-  integrity sha1-M7QHd3VMZDJXPBIMw4CLvRDUfwQ=
+    inherits "^2.0.4"
+    readable-stream "^3.6.0"
+    safe-buffer "^5.2.0"
 
 hash.js@^1.0.0, hash.js@^1.0.3:
   version "1.1.7"
@@ -7725,9 +7339,9 @@ hast-util-to-html@^6.0.0:
     xtend "^4.0.1"
 
 hast-util-to-html@^7.0.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-7.1.0.tgz#aa580e7b846438ee1e7af2bee6a650062eb0c3ec"
-  integrity sha512-RjvNL41bYnxTOA+s8W8mjhVxH1J0dXza9hlakVHbghFsfj3JO/lsq3DsR/Md2HbynS8y89/LA7k0lhtnYJ1Yzw==
+  version "7.1.1"
+  resolved "https://registry.yarnpkg.com/hast-util-to-html/-/hast-util-to-html-7.1.1.tgz#39818b8bbfcb8eaa87846a120b3875487b27d094"
+  integrity sha512-Ujqj0hGuo3dIQKilkbauAv5teOqPvhaSLEgs1lgApFT0812e114KiffV8XfE4ttR8dRPqxNOIJOMu6SKOVOGlg==
   dependencies:
     ccount "^1.0.0"
     comma-separated-tokens "^1.0.0"
@@ -7736,7 +7350,7 @@ hast-util-to-html@^7.0.0:
     html-void-elements "^1.0.0"
     property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
-    stringify-entities "^3.0.0"
+    stringify-entities "^3.0.1"
     unist-util-is "^4.0.0"
     xtend "^4.0.0"
 
@@ -7771,7 +7385,7 @@ hastscript@^5.0.0:
     property-information "^5.0.0"
     space-separated-tokens "^1.0.0"
 
-he@1.2.0, he@^1.1.0, he@^1.2.0:
+he@1.2.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==
@@ -7781,11 +7395,6 @@ highlight.js@~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"
@@ -7818,9 +7427,9 @@ html-escaper@^2.0.0:
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
 html-minifier-terser@^5.0.0:
-  version "5.0.5"
-  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.0.5.tgz#8f12f639789f04faa9f5cf2ff9b9f65607f21f8b"
-  integrity sha512-cBSFFghQh/uHcfSiL42KxxIRMF7A144+3E44xdlctIjxEmkEfCvouxNyFH2wysXk1fCGBPwtcr3hDWlGTfkDew==
+  version "5.1.1"
+  resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz#922e96f1f3bb60832c2634b79884096389b1f054"
+  integrity sha512-ZPr5MNObqnV/T9akshPKbVgyOqLmy+Bxo7juKCfTfnjNniTAMdy4hz21YQqoofMBJD2kdREaqPPdThoR78Tgxg==
   dependencies:
     camel-case "^4.1.1"
     clean-css "^4.2.3"
@@ -7843,11 +7452,6 @@ html-minifier@^4.0.0:
     relateurl "^0.2.7"
     uglify-js "^3.5.1"
 
-html-tags@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.yarnpkg.com/html-tags/-/html-tags-3.1.0.tgz#7b5e6f7e665e9fb41f30007ed9e0d41e97fb2140"
-  integrity sha512-1qYz89hW3lFDEazhjW0yVAV87lw8lVkrJocr72XmBkMKsoSVJCQx3W8BXsC7hO2qAt8BoVjYjtAcZ9perqGnNg==
-
 html-void-elements@^1.0.0:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/html-void-elements/-/html-void-elements-1.0.5.tgz#ce9159494e86d95e45795b166c2021c2cfca4483"
@@ -7917,9 +7521,9 @@ http-proxy-agent@^2.1.0:
     debug "3.1.0"
 
 http-proxy@^1.13.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.0.tgz#dbe55f63e75a347db7f3d99974f2692a314a6a3a"
-  integrity sha512-84I2iJM/n1d4Hdgc6y2+qY5mDaz2PUVjlg9znE9byl+q0uC3DeByqBGReQu5tpLK0TAqTIXScRUV+dg7+bUPpQ==
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
+  integrity sha512-7mz/721AbnJwIVbnaSv1Cz3Am0ZLT/UBwkC92VlxhXv/k/BBQfM2fXElQNC27BVGr0uwUpplYPQM9LnaBMR5NQ==
   dependencies:
     eventemitter3 "^4.0.0"
     follow-redirects "^1.0.0"
@@ -8078,6 +7682,11 @@ indent-string@^3.0.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==
+
 indexof@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/indexof/-/indexof-0.0.1.tgz#82dc336d232b9062179d05ab3293a66059fd435d"
@@ -8195,11 +7804,6 @@ ip@1.1.5:
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha1-vd7XARQpCCjAoDnnLvJfWq7ENUo=
 
-is-absolute-url@^3.0.0:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/is-absolute-url/-/is-absolute-url-3.0.3.tgz#96c6a22b6a23929b11ea0afb1836c36ad4a5d698"
-  integrity sha512-opmNIX7uFnS96NtPmhWQgQx6/NYFgsUXYMllcfzwWKUMwfo8kku1TvE6hkNcH+Q1ts5cMVrsY7j0bxXQDciu9Q==
-
 is-absolute@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-absolute/-/is-absolute-1.0.0.tgz#395e1ae84b11f26ad1795e73c17378e48a301576"
@@ -8340,6 +7944,11 @@ is-directory@^0.3.1:
   resolved "https://registry.yarnpkg.com/is-directory/-/is-directory-0.3.1.tgz#61339b6f2475fc772fd9c9d83f5c8575dc154ae1"
   integrity sha1-YTObbyR1/Hcv2cnYP1yFddwVSuE=
 
+is-docker@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/is-docker/-/is-docker-2.0.0.tgz#2cb0df0e75e2d064fe1864c37cdeacb7b2dcf25b"
+  integrity sha512-pJEdRugimx4fBMra5z2/5iRdZ63OhYV0vr0Dwm5+xtW4D1FvRkB8hamMIhnWfyJeDdyr/aa7BDyNbtG38VxgoQ==
+
 is-dom@^1.0.9:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-dom/-/is-dom-1.1.0.tgz#af1fced292742443bb59ca3f76ab5e80907b4e8a"
@@ -8348,14 +7957,6 @@ is-dom@^1.0.9:
     is-object "^1.0.1"
     is-window "^1.0.2"
 
-is-expression@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-expression/-/is-expression-3.0.0.tgz#39acaa6be7fd1f3471dc42c7416e61c24317ac9f"
-  integrity sha1-Oayqa+f9HzRx3ELHQW5hwkMXrJ8=
-  dependencies:
-    acorn "~4.0.2"
-    object-assign "^4.0.1"
-
 is-extendable@^0.1.0, is-extendable@^0.1.1:
   version "0.1.1"
   resolved "https://registry.yarnpkg.com/is-extendable/-/is-extendable-0.1.1.tgz#62b110e289a471418e3ec36a617d472e301dfc89"
@@ -8395,11 +7996,6 @@ is-fullwidth-code-point@^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.2"
-  resolved "https://registry.yarnpkg.com/is-function/-/is-function-1.0.2.tgz#4f097f30abf6efadac9833b17ca5dc03f8144e08"
-  integrity sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==
-
 is-generator-function@^1.0.7:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/is-generator-function/-/is-generator-function-1.0.7.tgz#d2132e529bb0000a7f80794d4bdf5cd5e5813522"
@@ -8492,13 +8088,6 @@ is-plain-obj@^2.0.0:
   resolved "https://registry.yarnpkg.com/is-plain-obj/-/is-plain-obj-2.1.0.tgz#45e42e37fccf1f40da8e5f76ee21515840c09287"
   integrity sha512-YWnfyRwxL/+SsrWYfOpUtz5b3YD+nyfkHvjbcanzk8zgyO4ASD67uVMRt8k5bM4lLMDnXfriRhOpemw+NfT1eA==
 
-is-plain-object@3.0.0, is-plain-object@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928"
-  integrity sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==
-  dependencies:
-    isobject "^4.0.0"
-
 is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-2.0.4.tgz#2c163b3fafb1b606d9d17928f05c2a1c38e07677"
@@ -8506,17 +8095,24 @@ is-plain-object@^2.0.3, is-plain-object@^2.0.4:
   dependencies:
     isobject "^3.0.1"
 
+is-plain-object@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/is-plain-object/-/is-plain-object-3.0.0.tgz#47bfc5da1b5d50d64110806c199359482e75a928"
+  integrity sha512-tZIpofR+P05k8Aocp7UI/2UTa9lTJSebCXpFFoR9aibpokDj/uXBsJ8luUu0tTVYKkMU6URDUuOfJZ7koewXvg==
+  dependencies:
+    isobject "^4.0.0"
+
 is-potential-custom-element-name@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/is-potential-custom-element-name/-/is-potential-custom-element-name-1.0.0.tgz#0c52e54bcca391bb2c494b21e8626d7336c6e397"
   integrity sha1-DFLlS8yjkbssSUsh6GJtczbG45c=
 
-is-promise@^2.0.0, is-promise@^2.1.0:
+is-promise@^2.1.0:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/is-promise/-/is-promise-2.2.2.tgz#39ab959ccbf9a774cf079f7b40c7a26f763135f1"
   integrity sha512-+lP4/6lKUBfQjZ2pdxThZvLUAafmZb8OAxFb8XXtiQmS35INgr85hdOGoEs124ez1FCnZJt6jau/T+alh58QFQ==
 
-is-regex@^1.0.3, is-regex@^1.0.4, is-regex@^1.0.5:
+is-regex@^1.0.4, 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==
@@ -8562,7 +8158,7 @@ is-string@^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-symbol@^1.0.2, is-symbol@^1.0.3:
+is-symbol@^1.0.2:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.3.tgz#38e1014b9e6329be0de9d24a414fd7441ec61937"
   integrity sha512-OwijhaRSgqvhm/0ZdAcXNZt9lYdKFpcRDT5ULUuYXPoT794UNOdU+gpT6Rzo7b4V2HUl/op6GqY894AZwv9faQ==
@@ -8623,6 +8219,13 @@ 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.2.0"
+  resolved "https://registry.yarnpkg.com/is-wsl/-/is-wsl-2.2.0.tgz#74a4c76e77ca9fd3f932f290c17ea326cd157271"
+  integrity sha512-fKzAra0rGJUUBwGBgNkHZuToZcn+TtXHpeCgmkMJMMYx1sQDYaCSyjJBSCa2nH1DGm7s3n1oBnohoVTBaN7Lww==
+  dependencies:
+    is-docker "^2.0.0"
+
 isarray@0.0.1:
   version "0.0.1"
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
@@ -8686,9 +8289,9 @@ isstream@~0.1.2:
   integrity sha1-R+Y/evVa+m+S4VAOaQ64uFKcCZo=
 
 istanbul-api@^2.1.6:
-  version "2.1.6"
-  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-2.1.6.tgz#d61702a9d1c66ad89d92e66d401e16b0bda4a35f"
-  integrity sha512-x0Eicp6KsShG1k1rMgBAi/1GgY7kFGEBwQpw3PXGEmu+rBcBNhqU8g2DgY9mlepAsLPzrzrbqSgCGANnki4POA==
+  version "2.1.7"
+  resolved "https://registry.yarnpkg.com/istanbul-api/-/istanbul-api-2.1.7.tgz#82786b79f3b93d481349c7aa1e2c2b4eeb48c8a8"
+  integrity sha512-LYTOa2UrYFyJ/aSczZi/6lBykVMjCCvUmT64gOe+jPZFy4w6FYfPGqFT2IiQ2BxVHHDOvCD7qrIXb0EOh4uGWw==
   dependencies:
     async "^2.6.2"
     compare-versions "^3.4.0"
@@ -8698,7 +8301,7 @@ istanbul-api@^2.1.6:
     istanbul-lib-instrument "^3.3.0"
     istanbul-lib-report "^2.0.8"
     istanbul-lib-source-maps "^3.0.6"
-    istanbul-reports "^2.2.4"
+    istanbul-reports "^2.2.5"
     js-yaml "^3.13.1"
     make-dir "^2.1.0"
     minimatch "^3.0.4"
@@ -8749,81 +8352,13 @@ istanbul-lib-source-maps@^3.0.6:
     rimraf "^2.6.3"
     source-map "^0.6.1"
 
-istanbul-reports@^2.2.4:
+istanbul-reports@^2.2.5:
   version "2.2.7"
   resolved "https://registry.yarnpkg.com/istanbul-reports/-/istanbul-reports-2.2.7.tgz#5d939f6237d7b48393cc0959eab40cd4fd056931"
   integrity sha512-uu1F/L1o5Y6LzPVSVZXNOoD/KXpJue9aeLRd0sM9uMXfZvzomB0WxVamWb5ue8kA2vVWEmW7EG+A5n3f1kqHKg==
   dependencies:
     html-escaper "^2.0.0"
 
-jest-haste-map@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-24.9.0.tgz#b38a5d64274934e21fa417ae9a9fbeb77ceaac7d"
-  integrity sha512-kfVFmsuWui2Sj1Rp1AJ4D9HqJwE4uwTlS/vO+eRUaMmd54BFpli2XhMQnPC2k4cHFVbB2Q2C+jtI1AGLgEnCjQ==
-  dependencies:
-    "@jest/types" "^24.9.0"
-    anymatch "^2.0.0"
-    fb-watchman "^2.0.0"
-    graceful-fs "^4.1.15"
-    invariant "^2.2.4"
-    jest-serializer "^24.9.0"
-    jest-util "^24.9.0"
-    jest-worker "^24.9.0"
-    micromatch "^3.1.10"
-    sane "^4.0.3"
-    walker "^1.0.7"
-  optionalDependencies:
-    fsevents "^1.2.7"
-
-jest-message-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-24.9.0.tgz#527f54a1e380f5e202a8d1149b0ec872f43119e3"
-  integrity sha512-oCj8FiZ3U0hTP4aSui87P4L4jC37BtQwUMqk+zk/b11FR19BJDeZsZAvIHutWnmtw7r85UmR3CEWZ0HWU2mAlw==
-  dependencies:
-    "@babel/code-frame" "^7.0.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    "@types/stack-utils" "^1.0.1"
-    chalk "^2.0.1"
-    micromatch "^3.1.10"
-    slash "^2.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"
-  integrity sha512-3BEYN5WbSq9wd+SyLDES7AHnjH9A/ROBwmz7l2y+ol+NtSFO8DYiEBzoO1CeFc9a8DYy10EO4dDFVv/wN3zl1w==
-  dependencies:
-    "@jest/types" "^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-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-util@^24.9.0:
-  version "24.9.0"
-  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-24.9.0.tgz#7396814e48536d2e85a37de3e4c431d7cb140162"
-  integrity sha512-x+cZU8VRmOJxbA1K5oDBdxQmdq0OIdADarLxk0Mq+3XS4jgvhG/oKGWcIDCtPG0HgjxOYvF+ilPJQsAyXfbNOg==
-  dependencies:
-    "@jest/console" "^24.9.0"
-    "@jest/fake-timers" "^24.9.0"
-    "@jest/source-map" "^24.9.0"
-    "@jest/test-result" "^24.9.0"
-    "@jest/types" "^24.9.0"
-    callsites "^3.0.0"
-    chalk "^2.0.1"
-    graceful-fs "^4.1.15"
-    is-ci "^2.0.0"
-    mkdirp "^0.5.1"
-    slash "^2.0.0"
-    source-map "^0.6.0"
-
 jest-worker@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-24.9.0.tgz#5dbfdb5b2d322e98567898238a9697bcce67b3e5"
@@ -8853,11 +8388,6 @@ js-string-escape@^1.0.1:
   resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
   integrity sha1-4mJbrbwNZ8dTPp7cEGjFh65BN+8=
 
-js-stringify@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"
-  integrity sha1-Fzb939lyTyijaCrcYjCufk6Weds=
-
 js-tokens@^3.0.0:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
@@ -8881,30 +8411,6 @@ jsbn@~0.1.0:
   resolved "https://registry.yarnpkg.com/jsbn/-/jsbn-0.1.1.tgz#a5e654c2e5a2deb5f201d96cefbca80c0ef2f513"
   integrity sha1-peZUwuWi3rXyAdls77yoDA7y9RM=
 
-jscodeshift@^0.7.0:
-  version "0.7.0"
-  resolved "https://registry.yarnpkg.com/jscodeshift/-/jscodeshift-0.7.0.tgz#4eee7506fd4fdacbd80340287d61575af991fdab"
-  integrity sha512-Kt6rpTa1HVhAWagD6J0y6qxxqRmDgkFvczerLgOsDNSGoUZSmq2CO1vFRcda9OV1BaZKSHCIh+VREPts5tB/Ig==
-  dependencies:
-    "@babel/core" "^7.1.6"
-    "@babel/parser" "^7.1.6"
-    "@babel/plugin-proposal-class-properties" "^7.1.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.0.0"
-    "@babel/preset-env" "^7.1.6"
-    "@babel/preset-flow" "^7.0.0"
-    "@babel/preset-typescript" "^7.1.0"
-    "@babel/register" "^7.0.0"
-    babel-core "^7.0.0-bridge.0"
-    colors "^1.1.2"
-    flow-parser "0.*"
-    graceful-fs "^4.1.11"
-    micromatch "^3.1.10"
-    neo-async "^2.5.0"
-    node-dir "^0.1.17"
-    recast "^0.18.1"
-    temp "^0.8.1"
-    write-file-atomic "^2.3.0"
-
 jsesc@^2.5.1:
   version "2.5.2"
   resolved "https://registry.yarnpkg.com/jsesc/-/jsesc-2.5.2.tgz#80564d2e483dacf6e8ef209650a67df3f0c283a4"
@@ -8947,7 +8453,7 @@ json5@^1.0.1:
   dependencies:
     minimist "^1.2.0"
 
-json5@^2.1.0, json5@^2.1.2:
+json5@^2.1.2:
   version "2.1.3"
   resolved "https://registry.yarnpkg.com/json5/-/json5-2.1.3.tgz#c9b0f7fa9233bfe5807fe66fcf3a5617ed597d43"
   integrity sha512-KXPvOm8K9IJKFM0bmdn8QXh7udDh1g/giieX0NLCaMnb4hEiVFqnop2ImTXCc5e0/oHz3LTqmHGtExn5hfMkOA==
@@ -8976,14 +8482,6 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-jstransformer@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/jstransformer/-/jstransformer-1.0.0.tgz#ed8bf0921e2f3f1ed4d5c1a44f68709ed24722c3"
-  integrity sha1-7Yvwkh4vPx7U1cGkT2hwntJHIsM=
-  dependencies:
-    is-promise "^2.0.0"
-    promise "^7.0.1"
-
 junit-report-builder@^1.3.1:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/junit-report-builder/-/junit-report-builder-1.3.3.tgz#a848e9ef1b1664b855d1abf8766c39f0a9c5ff33"
@@ -9000,9 +8498,9 @@ just-extend@^4.0.2:
   integrity sha512-ApcjaOdVTJ7y4r08xI5wIqpvwS48Q0PBG4DJROcEkH1f8MdAiNFyFxz3xoL0LWAVwjrwPYZdVHHxhRHcx/uGLA==
 
 karma-browserstack-launcher@^1.0.0:
-  version "1.5.2"
-  resolved "https://registry.yarnpkg.com/karma-browserstack-launcher/-/karma-browserstack-launcher-1.5.2.tgz#e3387c7ade74f6f33725669dbae7f889f206b7aa"
-  integrity sha512-HrZlFSmjQqJGmHjHcSuR5VpxErTRafgiexHM+nZ8W38fs5wUtykeSFS8nWWXyoZjQtQ0p1O/VDQpKgRG2ntVKw==
+  version "1.6.0"
+  resolved "https://registry.yarnpkg.com/karma-browserstack-launcher/-/karma-browserstack-launcher-1.6.0.tgz#2f6000647073e77ae296653b8830b279669766ef"
+  integrity sha512-Y/UWPdHZkHIVH2To4GWHCTzmrsB6H7PBWy6pw+TWz5sr4HW2mcE+Uj6qWgoVNxvQU1Pfn5LQQzI6EQ65p8QbiQ==
   dependencies:
     browserstack "~1.5.1"
     browserstack-local "^1.3.7"
@@ -9123,7 +8621,7 @@ kind-of@^5.0.0:
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-5.1.0.tgz#729c91e2d857b7a419a1f9aa65685c4c33f5845d"
   integrity sha512-NGEErnH6F2vUuXDh+OlbcKW7/wOcfdRHaZ7VWtqCztfHri/++YKmP51OdWeGPuqCOba6kk2OTe5d02VmTB80Pw==
 
-kind-of@^6.0.0, kind-of@^6.0.2:
+kind-of@^6.0.0, kind-of@^6.0.2, kind-of@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-6.0.3.tgz#07c05034a6c349fa06e24fa35aa76db4580ce4dd"
   integrity sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==
@@ -9190,9 +8688,9 @@ koa-static@^5.0.0:
     koa-send "^5.0.0"
 
 koa@^2.7.0:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/koa/-/koa-2.11.0.tgz#fe5a51c46f566d27632dd5dc8fd5d7dd44f935a4"
-  integrity sha512-EpR9dElBTDlaDgyhDMiLkXrPwp6ZqgAIBvhhmxQ9XN4TFgW+gEz6tkcsNI6BnUbUftrKDjVFj4lW2/J2aNBMMA==
+  version "2.12.0"
+  resolved "https://registry.yarnpkg.com/koa/-/koa-2.12.0.tgz#c92bfb42defd86f365c31bf63fe918db11fc5c74"
+  integrity sha512-WlUBj6PXoVhjI5ljMmlyK+eqkbVFW5XQu8twz6bd4WM2E67IwKgPMu5wIFXGxAsZT7sW5xAB54KhY8WAEkLPug==
   dependencies:
     accepts "^1.3.5"
     cache-content-type "^1.0.0"
@@ -9204,7 +8702,6 @@ koa@^2.7.0:
     depd "^1.1.2"
     destroy "^1.0.4"
     encodeurl "^1.0.2"
-    error-inject "^1.0.0"
     escape-html "^1.0.3"
     fresh "~0.5.2"
     http-assert "^1.3.0"
@@ -9219,11 +8716,6 @@ koa@^2.7.0:
     type-is "^1.6.16"
     vary "^1.1.2"
 
-lazy-cache@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/lazy-cache/-/lazy-cache-1.0.4.tgz#a1d78fc3a50474cb80845d3b3b6e1da49a446e8e"
-  integrity sha1-odePw6UEdMuAhF07O24dpJpEbo4=
-
 lazystream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/lazystream/-/lazystream-1.0.0.tgz#f6995fe0f820392f61396be89462407bb77168e4"
@@ -9382,14 +8874,14 @@ listr@^0.14.2:
     p-map "^2.0.0"
     rxjs "^6.3.3"
 
-lit-element@^2.2.1:
+lit-element@^2.2.1, lit-element@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/lit-element/-/lit-element-2.3.1.tgz#73343b978fa1e73d60526c6bb6ad60f53a16c343"
   integrity sha512-tOcUAmeO3BzwiQ7FGWdsshNvC0HVHcTFYw/TLIImmKwXYoV0E7zCBASa8IJ7DiP4cen/Yoj454gS0qqTnIGsFA==
   dependencies:
     lit-html "^1.1.1"
 
-lit-html@^1.0.0, lit-html@^1.1.1:
+lit-html@^1.0.0, lit-html@^1.1.1, lit-html@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.2.1.tgz#1fb933dc1e2ddc095f60b8086277d4fcd9d62cc8"
   integrity sha512-GSJHHXMGLZDzTRq59IUfL9FCdAlGfqNp/dEa7k7aBaaWD+JKaCjsAk9KYm2V12ItonVaYx2dprN66Zdm1AuBTQ==
@@ -9441,15 +8933,6 @@ loader-runner@^2.4.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
   integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
 
-loader-utils@1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
-  integrity sha512-fkpz8ejdnEMG3s37wGL07iSBDg99O9D5yflE9RGNH3hRdx9SOwYfnGYdZOUIZitN8E+E2vkq3MUMYMvPYl5ZZA==
-  dependencies:
-    big.js "^5.2.2"
-    emojis-list "^2.0.0"
-    json5 "^1.0.1"
-
 loader-utils@^1.2.3:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.4.0.tgz#c579b5e34cb34b1a74edc6c1fb36bfa371d5a613"
@@ -9475,6 +8958,13 @@ locate-path@^3.0.0:
     p-locate "^3.0.0"
     path-exists "^3.0.0"
 
+locate-path@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/locate-path/-/locate-path-5.0.0.tgz#1afba396afd676a6d42504d0a67a3a7eb9f62aa0"
+  integrity sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==
+  dependencies:
+    p-locate "^4.1.0"
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -9490,11 +8980,6 @@ lodash.clonedeep@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz#e23f3f9c4f8fbdde872529c1071857a086e5ccef"
   integrity sha1-4j8/nE+Pvd6HJSnBBxhXoIblzO8=
 
-lodash.debounce@^4.0.8:
-  version "4.0.8"
-  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
-  integrity sha1-gteb/zCmfEAF/9XiUVMArZyk168=
-
 lodash.differencewith@~4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/lodash.differencewith/-/lodash.differencewith-4.5.0.tgz#bafafbc918b55154e179176a00bb0aefaac854b7"
@@ -9575,7 +9060,7 @@ lodash@4.17.11:
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
   integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
 
-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.2.0, lodash@^4.2.1:
+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.2.0, lodash@^4.2.1:
   version "4.17.15"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.15.tgz#b447f6670a0455bbfeedd11392eff330ea097548"
   integrity sha512-8xOcRHvCjnocdS5cpwXQXVzmmh5e5+saE2QGoeQmbKmRS6J3VQppPOIt0MnmE+4xlZoumy0GPG0D0MVIQbNA1A==
@@ -9638,11 +9123,6 @@ longest-streak@^2.0.1:
   resolved "https://registry.yarnpkg.com/longest-streak/-/longest-streak-2.0.4.tgz#b8599957da5b5dab64dee3fe316fa774597d90e4"
   integrity sha512-vM6rUVCVUJJt33bnmHiZEvr7wPT78ztX7rojL+LW51bHtLh6HTjx84LA5W4+oa6aKEJA7jJu5LR6vQRBpA5DVg==
 
-longest@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/longest/-/longest-1.0.1.tgz#30a0b2da38f73770e8294a0d22e6625ed77d0097"
-  integrity sha1-MKCy2jj3N3DoKUoNIuZiXtd9AJc=
-
 loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
@@ -9670,14 +9150,6 @@ lower-case@^2.0.1:
   dependencies:
     tslib "^1.10.0"
 
-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.2"
-    highlight.js "~9.13.0"
-
 lowlight@~1.9.0, lowlight@~1.9.1:
   version "1.9.2"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.9.2.tgz#0b9127e3cec2c3021b7795dd81005c709a42fdd1"
@@ -9745,13 +9217,6 @@ make-fetch-happen@^5.0.0:
     socks-proxy-agent "^4.0.0"
     ssri "^6.0.0"
 
-makeerror@1.0.x:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/makeerror/-/makeerror-1.0.11.tgz#e01a5c9109f2af79660e4e8b9587790184f5a96c"
-  integrity sha1-4BpckQnyr3lmDk6LlYd5AYT1qWw=
-  dependencies:
-    tmpl "1.0.x"
-
 map-age-cleaner@^0.1.1:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/map-age-cleaner/-/map-age-cleaner-0.1.3.tgz#7d583a7306434c055fe474b0f45078e6e1b4b92a"
@@ -9774,6 +9239,11 @@ map-obj@^2.0.0:
   resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-2.0.0.tgz#a65cd29087a92598b8791257a523e021222ac1f9"
   integrity sha1-plzSkIepJZi4eRJXpSPgISIqwfk=
 
+map-obj@^4.0.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/map-obj/-/map-obj-4.1.0.tgz#b91221b542734b9f14256c0132c897c5d7256fd5"
+  integrity sha512-glc9y00wgtwcDmp7GaE/0b0OnxpNJsVf3ael/An6Fe2Q51LLwN1er6sdomLRzz5h0+yMpiYLhWYF5R7HeqVd4g==
+
 map-or-similar@^1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08"
@@ -9812,14 +9282,6 @@ markdown-table@^1.1.0:
   resolved "https://registry.yarnpkg.com/markdown-table/-/markdown-table-1.1.3.tgz#9fcb69bcfdb8717bfd0398c6ec2d93036ef8de60"
   integrity sha512-1RUZVgQlpJSPWYbFSpmudq5nHY1doEIv89gBtF0s4gW1GF2XorxcA/70M5vq7rLv0a6mhOUccRsqkwhwLCIQ2Q==
 
-markdown-to-jsx@^6.9.1:
-  version "6.11.1"
-  resolved "https://registry.yarnpkg.com/markdown-to-jsx/-/markdown-to-jsx-6.11.1.tgz#3931612cfffaa5fd6610ecf2a4055eccccb98fa8"
-  integrity sha512-FdtDAv8d9/tjyHxdCvWZxxOgK2icwzBkTq/dPk+XlQ2B+DYDcwE89FWGzT92erXQ0CQR/bQbpNK3loNYhYL70g==
-  dependencies:
-    prop-types "^15.6.2"
-    unquote "^1.1.0"
-
 markdownlint-cli@^0.17.0:
   version "0.17.0"
   resolved "https://registry.yarnpkg.com/markdownlint-cli/-/markdownlint-cli-0.17.0.tgz#f5e483a576bf56cca29b057216241a54d33e4d95"
@@ -9859,12 +9321,12 @@ md5.js@^1.3.4:
     inherits "^2.0.1"
     safe-buffer "^5.1.2"
 
-mdast-squeeze-paragraphs@^3.0.0:
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-3.0.5.tgz#f428b6b944f8faef454db9b58f170c4183cb2e61"
-  integrity sha512-xX6Vbe348Y/rukQlG4W3xH+7v4ZlzUbSY4HUIQCuYrF2DrkcHx584mCaFxkWoDZKNUfyLZItHC9VAqX3kIP7XA==
+mdast-squeeze-paragraphs@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/mdast-squeeze-paragraphs/-/mdast-squeeze-paragraphs-4.0.0.tgz#7c4c114679c3bee27ef10b58e2e015be79f1ef97"
+  integrity sha512-zxdPn69hkQ1rm4J+2Cs2j6wDEv7O17TfXTJ33tl/+JPIoEmtV9t2ZzBM5LPHE8QlHsmVD8t3vPKCyY3oH+H8MQ==
   dependencies:
-    unist-util-remove "^1.0.0"
+    unist-util-remove "^2.0.0"
 
 mdast-util-compact@^1.0.0:
   version "1.0.4"
@@ -9873,7 +9335,7 @@ mdast-util-compact@^1.0.0:
   dependencies:
     unist-util-visit "^1.1.0"
 
-mdast-util-definitions@^1.2.0, mdast-util-definitions@^1.2.3:
+mdast-util-definitions@^1.2.0:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/mdast-util-definitions/-/mdast-util-definitions-1.2.5.tgz#3fe622a4171c774ebd06f11e9f8af7ec53ea5c74"
   integrity sha512-CJXEdoLfiISCDc2JB6QLb79pYfI6+GcIH+W2ox9nMc7od0Pz+bovcHsiq29xAQY6ayqe/9CsK2VzkSJdg1pFYA==
@@ -9887,15 +9349,15 @@ mdast-util-definitions@^2.0.0:
   dependencies:
     unist-util-visit "^2.0.0"
 
-mdast-util-to-hast@7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-7.0.0.tgz#589b562ce1ae0a7849e6c38536a9e7bc4f415e54"
-  integrity sha512-vxnXKSZgvPG2grZM3kxaF052pxsLtq8TPAkiMkqYj1nFTOazYUPXt3LFYIEB6Ws/IX7Uyvljzk64kD6DwZl/wQ==
+mdast-util-to-hast@8.2.0, mdast-util-to-hast@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-8.2.0.tgz#adf9f824defcd382e53dd7bace4282a45602ac67"
+  integrity sha512-WjH/KXtqU66XyTJQ7tg7sjvTw1OQcVV0hKdFh3BgHPwZ96fSBCQ/NitEHsN70Mmnggt+5eUUC7pCnK+2qGQnCA==
   dependencies:
     collapse-white-space "^1.0.0"
     detab "^2.0.0"
-    mdast-util-definitions "^1.2.0"
-    mdurl "^1.0.1"
+    mdast-util-definitions "^2.0.0"
+    mdurl "^1.0.0"
     trim-lines "^1.0.0"
     unist-builder "^2.0.0"
     unist-util-generated "^1.0.0"
@@ -9919,21 +9381,6 @@ mdast-util-to-hast@^6.0.0:
     unist-util-visit "^1.1.0"
     xtend "^4.0.1"
 
-mdast-util-to-hast@^8.0.0:
-  version "8.2.0"
-  resolved "https://registry.yarnpkg.com/mdast-util-to-hast/-/mdast-util-to-hast-8.2.0.tgz#adf9f824defcd382e53dd7bace4282a45602ac67"
-  integrity sha512-WjH/KXtqU66XyTJQ7tg7sjvTw1OQcVV0hKdFh3BgHPwZ96fSBCQ/NitEHsN70Mmnggt+5eUUC7pCnK+2qGQnCA==
-  dependencies:
-    collapse-white-space "^1.0.0"
-    detab "^2.0.0"
-    mdast-util-definitions "^2.0.0"
-    mdurl "^1.0.0"
-    trim-lines "^1.0.0"
-    unist-builder "^2.0.0"
-    unist-util-generated "^1.0.0"
-    unist-util-position "^3.0.0"
-    unist-util-visit "^2.0.0"
-
 mdast-util-to-string@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz#27055500103f51637bd07d01da01eb1967a43527"
@@ -9994,7 +9441,7 @@ memorystream@^0.3.1:
   resolved "https://registry.yarnpkg.com/memorystream/-/memorystream-0.3.1.tgz#86d7090b30ce455d63fbae12dda51a47ddcaf9b2"
   integrity sha1-htcJCzDORV1j+64S3aUaR93K+bI=
 
-meow@5.0.0, meow@^5.0.0:
+meow@5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/meow/-/meow-5.0.0.tgz#dfc73d63a9afc714a5e371760eb5c88b91078aa4"
   integrity sha512-CbTqYU17ABaLefO8vCU153ZZlprKYWDljcndKKDCFcYQITzWCXZAVk4QMFZPgvzrnUQ3uItnIE/LoUOwrT15Ig==
@@ -10040,6 +9487,25 @@ meow@^4.0.0:
     redent "^2.0.0"
     trim-newlines "^2.0.0"
 
+meow@^7.0.0:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/meow/-/meow-7.0.1.tgz#1ed4a0a50b3844b451369c48362eb0515f04c1dc"
+  integrity sha512-tBKIQqVrAHqwit0vfuFPY3LlzJYkEOFyKa3bPgxzNl6q/RtN8KQ+ALYEASYuFayzSAsjlhXj/JZ10rH85Q6TUw==
+  dependencies:
+    "@types/minimist" "^1.2.0"
+    arrify "^2.0.1"
+    camelcase "^6.0.0"
+    camelcase-keys "^6.2.2"
+    decamelize-keys "^1.1.0"
+    hard-rejection "^2.1.0"
+    minimist-options "^4.0.2"
+    normalize-package-data "^2.5.0"
+    read-pkg-up "^7.0.1"
+    redent "^3.0.0"
+    trim-newlines "^3.0.0"
+    type-fest "^0.13.1"
+    yargs-parser "^18.1.3"
+
 merge-stream@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/merge-stream/-/merge-stream-2.0.0.tgz#52823629a14dd00c9770fb6ad47dc6310f2c1f60"
@@ -10069,14 +9535,6 @@ micromatch@^3.1.10, micromatch@^3.1.4, micromatch@^3.1.8:
     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"
@@ -10098,9 +9556,9 @@ mime-types@^2.1.12, mime-types@^2.1.18, mime-types@~2.1.19, mime-types@~2.1.24:
     mime-db "1.44.0"
 
 mime@^2.3.1:
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.4.tgz#bd7b91135fc6b01cde3e9bae33d659b63d8857e5"
-  integrity sha512-LRxmNwziLPT828z+4YkNzloCFC2YM4wrB99k+AV5ZbEyfGNWfG8SO1FUXLmLDBSo89NrJZ4DIWeLjy1CHGhMGA==
+  version "2.4.5"
+  resolved "https://registry.yarnpkg.com/mime/-/mime-2.4.5.tgz#d8de2ecb92982dedbb6541c9b6841d7f218ea009"
+  integrity sha512-3hQhEUF027BuxZjQA3s7rIv/7VCQPa27hN9u9g87sEkWaKwQPuXOkVKtOeiyUrnWqTDiOs8Ed2rwg733mB0R5w==
 
 mimic-fn@^1.0.0:
   version "1.2.0"
@@ -10124,6 +9582,11 @@ min-document@^2.19.0:
   dependencies:
     dom-walk "^0.1.0"
 
+min-indent@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/min-indent/-/min-indent-1.0.0.tgz#cfc45c37e9ec0d8f0a0ec3dd4ef7f7c3abe39256"
+  integrity sha1-z8RcN+nsDY8KDsPdTvf3w6vjklY=
+
 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"
@@ -10156,12 +9619,21 @@ minimist-options@^3.0.1:
     arrify "^1.0.1"
     is-plain-obj "^1.1.0"
 
+minimist-options@^4.0.2:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/minimist-options/-/minimist-options-4.1.0.tgz#c0655713c53a8a2ebd77ffa247d342c40f010619"
+  integrity sha512-Q4r8ghd80yhO/0j1O3B2BjweX3fiHg9cdOwjJd2J76Q135c+NDxGCqdYKQ1SKBuFfgWbAUzBfvYjPUEeNgqN1A==
+  dependencies:
+    arrify "^1.0.1"
+    is-plain-obj "^1.1.0"
+    kind-of "^6.0.3"
+
 minimist@1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.0.tgz#a35008b20f41383eec1fb914f4cd5df79a264284"
   integrity sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=
 
-minimist@^1.1.1, minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.1.3, minimist@^1.2.0, minimist@^1.2.5:
   version "1.2.5"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.5.tgz#67d66014b66a6a8aaa0c083c5fd58df4e4e97602"
   integrity sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==
@@ -10211,9 +9683,9 @@ mixin-deep@^1.2.0:
     is-extendable "^1.0.1"
 
 mkdirp-classic@^0.5.2:
-  version "0.5.2"
-  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.2.tgz#54c441ce4c96cd7790e10b41a87aa51068ecab2b"
-  integrity sha512-ejdnDQcR75gwknmMw/tx02AuRs8jCtqFoFqDZMjiNxsu85sRIJVXDKHuLYvUUPRBUtV2FpSZa9bL1BUa3BdR2g==
+  version "0.5.3"
+  resolved "https://registry.yarnpkg.com/mkdirp-classic/-/mkdirp-classic-0.5.3.tgz#fa10c9115cc6d8865be221ba47ee9bed78601113"
+  integrity sha512-gKLcREMhtuZRwRAfqP3RFW+TK4JqApVBtOIftVgjuABpAtpxhPGaDcfvbhNvD0B8iD1oUr/txX35NjcaY6Ns/A==
 
 mkdirp-promise@^5.0.1:
   version "5.0.1"
@@ -10445,19 +9917,12 @@ no-case@^3.0.3:
     tslib "^1.10.0"
 
 node-abi@^2.7.0:
-  version "2.16.0"
-  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.16.0.tgz#7df94e9c0a7a189f4197ab84bac8089ef5894992"
-  integrity sha512-+sa0XNlWDA6T+bDLmkCUYn6W5k5W6BPRL6mqzSCs6H/xUgtl4D5x2fORKDzopKiU6wsyn/+wXlRXwXeSp+mtoA==
+  version "2.17.0"
+  resolved "https://registry.yarnpkg.com/node-abi/-/node-abi-2.17.0.tgz#f167c92780497ff01eeaf473fcf8138e0fcc87fa"
+  integrity sha512-dFRAA0ACk/aBo0TIXQMEWMLUTyWYYT8OBYIzLmEUrQTElGRjxDCvyBZIsDL0QA7QCaj9PrawhOmTEdsuLY4uOQ==
   dependencies:
     semver "^5.4.1"
 
-node-dir@^0.1.17:
-  version "0.1.17"
-  resolved "https://registry.yarnpkg.com/node-dir/-/node-dir-0.1.17.tgz#5f5665d93351335caabef8f1c554516cf5f1e4e5"
-  integrity sha1-X1Zl2TNRM1yqvvjxxVRRbPXx5OU=
-  dependencies:
-    minimatch "^3.0.2"
-
 node-environment-flags@1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/node-environment-flags/-/node-environment-flags-1.0.5.tgz#fa930275f5bf5dae188d6192b24b4c8bbac3d76a"
@@ -10513,11 +9978,6 @@ node-gyp@^5.0.2:
     tar "^4.4.12"
     which "^1.3.1"
 
-node-int64@^0.4.0:
-  version "0.4.0"
-  resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
-  integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
-
 node-libs-browser@^2.2.1:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/node-libs-browser/-/node-libs-browser-2.2.1.tgz#b64f513d18338625f90346d27b0d235e631f6425"
@@ -10547,15 +10007,10 @@ node-libs-browser@^2.2.1:
     util "^0.11.0"
     vm-browserify "^1.0.1"
 
-node-modules-regexp@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/node-modules-regexp/-/node-modules-regexp-1.0.0.tgz#8d9dbe28964a4ac5712e9131642107c71e90ec40"
-  integrity sha1-jZ2+KJZKSsVxLpExZCEHxx6Q7EA=
-
 node-releases@^1.1.53:
-  version "1.1.53"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.53.tgz#2d821bfa499ed7c5dffc5e2f28c88e78a08ee3f4"
-  integrity sha512-wp8zyQVwef2hpZ/dJH7SfSrIPD6YoJz6BDQDpGEkcA0s3LpAQoxBIYmfIq6QAhC1DhwsyCgTaTTcONwX8qzCuQ==
+  version "1.1.56"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.56.tgz#bc054a417d316e3adac90eafb7e1932802f28705"
+  integrity sha512-EVo605FhWLygH8a64TjgpjyHYOihkxECwX1bHHr8tETJKWEiWS2YJjPbvsX2jFjnjTNEgBCmk9mLjKG1Mf11cw==
 
 noop-logger@^0.1.1:
   version "0.1.1"
@@ -10792,7 +10247,7 @@ object.entries@^1.1.1:
     function-bind "^1.1.1"
     has "^1.0.3"
 
-object.getownpropertydescriptors@^2.0.3, object.getownpropertydescriptors@^2.1.0:
+object.getownpropertydescriptors@^2.0.3:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.1.0.tgz#369bf1f9592d8ab89d712dced5cb81c7c5352649"
   integrity sha512-Z53Oah9A3TdLoblT7VKJaTDdXdT+lQO+cNpKVnya5JDe9uLvzu1YyY1yFDFrcxrlRgWrEFH0jJtD/IbuwjcEVg==
@@ -10855,12 +10310,13 @@ only@~0.0.2:
   resolved "https://registry.yarnpkg.com/only/-/only-0.0.2.tgz#2afde84d03e50b9a8edc444e30610a70295edfb4"
   integrity sha1-Kv3oTQPlC5qO3EROMGEKcCle37Q=
 
-opn@^5.4.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/opn/-/opn-5.5.0.tgz#fc7164fab56d235904c51c3b27da6758ca3b9bfc"
-  integrity sha512-PqHpggC9bLV0VeWcdKhkpxY+3JTzetLSqTCWL/z/tFIbI6G8JCjondXklT1JinczLz2Xib62sSp0T/gKT4KksA==
+open@^7.0.3:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/open/-/open-7.0.4.tgz#c28a9d315e5c98340bf979fdcb2e58664aa10d83"
+  integrity sha512-brSA+/yq+b08Hsr4c8fsEW2CRzk1BmfN3SAK/5VCHQ9bdoZJ4qa/+AfR0xHjlbbZUyPkUHs1b8x1RqdyZdkVqQ==
   dependencies:
-    is-wsl "^1.1.0"
+    is-docker "^2.0.0"
+    is-wsl "^2.1.1"
 
 optimist@^0.6.1:
   version "0.6.1"
@@ -10870,7 +10326,7 @@ optimist@^0.6.1:
     minimist "~0.0.1"
     wordwrap "~0.0.2"
 
-optionator@^0.8.1, optionator@^0.8.3:
+optionator@^0.8.3:
   version "0.8.3"
   resolved "https://registry.yarnpkg.com/optionator/-/optionator-0.8.3.tgz#84fa1d036fe9d3c7e21d99884b601167ec8fb495"
   integrity sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==
@@ -10956,7 +10412,7 @@ p-limit@^1.1.0:
   dependencies:
     p-try "^1.0.0"
 
-p-limit@^2.0.0:
+p-limit@^2.0.0, p-limit@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/p-limit/-/p-limit-2.3.0.tgz#3dd33c647a214fdfffd835933eb086da0dc21db1"
   integrity sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==
@@ -10977,6 +10433,13 @@ p-locate@^3.0.0:
   dependencies:
     p-limit "^2.0.0"
 
+p-locate@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/p-locate/-/p-locate-4.1.0.tgz#a3428bb7088b3a60292f66919278b7c297ad4f07"
+  integrity sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==
+  dependencies:
+    p-limit "^2.2.0"
+
 p-map-series@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/p-map-series/-/p-map-series-1.0.0.tgz#bf98fe575705658a9e1351befb85ae4c1f07bdca"
@@ -11064,7 +10527,7 @@ parent-module@^1.0.0:
   dependencies:
     callsites "^3.0.0"
 
-parse-asn1@^5.0.0:
+parse-asn1@^5.0.0, parse-asn1@^5.1.5:
   version "5.1.5"
   resolved "https://registry.yarnpkg.com/parse-asn1/-/parse-asn1-5.1.5.tgz#003271343da58dc94cace494faef3d2147ecea0e"
   integrity sha512-jkMYn1dcJqF6d5CpU689bq7w/b5ALS9ROVSpQDPrZsqqesUJii9qutvoT5ltGedNXMO2e16YUWIghG9KxaViTQ==
@@ -11212,6 +10675,11 @@ path-exists@^3.0.0:
   resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-3.0.0.tgz#ce0ebeaa5f78cb18925ea7d810d7b59b010fd515"
   integrity sha1-zg6+ql94yxiSXqfYENe1mwEP1RU=
 
+path-exists@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/path-exists/-/path-exists-4.0.0.tgz#513bdbe2d3b95d7762e8c1137efa195c6c61b5b3"
+  integrity sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==
+
 path-is-absolute@1.0.1, path-is-absolute@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/path-is-absolute/-/path-is-absolute-1.0.1.tgz#174b9268735534ffbc7ace6bf53a5a9e1b5c5f5f"
@@ -11295,7 +10763,7 @@ 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, picomatch@^2.2.1:
+picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.2:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.2.tgz#21f333e9b6b8eaff02468f5146ea406d345f4dad"
   integrity sha512-q0M/9eZHzmr0AulXyPwNfZjtwZ/RBZlbN3K3CErVrk50T2ASYI7Bye0EvekFY3IP1Nt2DHu0re+V2ZHIpMkuWg==
@@ -11332,13 +10800,6 @@ pinkie@^2.0.0:
   resolved "https://registry.yarnpkg.com/pinkie/-/pinkie-2.0.4.tgz#72556b80cfa0d48a974e80e77248e80ed4f7f870"
   integrity sha1-clVrgM+g1IqXToDnckjoDtT3+HA=
 
-pirates@^4.0.0, pirates@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/pirates/-/pirates-4.0.1.tgz#643a92caf894566f91b2b986d2c66950a8e2fb87"
-  integrity sha512-WuNqLTbMI3tmfef2TKxlQmAiLHKtFhlsCZnPIpuv2Ow0RDVO8lfy1Opf4NUzlMXLjPl+Men7AuVdX6TA+s+uGA==
-  dependencies:
-    node-modules-regexp "^1.0.0"
-
 pkg-dir@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/pkg-dir/-/pkg-dir-2.0.0.tgz#f6d5d1109e19d63edf428e0bd57e12777615334b"
@@ -11395,20 +10856,13 @@ polished@^2.3.3:
   dependencies:
     "@babel/runtime" "^7.2.0"
 
-polished@^3.3.1:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/polished/-/polished-3.5.2.tgz#ca132b8cd68f7ffa95ae9d423f03e7a14fda1062"
-  integrity sha512-vWoRDg3gY5RQBtUfcj9MRN10VCIf4EkdUikGxyXItg2Hnwk+eIVtdBiLajN0ldFeT3Vq4r/QNbjrQdhqBKrTug==
-  dependencies:
-    "@babel/runtime" "^7.8.7"
-
-polyfills-loader@^1.5.4:
-  version "1.5.4"
-  resolved "https://registry.yarnpkg.com/polyfills-loader/-/polyfills-loader-1.5.4.tgz#2ec7327cff00c0c596e99d774d00099ce1554b34"
-  integrity sha512-Jttph/AKpsmtw5+HGeCqZYaKTYZ3WswVgnTuSzUZOpChSETXiYQ1eihMiTfPIoD9FpIsTb7Ow0VHTFChBvzw9g==
+polyfills-loader@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/polyfills-loader/-/polyfills-loader-1.6.1.tgz#134ab74b9a6160efb4d72066a5150bfb2228fad3"
+  integrity sha512-GK3jZGLy9nApfRYfHrrO4RYkBkpjiXUVWVdp169g4Y8HV+ZazrGQX46tNpbwP0dtrgHgADyJvZYPfdFuooHy5Q==
   dependencies:
     "@babel/core" "^7.9.0"
-    "@open-wc/building-utils" "^2.16.3"
+    "@open-wc/building-utils" "^2.18.0"
     "@webcomponents/webcomponentsjs" "^2.4.0"
     abortcontroller-polyfill "^1.4.0"
     core-js-bundle "^3.6.0"
@@ -11420,41 +10874,19 @@ polyfills-loader@^1.5.4:
     parse5 "^5.1.1"
     regenerator-runtime "^0.13.3"
     resize-observer-polyfill "^1.5.1"
-    systemjs "^4.0.0"
+    systemjs "^6.3.1"
     terser "^4.6.7"
     whatwg-fetch "^3.0.0"
 
-polyfills-loader@^1.5.6:
-  version "1.5.6"
-  resolved "https://registry.yarnpkg.com/polyfills-loader/-/polyfills-loader-1.5.6.tgz#5bfd107ebeaaab19da84dfeeb3811fc41a49b29e"
-  integrity sha512-01tVO5O0iEX1Pzhamoy24trXmjS75WsqqtcRvMVeg3FnXcB9BPTtkNtiiPh3LWYDQBS+mlngCDxglXK1629jsQ==
-  dependencies:
-    "@babel/core" "^7.9.0"
-    "@open-wc/building-utils" "^2.16.4"
-    "@webcomponents/webcomponentsjs" "^2.4.0"
-    abortcontroller-polyfill "^1.4.0"
-    core-js-bundle "^3.6.0"
-    deepmerge "^4.2.2"
-    dynamic-import-polyfill "^0.1.1"
-    es-module-shims "^0.4.6"
-    html-minifier "^4.0.0"
-    intersection-observer "^0.7.0"
-    parse5 "^5.1.1"
-    regenerator-runtime "^0.13.3"
-    resize-observer-polyfill "^1.5.1"
-    systemjs "^4.0.0"
-    terser "^4.6.7"
-    whatwg-fetch "^3.0.0"
-
-popper.js@^1.14.4, popper.js@^1.14.7, popper.js@^1.15.0:
+popper.js@^1.14.4, popper.js@^1.15.0:
   version "1.16.1"
   resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b"
   integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ==
 
 portfinder@^1.0.21:
-  version "1.0.25"
-  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.25.tgz#254fd337ffba869f4b9d37edc298059cb4d35eca"
-  integrity sha512-6ElJnHBbxVA1XSLgBp7G1FiCkQdlqGzuF7DswL5tcea+E8UpuvPU7beVAjjRwCioTS9ZluNbu+ZyRvgTsmqEBg==
+  version "1.0.26"
+  resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.26.tgz#475658d56ca30bed72ac7f1378ed350bd1b64e70"
+  integrity sha512-Xi7mKxJHHMI3rIUrnm/jjUgwhbYMkp/XKEcZX3aG4BrumLpq3nmoQMX+ClYnDZnZ/New7IatC1no5RX0zo1vXQ==
   dependencies:
     async "^2.6.2"
     debug "^3.1.1"
@@ -11491,11 +10923,6 @@ prelude-ls@~1.1.2:
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.1.2.tgz#21932a549f5e52ffd9a827f570e04be62a97da54"
   integrity sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=
 
-prettier@^1.16.4:
-  version "1.19.1"
-  resolved "https://registry.yarnpkg.com/prettier/-/prettier-1.19.1.tgz#f7d7f5ff8a9cd872a7be4ca142095956a60797cb"
-  integrity sha512-s7PoyDv/II1ObgQunCbB9PdLmUcBZcnWOcxDh7O0N/UwDEsHyqkW+Qh28jW+mVuCdx7gLB0BotYI1Y6uI9iyew==
-
 prettier@^2.0.5:
   version "2.0.5"
   resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.0.5.tgz#d6d56282455243f2f92cc1716692c08aa31522d4"
@@ -11560,7 +10987,7 @@ promise-retry@^1.1.1:
     err-code "^1.0.0"
     retry "^0.10.0"
 
-promise@^7.0.1, promise@^7.1.1:
+promise@^7.1.1:
   version "7.3.1"
   resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
   integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
@@ -11574,7 +11001,7 @@ promzard@^0.3.0:
   dependencies:
     read "1"
 
-prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -11589,9 +11016,9 @@ property-expr@^1.5.0:
   integrity sha512-CGuc0VUTGthpJXL36ydB6jnbyOf/rAHFvmVrJlH+Rg0DqqLFQGAP6hIaxD/G0OAmBJPhXDHuEJigrp0e0wFV6g==
 
 property-information@^5.0.0, property-information@^5.2.0, property-information@^5.3.0:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.4.0.tgz#16e08f13f4e5c4a7be2e4ec431c01c4f8dba869a"
-  integrity sha512-nmMWAm/3vKFGmmOWOcdLjgq/Hlxa+hsuR/px1Lp/UGEyc5A22A6l78Shc2C0E71sPmAqglni+HrS7L7VJ7AUCA==
+  version "5.5.0"
+  resolved "https://registry.yarnpkg.com/property-information/-/property-information-5.5.0.tgz#4dc075d493061a82e2b7d096f406e076ed859943"
+  integrity sha512-RgEbCx2HLa1chNgvChcx+rrCWD0ctBmGSE0M7lVm1yyv4UbvbrWoXp/BkVLZefzjrRBGW8/Js6uh/BnlHXFyjA==
   dependencies:
     xtend "^4.0.0"
 
@@ -11646,111 +11073,6 @@ public-encrypt@^4.0.0:
     randombytes "^2.0.1"
     safe-buffer "^5.1.2"
 
-pug-attrs@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pug-attrs/-/pug-attrs-2.0.4.tgz#b2f44c439e4eb4ad5d4ef25cac20d18ad28cc336"
-  integrity sha512-TaZ4Z2TWUPDJcV3wjU3RtUXMrd3kM4Wzjbe3EWnSsZPsJ3LDI0F3yCnf2/W7PPFF+edUFQ0HgDL1IoxSz5K8EQ==
-  dependencies:
-    constantinople "^3.0.1"
-    js-stringify "^1.0.1"
-    pug-runtime "^2.0.5"
-
-pug-code-gen@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/pug-code-gen/-/pug-code-gen-2.0.2.tgz#ad0967162aea077dcf787838d94ed14acb0217c2"
-  integrity sha512-kROFWv/AHx/9CRgoGJeRSm+4mLWchbgpRzTEn8XCiwwOy6Vh0gAClS8Vh5TEJ9DBjaP8wCjS3J6HKsEsYdvaCw==
-  dependencies:
-    constantinople "^3.1.2"
-    doctypes "^1.1.0"
-    js-stringify "^1.0.1"
-    pug-attrs "^2.0.4"
-    pug-error "^1.3.3"
-    pug-runtime "^2.0.5"
-    void-elements "^2.0.1"
-    with "^5.0.0"
-
-pug-error@^1.3.3:
-  version "1.3.3"
-  resolved "https://registry.yarnpkg.com/pug-error/-/pug-error-1.3.3.tgz#f342fb008752d58034c185de03602dd9ffe15fa6"
-  integrity sha512-qE3YhESP2mRAWMFJgKdtT5D7ckThRScXRwkfo+Erqga7dyJdY3ZquspprMCj/9sJ2ijm5hXFWQE/A3l4poMWiQ==
-
-pug-filters@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.yarnpkg.com/pug-filters/-/pug-filters-3.1.1.tgz#ab2cc82db9eeccf578bda89130e252a0db026aa7"
-  integrity sha512-lFfjNyGEyVWC4BwX0WyvkoWLapI5xHSM3xZJFUhx4JM4XyyRdO8Aucc6pCygnqV2uSgJFaJWW3Ft1wCWSoQkQg==
-  dependencies:
-    clean-css "^4.1.11"
-    constantinople "^3.0.1"
-    jstransformer "1.0.0"
-    pug-error "^1.3.3"
-    pug-walk "^1.1.8"
-    resolve "^1.1.6"
-    uglify-js "^2.6.1"
-
-pug-lexer@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/pug-lexer/-/pug-lexer-4.1.0.tgz#531cde48c7c0b1fcbbc2b85485c8665e31489cfd"
-  integrity sha512-i55yzEBtjm0mlplW4LoANq7k3S8gDdfC6+LThGEvsK4FuobcKfDAwt6V4jKPH9RtiE3a2Akfg5UpafZ1OksaPA==
-  dependencies:
-    character-parser "^2.1.1"
-    is-expression "^3.0.0"
-    pug-error "^1.3.3"
-
-pug-linker@^3.0.6:
-  version "3.0.6"
-  resolved "https://registry.yarnpkg.com/pug-linker/-/pug-linker-3.0.6.tgz#f5bf218b0efd65ce6670f7afc51658d0f82989fb"
-  integrity sha512-bagfuHttfQOpANGy1Y6NJ+0mNb7dD2MswFG2ZKj22s8g0wVsojpRlqveEQHmgXXcfROB2RT6oqbPYr9EN2ZWzg==
-  dependencies:
-    pug-error "^1.3.3"
-    pug-walk "^1.1.8"
-
-pug-load@^2.0.12:
-  version "2.0.12"
-  resolved "https://registry.yarnpkg.com/pug-load/-/pug-load-2.0.12.tgz#d38c85eb85f6e2f704dea14dcca94144d35d3e7b"
-  integrity sha512-UqpgGpyyXRYgJs/X60sE6SIf8UBsmcHYKNaOccyVLEuT6OPBIMo6xMPhoJnqtB3Q3BbO4Z3Bjz5qDsUWh4rXsg==
-  dependencies:
-    object-assign "^4.1.0"
-    pug-walk "^1.1.8"
-
-pug-parser@^5.0.1:
-  version "5.0.1"
-  resolved "https://registry.yarnpkg.com/pug-parser/-/pug-parser-5.0.1.tgz#03e7ada48b6840bd3822f867d7d90f842d0ffdc9"
-  integrity sha512-nGHqK+w07p5/PsPIyzkTQfzlYfuqoiGjaoqHv1LjOv2ZLXmGX1O+4Vcvps+P4LhxZ3drYSljjq4b+Naid126wA==
-  dependencies:
-    pug-error "^1.3.3"
-    token-stream "0.0.1"
-
-pug-runtime@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/pug-runtime/-/pug-runtime-2.0.5.tgz#6da7976c36bf22f68e733c359240d8ae7a32953a"
-  integrity sha512-P+rXKn9un4fQY77wtpcuFyvFaBww7/91f3jHa154qU26qFAnOe6SW1CbIDcxiG5lLK9HazYrMCCuDvNgDQNptw==
-
-pug-strip-comments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/pug-strip-comments/-/pug-strip-comments-1.0.4.tgz#cc1b6de1f6e8f5931cf02ec66cdffd3f50eaf8a8"
-  integrity sha512-i5j/9CS4yFhSxHp5iKPHwigaig/VV9g+FgReLJWWHEHbvKsbqL0oP/K5ubuLco6Wu3Kan5p7u7qk8A4oLLh6vw==
-  dependencies:
-    pug-error "^1.3.3"
-
-pug-walk@^1.1.8:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/pug-walk/-/pug-walk-1.1.8.tgz#b408f67f27912f8c21da2f45b7230c4bd2a5ea7a"
-  integrity sha512-GMu3M5nUL3fju4/egXwZO0XLi6fW/K3T3VTgFQ14GxNi8btlxgT5qZL//JwZFm/2Fa64J/PNS8AZeys3wiMkVA==
-
-pug@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/pug/-/pug-2.0.4.tgz#ee7682ec0a60494b38d48a88f05f3b0ac931377d"
-  integrity sha512-XhoaDlvi6NIzL49nu094R2NA6P37ijtgMDuWE+ofekDChvfKnzFal60bhSdiy8y2PBO6fmz3oMEIcfpBVRUdvw==
-  dependencies:
-    pug-code-gen "^2.0.2"
-    pug-filters "^3.1.1"
-    pug-lexer "^4.1.0"
-    pug-linker "^3.0.6"
-    pug-load "^2.0.12"
-    pug-parser "^5.0.1"
-    pug-runtime "^2.0.5"
-    pug-strip-comments "^1.0.4"
-
 pump@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/pump/-/pump-2.0.1.tgz#12399add6e4cf7526d973cbc8b5ce2e2908b3909"
@@ -11806,10 +11128,10 @@ qs@6.7.0:
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.7.0.tgz#41dc1a015e3d581f1621776be31afb2876a9b1bc"
   integrity sha512-VCdBRNFTX1fyE7Nb6FYoURo/SPe62QCaAyzJvUjwRaIsc+NePBEniHlvxFmmX56+HZphIGtV0XeCirBtpDrTyQ==
 
-qs@^6.5.2, qs@^6.6.0:
-  version "6.9.3"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.3.tgz#bfadcd296c2d549f1dffa560619132c977f5008e"
-  integrity sha512-EbZYNarm6138UKKq46tdx08Yo/q9ZhFoAXAI1meAFd2GtbRDhbZY2WQSICskT0c5q99aFzLG1D4nvTk9tqfXIw==
+qs@^6.5.2:
+  version "6.9.4"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.4.tgz#9090b290d1f91728d3c22e54843ca44aea5ab687"
+  integrity sha512-A1kFqHekCTM7cz0udomYUoYNWjBebHm/5wzU/XqrBRBNWectVH0QIiN+NEcZ0Dte5hvzHwbr8+XQmguPhJ6WdQ==
 
 qs@~6.5.2:
   version "6.5.2"
@@ -11821,7 +11143,7 @@ querystring-es3@^0.2.0:
   resolved "https://registry.yarnpkg.com/querystring-es3/-/querystring-es3-0.2.1.tgz#9ec61f79049875707d69414596fd907a4d711e73"
   integrity sha1-nsYfeQSYdXB9aUFFlv2Qek1xHnM=
 
-querystring@0.2.0, querystring@^0.2.0:
+querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
   integrity sha1-sgmEkgO7Jd+CDadW50cAWHhSFiA=
@@ -11831,6 +11153,11 @@ quick-lru@^1.0.0:
   resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-1.1.0.tgz#4360b17c61136ad38078397ff11416e186dcfbb8"
   integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
 
+quick-lru@^4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/quick-lru/-/quick-lru-4.0.1.tgz#5b8878f113a58217848c6482026c73e1ba57727f"
+  integrity sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==
+
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a"
@@ -11871,14 +11198,14 @@ rc@^1.2.7, rc@~1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-clientside-effect@^1.2.0, react-clientside-effect@^1.2.2:
+react-clientside-effect@^1.2.0:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/react-clientside-effect/-/react-clientside-effect-1.2.2.tgz#6212fb0e07b204e714581dd51992603d1accc837"
   integrity sha512-nRmoyxeok5PBO6ytPvSjKp9xwXg9xagoTK1mMjwnQxqM9Hd7MNPl+LS1bOSOe+CV2+4fnEquc7H/S8QD3q697A==
   dependencies:
     "@babel/runtime" "^7.0.0"
 
-react-dom@^16.8.1, react-dom@^16.8.3:
+react-dom@^16.8.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==
@@ -11888,24 +11215,11 @@ react-dom@^16.8.1, react-dom@^16.8.3:
     prop-types "^15.6.2"
     scheduler "^0.19.1"
 
-react-element-to-jsx-string@^14.1.0:
-  version "14.3.1"
-  resolved "https://registry.yarnpkg.com/react-element-to-jsx-string/-/react-element-to-jsx-string-14.3.1.tgz#a08fa6e46eb76061aca7eabc2e70f433583cb203"
-  integrity sha512-LRdQWRB+xcVPOL4PU4RYuTg6dUJ/FNmaQ8ls6w38YbzkbV6Yr5tFNESroub9GiSghtnMq8dQg2LcNN5aMIDzVg==
-  dependencies:
-    "@base2/pretty-print-object" "1.0.0"
-    is-plain-object "3.0.0"
-
 react-fast-compare@^2.0.2:
   version "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.0.1"
-  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.0.1.tgz#884d339ce1341aad22392e7a88664c71da48600e"
-  integrity sha512-C5vP0J644ofZGd54P8++O7AvrqMEbrGf8Ue0eAUJLJyw168dAX2aiYyX/zcY/eSNwO0IDjsKUaLE6n83D+TnEg==
-
 react-focus-lock@^1.17.7:
   version "1.19.1"
   resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-1.19.1.tgz#2f3429793edaefe2d077121f973ce5a3c7a0651a"
@@ -11916,18 +11230,6 @@ react-focus-lock@^1.17.7:
     prop-types "^15.6.2"
     react-clientside-effect "^1.2.0"
 
-react-focus-lock@^2.1.0:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/react-focus-lock/-/react-focus-lock-2.3.1.tgz#9d5d85899773609c7eefa4fc54fff6a0f5f2fc47"
-  integrity sha512-j15cWLPzH0gOmRrUg01C09Peu8qbcdVqr6Bjyfxj80cNZmH+idk/bNBYEDSmkAtwkXI+xEYWSmHYqtaQhZ8iUQ==
-  dependencies:
-    "@babel/runtime" "^7.0.0"
-    focus-lock "^0.6.7"
-    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@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-0.2.0.tgz#d20d8725c1dcdcc95d54e281a1040af47c3abffa"
@@ -11938,17 +11240,6 @@ react-helmet-async@^0.2.0:
     react-fast-compare "^2.0.2"
     shallowequal "^1.0.2"
 
-react-helmet-async@^1.0.2:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/react-helmet-async/-/react-helmet-async-1.0.5.tgz#d2557bf274e32280a877ecb648b81740d8fb0bf1"
-  integrity sha512-nqGA5a1HRZsw1lzDn+bYuUN2FyHRiY+DgjRVhEOKVBDTrrqJCpCIOuY/IRHdobr+KD1gGTP0WabZsTrIHnFKJA==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
-    invariant "^2.2.4"
-    prop-types "^15.7.2"
-    react-fast-compare "^3.0.1"
-    shallowequal "^1.1.0"
-
 react-inspector@^2.3.0, react-inspector@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/react-inspector/-/react-inspector-2.3.1.tgz#f0eb7f520669b545b441af9d38ec6d706e5f649c"
@@ -11968,7 +11259,7 @@ react-lifecycles-compat@^3.0.2, react-lifecycles-compat@^3.0.4:
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
   integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
 
-react-popper-tooltip@^2.8.0, react-popper-tooltip@^2.8.3:
+react-popper-tooltip@^2.8.0:
   version "2.11.1"
   resolved "https://registry.yarnpkg.com/react-popper-tooltip/-/react-popper-tooltip-2.11.1.tgz#3c4bdfd8bc10d1c2b9a162e859bab8958f5b2644"
   integrity sha512-04A2f24GhyyMicKvg/koIOQ5BzlrRbKiAgP6L+Pdj1MVX3yJ1NeZ8+EidndQsbejFT55oW1b++wg2Z8KlAyhfQ==
@@ -11989,17 +11280,6 @@ react-popper@^1.3.7:
     typed-styles "^0.0.7"
     warning "^4.0.2"
 
-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 "~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"
   resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-8.1.0.tgz#59103ff17a828a27ed7c8f035ae2558f09b6b78c"
@@ -12011,7 +11291,7 @@ react-syntax-highlighter@^8.0.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
-react-textarea-autosize@^7.0.4, react-textarea-autosize@^7.1.0:
+react-textarea-autosize@^7.0.4:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-7.1.2.tgz#70fdb333ef86bcca72717e25e623e90c336e2cda"
   integrity sha512-uH3ORCsCa3C6LHxExExhF4jHoXYCQwE5oECmrRsunlspaDAbS4mGKNlWZqjLfInWtFQcf0o1n1jC/NGXFdUBCg==
@@ -12019,7 +11299,7 @@ react-textarea-autosize@^7.0.4, react-textarea-autosize@^7.1.0:
     "@babel/runtime" "^7.1.2"
     prop-types "^15.6.0"
 
-react@^16.8.1, react@^16.8.3:
+react@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react/-/react-16.13.1.tgz#2e818822f1a9743122c063d6410d85c1e3afe48e"
   integrity sha512-YMZQQq32xHLX0bz5Mnibv1/LHb3Sqzngu7xstSM+vrkE5Kzr9xE0yMByK5kMoTK30YVJE61WfbxIFFvfeDKT1w==
@@ -12093,6 +11373,15 @@ read-pkg-up@^4.0.0:
     find-up "^3.0.0"
     read-pkg "^3.0.0"
 
+read-pkg-up@^7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-7.0.1.tgz#f3a6135758459733ae2b95638056e1854e7ef507"
+  integrity sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==
+  dependencies:
+    find-up "^4.1.0"
+    read-pkg "^5.2.0"
+    type-fest "^0.8.1"
+
 read-pkg@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-1.1.0.tgz#f5ffaa5ecd29cb31c0474bca7d756b6bb29e3f28"
@@ -12129,6 +11418,16 @@ read-pkg@^4.0.1:
     parse-json "^4.0.0"
     pify "^3.0.0"
 
+read-pkg@^5.2.0:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
+  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
+  dependencies:
+    "@types/normalize-package-data" "^2.4.0"
+    normalize-package-data "^2.5.0"
+    parse-json "^5.0.0"
+    type-fest "^0.6.0"
+
 read@1, read@~1.0.1:
   version "1.0.7"
   resolved "https://registry.yarnpkg.com/read/-/read-1.0.7.tgz#b3da19bd052431a97671d44a42634adf710b40c4"
@@ -12149,7 +11448,7 @@ read@1, read@~1.0.1:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-"readable-stream@2 || 3", readable-stream@^3.0.2, readable-stream@^3.1.1, readable-stream@^3.4.0:
+"readable-stream@2 || 3", readable-stream@^3.0.2, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -12191,33 +11490,6 @@ readdirp@~3.4.0:
   dependencies:
     picomatch "^2.2.1"
 
-realpath-native@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/realpath-native/-/realpath-native-1.1.0.tgz#2003294fea23fb0672f2476ebe22fcf498a2d65c"
-  integrity sha512-wlgPA6cCIIg9gKz0fgAPjnzh4yR/LnXovwuo9hvyGvx3h8nX4+/iLZplfUWasXpqD8BdnGnP5njOFjkUwPzvjA==
-  dependencies:
-    util.promisify "^1.0.0"
-
-recast@^0.17.3:
-  version "0.17.6"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.17.6.tgz#64ae98d0d2dfb10ff92ff5fb9ffb7371823b69fa"
-  integrity sha512-yoQRMRrK1lszNtbkGyM4kN45AwylV5hMiuEveUBlxytUViWevjvX6w+tzJt1LH4cfUhWt4NZvy3ThIhu6+m5wQ==
-  dependencies:
-    ast-types "0.12.4"
-    esprima "~4.0.0"
-    private "^0.1.8"
-    source-map "~0.6.1"
-
-recast@^0.18.1:
-  version "0.18.10"
-  resolved "https://registry.yarnpkg.com/recast/-/recast-0.18.10.tgz#605ebbe621511eb89b6356a7e224bff66ed91478"
-  integrity sha512-XNvYvkfdAN9QewbrxeTOjgINkdY/odTgTS56ZNEWL9Ml0weT4T3sFtvnTuF+Gxyu46ANcRm1ntrF6F5LAJPAaQ==
-  dependencies:
-    ast-types "0.13.3"
-    esprima "~4.0.0"
-    private "^0.1.8"
-    source-map "~0.6.1"
-
 recompose@^0.30.0:
   version "0.30.0"
   resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.30.0.tgz#82773641b3927e8c7d24a0d87d65aeeba18aabd0"
@@ -12246,12 +11518,20 @@ redent@^2.0.0:
     indent-string "^3.0.0"
     strip-indent "^2.0.0"
 
+redent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-3.0.0.tgz#e557b7998316bb53c9f1f56fa626352c6963059f"
+  integrity sha512-6tDA8g98We0zd0GvVeMT9arEOnTw9qM03L9cJXaCjrip1OO764RDBLBfrB4cwzNGDj5OA5ioymC9GkizgWJDUg==
+  dependencies:
+    indent-string "^4.0.0"
+    strip-indent "^3.0.0"
+
 reduce-flatten@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-2.0.0.tgz#734fd84e65f375d7ca4465c69798c25c9d10ae27"
   integrity sha512-EJ4UNY/U1t2P/2k6oqotuX2Cc3T6nxJwsM0N0asT7dhrtH1ltUxDn4NalSYmPE2rCkVpcf/X6R0wDwcFpzhd4w==
 
-refractor@^2.4.1:
+refractor@^2.4.1, refractor@^2.6.2:
   version "2.10.1"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-2.10.1.tgz#166c32f114ed16fd96190ad21d5193d3afc7d34e"
   integrity sha512-Xh9o7hQiQlDbxo5/XkOX6H+x/q8rmlmZKr97Ie1Q8ZM32IRRd3B/UxuA/yXDW79DBSXGWxm2yRTbcTVmAciJRw==
@@ -12350,6 +11630,16 @@ rehype-autolink-headings@^2.0.5:
     hast-util-is-element "^1.0.0"
     unist-util-visit "^1.1.0"
 
+rehype-prism-template@^0.4.1:
+  version "0.4.1"
+  resolved "https://registry.yarnpkg.com/rehype-prism-template/-/rehype-prism-template-0.4.1.tgz#14696e28adb18e17d4cc2f397b1410ee334b36b7"
+  integrity sha512-A/3ZJ2Lj4q9DjKDwJaVNJdr1Sqkjlh4z52tHM/a0eBrSst9h3QbTG/cSb+umY16IcbsvJOtTap3kZlFVyQ2JUg==
+  dependencies:
+    hast-util-to-string "^1.0.0"
+    refractor "^2.6.2"
+    underscore "^1.9.1"
+    unist-util-visit "^1.1.3"
+
 rehype-raw@^4.0.1:
   version "4.0.2"
   resolved "https://registry.yarnpkg.com/rehype-raw/-/rehype-raw-4.0.2.tgz#5d3191689df96c8c651ce5f51a6c668d2c07b9c8"
@@ -12381,16 +11671,10 @@ relateurl@^0.2.7:
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
 
-remark-external-links@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/remark-external-links/-/remark-external-links-5.0.0.tgz#e7fc0e0cc4c92d33fb195b08ed1dc691fdb1689a"
-  integrity sha512-lYnZGNN10N3YGMvO95Zup4hZ+VHI82JgcrGJfuxOLQExoho/iNhlrPVSkmdapYQl928pkOn4YOgJf/0pdZkteA==
-  dependencies:
-    extend "^3.0.0"
-    is-absolute-url "^3.0.0"
-    mdast-util-definitions "^1.2.3"
-    space-separated-tokens "^1.1.2"
-    unist-util-visit "^1.4.0"
+remark-footnotes@1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/remark-footnotes/-/remark-footnotes-1.0.0.tgz#9c7a97f9a89397858a50033373020b1ea2aad011"
+  integrity sha512-X9Ncj4cj3/CIvLI2Z9IobHtVi8FVdUrdJkCNaL9kdX8ohfsi18DXHsCVd/A7ssARBdccdDb5ODnt62WuEWaM/g==
 
 remark-html@^10.0.0:
   version "10.0.0"
@@ -12403,48 +11687,49 @@ remark-html@^10.0.0:
     xtend "^4.0.1"
 
 remark-html@^11.0.1:
-  version "11.0.1"
-  resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-11.0.1.tgz#fe12671be9dd67e75dd90dfb4d78c9d42f2e11ec"
-  integrity sha512-bz7tSu9kDbaRNaiqQWrgXITkqJsZXoc2fjau+ms7WA4vflDoB+xMdY0QfNhUpGgmAv4SdDD1m+3BxWRHLizmiQ==
+  version "11.0.2"
+  resolved "https://registry.yarnpkg.com/remark-html/-/remark-html-11.0.2.tgz#76f6f7c8981c736f01cb65f8853dbe5c2e546dfa"
+  integrity sha512-U7qPKZq6Aai+UTpH5YrblLvqvdSUCRA4YmZYRTtbtknm/WUGmNUI0dvThbSuTNSf6TtC8btmbbScWi1wtUIxnw==
   dependencies:
     hast-util-sanitize "^2.0.0"
     hast-util-to-html "^7.0.0"
-    mdast-util-to-hast "^8.0.0"
+    mdast-util-to-hast "^8.2.0"
     xtend "^4.0.1"
 
-remark-mdx@^1.5.8:
-  version "1.5.8"
-  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.5.8.tgz#81fd9085e56ea534b977d08d6f170899138b3f38"
-  integrity sha512-wtqqsDuO/mU/ucEo/CDp0L8SPdS2oOE6PRsMm+lQ9TLmqgep4MBmyH8bLpoc8Wf7yjNmae/5yBzUN1YUvR/SsQ==
+remark-mdx@^1.6.1:
+  version "1.6.1"
+  resolved "https://registry.yarnpkg.com/remark-mdx/-/remark-mdx-1.6.1.tgz#693aa40d0c98afdd556e7e50f2ca263d0a845e19"
+  integrity sha512-UyCqqYFv9l5dstX29QpdqMprBHyUYUEQHOUe0MdFUIm1XATxfVGHbRPtVBFz4ccd5NV1UL/rmsruo9WOswwmpQ==
   dependencies:
-    "@babel/core" "7.8.4"
+    "@babel/core" "7.9.0"
     "@babel/helper-plugin-utils" "7.8.3"
-    "@babel/plugin-proposal-object-rest-spread" "7.8.3"
+    "@babel/plugin-proposal-object-rest-spread" "7.9.5"
     "@babel/plugin-syntax-jsx" "7.8.3"
-    "@mdx-js/util" "^1.5.8"
+    "@mdx-js/util" "^1.6.1"
     is-alphabetical "1.0.4"
-    remark-parse "7.0.2"
-    unified "8.4.2"
+    remark-parse "8.0.2"
+    unified "9.0.0"
 
-remark-parse@7.0.2, remark-parse@^7.0.0, remark-parse@^7.0.2:
-  version "7.0.2"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-7.0.2.tgz#41e7170d9c1d96c3d32cf1109600a9ed50dba7cf"
-  integrity sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==
+remark-parse@8.0.2, remark-parse@^8.0.0:
+  version "8.0.2"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.2.tgz#5999bc0b9c2e3edc038800a64ff103d0890b318b"
+  integrity sha512-eMI6kMRjsAGpMXXBAywJwiwAse+KNpmt+BK55Oofy4KvBZEqUDj6mWbGLJZrujoPIPPxDXzn3T9baRlpsm2jnQ==
   dependencies:
+    ccount "^1.0.0"
     collapse-white-space "^1.0.2"
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
     is-whitespace-character "^1.0.0"
     is-word-character "^1.0.0"
     markdown-escapes "^1.0.0"
-    parse-entities "^1.1.0"
+    parse-entities "^2.0.0"
     repeat-string "^1.5.4"
     state-toggle "^1.0.0"
     trim "0.0.1"
     trim-trailing-lines "^1.0.0"
     unherit "^1.0.4"
-    unist-util-remove-position "^1.0.0"
-    vfile-location "^2.0.0"
+    unist-util-remove-position "^2.0.0"
+    vfile-location "^3.0.0"
     xtend "^4.0.1"
 
 remark-parse@^4.0.0:
@@ -12468,26 +11753,25 @@ remark-parse@^4.0.0:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
-remark-parse@^8.0.0:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-8.0.1.tgz#7fc95d8f2b58fc6791cffb54803c763eb3756743"
-  integrity sha512-Ye/5W57tdQZWsfkuVyRq9SUWRgECHnDsMuyUMzdSKpTbNPkZeGtoYfsrkeSi4+Xyl0mhcPPddHITXPcCPHrl3w==
+remark-parse@^7.0.0, remark-parse@^7.0.2:
+  version "7.0.2"
+  resolved "https://registry.yarnpkg.com/remark-parse/-/remark-parse-7.0.2.tgz#41e7170d9c1d96c3d32cf1109600a9ed50dba7cf"
+  integrity sha512-9+my0lQS80IQkYXsMA8Sg6m9QfXYJBnXjWYN5U+kFc5/n69t+XZVXU/ZBYr3cYH8FheEGf1v87rkFDhJ8bVgMA==
   dependencies:
-    ccount "^1.0.0"
     collapse-white-space "^1.0.2"
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
     is-whitespace-character "^1.0.0"
     is-word-character "^1.0.0"
     markdown-escapes "^1.0.0"
-    parse-entities "^2.0.0"
+    parse-entities "^1.1.0"
     repeat-string "^1.5.4"
     state-toggle "^1.0.0"
     trim "0.0.1"
     trim-trailing-lines "^1.0.0"
     unherit "^1.0.4"
-    unist-util-remove-position "^2.0.0"
-    vfile-location "^3.0.0"
+    unist-util-remove-position "^1.0.0"
+    vfile-location "^2.0.0"
     xtend "^4.0.1"
 
 remark-rehype@^5.0.0:
@@ -12506,12 +11790,12 @@ remark-slug@^5.1.2:
     mdast-util-to-string "^1.0.0"
     unist-util-visit "^1.0.0"
 
-remark-squeeze-paragraphs@3.0.4:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-3.0.4.tgz#9fe50c3bf3b572dd88754cd426ada007c0b8dc5f"
-  integrity sha512-Wmz5Yj9q+W1oryo8BV17JrOXZgUKVcpJ2ApE2pwnoHwhFKSk4Wp2PmFNbmJMgYSqAdFwfkoe+TSYop5Fy8wMgA==
+remark-squeeze-paragraphs@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-4.0.0.tgz#76eb0e085295131c84748c8e43810159c5653ead"
+  integrity sha512-8qRqmL9F4nuLPIgl92XUuxI3pFxize+F1H0e/W3llTk0UsjJaj01+RrirkMw7P21RKe4X6goQhYRSvNWX+70Rw==
   dependencies:
-    mdast-squeeze-paragraphs "^3.0.0"
+    mdast-squeeze-paragraphs "^4.0.0"
 
 remark-stringify@^7.0.0:
   version "7.0.4"
@@ -12574,7 +11858,7 @@ repeat-element@^1.1.2:
   resolved "https://registry.yarnpkg.com/repeat-element/-/repeat-element-1.1.3.tgz#782e0d825c0c5a3bb39731f84efee6b742e6b1ce"
   integrity sha512-ahGq0ZnV5m5XtZLMb+vP76kcAM5nkLqk0lpqAuojSKGgQtn4eRi4ZZGm2olo2zKFH+sMsWaqOCW1dqAnOru72g==
 
-repeat-string@^1.5.2, repeat-string@^1.5.4, repeat-string@^1.6.1:
+repeat-string@^1.5.4, repeat-string@^1.6.1:
   version "1.6.1"
   resolved "https://registry.yarnpkg.com/repeat-string/-/repeat-string-1.6.1.tgz#8dcae470e1c88abc2d600fff4a776286da75e637"
   integrity sha1-jcrkcOHIirwtYA//Sndihtp15jc=
@@ -12586,11 +11870,16 @@ repeating@^2.0.0:
   dependencies:
     is-finite "^1.0.0"
 
-replace-ext@1.0.0, replace-ext@^1.0.0:
+replace-ext@1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.0.tgz#de63128373fcbf7c3ccfa4de5a480c45a67958eb"
   integrity sha1-3mMSg3P8v3w8z6TeWkgMRaZ5WOs=
 
+replace-ext@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/replace-ext/-/replace-ext-1.0.1.tgz#2d6d996d04a15855d967443631dd5f77825b016a"
+  integrity sha512-yD5BHCe7quCgBph4rMQ+0KkIRKwWCrHDOX1p1Gp6HwjPM5kVoCdKGNhN7ydqqsX6lJEnQDKZ/tFMiEdQ1dvPEw==
+
 request@^2.88.0:
   version "2.88.2"
   resolved "https://registry.yarnpkg.com/request/-/request-2.88.2.tgz#d73c918731cb5a87da047e207234146f664d12b3"
@@ -12691,14 +11980,7 @@ resolve-url@^0.2.1:
   resolved "https://registry.yarnpkg.com/resolve-url/-/resolve-url-0.2.1.tgz#2c637fe77c893afd2a663fe21aa9080068e2052a"
   integrity sha1-LGN/53yJOv0qZj/iGqkIAGjiBSo=
 
-resolve@^1.1.6, resolve@^1.10.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.3.2:
-  version "1.16.1"
-  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.16.1.tgz#49fac5d8bacf1fd53f200fa51247ae736175832c"
-  integrity sha512-rmAglCSqWWMrrBv/XM6sW0NuRFiKViw/W4d9EbC4pt+49H8JwHy+mcGmALTEg504AUDcLTvb1T2q3E9AnmY+ig==
-  dependencies:
-    path-parse "^1.0.6"
-
-resolve@^1.8.1:
+resolve@^1.10.0, resolve@^1.11.1, resolve@^1.12.0, resolve@^1.13.1, resolve@^1.14.2, resolve@^1.3.2, resolve@^1.8.1:
   version "1.17.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"
   integrity sha512-ic+7JYiV8Vi2yzQGFWOkiZD5Z9z7O2Zhm9XMaTxdJExKasieFCr+yXZ/WmXsckHiKl12ar0y6XiXDx3m4RHn1w==
@@ -12736,14 +12018,7 @@ rfdc@^1.1.4:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.1.4.tgz#ba72cc1367a0ccd9cf81a870b3b58bd3ad07f8c2"
   integrity sha512-5C9HXdzK8EAqN7JDif30jqsBzavB7wLpaubisuQIGHWf2gUXSpzy6ArX/+Da8RjFpagWsCn+pIgxTMAmKw9Zug==
 
-right-align@^0.1.1:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/right-align/-/right-align-0.1.3.tgz#61339b722fe6a3515689210d24e14c96148613ef"
-  integrity sha1-YTObci/mo1FWiSENJOFMlhSGE+8=
-  dependencies:
-    align-text "^0.1.1"
-
-rimraf@2.6.3, rimraf@~2.6.2:
+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==
@@ -12830,31 +12105,17 @@ rollup@^1.31.1:
     "@types/node" "*"
     acorn "^7.1.0"
 
-rollup@^2.0.0:
-  version "2.7.5"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.7.5.tgz#dd4e4518b58348a841aefa47bea544f3be27a76f"
-  integrity sha512-xQSM8uzhgtF6tTnTVEvOQThrcG3LPUP3T/4l4EukzDp0kbTY1QRDuXjiwtYzs9odKj9Bj/PccRG6viFfS7DmCQ==
+rollup@^2.0.0, rollup@^2.7.2:
+  version "2.10.5"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.10.5.tgz#a2e6735fbcbd64453f8aa5d7b5ec1b421974f92c"
+  integrity sha512-05WRM/tjmPYwhOBvm/G9Qwa/HnAqn0TK0XxLDLQzoM4XdSmKjPBvhBl+U+Q/C6VJsucljyTQjGkZD503mjbPQg==
   optionalDependencies:
     fsevents "~2.1.2"
 
-rollup@^2.7.2:
-  version "2.7.3"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.7.3.tgz#24ebb08533b9ca6bc5a7aef8100e155e50035c31"
-  integrity sha512-lAWJGZ5BQzcu/5fhMKGJrh5oy9LQUoaCid8cQV8k+E2vE9E/UWptzcM+bSBg+u8akORsvnybsqQUE/wVChIazg==
-  optionalDependencies:
-    fsevents "~2.1.2"
-
-rsvp@^4.8.4:
-  version "4.8.5"
-  resolved "https://registry.yarnpkg.com/rsvp/-/rsvp-4.8.5.tgz#c8f155311d167f68f21e168df71ec5b083113734"
-  integrity sha512-nfMOlASu9OnRJo1mbEk2cz0D56a1MBNrJ7orjRZQG10XDyuvwksKbuXNp6qa+kbn839HwjwhBzhFmdsaEAfauA==
-
 run-async@^2.2.0, run-async@^2.4.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.0.tgz#e59054a5b86876cfae07f431d18cbaddc594f1e8"
-  integrity sha512-xJTbh/d7Lm7SBhc1tNvTpeCHaEzoyxPrqNlvSdMfBTYwaY++UJFyXUOxAtsRUXjlqOfj8luNaR9vjCh4KeV+pg==
-  dependencies:
-    is-promise "^2.1.0"
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.4.1.tgz#8440eccf99ea3e70bd409d49aab88e10c189a455"
+  integrity sha512-tvVnVv01b8c1RrA6Ep7JkStj85Guv/YrMcwqYQnwjsAS2cTmmPGBBjAjpCW7RrSodNSoE2/qg9O4bceNvUuDgQ==
 
 run-node@^1.0.0:
   version "1.0.0"
@@ -12881,9 +12142,9 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
 safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@^5.2.0, safe-buffer@~5.2.0:
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
-  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
+  integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
 
 safe-regex@^1.1.0:
   version "1.1.0"
@@ -12897,21 +12158,6 @@ safe-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
 
-sane@^4.0.3:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/sane/-/sane-4.1.0.tgz#ed881fd922733a6c461bc189dc2b6c006f3ffded"
-  integrity sha512-hhbzAgTIX8O7SHfp2c8/kREfEn4qO/9q8C9beyY6+tvZ87EpoZ3i1RIEvp27YBswnNbY9mWd6paKVmKbAgLfZA==
-  dependencies:
-    "@cnakazawa/watch" "^1.0.3"
-    anymatch "^2.0.0"
-    capture-exit "^2.0.0"
-    exec-sh "^0.3.2"
-    execa "^1.0.0"
-    fb-watchman "^2.0.0"
-    micromatch "^3.1.4"
-    minimist "^1.1.1"
-    walker "~1.0.5"
-
 scheduler@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.19.1.tgz#4f3e2ed2c1a7d65681f4c854fa8c5a1ccb40f196"
@@ -13019,12 +12265,7 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
-shallow-equal@^1.1.0:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
-  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
-
-shallowequal@^1.0.2, shallowequal@^1.1.0:
+shallowequal@^1.0.2:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
   integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
@@ -13077,26 +12318,6 @@ simple-git@^1.85.0:
   dependencies:
     debug "^4.0.1"
 
-simplebar-react@^1.0.0-alpha.6:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-1.2.3.tgz#bd81fa9827628470e9470d06caef6ece15e1c882"
-  integrity sha512-1EOWJzFC7eqHUp1igD1/tb8GBv5aPQA5ZMvpeDnVkpNJ3jAuvmrL2kir3HuijlxhG7njvw9ssxjjBa89E5DrJg==
-  dependencies:
-    prop-types "^15.6.1"
-    simplebar "^4.2.3"
-
-simplebar@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.2.3.tgz#dac40aced299c17928329eab3d5e6e795fafc10c"
-  integrity sha512-9no0pK7/1y+8/oTF3sy/+kx0PjQ3uk4cYwld5F1CJGk2gx+prRyUq8GRfvcVLq5niYWSozZdX73a2wIr1o9l/g==
-  dependencies:
-    can-use-dom "^0.1.0"
-    core-js "^3.0.1"
-    lodash.debounce "^4.0.8"
-    lodash.memoize "^4.1.2"
-    lodash.throttle "^4.1.1"
-    resize-observer-polyfill "^1.5.1"
-
 sinon-chai@^3.3.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/sinon-chai/-/sinon-chai-3.5.0.tgz#c9a78304b0e15befe57ef68e8a85a00553f5c60e"
@@ -13266,10 +12487,10 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@^0.5.16, source-map-support@^0.5.5, source-map-support@~0.5.12:
-  version "0.5.17"
-  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.17.tgz#29fe1b3c98b9dbd5064ada89052ee8ff070cb46c"
-  integrity sha512-bwdKOBZ5L0gFRh4KOxNap/J/MpvX9Yxsq9lFDx65s3o7F/NiHy7JRaGIS8MwW6tZPAq9UXE207Il0cfcb5yu/Q==
+source-map-support@^0.5.5, source-map-support@~0.5.12:
+  version "0.5.19"
+  resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.19.tgz#a98b62f86dcaf4f67399648c085291ab9e8fed61"
+  integrity sha512-Wonm7zOCIJzBGQdB+thsPar0kYuCIzYvxZwlBa87yi/Mdjv7Tip2cyVbLj5o0cFPN4EVkuTwb3GDDyUx2DGnGw==
   dependencies:
     buffer-from "^1.0.0"
     source-map "^0.6.0"
@@ -13279,7 +12500,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.yarnpkg.com/source-map-url/-/source-map-url-0.4.0.tgz#3e935d7ddd73631b97659956d55128e87b5084a3"
   integrity sha1-PpNdfd1zYxuXZZlW1VEo6HtQhKM=
 
-source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7, source-map@~0.5.1:
+source-map@^0.5.0, source-map@^0.5.6, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -13299,7 +12520,7 @@ sourcemap-codec@^1.4.4:
   resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.8.tgz#ea804bd94857402e6992d05a38ef1ae35a9ab4c4"
   integrity sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==
 
-space-separated-tokens@^1.0.0, space-separated-tokens@^1.1.2:
+space-separated-tokens@^1.0.0:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/space-separated-tokens/-/space-separated-tokens-1.1.5.tgz#85f32c3d10d9682007e917414ddc5c26d1aa6899"
   integrity sha512-q/JSVd1Lptzhf5bkYm4ob4iWPjx0KiRe3sRFBNrVqbJkFaBm5vbbowy1mymoPNLRa52+oadOhJ+K49wsSeSjTA==
@@ -13318,9 +12539,9 @@ spdx-exceptions@^2.1.0:
   integrity sha512-/tTrYOC7PPI1nUAgx34hUpqXuyJG+DTHJTnIULG4rDygi4xu/tfgmq1e1cIRwRzwZgo4NLySi+ricLkZkw4i5A==
 
 spdx-expression-parse@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.0.tgz#99e119b7a5da00e05491c9fa338b7904823b41d0"
-  integrity sha512-Yg6D3XpRD4kkOmTpdgbUiEJFKghJH03fiC1OPll5h/0sO6neh2jqRDVHOQ4o/LMea0tgCkbMgea5ip/e+MkWyg==
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/spdx-expression-parse/-/spdx-expression-parse-3.0.1.tgz#cf70f50482eefdc98e3ce0a6833e4a53ceeba679"
+  integrity sha512-cbqHunsQWnJNE6KhVSMsMeH5H/L9EpymbzqTQ3uLwNCLZ1Q481oWaofqH7nO6V07xlXwY6PhQdQ2IedWx/ZK4Q==
   dependencies:
     spdx-exceptions "^2.1.0"
     spdx-license-ids "^3.0.0"
@@ -13385,11 +12606,6 @@ ssri@^6.0.0, ssri@^6.0.1:
   dependencies:
     figgy-pudding "^3.5.1"
 
-stack-utils@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/stack-utils/-/stack-utils-1.0.2.tgz#33eba3897788558bebfc2db059dc158ec36cebb8"
-  integrity sha512-MTX+MeG5U994cazkjd/9KNAapsHnibjMLnfXodlkXw76JEea0UiNzrqidzo1emMwk7w5Qhc9jd4Bn9TBb1MFwA==
-
 staged-git-files@1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/staged-git-files/-/staged-git-files-1.1.2.tgz#4326d33886dc9ecfa29a6193bf511ba90a46454b"
@@ -13413,24 +12629,18 @@ static-extend@^0.1.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
   integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
 
-store2@^2.7.1:
-  version "2.11.1"
-  resolved "https://registry.yarnpkg.com/store2/-/store2-2.11.1.tgz#118645f1b5e38d20604852362183955e360a5893"
-  integrity sha512-llZqXAXjG2E4FvWsZxFmBDfh6kqQuGFZm64TX23qW02Hf4dyElhDEbYx1IIVTEMKWrrDnDA9oqOjY8WHo2NgcA==
-
-storybook-addon-markdown-docs@^0.2.8:
-  version "0.2.8"
-  resolved "https://registry.yarnpkg.com/storybook-addon-markdown-docs/-/storybook-addon-markdown-docs-0.2.8.tgz#c4108825cbfb0271658331506ef855572d61bab4"
-  integrity sha512-p0VH8MyKb/CcL2opKwPaHkJdhjB8gL6kMTDZpVCoRqum0gguWIEjkk4upzr7ZhbdI6SPmDde0WieeB4Je5r2ug==
+storybook-addon-markdown-docs@^0.3.1:
+  version "0.3.1"
+  resolved "https://registry.yarnpkg.com/storybook-addon-markdown-docs/-/storybook-addon-markdown-docs-0.3.1.tgz#b25143b7afc51aad27ecc7ed95f3e388c052ab5b"
+  integrity sha512-YSaXwM93NrocFw04iqMAs2V/C0AbxzxHjSuSpa19Bg1D8xO8aDUOpeKMHBXcfL62sSjfmXW3Qssju33DcxEO2w==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@babel/core" "^7.9.0"
-    "@babel/generator" "^7.9.0"
-    "@babel/parser" "^7.9.2"
+    "@babel/generator" "^7.9.6"
+    "@babel/parser" "^7.9.6"
     "@babel/plugin-syntax-import-meta" "^7.8.3"
-    "@mdjs/core" "^0.1.9"
+    "@mdjs/core" "^0.3.1"
     "@mdx-js/mdx" "^1.5.1"
-    "@storybook/addon-docs" "5.3.1"
     detab "^2.0.3"
     mdurl "^1.0.1"
     remark-html "^10.0.0"
@@ -13612,10 +12822,10 @@ stringify-entities@^2.0.0:
     is-decimal "^1.0.2"
     is-hexadecimal "^1.0.0"
 
-stringify-entities@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.0.0.tgz#455abe501f8b7859ba5726a25a8872333c65b0a7"
-  integrity sha512-h7NJJIssprqlyjHT2eQt2W1F+MCcNmwPGlKb0bWEdET/3N44QN3QbUF/ueKCgAssyKRZ3Br9rQ7FcXjHr0qLHw==
+stringify-entities@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/stringify-entities/-/stringify-entities-3.0.1.tgz#32154b91286ab0869ab2c07696223bd23b6dbfc0"
+  integrity sha512-Lsk3ISA2++eJYqBMPKcr/8eby1I6L0gP0NlxF8Zja6c05yr/yCYyb2c9PwXjd08Ib3If1vn1rbs1H5ZtVuOfvQ==
   dependencies:
     character-entities-html4 "^1.0.0"
     character-entities-legacy "^1.0.0"
@@ -13697,6 +12907,13 @@ strip-indent@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
   integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
 
+strip-indent@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-3.0.0.tgz#c32e1cee940b6b3432c771bc2c54bcce73cd3001"
+  integrity sha512-laJTa3Jb+VQpaC6DseHhF7dXVqHTfJPCRDaEbid/drOhgitgYku/letMUqOXFoWV0zIIUbjpdH2t+tYj4bQMRQ==
+  dependencies:
+    min-indent "^1.0.0"
+
 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"
@@ -13776,14 +12993,14 @@ symbol-observable@^1.0.4, symbol-observable@^1.1.0:
   integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
 
 synchronous-promise@^2.0.6:
-  version "2.0.10"
-  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.10.tgz#e64c6fd3afd25f423963353043f4a68ebd397fd8"
-  integrity sha512-6PC+JRGmNjiG3kJ56ZMNWDPL8hjyghF5cMXIFOKg+NiwwEZZIvxTWd0pinWKyD227odg9ygF8xVhhz7gb8Uq7A==
+  version "2.0.12"
+  resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.12.tgz#219934f23c19c9aa716276cf2e1f8d4e5b04d07f"
+  integrity sha512-rIDJiHmIK02tXU+eW1v6a7rNIIiMLm5JUF5Uj2fT6oLSulg7WNDVoqvkYqkFoJzf4v2gmTLppvzegdo9R+7h1Q==
 
-systemjs@^4.0.0:
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-4.1.1.tgz#c90061456f9707478d487b47f3b92b9896032889"
-  integrity sha512-/0x3bcMrl1pxDCLw6sJWEKPVy0ZGEu7I0nItFSHxfPoDU2Lll6TUyB1wqltvbm7n5y5jVOoK4lei4oMpmW7XJQ==
+systemjs@^6.3.1:
+  version "6.3.2"
+  resolved "https://registry.yarnpkg.com/systemjs/-/systemjs-6.3.2.tgz#2c3407f949260fdfb3b837c191869db933d1fe0f"
+  integrity sha512-zcALS1RIYtsQBG4fbaE+cJzKx+UoEuSM8xCkGGH99i7p7Ym3ALvhi9QrpF2lo0CMQaejqrE1GnbkuG2m/+H7ew==
 
 table-layout@^1.0.0:
   version "1.0.1"
@@ -13811,9 +13028,9 @@ tapable@^1.0.0, tapable@^1.1.3:
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
 
 tar-fs@^2.0.0:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.0.1.tgz#e44086c1c60d31a4f0cf893b1c4e155dabfae9e2"
-  integrity sha512-6tzWDMeroL87uF/+lin46k+Q+46rAJ0SyPGz7OW7wTgblI273hsBqk2C1j0/xNadNLKDTUL9BukSjB7cwgmlPA==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.0.tgz#d1cdd121ab465ee0eb9ccde2d35049d3f3daf0d5"
+  integrity sha512-9uW5iDvrIMCVpvasdFHW0wJPez0K4JnMZtsuIeDI7HyMGJNxmDZDOCQROr7lXyS+iL/QMpj07qcjGYTSdRFXUg==
   dependencies:
     chownr "^1.1.1"
     mkdirp-classic "^0.5.2"
@@ -13844,20 +13061,6 @@ tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
     safe-buffer "^5.1.2"
     yallist "^3.0.3"
 
-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==
-  dependencies:
-    "@types/is-function" "^1.0.0"
-    global "^4.4.0"
-    is-function "^1.0.1"
-    is-regex "^1.0.4"
-    is-symbol "^1.0.3"
-    isobject "^4.0.0"
-    lodash "^4.17.15"
-    memoizerific "^1.11.3"
-
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
@@ -13882,13 +13085,6 @@ temp-write@^3.4.0:
     temp-dir "^1.0.0"
     uuid "^3.0.1"
 
-temp@^0.8.1:
-  version "0.8.4"
-  resolved "https://registry.yarnpkg.com/temp/-/temp-0.8.4.tgz#8c97a33a4770072e0a05f919396c7665a7dd59f2"
-  integrity sha512-s0ZZzd0BzYv5tLSptZooSjK8oj6C+c19p7Vqta9+6NPOf7r+fxq0cJe6/oN4LTC79sy5NY8ucOJNgwsKCSbfqg==
-  dependencies:
-    rimraf "~2.6.2"
-
 tempy@^0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/tempy/-/tempy-0.3.0.tgz#6f6c5b295695a16130996ad5ab01a8bd726e8bf8"
@@ -13920,19 +13116,10 @@ terser-webpack-plugin@^1.4.3:
     webpack-sources "^1.4.0"
     worker-farm "^1.7.0"
 
-terser@^4.1.2, terser@^4.6.2, terser@^4.6.7:
-  version "4.6.11"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.11.tgz#12ff99fdd62a26de2a82f508515407eb6ccd8a9f"
-  integrity sha512-76Ynm7OXUG5xhOpblhytE7X58oeNSmC8xnNhjWVo8CksHit0U0kO4hfNbPrrYwowLWFgM2n9L176VNx2QaHmtA==
-  dependencies:
-    commander "^2.20.0"
-    source-map "~0.6.1"
-    source-map-support "~0.5.12"
-
-terser@^4.6.3:
-  version "4.6.12"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.6.12.tgz#44b98aef8703fdb09a3491bf79b43faffc5b4fee"
-  integrity sha512-fnIwuaKjFPANG6MAixC/k1TDtnl1YlPLUlLVIxxGZUn1gfUx2+l3/zGNB72wya+lgsb50QBi2tUV75RiODwnww==
+terser@^4.1.2, terser@^4.6.2, terser@^4.6.3, terser@^4.6.7:
+  version "4.7.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.7.0.tgz#15852cf1a08e3256a80428e865a2fa893ffba006"
+  integrity sha512-Lfb0RiZcjRDXCC3OSHJpEkxJ9Qeqs6mp2v4jf2MHfy8vGERmVDuvjXdd/EnP5Deme5F2yBRBymKmKHCBg2echw==
   dependencies:
     commander "^2.20.0"
     source-map "~0.6.1"
@@ -14024,11 +13211,6 @@ tmp@0.0.33, tmp@0.0.x, tmp@^0.0.33:
   dependencies:
     os-tmpdir "~1.0.2"
 
-tmpl@1.0.x:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/tmpl/-/tmpl-1.0.4.tgz#23640dd7b42d00433911140820e5cf440e521dd1"
-  integrity sha1-I2QN17QtAEM5ERQIIOXPRA5SHdE=
-
 to-absolute-glob@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/to-absolute-glob/-/to-absolute-glob-2.0.2.tgz#1865f43d9e74b0822db9f145b78cff7d0f7c849b"
@@ -14047,11 +13229,6 @@ to-arraybuffer@^1.0.0:
   resolved "https://registry.yarnpkg.com/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz#7d229b1fcc637e466ca081180836a7aabff83f43"
   integrity sha1-fSKbH8xjfkZsoIEYCDanqr/4P0M=
 
-to-fast-properties@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/to-fast-properties/-/to-fast-properties-1.0.3.tgz#b83571fa4d8c25b82e231b06e3a3055de4ca1a47"
-  integrity sha1-uDVx+k2MJbguIxsG46MFXeTKGkc=
-
 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"
@@ -14108,11 +13285,6 @@ toidentifier@1.0.0:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.0.tgz#7e1be3470f1e77948bc43d94a3c8f4d7752ba553"
   integrity sha512-yaOH/Pk/VEhBWWTlhI+qXxDFXlejDGcQipMlyxda9nthulaxLZUNcUqFxokp0vcYnvteJln5FNQDRrxj3YcbVw==
 
-token-stream@0.0.1:
-  version "0.0.1"
-  resolved "https://registry.yarnpkg.com/token-stream/-/token-stream-0.0.1.tgz#ceeefc717a76c4316f126d0b9dbaa55d7e7df01a"
-  integrity sha1-zu78cXp2xDFvEm0LnbqlXX598Bo=
-
 toposort@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
@@ -14148,6 +13320,11 @@ trim-newlines@^2.0.0:
   resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-2.0.0.tgz#b403d0b91be50c331dfc4b82eeceb22c3de16d20"
   integrity sha1-tAPQuRvlDDMd/EuC7s6yLD3hbSA=
 
+trim-newlines@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/trim-newlines/-/trim-newlines-3.0.0.tgz#79726304a6a898aa8373427298d54c2ee8b1cb30"
+  integrity sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==
+
 trim-off-newlines@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/trim-off-newlines/-/trim-off-newlines-1.0.1.tgz#9f9ba9d9efa8764c387698bcbfeb2c848f11adb3"
@@ -14173,20 +13350,10 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.5.tgz#b8b639cefad7d0bb2abd37d433ff8293efa5f406"
   integrity sha512-rvuRbTarPXmMb79SmzEp8aqXNKcK+y0XaB298IXueQ8I2PsrATcPBCSPyK/dDNa2iWOhKlfNnOjdAOTBU/nkFA==
 
-ts-dedent@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/ts-dedent/-/ts-dedent-1.1.1.tgz#68fad040d7dbd53a90f545b450702340e17d18f3"
-  integrity sha512-UGTRZu1evMw4uTPyYF66/KFd22XiU+jMaIuHrkIHQ2GivAXVlLV0v/vHrpOuTRf9BmpNHi/SO7Vd0rLu0y57jg==
-
-ts-map@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/ts-map/-/ts-map-1.0.3.tgz#1c4d218dec813d2103b7e04e4bcf348e1471c1ff"
-  integrity sha512-vDWbsl26LIcPGmDpoVzjEP6+hvHZkBkLW7JpvwbCv/5IYPJlsbzCVXY3wsCeAxAUeTclNOUZxnLdGh3VBD/J6w==
-
-tslib@^1.10.0, tslib@^1.9.0, tslib@^1.9.3:
-  version "1.11.1"
-  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.11.1.tgz#eb15d128827fbee2841549e171f45ed338ac7e35"
-  integrity sha512-aZW88SY8kQbU7gpV19lN24LtXh/yD4ZZg6qieAJDDg+YBsJcSmLGK9QpnUjAKVG/xefmvJGd1WUmfpT/g6AJGA==
+tslib@^1.10.0, tslib@^1.11.1, tslib@^1.9.0:
+  version "1.13.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.13.0.tgz#c881e13cc7015894ed914862d276436fa9a47043"
+  integrity sha512-i/6DQjL8Xf3be4K/E6Wgpekn5Qasl1usyw++dAA35Ue5orEn65VIxOA+YvNNl9HV3qv70T7CNwjODHZrLwvd1Q==
 
 tsscmp@1.0.6:
   version "1.0.6"
@@ -14227,11 +13394,21 @@ type-fest@^0.11.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.11.0.tgz#97abf0872310fed88a5c466b25681576145e33f1"
   integrity sha512-OdjXJxnCN1AvyLSzeKIgXTXxV+99ZuXl3Hpo9XpJAv9MBcHrrJOQ5kV7ypXOuQie+AmWG25hLbiKdwYTifzcfQ==
 
+type-fest@^0.13.1:
+  version "0.13.1"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.13.1.tgz#0172cb5bce80b0bd542ea348db50c7e21834d934"
+  integrity sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==
+
 type-fest@^0.3.0, type-fest@^0.3.1:
   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.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
+  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
+
 type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.8.1.tgz#09e249ebde851d3b1e48d27c105444667f17b83d"
@@ -14275,28 +13452,13 @@ uc.micro@^1.0.1, uc.micro@^1.0.5:
   resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.6.tgz#9c411a802a409a91fc6cf74081baba34b24499ac"
   integrity sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==
 
-uglify-js@^2.6.1:
-  version "2.8.29"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-2.8.29.tgz#29c5733148057bb4e1f75df35b7a9cb72e6a59dd"
-  integrity sha1-KcVzMUgFe7Th913zW3qcty5qWd0=
-  dependencies:
-    source-map "~0.5.1"
-    yargs "~3.10.0"
-  optionalDependencies:
-    uglify-to-browserify "~1.0.0"
-
 uglify-js@^3.1.4, uglify-js@^3.5.1:
-  version "3.9.1"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.9.1.tgz#a56a71c8caa2d36b5556cc1fd57df01ae3491539"
-  integrity sha512-JUPoL1jHsc9fOjVFHdQIhqEEJsQvfKDjlubcCilu8U26uZ73qOg8VsN8O1jbuei44ZPlwL7kmbAdM4tzaUvqnA==
+  version "3.9.3"
+  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.9.3.tgz#4a285d1658b8a2ebaef9e51366b3a0f7acd79ec2"
+  integrity sha512-r5ImcL6QyzQGVimQoov3aL2ZScywrOgBXGndbWrdehKoSvGe/RmiE5Jpw/v+GvxODt6l2tpBXwA7n+qZVlHBMA==
   dependencies:
     commander "~2.20.3"
 
-uglify-to-browserify@~1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz#6e0924d6bda6b5afe349e39a6d632850a0f882b7"
-  integrity sha1-bgkk1r2mta/jSeOabWMoUKD4grc=
-
 uid-number@0.0.6:
   version "0.0.6"
   resolved "https://registry.yarnpkg.com/uid-number/-/uid-number-0.0.6.tgz#0ea10e8035e8eb5b8e4449f06da1c730663baa81"
@@ -14317,6 +13479,11 @@ unc-path-regex@^0.1.2:
   resolved "https://registry.yarnpkg.com/unc-path-regex/-/unc-path-regex-0.1.2.tgz#e73dd3d7b0d7c5ed86fbac6b0ae7d8c6a69d50fa"
   integrity sha1-5z3T17DXxe2G+6xrCufYxqadUPo=
 
+underscore@^1.9.1:
+  version "1.10.2"
+  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.10.2.tgz#73d6aa3668f3188e4adb0f1943bd12cfd7efaaaf"
+  integrity sha512-N4P+Q/BuyuEKFJ43B9gYuOj4TQUHXX+j2FqguVOpjkssLUUrnJofCcBccJSCoeturDoZU6GorDTHSvUDlSQbTg==
+
 unherit@^1.0.4:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
@@ -14348,13 +13515,14 @@ unicode-property-aliases-ecmascript@^1.0.4:
   resolved "https://registry.yarnpkg.com/unicode-property-aliases-ecmascript/-/unicode-property-aliases-ecmascript-1.1.0.tgz#dd57a99f6207bedff4628abefb94c50db941c8f4"
   integrity sha512-PqSoPh/pWetQ2phoj5RLiaqIk4kCNwoV3CI+LfGmWLKI3rE3kl1h59XpX2BjgDrmbxD9ARtQobPGU1SguCYuQg==
 
-unified@8.4.2, unified@^8.2.0, unified@^8.4.2:
-  version "8.4.2"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-8.4.2.tgz#13ad58b4a437faa2751a4a4c6a16f680c500fff1"
-  integrity sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==
+unified@9.0.0, unified@^9.0.0:
+  version "9.0.0"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-9.0.0.tgz#12b099f97ee8b36792dbad13d278ee2f696eed1d"
+  integrity sha512-ssFo33gljU3PdlWLjNp15Inqb77d6JnJSfyplGJPT/a+fNRNyCBeveBAYJdO5khKdF6WVHa/yYCC7Xl6BDwZUQ==
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"
+    is-buffer "^2.0.0"
     is-plain-obj "^2.0.0"
     trough "^1.0.0"
     vfile "^4.0.0"
@@ -14371,14 +13539,13 @@ unified@^6.1.5:
     vfile "^2.0.0"
     x-is-string "^0.1.0"
 
-unified@^9.0.0:
-  version "9.0.0"
-  resolved "https://registry.yarnpkg.com/unified/-/unified-9.0.0.tgz#12b099f97ee8b36792dbad13d278ee2f696eed1d"
-  integrity sha512-ssFo33gljU3PdlWLjNp15Inqb77d6JnJSfyplGJPT/a+fNRNyCBeveBAYJdO5khKdF6WVHa/yYCC7Xl6BDwZUQ==
+unified@^8.2.0, unified@^8.4.2:
+  version "8.4.2"
+  resolved "https://registry.yarnpkg.com/unified/-/unified-8.4.2.tgz#13ad58b4a437faa2751a4a4c6a16f680c500fff1"
+  integrity sha512-JCrmN13jI4+h9UAyKEoGcDZV+i1E7BLFuG7OsaDvTXI5P0qhHX+vZO/kOhz9jn8HGENDKbwSeB0nVOg4gVStGA==
   dependencies:
     bail "^1.0.0"
     extend "^3.0.0"
-    is-buffer "^2.0.0"
     is-plain-obj "^2.0.0"
     trough "^1.0.0"
     vfile "^4.0.0"
@@ -14468,13 +13635,20 @@ unist-util-remove-position@^2.0.0:
   dependencies:
     unist-util-visit "^2.0.0"
 
-unist-util-remove@^1.0.0, unist-util-remove@^1.0.3:
+unist-util-remove@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-1.0.3.tgz#58ec193dfa84b52d5a055ffbc58e5444eb8031a3"
   integrity sha512-mB6nCHCQK0pQffUAcCVmKgIWzG/AXs/V8qpS8K72tMPtOSCMSjDeMc5yN+Ye8rB0FhcE+JvW++o1xRNc0R+++g==
   dependencies:
     unist-util-is "^3.0.0"
 
+unist-util-remove@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/unist-util-remove/-/unist-util-remove-2.0.0.tgz#32c2ad5578802f2ca62ab808173d505b2c898488"
+  integrity sha512-HwwWyNHKkeg/eXRnE11IpzY8JT55JNM1YCwwU9YNCnfzk6s8GhPXrVBBZWiwLeATJbI7euvoGSzcy9M29UeW3g==
+  dependencies:
+    unist-util-is "^4.0.0"
+
 unist-util-select@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/unist-util-select/-/unist-util-select-3.0.1.tgz#787fc452db9ba77f0ade0e7dc53c3d9d4acc79c7"
@@ -14522,7 +13696,7 @@ unist-util-visit@2.0.2, unist-util-visit@^2.0.0, unist-util-visit@^2.0.1, unist-
     unist-util-is "^4.0.0"
     unist-util-visit-parents "^3.0.0"
 
-unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.4.0:
+unist-util-visit@^1.0.0, unist-util-visit@^1.1.0, unist-util-visit@^1.1.3:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/unist-util-visit/-/unist-util-visit-1.4.1.tgz#4724aaa8486e6ee6e26d7ff3c8685960d560b1e3"
   integrity sha512-AvGNk7Bb//EmJZyhtRUnNMEpId/AZ5Ph/KUpTI09WHQuDZHKovQ1oEv3mfmKpWKtoMzyMC4GLBm1Zy5k12fjIw==
@@ -14553,11 +13727,6 @@ unpipe@1.0.0, unpipe@~1.0.0:
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
   integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
 
-unquote@^1.1.0:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/unquote/-/unquote-1.1.1.tgz#8fded7324ec6e88a0ff8b905e7c098cdc086d544"
-  integrity sha1-j97XMk7G6IoP+LkF58CYzcCG1UQ=
-
 unset-value@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unset-value/-/unset-value-1.0.0.tgz#8376873f7d2335179ffb1e6fc3a8ed0dfc8ab559"
@@ -14596,19 +13765,6 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
-use-callback-ref@^1.2.1:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.3.tgz#9f939dfb5740807bbf9dd79cdd4e99d27e827756"
-  integrity sha512-DPBPh1i2adCZoIArRlTuKRy7yue7QogtEnfv0AKrWsY+GA+4EKe37zhRDouNnyWMoNQFYZZRF+2dLHsWE4YvJA==
-
-use-sidecar@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.2.tgz#e72f582a75842f7de4ef8becd6235a4720ad8af6"
-  integrity sha512-287RZny6m5KNMTb/Kq9gmjafi7lQL0YHO1lYolU6+tY1h9+Z3uCtkJJ3OSOq3INwYf2hBryCcDh4520AhJibMA==
-  dependencies:
-    detect-node "^2.0.4"
-    tslib "^1.9.3"
-
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"
@@ -14634,16 +13790,6 @@ util-promisify@^2.1.0:
   dependencies:
     object.getownpropertydescriptors "^2.0.3"
 
-util.promisify@^1.0.0:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.1.tgz#6baf7774b80eeb0f7520d8b81d07982a59abbaee"
-  integrity sha512-g9JpC/3He3bm38zsLupWryXHoEcS22YHthuPQSJdMy6KNrzIRzWqcsHzD/WUnqe45whVou4VIsPew37DoXWNrA==
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.2"
-    has-symbols "^1.0.1"
-    object.getownpropertydescriptors "^2.1.0"
-
 util@0.10.3:
   version "0.10.3"
   resolved "https://registry.yarnpkg.com/util/-/util-0.10.3.tgz#7afb1afe50805246489e3db7fe0ed379336ac0f9"
@@ -14747,9 +13893,9 @@ vfile-message@^2.0.0:
     unist-util-stringify-position "^2.0.0"
 
 vfile@*, vfile@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.1.0.tgz#d79248957f43225d57ff67a56effc67bef08946e"
-  integrity sha512-BaTPalregj++64xbGK6uIlsurN3BCRNM/P2Pg8HezlGzKd1O9PrwIac6bd9Pdx2uTb0QHoioZ+rXKolbVXEgJg==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.1.1.tgz#282d28cebb609183ac51703001bc18b3e3f17de9"
+  integrity sha512-lRjkpyDGjVlBA7cDQhQ+gNcvB1BGaTHYuSOcY3S7OhDmBtnzX95FhtZZDecSTDm6aajFymyve6S5DN4ZHGezdQ==
   dependencies:
     "@types/unist" "^2.0.0"
     is-buffer "^2.0.0"
@@ -14820,51 +13966,11 @@ 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==
 
-void-elements@^2.0.0, void-elements@^2.0.1:
+void-elements@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/void-elements/-/void-elements-2.0.1.tgz#c066afb582bb1cb4128d60ea92392e94d5e9dbec"
   integrity sha1-wGavtYK7HLQSjWDqkjkulNXp2+w=
 
-vue-docgen-api@^4.1.0:
-  version "4.18.0"
-  resolved "https://registry.yarnpkg.com/vue-docgen-api/-/vue-docgen-api-4.18.0.tgz#7d066ee38983c093651cab43e040afc716eb2293"
-  integrity sha512-y59WmG4+k26567rKKvKGT0ohhrIDlM6BJLLWVM6An44OCS+1b1vRnZvnQom2PElrhz0wNhZPbfqudlwMkyclxw==
-  dependencies:
-    "@babel/parser" "^7.6.0"
-    "@babel/types" "^7.6.0"
-    ast-types "^0.12.2"
-    hash-sum "^1.0.2"
-    lru-cache "^4.1.5"
-    pug "^2.0.3"
-    recast "^0.17.3"
-    ts-map "^1.0.3"
-    vue-template-compiler "^2.0.0"
-
-vue-docgen-loader@^1.3.0-beta.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/vue-docgen-loader/-/vue-docgen-loader-1.5.0.tgz#bf8797ea9dde87a8d734b56176f105477d9bf266"
-  integrity sha512-LKZ8mxeIQ44uSUMTplnwOXbC4bO4E2vyZDTbn7/1QlVwJPEIjk3ahL0DA1m27IEw6YTlHOwtWS0PrHmDkFgyAg==
-  dependencies:
-    clone "^2.1.2"
-    jscodeshift "^0.7.0"
-    loader-utils "^1.2.3"
-    querystring "^0.2.0"
-
-vue-template-compiler@^2.0.0:
-  version "2.6.11"
-  resolved "https://registry.yarnpkg.com/vue-template-compiler/-/vue-template-compiler-2.6.11.tgz#c04704ef8f498b153130018993e56309d4698080"
-  integrity sha512-KIq15bvQDrcCjpGjrAhx4mUlyyHfdmTaoNfeoATHLAiWB+MU3cx4lOzMwrnUh9cCxy0Lt1T11hAFY6TQgroUAA==
-  dependencies:
-    de-indent "^1.0.2"
-    he "^1.1.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"
-  integrity sha1-L3+bj9ENZ3JisYqITijRlhjgKPs=
-  dependencies:
-    makeerror "1.0.x"
-
 wallaby-webpack@^3.0.0:
   version "3.9.15"
   resolved "https://registry.yarnpkg.com/wallaby-webpack/-/wallaby-webpack-3.9.15.tgz#054aa621679a8da220103ef924514554be6e84fd"
@@ -14881,14 +13987,23 @@ warning@^4.0.2, warning@^4.0.3:
   dependencies:
     loose-envify "^1.0.0"
 
-watchpack@^1.6.0:
-  version "1.6.1"
-  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.6.1.tgz#280da0a8718592174010c078c7585a74cd8cd0e2"
-  integrity sha512-+IF9hfUFOrYOOaKyfaI7h7dquUIOgyEMoQMLA7OP5FxegKA2+XdXThAZ9TU2kucfhDH7rfMHs1oPYziVGWRnZA==
+watchpack-chokidar2@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz#9948a1866cbbd6cb824dea13a7ed691f6c8ddff0"
+  integrity sha512-9TyfOyN/zLUbA288wZ8IsMZ+6cbzvsNyEzSBp6e/zkifi6xxbl8SmQ/CxQq32k8NNqrdVEVUVSEf56L4rQ/ZxA==
   dependencies:
     chokidar "^2.1.8"
+
+watchpack@^1.6.1:
+  version "1.7.2"
+  resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-1.7.2.tgz#c02e4d4d49913c3e7e122c3325365af9d331e9aa"
+  integrity sha512-ymVbbQP40MFTp+cNMvpyBpBtygHnPzPkHqoIwRRj/0B8KhqQwV8LaKjtbaxF2lK4vl8zN9wCxS46IFCU5K4W0g==
+  dependencies:
     graceful-fs "^4.1.2"
     neo-async "^2.5.0"
+  optionalDependencies:
+    chokidar "^3.4.0"
+    watchpack-chokidar2 "^2.0.0"
 
 wcwidth@^1.0.0:
   version "1.0.1"
@@ -14923,15 +14038,15 @@ webpack-sources@^1.4.0, webpack-sources@^1.4.1:
     source-map "~0.6.1"
 
 webpack@^4.28.0:
-  version "4.42.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.42.1.tgz#ae707baf091f5ca3ef9c38b884287cfe8f1983ef"
-  integrity sha512-SGfYMigqEfdGchGhFFJ9KyRpQKnipvEvjc1TwrXEPCM6H5Wywu10ka8o3KGrMzSMxMQKt8aCHUFh5DaQ9UmyRg==
+  version "4.43.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.43.0.tgz#c48547b11d563224c561dad1172c8aa0b8a678e6"
+  integrity sha512-GW1LjnPipFW2Y78OOab8NJlCflB7EFskMih2AHdvjbpKMeDJqEgSx24cXXXiPS65+WSwVyxtDsJH6jGX2czy+g==
   dependencies:
     "@webassemblyjs/ast" "1.9.0"
     "@webassemblyjs/helper-module-context" "1.9.0"
     "@webassemblyjs/wasm-edit" "1.9.0"
     "@webassemblyjs/wasm-parser" "1.9.0"
-    acorn "^6.2.1"
+    acorn "^6.4.1"
     ajv "^6.10.2"
     ajv-keywords "^3.4.1"
     chrome-trace-event "^1.0.2"
@@ -14948,7 +14063,7 @@ webpack@^4.28.0:
     schema-utils "^1.0.0"
     tapable "^1.1.3"
     terser-webpack-plugin "^1.4.3"
-    watchpack "^1.6.0"
+    watchpack "^1.6.1"
     webpack-sources "^1.4.1"
 
 whatwg-fetch@>=0.10.0, whatwg-fetch@^3.0.0:
@@ -14989,11 +14104,6 @@ wide-align@1.1.3, wide-align@^1.1.0:
   dependencies:
     string-width "^1.0.2 || 2"
 
-window-size@0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.0.tgz#5438cd2ea93b202efa3a19fe8887aee7c94f9c9d"
-  integrity sha1-VDjNLqk7IC76Ohn+iIeu58lPnJ0=
-
 windows-release@^3.1.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/windows-release/-/windows-release-3.3.0.tgz#dce167e9f8be733f21c849ebd4d03fe66b29b9f0"
@@ -15001,24 +14111,11 @@ windows-release@^3.1.0:
   dependencies:
     execa "^1.0.0"
 
-with@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/with/-/with-5.1.1.tgz#fa4daa92daf32c4ea94ed453c81f04686b575dfe"
-  integrity sha1-+k2qktrzLE6pTtRTyB8EaGtXXf4=
-  dependencies:
-    acorn "^3.1.0"
-    acorn-globals "^3.0.0"
-
 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@0.0.2:
-  version "0.0.2"
-  resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-0.0.2.tgz#b79669bb42ecb409f83d583cad52ca17eaa1643f"
-  integrity sha1-t5Zpu0LstAn4PVg8rVLKF+qhZD8=
-
 wordwrap@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/wordwrap/-/wordwrap-1.0.0.tgz#27584810891456a4171c8d0226441ade90cbcaeb"
@@ -15215,15 +14312,6 @@ wrappy@1:
   resolved "https://registry.yarnpkg.com/wrappy/-/wrappy-1.0.2.tgz#b5243d8f3ec1aa35f1364605bc0d1036e30ab69f"
   integrity sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=
 
-write-file-atomic@2.4.1:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.1.tgz#d0b05463c188ae804396fd5ab2a370062af87529"
-  integrity sha512-TGHFeZEZMnv+gBFRfjAcxL5bPHrsGKtnb4qsFAws7/vlh+QfwAaySIw4AXP9ZskTTh5GWu3FLuJhsWVdiJPGvg==
-  dependencies:
-    graceful-fs "^4.1.11"
-    imurmurhash "^0.1.4"
-    signal-exit "^3.0.2"
-
 write-file-atomic@^2.0.0, write-file-atomic@^2.3.0, write-file-atomic@^2.4.2:
   version "2.4.3"
   resolved "https://registry.yarnpkg.com/write-file-atomic/-/write-file-atomic-2.4.3.tgz#1fd2e9ae1df3e75b8d8c367443c692d4ca81f481"
@@ -15322,11 +14410,9 @@ yallist@^3.0.0, yallist@^3.0.2, yallist@^3.0.3:
   integrity sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==
 
 yaml@^1.7.2:
-  version "1.9.2"
-  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.9.2.tgz#f0cfa865f003ab707663e4f04b3956957ea564ed"
-  integrity sha512-HPT7cGGI0DuRcsO51qC1j9O16Dh1mZ2bnXwsi0jrSpsLz0WxOLSLXfkABVl6bZO629py3CU+OMJtpNHDLB97kg==
-  dependencies:
-    "@babel/runtime" "^7.9.2"
+  version "1.10.0"
+  resolved "https://registry.yarnpkg.com/yaml/-/yaml-1.10.0.tgz#3b593add944876077d4d683fee01081bd9fff31e"
+  integrity sha512-yr2icI4glYaNG+KWONODapy2/jDdMSDnrONSjblABjD9B4Z5LgiircSt8m8sRZFNi08kG9Sm0uSHtEmP3zaEGg==
 
 yargs-parser@13.1.2, yargs-parser@^13.1.2:
   version "13.1.2"
@@ -15359,6 +14445,14 @@ yargs-parser@^15.0.1:
     camelcase "^5.0.0"
     decamelize "^1.2.0"
 
+yargs-parser@^18.1.3:
+  version "18.1.3"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-18.1.3.tgz#be68c4975c6b2abf469236b0c870362fab09a7b0"
+  integrity sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==
+  dependencies:
+    camelcase "^5.0.0"
+    decamelize "^1.2.0"
+
 yargs-unparser@1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/yargs-unparser/-/yargs-unparser-1.6.0.tgz#ef25c2c769ff6bd09e4b0f9d7c605fb27846ea9f"
@@ -15419,16 +14513,6 @@ yargs@^14.2.2:
     y18n "^4.0.0"
     yargs-parser "^15.0.1"
 
-yargs@~3.10.0:
-  version "3.10.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"
-  integrity sha1-9+572FfdfB0tOMDnTvvWgdFDH9E=
-  dependencies:
-    camelcase "^1.0.2"
-    cliui "^2.1.0"
-    decamelize "^1.0.0"
-    window-size "0.1.0"
-
 yeast@0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/yeast/-/yeast-0.1.2.tgz#008e06d8094320c372dbc2f8ed76a0ca6c8ac419"