primer-react/dist/index.esm.js

Primer react components

import { black, white, gray, blue, green, orange, purple, red, yellow } from 'primer-colors';
import { fontSizes, lineHeights } from 'primer-typography';
import React from 'react';
import { style, themeGet } from 'styled-system';
import system from 'system-components/emotion';
import PropTypes from 'prop-types';
import styled from 'react-emotion';
import classnames from 'classnames';
import Octicon, { TriangleDown, GitMerge, IssueClosed, IssueOpened, IssueReopened } from '@githubprimer/octicons-react';
import { arc, pie } from 'd3-shape';

var colors = {
  bodytext: gray[9],
  black: black,
  white: white,
  gray: gray,
  blue: blue,
  green: green,
  orange: orange,
  purple: purple,
  red: red,
  yellow: yellow,
  blackfade15: 'rgba(27, 31, 35, 0.15)',
  blackfade20: 'rgba(27, 31, 35, 0.20)',
  whitefade15: 'rgba(255, 255, 255, 0.15)',
  state: {
    error: red[5],
    failure: red[5],
    pending: yellow[7],
    queued: yellow[7],
    success: green[5],
    unknown: gray[4]
  }
};
var theme = {
  breakpoints: ['544px', '768px', '1012px', '1280px'],
  maxWidths: {
    small: '544px',
    medium: '768px',
    large: '1012px',
    xlarge: '1280px'
  },
  fonts: {
    normal: fontStack(['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Helvetica', 'Arial', 'sans-serif', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol']),
    mono: fontStack(['SFMono-Regular', 'Consolas', 'Liberation Mono', 'Menlo', 'Courier', 'monospace'])
  },
  colors: colors,
  borders: [0, '1px solid'],
  fontSizes: fontSizes,
  lineHeights: lineHeights,
  radii: [0, 3, 6],
  shadows: {
    small: '0 1px 1px rgba(27, 31, 35, 0.1)',
    medium: '0 1px 5px rgba(27, 31, 35, 0.15)',
    large: '0 1px 15px rgba(27, 31, 35, 0.15)',
    'extra-large': '0 10px 50px rgba(27, 31, 35, 0.07)'
  },
  space: [0, 4, 8, 16, 24, 32, 40, 48]
};

function fontStack(fonts) {
  return fonts.map(function (font) {
    return font.includes(' ') ? "\"".concat(font, "\"") : font;
  }).join(', ');
}

function _typeof(obj) {
  if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") {
    _typeof = function (obj) {
      return typeof obj;
    };
  } else {
    _typeof = function (obj) {
      return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
    };
  }

  return _typeof(obj);
}

function _classCallCheck(instance, Constructor) {
  if (!(instance instanceof Constructor)) {
    throw new TypeError("Cannot call a class as a function");
  }
}

function _defineProperties(target, props) {
  for (var i = 0; i < props.length; i++) {
    var descriptor = props[i];
    descriptor.enumerable = descriptor.enumerable || false;
    descriptor.configurable = true;
    if ("value" in descriptor) descriptor.writable = true;
    Object.defineProperty(target, descriptor.key, descriptor);
  }
}

function _createClass(Constructor, protoProps, staticProps) {
  if (protoProps) _defineProperties(Constructor.prototype, protoProps);
  if (staticProps) _defineProperties(Constructor, staticProps);
  return Constructor;
}

function _defineProperty(obj, key, value) {
  if (key in obj) {
    Object.defineProperty(obj, key, {
      value: value,
      enumerable: true,
      configurable: true,
      writable: true
    });
  } else {
    obj[key] = value;
  }

  return obj;
}

function _extends() {
  _extends = Object.assign || function (target) {
    for (var i = 1; i < arguments.length; i++) {
      var source = arguments[i];

      for (var key in source) {
        if (Object.prototype.hasOwnProperty.call(source, key)) {
          target[key] = source[key];
        }
      }
    }

    return target;
  };

  return _extends.apply(this, arguments);
}

function _objectSpread(target) {
  for (var i = 1; i < arguments.length; i++) {
    var source = arguments[i] != null ? arguments[i] : {};
    var ownKeys = Object.keys(source);

    if (typeof Object.getOwnPropertySymbols === 'function') {
      ownKeys = ownKeys.concat(Object.getOwnPropertySymbols(source).filter(function (sym) {
        return Object.getOwnPropertyDescriptor(source, sym).enumerable;
      }));
    }

    ownKeys.forEach(function (key) {
      _defineProperty(target, key, source[key]);
    });
  }

  return target;
}

function _inherits(subClass, superClass) {
  if (typeof superClass !== "function" && superClass !== null) {
    throw new TypeError("Super expression must either be null or a function");
  }

  subClass.prototype = Object.create(superClass && superClass.prototype, {
    constructor: {
      value: subClass,
      writable: true,
      configurable: true
    }
  });
  if (superClass) _setPrototypeOf(subClass, superClass);
}

function _getPrototypeOf(o) {
  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
    return o.__proto__ || Object.getPrototypeOf(o);
  };
  return _getPrototypeOf(o);
}

