cozy-harvest-lib 36.2.6 → 37.0.1

package/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [37.0.1](https://github.com/cozy/cozy-libs/compare/cozy-harvest-lib@37.0.0...cozy-harvest-lib@37.0.1) (2026-03-25)
+
+**Note:** Version bump only for package cozy-harvest-lib
+
+# [37.0.0](https://github.com/cozy/cozy-libs/compare/cozy-harvest-lib@36.2.6...cozy-harvest-lib@37.0.0) (2026-03-24)
+
+### Features
+
+- **cozy-harvest:** Upgrade packages ([4bb429d](https://github.com/cozy/cozy-libs/commit/4bb429df7ef43475a7294c9e7caa2456b327fe47))
+
+### BREAKING CHANGES
+
+- **cozy-harvest:** You must have `cozy-ui >= 138.1.0, cozy-ui-plus >= 6.0.0, cozy-viewer >= 28.0.0`
+
 ## [36.2.6](https://github.com/cozy/cozy-libs/compare/cozy-harvest-lib@36.2.5...cozy-harvest-lib@36.2.6) (2026-03-24)
 
 **Note:** Version bump only for package cozy-harvest-lib

package/dist/components/AccountForm/ReadOnlyIdentifier.js

@@ -4,7 +4,7 @@ var _excluded = ["className", "onClick", "konnector", "identifier"];
 import cx from 'classnames';
 import PropTypes from 'prop-types';
 import React from 'react';
-import Card from 'cozy-ui/transpiled/react/Card';
+import Box from 'cozy-ui/transpiled/react/Box';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect';
 import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media';
@@ -17,7 +17,12 @@ var ReadOnlyIdentifier = function ReadOnlyIdentifier(props) {
       identifier = props.identifier,
       rest = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(Card, _extends({
+  return /*#__PURE__*/React.createElement(Box, _extends({
+    display: "block",
+    border: 1,
+    borderColor: "var(--dividerColor)",
+    borderRadius: 8,
+    padding: 2,
     className: cx({
       'u-c-pointer': onClick
     }, className),

package/dist/components/AccountsList/AccountsList.js

@@ -10,8 +10,8 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import Box from 'cozy-ui/transpiled/react/Box';
 import Button from 'cozy-ui/transpiled/react/Buttons';
-import Card from 'cozy-ui/transpiled/react/Card';
 import { DialogContent } from 'cozy-ui/transpiled/react/Dialog';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus';
@@ -55,8 +55,12 @@ export var AccountsList = /*#__PURE__*/function (_React$PureComponent) {
         }));
       }), /*#__PURE__*/React.createElement("li", {
         className: "u-mb-half"
-      }, /*#__PURE__*/React.createElement(Card, {
-        className: "u-p-0"
+      }, /*#__PURE__*/React.createElement(Box, {
+        display: "block",
+        border: 1,
+        borderColor: "var(--dividerColor)",
+        borderRadius: 8,
+        padding: 0
       }, /*#__PURE__*/React.createElement(Button, {
         label: t('modal.addAccount.button'),
         variant: "text",

package/dist/components/AccountsList/AccountsListItem.js

@@ -11,7 +11,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 import PropTypes from 'prop-types';
 import React from 'react';
 import { Account } from 'cozy-doctypes';
-import Card from 'cozy-ui/transpiled/react/Card';
+import Box from 'cozy-ui/transpiled/react/Box';
 import Typography from 'cozy-ui/transpiled/react/Typography';
 import Status from './Status';
 export var AccountsListItem = /*#__PURE__*/function (_React$PureComponent) {
@@ -38,7 +38,12 @@ export var AccountsListItem = /*#__PURE__*/function (_React$PureComponent) {
       // So we have to check if accountLogin is not undefined before doing the check
 
       var shouldShowAccountLogin = accountLogin && accountName !== accountLogin;
-      return /*#__PURE__*/React.createElement(Card, {
+      return /*#__PURE__*/React.createElement(Box, {
+        display: "block",
+        border: 1,
+        borderColor: "var(--dividerColor)",
+        borderRadius: 8,
+        padding: 2,
         className: "u-flex u-flex-justify-between u-flex-items-center u-c-pointer u-maw-100",
         onClick: onClick
       }, /*#__PURE__*/React.createElement("div", {

package/dist/components/DisconnectedAccountModal.js

@@ -3,7 +3,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import PropTypes from 'prop-types';
 import React, { useRef, useState } from 'react';
 import { getCreatedByApp } from 'cozy-client/dist/models/utils';
-import Card from 'cozy-ui/transpiled/react/Card';
+import Box from 'cozy-ui/transpiled/react/Box';
 import { useCozyDialog, DialogCloseButton } from 'cozy-ui/transpiled/react/CozyDialogs';
 import Dialog from 'cozy-ui/transpiled/react/Dialog';
 import DialogContent from 'cozy-ui/transpiled/react/DialogContent';
@@ -90,7 +90,13 @@ var DisconnectedModal = function DisconnectedModal(_ref) {
     label: t('modal.tabs.configuration')
   })), /*#__PURE__*/React.createElement(Divider, null), activeTab === 0 ? /*#__PURE__*/React.createElement(DialogContent, {
     className: "u-pb-1-half"
-  }, /*#__PURE__*/React.createElement(Card, null, t('disconnectedAccountModal.disconnected-help'))) : null, activeTab === 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, accounts.length ? /*#__PURE__*/React.createElement(DialogContent, {
+  }, /*#__PURE__*/React.createElement(Box, {
+    display: "block",
+    border: 1,
+    borderColor: "var(--dividerColor)",
+    borderRadius: 8,
+    padding: 2
+  }, t('disconnectedAccountModal.disconnected-help'))) : null, activeTab === 1 ? /*#__PURE__*/React.createElement(React.Fragment, null, accounts.length ? /*#__PURE__*/React.createElement(DialogContent, {
     className: isMobile ? 'u-ph-0' : 'u-pt-1-half'
   }, /*#__PURE__*/React.createElement(Contracts, {
     contracts: accounts,

package/dist/components/__snapshots__/OAuthForm.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`OAuthForm should bypass reconnect button when updating an account 1`] = `
 <div>
   <div
-    class="TwakeTheme--light-normal u-dc"
+    class="TwakeTheme--light u-dc"
   />
 </div>
 `;
@@ -11,7 +11,7 @@ exports[`OAuthForm should bypass reconnect button when updating an account 1`] =
 exports[`OAuthForm should handle oauth cancelation 1`] = `
 <div>
   <div
-    class="TwakeTheme--light-normal u-dc"
+    class="TwakeTheme--light u-dc"
   >
     <div
       class="styles__Infos___tpCYh styles__Infos--danger___1HWww u-mb-1"
@@ -44,7 +44,7 @@ exports[`OAuthForm should handle oauth cancelation 1`] = `
       </div>
     </div>
     <div
-      class="styles__c-card___YgP7B u-flex u-flex-wrap"
+      class="MuiBox-root MuiBox-root-11 u-flex u-flex-wrap"
     >
       <div
         class="styles__c-empty___3w5oV"
@@ -102,7 +102,7 @@ exports[`OAuthForm should handle oauth cancelation 1`] = `
 exports[`OAuthForm should handle oauth cancelation 2`] = `
 <div>
   <div
-    class="TwakeTheme--light-normal u-dc"
+    class="TwakeTheme--light u-dc"
   >
     <div
       class="styles__Infos___tpCYh styles__Infos--danger___1HWww u-mb-1"
@@ -135,7 +135,7 @@ exports[`OAuthForm should handle oauth cancelation 2`] = `
       </div>
     </div>
     <div
-      class="styles__c-card___YgP7B u-flex u-flex-wrap"
+      class="MuiBox-root MuiBox-root-13 u-flex u-flex-wrap"
     >
       <div
         class="styles__c-empty___3w5oV"
@@ -177,10 +177,10 @@ exports[`OAuthForm should handle oauth cancelation 2`] = `
 exports[`OAuthForm should render 1`] = `
 <div>
   <div
-    class="TwakeTheme--light-normal u-dc"
+    class="TwakeTheme--light u-dc"
   >
     <div
-      class="styles__c-card___YgP7B u-flex u-flex-wrap"
+      class="MuiBox-root MuiBox-root-3 u-flex u-flex-wrap"
     >
       <div
         class="styles__c-empty___3w5oV"

package/dist/components/cards/AppLinkCard.js

@@ -2,9 +2,9 @@ import _extends from "@babel/runtime/helpers/extends";
 import PropTypes from 'prop-types';
 import React from 'react';
 import { useClient } from 'cozy-client';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Box from 'cozy-ui/transpiled/react/Box';
 import Button from 'cozy-ui/transpiled/react/Buttons';
-import Card from 'cozy-ui/transpiled/react/Card';
-import Circle from 'cozy-ui/transpiled/react/Circle';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import Stack from 'cozy-ui/transpiled/react/Stack';
 import Typography from 'cozy-ui/transpiled/react/Typography';
@@ -77,12 +77,18 @@ var AppLinkCard = function AppLinkCard(_ref3) {
   var _useI18n2 = useI18n(),
       t = _useI18n2.t;
 
-  return /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Typography, {
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "block",
+    border: 1,
+    borderColor: "var(--dividerColor)",
+    borderRadius: 8,
+    padding: 2
+  }, /*#__PURE__*/React.createElement(Stack, null, /*#__PURE__*/React.createElement(Typography, {
     variant: "h6",
     gutterBottom: true
-  }, icon ? /*#__PURE__*/React.createElement(Circle, {
-    size: "small",
-    backgroundColor: palette[iconColor],
+  }, icon ? /*#__PURE__*/React.createElement(Avatar, {
+    size: "sm",
+    color: palette[iconColor],
     className: "u-mr-half"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: icon,

package/dist/components/cards/ConnectCard.js

@@ -1,14 +1,19 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
+import Box from 'cozy-ui/transpiled/react/Box';
 import Button from 'cozy-ui/transpiled/react/Buttons';
-import Card from 'cozy-ui/transpiled/react/Card';
 import Empty from 'cozy-ui/transpiled/react/Empty';
 import CloudSync2 from 'cozy-ui/transpiled/react/Icons/CloudSync2';
 export var ConnectCard = function ConnectCard(_ref) {
   var buttonProps = _ref.buttonProps,
       description = _ref.description,
       title = _ref.title;
-  return /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "block",
+    border: 1,
+    borderColor: "var(--dividerColor)",
+    borderRadius: 8,
+    padding: 2,
     className: "u-flex u-flex-wrap"
   }, /*#__PURE__*/React.createElement(Empty, {
     icon: CloudSync2,

package/dist/components/cards/InformationsCard.js

@@ -4,7 +4,7 @@
 import cx from 'classnames';
 import React from 'react';
 import { useClient, generateWebLink } from 'cozy-client';
-import Card from 'cozy-ui/transpiled/react/Card';
+import Box from 'cozy-ui/transpiled/react/Box';
 import Divider from 'cozy-ui/transpiled/react/Divider';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import GlobeIcon from 'cozy-ui/transpiled/react/Icons/Globe';
@@ -116,7 +116,12 @@ export var InformationsCard = function InformationsCard(_ref4) {
   var _useI18n3 = useI18n(),
       t = _useI18n3.t;
 
-  return /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "block",
+    border: 1,
+    borderColor: "var(--dividerColor)",
+    borderRadius: 8,
+    padding: 2,
     className: cx('u-p-0', className)
   }, /*#__PURE__*/React.createElement("div", {
     className: "u-ph-1 u-flex u-flex-items-center",

package/dist/components/cards/LaunchTriggerCard.js

@@ -7,7 +7,6 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 import PropTypes from 'prop-types';
 import React from 'react';
-import Card from 'cozy-ui/transpiled/react/Card';
 import { translate } from 'twake-i18n';
 import LaunchTriggerAlert from './LaunchTriggerAlert';
 import { intentsApiProptype } from '../../helpers/proptypes';
@@ -42,7 +41,7 @@ var LaunchTriggerCard = function LaunchTriggerCard(props) {
   });
 };
 
-LaunchTriggerCard.propTypes = _objectSpread(_objectSpread({}, Card.propTypes), {}, {
+LaunchTriggerCard.propTypes = {
   /** @type {Object} A ConnectionFlow instance */
   flow: PropTypes.object,
 
@@ -55,5 +54,5 @@ LaunchTriggerCard.propTypes = _objectSpread(_objectSpread({}, Card.propTypes), {
   disabled: PropTypes.bool,
   intentsApi: intentsApiProptype,
   account: PropTypes.object
-});
+};
 export default translate()(LaunchTriggerCard);

package/dist/datacards/DoctypeDebugCard.js

@@ -2,8 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ReactJsonPrint from 'react-json-print';
 import CozyClient, { Q, useQuery, hasQueryBeenLoaded, RealTimeQueries } from 'cozy-client';
+import Box from 'cozy-ui/transpiled/react/Box';
 import Button from 'cozy-ui/transpiled/react/Buttons';
-import Card from 'cozy-ui/transpiled/react/Card';
 import Divider from 'cozy-ui/transpiled/react/Divider';
 import Typography from 'cozy-ui/transpiled/react/Typography';
 import logger from '../logger';
@@ -46,7 +46,13 @@ var DoctypeDebugCard = function DoctypeDebugCard(_ref) {
   }
 
   var clipBoardAvailable = (_navigator$clipboard = navigator.clipboard) === null || _navigator$clipboard === void 0 ? void 0 : _navigator$clipboard.writeText;
-  return !failed && loaded ? /*#__PURE__*/React.createElement(Card, null, /*#__PURE__*/React.createElement(RealTimeQueries, {
+  return !failed && loaded ? /*#__PURE__*/React.createElement(Box, {
+    display: "block",
+    border: 1,
+    borderColor: "var(--dividerColor)",
+    borderRadius: 8,
+    padding: 2
+  }, /*#__PURE__*/React.createElement(RealTimeQueries, {
     doctype: doctype
   }), /*#__PURE__*/React.createElement(Typography, {
     variant: "button"

package/dist/datacards/FileDataCard.js

@@ -6,8 +6,8 @@ import PropTypes from 'prop-types';
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { RealTimeQueries } from 'cozy-client';
-import Card from 'cozy-ui/transpiled/react/Card';
-import Circle from 'cozy-ui/transpiled/react/Circle';
+import Avatar from 'cozy-ui/transpiled/react/Avatar';
+import Box from 'cozy-ui/transpiled/react/Box';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File';
 import List from 'cozy-ui/transpiled/react/List';
@@ -102,15 +102,20 @@ var FileCard = function FileCard(_ref4) {
       _useState2 = _slicedToArray(_useState, 1),
       initialFilesById = _useState2[0];
 
-  return /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "block",
+    border: 1,
+    borderColor: "var(--dividerColor)",
+    borderRadius: 8,
+    padding: 2,
     className: "u-ph-0 u-pb-0 u-ov-hidden"
   }, /*#__PURE__*/React.createElement("div", {
     className: "u-ph-1 u-mb-half"
   }, /*#__PURE__*/React.createElement(Media, {
     align: "top"
-  }, /*#__PURE__*/React.createElement(Img, null, /*#__PURE__*/React.createElement(Circle, {
-    size: "small",
-    backgroundColor: palette['puertoRico'],
+  }, /*#__PURE__*/React.createElement(Img, null, /*#__PURE__*/React.createElement(Avatar, {
+    size: "sm",
+    color: palette['puertoRico'],
     className: "u-mr-1"
   }, /*#__PURE__*/React.createElement(Icon, {
     icon: FileIcon,

package/dist/datacards/GeoDataCard.js

@@ -22,7 +22,6 @@ import SwipeableViews from 'react-swipeable-views';
 import CozyClient, { Q, queryConnect, isQueryLoading, hasQueryBeenLoaded, RealTimeQueries } from 'cozy-client';
 import flag from 'cozy-flags';
 import Box from 'cozy-ui/transpiled/react/Box';
-import Card from 'cozy-ui/transpiled/react/Card';
 import Icon from 'cozy-ui/transpiled/react/Icon';
 import IconButton from 'cozy-ui/transpiled/react/IconButton';
 import ClockIcon from 'cozy-ui/transpiled/react/Icons/Clock';
@@ -237,7 +236,12 @@ var GeoDataCard = function GeoDataCard(_ref4) {
       setPrev = _useCycle2[1],
       setNext = _useCycle2[2];
 
-  return /*#__PURE__*/React.createElement(Card, {
+  return /*#__PURE__*/React.createElement(Box, {
+    display: "block",
+    border: 1,
+    borderColor: "var(--dividerColor)",
+    borderRadius: 8,
+    padding: 2,
     className: "u-ph-0 u-pb-0 u-ov-hidden"
   }, /*#__PURE__*/React.createElement("div", {
     className: "u-ph-1 u-mb-half"

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cozy-harvest-lib",
-  "version": "36.2.6",
+  "version": "37.0.1",
   "description": "Provides logic, modules and components for Cozy's harvest applications.",
   "main": "dist/index.js",
   "author": "Cozy",
@@ -73,9 +73,9 @@
     "cozy-keys-lib": "^6.1.1",
     "cozy-realtime": "^5.9.1",
     "cozy-tsconfig": "^1.8.1",
-    "cozy-ui": "^135.0.0",
+    "cozy-ui": "^138.1.0",
     "cozy-ui-plus": "^6.0.0",
-    "cozy-viewer": "^28.0.0",
+    "cozy-viewer": "^28.0.2",
     "form-data": "4.0.0",
     "identity-obj-proxy": "3.0.0",
     "isomorphic-fetch": "^2.2.1",
@@ -104,13 +104,13 @@
     "cozy-interapp": ">=0.9.0",
     "cozy-keys-lib": ">=6.1.1",
     "cozy-realtime": ">=4.2.8",
-    "cozy-ui": ">=135.0.0",
-    "cozy-ui-plus": ">=1.2.0",
-    "cozy-viewer": ">=11.3.1",
+    "cozy-ui": ">=138.1.0",
+    "cozy-ui-plus": ">=6.0.0",
+    "cozy-viewer": ">=28.0.0",
     "leaflet": "^1.7.1",
     "react-router-dom": ">=6.14.2",
     "twake-i18n": ">=0.3.0"
   },
   "sideEffects": false,
-  "gitHead": "ed10301b13f8add159b400295b8f1d11f65bf523"
+  "gitHead": "32c42c7b2beb61697f0d0826b81d354f2de5d272"
 }

package/src/components/AccountForm/ReadOnlyIdentifier.jsx

@@ -2,7 +2,7 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Card from 'cozy-ui/transpiled/react/Card'
+import Box from 'cozy-ui/transpiled/react/Box'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import BottomSelectIcon from 'cozy-ui/transpiled/react/Icons/BottomSelect'
 import { Media, Img, Bd } from 'cozy-ui/transpiled/react/deprecated/Media'
@@ -13,7 +13,12 @@ const ReadOnlyIdentifier = props => {
   const { className, onClick, konnector, identifier, ...rest } = props
 
   return (
-    <Card
+    <Box
+      display="block"
+      border={1}
+      borderColor="var(--dividerColor)"
+      borderRadius={8}
+      padding={2}
       className={cx({ 'u-c-pointer': onClick }, className)}
       onClick={onClick}
       {...rest}
@@ -27,7 +32,7 @@ const ReadOnlyIdentifier = props => {
           <Icon icon={BottomSelectIcon} />
         </Img>
       </Media>
-    </Card>
+    </Box>
   )
 }
 

package/src/components/AccountsList/AccountsList.jsx

@@ -1,8 +1,8 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
+import Box from 'cozy-ui/transpiled/react/Box'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Card from 'cozy-ui/transpiled/react/Card'
 import { DialogContent } from 'cozy-ui/transpiled/react/Dialog'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import PlusIcon from 'cozy-ui/transpiled/react/Icons/Plus'
@@ -28,7 +28,13 @@ export class AccountsList extends React.PureComponent {
             </li>
           ))}
           <li className="u-mb-half">
-            <Card className="u-p-0">
+            <Box
+              display="block"
+              border={1}
+              borderColor="var(--dividerColor)"
+              borderRadius={8}
+              padding={0}
+            >
               <Button
                 label={t('modal.addAccount.button')}
                 variant="text"
@@ -37,7 +43,7 @@ export class AccountsList extends React.PureComponent {
                 className="u-bdrs-4"
                 onClick={addAccount}
               />
-            </Card>
+            </Box>
           </li>
         </ul>
       </DialogContent>

package/src/components/AccountsList/AccountsListItem.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import { Account } from 'cozy-doctypes'
-import Card from 'cozy-ui/transpiled/react/Card'
+import Box from 'cozy-ui/transpiled/react/Box'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
 import Status from './Status'
@@ -17,7 +17,12 @@ export class AccountsListItem extends React.PureComponent {
     // So we have to check if accountLogin is not undefined before doing the check
     const shouldShowAccountLogin = accountLogin && accountName !== accountLogin
     return (
-      <Card
+      <Box
+        display="block"
+        border={1}
+        borderColor="var(--dividerColor)"
+        borderRadius={8}
+        padding={2}
         className="u-flex u-flex-justify-between u-flex-items-center u-c-pointer u-maw-100"
         onClick={onClick}
       >
@@ -40,7 +45,7 @@ export class AccountsListItem extends React.PureComponent {
           )}
         </div>
         <Status konnector={konnector} trigger={trigger} />
-      </Card>
+      </Box>
     )
   }
 }

package/src/components/DisconnectedAccountModal.jsx

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types'
 import React, { useRef, useState } from 'react'
 
 import { getCreatedByApp } from 'cozy-client/dist/models/utils'
-import Card from 'cozy-ui/transpiled/react/Card'
+import Box from 'cozy-ui/transpiled/react/Box'
 import {
   useCozyDialog,
   DialogCloseButton
@@ -76,7 +76,15 @@ const DisconnectedModal = ({
 
       {activeTab === 0 ? (
         <DialogContent className="u-pb-1-half">
-          <Card>{t('disconnectedAccountModal.disconnected-help')}</Card>
+          <Box
+            display="block"
+            border={1}
+            borderColor="var(--dividerColor)"
+            borderRadius={8}
+            padding={2}
+          >
+            {t('disconnectedAccountModal.disconnected-help')}
+          </Box>
         </DialogContent>
       ) : null}
       {activeTab === 1 ? (

package/src/components/__snapshots__/OAuthForm.spec.js.snap

@@ -3,7 +3,7 @@
 exports[`OAuthForm should bypass reconnect button when updating an account 1`] = `
 <div>
   <div
-    class="TwakeTheme--light-normal u-dc"
+    class="TwakeTheme--light u-dc"
   />
 </div>
 `;
@@ -11,7 +11,7 @@ exports[`OAuthForm should bypass reconnect button when updating an account 1`] =
 exports[`OAuthForm should handle oauth cancelation 1`] = `
 <div>
   <div
-    class="TwakeTheme--light-normal u-dc"
+    class="TwakeTheme--light u-dc"
   >
     <div
       class="styles__Infos___tpCYh styles__Infos--danger___1HWww u-mb-1"
@@ -44,7 +44,7 @@ exports[`OAuthForm should handle oauth cancelation 1`] = `
       </div>
     </div>
     <div
-      class="styles__c-card___YgP7B u-flex u-flex-wrap"
+      class="MuiBox-root MuiBox-root-11 u-flex u-flex-wrap"
     >
       <div
         class="styles__c-empty___3w5oV"
@@ -102,7 +102,7 @@ exports[`OAuthForm should handle oauth cancelation 1`] = `
 exports[`OAuthForm should handle oauth cancelation 2`] = `
 <div>
   <div
-    class="TwakeTheme--light-normal u-dc"
+    class="TwakeTheme--light u-dc"
   >
     <div
       class="styles__Infos___tpCYh styles__Infos--danger___1HWww u-mb-1"
@@ -135,7 +135,7 @@ exports[`OAuthForm should handle oauth cancelation 2`] = `
       </div>
     </div>
     <div
-      class="styles__c-card___YgP7B u-flex u-flex-wrap"
+      class="MuiBox-root MuiBox-root-13 u-flex u-flex-wrap"
     >
       <div
         class="styles__c-empty___3w5oV"
@@ -177,10 +177,10 @@ exports[`OAuthForm should handle oauth cancelation 2`] = `
 exports[`OAuthForm should render 1`] = `
 <div>
   <div
-    class="TwakeTheme--light-normal u-dc"
+    class="TwakeTheme--light u-dc"
   >
     <div
-      class="styles__c-card___YgP7B u-flex u-flex-wrap"
+      class="MuiBox-root MuiBox-root-3 u-flex u-flex-wrap"
     >
       <div
         class="styles__c-empty___3w5oV"

package/src/components/cards/AppLinkCard.jsx

@@ -2,9 +2,9 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 import { useClient } from 'cozy-client'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Box from 'cozy-ui/transpiled/react/Box'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Card from 'cozy-ui/transpiled/react/Card'
-import Circle from 'cozy-ui/transpiled/react/Circle'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import Stack from 'cozy-ui/transpiled/react/Stack'
 import Typography from 'cozy-ui/transpiled/react/Typography'
@@ -65,17 +65,19 @@ const AppLinkCard = ({ slug, path, icon, iconColor }) => {
   const { t } = useI18n()
 
   return (
-    <Card>
+    <Box
+      display="block"
+      border={1}
+      borderColor="var(--dividerColor)"
+      borderRadius={8}
+      padding={2}
+    >
       <Stack>
         <Typography variant="h6" gutterBottom>
           {icon ? (
-            <Circle
-              size="small"
-              backgroundColor={palette[iconColor]}
-              className="u-mr-half"
-            >
+            <Avatar size="sm" color={palette[iconColor]} className="u-mr-half">
               <Icon icon={icon} color={palette['white']} />
-            </Circle>
+            </Avatar>
           ) : null}
           {t(`card.appLink.${slug}.title`)}
         </Typography>
@@ -84,7 +86,7 @@ const AppLinkCard = ({ slug, path, icon, iconColor }) => {
         </Typography>
         <AppLinkButton path={path} slug={slug} />
       </Stack>
-    </Card>
+    </Box>
   )
 }
 

package/src/components/cards/ConnectCard.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 
+import Box from 'cozy-ui/transpiled/react/Box'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Card from 'cozy-ui/transpiled/react/Card'
 import Empty from 'cozy-ui/transpiled/react/Empty'
 import CloudSync2 from 'cozy-ui/transpiled/react/Icons/CloudSync2'
 
@@ -21,9 +21,16 @@ export const ConnectCard = ({
   description,
   title
 }: ConnectCardProps): JSX.Element => (
-  <Card className="u-flex u-flex-wrap">
+  <Box
+    display="block"
+    border={1}
+    borderColor="var(--dividerColor)"
+    borderRadius={8}
+    padding={2}
+    className="u-flex u-flex-wrap"
+  >
     <Empty icon={CloudSync2} title={title} text={description} />
 
     <Button className="u-mh-auto" {...buttonProps} />
-  </Card>
+  </Box>
 )

package/src/components/cards/InformationsCard.tsx

@@ -4,7 +4,7 @@ import cx from 'classnames'
 import React from 'react'
 
 import { useClient, generateWebLink } from 'cozy-client'
-import Card from 'cozy-ui/transpiled/react/Card'
+import Box from 'cozy-ui/transpiled/react/Box'
 import Divider from 'cozy-ui/transpiled/react/Divider'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import GlobeIcon from 'cozy-ui/transpiled/react/Icons/Globe'
@@ -137,7 +137,14 @@ export const InformationsCard = ({
   const { t } = useI18n()
 
   return (
-    <Card className={cx('u-p-0', className)}>
+    <Box
+      display="block"
+      border={1}
+      borderColor="var(--dividerColor)"
+      borderRadius={8}
+      padding={2}
+      className={cx('u-p-0', className)}
+    >
       <div
         className="u-ph-1 u-flex u-flex-items-center"
         style={{ minHeight: '64px' }}
@@ -151,6 +158,6 @@ export const InformationsCard = ({
         <StoreButton appSlug={konnector.slug} />
         <VendorLinkButton vendorLink={konnector.vendor_link} />
       </List>
-    </Card>
+    </Box>
   )
 }

package/src/components/cards/LaunchTriggerCard.jsx

@@ -1,7 +1,6 @@
 import PropTypes from 'prop-types'
 import React from 'react'
 
-import Card from 'cozy-ui/transpiled/react/Card'
 import { translate } from 'twake-i18n'
 
 import LaunchTriggerAlert from './LaunchTriggerAlert'
@@ -38,8 +37,6 @@ const LaunchTriggerCard = props => {
 }
 
 LaunchTriggerCard.propTypes = {
-  ...Card.propTypes,
-
   /** @type {Object} A ConnectionFlow instance */
   flow: PropTypes.object,
 

package/src/datacards/DoctypeDebugCard.jsx

@@ -8,8 +8,8 @@ import CozyClient, {
   hasQueryBeenLoaded,
   RealTimeQueries
 } from 'cozy-client'
+import Box from 'cozy-ui/transpiled/react/Box'
 import Button from 'cozy-ui/transpiled/react/Buttons'
-import Card from 'cozy-ui/transpiled/react/Card'
 import Divider from 'cozy-ui/transpiled/react/Divider'
 import Typography from 'cozy-ui/transpiled/react/Typography'
 
@@ -57,7 +57,13 @@ const DoctypeDebugCard = ({ sourceAccountIdentifier, konnector, doctype }) => {
 
   const clipBoardAvailable = navigator.clipboard?.writeText
   return !failed && loaded ? (
-    <Card>
+    <Box
+      display="block"
+      border={1}
+      borderColor="var(--dividerColor)"
+      borderRadius={8}
+      padding={2}
+    >
       <RealTimeQueries doctype={doctype} />
       <Typography variant="button">{doctype}</Typography>
       {clipBoardAvailable ? (
@@ -78,7 +84,7 @@ const DoctypeDebugCard = ({ sourceAccountIdentifier, konnector, doctype }) => {
       ) : null}
       <Divider className="u-ml-0 u-maw-100 u-mb-half" />
       <ReactJsonPrint dataObject={savedDocuments.data} />
-    </Card>
+    </Box>
   ) : null
 }
 

package/src/datacards/FileDataCard.jsx

@@ -6,8 +6,8 @@ import React, { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { RealTimeQueries } from 'cozy-client'
-import Card from 'cozy-ui/transpiled/react/Card'
-import Circle from 'cozy-ui/transpiled/react/Circle'
+import Avatar from 'cozy-ui/transpiled/react/Avatar'
+import Box from 'cozy-ui/transpiled/react/Box'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import FileIcon from 'cozy-ui/transpiled/react/Icons/File'
 import List from 'cozy-ui/transpiled/react/List'
@@ -84,17 +84,20 @@ const FileCard = ({ files, loading, konnector, trigger, accountId }) => {
   const [initialFilesById] = useState(() => keyBy(files, x => x._id))
 
   return (
-    <Card className="u-ph-0 u-pb-0 u-ov-hidden">
+    <Box
+      display="block"
+      border={1}
+      borderColor="var(--dividerColor)"
+      borderRadius={8}
+      padding={2}
+      className="u-ph-0 u-pb-0 u-ov-hidden"
+    >
       <div className="u-ph-1 u-mb-half">
         <Media align="top">
           <Img>
-            <Circle
-              size="small"
-              backgroundColor={palette['puertoRico']}
-              className="u-mr-1"
-            >
+            <Avatar size="sm" color={palette['puertoRico']} className="u-mr-1">
               <Icon icon={FileIcon} color={palette['white']} />
-            </Circle>
+            </Avatar>
           </Img>
           <Bd>
             <Typography variant="h5">{t('datacards.files.title')}</Typography>
@@ -144,7 +147,7 @@ const FileCard = ({ files, loading, konnector, trigger, accountId }) => {
           path={`#/files/${get(trigger, 'message.folder_to_save')}`}
         />
       </div>
-    </Card>
+    </Box>
   )
 }
 

package/src/datacards/GeoDataCard.jsx

@@ -16,7 +16,6 @@ import CozyClient, {
 } from 'cozy-client'
 import flag from 'cozy-flags'
 import Box from 'cozy-ui/transpiled/react/Box'
-import Card from 'cozy-ui/transpiled/react/Card'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import IconButton from 'cozy-ui/transpiled/react/IconButton'
 import ClockIcon from 'cozy-ui/transpiled/react/Icons/Clock'
@@ -208,7 +207,14 @@ const GeoDataCard = ({ trips, loading, konnector }) => {
     loading || !trips ? undefined : trips.length - 1
   )
   return (
-    <Card className="u-ph-0 u-pb-0 u-ov-hidden">
+    <Box
+      display="block"
+      border={1}
+      borderColor="var(--dividerColor)"
+      borderRadius={8}
+      padding={2}
+      className="u-ph-0 u-pb-0 u-ov-hidden"
+    >
       <div className="u-ph-1 u-mb-half">
         <Typography variant="h6">{t('datacards.trips.title')}</Typography>
         <Typography variant="caption">
@@ -257,7 +263,7 @@ const GeoDataCard = ({ trips, loading, konnector }) => {
       ) : (
         <TripsMap trips={trips} index={index} />
       )}
-    </Card>
+    </Box>
   )
 }