cozy-ui 146.3.1 → 146.5.1

package/CHANGELOG.md

@@ -1,3 +1,25 @@
+## [146.5.1](https://github.com/cozy/cozy-ui/compare/v146.5.0...v146.5.1) (2026-11-05)
+
+
+### Bug Fixes
+
+* **MemberAutocomplete:** Give the chip avatars the chip styles ([1cb1300](https://github.com/cozy/cozy-ui/commit/1cb1300))
+* **MemberList:** Use the mockup illustration in the empty state ([ecccbbd](https://github.com/cozy/cozy-ui/commit/ecccbbd))
+
+# [146.5.0](https://github.com/cozy/cozy-ui/compare/v146.4.0...v146.5.0) (2026-11-04)
+
+
+### Features
+
+* **ColorList:** Name the colors ([886abac](https://github.com/cozy/cozy-ui/commit/886abac))
+
+# [146.4.0](https://github.com/cozy/cozy-ui/compare/v146.3.1...v146.4.0) (2026-11-04)
+
+
+### Features
+
+* **EditBadge:** Add componentsProps to customize the badge button ([8248bc7](https://github.com/cozy/cozy-ui/commit/8248bc7))
+
 ## [146.3.1](https://github.com/cozy/cozy-ui/compare/v146.3.0...v146.3.1) (2026-11-03)
 
 

package/assets/icons/illus/empty-members-illustration.svg

@@ -0,0 +1 @@
+<svg width="59" height="37" viewBox="0 0 59 37" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15.59 22.783c.182-.274.37-.544.57-.807l.408-.536-.478-.279a10.822 10.822 0 0 0-5.449-1.46C4.774 19.702 0 24.352 0 30.067v3.185c0 .59.494 1.069 1.101 1.069h11.907v-3.012c0-.347.015-.714.048-1.154l.017-.212c.033-.384.081-.767.143-1.147l.01-.05c.068-.407.153-.81.254-1.21.1-.394.216-.782.347-1.166l-.47-.155.498.072c.26-.749.576-1.477.947-2.177l.081-.153c.174-.32.36-.634.555-.941l.152-.232Zm-4.949-5.728c3.103 0 5.628-2.458 5.628-5.479 0-3.02-2.525-5.478-5.628-5.478s-5.627 2.457-5.627 5.479c0 3.02 2.524 5.478 5.627 5.478m33.654 13.297c-.01-.149-.02-.297-.035-.446-.01-.099-.024-.197-.036-.296a12.178 12.178 0 0 0-.051-.394c-.016-.102-.035-.203-.052-.304a14.777 14.777 0 0 0-.07-.382c-.02-.098-.043-.196-.065-.294a13.065 13.065 0 0 0-.091-.385l-.074-.273c-.038-.135-.076-.27-.118-.403l-.078-.24a15.208 15.208 0 0 0-.15-.43c-.024-.068-.049-.134-.074-.2a12.983 12.983 0 0 0-.256-.619 14.777 14.777 0 0 0-.233-.503c-.018-.034-.034-.07-.051-.104-.09-.181-.185-.36-.284-.538l-.03-.057a14.061 14.061 0 0 0-.34-.571l-.005-.011c-2.577-4.123-7.236-6.882-12.545-6.882a14.807 14.807 0 0 0-11.29 5.174l-.06.07a14.64 14.64 0 0 0-.752.977c-.034.049-.069.097-.102.146-.087.129-.173.258-.257.39-.041.065-.084.13-.124.196-.069.111-.134.225-.2.337-.05.088-.102.174-.15.263-.046.083-.088.168-.133.252-.062.119-.125.236-.184.357l-.011.024a14.081 14.081 0 0 0-1.155 3.472l-.04.212a14.116 14.116 0 0 0-.103.7c-.016.123-.031.245-.043.369-.013.126-.02.252-.03.378-.007.096-.016.191-.02.287-.011.227-.018.455-.018.684v4.48c0 .668.564 1.212 1.256 1.212h26.835c.692 0 1.255-.544 1.255-1.213v-4.479c0-.236-.006-.471-.018-.704-.004-.084-.013-.168-.018-.252Zm-14.98-16.418c3.948 0 7.16-3.126 7.16-6.967 0-3.841-3.212-6.967-7.16-6.967-3.95 0-7.16 3.126-7.16 6.967 0 3.841 3.211 6.967 7.16 6.967Zm18.866 5.03c-2.088 0-4.115.593-5.86 1.715l-.462.296.35.42a15.717 15.717 0 0 1 1.999 3.07l.024.05c.1.205.197.412.29.625l.036.08c.088.205.171.412.265.657l.019.046c.176.472.33.952.459 1.44l.029.118c.05.193.096.388.138.584l.05.252a14.119 14.119 0 0 1 .19 1.21c.011.096.023.19.032.286.016.165.028.33.038.496l.017.249c.012.249.02.498.02.75v2.274h11.907c.607 0 1.1-.48 1.1-1.07v-3.184c0-5.714-4.774-10.363-10.641-10.363m0-2.391c3.103 0 5.627-2.458 5.627-5.479 0-3.02-2.524-5.478-5.627-5.478-3.103 0-5.627 2.458-5.627 5.478 0 3.021 2.524 5.479 5.627 5.479Z" fill="#DCEDFD"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "146.3.1",
+  "version": "146.5.1",
   "description": "Cozy apps UI SDK",
   "engines": {
     "node": "24.x"

package/react/ColorList/Readme.md

@@ -15,8 +15,10 @@ const ColorPickerDemo = ({ variant }) => {
     <div style={{ width: (variant.medium || isMobile) ? '100%' : 200 }}>
       <ColorList
         size={variant.medium ? 'medium' : undefined}
+        getColorLabel={color => `Color ${color}`}
         customColorProps={{
           enabled: true,
+          'aria-label': 'Custom color',
           onClick: () => {}
         }}
         selectedColor={selectedColor}

package/react/ColorList/index.jsx

@@ -15,7 +15,15 @@ const sizeToPx = {
   medium: 41
 }
 
-const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
+const ColorList = ({
+  size,
+  selectedColor,
+  getColorLabel,
+  customColorProps,
+  onClick
+}) => {
+  const { enabled: isCustomEnabled, ...customButtonProps } =
+    customColorProps ?? {}
   const { isMobile } = useBreakpoints()
 
   const _size = size || (isMobile ? 'medium' : 'small')
@@ -37,6 +45,8 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
           <ButtonBase
             className="u-bdrs-circle"
             component="div"
+            aria-label={getColorLabel?.(color) ?? color}
+            aria-pressed={selectedColor?.toUpperCase() === color}
             onClick={() => onClick?.(color)}
           >
             <Avatar color={color} size={avatarSize}>
@@ -49,12 +59,13 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
           </ButtonBase>
         </ImageListItem>
       ))}
-      {customColorProps?.enabled && (
+      {isCustomEnabled && (
         <ImageListItem
           className="u-ta-center"
           classes={{ item: 'u-ov-visible' }}
         >
           <Button
+            {...customButtonProps}
             className="u-miw-auto u-mih-auto u-p-0 u-bdrs-circle"
             variant="ghost"
             style={{
@@ -68,7 +79,6 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
             }}
             classes={{ label: 'u-flex u-w-auto' }}
             label={<Icon icon={Palette} size={iconSize} color="#000" />}
-            onClick={ev => customColorProps?.onClick(ev)}
           />
         </ImageListItem>
       )}
@@ -79,9 +89,14 @@ const ColorList = ({ size, selectedColor, customColorProps, onClick }) => {
 ColorList.propTypes = {
   size: propTypes.oneOf(['small', 'medium']),
   selectedColor: propTypes.string,
+  /** Accessible name of a color. Defaults to its hexadecimal code */
+  getColorLabel: propTypes.func,
   customColorProps: propTypes.shape({
     enabled: propTypes.bool,
-    onClick: propTypes.func
+    onClick: propTypes.func,
+    'aria-label': propTypes.string,
+    'aria-pressed': propTypes.bool,
+    'data-testid': propTypes.string
   }),
   onClick: propTypes.func
 }

package/react/ColorList/index.spec.jsx

@@ -0,0 +1,56 @@
+import { fireEvent, render, screen } from '@testing-library/react'
+import React from 'react'
+
+import ColorList from '.'
+import { BreakpointsProvider } from '../providers/Breakpoints'
+
+const setup = props =>
+  render(
+    <BreakpointsProvider>
+      <ColorList {...props} />
+    </BreakpointsProvider>
+  )
+
+describe('ColorList', () => {
+  it('lets a keyboard reach and pick a color', () => {
+    const onClick = jest.fn()
+    setup({ onClick })
+
+    const color = screen.getByRole('button', { name: '#273891' })
+    expect(color.tabIndex).toBe(0)
+    fireEvent.keyDown(color, { key: 'Enter' })
+    expect(onClick).toHaveBeenCalledWith('#273891')
+  })
+
+  it('names its colors and tells the selected one, whatever its case', () => {
+    setup({
+      selectedColor: '#7e57e3',
+      getColorLabel: color => (color === '#7E57E3' ? 'Purple' : color)
+    })
+
+    expect(screen.getByRole('button', { name: 'Purple' })).toHaveAttribute(
+      'aria-pressed',
+      'true'
+    )
+    expect(screen.getByRole('button', { name: '#273891' })).toHaveAttribute(
+      'aria-pressed',
+      'false'
+    )
+  })
+
+  it('passes its props to the custom color button', () => {
+    const onClick = jest.fn()
+    setup({
+      customColorProps: {
+        enabled: true,
+        onClick,
+        'aria-label': 'Custom color',
+        'data-testid': 'custom'
+      }
+    })
+
+    fireEvent.click(screen.getByRole('button', { name: 'Custom color' }))
+    expect(onClick).toHaveBeenCalledTimes(1)
+    expect(screen.queryByTestId('custom')).toBeInTheDocument()
+  })
+})

package/react/EditBadge/Readme.md

@@ -14,6 +14,7 @@ import Avatar from 'cozy-ui/transpiled/react/Avatar'
       src={timestamp => ""}
       onUpload={file => {}}
       onDelete={() => {}}
+      componentsProps={{ button: { 'aria-label': 'Edit avatar' } }}
     >
       <Avatar size={94} alt="Avatar" />
     </EditBadge>

package/react/EditBadge/index.jsx

@@ -1,4 +1,5 @@
 import { Icon, Pen } from '@linagora/twake-icons'
+import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React, { useState, useRef } from 'react'
 
@@ -12,6 +13,7 @@ const EditBadge = ({
   onUpload,
   onDelete,
   anchorOrigin,
+  componentsProps,
   children,
   ...props
 }) => {
@@ -28,9 +30,13 @@ const EditBadge = ({
       badgeContent={
         <>
           <Button
+            {...componentsProps?.button}
             ref={menuAnchorRef}
             component="div"
-            className="u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle"
+            className={cx(
+              'u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle',
+              componentsProps?.button?.className
+            )}
             classes={{ label: 'u-flex u-w-auto' }}
             style={{
               outline: '4px solid var(--paperBackgroundColor)'
@@ -74,7 +80,11 @@ EditBadge.defaultProps = {
 EditBadge.propTypes = {
   src: PropTypes.func.isRequired,
   onUpload: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired
+  onDelete: PropTypes.func.isRequired,
+  componentsProps: PropTypes.shape({
+    /** Props spread to the badge button */
+    button: PropTypes.object
+  })
 }
 
 export default EditBadge

package/react/Icons/EmptyMembersIllustration.jsx

@@ -0,0 +1,15 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/empty-members-illustration.svg` to regenerate;
+import React from 'react'
+
+function SvgEmptyMembersIllustration(props) {
+  return (
+    <svg viewBox="0 0 59 37" fill="none" {...props}>
+      <path
+        d="M15.59 22.783c.182-.274.37-.544.57-.807l.408-.536-.478-.279a10.822 10.822 0 00-5.449-1.46C4.774 19.702 0 24.352 0 30.067v3.185c0 .59.494 1.069 1.101 1.069h11.907v-3.012c0-.347.015-.714.048-1.154l.017-.212c.033-.384.081-.767.143-1.147l.01-.05a15.11 15.11 0 01.601-2.376l-.47-.155.498.072c.26-.749.576-1.477.947-2.177l.081-.153c.174-.32.36-.634.555-.941l.152-.232zm-4.949-5.728c3.103 0 5.628-2.458 5.628-5.479 0-3.02-2.525-5.478-5.628-5.478s-5.627 2.457-5.627 5.479c0 3.02 2.524 5.478 5.627 5.478m33.654 13.297c-.01-.149-.02-.297-.035-.446-.01-.099-.024-.197-.036-.296a12.178 12.178 0 00-.051-.394c-.016-.102-.035-.203-.052-.304a14.777 14.777 0 00-.07-.382c-.02-.098-.043-.196-.065-.294a13.065 13.065 0 00-.091-.385l-.074-.273c-.038-.135-.076-.27-.118-.403l-.078-.24a15.208 15.208 0 00-.15-.43c-.024-.068-.049-.134-.074-.2a12.983 12.983 0 00-.256-.619 14.777 14.777 0 00-.233-.503c-.018-.034-.034-.07-.051-.104-.09-.181-.185-.36-.284-.538l-.03-.057a14.061 14.061 0 00-.34-.571l-.005-.011c-2.577-4.123-7.236-6.882-12.545-6.882a14.807 14.807 0 00-11.29 5.174l-.06.07a14.64 14.64 0 00-.752.977c-.034.049-.069.097-.102.146-.087.129-.173.258-.257.39-.041.065-.084.13-.124.196-.069.111-.134.225-.2.337-.05.088-.102.174-.15.263-.046.083-.088.168-.133.252-.062.119-.125.236-.184.357l-.011.024a14.081 14.081 0 00-1.155 3.472l-.04.212a14.116 14.116 0 00-.103.7c-.016.123-.031.245-.043.369-.013.126-.02.252-.03.378-.007.096-.016.191-.02.287-.011.227-.018.455-.018.684v4.48c0 .668.564 1.212 1.256 1.212h26.835c.692 0 1.255-.544 1.255-1.213v-4.479c0-.236-.006-.471-.018-.704-.004-.084-.013-.168-.018-.252zm-14.98-16.418c3.948 0 7.16-3.126 7.16-6.967 0-3.841-3.212-6.967-7.16-6.967-3.95 0-7.16 3.126-7.16 6.967 0 3.841 3.211 6.967 7.16 6.967zm18.866 5.03c-2.088 0-4.115.593-5.86 1.715l-.462.296.35.42a15.717 15.717 0 011.999 3.07l.024.05c.1.205.197.412.29.625l.036.08c.088.205.171.412.265.657l.019.046c.176.472.33.952.459 1.44l.029.118c.05.193.096.388.138.584l.05.252a14.119 14.119 0 01.19 1.21c.011.096.023.19.032.286.016.165.028.33.038.496l.017.249c.012.249.02.498.02.75v2.274h11.907c.607 0 1.1-.48 1.1-1.07v-3.184c0-5.714-4.774-10.363-10.641-10.363m0-2.391c3.103 0 5.627-2.458 5.627-5.479 0-3.02-2.524-5.478-5.627-5.478-3.103 0-5.627 2.458-5.627 5.478 0 3.021 2.524 5.479 5.627 5.479z"
+        fill="#DCEDFD"
+      />
+    </svg>
+  )
+}
+
+export default SvgEmptyMembersIllustration

package/react/MemberAutocomplete/Readme.md

@@ -63,3 +63,27 @@ initialState = { members: [], role: 'readWrite' }
   </Variants>
 </DemoProvider>
 ```
+
+### With picked members
+
+```jsx
+import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
+import MemberAutocomplete from 'cozy-ui/transpiled/react/MemberAutocomplete'
+
+const members = [
+  { id: 'alice', name: 'Alice Wonderland', subtitle: 'alice@cozy.cc', email: 'alice@cozy.cc', initials: 'AW' },
+  { id: 'bob', name: 'Bob Sponge', subtitle: 'bob@cozy.cc', email: 'bob@cozy.cc', initials: 'BS' },
+  { id: 'family', name: 'Family', subtitle: '3 members', isGroup: true, color: '#FF7F1B' }
+]
+
+;
+
+<DemoProvider>
+  <MemberAutocomplete
+    value={members}
+    title="Add people"
+    onChange={() => {}}
+    onSubmit={() => {}}
+  />
+</DemoProvider>
+```

package/react/MemberList/EmptyMembers.jsx

@@ -1,9 +1,9 @@
-import { Icon, Team } from '@linagora/twake-icons'
 import cx from 'classnames'
 import React from 'react'
 import { useI18n, useExtendI18n } from 'twake-i18n'
 
 import { locales } from './locales'
+import EmptyMembersIllustration from '../Icons/EmptyMembersIllustration'
 import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
 import { alpha, makeStyles } from '../styles'
@@ -31,7 +31,7 @@ const EmptyMembers = () => {
         classes.root
       )}
     >
-      <Icon icon={Team} size={48} color="var(--primaryColorLight)" />
+      <EmptyMembersIllustration width={59} height={37} />
       <Typography variant="body2" className="u-mt-half">
         {t('MemberList.empty.title')}
       </Typography>

package/react/MemberRow/MemberOrGroupAvatar.jsx

@@ -5,17 +5,27 @@ import MemberAvatar from './MemberAvatar'
 import MemberGroupAvatar from './MemberGroupAvatar'
 import { memberPropType } from './propTypes'
 
-const MemberOrGroupAvatar = ({ member, size }) => {
+const MemberOrGroupAvatar = ({ member, size, className }) => {
   const { avatarUrl, initials, color, isGroup } = member
 
-  if (isGroup) return <MemberGroupAvatar size={size} color={color} />
+  if (isGroup) {
+    return <MemberGroupAvatar size={size} color={color} className={className} />
+  }
 
-  return <MemberAvatar size={size} initials={initials} avatarUrl={avatarUrl} />
+  return (
+    <MemberAvatar
+      size={size}
+      initials={initials}
+      avatarUrl={avatarUrl}
+      className={className}
+    />
+  )
 }
 
 MemberOrGroupAvatar.propTypes = {
   member: memberPropType.isRequired,
-  size: PropTypes.string.isRequired
+  size: PropTypes.string.isRequired,
+  className: PropTypes.string
 }
 
 export default MemberOrGroupAvatar

package/transpiled/react/ColorList/index.d.ts

@@ -1,9 +1,10 @@
 export { COLORS };
 export default ColorList;
 import { COLORS } from "./helpers";
-declare function ColorList({ size, selectedColor, customColorProps, onClick }: {
+declare function ColorList({ size, selectedColor, getColorLabel, customColorProps, onClick }: {
     size: any;
     selectedColor: any;
+    getColorLabel: any;
     customColorProps: any;
     onClick: any;
 }): JSX.Element;
@@ -11,9 +12,13 @@ declare namespace ColorList {
     namespace propTypes {
         const size: propTypes.Requireable<string>;
         const selectedColor: propTypes.Requireable<string>;
+        const getColorLabel: propTypes.Requireable<(...args: any[]) => any>;
         const customColorProps: propTypes.Requireable<propTypes.InferProps<{
             enabled: propTypes.Requireable<boolean>;
             onClick: propTypes.Requireable<(...args: any[]) => any>;
+            'aria-label': propTypes.Requireable<string>;
+            'aria-pressed': propTypes.Requireable<boolean>;
+            'data-testid': propTypes.Requireable<string>;
         }>>;
         const onClick: propTypes.Requireable<(...args: any[]) => any>;
     }

package/transpiled/react/ColorList/index.js

@@ -1,3 +1,6 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["enabled"];
 import { Icon, Check, Palette } from '@linagora/twake-icons';
 import propTypes from 'prop-types';
 import React from 'react';
@@ -16,9 +19,14 @@ var sizeToPx = {
 var ColorList = function ColorList(_ref) {
   var size = _ref.size,
       selectedColor = _ref.selectedColor,
+      getColorLabel = _ref.getColorLabel,
       customColorProps = _ref.customColorProps,
       _onClick = _ref.onClick;
 
+  var _ref2 = customColorProps !== null && customColorProps !== void 0 ? customColorProps : {},
+      isCustomEnabled = _ref2.enabled,
+      customButtonProps = _objectWithoutProperties(_ref2, _excluded);
+
   var _useBreakpoints = useBreakpoints(),
       isMobile = _useBreakpoints.isMobile;
 
@@ -31,6 +39,8 @@ var ColorList = function ColorList(_ref) {
     rowHeight: avatarSize,
     gap: _size === 'medium' ? 16 : 5
   }, COLORS.map(function (color) {
+    var _getColorLabel;
+
     return /*#__PURE__*/React.createElement(ImageListItem, {
       key: color,
       className: "u-ta-center",
@@ -40,6 +50,8 @@ var ColorList = function ColorList(_ref) {
     }, /*#__PURE__*/React.createElement(ButtonBase, {
       className: "u-bdrs-circle",
       component: "div",
+      "aria-label": (_getColorLabel = getColorLabel === null || getColorLabel === void 0 ? void 0 : getColorLabel(color)) !== null && _getColorLabel !== void 0 ? _getColorLabel : color,
+      "aria-pressed": (selectedColor === null || selectedColor === void 0 ? void 0 : selectedColor.toUpperCase()) === color,
       onClick: function onClick() {
         return _onClick === null || _onClick === void 0 ? void 0 : _onClick(color);
       }
@@ -50,12 +62,12 @@ var ColorList = function ColorList(_ref) {
       icon: Check,
       size: iconSize
     }) : ' ')));
-  }), (customColorProps === null || customColorProps === void 0 ? void 0 : customColorProps.enabled) && /*#__PURE__*/React.createElement(ImageListItem, {
+  }), isCustomEnabled && /*#__PURE__*/React.createElement(ImageListItem, {
     className: "u-ta-center",
     classes: {
       item: 'u-ov-visible'
     }
-  }, /*#__PURE__*/React.createElement(Button, {
+  }, /*#__PURE__*/React.createElement(Button, _extends({}, customButtonProps, {
     className: "u-miw-auto u-mih-auto u-p-0 u-bdrs-circle",
     variant: "ghost",
     style: {
@@ -73,19 +85,22 @@ var ColorList = function ColorList(_ref) {
       icon: Palette,
       size: iconSize,
       color: "#000"
-    }),
-    onClick: function onClick(ev) {
-      return customColorProps === null || customColorProps === void 0 ? void 0 : customColorProps.onClick(ev);
-    }
-  })));
+    })
+  }))));
 };
 
 ColorList.propTypes = {
   size: propTypes.oneOf(['small', 'medium']),
   selectedColor: propTypes.string,
+
+  /** Accessible name of a color. Defaults to its hexadecimal code */
+  getColorLabel: propTypes.func,
   customColorProps: propTypes.shape({
     enabled: propTypes.bool,
-    onClick: propTypes.func
+    onClick: propTypes.func,
+    'aria-label': propTypes.string,
+    'aria-pressed': propTypes.bool,
+    'data-testid': propTypes.string
   }),
   onClick: propTypes.func
 };

package/transpiled/react/ColorList/index.spec.d.ts

@@ -0,0 +1 @@
+export {};

package/transpiled/react/EditBadge/index.d.ts

@@ -1,10 +1,11 @@
 export default EditBadge;
-declare function EditBadge({ src, onUpload, onDelete, anchorOrigin, children, ...props }: {
+declare function EditBadge({ src, onUpload, onDelete, anchorOrigin, componentsProps, children, ...props }: {
     [x: string]: any;
     src: any;
     onUpload: any;
     onDelete: any;
     anchorOrigin: any;
+    componentsProps: any;
     children: any;
 }): JSX.Element;
 declare namespace EditBadge {
@@ -18,6 +19,10 @@ declare namespace EditBadge {
         const src: PropTypes.Validator<(...args: any[]) => any>;
         const onUpload: PropTypes.Validator<(...args: any[]) => any>;
         const onDelete: PropTypes.Validator<(...args: any[]) => any>;
+        const componentsProps: PropTypes.Requireable<PropTypes.InferProps<{
+            /** Props spread to the badge button */
+            button: PropTypes.Requireable<object>;
+        }>>;
     }
 }
 import PropTypes from "prop-types";

package/transpiled/react/EditBadge/index.js

@@ -1,8 +1,9 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["src", "onUpload", "onDelete", "anchorOrigin", "children"];
+var _excluded = ["src", "onUpload", "onDelete", "anchorOrigin", "componentsProps", "children"];
 import { Icon, Pen } from '@linagora/twake-icons';
+import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React, { useState, useRef } from 'react';
 import EditMenu from "cozy-ui/transpiled/react/EditBadge/EditMenu";
@@ -11,10 +12,13 @@ import Badge from "cozy-ui/transpiled/react/Badge";
 import Button from "cozy-ui/transpiled/react/Buttons";
 
 var EditBadge = function EditBadge(_ref) {
+  var _componentsProps$butt;
+
   var src = _ref.src,
       onUpload = _ref.onUpload,
       onDelete = _ref.onDelete,
       anchorOrigin = _ref.anchorOrigin,
+      componentsProps = _ref.componentsProps,
       children = _ref.children,
       props = _objectWithoutProperties(_ref, _excluded);
 
@@ -37,10 +41,10 @@ var EditBadge = function EditBadge(_ref) {
   var menuAnchorRef = useRef(null);
   return /*#__PURE__*/React.createElement(Badge, _extends({}, props, {
     anchorOrigin: anchorOrigin,
-    badgeContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, {
+    badgeContent: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Button, _extends({}, componentsProps === null || componentsProps === void 0 ? void 0 : componentsProps.button, {
       ref: menuAnchorRef,
       component: "div",
-      className: "u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle",
+      className: cx('u-miw-auto u-w-2-half u-h-2-half u-bdrs-circle', componentsProps === null || componentsProps === void 0 ? void 0 : (_componentsProps$butt = componentsProps.button) === null || _componentsProps$butt === void 0 ? void 0 : _componentsProps$butt.className),
       classes: {
         label: 'u-flex u-w-auto'
       },
@@ -56,7 +60,7 @@ var EditBadge = function EditBadge(_ref) {
           return !v;
         });
       }
-    }), /*#__PURE__*/React.createElement(EditMenu, {
+    })), /*#__PURE__*/React.createElement(EditMenu, {
       anchorRef: menuAnchorRef.current,
       status: status,
       showMenu: showMenu,
@@ -83,6 +87,10 @@ EditBadge.defaultProps = {
 EditBadge.propTypes = {
   src: PropTypes.func.isRequired,
   onUpload: PropTypes.func.isRequired,
-  onDelete: PropTypes.func.isRequired
+  onDelete: PropTypes.func.isRequired,
+  componentsProps: PropTypes.shape({
+    /** Props spread to the badge button */
+    button: PropTypes.object
+  })
 };
 export default EditBadge;

package/transpiled/react/Icons/EmptyMembersIllustration.d.ts

@@ -0,0 +1,2 @@
+export default SvgEmptyMembersIllustration;
+declare function SvgEmptyMembersIllustration(props: any): JSX.Element;

package/transpiled/react/Icons/EmptyMembersIllustration.js

@@ -0,0 +1,15 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/illus/empty-members-illustration.svg` to regenerate;
+import React from 'react';
+
+function SvgEmptyMembersIllustration(props) {
+  return /*#__PURE__*/React.createElement("svg", _extends({
+    viewBox: "0 0 59 37",
+    fill: "none"
+  }, props), /*#__PURE__*/React.createElement("path", {
+    d: "M15.59 22.783c.182-.274.37-.544.57-.807l.408-.536-.478-.279a10.822 10.822 0 00-5.449-1.46C4.774 19.702 0 24.352 0 30.067v3.185c0 .59.494 1.069 1.101 1.069h11.907v-3.012c0-.347.015-.714.048-1.154l.017-.212c.033-.384.081-.767.143-1.147l.01-.05a15.11 15.11 0 01.601-2.376l-.47-.155.498.072c.26-.749.576-1.477.947-2.177l.081-.153c.174-.32.36-.634.555-.941l.152-.232zm-4.949-5.728c3.103 0 5.628-2.458 5.628-5.479 0-3.02-2.525-5.478-5.628-5.478s-5.627 2.457-5.627 5.479c0 3.02 2.524 5.478 5.627 5.478m33.654 13.297c-.01-.149-.02-.297-.035-.446-.01-.099-.024-.197-.036-.296a12.178 12.178 0 00-.051-.394c-.016-.102-.035-.203-.052-.304a14.777 14.777 0 00-.07-.382c-.02-.098-.043-.196-.065-.294a13.065 13.065 0 00-.091-.385l-.074-.273c-.038-.135-.076-.27-.118-.403l-.078-.24a15.208 15.208 0 00-.15-.43c-.024-.068-.049-.134-.074-.2a12.983 12.983 0 00-.256-.619 14.777 14.777 0 00-.233-.503c-.018-.034-.034-.07-.051-.104-.09-.181-.185-.36-.284-.538l-.03-.057a14.061 14.061 0 00-.34-.571l-.005-.011c-2.577-4.123-7.236-6.882-12.545-6.882a14.807 14.807 0 00-11.29 5.174l-.06.07a14.64 14.64 0 00-.752.977c-.034.049-.069.097-.102.146-.087.129-.173.258-.257.39-.041.065-.084.13-.124.196-.069.111-.134.225-.2.337-.05.088-.102.174-.15.263-.046.083-.088.168-.133.252-.062.119-.125.236-.184.357l-.011.024a14.081 14.081 0 00-1.155 3.472l-.04.212a14.116 14.116 0 00-.103.7c-.016.123-.031.245-.043.369-.013.126-.02.252-.03.378-.007.096-.016.191-.02.287-.011.227-.018.455-.018.684v4.48c0 .668.564 1.212 1.256 1.212h26.835c.692 0 1.255-.544 1.255-1.213v-4.479c0-.236-.006-.471-.018-.704-.004-.084-.013-.168-.018-.252zm-14.98-16.418c3.948 0 7.16-3.126 7.16-6.967 0-3.841-3.212-6.967-7.16-6.967-3.95 0-7.16 3.126-7.16 6.967 0 3.841 3.211 6.967 7.16 6.967zm18.866 5.03c-2.088 0-4.115.593-5.86 1.715l-.462.296.35.42a15.717 15.717 0 011.999 3.07l.024.05c.1.205.197.412.29.625l.036.08c.088.205.171.412.265.657l.019.046c.176.472.33.952.459 1.44l.029.118c.05.193.096.388.138.584l.05.252a14.119 14.119 0 01.19 1.21c.011.096.023.19.032.286.016.165.028.33.038.496l.017.249c.012.249.02.498.02.75v2.274h11.907c.607 0 1.1-.48 1.1-1.07v-3.184c0-5.714-4.774-10.363-10.641-10.363m0-2.391c3.103 0 5.627-2.458 5.627-5.479 0-3.02-2.524-5.478-5.627-5.478-3.103 0-5.627 2.458-5.627 5.478 0 3.021 2.524 5.479 5.627 5.479z",
+    fill: "#DCEDFD"
+  }));
+}
+
+export default SvgEmptyMembersIllustration;

package/transpiled/react/MemberList/EmptyMembers.js

@@ -1,8 +1,8 @@
-import { Icon, Team } from '@linagora/twake-icons';
 import cx from 'classnames';
 import React from 'react';
 import { useI18n, useExtendI18n } from 'twake-i18n';
 import { locales } from "cozy-ui/transpiled/react/MemberList/locales";
+import EmptyMembersIllustration from "cozy-ui/transpiled/react/Icons/EmptyMembersIllustration";
 import Typography from "cozy-ui/transpiled/react/Typography";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
 import { alpha, makeStyles } from "cozy-ui/transpiled/react/styles";
@@ -26,10 +26,9 @@ var EmptyMembers = function EmptyMembers() {
   var classes = useStyles();
   return /*#__PURE__*/React.createElement("div", {
     className: cx('u-flex u-flex-column u-flex-items-center u-pv-2 u-ph-1 u-bdrs-6', isMobile ? 'u-mh-1' : 'u-mh-2', classes.root)
-  }, /*#__PURE__*/React.createElement(Icon, {
-    icon: Team,
-    size: 48,
-    color: "var(--primaryColorLight)"
+  }, /*#__PURE__*/React.createElement(EmptyMembersIllustration, {
+    width: 59,
+    height: 37
   }), /*#__PURE__*/React.createElement(Typography, {
     variant: "body2",
     className: "u-mt-half"

package/transpiled/react/MemberRow/MemberOrGroupAvatar.d.ts

@@ -1,7 +1,8 @@
 export default MemberOrGroupAvatar;
-declare function MemberOrGroupAvatar({ member, size }: {
+declare function MemberOrGroupAvatar({ member, size, className }: {
     member: any;
     size: any;
+    className: any;
 }): JSX.Element;
 declare namespace MemberOrGroupAvatar {
     namespace propTypes {
@@ -34,6 +35,7 @@ declare namespace MemberOrGroupAvatar {
             data: PropTypes.Requireable<any>;
         }>>;
         const size: PropTypes.Validator<string>;
+        const className: PropTypes.Requireable<string>;
     }
 }
 import PropTypes from "prop-types";

package/transpiled/react/MemberRow/MemberOrGroupAvatar.js

@@ -6,24 +6,32 @@ import { memberPropType } from "cozy-ui/transpiled/react/MemberRow/propTypes";
 
 var MemberOrGroupAvatar = function MemberOrGroupAvatar(_ref) {
   var member = _ref.member,
-      size = _ref.size;
+      size = _ref.size,
+      className = _ref.className;
   var avatarUrl = member.avatarUrl,
       initials = member.initials,
       color = member.color,
       isGroup = member.isGroup;
-  if (isGroup) return /*#__PURE__*/React.createElement(MemberGroupAvatar, {
-    size: size,
-    color: color
-  });
+
+  if (isGroup) {
+    return /*#__PURE__*/React.createElement(MemberGroupAvatar, {
+      size: size,
+      color: color,
+      className: className
+    });
+  }
+
   return /*#__PURE__*/React.createElement(MemberAvatar, {
     size: size,
     initials: initials,
-    avatarUrl: avatarUrl
+    avatarUrl: avatarUrl,
+    className: className
   });
 };
 
 MemberOrGroupAvatar.propTypes = {
   member: memberPropType.isRequired,
-  size: PropTypes.string.isRequired
+  size: PropTypes.string.isRequired,
+  className: PropTypes.string
 };
 export default MemberOrGroupAvatar;