diff --git a/docs/.storybook/main.js b/docs/.storybook/main.js
index 5ce7eb319a..8dd6dc996a 100644
--- a/docs/.storybook/main.js
+++ b/docs/.storybook/main.js
@@ -1,6 +1,19 @@
 module.exports = {
-  stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-a11y', '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/preset-scss'],
+  stories: ['../src/**/*.stories.mdx', '../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: [
+    {
+      name: '@storybook/addon-essentials',
+      options: {
+        actions: false,
+        controls: false,
+        docs: true,
+        viewport: true,
+      },
+    },
+    '@storybook/addon-a11y',
+    '@storybook/addon-links',
+    '@storybook/preset-scss',
+  ],
   framework: '@storybook/react',
   core: {
     builder: 'webpack5',
diff --git a/docs/.storybook/preview-head.html b/docs/.storybook/preview-head.html
index da57830886..6f25036b4d 100644
--- a/docs/.storybook/preview-head.html
+++ b/docs/.storybook/preview-head.html
@@ -10,7 +10,6 @@
   .theme-wrap {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
-    height: 100vh;
   }
 
   .theme-wrap .story-wrap {
diff --git a/docs/src/stories/deprecated-components/BoxOverlay/BoxOverlay.stories.mdx b/docs/src/stories/deprecated-components/BoxOverlay/BoxOverlay.stories.mdx
index 8aaee9c279..19b5f08416 100644
--- a/docs/src/stories/deprecated-components/BoxOverlay/BoxOverlay.stories.mdx
+++ b/docs/src/stories/deprecated-components/BoxOverlay/BoxOverlay.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as BoxOverlayStories from './BoxOverlay.stories'
 
@@ -12,4 +12,6 @@ Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Bo
 
 See [aria attributes](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties)
 
-<Story story={BoxOverlayStories.Default} />
+<Canvas>
+  <Story story={BoxOverlayStories.Default} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/BranchName/BranchName.stories.mdx b/docs/src/stories/deprecated-components/BranchName/BranchName.stories.mdx
index efa86c9f80..c6eb818487 100644
--- a/docs/src/stories/deprecated-components/BranchName/BranchName.stories.mdx
+++ b/docs/src/stories/deprecated-components/BranchName/BranchName.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as BranchNameStories from './BranchName.stories'
 
@@ -8,4 +8,6 @@ import * as BranchNameStories from './BranchName.stories'
 
 Branch names can be a link, span, and include an octicon before the branch name.
 
-<Story story={BranchNameStories.Default} />
+<Canvas>
+  <Story story={BranchNameStories.Default} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/Button/Button.stories.mdx b/docs/src/stories/deprecated-components/Button/Button.stories.mdx
index 0b19dfa469..157f7ed949 100644
--- a/docs/src/stories/deprecated-components/Button/Button.stories.mdx
+++ b/docs/src/stories/deprecated-components/Button/Button.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as ButtonStories from './Button.stories'
 
@@ -16,25 +16,33 @@ Note: When using a `<button>` element, **always specify a `type`**.
 
 Use the standard — yet classy — `.btn` for form actions and general page actions. These are used extensively around the site.
 
-<Story story={ButtonStories.Default} />
+<Canvas>
+  <Story story={ButtonStories.Default} />
+</Canvas>
 
 ### Primary
 
 Primary buttons are green and are used to indicate the _primary_ action on a page. When you need your buttons to stand out, use `.btn.btn-primary`. You can use it with both button sizes—just add `.btn-primary`.
 
-<Story story={ButtonStories.Primary} />
+<Canvas>
+  <Story story={ButtonStories.Primary} />
+</Canvas>
 
 ### Outline
 
 Outline buttons downplay an action as they appear like boxy links. Just add `.btn-outline` and go.
 
-<Story story={ButtonStories.Outline} />
+<Canvas>
+  <Story story={ButtonStories.Outline} />
+</Canvas>
 
 ### Danger
 
 Danger buttons are red. They help reiterate that the intended action is important or potentially dangerous (e.g., deleting a repo or transferring ownership). Similar to the primary buttons, just add `.btn-danger`.
 
-<Story story={ButtonStories.Danger} />
+<Canvas>
+  <Story story={ButtonStories.Danger} />
+</Canvas>
 
 ### Link
 
@@ -42,13 +50,17 @@ Create a button that looks like a link with `.btn-link`. Rather than using an `<
 
 **The `.btn-link` class is not designed to be used with `.btn`; the overlapping styles are not compatible.**
 
-<Story story={ButtonStories.Link} />
+<Canvas>
+  <Story story={ButtonStories.Link} />
+</Canvas>
 
 ### Invisible
 
 When you want a link, but you want it padded and line heightened like a button best for "cancel" actions on forms.
 
-<Story story={ButtonStories.Invisible} />
+<Canvas>
+  <Story story={ButtonStories.Invisible} />
+</Canvas>
 
 ## Button states
 
@@ -56,13 +68,17 @@ When you want a link, but you want it padded and line heightened like a button b
 
 Adding an `aria-selected="true"` attribute will keep the button in a selected state.
 
-<Story story={ButtonStories.Selected} />
+<Canvas>
+  <Story story={ButtonStories.Selected} />
+</Canvas>
 
 ### Disabled
 
 Disable `<button>` and `<a>` elements with the `aria-disabled="true"` attribute.
 
-<Story story={ButtonStories.Disabled} />
+<Canvas>
+  <Story story={ButtonStories.Disabled} />
+</Canvas>
 
 ## Button variations
 
@@ -72,19 +88,25 @@ Next to the default size there is also a `.btn-sm` (small) and `.btn-large` opti
 
 Type scale utilities can be used to alter the font-size if needed. Padding is applied in em's so that it scales proportionally with the font-size.
 
-<Story story={ButtonStories.Sizes} />
+<Canvas>
+  <Story story={ButtonStories.Sizes} />
+</Canvas>
 
 ### Block button
 
 Make any button full-width by adding `.btn-block`. It adds `width: 100%;`, changes the `display` from `inline-block` to `block`, and centers the button text.
 
-<Story story={ButtonStories.Block} />
+<Canvas>
+  <Story story={ButtonStories.Block} />
+</Canvas>
 
 ### Hidden text button
 
 Use `.hidden-text-expander` to indicate and toggle hidden text.
 
-<Story story={ButtonStories.HiddenText} />
+<Canvas>
+  <Story story={ButtonStories.HiddenText} />
+</Canvas>
 
 You can also make the expander appear inline by adding `.inline`.
 
@@ -92,19 +114,25 @@ You can also make the expander appear inline by adding `.inline`.
 
 Icons can be added to any button.
 
-<Story story={ButtonStories.WithIcons} />
+<Canvas>
+  <Story story={ButtonStories.WithIcons} />
+</Canvas>
 
 ### Icon-only button
 
 Icon-only buttons `.btn-octicon` turn blue on hover. Use `.btn-octicon-danger` to turn an icon red on hover.
 
-<Story story={ButtonStories.IconOnly} />
+<Canvas>
+  <Story story={ButtonStories.IconOnly} />
+</Canvas>
 
 ### Close button
 
 When using the `octicon-x` icon for a close button, add `.close-button` to remove the default button styles.
 
-<Story story={ButtonStories.CloseButton} />
+<Canvas>
+  <Story story={ButtonStories.CloseButton} />
+</Canvas>
 
 ## Button with counts
 
@@ -112,18 +140,26 @@ You can easily append a count to a **small button**. Add the `.btn-with-count` c
 
 **Be sure to clear the float added by the additional class.**
 
-<Story story={ButtonStories.ButtonWithCounts} />
+<Canvas>
+  <Story story={ButtonStories.ButtonWithCounts} />
+</Canvas>
 
 ## Button groups
 
 Have a hankering for a series of buttons that are attached to one another? Wrap them in a `.BtnGroup` and the buttons will be rounded and spaced automatically.
 
-<Story story={ButtonStories.ButtonGroup} />
+<Canvas>
+  <Story story={ButtonStories.ButtonGroup} />
+</Canvas>
 
 Use `BtnGroup-item btn btn-sm` for a smaller BtnGroup items.
 
-<Story story={ButtonStories.ButtonGroupSmall} />
+<Canvas>
+  <Story story={ButtonStories.ButtonGroupSmall} />
+</Canvas>
 
 Add `.BtnGroup-parent` to parent elements, like `<form>`s or `<details>`s, within `.BtnGroup`s for proper spacing and rounded corners.
 
-<Story story={ButtonStories.ButtonGroupParent} />
+<Canvas>
+  <Story story={ButtonStories.ButtonGroupParent} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/Button/Button.stories.tsx b/docs/src/stories/deprecated-components/Button/Button.stories.tsx
index 40c9d888b6..0c739be651 100644
--- a/docs/src/stories/deprecated-components/Button/Button.stories.tsx
+++ b/docs/src/stories/deprecated-components/Button/Button.stories.tsx
@@ -2,6 +2,7 @@ import React from 'react'
 
 export default {
   title: 'Deprecated/Button',
+  // docs: {inlineStories: true},
 }
 
 export const Default = () => {
diff --git a/docs/src/stories/deprecated-components/FilterList/FilterList.stories.mdx b/docs/src/stories/deprecated-components/FilterList/FilterList.stories.mdx
index 49e80741f2..75d5c03e16 100644
--- a/docs/src/stories/deprecated-components/FilterList/FilterList.stories.mdx
+++ b/docs/src/stories/deprecated-components/FilterList/FilterList.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as FilterListStories from './FilterList.stories'
 
@@ -8,4 +8,6 @@ import * as FilterListStories from './FilterList.stories'
 
 A vertical list of filters. Grey text on white background. Selecting a filter from the list will fill its background with blue and make the text white.
 
-<Story story={FilterListStories.Default} />
+<Canvas>
+  <Story story={FilterListStories.Default} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/Forms/Forms.stories.mdx b/docs/src/stories/deprecated-components/Forms/Forms.stories.mdx
index 2f1abc73b5..8eb111b950 100644
--- a/docs/src/stories/deprecated-components/Forms/Forms.stories.mdx
+++ b/docs/src/stories/deprecated-components/Forms/Forms.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as FormsStories from './Forms.stories'
 
@@ -19,13 +19,17 @@ Overview:
 
 All our inputs and buttons side-by-side for easy testing of sizing and alignment with one another.
 
-<Story story={FormsStories.KitchenSink} />
+<Canvas>
+  <Story story={FormsStories.KitchenSink} />
+</Canvas>
 
 ## Example form
 
 Form controls in Primer CSS currently have no basic layout specified (this is by design). You'll need to use `<fieldset>`s, `<div>`s, or other elements and styles to rearrange them.
 
-<Story story={FormsStories.BasicForm} />
+<Canvas>
+  <Story story={FormsStories.BasicForm} />
+</Canvas>
 
 ## Inputs
 
@@ -33,13 +37,17 @@ Form controls in Primer CSS currently have no basic layout specified (this is by
 
 Make inputs smaller, larger, or full-width with an additional class.
 
-<Story story={FormsStories.Sizes} />
+<Canvas>
+  <Story story={FormsStories.Sizes} />
+</Canvas>
 
 ### Input group
 
 Attached an input and button to one another.
 
-<Story story={FormsStories.InputGroup} />
+<Canvas>
+  <Story story={FormsStories.InputGroup} />
+</Canvas>
 
 ## Customization
 
@@ -47,35 +55,47 @@ Attached an input and button to one another.
 
 Textual form controls have a white background by default. You can change this to a light gray with `.input-contrast`.
 
-<Story story={FormsStories.Contrast} />
+<Canvas>
+  <Story story={FormsStories.Contrast} />
+</Canvas>
 
 ### Disabled state
 
 Add the `disabled` attribute to make a `.form-control` appear disabled.
 
-<Story story={FormsStories.Disabled} />
+<Canvas>
+  <Story story={FormsStories.Disabled} />
+</Canvas>
 
 ### Hide WebKit's contact info autofill icon
 
 WebKit sometimes gets confused and tries to add an icon/dropdown to autofill contact information on fields that may not be appropriate (such as input for number of users). Use this class to override the display of this icon.
 
-<Story story={FormsStories.HideWebkitAutofill} />
+<Canvas>
+  <Story story={FormsStories.HideWebkitAutofill} />
+</Canvas>
 
 ## Selects
 
 Primer CSS adds light `height` and `vertical-align` styles to `<select>`s for all browsers to render them consistently with textual inputs.
 
-<Story story={FormsStories.Select} />
+<Canvas>
+  <Story story={FormsStories.Select} />
+</Canvas>
 
 ### Small
 
 Use the `.select-sm` class to resize both default and custom `<select>`s to match the size of [our small buttons](./buttons#default-buttons).
 
-<Story story={FormsStories.SelectSmall} />
+<Canvas>
+  <Story story={FormsStories.SelectSmall} />
+</Canvas>
 
 ## Form groups
 
-<Story story={FormsStories.FormGroup} />
+<Canvas>
+  <Story story={FormsStories.FormGroup} />
+</Canvas>
 
 ## Form group validation (deprecated)
 
@@ -87,44 +107,60 @@ Convey success, errors and warnings for form groups. For github.com consider usi
 
 If the input is **valid**, add the `.successed` class to the `<div class="form-group">` element. Next add/update a success message to the `.note` element, as well as the `.success` class.
 
-<Story story={FormsStories.ValidationSuccess} />
+<Canvas>
+  <Story story={FormsStories.ValidationSuccess} />
+</Canvas>
 
 ### Error
 
 If the input is **not valid**, add the `.errored` class to the `<div class="form-group">` element. Next add/update an error message to the `.note` element, as well as the `.error` class.
 
-<Story story={FormsStories.ValidationError} />
+<Canvas>
+  <Story story={FormsStories.ValidationError} />
+</Canvas>
 
 ### Warning
 
 If the input should show a **warning**, add the `.warn` class to the `<div class="form-group">` element. Next add/update a warning message to the `.note` element, as well as the `.warning` class.
 
-<Story story={FormsStories.ValidationWarning} />
+<Canvas>
+  <Story story={FormsStories.ValidationWarning} />
+</Canvas>
 
 ### Form actions
 
 Align buttons to the right—via `float: right` on the buttons—in forms with `.form-actions`. The floats are automatically cleared for you.
 
-<Story story={FormsStories.FormActions} />
+<Canvas>
+  <Story story={FormsStories.FormActions} />
+</Canvas>
 
 ## Checkboxes and radios
 
 Utilities to control alignment and styling of checkbox and radio controls.
 
-<Story story={FormsStories.CheckboxAndRadios} />
+<Canvas>
+  <Story story={FormsStories.CheckboxAndRadios} />
+</Canvas>
 
 ### Toggle content visibility based on a checkbox or radio button state
 
 Content that is hidden by default should only be done so if it is non-essential for the context of the surrounding content. Be sure to use the `aria-live="polite"` attribute on the parent label for added content to be announced when displayed.
 
-<Story story={FormsStories.ToggleVisibility} />
+<Canvas>
+  <Story story={FormsStories.ToggleVisibility} />
+</Canvas>
 
 ## Radio group
 
 Radio groups are tab like controls. Their blue border gives extra emphasis to what is selected.
 
-<Story story={FormsStories.RadioGroup} />
+<Canvas>
+  <Story story={FormsStories.RadioGroup} />
+</Canvas>
 
 Adding `octicon` icons is also supported. To disable an option, use the `disabled` attribute.
 
-<Story story={FormsStories.WithOcticons} />
+<Canvas>
+  <Story story={FormsStories.WithOcticons} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/Header/Header.stories.mdx b/docs/src/stories/deprecated-components/Header/Header.stories.mdx
index dac164cda6..bdf20ff1d5 100644
--- a/docs/src/stories/deprecated-components/Header/Header.stories.mdx
+++ b/docs/src/stories/deprecated-components/Header/Header.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as HeaderStories from './Header.stories'
 
@@ -12,7 +12,9 @@ Use the Header component to create a header that has all of its items aligned ve
 
 The `.Header` class is the wrapping class that aligns all the items properly and gives the header its dark background. Each direct child of the `.Header` component is expected to be a `.Header-item` component. The component utilizes flexbox CSS to align all these items properly and applies spacing scale margin.
 
-<Story story={HeaderStories.Default} />
+<Canvas>
+  <Story story={HeaderStories.Default} />
+</Canvas>
 
 ## Header-item
 
@@ -20,16 +22,22 @@ All items directly under the `.Header` component should be a `.Header-item` comp
 
 `.Header-item` elements have a built-in margin that will need to be overridden with the `mr-0` utility class for the last element in the container. We relied on the utility classes here instead of `:last-child` because the last child isn't always the item visible. On responsive pages, there's a mobile menu that gets presented to the user at smaller breakpoints.
 
-<Story story={HeaderStories.HeaderItem} />
+<Canvas>
+  <Story story={HeaderStories.HeaderItem} />
+</Canvas>
 
 ### Header-item--full
 
 The `.Header-item` element has a modifier class, `.Header-item--full`, that stretches it to fill the available space and push any remaining items to the right.
 
-<Story story={HeaderStories.HeaderItemFull} />
+<Canvas>
+  <Story story={HeaderStories.HeaderItemFull} />
+</Canvas>
 
 ## Header-link
 
 Add the `.Header-link` class to any anchor tags in the header to give them consistent styling and hover opacity. This class makes the links white, bold and 70% fade on hover.
 
-<Story story={HeaderStories.HeaderLink} />
+<Canvas>
+  <Story story={HeaderStories.HeaderLink} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/IssueLabel/IssueLabel.stories.mdx b/docs/src/stories/deprecated-components/IssueLabel/IssueLabel.stories.mdx
index 02a39bb99c..a9cc608b55 100644
--- a/docs/src/stories/deprecated-components/IssueLabel/IssueLabel.stories.mdx
+++ b/docs/src/stories/deprecated-components/IssueLabel/IssueLabel.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as IssueLabelStories from './IssueLabel.stories'
 
@@ -8,8 +8,12 @@ import * as IssueLabelStories from './IssueLabel.stories'
 
 Issue labels are used for adding labels to issues and pull requests. They also come with emoji support.
 
-<Story story={IssueLabelStories.Default} />
+<Canvas>
+  <Story story={IssueLabelStories.Default} />
+</Canvas>
 
 If an issue label needs to be bigger, add the `.IssueLabel--big` modifier.
 
-<Story story={IssueLabelStories.Big} />
+<Canvas>
+  <Story story={IssueLabelStories.Big} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/Loaders/Loaders.stories.mdx b/docs/src/stories/deprecated-components/Loaders/Loaders.stories.mdx
index 2d962059b5..e435175ae5 100644
--- a/docs/src/stories/deprecated-components/Loaders/Loaders.stories.mdx
+++ b/docs/src/stories/deprecated-components/Loaders/Loaders.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as LoaderStories from './Loaders.stories'
 
@@ -10,4 +10,6 @@ Loaders inform users that an action is still in progress and might take a while
 
 Add an animated ellipsis at the end of text with `<span class="AnimatedEllipsis"></span>`.
 
-<Story story={LoaderStories.Default} />
+<Canvas>
+  <Story story={LoaderStories.Default} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/Marketing/Marketing.stories.mdx b/docs/src/stories/deprecated-components/Marketing/Marketing.stories.mdx
index dcd56a9923..9bbeda7e27 100644
--- a/docs/src/stories/deprecated-components/Marketing/Marketing.stories.mdx
+++ b/docs/src/stories/deprecated-components/Marketing/Marketing.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as MarketingStories from './Marketing.stories'
 
@@ -8,7 +8,9 @@ import * as MarketingStories from './Marketing.stories'
 
 Marketing links can be produced by combining the base class `link-mktg` with a set of modifier classes to control the size and color.
 
-<Story story={MarketingStories.Link} />
+<Canvas>
+  <Story story={MarketingStories.Link} />
+</Canvas>
 
 ## Link sizes
 
@@ -18,10 +20,14 @@ The marketing link size is defined with utility classes and come in large (`.f3-
 
 Add class `link-emphasis-mktg` to the link, to give it a pale underline, that will fill up on hover.
 
-<Story story={MarketingStories.LinkEmphasis} />
+<Canvas>
+  <Story story={MarketingStories.LinkEmphasis} />
+</Canvas>
 
 ## Link colors
 
 The link color is controlled with the [Primer color classes](/utilities/colors), while the symbol and underline styling will follow:
 
-<Story story={MarketingStories.LinkColors} />
+<Canvas>
+  <Story story={MarketingStories.LinkColors} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/Pagination/Pagination.stories.mdx b/docs/src/stories/deprecated-components/Pagination/Pagination.stories.mdx
index fc4f9d84f4..dd4d18c16b 100644
--- a/docs/src/stories/deprecated-components/Pagination/Pagination.stories.mdx
+++ b/docs/src/stories/deprecated-components/Pagination/Pagination.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as PaginationStories from './Pagination.stories'
 
@@ -12,7 +12,9 @@ Use the pagination component to apply button styles to a connected set of links
 
 You can make a very simple pagination container with just the Previous and Next buttons. Add the `aria-disabled="true"` attribute to the `Previous` button if there isn't a preceding page, or to the `Next` button if there isn't a succeeding page.
 
-<Story story={PaginationStories.Default} />
+<Canvas>
+  <Story story={PaginationStories.Default} />
+</Canvas>
 
 ## Numbered pagination
 
@@ -25,4 +27,6 @@ As always, make sure to include the appropriate `aria` attributes to make the el
 - Add `aria-label="Pagination"` to the `paginate-container` element.
 - Add `aria-label="Page X"` to each anchor link.
 
-<Story story={PaginationStories.Numbered} />
+<Canvas>
+  <Story story={PaginationStories.Numbered} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/SelectMenu/SelectMenu.stories.mdx b/docs/src/stories/deprecated-components/SelectMenu/SelectMenu.stories.mdx
index 8a10ad26fa..2d87da2b84 100644
--- a/docs/src/stories/deprecated-components/SelectMenu/SelectMenu.stories.mdx
+++ b/docs/src/stories/deprecated-components/SelectMenu/SelectMenu.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as SelectMenuStories from './SelectMenu.stories'
 
@@ -14,7 +14,9 @@ The `SelectMenu` component provides advanced support for navigation, filtering,
 
 Use a `<details>` element to toggle the select menu. The `<summary>` element can be styled in many ways. In the example below it's a `.btn`.
 
-<Story story={SelectMenuStories.Default} />
+<Canvas>
+  <Story story={SelectMenuStories.Default} />
+</Canvas>
 
 Add a `.SelectMenu-header` to house a clear title and a close button. Note that the close button is only shown on narrow screens (mobile).
 
@@ -22,31 +24,41 @@ Add a `.SelectMenu-header` to house a clear title and a close button. Note that
 
 In case the select menu should be aligned to the right, use `SelectMenu right-0`.
 
-<Story story={SelectMenuStories.RightAligned} />
+<Canvas>
+  <Story story={SelectMenuStories.RightAligned} />
+</Canvas>
 
 ## Selected state
 
 If the `SelectMenu` should show a check icon for selected items, use the `SelectMenu-icon SelectMenu-icon--check` classes. It will make the check icon show when `aria-checked="true"` is set.
 
-<Story story={SelectMenuStories.SelectedState} />
+<Canvas>
+  <Story story={SelectMenuStories.SelectedState} />
+</Canvas>
 
 ## Borderless
 
 Use the `.SelectMenu-list--borderless` modifier to remove the borders between list items. Note: It's better to keep the borders if a list contains items with multiple lines of text. It will make it easier to see where the items start and end.
 
-<Story story={SelectMenuStories.Borderless} />
+<Canvas>
+  <Story story={SelectMenuStories.Borderless} />
+</Canvas>
 
 ## Header
 
 Add a `.SelectMenu-header` at the top to house a clear title and a close button.
 
-<Story story={SelectMenuStories.Header} />
+<Canvas>
+  <Story story={SelectMenuStories.Header} />
+</Canvas>
 
 ## List items
 
 The list of items is arguably the most important subcomponent within the menu. Build them out of anchors, buttons, or just about any [interactive content](http://w3c.github.io/html/dom.html#interactive-content). List items are also customizable with options for avatars, additional icons, and multiple lines of text. Use utility classes in case more custom styling is needed.
 
-<Story story={SelectMenuStories.ListItems} />
+<Canvas>
+  <Story story={SelectMenuStories.ListItems} />
+</Canvas>
 
 ## Divider
 
@@ -54,49 +66,65 @@ The select menu's list can be divided into multiple parts by adding a `.SelectMe
 
 Dividers are also supported when using the `.SelectMenu-list--borderless` modifier.
 
-<Story story={SelectMenuStories.Divider} />
+<Canvas>
+  <Story story={SelectMenuStories.Divider} />
+</Canvas>
 
 ## Footer
 
 Use a `.SelectMenu-footer` at the bottom for additional information. As a side effect it can greatly improve the scrolling performance because the list doesn't need to be repainted due to the rounded corners.
 
-<Story story={SelectMenuStories.Footer} />
+<Canvas>
+  <Story story={SelectMenuStories.Footer} />
+</Canvas>
 
 ## Filter
 
 If the list is expected to get long, consider adding a `.SelectMenu-filter` input. Be sure to also include the `.SelectMenu--hasFilter` modifier class. On mobile devices it will add a fixed height and anchor the select menu to the top of the screen. This makes sure the filter input stays at the same position while typing.
 
-<Story story={SelectMenuStories.Filter} />
+<Canvas>
+  <Story story={SelectMenuStories.Filter} />
+</Canvas>
 
 ## Tabs
 
 Sometimes you need two or more lists of items in your select menu, e.g. branches and tags. Select menu lists can be tabbed with the addition of `.SelectMenu-tabs` above the menu.
 
-<Story story={SelectMenuStories.Tabs} />
+<Canvas>
+  <Story story={SelectMenuStories.Tabs} />
+</Canvas>
 
 ## Message
 
 A `SelectMenu-message` can be used to show different kind of messages to a user. Use utility classes to further style the message.
 
-<Story story={SelectMenuStories.Message} />
+<Canvas>
+  <Story story={SelectMenuStories.Message} />
+</Canvas>
 
 ## Loading
 
 When fetching large lists, consider showing a `.SelectMenu-loading` animation.
 
-<Story story={SelectMenuStories.Loading} />
+<Canvas>
+  <Story story={SelectMenuStories.Loading} />
+</Canvas>
 
 ## Disabled
 
 To disable a list item, use the `disabled` attribute for `<button>`s. For `<a>`s replace the `href` with an `aria-disabled="true"` attribute. Note: If not obvious, try to communicate to the user why an item is disabled.
 
-<Story story={SelectMenuStories.Disabled} />
+<Canvas>
+  <Story story={SelectMenuStories.Disabled} />
+</Canvas>
 
 ## Blankslate
 
 Sometimes a select menu needs to communicate a "blank slate" where there's no content in the menu's list. Usually these include a clear call to action to add said content to the list. Swap out the contents of a `.SelectMenu-list` with a `.SelectMenu-blankslate` and customize its contents as needed.
 
-<Story story={SelectMenuStories.BlankSlate} />
+<Canvas>
+  <Story story={SelectMenuStories.BlankSlate} />
+</Canvas>
 
 ## github.com usage
 
diff --git a/docs/src/stories/deprecated-components/SideNav/SideNav.stories.mdx b/docs/src/stories/deprecated-components/SideNav/SideNav.stories.mdx
index fb52dd1e9a..6664fd9638 100644
--- a/docs/src/stories/deprecated-components/SideNav/SideNav.stories.mdx
+++ b/docs/src/stories/deprecated-components/SideNav/SideNav.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as SideNavStories from './SideNav.stories'
 
@@ -11,16 +11,24 @@ The Side Nav is a vertical list of navigational links, typically used on the lef
 - You can use a **border** if the parent element doesn't have it already.
 - Add `aria-current="page"` to show a link as selected. Selected button elements in tab-like UIs should instead have `aria-selected="true"`.
 
-<Story story={SideNavStories.Default} />
+<Canvas>
+  <Story story={SideNavStories.Default} />
+</Canvas>
 
 Different kind of content can be added inside a Side Nav item. Use utility classes to further style them if needed.
 
-<Story story={SideNavStories.Options} />
+<Canvas>
+  <Story story={SideNavStories.Options} />
+</Canvas>
 
 The `.SideNav-subItem` is an alternative, more lightweight version without borders and more condensed. It can be used stand-alone.
 
-<Story story={SideNavStories.SubItem} />
+<Canvas>
+  <Story story={SideNavStories.SubItem} />
+</Canvas>
 
 Or also appear nested, as a sub navigation. Use margin/padding utility classes to add indentation.
 
-<Story story={SideNavStories.Nested} />
+<Canvas>
+  <Story story={SideNavStories.Nested} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/SubNav/SubNav.stories.mdx b/docs/src/stories/deprecated-components/SubNav/SubNav.stories.mdx
index 6b423eb64c..60cb3d015f 100644
--- a/docs/src/stories/deprecated-components/SubNav/SubNav.stories.mdx
+++ b/docs/src/stories/deprecated-components/SubNav/SubNav.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as SubNavStories from './SubNav.stories'
 
@@ -8,12 +8,18 @@ import * as SubNavStories from './SubNav.stories'
 
 `.subnav` is navigation that is typically used when on a dashboard type interface with another set of navigation above it. This helps distinguish navigation hierarchy.
 
-<Story story={SubNavStories.Default} />
+<Canvas>
+  <Story story={SubNavStories.Default} />
+</Canvas>
 
 You can have `subnav-search` in the subnav bar.
 
-<Story story={SubNavStories.Search} />
+<Canvas>
+  <Story story={SubNavStories.Search} />
+</Canvas>
 
 You can also use a `subnav-search-context` to display search help in a select menu.
 
-<Story story={SubNavStories.SearchContext} />
+<Canvas>
+  <Story story={SubNavStories.SearchContext} />
+</Canvas>
diff --git a/docs/src/stories/deprecated-components/Toast/Toast.stories.mdx b/docs/src/stories/deprecated-components/Toast/Toast.stories.mdx
index 9b1d70a6d6..b7df2e923b 100644
--- a/docs/src/stories/deprecated-components/Toast/Toast.stories.mdx
+++ b/docs/src/stories/deprecated-components/Toast/Toast.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as ToastStories from './Toast.stories'
 
@@ -12,7 +12,9 @@ Toasts are used to show live, time-sensitive feedback to users.
 
 To create a default toast, use `.Toast`. Always use the `info` icon for default messages.
 
-<Story story={ToastStories.Default} />
+<Canvas>
+  <Story story={ToastStories.Default} />
+</Canvas>
 
 The Toast content is formattable. We recommend keeping your message under 140 characters.
 
@@ -22,39 +24,53 @@ Use the success, warning, and error modifiers to communicate different states.
 
 Always use the `check` octicon for success states.
 
-<Story story={ToastStories.Success} />
+<Canvas>
+  <Story story={ToastStories.Success} />
+</Canvas>
 
 Always use the `alert` octicon for warning states.
 
-<Story story={ToastStories.Alert} />
+<Canvas>
+  <Story story={ToastStories.Alert} />
+</Canvas>
 
 Always use the `stop` octicon for error states.
 
-<Story story={ToastStories.Error} />
+<Canvas>
+  <Story story={ToastStories.Error} />
+</Canvas>
 
 ## Toast with dismiss
 
 Use `.Toast-dismissButton` to allow a user to explicitly dismiss a Toast.
 
-<Story story={ToastStories.Dismiss} />
+<Canvas>
+  <Story story={ToastStories.Dismiss} />
+</Canvas>
 
 ## Toast with link
 
 Include a link to allow users to take actions within a Toast.
 
-<Story story={ToastStories.WithLink} />
+<Canvas>
+  <Story story={ToastStories.WithLink} />
+</Canvas>
 
 ## Toast animation in
 
 The `Toast--animateIn` and `Toast--animateOut` modifier classes can be used to animate the toast in and out from the bottom.
 
-<Story story={ToastStories.AnimationIn} />
+<Canvas>
+  <Story story={ToastStories.AnimationIn} />
+</Canvas>
 
 ## Toast with loading animation
 
 Add the `Toast--spinner` modifier class on the `Toast-icon` `svg` to communicate a loading state.
 
-<Story story={ToastStories.Loading} />
+<Canvas>
+  <Story story={ToastStories.Loading} />
+</Canvas>
 
 ## Toast position
 
diff --git a/docs/src/stories/deprecated-components/Tooltip/Tooltip.stories.mdx b/docs/src/stories/deprecated-components/Tooltip/Tooltip.stories.mdx
index 8b900f51c5..4c342f3dd7 100644
--- a/docs/src/stories/deprecated-components/Tooltip/Tooltip.stories.mdx
+++ b/docs/src/stories/deprecated-components/Tooltip/Tooltip.stories.mdx
@@ -1,4 +1,4 @@
-import {Meta, Story} from '@storybook/addon-docs'
+import {Meta, Story, Canvas} from '@storybook/addon-docs'
 
 import * as TooltipStories from './Tooltip.stories'
 
@@ -26,22 +26,30 @@ Before adding a tooltip, please consider: Is this information essential and nece
 
 Specify the direction of a tooltip with north, south, east, and west directions:
 
-<Story story={TooltipStories.Default} />
+<Canvas>
+  <Story story={TooltipStories.Default} />
+</Canvas>
 
 ## Tooltip alignment
 
 Align tooltips to the left or right of an element, combined with a directional class to specify north or south. Use a modifier of `1` or `2` to choose how much the tooltip's arrow is indented.
 
-<Story story={TooltipStories.Alignment} />
+<Canvas>
+  <Story story={TooltipStories.Alignment} />
+</Canvas>
 
 ## Tooltips with multiple lines
 
 Use `.tooltipped-multiline` when you have long content. This style has some limitations: you cannot pre-format the text with newlines, and tooltips are limited to a max-width of `250px`.
 
-<Story story={TooltipStories.MultiLine} />
+<Canvas>
+  <Story story={TooltipStories.MultiLine} />
+</Canvas>
 
 ## Tooltips with no delay
 
 By default the tooltips have a slight delay before appearing. This is to keep multiple tooltips in the UI from being distracting. There is a `.tooltipped-no-delay` modifier class you can use to override this.
 
-<Story story={TooltipStories.NoDelay} />
+<Canvas>
+  <Story story={TooltipStories.NoDelay} />
+</Canvas>
diff --git a/docs/src/stories/utilities/Animations.stories.mdx b/docs/src/stories/utilities/Animations.stories.mdx
deleted file mode 100644
index 419ec6a549..0000000000
--- a/docs/src/stories/utilities/Animations.stories.mdx
+++ /dev/null
@@ -1,14 +0,0 @@
-import {Meta, Story} from '@storybook/addon-docs'
-import * as stories from './Animation.stories.jsx'
-
-<Meta title="Utilities/Animation" />
-
-# BoxOverlay
-
-Use the `Box--overlay` with the `<details>` and [`<details-dialog>`](https://github.com/github/details-dialog), and add the `details-overlay-dark` utility if you wish to apply a dark transparent background.
-
-Box overlays come in three widths. The default `Box--overlay` is 440px wide, `Box-overlay--narrow` is 320px wide, and `Box-overlay--wide` is 640px wide.
-
-See [aria attributes](https://www.w3.org/TR/html-aria/#allowed-aria-roles-states-and-properties)
-
-<Story story={stories.FadeIn} />
diff --git a/docs/yarn.lock b/docs/yarn.lock
index 5406f40c1b..22cdb671e9 100644
--- a/docs/yarn.lock
+++ b/docs/yarn.lock
@@ -2314,18 +2314,18 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-actions@6.5.0", "@storybook/addon-actions@^6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-6.5.0.tgz"
-  integrity sha512-kcvziFCu3TpR/MHorNtuj5OZeaNFRXuoUJPcruHJN4EqSH/GE/aFzSi7HUY3r22citrAnMbwQsHQb/2dx8KYrg==
-  dependencies:
-    "@storybook/addons" "6.5.0"
-    "@storybook/api" "6.5.0"
-    "@storybook/client-logger" "6.5.0"
-    "@storybook/components" "6.5.0"
-    "@storybook/core-events" "6.5.0"
+"@storybook/addon-actions@6.5.16", "@storybook/addon-actions@^6.5.0":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-actions/-/addon-actions-6.5.16.tgz#2d7679f64899bef165a338582cb928102a09e364"
+  integrity sha512-aADjilFmuD6TNGz2CRPSupnyiA/IGkPJHDBTqMpsDXTUr8xnuD122xkIhg6UxmCM2y1c+ncwYXy3WPK2xXK57g==
+  dependencies:
+    "@storybook/addons" "6.5.16"
+    "@storybook/api" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/components" "6.5.16"
+    "@storybook/core-events" "6.5.16"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.0"
+    "@storybook/theming" "6.5.16"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
     global "^4.4.0"
@@ -2339,18 +2339,18 @@
     util-deprecate "^1.0.2"
     uuid-browser "^3.1.0"
 
-"@storybook/addon-backgrounds@6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.0.tgz"
-  integrity sha512-AJU7vyck1no+ViKeJ1G6f4Vjsh6cZDlw6pG738KZ/1aV3fyBTyWTDd0hAhHl+DkSvhZyf0vZB9uTFt1z/xGBmQ==
+"@storybook/addon-backgrounds@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-backgrounds/-/addon-backgrounds-6.5.16.tgz#a93ea53955f714b4a4432dda1b88942cc87dd390"
+  integrity sha512-t7qooZ892BruhilFmzYPbysFwpULt/q4zYXNSmKVbAYta8UVvitjcU4F18p8FpWd9WvhiTr0SDlyhNZuzvDfug==
   dependencies:
-    "@storybook/addons" "6.5.0"
-    "@storybook/api" "6.5.0"
-    "@storybook/client-logger" "6.5.0"
-    "@storybook/components" "6.5.0"
-    "@storybook/core-events" "6.5.0"
+    "@storybook/addons" "6.5.16"
+    "@storybook/api" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/components" "6.5.16"
+    "@storybook/core-events" "6.5.16"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/theming" "6.5.0"
+    "@storybook/theming" "6.5.16"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
@@ -2358,47 +2358,47 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
-"@storybook/addon-controls@6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addon-controls/-/addon-controls-6.5.0.tgz"
-  integrity sha512-//sFR1blyRsSZkohxQWWxkykygPdRvaL+wTAmvYYGIK262cizfvvYhSSXLXgXw5LBE5ZEp99p//eABuRb+OndA==
+"@storybook/addon-controls@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.5.16.tgz#5017805b8ca413edf6e9d87b90a9436e79eb5e59"
+  integrity sha512-kShSGjq1MjmmyL3l8i+uPz6yddtf82mzys0l82VKtcuyjrr5944wYFJ5NTXMfZxrO/U6FeFsfuFZE/k6ex3EMg==
   dependencies:
-    "@storybook/addons" "6.5.0"
-    "@storybook/api" "6.5.0"
-    "@storybook/client-logger" "6.5.0"
-    "@storybook/components" "6.5.0"
-    "@storybook/core-common" "6.5.0"
+    "@storybook/addons" "6.5.16"
+    "@storybook/api" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/components" "6.5.16"
+    "@storybook/core-common" "6.5.16"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/node-logger" "6.5.0"
-    "@storybook/store" "6.5.0"
-    "@storybook/theming" "6.5.0"
+    "@storybook/node-logger" "6.5.16"
+    "@storybook/store" "6.5.16"
+    "@storybook/theming" "6.5.16"
     core-js "^3.8.2"
     lodash "^4.17.21"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-docs@6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addon-docs/-/addon-docs-6.5.0.tgz"
-  integrity sha512-M23fvkk74IA+TjYdNjMJSu+h3yWoJMrcm2loRLyIWQ2v9qUc/+RbkJclR4fwWHxZMaE6VsNXnfhx9ph/LSBpDA==
+"@storybook/addon-docs@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.5.16.tgz#3de912f51fb8e48b9a53b11a5b1cede067acbe70"
+  integrity sha512-QM9WDZG9P02UvbzLu947a8ZngOrQeAKAT8jCibQFM/+RJ39xBlfm8rm+cQy3dm94wgtjmVkA3mKGOV/yrrsddg==
   dependencies:
     "@babel/plugin-transform-react-jsx" "^7.12.12"
     "@babel/preset-env" "^7.12.11"
     "@jest/transform" "^26.6.2"
     "@mdx-js/react" "^1.6.22"
-    "@storybook/addons" "6.5.0"
-    "@storybook/api" "6.5.0"
-    "@storybook/components" "6.5.0"
-    "@storybook/core-common" "6.5.0"
-    "@storybook/core-events" "6.5.0"
+    "@storybook/addons" "6.5.16"
+    "@storybook/api" "6.5.16"
+    "@storybook/components" "6.5.16"
+    "@storybook/core-common" "6.5.16"
+    "@storybook/core-events" "6.5.16"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/docs-tools" "6.5.0"
-    "@storybook/mdx1-csf" canary
-    "@storybook/node-logger" "6.5.0"
-    "@storybook/postinstall" "6.5.0"
-    "@storybook/preview-web" "6.5.0"
-    "@storybook/source-loader" "6.5.0"
-    "@storybook/store" "6.5.0"
-    "@storybook/theming" "6.5.0"
+    "@storybook/docs-tools" "6.5.16"
+    "@storybook/mdx1-csf" "^0.0.1"
+    "@storybook/node-logger" "6.5.16"
+    "@storybook/postinstall" "6.5.16"
+    "@storybook/preview-web" "6.5.16"
+    "@storybook/source-loader" "6.5.16"
+    "@storybook/store" "6.5.16"
+    "@storybook/theming" "6.5.16"
     babel-loader "^8.0.0"
     core-js "^3.8.2"
     fast-deep-equal "^3.1.3"
@@ -2411,36 +2411,36 @@
     util-deprecate "^1.0.2"
 
 "@storybook/addon-essentials@^6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addon-essentials/-/addon-essentials-6.5.0.tgz"
-  integrity sha512-tB2PJ/TTlCP9HCmlOEIUjxxoEBp/Gqyp9Gjq60v9XELURsMJ1dPWP3re4J5XsRy2UG5gOgnhk6Sl5Cmd7VICEA==
-  dependencies:
-    "@storybook/addon-actions" "6.5.0"
-    "@storybook/addon-backgrounds" "6.5.0"
-    "@storybook/addon-controls" "6.5.0"
-    "@storybook/addon-docs" "6.5.0"
-    "@storybook/addon-measure" "6.5.0"
-    "@storybook/addon-outline" "6.5.0"
-    "@storybook/addon-toolbars" "6.5.0"
-    "@storybook/addon-viewport" "6.5.0"
-    "@storybook/addons" "6.5.0"
-    "@storybook/api" "6.5.0"
-    "@storybook/core-common" "6.5.0"
-    "@storybook/node-logger" "6.5.0"
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-essentials/-/addon-essentials-6.5.16.tgz#815991366a4a90b60bf0aa4022eb0bb0c2bb536d"
+  integrity sha512-TeoMr6tEit4Pe91GH6f8g/oar1P4M0JL9S6oMcFxxrhhtOGO7XkWD5EnfyCx272Ok2VYfE58FNBTGPNBVIqYKQ==
+  dependencies:
+    "@storybook/addon-actions" "6.5.16"
+    "@storybook/addon-backgrounds" "6.5.16"
+    "@storybook/addon-controls" "6.5.16"
+    "@storybook/addon-docs" "6.5.16"
+    "@storybook/addon-measure" "6.5.16"
+    "@storybook/addon-outline" "6.5.16"
+    "@storybook/addon-toolbars" "6.5.16"
+    "@storybook/addon-viewport" "6.5.16"
+    "@storybook/addons" "6.5.16"
+    "@storybook/api" "6.5.16"
+    "@storybook/core-common" "6.5.16"
+    "@storybook/node-logger" "6.5.16"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
 "@storybook/addon-links@^6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addon-links/-/addon-links-6.5.0.tgz"
-  integrity sha512-kjB11pRJH+Pw0jkZ6whmyEQZEzAfKZk7YeF+HRPPEZ8cIQpcRHj67CFiW2DCjObcrT02r93fWth/Ob1OFlX95A==
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-links/-/addon-links-6.5.16.tgz#cacb20cd0656f0681a874709d428d3f3577828c3"
+  integrity sha512-P/mmqK57NGXnR0i3d/T5B0rIt0Lg8Yq+qionRr3LK3AwG/4yGnYt4GNomLEknn/eEwABYq1Q/Z1aOpgIhNdq5A==
   dependencies:
-    "@storybook/addons" "6.5.0"
-    "@storybook/client-logger" "6.5.0"
-    "@storybook/core-events" "6.5.0"
+    "@storybook/addons" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/core-events" "6.5.16"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
-    "@storybook/router" "6.5.0"
+    "@storybook/router" "6.5.16"
     "@types/qs" "^6.9.5"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -2449,30 +2449,30 @@
     regenerator-runtime "^0.13.7"
     ts-dedent "^2.0.0"
 
-"@storybook/addon-measure@6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addon-measure/-/addon-measure-6.5.0.tgz"
-  integrity sha512-d7OYH7vsvIucjorBSqIhg9avwk8MJQkhgeiE29M5YCbDsHCKiNqkiY27KrhAWy76JSZuRT6MKZhqbg+KJJ4+dg==
+"@storybook/addon-measure@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-measure/-/addon-measure-6.5.16.tgz#7f7bfdc0b624fbf18386b20a5e460027bf87115c"
+  integrity sha512-DMwnXkmM2L6POTh4KaOWvOAtQ2p9Tr1UUNxz6VXiN5cKFohpCs6x0txdLU5WN8eWIq0VFsO7u5ZX34CGCc6gCg==
   dependencies:
-    "@storybook/addons" "6.5.0"
-    "@storybook/api" "6.5.0"
-    "@storybook/client-logger" "6.5.0"
-    "@storybook/components" "6.5.0"
-    "@storybook/core-events" "6.5.0"
+    "@storybook/addons" "6.5.16"
+    "@storybook/api" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/components" "6.5.16"
+    "@storybook/core-events" "6.5.16"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     global "^4.4.0"
 
-"@storybook/addon-outline@6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addon-outline/-/addon-outline-6.5.0.tgz"
-  integrity sha512-vJDoTJBif9WkMhRd8ddlSS7bY3bX9L4IJtfr+wCrZ+6/aNOcCUtO7+0kfxmmuoo55ke6z4Z3I4UHhi15WMUyTQ==
+"@storybook/addon-outline@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-outline/-/addon-outline-6.5.16.tgz#6985b6a0b0122db36561c81dde2aa851604657b7"
+  integrity sha512-0du96nha4qltexO0Xq1xB7LeRSbqjC9XqtZLflXG7/X3ABoPD2cXgOV97eeaXUodIyb2qYBbHUfftBeA75x0+w==
   dependencies:
-    "@storybook/addons" "6.5.0"
-    "@storybook/api" "6.5.0"
-    "@storybook/client-logger" "6.5.0"
-    "@storybook/components" "6.5.0"
-    "@storybook/core-events" "6.5.0"
+    "@storybook/addons" "6.5.16"
+    "@storybook/api" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/components" "6.5.16"
+    "@storybook/core-events" "6.5.16"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     global "^4.4.0"
@@ -2490,30 +2490,30 @@
     postcss-loader "^4.2.0"
     style-loader "^1.3.0"
 
-"@storybook/addon-toolbars@6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addon-toolbars/-/addon-toolbars-6.5.0.tgz"
-  integrity sha512-vUn2ltuKOCzK2Ezv8ZFm9tBxycG69K9GS2F0dtkFVRG1CUOqVa5kG3lQjurPuKO7U265As97wLRJMspuMBOTUA==
+"@storybook/addon-toolbars@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-toolbars/-/addon-toolbars-6.5.16.tgz#9de04f9cc64b68d6cb680aa1c4fbf874e11afa32"
+  integrity sha512-y3PuUKiwOWrAvqx1YdUvArg0UaAwmboXFeR2bkrowk1xcT+xnRO3rML4npFeUl26OQ1FzwxX/cw6nknREBBLEA==
   dependencies:
-    "@storybook/addons" "6.5.0"
-    "@storybook/api" "6.5.0"
-    "@storybook/client-logger" "6.5.0"
-    "@storybook/components" "6.5.0"
-    "@storybook/theming" "6.5.0"
+    "@storybook/addons" "6.5.16"
+    "@storybook/api" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/components" "6.5.16"
+    "@storybook/theming" "6.5.16"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
 
-"@storybook/addon-viewport@6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addon-viewport/-/addon-viewport-6.5.0.tgz"
-  integrity sha512-FreKRWMdh/fssKha6sz5juKp6kYCwMhFyZRivMYrmhxVzT/5ppsxb41Oi4Y7qq8wjqErtcliDku3nhGXXwIJyw==
-  dependencies:
-    "@storybook/addons" "6.5.0"
-    "@storybook/api" "6.5.0"
-    "@storybook/client-logger" "6.5.0"
-    "@storybook/components" "6.5.0"
-    "@storybook/core-events" "6.5.0"
-    "@storybook/theming" "6.5.0"
+"@storybook/addon-viewport@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.5.16.tgz#226aa0ab93df68264269eb31adb104e7e48f6c68"
+  integrity sha512-1Vyqf1U6Qng6TXlf4SdqUKyizlw1Wn6+qW8YeA2q1lbkJqn3UlnHXIp8Q0t/5q1dK5BFtREox3+jkGwbJrzkmA==
+  dependencies:
+    "@storybook/addons" "6.5.16"
+    "@storybook/api" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/components" "6.5.16"
+    "@storybook/core-events" "6.5.16"
+    "@storybook/theming" "6.5.16"
     core-js "^3.8.2"
     global "^4.4.0"
     memoizerific "^1.11.3"
@@ -2522,7 +2522,7 @@
 
 "@storybook/addons@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.0.tgz#273b3779c543610f345348f71eb5fa80f6425837"
   integrity sha512-dN2kyGgbRivfOKY4Q3eoxqdodw4k59VOhBudrWsNjBED3w0wxy1gt1izUbpUkI+2SM3f/ciqRCvKg6hA0P5Gjg==
   dependencies:
     "@storybook/api" "6.5.0"
@@ -2537,6 +2537,23 @@
     global "^4.4.0"
     regenerator-runtime "^0.13.7"
 
+"@storybook/addons@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.5.16.tgz#07e8f2205f86fa4c9dada719e3e096cb468e3cdd"
+  integrity sha512-p3DqQi+8QRL5k7jXhXmJZLsE/GqHqyY6PcoA1oNTJr0try48uhTGUOYkgzmqtDaa/qPFO5LP+xCPzZXckGtquQ==
+  dependencies:
+    "@storybook/api" "6.5.16"
+    "@storybook/channels" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/core-events" "6.5.16"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/router" "6.5.16"
+    "@storybook/theming" "6.5.16"
+    "@types/webpack-env" "^1.16.0"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/addons@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/addons/-/addons-6.5.9.tgz"
@@ -2556,7 +2573,7 @@
 
 "@storybook/api@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/api/-/api-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.0.tgz#10e736428f5f806b97f2408f43aa404ca09bfc59"
   integrity sha512-5gj4kpKodaGeLViY7qi3CRbw4ORGyi9WuIRtgdORdO9Rp3RcJlSZDO8pWThc0vJc81S0eeQKs6HGQFfFK04Haw==
   dependencies:
     "@storybook/channels" "6.5.0"
@@ -2577,6 +2594,29 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/api@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.5.16.tgz#897915b76de05587fd702951d5d836f708043662"
+  integrity sha512-HOsuT8iomqeTMQJrRx5U8nsC7lJTwRr1DhdD0SzlqL4c80S/7uuCy4IZvOt4sYQjOzW5fOo/kamcoBXyLproTA==
+  dependencies:
+    "@storybook/channels" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/core-events" "6.5.16"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/router" "6.5.16"
+    "@storybook/semver" "^7.3.2"
+    "@storybook/theming" "6.5.16"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+    store2 "^2.12.0"
+    telejson "^6.0.8"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/api@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/api/-/api-6.5.9.tgz"
@@ -2602,7 +2642,7 @@
 
 "@storybook/builder-webpack4@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/builder-webpack4/-/builder-webpack4-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack4/-/builder-webpack4-6.5.0.tgz#b05b297c3c81054ed39aebc91c67bb3105b0b467"
   integrity sha512-+NYgllV9pJqUlvPmSLDKznYc3rs/YhSyFgLVfWjrcBycKzgZMc2PVfsMYiJn3VW1iWh2zvYamFk37+tGlLd4HA==
   dependencies:
     "@babel/core" "^7.12.10"
@@ -2654,26 +2694,26 @@
     webpack-virtual-modules "^0.2.2"
 
 "@storybook/builder-webpack5@^6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/builder-webpack5/-/builder-webpack5-6.5.0.tgz"
-  integrity sha512-9ybI4vRI2qxsYxAwBzrWpuoL8isJZYzu9bTf+2GpE+9tpJMOGs+YsrDCrdLhulceaSuxKYIUot4W8CeXIBF+rg==
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/builder-webpack5/-/builder-webpack5-6.5.16.tgz#2f260e29fbc87f6f3bb3212459048ce37f3fb54e"
+  integrity sha512-kh8Sofm1sbijaHDWtm0sXabqACHVFjikU/fIkkW786kpjoPIPIec1a+hrLgDsZxMU3I7XapSOaCFzWt6FjVXjg==
   dependencies:
     "@babel/core" "^7.12.10"
-    "@storybook/addons" "6.5.0"
-    "@storybook/api" "6.5.0"
-    "@storybook/channel-postmessage" "6.5.0"
-    "@storybook/channels" "6.5.0"
-    "@storybook/client-api" "6.5.0"
-    "@storybook/client-logger" "6.5.0"
-    "@storybook/components" "6.5.0"
-    "@storybook/core-common" "6.5.0"
-    "@storybook/core-events" "6.5.0"
-    "@storybook/node-logger" "6.5.0"
-    "@storybook/preview-web" "6.5.0"
-    "@storybook/router" "6.5.0"
+    "@storybook/addons" "6.5.16"
+    "@storybook/api" "6.5.16"
+    "@storybook/channel-postmessage" "6.5.16"
+    "@storybook/channels" "6.5.16"
+    "@storybook/client-api" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/components" "6.5.16"
+    "@storybook/core-common" "6.5.16"
+    "@storybook/core-events" "6.5.16"
+    "@storybook/node-logger" "6.5.16"
+    "@storybook/preview-web" "6.5.16"
+    "@storybook/router" "6.5.16"
     "@storybook/semver" "^7.3.2"
-    "@storybook/store" "6.5.0"
-    "@storybook/theming" "6.5.0"
+    "@storybook/store" "6.5.16"
+    "@storybook/theming" "6.5.16"
     "@types/node" "^14.0.10 || ^16.0.0"
     babel-loader "^8.0.0"
     babel-plugin-named-exports-order "^0.0.2"
@@ -2699,7 +2739,7 @@
 
 "@storybook/channel-postmessage@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.5.0.tgz#fb2d78e8886c864656e27751c43061302c77dc62"
   integrity sha512-fjvGe4z0RUd+7eNMu/Hxh2Z0W9gWN2HN/ff31WmZc91xmtd/05K76Npk2H5ADZmAgMpBvDcErI0EUKi5eLEAOw==
   dependencies:
     "@storybook/channels" "6.5.0"
@@ -2710,6 +2750,19 @@
     qs "^6.10.0"
     telejson "^6.0.8"
 
+"@storybook/channel-postmessage@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.5.16.tgz#06167c0a66c06b2b5f8ff01d1dd436fff8119a15"
+  integrity sha512-fZZSN29dsUArWOx7e7lTdMA9+7zijVwCwbvi2Fo4fqhRLh1DsTb/VXfz1FKMCWAjNlcX7QQvV25tnxbqsD6lyw==
+  dependencies:
+    "@storybook/channels" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/core-events" "6.5.16"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    qs "^6.10.0"
+    telejson "^6.0.8"
+
 "@storybook/channel-postmessage@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/channel-postmessage/-/channel-postmessage-6.5.9.tgz"
@@ -2725,7 +2778,7 @@
 
 "@storybook/channel-websocket@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/channel-websocket/-/channel-websocket-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-websocket/-/channel-websocket-6.5.0.tgz#4553f54b3fef324e56de4ca3b250f6d1d5dce19f"
   integrity sha512-J/SPYAPZ6S7Hct1Bo3+0va3Vt4b+wSw2MI5a1iYhLqrIeSKvoTTQVEGPVau1ZON68XCwrJIBEWHoBJJSFK/qtQ==
   dependencies:
     "@storybook/channels" "6.5.0"
@@ -2747,13 +2800,22 @@
 
 "@storybook/channels@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.0.tgz#62910910f84f5db7ba5a45dfc7ff79ed798baca2"
   integrity sha512-Q0L0hC/OjoUkZ/31GSd88otv3b9+J2MJmBqFj0w6aaAWlJ3HNmSoLyrV3Bf8UXc0iXAfs8ARv+UjZu24yVZGSQ==
   dependencies:
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/channels@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.5.16.tgz#3fb9a3b5666ecb951a2d0cf8b0699b084ef2d3c6"
+  integrity sha512-VylzaWQZaMozEwZPJdyJoz+0jpDa8GRyaqu9TGG6QGv+KU5POoZaGLDkRE7TzWkyyP0KQLo80K99MssZCpgSeg==
+  dependencies:
+    core-js "^3.8.2"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/channels@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/channels/-/channels-6.5.9.tgz"
@@ -2765,7 +2827,7 @@
 
 "@storybook/client-api@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.0.tgz#b1f2b1fc5e66aa37d3919ce88599a2a71b1e6895"
   integrity sha512-+TEKcOJUt4z/QgNTb8ej1okxImCt0VHLJdf6aCMhmu6UVGrrh3n7xpiMLuWYE7q8l0rOq73OuXvNMliaBLBpyA==
   dependencies:
     "@storybook/addons" "6.5.0"
@@ -2789,6 +2851,32 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/client-api@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.5.16.tgz#13e5a7c3d1f0f951ec4ef51cfcf2c5aafb560e12"
+  integrity sha512-i3UwkzzUFw8I+E6fOcgB5sc4oU2fhvaKnqC1mpd9IYGJ9JN9MnGIaVl3Ko28DtFItu/QabC9JsLIJVripFLktQ==
+  dependencies:
+    "@storybook/addons" "6.5.16"
+    "@storybook/channel-postmessage" "6.5.16"
+    "@storybook/channels" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/core-events" "6.5.16"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/store" "6.5.16"
+    "@types/qs" "^6.9.5"
+    "@types/webpack-env" "^1.16.0"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+    store2 "^2.12.0"
+    synchronous-promise "^2.0.15"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/client-api@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/client-api/-/client-api-6.5.9.tgz"
@@ -2817,12 +2905,20 @@
 
 "@storybook/client-logger@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.0.tgz#97030cfb285422b24394cdcbbeda174226a2d96b"
   integrity sha512-JDuMgvUTRGr3RdbIcBdV0uVOiZfQWbvMipcMuDYvoeI7FqwBH8qi9d3fPDaHAI1DmovUZFxAsBrLObu/wsRM3A==
   dependencies:
     core-js "^3.8.2"
     global "^4.4.0"
 
+"@storybook/client-logger@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.5.16.tgz#955cc46b389e7151c9eb1585a75e6a0605af61a1"
+  integrity sha512-pxcNaCj3ItDdicPTXTtmYJE3YC1SjxFrBmHcyrN+nffeNyiMuViJdOOZzzzucTUG0wcOOX8jaSyak+nnHg5H1Q==
+  dependencies:
+    core-js "^3.8.2"
+    global "^4.4.0"
+
 "@storybook/client-logger@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.5.9.tgz"
@@ -2833,7 +2929,7 @@
 
 "@storybook/components@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/components/-/components-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.0.tgz#490715832f9008ea4712ffdce44f114ebac6c0c4"
   integrity sha512-0/8NImJTqI21X7afKXrikIAoKZ/53NTS/yupwBImCKjQphRvb3Dv7wy9AXliU8Zsn5KLhDhCoR/gLxjQiLvlRA==
   dependencies:
     "@storybook/client-logger" "6.5.0"
@@ -2846,6 +2942,20 @@
     regenerator-runtime "^0.13.7"
     util-deprecate "^1.0.2"
 
+"@storybook/components@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.5.16.tgz#f8dc51213bc08fe32154be964e1e8b0e2f670ed6"
+  integrity sha512-LzBOFJKITLtDcbW9jXl0/PaG+4xAz25PK8JxPZpIALbmOpYWOAPcO6V9C2heX6e6NgWFMUxjplkULEk9RCQMNA==
+  dependencies:
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/theming" "6.5.16"
+    core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+    util-deprecate "^1.0.2"
+
 "@storybook/components@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/components/-/components-6.5.9.tgz"
@@ -2864,7 +2974,7 @@
 
 "@storybook/core-client@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/core-client/-/core-client-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/core-client/-/core-client-6.5.0.tgz#7960926565378a2dffce86cfe4a675c47174a04e"
   integrity sha512-YWeIHJ5qURwuzsfQZUhwhlucc56OKz40IwYwVeRhPdENcRVFdbiO5cVVPVHLz8+HcqiP4WOldcASG76DLNlo7g==
   dependencies:
     "@storybook/addons" "6.5.0"
@@ -2916,7 +3026,7 @@
 
 "@storybook/core-common@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.0.tgz#dc4c2ab96f37d9e65be2bc6caa67f21256950125"
   integrity sha512-scJ6/Xv1tnqus6hzYDYpiSqquPE2eQp/c89lHnyv2uWFqVHRASMi8sBTXoNJFj1qgpsextrimV4r54+zZBdnhw==
   dependencies:
     "@babel/core" "^7.12.10"
@@ -2970,6 +3080,62 @@
     util-deprecate "^1.0.2"
     webpack "4"
 
+"@storybook/core-common@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/core-common/-/core-common-6.5.16.tgz#db80aa6f220a576a83db821f720e103190a914ae"
+  integrity sha512-2qtnKP3TTOzt2cp6LXKRTh7XrI9z5VanMnMTgeoFcA5ebnndD4V6BExQUdYPClE/QooLx6blUWNgS9dFEpjSqQ==
+  dependencies:
+    "@babel/core" "^7.12.10"
+    "@babel/plugin-proposal-class-properties" "^7.12.1"
+    "@babel/plugin-proposal-decorators" "^7.12.12"
+    "@babel/plugin-proposal-export-default-from" "^7.12.1"
+    "@babel/plugin-proposal-nullish-coalescing-operator" "^7.12.1"
+    "@babel/plugin-proposal-object-rest-spread" "^7.12.1"
+    "@babel/plugin-proposal-optional-chaining" "^7.12.7"
+    "@babel/plugin-proposal-private-methods" "^7.12.1"
+    "@babel/plugin-proposal-private-property-in-object" "^7.12.1"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-transform-arrow-functions" "^7.12.1"
+    "@babel/plugin-transform-block-scoping" "^7.12.12"
+    "@babel/plugin-transform-classes" "^7.12.1"
+    "@babel/plugin-transform-destructuring" "^7.12.1"
+    "@babel/plugin-transform-for-of" "^7.12.1"
+    "@babel/plugin-transform-parameters" "^7.12.1"
+    "@babel/plugin-transform-shorthand-properties" "^7.12.1"
+    "@babel/plugin-transform-spread" "^7.12.1"
+    "@babel/preset-env" "^7.12.11"
+    "@babel/preset-react" "^7.12.10"
+    "@babel/preset-typescript" "^7.12.7"
+    "@babel/register" "^7.12.1"
+    "@storybook/node-logger" "6.5.16"
+    "@storybook/semver" "^7.3.2"
+    "@types/node" "^14.0.10 || ^16.0.0"
+    "@types/pretty-hrtime" "^1.0.0"
+    babel-loader "^8.0.0"
+    babel-plugin-macros "^3.0.1"
+    babel-plugin-polyfill-corejs3 "^0.1.0"
+    chalk "^4.1.0"
+    core-js "^3.8.2"
+    express "^4.17.1"
+    file-system-cache "^1.0.5"
+    find-up "^5.0.0"
+    fork-ts-checker-webpack-plugin "^6.0.4"
+    fs-extra "^9.0.1"
+    glob "^7.1.6"
+    handlebars "^4.7.7"
+    interpret "^2.2.0"
+    json5 "^2.2.3"
+    lazy-universal-dotenv "^3.0.1"
+    picomatch "^2.3.0"
+    pkg-dir "^5.0.0"
+    pretty-hrtime "^1.0.3"
+    resolve-from "^5.0.0"
+    slash "^3.0.0"
+    telejson "^6.0.8"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+    webpack "4"
+
 "@storybook/core-common@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/core-common/-/core-common-6.5.9.tgz"
@@ -3028,11 +3194,18 @@
 
 "@storybook/core-events@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.0.tgz#6450d748c4e99aec9ad48495e5f0ef552828f85f"
   integrity sha512-Ic0IG2V/4nO5joy21jhEDIapgCk4SSQ5wO+zQ1mEQ8yeqXGJjlXjFTIjYk1AJJ6W5sFNMuvDSwX0AWMCLe7rsA==
   dependencies:
     core-js "^3.8.2"
 
+"@storybook/core-events@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.5.16.tgz#b1c265dac755007dae172d9d4b72656c9e5d7bb3"
+  integrity sha512-qMZQwmvzpH5F2uwNUllTPg6eZXr2OaYZQRRN8VZJiuorZzDNdAFmiVWMWdkThwmyLEJuQKXxqCL8lMj/7PPM+g==
+  dependencies:
+    core-js "^3.8.2"
+
 "@storybook/core-events@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/core-events/-/core-events-6.5.9.tgz"
@@ -3042,7 +3215,7 @@
 
 "@storybook/core-server@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/core-server/-/core-server-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/core-server/-/core-server-6.5.0.tgz#44daca1f738153af5b314e7c06fb7bcc7e1289b5"
   integrity sha512-PVRJYCZSmxECUngDNyBxFL68M734TERtYq8tp2FS2StT4xFto378MBXpBzwv3I4OtXwA3bZtogDQiryYe8ZU4g==
   dependencies:
     "@discoveryjs/json-ext" "^0.5.3"
@@ -3093,7 +3266,7 @@
 
 "@storybook/core@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/core/-/core-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.5.0.tgz#919807813c02402196f0dfa2951ba39fc8cd31d3"
   integrity sha512-YGDpnFuI0h1c+lGsHSHom65FfqyhAl0QEuukwnfL5P2sXvBuWoIeb+VS+7rtDsrfDvktZRUfcPKKv1UgYYRSCQ==
   dependencies:
     "@storybook/core-client" "6.5.0"
@@ -3101,7 +3274,7 @@
 
 "@storybook/csf-tools@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/csf-tools/-/csf-tools-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/csf-tools/-/csf-tools-6.5.0.tgz#5d6d101e9d5ea5212d20aaf91a8689c2b96e55bb"
   integrity sha512-OZz6riRm/mZpaCu+x9cgwHAZD7jGUBHX2tIWYk539dinEzBrnr8jQzcc3y79EEb/qy5Up0eUZ7bt0PmKwydUEQ==
   dependencies:
     "@babel/core" "^7.12.10"
@@ -3128,7 +3301,7 @@
 
 "@storybook/docs-tools@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/docs-tools/-/docs-tools-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.0.tgz#c3003ca20cff86f15b9e140522d12e8dfe5ae292"
   integrity sha512-+Ge/4PfereYuD+6DpHPexAi5SDtYxxqTGrIbEUKWe9iakyiaRCIgWlCQh3fPCMBnLndZU63p2PUmzOpwcsif+Q==
   dependencies:
     "@babel/core" "^7.12.10"
@@ -3139,9 +3312,22 @@
     lodash "^4.17.21"
     regenerator-runtime "^0.13.7"
 
+"@storybook/docs-tools@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/docs-tools/-/docs-tools-6.5.16.tgz#1ec5433eeab63a214d37ffc4660cdaec9704ac39"
+  integrity sha512-o+rAWPRGifjBF5xZzTKOqnHN3XQWkl0QFJYVDIiJYJrVll7ExCkpEq/PahOGzIBBV+tpMstJgmKM3lr/lu/jmg==
+  dependencies:
+    "@babel/core" "^7.12.10"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/store" "6.5.16"
+    core-js "^3.8.2"
+    doctrine "^3.0.0"
+    lodash "^4.17.21"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/manager-webpack4@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/manager-webpack4/-/manager-webpack4-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/manager-webpack4/-/manager-webpack4-6.5.0.tgz#68a73895a5143bda585291d6af51ed65ee7edde3"
   integrity sha512-uZ6H8jQXitTmJ+KbMX2hQ/duQ2lykbS28tAFKDJMc4N7rdW2oq+Js/ZrjLfknzYNXFgttcw/PWX1rUFwOMCabw==
   dependencies:
     "@babel/core" "^7.12.10"
@@ -3218,9 +3404,26 @@
     webpack-dev-middleware "^4.1.0"
     webpack-virtual-modules "^0.4.1"
 
+"@storybook/mdx1-csf@^0.0.1":
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/@storybook/mdx1-csf/-/mdx1-csf-0.0.1.tgz#d4184e3f6486fade9f7a6bfaf934d9bc07718d5b"
+  integrity sha512-4biZIWWzoWlCarMZmTpqcJNgo/RBesYZwGFbQeXiGYsswuvfWARZnW9RE9aUEMZ4XPn7B1N3EKkWcdcWe/K2tg==
+  dependencies:
+    "@babel/generator" "^7.12.11"
+    "@babel/parser" "^7.12.11"
+    "@babel/preset-env" "^7.12.11"
+    "@babel/types" "^7.12.11"
+    "@mdx-js/mdx" "^1.6.22"
+    "@types/lodash" "^4.14.167"
+    js-string-escape "^1.0.1"
+    loader-utils "^2.0.0"
+    lodash "^4.17.21"
+    prettier ">=2.2.1 <=2.3.0"
+    ts-dedent "^2.0.0"
+
 "@storybook/mdx1-csf@canary":
   version "1.0.1--canary.26.47c2c44.0"
-  resolved "https://registry.npmjs.org/@storybook/mdx1-csf/-/mdx1-csf-1.0.1--canary.26.47c2c44.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/mdx1-csf/-/mdx1-csf-1.0.1--canary.26.47c2c44.0.tgz#7269851adb7e8a9a91fd68447d327248619e8525"
   integrity sha512-I0yBNemGsjo5ZgA/g6Lz6HZg6wiD21rji6JQDqIqv9deOGD5dN3PvevxqjvON2pMjQ0GOZQWnmkuJz4ajb8NpA==
   dependencies:
     "@mdx-js/mdx" "^1.6.22"
@@ -3228,7 +3431,7 @@
 
 "@storybook/node-logger@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.0.tgz#faf00120d802ff1768957840157dd34a28ffa28d"
   integrity sha512-jDtsyOh3QiBO4Ag+TbF0jBPnqPtWW33BuGyZibfyJp6YUYorubiPFede/BuJkjfT7mzL7PVx/+p0GaRs5M/lMg==
   dependencies:
     "@types/npmlog" "^4.1.2"
@@ -3237,6 +3440,17 @@
     npmlog "^5.0.1"
     pretty-hrtime "^1.0.3"
 
+"@storybook/node-logger@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.5.16.tgz#d57fd6204c2abfbc297551d98ad5475dd73207cc"
+  integrity sha512-YjhBKrclQtjhqFNSO+BZK+RXOx6EQypAELJKoLFaawg331e8VUfvUuRCNB3fcEWp8G9oH13PQQte0OTjLyyOYg==
+  dependencies:
+    "@types/npmlog" "^4.1.2"
+    chalk "^4.1.0"
+    core-js "^3.8.2"
+    npmlog "^5.0.1"
+    pretty-hrtime "^1.0.3"
+
 "@storybook/node-logger@6.5.9", "@storybook/node-logger@^6.1.14":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.9.tgz"
@@ -3248,10 +3462,10 @@
     npmlog "^5.0.1"
     pretty-hrtime "^1.0.3"
 
-"@storybook/postinstall@6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/postinstall/-/postinstall-6.5.0.tgz"
-  integrity sha512-3Tmtt8d3MPXeYX5gTnnO41kM7ciR3iVnoKCz7Quj696B0NSytXT6FR1FuMU/nqJgaf+WD0BwMlEADMlGjVZiXw==
+"@storybook/postinstall@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.5.16.tgz#20aa02fd4513fa0b60ed838b413c46f351f64f60"
+  integrity sha512-08K2q+qN6pqyPW7PHLCZ5G5Xa6Wosd6t0F16PQ4abX2ItlJLabVoJN5mZ0gm/aeLTjD8QYr8IDvacu4eXh0SVA==
   dependencies:
     core-js "^3.8.2"
 
@@ -3262,7 +3476,7 @@
 
 "@storybook/preview-web@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.5.0.tgz#fe2383307f525e6744dd50fc1feded66196a8d85"
   integrity sha512-J+8LkQjrC4h2IrV+C88d/OXzx2kW+1567sLFwh1GM/LvaCazSSUv2J1qG9iKOEMbyRtf+xlVSsmTQVupR/ZZGw==
   dependencies:
     "@storybook/addons" "6.5.0"
@@ -3282,6 +3496,28 @@
     unfetch "^4.2.0"
     util-deprecate "^1.0.2"
 
+"@storybook/preview-web@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/preview-web/-/preview-web-6.5.16.tgz#1d32a72be25776f9597e33ffc1914f3430fae689"
+  integrity sha512-IJnvfe2sKCfk7apN9Fu9U8qibbarrPX5JB55ZzK1amSHVmSDuYk5MIMc/U3NnSQNnvd1DO5v/zMcGgj563hrtg==
+  dependencies:
+    "@storybook/addons" "6.5.16"
+    "@storybook/channel-postmessage" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/core-events" "6.5.16"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    "@storybook/store" "6.5.16"
+    ansi-to-html "^0.6.11"
+    core-js "^3.8.2"
+    global "^4.4.0"
+    lodash "^4.17.21"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+    synchronous-promise "^2.0.15"
+    ts-dedent "^2.0.0"
+    unfetch "^4.2.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/preview-web@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/preview-web/-/preview-web-6.5.9.tgz"
@@ -3319,7 +3555,7 @@
 
 "@storybook/react@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/react/-/react-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.5.0.tgz#7192cf1b27d06978572b8183e8da87725d68b1e0"
   integrity sha512-KBtewqtE/ZTqXMoSZoZXmFnywdMo5vda5wLVM29zL09E1Szn57GqsYK/6rtveZb4PzMIHGmqfGfFjbTs7KqTZg==
   dependencies:
     "@babel/preset-flow" "^7.12.1"
@@ -3360,13 +3596,24 @@
 
 "@storybook/router@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/router/-/router-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.0.tgz#13492559d11687bf2be86d5260ca725793ebbe95"
   integrity sha512-e0Inidt1MSXVjSxD2xCm7K16kFe6X2QZhLE5dA4dPHUPPZzdvUsR/3yxGwthPRT82fIzUz/jf54dH4Fb5aachA==
   dependencies:
     "@storybook/client-logger" "6.5.0"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
 
+"@storybook/router@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.5.16.tgz#28fb4d34e8219351a40bee1fc94dcacda6e1bd8b"
+  integrity sha512-ZgeP8a5YV/iuKbv31V8DjPxlV4AzorRiR8OuSt/KqaiYXNXlOoQDz/qMmiNcrshrfLpmkzoq7fSo4T8lWo2UwQ==
+  dependencies:
+    "@storybook/client-logger" "6.5.16"
+    core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    qs "^6.10.0"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/router@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/router/-/router-6.5.9.tgz"
@@ -3386,25 +3633,25 @@
     core-js "^3.6.5"
     find-up "^4.1.0"
 
-"@storybook/source-loader@6.5.0":
-  version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/source-loader/-/source-loader-6.5.0.tgz"
-  integrity sha512-594NAb7MG2+P9PRiHABhDqEE+o2rDNKyZss5xDMdL1fYOxlgMn92+uqitpXe7BFC6RS23ZEr23rMu6C/3QsIEA==
+"@storybook/source-loader@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/source-loader/-/source-loader-6.5.16.tgz#b691a024e6ff36bbd1144ecb4a65986f0e149741"
+  integrity sha512-fyVl4jrM/5JLrb48aqXPu7sTsmySQaVGFp1zfeqvPPlJRFMastDrePm5XGPN7Qjv1wsKmpuBvuweFKOT1pru3g==
   dependencies:
-    "@storybook/addons" "6.5.0"
-    "@storybook/client-logger" "6.5.0"
+    "@storybook/addons" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
     "@storybook/csf" "0.0.2--canary.4566f4d.1"
     core-js "^3.8.2"
     estraverse "^5.2.0"
     global "^4.4.0"
-    loader-utils "^2.0.0"
+    loader-utils "^2.0.4"
     lodash "^4.17.21"
     prettier ">=2.2.1 <=2.3.0"
     regenerator-runtime "^0.13.7"
 
 "@storybook/store@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/store/-/store-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.0.tgz#d13c6be14e654be24715dbd4fcb7f685f22760d4"
   integrity sha512-352pCHPq8QirmVXbYuPvIA4VfDFI29dxUmAm63iB08+QlcFNcdAVORS0akD9WNx8mTYmI4HOLzPzXzcdkgfhSw==
   dependencies:
     "@storybook/addons" "6.5.0"
@@ -3423,6 +3670,27 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/store@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/store/-/store-6.5.16.tgz#b308701293a3a11bfcc766770584495874fd17da"
+  integrity sha512-g+bVL5hmMq/9cM51K04e37OviUPHT0rHHrRm5wj/hrf18Kd9120b3sxdQ5Dc+HZ292yuME0n+cyrQPTYx9Epmw==
+  dependencies:
+    "@storybook/addons" "6.5.16"
+    "@storybook/client-logger" "6.5.16"
+    "@storybook/core-events" "6.5.16"
+    "@storybook/csf" "0.0.2--canary.4566f4d.1"
+    core-js "^3.8.2"
+    fast-deep-equal "^3.1.3"
+    global "^4.4.0"
+    lodash "^4.17.21"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+    slash "^3.0.0"
+    stable "^0.1.8"
+    synchronous-promise "^2.0.15"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/store@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/store/-/store-6.5.9.tgz"
@@ -3446,7 +3714,7 @@
 
 "@storybook/telemetry@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/telemetry/-/telemetry-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/telemetry/-/telemetry-6.5.0.tgz#e0e1ac4526d7da2d906dea00d3376ce132a7adc8"
   integrity sha512-ezaDcRgC52BW6FGXBGBAQ/3z5yk8/y5I8WbiouAtTw/NCyKYzL541IOwXAqWdEMw+pCGOC39Y/J6ccOcH3LXsQ==
   dependencies:
     "@storybook/client-logger" "6.5.0"
@@ -3464,13 +3732,23 @@
 
 "@storybook/theming@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.0.tgz#8cb0d18455ff417968e99712d7c6c3458f4ff106"
   integrity sha512-QALIOP5T00SRNr0v/UuyZ7s2WNGa8Zb+oUQGgFpbbsvOar6TWGreuqpt2vWtTTCkTddvFl5q6tdX2x+urpV6iQ==
   dependencies:
     "@storybook/client-logger" "6.5.0"
     core-js "^3.8.2"
     regenerator-runtime "^0.13.7"
 
+"@storybook/theming@6.5.16":
+  version "6.5.16"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.5.16.tgz#b999bdb98945b605b93b9dfdf7408535b701e2aa"
+  integrity sha512-hNLctkjaYLRdk1+xYTkC1mg4dYz2wSv6SqbLpcKMbkPHTE0ElhddGPHQqB362md/w9emYXNkt1LSMD8Xk9JzVQ==
+  dependencies:
+    "@storybook/client-logger" "6.5.16"
+    core-js "^3.8.2"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/theming@6.5.9":
   version "6.5.9"
   resolved "https://registry.npmjs.org/@storybook/theming/-/theming-6.5.9.tgz"
@@ -3483,7 +3761,7 @@
 
 "@storybook/ui@6.5.0":
   version "6.5.0"
-  resolved "https://registry.npmjs.org/@storybook/ui/-/ui-6.5.0.tgz"
+  resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.5.0.tgz#50775066134de6b7a27f9f947921c0411fe8a27b"
   integrity sha512-4SeY2AjVZXqw0XS30iWWKnBfYvy/x0UVJ3FavN8G+j3HhXw+8Q3R+yL7SuXDPg1JsO2OuWL5NJroPw4z7y78/Q==
   dependencies:
     "@storybook/addons" "6.5.0"
@@ -4082,6 +4360,11 @@
   dependencies:
     "@types/node" "*"
 
+"@types/lodash@^4.14.167":
+  version "4.14.195"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.195.tgz#bafc975b252eb6cea78882ce8a7b6bf22a6de632"
+  integrity sha512-Hwx9EUgdwf2GLarOjQp5ZH8ZmblzcbTBC2wtQWNKARBSxM9ezRIAUpeDTgoQRAFB0+8CNWXVA9+MaSOzOF3nPg==
+
 "@types/lodash@^4.14.92":
   version "4.14.176"
   resolved "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.176.tgz"
@@ -12739,6 +13022,11 @@ joi@^17.2.1:
     "@sideway/formula" "^3.0.0"
     "@sideway/pinpoint" "^2.0.0"
 
+js-string-escape@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef"
+  integrity sha512-Smw4xcfIQ5LVjAOuJCvN/zIodzA/BBSsluuoSykP+lUvScIi4U6RJLfwHet5cxFnCswUjISV8oAXaqaJDY3chg==
+
 "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz"
@@ -12868,6 +13156,11 @@ json5@^2.1.2, json5@^2.1.3:
   dependencies:
     minimist "^1.2.5"
 
+json5@^2.2.3:
+  version "2.2.3"
+  resolved "https://registry.yarnpkg.com/json5/-/json5-2.2.3.tgz#78cd6f1a19bdc12b73db5ad0c61efd66c1e29283"
+  integrity sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==
+
 jsonfile@^2.1.0:
   version "2.4.0"
   resolved "https://registry.npmjs.org/jsonfile/-/jsonfile-2.4.0.tgz"
@@ -13132,6 +13425,15 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+loader-utils@^2.0.4:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
 locate-path@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/locate-path/-/locate-path-2.0.0.tgz"