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

import {
  styled,
  createRendererUiTheme,
  InputExerciseFieldTheme,
  RendererThemeProps
} from '@edtr-io/ui'

import { ExerciseState, getColor } from './interactive-behaviour'

const createInputExerciseFieldTheme = createRendererUiTheme<
  InputExerciseFieldTheme
>(theme => {
  return {
    borderStyle: '3px solid',
    borderColor: theme.primary.background,
    correctBorderColor: theme.success.background,
    wrongBorderColor: theme.danger.background
  }
})

export const InputExerciseField = styled.input<
  { exerciseState: ExerciseState; width?: number } & RendererThemeProps
>(props => {
  const theme = createInputExerciseFieldTheme('inputExerciseField', props.theme)
  return {
    border: 'none',

RendererThemeProps,
  styled,
  createRendererUiTheme,
  SubmitButtonTheme
} from '@edtr-io/ui'
import * as React from 'react'

import { Icon, faSmile, faCheckCircle } from './icon'

enum ExerciseState {
  Default = 1,
  SolvedRight,
  SolvedWrong
}

const createSubmitButtonTheme = createRendererUiTheme(
  theme => {
    return {
      backgroundColor: '#337ab7',
      hoverBackgroundColor: '#d9edf7',
      color: theme.backgroundColor,
      correctBackgroundColor: theme.success.background,
      wrongBackgroundColor: theme.danger.background
    }
  }
)

const getBackgroundColor = (
  theme: SubmitButtonTheme,
  exerciseState: ExerciseState
) => {
  switch (exerciseState) {

styled,
  createRendererUiTheme,
  SubmitButtonTheme,
  Icon,
  faSmile,
  faCheckCircle
} from '@edtr-io/ui'
import * as React from 'react'

enum ExerciseState {
  Default = 1,
  SolvedRight,
  SolvedWrong
}

const createSubmitButtonTheme = createRendererUiTheme(
  theme => {
    return {
      backgroundColor: '#337ab7',
      hoverBackgroundColor: '#d9edf7',
      color: theme.backgroundColor,
      correctBackgroundColor: theme.success.background,
      wrongBackgroundColor: theme.danger.background
    }
  }
)

const getBackgroundColor = (
  theme: SubmitButtonTheme,
  exerciseState: ExerciseState
) => {
  switch (exerciseState) {