How to use the @edtr-io/ui.styled.span function in @edtr-io/ui

overflowWrap: undefined,
    ...(props.inline
      ? {
          display: 'inline-block'
        }
      : {
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'center',
          marginTop: '0.9em',
          marginBottom: '0.9em'
        })
  }
})

const KeySpan = styled.span({
  background: '#ddd',
  padding: '2px 4px',
  borderRadius: 5,
  color: '#1d1c1d',
  textAlign: 'center',
  minWidth: 20
})

const HelpText = (
  <>
    Tastenkürzel:
    <br>
    <br>
    <p>
      Bruch: /
    </p>

import { OverlayInputProps } from '@edtr-io/plugin-toolbar'
import { styled } from '@edtr-io/ui'
import * as React from 'react'

import { DefaultPluginToolbarConfig } from './config'

const OverlayInputLabel = styled.label({
  color: 'rgba(51,51,51,0.95)',
  margin: '20px auto 0px',
  display: 'flex',
  justifyContent: 'space-between',
  alignItems: 'center'
})

const OverlayInputLabelInner = styled.span({ width: '20%' })

const OverlayInputInner = styled.input<{ config: DefaultPluginToolbarConfig }>(
  ({ config }) => {
    return {
      backgroundColor: '#ffffff',
      border: 'none',
      borderBottom: '2px solid rgba(51,51,51,0.95)',
      color: 'rgba(51,51,51,0.95)',
      width: '75%',
      '&:focus': {
        outline: 'none',
        borderBottom: `2px solid ${config.primaryColor}`
      }
    }
  }
)

const theme = createOverlayTheme(props.theme)
  return {
    boxShadow: '0 2px 4px 0 rgba(0,0,0,0.50)',
    backgroundColor: theme.backgroundColor,
    color: theme.color,
    borderRadius: '4px',
    '& a': {
      color: theme.color,
      '&:hover': {
        color: theme.highlightColor
      }
    }
  }
})

const InlinePreview = styled.span({
  padding: '0px 8px'
})
const ChangeButton = styled.div((props: EditorThemeProps) => {
  const theme = createOverlayTheme(props.theme)

  return {
    padding: '5px 5px 5px 10px',
    display: 'inline-block',
    borderLeft: `2px solid ${theme.color}`,
    cursor: 'pointer',
    margin: '2px',
    '&:hover': {
      color: theme.highlightColor
    }
  }
})

}
  }
)
const TextareaLabel = styled.label(props => {
  const theme = createOverlayTheme(props.theme)

  return {
    color: theme.textarea.color,
    display: 'flex',
    flexDirection: 'row',
    margin: '20px auto 0',
    justifyContent: 'space-between'
  }
})

const TextareaLabelInner = styled.span({ width: '20%' })

