// @flow weak

import React from 'react'
import PropTypes from 'prop-types'
import { withStyles } from '@material-ui/core/styles'

const styles = {
  slider: {
    position: 'relative',
    width: '100%',
  },
  container: {
    width: '50%',
    display: 'flex',
    textAlign: 'center',
    fontFamily: 'monospace',
  },
  item: {
    flexGrow: 1,
    border: '1px solid rgba(200,200,200,0.3)',
  },
}

const ValueViewer = ({ classes, values, update, format }) => {
  return (
    <div style={{ marginTop: 10, width: '100%' }}>
      <div className={classes.container}>
        <div className={classes.item}>onChange:</div>
        {values.map((d, i) => (
          <div key={i} className={classes.item}>
            {format(d)}
          </div>
        ))}
      </div>
      <div style={{ marginBottom: 40 }} className={classes.container}>
        <div className={classes.item}>onUpdate:</div>
        {update.map((d, i) => (
          <div key={i} className={classes.item}>
            {format(d)}
          </div>
        ))}
      </div>
    </div>
  )
}

ValueViewer.propTypes = {
  format: PropTypes.func,
  values: PropTypes.array,
  update: PropTypes.array,
  classes: PropTypes.object,
}

ValueViewer.defaultProps = {
  format: d => d,
}

export default withStyles(styles)(ValueViewer)

@@ -139,18 +139,28 @@
 tyles = 
+theme =%3E (
 %7B%0A
-
   slider
@@ -224,24 +224,127 @@
 ontainer: %7B%0A
+    %5Btheme.breakpoints.down('sm')%5D: %7B%0A      width: '75%25',%0A    %7D,%0A    %5Btheme.breakpoints.up('md')%5D: %7B%0A  
     width: '
@@ -345,24 +345,31 @@
 dth: '50%25',%0A
+    %7D,%0A
     display:
@@ -515,17 +515,18 @@
 ',%0A  %7D,%0A
-
 %7D
+)
 %0A%0Aconst 

fix for viewer