@atlaskit/avatar - npm Package Compare versions

Comparing version 2.1.5 to 3.0.0

CHANGELOG.md

@@ -1,6 +0,23 @@
-<a name="2.1.5"></a>
-## 2.1.5 (2017-04-04)
+<a name="3.0.0"></a>
+# 3.0.0 (2017-04-13)
 
 
 
+<a name="3.0.0"></a>
+# 3.0.0 (2017-04-13)
+
+
+### Code Refactoring
+
+* **refactor:** refactor avatar to styled-components ([21a371c](https://bitbucket.org/atlassian/atlaskit/commits/21a371c))
+
+
+### BREAKING CHANGES
+
+* **refactor:** added peerDependency "styled-components", removed dependency "classnames"
+
+ISSUES CLOSED: AK-2099
+
+
+
 <a name="2.1.5"></a>
@@ -7,0 +24,0 @@ ## 2.1.5 (2017-04-04)

dist/bundle-cjs.js

@@ -68,6 +68,4 @@ module.exports = /******/
 function(module, exports, __webpack_require__) {
-    module.exports = __webpack_require__(3);
+    module.exports = __webpack_require__(1);
 }, /* 1 */
-, /* 2 */
-, /* 3 */
 /***/
@@ -83,6 +81,18 @@ function(module, exports, __webpack_require__) {
         value: !0
-    }), exports.Presence = exports.default = void 0;
-    var _Avatar = __webpack_require__(4), _Avatar2 = _interopRequireDefault(_Avatar), _Presence2 = __webpack_require__(18), _Presence3 = _interopRequireDefault(_Presence2);
-    exports.default = _Avatar2.default, exports.Presence = _Presence3.default;
-}, /* 4 */
+    });
+    var _Avatar = __webpack_require__(2);
+    Object.defineProperty(exports, "default", {
+        enumerable: !0,
+        get: function() {
+            return _interopRequireDefault(_Avatar).default;
+        }
+    });
+    var _Presence = __webpack_require__(16);
+    Object.defineProperty(exports, "Presence", {
+        enumerable: !0,
+        get: function() {
+            return _interopRequireDefault(_Presence).default;
+        }
+    });
+}, /* 2 */
 /***/
@@ -98,6 +108,9 @@ function(module, exports, __webpack_require__) {
         value: !0
-    }), exports.SIZE = void 0;
-    var _defineProperty2 = __webpack_require__(5), _defineProperty3 = _interopRequireDefault(_defineProperty2), _getPrototypeOf = __webpack_require__(6), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(7), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(8), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(9), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(10), _inherits3 = _interopRequireDefault(_inherits2), _classnames = __webpack_require__(11), _classnames2 = _interopRequireDefault(_classnames), _utilSharedStyles = __webpack_require__(12), _styles = __webpack_require__(13), _styles2 = _interopRequireDefault(_styles), _react = __webpack_require__(17), _react2 = _interopRequireDefault(_react), _Presence = __webpack_require__(18), _Presence2 = _interopRequireDefault(_Presence), _Image = __webpack_require__(20), _Image2 = _interopRequireDefault(_Image), SIZE = exports.SIZE = {
+    }), exports.PRESENCE_TYPE = exports.SIZE = void 0;
+    var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _utilSharedStyles = __webpack_require__(9), _Avatar = __webpack_require__(10), _Avatar2 = _interopRequireDefault(_Avatar), _Presence = __webpack_require__(16), _Presence2 = _interopRequireDefault(_Presence), _Image = __webpack_require__(18), _Image2 = _interopRequireDefault(_Image), SIZE = exports.SIZE = {
         values: [ "xsmall", "small", "medium", "large", "xlarge" ],
-        defaultValue: "small"
+        defaultValue: "medium"
+    }, PRESENCE_TYPE = exports.PRESENCE_TYPE = {
+        values: [ "none", "online", "busy", "offline" ],
+        defaultValue: "none"
     }, Avatar = function(_PureComponent) {
@@ -110,8 +123,8 @@ function Avatar() {
             _getPrototypeOf2.default)(Avatar)).call.apply(_ref, [ this ].concat(args))), _this.state = {
-                isLoading: !1,
-                hasError: !1
+                hasError: !1,
+                isLoading: !1
             }, _this.imageLoadedHandler = function() {
                 _this.setState({
-                    isLoading: !1,
-                    hasError: !1
+                    hasError: !1,
+                    isLoading: !1
                 });
@@ -135,29 +148,21 @@ }, _this.imageErrorHandler = function() {
             value: function() {
-                var _classNames2, _props = this.props, presenceBorderColor = _props.presenceBorderColor, presence = _props.presence, size = _props.size, src = _props.src, label = _props.label, children = _props.children, sizeClasses = (0, 
-                _classnames2.default)([ _styles2.default[size], _styles2.default.size ]), imgWrapperClasses = (0, 
-                _classnames2.default)((0, _defineProperty3.default)({}, _styles2.default.loaded, !this.state.isLoading), _styles2.default.imgWrapper), presenceWrapperClasses = (0, 
-                _classnames2.default)((_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, _styles2.default.hidden, "none" === presence && !children), 
-                (0, _defineProperty3.default)(_classNames2, _styles2.default.presenceWrapper, !0), 
-                _classNames2));
-                return _react2.default.createElement("div", {
-                    className: _styles2.default.root
-                }, _react2.default.createElement("div", {
-                    className: sizeClasses
-                }, _react2.default.createElement("div", {
-                    className: imgWrapperClasses,
+                var _props = this.props, children = _props.children, label = _props.label, presence = _props.presence, presenceBorderColor = _props.presenceBorderColor, size = _props.size, src = _props.src, _state = this.state, hasError = _state.hasError, isLoading = _state.isLoading, showPresence = "none" !== presence || children;
+                return _react2.default.createElement(_Avatar2.default, {
+                    size: size
+                }, _react2.default.createElement(_Avatar.ImageWrapper, {
+                    isLoading: isLoading,
                     "aria-label": label
-                }, _react2.default.createElement(_Image2.default, {
+                }, isLoading ? null : _react2.default.createElement(_Image2.default, {
                     alt: label,
                     src: src,
-                    className: _styles2.default.img,
                     onLoad: this.imageLoadedHandler,
                     onError: this.imageErrorHandler,
-                    hasError: this.state.hasError,
-                    isLoading: this.state.isLoading
-                })), _react2.default.createElement("div", {
-                    className: presenceWrapperClasses
+                    hasError: hasError
+                })), showPresence ? _react2.default.createElement(_Avatar.PresenceWrapper, {
+                    size: size
                 }, _react2.default.createElement(_Presence2.default, {
                     presence: presence,
-                    borderColor: presenceBorderColor
-                }, children))));
+                    borderColor: presenceBorderColor,
+                    size: size
+                }, children)) : null);
             }
@@ -167,2 +172,9 @@ } ]), Avatar;
     Avatar.propTypes = {
+        /** Content to use as a custom presence indicator. Accepts any React element.
+	  For best results, it is recommended to use square content with height and
+	  width of 100% */
+        children: _react.PropTypes.element,
+        /** Defines the label for the Avatar used by screen readers as fallback
+	  content if the image fails to load. */
+        label: _react.PropTypes.string,
         /** Used to override the default border color of the presence indicator.
@@ -173,279 +185,130 @@ Accepts any color argument that the border-color CSS property accepts. */
 	  Refer to presence values on the Presence component */
-        presence: _react.PropTypes.oneOf(_Presence.PRESENCE_TYPE.values),
+        presence: _react.PropTypes.oneOf(PRESENCE_TYPE.values),
         /** Defines the size of the avatar */
         size: _react.PropTypes.oneOf(SIZE.values),
         /** A url to load an image from (this can also be a base64 encoded image) */
-        src: _react.PropTypes.string,
-        /** Defines the label for the Avatar used by screen readers as fallback
-	  content if the image fails to load. */
-        label: _react.PropTypes.string,
-        /** Content to use as a custom presence indicator. Accepts any React element.
-	  For best results, it is recommended to use square content with height and
-	  width of 100% */
-        children: _react.PropTypes.element
+        src: _react.PropTypes.string
     }, Avatar.defaultProps = {
         presenceBorderColor: _utilSharedStyles.akColorPrimary3,
         // white
-        presence: "none",
-        size: "medium"
+        presence: PRESENCE_TYPE.defaultValue,
+        size: SIZE.defaultValue
     }, exports.default = Avatar;
+}, /* 3 */
+/***/
+function(module, exports) {
+    module.exports = require("babel-runtime/core-js/object/get-prototype-of");
+}, /* 4 */
+/***/
+function(module, exports) {
+    module.exports = require("babel-runtime/helpers/classCallCheck");
 }, /* 5 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/defineProperty");
+    module.exports = require("babel-runtime/helpers/createClass");
 }, /* 6 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/core-js/object/get-prototype-of");
+    module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
 }, /* 7 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/classCallCheck");
+    module.exports = require("babel-runtime/helpers/inherits");
 }, /* 8 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/createClass");
+    module.exports = require("react");
 }, /* 9 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/possibleConstructorReturn");
+    module.exports = require("@atlaskit/util-shared-styles");
 }, /* 10 */
 /***/
-function(module, exports) {
-    module.exports = require("babel-runtime/helpers/inherits");
+function(module, exports, __webpack_require__) {
+    "use strict";
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+    Object.defineProperty(exports, "__esModule", {
+        value: !0
+    }), exports.PresenceWrapper = exports.ImageWrapper = exports.getSize = void 0;
+    var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  ", "\n  display: inline-block;\n  position: relative;\n" ], [ "\n  ", "\n  display: inline-block;\n  position: relative;\n" ]), _templateObject2 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  align-content: center;\n  align-items: middle;\n  background-color: ", ";\n  border-radius: 100%;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  transform: translateZ(0);\n  width: 100%;\n" ], [ "\n  align-content: center;\n  align-items: middle;\n  background-color: ", ";\n  border-radius: 100%;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  transform: translateZ(0);\n  width: 100%;\n" ]), _templateObject3 = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  ", "\n  position: absolute;\n" ], [ "\n  ", "\n  position: absolute;\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(9), _constants = __webpack_require__(13), getAvatarDimensions = (exports.getSize = function(_ref) {
+        var size = _ref.size;
+        return _constants.AVATAR_SIZES[size];
+    }, function(_ref2) {
+        var size = _ref2.size;
+        return "\n  height: " + _constants.AVATAR_SIZES[size] + "px;\n  width: " + _constants.AVATAR_SIZES[size] + "px;\n";
+    });
+    exports.default = _styledComponents2.default.div(_templateObject, getAvatarDimensions);
+    // IMAGE WRAPPER
+    // translateZ used to invoke the GPU -- otherwise overflow is ignored when animating
+    var getPresenceLayout = (exports.ImageWrapper = _styledComponents2.default.div(_templateObject2, function(_ref3) {
+        var isLoading = _ref3.isLoading;
+        return isLoading ? _utilSharedStyles.akColorN40 : "transparent";
+    }), function(_ref4) {
+        var size = _ref4.size;
+        return "\n  bottom: " + _constants.PRESENCE_OFFSET[size] + "px;\n  height: " + _constants.PRESENCE_SIZES[size] + "px;\n  right: " + _constants.PRESENCE_OFFSET[size] + "px;\n  width: " + _constants.PRESENCE_SIZES[size] + "px;\n";
+    });
+    exports.PresenceWrapper = _styledComponents2.default.div(_templateObject3, getPresenceLayout);
 }, /* 11 */
 /***/
 function(module, exports) {
-    module.exports = require("classnames");
+    module.exports = require("babel-runtime/helpers/taggedTemplateLiteral");
 }, /* 12 */
 /***/
 function(module, exports) {
-    module.exports = require("@atlaskit/util-shared-styles");
+    module.exports = require("styled-components");
 }, /* 13 */
 /***/
 function(module, exports, __webpack_require__) {
-    // style-loader: Adds some css to the DOM by adding a <style> tag
-    // load the styles
-    var content = __webpack_require__(14);
-    "string" == typeof content && (content = [ [ module.id, content, "" ] ]);
-    // add the styles to the DOM
-    __webpack_require__(16)(content, {});
-    content.locals && (module.exports = content.locals);
+    "use strict";
+    function _interopRequireDefault(obj) {
+        return obj && obj.__esModule ? obj : {
+            default: obj
+        };
+    }
+    Object.defineProperty(exports, "__esModule", {
+        value: !0
+    }), exports.PRESENCE_SIZES = exports.PRESENCE_OFFSET = exports.PRESENCE_BORDER_WIDTH = exports.AVATAR_SIZES = void 0;
+    var _extends2 = __webpack_require__(14), _extends3 = _interopRequireDefault(_extends2), _keys = __webpack_require__(15), _keys2 = _interopRequireDefault(_keys), _utilSharedStyles = __webpack_require__(9), PRESENCE_BORDER_WIDTH = (exports.AVATAR_SIZES = {
+        xsmall: 2 * _utilSharedStyles.akGridSizeUnitless,
+        small: 3 * _utilSharedStyles.akGridSizeUnitless,
+        medium: 4 * _utilSharedStyles.akGridSizeUnitless,
+        large: 6 * _utilSharedStyles.akGridSizeUnitless,
+        xlarge: 12 * _utilSharedStyles.akGridSizeUnitless
+    }, exports.PRESENCE_BORDER_WIDTH = {
+        xsmall: 0,
+        small: 2,
+        medium: 2,
+        large: 3,
+        xlarge: 3
+    }), offsetMap = {};
+    (0, _keys2.default)(PRESENCE_BORDER_WIDTH).forEach(function(size) {
+        offsetMap[size] = PRESENCE_BORDER_WIDTH[size] * -1;
+    });
+    exports.PRESENCE_OFFSET = (0, _extends3.default)({}, offsetMap, {
+        xlarge: 6
+    }), exports.PRESENCE_SIZES = {
+        xsmall: 0,
+        small: 12,
+        medium: 12,
+        large: 18,
+        xlarge: 18
+    };
 }, /* 14 */
 /***/
