import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/taggedTemplateLiteralLoose";
import _extends from "@babel/runtime/helpers/extends";
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";

var _templateObject, _templateObject2, _templateObject3;

import React from 'react';
import { Typography } from '../Typography';
import styled, { css } from 'styled-components';
export var FormError = (_ref) => {
  var {
    errors,
    fieldName,
    text,
    variant = '7',
    color = 'danger',
    center,
    absolute,
    errorRef
  } = _ref,
      rest = _objectWithoutPropertiesLoose(_ref, ["errors", "fieldName", "text", "variant", "color", "center", "absolute", "errorRef"]);

  var getError = () => {
    var _errors$fieldName;

    if (!errors || !fieldName) return null;
    if (typeof errors[fieldName] === 'string' && errors[fieldName].trim()) return errors[fieldName];
    return ((_errors$fieldName = errors[fieldName]) == null ? void 0 : _errors$fieldName.message) || null;
  };

  return /*#__PURE__*/React.createElement(ErrorWrapper, {
    absolute: absolute,
    center: center,
    className: "mt-1",
    ref: errorRef
  }, /*#__PURE__*/React.createElement(Typography, _extends({
    color: color,
    as: "span",
    variant: variant
  }, rest), text || getError()));
};
var ErrorWrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n  ", "\n\n  ", "\n"])), props => props.center && css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n      text-align: center;\n    "]))), props => props.absolute && css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n      line-height: 0;\n      position: relative;\n\n      & > span {\n        position: absolute;\n        bottom: -0.7rem;\n      }\n    "]))));
//# sourceMappingURL=index.js.map