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

{ children, ...props },
  ref,
) {
  return (
    
      {menuProps => {children}}
    
  )
})

const InnerMenuItem = styled.buttonBox`
  appearance: none;
  background-color: transparent;
  padding: 2;
  border: 0;
  border-radius: base;
  color: light300;
  font-size: 14;
  display: block;
  width: 100%;
  text-align: left;
  transition: base;
  transition-property: background-color;
  cursor: pointer;
  /* For links */
  text-decoration: none;

{ children, ...props },
  ref,
) {
  return (
    
      {menuProps => {children}}
    
  )
})

const InnerMenuItem = styled.buttonBox`
  appearance: none;
  background-color: transparent;
  padding: 2;
  border: 0;
  border-radius: base;
  color: gray700;
  font-size: 14;
  display: block;
  width: 100%;
  text-align: left;
  transition: base;
  transition-property: background-color;
  cursor: pointer;
  /* For links */
  text-decoration: none;

const Marker = styled(ChevronLeft)`
  width: 18;
  height: 18;
  transition: base;
  transform: rotate(90deg);

  ${up(
    'md',
    css`
      transform: rotate(0);
    `,
  )}
`

const Button = styled.buttonBox`
  font-size: 15;
  font-weight: bold;
  padding: 8 16;
  background-color: transparent;
  border: none;
  color: inherit;
  cursor: pointer;
  transition: base;
  border: 0;
  border-bottom: 1px solid;
  border-color: light400;
  appearance: none;
  margin: 0;
  width: 100%;
  text-align: left;