-function(module, exports, __webpack_require__) {
-    exports = module.exports = __webpack_require__(15)(), // imports
-    // module
-    exports.push([ module.id, "._9h_qSYw_07agRklMEYgZ-{display:inline-block;position:relative}.d56twF_tOLvWUTfi4NEkK{height:16px;width:16px}.d56twF_tOLvWUTfi4NEkK ._17kCbvrCUfKkCw95o0Bw2Z{right:0;height:0;bottom:0;width:0}._2Qe1bk0MDSMevT6_wjzkGO{height:24px;width:24px}._2Qe1bk0MDSMevT6_wjzkGO ._17kCbvrCUfKkCw95o0Bw2Z{right:-2px;height:12px;bottom:-2px;width:12px}._2Qe1bk0MDSMevT6_wjzkGO ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:2px}._3Zh4OVkU9R-0aXK8kOSlE2{height:32px;width:32px}._3Zh4OVkU9R-0aXK8kOSlE2 ._17kCbvrCUfKkCw95o0Bw2Z{right:-2px;height:12px;bottom:-2px;width:12px}._3Zh4OVkU9R-0aXK8kOSlE2 ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:2px}._1zmRBj0NQxbaC7H5LmrYU9{height:48px;width:48px}._1zmRBj0NQxbaC7H5LmrYU9 ._17kCbvrCUfKkCw95o0Bw2Z{right:-3px;height:18px;bottom:-3px;width:18px}._1zmRBj0NQxbaC7H5LmrYU9 ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:3px}._3RPL7Nj5OpQKyuc2GNhsFa{height:96px;width:96px}._3RPL7Nj5OpQKyuc2GNhsFa ._17kCbvrCUfKkCw95o0Bw2Z{right:6px;height:18px;bottom:6px;width:18px}._3RPL7Nj5OpQKyuc2GNhsFa ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:3px}.N0ViSLhqf5E4eCiBrlCQ-{align-content:center;-webkit-box-align:middle;align-items:middle;background-color:#dfe1e6;border-radius:100%;display:-webkit-box;display:flex;height:100%;overflow:hidden;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.N0ViSLhqf5E4eCiBrlCQ- img{height:100%;width:100%;display:none}.N0ViSLhqf5E4eCiBrlCQ-._1tkc2q_p2ssdXUnAQ3KFqH{background-color:transparent}.N0ViSLhqf5E4eCiBrlCQ-._1tkc2q_p2ssdXUnAQ3KFqH img{display:inline-block}._17kCbvrCUfKkCw95o0Bw2Z{position:absolute}._2AdNR3UG8ZqVF0X-mZvi8w{align-content:center;-webkit-box-align:middle;align-items:middle;border:2px solid #fff;border-radius:100%;box-sizing:border-box;display:-webkit-box;display:flex;height:100%;overflow:hidden;width:100%}._2AdNR3UG8ZqVF0X-mZvi8w:empty{display:none}._3PV6tdHN0OemnbDiwUBett{display:none}", "" ]), 
-    // exports
-    exports.locals = {
-        root: "_9h_qSYw_07agRklMEYgZ-",
-        root: "_9h_qSYw_07agRklMEYgZ-",
-        xsmall: "d56twF_tOLvWUTfi4NEkK",
-        xsmall: "d56twF_tOLvWUTfi4NEkK",
-        "presence-wrapper": "_17kCbvrCUfKkCw95o0Bw2Z",
-        presenceWrapper: "_17kCbvrCUfKkCw95o0Bw2Z",
-        small: "_2Qe1bk0MDSMevT6_wjzkGO",
-        small: "_2Qe1bk0MDSMevT6_wjzkGO",
-        presence: "_2AdNR3UG8ZqVF0X-mZvi8w",
-        presence: "_2AdNR3UG8ZqVF0X-mZvi8w",
-        medium: "_3Zh4OVkU9R-0aXK8kOSlE2",
-        medium: "_3Zh4OVkU9R-0aXK8kOSlE2",
-        large: "_1zmRBj0NQxbaC7H5LmrYU9",
-        large: "_1zmRBj0NQxbaC7H5LmrYU9",
-        xlarge: "_3RPL7Nj5OpQKyuc2GNhsFa",
-        xlarge: "_3RPL7Nj5OpQKyuc2GNhsFa",
-        imgWrapper: "N0ViSLhqf5E4eCiBrlCQ-",
-        imgWrapper: "N0ViSLhqf5E4eCiBrlCQ-",
-        loaded: "_1tkc2q_p2ssdXUnAQ3KFqH",
-        loaded: "_1tkc2q_p2ssdXUnAQ3KFqH",
-        hidden: "_3PV6tdHN0OemnbDiwUBett",
-        hidden: "_3PV6tdHN0OemnbDiwUBett"
-    };
+function(module, exports) {
+    module.exports = require("babel-runtime/helpers/extends");
 }, /* 15 */
 /***/
 function(module, exports) {
-    /*
-		MIT License http://www.opensource.org/licenses/mit-license.php
-		Author Tobias Koppers @sokra
-	*/
-    // css base code, injected by the css-loader
-    module.exports = function() {
-        var list = [];
-        // return the list of modules as css string
-        // import a list of modules into the list
-        return list.toString = function() {
-            for (var result = [], i = 0; i < this.length; i++) {
-                var item = this[i];
-                item[2] ? result.push("@media " + item[2] + "{" + item[1] + "}") : result.push(item[1]);
-            }
-            return result.join("");
-        }, list.i = function(modules, mediaQuery) {
-            "string" == typeof modules && (modules = [ [ null, modules, "" ] ]);
-            for (var alreadyImportedModules = {}, i = 0; i < this.length; i++) {
-                var id = this[i][0];
-                "number" == typeof id && (alreadyImportedModules[id] = !0);
-            }
-            for (i = 0; i < modules.length; i++) {
-                var item = modules[i];
-                // skip already imported module
-                // this implementation is not 100% perfect for weird media query combinations
-                //  when a module is imported multiple times with different media queries.
-                //  I hope this will never occur (Hey this way we have smaller bundles)
-                "number" == typeof item[0] && alreadyImportedModules[item[0]] || (mediaQuery && !item[2] ? item[2] = mediaQuery : mediaQuery && (item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"), 
-                list.push(item));
-            }
-        }, list;
-    };
+    module.exports = require("babel-runtime/core-js/object/keys");
 }, /* 16 */
 /***/
 function(module, exports, __webpack_require__) {
-    function addStylesToDom(styles, options) {
-        for (var i = 0; i < styles.length; i++) {
-            var item = styles[i], domStyle = stylesInDom[item.id];
-            if (domStyle) {
-                domStyle.refs++;
-                for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j](item.parts[j]);
-                for (;j < item.parts.length; j++) domStyle.parts.push(addStyle(item.parts[j], options));
-            } else {
-                for (var parts = [], j = 0; j < item.parts.length; j++) parts.push(addStyle(item.parts[j], options));
-                stylesInDom[item.id] = {
-                    id: item.id,
-                    refs: 1,
-                    parts: parts
-                };
-            }
-        }
-    }
-    function listToStyles(list) {
-        for (var styles = [], newStyles = {}, i = 0; i < list.length; i++) {
-            var item = list[i], id = item[0], css = item[1], media = item[2], sourceMap = item[3], part = {
-                css: css,
-                media: media,
-                sourceMap: sourceMap
-            };
-            newStyles[id] ? newStyles[id].parts.push(part) : styles.push(newStyles[id] = {
-                id: id,
-                parts: [ part ]
-            });
-        }
-        return styles;
-    }
-    function insertStyleElement(options, styleElement) {
-        var head = getHeadElement(), lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
-        if ("top" === options.insertAt) lastStyleElementInsertedAtTop ? lastStyleElementInsertedAtTop.nextSibling ? head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling) : head.appendChild(styleElement) : head.insertBefore(styleElement, head.firstChild), 
-        styleElementsInsertedAtTop.push(styleElement); else {
-            if ("bottom" !== options.insertAt) throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
-            head.appendChild(styleElement);
-        }
-    }
-    function removeStyleElement(styleElement) {
-        styleElement.parentNode.removeChild(styleElement);
-        var idx = styleElementsInsertedAtTop.indexOf(styleElement);
-        idx >= 0 && styleElementsInsertedAtTop.splice(idx, 1);
-    }
-    function createStyleElement(options) {
-        var styleElement = document.createElement("style");
-        return styleElement.type = "text/css", insertStyleElement(options, styleElement), 
-        styleElement;
-    }
-    function createLinkElement(options) {
-        var linkElement = document.createElement("link");
-        return linkElement.rel = "stylesheet", insertStyleElement(options, linkElement), 
-        linkElement;
-    }
-    function addStyle(obj, options) {
-        var styleElement, update, remove;
-        if (options.singleton) {
-            var styleIndex = singletonCounter++;
-            styleElement = singletonElement || (singletonElement = createStyleElement(options)), 
-            update = applyToSingletonTag.bind(null, styleElement, styleIndex, !1), remove = applyToSingletonTag.bind(null, styleElement, styleIndex, !0);
-        } else obj.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa ? (styleElement = createLinkElement(options), 
-        update = updateLink.bind(null, styleElement), remove = function() {
-            removeStyleElement(styleElement), styleElement.href && URL.revokeObjectURL(styleElement.href);
-        }) : (styleElement = createStyleElement(options), update = applyToTag.bind(null, styleElement), 
-        remove = function() {
-            removeStyleElement(styleElement);
-        });
-        return update(obj), function(newObj) {
-            if (newObj) {
-                if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) return;
-                update(obj = newObj);
-            } else remove();
-        };
-    }
-    function applyToSingletonTag(styleElement, index, remove, obj) {
-        var css = remove ? "" : obj.css;
-        if (styleElement.styleSheet) styleElement.styleSheet.cssText = replaceText(index, css); else {
-            var cssNode = document.createTextNode(css), childNodes = styleElement.childNodes;
-            childNodes[index] && styleElement.removeChild(childNodes[index]), childNodes.length ? styleElement.insertBefore(cssNode, childNodes[index]) : styleElement.appendChild(cssNode);
-        }
-    }
-    function applyToTag(styleElement, obj) {
-        var css = obj.css, media = obj.media;
-        if (media && styleElement.setAttribute("media", media), styleElement.styleSheet) styleElement.styleSheet.cssText = css; else {
-            for (;styleElement.firstChild; ) styleElement.removeChild(styleElement.firstChild);
-            styleElement.appendChild(document.createTextNode(css));
-        }
-    }
-    function updateLink(linkElement, obj) {
-        var css = obj.css, sourceMap = obj.sourceMap;
-        sourceMap && (// http://stackoverflow.com/a/26603875
-        css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */");
-        var blob = new Blob([ css ], {
-            type: "text/css"
-        }), oldSrc = linkElement.href;
-        linkElement.href = URL.createObjectURL(blob), oldSrc && URL.revokeObjectURL(oldSrc);
-    }
-    /*
-		MIT License http://www.opensource.org/licenses/mit-license.php
-		Author Tobias Koppers @sokra
-	*/
-    var stylesInDom = {}, memoize = function(fn) {
-        var memo;
-        return function() {
-            return "undefined" == typeof memo && (memo = fn.apply(this, arguments)), memo;
-        };
-    }, isOldIE = memoize(function() {
-        return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
-    }), getHeadElement = memoize(function() {
-        return document.head || document.getElementsByTagName("head")[0];
-    }), singletonElement = null, singletonCounter = 0, styleElementsInsertedAtTop = [];
-    module.exports = function(list, options) {
-        options = options || {}, // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
-        // tags it will allow on a page
-        "undefined" == typeof options.singleton && (options.singleton = isOldIE()), // By default, add <style> tags to the bottom of <head>.
-        "undefined" == typeof options.insertAt && (options.insertAt = "bottom");
-        var styles = listToStyles(list);
-        return addStylesToDom(styles, options), function(newList) {
-            for (var mayRemove = [], i = 0; i < styles.length; i++) {
-                var item = styles[i], domStyle = stylesInDom[item.id];
-                domStyle.refs--, mayRemove.push(domStyle);
-            }
-            if (newList) {
-                var newStyles = listToStyles(newList);
-                addStylesToDom(newStyles, options);
-            }
-            for (var i = 0; i < mayRemove.length; i++) {
-                var domStyle = mayRemove[i];
-                if (0 === domStyle.refs) {
-                    for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();
-                    delete stylesInDom[domStyle.id];
-                }
-            }
-        };
-    };
-    var replaceText = function() {
-        var textStore = [];
-        return function(index, replacement) {
-            return textStore[index] = replacement, textStore.filter(Boolean).join("\n");
-        };
-    }();
-}, /* 17 */
-/***/
-function(module, exports) {
-    module.exports = require("react");
-}, /* 18 */
-/***/
-function(module, exports, __webpack_require__) {
     "use strict";
@@ -457,11 +320,54 @@ function _interopRequireDefault(obj) {
     }
+    function getPresenceSvg(presence) {
+        var Svg = function(props) {
+            return _react2.default.createElement("svg", (0, _extends3.default)({
+                height: "100%",
+                version: "1.1",
+                viewBox: "0 0 8 8",
+                width: "100%",
+                xmlns: "http://www.w3.org/2000/svg"
+            }, props));
+        };
+        switch (presence) {
+          case "busy":
+            return _react2.default.createElement(Svg, null, _react2.default.createElement("circle", {
+                fill: "#ED5451",
+                cx: "4",
+                cy: "4",
+                r: "4"
+            }), _react2.default.createElement("path", {
+                fill: "#FFFFFF",
+                d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
+            }));
+
+          case "offline":
+            return _react2.default.createElement(Svg, null, _react2.default.createElement("path", {
+                fill: "#6C798E",
+                d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
+            }), _react2.default.createElement("path", {
+                fill: "#CFD4DB",
+                d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
+            }));
+
+          case "online":
+            return _react2.default.createElement(Svg, null, _react2.default.createElement("circle", {
+                fill: "#48CC8C",
+                cx: "4",
+                cy: "4",
+                r: "4"
+            }));
+
+          default:
+            return null;
+        }
+    }
     Object.defineProperty(exports, "__esModule", {
         value: !0
-    }), exports.PRESENCE_TYPE = void 0;
-    var _getPrototypeOf = __webpack_require__(6), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(7), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(8), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(9), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(10), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(17), _react2 = _interopRequireDefault(_react), _utilSharedStyles = __webpack_require__(12), _icons = __webpack_require__(19), _icons2 = _interopRequireDefault(_icons), _styles = __webpack_require__(14), _styles2 = _interopRequireDefault(_styles);
-    // This hack is to make sure that styles.locals exists when style loading is a noop (when we are
-    // running tests).
-    // TODO: Remove in AK-2025
-    _styles2.default.locals = _styles2.default.locals || {};
-    var PRESENCE_TYPE = exports.PRESENCE_TYPE = {
+    }), exports.PRESENCE_TYPE = exports.SIZE = void 0;
+    var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _extends2 = __webpack_require__(14), _extends3 = _interopRequireDefault(_extends2);
+    exports.getPresenceSvg = getPresenceSvg;
+    var _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _utilSharedStyles = __webpack_require__(9), _Presence = __webpack_require__(17), _Presence2 = _interopRequireDefault(_Presence), SIZE = exports.SIZE = {
+        values: [ "xsmall", "small", "medium", "large", "xlarge" ],
+        defaultValue: "medium"
+    }, PRESENCE_TYPE = exports.PRESENCE_TYPE = {
         values: [ "none", "online", "busy", "offline" ],
@@ -477,9 +383,9 @@ defaultValue: "none"
             value: function() {
-                var wrapperStyles = {
-                    borderColor: this.props.borderColor
-                }, PresenceToDisplay = _icons2.default[this.props.presence] || null;
-                return _react2.default.createElement("div", {
-                    className: _styles2.default.locals.presence,
-                    style: wrapperStyles
-                }, this.props.children ? this.props.children : _react2.default.createElement(PresenceToDisplay, null));
+                var _props = this.props, borderColor = _props.borderColor, children = _props.children, presence = _props.presence, size = _props.size, style = {
+                    borderColor: borderColor
+                };
+                return _react2.default.createElement(_Presence2.default, {
+                    size: size,
+                    style: style
+                }, children || getPresenceSvg(presence));
             }
@@ -489,5 +395,2 @@ } ]), Presence;
     Presence.propTypes = {
-        /** Content to use as a custom presence indicator (usually not required if
-	  consuming Presence separate to Avatar) */
-        children: _react.PropTypes.element,
         /** Used to override the default border color of the presence indicator.
@@ -497,4 +400,9 @@ Accepts any color argument that the border-color CSS property accepts */
         /** Content to use as a custom presence indicator (usually not required if
+	  consuming Presence separate to Avatar) */
+        children: _react.PropTypes.element,
+        /** Content to use as a custom presence indicator (usually not required if
 	  consuming Presence separate to Avatar). */
-        presence: _react.PropTypes.oneOf(PRESENCE_TYPE.values)
+        presence: _react.PropTypes.oneOf(PRESENCE_TYPE.values),
+        /** Defines the size of the presence */
+        size: _react.PropTypes.oneOf(SIZE.values)
     }, Presence.defaultProps = {
@@ -505,3 +413,3 @@ borderColor: _utilSharedStyles.akColorPrimary3,
     }, exports.default = Presence;
-}, /* 19 */
+}, /* 17 */
 /***/
@@ -518,89 +426,10 @@ function(module, exports, __webpack_require__) {
     });
-    var _react = __webpack_require__(17), _react2 = _interopRequireDefault(_react);
-    exports.default = {
-        // eslint-disable-next-line max-len
-        online: function() {
-            return _react2.default.createElement("svg", {
-                width: "100%",
-                height: "100%",
-                viewBox: "0 0 8 8",
-                xmlns: "http://www.w3.org/2000/svg"
-            }, _react2.default.createElement("g", {
-                id: "User---presence",
-                stroke: "none",
-                strokeWidth: "1",
-                fill: "none",
-                fillRule: "evenodd"
-            }, _react2.default.createElement("g", {
-                id: "Available",
-                fill: "#48CC8C"
-            }, _react2.default.createElement("circle", {
-                id: "Oval-3-Copy-7",
-                cx: "4",
-                cy: "4",
-                r: "4"
-            }))));
-        },
-        // TODO move this to ak-icon
-        // eslint-disable-next-line max-len, react/style-prop-object
-        busy: function() {
-            return _react2.default.createElement("svg", {
-                width: "100%",
-                height: "100%",
-                xmlns: "http://www.w3.org/2000/svg",
-                x: "0px",
-                y: "0px",
-                viewBox: "0 0 8 8",
-                style: {
-                    enableBackground: "new 0 0 8 8"
-                }
-            }, _react2.default.createElement("g", {
-                id: "User---presence"
-            }, _react2.default.createElement("g", {
-                id: "Busy-light"
-            }, _react2.default.createElement("circle", {
-                id: "Combined-Shape-Copy-5",
-                fill: "#ED5451",
-                cx: "4",
-                cy: "4",
-                r: "4"
-            }), _react2.default.createElement("path", {
-                id: "Rectangle",
-                fill: "#FFFFFF",
-                d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
-            }))));
-        },
-        // TODO move this to ak-icon
-        // eslint-disable-next-line max-len
-        offline: function() {
-            return _react2.default.createElement("svg", {
-                width: "100%",
-                height: "100%",
-                viewBox: "0 0 8 8",
-                xmlns: "http://www.w3.org/2000/svg"
-            }, _react2.default.createElement("g", {
-                id: "User---presence",
-                stroke: "none",
-                strokeWidth: "1",
-                fill: "none",
-                fillRule: "evenodd"
-            }, _react2.default.createElement("g", {
-                id: "Unavailable"
-            }, _react2.default.createElement("g", {
-                id: "presence---offline"
-            }, _react2.default.createElement("path", {
-                d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z",
-                id: "Combined-Shape-Copy-14",
-                fill: "#6C798E"
-            }), _react2.default.createElement("path", {
-                d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z",
-                id: "Combined-Shape-Copy-14",
-                fill: "#CFD4DB"
-            })))));
-        },
-        none: function() {
-            return null;
-        }
-    };
-}, /* 20 */
+    var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  align-content: center;\n  align-items: middle;\n  border-color: ", ";\n  border-radius: 100%;\n  border-style: solid;\n  border-width: ", "px;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  &:empty {\n    display: none;\n  }\n" ], [ "\n  align-content: center;\n  align-items: middle;\n  border-color: ", ";\n  border-radius: 100%;\n  border-style: solid;\n  border-width: ", "px;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  &:empty {\n    display: none;\n  }\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(9), _constants = __webpack_require__(13);
+    // set fallbacks for border color/width to protect consumers from invalid values
+    exports.default = _styledComponents2.default.div(_templateObject, _utilSharedStyles.akColorPrimary3, function(_ref) {
+        var size = _ref.size;
+        return _constants.PRESENCE_BORDER_WIDTH[size] || _constants.PRESENCE_BORDER_WIDTH.medium;
+    });
+}, /* 18 */
 /***/
