From d022e3bc674ac438fcb1ff09d695b08dc5cce14b Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Fri, 12 Jul 2019 08:10:45 +0200
Subject: [PATCH 1/6] WIP: Use React Scroll Link Again

---
 packages/main/package.json                    |   2 +
 .../components/ObjectPage/AnchorButton.tsx    |  41 ---
 .../components/ObjectPage/ObjectPage.jss.ts   | 128 +-------
 .../ObjectPage/ObjectPageAnchor.tsx           | 126 --------
 .../ObjectPage/ObjectPageAnchorButton.tsx     | 148 +++++++++
 .../ObjectPage/ObjectPageContent.tsx          |   7 +-
 .../ObjectPage/ObjectPageHeader.tsx           | 167 +++++++++++
 .../main/src/components/ObjectPage/index.tsx  | 282 +++++++-----------
 yarn.lock                                     |   2 +-
 9 files changed, 431 insertions(+), 472 deletions(-)
 delete mode 100644 packages/main/src/components/ObjectPage/AnchorButton.tsx
 delete mode 100644 packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx
 create mode 100644 packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx
 create mode 100644 packages/main/src/components/ObjectPage/ObjectPageHeader.tsx

diff --git a/packages/main/package.json b/packages/main/package.json
index 5c4f45c435d..a6fc8458bb7 100644
--- a/packages/main/package.json
+++ b/packages/main/package.json
@@ -22,6 +22,8 @@
   "dependencies": {
     "@ui5/webcomponents": "1.0.0-rc.2",
     "@ui5/webcomponents-react-base": "0.3.2-rc.14",
+    "lodash.debounce": "^4.0.8",
+    "lodash.throttle": "^4.1.1",
     "react-scroll": "^1.7.11",
     "react-table": "6.8.6",
     "react-toastify": "^5.0.1"
diff --git a/packages/main/src/components/ObjectPage/AnchorButton.tsx b/packages/main/src/components/ObjectPage/AnchorButton.tsx
deleted file mode 100644
index 79256614ba6..00000000000
--- a/packages/main/src/components/ObjectPage/AnchorButton.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { Event, fonts, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import { JSSTheme } from '../../interfaces/JSSTheme';
-
-const anchorButtonStyles = ({ parameters }: JSSTheme) => ({
-  button: {
-    color: parameters.sapUiContentLabelColor,
-    fontFamily: fonts.sapUiFontFamily,
-    fontSize: fonts.sapMFontMediumSize
-  },
-  selected: {
-    color: parameters.sapUiSelected,
-    minWidth: '2rem',
-    textAlign: 'center',
-    '&:after': {
-      content: '""',
-      borderBottom: `0.188rem solid ${parameters.sapUiSelected}`,
-      width: '100%',
-      position: 'absolute',
-      bottom: 0,
-      left: 0
-    }
-  }
-});
-
-export const AnchorButton = withStyles(anchorButtonStyles)(({ onClick, children, classes, selected }) => {
-  const classNames = StyleClassHelper.of(classes.button);
-  if (selected) {
-    classNames.put(classes.selected);
-  }
-
-  const eventWrapper = (e) => {
-    onClick(Event.of(null, e, { text: true }));
-  };
-
-  return (
-    <span onClick={eventWrapper} className={classNames.valueOf()}>
-      {children}
-    </span>
-  );
-});
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts
index 0f4df037920..58531bc300e 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.jss.ts
+++ b/packages/main/src/components/ObjectPage/ObjectPage.jss.ts
@@ -5,141 +5,21 @@ const styles = ({ parameters }: JSSTheme) => ({
   objectPage: {
     width: '100%',
     height: '100%',
-    position: 'absolute',
+    position: 'relative',
     display: 'flex',
     flexDirection: 'column',
     isolation: 'isolate',
     whiteSpace: 'normal',
     fontFamily: fonts.sapUiFontFamily
   },
-  header: {
-    flexShrink: 0,
-    backgroundColor: parameters.sapUiObjectHeaderBackground,
-    '& $titleBar': {
-      paddingLeft: '2rem',
-      display: 'block',
-      '& $image': {
-        height: '0',
-        width: '0',
-        opacity: '0',
-        display: 'inline-block',
-        verticalAlign: 'middle'
-      },
-      '& $container': {
-        display: 'inline-block',
-        lineHeight: 'normal',
-        verticalAlign: 'middle',
-        width: '70%',
-        boxSizing: 'border-box',
-        paddingTop: '1.5rem',
-        '& $title': {
-          fontSize: '1.375rem',
-          paddingRight: '1rem',
-          verticalAlign: 'baseline',
-          lineHeight: 'normal',
-          display: 'inline-block',
-          margin: '0',
-          fontWeight: 'normal',
-          color: parameters.sapUiBaseText
-        },
-        '& $subTitle': {
-          display: 'inline-block',
-          wordBreak: 'break-word',
-          verticalAlign: 'baseline',
-          paddingTop: '0.5rem',
-          fontSize: '0.875rem',
-          color: parameters.sapUiContentLabelColor
-        }
-      },
-      '& $actions': {
-        position: 'absolute',
-        top: '0',
-        paddingTop: '0.75rem',
-        right: '1.25rem',
-        display: 'inline-block',
-        float: 'right',
-        verticalAlign: 'top',
-        '& > *': {
-          marginLeft: '0.5rem',
-          padding: 0
-        }
-      }
-    },
-    '&$stickied': {
-      '& $image': {
-        opacity: '1',
-        height: '3rem',
-        width: '3rem',
-        margin: '0.25rem 1rem 0.25rem 0'
-      }
-    },
-    '& $headerContent': {
-      paddingTop: '1.5rem',
-      paddingBottom: '0.25rem',
-      transition: 'max-height 0.5s',
-      maxHeight: '500px',
-      overflow: 'hidden',
-
-      paddingLeft: '2rem',
-      position: 'relative',
-      '& $headerImage': {
-        maxWidth: '5rem',
-        maxHeight: '5rem',
-        display: 'inline-block',
-        marginRight: '2rem',
-        marginBottom: '1rem'
-      },
-      '& $headerCustomContent': {
-        display: 'inline-block',
-        verticalAlign: 'top',
-        '& > *': {
-          marginRight: '2rem',
-          marginBottom: '1rem',
-          lineHeight: '1.5rem'
-        }
-      }
-    }
-  },
-  hideHeaderContent: {
-    paddingTop: '0.5rem',
-    marginBottom: '0.5rem',
-    boxShadow: `inset 0 -1px 0 0 ${parameters.sapUiObjectHeaderBorderColor}`,
-    display: 'flex',
-    justifyContent: 'center',
-    alignItems: 'center'
-  },
   anchorBar: {
     paddingLeft: '2rem',
     backgroundColor: parameters.sapUiObjectHeaderBackground,
-    boxShadow: `inset 0 0.125rem ${parameters.sapUiObjectHeaderBackground}`,
+    boxShadow: `inset 0 -0.0625rem ${parameters.sapUiObjectHeaderBorderColor}, inset 0 0.0625rem ${parameters.sapUiObjectHeaderBorderColor}`,
     display: 'flex',
-    margin: '0px',
     height: '2.75rem',
-    padding: '0px',
-    listStyle: 'none',
-    '& $anchorButtonContainer': {
-      position: 'relative',
-      display: 'inline-flex',
-      alignItems: 'center',
-      cursor: 'pointer',
-      '&:not(:first-child)': {
-        marginLeft: '2rem'
-      }
-    }
-  },
-  titleBar: {},
-  image: {},
-  container: {},
-  title: {},
-  subTitle: {},
-  actions: {},
-  stickied: {},
-  headerContent: {},
-  headerImage: {},
-  headerCustomContent: {},
-  anchorButtonContainer: {},
-  active: {},
-  hiddenHeader: {}
+    minHeight: '2.75rem'
+  }
 });
 
 export default styles;
diff --git a/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx b/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx
deleted file mode 100644
index 56bbe84c42d..00000000000
--- a/packages/main/src/components/ObjectPage/ObjectPageAnchor.tsx
+++ /dev/null
@@ -1,126 +0,0 @@
-import { Event, StyleClassHelper } from '@ui5/webcomponents-react-base';
-import React, { Component, RefObject } from 'react';
-import { ObjectWithVariableKeys } from '../../interfaces/ObjectWithVariableKeys';
-import { Icon } from '../../lib/Icon';
-import { List } from '../../lib/List';
-import { PlacementType } from '../../lib/PlacementType';
-import { Popover } from '../../lib/Popover';
-import { StandardListItem } from '../../lib/StandardListItem';
-import { AnchorButton } from './AnchorButton';
-
-export interface ObjectPageAnchorPropTypes {
-  section: any;
-  classes: ObjectWithVariableKeys;
-  onAnchorSelected: (event: Event) => void;
-  onSubSectionSelected: (event: Event) => void;
-  selected: boolean;
-}
-
-export interface ObjectPageAnchorState {
-  open: boolean;
-}
-
-export class ObjectPageAnchor extends Component<ObjectPageAnchorPropTypes, ObjectPageAnchorState> {
-  state = {
-    open: false
-  };
-
-  private openModal = () => {
-    this.setState({
-      open: true
-    });
-  };
-
-  private closeModal = () => {
-    this.setState({
-      open: false
-    });
-  };
-
-  private onSubSectionClick = (e) => {
-    const { section, onSubSectionSelected } = this.props;
-    const selectedId = e.getParameter('item').dataset.key;
-    const subSection = section.props.children
-      .filter((item) => item.props && item.props.isSubSection)
-      .find((item) => item.props.id === selectedId);
-    if (this.state.open && subSection) {
-      onSubSectionSelected(Event.of(this, e.getOriginalEvent(), subSection));
-    }
-    this.closeModal();
-  };
-
-  private subSectionsAvailable() {
-    const { section } = this.props;
-    if (section.props.children && section.props.children.filter) {
-      const subSections = section.props.children.filter((item) => item.props && item.props.isSubSection);
-      return subSections.length > 0;
-    }
-    return false;
-  }
-
-  private renderSubSectionListItem = (item) => {
-    return (
-      <StandardListItem key={item.props.id} data-key={item.props.id}>
-        {item.props.title}
-      </StandardListItem>
-    );
-  };
-
-  private handleAnchorButtonClick = (e) => {
-    const isIconClicked = !e.getParameter('text');
-    const { section, onAnchorSelected } = this.props;
-    if (isIconClicked) {
-      this.openModal();
-    } else if (onAnchorSelected) {
-      onAnchorSelected(Event.of(this, e.getOriginalEvent(), section));
-    }
-  };
-
-  render() {
-    const { section, classes, selected } = this.props;
-
-    const containerClasses = StyleClassHelper.of(classes.anchorButtonContainer);
-    const subSectionsAvailable = this.subSectionsAvailable();
-
-    const titleButton = (
-      <AnchorButton onClick={this.handleAnchorButtonClick} selected={selected}>
-        {section.props.title}
-      </AnchorButton>
-    );
-
-    const navigationIcon = (
-      <Icon
-        src="sap-icon://slim-arrow-down"
-        onPress={this.handleAnchorButtonClick}
-        style={{
-          height: '1rem',
-          width: '1rem',
-          cursor: 'pointer',
-          margin: '0 0.25rem 0 0.375rem',
-          fontSize: '0.875rem'
-        }}
-      />
-    );
-
-    return (
-      <li className={containerClasses.valueOf()}>
-        {titleButton}
-        {subSectionsAvailable && (
-          <Popover
-            open={this.state.open}
-            placementType={PlacementType.Bottom}
-            openBy={navigationIcon}
-            onAfterClose={this.closeModal}
-            noArrow
-          >
-            <List onItemClick={this.onSubSectionClick}>
-              {this.props.section.props.children
-                .filter((item) => item.props && item.props.isSubSection)
-                .map(this.renderSubSectionListItem)}
-            </List>
-          </Popover>
-        )}
-      </li>
-    );
-  }
-}
diff --git a/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx b/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx
new file mode 100644
index 00000000000..41e02f84e71
--- /dev/null
+++ b/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx
@@ -0,0 +1,148 @@
+import { Event, fonts } from '@ui5/webcomponents-react-base';
+import React, { FC, useCallback, useState } from 'react';
+// @ts-ignore
+import { createUseStyles } from 'react-jss';
+import { Link } from 'react-scroll';
+import { JSSTheme } from '../../interfaces/JSSTheme';
+import { ObjectWithVariableKeys } from '../../interfaces/ObjectWithVariableKeys';
+import { Icon } from '../../lib/Icon';
+import { List } from '../../lib/List';
+import { PlacementType } from '../../lib/PlacementType';
+import { Popover } from '../../lib/Popover';
+import { StandardListItem } from '../../lib/StandardListItem';
+
+interface ObjectPageAnchorPropTypes {
+  section: any;
+  classes: ObjectWithVariableKeys;
+  onAnchorSelected: (event: Event) => void;
+  onSubSectionSelected?: (event: Event) => void;
+  index: number;
+}
+
+const useStyles = createUseStyles(({ parameters }: JSSTheme) => ({
+  anchorButtonContainer: {
+    position: 'relative',
+    display: 'inline-flex',
+    alignItems: 'center',
+    cursor: 'pointer',
+    '&:not(:first-child)': {
+      marginLeft: '2rem'
+    }
+  },
+  button: {
+    color: parameters.sapUiContentLabelColor,
+    fontFamily: fonts.sapUiFontFamily,
+    fontSize: fonts.sapMFontMediumSize
+  },
+  selected: {
+    color: parameters.sapUiSelected,
+    minWidth: '2rem',
+    textAlign: 'center',
+    '&:after': {
+      content: '""',
+      borderBottom: `0.188rem solid ${parameters.sapUiSelected}`,
+      width: '100%',
+      position: 'absolute',
+      bottom: 0,
+      left: 0
+    }
+  }
+}));
+
+export const ObjectPageAnchorButton: FC<ObjectPageAnchorPropTypes> = (props) => {
+  const classes = useStyles();
+  const [open, setOpen] = useState();
+  const { section, index, onSubSectionSelected, onAnchorSelected } = props;
+
+  const openModal = useCallback(() => {
+    setOpen(true);
+  }, []);
+  const closeModal = useCallback(() => {
+    setOpen(false);
+  }, []);
+
+  let subSectionsAvailable = false;
+  if (section.props.children && section.props.children.filter) {
+    const subSections = section.props.children.filter((item) => item.props && item.props.isSubSection);
+    subSectionsAvailable = subSections.length > 0;
+  }
+
+  const onSubSectionClick = useCallback((e) => {
+    const selectedId = e.getParameter('item').dataset.key;
+    const subSection = section.props.children
+      .filter((item) => item.props && item.props.isSubSection)
+      .find((item) => item.props.id === selectedId);
+    if (open && subSection) {
+      onSubSectionSelected(Event.of(null, e.getOriginalEvent(), subSection));
+    }
+    closeModal();
+  }, []);
+
+  const navigationIcon = (
+    <Icon
+      src="sap-icon://slim-arrow-down"
+      onPress={openModal}
+      style={{
+        height: '1rem',
+        width: '1rem',
+        cursor: 'pointer',
+        margin: '0 0.25rem 0 0.375rem',
+        fontSize: '0.875rem'
+      }}
+    />
+  );
+
+  const onScrollActive = useCallback(
+    (e) => {
+      onAnchorSelected(
+        Event.of(null, {} as any, {
+          ...section,
+          index
+        })
+      );
+    },
+    [onAnchorSelected]
+  );
+
+  const renderSubSectionListItem = (item) => {
+    return (
+      <Link to={`ObjectPageSubSection-${item.props.id}`} containerId="ObjectPageSections" smooth offset={36}>
+        <StandardListItem key={item.props.id} data-key={item.props.id}>
+          {item.props.title}
+        </StandardListItem>
+      </Link>
+    );
+  };
+
+  return (
+    <li className={classes.anchorButtonContainer}>
+      <Link
+        to={`ObjectPageSection-${section.props.id}`}
+        containerId="ObjectPageSections"
+        spy
+        activeClass={classes.selected}
+        onSetActive={onScrollActive}
+        duration={400}
+        smooth
+        offset={index === 0 ? 0 : 45}
+      >
+        <span className={classes.button}>{section.props.title}</span>
+      </Link>
+      {subSectionsAvailable && (
+        <Popover
+          open={open}
+          placementType={PlacementType.Bottom}
+          openBy={navigationIcon}
+          onAfterClose={closeModal}
+          noArrow
+        >
+          <List onItemClick={onSubSectionClick}>
+            {section.props.children
+              .filter((item) => item.props && item.props.isSubSection)
+              .map(renderSubSectionListItem)}
+          </List>
+        </Popover>
+      )}
+    </li>
+  );
+};
diff --git a/packages/main/src/components/ObjectPage/ObjectPageContent.tsx b/packages/main/src/components/ObjectPage/ObjectPageContent.tsx
index fe50df08ad5..4f360807e68 100644
--- a/packages/main/src/components/ObjectPage/ObjectPageContent.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPageContent.tsx
@@ -26,13 +26,14 @@ const objectPageContentStyles = ({ parameters }: JSSTheme) => ({
 
 interface Props {
   children: ReactNode | ReactNode[];
+  fillerRef: RefObject<any>;
 }
 
-export const ObjectPageContent = forwardRef(({ children }: Props, ref: RefObject<HTMLDivElement>) => {
+export const ObjectPageContent = forwardRef(({ children, fillerRef }: Props, ref: RefObject<HTMLElement>) => {
   const ObjectPageInner = withStyles(objectPageContentStyles)(({ classes }) => (
-    <section id="ObjectPageSections" className={classes.sectionsContainer}>
+    <section ref={ref} id="ObjectPageSections" className={classes.sectionsContainer}>
       {children}
-      <div ref={ref} />
+      <div ref={fillerRef} />
     </section>
   ));
   return <ObjectPageInner />;
diff --git a/packages/main/src/components/ObjectPage/ObjectPageHeader.tsx b/packages/main/src/components/ObjectPage/ObjectPageHeader.tsx
new file mode 100644
index 00000000000..d69a6f5976f
--- /dev/null
+++ b/packages/main/src/components/ObjectPage/ObjectPageHeader.tsx
@@ -0,0 +1,167 @@
+import React, { FC, ReactElement, useCallback, useState } from 'react';
+// @ts-ignore
+import { createUseStyles } from 'react-jss';
+import { JSSTheme } from '../../interfaces/JSSTheme';
+import { Button } from '../../lib/Button';
+
+interface Props {
+  title?: string;
+  subTitle?: string;
+  image?: string;
+  imageShapeCircle?: boolean;
+  headerActions?: Array<ReactElement<any>>;
+  renderHeaderContent?: () => JSX.Element;
+  showHideHeaderButton?: boolean;
+}
+
+const useStyles = createUseStyles(({ parameters }: JSSTheme) => ({
+  header: {
+    flexShrink: 0,
+    backgroundColor: parameters.sapUiObjectHeaderBackground,
+    '&$stickied': {
+      '& $image': {
+        opacity: '1',
+        height: '3rem',
+        width: '3rem',
+        margin: '0.25rem 1rem 0.25rem 0'
+      }
+    }
+  },
+  titleBar: {
+    padding: '0.5rem 2rem',
+    display: 'block'
+  },
+  headerImage: {
+    maxWidth: '5rem',
+    maxHeight: '5rem',
+    display: 'inline-block',
+    marginRight: '2rem',
+    marginBottom: '1rem'
+  },
+  image: {
+    height: '0',
+    width: '0',
+    opacity: '0',
+    display: 'inline-block',
+    verticalAlign: 'middle'
+  },
+  container: {
+    display: 'inline-block',
+    lineHeight: 'normal',
+    verticalAlign: 'middle',
+    width: '70%',
+    boxSizing: 'border-box',
+    paddingTop: '1.5rem'
+  },
+  title: {
+    fontSize: '1.375rem',
+    paddingRight: '1rem',
+    verticalAlign: 'baseline',
+    lineHeight: 'normal',
+    display: 'inline-block',
+    margin: '0',
+    fontWeight: 'normal',
+    color: parameters.sapUiBaseText
+  },
+  subTitle: {
+    display: 'inline-block',
+    wordBreak: 'break-word',
+    verticalAlign: 'baseline',
+    paddingTop: '0.5rem',
+    fontSize: '0.875rem',
+    color: parameters.sapUiContentLabelColor
+  },
+  actions: {
+    position: 'absolute',
+    top: '0',
+    paddingTop: '0.75rem',
+    right: '1.25rem',
+    display: 'inline-block',
+    float: 'right',
+    verticalAlign: 'top',
+    '& > *': {
+      marginLeft: '0.5rem',
+      padding: 0
+    }
+  },
+  stickied: {},
+  headerContent: {
+    paddingTop: '1.5rem',
+    paddingBottom: '0.25rem',
+    transition: 'max-height 0.5s',
+    maxHeight: '500px',
+    overflow: 'hidden',
+    paddingLeft: '2rem',
+    position: 'relative'
+  },
+  headerCustomContent: {
+    display: 'inline-block',
+    verticalAlign: 'top',
+    '& > *': {
+      marginRight: '2rem',
+      marginBottom: '1rem',
+      lineHeight: '1.5rem'
+    }
+  }
+}));
+
+export const ObjectPageHeader: FC<Props> = (props) => {
+  const [showHeader, setShowHeader] = useState(true);
+
+  const changeHeader = useCallback(() => {
+    setShowHeader(!showHeader);
+  }, [showHeader]);
+
+  const { title, image, subTitle, headerActions, renderHeaderContent, imageShapeCircle, showHideHeaderButton } = props;
+
+  const classes = useStyles();
+
+  return (
+    <header className={classes.header}>
+      {/* Title Bar */}
+      <header className={classes.titleBar}>
+        {image && (
+          <span className={classes.image}>
+            <img src={image} />
+          </span>
+        )}
+        <span className={classes.container}>
+          <h1 className={classes.title}>{title}</h1>
+          <span className={classes.subTitle}>{subTitle}</span>
+        </span>
+        <span className={classes.actions}>{headerActions}</span>
+      </header>
+      {/* Header Content */}
+      <div style={{ position: 'relative' }}>
+        {showHeader && (
+          <div className={classes.headerContent}>
+            {image && (
+              <span
+                className={classes.headerImage}
+                style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
+              >
+                <img src={image} style={{ width: '100%', height: '100%' }} />
+              </span>
+            )}
+            {renderHeaderContent && <span className={classes.headerCustomContent}>{renderHeaderContent()}</span>}
+          </div>
+        )}
+        {showHideHeaderButton && (
+          <Button
+            style={
+              {
+                position: 'absolute',
+                '--_ui5_button_compact_height': '1rem',
+                lineHeight: '1.25rem',
+                bottom: 'calc(-1.25rem / 2)',
+                left: 'calc(50% - 1rem)'
+              } as any
+            }
+            icon={showHeader ? 'sap-icon://navigation-up-arrow' : 'sap-icon://navigation-down-arrow'}
+            onClick={changeHeader}
+          />
+        )}
+      </div>
+    </header>
+  );
+};
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index b92b50af0fe..c9be3b02639 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -1,13 +1,24 @@
 import { Event, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { Children, createRef, PureComponent, ReactElement, ReactNode, ReactNodeArray, RefObject } from 'react';
+import React, {
+  Children,
+  createRef,
+  FC,
+  forwardRef,
+  PureComponent,
+  ReactElement,
+  ReactNode,
+  ReactNodeArray,
+  RefObject
+} from 'react';
 import { scroller } from 'react-scroll';
+import debounce from 'lodash.debounce';
 import { ClassProps } from '../../interfaces/ClassProps';
 import { CommonProps } from '../../interfaces/CommonProps';
-import { Button } from '../../lib/Button';
 import { ObjectPageMode } from '../../lib/ObjectPageMode';
 import styles from './ObjectPage.jss';
-import { ObjectPageAnchor } from './ObjectPageAnchor';
+import { ObjectPageAnchorButton } from './ObjectPageAnchorButton';
 import { ObjectPageContent } from './ObjectPageContent';
+import { ObjectPageHeader } from './ObjectPageHeader';
 
 export interface ObjectPagePropTypes extends CommonProps {
   title?: string;
@@ -44,11 +55,18 @@ export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageSta
     renderHeaderContent: null,
     mode: ObjectPageMode.Default,
     onSelectedSectionChanged: () => {},
-    showHideHeaderButton: false
+    showHideHeaderButton: false,
+    selectedSectionId: ''
+  };
+  state = {
+    selectedSectionIndex: 0,
+    prevProps: {
+      selectedSectionId: ''
+    }
   };
-
   private objectPage: RefObject<HTMLDivElement> = (this.props as ObjectPageInternalProps).innerRef;
   private fillerDivDomRef: RefObject<HTMLDivElement> = createRef();
+  private objectPageContent: RefObject<HTMLDivElement> = createRef();
 
   static getDerivedStateFromProps(nextProps: ObjectPagePropTypes, prevState: ObjectPageState) {
     if (nextProps.selectedSectionId !== prevState.prevProps.selectedSectionId) {
@@ -66,22 +84,6 @@ export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageSta
     return null;
   }
 
-  state = {
-    selectedSectionIndex: 0,
-    prevProps: {
-      selectedSectionId: ''
-    },
-    showHeader: true
-  };
-
-  private scrollToSectionWithId = (id) => {
-    scroller.scrollTo(`ObjectPageSection-${id}`, {
-      containerId: 'ObjectPageSections',
-      smooth: true,
-      offset: this.state.selectedSectionIndex > 0 ? 45 : 0
-    });
-  };
-
   componentDidMount() {
     this.adjustDummyDivHeight();
     if (this.props.mode !== ObjectPageMode.IconTabBar) {
@@ -92,30 +94,17 @@ export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageSta
     }
   }
 
-  getSnapshotBeforeUpdate(prevProps: Readonly<ObjectPagePropTypes>, prevState: Readonly<ObjectPageState>): any | null {
-    const scrollPosition = this.objectPage.current.querySelector('section').scrollTop;
-    const fillerDivHeight = this.fillerDivDomRef.current.style.height;
-    return {
-      scrollPosition,
-      fillerDivHeight
-    };
-  }
-
   componentDidUpdate(
     prevProps: Readonly<ObjectPagePropTypes>,
     prevState: Readonly<ObjectPageState>,
-    snapshot?: any
+    snapshot?: Readonly<{}>
   ): void {
-    this.objectPage.current.querySelector('section').scrollTop = snapshot.scrollPosition;
-    this.fillerDivDomRef.current.style.height = snapshot.fillerDivHeight;
     if (
       this.props.selectedSectionId !== prevProps.selectedSectionId &&
       this.props.mode === ObjectPageMode.Default &&
       this.state.selectedSectionIndex >= 0
     ) {
-      requestAnimationFrame(() => {
-        this.scrollToSectionWithId(this.props.selectedSectionId);
-      });
+      this.scrollToSectionWithId(this.props.selectedSectionId);
     }
   }
 
@@ -125,83 +114,6 @@ export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageSta
     }
   }
 
-  adjustDummyDivHeight() {
-    requestAnimationFrame(() => {
-      if (!this.objectPage.current) {
-        // in case componentWillUnmount didn´t fire
-        window.removeEventListener('resize', this.adjustDummyDivHeight);
-        return;
-      }
-      if (this.props.mode !== ObjectPageMode.Default) {
-        return;
-      }
-
-      const sections = this.objectPage.current.querySelectorAll('[id^="ObjectPageSection"]');
-      if (!sections || sections.length < 1) {
-        return;
-      }
-
-      const lastSectionDomRef = sections[sections.length - 1];
-      const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]');
-
-      let domRef = null;
-      if (subSections.length > 0) {
-        domRef = subSections[subSections.length - 1];
-      } else {
-        domRef = lastSectionDomRef;
-      }
-
-      let heightDiff = lastSectionDomRef.parentElement.offsetHeight - domRef.offsetHeight;
-      heightDiff = heightDiff > 0 ? heightDiff : 0;
-      this.fillerDivDomRef.current.style.height = `${heightDiff}px`;
-    });
-  }
-
-  private changeHeader = () => {
-    this.setState({ showHeader: !this.state.showHeader });
-  };
-
-  private handleOnSubSectionSelected = (index) => (e) => {
-    const scrollId = e.getParameter('props').id;
-
-    this.setState(
-      {
-        selectedSectionIndex: index
-      },
-      () => {
-        scroller.scrollTo(`ObjectPageSubSection-${scrollId}`, {
-          containerId: 'ObjectPageSections',
-          smooth: true,
-          offset: 36
-        });
-      }
-    );
-  };
-
-  private handleOnAnchorSelected = (index) => (e) => {
-    this.setState(
-      {
-        selectedSectionIndex: index
-      },
-      () => {
-        if (this.props.mode === ObjectPageMode.Default) {
-          const { id } = e.getParameter('props');
-          requestAnimationFrame(() => {
-            this.scrollToSectionWithId(id);
-          });
-        }
-      }
-    );
-
-    this.props.onSelectedSectionChanged(
-      Event.of(this, e.getOriginalEvent(), {
-        selectedSectionIndex: index,
-        selectedSectionId: e.getParameter('props').id,
-        section: e.getParameters()
-      })
-    );
-  };
-
   render() {
     const {
       title,
@@ -214,22 +126,17 @@ export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageSta
       className,
       style,
       tooltip,
-      slot
+      slot,
+      showHideHeaderButton
     } = this.props;
 
     const { selectedSectionIndex } = this.state;
 
     const { children, classes } = this.props as ObjectPageInternalProps;
 
-    let content = null;
-
-    switch (mode) {
-      case ObjectPageMode.IconTabBar:
-        content = Children.toArray(children)[selectedSectionIndex];
-        break;
-      default:
-        content = children;
-        break;
+    let content = children;
+    if (mode === ObjectPageMode.IconTabBar) {
+      content = Children.toArray(children)[selectedSectionIndex];
     }
 
     const objectPageClasses = StyleClassHelper.of(classes.objectPage);
@@ -246,61 +153,82 @@ export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageSta
         ref={this.objectPage}
         title={tooltip}
       >
-        <header className={classes.header}>
-          {/* Title Bar */}
-          <header className={classes.titleBar}>
-            {image && (
-              <span className={classes.image}>
-                <img src={image} />
-              </span>
-            )}
-            <span className={classes.container}>
-              <h1 className={classes.title}>{title}</h1>
-              <span className={classes.subTitle}>{subTitle}</span>
-            </span>
-            <span className={classes.actions}>{headerActions}</span>
-          </header>
-          {/* Header Content */}
-          <div className={classes.headerContentWrapper}>
-            {this.state.showHeader && (
-              <div className={classes.headerContent}>
-                {image && (
-                  <span
-                    className={classes.headerImage}
-                    style={{ borderRadius: imageShapeCircle ? '50%' : 0, overflow: 'hidden' }}
-                  >
-                    <img src={image} style={{ width: '100%', height: '100%' }} />
-                  </span>
-                )}
-                {renderHeaderContent && <span className={classes.headerCustomContent}>{renderHeaderContent()}</span>}
-              </div>
-            )}
-
-            <div className={classes.hideHeaderContent}>
-              {this.props.showHideHeaderButton && (
-                <Button
-                  style={{ position: 'absolute', '--_ui5_button_compact_height': '1rem', lineHeight: '1.25rem' } as any}
-                  icon={this.state.showHeader ? 'sap-icon://navigation-up-arrow' : 'sap-icon://navigation-down-arrow'}
-                  onClick={this.changeHeader}
-                />
-              )}
-            </div>
-          </div>
-          <ul className={classes.anchorBar} role="navigation">
-            {Children.map(children, (section, index) => (
-              <ObjectPageAnchor
-                key={`Anchor-${index}`}
-                section={section}
-                selected={index === selectedSectionIndex}
-                classes={classes}
-                onAnchorSelected={this.handleOnAnchorSelected(index)}
-                onSubSectionSelected={this.handleOnSubSectionSelected(index)}
-              />
-            ))}
-          </ul>
-        </header>
-        <ObjectPageContent ref={this.fillerDivDomRef}>{content}</ObjectPageContent>
+        <ObjectPageHeader
+          title={title}
+          subTitle={subTitle}
+          image={image}
+          headerActions={headerActions}
+          renderHeaderContent={renderHeaderContent}
+          imageShapeCircle={imageShapeCircle}
+          showHideHeaderButton={showHideHeaderButton}
+        />
+        <section className={classes.anchorBar} role="navigation">
+          {Children.map(children, (section, index) => (
+            <ObjectPageAnchorButton
+              key={`Anchor-${index}`}
+              section={section}
+              index={index}
+              classes={classes}
+              onAnchorSelected={this.handleOnAnchorSelected}
+            />
+          ))}
+        </section>
+        <ObjectPageContent ref={this.objectPageContent} fillerRef={this.fillerDivDomRef}>
+          {content}
+        </ObjectPageContent>
       </div>
     );
   }
+
+  private scrollToSectionWithId = (id) => {
+    requestAnimationFrame(() => {
+      scroller.scrollTo(`ObjectPageSection-${id}`, {
+        containerId: 'ObjectPageSections',
+        smooth: true,
+        offset: this.state.selectedSectionIndex > 0 ? 45 : 0
+      });
+    });
+  };
+
+  private handleOnAnchorSelected = debounce((e) => {
+    this.props.onSelectedSectionChanged(
+      Event.of(this, e.getOriginalEvent(), {
+        selectedSectionIndex: e.getParameter('index'),
+        selectedSectionId: e.getParameter('props').id,
+        section: e.getParameters()
+      })
+    );
+  }, 500);
+
+  private adjustDummyDivHeight = () => {
+    requestAnimationFrame(() => {
+      if (!this.objectPage.current) {
+        // in case componentWillUnmount didn´t fire
+        window.removeEventListener('resize', this.adjustDummyDivHeight);
+        return;
+      }
+      if (this.props.mode !== ObjectPageMode.Default) {
+        return;
+      }
+
+      const sections = this.objectPage.current.querySelectorAll('[id^="ObjectPageSection"]');
+      if (!sections || sections.length < 1) {
+        return;
+      }
+
+      const lastSectionDomRef = sections[sections.length - 1];
+      const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]');
+
+      let domRef = null;
+      if (subSections.length > 0) {
+        domRef = subSections[subSections.length - 1];
+      } else {
+        domRef = lastSectionDomRef;
+      }
+
+      let heightDiff = lastSectionDomRef.parentElement.offsetHeight - domRef.offsetHeight;
+      heightDiff = heightDiff > 0 ? heightDiff : 0;
+      this.fillerDivDomRef.current.style.height = `${heightDiff}px`;
+    });
+  };
 }
diff --git a/yarn.lock b/yarn.lock
index 658361c0cd0..328992e51d1 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2720,7 +2720,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@16.8.19", "@types/react@^16.8.19":
+"@types/react@*", "@types/react@^16.8.19":
   version "16.8.19"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.19.tgz#629154ef05e2e1985cdde94477deefd823ad9be3"
   integrity sha512-QzEzjrd1zFzY9cDlbIiFvdr+YUmefuuRYrPxmkwG0UQv5XF35gFIi7a95m1bNVcFU0VimxSZ5QVGSiBmlggQXQ==

From 9bb5c22dc2c730d310385869712b56e806369556 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Fri, 12 Jul 2019 13:21:23 +0200
Subject: [PATCH 2/6] WIP: Selected Section is selectable via prop

---
 .../ActionSheet/ActionSheet.karma.tsx         |   5 +-
 .../ObjectPage/ObjectPageAnchorButton.tsx     |  84 ++--
 .../ObjectPage/ObjectPageContent.tsx          |  11 +-
 .../main/src/components/ObjectPage/index.tsx  | 368 ++++++++++--------
 yarn.lock                                     |   2 +-
 5 files changed, 263 insertions(+), 207 deletions(-)

diff --git a/packages/main/src/components/ActionSheet/ActionSheet.karma.tsx b/packages/main/src/components/ActionSheet/ActionSheet.karma.tsx
index 736649a79e7..082b103c49c 100644
--- a/packages/main/src/components/ActionSheet/ActionSheet.karma.tsx
+++ b/packages/main/src/components/ActionSheet/ActionSheet.karma.tsx
@@ -1,7 +1,8 @@
 import { mountThemedComponent } from '@shared/tests/utils';
 import { expect, use } from 'chai';
 import { matchSnapshot } from 'chai-karma-snapshot';
-import React, { createRef } from 'react';
+import React, { createRef, RefObject } from 'react';
+import { Ui5PopoverDomRef } from '../../interfaces/Ui5PopoverDomRef';
 import { ActionSheet } from '../../lib/ActionSheet';
 import { Button } from '../../lib/Button';
 
@@ -26,7 +27,7 @@ describe('ActionSheet', () => {
   });
 
   it('Ref object', () => {
-    const ref = createRef();
+    const ref: RefObject<Ui5PopoverDomRef> = createRef();
     const button = <Button />;
     mountThemedComponent(<ActionSheet ref={ref} openBy={button} />);
     expect((ref.current as any).tagName).to.equal('UI5-POPOVER');
diff --git a/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx b/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx
index 41e02f84e71..8702956d72c 100644
--- a/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPageAnchorButton.tsx
@@ -4,19 +4,20 @@ import React, { FC, useCallback, useState } from 'react';
 import { createUseStyles } from 'react-jss';
 import { Link } from 'react-scroll';
 import { JSSTheme } from '../../interfaces/JSSTheme';
-import { ObjectWithVariableKeys } from '../../interfaces/ObjectWithVariableKeys';
 import { Icon } from '../../lib/Icon';
 import { List } from '../../lib/List';
+import { ObjectPageMode } from '../../lib/ObjectPageMode';
 import { PlacementType } from '../../lib/PlacementType';
 import { Popover } from '../../lib/Popover';
 import { StandardListItem } from '../../lib/StandardListItem';
 
 interface ObjectPageAnchorPropTypes {
   section: any;
-  classes: ObjectWithVariableKeys;
-  onAnchorSelected: (event: Event) => void;
+  onSectionSelected: (event: Event) => void;
   onSubSectionSelected?: (event: Event) => void;
   index: number;
+  selected: boolean;
+  mode: ObjectPageMode;
 }
 
 const useStyles = createUseStyles(({ parameters }: JSSTheme) => ({
@@ -52,7 +53,7 @@ const useStyles = createUseStyles(({ parameters }: JSSTheme) => ({
 export const ObjectPageAnchorButton: FC<ObjectPageAnchorPropTypes> = (props) => {
   const classes = useStyles();
   const [open, setOpen] = useState();
-  const { section, index, onSubSectionSelected, onAnchorSelected } = props;
+  const { section, index, onSubSectionSelected, onSectionSelected, selected, mode } = props;
 
   const openModal = useCallback(() => {
     setOpen(true);
@@ -67,16 +68,19 @@ export const ObjectPageAnchorButton: FC<ObjectPageAnchorPropTypes> = (props) =>
     subSectionsAvailable = subSections.length > 0;
   }
 
-  const onSubSectionClick = useCallback((e) => {
-    const selectedId = e.getParameter('item').dataset.key;
-    const subSection = section.props.children
-      .filter((item) => item.props && item.props.isSubSection)
-      .find((item) => item.props.id === selectedId);
-    if (open && subSection) {
-      onSubSectionSelected(Event.of(null, e.getOriginalEvent(), subSection));
-    }
-    closeModal();
-  }, []);
+  const onSubSectionClick = useCallback(
+    (e) => {
+      const selectedId = e.getParameter('item').dataset.key;
+      const subSection = section.props.children
+        .filter((item) => item.props && item.props.isSubSection)
+        .find((item) => item.props.id === selectedId);
+      if (open && subSection) {
+        onSubSectionSelected(Event.of(null, e.getOriginalEvent(), { section, subSection, sectionIndex: index }));
+      }
+      closeModal();
+    },
+    [onSubSectionSelected, open]
+  );
 
   const navigationIcon = (
     <Icon
@@ -92,30 +96,40 @@ export const ObjectPageAnchorButton: FC<ObjectPageAnchorPropTypes> = (props) =>
     />
   );
 
-  const onScrollActive = useCallback(
-    (e) => {
-      onAnchorSelected(
-        Event.of(null, {} as any, {
-          ...section,
-          index
-        })
-      );
-    },
-    [onAnchorSelected]
-  );
+  const onScrollActive = useCallback(() => {
+    onSectionSelected(
+      Event.of(null, {} as any, {
+        ...section,
+        index
+      })
+    );
+  }, [onSectionSelected]);
 
   const renderSubSectionListItem = (item) => {
-    return (
-      <Link to={`ObjectPageSubSection-${item.props.id}`} containerId="ObjectPageSections" smooth offset={36}>
+    if (mode === ObjectPageMode.IconTabBar) {
+      return (
         <StandardListItem key={item.props.id} data-key={item.props.id}>
           {item.props.title}
         </StandardListItem>
+      );
+    }
+
+    return (
+      <Link
+        key={item.props.id}
+        to={`ObjectPageSubSection-${item.props.id}`}
+        containerId="ObjectPageSections"
+        smooth
+        offset={36}
+      >
+        <StandardListItem data-key={item.props.id}>{item.props.title}</StandardListItem>
       </Link>
     );
   };
 
-  return (
-    <li className={classes.anchorButtonContainer}>
+  let sectionSelector = null;
+  if (mode === ObjectPageMode.Default) {
+    sectionSelector = (
       <Link
         to={`ObjectPageSection-${section.props.id}`}
         containerId="ObjectPageSections"
@@ -128,6 +142,18 @@ export const ObjectPageAnchorButton: FC<ObjectPageAnchorPropTypes> = (props) =>
       >
         <span className={classes.button}>{section.props.title}</span>
       </Link>
+    );
+  } else {
+    sectionSelector = (
+      <span onClick={onScrollActive} className={`${classes.button}${selected ? ` ${classes.selected}` : ''}`}>
+        {section.props.title}
+      </span>
+    );
+  }
+
+  return (
+    <li className={classes.anchorButtonContainer}>
+      {sectionSelector}
       {subSectionsAvailable && (
         <Popover
           open={open}
diff --git a/packages/main/src/components/ObjectPage/ObjectPageContent.tsx b/packages/main/src/components/ObjectPage/ObjectPageContent.tsx
index 4f360807e68..a2238c835a7 100644
--- a/packages/main/src/components/ObjectPage/ObjectPageContent.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPageContent.tsx
@@ -1,5 +1,6 @@
 import React, { forwardRef, ReactNode, RefObject } from 'react';
-import { withStyles } from '@ui5/webcomponents-react-base';
+// @ts-ignore
+import { createUseStyles } from 'react-jss';
 import { JSSTheme } from '../../interfaces/JSSTheme';
 
 const objectPageContentStyles = ({ parameters }: JSSTheme) => ({
@@ -29,12 +30,14 @@ interface Props {
   fillerRef: RefObject<any>;
 }
 
+const useStyles = createUseStyles(objectPageContentStyles);
+
 export const ObjectPageContent = forwardRef(({ children, fillerRef }: Props, ref: RefObject<HTMLElement>) => {
-  const ObjectPageInner = withStyles(objectPageContentStyles)(({ classes }) => (
+  const classes = useStyles();
+  return (
     <section ref={ref} id="ObjectPageSections" className={classes.sectionsContainer}>
       {children}
       <div ref={fillerRef} />
     </section>
-  ));
-  return <ObjectPageInner />;
+  );
 });
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index c9be3b02639..a0622641433 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -1,18 +1,20 @@
-import { Event, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
+import { Event, StyleClassHelper, useConsolidatedRef } from '@ui5/webcomponents-react-base';
+import debounce from 'lodash.debounce';
 import React, {
   Children,
-  createRef,
-  FC,
   forwardRef,
-  PureComponent,
   ReactElement,
   ReactNode,
   ReactNodeArray,
-  RefObject
+  RefObject,
+  useCallback,
+  useEffect,
+  useRef,
+  useState
 } from 'react';
+// @ts-ignore
+import { createUseStyles } from 'react-jss';
 import { scroller } from 'react-scroll';
-import debounce from 'lodash.debounce';
-import { ClassProps } from '../../interfaces/ClassProps';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { ObjectPageMode } from '../../lib/ObjectPageMode';
 import styles from './ObjectPage.jss';
@@ -34,201 +36,225 @@ export interface ObjectPagePropTypes extends CommonProps {
   showHideHeaderButton?: boolean;
 }
 
-interface ObjectPageInternalProps extends ObjectPagePropTypes, ClassProps {}
-
-interface ObjectPageState {
-  selectedSectionIndex: number;
-  prevProps: {
-    selectedSectionId: string;
-  };
-  showHeader: boolean;
-}
+const useStyles = createUseStyles(styles);
 
-@withStyles(styles)
-export class ObjectPage extends PureComponent<ObjectPagePropTypes, ObjectPageState> {
-  static defaultProps = {
-    title: '',
-    subTitle: '',
-    image: null,
-    imageShapeCircle: false,
-    headerActions: [],
-    renderHeaderContent: null,
-    mode: ObjectPageMode.Default,
-    onSelectedSectionChanged: () => {},
-    showHideHeaderButton: false,
-    selectedSectionId: ''
-  };
-  state = {
-    selectedSectionIndex: 0,
-    prevProps: {
-      selectedSectionId: ''
-    }
-  };
-  private objectPage: RefObject<HTMLDivElement> = (this.props as ObjectPageInternalProps).innerRef;
-  private fillerDivDomRef: RefObject<HTMLDivElement> = createRef();
-  private objectPageContent: RefObject<HTMLDivElement> = createRef();
-
-  static getDerivedStateFromProps(nextProps: ObjectPagePropTypes, prevState: ObjectPageState) {
-    if (nextProps.selectedSectionId !== prevState.prevProps.selectedSectionId) {
-      let selectedSectionIndex = Children.toArray(nextProps.children).findIndex(
-        (objectPageSection: ReactElement<any>) => objectPageSection.props.id === nextProps.selectedSectionId
-      );
-      if (selectedSectionIndex < 0) selectedSectionIndex = 0;
-      return {
-        selectedSectionIndex,
-        prevProps: {
-          selectedSectionId: nextProps.selectedSectionId
-        }
-      };
-    }
-    return null;
+const findSectionIndexById = (sections, id) => {
+  const index = Children.toArray(sections).findIndex(
+    (objectPageSection: ReactElement<any>) => objectPageSection.props.id === id
+  );
+  if (index === -1) {
+    return 0;
   }
+  return index;
+};
 
-  componentDidMount() {
-    this.adjustDummyDivHeight();
-    if (this.props.mode !== ObjectPageMode.IconTabBar) {
-      window.addEventListener('resize', this.adjustDummyDivHeight);
-      if (this.props.selectedSectionId && this.state.selectedSectionIndex > 0) {
-        this.scrollToSectionWithId(this.props.selectedSectionId);
-      }
-    }
-  }
+const scrollToSectionById = (id, index) => {
+  requestAnimationFrame(() => {
+    scroller.scrollTo(`ObjectPageSection-${id}`, {
+      containerId: 'ObjectPageSections',
+      smooth: true,
+      offset: index > 0 ? 45 : 0,
+      duration: 400
+    });
+  });
+};
 
-  componentDidUpdate(
-    prevProps: Readonly<ObjectPagePropTypes>,
-    prevState: Readonly<ObjectPageState>,
-    snapshot?: Readonly<{}>
-  ): void {
-    if (
-      this.props.selectedSectionId !== prevProps.selectedSectionId &&
-      this.props.mode === ObjectPageMode.Default &&
-      this.state.selectedSectionIndex >= 0
-    ) {
-      this.scrollToSectionWithId(this.props.selectedSectionId);
-    }
-  }
+export const ObjectPage = forwardRef((props: ObjectPagePropTypes, ref: RefObject<HTMLDivElement>) => {
+  const {
+    title,
+    image,
+    subTitle,
+    headerActions,
+    renderHeaderContent,
+    mode,
+    imageShapeCircle,
+    className,
+    style,
+    tooltip,
+    slot,
+    showHideHeaderButton,
+    children,
+    onSelectedSectionChanged,
+    selectedSectionId
+  } = props;
 
-  componentWillUnmount() {
-    if (this.props.mode !== ObjectPageMode.IconTabBar) {
-      window.removeEventListener('resize', this.adjustDummyDivHeight);
-    }
-  }
+  const [selectedSectionIndex, setSelectedSectionIndex] = useState(findSectionIndexById(children, selectedSectionId));
+  const [selectedSubSectionId, setSelectedSubSectionId] = useState(null);
+  const objectPage: RefObject<HTMLDivElement> = useConsolidatedRef(ref);
+  const fillerDivDomRef: RefObject<HTMLDivElement> = useRef();
+  const objectPageContent: RefObject<HTMLDivElement> = useRef();
 
-  render() {
-    const {
-      title,
-      image,
-      subTitle,
-      headerActions,
-      renderHeaderContent,
-      mode,
-      imageShapeCircle,
-      className,
-      style,
-      tooltip,
-      slot,
-      showHideHeaderButton
-    } = this.props;
-
-    const { selectedSectionIndex } = this.state;
-
-    const { children, classes } = this.props as ObjectPageInternalProps;
-
-    let content = children;
-    if (mode === ObjectPageMode.IconTabBar) {
-      content = Children.toArray(children)[selectedSectionIndex];
+  useEffect(() => {
+    let selectedIndex = findSectionIndexById(children, selectedSectionId);
+    if (selectedIndex === -1) {
+      selectedIndex = 0;
     }
 
-    const objectPageClasses = StyleClassHelper.of(classes.objectPage);
-    if (className) {
-      objectPageClasses.put(className);
+    if (selectedSectionIndex !== selectedIndex) {
+      setSelectedSectionIndex(selectedIndex);
     }
+  }, [selectedSectionId]);
 
-    return (
-      <div
-        data-component-name="ObjectPage"
-        slot={slot}
-        className={objectPageClasses.toString()}
-        style={style}
-        ref={this.objectPage}
-        title={tooltip}
-      >
-        <ObjectPageHeader
-          title={title}
-          subTitle={subTitle}
-          image={image}
-          headerActions={headerActions}
-          renderHeaderContent={renderHeaderContent}
-          imageShapeCircle={imageShapeCircle}
-          showHideHeaderButton={showHideHeaderButton}
-        />
-        <section className={classes.anchorBar} role="navigation">
-          {Children.map(children, (section, index) => (
-            <ObjectPageAnchorButton
-              key={`Anchor-${index}`}
-              section={section}
-              index={index}
-              classes={classes}
-              onAnchorSelected={this.handleOnAnchorSelected}
-            />
-          ))}
-        </section>
-        <ObjectPageContent ref={this.objectPageContent} fillerRef={this.fillerDivDomRef}>
-          {content}
-        </ObjectPageContent>
-      </div>
-    );
+  let content = children;
+  if (mode === ObjectPageMode.IconTabBar) {
+    content = Children.toArray(children)[selectedSectionIndex];
   }
 
-  private scrollToSectionWithId = (id) => {
-    requestAnimationFrame(() => {
-      scroller.scrollTo(`ObjectPageSection-${id}`, {
-        containerId: 'ObjectPageSections',
-        smooth: true,
-        offset: this.state.selectedSectionIndex > 0 ? 45 : 0
-      });
-    });
-  };
-
-  private handleOnAnchorSelected = debounce((e) => {
-    this.props.onSelectedSectionChanged(
-      Event.of(this, e.getOriginalEvent(), {
-        selectedSectionIndex: e.getParameter('index'),
-        selectedSectionId: e.getParameter('props').id,
-        section: e.getParameters()
-      })
-    );
-  }, 500);
-
-  private adjustDummyDivHeight = () => {
+  const adjustDummyDivHeight = () => {
     requestAnimationFrame(() => {
-      if (!this.objectPage.current) {
+      if (!objectPage.current) {
         // in case componentWillUnmount didn´t fire
-        window.removeEventListener('resize', this.adjustDummyDivHeight);
-        return;
-      }
-      if (this.props.mode !== ObjectPageMode.Default) {
+        window.removeEventListener('resize', adjustDummyDivHeight);
         return;
       }
 
-      const sections = this.objectPage.current.querySelectorAll('[id^="ObjectPageSection"]');
+      const sections = objectPage.current.querySelectorAll('[id^="ObjectPageSection"]');
       if (!sections || sections.length < 1) {
         return;
       }
 
       const lastSectionDomRef = sections[sections.length - 1];
       const subSections = lastSectionDomRef.querySelectorAll('[id^="ObjectPageSubSection"]');
+      let scrollOffset = 0;
 
       let domRef = null;
       if (subSections.length > 0) {
         domRef = subSections[subSections.length - 1];
       } else {
         domRef = lastSectionDomRef;
+        scrollOffset = 45;
       }
 
-      let heightDiff = lastSectionDomRef.parentElement.offsetHeight - domRef.offsetHeight;
+      let heightDiff = objectPageContent.current.offsetHeight - domRef.offsetHeight + scrollOffset;
       heightDiff = heightDiff > 0 ? heightDiff : 0;
-      this.fillerDivDomRef.current.style.height = `${heightDiff}px`;
+      fillerDivDomRef.current.style.height = `${heightDiff}px`;
     });
   };
-}
+
+  // register resize handler
+  useEffect(() => {
+    adjustDummyDivHeight();
+    window.addEventListener('resize', adjustDummyDivHeight);
+    return window.removeEventListener('resize', adjustDummyDivHeight);
+  }, []);
+
+  // scroll to selected section after mount
+  useEffect(() => {
+    if (mode !== ObjectPageMode.IconTabBar) {
+      if (selectedSectionId && selectedSectionIndex > 0) {
+        scrollToSectionById(selectedSectionId, selectedSectionIndex);
+      }
+    }
+  }, []);
+
+  useEffect(() => {
+    if (selectedSubSectionId && mode === ObjectPageMode.IconTabBar) {
+      requestAnimationFrame(() => {
+        scroller.scrollTo(`ObjectPageSubSection-${selectedSubSectionId}`, {
+          containerId: 'ObjectPageSections',
+          smooth: true,
+          offset: 36,
+          duration: 400
+        });
+      });
+    }
+  }, [selectedSubSectionId]);
+
+  useEffect(() => {
+    if (mode === ObjectPageMode.Default) {
+      console.log('forced reflow');
+      scrollToSectionById(children[selectedSectionIndex].props.id, selectedSectionIndex);
+    }
+    if (mode === ObjectPageMode.IconTabBar) {
+      adjustDummyDivHeight();
+    }
+  }, [selectedSectionIndex]);
+
+  const fireOnSelectedChangedEvent = debounce((e) => {
+    onSelectedSectionChanged(
+      Event.of(null, e.getOriginalEvent(), {
+        selectedSectionIndex: e.getParameter('index'),
+        selectedSectionId: e.getParameter('props').id,
+        section: e.getParameters()
+      })
+    );
+  }, 500);
+
+  const handleOnSectionSelected = useCallback(
+    (e) => {
+      if (mode === ObjectPageMode.IconTabBar) {
+        setSelectedSectionIndex(e.getParameter('index'));
+      }
+      fireOnSelectedChangedEvent(e);
+    },
+    [onSelectedSectionChanged]
+  );
+
+  const handleOnSubSectionSelected = useCallback(
+    (e) => {
+      if (mode === ObjectPageMode.IconTabBar) {
+        const sectionIndex = e.getParameter('sectionIndex');
+        const subSection = e.getParameter('subSection');
+        setSelectedSectionIndex(sectionIndex);
+        setSelectedSubSectionId(subSection.props.id);
+      }
+    },
+    [mode]
+  );
+
+  const classes = useStyles();
+  const objectPageClasses = StyleClassHelper.of(classes.objectPage);
+  if (className) {
+    objectPageClasses.put(className);
+  }
+
+  return (
+    <div
+      data-component-name="ObjectPage"
+      slot={slot}
+      className={objectPageClasses.toString()}
+      style={style}
+      ref={objectPage}
+      title={tooltip}
+    >
+      <ObjectPageHeader
+        title={title}
+        subTitle={subTitle}
+        image={image}
+        headerActions={headerActions}
+        renderHeaderContent={renderHeaderContent}
+        imageShapeCircle={imageShapeCircle}
+        showHideHeaderButton={showHideHeaderButton}
+      />
+      <section className={classes.anchorBar} role="navigation">
+        {Children.map(children, (section, index) => (
+          <ObjectPageAnchorButton
+            key={`Anchor-${index}`}
+            section={section}
+            index={index}
+            selected={selectedSectionIndex === index}
+            mode={mode}
+            onSectionSelected={handleOnSectionSelected}
+            onSubSectionSelected={handleOnSubSectionSelected}
+          />
+        ))}
+      </section>
+      <ObjectPageContent ref={objectPageContent} fillerRef={fillerDivDomRef}>
+        {content}
+      </ObjectPageContent>
+    </div>
+  );
+});
+
+ObjectPage.defaultProps = {
+  title: '',
+  subTitle: '',
+  image: null,
+  imageShapeCircle: false,
+  headerActions: [],
+  renderHeaderContent: null,
+  mode: ObjectPageMode.Default,
+  onSelectedSectionChanged: () => {},
+  showHideHeaderButton: false,
+  selectedSectionId: null
+};
diff --git a/yarn.lock b/yarn.lock
index 328992e51d1..658361c0cd0 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2720,7 +2720,7 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@^16.8.19":
+"@types/react@*", "@types/react@16.8.19", "@types/react@^16.8.19":
   version "16.8.19"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.8.19.tgz#629154ef05e2e1985cdde94477deefd823ad9be3"
   integrity sha512-QzEzjrd1zFzY9cDlbIiFvdr+YUmefuuRYrPxmkwG0UQv5XF35gFIi7a95m1bNVcFU0VimxSZ5QVGSiBmlggQXQ==

From 15228e12c4e89a2ce445c34337d75011fc0d7e63 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Fri, 12 Jul 2019 13:37:54 +0200
Subject: [PATCH 3/6] WIP: Updated Test and added noHeader Prop

---
 .../main/__karma_snapshots__/ObjectPage.md    | 1384 +++++++++--------
 .../ObjectPage/ObjectPage.karma.tsx           |   10 +
 .../components/ObjectPage/demo.stories.tsx    |    1 +
 .../main/src/components/ObjectPage/index.tsx  |   27 +-
 4 files changed, 743 insertions(+), 679 deletions(-)

diff --git a/packages/main/__karma_snapshots__/ObjectPage.md b/packages/main/__karma_snapshots__/ObjectPage.md
index 2f76df77467..4777cd6741f 100644
--- a/packages/main/__karma_snapshots__/ObjectPage.md
+++ b/packages/main/__karma_snapshots__/ObjectPage.md
@@ -6,20 +6,20 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]} id={{...}}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(ObjectPage) title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} showHideHeaderButton={true} mode="Default" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]}>
-        <ObjectPage title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} showHideHeaderButton={true} mode="Default" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} innerRef={{...}} classes={{...}} theme={{...}}>
-          <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage-objectPage---" style={[undefined]} title={[undefined]}>
-            <header className="ObjectPage-header---">
-              <header className="ObjectPage-titleBar---">
-                <span className="ObjectPage-container---">
-                  <h1 className="ObjectPage-title---">
+      <ForwardRef title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} showHideHeaderButton={true} mode="Default" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} selectedSectionId={{...}} noHeader={false}>
+        <div data-component-name="ObjectPage" slot={[undefined]} className="-objectPage---" style={[undefined]} title={[undefined]}>
+          <ObjectPageHeader title="Fiori Object Page Title" subTitle="Sub Title" image={{...}} headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} imageShapeCircle={false} showHideHeaderButton={true}>
+            <header className="-header---">
+              <header className="-titleBar---">
+                <span className="-container---">
+                  <h1 className="-title---">
                     Fiori Object Page Title
                   </h1>
-                  <span className="ObjectPage-subTitle---">
+                  <span className="-subTitle---">
                     Sub Title
                   </span>
                 </span>
-                <span className="ObjectPage-actions---">
+                <span className="-actions---">
                   <Button design="Default">
                     <ui5-button design="Default" class="">
                       Action
@@ -27,9 +27,9 @@
                   </Button>
                 </span>
               </header>
-              <div className={[undefined]}>
-                <div className="ObjectPage-headerContent---">
-                  <span className="ObjectPage-headerCustomContent---">
+              <div style={{...}}>
+                <div className="-headerContent---">
+                  <span className="-headerCustomContent---">
                     <div style={{...}}>
                       <Link href="https://www.sap.com" design="Default">
                         <ui5-link href="https://www.sap.com" design="Default" class="">
@@ -60,267 +60,295 @@
                     </div>
                   </span>
                 </div>
-                <div className="ObjectPage-hideHeaderContent---">
-                  <Button style={{...}} icon="sap-icon://navigation-up-arrow" onClick={[Function]} design="Default">
-                    <ui5-button style={{...}} icon="sap-icon://navigation-up-arrow" design="Default" class="" />
-                  </Button>
-                </div>
+                <Button style={{...}} icon="sap-icon://navigation-up-arrow" onClick={[Function]} design="Default">
+                  <ui5-button style={{...}} icon="sap-icon://navigation-up-arrow" design="Default" class="" />
+                </Button>
               </div>
-              <ul className="ObjectPage-anchorBar---" role="navigation">
-                <ObjectPageAnchor section={{...}} selected={true} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={true}>
-                      <Component onClick={[Function]} selected={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button--- Component-selected---">
-                          Test 1
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---">
-                          Test 2
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---">
-                          Test 3
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---">
-                          Test 4
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-                      <div style={{...}} onClick={[Function]}>
-                        <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
-                          <ui5-icon src="sap-icon://slim-arrow-down" style={{...}} class="" />
-                        </Icon>
+            </header>
+          </ObjectPageHeader>
+          <section className="-anchorBar---" role="navigation">
+            <ObjectPageAnchorButton section={{...}} index={0} selected={true} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <Link to="ObjectPageSection-1" containerId="ObjectPageSections" spy={true} activeClass="-selected---" onSetActive={[Function]} duration={400} smooth={true} offset={0}>
+                  <LinkElement className="-selected---" onClick={[Function]}>
+                    <a className="-selected---" onClick={[Function]}>
+                      <span className="-button---">
+                        Test 1
+                      </span>
+                    </a>
+                  </LinkElement>
+                </Link>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={1} selected={false} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <Link to="ObjectPageSection-2" containerId="ObjectPageSections" spy={true} activeClass="-selected---" onSetActive={[Function]} duration={400} smooth={true} offset={45}>
+                  <LinkElement className={[undefined]} onClick={[Function]}>
+                    <a className={[undefined]} onClick={[Function]}>
+                      <span className="-button---">
+                        Test 2
+                      </span>
+                    </a>
+                  </LinkElement>
+                </Link>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={2} selected={false} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <Link to="ObjectPageSection-3" containerId="ObjectPageSections" spy={true} activeClass="-selected---" onSetActive={[Function]} duration={400} smooth={true} offset={45}>
+                  <LinkElement className={[undefined]} onClick={[Function]}>
+                    <a className={[undefined]} onClick={[Function]}>
+                      <span className="-button---">
+                        Test 3
+                      </span>
+                    </a>
+                  </LinkElement>
+                </Link>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={3} selected={false} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <Link to="ObjectPageSection-4" containerId="ObjectPageSections" spy={true} activeClass="-selected---" onSetActive={[Function]} duration={400} smooth={true} offset={45}>
+                  <LinkElement className={[undefined]} onClick={[Function]}>
+                    <a className={[undefined]} onClick={[Function]}>
+                      <span className="-button---">
+                        Test 4
+                      </span>
+                    </a>
+                  </LinkElement>
+                </Link>
+                <Popover open={[undefined]} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                  <div style={{...}} onClick={[Function]}>
+                    <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
+                      <ui5-icon src="sap-icon://slim-arrow-down" style={{...}} class="" />
+                    </Icon>
+                  </div>
+                  <WithWebComponent(Popover) placementType="Bottom" onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                    <ui5-popover no-arrow={true} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
+                      <WithWebComponent(List) onItemClick={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
+                        <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
+                          <Link to="ObjectPageSubSection-4.1" containerId="ObjectPageSections" smooth={true} offset={36}>
+                            <LinkElement className={[undefined]} onClick={[Function]}>
+                              <a className={[undefined]} onClick={[Function]}>
+                                <StandardListItem data-key="4.1" type="Active" infoState="None">
+                                  <ui5-li data-key="4.1" type="Active" info-state="None" class="">
+                                    SubSection 4.1
+                                  </ui5-li>
+                                </StandardListItem>
+                              </a>
+                            </LinkElement>
+                          </Link>
+                          <Link to="ObjectPageSubSection-4.2" containerId="ObjectPageSections" smooth={true} offset={36}>
+                            <LinkElement className={[undefined]} onClick={[Function]}>
+                              <a className={[undefined]} onClick={[Function]}>
+                                <StandardListItem data-key="4.2" type="Active" infoState="None">
+                                  <ui5-li data-key="4.2" type="Active" info-state="None" class="">
+                                    SubSection 4.2
+                                  </ui5-li>
+                                </StandardListItem>
+                              </a>
+                            </LinkElement>
+                          </Link>
+                        </ui5-list>
+                      </WithWebComponent(List)>
+                    </ui5-popover>
+                  </WithWebComponent(Popover)>
+                </Popover>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={4} selected={false} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <Link to="ObjectPageSection-5" containerId="ObjectPageSections" spy={true} activeClass="-selected---" onSetActive={[Function]} duration={400} smooth={true} offset={45}>
+                  <LinkElement className={[undefined]} onClick={[Function]}>
+                    <a className={[undefined]} onClick={[Function]}>
+                      <span className="-button---">
+                        Test 5
+                      </span>
+                    </a>
+                  </LinkElement>
+                </Link>
+                <Popover open={[undefined]} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                  <div style={{...}} onClick={[Function]}>
+                    <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
+                      <ui5-icon src="sap-icon://slim-arrow-down" style={{...}} class="" />
+                    </Icon>
+                  </div>
+                  <WithWebComponent(Popover) placementType="Bottom" onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                    <ui5-popover no-arrow={true} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
+                      <WithWebComponent(List) onItemClick={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
+                        <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
+                          <Link to="ObjectPageSubSection-5.1" containerId="ObjectPageSections" smooth={true} offset={36}>
+                            <LinkElement className={[undefined]} onClick={[Function]}>
+                              <a className={[undefined]} onClick={[Function]}>
+                                <StandardListItem data-key="5.1" type="Active" infoState="None">
+                                  <ui5-li data-key="5.1" type="Active" info-state="None" class="">
+                                    SubSection 5.1
+                                  </ui5-li>
+                                </StandardListItem>
+                              </a>
+                            </LinkElement>
+                          </Link>
+                          <Link to="ObjectPageSubSection-5.2" containerId="ObjectPageSections" smooth={true} offset={36}>
+                            <LinkElement className={[undefined]} onClick={[Function]}>
+                              <a className={[undefined]} onClick={[Function]}>
+                                <StandardListItem data-key="5.2" type="Active" infoState="None">
+                                  <ui5-li data-key="5.2" type="Active" info-state="None" class="">
+                                    SubSection 5.2
+                                  </ui5-li>
+                                </StandardListItem>
+                              </a>
+                            </LinkElement>
+                          </Link>
+                        </ui5-list>
+                      </WithWebComponent(List)>
+                    </ui5-popover>
+                  </WithWebComponent(Popover)>
+                </Popover>
+              </li>
+            </ObjectPageAnchorButton>
+          </section>
+          <ForwardRef fillerRef={{...}}>
+            <section id="ObjectPageSections" className="-sectionsContainer---">
+              <WithStyles(ObjectPageSection) title="Test 1" id="1" isSection={true} titleUppercase={true}>
+                <ObjectPageSection title="Test 1" id="1" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
+                        Test 1
                       </div>
-                      <WithWebComponent(Popover) placementType="Bottom" onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-                        <ui5-popover no-arrow={true} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
-                          <WithWebComponent(List) onItemClick={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
-                            <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                              <StandardListItem data-key="4.1" type="Active" infoState="None">
-                                <ui5-li data-key="4.1" type="Active" info-state="None" class="">
-                                  SubSection 4.1
-                                </ui5-li>
-                              </StandardListItem>
-                              <StandardListItem data-key="4.2" type="Active" infoState="None">
-                                <ui5-li data-key="4.2" type="Active" info-state="None" class="">
-                                  SubSection 4.2
-                                </ui5-li>
-                              </StandardListItem>
-                            </ui5-list>
-                          </WithWebComponent(List)>
-                        </ui5-popover>
-                      </WithWebComponent(Popover)>
-                    </Popover>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---">
-                          Test 5
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-                      <div style={{...}} onClick={[Function]}>
-                        <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
-                          <ui5-icon src="sap-icon://slim-arrow-down" style={{...}} class="" />
-                        </Icon>
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        <Label for="">
+                          <ui5-label for="" class="">
+                            My Content 1
+                          </ui5-label>
+                        </Label>
                       </div>
-                      <WithWebComponent(Popover) placementType="Bottom" onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-                        <ui5-popover no-arrow={true} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
-                          <WithWebComponent(List) onItemClick={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
-                            <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                              <StandardListItem data-key="5.1" type="Active" infoState="None">
-                                <ui5-li data-key="5.1" type="Active" info-state="None" class="">
-                                  SubSection 5.1
-                                </ui5-li>
-                              </StandardListItem>
-                              <StandardListItem data-key="5.2" type="Active" infoState="None">
-                                <ui5-li data-key="5.2" type="Active" info-state="None" class="">
-                                  SubSection 5.2
-                                </ui5-li>
-                              </StandardListItem>
-                            </ui5-list>
-                          </WithWebComponent(List)>
-                        </ui5-popover>
-                      </WithWebComponent(Popover)>
-                    </Popover>
-                  </li>
-                </ObjectPageAnchor>
-              </ul>
-            </header>
-            <ForwardRef>
-              <WithStyles(Component)>
-                <Component innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSections" className="Component-sectionsContainer---">
-                    <WithStyles(ObjectPageSection) title="Test 1" id="1" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection title="Test 1" id="1" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                              Test 1
-                            </div>
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              <Label for="">
-                                <ui5-label for="" class="">
-                                  My Content 1
-                                </ui5-label>
-                              </Label>
-                            </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <WithStyles(ObjectPageSection) title="Test 2" id="2" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection title="Test 2" id="2" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                              Test 2
-                            </div>
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              <div style={{...}}>
-                                Test2
+                    </div>
+                  </section>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <WithStyles(ObjectPageSection) title="Test 2" id="2" isSection={true} titleUppercase={true}>
+                <ObjectPageSection title="Test 2" id="2" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
+                        Test 2
+                      </div>
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        <div style={{...}}>
+                          Test2
+                        </div>
+                      </div>
+                    </div>
+                  </section>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <WithStyles(ObjectPageSection) title="Test 3" id="3" isSection={true} titleUppercase={true}>
+                <ObjectPageSection title="Test 3" id="3" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-3" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
+                        Test 3
+                      </div>
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        Test1
+                      </div>
+                    </div>
+                  </section>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <WithStyles(ObjectPageSection) title="Test 4" id="4" isSection={true} titleUppercase={true}>
+                <ObjectPageSection title="Test 4" id="4" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-4" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
+                        Test 4
+                      </div>
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        <h1>
+                          Section 4
+                        </h1>
+                        <WithStyles(ObjectPageSubSection) title="SubSection 4.1" id="4.1" isSubSection={true}>
+                          <ObjectPageSubSection title="SubSection 4.1" id="4.1" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                            <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-4.1" role="region" style={[undefined]} title={[undefined]}>
+                              <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
+                                SubSection 4.1
+                              </div>
+                              <div className="ObjectPageSubSection-subSectionContent---">
+                                Test 4 SubSection 1
                               </div>
                             </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <WithStyles(ObjectPageSection) title="Test 3" id="3" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection title="Test 3" id="3" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-3" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                              Test 3
-                            </div>
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              Test1
-                            </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <WithStyles(ObjectPageSection) title="Test 4" id="4" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection title="Test 4" id="4" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-4" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                              Test 4
-                            </div>
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              <h1>
-                                Section 4
-                              </h1>
-                              <WithStyles(ObjectPageSubSection) title="SubSection 4.1" id="4.1" isSubSection={true}>
-                                <ObjectPageSubSection title="SubSection 4.1" id="4.1" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                                  <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-4.1" role="region" style={[undefined]} title={[undefined]}>
-                                    <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
-                                      SubSection 4.1
-                                    </div>
-                                    <div className="ObjectPageSubSection-subSectionContent---">
-                                      Test 4 SubSection 1
-                                    </div>
-                                  </div>
-                                </ObjectPageSubSection>
-                              </WithStyles(ObjectPageSubSection)>
-                              <WithStyles(ObjectPageSubSection) title="SubSection 4.2" id="4.2" isSubSection={true}>
-                                <ObjectPageSubSection title="SubSection 4.2" id="4.2" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                                  <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-4.2" role="region" style={[undefined]} title={[undefined]}>
-                                    <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
-                                      SubSection 4.2
-                                    </div>
-                                    <div className="ObjectPageSubSection-subSectionContent---">
-                                      Test 4 SubSection 2
-                                    </div>
-                                  </div>
-                                </ObjectPageSubSection>
-                              </WithStyles(ObjectPageSubSection)>
+                          </ObjectPageSubSection>
+                        </WithStyles(ObjectPageSubSection)>
+                        <WithStyles(ObjectPageSubSection) title="SubSection 4.2" id="4.2" isSubSection={true}>
+                          <ObjectPageSubSection title="SubSection 4.2" id="4.2" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                            <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-4.2" role="region" style={[undefined]} title={[undefined]}>
+                              <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
+                                SubSection 4.2
+                              </div>
+                              <div className="ObjectPageSubSection-subSectionContent---">
+                                Test 4 SubSection 2
+                              </div>
                             </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <WithStyles(ObjectPageSection) title="Test 5" id="5" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection title="Test 5" id="5" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-5" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                              Test 5
+                          </ObjectPageSubSection>
+                        </WithStyles(ObjectPageSubSection)>
+                      </div>
+                    </div>
+                  </section>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <WithStyles(ObjectPageSection) title="Test 5" id="5" isSection={true} titleUppercase={true}>
+                <ObjectPageSection title="Test 5" id="5" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-5" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
+                        Test 5
+                      </div>
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        <WithStyles(ObjectPageSubSection) title="SubSection 5.1" id="5.1" isSubSection={true}>
+                          <ObjectPageSubSection title="SubSection 5.1" id="5.1" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                            <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-5.1" role="region" style={[undefined]} title={[undefined]}>
+                              <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
+                                SubSection 5.1
+                              </div>
+                              <div className="ObjectPageSubSection-subSectionContent---">
+                                Content of SubSection 5.1
+                              </div>
                             </div>
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              <WithStyles(ObjectPageSubSection) title="SubSection 5.1" id="5.1" isSubSection={true}>
-                                <ObjectPageSubSection title="SubSection 5.1" id="5.1" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                                  <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-5.1" role="region" style={[undefined]} title={[undefined]}>
-                                    <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
-                                      SubSection 5.1
-                                    </div>
-                                    <div className="ObjectPageSubSection-subSectionContent---">
-                                      Content of SubSection 5.1
-                                    </div>
-                                  </div>
-                                </ObjectPageSubSection>
-                              </WithStyles(ObjectPageSubSection)>
-                              <WithStyles(ObjectPageSubSection) title="SubSection 5.2" id="5.2" isSubSection={true}>
-                                <ObjectPageSubSection title="SubSection 5.2" id="5.2" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                                  <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-5.2" role="region" style={[undefined]} title={[undefined]}>
-                                    <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
-                                      SubSection 5.2
-                                    </div>
-                                    <div className="ObjectPageSubSection-subSectionContent---">
-                                      Content of SubSection 5.2
-                                    </div>
-                                  </div>
-                                </ObjectPageSubSection>
-                              </WithStyles(ObjectPageSubSection)>
+                          </ObjectPageSubSection>
+                        </WithStyles(ObjectPageSubSection)>
+                        <WithStyles(ObjectPageSubSection) title="SubSection 5.2" id="5.2" isSubSection={true}>
+                          <ObjectPageSubSection title="SubSection 5.2" id="5.2" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                            <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-5.2" role="region" style={[undefined]} title={[undefined]}>
+                              <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
+                                SubSection 5.2
+                              </div>
+                              <div className="ObjectPageSubSection-subSectionContent---">
+                                Content of SubSection 5.2
+                              </div>
                             </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <div />
+                          </ObjectPageSubSection>
+                        </WithStyles(ObjectPageSubSection)>
+                      </div>
+                    </div>
                   </section>
-                </Component>
-              </WithStyles(Component)>
-            </ForwardRef>
-          </div>
-        </ObjectPage>
-      </WithStyles(ObjectPage)>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <div />
+            </section>
+          </ForwardRef>
+        </div>
+      </ForwardRef>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
@@ -332,20 +360,20 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]} id={{...}}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(ObjectPage) title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} mode="Default" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false}>
-        <ObjectPage title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} mode="Default" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} innerRef={{...}} classes={{...}} theme={{...}}>
-          <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage-objectPage---" style={[undefined]} title={[undefined]}>
-            <header className="ObjectPage-header---">
-              <header className="ObjectPage-titleBar---">
-                <span className="ObjectPage-container---">
-                  <h1 className="ObjectPage-title---">
+      <ForwardRef title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} mode="Default" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} selectedSectionId={{...}} noHeader={false}>
+        <div data-component-name="ObjectPage" slot={[undefined]} className="-objectPage---" style={[undefined]} title={[undefined]}>
+          <ObjectPageHeader title="Fiori Object Page Title" subTitle="Sub Title" image={{...}} headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} imageShapeCircle={false} showHideHeaderButton={false}>
+            <header className="-header---">
+              <header className="-titleBar---">
+                <span className="-container---">
+                  <h1 className="-title---">
                     Fiori Object Page Title
                   </h1>
-                  <span className="ObjectPage-subTitle---">
+                  <span className="-subTitle---">
                     Sub Title
                   </span>
                 </span>
-                <span className="ObjectPage-actions---">
+                <span className="-actions---">
                   <Button design="Default">
                     <ui5-button design="Default" class="">
                       Action
@@ -353,9 +381,9 @@
                   </Button>
                 </span>
               </header>
-              <div className={[undefined]}>
-                <div className="ObjectPage-headerContent---">
-                  <span className="ObjectPage-headerCustomContent---">
+              <div style={{...}}>
+                <div className="-headerContent---">
+                  <span className="-headerCustomContent---">
                     <div style={{...}}>
                       <Link href="https://www.sap.com" design="Default">
                         <ui5-link href="https://www.sap.com" design="Default" class="">
@@ -386,116 +414,117 @@
                     </div>
                   </span>
                 </div>
-                <div className="ObjectPage-hideHeaderContent---" />
               </div>
-              <ul className="ObjectPage-anchorBar---" role="navigation">
-                <ObjectPageAnchor section={{...}} selected={true} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={true}>
-                      <Component onClick={[Function]} selected={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button--- Component-selected---">
-                          Test 1
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---">
-                          Test 2
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---">
-                          Test 3
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-              </ul>
             </header>
-            <ForwardRef>
-              <WithStyles(Component)>
-                <Component innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSections" className="Component-sectionsContainer---">
-                    <WithStyles(ObjectPageSection) title="Test 1" id="1" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection title="Test 1" id="1" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                              Test 1
-                            </div>
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              <Label for="">
-                                <ui5-label for="" class="">
-                                  My Content 1
-                                </ui5-label>
-                              </Label>
-                            </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <WithStyles(ObjectPageSection) title="Test 2" id="2" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection title="Test 2" id="2" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                              Test 2
-                            </div>
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              <Label for="">
-                                <ui5-label for="" class="">
-                                  My Content 2
-                                </ui5-label>
-                              </Label>
-                            </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <WithStyles(ObjectPageSection) title="Test 3" id="3" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection title="Test 3" id="3" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-3" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                              Test 3
-                            </div>
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              <Label for="">
-                                <ui5-label for="" class="">
-                                  My Content 3
-                                </ui5-label>
-                              </Label>
-                            </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <div />
+          </ObjectPageHeader>
+          <section className="-anchorBar---" role="navigation">
+            <ObjectPageAnchorButton section={{...}} index={0} selected={true} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <Link to="ObjectPageSection-1" containerId="ObjectPageSections" spy={true} activeClass="-selected---" onSetActive={[Function]} duration={400} smooth={true} offset={0}>
+                  <LinkElement className="-selected---" onClick={[Function]}>
+                    <a className="-selected---" onClick={[Function]}>
+                      <span className="-button---">
+                        Test 1
+                      </span>
+                    </a>
+                  </LinkElement>
+                </Link>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={1} selected={false} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <Link to="ObjectPageSection-2" containerId="ObjectPageSections" spy={true} activeClass="-selected---" onSetActive={[Function]} duration={400} smooth={true} offset={45}>
+                  <LinkElement className={[undefined]} onClick={[Function]}>
+                    <a className={[undefined]} onClick={[Function]}>
+                      <span className="-button---">
+                        Test 2
+                      </span>
+                    </a>
+                  </LinkElement>
+                </Link>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={2} selected={false} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <Link to="ObjectPageSection-3" containerId="ObjectPageSections" spy={true} activeClass="-selected---" onSetActive={[Function]} duration={400} smooth={true} offset={45}>
+                  <LinkElement className={[undefined]} onClick={[Function]}>
+                    <a className={[undefined]} onClick={[Function]}>
+                      <span className="-button---">
+                        Test 3
+                      </span>
+                    </a>
+                  </LinkElement>
+                </Link>
+              </li>
+            </ObjectPageAnchorButton>
+          </section>
+          <ForwardRef fillerRef={{...}}>
+            <section id="ObjectPageSections" className="-sectionsContainer---">
+              <WithStyles(ObjectPageSection) title="Test 1" id="1" isSection={true} titleUppercase={true}>
+                <ObjectPageSection title="Test 1" id="1" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
+                        Test 1
+                      </div>
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        <Label for="">
+                          <ui5-label for="" class="">
+                            My Content 1
+                          </ui5-label>
+                        </Label>
+                      </div>
+                    </div>
                   </section>
-                </Component>
-              </WithStyles(Component)>
-            </ForwardRef>
-          </div>
-        </ObjectPage>
-      </WithStyles(ObjectPage)>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <WithStyles(ObjectPageSection) title="Test 2" id="2" isSection={true} titleUppercase={true}>
+                <ObjectPageSection title="Test 2" id="2" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
+                        Test 2
+                      </div>
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        <Label for="">
+                          <ui5-label for="" class="">
+                            My Content 2
+                          </ui5-label>
+                        </Label>
+                      </div>
+                    </div>
+                  </section>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <WithStyles(ObjectPageSection) title="Test 3" id="3" isSection={true} titleUppercase={true}>
+                <ObjectPageSection title="Test 3" id="3" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-3" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
+                        Test 3
+                      </div>
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        <Label for="">
+                          <ui5-label for="" class="">
+                            My Content 3
+                          </ui5-label>
+                        </Label>
+                      </div>
+                    </div>
+                  </section>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <div />
+            </section>
+          </ForwardRef>
+        </div>
+      </ForwardRef>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
@@ -507,20 +536,20 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]} id={{...}}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(ObjectPage) title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} showHideHeaderButton={true} mode="IconTabBar" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]}>
-        <ObjectPage title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} showHideHeaderButton={true} mode="IconTabBar" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} innerRef={{...}} classes={{...}} theme={{...}}>
-          <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage-objectPage---" style={[undefined]} title={[undefined]}>
-            <header className="ObjectPage-header---">
-              <header className="ObjectPage-titleBar---">
-                <span className="ObjectPage-container---">
-                  <h1 className="ObjectPage-title---">
+      <ForwardRef title="Fiori Object Page Title" subTitle="Sub Title" headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} showHideHeaderButton={true} mode="IconTabBar" image={{...}} imageShapeCircle={false} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} selectedSectionId={{...}} noHeader={false}>
+        <div data-component-name="ObjectPage" slot={[undefined]} className="-objectPage---" style={[undefined]} title={[undefined]}>
+          <ObjectPageHeader title="Fiori Object Page Title" subTitle="Sub Title" image={{...}} headerActions={{...}} renderHeaderContent={[Function: renderHeaderContent]} imageShapeCircle={false} showHideHeaderButton={true}>
+            <header className="-header---">
+              <header className="-titleBar---">
+                <span className="-container---">
+                  <h1 className="-title---">
                     Fiori Object Page Title
                   </h1>
-                  <span className="ObjectPage-subTitle---">
+                  <span className="-subTitle---">
                     Sub Title
                   </span>
                 </span>
-                <span className="ObjectPage-actions---">
+                <span className="-actions---">
                   <Button design="Default">
                     <ui5-button design="Default" class="">
                       Action
@@ -528,9 +557,9 @@
                   </Button>
                 </span>
               </header>
-              <div className={[undefined]}>
-                <div className="ObjectPage-headerContent---">
-                  <span className="ObjectPage-headerCustomContent---">
+              <div style={{...}}>
+                <div className="-headerContent---">
+                  <span className="-headerCustomContent---">
                     <div style={{...}}>
                       <Link href="https://www.sap.com" design="Default">
                         <ui5-link href="https://www.sap.com" design="Default" class="">
@@ -561,152 +590,126 @@
                     </div>
                   </span>
                 </div>
-                <div className="ObjectPage-hideHeaderContent---">
-                  <Button style={{...}} icon="sap-icon://navigation-up-arrow" onClick={[Function]} design="Default">
-                    <ui5-button style={{...}} icon="sap-icon://navigation-up-arrow" design="Default" class="" />
-                  </Button>
-                </div>
+                <Button style={{...}} icon="sap-icon://navigation-up-arrow" onClick={[Function]} design="Default">
+                  <ui5-button style={{...}} icon="sap-icon://navigation-up-arrow" design="Default" class="" />
+                </Button>
               </div>
-              <ul className="ObjectPage-anchorBar---" role="navigation">
-                <ObjectPageAnchor section={{...}} selected={true} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={true}>
-                      <Component onClick={[Function]} selected={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button--- Component-selected---">
-                          Test 1
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---">
-                          Test 2
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---">
-                          Test 3
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---">
-                          Test 4
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-                      <div style={{...}} onClick={[Function]}>
-                        <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
-                          <ui5-icon src="sap-icon://slim-arrow-down" style={{...}} class="" />
-                        </Icon>
+            </header>
+          </ObjectPageHeader>
+          <section className="-anchorBar---" role="navigation">
+            <ObjectPageAnchorButton section={{...}} index={0} selected={true} mode="IconTabBar" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <span onClick={[Function]} className="-button--- -selected---">
+                  Test 1
+                </span>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={1} selected={false} mode="IconTabBar" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <span onClick={[Function]} className="-button---">
+                  Test 2
+                </span>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={2} selected={false} mode="IconTabBar" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <span onClick={[Function]} className="-button---">
+                  Test 3
+                </span>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={3} selected={false} mode="IconTabBar" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <span onClick={[Function]} className="-button---">
+                  Test 4
+                </span>
+                <Popover open={[undefined]} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                  <div style={{...}} onClick={[Function]}>
+                    <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
+                      <ui5-icon src="sap-icon://slim-arrow-down" style={{...}} class="" />
+                    </Icon>
+                  </div>
+                  <WithWebComponent(Popover) placementType="Bottom" onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                    <ui5-popover no-arrow={true} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
+                      <WithWebComponent(List) onItemClick={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
+                        <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
+                          <StandardListItem data-key="4.1" type="Active" infoState="None">
+                            <ui5-li data-key="4.1" type="Active" info-state="None" class="">
+                              SubSection 4.1
+                            </ui5-li>
+                          </StandardListItem>
+                          <StandardListItem data-key="4.2" type="Active" infoState="None">
+                            <ui5-li data-key="4.2" type="Active" info-state="None" class="">
+                              SubSection 4.2
+                            </ui5-li>
+                          </StandardListItem>
+                        </ui5-list>
+                      </WithWebComponent(List)>
+                    </ui5-popover>
+                  </WithWebComponent(Popover)>
+                </Popover>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={4} selected={false} mode="IconTabBar" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <span onClick={[Function]} className="-button---">
+                  Test 5
+                </span>
+                <Popover open={[undefined]} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                  <div style={{...}} onClick={[Function]}>
+                    <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
+                      <ui5-icon src="sap-icon://slim-arrow-down" style={{...}} class="" />
+                    </Icon>
+                  </div>
+                  <WithWebComponent(Popover) placementType="Bottom" onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
+                    <ui5-popover no-arrow={true} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
+                      <WithWebComponent(List) onItemClick={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
+                        <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
+                          <StandardListItem data-key="5.1" type="Active" infoState="None">
+                            <ui5-li data-key="5.1" type="Active" info-state="None" class="">
+                              SubSection 5.1
+                            </ui5-li>
+                          </StandardListItem>
+                          <StandardListItem data-key="5.2" type="Active" infoState="None">
+                            <ui5-li data-key="5.2" type="Active" info-state="None" class="">
+                              SubSection 5.2
+                            </ui5-li>
+                          </StandardListItem>
+                        </ui5-list>
+                      </WithWebComponent(List)>
+                    </ui5-popover>
+                  </WithWebComponent(Popover)>
+                </Popover>
+              </li>
+            </ObjectPageAnchorButton>
+          </section>
+          <ForwardRef fillerRef={{...}}>
+            <section id="ObjectPageSections" className="-sectionsContainer---">
+              <WithStyles(ObjectPageSection) title="Test 1" id="1" isSection={true} titleUppercase={true}>
+                <ObjectPageSection title="Test 1" id="1" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
+                        Test 1
                       </div>
-                      <WithWebComponent(Popover) placementType="Bottom" onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-                        <ui5-popover no-arrow={true} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
-                          <WithWebComponent(List) onItemClick={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
-                            <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                              <StandardListItem data-key="4.1" type="Active" infoState="None">
-                                <ui5-li data-key="4.1" type="Active" info-state="None" class="">
-                                  SubSection 4.1
-                                </ui5-li>
-                              </StandardListItem>
-                              <StandardListItem data-key="4.2" type="Active" infoState="None">
-                                <ui5-li data-key="4.2" type="Active" info-state="None" class="">
-                                  SubSection 4.2
-                                </ui5-li>
-                              </StandardListItem>
-                            </ui5-list>
-                          </WithWebComponent(List)>
-                        </ui5-popover>
-                      </WithWebComponent(Popover)>
-                    </Popover>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---">
-                          Test 5
-                        </span>
-                      </Component>
-                    </WithStyles(Component)>
-                    <Popover open={false} placementType="Bottom" openBy={{...}} onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-                      <div style={{...}} onClick={[Function]}>
-                        <Icon src="sap-icon://slim-arrow-down" onPress={[Function]} style={{...}}>
-                          <ui5-icon src="sap-icon://slim-arrow-down" style={{...}} class="" />
-                        </Icon>
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        <Label for="">
+                          <ui5-label for="" class="">
+                            My Content 1
+                          </ui5-label>
+                        </Label>
                       </div>
-                      <WithWebComponent(Popover) placementType="Bottom" onAfterClose={[Function]} noArrow={true} initialFocus={{...}} headerText="" horizontalAlign="Center" verticalAlign="Center">
-                        <ui5-popover no-arrow={true} placement-type="Bottom" initial-focus={{...}} header-text="" horizontal-align="Center" vertical-align="Center" class="">
-                          <WithWebComponent(List) onItemClick={[Function]} headerText="" footerText="" mode="None" noDataText="" separators="All">
-                            <ui5-list header-text="" footer-text="" mode="None" no-data-text="" separators="All" class="">
-                              <StandardListItem data-key="5.1" type="Active" infoState="None">
-                                <ui5-li data-key="5.1" type="Active" info-state="None" class="">
-                                  SubSection 5.1
-                                </ui5-li>
-                              </StandardListItem>
-                              <StandardListItem data-key="5.2" type="Active" infoState="None">
-                                <ui5-li data-key="5.2" type="Active" info-state="None" class="">
-                                  SubSection 5.2
-                                </ui5-li>
-                              </StandardListItem>
-                            </ui5-list>
-                          </WithWebComponent(List)>
-                        </ui5-popover>
-                      </WithWebComponent(Popover)>
-                    </Popover>
-                  </li>
-                </ObjectPageAnchor>
-              </ul>
-            </header>
-            <ForwardRef>
-              <WithStyles(Component)>
-                <Component innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSections" className="Component-sectionsContainer---">
-                    <WithStyles(ObjectPageSection) title="Test 1" id="1" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection title="Test 1" id="1" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                              Test 1
-                            </div>
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              <Label for="">
-                                <ui5-label for="" class="">
-                                  My Content 1
-                                </ui5-label>
-                              </Label>
-                            </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <div />
+                    </div>
                   </section>
-                </Component>
-              </WithStyles(Component)>
-            </ForwardRef>
-          </div>
-        </ObjectPage>
-      </WithStyles(ObjectPage)>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <div />
+            </section>
+          </ForwardRef>
+        </div>
+      </ForwardRef>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
@@ -715,7 +718,7 @@
 #### `Just Some Sections`
 
 ```
-<header class="ObjectPage-header---"><header class="ObjectPage-titleBar---"><span class="ObjectPage-container---"><h1 class="ObjectPage-title---"></h1><span class="ObjectPage-subTitle---"></span></span><span class="ObjectPage-actions---"></span></header><div><div class="ObjectPage-headerContent---"></div><div class="ObjectPage-hideHeaderContent---"></div></div><ul class="ObjectPage-anchorBar---" role="navigation"><li class="ObjectPage-anchorButtonContainer---"><span class="Component-button--- Component-selected---"></span></li><li class="ObjectPage-anchorButtonContainer---"><span class="Component-button---"></span></li></ul></header><section id="ObjectPageSections" class="Component-sectionsContainer---"><section id="ObjectPageSection-1" role="region"><div role="heading" class="ObjectPageSection-header---"><div class="ObjectPageSection-title--- ObjectPageSection-uppercase---"></div></div><div class="ObjectPageSection-sectionContent---"><div class="ObjectPageSection-sectionContentInner---">Test</div></div></section><div></div></section>
+<header class="-header---"><header class="-titleBar---"><span class="-container---"><h1 class="-title---"></h1><span class="-subTitle---"></span></span><span class="-actions---"></span></header><div style="position:relative"><div class="-headerContent---"></div></div></header><section class="-anchorBar---" role="navigation"><li class="-anchorButtonContainer---"><span class="-button--- -selected---"></span></li><li class="-anchorButtonContainer---"><span class="-button---"></span></li></section><section id="ObjectPageSections" class="-sectionsContainer---"><section id="ObjectPageSection-1" role="region"><div role="heading" class="ObjectPageSection-header---"><div class="ObjectPageSection-title--- ObjectPageSection-uppercase---"></div></div><div class="ObjectPageSection-sectionContent---"><div class="ObjectPageSection-sectionContentInner---">Test</div></div></section><div></div></section>
 ```
 
 #### `Not crashing with 1 section`
@@ -724,59 +727,50 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]} id={{...}}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(ObjectPage) mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false}>
-        <ObjectPage mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} innerRef={{...}} classes={{...}} theme={{...}}>
-          <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage-objectPage---" style={[undefined]} title={[undefined]}>
-            <header className="ObjectPage-header---">
-              <header className="ObjectPage-titleBar---">
-                <span className="ObjectPage-container---">
-                  <h1 className="ObjectPage-title---" />
-                  <span className="ObjectPage-subTitle---" />
+      <ForwardRef mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} selectedSectionId={{...}} noHeader={false}>
+        <div data-component-name="ObjectPage" slot={[undefined]} className="-objectPage---" style={[undefined]} title={[undefined]}>
+          <ObjectPageHeader title="" subTitle="" image={{...}} headerActions={{...}} renderHeaderContent={{...}} imageShapeCircle={false} showHideHeaderButton={false}>
+            <header className="-header---">
+              <header className="-titleBar---">
+                <span className="-container---">
+                  <h1 className="-title---" />
+                  <span className="-subTitle---" />
                 </span>
-                <span className="ObjectPage-actions---" />
+                <span className="-actions---" />
               </header>
-              <div className={[undefined]}>
-                <div className="ObjectPage-headerContent---" />
-                <div className="ObjectPage-hideHeaderContent---" />
+              <div style={{...}}>
+                <div className="-headerContent---" />
               </div>
-              <ul className="ObjectPage-anchorBar---" role="navigation">
-                <ObjectPageAnchor section={{...}} selected={true} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={true}>
-                      <Component onClick={[Function]} selected={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button--- Component-selected---" />
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-              </ul>
             </header>
-            <ForwardRef>
-              <WithStyles(Component)>
-                <Component innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSections" className="Component-sectionsContainer---">
-                    <WithStyles(ObjectPageSection) id="1" title="" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection id="1" title="" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---" />
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              Test
-                            </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <div />
+          </ObjectPageHeader>
+          <section className="-anchorBar---" role="navigation">
+            <ObjectPageAnchorButton section={{...}} index={0} selected={true} mode="IconTabBar" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <span onClick={[Function]} className="-button--- -selected---" />
+              </li>
+            </ObjectPageAnchorButton>
+          </section>
+          <ForwardRef fillerRef={{...}}>
+            <section id="ObjectPageSections" className="-sectionsContainer---">
+              <WithStyles(ObjectPageSection) id="1" title="" isSection={true} titleUppercase={true}>
+                <ObjectPageSection id="1" title="" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---" />
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        Test
+                      </div>
+                    </div>
                   </section>
-                </Component>
-              </WithStyles(Component)>
-            </ForwardRef>
-          </div>
-        </ObjectPage>
-      </WithStyles(ObjectPage)>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <div />
+            </section>
+          </ForwardRef>
+        </div>
+      </ForwardRef>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
@@ -788,35 +782,30 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]} id={{...}}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(ObjectPage) mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false}>
-        <ObjectPage mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} innerRef={{...}} classes={{...}} theme={{...}}>
-          <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage-objectPage---" style={[undefined]} title={[undefined]}>
-            <header className="ObjectPage-header---">
-              <header className="ObjectPage-titleBar---">
-                <span className="ObjectPage-container---">
-                  <h1 className="ObjectPage-title---" />
-                  <span className="ObjectPage-subTitle---" />
+      <ForwardRef mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} selectedSectionId={{...}} noHeader={false}>
+        <div data-component-name="ObjectPage" slot={[undefined]} className="-objectPage---" style={[undefined]} title={[undefined]}>
+          <ObjectPageHeader title="" subTitle="" image={{...}} headerActions={{...}} renderHeaderContent={{...}} imageShapeCircle={false} showHideHeaderButton={false}>
+            <header className="-header---">
+              <header className="-titleBar---">
+                <span className="-container---">
+                  <h1 className="-title---" />
+                  <span className="-subTitle---" />
                 </span>
-                <span className="ObjectPage-actions---" />
+                <span className="-actions---" />
               </header>
-              <div className={[undefined]}>
-                <div className="ObjectPage-headerContent---" />
-                <div className="ObjectPage-hideHeaderContent---" />
+              <div style={{...}}>
+                <div className="-headerContent---" />
               </div>
-              <ul className="ObjectPage-anchorBar---" role="navigation" />
             </header>
-            <ForwardRef>
-              <WithStyles(Component)>
-                <Component innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSections" className="Component-sectionsContainer---">
-                    <div />
-                  </section>
-                </Component>
-              </WithStyles(Component)>
-            </ForwardRef>
-          </div>
-        </ObjectPage>
-      </WithStyles(ObjectPage)>
+          </ObjectPageHeader>
+          <section className="-anchorBar---" role="navigation" />
+          <ForwardRef fillerRef={{...}}>
+            <section id="ObjectPageSections" className="-sectionsContainer---">
+              <div />
+            </section>
+          </ForwardRef>
+        </div>
+      </ForwardRef>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
@@ -828,68 +817,127 @@
 <ThemeProvider withToastContainer={false}>
   <JssProvider generateId={[Function]} id={{...}}>
     <ThemeProvider theme={{...}}>
-      <WithStyles(ObjectPage) selectedSectionId="2" mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false}>
-        <ObjectPage selectedSectionId="2" mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} innerRef={{...}} classes={{...}} theme={{...}}>
-          <div data-component-name="ObjectPage" slot={[undefined]} className="ObjectPage-objectPage---" style={[undefined]} title={[undefined]}>
-            <header className="ObjectPage-header---">
-              <header className="ObjectPage-titleBar---">
-                <span className="ObjectPage-container---">
-                  <h1 className="ObjectPage-title---" />
-                  <span className="ObjectPage-subTitle---" />
+      <ForwardRef selectedSectionId="2" mode="IconTabBar" title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false} noHeader={false}>
+        <div data-component-name="ObjectPage" slot={[undefined]} className="-objectPage---" style={[undefined]} title={[undefined]}>
+          <ObjectPageHeader title="" subTitle="" image={{...}} headerActions={{...}} renderHeaderContent={{...}} imageShapeCircle={false} showHideHeaderButton={false}>
+            <header className="-header---">
+              <header className="-titleBar---">
+                <span className="-container---">
+                  <h1 className="-title---" />
+                  <span className="-subTitle---" />
                 </span>