function _setPrototypeOf(o, p) {
  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
    o.__proto__ = p;
    return o;
  };

  return _setPrototypeOf(o, p);
}

function _objectWithoutPropertiesLoose(source, excluded) {
  if (source == null) return {};
  var target = {};
  var sourceKeys = Object.keys(source);
  var key, i;

  for (i = 0; i < sourceKeys.length; i++) {
    key = sourceKeys[i];
    if (excluded.indexOf(key) >= 0) continue;
    target[key] = source[key];
  }

  return target;
}

function _objectWithoutProperties(source, excluded) {
  if (source == null) return {};

  var target = _objectWithoutPropertiesLoose(source, excluded);

  var key, i;

  if (Object.getOwnPropertySymbols) {
    var sourceSymbolKeys = Object.getOwnPropertySymbols(source);

    for (i = 0; i < sourceSymbolKeys.length; i++) {
      key = sourceSymbolKeys[i];
      if (excluded.indexOf(key) >= 0) continue;
      if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
      target[key] = source[key];
    }
  }

  return target;
}

function _assertThisInitialized(self) {
  if (self === void 0) {
    throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
  }

  return self;
}

function _possibleConstructorReturn(self, call) {
  if (call && (typeof call === "object" || typeof call === "function")) {
    return call;
  }

  return _assertThisInitialized(self);
}

function _taggedTemplateLiteral(strings, raw) {
  if (!raw) {
    raw = strings.slice(0);
  }

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

function _slicedToArray(arr, i) {
  return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _nonIterableRest();
}

function _toConsumableArray(arr) {
  return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _nonIterableSpread();
}

function _arrayWithoutHoles(arr) {
  if (Array.isArray(arr)) {
    for (var i = 0, arr2 = new Array(arr.length); i < arr.length; i++) arr2[i] = arr[i];

    return arr2;
  }
}

function _arrayWithHoles(arr) {
  if (Array.isArray(arr)) return arr;
}

function _iterableToArray(iter) {
  if (Symbol.iterator in Object(iter) || Object.prototype.toString.call(iter) === "[object Arguments]") return Array.from(iter);
}

function _iterableToArrayLimit(arr, i) {
  var _arr = [];
  var _n = true;
  var _d = false;
  var _e = undefined;

  try {
    for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
      _arr.push(_s.value);

      if (i && _arr.length === i) break;
    }
  } catch (err) {
    _d = true;
    _e = err;
  } finally {
    try {
      if (!_n && _i["return"] != null) _i["return"]();
    } finally {
      if (_d) throw _e;
    }
  }

  return _arr;
}

function _nonIterableSpread() {
  throw new TypeError("Invalid attempt to spread non-iterable instance");
}

function _nonIterableRest() {
  throw new TypeError("Invalid attempt to destructure non-iterable instance");
}

var COMMON = ['color', 'space'];
var TYPOGRAPHY = COMMON.concat( // typography props
'fontFamily', 'fontSize', 'fontWeight', 'lineHeight');
var LAYOUT = COMMON.concat( // layout props
'borders', 'borderColor', 'borderRadius', 'boxShadow', 'display', 'size', 'width', 'height', 'minWidth', 'minHeight', 'maxWidth', 'maxHeight', 'verticalAlign');
var POSITION = [// position props
'position', 'zIndex', 'top', 'right', 'bottom', 'left'];
var FLEX_CONTAINER = LAYOUT.concat( // flex container props (display: flex)
'alignContent', 'alignItems', 'flexWrap', 'flex', 'flexBasis', 'flexDirection', 'justifyContent', 'order');
var FLEX_ITEM = LAYOUT.concat( // flex container child props
'justifySelf', 'alignSelf');
/**
 * Defensively determine whether a component function or class is a "system
 * component" by checking its `systemComponent` flag or whether its
 * `defaultProps.blacklist` is an array.
 */

function isSystemComponent(Component) {
  return Component.systemComponent === true || Component.defaultProps && Array.isArray(Component.defaultProps.blacklist);
}
/**
 * Create a "system component" with the named props from styled-system.
 * The Component (first) argument can either be a React component (a function
 * or a class) or an object representing default props. To pass a custom
 * component with other default props, set the object's `is` key to the
 * component:
 *
 * ```js
 * const Wrapped = withSystemProps({is: Component, m: 2})
 * ```
 *
 * which is the equivalent of:
 *
 * ```js
 * const Wrapped = withSystemProps(Component)
 * Wrapped.defaultProps = {
 *   m: 2
 * }
 * ```
 */

function withSystemProps(Component) {
  var props = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : COMMON;

  if (isSystemComponent(Component)) {
    throw new Error("".concat(Component.name, " is already a system component; can't call withSystemProps() on it"));
  }

  var component = _typeof(Component) === 'object' ? Component : {
    is: Component
  };

  if (typeof component.is === 'function') {
    component.is = guardDoubleRender(component.is);
  }

  var Wrapped = system.apply(void 0, [component].concat(_toConsumableArray(props)));
  Wrapped.displayName = Component.displayName;
  Object.assign(Wrapped.propTypes, Component.propTypes); // Set what system props we use on this component

  Wrapped.systemProps = props;
  Wrapped.systemComponent = true; // Copy over non-system keys from components
  // eg. Tooltip.js => Tooltip.directions Tooltip.alignments

  var _arr = Object.keys(Component);

  for (var _i = 0; _i < _arr.length; _i++) {
    var key = _arr[_i];

    if (!Wrapped.hasOwnProperty(key)) {
      Wrapped[key] = Component[key];
    }
  }

  return withDefaultTheme(Wrapped);
}
/**
 * Set the component's defaultProps.theme to our theme, and returns the
 * component.
 */

