How to use the @storybook/theming.styled.a function in @storybook/theming

import React, { FunctionComponent } from 'react';

import { styled } from '@storybook/theming';
import { Result } from 'axe-core';

const Wrapper = styled.div({
  padding: 12,
  marginBottom: 10,
});
const Help = styled.p({
  margin: '0 0 12px',
});
const Link = styled.a({
  marginTop: 12,
  textDecoration: 'underline',
  color: 'inherit',
  display: 'block',
});

interface InfoProps {
  item: Result;
}

export const Info: FunctionComponent = ({ item }) => {
  return (
    
      {item.help}
      
        More info...

'&:last-of-type': {
    marginBottom: 40,
  },
});

const List = styled.div();
List.displayName = 'List';

const plain = {
  color: 'inherit',
  display: 'block',
  textDecoration: 'none',
  userSelect: 'none',
};
const PlainRouterLink = styled(RouterLink)(plain);
const PlainLink = styled.a(plain);

const Wrapper = styled.div({});

export const Link = ({ id, prefix, name, children, isLeaf, onClick, onKeyUp }) =>
  isLeaf ? (
    
      {({ viewMode }) => (
        
          {children}

import React from 'react';
import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';

export const DefaultSection = styled.div({});
DefaultSection.displayName = 'DefaultSection';

export const DefaultList = styled.div();
DefaultList.displayName = 'DefaultList';

export const A = styled.a({});
A.displayName = 'A';

export const DefaultFilter = styled(props =&gt; <input placeholder="search...">)({
  width: '100%',
  background: 'transparent',
  border: '1px solid black',
});

export const DefaultMessage = styled.div({});

export const LeafStyle = styled.div(
  {
    minHeight: 24,
    display: 'flex',
    alignItems: 'center',
    flex: 1,

);

const Left = styled.span(({ active, theme }) =>
  active
    ? {
        '& svg': {
          opacity: 1,
        },
        '& path': {
          fill: theme.color.primary,
        },
      }
    : {}
);

const Item = styled.a(
  ({ theme }) => ({
    fontSize: theme.typography.size.s1,
    transition: 'all 150ms ease-out',
    color: transparentize(0.5, theme.color.defaultText),
    textDecoration: 'none',
    cursor: 'pointer',
    justifyContent: 'space-between',

    lineHeight: '18px',
    padding: '7px 15px',
    display: 'flex',
    alignItems: 'center',

    '& > * + *': {
      paddingLeft: 10,
    },

import { styled, withTheme } from '@storybook/theming';

import { StorybookLogo } from '@storybook/components';
import { createMenu, MenuToggle } from '../nav/menu';

const BrandArea = styled.div({
  flex: 1,
  marginRight: 30,
});

const Logo = styled(StorybookLogo)({
  width: 101,
  height: 20,
});

const LogoLink = styled.a({
  display: 'inline-block',
  color: 'inherit',
  textDecoration: 'none',
});

const Head = styled.div({
  display: 'flex',
  alignItems: 'center',
});

const Brand = withTheme(({ theme: { brand } }) => (
  
    {brand || (

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { styled } from '@storybook/theming';

import { Typography, Icons } from '@storybook/components';
import { Location, Link as RouterLink } from '@storybook/router';

export const Section = styled.section({});

export const List = styled.div();
List.displayName = 'List';

export const A = styled.a({
  display: 'flex',
  alignItems: 'center',
  color: 'inherit',
  textDecoration: 'none',
});
A.displayName = 'A';

const FilterField = styled.input(({ theme }) => ({
  height: 30,
  boxSizing: 'border-box',
  width: '100%',
  background: 'transparent',
  border: '0 none',
  color: theme.mainTextColor,
  padding: theme.layoutMargin,
  paddingLeft: 0,

}));

const Logo = styled(StorybookLogo)({
  width: 'auto',
  height: 22,
  display: 'block',
});

const Img = styled.img({
  width: 'auto',
  height: 'auto',
  display: 'block',
  maxWidth: '100%',
});

const LogoLink = styled.a({
  display: 'block',
  width: '100%',
  height: '100%',
  color: 'inherit',
  textDecoration: 'none',
});

const MenuButton = styled(Button)(props => ({
  position: 'relative',
  overflow: 'visible',
  padding: 7,

  ...(props.highlighted && {
    '&:after': {
      content: '""',
      position: 'absolute',