-                <span className="ObjectPage-actions---" />
+                <span className="-actions---" />
               </header>
-              <div className={[undefined]}>
-                <div className="ObjectPage-headerContent---" />
-                <div className="ObjectPage-hideHeaderContent---" />
+              <div style={{...}}>
+                <div className="-headerContent---" />
               </div>
-              <ul className="ObjectPage-anchorBar---" role="navigation">
-                <ObjectPageAnchor section={{...}} selected={false} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={false}>
-                      <Component onClick={[Function]} selected={false} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button---" />
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-                <ObjectPageAnchor section={{...}} selected={true} classes={{...}} onAnchorSelected={[Function]} onSubSectionSelected={[Function]}>
-                  <li className="ObjectPage-anchorButtonContainer---">
-                    <WithStyles(Component) onClick={[Function]} selected={true}>
-                      <Component onClick={[Function]} selected={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <span onClick={[Function: eventWrapper]} className="Component-button--- Component-selected---" />
-                      </Component>
-                    </WithStyles(Component)>
-                  </li>
-                </ObjectPageAnchor>
-              </ul>
             </header>
-            <ForwardRef>
-              <WithStyles(Component)>
-                <Component innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSections" className="Component-sectionsContainer---">
-                    <WithStyles(ObjectPageSection) id="2" title="" isSection={true} titleUppercase={true}>
-                      <ObjectPageSection id="2" title="" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                        <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                          <div role="heading" className="ObjectPageSection-header---">
-                            <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---" />
-                          </div>
-                          <div className="ObjectPageSection-sectionContent---">
-                            <div className="ObjectPageSection-sectionContentInner---">
-                              Test 2
-                            </div>
-                          </div>
-                        </section>
-                      </ObjectPageSection>
-                    </WithStyles(ObjectPageSection)>
-                    <div />
+          </ObjectPageHeader>
+          <section className="-anchorBar---" role="navigation">
+            <ObjectPageAnchorButton section={{...}} index={0} selected={false} mode="IconTabBar" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <span onClick={[Function]} className="-button---" />
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={1} selected={true} mode="IconTabBar" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <span onClick={[Function]} className="-button--- -selected---" />
+              </li>
+            </ObjectPageAnchorButton>
+          </section>
+          <ForwardRef fillerRef={{...}}>
+            <section id="ObjectPageSections" className="-sectionsContainer---">
+              <WithStyles(ObjectPageSection) id="2" title="" isSection={true} titleUppercase={true}>
+                <ObjectPageSection id="2" title="" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---" />
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        Test 2
+                      </div>
+                    </div>
+                  </section>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <div />
+            </section>
+          </ForwardRef>
+        </div>
+      </ForwardRef>
+    </ThemeProvider>
+  </JssProvider>
+</ThemeProvider>
+```
+
+#### `No Header`
+
+```
+<ThemeProvider withToastContainer={false}>
+  <JssProvider generateId={[Function]} id={{...}}>
+    <ThemeProvider theme={{...}}>
+      <ForwardRef selectedSectionId="2" noHeader={true} title="" subTitle="" image={{...}} imageShapeCircle={false} headerActions={{...}} renderHeaderContent={{...}} mode="Default" onSelectedSectionChanged={[Function: onSelectedSectionChanged]} showHideHeaderButton={false}>
+        <div data-component-name="ObjectPage" slot={[undefined]} className="-objectPage---" style={[undefined]} title={[undefined]}>
+          <section className="-anchorBar---" role="navigation">
+            <ObjectPageAnchorButton section={{...}} index={0} selected={false} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <Link to="ObjectPageSection-1" containerId="ObjectPageSections" spy={true} activeClass="-selected---" onSetActive={[Function]} duration={400} smooth={true} offset={0}>
+                  <LinkElement className="-selected---" onClick={[Function]}>
+                    <a className="-selected---" onClick={[Function]}>
+                      <span className="-button---" />
+                    </a>
+                  </LinkElement>
+                </Link>
+              </li>
+            </ObjectPageAnchorButton>
+            <ObjectPageAnchorButton section={{...}} index={1} selected={true} mode="Default" onSectionSelected={[Function]} onSubSectionSelected={[Function]}>
+              <li className="-anchorButtonContainer---">
+                <Link to="ObjectPageSection-2" containerId="ObjectPageSections" spy={true} activeClass="-selected---" onSetActive={[Function]} duration={400} smooth={true} offset={45}>
+                  <LinkElement className={[undefined]} onClick={[Function]}>
+                    <a className={[undefined]} onClick={[Function]}>
+                      <span className="-button---" />
+                    </a>
+                  </LinkElement>
+                </Link>
+              </li>
+            </ObjectPageAnchorButton>
+          </section>
+          <ForwardRef fillerRef={{...}}>
+            <section id="ObjectPageSections" className="-sectionsContainer---">
+              <WithStyles(ObjectPageSection) id="1" title="" isSection={true} titleUppercase={true}>
+                <ObjectPageSection id="1" title="" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---" />
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        Test
+                      </div>
+                    </div>
+                  </section>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <WithStyles(ObjectPageSection) id="2" title="" isSection={true} titleUppercase={true}>
+                <ObjectPageSection id="2" title="" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
+                  <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                    <div role="heading" className="ObjectPageSection-header---">
+                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---" />
+                    </div>
+                    <div className="ObjectPageSection-sectionContent---">
+                      <div className="ObjectPageSection-sectionContentInner---">
+                        Test 2
+                      </div>
+                    </div>
                   </section>
-                </Component>
-              </WithStyles(Component)>
-            </ForwardRef>
-          </div>
-        </ObjectPage>
-      </WithStyles(ObjectPage)>
+                </ObjectPageSection>
+              </WithStyles(ObjectPageSection)>
+              <div />
+            </section>
+          </ForwardRef>
+        </div>
+      </ForwardRef>
     </ThemeProvider>
   </JssProvider>
 </ThemeProvider>
diff --git a/packages/main/src/components/ObjectPage/ObjectPage.karma.tsx b/packages/main/src/components/ObjectPage/ObjectPage.karma.tsx
index 5ef669ec2af..15b14563bae 100644
--- a/packages/main/src/components/ObjectPage/ObjectPage.karma.tsx
+++ b/packages/main/src/components/ObjectPage/ObjectPage.karma.tsx
@@ -148,4 +148,14 @@ describe('ObjectPage', () => {
       .simulate('click');
     expect(getEventFromCallback(callback).getParameter('selectedSectionId')).to.eq('1');
   });
+
+  it('No Header', () => {
+    const wrapper = mountThemedComponent(
+      <ObjectPage selectedSectionId={'2'} noHeader>
+        <ObjectPageSection id={'1'}>Test</ObjectPageSection>
+        <ObjectPageSection id={'2'}>Test 2</ObjectPageSection>
+      </ObjectPage>
+    );
+    expect(wrapper.debug()).to.matchSnapshot();
+  });
 });
