import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _extends from "@babel/runtime/helpers/esm/extends";
import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";

function _templateObject() {
  var data = _taggedTemplateLiteral(["\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;
}

import React, { memo } from 'react';
import PropTypes from 'prop-types'; // import { FormattedNumber } from 'gatsby-theme-fast-ai';

import { keyframes } from '@emotion/core';
import Dotdotdot from 'react-dotdotdot';
import Box from '../Box';
import Flex from '../Flex';
var backgroundFadeout = keyframes(_templateObject());

var HighlightChangesText = function HighlightChangesText(_ref) {
  var rest = _extends({}, _ref);

  return /*#__PURE__*/React.createElement(Box, _extends({}, 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 = _objectWithoutProperties(_ref2, ["value", "label"]);

  return /*#__PURE__*/React.createElement(Flex, _extends({
    sx: {
      py: 2,
      px: 3,
      alignItems: 'center'
    }
  }, rest), /*#__PURE__*/React.createElement(Box, {
    as: "span",
    fontSize: 1,
    mb: 0
  }, label), /*#__PURE__*/React.createElement(HighlightChangesText, {
    title: value,
    key: value,
    as: "span",
    ml: "auto",
    mb: 0,
    fontSize: 1
  }, /*#__PURE__*/React.createElement(Dotdotdot, {
    clamp: 1
  }, value)));
};

process.env.NODE_ENV !== "production" ? ConsoleItem.propTypes = {
  label: PropTypes.string,
  value: PropTypes.any
} : void 0;
export default /*#__PURE__*/memo(ConsoleItem);