'use strict';

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

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _parseFlex = require('../../extensions/parseFlex');

var _parseFlex2 = _interopRequireDefault(_parseFlex);

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

var FlexFields = _styledComponents2.default.div.withConfig({
  displayName: 'FlexFields__FlexFields'
})(['display: flex;flex-direction: row;', ''], function (_ref) {
  var flex = _ref.flex;
  return (0, _parseFlex2.default)(flex);
});

FlexFields.usage = '\n# FlexFields\n\nYet another way to layout fields on a row. This one tries to expose more powerful usage of flexbox via simpler implementation.\n\nThere\'s obviously too many ways to layout fields in rows. Perhaps these can be consolidated in some way, or we should choose one that works best for all use cases. This one is really good at supporting cases where you want fields pushed to different sides of the row with space between.\n\n```\n<FlexFields flex="00 1 0 3">\n  <One />\n  <Two />\n  <Three />\n  <Four />\n  <Five />\n</FlexFields>\n```\n\nFlexFields is nestable. So if you want half the row to be one field, and then the other half broken up among 3, you\'d do something like\n\n```\n<FlexFields flex="11">\n  <One />\n  <FlexFields flex="111">\n    <Two />\n    <Three />\n    <Four />\n  </FlexFields>\n</FlexFields>\n```\n';

exports.default = FlexFields;