cozy-ui 135.1.0 → 135.3.0

package/CHANGELOG.md

@@ -1,3 +1,23 @@
+# [135.3.0](https://github.com/cozy/cozy-ui/compare/v135.2.0...v135.3.0) (2026-01-16)
+
+
+### Bug Fixes
+
+* Remove fill attribute from cross-circle icon ([b949f88](https://github.com/cozy/cozy-ui/commit/b949f88))
+
+
+### Features
+
+* Allow to customize icon in ActionsBar ([20788b7](https://github.com/cozy/cozy-ui/commit/20788b7))
+* Allow to set color in ActionsBar and AppBar ([33721f0](https://github.com/cozy/cozy-ui/commit/33721f0))
+
+# [135.2.0](https://github.com/cozy/cozy-ui/compare/v135.1.0...v135.2.0) (2026-01-14)
+
+
+### Features
+
+* Add antivirus icons ([9a906d2](https://github.com/cozy/cozy-ui/commit/9a906d2))
+
 # [135.1.0](https://github.com/cozy/cozy-ui/compare/v135.0.0...v135.1.0) (2025-12-15)
 
 

package/assets/icons/ui/cross-circle.svg

@@ -1 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.12 12 8 9.12 10.88 12 12 10.88 9.12 8 12 5.12 10.88 4 8 6.88 5.12 4 4 5.12 6.88 8 4 10.88 5.12 12ZM8 16a7.79 7.79 0 0 1-3.12-.63 8.079 8.079 0 0 1-2.54-1.71 8.08 8.08 0 0 1-1.71-2.54A7.79 7.79 0 0 1 0 8c0-1.107.21-2.147.63-3.12.42-.973.99-1.82 1.71-2.54A8.079 8.079 0 0 1 4.88.63 7.79 7.79 0 0 1 8 0a7.79 7.79 0 0 1 3.12.63c.973.42 1.82.99 2.54 1.71s1.29 1.567 1.71 2.54c.42.973.63 2.013.63 3.12a7.79 7.79 0 0 1-.63 3.12 8.08 8.08 0 0 1-1.71 2.54 8.08 8.08 0 0 1-2.54 1.71A7.79 7.79 0 0 1 8 16Z" fill="#5F6368"/></svg>
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg"><path d="M5.12 12 8 9.12 10.88 12 12 10.88 9.12 8 12 5.12 10.88 4 8 6.88 5.12 4 4 5.12 6.88 8 4 10.88 5.12 12ZM8 16a7.79 7.79 0 0 1-3.12-.63 8.079 8.079 0 0 1-2.54-1.71 8.08 8.08 0 0 1-1.71-2.54A7.79 7.79 0 0 1 0 8c0-1.107.21-2.147.63-3.12.42-.973.99-1.82 1.71-2.54A8.079 8.079 0 0 1 4.88.63 7.79 7.79 0 0 1 8 0a7.79 7.79 0 0 1 3.12.63c.973.42 1.82.99 2.54 1.71s1.29 1.567 1.71 2.54c.42.973.63 2.013.63 3.12a7.79 7.79 0 0 1-.63 3.12 8.08 8.08 0 0 1-1.71 2.54 8.08 8.08 0 0 1-2.54 1.71A7.79 7.79 0 0 1 8 16Z"/></svg>

package/assets/icons/ui/shield-clean.svg

@@ -0,0 +1 @@
+<svg width="15" height="16" viewBox="0 0 15 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.432 15.635c-.092 0-.178-.01-.257-.03a3.27 3.27 0 0 1-.237-.069c-1.782-.593-3.203-1.688-4.266-3.285C.61 10.655.052 8.933 0 7.085v-3.74c0-.33.096-.627.287-.89.191-.265.439-.456.742-.575L5.78.1C5.964.033 6.15 0 6.333 0c.185 0 .37.033.554.099l4.75 1.781c.304.119.551.31.743.574.191.264.287.56.287.89v3.741a7.922 7.922 0 0 1-.04.792 3.683 3.683 0 0 0-.752-.08 4.178 4.178 0 0 0-.831.08 8.356 8.356 0 0 0 .04-.792v-3.74l-4.75-1.781-4.75 1.78v3.741a7.52 7.52 0 0 0 1.345 4.355c.897 1.306 2.032 2.177 3.404 2.612.277-.092.548-.204.812-.336.264-.132.521-.284.772-.456v1.86a4.445 4.445 0 0 1-.406.179c-.139.053-.327.132-.564.238-.08.026-.162.049-.248.069-.085.02-.174.03-.267.03Zm3.74.08a.648.648 0 0 1-.474-.198.648.648 0 0 1-.198-.475v-2.613c0-.185.066-.343.198-.475a.648.648 0 0 1 .475-.198h.119v-.791c0-.436.155-.809.465-1.119.31-.31.683-.465 1.118-.465.435 0 .808.155 1.118.465.31.31.465.683.465 1.119v.791h.12c.184 0 .342.066.474.198.132.132.198.29.198.475v2.613a.648.648 0 0 1-.198.475.648.648 0 0 1-.475.198h-3.404Zm.911-3.959h1.584v-.791a.766.766 0 0 0-.228-.565.766.766 0 0 0-.564-.227.766.766 0 0 0-.564.227.766.766 0 0 0-.228.565v.791Z"/></svg>

package/assets/icons/ui/shield-infected.svg

@@ -0,0 +1 @@
+<svg width="13" height="16" viewBox="0 0 13 16" xmlns="http://www.w3.org/2000/svg"><path d="M6.333 0 0 2.375v4.821c0 3.998 2.7 7.727 6.333 8.637 3.634-.91 6.334-4.639 6.334-8.637V2.375L6.333 0Zm4.75 7.196c0 3.167-2.018 6.096-4.75 6.99-2.73-.894-4.75-3.815-4.75-6.99v-3.72l4.75-1.782 4.75 1.781v3.721Z"/><path d="M7.125 9.5H5.542v1.583h1.583V9.5Zm0-5.542H5.542v3.959h1.583V3.958Z"/></svg>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "135.1.0",
+  "version": "135.3.0",
   "description": "Cozy apps UI SDK",
   "main": "./index.js",
   "bin": {

package/react/ActionsBar/Readme.md

@@ -1,18 +1,22 @@
 Use same actions as `<ActionsMenu />`.
 
+### Demo
+
+This demo showcases all ActionsBar features:
+
+* **Selection management**: Add/remove selected documents
+* **Color customization**: The `color` prop allows customizing the background color (supports `default`, `inherit`, `primary`, `secondary`, `transparent`, `error`, `warning`, `info`, `success`)
+* **Icon customization**: The `IconComponent` prop allows replacing the entire icon component displayed next to the selection count on desktop. It receives no props and should render a complete React component (defaults to `<Icon icon={CheckCircleIcon} />`)
+
 ```jsx
 import DemoProvider from 'cozy-ui/docs/components/DemoProvider'
 import Buttons from 'cozy-ui/transpiled/react/Buttons'
-import TrashIcon from 'cozy-ui/transpiled/react/Icons/Trash'
-import RenameIcon from 'cozy-ui/transpiled/react/Icons/Rename'
-import ShareIcon from 'cozy-ui/transpiled/react/Icons/Share'
 import ActionsBar from 'cozy-ui/transpiled/react/ActionsBar'
+import Typography from 'cozy-ui/transpiled/react/Typography'
+import Icon from 'cozy-ui/transpiled/react/Icon'
 import { makeActions, modify, emailTo, download, smsTo, call } from 'cozy-ui/transpiled/react/ActionsMenu/Actions'
-
-const selectedItem = {
-    _id: 1,
-    type: 'file'
-}
+import StarIcon from 'cozy-ui/transpiled/react/Icons/Star'
+import FlagIcon from 'cozy-ui/transpiled/react/Icons/FlagOutlined'
 
 const doc = {
   _id: 'id01',
@@ -21,7 +25,11 @@ const doc = {
   email: [{ address: 'johndoe@cozy.cc' }],
 }
 
-initialState = { selected: isTesting() ? [doc, doc] : [] }
+initialState = {
+  selected: isTesting() ? [doc, doc] : [],
+  color: 'default',
+  icon: 'default'
+}
 
 const addSelected = () => setState(previousState => {
     const arr = previousState.selected
@@ -37,16 +45,58 @@ const removeSelected = () => setState(previousState => {
 
 const actions = makeActions([ modify, call, download, smsTo, emailTo ])
 
+const colors = ['default', 'inherit', 'primary', 'secondary', 'error', 'warning', 'info', 'success']
+
+const StarIconComponent = () => <Icon className="u-mr-1" icon={StarIcon} />
+const FlagIconComponent = () => <Icon className="u-mr-1" icon={FlagIcon} />
+
+const icons = {
+  default: undefined,
+  star: StarIconComponent,
+  flag: FlagIconComponent
+}
+
 ;
 
 <DemoProvider>
-  <Buttons label="Add a selected document" className="u-mb-1-s u-mr-1" onClick={addSelected} />
-  <Buttons label="Remove a selected document" onClick={removeSelected} />
+  <div className="u-mb-1">
+    <Typography variant="subtitle1" className="u-mb-half">Selection</Typography>
+    <Buttons label="Add a selected document" className="u-mr-1" onClick={addSelected} />
+    <Buttons label="Remove a selected document" onClick={removeSelected} />
+  </div>
+
+  <div className="u-mb-1">
+    <Typography variant="subtitle1" className="u-mb-half">Color</Typography>
+    {colors.map(color => (
+      <Buttons
+        key={color}
+        label={color}
+        className="u-mr-half u-mb-half"
+        variant={state.color === color ? 'primary' : 'secondary'}
+        onClick={() => setState({ color })}
+      />
+    ))}
+  </div>
+
+  <div className="u-mb-1">
+    <Typography variant="subtitle1" className="u-mb-half">Icon (desktop only)</Typography>
+    {Object.keys(icons).map(iconName => (
+      <Buttons
+        key={iconName}
+        label={iconName}
+        className="u-mr-half"
+        variant={state.icon === iconName ? 'primary' : 'secondary'}
+        onClick={() => setState({ icon: iconName })}
+      />
+    ))}
+  </div>
 
   {state.selected.length > 0 && (
     <ActionsBar
       actions={actions}
       docs={state.selected}
+      color={state.color}
+      IconComponent={icons[state.icon]}
       onClose={() => setState({selected: []})}
     />
   )}

package/react/ActionsBar/ResponsiveAction.jsx

@@ -42,14 +42,12 @@ const ResponsiveAction = forwardRef(({ action, disabled, onClick }, ref) => {
     <Button
       ref={ref}
       classes={styles}
-      variant="secondary"
+      variant="text"
+      color="inherit"
       startIcon={<Icon icon={action.icon} />}
       label={
         isMobile ? (
-          <Typography
-            variant="caption"
-            color={disabled ? 'inherit' : 'textPrimary'}
-          >
+          <Typography variant="caption" color="inherit">
             {action.label}
           </Typography>
         ) : (

package/react/ActionsBar/index.jsx

@@ -19,7 +19,6 @@ import DotsIcon from '../Icons/Dots'
 import Toolbar from '../Toolbar'
 import Typography from '../Typography'
 import useBreakpoints from '../providers/Breakpoints'
-import CozyTheme, { useCozyTheme } from '../providers/CozyTheme'
 import { makeStyles } from '../styles'
 
 const useStyles = makeStyles({
@@ -70,17 +69,20 @@ const useStyles = makeStyles({
   })
 })
 
-const SelectedCount = ({ docs, onClose }) => {
+const DefaultIcon = () => <Icon className="u-mr-1" icon={CheckCircleIcon} />
+
+const SelectedCount = ({ docs, onClose, IconComponent }) => {
   const { isMobile } = useBreakpoints()
   const { t } = useI18n()
+  const SelectedIcon = IconComponent || DefaultIcon
 
   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"
+        bgcolor="background.paper"
+        color="text.primary"
       >
         <IconButton color="inherit" onClick={onClose}>
           <Icon icon={CrossCircleIcon} />
@@ -91,12 +93,8 @@ const SelectedCount = ({ docs, onClose }) => {
 
   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">
+      <SelectedIcon />
+      <Typography variant="body1" component="span" color="inherit">
         {t('selected_light', docs.length)}
       </Typography>
     </div>
@@ -108,10 +106,11 @@ const ActionsBar = ({
   docs,
   autoClose,
   maxDesktopActions,
-  onClose
+  onClose,
+  color,
+  IconComponent
 }) => {
   const { isMobile } = useBreakpoints()
-  const { type } = useCozyTheme()
   const anchorRef = useRef()
   const [showMenu, setShowMenu] = useState(false)
   const styles = useStyles({ isMobile })
@@ -138,65 +137,75 @@ const ActionsBar = ({
   }
 
   return (
-    <CozyTheme type={type} variant="inverted">
-      <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>
-          )}
-          <SelectedCount 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}
+    <AppBar className={styles.appBar} position="fixed" color={color}>
+      <Toolbar
+        className={styles.toolbar}
+        variant={isMobile ? 'regular' : 'dense'}
+        disableGutters
+      >
+        {showDesktopCloseButton && (
+          <IconButton
+            className={styles.desktopCloseButton}
+            onClick={onClose}
+            color="inherit"
+          >
+            <Icon icon={CrossIcon} />
+          </IconButton>
+        )}
+        <SelectedCount
+          docs={docs}
+          onClose={onClose}
+          IconComponent={IconComponent}
+        />
+        <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}
-                  actions={menuActions}
-                  anchorOrigin={{
-                    vertical: 'bottom',
-                    horizontal: 'left'
-                  }}
-                  componentsProps={{
-                    actionsItems: {
-                      onClick: handleClick
-                    }
-                  }}
-                  onClose={() => setShowMenu(false)}
+                  component={ResponsiveAction}
+                  actions={otherAction}
+                  onClick={() => setShowMenu(true)}
                 />
-              </>
-            )}
-          </div>
-        </Toolbar>
-      </AppBar>
-    </CozyTheme>
+              ) : (
+                <IconButton
+                  color="inherit"
+                  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>
   )
 }
 
@@ -207,12 +216,30 @@ ActionsBar.propTypes = {
    * Only works on desktop since maximum number is forced in mobile
    */
   maxDesktopActions: PropTypes.number,
-  autoClose: PropTypes.bool
+  autoClose: PropTypes.bool,
+  color: PropTypes.oneOf([
+    'default',
+    'inherit',
+    'primary',
+    'secondary',
+    'transparent',
+    'error',
+    'warning',
+    'info',
+    'success'
+  ]),
+  /**
+   * Custom React component to replace the default Icon with CheckCircleIcon
+   * displayed next to the selection count on desktop.
+   * The component will be rendered as-is, giving full control over the icon styling.
+   */
+  IconComponent: PropTypes.elementType
 }
 
 ActionsBar.defaultProps = {
   maxDesktopActions: 5,
-  autoClose: true
+  autoClose: true,
+  color: 'default'
 }
 
 export default withActionsLocales(ActionsBar)

package/react/AppBar/index.js

@@ -1,3 +1,68 @@
 import MuiAppBar from '@material-ui/core/AppBar'
+import PropTypes from 'prop-types'
+import React from 'react'
 
-export default MuiAppBar
+import { makeStyles } from '../styles'
+
+const useStyles = makeStyles(theme => ({
+  colorError: {
+    backgroundColor: theme.palette.error.main,
+    color: theme.palette.error.contrastText
+  },
+  colorWarning: {
+    backgroundColor: theme.palette.warning.main,
+    color: theme.palette.warning.contrastText
+  },
+  colorInfo: {
+    backgroundColor: theme.palette.info.main,
+    color: theme.palette.info.contrastText
+  },
+  colorSuccess: {
+    backgroundColor: theme.palette.success.main,
+    color: theme.palette.success.contrastText
+  }
+}))
+
+const CUSTOM_COLOR_CLASSES = {
+  error: 'colorError',
+  warning: 'colorWarning',
+  info: 'colorInfo',
+  success: 'colorSuccess'
+}
+
+const AppBar = React.forwardRef(({ color, className, ...props }, ref) => {
+  const styles = useStyles()
+  const appBarColor = CUSTOM_COLOR_CLASSES[color] ? 'default' : color
+  const customColorClass = CUSTOM_COLOR_CLASSES[color]
+    ? styles[CUSTOM_COLOR_CLASSES[color]]
+    : undefined
+
+  return (
+    <MuiAppBar
+      {...props}
+      ref={ref}
+      color={appBarColor}
+      className={`${className || ''} ${customColorClass || ''}`}
+    />
+  )
+})
+
+AppBar.propTypes = {
+  color: PropTypes.oneOf([
+    'default',
+    'inherit',
+    'primary',
+    'secondary',
+    'transparent',
+    'error',
+    'warning',
+    'info',
+    'success'
+  ])
+}
+
+AppBar.defaultProps = {
+  color: 'default'
+}
+
+export default AppBar

package/react/Icon/Readme.md

@@ -304,6 +304,8 @@ import Setting from 'cozy-ui/transpiled/react/Icons/Setting'
 import Share from 'cozy-ui/transpiled/react/Icons/Share'
 import ShareCircle from 'cozy-ui/transpiled/react/Icons/ShareCircle'
 import Shield from 'cozy-ui/transpiled/react/Icons/Shield'
+import ShieldInfected from 'cozy-ui/transpiled/react/Icons/ShieldInfected'
+import ShieldClean from 'cozy-ui/transpiled/react/Icons/ShieldClean'
 import Shop from 'cozy-ui/transpiled/react/Icons/Shop'
 import Sound from 'cozy-ui/transpiled/react/Icons/Sound'
 import Spinner from 'cozy-ui/transpiled/react/Icons/Spinner'
@@ -592,6 +594,8 @@ const icons = [
   Share,
   ShareCircle,
   Shield,
+  ShieldInfected,
+  ShieldClean,
   Shop,
   Sound,
   Spinner,
@@ -1006,7 +1010,7 @@ import Typography from 'cozy-ui/transpiled/react/Typography'
 
 const colors = ['#297EF2', '#08b442', '#B449E7', '#F52D2D', '#FF962F']
 let i = 0
-const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','assign-admin','assign-moderator','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','database','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','expert','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','matrix','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','planet','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','send','server','setting','share-circle','share','shield','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
+const availableIcons = ['album-add','album-remove','album','answer','apple','archive','arrowUp','assign-admin','assign-moderator','attachment','attention','bank-check','bank','banking-add','banking','bell','benefit','bike','bill','bottom','browser-brave','browser-chrome','browser-duckduckgo','browser-edge','browser-edge-chromium','browser-firefox','browser-ie','browser-opera','browser-safari','burger','bus','calendar','camera','car','carbonCopy','carpooling','categories','certified','check-circle','check-list','check-square','check','checkbox','chess','child','circle-filled','clock','clock-outline','cloud-happy','cloud-rainbow','cloud-plus-outlined','cloud','cloud2','collect','cocktail','comment','company','compare','compass','connector','contract','contrast','copy','cozy-circle','cozy-laugh', 'cozy-lock', 'cozy-text', 'cozy-release', 'credit-card-add','credit-card','credit','crop','cross-circle-outline','cross-circle','cross-medium','cross-small','cross','cube','dash','dashboard','data-control','database','debit','desktop-download','devices','discuss','dots','down','download','drawing-arrow-up','dropdown-close','dropdown-open','dropdown','dropup','electric-bike','electric-car','electric-scooter','email-notification','email-open','email','eu','euro','exchange','expert','eye-closed','eye','face-id','file-add','file-duotone','file-new','file-none','file-outline','file','filter','fingerprint','fitness','flag-outlined','flag','flash-auto','flashlight','folder-add','folder-moveto','folder-open','folder','forbidden','from-user','gear','globe','gouv','graph-circle','grid','group-list','groups','growth','hand','heart','help','help-outlined','history','home','hourglass','image','info-outlined','info','justice','key','key2','label-outlined','laudry','laptop','left','library','lightbulb','lightning','link-out','link','list','list-min','location','lock', 'lock-screen', 'logout','magic-trick','magnet','magnifier','matrix','merge','moped','mosaic','mosaic-min','motorcycle','mountain','movement-in','movement-out','mouvement','moveto','multi-files','music','new','next','note','notification-email','number','offline','online', 'openapp', 'openwith','palette','paper','paperplane','password','pen','people','peoples','percent-circle','percent','person-add','personal-data','phone-download','phone-upload','phone','pie-chart','pin','plane','planet','plus-small','plus', 'pop-inside', 'previous','printer','qualify','radio-checked','radio-unchecked','refresh','relationship','remboursement','rename','repare','reply','restaurant','restore-straight','restore','right','rise','rotate-left','rotate-right','sad-cozy','safe','school','scooter','secutiry','select-all','send','server','setting','share-circle','share','shield','shield-infected','shield-clean','shop','sound','spinner','sport-bag','stack','star','star-outline','stats','stop', 'subway', 'support', 'swap', 'sync-cozy','sync','tab','tag','target','task','team','telecom','telephone','text','text-info','to-the-cloud','top','train','tram','trash','trophy', 'uncloud', 'unknow','unlink','unlock','up','upload','videos','walk','wallet-add','wallet-new','wallet','warn','warning-circle','warning','water','wrench-circle','work']
 ;
 
 <Grid container spacing={2}>

package/react/Icons/CrossCircle.jsx

@@ -4,10 +4,7 @@ import React from 'react'
 function SvgCrossCircle(props) {
   return (
     <svg viewBox="0 0 16 16" {...props}>
-      <path
-        d="M5.12 12L8 9.12 10.88 12 12 10.88 9.12 8 12 5.12 10.88 4 8 6.88 5.12 4 4 5.12 6.88 8 4 10.88 5.12 12zM8 16a7.79 7.79 0 01-3.12-.63 8.079 8.079 0 01-2.54-1.71 8.08 8.08 0 01-1.71-2.54A7.79 7.79 0 010 8c0-1.107.21-2.147.63-3.12.42-.973.99-1.82 1.71-2.54A8.079 8.079 0 014.88.63 7.79 7.79 0 018 0a7.79 7.79 0 013.12.63c.973.42 1.82.99 2.54 1.71s1.29 1.567 1.71 2.54c.42.973.63 2.013.63 3.12a7.79 7.79 0 01-.63 3.12 8.08 8.08 0 01-1.71 2.54 8.08 8.08 0 01-2.54 1.71A7.79 7.79 0 018 16z"
-        fill="#5F6368"
-      />
+      <path d="M5.12 12L8 9.12 10.88 12 12 10.88 9.12 8 12 5.12 10.88 4 8 6.88 5.12 4 4 5.12 6.88 8 4 10.88 5.12 12zM8 16a7.79 7.79 0 01-3.12-.63 8.079 8.079 0 01-2.54-1.71 8.08 8.08 0 01-1.71-2.54A7.79 7.79 0 010 8c0-1.107.21-2.147.63-3.12.42-.973.99-1.82 1.71-2.54A8.079 8.079 0 014.88.63 7.79 7.79 0 018 0a7.79 7.79 0 013.12.63c.973.42 1.82.99 2.54 1.71s1.29 1.567 1.71 2.54c.42.973.63 2.013.63 3.12a7.79 7.79 0 01-.63 3.12 8.08 8.08 0 01-1.71 2.54 8.08 8.08 0 01-2.54 1.71A7.79 7.79 0 018 16z" />
     </svg>
   )
 }

package/react/Icons/ShieldClean.jsx

@@ -0,0 +1,12 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/shield-clean.svg` to regenerate;
+import React from 'react'
+
+function SvgShieldClean(props) {
+  return (
+    <svg viewBox="0 0 15 16" {...props}>
+      <path d="M6.432 15.635c-.092 0-.178-.01-.257-.03a3.27 3.27 0 01-.237-.069c-1.782-.593-3.203-1.688-4.266-3.285C.61 10.655.052 8.933 0 7.085v-3.74c0-.33.096-.627.287-.89a1.63 1.63 0 01.742-.575L5.78.1c.184-.067.37-.1.553-.1.185 0 .37.033.554.099l4.75 1.781c.304.119.551.31.743.574.191.264.287.56.287.89v3.741a7.922 7.922 0 01-.04.792 3.683 3.683 0 00-.752-.08 4.178 4.178 0 00-.831.08 8.356 8.356 0 00.04-.792v-3.74l-4.75-1.781-4.75 1.78v3.741a7.52 7.52 0 001.345 4.355c.897 1.306 2.032 2.177 3.404 2.612.277-.092.548-.204.812-.336.264-.132.521-.284.772-.456v1.86a4.445 4.445 0 01-.406.179 11.43 11.43 0 00-.564.238 2.99 2.99 0 01-.248.069c-.085.02-.174.03-.267.03zm3.74.08a.648.648 0 01-.474-.198.648.648 0 01-.198-.475v-2.613c0-.185.066-.343.198-.475a.648.648 0 01.475-.198h.119v-.791c0-.436.155-.809.465-1.119.31-.31.683-.465 1.118-.465.435 0 .808.155 1.118.465.31.31.465.683.465 1.119v.791h.12c.184 0 .342.066.474.198.132.132.198.29.198.475v2.613a.648.648 0 01-.198.475.648.648 0 01-.475.198h-3.404zm.911-3.959h1.584v-.791a.766.766 0 00-.228-.565.766.766 0 00-.564-.227.766.766 0 00-.564.227.766.766 0 00-.228.565v.791z" />
+    </svg>
+  )
+}
+
+export default SvgShieldClean

package/react/Icons/ShieldInfected.jsx

@@ -0,0 +1,13 @@
+// Automatically created, please run `scripts/generate-svgr-icon.sh assets/icons/ui/shield-infected.svg` to regenerate;
+import React from 'react'
+
+function SvgShieldInfected(props) {
+  return (
+    <svg viewBox="0 0 13 16" {...props}>
+      <path d="M6.333 0L0 2.375v4.821c0 3.998 2.7 7.727 6.333 8.637 3.634-.91 6.334-4.639 6.334-8.637V2.375L6.333 0zm4.75 7.196c0 3.167-2.018 6.096-4.75 6.99-2.73-.894-4.75-3.815-4.75-6.99v-3.72l4.75-1.782 4.75 1.781v3.721z" />
+      <path d="M7.125 9.5H5.542v1.583h1.583V9.5zm0-5.542H5.542v3.959h1.583V3.958z" />
+    </svg>
+  )
+}
+
+export default SvgShieldInfected

package/react/MuiCozyTheme/overrides/makeDarkNormalOverrides.js

@@ -1,5 +1,20 @@
+import merge from 'lodash/merge'
+
 import { makeLightNormalOverrides } from './makeLightNormalOverrides'
 
 export const makeDarkNormalOverrides = theme => {
-  return makeLightNormalOverrides(theme)
+  const makeOverridesForDarkTheme = theme => ({
+    MuiAppBar: {
+      colorDefault: {
+        backgroundColor: theme.palette.primary.main
+      }
+    }
+  })
+
+  const DarkNormalOverrides = merge(
+    makeLightNormalOverrides(theme),
+    makeOverridesForDarkTheme(theme)
+  )
+
+  return DarkNormalOverrides
 }

package/react/MuiCozyTheme/overrides/makeLightNormalOverrides.js

@@ -9,6 +9,12 @@ import {
 } from '../helpers'
 
 export const makeLightNormalOverrides = theme => ({
+  MuiAppBar: {
+    colorDefault: {
+      backgroundColor: theme.palette.grey.A400,
+      color: theme.palette.primary.contrastText
+    }
+  },
   MuiSelect: {
     iconOutlined: {
       top: 'auto',

package/transpiled/react/ActionsBar/ResponsiveAction.js

@@ -46,13 +46,14 @@ var ResponsiveAction = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return /*#__PURE__*/React.createElement(Button, {
     ref: ref,
     classes: styles,
-    variant: "secondary",
+    variant: "text",
+    color: "inherit",
     startIcon: /*#__PURE__*/React.createElement(Icon, {
       icon: action.icon
     }),
     label: isMobile ? /*#__PURE__*/React.createElement(Typography, {
       variant: "caption",
-      color: disabled ? 'inherit' : 'textPrimary'
+      color: "inherit"
     }, action.label) : action.label,
     disabled: disabled,
     onClick: onClick