diff --git a/.github/workflows/dsm-test.yml b/.github/workflows/dsm-test.yml
index 063c9f2edce5..66057a057686 100644
--- a/.github/workflows/dsm-test.yml
+++ b/.github/workflows/dsm-test.yml
@@ -25,6 +25,12 @@ jobs:
         run: cd akeneo-design-system && yarn test:visual:run
         id: visual_test_execution
 
+      - uses: actions/upload-artifact@v2
+        if: failure()
+        with:
+          name: test-folder
+          path: akeneo-design-system/src
+
       # Update visual by doing a pull request
       - name: Update visual tests
         if: failure() && steps.visual_test_execution.outcome == 'failure'
@@ -74,9 +80,3 @@ jobs:
             A new version of the staging env has been deployed :tada:
             Check it out here: https://samirboulil.github.io/dsm/${{ github.event.number }}/
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
-
-      - uses: actions/upload-artifact@v2
-        if: failure()
-        with:
-          name: test-folder
-          path: akeneo-design-system/src
diff --git a/akeneo-design-system/.storybook/main.js b/akeneo-design-system/.storybook/main.js
index c5a0a7a627d4..cc1d43b88338 100644
--- a/akeneo-design-system/.storybook/main.js
+++ b/akeneo-design-system/.storybook/main.js
@@ -5,6 +5,7 @@ module.exports = {
   ],
   "addons": [
     "@storybook/addon-links",
-    "@storybook/addon-essentials"
+    "@storybook/addon-essentials",
+    "themeprovider-storybook/register"
   ]
 }
diff --git a/akeneo-design-system/.storybook/preview.tsx b/akeneo-design-system/.storybook/preview.tsx
index 2da5ad0db47f..bd6de2b7c0f7 100644
--- a/akeneo-design-system/.storybook/preview.tsx
+++ b/akeneo-design-system/.storybook/preview.tsx
@@ -1,9 +1,17 @@
 import React from 'react';
-import {addDecorator} from '@storybook/react';
+import {addDecorator, addParameters} from '@storybook/react';
+import { withThemesProvider } from "themeprovider-storybook";
 import {StoryStyle} from '../src/shared/global';
+import {pimTheme} from '../src/theme/pim';
 
 addDecorator(story => (
   <>
     <StoryStyle>{story()}</StoryStyle>
   </>
 ));
+
+addDecorator(withThemesProvider([pimTheme]))
+
+addParameters({
+  viewMode: 'docs',
+});
diff --git a/akeneo-design-system/package.json b/akeneo-design-system/package.json
index 9d72f483201a..d5a6b0000520 100644
--- a/akeneo-design-system/package.json
+++ b/akeneo-design-system/package.json
@@ -15,8 +15,8 @@
     "test:visual:run": "jest --config ./jest.visual.config.js",
     "test:unit:watch": "jest --watch",
     "eslint": "eslint --config .eslintrc.json --quiet src/**/*.tsx",
-    "lint:fix": "prettier --config .prettierrc.json --parser typescript --write \"./src/**/*.ts\";",
-    "lint:check": "prettier --config .prettierrc.json --parser typescript --check \"./src/**/*.ts\" && eslint --config .eslintrc.json --quiet src/**/*.{ts,tsx}",
+    "lint:fix": "prettier --config .prettierrc.json --parser typescript --write \"./src/**/*.{ts,tsx}\";",
+    "lint:check": "prettier --config .prettierrc.json --parser typescript --check \"./src/**/*.{ts,tsx}\" && eslint --config .eslintrc.json --quiet src/**/*.{ts,tsx}",
     "storybook:start": "start-storybook -p 6006",
     "storybook:ci": "start-storybook -p 6006 --ci",
     "storybook:build": "build-storybook",
@@ -41,7 +41,7 @@
     "@storybook/addon-actions": "^6.0.4",
     "@storybook/addon-essentials": "^6.0.4",
     "@storybook/addon-links": "^6.0.4",
-    "@storybook/react": "^6.0.4",
+    "@storybook/react": "^6.0.21",
     "@testing-library/jest-dom": "^5.11.3",
     "@testing-library/react": "^10.4.8",
     "@types/expect-puppeteer": "^4.4.3",
@@ -67,6 +67,7 @@
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-node-resolve": "^5.2.0",
+    "themeprovider-storybook": "^1.6.2",
     "ts-jest": "^26.2.0",
     "typescript": "^4.0.2"
   }