function withDefaultTheme(Component) {
  var theme$$1 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : theme;

  if (Component.defaultProps) {
    Component.defaultProps.theme = theme$$1;
  } else {
    Component.defaultProps = {
      theme: theme$$1
    };
  }

  return Component;
}
/**
 * Remove the named keys from a component's propTypes object (if present), and
 * return the component.
 */

function withoutPropTypes(Component, props) {
  var _iteratorNormalCompletion = true;
  var _didIteratorError = false;
  var _iteratorError = undefined;

  try {
    for (var _iterator = props[Symbol.iterator](), _step; !(_iteratorNormalCompletion = (_step = _iterator.next()).done); _iteratorNormalCompletion = true) {
      var prop = _step.value;
      delete Component.propTypes[prop];
    }
  } catch (err) {
    _didIteratorError = true;
    _iteratorError = err;
  } finally {
    try {
      if (!_iteratorNormalCompletion && _iterator.return != null) {
        _iterator.return();
      }
    } finally {
      if (_didIteratorError) {
        throw _iteratorError;
      }
    }
  }

  return Component;
}
var listStyle = style({
  prop: 'listStyle',
  cssProperty: 'list-style',
  key: 'listStyles'
});

function guardDoubleRender(Component) {
  function render(props) {
    var is = props.is,
        rest = _objectWithoutProperties(props, ["is"]);

    if (is === Component || is === render) {
      return React.createElement(Component, rest);
    } else {
      return React.createElement(Component, props);
    }
  }

  return render;
}

var BorderBox = withSystemProps({
  is: 'div',
  bg: 'white',
  border: 1,
  borderColor: 'gray.2',
  borderRadius: 1
}, LAYOUT);

var Box = withSystemProps('div', LAYOUT);

var Position = withSystemProps('div', LAYOUT.concat(POSITION));

function withPosition(position) {
  var WithPosition = function WithPosition(props) {
    return React.createElement(Position, _extends({}, props, {
      position: position
    }));
  };

  WithPosition.displayName = "Position.".concat(position);
  return WithPosition;
}

var Absolute = withPosition('absolute');
var Fixed = withPosition('fixed');
var Relative = withPosition('relative');
var Sticky = withPosition('sticky');
Sticky.defaultProps = {
  top: 0,
  zIndex: 1
};

function _templateObject() {
  var data = _taggedTemplateLiteral(["\n  display: inline-block;\n  overflow: hidden; // Ensure page layout in Firefox should images fail to load\n  line-height: ", ";\n  vertical-align: middle;\n  ", ";\n  ", ";\n"]);

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

  return data;
}
var Avatar = styled(AvatarImage)(_templateObject(), themeGet('lineHeights.condensedUltra', 1), borderRadius, childStyles);
var getBackgroundColor = themeGet('colors.white', '#fff');

function AvatarImage(_ref) {
  var alt = _ref.alt,
      size = _ref.size,
      rest = _objectWithoutProperties(_ref, ["alt", "size"]);

  delete rest.isChild;
  return React.createElement("img", _extends({
    alt: alt,
    width: size,
    height: size
  }, rest));
}

AvatarImage.displayName = "AvatarImage";

function borderRadius(_ref2) {
  var isChild = _ref2.isChild,
      size = _ref2.size;
  var small = isChild === true || size <= 24;
  return {
    borderRadius: small ? '2px' : '3px'
  };
}

function childStyles(_ref3) {
  var isChild = _ref3.isChild,
      rest = _objectWithoutProperties(_ref3, ["isChild"]);

  if (isChild === true) {
    return {
      position: 'absolute',
      right: '-15%',
      bottom: '-9%',
      backgroundColor: getBackgroundColor(rest),
      boxShadow: '-2px -2px 0 rgba(255,255,255,0.8)'
    };
  }
}

Avatar.defaultProps = {
  size: 20
};
Avatar.propTypes = {
  alt: PropTypes.string.isRequired,
  isChild: PropTypes.bool,
  size: PropTypes.number,
  src: PropTypes.string
};
var Avatar$1 = withSystemProps(Avatar, ['space']);

function Button(_ref) {
  var Tag = _ref.is,
      children = _ref.children,
      size = _ref.size,
      block = _ref.block,
      linkStyle = _ref.linkStyle,
      grouped = _ref.grouped,
      scheme = _ref.scheme,
      onClick = _ref.onClick,
      disabled = _ref.disabled,
      className = _ref.className,
      rest = _objectWithoutProperties(_ref, ["is", "children", "size", "block", "linkStyle", "grouped", "scheme", "onClick", "disabled", "className"]);

  var classes = classnames(className, {
    btn: !linkStyle,
    'btn-link': linkStyle,
    'btn-sm': size === 'sm',
    'btn-large': size === 'large',
    'btn-block': block,
    'BtnGroup-item': grouped
  }, scheme ? "btn-".concat(scheme) : null);
  return React.createElement(Tag, _extends({}, rest, {
    type: "button",
    disabled: disabled,
    onClick: disabled ? undefined : onClick,
    className: classes
  }), children);
}

