'use strict';

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

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

var _styledComponents2 = _interopRequireDefault(_styledComponents);

var _fields = require('../fields');

var _BinaryField = require('../fields/BinaryField');

var _FieldWrapper = require('../fields/FieldWrapper');

var _Accordion = require('../Accordion');

var _FormColumn = require('./FormColumn');

var _FormColumn2 = _interopRequireDefault(_FormColumn);

var _FormText = require('./FormText');

var _FormText2 = _interopRequireDefault(_FormText);

var _FlexFields = require('../fields/FlexFields');

var _FlexFields2 = _interopRequireDefault(_FlexFields);

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

// TODO: simplify field layout by wrapping all single fields in a single container element,
// so we don't have to select on so many different types of classes here

var Form = _styledComponents2.default.form.withConfig({ displayName: 'Form' }).withConfig({
  displayName: 'Form__Form'
})(['background: \'transparent\';color: inherit;display: flex;flex-direction: row;flex-wrap: wrap;justify-content: space-between;align-items: stretch;/* these are field groups which help layout rows inside a form */& ', ',& ', ',& > ', ' {flex: 0 0 100%;margin-top: ', 'px;margin-bottom: ', 'px;}& > ', ' {flex: 0 0 50%;}& > ', ' {flex: 1 0 100%;}/* these are inputs directly within a field group inside a form */& ', ' > ', ':not(:first-child),& ', ' > ', ':not(:first-child) {margin-left: ', 'px;}& ', ' > ', ':not(:last-child),& ', ' > ', ':not(:last-child) {margin-right: ', 'px;}/* these are \'loose\' inputs placed directly inside a form */& > ', ',& > ', ',& ', ' ', ',& ', ' ', ' {margin: ', ';margin-top: ', 'px;margin-bottom: ', 'px;/*loose inputs naturally take up about 1/2 width.we don\'t enforce this with margin, since that would cause extra margins on the \'outside\'of the form. Instead, we specify how much space should be between inputs by subtracting itfrom their flex-basis, and then use the Form\'s justify-content and wrapping to make sure thatspace goes between the items on the inside of the form.*/flex: 0 1 calc(50% - ', 'px);}& > ', ':last-child,& > ', ':last-child {margin-bottom: 0;}& > ', ':first-child,& > ', ':first-child {margin-top: 0;}&:invalid button[type="submit"] {background: ', ';color: ', ';border: ', ';cursor: default;box-shadow: none;}&:invalid button[type="submit"]::after {left: 160%;}&:invalid button[type="submit"]::before {left: -60%;}'], _fields.FieldGroup, _FormText2.default, _FlexFields2.default, function (_ref) {
  var theme = _ref.theme;
  return theme.form.elementVerticalSpacing / 2;
}, function (_ref2) {
  var theme = _ref2.theme;
  return theme.form.elementVerticalSpacing / 2;
}, _FormColumn2.default, _Accordion.Container, _fields.FieldGroup, _FieldWrapper.Container, _fields.FieldGroup, _BinaryField.Container, function (_ref3) {
  var theme = _ref3.theme;
  return theme.form.elementHorizontalSpacing / 2;
}, _fields.FieldGroup, _FieldWrapper.Container, _fields.FieldGroup, _BinaryField.Container, function (_ref4) {
  var theme = _ref4.theme;
  return theme.form.elementHorizontalSpacing / 2;
}, _FieldWrapper.Container, _BinaryField.Container, _Accordion.Container, _FieldWrapper.Container, _Accordion.Container, _BinaryField.Container, function (_ref5) {
  var theme = _ref5.theme;
  return theme.input.margin;
}, function (_ref6) {
  var theme = _ref6.theme;
  return theme.form.elementVerticalSpacing / 2;
}, function (_ref7) {
  var theme = _ref7.theme;
  return theme.form.elementVerticalSpacing / 2;
}, function (_ref8) {
  var theme = _ref8.theme;
  return theme.form.elementHorizontalSpacing / 2;
}, _fields.FieldGroup, _FormText2.default, _fields.FieldGroup, _FormText2.default, function (_ref9) {
  var theme = _ref9.theme;
  return theme.button.disabledBG;
}, function (_ref10) {
  var theme = _ref10.theme;
  return theme.button.disabledFG;
}, function (_ref11) {
  var theme = _ref11.theme;
  return theme.button.disabledBorder;
});

Form.usage = '\n# Form\n\nForm is a smart layout component. It tries its best to lay out any Input components you place within it in a reasonable way. There are two ways to put Inputs in forms:\n\n1. \'Loose\' inputs, placed directly in the form. The form will attempt to size these inputs to half the total width of the form.\n\n2. FieldGroups, which take up a full row in the form, and can align / size their child inputs however they want using FlexBox.\n\nRegardless of whether Inputs are \'loose\' or inside a FieldGroup, the Form will try to put the proper padding between them and ensure that the outside edges are not padded.\n\n```\n<FormBox>\n  <Form>\n    <TextInput />\n    <TextInput />\n    <FieldGroup>\n      <ButtonInput />\n      <LinkInput />\n    </FieldGroup>\n  </Form>\n</FormBox>\n```\n';

exports.default = Form;