How to use the preact-emotion.header function in preact-emotion

padding: 1em;
    }

    main {
        display: flex;
        flex-direction: column;
        padding: 3rem 1.5rem 0;
        margin: 0;

        @media all and (min-width: 1024px) {
            padding: 3rem;
        }
    }
`;

const Header = styled.header`
    flex-shrink: 0;
    margin-bottom: 2em;
    text-align: center;

    img {
        height: 100px;
    }
`;

const Description = styled.p`
    font-size: 18px;
    margin-left: auto;
    margin-right: auto;
    max-width: 60vw;

    h1,

import { h } from 'preact'
import styled from 'preact-emotion'
import { createSelector, createStructuredSelector } from 'reselect'
import { Consumer } from '../controlApp'
import { StopWatch } from './StopWatch'
import { Indicator } from './Indicator'
import { Title } from './Title'
import { SettingsDialog } from './SettingsDialog/SettingsDialog'

const Container = styled.header`
  position: relative;
  height: var(--header-height);
  display: flex;

  > * {
    line-height: calc(var(--header-height) - var(--padding) * 2);
    margin: 0;
    padding: var(--padding);
  }
`

const titleSelector = createSelector(
  (state) => state.presentation.title,
  (title) => ({ title })
)