/** @jsx jsx */

import { css, jsx } from '@emotion/react';
import SuccessIcon from '@atlaskit/icon/glyph/editor/success';
import ErrorIcon from '@atlaskit/icon/glyph/error';
import { G400, N200, R400 } from '@atlaskit/theme/colors';
import { h200 } from '@atlaskit/theme/typography';
var errorColor = css({
  color: "var(--ds-text-danger, ".concat(R400, ")")
});
var validColor = css({
  color: "var(--ds-text-success, ".concat(G400, ")")
});
var messageStyle = function messageStyle() {
  return css(h200(), {
    fontWeight: 'normal',
    color: "var(--ds-text-subtlest, ".concat(N200, ")"),
    marginTop: "var(--ds-space-050, 4px)",
    display: 'flex',
    justifyContent: 'baseline'
  });
};
var iconWrapperStyle = css({
  display: 'flex',
  marginRight: "var(--ds-space-050, 4px)"
});
export var HelperMessage = function HelperMessage(_ref) {
  var children = _ref.children;
  return jsx("div", {
    css: messageStyle
  }, children);
};
export var ErrorMessage = function ErrorMessage(_ref2) {
  var children = _ref2.children;
  return jsx("div", {
    css: function css() {
      return [messageStyle(), errorColor];
    }
  }, jsx("span", {
    css: iconWrapperStyle
  }, jsx(ErrorIcon, {
    size: "small",
    label: "error",
    "aria-label": "error"
  })), children);
};
export var ValidMessage = function ValidMessage(_ref3) {
  var children = _ref3.children;
  return jsx("div", {
    css: function css() {
      return [messageStyle(), validColor];
    }
  }, jsx("span", {
    css: iconWrapperStyle
  }, jsx(SuccessIcon, {
    size: "small",
    label: "success"
  })), children);
};