@atlaskit/editor-common/dist/cjs/ui/Messages/index.js

A package that contains common classes and components for editor and renderer

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.ValidMessage = exports.HelperMessage = exports.ErrorMessage = void 0;
var _react = require("@emotion/react");
var _success = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/success"));
var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
/**
 * @jsxRuntime classic
 * @jsx jsx
 */

// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766

var errorColor = (0, _react.css)({
  color: "var(--ds-text-danger, #AE2E24)"
});
var validColor = (0, _react.css)({
  color: "var(--ds-text-success, #216E4E)"
});

// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
var messageStyle = function messageStyle() {
  return (
    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
    (0, _react.css)({
      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
      fontSize: "".concat(12 / 14, "em"),
      fontStyle: 'inherit',
      // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
      lineHeight: 16 / 12,
      fontWeight: "var(--ds-font-weight-regular, 400)",
      color: "var(--ds-text-subtlest, #626F86)",
      marginTop: "var(--ds-space-050, 4px)",
      display: 'flex',
      justifyContent: 'baseline'
    })
  );
};
var iconWrapperStyle = (0, _react.css)({
  display: 'flex',
  marginRight: "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);
};