How to use the @storybook/theming.styled.header function in @storybook/theming

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { styled, keyframes } from '@storybook/theming';
import { GlobalHotKeys } from 'react-hotkeys';

import { Form, IconButton, Icons, Tabs } from '@storybook/components';
import SettingsFooter from './SettingsFooter';

import { eventToShortcut, shortcutToHumanString, shortcutMatchesShortcut } from '../libs/shortcut';

const { Button, Input } = Form;

const Header = styled.header(({ theme }) => ({
  marginBottom: 20,
  fontSize: theme.typography.size.m3,
  fontWeight: theme.typography.weight.black,
  alignItems: 'center',
  display: 'flex',
}));

// Grid
export const HeaderItem = styled.div(({ theme }) => ({
  fontWeight: theme.typography.weight.bold,
}));

export const GridHeaderRow = styled.div({
  alignSelf: 'flex-end',
  display: 'grid',
  margin: '10px 0',

lineHeight: '1.2em',
      display: 'block',

      '& > sub': {
        display: 'block',
        paddingTop: 5,
        lineHeight: '1.2em',
        fontSize: 14,
      },
    }),
    p => types[type](p) || {},
    mods.split(',').reduce((acc, item) => ({ ...acc, ...(modifiers[item] || {}) }), {})
  )
);

const Container = styled.header({});

const Heading = ({ type, el, sub, mods, children, ...rest }) => {
  const Element = getElement(el, type, mods.join(','));
  return (
    
      <element>
        {typeof children === 'string' ? <span>{children}</span> : children}
        {sub ? <sub>{sub}</sub> : null}
      </element>
    
  );
};
Heading.propTypes = {
  sub: PropTypes.node,
  type: PropTypes.oneOf(Object.keys(types)),
  mods: PropTypes.arrayOf(PropTypes.oneOf(Object.keys(modifiers))),

StorybookIcon,
  SyntaxHighlighter,
  IconButton,
  Icons,
  Tabs,
  Link,
  DocumentWrapper,
} from '@storybook/components';

import SettingsFooter from './SettingsFooter';

const keyMap = {
  CLOSE: 'escape',
};

const Header = styled.header(({ theme }) => ({
  marginBottom: 20,
  fontSize: theme.typography.size.m3,
  fontWeight: theme.typography.weight.black,
  alignItems: 'center',
  display: 'flex',

  '> svg': {
    height: 32,
    width: 'auto',
    marginRight: 8,
  },
}));

const Subheading = styled.span(({ theme }) => ({
  letterSpacing: '0.35em',
  textTransform: 'uppercase',

export const Container = styled.div(({ theme }) => ({
  padding: 2 * theme.layoutMargin,
}));

export const Jiggle = keyframes`
  from, 0%, 100% to{ transform:translate3d(0,0,0); }
  12.5%, 62.5% { transform:translate3d(-4px,0,0); }
  37.5%, 87.5% {  transform: translate3d(4px,0,0);  }
`;

export const Fade = keyframes`
0%,100% { opacity: 0; }
  50% { opacity: 1; }
`;

export const Title = styled.header(({ theme }) => ({
  display: 'block',
  flex: 1,
  paddingBottom: 20,
  marginBottom: 20,
  borderBottom: theme.mainBorder,
}));

export const TitleText = styled.span({
  fontSize: 30,
  display: 'inline-block',
  lineHeight: '40px',
  fontWeight: 700,
});

export const Wrapper = styled.div({
  display: 'flex',