cozy-ui-plus 5.3.1 → 6.1.0

package/CHANGELOG.md

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.1.0](https://github.com/cozy/cozy-libs/compare/cozy-ui-plus@6.0.0...cozy-ui-plus@6.1.0) (2026-04-02)
+
+### Bug Fixes
+
+- **cozy-ui-plus:** Remove icon wrapper on contact modal if no icon ([8b0ffa9](https://github.com/cozy/cozy-libs/commit/8b0ffa9a55dcc964c558625515e191316f03072a))
+
+### Features
+
+- **cozy-ui-plus:** Add `isHalfWidth` prop on fields ([a69e7b7](https://github.com/cozy/cozy-libs/commit/a69e7b7af6e0e7021d8ab5bb68894829b9a75c97))
+- **cozy-ui-plus:** Add prop on Contacts modal to remove field ([d9637ff](https://github.com/cozy/cozy-libs/commit/d9637ff248e3ddc39fe8664af645e96e4e551f2f))
+- **cozy-ui-plus:** Change size of contacts modal fields ([27fdb9a](https://github.com/cozy/cozy-libs/commit/27fdb9a344a0803ca1442b93c9213aedb93ad8a2))
+- **cozy-ui-plus:** Move field remove button next to the input ([0a7c409](https://github.com/cozy/cozy-libs/commit/0a7c409a84dbb5f235586069feaa45454df0fbee))
+
+# [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/Contacts/AddModal/ContactForm/FieldInput.js

@@ -21,6 +21,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _reactFinalForm = require("react-final-form");
 
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
 var _twakeI18n = require("twake-i18n");
 
 var _FieldInputWrapper = _interopRequireDefault(require("./FieldInputWrapper"));
@@ -29,35 +31,55 @@ var _HasValueCondition = _interopRequireDefault(require("./HasValueCondition"));
 
 var _RelatedContactList = require("./RelatedContactList");
 
+var _RemoveButton = _interopRequireDefault(require("./RemoveButton"));
+
 var _locales = require("./locales");
 
 var _ContactAddressDialog = _interopRequireDefault(require("../ContactAddressDialog"));
 
 var _types = require("../types");
 
-var _excluded = ["subFields"];
+var _excluded = ["showRemove", "onRemove"],
+    _excluded2 = ["subFields"];
 
 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; }
 
-var styles = {
-  "contact-form-field__wrapper": "styles__contact-form-field__wrapper___13Usq"
+var FieldAndRemove = function FieldAndRemove(_ref) {
+  var showRemove = _ref.showRemove,
+      onRemove = _ref.onRemove,
+      props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
+  if (isMobile) {
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: "u-flex u-flex-items-center u-w-100"
+    }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, props), showRemove && /*#__PURE__*/_react.default.createElement(_RemoveButton.default, {
+      onRemove: onRemove
+    }));
+  }
+
+  return /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, props);
 };
 
-var FieldInput = function FieldInput(_ref) {
-  var name = _ref.name,
-      labelProps = _ref.labelProps,
-      className = _ref.className,
-      _ref$attributes = _ref.attributes,
-      subFields = _ref$attributes.subFields,
-      restAttributes = (0, _objectWithoutProperties2.default)(_ref$attributes, _excluded),
-      contacts = _ref.contacts,
-      contact = _ref.contact,
-      error = _ref.error,
-      helperText = _ref.helperText,
-      label = _ref.label,
-      isInvisible = _ref.isInvisible;
+var FieldInput = function FieldInput(_ref2) {
+  var name = _ref2.name,
+      labelProps = _ref2.labelProps,
+      className = _ref2.className,
+      _ref2$attributes = _ref2.attributes,
+      subFields = _ref2$attributes.subFields,
+      restAttributes = (0, _objectWithoutProperties2.default)(_ref2$attributes, _excluded2),
+      contacts = _ref2.contacts,
+      contact = _ref2.contact,
+      error = _ref2.error,
+      onRemove = _ref2.onRemove,
+      showRemove = _ref2.showRemove,
+      helperText = _ref2.helperText,
+      label = _ref2.label,
+      isInvisible = _ref2.isInvisible;
 
   var _useState = (0, _react.useState)((0, _uniqueId.default)('field_')),
       _useState2 = (0, _slicedToArray2.default)(_useState, 1),
@@ -84,6 +106,9 @@ var FieldInput = function FieldInput(_ref) {
   var _useI18n = (0, _twakeI18n.useI18n)(),
       t = _useI18n.t;
 
+  var _useBreakpoints2 = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints2.isMobile;
+
   var handleClick = function handleClick() {
     if (name.includes('address')) {
       setIsAddressDialogOpen(true);
@@ -99,11 +124,11 @@ var FieldInput = function FieldInput(_ref) {
   };
 
   return /*#__PURE__*/_react.default.createElement("div", {
-    className: (0, _classnames.default)(className, styles['contact-form-field__wrapper'], 'u-flex-column-s', {
+    className: (0, _classnames.default)(className, 'u-flex-column-s u-flex-items-center u-w-100', {
       'u-flex': !isInvisible,
       'u-dn': isInvisible
     })
-  }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
+  }, /*#__PURE__*/_react.default.createElement(FieldAndRemove, {
     error: error,
     helperText: helperText,
     label: label,
@@ -112,6 +137,8 @@ var FieldInput = function FieldInput(_ref) {
     name: name,
     contact: contact,
     component: _FieldInputWrapper.default,
+    showRemove: showRemove,
+    onRemove: onRemove,
     onFocus: onFocus,
     onClick: handleClick
   }), isAddressDialogOpen && /*#__PURE__*/_react.default.createElement(_ContactAddressDialog.default, {
@@ -130,7 +157,7 @@ var FieldInput = function FieldInput(_ref) {
     name: name,
     otherCondition: hasBeenFocused
   }, /*#__PURE__*/_react.default.createElement("div", {
-    className: "u-mt-half-s u-ml-half u-ml-0-s u-flex-shrink-0 u-w-auto u-miw-4"
+    className: "u-mt-half-s u-ml-half u-ml-0-s u-flex-shrink-0 u-w-100-s u-w-auto u-miw-4"
   }, /*#__PURE__*/_react.default.createElement(_reactFinalForm.Field, {
     attributes: labelProps,
     name: "".concat(name, "Label"),
@@ -138,7 +165,9 @@ var FieldInput = function FieldInput(_ref) {
     contact: contact,
     component: _FieldInputWrapper.default,
     onFocus: onFocus
-  }))));
+  }))), showRemove && !isMobile && /*#__PURE__*/_react.default.createElement(_RemoveButton.default, {
+    onRemove: onRemove
+  }));
 };
 
 FieldInput.propTypes = {

package/dist/Contacts/AddModal/ContactForm/FieldInputArray.js

@@ -19,14 +19,8 @@ var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"
 
 var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
 
-var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
-
-var _CrossCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/CrossCircle"));
-
 var _Plus = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/Plus"));
 
-var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
-
 var _twakeI18n = require("twake-i18n");
 
 var _FieldInput = _interopRequireDefault(require("./FieldInput"));
@@ -76,21 +70,16 @@ var FieldInputArray = function FieldInputArray(_ref) {
         contacts: contacts,
         contact: contact,
         error: isError,
+        index: index,
+        showRemove: showRemove,
         helperText: isError ? errors[inputName] : null,
         name: inputName,
         label: t("Contacts.AddModal.ContactForm.fields.".concat(name)),
-        labelProps: label
-      }), showRemove && /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
-        className: "u-ml-half"
-      }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
-        "aria-label": "delete",
-        size: "medium",
-        onClick: function onClick() {
+        labelProps: label,
+        onRemove: function onRemove() {
           return (0, _helpers.removeField)(fields, index);
         }
-      }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
-        icon: _CrossCircle.default
-      }))));
+      }));
     }), /*#__PURE__*/_react.default.createElement(_Buttons.default, {
       variant: "text",
       startIcon: /*#__PURE__*/_react.default.createElement(_Icon.default, {

package/dist/Contacts/AddModal/ContactForm/FieldInputLayout.js

@@ -57,9 +57,9 @@ var FieldInputLayout = function FieldInputLayout(_ref) {
       'u-flex': !isSecondary || showSecondaryFields,
       'u-dn': isSecondary && !showSecondaryFields
     })
-  }, /*#__PURE__*/_react.default.createElement("div", {
+  }, icon && /*#__PURE__*/_react.default.createElement("div", {
     className: "u-w-2-half"
-  }, icon && /*#__PURE__*/_react.default.createElement(_Icon.default, {
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
     icon: icon,
     color: "var(--iconTextColor)"
   })), /*#__PURE__*/_react.default.createElement("div", {

package/dist/Contacts/AddModal/ContactForm/FieldInputWrapper.js

@@ -21,7 +21,7 @@ var _TextFieldSelect = _interopRequireDefault(require("./TextFieldSelect"));
 
 var _types = require("../types");
 
-var _excluded = ["component", "layout", "icon", "isSecondary", "validate"],
+var _excluded = ["component", "layout", "isHalfWidth", "icon", "isSecondary", "validate"],
     _excluded2 = ["input", "attributes", "variant", "fullWidth"];
 
 // component used to flatten props to ensure compatibility
@@ -31,6 +31,7 @@ var FieldInputWrapper = function FieldInputWrapper(_ref) {
       _ref$attributes = _ref.attributes,
       component = _ref$attributes.component,
       layout = _ref$attributes.layout,
+      isHalfWidth = _ref$attributes.isHalfWidth,
       icon = _ref$attributes.icon,
       isSecondary = _ref$attributes.isSecondary,
       validate = _ref$attributes.validate,
@@ -42,6 +43,7 @@ var FieldInputWrapper = function FieldInputWrapper(_ref) {
   return /*#__PURE__*/_react.default.createElement(Component, (0, _extends2.default)({}, input, restAttributes, props, {
     variant: variant,
     fullWidth: fullWidth,
+    size: "small",
     minRows: "2"
   }));
 };

package/dist/Contacts/AddModal/ContactForm/RemoveButton.js

@@ -0,0 +1,34 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _Icon = _interopRequireDefault(require("cozy-ui/transpiled/react/Icon"));
+
+var _IconButton = _interopRequireDefault(require("cozy-ui/transpiled/react/IconButton"));
+
+var _CrossCircle = _interopRequireDefault(require("cozy-ui/transpiled/react/Icons/CrossCircle"));
+
+var _ListItemIcon = _interopRequireDefault(require("cozy-ui/transpiled/react/ListItemIcon"));
+
+var RemoveButton = function RemoveButton(_ref) {
+  var onRemove = _ref.onRemove;
+  return /*#__PURE__*/_react.default.createElement(_ListItemIcon.default, {
+    className: "u-ml-half"
+  }, /*#__PURE__*/_react.default.createElement(_IconButton.default, {
+    "aria-label": "delete",
+    size: "medium",
+    onClick: onRemove
+  }, /*#__PURE__*/_react.default.createElement(_Icon.default, {
+    icon: _CrossCircle.default
+  })));
+};
+
+var _default = RemoveButton;
+exports.default = _default;

package/dist/Contacts/AddModal/ContactForm/fieldsConfig.js

@@ -56,6 +56,7 @@ var fields = [{
   icon: null,
   type: 'text',
   layout: 'accordion',
+  isHalfWidth: true,
   subFields: [{
     name: 'additionalName',
     icon: null,
@@ -68,7 +69,8 @@ var fields = [{
 }, {
   name: 'familyName',
   icon: null,
-  type: 'text'
+  type: 'text',
+  isHalfWidth: true
 }, {
   name: 'company',
   icon: _Company.default,

package/dist/Contacts/AddModal/ContactForm/helpers.js

@@ -541,7 +541,17 @@ var makeFields = function makeFields(customFields, defaultFields) {
   customFields.forEach(function (customField) {
     var defaultField = fields.find(function (field) {
       return field.name === customField.name;
-    });
+    }); // If isRemoved is true, remove the field from the result
+
+    if (customField.isRemoved) {
+      if (defaultField) {
+        fields = fields.filter(function (field) {
+          return field.name !== customField.name;
+        });
+      }
+
+      return;
+    }
 
     var _field = defaultField || customField;
 
@@ -549,7 +559,7 @@ var makeFields = function makeFields(customFields, defaultFields) {
       Object.assign(_field, customField);
     }
 
-    if (_field.position) {
+    if (_field.position !== undefined) {
       if (defaultField) {
         var fieldIndex = fields.indexOf(defaultField);
         fields.splice(fieldIndex, 1);

package/dist/Contacts/AddModal/ContactForm/index.js

@@ -21,8 +21,12 @@ var _reactFinalForm = require("react-final-form");
 
 var _HasMany = require("cozy-client/dist/associations/HasMany");
 
+var _Box = _interopRequireDefault(require("cozy-ui/transpiled/react/Box"));
+
 var _Buttons = _interopRequireDefault(require("cozy-ui/transpiled/react/Buttons"));
 
+var _Breakpoints = require("cozy-ui/transpiled/react/providers/Breakpoints");
+
 var _twakeI18n = require("twake-i18n");
 
 var _FieldInputLayout = _interopRequireDefault(require("./FieldInputLayout"));
@@ -91,6 +95,9 @@ var ContactForm = function ContactForm(_ref) {
       makeCustomFieldsFormValues = customFieldsProps.makeCustomFieldsFormValues,
       makeCustomContactValues = customFieldsProps.makeCustomContactValues;
 
+  var _useBreakpoints = (0, _Breakpoints.useBreakpoints)(),
+      isMobile = _useBreakpoints.isMobile;
+
   var _fields = (0, _helpers.makeFields)(fields, _fieldsConfig.fields);
 
   var hasSecondaryFields = _fields.some(function (el) {
@@ -131,9 +138,13 @@ var ContactForm = function ContactForm(_ref) {
         role: "form",
         onSubmit: handleSubmit,
         className: "u-flex u-flex-column"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "u-flex u-flex-wrap u-flex-justify-between"
       }, _fields.map(function (attributes, index) {
-        return /*#__PURE__*/_react.default.createElement(_FieldInputLayout.default, {
+        return /*#__PURE__*/_react.default.createElement(_Box.default, {
           key: index,
+          width: attributes.isHalfWidth && !isMobile ? 'calc(50% - 0.5rem)' : '100%'
+        }, /*#__PURE__*/_react.default.createElement(_FieldInputLayout.default, {
           attributes: attributes,
           contacts: contacts,
           contact: contact,
@@ -143,8 +154,8 @@ var ContactForm = function ContactForm(_ref) {
             submitFailed: submitFailed,
             errors: errors
           }
-        });
-      }), hasSecondaryFields && !showSecondaryFields && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
+        }));
+      })), hasSecondaryFields && !showSecondaryFields && /*#__PURE__*/_react.default.createElement("div", null, /*#__PURE__*/_react.default.createElement(_Buttons.default, {
         className: "u-db u-ml-2 u-mt-1",
         variant: "text",
         label: t('Contacts.AddModal.ContactForm.other-fields'),

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"));
 
@@ -46,11 +46,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var labelStyles = {
-  "c-label": "styles__c-label___24c92",
-  "is-error": "styles__is-error___1gUPb",
-  "c-label--block": "styles__c-label--block___1Zska"
-};
+var labelStyles = {};
 var styles = {
   "o-field": "styles__o-field___2B6P3",
   "o-field--inline": "styles__o-field--inline___3D2bq",
@@ -167,7 +163,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 +174,9 @@ var Field = function Field(props) {
           onKeyUp: onKeyUp,
           onFocus: onFocus,
           onBlur: onBlur,
-          readOnly: readOnly
+          inputProps: {
+            readOnly: readOnly
+          }
         }, controlledProps));
 
       case 'password':
@@ -241,7 +240,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 = {