cozy-sharing 24.0.0 → 25.0.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [25.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@24.0.0...cozy-sharing@25.0.0) (2025-03-17)
+
+### Features
+
+- **Sharing:** Replace legacy Avatars by modern Avatars ([480a092](https://github.com/cozy/cozy-libs/commit/480a0927521f818635022a74edf8a0b199b896a9))
+- **Sharing:** Upgrade cozy-ui ([732cde5](https://github.com/cozy/cozy-libs/commit/732cde5537c3c1142352c806c3af9b6e7b5d9031))
+
+### BREAKING CHANGES
+
+- **Sharing:** You must have `cozy-ui >= 121.1.1`
+
 # [24.0.0](https://github.com/cozy/cozy-libs/compare/cozy-sharing@23.2.0...cozy-sharing@24.0.0) (2025-03-12)
 
 ### Features

package/dist/SharedStatus.js

@@ -23,7 +23,7 @@ export var SharedStatus = withLocales(function (_ref) {
       link: getSharingLink(docId) !== null,
       onClick: onClick,
       isOwner: isOwner(docId),
-      size: 24,
+      size: "s",
       showMeAsOwner: showMeAsOwner
     });
   });

package/dist/components/Avatar/AvatarList.js

@@ -2,8 +2,10 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import cx from 'classnames';
 import React from 'react';
 import { useClient } from 'cozy-client';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Icon from 'cozy-ui/transpiled/react/Icon';
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link';
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
+import { isTwakeTheme } from 'cozy-ui/transpiled/react/helpers/isTwakeTheme';
 import { ExtraAvatar } from './ExtraAvatar';
 import { GroupAvatar } from './GroupAvatar';
 import { MemberAvatar } from './MemberAvatar';
@@ -18,9 +20,6 @@ var styles = {
   "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3ZTU-",
   "recipients-avatars": "recipient__recipients-avatars___1npjD",
   "--interactive": "recipient__--interactive___160Bp",
-  "recipients-avatars--link": "recipient__recipients-avatars--link___1qeON",
-  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___3-6_l",
-  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___-owjC",
   "spin": "recipient__spin___2tYv3",
   "shake": "recipient__shake___TGyPp"
 };
@@ -74,13 +73,15 @@ var AvatarList = function AvatarList(_ref2) {
   }, link && /*#__PURE__*/React.createElement("span", {
     "data-testid": "AvatarList-link"
   }, /*#__PURE__*/React.createElement(Avatar, {
-    className: styles['recipients-avatars--link'],
-    icon: LinkIcon,
+    color: "none",
+    border: true,
+    innerBorder: isTwakeTheme(),
     size: size
-  })), hasExtraRecipients && /*#__PURE__*/React.createElement("span", {
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: LinkIcon
+  }))), hasExtraRecipients && /*#__PURE__*/React.createElement("span", {
     "data-testid": "AvatarList-plusX"
   }, /*#__PURE__*/React.createElement(ExtraAvatar, {
-    className: styles['recipients-avatars--plusX'],
     extraRecipients: extraRecipients,
     size: size
   })), shownRecipients.map(function (recipient) {
@@ -89,8 +90,7 @@ var AvatarList = function AvatarList(_ref2) {
         "data-testid": "AvatarList-avatar".concat(recipient.status === 'owner' ? '-owner' : ''),
         key: recipient.index
       }, /*#__PURE__*/React.createElement(GroupAvatar, {
-        size: size,
-        className: cx(styles['recipients-avatars--avatar'])
+        size: size
       }));
     }
 
@@ -99,8 +99,7 @@ var AvatarList = function AvatarList(_ref2) {
       key: recipient.index
     }, /*#__PURE__*/React.createElement(MemberAvatar, {
       recipient: recipient,
-      size: size,
-      className: cx(styles['recipients-avatars--avatar'])
+      size: size
     }));
   }));
 };

package/dist/components/Avatar/ExtraAvatar.js