Button.displayName = "Button";
Button.defaultProps = {
  is: 'button'
};
var Button$1 = withSystemProps(Button, COMMON);

var ButtonDanger = function ButtonDanger(props) {
  return React.createElement(Button$1, _extends({}, props, {
    scheme: "danger"
  }));
};

ButtonDanger.displayName = "ButtonDanger";

var ButtonPrimary = function ButtonPrimary(props) {
  return React.createElement(Button$1, _extends({}, props, {
    scheme: "primary"
  }));
};

ButtonPrimary.displayName = "ButtonPrimary";

var ButtonOutline = function ButtonOutline(props) {
  return React.createElement(Button$1, _extends({}, props, {
    scheme: "outline"
  }));
};

ButtonOutline.displayName = "ButtonOutline";

var ButtonLink = function ButtonLink(props) {
  return React.createElement(Button$1, _extends({}, props, {
    linkStyle: true
  }));
};

ButtonLink.displayName = "ButtonLink";

function OcticonButton(_ref) {
  var disabled = _ref.disabled,
      className = _ref.className,
      icon = _ref.icon,
      label = _ref.label,
      onClick = _ref.onClick,
      size = _ref.size;
  var buttonProps = {
    'aria-label': label,
    className: classnames('btn-link text-inherit', className),
    disabled: disabled,
    onClick: onClick
  };
  var octiconProps = {
    icon: icon,
    size: size
  };
  return React.createElement("button", buttonProps, React.createElement(Octicon, octiconProps));
}

OcticonButton.displayName = "OcticonButton";
OcticonButton.defaultProps = {
  label: ''
};
var OcticonButton$1 = withSystemProps(OcticonButton, COMMON);

var oppositeEdge = {
  top: 'Bottom',
  right: 'Left',
  bottom: 'Top',
  left: 'Right'
};
var perpendicularEdge = {
  top: 'Left',
  right: 'Top',
  bottom: 'Left',
  left: 'Top'
};

function getEdgeAlign(location) {
  var _location$split = location.split('-'),
      _location$split2 = _slicedToArray(_location$split, 2),
      edge = _location$split2[0],
      align = _location$split2[1];

  return [edge, align];
}

function getPosition(edge, align, spacing) {
  var _ref;

  var opposite = oppositeEdge[edge].toLowerCase();
  var perp = perpendicularEdge[edge].toLowerCase();
  return _ref = {}, _defineProperty(_ref, opposite, '100%'), _defineProperty(_ref, align || perp, align ? spacing : '50%'), _ref;
}

var getBg = style({
  prop: 'bg',
  key: 'colors'
});
var getBorderColor = style({
  prop: 'borderColor',
  key: 'colors'
});
var getBorderWidth = style({
  prop: 'borderWidth',
  key: 'borderWidths',
  scale: [0, 1]
});
var getSize = style({
  prop: 'size',
  key: 'space'
});

function Caret(props) {
  var _getBg = getBg(props),
      bg = _getBg.bg;

  var _getBorderColor = getBorderColor(props),
      borderColor = _getBorderColor.borderColor;

  var _getBorderWidth = getBorderWidth(props),
      borderWidth = _getBorderWidth.borderWidth;

  var _getSize = getSize(props),
      size = _getSize.size;

  var location = props.location;

  var _getEdgeAlign = getEdgeAlign(location),
      _getEdgeAlign2 = _slicedToArray(_getEdgeAlign, 2),
      edge = _getEdgeAlign2[0],
      align = _getEdgeAlign2[1];

  var perp = perpendicularEdge[edge];

  var style$$1 = _objectSpread({
    pointerEvents: 'none',
    position: 'absolute'
  }, getPosition(edge, align, size), _defineProperty({}, "margin".concat(perp), align ? null : -size)); // note: these arrays represent points in the form [x, y]


  var a = [-size, 0];
  var b = [0, size];
  var c = [size, 0]; // spaces are optional in path `d` attribute, and points are
  // represented in the form `x,y` -- which is what the arrays above
  // become when stringified!

  var triangle = "M".concat(a, "L").concat(b, "L").concat(c, "L").concat(a, "Z");
  var line = "M".concat(a, "L").concat(b, "L").concat(c);
  var transform = {
    top: "translate(".concat([size, size * 2], ") rotate(180)"),
    right: "translate(".concat([0, size], ") rotate(-90)"),
    bottom: "translate(".concat([size, 0], ")"),
    left: "translate(".concat([size * 2, size], ") rotate(90)")
  }[edge];
  return React.createElement("svg", {
    width: size * 2,
    height: size * 2,
    style: style$$1
  }, React.createElement("g", {
    transform: transform
  }, React.createElement("path", {
    d: triangle,
    fill: bg
  }), React.createElement("path", {
    d: line,
    fill: "none",
    stroke: borderColor,
    strokeWidth: borderWidth
  })));
}

