From c8d614a3baefe3d669ad19044eac94da9278da20 Mon Sep 17 00:00:00 2001
From: Artem Tarasov <artem.tarasov@onlyoffice.com>
Date: Sun, 7 Mar 2021 14:57:26 +0300
Subject: [PATCH] Web: Components: refactoring stories, add public/images to
 components for storybook

---
 .../asc-web-components/.storybook/main.js     |  10 +-
 .../asc-web-components/.storybook/preview.js  |   5 +
 .../avatar-editor/avatar-editor.stories.js    |  69 +---
 .../avatar-editor/avatar-editor.stories.mdx   |   0
 .../asc-web-components/avatar-editor/index.js |  25 +-
 .../backdrop/backdrop.stories.js              |  21 +-
 packages/asc-web-components/backdrop/index.js |   8 +
 .../asc-web-components/badge/badge.stories.js |  31 --
 packages/asc-web-components/badge/index.js    |  12 +
 .../asc-web-components/box/box.stories.js     |   1 -
 .../button/button.stories.js                  |  44 +--
 packages/asc-web-components/button/index.js   |  20 +-
 .../calendar/calendar.stories.js              |  48 +--
 packages/asc-web-components/calendar/index.js |  13 +-
 .../checkbox/checkbox.stories.js              |  43 +--
 packages/asc-web-components/checkbox/index.js |  20 +-
 .../checkbox/svg/checkbox.checked.react.svg   |   5 +
 .../svg/checkbox.indeterminate.react.svg      |   5 +
 .../checkbox/svg/checkbox.react.svg           |   4 +
 .../combobox/combobox.stories.js              | 240 +++----------
 .../combobox/combobox.stories.mdx             | 153 ++++++++
 packages/asc-web-components/combobox/index.js |  23 ++
 .../context-menu-button.stories.js            | 117 ++-----
 .../context-menu-button/index.js              |  29 +-
 .../context-menu/context-menu.stories.js      |  16 +-
 .../asc-web-components/context-menu/index.js  |   6 +
 .../date-picker/date-picker.stories.js        | 144 +++-----
 .../asc-web-components/date-picker/index.js   |  20 +-
 .../drag-and-drop/drag-and-drop.stories.js    |  30 +-
 .../asc-web-components/drag-and-drop/index.js |   6 +
 .../drop-down-item/drop-down-item.stories.js  | 150 +++-----
 .../drop-down-item/index.js                   |  13 +
 .../drop-down/drop-down.stories.js            | 213 +++--------
 .../asc-web-components/drop-down/index.js     |  32 +-
 .../empty-screen-container.stories.js         |  36 +-
 .../empty-screen-container/index.js           |   9 +
 .../field-container.stories.js                |  99 +-----
 .../field-container/index.js                  |  15 +
 .../file-input/file-input.stories.js          |  36 +-
 .../asc-web-components/file-input/index.js    |  16 +-
 packages/asc-web-components/grid/grid.js      |  26 ++
 .../asc-web-components/grid/grid.stories.js   | 174 +--------
 .../group-button/all.group-buttons.stories.js |  69 ----
 .../group-button/group-button.stories.js      | 122 ++++++-
 .../asc-web-components/group-button/index.js  |  18 +
 .../group-buttons-menu.stories.js             | 330 ++++++++++--------
 .../group-buttons-menu/index.js               |   9 +
 .../heading/heading.stories.js                |  61 ++--
 packages/asc-web-components/heading/index.js  |  10 +-
 .../help-button/help-button.stories.js        | 156 +++++----
 .../asc-web-components/help-button/index.js   |   6 +-
 packages/asc-web-components/package.json      |  17 +-
 .../static/images/a-z.sorting.react.svg       |   3 +
 .../images/actions.header.touch.react.svg     |   3 +
 .../public/static/images/arrow.path.react.svg |   3 +
 .../static/images/button.alert.react.svg      |   4 +
 .../static/images/button.duplicate.react.svg  |   4 +
 .../static/images/button.file.react.svg       |   3 +
 .../static/images/button.move.react.svg       |   3 +
 .../static/images/button.trash.react.svg      |   3 +
 .../static/images/button.upload.react.svg     |   3 +
 .../static/images/calendar.checked.react.svg  |   3 +
 .../public/static/images/calendar.react.svg   |   3 +
 .../static/images/catalog.button.react.svg    |   3 +
 .../images/catalog.departments.react.svg      |   3 +
 .../static/images/catalog.employee.react.svg  |   3 +
 .../static/images/catalog.folder.react.svg    |   3 +
 .../static/images/catalog.guest.react.svg     |   3 +
 .../static/images/catalog.pin.react.svg       |   3 +
 .../static/images/catalog.spam.react.svg      |   3 +
 .../static/images/catalog.trash.react.svg     |   3 +
 .../static/images/catalog.unpin.react.svg     |   3 +
 .../public/static/images/chat.react.svg       |   3 +
 .../static/images/checkbox.checked.react.svg  |   5 +
 .../images/checkbox.indeterminate.react.svg   |   5 +
 .../public/static/images/checkbox.react.svg   |   4 +
 .../public/static/images/copy.react.svg       |   3 +
 .../public/static/images/crm.react.svg        |   3 +
 .../public/static/images/cross.react.svg      |   3 +
 .../static/images/cross.sidebar.react.svg     |   3 +
 .../static/images/empty_screen_filter.png     | Bin 0 -> 7586 bytes
 .../static/images/expander-down.react.svg     |  12 +
 .../static/images/expander-right.react.svg    |  10 +
 .../static/images/external.link.react.svg     |   3 +
 .../public/static/images/eye.off.react.svg    |   3 +
 .../public/static/images/eye.react.svg        |   3 +
 .../images/filter.view.selector.row.react.svg |   3 +
 .../filter.view.selector.tile.react.svg       |   3 +
 .../public/static/images/info.react.svg       |   3 +
 .../static/images/invitation.link.react.svg   |   3 +
 .../static/images/item.active.react.svg       |   3 +
 .../public/static/images/mail.react.svg       |   3 +
 .../static/images/media.delete.react.svg      |   3 +
 .../static/images/media.download.react.svg    |   3 +
 .../static/images/media.fullscreen.react.svg  |   3 +
 .../public/static/images/media.mute.react.svg |   5 +
 .../static/images/media.muteoff.react.svg     |   6 +
 .../static/images/media.pause.react.svg       |   3 +
 .../public/static/images/media.play.react.svg |   3 +
 .../static/images/media.reset.react.svg       |   7 +
 .../static/images/media.rotateleft.react.svg  |   3 +
 .../static/images/media.rotateright.react.svg |   3 +
 .../static/images/media.zoomin.react.svg      |   6 +
 .../static/images/media.zoomout.react.svg     |   5 +
 .../public/static/images/menu.react.svg       |   3 +
 .../static/images/nav.logo.opened.react.svg   |  29 ++
 .../public/static/images/nav.logo.react.svg   |  19 +
 .../public/static/images/people.react.svg     |   7 +
 .../public/static/images/projects.react.svg   |   3 +
 .../public/static/images/question.react.svg   |   3 +
 .../images/rectangle.filter.click.react.svg   |   5 +
 .../static/images/rectangle.filter.react.svg  |   5 +
 .../public/static/images/search.react.svg     |   3 +
 .../public/static/images/send.clock.react.svg |   3 +
 .../public/static/images/settings.react.svg   |   3 +
 .../static/images/share.google.react.svg      |   6 +
 .../static/images/share.linkedin.react.svg    |   4 +
 .../static/images/vertical-dots.react.svg     |   3 +
 .../static/images/z-a.sorting.react.svg       |   3 +
 .../public/static/images/zoom-minus.react.svg |   4 +
 .../public/static/images/zoom-plus.react.svg  |   5 +
 public/images/catalog.guest.react.svg         |   3 +
 yarn.lock                                     |   2 +-
 123 files changed, 1490 insertions(+), 1598 deletions(-)
 create mode 100644 packages/asc-web-components/avatar-editor/avatar-editor.stories.mdx
 create mode 100644 packages/asc-web-components/checkbox/svg/checkbox.checked.react.svg
 create mode 100644 packages/asc-web-components/checkbox/svg/checkbox.indeterminate.react.svg
 create mode 100644 packages/asc-web-components/checkbox/svg/checkbox.react.svg
 create mode 100644 packages/asc-web-components/combobox/combobox.stories.mdx
 delete mode 100644 packages/asc-web-components/group-button/all.group-buttons.stories.js
 create mode 100644 packages/asc-web-components/public/static/images/a-z.sorting.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/actions.header.touch.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/arrow.path.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/button.alert.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/button.duplicate.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/button.file.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/button.move.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/button.trash.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/button.upload.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/calendar.checked.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/calendar.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/catalog.button.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/catalog.departments.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/catalog.employee.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/catalog.folder.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/catalog.guest.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/catalog.pin.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/catalog.spam.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/catalog.trash.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/catalog.unpin.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/chat.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/checkbox.checked.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/checkbox.indeterminate.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/checkbox.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/copy.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/crm.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/cross.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/cross.sidebar.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/empty_screen_filter.png
 create mode 100644 packages/asc-web-components/public/static/images/expander-down.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/expander-right.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/external.link.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/eye.off.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/eye.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/filter.view.selector.row.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/filter.view.selector.tile.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/info.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/invitation.link.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/item.active.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/mail.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.delete.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.download.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.fullscreen.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.mute.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.muteoff.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.pause.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.play.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.reset.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.rotateleft.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.rotateright.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.zoomin.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/media.zoomout.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/menu.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/nav.logo.opened.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/nav.logo.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/people.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/projects.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/question.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/rectangle.filter.click.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/rectangle.filter.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/search.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/send.clock.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/settings.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/share.google.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/share.linkedin.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/vertical-dots.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/z-a.sorting.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/zoom-minus.react.svg
 create mode 100644 packages/asc-web-components/public/static/images/zoom-plus.react.svg
 create mode 100644 public/images/catalog.guest.react.svg