@@ -616,4 +445,25 @@ function(module, exports, __webpack_require__) {
         value: !0
-    });
-    var _extends2 = __webpack_require__(21), _extends3 = _interopRequireDefault(_extends2), _objectWithoutProperties2 = __webpack_require__(22), _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2), _getPrototypeOf = __webpack_require__(6), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(7), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(8), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(9), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(10), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(17), _react2 = _interopRequireDefault(_react), _DefaultAvatar = __webpack_require__(23), _DefaultAvatar2 = _interopRequireDefault(_DefaultAvatar), Image = function(_PureComponent) {
+    }), exports.DefaultImage = void 0;
+    var _objectWithoutProperties2 = __webpack_require__(19), _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2), _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Image = __webpack_require__(20), _Image2 = _interopRequireDefault(_Image), DefaultImage = exports.DefaultImage = function() {
+        return _react2.default.createElement("svg", {
+            width: "100%",
+            height: "100%",
+            viewBox: "0 0 100 100",
+            version: "1.1",
+            xmlns: "http://www.w3.org/2000/svg"
+        }, _react2.default.createElement("path", {
+            fill: "#1893E7",
+            d: "M50,0 C22.3833333,0 0,22.3888889 0,50 C0,77.6166667 22.3833333,100 50,100 C77.6111111,100 100,77.6166667 100,50 C100,22.3888889 77.6111111,0 50,0 L50,0 Z"
+        }), _react2.default.createElement("path", {
+            fill: "#80D8FF",
+            d: "M50,19 C58.8373333,19 66,26.168 66,35 C66,43.8373333 58.8373333,51 50,51 C41.1626667,51 34,43.8373333 34,35 C34,26.168 41.1626667,19 50,19 L50,19 Z"
+        }), _react2.default.createElement("mask", {
+            fill: "white"
+        }, _react2.default.createElement("path", {
+            d: "M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"
+        })), _react2.default.createElement("path", {
+            fill: "#80D8FF",
+            d: "M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"
+        }));
+    }, Image = function(_PureComponent) {
         function Image() {
@@ -626,8 +476,5 @@ return (0, _classCallCheck3.default)(this, Image), (0, _possibleConstructorReturn3.default)(this, (Image.__proto__ || (0,
             value: function() {
-                var _props = this.props, hasError = _props.hasError, isLoading = _props.isLoading, propsForImage = (0, 
-                _objectWithoutProperties3.default)(_props, [ "hasError", "isLoading" ]);
-                return isLoading || this.props.src && !hasError ? _react2.default.createElement("img", (0, 
-                _extends3.default)({
-                    alt: this.props.alt
-                }, propsForImage)) : _react2.default.createElement(_DefaultAvatar2.default, null);
+                var _props = this.props, hasError = _props.hasError, isLoading = _props.isLoading, props = (0, 
+                _objectWithoutProperties3.default)(_props, [ "hasError", "isLoading" ]), showDefault = !isLoading && (!this.props.src || hasError);
+                return showDefault ? _react2.default.createElement(DefaultImage, null) : _react2.default.createElement(_Image2.default, props);
             }
@@ -637,18 +484,14 @@ } ]), Image;
     Image.propTypes = {
+        alt: _react.PropTypes.string,
+        hasError: _react.PropTypes.bool,
         isLoading: _react.PropTypes.bool,
-        src: _react.PropTypes.string,
-        hasError: _react.PropTypes.bool,
-        alt: _react.PropTypes.string,
         onError: _react.PropTypes.func,
-        onLoad: _react.PropTypes.func
+        onLoad: _react.PropTypes.func,
+        src: _react.PropTypes.string
     }, exports.default = Image;
-}, /* 21 */
+}, /* 19 */
 /***/
 function(module, exports) {
-    module.exports = require("babel-runtime/helpers/extends");
-}, /* 22 */
-/***/
-function(module, exports) {
     module.exports = require("babel-runtime/helpers/objectWithoutProperties");
-}, /* 23 */
+}, /* 20 */
 /***/
@@ -665,40 +508,5 @@ function(module, exports, __webpack_require__) {
     });
-    var _react = __webpack_require__(17), _react2 = _interopRequireDefault(_react);
-    // TODO move this to ak-icon
-    // eslint-disable-next-line max-len
-    exports.default = function() {
-        return _react2.default.createElement("svg", {
-            width: "100%",
-            height: "100%",
-            viewBox: "0 0 100 100",
-            version: "1.1",
-            xmlns: "http://www.w3.org/2000/svg"
-        }, _react2.default.createElement("g", {
-            id: "User---sizes",
-            stroke: "none",
-            strokeWidth: "1",
-            fill: "none",
-            fillRule: "evenodd"
-        }, _react2.default.createElement("g", {
-            id: "xlarge---100px"
-        }, _react2.default.createElement("g", {
-            id: "Defualt-avatar"
-        }, _react2.default.createElement("path", {
-            d: "M50,0 C22.3833333,0 0,22.3888889 0,50 C0,77.6166667 22.3833333,100 50,100 C77.6111111,100 100,77.6166667 100,50 C100,22.3888889 77.6111111,0 50,0 L50,0 Z",
-            id: "Fill-1",
-            fill: "#1893E7"
-        }), _react2.default.createElement("path", {
-            d: "M50,19 C58.8373333,19 66,26.168 66,35 C66,43.8373333 58.8373333,51 50,51 C41.1626667,51 34,43.8373333 34,35 C34,26.168 41.1626667,19 50,19 L50,19 Z",
-            id: "Path",
-            fill: "#80D8FF"
-        }), _react2.default.createElement("mask", {
-            id: "mask-2",
-            fill: "white"
-        }, _react2.default.createElement("path", {
-            d: "M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"
-        })), _react2.default.createElement("path", {
-            fill: "#80D8FF",
-            d: "M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"
-        })))));
-    };
+    var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+    _taggedTemplateLiteral3.default)([ "\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n" ], [ "\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents);
+    exports.default = _styledComponents2.default.img(_templateObject);
 } ]);

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@
-module.exports=function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(3)},,,function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Presence=t.default=void 0;var i=r(4),l=n(i),a=r(18),o=n(a);t.default=l.default,t.Presence=o.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.SIZE=void 0;var i=r(5),l=n(i),a=r(6),o=n(a),s=r(7),d=n(s),u=r(8),f=n(u),p=r(9),c=n(p),h=r(10),m=n(h),v=r(11),g=n(v),b=r(12),C=r(13),_=n(C),x=r(17),w=n(x),y=r(18),E=n(y),k=r(20),U=n(k),L=t.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"small"},N=function(e){function t(){var e,r,n,i;(0,d.default)(this,t);for(var l=arguments.length,a=Array(l),s=0;s<l;s++)a[s]=arguments[s];return r=n=(0,c.default)(this,(e=t.__proto__||(0,o.default)(t)).call.apply(e,[this].concat(a))),n.state={isLoading:!1,hasError:!1},n.imageLoadedHandler=function(){n.setState({isLoading:!1,hasError:!1})},n.imageErrorHandler=function(){n.setState({hasError:!0,isLoading:!1})},i=r,(0,c.default)(n,i)}return(0,m.default)(t,e),(0,f.default)(t,[{key:"componentWillReceiveProps",value:function(e){this.props.src!==e.src&&this.setState({isLoading:!0})}},{key:"render",value:function(){var e,t=this.props,r=t.presenceBorderColor,n=t.presence,i=t.size,a=t.src,o=t.label,s=t.children,d=(0,g.default)([_.default[i],_.default.size]),u=(0,g.default)((0,l.default)({},_.default.loaded,!this.state.isLoading),_.default.imgWrapper),f=(0,g.default)((e={},(0,l.default)(e,_.default.hidden,"none"===n&&!s),(0,l.default)(e,_.default.presenceWrapper,!0),e));return w.default.createElement("div",{className:_.default.root},w.default.createElement("div",{className:d},w.default.createElement("div",{className:u,"aria-label":o},w.default.createElement(U.default,{alt:o,src:a,className:_.default.img,onLoad:this.imageLoadedHandler,onError:this.imageErrorHandler,hasError:this.state.hasError,isLoading:this.state.isLoading})),w.default.createElement("div",{className:f},w.default.createElement(E.default,{presence:n,borderColor:r},s))))}}]),t}(x.PureComponent);N.propTypes={presenceBorderColor:x.PropTypes.string,presence:x.PropTypes.oneOf(y.PRESENCE_TYPE.values),size:x.PropTypes.oneOf(L.values),src:x.PropTypes.string,label:x.PropTypes.string,children:x.PropTypes.element},N.defaultProps={presenceBorderColor:b.akColorPrimary3,presence:"none",size:"medium"},t.default=N},function(e,t){e.exports=require("babel-runtime/helpers/defineProperty")},function(e,t){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,t){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,t){e.exports=require("babel-runtime/helpers/createClass")},function(e,t){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,t){e.exports=require("babel-runtime/helpers/inherits")},function(e,t){e.exports=require("classnames")},function(e,t){e.exports=require("@atlaskit/util-shared-styles")},function(e,t,r){var n=r(14);"string"==typeof n&&(n=[[e.id,n,""]]),r(16)(n,{}),n.locals&&(e.exports=n.locals)},function(e,t,r){t=e.exports=r(15)(),t.push([e.id,"._9h_qSYw_07agRklMEYgZ-{display:inline-block;position:relative}.d56twF_tOLvWUTfi4NEkK{height:16px;width:16px}.d56twF_tOLvWUTfi4NEkK ._17kCbvrCUfKkCw95o0Bw2Z{right:0;height:0;bottom:0;width:0}._2Qe1bk0MDSMevT6_wjzkGO{height:24px;width:24px}._2Qe1bk0MDSMevT6_wjzkGO ._17kCbvrCUfKkCw95o0Bw2Z{right:-2px;height:12px;bottom:-2px;width:12px}._2Qe1bk0MDSMevT6_wjzkGO ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:2px}._3Zh4OVkU9R-0aXK8kOSlE2{height:32px;width:32px}._3Zh4OVkU9R-0aXK8kOSlE2 ._17kCbvrCUfKkCw95o0Bw2Z{right:-2px;height:12px;bottom:-2px;width:12px}._3Zh4OVkU9R-0aXK8kOSlE2 ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:2px}._1zmRBj0NQxbaC7H5LmrYU9{height:48px;width:48px}._1zmRBj0NQxbaC7H5LmrYU9 ._17kCbvrCUfKkCw95o0Bw2Z{right:-3px;height:18px;bottom:-3px;width:18px}._1zmRBj0NQxbaC7H5LmrYU9 ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:3px}._3RPL7Nj5OpQKyuc2GNhsFa{height:96px;width:96px}._3RPL7Nj5OpQKyuc2GNhsFa ._17kCbvrCUfKkCw95o0Bw2Z{right:6px;height:18px;bottom:6px;width:18px}._3RPL7Nj5OpQKyuc2GNhsFa ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:3px}.N0ViSLhqf5E4eCiBrlCQ-{align-content:center;-webkit-box-align:middle;align-items:middle;background-color:#dfe1e6;border-radius:100%;display:-webkit-box;display:flex;height:100%;overflow:hidden;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.N0ViSLhqf5E4eCiBrlCQ- img{height:100%;width:100%;display:none}.N0ViSLhqf5E4eCiBrlCQ-._1tkc2q_p2ssdXUnAQ3KFqH{background-color:transparent}.N0ViSLhqf5E4eCiBrlCQ-._1tkc2q_p2ssdXUnAQ3KFqH img{display:inline-block}._17kCbvrCUfKkCw95o0Bw2Z{position:absolute}._2AdNR3UG8ZqVF0X-mZvi8w{align-content:center;-webkit-box-align:middle;align-items:middle;border:2px solid #fff;border-radius:100%;box-sizing:border-box;display:-webkit-box;display:flex;height:100%;overflow:hidden;width:100%}._2AdNR3UG8ZqVF0X-mZvi8w:empty{display:none}._3PV6tdHN0OemnbDiwUBett{display:none}",""]),t.locals={root:"_9h_qSYw_07agRklMEYgZ-",root:"_9h_qSYw_07agRklMEYgZ-",xsmall:"d56twF_tOLvWUTfi4NEkK",xsmall:"d56twF_tOLvWUTfi4NEkK","presence-wrapper":"_17kCbvrCUfKkCw95o0Bw2Z",presenceWrapper:"_17kCbvrCUfKkCw95o0Bw2Z",small:"_2Qe1bk0MDSMevT6_wjzkGO",small:"_2Qe1bk0MDSMevT6_wjzkGO",presence:"_2AdNR3UG8ZqVF0X-mZvi8w",presence:"_2AdNR3UG8ZqVF0X-mZvi8w",medium:"_3Zh4OVkU9R-0aXK8kOSlE2",medium:"_3Zh4OVkU9R-0aXK8kOSlE2",large:"_1zmRBj0NQxbaC7H5LmrYU9",large:"_1zmRBj0NQxbaC7H5LmrYU9",xlarge:"_3RPL7Nj5OpQKyuc2GNhsFa",xlarge:"_3RPL7Nj5OpQKyuc2GNhsFa",imgWrapper:"N0ViSLhqf5E4eCiBrlCQ-",imgWrapper:"N0ViSLhqf5E4eCiBrlCQ-",loaded:"_1tkc2q_p2ssdXUnAQ3KFqH",loaded:"_1tkc2q_p2ssdXUnAQ3KFqH",hidden:"_3PV6tdHN0OemnbDiwUBett",hidden:"_3PV6tdHN0OemnbDiwUBett"}},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var r=this[t];r[2]?e.push("@media "+r[2]+"{"+r[1]+"}"):e.push(r[1])}return e.join("")},e.i=function(t,r){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},i=0;i<this.length;i++){var l=this[i][0];"number"==typeof l&&(n[l]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&n[a[0]]||(r&&!a[2]?a[2]=r:r&&(a[2]="("+a[2]+") and ("+r+")"),e.push(a))}},e}},function(e,t,r){function n(e,t){for(var r=0;r<e.length;r++){var n=e[r],i=c[n.id];if(i){i.refs++;for(var l=0;l<i.parts.length;l++)i.parts[l](n.parts[l]);for(;l<n.parts.length;l++)i.parts.push(d(n.parts[l],t))}else{for(var a=[],l=0;l<n.parts.length;l++)a.push(d(n.parts[l],t));c[n.id]={id:n.id,refs:1,parts:a}}}}function i(e){for(var t=[],r={},n=0;n<e.length;n++){var i=e[n],l=i[0],a=i[1],o=i[2],s=i[3],d={css:a,media:o,sourceMap:s};r[l]?r[l].parts.push(d):t.push(r[l]={id:l,parts:[d]})}return t}function l(e,t){var r=v(),n=C[C.length-1];if("top"===e.insertAt)n?n.nextSibling?r.insertBefore(t,n.nextSibling):r.appendChild(t):r.insertBefore(t,r.firstChild),C.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");r.appendChild(t)}}function a(e){e.parentNode.removeChild(e);var t=C.indexOf(e);t>=0&&C.splice(t,1)}function o(e){var t=document.createElement("style");return t.type="text/css",l(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",l(e,t),t}function d(e,t){var r,n,i;if(t.singleton){var l=b++;r=g||(g=o(t)),n=u.bind(null,r,l,!1),i=u.bind(null,r,l,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(r=s(t),n=p.bind(null,r),i=function(){a(r),r.href&&URL.revokeObjectURL(r.href)}):(r=o(t),n=f.bind(null,r),i=function(){a(r)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else i()}}function u(e,t,r,n){var i=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=_(t,i);else{var l=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(l,a[t]):e.appendChild(l)}}function f(e,t){var r=t.css,n=t.media;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}function p(e,t){var r=t.css,n=t.sourceMap;n&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var i=new Blob([r],{type:"text/css"}),l=e.href;e.href=URL.createObjectURL(i),l&&URL.revokeObjectURL(l)}var c={},h=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},m=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),v=h(function(){return document.head||document.getElementsByTagName("head")[0]}),g=null,b=0,C=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=m()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var r=i(e);return n(r,t),function(e){for(var l=[],a=0;a<r.length;a++){var o=r[a],s=c[o.id];s.refs--,l.push(s)}if(e){var d=i(e);n(d,t)}for(var a=0;a<l.length;a++){var s=l[a];if(0===s.refs){for(var u=0;u<s.parts.length;u++)s.parts[u]();delete c[s.id]}}}};var _=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=require("react")},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.PRESENCE_TYPE=void 0;var i=r(6),l=n(i),a=r(7),o=n(a),s=r(8),d=n(s),u=r(9),f=n(u),p=r(10),c=n(p),h=r(17),m=n(h),v=r(12),g=r(19),b=n(g),C=r(14),_=n(C);_.default.locals=_.default.locals||{};var x=t.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},w=function(e){function t(){return(0,o.default)(this,t),(0,f.default)(this,(t.__proto__||(0,l.default)(t)).apply(this,arguments))}return(0,c.default)(t,e),(0,d.default)(t,[{key:"render",value:function(){var e={borderColor:this.props.borderColor},t=b.default[this.props.presence]||null;return m.default.createElement("div",{className:_.default.locals.presence,style:e},this.props.children?this.props.children:m.default.createElement(t,null))}}]),t}(h.PureComponent);w.propTypes={children:h.PropTypes.element,borderColor:h.PropTypes.string,presence:h.PropTypes.oneOf(x.values)},w.defaultProps={borderColor:v.akColorPrimary3,presence:x.defaultValue},t.default=w},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=r(17),l=n(i);t.default={online:function(){return l.default.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 8 8",xmlns:"http://www.w3.org/2000/svg"},l.default.createElement("g",{id:"User---presence",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},l.default.createElement("g",{id:"Available",fill:"#48CC8C"},l.default.createElement("circle",{id:"Oval-3-Copy-7",cx:"4",cy:"4",r:"4"}))))},busy:function(){return l.default.createElement("svg",{width:"100%",height:"100%",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 8 8",style:{enableBackground:"new 0 0 8 8"}},l.default.createElement("g",{id:"User---presence"},l.default.createElement("g",{id:"Busy-light"},l.default.createElement("circle",{id:"Combined-Shape-Copy-5",fill:"#ED5451",cx:"4",cy:"4",r:"4"}),l.default.createElement("path",{id:"Rectangle",fill:"#FFFFFF",d:"M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"}))))},offline:function(){return l.default.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 8 8",xmlns:"http://www.w3.org/2000/svg"},l.default.createElement("g",{id:"User---presence",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},l.default.createElement("g",{id:"Unavailable"},l.default.createElement("g",{id:"presence---offline"},l.default.createElement("path",{d:"M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z",id:"Combined-Shape-Copy-14",fill:"#6C798E"}),l.default.createElement("path",{d:"M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z",id:"Combined-Shape-Copy-14",fill:"#CFD4DB"})))))},none:function(){return null}}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=r(21),l=n(i),a=r(22),o=n(a),s=r(6),d=n(s),u=r(7),f=n(u),p=r(8),c=n(p),h=r(9),m=n(h),v=r(10),g=n(v),b=r(17),C=n(b),_=r(23),x=n(_),w=function(e){function t(){return(0,f.default)(this,t),(0,m.default)(this,(t.__proto__||(0,d.default)(t)).apply(this,arguments))}return(0,g.default)(t,e),(0,c.default)(t,[{key:"render",value:function(){var e=this.props,t=e.hasError,r=e.isLoading,n=(0,o.default)(e,["hasError","isLoading"]);return r||this.props.src&&!t?C.default.createElement("img",(0,l.default)({alt:this.props.alt},n)):C.default.createElement(x.default,null)}}]),t}(b.PureComponent);w.propTypes={isLoading:b.PropTypes.bool,src:b.PropTypes.string,hasError:b.PropTypes.bool,alt:b.PropTypes.string,onError:b.PropTypes.func,onLoad:b.PropTypes.func},t.default=w},function(e,t){e.exports=require("babel-runtime/helpers/extends")},function(e,t){e.exports=require("babel-runtime/helpers/objectWithoutProperties")},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=r(17),l=n(i);t.default=function(){return l.default.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},l.default.createElement("g",{id:"User---sizes",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},l.default.createElement("g",{id:"xlarge---100px"},l.default.createElement("g",{id:"Defualt-avatar"},l.default.createElement("path",{d:"M50,0 C22.3833333,0 0,22.3888889 0,50 C0,77.6166667 22.3833333,100 50,100 C77.6111111,100 100,77.6166667 100,50 C100,22.3888889 77.6111111,0 50,0 L50,0 Z",id:"Fill-1",fill:"#1893E7"}),l.default.createElement("path",{d:"M50,19 C58.8373333,19 66,26.168 66,35 C66,43.8373333 58.8373333,51 50,51 C41.1626667,51 34,43.8373333 34,35 C34,26.168 41.1626667,19 50,19 L50,19 Z",id:"Path",fill:"#80D8FF"}),l.default.createElement("mask",{id:"mask-2",fill:"white"},l.default.createElement("path",{d:"M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"})),l.default.createElement("path",{fill:"#80D8FF",d:"M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"})))))}}]);
+module.exports=function(e){function r(n){if(t[n])return t[n].exports;var l=t[n]={exports:{},id:n,loaded:!1};return e[n].call(l.exports,l,l.exports,r),l.loaded=!0,l.exports}var t={};return r.m=e,r.c=t,r.p="",r(0)}([function(e,r,t){e.exports=t(1)},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0});var l=t(2);Object.defineProperty(r,"default",{enumerable:!0,get:function(){return n(l).default}});var a=t(16);Object.defineProperty(r,"Presence",{enumerable:!0,get:function(){return n(a).default}})},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0}),r.PRESENCE_TYPE=r.SIZE=void 0;var l=t(3),a=n(l),i=t(4),o=n(i),u=t(5),s=n(u),d=t(6),f=n(d),c=t(7),p=n(c),E=t(8),m=n(E),h=t(9),g=t(10),b=n(g),v=t(16),C=n(v),_=t(18),y=n(_),P=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},x=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},S=function(e){function r(){var e,t,n,l;(0,o.default)(this,r);for(var i=arguments.length,u=Array(i),s=0;s<i;s++)u[s]=arguments[s];return t=n=(0,f.default)(this,(e=r.__proto__||(0,a.default)(r)).call.apply(e,[this].concat(u))),n.state={hasError:!1,isLoading:!1},n.imageLoadedHandler=function(){n.setState({hasError:!1,isLoading:!1})},n.imageErrorHandler=function(){n.setState({hasError:!0,isLoading:!1})},l=t,(0,f.default)(n,l)}return(0,p.default)(r,e),(0,s.default)(r,[{key:"componentWillReceiveProps",value:function(e){this.props.src!==e.src&&this.setState({isLoading:!0})}},{key:"render",value:function(){var e=this.props,r=e.children,t=e.label,n=e.presence,l=e.presenceBorderColor,a=e.size,i=e.src,o=this.state,u=o.hasError,s=o.isLoading,d="none"!==n||r;return m.default.createElement(b.default,{size:a},m.default.createElement(g.ImageWrapper,{isLoading:s,"aria-label":t},s?null:m.default.createElement(y.default,{alt:t,src:i,onLoad:this.imageLoadedHandler,onError:this.imageErrorHandler,hasError:u})),d?m.default.createElement(g.PresenceWrapper,{size:a},m.default.createElement(C.default,{presence:n,borderColor:l,size:a},r)):null)}}]),r}(E.PureComponent);S.propTypes={children:E.PropTypes.element,label:E.PropTypes.string,presenceBorderColor:E.PropTypes.string,presence:E.PropTypes.oneOf(x.values),size:E.PropTypes.oneOf(P.values),src:E.PropTypes.string},S.defaultProps={presenceBorderColor:h.akColorPrimary3,presence:x.defaultValue,size:P.defaultValue},r.default=S},function(e,r){e.exports=require("babel-runtime/core-js/object/get-prototype-of")},function(e,r){e.exports=require("babel-runtime/helpers/classCallCheck")},function(e,r){e.exports=require("babel-runtime/helpers/createClass")},function(e,r){e.exports=require("babel-runtime/helpers/possibleConstructorReturn")},function(e,r){e.exports=require("babel-runtime/helpers/inherits")},function(e,r){e.exports=require("react")},function(e,r){e.exports=require("@atlaskit/util-shared-styles")},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0}),r.PresenceWrapper=r.ImageWrapper=r.getSize=void 0;var l=t(11),a=n(l),i=(0,a.default)(["\n  ","\n  display: inline-block;\n  position: relative;\n"],["\n  ","\n  display: inline-block;\n  position: relative;\n"]),o=(0,a.default)(["\n  align-content: center;\n  align-items: middle;\n  background-color: ",";\n  border-radius: 100%;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  transform: translateZ(0);\n  width: 100%;\n"],["\n  align-content: center;\n  align-items: middle;\n  background-color: ",";\n  border-radius: 100%;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  transform: translateZ(0);\n  width: 100%;\n"]),u=(0,a.default)(["\n  ","\n  position: absolute;\n"],["\n  ","\n  position: absolute;\n"]),s=t(12),d=n(s),f=t(9),c=t(13),p=(r.getSize=function(e){var r=e.size;return c.AVATAR_SIZES[r]},function(e){var r=e.size;return"\n  height: "+c.AVATAR_SIZES[r]+"px;\n  width: "+c.AVATAR_SIZES[r]+"px;\n"});r.default=d.default.div(i,p);var E=(r.ImageWrapper=d.default.div(o,function(e){var r=e.isLoading;return r?f.akColorN40:"transparent"}),function(e){var r=e.size;return"\n  bottom: "+c.PRESENCE_OFFSET[r]+"px;\n  height: "+c.PRESENCE_SIZES[r]+"px;\n  right: "+c.PRESENCE_OFFSET[r]+"px;\n  width: "+c.PRESENCE_SIZES[r]+"px;\n"});r.PresenceWrapper=d.default.div(u,E)},function(e,r){e.exports=require("babel-runtime/helpers/taggedTemplateLiteral")},function(e,r){e.exports=require("styled-components")},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0}),r.PRESENCE_SIZES=r.PRESENCE_OFFSET=r.PRESENCE_BORDER_WIDTH=r.AVATAR_SIZES=void 0;var l=t(14),a=n(l),i=t(15),o=n(i),u=t(9),s=(r.AVATAR_SIZES={xsmall:2*u.akGridSizeUnitless,small:3*u.akGridSizeUnitless,medium:4*u.akGridSizeUnitless,large:6*u.akGridSizeUnitless,xlarge:12*u.akGridSizeUnitless},r.PRESENCE_BORDER_WIDTH={xsmall:0,small:2,medium:2,large:3,xlarge:3}),d={};(0,o.default)(s).forEach(function(e){d[e]=s[e]*-1}),r.PRESENCE_OFFSET=(0,a.default)({},d,{xlarge:6}),r.PRESENCE_SIZES={xsmall:0,small:12,medium:12,large:18,xlarge:18}},function(e,r){e.exports=require("babel-runtime/helpers/extends")},function(e,r){e.exports=require("babel-runtime/core-js/object/keys")},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function l(e){var r=function(e){return b.default.createElement("svg",(0,h.default)({height:"100%",version:"1.1",viewBox:"0 0 8 8",width:"100%",xmlns:"http://www.w3.org/2000/svg"},e))};switch(e){case"busy":return b.default.createElement(r,null,b.default.createElement("circle",{fill:"#ED5451",cx:"4",cy:"4",r:"4"}),b.default.createElement("path",{fill:"#FFFFFF",d:"M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"}));case"offline":return b.default.createElement(r,null,b.default.createElement("path",{fill:"#6C798E",d:"M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"}),b.default.createElement("path",{fill:"#CFD4DB",d:"M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"}));case"online":return b.default.createElement(r,null,b.default.createElement("circle",{fill:"#48CC8C",cx:"4",cy:"4",r:"4"}));default:return null}}Object.defineProperty(r,"__esModule",{value:!0}),r.PRESENCE_TYPE=r.SIZE=void 0;var a=t(3),i=n(a),o=t(4),u=n(o),s=t(5),d=n(s),f=t(6),c=n(f),p=t(7),E=n(p),m=t(14),h=n(m);r.getPresenceSvg=l;var g=t(8),b=n(g),v=t(9),C=t(17),_=n(C),y=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},P=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},x=function(e){function r(){return(0,u.default)(this,r),(0,c.default)(this,(r.__proto__||(0,i.default)(r)).apply(this,arguments))}return(0,E.default)(r,e),(0,d.default)(r,[{key:"render",value:function(){var e=this.props,r=e.borderColor,t=e.children,n=e.presence,a=e.size,i={borderColor:r};return b.default.createElement(_.default,{size:a,style:i},t||l(n))}}]),r}(g.PureComponent);x.propTypes={borderColor:g.PropTypes.string,children:g.PropTypes.element,presence:g.PropTypes.oneOf(P.values),size:g.PropTypes.oneOf(y.values)},x.defaultProps={borderColor:v.akColorPrimary3,presence:P.defaultValue},r.default=x},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0});var l=t(11),a=n(l),i=(0,a.default)(["\n  align-content: center;\n  align-items: middle;\n  border-color: ",";\n  border-radius: 100%;\n  border-style: solid;\n  border-width: ","px;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  &:empty {\n    display: none;\n  }\n"],["\n  align-content: center;\n  align-items: middle;\n  border-color: ",";\n  border-radius: 100%;\n  border-style: solid;\n  border-width: ","px;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  &:empty {\n    display: none;\n  }\n"]),o=t(12),u=n(o),s=t(9),d=t(13);r.default=u.default.div(i,s.akColorPrimary3,function(e){var r=e.size;return d.PRESENCE_BORDER_WIDTH[r]||d.PRESENCE_BORDER_WIDTH.medium})},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0}),r.DefaultImage=void 0;var l=t(19),a=n(l),i=t(3),o=n(i),u=t(4),s=n(u),d=t(5),f=n(d),c=t(6),p=n(c),E=t(7),m=n(E),h=t(8),g=n(h),b=t(20),v=n(b),C=r.DefaultImage=function(){return g.default.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},g.default.createElement("path",{fill:"#1893E7",d:"M50,0 C22.3833333,0 0,22.3888889 0,50 C0,77.6166667 22.3833333,100 50,100 C77.6111111,100 100,77.6166667 100,50 C100,22.3888889 77.6111111,0 50,0 L50,0 Z"}),g.default.createElement("path",{fill:"#80D8FF",d:"M50,19 C58.8373333,19 66,26.168 66,35 C66,43.8373333 58.8373333,51 50,51 C41.1626667,51 34,43.8373333 34,35 C34,26.168 41.1626667,19 50,19 L50,19 Z"}),g.default.createElement("mask",{fill:"white"},g.default.createElement("path",{d:"M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"})),g.default.createElement("path",{fill:"#80D8FF",d:"M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"}))},_=function(e){function r(){return(0,s.default)(this,r),(0,p.default)(this,(r.__proto__||(0,o.default)(r)).apply(this,arguments))}return(0,m.default)(r,e),(0,f.default)(r,[{key:"render",value:function(){var e=this.props,r=e.hasError,t=e.isLoading,n=(0,a.default)(e,["hasError","isLoading"]),l=!t&&(!this.props.src||r);return l?g.default.createElement(C,null):g.default.createElement(v.default,n)}}]),r}(h.PureComponent);_.propTypes={alt:h.PropTypes.string,hasError:h.PropTypes.bool,isLoading:h.PropTypes.bool,onError:h.PropTypes.func,onLoad:h.PropTypes.func,src:h.PropTypes.string},r.default=_},function(e,r){e.exports=require("babel-runtime/helpers/objectWithoutProperties")},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0});var l=t(11),a=n(l),i=(0,a.default)(["\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n"],["\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n"]),o=t(12),u=n(o);r.default=u.default.img(i)}]);