Caret.displayName = "Caret";
Caret.locations = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-left', 'bottom-right', 'left', 'left-top', 'left-bottom'];
Caret.defaultProps = {
  bg: BorderBox.defaultProps.bg,
  borderColor: BorderBox.defaultProps.borderColor,
  borderWidth: 1,
  location: 'bottom',
  size: 2
};
var Caret$1 = withDefaultTheme(Caret);

function PointerBox(props) {
  // don't destructure these, just grab them
  var bg = props.bg,
      border = props.border,
      borderColor = props.borderColor;

  var caret = props.caret,
      children = props.children,
      boxProps = _objectWithoutProperties(props, ["caret", "children"]);

  var caretProps = {
    bg: bg,
    borderColor: borderColor,
    borderWidth: border,
    location: caret
  };
  return React.createElement(BorderBox, _extends({}, boxProps, {
    css: {
      position: 'relative'
    }
  }), children, React.createElement(Caret$1, caretProps));
}

PointerBox.displayName = "PointerBox";
PointerBox.systemComponent = true;

var FlexContainer = withSystemProps({
  is: 'div',
  display: 'flex'
}, FLEX_CONTAINER);

function CircleOcticon(props) {
  var size = props.size;

  var icon = props.icon,
      rest = _objectWithoutProperties(props, ["icon"]);

  return React.createElement(FlexContainer, _extends({}, rest, {
    size: size,
    alignItems: "center",
    justifyContent: "center"
  }), React.createElement(Octicon, {
    icon: icon,
    size: size
  }));
}

CircleOcticon.displayName = "CircleOcticon";
CircleOcticon.defaultProps = _objectSpread({}, FlexContainer.defaultProps, {
  size: 32,
  borderRadius: '50%'
});

var ICON_CLASS = 'CircleBadge-icon';

var sizeMapper = function sizeMapper() {
  var size = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'medium';
  if (typeof size === 'number') return size;
  var map = {
    small: 56,
    medium: 96,
    large: 128
  };
  return map[size];
};

var sizeStyles = function sizeStyles(_ref) {
  var size = _ref.size;
  return {
    width: sizeMapper(size),
    height: sizeMapper(size)
  };
};

var CircleBadge = function CircleBadge(_ref2) {
  var _ref2$is = _ref2.is,
      Tag = _ref2$is === void 0 ? 'div' : _ref2$is,
      children = _ref2.children,
      className = _ref2.className,
      rest = _objectWithoutProperties(_ref2, ["is", "children", "className"]);

  var mappedChildren = React.Children.map(children, function (child) {
    var _child$props$classNam = child.props.className,
        className = _child$props$classNam === void 0 ? '' : _child$props$classNam;

    if (!className.includes(ICON_CLASS)) {
      className = classnames(ICON_CLASS, className);
    }

    return React.cloneElement(child, {
      className: className
    });
  });
  var classes = classnames(className, 'CircleBadge');
  return React.createElement(Tag, _extends({
    className: classes
  }, rest), mappedChildren);
};

CircleBadge.displayName = "CircleBadge";
var CircleBadge$1 = withSystemProps(CircleBadge, _toConsumableArray(COMMON).concat([sizeStyles]));

var Details =
/*#__PURE__*/
function (_React$Component) {
  _inherits(Details, _React$Component);

  function Details(props) {
    var _this;

    _classCallCheck(this, Details);

    _this = _possibleConstructorReturn(this, _getPrototypeOf(Details).call(this, props));
    _this.state = {
      open: Boolean(props.open)
    };
    _this.toggle = _this.toggle.bind(_assertThisInitialized(_assertThisInitialized(_this)));
    return _this;
  }

  _createClass(Details, [{
    key: "toggle",
    value: function toggle(event) {
      if (event) {
        event.preventDefault();
      }

      this.setState({
        open: !this.state.open
      });
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          className = _this$props.className,
          children = _this$props.children,
          _this$props$render = _this$props.render,
          render = _this$props$render === void 0 ? getRenderer(children) : _this$props$render,
          rest = _objectWithoutProperties(_this$props, ["className", "children", "render"]);

      var open = this.state.open;
      return React.createElement("details", _extends({}, rest, {
        className: classnames('details-reset', className),
        open: open
      }), render({
        open: open,
        toggle: this.toggle
      }));
    }
  }]);

  return Details;
}(React.Component);

Details.displayName = "Details";

function getRenderer(children) {
  return typeof children === 'function' ? children : function () {
    return children;
  };
}

var Details$1 = withoutPropTypes(withSystemProps(Details, COMMON), ['is']);

var Octicon$1 = withSystemProps(Octicon, COMMON);

