old_contents: import React from 'react';
  import merge from 'lodash/merge';
  
  import {
    isObjectOrArray,
    isMember,
  } from '../elements/element';
  
  class Value extends React.Component {
    static propTypes = {
      value: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
        React.PropTypes.bool,
      ]),
      element: React.PropTypes.object,
      style: React.PropTypes.object,
    };
  
    static contextTypes = {
      theme: React.PropTypes.object,
    };
  
    renderStyles() {
      const {
        VALUE_COLOR,
        VALUE_BACKGROUND_COLOR,
        VALUE_BORDER_RADIUS,
      } = this.context.theme;
  
      const styles = {
        float: 'left',
        width: 'auto',
        height: 'auto',
        margin: '0px',
        padding: '0px',
        fontWeight: '600',
        backgroundColor: VALUE_BACKGROUND_COLOR,
        borderRadius: VALUE_BORDER_RADIUS,
        paddingTop: '2px',
        paddingBottom: '2px',
        paddingLeft: '4px',
        paddingRight: '4px',
        fontFamily: 'Source Sans Pro',
        fontSize: '15px',
        color: VALUE_COLOR,
        lineHeight: '19px',
      };
  
      return merge(styles, this.props.style || {});
    }
  
    render() {
      if (this.props.value) {
        return (
          <div style={this.renderStyles()}>
            {this.props.value.toString()}
          </div>
        );
      }
  
      if (this.props.element) {
        const element = this.props.element;
        let value;
  
        if (isObjectOrArray(element.element)) {
          return false;
        } else if (isMember(element.element)) {
          if (isObjectOrArray(element.content.value.element)) {
            return false;
          } else if (element.content.value.content) {
            value = element.content.value.content;
          } else {
            return false;
          }
        } else if (element.content) {
          value = element.content;
        }
  
        if (!value) {
          return false;
        }
  
        return (
          <div style={this.renderStyles()}>
            {value.toString()}
          </div>
        );
      }
  
      return null;
    }
  }
  
  export default Value;
  
new_contents: import React from 'react';
  import merge from 'lodash/merge';
  
  import {
    isObjectOrArray,
    isMember,
  } from '../elements/element';
  
  class Value extends React.Component {
    static propTypes = {
      value: React.PropTypes.oneOfType([
        React.PropTypes.string,
        React.PropTypes.number,
        React.PropTypes.bool,
      ]),
      element: React.PropTypes.object,
      style: React.PropTypes.object,
    };
  
    static contextTypes = {
      theme: React.PropTypes.object,
    };
  
    renderStyles() {
      const {
        VALUE_COLOR,
        VALUE_BACKGROUND_COLOR,
        VALUE_BORDER_RADIUS,
      } = this.context.theme;
  
      const styles = {
        float: 'left',
        width: 'auto',
        height: 'auto',
        margin: '0px',
        padding: '0px',
        fontWeight: '600',
        backgroundColor: VALUE_BACKGROUND_COLOR,
        borderRadius: VALUE_BORDER_RADIUS,
        paddingTop: '2px',
        paddingBottom: '2px',
        paddingLeft: '4px',
        paddingRight: '4px',
        fontFamily: 'Source Sans Pro',
        fontSize: '13px',
        color: VALUE_COLOR,
        lineHeight: '17px',
      };
  
      return merge(styles, this.props.style || {});
    }
  
    render() {
      if (this.props.value) {
        return (
          <div style={this.renderStyles()}>
            {this.props.value.toString()}
          </div>
        );
      }
  
      if (this.props.element) {
        const element = this.props.element;
        let value;
  
        if (isObjectOrArray(element.element)) {
          return false;
        } else if (isMember(element.element)) {
          if (isObjectOrArray(element.content.value.element)) {
            return false;
          } else if (element.content.value.content) {
            value = element.content.value.content;
          } else {
            return false;
          }
        } else if (element.content) {
          value = element.content;
        }
  
        if (!value) {
          return false;
        }
  
        return (
          <div style={this.renderStyles()}>
            {value.toString()}
          </div>
        );
      }
  
      return null;
    }
  }
  
  export default Value;
  
subject: Change font size of the ‘Value’ component.