dist/bundle.js

 !function(root, factory) {
-    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/helpers/defineProperty"), require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("classnames"), require("@atlaskit/util-shared-styles"), require("react"), require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/objectWithoutProperties")) : "function" == typeof define && define.amd ? define([ "babel-runtime/helpers/defineProperty", "babel-runtime/core-js/object/get-prototype-of", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/createClass", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "classnames", "@atlaskit/util-shared-styles", "react", "babel-runtime/helpers/extends", "babel-runtime/helpers/objectWithoutProperties" ], factory) : "object" == typeof exports ? exports["@atlaskit/avatar"] = factory(require("babel-runtime/helpers/defineProperty"), require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("classnames"), require("@atlaskit/util-shared-styles"), require("react"), require("babel-runtime/helpers/extends"), require("babel-runtime/helpers/objectWithoutProperties")) : root["@atlaskit/avatar"] = factory(root["babel-runtime/helpers/defineProperty"], root["babel-runtime/core-js/object/get-prototype-of"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/createClass"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root.classnames, root["@atlaskit/util-shared-styles"], root.react, root["babel-runtime/helpers/extends"], root["babel-runtime/helpers/objectWithoutProperties"]);
-}(this, function(__WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_10__, __WEBPACK_EXTERNAL_MODULE_11__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_17__, __WEBPACK_EXTERNAL_MODULE_21__, __WEBPACK_EXTERNAL_MODULE_22__) {
+    "object" == typeof exports && "object" == typeof module ? module.exports = factory(require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("@atlaskit/util-shared-styles"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("babel-runtime/helpers/extends"), require("babel-runtime/core-js/object/keys"), require("babel-runtime/helpers/objectWithoutProperties")) : "function" == typeof define && define.amd ? define([ "babel-runtime/core-js/object/get-prototype-of", "babel-runtime/helpers/classCallCheck", "babel-runtime/helpers/createClass", "babel-runtime/helpers/possibleConstructorReturn", "babel-runtime/helpers/inherits", "react", "@atlaskit/util-shared-styles", "babel-runtime/helpers/taggedTemplateLiteral", "styled-components", "babel-runtime/helpers/extends", "babel-runtime/core-js/object/keys", "babel-runtime/helpers/objectWithoutProperties" ], factory) : "object" == typeof exports ? exports["@atlaskit/avatar"] = factory(require("babel-runtime/core-js/object/get-prototype-of"), require("babel-runtime/helpers/classCallCheck"), require("babel-runtime/helpers/createClass"), require("babel-runtime/helpers/possibleConstructorReturn"), require("babel-runtime/helpers/inherits"), require("react"), require("@atlaskit/util-shared-styles"), require("babel-runtime/helpers/taggedTemplateLiteral"), require("styled-components"), require("babel-runtime/helpers/extends"), require("babel-runtime/core-js/object/keys"), require("babel-runtime/helpers/objectWithoutProperties")) : root["@atlaskit/avatar"] = factory(root["babel-runtime/core-js/object/get-prototype-of"], root["babel-runtime/helpers/classCallCheck"], root["babel-runtime/helpers/createClass"], root["babel-runtime/helpers/possibleConstructorReturn"], root["babel-runtime/helpers/inherits"], root.react, root["@atlaskit/util-shared-styles"], root["babel-runtime/helpers/taggedTemplateLiteral"], root["styled-components"], root["babel-runtime/helpers/extends"], root["babel-runtime/core-js/object/keys"], root["babel-runtime/helpers/objectWithoutProperties"]);
+}(this, function(__WEBPACK_EXTERNAL_MODULE_3__, __WEBPACK_EXTERNAL_MODULE_4__, __WEBPACK_EXTERNAL_MODULE_5__, __WEBPACK_EXTERNAL_MODULE_6__, __WEBPACK_EXTERNAL_MODULE_7__, __WEBPACK_EXTERNAL_MODULE_8__, __WEBPACK_EXTERNAL_MODULE_9__, __WEBPACK_EXTERNAL_MODULE_11__, __WEBPACK_EXTERNAL_MODULE_12__, __WEBPACK_EXTERNAL_MODULE_14__, __WEBPACK_EXTERNAL_MODULE_15__, __WEBPACK_EXTERNAL_MODULE_19__) {
     /******/
@@ -71,6 +71,4 @@ return function(modules) {
     function(module, exports, __webpack_require__) {
-        module.exports = __webpack_require__(3);
+        module.exports = __webpack_require__(1);
     }, /* 1 */
-    , /* 2 */
-    , /* 3 */
     /***/
@@ -86,6 +84,18 @@ function(module, exports, __webpack_require__) {
             value: !0
-        }), exports.Presence = exports.default = void 0;
-        var _Avatar = __webpack_require__(4), _Avatar2 = _interopRequireDefault(_Avatar), _Presence2 = __webpack_require__(18), _Presence3 = _interopRequireDefault(_Presence2);
-        exports.default = _Avatar2.default, exports.Presence = _Presence3.default;
-    }, /* 4 */
+        });
+        var _Avatar = __webpack_require__(2);
+        Object.defineProperty(exports, "default", {
+            enumerable: !0,
+            get: function() {
+                return _interopRequireDefault(_Avatar).default;
+            }
+        });
+        var _Presence = __webpack_require__(16);
+        Object.defineProperty(exports, "Presence", {
+            enumerable: !0,
+            get: function() {
+                return _interopRequireDefault(_Presence).default;
+            }
+        });
+    }, /* 2 */
     /***/