diff --git a/packages/asc-web-components/.storybook/main.js b/packages/asc-web-components/.storybook/main.js
index 0c3f41001a..f4402c53f4 100644
--- a/packages/asc-web-components/.storybook/main.js
+++ b/packages/asc-web-components/.storybook/main.js
@@ -2,7 +2,7 @@ module.exports = {
   stories: [
     "../backdrop/*.stories.@(js|jsx|ts|tsx)",
     "../button/*.stories.@(js|jsx|ts|tsx)",
-    "../avatar/*.stories.@(js|jsx|ts|tsx)",
+    "../avatar/*.stories.@(js)",
     "../badge/*.stories.@(js|jsx|ts|tsx)",
     "../box/*.stories.@(js|jsx|ts|tsx)",
     "../avatar-editor/*.stories.@(js|jsx|ts|tsx)",
@@ -15,11 +15,16 @@ module.exports = {
     "../drag-and-drop/*.stories.@(js|mdx)",
     "../drop-down/*.stories.@(js|mdx)",
     "../drop-down-item/*.stories.@(js|mdx)",
-    "../email-input/*.stories.@(js|mdx)",
+    "../email-input/*.stories.@(js)",
+    "../email-input/*.stories.@(mdx)",
     "../empty-screen-container/*.stories.@(js|mdx)",
     "../field-container/*.stories.@(js|mdx)",
     "../file-input/*.stories.@(js|mdx)",
     "../grid/*.stories.@(js|mdx)",
+    "../group-button/*.stories.@(js|mdx)",
+    "../group-buttons-menu/*.stories.@(js|mdx)",
+    "../heading/*.stories.@(js|mdx)",
+    "../help-button/*.stories.@(js|mdx)",
   ],
   addons: [
     "@storybook/addon-links",
@@ -27,5 +32,6 @@ module.exports = {
     "@storybook/addon-essentials",
     "@storybook/addon-actions",
     "@storybook/addon-controls",
+    "@storybook/addon-viewport",
   ],
 };
diff --git a/packages/asc-web-components/.storybook/preview.js b/packages/asc-web-components/.storybook/preview.js
index 1b7e7b232e..65ac095b43 100644
--- a/packages/asc-web-components/.storybook/preview.js
+++ b/packages/asc-web-components/.storybook/preview.js
@@ -1,6 +1,11 @@
+import { MINIMAL_VIEWPORTS } from "@storybook/addon-viewport";
+
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
   controls: { expanded: true },
+  viewport: {
+    viewports: MINIMAL_VIEWPORTS,
+  },
 };
 
 export const globalTypes = {
diff --git a/packages/asc-web-components/avatar-editor/avatar-editor.stories.js b/packages/asc-web-components/avatar-editor/avatar-editor.stories.js
index 49333f8ca0..225b59529f 100644
--- a/packages/asc-web-components/avatar-editor/avatar-editor.stories.js
+++ b/packages/asc-web-components/avatar-editor/avatar-editor.stories.js
@@ -1,48 +1,11 @@
 import React from "react";
-import AvatarEditor from "./";
+import AvatarEditorComponent from "./";
 import Avatar from "../avatar";
 
 export default {
   title: "Components/AvatarEditor",
-  component: AvatarEditor,
+  component: AvatarEditorComponent,
   argTypes: {
-    visible: { description: "Display avatar editor" },
-    image: { description: "Display avatar editor" },
-    accept: { description: "Accepted file types" },
-    displayType: { description: "Display type" },
-    useModalDialog: {
-      description: "Use for the view of the modal dialog or not",
-    },
-    selectNewPhotoLabel: {
-      description: "Translation string for file selection",
-    },
-    orDropFileHereLabel: {
-      description:
-        "Translation string for file dropping (concat with selectNewPhotoLabel prop)",
-    },
-    headerLabel: { description: "Translation string for title" },
-    saveButtonLabel: { description: "Translation string for save button" },
-    saveButtonLoading: {
-      description: "Tells when the button should show loader icon",
-    },
-    cancelButtonLabel: { description: "Translation string for cancel button" },
-    maxSizeFileError: { description: "Translation string for size warning" },
-    unknownTypeError: {
-      description: "Translation string for file type warning",
-    },
-    onLoadFileError: {
-      description: "Translation string for load file warning",
-    },
-    unknownError: { description: "Translation string for warning" },
-    maxSize: { description: "Max size of image" },
-    onSave: { description: "Save event" },
-    onClose: { description: "Closing event " },
-    onDeleteImage: { description: "Image deletion event" },
-    onLoadFile: { description: "Image upload event" },
-    onImageChange: { description: "Image change event" },
-    className: { description: "Accepts class" },
-    id: { description: "Accepts id" },
-    style: { description: "Accepts css style" },
     openEditor: { action: "onOpen", table: { disable: true } },
     closeEditor: { action: "onClose", table: { disable: true } },
     onSave: { action: "onSave", table: { disable: true } },
@@ -55,33 +18,11 @@ export default {
       description: {
         component: "Used to display user avatar editor on page.",
       },
-      source: {
-        code: `
-        import AvatarEditor from "@appserver/components/avatar-editor";
-
-<AvatarEditor
-  visible={true}
-  onClose={() => {}}
-  onSave={() => {})}
-  onDeleteImage={() => {})}
-  onImageChange={() => {})}
-  onLoadFile={() => {}}
-  headerLabel="Edit Photo"
-  selectNewPhotoLabel="Select new photo"
-  orDropFileHereLabel="or drop file here"
-  saveButtonLabel="Save"
-  maxSizeFileError="Maximum file size exceeded"
-  unknownTypeError="Unknown image file type"
-  unknownError="Error"
-  displayType="auto"
-/>
-        `,
-      },
     },
   },
 };
 
-class Wrapper extends React.Component {
+class AvatarEditor extends React.Component {
   constructor(props) {
     super(props);
 
@@ -145,7 +86,7 @@ class Wrapper extends React.Component {
           editAction={this.openEditor}
         />
         {this.props.children}
-        <AvatarEditor
+        <AvatarEditorComponent
           {...this.props}
           visible={this.state.isOpen || this.props.visible}
           onClose={this.onClose}
@@ -165,6 +106,6 @@ class Wrapper extends React.Component {
   }
 }
 const Template = (args) => {
-  return <Wrapper {...args} />;
+  return <AvatarEditor {...args} />;
 };
 export const Default = Template.bind({});
diff --git a/packages/asc-web-components/avatar-editor/avatar-editor.stories.mdx b/packages/asc-web-components/avatar-editor/avatar-editor.stories.mdx
new file mode 100644
index 0000000000..e69de29bb2
diff --git a/packages/asc-web-components/avatar-editor/index.js b/packages/asc-web-components/avatar-editor/index.js
index 6ff6cf231b..5447358c93 100644
--- a/packages/asc-web-components/avatar-editor/index.js
+++ b/packages/asc-web-components/avatar-editor/index.js
@@ -223,30 +223,53 @@ class AvatarEditor extends React.Component {
 }
 
 AvatarEditor.propTypes = {
+  /** Display avatar editor */
   visible: PropTypes.bool,
+  /** Translation string for title */
   headerLabel: PropTypes.string,
+  /** Translation string for file selection */
   selectNewPhotoLabel: PropTypes.string,
+  /** Translation string for file dropping (concat with selectNewPhotoLabel prop) */
   orDropFileHereLabel: PropTypes.string,
-
+  /** Translation string for save button */
   saveButtonLabel: PropTypes.string,
+  /** Translation string for cancel button */
   cancelButtonLabel: PropTypes.string,
+  /** Tells when the button should show loader icon */
   saveButtonLoading: PropTypes.bool,
+  /** Translation string for size warning */
   maxSizeFileError: PropTypes.string,
+  /** Display avatar editor */
   image: PropTypes.string,
+  /** Max size of image */
   maxSize: PropTypes.number,
+  /** Accepted file types */
   accept: PropTypes.arrayOf(PropTypes.string),
+  /** Save event */
   onSave: PropTypes.func,
+  /** Closing event */
   onClose: PropTypes.func,
+  /** Image deletion event */
   onDeleteImage: PropTypes.func,
+  /** Image upload event */
   onLoadFile: PropTypes.func,
+  /** Image change event */
   onImageChange: PropTypes.func,
+  /** Translation string for load file warning */
   onLoadFileError: PropTypes.func,
+  /** Translation string for file type warning */
   unknownTypeError: PropTypes.string,
+  /** Translation string for warning */
   unknownError: PropTypes.string,
+  /** Display type */
   displayType: PropTypes.oneOf(["auto", "modal", "aside"]),
+  /** Accepts class" */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Use for the view of the modal dialog or not */
   useModalDialog: PropTypes.bool,
 };
 
diff --git a/packages/asc-web-components/backdrop/backdrop.stories.js b/packages/asc-web-components/backdrop/backdrop.stories.js
index 13eb96d585..8e9e431004 100644
--- a/packages/asc-web-components/backdrop/backdrop.stories.js
+++ b/packages/asc-web-components/backdrop/backdrop.stories.js
@@ -6,21 +6,8 @@ import Button from "../button";
 export default {
   title: "Components/Backdrop",
   component: Backdrop,
+  subcomponents: { Button },
   argTypes: {
-    visible: {
-      description: "Display or not",
-    },
-    zIndex: {
-      description: "CSS z-index",
-    },
-    className: { description: "Accepts class" },
-    id: { description: "Accepts id" },
-    style: { description: "Accepts CSS style" },
-    withBackground: {
-      description:
-        "The background is not displayed if the viewport width is less than 1024, set it to true for display",
-    },
-    isAside: { description: "Must be true if used with Aside component" },
     onClick: { action: "On Hide", table: { disable: true } },
   },
   parameters: {
@@ -28,12 +15,6 @@ export default {
       description: {
         component: "Backdrop for displaying modal dialogs or other components",
       },
-      source: {
-        code: `
-      import Backdrop from "@appserver/components/backdrop";
-
-<Backdrop visible={true} zIndex={200}/>`,
-      },
     },
   },
 };
diff --git a/packages/asc-web-components/backdrop/index.js b/packages/asc-web-components/backdrop/index.js
index 5b2c232891..dac13a61df 100644
--- a/packages/asc-web-components/backdrop/index.js
+++ b/packages/asc-web-components/backdrop/index.js
@@ -99,12 +99,20 @@ class Backdrop extends React.Component {
 }
 
 Backdrop.propTypes = {
+  /** Display or not */
   visible: PropTypes.bool,
+  /** CSS z-index */
   zIndex: PropTypes.number,
+  /** Accepts class */
   className: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** The background is not displayed if the viewport width is less than 1024,
+   * set it to true for display */
   withBackground: PropTypes.bool,
+  /** Must be true if used with Aside component */
   isAside: PropTypes.bool,
 };
 
diff --git a/packages/asc-web-components/badge/badge.stories.js b/packages/asc-web-components/badge/badge.stories.js
index 423d6d3e70..441e8ca543 100644
--- a/packages/asc-web-components/badge/badge.stories.js
+++ b/packages/asc-web-components/badge/badge.stories.js
@@ -10,39 +10,8 @@ export default {
       description: {
         component: "Used for buttons, numbers or status markers next to icons.",
       },
-      source: {
-        code: `
-        import Badge from "@appserver/components/badge";
-
-<Badge
-  label="10"
-  backgroundColor="#ED7309"
-  color="#FFFFFF"
-  fontSize="11px"
-  fontWeight={800}
-  borderRadius="11px"
-  padding="0 5px"
-  maxWidth="50px"
-  onClick={() => {}}
-/>
-        `,
-      },
     },
   },
-  argTypes: {
-    backgroundColor: { control: "color", description: "CSS background-color" },
-    color: { control: "color", description: "CSS color" },
-    label: { control: "text", description: "Value" },
-    borderRadius: { description: "CSS border-radius" },
-    className: { description: "Accepts class" },
-    fontSize: { description: "CSS font-size" },
-    fontWeight: { description: "CSS font-weight" },
-    id: { description: "Accepts id" },
-    maxWidth: { description: "CSS max-width" },
-    onClick: { description: "onClick event" },
-    padding: { description: "CSS padding" },
-    style: { description: "Accepts css style" },
-  },
 };
 
 const Template = (args) => <Badge {...args} />;
diff --git a/packages/asc-web-components/badge/index.js b/packages/asc-web-components/badge/index.js
index db40df8cfc..e5bc04118b 100644
--- a/packages/asc-web-components/badge/index.js
+++ b/packages/asc-web-components/badge/index.js
@@ -42,17 +42,29 @@ const Badge = (props) => {
 };
 
 Badge.propTypes = {
+  /** Value */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  /** CSS background-color */
   backgroundColor: PropTypes.string,
+  /** CSS color */
   color: PropTypes.string,
+  /** CSS font-size */
   fontSize: PropTypes.string,
+  /** CSS font-weight */
   fontWeight: PropTypes.number,
+  /** CSS border-radius */
   borderRadius: PropTypes.string,
+  /** CSS padding */
   padding: PropTypes.string,
+  /** CSS max-width */
   maxWidth: PropTypes.string,
+  /** onClick event */
   onClick: PropTypes.func,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };
 
diff --git a/packages/asc-web-components/box/box.stories.js b/packages/asc-web-components/box/box.stories.js
index 69f756911e..ae2d598fda 100644
--- a/packages/asc-web-components/box/box.stories.js
+++ b/packages/asc-web-components/box/box.stories.js
@@ -1,6 +1,5 @@
 import React from "react";
 
-//import { Box } from "./";
 import Box from "./";
 
 const containerProps = {
diff --git a/packages/asc-web-components/button/button.stories.js b/packages/asc-web-components/button/button.stories.js
index 5de58e0d8c..6bf53c8d3a 100644
--- a/packages/asc-web-components/button/button.stories.js
+++ b/packages/asc-web-components/button/button.stories.js
@@ -6,53 +6,13 @@ import Button from "./";
 export default {
   title: "Components/Button",
   component: Button,
-  argTypes: {
-    label: { description: "Button text" },
-    size: { description: "Size of button" },
-    primary: { description: "Tells when the button should be primary" },
-    scale: { description: "Scale width of button to 100%" },
-    isClicked: {
-      description: "Tells when the button should present a clicked state",
-    },
-    isDisabled: {
-      description: "Tells when the button should present a disabled state",
-    },
-    isHovered: {
-      description: "Tells when the button should present a hovered state",
-    },
-    isLoading: { description: "Tells when the button should show loader icon" },
-    disableHover: { description: "Disable hover effect" },
-    icon: { description: "Icon node element" },
-    onClick: { description: "What the button will trigger when clicked " },
-    className: { description: "Accepts class" },
-    id: { description: "Accepts id" },
-    style: { description: "Accepts CSS style" },
-    tabIndex: { description: "Button tab index" },
-    minwidth: { description: "Sets the nim width of the button" },
-  },
   parameters: {
     docs: {
       description: {
         component: "Button is used for a action on a page.",
       },
-      source: {
-        code: `
-        import Button from "@appserver/components/button";
-
-<Button
-  size="base"
-  isDisabled={false}
-  onClick={() => alert("Button clicked")}
-  label="OK"
-/>
-        `
-      }
     },
   },
-  args: {
-    size: "base",
-    label: "Base Button",
-  },
 };
 
 const sizes = ["base", "medium", "big", "large"];
@@ -263,6 +223,10 @@ const HoveredTemplate = (args) => {
 };
 
 export const Default = Template.bind({});
+Default.args = {
+  size: "base",
+  label: "Base Button",
+};
 export const PrimaryButtons = PrimaryTemplate.bind({});
 export const SecondaryButtons = SecondaryTemplate.bind({});
 export const WithIconButtons = WithIconTemplate.bind({});
diff --git a/packages/asc-web-components/button/index.js b/packages/asc-web-components/button/index.js
index b68bb12f83..788c48125f 100644
--- a/packages/asc-web-components/button/index.js
+++ b/packages/asc-web-components/button/index.js
@@ -59,25 +59,37 @@ const Button = React.forwardRef((props, ref) => {
 });
 
 Button.propTypes = {
+  /** Button text */
   label: PropTypes.string,
+  /** Tells when the button should be primary */
   primary: PropTypes.bool,
+  /** Size of button */
   size: PropTypes.oneOf(["base", "medium", "big", "large"]),
+  /** Scale width of button to 100% */
   scale: PropTypes.bool,
+  /** Icon node element */
   icon: PropTypes.node,
-
+  /** Button tab index */
   tabIndex: PropTypes.number,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts CSS style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
-
+  /** Tells when the button should present a hovered state */
   isHovered: PropTypes.bool,
+  /** Disable hover effect */
   disableHover: PropTypes.bool,
+  /** Tells when the button should present a clicked state */
   isClicked: PropTypes.bool,
+  /** Tells when the button should present a disabled state */
   isDisabled: PropTypes.bool,
+  /** Tells when the button should show loader icon */
   isLoading: PropTypes.bool,
-
+  /** Sets the nim width of the button */
   minwidth: PropTypes.string,
-
+  /** What the button will trigger when clicked */
   onClick: PropTypes.func,
 };
 
diff --git a/packages/asc-web-components/calendar/calendar.stories.js b/packages/asc-web-components/calendar/calendar.stories.js
index 788c4c8d30..259ea329f3 100644
--- a/packages/asc-web-components/calendar/calendar.stories.js
+++ b/packages/asc-web-components/calendar/calendar.stories.js
@@ -5,23 +5,12 @@ export default {
   title: "Components/Calendar",
   component: Calendar,
   argTypes: {
-    themeColor: { control: "color", description: "Color of the selected day" },
-    maxDate: {
-      control: "date",
-      description: "Maximum date that the user can select",
-    },
-    selectedDate: { control: "date", description: "Selected date value" },
-    openToDate: {
-      control: "date",
-      description:
-        "The beginning of a period that shall be displayed by default",
-    },
-    minDate: {
-      control: "date",
-      description: "Minimum date that the user can select.",
-    },
+    themeColor: { control: "color" },
+    selectedDate: { control: "date" },
+    openToDate: { control: "date" },
+    maxDate: { control: "date" },
+    minDate: { control: "date" },
     locale: {
-      description: "Browser locale",
       control: {
         type: "select",
         options: [
@@ -53,38 +42,13 @@ export default {
         ],
       },
     },
-    onChange: {
-      description: "Function called when the user select a day",
-      action: "onChange",
-    },
-    size: { description: "Calendar size" },
-    className: { description: "Accepts class" },
-    id: { description: "Accepts id" },
-    style: { description: "Accepts css style" },
+    onChange: { action: "onChange" },
   },
   parameters: {
     docs: {
       description: {
         component: "Used to display custom calendar",
       },
-      source: {
-        code: `
-      import Calendar from "@appserver/components/calendar";
-
-<Calendar
-  onChange={(date) => {
-    console.log("Selected date:", date);
-  }}
-  disabled={false}
-  themeColor="#ED7309"
-  selectedDate={new Date()}
-  openToDate={new Date()}
-  minDate={new Date("1970/01/01")}
-  maxDate={new Date("3000/01/01")}
-  locale="ru"
-/>
-`,
-      },
     },
   },
 };
diff --git a/packages/asc-web-components/calendar/index.js b/packages/asc-web-components/calendar/index.js
index cfa0742794..d442719765 100644
--- a/packages/asc-web-components/calendar/index.js
+++ b/packages/asc-web-components/calendar/index.js
@@ -530,17 +530,28 @@ class Calendar extends Component {
 }
 
 Calendar.propTypes = {
-  onChange: PropTypes.func,
+  /** Color of the selected day */
   themeColor: PropTypes.string,
+  /** Selected date value */
   selectedDate: PropTypes.instanceOf(Date),
+  /** The beginning of a period that shall be displayed by default */
   openToDate: PropTypes.instanceOf(Date),
+  /** Minimum date that the user can select. */
   minDate: PropTypes.instanceOf(Date),
+  /** Maximum date that the user can select */
   maxDate: PropTypes.instanceOf(Date),
+  /** Browser locale */
   locale: PropTypes.string,
+  /** Calendar size */
   size: PropTypes.oneOf(["base", "big"]),
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Function called when the user select a day */
+  onChange: PropTypes.func,
 };
 
 Calendar.defaultProps = {
diff --git a/packages/asc-web-components/checkbox/checkbox.stories.js b/packages/asc-web-components/checkbox/checkbox.stories.js
index 35a338005a..6330104c1a 100644
--- a/packages/asc-web-components/checkbox/checkbox.stories.js
+++ b/packages/asc-web-components/checkbox/checkbox.stories.js
@@ -1,56 +1,23 @@
 import React from "react";
 
-import Checkbox from "./";
+import CheckboxComponent from "./";
 
 export default {
   title: "Components/Checkbox",
-  component: Checkbox,
+  component: CheckboxComponent,
   parameters: {
     docs: {
       description: { component: "Custom checkbox input" },
-      source: {
-        code: `
-        import Checkbox from "@appserver/components/checkbox";
-
-<Checkbox
-  id="id"
-  name="name"
-  value="value"
-  label="label"
-  isChecked={false}
-  isIndeterminate={false}
-  isDisabled={false}
-  onChange={() => {}}
-/>
-        `,
-      },
     },
   },
   argTypes: {
-    className: { description: "Accepts class" },
-    id: { description: "Used as HTML id property" },
-    isChecked: {
-      description: "The checked property sets the checked state of a checkbox",
-    },
-    isDisabled: { description: "Disables the Checkbox input " },
-    isIndeterminate: {
-      description:
-        "If true, this state is shown as a rectangle in the checkbox",
-    },
-    label: { description: "Label of the input" },
-    name: { description: "Used as HTML `name` property" },
     onChange: {
-      description: "Will be triggered whenever an CheckboxInput is clicked ",
       action: "onChange",
     },
-    style: { description: "Accepts css style " },
-    value: { description: "Value of the input" },
-    title: { description: "Title " },
-    truncate: { description: "Disables word wrapping" },
   },
 };
 
-class Wrapper extends React.Component {
+class Checkbox extends React.Component {
   constructor(props) {
     super(props);
 
@@ -66,7 +33,7 @@ class Wrapper extends React.Component {
 
   render() {
     return (
-      <Checkbox
+      <CheckboxComponent
         {...this.props}
         isChecked={this.props.isChecked || this.state.isChecked}
         onChange={this.onChange}
@@ -75,7 +42,7 @@ class Wrapper extends React.Component {
   }
 }
 const Template = (args) => {
-  return <Wrapper {...args} />;
+  return <Checkbox {...args} />;
 };
 
 const AllCheckboxesTemplate = (args) => {
diff --git a/packages/asc-web-components/checkbox/index.js b/packages/asc-web-components/checkbox/index.js
index eb7e5237ef..4f8bdb5d90 100644
--- a/packages/asc-web-components/checkbox/index.js
+++ b/packages/asc-web-components/checkbox/index.js
@@ -3,9 +3,9 @@ import PropTypes from "prop-types";
 
 import Text from "../text";
 import { StyledLabel, HiddenInput } from "./styled-checkbox";
-import CheckboxIndeterminateIcon from "../../../public/images/checkbox.indeterminate.react.svg";
-import CheckboxCheckedIcon from "../../../public/images/checkbox.checked.react.svg";
-import CheckboxIcon from "../../../public/images/checkbox.react.svg";
+import CheckboxIndeterminateIcon from "./svg/checkbox.indeterminate.react.svg";
+import CheckboxCheckedIcon from "./svg/checkbox.checked.react.svg";
+import CheckboxIcon from "./svg/checkbox.react.svg";
 
 // eslint-disable-next-line react/prop-types
 const RenderCheckboxIcon = ({ isChecked, isIndeterminate }) => {
@@ -108,19 +108,29 @@ class Checkbox extends React.Component {
 }
 
 Checkbox.propTypes = {
+  /** Used as HTML id property */
   id: PropTypes.string,
+  /** Used as HTML `name` property */
   name: PropTypes.string,
+  /** Value of the input */
   value: PropTypes.string,
+  /** Label of the input */
   label: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
-
+  /** The checked property sets the checked state of a checkbox */
   isChecked: PropTypes.bool,
+  /** If true, this state is shown as a rectangle in the checkbox */
   isIndeterminate: PropTypes.bool,
+  /** Disables the Checkbox input */
   isDisabled: PropTypes.bool,
-
+  /** Will be triggered whenever an CheckboxInput is clicked */
   onChange: PropTypes.func,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Title */
   title: PropTypes.string,
+  /** Disables word wrapping */
   truncate: PropTypes.bool,
 };
 
diff --git a/packages/asc-web-components/checkbox/svg/checkbox.checked.react.svg b/packages/asc-web-components/checkbox/svg/checkbox.checked.react.svg
new file mode 100644
index 0000000000..b2e55326cf
--- /dev/null
+++ b/packages/asc-web-components/checkbox/svg/checkbox.checked.react.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1"/>
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" stroke-width="8%" />
+<path d="M7.97926 11.6351C7.48054 12.1216 6.67132 12.1216 6.17284 11.6351L3.37404 8.90491C2.87532 8.41864 2.87532 7.62926 3.37404 7.14299C3.87252 6.65649 4.68174 6.65649 5.18046 7.14299L6.84799 8.76943C6.97387 8.89199 7.17822 8.89199 7.30435 8.76943L11.8195 4.36487C12.318 3.87838 13.1272 3.87838 13.626 4.36487C13.8655 4.5985 14 4.91547 14 5.24583C14 5.57619 13.8655 5.89317 13.626 6.12679L7.97926 11.6351Z" fill="#333333"/>
+</svg>
diff --git a/packages/asc-web-components/checkbox/svg/checkbox.indeterminate.react.svg b/packages/asc-web-components/checkbox/svg/checkbox.indeterminate.react.svg
new file mode 100644
index 0000000000..58295c3c6c
--- /dev/null
+++ b/packages/asc-web-components/checkbox/svg/checkbox.indeterminate.react.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1"/>
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" stroke-width="8%"/>
+<rect x="3" y="3" width="10" height="10" rx="2" fill="#333333"/>
+</svg>
\ No newline at end of file
diff --git a/packages/asc-web-components/checkbox/svg/checkbox.react.svg b/packages/asc-web-components/checkbox/svg/checkbox.react.svg
new file mode 100644
index 0000000000..8570fa86d4
--- /dev/null
+++ b/packages/asc-web-components/checkbox/svg/checkbox.react.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" />
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1"  stroke-width="8%" />
+</svg>
diff --git a/packages/asc-web-components/combobox/combobox.stories.js b/packages/asc-web-components/combobox/combobox.stories.js
index 4e4b145fe5..a953399389 100644
--- a/packages/asc-web-components/combobox/combobox.stories.js
+++ b/packages/asc-web-components/combobox/combobox.stories.js
@@ -5,148 +5,6 @@ import RadioButton from "../radio-button";
 import DropDownItem from "../drop-down-item";
 import NavLogoIcon from "../../../public/images/nav.logo.opened.react.svg";
 
-export default {
-  title: "Components/ComboBox",
-  component: ComboBox,
-  decorators: [
-    (Story) => (
-      <div style={{ height: "230px" }}>
-        <Story />
-      </div>
-    ),
-  ],
-
-  argTypes: {
-    advancedOptions: {
-      description: "If you need display options not basic options",
-    },
-    className: { description: "Accepts class" },
-    displayType: { description: "Component Display Type" },
-    dropDownMaxHeight: { description: "Height of Dropdown" },
-    id: { description: "Accepts id" },
-    isDisabled: { description: "Indicates that component is disabled" },
-    noBorder: {
-      description: "Indicates that component is displayed without borders",
-    },
-    onSelect: {
-      description: "Will be triggered whenever an ComboBox is selected option",
-      action: "onSelect",
-    },
-    options: { description: "Combo box options" },
-    scaledOptions: {
-      description:
-        "Indicates that component`s options is scaled by ComboButton",
-    },
-    scaled: { description: "Indicates that component is scaled by parent" },
-    selectedOption: { description: "Selected option" },
-    size: { description: "Select component width, one of default" },
-    style: { description: "Accepts css style" },
-    toggleAction: {
-      description:
-        "The event will be raised when using `displayType: toggle` when clicking on a component",
-    },
-    showDisabledItems: {
-      description: "Display disabled items or not when displayType !== toggle ",
-    },
-    children: { description: "Children element" },
-    directionX: { description: "X direction selection" },
-    directionY: { description: "Y direction selection" },
-    opened: { description: "Tells when a component is open" },
-    textOverflow: { description: "Accepts css text-overflow" },
-    disableIconClick: { description: "Вisables clicking on the icon" },
-  },
-  parameters: {
-    docs: {
-      description: { component: "Custom combo box input" },
-      source: {
-        code: `
-          ### Usage
-
-import ComboBox from "@appserver/components/combobox";
-import NavLogoIcon from "../../../../../public/images/nav.logo.react.svg";
-
-const options = [
-  {
-    key: 1,
-    icon: "static/images/catalog.employee.react.svg", // optional item
-    label: "Option 1",
-    disabled: false, // optional item
-    onClick: clickFunction, // optional item
-  },
-];
-
-#### Options have options:
-
-- key - Item key, may be a string or a number
-- label - Display text
-- icon - Optional name of icon that will be displayed before label
-- disabled - Make option disabled
-- onClick - On click function
-
-ComboBox perceives all property's for positioning from DropDown!
-
-If you need to display a custom list of options, you must use advancedOptions property. Like this:
-
-const advancedOptions = (
-  <Meta>
-    <DropDownItem>
-      <RadioButton value="asc" name="first" label="A-Z" isChecked={true} />
-    </DropDownItem>
-    <DropDownItem>
-      <RadioButton value="desc" name="first" label="Z-A" />
-    </DropDownItem>
-    <DropDownItem isSeparator />
-    <DropDownItem>
-      <RadioButton value="first" name="second" label="First name" />
-    </DropDownItem>
-    <DropDownItem>
-      <RadioButton
-        value="last"
-        name="second"
-        label="Last name"
-        isChecked={true}
-      />
-    </DropDownItem>
-  </Meta>
-);
-
-<ComboBox
-  options={[]} // An empty array will enable advancedOptions
-  advancedOptions={advancedOptions}
-  onSelect={(option) => console.log("Selected option", option)}
-  selectedOption={{
-    key: 0,
-    label: "Select",
-  }}
-  isDisabled={false}
-  scaled={false}
-  size="content"
-  directionX="right"
->
-  <NavLogoIcon size="medium" key="comboIcon" />
-</ComboBox>
-
-To use Combobox as a toggle button, you must declare it according to the parameters:
-
-<ComboBox
-  options={[]} // Required to display correctly
-  selectedOption={{
-    key: 0,
-    label: "Selected option",
-  }}
-  scaled={false}
-  size="content"
-  displayType="toggle"
-  toggleAction={alert("action")}
->
-  <NavLogoIcon size="medium" key="comboIcon" />
-</ComboBox>
-          `,
-      },
-    },
-  },
-};
-
 const comboOptions = [
   {
     key: 1,
@@ -155,7 +13,7 @@ const comboOptions = [
   },
   {
     key: 2,
-    icon: "CatalogGuestIcon",
+    icon: "static/images/catalog.guest.react.svg",
     label: "Option 2",
   },
   {
@@ -207,68 +65,78 @@ const advancedOptions = (
   </>
 );
 
+const Wrapper = (props) => (
+  <div style={{ height: "220px" }}>{props.children}</div>
+);
+
 const childrenItems = children.length > 0 ? children : null;
 
 const Template = (args) => (
-  <ComboBox
-    {...args}
-    options={[
-      { key: 1, label: "Option 1" },
-      { key: 2, label: "Option 2" },
-    ]}
-    selectedOption={{
-      key: 0,
-      label: "Select",
-    }}
-  />
+  <Wrapper>
+    <ComboBox
+      {...args}
+      options={[
+        { key: 1, label: "Option 1" },
+        { key: 2, label: "Option 2" },
+      ]}
+      selectedOption={{
+        key: 0,
+        label: "Select",
+      }}
+    />
+  </Wrapper>
 );
 
 const BaseOptionsTemplate = (args) => (
-  <ComboBox
-    {...args}
-    options={comboOptions}
-    onSelect={(option) => args.onSelect(option)}
-    selectedOption={{
-      key: 0,
-      label: "Select",
-      default: true,
-    }}
-  >
-    {childrenItems}
-  </ComboBox>
+  <Wrapper>
+    <ComboBox
+      {...args}
+      options={comboOptions}
+      onSelect={(option) => args.onSelect(option)}
+      selectedOption={{
+        key: 0,
+        label: "Select",
+        default: true,
+      }}
+    >
+      {childrenItems}
+    </ComboBox>
+  </Wrapper>
 );
 
 const AdvancedOptionsTemplate = (args) => (
-  <ComboBox
-    {...args}
-    options={[]}
-    advancedOptions={advancedOptions}
-    onSelect={(option) => args.onSelect(option)}
-    selectedOption={{
-      key: 0,
-      label: "Select",
-      default: true,
-    }}
-  >
-    <NavLogoIcon size="medium" key="comboIcon" />
-  </ComboBox>
+  <Wrapper>
+    <ComboBox
+      {...args}
+      options={[]}
+      advancedOptions={advancedOptions}
+      onSelect={(option) => args.onSelect(option)}
+      selectedOption={{
+        key: 0,
+        label: "Select",
+        default: true,
+      }}
+    >
+      <NavLogoIcon size="medium" key="comboIcon" />
+    </ComboBox>
+  </Wrapper>
 );
 
-export const Default = Template.bind({});
-Default.args = {
+export const basic = Template.bind({});
+basic.args = {
   opened: true,
-  scaled: false
+  scaled: false,
 };
-export const BaseOptions = BaseOptionsTemplate.bind({});
-BaseOptions.args = {
+export const baseOption = BaseOptionsTemplate.bind({});
+baseOption.args = {
   scaledOptions: false,
   scaled: false,
   noBorder: false,
   isDisabled: false,
   opened: true,
 };
-export const AdvancedOptions = AdvancedOptionsTemplate.bind({});
-AdvancedOptions.args = {
+export const advancedOption = AdvancedOptionsTemplate.bind({});
+advancedOption.args = {
   opened: true,
   isDisabled: false,
   scaled: false,
diff --git a/packages/asc-web-components/combobox/combobox.stories.mdx b/packages/asc-web-components/combobox/combobox.stories.mdx
new file mode 100644
index 0000000000..1c03535447
--- /dev/null
+++ b/packages/asc-web-components/combobox/combobox.stories.mdx
@@ -0,0 +1,153 @@
+import { Meta, Story, ArgsTable, Canvas } from "@storybook/addon-docs/blocks";
+
+import ComboBox from "./";
+import * as stories from "./combobox.stories.js";
+
+<Meta
+  title="Components/ComboBox"
+  component={ComboBox}
+  argTypes={{
+    onSelect: {
+      action: "onSelect",
+    },
+    selectedOption: { required: true },
+    options: { required: true },
+  }}
+/>
+
+# ComboBox
+
+Custom combo box input
+
+<Canvas>
+  <Story story={stories.basic} name="Default" />
+</Canvas>
+
+### Properties
+
+<ArgsTable story="Default" />
+
+### Base options
+
+<Canvas
+  parameters={{
+    source: {
+      code: stories.baseOption,
+    },
+  }}
+>
+  <Story story={stories.baseOption} name="Base Option" />
+</Canvas>
+
+### Advanced options
+
+<Canvas>
+  <Story story={stories.advancedOption} name="Advanced Options" />
+</Canvas>
+
+```js
+import ComboBox from "@appserver/components/combobox";
+import NavLogoIcon from "../../../../../public/images/nav.logo.react.svg";
+```
+
+```js
+const options = [
+  {
+    key: 1,
+    icon: "static/images/catalog.employee.react.svg", // optional item
+    label: "Option 1",
+    disabled: false, // optional item
+    onClick: clickFunction, // optional item
+  },
+];
+```
+
+```jsx
+<ComboBox
+  options={options}
+  isDisabled={false}
+  selectedOption={{
+    key: 0,
+    label: "Select",
+  }}
+  dropDownMaxHeight={200}
+  noBorder={false}
+  scale={true}
+  scaledOptions={true}
+  size="content"
+  onSelect={(option) => console.log("selected", option)}
+/>
+```
+
+Options have options:
+
+- key - Item key, may be a string or a number
+- label - Display text
+- icon - Optional name of icon that will be displayed before label
+- disabled - Make option disabled
+- onClick - On click function
+
+ComboBox perceives all property`s for positioning from DropDown!
+
+If you need to display a custom list of options, you must use advancedOptions property. Like this:
+
+```js
+const advancedOptions = (
+  <>
+    <DropDownItem>
+      <RadioButton value="asc" name="first" label="A-Z" isChecked={true} />
+    </DropDownItem>
+    <DropDownItem>
+      <RadioButton value="desc" name="first" label="Z-A" />
+    </DropDownItem>
+    <DropDownItem isSeparator />
+    <DropDownItem>
+      <RadioButton value="first" name="second" label="First name" />
+    </DropDownItem>
+    <DropDownItem>
+      <RadioButton
+        value="last"
+        name="second"
+        label="Last name"
+        isChecked={true}
+      />
+    </DropDownItem>
+  </>
+);
+```
+
+```jsx
+<ComboBox
+  options={[]} // An empty array will enable advancedOptions
+  advancedOptions={advancedOptions}
+  onSelect={(option) => console.log("Selected option", option)}
+  selectedOption={{
+    key: 0,
+    label: "Select",
+  }}
+  isDisabled={false}
+  scaled={false}
+  size="content"
+  directionX="right"
+>
+  <NavLogoIcon size="medium" key="comboIcon" />
+</ComboBox>
+```
+
+To use Combobox as a toggle button, you must declare it according to the parameters:
+
+```jsx
+<ComboBox
+  options={[]} // Required to display correctly
+  selectedOption={{
+    key: 0,
+    label: "Selected option",
+  }}
+  scaled={false}
+  size="content"
+  displayType="toggle"
+  toggleAction={alert("action")}
+>
+  <NavLogoIcon size="medium" key="comboIcon" />
+</ComboBox>
+```
diff --git a/packages/asc-web-components/combobox/index.js b/packages/asc-web-components/combobox/index.js
index a2d9955fff..eb10b05ca7 100644
--- a/packages/asc-web-components/combobox/index.js
+++ b/packages/asc-web-components/combobox/index.js
@@ -166,26 +166,49 @@ class ComboBox extends React.Component {
 }
 
 ComboBox.propTypes = {
+  /** If you need display options not basic options */
   advancedOptions: PropTypes.element,
+  /** Children elements */
   children: PropTypes.any,
+  /** Accepts class */
   className: PropTypes.string,
+  /** X direction selection */
   directionX: PropTypes.oneOf(["left", "right"]),
+  /** Y direction selection */
   directionY: PropTypes.oneOf(["bottom", "top"]),
+  /** Component Display Type */
   displayType: PropTypes.oneOf(["default", "toggle"]),
+  /** Height of Dropdown */
   dropDownMaxHeight: PropTypes.number,
+  /** Display disabled items or not when displayType !== toggle */
+  showDisabledItems: PropTypes.bool,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Indicates that component is disabled */
   isDisabled: PropTypes.bool,
+  /** Indicates that component is displayed without borders */
   noBorder: PropTypes.bool,
+  /** Will be triggered whenever an ComboBox is selected option */
   onSelect: PropTypes.func,
+  /** Tells when a component is open */
   opened: PropTypes.bool,
+  /** Combo box options */
   options: PropTypes.array.isRequired,
+  /** Indicates that component is scaled by parent */
   scaled: PropTypes.bool,
+  /** Indicates that component`s options is scaled by ComboButton */
   scaledOptions: PropTypes.bool,
+  /** Selected option */
   selectedOption: PropTypes.object.isRequired,
+  /** Select component width, one of default */
   size: PropTypes.oneOf(["base", "middle", "big", "huge", "content"]),
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** The event will be raised when using `displayType: toggle` when clicking on a component */
   toggleAction: PropTypes.func,
+  /** Accepts css text-overflow */
   textOverflow: PropTypes.bool,
+  /** Disables clicking on the icon */
   disableIconClick: PropTypes.bool,
 };
 
diff --git a/packages/asc-web-components/context-menu-button/context-menu-button.stories.js b/packages/asc-web-components/context-menu-button/context-menu-button.stories.js
index 0a2b376a7c..f33330c4ea 100644
--- a/packages/asc-web-components/context-menu-button/context-menu-button.stories.js
+++ b/packages/asc-web-components/context-menu-button/context-menu-button.stories.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 
 import ContextMenuButton from "./";
 
@@ -6,88 +6,28 @@ export default {
   title: "Components/ContextMenuButton",
   component: ContextMenuButton,
   argTypes: {
-    className: { description: "Accepts class" },
-    clickColor: {
-      description: "Specifies the icon click color",
-      control: "color",
-    },
-    color: { description: "Specifies the icon color", control: "color" },
-    data: { description: "Array of options for display " },
-    directionX: {
-      description: "What the button will trigger when mouse out of button",
-    },
-    getData: { description: "Function for converting to inner data " },
-    hoverColor: {
-      description: "Specifies the icon hover color",
-      control: "color",
-    },
-    iconClickName: { description: "Specifies the icon click name" },
-    iconHoverName: { description: "Specifies the icon hover name" },
-    iconName: { description: "Specifies the icon name" },
-    id: { description: "Accepts id" },
-    isDisabled: {
-      description: "Tells when the button should present a disabled state",
-    },
-    onMouseEnter: {
-      description: "What the button will trigger when mouse hovered",
-      action: "onMouseEnter",
-    },
-    onMouseLeave: {
-      description: "What the button will trigger when mouse leave",
-      action: "onMouseLeave",
-    },
-    onMouseOut: {
-      description: "What the button will trigger when mouse out of button",
-      action: "onMouseOut",
-    },
-    onMouseOver: {
-      description: "What the button will trigger when mouse over button",
-      action: "onMouseOver",
-    },
-    opened: {
-      description: "Tells when the button should present a opened state",
-    },
-    size: { description: "Specifies the icon size" },
-    style: { description: "Accepts css style" },
-    title: { description: "Specifies the icon title" },
-    iconOpenName: { description: "Specifies the icon open name" },
-    directionY: { description: "Direction Y" },
-    columnCount: { description: "Set the number of columns" },
-    displayType: { description: "Set the display type" },
+    clickColor: { control: "color" },
+    color: { control: "color" },
+    getData: { required: true },
+    hoverColor: { control: "color" },
     onClickLabel: { action: "onClickLabel", table: { disable: true } },
+    onMouseLeave: { action: "onMouseLeave" },
+    onMouseEnter: { action: "onMouseEnter" },
+    onMouseOver: { action: "onMouseOver" },
+    onMouseOut: { action: "onMouseOut" },
   },
   parameters: {
     docs: {
       description: {
         component: `ContextMenuButton is used for displaying context menu actions on a list's item`,
       },
-      source: {
-        code: `
-        import ContextMenuButton from "@appserver/components/context-menu-button";
-
-<ContextMenuButton
-  iconName="static/images/vertical-dots.react.svg"
-  size={16}
-  color="#A3A9AE"
-  isDisabled={false}
-  title="Actions"
-  getData={() => [
-    {
-      key: "key",
-      label: "label",
-      onClick: () => alert("label"),
-    },
-  ]}
-/>
-        `,
-      },
     },
   },
 };
 
 const Template = (args) => {
-  function getData() {
-    console.log("getData");
+  const [isOpen, setIsOpen] = useState(args.opened);
+  const getData = () => {
     return [
       {
         key: "key1",
@@ -100,18 +40,31 @@ const Template = (args) => {
         onClick: () => args.onClickLabel("label2"),
       },
     ];
-  }
+  };
+
+  const onClickHandler = () => {
+    setIsOpen(!isOpen);
+    args.onClickLabel();
+  };
   return (
-    <ContextMenuButton
-      {...args}
-      title={"Actions"}
-      iconName={"/static/images/vertical-dots.react.svg"}
-      size={16}
-      color={"#A3A9AE"}
-      getData={getData}
-      isDisabled={false}
-    />
+    <div style={{ height: "100px" }}>
+      <ContextMenuButton
+        {...args}
+        opened={isOpen}
+        getData={getData}
+        isDisabled={false}
+        onClick={onClickHandler}
+      />
+    </div>
   );
 };
 
-export const Default = Template.bind({});
\ No newline at end of file
+export const Default = Template.bind({});
+Default.args = {
+  title: "Actions",
+  iconName: "/static/images/vertical-dots.react.svg",
+  size: 16,
+  color: "#A3A9AE",
+  directionX: "right",
+  isDisabled: false,
+};
diff --git a/packages/asc-web-components/context-menu-button/index.js b/packages/asc-web-components/context-menu-button/index.js
index aaf36e18c1..87382e4af4 100644
--- a/packages/asc-web-components/context-menu-button/index.js
+++ b/packages/asc-web-components/context-menu-button/index.js
@@ -234,34 +234,53 @@ class ContextMenuButton extends React.Component {
 }
 
 ContextMenuButton.propTypes = {
+  /** Tells when the button should present a opened state */
   opened: PropTypes.bool,
+  /** Array of options for display */
   data: PropTypes.array,
+  /** Function for converting to inner data */
   getData: PropTypes.func.isRequired,
+  /** Specifies the icon title */
   title: PropTypes.string,
+  /** Specifies the icon name */
   iconName: PropTypes.string,
+  /** Specifies the icon size */
   size: PropTypes.number,
+  /** Specifies the icon color */
   color: PropTypes.string,
+  /** Tells when the button should present a disabled state */
   isDisabled: PropTypes.bool,
-
+  /** Specifies the icon hover color */
   hoverColor: PropTypes.string,
+  /** Specifies the icon click color */
   clickColor: PropTypes.string,
-
+  /** Specifies the icon hover name */
   iconHoverName: PropTypes.string,
+  /** Specifies the icon click name */
   iconClickName: PropTypes.string,
+  /** Specifies the icon open name */
   iconOpenName: PropTypes.string,
-
+  /** What the button will trigger when mouse hovered */
   onMouseEnter: PropTypes.func,
+  /** What the button will trigger when mouse leave */
   onMouseLeave: PropTypes.func,
+  /** What the button will trigger when mouse over button */
   onMouseOver: PropTypes.func,
+  /** What the button will trigger when mouse out of button */
   onMouseOut: PropTypes.func,
-
+  /** Direction X */
   directionX: PropTypes.string,
+  /** Direction Y */
   directionY: PropTypes.string,
-
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Set the number of columns */
   columnCount: PropTypes.number,
+  /** Set the display type */
   displayType: PropTypes.string,
 };
 
diff --git a/packages/asc-web-components/context-menu/context-menu.stories.js b/packages/asc-web-components/context-menu/context-menu.stories.js
index e691cc5a63..ea012cb3db 100644
--- a/packages/asc-web-components/context-menu/context-menu.stories.js
+++ b/packages/asc-web-components/context-menu/context-menu.stories.js
@@ -8,14 +8,7 @@ import ContextMenu from "./index";
 export default {
   title: "Components/ContextMenu",
   component: ContextMenu,
-  argTypes: {
-    className: { description: "Accepts class" },
-    id: { description: "Accepts id" },
-    options: { description: "DropDownItems collection" },
-    style: { description: "Accepts css style" },
-    targetAreaId: { description: "Id of container apply to" },
-    withBackdrop: { description: "Used to display backdrop" },
-  },
+  subcomponents: { RowContainer, Row, RowContent },
   parameters: {
     docs: {
       description: {
@@ -27,13 +20,6 @@ For use within separate component it is necessary to determine active zone and e
 In particular case, state is created containing options for particular Row element and passed to component when called.
         `,
       },
-      source: {
-        code: `
-      import ContextMenu from "@appserver/components/context-menu";
-
-<ContextMenu targetAreaId="rowContainer" options={[]} />
-      `,
-      },
     },
   },
 };
diff --git a/packages/asc-web-components/context-menu/index.js b/packages/asc-web-components/context-menu/index.js
index 6fa9f0cf42..b24c59e492 100644
--- a/packages/asc-web-components/context-menu/index.js
+++ b/packages/asc-web-components/context-menu/index.js
@@ -111,11 +111,17 @@ class ContextMenu extends React.PureComponent {
 }
 
 ContextMenu.propTypes = {
+  /** DropDownItems collection */
   options: PropTypes.array,
+  /** Id of container apply to */
   targetAreaId: PropTypes.string,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Used to display backdrop */
   withBackdrop: PropTypes.bool,
 };
 
diff --git a/packages/asc-web-components/date-picker/date-picker.stories.js b/packages/asc-web-components/date-picker/date-picker.stories.js
index 21a6097582..75211a014a 100644
--- a/packages/asc-web-components/date-picker/date-picker.stories.js
+++ b/packages/asc-web-components/date-picker/date-picker.stories.js
@@ -1,116 +1,71 @@
 import React from "react";
 import DatePicker from "./";
 
+const locales = [
+  "az",
+  "zh-cn",
+  "cs",
+  "nl",
+  "en-gb",
+  "en",
+  "fi",
+  "fr",
+  "de",
+  "de-ch",
+  "el",
+  "it",
+  "ja",
+  "ko",
+  "lv",
+  "pl",
+  "pt",
+  "pt-br",
+  "ru",
+  "sk",
+  "sl",
+  "es",
+  "tr",
+  "uk",
+  "vi",
+];
+
 export default {
   title: "Components/DatePicker",
   component: DatePicker,
-  decorators: [
-    (Story) => (
-      <div style={{ height: "380px" }}>
-        <Story />
-      </div>
-    ),
-  ],
+
   argTypes: {
-    themeColor: { description: "Color of the selected day", control: "color" },
-    selectedDate: { description: "Selected date value", control: "date" },
-    openToDate: { description: "Opened date value", control: "date" },
-    minDate: {
-      description: "Minimum date that the user can select.",
-      control: "date",
-    },
-    maxDate: {
-      description: "Maximum date that the user can select.",
-      control: "date",
-    },
-    calendarHeaderContent: {
-      description: "Calendar header content (calendar opened in aside)",
-    },
-    calendarSize: { description: "Calendar size" },
-    className: { description: "Accepts class " },
-    displayType: { description: "Calendar display type " },
-    hasError: { description: "Set error date-input style" },
-    id: { description: "Accepts id " },
-    isDisabled: { description: "Disabled react-calendar" },
-    isOpen: { description: "Opens calendar" },
-    isReadOnly: { description: "Set input type is read only" },
-    locale: { description: "Browser locale" },
-    onChange: {
-      description: "Function called when the user select a day ",
-      action: "onChange",
-    },
-    scaled: { description: "Selected calendar size" },
-    style: { description: "Accepts css style" },
-    zIndex: { description: "Calendar css z-index" },
+    themeColor: { control: "color" },
+    selectedDate: { control: "date" },
+    openToDate: { control: "date" },
+    minDate: { control: "date" },
+    maxDate: { control: "date" },
+    onChange: { action: "onChange" },
+    locale: { control: { type: "select", options: locales } },
   },
   parameters: {
     docs: {
       description: {
         component: "Base DatePicker component",
       },
-      source: {
-        code: `
-        import DatePicker from "@appserver/components/date-picker";
-
-<DatePicker
-  onChange={(date) => {
-    console.log("Selected date", date);
-  }}
-  selectedDate={new Date()}
-  minDate={new Date("1970/01/01")}
-  maxDate={new Date(new Date().getFullYear() + 1 + "/01/01")}
-  isDisabled={false}
-  isReadOnly={false}
-  hasError={false}
-  isOpen={false}
-  themeColor="#ED7309"
-  locale="en"
-/>
-        `,
-      },
     },
   },
 };
 
 const Template = (args) => {
-  const locales = [
-    "az",
-    "zh-cn",
-    "cs",
-    "nl",
-    "en-gb",
-    "en",
-    "fi",
-    "fr",
-    "de",
-    "de-ch",
-    "el",
-    "it",
-    "ja",
-    "ko",
-    "lv",
-    "pl",
-    "pt",
-    "pt-br",
-    "ru",
-    "sk",
-    "sl",
-    "es",
-    "tr",
-    "uk",
-    "vi",
-  ];
+  console.log(args.locale);
   return (
-    <DatePicker
-      {...args}
-      onChange={(date) => {
-        args.onChange(date);
-      }}
-      selectedDate={new Date(args.selectedDate)}
-      minDate={new Date(args.minDate)}
-      maxDate={new Date(args.maxDate)}
-      openToDate={new Date(args.openToDate)}
-    />
+    <div style={{ height: "380px" }}>
+      <DatePicker
+        {...args}
+        onChange={(date) => {
+          args.onChange(date);
+        }}
+        selectedDate={new Date(args.selectedDate)}
+        minDate={new Date(args.minDate)}
+        maxDate={new Date(args.maxDate)}
+        openToDate={new Date(args.openToDate)}
+      />
+    </div>
   );
 };
 
@@ -124,4 +79,5 @@ Default.args = {
   maxDate: new Date(new Date().getFullYear() + 1 + "/01/01"),
   openToDate: new Date(),
   calendarSize: "base",
+  locale: "en",
 };
diff --git a/packages/asc-web-components/date-picker/index.js b/packages/asc-web-components/date-picker/index.js
index 8ac9b665da..5b4cadc2f6 100644
--- a/packages/asc-web-components/date-picker/index.js
+++ b/packages/asc-web-components/date-picker/index.js
@@ -379,24 +379,42 @@ class DatePicker extends Component {
 }
 
 DatePicker.propTypes = {
+  /** Function called when the user select a day */
   onChange: PropTypes.func,
+  /** Color of the selected day */
   themeColor: PropTypes.string,
+  /** Selected date value */
   selectedDate: PropTypes.instanceOf(Date),
+  /** Opened date value */
   openToDate: PropTypes.instanceOf(Date),
+  /** Minimum date that the user can select */
   minDate: PropTypes.instanceOf(Date),
+  /** Maximum date that the user can select */
   maxDate: PropTypes.instanceOf(Date),
+  /** Browser locale */
   locale: PropTypes.string,
+  /** Disabled react-calendar */
   isDisabled: PropTypes.bool,
+  /** Set input type is read only */
   isReadOnly: PropTypes.bool,
+  /** Set error date-input style */
   hasError: PropTypes.bool,
-  hasWarning: PropTypes.bool,
+  //hasWarning: PropTypes.bool,
+  /** Opens calendar */
   isOpen: PropTypes.bool,
+  /** Calendar size */
   calendarSize: PropTypes.oneOf(["base", "big"]),
+  /** Calendar display type */
   displayType: PropTypes.oneOf(["dropdown", "aside", "auto"]),
+  /** Calendar css z-index */
   zIndex: PropTypes.number,
+  /** Calendar header content (calendar opened in aside) */
   calendarHeaderContent: PropTypes.string,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };
 
diff --git a/packages/asc-web-components/drag-and-drop/drag-and-drop.stories.js b/packages/asc-web-components/drag-and-drop/drag-and-drop.stories.js
index beb5e0155d..8512e1c842 100644
--- a/packages/asc-web-components/drag-and-drop/drag-and-drop.stories.js
+++ b/packages/asc-web-components/drag-and-drop/drag-and-drop.stories.js
@@ -6,37 +6,16 @@ export default {
   title: "Components/DragAndDrop",
   component: DragAndDrop,
   argTypes: {
-    dragging: { description: "Show that the item is being dragged now." },
-    isDropZone: { description: "Sets the component as a dropzone" },
-    onDrop: {
-      action: "onDrop",
-      description:
-        "Occurs when the dragged element is dropped on the drop target",
-    },
+    onDrop: { action: "onDrop" },
     targetFile: { action: "File: ", table: { disable: true } },
-    className: { description: "Accepts class" },
-    onMouseDown: {
-      description: "Occurs when the mouse button is pressed",
-      action: "onMouseDown",
-    },
-    children: { table: { disable: true } },
+    onMouseDown: { action: "onMouseDown" },
   },
   parameters: {
     docs: {
       description: {
-        component: `Drag And Drop component can be used as Dropzone
-        See documentation: https://github.com/react-dropzone/react-dropzone
-        `,
-      },
-      source: {
-        code: `
-        import DragAndDrop from "@appserver/components/drag-and-drop";
+        component: `Drag And Drop component can be used as Dropzone.
 
-<DragAndDrop onDrop={onDrop} style={width: 200, height: 200, border: "5px solid #999"}>
-  <Text style={textStyles} color="#999" fontSize="20px">
-    Drop items here
-  </Text>
-</DragAndDrop>
+See documentation: https://github.com/react-dropzone/react-dropzone
         `,
       },
     },
@@ -66,4 +45,3 @@ const Template = (args) => {
 };
 
 export const Default = Template.bind({});
-
diff --git a/packages/asc-web-components/drag-and-drop/index.js b/packages/asc-web-components/drag-and-drop/index.js
index d7f3338143..2dfd10d71c 100644
--- a/packages/asc-web-components/drag-and-drop/index.js
+++ b/packages/asc-web-components/drag-and-drop/index.js
@@ -32,11 +32,17 @@ const DragAndDrop = (props) => {
 };
 
 DragAndDrop.propTypes = {
+  /** Children elements */
   children: PropTypes.any,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Sets the component as a dropzone */
   isDropZone: PropTypes.bool,
+  /** Show that the item is being dragged now. */
   dragging: PropTypes.bool,
+  /** Occurs when the mouse button is pressed */
   onMouseDown: PropTypes.func,
+  /** Occurs when the dragged element is dropped on the drop target */
   onDrop: PropTypes.func,
 };
 
diff --git a/packages/asc-web-components/drop-down-item/drop-down-item.stories.js b/packages/asc-web-components/drop-down-item/drop-down-item.stories.js
index 38ed89542d..69d7d27661 100644
--- a/packages/asc-web-components/drop-down-item/drop-down-item.stories.js
+++ b/packages/asc-web-components/drop-down-item/drop-down-item.stories.js
@@ -5,36 +5,9 @@ import DropDownItem from ".";
 export default {
   title: "Components/DropDownItem",
   component: DropDownItem,
-  decorators: [
-    (Story) => (
-      <div style={{ height: "200px", position: "relative" }}>
-        <Story />
-      </div>
-    ),
-  ],
+  subcomponents: { DropDown },
   argTypes: {
-    isHeader: {
-      description: "Tells when the dropdown item should display like header",
-    },
-    isSeparator: {
-      description: "Tells when the dropdown item should display like separator",
-    },
-    noHover: { description: "Disable default style hover effect" },
-    className: { description: "Accepts class" },
-    disabled: {
-      description: "Tells when the dropdown item should display like disabled",
-    },
-    icon: { description: "Dropdown item icon" },
-    id: { description: "Accepts id" },
-    label: { description: "Dropdown item text" },
-    onClick: {
-      description: "What the dropdown item will trigger when clicked",
-      action: "onClick",
-    },
-    style: { description: "Accepts css style" },
-    tabIndex: { table: { disable: true } },
-    children: { table: { disable: true } },
-    textOverflow: { table: { disable: true } },
+    onClick: { action: "onClick" },
   },
   parameters: {
     docs: {
@@ -45,17 +18,6 @@ An item can act as separator, header, or container.
 
 When used as container, it will retain all styling features and positioning. To disable hover effects in container mode, you can use _noHover_ property.`,
       },
-      source: {
-        code: `import DropDownItem from "@appserver/components/drop-down-item";
-
-<DropDownItem
-  isSeparator={false}
-  isHeader={false}
-  label="Button 1"
-  icon="static/images/nav.logo.react.svg"
-  onClick={() => console.log("Button 1 clicked")}
-/>`,
-      },
     },
   },
 };
@@ -69,59 +31,61 @@ const Template = (args) => {
   const disabled = args.disabled;
   const { onClick } = args;
   return (
-    <DropDown directionX={direction} manualY="1%" open={true}>
-      <DropDownItem
-        isHeader={isHeader}
-        label={isHeader ? "Category" : ""}
-        noHover={noHover}
-      />
-      <DropDownItem
-        icon={"WindowsMsnIcon"}
-        label="Button 1"
-        disabled={disabled}
-        onClick={() => onClick("Button 1 clicked")}
-        noHover={noHover}
-      />
-      <DropDownItem
-        icon={"PlaneIcon"}
-        label="Button 2"
-        onClick={() => onClick("Button 2 clicked")}
-        noHover={noHover}
-      />
-      <DropDownItem
-        disabled
-        icon={"static/images/copy.react.svg"}
-        label={args.label || "Button 3"}
-        disabled={disabled}
-        onClick={() => onClick("Button 3 clicked")}
-        noHover={noHover}
-      />
-      <DropDownItem
-        icon={"ActionsDocumentsIcon"}
-        label="Button 4"
-        onClick={() => onClick("Button 4 clicked")}
-        noHover={noHover}
-      />
-      <DropDownItem isSeparator={isSeparator} />
-      <DropDownItem
-        isHeader={isHeader}
-        label={isHeader ? "Category" : ""}
-        noHover={noHover}
-      />
-      <DropDownItem
-        icon={"static/images/nav.logo.react.svg"}
-        label="Button 5"
-        onClick={() => onClick("Button 5 clicked")}
-        noHover={noHover}
-      />
-      <DropDownItem
-        disabled
-        icon={"static/images/nav.logo.react.svg"}
-        label="Button 6"
-        onClick={() => console.log("Button 6 clicked")}
-        noHover={noHover}
-      />
-    </DropDown>
+    <div style={{ height: "220px", position: "relative" }}>
+      <DropDown directionX={direction} manualY="1%" open={true}>
+        <DropDownItem
+          isHeader={isHeader}
+          label={isHeader ? "Category" : ""}
+          noHover={noHover}
+        />
+        <DropDownItem
+          icon={"/static/images/question.react.svg"}
+          label="Button 1"
+          disabled={disabled}
+          onClick={() => onClick("Button 1 clicked")}
+          noHover={noHover}
+        />
+        <DropDownItem
+          icon={"/static/images/eye.react.svg"}
+          label="Button 2"
+          onClick={() => onClick("Button 2 clicked")}
+          noHover={noHover}
+        />
+        <DropDownItem
+          disabled
+          icon={"/static/images/copy.react.svg"}
+          label={args.label || "Button 3"}
+          disabled={disabled}
+          onClick={() => onClick("Button 3 clicked")}
+          noHover={noHover}
+        />
+        <DropDownItem
+          icon={"/static/images/chat.react.svg"}
+          label="Button 4"
+          onClick={() => onClick("Button 4 clicked")}
+          noHover={noHover}
+        />
+        <DropDownItem isSeparator={isSeparator} />
+        <DropDownItem
+          isHeader={isHeader}
+          label={isHeader ? "Category" : ""}
+          noHover={noHover}
+        />
+        <DropDownItem
+          icon={"/static/images/nav.logo.react.svg"}
+          label="Button 5"
+          onClick={() => onClick("Button 5 clicked")}
+          noHover={noHover}
+        />
+        <DropDownItem
+          disabled
+          icon={"static/images/nav.logo.react.svg"}
+          label="Button 6"
+          onClick={() => console.log("Button 6 clicked")}
+          noHover={noHover}
+        />
+      </DropDown>
+    </div>
   );
 };
 export const Default = Template.bind({});
diff --git a/packages/asc-web-components/drop-down-item/index.js b/packages/asc-web-components/drop-down-item/index.js
index c96aff1b31..a28bd48104 100644
--- a/packages/asc-web-components/drop-down-item/index.js
+++ b/packages/asc-web-components/drop-down-item/index.js
@@ -38,18 +38,31 @@ const DropDownItem = (props) => {
 };
 
 DropDownItem.propTypes = {
+  /** Tells when the dropdown item should display like separator */
   isSeparator: PropTypes.bool,
+  /** Tells when the dropdown item should display like header */
   isHeader: PropTypes.bool,
+  /** Accepts tab-index */
   tabIndex: PropTypes.number,
+  /** Dropdown item text */
   label: PropTypes.string,
+  /** Tells when the dropdown item should display like disabled */
   disabled: PropTypes.bool,
+  /** Dropdown item icon */
   icon: PropTypes.string,
+  /** Disable default style hover effect */
   noHover: PropTypes.bool,
+  /** What the dropdown item will trigger when clicked */
   onClick: PropTypes.func,
+  /** Children elements */
   children: PropTypes.any,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Accepts css text-overflow */
   textOverflow: PropTypes.bool,
 };
 
diff --git a/packages/asc-web-components/drop-down/drop-down.stories.js b/packages/asc-web-components/drop-down/drop-down.stories.js
index f63aa7a82a..b9090709be 100644
--- a/packages/asc-web-components/drop-down/drop-down.stories.js
+++ b/packages/asc-web-components/drop-down/drop-down.stories.js
@@ -8,47 +8,7 @@ export default {
   title: "Components/DropDown",
   component: DropDown,
   subcomponents: { DropDownItem, GroupButton },
-  decorators: [
-    (Story) => (
-      <div style={{ height: "200px", position: "relative" }}>
-        <Story />
-      </div>
-    ),
-  ],
   argTypes: {
-    open: { description: "Tells when the dropdown should be opened" },
-    className: { description: " Accepts class" },
-    clickOutsideAction: {
-      description:
-        "Required for determining a click outside DropDown with the withBackdrop parameter",
-    },
-    directionX: {
-      description: "Sets the opening direction relative to the parent",
-    },
-    directionY: {
-      description: "Sets the opening direction relative to the parent",
-    },
-    id: { description: "Accepts id " },
-    manualWidth: {
-      description:
-        "Required if you need to specify the exact width of the component, for example 100%",
-    },
-    manualX: {
-      description:
-        "Required if you need to specify the exact distance from the parent component",
-    },
-    manualY: {
-      description:
-        "Required if you need to specify the exact distance from the parent component",
-    },
-    maxHeight: { description: "Required if the scrollbar is displayed" },
-    style: { description: "Accepts css style" },
-    withBackdrop: { description: "Used to display backdrop" },
-    showDisabledItems: { description: "Display disabled items or not" },
-    children: { table: { disable: true } },
-    columnCount: { table: { disable: true } },
-    disableOnClickOutside: { table: { disable: true } },
-    enableOnClickOutside: { table: { disable: true } },
     onClick: { action: "onClickItem", table: { disable: true } },
   },
   parameters: {
@@ -74,66 +34,70 @@ const Template = (args) => {
   };
 
   return (
-    <DropDown
-      {...args}
-      open={isOpen}
-      clickOutsideAction={clickOutsideAction}
-      style={{ top: 0, left: 0 }}
-      onClick={() => {}}
-    >
-      <DropDownItem isHeader label="Category 1" />
+    <div style={{ height: "200px", position: "relative" }}>
+      <DropDown
+        {...args}
+        open={isOpen}
+        clickOutsideAction={clickOutsideAction}
+        style={{ top: 0, left: 0 }}
+        onClick={() => {}}
+      >
+        <DropDownItem isHeader label="Category 1" />
 
-      <DropDownItem
-        label="Button 1"
-        onClick={() => args.onClick("Button 1 clicked")}
-      />
-      <DropDownItem
-        label="Button 2"
-        onClick={() => args.onClick("Button 2 clicked")}
-      />
-      <DropDownItem
-        label="Button 3"
-        onClick={() => args.onClick("Button 3 clicked")}
-      />
-      <DropDownItem
-        label="Button 4"
-        onClick={() => args.onClick("Button 4 clicked")}
-        disabled={true}
-      />
-      <DropDownItem isSeparator />
-      <DropDownItem
-        label="Button 5"
-        onClick={() => args.onClick("Button 5 clicked")}
-      />
-      <DropDownItem
-        label="Button 6"
-        onClick={() => args.onClick("Button 6 clicked")}
-      />
-    </DropDown>
+        <DropDownItem
+          label="Button 1"
+          onClick={() => args.onClick("Button 1 clicked")}
+        />
+        <DropDownItem
+          label="Button 2"
+          onClick={() => args.onClick("Button 2 clicked")}
+        />
+        <DropDownItem
+          label="Button 3"
+          onClick={() => args.onClick("Button 3 clicked")}
+        />
+        <DropDownItem
+          label="Button 4"
+          onClick={() => args.onClick("Button 4 clicked")}
+          disabled={true}
+        />
+        <DropDownItem isSeparator />
+        <DropDownItem
+          label="Button 5"
+          onClick={() => args.onClick("Button 5 clicked")}
+        />
+        <DropDownItem
+          label="Button 6"
+          onClick={() => args.onClick("Button 6 clicked")}
+        />
+      </DropDown>
+    </div>
   );
 };
 
 const WithButtonTemplate = (args) => {
   return (
-    <GroupButton
-      label="Dropdown demo"
-      style={{ top: 0, left: 0 }}
-      isDropdown={true}
-      opened={args.open}
-    >
-      <DropDownItem
-        label="Button 1"
-        onClick={() => args.onClick("Button 2 clicked")}
-      />
-      <DropDownItem
-        label="Button 2"
-        onClick={() => args.onClick("Button 2 clicked")}
-      />
-      <DropDownItem
-        label="Button 3"
-        onClick={() => args.onClick("Button 3 clicked")}
-      />
-    </GroupButton>
+    <div style={{ height: "200px", position: "relative" }}>
+      <GroupButton
+        label="Dropdown demo"
+        style={{ top: 0, left: 0 }}
+        isDropdown={true}
+        opened={args.open}
+      >
+        <DropDownItem
+          label="Button 1"
+          onClick={() => args.onClick("Button 2 clicked")}
+        />
+        <DropDownItem
+          label="Button 2"
+          onClick={() => args.onClick("Button 2 clicked")}
+        />
+        <DropDownItem
+          label="Button 3"
+          onClick={() => args.onClick("Button 3 clicked")}
+        />
+      </GroupButton>
+    </div>
   );
 };
 
@@ -142,68 +106,7 @@ export const Default = Template.bind({});
 export const WithButton = WithButtonTemplate.bind({});
 
 Default.args = { open: true };
-Default.parameters = {
-  docs: {
-    source: {
-      code: `import DropDown from "@appserver/components/drop-down";
-import DropDownItem from "@appserver/components/drop-down-item";
-
-<DropDown {...props}>
-  <DropDownItem isHeader label="Category 1" />
-  <DropDownItem
-    label="Button 1"
-    onClick={() => action("Button 1 clicked")}
-  />
-  <DropDownItem
-    label="Button 2"
-    onClick={() => action("Button 2 clicked")}
-  />
-  <DropDownItem
-    label="Button 3"
-    onClick={() => action("Button 3 clicked")}
-  />
-  <DropDownItem
-    label="Button 4"
-    onClick={() => action("Button 4 clicked")}
-    disabled={true}
-  />
-  <DropDownItem isSeparator />
-  <DropDownItem
-    label="Button 5"
-    onClick={() => action("Button 5 clicked")}
-  />
-  <DropDownItem
-    label="Button 6"
-    onClick={() => action("Button 6 clicked")}
-  />
-</DropDown>`,
-    },
-  },
-};
 
 WithButton.args = {
   open: true,
 };
-WithButton.parameters = {
-  docs: {
-    source: {
-      code: `import GroupButton from "@appserver/components/group-button";
-import DropDownItem from "@appserver/components/drop-down-item";
-
-<GroupButton label="Dropdown demo" isDropdown={true}>
-  <DropDownItem
-    label="Button 1"
-    onClick={() => console.log("Button 1 clicked")}
-  />
-  <DropDownItem
-    label="Button 2"
-    onClick={() => console.log("Button 2 clicked")}
-  />
-  <DropDownItem
-    label="Button 3"
-    onClick={() => console.log("Button 3 clicked")}
-  />
-</GroupButton>`,
-    },
-  },
-};
diff --git a/packages/asc-web-components/drop-down/index.js b/packages/asc-web-components/drop-down/index.js
index 1e613a876e..7c6ff2af5f 100644
--- a/packages/asc-web-components/drop-down/index.js
+++ b/packages/asc-web-components/drop-down/index.js
@@ -198,24 +198,42 @@ class DropDownContainer extends React.Component {
   }
 }
 
-DropDownContainer.propTypes = {
-  children: PropTypes.any,
-  className: PropTypes.string,
-  clickOutsideAction: PropTypes.func,
-  directionX: PropTypes.oneOf(["left", "right"]), //TODO: make more informative
-  directionY: PropTypes.oneOf(["bottom", "top"]),
+DropDown.propTypes = {
   disableOnClickOutside: PropTypes.func,
   enableOnClickOutside: PropTypes.func,
+};
+
+DropDownContainer.propTypes = {
+  /** Children elements */
+  children: PropTypes.any,
+  /** Accepts class */
+  className: PropTypes.string,
+  /** Required for determining a click outside DropDown with the withBackdrop parameter */
+  clickOutsideAction: PropTypes.func,
+  /** Sets the opening direction relative to the parent */
+  directionX: PropTypes.oneOf(["left", "right"]), //TODO: make more informative
+  /** Sets the opening direction relative to the parent */
+  directionY: PropTypes.oneOf(["bottom", "top"]),
+  /** Accepts id */
   id: PropTypes.string,
+  /** Required if you need to specify the exact width of the component, for example 100% */
   manualWidth: PropTypes.string,
+  /** Required if you need to specify the exact distance from the parent component */
   manualX: PropTypes.string,
+  /** Required if you need to specify the exact distance from the parent component */
   manualY: PropTypes.string,
+  /** Required if the scrollbar is displayed */
   maxHeight: PropTypes.number,
+  /** Tells when the dropdown should be opened */
   open: PropTypes.bool,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Used to display backdrop */
   withBackdrop: PropTypes.bool,
+  /** Count of columns */
   columnCount: PropTypes.number,
-  showDisabledItems: PropTypes.bool
+  /** Display disabled items or not */
+  showDisabledItems: PropTypes.bool,
 };
 
 DropDownContainer.defaultProps = {
diff --git a/packages/asc-web-components/empty-screen-container/empty-screen-container.stories.js b/packages/asc-web-components/empty-screen-container/empty-screen-container.stories.js
index ec4e33fcb8..c2fb707a17 100644
--- a/packages/asc-web-components/empty-screen-container/empty-screen-container.stories.js
+++ b/packages/asc-web-components/empty-screen-container/empty-screen-container.stories.js
@@ -6,39 +6,13 @@ import CrossIcon from "../../../public/images/cross.react.svg";
 export default {
   title: "Components/EmptyScreenContainer",
   component: EmptyScreenContainer,
-  argTypes: { onClick: { action: "Reset filter clicked" } },
+  argTypes: {
+    onClick: { action: "Reset filter clicked", table: { disable: true } },
+  },
   parameters: {
     docs: {
       description: {
-        component: `Used to display empty screen page
-
-### Properties
-
-| Props             |      Type      | Required | Values | Default | Description                             |
-| ----------------- | :------------: | :------: | :----: | :-----: | --------------------------------------- |
-| buttons         |   element    |    -     |   -    |    -    | Content of EmptyContentButtonsContainer |
-| className       |    string    |    -     |   -    |    -    | Accepts class                           |
-| descriptionText |    string    |    -     |   -    |    -    | Description text                        |
-| headerText      |    string    |    -     |   -    |    -    | Header text                             |
-| subheadingText  |    string    |    -     |   -    |    -    | Subheading text                         |
-| id              |    string    |    -     |   -    |    -    | Accepts id                              |
-| imageAlt        |    string    |    -     |   -    |    -    | Alternative image text                  |
-| imageSrc        |    string    |    -     |   -    |    -    | Image url source                        |
-| style           | obj, array |    -     |   -    |    -    | Accepts css style                       |
-        `,
-      },
-      source: {
-        code: `
-        import EmptyScreenContainer from "@appserver/components/empty-screen-container";
-
-<EmptyScreenContainer
-  imageSrc="empty_screen_filter.png"
-  imageAlt="Empty Screen Filter image"
-  headerText="No results matching your search could be found"
-  subheading="No files to be displayed in this section"
-  descriptionText="No results matching your search could be found"
-  buttons={<a href="/">Go to home</a>}
-/>`,
+        component: "Used to display empty screen page",
       },
     },
   },
@@ -63,7 +37,7 @@ const Template = (args) => {
 export const Default = Template.bind({});
 
 Default.args = {
-  imageSrc: "empty_screen_filter.png",
+  imageSrc: "/static/images/empty_screen_filter.png",
   imageAlt: "Empty Screen Filter image",
   headerText: "No results matching your search could be found",
   subheadingText: "No files to be displayed in this section",
diff --git a/packages/asc-web-components/empty-screen-container/index.js b/packages/asc-web-components/empty-screen-container/index.js
index e5e052cf6e..898b8f95e5 100644
--- a/packages/asc-web-components/empty-screen-container/index.js
+++ b/packages/asc-web-components/empty-screen-container/index.js
@@ -48,14 +48,23 @@ const EmptyScreenContainer = (props) => {
 };
 
 EmptyScreenContainer.propTypes = {
+  /** Image url source */
   imageSrc: PropTypes.string,
+  /** Alternative image text */
   imageAlt: PropTypes.string,
+  /** Header text */
   headerText: PropTypes.string,
+  /** Subheading text */
   subheadingText: PropTypes.string,
+  /** Description text */
   descriptionText: PropTypes.oneOfType([PropTypes.object, PropTypes.string]),
+  /** Content of EmptyContentButtonsContainer */
   buttons: PropTypes.any,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };
 
diff --git a/packages/asc-web-components/field-container/field-container.stories.js b/packages/asc-web-components/field-container/field-container.stories.js
index a3612c1373..b9a3093319 100644
--- a/packages/asc-web-components/field-container/field-container.stories.js
+++ b/packages/asc-web-components/field-container/field-container.stories.js
@@ -11,34 +11,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: `Responsive form field container
-        
-### Properties
-
-| Props                     |       Type        | Required | Values |  Default  | Description                                      |
-| ------------------------- | :---------------: | :------: | :----: | :-------: | ------------------------------------------------ |
-| className               |     string      |    -     |   -    |     -     | Accepts class                                    |
-| errorColor              |     string      |    -     |   -    | ![#C96C27](https://placehold.it/15/C96C27/000000?text=+) #C96C27 | Error text color                                 |
-| errorMessageWidth       |     string      |    -     |   -    |  320px  | Error text width                                 |
-| errorMessage            |     string      |    -     |   -    |     -     | Error message text                               |
-| hasError                |      bool       |    -     |   -    |  false  | Indicates that the field is incorrect            |
-| helpButtonHeaderContent |     string      |    -     |   -    |     -     | Tooltip header content (tooltip opened in aside) |
-| id                      |     string      |    -     |   -    |     -     | Accepts id                                       |
-| isRequired              |      bool       |    -     |   -    |  false  | Indicates that the field is required to fill     |
-| isVertical              |      bool       |    -     |   -    |  false  | Vertical or horizontal alignment                 |
-| labelText               |     string      |    -     |   -    |     -     | Field label text                                 |
-| labelVisible            |      bool       |    -     |   -    |  true   | Sets visibility of field label section           |
-| maxLabelWidth           |     string      |    -     |   -    |  110px  | Max label width in horizontal alignment          |
-| style                   |  obj, array   |    -     |   -    |     -     | Accepts css style                                |
-| tooltipContent          | object, string |    -     |   -    |     -     | Tooltip content                                  |
-`,
-      },
-      source: {
-        code: `import FieldContainer from "@appserver/components/field-container";
-
-<FieldContainer labelText="Name:">
-  <TextInput value="" onChange={(e) => console.log(e.target.value)} />
-</FieldContainer>`,
+        component: "Responsive form field container",
       },
     },
   },
@@ -76,73 +49,3 @@ Default.args = {
   errorColor: "#C96C27",
   errorMessageWidth: "293px",
 };
-Default.parameters = {
-  decorators: [
-    (Story) => (
-      <div style={{ marginTop: 100, marginLeft: 50 }}>
-        <Story />
-      </div>
-    ),
-  ],
-};
-/*
-import { storiesOf } from "@storybook/react";
-import { action } from "@storybook/addon-actions";
-import { StringValue } from "react-values";
-import { text, boolean, withKnobs, color } from "@storybook/addon-knobs/react";
-import FieldContainer from ".";
-import TextInput from "../text-input";
-import Section from "../../../.storybook/decorators/section";
-import withReadme from "storybook-readme/with-readme";
-import Readme from "./README.md";
-
-storiesOf("Components|FieldContainer", module)
-  .addDecorator(withKnobs)
-  .addDecorator(withReadme(Readme))
-  .add("base", () => (
-    <StringValue
-      onChange={(e) => {
-        action("onChange")(e);
-      }}
-    >
-      {({ value, set }) => (
-        <Section>
-          <div style={{ marginTop: 100, marginLeft: 50 }}>
-            <FieldContainer
-              isVertical={boolean("isVertical", false)}
-              isRequired={boolean("isRequired", false)}
-              hasError={boolean("hasError", false)}
-              labelVisible={boolean("labelVisible", true)}
-              labelText={text("labelText", "Name:")}
-              maxLabelWidth={text("maxLabelWidth", "110px")}
-              tooltipContent={text(
-                "tooltipContent",
-                "Paste you tooltip content here"
-              )}
-              helpButtonHeaderContent={text(
-                "helpButtonHeaderContent",
-                "Tooltip header"
-              )}
-              place="top"
-              errorMessage={text(
-                "errorMessage",
-                "Error text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit"
-              )}
-              errorColor={color("errorColor", "#C96C27")}
-              errorMessageWidth={text("errorMessageWidth", "293px")}
-            >
-              <TextInput
-                value={value}
-                hasError={boolean("hasError", false)}
-                className="field-input"
-                onChange={(e) => {
-                  set(e.target.value);
-                }}
-              />
-            </FieldContainer>
-          </div>
-        </Section>
-      )}
-    </StringValue>
-  ));
-*/
diff --git a/packages/asc-web-components/field-container/index.js b/packages/asc-web-components/field-container/index.js
index 74c7daf401..8343047820 100644
--- a/packages/asc-web-components/field-container/index.js
+++ b/packages/asc-web-components/field-container/index.js
@@ -74,25 +74,40 @@ class FieldContainer extends React.Component {
 FieldContainer.displayName = "FieldContainer";
 
 FieldContainer.propTypes = {
+  /** Vertical or horizontal alignment */
   isVertical: PropTypes.bool,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Indicates that the field is required to fill */
   isRequired: PropTypes.bool,
+  /** Indicates that the field is incorrect */
   hasError: PropTypes.bool,
+  /** Sets visibility of field label section */
   labelVisible: PropTypes.bool,
+  /** Field label text */
   labelText: PropTypes.string,
   icon: PropTypes.string,
+  /** Children elements */
   children: PropTypes.oneOfType([
     PropTypes.arrayOf(PropTypes.node),
     PropTypes.node,
   ]),
+  /** Tooltip content */
   tooltipContent: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
   place: PropTypes.string,
+  /** Tooltip header content (tooltip opened in aside) */
   helpButtonHeaderContent: PropTypes.string,
+  /** Max label width in horizontal alignment */
   maxLabelWidth: PropTypes.string,
+  /** Error message text */
   errorMessage: PropTypes.string,
+  /** Error text color */
   errorColor: PropTypes.string,
+  /** Error text width */
   errorMessageWidth: PropTypes.string,
+  /** Accepts id  */
   id: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };
 
diff --git a/packages/asc-web-components/file-input/file-input.stories.js b/packages/asc-web-components/file-input/file-input.stories.js
index 8c8e373ce2..39b860b46a 100644
--- a/packages/asc-web-components/file-input/file-input.stories.js
+++ b/packages/asc-web-components/file-input/file-input.stories.js
@@ -10,41 +10,7 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: `File entry field
-
-### Properties
-
-| Props         |      Type      | Required |                  Values                  | Default | Description                                                                        |
-| ------------- | :------------: | :------: | :--------------------------------------: | :-----: | ---------------------------------------------------------------------------------- |
-| className   |    string    |    -     |                    -                     |    -    | Accepts class                                                                      |
-| hasError    |     bool     |    -     |                    -                     | false | Indicates the input field has an error                                             |
-| hasWarning  |     bool     |    -     |                    -                     | false | Indicates the input field has a warning                                            |
-| id          |    string    |    -     |                    -                     |    -    | Used as HTML 'id' property                                                         |
-| isDisabled  |     bool     |    -     |                    -                     | false | Indicates that the field cannot be used (e.g not authorised, or changes not saved) |
-| name        |    string    |    -     |                    -                     |    -    | Used as HTML     'name' property                                                       |
-| onInput     |     func     |    -     |                    -                     |    -    | Called when a file is selected                                                     |
-| placeholder |    string    |    -     |                    -                     |    -    | Placeholder text for the input                                                     |
-| scale       |     bool     |    -     |                    -                     | false | Indicates the input field has scale                                                |
-| size        |    string    |    -     | base, middle, big, huge, large | base  | Supported size of the input fields.                                                |
-| style       | obj, array |    -     |                    -                     |    -    | Accepts css style                                                                  |
-| accept      |    string    |    -     |                    -                     |    -    | Specifies files visible for upload                                                 |
-
-        `,
-      },
-      source: {
-        code: `import FileInput from "@appserver/components/file-input";
-<FileInput
-  placeholder="Input file"
-  accept=".doc, .docx"
-  onInput={(file) => {
-    console.log(
-      file,
-      "name: ", file.name},
-      "lastModified: ", file.lastModifiedDate},
-      "size: ", file.size}
-    );
-  }}
-/>`,
+        component: "File entry field",
       },
     },
   },
diff --git a/packages/asc-web-components/file-input/index.js b/packages/asc-web-components/file-input/index.js
index 35bc71301a..fac2b56f12 100644
--- a/packages/asc-web-components/file-input/index.js
+++ b/packages/asc-web-components/file-input/index.js
@@ -4,7 +4,7 @@ import equal from "fast-deep-equal/react";
 
 import IconButton from "../icon-button";
 import TextInput from "../text-input";
-import StyledFileInput from "./styled-file-input"
+import StyledFileInput from "./styled-file-input";
 
 class FileInput extends Component {
   constructor(props) {
@@ -125,7 +125,7 @@ class FileInput extends Component {
         <div className="icon" onClick={this.onIconFileClick}>
           <IconButton
             className="icon-button"
-            iconName={"CatalogFolderIcon"}
+            iconName={"/static/images/catalog.folder.react.svg"}
             color={"#A3A9AE"}
             size={iconSize}
             isDisabled={isDisabled}
@@ -137,17 +137,29 @@ class FileInput extends Component {
 }
 
 FileInput.propTypes = {
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Placeholder text for the input */
   placeholder: PropTypes.string,
+  /** Supported size of the input fields */
   size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
+  /** Indicates the input field has scale */
   scale: PropTypes.bool,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Indicates the input field has an error */
   hasError: PropTypes.bool,
+  /** Indicates the input field has a warning */
   hasWarning: PropTypes.bool,
+  /** Used as HTML `id` property */
   id: PropTypes.string,
+  /** Indicates that the field cannot be used (e.g not authorised, or changes not saved) */
   isDisabled: PropTypes.bool,
+  /** Used as HTML `name` property */
   name: PropTypes.string,
+  /** Called when a file is selected */
   onInput: PropTypes.func,
+  /**Specifies files visible for upload */
   accept: PropTypes.string,
 };
 
diff --git a/packages/asc-web-components/grid/grid.js b/packages/asc-web-components/grid/grid.js
index efdcf37003..74ce2a636a 100644
--- a/packages/asc-web-components/grid/grid.js
+++ b/packages/asc-web-components/grid/grid.js
@@ -9,27 +9,53 @@ const Grid = forwardRef(({ tag, as, ...rest }, ref) => {
 
 Grid.propTypes = {
   as: PropTypes.string,
+  /** sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis */
   alignContent: PropTypes.string,
+  /** sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis.
+   * In Grid Layout, it controls the alignment of items on the Block Axis within their grid area. */
   alignItems: PropTypes.string,
+  /** overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area.
+   * In Flexbox, it aligns the item on the cross axis. */
   alignSelf: PropTypes.string,
+  /** 	specifies named grid areas. Takes value as array of string arrays that specify named grid areas.
+   * Or objects array, that contains names and coordinates of areas. */
   areasProp: PropTypes.array,
+  /** defines the sizing of the grid columns. Specifying a single string will repeat several columns of this size.
+   * Specifying an object allows you to specify the number of repetitions and the size of the column.
+   * Or you can specify an array with column sizes. The column size can be specified as an array of minimum and maximum widths. */
   columnsProp: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.array,
     PropTypes.object,
   ]),
+  /** is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and
+   * location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement,
+   *  thereby specifying the edges of its grid area. */
   gridArea: PropTypes.string,
+  /** sets the size of the gap (gutter) between an element's columns. */
   gridColumnGap: PropTypes.string,
+  /** sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap. */
   gridGap: PropTypes.string,
+  /** sets the size of the gap (gutter) between an element's grid rows. */
   gridRowGap: PropTypes.string,
+  /** defines the height of the border of the element area. */
   heightProp: PropTypes.string,
+  /** defines how the browser distributes space between and around content items along the main-axis of a flex container,
+   * and the inline axis of a grid container. */
   justifyContent: PropTypes.string,
+  /** defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. */
   justifyItems: PropTypes.string,
+  /** sets the way a box is justified inside its alignment container along the appropriate axis. */
   justifySelf: PropTypes.string,
+  /** sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left */
   marginProp: PropTypes.string,
+  /** sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left */
   paddingProp: PropTypes.string,
+  /** defines the sizing of the grid rows. Specifying a single string will repeat several rows of this size. Or you can specify an array with rows sizes.
+   * The row size can be specified as an array of minimum and maximum heights. */
   rowsProp: PropTypes.oneOfType([PropTypes.string, PropTypes.array]),
   tag: PropTypes.string,
+  /** defines the width of the border of the element area. */
   widthProp: PropTypes.string,
 };
 
diff --git a/packages/asc-web-components/grid/grid.stories.js b/packages/asc-web-components/grid/grid.stories.js
index 660e3e069d..364f789f07 100644
--- a/packages/asc-web-components/grid/grid.stories.js
+++ b/packages/asc-web-components/grid/grid.stories.js
@@ -12,46 +12,8 @@ export default {
   parameters: {
     docs: {
       description: {
-        component: `A container that lays out its contents in a 2-dimensional grid system. Use Box components to define rows and columns.
-        
-### Properties
-
-|      Props       |           Type            | Required |                                                                                           Values                                                                                            | Default | Description                                                                                                                                                                                                                                                                                                                              |
-| :--------------: | :-----------------------: | :------: | :-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-|  alignContent  |         string          |    -     |                                                                                              -                                                                                              |    -    | sets the distribution of space between and around content items along a flexbox's cross-axis or a grid's block axis                                                                                                                                                                                                                      |
-|   alignItems   |         string          |    -     |                                                                                              -                                                                                              |    -    | sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items on the Cross Axis. In Grid Layout, it controls the alignment of items on the Block Axis within their grid area.                                                                                                              |
-|   alignSelf    |         string          |    -     |                                                                                              -                                                                                              |    -    | overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis.                                                                                                                                                                                   |
-|   areasProp    |          array          |    -     | [["header","header"],["navbar","main"]], [{ name: "header", start: [0, 0], end: [1, 0] }, { name: "navbar", start: [0, 1], end: [0, 1] }, { name: "main", start: [1, 1], end: [1, 1] }]     |    -    | specifies named grid areas. Takes value as array of string arrays that specify named grid areas. Or objects array, that contains names and coordinates of areas.                                                                                                                                                                         |
-|  columnsProp   | string,array,object |    -     |                                                        "25%", ["200px", ["100px","1fr"], "auto"], { count: 3, size: "100px" }                                                                   |    -    | defines the sizing of the grid columns. Specifying a single string will repeat several columns of this size. Specifying an object allows you to specify the number of repetitions and the size of the column. Or you can specify an array with column sizes. The column size can be specified as an array of minimum and maximum widths. |
-|    gridArea    |         string          |    -     |                                                                                              -                                                                                              |    -    | is a shorthand property for grid-row-start, grid-column-start, grid-row-end and grid-column-end, specifying a grid item’s size and location within the grid by contributing a line, a span, or nothing (automatic) to its grid placement, thereby specifying the edges of its grid area.                                                 |
-| gridColumnGap  |         string          |    -     |                                                                                              -                                                                                              |    -    | sets the size of the gap (gutter) between an element's columns.                                                                                                                                                                                                                                                                          |
-|    gridGap     |         string          |    -     |                                                                                              -                                                                                              |    -    | sets the gaps (gutters) between rows and columns. It is a shorthand for row-gap and column-gap.                                                                                                                                                                                                                                          |
-|   gridRowGap   |         string          |    -     |                                                                                              -                                                                                              |    -    | sets the size of the gap (gutter) between an element's grid rows.                                                                                                                                                                                                                                                                        |
-|   heightProp   |         string          |    -     |                                                                                              -                                                                                              | 100%    | defines the height of the border of the element area.                                                                                                                                                                                                                                                                                    |
-| justifyContent |         string          |    -     |                                                                                              -                                                                                              |    -    | defines how the browser distributes space between and around content items along the main-axis of a flex container, and the inline axis of a grid container.                                                                                                                                                                             |
-|  justifyItems  |         string          |    -     |                                                                                              -                                                                                              |    -    | defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis.                                                                                                                                                                                              |
-|  justifySelf   |         string          |    -     |                                                                                              -                                                                                              |    -    | sets the way a box is justified inside its alignment container along the appropriate axis.                                                                                                                                                                                                                                               |
-|   marginProp   |         string          |    -     |                                                                                              -                                                                                              |    -    | sets the margin area on all four sides of an element. It is a shorthand for margin-top, margin-right, margin-bottom, and margin-left.                                                                                                                                                                                                    |
-|  paddingProp   |         string          |    -     |                                                                                              -                                                                                              |    -    | sets the padding area on all four sides of an element. It is a shorthand for padding-top, padding-right, padding-bottom, and padding-left                                                                                                                                                                                                |
-|    rowsProp    |     string,array      |    -     |                                                                       "50px", ["100px", ["100px","1fr"], "auto"]                                                                              |    -    | defines the sizing of the grid rows. Specifying a single string will repeat several rows of this size. Or you can specify an array with rows sizes. The row size can be specified as an array of minimum and maximum heights.                                                                                                            |
-|   widthProp    |         string          |    -     |                                                                                              -                                                                                              | 100%   | defines the width of the border of the element area.                                                                                                                                                                                                                                                                                     |
-
-        `,
-      },
-      source: {
-        code: `import Grid from "@appserver/components/grid";
-
-<Grid {...args} {...gridProps}>
-  <Box {...boxProps} backgroundProp="#F4991A">
-    <Text>200px</Text>
-  </Box>
-  <Box {...boxProps} backgroundProp="#F2EAD3">
-    <Text>minmax(100px,1fr)</Text>
-  </Box>
-  <Box {...boxProps} backgroundProp="#F9F5F0">
-    <Text>auto</Text>
-  </Box>
-</Grid>`,
+        component:
+          "A container that lays out its contents in a 2-dimensional grid system. Use Box components to define rows and columns",
       },
     },
   },
@@ -223,135 +185,3 @@ Default.args = {
 export const Columns = TemplateColumns.bind({});
 export const Rows = TemplateRows.bind({});
 export const Layout = TemplateLayout.bind({});
-/*
-import { storiesOf } from "@storybook/react";
-import withReadme from "storybook-readme/with-readme";
-import Readme from "./README.md";
-import Grid from ".";
-import Box from "../box";
-import Text from "../text";
-
-const gridProps = {
-  marginProp: "0 0 20px 0",
-};
-
-const boxProps = {
-  paddingProp: "10px",
-  displayProp: "flex",
-  alignItems: "center",
-  justifyContent: "center",
-};
-
-storiesOf("Components|Grid", module)
-  .addDecorator(withReadme(Readme))
-  .add("Columns", () => (
-    <>
-      <Grid {...gridProps} columnsProp={["200px", ["100px", "1fr"], "auto"]}>
-        <Box {...boxProps} backgroundProp="#F4991A">
-          <Text>200px</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F2EAD3">
-          <Text>minmax(100px,1fr)</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F9F5F0">
-          <Text>auto</Text>
-        </Box>
-      </Grid>
-
-      <Grid {...gridProps} columnsProp="25%">
-        <Box {...boxProps} backgroundProp="#F4991A">
-          <Text>25%</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F2EAD3">
-          <Text>25%</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F9F5F0">
-          <Text>25%</Text>
-        </Box>
-      </Grid>
-
-      <Grid {...gridProps} columnsProp={{ count: 3, size: "100px" }}>
-        <Box {...boxProps} backgroundProp="#F4991A">
-          <Text>100px</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F2EAD3">
-          <Text>100px</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F9F5F0">
-          <Text>100px</Text>
-        </Box>
-      </Grid>
-
-      <Grid {...gridProps} columnsProp={{ count: 3, size: ["100px", "1fr"] }}>
-        <Box {...boxProps} backgroundProp="#F4991A">
-          <Text>minmax(100px,1fr)</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F2EAD3">
-          <Text>minmax(100px,1fr)</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F9F5F0">
-          <Text>minmax(100px,1fr)</Text>
-        </Box>
-      </Grid>
-    </>
-  ))
-  .add("Rows", () => (
-    <>
-      <Grid {...gridProps} rowsProp={["100px", ["100px", "1fr"], "auto"]}>
-        <Box {...boxProps} backgroundProp="#F4991A">
-          <Text>100px</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F2EAD3">
-          <Text>minmax(100px,1fr)</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F9F5F0">
-          <Text>auto</Text>
-        </Box>
-      </Grid>
-
-      <Grid {...gridProps} rowsProp="50px">
-        <Box {...boxProps} backgroundProp="#F4991A">
-          <Text>50px</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F2EAD3">
-          <Text>50px</Text>
-        </Box>
-        <Box {...boxProps} backgroundProp="#F9F5F0">
-          <Text>50px</Text>
-        </Box>
-      </Grid>
-    </>
-  ))
-  .add("Layout", () => (
-    <Grid
-      widthProp="100vw"
-      heightProp="100vh"
-      gridGap="10px"
-      rowsProp={["auto", "1fr", "auto"]}
-      columnsProp={[["100px", "1fr"], "3fr", ["100px", "1fr"]]}
-      areasProp={[
-        { name: "header", start: [0, 0], end: [2, 0] },
-        { name: "navbar", start: [0, 1], end: [0, 1] },
-        { name: "main", start: [1, 1], end: [1, 1] },
-        { name: "sidebar", start: [2, 1], end: [2, 1] },
-        { name: "footer", start: [0, 2], end: [2, 2] },
-      ]}
-    >
-      <Box {...boxProps} gridArea="header" backgroundProp="#F4991A">
-        <Text>header</Text>
-      </Box>
-      <Box {...boxProps} gridArea="navbar" backgroundProp="#F2EAD3">
-        <Text>navbar</Text>
-      </Box>
-      <Box {...boxProps} gridArea="main" backgroundProp="#F9F5F0">
-        <Text>main</Text>
-      </Box>
-      <Box {...boxProps} gridArea="sidebar" backgroundProp="#F2EAD3">
-        <Text>sidebar</Text>
-      </Box>
-      <Box {...boxProps} gridArea="footer" backgroundProp="#F4991A">
-        <Text>footer</Text>
-      </Box>
-    </Grid>
-  ));
-*/
diff --git a/packages/asc-web-components/group-button/all.group-buttons.stories.js b/packages/asc-web-components/group-button/all.group-buttons.stories.js
deleted file mode 100644
index 1bc5a4c465..0000000000
--- a/packages/asc-web-components/group-button/all.group-buttons.stories.js
+++ /dev/null
@@ -1,69 +0,0 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import withReadme from "storybook-readme/with-readme";
-import Readme from "./README.md";
-import GroupButton from ".";
-import DropDownItem from "../drop-down-item";
-
-const rowStyle = { marginTop: 8 };
-const headerStyle = { marginLeft: 16 };
-
-storiesOf("Components|GroupButton", module)
-  .addDecorator(withReadme(Readme))
-  .addParameters({ options: { showAddonPanel: false } })
-  .add("all", () => (
-    <>
-      <div
-        style={{
-          padding: "8px 0 0 40px",
-          display: "grid",
-          gridTemplateColumns: "1fr 1fr 1fr 1fr",
-        }}
-      >
-        <div style={rowStyle}>
-          <div style={headerStyle}>Active</div>
-          <div>
-            <GroupButton />
-          </div>
-          <div>
-            <GroupButton isDropdown>
-              <DropDownItem label="Action 1" />
-            </GroupButton>
-          </div>
-        </div>
-        <div style={rowStyle}>
-          <div style={headerStyle}>Hover</div>
-          <div>
-            <GroupButton hovered />
-          </div>
-          <div>
-            <GroupButton isDropdown hovered>
-              <DropDownItem label="Action 2" />
-            </GroupButton>
-          </div>
-        </div>
-        <div style={rowStyle}>
-          <div style={headerStyle}>Click*(Press)</div>
-          <div>
-            <GroupButton activated />
-          </div>
-          <div>
-            <GroupButton isDropdown activated>
-              <DropDownItem label="Action 3" />
-            </GroupButton>
-          </div>
-        </div>
-        <div style={rowStyle}>
-          <div style={headerStyle}>Disable</div>
-          <div>
-            <GroupButton disabled />
-          </div>
-          <div>
-            <GroupButton isDropdown disabled>
-              <DropDownItem label="Action 4" />
-            </GroupButton>
-          </div>
-        </div>
-      </div>
-    </>
-  ));
diff --git a/packages/asc-web-components/group-button/group-button.stories.js b/packages/asc-web-components/group-button/group-button.stories.js
index 420105affe..a0fa72d70e 100644
--- a/packages/asc-web-components/group-button/group-button.stories.js
+++ b/packages/asc-web-components/group-button/group-button.stories.js
@@ -1,23 +1,107 @@
 import React from "react";
-import { storiesOf } from "@storybook/react";
-import { withKnobs, boolean, text } from "@storybook/addon-knobs/react";
-import withReadme from "storybook-readme/with-readme";
-import Readme from "./README.md";
-import GroupButton from ".";
+import GroupButton from "./";
 import DropDownItem from "../drop-down-item";
 
-storiesOf("Components|GroupButton", module)
-  .addDecorator(withKnobs)
-  .addDecorator(withReadme(Readme))
-  .add("base", () => (
-    <GroupButton
-      label={text("Label", "Base group button")}
-      disabled={boolean("disabled", false)}
-      isDropdown={boolean("isDropdown", false)}
-      opened={boolean("opened", false)}
+export default {
+  title: "Components/GroupButton",
+  component: GroupButton,
+  subcomponents: { DropDownItem },
+  parameters: {
+    docs: {
+      description: {
+        component: `Base Button is used for a group action on a page
+
+It can be used as selector with checkbox for this following properties are combined: _isDropdown_, _isSeparato
+_isSeparator_ will add vertical bar after button.
+
+_isDropdown_ allows adding items to dropdown list in children.
+
+For health of checkbox, button inherits part of properties of this component.       
+`,
+      },
+    },
+  },
+};
+
+const Template = (args) => {
+  return (
+    <div style={{ height: "200px", position: "relative" }}>
+      <GroupButton {...args}>
+        <DropDownItem label="Action 1" />
+        <DropDownItem label="Action 2" />
+        <DropDownItem label="Action 3" />
+      </GroupButton>
+    </div>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  label: "Base group button",
+  disabled: false,
+  isDropdown: true,
+  opened: true,
+};
+
+const AllTemplate = (args) => {
+  const rowStyle = { marginTop: 8 };
+  const headerStyle = { marginLeft: 16 };
+  return (
+    <div
+      style={{
+        padding: "8px 0 0 40px",
+        display: "grid",
+        gridTemplateColumns: "1fr 1fr 1fr 1fr",
+        height: "200px",
+        position: "relative",
+      }}
     >
-      <DropDownItem label="Action 1" />
-      <DropDownItem label="Action 2" />
-      <DropDownItem label="Action 3" />
-    </GroupButton>
-  ));
+      <div style={rowStyle}>
+        <div style={headerStyle}>Active</div>
+        <div>
+          <GroupButton />
+        </div>
+        <div>
+          <GroupButton isDropdown>
+            <DropDownItem label="Action 1" />
+          </GroupButton>
+        </div>
+      </div>
+      <div style={rowStyle}>
+        <div style={headerStyle}>Hover</div>
+        <div>
+          <GroupButton hovered />
+        </div>
+        <div>
+          <GroupButton isDropdown hovered>
+            <DropDownItem label="Action 2" />
+          </GroupButton>
+        </div>
+      </div>
+      <div style={rowStyle}>
+        <div style={headerStyle}>Click*(Press)</div>
+        <div>
+          <GroupButton activated />
+        </div>
+        <div>
+          <GroupButton isDropdown activated>
+            <DropDownItem label="Action 3" />
+          </GroupButton>
+        </div>
+      </div>
+      <div style={rowStyle}>
+        <div style={headerStyle}>Disable</div>
+        <div>
+          <GroupButton disabled />
+        </div>
+        <div>
+          <GroupButton isDropdown disabled>
+            <DropDownItem label="Action 4" />
+          </GroupButton>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export const All = AllTemplate.bind({});
diff --git a/packages/asc-web-components/group-button/index.js b/packages/asc-web-components/group-button/index.js
index 35010177e4..ab09ba631b 100644
--- a/packages/asc-web-components/group-button/index.js
+++ b/packages/asc-web-components/group-button/index.js
@@ -166,25 +166,43 @@ class GroupButton extends React.Component {
 
 GroupButton.propTypes = {
   activated: PropTypes.bool,
+  /** Initial value of checkbox */
   checked: PropTypes.bool,
+  /** Children elements */
   children: PropTypes.any,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Tells when the button should present a disabled state */
   disabled: PropTypes.bool,
+  /** Selected height value of DropDown */
   dropDownMaxHeight: PropTypes.number,
+  /** Value of font weight */
   fontWeight: PropTypes.string,
   hovered: PropTypes.bool,
+  /** Accepts id */
   id: PropTypes.string,
+  /** Tells when the button should present a dropdown state */
   isDropdown: PropTypes.bool,
+  /** Initial value of Indeterminate checkbox */
   isIndeterminate: PropTypes.bool,
   isSelect: PropTypes.bool,
+  /** Tells when the button should contain separator */
   isSeparator: PropTypes.bool,
+  /** Value of the group button */
   label: PropTypes.string,
+  /** Called when checkbox is checked */
   onChange: PropTypes.func,
+  /** Property for onClick action */
   onClick: PropTypes.func,
+  /** Called when value is selected in selector */
   onSelect: PropTypes.func,
+  /** Tells when the button should be opened by default */
   opened: PropTypes.bool,
+  /** Selected value label */
   selected: PropTypes.string,
+  /** Accepts css style */
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+  /** Value of tab index */
   tabIndex: PropTypes.number,
 };
 
diff --git a/packages/asc-web-components/group-buttons-menu/group-buttons-menu.stories.js b/packages/asc-web-components/group-buttons-menu/group-buttons-menu.stories.js
index 0fcabe17b5..8f82b6ebd7 100644
--- a/packages/asc-web-components/group-buttons-menu/group-buttons-menu.stories.js
+++ b/packages/asc-web-components/group-buttons-menu/group-buttons-menu.stories.js
@@ -1,159 +1,189 @@
-import React from "react";
-import { storiesOf } from "@storybook/react";
-import { withKnobs, text, boolean } from "@storybook/addon-knobs/react";
-import { BooleanValue } from "react-values";
-import withReadme from "storybook-readme/with-readme";
-import styled from "@emotion/styled";
-import Readme from "./README.md";
+import React, { useState } from "react";
+import styled from "styled-components";
+
 import GroupButtonsMenu from ".";
-import DropDownItem from "../drop-down-item";
 import Button from "../button";
+import DropDownItem from "../drop-down-item";
+
+export default {
+  title: "Components/GroupButtonsMenu",
+  component: GroupButtonsMenu,
+  argTypes: {
+    disableOdd: { description: "Disable odd", control: "boolean" },
+    disableEven: { description: "Disable even", control: "boolean" },
+    onClose: { action: "onClose" },
+    onChange: { action: "onChange" },
+    onClick: { action: "onClick" },
+    onSelectClick: { action: "onSelect", table: { disable: true } },
+    onItemClick: { action: "onItemClick", table: { disable: true } },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Menu for group actions on a page",
+      },
+    },
+  },
+};
 
 const GroupButtonsMenuContainer = styled.div`
   height: 2000px;
 `;
 
-storiesOf("Components|GroupButtonsMenu", module)
-  .addDecorator(withReadme(Readme))
-  .addDecorator(withKnobs)
-  .add("base", () => {
-    const disableEven = boolean("disable even", false);
-    const disableOdd = boolean("disable odd", false);
+const Template = ({
+  disableEven,
+  disableOdd,
+  onClose,
+  onChange,
+  onSelectClick,
+  onItemClick,
+  ...rest
+}) => {
+  const [isVisible, setIsVisible] = useState(rest.visible);
+  const [checked, setChecked] = useState(rest.checked);
+  const [groupItems, setGroupItem] = useState([
+    {
+      label: "Select",
+      isDropdown: true,
+      isSeparator: true,
+      isSelect: true,
+      fontWeight: "bold",
+      children: [
+        <DropDownItem key="aaa" label="aaa" />,
+        <DropDownItem key="bbb" label="bbb" />,
+        <DropDownItem key="ccc" label="ccc" />,
+      ],
+      onSelect: (a) => onSelectClick(a),
+    },
+    {
+      label: "Menu item",
+      disabled: disableEven,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableOdd,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableEven,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableOdd,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableEven,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableOdd,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableEven,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableOdd,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableEven,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableOdd,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableEven,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableOdd,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableEven,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableOdd,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableEven,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableOdd,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableEven,
+      onClick: () => onItemClick("Menu item action"),
+    },
+    {
+      label: "Menu item",
+      disabled: disableOdd,
+      onClick: () => onItemClick("Menu item action"),
+    },
+  ]);
 
-    const groupItems = [
-      {
-        label: "Select",
-        isDropdown: true,
-        isSeparator: true,
-        isSelect: true,
-        fontWeight: "bold",
-        children: [
-          <DropDownItem key="aaa" label="aaa" />,
-          <DropDownItem key="bbb" label="bbb" />,
-          <DropDownItem key="ccc" label="ccc" />,
-        ],
-        onSelect: (a) => console.log(a),
-      },
-      {
-        label: "Menu item",
-        disabled: disableEven,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableOdd,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableEven,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableOdd,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableEven,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableOdd,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableEven,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableOdd,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableEven,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableOdd,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableEven,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableOdd,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableEven,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableOdd,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableEven,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableOdd,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableEven,
-        onClick: () => console.log("Menu item action"),
-      },
-      {
-        label: "Menu item",
-        disabled: disableOdd,
-        onClick: () => console.log("Menu item action"),
-      },
-    ];
+  const toggleVisible = () => setIsVisible(!isVisible);
+  const toggleChecked = () => {
+    onChange(!checked);
+    setChecked(!checked);
+  };
 
-    return (
-      <BooleanValue>
-        {({ value: visible, toggle }) => (
-          <>
-            <Button
-              label="Show menu"
-              onClick={() => {
-                toggle(visible);
-              }}
-            />
-            <GroupButtonsMenuContainer>
-              <BooleanValue>
-                {({ value: checked, toggle }) => (
-                  <GroupButtonsMenu
-                    checked={checked}
-                    menuItems={groupItems}
-                    visible={visible}
-                    moreLabel={text("moreLabel", "More")}
-                    closeTitle={text("closeTitle", "Close")}
-                    onClose={() => console.log("Close action")}
-                    onChange={() => toggle(checked)}
-                    selected={groupItems[0].label}
-                  />
-                )}
-              </BooleanValue>
-            </GroupButtonsMenuContainer>
-          </>
-        )}
-      </BooleanValue>
-    );
-  });
+  return (
+    <>
+      <Button
+        label={`${isVisible ? "Hide" : "Show"} menu`}
+        primary
+        size="medium"
+        onClick={toggleVisible}
+      />
+
+      <GroupButtonsMenuContainer>
+        <GroupButtonsMenu
+          {...rest}
+          checked={checked}
+          menuItems={groupItems}
+          visible={isVisible}
+          onClose={() => {
+            toggleVisible();
+            onClose("Close action");
+          }}
+          onChange={toggleChecked}
+          selected={groupItems[0].label}
+        />
+      </GroupButtonsMenuContainer>
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  disableEven: false,
+  disableOdd: false,
+  moreLabel: "More",
+  closeTitle: "Close",
+};
diff --git a/packages/asc-web-components/group-buttons-menu/index.js b/packages/asc-web-components/group-buttons-menu/index.js
index 4a07bc5fd9..015cf3adcd 100644
--- a/packages/asc-web-components/group-buttons-menu/index.js
+++ b/packages/asc-web-components/group-buttons-menu/index.js
@@ -197,16 +197,25 @@ class GroupButtonsMenu extends React.Component {
 }
 
 GroupButtonsMenu.propTypes = {
+  /** onClick action on GroupButton's */
   onClick: PropTypes.func,
+  /** onClose action if menu closing */
   onClose: PropTypes.func,
+  /** onChange action on use selecting */
   onChange: PropTypes.func,
   onSelect: PropTypes.func,
+  /** Button collection */
   menuItems: PropTypes.array,
+  /** Sets initial value of checkbox */
   checked: PropTypes.bool,
   isIndeterminate: PropTypes.bool,
+  /** Selected header value */
   selected: PropTypes.string,
+  /** Sets menu visibility */
   visible: PropTypes.bool,
+  /** Label for more button */
   moreLabel: PropTypes.string,
+  /** Title for close menu button */
   closeTitle: PropTypes.string,
   sectionWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
 };
diff --git a/packages/asc-web-components/heading/heading.stories.js b/packages/asc-web-components/heading/heading.stories.js
index ae95481d7a..84dee88208 100644
--- a/packages/asc-web-components/heading/heading.stories.js
+++ b/packages/asc-web-components/heading/heading.stories.js
@@ -1,36 +1,33 @@
 import React from "react";
-import { storiesOf } from "@storybook/react";
-import {
-  text,
-  boolean,
-  withKnobs,
-  color,
-  select,
-} from "@storybook/addon-knobs/react";
 import Heading from ".";
-import Section from "../../../.storybook/decorators/section";
-import withReadme from "storybook-readme/with-readme";
-import Readme from "./README.md";
 
-const levels = [1, 2, 3, 4, 5, 6];
-const size = ["xsmall", "small", "medium", "large", "xlarge"];
+export default {
+  title: "Components/Heading",
+  component: Heading,
+  argTypes: {
+    color: { control: "color" },
+    headerText: { control: "text", description: "Header text" },
+  },
+  parameters: {
+    docs: {
+      description: {
+        component: "Heading text structured in levels",
+      },
+    },
+  },
+};
 
-storiesOf("Components|Heading", module)
-  .addDecorator(withKnobs)
-  .addDecorator(withReadme(Readme))
-  .add("base", () => (
-    <Section>
-      <div style={{ width: "100%" }}>
-        <Heading
-          color={color("color", "#333333")}
-          level={select("level", levels, 1)}
-          title={text("title", "")}
-          truncate={boolean("truncate", false)}
-          isInline={boolean("isInline", false)}
-          size={select("size", size, "large")}
-        >
-          {text("Text", "Sample text Heading")}
-        </Heading>
-      </div>
-    </Section>
-  ));
+const Template = ({ headerText, ...args }) => {
+  return <Heading {...args}>{headerText}</Heading>;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  color: "#333333",
+  level: "1",
+  title: "",
+  truncate: false,
+  isInline: false,
+  size: "large",
+  headerText: "Sample text Heading",
+};
diff --git a/packages/asc-web-components/heading/index.js b/packages/asc-web-components/heading/index.js
index 163c52879d..cb5d48310e 100644
--- a/packages/asc-web-components/heading/index.js
+++ b/packages/asc-web-components/heading/index.js
@@ -1,7 +1,6 @@
 import React from "react";
 import PropTypes from "prop-types";
-import StyledHeading from "./styled-heading"
-
+import StyledHeading from "./styled-heading";
 
 const Heading = ({ level, color, ...rest }) => {
   return (
@@ -10,12 +9,19 @@ const Heading = ({ level, color, ...rest }) => {
 };
 
 Heading.propTypes = {
+  /** 	The heading level. It corresponds to the number after the 'H' for the DOM tag. Set the level for semantic accuracy and accessibility. */
   level: PropTypes.oneOf([1, 2, 3, 4, 5, 6]),
+  /** Specifies the headline color */
   color: PropTypes.string,
+  /** Title */
   title: PropTypes.string,
+  /** Disables word wrapping */
   truncate: PropTypes.bool,
+  /** Sets the 'display: inline-block' property */
   isInline: PropTypes.bool,
+  /** Sets the size of headline */
   size: PropTypes.oneOf(["xsmall", "small", "medium", "large", "xlarge"]),
+  /** Accepts css class */
   className: PropTypes.string,
 };
 
diff --git a/packages/asc-web-components/help-button/help-button.stories.js b/packages/asc-web-components/help-button/help-button.stories.js
index d2a80b1c4c..6b9a321c25 100644
--- a/packages/asc-web-components/help-button/help-button.stories.js
+++ b/packages/asc-web-components/help-button/help-button.stories.js
@@ -1,71 +1,97 @@
 import React from "react";
-import { storiesOf } from "@storybook/react";
-import { withKnobs, number } from "@storybook/addon-knobs/react";
-import withReadme from "storybook-readme/with-readme";
-import Readme from "./README.md";
-import HelpButton from ".";
-import Section from "../../../.storybook/decorators/section";
+
 import Text from "../text";
 import Link from "../link";
-import styled from "styled-components";
+import HelpButton from ".";
 
-const IconButtons = styled.div`
-  margin-top: 150px;
-  margin-left: 70px;
-  display: flex;
+export default {
+  title: "Components/HelpButton",
+  component: HelpButton,
+  subcomponents: { Text, Link },
+  argTypes: {},
+  parameters: {
+    docs: {
+      description: {
+        component: "HelpButton is used for a action on a page",
+      },
+    },
+  },
+};
 
-  .icon-button {
-    margin-left: 10px;
-  }
-`;
+const Template = (args) => {
+  return (
+    <>
+      <HelpButton {...args} />
+    </>
+  );
+};
 
-storiesOf("Components|Buttons", module)
-  .addDecorator(withKnobs)
-  .addDecorator(withReadme(Readme))
-  .add("help button", () => {
-    return (
-      <Section>
-        <IconButtons>
-          <HelpButton
-            displayType="dropdown"
-            offsetTop={number("offsetTop", 0)}
-            offsetRight={number("offsetRight", 0)}
-            offsetBottom={number("offsetBottom", 0)}
-            offsetLeft={number("offsetLeft", 0)}
-            tooltipContent={
-              <Text fontSize="13px">Paste you tooltip content here</Text>
-            }
-          />
-          <HelpButton
-            displayType="aside"
-            helpButtonHeaderContent="Aside position HelpButton"
-            tooltipContent={
-              <Text>
-                You tooltip content with{" "}
-                <Link
-                  isHovered={true}
-                  href="http://localhost:6006/?path=/story/components-buttons--help-button"
-                >
-                  link
-                </Link>
-              </Text>
-            }
-          />
-          <HelpButton
-            displayType="auto"
-            helpButtonHeaderContent="Auto position HelpButton"
-            tooltipContent={
-              <>
-                <p>You can put every thing here</p>
-                <ul style={{ marginBottom: 0 }}>
-                  <li>Word</li>
-                  <li>Chart</li>
-                  <li>Else</li>
-                </ul>
-              </>
-            }
-          />
-        </IconButtons>
-      </Section>
-    );
-  });
+export const Default = Template.bind({});
+Default.args = {
+  displayType: "auto",
+  offsetTop: 0,
+  offsetRight: 0,
+  offsetBottom: 0,
+  offsetLeft: 0,
+  tooltipContent: <Text fontSize="13px">Paste you tooltip content here</Text>,
+};
+
+const DropDownTemplate = (args) => {
+  return (
+    <HelpButton
+      displayType="dropdown"
+      offsetTop={0}
+      offsetRight={0}
+      offsetBottom={0}
+      offsetLeft={0}
+      tooltipContent={
+        <Text fontSize="13px">Paste you tooltip content here</Text>
+      }
+    />
+  );
+};
+
+export const DropDownPosition = DropDownTemplate.bind({});
+
+const AsideTemplate = (args) => {
+  return (
+    <HelpButton
+      displayType="aside"
+      helpButtonHeaderContent="Aside position HelpButton"
+      tooltipContent={
+        <Text>
+          You tooltip content with{" "}
+          <Link
+            isHovered={true}
+            href="http://localhost:6006/?path=/story/components-buttons--help-button"
+          >
+            link
+          </Link>
+        </Text>
+      }
+    />
+  );
+};
+
+export const AsidePosition = AsideTemplate.bind({});
+
+const AutoTemplate = (args) => {
+  return (
+    <HelpButton
+      displayType="auto"
+      helpButtonHeaderContent="Auto position HelpButton"
+      tooltipContent={
+        <>
+          <p>You can put every thing here</p>
+          <ul style={{ marginBottom: 0 }}>
+            <li>Word</li>
+            <li>Chart</li>
+            <li>Else</li>
+          </ul>
+        </>
+      }
+    />
+  );
+};
+
+export const AutoPosition = AutoTemplate.bind({});
diff --git a/packages/asc-web-components/help-button/index.js b/packages/asc-web-components/help-button/index.js
index 5f3f2af876..41d5f4d990 100644
--- a/packages/asc-web-components/help-button/index.js
+++ b/packages/asc-web-components/help-button/index.js
@@ -207,18 +207,23 @@ HelpButton.propTypes = {
   tooltipId: PropTypes.string,
   place: PropTypes.string,
   zIndex: PropTypes.number,
+  /** Tooltip display type  */
   displayType: PropTypes.oneOf(["dropdown", "aside", "auto"]),
+  /** Tooltip header content (tooltip opened in aside) */
   helpButtonHeaderContent: PropTypes.string,
   iconName: PropTypes.string,
   color: PropTypes.string,
   dataTip: PropTypes.string,
   getContent: PropTypes.func,
+  /** Accepts class */
   className: PropTypes.string,
+  /** Accepts id */
   id: PropTypes.string,
   style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 };
 
 HelpButton.defaultProps = {
+  iconName: "./static/images/question.react.svg",
   place: "top",
   offsetRight: 120,
   offsetLeft: 0,
@@ -227,7 +232,6 @@ HelpButton.defaultProps = {
   zIndex: 310,
   displayType: "auto",
   className: "icon-button",
-  iconName: "/static/images/question.react.svg",
   color: "#A3A9AE",
 };
 
diff --git a/packages/asc-web-components/package.json b/packages/asc-web-components/package.json
index 5e74e36547..be79dde19a 100644
--- a/packages/asc-web-components/package.json
+++ b/packages/asc-web-components/package.json
@@ -8,17 +8,10 @@
     "test": "jest",
     "test:watch": "jest --watch",
     "test:coverage": "jest --coverage",
-    "storybook": "start-storybook -p 6006",
+    "storybook": "start-storybook -p 6006 -s public",
     "build-storybook": "build-storybook"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^6.1.20",
-    "@storybook/addon-controls": "^6.1.20",
-    "@storybook/addon-docs": "^6.1.20",
-    "@storybook/addon-essentials": "^6.1.20",
-    "@storybook/addon-links": "^6.1.20",
-    "@storybook/react": "^6.1.20",
-    "react-values": "^0.3.3",
     "@babel/cli": "^7.12.10",
     "@babel/core": "^7.12.10",
     "@babel/plugin-proposal-class-properties": "^7.12.1",
@@ -29,6 +22,13 @@
     "@babel/preset-react": "^7.12.10",
     "@emotion/babel-preset-css-prop": "^10.2.1",
     "@emotion/styled": "^10.0.27",
+    "@storybook/addon-actions": "^6.1.20",
+    "@storybook/addon-controls": "^6.1.20",
+    "@storybook/addon-docs": "^6.1.20",
+    "@storybook/addon-essentials": "^6.1.20",
+    "@storybook/addon-links": "^6.1.20",
+    "@storybook/addon-viewport": "^6.1.21",
+    "@storybook/react": "^6.1.20",
     "@svgr/rollup": "^5.5.0",
     "@svgr/webpack": "^5.5.0",
     "@testing-library/react": "^9.5.0",
@@ -55,6 +55,7 @@
     "prettier": "2.1.2",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
+    "react-values": "^0.3.3",
     "rollup": "^1.32.1",
     "rollup-plugin-babel": "^4.4.0",
     "rollup-plugin-cleanup": "^3.2.1",
diff --git a/packages/asc-web-components/public/static/images/a-z.sorting.react.svg b/packages/asc-web-components/public/static/images/a-z.sorting.react.svg
new file mode 100644
index 0000000000..eb792c11be
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/a-z.sorting.react.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9C0 9.55228 0.447715 10 1 10H5C5.55228 10 6 9.55228 6 9C6 8.44772 5.55228 8 5 8H1C0.447715 8 0 8.44772 0 9ZM0 5C0 5.55228 0.447715 6 1 6H7C7.55228 6 8 5.55228 8 5C8 4.44772 7.55228 4 7 4H1C0.447715 4 0 4.44772 0 5ZM1 2C0.447715 2 0 1.55229 0 1C0 0.447715 0.447715 0 1 0H9C9.55229 0 10 0.447715 10 1C10 1.55229 9.55228 2 9 2H1Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/actions.header.touch.react.svg b/packages/asc-web-components/public/static/images/actions.header.touch.react.svg
new file mode 100644
index 0000000000..548ddee738
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/actions.header.touch.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.5 0C7.67157 0 7 0.671573 7 1.5V7H1.5C0.671573 7 0 7.67157 0 8.5C0 9.32843 0.671573 10 1.5 10H7V15.5C7 16.3284 7.67157 17 8.5 17C9.32843 17 10 16.3284 10 15.5V10H15.5C16.3284 10 17 9.32843 17 8.5C17 7.67157 16.3284 7 15.5 7H10V1.5C10 0.671573 9.32843 0 8.5 0Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/arrow.path.react.svg b/packages/asc-web-components/public/static/images/arrow.path.react.svg
new file mode 100644
index 0000000000..52c3cb4487
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/arrow.path.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.9913 7.00235L5.7581 7.00934L9.90483 2.58703C10.1145 2.37637 10.2295 2.09099 10.2295 1.79147C10.2295 1.49195 10.1145 1.20857 9.90483 0.997406L9.2385 0.327144C9.02897 0.116481 8.74977 0 8.45202 0C8.15411 0 7.87474 0.115649 7.66521 0.326312L0.32456 7.70602C0.114203 7.91751 -0.000823092 8.19923 4.43411e-06 8.49892C-0.000823092 8.80027 0.114203 9.08215 0.32456 9.29332L7.66521 16.6737C7.87474 16.8842 8.15395 17 8.45202 17C8.74977 17 9.02897 16.884 9.2385 16.6737L9.90483 16.0034C10.1145 15.7931 10.2295 15.5122 10.2295 15.2127C10.2295 14.9133 10.1145 14.6473 9.90483 14.4368L5.7581 10.0027H16.0548C16.6683 10.0027 17 9.56605 17 8.94953V8.00155C17 7.38503 16.6048 7.00235 15.9913 7.00235Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/button.alert.react.svg b/packages/asc-web-components/public/static/images/button.alert.react.svg
new file mode 100644
index 0000000000..1e571af05a
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/button.alert.react.svg
@@ -0,0 +1,4 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="6" cy="6" r="6" fill="#F21C0E"/>
+<path d="M6 9.93747C5.48319 9.93747 5.0625 9.51678 5.0625 8.99997C5.0625 8.48316 5.48319 8.06247 6 8.06247C6.51681 8.06247 6.9375 8.48316 6.9375 8.99997C6.9375 9.51678 6.51681 9.93747 6 9.93747ZM6.9375 6.06253C6.9375 6.57934 6.51682 6.99999 6 6.99999C5.48319 6.99999 5.0625 6.57934 5.0625 6.06253L5.0625 3.00002C5.0625 2.48321 5.48319 2.0625 6 2.0625C6.51681 2.0625 6.9375 2.48321 6.9375 3.00002L6.9375 6.06253Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/button.duplicate.react.svg b/packages/asc-web-components/public/static/images/button.duplicate.react.svg
new file mode 100644
index 0000000000..ae3dbdcaf9
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/button.duplicate.react.svg
@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M3.46129 22L14.5387 22C15.3445 22 16 21.3445 16 20.5388L16 16.9046L9.59254 16.9046C8.05121 16.9046 7.0996 15.8556 7.0996 14.3144L7.0996 8L3.46128 8C2.65553 8 1.99999 8.65549 1.99999 9.4612L1.99999 20.5388C2.00003 21.3445 2.65553 22 3.46129 22Z" fill="#A3A9AE"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.43787 16L20.5622 16C21.3549 16 22 15.3551 22 14.5623L22 3.43767C21.9999 2.64493 21.355 2 20.5621 2L9.43782 2C8.64499 2 7.99998 2.64493 7.99998 3.43762L7.99999 14.5623C7.99994 15.3551 8.64503 16 9.43787 16ZM15 13C14.4477 13 14 12.5523 14 12L14 10.5C14 10.2239 13.7761 10 13.5 10L12 10C11.4477 10 11 9.55229 11 9C11 8.44772 11.4477 8 12 8L13.5 8C13.7761 8 14 7.77614 14 7.5L14 6C14 5.44772 14.4477 5 15 5C15.5523 5 16 5.44772 16 6L16 7.5C16 7.77614 16.2238 8 16.5 8L18 8C18.5523 8 19 8.44772 19 9C19 9.55228 18.5523 10 18 10L16.5 10C16.2238 10 16 10.2239 16 10.5L16 12C16 12.5523 15.5523 13 15 13Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/button.file.react.svg b/packages/asc-web-components/public/static/images/button.file.react.svg
new file mode 100644
index 0000000000..0265a43611
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/button.file.react.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 2C4.44772 2 4 2.44772 4 3L4 21C4 21.5523 4.44772 22 5 22L19 22C19.5523 22 20 21.5523 20 21L20 7L15.1111 2H5ZM9 19C9.55228 19 10 18.5523 10 18C10 17.4477 9.55228 17 9 17C8.44771 17 8 17.4477 8 18C8 18.5523 8.44771 19 9 19ZM13 18C13 18.5523 12.5523 19 12 19C11.4477 19 11 18.5523 11 18C11 17.4477 11.4477 17 12 17C12.5523 17 13 17.4477 13 18ZM15 19C15.5523 19 16 18.5523 16 18C16 17.4477 15.5523 17 15 17C14.4477 17 14 17.4477 14 18C14 18.5523 14.4477 19 15 19Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/button.move.react.svg b/packages/asc-web-components/public/static/images/button.move.react.svg
new file mode 100644
index 0000000000..6f6e745578
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/button.move.react.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.99854 2H8.99885L11.9999 4.99353H20.9966C21.5488 4.99353 21.9966 5.44125 21.9966 5.99353V20C21.9966 20.5523 21.5488 21 20.9966 21H3.05905C2.50815 21 2.06101 20.5545 2.05905 20.0036L1.99854 3.00356C1.99657 2.44989 2.44486 2 2.99854 2ZM11.0003 9.1743C11.0003 8.31994 12.0024 7.85903 12.6511 8.41504L17.1145 12.2408C17.5801 12.6399 17.5801 13.3602 17.1145 13.7593L12.6511 17.5851C12.0024 18.1411 11.0003 17.6802 11.0003 16.8259V16.0005C11.0003 15.4482 10.5526 15.0005 10.0003 15.0005H7.00031C6.44802 15.0005 6.00031 14.5528 6.00031 14.0005V12.0005C6.00031 11.4482 6.44802 11.0005 7.00031 11.0005H10.0003C10.5526 11.0005 11.0003 10.5528 11.0003 10.0005V9.1743Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/button.trash.react.svg b/packages/asc-web-components/public/static/images/button.trash.react.svg
new file mode 100644
index 0000000000..739af75db8
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/button.trash.react.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 5C2.25 4.44772 2.69772 4 3.25 4H7L7.00959 1.99522C7.01222 1.44481 7.45916 1 8.00958 1H15C15.5523 1 16 1.44772 16 2V4H19.5C20.0523 4 20.5 4.44772 20.5 5V6C20.5 6.55228 20.0523 7 19.5 7H3.25C2.69772 7 2.25 6.55228 2.25 6V5ZM4 8H4.03965H18.9604C18.9802 8 19 20.843 19 20.843C19 21.4793 18.4648 22 17.8106 22H5.18944C4.53525 22 4 21.4793 4 20.843V8ZM6.5 10C6.22386 10 6 10.2239 6 10.5V19.5C6 19.7761 6.22386 20 6.5 20C6.77614 20 7 19.7761 7 19.5V10.5C7 10.2239 6.77614 10 6.5 10ZM11 10.5C11 10.2239 11.2239 10 11.5 10C11.7761 10 12 10.2239 12 10.5V19.5C12 19.7761 11.7761 20 11.5 20C11.2239 20 11 19.7761 11 19.5V10.5ZM16.5 10C16.2239 10 16 10.2239 16 10.5V19.5C16 19.7761 16.2239 20 16.5 20C16.7761 20 17 19.7761 17 19.5V10.5C17 10.2239 16.7761 10 16.5 10ZM14 3H9V4H14V3Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/button.upload.react.svg b/packages/asc-web-components/public/static/images/button.upload.react.svg
new file mode 100644
index 0000000000..cc7b55d46f
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/button.upload.react.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.19048 18.9959V19H19.0476V18.9965C21.7997 18.8953 24 16.6109 24 13.8077C24 10.9401 21.6975 8.61538 18.8571 8.61538H18.5923C17.7367 5.89494 16 3 11.619 3C7 3 4.77093 6.68754 4.5 10.1538H4.38095C1.96142 10.1538 0 12.1341 0 14.5769C0 16.9553 1.85931 18.8952 4.19048 18.9959ZM10.009 19L14.0092 19L14.0092 16.5C14.0092 16.2239 14.2331 16 14.5092 16H15.8258C16.6801 16 17.141 14.9979 16.585 14.3492L12.7593 9.8858C12.3602 9.42019 11.6398 9.42019 11.2407 9.8858L7.41496 14.3492C6.85896 14.9979 7.31987 16 8.17422 16H9.50902C9.78516 16 10.009 16.2239 10.009 16.5L10.009 19Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/calendar.checked.react.svg b/packages/asc-web-components/public/static/images/calendar.checked.react.svg
new file mode 100644
index 0000000000..d2cd690c3f
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/calendar.checked.react.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.8814 3H18.9943V1.02931C18.9943 0.460813 18.5335 0 17.9649 0H17.0301C16.4616 0 16.001 0.460813 16.001 1.02931V3H7.99588V1.02931C7.99588 0.460813 7.53507 0 6.96674 0H6.02914C5.46064 0 5 0.460813 5 1.02931V3H3.11844C1.95051 3 1 3.95017 1 5.11844V20.8965C1 22.0641 1.95051 23.0149 3.11844 23.0149H20.8816C22.0493 23.0149 23 22.0642 23 20.8965V5.11844C22.9998 3.95017 22.0491 3 20.8814 3ZM21 21.001H3.02614V8.00104H21V21.001ZM9.8844 17.6579C10.3376 18.114 11.0732 18.114 11.5266 17.6579L16.66 12.4939C16.8777 12.2748 17 11.9777 17 11.668C17 11.3583 16.8777 11.0611 16.66 10.8421C16.2066 10.386 15.4709 10.386 15.0178 10.8421L10.913 14.9713C10.7984 15.0862 10.6126 15.0862 10.4982 14.9713L8.98223 13.4466C8.52885 12.9905 7.7932 12.9905 7.34004 13.4466C6.88665 13.9024 6.88665 14.6425 7.34004 15.0984L9.8844 17.6579Z" fill="#7A95B0"/>
+</svg>
\ No newline at end of file
diff --git a/packages/asc-web-components/public/static/images/calendar.react.svg b/packages/asc-web-components/public/static/images/calendar.react.svg
new file mode 100644
index 0000000000..3f9c0938c9
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/calendar.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4444 1H12.6667V0H11.1111V1H4.88889V0H3.33333V1H1.55556C0.696134 1 0.00780207 1.71599 0.00780207 2.60001L0 14.4C0 15.284 0.696097 16 1.55556 16H14.4444C15.3039 16 16 15.284 16 14.4V2.59997C16 1.71599 15.3039 1 14.4444 1ZM14 14H2V5H14V14ZM4 7H7V9H4V7ZM12 7H9V9H12V7ZM4 10H7V12H4V10ZM12 10H9V12H12V10Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/catalog.button.react.svg b/packages/asc-web-components/public/static/images/catalog.button.react.svg
new file mode 100644
index 0000000000..30f1b25a2b
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/catalog.button.react.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2C0 0.895431 0.895431 0 2 0C3.10457 0 4 0.895431 4 2V18C4 19.1046 3.10457 20 2 20C0.895431 20 0 19.1046 0 18V2ZM14 5.41421C14 4.52331 15.0771 4.07714 15.7071 4.70711L20.2929 9.29289C20.6834 9.68342 20.6834 10.3166 20.2929 10.7071L15.7071 15.2929C15.0771 15.9229 14 15.4767 14 14.5858V12H8C7.44772 12 7 11.5523 7 11V9C7 8.44771 7.44772 8 8 8H14V5.41421Z" fill="#A3A9AE"/>
+</svg>
\ No newline at end of file
diff --git a/packages/asc-web-components/public/static/images/catalog.departments.react.svg b/packages/asc-web-components/public/static/images/catalog.departments.react.svg
new file mode 100644
index 0000000000..9ad08cbbba
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/catalog.departments.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.8547 0.197892C15.6962 0.0659274 15.5086 0 15.292 0H9.5918L8.09197 1.5L6.5918 0H0.891957C0.675148 0 0.48763 0.0659274 0.32927 0.197892C0.170999 0.329783 0.0917969 0.486046 0.0917969 0.666607V8.66648C0.0917969 9.26377 0.231286 9.85573 0.510484 10.4426C0.789551 11.0294 1.13543 11.5503 1.54799 12.0051C1.96054 12.4601 2.45213 12.9028 3.02296 13.3334C3.59388 13.7641 4.12092 14.1214 4.60419 14.4063C5.08745 14.691 5.59165 14.9602 6.11664 15.2134C6.64163 15.4667 7.01465 15.6389 7.2354 15.7291C7.45619 15.8195 7.63329 15.8889 7.76656 15.9373C7.86665 15.979 7.97488 16 8.09169 16C8.20863 16 8.31673 15.979 8.4169 15.9373C8.55009 15.8889 8.72718 15.8195 8.94789 15.7291C9.16859 15.6389 9.54179 15.4667 10.0668 15.2134C10.5915 14.9602 11.0959 14.691 11.5791 14.4063C12.0625 14.1214 12.5895 13.7641 13.1605 13.3334C13.731 12.9028 14.2228 12.4601 14.6353 12.0051C15.0478 11.5503 15.3936 11.0294 15.6732 10.4426C15.9524 9.85573 16.0918 9.26377 16.0918 8.66648V0.666607C16.0918 0.485936 16.0126 0.329819 15.8547 0.197892ZM13.6918 8.66648C13.6918 9.88871 12.7125 11.1386 10.7542 12.4164C9.9709 12.9302 9.08335 13.406 8.09173 13.8435L8.0918 4L10.0918 1.99982H13.6918V8.66648Z" fill="#657077"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/catalog.employee.react.svg b/packages/asc-web-components/public/static/images/catalog.employee.react.svg
new file mode 100644
index 0000000000..6f3590ef1f
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/catalog.employee.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.91 3.6923C11.91 1.65314 10.2005 0 8.0918 0C5.98311 0 4.27361 1.65314 4.27361 3.6923C4.27361 5.73147 5.98311 7.3846 8.0918 7.3846C10.2005 7.3846 11.91 5.73162 11.91 3.6923ZM2.8884 16H13.2951C14.2874 16 15.0918 15.2493 15.0918 14.3349C15.0918 10.3507 13.3358 8.67231 11.0833 8.5127L8.0918 13L5.12748 8.55352C3.0222 8.59701 1.0918 10.2599 1.0918 14.3349C1.0918 15.2493 1.89617 16 2.8884 16Z" fill="#333333"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/catalog.folder.react.svg b/packages/asc-web-components/public/static/images/catalog.folder.react.svg
new file mode 100644
index 0000000000..db6c1cd586
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/catalog.folder.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6.09362 1L1.09424 1C0.540702 1 0.0924722 1.44967 0.0942434 2.0032L0.13264 14.0032C0.134403 14.5542 0.581599 15 1.13263 15H15.0918C15.6441 15 16.0918 14.5523 16.0918 14V4.99571C16.0918 4.44342 15.6441 3.99571 15.0918 3.99571H9.0913L6.09362 1Z" fill="#657077"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/catalog.guest.react.svg b/packages/asc-web-components/public/static/images/catalog.guest.react.svg
new file mode 100644
index 0000000000..ea9d822fff
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/catalog.guest.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.0918 0C10.2005 0 11.91 1.65314 11.91 3.6923C11.91 5.73162 10.2005 7.3846 8.0918 7.3846C5.98311 7.3846 4.27361 5.73147 4.27361 3.6923C4.27361 1.65314 5.98311 0 8.0918 0ZM13.2951 16H2.8884C1.89617 16 1.0918 15.2493 1.0918 14.3349C1.0918 10.1384 3.13902 8.5 5.31618 8.55393C6.07104 9.03774 6.9876 9.32204 7.97664 9.32204C9.00192 9.32204 9.94933 9.01658 10.7193 8.5C13.1437 8.5 15.0918 10.1384 15.0918 14.3349C15.0918 15.2493 14.2874 16 13.2951 16Z" fill="#333333"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/catalog.pin.react.svg b/packages/asc-web-components/public/static/images/catalog.pin.react.svg
new file mode 100644
index 0000000000..4ae3df4e27
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/catalog.pin.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.789 5.19933L10.7269 0.137193C10.5441 -0.0457312 10.2474 -0.0457312 10.0647 0.137193L10.0432 0.158642C9.73281 0.468949 9.56178 0.881724 9.56178 1.32063C9.56178 1.6034 9.63362 1.87474 9.76709 2.11536L4.47043 6.66113C4.06505 6.29884 3.54765 6.10055 2.99963 6.10055C2.40908 6.10055 1.85394 6.3305 1.43648 6.74805L1.40473 6.7798C1.22181 6.96263 1.22181 7.25917 1.40473 7.442L4.43736 10.4746L1.9521 12.9598C1.893 13.0206 1.43161 13.5246 0.512492 14.671C-0.362792 15.7625 0.400752 15.0258 0.39176 15.0361C0.229254 15.2212 0.238246 15.5003 0.412179 15.6751C0.503313 15.7666 0.623483 15.8129 0.744028 15.8129C0.853895 15.8129 0.964044 15.7745 1.05265 15.697C1.06042 15.6903 0.319171 16.4571 1.41775 15.5763C2.564 14.6572 3.068 14.1957 3.13348 14.1319L5.61396 11.6514L8.48418 14.5216C8.5756 14.6132 8.69549 14.6589 8.81528 14.6589C8.93508 14.6589 9.05506 14.6132 9.14638 14.5216L9.17814 14.4899C9.59569 14.0724 9.82563 13.5172 9.82563 12.9267C9.82563 12.3787 9.62725 11.8613 9.26506 11.4559L13.8108 6.15928C14.0514 6.29275 14.3228 6.36459 14.6056 6.36459C15.0446 6.36459 15.4572 6.19366 15.7675 5.88316L15.789 5.86171C15.9719 5.6787 15.9719 5.38216 15.789 5.19933Z" fill="#657077"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/catalog.spam.react.svg b/packages/asc-web-components/public/static/images/catalog.spam.react.svg
new file mode 100644
index 0000000000..09f21421d9
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/catalog.spam.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.0918 8.5C15.0918 12.6421 11.7339 16 7.5918 16C3.44966 16 0.0917969 12.6421 0.0917969 8.5C0.0917969 4.35786 3.44966 1 7.5918 1C11.7339 1 15.0918 4.35786 15.0918 8.5ZM12.0918 7H3.0918V10H12.0918V7Z" fill="#657077"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/catalog.trash.react.svg b/packages/asc-web-components/public/static/images/catalog.trash.react.svg
new file mode 100644
index 0000000000..763492f029
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/catalog.trash.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 3C1 2.44772 1.44772 2 2 2H4.99615L5.00192 0.99426C5.00508 0.444224 5.45186 0 6.00191 0H8.99514C9.54743 0 9.99514 0.447715 9.99514 1V2H13C13.5523 2 14 2.44772 14 3C14 3.55228 13.5523 4 13 4H2C1.44772 4 1 3.55228 1 3ZM2 5H2.03355H12.9665C12.9832 5 13 15.0909 13 15.0909C13 15.5909 12.5471 16 11.9935 16H3.00645C2.4529 16 2 15.5909 2 15.0909V5ZM5 7H4V14H5V7ZM7 7H8V14H7V7ZM11 7H10V14H11V7ZM9 1H6V2H9V1Z" fill="#A3A9AE"/>
+</svg>
\ No newline at end of file
diff --git a/packages/asc-web-components/public/static/images/catalog.unpin.react.svg b/packages/asc-web-components/public/static/images/catalog.unpin.react.svg
new file mode 100644
index 0000000000..304dfbacb0
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/catalog.unpin.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.6684 1.64743e-06L4.50945 2.17427e-06C4.25089 -0.000130251 4.04107 0.209686 4.0412 0.468248L4.0412 0.498582C4.04114 0.937488 4.21208 1.3503 4.52243 1.66065C4.72238 1.8606 4.96504 2.00167 5.22957 2.07744L4.6986 7.2758C4.15578 7.30627 3.64972 7.53191 3.2622 7.91942C2.84462 8.337 2.61467 8.89214 2.61474 9.48259L2.61474 9.52749C2.61467 9.78612 2.82436 9.9958 3.08299 9.99574L7.08946 9.99574L7.08939 13.5104C7.09058 13.5951 7.26025 15.0262 7.28146 15.2191C7.30267 15.412 7.45333 15.549 7.45425 15.5626C7.47021 15.8084 7.8453 15.9994 8.09187 16C8.22102 16.0003 8.50672 15.948 8.59196 15.8628C8.66965 15.7851 8.72038 15.68 8.72826 15.5626C8.72899 15.5524 8.88446 15.37 8.90106 15.2191C8.91766 15.0682 9.09173 13.5952 9.09293 13.5038V9.99587L13.095 9.99587C13.2243 9.99593 13.3414 9.94348 13.4261 9.85877C13.5108 9.77406 13.5634 9.6569 13.5632 9.52762V9.48272C13.5633 8.89228 13.3333 8.33707 12.9158 7.91956C12.5282 7.53205 12.0221 7.30647 11.4794 7.27593L10.9484 2.07757C11.2129 2.0018 11.4556 1.86073 11.6555 1.66079C11.966 1.35037 12.1369 0.937686 12.1368 0.498714L12.1368 0.468381C12.1367 0.20962 11.927 -6.44388e-05 11.6684 1.64743e-06Z" fill="#657077"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/chat.react.svg b/packages/asc-web-components/public/static/images/chat.react.svg
new file mode 100644
index 0000000000..25f2f64406
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/chat.react.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 3.3C6 2.58203 6.58203 2 7.3 2H21.7C22.418 2 23 2.58203 23 3.3V13.7C23 14.418 22.418 15 21.7 15H21V5.3C21 4.58203 20.418 4 19.7 4H6V3.3ZM17.7 6.0028C18.418 6.0028 19 6.58483 19 7.3028V18.7C19 19.418 18.418 20 17.7 20H5.67862C5.2802 20 4.90378 20.1827 4.65728 20.4957L3.32134 22.1922C2.55797 23.1616 1 22.6218 1 21.3879V7.3028C1 6.58483 1.58203 6.0028 2.3 6.0028H17.7Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/checkbox.checked.react.svg b/packages/asc-web-components/public/static/images/checkbox.checked.react.svg
new file mode 100644
index 0000000000..b2e55326cf
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/checkbox.checked.react.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1"/>
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" stroke-width="8%" />
+<path d="M7.97926 11.6351C7.48054 12.1216 6.67132 12.1216 6.17284 11.6351L3.37404 8.90491C2.87532 8.41864 2.87532 7.62926 3.37404 7.14299C3.87252 6.65649 4.68174 6.65649 5.18046 7.14299L6.84799 8.76943C6.97387 8.89199 7.17822 8.89199 7.30435 8.76943L11.8195 4.36487C12.318 3.87838 13.1272 3.87838 13.626 4.36487C13.8655 4.5985 14 4.91547 14 5.24583C14 5.57619 13.8655 5.89317 13.626 6.12679L7.97926 11.6351Z" fill="#333333"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/checkbox.indeterminate.react.svg b/packages/asc-web-components/public/static/images/checkbox.indeterminate.react.svg
new file mode 100644
index 0000000000..58295c3c6c
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/checkbox.indeterminate.react.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1"/>
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" stroke-width="8%"/>
+<rect x="3" y="3" width="10" height="10" rx="2" fill="#333333"/>
+</svg>
\ No newline at end of file
diff --git a/packages/asc-web-components/public/static/images/checkbox.react.svg b/packages/asc-web-components/public/static/images/checkbox.react.svg
new file mode 100644
index 0000000000..8570fa86d4
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/checkbox.react.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1" />
+<rect x="0.5" y="0.5" width="15" height="15" rx="2.5" fill="white" stroke="#D0D5DA" stroke-opacity="1"  stroke-width="8%" />
+</svg>
diff --git a/packages/asc-web-components/public/static/images/copy.react.svg b/packages/asc-web-components/public/static/images/copy.react.svg
new file mode 100644
index 0000000000..ea6ff819ed
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/copy.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M9.85498 16L1.15188 16C0.518827 16 0.00382324 15.485 0.00378789 14.8519L0.00378713 6.14776C0.00378708 5.51468 0.518826 4.99964 1.15187 4.99964L4.01036 4.99964L4.01036 9.96112C4.01036 11.1721 4.75801 11.9963 5.96898 11.9963L11.0031 11.9963L11.0031 14.8519C11.0031 15.485 10.4881 16 9.85498 16ZM14.8703 11.0013L6.12976 11.0013C5.50682 11.0013 4.99997 10.4945 5 9.87155L5 1.12969C5 0.506788 5.50679 9.17346e-07 6.12973 8.62887e-07L14.8703 9.87639e-08C15.4932 4.43048e-08 16 0.506787 16 1.12973L16 9.87155C16 10.4945 15.4932 11.0013 14.8703 11.0013Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/crm.react.svg b/packages/asc-web-components/public/static/images/crm.react.svg
new file mode 100644
index 0000000000..6d4445b613
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/crm.react.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15.3719 3.25678C15.3719 5.05546 13.9289 6.51357 12.1488 6.51357C10.3687 6.51357 8.92562 5.05546 8.92562 3.25678C8.92562 1.45811 10.3687 0 12.1488 0C13.9289 0 15.3719 1.45811 15.3719 3.25678ZM6.07558 3.82952C6.18787 5.06074 6.65857 6.18705 7.38131 7.10098C5.83057 8.33665 4.77654 10.1805 4.57158 12.2764C4.1378 12.1775 3.6865 12.1253 3.22314 12.1253C2.49652 12.1253 1.79958 12.2537 1.15332 12.4892C1.32664 8.86139 3.24354 5.6958 6.07558 3.82952ZM19.4284 12.2764C19.2314 10.2617 18.2499 8.47996 16.7968 7.24738C17.5485 6.35435 18.0526 5.24194 18.2018 4.01852C20.8811 5.90525 22.6791 8.98112 22.8467 12.4892C22.2004 12.2537 21.5035 12.1253 20.7769 12.1253C20.3135 12.1253 19.8622 12.1775 19.4284 12.2764ZM7.26408 22.9043C8.69536 23.6063 10.3022 24 12 24C13.6978 24 15.3046 23.6063 16.7359 22.9043C15.8756 22.1348 15.2319 21.1235 14.9092 19.9757C14.0152 20.3584 13.032 20.57 12 20.57C10.968 20.57 9.98483 20.3584 9.0908 19.9757C8.76809 21.1235 8.12444 22.1348 7.26408 22.9043ZM6.44628 18.2881C6.44628 20.0868 5.00323 21.5449 3.22314 21.5449C1.44305 21.5449 0 20.0868 0 18.2881C0 16.4894 1.44305 15.0313 3.22314 15.0313C5.00323 15.0313 6.44628 16.4894 6.44628 18.2881ZM20.7769 21.5449C22.5569 21.5449 24 20.0868 24 18.2881C24 16.4894 22.5569 15.0313 20.7769 15.0313C18.9968 15.0313 17.5537 16.4894 17.5537 18.2881C17.5537 20.0868 18.9968 21.5449 20.7769 21.5449Z" fill="white"/>
+</svg>
\ No newline at end of file
diff --git a/packages/asc-web-components/public/static/images/cross.react.svg b/packages/asc-web-components/public/static/images/cross.react.svg
new file mode 100644
index 0000000000..6ab63f380b
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/cross.react.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.76288 6.35869C7.56764 6.16343 7.56764 5.84687 7.76288 5.65161L10.9493 2.46498C11.1445 2.26973 11.1445 1.95316 10.9493 1.75791L10.2422 1.05077C10.0469 0.855489 9.73031 0.855489 9.53504 1.05077L6.34878 4.23729C6.15352 4.43257 5.83691 4.43257 5.64165 4.23729L2.46017 1.05556C2.26491 0.860275 1.9483 0.860275 1.75304 1.05556L1.04596 1.76269C0.850716 1.95795 0.850716 2.27451 1.04596 2.46977L4.22755 5.65161C4.42279 5.84687 4.42279 6.16343 4.22755 6.35869L1.0501 9.53639C0.854858 9.73165 0.854858 10.0482 1.0501 10.2435L1.75718 10.9506C1.95245 11.1459 2.26905 11.1459 2.46432 10.9506L5.64165 7.77302C5.83691 7.57774 6.15352 7.57774 6.34878 7.77302L9.5309 10.9554C9.72616 11.1507 10.0428 11.1507 10.238 10.9554L10.9451 10.2483C11.1404 10.053 11.1404 9.73644 10.9451 9.54118L7.76288 6.35869Z" fill="#657077"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/cross.sidebar.react.svg b/packages/asc-web-components/public/static/images/cross.sidebar.react.svg
new file mode 100644
index 0000000000..c0ccb863e9
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/cross.sidebar.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="17" viewBox="0 0 17 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16.9862 0.721877L16.2791 0.0147705L8.50091 7.79295L0.722732 0.0147736L0.015625 0.72188L7.7938 8.50006L0.0156276 16.2782L0.722734 16.9853L8.50091 9.20716L16.2791 16.9853L16.9862 16.2782L9.20801 8.50005L16.9862 0.721877Z" fill="#D0D5DA"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/empty_screen_filter.png b/packages/asc-web-components/public/static/images/empty_screen_filter.png
new file mode 100644
index 0000000000000000000000000000000000000000..e79ba5e56fbdac7a2db5720d9ed998233ad82856
GIT binary patch
literal 7586
zcmai(<yRCA(5PYQrMpAAQ=}Ut7MAX%JEgljl#-MXkd;oU1?gBCB?ak*mF|9j?>YB=
zz4yb+oHKvG#PcL-ft7KAR6ryoBwSS$MV<d@_WuSZ`hQsx*>ejCiPlL~QBE&l`PeKl
zjaE7EHE6FeSj9xOv%>&GFvAs#I?7EhA@S4kpW+Cyj~@l92v7t>2_^`)IOVs}NGjD>
zvSP|Am{}_sNt1vE^0D6_SXzoZsU(TpF#uQNj1RSjYr4TbZKqv_Q@7VX(+ClX)0MWz
zl;e75^XVm_`hAi0d5iGL7y`>togbr(8kVDg@eH(V7Hn=%Hg^NJv88cSZ<Fo+qY3?_
z+<4vb`&+8?@~21(*XbguUJBEkd^7J!VKO6apRK{fI@#GgA%~3zL|rttrbTXhfTwN4
z@_jsBm)HEQq}NWuu2GhwvvZXVGK*+Dbb@Gb+w<TU5#4tj{Z|0szXi?V#f@UAwh`vN
z3rXMasN=rH!5`Sz*tpr;lzMfih67ym2VqFw1-)ly=6_n<5E{X^C-)t0g=9(nDd<`I
zZyF@e8s0jcu7$F*ZStbhP*YNNjkjj*8u@y0;l;|!@mei+exP?<?YQ14GV7#k<gts?
zClAD|36Z8UQhdBQjz5-YWoq}6w2ri^<gHGVB_)exDR2p(k8*Jw@aDy?K_|I&jt&X+
za9jViVdB4Q7F;Reh3ZF(=LaA!3L`SqjJ7aIX)#Bd1;O7M6i!Qg+*odMLv-e3XNOG#
zs+AZJn6%ZA4xvMlD8K%G4r0%r{P`D99ZOSF*f&fSQa7Mn7v;n0E8dy8#Lw6W#hXb?
zOl<v7eEhd9{~-STdDz`ZmdDGAZmMllUZ+mwmD6}5cdXCtuoy=qS0PxYslCBt2H-+F
zXkM-*^zY9=e5#hM;$rl;6I#VPacx)qw&-f8_`<JWTE{D;cs+|>?ne|ak61klCHzx*
zujv4JyGFDd8AcM?Twj1Dqp+aho|Fx7XEB51KK<$B+S{k=UyTM42(>1%X{pA{QJj>I
zKi^XNf`#PsMVR4&U1wIQA-R`&;{KDq;;4rv{QUzXFlzw^0F!nn>mbZ7G*;2Z#>Q=3
z_B%c3?vDwv_|uqz$ID?koDiZg0%H}YHR3tuYSt@L<or~ZFhJnFdhWgf;qesl;jECP
z{4%kK2T5d(LS(U%VL=9>$&9FDBvb1-8kpNNr1!mSrtVHwJH^Q$JS{-~lNDnF#dk+-
zRepuiYY8pvs1`Y*f?E*7Qu*+gmHYG6PQR00v+ZmfVMpZmN+NSM_w$_Q8ZJKymAoX2
zBDm@$aYk*uTseLm7+KCE*97$%PPe$&iHfEW;~1FXd)Z)#-c%XNX?B!v*9>MS^|NEx
z!*b}z()R+jAFC22LQjJVDjJP&bSg>I!Qg(wo`?Bs*Q(l7sT-NCxk}v$Ks9ok0!c*`
zG9QqJ)$s_~*!P?y2Zgh)>&C>$+&r7f??4d#hWAKizmm>%lkZ{*>Wk3-j?KDwNSVMi
zL*#8UQVYSdUG&`CAjRM?P2Dy61gK8WF~^hCrg3lCC?(g}ht(-`r25D>A`vq@Jst)p
z0pFv2h6__%KMOagtQ<Aznh7=fq3Sa6brlFZnVaIe&YvjoeaTj2v<l@rMz49_(;GBo
z%LCy(DzNv5e9&{|5^6QLm1k*Cf)R64qPDtJjz{X_G0#UBU_q>kvpUTY%GJA7*(NwO
z6<WFW$-mk8P4MQ2daK||OPKLVPoGnW59iy8|1yX#IK#As85YLRx!w3Jg-zqR%CAh1
z7%la6TMfTe`&u(*fT2bbksLrs^)<)yK_dBvKiv!2%{fbnt*GL!RRD`v{Sj85@$^lJ
z!+mu4i)TqU!WPVzJ-G|leMY%`KB%X=yNN?u7#SJ)vcAoy`HEy7{%G1qXfDDZg)YxU
z5fF9!^wQRI$+Gf?qSplf%Xq*BW5qC>EkcZ19hET$Wc_w{_gp~b>IS!Vzt)uQoi2Ds
zF}CF`BNe3wRV9)XN_3jV6u_0?Icb@z#R<Fj3P;JFS>$KRe1Z-=`d8jm3o)Giu#519
zKn(ErxgV6GaUC8&f%iYPRXzVTlkn@5Xch0YyhLDi80^u+S~vHPsS5>Jp#D+V6wp`h
zd~d+Sc<Land8a`9K($FfJyjT+JK||n^m>Ym%pG(tN(ALV`nY8swC-@aiu?6`#@|vP
zzpo;O<ooQ+EpdSDn%^{rF5ax`{zc%(t|XSAl!tu6nbcTBg3_k?u_gN1_y+F-6V@l2
zIrO+j_aY1K=jX(B>@Id-4xd>FXP)}XkCIi~PwkkTg~ST=kLBPOz(lGU>d2dRYxI2^
z?tsRZYYLRuAc|e8d60lPuoRi)W6o4ep9o2t&{mUCf?U?Ux~$YPFjQ4BvWmpJ&pe3|
z0fI9K1%)*=hz5@z#QvCe3$UymUMJZ-Sn2ep4%w+)?7PFBmZt$?(p>{ct#bisU~{g{
z2pY4TzNoSfjHv9fL~n*Nyv!(it?cBO4N8UddN51kYTHwQbb#)9bk`#dS@(Z1=x*Mq
z$ZEjiqlNjY|DS9tp~)KM`t>{S_|0q=zk$1<{WrUuv^YtDO0;_;1U52Bx}IF|y?gQa
zpt!*aL+3MQ?WAU}tw|DN`AmQ+O4AOci$aA9t?Eo6e>YGPX+HbqZGceDMcz1H_{D;5
z&&>~mpX1r+51&#}7952|;M(^K2)usX>6HG7In*mR+9<So_Pw`ouc(<f!9<|BA2i4*
zdN;{qo>=SrTL_Ja%tt;eDYF^^H*07mgPPJ-lCQo?_y^$K7RfX?^<{O^fBn&;I#*G7
z$GzemULz##OGQH5<GP;|cd8TyY$#A=sBo(ood?})s1cIn<}h<R#PF*RrP0YNm0y{Y
z)DwMQI~h}rm;4ff9`{G6S~m9))Cjincw1Fo&xY3c6lGM@e%F=P2%>j^UO73P#5qSB
zB9L{(+7$1;ysS0Pwec3da)_GKWi(n7^K$^RL~%$0SU6FnhRH4V5(*kJ%-*t$!w8Zv
z{s0{!F$<ZPizmiI>x@i1#j_&HM*3&&k{$Mkl{LGbUo?ZMfkrJ}r6w5AcYq0nVE<kW
z_i*8#0XOh8c`kvy2S@@k2{H?5K#$LE2mLJ6H(%vMkMX-&D(Uecy8xfsq_}pF6!DM}
zHLaJaXFDn$DF}{g%c{)!3-A+>bNV=FTYbHoEw18!ygc9Bhu!kfesv?^e;PML(<?$J
zgD-(k6GiEh;stdjT=YU~WX1r-(Svd$79X-viG?6|gkhYpzaCzVm;+i1L-Gb&YW5T!
z?^?j_u|=8K<Fntq^A67+-C_GEn$6K~7Q9mCD}qbbe&T802A$?xU>KgN^iJ$hT$S4>
zz3O1Wb?Opi)yZJ_Ur?ZPLAnU(cw~k6DA_VBH(Ydvtv6CNBzj8e<DUkZZTX9viomi~
zevCPtA&05t4i4S(ykud2cLVEp|2W5`<t^G|2;J?hw#hp?(PZb4S?P+?vG1dD8YarY
z+T&(PjQByZehLkY>w+=#e4aTEaM*MgrpNd3H-p0yg!8O9oE?+|dZA7md6Y$kKku@Z
z63_WoJYUQ2;?NAFP}n$?d>6ib)(=XFoP0jpsQhbra{r?@0IyTlI+E8e>f_Igl#8ix
zH|0)tdFS*|->a_Xu;wW0bArVg%k9V)J=Bs`isufGEjACYWPX{4iSU)X6J7f5?HA3q
zdCQUPBcn{nH!@n67C6eQc3!aCvFE1Yhj84G`%anY)%X-S<W+(^nuoev^@)uh*9TNH
zYf8wGy!x;Pe~*F$L3Bx79>Fk$>1JKLid_|C`2%zjD&QzE1?2ZX@1GU<DtZ0g@1K+t
zN5fS>w+SN|XJkdTt=qilGIgCaCb>mX+^IzXo!`Gsz{Q*xPi}t}kxx`aV)AwlR~H83
zT&m#_kTjBr9{n?>EK}DLFcVt(+d^~eEUd|vT=^^I*FuU=lxB{WPn~jXg9*#!xABVu
zrN1O)s=A%`e{K&O4)m=>>Fu>$F=v*VfA3WGy%wEOid^9V;K+$2OMdsQZYZ6Op3Pgf
z@4vDlH6zN+*GoE@*crP2_ir%xx1q3Aq<)-DtcAOnR!ko$T8c@8-e}MKXK<hL+V%Sl
z-Dw4TE4p{rgP@LJBMJyXfCerFdur6e=jM2`Ksbu5C*1)!%(&_R+qV#%jS@dJR4Og6
zJ9Bax{IbAT*l~*SYj`fBTb`%s-G?>EyNG&-U`tSCM!-iZSpj~2r0|RL&P`&ACpHSv
zJI(`*Vaqr9w{p-cmZ@fhoM|koI=u?xL6|_+t)rCl5UVbPD<T)bv9O*jg?^tWP?S&k
zIJPo3m{T%2>ePbCjZxH+;8St^6x!L^r*PX%Ib0M-lu<EK&TpCGgoM`3y&Hzaf{yDi
zXQ>ZlCv-^{5Me1zClAc_H2Ls>NYRh3DF^=I=4bscQiAHBj*uGJXc9?ND1J|w5~E(a
ziC#J(dkc!~05vC8z;B~$Vnp7(D_lSx@riG_k;^j^`|kB2Nyh35Lx=tC?NAwmb|Ofe
z6eEY+(%TB%-kdHF|43i#0Lj_O@xr;jQpDFER#3j1QQvjBhuB;K>7IR^PVH@#3bqQG
z`dmeboIsqA>79ASD>pDMDkPpY>7HlJ@Kvioogey-nheU%tyqOIkZ31k$ti@_<F)<f
z?l)hz9i4cL$(P@JpGOtDcY>Y`uJHtGNtoz)Po>U-+Rql(2Px`Q|1{ZgsZa6V*O&*X
zh~52;C_;@^R%@k!vt{<o;tTE3;X@238jzGmRxN|rMgafh*c`1MSnjr>{Rb}h!+;G)
zv<f^LaI>i<Y}3T~Qqt0?dLJ{G&EDmqH_<tT<XyLEUw#O(!XEiA9rXuZbmj7W0}uh4
zTu_dew#t4-k-$f;6uYb2*q>MG*BCl0q2b~5e%uyOsolroqCrFE2XCFn8}gjpW1LT-
zz3LK8p6xdu;#%DzF-~EmygdQPQfqV_EJWSlU2!?1PtngQ0*mw?H^s-)d_Gph%WB6L
zyRaS%YeVVHl8Tq-u*ZLFd%%4$Hh4sSeiw7Yb=^j)CY#cBX|Q10U(kjB=JFc|Wpk7r
z7ShSnWZja^>6euo`%aVE$$4M9XX!4$$(SH5{L?IM%YC@z_V!jb%nGkgrh)QACQ!(S
zv!xjnfAL);nJS-JS?|gz79n{)yx5<-Ep*oPgWSp^KxSgf!2^f!bCT%NEB78s1p^S-
zQc~|I_CixNS<`=AQIbzg_TCHq#?AhZK$wJ&;L=jh5y5<!R`||T{^o%t&E9u5D<LoP
zEu+B_Yr)MP1lvna;IeUVEsbR)d&b7hs)XD}iJUFcLPW!mS=@T)>#<-^-+vF28J>&h
zYegc)SW^J%6#dIXCxi5>;IK!DU@D!b#S={DNmYt#Pi1%2zd}3`bIyw2K7?#lBC<dt
zk=Uvu&*|>quLVZ1pX>1*#5~(3%QM#iTl6V@{gpsn`mszsbuM4+E~!Uv&rH}Y5rMFb
z(<TTo{G=^DQ~T>LcA(zEDQwrdeY3^TSIM;12U1d`*R&vpYKZ8mD$|_b+7@hc3Z!@j
z(Z9@wM}``j;nJnbk=gvWBW0NhJd;FsN$Pjw{}wl)+55NDPe{zvrWNML<)`5Eo0|KR
zPE1XWNzd7{g%TrHDrd>If#b%GyFNt~$3dm4h(^|LqDC8We>y0oZ*CA)S1<<;Sp{|0
zO%K3x6+0f(0(2|D`CM3av>wx4^^XzqLjspxB2d>5+TfZjd75>T1v;}x9xu+2_?Eq2
zfhuTrTMJL^<AM7P%t3Q($#FOkWiE%^3gk(f<4Kz1EQKfOOx5u#I3eh?4V%SqFov<I
zm<rdfO+86FIl8uRXeHTMtc7cP*d-l($M$uDDtF%y+Y7mvq5P1CKxm0x%})Klqw`ff
zr;pFpmo{f&%}9@9MiG;!i$VLkZj~wei8e9&)UF0h?}E5Pik6HuendVWJ81T~;XlRd
z4YzzXRThsB>t3QL()79d^^zoRp-No?phiK-7fFfs;i<?z+#f3>#`{_+ai?Y1p#23V
zkkEfRd=AStfZlg_5z(J5tTr4qMk735M>d^?W%UXr2Wc+2<rR9V3dO#?;Ma|>;#L!S
zx}YrwZNbJ86<>3I-?I5~$S`L1+dCFkAD|)Ot%7+-W2*^Kvg+nv8s`^G-R&3HEsV~K
zqzx~K52{||Rz=wFk`Ux%WNINcilL#QWdBW01E^>0wO0;5d8I_CKd!O+n1+XWM&a~G
zOK&C97d5nI=hQje7w&TXh^pP#MTuBQi*!$rxe-e`Ez~s6iO$!RG>4<B%d+Imj*v?I
zckSgva~6Gd0o|-)d*h9a{-sN;fu8aLO9(9}Nu`B%E}*|+(5XdT*i~thQ%OVE!a(Y=
z0uMOo!WvQffM@n?eU{vRXil+z+u4WQ0-1fLyu)+mvhFLW+}I+V=Q(vbR)5E6Ok6J=
z2V$Jeow?eo%{8CY|L($0AE;TkD>l}3MQWU;faMemwrjTTNIWX|>s5mXuwfcjaI<<h
z#62wU$#pzS#Ce-Fy@cu`B(@63G`Y?&`4rg^N$~}aE`Ng26P_0D^+REZpai^UVn!<0
zVNxFkJIVS|qZ3;AK4%Ky=yQ1BT*~@z^sX&>HYw+WSBi<KO4mzyOTbzcJVu~AW?|~n
zD6&sc^^DU|4LjsAXP%v*)Jx#4!qozkAgD8_*!H~uGE^HceK{=8p=~VqGqPdo{c6=P
z->W)Q2z=l=hVwBoPc5_Yq^z|WXegwAYLeKs3}faxZvGt^`u)-wMV)?S;UsR}<O2el
zkL5iDn^_Xb5*~RXpek(ZOJHytY-$lVz}*Xzf|QyY_H}d@pAD+-J;iY2w4an`!>A3w
zI2;Qp`E!9_sp%$0UM@iy2|lp0p=$7l-T2>!rD^DNK1`$->lcE^k(TNu#?2(bo+Qol
zjRvZz(hrV{O<}xhx(Y|#a^4Gk_tg);Sb%j~>u3iuVla`IM<6!r(j~QaJaj5#+of@?
zS8Hv;U;k?Oamg+q(dVkITcW3pOG7cAq-^w|^PlV9P#Pt{ke03eL^o&5^-t5Pbc$S|
z??;etS{bUwE`|_~{}5q|1dXJ7%y=&FC)Fs`PQm6XZcT@8jqs7Ym5Y^i_{-&2hiAmE
z1bnHhw20ukeYnh>@|u_5QkK{{iU^SJ+^G`QRYt06as9Pt-???!|EyQ$Me!|SRk-@u
zSSVh3UPq?O^;&S}=5V%r_hw_mQtSNwa(}61(HwhP`mtuk|KA^hfX!I)sO|qy(!btF
z6qakSx_V7W!=@F5ITQaURIWa%r==eAyI}kkiN{u4vHM-_9d9vMz&#+qyl>xDu#|)?
z=I9u?z=vGgf8WKx7Imp7yeD8Qacgc01D`JQ)7{;6>cHked^Gy=CVn`kaw;8et7efT
zhaNRKGX3+5VmUHbg(eE-YXFwV!{Z|*GCBrfgOB)R#wc_C*RTHe#8|BobPnIXeZynz
zvTNS)5`(2UQAFDX1}^alD5pguq@<)|A1mCKHCfEr#`UW1rmni}2_Lq1=qJbM@3G0>
zf1g=@Iv=+%GP+qy|91?}Qv;?=@0Ua*%TRUX{&<tF4$x3|{#zavM$XM+1uQEwf<Vd~
z$co}QJZGKKhrQh0@z{tC2>(NzmS&9Wi);@SgJ`d9z07Wa*Zkg53e?s{Zcl<527YIT
zHJ@1xfQ%*9PxfB|HgQva00UK8RCWL{a-t~y)OQxSnDB)+44WO%;YACD<3;=ZD+T#9
z6dpPSolCA{7;}R(uIxm=d82?sNom+{#jlt&7^Z|6gC4My>3+vTj(*>+v9n#RcP5s4
zY9$|PqJ12#FRC~b1tl%YHVFjpF|H?6QqJRJlV|G~BhCVC>uiJm^xUuMo>J$T{1n=6
z)VO1lCCMf<GUpG97hPyd=qus6k-DM&K=UAK&Ui+5r$SThEmq67-LV~5&`PM+RMw+}
zxKj!e;BG7wZB1XPUnDH1`I}?&IO7>fFUW@E+-ueyVodNSZ2%khEg%ow5ERK0b*N;8
z<}ZjGi@-w$Qcn!k<NY1={twVvx2IH!aRdqv0_&*Bms|nVLSXEL!d{!Eo#w*nahtn6
z4|DA~EV0y0k<>$*T?uAeEwc-{!A6e`LU_3P@Xq5!VMf{9NZ`i75-mNCbbFPt2qvfZ
zNVh9LfQsWVAUVUW1^hT=Ua)p<F|AG;eloLba|wdI{Iul7Tu=X!(D*bJ*<F6xb^ON=
z{gHU~DESQ2IG`u$iI)K0zCQ4(ca{)~rQK_Dz&7Bz-VRQNr4(ndM2#rau_1b0q@Ii_
z!Ko2(r%~JS8ok5{3JNqVv8aDOYf5vFv_HN60$S!JwW5<Ag37p@v{pR^a9u+}3Pe*u
zmZdo<X5>VAsO(Pzo>=VDpyC>pEkD3CXtR;oAWxBCbO!1RY0&?S8HXB)`zi&#LKon~
zvK7qd&cftXM6x@E`&~JBvswx~VCu2HHNmfWeJ@Y1g2l%Fd-1pj`As>u-d}b5zu5wU
zs3dhQw}&{X)An71e<0lsy33RQmPx)+9whQ?T4AwMv1&wYy@gPL<bagOA0uKAM&Wcl
zMKncU;n-eySq1y&%QRWd#g5qsRNkEjWTeV4l193$yD-N>V)FdFyiL~jwBU1lKs85^
zKY&!4qCm_$jy1!!%<;oglhSb8CcQ@*J;;4NM-9fj$J`E#6}_O)DQ2!{u);Fp*umvE
zlglOwqV9{eBbqKrc~5UyKpdZJ1tJ)+juIu`9eVHK`Bj%NQzectUuPC~?1Y5WpKUJX
zV(|Hlti--^?(<fz*j(8pTy*hG2n5>15~6y`UW<R#9%7n`=(1)gQtJJ6c3_Sgn546|
zl}I;s5rOhszCe|rf<X2zK@^*fsdwjW+0J%yE=)`k49O>&kPxs9sABqB*+)r4Zw%42
zQVpW^G~d!IqXuhes9wkTn9YnYcYrYDhExQUuTTzkuFiDkT$cdnv1mGTa$IW_0fL0d
z=>d%Q@H30gQDxUG@d0?{nf;hVE1R72N=aY_!ldLK6ZyeiY03AMG8~37=KDEw2S)Uc
zP|!3;_0pGeOOks*q2|9kG24Y@kvy47<-yJC8af;IwLGDn43N@Fn<qrcz6dSojS}l~
z-TjzXM-~pyctcW7+#R0<Lel9ZxP`yQe|iHGm_M9ZvFTXNwOtH*w0?G)ITc@(Q_IF^
z)Ngu!F#eyl$!|7!$P{Mcp@jg@<}X78WW^iz?^%wBuZDuIb~8>QEO>MoBXA^4C_-UK
z<9BM=cB<H6qkTcp*h{+_zT^+;?%14MJcNtmGor&!L0*_iG*X{Kq?f-Fwb6>7$aIF&
z@fN79uwB8f=;vQ&U$Y3?bPAHm;ze_|9On!YYN8NrIq?r!t}?YNx{ouZe`#cndaGPb
zF`P)!FUozm4_)MFLB%Pt;(-R-B{QM~$>}euNe$n`P>tOLO&z$uZ#UYm(SNzYr_Q92
zX^L#rR;?csBnnq+gg<-A(O`q#10_9$XIesrR<F@=JZu?#p{C~yHs8*MN(^?mR1_wm
zID9ZILZD9Dj4qfz+S?QQOXAAHk=lZr3Cv=vl|9|n>^_tW$*FWC;GYnY#8!{Qtj~TR
zz4T?P1gR1x%9eS1IM9i8quZ>V%M8kvEQ*tbZOoV`u7Wtvt~NiDg2)(+<93o9JK(`B
zW5ItonavQJ@$`Nwi}Fgpm%2kc6?oB~tN}_zHDWVAuA<;uWxqaO$5T~&cvFg}#88Ts
z$~Fh{tgZ2;H$r92xlhR2k^|p@p<YrRc5i0hbp@8Q`{iCpGyqvkrmDyi6j-F8Q>8o#
z%E^59tC%HJ!UXAhK}17%hGfO4g)!W2->!$BI8LNy83)@eEXNqju5)!puzV6I@I!e6
z^~A9&+Qz&IB+;I7M+wrdwN&dcIJKuU)E;5p`-A7(aF+JvNzP{5Q9pUp{}qyvcBB8t
nQj!^E|6fb_|7jMgzv8o1v=Cjs>W%*AUXfIlz>0P9mQnu$xrvtu

literal 0
HcmV?d00001

diff --git a/packages/asc-web-components/public/static/images/expander-down.react.svg b/packages/asc-web-components/public/static/images/expander-down.react.svg
new file mode 100644
index 0000000000..4de887bdcd
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/expander-down.react.svg
@@ -0,0 +1,12 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill-rule="evenodd">
+        <g transform="translate(-168.000000, -936.000000)" fill="#000000">
+            <g transform="translate(24.000000, 888.000000)">
+                <g transform="translate(144.000000, 48.000000)">
+                    <path fill="#000000" stroke="#000000" stroke-width="0.1" stroke-dasharray="null" stroke-linejoin="null" stroke-linecap="null" d="m1.40265,7.01045c0,0 21.20239,0 21.20239,0c0,0 -10.56768,11.23794 -10.56768,11.23794c0,0 -10.63471,-11.23794 -10.63471,-11.23794z" id="svg_29"/>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
\ No newline at end of file
diff --git a/packages/asc-web-components/public/static/images/expander-right.react.svg b/packages/asc-web-components/public/static/images/expander-right.react.svg
new file mode 100644
index 0000000000..f6572a4a3d
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/expander-right.react.svg
@@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+	   <g fill="#000000">
+		<g>
+		 <g>
+		  <path stroke="#000000" id="svg_11" d="m6.87241,23.01348l-0.00187,-21.23169l11.2357,10.63287l-11.23383,10.59882z" stroke-linecap="null" stroke-linejoin="null" stroke-dasharray="null" stroke-width="0.1" fill="#000000"/>
+		 </g>
+		</g>
+	   </g>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/external.link.react.svg b/packages/asc-web-components/public/static/images/external.link.react.svg
new file mode 100644
index 0000000000..bc9afc9828
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/external.link.react.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.97925 0H1.50001C1.08685 0 0.733487 0.146708 0.44007 0.44007C0.146708 0.733487 0 1.08683 0 1.50001V8.50006C0 8.91321 0.146708 9.26659 0.44007 9.56C0.733487 9.85342 1.08685 10.0001 1.50001 10.0001H8.50006C8.91322 10.0001 9.26659 9.85342 9.55988 9.56C9.85329 9.26659 10 8.91322 10 8.50006V5.02092L9.99479 5.01571H9V7.87507C9 8.18495 8.88997 8.44997 8.66991 8.67003C8.44994 8.8901 8.18492 9.00013 7.87505 9.00013H2.12501C1.81514 9.00013 1.55012 8.8901 1.33005 8.67003C1.11003 8.44997 1 8.18493 1 7.87507V2.12501C1 1.81513 1.11003 1.55012 1.33005 1.33005C1.55012 1.11003 1.81514 1 2.12501 1H4.99579V0.0165411L4.97925 0ZM9.67929 3.04609C9.7193 3.04609 9.76121 3.03774 9.80457 3.02105C9.93476 2.96423 9.99998 2.86575 10 2.72547V0.320688C10 0.233844 9.96827 0.158668 9.90487 0.0952501C9.84131 0.0317617 9.76614 0 9.67931 0H7.2746C7.13432 0 7.03573 0.0651905 6.97898 0.195414C6.92223 0.33241 6.94559 0.449244 7.04916 0.546109L7.77061 1.26754L4.09521 4.94297C4.03174 5.00638 4 5.08158 4 5.16833C4 5.25513 4.03174 5.33042 4.09521 5.39377L4.60623 5.90487C4.66968 5.96829 4.74484 6.00007 4.83174 6.00007C4.9186 6.00007 4.99369 5.96829 5.05723 5.90487L8.73246 2.22948L9.45386 2.95091C9.51403 3.01431 9.5892 3.04609 9.67929 3.04609Z" fill="#333333"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/eye.off.react.svg b/packages/asc-web-components/public/static/images/eye.off.react.svg
new file mode 100644
index 0000000000..6e138c7489
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/eye.off.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="6" viewBox="0 0 16 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.1508 1.0515L15.2658 0.969172C15.4895 0.801214 15.5421 0.469603 15.3872 0.228352C15.231 -0.0150493 14.9238 -0.0699825 14.7047 0.0956798C7.03837 5.91294 1.45783 0.381967 1.2234 0.144302C1.02556 -0.0566439 0.713815 -0.0464608 0.529595 0.166964C0.344449 0.381249 0.353435 0.716448 0.549285 0.918111C0.559858 0.929012 0.734431 1.10242 1.05305 1.35902L0.0710252 3.11676C-0.0690566 3.36747 0.00442013 3.69478 0.235555 3.84811C0.314582 3.89975 0.404314 3.92571 0.491138 3.92571C0.656197 3.92571 0.816894 3.83463 0.910326 3.67069L1.87055 1.95339C2.40894 2.3091 3.0993 2.69751 3.92182 3.02568L3.44858 4.74283C3.37021 5.02553 3.51677 5.32043 3.77566 5.40448L3.9168 5.42714C4.126 5.42714 4.32158 5.27797 4.38528 5.04719L4.85389 3.35356C5.61311 3.57889 6.46245 3.73107 7.37906 3.76722V5.46802C7.37906 5.76234 7.59804 6 7.86922 6C8.14013 6 8.35924 5.76234 8.35924 5.46802V3.75775C9.15903 3.71013 10.0067 3.56082 10.8917 3.28687L11.495 5.01348C11.5702 5.22619 11.7565 5.35643 11.9533 5.35643L12.1266 5.32286C12.3797 5.21845 12.508 4.91165 12.4118 4.63712L11.8244 2.95482C12.6303 2.62995 13.4632 2.20224 14.3236 1.63483L15.1177 2.78529C15.2144 2.92427 15.362 2.99886 15.5095 2.99886C15.6123 2.99886 15.715 2.96501 15.8031 2.892C16.0204 2.71558 16.0643 2.38211 15.9025 2.14731L15.1508 1.0515Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/eye.react.svg b/packages/asc-web-components/public/static/images/eye.react.svg
new file mode 100644
index 0000000000..33149fbba6
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/eye.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 3C4.94303 3 2.17081 4.7536 0.125192 7.60192C-0.0417306 7.83528 -0.0417306 8.16129 0.125192 8.39465C2.17081 11.2464 4.94303 13 8 13C11.057 13 13.8292 11.2464 15.8748 8.39808C16.0417 8.16472 16.0417 7.83871 15.8748 7.60535C13.8292 4.7536 11.057 3 8 3ZM8.21929 11.5209C6.19004 11.6548 4.51427 9.90117 4.64191 7.77008C4.74665 6.01304 6.10494 4.58888 7.78071 4.47907C9.80996 4.34523 11.4857 6.09883 11.3581 8.22992C11.2501 9.98353 9.89179 11.4077 8.21929 11.5209ZM8.11783 9.8943C7.02465 9.96637 6.1213 9.02265 6.19331 7.87646C6.24895 6.92931 6.9821 6.16404 7.88545 6.10226C8.97862 6.0302 9.88197 6.97392 9.80996 8.12011C9.75105 9.07069 9.0179 9.83596 8.11783 9.8943Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/filter.view.selector.row.react.svg b/packages/asc-web-components/public/static/images/filter.view.selector.row.react.svg
new file mode 100644
index 0000000000..3ef016e328
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/filter.view.selector.row.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 15C0 15.5523 0.447715 16 1 16H15C15.5523 16 16 15.5523 16 15C16 14.4477 15.5523 14 15 14H1C0.447715 14 0 14.4477 0 15ZM0 8C0 8.55228 0.447715 9 1 9H15C15.5523 9 16 8.55228 16 8C16 7.44771 15.5523 7 15 7H1C0.447715 7 0 7.44771 0 8ZM1 2C0.447715 2 0 1.55229 0 1C0 0.447715 0.447715 0 1 0H15C15.5523 0 16 0.447715 16 1C16 1.55229 15.5523 2 15 2H1Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/filter.view.selector.tile.react.svg b/packages/asc-web-components/public/static/images/filter.view.selector.tile.react.svg
new file mode 100644
index 0000000000..8c7b17dccf
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/filter.view.selector.tile.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C0.447715 0 0 0.447715 0 1V6C0 6.55228 0.447715 7 1 7H6C6.55228 7 7 6.55228 7 6V1C7 0.447715 6.55228 0 6 0H1ZM1 9C0.447715 9 0 9.44771 0 10V15C0 15.5523 0.447715 16 1 16H6C6.55228 16 7 15.5523 7 15V10C7 9.44772 6.55228 9 6 9H1ZM9 1C9 0.447715 9.44772 0 10 0H15C15.5523 0 16 0.447715 16 1V6C16 6.55228 15.5523 7 15 7H10C9.44771 7 9 6.55228 9 6V1ZM10 9C9.44772 9 9 9.44771 9 10V15C9 15.5523 9.44771 16 10 16H15C15.5523 16 16 15.5523 16 15V10C16 9.44772 15.5523 9 15 9H10Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/info.react.svg b/packages/asc-web-components/public/static/images/info.react.svg
new file mode 100644
index 0000000000..9a0368096e
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/info.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 15C11.866 15 15 11.866 15 8C15 4.13401 11.866 1 8 1C4.13401 1 1 4.13401 1 8C1 11.866 4.13401 15 8 15ZM7 6V4H9V6H7ZM7 12V7H9V12H7Z" fill="black"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/invitation.link.react.svg b/packages/asc-web-components/public/static/images/invitation.link.react.svg
new file mode 100644
index 0000000000..d20d0b4073
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/invitation.link.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.8483 7.24939L11.8447 10.252C10.187 11.9107 7.49775 11.9107 5.83975 10.252C5.57858 9.99154 5.37427 9.6981 5.19485 9.39549L6.59044 8.00001C6.65678 7.93311 6.7387 7.89477 6.81698 7.84961C6.91346 8.17925 7.08189 8.49132 7.34113 8.75059C8.16901 9.57914 9.51614 9.57799 10.3435 8.75059L13.3462 5.74808C14.1747 4.91963 14.1747 3.57282 13.3462 2.745C12.5187 1.91719 11.1719 1.91719 10.3435 2.745L9.27581 3.81388C8.40934 3.47651 7.47584 3.3858 6.56708 3.51897L8.84233 1.2438C10.501 -0.414599 13.1896 -0.414599 14.8483 1.2438C16.5062 2.90212 16.5062 5.5911 14.8483 7.24939ZM6.90821 12.1867L5.83971 13.2555C5.0119 14.0829 3.66469 14.0829 2.83674 13.2555C2.00885 12.427 2.00885 11.0802 2.83674 10.252L5.83971 7.24939C6.66819 6.42101 8.01448 6.42101 8.8423 7.24939C9.10094 7.5081 9.26954 7.8201 9.36694 8.14932C9.44567 8.10356 9.52658 8.06638 9.59288 7.99997L10.9884 6.60505C10.8101 6.30125 10.6047 6.00886 10.3435 5.74815C8.68588 4.08975 5.99637 4.08975 4.33798 5.74815L1.33546 8.75077C-0.322758 10.4097 -0.322758 13.0979 1.33546 14.7566C2.99386 16.4145 5.68273 16.4145 7.34109 14.7566L9.61693 12.4809C8.70769 12.6149 7.77394 12.5234 6.90821 12.1867Z" fill="#333333"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/item.active.react.svg b/packages/asc-web-components/public/static/images/item.active.react.svg
new file mode 100644
index 0000000000..ca3caa830a
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/item.active.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1.0918 2.70326C1.0918 1.53415 2.36996 0.814455 3.36961 1.42069L12.1026 6.71672C13.0637 7.29962 13.0659 8.69359 12.1065 9.27946L3.37358 14.6126C2.37404 15.223 1.0918 14.5036 1.0918 13.3324L1.0918 2.70326Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/mail.react.svg b/packages/asc-web-components/public/static/images/mail.react.svg
new file mode 100644
index 0000000000..45c5ba60ce
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/mail.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14.4 1H1.6C0.72 1 0 1.7427 0 2.65044V12.3496C0 13.2573 0.72 14 1.6 14H14.4C15.28 14 16 13.2573 16 12.3496V2.65044C16 1.7427 15.28 1 14.4 1ZM14.5455 4.15152L8 8.09091L1.45455 4.15152V2.57576L8 6.51515L14.5455 2.57576V4.15152Z" fill="#333333"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.delete.react.svg b/packages/asc-web-components/public/static/images/media.delete.react.svg
new file mode 100644
index 0000000000..3785cef6d5
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.delete.react.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="20" viewBox="0 0 18 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M6 0H12V2H18V4H12H6H0V2H6V0ZM2 5H16V20H2V5Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.download.react.svg b/packages/asc-web-components/public/static/images/media.download.react.svg
new file mode 100644
index 0000000000..3020c8173f
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.download.react.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="22" viewBox="0 0 20 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 0H6V10H1L10 19L19 10H14V0ZM20 22V20H0V22H20Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.fullscreen.react.svg b/packages/asc-web-components/public/static/images/media.fullscreen.react.svg
new file mode 100644
index 0000000000..f2c067f83e
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.fullscreen.react.svg
@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11 0H18V7H16V3.41423L11.7071 7.70711L10.2929 6.29289L14.5858 2H11V0ZM7 16V18H0V11H2V14.5858L6.2929 10.2929L7.70712 11.7071L3.41423 16H7Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.mute.react.svg b/packages/asc-web-components/public/static/images/media.mute.react.svg
new file mode 100644
index 0000000000..c8429b1a66
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.mute.react.svg
@@ -0,0 +1,5 @@
+<svg width="27" height="22" viewBox="0 0 27 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8 5L15 0V22L8 17H0V5H8ZM13 3.88638V18.1136L8.64093 15H2V7H8.64093L13 3.88638Z" fill="white"/>
+<path d="M19.5 11C19.5 9.23919 18.4887 7.71457 17.0152 6.97535L18.3288 4.84065C20.5152 6.02475 22 8.33898 22 11C22 13.6904 20.4822 16.0264 18.2561 17.1982L17.0143 15.0251C18.4883 14.286 19.5 12.7612 19.5 11Z" fill="white"/>
+<path d="M20.7381 21.5417L19.4973 19.3702C22.4756 17.7666 24.5 14.6197 24.5 11C24.5 7.43877 22.5405 4.33521 19.6408 2.70872L20.9521 0.577835C24.5653 2.64579 27 6.53857 27 11C27 15.549 24.4689 19.5067 20.7381 21.5417Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.muteoff.react.svg b/packages/asc-web-components/public/static/images/media.muteoff.react.svg
new file mode 100644
index 0000000000..ca1c667754
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.muteoff.react.svg
@@ -0,0 +1,6 @@
+<svg width="27" height="25" viewBox="0 0 27 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M15 17.5L22 24.5L23.5303 22.9697L1.53033 0.969666L0 2.5L3.5 6H0V18H8L15 23V17.5ZM13 15.5L5.5 8H2V16H8.64093L13 19.1136V15.5Z" fill="white"/>
+<path d="M13 4.88638V10L15 12V1L8.58333 5.58334L10.017 7.01706L13 4.88638Z" fill="white"/>
+<path d="M18.182 15.182L19.9498 16.9498C21.2165 15.683 22 13.933 22 12C22 9.33898 20.5152 7.02475 18.3288 5.84065L17.0152 7.97535C18.4887 8.71457 19.5 10.2392 19.5 12C19.5 13.2427 18.9963 14.3677 18.182 15.182Z" fill="white"/>
+<path d="M21.7175 18.7175L23.4853 20.4853C25.6569 18.3137 27 15.3137 27 12C27 7.53857 24.5653 3.64579 20.9521 1.57784L19.6408 3.70872C22.5405 5.33521 24.5 8.43877 24.5 12C24.5 14.6234 23.4367 16.9984 21.7175 18.7175Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.pause.react.svg b/packages/asc-web-components/public/static/images/media.pause.react.svg
new file mode 100644
index 0000000000..347cc754ce
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.pause.react.svg
@@ -0,0 +1,3 @@
+<svg width="15" height="18" viewBox="0 0 15 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 0H0V18H5V0ZM15 0H10V18H15V0Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.play.react.svg b/packages/asc-web-components/public/static/images/media.play.react.svg
new file mode 100644
index 0000000000..45a1ff317f
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.play.react.svg
@@ -0,0 +1,3 @@
+<svg width="21" height="22" viewBox="0 0 21 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 20.3473V1.65269L18.8449 11L1 20.3473Z" stroke="white" stroke-width="2"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.reset.react.svg b/packages/asc-web-components/public/static/images/media.reset.react.svg
new file mode 100644
index 0000000000..74304ed04a
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.reset.react.svg
@@ -0,0 +1,7 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0 5V0H5V2H2V5H0Z" fill="white"/>
+<path d="M18 0H13V2H16V5H18V0Z" fill="white"/>
+<path d="M16 13H18V18H13V16H16V13Z" fill="white"/>
+<path d="M0 13H2V16H5V18H0V13Z" fill="white"/>
+<path d="M14 4H4V14H14V4Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.rotateleft.react.svg b/packages/asc-web-components/public/static/images/media.rotateleft.react.svg
new file mode 100644
index 0000000000..a87733d770
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.rotateleft.react.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 16C16.866 16 20 12.866 20 9C20 5.13401 16.866 2 13 2C9.27739 2 6.23348 4.90585 6.01281 8.57299L8.29291 6.29289L9.70712 7.70711L5.00001 12.4142L0.292908 7.70711L1.70712 6.29289L4.00896 8.59473C4.2209 3.81225 8.16525 0 13 0C17.9706 0 22 4.02944 22 9C22 13.9706 17.9706 18 13 18C10.55 18 8.32866 17.021 6.70579 15.433L8.06432 13.9638C9.32995 15.2223 11.0742 16 13 16Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.rotateright.react.svg b/packages/asc-web-components/public/static/images/media.rotateright.react.svg
new file mode 100644
index 0000000000..e93efc4f3f
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.rotateright.react.svg
@@ -0,0 +1,3 @@
+<svg width="22" height="18" viewBox="0 0 22 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 16C5.13401 16 2 12.866 2 9C2 5.13401 5.13401 2 9 2C12.7226 2 15.7665 4.90585 15.9872 8.57299L13.7071 6.29289L12.2929 7.70711L17 12.4142L21.7071 7.70711L20.2929 6.29289L17.991 8.59473C17.7791 3.81225 13.8348 0 9 0C4.02944 0 0 4.02944 0 9C0 13.9706 4.02944 18 9 18C11.45 18 13.6713 17.021 15.2942 15.433L13.9357 13.9638C12.6701 15.2223 10.9258 16 9 16Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.zoomin.react.svg b/packages/asc-web-components/public/static/images/media.zoomin.react.svg
new file mode 100644
index 0000000000..8618e1cc43
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.zoomin.react.svg
@@ -0,0 +1,6 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.5" cy="8.5" r="7.5" stroke="white" stroke-width="2"/>
+<path d="M17.5 19.5L13 15L15 13L19.5 17.5L17.5 19.5Z" fill="white"/>
+<rect x="8" y="5" width="1" height="7" fill="white"/>
+<rect x="12" y="8" width="1" height="7" transform="rotate(90 12 8)" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/media.zoomout.react.svg b/packages/asc-web-components/public/static/images/media.zoomout.react.svg
new file mode 100644
index 0000000000..71292677ff
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/media.zoomout.react.svg
@@ -0,0 +1,5 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="8.5" cy="8.5" r="7.5" stroke="white" stroke-width="2"/>
+<path d="M17.5 19.5L13 15L15 13L19.5 17.5L17.5 19.5Z" fill="white"/>
+<rect x="12" y="8" width="1" height="7" transform="rotate(90 12 8)" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/menu.react.svg b/packages/asc-web-components/public/static/images/menu.react.svg
new file mode 100644
index 0000000000..0aede2a8f0
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/menu.react.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 2H24V4H0V2ZM0 11H24V13H0V11ZM24 20H0V22H24V20Z" fill="#7A95B0"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/nav.logo.opened.react.svg b/packages/asc-web-components/public/static/images/nav.logo.opened.react.svg
new file mode 100644
index 0000000000..f46141f529
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/nav.logo.opened.react.svg
@@ -0,0 +1,29 @@
+<svg width="147" height="24" viewBox="0 0 147 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M34.1654 6.82411C32.7061 8.0184 32 9.85576 32 12.2903C32 14.7248 32.7061 16.5621 34.1654 17.8023C35.6248 19.0426 37.2725 19.6397 39.2026 19.6397C41.0855 19.6397 42.7803 19.0426 44.1925 17.8023C45.6048 16.6081 46.311 14.7707 46.311 12.3362C46.311 9.85576 45.6048 8.06433 44.1925 6.82411C42.7803 5.58389 41.1326 4.98676 39.2026 4.98676C37.2725 4.98676 35.5777 5.58389 34.1654 6.82411ZM36.0485 15.9651C35.4365 15.1842 35.107 13.9898 35.107 12.2904C35.107 10.6366 35.4365 9.4424 36.0485 8.70746C36.7075 7.92658 37.4136 7.4213 38.1669 7.23756C38.3551 7.19162 38.5434 7.14569 38.6847 7.14569C38.8259 7.09976 38.9671 7.09976 39.1553 7.09976H39.1554C39.2496 7.09976 39.332 7.11124 39.4143 7.12273C39.4967 7.13421 39.5791 7.14569 39.6732 7.14569C39.8145 7.14569 40.0029 7.19162 40.1912 7.23756C40.9443 7.4213 41.6505 7.92658 42.2624 8.70746C42.8744 9.48833 43.2039 10.7286 43.2039 12.3362C43.2039 13.944 42.8744 15.1842 42.2624 15.9651C41.6505 16.7459 40.9443 17.2512 40.1912 17.435C40.1587 17.4429 40.1276 17.4508 40.0974 17.4585C39.9527 17.4953 39.8291 17.5268 39.6732 17.5268C39.485 17.5727 39.3437 17.5727 39.1554 17.5727H39.1554C39.0848 17.5727 39.0024 17.5612 38.9201 17.5498C38.8377 17.5383 38.7553 17.5268 38.6847 17.5268C38.5289 17.5268 38.4053 17.4953 38.2606 17.4585C38.2304 17.4508 38.1993 17.4429 38.1669 17.435C37.4136 17.2512 36.7075 16.7459 36.0485 15.9651Z" fill="white"/>
+<path d="M47.8643 5.12457H51.7245L56.8086 14.1736L57.5618 16.1029H57.6088L57.5618 13.5764V5.12457H60.5275V19.456H56.6674L51.5832 10.0855L50.83 8.47776H50.7829L50.83 11.0041V19.456H47.8643V5.12457Z" fill="white"/>
+<path d="M63.1172 5.12457H66.0829V17.0215H71.9202V19.456H63.1172V5.12457Z" fill="white"/>
+<path d="M70.084 5.12457H73.5205L76.5332 10.1773L77.004 11.1419H77.0982L77.5689 10.1773L80.6289 5.12457H83.7829L78.4633 13.6224V19.456H75.4976V13.6224L70.084 5.12457Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M86.0424 6.82411C84.583 8.0184 83.877 9.85576 83.877 12.2903C83.877 14.7248 84.6302 16.5621 86.0424 17.8023C87.5017 19.0426 89.1493 19.6397 91.0794 19.6397C92.9625 19.6397 94.6572 19.0426 96.0694 17.8023C97.4817 16.6081 98.1878 14.7707 98.1878 12.3362C98.1878 9.85576 97.4817 8.06433 96.0694 6.82411C94.6572 5.58389 93.0095 4.98676 91.0794 4.98676C89.1493 4.98676 87.4547 5.58389 86.0424 6.82411ZM87.9254 15.9651C87.3134 15.1842 86.9839 13.9898 86.9839 12.2904C86.9839 10.6366 87.3134 9.4424 87.9254 8.70746C88.5845 7.92658 89.2906 7.4213 90.0438 7.23756C90.2321 7.19162 90.4204 7.14569 90.5616 7.14569C90.7028 7.09976 90.844 7.09976 91.0323 7.09976H91.0324C91.1265 7.09976 91.2089 7.11124 91.2913 7.12273C91.3737 7.13421 91.456 7.14569 91.5502 7.14569C91.6913 7.14569 91.8794 7.19156 92.0677 7.23746L92.0681 7.23756C92.8212 7.4213 93.5274 7.92658 94.1393 8.70746C94.7513 9.48833 95.0809 10.7286 95.0809 12.3362C95.0809 13.944 94.7513 15.1842 94.1393 15.9651C93.5274 16.7459 92.8212 17.2512 92.0681 17.435C92.0355 17.4429 92.0044 17.4508 91.9742 17.4585C91.8295 17.4954 91.7059 17.5268 91.5502 17.5268C91.3619 17.5727 91.2207 17.5727 91.0324 17.5727H91.0324C90.9618 17.5727 90.8794 17.5612 90.797 17.5498C90.7146 17.5383 90.6322 17.5268 90.5616 17.5268C90.4208 17.5268 90.2332 17.4811 90.0455 17.4354L90.0438 17.435C89.2435 17.2512 88.5845 16.7459 87.9254 15.9651Z" fill="#D7E4EA"/>
+<path d="M99.7881 5.12457H107.979V7.55908H102.754V11.0041H107.743V13.4386H102.754V19.456H99.7881V5.12457Z" fill="#D7E4EA"/>
+<path d="M109.722 5.12457H117.913V7.55908H112.687V11.0041H117.677V13.4386H112.687V19.456H109.722V5.12457Z" fill="#D7E4EA"/>
+<path d="M119.654 19.456V5.12457H122.621V19.456H119.654Z" fill="#D7E4EA"/>
+<path d="M136.014 5.44608V7.92652C135.496 7.74278 134.978 7.60499 134.414 7.51312C133.849 7.42125 133.237 7.37531 132.577 7.37531C131.024 7.37531 129.848 7.83465 129 8.79927C128.153 9.71796 127.729 10.9122 127.729 12.3362C127.729 13.7142 128.105 14.8626 128.906 15.7813C129.706 16.6999 130.836 17.2052 132.295 17.2052C132.813 17.2052 133.331 17.1593 133.943 17.1134C134.554 17.0214 135.166 16.8837 135.826 16.6081L136.014 19.0425C135.92 19.0885 135.779 19.1345 135.638 19.1804C135.45 19.2263 135.261 19.2722 135.026 19.3182C134.649 19.41 134.178 19.456 133.613 19.5479C133.049 19.5937 132.483 19.6397 131.871 19.6397C131.777 19.6397 131.683 19.6397 131.636 19.6397C131.542 19.6397 131.448 19.6397 131.401 19.6397C129.706 19.5479 128.153 18.9048 126.741 17.8023C125.328 16.654 124.622 14.8626 124.622 12.474C124.622 10.1314 125.328 8.294 126.693 7.00784C128.058 5.72169 129.942 5.07861 132.249 5.07861C132.86 5.07861 133.425 5.07861 133.896 5.12454C134.414 5.17047 134.884 5.26234 135.402 5.35421C135.496 5.40015 135.638 5.40015 135.732 5.44608C135.779 5.40015 135.873 5.44608 136.014 5.44608Z" fill="#D7E4EA"/>
+<path d="M137.866 5.12457H146.669V7.37534H140.879V10.9582H146.105V13.209H140.879V17.2053H146.669V19.456H137.866V5.12457Z" fill="#D7E4EA"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3099 23.7112L0.67919 18.8606C-0.226397 18.4371 -0.226397 17.7827 0.67919 17.3976L4.38028 15.7038L11.2707 18.8606C12.1762 19.284 13.6331 19.284 14.4992 18.8606L21.3895 15.7038L25.0907 17.3976C25.9963 17.8212 25.9963 18.4756 25.0907 18.8606L14.4598 23.7112C13.6331 24.0962 12.1762 24.0962 11.3099 23.7112Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.31 17.5139L0.67919 12.6633C-0.226397 12.2398 -0.226397 11.5853 0.67919 11.2003L4.30154 9.54492L11.31 12.7403C12.2156 13.1637 13.6723 13.1637 14.5386 12.7403L21.5471 9.54492L25.1694 11.2003C26.075 11.6238 26.075 12.2783 25.1694 12.6633L14.5386 17.5139C13.6331 17.9374 12.1762 17.9374 11.31 17.5139Z" fill="url(#paint1_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.31 11.4819L0.67919 6.63119C-0.226397 6.20772 -0.226397 5.55326 0.67919 5.16829L11.31 0.317604C12.2155 -0.105868 13.6724 -0.105868 14.5387 0.317604L25.1694 5.16829C26.075 5.59176 26.075 6.24622 25.1694 6.63119L14.5387 11.4819C13.633 11.8669 12.1763 11.8669 11.31 11.4819Z" fill="url(#paint2_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="40.4198" y1="28.3092" x2="40.4198" y2="10.5998" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCC2B1"/>
+<stop offset="0.8848" stop-color="#D9420B"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="31.0804" y1="20.4113" x2="31.0804" y2="8.76439" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEEDC9"/>
+<stop offset="0.6606" stop-color="#8BBA25"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="30.3174" y1="15.4763" x2="30.3174" y2="-0.372617" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C2EBFA"/>
+<stop offset="1" stop-color="#26A8DE"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/nav.logo.react.svg b/packages/asc-web-components/public/static/images/nav.logo.react.svg
new file mode 100644
index 0000000000..4d88e63c26
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/nav.logo.react.svg
@@ -0,0 +1,19 @@
+<svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3099 23.7112L0.67919 18.8606C-0.226397 18.4371 -0.226397 17.7827 0.67919 17.3977L4.38028 15.7038L11.2707 18.8606C12.1762 19.284 13.633 19.284 14.4992 18.8606L21.3895 15.7038L25.0907 17.3977C25.9962 17.8212 25.9962 18.4756 25.0907 18.8606L14.4598 23.7112C13.633 24.0962 12.1762 24.0962 11.3099 23.7112Z" fill="url(#paint0_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.3099 17.5139L0.679189 12.6633C-0.226397 12.2397 -0.226397 11.5853 0.679189 11.2003L4.30153 9.54492L11.3099 12.7403C12.2156 13.1637 13.6723 13.1637 14.5386 12.7403L21.5471 9.54492L25.1694 11.2003C26.075 11.6238 26.075 12.2782 25.1694 12.6633L14.5386 17.5139C13.633 17.9374 12.1762 17.9374 11.3099 17.5139Z" fill="url(#paint1_linear)"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M11.31 11.4819L0.679189 6.63118C-0.226397 6.20771 -0.226397 5.55325 0.679189 5.16828L11.31 0.317604C12.2155 -0.105868 13.6724 -0.105868 14.5386 0.317604L25.1694 5.16828C26.075 5.59175 26.075 6.24621 25.1694 6.63118L14.5386 11.4819C13.633 11.8669 12.1762 11.8669 11.31 11.4819Z" fill="url(#paint2_linear)"/>
+<defs>
+<linearGradient id="paint0_linear" x1="40.4198" y1="28.3092" x2="40.4198" y2="10.5998" gradientUnits="userSpaceOnUse">
+<stop stop-color="#FCC2B1"/>
+<stop offset="0.8848" stop-color="#D9420B"/>
+</linearGradient>
+<linearGradient id="paint1_linear" x1="31.0804" y1="20.4113" x2="31.0804" y2="8.76439" gradientUnits="userSpaceOnUse">
+<stop stop-color="#DEEDC9"/>
+<stop offset="0.6606" stop-color="#8BBA25"/>
+</linearGradient>
+<linearGradient id="paint2_linear" x1="30.3174" y1="15.4762" x2="30.3174" y2="-0.372617" gradientUnits="userSpaceOnUse">
+<stop stop-color="#C2EBFA"/>
+<stop offset="1" stop-color="#26A8DE"/>
+</linearGradient>
+</defs>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/people.react.svg b/packages/asc-web-components/public/static/images/people.react.svg
new file mode 100644
index 0000000000..e9e6713299
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/people.react.svg
@@ -0,0 +1,7 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24px" height="24px" viewBox="0 0 16 16">
+  <title>calendar</title>
+  <g>
+    <path d="M10 10v-1.5c0.459-0.185 0.815-0.541 0.996-0.988l0.004-0.012v-3c0-1-1-2.5-2-2.5h-2c-1 0-2 1.5-2 2.5v3c0.185 0.459 0.541 0.815 0.988 0.996l0.012 0.004v1.5s-4 2-4 3v1h12v-1c0-1-4-3-4-3z"></path>
+  </g>
+</svg>
+
diff --git a/packages/asc-web-components/public/static/images/projects.react.svg b/packages/asc-web-components/public/static/images/projects.react.svg
new file mode 100644
index 0000000000..88cd4ba15e
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/projects.react.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M22 24V20.0679C22 20.0679 15.3675 6.10521 15.2064 5.83268C14.681 4.94549 14.0379 4.34813 13.1038 4.07748V1.12301C13.1038 0.502931 12.6296 0 11.9934 0C11.3572 0 10.883 0.502931 10.883 1.12301V4.09161C10.5928 4.09161 10.0717 4.28097 9.81625 4.42488C7.92836 5.48679 7.32941 8.13156 8.41893 9.96958C8.59435 10.2216 9.62992 11.4669 9.62992 11.4669L18.4655 21.4913L22 24ZM6.91661 9.25358L2 20.0011V24L5.03377 21.474L10.9207 15.0692C10.9207 15.0692 7.50801 10.8696 7.40958 10.7045C7.23498 10.4091 6.91661 9.25358 6.91661 9.25358ZM13.5479 7.85304C13.5479 6.94909 12.8021 6.21645 11.8824 6.21645C10.9626 6.21645 10.2168 6.94863 10.2168 7.85258C10.2168 8.75653 10.9626 9.48917 11.8824 9.48917C12.8021 9.48917 13.5479 8.75699 13.5479 7.85304Z" fill="#7A95B0"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/question.react.svg b/packages/asc-web-components/public/static/images/question.react.svg
new file mode 100644
index 0000000000..4986c5ab92
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/question.react.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.1955 2.98823C10.6589 2.06902 9.93115 1.34122 9.01191 0.804692C8.09251 0.268194 7.08885 0 6.00018 0C4.91161 0 3.90766 0.268194 2.98842 0.804692C2.06913 1.34114 1.34133 2.06893 0.804774 2.98823C0.268194 3.90757 0 4.91153 0 6.00001C0 7.08855 0.268276 8.09234 0.804692 9.01175C1.34122 9.93096 2.06902 10.6588 2.98831 11.1953C3.90766 11.7318 4.91153 12 6.00007 12C7.08861 12 8.09259 11.7318 9.01188 11.1953C9.93112 10.6589 10.6589 9.93096 11.1954 9.01175C11.7318 8.09243 12 7.0885 12 6.00001C12 4.91142 11.7318 3.90744 11.1955 2.98823ZM7.00025 9.75002C7.00025 9.82287 6.97666 9.88282 6.92984 9.92962C6.88321 9.97643 6.82326 9.99986 6.75042 9.99986H5.25024C5.17734 9.99986 5.11742 9.97643 5.07054 9.92962C5.02364 9.8828 5.00022 9.82287 5.00022 9.75002V8.24985C5.00022 8.17701 5.02361 8.11705 5.07054 8.07026C5.11742 8.02352 5.17734 8.00013 5.25024 8.00013H6.75042C6.82326 8.00013 6.88321 8.02352 6.92984 8.07026C6.97666 8.11708 7.00025 8.17701 7.00025 8.24985V9.75002ZM8.90254 5.13277C8.83736 5.32549 8.76451 5.48314 8.68379 5.60548C8.60309 5.72788 8.48712 5.8529 8.33602 5.98045C8.18525 6.10805 8.06536 6.19925 7.97659 6.25403C7.88821 6.30862 7.76047 6.383 7.59399 6.47664C7.42206 6.5755 7.28026 6.70447 7.16835 6.8634C7.05634 7.02222 7.00036 7.15108 7.00036 7.24994C7.00036 7.32301 6.97677 7.38291 6.92992 7.42975C6.88321 7.47657 6.82329 7.49997 6.75042 7.49997H5.25032C5.17743 7.49997 5.1175 7.47657 5.07062 7.42975C5.02369 7.38291 5.00035 7.32301 5.00035 7.24994V6.96867C5.00035 6.61972 5.13698 6.29275 5.41046 5.98816C5.68393 5.68344 5.98472 5.45818 6.31289 5.31233C6.56273 5.19778 6.73988 5.08056 6.84403 4.96078C6.94834 4.84101 7.00041 4.682 7.00041 4.48419C7.00041 4.31226 6.90267 4.15864 6.70732 4.02313C6.51197 3.88776 6.28947 3.82006 6.03939 3.82006C5.76849 3.82006 5.5446 3.88259 5.36747 4.00764C5.19554 4.13256 4.97165 4.37219 4.69557 4.7263C4.6487 4.78886 4.58357 4.82019 4.50022 4.82019C4.43772 4.82019 4.38822 4.80459 4.3518 4.77342L3.32062 3.99213C3.20084 3.89835 3.18002 3.78903 3.25806 3.66401C3.92481 2.55462 4.89092 1.99992 6.15651 1.99992C6.60974 1.99992 7.05251 2.10672 7.48478 2.3203C7.91702 2.53377 8.27776 2.83589 8.56692 3.22657C8.85572 3.61711 9.0005 4.04166 9.0005 4.5C9.00012 4.72915 8.96744 4.93999 8.90254 5.13277Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/rectangle.filter.click.react.svg b/packages/asc-web-components/public/static/images/rectangle.filter.click.react.svg
new file mode 100644
index 0000000000..374d288ab7
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/rectangle.filter.click.react.svg
@@ -0,0 +1,5 @@
+<svg width="33" height="26" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H21.1954C21.9785 0.5 22.7163 0.866919 23.1889 1.49134L31.2783 12.1803C31.6858 12.7188 31.6832 13.4633 31.2719 13.999L23.1913 24.5226C22.7182 25.1388 21.9854 25.5 21.2084 25.5H3C1.61929 25.5 0.5 24.3807 0.5 23V3Z" fill="#ECEEF1" stroke="#A3A9AE"/>
+<rect x="13.5" y="6.5" width="13" height="1" transform="rotate(90 13.5 6.5)" fill="#D8D8D8" stroke="#555F65"/>
+<rect x="6.5" y="12.5" width="13" height="1" fill="#D8D8D8" stroke="#555F65"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/rectangle.filter.react.svg b/packages/asc-web-components/public/static/images/rectangle.filter.react.svg
new file mode 100644
index 0000000000..2cbcd68cda
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/rectangle.filter.react.svg
@@ -0,0 +1,5 @@
+<svg width="33" height="26" viewBox="0 0 33 26" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.5 3C0.5 1.61929 1.61929 0.5 3 0.5H21.1954C21.9785 0.5 22.7163 0.866919 23.1889 1.49134L31.2783 12.1803C31.6858 12.7188 31.6832 13.4633 31.2719 13.999L23.1913 24.5226C22.7182 25.1388 21.9854 25.5 21.2084 25.5H3C1.61929 25.5 0.5 24.3807 0.5 23V3Z" fill="#F8F9F9" stroke="#ECEEF1"/>
+<rect x="13.5" y="6.5" width="13" height="1" transform="rotate(90 13.5 6.5)" fill="#D8D8D8" stroke="#979797"/>
+<rect x="6.5" y="12.5" width="13" height="1" fill="#D8D8D8" stroke="#979797"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/search.react.svg b/packages/asc-web-components/public/static/images/search.react.svg
new file mode 100644
index 0000000000..49cc89c87c
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/search.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.5439 1.22742C13.5519 3.35708 14.2643 7.52226 12.1342 10.5302L15.231 13.591C15.2488 13.6077 15.2651 13.624 15.2819 13.6418C15.8127 14.2011 15.7903 15.085 15.231 15.6158C14.6717 16.1471 13.7878 16.1247 13.2566 15.5654L10.0819 12.4202C7.81735 13.7576 4.97881 13.6405 2.83185 12.1205C-0.176644 9.99084 -0.888566 5.82617 1.24109 2.81818C3.37076 -0.190316 7.53593 -0.902238 10.5439 1.22742ZM2.37792 6.68418C2.37945 9.06115 4.30657 10.9868 6.68355 10.9862H6.6866C9.0646 10.9822 10.9892 9.052 10.9851 6.67451C10.9805 4.30059 9.05442 2.37804 6.68049 2.37906C4.30301 2.38008 2.37741 4.3072 2.37792 6.68418Z" fill="#D0D5DA"/>
+</svg>
\ No newline at end of file
diff --git a/packages/asc-web-components/public/static/images/send.clock.react.svg b/packages/asc-web-components/public/static/images/send.clock.react.svg
new file mode 100644
index 0000000000..c8a8f8a3ac
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/send.clock.react.svg
@@ -0,0 +1,3 @@
+<svg width="12" height="13" viewBox="0 0 12 13" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11 11H10L10 9.69281C10 9.41081 9.88094 9.14192 9.67214 8.95238L7.90499 7.34826C7.68563 7.14913 7.68653 6.80402 7.90694 6.60606L9.66826 5.02408C9.87942 4.83441 10 4.56395 10 4.28011V3H11V1L1.00001 0.976074C1.00001 1.47607 1.00002 2.5 1.00002 3H2.00004V4.28012C2.00004 4.56395 2.12066 4.83441 2.33182 5.02408L4.0931 6.60605C4.3135 6.80402 4.31441 7.14913 4.09505 7.34825L2.32789 8.95237C2.11908 9.14192 2.00001 9.41081 2.00001 9.69282L2.00002 11H1V12.9761L11 13V11ZM4.00001 10.4145C4.00001 10.047 4.39306 9.702 4.65307 9.44199L5.73497 8.5C5.88155 8.35352 6.11903 8.35352 6.26552 8.5L7.34752 9.44199C7.60753 9.702 8.00001 10.047 8.00001 10.4145L8.00002 11H4.00002L4.00001 10.4145Z" fill="#3B72A7"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/settings.react.svg b/packages/asc-web-components/public/static/images/settings.react.svg
new file mode 100644
index 0000000000..94343aa4bb
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/settings.react.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M20.7444 9.85584L23.1218 10.2525C23.6287 10.3359 23.9993 10.7739 24 11.288V12.7118C24 13.226 23.6294 13.664 23.1226 13.7475L20.7453 14.1444C20.5255 15.0438 20.1702 15.8876 19.7031 16.6574L21.137 18.6679C21.438 19.0854 21.389 19.6574 21.0265 20.02L20.0194 21.0271C19.6562 21.3911 19.0834 21.438 18.6674 21.1392L16.6533 19.7006C15.8871 20.1628 15.0508 20.5137 14.1587 20.7319L13.7603 23.1225C13.6768 23.6287 13.2388 24 12.7247 24H11.2998C10.7867 24 10.3473 23.6286 10.2657 23.1225L9.86578 20.7319C8.80635 20.4719 7.81909 20.0332 6.94641 19.4362L4.88397 20.7319C4.45037 21.0051 3.8817 20.9252 3.53893 20.54L2.59412 19.4758C2.25285 19.0912 2.2393 18.517 2.5619 18.1186L4.07691 16.2422C3.72645 15.5896 3.46278 14.8857 3.28115 14.1489L0.877394 13.7475C0.37207 13.6641 0 13.226 0 12.7119V11.2881C0 10.7739 0.37207 10.3359 0.877394 10.2525L3.28115 9.8511C3.50232 8.95568 3.85569 8.11343 4.32151 7.34623L2.93839 5.40893C2.6399 4.99219 2.68645 4.41981 3.04933 4.05614L4.05599 3.04873C4.41965 2.68583 4.99202 2.63928 5.40874 2.937L7.34229 4.31695C8.1153 3.8467 8.96235 3.48965 9.86578 3.26845L10.2657 0.877474C10.3473 0.371358 10.7867 0 11.2998 0H12.7247C13.2388 0 13.6768 0.371358 13.7603 0.877474L14.158 3.2677C15.2507 3.53542 16.2637 3.99681 17.1579 4.62161L19.1911 3.3435C19.6246 3.06959 20.193 3.15091 20.5357 3.53542L21.4813 4.59959C21.8225 4.98451 21.8372 5.55834 21.5135 5.95715L19.9916 7.84426C20.3197 8.4741 20.5716 9.14939 20.7444 9.85584ZM7.53782 12C7.53782 14.4844 9.55301 16.5 12.0377 16.5C14.5219 16.5 16.5375 14.4844 16.5375 12C16.5375 9.51526 14.5219 7.50001 12.0377 7.50001C9.55301 7.50001 7.53782 9.51526 7.53782 12Z" fill="white"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/share.google.react.svg b/packages/asc-web-components/public/static/images/share.google.react.svg
new file mode 100644
index 0000000000..5ed6c1399f
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/share.google.react.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M17.64 9.20419C17.64 8.56601 17.5827 7.95237 17.4764 7.36328H9V10.8446H13.8436C13.635 11.9696 13.0009 12.9228 12.0477        13.561V15.8192H14.9564C16.6582 14.2524 17.64 11.9451 17.64 9.20419Z" fill="#4285F4"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 18C11.43 18 13.4673 17.1941 14.9564 15.8195L12.0477 13.5613C11.2418 14.1013 10.2109 14.4204 9 14.4204C6.65591 14.4204         4.67182 12.8372 3.96409 10.71H0.957275V13.0418C2.43818 15.9831 5.48182 18 9 18Z" fill="#34A853"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M3.96409 10.7098C3.78409 10.1698 3.68182 9.59301 3.68182 8.99983C3.68182 8.40664 3.78409 7.82983 3.96409         7.28983V4.95801H0.957273C0.347727 6.17301 0 7.54755 0 8.99983C0 10.4521 0.347727 11.8266 0.957273 13.0416L3.96409 10.7098Z" fill="#FBBC05"/>
+  <path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.57955C10.3214 3.57955 11.5077 4.03364 12.4405 4.92545L15.0218 2.34409C13.4632 0.891818 11.4259 0 9 0C5.48182 0 2.43818        2.01682 0.957275 4.95818L3.96409 7.29C4.67182 5.16273 6.65591 3.57955 9 3.57955Z" fill="#EA4335"/>
+</svg>
\ No newline at end of file
diff --git a/packages/asc-web-components/public/static/images/share.linkedin.react.svg b/packages/asc-web-components/public/static/images/share.linkedin.react.svg
new file mode 100644
index 0000000000..65c1ed4211
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/share.linkedin.react.svg
@@ -0,0 +1,4 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.75036 8.05344C9.74586 8.06301 9.73967 8.07201 9.73292 8.08044H9.75036V8.05344Z" fill="#1276B3"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2.25 0C1.00736 0 0 1.00736 0 2.25V15.75C0 16.9926 1.00736 18 2.25 18H15.75C16.9926 18 18 16.9926 18 15.75V2.25C18 1.00736 16.9926 0 15.75 0H2.25ZM2.89855 6.91044H5.5828V14.9846H2.89855V6.91044ZM4.25755 3.01794C5.17611 3.01794 5.74142 3.62094 5.7583 4.41407C5.7583 5.18751 5.17611 5.80851 4.24011 5.80851H4.22267C3.32211 5.80851 2.73992 5.18751 2.73992 4.41407C2.73992 3.62094 3.34011 3.01794 4.25755 3.01794ZM12.1697 6.72144C13.9354 6.72144 15.26 7.87513 15.26 10.3546L15.2595 14.9846H12.5758V10.6646C12.5758 9.57782 12.1882 8.83869 11.2157 8.83869C10.4754 8.83869 10.0333 9.34044 9.83867 9.82082C9.7678 9.99463 9.75036 10.2314 9.75036 10.4756V14.9846H7.06723C7.06723 14.9846 7.10155 7.66757 7.06723 6.91044H9.75036V8.05344C10.1087 7.50388 10.746 6.72144 12.1697 6.72144Z" fill="#1276B3"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/vertical-dots.react.svg b/packages/asc-web-components/public/static/images/vertical-dots.react.svg
new file mode 100644
index 0000000000..5d4f6480d7
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/vertical-dots.react.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M16 2C16 3.10457 15.1046 4 14 4C12.8954 4 12 3.10457 12 2C12 0.89543 12.8954 0 14 0C15.1046 0 16 0.89543 16 2ZM14 10C15.1046 10 16 9.10457 16 8C16 6.89543 15.1046 6 14 6C12.8954 6 12 6.89543 12 8C12 9.10457 12.8954 10 14 10ZM14 16C15.1046 16 16 15.1046 16 14C16 12.8954 15.1046 12 14 12C12.8954 12 12 12.8954 12 14C12 15.1046 12.8954 16 14 16Z" fill="#A3A9AE"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/z-a.sorting.react.svg b/packages/asc-web-components/public/static/images/z-a.sorting.react.svg
new file mode 100644
index 0000000000..0b4fd75cf0
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/z-a.sorting.react.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="10" viewBox="0 0 10 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 9C0 9.55228 0.447715 10 1 10H5C5.55228 10 6 9.55228 6 9C6 8.44772 5.55228 8 5 8H1C0.447715 8 0 8.44772 0 9ZM0 5C0 5.55228 0.447715 6 1 6H7C7.55228 6 8 5.55228 8 5C8 4.44772 7.55228 4 7 4H1C0.447715 4 0 4.44772 0 5ZM1 2C0.447715 2 0 1.55229 0 1C0 0.447715 0.447715 0 1 0H9C9.55229 0 10 0.447715 10 1C10 1.55229 9.55228 2 9 2H1Z" fill="#A3A9AE"/>
+</svg>
\ No newline at end of file
diff --git a/packages/asc-web-components/public/static/images/zoom-minus.react.svg b/packages/asc-web-components/public/static/images/zoom-minus.react.svg
new file mode 100644
index 0000000000..1fb9d00c63
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/zoom-minus.react.svg
@@ -0,0 +1,4 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00331 14.9961C3.13704 14.9969 0.00248369 11.8648 1.63867e-07 7.99858C-0.000827171 4.13231 3.13125 0.997751 6.99834 0.996094C10.8596 0.99444 13.9925 4.12155 14 7.98285C14.0025 9.47083 13.5406 10.8511 12.751 11.9866C12.7616 11.9966 12.7722 12.0067 12.7826 12.0171L15.6358 14.8704C16.1223 15.3568 16.1223 16.1455 15.6358 16.632C15.1494 17.1185 14.3606 17.1185 13.8742 16.632L11.021 13.7788C11.0105 13.7683 11.0003 13.7577 10.9902 13.747C9.86056 14.5323 8.48841 14.9936 7.00827 14.9961H7.00331ZM7.00226 13.1961C4.13018 13.1967 1.80165 10.87 1.79981 7.99794C1.79919 5.12586 4.12588 2.79733 6.99857 2.7961C9.86696 2.79487 12.1943 5.11786 12.1998 7.98626C12.2047 10.859 9.87926 13.1912 7.00595 13.1961H7.00226Z" fill="#D0D5DA"/>
+<rect x="4" y="6.99609" width="6" height="2" rx="0.5" fill="#D0D5DA"/>
+</svg>
diff --git a/packages/asc-web-components/public/static/images/zoom-plus.react.svg b/packages/asc-web-components/public/static/images/zoom-plus.react.svg
new file mode 100644
index 0000000000..973dbfeb01
--- /dev/null
+++ b/packages/asc-web-components/public/static/images/zoom-plus.react.svg
@@ -0,0 +1,5 @@
+<svg width="16" height="17" viewBox="0 0 16 17" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.00331 14.9961C3.13704 14.9969 0.00248369 11.8648 1.63867e-07 7.99858C-0.000827171 4.13231 3.13125 0.997751 6.99834 0.996094C10.8596 0.99444 13.9925 4.12155 14 7.98285C14.0025 9.47083 13.5406 10.8511 12.751 11.9866C12.7616 11.9966 12.7722 12.0067 12.7826 12.0171L15.6358 14.8704C16.1223 15.3568 16.1223 16.1455 15.6358 16.632C15.1494 17.1185 14.3606 17.1185 13.8742 16.632L11.021 13.7788C11.0105 13.7683 11.0003 13.7577 10.9902 13.747C9.86056 14.5323 8.48841 14.9936 7.00827 14.9961H7.00331ZM7.00226 13.1961C4.13018 13.1967 1.80165 10.87 1.79981 7.99794C1.79919 5.12586 4.12588 2.79733 6.99857 2.7961C9.86696 2.79487 12.1943 5.11786 12.1998 7.98626C12.2047 10.859 9.87926 13.1912 7.00595 13.1961H7.00226Z" fill="#D0D5DA"/>
+<rect x="4" y="6.99609" width="6" height="2" rx="0.5" fill="#D0D5DA"/>
+<rect x="6" y="10.9961" width="6" height="2" rx="0.5" transform="rotate(-90 6 10.9961)" fill="#D0D5DA"/>
+</svg>
diff --git a/public/images/catalog.guest.react.svg b/public/images/catalog.guest.react.svg
new file mode 100644
index 0000000000..ea9d822fff
--- /dev/null
+++ b/public/images/catalog.guest.react.svg
@@ -0,0 +1,3 @@
+<svg width="17" height="16" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M8.0918 0C10.2005 0 11.91 1.65314 11.91 3.6923C11.91 5.73162 10.2005 7.3846 8.0918 7.3846C5.98311 7.3846 4.27361 5.73147 4.27361 3.6923C4.27361 1.65314 5.98311 0 8.0918 0ZM13.2951 16H2.8884C1.89617 16 1.0918 15.2493 1.0918 14.3349C1.0918 10.1384 3.13902 8.5 5.31618 8.55393C6.07104 9.03774 6.9876 9.32204 7.97664 9.32204C9.00192 9.32204 9.94933 9.01658 10.7193 8.5C13.1437 8.5 15.0918 10.1384 15.0918 14.3349C15.0918 15.2493 14.2874 16 13.2951 16Z" fill="#333333"/>
+</svg>
diff --git a/yarn.lock b/yarn.lock
index ebc335d931..121f5dcf79 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2882,7 +2882,7 @@
     "@storybook/components" "6.1.21"
     core-js "^3.0.1"
 
-"@storybook/addon-viewport@6.1.21":
+"@storybook/addon-viewport@6.1.21", "@storybook/addon-viewport@^6.1.21":
   version "6.1.21"
   resolved "https://registry.yarnpkg.com/@storybook/addon-viewport/-/addon-viewport-6.1.21.tgz#893090cca12f55abb4d8acade5f04e58e6317b1f"
   integrity sha512-FrQk0BXCI4HdbBn9+8b+Cp2HvsweZkgW/joKfcF2vVLoasUBB4bl+9uU3HV/3a08glgjPl24caDMPgoRKS90WQ==