primer-react/dist/index.umd.js

Primer react components

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('primer-colors'), require('primer-typography'), require('react'), require('styled-system'), require('system-components/emotion'), require('prop-types'), require('react-emotion'), require('classnames'), require('@githubprimer/octicons-react'), require('d3-shape')) :
  typeof define === 'function' && define.amd ? define(['exports', 'primer-colors', 'primer-typography', 'react', 'styled-system', 'system-components/emotion', 'prop-types', 'react-emotion', 'classnames', '@githubprimer/octicons-react', 'd3-shape'], factory) :
  (factory((global.PrimerReact = {}),global.primerColors,global.primerTypography,global.React,global.styledSystem,global.system,global.PropTypes,global.styled,global.classnames,global.Octicon,global.d3Shape));
}(this, (function (exports,primerColors,primerTypography,React,styledSystem,system,PropTypes,styled,classnames,Octicon,d3Shape) { 'use strict';

  React = React && React.hasOwnProperty('default') ? React['default'] : React;
  system = system && system.hasOwnProperty('default') ? system['default'] : system;
  PropTypes = PropTypes && PropTypes.hasOwnProperty('default') ? PropTypes['default'] : PropTypes;
  styled = styled && styled.hasOwnProperty('default') ? styled['default'] : styled;
  classnames = classnames && classnames.hasOwnProperty('default') ? classnames['default'] : classnames;
  var Octicon__default = 'default' in Octicon ? Octicon['default'] : Octicon;

  var colors = {
    bodytext: primerColors.gray[9],
    black: primerColors.black,
    white: primerColors.white,
    gray: primerColors.gray,
    blue: primerColors.blue,
    green: primerColors.green,
    orange: primerColors.orange,
    purple: primerColors.purple,
    red: primerColors.red,
    yellow: primerColors.yellow,
    blackfade15: 'rgba(27, 31, 35, 0.15)',
    blackfade20: 'rgba(27, 31, 35, 0.20)',
    whitefade15: 'rgba(255, 255, 255, 0.15)',
    state: {
      error: primerColors.red[5],
      failure: primerColors.red[5],
      pending: primerColors.yellow[7],
      queued: primerColors.yellow[7],
      success: primerColors.green[5],
      unknown: primerColors.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: primerTypography.fontSizes,
    lineHeights: primerTypography.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 = styledSystem.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(), styledSystem.themeGet('lineHeights.condensedUltra', 1), borderRadius, childStyles);
  var getBackgroundColor = styledSystem.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__default, 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 = styledSystem.style({
    prop: 'bg',
    key: 'colors'
  });
  var getBorderColor = styledSystem.style({
    prop: 'borderColor',
    key: 'colors'
  });
  var getBorderWidth = styledSystem.style({
    prop: 'borderWidth',
    key: 'borderWidths',
    scale: [0, 1]
  });
  var getSize = styledSystem.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 = _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
    }, 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__default, {
      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__default, 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: Octicon.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 = styledSystem.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 = d3Shape.pie().value(function (child) {
      return child.props.value;
    }); // coerce the children into an array

    var childList = React.Children.toArray(children);
    var arcData = pie(childList);
    var arc = d3Shape.arc().innerRadius(innerRadius).outerRadius(radius);
    var slices = childList.map(function (child, i) {
      return React.cloneElement(child, {
        d: arc(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' ? styledSystem.themeGet('colors.gray.9', colors.gray[9])(rest) : muted || scheme === 'gray' ? styledSystem.themeGet('colors.gray.6', colors.gray[6])(rest) : styledSystem.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: Octicon.IssueOpened,
    opened: Octicon.IssueOpened,
    reopened: Octicon.IssueReopened,
    closed: Octicon.IssueClosed,
    merged: Octicon.GitMerge
  };

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

    return React.createElement(Octicon__default, {
      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__default, {
    icon: Octicon.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);

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

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

})));