diff --git a/package.json b/package.json
index d93713e062..16f57ebfe6 100644
--- a/package.json
+++ b/package.json
@@ -136,7 +136,6 @@
   "dependencies": {
     "@babel/runtime": "^7.3.4",
     "@popperjs/core": "^2.4.4",
-    "body-scroll-lock": "^2.5.8",
     "classnames": "^2.2.5",
     "cozy-interapp": "0.5.4",
     "date-fns": "^1.28.5",
@@ -147,6 +146,7 @@
     "react-markdown": "^4.0.8",
     "react-pdf": "^4.0.5",
     "react-popper": "^2.2.3",
+    "react-remove-scroll": "^2.4.0",
     "react-select": "2.2.0",
     "react-swipeable-views": "0.13.3"
   },
diff --git a/react/ActionMenu/Readme.md b/react/ActionMenu/Readme.md
index cae813632c..a15454c391 100644
--- a/react/ActionMenu/Readme.md
+++ b/react/ActionMenu/Readme.md
@@ -2,7 +2,7 @@ Use an ActionMenu to show a list of actions. ActionMenus automatically switch th
 
 ### Classic
 
-```
+```jsx
 import ActionMenu, { ActionMenuItem, ActionMenuRadio } from 'cozy-ui/transpiled/react/ActionMenu';
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from 'cozy-ui/transpiled/react/Icon';
@@ -39,7 +39,7 @@ desktop, we display a popper and not a BottomDrawer, context for the
 user is not lost, so the ActionMenuHeader would be redundant. This is
 why it is not rendered unless we are on mobile.
 
-```
+```jsx
 import ActionMenu, { ActionMenuItem, ActionMenuHeader } from './index';
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
@@ -67,7 +67,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
 
 ### With dedicated click handler
 
