From d50f7cded95c4380d0125851a881a51825231f1c Mon Sep 17 00:00:00 2001
From: gcarron <gcarron@grandlyon.com>
Date: Tue, 28 Jun 2022 16:18:57 +0200
Subject: [PATCH] fix: Update cozy-ui lib and adapt deprecated components

---
 package.json                                  |   2 +-
 src/components/FAQ/FAQContent.tsx             |  20 +-
 .../__snapshots__/FAQContent.spec.tsx.snap    | 207 +++++++++---------
 .../Konnector/KonnectorViewerCard.tsx         |  28 ++-
 src/components/Options/ProfileTypeOptions.tsx |  20 +-
 yarn.lock                                     | 154 +++++++++++--
 6 files changed, 283 insertions(+), 148 deletions(-)

diff --git a/package.json b/package.json
index ad9923ecc..ec3601049 100644
--- a/package.json
+++ b/package.json
@@ -111,7 +111,7 @@
     "cozy-logger": ">1.7.0",
     "cozy-realtime": "4.2.1",
     "cozy-scripts": "5.13.0",
-    "cozy-ui": "60.6.0",
+    "cozy-ui": "68.8.0",
     "d3": "^5.15.0",
     "detect-browser": "^5.1.1",
     "eslint-config-cozy-app": "1.6.0",
diff --git a/src/components/FAQ/FAQContent.tsx b/src/components/FAQ/FAQContent.tsx
index 996c0ac54..2574e4d7d 100644
--- a/src/components/FAQ/FAQContent.tsx
+++ b/src/components/FAQ/FAQContent.tsx
@@ -3,9 +3,11 @@ import './faqContent.scss'
 import { useClient } from 'cozy-client'
 import { useI18n } from 'cozy-ui/transpiled/react/I18n'
 import FaqData from 'components/FAQ/FAQData'
-import ExpansionPanel from '@material-ui/core/ExpansionPanel'
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+} from '@material-ui/core'
 import ChevronOffIcon from 'assets/icons/ico/chevron-off.svg'
 import StyledIcon from 'components/CommonKit/Icon/StyledIcon'
 import { FAQSection } from 'models'