@@ -101,6 +111,9 @@ function(module, exports, __webpack_require__) {
             value: !0
-        }), exports.SIZE = void 0;
-        var _defineProperty2 = __webpack_require__(5), _defineProperty3 = _interopRequireDefault(_defineProperty2), _getPrototypeOf = __webpack_require__(6), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(7), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(8), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(9), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(10), _inherits3 = _interopRequireDefault(_inherits2), _classnames = __webpack_require__(11), _classnames2 = _interopRequireDefault(_classnames), _utilSharedStyles = __webpack_require__(12), _styles = __webpack_require__(13), _styles2 = _interopRequireDefault(_styles), _react = __webpack_require__(17), _react2 = _interopRequireDefault(_react), _Presence = __webpack_require__(18), _Presence2 = _interopRequireDefault(_Presence), _Image = __webpack_require__(20), _Image2 = _interopRequireDefault(_Image), SIZE = exports.SIZE = {
+        }), exports.PRESENCE_TYPE = exports.SIZE = void 0;
+        var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _utilSharedStyles = __webpack_require__(9), _Avatar = __webpack_require__(10), _Avatar2 = _interopRequireDefault(_Avatar), _Presence = __webpack_require__(16), _Presence2 = _interopRequireDefault(_Presence), _Image = __webpack_require__(18), _Image2 = _interopRequireDefault(_Image), SIZE = exports.SIZE = {
             values: [ "xsmall", "small", "medium", "large", "xlarge" ],
-            defaultValue: "small"
+            defaultValue: "medium"
+        }, PRESENCE_TYPE = exports.PRESENCE_TYPE = {
+            values: [ "none", "online", "busy", "offline" ],
+            defaultValue: "none"
         }, Avatar = function(_PureComponent) {
@@ -113,8 +126,8 @@ function Avatar() {
                 _getPrototypeOf2.default)(Avatar)).call.apply(_ref, [ this ].concat(args))), _this.state = {
-                    isLoading: !1,
-                    hasError: !1
+                    hasError: !1,
+                    isLoading: !1
                 }, _this.imageLoadedHandler = function() {
                     _this.setState({
-                        isLoading: !1,
-                        hasError: !1
+                        hasError: !1,
+                        isLoading: !1
                     });
@@ -138,29 +151,21 @@ }, _this.imageErrorHandler = function() {
                 value: function() {
-                    var _classNames2, _props = this.props, presenceBorderColor = _props.presenceBorderColor, presence = _props.presence, size = _props.size, src = _props.src, label = _props.label, children = _props.children, sizeClasses = (0, 
-                    _classnames2.default)([ _styles2.default[size], _styles2.default.size ]), imgWrapperClasses = (0, 
-                    _classnames2.default)((0, _defineProperty3.default)({}, _styles2.default.loaded, !this.state.isLoading), _styles2.default.imgWrapper), presenceWrapperClasses = (0, 
-                    _classnames2.default)((_classNames2 = {}, (0, _defineProperty3.default)(_classNames2, _styles2.default.hidden, "none" === presence && !children), 
-                    (0, _defineProperty3.default)(_classNames2, _styles2.default.presenceWrapper, !0), 
-                    _classNames2));
-                    return _react2.default.createElement("div", {
-                        className: _styles2.default.root
-                    }, _react2.default.createElement("div", {
-                        className: sizeClasses
-                    }, _react2.default.createElement("div", {
-                        className: imgWrapperClasses,
+                    var _props = this.props, children = _props.children, label = _props.label, presence = _props.presence, presenceBorderColor = _props.presenceBorderColor, size = _props.size, src = _props.src, _state = this.state, hasError = _state.hasError, isLoading = _state.isLoading, showPresence = "none" !== presence || children;
+                    return _react2.default.createElement(_Avatar2.default, {
+                        size: size
+                    }, _react2.default.createElement(_Avatar.ImageWrapper, {
+                        isLoading: isLoading,
                         "aria-label": label
-                    }, _react2.default.createElement(_Image2.default, {
+                    }, isLoading ? null : _react2.default.createElement(_Image2.default, {
                         alt: label,
                         src: src,
-                        className: _styles2.default.img,
                         onLoad: this.imageLoadedHandler,
                         onError: this.imageErrorHandler,
-                        hasError: this.state.hasError,
-                        isLoading: this.state.isLoading
-                    })), _react2.default.createElement("div", {
-                        className: presenceWrapperClasses
+                        hasError: hasError
+                    })), showPresence ? _react2.default.createElement(_Avatar.PresenceWrapper, {
+                        size: size
                     }, _react2.default.createElement(_Presence2.default, {
                         presence: presence,
-                        borderColor: presenceBorderColor
-                    }, children))));
+                        borderColor: presenceBorderColor,
+                        size: size
+                    }, children)) : null);
                 }
@@ -170,2 +175,9 @@ } ]), Avatar;
         Avatar.propTypes = {
+            /** Content to use as a custom presence indicator. Accepts any React element.
+	  For best results, it is recommended to use square content with height and
+	  width of 100% */
+            children: _react.PropTypes.element,
+            /** Defines the label for the Avatar used by screen readers as fallback
+	  content if the image fails to load. */
+            label: _react.PropTypes.string,
             /** Used to override the default border color of the presence indicator.
@@ -176,20 +188,21 @@ Accepts any color argument that the border-color CSS property accepts. */
 	  Refer to presence values on the Presence component */
-            presence: _react.PropTypes.oneOf(_Presence.PRESENCE_TYPE.values),
+            presence: _react.PropTypes.oneOf(PRESENCE_TYPE.values),
             /** Defines the size of the avatar */
             size: _react.PropTypes.oneOf(SIZE.values),
             /** A url to load an image from (this can also be a base64 encoded image) */
-            src: _react.PropTypes.string,
-            /** Defines the label for the Avatar used by screen readers as fallback
-	  content if the image fails to load. */
-            label: _react.PropTypes.string,
-            /** Content to use as a custom presence indicator. Accepts any React element.
-	  For best results, it is recommended to use square content with height and
-	  width of 100% */
-            children: _react.PropTypes.element
+            src: _react.PropTypes.string
         }, Avatar.defaultProps = {
             presenceBorderColor: _utilSharedStyles.akColorPrimary3,
             // white
-            presence: "none",
-            size: "medium"
+            presence: PRESENCE_TYPE.defaultValue,
+            size: SIZE.defaultValue
         }, exports.default = Avatar;
+    }, /* 3 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_3__;
+    }, /* 4 */
+    /***/
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_4__;
     }, /* 5 */
@@ -217,4 +230,33 @@ /***/
     /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_10__;
+    function(module, exports, __webpack_require__) {
+        "use strict";
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        }), exports.PresenceWrapper = exports.ImageWrapper = exports.getSize = void 0;
+        var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  ", "\n  display: inline-block;\n  position: relative;\n" ], [ "\n  ", "\n  display: inline-block;\n  position: relative;\n" ]), _templateObject2 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  align-content: center;\n  align-items: middle;\n  background-color: ", ";\n  border-radius: 100%;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  transform: translateZ(0);\n  width: 100%;\n" ], [ "\n  align-content: center;\n  align-items: middle;\n  background-color: ", ";\n  border-radius: 100%;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  transform: translateZ(0);\n  width: 100%;\n" ]), _templateObject3 = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  ", "\n  position: absolute;\n" ], [ "\n  ", "\n  position: absolute;\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(9), _constants = __webpack_require__(13), getAvatarDimensions = (exports.getSize = function(_ref) {
+            var size = _ref.size;
+            return _constants.AVATAR_SIZES[size];
+        }, function(_ref2) {
+            var size = _ref2.size;
+            return "\n  height: " + _constants.AVATAR_SIZES[size] + "px;\n  width: " + _constants.AVATAR_SIZES[size] + "px;\n";
+        });
+        exports.default = _styledComponents2.default.div(_templateObject, getAvatarDimensions);
+        // IMAGE WRAPPER
+        // translateZ used to invoke the GPU -- otherwise overflow is ignored when animating
+        var getPresenceLayout = (exports.ImageWrapper = _styledComponents2.default.div(_templateObject2, function(_ref3) {
+            var isLoading = _ref3.isLoading;
+            return isLoading ? _utilSharedStyles.akColorN40 : "transparent";
+        }), function(_ref4) {
+            var size = _ref4.size;
+            return "\n  bottom: " + _constants.PRESENCE_OFFSET[size] + "px;\n  height: " + _constants.PRESENCE_SIZES[size] + "px;\n  right: " + _constants.PRESENCE_OFFSET[size] + "px;\n  width: " + _constants.PRESENCE_SIZES[size] + "px;\n";
+        });
+        exports.PresenceWrapper = _styledComponents2.default.div(_templateObject3, getPresenceLayout);
     }, /* 11 */
@@ -231,226 +273,47 @@ /***/
     function(module, exports, __webpack_require__) {
-        // style-loader: Adds some css to the DOM by adding a <style> tag
-        // load the styles
-        var content = __webpack_require__(14);
-        "string" == typeof content && (content = [ [ module.id, content, "" ] ]);
-        // add the styles to the DOM
-        __webpack_require__(16)(content, {});
-        content.locals && (module.exports = content.locals);
+        "use strict";
+        function _interopRequireDefault(obj) {
+            return obj && obj.__esModule ? obj : {
+                default: obj
+            };
+        }
+        Object.defineProperty(exports, "__esModule", {
+            value: !0
+        }), exports.PRESENCE_SIZES = exports.PRESENCE_OFFSET = exports.PRESENCE_BORDER_WIDTH = exports.AVATAR_SIZES = void 0;
+        var _extends2 = __webpack_require__(14), _extends3 = _interopRequireDefault(_extends2), _keys = __webpack_require__(15), _keys2 = _interopRequireDefault(_keys), _utilSharedStyles = __webpack_require__(9), PRESENCE_BORDER_WIDTH = (exports.AVATAR_SIZES = {
+            xsmall: 2 * _utilSharedStyles.akGridSizeUnitless,
+            small: 3 * _utilSharedStyles.akGridSizeUnitless,
+            medium: 4 * _utilSharedStyles.akGridSizeUnitless,
+            large: 6 * _utilSharedStyles.akGridSizeUnitless,
+            xlarge: 12 * _utilSharedStyles.akGridSizeUnitless
+        }, exports.PRESENCE_BORDER_WIDTH = {
+            xsmall: 0,
+            small: 2,
+            medium: 2,
+            large: 3,
+            xlarge: 3
+        }), offsetMap = {};
+        (0, _keys2.default)(PRESENCE_BORDER_WIDTH).forEach(function(size) {
+            offsetMap[size] = PRESENCE_BORDER_WIDTH[size] * -1;
+        });
+        exports.PRESENCE_OFFSET = (0, _extends3.default)({}, offsetMap, {
+            xlarge: 6
+        }), exports.PRESENCE_SIZES = {
+            xsmall: 0,
+            small: 12,
+            medium: 12,
+            large: 18,
+            xlarge: 18
+        };
     }, /* 14 */
     /***/
