(function (global, factory) {
  if (typeof define === "function" && define.amd) {
    define(['exports', 'react', 'classnames', 'styled-components', 'polished'], factory);
  } else if (typeof exports !== "undefined") {
    factory(exports, require('react'), require('classnames'), require('styled-components'), require('polished'));
  } else {
    var mod = {
      exports: {}
    };
    factory(mod.exports, global.react, global.classnames, global.styledComponents, global.polished);
    global.index = mod.exports;
  }
})(this, function (exports, _react, _classnames, _styledComponents, _polished) {
  'use strict';

  Object.defineProperty(exports, "__esModule", {
    value: true
  });

  var _react2 = _interopRequireDefault(_react);

  var _classnames2 = _interopRequireDefault(_classnames);

  var _styledComponents2 = _interopRequireDefault(_styledComponents);

  function _interopRequireDefault(obj) {
    return obj && obj.__esModule ? obj : {
      default: obj
    };
  }

  var _templateObject = _taggedTemplateLiteral(['\n    font-size: .8rem;\n    line-height: 1.66667;\n    color: var(--px-headings-label-color,gray);\n'], ['\n    font-size: .8rem;\n    line-height: 1.66667;\n    color: var(--px-headings-label-color,gray);\n']),
      _templateObject2 = _taggedTemplateLiteral(['\n  color: var(--px-headings-value-color, black);\n  margin-top: ', ';\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  color: var(--px-headings-value-color, black);\n  margin-top: ', ';\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']),
      _templateObject3 = _taggedTemplateLiteral(['\n    margin-top: ', '\n  '], ['\n    margin-top: ', '\n  ']),
      _templateObject4 = _taggedTemplateLiteral(['\n  margin-left: ', ';\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n'], ['\n  margin-left: ', ';\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n  ', '\n']),
      _templateObject5 = _taggedTemplateLiteral(['\n    font-size: 1rem;\n  '], ['\n    font-size: 1rem;\n  ']),
      _templateObject6 = _taggedTemplateLiteral(['\n    margin-left: ', '\n  '], ['\n    margin-left: ', '\n  ']);

  function _taggedTemplateLiteral(strings, raw) {
    return Object.freeze(Object.defineProperties(strings, {
      raw: {
        value: Object.freeze(raw)
      }
    }));
  }

  var KvpLabel = _styledComponents2.default.div(_templateObject);

  var KvpValue = _styledComponents2.default.span(_templateObject2, (0, _polished.rem)('-4px'), function (props) {
    return props.size === 'alpha' && (0, _styledComponents.css)(_templateObject3, (0, _polished.rem)('-10px'));
  }, function (props) {
    return props.size === 'beta' && (0, _styledComponents.css)(_templateObject3, (0, _polished.rem)('-6px'));
  }, function (props) {
    return props.size === 'gamma' && (0, _styledComponents.css)(_templateObject3, (0, _polished.rem)('-12px'));
  }, function (props) {
    return props.size === 'delta' && (0, _styledComponents.css)(_templateObject3, (0, _polished.rem)('-8px'));
  }, function (props) {
    return props.size === 'epsilon' && (0, _styledComponents.css)(_templateObject3, (0, _polished.rem)('-2px'));
  });
  KvpValue.displayName = 'KvpValue';

  var KvpUom = _styledComponents2.default.span(_templateObject4, (0, _polished.rem)('0px'), function (props) {
    return props.size === 'value' && (0, _styledComponents.css)(_templateObject5);
  }, function (props) {
    return props.size === 'alpha' && (0, _styledComponents.css)(_templateObject6, (0, _polished.rem)('-12px'));
  }, function (props) {
    return props.size === 'beta' && (0, _styledComponents.css)(_templateObject6, (0, _polished.rem)('-10px'));
  }, function (props) {
    return props.size === 'gamma' && (0, _styledComponents.css)(_templateObject6, (0, _polished.rem)('-8px'));
  }, function (props) {
    return props.size === 'delta' && (0, _styledComponents.css)(_templateObject6, (0, _polished.rem)('-4px'));
  }, function (props) {
    return props.size === 'epsilon' && (0, _styledComponents.css)(_templateObject6, (0, _polished.rem)('-2px'));
  });
  KvpUom.displayName = 'KvpUom';
  var _getAdjustedSize = function _getAdjustedSize(s) {
    return s === 'alpha' ? 'delta' : s === 'beta' ? 'epsilon' : s === 'gamma' ? 'value' : s === 'delta' ? 'value' : 'zeta';
  };

  exports.default = function (_ref) {
    var _ref$label = _ref.label,
        label = _ref$label === undefined ? 'KeyValuePair' : _ref$label,
        value = _ref.value,
        size = _ref.size,
        uom = _ref.uom,
        children = _ref.children;


    return _react2.default.createElement(
      'div',
      { className: 'px-key-value-pair' },
      _react2.default.createElement(
        KvpLabel,
        null,
        label
      ),
      _react2.default.createElement(
        KvpValue,
        { size: _getAdjustedSize(size), className: size },
        value,
        uom && _react2.default.createElement(
          KvpUom,
          { size: _getAdjustedSize(size), className: _getAdjustedSize(size) },
          uom
        )
      )
    );
  };
});