old_contents: import React, { PureComponent } from 'react';
  import PropTypes from 'prop-types';
  import Box from '../box';
  import WidgetBody from './WidgetBody';
  import WidgetFooter from './WidgetFooter';
  import WidgetHeader from './WidgetHeader';
  import cx from 'classnames';
  import theme from './theme.css';
  
  const SIZES = {
    small: 3,
    medium: 4,
    large: 5,
  };
  
  class Widget extends PureComponent {
    render() {
      const { children, size, ...others } = this.props;
  
      return (
        <Box className={cx(theme['widget'])} {...others}>
          {React.Children.map(children, child => {
            return React.cloneElement(child, {
              padding: SIZES[size],
              ...child.props,
            });
          })}
        </Box>
      );
    }
  }
  
  Widget.propTypes = {
    /** The content to display inside the widget. */
    children: PropTypes.node,
    size: PropTypes.oneOf(Object.keys(SIZES)),
  };
  
  Widget.defaultProps = {
    size: 'medium',
  };
  
  Widget.WidgetBody = WidgetBody;
  Widget.WidgetFooter = WidgetFooter;
  Widget.WidgetHeader = WidgetHeader;
  
  export default Widget;
  
new_contents: import React, { PureComponent } from 'react';
  import PropTypes from 'prop-types';
  import Box from '../box';
  import WidgetBody from './WidgetBody';
  import WidgetFooter from './WidgetFooter';
  import WidgetHeader from './WidgetHeader';
  import cx from 'classnames';
  import theme from './theme.css';
  
  const PADDINGS = {
    small: 3,
    medium: 4,
    large: 5,
  };
  
  class Widget extends PureComponent {
    render() {
      const { children, size, ...others } = this.props;
  
      return (
        <Box className={cx(theme['widget'])} {...others}>
          {React.Children.map(children, child => {
            return React.cloneElement(child, {
              padding: PADDINGS[size],
              ...child.props,
            });
          })}
        </Box>
      );
    }
  }
  
  Widget.propTypes = {
    /** The content to display inside the widget. */
    children: PropTypes.node,
    /** The size wich controls the paddings passed down to our children. */
    size: PropTypes.oneOf(Object.keys(PADDINGS)),
  };
  
  Widget.defaultProps = {
    size: 'medium',
  };
  
  Widget.WidgetBody = WidgetBody;
  Widget.WidgetFooter = WidgetFooter;
  Widget.WidgetHeader = WidgetHeader;
  
  export default Widget;
  
subject: Update PropType description and change to a better name