-    function(module, exports, __webpack_require__) {
-        exports = module.exports = __webpack_require__(15)(), // imports
-        // module
-        exports.push([ module.id, "._9h_qSYw_07agRklMEYgZ-{display:inline-block;position:relative}.d56twF_tOLvWUTfi4NEkK{height:16px;width:16px}.d56twF_tOLvWUTfi4NEkK ._17kCbvrCUfKkCw95o0Bw2Z{right:0;height:0;bottom:0;width:0}._2Qe1bk0MDSMevT6_wjzkGO{height:24px;width:24px}._2Qe1bk0MDSMevT6_wjzkGO ._17kCbvrCUfKkCw95o0Bw2Z{right:-2px;height:12px;bottom:-2px;width:12px}._2Qe1bk0MDSMevT6_wjzkGO ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:2px}._3Zh4OVkU9R-0aXK8kOSlE2{height:32px;width:32px}._3Zh4OVkU9R-0aXK8kOSlE2 ._17kCbvrCUfKkCw95o0Bw2Z{right:-2px;height:12px;bottom:-2px;width:12px}._3Zh4OVkU9R-0aXK8kOSlE2 ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:2px}._1zmRBj0NQxbaC7H5LmrYU9{height:48px;width:48px}._1zmRBj0NQxbaC7H5LmrYU9 ._17kCbvrCUfKkCw95o0Bw2Z{right:-3px;height:18px;bottom:-3px;width:18px}._1zmRBj0NQxbaC7H5LmrYU9 ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:3px}._3RPL7Nj5OpQKyuc2GNhsFa{height:96px;width:96px}._3RPL7Nj5OpQKyuc2GNhsFa ._17kCbvrCUfKkCw95o0Bw2Z{right:6px;height:18px;bottom:6px;width:18px}._3RPL7Nj5OpQKyuc2GNhsFa ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:3px}.N0ViSLhqf5E4eCiBrlCQ-{align-content:center;-webkit-box-align:middle;align-items:middle;background-color:#dfe1e6;border-radius:100%;display:-webkit-box;display:flex;height:100%;overflow:hidden;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.N0ViSLhqf5E4eCiBrlCQ- img{height:100%;width:100%;display:none}.N0ViSLhqf5E4eCiBrlCQ-._1tkc2q_p2ssdXUnAQ3KFqH{background-color:transparent}.N0ViSLhqf5E4eCiBrlCQ-._1tkc2q_p2ssdXUnAQ3KFqH img{display:inline-block}._17kCbvrCUfKkCw95o0Bw2Z{position:absolute}._2AdNR3UG8ZqVF0X-mZvi8w{align-content:center;-webkit-box-align:middle;align-items:middle;border:2px solid #fff;border-radius:100%;box-sizing:border-box;display:-webkit-box;display:flex;height:100%;overflow:hidden;width:100%}._2AdNR3UG8ZqVF0X-mZvi8w:empty{display:none}._3PV6tdHN0OemnbDiwUBett{display:none}", "" ]), 
-        // exports
-        exports.locals = {
-            root: "_9h_qSYw_07agRklMEYgZ-",
-            root: "_9h_qSYw_07agRklMEYgZ-",
-            xsmall: "d56twF_tOLvWUTfi4NEkK",
-            xsmall: "d56twF_tOLvWUTfi4NEkK",
-            "presence-wrapper": "_17kCbvrCUfKkCw95o0Bw2Z",
-            presenceWrapper: "_17kCbvrCUfKkCw95o0Bw2Z",
-            small: "_2Qe1bk0MDSMevT6_wjzkGO",
-            small: "_2Qe1bk0MDSMevT6_wjzkGO",
-            presence: "_2AdNR3UG8ZqVF0X-mZvi8w",
-            presence: "_2AdNR3UG8ZqVF0X-mZvi8w",
-            medium: "_3Zh4OVkU9R-0aXK8kOSlE2",
-            medium: "_3Zh4OVkU9R-0aXK8kOSlE2",
-            large: "_1zmRBj0NQxbaC7H5LmrYU9",
-            large: "_1zmRBj0NQxbaC7H5LmrYU9",
-            xlarge: "_3RPL7Nj5OpQKyuc2GNhsFa",
-            xlarge: "_3RPL7Nj5OpQKyuc2GNhsFa",
-            imgWrapper: "N0ViSLhqf5E4eCiBrlCQ-",
-            imgWrapper: "N0ViSLhqf5E4eCiBrlCQ-",
-            loaded: "_1tkc2q_p2ssdXUnAQ3KFqH",
-            loaded: "_1tkc2q_p2ssdXUnAQ3KFqH",
-            hidden: "_3PV6tdHN0OemnbDiwUBett",
-            hidden: "_3PV6tdHN0OemnbDiwUBett"
-        };
+    function(module, exports) {
+        module.exports = __WEBPACK_EXTERNAL_MODULE_14__;
     }, /* 15 */
     /***/
     function(module, exports) {
-        /*
-		MIT License http://www.opensource.org/licenses/mit-license.php
-		Author Tobias Koppers @sokra
-	*/
-        // css base code, injected by the css-loader
-        module.exports = function() {
-            var list = [];
-            // return the list of modules as css string
-            // import a list of modules into the list
-            return list.toString = function() {
-                for (var result = [], i = 0; i < this.length; i++) {
-                    var item = this[i];
-                    item[2] ? result.push("@media " + item[2] + "{" + item[1] + "}") : result.push(item[1]);
-                }
-                return result.join("");
-            }, list.i = function(modules, mediaQuery) {
-                "string" == typeof modules && (modules = [ [ null, modules, "" ] ]);
-                for (var alreadyImportedModules = {}, i = 0; i < this.length; i++) {
-                    var id = this[i][0];
-                    "number" == typeof id && (alreadyImportedModules[id] = !0);
-                }
-                for (i = 0; i < modules.length; i++) {
-                    var item = modules[i];
-                    // skip already imported module
-                    // this implementation is not 100% perfect for weird media query combinations
-                    //  when a module is imported multiple times with different media queries.
-                    //  I hope this will never occur (Hey this way we have smaller bundles)
-                    "number" == typeof item[0] && alreadyImportedModules[item[0]] || (mediaQuery && !item[2] ? item[2] = mediaQuery : mediaQuery && (item[2] = "(" + item[2] + ") and (" + mediaQuery + ")"), 
-                    list.push(item));
-                }
-            }, list;
-        };
+        module.exports = __WEBPACK_EXTERNAL_MODULE_15__;
     }, /* 16 */
     /***/
     function(module, exports, __webpack_require__) {
-        function addStylesToDom(styles, options) {
-            for (var i = 0; i < styles.length; i++) {
-                var item = styles[i], domStyle = stylesInDom[item.id];
-                if (domStyle) {
-                    domStyle.refs++;
-                    for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j](item.parts[j]);
-                    for (;j < item.parts.length; j++) domStyle.parts.push(addStyle(item.parts[j], options));
-                } else {
-                    for (var parts = [], j = 0; j < item.parts.length; j++) parts.push(addStyle(item.parts[j], options));
-                    stylesInDom[item.id] = {
-                        id: item.id,
-                        refs: 1,
-                        parts: parts
-                    };
-                }
-            }
-        }
-        function listToStyles(list) {
-            for (var styles = [], newStyles = {}, i = 0; i < list.length; i++) {
-                var item = list[i], id = item[0], css = item[1], media = item[2], sourceMap = item[3], part = {
-                    css: css,
-                    media: media,
-                    sourceMap: sourceMap
-                };
-                newStyles[id] ? newStyles[id].parts.push(part) : styles.push(newStyles[id] = {
-                    id: id,
-                    parts: [ part ]
-                });
-            }
-            return styles;
-        }
-        function insertStyleElement(options, styleElement) {
-            var head = getHeadElement(), lastStyleElementInsertedAtTop = styleElementsInsertedAtTop[styleElementsInsertedAtTop.length - 1];
-            if ("top" === options.insertAt) lastStyleElementInsertedAtTop ? lastStyleElementInsertedAtTop.nextSibling ? head.insertBefore(styleElement, lastStyleElementInsertedAtTop.nextSibling) : head.appendChild(styleElement) : head.insertBefore(styleElement, head.firstChild), 
-            styleElementsInsertedAtTop.push(styleElement); else {
-                if ("bottom" !== options.insertAt) throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");
-                head.appendChild(styleElement);
-            }
-        }
-        function removeStyleElement(styleElement) {
-            styleElement.parentNode.removeChild(styleElement);
-            var idx = styleElementsInsertedAtTop.indexOf(styleElement);
-            idx >= 0 && styleElementsInsertedAtTop.splice(idx, 1);
-        }
-        function createStyleElement(options) {
-            var styleElement = document.createElement("style");
-            return styleElement.type = "text/css", insertStyleElement(options, styleElement), 
-            styleElement;
-        }
-        function createLinkElement(options) {
-            var linkElement = document.createElement("link");
-            return linkElement.rel = "stylesheet", insertStyleElement(options, linkElement), 
-            linkElement;
-        }
-        function addStyle(obj, options) {
-            var styleElement, update, remove;
-            if (options.singleton) {
-                var styleIndex = singletonCounter++;
-                styleElement = singletonElement || (singletonElement = createStyleElement(options)), 
-                update = applyToSingletonTag.bind(null, styleElement, styleIndex, !1), remove = applyToSingletonTag.bind(null, styleElement, styleIndex, !0);
-            } else obj.sourceMap && "function" == typeof URL && "function" == typeof URL.createObjectURL && "function" == typeof URL.revokeObjectURL && "function" == typeof Blob && "function" == typeof btoa ? (styleElement = createLinkElement(options), 
-            update = updateLink.bind(null, styleElement), remove = function() {
-                removeStyleElement(styleElement), styleElement.href && URL.revokeObjectURL(styleElement.href);
-            }) : (styleElement = createStyleElement(options), update = applyToTag.bind(null, styleElement), 
-            remove = function() {
-                removeStyleElement(styleElement);
-            });
-            return update(obj), function(newObj) {
-                if (newObj) {
-                    if (newObj.css === obj.css && newObj.media === obj.media && newObj.sourceMap === obj.sourceMap) return;
-                    update(obj = newObj);
-                } else remove();
-            };
-        }
-        function applyToSingletonTag(styleElement, index, remove, obj) {
-            var css = remove ? "" : obj.css;
-            if (styleElement.styleSheet) styleElement.styleSheet.cssText = replaceText(index, css); else {
-                var cssNode = document.createTextNode(css), childNodes = styleElement.childNodes;
-                childNodes[index] && styleElement.removeChild(childNodes[index]), childNodes.length ? styleElement.insertBefore(cssNode, childNodes[index]) : styleElement.appendChild(cssNode);
-            }
-        }
-        function applyToTag(styleElement, obj) {
-            var css = obj.css, media = obj.media;
-            if (media && styleElement.setAttribute("media", media), styleElement.styleSheet) styleElement.styleSheet.cssText = css; else {
-                for (;styleElement.firstChild; ) styleElement.removeChild(styleElement.firstChild);
-                styleElement.appendChild(document.createTextNode(css));
-            }
-        }
-        function updateLink(linkElement, obj) {
-            var css = obj.css, sourceMap = obj.sourceMap;
-            sourceMap && (// http://stackoverflow.com/a/26603875
-            css += "\n/*# sourceMappingURL=data:application/json;base64," + btoa(unescape(encodeURIComponent(JSON.stringify(sourceMap)))) + " */");
-            var blob = new Blob([ css ], {
-                type: "text/css"
-            }), oldSrc = linkElement.href;
-            linkElement.href = URL.createObjectURL(blob), oldSrc && URL.revokeObjectURL(oldSrc);
-        }
-        /*
-		MIT License http://www.opensource.org/licenses/mit-license.php
-		Author Tobias Koppers @sokra
-	*/
-        var stylesInDom = {}, memoize = function(fn) {
-            var memo;
-            return function() {
-                return "undefined" == typeof memo && (memo = fn.apply(this, arguments)), memo;
-            };
-        }, isOldIE = memoize(function() {
-            return /msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase());
-        }), getHeadElement = memoize(function() {
-            return document.head || document.getElementsByTagName("head")[0];
-        }), singletonElement = null, singletonCounter = 0, styleElementsInsertedAtTop = [];
-        module.exports = function(list, options) {
-            options = options || {}, // Force single-tag solution on IE6-9, which has a hard limit on the # of <style>
-            // tags it will allow on a page
-            "undefined" == typeof options.singleton && (options.singleton = isOldIE()), // By default, add <style> tags to the bottom of <head>.
-            "undefined" == typeof options.insertAt && (options.insertAt = "bottom");
-            var styles = listToStyles(list);
-            return addStylesToDom(styles, options), function(newList) {
-                for (var mayRemove = [], i = 0; i < styles.length; i++) {
-                    var item = styles[i], domStyle = stylesInDom[item.id];
-                    domStyle.refs--, mayRemove.push(domStyle);
-                }
-                if (newList) {
-                    var newStyles = listToStyles(newList);
-                    addStylesToDom(newStyles, options);
-                }
-                for (var i = 0; i < mayRemove.length; i++) {
-                    var domStyle = mayRemove[i];
-                    if (0 === domStyle.refs) {
-                        for (var j = 0; j < domStyle.parts.length; j++) domStyle.parts[j]();
-                        delete stylesInDom[domStyle.id];
-                    }
-                }
-            };
-        };
-        var replaceText = function() {
-            var textStore = [];
-            return function(index, replacement) {
-                return textStore[index] = replacement, textStore.filter(Boolean).join("\n");
-            };
-        }();
-    }, /* 17 */
-    /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_17__;
-    }, /* 18 */
-    /***/
-    function(module, exports, __webpack_require__) {
         "use strict";
@@ -462,11 +325,54 @@ function _interopRequireDefault(obj) {
         }
+        function getPresenceSvg(presence) {
+            var Svg = function(props) {
+                return _react2.default.createElement("svg", (0, _extends3.default)({
+                    height: "100%",
+                    version: "1.1",
+                    viewBox: "0 0 8 8",
+                    width: "100%",
+                    xmlns: "http://www.w3.org/2000/svg"
+                }, props));
+            };
+            switch (presence) {
+              case "busy":
+                return _react2.default.createElement(Svg, null, _react2.default.createElement("circle", {
+                    fill: "#ED5451",
+                    cx: "4",
+                    cy: "4",
+                    r: "4"
+                }), _react2.default.createElement("path", {
+                    fill: "#FFFFFF",
+                    d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
+                }));
+
+              case "offline":
+                return _react2.default.createElement(Svg, null, _react2.default.createElement("path", {
+                    fill: "#6C798E",
+                    d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
+                }), _react2.default.createElement("path", {
+                    fill: "#CFD4DB",
+                    d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"
+                }));
+
+              case "online":
+                return _react2.default.createElement(Svg, null, _react2.default.createElement("circle", {
+                    fill: "#48CC8C",
+                    cx: "4",
+                    cy: "4",
+                    r: "4"
+                }));
+
+              default:
+                return null;
+            }
+        }
         Object.defineProperty(exports, "__esModule", {
             value: !0
-        }), exports.PRESENCE_TYPE = void 0;
-        var _getPrototypeOf = __webpack_require__(6), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(7), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(8), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(9), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(10), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(17), _react2 = _interopRequireDefault(_react), _utilSharedStyles = __webpack_require__(12), _icons = __webpack_require__(19), _icons2 = _interopRequireDefault(_icons), _styles = __webpack_require__(14), _styles2 = _interopRequireDefault(_styles);
-        // This hack is to make sure that styles.locals exists when style loading is a noop (when we are
-        // running tests).
-        // TODO: Remove in AK-2025
-        _styles2.default.locals = _styles2.default.locals || {};
-        var PRESENCE_TYPE = exports.PRESENCE_TYPE = {
+        }), exports.PRESENCE_TYPE = exports.SIZE = void 0;
+        var _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _extends2 = __webpack_require__(14), _extends3 = _interopRequireDefault(_extends2);
+        exports.getPresenceSvg = getPresenceSvg;
+        var _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _utilSharedStyles = __webpack_require__(9), _Presence = __webpack_require__(17), _Presence2 = _interopRequireDefault(_Presence), SIZE = exports.SIZE = {
+            values: [ "xsmall", "small", "medium", "large", "xlarge" ],
+            defaultValue: "medium"
+        }, PRESENCE_TYPE = exports.PRESENCE_TYPE = {
             values: [ "none", "online", "busy", "offline" ],
@@ -482,9 +388,9 @@ defaultValue: "none"
                 value: function() {
-                    var wrapperStyles = {
-                        borderColor: this.props.borderColor
-                    }, PresenceToDisplay = _icons2.default[this.props.presence] || null;
-                    return _react2.default.createElement("div", {
-                        className: _styles2.default.locals.presence,
-                        style: wrapperStyles
-                    }, this.props.children ? this.props.children : _react2.default.createElement(PresenceToDisplay, null));
+                    var _props = this.props, borderColor = _props.borderColor, children = _props.children, presence = _props.presence, size = _props.size, style = {
+                        borderColor: borderColor
+                    };
+                    return _react2.default.createElement(_Presence2.default, {
+                        size: size,
+                        style: style
+                    }, children || getPresenceSvg(presence));
                 }
@@ -494,5 +400,2 @@ } ]), Presence;
         Presence.propTypes = {
-            /** Content to use as a custom presence indicator (usually not required if
-	  consuming Presence separate to Avatar) */
-            children: _react.PropTypes.element,
             /** Used to override the default border color of the presence indicator.
@@ -502,4 +405,9 @@ Accepts any color argument that the border-color CSS property accepts */
             /** Content to use as a custom presence indicator (usually not required if
+	  consuming Presence separate to Avatar) */
+            children: _react.PropTypes.element,
+            /** Content to use as a custom presence indicator (usually not required if
 	  consuming Presence separate to Avatar). */
-            presence: _react.PropTypes.oneOf(PRESENCE_TYPE.values)
+            presence: _react.PropTypes.oneOf(PRESENCE_TYPE.values),
+            /** Defines the size of the presence */
+            size: _react.PropTypes.oneOf(SIZE.values)
         }, Presence.defaultProps = {
@@ -510,3 +418,3 @@ borderColor: _utilSharedStyles.akColorPrimary3,
         }, exports.default = Presence;
-    }, /* 19 */
+    }, /* 17 */
     /***/
@@ -523,89 +431,10 @@ function(module, exports, __webpack_require__) {
         });
-        var _react = __webpack_require__(17), _react2 = _interopRequireDefault(_react);
-        exports.default = {
-            // eslint-disable-next-line max-len
-            online: function() {
-                return _react2.default.createElement("svg", {
-                    width: "100%",
-                    height: "100%",
-                    viewBox: "0 0 8 8",
-                    xmlns: "http://www.w3.org/2000/svg"
-                }, _react2.default.createElement("g", {
-                    id: "User---presence",
-                    stroke: "none",
-                    strokeWidth: "1",
-                    fill: "none",
-                    fillRule: "evenodd"
-                }, _react2.default.createElement("g", {
-                    id: "Available",
-                    fill: "#48CC8C"
-                }, _react2.default.createElement("circle", {
-                    id: "Oval-3-Copy-7",
-                    cx: "4",
-                    cy: "4",
-                    r: "4"
-                }))));
-            },
-            // TODO move this to ak-icon
-            // eslint-disable-next-line max-len, react/style-prop-object
-            busy: function() {
-                return _react2.default.createElement("svg", {
-                    width: "100%",
-                    height: "100%",
-                    xmlns: "http://www.w3.org/2000/svg",
-                    x: "0px",
-                    y: "0px",
-                    viewBox: "0 0 8 8",
-                    style: {
-                        enableBackground: "new 0 0 8 8"
-                    }
-                }, _react2.default.createElement("g", {
-                    id: "User---presence"
-                }, _react2.default.createElement("g", {
-                    id: "Busy-light"
-                }, _react2.default.createElement("circle", {
-                    id: "Combined-Shape-Copy-5",
-                    fill: "#ED5451",
-                    cx: "4",
-                    cy: "4",
-                    r: "4"
-                }), _react2.default.createElement("path", {
-                    id: "Rectangle",
-                    fill: "#FFFFFF",
-                    d: "M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"
-                }))));
-            },
-            // TODO move this to ak-icon
-            // eslint-disable-next-line max-len
-            offline: function() {
-                return _react2.default.createElement("svg", {
-                    width: "100%",
-                    height: "100%",
-                    viewBox: "0 0 8 8",
-                    xmlns: "http://www.w3.org/2000/svg"
-                }, _react2.default.createElement("g", {
-                    id: "User---presence",
-                    stroke: "none",
-                    strokeWidth: "1",
-                    fill: "none",
-                    fillRule: "evenodd"
-                }, _react2.default.createElement("g", {
-                    id: "Unavailable"
-                }, _react2.default.createElement("g", {
-                    id: "presence---offline"
-                }, _react2.default.createElement("path", {
-                    d: "M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z",
-                    id: "Combined-Shape-Copy-14",
-                    fill: "#6C798E"
-                }), _react2.default.createElement("path", {
-                    d: "M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z",
-                    id: "Combined-Shape-Copy-14",
-                    fill: "#CFD4DB"
-                })))));
-            },
-            none: function() {
-                return null;
-            }
-        };
-    }, /* 20 */
+        var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  align-content: center;\n  align-items: middle;\n  border-color: ", ";\n  border-radius: 100%;\n  border-style: solid;\n  border-width: ", "px;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  &:empty {\n    display: none;\n  }\n" ], [ "\n  align-content: center;\n  align-items: middle;\n  border-color: ", ";\n  border-radius: 100%;\n  border-style: solid;\n  border-width: ", "px;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  &:empty {\n    display: none;\n  }\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents), _utilSharedStyles = __webpack_require__(9), _constants = __webpack_require__(13);
+        // set fallbacks for border color/width to protect consumers from invalid values
+        exports.default = _styledComponents2.default.div(_templateObject, _utilSharedStyles.akColorPrimary3, function(_ref) {
+            var size = _ref.size;
+            return _constants.PRESENCE_BORDER_WIDTH[size] || _constants.PRESENCE_BORDER_WIDTH.medium;
+        });
+    }, /* 18 */
     /***/
@@ -621,4 +450,25 @@ function(module, exports, __webpack_require__) {
             value: !0
-        });
-        var _extends2 = __webpack_require__(21), _extends3 = _interopRequireDefault(_extends2), _objectWithoutProperties2 = __webpack_require__(22), _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2), _getPrototypeOf = __webpack_require__(6), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(7), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(8), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(9), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(10), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(17), _react2 = _interopRequireDefault(_react), _DefaultAvatar = __webpack_require__(23), _DefaultAvatar2 = _interopRequireDefault(_DefaultAvatar), Image = function(_PureComponent) {
+        }), exports.DefaultImage = void 0;
+        var _objectWithoutProperties2 = __webpack_require__(19), _objectWithoutProperties3 = _interopRequireDefault(_objectWithoutProperties2), _getPrototypeOf = __webpack_require__(3), _getPrototypeOf2 = _interopRequireDefault(_getPrototypeOf), _classCallCheck2 = __webpack_require__(4), _classCallCheck3 = _interopRequireDefault(_classCallCheck2), _createClass2 = __webpack_require__(5), _createClass3 = _interopRequireDefault(_createClass2), _possibleConstructorReturn2 = __webpack_require__(6), _possibleConstructorReturn3 = _interopRequireDefault(_possibleConstructorReturn2), _inherits2 = __webpack_require__(7), _inherits3 = _interopRequireDefault(_inherits2), _react = __webpack_require__(8), _react2 = _interopRequireDefault(_react), _Image = __webpack_require__(20), _Image2 = _interopRequireDefault(_Image), DefaultImage = exports.DefaultImage = function() {
+            return _react2.default.createElement("svg", {
+                width: "100%",
+                height: "100%",
+                viewBox: "0 0 100 100",
+                version: "1.1",
+                xmlns: "http://www.w3.org/2000/svg"
+            }, _react2.default.createElement("path", {
+                fill: "#1893E7",
+                d: "M50,0 C22.3833333,0 0,22.3888889 0,50 C0,77.6166667 22.3833333,100 50,100 C77.6111111,100 100,77.6166667 100,50 C100,22.3888889 77.6111111,0 50,0 L50,0 Z"
+            }), _react2.default.createElement("path", {
+                fill: "#80D8FF",
+                d: "M50,19 C58.8373333,19 66,26.168 66,35 C66,43.8373333 58.8373333,51 50,51 C41.1626667,51 34,43.8373333 34,35 C34,26.168 41.1626667,19 50,19 L50,19 Z"
+            }), _react2.default.createElement("mask", {
+                fill: "white"
+            }, _react2.default.createElement("path", {
+                d: "M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"
+            })), _react2.default.createElement("path", {
+                fill: "#80D8FF",
+                d: "M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"
+            }));
+        }, Image = function(_PureComponent) {
             function Image() {
@@ -631,8 +481,5 @@ return (0, _classCallCheck3.default)(this, Image), (0, _possibleConstructorReturn3.default)(this, (Image.__proto__ || (0,
                 value: function() {
-                    var _props = this.props, hasError = _props.hasError, isLoading = _props.isLoading, propsForImage = (0, 
-                    _objectWithoutProperties3.default)(_props, [ "hasError", "isLoading" ]);
-                    return isLoading || this.props.src && !hasError ? _react2.default.createElement("img", (0, 
-                    _extends3.default)({
-                        alt: this.props.alt
-                    }, propsForImage)) : _react2.default.createElement(_DefaultAvatar2.default, null);
+                    var _props = this.props, hasError = _props.hasError, isLoading = _props.isLoading, props = (0, 
+                    _objectWithoutProperties3.default)(_props, [ "hasError", "isLoading" ]), showDefault = !isLoading && (!this.props.src || hasError);
+                    return showDefault ? _react2.default.createElement(DefaultImage, null) : _react2.default.createElement(_Image2.default, props);
                 }
@@ -642,19 +489,15 @@ } ]), Image;
         Image.propTypes = {
+            alt: _react.PropTypes.string,
+            hasError: _react.PropTypes.bool,
             isLoading: _react.PropTypes.bool,
-            src: _react.PropTypes.string,
-            hasError: _react.PropTypes.bool,
-            alt: _react.PropTypes.string,
             onError: _react.PropTypes.func,
-            onLoad: _react.PropTypes.func
+            onLoad: _react.PropTypes.func,
+            src: _react.PropTypes.string
         }, exports.default = Image;
-    }, /* 21 */
+    }, /* 19 */
     /***/
     function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_21__;
-    }, /* 22 */
+        module.exports = __WEBPACK_EXTERNAL_MODULE_19__;
+    }, /* 20 */
     /***/
-    function(module, exports) {
-        module.exports = __WEBPACK_EXTERNAL_MODULE_22__;
-    }, /* 23 */
-    /***/
     function(module, exports, __webpack_require__) {
@@ -670,41 +513,6 @@ "use strict";
         });