@@ -1,7 +1,8 @@
 import uniqueId from 'lodash/uniqueId';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import { isTwakeTheme } from 'cozy-ui/transpiled/react/helpers/isTwakeTheme';
 import { SharingTooltip, TooltipRecipientList } from '../Tooltip';
 
 var ExtraAvatar = function ExtraAvatar(_ref) {
@@ -17,12 +18,10 @@ var ExtraAvatar = function ExtraAvatar(_ref) {
   }, /*#__PURE__*/React.createElement(Avatar, {
     className: className,
     size: size,
-    text: "+".concat(Math.min(extraRecipients.length, 99)),
-    style: {
-      backgroundColor: 'var(--genericRecipientBackground)',
-      color: 'var(--genericRecipientColor)'
-    }
-  }), /*#__PURE__*/React.createElement(SharingTooltip, {
+    color: "none",
+    border: true,
+    innerBorder: isTwakeTheme()
+  }, "+".concat(Math.min(extraRecipients.length, 99))), /*#__PURE__*/React.createElement(SharingTooltip, {
     id: sharingTooltipId
   }, /*#__PURE__*/React.createElement(TooltipRecipientList, {
     recipientNames: extraRecipients
@@ -36,6 +35,6 @@ ExtraAvatar.propTypes = {
 };
 ExtraAvatar.defaultProps = {
   extraRecipients: [],
-  size: 'medium'
+  size: 'm'
 };
 export { ExtraAvatar };

package/dist/components/Avatar/GroupAvatar.js

@@ -1,15 +1,18 @@
 import React from 'react';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Icon from 'cozy-ui/transpiled/react/Icon';
 import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team';
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
 
 var GroupAvatar = function GroupAvatar(_ref) {
   var size = _ref.size,
       className = _ref.className;
   return /*#__PURE__*/React.createElement(Avatar, {
-    icon: TeamIcon,
     size: size,
-    className: className
-  });
+    className: className,
+    border: true
+  }, /*#__PURE__*/React.createElement(Icon, {
+    icon: TeamIcon
+  }));
 };
 
 export { GroupAvatar };

package/dist/components/Avatar/MemberAvatar.js

@@ -8,9 +8,9 @@ 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) { _defineProperty(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; }
 
 import React from 'react';
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import logger from '../../logger';
-import { getDisplayName, getInitials } from '../../models';
+import { getInitials } from '../../models';
 
 var MemberAvatar = function MemberAvatar(_ref) {
   var recipient = _ref.recipient,
@@ -46,10 +46,9 @@ var MemberAvatar = function MemberAvatar(_ref) {
 
   return /*#__PURE__*/React.createElement(Avatar // image={image}
   , _extends({
-    text: getInitials(recipient),
-    textId: getDisplayName(recipient),
+    border: true,
     disabled: recipient.status === 'pending' || recipient.status === 'mail-not-send'
-  }, rest));
+  }, rest), getInitials(recipient));
 };
 
 export { MemberAvatar };

package/dist/components/ContactSuggestion.js

@@ -1,13 +1,13 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import { models } from 'cozy-client';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import ListItem from 'cozy-ui/transpiled/react/ListItem';
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
-import { GroupAvatar } from './Avatar/GroupAvatar';
 import { Contact, Group, getDisplayName, getInitials } from '../models';
