"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
var _react = require("@emotion/react");
var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
var _colors = require("@atlaskit/theme/colors");
var _typography = require("@atlaskit/theme/typography");
var _templateObject, _templateObject2, _templateObject3, _templateObject4;
/** @jsx jsx */
var errorColor = (0, _react.css)(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-danger, ".concat(_colors.R400, ")"));
var validColor = (0, _react.css)(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n  color: ", ";\n"])), "var(--ds-text-success, ".concat(_colors.G400, ")"));
var messageStyle = function messageStyle() {
  return (0, _react.css)(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n  ", " font-weight: normal;\n  color: ", ";\n  margin-top: ", ";\n  display: flex;\n  justify-content: baseline;\n"])), (0, _typography.h200)(), "var(--ds-text-subtlest, ".concat(_colors.N200, ")"), "var(--ds-space-050, 4px)");
};
var iconWrapperStyle = (0, _react.css)(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  margin-right: ", ";\n"])), "var(--ds-space-050, 4px)");
var HelperMessage = exports.HelperMessage = function HelperMessage(_ref) {
  var children = _ref.children;
  return (0, _react.jsx)("div", {
    css: messageStyle
  }, children);
};
var ErrorMessage = exports.ErrorMessage = function ErrorMessage(_ref2) {
  var children = _ref2.children;
  return (0, _react.jsx)("div", {
    css: function css() {
      return [messageStyle(), errorColor];
    }
  }, (0, _react.jsx)("span", {
    css: iconWrapperStyle
  }, (0, _react.jsx)(_error.default, {
    size: "small",
    label: "error",
    "aria-label": "error"
  })), children);
};
var ValidMessage = exports.ValidMessage = function ValidMessage(_ref3) {
  var children = _ref3.children;
  return (0, _react.jsx)("div", {
    css: function css() {
      return [messageStyle(), validColor];
    }
  }, (0, _react.jsx)("span", {
    css: iconWrapperStyle
  }, (0, _react.jsx)(_success.default, {
    size: "small",
    label: "success"
  })), children);
};