cozy-ui 135.2.0 → 135.3.0

package/CHANGELOG.md

@@ -1,3 +1,16 @@
+# [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)
 
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui",
-  "version": "135.2.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/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/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

package/transpiled/react/ActionsBar/index.js

@@ -19,7 +19,6 @@ import DotsIcon from "cozy-ui/transpiled/react/Icons/Dots";
 import Toolbar from "cozy-ui/transpiled/react/Toolbar";
 import Typography from "cozy-ui/transpiled/react/Typography";
 import useBreakpoints from "cozy-ui/transpiled/react/providers/Breakpoints";
-import CozyTheme, { useCozyTheme } from "cozy-ui/transpiled/react/providers/CozyTheme";
 import { makeStyles } from "cozy-ui/transpiled/react/styles";
 var useStyles = makeStyles({
   appBar: function appBar(_ref) {
@@ -78,9 +77,17 @@ var useStyles = makeStyles({
   }
 });
 
+var DefaultIcon = function DefaultIcon() {
+  return /*#__PURE__*/React.createElement(Icon, {
+    className: "u-mr-1",
+    icon: CheckCircleIcon
+  });
+};
+
 var SelectedCount = function SelectedCount(_ref4) {
   var docs = _ref4.docs,
-      onClose = _ref4.onClose;
+      onClose = _ref4.onClose,
+      IconComponent = _ref4.IconComponent;
 
   var _useBreakpoints = useBreakpoints(),
       isMobile = _useBreakpoints.isMobile;
@@ -88,11 +95,12 @@ var SelectedCount = function SelectedCount(_ref4) {
   var _useI18n = useI18n(),
       t = _useI18n.t;
 
+  var SelectedIcon = IconComponent || DefaultIcon;
   if (isMobile) return /*#__PURE__*/React.createElement(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"
   }, /*#__PURE__*/React.createElement(IconButton, {
     color: "inherit",
     onClick: onClose
@@ -101,13 +109,10 @@ var SelectedCount = function SelectedCount(_ref4) {
   })), docs.length);
   return /*#__PURE__*/React.createElement("div", {
     className: "u-flex u-flex-items-center u-h-100 u-ph-1"
-  }, /*#__PURE__*/React.createElement(Icon, {
-    className: "u-mr-1",
-    icon: CheckCircleIcon,
-    color: "var(--iconTextColor)"
-  }), /*#__PURE__*/React.createElement(Typography, {
+  }, /*#__PURE__*/React.createElement(SelectedIcon, null), /*#__PURE__*/React.createElement(Typography, {
     variant: "body1",
-    component: "span"
+    component: "span",
+    color: "inherit"
   }, t('selected_light', docs.length)));
 };
 
@@ -116,14 +121,13 @@ var ActionsBar = function ActionsBar(_ref5) {
       docs = _ref5.docs,
       autoClose = _ref5.autoClose,
       maxDesktopActions = _ref5.maxDesktopActions,
-      onClose = _ref5.onClose;
+      onClose = _ref5.onClose,
+      color = _ref5.color,
+      IconComponent = _ref5.IconComponent;
 
   var _useBreakpoints2 = useBreakpoints(),
       isMobile = _useBreakpoints2.isMobile;
 
-  var _useCozyTheme = useCozyTheme(),
-      type = _useCozyTheme.type;
-
   var anchorRef = useRef();
 
   var _useState = useState(false),
@@ -149,25 +153,24 @@ var ActionsBar = function ActionsBar(_ref5) {
     autoClose && (onClose === null || onClose === void 0 ? void 0 : onClose());
   };
 
-  return /*#__PURE__*/React.createElement(CozyTheme, {
-    type: type,
-    variant: "inverted"
-  }, /*#__PURE__*/React.createElement(AppBar, {
+  return /*#__PURE__*/React.createElement(AppBar, {
     className: styles.appBar,
     position: "fixed",
-    color: "inherit"
+    color: color
   }, /*#__PURE__*/React.createElement(Toolbar, {
     className: styles.toolbar,
     variant: isMobile ? 'regular' : 'dense',
     disableGutters: true
   }, showDesktopCloseButton && /*#__PURE__*/React.createElement(IconButton, {
     className: styles.desktopCloseButton,
-    onClick: onClose
+    onClick: onClose,
+    color: "inherit"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: CrossIcon
   })), /*#__PURE__*/React.createElement(SelectedCount, {
     docs: docs,
-    onClose: onClose
+    onClose: onClose,
+    IconComponent: IconComponent
   }), /*#__PURE__*/React.createElement("div", {
     className: styles.actionsContainer
   }, /*#__PURE__*/React.createElement(ActionsItems, {
@@ -183,6 +186,7 @@ var ActionsBar = function ActionsBar(_ref5) {
       return setShowMenu(true);
     }
   }) : /*#__PURE__*/React.createElement(IconButton, {
+    color: "inherit",
     ref: anchorRef,
     onClick: function onClick() {
       return setShowMenu(true);
@@ -206,7 +210,7 @@ var ActionsBar = function ActionsBar(_ref5) {
     onClose: function onClose() {
       return setShowMenu(false);
     }
-  }))))));
+  })))));
 };
 
 ActionsBar.propTypes = {
@@ -216,10 +220,19 @@ 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/transpiled/react/AppBar/index.d.ts

@@ -1,2 +1,3 @@
-export default MuiAppBar;
-import MuiAppBar from "@material-ui/core/AppBar";
+export default AppBar;
+declare const AppBar: React.ForwardRefExoticComponent<React.RefAttributes<any>>;
+import React from "react";