+import { GroupAvatar } from './Avatar/GroupAvatar';
 var ContactModel = models.contact;
 export var ContactSuggestion = function ContactSuggestion(_ref) {
   var contactOrGroup = _ref.contactOrGroup;
@@ -33,11 +33,10 @@ export var ContactSuggestion = function ContactSuggestion(_ref) {
   return /*#__PURE__*/React.createElement(ListItem, {
     button: true
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, isContactGroup ? /*#__PURE__*/React.createElement(GroupAvatar, {
-    size: "small"
+    size: "m"
   }) : /*#__PURE__*/React.createElement(Avatar, {
-    text: avatarText,
-    size: "small"
-  })), /*#__PURE__*/React.createElement(ListItemText, {
+    size: "m"
+  }, avatarText)), /*#__PURE__*/React.createElement(ListItemText, {
     primary: name,
     secondary: details && details !== '' ? details : '-'
   }));

package/dist/components/Identity/ExtraIdentity.js

@@ -12,9 +12,6 @@ var styles = {
   "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3ZTU-",
   "recipients-avatars": "recipient__recipients-avatars___1npjD",
   "--interactive": "recipient__--interactive___160Bp",
-  "recipients-avatars--link": "recipient__recipients-avatars--link___1qeON",
-  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___3-6_l",
-  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___-owjC",
   "spin": "recipient__spin___2tYv3",
   "shake": "recipient__shake___TGyPp"
 };

package/dist/components/Identity/Identity.js

@@ -11,9 +11,6 @@ var styles = {
   "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3ZTU-",
   "recipients-avatars": "recipient__recipients-avatars___1npjD",
   "--interactive": "recipient__--interactive___160Bp",
-  "recipients-avatars--link": "recipient__recipients-avatars--link___1qeON",
-  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___3-6_l",
-  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___-owjC",
   "spin": "recipient__spin___2tYv3",
   "shake": "recipient__shake___TGyPp"
 };

package/dist/components/Identity/MemberIdentity.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["instance"];
 import React from 'react';
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import Identity from './Identity';
 import { getDisplayName, getInitials } from '../../models';
 var styles = {
@@ -14,9 +14,6 @@ var styles = {
   "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3ZTU-",
   "recipients-avatars": "recipient__recipients-avatars___1npjD",
   "--interactive": "recipient__--interactive___160Bp",
-  "recipients-avatars--link": "recipient__recipients-avatars--link___1qeON",
-  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___3-6_l",
-  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___-owjC",
   "spin": "recipient__spin___2tYv3",
   "shake": "recipient__shake___TGyPp"
 };
@@ -28,10 +25,7 @@ var MemberIdentity = function MemberIdentity(_ref) {
   var name = getDisplayName(rest);
   return /*#__PURE__*/React.createElement("div", {
     className: styles['recipient']
-  }, /*#__PURE__*/React.createElement(Avatar, {
-    text: getInitials(rest),
-    textId: name
-  }), /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement(Avatar, null, getInitials(rest)), /*#__PURE__*/React.createElement("div", {
     className: styles['recipient-ident-status']
   }, /*#__PURE__*/React.createElement(Identity, {
     name: name,

package/dist/components/Identity/OwnerIdentity.js

@@ -1,7 +1,7 @@
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 var _excluded = ["url", "size"];
 import React from 'react';
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import Identity from './Identity';
 import { getDisplayName, getInitials } from '../../models';
 var styles = {
@@ -14,9 +14,6 @@ var styles = {
   "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3ZTU-",
   "recipients-avatars": "recipient__recipients-avatars___1npjD",
   "--interactive": "recipient__--interactive___160Bp",
-  "recipients-avatars--link": "recipient__recipients-avatars--link___1qeON",
-  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___3-6_l",
-  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___-owjC",
   "spin": "recipient__spin___2tYv3",
   "shake": "recipient__shake___TGyPp"
 };
@@ -29,10 +26,8 @@ var OwnerIdentity = function OwnerIdentity(_ref) {
   return /*#__PURE__*/React.createElement("div", {
     className: styles['avatar']
   }, /*#__PURE__*/React.createElement(Avatar, {
-    text: getInitials(rest),
-    size: size,
-    textId: getDisplayName(rest)
-  }), /*#__PURE__*/React.createElement(Identity, {
+    size: size
+  }, getInitials(rest)), /*#__PURE__*/React.createElement(Identity, {
     name: getDisplayName(rest),
     details: url
   }));

package/dist/components/Recipient/GroupRecipient.js

@@ -60,7 +60,7 @@ var GroupRecipient = function GroupRecipient(props) {
     gutters: isMobile ? 'default' : 'double',
     size: "small"
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(GroupAvatar, {
-    size: "small"
+    size: "m"
   })), /*#__PURE__*/React.createElement(ListItemText, {
     primary: /*#__PURE__*/React.createElement(Typography, {
       variant: "body1"

package/dist/components/Recipient/GroupRecipientDetailWithAccess.js

@@ -1,11 +1,11 @@
 import React from 'react';
 import { useClient } from 'cozy-client';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import List from 'cozy-ui/transpiled/react/List';
 import ListItem from 'cozy-ui/transpiled/react/ListItem';
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import MemberRecipientStatus from './MemberRecipientStatus';
 import { getInitials, getDisplayName } from '../../models';
@@ -27,10 +27,8 @@ var GroupRecipientDetailWithAccess = function GroupRecipientDetailWithAccess(_re
       key: recipient.index,
       size: "small"
     }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Avatar, {
-      size: "small",
-      text: getInitials(recipient),
-      textId: name
-    })), /*#__PURE__*/React.createElement(ListItemText, {
+      size: "m"
+    }, getInitials(recipient))), /*#__PURE__*/React.createElement(ListItemText, {
       primary: name,
       secondary: /*#__PURE__*/React.createElement(MemberRecipientStatus, {
         status: recipient.status,

package/dist/components/Recipient/GroupRecipientDetailWithoutAccess.js

@@ -1,4 +1,5 @@
 import React from 'react';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden';
 import List from 'cozy-ui/transpiled/react/List';
@@ -6,7 +7,6 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem';
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { DEFAULT_DISPLAY_NAME } from '../../helpers/recipients';
 import { getInitials, getDisplayName } from '../../models';
@@ -30,10 +30,8 @@ var GroupRecipientDetailWithoutAccess = function GroupRecipientDetailWithoutAcce
       ellipsis: false,
       size: "small"
     }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Avatar, {
-      size: "small",
-      text: getInitials(recipient),
-      textId: name
-    })), /*#__PURE__*/React.createElement(ListItemText, {
+      size: "m"
+    }, getInitials(recipient))), /*#__PURE__*/React.createElement(ListItemText, {
       primary: name,
       secondary: /*#__PURE__*/React.createElement("div", {
         className: "u-flex u-flex-items-center"

package/dist/components/Recipient/GroupRecipientPermissions.js

@@ -115,7 +115,7 @@ var GroupRecipientPermissions = function GroupRecipientPermissions(_ref) {
     autoClose: true,
     onClose: hideMenu
   }, /*#__PURE__*/React.createElement(ActionsMenuMobileHeader, null, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(GroupAvatar, {
-    size: "small"
+    size: "m"
   })), /*#__PURE__*/React.createElement(ListItemText, {
     primary: name,
     primaryTypographyProps: {

package/dist/components/Recipient/LinkRecipient.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import PropTypes from 'prop-types';
 import React from 'react';
-import Circle from 'cozy-ui/transpiled/react/Circle';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import Fade from 'cozy-ui/transpiled/react/Fade';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link';
@@ -9,6 +9,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem';
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import { isTwakeTheme } from 'cozy-ui/transpiled/react/helpers/isTwakeTheme';
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import LinkRecipientPermissions from './LinkRecipientPermissions';
@@ -16,22 +17,6 @@ import RecipientConfirm from './RecipientConfirm';
 import { checkIsPermissionHasPassword, getPermissionExpiresDate } from '../../helpers/permissions';
 import { FADE_IN_DURATION } from '../../helpers/recipients';
 import { useSharingContext } from '../../hooks/useSharingContext';
-var styles = {
-  "recipient": "recipient__recipient___2DmZI",
-  "recipients-list-light": "recipient__recipients-list-light___Vq4op",
-  "recipient-idents": "recipient__recipient-idents___3s7rw",
-  "recipient-user": "recipient__recipient-user___1THIU",
-  "recipient-details": "recipient__recipient-details___2fZfc",
-  "avatar": "recipient__avatar___2LnIV",
-  "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3ZTU-",
-  "recipients-avatars": "recipient__recipients-avatars___1npjD",
-  "--interactive": "recipient__--interactive___160Bp",
-  "recipients-avatars--link": "recipient__recipients-avatars--link___1qeON",
-  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___3-6_l",
-  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___-owjC",
-  "spin": "recipient__spin___2tYv3",
-  "shake": "recipient__shake___TGyPp"
-};
 
 var LinkRecipient = function LinkRecipient(props) {
   var _useI18n = useI18n(),
@@ -70,9 +55,11 @@ var LinkRecipient = function LinkRecipient(props) {
   }, /*#__PURE__*/React.createElement(ListItem, {
     gutters: isMobile ? 'default' : 'double',
     size: "small"
-  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Circle, {
-    size: "small",
-    className: styles['link-recipient-icon-circle']
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "m",
+    color: "none",
+    border: true,
+    innerBorder: isTwakeTheme()
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: LinkIcon
   }))), /*#__PURE__*/React.createElement(ListItemText, {

package/dist/components/Recipient/LinkRecipientLite.js

@@ -1,31 +1,16 @@
 import PropTypes from 'prop-types';
 import React from 'react';
-import Circle from 'cozy-ui/transpiled/react/Circle';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link';
 import ListItem from 'cozy-ui/transpiled/react/ListItem';
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon';
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText';
 import Typography from 'cozy-ui/transpiled/react/Typography';
+import { isTwakeTheme } from 'cozy-ui/transpiled/react/helpers/isTwakeTheme';
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n';
 import { checkIsReadOnlyPermissions } from '../../helpers/permissions';
 import withLocales from '../../hoc/withLocales';
-var styles = {
-  "recipient": "recipient__recipient___2DmZI",
-  "recipients-list-light": "recipient__recipients-list-light___Vq4op",
-  "recipient-idents": "recipient__recipient-idents___3s7rw",
-  "recipient-user": "recipient__recipient-user___1THIU",
-  "recipient-details": "recipient__recipient-details___2fZfc",
-  "avatar": "recipient__avatar___2LnIV",
-  "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3ZTU-",
-  "recipients-avatars": "recipient__recipients-avatars___1npjD",
-  "--interactive": "recipient__--interactive___160Bp",
-  "recipients-avatars--link": "recipient__recipients-avatars--link___1qeON",
-  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___3-6_l",
-  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___-owjC",
-  "spin": "recipient__spin___2tYv3",
-  "shake": "recipient__shake___TGyPp"
-};
 
 var LinkRecipientLite = function LinkRecipientLite(_ref) {
   var permissions = _ref.permissions,
@@ -39,9 +24,11 @@ var LinkRecipientLite = function LinkRecipientLite(_ref) {
   return /*#__PURE__*/React.createElement(ListItem, {
     size: "small",
     ellipsis: true
-  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Circle, {
-    size: "small",
-    className: styles['link-recipient-icon-circle']
+  }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "m",
+    color: "none",
+    border: true,
+    innerBorder: isTwakeTheme()
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: LinkIcon
   }))), /*#__PURE__*/React.createElement(ListItemText, {

package/dist/components/Recipient/MemberRecipient.js

@@ -51,7 +51,7 @@ var MemberRecipient = function MemberRecipient(props) {
     gutters: isMobile ? 'default' : 'double',
     size: "small"
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatar, {
-    size: "small",
+    size: "m",
     recipient: props
   })), /*#__PURE__*/React.createElement(ListItemText, {
     primary: /*#__PURE__*/React.createElement(Typography, {

package/dist/components/Recipient/MemberRecipientLite.js

@@ -32,7 +32,7 @@ var MemberRecipientLite = function MemberRecipientLite(_ref) {
     size: "small",
     ellipsis: true
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, /*#__PURE__*/React.createElement(MemberAvatar, _extends({
-    size: "small",
+    size: "m",
     recipient: recipient
   }, props))), /*#__PURE__*/React.createElement(ListItemText, {
     primary: isMe ? t('Share.recipients.you') : getDisplayName(recipient, t(DEFAULT_DISPLAY_NAME)),

package/dist/components/ShareAutosuggest.js

@@ -3,9 +3,9 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import Autosuggest from 'react-autosuggest';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
 import Chip from 'cozy-ui/transpiled/react/Chips';
 import { Spinner } from 'cozy-ui/transpiled/react/Spinner';
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar';
 import { GroupAvatar } from './Avatar/GroupAvatar';
 import ContactSuggestion from './ContactSuggestion';
 import { extractEmails, validateEmail } from '../helpers/email';
@@ -160,11 +160,10 @@ var ShareAutocomplete = function ShareAutocomplete(_ref) {
         id: "recipient_".concat(idx),
         key: "key_recipient_".concat(idx),
         avatar: isContactGroup ? /*#__PURE__*/React.createElement(GroupAvatar, {
-          size: "xsmall"
+          size: "xs"
         }) : /*#__PURE__*/React.createElement(Avatar, {
-          text: avatarText,
-          size: "xsmall"
-        }),
+          size: "xs"
+        }, avatarText),
         label: name,
         onDelete: function onDelete() {
           onAutosuggestRemove(recipient);

package/dist/components/SharedDrive/SharedDriveRecipient.js

@@ -37,9 +37,9 @@ var SharedDriveRecipient = function SharedDriveRecipient(props) {
     gutters: isMobile ? 'default' : 'double',
     size: "small"
   }, /*#__PURE__*/React.createElement(ListItemIcon, null, members ? /*#__PURE__*/React.createElement(GroupAvatar, {
-    size: "small"
+    size: "m"
   }) : /*#__PURE__*/React.createElement(MemberAvatar, {
-    size: "small",
+    size: "m",
     recipient: props
   })), /*#__PURE__*/React.createElement(ListItemText, {
     primary: /*#__PURE__*/React.createElement(Typography, {

package/dist/components/WhoHasAccessLight.js

@@ -13,9 +13,6 @@ var styles = {
   "link-recipient-icon-circle": "recipient__link-recipient-icon-circle___3ZTU-",
   "recipients-avatars": "recipient__recipients-avatars___1npjD",
   "--interactive": "recipient__--interactive___160Bp",
-  "recipients-avatars--link": "recipient__recipients-avatars--link___1qeON",
-  "recipients-avatars--plusX": "recipient__recipients-avatars--plusX___3-6_l",
-  "recipients-avatars--avatar": "recipient__recipients-avatars--avatar___-owjC",
   "spin": "recipient__spin___2tYv3",
   "shake": "recipient__shake___TGyPp"
 };

package/dist/styles/recipient.styl

@@ -61,17 +61,5 @@
     &.--interactive
         cursor pointer
 
-    &--link,
-    &--plusX,
-    &--avatar
-        border-width 2px
-        border-style solid
-        border-color var(--paperBackgroundColor)
-
-    &--link
-        background-color var(--genericRecipientBackground)
-        svg
-            fill: var(--genericRecipientColor)
-
     & > *:not(:first-child)
         margin-right -0.6rem

package/dist/stylesheet.css

@@ -151,19 +151,6 @@
 .recipient__recipients-avatars___1npjD.recipient__--interactive___160Bp {
   cursor: pointer;
 }
-.recipient__recipients-avatars--link___1qeON,
-.recipient__recipients-avatars--plusX___3-6_l,
-.recipient__recipients-avatars--avatar___-owjC {
-  border-width: 2px;
-  border-style: solid;
-  border-color: var(--paperBackgroundColor);
-}
-.recipient__recipients-avatars--link___1qeON {
-  background-color: var(--genericRecipientBackground);
-}
-.recipient__recipients-avatars--link___1qeON svg {
-  fill: var(--genericRecipientColor);
-}
 .recipient__recipients-avatars___1npjD > *:not(:first-child) {
   margin-right: -0.6rem;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-sharing",
-  "version": "24.0.0",
+  "version": "25.0.0",
   "description": "Provides sharing login for React applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -58,7 +58,7 @@
     "cozy-device-helper": "^3.7.1",
     "cozy-intent": "^2.30.0",
     "cozy-minilog": "^3.10.0",
-    "cozy-ui": "^119.2.0",
+    "cozy-ui": "^121.1.1",
     "jest": "26.6.3",
     "jest-environment-jsdom": "26.6.2",
     "react": "16.12.0",
@@ -71,7 +71,7 @@
     "cozy-device-helper": ">=3.7.1",
     "cozy-intent": ">=2.29.1",
     "cozy-minilog": ">=3.9.1",
-    "cozy-ui": ">=119.2.0",
+    "cozy-ui": ">=121.1.1",
     "prop-types": "^15.7.2",
     "react": "^16.12.0",
     "react-router": "^5.0.1"
@@ -79,5 +79,5 @@
   "sideEffects": [
     "*.css"
   ],
-  "gitHead": "57dd9ed354ce3321933b2e2321349f4d90d07cba"
+  "gitHead": "33dab08dabe1d4d7367cc83642c749d3af9edefa"
 }

package/src/SharedStatus.jsx

@@ -17,7 +17,7 @@ export const SharedStatus = withLocales(
             link={getSharingLink(docId) !== null}
             onClick={onClick}
             isOwner={isOwner(docId)}
-            size={24}
+            size="s"
             showMeAsOwner={showMeAsOwner}
           />
         )

package/src/components/Avatar/AvatarList.jsx

@@ -2,8 +2,10 @@ import cx from 'classnames'
 import React from 'react'
 
 import { useClient } from 'cozy-client'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
+import { isTwakeTheme } from 'cozy-ui/transpiled/react/helpers/isTwakeTheme'
 
 import { ExtraAvatar } from './ExtraAvatar'
 import { GroupAvatar } from './GroupAvatar'
@@ -73,20 +75,14 @@ const AvatarList = ({
     >
       {link && (
         <span data-testid="AvatarList-link">
-          <Avatar
-            className={styles['recipients-avatars--link']}
-            icon={LinkIcon}
-            size={size}
-          />
+          <Avatar color="none" border innerBorder={isTwakeTheme()} size={size}>
+            <Icon icon={LinkIcon} />
+          </Avatar>
         </span>
       )}
       {hasExtraRecipients && (
         <span data-testid="AvatarList-plusX">
-          <ExtraAvatar
-            className={styles['recipients-avatars--plusX']}
-            extraRecipients={extraRecipients}
-            size={size}
-          />
+          <ExtraAvatar extraRecipients={extraRecipients} size={size} />
         </span>
       )}
       {shownRecipients.map(recipient => {
@@ -98,10 +94,7 @@ const AvatarList = ({
               }`}
               key={recipient.index}
             >
-              <GroupAvatar
-                size={size}
-                className={cx(styles['recipients-avatars--avatar'])}
-              />
+              <GroupAvatar size={size} />
             </span>
           )
         }
@@ -113,11 +106,7 @@ const AvatarList = ({
             }`}
             key={recipient.index}
           >
-            <MemberAvatar
-              recipient={recipient}
-              size={size}
-              className={cx(styles['recipients-avatars--avatar'])}
-            />
+            <MemberAvatar recipient={recipient} size={size} />
           </span>
         )
       })}

package/src/components/Avatar/ExtraAvatar.jsx

@@ -2,7 +2,8 @@ import uniqueId from 'lodash/uniqueId'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import { isTwakeTheme } from 'cozy-ui/transpiled/react/helpers/isTwakeTheme'
 
 import { SharingTooltip, TooltipRecipientList } from '../Tooltip'
 
@@ -14,12 +15,12 @@ const ExtraAvatar = ({ className, size, extraRecipients = [] }) => {
       <Avatar
         className={className}
         size={size}
-        text={`+${Math.min(extraRecipients.length, 99)}`}
-        style={{
-          backgroundColor: 'var(--genericRecipientBackground)',
-          color: 'var(--genericRecipientColor)'
-        }}
-      />
+        color="none"
+        border
+        innerBorder={isTwakeTheme()}
+      >
+        {`+${Math.min(extraRecipients.length, 99)}`}
+      </Avatar>
       <SharingTooltip id={sharingTooltipId}>
         <TooltipRecipientList recipientNames={extraRecipients} />
       </SharingTooltip>
@@ -35,7 +36,7 @@ ExtraAvatar.propTypes = {
 
 ExtraAvatar.defaultProps = {
   extraRecipients: [],
-  size: 'medium'
+  size: 'm'
 }
 
 export { ExtraAvatar }

package/src/components/Avatar/GroupAvatar.jsx

@@ -1,10 +1,15 @@
 import React from 'react'
 
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import TeamIcon from 'cozy-ui/transpiled/react/Icons/Team'
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
 
 const GroupAvatar = ({ size, className }) => {
-  return <Avatar icon={TeamIcon} size={size} className={className} />
+  return (
+    <Avatar size={size} className={className} border>
+      <Icon icon={TeamIcon} />
+    </Avatar>
+  )
 }
 
 export { GroupAvatar }

package/src/components/Avatar/MemberAvatar.jsx

@@ -1,9 +1,9 @@
 import React from 'react'
 
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
 import logger from '../../logger'
-import { getDisplayName, getInitials } from '../../models'
+import { getInitials } from '../../models'
 
 const MemberAvatar = ({ recipient, ...rest }) => {
   // There are cases when due to apparent memory leaks, the recipient does not exist
@@ -35,13 +35,14 @@ const MemberAvatar = ({ recipient, ...rest }) => {
   return (
     <Avatar
       // image={image}
-      text={getInitials(recipient)}
-      textId={getDisplayName(recipient)}
+      border
       disabled={
         recipient.status === 'pending' || recipient.status === 'mail-not-send'
       }
       {...rest}
-    />
+    >
+      {getInitials(recipient)}
+    </Avatar>
   )
 }
 

package/src/components/ContactSuggestion.jsx

@@ -2,14 +2,14 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import { models } from 'cozy-client'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
-import { GroupAvatar } from './Avatar/GroupAvatar'
 import { Contact, Group, getDisplayName, getInitials } from '../models'
+import { GroupAvatar } from './Avatar/GroupAvatar'
 
 const ContactModel = models.contact
 
@@ -33,9 +33,9 @@ export const ContactSuggestion = ({ contactOrGroup }) => {
     <ListItem button>
       <ListItemIcon>
         {isContactGroup ? (
-          <GroupAvatar size="small" />
+          <GroupAvatar size="m" />
         ) : (
-          <Avatar text={avatarText} size="small" />
+          <Avatar size="m">{avatarText}</Avatar>
         )}
       </ListItemIcon>
       <ListItemText

package/src/components/Identity/MemberIdentity.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
 import Identity from './Identity'
 import { getDisplayName, getInitials } from '../../models'
@@ -10,7 +10,7 @@ const MemberIdentity = ({ instance, ...rest }) => {
   const name = getDisplayName(rest)
   return (
     <div className={styles['recipient']}>
-      <Avatar text={getInitials(rest)} textId={name} />
+      <Avatar>{getInitials(rest)}</Avatar>
       <div className={styles['recipient-ident-status']}>
         <Identity name={name} details={instance} />
       </div>

package/src/components/Identity/OwnerIdentity.jsx

@@ -1,6 +1,6 @@
 import React from 'react'
 
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 
 import Identity from './Identity'
 import { getDisplayName, getInitials } from '../../models'
@@ -8,11 +8,7 @@ import styles from '../../styles/recipient.styl'
 
 const OwnerIdentity = ({ url, size, ...rest }) => (
   <div className={styles['avatar']}>
-    <Avatar
-      text={getInitials(rest)}
-      size={size}
-      textId={getDisplayName(rest)}
-    />
+    <Avatar size={size}>{getInitials(rest)}</Avatar>
     <Identity name={getDisplayName(rest)} details={url} />
   </div>
 )

package/src/components/Recipient/GroupRecipient.jsx

@@ -52,7 +52,7 @@ const GroupRecipient = props => {
           size="small"
         >
           <ListItemIcon>
-            <GroupAvatar size="small" />
+            <GroupAvatar size="m" />
           </ListItemIcon>
           <ListItemText
             primary={<Typography variant="body1">{name}</Typography>}

package/src/components/Recipient/GroupRecipientDetailWithAccess.jsx

@@ -1,12 +1,12 @@
 import React from 'react'
 
 import { useClient } from 'cozy-client'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import List from 'cozy-ui/transpiled/react/List'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import MemberRecipientStatus from './MemberRecipientStatus'
@@ -29,11 +29,7 @@ const GroupRecipientDetailWithAccess = ({ withAccess }) => {
           return (
             <ListItem disableGutters key={recipient.index} size="small">
               <ListItemIcon>
-                <Avatar
-                  size="small"
-                  text={getInitials(recipient)}
-                  textId={name}
-                />
+                <Avatar size="m">{getInitials(recipient)}</Avatar>
               </ListItemIcon>
               <ListItemText
                 primary={name}

package/src/components/Recipient/GroupRecipientDetailWithoutAccess.jsx

@@ -1,5 +1,6 @@
 import React from 'react'
 
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import ForbiddenIcon from 'cozy-ui/transpiled/react/Icons/Forbidden'
 import List from 'cozy-ui/transpiled/react/List'
@@ -7,7 +8,6 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { DEFAULT_DISPLAY_NAME } from '../../helpers/recipients'
@@ -35,11 +35,7 @@ const GroupRecipientDetailWithoutAccess = ({ withoutAccess, isOwner }) => {
               size="small"
             >
               <ListItemIcon>
-                <Avatar
-                  size="small"
-                  text={getInitials(recipient)}
-                  textId={name}
-                />
+                <Avatar size="m">{getInitials(recipient)}</Avatar>
               </ListItemIcon>
               <ListItemText
                 primary={name}

package/src/components/Recipient/GroupRecipientPermissions.jsx

@@ -81,7 +81,7 @@ const GroupRecipientPermissions = ({
           >
             <ActionsMenuMobileHeader>
               <ListItemIcon>
-                <GroupAvatar size="small" />
+                <GroupAvatar size="m" />
               </ListItemIcon>
               <ListItemText
                 primary={name}

package/src/components/Recipient/LinkRecipient.jsx

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Circle from 'cozy-ui/transpiled/react/Circle'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Fade from 'cozy-ui/transpiled/react/Fade'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
@@ -9,6 +9,7 @@ import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { isTwakeTheme } from 'cozy-ui/transpiled/react/helpers/isTwakeTheme'
 import useBreakpoints from 'cozy-ui/transpiled/react/providers/Breakpoints'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
@@ -20,7 +21,6 @@ import {
 } from '../../helpers/permissions'
 import { FADE_IN_DURATION } from '../../helpers/recipients'
 import { useSharingContext } from '../../hooks/useSharingContext'
-import styles from '../../styles/recipient.styl'
 
 const LinkRecipient = props => {
   const { t, f, lang } = useI18n()
@@ -60,9 +60,9 @@ const LinkRecipient = props => {
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
       <ListItem gutters={isMobile ? 'default' : 'double'} size="small">
         <ListItemIcon>
-          <Circle size="small" className={styles['link-recipient-icon-circle']}>
+          <Avatar size="m" color="none" border innerBorder={isTwakeTheme()}>
             <Icon icon={LinkIcon} />
-          </Circle>
+          </Avatar>
         </ListItemIcon>
         <ListItemText
           primary={<Typography variant="body1">{textPrimary}</Typography>}

package/src/components/Recipient/LinkRecipientLite.jsx

@@ -1,18 +1,18 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Circle from 'cozy-ui/transpiled/react/Circle'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import LinkIcon from 'cozy-ui/transpiled/react/Icons/Link'
 import ListItem from 'cozy-ui/transpiled/react/ListItem'
 import ListItemIcon from 'cozy-ui/transpiled/react/ListItemIcon'
 import ListItemText from 'cozy-ui/transpiled/react/ListItemText'
 import Typography from 'cozy-ui/transpiled/react/Typography'
+import { isTwakeTheme } from 'cozy-ui/transpiled/react/helpers/isTwakeTheme'
 import { useI18n } from 'cozy-ui/transpiled/react/providers/I18n'
 
 import { checkIsReadOnlyPermissions } from '../../helpers/permissions'
 import withLocales from '../../hoc/withLocales'
-import styles from '../../styles/recipient.styl'
 
 const LinkRecipientLite = ({ permissions, link }) => {
   const { t } = useI18n()
@@ -24,9 +24,9 @@ const LinkRecipientLite = ({ permissions, link }) => {
   return (
     <ListItem size="small" ellipsis>
       <ListItemIcon>
-        <Circle size="small" className={styles['link-recipient-icon-circle']}>
+        <Avatar size="m" color="none" border innerBorder={isTwakeTheme()}>
           <Icon icon={LinkIcon} />
-        </Circle>
+        </Avatar>
       </ListItemIcon>
       <ListItemText
         primary={t('Share.recipients.anyoneWithTheLink')}

package/src/components/Recipient/MemberRecipient.jsx

@@ -53,7 +53,7 @@ const MemberRecipient = props => {
     <Fade in timeout={fadeIn ? FADE_IN_DURATION : 0}>
       <ListItem gutters={isMobile ? 'default' : 'double'} size="small">
         <ListItemIcon>
-          <MemberAvatar size="small" recipient={props} />
+          <MemberAvatar size="m" recipient={props} />
         </ListItemIcon>
         <ListItemText
           primary={

package/src/components/Recipient/MemberRecipientLite.jsx

@@ -25,7 +25,7 @@ const MemberRecipientLite = ({ recipient, isOwner, ...props }) => {
   return (
     <ListItem size="small" ellipsis>
       <ListItemIcon>
-        <MemberAvatar size="small" recipient={recipient} {...props} />
+        <MemberAvatar size="m" recipient={recipient} {...props} />
       </ListItemIcon>
       <ListItemText
         primary={

package/src/components/ShareAutosuggest.jsx

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
 import Autosuggest from 'react-autosuggest'
 
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
 import Chip from 'cozy-ui/transpiled/react/Chips'
 import { Spinner } from 'cozy-ui/transpiled/react/Spinner'
-import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
 
 import { GroupAvatar } from './Avatar/GroupAvatar'
 import ContactSuggestion from './ContactSuggestion'
@@ -149,9 +149,9 @@ const ShareAutocomplete = ({
             key={`key_recipient_${idx}`}
             avatar={
               isContactGroup ? (
-                <GroupAvatar size="xsmall" />
+                <GroupAvatar size="xs" />
               ) : (
-                <Avatar text={avatarText} size="xsmall" />
+                <Avatar size="xs">{avatarText}</Avatar>
               )
             }
             label={name}

package/src/components/SharedDrive/SharedDriveRecipient.jsx

@@ -33,9 +33,9 @@ const SharedDriveRecipient = props => {
       <ListItem gutters={isMobile ? 'default' : 'double'} size="small">
         <ListItemIcon>
           {members ? (
-            <GroupAvatar size="small" />
+            <GroupAvatar size="m" />
           ) : (
-            <MemberAvatar size="small" recipient={props} />
+            <MemberAvatar size="m" recipient={props} />
           )}
         </ListItemIcon>
         <ListItemText

package/src/styles/recipient.styl

@@ -61,17 +61,5 @@
     &.--interactive
         cursor pointer
 
-    &--link,
-    &--plusX,
-    &--avatar
-        border-width 2px
-        border-style solid
-        border-color var(--paperBackgroundColor)
-
-    &--link
-        background-color var(--genericRecipientBackground)
-        svg
-            fill: var(--genericRecipientColor)
-
     & > *:not(:first-child)
         margin-right -0.6rem