diff --git a/packages/main/src/components/ObjectPage/demo.stories.tsx b/packages/main/src/components/ObjectPage/demo.stories.tsx
index e5cff0208c4..97c695688cf 100644
--- a/packages/main/src/components/ObjectPage/demo.stories.tsx
+++ b/packages/main/src/components/ObjectPage/demo.stories.tsx
@@ -43,6 +43,7 @@ const renderDemo = () => {
       showHideHeaderButton={boolean('showHideHeaderButton', true)}
       selectedSectionId={text('selectedSectionId', '1')}
       onSelectedSectionChanged={action('onSelectedSectionChanged')}
+      noHeader={boolean('noHeader', false)}
       style={{ height: '700px' }}
     >
       <ObjectPageSection title="Test 1" id="1">
diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index a0622641433..686f0574951 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -34,6 +34,7 @@ export interface ObjectPagePropTypes extends CommonProps {
   selectedSectionId?: string;
   onSelectedSectionChanged?: (event: Event) => void;
   showHideHeaderButton?: boolean;
+  noHeader?: boolean;
 }
 
 const useStyles = createUseStyles(styles);
@@ -75,7 +76,8 @@ export const ObjectPage = forwardRef((props: ObjectPagePropTypes, ref: RefObject
     showHideHeaderButton,
     children,
     onSelectedSectionChanged,
-    selectedSectionId
+    selectedSectionId,
+    noHeader
   } = props;
 
   const [selectedSectionIndex, setSelectedSectionIndex] = useState(findSectionIndexById(children, selectedSectionId));
@@ -217,15 +219,17 @@ export const ObjectPage = forwardRef((props: ObjectPagePropTypes, ref: RefObject
       ref={objectPage}
       title={tooltip}
     >
-      <ObjectPageHeader
-        title={title}
-        subTitle={subTitle}
-        image={image}
-        headerActions={headerActions}
-        renderHeaderContent={renderHeaderContent}
-        imageShapeCircle={imageShapeCircle}
-        showHideHeaderButton={showHideHeaderButton}
-      />
+      {!noHeader && (
+        <ObjectPageHeader
+          title={title}
+          subTitle={subTitle}
+          image={image}
+          headerActions={headerActions}
+          renderHeaderContent={renderHeaderContent}
+          imageShapeCircle={imageShapeCircle}
+          showHideHeaderButton={showHideHeaderButton}
+        />
+      )}
       <section className={classes.anchorBar} role="navigation">
         {Children.map(children, (section, index) => (
           <ObjectPageAnchorButton
@@ -256,5 +260,6 @@ ObjectPage.defaultProps = {
   mode: ObjectPageMode.Default,
   onSelectedSectionChanged: () => {},
   showHideHeaderButton: false,
-  selectedSectionId: null
+  selectedSectionId: null,
+  noHeader: false
 };

From f422f8f9636d35369f57526d1a9139f3809f5a53 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Fri, 12 Jul 2019 13:49:11 +0200
Subject: [PATCH 4/6] WIP: Make ObjectPageSection and ObjectPageSubSection a
 functional component

---
 .../main/__karma_snapshots__/ObjectPage.md    | 464 ++++++++----------
 .../__karma_snapshots__/ObjectPageSection.md  |   4 +-
 .../ObjectPageSubSection.md                   |   2 +-
 .../ObjectPageSection.jss.ts                  |   2 +-
 .../components/ObjectPageSection/index.tsx    |  76 ++-
 .../components/ObjectPageSubSection/index.tsx |  73 ++-
 6 files changed, 287 insertions(+), 334 deletions(-)

diff --git a/packages/main/__karma_snapshots__/ObjectPage.md b/packages/main/__karma_snapshots__/ObjectPage.md
index 4777cd6741f..5827bdd0105 100644
--- a/packages/main/__karma_snapshots__/ObjectPage.md
+++ b/packages/main/__karma_snapshots__/ObjectPage.md
@@ -209,141 +209,123 @@
           </section>
           <ForwardRef fillerRef={{...}}>
             <section id="ObjectPageSections" className="-sectionsContainer---">
-              <WithStyles(ObjectPageSection) title="Test 1" id="1" isSection={true} titleUppercase={true}>
-                <ObjectPageSection title="Test 1" id="1" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                        Test 1
-                      </div>
+              <ForwardRef title="Test 1" id="1" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---">
+                      Test 1
                     </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        <Label for="">
-                          <ui5-label for="" class="">
-                            My Content 1
-                          </ui5-label>
-                        </Label>
-                      </div>
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      <Label for="">
+                        <ui5-label for="" class="">
+                          My Content 1
+                        </ui5-label>
+                      </Label>
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
-              <WithStyles(ObjectPageSection) title="Test 2" id="2" isSection={true} titleUppercase={true}>
-                <ObjectPageSection title="Test 2" id="2" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                        Test 2
-                      </div>
+                  </div>
+                </section>
+              </ForwardRef>
+              <ForwardRef title="Test 2" id="2" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---">
+                      Test 2
                     </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        <div style={{...}}>
-                          Test2
-                        </div>
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      <div style={{...}}>
+                        Test2
                       </div>
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
-              <WithStyles(ObjectPageSection) title="Test 3" id="3" isSection={true} titleUppercase={true}>
-                <ObjectPageSection title="Test 3" id="3" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-3" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                        Test 3
-                      </div>
+                  </div>
+                </section>
+              </ForwardRef>
+              <ForwardRef title="Test 3" id="3" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-3" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---">
+                      Test 3
                     </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        Test1
-                      </div>
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      Test1
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
-              <WithStyles(ObjectPageSection) title="Test 4" id="4" isSection={true} titleUppercase={true}>
-                <ObjectPageSection title="Test 4" id="4" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-4" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                        Test 4
-                      </div>
+                  </div>
+                </section>
+              </ForwardRef>
+              <ForwardRef title="Test 4" id="4" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-4" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---">
+                      Test 4
                     </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        <h1>
-                          Section 4
-                        </h1>
-                        <WithStyles(ObjectPageSubSection) title="SubSection 4.1" id="4.1" isSubSection={true}>
-                          <ObjectPageSubSection title="SubSection 4.1" id="4.1" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                            <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-4.1" role="region" style={[undefined]} title={[undefined]}>
-                              <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
-                                SubSection 4.1
-                              </div>
-                              <div className="ObjectPageSubSection-subSectionContent---">
-                                Test 4 SubSection 1
-                              </div>
-                            </div>
-                          </ObjectPageSubSection>
-                        </WithStyles(ObjectPageSubSection)>
-                        <WithStyles(ObjectPageSubSection) title="SubSection 4.2" id="4.2" isSubSection={true}>
-                          <ObjectPageSubSection title="SubSection 4.2" id="4.2" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                            <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-4.2" role="region" style={[undefined]} title={[undefined]}>
-                              <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
-                                SubSection 4.2
-                              </div>
-                              <div className="ObjectPageSubSection-subSectionContent---">
-                                Test 4 SubSection 2
-                              </div>
-                            </div>
-                          </ObjectPageSubSection>
-                        </WithStyles(ObjectPageSubSection)>
-                      </div>
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      <h1>
+                        Section 4
+                      </h1>
+                      <ForwardRef title="SubSection 4.1" id="4.1" isSubSection={true}>
+                        <div className="-objectPageSubSection---" id="ObjectPageSubSection-4.1" role="region" style={[undefined]} title={[undefined]}>
+                          <div className="-objectPageSubSectionHeaderTitle---">
+                            SubSection 4.1
+                          </div>
+                          <div className="-subSectionContent---">
+                            Test 4 SubSection 1
+                          </div>
+                        </div>
+                      </ForwardRef>
+                      <ForwardRef title="SubSection 4.2" id="4.2" isSubSection={true}>
+                        <div className="-objectPageSubSection---" id="ObjectPageSubSection-4.2" role="region" style={[undefined]} title={[undefined]}>
+                          <div className="-objectPageSubSectionHeaderTitle---">
+                            SubSection 4.2
+                          </div>
+                          <div className="-subSectionContent---">
+                            Test 4 SubSection 2
+                          </div>
+                        </div>
+                      </ForwardRef>
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
-              <WithStyles(ObjectPageSection) title="Test 5" id="5" isSection={true} titleUppercase={true}>
-                <ObjectPageSection title="Test 5" id="5" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-5" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                        Test 5
-                      </div>
+                  </div>
+                </section>
+              </ForwardRef>
+              <ForwardRef title="Test 5" id="5" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-5" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---">
+                      Test 5
                     </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        <WithStyles(ObjectPageSubSection) title="SubSection 5.1" id="5.1" isSubSection={true}>
-                          <ObjectPageSubSection title="SubSection 5.1" id="5.1" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                            <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-5.1" role="region" style={[undefined]} title={[undefined]}>
-                              <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
-                                SubSection 5.1
-                              </div>
-                              <div className="ObjectPageSubSection-subSectionContent---">
-                                Content of SubSection 5.1
-                              </div>
-                            </div>
-                          </ObjectPageSubSection>
-                        </WithStyles(ObjectPageSubSection)>
-                        <WithStyles(ObjectPageSubSection) title="SubSection 5.2" id="5.2" isSubSection={true}>
-                          <ObjectPageSubSection title="SubSection 5.2" id="5.2" isSubSection={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                            <div className="ObjectPageSubSection-objectPageSubSection---" id="ObjectPageSubSection-5.2" role="region" style={[undefined]} title={[undefined]}>
-                              <div className="ObjectPageSubSection-objectPageSubSectionHeaderTitle---">
-                                SubSection 5.2
-                              </div>
-                              <div className="ObjectPageSubSection-subSectionContent---">
-                                Content of SubSection 5.2
-                              </div>
-                            </div>
-                          </ObjectPageSubSection>
-                        </WithStyles(ObjectPageSubSection)>
-                      </div>
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      <ForwardRef title="SubSection 5.1" id="5.1" isSubSection={true}>
+                        <div className="-objectPageSubSection---" id="ObjectPageSubSection-5.1" role="region" style={[undefined]} title={[undefined]}>
+                          <div className="-objectPageSubSectionHeaderTitle---">
+                            SubSection 5.1
+                          </div>
+                          <div className="-subSectionContent---">
+                            Content of SubSection 5.1
+                          </div>
+                        </div>
+                      </ForwardRef>
+                      <ForwardRef title="SubSection 5.2" id="5.2" isSubSection={true}>
+                        <div className="-objectPageSubSection---" id="ObjectPageSubSection-5.2" role="region" style={[undefined]} title={[undefined]}>
+                          <div className="-objectPageSubSectionHeaderTitle---">
+                            SubSection 5.2
+                          </div>
+                          <div className="-subSectionContent---">
+                            Content of SubSection 5.2
+                          </div>
+                        </div>
+                      </ForwardRef>
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
+                  </div>
+                </section>
+              </ForwardRef>
               <div />
             </section>
           </ForwardRef>
@@ -460,66 +442,60 @@
           </section>
           <ForwardRef fillerRef={{...}}>
             <section id="ObjectPageSections" className="-sectionsContainer---">
-              <WithStyles(ObjectPageSection) title="Test 1" id="1" isSection={true} titleUppercase={true}>
-                <ObjectPageSection title="Test 1" id="1" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                        Test 1
-                      </div>
+              <ForwardRef title="Test 1" id="1" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---">
+                      Test 1
                     </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        <Label for="">
-                          <ui5-label for="" class="">
-                            My Content 1
-                          </ui5-label>
-                        </Label>
-                      </div>
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      <Label for="">
+                        <ui5-label for="" class="">
+                          My Content 1
+                        </ui5-label>
+                      </Label>
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
-              <WithStyles(ObjectPageSection) title="Test 2" id="2" isSection={true} titleUppercase={true}>
-                <ObjectPageSection title="Test 2" id="2" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                        Test 2
-                      </div>
+                  </div>
+                </section>
+              </ForwardRef>
+              <ForwardRef title="Test 2" id="2" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---">
+                      Test 2
                     </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        <Label for="">
-                          <ui5-label for="" class="">
-                            My Content 2
-                          </ui5-label>
-                        </Label>
-                      </div>
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      <Label for="">
+                        <ui5-label for="" class="">
+                          My Content 2
+                        </ui5-label>
+                      </Label>
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
-              <WithStyles(ObjectPageSection) title="Test 3" id="3" isSection={true} titleUppercase={true}>
-                <ObjectPageSection title="Test 3" id="3" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-3" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                        Test 3
-                      </div>
+                  </div>
+                </section>
+              </ForwardRef>
+              <ForwardRef title="Test 3" id="3" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-3" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---">
+                      Test 3
                     </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        <Label for="">
-                          <ui5-label for="" class="">
-                            My Content 3
-                          </ui5-label>
-                        </Label>
-                      </div>
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      <Label for="">
+                        <ui5-label for="" class="">
+                          My Content 3
+                        </ui5-label>
+                      </Label>
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
+                  </div>
+                </section>
+              </ForwardRef>
               <div />
             </section>
           </ForwardRef>
@@ -685,26 +661,24 @@
           </section>
           <ForwardRef fillerRef={{...}}>
             <section id="ObjectPageSections" className="-sectionsContainer---">
-              <WithStyles(ObjectPageSection) title="Test 1" id="1" isSection={true} titleUppercase={true}>
-                <ObjectPageSection title="Test 1" id="1" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---">
-                        Test 1
-                      </div>
+              <ForwardRef title="Test 1" id="1" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---">
+                      Test 1
                     </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        <Label for="">
-                          <ui5-label for="" class="">
-                            My Content 1
-                          </ui5-label>
-                        </Label>
-                      </div>
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      <Label for="">
+                        <ui5-label for="" class="">
+                          My Content 1
+                        </ui5-label>
+                      </Label>
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
+                  </div>
+                </section>
+              </ForwardRef>
               <div />
             </section>
           </ForwardRef>
@@ -718,7 +692,7 @@
 #### `Just Some Sections`
 
 ```
-<header class="-header---"><header class="-titleBar---"><span class="-container---"><h1 class="-title---"></h1><span class="-subTitle---"></span></span><span class="-actions---"></span></header><div style="position:relative"><div class="-headerContent---"></div></div></header><section class="-anchorBar---" role="navigation"><li class="-anchorButtonContainer---"><span class="-button--- -selected---"></span></li><li class="-anchorButtonContainer---"><span class="-button---"></span></li></section><section id="ObjectPageSections" class="-sectionsContainer---"><section id="ObjectPageSection-1" role="region"><div role="heading" class="ObjectPageSection-header---"><div class="ObjectPageSection-title--- ObjectPageSection-uppercase---"></div></div><div class="ObjectPageSection-sectionContent---"><div class="ObjectPageSection-sectionContentInner---">Test</div></div></section><div></div></section>
+<header class="-header---"><header class="-titleBar---"><span class="-container---"><h1 class="-title---"></h1><span class="-subTitle---"></span></span><span class="-actions---"></span></header><div style="position:relative"><div class="-headerContent---"></div></div></header><section class="-anchorBar---" role="navigation"><li class="-anchorButtonContainer---"><span class="-button--- -selected---"></span></li><li class="-anchorButtonContainer---"><span class="-button---"></span></li></section><section id="ObjectPageSections" class="-sectionsContainer---"><section id="ObjectPageSection-1" role="region"><div role="heading" class="-header---"><div class="-title--- -uppercase---"></div></div><div class="-sectionContent---"><div class="-sectionContentInner---">Test</div></div></section><div></div></section>
 ```
 
 #### `Not crashing with 1 section`
@@ -752,20 +726,18 @@
           </section>
           <ForwardRef fillerRef={{...}}>
             <section id="ObjectPageSections" className="-sectionsContainer---">
-              <WithStyles(ObjectPageSection) id="1" title="" isSection={true} titleUppercase={true}>
-                <ObjectPageSection id="1" title="" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---" />
-                    </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        Test
-                      </div>
+              <ForwardRef id="1" title="" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---" />
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      Test
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
+                  </div>
+                </section>
+              </ForwardRef>
               <div />
             </section>
           </ForwardRef>
@@ -847,20 +819,18 @@
           </section>
           <ForwardRef fillerRef={{...}}>
             <section id="ObjectPageSections" className="-sectionsContainer---">
-              <WithStyles(ObjectPageSection) id="2" title="" isSection={true} titleUppercase={true}>
-                <ObjectPageSection id="2" title="" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---" />
-                    </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        Test 2
-                      </div>
+              <ForwardRef id="2" title="" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---" />
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      Test 2
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
+                  </div>
+                </section>
+              </ForwardRef>
               <div />
             </section>
           </ForwardRef>
@@ -905,34 +875,30 @@
           </section>
           <ForwardRef fillerRef={{...}}>
             <section id="ObjectPageSections" className="-sectionsContainer---">
-              <WithStyles(ObjectPageSection) id="1" title="" isSection={true} titleUppercase={true}>
-                <ObjectPageSection id="1" title="" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---" />
-                    </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        Test
-                      </div>
-                    </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
-              <WithStyles(ObjectPageSection) id="2" title="" isSection={true} titleUppercase={true}>
-                <ObjectPageSection id="2" title="" isSection={true} titleUppercase={true} innerRef={{...}} classes={{...}} theme={{...}}>
-                  <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
-                    <div role="heading" className="ObjectPageSection-header---">
-                      <div className="ObjectPageSection-title--- ObjectPageSection-uppercase---" />
+              <ForwardRef id="1" title="" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-1" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---" />
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      Test
                     </div>
-                    <div className="ObjectPageSection-sectionContent---">
-                      <div className="ObjectPageSection-sectionContentInner---">
-                        Test 2
-                      </div>
+                  </div>
+                </section>
+              </ForwardRef>
+              <ForwardRef id="2" title="" isSection={true} titleUppercase={true}>
+                <section id="ObjectPageSection-2" role="region" className={[undefined]} style={[undefined]} title={[undefined]}>
+                  <div role="heading" className="-header---">
+                    <div className="-title--- -uppercase---" />
+                  </div>
+                  <div className="-sectionContent---">
+                    <div className="-sectionContentInner---">
+                      Test 2
                     </div>
-                  </section>
-                </ObjectPageSection>
-              </WithStyles(ObjectPageSection)>
+                  </div>
+                </section>
+              </ForwardRef>
               <div />
             </section>
           </ForwardRef>
diff --git a/packages/main/__karma_snapshots__/ObjectPageSection.md b/packages/main/__karma_snapshots__/ObjectPageSection.md
index b2c4a985fc7..0694c1f2601 100644
--- a/packages/main/__karma_snapshots__/ObjectPageSection.md
+++ b/packages/main/__karma_snapshots__/ObjectPageSection.md
@@ -3,12 +3,12 @@
 #### `Renders with children`
 
 ```
-<div role="heading" class="ObjectPageSection-header---"><div class="ObjectPageSection-title--- ObjectPageSection-uppercase---">Test</div></div><div class="ObjectPageSection-sectionContent---"><div class="ObjectPageSection-sectionContentInner---">This is my Text</div></div>
+<div role="heading" class="-header---"><div class="-title--- -uppercase---">Test</div></div><div class="-sectionContent---"><div class="-sectionContentInner---">This is my Text</div></div>
 ```
 
 #### `ObjectPage w/ lowercase title`
 
 ```
-<div role="heading" class="ObjectPageSection-header---"><div class="ObjectPageSection-title---">Test</div></div><div class="ObjectPageSection-sectionContent---"><div class="ObjectPageSection-sectionContentInner---">This is my Text</div></div>
+<div role="heading" class="-header---"><div class="-title---">Test</div></div><div class="-sectionContent---"><div class="-sectionContentInner---">This is my Text</div></div>
 ```
 
diff --git a/packages/main/__karma_snapshots__/ObjectPageSubSection.md b/packages/main/__karma_snapshots__/ObjectPageSubSection.md
index f6f1bebc31e..9a0bfa03549 100644
--- a/packages/main/__karma_snapshots__/ObjectPageSubSection.md
+++ b/packages/main/__karma_snapshots__/ObjectPageSubSection.md
@@ -3,6 +3,6 @@
 #### `Render without Crashing`
 
 ```
-<div class="ObjectPageSubSection-objectPageSubSectionHeaderTitle---"></div><div class="ObjectPageSubSection-subSectionContent---"></div>
+<div class="-objectPageSubSectionHeaderTitle---"></div><div class="-subSectionContent---"></div>
 ```
 
diff --git a/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts b/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts
index cc12f1e4e1a..906ebb13b06 100644
--- a/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts
+++ b/packages/main/src/components/ObjectPageSection/ObjectPageSection.jss.ts
@@ -1,7 +1,7 @@
 import { fonts } from '@ui5/webcomponents-react-base';
 import { JSSTheme } from '../../interfaces/JSSTheme';
 
-const styles = ({ theme, parameters }: JSSTheme) => ({
+const styles = ({ parameters }: JSSTheme) => ({
   header: {
     padding: '0 3rem 0 2.5rem',
     borderBottom: `1px solid ${parameters.sapUiGroupTitleBorderColor}`,
diff --git a/packages/main/src/components/ObjectPageSection/index.tsx b/packages/main/src/components/ObjectPageSection/index.tsx
index ef2259244de..e5556392892 100644
--- a/packages/main/src/components/ObjectPageSection/index.tsx
+++ b/packages/main/src/components/ObjectPageSection/index.tsx
@@ -1,6 +1,7 @@
-import { StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { PureComponent, ReactNode, ReactNodeArray } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
+import { StyleClassHelper } from '@ui5/webcomponents-react-base';
+import React, { forwardRef, ReactNode, ReactNodeArray, RefObject } from 'react';
+// @ts-ignore
+import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { EmptyIdPropException } from '../ObjectPage/EmptyIdPropException';
 import styles from './ObjectPageSection.jss';
@@ -12,48 +13,37 @@ export interface ObjectPageSectionPropTypes extends CommonProps {
   children: ReactNode | ReactNodeArray;
 }
 
-export interface ObjectPageSectionInternalProps extends ObjectPageSectionPropTypes, ClassProps {
-  isSection?: true;
-}
+const useStyles = createUseStyles(styles);
 
-@withStyles(styles)
-export class ObjectPageSection extends PureComponent<ObjectPageSectionPropTypes> {
-  static defaultProps = {
-    title: '',
-    isSection: true,
-    titleUppercase: true
-  };
+export const ObjectPageSection = forwardRef((props: ObjectPageSectionPropTypes, ref: RefObject<any>) => {
+  const { title, id, children, titleUppercase, className, style, tooltip } = props;
+  const classes = useStyles();
 
-  render() {
-    const { title, id, children, classes, titleUppercase, className, style, tooltip, innerRef } = this
-      .props as ObjectPageSectionInternalProps;
+  if (!id) {
+    throw new EmptyIdPropException('ObjectPageSection requires a unique ID property!');
+  }
 
-    if (!id) {
-      throw new EmptyIdPropException('ObjectPageSection requires a unique ID property!');
-    }
+  const titleClasses = StyleClassHelper.of(classes.title);
+  if (titleUppercase) {
+    titleClasses.put(classes.uppercase);
+  }
 
-    const titleClasses = StyleClassHelper.of(classes.title);
-    if (titleUppercase) {
-      titleClasses.put(classes.uppercase);
-    }
+  return (
+    <section ref={ref} id={`ObjectPageSection-${id}`} role="region" className={className} style={style} title={tooltip}>
+      <div role="heading" className={classes.header}>
+        <div className={titleClasses.valueOf()}>{title}</div>
+      </div>
+      {/* TODO Check for subsections as they should win over the children */}
+      <div className={classes.sectionContent}>
+        <div className={classes.sectionContentInner}>{children}</div>
+      </div>
+    </section>
+  );
+});
 
-    return (
-      <section
-        ref={innerRef}
-        id={`ObjectPageSection-${id}`}
-        role="region"
-        className={className}
-        style={style}
-        title={tooltip}
-      >
-        <div role="heading" className={classes.header}>
-          <div className={titleClasses.valueOf()}>{title}</div>
-        </div>
-        {/* TODO Check for subsections as they should win over the children */}
-        <div className={classes.sectionContent}>
-          <div className={classes.sectionContentInner}>{children}</div>
-        </div>
-      </section>
-    );
-  }
-}
+ObjectPageSection.defaultProps = {
+  title: '',
+  // @ts-ignore
+  isSection: true,
+  titleUppercase: true
+};
diff --git a/packages/main/src/components/ObjectPageSubSection/index.tsx b/packages/main/src/components/ObjectPageSubSection/index.tsx
index 3bae9253556..ab4bb0e83d8 100644
--- a/packages/main/src/components/ObjectPageSubSection/index.tsx
+++ b/packages/main/src/components/ObjectPageSubSection/index.tsx
@@ -1,6 +1,7 @@
-import { fonts, StyleClassHelper, withStyles } from '@ui5/webcomponents-react-base';
-import React, { PureComponent, ReactNode, ReactNodeArray } from 'react';
-import { ClassProps } from '../../interfaces/ClassProps';
+import { fonts, StyleClassHelper } from '@ui5/webcomponents-react-base';
+import React, { forwardRef, ReactNode, ReactNodeArray, RefObject } from 'react';
+// @ts-ignore
+import { createUseStyles } from 'react-jss';
 import { CommonProps } from '../../interfaces/CommonProps';
 import { JSSTheme } from '../../interfaces/JSSTheme';
 import { EmptyIdPropException } from '../ObjectPage/EmptyIdPropException';
@@ -11,10 +12,6 @@ export interface ObjectPageSubSectionPropTypes extends CommonProps {
   children: ReactNode | ReactNodeArray;
 }
 
-export interface ObjectPageSubSectionInternalProps extends ObjectPageSubSectionPropTypes, ClassProps {
-  isSubSection?: boolean;
-}
-
 const styles = ({ parameters }: JSSTheme) => ({
   objectPageSubSection: {
     padding: '1rem 0',
@@ -33,38 +30,38 @@ const styles = ({ parameters }: JSSTheme) => ({
   }
 });
 
-@withStyles(styles)
-export class ObjectPageSubSection extends PureComponent<ObjectPageSubSectionPropTypes> {
-  static defaultProps = {
-    title: null,
-    isSubSection: true
-  };
+const useStyles = createUseStyles(styles);
 
-  render() {
-    const { children, id, title, classes, className, style, tooltip, innerRef } = this
-      .props as ObjectPageSubSectionInternalProps;
+export const ObjectPageSubSection = forwardRef((props: ObjectPageSubSectionPropTypes, ref: RefObject<any>) => {
+  const { children, id, title, className, style, tooltip } = props;
 
-    if (!id) {
-      throw new EmptyIdPropException('ObjectPageSubSection requires a unique ID property!');
-    }
-
-    const subSectionClassName = StyleClassHelper.of(classes.objectPageSubSection);
-    if (className) {
-      subSectionClassName.put(className);
-    }
+  if (!id) {
+    throw new EmptyIdPropException('ObjectPageSubSection requires a unique ID property!');
+  }
 
-    return (
-      <div
-        ref={innerRef}
-        className={subSectionClassName.toString()}
-        id={`ObjectPageSubSection-${id}`}
-        role="region"
-        style={style}
-        title={tooltip}
-      >
-        <div className={classes.objectPageSubSectionHeaderTitle}>{title}</div>
-        <div className={classes.subSectionContent}>{children}</div>
-      </div>
-    );
+  const classes = useStyles();
+  const subSectionClassName = StyleClassHelper.of(classes.objectPageSubSection);
+  if (className) {
+    subSectionClassName.put(className);
   }
-}
+
+  return (
+    <div
+      ref={ref}
+      className={subSectionClassName.toString()}
+      id={`ObjectPageSubSection-${id}`}
+      role="region"
+      style={style}
+      title={tooltip}
+    >
+      <div className={classes.objectPageSubSectionHeaderTitle}>{title}</div>
+      <div className={classes.subSectionContent}>{children}</div>
+    </div>
+  );
+});
+
+ObjectPageSubSection.defaultProps = {
+  title: null,
+  // @ts-ignore
+  isSubSection: true
+};

From ec68650449d90c9ca2a06198471083bff334b0a3 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Fri, 12 Jul 2019 13:56:04 +0200
Subject: [PATCH 5/6] WIP: Updated yarn.lock

---
 yarn.lock | 1221 +++++++++++++++++++++++++++--------------------------
 1 file changed, 631 insertions(+), 590 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index 658361c0cd0..4c8dad3d9e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -29,18 +29,18 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.4.3", "@babel/core@^7.4.4":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.4.5.tgz#081f97e8ffca65a9b4b0fdc7e274e703f000c06a"
-  integrity sha512-OvjIh6aqXtlsA8ujtGKfC7LYWksYSX8yQcM8Ay3LuvVeQ63lcOKgoZWVqcpFwkd29aYU9rVx7jxhfhiEDV9MZA==
+"@babel/core@^7.0.0", "@babel/core@^7.1.0", "@babel/core@^7.4.4", "@babel/core@^7.4.5":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.5.4.tgz#4c32df7ad5a58e9ea27ad025c11276324e0b4ddd"
+  integrity sha512-+DaeBEpYq6b2+ZmHx3tHspC+ZRflrvLqwfv8E3hNr5LVQoyBnL8RPKSBCg+rK2W2My9PWlujBiqd0ZPsR9Q6zQ==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.4.4"
-    "@babel/helpers" "^7.4.4"
-    "@babel/parser" "^7.4.5"
+    "@babel/generator" "^7.5.0"
+    "@babel/helpers" "^7.5.4"
+    "@babel/parser" "^7.5.0"
     "@babel/template" "^7.4.4"
-    "@babel/traverse" "^7.4.5"
-    "@babel/types" "^7.4.4"
+    "@babel/traverse" "^7.5.0"
+    "@babel/types" "^7.5.0"
     convert-source-map "^1.1.0"
     debug "^4.1.0"
     json5 "^2.1.0"
@@ -49,12 +49,12 @@
     semver "^5.4.1"
     source-map "^0.5.0"
 
-"@babel/generator@^7.4.0", "@babel/generator@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.4.4.tgz#174a215eb843fc392c7edcaabeaa873de6e8f041"
-  integrity sha512-53UOLK6TVNqKxf7RUh8NE851EHRxOOeVXKbK2bivdb+iziMyk03Sr4eaE9OELCbyZAAafAKPDwF2TPUES5QbxQ==
+"@babel/generator@^7.4.0", "@babel/generator@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.5.0.tgz#f20e4b7a91750ee8b63656073d843d2a736dca4a"
+  integrity sha512-1TTVrt7J9rcG5PMjvO7VEG3FrEoEJNHxumRq66GemPmzboLWtIjjcJgk8rokuAS7IiRSpgVSu5Vb9lc99iJkOA==
   dependencies:
-    "@babel/types" "^7.4.4"
+    "@babel/types" "^7.5.0"
     jsesc "^2.5.1"
     lodash "^4.17.11"
     source-map "^0.5.0"
@@ -92,10 +92,10 @@
     "@babel/traverse" "^7.4.4"
     "@babel/types" "^7.4.4"
 
-"@babel/helper-create-class-features-plugin@^7.4.0", "@babel/helper-create-class-features-plugin@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.4.4.tgz#fc3d690af6554cc9efc607364a82d48f58736dba"
-  integrity sha512-UbBHIa2qeAGgyiNR9RszVF7bUHEdgS4JAUNT8SiqrAN6YJVxlOxeLr5pBzb5kan302dejJ9nla4RyKcR1XT6XA==
+"@babel/helper-create-class-features-plugin@^7.4.0", "@babel/helper-create-class-features-plugin@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.5.0.tgz#02edb97f512d44ba23b3227f1bf2ed43454edac5"
+  integrity sha512-EAoMc3hE5vE5LNhMqDOwB1usHvmRjCDAnH8CD4PVkX9/Yr3W/tcz8xE8QvdZxfsFBDICwZnF2UTHIqslRpvxmA==
   dependencies:
     "@babel/helper-function-name" "^7.1.0"
     "@babel/helper-member-expression-to-functions" "^7.0.0"
@@ -235,28 +235,28 @@
     "@babel/traverse" "^7.1.0"
     "@babel/types" "^7.2.0"
 
-"@babel/helpers@^7.4.3", "@babel/helpers@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.4.4.tgz#868b0ef59c1dd4e78744562d5ce1b59c89f2f2a5"
-  integrity sha512-igczbR/0SeuPR8RFfC7tGrbdTbFL3QTvH6D+Z6zNxnTe//GyqmtHmDkzrqDmyZ3eSwPqB/LhyKoU5DXsp+Vp2A==
+"@babel/helpers@^7.4.3", "@babel/helpers@^7.5.4":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.5.4.tgz#2f00608aa10d460bde0ccf665d6dcf8477357cf0"
+  integrity sha512-6LJ6xwUEJP51w0sIgKyfvFMJvIb9mWAfohJp0+m6eHJigkFdcH8duZ1sfhn0ltJRzwUIT/yqqhdSfRpCpL7oow==
   dependencies:
     "@babel/template" "^7.4.4"
-    "@babel/traverse" "^7.4.4"
-    "@babel/types" "^7.4.4"
+    "@babel/traverse" "^7.5.0"
+    "@babel/types" "^7.5.0"
 
 "@babel/highlight@^7.0.0":
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.0.0.tgz#f710c38c8d458e6dd9a201afb637fcb781ce99e4"
-  integrity sha512-UFMC4ZeFC48Tpvj7C8UgLvtkaUuovQX+5xNWrsIoMG8o2z+XFKjKaN9iVmS84dPwVN00W4wPmqvYoZF3EGAsfw==
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.5.0.tgz#56d11312bd9248fa619591d02472be6e8cb32540"
+  integrity sha512-7dV4eu9gBxoM0dAnj/BCFDW9LFU0zvTrkq0ugM7pnHEgguOEeOz1so2ZghEdzviYzQEED0r4EAgpsBChKy1TRQ==
   dependencies:
     chalk "^2.0.0"
     esutils "^2.0.2"
     js-tokens "^4.0.0"
 
-"@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.4.5.tgz#04af8d5d5a2b044a2a1bffacc1e5e6673544e872"
-  integrity sha512-9mUqkL1FF5T7f0WDFfAoDdiMVPWsdD1gZYzSnaXsxUCUqzuch/8of9G3VUSNiZmMBoRxT3neyVsqeiL/ZPcjew==
+"@babel/parser@^7.1.0", "@babel/parser@^7.4.3", "@babel/parser@^7.4.4", "@babel/parser@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.5.0.tgz#3e0713dff89ad6ae37faec3b29dcfc5c979770b7"
+  integrity sha512-I5nW8AhGpOXGCCNYGc+p7ExQIBxRFnS2fd/d862bNOKvmoEPjYPcfIjsfdy0ujagYOIYPczKgD9l3FsgTkAzKA==
 
 "@babel/plugin-proposal-async-generator-functions@^7.2.0":
   version "7.2.0"
@@ -276,11 +276,11 @@
     "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-proposal-class-properties@^7.3.3":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.4.4.tgz#93a6486eed86d53452ab9bab35e368e9461198ce"
-  integrity sha512-WjKTI8g8d5w1Bc9zgwSz2nfrsNQsXcCf9J9cdCvrJV6RF56yztwm4TmJC0MgJ9tvwO9gUA/mcYe89bLdGfiXFg==
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.5.0.tgz#5bc6a0537d286fcb4fd4e89975adbca334987007"
+  integrity sha512-9L/JfPCT+kShiiTTzcnBJ8cOwdKVmlC1RcCf9F0F9tERVrM4iWtWnXtjWCRqNm2la2BxO1MPArWNsU9zsSJWSQ==
   dependencies:
-    "@babel/helper-create-class-features-plugin" "^7.4.4"
+    "@babel/helper-create-class-features-plugin" "^7.5.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-proposal-decorators@7.4.0":
@@ -292,6 +292,14 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-decorators" "^7.2.0"
 
+"@babel/plugin-proposal-dynamic-import@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-dynamic-import/-/plugin-proposal-dynamic-import-7.5.0.tgz#e532202db4838723691b10a67b8ce509e397c506"
+  integrity sha512-x/iMjggsKTFHYC6g11PL7Qy58IK8H5zqfm9e6hu4z1iH2IRyAp9u9dL80zA6R76yFovETFLKz2VJIC2iIPBuFw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.0.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
+
 "@babel/plugin-proposal-json-strings@^7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-json-strings/-/plugin-proposal-json-strings-7.2.0.tgz#568ecc446c6148ae6b267f02551130891e29f317"
@@ -308,10 +316,10 @@
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
 
-"@babel/plugin-proposal-object-rest-spread@^7.3.2", "@babel/plugin-proposal-object-rest-spread@^7.4.3", "@babel/plugin-proposal-object-rest-spread@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.4.4.tgz#1ef173fcf24b3e2df92a678f027673b55e7e3005"
-  integrity sha512-dMBG6cSPBbHeEBdFXeQ2QLc5gUpg4Vkaz8octD4aoW/ISO+jBOcsuxYL7bsb5WSu8RLP6boxrBIALEHgoHtO9g==
+"@babel/plugin-proposal-object-rest-spread@^7.3.2", "@babel/plugin-proposal-object-rest-spread@^7.4.3", "@babel/plugin-proposal-object-rest-spread@^7.4.4", "@babel/plugin-proposal-object-rest-spread@^7.5.4":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-object-rest-spread/-/plugin-proposal-object-rest-spread-7.5.4.tgz#250de35d867ce8260a31b1fdac6c4fc1baa99331"
+  integrity sha512-KCx0z3y7y8ipZUMAEEJOyNi11lMb/FOPUjjB113tfowgw0c16EGYos7worCKBcUAh2oG+OBnoUhsnTSoLpV9uA==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
@@ -403,10 +411,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-async-to-generator@^7.4.0", "@babel/plugin-transform-async-to-generator@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.4.4.tgz#a3f1d01f2f21cadab20b33a82133116f14fb5894"
-  integrity sha512-YiqW2Li8TXmzgbXw+STsSqPBPFnGviiaSp6CYOq55X8GQ2SGVLrXB6pNid8HkqkZAzOH6knbai3snhP7v0fNwA==
+"@babel/plugin-transform-async-to-generator@^7.4.0", "@babel/plugin-transform-async-to-generator@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.5.0.tgz#89a3848a0166623b5bc481164b5936ab947e887e"
+  integrity sha512-mqvkzwIGkq0bEF1zLRRiTdjfomZJDV33AH3oQzHVGkI2VzEmXLpKKOBvEVaFZBJdN0XTyH38s9j/Kiqr68dggg==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
@@ -469,10 +477,10 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-destructuring@^7.4.3", "@babel/plugin-transform-destructuring@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.4.4.tgz#9d964717829cc9e4b601fc82a26a71a4d8faf20f"
-  integrity sha512-/aOx+nW0w8eHiEHm+BTERB2oJn5D127iye/SUQl7NjHy0lf+j7h4MKMMSOwdazGq9OxgiNADncE+SRJkCxjZpQ==
+"@babel/plugin-transform-destructuring@^7.4.3", "@babel/plugin-transform-destructuring@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.5.0.tgz#f6c09fdfe3f94516ff074fe877db7bc9ef05855a"
+  integrity sha512-YbYgbd3TryYYLGyC7ZR+Tq8H/+bCmwoaxHfJHupom5ECstzbRLTch6gOQbhEY9Z4hiCNHEURgq06ykFv9JZ/QQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
@@ -485,10 +493,10 @@
     "@babel/helper-regex" "^7.4.4"
     regexpu-core "^4.5.4"
 
-"@babel/plugin-transform-duplicate-keys@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.2.0.tgz#d952c4930f312a4dbfff18f0b2914e60c35530b3"
-  integrity sha512-q+yuxW4DsTjNceUiTzK0L+AfQ0zD9rWaTLiUqHA8p0gxx7lu1EylenfzjeIWNkPy6e/0VG/Wjw9uf9LueQwLOw==
+"@babel/plugin-transform-duplicate-keys@^7.2.0", "@babel/plugin-transform-duplicate-keys@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.5.0.tgz#c5dbf5106bf84cdf691222c0974c12b1df931853"
+  integrity sha512-igcziksHizyQPlX9gfSjHkE2wmoCH3evvD2qR5w29/Dk0SMKE/eOI7f1HhBdNhR/zxJDqrgpoDTq5YSLH/XMsQ==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
@@ -545,30 +553,33 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-modules-amd@^7.2.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.2.0.tgz#82a9bce45b95441f617a24011dc89d12da7f4ee6"
-  integrity sha512-mK2A8ucqz1qhrdqjS9VMIDfIvvT2thrEsIQzbaTdc5QFzhDjQv2CkJJ5f6BXIkgbmaoax3zBr2RyvV/8zeoUZw==
+"@babel/plugin-transform-modules-amd@^7.2.0", "@babel/plugin-transform-modules-amd@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.5.0.tgz#ef00435d46da0a5961aa728a1d2ecff063e4fb91"
+  integrity sha512-n20UsQMKnWrltocZZm24cRURxQnWIvsABPJlw/fvoy9c6AgHZzoelAIzajDHAQrDpuKFFPPcFGd7ChsYuIUMpg==
   dependencies:
     "@babel/helper-module-transforms" "^7.1.0"
     "@babel/helper-plugin-utils" "^7.0.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
 
-"@babel/plugin-transform-modules-commonjs@^7.4.3", "@babel/plugin-transform-modules-commonjs@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.4.4.tgz#0bef4713d30f1d78c2e59b3d6db40e60192cac1e"
-  integrity sha512-4sfBOJt58sEo9a2BQXnZq+Q3ZTSAUXyK3E30o36BOGnJ+tvJ6YSxF0PG6kERvbeISgProodWuI9UVG3/FMY6iw==
+"@babel/plugin-transform-modules-commonjs@^7.4.3", "@babel/plugin-transform-modules-commonjs@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.5.0.tgz#425127e6045231360858eeaa47a71d75eded7a74"
+  integrity sha512-xmHq0B+ytyrWJvQTc5OWAC4ii6Dhr0s22STOoydokG51JjWhyYo5mRPXoi+ZmtHQhZZwuXNN+GG5jy5UZZJxIQ==
   dependencies:
     "@babel/helper-module-transforms" "^7.4.4"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/helper-simple-access" "^7.1.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
 
-"@babel/plugin-transform-modules-systemjs@^7.4.0", "@babel/plugin-transform-modules-systemjs@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.4.4.tgz#dc83c5665b07d6c2a7b224c00ac63659ea36a405"
-  integrity sha512-MSiModfILQc3/oqnG7NrP1jHaSPryO6tA2kOMmAQApz5dayPxWiHqmq4sWH2xF5LcQK56LlbKByCd8Aah/OIkQ==
+"@babel/plugin-transform-modules-systemjs@^7.4.0", "@babel/plugin-transform-modules-systemjs@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.5.0.tgz#e75266a13ef94202db2a0620977756f51d52d249"
+  integrity sha512-Q2m56tyoQWmuNGxEtUyeEkm6qJYFqs4c+XyXH5RAuYxObRNz9Zgj/1g2GMnjYp2EUyEy7YTrxliGCXzecl/vJg==
   dependencies:
     "@babel/helper-hoist-variables" "^7.4.4"
     "@babel/helper-plugin-utils" "^7.0.0"
+    babel-plugin-dynamic-import-node "^2.3.0"
 
 "@babel/plugin-transform-modules-umd@^7.2.0":
   version "7.2.0"
@@ -616,7 +627,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
 
-"@babel/plugin-transform-react-constant-elements@7.2.0", "@babel/plugin-transform-react-constant-elements@^7.0.0", "@babel/plugin-transform-react-constant-elements@^7.2.0":
+"@babel/plugin-transform-react-constant-elements@7.2.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.2.0.tgz#ed602dc2d8bff2f0cb1a5ce29263dbdec40779f7"
   integrity sha512-YYQFg6giRFMsZPKUM9v+VcHOdfSQdz9jHCx3akAi3UYgyjndmdYGSXylQ/V+HswQt4fL8IklchD9HTsaOCrWQQ==
@@ -624,6 +635,14 @@
     "@babel/helper-annotate-as-pure" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
 
+"@babel/plugin-transform-react-constant-elements@^7.0.0", "@babel/plugin-transform-react-constant-elements@^7.2.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.5.0.tgz#4d6ae4033bc38f8a65dfca2b6235c44522a422fc"
+  integrity sha512-c5Ba8cpybZFp1Izkf2sWGuNjOxoQ32tFgBvvYvwGhi4+9f6vGiSK9Gex4uVuO/Va6YJFu41aAh1MzMjUWkp0IQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.0.0"
+    "@babel/helper-plugin-utils" "^7.0.0"
+
 "@babel/plugin-transform-react-display-name@7.2.0", "@babel/plugin-transform-react-display-name@^7.0.0":
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.2.0.tgz#ebfaed87834ce8dc4279609a4f0c324c156e3eb0"
@@ -640,9 +659,9 @@
     "@babel/plugin-syntax-jsx" "^7.2.0"
 
 "@babel/plugin-transform-react-jsx-source@^7.0.0":
-  version "7.2.0"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.2.0.tgz#20c8c60f0140f5dd3cd63418d452801cf3f7180f"
-  integrity sha512-A32OkKTp4i5U6aE88GwwcuV4HAprUgHcTq0sSafLxjr6AW0QahrCRCjxogkbbcdtpbXkuTOlgpjophCxb6sh5g==
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-jsx-source/-/plugin-transform-react-jsx-source-7.5.0.tgz#583b10c49cf057e237085bcbd8cc960bd83bd96b"
+  integrity sha512-58Q+Jsy4IDCZx7kqEZuSDdam/1oW8OdDX8f+Loo6xyxdfg1yF0GE2XNJQSTZCaMol93+FBzpWiPEwtbMloAcPg==
   dependencies:
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-jsx" "^7.2.0"
@@ -718,10 +737,11 @@
     "@babel/helper-plugin-utils" "^7.0.0"
 
 "@babel/plugin-transform-typescript@^7.3.2":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.4.5.tgz#ab3351ba35307b79981993536c93ff8be050ba28"
-  integrity sha512-RPB/YeGr4ZrFKNwfuQRlMf2lxoCUaU01MTw39/OFE/RiL8HDjtn68BwEPft1P7JN4akyEmjGWAMNldOV7o9V2g==
+  version "7.5.2"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.5.2.tgz#ea7da440d29b8ccdb1bd02e18f6cfdc7ce6c16f5"
+  integrity sha512-r4zJOMbKY5puETm8+cIpaa0RQZG/sSASW1u0pj8qYklcERgVIbxVbP2wyJA7zI1//h7lEagQmXi9IL9iI5rfsA==
   dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.5.0"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-syntax-typescript" "^7.2.0"
 
@@ -788,39 +808,41 @@
     js-levenshtein "^1.1.3"
     semver "^5.5.0"
 
-"@babel/preset-env@^7.4.3", "@babel/preset-env@^7.4.4", "@babel/preset-env@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.4.5.tgz#2fad7f62983d5af563b5f3139242755884998a58"
-  integrity sha512-f2yNVXM+FsR5V8UwcFeIHzHWgnhXg3NpRmy0ADvALpnhB0SLbCvrCRr4BLOUYbQNLS+Z0Yer46x9dJXpXewI7w==
+"@babel/preset-env@^7.4.4", "@babel/preset-env@^7.4.5":
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.5.4.tgz#64bc15041a3cbb0798930319917e70fcca57713d"
+  integrity sha512-hFnFnouyRNiH1rL8YkX1ANCNAUVC8Djwdqfev8i1415tnAG+7hlA5zhZ0Q/3Q5gkop4HioIPbCEWAalqcbxRoQ==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/helper-plugin-utils" "^7.0.0"
     "@babel/plugin-proposal-async-generator-functions" "^7.2.0"
+    "@babel/plugin-proposal-dynamic-import" "^7.5.0"
     "@babel/plugin-proposal-json-strings" "^7.2.0"
-    "@babel/plugin-proposal-object-rest-spread" "^7.4.4"
+    "@babel/plugin-proposal-object-rest-spread" "^7.5.4"
     "@babel/plugin-proposal-optional-catch-binding" "^7.2.0"
     "@babel/plugin-proposal-unicode-property-regex" "^7.4.4"
     "@babel/plugin-syntax-async-generators" "^7.2.0"
+    "@babel/plugin-syntax-dynamic-import" "^7.2.0"
     "@babel/plugin-syntax-json-strings" "^7.2.0"
     "@babel/plugin-syntax-object-rest-spread" "^7.2.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.2.0"
     "@babel/plugin-transform-arrow-functions" "^7.2.0"
-    "@babel/plugin-transform-async-to-generator" "^7.4.4"
+    "@babel/plugin-transform-async-to-generator" "^7.5.0"
     "@babel/plugin-transform-block-scoped-functions" "^7.2.0"
     "@babel/plugin-transform-block-scoping" "^7.4.4"
     "@babel/plugin-transform-classes" "^7.4.4"
     "@babel/plugin-transform-computed-properties" "^7.2.0"
-    "@babel/plugin-transform-destructuring" "^7.4.4"
+    "@babel/plugin-transform-destructuring" "^7.5.0"
     "@babel/plugin-transform-dotall-regex" "^7.4.4"
-    "@babel/plugin-transform-duplicate-keys" "^7.2.0"
+    "@babel/plugin-transform-duplicate-keys" "^7.5.0"
     "@babel/plugin-transform-exponentiation-operator" "^7.2.0"
     "@babel/plugin-transform-for-of" "^7.4.4"
     "@babel/plugin-transform-function-name" "^7.4.4"
     "@babel/plugin-transform-literals" "^7.2.0"
     "@babel/plugin-transform-member-expression-literals" "^7.2.0"
-    "@babel/plugin-transform-modules-amd" "^7.2.0"
-    "@babel/plugin-transform-modules-commonjs" "^7.4.4"
-    "@babel/plugin-transform-modules-systemjs" "^7.4.4"
+    "@babel/plugin-transform-modules-amd" "^7.5.0"
+    "@babel/plugin-transform-modules-commonjs" "^7.5.0"
+    "@babel/plugin-transform-modules-systemjs" "^7.5.0"
     "@babel/plugin-transform-modules-umd" "^7.2.0"
     "@babel/plugin-transform-named-capturing-groups-regex" "^7.4.5"
     "@babel/plugin-transform-new-target" "^7.4.4"
@@ -835,7 +857,7 @@
     "@babel/plugin-transform-template-literals" "^7.4.4"
     "@babel/plugin-transform-typeof-symbol" "^7.2.0"
     "@babel/plugin-transform-unicode-regex" "^7.4.4"
-    "@babel/types" "^7.4.4"
+    "@babel/types" "^7.5.0"
     browserslist "^4.6.0"
     core-js-compat "^3.1.1"
     invariant "^2.2.2"
@@ -884,9 +906,9 @@
     regenerator-runtime "^0.13.2"
 
 "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.2", "@babel/runtime@^7.4.3", "@babel/runtime@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.4.5.tgz#582bb531f5f9dc67d2fcb682979894f75e253f12"
-  integrity sha512-TuI4qpWZP6lGOGIuGWtp9sPluqYICmbk8T/1vpSysqJxRPkudh/ofFWyqdcMsDf2s7KvDL4/YHgKyvcS3g9CJQ==
+  version "7.5.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.5.4.tgz#cb7d1ad7c6d65676e66b47186577930465b5271b"
+  integrity sha512-Na84uwyImZZc3FKf4aUF1tysApzwf3p2yuFBIyBfbzT5glzKTdvYI4KVW4kcgjrzoGUjC7w3YyCHcJKaRxsr2Q==
   dependencies:
     regenerator-runtime "^0.13.2"
 
@@ -899,25 +921,25 @@
     "@babel/parser" "^7.4.4"
     "@babel/types" "^7.4.4"
 
-"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.4.5":
-  version "7.4.5"
-  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.4.5.tgz#4e92d1728fd2f1897dafdd321efbff92156c3216"
-  integrity sha512-Vc+qjynwkjRmIFGxy0KYoPj4FdVDxLej89kMHFsWScq999uX+pwcX4v9mWRjW0KcAYTPAuVQl2LKP1wEVLsp+A==
+"@babel/traverse@^7.1.0", "@babel/traverse@^7.4.3", "@babel/traverse@^7.4.4", "@babel/traverse@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.5.0.tgz#4216d6586854ef5c3c4592dab56ec7eb78485485"
+  integrity sha512-SnA9aLbyOCcnnbQEGwdfBggnc142h/rbqqsXcaATj2hZcegCl903pUD/lfpsNBlBSuWow/YDfRyJuWi2EPR5cg==
   dependencies:
     "@babel/code-frame" "^7.0.0"
-    "@babel/generator" "^7.4.4"
+    "@babel/generator" "^7.5.0"
     "@babel/helper-function-name" "^7.1.0"
     "@babel/helper-split-export-declaration" "^7.4.4"
-    "@babel/parser" "^7.4.5"
-    "@babel/types" "^7.4.4"
+    "@babel/parser" "^7.5.0"
+    "@babel/types" "^7.5.0"
     debug "^4.1.0"
     globals "^11.1.0"
     lodash "^4.17.11"
 
-"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4":
-  version "7.4.4"
-  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.4.4.tgz#8db9e9a629bb7c29370009b4b779ed93fe57d5f0"
-  integrity sha512-dOllgYdnEFOebhkKCjzSVFqw/PmmB8pH6RGOWkY4GsboQNd47b1fBThBSwlHAq9alF9vc1M3+6oqR47R50L0tQ==
+"@babel/types@^7.0.0", "@babel/types@^7.2.0", "@babel/types@^7.3.0", "@babel/types@^7.4.0", "@babel/types@^7.4.4", "@babel/types@^7.5.0":
+  version "7.5.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.5.0.tgz#e47d43840c2e7f9105bc4d3a2c371b4d0c7832ab"
+  integrity sha512-UFpDVqRABKsW01bvw7/wSUe56uy6RXM5+VJibVVAybDGxEW25jdwiFJEf7ASvSaC7sN7rbE/l3cLp2izav+CtQ==
   dependencies:
     esutils "^2.0.2"
     lodash "^4.17.11"
@@ -943,52 +965,53 @@
     find-root "^1.1.0"
     source-map "^0.7.2"
 
-"@emotion/cache@^10.0.9":
-  version "10.0.9"
-  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.9.tgz#e0c7b7a289f7530edcfad4dcf3858bd2e5700a6f"
-  integrity sha512-f7MblpE2xoimC4fCMZ9pivmsIn7hyWRIvY75owMDi8pdOSeh+w5tH3r4hBJv/LLrwiMM7cTQURqTPcYoL5pWnw==
+"@emotion/cache@^10.0.14":
+  version "10.0.14"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-10.0.14.tgz#56093cff025c04b0330bdd92afe8335ed326dd18"
+  integrity sha512-HNGEwWnPlNyy/WPXBXzbjzkzeZFV657Z99/xq2xs5yinJHbMfi3ioCvBJ6Y8Zc8DQzO9F5jDmVXJB41Ytx3QMw==
   dependencies:
-    "@emotion/sheet" "0.9.2"
-    "@emotion/stylis" "0.8.3"
-    "@emotion/utils" "0.11.1"
-    "@emotion/weak-memoize" "0.2.2"
+    "@emotion/sheet" "0.9.3"
+    "@emotion/stylis" "0.8.4"
+    "@emotion/utils" "0.11.2"
+    "@emotion/weak-memoize" "0.2.3"
 
 "@emotion/core@^10.0.9":
-  version "10.0.10"
-  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.10.tgz#8d3114e5a2f8b178a7067c603a2937516f180b08"
-  integrity sha512-U1aE2cOWUscjc8ZJ3Cx32udOzLeRoJwGxBH93xQD850oQFpwPKZARzdUtdc9SByUOwzSFYxhDhrpXnV34FJmWg==
-  dependencies:
-    "@emotion/cache" "^10.0.9"
-    "@emotion/css" "^10.0.9"
-    "@emotion/serialize" "^0.11.6"
-    "@emotion/sheet" "0.9.2"
-    "@emotion/utils" "0.11.1"
-
-"@emotion/css@^10.0.9":
-  version "10.0.12"
-  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.12.tgz#b358168afcb151899bda5cfd778c01dc37801c24"
-  integrity sha512-esET/v6AwYIw5YVo0e1L/bUik7bIMWyK32BudsC/PE5O1rLK3rjiLCOoMVv5GY6+ssuwWVzooGbz79hPvkkmsw==
-  dependencies:
-    "@emotion/serialize" "^0.11.7"
-    "@emotion/utils" "0.11.1"
-    babel-plugin-emotion "^10.0.9"
-
-"@emotion/hash@0.7.1":
-  version "0.7.1"
-  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.1.tgz#9833722341379fb7d67f06a4b00ab3c37913da53"
-  integrity sha512-OYpa/Sg+2GDX+jibUfpZVn1YqSVRpYmTLF2eyAfrFTIJSbwyIrc+YscayoykvaOME/wV4BV0Sa0yqdMrgse6mA==
+  version "10.0.14"
+  resolved "https://registry.yarnpkg.com/@emotion/core/-/core-10.0.14.tgz#cac5c334b278d5b7688cfff39e460a5b50abb71c"
+  integrity sha512-G9FbyxLm3lSnPfLDcag8fcOQBKui/ueXmWOhV+LuEQg9HrqExuWnWaO6gm6S5rNe+AMcqLXVljf8pYgAdFLNSg==
+  dependencies:
+    "@babel/runtime" "^7.4.3"
+    "@emotion/cache" "^10.0.14"
+    "@emotion/css" "^10.0.14"
+    "@emotion/serialize" "^0.11.8"
+    "@emotion/sheet" "0.9.3"
+    "@emotion/utils" "0.11.2"
+
+"@emotion/css@^10.0.14":
+  version "10.0.14"
+  resolved "https://registry.yarnpkg.com/@emotion/css/-/css-10.0.14.tgz#95dacabdd0e22845d1a1b0b5968d9afa34011139"
+  integrity sha512-MozgPkBEWvorcdpqHZE5x1D/PLEHUitALQCQYt2wayf4UNhpgQs2tN0UwHYS4FMy5ROBH+0ALyCFVYJ/ywmwlg==
+  dependencies:
+    "@emotion/serialize" "^0.11.8"
+    "@emotion/utils" "0.11.2"
+    babel-plugin-emotion "^10.0.14"
+
+"@emotion/hash@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.7.2.tgz#53211e564604beb9befa7a4400ebf8147473eeef"
+  integrity sha512-RMtr1i6E8MXaBWwhXL3yeOU8JXRnz8GNxHvaUfVvwxokvayUY0zoBeWbKw1S9XkufmGEEdQd228pSZXFkAln8Q==
 
 "@emotion/hash@^0.6.2", "@emotion/hash@^0.6.6":
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.6.6.tgz#62266c5f0eac6941fece302abad69f2ee7e25e44"
   integrity sha512-ojhgxzUHZ7am3D2jHkMzPpsBAiB005GF5YU4ea+8DNPybMk01JJUM9V9YRlF/GE95tcOm8DxQvWA2jq19bGalQ==
 
-"@emotion/is-prop-valid@0.8.1":
-  version "0.8.1"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.1.tgz#6fb3ae2d24f07c8cd090f233e45771d9cd826d48"
-  integrity sha512-Wtaek/KGUP+HusWIa8DqtOR6U/Tl+QIdVkfJQHV3IT6ZImnJwklP5UVVPKZvkfljeFk3Q45CAPJ5N10gJ5XoLA==
+"@emotion/is-prop-valid@0.8.2":
+  version "0.8.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.2.tgz#b9692080da79041683021fcc32f96b40c54c59dc"
+  integrity sha512-ZQIMAA2kLUWiUeMZNJDTeCwYRx1l8SQL0kHktze4COT22occKpDML1GDUXP5/sxhOMrZO8vZw773ni4H5Snrsg==
   dependencies:
-    "@emotion/memoize" "0.7.1"
+    "@emotion/memoize" "0.7.2"
 
 "@emotion/is-prop-valid@^0.7.3":
   version "0.7.3"
@@ -1002,20 +1025,25 @@
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
   integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
 
+"@emotion/memoize@0.7.2":
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.2.tgz#7f4c71b7654068dfcccad29553520f984cc66b30"
+  integrity sha512-hnHhwQzvPCW1QjBWFyBtsETdllOM92BfrKWbUTmh9aeOlcVOiXvlPsK4104xH8NsaKfg86PTFsWkueQeUfMA/w==
+
 "@emotion/memoize@^0.6.1", "@emotion/memoize@^0.6.6":
   version "0.6.6"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.6.6.tgz#004b98298d04c7ca3b4f50ca2035d4f60d2eed1b"
   integrity sha512-h4t4jFjtm1YV7UirAFuSuFGyLa+NNxjdkq6DpFLANNQY5rHueFZHVY+8Cu1HYVP6DrheB0kv4m5xPjo7eKT7yQ==
 
-"@emotion/serialize@^0.11.6", "@emotion/serialize@^0.11.7":
-  version "0.11.7"
-  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.7.tgz#dd9583dbf753002738676fa8c1eb8df77f95fb53"
-  integrity sha512-GfzJIMue9eIEPFgBL340hBbjfki11vjYkfmY2LXoCDAFPuG6S+hkOlfinRXLnPVlXnKu7WWp587cVa6/xQriNQ==
+"@emotion/serialize@^0.11.8":
+  version "0.11.8"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-0.11.8.tgz#e41dcf7029e45286a3e0cf922933e670fe05402c"
+  integrity sha512-Qb6Us2Yk1ZW8SOYH6s5z7qzXXb2iHwVeqc6FjXtac0vvxC416ki0eTtHNw4Q5smoyxdyZh3519NKGrQvvvrZ/Q==
   dependencies:
-    "@emotion/hash" "0.7.1"
-    "@emotion/memoize" "0.7.1"
-    "@emotion/unitless" "0.7.3"
-    "@emotion/utils" "0.11.1"
+    "@emotion/hash" "0.7.2"
+    "@emotion/memoize" "0.7.2"
+    "@emotion/unitless" "0.7.4"
+    "@emotion/utils" "0.11.2"
     csstype "^2.5.7"
 
 "@emotion/serialize@^0.9.1":
@@ -1028,63 +1056,63 @@
     "@emotion/unitless" "^0.6.7"
     "@emotion/utils" "^0.8.2"
 
-"@emotion/sheet@0.9.2":
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.2.tgz#74e5c6b5e489a1ba30ab246ab5eedd96916487c4"
-  integrity sha512-pVBLzIbC/QCHDKJF2E82V2H/W/B004mDFQZiyo/MSR+VC4pV5JLG0TF/zgQDFvP3fZL/5RTPGEmXlYJBMUuJ+A==
+"@emotion/sheet@0.9.3":
+  version "0.9.3"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-0.9.3.tgz#689f135ecf87d3c650ed0c4f5ddcbe579883564a"
+  integrity sha512-c3Q6V7Df7jfwSq5AzQWbXHa5soeE4F5cbqi40xn0CzXxWW9/6Mxq48WJEtqfWzbZtW9odZdnRAkwCQwN12ob4A==
 
-"@emotion/styled-base@^10.0.12":
-  version "10.0.13"
-  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.13.tgz#f27b398556df3f69b97ac9fe06dcc91fe7576a96"
-  integrity sha512-6zhj3njNEnMYcVMv3rOpM7qLwe1Osike+xVgw7gkbp9a/r6zx5cUA5sRvCrtCa28yV5x7ePotKNHMZ1GLQJo2g==
+"@emotion/styled-base@^10.0.14":
+  version "10.0.14"
+  resolved "https://registry.yarnpkg.com/@emotion/styled-base/-/styled-base-10.0.14.tgz#1b78a93e067ea852b2069339fcfd72c32ec91e4d"
+  integrity sha512-1nC5iO/Rk0DY47M5wXCyWpbo/woiwXWfVbNKDM3QRi7CKq8CwC++PQ5HgiYflFrAt1vjzIVZqnzrIn3idUoQgg==
   dependencies:
     "@babel/runtime" "^7.4.3"
-    "@emotion/is-prop-valid" "0.8.1"
-    "@emotion/serialize" "^0.11.7"
-    "@emotion/utils" "0.11.1"
+    "@emotion/is-prop-valid" "0.8.2"
+    "@emotion/serialize" "^0.11.8"
+    "@emotion/utils" "0.11.2"
 
 "@emotion/styled@^10.0.7":
-  version "10.0.12"
-  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.12.tgz#923531b3baa2ad670f821c6ca724caab26b08aad"
-  integrity sha512-oxvSoLi3AbI5bEfqkFE1hLTC3eMpifwj6klJ4bvzgE6EDqj4w859KQyZR7ekGRAcfGNFyEYhw67bm8FlMBlX7Q==
+  version "10.0.14"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-10.0.14.tgz#538bcf0d67bf8f6de946bcfbee53dc7d0187b346"
+  integrity sha512-Ae8d5N/FmjvZKXjqWcjfhZhjCdkvxZSqD95Q72BYDNQnsOKLHIA4vWlMolLXDNkw1dIxV3l2pp82Z87HXj6eYQ==
   dependencies:
-    "@emotion/styled-base" "^10.0.12"
-    babel-plugin-emotion "^10.0.9"
+    "@emotion/styled-base" "^10.0.14"
+    babel-plugin-emotion "^10.0.14"
 
-"@emotion/stylis@0.8.3":
-  version "0.8.3"
-  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.3.tgz#3ca7e9bcb31b3cb4afbaeb66156d86ee85e23246"
-  integrity sha512-M3nMfJ6ndJMYloSIbYEBq6G3eqoYD41BpDOxreE8j0cb4fzz/5qvmqU9Mb2hzsXcCnIlGlWhS03PCzVGvTAe0Q==
+"@emotion/stylis@0.8.4":
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.4.tgz#6c51afdf1dd0d73666ba09d2eb6c25c220d6fe4c"
+  integrity sha512-TLmkCVm8f8gH0oLv+HWKiu7e8xmBIaokhxcEKPh1m8pXiV/akCiq50FvYgOwY42rjejck8nsdQxZlXZ7pmyBUQ==
 
 "@emotion/stylis@^0.7.0":
   version "0.7.1"
   resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.7.1.tgz#50f63225e712d99e2b2b39c19c70fff023793ca5"
   integrity sha512-/SLmSIkN13M//53TtNxgxo57mcJk/UJIDFRKwOiLIBEyBHEcipgR6hNMQ/59Sl4VjCJ0Z/3zeAZyvnSLPG/1HQ==
 
-"@emotion/unitless@0.7.3":
-  version "0.7.3"
-  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.3.tgz#6310a047f12d21a1036fb031317219892440416f"
-  integrity sha512-4zAPlpDEh2VwXswwr/t8xGNDGg8RQiPxtxZ3qQEXyQsBV39ptTdESCjuBvGze1nLMVrxmTIKmnO/nAV8Tqjjzg==
+"@emotion/unitless@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.4.tgz#a87b4b04e5ae14a88d48ebef15015f6b7d1f5677"
+  integrity sha512-kBa+cDHOR9jpRJ+kcGMsysrls0leukrm68DmFQoMIWQcXdr2cZvyvypWuGYT7U+9kAExUE7+T7r6G3C3A6L8MQ==
 
 "@emotion/unitless@^0.6.2", "@emotion/unitless@^0.6.7":
   version "0.6.7"
   resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.6.7.tgz#53e9f1892f725b194d5e6a1684a7b394df592397"
   integrity sha512-Arj1hncvEVqQ2p7Ega08uHLr1JuRYBuO5cIvcA+WWEQ5+VmkOE3ZXzl04NbQxeQpWX78G7u6MqxKuNX3wvYZxg==
 
-"@emotion/utils@0.11.1":
-  version "0.11.1"
-  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.1.tgz#8529b7412a6eb4b48bdf6e720cc1b8e6e1e17628"
-  integrity sha512-8M3VN0hetwhsJ8dH8VkVy7xo5/1VoBsDOk/T4SJOeXwTO1c4uIqVNx2qyecLFnnUWD5vvUqHQ1gASSeUN6zcTg==
+"@emotion/utils@0.11.2":
+  version "0.11.2"
+  resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.11.2.tgz#713056bfdffb396b0a14f1c8f18e7b4d0d200183"
+  integrity sha512-UHX2XklLl3sIaP6oiMmlVzT0J+2ATTVpf0dHQVyPJHTkOITvXfaSqnRk6mdDhV9pR8T/tHc3cex78IKXssmzrA==
 
 "@emotion/utils@^0.8.2":
   version "0.8.2"
   resolved "https://registry.yarnpkg.com/@emotion/utils/-/utils-0.8.2.tgz#576ff7fb1230185b619a75d258cbc98f0867a8dc"
   integrity sha512-rLu3wcBWH4P5q1CGoSSH/i9hrXs7SlbRLkoq9IGuoPYNGQvDJ3pt/wmOM+XgYjIDRMVIdkUWt0RsfzF50JfnCw==
 
-"@emotion/weak-memoize@0.2.2":
-  version "0.2.2"
-  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.2.tgz#63985d3d8b02530e0869962f4da09142ee8e200e"
-  integrity sha512-n/VQ4mbfr81aqkx/XmVicOLjviMuy02eenSdJY33SVA7S2J42EU0P1H0mOogfYedb3wXA0d/LVtBrgTSm04WEA==
+"@emotion/weak-memoize@0.2.3":
+  version "0.2.3"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.3.tgz#dfa0c92efe44a1d1a7974fb49ffeb40ef2da5a27"
+  integrity sha512-zVgvPwGK7c1aVdUVc9Qv7SqepOGRDrqCw7KZPSZziWGxSlbII3gmvGLPzLX4d0n0BMbamBacUrN22zOMyFFEkQ==
 
 "@evocateur/libnpmaccess@^3.1.0":
   version "3.1.0"
@@ -1999,11 +2027,11 @@
   integrity sha512-shAmDyaQC4H92APFoIaVDHCx5bStIocgvbwQyxPRrbUY20V1EYTbSDchWbuwlMG3V17cprZhA6+78JfB+3DTPw==
 
 "@octokit/endpoint@^5.1.0":
-  version "5.2.0"
-  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-5.2.0.tgz#acd569cb7152549998454aa5658532eb24a0987e"
-  integrity sha512-g4r1MKr8GJ8qubJQp3HP3JrxDY+ZeVqjYBTgtu1lPEDLhfQDY6rOhyZOoHKOw+gaIF6aAcmuvPPNZUro2OwmOg==
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/@octokit/endpoint/-/endpoint-5.2.1.tgz#e5ef98bc4a41fad62b17e71af1a1710f6076b8df"
+  integrity sha512-GoUsRSRhtbCQugRY8eDWg5BnsczUZNq00qArrP7tKPHFmvz2KzJ8DoEq6IAQhLGwAOBHbZQ/Zml3DiaEKAWwkA==
   dependencies:
-    deepmerge "3.3.0"
+    deepmerge "4.0.0"
     is-plain-object "^3.0.0"
     universal-user-agent "^2.1.0"
     url-template "^2.0.8"
@@ -2021,10 +2049,10 @@
     deprecation "^2.0.0"
     once "^1.4.0"
 
-"@octokit/request@^4.0.1":
-  version "4.1.1"
-  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-4.1.1.tgz#614262214f48417b4d3b14e047d09a9c8e2f7a09"
-  integrity sha512-LOyL0i3oxRo418EXRSJNk/3Q4I0/NKawTn6H/CQp+wnrG1UFLGu080gSsgnWobhPo5BpUNgSQ5BRk5FOOJhD1Q==
+"@octokit/request@^5.0.0":
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/@octokit/request/-/request-5.0.0.tgz#d044d6e049aaa0580f78249c688a78a3cfab758b"
+  integrity sha512-eAknm2Aq+/uQDLHUn7KHHpXB7A/NFfWgaVN+ZhC6mQlCNRzCv242eLYgt6cC4h2DZL7mM+QidS/UtZVwYvQXBw==
   dependencies:
     "@octokit/endpoint" "^5.1.0"
     "@octokit/request-error" "^1.0.1"
@@ -2035,14 +2063,14 @@
     universal-user-agent "^2.1.0"
 
 "@octokit/rest@^16.16.0":
-  version "16.28.2"
-  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.28.2.tgz#3fc3b8700046ab29ab1e2a4bdf49f89e94f7ba27"
-  integrity sha512-csuYiHvJ1P/GFDadVn0QhwO83R1+YREjcwCY7ZIezB6aJTRIEidJZj+R7gAkUhT687cqYb4cXTZsDVu9F+Fmug==
+  version "16.28.3"
+  resolved "https://registry.yarnpkg.com/@octokit/rest/-/rest-16.28.3.tgz#bf0fe6b3c50b0cc7838cfd4bf19701f763efbf9f"
+  integrity sha512-hzM2VvVn9o0+sS08y2pp33UF5tKy0XdR2z+/AFD583TjhHlX/9Lmdv3SmRiz0UC6rNqNXe1X7BiZ/QNUwVm27Q==
   dependencies:
-    "@octokit/request" "^4.0.1"
+    "@octokit/request" "^5.0.0"
     "@octokit/request-error" "^1.0.2"
     atob-lite "^2.0.0"
-    before-after-hook "^1.4.0"
+    before-after-hook "^2.0.0"
     btoa-lite "^1.0.0"
     deprecation "^2.0.0"
     lodash.get "^4.4.2"
@@ -2495,10 +2523,10 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-4.2.0.tgz#310ec0775de808a6a2e4fd4268c245fd734c1165"
   integrity sha512-U9m870Kqm0ko8beHawRXLGLvSi/ZMrl89gJ5BNcT452fAjtF2p4uRzXkdzvGJJJYBgx7BmqlDjBN/eCp5AAX2w==
 
-"@svgr/babel-plugin-svg-dynamic-title@^4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.0.tgz#826c7d30f8f98f26bdb4af205a5dfbf1f04d80ec"
-  integrity sha512-3eI17Pb3jlg3oqV4Tie069n1SelYKBUpI90txDcnBWk4EGFW+YQGyQjy6iuJAReH0RnpUJ9jUExrt/xniGvhqw==
+"@svgr/babel-plugin-svg-dynamic-title@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-4.3.1.tgz#646c2f5b5770c2fe318d6e51492344c3d62ddb63"
+  integrity sha512-p6z6JJroP989jHWcuraeWpzdejehTmLUpyC9smhTBWyPN0VVGe2phbYxpPTV7Vh8XzmFrcG55idrnfWn/2oQEw==
 
 "@svgr/babel-plugin-svg-em-dimensions@^4.2.0":
   version "4.2.0"
@@ -2515,69 +2543,69 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-4.2.0.tgz#5f1e2f886b2c85c67e76da42f0f6be1b1767b697"
   integrity sha512-hYfYuZhQPCBVotABsXKSCfel2slf/yvJY8heTVX1PCTaq/IgASq1IyxPPKJ0chWREEKewIU/JMSsIGBtK1KKxw==
 
-"@svgr/babel-preset@^4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.3.0.tgz#8a0bcc95ea7124762699e87a45ab11f408e8765e"
-  integrity sha512-Lgy1RJiZumGtv6yJroOxzFuL64kG/eIcivJQ7y9ljVWL+0QXvFz4ix1xMrmjMD+rpJWwj50ayCIcFelevG/XXg==
+"@svgr/babel-preset@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-4.3.1.tgz#62ffcb85d756580e8ce608e9d2ac3b9063be9e28"
+  integrity sha512-rPFKLmyhlh6oeBv3j2vEAj2nd2QbWqpoJLKzBLjwQVt+d9aeXajVaPNEqrES2spjXKR4OxfgSs7U0NtmAEkr0Q==
   dependencies:
     "@svgr/babel-plugin-add-jsx-attribute" "^4.2.0"
     "@svgr/babel-plugin-remove-jsx-attribute" "^4.2.0"
     "@svgr/babel-plugin-remove-jsx-empty-expression" "^4.2.0"
     "@svgr/babel-plugin-replace-jsx-attribute-value" "^4.2.0"
-    "@svgr/babel-plugin-svg-dynamic-title" "^4.3.0"
+    "@svgr/babel-plugin-svg-dynamic-title" "^4.3.1"
     "@svgr/babel-plugin-svg-em-dimensions" "^4.2.0"
     "@svgr/babel-plugin-transform-react-native-svg" "^4.2.0"
     "@svgr/babel-plugin-transform-svg-component" "^4.2.0"
 
-"@svgr/core@^4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.3.0.tgz#4a2bcb41e0946679a2ebe6b5bb2edd88ed35706b"
-  integrity sha512-Ycu1qrF5opBgKXI0eQg3ROzupalCZnSDETKCK/3MKN4/9IEmt3jPX/bbBjftklnRW+qqsCEpO0y/X9BTRw2WBg==
+"@svgr/core@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-4.3.1.tgz#58c44d0ccc3fe41718c50433758b549dabd4d197"
+  integrity sha512-TXFcvzp6QjxKP5Oy7qoQY08w/nAix9TMOc4jSi3wjIJBBMUqypVwQJFMxtHrViGMQGmFdaN1y2diQrhvA+xNNQ==
   dependencies:
-    "@svgr/plugin-jsx" "^4.3.0"
+    "@svgr/plugin-jsx" "^4.3.1"
     camelcase "^5.3.1"
-    cosmiconfig "^5.2.0"
+    cosmiconfig "^5.2.1"
 
-"@svgr/hast-util-to-babel-ast@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.2.0.tgz#dd743435a5f3a8e84a1da067f27b5fae3d7b6b63"
-  integrity sha512-IvAeb7gqrGB5TH9EGyBsPrMRH/QCzIuAkLySKvH2TLfLb2uqk98qtJamordRQTpHH3e6TORfBXoTo7L7Opo/Ow==
+"@svgr/hast-util-to-babel-ast@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-4.3.1.tgz#b3ea5b2228b50ff335a5d3cf3855f4b1f9fbc70e"
+  integrity sha512-MZbRccEpsro70mE6mhiv5QUXjBwHGDQZ7XrVcrDs44inaNvYUtIcheX0d9eColcnNgJmsfU3tEFfoGRnJ9E5pA==
   dependencies:
-    "@babel/types" "^7.4.0"
+    "@babel/types" "^7.4.4"
 
-"@svgr/plugin-jsx@^4.3.0":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.3.0.tgz#6be203abc58e187545aa1b9a51df30d051b658e2"
-  integrity sha512-0ab8zJdSOTqPfjZtl89cjq2IOmXXUYV3Fs7grLT9ur1Al3+x3DSp2+/obrYKUGbQUnLq96RMjSZ7Icd+13vwlQ==
+"@svgr/plugin-jsx@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-4.3.1.tgz#5b7f849213d1411886e1cec9b6c287faec69143e"
+  integrity sha512-v9sgsn/VpDM9G1U0ZDCair7ZmYqNrVC5LiSyIQli03DAm34bYLM12xVOOrl3dg8NGNY1k4C3A6YgBL3VKjA6Og==
   dependencies:
-    "@babel/core" "^7.4.3"
-    "@svgr/babel-preset" "^4.3.0"
-    "@svgr/hast-util-to-babel-ast" "^4.2.0"
+    "@babel/core" "^7.4.5"
+    "@svgr/babel-preset" "^4.3.1"
+    "@svgr/hast-util-to-babel-ast" "^4.3.1"
     rehype-parse "^6.0.0"
     unified "^7.1.0"
-    vfile "^4.0.0"
+    vfile "^4.0.1"
 
-"@svgr/plugin-svgo@^4.2.0":
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.2.0.tgz#2a594a2d3312955e75fd87dc77ae51f377c809f3"
-  integrity sha512-zUEKgkT172YzHh3mb2B2q92xCnOAMVjRx+o0waZ1U50XqKLrVQ/8dDqTAtnmapdLsGurv8PSwenjLCUpj6hcvw==
+"@svgr/plugin-svgo@^4.3.1":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-4.3.1.tgz#daac0a3d872e3f55935c6588dd370336865e9e32"
+  integrity sha512-PrMtEDUWjX3Ea65JsVCwTIXuSqa3CG9px+DluF1/eo9mlDrgrtFE7NE/DjdhjJgSM9wenlVBzkzneSIUgfUI/w==
   dependencies:
-    cosmiconfig "^5.2.0"
+    cosmiconfig "^5.2.1"
     merge-deep "^3.0.2"
-    svgo "^1.2.1"
+    svgo "^1.2.2"
 
 "@svgr/webpack@^4.0.3":
-  version "4.3.0"
-  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.3.0.tgz#4462e05070d91c04806b99c30a703fb2b50b2bb9"
-  integrity sha512-rYcwi1pUnaZoOUEa8xhrX10FHnONvube1WBoJ5PQf/Cbl0GuiUUSdXSVaFgxWdeyv6jCG0vWH1mrCHhspaJv1Q==
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-4.3.1.tgz#cf6214853935cab8ba817b825e2483aa36c6b2e0"
+  integrity sha512-yU7AB+VKayqLQZl+MrxI6kpuqzXDLJr8JdYvSONBwQ5VMT31PYXofenS+1n8XuCSnY9p8IAJQ0qeLTYIieMKVQ==
   dependencies:
-    "@babel/core" "^7.4.3"
+    "@babel/core" "^7.4.5"
     "@babel/plugin-transform-react-constant-elements" "^7.0.0"
-    "@babel/preset-env" "^7.4.3"
+    "@babel/preset-env" "^7.4.5"
     "@babel/preset-react" "^7.0.0"
-    "@svgr/core" "^4.3.0"
-    "@svgr/plugin-jsx" "^4.3.0"
-    "@svgr/plugin-svgo" "^4.2.0"
+    "@svgr/core" "^4.3.1"
+    "@svgr/plugin-jsx" "^4.3.1"
+    "@svgr/plugin-svgo" "^4.3.1"
     loader-utils "^1.2.3"
 
 "@types/babel__core@^7.1.0":
@@ -2619,21 +2647,21 @@
   integrity sha512-2Y8uPt0/jwjhQ6EiluT0XCri1Dbplr0ZxfFXUz+ye13gaqE8u5gL5ppao1JrUYr9cIip5S6MvQzBS7Kke7U9VA==
 
 "@types/chart.js@^2.7.53":
-  version "2.7.54"
-  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.7.54.tgz#d50c0db14f45d9de6eaa2820d5feb26cea68caf7"
-  integrity sha512-BxIUR4mfk0zOqOPEu4gxLP5herra6INQLyFmgVE6JVRNNB+r36g2cd67nDUEEdD/EShZvaR33xausxOGv1+nbw==
+  version "2.7.55"
+  resolved "https://registry.yarnpkg.com/@types/chart.js/-/chart.js-2.7.55.tgz#42fa503865ccbbcebe3399d90c00125bbcafcf9a"
+  integrity sha512-CACGbxPkr0vcyrZFpDAr4dqpfgu/PiHWzsKAhXdY+g72Laebjn/dijr7ExwVv9JS/99KrhtKmfJ0vBEhPTJBTQ==
 
 "@types/cheerio@*":
-  version "0.22.11"
-  resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.11.tgz#61c0facf9636d14ba5f77fc65ed8913aa845d717"
-  integrity sha512-x0X3kPbholdJZng9wDMhb2swvUi3UYRNAuWAmIPIWlfgAJZp//cql/qblE7181Mg7SjWVwq6ldCPCLn5AY/e7w==
+  version "0.22.12"
+  resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.12.tgz#93c050401d4935a5376e8b352965f7458bed5340"
+  integrity sha512-aczowyAJNfrkBV+HS8DyAA87OnvkqGrrOmm5s7V6Jbgimzv/1ZoAy91cLJX8GQrUS60KufD7EIzA2LbK8HV4hg==
   dependencies:
     "@types/node" "*"
 
 "@types/enzyme@^3.9.3":
-  version "3.9.4"
-  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.9.4.tgz#08f3ebfa24aa881021693a0fe615d6d2720c07ad"
-  integrity sha512-bQcwt5gcKnekrbci4hcapfE2J6rkkFbHM1l4VobLtSl4ogOfj0lvSxrdS6FftCakmJqqPBqdQCwb5KnlivL6SQ==
+  version "3.10.2"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-3.10.2.tgz#455d34854611fc8dbec70338fe0651ab692c74ea"
+  integrity sha512-tAFqfBVAxaxOCCcCpFrv6yFDg/hwL1KtJc7dsOaO+BBdSppTcyRP7jO2ze5va7NDa8iSFfAaZ9NeuybmMulu0w==
   dependencies:
     "@types/cheerio" "*"
     "@types/react" "*"
@@ -2693,10 +2721,10 @@
   resolved "https://registry.yarnpkg.com/@types/modernizr/-/modernizr-3.5.3.tgz#8ef99e6252191c1d88647809109dc29884ba6d7a"
   integrity sha512-jhMOZSS0UGYTS9pqvt6q3wtT3uvOSve5piTEmTMx3zzTuBLvSIMxSIBIc3d5lajVD5h4xc41AMZD2M5orN3PxA==
 
-"@types/node@*", "@types/node@^12.0.8":
-  version "12.0.10"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.0.10.tgz#51babf9c7deadd5343620055fc8aff7995c8b031"
-  integrity sha512-LcsGbPomWsad6wmMNv7nBLw7YYYyfdYcz6xryKYQhx89c3XXan+8Q6AJ43G5XDIaklaVkK3mE4fCb0SBvMiPSQ==
+"@types/node@*", "@types/node@^12.0.10":
+  version "12.6.2"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-12.6.2.tgz#a5ccec6abb6060d5f20d256fb03ed743e9774999"
+  integrity sha512-gojym4tX0FWeV2gsW4Xmzo5wxGjXGm550oVUII7f7G5o4BV6c7DBdiG1RRQd+y1bvqRyYtPfMK85UM95vsapqQ==
 
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
@@ -2776,9 +2804,9 @@
     "@types/vfile-message" "*"
 
 "@types/webpack-env@*":
-  version "1.13.9"
-  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.9.tgz#a67287861c928ebf4159a908d1fb1a2a34d4097a"
-  integrity sha512-p8zp5xqkly3g4cCmo2mKOHI9+Z/kObmDj0BmjbDDJQlgDTiEGTbm17MEwTAusV6XceCy+bNw9q/ZHXHyKo3zkg==
+  version "1.14.0"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.14.0.tgz#8edfc5f8e6eae20eeed3ca0d02974ed4ee5e4efc"
+  integrity sha512-Fv+0gYJzE/czLoRKq+gnXWr4yBpPM3tO3C8pDLFwqVKlMICQUq5OsxwwFZYDaVr7+L6mgNDp16iOcJHEz3J5RQ==
 
 "@types/yargs@^12.0.2", "@types/yargs@^12.0.9":
   version "12.0.12"
@@ -3002,11 +3030,6 @@ accepts@~1.3.4, accepts@~1.3.7:
     mime-types "~2.1.24"
     negotiator "0.6.2"
 
-acorn-dynamic-import@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/acorn-dynamic-import/-/acorn-dynamic-import-4.0.0.tgz#482210140582a36b83c3e342e1cfebcaa9240948"
-  integrity sha512-d3OEjQV4ROpoflsnUA8HozoIR504TFxNivYEUi6uwz0IYhBkTDXGuWlNdMtybRt3nqVx/L6XqMt0FxkXuWKZhw==
-
 acorn-globals@^4.1.0, acorn-globals@^4.3.2:
   version "4.3.2"
   resolved "https://registry.yarnpkg.com/acorn-globals/-/acorn-globals-4.3.2.tgz#4e2c2313a597fd589720395f6354b41cd5ec8006"
@@ -3016,19 +3039,19 @@ acorn-globals@^4.1.0, acorn-globals@^4.3.2:
     acorn-walk "^6.0.1"
 
 acorn-walk@^6.0.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.1.1.tgz#d363b66f5fac5f018ff9c3a1e7b6f8e310cc3913"
-  integrity sha512-OtUw6JUTgxA2QoqqmrmQ7F2NYqiBPi/L2jqHyFtllhOUvXYQXf0Z1CYUinIfyT4bTCGmrA7gX9FvHA81uzCoVw==
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-6.2.0.tgz#123cb8f3b84c2171f1f7fb252615b1c78a6b1a8c"
+  integrity sha512-7evsyfH1cLOCdAzZAd43Cic04yKydNx0cF+7tiA19p1XnLLPU4dpCQOqpjqwokFe//vS0QqfqqjCS2JkiIs0cA==
 
 acorn@^5.5.3:
   version "5.7.3"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-5.7.3.tgz#67aa231bf8812974b85235a96771eb6bd07ea279"
   integrity sha512-T/zvzYRfbVojPWahDsE5evJdHb3oJoQfFbsrKM7w5Zcs++Tr257tia3BmMP8XYVjp1S9RZXQMh7gao96BlqZOw==
 
-acorn@^6.0.1, acorn@^6.0.5, acorn@^6.1.1:
-  version "6.1.1"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.1.1.tgz#7d25ae05bb8ad1f9b699108e1094ecd7884adc1f"
-  integrity sha512-jPTiwtOxaHNaAPg/dmrJ/beuzLRnXtB0kQPQ8JpotKJgTB6rX6c8mlf315941pyjBSaPg8NHXS9fhP4u17DpGA==
+acorn@^6.0.1, acorn@^6.1.1, acorn@^6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-6.2.0.tgz#67f0da2fc339d6cfb5d6fb244fd449f33cd8bbe3"
+  integrity sha512-8oe72N3WPMjA+2zVG71Ia0nXZ8DpQH+QyyHO+p06jT8eg8FGG3FbcUIi8KziHlAfheJQZeoqbvq1mQSQHXKYLw==
 
 address@1.0.3:
   version "1.0.3"
@@ -3045,7 +3068,7 @@ after@0.8.2:
   resolved "https://registry.yarnpkg.com/after/-/after-0.8.2.tgz#fedb394f9f0e02aa9768e702bda23b505fae7e1f"
   integrity sha1-/ts5T58OAqqXaOcCvaI7UF+ufh8=
 
-agent-base@4, agent-base@^4.1.0:
+agent-base@4, agent-base@^4.3.0:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/agent-base/-/agent-base-4.3.0.tgz#8165f01c436009bccad0b1d122f05ed770efc6ee"
   integrity sha512-salcGninV0nPrwpGNn4VTXBb1SOuXQBiqbrNXoeizJsHrsL6ERFM2Ne3JUSBWRE6aeNJI2ROP/WEEIDUiDe3cg==
@@ -3111,9 +3134,9 @@ ajv-errors@^1.0.0:
   integrity sha512-DCRfO/4nQ+89p/RK43i8Ezd41EqdGIU4ld7nGF8OQ14oc/we5rEntLCUa7+jrn3nn83BosfwZA0wb4pon2o8iQ==
 
 ajv-keywords@^3.1.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.0.tgz#4b831e7b531415a7cc518cd404e73f6193c6349d"
-  integrity sha512-aUjdRFISbuFOl0EIZc+9e4FfZp0bDZgAdOOf30bJmw8VM9v84SHyVyxDfbWxpGYbdZD/9XoKxfHVNmxPkhwyGw==
+  version "3.4.1"
+  resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.4.1.tgz#ef916e271c64ac12171fd8384eaae6b2345854da"
+  integrity sha512-RO1ibKvd27e6FEShVFfPALuHI3WjSVNeK5FIsmme/LYRNxjKuNj+Dt7bucLa6NdSv3JcVTyMlm9kGR84z1XpaQ==
 
 ajv@^5.0.0:
   version "5.5.2"
@@ -3126,9 +3149,9 @@ ajv@^5.0.0:
     json-schema-traverse "^0.3.0"
 
 ajv@^6.1.0, ajv@^6.1.1, ajv@^6.5.5:
-  version "6.10.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.0.tgz#90d0d54439da587cd7e843bfb7045f50bd22bdf1"
-  integrity sha512-nffhOpkymDECQyR0mnsUtoCE8RlX38G0rYP+wgLWFyZuUyuuojSSvi/+euOiQBIn63whYwYVIIH1TvE3tu4OEg==
+  version "6.10.1"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.10.1.tgz#ebf8d3af22552df9dd049bfbe50cc2390e823593"
+  integrity sha512-w1YQaVGNC6t2UCPjEawK/vo/dG8OOrVtUmhBT1uJJYxbl5kU2Tj3v6LGqBcsysN1yhuCStJCCA3GqdvKY8sqXQ==
   dependencies:
     fast-deep-equal "^2.0.1"
     fast-json-stable-stringify "^2.0.0"
@@ -3243,9 +3266,9 @@ are-we-there-yet@~1.1.2:
     readable-stream "^2.0.6"
 
 arg@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.0.tgz#583c518199419e0037abb74062c37f8519e575f0"
-  integrity sha512-ZWc51jO3qegGkVh8Hwpv636EkbesNV5ZNQPCtRa+0qytRYPEs9IYT9qITY9buezqUH5uqyzlWLcufrzU2rffdg==
+  version "4.1.1"
+  resolved "https://registry.yarnpkg.com/arg/-/arg-4.1.1.tgz#485f8e7c390ce4c5f78257dbea80d4be11feda4c"
+  integrity sha512-SlmP3fEA88MBv0PypnXZ8ZfJhwmDeIE3SP71j37AiXQBXYosPV0x6uISAaHYSlSVhmHOVkomen0tbGk6Anlebw==
 
 argparse@^1.0.7:
   version "1.0.10"
@@ -3484,17 +3507,17 @@ atob@^2.1.1:
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
 autoprefixer@^9.4.9:
-  version "9.6.0"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.6.0.tgz#0111c6bde2ad20c6f17995a33fad7cf6854b4c87"
-  integrity sha512-kuip9YilBqhirhHEGHaBTZKXL//xxGnzvsD0FtBQa6z+A69qZD6s/BAX9VzDF1i9VKDquTJDQaPLSEhOnL6FvQ==
+  version "9.6.1"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-9.6.1.tgz#51967a02d2d2300bb01866c1611ec8348d355a47"
+  integrity sha512-aVo5WxR3VyvyJxcJC3h4FKfwCQvQWb1tSI5VHNibddCVWrcD1NvlxEweg3TSgiPztMnWfjpy2FURKA2kvDE+Tw==
   dependencies:
-    browserslist "^4.6.1"
-    caniuse-lite "^1.0.30000971"
+    browserslist "^4.6.3"
+    caniuse-lite "^1.0.30000980"
     chalk "^2.4.2"
     normalize-range "^0.1.2"
     num2fraction "^1.2.2"
-    postcss "^7.0.16"
-    postcss-value-parser "^3.3.1"
+    postcss "^7.0.17"
+    postcss-value-parser "^4.0.0"
 
 awesome-typescript-loader@^5.2.1:
   version "5.2.1"
@@ -3620,15 +3643,22 @@ babel-plugin-dynamic-import-node@2.2.0:
   dependencies:
     object.assign "^4.1.0"
 
-babel-plugin-emotion@^10.0.9:
-  version "10.0.13"
-  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.13.tgz#c4faa1ba8c0fd74a13226ced32876b314ef1d8ab"
-  integrity sha512-w8yukWIYDw2ZUzBo7B9t5jh7wsM4NQWqvuZadW4MhVokgw5wsoBRJ59Sa1hMc3UZiatwb0iBNufmRQZVl77I5Q==
+babel-plugin-dynamic-import-node@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-dynamic-import-node/-/babel-plugin-dynamic-import-node-2.3.0.tgz#f00f507bdaa3c3e3ff6e7e5e98d90a7acab96f7f"
+  integrity sha512-o6qFkpeQEBxcqt0XYlWzAVxNCSCZdUgcR8IRlhD/8DylxjjO4foPcvTW0GGKa/cVt3rvxZ7o5ippJ+/0nvLhlQ==
+  dependencies:
+    object.assign "^4.1.0"
+
+babel-plugin-emotion@^10.0.14, babel-plugin-emotion@^10.0.9:
+  version "10.0.14"
+  resolved "https://registry.yarnpkg.com/babel-plugin-emotion/-/babel-plugin-emotion-10.0.14.tgz#c1d0e4621e303507ea7da57daa3cd771939d6df4"
+  integrity sha512-T7hdxJ4xXkKW3OXcizK0pnUJlBeNj/emjQZPDIZvGOuwl2adIgicQWRNkz6BuwKdDTrqaXQn1vayaL6aL8QW5A==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
-    "@emotion/hash" "0.7.1"
-    "@emotion/memoize" "0.7.1"
-    "@emotion/serialize" "^0.11.6"
+    "@emotion/hash" "0.7.2"
+    "@emotion/memoize" "0.7.2"
+    "@emotion/serialize" "^0.11.8"
     babel-plugin-macros "^2.0.0"
     babel-plugin-syntax-jsx "^6.18.0"
     convert-source-map "^1.5.0"
@@ -4010,10 +4040,10 @@ bcrypt-pbkdf@^1.0.0:
   dependencies:
     tweetnacl "^0.14.3"
 
-before-after-hook@^1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-1.4.0.tgz#2b6bf23dca4f32e628fd2747c10a37c74a4b484d"
-  integrity sha512-l5r9ir56nda3qu14nAXIlyq1MmUSs0meCIaFAh8HwkFwP1F8eToOuS3ah2VAHHcY04jaYD7FpJC5JTXHYRbkzg==
+before-after-hook@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.0.1.tgz#a21dc15582fee3f035c39dcbb77f6892a99ada36"
+  integrity sha512-dpgMHA51KZyCu7uuxF6FCkN+scfGd/6aLxEr/14vKUo/1nPxcd2fhFv4BgYCbWxKt7JfgpbjJq9nc30Ip/p2uw==
 
 better-assert@~1.0.0:
   version "1.0.2"
@@ -4225,14 +4255,14 @@ browserslist@4.5.4:
     electron-to-chromium "^1.3.122"
     node-releases "^1.1.13"
 
-browserslist@^4.0.0, browserslist@^4.5.2, browserslist@^4.6.0, browserslist@^4.6.1, browserslist@^4.6.2:
-  version "4.6.3"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.6.3.tgz#0530cbc6ab0c1f3fc8c819c72377ba55cf647f05"
-  integrity sha512-CNBqTCq22RKM8wKJNowcqihHJ4SkI8CGeK7KOR9tPboXUuS5Zk5lQgzzTbs4oxD8x+6HUshZUa2OyNI9lR93bQ==
+browserslist@^4.0.0, browserslist@^4.5.2, browserslist@^4.6.0, browserslist@^4.6.2, browserslist@^4.6.3:
+  version "4.6.4"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.6.4.tgz#fd0638b3f8867fec2c604ed0ed9300379f8ec7c2"
+  integrity sha512-ErJT8qGfRt/VWHSr1HeqZzz50DvxHtr1fVL1m5wf20aGrG8e1ce8fpZ2EjZEfs09DDZYSvtRaDlMpWslBf8Low==
   dependencies:
-    caniuse-lite "^1.0.30000975"
-    electron-to-chromium "^1.3.164"
-    node-releases "^1.1.23"
+    caniuse-lite "^1.0.30000981"
+    electron-to-chromium "^1.3.188"
+    node-releases "^1.1.25"
 
 bs-logger@0.x:
   version "0.2.6"
@@ -4325,7 +4355,7 @@ bytes@3.1.0:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.0.tgz#f6cf7933a360e0588fa9fde85651cdc7f805d1f6"
   integrity sha512-zauLjrfCG+xvoyaqLoV8bLVXXNGC4JqlxFCutSDWA6fJrTo2ZuvLYTqZ7aHBLZSMOopbzwv8f+wZcVzfVTI2Dg==
 
-cacache@^11.0.1, cacache@^11.3.2:
+cacache@^11.3.2, cacache@^11.3.3:
   version "11.3.3"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-11.3.3.tgz#8bd29df8c6a718a6ebd2d010da4d7972ae3bbadc"
   integrity sha512-p8WcneCytvzPxhDvYp31PD039vi77I12W+/KfR9S8AZbaiARFBCpsPJS+9uhWfeBfeAtW7o/4vt3MUqLkbY6nA==
@@ -4417,7 +4447,7 @@ callsites@^3.0.0:
   resolved "https://registry.yarnpkg.com/callsites/-/callsites-3.1.0.tgz#b3630abd8943432f54b3f0519238e33cd7df2f73"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camel-case@3.0.x:
+camel-case@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-3.0.0.tgz#ca3c3688a4e9cf3a4cda777dc4dcbc713249cf73"
   integrity sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=
@@ -4472,10 +4502,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000955, caniuse-lite@^1.0.30000971, caniuse-lite@^1.0.30000975:
-  version "1.0.30000976"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000976.tgz#d30fe12662cb2a21e130d307db9907513ca830a2"
-  integrity sha512-tleNB1IwPRqZiod6nUNum63xQCMN96BUO2JTeiwuRM7p9d616EHsMBjBWJMudX39qCaPuWY8KEWzMZq7A9XQMQ==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30000955, caniuse-lite@^1.0.30000980, caniuse-lite@^1.0.30000981:
+  version "1.0.30000983"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000983.tgz#ab3c70061ca2a3467182a10ac75109b199b647f8"
+  integrity sha512-/llD1bZ6qwNkt41AsvjsmwNOoA4ZB+8iqmf5LVyeSXuBODT/hAMFNVOh84NdUzoiYiSKqo5vQ3ZzeYHSi/olDQ==
 
 capture-exit@^2.0.0:
   version "2.0.0"
@@ -4629,9 +4659,9 @@ chokidar@^2.0.2, chokidar@^2.0.3, chokidar@^2.0.4:
     fsevents "^1.2.7"
 
 chownr@^1.0.1, chownr@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.1.tgz#54726b8b8fff4df053c42187e801fb4412df1494"
-  integrity sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.2.tgz#a18f1e0b269c8a6a5d3c86eb298beb14c3dd7bf6"
+  integrity sha512-GkfeAQh+QNy3wquu9oIZr6SS5x7wGdSgNQvD10X3r+AZr1Oys22HW8kAmDMvNg2+Dm0TeGaEuO8gFwdBXxwO8A==
 
 chrome-trace-event@^1.0.0:
   version "1.0.2"
@@ -4678,7 +4708,7 @@ classnames@^2.2.5, classnames@^2.2.6:
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.2.6.tgz#43935bffdd291f326dad0a205309b38d00f650ce"
   integrity sha512-JR/iSQOSt+LQIWwrwEzJ9uk0xfN3mTVYMwt1Ir5mUcSN6pU+V4zQFFaJsclJbPuAUQH+yfWef6tm7l1quW3C8Q==
 
-clean-css@4.2.x:
+clean-css@^4.2.1:
   version "4.2.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-4.2.1.tgz#2d411ef76b8569b6d0c84068dabe85b0aa5e5c17"
   integrity sha512-4ZxI6dy4lrY6FHzfiy1aEOXgu4LIsW2MhwG0VBKdcoGoH/XLFgaHSdLTGr4O8Be6A8r3MOphEiI8Gc1n0ecf3g==
@@ -4698,9 +4728,9 @@ cli-cursor@^2.0.0, cli-cursor@^2.1.0:
     restore-cursor "^2.0.0"
 
 cli-spinners@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.1.0.tgz#22c34b4d51f573240885b201efda4e4ec9fff3c7"
-  integrity sha512-8B00fJOEh1HPrx4fo5eW16XmE1PcL1tGpGrxy63CXGP9nHdPBN63X75hA1zhvQuhVztJWLqV58Roj2qlNM7cAA==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/cli-spinners/-/cli-spinners-2.2.0.tgz#e8b988d9206c692302d8ee834e7a85c0144d8f77"
+  integrity sha512-tgU3fKwzYjiLEQgPMD9Jt+JjHVL9kW93FiIMX/l7rivvOD4/LL0Mf7gda3+4U2KJBloybwgj5KEoQgGRioMiKQ==
 
 cli-table3@0.5.1:
   version "0.5.1"
@@ -4914,21 +4944,11 @@ comma-separated-tokens@^1.0.0:
   resolved "https://registry.yarnpkg.com/comma-separated-tokens/-/comma-separated-tokens-1.0.7.tgz#419cd7fb3258b1ed838dc0953167a25e152f5b59"
   integrity sha512-Jrx3xsP4pPv4AwJUDWY9wOXGtwPXARej6Xd99h4TUGotmf8APuquKMpK+dnD3UgyxK7OEWaisjZz+3b5jtL6xQ==
 
-commander@2.17.x:
-  version "2.17.1"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.17.1.tgz#bd77ab7de6de94205ceacc72f1716d29f20a77bf"
-  integrity sha512-wPMUt6FnH2yzG95SA6mzjQOEKUU3aLaDEmzs1ti+1E9h+CsrZghRlqEM/EJ4KscsQVG8uNN4uVreUeT8+drlgg==
-
 commander@^2.12.1, commander@^2.14.1, commander@^2.19.0, commander@^2.20.0, commander@^2.9.0, commander@~2.20.0:
   version "2.20.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-2.20.0.tgz#d58bb2b5c1ee8f87b0d340027e9e94e222c5a422"
   integrity sha512-7j2y+40w61zy6YC2iRNpUe/NwhNyoXrYpHMrSunaMG64nRnaf96zO/KMQR4OyN/UnE5KLyEBnKHd4aG3rskjpQ==
 
-commander@~2.19.0:
-  version "2.19.0"
-  resolved "https://registry.yarnpkg.com/commander/-/commander-2.19.0.tgz#f6198aa84e5b83c46054b94ddedbfed5ee9ff12a"
-  integrity sha512-6tvAOO+D6OENvRAh524Dh9jcfKTYDQAqvqezbCW82xj5X0pSrcpxtvRKHLG0yBY6SD7PSDrJaj+0AiOcKVd1Xg==
-
 common-tags@^1.8.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/common-tags/-/common-tags-1.8.0.tgz#8e3153e542d4a39e9b10554434afaaf98956a937"
@@ -5222,7 +5242,7 @@ corejs-upgrade-webpack-plugin@^2.0.0:
     resolve-from "^5.0.0"
     webpack "^4.33.0"
 
-cosmiconfig@^5.0.0, cosmiconfig@^5.1.0, cosmiconfig@^5.2.0:
+cosmiconfig@^5.0.0, cosmiconfig@^5.1.0, cosmiconfig@^5.2.0, cosmiconfig@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.1.tgz#040f726809c591e77a17c0a3626ca45b4f168b1a"
   integrity sha512-H65gsXo1SKjf8zmrJ67eJk8aIRKV5ff2D4uKZIBZShbhGSpEmsQOPW/SKMKYhSTrqR7ufy6RP69rPogdaPh/kA==
@@ -5233,12 +5253,12 @@ cosmiconfig@^5.0.0, cosmiconfig@^5.1.0, cosmiconfig@^5.2.0:
     parse-json "^4.0.0"
 
 coveralls@^3.0.3:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.4.tgz#f50233c9c62fd0973f710fce85fd19dba24cff4b"
-  integrity sha512-eyqUWA/7RT0JagiL0tThVhjbIjoiEUyWCjtUJoOPcWoeofP5WK/jb2OJYoBFrR6DvplR+AxOyuBqk4JHkk5ykA==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/coveralls/-/coveralls-3.0.5.tgz#28d7274c6c9827aa85537eab82d66e7e62d0d527"
+  integrity sha512-/KD7PGfZv/tjKB6LoW97jzIgFqem0Tu9tZL9/iwBnBd8zkIZp7vT1ZSHNvnr0GSQMV/LTMxUstWg8WcDDUVQKg==
   dependencies:
     growl "~> 1.10.0"
-    js-yaml "^3.11.0"
+    js-yaml "^3.13.1"
     lcov-parse "^0.0.10"
     log-driver "^1.2.7"
     minimist "^1.2.0"
@@ -5576,22 +5596,22 @@ csso@^3.5.1:
   dependencies:
     css-tree "1.0.0-alpha.29"
 
-cssom@0.3.x, "cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.6:
-  version "0.3.6"
-  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.6.tgz#f85206cee04efa841f3c5982a74ba96ab20d65ad"
-  integrity sha512-DtUeseGk9/GBW0hl0vVPpU22iHL6YB5BUX7ml1hB+GMpo0NX5G4voX3kdWiMSEguFtcW3Vh3djqNF4aIe6ne0A==
+"cssom@>= 0.3.2 < 0.4.0", cssom@^0.3.6, cssom@~0.3.6:
+  version "0.3.8"
+  resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.3.8.tgz#9f1276f5b2b463f2114d3f2c75250af8c1a36f4a"
+  integrity sha512-b0tGHbfegbhPJpxpiBPU2sCkigAqtM9O121le6bbOlgyV+NyGyCmVfJ6QW9eRjz8CpNfWEOYBIMIGRYkLwsIYg==
 
 cssstyle@^1.0.0, cssstyle@^1.2.2:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.2.2.tgz#427ea4d585b18624f6fdbf9de7a2a1a3ba713077"
-  integrity sha512-43wY3kl1CVQSvL7wUY1qXkxVGkStjpkDmVjiIKX8R97uhajy8Bybay78uOtqvh7Q5GK75dNPfW0geWjE6qQQow==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/cssstyle/-/cssstyle-1.3.0.tgz#c36c466f7037fd30f03baa271b65f0f17b50585c"
+  integrity sha512-wXsoRfsRfsLVNaVzoKdqvEmK/5PFaEXNspVT22Ots6K/cnJdpoDKuQFw+qlMiXnmaif1OgeC466X1zISgAOcGg==
   dependencies:
-    cssom "0.3.x"
+    cssom "~0.3.6"
 
 csstype@^2.2.0, csstype@^2.5.2, csstype@^2.5.7:
-  version "2.6.5"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.5.tgz#1cd1dff742ebf4d7c991470ae71e12bb6751e034"
-  integrity sha512-JsTaiksRsel5n7XwqPAfB0l3TFKdpjW/kgAELf9vrb5adGA7UCPLajKK5s3nFrcFm3Rkyp/Qkgl73ENc1UY3cA==
+  version "2.6.6"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.6.tgz#c34f8226a94bbb10c32cc0d714afdf942291fc41"
+  integrity sha512-RpFbQGUE74iyPgvr46U9t1xoQBM8T4BL8SxrN66Le2xYAPSaDJJKeztV3awugusb3g3G9iL8StmkBBXhcbbXhg==
 
 currently-unhandled@^0.4.1:
   version "0.4.1"
@@ -5753,7 +5773,12 @@ deep-object-diff@^1.1.0:
   resolved "https://registry.yarnpkg.com/deep-object-diff/-/deep-object-diff-1.1.0.tgz#d6fabf476c2ed1751fc94d5ca693d2ed8c18bc5a"
   integrity sha512-b+QLs5vHgS+IoSNcUE4n9HP2NwcHj7aqnJWsjPtuG75Rh5TOaGt0OjAYInh77d5T16V5cRDC+Pw/6ZZZiETBGw==
 
-deepmerge@3.3.0, deepmerge@^3.2.0:
+deepmerge@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.0.0.tgz#3e3110ca29205f120d7cb064960a39c3d2087c09"
+  integrity sha512-YZ1rOP5+kHor4hMAH+HRQnBQHg+wvS1un1hAOuIcxcBy0hzcUf6Jg2a1w65kpoOUnurOfZbERwjI1TfZxNjcww==
+
+deepmerge@^3.2.0:
   version "3.3.0"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-3.3.0.tgz#d3c47fd6f3a93d517b14426b0628a17b0125f5f7"
   integrity sha512-GRQOafGHwMHpjPx9iCvTgpu9NojZ49q794EEL94JVEw6VaeA8XTUyBKvAkOOjBX9oJNiV6G3P+T+tihFjo2TqA==
@@ -6109,10 +6134,10 @@ ejs@^2.6.1:
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.6.2.tgz#3a32c63d1cd16d11266cd4703b14fec4e74ab4f6"
   integrity sha512-PcW2a0tyTuPHz3tWyYqtK6r1fZ3gp+3Sop8Ph+ZYN81Ob5rwmbHEzaqs10N3BEsaGTkh/ooniXK+WwszGlc2+Q==
 
-electron-to-chromium@^1.3.122, electron-to-chromium@^1.3.164:
-  version "1.3.171"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.171.tgz#ca226f0dcc3e02d9762de4d40948b0a116e6ef51"
-  integrity sha512-pZi+t0RWITPiIYaGBWBm6gl+rnpygLSInIEq6kCo3/g1KHDHJVL9+DsCw+PfF55JltIACYAaw6c3CUlGW/0qTg==
+electron-to-chromium@^1.3.122, electron-to-chromium@^1.3.188:
+  version "1.3.190"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.190.tgz#5bf599519983bfffd9d4387817039a3ed7ca085f"
+  integrity sha512-cs9WnTnGBGnYYVFMCtLmr9jXNTOkdp95RLz5VhwzDn7dErg1Lnt9o4d01gEH69XlmRKWUr91Yu1hA+Hi8qW0PA==
 
 elegant-spinner@^1.0.1:
   version "1.0.1"
@@ -6120,9 +6145,9 @@ elegant-spinner@^1.0.1:
   integrity sha1-2wQ1IcldfjA/2PNFvtwzSc+wcp4=
 
 elliptic@^6.0.0:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.4.1.tgz#c2d0b7776911b86722c632c3c06c60f2f819939a"
-  integrity sha512-BsXLz5sqX8OHcsh7CqBMztyXARmGQ3LWPtGjJi6DiJHq5C/qvi9P3OqgswKSDftbu8+IoI/QDTAm2fFnQ9SZSQ==
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/elliptic/-/elliptic-6.5.0.tgz#2b8ed4c891b7de3200e14412a5b8248c7af505ca"
+  integrity sha512-eFOJTMyCYb7xtE/caJ6JJu+bhi67WCYNbkGSknu20pmM8Ke/bqOfdnZWxyoGN26JgfxTbXrsCkEw4KheCT/KGg==
   dependencies:
     bn.js "^4.4.0"
     brorand "^1.0.1"
@@ -6143,13 +6168,13 @@ emojis-list@^2.0.0:
   integrity sha1-TapNnbAPmBmIDHn6RXrlsJof04k=
 
 emotion-theming@^10.0.10, emotion-theming@^10.0.9:
-  version "10.0.10"
-  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.10.tgz#efe8751119751bdc70fdc1795fe4cde0fb0cf14c"
-  integrity sha512-E4SQ3Y91avxxydDgubi/po/GaC5MM1XHm8kcClKg1PA/TeOye0PiLBzAzlgt9dBzDRV9+qHDunsayPvzVYIYng==
+  version "10.0.14"
+  resolved "https://registry.yarnpkg.com/emotion-theming/-/emotion-theming-10.0.14.tgz#e548d388493d07bedbb0d9d3bbe221766174b1f4"
+  integrity sha512-zMGhPSYz48AAR6DYjQVaZHeO42cYKPq4VyB1XjxzgR62/NmO99679fx8qDDB1QZVYGkRWZtsOe+zJE/e30XdbA==
   dependencies:
-    "@emotion/weak-memoize" "0.2.2"
+    "@babel/runtime" "^7.4.3"
+    "@emotion/weak-memoize" "0.2.3"
     hoist-non-react-statics "^3.3.0"
-    object-assign "^4.1.1"
 
 emotion@^9.1.2:
   version "9.2.12"
@@ -6646,9 +6671,9 @@ extend@^3.0.0, extend@~3.0.2:
   integrity sha512-fjquC59cD7CyW6urNXK0FBufkZcoiGG80wTuPujX590cB5Ttln20E2UB4S/WARVqhXffZl2LNgS+gQdPIIim/g==
 
 external-editor@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.0.3.tgz#5866db29a97826dbe4bf3afd24070ead9ea43a27"
-  integrity sha512-bn71H9+qWoOQKyZDo25mOMVpSmXROAsTJVVVYzrrtol3d4y+AsKjf4Iwl2Q+IuT0kFSQ1qo166UuIwqYq7mGnA==
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/external-editor/-/external-editor-3.1.0.tgz#cb03f740befae03ea4d283caed2741a83f335495"
+  integrity sha512-hMQ4CX1p1izmuLYyZqLMO/qGNw10wSv9QDCPfzXfyFrOaCSSoRfqE1Kf1s5an66J5JZC62NewG+mK49jOCtQew==
   dependencies:
     chardet "^0.7.0"
     iconv-lite "^0.4.24"
@@ -6966,9 +6991,9 @@ flat@^4.1.0:
     is-buffer "~2.0.3"
 
 flatted@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.0.tgz#55122b6536ea496b4b44893ee2608141d10d9916"
-  integrity sha512-R+H8IZclI8AAkSBRQJLVOsxwAoHd6WC40b4QTNWIjzAa6BXOBfQcM587MXDTVPeYaopFNWHUFLx7eNmHDSxMWg==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08"
+  integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg==
 
 flush-write-stream@^1.0.0:
   version "1.1.1"
@@ -7111,11 +7136,11 @@ fs-extra@^7.0.0, fs-extra@^7.0.1:
     universalify "^0.1.0"
 
 fs-extra@^8.0.1:
-  version "8.0.1"
-  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.0.1.tgz#90294081f978b1f182f347a440a209154344285b"
-  integrity sha512-W+XLrggcDzlle47X/XnS7FXrXu9sDo+Ze9zpndeBxdgv88FHLm1HtmkhEwavruS6koanBjp098rUpHs65EmG7A==
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-8.1.0.tgz#49d43c45a88cd9677668cb7be1b46efdb8d2e1c0"
+  integrity sha512-yhlQgA6mnOJUKOsRUFsgJdQCvkKhcz8tlZG5HBQfReYZy46OwLcY+Zia0mtdHsOo9y/hP+CxMN0TU9QxoOtG4g==
   dependencies:
-    graceful-fs "^4.1.2"
+    graceful-fs "^4.2.0"
     jsonfile "^4.0.0"
     universalify "^0.1.0"
 
@@ -7547,10 +7572,10 @@ got@^8.3.2:
     url-parse-lax "^3.0.0"
     url-to-options "^1.0.1"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9:
-  version "4.1.15"
-  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.1.15.tgz#ffb703e1066e8a0eeaa4c8b80ba9253eeefbfb00"
-  integrity sha512-6uHUhOPEBgQ24HM+r6b/QwWfZq+yiFcipKFrOFiBEnWdy5sdzYoi+pJeQaPI5qOLRFqWmAXUPQNsielzdLoecA==
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.1.9, graceful-fs@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.0.tgz#8d8fdc73977cb04104721cb53666c1ca64cd328b"
+  integrity sha512-jpSvDPV4Cq/bgtpndIWbI5hmYxhQGHPC4d4cqBPb4DLniCfhJokdXhwhaDuLBGLQdvvRum/UiX6ECVIPvDXqdg==
 
 growl@1.10.5, "growl@~> 1.10.0":
   version "1.10.5"
@@ -7750,7 +7775,7 @@ hastscript@^5.0.0:
     property-information "^5.0.1"
     space-separated-tokens "^1.0.0"
 
-he@1.2.0, he@1.2.x, he@^1.1.1:
+he@1.2.0, he@^1.1.1, he@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
@@ -7837,29 +7862,29 @@ html-entities@^1.2.0:
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
   integrity sha1-DfKTUfByEWNRXfueVUPl9u7VFi8=
 
-html-minifier@^3.5.20:
-  version "3.5.21"
-  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.21.tgz#d0040e054730e354db008463593194015212d20c"
-  integrity sha512-LKUKwuJDhxNa3uf/LPR/KVjm/l3rBqtYeCOAekvG8F1vItxMUpueGd94i/asDDr8/1u7InxzFA5EeGjhhG5mMA==
+html-minifier@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-4.0.0.tgz#cca9aad8bce1175e02e17a8c33e46d8988889f56"
+  integrity sha512-aoGxanpFPLg7MkIl/DDFYtb0iWz7jMFGqFhvEDZga6/4QTjneiD8I/NXL1x5aaoCp7FSIT6h/OhykDdPsbtMig==
   dependencies:
-    camel-case "3.0.x"
-    clean-css "4.2.x"
-    commander "2.17.x"
-    he "1.2.x"
-    param-case "2.1.x"
-    relateurl "0.2.x"
-    uglify-js "3.4.x"
+    camel-case "^3.0.0"
+    clean-css "^4.2.1"
+    commander "^2.19.0"
+    he "^1.2.0"
+    param-case "^2.1.1"
+    relateurl "^0.2.7"
+    uglify-js "^3.5.1"
 
 html-webpack-plugin@^4.0.0-beta.2:
-  version "4.0.0-beta.5"
-  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.5.tgz#2c53083c1151bfec20479b1f8aaf0039e77b5513"
-  integrity sha512-y5l4lGxOW3pz3xBTFdfB9rnnrWRPVxlAhX6nrBYIcW+2k2zC3mSp/3DxlWVCMBfnO6UAnoF8OcFn0IMy6kaKAQ==
+  version "4.0.0-beta.7"
+  resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-4.0.0-beta.7.tgz#8e38391e613e19997e9bdd628c9a384cf6a24faa"
+  integrity sha512-xtKllnYj6xQPChdvbLihnj3yPsvB4WFASbqyZK2aflWPkDO+NitASYvsRPXPF3u4XYkZ5L7A+WtBh7J0vJ8APQ==
   dependencies:
-    html-minifier "^3.5.20"
-    loader-utils "^1.1.0"
+    html-minifier "^4.0.0"
+    loader-utils "^1.2.3"
     lodash "^4.17.11"
     pretty-error "^2.1.1"
-    tapable "^1.1.0"
+    tapable "^1.1.3"
     util.promisify "1.0.0"
 
 htmlparser2@^3.3.0, htmlparser2@^3.9.1:
@@ -7879,7 +7904,7 @@ http-cache-semantics@3.8.1, http-cache-semantics@^3.8.1:
   resolved "https://registry.yarnpkg.com/http-cache-semantics/-/http-cache-semantics-3.8.1.tgz#39b0e16add9b605bf0a9ef3d9daaf4843b4cacd2"
   integrity sha512-5ai2iksyV8ZXmnZhHH4rWPoxxistEexSi5936zIQ1bnNTW5VnA85B6P/VpXiRM017IgRvb2kKo1a//y+0wSp3w==
 
-http-errors@1.7.2, http-errors@~1.7.2:
+http-errors@1.7.2:
   version "1.7.2"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.2.tgz#4f5029cf13239f31036e5b2e55292bcfbcc85c8f"
   integrity sha512-uUQBt3H/cSIVfch6i1EuPNy/YsRSOUBXTVfZ+yR7Zjez3qjBz6i9+i4zjNaoqcoFVI4lQJ5plg63TvGfRSDCRg==
@@ -7890,6 +7915,17 @@ http-errors@1.7.2, http-errors@~1.7.2:
     statuses ">= 1.5.0 < 2"
     toidentifier "1.0.0"
 
+http-errors@~1.7.2:
+  version "1.7.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.7.3.tgz#6c619e4f9c60308c38519498c14fbb10aacebb06"
+  integrity sha512-ZTTX0MWrsQ2ZAhA1cejAwDLycFsd7I7nVtnkT3Ol0aqodaKW+0CTZDQ1uBv5whptCnc8e8HeRRJxRs0kmm/Qfw==
+  dependencies:
+    depd "~1.1.2"
+    inherits "2.0.4"
+    setprototypeof "1.1.1"
+    statuses ">= 1.5.0 < 2"
+    toidentifier "1.0.0"
+
 "http-parser-js@>=0.4.0 <0.4.11":
   version "0.4.10"
   resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.4.10.tgz#92c9c1374c35085f75db359ec56cc257cbb93fa4"
@@ -7927,11 +7963,11 @@ https-browserify@^1.0.0:
   integrity sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM=
 
 https-proxy-agent@^2.2.1:
-  version "2.2.1"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.1.tgz#51552970fa04d723e04c56d04178c3f92592bbc0"
-  integrity sha512-HPCTS1LW51bcyMYbxUIOO4HEOlQ1/1qRaFWcyxvwaqUS9TY88aoEuHUY33kuAh1YhVVaDQhLZsnPd+XNARWZlQ==
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-2.2.2.tgz#271ea8e90f836ac9f119daccd39c19ff7dfb0793"
+  integrity sha512-c8Ndjc9Bkpfx/vCJueCPy0jlP4ccCCSNDp8xwCZzPjKJUm+B+u9WX2x98Qx4n1PiMNTWo3D7KK5ifNV/yJyRzg==
   dependencies:
-    agent-base "^4.1.0"
+    agent-base "^4.3.0"
     debug "^3.1.0"
 
 humanize-ms@^1.2.1:
@@ -7942,9 +7978,9 @@ humanize-ms@^1.2.1:
     ms "^2.0.0"
 
 husky@^2.2.0:
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/husky/-/husky-2.4.1.tgz#dd00f9646f8693b93f7b3a12ba4be00be0eff7ab"
-  integrity sha512-ZRwMWHr7QruR22dQ5l3rEGXQ7rAQYsJYqaeCd+NyOsIFczAtqaApZQP3P4HwLZjCtFbm3SUNYoKuoBXX3AYYfw==
+  version "2.7.0"
+  resolved "https://registry.yarnpkg.com/husky/-/husky-2.7.0.tgz#c0a9a6a3b51146224e11bba0b46bba546e461d05"
+  integrity sha512-LIi8zzT6PyFpcYKdvWRCn/8X+6SuG2TgYYMrM6ckEYhlp44UcEduVymZGIZNLiwOUjrEud+78w/AsAiqJA/kRg==
   dependencies:
     cosmiconfig "^5.2.0"
     execa "^1.0.0"
@@ -8088,7 +8124,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.4.tgz#0fa2c64f932917c3433a0ded55363aae37416b7c"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -8142,9 +8178,9 @@ inquirer@6.2.2:
     through "^2.3.6"
 
 inquirer@^6.2.0, inquirer@^6.3.1:
-  version "6.4.1"
-  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.4.1.tgz#7bd9e5ab0567cd23b41b0180b68e0cfa82fc3c0b"
-  integrity sha512-/Jw+qPZx4EDYsaT6uz7F4GJRNFMRdKNeUZw3ZnKV8lyuUgz/YWRCSUAJMZSVhSq4Ec0R2oYnyi6b3d4JXcL5Nw==
+  version "6.5.0"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-6.5.0.tgz#2303317efc9a4ea7ec2e2df6f86569b734accf42"
+  integrity sha512-scfHejeG/lVZSpvCXpsB4j/wQNPM5JC8kiElOI0OUTwmc1RTpXr4H32/HOlQHcZiYl2z2VElwuCVDRG8vFmbnA==
   dependencies:
     ansi-escapes "^3.2.0"
     chalk "^2.4.2"
@@ -8152,7 +8188,7 @@ inquirer@^6.2.0, inquirer@^6.3.1:
     cli-width "^2.0.0"
     external-editor "^3.0.3"
     figures "^2.0.0"
-    lodash "^4.17.11"
+    lodash "^4.17.12"
     mute-stream "0.0.7"
     run-async "^2.2.0"
     rxjs "^6.4.0"
@@ -8460,9 +8496,9 @@ is-in-browser@^1.0.2, is-in-browser@^1.1.3:
   integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
 
 is-mergeable-object@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/is-mergeable-object/-/is-mergeable-object-1.1.0.tgz#a846e8cf0e2bad6a8cf8b243b63b4c43b9907990"
-  integrity sha512-JfyDDwUdtS4yHCgUpxOyKB9dnfZ0gecufxB0eytX6BmSXSE+8dbxDGt+V7CNRIRJ9sYFV/WQt2KJG6hNob2sBw==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/is-mergeable-object/-/is-mergeable-object-1.1.1.tgz#faaa3ed1cfce87d6f7d2f5885e92cc30af3e2ebf"
+  integrity sha512-CPduJfuGg8h8vW74WOxHtHmtQutyQBzR+3MjQ6iDHIYdbOnm1YC7jv43SqCoU8OPGTJD4nibmiryA4kmogbGrA==
 
 is-module@^1.0.0:
   version "1.0.0"
@@ -9240,7 +9276,7 @@ js-tokens@^3.0.2:
   resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-3.0.2.tgz#9866df395102130e38f7f996bceb65443209c25b"
   integrity sha1-mGbfOVECEw449/mWvOtlRDIJwls=
 
-js-yaml@3.13.1, js-yaml@^3.11.0, js-yaml@^3.13.1:
+js-yaml@3.13.1, js-yaml@^3.13.1:
   version "3.13.1"
   resolved "https://registry.yarnpkg.com/js-yaml/-/js-yaml-3.13.1.tgz#aff151b30bfdfa8e49e05da22e7415e9dfa37847"
   integrity sha512-YfbcO7jXDdyj0DGxYVSlSeQNHbD7XPWvrVWeVUujrQEoZzWJIRrCPoyk6kL6IAjAG2IolMK4T0hNUe0HOUs5Jw==
@@ -9563,9 +9599,9 @@ just-extend@^4.0.2:
   integrity sha512-FrLwOgm+iXrPV+5zDU6Jqu4gCRXbWEQg2O3SKONsWE4w7AXFRkryS53bpWdaL9cNol+AmR3AEYz6kn+o0fCPnw==
 
 karma-babel-preprocessor@^8.0.0:
-  version "8.0.0"
-  resolved "https://registry.yarnpkg.com/karma-babel-preprocessor/-/karma-babel-preprocessor-8.0.0.tgz#40639fa968bb14da65c2ccd507a68a5b398068cd"
-  integrity sha512-eeSSJgEtIVV7qKg/e+BG4RDTo+yglrGgBtuX+IHHGyhXEs4Vaqz8wSePXTiHyERvfxPfHRpxnKb5movoh62ekw==
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/karma-babel-preprocessor/-/karma-babel-preprocessor-8.0.1.tgz#63b33cc7b5b3b5c7815ec453f7df58fb88345af1"
+  integrity sha512-5upyawNi3c7Gg6tPH1FWRVTmUijGf3v1GV4ScLM/2jKdDP18SlaKlUpu8eJrRI3STO8qK1bkqFcdgAA364nLYQ==
 
 karma-chai@^0.1.0:
   version "0.1.0"
@@ -9801,6 +9837,11 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
+lines-and-columns@^1.1.6:
+  version "1.1.6"
+  resolved "https://registry.yarnpkg.com/lines-and-columns/-/lines-and-columns-1.1.6.tgz#1c00c743b433cd0a4e80758f7b64a57440d9ff00"
+  integrity sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA=
+
 lint-staged@^8.1.6:
   version "8.2.1"
   resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-8.2.1.tgz#752fcf222d9d28f323a3b80f1e668f3654ff221f"
@@ -9876,9 +9917,9 @@ listr@^0.14.2:
     rxjs "^6.3.3"
 
 lit-html@^1.0.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.1.0.tgz#6951fb717fb48fe34d915ae163448a04da321562"
-  integrity sha512-ZDJHpJi09yknMpjwPI8fuSl5sUG7+pF+eE5WciFtgyX7zebvgMDBgSLq4knXa7grxM00RkQ7PBd7UZQiruA78Q==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/lit-html/-/lit-html-1.1.1.tgz#186ed6abcc70c0d24e1132b37411c3b2645ed1aa"
+  integrity sha512-1WqhkPpj+CKwLRXCCbyRGnWkcFKE4ft2+j8C2zaXwFUK9I2vYDzTuDGPh0H9hZcDBEwoe6YpPC8AO5734EPORQ==
 
 load-json-file@^1.0.0:
   version "1.1.0"
@@ -9949,9 +9990,9 @@ locate-path@^5.0.0:
     p-locate "^4.1.0"
 
 lodash-es@^4.17.11:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.11.tgz#145ab4a7ac5c5e52a3531fb4f310255a152b4be0"
-  integrity sha512-DHb1ub+rMjjrxqlB3H56/6MXtm1lSksDp2rA2cNWjG8mlDUYFhUj3Di2Zn5IwSU87xLv8tNIQ7sSwE/YOX/D/Q==
+  version "4.17.14"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.14.tgz#12a95a963cc5955683cee3b74e85458954f37ecc"
+  integrity sha512-7zchRrGa8UZXjD/4ivUWP1867jDkhzTG2c/uj739utSd7O/pFFdxspCemIFKEEjErbcqRzn8nKnGsi7mvTgRPA==
 
 lodash._baseisequal@^3.0.0:
   version "3.0.7"
@@ -9972,7 +10013,7 @@ lodash._getnative@^3.0.0:
   resolved "https://registry.yarnpkg.com/lodash._getnative/-/lodash._getnative-3.9.1.tgz#570bc7dede46d61cdcde687d65d3eecbaa3aaff5"
   integrity sha1-VwvH3t5G1hzc3mh9ZdPuy6o6r/U=
 
-lodash._reinterpolate@~3.0.0:
+lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
   integrity sha1-DM8tiRZq8Ds2Y8eWU4t1rG4RTZ0=
@@ -10095,19 +10136,19 @@ lodash.sortby@^4.7.0:
   integrity sha1-7dFMgk4sycHgsKG0K7UhBRakJDg=
 
 lodash.template@^4.0.2:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.4.0.tgz#e73a0385c8355591746e020b99679c690e68fba0"
-  integrity sha1-5zoDhcg1VZF0bgILmWecaQ5o+6A=
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/lodash.template/-/lodash.template-4.5.0.tgz#f976195cf3f347d0d5f52483569fe8031ccce8ab"
+  integrity sha512-84vYFxIkmidUiFxidA/KjjH9pAycqW+h980j7Fuz5qxRtO9pgB7MDFTdys1N7A5mcucRiDyEq4fusljItR1T/A==
   dependencies:
-    lodash._reinterpolate "~3.0.0"
+    lodash._reinterpolate "^3.0.0"
     lodash.templatesettings "^4.0.0"
 
 lodash.templatesettings@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.1.0.tgz#2b4d4e95ba440d915ff08bc899e4553666713316"
-  integrity sha1-K01OlbpEDZFf8IvImeRVNmZxMxY=
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/lodash.templatesettings/-/lodash.templatesettings-4.2.0.tgz#e481310f049d3cf6d47e912ad09313b154f0fb33"
+  integrity sha512-stgLz+i3Aa9mZgnjr/O+v9ruKZsPsndy7qPZOchbqk2cnTU1ZaldKK+v7m54WoKIyxiuMZTKT2H81F8BeAc3ZQ==
   dependencies:
-    lodash._reinterpolate "~3.0.0"
+    lodash._reinterpolate "^3.0.0"
 
 lodash.throttle@^4.1.1:
   version "4.1.1"
@@ -10119,10 +10160,10 @@ lodash.uniq@^4.5.0:
   resolved "https://registry.yarnpkg.com/lodash.uniq/-/lodash.uniq-4.5.0.tgz#d0225373aeb652adc1bc82e4945339a842754773"
   integrity sha1-0CJTc662Uq3BvILklFM5qEJ1R3M=
 
-lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1:
-  version "4.17.11"
-  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.11.tgz#b39ea6229ef607ecd89e2c8df12536891cac9b8d"
-  integrity sha512-cQKh8igo5QUhZ7lg38DYWAxMvjSAKG0A8wGSVimP07SIUEK2UO+arSRKbRZWtelMtN5V0Hkwh5ryOto/SshYIg==
+lodash@^4.0.0, lodash@^4.0.1, lodash@^4.15.0, lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.14, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.2.1:
+  version "4.17.14"
+  resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.14.tgz#9ce487ae66c96254fe20b599f21b6816028078ba"
+  integrity sha512-mmKYbW3GLuJeX+iGP+Y7Gp1AiGHGbXHCOh/jZmrawMmsE7MS4znI3RL2FsjbqOyMayHInjOeykW7PEajUk1/xw==
 
 log-driver@^1.2.7:
   version "1.2.7"
@@ -10153,15 +10194,15 @@ log-update@^2.3.0:
     wrap-ansi "^3.0.1"
 
 log4js@^4.0.0:
-  version "4.3.2"
-  resolved "https://registry.yarnpkg.com/log4js/-/log4js-4.3.2.tgz#2c1d97c2ebeb5172d92df63ebf8750af4a1d91ea"
-  integrity sha512-72GjgSP+ifL156MD/bXEhE7UlFLKS2KkCXujodb1nl1z6PpKhCfS+41dyNQ7zKi4iM49TQl+aWLEISXGLcGCCQ==
+  version "4.5.1"
+  resolved "https://registry.yarnpkg.com/log4js/-/log4js-4.5.1.tgz#e543625e97d9e6f3e6e7c9fc196dd6ab2cae30b5"
+  integrity sha512-EEEgFcE9bLgaYUKuozyFfytQM2wDHtXn4tAN41pkaxpNjAykv11GVdeI4tHtmPWW4Xrgh9R/2d7XYghDVjbKKw==
   dependencies:
     date-format "^2.0.0"
     debug "^4.1.1"
     flatted "^2.0.0"
-    rfdc "^1.1.2"
-    streamroller "^1.0.5"
+    rfdc "^1.1.4"
+    streamroller "^1.0.6"
 
 loglevelnext@^1.0.1:
   version "1.0.5"
@@ -10214,7 +10255,7 @@ lowlight@~1.9.1:
     fault "^1.0.2"
     highlight.js "~9.12.0"
 
-lru-cache@4.1.x, lru-cache@^4.0.1, lru-cache@^4.1.2, lru-cache@^4.1.3:
+lru-cache@4.1.x, lru-cache@^4.0.1, lru-cache@^4.1.3:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-4.1.5.tgz#8bbe50ea85bed59bc9e33dcab8235ee9bcf443cd"
   integrity sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==
@@ -10249,9 +10290,9 @@ magic-string@0.25.1:
     sourcemap-codec "^1.4.1"
 
 magic-string@^0.25.2:
-  version "0.25.2"
-  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.2.tgz#139c3a729515ec55e96e69e82a11fe890a293ad9"
-  integrity sha512-iLs9mPjh9IuTtRsqqhNGYcZXGei0Nh/A4xirrsqW7c+QhKVFL2vm7U09ru6cHRD22azaP/wMDgI+HCqbETMTtg==
+  version "0.25.3"
+  resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.3.tgz#34b8d2a2c7fec9d9bdf9929a3fd81d271ef35be9"
+  integrity sha512-6QK0OpF/phMz0Q2AxILkX2mFhi7m+WMwTRg0LQKq/WBB0cDP4rYH3Wp4/d3OTXlrPLVJT/RFqj8tFeAR4nk8AA==
   dependencies:
     sourcemap-codec "^1.4.4"
 
@@ -10283,16 +10324,16 @@ make-error@1.x, make-error@^1.1.1:
   integrity sha512-c3sIjNUow0+8swNwVpqoH4YCShKNFkMaw6oH1mNS2haDZQqkeZFlHS3dhoeEbKKmJB4vXpJucU6oH75aDYeE9g==
 
 make-fetch-happen@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-4.0.1.tgz#141497cb878f243ba93136c83d8aba12c216c083"
-  integrity sha512-7R5ivfy9ilRJ1EMKIOziwrns9fGeAD4bAha8EB7BIiBBLHm2KeTUGCrICFt2rbHfzheTLynv50GnNTK1zDTrcQ==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/make-fetch-happen/-/make-fetch-happen-4.0.2.tgz#2d156b11696fb32bffbafe1ac1bc085dd6c78a79"
+  integrity sha512-YMJrAjHSb/BordlsDEcVcPyTbiJKkzqMf48N8dAJZT9Zjctrkb6Yg4TY9Sq2AwSIQJFn5qBBKVTYt3vP5FMIHA==
   dependencies:
     agentkeepalive "^3.4.1"
-    cacache "^11.0.1"
+    cacache "^11.3.3"
     http-cache-semantics "^3.8.1"
     http-proxy-agent "^2.1.0"
     https-proxy-agent "^2.2.1"
-    lru-cache "^4.1.2"
+    lru-cache "^5.1.1"
     mississippi "^3.0.0"
     node-fetch-npm "^2.0.2"
     promise-retry "^1.1.1"
@@ -10359,9 +10400,9 @@ markdown-to-jsx@^6.9.1, markdown-to-jsx@^6.9.3:
     unquote "^1.1.0"
 
 marked@^0.6.2:
-  version "0.6.2"
-  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.2.tgz#c574be8b545a8b48641456ca1dbe0e37b6dccc1a"
-  integrity sha512-LqxwVH3P/rqKX4EKGz7+c2G9r98WeM/SW34ybhgNGhUQNKtf1GmmSkJ6cDGJ/t6tiyae49qRkpyTw2B9HOrgUA==
+  version "0.6.3"
+  resolved "https://registry.yarnpkg.com/marked/-/marked-0.6.3.tgz#79babad78af638ba4d522a9e715cdfdd2429e946"
+  integrity sha512-Fqa7eq+UaxfMriqzYLayfqAE40WN03jf+zHjT18/uXNuzjq3TY0XTbrAoPeqSJrAmPz11VuUA+kBPYOhHt9oOQ==
 
 marksy@^7.0.0:
   version "7.0.1"
@@ -10425,9 +10466,9 @@ mem@^4.0.0:
     p-is-promise "^2.0.0"
 
 memoize-one@^5.0.0:
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.4.tgz#005928aced5c43d890a4dfab18ca908b0ec92cbc"
-  integrity sha512-P0z5IeAH6qHHGkJIXWw0xC2HNEgkx/9uWWBQw64FJj3/ol14VYdfVGWWr0fXfjhhv3TKVIqUq65os6O4GUNksA==
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.0.5.tgz#8cd3809555723a07684afafcd6f756072ac75d7e"
+  integrity sha512-ey6EpYv0tEaIbM/nTDOpHciXUvd+ackQrJgEzBwemhZZIWZjcyodqEcrmqDy2BKRTM3a65kKBV4WtLXJDt26SQ==
 
 memoizerific@^1.11.3:
   version "1.11.3"
@@ -10703,9 +10744,9 @@ mississippi@^3.0.0:
     through2 "^2.0.0"
 
 mixin-deep@^1.2.0:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.1.tgz#a49e7268dce1a0d9698e45326c5626df3543d0fe"
-  integrity sha512-8ZItLHeEgaqEvd5lYBXfm4EZSFCX29Jb9K+lAHhDKzReKBQKj3R+7NOF6tjqYi9t4oI8VUfaWITJQm86wnXGNQ==
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566"
+  integrity sha512-WRoDn//mXBiJ1H40rqa3vH0toePwSsGb45iInWlTySa+Uu4k3tYUSxa2v1KqAiLtvlrSzaExqS1gtk96A9zvEA==
   dependencies:
     for-in "^1.0.2"
     is-extendable "^1.0.1"
@@ -11031,10 +11072,10 @@ node-pre-gyp@^0.12.0:
     semver "^5.3.0"
     tar "^4"
 
-node-releases@^1.1.13, node-releases@^1.1.23:
-  version "1.1.23"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.23.tgz#de7409f72de044a2fa59c097f436ba89c39997f0"
-  integrity sha512-uq1iL79YjfYC0WXoHbC/z28q/9pOl8kSHaXdWmAAc8No+bDwqkZbzIJz55g/MUsPgSGm9LZ7QSUbzTcH5tz47w==
+node-releases@^1.1.13, node-releases@^1.1.25:
+  version "1.1.25"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.25.tgz#0c2d7dbc7fed30fbe02a9ee3007b8c90bf0133d3"
+  integrity sha512-fI5BXuk83lKEoZDdH3gRhtsNgh05/wZacuXkgbiYkceE7+QIMXOg98n9ZV7mz27B+kFHnqHcUpscZZlGRSmTpQ==
   dependencies:
     semver "^5.3.0"
 
@@ -11141,9 +11182,9 @@ npm-lifecycle@^2.1.1:
     validate-npm-package-name "^3.0.0"
 
 npm-packlist@^1.1.12, npm-packlist@^1.1.6, npm-packlist@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.1.tgz#19064cdf988da80ea3cee45533879d90192bbfbc"
-  integrity sha512-+TcdO7HJJ8peiiYhvPxsEDhF3PJFGUGRcFsGve3vxvxdcpO2Z4Z7rkosRM0kWj6LfbK/P0gu3dzk5RU1ffvFcw==
+  version "1.4.4"
+  resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.4.tgz#866224233850ac534b63d1a6e76050092b5d2f44"
+  integrity sha512-zTLo8UcVYtDU3gdeaFu2Xu0n0EvelfHDGuqtNIn5RO7yQj4H1TqNdBc/yZjxnWA0PVB8D3Woyp0i5B43JwQ6Vw==
   dependencies:
     ignore-walk "^3.0.1"
     npm-bundled "^1.0.1"
@@ -11398,9 +11439,9 @@ onetime@^2.0.0:
     mimic-fn "^1.0.0"
 
 open@^6.1.0:
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/open/-/open-6.3.0.tgz#60d0b845ee38fae0631f5d739a21bd40e3d2a527"
-  integrity sha512-6AHdrJxPvAXIowO/aIaeHZ8CeMdDf7qCyRNq8NwJpinmCdXhz+NZR7ie1Too94lpciCDsG+qHGO9Mt0svA4OqA==
+  version "6.4.0"
+  resolved "https://registry.yarnpkg.com/open/-/open-6.4.0.tgz#5c13e96d0dc894686164f18965ecfe889ecfc8a9"
+  integrity sha512-IFenVPgF70fSm1keSd2iDBIDIBZkroLeuffXq+wKTzTJlBpesFWojV9lb8mzOfaAzM1sr7HQHuO0vtV0zYekGg==
   dependencies:
     is-wsl "^1.1.0"
 
@@ -11653,7 +11694,7 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
-param-case@2.1.x:
+param-case@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-2.1.1.tgz#df94fd8cf6531ecf75e6bef9a0858fbc72be2247"
   integrity sha1-35T9jPZTHs915r75oIWPvHK+Ikc=
@@ -11737,6 +11778,16 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
+parse-json@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/parse-json/-/parse-json-5.0.0.tgz#73e5114c986d143efa3712d4ea24db9a4266f60f"
+  integrity sha512-OOY5b7PAEFV0E2Fir1KOkxchnZNCdowAJgQ5NuxjpBKTRP3pQhwkrkxqQjeoKJ+fO7bCpmIZaogI4eZGDMEGOw==
+  dependencies:
+    "@babel/code-frame" "^7.0.0"
+    error-ex "^1.3.1"
+    json-parse-better-errors "^1.0.1"
+    lines-and-columns "^1.1.6"
+
 parse-passwd@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/parse-passwd/-/parse-passwd-1.0.0.tgz#6d5b934a456993b23d37f40a382d6f1666a8e5c6"
@@ -12412,6 +12463,11 @@ postcss-value-parser@^3.0.0, postcss-value-parser@^3.3.0, postcss-value-parser@^
   resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-3.3.1.tgz#9ff822547e2893213cf1c30efa51ac5fd1ba8281"
   integrity sha512-pISE66AbVkp4fDQ7VHBwRNXzAAKJjw4Vw7nWI/+Q3vuly7SNfgYXvm6i5IgFylHGK5sP/xHAbB7N49OS4gWNyQ==
 
+postcss-value-parser@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.0.0.tgz#99a983d365f7b2ad8d0f9b8c3094926eab4b936d"
+  integrity sha512-ESPktioptiSUchCKgggAkzdmkgzKfmp0EU8jXH+5kbIUB+unr0Y4CY9SRMvibuvYUBjNh1ACLbxqYNpdTQOteQ==
+
 postcss@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-6.0.1.tgz#000dbd1f8eef217aa368b9a212c5fc40b2a8f3f2"
@@ -12430,7 +12486,7 @@ postcss@^6.0.1:
     source-map "^0.6.1"
     supports-color "^5.4.0"
 
-postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.16, postcss@^7.0.5, postcss@^7.0.6:
+postcss@^7.0.0, postcss@^7.0.1, postcss@^7.0.14, postcss@^7.0.17, postcss@^7.0.5, postcss@^7.0.6:
   version "7.0.17"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.17.tgz#4da1bdff5322d4a0acaab4d87f3e782436bad31f"
   integrity sha512-546ZowA+KZ3OasvQZHsbuEpysvwTZNGJv9EfyCQdsIDltPSWHAeTQ5fQy/Npi2ZDtLI3zs7Ps/p6wThErhm9fQ==
@@ -12651,9 +12707,9 @@ pseudomap@^1.0.2:
   integrity sha1-8FKijacOYYkX7wqKw0wa5aaChrM=
 
 psl@^1.1.24, psl@^1.1.28:
-  version "1.1.33"
-  resolved "https://registry.yarnpkg.com/psl/-/psl-1.1.33.tgz#5533d9384ca7aab86425198e10e8053ebfeab661"
-  integrity sha512-LTDP2uSrsc7XCb5lO7A8BI1qYxRe/8EqlRvMeEl6rsnYAqDOl8xHR+8lSAIVfrNaSAlTPTNOCgNjWcoUL3AZsw==
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.2.0.tgz#df12b5b1b3a30f51c329eacbdef98f3a6e136dc6"
+  integrity sha512-GEn74ZffufCmkDDLNcl3uuyF/aSD6exEyh1v/ZSdAomB82t6G9hzJVRx0jBmLDW+VfZqks3aScmMw9DszwUalA==
 
 public-encrypt@^4.0.0:
   version "4.0.3"
@@ -12716,9 +12772,9 @@ punycode@^2.1.0, punycode@^2.1.1:
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
 
 puppeteer@^1.15.0:
-  version "1.18.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.18.0.tgz#227bccc52806db37b3ccf762a7d95c06163f296e"
-  integrity sha512-NCwSN4wEIj43k4jO8Asa5nzibrIDFHWykqkZFjkGr0/f6U73k1ysql0gadQmOGLtZewXvvWqlNo+4ZMgX+5vZA==
+  version "1.18.1"
+  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-1.18.1.tgz#4a66f3bdab01115ededf70443ec904c99917a815"
+  integrity sha512-luUy0HPSuWPsPZ1wAp6NinE0zgetWtudf5zwZ6dHjMWfYpTQcmKveFRox7VBNhQ98OjNA9PQ9PzQyX8k/KrxTg==
   dependencies:
     debug "^4.1.0"
     extract-zip "^1.6.6"
@@ -12787,9 +12843,9 @@ quick-lru@^1.0.0:
   integrity sha1-Q2CxfGETatOAeDl/8RQW4Ybc+7g=
 
 raf-schd@^4.0.0:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.1.tgz#e72f29a96de260dead719f34c29e56fdc1c1473e"
-  integrity sha512-/QTXV4+Tf81CmJgTZac47N63ZzKmaVe+1cQX/grCFeLrs4Mcc6oq+KJfbF3tFjeS1NF91lmTvgmwYjk02UTo9A==
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.2.tgz#bd44c708188f2e84c810bf55fcea9231bcaed8a0"
+  integrity sha512-VhlMZmGy6A6hrkJWHLNTGl5gtgMUm+xfGza6wbwnE914yeQ5Ybm18vgM734RZhMgfw4tacUrWseGZlpUrrakEQ==
 
 raf@^3.4.0:
   version "3.4.1"
@@ -12910,9 +12966,9 @@ react-color@^2.17.0:
     tinycolor2 "^1.4.1"
 
 react-content-loader@^4.2.1:
-  version "4.2.1"
-  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-4.2.1.tgz#0d355134ed7d0987966abd0f784bc59e76976e91"
-  integrity sha512-XA5irUvZpQAEavfUBo7kc4tdvAbWwVKJolz/+2Pkj/XU7pn78AweAUtn+AxEajN0Srg/mraJ8XMKlUsXOFiknw==
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/react-content-loader/-/react-content-loader-4.2.2.tgz#8b014eab0f0218888b8f064f0373b41f2203c8be"
+  integrity sha512-8zn2OmjP/BhsW0spc5/nsYFsS3ybqwkoZypFl7PU92Jt1cJAjOo8Y7kfo/+ja4c/88UNLBTLfMcnlE+4Diq/5w==
 
 react-dev-utils@^9.0.0:
   version "9.0.1"
@@ -13245,15 +13301,13 @@ read-cmd-shim@^1.0.1:
     graceful-fs "^4.1.2"
 
 read-package-tree@^5.1.6:
-  version "5.2.2"
-  resolved "https://registry.yarnpkg.com/read-package-tree/-/read-package-tree-5.2.2.tgz#4b6a0ef2d943c1ea36a578214c9a7f6b7424f7a8"
-  integrity sha512-rW3XWUUkhdKmN2JKB4FL563YAgtINifso5KShykufR03nJ5loGFlkUMe1g/yxmqX073SoYYTsgXu7XdDinKZuA==
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/read-package-tree/-/read-package-tree-5.3.1.tgz#a32cb64c7f31eb8a6f31ef06f9cedf74068fe636"
+  integrity sha512-mLUDsD5JVtlZxjSlPPx1RETkNjjvQYuweKwNVt1Sn8kP5Jh44pvYuUHCp6xSVDZWbNxVxG5lyZJ921aJH61sTw==
   dependencies:
-    debuglog "^1.0.1"
-    dezalgo "^1.0.0"
-    once "^1.3.0"
     read-package-json "^2.0.0"
     readdir-scoped-modules "^1.0.0"
+    util-promisify "^2.1.0"
 
 read-pkg-up@^1.0.1:
   version "1.0.1"
@@ -13298,14 +13352,14 @@ read-pkg@^3.0.0:
     path-type "^3.0.0"
 
 read-pkg@^5.1.1:
-  version "5.1.1"
-  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.1.1.tgz#5cf234dde7a405c90c88a519ab73c467e9cb83f5"
-  integrity sha512-dFcTLQi6BZ+aFUaICg7er+/usEoqFdQxiEBsEMNGoipenihtxxtdrQuBXvyANCEI8VuUIVYFgeHGx9sLLvim4w==
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/read-pkg/-/read-pkg-5.2.0.tgz#7bf295438ca5a33e56cd30e053b34ee7250c93cc"
+  integrity sha512-Ug69mNOpfvKDAc2Q8DRpMjjzdtrnv9HcSMX+4VsZxD1aZ6ZzrIE7rlzXBtWTyhULSMKg076AW6WR5iZpD0JiOg==
   dependencies:
     "@types/normalize-package-data" "^2.4.0"
     normalize-package-data "^2.5.0"
-    parse-json "^4.0.0"
-    type-fest "^0.4.1"
+    parse-json "^5.0.0"
+    type-fest "^0.6.0"
 
 read@1, read@~1.0.1:
   version "1.0.7"
@@ -13337,9 +13391,9 @@ read@1, read@~1.0.1:
     util-deprecate "^1.0.1"
 
 readdir-scoped-modules@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.0.2.tgz#9fafa37d286be5d92cbaebdee030dc9b5f406747"
-  integrity sha1-n6+jfShr5dksuuve4DDcm19AZ0c=
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
+  integrity sha512-asaikDeqAQg7JifRsZn1NJZXo9E+VwlyCfbkZhwyISinqk5zNS6266HS5kah6P0SaQKGF6SkNnZVHUzHFYxYDw==
   dependencies:
     debuglog "^1.0.1"
     dezalgo "^1.0.0"
@@ -13488,9 +13542,9 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     safe-regex "^1.1.0"
 
 regexp-tree@^0.1.6:
-  version "0.1.10"
-  resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.10.tgz#d837816a039c7af8a8d64d7a7c3cf6a1d93450bc"
-  integrity sha512-K1qVSbcedffwuIslMwpe6vGlj+ZXRnGkvjAtFHfDZZZuEdA/h0dxljAPu9vhUo6Rrx2U2AwJ+nSQ6hK+lrP5MQ==
+  version "0.1.11"
+  resolved "https://registry.yarnpkg.com/regexp-tree/-/regexp-tree-0.1.11.tgz#c9c7f00fcf722e0a56c7390983a7a63dd6c272f3"
+  integrity sha512-7/l/DgapVVDzZobwMCCgMlqiqyLFJ0cduo/j+3BcDJIB+yJdsYCfKuI3l/04NV+H/rfNRdPIDbXNZHM9XvQatg==
 
 regexp.prototype.flags@^1.2.0:
   version "1.2.0"
@@ -13545,15 +13599,15 @@ regjsparser@^0.6.0:
     jsesc "~0.5.0"
 
 rehype-parse@^6.0.0:
-  version "6.0.0"
-  resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-6.0.0.tgz#f681555f2598165bee2c778b39f9073d17b16bca"
-  integrity sha512-V2OjMD0xcSt39G4uRdMTqDXXm6HwkUbLMDayYKA/d037j8/OtVSQ+tqKwYWOuyBeoCs/3clXRe30VUjeMDTBSA==
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/rehype-parse/-/rehype-parse-6.0.1.tgz#a5401d7f4144d5e17cbb69be11f05a2a7ba87e27"
+  integrity sha512-FrGSbOzcGxIvWty1qHjKTvHT4WBTt7C6JLs65EkvFPa7ZKraSmsoDDj6al1eBxaXS1t/kiGdPYazUe58Mgflgw==
   dependencies:
     hast-util-from-parse5 "^5.0.0"
     parse5 "^5.0.0"
     xtend "^4.0.1"
 
-relateurl@0.2.x:
+relateurl@^0.2.7:
   version "0.2.7"
   resolved "https://registry.yarnpkg.com/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
   integrity sha1-VNvzd+UUQKypCkzSdGANP/LYiKk=
@@ -13768,7 +13822,7 @@ retry@^0.10.0:
   resolved "https://registry.yarnpkg.com/retry/-/retry-0.10.1.tgz#e76388d217992c252750241d3d3956fed98d8ff4"
   integrity sha1-52OI0heZLCUnUCQdPTlW/tmNj/Q=
 
-rfdc@^1.1.2:
+rfdc@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.1.4.tgz#ba72cc1367a0ccd9cf81a870b3b58bd3ad07f8c2"
   integrity sha512-5C9HXdzK8EAqN7JDif30jqsBzavB7wLpaubisuQIGHWf2gUXSpzy6ArX/+Da8RjFpagWsCn+pIgxTMAmKw9Zug==
@@ -13907,12 +13961,12 @@ rollup-pluginutils@^2.0.1, rollup-pluginutils@^2.5.0, rollup-pluginutils@^2.6.0,
     estree-walker "^0.6.1"
 
 rollup@^1.11.3:
-  version "1.16.2"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.16.2.tgz#959aeae4b06c8e540749bac442d6d37aefb9217d"
-  integrity sha512-UAZxaQvH0klYZdF+90xv9nGb+m4p8jdoaow1VL5/RzDK/gN/4CjvaMmJNcOIv1/+gtzswKhAg/467mzF0sLpAg==
+  version "1.16.7"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-1.16.7.tgz#4b539ca22465df39f6c963d2001d95f6527e97e1"
+  integrity sha512-P3GVcbVSLLjHWFLKGerYRe3Q/yggRXmTZFx/4WZf4wzGwO6hAg5jyMAFMQKc0dts8rFID4BQngfoz6yQbI7iMQ==
   dependencies:
     "@types/estree" "0.0.39"
-    "@types/node" "^12.0.8"
+    "@types/node" "^12.0.10"
     acorn "^6.1.1"
 
 rst-selector-parser@^2.2.3:
@@ -13959,11 +14013,16 @@ safe-buffer@5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.1.tgz#893312af69b2123def71f57889001671eeb2c853"
   integrity sha512-kKvNJn6Mm93gAczWVJg7wH+wGYWNrDHdWvpUmHyEsgCtIwwo3bqPtV4tR5tuPaUhTOo/kvhVwd8XwwOllGYkbg==
 
-safe-buffer@5.1.2, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
+safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   version "5.1.2"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
+safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2:
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.0.tgz#b74daec49b1148f88c64b68d49b1e815c1f2f519"
+  integrity sha512-fZEwUGbVl7kouZs1jCdMLdt95hdIv0ZeHg6L7qPeciMZhZ+/gdesW4wgTARkrFWEpspjEATAzUGPG8N2jJiwbg==
+
 safe-regex@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/safe-regex/-/safe-regex-1.1.0.tgz#40a3669f3b077d1e943d44629e157dd48023bf2e"
@@ -13997,11 +14056,11 @@ sax@^1.2.4, sax@~1.2.4:
   integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==
 
 saxes@^3.1.9:
-  version "3.1.10"
-  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.10.tgz#6028a4d6d65f0b5f5b5d250c0500be6a7950fe13"
-  integrity sha512-G/mVZCCGhJqgS+I7wT5gBHyTNXLe2SQcu2qmhwl1OKcSHyJEXKQY2CLT+qWIxV+m6uiGMLfSOJGLQQHhklIeEQ==
+  version "3.1.11"
+  resolved "https://registry.yarnpkg.com/saxes/-/saxes-3.1.11.tgz#d59d1fd332ec92ad98a2e0b2ee644702384b1c5b"
+  integrity sha512-Ydydq3zC+WYDJK1+gRxRapLIED9PWeSuuS41wqyoRmzvhhh9nc+QQrVMKJYzJFULazeGhzSV0QleN2wD3boh2g==
   dependencies:
-    xmlchars "^1.3.1"
+    xmlchars "^2.1.1"
 
 scheduler@^0.13.6:
   version "0.13.6"
@@ -14027,11 +14086,6 @@ schema-utils@^1.0.0:
     ajv-errors "^1.0.0"
     ajv-keywords "^3.1.0"
 
-scrollbarwidth@^0.1.3:
-  version "0.1.3"
-  resolved "https://registry.yarnpkg.com/scrollbarwidth/-/scrollbarwidth-0.1.3.tgz#1b0de64e288c38c427f4a01fe00a462a04b94fdf"
-  integrity sha1-Gw3mTiiMOMQn9KAf4ApGKgS5T98=
-
 select@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/select/-/select-1.1.2.tgz#0e7350acdec80b1108528786ec1d4418d11b396d"
@@ -14048,9 +14102,9 @@ semver-compare@^1.0.0:
   integrity sha512-Ya52jSX2u7QKghxeoFGpLwCtGlt7j0oY9DYb5apt9nPlJ42ID+ulTXESnt/qAQcoSERyZ5sl3LDIOw0nAn/5DA==
 
 semver@^6.0.0, semver@^6.1.1:
-  version "6.1.2"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-6.1.2.tgz#079960381376a3db62eb2edc8a3bfb10c7cfe318"
-  integrity sha512-z4PqiCpomGtWj8633oeAdXm1Kn1W++3T8epkZYnwiVgIYIJ0QHszhInYSJTYxebByQH7KVCEAn8R9duzZW2PhQ==
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/semver/-/semver-6.2.0.tgz#4d813d9590aaf8a9192693d6c85b9344de5901db"
+  integrity sha512-jdFC1VdUGT/2Scgbimf7FSx9iJLXoqfglSF+gJeuNWVpiE37OIbc1jywR/GJyFdz3mnkz2/id0L0J/cr0izR5A==
 
 semver@~5.3.0:
   version "5.3.0"
@@ -14107,20 +14161,10 @@ set-blocking@^2.0.0, set-blocking@~2.0.0:
   resolved "https://registry.yarnpkg.com/set-blocking/-/set-blocking-2.0.0.tgz#045f9782d011ae9a6803ddd382b24392b3d890f7"
   integrity sha1-BF+XgtARrppoA93TgrJDkrPYkPc=
 
-set-value@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-0.4.3.tgz#7db08f9d3d22dc7f78e53af3c3bf4666ecdfccf1"
-  integrity sha1-fbCPnT0i3H945Trzw79GZuzfzPE=
-  dependencies:
-    extend-shallow "^2.0.1"
-    is-extendable "^0.1.1"
-    is-plain-object "^2.0.1"
-    to-object-path "^0.3.0"
-
-set-value@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.0.tgz#71ae4a88f0feefbbf52d1ea604f3fb315ebb6274"
-  integrity sha512-hw0yxk9GT/Hr5yJEYnHNKYXkIA8mVJgd9ditYZCe16ZczcaELYYcfvaXesNACk2O8O0nTiPQcQhGUQj8JLzeeg==
+set-value@^2.0.0, set-value@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
+  integrity sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==
   dependencies:
     extend-shallow "^2.0.1"
     is-extendable "^0.1.1"
@@ -14207,9 +14251,9 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   integrity sha1-tf3AjxKH6hF4Yo5BXiUTK3NkbG0=
 
 simple-git@^1.85.0:
-  version "1.116.0"
-  resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-1.116.0.tgz#ea6e533466f1e0152186e306e004d4eefa6e3e00"
-  integrity sha512-Pbo3tceqMYy0j3U7jzMKabOWcx5+67GdgQUjpK83XUxGhA+1BX93UPvlWNzbCRoFwd7EJTyDSCC2XCoT4NTLYQ==
+  version "1.120.0"
+  resolved "https://registry.yarnpkg.com/simple-git/-/simple-git-1.120.0.tgz#3323a763ee88f9733bd928a65cb6eb2982f64c53"
+  integrity sha512-caF3eLrUSrL6d5fBVU85bmY0lpbMpbkWze1W2Tg946kN75s/WWvKqpc4Agn3DLHyzXEeiWfv8yPULiCKumuIQg==
   dependencies:
     debug "^4.0.1"
 
@@ -14221,17 +14265,17 @@ simple-swizzle@^0.2.2:
     is-arrayish "^0.3.1"
 
 simplebar-react@^1.0.0-alpha.6:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-1.0.0.tgz#8fe914d7f980dd077cc9dfd3e22ec5596f006b8d"
-  integrity sha512-FbM2yn7D/UzrJGCY60CKeLkZ3gOs7tYr7KmyamteUt9SKh2x4yW5KVM4IQBw86x4ofRoD6FT19MWmfMKv4Onhw==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/simplebar-react/-/simplebar-react-1.1.0.tgz#9241817265aee28b40abced66d6a2663e046d721"
+  integrity sha512-0nbUpoB5Gq3z2dbhRjPxwTLlscgFjCw8vKQRmbXIr47JMc5BeHj/WbZdVAESuKAvua7ESh6mkxbzywMNgRdbCw==
   dependencies:
     prop-types "^15.6.1"
-    simplebar "^4.0.0"
+    simplebar "^4.1.0"
 
-simplebar@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.0.0.tgz#7f1b9e735ec94a58f887d4803f6b15abf401b6b5"
-  integrity sha512-td6vJVhqIXfa3JgNZR5OgETPLfmHNSSpt+OXIbk6WH/nOrUtX3Qcyio30+5rdxxAV/61+F5eJ4jJV4Ek7/KJYQ==
+simplebar@^4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/simplebar/-/simplebar-4.1.0.tgz#c4b78b278dd0ce41ed70a71473bfad8132a6260f"
+  integrity sha512-kX+CsWbWLeufIsqJl8xg5J4WbYMyq5NONR/aTaehN8XLQxOthSgRT/uAXsqX9Yrw3iiGxD9PPwM1PmEJfWAdcg==
   dependencies:
     can-use-dom "^0.1.0"
     core-js "^3.0.1"
@@ -14239,7 +14283,6 @@ simplebar@^4.0.0:
     lodash.memoize "^4.1.2"
     lodash.throttle "^4.1.1"
     resize-observer-polyfill "^1.5.1"
-    scrollbarwidth "^0.1.3"
 
 sinon@^7.3.1:
   version "7.3.2"
@@ -14255,9 +14298,9 @@ sinon@^7.3.1:
     supports-color "^5.5.0"
 
 sisteransi@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.0.tgz#77d9622ff909080f1c19e5f4a1df0c1b0a27b88c"
-  integrity sha512-N+z4pHB4AmUv0SjveWRd6q1Nj5w62m5jodv+GD8lvmbY/83T/rpbJGZOnK5T149OldDj4Db07BSv9xY4K6NTPQ==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/sisteransi/-/sisteransi-1.0.2.tgz#ec57d64b6f25c4f26c0e2c7dd23f2d7f12f7e418"
+  integrity sha512-ZcYcZcT69nSLAR2oLN2JwNmLkJEKGooFMCdvOkFrToUt/WfcRWqhIg4P4KwY4dmLbuyXIx4o4YmPsvMRJYJd/w==
 
 slash@^1.0.0:
   version "1.0.0"
@@ -14423,7 +14466,7 @@ source-map-resolve@^0.5.0:
     source-map-url "^0.4.0"
     urix "^0.1.0"
 
-source-map-support@^0.5.3, source-map-support@^0.5.6, source-map-support@~0.5.10:
+source-map-support@^0.5.3, source-map-support@^0.5.6, source-map-support@~0.5.12:
   version "0.5.12"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.12.tgz#b4f3b10d51857a5af0138d3ce8003b201613d599"
   integrity sha512-4h2Pbvyy15EE02G+JOZpUCmqWJuqrs+sEkzewTm++BPi7Hvn/HwcqLAcNxYAyI0x13CpPPn+kMjl+hplXMHITQ==
@@ -14452,9 +14495,9 @@ source-map@^0.7.2:
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
 sourcemap-codec@^1.4.1, sourcemap-codec@^1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.4.tgz#c63ea927c029dd6bd9a2b7fa03b3fec02ad56e9f"
-  integrity sha512-CYAPYdBu34781kLHkaW3m6b/uUSyMOC2R61gcYMWooeuaGtjof86ZA/8T+qVPPt7np1085CR9hmMGrySwEc8Xg==
+  version "1.4.6"
+  resolved "https://registry.yarnpkg.com/sourcemap-codec/-/sourcemap-codec-1.4.6.tgz#e30a74f0402bad09807640d39e971090a08ce1e9"
+  integrity sha512-1ZooVLYFxC448piVLBbtOxFcXwnymH9oUF8nRd3CuYDVvkRBxRl6pB4Mtas5a4drtL+E8LDgFkQNcgIw6tc8Hg==
 
 space-separated-tokens@^1.0.0:
   version "1.1.4"
@@ -14495,9 +14538,9 @@ spdx-expression-parse@^3.0.0:
     spdx-license-ids "^3.0.0"
 
 spdx-license-ids@^3.0.0:
-  version "3.0.4"
-  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.4.tgz#75ecd1a88de8c184ef015eafb51b5b48bfd11bb1"
-  integrity sha512-7j8LYJLeY/Yb6ACbQ7F76qy5jHkp0U6jgBfJsk97bwWlVUnUWsAgpyaCvo17h0/RQGnQ036tVDomiwoI4pDkQA==
+  version "3.0.5"
+  resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-3.0.5.tgz#3694b5804567a458d3c8045842a6358632f62654"
+  integrity sha512-J+FWzZoynJEXGphVIS+XEh3kFSjZX/1i9gFBaWQcB+/tmpe2qUsSBABpcxqxnAxFdiUFEgAX1bjYGQvIZmoz9Q==
 
 split-string@^3.0.1, split-string@^3.0.2:
   version "3.1.0"
@@ -14622,16 +14665,16 @@ stream-shift@^1.0.0:
   resolved "https://registry.yarnpkg.com/stream-shift/-/stream-shift-1.0.0.tgz#d5c752825e5367e786f78e18e445ea223a155952"
   integrity sha1-1cdSgl5TZ+eG944Y5EXqIjoVWVI=
 
-streamroller@^1.0.5:
-  version "1.0.5"
-  resolved "https://registry.yarnpkg.com/streamroller/-/streamroller-1.0.5.tgz#71660c20b06b1a7b204d46085731ad13c10a562d"
-  integrity sha512-iGVaMcyF5PcUY0cPbW3xFQUXnr9O4RZXNBBjhuLZgrjLO4XCLLGfx4T2sGqygSeylUjwgWRsnNbT9aV0Zb8AYw==
+streamroller@^1.0.6:
+  version "1.0.6"
+  resolved "https://registry.yarnpkg.com/streamroller/-/streamroller-1.0.6.tgz#8167d8496ed9f19f05ee4b158d9611321b8cacd9"
+  integrity sha512-3QC47Mhv3/aZNFpDDVO44qQb9gwB9QggMEE0sQmkTAwBVYdBRWISdsywlkfm5II1Q5y/pmrHflti/IgmIzdDBg==
   dependencies:
     async "^2.6.2"
     date-format "^2.0.0"
     debug "^3.2.6"
     fs-extra "^7.0.1"
-    lodash "^4.17.11"
+    lodash "^4.17.14"
 
 strict-uri-encode@^1.0.0:
   version "1.1.0"
@@ -14891,7 +14934,7 @@ supports-color@^5.3.0, supports-color@^5.4.0, supports-color@^5.5.0:
   dependencies:
     has-flag "^3.0.0"
 
-svgo@^1.0.0, svgo@^1.2.1:
+svgo@^1.0.0, svgo@^1.2.2:
   version "1.2.2"
   resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.2.2.tgz#0253d34eccf2aed4ad4f283e11ee75198f9d7316"
   integrity sha512-rAfulcwp2D9jjdGu+0CuqlrAUin6bBWrpoqXWwKDZZZJfXcUXQSxLJOFJCQCSA0x0pP2U0TxSlJu2ROq5Bq6qA==
@@ -14933,7 +14976,7 @@ synchronous-promise@^2.0.6:
   resolved "https://registry.yarnpkg.com/synchronous-promise/-/synchronous-promise-2.0.9.tgz#b83db98e9e7ae826bf9c8261fd8ac859126c780a"
   integrity sha512-LO95GIW16x69LuND1nuuwM4pjgFGupg7pZ/4lU86AmchPKrhk0o2tpMU2unXRrqo81iAFe1YJ0nAGEVwsrZAgg==
 
-tapable@^1.0.0, tapable@^1.1.0:
+tapable@^1.0.0, tapable@^1.1.0, tapable@^1.1.3:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-1.1.3.tgz#a1fccc06b58db61fd7a45da2da44f5f3a3e67ba2"
   integrity sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==
@@ -15035,13 +15078,13 @@ terser-webpack-plugin@^1.1.0, terser-webpack-plugin@^1.2.4:
     worker-farm "^1.7.0"
 
 terser@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-4.0.0.tgz#ef356f6f359a963e2cc675517f21c1c382877374"
-  integrity sha512-dOapGTU0hETFl1tCo4t56FN+2jffoKyER9qBGoUFyZ6y7WLoKT0bF+lAYi6B6YsILcGF3q1C2FBh8QcKSCgkgA==
+  version "4.1.2"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-4.1.2.tgz#b2656c8a506f7ce805a3f300a2ff48db022fa391"
+  integrity sha512-jvNoEQSPXJdssFwqPSgWjsOrb+ELoE+ILpHPKXC83tIxOlh2U75F1KuB2luLD/3a6/7K3Vw5pDn+hvu0C4AzSw==
   dependencies:
-    commander "^2.19.0"
+    commander "^2.20.0"
     source-map "~0.6.1"
-    source-map-support "~0.5.10"
+    source-map-support "~0.5.12"
 
 test-exclude@^5.1.0, test-exclude@^5.2.3:
   version "5.2.3"
@@ -15121,9 +15164,9 @@ tiny-emitter@^2.0.0:
   integrity sha512-NB6Dk1A9xgQPMoGqC5CVXn123gWyte215ONT5Pp5a0yt4nlEoO1ZWeCwpncaekPHXO60i47ihFnZPiRPjRMq4Q==
 
 tiny-warning@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.2.tgz#1dfae771ee1a04396bdfde27a3adcebc6b648b28"
-  integrity sha512-rru86D9CpQRLvsFG5XFdy0KdLAvjdQDyZCsRcuu60WtzFylDM3eAWSxEVz5kzL2Gp544XiUvPbVKtOA/txLi9Q==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
 tinycolor2@^1.4.1:
   version "1.4.1"
@@ -15421,10 +15464,10 @@ type-fest@^0.3.0:
   resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.3.1.tgz#63d00d204e059474fe5e1b7c011112bbd1dc29e1"
   integrity sha512-cUGJnCdr4STbePCgqNFbpVNCepa+kAVohJs1sLhxzdH+gnEoOd8VhbYa7pD3zZYGiURWM2xzEII3fQcRizDkYQ==
 
-type-fest@^0.4.1:
-  version "0.4.1"
-  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.4.1.tgz#8bdf77743385d8a4f13ba95f610f5ccd68c728f8"
-  integrity sha512-IwzA/LSfD2vC1/YDYMv/zHP4rDF1usCwllsDpbolT3D4fUepIO7f9K70jjmUewU/LmGUKJcwcVtDCpnKk4BPMw==
+type-fest@^0.6.0:
+  version "0.6.0"
+  resolved "https://registry.yarnpkg.com/type-fest/-/type-fest-0.6.0.tgz#8d2a2370d3df886eb5c90ada1c5bf6188acf838b"
+  integrity sha512-q+MB8nYR1KDLrgr4G5yemftpMC7/QLqVndBmEEdqzmNj5dcFOO4Oo8qlwZE3ULT3+Zim1F8Kq4cBnikNhlCMlg==
 
 type-is@~1.6.17, type-is@~1.6.18:
   version "1.6.18"
@@ -15450,24 +15493,16 @@ typedarray@^0.0.6:
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
 typescript@^3.4.3:
-  version "3.5.2"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.2.tgz#a09e1dc69bc9551cadf17dba10ee42cf55e5d56c"
-  integrity sha512-7KxJovlYhTX5RaRbUdkAXN1KUZ8PwWlTzQdHV6xNqvuFOs7+WBo10TQUqT19Q/Jz2hk5v9TQDIhyLhhJY4p5AA==
+  version "3.5.3"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.5.3.tgz#c830f657f93f1ea846819e929092f5fe5983e977"
+  integrity sha512-ACzBtm/PhXBDId6a6sDJfroT2pOWt/oOnk4/dElG5G33ZL776N3Y6/6bKZJBFpd+b05F3Ct9qDjMeJmRWtE2/g==
 
 ua-parser-js@^0.7.18:
   version "0.7.20"
   resolved "https://registry.yarnpkg.com/ua-parser-js/-/ua-parser-js-0.7.20.tgz#7527178b82f6a62a0f243d1f94fd30e3e3c21098"
   integrity sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw==
 
-uglify-js@3.4.x:
-  version "3.4.10"
-  resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f"
-  integrity sha512-Y2VsbPVs0FIshJztycsO2SfPk7/KAF/T72qzv9u5EpQ4kB2hQoHlhNQTsNyy6ul7lQtqJN/AoWeS23OzEiEFxw==
-  dependencies:
-    commander "~2.19.0"
-    source-map "~0.6.1"
-
-uglify-js@^3.1.4:
+uglify-js@^3.1.4, uglify-js@^3.5.1:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.6.0.tgz#704681345c53a8b2079fb6cec294b05ead242ff5"
   integrity sha512-W+jrUHJr3DXKhrsS7NUVxn3zqMOFn0hL/Ei6v0anCIMoKC93TjcflTagwIHLW7SfMFfiQuktQyFVCFHGUE0+yg==
@@ -15548,14 +15583,14 @@ unified@^7.1.0:
     x-is-string "^0.1.0"
 
 union-value@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.0.tgz#5c71c34cb5bad5dcebe3ea0cd08207ba5aa1aea4"
-  integrity sha1-XHHDTLW61dzr4+oM0IIHulqhrqQ=
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/union-value/-/union-value-1.0.1.tgz#0b6fe7b835aecda61c6ea4d4f02c14221e109847"
+  integrity sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==
   dependencies:
     arr-union "^3.1.0"
     get-value "^2.0.6"
     is-extendable "^0.1.1"
-    set-value "^0.4.3"
+    set-value "^2.0.1"
 
 uniq@^1.0.1:
   version "1.0.1"
@@ -15741,6 +15776,13 @@ util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   resolved "https://registry.yarnpkg.com/util-deprecate/-/util-deprecate-1.0.2.tgz#450d4dc9fa70de732762fbd2d4a28981419a0ccf"
   integrity sha1-RQ1Nyfpw3nMnYvvS1KKJgUGaDM8=
 
+util-promisify@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/util-promisify/-/util-promisify-2.1.0.tgz#3c2236476c4d32c5ff3c47002add7c13b9a82a53"
+  integrity sha1-PCI2R2xNMsX/PEcAKt18E7moKlM=
+  dependencies:
+    object.getownpropertydescriptors "^2.0.3"
+
 util.promisify@1.0.0, util.promisify@^1.0.0, util.promisify@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/util.promisify/-/util.promisify-1.0.0.tgz#440f7165a459c9a16dc145eb8e72f35687097030"
@@ -15764,11 +15806,11 @@ util@^0.11.0:
     inherits "2.0.3"
 
 util@^0.12.0:
-  version "0.12.0"
-  resolved "https://registry.yarnpkg.com/util/-/util-0.12.0.tgz#bb5e3d29ba2703c7add0ad337003be3ca477798a"
-  integrity sha512-pPSOFl7VLhZ7LO/SFABPraZEEurkJUWSMn3MuA/r3WQZc+Z1fqou2JqLSOZbCLl73EUIxuUVX8X4jkX2vfJeAA==
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.12.1.tgz#f908e7b633e7396c764e694dd14e716256ce8ade"
+  integrity sha512-MREAtYOp+GTt9/+kwf00IYoHZyjM8VU4aVrkzUlejyqaIjd2GztVl5V9hGXKlvBKE3gENn/FMfHE5v6hElXGcQ==
   dependencies:
-    inherits "2.0.3"
+    inherits "^2.0.3"
     is-arguments "^1.0.4"
     is-generator-function "^1.0.7"
     object.entries "^1.1.0"
@@ -15868,7 +15910,7 @@ vfile@^3.0.0:
     unist-util-stringify-position "^1.0.0"
     vfile-message "^1.0.0"
 
-vfile@^4.0.0:
+vfile@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/vfile/-/vfile-4.0.1.tgz#fc3d43a1c71916034216bf65926d5ee3c64ed60c"
   integrity sha512-lRHFCuC4SQBFr7Uq91oJDJxlnftoTLQ7eKIpMdubhYcVMho4781a8MWXLy3qZrZ0/STD1kRiKc0cQOHm4OkPeA==
@@ -16053,16 +16095,15 @@ webpack-sources@^1.1.0, webpack-sources@^1.3.0:
     source-map "~0.6.1"
 
 webpack@^4.31.0, webpack@^4.33.0:
-  version "4.35.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.35.0.tgz#ad3f0f8190876328806ccb7a36f3ce6e764b8378"
-  integrity sha512-M5hL3qpVvtr8d4YaJANbAQBc4uT01G33eDpl/psRTBCfjxFTihdhin1NtAKB1ruDwzeVdcsHHV3NX+QsAgOosw==
+  version "4.35.3"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.35.3.tgz#66bc35ef215a7b75e8790f84d560013ffecf0ca3"
+  integrity sha512-xggQPwr9ILlXzz61lHzjvgoqGU08v5+Wnut19Uv3GaTtzN4xBTcwnobodrXE142EL1tOiS5WVEButooGzcQzTA==
   dependencies:
     "@webassemblyjs/ast" "1.8.5"
     "@webassemblyjs/helper-module-context" "1.8.5"
     "@webassemblyjs/wasm-edit" "1.8.5"
     "@webassemblyjs/wasm-parser" "1.8.5"
-    acorn "^6.0.5"
-    acorn-dynamic-import "^4.0.0"
+    acorn "^6.2.0"
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
     chrome-trace-event "^1.0.0"
@@ -16271,9 +16312,9 @@ ws@^6.1.0:
     async-limiter "~1.0.0"
 
 ws@^7.0.0:
-  version "7.0.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.0.1.tgz#1a04e86cc3a57c03783f4910fdb090cf31b8e165"
-  integrity sha512-ILHfMbuqLJvnSgYXLgy4kMntroJpe8hT41dOVWM8bxRuw6TK4mgMp9VJUNsZTEc5Bh+Mbs0DJT4M0N+wBG9l9A==
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.1.0.tgz#0395646c6fcc3ac56abf61ce1a42039637a6bd98"
+  integrity sha512-Swie2C4fs7CkwlHu1glMePLYJJsWjzhl1vm3ZaLplD0h7OMkZyZ6kLTB/OagiU923bZrPFXuDTeEqaEN4NWG4g==
   dependencies:
     async-limiter "^1.0.0"
 
@@ -16296,10 +16337,10 @@ xml-name-validator@^3.0.0:
   resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
   integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
 
-xmlchars@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-1.3.1.tgz#1dda035f833dbb4f86a0c28eaa6ca769214793cf"
-  integrity sha512-tGkGJkN8XqCod7OT+EvGYK5Z4SfDQGD30zAa58OcnAa0RRWgzUEK72tkXhsX1FZd+rgnhRxFtmO+ihkp8LHSkw==
+xmlchars@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.1.1.tgz#ef1a81c05bff629c2280007f12daca21bd6f6c93"
+  integrity sha512-7hew1RPJ1iIuje/Y01bGD/mXokXxegAgVS+e+E0wSi2ILHQkYAH1+JXARwTjZSM4Z4Z+c73aKspEcqj+zPPL/w==
 
 xmlhttprequest-ssl@~1.5.4:
   version "1.5.5"
@@ -16307,9 +16348,9 @@ xmlhttprequest-ssl@~1.5.4:
   integrity sha1-wodrBhaKrcQOV9l+gRkayPQ5iz4=
 
 xtend@^4.0.0, xtend@^4.0.1, xtend@~4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.1.tgz#a5c6d532be656e23db820efb943a1f04998d63af"
-  integrity sha1-pcbVMr5lbiPbgg77lDofBJmNY68=
+  version "4.0.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54"
+  integrity sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==
 
 y18n@^3.2.1:
   version "3.2.1"

From 9c62fc0f0078b3d453b287133db338e4967da806 Mon Sep 17 00:00:00 2001
From: MarcusNotheis <marcus.notheis@sap.com>
Date: Fri, 12 Jul 2019 14:31:31 +0200
Subject: [PATCH 6/6] WIP: Recalculate dummy div when noHeader is set

---
 packages/main/src/components/ObjectPage/index.tsx | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/main/src/components/ObjectPage/index.tsx b/packages/main/src/components/ObjectPage/index.tsx
index 686f0574951..c739a7290d2 100644
--- a/packages/main/src/components/ObjectPage/index.tsx
+++ b/packages/main/src/components/ObjectPage/index.tsx
@@ -135,11 +135,14 @@ export const ObjectPage = forwardRef((props: ObjectPagePropTypes, ref: RefObject
 
   // register resize handler
   useEffect(() => {
-    adjustDummyDivHeight();
     window.addEventListener('resize', adjustDummyDivHeight);
     return window.removeEventListener('resize', adjustDummyDivHeight);
   }, []);
 
+  useEffect(() => {
+    adjustDummyDivHeight();
+  }, [noHeader]);
+
   // scroll to selected section after mount
   useEffect(() => {
     if (mode !== ObjectPageMode.IconTabBar) {
@@ -164,7 +167,6 @@ export const ObjectPage = forwardRef((props: ObjectPagePropTypes, ref: RefObject
 
   useEffect(() => {
     if (mode === ObjectPageMode.Default) {
-      console.log('forced reflow');
       scrollToSectionById(children[selectedSectionIndex].props.id, selectedSectionIndex);
     }
     if (mode === ObjectPageMode.IconTabBar) {