How to use the @xstyled/styled-components.h1 function in @xstyled/styled-components

`

export const NavbarBrandLink = styled.a`
  flex: 0 0 auto;
  cursor: pointer;
  transition: base;
  color: lighter;

  &:hover,
  &:focus {
    color: accent;
    outline: none;
  }
`

export const NavbarBrand = styled.h1`
  font-size: 20;
  font-weight: 500;
  margin: 0;
`

export const NavbarSecondary = styled.div`
  display: none;

  ${up(
    'md',
    css`
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: flex-end;
    `,

import styled from '@xstyled/styled-components'
import { FadeLink } from './Link'

export const Navbar = styled.nav`
  padding: 20 3;
  max-width: container;
  margin: 0 auto;
  display: flex;
`

export const NavbarBrandLink = styled(FadeLink)`
  flex: 1 0;
`

export const NavbarBrand = styled.h1`
  font-size: 20;
  color: darker;
  display: flex;
  align-items: center;
  font-weight: normal;
  margin: 0;
  text-decoration: none;
`

export const NavbarSecondary = styled.div`
  flex-shrink: 0;
`

background-size: cover;
  mix-blend-mode: overlay;
  mask-image: linear-gradient(to top, transparent 5%, black 95%),
    linear-gradient(to right, transparent 20%, black 80%);
  mask-composite: exclude;
  -webkit-mask-composite: source-in;
`

export const HeroIntro = styled.p`
  font-family: monospace;
  font-size: 16;
  margin: 0;
  color: accent;
`

export const HeroTitle = styled.h1`
  margin: 0;
  font-size: 40;
  font-weight: 700;

  strong {
    color: lighter;
  }

  ${up(
    'md',
    css`
      font-size: 70;
    `,
  )}
`

import React from 'react'
import styled from '@xstyled/styled-components'
import { PageContainer } from '../components/Container'
import { SectionDescription } from '../components/Section'

const Title = styled.h1`
  color: lighter;
  margin: 2 0;
`

export default function NotFound() {
  return (
    
      <title>Page not found</title>
      
        We couldn’t find what you were looking for... <br>
        You should leave this page as soon as possible 😰.
      
      <div>
        <a href="https://dribbble.com/shots/2402048-Kylo-is-waiting">
          </a></div>

import styled from '@xstyled/styled-components'
import { FadeLink } from './Link'

export const Navbar = styled.nav`
  padding: 20 3;
  max-width: container;
  margin: 0 auto;
  display: flex;
`

export const NavbarBrandLink = styled(FadeLink)`
  flex: 1 0;
`

export const NavbarBrand = styled.h1`
  font-size: 20;
  color: white;
  display: flex;
  align-items: center;
  font-weight: normal;
  margin: 0;
  text-decoration: none;
`

export const NavbarSecondary = styled.div`
  flex-shrink: 0;
`