filledStyle = ({
  theme,
  focusBorderColor,
  errorBorderColor,
  colorMode
}) => {
  const bg = { light: 'gray.100', dark: 'whiteAlpha.50' }
  const hoverColor = { light: 'gray.200', dark: 'whiteAlpha.100' }

  const _focusBorderColor = __get(
    theme.colors,
    focusBorderColor,
    focusBorderColor
  )
  const _errorBorderColor = __get(
    theme.colors,
    errorBorderColor,
    errorBorderColor
  )

  return {
    ...readOnly,
    border: '2px',
    borderColor: 'transparent',
    bg: bg[colorMode],
    _hover: {
      bg: hoverColor[colorMode]
    },
    _disabled: {
      opacity: '0.4',
      cursor: 'not-allowed'
    },
    _focus: {
      zIndex: 1,
      bg: 'transparent',
      borderColor: _focusBorderColor
    },
    _invalid: {
      borderColor: _errorBorderColor
    }
  }
}
styled-system's get takes 3 args
- object or array to read from
- key to get
- fallback value