function Dropdown(_ref) {
  var title = _ref.title,
      scheme = _ref.scheme,
      children = _ref.children,
      className = _ref.className,
      rest = _objectWithoutProperties(_ref, ["title", "scheme", "children", "className"]);

  var minWidth = rest.minWidth;
  return React.createElement("div", _extends({
    className: classnames(className, 'BtnGroup')
  }, rest), React.createElement(FlexContainer, {
    is: Details$1,
    className: "BtnGroup-form",
    css: {
      position: 'relative'
    }
  }, function (_ref2) {
    var toggle = _ref2.toggle;
    return React.createElement(React.Fragment, null, React.createElement(Button$1, {
      is: "summary",
      scheme: scheme,
      grouped: true,
      onClick: toggle
    }, title, React.createElement(Octicon$1, {
      icon: TriangleDown,
      size: 14,
      ml: title ? 2 : 0
    })), React.createElement(Box, {
      bg: "white",
      border: 1,
      borderColor: "gray.2",
      borderRadius: 1,
      boxShadow: "small",
      mt: 1,
      px: 3,
      py: 2,
      minWidth: minWidth,
      css: {
        position: 'absolute',
        zIndex: 99999
      }
    }, children, React.createElement(Caret$1, {
      location: "top-left"
    })));
  }));
}

Dropdown.displayName = "Dropdown";
var Dropdown$1 = withSystemProps(Dropdown, COMMON);

var defaultColor = '#666';
var getStateColors = themeGet('colors.state', {});

function DonutSlice(props) {
  var children = props.children,
      d = props.d,
      fill = props.fill,
      state = props.state,
      value = props.value;
  var stateColors = getStateColors(props);
  var color = fill || stateColors[state] || stateColors.unknown || defaultColor;
  return React.createElement("path", {
    d: d,
    fill: color,
    "data-value": value
  }, children);
}

DonutSlice.displayName = "DonutSlice";
var DonutSlice$1 = withDefaultTheme(DonutSlice);

function DonutChart(props) {
  var className = props.className,
      data = props.data,
      _props$children = props.children,
      children = _props$children === void 0 ? mapData(data) : _props$children,
      size = props.size;
  var radius = size / 2;
  var innerRadius = radius - 6;
  var pie$$1 = pie().value(function (child) {
    return child.props.value;
  }); // coerce the children into an array

  var childList = React.Children.toArray(children);
  var arcData = pie$$1(childList);
  var arc$$1 = arc().innerRadius(innerRadius).outerRadius(radius);
  var slices = childList.map(function (child, i) {
    return React.cloneElement(child, {
      d: arc$$1(arcData[i])
    });
  });
  return React.createElement("svg", {
    width: size,
    height: size,
    className: className
  }, React.createElement("g", {
    transform: "translate(".concat(radius, ",").concat(radius, ")")
  }, slices));
}

DonutChart.displayName = "DonutChart";

function mapData(data) {
  return Object.keys(data).map(function (key) {
    return React.createElement(DonutSlice$1, {
      key: key,
      state: key,
      value: data[key]
    });
  });
}

DonutChart.defaultProps = {
  size: 30
};
var DonutChart$1 = withSystemProps(DonutChart, ['space']);

var ITEM_CLASS = 'filter-item';
var SELECTED_CLASS = 'selected';

function FilterList(_ref) {
  var children = _ref.children,
      className = _ref.className,
      small = _ref.small;
  var classes = classnames(className, 'filter-list', small && 'small');
  var items = React.Children.map(children, function (child) {
    return React.createElement("li", null, child);
  });
  return React.createElement("ul", {
    className: classes
  }, items);
}

FilterList.displayName = "FilterList";
Object.assign(FilterList, {
  ITEM_CLASS: ITEM_CLASS,
  SELECTED_CLASS: SELECTED_CLASS
});
FilterList.defaultProps = {
  m: 0,
  p: 0
};
var FilterList$1 = withSystemProps(FilterList, COMMON);

function getCountComponent(count) {
  return React.createElement("span", {
    className: "count",
    title: "results"
  }, count);
}

getCountComponent.displayName = "getCountComponent";

function FilterListItem(_ref) {
  var children = _ref.children,
      className = _ref.className,
      count = _ref.count,
      selected = _ref.selected,
      Tag = _ref.is,
      rest = _objectWithoutProperties(_ref, ["children", "className", "count", "selected", "is"]);

  var classes = classnames(ITEM_CLASS, selected && SELECTED_CLASS, className);

  if (typeof rest.to === 'string') {
    rest.activeClassName = SELECTED_CLASS;
  }

  return React.createElement(Tag, _extends({
    className: classes
  }, rest), count && getCountComponent(count), children);
}

FilterListItem.displayName = "FilterListItem";
FilterListItem.defaultProps = {
  is: 'a'
};
var FilterListItem$1 = withSystemProps(FilterListItem, COMMON);

var FlexItem = withSystemProps('div', FLEX_ITEM);

function TextInput(_ref) {
  var autocomplete = _ref.autocomplete,
      block = _ref.block,
      className = _ref.className,
      disabled = _ref.disabled,
      id = _ref.id,
      name = _ref.name,
      onChange = _ref.onChange,
      placeholder = _ref.placeholder,
      required = _ref.required,
      size = _ref.size,
      value = _ref.value;
  var classes = classnames(className, 'form-control', {
    'input-block': block,
    'input-sm': size === 'small',
    'input-lg': size === 'large'
  });
  var inputProps = {
    className: classes,
    'aria-label': placeholder,
    autoComplete: autocomplete,
    onChange: onChange,
    disabled: disabled,
    id: id,
    name: name,
    placeholder: placeholder,
    required: required,
    value: value,
    type: 'text'
  };
  return React.createElement("input", inputProps);
}

