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

import React from 'react'
import styled, { css, up } from '@xstyled/styled-components'
import { useDialogState, Dialog, DialogDisclosure } from 'reakit/Dialog'
import { Container } from './Container'
import { Burger } from './Burger'
import { DarkModeSwitcher } from './DarkModeSwitcher'

export const Nav = styled.nav`
  padding: 3 3;
  margin: 0 auto;
  position: fixed;
  background-color: navbar-bg;
  box-shadow: soft;
  top: 0;
  left: 0;
  right: 0;
  height: 60;
  z-index: 200;
  backdrop-filter: blur(8px);

  ${up(
    'md',
    css`
      position: initial;

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;

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;