@atlaskit/avatar - npm Package Compare versions

Comparing version 3.0.3 to 4.0.0

CHANGELOG.md

@@ -1,6 +0,27 @@
-<a name="3.0.3"></a>
-## 3.0.3 (2017-04-27)
+<a name="4.0.0"></a>
+# 4.0.0 (2017-05-03)
 
 
 
+<a name="4.0.0"></a>
+# 4.0.0 (2017-05-03)
+
+
+### Features
+
+* **component:** optional square avatar appearance ([c43c905](https://bitbucket.org/atlassian/atlaskit/commits/c43c905))
+
+
+### BREAKING CHANGES
+
+* **component:** Previously you could pass a custom Presence to an Avatar via the Avatar's children. Now, these
+
+custom Presence or icon elements should be passed to the new 'icon' prop. This change has been made
+
+to avoid overloading the concept of Presence and to make the API clearer.
+
+ISSUES CLOSED: AK-1645
+
+
+
 <a name="3.0.3"></a>
@@ -7,0 +28,0 @@ ## 3.0.3 (2017-04-27)

dist/bundle-cjs.js

@@ -106,6 +106,9 @@ module.exports = /******/
         value: !0
-    }), exports.PRESENCE_TYPE = exports.SIZE = void 0;
+    }), exports.PRESENCE_TYPE = exports.APPEARANCE_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__(19), _Image2 = _interopRequireDefault(_Image), SIZE = exports.SIZE = {
         values: [ "xsmall", "small", "medium", "large", "xlarge" ],
         defaultValue: "medium"
+    }, APPEARANCE_TYPE = exports.APPEARANCE_TYPE = {
+        values: [ "circle", "square" ],
+        defaultValue: "circle"
     }, PRESENCE_TYPE = exports.PRESENCE_TYPE = {
@@ -145,6 +148,8 @@ values: [ "none", "online", "busy", "offline" ],
             value: function() {
-                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;
+                var _props = this.props, appearance = _props.appearance, icon = _props.icon, 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 || icon;
                 return _react2.default.createElement(_Avatar2.default, {
                     size: size
                 }, _react2.default.createElement(_Avatar.ImageWrapper, {
+                    appearance: appearance,
+                    size: size,
                     isLoading: isLoading,
@@ -159,2 +164,3 @@ "aria-label": label
                 })), showPresence ? _react2.default.createElement(_Avatar.PresenceWrapper, {
+                    appearance: appearance,
                     size: size
@@ -165,3 +171,3 @@ }, _react2.default.createElement(_Presence2.default, {
                     size: size
-                }, children)) : null);
+                }, icon)) : null);
             }