TextInput.displayName = "TextInput";
var TextInput$1 = withSystemProps(TextInput, COMMON);

var Heading = withSystemProps({
  is: 'h1',
  fontSize: 5,
  m: 0
}, TYPOGRAPHY);

var colorScheme = function colorScheme(scheme, outline) {
  if (outline) {
    return {
      'Label--outline-green': scheme === 'green'
    };
  } else {
    return {
      'Label--gray': scheme == null || scheme === 'gray',
      'Label--gray-darker': scheme === 'gray-darker',
      'Label--orange': scheme === 'orange',
      'bg-green': scheme === 'green'
    };
  }
};

function Label(_ref) {
  var className = _ref.className,
      outline = _ref.outline,
      scheme = _ref.scheme,
      rest = _objectWithoutProperties(_ref, ["className", "outline", "scheme"]);

  var classes = classnames(className, 'Label', outline && 'Label--outline', colorScheme(scheme, outline));
  return React.createElement("span", _extends({
    className: classes
  }, rest));
}

Label.displayName = "Label";
var Label$1 = withSystemProps(Label, ['space']);

function BranchName(_ref) {
  var children = _ref.children,
      href = _ref.href,
      Tag = _ref.is,
      className = _ref.className;

  // We don't want someone to use href on a non tag
  if (Tag !== 'a') {
    href = null;
  }

  return React.createElement(Tag, {
    href: href,
    className: classnames('branch-name', className)
  }, children);
}

BranchName.displayName = "BranchName";
BranchName.defaultProps = {
  is: 'a'
};
var BranchName$1 = withSystemProps(BranchName, COMMON);

function _templateObject$1() {
  var data = _taggedTemplateLiteral(["\n  ", ";\n  &:hover {\n    text-decoration: underline;\n  }\n  ", ";\n"]);

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

  return data;
}
var styledLink = styled(Link)(_templateObject$1(), textDecoration, color);

function textDecoration(_ref) {
  var nounderline = _ref.nounderline;
  return {
    textDecoration: nounderline ? 'none' : 'underline'
  };
}

function color(_ref2) {
  var muted = _ref2.muted,
      scheme = _ref2.scheme,
      rest = _objectWithoutProperties(_ref2, ["muted", "scheme"]);

  return {
    color: scheme === 'gray-dark' ? themeGet('colors.gray.9', colors.gray[9])(rest) : muted || scheme === 'gray' ? themeGet('colors.gray.6', colors.gray[6])(rest) : themeGet('colors.blue.5', colors.blue[5])(rest)
  };
}

function Link(_ref3) {
  var children = _ref3.children,
      className = _ref3.className,
      rest = _objectWithoutProperties(_ref3, ["children", "className"]);

  return React.createElement("a", _extends({
    className: className
  }, rest), children);
}

Link.displayName = "Link";
var Link$1 = withSystemProps(styledLink, COMMON);

var stateColorMap = {
  open: 'green',
  opened: 'green',
  reopened: 'green',
  closed: 'red',
  merged: 'purple'
};
var stateOcticonMap = {
  open: IssueOpened,
  opened: IssueOpened,
  reopened: IssueReopened,
  closed: IssueClosed,
  merged: GitMerge
};

function getOcticon(state) {
  if (!state) {
    return null;
  }

  return React.createElement(Octicon, {
    icon: stateOcticonMap[state]
  });
}

getOcticon.displayName = "getOcticon";

function getIconComponent(icon, children) {
  if (icon && children) {
    return React.createElement("span", {
      className: "mr-1"
    }, icon);
  } else if (icon) {
    return React.createElement("span", {
      className: "d-flex m-1"
    }, icon);
  }

  return null;
}

function StateLabel(_ref) {
  var state = _ref.state,
      className = _ref.className,
      scheme = _ref.scheme,
      icon = _ref.icon,
      small = _ref.small,
      children = _ref.children;

  if (icon !== false) {
    icon = icon || getOcticon(state);
  }

  var color = scheme || stateColorMap[state];
  var styleProps = {};

  if (color === 'yellow') {
    styleProps.style = {
      backgroundColor: colors.yellow[7]
    };
  }

  var iconComponent = getIconComponent(icon, children);
  var classes = classnames(className, 'State', {
    'State--small': small
  }, color && color !== 'yellow' ? "State--".concat(color) : null);
  return React.createElement("span", _extends({
    className: classes
  }, styleProps), iconComponent, children);
}

StateLabel.displayName = "StateLabel";
var StateLabel$1 = withSystemProps(StateLabel, COMMON);

var stateColorMap$1 = {
  ready: 'green',
  invalid: 'invalid',
  merged: 'purple',
  pending: 'yellow'
};
var octicon = React.createElement(Octicon, {
  icon: GitMerge,
  size: "medium"
});