const TextareaInner = styled.textarea(props => {
  const theme = createOverlayTheme(props.theme)

  return {
    backgroundColor: theme.textarea.backgroundColor,
    border: `2px solid ${theme.textarea.borderColor}`,
    marginTop: '5px',
    borderRadius: '5px',
    color: theme.textarea.color,
    padding: '10px',
    resize: 'none',
    outline: 'none',
    minHeight: '100px',
    width: '75%',
    '&:focus': {

const CheckboxToggleContainer = styled.div((props: EditorThemeProps) => {
  const theme = createEditorCheckboxTheme('checkbox', props.theme)

  return {
    cursor: 'pointer',
    margin: '0 5px -1px 5px',
    border: `2px solid ${theme.color}`,
    borderRadius: '15%',
    width: '15px',
    height: '15px',
    display: 'inline-block',
    backgroundColor: theme.boxDeselectedColor
  }
})

const CheckboxLabelInner = styled.span({ width: '5%' })

const CheckboxToggle = styled.div<{ value?: boolean }>(
  ({ value, ...props }: { value?: boolean } & EditorThemeProps) => {
    const theme = createEditorCheckboxTheme('checkbox', props.theme)

    return {
      opacity: value ? 1 : 0,
      content: '',
      position: 'absolute',
      fontWeight: 'bold',
      margin: '3px 0 0 2px',
      width: '10px',
      height: '5px',
      border: `2px solid ${theme.boxSelectedColor}`,
      borderTop: 'none',
      borderRight: 'none',

backgroundColor: active
        ? theme.suggestions.background.highlight
        : theme.suggestions.background.default,
      borderRadius: '4px',
      '&:hover': {
        background: theme.suggestions.background.highlight
      }
    }
  }
)

const Container = styled.div({
  padding: '10px'
})

const StyledText = styled.span<{ highlight: boolean; config: TextConfig }>(
  ({ highlight, config }) => {
    const { theme } = config
    return {
      color: highlight
        ? theme.suggestions.text.highlight
        : theme.suggestions.text.default
    }
  }
)

export class Suggestions extends React.Component {
  public render() {
    return (
      
        {this.props.options.length === 0
          ? 'keine Einträge vorhanden'

)
}

const ColorPaletteIcon = styled.div<{ color: string }>(props => {
  return {
    display: 'inline-block',
    backgroundColor: props.color,
    borderRadius: ' 100%',
    width: '19px',
    height: '19px',
    margin: '3px',
    verticalAlign: 'middle'
  }
})

const ColoredText = styled.span({
  position: 'relative',
  verticalAlign: 'middle',
  display: 'inline-block'
})

const FlexContainer = styled.span({
  display: 'flex',
  alignItems: 'center',
  flexDirection: 'column'
})

const Line = styled.span<{ index?: number }>(
  (props: ThemeProps & { index?: number }) => {
    const theme = createTextPluginTheme(name, props.theme)
    const { colors, defaultColor } = theme.plugins.colors
    return {

justifyContent: 'space-between',
    marginTop: '20px'
  }
})

const CheckboxInlineLabel = styled.label((props: EditorThemeProps) => {
  const theme = createOverlayTheme(props.theme)
  return {
    color: theme.checkbox.color,
    verticalAlign: 'middle',
    margin: '5px 10px',
    display: 'inline-block'
  }
})

const CheckboxInlineLabelInner = styled.span({
  marginRight: '10px',
  verticalAlign: 'middle'
})

const CheckboxToggleContainer = styled.div<{
  value?: boolean
}>(({ value, ...props }: { value?: boolean } & EditorThemeProps) => {
  const theme = createOverlayTheme(props.theme)

  return {
    cursor: 'pointer',
    border: `2px solid ${theme.checkbox.color}`,
    borderRadius: '15%',
    width: '20px',
    height: '20px',
    display: 'inline-block',

backgroundColor: props.color,
    borderRadius: ' 100%',
    width: '19px',
    height: '19px',
    margin: '3px',
    verticalAlign: 'middle'
  }
})

const ColoredText = styled.span({
  position: 'relative',
  verticalAlign: 'middle',
  display: 'inline-block'
})

const FlexContainer = styled.span({
  display: 'flex',
  alignItems: 'center',
  flexDirection: 'column'
})

const Line = styled.span<{ index?: number }>(
  (props: ThemeProps & { index?: number }) => {
    const theme = createTextPluginTheme(name, props.theme)
    const { colors, defaultColor } = theme.plugins.colors
    return {
      border: `2px solid ${
        props.index === undefined
          ? defaultColor
          : colors[props.index % colors.length]
      }`,
      borderRadius: '4px',

return {
    cursor: 'pointer',
    border: `2px solid ${theme.checkbox.color}`,
    borderRadius: '15%',
    width: '20px',
    height: '20px',
    display: 'inline-block',
    verticalAlign: 'middle',
    backgroundColor: value
      ? theme.checkbox.boxSelectedColor
      : theme.checkbox.boxDeselectedColor
  }
})

const CheckboxLabelInner = styled.span({ width: '20%' })

const CheckboxToggle = styled.div<{ value?: boolean }>(
  ({ value, ...props }: { value?: boolean } & EditorThemeProps) => {
    const theme = createOverlayTheme(props.theme)

    return {
      opacity: value ? 1 : 0,
      content: '',
      position: 'absolute',
      fontWeight: 'bold',
      width: '20px',
      height: '10px',
      border: `3px solid ${theme.checkbox.boxDeselectedColor}`,
      borderTop: 'none',
      borderRight: 'none',
      borderRadius: '1px',