@@ -57,7 +59,7 @@ const FAQContent: React.FC = () => {
               <div className="text-16-normal-uppercase">{faq.section}</div>
               {faq.questions.map((question, index2) => {
                 return (
-                  <ExpansionPanel
+                  <Accordion
                     key={index2}
                     expanded={expanded === `panel${index}_${index2}`}
                     onChange={handleChange(`panel${index}_${index2}`)}
@@ -65,7 +67,7 @@ const FAQContent: React.FC = () => {
                       root: 'expansion-panel-root',
                     }}
                   >
-                    <ExpansionPanelSummary
+                    <AccordionSummary
                       aria-label={t('faq.accessibility.button_toggle_detail')}
                       expandIcon={<StyledIcon icon={ChevronOffIcon} />}
                       classes={{
@@ -74,15 +76,15 @@ const FAQContent: React.FC = () => {
                       }}
                     >
                       {question.summary}
-                    </ExpansionPanelSummary>
-                    <ExpansionPanelDetails
+                    </AccordionSummary>
+                    <AccordionDetails
                       classes={{
                         root: 'expansion-panel-details',
                       }}
                     >
                       {question.details}
-                    </ExpansionPanelDetails>
-                  </ExpansionPanel>
+                    </AccordionDetails>
+                  </Accordion>
                 )
               })}
             </div>
diff --git a/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap b/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap
index d7dd81b6b..2a395d05d 100644
--- a/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap
+++ b/src/components/FAQ/__snapshots__/FAQContent.spec.tsx.snap
@@ -17,7 +17,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
         >
           Mes données
         </div>
-        <WithStyles(ForwardRef(ExpansionPanel))
+        <WithStyles(ForwardRef(Accordion))
           classes={
             Object {
               "root": "expansion-panel-root",
@@ -27,24 +27,24 @@ exports[`FAQContent should render the full FAQ 1`] = `
           key="0"
           onChange={[Function]}
         >
-          <ForwardRef(ExpansionPanel)
+          <ForwardRef(Accordion)
             classes={
               Object {
                 "disabled": "Mui-disabled",
                 "expanded": "Mui-expanded",
-                "root": "MuiExpansionPanel-root expansion-panel-root",
-                "rounded": "MuiExpansionPanel-rounded",
+                "root": "MuiAccordion-root expansion-panel-root",
+                "rounded": "MuiAccordion-rounded",
               }
             }
             expanded={false}
             onChange={[Function]}
           >
             <WithStyles(ForwardRef(Paper))
-              className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+              className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
               square={false}
             >
               <ForwardRef(Paper)
-                className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+                className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
                 classes={
                   Object {
                     "elevation0": "MuiPaper-elevation0",
@@ -80,9 +80,9 @@ exports[`FAQContent should render the full FAQ 1`] = `
                 square={false}
               >
                 <div
-                  className="MuiPaper-root MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded MuiPaper-elevation1 MuiPaper-rounded"
+                  className="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
                 >
-                  <WithStyles(ForwardRef(ExpansionPanelSummary))
+                  <WithStyles(ForwardRef(AccordionSummary))
                     aria-label="faq.accessibility.button_toggle_detail"
                     classes={
                       Object {
@@ -97,16 +97,17 @@ exports[`FAQContent should render the full FAQ 1`] = `
                     }
                     key=".0"
                   >
-                    <ForwardRef(ExpansionPanelSummary)
+                    <ForwardRef(AccordionSummary)
                       aria-label="faq.accessibility.button_toggle_detail"
                       classes={
                         Object {
-                          "content": "MuiExpansionPanelSummary-content expansion-panel-content",
+                          "content": "MuiAccordionSummary-content expansion-panel-content",
                           "disabled": "Mui-disabled",
-                          "expandIcon": "MuiExpansionPanelSummary-expandIcon",
+                          "expandIcon": "MuiAccordionSummary-expandIcon",
                           "expanded": "Mui-expanded",
+                          "focusVisible": "Mui-focusVisible",
                           "focused": "Mui-focused",
-                          "root": "MuiExpansionPanelSummary-root expansion-panel-summary small bold-text",
+                          "root": "MuiAccordionSummary-root expansion-panel-summary small bold-text",
                         }
                       }
                       expandIcon={
@@ -118,19 +119,18 @@ exports[`FAQContent should render the full FAQ 1`] = `
                       <WithStyles(ForwardRef(ButtonBase))
                         aria-expanded={false}
                         aria-label="faq.accessibility.button_toggle_detail"
-                        className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                        className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
                         component="div"
                         disableRipple={true}
                         disabled={false}
                         focusRipple={false}
-                        onBlur={[Function]}
+                        focusVisibleClassName="Mui-focusVisible Mui-focused"
                         onClick={[Function]}
-                        onFocusVisible={[Function]}
                       >
                         <ForwardRef(ButtonBase)
                           aria-expanded={false}
                           aria-label="faq.accessibility.button_toggle_detail"
-                          className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                          className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
                           classes={
                             Object {
                               "disabled": "Mui-disabled",
@@ -142,15 +142,14 @@ exports[`FAQContent should render the full FAQ 1`] = `
                           disableRipple={true}
                           disabled={false}
                           focusRipple={false}
-                          onBlur={[Function]}
+                          focusVisibleClassName="Mui-focusVisible Mui-focused"
                           onClick={[Function]}
-                          onFocusVisible={[Function]}
                         >
                           <div
                             aria-disabled={false}
                             aria-expanded={false}
                             aria-label="faq.accessibility.button_toggle_detail"
-                            className="MuiButtonBase-root MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                            className="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary small bold-text"
                             onBlur={[Function]}
                             onClick={[Function]}
                             onDragLeave={[Function]}
@@ -167,13 +166,13 @@ exports[`FAQContent should render the full FAQ 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="MuiExpansionPanelSummary-content expansion-panel-content"
+                              className="MuiAccordionSummary-content expansion-panel-content"
                             >
                               Comment accéder à mes données électricité ?
                             </div>
                             <WithStyles(ForwardRef(IconButton))
                               aria-hidden={true}
-                              className="MuiExpansionPanelSummary-expandIcon"
+                              className="MuiAccordionSummary-expandIcon"
                               component="div"
                               edge="end"
                               role={null}
@@ -181,7 +180,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                             >
                               <ForwardRef(IconButton)
                                 aria-hidden={true}
-                                className="MuiExpansionPanelSummary-expandIcon"
+                                className="MuiAccordionSummary-expandIcon"
                                 classes={
                                   Object {
                                     "colorInherit": "MuiIconButton-colorInherit",
@@ -203,7 +202,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                 <WithStyles(ForwardRef(ButtonBase))
                                   aria-hidden={true}
                                   centerRipple={true}
-                                  className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                  className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
                                   component="div"
                                   disabled={false}
                                   focusRipple={true}
@@ -213,7 +212,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                   <ForwardRef(ButtonBase)
                                     aria-hidden={true}
                                     centerRipple={true}
-                                    className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                    className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
                                     classes={
                                       Object {
                                         "disabled": "Mui-disabled",
@@ -230,7 +229,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                     <div
                                       aria-disabled={false}
                                       aria-hidden={true}
-                                      className="MuiButtonBase-root MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                      className="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
                                       onBlur={[Function]}
                                       onDragLeave={[Function]}
                                       onFocus={[Function]}
@@ -315,8 +314,8 @@ exports[`FAQContent should render the full FAQ 1`] = `
                           </div>
                         </ForwardRef(ButtonBase)>
                       </WithStyles(ForwardRef(ButtonBase))>
-                    </ForwardRef(ExpansionPanelSummary)>
-                  </WithStyles(ForwardRef(ExpansionPanelSummary))>
+                    </ForwardRef(AccordionSummary)>
+                  </WithStyles(ForwardRef(AccordionSummary))>
                   <WithStyles(ForwardRef(Collapse))
                     in={false}
                     timeout="auto"
@@ -367,7 +366,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                               <div
                                 role="region"
                               >
-                                <WithStyles(ForwardRef(ExpansionPanelDetails))
+                                <WithStyles(ForwardRef(AccordionDetails))
                                   classes={
                                     Object {
                                       "root": "expansion-panel-details",
@@ -375,22 +374,22 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                   }
                                   key=".1"
                                 >
-                                  <ForwardRef(ExpansionPanelDetails)
+                                  <ForwardRef(AccordionDetails)
                                     classes={
                                       Object {
-                                        "root": "MuiExpansionPanelDetails-root expansion-panel-details",
+                                        "root": "MuiAccordionDetails-root expansion-panel-details",
                                       }
                                     }
                                   >
                                     <div
-                                      className="MuiExpansionPanelDetails-root expansion-panel-details"
+                                      className="MuiAccordionDetails-root expansion-panel-details"
                                     >
                                       <div>
                                         Rendez-vous dans la partie Options du service et cliquer sur le bouton "Se connecter à l\\'électricité". Suivez la procédure (en vous créant un compte Enedis si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées.
                                       </div>
                                     </div>
-                                  </ForwardRef(ExpansionPanelDetails)>
-                                </WithStyles(ForwardRef(ExpansionPanelDetails))>
+                                  </ForwardRef(AccordionDetails)>
+                                </WithStyles(ForwardRef(AccordionDetails))>
                               </div>
                             </div>
                           </div>
@@ -401,9 +400,9 @@ exports[`FAQContent should render the full FAQ 1`] = `
                 </div>
               </ForwardRef(Paper)>
             </WithStyles(ForwardRef(Paper))>
-          </ForwardRef(ExpansionPanel)>
-        </WithStyles(ForwardRef(ExpansionPanel))>
-        <WithStyles(ForwardRef(ExpansionPanel))
+          </ForwardRef(Accordion)>
+        </WithStyles(ForwardRef(Accordion))>
+        <WithStyles(ForwardRef(Accordion))
           classes={
             Object {
               "root": "expansion-panel-root",
@@ -413,24 +412,24 @@ exports[`FAQContent should render the full FAQ 1`] = `
           key="1"
           onChange={[Function]}
         >
-          <ForwardRef(ExpansionPanel)
+          <ForwardRef(Accordion)
             classes={
               Object {
                 "disabled": "Mui-disabled",
                 "expanded": "Mui-expanded",
-                "root": "MuiExpansionPanel-root expansion-panel-root",
-                "rounded": "MuiExpansionPanel-rounded",
+                "root": "MuiAccordion-root expansion-panel-root",
+                "rounded": "MuiAccordion-rounded",
               }
             }
             expanded={false}
             onChange={[Function]}
           >
             <WithStyles(ForwardRef(Paper))
-              className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+              className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
               square={false}
             >
               <ForwardRef(Paper)
-                className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+                className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
                 classes={
                   Object {
                     "elevation0": "MuiPaper-elevation0",
@@ -466,9 +465,9 @@ exports[`FAQContent should render the full FAQ 1`] = `
                 square={false}
               >
                 <div
-                  className="MuiPaper-root MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded MuiPaper-elevation1 MuiPaper-rounded"
+                  className="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
                 >
-                  <WithStyles(ForwardRef(ExpansionPanelSummary))
+                  <WithStyles(ForwardRef(AccordionSummary))
                     aria-label="faq.accessibility.button_toggle_detail"
                     classes={
                       Object {
@@ -483,16 +482,17 @@ exports[`FAQContent should render the full FAQ 1`] = `
                     }
                     key=".0"
                   >
-                    <ForwardRef(ExpansionPanelSummary)
+                    <ForwardRef(AccordionSummary)
                       aria-label="faq.accessibility.button_toggle_detail"
                       classes={
                         Object {
-                          "content": "MuiExpansionPanelSummary-content expansion-panel-content",
+                          "content": "MuiAccordionSummary-content expansion-panel-content",
                           "disabled": "Mui-disabled",
-                          "expandIcon": "MuiExpansionPanelSummary-expandIcon",
+                          "expandIcon": "MuiAccordionSummary-expandIcon",
                           "expanded": "Mui-expanded",
+                          "focusVisible": "Mui-focusVisible",
                           "focused": "Mui-focused",
-                          "root": "MuiExpansionPanelSummary-root expansion-panel-summary small bold-text",
+                          "root": "MuiAccordionSummary-root expansion-panel-summary small bold-text",
                         }
                       }
                       expandIcon={
@@ -504,19 +504,18 @@ exports[`FAQContent should render the full FAQ 1`] = `
                       <WithStyles(ForwardRef(ButtonBase))
                         aria-expanded={false}
                         aria-label="faq.accessibility.button_toggle_detail"
-                        className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                        className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
                         component="div"
                         disableRipple={true}
                         disabled={false}
                         focusRipple={false}
-                        onBlur={[Function]}
+                        focusVisibleClassName="Mui-focusVisible Mui-focused"
                         onClick={[Function]}
-                        onFocusVisible={[Function]}
                       >
                         <ForwardRef(ButtonBase)
                           aria-expanded={false}
                           aria-label="faq.accessibility.button_toggle_detail"
-                          className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                          className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
                           classes={
                             Object {
                               "disabled": "Mui-disabled",
@@ -528,15 +527,14 @@ exports[`FAQContent should render the full FAQ 1`] = `
                           disableRipple={true}
                           disabled={false}
                           focusRipple={false}
-                          onBlur={[Function]}
+                          focusVisibleClassName="Mui-focusVisible Mui-focused"
                           onClick={[Function]}
-                          onFocusVisible={[Function]}
                         >
                           <div
                             aria-disabled={false}
                             aria-expanded={false}
                             aria-label="faq.accessibility.button_toggle_detail"
-                            className="MuiButtonBase-root MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                            className="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary small bold-text"
                             onBlur={[Function]}
                             onClick={[Function]}
                             onDragLeave={[Function]}
@@ -553,13 +551,13 @@ exports[`FAQContent should render the full FAQ 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="MuiExpansionPanelSummary-content expansion-panel-content"
+                              className="MuiAccordionSummary-content expansion-panel-content"
                             >
                               Comment accéder à mes données gaz ?
                             </div>
                             <WithStyles(ForwardRef(IconButton))
                               aria-hidden={true}
-                              className="MuiExpansionPanelSummary-expandIcon"
+                              className="MuiAccordionSummary-expandIcon"
                               component="div"
                               edge="end"
                               role={null}
@@ -567,7 +565,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                             >
                               <ForwardRef(IconButton)
                                 aria-hidden={true}
-                                className="MuiExpansionPanelSummary-expandIcon"
+                                className="MuiAccordionSummary-expandIcon"
                                 classes={
                                   Object {
                                     "colorInherit": "MuiIconButton-colorInherit",
@@ -589,7 +587,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                 <WithStyles(ForwardRef(ButtonBase))
                                   aria-hidden={true}
                                   centerRipple={true}
-                                  className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                  className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
                                   component="div"
                                   disabled={false}
                                   focusRipple={true}
@@ -599,7 +597,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                   <ForwardRef(ButtonBase)
                                     aria-hidden={true}
                                     centerRipple={true}
-                                    className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                    className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
                                     classes={
                                       Object {
                                         "disabled": "Mui-disabled",
@@ -616,7 +614,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                     <div
                                       aria-disabled={false}
                                       aria-hidden={true}
-                                      className="MuiButtonBase-root MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                      className="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
                                       onBlur={[Function]}
                                       onDragLeave={[Function]}
                                       onFocus={[Function]}
@@ -701,8 +699,8 @@ exports[`FAQContent should render the full FAQ 1`] = `
                           </div>
                         </ForwardRef(ButtonBase)>
                       </WithStyles(ForwardRef(ButtonBase))>
-                    </ForwardRef(ExpansionPanelSummary)>
-                  </WithStyles(ForwardRef(ExpansionPanelSummary))>
+                    </ForwardRef(AccordionSummary)>
+                  </WithStyles(ForwardRef(AccordionSummary))>
                   <WithStyles(ForwardRef(Collapse))
                     in={false}
                     timeout="auto"
@@ -753,7 +751,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                               <div
                                 role="region"
                               >
-                                <WithStyles(ForwardRef(ExpansionPanelDetails))
+                                <WithStyles(ForwardRef(AccordionDetails))
                                   classes={
                                     Object {
                                       "root": "expansion-panel-details",
@@ -761,22 +759,22 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                   }
                                   key=".1"
                                 >
-                                  <ForwardRef(ExpansionPanelDetails)
+                                  <ForwardRef(AccordionDetails)
                                     classes={
                                       Object {
-                                        "root": "MuiExpansionPanelDetails-root expansion-panel-details",
+                                        "root": "MuiAccordionDetails-root expansion-panel-details",
                                       }
                                     }
                                   >
                                     <div
-                                      className="MuiExpansionPanelDetails-root expansion-panel-details"
+                                      className="MuiAccordionDetails-root expansion-panel-details"
                                     >
                                       <div>
                                         Rendez-vous dans la partie Options du service et cliquez sur le bouton "Se connecter au gaz". Suivez la procédure (en vous créant un compte GRDF si nécessaire). Une fois votre consentement donné, vos données de consommation seront récupérées.',
                                       </div>
                                     </div>
-                                  </ForwardRef(ExpansionPanelDetails)>
-                                </WithStyles(ForwardRef(ExpansionPanelDetails))>
+                                  </ForwardRef(AccordionDetails)>
+                                </WithStyles(ForwardRef(AccordionDetails))>
                               </div>
                             </div>
                           </div>
@@ -787,8 +785,8 @@ exports[`FAQContent should render the full FAQ 1`] = `
                 </div>
               </ForwardRef(Paper)>
             </WithStyles(ForwardRef(Paper))>
-          </ForwardRef(ExpansionPanel)>
-        </WithStyles(ForwardRef(ExpansionPanel))>
+          </ForwardRef(Accordion)>
+        </WithStyles(ForwardRef(Accordion))>
       </div>
       <div
         className="faq-section"
@@ -799,7 +797,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
         >
           Contenu du service
         </div>
-        <WithStyles(ForwardRef(ExpansionPanel))
+        <WithStyles(ForwardRef(Accordion))
           classes={
             Object {
               "root": "expansion-panel-root",
@@ -809,24 +807,24 @@ exports[`FAQContent should render the full FAQ 1`] = `
           key="0"
           onChange={[Function]}
         >
-          <ForwardRef(ExpansionPanel)
+          <ForwardRef(Accordion)
             classes={
               Object {
                 "disabled": "Mui-disabled",
                 "expanded": "Mui-expanded",
-                "root": "MuiExpansionPanel-root expansion-panel-root",
-                "rounded": "MuiExpansionPanel-rounded",
+                "root": "MuiAccordion-root expansion-panel-root",
+                "rounded": "MuiAccordion-rounded",
               }
             }
             expanded={false}
             onChange={[Function]}
           >
             <WithStyles(ForwardRef(Paper))
-              className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+              className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
               square={false}
             >
               <ForwardRef(Paper)
-                className="MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded"
+                className="MuiAccordion-root expansion-panel-root MuiAccordion-rounded"
                 classes={
                   Object {
                     "elevation0": "MuiPaper-elevation0",
@@ -862,9 +860,9 @@ exports[`FAQContent should render the full FAQ 1`] = `
                 square={false}
               >
                 <div
-                  className="MuiPaper-root MuiExpansionPanel-root expansion-panel-root MuiExpansionPanel-rounded MuiPaper-elevation1 MuiPaper-rounded"
+                  className="MuiPaper-root MuiAccordion-root expansion-panel-root MuiAccordion-rounded MuiPaper-elevation1 MuiPaper-rounded"
                 >
-                  <WithStyles(ForwardRef(ExpansionPanelSummary))
+                  <WithStyles(ForwardRef(AccordionSummary))
                     aria-label="faq.accessibility.button_toggle_detail"
                     classes={
                       Object {
@@ -879,16 +877,17 @@ exports[`FAQContent should render the full FAQ 1`] = `
                     }
                     key=".0"
                   >
-                    <ForwardRef(ExpansionPanelSummary)
+                    <ForwardRef(AccordionSummary)
                       aria-label="faq.accessibility.button_toggle_detail"
                       classes={
                         Object {
-                          "content": "MuiExpansionPanelSummary-content expansion-panel-content",
+                          "content": "MuiAccordionSummary-content expansion-panel-content",
                           "disabled": "Mui-disabled",
-                          "expandIcon": "MuiExpansionPanelSummary-expandIcon",
+                          "expandIcon": "MuiAccordionSummary-expandIcon",
                           "expanded": "Mui-expanded",
+                          "focusVisible": "Mui-focusVisible",
                           "focused": "Mui-focused",
-                          "root": "MuiExpansionPanelSummary-root expansion-panel-summary small bold-text",
+                          "root": "MuiAccordionSummary-root expansion-panel-summary small bold-text",
                         }
                       }
                       expandIcon={
@@ -900,19 +899,18 @@ exports[`FAQContent should render the full FAQ 1`] = `
                       <WithStyles(ForwardRef(ButtonBase))
                         aria-expanded={false}
                         aria-label="faq.accessibility.button_toggle_detail"
-                        className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                        className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
                         component="div"
                         disableRipple={true}
                         disabled={false}
                         focusRipple={false}
-                        onBlur={[Function]}
+                        focusVisibleClassName="Mui-focusVisible Mui-focused"
                         onClick={[Function]}
-                        onFocusVisible={[Function]}
                       >
                         <ForwardRef(ButtonBase)
                           aria-expanded={false}
                           aria-label="faq.accessibility.button_toggle_detail"
-                          className="MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                          className="MuiAccordionSummary-root expansion-panel-summary small bold-text"
                           classes={
                             Object {
                               "disabled": "Mui-disabled",
@@ -924,15 +922,14 @@ exports[`FAQContent should render the full FAQ 1`] = `
                           disableRipple={true}
                           disabled={false}
                           focusRipple={false}
-                          onBlur={[Function]}
+                          focusVisibleClassName="Mui-focusVisible Mui-focused"
                           onClick={[Function]}
-                          onFocusVisible={[Function]}
                         >
                           <div
                             aria-disabled={false}
                             aria-expanded={false}
                             aria-label="faq.accessibility.button_toggle_detail"
-                            className="MuiButtonBase-root MuiExpansionPanelSummary-root expansion-panel-summary small bold-text"
+                            className="MuiButtonBase-root MuiAccordionSummary-root expansion-panel-summary small bold-text"
                             onBlur={[Function]}
                             onClick={[Function]}
                             onDragLeave={[Function]}
@@ -949,13 +946,13 @@ exports[`FAQContent should render the full FAQ 1`] = `
                             tabIndex={0}
                           >
                             <div
-                              className="MuiExpansionPanelSummary-content expansion-panel-content"
+                              className="MuiAccordionSummary-content expansion-panel-content"
                             >
                               Pourquoi les prix affichés sont-ils différents de ceux indiqués sur ma facture ?
                             </div>
                             <WithStyles(ForwardRef(IconButton))
                               aria-hidden={true}
-                              className="MuiExpansionPanelSummary-expandIcon"
+                              className="MuiAccordionSummary-expandIcon"
                               component="div"
                               edge="end"
                               role={null}
@@ -963,7 +960,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                             >
                               <ForwardRef(IconButton)
                                 aria-hidden={true}
-                                className="MuiExpansionPanelSummary-expandIcon"
+                                className="MuiAccordionSummary-expandIcon"
                                 classes={
                                   Object {
                                     "colorInherit": "MuiIconButton-colorInherit",
@@ -985,7 +982,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                 <WithStyles(ForwardRef(ButtonBase))
                                   aria-hidden={true}
                                   centerRipple={true}
-                                  className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                  className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
                                   component="div"
                                   disabled={false}
                                   focusRipple={true}
@@ -995,7 +992,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                   <ForwardRef(ButtonBase)
                                     aria-hidden={true}
                                     centerRipple={true}
-                                    className="MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                    className="MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
                                     classes={
                                       Object {
                                         "disabled": "Mui-disabled",
@@ -1012,7 +1009,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                     <div
                                       aria-disabled={false}
                                       aria-hidden={true}
-                                      className="MuiButtonBase-root MuiIconButton-root MuiExpansionPanelSummary-expandIcon MuiIconButton-edgeEnd"
+                                      className="MuiButtonBase-root MuiIconButton-root MuiAccordionSummary-expandIcon MuiIconButton-edgeEnd"
                                       onBlur={[Function]}
                                       onDragLeave={[Function]}
                                       onFocus={[Function]}
@@ -1097,8 +1094,8 @@ exports[`FAQContent should render the full FAQ 1`] = `
                           </div>
                         </ForwardRef(ButtonBase)>
                       </WithStyles(ForwardRef(ButtonBase))>
-                    </ForwardRef(ExpansionPanelSummary)>
-                  </WithStyles(ForwardRef(ExpansionPanelSummary))>
+                    </ForwardRef(AccordionSummary)>
+                  </WithStyles(ForwardRef(AccordionSummary))>
                   <WithStyles(ForwardRef(Collapse))
                     in={false}
                     timeout="auto"
@@ -1149,7 +1146,7 @@ exports[`FAQContent should render the full FAQ 1`] = `
                               <div
                                 role="region"
                               >
-                                <WithStyles(ForwardRef(ExpansionPanelDetails))
+                                <WithStyles(ForwardRef(AccordionDetails))
                                   classes={
                                     Object {
                                       "root": "expansion-panel-details",
@@ -1157,15 +1154,15 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                   }
                                   key=".1"
                                 >
-                                  <ForwardRef(ExpansionPanelDetails)
+                                  <ForwardRef(AccordionDetails)
                                     classes={
                                       Object {
-                                        "root": "MuiExpansionPanelDetails-root expansion-panel-details",
+                                        "root": "MuiAccordionDetails-root expansion-panel-details",
                                       }
                                     }
                                   >
                                     <div
-                                      className="MuiExpansionPanelDetails-root expansion-panel-details"
+                                      className="MuiAccordionDetails-root expansion-panel-details"
                                     >
                                       <div>
                                         <p>
@@ -1176,8 +1173,8 @@ exports[`FAQContent should render the full FAQ 1`] = `
                                         </p>
                                       </div>
                                     </div>
-                                  </ForwardRef(ExpansionPanelDetails)>
-                                </WithStyles(ForwardRef(ExpansionPanelDetails))>
+                                  </ForwardRef(AccordionDetails)>
+                                </WithStyles(ForwardRef(AccordionDetails))>
                               </div>
                             </div>
                           </div>
@@ -1188,8 +1185,8 @@ exports[`FAQContent should render the full FAQ 1`] = `
                 </div>
               </ForwardRef(Paper)>
             </WithStyles(ForwardRef(Paper))>
-          </ForwardRef(ExpansionPanel)>
-        </WithStyles(ForwardRef(ExpansionPanel))>
+          </ForwardRef(Accordion)>
+        </WithStyles(ForwardRef(Accordion))>
       </div>
     </div>
   </div>
diff --git a/src/components/Konnector/KonnectorViewerCard.tsx b/src/components/Konnector/KonnectorViewerCard.tsx
index d7cb6b235..b23c5f5fd 100644
--- a/src/components/Konnector/KonnectorViewerCard.tsx
+++ b/src/components/Konnector/KonnectorViewerCard.tsx
@@ -30,9 +30,11 @@ import AccountService from 'services/account.service'
 
 import chevronDown from 'assets/icons/ico/chevron-down.svg'
 import Icon from 'cozy-ui/transpiled/react/Icon'
-import ExpansionPanel from '@material-ui/core/ExpansionPanel'
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+} from '@material-ui/core'
 import ErrorNotif from 'assets/icons/ico/notif_error.svg'
 import PartnersIssueNotif from 'assets/icons/ico/notif_maintenance.svg'
 import ConnectionNotFound from 'components/Connection/ConnectionNotFound'
@@ -163,7 +165,9 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
     await refreshChallengeState()
     const _updatedFluidStatus = await updateGlobalFluidStatus()
     if (_updatedFluidStatus.length > 0) {
-      const partnersInfo: PartnersInfo = await partnersInfoService.getPartnersInfo()
+      const partnersInfo:
+        | PartnersInfo
+        | undefined = await partnersInfoService.getPartnersInfo()
       const updatedFluidStatus: FluidStatus[] = await fluidService.getFluidStatus(
         partnersInfo
       )
@@ -202,7 +206,9 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
           )
         }
         if (updatedFluidStatus.length > 0) {
-          const partnersInfo: PartnersInfo = await partnersInfoService.getPartnersInfo()
+          const partnersInfo:
+            | PartnersInfo
+            | undefined = await partnersInfoService.getPartnersInfo()
           const _updatedFluidStatus: FluidStatus[] = await fluidService.getFluidStatus(
             partnersInfo
           )
@@ -458,7 +464,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
   return (
     <>
       {!isDisconnected ? (
-        <ExpansionPanel
+        <Accordion
           expanded={active}
           onChange={toggleAccordion}
           classes={{
@@ -472,7 +478,7 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
             }`,
           }}
         >
-          <ExpansionPanelSummary
+          <AccordionSummary
             aria-label={t(
               `konnector_options.accessibility.button_toggle_detail_${FluidType[
                 fluidStatus.fluidType
@@ -496,15 +502,15 @@ const KonnectorViewerCard: React.FC<KonnectorViewerCardProps> = ({
             >
               {displayKonnectorHeader()}
             </div>
-          </ExpansionPanelSummary>
-          <ExpansionPanelDetails
+          </AccordionSummary>
+          <AccordionDetails
             classes={{
               root: 'expansion-panel-details',
             }}
           >
             {getConnectionCard()}
-          </ExpansionPanelDetails>
-        </ExpansionPanel>
+          </AccordionDetails>
+        </Accordion>
       ) : (
         <>{getConnectionCard()}</>
       )}
diff --git a/src/components/Options/ProfileTypeOptions.tsx b/src/components/Options/ProfileTypeOptions.tsx
index e73c1cf2c..dea8c9317 100644
--- a/src/components/Options/ProfileTypeOptions.tsx
+++ b/src/components/Options/ProfileTypeOptions.tsx
@@ -13,9 +13,11 @@ import {
 import { FluidType } from 'enum/fluid.enum'
 import { useHistory } from 'react-router-dom'
 
-import ExpansionPanel from '@material-ui/core/ExpansionPanel'
-import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'
-import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'
+import {
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+} from '@material-ui/core'
 import Icon from 'cozy-ui/transpiled/react/Icon'
 import chevronDown from 'assets/icons/ico/chevron-down.svg'
 import StyledCard from 'components/CommonKit/Card/StyledCard'
@@ -50,14 +52,14 @@ const ProfileTypeOptions: React.FC = () => {
           {t('profile_type.title_profile')}
         </div>
         {profile.isProfileTypeCompleted && (
-          <ExpansionPanel
+          <Accordion
             expanded={active}
             onChange={toggleAccordion}
             classes={{
               root: 'expansion-panel-root',
             }}
           >
-            <ExpansionPanelSummary
+            <AccordionSummary
               aria-label={t(
                 'profile_type.accessibility.button_toggle_detail_profile'
               )}
@@ -70,8 +72,8 @@ const ProfileTypeOptions: React.FC = () => {
               <div className="text-18-normal">
                 {t('profile_type.your_profile')}
               </div>
-            </ExpansionPanelSummary>
-            <ExpansionPanelDetails
+            </AccordionSummary>
+            <AccordionDetails
               classes={{
                 root: 'expansion-panel-details',
               }}
@@ -228,8 +230,8 @@ const ProfileTypeOptions: React.FC = () => {
                   </Button>
                 </div>
               </div>
-            </ExpansionPanelDetails>
-          </ExpansionPanel>
+            </AccordionDetails>
+          </Accordion>
         )}
         {profile.isProfileTypeCompleted === false && (
           <StyledCard onClick={goToForm} className="profile-link">
diff --git a/yarn.lock b/yarn.lock
index 04ac835dd..a753febca 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2910,6 +2910,11 @@
   resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.177.tgz#f70c0d19c30fab101cad46b52be60363c43c4578"
   integrity sha512-0fDwydE2clKe9MNfvXHBHF9WEahRuj+msTuQqOmAApNORFvhMYZKNGGJdCzuhheVjMps/ti0Ak/iJPACMaevvw==
 
+"@types/lodash@^4.14.175":
+  version "4.14.182"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
+  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
+
 "@types/luxon@^1.21.0":
   version "1.27.1"
   resolved "https://registry.yarnpkg.com/@types/luxon/-/luxon-1.27.1.tgz#aceeb2d5be8fccf541237e184e37ecff5faa9096"
@@ -3879,6 +3884,13 @@ aws4@^1.8.0:
   resolved "https://registry.yarnpkg.com/aws4/-/aws4-1.11.0.tgz#d61f46d83b2519250e2784daf5b09479a8b41c59"
   integrity sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==
 
+axios@^0.21.1:
+  version "0.21.4"
+  resolved "https://registry.yarnpkg.com/axios/-/axios-0.21.4.tgz#c67b90dc0568e5c1cf2b0b858c43ba28e2eda575"
+  integrity sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==
+  dependencies:
+    follow-redirects "^1.14.0"
+
 axios@^0.27.0:
   version "0.27.2"
   resolved "https://registry.yarnpkg.com/axios/-/axios-0.27.2.tgz#207658cc8621606e586c85db4b41a750e756d972"
@@ -4319,6 +4331,13 @@ brorand@^1.0.1, brorand@^1.1.0:
   resolved "https://registry.yarnpkg.com/brorand/-/brorand-1.1.0.tgz#12c25efe40a45e3c323eb8675a0a0ce57b22371f"
   integrity sha1-EsJe/kCkXjwyPrhnWgoM5XsiNx8=
 
+brotli-size@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/brotli-size/-/brotli-size-4.0.0.tgz#a05ee3faad3c0e700a2f2da826ba6b4d76e69e5e"
+  integrity sha512-uA9fOtlTRC0iqKfzff1W34DXUA3GyVqbUaeo3Rw3d4gd1eavKVCETXrn3NzO74W+UVkG3UHu8WxUi+XvKI/huA==
+  dependencies:
+    duplexer "0.1.1"
+
 browser-process-hrtime@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
@@ -4475,6 +4494,29 @@ builtins@^1.0.3:
   resolved "https://registry.yarnpkg.com/builtins/-/builtins-1.0.3.tgz#cb94faeb61c8696451db36534e1422f94f0aee88"
   integrity sha1-y5T662HIaWRR2zZTThQi+U8K7og=
 
+bundlemon-utils@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/bundlemon-utils/-/bundlemon-utils-1.0.0.tgz#9c3e10f09107568913db2e69a3d3317a82b00633"
+  integrity sha512-+rc1Zautuch9MT7+n4O7T1+ASxcudaxisAIBVqN2xjOCaA+wYn5lyQnMPx2Ky2Cg8N4GrvuSfjNopli/GFrqVQ==
+  dependencies:
+    bytes "^3.1.0"
+
+bundlemon@^1.3.2:
+  version "1.4.0"
+  resolved "https://registry.yarnpkg.com/bundlemon/-/bundlemon-1.4.0.tgz#5593e00cd913e638f69a489d4d97a9abecdac85d"
+  integrity sha512-A5mzeMZrnUzKNNo8ng1PFlxZr57XM2HDsaX07kJ1u59BDWn2JFYNeUIUSXhmLdoqBHK9Ln7wTLXDnoqOlcJP5A==
+  dependencies:
+    axios "^0.21.1"
+    brotli-size "^4.0.0"
+    bundlemon-utils "^1.0.0"
+    bytes "^3.1.0"
+    chalk "^4.1.1"
+    commander "^8.0.0"
+    cosmiconfig "^7.0.0"
+    gzip-size "^6.0.0"
+    micromatch "^4.0.4"
+    yup "^0.32.11"
+
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
@@ -4490,6 +4532,11 @@ bytes@3.1.1:
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.1.tgz#3f018291cb4cbad9accb6e6970bca9c8889e879a"
   integrity sha512-dWe4nWO/ruEOY7HkUJ5gFt1DCFV9zPRoJr8pV0/ASQermOZjtq8jMjOprC0Kd10GLN+l7xaUPvxzJFWtxGu8Fg==
 
+bytes@^3.1.0:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.1.2.tgz#8b0beeb98605adf1b128fa4386403c009e0221a5"
+  integrity sha512-/Nf7TyzTx6S3yRJObOAV7956r8cr2+Oj8AC5dt8wSP3BQAoeX58NoHyCU8P8zGkNXStjTSi6fzO6F0pBdcYbEg==
+
 cacache@^10.0.4:
   version "10.0.4"
   resolved "https://registry.yarnpkg.com/cacache/-/cacache-10.0.4.tgz#6452367999eff9d4188aefd9a14e9d7c6a263460"
@@ -4741,7 +4788,7 @@ chalk@3, chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0:
+chalk@^4.0.0, chalk@^4.1.0, chalk@^4.1.1:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -4779,6 +4826,11 @@ charenc@0.0.2:
   resolved "https://registry.yarnpkg.com/charenc/-/charenc-0.0.2.tgz#c0a1d2f3a7092e03774bfa83f14c0fc5790a8667"
   integrity sha1-wKHS86cJLgN3S/qD8UwPxXkKhmc=
 
+chart.js@3.7.1:
+  version "3.7.1"
+  resolved "https://registry.yarnpkg.com/chart.js/-/chart.js-3.7.1.tgz#0516f690c6a8680c6c707e31a4c1807a6f400ada"
+  integrity sha512-8knRegQLFnPQAheZV8MjxIXc5gQEfDFD897BJgv/klO/vtIyFFmgMXrNfgrXpbTr/XbTturxRgxIXx/Y+ASJBA==
+
 check-types@^8.0.3:
   version "8.0.3"
   resolved "https://registry.yarnpkg.com/check-types/-/check-types-8.0.3.tgz#3356cca19c889544f2d7a95ed49ce508a0ecf552"
@@ -5208,7 +5260,7 @@ commander@^5.1.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-5.1.0.tgz#46abbd1652f8e059bddaef99bbdcb2ad9cf179ae"
   integrity sha512-P0CysNDQ7rtVw4QIQtm+MRxV66vKFSvlsQvGYXZWR3qFU0jlMKHZZZgw8e+8DSah4UDKMqnknRDQz+xuQXQ/Zg==
 
-commander@^8.3.0:
+commander@^8.0.0, commander@^8.3.0:
   version "8.3.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
@@ -6121,28 +6173,34 @@ cozy-ui@35.22.0:
     react-select "2.2.0"
     react-swipeable-views "0.13.3"
 
-cozy-ui@60.6.0:
-  version "60.6.0"
-  resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-60.6.0.tgz#8454767932ff4f9d078b8780d3433b6a93e6b855"
-  integrity sha512-bNVK+TRjmtEtHzh272npmOiK64MCSIlo2bvWsBzevHhksd6x+TzazXkGR84iBQGGmm+CQI7F1+YNcg6gE7s2Yw==
+cozy-ui@68.8.0:
+  version "68.8.0"
+  resolved "https://registry.yarnpkg.com/cozy-ui/-/cozy-ui-68.8.0.tgz#4112bfe2a2fde5cc22ae046683ff7230c0c5038f"
+  integrity sha512-HIsL3z0KZVeNzMSKDOTRxawUqehJDNZLAWM9VtbiS0DEpYJ5zYvWyyLi8CDJP6swv/6RuuH7KRO403iic8WWgQ==
   dependencies:
     "@babel/runtime" "^7.3.4"
     "@popperjs/core" "^2.4.4"
+    bundlemon "^1.3.2"
+    chart.js "3.7.1"
     classnames "^2.2.5"
     cozy-interapp "^0.5.4"
     date-fns "^1.28.5"
     filesize "8.0.7"
     hammerjs "^2.0.8"
     intersection-observer "0.11.0"
+    mime-types "2.1.35"
     mui-bottom-sheet "https://github.com/cozy/mui-bottom-sheet.git#v1.0.6"
     node-polyglot "^2.2.2"
-    normalize.css "^7.0.0"
+    normalize.css "^8.0.0"
+    piwik-react-router "0.12.1"
+    react-chartjs-2 "4.1.0"
     react-markdown "^4.0.8"
     react-pdf "^4.0.5"
     react-popper "^2.2.3"
     react-remove-scroll "^2.4.0"
     react-select "^4.3.0"
     react-swipeable-views "^0.13.3"
+    rooks "^5.11.2"
 
 create-ecdh@^4.0.0:
   version "4.0.4"
@@ -7136,7 +7194,12 @@ dotgitignore@^2.1.0:
     find-up "^3.0.0"
     minimatch "^3.0.4"
 
-duplexer@^0.1.1:
+duplexer@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.1.tgz#ace6ff808c1ce66b57d1ebf97977acb02334cfc1"
+  integrity sha512-sxNZ+ljy+RA1maXoUReeqBBpBC6RLKmg5ewzV+x+mSETmWNoKdZN6vcQjpFROemza23hGFskJtFNoUWUaQ+R4Q==
+
+duplexer@^0.1.1, duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/duplexer/-/duplexer-0.1.2.tgz#3abe43aef3835f8ae077d136ddce0f276b0400e6"
   integrity sha512-jtD6YG370ZCIi/9GTaJKQxWTZD045+4R4hTk/x1UyoqadyJ9x9CgSi1RlVDQF8U2sxLLSnFkCaMihqljHIWgMg==
@@ -8501,7 +8564,7 @@ follow-redirects@^1.0.0:
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.5.tgz#f09a5848981d3c772b5392309778523f8d85c381"
   integrity sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==
 
-follow-redirects@^1.14.9:
+follow-redirects@^1.14.0, follow-redirects@^1.14.9:
   version "1.15.1"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.1.tgz#0ca6a452306c9b276e4d3127483e29575e207ad5"
   integrity sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==
@@ -8993,6 +9056,13 @@ gzip-size@^5.0.0:
     duplexer "^0.1.1"
     pify "^4.0.1"
 
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
+  dependencies:
+    duplexer "^0.1.2"
+
 hammerjs@2.0.8, hammerjs@^2.0.8:
   version "2.0.8"
   resolved "https://registry.yarnpkg.com/hammerjs/-/hammerjs-2.0.8.tgz#04ef77862cff2bb79d30f7692095930222bf60f1"
@@ -11351,7 +11421,7 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash-es@^4.17.11, lodash-es@^4.2.1:
+lodash-es@^4.17.11, lodash-es@^4.17.21, lodash-es@^4.2.1:
   version "4.17.21"
   resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
   integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
@@ -11904,6 +11974,18 @@ mime-db@1.51.0, "mime-db@>= 1.43.0 < 2":
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.51.0.tgz#d9ff62451859b18342d960850dc3cfb77e63fb0c"
   integrity sha512-5y8A56jg7XVQx2mbv1lu49NR4dokRnhZYTtL+KGfaa27uq4pSTXkwQkFJl4pkRMyNFz/EtYDSkiiEHx3F7UN6g==
 
+mime-db@1.52.0:
+  version "1.52.0"
+  resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
+  integrity sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==
+
+mime-types@2.1.35:
+  version "2.1.35"
+  resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.35.tgz#381a871b62a734450660ae3deee44813f70d959a"
+  integrity sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==
+  dependencies:
+    mime-db "1.52.0"
+
 mime-types@^2.1.12, mime-types@^2.1.31, mime-types@~2.1.17, mime-types@~2.1.19, mime-types@~2.1.24:
   version "2.1.34"
   resolved "https://registry.yarnpkg.com/mime-types/-/mime-types-2.1.34.tgz#5a712f9ec1503511a945803640fafe09d3793c24"
@@ -12529,9 +12611,9 @@ msgpack5@^4.0.2:
     readable-stream "^2.3.6"
     safe-buffer "^5.1.2"
 
-"mui-bottom-sheet@https://github.com/cozy/mui-bottom-sheet.git#v1.0.6":
+"mui-bottom-sheet@git+https://github.com/cozy/mui-bottom-sheet.git#v1.0.6":
   version "1.0.6"
-  resolved "https://github.com/cozy/mui-bottom-sheet.git#494c40416ecde95732c864f9b921e7e545075aa5"
+  resolved "git+https://github.com/cozy/mui-bottom-sheet.git#494c40416ecde95732c864f9b921e7e545075aa5"
   dependencies:
     "@juggle/resize-observer" "^3.1.3"
     jest-environment-jsdom-sixteen "^1.0.3"
@@ -12576,6 +12658,11 @@ nan@^2.12.1, nan@^2.13.2:
   resolved "https://registry.yarnpkg.com/nan/-/nan-2.15.0.tgz#3f34a473ff18e15c1b5626b62903b5ad6e665fee"
   integrity sha512-8ZtvEnA2c5aYCZYd1cvgdnU6cqwixRoYg70xPLWUws5ORTa/lnw+u4amixRS/Ac5U5mQVgp9pnlSUnbNWFaWZQ==
 
+nanoclone@^0.2.1:
+  version "0.2.1"
+  resolved "https://registry.yarnpkg.com/nanoclone/-/nanoclone-0.2.1.tgz#dd4090f8f1a110d26bb32c49ed2f5b9235209ed4"
+  integrity sha512-wynEP02LmIbLpcYw8uBKpcfF6dmg2vcpKqxeH5UcoKEYdExslsdUA4ugFauuaeYdTB76ez6gJW8XAZ6CgkXYxA==
+
 nanoid@^3.1.30:
   version "3.1.30"
   resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.1.30.tgz#63f93cc548d2a113dc5dfbc63bfa09e2b9b64362"
@@ -12907,6 +12994,11 @@ normalize.css@^7.0.0:
   resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-7.0.0.tgz#abfb1dd82470674e0322b53ceb1aaf412938e4bf"
   integrity sha1-q/sd2CRwZ04DIrU86xqvQSk45L8=
 
+normalize.css@^8.0.0:
+  version "8.0.1"
+  resolved "https://registry.yarnpkg.com/normalize.css/-/normalize.css-8.0.1.tgz#9b98a208738b9cc2634caacbc42d131c97487bf3"
+  integrity sha512-qizSNPO93t1YUuUhP22btGOo3chcvDFqFaj2TRybP0DMxkHOCTYwp3n34fel4a31ORXy4m1Xq0Gyqpb5m33qIg==
+
 npm-run-all@^4.1.5:
   version "4.1.5"
   resolved "https://registry.yarnpkg.com/npm-run-all/-/npm-run-all-4.1.5.tgz#04476202a15ee0e2e214080861bff12a51d98fba"
@@ -14257,6 +14349,11 @@ propagate@^2.0.0:
   resolved "https://registry.yarnpkg.com/propagate/-/propagate-2.0.1.tgz#40cdedab18085c792334e64f0ac17256d38f9a45"
   integrity sha512-vGrhOavPSTz4QVNuBNdcNXePNdNMaO1xj9yBeH1ScQPjk/rhg9sSlCXPhMkFuaNNW/syTvYqsnbIJxMBfRbbag==
 
+property-expr@^2.0.4:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/property-expr/-/property-expr-2.0.5.tgz#278bdb15308ae16af3e3b9640024524f4dc02cb4"
+  integrity sha512-IJUkICM5dP5znhCckHSv30Q4b5/JA5enCtkRHYaOVOAocnH/1BQEYTC5NMfT3AVl/iXKdr3aqQbQn9DxyWknwA==
+
 proto-list@~1.2.1:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/proto-list/-/proto-list-1.2.4.tgz#212d5bfe1318306a420f6402b8e26ff39647a849"
@@ -14495,6 +14592,11 @@ react-autowhatever@^10.1.2:
     react-themeable "^1.1.0"
     section-iterator "^2.0.0"
 
+react-chartjs-2@4.1.0:
+  version "4.1.0"
+  resolved "https://registry.yarnpkg.com/react-chartjs-2/-/react-chartjs-2-4.1.0.tgz#2a123df16d3a987c54eb4e810ed766d3c03adf8d"
+  integrity sha512-AsUihxEp8Jm1oBhbEovE+w50m9PVNhz1sfwEIT4hZduRC0m14gHWHd0cUaxkFDb8HNkdMIGzsNlmVqKiOpU74g==
+
 react-dom@16.14.0:
   version "16.14.0"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.14.0.tgz#7ad838ec29a777fb3c75c3a190f661cf92ab8b89"
@@ -14561,7 +14663,7 @@ react-input-autosize@^3.0.0:
   dependencies:
     prop-types "^15.5.8"
 
-react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.4, react-is@^16.8.6:
+react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1, react-is@^16.8.6:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -15489,6 +15591,14 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
+rooks@^5.11.2:
+  version "5.11.2"
+  resolved "https://registry.yarnpkg.com/rooks/-/rooks-5.11.2.tgz#f7ba3a758c512c7cc807af38615f3052439578b8"
+  integrity sha512-kOVYjNW/0Emq9NN3DbmC41xcltK25gVV2PMGw+Et9vC5UiIKrwWYRYmMid2/WRGQ0oodOeksCkrqGwJcV2buuQ==
+  dependencies:
+    lodash.debounce "^4.0.8"
+    raf "^3.4.1"
+
 route-recognizer@^0.3.4:
   version "0.3.4"
   resolved "https://registry.yarnpkg.com/route-recognizer/-/route-recognizer-0.3.4.tgz#39ab1ffbce1c59e6d2bdca416f0932611e4f3ca3"
@@ -17082,6 +17192,11 @@ toposort@^1.0.0:
   resolved "https://registry.yarnpkg.com/toposort/-/toposort-1.0.7.tgz#2e68442d9f64ec720b8cc89e6443ac6caa950029"
   integrity sha1-LmhELZ9k7HILjMieZEOsbKqVACk=
 
+toposort@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/toposort/-/toposort-2.0.2.tgz#ae21768175d1559d48bef35420b2f4962f09c330"
+  integrity sha512-0a5EOkAUp8D4moMi2W8ZF8jcga7BgZd91O/yabJCFY8az+XSzeGyTKs0Aoo897iV1Nj6guFq8orWDS96z91oGg==
+
 tough-cookie@^2.3.1, tough-cookie@^2.3.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-2.5.0.tgz#cd9fb2a0aa1d5a12b473bd9fb96fa3dcff65ade2"
@@ -18429,6 +18544,19 @@ yocto-queue@^0.1.0:
   resolved "https://registry.yarnpkg.com/yocto-queue/-/yocto-queue-0.1.0.tgz#0294eb3dee05028d31ee1a5fa2c556a6aaf10a1b"
   integrity sha512-rVksvsnNCdJ/ohGc6xgPwyN8eheCxsiLM8mxuE/t/mOVqJewPuO1miLpTHQiRgTKCLexL4MeAFVagts7HmNZ2Q==
 
+yup@^0.32.11:
+  version "0.32.11"
+  resolved "https://registry.yarnpkg.com/yup/-/yup-0.32.11.tgz#d67fb83eefa4698607982e63f7ca4c5ed3cf18c5"
+  integrity sha512-Z2Fe1bn+eLstG8DRR6FTavGD+MeAwyfmouhHsIUgaADz8jvFKbO/fXc2trJKZg+5EBjh4gGm3iU/t3onKlXHIg==
+  dependencies:
+    "@babel/runtime" "^7.15.4"
+    "@types/lodash" "^4.14.175"
+    lodash "^4.17.21"
+    lodash-es "^4.17.21"
+    nanoclone "^0.2.1"
+    property-expr "^2.0.4"
+    toposort "^2.0.2"
+
 zxcvbn@^4.4.2:
   version "4.4.2"
   resolved "https://registry.yarnpkg.com/zxcvbn/-/zxcvbn-4.4.2.tgz#28ec17cf09743edcab056ddd8b1b06262cc73c30"
-- 
GitLab