diff --git a/.storybook/main.js b/.storybook/main.js
index 7f8369b..754c624 100644
--- a/.storybook/main.js
+++ b/.storybook/main.js
@@ -1,4 +1,8 @@
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  addons: [
+    '@storybook/addon-controls',
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+  ],
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
index 5d00c02..0d85c3f 100644
--- a/.storybook/preview.js
+++ b/.storybook/preview.js
@@ -1,4 +1,4 @@
-
 export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-}
\ No newline at end of file
+  actions: { argTypesRegex: '^on[A-Z].*' },
+  controls: { expanded: true },
+};
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 981c9f7..f221f4a 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -2,6 +2,28 @@
 
 `Camara` strictly follows [semantic versioning](https://semver.org/)
 
+## v1.0.0-beta.9 (Sat Mar 27, 2021)
+
+A change has been made to how the project gets updated. Going forward every new `beta` version is going to focus solely on a single component and try to improve on the component across its Storybook stories, docs, test, and real-world usage. This way we can move incrementally while knowing that we are thinking about each component in a comprehensive manner.
+
+- `Button` component:
+  - ❌ remove `primary` prop option for setting the type of button.
+  - 🆕 `variant` prop is now used for setting the type of button from `primary`, `secondary` or `ghost`.
+  - ✨ `size` prop now updated with `large`, `small` and `medium` options.
+  - 🆕 `block` prop sets the option to fit button width to the full width of the parent
+  - 🆕 `loading` prop add a loading spinner indicator to be used when users have to wait for the result of their action after pressing a button.
+  - 🆕 `disabled` prop adds a visual indicator that a button is not interactive and restricts it from being pressed.
+  - 🆕 `danger` prop adds a visual indicator that the button action is destructive and irreversible in some case
+  - ❌ remove `orientation` prop.
+  - ✨ rename `rounded` prop to `pill` to accurately describe the button shape
+  - ✨ hover, active and focused state has been improved.
+
+### Authors: 1
+
+- ᑭᖇᗴᔕᕼ ᗝᑎƳᗴᗴ ([@Preshonyee](https://github.com/Preshonyee))
+
+---
+
 ## v1.0.0-beta.8 (Thur Feb 04, 2021)
 
 - minor package update
diff --git a/docs/README.md b/docs/README.md
deleted file mode 100644
index c8289e9..0000000
--- a/docs/README.md
+++ /dev/null
@@ -1,11 +0,0 @@
-# smooth-doc-starter
-
-## [Docs](https://smooth-doc.com)
-
-**See the documentation at [smooth-doc.com](https://smooth-doc.com)** for more information about using Smooth DOC!
-
-## License
-
-Licensed under the MIT License, Copyright © 2020-present Greg Bergé.
-
-See [LICENSE](./LICENSE) for more information.
diff --git a/docs/pages/docs/components/button.mdx b/docs/pages/docs/components/button.mdx
index 6443d4f..1e8e8c3 100644
--- a/docs/pages/docs/components/button.mdx
+++ b/docs/pages/docs/components/button.mdx
@@ -56,3 +56,11 @@ render(
   </Button>
 );
 ```
+
+## API
+
+Button properties
+
+| Property | Description                          | Type      | Default | Version |
+| -------- | ------------------------------------ | --------- | ------- | ------- |
+| loading  | Set the loading status of the button | `boolean` | false   |         |
diff --git a/package.json b/package.json
index 0d8d4a6..4ea5bb4 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@rollup/plugin-commonjs": "^17.1.0",
     "@rollup/plugin-node-resolve": "^11.1.1",
     "@storybook/addon-actions": "^6.0.27",
+    "@storybook/addon-controls": "^6.1.21",
     "@storybook/addon-essentials": "^6.0.27",
     "@storybook/addon-links": "^6.0.27",
     "@storybook/react": "^6.1.16",
diff --git a/src/components/button/button.stories.tsx b/src/components/button/button.stories.tsx
index d26e21b..f19371c 100644
--- a/src/components/button/button.stories.tsx
+++ b/src/components/button/button.stories.tsx
@@ -1,68 +1,152 @@
 import React from 'react';
-import { Button } from '.';
+import { Story, Meta } from '@storybook/react/types-6-0';
+import { Box, Flex } from '../layout';
 
-export default {
-  title: 'Button',
-};
+import { Button, ButtonProps } from '.';
 
-// variants
-export const Primary = () => <Button variant='primary'>Primary</Button>;
-
-export const Secondary = () => <Button variant='secondary'> Secondary</Button>;
+export default {
+  title: 'Components/Button',
+  component: Button,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    color: { control: 'color' },
+    children: { control: 'text' },
+  },
+} as Meta;
 
-export const Ghost = () => <Button variant='ghost'>Ghost</Button>;
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
 
-// sizes
+// Base default button
+export const Base = Template.bind({});
+Base.args = {
+  children: 'Say Hello',
+  onClick: () => alert('Hello Camara'),
+};
 
-export const Large = () => (
-  <Button variant='primary' size='large'>
-    Large
-  </Button>
+// Variants
+export const Variants = (args: ButtonProps) => (
+  <Flex>
+    <Button {...args} variant='primary'>
+      Primary
+    </Button>
+    <Button {...args} variant='secondary'>
+      Secondary
+    </Button>
+    <Button {...args} variant='ghost'>
+      Ghost
+    </Button>
+  </Flex>
 );
 
-export const Medium = () => (
-  <Button variant='primary' size='medium'>
-    Medium
-  </Button>
+// sizes
+export const Sizes = (args: ButtonProps) => (
+  <Flex>
+    <div>
+      <Button {...args} size='large'>
+        Large
+      </Button>
+    </div>
+    <div>
+      <Button {...args} size='medium'>
+        Medium
+      </Button>
+    </div>
+    <div>
+      <Button {...args} size='small'>
+        Small
+      </Button>
+    </div>
+  </Flex>
 );
 
-export const Small = () => (
-  <Button variant='primary' size='small'>
-    Small
-  </Button>
+// disabled buttons
+export const Disabled = (args: ButtonProps) => (
+  <Flex>
+    <div>
+      <Button {...args} disabled variant='primary'>
+        Primary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} disabled variant='secondary'>
+        Secondary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} disabled variant='ghost'>
+        Ghost
+      </Button>
+    </div>
+  </Flex>
 );
 
-// disabled button
-export const Disabled = () => (
-  <Button variant='primary' disabled>
-    Disabled
-  </Button>
+// danger buttons
+export const Danger = (args: ButtonProps) => (
+  <Flex>
+    <div>
+      <Button {...args} danger variant='primary'>
+        Primary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} danger variant='secondary'>
+        Secondary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} danger variant='ghost'>
+        Ghost
+      </Button>
+    </div>
+  </Flex>
 );
 
-// danger button
-export const Danger = () => (
-  <Button variant='primary' danger>
-    Danger
-  </Button>
+// pill-shaped button
+export const Pill = (args: ButtonProps) => (
+  <Flex>
+    <div>
+      <Button {...args} pill variant='primary'>
+        Primary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} pill variant='secondary'>
+        Secondary
+      </Button>
+    </div>
+    <div>
+      <Button {...args} pill variant='ghost'>
+        Ghost
+      </Button>
+    </div>
+  </Flex>
 );
 
-// pill-shaped button
-export const Pill = () => (
-  <Button variant='primary' pill>
-    Camara
-  </Button>
+// full width button
+export const Block = (args: ButtonProps) => (
+  <Box width={30}>
+    <Button {...args} block variant='primary'>
+      Primary
+    </Button>
+    <Button {...args} block variant='secondary'>
+      Secondary
+    </Button>
+    <Button {...args} block variant='ghost'>
+      Ghost
+    </Button>
+  </Box>
 );
 
 // With background color
-export const BackgroundColor = () => (
-  <Button variant='primary' pill backgroundColor='green'>
+export const BackgroundColor = (args: ButtonProps) => (
+  <Button {...args} pill backgroundColor='green'>
     Camara
   </Button>
 );
 
 // With color
-export const Color = () => (
-  <Button variant='primary' pill backgroundColor='#ffc108' color='#000000'>
+export const Color = (args: ButtonProps) => (
+  <Button {...args} pill backgroundColor='#ffc108' color='#000000'>
     Camara
   </Button>
 );
diff --git a/src/components/button/button.tsx b/src/components/button/button.tsx
index a69c51a..42f2027 100644
--- a/src/components/button/button.tsx
+++ b/src/components/button/button.tsx
@@ -1,22 +1,20 @@
-import React, { EventHandler } from 'react';
+import React from 'react';
 import styled, { css } from 'styled-components';
 import { tokens } from '../../constants';
 
 const {
   $primary,
   $white,
-  $buttonHover,
-  $buttonPressed,
   $primaryButtonHover,
   $primaryButtonPressed,
   $buttonDanger,
   $buttonDangerHover,
   $buttonDangerPressed,
+  $statusUnknown,
 } = tokens.colors;
-const { $boxShadow } = tokens.other;
-const { $1, $2 } = tokens.space;
+const { $1 } = tokens.space;
 
-export interface ButtonProps {
+interface StyleProps {
   /**
    * What variant of button is to be used
    */
@@ -55,13 +53,12 @@ export interface ButtonProps {
   /**
    * What color to use
    */
-
   color?: string;
+
   /**
    * Optional click handler
    */
-
-  onClick?: (event) => void;
+  onClick?: (event: any) => void;
 
   /**
    * Set shaped of button to pill-shape
@@ -69,165 +66,204 @@ export interface ButtonProps {
   pill?: boolean;
 }
 
-/**
- * Primary UI component for user interaction
- */
+interface BaseProps {
+  /**
+   * Can be used to set the button label
+   */
+  children: React.ReactNode;
+}
+
+export type ButtonProps = BaseProps & StyleProps;
 
-const StyledButton = styled.button<ButtonProps>`
-  // default button styles
-  background-color: ${(props) => props.backgroundColor || $primary};
-  color: ${(props) => props.color || $white};
+// default button styles
+const baseStyles = css<StyleProps>`
   display: inline-block;
   border-radius: 0.25rem;
   font-weight: 500;
-  padding: 0.75rem 0.5rem;
+  padding: 0.4rem 1rem;
   margin: ${$1};
   cursor: pointer;
   outline: none;
   border: none;
-  &:hover {
-    background-color: ${(props) => props.backgroundColor || $buttonHover};
-  }
-  &:focus {
-    background-color: ${(props) => props.backgroundColor || $buttonPressed};
-  }
-  &:active {
-    background-color: ${(props) => props.backgroundColor || $buttonPressed};
-  }
+`;
 
-  // primary button style
-  ${(props) =>
-    props.variant === 'primary' &&
-    css`
-      background-color: ${props.backgroundColor || $primary};
-      color: ${props.color || $white};
-      border: 1px solid ${props.backgroundColor || $primary};
-      &:hover {
-        background-color: ${props.backgroundColor || $primaryButtonHover};
-        border: 1px solid ${props.backgroundColor || $primaryButtonHover};
-        color: ${props.color || $white};
-      }
-      &:focus {
-        background-color: ${props.backgroundColor || $primaryButtonPressed};
-        border: 1px solid ${props.backgroundColor || $primaryButtonPressed};
-        color: ${props.color || $white};
-        box-shadow: ${$boxShadow};
-      }
-      &:active {
-        background-color: ${props.backgroundColor || $primaryButtonPressed};
-        border: 1px solid ${props.backgroundColor || $primaryButtonPressed};
-        color: ${props.color || $white};
-        box-shadow: ${$boxShadow};
-      }
-    `}
+// primary button style
+const primaryStyles = (props: StyleProps) =>
+  props.variant === 'primary' &&
+  css`
+    color: ${props.color || $white};
+    border: 1px solid ${props.backgroundColor || $primary};
+    background-color: ${props.backgroundColor || $primary};
+    &:hover {
+      background-color: ${props.backgroundColor || $primaryButtonHover};
+      border: 1px solid ${props.backgroundColor || $primaryButtonHover};
+    }
+    &:focus {
+      outline: 1px solid ${props.backgroundColor || $primary};
+      outline-offset: 2px;
+    }
+    &:active {
+      background-color: ${props.backgroundColor || $primaryButtonPressed};
+      border: 1px solid ${props.backgroundColor || $primaryButtonPressed};
+    }
+    &:disabled {
+      background-color: ${$statusUnknown};
+      border: 1px solid ${$statusUnknown};
+      cursor: not-allowed;
+      opacity: 0.8;
+    }
+  `;
 
-  // secondary button style
-  ${(props) =>
-    props.variant === 'secondary' &&
-    css`
-      background-color: ${props.backgroundColor || $white};
-      color: ${props.color || $primary};
-      border: 1px solid ${props.backgroundColor || $primary};
-      &:hover {
-        background-color: ${props.backgroundColor || $white};
-        color: ${props.color || $primaryButtonHover};
-        border: 1px solid ${props.backgroundColor || $primaryButtonHover};
-      }
-      &:focus {
-        background-color: ${props.backgroundColor || $white};
-        color: ${props.color || $primaryButtonPressed};
-        border: 1px solid ${props.backgroundColor || $primaryButtonPressed};
-        box-shadow: ${$boxShadow};
-      }
-      &:active {
-        background-color: ${props.backgroundColor || $white};
-        color: ${props.color || $primaryButtonPressed};
-        border: 1px solid ${props.backgroundColor || $primaryButtonPressed};
-        box-shadow: ${$boxShadow};
-      }
-    `}
+// secondary button style
+const secondaryStyles = (props: StyleProps) =>
+  props.variant === 'secondary' &&
+  css`
+    background-color: transparent;
+    color: ${props.color || $primary};
+    border: 1px solid ${props.backgroundColor || $primary};
+    &:hover {
+      color: ${props.color || $primaryButtonHover};
+      border: 1px solid ${props.backgroundColor || $primaryButtonHover};
+    }
+    &:active {
+      border: 1px solid ${props.backgroundColor || $primaryButtonPressed};
+    }
+    &:disabled {
+      color: ${$statusUnknown};
+      border: 1px solid ${$statusUnknown};
+      cursor: not-allowed;
+      opacity: 0.8;
+    }
+  `;
 
-  // ghost button style
-  ${(props) =>
-    props.variant === 'ghost' &&
-    css`
-      background-color: ${props.backgroundColor || $white};
-      color: ${props.color || $primary};
-      &:hover {
-        background-color: ${props.backgroundColor || $white};
-        color: ${props.color || $primaryButtonHover};
-      }
-      &:focus {
-        background-color: ${props.backgroundColor || $white};
-        color: ${props.color || $primaryButtonPressed};
-      }
-      &:active {
-        background-color: ${props.backgroundColor || $white};
-        color: ${props.color || $primaryButtonPressed};
-      }
-    `}
+// ghost button style
+const ghostStyles = (props: StyleProps) =>
+  props.variant === 'ghost' &&
+  css`
+    background-color: transparent;
+    color: ${props.color || $primary};
+    &:hover {
+      color: ${props.color || $primaryButtonHover};
+    }
+    &:focus {
+      color: ${props.color || $primaryButtonPressed};
+    }
+    &:active {
+      color: ${props.color || $primaryButtonPressed};
+    }
+    &:disabled {
+      color: ${$statusUnknown};
+      cursor: not-allowed;
+      opacity: 0.8;
+    }
+  `;
 
-// large button style
-  ${(props) =>
-    props.size === 'large' &&
-    css`
-      padding: 1rem 1rem;
-    `}
+// button size style
+const sizeStyles = ({ size }: StyleProps) => {
+  const sizes = {
+    large: {
+      padding: `0.55rem 1rem`,
+    },
+    medium: {
+      padding: `0.4rem 1rem`,
+    },
+    small: {
+      'font-size': `0.75rem`,
+      padding: `0.25rem 1rem`,
+    },
+  };
 
-    // medium button style
-  ${(props) =>
-    props.size === 'medium' &&
-    css`
-      padding: 0.75rem 0.5rem;
-    `}
+  return css({ ...sizes[size] });
+};
 
-    // small button style
-  ${(props) =>
-    props.size === 'small' &&
-    css`
-      padding: 0.5rem 0.25rem;
-    `}
+// danger button style
+const primaryDangerStyles = (props: StyleProps) =>
+  props.danger &&
+  props.variant === 'primary' &&
+  css`
+    background-color: ${$buttonDanger};
+    color: ${$white};
+    border: 1px solid ${$buttonDanger};
+    &:hover {
+      background-color: ${$buttonDangerHover};
+      color: ${$white};
+      border: 1px solid ${$buttonDangerHover};
+    }
+    &:focus {
+      background-color: ${$buttonDangerPressed};
+      color: ${$white};
+      border: 1px solid ${$buttonDangerPressed};
+    }
+    &:active {
+      background-color: ${$buttonDangerPressed};
+      color: ${$white};
+      border: 1px solid ${$buttonDangerPressed};
+    }
+  `;
 
-    // block button style
-    ${(props) =>
-    props.block &&
-    css`
-      width: 100%;
-      display: block;
-    `}
+// secondary button danger style
+const secondaryDangerStyles = (props: StyleProps) =>
+  props.danger &&
+  props.variant === 'secondary' &&
+  css`
+    background-color: transparent;
+    color: ${$buttonDanger};
+    border: 1px solid ${$buttonDanger};
+    &:hover {
+      color: ${$buttonDangerHover};
+      border: 1px solid ${$buttonDangerHover};
+    }
+    &:active {
+      color: ${$buttonDangerPressed};
+      border: 1px solid ${$buttonDangerPressed};
+    }
+  `;
 
-    // danger button style
-    ${(props) =>
-    props.danger &&
-    css`
-      background-color: ${$buttonDanger};
-      color: ${$white};
-      border: 1px solid ${$buttonDanger};
-      &:hover {
-        background-color: ${$buttonDangerHover};
-        color: ${$white};
-        border: 1px solid ${$buttonDangerHover};
-      }
-      &:focus {
-        background-color: ${$buttonDangerPressed};
-        color: ${$white};
-        border: 1px solid ${$buttonDangerPressed};
-        box-shadow: ${$boxShadow};
-      }
-      &:active {
-        background-color: ${$buttonDangerPressed};
-        color: ${$white};
-        border: 1px solid ${$buttonDangerPressed};
-        box-shadow: ${$boxShadow};
-      }
-    `}
+// ghost button danger style
+const ghostDangerStyles = (props: StyleProps) =>
+  props.danger &&
+  props.variant === 'ghost' &&
+  css`
+    background-color: transparent;
+    color: ${$buttonDanger};
+    &:hover {
+      color: ${$buttonDangerHover};
+    }
+    &:focus {
+      color: ${props.color || $primaryButtonPressed};
+    }
+    &:active {
+      color: ${props.color || $primaryButtonPressed};
+    }
+  `;
 
 // pill-shaped button style
-  ${(props) =>
-    props.pill &&
-    css`
-      border-radius: 2rem;
-    `}
+const pillStyles = (props: StyleProps) =>
+  props.pill &&
+  css`
+    border-radius: 2rem;
+  `;
+
+// full-width button style
+const blockStyles = (props: StyleProps) =>
+  props.block &&
+  css`
+    margin: 0.5rem 0;
+    display: block;
+    width: 100%;
+  `;
+
+const StyledButton = styled.button`
+  ${baseStyles}
+  ${primaryStyles}
+  ${secondaryStyles}
+  ${ghostStyles}
+  ${primaryDangerStyles}
+  ${secondaryDangerStyles}
+  ${ghostDangerStyles}
+  ${pillStyles}
+  ${sizeStyles}
+  ${blockStyles}
 `;
 
 export const Button: React.FC<ButtonProps> = ({
@@ -260,3 +296,17 @@ export const Button: React.FC<ButtonProps> = ({
     </StyledButton>
   );
 };
+
+Button.defaultProps = {
+  variant: 'primary',
+  size: 'medium',
+  disabled: false,
+  block: false,
+  loading: false,
+  onClick: () => null,
+  pill: false,
+  danger: false,
+  children: 'Button',
+};
+
+Button.displayName = 'Button';
diff --git a/src/constants/tokens.ts b/src/constants/tokens.ts
index 06d9fda..917805e 100644
--- a/src/constants/tokens.ts
+++ b/src/constants/tokens.ts
@@ -1,12 +1,10 @@
 export const tokens = {
   colors: {
-    $buttonHover: `rgba(0, 0, 0, 0.05)`,
-    $buttonPressed: `rgba(0, 0, 0, 0.09)`,
     $primaryButtonHover: `#0077FF`,
     $primaryButtonPressed: `#0088FF`,
     $buttonDanger: `#e22121`,
-    $buttonDangerHover: `#e2212160`,
-    $buttonDangerPressed: `#e2212180`,
+    $buttonDangerHover: `#bd1212`,
+    $buttonDangerPressed: `#ad0303`,
     $primary: '#0099FF', // primary brand color
     $secondary: '#e65f5c', // secondary brand color
     $black100: '#262626', // Primary text color
diff --git a/yarn.lock b/yarn.lock
index 8c1be20..703d347 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2033,6 +2033,20 @@
     core-js "^3.0.1"
     ts-dedent "^2.0.0"
 
+"@storybook/addon-controls@^6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/addon-controls/-/addon-controls-6.1.21.tgz#14e3473cfa6dcdb88e57a74e1a42b57bd87c69ee"
+  integrity sha512-IJgZWD2E9eLKj8DJLA9lT63N4jPfVneFJ05gnPco01ZJCEiDAo7babP5Ns2UTJDUaQEtX0m04UoIkidcteWKsA==
+  dependencies:
+    "@storybook/addons" "6.1.21"
+    "@storybook/api" "6.1.21"
+    "@storybook/client-api" "6.1.21"
+    "@storybook/components" "6.1.21"
+    "@storybook/node-logger" "6.1.21"
+    "@storybook/theming" "6.1.21"
+    core-js "^3.0.1"
+    ts-dedent "^2.0.0"
+
 "@storybook/addon-docs@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.1.16.tgz#87dc9e138690fa437b3ab97dbb2846f0ce97333b"
@@ -2158,6 +2172,21 @@
     global "^4.3.2"
     regenerator-runtime "^0.13.7"
 
+"@storybook/addons@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/addons/-/addons-6.1.21.tgz#94bb66fc51d1dfee80d0fe84f5b83c10045651b5"
+  integrity sha512-xo5TGu9EZVCqgh3D1veVnfuGzyKDWWsvOMo18phVqRxj21G3/+hScVyfIYwNTv7Ys5/Ahp9JxJUMXL3V3ny+tw==
+  dependencies:
+    "@storybook/api" "6.1.21"
+    "@storybook/channels" "6.1.21"
+    "@storybook/client-logger" "6.1.21"
+    "@storybook/core-events" "6.1.21"
+    "@storybook/router" "6.1.21"
+    "@storybook/theming" "6.1.21"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    regenerator-runtime "^0.13.7"
+
 "@storybook/api@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.1.16.tgz#52e86ea4ea85210b16c3df30fba639160d426ea7"
@@ -2183,6 +2212,31 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/api@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/api/-/api-6.1.21.tgz#be753ca8d3602efe4a11783c81c689463bee0825"
+  integrity sha512-QjZk70VSXMw/wPPoWdMp5Bl9VmkfmGhIz8PALrFLLEZHjzptpfZE2qkGEEJHG0NAksFUv6NxGki2/632dzR7Ug==
+  dependencies:
+    "@reach/router" "^1.3.3"
+    "@storybook/channels" "6.1.21"
+    "@storybook/client-logger" "6.1.21"
+    "@storybook/core-events" "6.1.21"
+    "@storybook/csf" "0.0.1"
+    "@storybook/router" "6.1.21"
+    "@storybook/semver" "^7.3.2"
+    "@storybook/theming" "6.1.21"
+    "@types/reach__router" "^1.3.7"
+    core-js "^3.0.1"
+    fast-deep-equal "^3.1.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    regenerator-runtime "^0.13.7"
+    store2 "^2.7.1"
+    telejson "^5.0.2"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/channel-postmessage@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.1.16.tgz#938daf4537ecbae4d3131562179bae706d22c1b6"
@@ -2196,6 +2250,19 @@
     qs "^6.6.0"
     telejson "^5.0.2"
 
+"@storybook/channel-postmessage@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/channel-postmessage/-/channel-postmessage-6.1.21.tgz#acce71833499dba4c4e686de09f5b281a3239842"
+  integrity sha512-SuI/ffqcPT02VNda32k8V0D4XpLm5bIy8CLIs0OAnQg+zt5KjGBpQBngk3q4EaAiOoAhbMWAQiUzRUXfrgkgXg==
+  dependencies:
+    "@storybook/channels" "6.1.21"
+    "@storybook/client-logger" "6.1.21"
+    "@storybook/core-events" "6.1.21"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    qs "^6.6.0"
+    telejson "^5.0.2"
+
 "@storybook/channels@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.1.16.tgz#987ba0fbd1a2b538f847ae505e253cdf06133b1e"
@@ -2205,6 +2272,15 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/channels@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/channels/-/channels-6.1.21.tgz#adbfae5f4767234c5b17d9578be983584dddead4"
+  integrity sha512-7WoizMjyHqCyvcWncLexSg9FLPIErWAZL4NvluEthwsHSO2sDybn9mh1pzsFHdYMuTP6ml06Zt9ayWMtIveHDg==
+  dependencies:
+    core-js "^3.0.1"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/client-api@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.1.16.tgz#d6362d9c6d95a30e47906b8ff9c1daa3a0facd4d"
@@ -2229,6 +2305,30 @@
     ts-dedent "^2.0.0"
     util-deprecate "^1.0.2"
 
+"@storybook/client-api@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/client-api/-/client-api-6.1.21.tgz#c9f72bbc9bf9d12cc931eb824f6912173c73b0b3"
+  integrity sha512-uLFXQ5z1LLWYnw1w+YUJPzIPRVlwCCvM2Si37aHDZn1F3fnbMg+huEhEqIQ1TTTw3wiJoTeGuShYvqyaiNwq/w==
+  dependencies:
+    "@storybook/addons" "6.1.21"
+    "@storybook/channel-postmessage" "6.1.21"
+    "@storybook/channels" "6.1.21"
+    "@storybook/client-logger" "6.1.21"
+    "@storybook/core-events" "6.1.21"
+    "@storybook/csf" "0.0.1"
+    "@types/qs" "^6.9.0"
+    "@types/webpack-env" "^1.15.3"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+    regenerator-runtime "^0.13.7"
+    stable "^0.1.8"
+    store2 "^2.7.1"
+    ts-dedent "^2.0.0"
+    util-deprecate "^1.0.2"
+
 "@storybook/client-logger@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.1.16.tgz#5523e9ebea22eda526e5d86d126d3139455e0481"
@@ -2237,6 +2337,14 @@
     core-js "^3.0.1"
     global "^4.3.2"
 
+"@storybook/client-logger@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/client-logger/-/client-logger-6.1.21.tgz#fe7d9e645ddb4eb9dc18fdacea24b4baf11bc6c9"
+  integrity sha512-QJV+gnVM2fQ4M7lSkRLCXkOw/RU+aEtUefo9TAnXxPHK3UGG+DyvLmha6fHGaz9GAcFxyWtgqCyVOhMe03Q35g==
+  dependencies:
+    core-js "^3.0.1"
+    global "^4.3.2"
+
 "@storybook/components@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.1.16.tgz#5f58a50b6a4953f5f035713e66da618fdaf39c65"
@@ -2263,6 +2371,33 @@
     react-textarea-autosize "^8.1.1"
     ts-dedent "^2.0.0"
 
+"@storybook/components@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/components/-/components-6.1.21.tgz#7b9bfd51e73c179654a114275e5073f494d2a005"
+  integrity sha512-2NjkyS1yeYXlRY7azt88woqd6eqJA00oloIxgMAFLVpRmvFxoHalY61wNrvxl2QSu9cNofp984AbGc8gPbizBA==
+  dependencies:
+    "@popperjs/core" "^2.5.4"
+    "@storybook/client-logger" "6.1.21"
+    "@storybook/csf" "0.0.1"
+    "@storybook/theming" "6.1.21"
+    "@types/overlayscrollbars" "^1.9.0"
+    "@types/react-color" "^3.0.1"
+    "@types/react-syntax-highlighter" "11.0.4"
+    core-js "^3.0.1"
+    fast-deep-equal "^3.1.1"
+    global "^4.3.2"
+    lodash "^4.17.15"
+    markdown-to-jsx "^6.11.4"
+    memoizerific "^1.11.3"
+    overlayscrollbars "^1.10.2"
+    polished "^3.4.4"
+    react-color "^2.17.0"
+    react-popper-tooltip "^3.1.1"
+    react-syntax-highlighter "^13.5.0"
+    react-textarea-autosize "^8.1.1"
+    regenerator-runtime "^0.13.7"
+    ts-dedent "^2.0.0"
+
 "@storybook/core-events@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.1.16.tgz#333c4f17eb34db9c5513faaf320d96aa46e6f446"
@@ -2270,6 +2405,13 @@
   dependencies:
     core-js "^3.0.1"
 
+"@storybook/core-events@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/core-events/-/core-events-6.1.21.tgz#11f537f78f8c73ba5e627b57b282a279793a3511"
+  integrity sha512-KWqnh1C7M1pT//WfQb3AD60yTR8jL48AfaeLGto2gO9VK7VVgj/EGsrXZP/GTL90ygyExbbBI5gkr7EBTu/HYw==
+  dependencies:
+    core-js "^3.0.1"
+
 "@storybook/core@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/core/-/core-6.1.16.tgz#868e1b9eeab07f93f58ea3b8fa6687138a44a774"
@@ -2395,6 +2537,17 @@
     npmlog "^4.1.2"
     pretty-hrtime "^1.0.3"
 
+"@storybook/node-logger@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/node-logger/-/node-logger-6.1.21.tgz#bcf882209697acfe4fc60bc224676400bce260ed"
+  integrity sha512-wQZZw4n1PG3kGOsczWCBC6+8RagYkrGYDqsVOpUcs5shGbPg5beCXDuzP4nxz2IlsoP9ZtTSaX741H791OIOjA==
+  dependencies:
+    "@types/npmlog" "^4.1.2"
+    chalk "^4.0.0"
+    core-js "^3.0.1"
+    npmlog "^4.1.2"
+    pretty-hrtime "^1.0.3"
+
 "@storybook/postinstall@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/postinstall/-/postinstall-6.1.16.tgz#1ef7903fa5c0c1edfda9281e0de88bb23848bde9"
@@ -2441,6 +2594,18 @@
     memoizerific "^1.11.3"
     qs "^6.6.0"
 
+"@storybook/router@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/router/-/router-6.1.21.tgz#0a822fa9cc67589a082f7a10fff15c8413f17706"
+  integrity sha512-m75WvUhoCBWDVekICAdbkidji/w5hCjHo+M8L13UghpwXWEnyr4/QqvkOb/PcSC8aZzxeMqSCpRQ1o6LWULneg==
+  dependencies:
+    "@reach/router" "^1.3.3"
+    "@types/reach__router" "^1.3.7"
+    core-js "^3.0.1"
+    global "^4.3.2"
+    memoizerific "^1.11.3"
+    qs "^6.6.0"
+
 "@storybook/semver@^7.3.2":
   version "7.3.2"
   resolved "https://registry.yarnpkg.com/@storybook/semver/-/semver-7.3.2.tgz#f3b9c44a1c9a0b933c04e66d0048fcf2fa10dac0"
@@ -2484,6 +2649,24 @@
     resolve-from "^5.0.0"
     ts-dedent "^2.0.0"
 
+"@storybook/theming@6.1.21":
+  version "6.1.21"
+  resolved "https://registry.yarnpkg.com/@storybook/theming/-/theming-6.1.21.tgz#b8e612e5a39b77f7e63a5f9ea322ed62adb0d5b0"
+  integrity sha512-yq7+/mpdljRdSRJYw/In/9tnDGXIUDe//mhyMftFfrB2mq6zi1yAZpowCerWhiDE2ipGkrfzIYx/Sn7bcaXgqg==
+  dependencies:
+    "@emotion/core" "^10.1.1"
+    "@emotion/is-prop-valid" "^0.8.6"
+    "@emotion/styled" "^10.0.23"
+    "@storybook/client-logger" "6.1.21"
+    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.4.4"
+    resolve-from "^5.0.0"
+    ts-dedent "^2.0.0"
+
 "@storybook/ui@6.1.16":
   version "6.1.16"
   resolved "https://registry.yarnpkg.com/@storybook/ui/-/ui-6.1.16.tgz#b6e5615bdc89eba384f192df203da83c19b1be8a"