import React from 'react';
import styled from 'styled-components';
import Typography from '../../Atoms/Typography';
import { isElement } from '../../common/utils';
var StyledLabeledValue = styled.div.withConfig({
  displayName: "LabeledValue__StyledLabeledValue",
  componentId: "sc-hatse2-0"
})(["display:flex;flex-direction:column;"]);
var StyledLabel = styled.div.withConfig({
  displayName: "LabeledValue__StyledLabel",
  componentId: "sc-hatse2-1"
})(["margin-bottom:", "px;"], function (p) {
  return p.theme.spacing.unit(1);
});
export var LabeledValue = function LabeledValue(_ref) {
  var children = _ref.children,
    className = _ref.className,
    label = _ref.label;
  var pageHeaderTitle = function pageHeaderTitle() {
    if (isElement(label)) {
      return label;
    }
    return React.createElement(Typography, {
      type: "secondary",
      color: function color(t) {
        return t.color.label;
      }
    }, label);
  };
  return React.createElement(StyledLabeledValue, {
    className: className
  }, React.createElement(StyledLabel, null, pageHeaderTitle()), children);
};