cozy-ui-plus 5.3.1 → 6.0.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.0.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@5.3.1...cozy-ui-plus@6.0.0) (2026-03-24)
+
+### Features
+
+- **cozy-ui-plus:** Upgrade cozy-ui ([b01d192](https://github.com/cozy/cozy-libs/commit/b01d1926f00a81ff2eb2c0b03378ea06fefd5fcc))
+
+### BREAKING CHANGES
+
+- **cozy-ui-plus:** You must have `cozy-ui >= 138.1.0`
+
 ## [5.3.1](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@5.3.0...cozy-ui-plus@5.3.1) (2026-03-17)
 
 **Note:** Version bump only for package cozy-ui-plus

package/dist/CollectionField/index.js

@@ -21,7 +21,7 @@ var _CrossSmall = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons
 
 var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"));
 
-var _Label = _interopRequireDefault(require("cozy-ui/transpiled/react/Label"));
+var _InputLabel = _interopRequireDefault(require("cozy-ui/transpiled/react/InputLabel"));
 
 var _Stack = _interopRequireDefault(require("cozy-ui/transpiled/react/Stack"));
 
@@ -97,7 +97,7 @@ var CollectionField = function CollectionField(props) {
     }
   };
 
-  return /*#__PURE__*/_react.default.createElement(_Field.FieldContainer, rest, /*#__PURE__*/_react.default.createElement(_Label.default, null, label), /*#__PURE__*/_react.default.createElement(_Stack.default, null, values.length > 0 ? /*#__PURE__*/_react.default.createElement(_Stack.default, {
+  return /*#__PURE__*/_react.default.createElement(_Field.FieldContainer, rest, /*#__PURE__*/_react.default.createElement(_InputLabel.default, null, label), /*#__PURE__*/_react.default.createElement(_Stack.default, null, values.length > 0 ? /*#__PURE__*/_react.default.createElement(_Stack.default, {
     spacing: "s"
   }, values.map(function (value, index) {
     return /*#__PURE__*/_react.default.createElement("div", {

package/dist/ContactsListModal/ContactsListModal.js

@@ -45,8 +45,6 @@ var _ContactsListContent = _interopRequireDefault(require("./ContactsListContent
 
 var _MobileHeader = _interopRequireDefault(require("./MobileHeader"));
 
-var _CozyTheme = _interopRequireDefault(require("../providers/CozyTheme"));
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -102,11 +100,9 @@ var ContactsListModal = function ContactsListModal(_ref) {
 
   var selfAddContactLabel = addContactLabel !== null && addContactLabel !== void 0 ? addContactLabel : t('addContact');
   var selfPlaceholder = placeholder !== null && placeholder !== void 0 ? placeholder : t('searchContact');
-  return /*#__PURE__*/_react.default.createElement(_CozyDialogs.TopAnchoredDialog, dialogProps, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
-    variant: isMobile ? 'inverted' : 'normal'
-  }, /*#__PURE__*/_react.default.createElement(_CozyDialogs.DialogCloseButton, {
+  return /*#__PURE__*/_react.default.createElement(_CozyDialogs.TopAnchoredDialog, dialogProps, /*#__PURE__*/_react.default.createElement(_CozyDialogs.DialogCloseButton, {
     onClick: dismissAction
-  })), /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, (0, _extends2.default)({}, dialogTitleProps, {
+  }), /*#__PURE__*/_react.default.createElement(_Dialog.DialogTitle, (0, _extends2.default)({}, dialogTitleProps, {
     className: (0, _classnames.default)(dialogTitleProps.className, {
       'u-p-0 u-w-100': isMobile
     })

package/dist/ContactsListModal/MobileHeader.js

@@ -21,8 +21,6 @@ var _Input = _interopRequireDefault(require("cozy-ui/transpiled/react/Input"));
 
 var _Paper = _interopRequireDefault(require("cozy-ui/transpiled/react/Paper"));
 
-var _CozyTheme = _interopRequireDefault(require("../providers/CozyTheme"));
-
 var barStyle = {
   height: 48
 };
@@ -32,9 +30,7 @@ var MobileHeader = function MobileHeader(_ref) {
       placeholder = _ref.placeholder,
       onChange = _ref.onChange,
       onDismiss = _ref.onDismiss;
-  return /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
-    variant: "inverted"
-  }, /*#__PURE__*/_react.default.createElement(_Paper.default, {
+  return /*#__PURE__*/_react.default.createElement(_Paper.default, {
     square: true,
     elevation: 0,
     className: "u-flex u-flex-items-center u-pr-3 u-pl-half",
@@ -54,7 +50,7 @@ var MobileHeader = function MobileHeader(_ref) {
     autoFocus: true,
     fullWidth: true,
     disableUnderline: true
-  })));
+  }));
 };
 
 MobileHeader.propTypes = {

package/dist/Field/index.js

@@ -25,11 +25,11 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _Label = _interopRequireDefault(require("cozy-ui/transpiled/react/Label"));
+var _InputLabel = _interopRequireDefault(require("cozy-ui/transpiled/react/InputLabel"));
 
 var _SelectBox = _interopRequireDefault(require("cozy-ui/transpiled/react/SelectBox"));
 
-var _Textarea = _interopRequireDefault(require("cozy-ui/transpiled/react/Textarea"));
+var _TextField = _interopRequireDefault(require("cozy-ui/transpiled/react/TextField"));
 
 var _Input = _interopRequireDefault(require("cozy-ui/transpiled/react/legacy/Input"));
 
@@ -167,7 +167,8 @@ var Field = function Field(props) {
         }));
 
       case 'textarea':
-        return /*#__PURE__*/_react.default.createElement(_Textarea.default, (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_TextField.default, (0, _extends2.default)({
+          multiline: true,
           autoCapitalize: autoCapitalize,
           disabled: disabled,
           id: id,
@@ -177,7 +178,9 @@ var Field = function Field(props) {
           onKeyUp: onKeyUp,
           onFocus: onFocus,
           onBlur: onBlur,
-          readOnly: readOnly
+          inputProps: {
+            readOnly: readOnly
+          }
         }, controlledProps));
 
       case 'password':
@@ -241,7 +244,7 @@ var Field = function Field(props) {
   return /*#__PURE__*/_react.default.createElement(FieldContainer, {
     className: className,
     variant: variant
-  }, /*#__PURE__*/_react.default.createElement(_Label.default, (0, _extends2.default)({
+  }, /*#__PURE__*/_react.default.createElement(_InputLabel.default, (0, _extends2.default)({
     htmlFor: id
   }, labelProps), label), side && /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(styles['o-side'], labelStyles['c-label'], (0, _defineProperty2.default)({}, styles['o-side-fullwidth'], fullwidth))

package/dist/ListItem/ListItemFile/ItemIcon.js

@@ -23,8 +23,6 @@ var _FileTypeText = _interopRequireDefault(require("cozy-ui/transpiled/react/Ico
 
 var _Skeleton = _interopRequireDefault(require("cozy-ui/transpiled/react/Skeleton"));
 
-var _Thumbnail = _interopRequireDefault(require("cozy-ui/transpiled/react/Thumbnail"));
-
 var _FileImageLoader = _interopRequireDefault(require("../../FileImageLoader"));
 
 var ItemIcon = function ItemIcon(_ref) {
@@ -37,16 +35,25 @@ var ItemIcon = function ItemIcon(_ref) {
     file: file,
     linkType: "tiny",
     render: function render(src) {
-      return /*#__PURE__*/_react.default.createElement(_Thumbnail.default, null, src ? /*#__PURE__*/_react.default.createElement("img", {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center"
+      }, src ? /*#__PURE__*/_react.default.createElement("img", {
+        className: "u-w-2 u-h-2",
+        style: {
+          objectFit: 'contain'
+        },
         src: src,
         alt: ""
       }) : /*#__PURE__*/_react.default.createElement(_Skeleton.default, {
+        className: "u-w-100 u-h-100",
         variant: "rect",
         animation: "wave"
       }));
     },
     renderFallback: function renderFallback() {
-      return /*#__PURE__*/_react.default.createElement(_Thumbnail.default, null, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center"
+      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
         icon: (0, _file.isNote)(file) ? _FileTypeNote.default : _FileTypeText.default
       }));
     }

package/dist/Qualification/QualificationItem/index.js

@@ -19,8 +19,6 @@ var _ButtonBase = _interopRequireDefault(require("cozy-ui/transpiled/react/Butto
 
 var _Icon = _interopRequireWildcard(require("cozy-ui/transpiled/react/Icon"));
 
-var _IconStack = _interopRequireDefault(require("cozy-ui/transpiled/react/IconStack"));
-
 var _FileDuotone = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/FileDuotone"));
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
@@ -61,18 +59,16 @@ var QualificationItem = function QualificationItem(_ref2) {
   return /*#__PURE__*/_react.default.createElement(_ButtonBase.default, (0, _extends2.default)({}, props, {
     className: styles.item,
     onClick: onClick
-  }), /*#__PURE__*/_react.default.createElement(_IconStack.default, {
-    className: "u-mb-half",
-    foreground: icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      icon: icon,
-      color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
-    }),
-    background: /*#__PURE__*/_react.default.createElement(_Icon.default, {
-      icon: _FileDuotone.default,
-      size: "32",
-      color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
-    })
-  }), /*#__PURE__*/_react.default.createElement(_Typography.default, {
+  }), /*#__PURE__*/_react.default.createElement("div", {
+    className: "u-mb-half"
+  }, icon ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: icon,
+    color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+  }) : /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _FileDuotone.default,
+    size: "32",
+    color: isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+  })), /*#__PURE__*/_react.default.createElement(_Typography.default, {
     variant: "caption"
   }, label));
 };

package/dist/ShortcutTile/index.js

@@ -9,12 +9,12 @@ exports.ShortcutTile = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _helpers = require("cozy-ui/transpiled/react/Avatar/helpers");
+
 var _Tile = require("cozy-ui/transpiled/react/Tile");
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
-var _helpers = require("cozy-ui/transpiled/react/legacy/Avatar/helpers");
-
 var _styles = require("cozy-ui/transpiled/react/styles");
 
 var styles = {

package/dist/SquareAppIcon/index.js

@@ -21,6 +21,8 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _helpers = require("cozy-ui/transpiled/react/Avatar/helpers");
+
 var _Badge = _interopRequireDefault(require("cozy-ui/transpiled/react/Badge"));
 
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
@@ -35,21 +37,17 @@ var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"
 
 var _WarningCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/WarningCircle"));
 
-var _InfosBadge = _interopRequireDefault(require("cozy-ui/transpiled/react/InfosBadge"));
-
 var _ListItemText = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemText"));
 
 var _Spinner = _interopRequireDefault(require("cozy-ui/transpiled/react/Spinner"));
 
 var _Typography = _interopRequireDefault(require("cozy-ui/transpiled/react/Typography"));
 
-var _helpers = require("cozy-ui/transpiled/react/legacy/Avatar/helpers");
-
 var _styles = require("cozy-ui/transpiled/react/styles");
 
 var _AppIcon = _interopRequireDefault(require("../AppIcon"));
 
-var _CozyTheme = _interopRequireWildcard(require("../providers/CozyTheme"));
+var _CozyTheme = require("../providers/CozyTheme");
 
 var _excluded = ["display", "name", "variant", "IconContent", "description", "hideShortcutBadge"];
 
@@ -94,9 +92,6 @@ var useStyles = (0, _styles.makeStyles)(function (theme) {
       margin: '0.25rem 0.25rem 0 0.25rem',
       height: '2rem'
     }),
-    nameInverted: {
-      textShadow: theme.textShadows[1]
-    },
     squareAppIconGhost: {
       backgroundColor: (0, _styles.alpha)(theme.palette.primary.main, theme.palette.action.ghostOpacity),
       border: "1px dashed ".concat((0, _styles.alpha)(theme.palette.primary.main, theme.palette.border.ghostOpacity))
@@ -157,7 +152,6 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
       appIconProps = (0, _objectWithoutProperties2.default)(_ref2, _excluded);
 
   var _useCozyTheme = (0, _CozyTheme.useCozyTheme)(),
-      themeVariant = _useCozyTheme.variant,
       type = _useCozyTheme.type;
 
   var classes = useStyles();
@@ -179,25 +173,32 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
     var curr = prevVariant.current; // eslint-disable-next-line react-hooks/set-state-in-effect
 
     if (curr === 'loading' && variant === 'error') setAnimationState('failed');
-    if (curr === 'loading' && (variant === 'default' || variant === undefined)) // eslint-disable-next-line react-hooks/set-state-in-effect
-      setAnimationState('success');
+    if (curr === 'loading' && (variant === 'default' || variant === undefined)) setAnimationState('success');
     prevVariant.current = variant;
   }, [variant]);
   var exceptionVariant = ['ghost'];
-  var squareTheme = exceptionVariant.includes(variant) ? themeVariant : 'normal';
   return /*#__PURE__*/_react.default.createElement("div", {
     "data-testid": "square-app-icon",
     className: (0, _classnames.default)(classes.tileWrapper, (0, _defineProperty2.default)({}, classes.detailedTileWrapper, display === 'detailed'))
-  }, /*#__PURE__*/_react.default.createElement(_CozyTheme.default, {
-    variant: squareTheme
-  }, /*#__PURE__*/_react.default.createElement(_InfosBadge.default, {
-    badgeContent: variant === 'shortcut' && !hideShortcutBadge ? /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Badge.default, {
+    badgeContent: variant === 'shortcut' && !hideShortcutBadge ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-h-1-half u-miw-1-half u-bdrs-circle u-flex u-flex-items-center u-flex-justify-center",
+      style: {
+        backgroundColor: 'var(--paperBackgroundColor)',
+        color: 'var(--iconTextColor)',
+        boxShadow: 'var(--shadow3)'
+      }
+    }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
       size: "10",
       icon: _LinkOut.default
-    }) : null,
+    })) : null,
     className: (0, _classnames.default)((0, _defineProperty2.default)({}, 'u-mr-1', display === 'detailed')),
     overlap: "rectangular",
-    invisible: variant !== 'shortcut' || hideShortcutBadge
+    invisible: variant !== 'shortcut' || hideShortcutBadge,
+    anchorOrigin: {
+      vertical: 'bottom',
+      horizontal: 'right'
+    }
   }, /*#__PURE__*/_react.default.createElement(SquareAppIconSpinner, {
     variant: variant,
     animationState: animationState
@@ -218,7 +219,7 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
     variant: "h2",
     align: "center"
   }, letter.toUpperCase()) : /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(styles['SquareAppIcon-icon-container'], (0, _defineProperty2.default)({}, styles['SquareAppIcon-icon-container-normal'], themeVariant === 'normal'))
+    className: (0, _classnames.default)(styles['SquareAppIcon-icon-container'], [styles['SquareAppIcon-icon-container-normal']])
   }, /*#__PURE__*/_react.default.createElement("div", {
     className: (0, _classnames.default)(styles['onEnd'], (0, _defineProperty2.default)({}, styles['isSuccess'], animationState === 'success'), (0, _defineProperty2.default)({}, styles['isFailed'], animationState === 'failed')),
     onAnimationEnd: handleAnimationEnd
@@ -230,11 +231,11 @@ var SquareAppIcon = function SquareAppIcon(_ref2) {
     color: "var(--primaryColor)"
   }) : IconContent ? IconContent : /*#__PURE__*/_react.default.createElement("div", {
     className: "u-w-2 u-h-2"
-  }, /*#__PURE__*/_react.default.createElement(_AppIcon.default, appIconProps)))))), display === 'detailed' ? /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
+  }, /*#__PURE__*/_react.default.createElement(_AppIcon.default, appIconProps))))), display === 'detailed' ? /*#__PURE__*/_react.default.createElement(_ListItemText.default, {
     primary: appName,
     secondary: description
   }) : /*#__PURE__*/_react.default.createElement(_Typography.default, {
-    className: (0, _classnames.default)(classes.name, (0, _defineProperty2.default)({}, classes.nameInverted, themeVariant === 'inverted'), 'u-spacellipsis'),
+    className: (0, _classnames.default)(classes.name, 'u-spacellipsis'),
     variant: "h6",
     align: "center"
   }, appName));

package/dist/providers/CozyTheme/index.js

@@ -39,8 +39,6 @@ var CozyTheme = function CozyTheme(_ref) {
 };
 
 CozyTheme.propTypes = {
-  variant: _propTypes.default.oneOf(['normal', 'inverted']),
-
   /** Causes this element's children to appear as if they were direct children of the element's parent, ignoring the element itself. */
   ignoreItself: _propTypes.default.bool,
 
@@ -50,7 +48,6 @@ CozyTheme.propTypes = {
   children: _propTypes.default.node
 };
 CozyTheme.defaultProps = {
-  variant: 'normal',
   ignoreCozySettings: false,
   ignoreItself: true
 };

package/dist/src/providers/CozyTheme/index.d.ts

@@ -6,15 +6,12 @@ declare function CozyTheme({ ignoreCozySettings, ...props }: {
 }): JSX.Element;
 declare namespace CozyTheme {
     namespace propTypes {
-        let variant: PropTypes.Requireable<string>;
         let ignoreItself: PropTypes.Requireable<boolean>;
         let ignoreCozySettings: PropTypes.Requireable<boolean>;
         let className: PropTypes.Requireable<string>;
         let children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
     }
     namespace defaultProps {
-        let variant_1: string;
-        export { variant_1 as variant };
         let ignoreCozySettings_1: boolean;
         export { ignoreCozySettings_1 as ignoreCozySettings };
         let ignoreItself_1: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-ui-plus",
-  "version": "5.3.1",
+  "version": "6.0.0",
   "description": "Cozy-ui-plus is an extension of cozy-ui and provides components based on cozy-client",
   "main": "dist/index.js",
   "license": "MIT",
@@ -37,7 +37,7 @@
     "cozy-intent": "^2.31.1",
     "cozy-logger": "^1.18.1",
     "cozy-stack-client": "^60.21.1",
-    "cozy-ui": "^135.0.0",
+    "cozy-ui": "^138.1.0",
     "jest": "30.3.0",
     "jest-canvas-mock": "2.3.1",
     "jest-environment-jsdom": "30.3.0",
@@ -68,10 +68,10 @@
     "cozy-device-helper": ">=2.0.0",
     "cozy-intent": ">=2.30.0",
     "cozy-logger": ">=1.17.0",
-    "cozy-ui": ">=135.0.0",
+    "cozy-ui": ">=138.1.0",
     "react": "^16 || ^17 || ^18",
     "react-dom": "^16 || ^17 || ^18",
     "twake-i18n": ">=0.3.0"
   },
-  "gitHead": "e726cac12603dffee9a88debf8618c47bc628082"
+  "gitHead": "4c152ef7f2acafb450df245f5ce58638cbdb6be3"
 }

package/src/CollectionField/index.jsx

@@ -4,7 +4,7 @@ import React, { useRef } from 'react'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import CrossSmallIcon from 'cozy-ui/transpiled/react/Icons/CrossSmall'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
-import Label from 'cozy-ui/transpiled/react/Label'
+import InputLabel from 'cozy-ui/transpiled/react/InputLabel'
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Button from 'cozy-ui/transpiled/react/deprecated/Button'
 
@@ -70,7 +70,7 @@ const CollectionField = props => {
 
   return (
     <FieldContainer {...rest}>
-      <Label>{label}</Label>
+      <InputLabel>{label}</InputLabel>
       <Stack>
         {values.length > 0 ? (
           <Stack spacing="s">

package/src/ContactsListModal/ContactsListModal.jsx

@@ -22,7 +22,6 @@ import AddContactDialog from './AddContact/AddContactDialog'
 import ContactsListContent from './ContactsListContent'
 import MobileHeader from './MobileHeader'
 import styles from './styles.styl'
-import CozyTheme from '../providers/CozyTheme'
 
 const ContactsListModal = ({
   onItemClick,
@@ -64,9 +63,7 @@ const ContactsListModal = ({
 
   return (
     <TopAnchoredDialog {...dialogProps}>
-      <CozyTheme variant={isMobile ? 'inverted' : 'normal'}>
-        <DialogCloseButton onClick={dismissAction} />
-      </CozyTheme>
+      <DialogCloseButton onClick={dismissAction} />
       <DialogTitle
         {...dialogTitleProps}
         className={cx(dialogTitleProps.className, {

package/src/ContactsListModal/MobileHeader.jsx

@@ -7,36 +7,32 @@ import PreviousIcon from 'cozy-ui/transpiled/react/Icons/Previous'
 import Input from 'cozy-ui/transpiled/react/Input'
 import Paper from 'cozy-ui/transpiled/react/Paper'
 
-import CozyTheme from '../providers/CozyTheme'
-
 const barStyle = {
   height: 48
 }
 
 const MobileHeader = ({ filter, placeholder, onChange, onDismiss }) => {
   return (
-    <CozyTheme variant="inverted">
-      <Paper
-        square
-        elevation={0}
-        className="u-flex u-flex-items-center u-pr-3 u-pl-half"
-        style={barStyle}
-      >
-        <IconButton className="u-mr-half" onClick={onDismiss} size="medium">
-          <Icon icon={PreviousIcon} />
-        </IconButton>
-        <Input
-          type="text"
-          placeholder={placeholder}
-          id={placeholder}
-          value={filter}
-          onChange={onChange}
-          autoFocus
-          fullWidth
-          disableUnderline
-        />
-      </Paper>
-    </CozyTheme>
+    <Paper
+      square
+      elevation={0}
+      className="u-flex u-flex-items-center u-pr-3 u-pl-half"
+      style={barStyle}
+    >
+      <IconButton className="u-mr-half" onClick={onDismiss} size="medium">
+        <Icon icon={PreviousIcon} />
+      </IconButton>
+      <Input
+        type="text"
+        placeholder={placeholder}
+        id={placeholder}
+        value={filter}
+        onChange={onChange}
+        autoFocus
+        fullWidth
+        disableUnderline
+      />
+    </Paper>
   )
 }
 

package/src/Field/index.jsx

@@ -4,9 +4,9 @@ import PropTypes from 'prop-types'
 import React, { useState } from 'react'
 
 import labelStyles from 'cozy-ui/react/Label/styles.styl'
-import Label from 'cozy-ui/transpiled/react/Label'
+import InputLabel from 'cozy-ui/transpiled/react/InputLabel'
 import SelectBox from 'cozy-ui/transpiled/react/SelectBox'
-import Textarea from 'cozy-ui/transpiled/react/Textarea'
+import TextField from 'cozy-ui/transpiled/react/TextField'
 import Input from 'cozy-ui/transpiled/react/legacy/Input'
 
 import styles from './styles.styl'
@@ -141,7 +141,8 @@ const Field = props => {
         )
       case 'textarea':
         return (
-          <Textarea
+          <TextField
+            multiline
             autoCapitalize={autoCapitalize}
             disabled={disabled}
             id={id}
@@ -151,7 +152,7 @@ const Field = props => {
             onKeyUp={onKeyUp}
             onFocus={onFocus}
             onBlur={onBlur}
-            readOnly={readOnly}
+            inputProps={{ readOnly }}
             {...controlledProps}
           />
         )
@@ -224,9 +225,9 @@ const Field = props => {
 
   return (
     <FieldContainer className={className} variant={variant}>
-      <Label htmlFor={id} {...labelProps}>
+      <InputLabel htmlFor={id} {...labelProps}>
         {label}
-      </Label>
+      </InputLabel>
       {side && (
         <div
           className={cx(styles['o-side'], labelStyles['c-label'], {

package/src/ListItem/ListItemFile/ItemIcon.jsx

@@ -7,7 +7,6 @@ import Icon from 'cozy-ui/transpiled/react/Icon'
 import FiletypeNoteIcon from 'cozy-ui/transpiled/react/Icons/FileTypeNote'
 import FiletypeTextIcon from 'cozy-ui/transpiled/react/Icons/FileTypeText'
 import Skeleton from 'cozy-ui/transpiled/react/Skeleton'
-import Thumbnail from 'cozy-ui/transpiled/react/Thumbnail'
 
 import FileImageLoader from '../../FileImageLoader'
 
@@ -23,19 +22,28 @@ const ItemIcon = ({ icon, file }) => {
       linkType="tiny"
       render={src => {
         return (
-          <Thumbnail>
+          <div className="u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center">
             {src ? (
-              <img src={src} alt="" />
+              <img
+                className="u-w-2 u-h-2"
+                style={{ objectFit: 'contain' }}
+                src={src}
+                alt=""
+              />
             ) : (
-              <Skeleton variant="rect" animation="wave" />
+              <Skeleton
+                className="u-w-100 u-h-100"
+                variant="rect"
+                animation="wave"
+              />
             )}
-          </Thumbnail>
+          </div>
         )
       }}
       renderFallback={() => (
-        <Thumbnail>
+        <div className="u-flex u-w-2 u-h-2 u-flex-items-center u-flex-justify-center">
           <Icon icon={isNote(file) ? FiletypeNoteIcon : FiletypeTextIcon} />
-        </Thumbnail>
+        </div>
       )}
     />
   )

package/src/Qualification/QualificationItem/index.jsx

@@ -3,7 +3,6 @@ import React from 'react'
 
 import ButtonBase from 'cozy-ui/transpiled/react/ButtonBase'
 import Icon, { iconPropType } from 'cozy-ui/transpiled/react/Icon'
-import IconStack from 'cozy-ui/transpiled/react/IconStack'
 import FileDuotoneIcon from 'cozy-ui/transpiled/react/Icons/FileDuotone'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
@@ -27,19 +26,15 @@ const QualificationItem = ({ icon, label, isSelected, onClick, ...props }) => {
 
   return (
     <ButtonBase {...props} className={styles.item} onClick={onClick}>
-      <IconStack
-        className="u-mb-half"
-        foreground={
-          icon && (
-            <Icon
-              icon={icon}
-              color={
-                isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
-              }
-            />
-          )
-        }
-        background={
+      <div className="u-mb-half">
+        {icon ? (
+          <Icon
+            icon={icon}
+            color={
+              isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
+            }
+          />
+        ) : (
           <Icon
             icon={FileDuotoneIcon}
             size="32"
@@ -47,8 +42,8 @@ const QualificationItem = ({ icon, label, isSelected, onClick, ...props }) => {
               isSelected ? 'var(--primaryColor)' : 'var(--secondaryTextColor)'
             }
           />
-        }
-      />
+        )}
+      </div>
       <Typography variant="caption">{label}</Typography>
     </ButtonBase>
   )

package/src/ShortcutTile/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react'
 
+import { nameToColor } from 'cozy-ui/transpiled/react/Avatar/helpers'
 import { TileIcon } from 'cozy-ui/transpiled/react/Tile'
 import Typography from 'cozy-ui/transpiled/react/Typography'
-import { nameToColor } from 'cozy-ui/transpiled/react/legacy/Avatar/helpers'
 import { makeStyles } from 'cozy-ui/transpiled/react/styles'
 
 import styles from '../AppTile/styles.styl'