@@ -171,6 +177,9 @@ } ]), Avatar;
     Avatar.propTypes = {
+        /** Indicates the shape of the avatar. Most avatars are circular, but square avatars
+	  can be used for 'container' objects. */
+        appearance: _react.PropTypes.oneOf(APPEARANCE_TYPE.values),
         /** 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,
+        icon: _react.PropTypes.element,
         /** Defines the label for the Avatar used by screen readers as fallback
@@ -190,2 +199,3 @@ content if the image fails to load. */
     }, Avatar.defaultProps = {
+        appearance: APPEARANCE_TYPE.defaultValue,
         presenceBorderColor: _utilSharedStyles.akColorPrimary3,
@@ -238,3 +248,3 @@ // white
     _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  align-content: center;\n  align-items: middle;\n  background-color: ", ";\n  border-radius: ", ";\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: ", ";\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) {
@@ -248,10 +258,12 @@ var size = _ref.size;
     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;
+    // For square avatars, border radius is 10% (rounded down) of avatar width/height
+    var getBorderRadius = function(_ref3) {
+        var size = _ref3.size, appearance = _ref3.appearance;
+        return "circle" === appearance ? "100%" : Math.floor(_constants.AVATAR_SIZES[size] / 10) + "px";
+    }, getPresenceLayout = (exports.ImageWrapper = _styledComponents2.default.div(_templateObject2, function(_ref4) {
+        var isLoading = _ref4.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";
+    }, getBorderRadius), function(_ref5) {
+        var appearance = _ref5.appearance, size = _ref5.size, presencePosition = "square" === appearance ? -(2 * _constants.PRESENCE_BORDER_WIDTH[size]) : _constants.PRESENCE_OFFSET[size], presenceSize = _constants.PRESENCE_SIZES[size];
+        return "\n    bottom: " + presencePosition + "px;\n    height: " + presenceSize + "px;\n    right: " + presencePosition + "px;\n    width: " + presenceSize + "px;\n  ";
     });
@@ -258,0 +270,0 @@ exports.PresenceWrapper = _styledComponents2.default.div(_templateObject3, getPresenceLayout);

dist/bundle-cjs.min.js

@@ -1,1 +0,1 @@
-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),o=t(4),i=n(o),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),_=t(16),v=n(_),C=t(19),y=n(C),P=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},S=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},x=function(e){function r(){var e,t,n,l;(0,i.default)(this,r);for(var o=arguments.length,u=Array(o),s=0;s<o;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,o=e.src,i=this.state,u=i.hasError,s=i.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:o,onLoad:this.imageLoadedHandler,onError:this.imageErrorHandler,hasError:u})),d?m.default.createElement(g.PresenceWrapper,{size:a},m.default.createElement(v.default,{presence:n,borderColor:l,size:a},r)):null)}}]),r}(E.PureComponent);x.propTypes={children:E.PropTypes.element,label:E.PropTypes.string,presenceBorderColor:E.PropTypes.string,presence:E.PropTypes.oneOf(S.values),size:E.PropTypes.oneOf(P.values),src:E.PropTypes.string},x.defaultProps={presenceBorderColor:h.akColorPrimary3,presence:S.defaultValue,size:P.defaultValue},r.default=x},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),o=(0,a.default)(["\n  ","\n  display: inline-block;\n  position: relative;\n"],["\n  ","\n  display: inline-block;\n  position: relative;\n"]),i=(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(o,p);var E=(r.ImageWrapper=d.default.div(i,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),o=t(15),i=n(o),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,i.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}}Object.defineProperty(r,"__esModule",{value:!0}),r.PRESENCE_TYPE=r.SIZE=r.getPresenceSVG=void 0;var l=t(3),a=n(l),o=t(4),i=n(o),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(17),b=n(g),_=t(18),v=n(_);r.getPresenceSVG=v.default;var C=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},y=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},P=function(e){function r(){return(0,i.default)(this,r),(0,f.default)(this,(r.__proto__||(0,a.default)(r)).apply(this,arguments))}return(0,p.default)(r,e),(0,s.default)(r,[{key:"render",value:function(){var e=this.props,r=e.borderColor,t=e.children,n=e.presence,l=e.size,a={borderColor:r};return m.default.createElement(b.default,{size:l,style:a},t||(0,v.default)(n))}}]),r}(E.PureComponent);P.propTypes={borderColor:E.PropTypes.string,children:E.PropTypes.element,presence:E.PropTypes.oneOf(y.values),size:E.PropTypes.oneOf(C.values)},P.defaultProps={borderColor:h.akColorPrimary3,presence:y.defaultValue},r.default=P},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),o=(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"]),i=t(12),u=n(i),s=t(9),d=t(13);r.default=u.default.div(o,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}}function l(e){var r=function(e){return u.default.createElement("svg",(0,o.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 u.default.createElement(r,null,u.default.createElement("circle",{fill:"#ED5451",cx:"4",cy:"4",r:"4"}),u.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 u.default.createElement(r,null,u.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"}),u.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 u.default.createElement(r,null,u.default.createElement("circle",{fill:"#48CC8C",cx:"4",cy:"4",r:"4"}));default:return null}}Object.defineProperty(r,"__esModule",{value:!0});var a=t(14),o=n(a);r.default=l;var i=t(8),u=n(i)},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(20),a=n(l),o=t(3),i=n(o),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(21),_=n(b),v=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"}))},C=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,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(v,null):g.default.createElement(_.default,n)}}]),r}(h.PureComponent);C.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=C},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),o=(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"]),i=t(12),u=n(i);r.default=u.default.img(o)}]);
+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.APPEARANCE_TYPE=r.SIZE=void 0;var l=t(3),a=n(l),o=t(4),i=n(o),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),_=n(g),v=t(16),b=n(v),C=t(19),P=n(C),y=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},x=r.APPEARANCE_TYPE={values:["circle","square"],defaultValue:"circle"},S=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},T=function(e){function r(){var e,t,n,l;(0,i.default)(this,r);for(var o=arguments.length,u=Array(o),s=0;s<o;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.appearance,t=e.icon,n=e.label,l=e.presence,a=e.presenceBorderColor,o=e.size,i=e.src,u=this.state,s=u.hasError,d=u.isLoading,f="none"!==l||t;return m.default.createElement(_.default,{size:o},m.default.createElement(g.ImageWrapper,{appearance:r,size:o,isLoading:d,"aria-label":n},d?null:m.default.createElement(P.default,{alt:n,src:i,onLoad:this.imageLoadedHandler,onError:this.imageErrorHandler,hasError:s})),f?m.default.createElement(g.PresenceWrapper,{appearance:r,size:o},m.default.createElement(b.default,{presence:l,borderColor:a,size:o},t)):null)}}]),r}(E.PureComponent);T.propTypes={appearance:E.PropTypes.oneOf(x.values),icon:E.PropTypes.element,label:E.PropTypes.string,presenceBorderColor:E.PropTypes.string,presence:E.PropTypes.oneOf(S.values),size:E.PropTypes.oneOf(y.values),src:E.PropTypes.string},T.defaultProps={appearance:x.defaultValue,presenceBorderColor:h.akColorPrimary3,presence:S.defaultValue,size:y.defaultValue},r.default=T},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),o=(0,a.default)(["\n  ","\n  display: inline-block;\n  position: relative;\n"],["\n  ","\n  display: inline-block;\n  position: relative;\n"]),i=(0,a.default)(["\n  align-content: center;\n  align-items: middle;\n  background-color: ",";\n  border-radius: ",";\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: ",";\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(o,p);var E=function(e){var r=e.size,t=e.appearance;return"circle"===t?"100%":Math.floor(c.AVATAR_SIZES[r]/10)+"px"},m=(r.ImageWrapper=d.default.div(i,function(e){var r=e.isLoading;return r?f.akColorN40:"transparent"},E),function(e){var r=e.appearance,t=e.size,n="square"===r?-(2*c.PRESENCE_BORDER_WIDTH[t]):c.PRESENCE_OFFSET[t],l=c.PRESENCE_SIZES[t];return"\n    bottom: "+n+"px;\n    height: "+l+"px;\n    right: "+n+"px;\n    width: "+l+"px;\n  "});r.PresenceWrapper=d.default.div(u,m)},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),o=t(15),i=n(o),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,i.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}}Object.defineProperty(r,"__esModule",{value:!0}),r.PRESENCE_TYPE=r.SIZE=r.getPresenceSVG=void 0;var l=t(3),a=n(l),o=t(4),i=n(o),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(17),_=n(g),v=t(18),b=n(v);r.getPresenceSVG=b.default;var C=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},P=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},y=function(e){function r(){return(0,i.default)(this,r),(0,f.default)(this,(r.__proto__||(0,a.default)(r)).apply(this,arguments))}return(0,p.default)(r,e),(0,s.default)(r,[{key:"render",value:function(){var e=this.props,r=e.borderColor,t=e.children,n=e.presence,l=e.size,a={borderColor:r};return m.default.createElement(_.default,{size:l,style:a},t||(0,b.default)(n))}}]),r}(E.PureComponent);y.propTypes={borderColor:E.PropTypes.string,children:E.PropTypes.element,presence:E.PropTypes.oneOf(P.values),size:E.PropTypes.oneOf(C.values)},y.defaultProps={borderColor:h.akColorPrimary3,presence:P.defaultValue},r.default=y},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),o=(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"]),i=t(12),u=n(i),s=t(9),d=t(13);r.default=u.default.div(o,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}}function l(e){var r=function(e){return u.default.createElement("svg",(0,o.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 u.default.createElement(r,null,u.default.createElement("circle",{fill:"#ED5451",cx:"4",cy:"4",r:"4"}),u.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 u.default.createElement(r,null,u.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"}),u.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 u.default.createElement(r,null,u.default.createElement("circle",{fill:"#48CC8C",cx:"4",cy:"4",r:"4"}));default:return null}}Object.defineProperty(r,"__esModule",{value:!0});var a=t(14),o=n(a);r.default=l;var i=t(8),u=n(i)},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(20),a=n(l),o=t(3),i=n(o),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),_=t(21),v=n(_),b=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"}))},C=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,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(b,null):g.default.createElement(v.default,n)}}]),r}(h.PureComponent);C.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=C},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),o=(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"]),i=t(12),u=n(i);r.default=u.default.img(o)}]);

dist/bundle.js

@@ -109,6 +109,9 @@ !function(root, factory) {
             value: !0
-        }), exports.PRESENCE_TYPE = exports.SIZE = void 0;
+        }), exports.PRESENCE_TYPE = exports.APPEARANCE_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__(19), _Image2 = _interopRequireDefault(_Image), SIZE = exports.SIZE = {
             values: [ "xsmall", "small", "medium", "large", "xlarge" ],
             defaultValue: "medium"
+        }, APPEARANCE_TYPE = exports.APPEARANCE_TYPE = {
+            values: [ "circle", "square" ],
+            defaultValue: "circle"
         }, PRESENCE_TYPE = exports.PRESENCE_TYPE = {
@@ -148,6 +151,8 @@ values: [ "none", "online", "busy", "offline" ],
                 value: function() {
-                    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;
+                    var _props = this.props, appearance = _props.appearance, icon = _props.icon, 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 || icon;
                     return _react2.default.createElement(_Avatar2.default, {
                         size: size
                     }, _react2.default.createElement(_Avatar.ImageWrapper, {
+                        appearance: appearance,
+                        size: size,
                         isLoading: isLoading,
@@ -162,2 +167,3 @@ "aria-label": label
                     })), showPresence ? _react2.default.createElement(_Avatar.PresenceWrapper, {
+                        appearance: appearance,
                         size: size
@@ -168,3 +174,3 @@ }, _react2.default.createElement(_Presence2.default, {
                         size: size
-                    }, children)) : null);
+                    }, icon)) : null);
                 }
