@atlaskit/avatar 21.0.2 → 21.1.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/avatar
 
+## 21.1.0
+
+### Minor Changes
+
+- [`c1d012d6d20`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c1d012d6d20) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behaviour change.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 21.0.3
+
+### Patch Changes
+
+- [`f9cd9e55e43`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f9cd9e55e43) - Update to disabled tokens which slightly affects the opacity in disabled states
+
 ## 21.0.2
 
 ### Patch Changes

package/dist/cjs/Avatar.js

@@ -15,7 +15,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
@@ -38,7 +38,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.0.2";
+var packageVersion = "21.1.0";
 
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,
@@ -50,7 +50,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: 0.7;\n          pointer-events: none;\n          background-color: ".concat("var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), _constants.BORDER_WIDTH, borderColor, _constants.BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(_constants.BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(_colors.B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(_colors.N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(_constants.ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(_colors.N0, ")"), ";\n        }\n      "))
   );
 };
 /**
@@ -154,7 +154,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     });
   };
 
-  return (0, _core.jsx)("div", {
+  return (0, _react2.jsx)("div", {
     "data-testid": testId,
     style: {
       display: 'inline-block',
@@ -162,7 +162,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
       outline: 0,
       zIndex: stackIndex
     }
-  }, (0, _core.jsx)(_core.ClassNames, null, function (_ref3) {
+  }, (0, _react2.jsx)(_react2.ClassNames, null, function (_ref3) {
     var css = _ref3.css;
 
     var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
@@ -178,7 +178,7 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     }, componentProps()), testId && getTestId(testId, children)), (onClick || href) && {
       'aria-label': label
     }), {}, {
-      children: (0, _core.jsx)(_AvatarImage.default, {
+      children: (0, _react2.jsx)(_AvatarImage.default, {
         alt: name,
         appearance: appearance,
         size: size,
@@ -189,12 +189,12 @@ var Avatar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     });
 
     return children ? children(props) : /*#__PURE__*/(0, _react.createElement)((0, _utilities.getCustomElement)(isDisabled, href, onClick), props);