diff --git a/akeneo-design-system/src/components/Checkbox/Checkbox.stories.mdx b/akeneo-design-system/src/components/Checkbox/Checkbox.stories.mdx
new file mode 100644
index 000000000000..3772a5f1a239
--- /dev/null
+++ b/akeneo-design-system/src/components/Checkbox/Checkbox.stories.mdx
@@ -0,0 +1,87 @@
+import { useState } from 'react';
+import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
+import { action } from "@storybook/addon-actions";
+import { Checkbox } from "./Checkbox.tsx";
+
+<Meta
+  title="Components/Checkbox"
+  component={Checkbox}
+  argTypes={{
+    readOnly: {control: {type: 'boolean'}},
+    checked: {control: {type: 'boolean'}},
+    label: {control: {type: 'text'}},
+    onChange: {action: 'Checkbox component onChange'},
+  }}
+  args={{
+    label: 'Checkbox'
+  }}
+/>
+
+# Checkbox
+
+## Usage
+The checkboxes are applied when users can select all, several, or none of the options from a given list.
+
+### Checkbox states
+The checkbox control allows three states: selected, unselected, and undetermined. The undetermined state comes into play when the checkbox contains a sublist of selections, some of which are selected, and others aren't.
+
+Users must be able to check the box by clicking directly on the box or by clicking on its label.
+
+### Content
+#### Title
+
+If necessary, a header can accompany a set of checkboxes to provide more context or clarity.
+
+#### Labels
+
+Always use clear and concise labels for the checkboxes. The labels appears on the right of the checkboxes.
+
+## Playground
+
+Use this playground to test the checkbox component
+
+<Canvas>
+  <Story name="Standard">
+    {(args) => {
+      return <Checkbox {...args}/>;
+    }}
+  </Story>
+</Canvas>
+
+<ArgsTable story="Standard" />
+
+## Variation on state
+<Story name="State">
+  {(args) => {
+    return (
+      <>
+        <Checkbox  {...args} checked={true} label={'Checkbox checked'}/>
+        <Checkbox  {...args} checked={false} undetermined={true} label={'Checkbox undetermined'}/>
+        <Checkbox  {...args} checked={false} label={'Checkbox unchecked'}/>
+      </>
+    )
+  }}
+</Story>
+
+## Variation on disabled
+<Story name="Disabled">
+  {(args) => {
+    return (
+      <>
+        <Checkbox {...args} readOnly={true} checked={true} label={'Checked disabled'}/>
+        <Checkbox {...args} readOnly={true} checked={false} undetermined={true} label={'Undetermined disabled'}/>
+        <Checkbox {...args} readOnly={true} checked={false} label={'Unchecked disabled'}/>
+      </>
+    )
+  }}
+</Story>
+
+## Animation
+<Story name="Animation">
+  {(args) => {
+    const [checked, setChecked] = useState(true);
+    return (
+      <Checkbox {...args} checked={checked} onChange={(newCheck) => setChecked(newCheck)}/>
+    )
+  }}
+</Story>
diff --git a/akeneo-design-system/src/components/Checkbox/Checkbox.tsx b/akeneo-design-system/src/components/Checkbox/Checkbox.tsx
new file mode 100644
index 000000000000..0973087e89ae
--- /dev/null
+++ b/akeneo-design-system/src/components/Checkbox/Checkbox.tsx
@@ -0,0 +1,131 @@
+import React from 'react';
+import styled, {css, keyframes} from 'styled-components';
+import {AkeneoThemedProps, getColor} from '../../theme';
+import {CheckIcon, PartialCheckIcon} from '../../icons';
+
+const checkTick = keyframes`
+  to {
+    stroke-dashoffset: 0;
+  }
+`;
+
+const uncheckTick = keyframes`
+to {
+    stroke-dashoffset: 20px;
+  }
+`;
+
+const Container = styled.div`
+  display: flex;
+`;
+
+const TickIcon = styled(CheckIcon)`
+  animation: ${uncheckTick} 0.2s ease-in forwards;
+  opacity: 0;
+  stroke-dasharray: 0px;
+  stroke-dashoffset: 0;
+  transition-delay: 0.2s;
+  transition: opacity 0.1s ease-out;
+`;
+
+const CheckboxContainer = styled.div<{checked: boolean; readOnly: boolean} & AkeneoThemedProps>`
+  background-color: transparent;
+  height: 20px;
+  width: 20px;
+  border: 1px solid ${getColor('grey80')};
+  border-radius: 3px;
+  outline: none;
+  background-color: ${getColor('grey20')};
+
+  ${(props) =>
+    props.checked &&
+    css`
+      background-color: ${getColor('blue100')};
+      ${TickIcon} {
+        animation-delay: 0.2s;
+        animation: ${checkTick} 0.2s ease-out forwards;
+        stroke-dashoffset: 20px;
+        opacity: 1;
+        transition-delay: 0s;
+      }
+    `}
+
+  ${(props) =>
+    props.checked &&
+    props.readOnly &&
+    css`
+      background-color: ${getColor('blue20')};
+      border-color: ${getColor('blue40')};
+    `}
+
+  ${(props) =>
+    !props.checked &&
+    props.readOnly &&
+    css`
+      background-color: ${getColor('grey60')};
+      border-color: ${getColor('grey100')};
+    `}
+`;
+
+const LabelContainer = styled.div<{readOnly: boolean} & AkeneoThemedProps>`
+  color: ${getColor('grey140')};
+  font-weight: 400;
+  font-size: 15px;
+  padding-left: 10px;
+
+  ${(props) =>
+    props.readOnly &&
+    css`
+      color: ${getColor('grey100')};
+    `}
+`;
+
+type CheckboxProps = {
+  /**
+   * State of the Checkbox
+   */
+  checked: boolean;
+
+  /**
+   * Displays the value of the input, but does not allow changes.s
+   */
+  readOnly?: boolean;
+
+  /**
+   * The undetermined state comes into play when the checkbox contains a sublist of selections,
+   * some of which are selected, and others aren't.
+   */
+  undetermined?: boolean;
+
+  /**
+   * Provide a description of the Checkbox, the label appears on the right of the checkboxes.
+   */
+  label?: string;
+
+  /**
+   * The handler called when clicking on Checkbox
+   */
+  onChange?: (value: boolean) => void;
+};
+
+/**
+ * The checkboxes are applied when users can select all, several, or none of the options from a given list.
+ */
+const Checkbox = ({label, checked, onChange, undetermined = false, readOnly = false}: CheckboxProps) => {
+  if (undefined === onChange && false === readOnly) {
+    throw new Error('A Checkbox element expect an onChange attribute if not readOnly');
+  }
+
+  const handleChange = () => onChange && !readOnly && onChange(!checked);
+
+  return (
+    <Container onClick={handleChange}>
+      <CheckboxContainer checked={checked || undetermined} readOnly={readOnly}>
+        {undetermined ? <PartialCheckIcon height={20} width={20} /> : <TickIcon height={20} width={20} />}
+      </CheckboxContainer>
+      {label ? <LabelContainer readOnly={readOnly}>{label}</LabelContainer> : null}
+    </Container>
+  );
+};
+
+export {Checkbox};
diff --git a/akeneo-design-system/src/components/Checkbox/Checkbox.unit.tsx b/akeneo-design-system/src/components/Checkbox/Checkbox.unit.tsx
new file mode 100644
index 000000000000..9bdc9b20f6a4
--- /dev/null
+++ b/akeneo-design-system/src/components/Checkbox/Checkbox.unit.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import {fireEvent, render} from '../../shared/test-util';
+import {Checkbox} from './Checkbox';
+
+it('it calls onChange handler when user clicks on checkbox', () => {
+  const onChange = jest.fn();
+  const {getByText} = render(<Checkbox checked={true} onChange={onChange} label="Checkbox" />);
+
+  const checkbox = getByText('Checkbox');
+  fireEvent.click(checkbox);
+
+  expect(onChange).toBeCalledWith(false);
+});
+
+it('it does not call onChange handler when read-only', () => {
+  const onChange = jest.fn();
+  const {getByText} = render(<Checkbox checked={true} readOnly={true} onChange={onChange} label="Checkbox" />);
+
+  const checkbox = getByText('Checkbox');
+  fireEvent.click(checkbox);
+
+  expect(onChange).not.toBeCalled();
+});
+
+it('it cannot be instantiated without handler when not readonly', () => {
+  jest.spyOn(console, 'error').mockImplementation(() => {
+    // do nothing.
+  });
+
+  expect(() => {
+    render(<Checkbox checked={true} label="Checkbox" />);
+  }).toThrow('A Checkbox element expect an onChange attribute if not readOnly');
+});
diff --git a/akeneo-design-system/src/components/Checkbox/Checkbox.visual.tsx b/akeneo-design-system/src/components/Checkbox/Checkbox.visual.tsx
new file mode 100644
index 000000000000..962ecf280b42
--- /dev/null
+++ b/akeneo-design-system/src/components/Checkbox/Checkbox.visual.tsx
@@ -0,0 +1,37 @@
+import 'expect-puppeteer';
+
+import {toMatchImageSnapshot} from 'jest-image-snapshot';
+
+expect.extend({toMatchImageSnapshot});
+
+describe('Checkbox visual tests', () => {
+  it('Renders standard checkbox component correctly', async () => {
+    await page.goto('http://localhost:6006/iframe.html?id=components-checkbox--standard');
+    const root = await page.$('#root');
+    if (null === root) return;
+
+    const image = await root.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it('Renders checkbox component varying by state', async () => {
+    await page.goto('http://localhost:6006/iframe.html?id=components-checkbox--state');
+    const root = await page.$('#root');
+    if (null === root) return;
+
+    const image = await root.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+
+  it('Renders checkbox component varying on disabled', async () => {
+    await page.goto('http://localhost:6006/iframe.html?id=components-checkbox--disabled');
+    const root = await page.$('#root');
+    if (null === root) return;
+
+    const image = await root.screenshot();
+
+    expect(image).toMatchImageSnapshot();
+  });
+});
diff --git a/akeneo-design-system/src/components/Checkbox/__image_snapshots__/checkbox-visual-tsx-checkbox-visual-tests-renders-checkbox-component-varying-by-state-1-snap.png b/akeneo-design-system/src/components/Checkbox/__image_snapshots__/checkbox-visual-tsx-checkbox-visual-tests-renders-checkbox-component-varying-by-state-1-snap.png
new file mode 100644
index 000000000000..0db830488c1f
Binary files /dev/null and b/akeneo-design-system/src/components/Checkbox/__image_snapshots__/checkbox-visual-tsx-checkbox-visual-tests-renders-checkbox-component-varying-by-state-1-snap.png differ
diff --git a/akeneo-design-system/src/components/Checkbox/__image_snapshots__/checkbox-visual-tsx-checkbox-visual-tests-renders-checkbox-component-varying-on-disabled-1-snap.png b/akeneo-design-system/src/components/Checkbox/__image_snapshots__/checkbox-visual-tsx-checkbox-visual-tests-renders-checkbox-component-varying-on-disabled-1-snap.png
new file mode 100644
index 000000000000..5841452d56d9
Binary files /dev/null and b/akeneo-design-system/src/components/Checkbox/__image_snapshots__/checkbox-visual-tsx-checkbox-visual-tests-renders-checkbox-component-varying-on-disabled-1-snap.png differ
diff --git a/akeneo-design-system/src/components/Checkbox/__image_snapshots__/checkbox-visual-tsx-checkbox-visual-tests-renders-standard-checkbox-component-correctly-1-snap.png b/akeneo-design-system/src/components/Checkbox/__image_snapshots__/checkbox-visual-tsx-checkbox-visual-tests-renders-standard-checkbox-component-correctly-1-snap.png
new file mode 100644
index 000000000000..b35718917ca1
Binary files /dev/null and b/akeneo-design-system/src/components/Checkbox/__image_snapshots__/checkbox-visual-tsx-checkbox-visual-tests-renders-standard-checkbox-component-correctly-1-snap.png differ
diff --git a/akeneo-design-system/src/components/Dummy/Dummy.stories.mdx b/akeneo-design-system/src/components/Dummy/Dummy.stories.mdx
index b603e01bfd81..de24e8d12506 100644
--- a/akeneo-design-system/src/components/Dummy/Dummy.stories.mdx
+++ b/akeneo-design-system/src/components/Dummy/Dummy.stories.mdx
@@ -1,4 +1,4 @@
-import { Meta, Story, Preview, Props, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
+import { Meta, Story, ArgsTable, Canvas } from '@storybook/addon-docs/blocks';
 import { action } from "@storybook/addon-actions";
 import { Dummy, Type } from "./Dummy.tsx";
 
@@ -20,13 +20,13 @@ The dummy component is a little bit dumb, but that's why it exists.
 
 Use this playground to test the dummy component
 
-<Preview>
+<Canvas>
   <Story name="Standard">
     {(args) => <Dummy {...args} >Coucou</Dummy>}
   </Story>
-</Preview>
+</Canvas>
 
-<Props story="Standard" />
+<ArgsTable story="Standard" />
 
 
 ## Variation on size
diff --git a/akeneo-design-system/src/components/Dummy/Dummy.tsx b/akeneo-design-system/src/components/Dummy/Dummy.tsx
index 067fb66f5de9..745c82fb02da 100644
--- a/akeneo-design-system/src/components/Dummy/Dummy.tsx
+++ b/akeneo-design-system/src/components/Dummy/Dummy.tsx
@@ -1,7 +1,7 @@
 import React, {ReactNode} from 'react';
 import styled from 'styled-components';
 
-const DummyContainer = styled.div<{size: number, type: Type}>`
+const DummyContainer = styled.div<{size: number; type: Type}>`
   font-size: ${({size}) => size}px;
   line-height: ${({size}) => size + 5}px;
   color: ${({type}) => (type === 'primary' ? 'blue' : 'green')};
diff --git a/akeneo-design-system/src/components/Dummy/__image_snapshots__/dummy-visual-tsx-dummy-visual-tests-renders-standard-dummy-component-varying-by-size-correctly-1-snap.png b/akeneo-design-system/src/components/Dummy/__image_snapshots__/dummy-visual-tsx-dummy-visual-tests-renders-standard-dummy-component-varying-by-size-correctly-1-snap.png
index e529a0e4eb9c..1d89aa0d41e1 100644
Binary files a/akeneo-design-system/src/components/Dummy/__image_snapshots__/dummy-visual-tsx-dummy-visual-tests-renders-standard-dummy-component-varying-by-size-correctly-1-snap.png and b/akeneo-design-system/src/components/Dummy/__image_snapshots__/dummy-visual-tsx-dummy-visual-tests-renders-standard-dummy-component-varying-by-size-correctly-1-snap.png differ
diff --git a/akeneo-design-system/src/components/Dummy/__image_snapshots__/dummy-visual-tsx-dummy-visual-tests-renders-standard-dummy-component-varying-by-type-correctly-1-snap.png b/akeneo-design-system/src/components/Dummy/__image_snapshots__/dummy-visual-tsx-dummy-visual-tests-renders-standard-dummy-component-varying-by-type-correctly-1-snap.png
index e56fc7d9874d..c74888b91e3f 100644
Binary files a/akeneo-design-system/src/components/Dummy/__image_snapshots__/dummy-visual-tsx-dummy-visual-tests-renders-standard-dummy-component-varying-by-type-correctly-1-snap.png and b/akeneo-design-system/src/components/Dummy/__image_snapshots__/dummy-visual-tsx-dummy-visual-tests-renders-standard-dummy-component-varying-by-type-correctly-1-snap.png differ
diff --git a/akeneo-design-system/src/components/index.ts b/akeneo-design-system/src/components/index.ts
index 35ca50babd94..421f991e0d47 100644
--- a/akeneo-design-system/src/components/index.ts
+++ b/akeneo-design-system/src/components/index.ts
@@ -1 +1,2 @@
+export * from './Checkbox/Checkbox';
 export * from './Dummy/Dummy';
diff --git a/akeneo-design-system/src/icons/CheckIcon.tsx b/akeneo-design-system/src/icons/CheckIcon.tsx
new file mode 100644
index 000000000000..03e7b9d95abd
--- /dev/null
+++ b/akeneo-design-system/src/icons/CheckIcon.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+
+const CheckIcon = ({width = 24, height = 24, className = ''}: {width: number; height: number; className?: string}) => (
+  <svg width={width} height={height} viewBox="0 0 24 24">
+    <path
+      className={className}
+      stroke="#FFFFFF"
+      d="M2.5 12l7.5 6.5L21.5 6"
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1}
+      strokeMiterlimit={10}
+    />
+  </svg>
+);
+
+export {CheckIcon};
diff --git a/akeneo-design-system/src/icons/PartialCheckIcon.tsx b/akeneo-design-system/src/icons/PartialCheckIcon.tsx
new file mode 100644
index 000000000000..9ad7e8727495
--- /dev/null
+++ b/akeneo-design-system/src/icons/PartialCheckIcon.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+
+const PartialCheckIcon = ({
+  width = 24,
+  height = 24,
+  className = '',
+}: {
+  width: number;
+  height: number;
+  className?: string;
+}) => (
+  <svg width={width} height={height} viewBox="0 0 24 24">
+    <path
+      className={className}
+      d="M2 12.5h20"
+      stroke="#FFFFFF"
+      fill="none"
+      fillRule="evenodd"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+    />
+  </svg>
+);
+
+export {PartialCheckIcon};
diff --git a/akeneo-design-system/src/icons/index.ts b/akeneo-design-system/src/icons/index.ts
new file mode 100644
index 000000000000..8c6558d8ce00
--- /dev/null
+++ b/akeneo-design-system/src/icons/index.ts
@@ -0,0 +1,2 @@
+export * from './CheckIcon';
+export * from './PartialCheckIcon';
diff --git a/akeneo-design-system/src/index.ts b/akeneo-design-system/src/index.ts
index 07635cbbc8e7..95d58a76aed3 100644
--- a/akeneo-design-system/src/index.ts
+++ b/akeneo-design-system/src/index.ts
@@ -1 +1,2 @@
 export * from './components';
+export * from './icons';
diff --git a/akeneo-design-system/src/shared/global.ts b/akeneo-design-system/src/shared/global.ts
index 60fb51ac2492..738485941f9c 100644
--- a/akeneo-design-system/src/shared/global.ts
+++ b/akeneo-design-system/src/shared/global.ts
@@ -11,6 +11,10 @@ const StoryStyle = styled.div`
   color: #67768a;
   font-size: 13px;
   line-height: 20px;
+
+  & > * {
+    margin: 10px 0px;
+  }
 `;
 
 export {StoryStyle};
diff --git a/akeneo-design-system/src/shared/test-util.tsx b/akeneo-design-system/src/shared/test-util.tsx
new file mode 100644
index 000000000000..b4d951d91ace
--- /dev/null
+++ b/akeneo-design-system/src/shared/test-util.tsx
@@ -0,0 +1,14 @@
+import React, {ComponentType, ReactElement, ReactNode} from 'react';
+import {render, RenderOptions} from '@testing-library/react';
+import {ThemeProvider} from 'styled-components';
+import {pimTheme} from '../theme/pim';
+
+const AllTheProviders = ({children}: {children: ReactNode}) => {
+  return <ThemeProvider theme={pimTheme}>{children}</ThemeProvider>;
+};
+
+const customRender = (ui: ReactElement, options?: Omit<RenderOptions, 'queries'>) =>
+  render(ui, {wrapper: AllTheProviders as ComponentType, ...options});
+
+export * from '@testing-library/react';
+export {customRender as render};
diff --git a/akeneo-design-system/src/theme/index.ts b/akeneo-design-system/src/theme/index.ts
new file mode 100644
index 000000000000..7b1f54ecf901
--- /dev/null
+++ b/akeneo-design-system/src/theme/index.ts
@@ -0,0 +1 @@
+export * from './theme';
diff --git a/akeneo-design-system/src/theme/pim/index.ts b/akeneo-design-system/src/theme/pim/index.ts
new file mode 100644
index 000000000000..47fdfd404232
--- /dev/null
+++ b/akeneo-design-system/src/theme/pim/index.ts
@@ -0,0 +1,54 @@
+import {Theme, Color} from '../theme';
+
+const color: Color = {
+  blue10: '#f5f9fc',
+  blue100: '#5992c7',
+  blue120: '#47749f',
+  blue140: '#355777',
+  blue20: '#dee9f4',
+  blue40: '#bdd3e9',
+  blue60: '#9bbddd',
+  blue80: '#7aa7d2',
+  green100: '#67b373',
+  green120: '#528f5c',
+  green140: '#3d6b45',
+  green20: '#e1f0e3',
+  green40: '#c2e1c7',
+  green60: '#a3d1ab',
+  green80: '#85c28f',
+  grey140: '#11324d',
+  grey120: '#67768a',
+  grey100: '#a1a9b7',
+  grey80: '#c7cbd4',
+  grey60: '#e8ebee',
+  grey40: '#f0f1f3',
+  grey20: '#f6f7fb',
+  purple100: '#9452ba',
+  purple120: '#764194',
+  purple140: '#58316f',
+  purple20: '#eadcf1',
+  purple40: '#d4bae3',
+  purple60: '#be97d5',
+  purple80: '#a974c7',
+  red100: '#d4604f',
+  red120: '#a94c3f',
+  red140: '#7f392f',
+  red20: '#f6dfdc',
+  red40: '#eebfb9',
+  red60: '#e59f95',
+  red80: '#dc7f72',
+  white: '#ffffff',
+  yellow100: '#f9b53f',
+  yellow120: '#c79032',
+  yellow140: '#956c25',
+  yellow20: '#fef0d9',
+  yellow40: '#fde1b2',
+  yellow60: '#fbd28b',
+  yellow80: '#fac365',
+};
+
+const pimTheme: Theme = {
+  color,
+};
+
+export {pimTheme};
diff --git a/akeneo-design-system/src/theme/theme.ts b/akeneo-design-system/src/theme/theme.ts
new file mode 100644
index 000000000000..f619571703e3
--- /dev/null
+++ b/akeneo-design-system/src/theme/theme.ts
@@ -0,0 +1,60 @@
+import {ThemedStyledProps} from 'styled-components';
+
+type Color = {
+  blue10: string;
+  blue100: string;
+  blue120: string;
+  blue140: string;
+  blue20: string;
+  blue40: string;
+  blue60: string;
+  blue80: string;
+  green100: string;
+  green120: string;
+  green140: string;
+  green20: string;
+  green40: string;
+  green60: string;
+  green80: string;
+  grey100: string;
+  grey120: string;
+  grey140: string;
+  grey20: string;
+  grey40: string;
+  grey60: string;
+  grey80: string;
+  purple100: string;
+  purple120: string;
+  purple140: string;
+  purple20: string;
+  purple40: string;
+  purple60: string;
+  purple80: string;
+  red100: string;
+  red120: string;
+  red140: string;
+  red20: string;
+  red40: string;
+  red60: string;
+  red80: string;
+  white: string;
+  yellow100: string;
+  yellow120: string;
+  yellow140: string;
+  yellow20: string;
+  yellow40: string;
+  yellow60: string;
+  yellow80: string;
+};
+
+type Theme = {
+  color: Color;
+};
+
+const getColor = (color: string): ((props: AkeneoThemedProps) => string) => ({theme}: AkeneoThemedProps): string => {
+  return theme.color[color] as string;
+};
+
+export type AkeneoThemedProps<P = Record<string, unknown>> = ThemedStyledProps<P, Theme>;
+export type {Theme, Color};
+export {getColor};
diff --git a/akeneo-design-system/yarn.lock b/akeneo-design-system/yarn.lock
index 7854d1e1cb4c..deb343d4822f 100644
--- a/akeneo-design-system/yarn.lock
+++ b/akeneo-design-system/yarn.lock
@@ -2063,7 +2063,7 @@
   dependencies:
     core-js "^3.0.1"
 
-"@storybook/react@^6.0.4":
+"@storybook/react@^6.0.21":
   version "6.0.21"
   resolved "https://registry.yarnpkg.com/@storybook/react/-/react-6.0.21.tgz#68f8a318e9940305b06eb894896624a35a9868b0"
   integrity sha512-L3PcoBJq5aK1aTaJNfwsSJ8Kxgcyk0WknN4TDqhP7a+oXmuMY1YEi96hEvQVIm0TBCkQxs61K70/T7vlilEtHg==
@@ -3283,6 +3283,11 @@ arrify@^1.0.1:
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
   integrity sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=
 
+asap@~2.0.3:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/asap/-/asap-2.0.6.tgz#e50347611d7e690943208bbdafebcbc2fb866d46"
+  integrity sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=
+
 asn1.js@^5.2.0:
   version "5.4.1"
   resolved "https://registry.yarnpkg.com/asn1.js/-/asn1.js-5.4.1.tgz#11a980b84ebb91781ce35b0fdc2ee294e3783f07"
@@ -3773,6 +3778,11 @@ balanced-match@^1.0.0:
   resolved "https://registry.yarnpkg.com/balanced-match/-/balanced-match-1.0.0.tgz#89b4d199ab2bee49de164ea02b89ce462d71b767"
   integrity sha1-ibTRmasr7kneFk6gK4nORi1xt2c=
 
+base16@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/base16/-/base16-1.0.0.tgz#e297f60d7ec1014a7a971a39ebc8a98c0b681e70"
+  integrity sha1-4pf2DX7BAUp6lxo568ipjAtoHnA=
+
 base64-js@^1.0.2:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/base64-js/-/base64-js-1.3.1.tgz#58ece8cb75dd07e71ed08c736abc5fac4dbf8df1"
@@ -4639,6 +4649,11 @@ core-js-pure@^3.0.0, core-js-pure@^3.0.1:
   resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.6.5.tgz#c79e75f5e38dbc85a662d91eea52b8256d53b813"
   integrity sha512-lacdXOimsiD0QyNf9BC/mxivNJ/ybBGJXQFKzRekp1WTHoVUWsUHEn+2T8GJAzzIhyOuXA+gOxCVN3l+5PLPUA==
 
+core-js@^1.0.0:
+  version "1.2.7"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-1.2.7.tgz#652294c14651db28fa93bd2d5ff2983a4f08c636"
+  integrity sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY=
+
 core-js@^2.6.5:
   version "2.6.11"
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-2.6.11.tgz#38831469f9922bded8ee21c9dc46985e0399308c"
@@ -5356,6 +5371,13 @@ encodeurl@~1.0.2:
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
   integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
 
+encoding@^0.1.11:
+  version "0.1.13"
+  resolved "https://registry.yarnpkg.com/encoding/-/encoding-0.1.13.tgz#56574afdd791f54a8e9b2785c0582a2d26210fa9"
+  integrity sha512-ETBauow1T35Y/WZMkio9jiM0Z5xjHHmJ4XmjZOq1l/dXz3lr2sRn87nJy20RupqSh1F2m3HHPSp8ShIPQJrJ3A==
+  dependencies:
+    iconv-lite "^0.6.2"
+
 end-of-stream@^1.0.0, end-of-stream@^1.1.0, end-of-stream@^1.4.1:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/end-of-stream/-/end-of-stream-1.4.4.tgz#5ae64a5f45057baf3626ec14da0ca5e4b2431eb0"
@@ -5958,6 +5980,26 @@ fb-watchman@^2.0.0:
   dependencies:
     bser "2.1.1"
 
+fbemitter@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/fbemitter/-/fbemitter-2.1.1.tgz#523e14fdaf5248805bb02f62efc33be703f51865"
+  integrity sha1-Uj4U/a9SSIBbsC9i78M75wP1GGU=
+  dependencies:
+    fbjs "^0.8.4"
+
+fbjs@^0.8.0, fbjs@^0.8.4:
+  version "0.8.17"
+  resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.17.tgz#c4d598ead6949112653d6588b01a5cdcd9f90fdd"
+  integrity sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=
+  dependencies:
+    core-js "^1.0.0"
+    isomorphic-fetch "^2.1.1"
+    loose-envify "^1.0.0"
+    object-assign "^4.1.0"
+    promise "^7.1.1"
+    setimmediate "^1.0.5"
+    ua-parser-js "^0.7.18"
+
 fd-slicer@~1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/fd-slicer/-/fd-slicer-1.1.0.tgz#25c7c89cb1f9077f8891bbe61d8f390eae256f1e"
@@ -6132,6 +6174,14 @@ flush-write-stream@^1.0.0:
     inherits "^2.0.3"
     readable-stream "^2.3.6"
 
+flux@^3.1.3:
+  version "3.1.3"
+  resolved "https://registry.yarnpkg.com/flux/-/flux-3.1.3.tgz#d23bed515a79a22d933ab53ab4ada19d05b2f08a"
+  integrity sha1-0jvtUVp5oi2TOrU6tK2hnQWy8Io=
+  dependencies:
+    fbemitter "^2.0.0"
+    fbjs "^0.8.0"
+
 for-in@^0.1.3:
   version "0.1.8"
   resolved "https://registry.yarnpkg.com/for-in/-/for-in-0.1.8.tgz#d8773908e31256109952b1fdb9b3fa867d2775e1"
@@ -6889,6 +6939,13 @@ iconv-lite@0.4.24, iconv-lite@^0.4.24:
   dependencies:
     safer-buffer ">= 2.1.2 < 3"
 
+iconv-lite@^0.6.2:
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.6.2.tgz#ce13d1875b0c3a674bd6a04b7f76b01b1b6ded01"
+  integrity sha512-2y91h5OpQlolefMPmUlivelittSWy0rP+oYVpn6A7GwVHNE8AWzoYOBNmlwks3LobaJxgHCYZAnyNo2GgpNRNQ==
+  dependencies:
+    safer-buffer ">= 2.1.2 < 3.0.0"
+
 icss-utils@^4.0.0, icss-utils@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-4.1.1.tgz#21170b53789ee27447c2f47dd683081403f9a467"
@@ -6926,6 +6983,11 @@ immer@1.10.0:
   resolved "https://registry.yarnpkg.com/immer/-/immer-1.10.0.tgz#bad67605ba9c810275d91e1c2a47d4582e98286d"
   integrity sha512-O3sR1/opvCDGLEVcvrGTMtLac8GJ5IwZC4puPrLuRj3l7ICKvkmA0vGuU9OW8mV9WIBRnaxp5GJh9IEAaNOoYg==
 
+immutable@^4.0.0-rc.12:
+  version "4.0.0-rc.12"
+  resolved "https://registry.yarnpkg.com/immutable/-/immutable-4.0.0-rc.12.tgz#ca59a7e4c19ae8d9bf74a97bdf0f6e2f2a5d0217"
+  integrity sha512-0M2XxkZLx/mi3t8NVwIm1g8nHoEmM9p9UBl/G9k4+hm0kBgOVdMV/B3CY5dQ8qG8qc80NN4gDV4HQv6FTJ5q7A==
+
 import-cwd@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/import-cwd/-/import-cwd-2.1.0.tgz#aa6cf36e722761285cb371ec6519f53e2435b0a9"
@@ -7389,7 +7451,7 @@ is-set@^2.0.1:
   resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.1.tgz#d1604afdab1724986d30091575f54945da7e5f43"
   integrity sha512-eJEzOtVyenDs1TMzSQ3kU3K+E0GUS9sno+F0OBT97xsgcJsF9nXMBtkT9/kut5JEpM7oL7X/0qxR17K3mcwIAA==
 
-is-stream@^1.1.0:
+is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
@@ -7490,6 +7552,14 @@ isobject@^4.0.0:
   resolved "https://registry.yarnpkg.com/isobject/-/isobject-4.0.0.tgz#3f1c9155e73b192022a80819bacd0343711697b0"
   integrity sha512-S/2fF5wH8SJA/kmwr6HYhK/RI/OkhD84k8ntalo0iJjZikgq1XFvR5M8NPT1x5F7fBwCG3qHfnzeP/Vh/ZxCUA==
 
+isomorphic-fetch@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz#611ae1acf14f5e81f729507472819fe9733558a9"
+  integrity sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=
+  dependencies:
+    node-fetch "^1.0.1"
+    whatwg-fetch ">=0.10.0"
+
 isstream@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/isstream/-/isstream-0.1.2.tgz#47e63f7af55afa6f92e1500e690eb8b8529c099a"
@@ -8386,6 +8456,16 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash.curry@^4.0.1:
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/lodash.curry/-/lodash.curry-4.1.1.tgz#248e36072ede906501d75966200a86dab8b23170"
+  integrity sha1-JI42By7ekGUB11lmIAqG2riyMXA=
+
+lodash.flow@^3.3.0:
+  version "3.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.flow/-/lodash.flow-3.5.0.tgz#87bf40292b8cf83e4e8ce1a3ae4209e20071675a"
+  integrity sha1-h79AKSuM+D5OjOGjrkIJ4gBxZ1o=
+
 lodash.memoize@4.x:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -8942,6 +9022,14 @@ node-dir@^0.1.10:
   dependencies:
     minimatch "^3.0.2"
 
+node-fetch@^1.0.1:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-1.7.3.tgz#980f6f72d85211a5347c6b2bc18c5b84c3eb47ef"
+  integrity sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==
+  dependencies:
+    encoding "^0.1.11"
+    is-stream "^1.0.1"
+
 node-fetch@^2.6.0:
   version "2.6.0"
   resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.0.tgz#e633456386d4aa55863f676a7ab0daa8fdecb0fd"
@@ -9777,6 +9865,13 @@ promise.prototype.finally@^3.1.0:
     es-abstract "^1.17.0-next.0"
     function-bind "^1.1.1"
 
+promise@^7.1.1:
+  version "7.3.1"
+  resolved "https://registry.yarnpkg.com/promise/-/promise-7.3.1.tgz#064b72602b18f90f29192b8b1bc418ffd1ebd3bf"
+  integrity sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==
+  dependencies:
+    asap "~2.0.3"
+
 prompts@^2.0.1, prompts@^2.3.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/prompts/-/prompts-2.3.2.tgz#480572d89ecf39566d2bd3fe2c9fccb7c4c0b068"
@@ -9894,6 +9989,11 @@ puppeteer@^5.2.1:
     unbzip2-stream "^1.3.3"
     ws "^7.2.3"
 
+pure-color@^1.2.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/pure-color/-/pure-color-1.3.0.tgz#1fe064fb0ac851f0de61320a8bf796836422f33e"
+  integrity sha1-H+Bk+wrIUfDeYTIKi/eWg2Qi8z4=
+
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
@@ -9967,6 +10067,16 @@ raw-loader@^4.0.1:
     loader-utils "^2.0.0"
     schema-utils "^2.6.5"
 
+react-base16-styling@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/react-base16-styling/-/react-base16-styling-0.6.0.tgz#ef2156d66cf4139695c8a167886cb69ea660792c"
+  integrity sha1-7yFW1mz0E5aVyKFniGy2nqZgeSw=
+  dependencies:
+    base16 "^1.0.0"
+    lodash.curry "^4.0.1"
+    lodash.flow "^3.3.0"
+    pure-color "^1.2.0"
+
 react-color@^2.17.0:
   version "2.18.1"
   resolved "https://registry.yarnpkg.com/react-color/-/react-color-2.18.1.tgz#2cda8cc8e06a9e2c52ad391a30ddad31972472f4"
@@ -10117,6 +10227,16 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
+react-json-view@^1.19.1:
+  version "1.19.1"
+  resolved "https://registry.yarnpkg.com/react-json-view/-/react-json-view-1.19.1.tgz#95d8e59e024f08a25e5dc8f076ae304eed97cf5c"
+  integrity sha512-u5e0XDLIs9Rj43vWkKvwL8G3JzvXSl6etuS5G42a8klMohZuYFQzSN6ri+/GiBptDqlrXPTdExJVU7x9rrlXhg==
+  dependencies:
+    flux "^3.1.3"
+    react-base16-styling "^0.6.0"
+    react-lifecycles-compat "^3.0.4"
+    react-textarea-autosize "^6.1.0"
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
@@ -10164,6 +10284,13 @@ react-syntax-highlighter@^12.2.1:
     prismjs "^1.8.4"
     refractor "^2.4.1"
 
+react-textarea-autosize@^6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-6.1.0.tgz#df91387f8a8f22020b77e3833c09829d706a09a5"
+  integrity sha512-F6bI1dgib6fSvG8so1HuArPUv+iVEfPliuLWusLF+gAKz0FbB4jLrWUrTAeq1afnPT2c9toEZYUdz/y1uKMy4A==
+  dependencies:
+    prop-types "^15.6.0"
+
 react-textarea-autosize@^8.1.1:
   version "8.2.0"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.2.0.tgz#fae38653f5ec172a855fd5fffb39e466d56aebdb"
@@ -10730,7 +10857,7 @@ safe-regex@^1.1.0:
   dependencies:
     ret "~0.1.10"
 
-"safer-buffer@>= 2.1.2 < 3", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
+"safer-buffer@>= 2.1.2 < 3", "safer-buffer@>= 2.1.2 < 3.0.0", safer-buffer@^2.0.2, safer-buffer@^2.1.0, safer-buffer@~2.1.0:
   version "2.1.2"
   resolved "https://registry.yarnpkg.com/safer-buffer/-/safer-buffer-2.1.2.tgz#44fa161b0187b9549dd84bb91802f9bd8385cd6a"
   integrity sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==
@@ -10875,7 +11002,7 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setimmediate@^1.0.4:
+setimmediate@^1.0.4, setimmediate@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/setimmediate/-/setimmediate-1.0.5.tgz#290cbb232e306942d7d7ea9b83732ab7856f8285"
   integrity sha1-KQy7Iy4waULX1+qbg3Mqt4VvgoU=
@@ -11439,6 +11566,11 @@ styled-components@^4.3.2:
     stylis-rule-sheet "^0.0.10"
     supports-color "^5.5.0"
 
+styled-react-modal@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/styled-react-modal/-/styled-react-modal-2.0.1.tgz#513d47bdbdba67f474a8a4dfeb13d072a172c7fc"
+  integrity sha512-uoyPlwdM8FLmdOE8dvA3iv2IOnlqMsygPxLAZy8WaK0pEcon67+SWJY/osAWZuBvRKtSo/VXn1fRCYVgbD0KUQ==
+
 stylis-rule-sheet@^0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
@@ -11658,6 +11790,15 @@ text-table@0.2.0, text-table@^0.2.0:
   resolved "https://registry.yarnpkg.com/text-table/-/text-table-0.2.0.tgz#7f5ee823ae805207c00af2df4a84ec3fcfa570b4"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+themeprovider-storybook@^1.6.2:
+  version "1.6.2"
+  resolved "https://registry.yarnpkg.com/themeprovider-storybook/-/themeprovider-storybook-1.6.2.tgz#c33f9845b12036029afb76060181aff3e727f503"
+  integrity sha512-ESzcjuZhKBNdckxGjLzGT4iq3cdRxeTOvxjfjZNAVprdlhfiiTLCExoC5gAHO2ssdlj7c3Ejm4KjwtjPvc5SBg==
+  dependencies:
+    immutable "^4.0.0-rc.12"
+    react-json-view "^1.19.1"
+    styled-react-modal "^2.0.1"
+
 throat@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/throat/-/throat-5.0.0.tgz#c5199235803aad18754a667d659b5e72ce16764b"
@@ -11951,6 +12092,11 @@ typescript@^4.0.2:
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.0.2.tgz#7ea7c88777c723c681e33bf7988be5d008d05ac2"
   integrity sha512-e4ERvRV2wb+rRZ/IQeb3jm2VxBsirQLpQhdxplZ2MEzGvDkkMmPglecnNDfSUBivMjP93vRbngYYDQqQ/78bcQ==
 
+ua-parser-js@^0.7.18:
+  version "0.7.21"
+  resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.21.tgz#853cf9ce93f642f67174273cc34565ae6f308777"
+  integrity sha512-+O8/qh/Qj8CgC6eYBVBykMrNtp5Gebn4dlGD/kKXVkJNDwyrAwSIqwz8CDf+tsAIWVycKcku6gIXJ0qwx/ZXaQ==
+
 unbzip2-stream@^1.3.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
@@ -12468,6 +12614,11 @@ whatwg-encoding@^1.0.5:
   dependencies:
     iconv-lite "0.4.24"
 
+whatwg-fetch@>=0.10.0:
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/whatwg-fetch/-/whatwg-fetch-3.4.1.tgz#e5f871572d6879663fa5674c8f833f15a8425ab3"
+  integrity sha512-sofZVzE1wKwO+EYPbWfiwzaKovWiZXf4coEzjGP9b2GBVgQRLQUZ2QcuPpQExGDAW5GItpEm6Tl4OU5mywnAoQ==
+
 whatwg-mimetype@^2.3.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/whatwg-mimetype/-/whatwg-mimetype-2.3.0.tgz#3d4b1e0312d2079879f826aff18dbeeca5960fbf"