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

const Icon = styled(Icons)(
  {
    height: 12,
    width: 12,
    marginRight: 4,
  },
  ({ status, theme }: any) =>
    status === 'running'
      ? {
          animation: `${theme.animation.rotate360} 1s linear infinite;`,
        }
      : {}
);

const Passes = styled.span<{}>(({ theme }) => ({
  color: theme.color.positive,
}));

const Violations = styled.span<{}>(({ theme }) => ({
  color: theme.color.negative,
}));

const Incomplete = styled.span<{}>(({ theme }) => ({
  color: theme.color.warning,
}));

const centeredStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',

import React from 'react';
import Markdown from 'markdown-to-jsx';
import { styled } from '@storybook/theming';
import getTypeName from './getTypeName';
import Table from './Table';

const Type = styled.span(({ theme }) => ({
  color: theme.color.secondary,
}));

const Value = styled.span(({ theme }) => ({
  color: theme.color.green,
}));

const Required = styled.span(({ theme }) => ({
  color: theme.color.negative,
}));

function Row({ prop }) {
  return (
    
      
        <b>{prop.name}</b>

'&:last-child': {
    borderBottom: '0 none',
  },

  '&:hover, &:focus': {
    outline: '0 none',
    background: '#1ea7fd',
    color: 'white',

    '& svg, & span': {
      color: 'white',
    },
  },
});

export const Badge = styled.span({
  background: '#e1ffd4',
  color: '#66bf3c',
  fontSize: 11,
  whiteSpace: 'nowrap',
  height: 20,
  lineHeight: '20px',
  paddingLeft: 14,
  paddingRight: 14,
  borderRadius: 10,
  margin: '6px 6px 6px 0',
});

export const List = styled.div({
  borderRadius: 4,
  overflow: 'hidden',
});

import React from 'react';
import PropTypes from 'prop-types';
import createFragment from 'react-addons-create-fragment';

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

const ArrayVal = styled.span();
const AttrVal = styled.span();
const ObjectVal = styled.span();
const NumberVal = styled.span();
const StringVal = styled.span();
const BoolVal = styled.span();
const FunctionVal = styled.span();
const OtherVal = styled.span();
const EmptyVal = styled.span();

function indent(breakIntoNewLines, level, isBlock) {
  return (
    breakIntoNewLines && (
      <span>
        <br>
        {`${Array(level).join('  ')}  `}
        {!isBlock &amp;&amp; '  '}
      </span>
    )
  );
}

function PreviewArray({ val, level, maxPropArrayLength, maxPropStringLength, maxPropsIntoLine }) {
  const items = {};
  const breakIntoNewLines = val.length &gt; maxPropsIntoLine;

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

const Center = styled.span({
  flex: 1,
  textAlign: 'left',
  display: 'inline-flex',

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

const CenterText = styled.span(
  {
    flex: 1,
    textAlign: 'center',
  },
  ({ active, theme }) =>
    active

import React, { FC } from 'react';
import Markdown from 'markdown-to-jsx';
import { styled } from '@storybook/theming';
import { transparentize } from 'polished';
import { PropDef } from './PropDef';
import { PropJsDoc } from './PropJsDoc';
import { PropValue } from './PropValue';

export interface PropRowProps {
  row: PropDef;
}

const Name = styled.span({ fontWeight: 'bold' });

const Required = styled.span(({ theme }) => ({
  color: theme.color.negative,
  fontFamily: theme.typography.fonts.mono,
  cursor: 'help',
}));

const Type = styled.div(({ theme }) => ({
  color:
    theme.base === 'light'
      ? transparentize(0.4, theme.color.defaultText)
      : transparentize(0.6, theme.color.defaultText),
  fontFamily: theme.typography.fonts.mono,
  fontSize: `${theme.typography.size.code}%`,
}));

export const PropRow: FC = ({
  row: { name, type, required, description, defaultValue, jsDocTags },

width: 12,
    marginRight: 4,
  },
  ({ status, theme }: any) =>
    status === 'running'
      ? {
          animation: `${theme.animation.rotate360} 1s linear infinite;`,
        }
      : {}
);

const Passes = styled.span<{}>(({ theme }) => ({
  color: theme.color.positive,
}));

const Violations = styled.span<{}>(({ theme }) => ({
  color: theme.color.negative,
}));

const Incomplete = styled.span<{}>(({ theme }) => ({
  color: theme.color.warning,
}));

const centeredStyle = {
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  height: '100%',
};

const Loader = styled(({ className }) => (
  <div></div>

boxSizing: 'border-box',
    height: 25,
    outline: 'none',
    border: '1px solid #f7f4f4',
    borderRadius: 2,
    fontSize: 11,
    padding: 5,
    color: '#444',
  },
  {
    display: 'table-cell',
    flexGrow: 1,
  }
);

const RangeLabel = styled.span({
  paddingLeft: 5,
  paddingRight: 5,
  fontSize: 12,
  whiteSpace: 'nowrap',
});

const RangeWrapper = styled.div({
  display: 'flex',
  alignItems: 'center',
  width: '100%',
});

export default class NumberType extends Component {
  static propTypes = {
    knob: PropTypes.shape({
      name: PropTypes.string,

);
  }
  if (!type) {
    return null;
  }
  return {type};
};
MenuIcon.propTypes = {
  type: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
};
MenuIcon.defaultProps = {
  type: undefined,
};

const IconsWrapper = styled.span({
  height: 14,
  width: 14,
  marginLeft: 9,
  marginTop: 9,
  marginBottom: 8,
  display: 'flex',
  justifyContent: 'center',
  alignItems: 'center',
  overflow: 'hidden',
  position: 'relative',
  color: '#1ea7fd',
  '& > *': {
    margin: 'auto',
    height: '100%',
    width: '100%',
  },

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

import Icons from '../icon/icon';
import { Popout } from './popout';

const text = {
  lineHeight: '14px',
  paddingTop: 9,
  paddingBottom: 9,
};

export const Title = styled.span(text, {
  flex: 1,
  paddingLeft: 10,
  paddingRight: 10,
});

export const MenuIcon = ({ type }) => {
  if (type === '') {
    return ;
  }
  if (typeof type === 'string') {
    return (
      
        
      
    );
  }