From 587ea8504c7dec46e773279e8de76b372b18dc5a Mon Sep 17 00:00:00 2001
From: Bastien DUMONT <bdumont@grandlyon.com>
Date: Mon, 16 Oct 2023 15:24:45 +0000
Subject: [PATCH] test: setup React Testing Library

---
 .vscode/settings.json                         |    1 +
 jest.config.js                                |    2 +-
 package.json                                  |    4 +
 src/components/Action/ActionView.spec.tsx     |   59 +-
 .../__snapshots__/ActionView.spec.tsx.snap    |  395 ++----
 .../CustomPopup/CustomPopupModal.spec.tsx     |   56 +-
 .../CustomPopup/CustomPopupModal.tsx          |    3 +-
 .../CustomPopupModal.spec.tsx.snap            | 1095 ++---------------
 tests/jestLib/setupTests.ts                   |    1 +
 yarn.lock                                     |  291 ++++-
 10 files changed, 547 insertions(+), 1360 deletions(-)

diff --git a/.vscode/settings.json b/.vscode/settings.json
index e0492b209..325a52293 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -142,6 +142,7 @@
     "Tétris",
     "timestep",
     "TIMESTEP",
+    "Unstarted",
     "UNSTARTED",
     "usageevent",
     "Usain",
diff --git a/jest.config.js b/jest.config.js
index 6358f0010..f8fbe1db9 100644
--- a/jest.config.js
+++ b/jest.config.js
@@ -2,7 +2,7 @@
 const config = {
   testURL: 'http://localhost/',
   moduleFileExtensions: ['js', 'jsx', 'ts', 'tsx', 'json', 'styl'],
-  setupFiles: ['<rootDir>/tests/jestLib/setupTests.ts'],
+  setupFilesAfterEnv: ['<rootDir>/tests/jestLib/setupTests.ts'],
   moduleDirectories: ['<rootDir>', 'node_modules'],
   modulePaths: ['<rootDir>/src'],
   moduleNameMapper: {
diff --git a/package.json b/package.json
index 54d6ec997..1221b5934 100644
--- a/package.json
+++ b/package.json
@@ -88,7 +88,11 @@
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.7.4",
+    "@testing-library/dom": "^9.3.3",
+    "@testing-library/jest-dom": "^6.1.3",
+    "@testing-library/react": "^12.1.0",
     "@testing-library/react-hooks": "^8.0.0",
+    "@testing-library/user-event": "^14.5.1",
     "@types/d3": "^6.0.0",
     "@types/enzyme": "^3.10.8",
     "@types/enzyme-adapter-react-16": "^1.0.6",
diff --git a/src/components/Action/ActionView.spec.tsx b/src/components/Action/ActionView.spec.tsx
index 8f8936c0d..22933cb1b 100644
--- a/src/components/Action/ActionView.spec.tsx
+++ b/src/components/Action/ActionView.spec.tsx
@@ -1,26 +1,29 @@
+import { render } from '@testing-library/react'
 import ActionView from 'components/Action/ActionView'
 import { UserActionState } from 'enums'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { createMockEcolyoStore } from 'tests/__mocks__/store'
-import { waitForComponentToPaint } from 'tests/__mocks__/testUtils'
 import { userChallengeData } from 'tests/__mocks__/userChallengeData.mock'
-import ActionChoose from './ActionChoose/ActionChoose'
-import ActionDone from './ActionDone/ActionDone'
-import ActionOnGoing from './ActionOnGoing/ActionOnGoing'
 
 jest.mock('components/Header/CozyBar', () => 'mock-cozybar')
 jest.mock('components/Header/Header', () => 'mock-header')
 jest.mock('components/Content/Content', () => 'mock-content')
 jest.mock(
-  'components/Action/ActionBegin/ActionBegin.tsx',
-  () => 'mock-action-begin'
+  'components/Action/ActionChoose/ActionChoose.tsx',
+  () => 'mock-action-choose'
+)
+jest.mock(
+  'components/Action/ActionOnGoing/ActionOnGoing.tsx',
+  () => 'mock-action-onGoing'
+)
+jest.mock(
+  'components/Action/ActionDone/ActionDone.tsx',
+  () => 'mock-action-done'
 )
 
 describe('ActionView component', () => {
-  it('should render ActionChoose component', async () => {
+  it('should render match snapshot with "Unstarted" state', async () => {
     const store = createMockEcolyoStore({
       challenge: {
         currentChallenge: {
@@ -32,16 +35,33 @@ describe('ActionView component', () => {
         },
       },
     })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <ActionView />
       </Provider>
     )
-    expect(wrapper.find(ActionChoose).exists()).toBeTruthy()
-    await waitForComponentToPaint(wrapper)
-    expect(toJson(wrapper)).toMatchSnapshot()
+    expect(container).toMatchSnapshot()
   })
-  it('should render ActionDone component', () => {
+  it('should render match snapshot with "onGoing" state', async () => {
+    const store = createMockEcolyoStore({
+      challenge: {
+        currentChallenge: {
+          ...userChallengeData[1],
+          action: {
+            ...userChallengeData[1].action,
+            state: UserActionState.ONGOING,
+          },
+        },
+      },
+    })
+    const { container } = render(
+      <Provider store={store}>
+        <ActionView />
+      </Provider>
+    )
+    expect(container).toMatchSnapshot()
+  })
+  it('should render match snapshot with "Notification" state', async () => {
     const store = createMockEcolyoStore({
       challenge: {
         currentChallenge: {
@@ -53,30 +73,29 @@ describe('ActionView component', () => {
         },
       },
     })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <ActionView />
       </Provider>
     )
-    expect(wrapper.find(ActionDone).exists()).toBeTruthy()
+    expect(container).toMatchSnapshot()
   })
-  it('should render ActionOnGoing component', () => {
+  it('should render match snapshot with default case', async () => {
     const store = createMockEcolyoStore({
       challenge: {
         currentChallenge: {
           ...userChallengeData[1],
           action: {
             ...userChallengeData[1].action,
-            state: UserActionState.ONGOING,
           },
         },
       },
     })
-    const wrapper = mount(
+    const { container } = render(
       <Provider store={store}>
         <ActionView />
       </Provider>
     )
-    expect(wrapper.find(ActionOnGoing).exists()).toBeTruthy()
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
index 1136e5081..6197c430c 100644
--- a/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
+++ b/src/components/Action/__snapshots__/ActionView.spec.tsx.snap
@@ -1,324 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ActionView component should render ActionChoose component 1`] = `
-<Provider
-  store={
-    Object {
-      "clearActions": [Function],
-      "dispatch": [Function],
-      "getActions": [Function],
-      "getState": [Function],
-      "replaceReducer": [Function],
-      "subscribe": [Function],
-    }
-  }
->
-  <ActionView>
-    <mock-cozybar
-      displayBackArrow={true}
-      titleKey="common.title_action"
+exports[`ActionView component should render match snapshot with "Notification" state 1`] = `
+<div>
+  <mock-cozybar
+    displaybackarrow="true"
+    titlekey="common.title_action"
+  />
+  <mock-header
+    desktoptitlekey="common.title_action"
+    displaybackarrow="true"
+  />
+  <mock-content
+    heightoffset="0"
+  >
+    <mock-action-done
+      currentchallenge="[object Object]"
     />
-    <mock-header
-      desktopTitleKey="common.title_action"
-      displayBackArrow={true}
-      setHeaderHeight={[Function]}
+  </mock-content>
+</div>
+`;
+
+exports[`ActionView component should render match snapshot with "Unstarted" state 1`] = `
+<div>
+  <mock-cozybar
+    displaybackarrow="true"
+    titlekey="common.title_action"
+  />
+  <mock-header
+    desktoptitlekey="common.title_action"
+    displaybackarrow="true"
+  />
+  <mock-content
+    heightoffset="0"
+  >
+    <mock-action-choose
+      userchallenge="[object Object]"
+    />
+  </mock-content>
+</div>
+`;
+
+exports[`ActionView component should render match snapshot with "onGoing" state 1`] = `
+<div>
+  <mock-cozybar
+    displaybackarrow="true"
+    titlekey="common.title_action"
+  />
+  <mock-header
+    desktoptitlekey="common.title_action"
+    displaybackarrow="true"
+  />
+  <mock-content
+    heightoffset="0"
+  >
+    <mock-action-ongoing
+      useraction="[object Object]"
+    />
+  </mock-content>
+</div>
+`;
+
+exports[`ActionView component should render match snapshot with default case 1`] = `
+<div>
+  <mock-cozybar
+    displaybackarrow="true"
+    titlekey="common.title_action"
+  />
+  <mock-header
+    desktoptitlekey="common.title_action"
+    displaybackarrow="true"
+  />
+  <mock-content
+    heightoffset="0"
+  >
+    <mock-action-choose
+      userchallenge="[object Object]"
     />
-    <mock-content
-      heightOffset={0}
-    >
-      <ActionChoose
-        userChallenge={
-          Object {
-            "action": Object {
-              "ecogesture": null,
-              "startDate": null,
-              "state": 0,
-            },
-            "description": "Description challenge 2",
-            "duel": Object {
-              "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
-              "duration": "P30D",
-              "fluidTypes": Array [],
-              "id": "DUEL001",
-              "startDate": null,
-              "state": 0,
-              "threshold": 0,
-              "title": "Title DUEL001",
-              "userConsumption": 0,
-            },
-            "endingDate": null,
-            "exploration": Object {
-              "complementary_description": "Refaire un tour dans son profil si déjà fait",
-              "date": null,
-              "description": "Avoir complété son profil",
-              "ecogesture_id": "",
-              "fluid_condition": Array [],
-              "id": "EXPLORATION001",
-              "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
-              "progress": 0,
-              "state": 0,
-              "target": 1,
-              "type": 1,
-            },
-            "id": "CHALLENGE0002",
-            "progress": Object {
-              "actionProgress": 0,
-              "explorationProgress": 0,
-              "quizProgress": 0,
-            },
-            "quiz": Object {
-              "customQuestion": Object {
-                "interval": 20,
-                "period": Object {},
-                "questionLabel": "Custom1",
-                "result": 0,
-                "singleFluid": false,
-                "timeStep": 20,
-                "type": 0,
-              },
-              "id": "QUIZ001",
-              "questions": Array [
-                Object {
-                  "answers": Array [
-                    Object {
-                      "answerLabel": "86 km",
-                      "isTrue": true,
-                    },
-                    Object {
-                      "answerLabel": "78 km",
-                      "isTrue": false,
-                    },
-                    Object {
-                      "answerLabel": "56 km",
-                      "isTrue": false,
-                    },
-                  ],
-                  "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
-                  "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
-                  "result": 0,
-                  "source": "string",
-                },
-                Object {
-                  "answers": Array [
-                    Object {
-                      "answerLabel": "1 point d’eau public pour 800 habitants.",
-                      "isTrue": true,
-                    },
-                    Object {
-                      "answerLabel": "1 point d’eau public pour 400 habitants.",
-                      "isTrue": false,
-                    },
-                    Object {
-                      "answerLabel": "1 point d’eau public pour 200 habitants.",
-                      "isTrue": false,
-                    },
-                  ],
-                  "explanation": "string",
-                  "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
-                  "result": 0,
-                  "source": "string",
-                },
-                Object {
-                  "answers": Array [
-                    Object {
-                      "answerLabel": "François Mitterrand",
-                      "isTrue": false,
-                    },
-                    Object {
-                      "answerLabel": "Napoléon Ier",
-                      "isTrue": true,
-                    },
-                    Object {
-                      "answerLabel": "Napoléon III",
-                      "isTrue": false,
-                    },
-                  ],
-                  "explanation": "string",
-                  "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
-                  "result": 0,
-                  "source": "string",
-                },
-                Object {
-                  "answers": Array [
-                    Object {
-                      "answerLabel": "string",
-                      "isTrue": false,
-                    },
-                    Object {
-                      "answerLabel": "string",
-                      "isTrue": false,
-                    },
-                    Object {
-                      "answerLabel": "Aristide Dumont",
-                      "isTrue": true,
-                    },
-                  ],
-                  "explanation": "string",
-                  "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
-                  "result": 0,
-                  "source": "string",
-                },
-              ],
-              "result": 0,
-              "startDate": null,
-              "state": 0,
-            },
-            "startDate": null,
-            "state": 4,
-            "success": 1,
-            "target": 15,
-            "title": "Challenge 2",
-          }
-        }
-      >
-        <mock-action-begin
-          setShowList={[Function]}
-          userChallenge={
-            Object {
-              "action": Object {
-                "ecogesture": null,
-                "startDate": null,
-                "state": 0,
-              },
-              "description": "Description challenge 2",
-              "duel": Object {
-                "description": "Je parie un ours polaire que vous ne pouvez pas consommer moins que #CONSUMPTION € en 1 semaine",
-                "duration": "P30D",
-                "fluidTypes": Array [],
-                "id": "DUEL001",
-                "startDate": null,
-                "state": 0,
-                "threshold": 0,
-                "title": "Title DUEL001",
-                "userConsumption": 0,
-              },
-              "endingDate": null,
-              "exploration": Object {
-                "complementary_description": "Refaire un tour dans son profil si déjà fait",
-                "date": null,
-                "description": "Avoir complété son profil",
-                "ecogesture_id": "",
-                "fluid_condition": Array [],
-                "id": "EXPLORATION001",
-                "message_success": "Vous avez complété votre profil ou refait un tour dans votre profil",
-                "progress": 0,
-                "state": 0,
-                "target": 1,
-                "type": 1,
-              },
-              "id": "CHALLENGE0002",
-              "progress": Object {
-                "actionProgress": 0,
-                "explorationProgress": 0,
-                "quizProgress": 0,
-              },
-              "quiz": Object {
-                "customQuestion": Object {
-                  "interval": 20,
-                  "period": Object {},
-                  "questionLabel": "Custom1",
-                  "result": 0,
-                  "singleFluid": false,
-                  "timeStep": 20,
-                  "type": 0,
-                },
-                "id": "QUIZ001",
-                "questions": Array [
-                  Object {
-                    "answers": Array [
-                      Object {
-                        "answerLabel": "86 km",
-                        "isTrue": true,
-                      },
-                      Object {
-                        "answerLabel": "78 km",
-                        "isTrue": false,
-                      },
-                      Object {
-                        "answerLabel": "56 km",
-                        "isTrue": false,
-                      },
-                    ],
-                    "explanation": "L’aqueduc du Gier est un des aqueducs antiques de Lyon desservant la ville antique de Lugdunum. Avec ses 86 km il est le plus long des quatre aqueducs ayant alimenté la ville en eau, et celui dont les structures sont le mieux conservées. Il doit son nom au fait qu'il puise aux sources du Gier, affluent du Rhône",
-                    "questionLabel": "Quelle longueur faisait l’aqueduc du Gier pour acheminer l’eau sur Lyon à l’époque romaine ?",
-                    "result": 0,
-                    "source": "string",
-                  },
-                  Object {
-                    "answers": Array [
-                      Object {
-                        "answerLabel": "1 point d’eau public pour 800 habitants.",
-                        "isTrue": true,
-                      },
-                      Object {
-                        "answerLabel": "1 point d’eau public pour 400 habitants.",
-                        "isTrue": false,
-                      },
-                      Object {
-                        "answerLabel": "1 point d’eau public pour 200 habitants.",
-                        "isTrue": false,
-                      },
-                    ],
-                    "explanation": "string",
-                    "questionLabel": "En 1800 à Lyon, combien de points d'eau y avait-il par habitants ?",
-                    "result": 0,
-                    "source": "string",
-                  },
-                  Object {
-                    "answers": Array [
-                      Object {
-                        "answerLabel": "François Mitterrand",
-                        "isTrue": false,
-                      },
-                      Object {
-                        "answerLabel": "Napoléon Ier",
-                        "isTrue": true,
-                      },
-                      Object {
-                        "answerLabel": "Napoléon III",
-                        "isTrue": false,
-                      },
-                    ],
-                    "explanation": "string",
-                    "questionLabel": "Qui officialise la création de la Compagnie Générale des eaux ?",
-                    "result": 0,
-                    "source": "string",
-                  },
-                  Object {
-                    "answers": Array [
-                      Object {
-                        "answerLabel": "string",
-                        "isTrue": false,
-                      },
-                      Object {
-                        "answerLabel": "string",
-                        "isTrue": false,
-                      },
-                      Object {
-                        "answerLabel": "Aristide Dumont",
-                        "isTrue": true,
-                      },
-                    ],
-                    "explanation": "string",
-                    "questionLabel": "Quel ingénieur est à l’origine du projet d’alimentation en eau en 1856 ?",
-                    "result": 0,
-                    "source": "string",
-                  },
-                ],
-                "result": 0,
-                "startDate": null,
-                "state": 0,
-              },
-              "startDate": null,
-              "state": 4,
-              "success": 1,
-              "target": 15,
-              "title": "Challenge 2",
-            }
-          }
-        />
-      </ActionChoose>
-    </mock-content>
-  </ActionView>
-</Provider>
+  </mock-content>
+</div>
 `;
diff --git a/src/components/CustomPopup/CustomPopupModal.spec.tsx b/src/components/CustomPopup/CustomPopupModal.spec.tsx
index 5c7a807be..1503e148e 100644
--- a/src/components/CustomPopup/CustomPopupModal.spec.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.spec.tsx
@@ -1,6 +1,5 @@
-import { Button } from '@material-ui/core'
-import { mount } from 'enzyme'
-import toJson from 'enzyme-to-json'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import React from 'react'
 import {
   mockCustomPopup,
@@ -12,38 +11,61 @@ import CustomPopupModal from './CustomPopupModal'
 const mockHandleClose = jest.fn()
 
 describe('CustomPopupModal component', () => {
-  const wrapper = mount(
-    <CustomPopupModal
-      customPopup={mockCustomPopup}
-      handleCloseClick={mockHandleClose}
-    />
-  )
   it('should render correctly', () => {
-    expect(toJson(wrapper)).toMatchSnapshot()
+    const { baseElement } = render(
+      <CustomPopupModal
+        customPopup={mockCustomPopup}
+        handleCloseClick={mockHandleClose}
+      />
+    )
+    expect(baseElement).toMatchSnapshot()
   })
 
-  it('should close modal', () => {
-    wrapper.find(Button).simulate('click')
-    expect(mockHandleClose).toHaveBeenCalled()
+  it('should render correct title and description', () => {
+    render(
+      <CustomPopupModal
+        customPopup={mockCustomPopup}
+        handleCloseClick={mockHandleClose}
+      />
+    )
+    expect(screen.getByTestId('title')).toHaveTextContent(mockCustomPopup.title)
+    expect(screen.getByTestId('description')).toHaveTextContent(
+      mockCustomPopup.description
+    )
   })
 
   it('should not be rendered, popup not enabled', () => {
-    const wrapper = mount(
+    render(
       <CustomPopupModal
         customPopup={mockCustomPopupOff}
         handleCloseClick={mockHandleClose}
       />
     )
-    expect(wrapper.find('div.customPopupModal').exists()).toBeFalsy()
+    const modal = screen.queryByTestId('title')
+    expect(modal).not.toBeInTheDocument()
   })
 
   it('should not be rendered, popup outdated', () => {
-    const wrapper = mount(
+    render(
       <CustomPopupModal
         customPopup={mockCustomPopupOutdated}
         handleCloseClick={mockHandleClose}
       />
     )
-    expect(wrapper.find('div.customPopupModal').exists()).toBeFalsy()
+    const modal = screen.queryByTestId('title')
+    expect(modal).not.toBeInTheDocument()
+  })
+
+  it('should close modal', async () => {
+    render(
+      <CustomPopupModal
+        customPopup={mockCustomPopup}
+        handleCloseClick={mockHandleClose}
+      />
+    )
+    await userEvent.click(
+      screen.getByText('consumption.partner_issue_modal.ok')
+    )
+    expect(mockHandleClose).toHaveBeenCalled()
   })
 })
diff --git a/src/components/CustomPopup/CustomPopupModal.tsx b/src/components/CustomPopup/CustomPopupModal.tsx
index cebafcbc2..17f70a4af 100644
--- a/src/components/CustomPopup/CustomPopupModal.tsx
+++ b/src/components/CustomPopup/CustomPopupModal.tsx
@@ -48,12 +48,13 @@ const CustomPopupModal = ({
       <div className="customPopupModal">
         <StyledIcon icon={Speaker} size={100} />
 
-        <div className="customPopup-title text-20-bold">
+        <div className="customPopup-title text-20-bold" data-testid="title">
           {customPopup.title}
         </div>
 
         <div
           className="customPopup-content text-16-normal"
+          data-testid="description"
           dangerouslySetInnerHTML={{
             __html: customPopup.description,
           }}
diff --git a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
index bd6ac538b..95b7473c4 100644
--- a/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
+++ b/src/components/CustomPopup/__snapshots__/CustomPopupModal.spec.tsx.snap
@@ -1,1006 +1,111 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`CustomPopupModal component should render correctly 1`] = `
-<CustomPopupModal
-  customPopup={
-    Object {
-      "description": "Interesting description",
-      "endDate": "2099-10-04T15:10:53.219+02:00",
-      "popupEnabled": true,
-      "title": "Bold title",
-    }
-  }
-  handleCloseClick={[MockFunction]}
+<body
+  style="padding-right: 0px; overflow: hidden;"
 >
-  <WithStyles(ForwardRef(Dialog))
-    aria-labelledby="accessibility-title"
-    classes={
-      Object {
-        "paper": "modal-paper customPopupRoot",
-        "root": "modal-root",
-      }
-    }
-    disableEscapeKeyDown={true}
-    onClose={[Function]}
-    open={true}
+  <div
+    aria-hidden="true"
+  />
+  <div
+    class="MuiDialog-root modal-root"
+    role="presentation"
+    style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
   >
-    <ForwardRef(Dialog)
-      aria-labelledby="accessibility-title"
-      classes={
-        Object {
-          "container": "MuiDialog-container",
-          "paper": "MuiDialog-paper modal-paper customPopupRoot",
-          "paperFullScreen": "MuiDialog-paperFullScreen",
-          "paperFullWidth": "MuiDialog-paperFullWidth",
-          "paperScrollBody": "MuiDialog-paperScrollBody",
-          "paperScrollPaper": "MuiDialog-paperScrollPaper",
-          "paperWidthFalse": "MuiDialog-paperWidthFalse",
-          "paperWidthLg": "MuiDialog-paperWidthLg",
-          "paperWidthMd": "MuiDialog-paperWidthMd",
-          "paperWidthSm": "MuiDialog-paperWidthSm",
-          "paperWidthXl": "MuiDialog-paperWidthXl",
-          "paperWidthXs": "MuiDialog-paperWidthXs",
-          "root": "MuiDialog-root modal-root",
-          "scrollBody": "MuiDialog-scrollBody",
-          "scrollPaper": "MuiDialog-scrollPaper",
-        }
-      }
-      disableEscapeKeyDown={true}
-      onClose={[Function]}
-      open={true}
+    <div
+      aria-hidden="true"
+      class="MuiBackdrop-root"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+    />
+    <div
+      data-test="sentinelStart"
+      tabindex="0"
+    />
+    <div
+      class="MuiDialog-container MuiDialog-scrollPaper"
+      role="none presentation"
+      style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
+      tabindex="-1"
     >
-      <ForwardRef(Modal)
-        BackdropComponent={
-          Object {
-            "$$typeof": Symbol(react.forward_ref),
-            "Naked": Object {
-              "$$typeof": Symbol(react.forward_ref),
-              "propTypes": Object {
-                "children": [Function],
-                "className": [Function],
-                "classes": [Function],
-                "invisible": [Function],
-                "open": [Function],
-                "transitionDuration": [Function],
-              },
-              "render": [Function],
-            },
-            "displayName": "WithStyles(ForwardRef(Backdrop))",
-            "options": Object {
-              "defaultTheme": Object {
-                "breakpoints": Object {
-                  "between": [Function],
-                  "down": [Function],
-                  "keys": Array [
-                    "xs",
-                    "sm",
-                    "md",
-                    "lg",
-                    "xl",
-                  ],
-                  "only": [Function],
-                  "up": [Function],
-                  "values": Object {
-                    "lg": 1280,
-                    "md": 960,
-                    "sm": 600,
-                    "xl": 1920,
-                    "xs": 0,
-                  },
-                  "width": [Function],
-                },
-                "direction": "ltr",
-                "mixins": Object {
-                  "gutters": [Function],
-                  "toolbar": Object {
-                    "@media (min-width:0px) and (orientation: landscape)": Object {
-                      "minHeight": 48,
-                    },
-                    "@media (min-width:600px)": Object {
-                      "minHeight": 64,
-                    },
-                    "minHeight": 56,
-                  },
-                },
-                "overrides": Object {},
-                "palette": Object {
-                  "action": Object {
-                    "activatedOpacity": 0.12,
-                    "active": "rgba(0, 0, 0, 0.54)",
-                    "disabled": "rgba(0, 0, 0, 0.26)",
-                    "disabledBackground": "rgba(0, 0, 0, 0.12)",
-                    "disabledOpacity": 0.38,
-                    "focus": "rgba(0, 0, 0, 0.12)",
-                    "focusOpacity": 0.12,
-                    "hover": "rgba(0, 0, 0, 0.04)",
-                    "hoverOpacity": 0.04,
-                    "selected": "rgba(0, 0, 0, 0.08)",
-                    "selectedOpacity": 0.08,
-                  },
-                  "augmentColor": [Function],
-                  "background": Object {
-                    "default": "#fafafa",
-                    "paper": "#fff",
-                  },
-                  "common": Object {
-                    "black": "#000",
-                    "white": "#fff",
-                  },
-                  "contrastThreshold": 3,
-                  "divider": "rgba(0, 0, 0, 0.12)",
-                  "error": Object {
-                    "contrastText": "#fff",
-                    "dark": "#d32f2f",
-                    "light": "#e57373",
-                    "main": "#f44336",
-                  },
-                  "getContrastText": [Function],
-                  "grey": Object {
-                    "100": "#f5f5f5",
-                    "200": "#eeeeee",
-                    "300": "#e0e0e0",
-                    "400": "#bdbdbd",
-                    "50": "#fafafa",
-                    "500": "#9e9e9e",
-                    "600": "#757575",
-                    "700": "#616161",
-                    "800": "#424242",
-                    "900": "#212121",
-                    "A100": "#d5d5d5",
-                    "A200": "#aaaaaa",
-                    "A400": "#303030",
-                    "A700": "#616161",
-                  },
-                  "info": Object {
-                    "contrastText": "#fff",
-                    "dark": "#1976d2",
-                    "light": "#64b5f6",
-                    "main": "#2196f3",
-                  },
-                  "primary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#303f9f",
-                    "light": "#7986cb",
-                    "main": "#3f51b5",
-                  },
-                  "secondary": Object {
-                    "contrastText": "#fff",
-                    "dark": "#c51162",
-                    "light": "#ff4081",
-                    "main": "#f50057",
-                  },
-                  "success": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#388e3c",
-                    "light": "#81c784",
-                    "main": "#4caf50",
-                  },
-                  "text": Object {
-                    "disabled": "rgba(0, 0, 0, 0.38)",
-                    "hint": "rgba(0, 0, 0, 0.38)",
-                    "primary": "rgba(0, 0, 0, 0.87)",
-                    "secondary": "rgba(0, 0, 0, 0.54)",
-                  },
-                  "tonalOffset": 0.2,
-                  "type": "light",
-                  "warning": Object {
-                    "contrastText": "rgba(0, 0, 0, 0.87)",
-                    "dark": "#f57c00",
-                    "light": "#ffb74d",
-                    "main": "#ff9800",
-                  },
-                },
-                "props": Object {},
-                "shadows": Array [
-                  "none",
-                  "0px 2px 1px -1px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 1px 3px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 1px -2px rgba(0,0,0,0.2),0px 2px 2px 0px rgba(0,0,0,0.14),0px 1px 5px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 3px -2px rgba(0,0,0,0.2),0px 3px 4px 0px rgba(0,0,0,0.14),0px 1px 8px 0px rgba(0,0,0,0.12)",
-                  "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 5px 8px 0px rgba(0,0,0,0.14),0px 1px 14px 0px rgba(0,0,0,0.12)",
-                  "0px 3px 5px -1px rgba(0,0,0,0.2),0px 6px 10px 0px rgba(0,0,0,0.14),0px 1px 18px 0px rgba(0,0,0,0.12)",
-                  "0px 4px 5px -2px rgba(0,0,0,0.2),0px 7px 10px 1px rgba(0,0,0,0.14),0px 2px 16px 1px rgba(0,0,0,0.12)",
-                  "0px 5px 5px -3px rgba(0,0,0,0.2),0px 8px 10px 1px rgba(0,0,0,0.14),0px 3px 14px 2px rgba(0,0,0,0.12)",
-                  "0px 5px 6px -3px rgba(0,0,0,0.2),0px 9px 12px 1px rgba(0,0,0,0.14),0px 3px 16px 2px rgba(0,0,0,0.12)",
-                  "0px 6px 6px -3px rgba(0,0,0,0.2),0px 10px 14px 1px rgba(0,0,0,0.14),0px 4px 18px 3px rgba(0,0,0,0.12)",
-                  "0px 6px 7px -4px rgba(0,0,0,0.2),0px 11px 15px 1px rgba(0,0,0,0.14),0px 4px 20px 3px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 8px -4px rgba(0,0,0,0.2),0px 13px 19px 2px rgba(0,0,0,0.14),0px 5px 24px 4px rgba(0,0,0,0.12)",
-                  "0px 7px 9px -4px rgba(0,0,0,0.2),0px 14px 21px 2px rgba(0,0,0,0.14),0px 5px 26px 4px rgba(0,0,0,0.12)",
-                  "0px 8px 9px -5px rgba(0,0,0,0.2),0px 15px 22px 2px rgba(0,0,0,0.14),0px 6px 28px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 10px -5px rgba(0,0,0,0.2),0px 16px 24px 2px rgba(0,0,0,0.14),0px 6px 30px 5px rgba(0,0,0,0.12)",
-                  "0px 8px 11px -5px rgba(0,0,0,0.2),0px 17px 26px 2px rgba(0,0,0,0.14),0px 6px 32px 5px rgba(0,0,0,0.12)",
-                  "0px 9px 11px -5px rgba(0,0,0,0.2),0px 18px 28px 2px rgba(0,0,0,0.14),0px 7px 34px 6px rgba(0,0,0,0.12)",
-                  "0px 9px 12px -6px rgba(0,0,0,0.2),0px 19px 29px 2px rgba(0,0,0,0.14),0px 7px 36px 6px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 20px 31px 3px rgba(0,0,0,0.14),0px 8px 38px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 13px -6px rgba(0,0,0,0.2),0px 21px 33px 3px rgba(0,0,0,0.14),0px 8px 40px 7px rgba(0,0,0,0.12)",
-                  "0px 10px 14px -6px rgba(0,0,0,0.2),0px 22px 35px 3px rgba(0,0,0,0.14),0px 8px 42px 7px rgba(0,0,0,0.12)",
-                  "0px 11px 14px -7px rgba(0,0,0,0.2),0px 23px 36px 3px rgba(0,0,0,0.14),0px 9px 44px 8px rgba(0,0,0,0.12)",
-                  "0px 11px 15px -7px rgba(0,0,0,0.2),0px 24px 38px 3px rgba(0,0,0,0.14),0px 9px 46px 8px rgba(0,0,0,0.12)",
-                ],
-                "shape": Object {
-                  "borderRadius": 4,
-                },
-                "spacing": [Function],
-                "transitions": Object {
-                  "create": [Function],
-                  "duration": Object {
-                    "complex": 375,
-                    "enteringScreen": 225,
-                    "leavingScreen": 195,
-                    "short": 250,
-                    "shorter": 200,
-                    "shortest": 150,
-                    "standard": 300,
-                  },
-                  "easing": Object {
-                    "easeIn": "cubic-bezier(0.4, 0, 1, 1)",
-                    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
-                    "easeOut": "cubic-bezier(0.0, 0, 0.2, 1)",
-                    "sharp": "cubic-bezier(0.4, 0, 0.6, 1)",
-                  },
-                  "getAutoHeightDuration": [Function],
-                },
-                "typography": Object {
-                  "body1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.5,
-                  },
-                  "body2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.01071em",
-                    "lineHeight": 1.43,
-                  },
-                  "button": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.02857em",
-                    "lineHeight": 1.75,
-                    "textTransform": "uppercase",
-                  },
-                  "caption": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.03333em",
-                    "lineHeight": 1.66,
-                  },
-                  "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                  "fontSize": 14,
-                  "fontWeightBold": 700,
-                  "fontWeightLight": 300,
-                  "fontWeightMedium": 500,
-                  "fontWeightRegular": 400,
-                  "h1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "6rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.01562em",
-                    "lineHeight": 1.167,
-                  },
-                  "h2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3.75rem",
-                    "fontWeight": 300,
-                    "letterSpacing": "-0.00833em",
-                    "lineHeight": 1.2,
-                  },
-                  "h3": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "3rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.167,
-                  },
-                  "h4": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "2.125rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00735em",
-                    "lineHeight": 1.235,
-                  },
-                  "h5": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.5rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0em",
-                    "lineHeight": 1.334,
-                  },
-                  "h6": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1.25rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.0075em",
-                    "lineHeight": 1.6,
-                  },
-                  "htmlFontSize": 16,
-                  "overline": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.75rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.08333em",
-                    "lineHeight": 2.66,
-                    "textTransform": "uppercase",
-                  },
-                  "pxToRem": [Function],
-                  "round": [Function],
-                  "subtitle1": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "1rem",
-                    "fontWeight": 400,
-                    "letterSpacing": "0.00938em",
-                    "lineHeight": 1.75,
-                  },
-                  "subtitle2": Object {
-                    "fontFamily": "\\"Roboto\\", \\"Helvetica\\", \\"Arial\\", sans-serif",
-                    "fontSize": "0.875rem",
-                    "fontWeight": 500,
-                    "letterSpacing": "0.00714em",
-                    "lineHeight": 1.57,
-                  },
-                },
-                "zIndex": Object {
-                  "appBar": 1100,
-                  "drawer": 1200,
-                  "mobileStepper": 1000,
-                  "modal": 1300,
-                  "snackbar": 1400,
-                  "speedDial": 1050,
-                  "tooltip": 1500,
-                },
-              },
-              "name": "MuiBackdrop",
-            },
-            "propTypes": Object {
-              "classes": [Function],
-              "innerRef": [Function],
-            },
-            "render": [Function],
-            "useStyles": [Function],
-          }
-        }
-        BackdropProps={
-          Object {
-            "transitionDuration": Object {
-              "enter": 225,
-              "exit": 195,
-            },
-          }
-        }
-        className="MuiDialog-root modal-root"
-        closeAfterTransition={true}
-        disableEscapeKeyDown={true}
-        onClose={[Function]}
-        open={true}
+      <div
+        aria-labelledby="accessibility-title"
+        class="MuiPaper-root MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
+        role="dialog"
       >
-        <ForwardRef(Portal)
-          disablePortal={false}
+        <div
+          id="accessibility-title"
         >
-          <Portal
-            containerInfo={
-              <body
-                style="padding-right: 0px; overflow: hidden;"
-              >
-                <div
-                  class="MuiDialog-root modal-root"
-                  role="presentation"
-                  style="position: fixed; z-index: 1300; right: 0px; bottom: 0px; top: 0px; left: 0px;"
-                >
-                  <div
-                    aria-hidden="true"
-                    class="MuiBackdrop-root"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                  />
-                  <div
-                    data-test="sentinelStart"
-                    tabindex="0"
-                  />
-                  <div
-                    class="MuiDialog-container MuiDialog-scrollPaper"
-                    role="none presentation"
-                    style="opacity: 1; webkit-transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms; transition: opacity 225ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;"
-                    tabindex="-1"
-                  >
-                    <div
-                      aria-labelledby="accessibility-title"
-                      class="MuiPaper-root MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                      role="dialog"
-                    >
-                      <div
-                        id="accessibility-title"
-                      >
-                        Bold title
-                      </div>
-                      <button
-                        aria-label="feedback.accessibility.button_close"
-                        class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                        tabindex="0"
-                        type="button"
-                      >
-                        <span
-                          class="MuiIconButton-label"
-                        >
-                          <svg
-                            class="styles__icon___23x3R"
-                            height="16"
-                            width="16"
-                          >
-                            <use
-                              xlink:href="#test-file-stub"
-                            />
-                          </svg>
-                        </span>
-                        <span
-                          class="MuiTouchRipple-root"
-                        />
-                      </button>
-                      <div
-                        class="customPopupModal"
-                      >
-                        <svg
-                          aria-hidden="true"
-                          class="styles__icon___23x3R"
-                          height="100"
-                          width="100"
-                        >
-                          <use
-                            xlink:href="#test-file-stub"
-                          />
-                        </svg>
-                        <div
-                          class="customPopup-title text-20-bold"
-                        >
-                          Bold title
-                        </div>
-                        <div
-                          class="customPopup-content text-16-normal"
-                        >
-                          Interesting description
-                        </div>
-                        <button
-                          class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                          tabindex="0"
-                          type="button"
-                        >
-                          <span
-                            class="MuiButton-label"
-                          >
-                            consumption.partner_issue_modal.ok
-                          </span>
-                          <span
-                            class="MuiTouchRipple-root"
-                          />
-                        </button>
-                      </div>
-                    </div>
-                  </div>
-                  <div
-                    data-test="sentinelEnd"
-                    tabindex="0"
-                  />
-                </div>
-              </body>
-            }
+          Bold title
+        </div>
+        <button
+          aria-label="feedback.accessibility.button_close"
+          class="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
+          tabindex="0"
+          type="button"
+        >
+          <span
+            class="MuiIconButton-label"
+          >
+            <svg
+              class="styles__icon___23x3R"
+              height="16"
+              width="16"
+            >
+              <use
+                xlink:href="#test-file-stub"
+              />
+            </svg>
+          </span>
+          <span
+            class="MuiTouchRipple-root"
+          />
+        </button>
+        <div
+          class="customPopupModal"
+        >
+          <svg
+            aria-hidden="true"
+            class="styles__icon___23x3R"
+            height="100"
+            width="100"
+          >
+            <use
+              xlink:href="#test-file-stub"
+            />
+          </svg>
+          <div
+            class="customPopup-title text-20-bold"
+            data-testid="title"
+          >
+            Bold title
+          </div>
+          <div
+            class="customPopup-content text-16-normal"
+            data-testid="description"
+          >
+            Interesting description
+          </div>
+          <button
+            class="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
+            tabindex="0"
+            type="button"
           >
-            <div
-              className="MuiDialog-root modal-root"
-              onKeyDown={[Function]}
-              role="presentation"
-              style={
-                Object {
-                  "bottom": 0,
-                  "left": 0,
-                  "position": "fixed",
-                  "right": 0,
-                  "top": 0,
-                  "zIndex": 1300,
-                }
-              }
+            <span
+              class="MuiButton-label"
             >
-              <WithStyles(ForwardRef(Backdrop))
-                onClick={[Function]}
-                open={true}
-                transitionDuration={
-                  Object {
-                    "enter": 225,
-                    "exit": 195,
-                  }
-                }
-              >
-                <ForwardRef(Backdrop)
-                  classes={
-                    Object {
-                      "invisible": "MuiBackdrop-invisible",
-                      "root": "MuiBackdrop-root",
-                    }
-                  }
-                  onClick={[Function]}
-                  open={true}
-                  transitionDuration={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <ForwardRef(Fade)
-                    in={true}
-                    onClick={[Function]}
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                  >
-                    <Transition
-                      appear={true}
-                      enter={true}
-                      exit={true}
-                      in={true}
-                      mountOnEnter={false}
-                      onClick={[Function]}
-                      onEnter={[Function]}
-                      onEntered={[Function]}
-                      onEntering={[Function]}
-                      onExit={[Function]}
-                      onExited={[Function]}
-                      onExiting={[Function]}
-                      timeout={
-                        Object {
-                          "enter": 225,
-                          "exit": 195,
-                        }
-                      }
-                      unmountOnExit={false}
-                    >
-                      <div
-                        aria-hidden={true}
-                        className="MuiBackdrop-root"
-                        onClick={[Function]}
-                        style={
-                          Object {
-                            "opacity": 1,
-                            "visibility": undefined,
-                          }
-                        }
-                      />
-                    </Transition>
-                  </ForwardRef(Fade)>
-                </ForwardRef(Backdrop)>
-              </WithStyles(ForwardRef(Backdrop))>
-              <Unstable_TrapFocus
-                disableAutoFocus={false}
-                disableEnforceFocus={false}
-                disableRestoreFocus={false}
-                getDoc={[Function]}
-                isEnabled={[Function]}
-                open={true}
-              >
-                <div
-                  data-test="sentinelStart"
-                  tabIndex={0}
-                />
-                <ForwardRef(Fade)
-                  appear={true}
-                  in={true}
-                  onEnter={[Function]}
-                  onExited={[Function]}
-                  role="none presentation"
-                  tabIndex="-1"
-                  timeout={
-                    Object {
-                      "enter": 225,
-                      "exit": 195,
-                    }
-                  }
-                >
-                  <Transition
-                    appear={true}
-                    enter={true}
-                    exit={true}
-                    in={true}
-                    mountOnEnter={false}
-                    onEnter={[Function]}
-                    onEntered={[Function]}
-                    onEntering={[Function]}
-                    onExit={[Function]}
-                    onExited={[Function]}
-                    onExiting={[Function]}
-                    role="none presentation"
-                    tabIndex="-1"
-                    timeout={
-                      Object {
-                        "enter": 225,
-                        "exit": 195,
-                      }
-                    }
-                    unmountOnExit={false}
-                  >
-                    <div
-                      className="MuiDialog-container MuiDialog-scrollPaper"
-                      onMouseDown={[Function]}
-                      onMouseUp={[Function]}
-                      role="none presentation"
-                      style={
-                        Object {
-                          "opacity": 1,
-                          "visibility": undefined,
-                        }
-                      }
-                      tabIndex="-1"
-                    >
-                      <WithStyles(ForwardRef(Paper))
-                        aria-labelledby="accessibility-title"
-                        className="MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                        elevation={24}
-                        role="dialog"
-                      >
-                        <ForwardRef(Paper)
-                          aria-labelledby="accessibility-title"
-                          className="MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm"
-                          classes={
-                            Object {
-                              "elevation0": "MuiPaper-elevation0",
-                              "elevation1": "MuiPaper-elevation1",
-                              "elevation10": "MuiPaper-elevation10",
-                              "elevation11": "MuiPaper-elevation11",
-                              "elevation12": "MuiPaper-elevation12",
-                              "elevation13": "MuiPaper-elevation13",
-                              "elevation14": "MuiPaper-elevation14",
-                              "elevation15": "MuiPaper-elevation15",
-                              "elevation16": "MuiPaper-elevation16",
-                              "elevation17": "MuiPaper-elevation17",
-                              "elevation18": "MuiPaper-elevation18",
-                              "elevation19": "MuiPaper-elevation19",
-                              "elevation2": "MuiPaper-elevation2",
-                              "elevation20": "MuiPaper-elevation20",
-                              "elevation21": "MuiPaper-elevation21",
-                              "elevation22": "MuiPaper-elevation22",
-                              "elevation23": "MuiPaper-elevation23",
-                              "elevation24": "MuiPaper-elevation24",
-                              "elevation3": "MuiPaper-elevation3",
-                              "elevation4": "MuiPaper-elevation4",
-                              "elevation5": "MuiPaper-elevation5",
-                              "elevation6": "MuiPaper-elevation6",
-                              "elevation7": "MuiPaper-elevation7",
-                              "elevation8": "MuiPaper-elevation8",
-                              "elevation9": "MuiPaper-elevation9",
-                              "outlined": "MuiPaper-outlined",
-                              "root": "MuiPaper-root",
-                              "rounded": "MuiPaper-rounded",
-                            }
-                          }
-                          elevation={24}
-                          role="dialog"
-                        >
-                          <div
-                            aria-labelledby="accessibility-title"
-                            className="MuiPaper-root MuiDialog-paper modal-paper customPopupRoot MuiDialog-paperScrollPaper MuiDialog-paperWidthSm MuiPaper-elevation24 MuiPaper-rounded"
-                            role="dialog"
-                          >
-                            <div
-                              id="accessibility-title"
-                            >
-                              Bold title
-                            </div>
-                            <WithStyles(ForwardRef(IconButton))
-                              aria-label="feedback.accessibility.button_close"
-                              className="modal-paper-close-button"
-                              onClick={[MockFunction]}
-                            >
-                              <ForwardRef(IconButton)
-                                aria-label="feedback.accessibility.button_close"
-                                className="modal-paper-close-button"
-                                classes={
-                                  Object {
-                                    "colorInherit": "MuiIconButton-colorInherit",
-                                    "colorPrimary": "MuiIconButton-colorPrimary",
-                                    "colorSecondary": "MuiIconButton-colorSecondary",
-                                    "disabled": "Mui-disabled",
-                                    "edgeEnd": "MuiIconButton-edgeEnd",
-                                    "edgeStart": "MuiIconButton-edgeStart",
-                                    "label": "MuiIconButton-label",
-                                    "root": "MuiIconButton-root",
-                                    "sizeSmall": "MuiIconButton-sizeSmall",
-                                  }
-                                }
-                                onClick={[MockFunction]}
-                              >
-                                <WithStyles(ForwardRef(ButtonBase))
-                                  aria-label="feedback.accessibility.button_close"
-                                  centerRipple={true}
-                                  className="MuiIconButton-root modal-paper-close-button"
-                                  disabled={false}
-                                  focusRipple={true}
-                                  onClick={[MockFunction]}
-                                >
-                                  <ForwardRef(ButtonBase)
-                                    aria-label="feedback.accessibility.button_close"
-                                    centerRipple={true}
-                                    className="MuiIconButton-root modal-paper-close-button"
-                                    classes={
-                                      Object {
-                                        "disabled": "Mui-disabled",
-                                        "focusVisible": "Mui-focusVisible",
-                                        "root": "MuiButtonBase-root",
-                                      }
-                                    }
-                                    disabled={false}
-                                    focusRipple={true}
-                                    onClick={[MockFunction]}
-                                  >
-                                    <button
-                                      aria-label="feedback.accessibility.button_close"
-                                      className="MuiButtonBase-root MuiIconButton-root modal-paper-close-button"
-                                      disabled={false}
-                                      onBlur={[Function]}
-                                      onClick={[MockFunction]}
-                                      onDragLeave={[Function]}
-                                      onFocus={[Function]}
-                                      onKeyDown={[Function]}
-                                      onKeyUp={[Function]}
-                                      onMouseDown={[Function]}
-                                      onMouseLeave={[Function]}
-                                      onMouseUp={[Function]}
-                                      onTouchEnd={[Function]}
-                                      onTouchMove={[Function]}
-                                      onTouchStart={[Function]}
-                                      tabIndex={0}
-                                      type="button"
-                                    >
-                                      <span
-                                        className="MuiIconButton-label"
-                                      >
-                                        <Icon
-                                          icon="test-file-stub"
-                                          size={16}
-                                          spin={false}
-                                        >
-                                          <Component
-                                            className="styles__icon___23x3R"
-                                            height={16}
-                                            style={Object {}}
-                                            width={16}
-                                          >
-                                            <svg
-                                              className="styles__icon___23x3R"
-                                              height={16}
-                                              style={Object {}}
-                                              width={16}
-                                            >
-                                              <use
-                                                xlinkHref="#test-file-stub"
-                                              />
-                                            </svg>
-                                          </Component>
-                                        </Icon>
-                                      </span>
-                                      <WithStyles(memo)
-                                        center={true}
-                                      >
-                                        <ForwardRef(TouchRipple)
-                                          center={true}
-                                          classes={
-                                            Object {
-                                              "child": "MuiTouchRipple-child",
-                                              "childLeaving": "MuiTouchRipple-childLeaving",
-                                              "childPulsate": "MuiTouchRipple-childPulsate",
-                                              "ripple": "MuiTouchRipple-ripple",
-                                              "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                              "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                              "root": "MuiTouchRipple-root",
-                                            }
-                                          }
-                                        >
-                                          <span
-                                            className="MuiTouchRipple-root"
-                                          >
-                                            <TransitionGroup
-                                              childFactory={[Function]}
-                                              component={null}
-                                              exit={true}
-                                            />
-                                          </span>
-                                        </ForwardRef(TouchRipple)>
-                                      </WithStyles(memo)>
-                                    </button>
-                                  </ForwardRef(ButtonBase)>
-                                </WithStyles(ForwardRef(ButtonBase))>
-                              </ForwardRef(IconButton)>
-                            </WithStyles(ForwardRef(IconButton))>
-                            <div
-                              className="customPopupModal"
-                            >
-                              <StyledIcon
-                                icon="test-file-stub"
-                                size={100}
-                              >
-                                <Icon
-                                  aria-hidden={true}
-                                  icon="test-file-stub"
-                                  size={100}
-                                  spin={false}
-                                >
-                                  <Component
-                                    aria-hidden={true}
-                                    className="styles__icon___23x3R"
-                                    height={100}
-                                    style={Object {}}
-                                    width={100}
-                                  >
-                                    <svg
-                                      aria-hidden={true}
-                                      className="styles__icon___23x3R"
-                                      height={100}
-                                      style={Object {}}
-                                      width={100}
-                                    >
-                                      <use
-                                        xlinkHref="#test-file-stub"
-                                      />
-                                    </svg>
-                                  </Component>
-                                </Icon>
-                              </StyledIcon>
-                              <div
-                                className="customPopup-title text-20-bold"
-                              >
-                                Bold title
-                              </div>
-                              <div
-                                className="customPopup-content text-16-normal"
-                                dangerouslySetInnerHTML={
-                                  Object {
-                                    "__html": "Interesting description",
-                                  }
-                                }
-                              />
-                              <WithStyles(ForwardRef(Button))
-                                className="btnPrimary"
-                                onClick={[MockFunction]}
-                              >
-                                <ForwardRef(Button)
-                                  className="btnPrimary"
-                                  classes={
-                                    Object {
-                                      "colorInherit": "MuiButton-colorInherit",
-                                      "contained": "MuiButton-contained",
-                                      "containedPrimary": "MuiButton-containedPrimary",
-                                      "containedSecondary": "MuiButton-containedSecondary",
-                                      "containedSizeLarge": "MuiButton-containedSizeLarge",
-                                      "containedSizeSmall": "MuiButton-containedSizeSmall",
-                                      "disableElevation": "MuiButton-disableElevation",
-                                      "disabled": "Mui-disabled",
-                                      "endIcon": "MuiButton-endIcon",
-                                      "focusVisible": "Mui-focusVisible",
-                                      "fullWidth": "MuiButton-fullWidth",
-                                      "iconSizeLarge": "MuiButton-iconSizeLarge",
-                                      "iconSizeMedium": "MuiButton-iconSizeMedium",
-                                      "iconSizeSmall": "MuiButton-iconSizeSmall",
-                                      "label": "MuiButton-label",
-                                      "outlined": "MuiButton-outlined",
-                                      "outlinedPrimary": "MuiButton-outlinedPrimary",
-                                      "outlinedSecondary": "MuiButton-outlinedSecondary",
-                                      "outlinedSizeLarge": "MuiButton-outlinedSizeLarge",
-                                      "outlinedSizeSmall": "MuiButton-outlinedSizeSmall",
-                                      "root": "MuiButton-root",
-                                      "sizeLarge": "MuiButton-sizeLarge",
-                                      "sizeSmall": "MuiButton-sizeSmall",
-                                      "startIcon": "MuiButton-startIcon",
-                                      "text": "MuiButton-text",
-                                      "textPrimary": "MuiButton-textPrimary",
-                                      "textSecondary": "MuiButton-textSecondary",
-                                      "textSizeLarge": "MuiButton-textSizeLarge",
-                                      "textSizeSmall": "MuiButton-textSizeSmall",
-                                    }
-                                  }
-                                  onClick={[MockFunction]}
-                                >
-                                  <WithStyles(ForwardRef(ButtonBase))
-                                    className="MuiButton-root MuiButton-text btnPrimary"
-                                    component="button"
-                                    disabled={false}
-                                    focusRipple={true}
-                                    focusVisibleClassName="Mui-focusVisible"
-                                    onClick={[MockFunction]}
-                                    type="button"
-                                  >
-                                    <ForwardRef(ButtonBase)
-                                      className="MuiButton-root MuiButton-text btnPrimary"
-                                      classes={
-                                        Object {
-                                          "disabled": "Mui-disabled",
-                                          "focusVisible": "Mui-focusVisible",
-                                          "root": "MuiButtonBase-root",
-                                        }
-                                      }
-                                      component="button"
-                                      disabled={false}
-                                      focusRipple={true}
-                                      focusVisibleClassName="Mui-focusVisible"
-                                      onClick={[MockFunction]}
-                                      type="button"
-                                    >
-                                      <button
-                                        className="MuiButtonBase-root MuiButton-root MuiButton-text btnPrimary"
-                                        disabled={false}
-                                        onBlur={[Function]}
-                                        onClick={[MockFunction]}
-                                        onDragLeave={[Function]}
-                                        onFocus={[Function]}
-                                        onKeyDown={[Function]}
-                                        onKeyUp={[Function]}
-                                        onMouseDown={[Function]}
-                                        onMouseLeave={[Function]}
-                                        onMouseUp={[Function]}
-                                        onTouchEnd={[Function]}
-                                        onTouchMove={[Function]}
-                                        onTouchStart={[Function]}
-                                        tabIndex={0}
-                                        type="button"
-                                      >
-                                        <span
-                                          className="MuiButton-label"
-                                        >
-                                          consumption.partner_issue_modal.ok
-                                        </span>
-                                        <WithStyles(memo)
-                                          center={false}
-                                        >
-                                          <ForwardRef(TouchRipple)
-                                            center={false}
-                                            classes={
-                                              Object {
-                                                "child": "MuiTouchRipple-child",
-                                                "childLeaving": "MuiTouchRipple-childLeaving",
-                                                "childPulsate": "MuiTouchRipple-childPulsate",
-                                                "ripple": "MuiTouchRipple-ripple",
-                                                "ripplePulsate": "MuiTouchRipple-ripplePulsate",
-                                                "rippleVisible": "MuiTouchRipple-rippleVisible",
-                                                "root": "MuiTouchRipple-root",
-                                              }
-                                            }
-                                          >
-                                            <span
-                                              className="MuiTouchRipple-root"
-                                            >
-                                              <TransitionGroup
-                                                childFactory={[Function]}
-                                                component={null}
-                                                exit={true}
-                                              />
-                                            </span>
-                                          </ForwardRef(TouchRipple)>
-                                        </WithStyles(memo)>
-                                      </button>
-                                    </ForwardRef(ButtonBase)>
-                                  </WithStyles(ForwardRef(ButtonBase))>
-                                </ForwardRef(Button)>
-                              </WithStyles(ForwardRef(Button))>
-                            </div>
-                          </div>
-                        </ForwardRef(Paper)>
-                      </WithStyles(ForwardRef(Paper))>
-                    </div>
-                  </Transition>
-                </ForwardRef(Fade)>
-                <div
-                  data-test="sentinelEnd"
-                  tabIndex={0}
-                />
-              </Unstable_TrapFocus>
-            </div>
-          </Portal>
-        </ForwardRef(Portal)>
-      </ForwardRef(Modal)>
-    </ForwardRef(Dialog)>
-  </WithStyles(ForwardRef(Dialog))>
-</CustomPopupModal>
+              consumption.partner_issue_modal.ok
+            </span>
+            <span
+              class="MuiTouchRipple-root"
+            />
+          </button>
+        </div>
+      </div>
+    </div>
+    <div
+      data-test="sentinelEnd"
+      tabindex="0"
+    />
+  </div>
+</body>
 `;
diff --git a/tests/jestLib/setupTests.ts b/tests/jestLib/setupTests.ts
index a71f0dfd2..c89e5c98b 100644
--- a/tests/jestLib/setupTests.ts
+++ b/tests/jestLib/setupTests.ts
@@ -1,6 +1,7 @@
 require('babel-polyfill')
 require('jest-canvas-mock')
 
+import '@testing-library/jest-dom'
 import { configure } from 'enzyme'
 import Adapter from 'enzyme-adapter-react-16'
 import mockClient from 'tests/__mocks__/client.mock'
diff --git a/yarn.lock b/yarn.lock
index 0d8788ec8..514fa6899 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -7,6 +7,11 @@
   resolved "https://registry.yarnpkg.com/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz#bd9154aec9983f77b3a034ecaa015c2e4201f6cf"
   integrity sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==
 
+"@adobe/css-tools@^4.3.0":
+  version "4.3.1"
+  resolved "https://registry.yarnpkg.com/@adobe/css-tools/-/css-tools-4.3.1.tgz#abfccb8ca78075a2b6187345c26243c1a0842f28"
+  integrity sha512-/62yikz7NLScCGAAST5SHdnjaDJQBDq0M2muyRTpf2VQhw6StBg2ALiu73zSJQ4fMVLA+0uBhBHAle7Wg+2kSg==
+
 "@alloc/types@^1.2.1":
   version "1.3.0"
   resolved "https://registry.yarnpkg.com/@alloc/types/-/types-1.3.0.tgz#904245b8d3260a4b7d8a801c12501968f64fac08"
@@ -50,6 +55,14 @@
   dependencies:
     "@babel/highlight" "^7.18.6"
 
+"@babel/code-frame@^7.10.4":
+  version "7.22.13"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.22.13.tgz#e3c1c099402598483b7a8c46a721d1038803755e"
+  integrity sha512-XktuhWlJ5g+3TJXc5upd9Ks1HutSArik6jf2eAjYFyIOf4ej3RN+184cZbzDvbPnuTJIUhPKKJE3cIsYTiAT3w==
+  dependencies:
+    "@babel/highlight" "^7.22.13"
+    chalk "^2.4.2"
+
 "@babel/compat-data@^7.13.11", "@babel/compat-data@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.18.6.tgz#8b37d24e88e8e21c499d4328db80577d8882fa53"
@@ -444,6 +457,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.18.6.tgz#9c97e30d31b2b8c72a1d08984f2ca9b574d7a076"
   integrity sha512-MmetCkz9ej86nJQV+sFCxoGGrUbU3q02kgLciwkrt9QqEB7cP39oKEY0PakknEO0Gu20SskMRi+AYZ3b1TpN9g==
 
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-option@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.18.6.tgz#bf0d2b5a509b1f336099e4ff36e1a63aa5db4db8"
@@ -496,6 +514,15 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.22.13":
+  version "7.22.20"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.22.20.tgz#4ca92b71d80554b01427815e06f2df965b9c1f54"
+  integrity sha512-dkdMCN3py0+ksCgYmGG8jKeGA/8Tk+gJwSYYlFGxG5lmhfKNoAy004YpLxpS1W2J8m/EK2Ew+yOs9pVRwO89mg==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.18.6", "@babel/parser@^7.2.2", "@babel/parser@^7.7.0", "@babel/parser@^7.9.0":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.18.6.tgz#845338edecad65ebffef058d3be851f1d28a63bc"
@@ -2525,6 +2552,48 @@
   dependencies:
     "@sinonjs/commons" "^1.7.0"
 
+"@testing-library/dom@^8.0.0":
+  version "8.20.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-8.20.1.tgz#2e52a32e46fc88369eef7eef634ac2a192decd9f"
+  integrity sha512-/DiOQ5xBxgdYRC8LNk7U+RWat0S3qRLeIw3ZIkMQ9kkVlRmwD/Eg8k8CqIpD6GW7u20JIUOfMKbxtiLutpjQ4g==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^5.0.1"
+    aria-query "5.1.3"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.5.0"
+    pretty-format "^27.0.2"
+
+"@testing-library/dom@^9.3.3":
+  version "9.3.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-9.3.3.tgz#108c23a5b0ef51121c26ae92eb3179416b0434f5"
+  integrity sha512-fB0R+fa3AUqbLHWyxXa2kGVtf1Fe1ZZFr0Zp6AIbIAzXb2mKbEXl+PCQNUOaq5lbTab5tfctfXRNsWXxa2f7Aw==
+  dependencies:
+    "@babel/code-frame" "^7.10.4"
+    "@babel/runtime" "^7.12.5"
+    "@types/aria-query" "^5.0.1"
+    aria-query "5.1.3"
+    chalk "^4.1.0"
+    dom-accessibility-api "^0.5.9"
+    lz-string "^1.5.0"
+    pretty-format "^27.0.2"
+
+"@testing-library/jest-dom@^6.1.3":
+  version "6.1.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-dom/-/jest-dom-6.1.3.tgz#443118c9e4043f96396f120de2c7122504a079c5"
+  integrity sha512-YzpjRHoCBWPzpPNtg6gnhasqtE/5O4qz8WCwDEaxtfnPO6gkaLrnuXusrGSPyhIGPezr1HM7ZH0CFaUTY9PJEQ==
+  dependencies:
+    "@adobe/css-tools" "^4.3.0"
+    "@babel/runtime" "^7.9.2"
+    aria-query "^5.0.0"
+    chalk "^3.0.0"
+    css.escape "^1.5.1"
+    dom-accessibility-api "^0.5.6"
+    lodash "^4.17.15"
+    redent "^3.0.0"
+
 "@testing-library/react-hooks@^8.0.0":
   version "8.0.1"
   resolved "https://registry.yarnpkg.com/@testing-library/react-hooks/-/react-hooks-8.0.1.tgz#0924bbd5b55e0c0c0502d1754657ada66947ca12"
@@ -2533,6 +2602,20 @@
     "@babel/runtime" "^7.12.5"
     react-error-boundary "^3.1.0"
 
+"@testing-library/react@^12.1.0":
+  version "12.1.5"
+  resolved "https://registry.yarnpkg.com/@testing-library/react/-/react-12.1.5.tgz#bb248f72f02a5ac9d949dea07279095fa577963b"
+  integrity sha512-OfTXCJUFgjd/digLUuPxa0+/3ZxsQmE7ub9kcbW/wi96Bh3o/p5vrETcBGfP17NWPGqeYYl5LTRpwyGoMC4ysg==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+    "@testing-library/dom" "^8.0.0"
+    "@types/react-dom" "<18.0.0"
+
+"@testing-library/user-event@^14.5.1":
+  version "14.5.1"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-14.5.1.tgz#27337d72046d5236b32fd977edee3f74c71d332f"
+  integrity sha512-UCcUKrUYGj7ClomOo2SpNVvx4/fkd/2BbIHDCle8A0ax+P3bU7yJwDBDrS6ZwdTMARWTGODX1hEsCcO+7beJjg==
+
 "@tokenizer/token@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@tokenizer/token/-/token-0.3.0.tgz#fe98a93fe789247e998c75e74e9c7c63217aa276"
@@ -2543,6 +2626,11 @@
   resolved "https://registry.yarnpkg.com/@tootallnate/once/-/once-1.1.2.tgz#ccb91445360179a04e7fe6aff78c00ffc1eeaf82"
   integrity sha512-RbzJvlNzmRq5c3O09UipeuXno4tA1FE6ikOjxZK0tuxVv3412l64l5t1W5pj4+rJq9vpkm/kwiR07aZXnsKPxw==
 
+"@types/aria-query@^5.0.1":
+  version "5.0.2"
+  resolved "https://registry.yarnpkg.com/@types/aria-query/-/aria-query-5.0.2.tgz#6f1225829d89794fd9f891989c9ce667422d7f64"
+  integrity sha512-PHKZuMN+K5qgKIWhBodXzQslTo5P+K/6LqeKXS6O/4liIDdZqaX5RXrCK++LAw+y/nptN48YmUMFiQHRSWYwtQ==
+
 "@types/babel__core@^7.0.0", "@types/babel__core@^7.1.7":
   version "7.1.19"
   resolved "https://registry.yarnpkg.com/@types/babel__core/-/babel__core-7.1.19.tgz#7b497495b7d1b4812bdb9d02804d0576f43ee460"
@@ -2985,6 +3073,13 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.5.tgz#75a2a8e7d8ab4b230414505d92335d1dcb53a6df"
   integrity sha512-L28j2FcJfSZOnL1WBjDYp2vUHCeIFlyYI/53EwD/rKUBQ7MtUUfbQWiyKJGpcnv4/WgrhWsFKrcPstcAt/J0tQ==
 
+"@types/react-dom@<18.0.0":
+  version "17.0.21"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.21.tgz#85d56965483ce4850f5f03f9234e54a1f47786e5"
+  integrity sha512-3rQEFUNUUz2MYiRwJJj6UekcW7rFLOtmK7ajQP7qJpjNdggInl3I/xM4I3Hq1yYPdCGVMgax1gZsB7BBTtayXg==
+  dependencies:
+    "@types/react" "^17"
+
 "@types/react-dom@^16.9.8":
   version "16.9.16"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-16.9.16.tgz#c591f2ed1c6f32e9759dfa6eb4abfd8041f29e39"
@@ -3051,6 +3146,15 @@
     "@types/scheduler" "*"
     csstype "^3.0.2"
 
+"@types/react@^17":
+  version "17.0.67"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.67.tgz#1c224738f203829a4692aa48e33a732c34fd014a"
+  integrity sha512-zE76EIJ0Y58Oy9yDX/9csb/NuKjt0Eq2YgWb/8Wxo91YmuLzzbyiRoaqJE9h8iDlsT7n35GdpoLomHlaB1kFbg==
+  dependencies:
+    "@types/prop-types" "*"
+    "@types/scheduler" "*"
+    csstype "^3.0.2"
+
 "@types/redux-mock-store@^1.0.2":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@types/redux-mock-store/-/redux-mock-store-1.0.3.tgz#895de4a364bc4836661570aec82f2eef5989d1fb"
@@ -3708,6 +3812,20 @@ argsarray@0.0.1:
   resolved "https://registry.yarnpkg.com/argsarray/-/argsarray-0.0.1.tgz#6e7207b4ecdb39b0af88303fa5ae22bda8df61cb"
   integrity sha512-u96dg2GcAKtpTrBdDoFIM7PjcBA+6rSP0OR94MOReNRyUECL6MtQt5XXmRr4qrftYaef9+l5hcpO5te7sML1Cg==
 
+aria-query@5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.1.3.tgz#19db27cd101152773631396f7a95a3b58c22c35e"
+  integrity sha512-R5iJ5lkuHybztUfuOAznmboyjWq8O6sqNqtK7CLOqdydi54VNbORp49mb14KbWgG1QD3JFO9hJdZ+y4KutfdOQ==
+  dependencies:
+    deep-equal "^2.0.5"
+
+aria-query@^5.0.0:
+  version "5.3.0"
+  resolved "https://registry.yarnpkg.com/aria-query/-/aria-query-5.3.0.tgz#650c569e41ad90b51b3d7df5e5eed1c7549c103e"
+  integrity sha512-b0P0sZPKtyu8HkeRAfCq0IfURZK+SuwMjY1UXGBU27wpAiTwQAIlq56IbIO+ytk/JjS1fMR14ee5WBBfKi5J6A==
+  dependencies:
+    dequal "^2.0.3"
+
 arr-diff@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/arr-diff/-/arr-diff-4.0.0.tgz#d6461074febfec71e7e15235761a329a5dc7c520"
@@ -4836,7 +4954,7 @@ chalk@^2.0.0, chalk@^2.1.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2:
     escape-string-regexp "^1.0.5"
     supports-color "^5.3.0"
 
-chalk@^4.0.0, chalk@^4.1.1:
+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==
@@ -6361,6 +6479,11 @@ css-what@^6.0.1, css-what@^6.1.0:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
   integrity sha512-HTUrgRJ7r4dsZKU6GjmpfRK1O76h97Z8MfS1G0FozR+oF2kG6Vfe8JE6zwrkbxigziPHinCJ+gCPjA9EaBDtRw==
 
+css.escape@^1.5.1:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha512-YUifsXXuknHlUsmlgyY0PKzgPOr7/FjCePfHNt0jxm83wHZi44VDMQ7/fGNkjY3/jV1MC+1CmZbaHzugyeRtpg==
+
 css@^2.0.0:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -6792,6 +6915,30 @@ deep-equal@^1.0.1:
     object-keys "^1.1.1"
     regexp.prototype.flags "^1.2.0"
 
+deep-equal@^2.0.5:
+  version "2.2.2"
+  resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.2.tgz#9b2635da569a13ba8e1cc159c2f744071b115daa"
+  integrity sha512-xjVyBf0w5vH0I42jdAZzOKVldmPgSulmiyPRywoyq7HXC9qdgo17kxJE+rdnif5Tz6+pIrpJI8dCpMNLIGkUiA==
+  dependencies:
+    array-buffer-byte-length "^1.0.0"
+    call-bind "^1.0.2"
+    es-get-iterator "^1.1.3"
+    get-intrinsic "^1.2.1"
+    is-arguments "^1.1.1"
+    is-array-buffer "^3.0.2"
+    is-date-object "^1.0.5"
+    is-regex "^1.1.4"
+    is-shared-array-buffer "^1.0.2"
+    isarray "^2.0.5"
+    object-is "^1.1.5"
+    object-keys "^1.1.1"
+    object.assign "^4.1.4"
+    regexp.prototype.flags "^1.5.0"
+    side-channel "^1.0.4"
+    which-boxed-primitive "^1.0.2"
+    which-collection "^1.0.1"
+    which-typed-array "^1.1.9"
+
 deep-equal@~0.2.1:
   version "0.2.2"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-0.2.2.tgz#84b745896f34c684e98f2ce0e42abaf43bba017d"
@@ -6845,6 +6992,15 @@ defaults@^1.0.3:
   dependencies:
     clone "^1.0.2"
 
+define-data-property@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.0.tgz#0db13540704e1d8d479a0656cf781267531b9451"
+  integrity sha512-UzGwzcjyv3OtAvolTj1GoyNYzfFR+iqbGjcnBEENZVCpM4/Ng1yhGNvS3lR/xDS74Tb2wGG9WzNSNIOS9UVb2g==
+  dependencies:
+    get-intrinsic "^1.2.1"
+    gopd "^1.0.1"
+    has-property-descriptors "^1.0.0"
+
 define-lazy-prop@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/define-lazy-prop/-/define-lazy-prop-2.0.0.tgz#3f7ae421129bcaaac9bc74905c98a0009ec9ee7f"
@@ -6863,6 +7019,15 @@ define-properties@^1.1.2, define-properties@^1.1.3, define-properties@^1.1.4:
     has-property-descriptors "^1.0.0"
     object-keys "^1.1.1"
 
+define-properties@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
+  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
+  dependencies:
+    define-data-property "^1.0.1"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
+
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -6918,6 +7083,11 @@ depd@~1.1.2:
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
 
+dequal@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/dequal/-/dequal-2.0.3.tgz#2644214f1997d39ed0ee0ece72335490a7ac67be"
+  integrity sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==
+
 des.js@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/des.js/-/des.js-1.0.1.tgz#5382142e1bdc53f85d86d53e5f4aa7deb91e0843"
@@ -7038,6 +7208,11 @@ doctrine@^3.0.0:
   dependencies:
     esutils "^2.0.2"
 
+dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
+  version "0.5.16"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
+  integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
+
 dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/dom-converter/-/dom-converter-0.2.0.tgz#6721a9daee2e293682955b6afe416771627bb768"
@@ -7500,6 +7675,21 @@ es-array-method-boxes-properly@^1.0.0:
   resolved "https://registry.yarnpkg.com/es-array-method-boxes-properly/-/es-array-method-boxes-properly-1.0.0.tgz#873f3e84418de4ee19c5be752990b2e44718d09e"
   integrity sha512-wd6JXUmyHmt8T5a2xreUwKcGPq6f1f+WwIJkijUqiGcJz1qqnZgP6XIK+QyIWU5lT7imeNxUll48bziG+TSYcA==
 
+es-get-iterator@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/es-get-iterator/-/es-get-iterator-1.1.3.tgz#3ef87523c5d464d41084b2c3c9c214f1199763d6"
+  integrity sha512-sPZmqHBe6JIiTfN5q2pEi//TwxmAFHwj/XEuYjTuse78i8KxaqMTTzxPoFKuzRpDpTJ+0NAbpfenkmH2rePtuw==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.3"
+    has-symbols "^1.0.3"
+    is-arguments "^1.1.1"
+    is-map "^2.0.2"
+    is-set "^2.0.2"
+    is-string "^1.0.7"
+    isarray "^2.0.5"
+    stop-iteration-iterator "^1.0.0"
+
 es-set-tostringtag@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/es-set-tostringtag/-/es-set-tostringtag-2.0.1.tgz#338d502f6f674301d710b80c8592de8a15f09cd8"
@@ -7653,7 +7843,7 @@ eslint-plugin-prettier@3.1.2:
   dependencies:
     prettier-linter-helpers "^1.0.0"
 
-eslint-plugin-prettier@5.0.0:
+eslint-plugin-prettier@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/eslint-plugin-prettier/-/eslint-plugin-prettier-5.0.0.tgz#6887780ed95f7708340ec79acfdf60c35b9be57a"
   integrity sha512-AgaZCVuYDXHUGxj/ZGu1u8H8CYgDY3iG6w5kUFw4AzMVXzB7VvbKgYR4nATIN+OvUrghMbiDLeimVjVY5ilq3w==
@@ -8813,7 +9003,7 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha512-dsKNQNdj6xA3T+QlADDA7mOSlX0qiMINjn0cgr+eGHGsbSHzTabcIogz2+p/iqP1Xs6EP/sS2SbqH+brGTbq0g==
 
-functions-have-names@^1.2.2:
+functions-have-names@^1.2.2, functions-have-names@^1.2.3:
   version "1.2.3"
   resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
   integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
@@ -8857,6 +9047,16 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
+get-intrinsic@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
+  integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
@@ -9815,7 +10015,7 @@ internal-slot@^1.0.3:
     has "^1.0.3"
     side-channel "^1.0.4"
 
-internal-slot@^1.0.5:
+internal-slot@^1.0.4, internal-slot@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.5.tgz#f2a2ee21f668f8627a4667f309dc0f4fb6674986"
   integrity sha512-Y+R5hJrzs52QCG2laLn4udYVnxsfny9CpOhNhUvk/SSSVyF6T27FzRbF0sroPidSu3X8oEAkOn2K804mjpt6UQ==
@@ -9898,7 +10098,7 @@ is-alphanumerical@^1.0.0:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
 
-is-arguments@^1.0.4:
+is-arguments@^1.0.4, is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
   integrity sha512-8Q7EARjzEnKpt/PCD7e1cgUS0a6X8u5tdSiMqXhojOdoV9TsMsiO+9VLC5vAmO8N7/GmXn7yjR8qnA6bVAEzfA==
@@ -9999,7 +10199,7 @@ is-data-descriptor@^1.0.0:
   dependencies:
     kind-of "^6.0.0"
 
-is-date-object@^1.0.1:
+is-date-object@^1.0.1, is-date-object@^1.0.5:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/is-date-object/-/is-date-object-1.0.5.tgz#0841d5536e724c25597bf6ea62e1bd38298df31f"
   integrity sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==
@@ -10119,6 +10319,11 @@ is-inside-container@^1.0.0:
   dependencies:
     is-docker "^3.0.0"
 
+is-map@^2.0.1, is-map@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-map/-/is-map-2.0.2.tgz#00922db8c9bf73e81b7a335827bc2a43f2b91127"
+  integrity sha512-cOZFQQozTha1f4MxLFzlgKYPTyj26picdZTx82hbc/Xf4K/tZOOXSCkMvU4pKioRXGDLJRn0GM7Upe7kR721yg==
+
 is-negative-zero@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/is-negative-zero/-/is-negative-zero-2.0.2.tgz#7bf6f03a28003b8b3965de3ac26f664d765f3150"
@@ -10202,6 +10407,11 @@ is-regex@^1.0.4, is-regex@^1.0.5, is-regex@^1.1.0, is-regex@^1.1.4:
     call-bind "^1.0.2"
     has-tostringtag "^1.0.0"
 
+is-set@^2.0.1, is-set@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-set/-/is-set-2.0.2.tgz#90755fa4c2562dc1c5d4024760d6119b94ca18ec"
+  integrity sha512-+2cnTEZeY5z/iXGbLhPrOAaK/Mau5k5eXq9j14CpRTftq0pAJu2MwVRSZhyZWBzx3o6X795Lz6Bpb6R0GKf37g==
+
 is-shared-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
@@ -10271,6 +10481,11 @@ is-utf8@^0.2.0:
   resolved "https://registry.yarnpkg.com/is-utf8/-/is-utf8-0.2.1.tgz#4b0da1442104d1b336340e80797e865cf39f7d72"
   integrity sha512-rMYPYvCzsXywIsldgLaSoPlw5PfoB/ssr7hY4pLfcodrA5M/eArza1a9VmTiNIBNMjOGr1Ow9mTyU2o69U6U9Q==
 
+is-weakmap@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-weakmap/-/is-weakmap-2.0.1.tgz#5008b59bdc43b698201d18f62b37b2ca243e8cf2"
+  integrity sha512-NSBR4kH5oVj1Uwvv970ruUkCV7O1mzgVFO4/rev2cLRda9Tm9HrL70ZPut4rOHgY0FNrUu9BCbXA2sdQ+x0chA==
+
 is-weakref@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-weakref/-/is-weakref-1.0.2.tgz#9529f383a9338205e89765e0392efc2f100f06f2"
@@ -10278,6 +10493,14 @@ is-weakref@^1.0.2:
   dependencies:
     call-bind "^1.0.2"
 
+is-weakset@^2.0.1:
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/is-weakset/-/is-weakset-2.0.2.tgz#4569d67a747a1ce5a994dfd4ef6dcea76e7c0a1d"
+  integrity sha512-t2yVvttHkQktwnNNmBQ98AhENLdPUTDTE21uPqAQ0ARwQfGeQKRVS0NNurH7bTf7RrvcVn1OOge45CnBeHCSmg==
+  dependencies:
+    call-bind "^1.0.2"
+    get-intrinsic "^1.1.1"
+
 is-whitespace-character@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz#0858edd94a95594c7c9dd0b5c174ec6e45ee4aa7"
@@ -10315,6 +10538,11 @@ isarray@1.0.0, isarray@^1.0.0, isarray@~1.0.0:
   resolved "https://registry.yarnpkg.com/isarray/-/isarray-1.0.0.tgz#bb935d48582cba168c06834957a54a3e07124f11"
   integrity sha512-VLghIWNM6ELQzo7zwmcg0NmTVyWKYjvIeM83yjp0wRDTmUnrM678fQbcKBo6n2CJEF0szoG//ytg+TKla89ALQ==
 
+isarray@^2.0.5:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-2.0.5.tgz#8af1e4c1221244cc62459faf38940d4e644a5723"
+  integrity sha512-xHjhDr3cNBK0BzdUJSPXZntQUx/mwMS5Rw4A7lPJ90XGAO6ISP/ePDNuo0vhqOZU+UD5JoodwCAAoZQd3FeAKw==
+
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
@@ -11550,6 +11778,11 @@ luxon@^3.0.0:
   resolved "https://registry.yarnpkg.com/luxon/-/luxon-3.0.4.tgz#d179e4e9f05e092241e7044f64aaa54796b03929"
   integrity sha512-aV48rGUwP/Vydn8HT+5cdr26YYQiUZ42NM6ToMoaGKwYfWbfLeRkEu1wXWMHBZT6+KyLfcbbtVcoQFCbbPjKlw==
 
+lz-string@^1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.5.0.tgz#c1ab50f77887b712621201ba9fd4e3a6ed099941"
+  integrity sha512-h5bgJWpxJNswbU7qCrV0tIKQCaS3blPDrqKWx+QxzuzL1zGUzij9XCWLrSLsJPu5t+eWA/ycetzYAO5IOMcWAQ==
+
 make-cancellable-promise@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/make-cancellable-promise/-/make-cancellable-promise-1.1.0.tgz#b4e9fcb31db3a27417e44f80cffa598ec9ac9f4e"
@@ -12817,7 +13050,7 @@ object-inspect@^1.12.3:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
   integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
 
-object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2:
+object-is@^1.0.1, object-is@^1.0.2, object-is@^1.1.2, object-is@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
   integrity sha512-3cyDsyHgtmi7I7DfSSI2LDp6SK2lwvtbg0p0R1e0RvTqF5ceGx+K2dfSjm1bKDMVCFEDAQvy+o8c6a7VujOddw==
@@ -13918,6 +14151,15 @@ pretty-format@^26.0.0, pretty-format@^26.6.2:
     ansi-styles "^4.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.0.2:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-format@^29.0.0, pretty-format@^29.0.3:
   version "29.0.3"
   resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-29.0.3.tgz#23d5f8cabc9cbf209a77d49409d093d61166a811"
@@ -14807,6 +15049,15 @@ regexp.prototype.flags@^1.2.0, regexp.prototype.flags@^1.4.1, regexp.prototype.f
     define-properties "^1.1.3"
     functions-have-names "^1.2.2"
 
+regexp.prototype.flags@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.5.1.tgz#90ce989138db209f81492edd734183ce99f9677e"
+  integrity sha512-sy6TXMN+hnP/wMy+ISxg3krXx7BAtWVO4UouuCN/ziM9UEne0euamVNafDfvC83bRNr95y0V5iijeDQFUNpvrg==
+  dependencies:
+    call-bind "^1.0.2"
+    define-properties "^1.2.0"
+    set-function-name "^2.0.0"
+
 regexpp@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/regexpp/-/regexpp-2.0.1.tgz#8d19d31cf632482b589049f8281f93dbcba4d07f"
@@ -15431,6 +15682,15 @@ set-cookie-parser@^2.3.5:
   resolved "https://registry.yarnpkg.com/set-cookie-parser/-/set-cookie-parser-2.5.0.tgz#96b59525e1362c94335c3c761100bb6e8f2da4b0"
   integrity sha512-cHMAtSXilfyBePduZEBVPTCftTQWz6ehWJD5YNUg4mqvRosrrjKbo4WS8JkB0/RxonMoohHm7cOGH60mDkRQ9w==
 
+set-function-name@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/set-function-name/-/set-function-name-2.0.1.tgz#12ce38b7954310b9f61faa12701620a0c882793a"
+  integrity sha512-tMNCiqYVkXIZgc2Hnoy2IvC/f8ezc5koaRFkCjrpWzGpCd3qbZXPzVy9MAZzK1ch/X0jvSkojys3oqJN0qCmdA==
+  dependencies:
+    define-data-property "^1.0.1"
+    functions-have-names "^1.2.3"
+    has-property-descriptors "^1.0.0"
+
 set-value@^2.0.0, set-value@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/set-value/-/set-value-2.0.1.tgz#a18d40530e6f07de4228c7defe4227af8cad005b"
@@ -15907,6 +16167,13 @@ steno@^0.4.1:
   dependencies:
     graceful-fs "^4.1.3"
 
+stop-iteration-iterator@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/stop-iteration-iterator/-/stop-iteration-iterator-1.0.0.tgz#6a60be0b4ee757d1ed5254858ec66b10c49285e4"
+  integrity sha512-iCGQj+0l0HOdZ2AEeBADlsRC+vsnDsZsbdSiH1yNSjcfKM7fdpCMfqAL/dwF5BLiw/XhRft/Wax6zQbhq2BcjQ==
+  dependencies:
+    internal-slot "^1.0.4"
+
 stream-browserify@^2.0.1:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/stream-browserify/-/stream-browserify-2.0.2.tgz#87521d38a44aa7ee91ce1cd2a47df0cb49dd660b"
@@ -17594,6 +17861,16 @@ which-boxed-primitive@^1.0.2:
     is-string "^1.0.5"
     is-symbol "^1.0.3"
 
+which-collection@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/which-collection/-/which-collection-1.0.1.tgz#70eab71ebbbd2aefaf32f917082fc62cdcb70906"
+  integrity sha512-W8xeTUwaln8i3K/cY1nGXzdnVZlidBcagyNFtBdD5kxnb4TvGKR7FfSIS3mYpwWS1QUCutfKz8IY8RjftB0+1A==
+  dependencies:
+    is-map "^2.0.1"
+    is-set "^2.0.1"
+    is-weakmap "^2.0.1"
+    is-weakset "^2.0.1"
+
 which-module@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/which-module/-/which-module-2.0.0.tgz#d9ef07dce77b9902b8a3a8fa4b31c3e3f7e6e87a"
-- 
GitLab