@roo-ui/components/dist/ErrorMessage/ErrorMessage.js

'use strict';

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

var _templateObject = _taggedTemplateLiteral(['\n  padding: ', ';\n  position: relative;\n  width: 100%;\n  display: block;\n  text-align: left;\n\n  &:after {\n    content: \'\';\n    height: 0;\n    width: 0;\n    position: absolute;\n    border: solid transparent;\n    border-width: ', ';\n  }\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n'], ['\n  padding: ', ';\n  position: relative;\n  width: 100%;\n  display: block;\n  text-align: left;\n\n  &:after {\n    content: \'\';\n    height: 0;\n    width: 0;\n    position: absolute;\n    border: solid transparent;\n    border-width: ', ';\n  }\n\n  ', '\n\n  ', '\n\n  ', '\n\n  ', '\n']);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

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

var _styledSystem = require('styled-system');

var _polished = require('polished');

var _Text = require('../Text');

var _Text2 = _interopRequireDefault(_Text);

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

function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }

var ErrorMessage = _Text2.default.extend(_templateObject, (0, _styledSystem.themeGet)('space.3'), (0, _polished.rem)('10px'), function (props) {
  return props.arrow === 'top' && (0, _styledComponents.css)(['&:after{bottom:100%;left:', ';border-bottom-color:', ';}'], (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('colors.ui.errorBackground'));
}, function (props) {
  return props.arrow === 'left' && (0, _styledComponents.css)(['&:after{top:50%;right:100%;transform:translateY(-50%);border-right-color:', ';}'], (0, _styledSystem.themeGet)('colors.ui.errorBackground'));
}, function (props) {
  return props.arrow === 'right' && (0, _styledComponents.css)(['&:after{top:50%;left:100%;transform:translateY(-50%);border-left-color:', ';}'], (0, _styledSystem.themeGet)('colors.ui.errorBackground'));
}, function (props) {
  return props.arrow === 'bottom' && (0, _styledComponents.css)(['&:after{top:100%;left:', ';border-top-color:', ';}'], (0, _styledSystem.themeGet)('space.3'), (0, _styledSystem.themeGet)('colors.ui.errorBackground'));
});

ErrorMessage.propTypes = {
  arrow: _propTypes2.default.oneOf(['top', 'right', 'bottom', 'left'])
};

ErrorMessage.defaultProps = {
  bg: 'ui.errorBackground',
  arrow: null,
  blacklist: Object.keys(ErrorMessage.propTypes)
};

exports.default = ErrorMessage;