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

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)',

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

import { InputProps } from './overlay-input'

export const createEditorInputTheme = createEditorUiTheme(theme => {
  return {
    color: theme.backgroundColor,
    backgroundColor: 'transparent',
    highlightColor: theme.primary.background
  }
})

const EditorInputLabel = styled.label(
  (props: EditorThemeProps & { width: string | undefined }) => {
    const theme = createEditorInputTheme('input', props.theme)

    return {
      width: props.width,
      color: theme.color
    }
  }
)

const EditorInputInner = styled.input(
  (props: EditorThemeProps & { textWidth: string | undefined }) => {
    const theme = createEditorInputTheme('input', props.theme)

    return {
      backgroundColor: theme.backgroundColor,

} from '@edtr-io/ui'
import * as React from 'react'

import { CheckboxProps } from './overlay-checkbox'

export const createEditorCheckboxTheme = createEditorUiTheme(
  theme => {
    return {
      boxSelectedColor: theme.backgroundColor,
      boxDeselectedColor: 'transparent',
      color: theme.backgroundColor
    }
  }
)

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

  return {
    color: theme.color
  }
})

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',

}
)

const CheckboxLabel = styled.label((props: EditorThemeProps) => {
  const theme = createOverlayTheme(props.theme)

  return {
    color: theme.checkbox.color,
    display: 'flex',
    alignItems: 'center',
    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

} from '@edtr-io/ui'
import * as React from 'react'

import { createOverlayTheme } from './settings-overlay'

export const createOverlayCheckboxTheme = createEditorUiTheme(
  theme => {
    return {
      boxSelectedColor: theme.color,
      boxDeselectedColor: theme.backgroundColor,
      color: theme.color
    }
  }
)

const CheckboxLabel = styled.label((props: EditorThemeProps) => {
  const theme = createOverlayTheme(props.theme)

  return {
    color: theme.checkbox.color,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'space-between',
    marginTop: '20px'
  }
})

const CheckboxInlineLabel = styled.label((props: EditorThemeProps) => {
  const theme = createOverlayTheme(props.theme)
  return {
    color: theme.checkbox.color,
    verticalAlign: 'middle',

} from '@edtr-io/ui'
import * as React from 'react'

import { createOverlayTheme } from './settings-overlay'

export const createOverlayTextareaTheme = createEditorUiTheme(
  theme => {
    return {
      backgroundColor: 'transparent',
      color: theme.color,
      borderColor: theme.color,
      highlightColor: theme.primary.background
    }
  }
)
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)