@@ -174,6 +180,9 @@ } ]), Avatar;
         Avatar.propTypes = {
+            /** Indicates the shape of the avatar. Most avatars are circular, but square avatars
+	  can be used for 'container' objects. */
+            appearance: _react.PropTypes.oneOf(APPEARANCE_TYPE.values),
             /** 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,
+            icon: _react.PropTypes.element,
             /** Defines the label for the Avatar used by screen readers as fallback
@@ -193,2 +202,3 @@ content if the image fails to load. */
         }, Avatar.defaultProps = {
+            appearance: APPEARANCE_TYPE.defaultValue,
             presenceBorderColor: _utilSharedStyles.akColorPrimary3,
@@ -241,3 +251,3 @@ // white
         _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  align-content: center;\n  align-items: middle;\n  background-color: ", ";\n  border-radius: ", ";\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: ", ";\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) {
@@ -251,10 +261,12 @@ var size = _ref.size;
         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;
+        // For square avatars, border radius is 10% (rounded down) of avatar width/height
+        var getBorderRadius = function(_ref3) {
+            var size = _ref3.size, appearance = _ref3.appearance;
+            return "circle" === appearance ? "100%" : Math.floor(_constants.AVATAR_SIZES[size] / 10) + "px";
+        }, getPresenceLayout = (exports.ImageWrapper = _styledComponents2.default.div(_templateObject2, function(_ref4) {
+            var isLoading = _ref4.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";
+        }, getBorderRadius), function(_ref5) {
+            var appearance = _ref5.appearance, size = _ref5.size, presencePosition = "square" === appearance ? -(2 * _constants.PRESENCE_BORDER_WIDTH[size]) : _constants.PRESENCE_OFFSET[size], presenceSize = _constants.PRESENCE_SIZES[size];
+            return "\n    bottom: " + presencePosition + "px;\n    height: " + presenceSize + "px;\n    right: " + presencePosition + "px;\n    width: " + presenceSize + "px;\n  ";
         });
@@ -261,0 +273,0 @@ exports.PresenceWrapper = _styledComponents2.default.div(_templateObject3, getPresenceLayout);

dist/bundle.min.js

@@ -1,1 +0,1 @@
-!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),y=t(16),C=n(y),v=t(19),_=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(C.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}}Object.defineProperty(r,"__esModule",{value:!0}),r.PRESENCE_TYPE=r.SIZE=r.getPresenceSVG=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(17),g=n(E),y=t(18),C=n(y);r.getPresenceSVG=C.default;var v=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},_=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},P=function(e){function r(){return(0,o.default)(this,r),(0,c.default)(this,(r.__proto__||(0,a.default)(r)).apply(this,arguments))}return(0,f.default)(r,e),(0,u.default)(r,[{key:"render",value:function(){var e=this.props,r=e.borderColor,t=e.children,n=e.presence,l=e.size,a={borderColor:r};return m.default.createElement(g.default,{size:l,style:a},t||(0,C.default)(n))}}]),r}(b.PureComponent);P.propTypes={borderColor:b.PropTypes.string,children:b.PropTypes.element,presence:b.PropTypes.oneOf(_.values),size:b.PropTypes.oneOf(v.values)},P.defaultProps={borderColor:h.akColorPrimary3,presence:_.defaultValue},r.default=P},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}}function l(e){var r=function(e){return s.default.createElement("svg",(0,i.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 s.default.createElement(r,null,s.default.createElement("circle",{fill:"#ED5451",cx:"4",cy:"4",r:"4"}),s.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 s.default.createElement(r,null,s.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"}),s.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 s.default.createElement(r,null,s.default.createElement("circle",{fill:"#48CC8C",cx:"4",cy:"4",r:"4"}));default:return null}}Object.defineProperty(r,"__esModule",{value:!0});var a=t(14),i=n(a);r.default=l;var o=t(8),s=n(o)},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(20),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(21),y=n(g),C=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(C,null):E.default.createElement(y.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)}])});
+!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.APPEARANCE_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),y=t(16),C=n(y),v=t(19),_=n(v),P=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},x=r.APPEARANCE_TYPE={values:["circle","square"],defaultValue:"circle"},S=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},T=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.appearance,t=e.icon,n=e.label,l=e.presence,a=e.presenceBorderColor,i=e.size,o=e.src,s=this.state,u=s.hasError,d=s.isLoading,c="none"!==l||t;return m.default.createElement(g.default,{size:i},m.default.createElement(E.ImageWrapper,{appearance:r,size:i,isLoading:d,"aria-label":n},d?null:m.default.createElement(_.default,{alt:n,src:o,onLoad:this.imageLoadedHandler,onError:this.imageErrorHandler,hasError:u})),c?m.default.createElement(E.PresenceWrapper,{appearance:r,size:i},m.default.createElement(C.default,{presence:l,borderColor:a,size:i},t)):null)}}]),r}(b.PureComponent);T.propTypes={appearance:b.PropTypes.oneOf(x.values),icon:b.PropTypes.element,label:b.PropTypes.string,presenceBorderColor:b.PropTypes.string,presence:b.PropTypes.oneOf(S.values),size:b.PropTypes.oneOf(P.values),src:b.PropTypes.string},T.defaultProps={appearance:x.defaultValue,presenceBorderColor:h.akColorPrimary3,presence:S.defaultValue,size:P.defaultValue},r.default=T},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: ",";\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: ",";\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=function(e){var r=e.size,t=e.appearance;return"circle"===t?"100%":Math.floor(p.AVATAR_SIZES[r]/10)+"px"},m=(r.ImageWrapper=d.default.div(o,function(e){var r=e.isLoading;return r?c.akColorN40:"transparent"},b),function(e){var r=e.appearance,t=e.size,n="square"===r?-(2*p.PRESENCE_BORDER_WIDTH[t]):p.PRESENCE_OFFSET[t],l=p.PRESENCE_SIZES[t];return"\n    bottom: "+n+"px;\n    height: "+l+"px;\n    right: "+n+"px;\n    width: "+l+"px;\n  "});r.PresenceWrapper=d.default.div(s,m)},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}}Object.defineProperty(r,"__esModule",{value:!0}),r.PRESENCE_TYPE=r.SIZE=r.getPresenceSVG=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(17),g=n(E),y=t(18),C=n(y);r.getPresenceSVG=C.default;var v=r.SIZE={values:["xsmall","small","medium","large","xlarge"],defaultValue:"medium"},_=r.PRESENCE_TYPE={values:["none","online","busy","offline"],defaultValue:"none"},P=function(e){function r(){return(0,o.default)(this,r),(0,c.default)(this,(r.__proto__||(0,a.default)(r)).apply(this,arguments))}return(0,f.default)(r,e),(0,u.default)(r,[{key:"render",value:function(){var e=this.props,r=e.borderColor,t=e.children,n=e.presence,l=e.size,a={borderColor:r};return m.default.createElement(g.default,{size:l,style:a},t||(0,C.default)(n))}}]),r}(b.PureComponent);P.propTypes={borderColor:b.PropTypes.string,children:b.PropTypes.element,presence:b.PropTypes.oneOf(_.values),size:b.PropTypes.oneOf(v.values)},P.defaultProps={borderColor:h.akColorPrimary3,presence:_.defaultValue},r.default=P},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}}function l(e){var r=function(e){return s.default.createElement("svg",(0,i.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 s.default.createElement(r,null,s.default.createElement("circle",{fill:"#ED5451",cx:"4",cy:"4",r:"4"}),s.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 s.default.createElement(r,null,s.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"}),s.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 s.default.createElement(r,null,s.default.createElement("circle",{fill:"#48CC8C",cx:"4",cy:"4",r:"4"}));default:return null}}Object.defineProperty(r,"__esModule",{value:!0});var a=t(14),i=n(a);r.default=l;var o=t(8),s=n(o)},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(20),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(21),y=n(g),C=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(C,null):E.default.createElement(y.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": "3.0.3",
+  "version": "4.0.0",
   "config": {
@@ -5,0 +5,0 @@ "access": "public"

README.md

@@ -14,3 +14,3 @@ [![AtlasKit component registry](https://img.shields.io/badge/AtlasKit-components-FF5230.svg)](http://atlaskit.atlassian.com)
 
-Detailed docs and example usage can be found [here](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/avatar/3.0.3/).
+Detailed docs and example usage can be found [here](https://aui-cdn.atlassian.com/atlaskit/stories/@atlaskit/avatar/4.0.0/).
 
@@ -17,0 +17,0 @@ ## Installation

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

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

Improved metrics

Total package byte prevSize

90185

increased by3.46%

Lines of code

1091

increased by2.25%

No dependency changes