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

outline: 'none',
  boxShadow: '0 1px 1px 0 rgba(0,0,0,0.50)',
  '&::-webkit-input-placeholder': {
    color: 'rgba(0,0,0,0.5)'
  }
})

const QuestionIcon = styled(Icon)({
  color: 'black',
  margin: '0 10px -3px 5px',
  '&:hover': {
    color: 'rgba(0,0,0,0.5)'
  }
})

const CheckboxContainer = styled.div({
  float: 'right'
})

// TODO: type and theming. maybe put in editor-ui?
const HelpIcon: React.FunctionComponent = () => (
  <a title="Available Languages" rel="noopener noreferrer" href="https://github.com/conorhastings/react-syntax-highlighter/blob/master/AVAILABLE_LANGUAGES_HLJS.MD">
    
  </a>
)

export const createHighlightEditor = (config: HighlightPluginConfig) =&gt;

import { EdtrIcon, edtrRowsControls, styled } from '@edtr-io/editor-ui'
import { StateTypeReturnType } from '@edtr-io/plugin'
import * as React from 'react'

import { MoveControlsProps } from '.'
import { createRowPluginTheme, rowsState, rowState } from '../..'

const StyledControls = styled.div({
  display: 'flex'
})

const IconContainer = styled.div<{ disabled?: boolean; name: string }>(
  ({ disabled, name, ...props }) => {
    const theme = createRowPluginTheme(name, props.theme)
    return {
      height: '24px',
      marginBottom: '15px',
      cursor: disabled ? 'not-allowed' : 'pointer',
      color: disabled ? theme.menu.secondary.color : theme.menu.primary.color,
      pointerEvents: disabled ? 'none' : undefined,
      '&:hover': {
        color: disabled ? theme.menu.secondary.color : theme.menu.highlightColor
      }
    }

'&::before': {
      position: 'absolute',
      pointerEvents: 'none',
      top: 0,
      right: 0,
      content: '""',
      opacity: 1,
      height: '100%',
      width: '2px',
      backgroundColor: theme.backgroundColor,
      zIndex: 15
    }
  }
})

const StyledIconContainer = styled.div(
  ({ name, ...props }: ThemeProps & { name: string }) => {
    const theme = createRowPluginTheme(name, props.theme)
    return {
      height: '24px',
      opacity: 0.8,
      cursor: 'pointer',
      color: theme.menu.primary.color,

      '&:hover': {
        color: theme.menu.highlightColor
      }
    }
  }
)

const Content = styled.div(

backgroundColor: theme.menu.primary.backgroundColor,
      position: 'fixed',
      top: 0,
      left: 0,
      width: '100%',
      height: '100vh',
      zIndex: 9999,

      '@media (max-width: 1000px)': {
        padding: '25px 20px 155px'
      }
    }
  }
)

const CloseButtonContainer = styled.div({
  position: 'absolute',
  top: '15px',
  right: '15px',
  width: '30px',
  cursor: 'pointer'
})

const PluginList = styled.div({
  display: 'flex',
  justifyContent: 'space-around',
  flexWrap: 'wrap',
  overflowY: 'auto',
  alignItems: 'stretch'
})

interface MenuConnectorProps {

import { StatefulPluginEditorProps } from '@edtr-io/core'
import { Icon, faPlus, faTimes, styled } from '@edtr-io/editor-ui'
import * as React from 'react'
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd'

import { EquationsRenderer } from './renderer'
import { equationsState } from '.'

const DraggableContainer = styled.div({
  border: '1px solid #000',
  margin: '10px',
  background: 'lightgrey',
  padding: '10px'
})

const RemoveButton = styled.button({
  borderRadius: '50%',
  outline: 'none',
  width: '35px',
  height: '35px',
  border: 'none',
  float: 'right',
  background: 'transparent',
  position: 'relative',
  top: '-15px',

import { styled, Icon, faCopy, faTrashAlt } from '@edtr-io/editor-ui'
import { StateTypeReturnType } from '@edtr-io/plugin'
import * as React from 'react'

import { createRowPluginTheme, rowsState } from '../..'

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

const IconContainer = styled.div<{ disabled?: boolean; name: string }>(
  ({ disabled, name, ...props }) => {
    const theme = createRowPluginTheme(name, props.theme)
    return {
      margin: '0 5px 0 15px',
      padding: '5px',

      cursor: disabled ? 'not-allowed' : 'pointer',
      color: disabled ? theme.menu.secondary.color : theme.menu.primary.color,
      '&:hover': {
        color: disabled ? theme.menu.secondary.color : theme.highlightColor
      }

})

const CloseBtnContainer = styled.div<{ name: string }>(({ name, ...props }) => {
  const theme = createRowPluginTheme(name, props.theme)
  return {
    width: '24px',
    height: '24px',
    cursor: 'pointer',
    color: theme.menu.primary.color,
    '&:hover': {
      color: theme.menu.highlightColor
    }
  }
})

const Footer = styled.div<{ name: string }>(({ name, ...props }) => {
  const theme = createRowPluginTheme(name, props.theme)
  return {
    paddingTop: '10px',
    marginTop: '25px',
    borderTop: `1px solid ${theme.lightBackgroundColor}`, //rgba(182,182,182,1)
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between'
  }
})

const CloseCaption = styled.div<{ name: string }>(({ name, ...props }) => {
  const theme = createRowPluginTheme(name, props.theme)
  return {
    color: theme.menu.highlightColor,
    cursor: 'pointer'

const ColWrapper = styled.div({
  cursor: 'auto',
  background: '#fff'
})

const AddButton = styled.button({
  borderRadius: '50%',
  outline: 'none',
  width: '35px',
  height: '35px',
  border: 'none',
  margin: 'auto'
})

const AddButtonWrapper = styled.div({
  textAlign: 'center'
})

export class EquationsEditor extends React.Component<
  StatefulPluginEditorProps
> {
  private addButton = () => {
    const { state } = this.props
    state.steps.insert()
  }
  private removeButton = (index: number) => () => {
    const { state } = this.props
    state.steps.remove(index)
  }
  public render() {
    const { editable, state } = this.props

} from '@edtr-io/ui'

export const Buttoncontainer = styled.div({
  display: 'flex',
  flexDirection: 'row',
  width: '100%'
})

export const Container = styled.div({
  display: 'flex',
  flexDirection: 'row',
  flexWrap: 'wrap',
  position: 'relative'
})

export const ContentComponent = styled.div<{ isHalf?: boolean }>(
  ({ isHalf }: { isHalf?: boolean }) => {
    return {
      //marginTop: '10px',
      boxShadow: '0 1px 3px 0 rgba(0,0,0,0.2)',
      padding: '20px 20px 10px 10px',
      width: isHalf ? '50%' : '100%',
      position: 'relative'
    }
  }
)

const BackgroundSymbol = styled.div({
  position: 'absolute',
  top: '0',
  right: '0',
  color: 'rgba(0,0,0,0.1)',

import { StatefulPluginEditorProps } from '@edtr-io/core'
import * as React from 'react'

import { videoState } from '.'
import { Icon, styled, faFilm } from '@edtr-io/editor-ui'

const VideoPlaceholderWrapper = styled.div({
  position: 'relative',
  width: '100%',
  textAlign: 'center'
})

enum VideoType {
  YouTube = 'youtube',
  Vimeo = 'vimeo',
  Wikimedia = 'wikimedia',
  BR = 'br'
}

const VideoWrapper = styled.div(
  ({ disableCursorEvents }: { disableCursorEvents: boolean }) => ({
    position: 'relative',
    padding: '0',