How to use the framer-motion.motion.span function in framer-motion

}};
  ${focusBorderColor}
  ${hoverIfNotDisabled}
`;

const DensedTypography = styled(Typography)`
  line-height: ${LINE_HEIGHT_INFO_BELOW}px;
  display: inline-block;
`;

const InlineFlexbox = styled(Flexbox)`
  display: flex;
  width: 100%;
`;

const BottomWrapper = styled(motion.span)`
  width: 100%;
`;

const CleanFlexbox = React.forwardRef((props: any, ref: React.Ref) => (
  
));

const InnerWrapperFlexbox = styled(CleanFlexbox)`
  position: relative;
  ${height}
  box-sizing: border-box;

  ${outerFlexboxBorderColor}

  background-color: #ffffff;
  box-shadow: 0 1px 3px ${p => p.theme.color.shadowInput};

import { Typography, Spinner } from '../../..';

const LOADING_ANIMATION_DURATION = 0.2;

const getSpinnerSize = (size: ButtonContentProps['size']) => {
  switch (size) {
    case 's':
      return 3;
    case 'm':
      return 5;
    default:
      return 6;
  }
};

const SpinnerAnimation = styled(motion.span)`
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
`;

export const ButtonContent: ButtonContentComponent = props => {
  const { children, colorFn, loading, variant, size } = props;
  const theme = useContext(ThemeContext);

  const content = (

{query.me.name}
    {query.users({ limit: 10 }).map(user => (
      <div>{user.name}</div>
    ))}
  
)`

const generatedQuery = `query App {
  me { name }
  users(limit: 10) {
    id
    name
  }
}`

const GetStarted = styled(motion.span)`
  display: inline-block;
`

const delay = t =&gt; new Promise(resolve =&gt; setTimeout(resolve, t))

export default () =&gt; {
  const context = useDocusaurusContext()
  const baseUrl = useBaseUrl() || ''
  const { siteConfig = {} } = context

  const info = useAnimation()
  const app = useAnimation()
  const queries = useAnimation()
  const arrow = useAnimation()
  const features = useAnimation()