-        var _react = __webpack_require__(17), _react2 = _interopRequireDefault(_react);
-        // TODO move this to ak-icon
-        // eslint-disable-next-line max-len
-        exports.default = function() {
-            return _react2.default.createElement("svg", {
-                width: "100%",
-                height: "100%",
-                viewBox: "0 0 100 100",
-                version: "1.1",
-                xmlns: "http://www.w3.org/2000/svg"
-            }, _react2.default.createElement("g", {
-                id: "User---sizes",
-                stroke: "none",
-                strokeWidth: "1",
-                fill: "none",
-                fillRule: "evenodd"
-            }, _react2.default.createElement("g", {
-                id: "xlarge---100px"
-            }, _react2.default.createElement("g", {
-                id: "Defualt-avatar"
-            }, _react2.default.createElement("path", {
-                d: "M50,0 C22.3833333,0 0,22.3888889 0,50 C0,77.6166667 22.3833333,100 50,100 C77.6111111,100 100,77.6166667 100,50 C100,22.3888889 77.6111111,0 50,0 L50,0 Z",
-                id: "Fill-1",
-                fill: "#1893E7"
-            }), _react2.default.createElement("path", {
-                d: "M50,19 C58.8373333,19 66,26.168 66,35 C66,43.8373333 58.8373333,51 50,51 C41.1626667,51 34,43.8373333 34,35 C34,26.168 41.1626667,19 50,19 L50,19 Z",
-                id: "Path",
-                fill: "#80D8FF"
-            }), _react2.default.createElement("mask", {
-                id: "mask-2",
-                fill: "white"
-            }, _react2.default.createElement("path", {
-                d: "M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"
-            })), _react2.default.createElement("path", {
-                fill: "#80D8FF",
-                d: "M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"
-            })))));
-        };
+        var _taggedTemplateLiteral2 = __webpack_require__(11), _taggedTemplateLiteral3 = _interopRequireDefault(_taggedTemplateLiteral2), _templateObject = (0, 
+        _taggedTemplateLiteral3.default)([ "\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n" ], [ "\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n" ]), _styledComponents = __webpack_require__(12), _styledComponents2 = _interopRequireDefault(_styledComponents);
+        exports.default = _styledComponents2.default.img(_templateObject);
     } ]);
 });

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!function(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("babel-runtime/helpers/defineProperty"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("classnames"),require("@atlaskit/util-shared-styles"),require("react"),require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/objectWithoutProperties")):"function"==typeof define&&define.amd?define(["babel-runtime/helpers/defineProperty","babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","classnames","@atlaskit/util-shared-styles","react","babel-runtime/helpers/extends","babel-runtime/helpers/objectWithoutProperties"],t):"object"==typeof exports?exports["@atlaskit/avatar"]=t(require("babel-runtime/helpers/defineProperty"),require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("classnames"),require("@atlaskit/util-shared-styles"),require("react"),require("babel-runtime/helpers/extends"),require("babel-runtime/helpers/objectWithoutProperties")):e["@atlaskit/avatar"]=t(e["babel-runtime/helpers/defineProperty"],e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.classnames,e["@atlaskit/util-shared-styles"],e.react,e["babel-runtime/helpers/extends"],e["babel-runtime/helpers/objectWithoutProperties"])}(this,function(e,t,r,n,i,l,a,o,s,u,d){return function(e){function t(n){if(r[n])return r[n].exports;var i=r[n]={exports:{},id:n,loaded:!1};return e[n].call(i.exports,i,i.exports,t),i.loaded=!0,i.exports}var r={};return t.m=e,t.c=r,t.p="",t(0)}([function(e,t,r){e.exports=r(3)},,,function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.Presence=t.default=void 0;var i=r(4),l=n(i),a=r(18),o=n(a);t.default=l.default,t.Presence=o.default},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.SIZE=void 0;var i=r(5),l=n(i),a=r(6),o=n(a),s=r(7),u=n(s),d=r(8),p=n(d),f=r(9),c=n(f),h=r(10),m=n(h),b=r(11),v=n(b),g=r(12),C=r(13),_=n(C),x=r(17),y=n(x),w=r(18),k=n(w),E=r(20),U=n(E),P=t.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"small"},L=function(e){function t(){var e,r,n,i;(0,u.default)(this,t);for(var l=arguments.length,a=Array(l),s=0;s<l;s++)a[s]=arguments[s];return r=n=(0,c.default)(this,(e=t.__proto__||(0,o.default)(t)).call.apply(e,[this].concat(a))),n.state={isLoading:!1,hasError:!1},n.imageLoadedHandler=function(){n.setState({isLoading:!1,hasError:!1})},n.imageErrorHandler=function(){n.setState({hasError:!0,isLoading:!1})},i=r,(0,c.default)(n,i)}return(0,m.default)(t,e),(0,p.default)(t,[{key:"componentWillReceiveProps",value:function(e){this.props.src!==e.src&&this.setState({isLoading:!0})}},{key:"render",value:function(){var e,t=this.props,r=t.presenceBorderColor,n=t.presence,i=t.size,a=t.src,o=t.label,s=t.children,u=(0,v.default)([_.default[i],_.default.size]),d=(0,v.default)((0,l.default)({},_.default.loaded,!this.state.isLoading),_.default.imgWrapper),p=(0,v.default)((e={},(0,l.default)(e,_.default.hidden,"none"===n&&!s),(0,l.default)(e,_.default.presenceWrapper,!0),e));return y.default.createElement("div",{className:_.default.root},y.default.createElement("div",{className:u},y.default.createElement("div",{className:d,"aria-label":o},y.default.createElement(U.default,{alt:o,src:a,className:_.default.img,onLoad:this.imageLoadedHandler,onError:this.imageErrorHandler,hasError:this.state.hasError,isLoading:this.state.isLoading})),y.default.createElement("div",{className:p},y.default.createElement(k.default,{presence:n,borderColor:r},s))))}}]),t}(x.PureComponent);L.propTypes={presenceBorderColor:x.PropTypes.string,presence:x.PropTypes.oneOf(w.PRESENCE_TYPE.values),size:x.PropTypes.oneOf(P.values),src:x.PropTypes.string,label:x.PropTypes.string,children:x.PropTypes.element},L.defaultProps={presenceBorderColor:g.akColorPrimary3,presence:"none",size:"medium"},t.default=L},function(t,r){t.exports=e},function(e,r){e.exports=t},function(e,t){e.exports=r},function(e,t){e.exports=n},function(e,t){e.exports=i},function(e,t){e.exports=l},function(e,t){e.exports=a},function(e,t){e.exports=o},function(e,t,r){var n=r(14);"string"==typeof n&&(n=[[e.id,n,""]]),r(16)(n,{}),n.locals&&(e.exports=n.locals)},function(e,t,r){t=e.exports=r(15)(),t.push([e.id,"._9h_qSYw_07agRklMEYgZ-{display:inline-block;position:relative}.d56twF_tOLvWUTfi4NEkK{height:16px;width:16px}.d56twF_tOLvWUTfi4NEkK ._17kCbvrCUfKkCw95o0Bw2Z{right:0;height:0;bottom:0;width:0}._2Qe1bk0MDSMevT6_wjzkGO{height:24px;width:24px}._2Qe1bk0MDSMevT6_wjzkGO ._17kCbvrCUfKkCw95o0Bw2Z{right:-2px;height:12px;bottom:-2px;width:12px}._2Qe1bk0MDSMevT6_wjzkGO ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:2px}._3Zh4OVkU9R-0aXK8kOSlE2{height:32px;width:32px}._3Zh4OVkU9R-0aXK8kOSlE2 ._17kCbvrCUfKkCw95o0Bw2Z{right:-2px;height:12px;bottom:-2px;width:12px}._3Zh4OVkU9R-0aXK8kOSlE2 ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:2px}._1zmRBj0NQxbaC7H5LmrYU9{height:48px;width:48px}._1zmRBj0NQxbaC7H5LmrYU9 ._17kCbvrCUfKkCw95o0Bw2Z{right:-3px;height:18px;bottom:-3px;width:18px}._1zmRBj0NQxbaC7H5LmrYU9 ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:3px}._3RPL7Nj5OpQKyuc2GNhsFa{height:96px;width:96px}._3RPL7Nj5OpQKyuc2GNhsFa ._17kCbvrCUfKkCw95o0Bw2Z{right:6px;height:18px;bottom:6px;width:18px}._3RPL7Nj5OpQKyuc2GNhsFa ._2AdNR3UG8ZqVF0X-mZvi8w{border-width:3px}.N0ViSLhqf5E4eCiBrlCQ-{align-content:center;-webkit-box-align:middle;align-items:middle;background-color:#dfe1e6;border-radius:100%;display:-webkit-box;display:flex;height:100%;overflow:hidden;width:100%;-webkit-transform:translateZ(0);transform:translateZ(0)}.N0ViSLhqf5E4eCiBrlCQ- img{height:100%;width:100%;display:none}.N0ViSLhqf5E4eCiBrlCQ-._1tkc2q_p2ssdXUnAQ3KFqH{background-color:transparent}.N0ViSLhqf5E4eCiBrlCQ-._1tkc2q_p2ssdXUnAQ3KFqH img{display:inline-block}._17kCbvrCUfKkCw95o0Bw2Z{position:absolute}._2AdNR3UG8ZqVF0X-mZvi8w{align-content:center;-webkit-box-align:middle;align-items:middle;border:2px solid #fff;border-radius:100%;box-sizing:border-box;display:-webkit-box;display:flex;height:100%;overflow:hidden;width:100%}._2AdNR3UG8ZqVF0X-mZvi8w:empty{display:none}._3PV6tdHN0OemnbDiwUBett{display:none}",""]),t.locals={root:"_9h_qSYw_07agRklMEYgZ-",root:"_9h_qSYw_07agRklMEYgZ-",xsmall:"d56twF_tOLvWUTfi4NEkK",xsmall:"d56twF_tOLvWUTfi4NEkK","presence-wrapper":"_17kCbvrCUfKkCw95o0Bw2Z",presenceWrapper:"_17kCbvrCUfKkCw95o0Bw2Z",small:"_2Qe1bk0MDSMevT6_wjzkGO",small:"_2Qe1bk0MDSMevT6_wjzkGO",presence:"_2AdNR3UG8ZqVF0X-mZvi8w",presence:"_2AdNR3UG8ZqVF0X-mZvi8w",medium:"_3Zh4OVkU9R-0aXK8kOSlE2",medium:"_3Zh4OVkU9R-0aXK8kOSlE2",large:"_1zmRBj0NQxbaC7H5LmrYU9",large:"_1zmRBj0NQxbaC7H5LmrYU9",xlarge:"_3RPL7Nj5OpQKyuc2GNhsFa",xlarge:"_3RPL7Nj5OpQKyuc2GNhsFa",imgWrapper:"N0ViSLhqf5E4eCiBrlCQ-",imgWrapper:"N0ViSLhqf5E4eCiBrlCQ-",loaded:"_1tkc2q_p2ssdXUnAQ3KFqH",loaded:"_1tkc2q_p2ssdXUnAQ3KFqH",hidden:"_3PV6tdHN0OemnbDiwUBett",hidden:"_3PV6tdHN0OemnbDiwUBett"}},function(e,t){e.exports=function(){var e=[];return e.toString=function(){for(var e=[],t=0;t<this.length;t++){var r=this[t];r[2]?e.push("@media "+r[2]+"{"+r[1]+"}"):e.push(r[1])}return e.join("")},e.i=function(t,r){"string"==typeof t&&(t=[[null,t,""]]);for(var n={},i=0;i<this.length;i++){var l=this[i][0];"number"==typeof l&&(n[l]=!0)}for(i=0;i<t.length;i++){var a=t[i];"number"==typeof a[0]&&n[a[0]]||(r&&!a[2]?a[2]=r:r&&(a[2]="("+a[2]+") and ("+r+")"),e.push(a))}},e}},function(e,t,r){function n(e,t){for(var r=0;r<e.length;r++){var n=e[r],i=c[n.id];if(i){i.refs++;for(var l=0;l<i.parts.length;l++)i.parts[l](n.parts[l]);for(;l<n.parts.length;l++)i.parts.push(u(n.parts[l],t))}else{for(var a=[],l=0;l<n.parts.length;l++)a.push(u(n.parts[l],t));c[n.id]={id:n.id,refs:1,parts:a}}}}function i(e){for(var t=[],r={},n=0;n<e.length;n++){var i=e[n],l=i[0],a=i[1],o=i[2],s=i[3],u={css:a,media:o,sourceMap:s};r[l]?r[l].parts.push(u):t.push(r[l]={id:l,parts:[u]})}return t}function l(e,t){var r=b(),n=C[C.length-1];if("top"===e.insertAt)n?n.nextSibling?r.insertBefore(t,n.nextSibling):r.appendChild(t):r.insertBefore(t,r.firstChild),C.push(t);else{if("bottom"!==e.insertAt)throw new Error("Invalid value for parameter 'insertAt'. Must be 'top' or 'bottom'.");r.appendChild(t)}}function a(e){e.parentNode.removeChild(e);var t=C.indexOf(e);t>=0&&C.splice(t,1)}function o(e){var t=document.createElement("style");return t.type="text/css",l(e,t),t}function s(e){var t=document.createElement("link");return t.rel="stylesheet",l(e,t),t}function u(e,t){var r,n,i;if(t.singleton){var l=g++;r=v||(v=o(t)),n=d.bind(null,r,l,!1),i=d.bind(null,r,l,!0)}else e.sourceMap&&"function"==typeof URL&&"function"==typeof URL.createObjectURL&&"function"==typeof URL.revokeObjectURL&&"function"==typeof Blob&&"function"==typeof btoa?(r=s(t),n=f.bind(null,r),i=function(){a(r),r.href&&URL.revokeObjectURL(r.href)}):(r=o(t),n=p.bind(null,r),i=function(){a(r)});return n(e),function(t){if(t){if(t.css===e.css&&t.media===e.media&&t.sourceMap===e.sourceMap)return;n(e=t)}else i()}}function d(e,t,r,n){var i=r?"":n.css;if(e.styleSheet)e.styleSheet.cssText=_(t,i);else{var l=document.createTextNode(i),a=e.childNodes;a[t]&&e.removeChild(a[t]),a.length?e.insertBefore(l,a[t]):e.appendChild(l)}}function p(e,t){var r=t.css,n=t.media;if(n&&e.setAttribute("media",n),e.styleSheet)e.styleSheet.cssText=r;else{for(;e.firstChild;)e.removeChild(e.firstChild);e.appendChild(document.createTextNode(r))}}function f(e,t){var r=t.css,n=t.sourceMap;n&&(r+="\n/*# sourceMappingURL=data:application/json;base64,"+btoa(unescape(encodeURIComponent(JSON.stringify(n))))+" */");var i=new Blob([r],{type:"text/css"}),l=e.href;e.href=URL.createObjectURL(i),l&&URL.revokeObjectURL(l)}var c={},h=function(e){var t;return function(){return"undefined"==typeof t&&(t=e.apply(this,arguments)),t}},m=h(function(){return/msie [6-9]\b/.test(window.navigator.userAgent.toLowerCase())}),b=h(function(){return document.head||document.getElementsByTagName("head")[0]}),v=null,g=0,C=[];e.exports=function(e,t){t=t||{},"undefined"==typeof t.singleton&&(t.singleton=m()),"undefined"==typeof t.insertAt&&(t.insertAt="bottom");var r=i(e);return n(r,t),function(e){for(var l=[],a=0;a<r.length;a++){var o=r[a],s=c[o.id];s.refs--,l.push(s)}if(e){var u=i(e);n(u,t)}for(var a=0;a<l.length;a++){var s=l[a];if(0===s.refs){for(var d=0;d<s.parts.length;d++)s.parts[d]();delete c[s.id]}}}};var _=function(){var e=[];return function(t,r){return e[t]=r,e.filter(Boolean).join("\n")}}()},function(e,t){e.exports=s},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0}),t.PRESENCE_TYPE=void 0;var i=r(6),l=n(i),a=r(7),o=n(a),s=r(8),u=n(s),d=r(9),p=n(d),f=r(10),c=n(f),h=r(17),m=n(h),b=r(12),v=r(19),g=n(v),C=r(14),_=n(C);_.default.locals=_.default.locals||{};var x=t.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},y=function(e){function t(){return(0,o.default)(this,t),(0,p.default)(this,(t.__proto__||(0,l.default)(t)).apply(this,arguments))}return(0,c.default)(t,e),(0,u.default)(t,[{key:"render",value:function(){var e={borderColor:this.props.borderColor},t=g.default[this.props.presence]||null;return m.default.createElement("div",{className:_.default.locals.presence,style:e},this.props.children?this.props.children:m.default.createElement(t,null))}}]),t}(h.PureComponent);y.propTypes={children:h.PropTypes.element,borderColor:h.PropTypes.string,presence:h.PropTypes.oneOf(x.values)},y.defaultProps={borderColor:b.akColorPrimary3,presence:x.defaultValue},t.default=y},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=r(17),l=n(i);t.default={online:function(){return l.default.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 8 8",xmlns:"http://www.w3.org/2000/svg"},l.default.createElement("g",{id:"User---presence",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},l.default.createElement("g",{id:"Available",fill:"#48CC8C"},l.default.createElement("circle",{id:"Oval-3-Copy-7",cx:"4",cy:"4",r:"4"}))))},busy:function(){return l.default.createElement("svg",{width:"100%",height:"100%",xmlns:"http://www.w3.org/2000/svg",x:"0px",y:"0px",viewBox:"0 0 8 8",style:{enableBackground:"new 0 0 8 8"}},l.default.createElement("g",{id:"User---presence"},l.default.createElement("g",{id:"Busy-light"},l.default.createElement("circle",{id:"Combined-Shape-Copy-5",fill:"#ED5451",cx:"4",cy:"4",r:"4"}),l.default.createElement("path",{id:"Rectangle",fill:"#FFFFFF",d:"M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"}))))},offline:function(){return l.default.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 8 8",xmlns:"http://www.w3.org/2000/svg"},l.default.createElement("g",{id:"User---presence",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},l.default.createElement("g",{id:"Unavailable"},l.default.createElement("g",{id:"presence---offline"},l.default.createElement("path",{d:"M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z",id:"Combined-Shape-Copy-14",fill:"#6C798E"}),l.default.createElement("path",{d:"M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z",id:"Combined-Shape-Copy-14",fill:"#CFD4DB"})))))},none:function(){return null}}},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=r(21),l=n(i),a=r(22),o=n(a),s=r(6),u=n(s),d=r(7),p=n(d),f=r(8),c=n(f),h=r(9),m=n(h),b=r(10),v=n(b),g=r(17),C=n(g),_=r(23),x=n(_),y=function(e){function t(){return(0,p.default)(this,t),(0,m.default)(this,(t.__proto__||(0,u.default)(t)).apply(this,arguments))}return(0,v.default)(t,e),(0,c.default)(t,[{key:"render",value:function(){var e=this.props,t=e.hasError,r=e.isLoading,n=(0,o.default)(e,["hasError","isLoading"]);return r||this.props.src&&!t?C.default.createElement("img",(0,l.default)({alt:this.props.alt},n)):C.default.createElement(x.default,null)}}]),t}(g.PureComponent);y.propTypes={isLoading:g.PropTypes.bool,src:g.PropTypes.string,hasError:g.PropTypes.bool,alt:g.PropTypes.string,onError:g.PropTypes.func,onLoad:g.PropTypes.func},t.default=y},function(e,t){e.exports=u},function(e,t){e.exports=d},function(e,t,r){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(t,"__esModule",{value:!0});var i=r(17),l=n(i);t.default=function(){return l.default.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},l.default.createElement("g",{id:"User---sizes",stroke:"none",strokeWidth:"1",fill:"none",fillRule:"evenodd"},l.default.createElement("g",{id:"xlarge---100px"},l.default.createElement("g",{id:"Defualt-avatar"},l.default.createElement("path",{d:"M50,0 C22.3833333,0 0,22.3888889 0,50 C0,77.6166667 22.3833333,100 50,100 C77.6111111,100 100,77.6166667 100,50 C100,22.3888889 77.6111111,0 50,0 L50,0 Z",id:"Fill-1",fill:"#1893E7"}),l.default.createElement("path",{d:"M50,19 C58.8373333,19 66,26.168 66,35 C66,43.8373333 58.8373333,51 50,51 C41.1626667,51 34,43.8373333 34,35 C34,26.168 41.1626667,19 50,19 L50,19 Z",id:"Path",fill:"#80D8FF"}),l.default.createElement("mask",{id:"mask-2",fill:"white"},l.default.createElement("path",{d:"M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"})),l.default.createElement("path",{fill:"#80D8FF",d:"M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"})))))}}])});
+!function(e,r){"object"==typeof exports&&"object"==typeof module?module.exports=r(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("@atlaskit/util-shared-styles"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("babel-runtime/helpers/extends"),require("babel-runtime/core-js/object/keys"),require("babel-runtime/helpers/objectWithoutProperties")):"function"==typeof define&&define.amd?define(["babel-runtime/core-js/object/get-prototype-of","babel-runtime/helpers/classCallCheck","babel-runtime/helpers/createClass","babel-runtime/helpers/possibleConstructorReturn","babel-runtime/helpers/inherits","react","@atlaskit/util-shared-styles","babel-runtime/helpers/taggedTemplateLiteral","styled-components","babel-runtime/helpers/extends","babel-runtime/core-js/object/keys","babel-runtime/helpers/objectWithoutProperties"],r):"object"==typeof exports?exports["@atlaskit/avatar"]=r(require("babel-runtime/core-js/object/get-prototype-of"),require("babel-runtime/helpers/classCallCheck"),require("babel-runtime/helpers/createClass"),require("babel-runtime/helpers/possibleConstructorReturn"),require("babel-runtime/helpers/inherits"),require("react"),require("@atlaskit/util-shared-styles"),require("babel-runtime/helpers/taggedTemplateLiteral"),require("styled-components"),require("babel-runtime/helpers/extends"),require("babel-runtime/core-js/object/keys"),require("babel-runtime/helpers/objectWithoutProperties")):e["@atlaskit/avatar"]=r(e["babel-runtime/core-js/object/get-prototype-of"],e["babel-runtime/helpers/classCallCheck"],e["babel-runtime/helpers/createClass"],e["babel-runtime/helpers/possibleConstructorReturn"],e["babel-runtime/helpers/inherits"],e.react,e["@atlaskit/util-shared-styles"],e["babel-runtime/helpers/taggedTemplateLiteral"],e["styled-components"],e["babel-runtime/helpers/extends"],e["babel-runtime/core-js/object/keys"],e["babel-runtime/helpers/objectWithoutProperties"])}(this,function(e,r,t,n,l,a,i,o,s,u,d,c){return function(e){function r(n){if(t[n])return t[n].exports;var l=t[n]={exports:{},id:n,loaded:!1};return e[n].call(l.exports,l,l.exports,r),l.loaded=!0,l.exports}var t={};return r.m=e,r.c=t,r.p="",r(0)}([function(e,r,t){e.exports=t(1)},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0});var l=t(2);Object.defineProperty(r,"default",{enumerable:!0,get:function(){return n(l).default}});var a=t(16);Object.defineProperty(r,"Presence",{enumerable:!0,get:function(){return n(a).default}})},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0}),r.PRESENCE_TYPE=r.SIZE=void 0;var l=t(3),a=n(l),i=t(4),o=n(i),s=t(5),u=n(s),d=t(6),c=n(d),p=t(7),f=n(p),b=t(8),m=n(b),h=t(9),E=t(10),g=n(E),C=t(16),y=n(C),v=t(18),_=n(v),P=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},x=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},S=function(e){function r(){var e,t,n,l;(0,o.default)(this,r);for(var i=arguments.length,s=Array(i),u=0;u<i;u++)s[u]=arguments[u];return t=n=(0,c.default)(this,(e=r.__proto__||(0,a.default)(r)).call.apply(e,[this].concat(s))),n.state={hasError:!1,isLoading:!1},n.imageLoadedHandler=function(){n.setState({hasError:!1,isLoading:!1})},n.imageErrorHandler=function(){n.setState({hasError:!0,isLoading:!1})},l=t,(0,c.default)(n,l)}return(0,f.default)(r,e),(0,u.default)(r,[{key:"componentWillReceiveProps",value:function(e){this.props.src!==e.src&&this.setState({isLoading:!0})}},{key:"render",value:function(){var e=this.props,r=e.children,t=e.label,n=e.presence,l=e.presenceBorderColor,a=e.size,i=e.src,o=this.state,s=o.hasError,u=o.isLoading,d="none"!==n||r;return m.default.createElement(g.default,{size:a},m.default.createElement(E.ImageWrapper,{isLoading:u,"aria-label":t},u?null:m.default.createElement(_.default,{alt:t,src:i,onLoad:this.imageLoadedHandler,onError:this.imageErrorHandler,hasError:s})),d?m.default.createElement(E.PresenceWrapper,{size:a},m.default.createElement(y.default,{presence:n,borderColor:l,size:a},r)):null)}}]),r}(b.PureComponent);S.propTypes={children:b.PropTypes.element,label:b.PropTypes.string,presenceBorderColor:b.PropTypes.string,presence:b.PropTypes.oneOf(x.values),size:b.PropTypes.oneOf(P.values),src:b.PropTypes.string},S.defaultProps={presenceBorderColor:h.akColorPrimary3,presence:x.defaultValue,size:P.defaultValue},r.default=S},function(r,t){r.exports=e},function(e,t){e.exports=r},function(e,r){e.exports=t},function(e,r){e.exports=n},function(e,r){e.exports=l},function(e,r){e.exports=a},function(e,r){e.exports=i},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0}),r.PresenceWrapper=r.ImageWrapper=r.getSize=void 0;var l=t(11),a=n(l),i=(0,a.default)(["\n  ","\n  display: inline-block;\n  position: relative;\n"],["\n  ","\n  display: inline-block;\n  position: relative;\n"]),o=(0,a.default)(["\n  align-content: center;\n  align-items: middle;\n  background-color: ",";\n  border-radius: 100%;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  transform: translateZ(0);\n  width: 100%;\n"],["\n  align-content: center;\n  align-items: middle;\n  background-color: ",";\n  border-radius: 100%;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  transform: translateZ(0);\n  width: 100%;\n"]),s=(0,a.default)(["\n  ","\n  position: absolute;\n"],["\n  ","\n  position: absolute;\n"]),u=t(12),d=n(u),c=t(9),p=t(13),f=(r.getSize=function(e){var r=e.size;return p.AVATAR_SIZES[r]},function(e){var r=e.size;return"\n  height: "+p.AVATAR_SIZES[r]+"px;\n  width: "+p.AVATAR_SIZES[r]+"px;\n"});r.default=d.default.div(i,f);var b=(r.ImageWrapper=d.default.div(o,function(e){var r=e.isLoading;return r?c.akColorN40:"transparent"}),function(e){var r=e.size;return"\n  bottom: "+p.PRESENCE_OFFSET[r]+"px;\n  height: "+p.PRESENCE_SIZES[r]+"px;\n  right: "+p.PRESENCE_OFFSET[r]+"px;\n  width: "+p.PRESENCE_SIZES[r]+"px;\n"});r.PresenceWrapper=d.default.div(s,b)},function(e,r){e.exports=o},function(e,r){e.exports=s},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0}),r.PRESENCE_SIZES=r.PRESENCE_OFFSET=r.PRESENCE_BORDER_WIDTH=r.AVATAR_SIZES=void 0;var l=t(14),a=n(l),i=t(15),o=n(i),s=t(9),u=(r.AVATAR_SIZES={xsmall:2*s.akGridSizeUnitless,small:3*s.akGridSizeUnitless,medium:4*s.akGridSizeUnitless,large:6*s.akGridSizeUnitless,xlarge:12*s.akGridSizeUnitless},r.PRESENCE_BORDER_WIDTH={xsmall:0,small:2,medium:2,large:3,xlarge:3}),d={};(0,o.default)(u).forEach(function(e){d[e]=u[e]*-1}),r.PRESENCE_OFFSET=(0,a.default)({},d,{xlarge:6}),r.PRESENCE_SIZES={xsmall:0,small:12,medium:12,large:18,xlarge:18}},function(e,r){e.exports=u},function(e,r){e.exports=d},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}function l(e){var r=function(e){return g.default.createElement("svg",(0,h.default)({height:"100%",version:"1.1",viewBox:"0 0 8 8",width:"100%",xmlns:"http://www.w3.org/2000/svg"},e))};switch(e){case"busy":return g.default.createElement(r,null,g.default.createElement("circle",{fill:"#ED5451",cx:"4",cy:"4",r:"4"}),g.default.createElement("path",{fill:"#FFFFFF",d:"M3.3,1.9l2.8,2.8c0.2,0.2,0.2,0.5,0,0.7L5.4,6.1c-0.2,0.2-0.5,0.2-0.7,0L1.9,3.3c-0.2-0.2-0.2-0.5,0-0.7l0.7-0.7C2.8,1.7,3.1,1.7,3.3,1.9z"}));case"offline":return g.default.createElement(r,null,g.default.createElement("path",{fill:"#6C798E",d:"M4,8 C6.209139,8 8,6.209139 8,4 C8,1.790861 6.209139,0 4,0 C1.790861,0 0,1.790861 0,4 C0,6.209139 1.790861,8 4,8 Z M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"}),g.default.createElement("path",{fill:"#CFD4DB",d:"M4,6 C5.1045695,6 6,5.1045695 6,4 C6,2.8954305 5.1045695,2 4,2 C2.8954305,2 2,2.8954305 2,4 C2,5.1045695 2.8954305,6 4,6 Z"}));case"online":return g.default.createElement(r,null,g.default.createElement("circle",{fill:"#48CC8C",cx:"4",cy:"4",r:"4"}));default:return null}}Object.defineProperty(r,"__esModule",{value:!0}),r.PRESENCE_TYPE=r.SIZE=void 0;var a=t(3),i=n(a),o=t(4),s=n(o),u=t(5),d=n(u),c=t(6),p=n(c),f=t(7),b=n(f),m=t(14),h=n(m);r.getPresenceSvg=l;var E=t(8),g=n(E),C=t(9),y=t(17),v=n(y),_=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},P=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},x=function(e){function r(){return(0,s.default)(this,r),(0,p.default)(this,(r.__proto__||(0,i.default)(r)).apply(this,arguments))}return(0,b.default)(r,e),(0,d.default)(r,[{key:"render",value:function(){var e=this.props,r=e.borderColor,t=e.children,n=e.presence,a=e.size,i={borderColor:r};return g.default.createElement(v.default,{size:a,style:i},t||l(n))}}]),r}(E.PureComponent);x.propTypes={borderColor:E.PropTypes.string,children:E.PropTypes.element,presence:E.PropTypes.oneOf(P.values),size:E.PropTypes.oneOf(_.values)},x.defaultProps={borderColor:C.akColorPrimary3,presence:P.defaultValue},r.default=x},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0});var l=t(11),a=n(l),i=(0,a.default)(["\n  align-content: center;\n  align-items: middle;\n  border-color: ",";\n  border-radius: 100%;\n  border-style: solid;\n  border-width: ","px;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  &:empty {\n    display: none;\n  }\n"],["\n  align-content: center;\n  align-items: middle;\n  border-color: ",";\n  border-radius: 100%;\n  border-style: solid;\n  border-width: ","px;\n  box-sizing: border-box;\n  display: flex;\n  height: 100%;\n  overflow: hidden;\n  width: 100%;\n\n  &:empty {\n    display: none;\n  }\n"]),o=t(12),s=n(o),u=t(9),d=t(13);r.default=s.default.div(i,u.akColorPrimary3,function(e){var r=e.size;return d.PRESENCE_BORDER_WIDTH[r]||d.PRESENCE_BORDER_WIDTH.medium})},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0}),r.DefaultImage=void 0;var l=t(19),a=n(l),i=t(3),o=n(i),s=t(4),u=n(s),d=t(5),c=n(d),p=t(6),f=n(p),b=t(7),m=n(b),h=t(8),E=n(h),g=t(20),C=n(g),y=r.DefaultImage=function(){return E.default.createElement("svg",{width:"100%",height:"100%",viewBox:"0 0 100 100",version:"1.1",xmlns:"http://www.w3.org/2000/svg"},E.default.createElement("path",{fill:"#1893E7",d:"M50,0 C22.3833333,0 0,22.3888889 0,50 C0,77.6166667 22.3833333,100 50,100 C77.6111111,100 100,77.6166667 100,50 C100,22.3888889 77.6111111,0 50,0 L50,0 Z"}),E.default.createElement("path",{fill:"#80D8FF",d:"M50,19 C58.8373333,19 66,26.168 66,35 C66,43.8373333 58.8373333,51 50,51 C41.1626667,51 34,43.8373333 34,35 C34,26.168 41.1626667,19 50,19 L50,19 Z"}),E.default.createElement("mask",{fill:"white"},E.default.createElement("path",{d:"M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"})),E.default.createElement("path",{fill:"#80D8FF",d:"M80.5246347,74.2768131 C73.3793503,83.2490744 62.3612755,89 50,89 C37.6385983,89 26.6204246,83.2489569 19.4751464,74.2765382 C23.8287068,66.9274259 31.8398972,62 41.0068806,62 L58.9931194,62 C68.1573006,62 76.1701334,66.9268153 80.5246347,74.2768131 Z"}))},v=function(e){function r(){return(0,u.default)(this,r),(0,f.default)(this,(r.__proto__||(0,o.default)(r)).apply(this,arguments))}return(0,m.default)(r,e),(0,c.default)(r,[{key:"render",value:function(){var e=this.props,r=e.hasError,t=e.isLoading,n=(0,a.default)(e,["hasError","isLoading"]),l=!t&&(!this.props.src||r);return l?E.default.createElement(y,null):E.default.createElement(C.default,n)}}]),r}(h.PureComponent);v.propTypes={alt:h.PropTypes.string,hasError:h.PropTypes.bool,isLoading:h.PropTypes.bool,onError:h.PropTypes.func,onLoad:h.PropTypes.func,src:h.PropTypes.string},r.default=v},function(e,r){e.exports=c},function(e,r,t){"use strict";function n(e){return e&&e.__esModule?e:{default:e}}Object.defineProperty(r,"__esModule",{value:!0});var l=t(11),a=n(l),i=(0,a.default)(["\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n"],["\n  display: inline-block;\n  height: 100%;\n  width: 100%;\n"]),o=t(12),s=n(o);r.default=s.default.img(i)}])});