-```
+```jsx
 import ActionMenu, { ActionMenuItem, ActionMenuHeader } from './index';
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from '../Icon';
@@ -96,7 +96,7 @@ const hideMenu = () => setState({ menuDisplayed: false });
 You can pass a reference to a custom DOM element through the `anchorElRef` prop to attach the menu to that element.
 We use [popper.js](https://popper.js.org/docs/v2/) under the hood. You can use the `popperOptions` prop to pass options to the popper.js instance. This lets you control things like placement relative to the anchor, positioning strategies and more — refer to the popper doc for all the details.
 
-```
+```jsx
 import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu';
 import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
 import Icon from 'cozy-ui/transpiled/react/Icon';
@@ -121,3 +121,81 @@ const anchorRef = React.createRef();
   </ActionMenu>}
 </div>
 ```
+
+### Open Dialog from ActionMenu
+
+```jsx
+import ActionMenu, { ActionMenuItem } from 'cozy-ui/transpiled/react/ActionMenu';
+import DropdownButton from 'cozy-ui/transpiled/react/DropdownButton';
+import Icon from 'cozy-ui/transpiled/react/Icon';
+import Dialog, {
+  DialogTitle,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogCloseButton,
+} from 'cozy-ui/transpiled/react/Dialog';
+import {
+  BreakpointsProvider
+} from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme/'
+import Button from 'cozy-ui/transpiled/react/Button'
+
+const testRef = React.createRef();
+
+initialState = { menuDisplayed: isTesting(),  modalOpened: isTesting() };
+
+const showMenu = () => setState({ menuDisplayed: true });
+const hideMenu = () => setState({ menuDisplayed: false });
+
+const anchorRef = React.createRef();
+const onClose = () => setState({ modalOpened: !state.modalOpened });
+
+<div>
+  <BreakpointsProvider>
+    <MuiCozyTheme>
+      <>
+        <DropdownButton onClick={showMenu} ref={anchorRef}>Show action menu</DropdownButton>
+        {state.menuDisplayed &&
+          <ActionMenu
+            anchorElRef={anchorRef}
+            popperOptions={{ placement: 'bottom-end'}}
+            onClose={hideMenu}>
+              <ActionMenuItem 
+                left={<Icon icon='file' />} 
+                onClick={() => setState({ modalOpened: !state.modalOpened })}>
+                  Item 1
+              </ActionMenuItem>
+          </ActionMenu>}
+          <Dialog open={state.modalOpened} onClose={() => onClose()}>
+                <DialogCloseButton onClick={() => onClose()} />
+                <DialogTitle>Ada Lovelace</DialogTitle>
+                <DialogContent>
+                  Augusta Ada King-Noel, Countess of Lovelace (née Byron; 10 December 1815
+                  – 27 November 1852) was an English mathematician and writer, chiefly
+                  known for her work on Charles Babbage's proposed mechanical
+                  general-purpose computer, the Analytical Engine. She was the first to
+                  recognise that the machine had applications beyond pure calculation, and
+                  published the first algorithm intended to be carried out by such a
+                  machine. As a result, she is often regarded as the first to recognise
+                  the full potential of a "computing machine" and the first computer
+                  programmer.
+                </DialogContent>
+                <DialogActions layout="row">
+                  <Button
+                    theme="secondary"
+                    onClick={() => onClose()}
+                    label={'Close Modal'}
+                  />
+                  <Button
+                    theme="primary"
+                    label={'Touch Me'}
+                    onClick={() => alert('click')}
+                  />
+                </DialogActions>
+          </Dialog>
+      </>
+    </MuiCozyTheme>
+  </BreakpointsProvider>
+</div>
+```
diff --git a/react/ActionMenu/index.jsx b/react/ActionMenu/index.jsx
index b17a3bdaab..3a6631d162 100644
--- a/react/ActionMenu/index.jsx
+++ b/react/ActionMenu/index.jsx
@@ -20,6 +20,28 @@ const ActionMenuWrapper = ({
   placement,
   preventOverflow,
   children
+}) => {
+  if (!inline) return <BottomDrawer onClose={onClose}>{children}</BottomDrawer>
+  return (
+    <NotInlineWrapper
+      anchorElRef={anchorElRef}
+      popperOptions={popperOptions}
+      placement={placement}
+      preventOverflow={preventOverflow}
+      onClose={onClose}
+    >
+      {children}
+    </NotInlineWrapper>
+  )
+}
+
+const NotInlineWrapper = ({
+  anchorElRef,
+  popperOptions,
+  placement,
+  preventOverflow,
+  onClose,
+  children
 }) => {
   const [popperElement, setPopperElement] = React.useState(null)
   const referenceElement = anchorElRef ? anchorElRef.current : null
@@ -44,8 +66,7 @@ const ActionMenuWrapper = ({
     popperElement,
     options
   )
-
-  return inline ? (
+  return (
     <div
       ref={setPopperElement}
       style={{
@@ -56,11 +77,8 @@ const ActionMenuWrapper = ({
     >
       <ClickAwayListener onClickAway={onClose}>{children}</ClickAwayListener>
     </div>
-  ) : (
-    <BottomDrawer onClose={onClose}>{children}</BottomDrawer>
   )
 }
-
 const logDepecratedPlacement = createDepreciationLogger()
 const logDepecratedOverflow = createDepreciationLogger()
 const logDepecratedContainer = createDepreciationLogger()
diff --git a/react/BottomDrawer/index.jsx b/react/BottomDrawer/index.jsx
index 33f7c5481c..8879509057 100644
--- a/react/BottomDrawer/index.jsx
+++ b/react/BottomDrawer/index.jsx
@@ -2,6 +2,8 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import Hammer from 'hammerjs'
 import once from 'lodash/once'
+import { RemoveScroll } from 'react-remove-scroll'
+
 import styles from './styles.styl'
 import Overlay from '../Overlay'
 
@@ -128,17 +130,19 @@ class BottomDrawer extends Component {
     this.menuNode = React.createRef()
     this.wrapperNode = React.createRef()
     return (
-      <div ref={this.wrapperNode}>
-        <Overlay
-          style={{ opacity: closing ? 0 : 1 }}
-          onClick={this.animateClose}
-          onEscape={this.animateClose}
-        >
-          <div ref={this.menuNode} className={styles['BottomDrawer-content']}>
-            {children}
-          </div>
-        </Overlay>
-      </div>
+      <RemoveScroll>
+        <div ref={this.wrapperNode}>
+          <Overlay
+            style={{ opacity: closing ? 0 : 1 }}
+            onClick={this.animateClose}
+            onEscape={this.animateClose}
+          >
+            <div ref={this.menuNode} className={styles['BottomDrawer-content']}>
+              {children}
+            </div>
+          </Overlay>
+        </div>
+      </RemoveScroll>
     )
   }
 }
diff --git a/react/Dialog/Readme.md b/react/Dialog/Readme.md
index cde77d8a13..f091942a73 100644
--- a/react/Dialog/Readme.md
+++ b/react/Dialog/Readme.md
@@ -132,3 +132,55 @@ initialState = { modalOpened: isTesting() }
   </BreakpointsProvider>
 </>
 ```