function MergeStatus(_ref) {
  var state = _ref.state,
      rest = _objectWithoutProperties(_ref, ["state"]);

  return React.createElement(StateLabel$1, _extends({}, rest, {
    scheme: stateColorMap$1[state],
    icon: octicon
  }));
}

MergeStatus.displayName = "MergeStatus";
var MergeStatus$1 = withSystemProps(MergeStatus, COMMON);

var Text = withSystemProps('span', TYPOGRAPHY);

function Tooltip(_ref) {
  var direction = _ref.direction,
      children = _ref.children,
      className = _ref.className,
      text = _ref.text,
      noDelay = _ref.noDelay,
      align = _ref.align,
      wrap = _ref.wrap;
  var classes = classnames(className, 'tooltipped', "tooltipped-".concat(direction), align && "tooltipped-align-".concat(align, "-2"), noDelay && 'tooltipped-no-delay', wrap && 'tooltipped-multiline');
  return React.createElement("span", {
    "aria-label": text,
    className: classes
  }, children);
}

Tooltip.displayName = "Tooltip";
Tooltip.alignments = ['left', 'right'];
Tooltip.directions = ['n', 'ne', 'e', 'se', 's', 'sw', 'w', 'nw'];
Tooltip.defaultProps = {
  direction: 'n'
};
var Tooltip$1 = withSystemProps(Tooltip, COMMON);

function CounterLabel(_ref) {
  var scheme = _ref.scheme,
      children = _ref.children,
      className = _ref.className;
  return React.createElement("span", {
    className: classnames(className, 'Counter', scheme && "Counter--".concat(scheme))
  }, children);
}

CounterLabel.displayName = "CounterLabel";
var CounterLabel$1 = withSystemProps(CounterLabel, COMMON);

var schemeMap = {
  green: 'success',
  red: 'error',
  yellow: 'warn'
};

function Flash(_ref) {
  var children = _ref.children,
      className = _ref.className,
      full = _ref.full,
      scheme = _ref.scheme;
  var classes = classnames(className, 'flash', full && 'flash-full', scheme && "flash-".concat(schemeMap[scheme]));
  return React.createElement("div", {
    className: classes
  }, children);
}

Flash.displayName = "Flash";
var Flash$1 = withSystemProps(Flash, COMMON);

var ITEM_CLASS$1 = 'UnderlineNav-item no-underline';
var SELECTED_CLASS$1 = 'selected';

function UnderlineNav(_ref) {
  var actions = _ref.actions,
      className = _ref.className,
      align = _ref.align,
      children = _ref.children,
      full = _ref.full,
      label = _ref.label;
  var classes = classnames(className, 'UnderlineNav', align && "UnderlineNav--".concat(align), full && 'UnderlineNav--full');
  return React.createElement("nav", {
    className: classes,
    "aria-label": label
  }, React.createElement("div", {
    className: "UnderlineNav-body"
  }, children), actions && React.createElement("div", {
    className: "UnderlineNav-actions"
  }, actions));
}

UnderlineNav.displayName = "UnderlineNav";
// make it possible to destructure these from UnderlineNav:
// const {ITEM_CLASS} = UnderlineNav
Object.assign(UnderlineNav, {
  ITEM_CLASS: ITEM_CLASS$1,
  SELECTED_CLASS: SELECTED_CLASS$1
});
var UnderlineNav$1 = withSystemProps(UnderlineNav, COMMON);

function UnderlineNavLink(_ref) {
  var className = _ref.className,
      selected = _ref.selected,
      Tag = _ref.is,
      rest = _objectWithoutProperties(_ref, ["className", "selected", "is"]);

  var classes = classnames(ITEM_CLASS$1, selected && SELECTED_CLASS$1, className);

  if (typeof rest.to === 'string') {
    rest.activeClassName = SELECTED_CLASS$1;
  }

  return React.createElement(Tag, _extends({
    className: classes
  }, rest));
}

UnderlineNavLink.displayName = "UnderlineNavLink";
UnderlineNavLink.defaultProps = {
  is: 'a'
};
var UnderlineNavLink$1 = withSystemProps(UnderlineNavLink, COMMON);

export { theme, BorderBox, Box, Position, Absolute, Fixed, Relative, Sticky, Avatar$1 as Avatar, Button$1 as Button, ButtonDanger, ButtonPrimary, ButtonOutline, ButtonLink, OcticonButton$1 as OcticonButton, Caret$1 as Caret, PointerBox, CircleOcticon, CircleBadge$1 as CircleBadge, Details$1 as Details, Dropdown$1 as Dropdown, DonutChart$1 as DonutChart, DonutSlice$1 as DonutSlice, FilterList$1 as FilterList, FilterListItem$1 as FilterListItem, FlexContainer, FlexItem, TextInput$1 as TextInput, Heading, Label$1 as Label, BranchName$1 as BranchName, Link$1 as Link, MergeStatus$1 as MergeStatus, Text, Tooltip$1 as Tooltip, CounterLabel$1 as CounterLabel, Flash$1 as Flash, StateLabel$1 as StateLabel, UnderlineNav$1 as UnderlineNav, UnderlineNavLink$1 as UnderlineNavLink };