-  }), isValidIconSize && presence && !status && (0, _core.jsx)(_Presence.PresenceWrapper, {
+  }), isValidIconSize && presence && !status && (0, _react2.jsx)(_Presence.PresenceWrapper, {
     appearance: appearance,
     size: size,
     presence: !customPresenceNode && presence,
     testId: testId
-  }, customPresenceNode), isValidIconSize && status && (0, _core.jsx)(_Status.StatusWrapper, {
+  }, customPresenceNode), isValidIconSize && status && (0, _react2.jsx)(_Status.StatusWrapper, {
     appearance: appearance,
     size: size,
     borderColor: borderColor,

package/dist/cjs/AvatarImage.js

@@ -11,7 +11,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _person = _interopRequireDefault(require("@atlaskit/icon/glyph/person"));
 
@@ -27,13 +27,13 @@ var ICON_BACKGROUND = "var(--ds-icon-inverse, ".concat((0, _colors.background)()
 exports.ICON_BACKGROUND = ICON_BACKGROUND;
 var ICON_COLOR = "var(--ds-icon-subtle, ".concat(_colors.N90, ")");
 exports.ICON_COLOR = ICON_COLOR;
-var avatarDefaultIconStyles = (0, _core.css)({
+var avatarDefaultIconStyles = (0, _react2.css)({
   display: 'block',
   width: '100%',
   height: '100%',
   backgroundColor: ICON_COLOR
 });
-var avatarImageStyles = (0, _core.css)({
+var avatarImageStyles = (0, _react2.css)({
   display: 'flex',
   width: '100%',
   height: '100%',
@@ -65,7 +65,7 @@ var AvatarImage = function AvatarImage(_ref) {
   }, [src]);
 
   if (!src || hasImageErrored) {
-    return (0, _core.jsx)("span", {
+    return (0, _react2.jsx)("span", {
       css: [avatarDefaultIconStyles, // TODO: These dynamic SVG styles can't be set in 'style'. On a refactor, use a css custom property to pass down the size
       // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
       {
@@ -74,12 +74,12 @@ var AvatarImage = function AvatarImage(_ref) {
           height: "".concat(_constants.AVATAR_SIZES[size], "px")
         }
       }]
-    }, appearance === 'circle' ? (0, _core.jsx)(_person.default, {
+    }, appearance === 'circle' ? (0, _react2.jsx)(_person.default, {
       label: alt,
       primaryColor: ICON_BACKGROUND,
       secondaryColor: ICON_COLOR,
       testId: testId && "".concat(testId, "--person")
-    }) : (0, _core.jsx)(_ship.default, {
+    }) : (0, _react2.jsx)(_ship.default, {
       label: alt,
       primaryColor: ICON_BACKGROUND,
       secondaryColor: ICON_COLOR,
@@ -87,7 +87,7 @@ var AvatarImage = function AvatarImage(_ref) {
     }));
   }
 
-  return (0, _core.jsx)("img", {
+  return (0, _react2.jsx)("img", {
     src: src,
     alt: alt,
     "data-testid": testId && "".concat(testId, "--image"),

package/dist/cjs/AvatarItem.js

@@ -13,7 +13,7 @@ var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/hel
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -31,7 +31,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var avatarItemStyles = (0, _core.css)({
+var avatarItemStyles = (0, _react2.css)({
   minWidth: 0,
   maxWidth: '100%',
   paddingLeft: "".concat((0, _constants.gridSize)(), "px"),
@@ -44,7 +44,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, (0, _constants.gridSize)() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat((0, _colors.backgroundHover)(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: 0.5;\n        pointer-events: none;\n      ")
+    css(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, (0, _constants.borderRadius)(), _constants2.BORDER_WIDTH, (0, _constants.gridSize)() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat((0, _colors.backgroundHover)(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(_colors.B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat((0, _colors.backgroundActive)(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };
 /**
@@ -93,7 +93,7 @@ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     });
   };
 
-  return (0, _core.jsx)(_core.ClassNames, null, function (_ref3) {
+  return (0, _react2.jsx)(_react2.ClassNames, null, function (_ref3) {
     var css = _ref3.css;
 
     var props = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
@@ -106,11 +106,11 @@ var AvatarItem = /*#__PURE__*/(0, _react.forwardRef)(function (_ref2, ref) {
     }, componentProps()), testId && getTestId(testId, children)), (onClick || href) && {
       'aria-label': label
     }), {}, {
-      children: (0, _core.jsx)(_react.Fragment, null, avatar, (0, _core.jsx)("div", {
+      children: (0, _react2.jsx)(_react.Fragment, null, avatar, (0, _react2.jsx)("div", {
         css: avatarItemStyles
-      }, (0, _core.jsx)(_Text.default, {
+      }, (0, _react2.jsx)(_Text.default, {
         shouldTruncate: !isTruncationDisabled
-      }, primaryText), (0, _core.jsx)(_Text.default, {
+      }, primaryText), (0, _react2.jsx)(_Text.default, {
         isSecondary: true,
         shouldTruncate: !isTruncationDisabled
       }, secondaryText)))

package/dist/cjs/IconWrapper.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -13,7 +13,7 @@ var _constants = require("./constants");
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-var iconWrapperStyles = (0, _core.css)({
+var iconWrapperStyles = (0, _react.css)({
   display: 'flex',
   boxSizing: 'border-box',
   width: '100%',
@@ -33,7 +33,7 @@ var IconWrapper = function IconWrapper(_ref) {
   var _ref$bgColor = _ref.bgColor,
       bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref$bgColor,
       children = _ref.children;
-  return (0, _core.jsx)("span", {
+  return (0, _react.jsx)("span", {
     css: iconWrapperStyles,
     style: {
       border: "".concat(_constants.BORDER_WIDTH, "px solid ").concat(bgColor),

package/dist/cjs/Skeleton.js

@@ -5,7 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _constants = require("./constants");
 
@@ -20,15 +20,15 @@ var getStyles = function getStyles(_ref) {
       color = _ref$color === void 0 ? 'currentColor' : _ref$color,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
-  return {
+  return (0, _react.css)({
+    display: 'inline-block',
     width: "".concat(_constants.AVATAR_SIZES[size], "px"),
     height: "".concat(_constants.AVATAR_SIZES[size], "px"),
-    display: 'inline-block',
-    borderRadius: "".concat(appearance === 'square' ? "".concat(_constants.AVATAR_RADIUS[size], "px") : '50%'),
     backgroundColor: color,
     border: "".concat(_constants.BORDER_WIDTH, "px solid transparent"),
+    borderRadius: "".concat(appearance === 'square' ? "".concat(_constants.AVATAR_RADIUS[size], "px") : '50%'),
     opacity: "".concat(weight === 'strong' ? 0.3 : 0.15)
-  };
+  });
 };
 /**
  * __Skeleton__
@@ -45,7 +45,7 @@ var Skeleton = function Skeleton(_ref2) {
       appearance = _ref2.appearance,
       color = _ref2.color,
       weight = _ref2.weight;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     // TODO: Refactor styles to follow css prop rules
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
     css: getStyles({

package/dist/cjs/Text.js

@@ -9,7 +9,7 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -18,7 +18,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
 var getStyles = function getStyles(isSecondary, shouldTruncate) {
-  return _objectSpread(_objectSpread({
+  return (0, _react.css)(_objectSpread(_objectSpread({
     display: 'block',
     margin: 0,
     color: "var(--ds-text, ".concat(_colors.N900, ")")
@@ -29,7 +29,7 @@ var getStyles = function getStyles(isSecondary, shouldTruncate) {
   }), isSecondary && {
     color: "var(--ds-text-subtlest, ".concat(_colors.N200, ")"),
     fontSize: '0.85em'
-  });
+  }));
 };
 /**
  * __Text__
@@ -44,7 +44,7 @@ var Text = function Text(_ref) {
       shouldTruncate = _ref.shouldTruncate;
   return (// TODO: Refactor styles to follow css prop rules
     // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _core.jsx)("span", {
+    (0, _react.jsx)("span", {
       css: getStyles(isSecondary, shouldTruncate)
     }, children)
   );

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.0.2",
+	"version": "21.1.0",
 	"sideEffects": false
 }

package/dist/es2019/Avatar.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { createElement, forwardRef, useCallback, useEffect, useRef } from 'react';
-import { ClassNames, jsx } from '@emotion/core';
+import { ClassNames, jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
 import AvatarImage from './AvatarImage';
@@ -10,7 +10,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.0.2";
+const packageVersion = "21.1.0";
 
 const getStyles = (css, {
   size,
@@ -108,7 +108,7 @@ css`
         cursor: not-allowed;
 
         &::after {
-          opacity: 0.7;
+          opacity: ${"var(--ds-opacity-disabled, 0.7)"};
           pointer-events: none;
           background-color: ${`var(--ds-surface, ${N0})`};
         }

package/dist/es2019/AvatarImage.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { useEffect, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
 import { background, N90 } from '@atlaskit/theme/colors';

package/dist/es2019/AvatarItem.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { createElement, forwardRef, Fragment } from 'react';
-import { ClassNames, css, jsx } from '@emotion/core';
+import { ClassNames, css, jsx } from '@emotion/react';
 import { B200, backgroundActive, backgroundHover } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { BORDER_WIDTH } from './constants';
@@ -58,7 +58,7 @@ css`
 
     ${isDisabled && `
         cursor: not-allowed;
-        opacity: 0.5;
+        opacity: ${"var(--ds-opacity-disabled, 0.5)"};
         pointer-events: none;
       `}
   `;

package/dist/es2019/IconWrapper.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { background } from '@atlaskit/theme/colors';
 import { BORDER_WIDTH } from './constants';
 const iconWrapperStyles = css({

package/dist/es2019/Skeleton.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
 
 const getStyles = ({
@@ -8,13 +8,13 @@ const getStyles = ({
   appearance = 'circle',
   color = 'currentColor',
   weight = 'normal'
-}) => ({
+}) => css({
+  display: 'inline-block',
   width: `${AVATAR_SIZES[size]}px`,
   height: `${AVATAR_SIZES[size]}px`,
-  display: 'inline-block',
-  borderRadius: `${appearance === 'square' ? `${AVATAR_RADIUS[size]}px` : '50%'}`,
   backgroundColor: color,
   border: `${BORDER_WIDTH}px solid transparent`,
+  borderRadius: `${appearance === 'square' ? `${AVATAR_RADIUS[size]}px` : '50%'}`,
   opacity: `${weight === 'strong' ? 0.3 : 0.15}`
 });
 /**

package/dist/es2019/Text.js

@@ -1,9 +1,9 @@
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N200, N900 } from '@atlaskit/theme/colors';
 
-const getStyles = (isSecondary, shouldTruncate) => ({
+const getStyles = (isSecondary, shouldTruncate) => css({
   display: 'block',
   margin: 0,
   color: `var(--ds-text, ${N900})`,

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.0.2",
+	"version": "21.1.0",
 	"sideEffects": false
 }

package/dist/esm/Avatar.js

@@ -11,7 +11,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { createElement, forwardRef, useCallback, useEffect, useRef } from 'react';
-import { ClassNames, jsx } from '@emotion/core';
+import { ClassNames, jsx } from '@emotion/react';
 import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 import { B300, N0, N70A } from '@atlaskit/theme/colors';
 import AvatarImage from './AvatarImage';
@@ -20,7 +20,7 @@ import { PresenceWrapper } from './Presence';
 import { StatusWrapper } from './Status';
 import { getButtonProps, getCustomElement, getLinkProps } from './utilities';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.0.2";
+var packageVersion = "21.1.0";
 
 var getStyles = function getStyles(css, _ref) {
   var size = _ref.size,
@@ -32,7 +32,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: 0.7;\n          pointer-events: none;\n          background-color: ".concat("var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    height: ", "px;\n    width: ", "px;\n    align-items: stretch;\n    background-color: ", ";\n    border-radius: ", ";\n    box-sizing: content-box;\n    cursor: inherit;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    outline: none;\n    overflow: hidden;\n    position: static;\n    transform: translateZ(0);\n    transition: transform 200ms, opacity 200ms;\n    box-shadow: 0 0 0 ", "px ", ";\n    border: none;\n    margin: ", "px;\n    padding: 0;\n\n    /* Added font-size and font-family styles to fix alignment issue in firefox for interactive button avatar */\n    font-size: inherit;\n    font-family: inherit;\n\n    &::-moz-focus-inner {\n      border: 0;\n      margin: 0;\n      padding: 0;\n    }\n\n    &::after {\n      background-color: transparent;\n      bottom: 0px;\n\n      /* Added border-radius style to fix hover issue in safari */\n      border-radius: ", ";\n      content: ' ';\n      left: 0px;\n      opacity: 0;\n      pointer-events: none;\n      position: absolute;\n      right: 0px;\n      top: 0px;\n      transition: opacity 200ms;\n      width: 100%;\n    }\n\n    ", "\n\n    ", "\n\n    ", "\n  "])), size, size, borderColor, appearance === 'circle' ? '50%' : "".concat(radius, "px"), BORDER_WIDTH, borderColor, BORDER_WIDTH, appearance === 'circle' ? '50%' : "".concat(radius, "px"), stackIndex && "position: relative;", isInteractive && "\n      cursor: pointer;\n\n      :focus {\n        outline: none;\n        box-shadow: 0 0 0 ".concat(BORDER_WIDTH, "px ", "var(--ds-border-focused, ".concat(B300, ")"), "\n      }\n\n      :hover {\n        &::after {\n          background-color: ", "var(--ds-interaction-hovered, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        &::after {\n          background-color: ", "var(--ds-interaction-pressed, ".concat(N70A, ")"), ";\n          opacity: 1;\n        }\n      }\n\n      :active {\n        transform: scale(").concat(ACTIVE_SCALE_FACTOR, ");\n      }\n\n      @media screen and (forced-colors: active) {\n        &:focus-visible {\n          outline: 1px solid\n        }\n      }\n    "), isDisabled && "\n        cursor: not-allowed;\n\n        &::after {\n          opacity: ".concat("var(--ds-opacity-disabled, 0.7)", ";\n          pointer-events: none;\n          background-color: ", "var(--ds-surface, ".concat(N0, ")"), ";\n        }\n      "))
   );
 };
 /**

package/dist/esm/AvatarImage.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { useEffect, useState } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import PersonIcon from '@atlaskit/icon/glyph/person';
 import ShipIcon from '@atlaskit/icon/glyph/ship';
 import { background, N90 } from '@atlaskit/theme/colors';

package/dist/esm/AvatarItem.js

@@ -10,7 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 import { createElement, forwardRef, Fragment } from 'react';
-import { ClassNames, css, jsx } from '@emotion/core';
+import { ClassNames, css, jsx } from '@emotion/react';
 import { B200, backgroundActive, backgroundHover } from '@atlaskit/theme/colors';
 import { borderRadius, gridSize } from '@atlaskit/theme/constants';
 import { BORDER_WIDTH } from './constants';
@@ -29,7 +29,7 @@ var getStyles = function getStyles(css, _ref) {
       isInteractive = _ref.isInteractive,
       isDisabled = _ref.isDisabled;
   return (//eslint-disable-next-line @repo/internal/react/no-css-string-literals
-    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, gridSize() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(backgroundHover(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(backgroundActive(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: 0.5;\n        pointer-events: none;\n      ")
+    css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    align-items: center;\n    background-color: ", ";\n    border-radius: ", "px;\n    border: ", "px solid transparent;\n    box-sizing: border-box;\n    color: inherit;\n    display: flex;\n    font-size: inherit;\n    font-style: normal;\n    font-weight: normal;\n    line-height: 1;\n    outline: none;\n    margin: 0;\n    padding: ", "px;\n    text-align: left;\n    text-decoration: none;\n    width: 100%;\n\n    ", "\n\n    ", "\n  "])), backgroundColor, borderRadius(), BORDER_WIDTH, gridSize() / 2, isInteractive && "\n        :hover {\n          background-color: ".concat("var(--ds-background-neutral-subtle-hovered, ".concat(backgroundHover(), ")"), ";\n          cursor: pointer;\n          text-decoration: none;\n        }\n\n        :focus {\n          outline: none;\n          border-color: ", "var(--ds-border-focused, ".concat(B200, ")"), ";\n        }\n\n        :active {\n          background-color: ", "var(--ds-background-neutral-subtle-pressed, ".concat(backgroundActive(), ")"), ";\n        }\n      "), isDisabled && "\n        cursor: not-allowed;\n        opacity: ".concat("var(--ds-opacity-disabled, 0.5)", ";\n        pointer-events: none;\n      "))
   );
 };
 /**

package/dist/esm/IconWrapper.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { background } from '@atlaskit/theme/colors';
 import { BORDER_WIDTH } from './constants';
 var iconWrapperStyles = css({

package/dist/esm/Skeleton.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { AVATAR_RADIUS, AVATAR_SIZES, BORDER_WIDTH } from './constants';
 
 var getStyles = function getStyles(_ref) {
@@ -12,15 +12,15 @@ var getStyles = function getStyles(_ref) {
       color = _ref$color === void 0 ? 'currentColor' : _ref$color,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
-  return {
+  return css({
+    display: 'inline-block',
     width: "".concat(AVATAR_SIZES[size], "px"),
     height: "".concat(AVATAR_SIZES[size], "px"),
-    display: 'inline-block',
-    borderRadius: "".concat(appearance === 'square' ? "".concat(AVATAR_RADIUS[size], "px") : '50%'),
     backgroundColor: color,
     border: "".concat(BORDER_WIDTH, "px solid transparent"),
+    borderRadius: "".concat(appearance === 'square' ? "".concat(AVATAR_RADIUS[size], "px") : '50%'),
     opacity: "".concat(weight === 'strong' ? 0.3 : 0.15)
-  };
+  });
 };
 /**
  * __Skeleton__

package/dist/esm/Text.js

@@ -6,11 +6,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { N200, N900 } from '@atlaskit/theme/colors';
 
 var getStyles = function getStyles(isSecondary, shouldTruncate) {
-  return _objectSpread(_objectSpread({
+  return css(_objectSpread(_objectSpread({
     display: 'block',
     margin: 0,
     color: "var(--ds-text, ".concat(N900, ")")
@@ -21,7 +21,7 @@ var getStyles = function getStyles(isSecondary, shouldTruncate) {
   }), isSecondary && {
     color: "var(--ds-text-subtlest, ".concat(N200, ")"),
     fontSize: '0.85em'
-  });
+  }));
 };
 /**
  * __Text__

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/avatar",
-	"version": "21.0.2",
+	"version": "21.1.0",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/avatar",
-  "version": "21.0.2",
+  "version": "21.1.0",
   "description": "An avatar is a visual representation of a user or entity.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -40,11 +40,12 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1",
+    "@emotion/serialize": "^1.1.0"
   },
   "peerDependencies": {
     "react": "^16.8.0"
@@ -54,11 +55,11 @@
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.1",
     "@atlaskit/field-base": "^15.0.0",
-    "@atlaskit/icon": "^21.10.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/icon": "^21.11.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/toggle": "^12.5.0",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/report.api.md

@@ -1,6 +1,8 @@
-## API Report File for "@atlaskit/avatar"
+## API Report File for "@atlaskit/avatar".
 
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
 
 ```ts
 /// <reference types="react" />