+
+
+
+### With long content
+
+```jsx
+import Dialog, {
+  DialogTitle,
+  DialogActions,
+  DialogContent,
+  DialogContentText,
+  DialogCloseButton,
+} from 'cozy-ui/transpiled/react/Dialog';
+
+import {
+  BreakpointsProvider
+} from 'cozy-ui/transpiled/react/hooks/useBreakpoints'
+
+import MuiCozyTheme from 'cozy-ui/transpiled/react/MuiCozyTheme/'
+import Button from 'cozy-ui/transpiled/react/Button'
+const onClose = () => setState({ modalOpened: !state.modalOpened })
+
+initialState = { modalOpened: isTesting() }
+;<>
+  <button onClick={() => setState({ modalOpened: !state.modalOpened })}>
+    Toggle modal
+  </button>
+  <BreakpointsProvider>
+    <MuiCozyTheme>
+      <Dialog open={state.modalOpened} onClose={() => onClose()}>
+        <DialogCloseButton onClick={() => onClose()} />
+        <DialogTitle>Ada Lovelace</DialogTitle>
+        <DialogContent>
+          {content.ada.long}
+        </DialogContent>
+        <DialogActions layout="row">
+          <Button
+            theme="secondary"
+            onClick={() => onClose()}
+            label={'Close Modal'}
+          />
+          <Button
+            theme="primary"
+            label={'Touch Me'}
+            onClick={() => alert('click')}
+          />
+        </DialogActions>
+      </Dialog>
+    </MuiCozyTheme>
+  </BreakpointsProvider>
+</>
+```
diff --git a/react/Dialog/index.jsx b/react/Dialog/index.jsx
index f0992e7c68..d7ebb6293e 100644
--- a/react/Dialog/index.jsx
+++ b/react/Dialog/index.jsx
@@ -3,20 +3,24 @@ import React from 'react'
 import MUIDialog from '@material-ui/core/Dialog'
 import withMobileDialog from '@material-ui/core/withMobileDialog'
 import PropTypes from 'prop-types'
