How to use the frontity.styled.header function in frontity

// All styles :)

export const Post = styled.article`
  &:first-of-type {
    padding: 4rem 0 0;
  }

  @media (min-width: 700px) {
    &:first-of-type {
      padding: 8rem 0 0;
    }
  }
`;

export const PostHeader = styled.header`
  text-align: center;
`;

// Header sizes bases on style.css
const maxWidths = {
  thin: "58rem",
  small: "80rem",
  medium: "100rem"
};

const getMaxWidth = props => maxWidths[props.size] || maxWidths["medium"];

export const SectionContainer = styled.div`
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 4rem);

align-items: center;
  display: flex;
`;
const ContainerMobile = styled.div`
    display: none;
    width: var(--container-percentage);
    max-width: var(--conatiner-wide);
    margin: 0 auto; 
    --padding-top: 1;
    --padding-bottom: 0;
    
    ${inMobile} {
        display: block;
    }
`;
const Container = styled.header`
    background-color: var(--background-brand);
    box-shadow: var(--shadow-sm);
    transition: background-color 500ms;

    .logo {
        --margin-right: 2;
        transform: translateY(4px);
    }

    ${inMobile} {
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 1;

display: flex;
  justify-content: center;
  padding: 0 4rem;
  text-align: center;
  width: 100%;

  @media (min-width: 1000px) {
    width: auto;
    margin-right: 4rem;
    max-width: 50%;
    padding: 0;
    text-align: left;
  }
`;

const PageHeader = styled.header`
  z-index: 1;
  background: ${props => props.bg};
  position: relative;
`;

const HeaderInner = styled.div`
  align-items: center;
  display: flex;
  justify-content: space-between;
  padding: 2.8rem 0;
  max-width: 168rem;
  z-index: 100;
  margin-left: auto;
  margin-right: auto;

  @media (min-width: 700px) {

const Header = ({ label, children, labelColor }) => {
  return (
    
      
        
          {label}: 
          {children}
        
      
    
  );
};

export default Header;

const ArchiveHeader = styled.header`
  color: #000000;
  text-align: center;
  background-color: #fff;
  padding: 4rem 0;

  @media (min-width: 700px) {
    padding: 8rem 0;
  }
`;

const ArchiveHeaderInner = SectionContainer;

const ArchiveTitle = styled.h1`
  font-size: 2.4rem;
  font-weight: 700;
  letter-spacing: -0.026666667em;