cozy-ui 118.0.0 → 119.0.0

package/react/ActionsBar/index.jsx

@@ -11,20 +11,31 @@ import AppBar from '../AppBar'
 import Box from '../Box'
 import Icon from '../Icon'
 import IconButton from '../IconButton'
+import CheckCircleIcon from '../Icons/CheckCircle'
 import CrossIcon from '../Icons/Cross'
 import CrossCircleIcon from '../Icons/CrossCircle'
 import DotsIcon from '../Icons/Dots'
 import Toolbar from '../Toolbar'
+import Typography from '../Typography'
+import { isTwakeTheme } from '../helpers/isTwakeTheme'
 import useBreakpoints from '../providers/Breakpoints'
+import CozyTheme from '../providers/CozyTheme'
 import { useI18n } from '../providers/I18n'
 import { makeStyles } from '../styles'
 
 const useStyles = makeStyles({
   appBar: ({ isMobile }) => ({
+    width: isTwakeTheme() && !isMobile ? 'calc(100% - 44px)' : '100%',
+    right: isTwakeTheme() && !isMobile ? '22px' : '0',
     height: isMobile ? '4rem' : '3rem',
     top: isMobile ? 'auto' : 0,
     bottom: isMobile ? 0 : undefined,
     zIndex: 'var(--zIndex-selection)',
+    borderRadius: isTwakeTheme()
+      ? isMobile
+        ? '16px 16px 0 0'
+        : '0 0 16px 16px'
+      : 'initial',
     boxShadow: isMobile ? 'var(--shadow8)' : 'var(--shadow1)'
   }),
   toolbar: {
@@ -54,15 +65,69 @@ const useStyles = makeStyles({
     position: 'absolute',
     right: 0
   },
-  actionsContainer: {
+  actionsContainer: ({ isMobile }) => ({
     display: 'flex',
     height: '100%',
     flexGrow: 1,
+    paddingRight: isTwakeTheme() && !isMobile ? 48 : 0,
     alignItems: 'center',
-    justifyContent: 'center'
-  }
+    justifyContent: isTwakeTheme() && !isMobile ? 'end' : 'center'
+  })
 })
 
+const SelectedCount = ({ styles, docs, onClose }) => {
+  const { isMobile } = useBreakpoints()
+  const { t } = useI18n()
+
+  const showMobileCloseButton = !!onClose && isMobile
+
+  if (isTwakeTheme()) {
+    if (isMobile)
+      return (
+        <Box
+          className="u-flex u-flex-items-center u-h-100 u-pr-1"
+          borderRadius="15px 0 0 0"
+          bgcolor="primary.main"
+          color="primary.contrastText"
+        >
+          <IconButton color="inherit" onClick={onClose}>
+            <Icon icon={CrossCircleIcon} />
+          </IconButton>
+          {docs.length}
+        </Box>
+      )
+
+    return (
+      <div className="u-flex u-flex-items-center u-h-100 u-ph-1">
+        <Icon
+          className="u-mr-1"
+          icon={CheckCircleIcon}
+          color="var(--iconTextColor)"
+        />
+        <Typography variant="body1" component="span">
+          {t('selected_light', docs.length)}
+        </Typography>
+      </div>
+    )
+  }
+
+  return (
+    <Box
+      className={styles.selectedCount}
+      padding={showMobileCloseButton ? '0 1rem 0 0' : '0 1rem'}
+      color="primary.contrastText"
+      bgcolor="primary.main"
+    >
+      {showMobileCloseButton && (
+        <IconButton color="inherit" onClick={onClose}>
+          <Icon icon={CrossCircleIcon} />
+        </IconButton>
+      )}
+      <div>{isMobile ? docs.length : t('selected', docs.length)}</div>
+    </Box>
+  )
+}
+
 const ActionsBar = ({
   actions,
   docs,
@@ -71,12 +136,10 @@ const ActionsBar = ({
   onClose
 }) => {
   const { isMobile } = useBreakpoints()
-  const { t } = useI18n()
   const anchorRef = useRef()
   const [showMenu, setShowMenu] = useState(false)
   const styles = useStyles({ isMobile })
 
-  const showMobileCloseButton = !!onClose && isMobile
   const showDesktopCloseButton = !!onClose && !isMobile
   const maxActionsDisplayed = isMobile ? 4 : maxDesktopActions
 
@@ -99,75 +162,65 @@ const ActionsBar = ({
   }
 
   return (
-    <AppBar className={styles.appBar} position="fixed" color="inherit">
-      <Toolbar
-        className={styles.toolbar}
-        variant={isMobile ? 'regular' : 'dense'}
-        disableGutters
-      >
-        {showDesktopCloseButton && (
-          <IconButton className={styles.desktopCloseButton} onClick={onClose}>
-            <Icon icon={CrossIcon} />
-          </IconButton>
-        )}
-        <Box
-          className={styles.selectedCount}
-          padding={showMobileCloseButton ? '0 1rem 0 0' : '0 1rem'}
-          color="primary.contrastText"
-          bgcolor="primary.main"
+    <CozyTheme variant={isTwakeTheme() ? 'inverted' : 'normal'}>
+      <AppBar className={styles.appBar} position="fixed" color="inherit">
+        <Toolbar
+          className={styles.toolbar}
+          variant={isMobile ? 'regular' : 'dense'}
+          disableGutters
         >
-          {showMobileCloseButton && (
-            <IconButton color="inherit" onClick={onClose}>
-              <Icon icon={CrossCircleIcon} />
+          {showDesktopCloseButton && (
+            <IconButton className={styles.desktopCloseButton} onClick={onClose}>
+              <Icon icon={CrossIcon} />
             </IconButton>
           )}
-          <div>{isMobile ? docs.length : t('selected', docs.length)}</div>
-        </Box>
-        <div className={styles.actionsContainer}>
-          {/* actions displayed in the bar itself */}
-          <ActionsItems
-            docs={docs}
-            component={ResponsiveAction}
-            actions={barActions}
-            onClick={handleClick}
-          />
-
-          {/* actions displayed in ActionsMenu */}
-          {menuActions.length > 0 && (
-            <>
-              {isMobile ? (
-                <ActionsItems
+          <SelectedCount styles={styles} docs={docs} onClose={onClose} />
+          <div className={styles.actionsContainer}>
+            {/* actions displayed in the bar itself */}
+            <ActionsItems
+              docs={docs}
+              component={ResponsiveAction}
+              actions={barActions}
+              onClick={handleClick}
+            />
+
+            {/* actions displayed in ActionsMenu */}
+            {menuActions.length > 0 && (
+              <>
+                {isMobile ? (
+                  <ActionsItems
+                    docs={docs}
+                    component={ResponsiveAction}
+                    actions={otherAction}
+                    onClick={() => setShowMenu(true)}
+                  />
+                ) : (
+                  <IconButton ref={anchorRef} onClick={() => setShowMenu(true)}>
+                    <Icon icon={DotsIcon} />
+                  </IconButton>
+                )}
+                <ActionsMenu
+                  ref={anchorRef}
+                  open={showMenu}
                   docs={docs}
-                  component={ResponsiveAction}
-                  actions={otherAction}
-                  onClick={() => setShowMenu(true)}
+                  actions={menuActions}
+                  anchorOrigin={{
+                    vertical: 'bottom',
+                    horizontal: 'left'
+                  }}
+                  componentsProps={{
+                    actionsItems: {
+                      onClick: handleClick
+                    }
+                  }}
+                  onClose={() => setShowMenu(false)}
                 />
-              ) : (
-                <IconButton ref={anchorRef} onClick={() => setShowMenu(true)}>
-                  <Icon icon={DotsIcon} />
-                </IconButton>
-              )}
-              <ActionsMenu
-                ref={anchorRef}
-                open={showMenu}
-                docs={docs}
-                actions={menuActions}
-                anchorOrigin={{
-                  vertical: 'bottom',
-                  horizontal: 'left'
-                }}
-                componentsProps={{
-                  actionsItems: {
-                    onClick: handleClick
-                  }
-                }}
-                onClose={() => setShowMenu(false)}
-              />
-            </>
-          )}
-        </div>
-      </Toolbar>
-    </AppBar>
+              </>
+            )}
+          </div>
+        </Toolbar>
+      </AppBar>
+    </CozyTheme>
   )
 }
 

package/react/ActionsBar/locales/en.json

@@ -1,3 +1,4 @@
 {
-  "selected": "%{smart_count} item selected |||| %{smart_count} items selected"
+  "selected": "%{smart_count} item selected |||| %{smart_count} items selected",
+  "selected_light": "%{smart_count} item |||| %{smart_count} items"
 }

package/react/ActionsBar/locales/fr.json

@@ -1,3 +1,4 @@
 {
-  "selected": "%{smart_count} élément sélectionné |||| %{smart_count} éléments sélectionnés"
+  "selected": "%{smart_count} élément sélectionné |||| %{smart_count} éléments sélectionnés",
+  "selected_light": "%{smart_count} élément |||| %{smart_count} éléments"
 }

package/react/Avatar/Readme.md

@@ -1,49 +1,71 @@
-#### Available sizes: xsmall, small, medium (default), large, xlarge
+### Grouped
 
-The size can also be specifically defined using a number of pixels.
+```jsx
+
+import AvatarGroup, { spacingByAvatarSize } from 'cozy-ui/transpiled/react/AvatarGroup'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import { supportedColors } from 'cozy-ui/transpiled/react/Avatar/helpers'
+import Icon from 'cozy-ui/transpiled/react/Icon'
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link"
+import cozyLogo from '../../docs/cozy-logo_white_128.png'
+
+const sizes = ['xs', 's', 'm', 'l', 'xl']
+
+;
+
+sizes.map(size => (
+  <AvatarGroup className="u-mb-half" key={size} max={5} size={size}>
+    <Avatar size={size} color={supportedColors[0]}>AB</Avatar>
+    <Avatar size={size} color={supportedColors[1]}>BC</Avatar>
+    <Avatar size={size} color={supportedColors[2]}><Icon icon={LinkIcon} /></Avatar>
+    <Avatar size={size} src={cozyLogo} />
+    <Avatar size={size} color={supportedColors[4]}>EF</Avatar>
+    <Avatar size={size} color={supportedColors[5]}>FG</Avatar>
+  </AvatarGroup>
+))
+```
+
+### Mui
 
 ```jsx
 import cozyLogo from '../../docs/cozy-logo_white_128.png'
 import CozyIcon from 'cozy-ui/transpiled/react/Icons/Cozy'
-import Avatar from 'cozy-ui/transpiled/react/Avatar';
-import Icon from 'cozy-ui/transpiled/react/Icon';
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import { supportedColors } from 'cozy-ui/transpiled/react/Avatar/helpers'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 
-import LinkIcon from "cozy-ui/transpiled/react/Icons/Link";
-import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning";
-import palette from 'cozy-ui/transpiled/react/palette';
-import Variants from 'cozy-ui/docs/components/Variants';
+import LinkIcon from "cozy-ui/transpiled/react/Icons/Link"
+import WarningIcon from "cozy-ui/transpiled/react/Icons/Warning"
+import Variants from 'cozy-ui/docs/components/Variants'
 
-const getStyle = size => ({
-  styleOverlap: {
-    marginLeft: size === 'xsmall' ? '-0.5rem' : '-1rem'
-  },
-  custom: {
-    color: 'black', backgroundColor: palette.seafoamGreen
-    }
-})
+const sizes = ['xs', 's', 'm', 'l', 'xl']
 
-const sizes = ['xsmall', 'small', 'medium', 'large', 'xlarge', 24];
+const initialVariants = [{ disabled: false }]
 
-const initialVariants = [
-  { disabled: false, ghost: false, overlap: false },
-];
+;
 
 <Variants initialVariants={initialVariants} screenshotAllVariants>
   {variant => (
     <>
-      {sizes.map((size, idx) => (
-        <React.Fragment key={size}>
-          {idx === sizes.length - 1 && <hr />}
-          <div className="u-flex u-mb-half">
-            <Avatar size={size} style={variant.overlap ? getStyle(size).styleOverlap : null} disabled={variant.disabled} ghost={variant.ghost} />
-            <Avatar size={size} style={variant.overlap ? getStyle(size).styleOverlap : null} text="CD" disabled={variant.disabled} ghost={variant.ghost} />
-            <Avatar size={size} style={variant.overlap ? getStyle(size).styleOverlap : null} image={cozyLogo} disabled={variant.disabled} ghost={variant.ghost} />
-            <Avatar size={size} style={variant.overlap ? getStyle(size).styleOverlap : null} icon={LinkIcon} disabled={variant.disabled} ghost={variant.ghost} />
-            <Avatar size={size} style={variant.overlap ? {...getStyle(size).styleOverlap, ...getStyle().custom} : getStyle().custom} text="CD" disabled={variant.disabled} ghost={variant.ghost} />
-            <Avatar size={size} style={variant.overlap ? getStyle(size).styleOverlap : null} icon={<Icon icon={WarningIcon} />} disabled={variant.disabled} ghost={variant.ghost} />
-          </div>
-        </React.Fragment>
+      {supportedColors.map(color => (
+        <div key={color} className="u-flex u-flex-items-center u-mb-half" style={{ gap: '0.5rem' }}>
+          {sizes.map(size => (
+            <React.Fragment key={size}>
+              <Avatar size={size} color={color} disabled={variant.disabled} />
+              <Avatar size={size} color={color} disabled={variant.disabled}>AB</Avatar>
+              <Avatar size={size} color={color} disabled={variant.disabled}><Icon icon={LinkIcon} /></Avatar>
+            </React.Fragment>
+          ))}
+        </div>
       ))}
+      <div className="u-flex u-flex-items-center u-mb-half" style={{ gap: '0.5rem' }}>
+        {sizes.map(size => (
+          <React.Fragment key={size}>
+            <Avatar size={size} src={cozyLogo} disabled={variant.disabled} />
+            <Avatar size={size} disabled={variant.disabled} />
+          </React.Fragment>
+        ))}
+      </div>
     </>
   )}
 </Variants>

package/react/Avatar/helpers.js

@@ -1,27 +1,45 @@
-import palette from '../palette'
+export const sizeToFontSize = {
+  xs: 8,
+  s: 11,
+  m: 16,
+  l: 24,
+  xl: 32
+}
+
+export const sizeToNb = {
+  xs: 16,
+  s: 24,
+  m: 32,
+  l: 48,
+  xl: 64
+}
+
+export const supportedColors = [
+  'sunrise',
+  'downy',
+  'sugarCoral',
+  'pinkBonnet',
+  'blueMana',
+  'nightBlue',
+  'snowPea',
+  'pluviophile',
+  'cornflower',
+  'paleGreen',
+  'moonBlue'
+]
 
-export const nameToColor = (name = '') => {
-  const colors = [
-    palette['azure'],
-    palette['melon'],
-    palette['blazeOrange'],
-    palette['pomegranate'],
-    palette['mango'],
-    palette['pumpkinOrange'],
-    palette['darkPeriwinkle'],
-    palette['purpley'],
-    palette['lightishPurple'],
-    palette['weirdGreen'],
-    palette['puertoRico'],
-    palette['emerald'],
-    palette['seafoamGreen'],
-    palette['lavender'],
-    palette['brightSun'],
-    palette['fuchsia']
-  ]
-  const key =
-    Array.from(name.toUpperCase())
-      .map(letter => letter.charCodeAt(0))
-      .reduce((sum, number) => sum + number, 0) % colors.length
-  return colors[key]
+// light color could be generated with "h-16 s-18 b+3" from hsb dark color
+export const colorMapping = {
+  sunrise: 'linear-gradient(136deg, #F8D280 14.84%, #F2AC69 96.03%)',
+  downy: 'linear-gradient(136deg, #81EAD4 14.84%, #62C6B7 96.03%)',
+  sugarCoral: 'linear-gradient(136deg, #F19E86 14.84%, #F95967 96.03%)',
+  pinkBonnet: 'linear-gradient(136deg, #E4ABF0 14.84%, #D96EED 96.03%)',
+  blueMana: 'linear-gradient(136deg, #85D9FD 14.84%, #2A9EFC 96.03%)',
+  nightBlue: 'linear-gradient(136deg, #80AEFF 39.32%, #883DFE 96.03%)',
+  snowPea: 'linear-gradient(136deg, #BDF4A1 14.84%, #52CE64 96.03%)',
+  pluviophile: 'linear-gradient(136deg, #A1D6F4 14.84%, #52CEC2 96.03%)',
+  cornflower: 'linear-gradient(135deg, #86D9D3 0%, #1CCFB4 100%)',
+  paleGreen: 'linear-gradient(135deg, #E2FA17 0%, #75D8CB 100%)',
+  moonBlue: 'linear-gradient(136deg, #6DCFFF 14.84%, #3D88F8 96.03%)',
+  undefined: ''
 }

package/react/Avatar/index.jsx

@@ -1,77 +1,42 @@
+import AvatarMui from '@material-ui/core/Avatar'
 import cx from 'classnames'
-import assign from 'lodash/assign'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import { nameToColor } from './helpers'
-import styles from './styles.styl'
-import { createSizeStyle } from '../Circle'
-import Icon, { iconPropType } from '../Icon'
-import PeopleIcon from '../Icons/People'
+import { colorMapping } from './helpers'
+import { makeStyles } from '../styles'
 
-const createBgColorStyle = ({ text, textId }) =>
-  text ? { backgroundColor: `${nameToColor(textId || text)}` } : {}
+const useStyles = makeStyles(theme => ({
+  colorDefault: {
+    color: ({ color }) => (color ? theme.palette.primary.contrastText : ''),
+    background: ({ color }) => colorMapping[color]
+  }
+}))
+
+const Avatar = ({ className, color, size, disabled, ...props }) => {
+  const classes = useStyles({ color })
 
-export const Avatar = ({
-  text,
-  textId,
-  image,
-  size,
-  className,
-  style,
-  disabled,
-  ghost,
-  icon
-}) => {
-  const sizeStyle = createSizeStyle(size)
-  const bgColorStyle = createBgColorStyle({ text, textId })
-  const avatarStyle = assign(bgColorStyle, sizeStyle, style)
-  const IconToRender = Icon.isProperIcon(icon) ? <Icon icon={icon} /> : icon
   return (
-    <div
-      data-testid="Avatar" // used by a test in cozy-contacts
-      className={cx(
-        styles['c-avatar'],
-        text ? styles['c-avatar--text'] : '',
-        image ? styles['c-avatar--image'] : '',
-        disabled ? styles['c-avatar--disabled'] : '',
-        ghost ? styles['c-avatar--ghost'] : '',
-        className
-      )}
-      style={avatarStyle}
-    >
-      {image && <img src={image} className={styles['c-avatar-image']} alt="" />}
-      {!image && text && (
-        <span className={styles['c-avatar-initials']}>{text}</span>
-      )}
-      {!image && !text && IconToRender}
-    </div>
+    <AvatarMui
+      classes={classes}
+      className={cx(className, `size-${size}`, { disabled: !!disabled })}
+      {...props}
+    />
   )
 }
 
 Avatar.propTypes = {
-  text: PropTypes.string,
-  image: PropTypes.string,
+  className: PropTypes.string,
   size: PropTypes.oneOfType([
-    PropTypes.oneOf(['xsmall', 'small', 'medium', 'large', 'xlarge']),
+    PropTypes.oneOf(['xs', 's', 'm', 'l', 'xl']),
     PropTypes.number
   ]),
-  className: PropTypes.string,
-  disabled: PropTypes.bool,
-  icon: PropTypes.oneOfType([PropTypes.node, iconPropType]),
-  ghost: PropTypes.bool,
-  style: PropTypes.object
+  color: PropTypes.string,
+  disabled: PropTypes.bool
 }
 
 Avatar.defaultProps = {
-  text: '',
-  image: '',
-  size: 'medium',
-  className: '',
-  disabled: false,
-  icon: PeopleIcon,
-  ghost: false,
-  style: {}
+  size: 'm'
 }
 
 export default Avatar

package/react/AvatarGroup/index.js

@@ -0,0 +1,39 @@
+import AvatarGroupMui from '@material-ui/lab/AvatarGroup'
+import React from 'react'
+
+import { sizeToNb, sizeToFontSize } from '../Avatar/helpers'
+import { makeStyles } from '../styles'
+
+export const spacingByAvatarSize = {
+  xs: 4,
+  s: 6,
+  m: 6,
+  l: 10,
+  xl: 16
+}
+
+const useStyles = makeStyles({
+  avatar: {
+    width: ({ size }) => sizeToNb[size],
+    height: ({ size }) => sizeToNb[size],
+    fontSize: ({ size }) => sizeToFontSize[size]
+  }
+})
+
+const AvatarGroup = ({ size, ...props }) => {
+  const classes = useStyles({ size })
+
+  return (
+    <AvatarGroupMui
+      spacing={spacingByAvatarSize[size]}
+      classes={classes}
+      {...props}
+    />
+  )
+}
+
+AvatarGroup.defaultProps = {
+  size: 'm'
+}
+
+export default AvatarGroup

package/react/Badge/Readme.md

@@ -65,7 +65,7 @@ Badges can be combined — in this example, we have an item with a new qualifica
 import Badge from 'cozy-ui/transpiled/react/Badge'
 import InfosBadge from 'cozy-ui/transpiled/react/InfosBadge'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
 import LinkIcon from "cozy-ui/transpiled/react/Icons/Link"
 
 ;

package/react/Buttons/Readme.md

@@ -126,6 +126,7 @@ const iconPositions = ['startIcon', 'endIcon']
             <Button
               className="u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
               classes={{ label: "u-flex u-w-auto" }}
+              size={isTwakeTheme() ? "small" : "medium"}
               label={<Icon icon={StopIcon} size={12} />}
               variant={variant}
             />
@@ -133,6 +134,7 @@ const iconPositions = ['startIcon', 'endIcon']
               className="u-ml-1 u-miw-auto u-w-2 u-h-2 u-bdrs-circle"
               classes={{ label: "u-flex u-w-auto" }}
               label={<Icon icon={StopIcon} size={12} />}
+              size={isTwakeTheme() ? "small" : "medium"}
               variant={variant}
               disabled
             />

package/react/Checkbox/index.jsx

@@ -4,6 +4,8 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
+import Icon from '../Icon'
+import CheckSquareIcon from '../Icons/CheckSquare'
 import createDepreciationLogger from '../helpers/createDepreciationLogger'
 
 const logDepecratedCheckbox = createDepreciationLogger()
@@ -19,6 +21,14 @@ const DefaultCheckbox = ({ label, error, mixed, disabled, ...props }) => {
       color={error ? 'secondary' : 'primary'}
       indeterminate={mixed}
       disabled={disabled}
+      checkedIcon={
+        <div
+          className="u-flex u-flex-items-center u-flex-justify-center"
+          style={{ width: 24, height: 24 }}
+        >
+          <Icon icon={CheckSquareIcon} size={18} />
+        </div>
+      }
       {...props}
     />
   )

package/react/Chips/Readme.md

@@ -9,7 +9,7 @@ import Stack from 'cozy-ui/transpiled/react/Stack'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import FileOutlineIcon from "cozy-ui/transpiled/react/Icons/FileOutline"
-import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
 import RightIcon from "cozy-ui/transpiled/react/Icons/Right"
 import OpenwithIcon from "cozy-ui/transpiled/react/Icons/Openwith"
 import Divider from "cozy-ui/transpiled/react/Divider"
@@ -117,7 +117,7 @@ import Stack from 'cozy-ui/transpiled/react/Stack'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import FileOutlineIcon from "cozy-ui/transpiled/react/Icons/FileOutline"
-import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Avatar from 'cozy-ui/transpiled/react/legacy/Avatar'
 import RightIcon from "cozy-ui/transpiled/react/Icons/Right"
 import OpenwithIcon from "cozy-ui/transpiled/react/Icons/Openwith"
 import Divider from "cozy-ui/transpiled/react/Divider"