package.json

 {
   "name": "@atlaskit/avatar",
-  "version": "2.1.5",
+  "version": "3.0.0",
   "config": {
@@ -25,8 +25,8 @@ "access": "public"
   "peerDependencies": {
-    "react": "^15.3.2"
+    "react": "^15.3.2",
+    "styled-components": "^1.3.0"
   },
   "dependencies": {
     "@atlaskit/util-shared-styles": "^1.0.0",
-    "babel-runtime": "^6.11.6",
-    "classnames": "^2.2.5"
+    "babel-runtime": "^6.11.6"
   },
@@ -33,0 +33,0 @@ "devDependencies": {

README.md

@@ -5,3 +5,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://aui-cdn.atlassian.com/atlaskit/registry/)
 [![Report an issue](https://img.shields.io/badge/Report-an_issue-6554C0.svg)](https://ecosystem.atlassian.net/browse/AK)
-[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,@atlaskit/avatar,@atlaskit/avatar@2.1.5)
+[![Ask in our forum](https://img.shields.io/badge/Ask-in_our_forum-6554C0.svg)](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,@atlaskit/avatar,@atlaskit/avatar@3.0.0)
 
@@ -16,3 +16,3 @@ # Avatar
 
-Detailed docs and example usage can be found [here](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/avatar/2.1.5/).
+Detailed docs and example usage can be found [here](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/avatar/3.0.0/).
 
@@ -33,3 +33,3 @@ ## Installation
 
-Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,@atlaskit/avatar,@atlaskit/avatar@2.1.5).
+Ask a question in our [forum](https://answers.atlassian.com/questions/ask?title=AtlasKit%3A%20&topics=atlaskit,@atlaskit/avatar,@atlaskit/avatar@3.0.0).
 
@@ -36,0 +36,0 @@ Check [if someone has already asked the same question before](https://answers.atlassian.com/questions/topics/42926171/atlaskit).

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

83873

decreased by-24.86%

Lines of code

1021

decreased by-27.9%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

• - Removedclassnames@^2.2.5

• - Removedclassnames@2.5.1(transitive)