"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _core = require("@emotion/core");

var _reactDotdotdot = _interopRequireDefault(require("react-dotdotdot"));

var _Box = _interopRequireDefault(require("../Box"));

var _Flex = _interopRequireDefault(require("../Flex"));

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2["default"])(["\n\t0% {\n\t\tbackground-color: rgba(255, 0, 0, 1);\n\t}\n\t100% {\n\t\tbackground-color: rgba(255, 0, 0, 0);\n\t}\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var backgroundFadeout = (0, _core.keyframes)(_templateObject());

var HighlightChangesText = function HighlightChangesText(_ref) {
  var rest = (0, _extends2["default"])({}, _ref);
  return /*#__PURE__*/_react["default"].createElement(_Box["default"], (0, _extends2["default"])({}, rest, {
    sx: {
      animationName: backgroundFadeout,
      animationDuration: '1.5s',
      animationTimingFunction: 'ease-out',
      animationFillMode: 'both'
    }
  }));
};

var ConsoleItem = function ConsoleItem(_ref2) {
  var value = _ref2.value,
      label = _ref2.label,
      rest = (0, _objectWithoutProperties2["default"])(_ref2, ["value", "label"]);
  return /*#__PURE__*/_react["default"].createElement(_Flex["default"], (0, _extends2["default"])({
    sx: {
      py: 2,
      px: 3,
      alignItems: 'center'
    }
  }, rest), /*#__PURE__*/_react["default"].createElement(_Box["default"], {
    as: "span",
    fontSize: 1,
    mb: 0
  }, label), /*#__PURE__*/_react["default"].createElement(HighlightChangesText, {
    title: value,
    key: value,
    as: "span",
    ml: "auto",
    mb: 0,
    fontSize: 1
  }, /*#__PURE__*/_react["default"].createElement(_reactDotdotdot["default"], {
    clamp: 1
  }, value)));
};

process.env.NODE_ENV !== "production" ? ConsoleItem.propTypes = {
  label: _propTypes["default"].string,
  value: _propTypes["default"].any
} : void 0;

var _default = /*#__PURE__*/(0, _react.memo)(ConsoleItem);

exports["default"] = _default;