'use strict';

Object.defineProperty(exports, "__esModule", {
  value: true
});

var _styledComponents = require('styled-components');

var _styledComponents2 = _interopRequireDefault(_styledComponents);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var FieldGroup = _styledComponents2.default.div.withConfig({
  displayName: 'FieldGroup__FieldGroup'
})(['display: flex;flex-direction: row;justify-content: ', ';', ''], function (_ref) {
  var align = _ref.align;
  return align;
}, function (_ref2) {
  var spacing = _ref2.spacing;

  if (spacing instanceof Array) {
    return spacing.map(function (item, idx) {
      return '& > *:nth-child(' + (idx + 1) + ') { flex: ' + item + '; }';
    }).join('\n');
  }
  return '& > * { flex: ' + spacing + '; }';
}); /**
     * A set of form fields which is grouped in a row
     *
     * You can supply `spacing` as a prop. Spacing can be an int (flex size) or an array of ints (flex size per item)
     */

FieldGroup.defaultProps = {
  spacing: '0 1 auto',
  align: 'space-around'
};

FieldGroup.usage = '\n# FieldGroup\n\nFor when you know how you want to lay out fields in a form on one row. For instance, if the first name and last name field need to be on the same row, you\'d use a FieldGroup to join them. You can pass props for arrangement:\n\n* `spacing`: a single value to set the `flex` CSS property of every item, or an array to set them individually.\n* `align`: a verbatim value for `justify-content` on the enclosing flexbox.\n\n```\n<FieldGroup spacing={[2, 1]} align="space-between">\n  <TextField />\n  <ButtonField />\n</FieldGroup>\n```\n';

exports.default = FieldGroup;