import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";

var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;

import React from 'react';
import styled from 'styled-components';
import { Modal, Typography, FormError, Button } from '..';
export var ModalForm = (_ref) => {
  var {
    title,
    subtitle,
    buttonLabel = 'Continue',
    onSubmit,
    handleClose,
    Inputs,
    error,
    disableSubmit
  } = _ref;
  return /*#__PURE__*/React.createElement(Modal, {
    open: true,
    handleClose: handleClose,
    maxWidth: "43rem"
  }, /*#__PURE__*/React.createElement(Inner, {
    noValidate: "novalidate",
    onSubmit: onSubmit
  }, /*#__PURE__*/React.createElement(HeaderContainer, null, /*#__PURE__*/React.createElement(HeaderTitle, null, title), subtitle && /*#__PURE__*/React.createElement(HeaderSubTitle, null, subtitle)), /*#__PURE__*/React.createElement(InputContainer, null, Inputs), error && /*#__PURE__*/React.createElement(FormError, {
    center: true,
    text: error
  }), /*#__PURE__*/React.createElement(ButtonContainer, null, /*#__PURE__*/React.createElement(Button, {
    disabled: disableSubmit,
    variant: "primary",
    fullWidth: true,
    type: "submit"
  }, buttonLabel))));
};
var Inner = styled(Typography).attrs({
  variant: 6,
  as: 'form',
  className: 'm-auto'
})(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  background-color: ", ";\n  color: ", ";\n  max-width: 380px;\n  text-align: left;\n"])), (_ref2) => {
  var {
    theme
  } = _ref2;
  return theme.palette.secondary;
}, (_ref3) => {
  var {
    theme
  } = _ref3;
  return theme.palette.hint;
});
var HeaderContainer = styled.header(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose([""])));
var HeaderTitle = styled.h2.attrs({
  className: 'mb-2 pb-1 mx-auto'
})(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n  color: ", ";\n  text-align: center;\n  font-weight: 700;\n"])), (_ref4) => {
  var {
    theme
  } = _ref4;
  return theme.palette.primary;
});
var HeaderSubTitle = styled.div.attrs({
  className: 'pb-4'
})(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n  text-align: center;\n  text-transform: none !important;\n"])));
var InputContainer = styled.div.attrs({
  className: 'my-1'
})(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose([""])));
var ButtonContainer = styled.div.attrs({
  className: 'my-4 py-2'
})(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose([""])));
//# sourceMappingURL=index.js.map