+import { RemoveScroll } from 'react-remove-scroll'
 
 export const Dialog = props => {
   const { onClose, fullScreen, children, open, scroll, ...otherProps } = props
+  const Wrapper = open ? RemoveScroll : React.Fragment
   return (
-    <MUIDialog
-      open={open}
-      onClose={onClose}
-      fullScreen={fullScreen}
-      aria-labelledby="dialog-title"
-      scroll={scroll}
-      {...otherProps}
-    >
-      {children}
-    </MUIDialog>
+    <Wrapper>
+      <MUIDialog
+        open={open}
+        onClose={onClose}
+        fullScreen={fullScreen}
+        aria-labelledby="dialog-title"
+        scroll={scroll}
+        {...otherProps}
+      >
+        {children}
+      </MUIDialog>
+    </Wrapper>
   )
 }
 Dialog.defaultProps = {
diff --git a/react/Overlay/index.jsx b/react/Overlay/index.jsx
index 5c983fb37e..6e8fc63179 100644
--- a/react/Overlay/index.jsx
+++ b/react/Overlay/index.jsx
@@ -3,7 +3,7 @@ import styles from './styles.styl'
 import cx from 'classnames'
 import omit from 'lodash/omit'
 import PropTypes from 'prop-types'
-import { disableBodyScroll, clearAllBodyScrollLocks } from 'body-scroll-lock'
+import { RemoveScroll } from 'react-remove-scroll'
 
 const ESC_KEYCODE = 27
 
@@ -21,10 +21,6 @@ const bodyTallerThanWindow = () => {
  */
 class Overlay extends Component {
   componentDidMount() {
-    if (bodyTallerThanWindow()) {
-      disableBodyScroll(document.body)
-      disableBodyScroll(document.body.parentNode)
-    }
     if (this.props.onEscape) {
       document.addEventListener('keydown', this.handleKeydown)
     }
@@ -37,9 +33,6 @@ class Overlay extends Component {
   }
 
   componentWillUnmount() {
-    // restauration function can be undefined if there was
-    // an error during mounting/rendering
-    clearAllBodyScrollLocks()
     if (this.props.onEscape) {
       document.removeEventListener('keydown', this.handleKeydown)
     }
@@ -54,13 +47,19 @@ class Overlay extends Component {
   render() {
     const { children, className } = this.props
     const domProps = omit(this.props, nonDOMProps)
+    // We use Overlay when opening an ActionMenu.
+    // We don't want to block the scroll on Desktop if the ActionMenu
+    // is displayed. So no RemoveScroll if the content is too small
+    // @todo Overlay should not RemoveScroll by itself. It should
+    // be done by lower component (like ActionMenu / Dialog / Modal...)
+    const Wrapper = bodyTallerThanWindow() ? React.Fragment : RemoveScroll
     return (
       <div
         onClick={this.handleClick}
         className={cx(styles['c-overlay'], className)}
         {...domProps}
       >
-        {children}
+        <Wrapper>{children}</Wrapper>
       </div>
     )
   }
diff --git a/react/__snapshots__/examples.spec.jsx.snap b/react/__snapshots__/examples.spec.jsx.snap
index c6291cc8e3..bb3cf3a738 100644
--- a/react/__snapshots__/examples.spec.jsx.snap
+++ b/react/__snapshots__/examples.spec.jsx.snap
@@ -112,6 +112,28 @@ exports[`ActionMenu should render examples: ActionMenu 4`] = `
 </div>"
 `;
 
+exports[`ActionMenu should render examples: ActionMenu 5`] = `
+"<div>
+  <div><button role=\\"button\\" class=\\"styles__c-DropdownButton___1JXUA\\">Show action menu<svg class=\\"styles__c-DropdownButton-Icon___ohvD2 styles__icon___23x3R\\" width=\\"12\\" height=\\"12\\">
+        <use xlink:href=\\"#bottom\\"></use>
+      </svg></button>
+    <div>
+      <div style=\\"position: absolute; left: 0px; top: 0px; z-index: #fff; transform: translate(0px, 0px);\\" data-popper-reference-hidden=\\"true\\" data-popper-escaped=\\"true\\" data-popper-placement=\\"bottom-end\\">
+        <div class=\\"styles__c-actionmenu___22Fp1 styles__c-actionmenu--inline___1SXZa\\">
+          <div class=\\"styles__media___cSJMp styles__media--top___K9w0I styles__c-actionmenu-item___gODqd\\">
+            <div class=\\"styles__img___3SHpG u-mh-1\\"><svg class=\\"styles__icon___23x3R\\" width=\\"16\\" height=\\"16\\">
+                <use xlink:href=\\"#file\\"></use>
+              </svg></div>
+            <div class=\\"styles__bd___1Uv-F u-mr-1 u-stack-xs\\">Item 1</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div></div>
+  </div>
+</div>"
+`;
+
 exports[`AppTitle should render examples: AppTitle 1`] = `
 "<div>
   <h1 class=\\"u-title-h1 styles__c-apptitle___eqV9l\\">Drive</h1>
@@ -183,18 +205,18 @@ exports[`Avatar should render examples: Avatar 4`] = `
 exports[`Badge should render examples: Badge 1`] = `
 "<div>
   <div class=\\"u-m-1\\">error: <input class=\\"u-mr-1\\" type=\\"checkbox\\">dot: <input class=\\"u-mr-1\\" type=\\"checkbox\\">large: <input class=\\"u-mr-1\\" type=\\"checkbox\\">small: <input class=\\"u-mr-1\\" type=\\"checkbox\\"></div>
-  <p><span class=\\"MuiBadge-root-14 Component-root-2\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><use xlink:href=\\"#circle-filled\\"></use></svg><span class=\\"MuiBadge-badge-15 Component-badge-1 Component-top-3 Component-right-6 Component-medium-8 MuiBadge-colorPrimary-16 Component-colorPrimary-10\\">4</span></span></p>
+  <p><span class=\\"MuiBadge-root-64 Component-root-52\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><use xlink:href=\\"#circle-filled\\"></use></svg><span class=\\"MuiBadge-badge-65 Component-badge-51 Component-top-53 Component-right-56 Component-medium-58 MuiBadge-colorPrimary-66 Component-colorPrimary-60\\">4</span></span></p>
   <div class=\\"u-m-1\\">error: <input class=\\"u-mr-1\\" type=\\"checkbox\\" checked=\\"\\">dot: <input class=\\"u-mr-1\\" type=\\"checkbox\\" checked=\\"\\">large: <input class=\\"u-mr-1\\" type=\\"checkbox\\">small: <input class=\\"u-mr-1\\" type=\\"checkbox\\"></div>
-  <p><span class=\\"MuiBadge-root-14 Component-root-2\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><use xlink:href=\\"#circle-filled\\"></use></svg><span class=\\"MuiBadge-badge-15 Component-badge-1 Component-top-3 Component-right-6 Component-medium-8 MuiBadge-colorError-18 Component-colorError-12 MuiBadge-dot-20 Component-dot-13\\"></span></span></p>
+  <p><span class=\\"MuiBadge-root-64 Component-root-52\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><use xlink:href=\\"#circle-filled\\"></use></svg><span class=\\"MuiBadge-badge-65 Component-badge-51 Component-top-53 Component-right-56 Component-medium-58 MuiBadge-colorError-68 Component-colorError-62 MuiBadge-dot-70 Component-dot-63\\"></span></span></p>
   <div class=\\"u-m-1\\">error: <input class=\\"u-mr-1\\" type=\\"checkbox\\">dot: <input class=\\"u-mr-1\\" type=\\"checkbox\\">large: <input class=\\"u-mr-1\\" type=\\"checkbox\\">small: <input class=\\"u-mr-1\\" type=\\"checkbox\\"></div>
-  <p><span class=\\"MuiBadge-root-14 Component-root-2\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><use xlink:href=\\"#circle-filled\\"></use></svg><span class=\\"MuiBadge-badge-15 Component-badge-1 Component-top-3 Component-right-6 Component-medium-8 MuiBadge-colorPrimary-16 Component-colorPrimary-10\\">4</span></span></p>
+  <p><span class=\\"MuiBadge-root-64 Component-root-52\\"><svg class=\\"styles__icon___23x3R\\" style=\\"fill: var(--slateGrey);\\" width=\\"24\\" height=\\"24\\"><use xlink:href=\\"#circle-filled\\"></use></svg><span class=\\"MuiBadge-badge-65 Component-badge-51 Component-top-53 Component-right-56 Component-medium-58 MuiBadge-colorPrimary-66 Component-colorPrimary-60\\">4</span></span></p>
 </div>"
 `;
 
 exports[`Badge should render examples: Badge 2`] = `
 "<div>
-  <p><span class=\\"MuiBadge-root-14 Component-root-2\\"><div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv\\" style=\\"color: white;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span>
-</div><span class=\\"MuiBadge-badge-15 Component-badge-1 Component-qualifier-21 Component-bottom-4 Component-right-6 Component-medium-8\\"><span class=\\"MuiBadge-root-14 Component-root-2\\"><svg class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\"><use xlink:href=\\"#link\\"></use></svg><span class=\\"MuiBadge-badge-15 Component-badge-1 Component-top-3 Component-right-6 Component-small-9 MuiBadge-colorError-18 Component-colorError-12 MuiBadge-dot-20 Component-dot-13\\"></span></span></span></span></p>
+  <p><span class=\\"MuiBadge-root-64 Component-root-52\\"><div class=\\"styles__c-avatar___PpDI- styles__c-avatar--small___1Y_Pv\\" style=\\"color: white;\\"><span class=\\"styles__c-avatar-initials___310qC\\">CD</span>
+</div><span class=\\"MuiBadge-badge-65 Component-badge-51 Component-qualifier-71 Component-bottom-54 Component-right-56 Component-medium-58\\"><span class=\\"MuiBadge-root-64 Component-root-52\\"><svg class=\\"styles__icon___23x3R\\" width=\\"10\\" height=\\"10\\"><use xlink:href=\\"#link\\"></use></svg><span class=\\"MuiBadge-badge-65 Component-badge-51 Component-top-53 Component-right-56 Component-small-59 MuiBadge-colorError-68 Component-colorError-62 MuiBadge-dot-70 Component-dot-63\\"></span></span></span></span></p>
 </div>"
 `;
 
@@ -431,7 +453,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
     <ol class=\\"styles__list-contact___8ztoP\\">
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">EMPTY</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">EMPTY</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"013a6414-9727-4a4e-8b35-d3b9946a17c6\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -447,7 +469,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">A</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">A</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"013a6413-9726-4a4d-8b34-d3b9946a17c5\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -463,7 +485,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">B</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">B</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"799b0f99-3ad7-4f07-a689-9765b4e239c9\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -556,7 +578,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">C</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">C</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"507fcc3d-1423-46da-b5f9-8fbcfd3f3fe4\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -605,7 +627,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">F</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">F</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"7acdab81-52cb-46f6-9e81-42032e9843ae\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -632,7 +654,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">G</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">G</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"8ba82505-25c3-4821-88df-2e11becc21e8\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -648,7 +670,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">H</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">H</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"307c4e16-70b8-4328-af1c-1d762f788e16\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -697,7 +719,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">J</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">J</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"3e540ae7-4605-4f05-82c9-8cb901a0c34d\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -713,7 +735,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">K</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">K</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"366f3eec-aaa0-4c82-9f27-80ad305ecec8\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -751,7 +773,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">L</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">L</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"3fe82c80-9da3-4a42-bab5-8274df1316e6\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -800,7 +822,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">M</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">M</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"d50b7eea-6e71-4348-ad75-fc791d7a82d4\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -871,7 +893,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">N</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">N</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"627ba975-1314-4813-8366-cea7ac4734bf\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -887,7 +909,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">O</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">O</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"3f6007f9-9284-4bfd-9350-1cbf294bd39b\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -903,7 +925,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">P</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">P</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"53c75e29-5c9b-4c4f-b802-e4a152551b23\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -952,7 +974,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">R</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">R</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"c55c831a-9869-4e14-b3aa-d004bced41b0\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -979,7 +1001,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">S</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">S</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"814f6f67-bcc0-498f-bb91-cab5ed315a12\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1050,7 +1072,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">T</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">T</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"0ea42f4a-28f1-432e-934a-68f9c50fe38e\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1099,7 +1121,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">V</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">V</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"23d3d724-d869-4def-841f-c85b499aa6a6\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1137,7 +1159,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">W</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">W</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"b6f5fc43-4199-4cca-8372-d1fe4e75a168\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1208,7 +1230,7 @@ exports[`ContactsList should render examples: ContactsList 1`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">X</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">X</li>
           <li>
             <div class=\\"styles__contact___169nD\\" id=\\"71967809-8e54-4413-aa8e-35b2b945e816\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1234,7 +1256,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
     <ol class=\\"styles__list-contact___8ztoP\\">
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">EMPTY</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">EMPTY</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"013a6414-9727-4a4e-8b35-d3b9946a17c6\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1250,7 +1272,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">A</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">A</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"013a6413-9726-4a4d-8b34-d3b9946a17c5\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1266,7 +1288,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">B</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">B</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"799b0f99-3ad7-4f07-a689-9765b4e239c9\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1359,7 +1381,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">C</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">C</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"507fcc3d-1423-46da-b5f9-8fbcfd3f3fe4\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1408,7 +1430,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">F</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">F</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"7acdab81-52cb-46f6-9e81-42032e9843ae\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1435,7 +1457,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">G</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">G</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"8ba82505-25c3-4821-88df-2e11becc21e8\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1451,7 +1473,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">H</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">H</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"307c4e16-70b8-4328-af1c-1d762f788e16\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1500,7 +1522,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">J</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">J</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"3e540ae7-4605-4f05-82c9-8cb901a0c34d\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1516,7 +1538,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">K</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">K</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"366f3eec-aaa0-4c82-9f27-80ad305ecec8\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1554,7 +1576,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">L</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">L</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"3fe82c80-9da3-4a42-bab5-8274df1316e6\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1603,7 +1625,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">M</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">M</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"d50b7eea-6e71-4348-ad75-fc791d7a82d4\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1674,7 +1696,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">N</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">N</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"627ba975-1314-4813-8366-cea7ac4734bf\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1690,7 +1712,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">O</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">O</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"3f6007f9-9284-4bfd-9350-1cbf294bd39b\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1706,7 +1728,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">P</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">P</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"53c75e29-5c9b-4c4f-b802-e4a152551b23\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1755,7 +1777,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">R</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">R</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"c55c831a-9869-4e14-b3aa-d004bced41b0\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1782,7 +1804,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">S</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">S</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"814f6f67-bcc0-498f-bb91-cab5ed315a12\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1853,7 +1875,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">T</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">T</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"0ea42f4a-28f1-432e-934a-68f9c50fe38e\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1902,7 +1924,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">V</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">V</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"23d3d724-d869-4def-841f-c85b499aa6a6\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -1940,7 +1962,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">W</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">W</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"b6f5fc43-4199-4cca-8372-d1fe4e75a168\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -2011,7 +2033,7 @@ exports[`ContactsList should render examples: ContactsList 2`] = `
       </li>
       <li>
         <ol class=\\"styles__sublist-contact___NBitx\\">
-          <li class=\\"MuiListSubheader-root-22 MuiListSubheader-sticky-27 MuiListSubheader-gutters-25\\">X</li>
+          <li class=\\"MuiListSubheader-root-72 MuiListSubheader-sticky-77 MuiListSubheader-gutters-75\\">X</li>
           <li>
             <div class=\\"styles__contact___169nD styles__contact--clickable___1GLTM\\" id=\\"71967809-8e54-4413-aa8e-35b2b945e816\\">
               <div class=\\"styles__contact-identity___mL3IJ\\">
@@ -2047,9 +2069,23 @@ exports[`DateMonthPicker should render examples: DateMonthPicker 1`] = `
 </div>"
 `;
 
-exports[`Dialog should render examples: Dialog 1`] = `"<div><button>Toggle modal</button></div>"`;
+exports[`Dialog should render examples: Dialog 1`] = `
+"<div><button>Toggle modal</button>
+  <div></div>
+</div>"
+`;
+
+exports[`Dialog should render examples: Dialog 2`] = `
+"<div><button>Toggle modal</button>
+  <div></div>
+</div>"
+`;
 
-exports[`Dialog should render examples: Dialog 2`] = `"<div><button>Toggle modal</button></div>"`;
+exports[`Dialog should render examples: Dialog 3`] = `
+"<div><button>Toggle modal</button>
+  <div></div>
+</div>"
+`;
 
 exports[`Empty should render examples: Empty 1`] = `
 "<div>
@@ -6138,7 +6174,7 @@ exports[`Tabs should render examples: Tabs 1`] = `
       </div>
     </div>
   </div>
-  <hr class=\\"MuiDivider-root-75 u-ml-0 u-maw-100\\"><br>
+  <hr class=\\"MuiDivider-root-78 u-ml-0 u-maw-100\\"><br>
   <div class=\\"MuiTabs-root-210\\" aria-label=\\"simple tabs example\\">
     <div class=\\"MuiTabs-flexContainer-211\\">
       <div class=\\"MuiTabs-scroller-213 MuiTabs-fixed-214\\" style=\\"margin-bottom: 0px;\\" role=\\"tablist\\">
diff --git a/rsgscreenshots.json b/rsgscreenshots.json
index b247e2295d..eed338d0ba 100644
--- a/rsgscreenshots.json
+++ b/rsgscreenshots.json
@@ -9,5 +9,8 @@
   },
   "Modal": {
     "perExampleScreenshot": true
+  },
+  "Dialog": {
+    "perExampleScreenshot": true
   }
 }
diff --git a/yarn.lock b/yarn.lock
index e1d13e421b..ca6bce2902 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3410,11 +3410,6 @@ body-parser@1.19.0:
     raw-body "2.4.0"
     type-is "~1.6.17"
 
-body-scroll-lock@^2.5.8:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/body-scroll-lock/-/body-scroll-lock-2.6.1.tgz#3782ff37404886faaee366968ceee40c3964d8f2"
-  integrity sha512-fsDsq10+BJrk/+eGADqxspyZpGiKSh3dK8ByE6KuDK0REmPB99U05p1t9xVTAM9J6j9PJGm6W/W+HsCPnOFj+Q==
-
 bonjour@^3.5.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/bonjour/-/bonjour-3.5.0.tgz#8e890a183d8ee9a2393b3844c691a42bcf7bc9f5"
@@ -5688,6 +5683,11 @@ detect-newline@^2.1.0:
   resolved "https://registry.yarnpkg.com/detect-newline/-/detect-newline-2.1.0.tgz#f41f1c10be4b00e87b5f13da680759f2c5bfd3e2"
   integrity sha1-9B8cEL5LAOh7XxPaaAdZ8sW/0+I=
 
+detect-node-es@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/detect-node-es/-/detect-node-es-1.0.0.tgz#c0318b9e539a5256ca780dd9575c9345af05b8ed"
+  integrity sha512-S4AHriUkTX9FoFvL4G8hXDcx6t3gp2HpfCza3Q0v6S78gul2hKWifLQbeW+ZF89+hSm2ZIc/uF3J97ZgytgTRg==
+
 detect-node@^2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
@@ -7408,6 +7408,11 @@ get-caller-file@^2.0.1:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
+get-nonce@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
+  integrity sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==
+
 get-own-enumerable-property-symbols@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/get-own-enumerable-property-symbols/-/get-own-enumerable-property-symbols-3.0.0.tgz#b877b49a5c16aefac3655f2ed2ea5b684df8d203"
@@ -14403,6 +14408,25 @@ react-redux@^7.2.0:
     prop-types "^15.7.2"
     react-is "^16.9.0"
 
+react-remove-scroll-bar@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.1.0.tgz#edafe9b42a42c0dad9bdd10712772a1f9a39d7b9"
+  integrity sha512-5X5Y5YIPjIPrAoMJxf6Pfa7RLNGCgwZ95TdnVPgPuMftRfO8DaC7F4KP1b5eiO8hHbe7u+wZNDbYN5WUTpv7+g==
+  dependencies:
+    react-style-singleton "^2.1.0"
+    tslib "^1.0.0"
+
+react-remove-scroll@^2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/react-remove-scroll/-/react-remove-scroll-2.4.0.tgz#190c16eb508c5927595935499e8f5dd9ab0e75cf"
+  integrity sha512-BZIO3GaEs0Or1OhA5C//n1ibUP1HdjJmqUVUsOCMxwoIpaCocbB9TFKwHOkBa/nyYy3slirqXeiPYGwdSDiseA==
+  dependencies:
+    react-remove-scroll-bar "^2.1.0"
+    react-style-singleton "^2.1.0"
+    tslib "^1.0.0"
+    use-callback-ref "^1.2.3"
+    use-sidecar "^1.0.1"
+
 react-select@2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/react-select/-/react-select-2.2.0.tgz#67c8b5c2dcb8df0384f2a103efe952570f5d6b93"
@@ -14421,6 +14445,15 @@ react-simple-code-editor@^0.9.7:
   resolved "https://registry.yarnpkg.com/react-simple-code-editor/-/react-simple-code-editor-0.9.15.tgz#59e3583832e9e98992d3674b2d7673b4cd1c5709"
   integrity sha512-M8iKgjBTBZK92tZYgOEfMuR7c3zZ0q0v3QYllSxIPx3SU+w003VofH50txXQSBTu92pSOm2tidON1HbQ1l8BDA==
 
+react-style-singleton@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-style-singleton/-/react-style-singleton-2.1.0.tgz#7396885332e9729957f9df51f08cadbfc164e1c4"
+  integrity sha512-DH4ED+YABC1dhvSDYGGreAHmfuTXj6+ezT3CmHoqIEfxNgEYfIMoOtmbRp42JsUst3IPqBTDL+8r4TF7EWhIHw==
+  dependencies:
+    get-nonce "^1.0.0"
+    invariant "^2.2.4"
+    tslib "^1.0.0"
+
 react-styleguidist@9.1.16:
   version "9.1.16"
   resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-9.1.16.tgz#8d70cf02c4c631cb906946388ff7b4a26812054d"
@@ -17334,6 +17367,11 @@ trough@^1.0.0:
   resolved "https://registry.yarnpkg.com/trough/-/trough-1.0.3.tgz#e29bd1614c6458d44869fc28b255ab7857ef7c24"
   integrity sha512-fwkLWH+DimvA4YCy+/nvJd61nWQQ2liO/nF/RjkTpiOGi+zxZzVkhb1mvbHIIW4b/8nDsYI8uTmAlc0nNkRMOw==
 
+tslib@^1.0.0, tslib@^1.9.3:
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.0.tgz#d624983f3e2c5e0b55307c3dd6c86acd737622c6"
+  integrity sha512-+Zw5lu0D9tvBMjGP8LpvMb0u2WW2QV3y+D8mO6J+cNzCYIN4sVy43Bf9vl92nqFahutN0I8zHa7cc4vihIshnw==
+
 tslib@^1.9.0:
   version "1.9.3"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.9.3.tgz#d7e4dd79245d85428c4d7e4822a79917954ca286"
@@ -17888,6 +17926,19 @@ url@^0.11.0:
     punycode "1.3.2"
     querystring "0.2.0"
 
+use-callback-ref@^1.2.3:
+  version "1.2.4"
+  resolved "https://registry.yarnpkg.com/use-callback-ref/-/use-callback-ref-1.2.4.tgz#d86d1577bfd0b955b6e04aaf5971025f406bea3c"
+  integrity sha512-rXpsyvOnqdScyied4Uglsp14qzag1JIemLeTWGKbwpotWht57hbP78aNT+Q4wdFKQfQibbUX4fb6Qb4y11aVOQ==
+
+use-sidecar@^1.0.1:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.0.3.tgz#17a4e567d4830c0c0ee100040e85a7fe68611e0f"
+  integrity sha512-ygJwGUBeQfWgDls7uTrlEDzJUUR67L8Rm14v/KfFtYCdHhtjHZx1Krb3DIQl3/Q5dJGfXLEQ02RY8BdNBv87SQ==
+  dependencies:
+    detect-node-es "^1.0.0"
+    tslib "^1.9.3"
+
 use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/use/-/use-3.1.1.tgz#d50c8cac79a19fbc20f2911f56eb973f4e10070f"