From 70f2c797f42af603d7ea0eb8d23b4103aba66f77 Mon Sep 17 00:00:00 2001
From: Alireza <ar.sedghi@gmail.com>
Date: Mon, 27 May 2024 14:30:25 -0400
Subject: [PATCH] feat(ui): move to React 18 and base for using shadcn/ui
 (#4174)

Co-authored-by: IbrahimCSAE <ibrahim.mdev@gmail.com>
---
 .circleci/config.yml                          |    7 +
 .webpack/webpack.base.js                      |   32 +
 babel.config.js                               |   17 -
 .../cornerstone-dicom-rt/babel.config.js      |    2 +-
 extensions/cornerstone-dicom-rt/package.json  |    4 +-
 .../viewports/OHIFCornerstoneRTViewport.tsx   |    5 -
 .../cornerstone-dicom-seg/babel.config.js     |    2 +-
 extensions/cornerstone-dicom-seg/package.json |    4 +-
 .../viewports/OHIFCornerstoneSEGViewport.tsx  |    5 -
 extensions/cornerstone-dicom-sr/package.json  |    2 +-
 .../viewports/OHIFCornerstoneSRViewport.tsx   |    5 -
 .../cornerstone-dynamic-volume/package.json   |    2 +-
 extensions/cornerstone/package.json           |    6 +-
 .../src/Viewport/OHIFCornerstoneViewport.tsx  |   22 +-
 .../ViewportImageSliceLoadingIndicator.tsx    |    6 -
 .../Overlays/ViewportOrientationMarkers.tsx   |   10 -
 extensions/cornerstone/src/initCineService.ts |    2 +-
 extensions/default/package.json               |    4 +-
 .../src/Toolbar/LegacyLayoutSelector.tsx      |   14 +-
 .../src/Toolbar/ToolbarLayoutSelector.tsx     |   11 +-
 .../ToolbarSplitButtonWithServices.tsx        |    6 -
 .../ViewerLayout/ToolbarButtonNestedMenu.tsx  |    7 +-
 extensions/dicom-microscopy/babel.config.js   |    2 +-
 extensions/dicom-microscopy/package.json      |    4 +-
 .../src/DicomMicroscopyViewport.tsx           |   24 +-
 extensions/dicom-microscopy/src/index.tsx     |   22 +-
 .../src/services/MicroscopyService.ts         |    9 +
 extensions/dicom-pdf/package.json             |    2 +-
 extensions/dicom-video/package.json           |    2 +-
 extensions/measurement-tracking/package.json  |    4 +-
 .../viewports/TrackedCornerstoneViewport.tsx  |    5 -
 extensions/test-extension/package.json        |    2 +-
 extensions/tmtv/package.json                  |    2 +-
 modes/microscopy/babel.config.js              |    2 +-
 modes/preclinical-4d/babel.config.js          |    2 +-
 modes/segmentation/.webpack/webpack.prod.js   |   32 +
 modes/segmentation/babel.config.js            |    2 +-
 modes/segmentation/package.json               |    2 +-
 package.json                                  |    6 +-
 platform/app/cypress.config.ts                |    1 +
 .../cypress/integration/volume/MPR.spec.js    |    4 +-
 platform/app/cypress/support/aliases.js       |    4 +-
 platform/app/package.json                     |   10 +-
 platform/app/src/App.tsx                      |   50 +-
 platform/app/src/components/ViewportGrid.tsx  |   72 +-
 platform/app/src/index.js                     |    9 +-
 platform/app/src/routes/Mode/Mode.tsx         |    8 +-
 platform/app/tailwind.config.js               |  747 +---------
 .../extension/.webpack/webpack.prod.js        |   33 +
 .../cli/templates/extension/babel.config.js   |   16 -
 .../cli/templates/extension/dependencies.json |    6 +-
 .../templates/mode/.webpack/webpack.prod.js   |   32 +
 platform/cli/templates/mode/babel.config.js   |    2 +-
 platform/cli/templates/mode/dependencies.json |    2 +-
 platform/docs/package.json                    |    4 +-
 platform/i18n/package.json                    |    8 +-
 platform/ui-next/components.json              |   17 +
 platform/ui-next/package.json                 |   37 +
 .../ui-next/src/components/Button/Button.tsx  |   54 +
 .../ui-next/src/components/Button/index.ts    |    1 +
 .../src/components/Calendar/Calendar.tsx      |   61 +
 .../ui-next/src/components/Calendar/index.tsx |    3 +
 .../src/components/Combobox/Combobox.tsx      |   66 +
 .../ui-next/src/components/Combobox/index.ts  |    3 +
 .../src/components/Command/Command.tsx        |  150 ++
 .../ui-next/src/components/Command/index.ts   |    3 +
 .../src/components/DateRange/DateRange.tsx    |  153 ++
 .../ui-next/src/components/DateRange/index.ts |    3 +
 .../ui-next/src/components/Dialog/Dialog.tsx  |  105 ++
 .../ui-next/src/components/Dialog/index.ts    |    3 +
 .../src/components/Popover/Popover.tsx        |   31 +
 .../ui-next/src/components/Popover/index.ts   |    3 +
 .../components/ThemeWrapper/ThemeWrapper.tsx  |    4 +
 .../src/components/ThemeWrapper/index.ts      |    1 +
 platform/ui-next/src/components/index.ts      |   10 +
 .../contextProviders/NotificationProvider.tsx |   85 ++
 .../ui-next/src/contextProviders/index.ts     |    3 +
 platform/ui-next/src/index.ts                 |   28 +
 platform/ui-next/src/lib/utils.ts             |    6 +
 platform/ui-next/src/tailwind.css             |   67 +
 platform/ui-next/tailwind.config.js           |   70 +
 platform/ui-next/tsconfig.json                |   11 +
 platform/ui/package.json                      |    8 +-
 .../ActionButtons/ActionButtons.tsx           |    6 +-
 platform/ui/src/components/Button/Button.tsx  |   12 +-
 .../src/components/CinePlayer/CinePlayer.tsx  |   31 +-
 .../ui/src/components/DateRange/DateRange.tsx |    8 +-
 platform/ui/src/components/Dialog/Dialog.tsx  |   16 +-
 platform/ui/src/components/Dialog/Footer.tsx  |    7 +-
 platform/ui/src/components/Dialog/Header.tsx  |    6 +-
 .../ui/src/components/Dropdown/Dropdown.tsx   |   11 +-
 .../components/EmptyStudies/EmptyStudies.tsx  |    6 +-
 .../ErrorBoundary/ErrorBoundary.tsx           |   26 +-
 .../ExpandableToolbarButton.tsx               |   23 +-
 platform/ui/src/components/Header/Header.tsx  |    9 +-
 .../components/HotkeyField/HotkeyField.tsx    |    6 +-
 .../HotkeysPreferences/HotkeysPreferences.tsx |   11 +-
 platform/ui/src/components/Icon/getIcon.js    |  367 +++--
 .../src/components/IconButton/IconButton.tsx  |   27 +-
 .../ImageScrollbar/ImageScrollbar.tsx         |    8 +-
 .../InputDateRange/InputDateRange.tsx         |   19 +-
 .../InputDoubleRange/InputDoubleRange.tsx     |   42 +-
 .../InputLabelWrapper/InputLabelWrapper.tsx   |    6 +-
 .../InputMultiSelect/InputMultiSelect.tsx     |   12 +-
 .../ui/src/components/InputText/InputText.tsx |   17 +-
 .../InvestigationalUseDialog.tsx              |   14 +-
 .../components/LayoutPreset/LayoutPreset.tsx  |    6 +-
 .../LayoutSelector/LayoutSelector.tsx         |    8 +-
 .../components/LegacyButton/LegacyButton.tsx  |   11 +-
 .../LegacyCinePlayer/LegacyCinePlayer.tsx     |   27 +-
 .../LegacySidePanel/LegacySidePanel.tsx       |    4 -
 .../LegacySplitButton/LegacySplitButton.tsx   |   14 +-
 .../LegacyViewportActionBar.tsx               |   20 +-
 .../ui/src/components/LineChart/LineChart.tsx |   18 +-
 .../ui/src/components/ListMenu/ListMenu.tsx   |    8 +-
 .../MeasurementTable/MeasurementItem.tsx      |    6 +-
 .../MeasurementTable/MeasurementTable.tsx     |   12 +-
 platform/ui/src/components/Modal/Modal.tsx    |   12 +-
 .../components/Notification/Notification.tsx  |   15 +-
 .../components/PanelSection/PanelSection.tsx  |    2 -
 .../SegmentationDropDownRow.tsx               |    7 +-
 .../SegmentationGroupSegment.tsx              |    6 +-
 .../SegmentationGroupTable.tsx                |   88 +-
 .../SegmentationGroupTableExpanded.tsx        |   88 +-
 .../SegmentationItem.tsx                      |    9 +-
 .../SegmentationTable/SegmentationItem.tsx    |    9 +-
 .../SegmentationTable/SegmentationTable.tsx   |   26 +-
 platform/ui/src/components/Select/Select.tsx  |   44 +-
 .../ui/src/components/SidePanel/SidePanel.tsx |    7 +-
 .../components/SplitButton/SplitButton.tsx    |   12 +-
 .../components/StudyBrowser/StudyBrowser.tsx  |   22 +-
 platform/ui/src/components/Svg/getSvg.tsx     |    2 +-
 platform/ui/src/components/Table/Table.tsx    |    8 +-
 .../ui/src/components/TableBody/TableBody.tsx |    7 +-
 .../ui/src/components/TableCell/TableCell.tsx |   18 +-
 .../ui/src/components/TableHead/TableHead.tsx |    7 +-
 .../ui/src/components/TableRow/TableRow.tsx   |    8 +-
 .../ui/src/components/Thumbnail/Thumbnail.tsx |    6 +-
 .../ToolbarButton/ToolbarButton.tsx           |    6 +-
 .../src/components/Tooltip/PortalTooltip.tsx  |    9 +-
 .../ui/src/components/Tooltip/Tooltip.tsx     |   18 +-
 .../TooltipClipboard/TooltipClipboard.tsx     |    6 +-
 .../UserPreferences/UserPreferences.tsx       |   25 +-
 .../components/ViewportPane/ViewportPane.tsx  |    8 +-
 .../components/WindowLevel/WindowLevel.tsx    |   26 +-
 .../WindowLevel/WindowLevelHistogram.tsx      |   15 +-
 .../src/contextProviders/DialogProvider.tsx   |    6 +-
 .../src/contextProviders/ModalComponent.tsx   |   24 +-
 .../ui/src/contextProviders/ModalProvider.tsx |    6 +-
 .../src/contextProviders/SnackbarProvider.tsx |    6 +-
 platform/ui/tailwind.config.js                |    5 +-
 tsconfig.json                                 |    9 +-
 yarn.lock                                     | 1327 +++++++++++++++--
 153 files changed, 2973 insertions(+), 2043 deletions(-)
 create mode 100644 platform/ui-next/components.json
 create mode 100644 platform/ui-next/package.json
 create mode 100644 platform/ui-next/src/components/Button/Button.tsx
 create mode 100644 platform/ui-next/src/components/Button/index.ts
 create mode 100644 platform/ui-next/src/components/Calendar/Calendar.tsx
 create mode 100644 platform/ui-next/src/components/Calendar/index.tsx
 create mode 100644 platform/ui-next/src/components/Combobox/Combobox.tsx
 create mode 100644 platform/ui-next/src/components/Combobox/index.ts
 create mode 100644 platform/ui-next/src/components/Command/Command.tsx
 create mode 100644 platform/ui-next/src/components/Command/index.ts
 create mode 100644 platform/ui-next/src/components/DateRange/DateRange.tsx
 create mode 100644 platform/ui-next/src/components/DateRange/index.ts
 create mode 100644 platform/ui-next/src/components/Dialog/Dialog.tsx
 create mode 100644 platform/ui-next/src/components/Dialog/index.ts
 create mode 100644 platform/ui-next/src/components/Popover/Popover.tsx
 create mode 100644 platform/ui-next/src/components/Popover/index.ts
 create mode 100644 platform/ui-next/src/components/ThemeWrapper/ThemeWrapper.tsx
 create mode 100644 platform/ui-next/src/components/ThemeWrapper/index.ts
 create mode 100644 platform/ui-next/src/components/index.ts
 create mode 100644 platform/ui-next/src/contextProviders/NotificationProvider.tsx
 create mode 100644 platform/ui-next/src/contextProviders/index.ts
 create mode 100644 platform/ui-next/src/index.ts
 create mode 100644 platform/ui-next/src/lib/utils.ts
 create mode 100644 platform/ui-next/src/tailwind.css
 create mode 100644 platform/ui-next/tailwind.config.js
 create mode 100644 platform/ui-next/tsconfig.json

diff --git a/.circleci/config.yml b/.circleci/config.yml
index 410cd92dc1b..699a9d30a2a 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -42,6 +42,7 @@ jobs:
   ###
   UNIT_TESTS:
     <<: *defaults
+    resource_class: large
     steps:
       # Update yarn
       - run: yarn -v
@@ -98,6 +99,7 @@ jobs:
   ###
   BUILD:
     <<: *defaults
+    resource_class: large
     steps:
       # Checkout code and ALL Git Tags
       - checkout
@@ -146,6 +148,7 @@ jobs:
   # just to make sure later on we can publish them
   BUILD_PACKAGES_QUICK:
     <<: *defaults
+    resource_class: large
     steps:
       - run: yarn -v
       # Checkout code and ALL Git Tags
@@ -195,6 +198,7 @@ jobs:
   ###
   NPM_PUBLISH:
     <<: *defaults
+    resource_class: large
     steps:
       - run: yarn -v
       # Checkout code and ALL Git Tags
@@ -264,6 +268,7 @@ jobs:
 
   DOCKER_RELEASE_PUBLISH:
     <<: *defaults
+    resource_class: large
     steps:
       - attach_workspace:
           at: ~/repo
@@ -293,6 +298,7 @@ jobs:
 
   DOCKER_BETA_PUBLISH:
     <<: *defaults
+    resource_class: large
     steps:
       - attach_workspace:
           at: ~/repo
@@ -397,6 +403,7 @@ jobs:
         default: ''
         description: Directory containing package.json
         type: string
+    resource_class: large
     steps:
       - cypress/install:
           cypress-cache-key: << parameters.cypress-cache-key >>
diff --git a/.webpack/webpack.base.js b/.webpack/webpack.base.js
index aa48230d163..9d9bf6508ca 100644
--- a/.webpack/webpack.base.js
+++ b/.webpack/webpack.base.js
@@ -98,6 +98,38 @@ module.exports = (env, argv, { SRC_DIR, ENTRY }) => {
     module: {
       noParse: [/(codec)/, /(dicomicc)/],
       rules: [
+        {
+          test: /\.svg?$/,
+          oneOf: [
+            {
+              use: [
+                {
+                  loader: '@svgr/webpack',
+                  options: {
+                    svgoConfig: {
+                      plugins: [
+                        {
+                          name: 'preset-default',
+                          params: {
+                            overrides: {
+                              removeViewBox: false
+                            },
+                          },
+                        },
+                      ]
+                    },
+                    prettier: false,
+                    svgo: true,
+                    titleProp: true,
+                  },
+                },
+              ],
+              issuer: {
+                and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+              },
+            },
+          ],
+        },
         {
           test: /\.js$/,
           enforce: 'pre',
diff --git a/babel.config.js b/babel.config.js
index 9fbd804637a..32cc2d91475 100644
--- a/babel.config.js
+++ b/babel.config.js
@@ -5,23 +5,6 @@ module.exports = {
   babelrcRoots: ['./platform/*', './extensions/*', './modes/*'],
   presets: ['@babel/preset-env', '@babel/preset-react', '@babel/preset-typescript'],
   plugins: [
-    [
-      'inline-react-svg',
-      {
-        svgo: {
-          plugins: [
-            {
-              name: 'preset-default',
-              params: {
-                overrides: {
-                  removeViewBox: false,
-                },
-              },
-            },
-          ],
-        },
-      },
-    ],
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-transform-typescript',
     ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
diff --git a/extensions/cornerstone-dicom-rt/babel.config.js b/extensions/cornerstone-dicom-rt/babel.config.js
index a38ddda2127..e5144255190 100644
--- a/extensions/cornerstone-dicom-rt/babel.config.js
+++ b/extensions/cornerstone-dicom-rt/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
   env: {
     test: {
       presets: [
diff --git a/extensions/cornerstone-dicom-rt/package.json b/extensions/cornerstone-dicom-rt/package.json
index ab1640496dd..2898fa132df 100644
--- a/extensions/cornerstone-dicom-rt/package.json
+++ b/extensions/cornerstone-dicom-rt/package.json
@@ -38,8 +38,8 @@
     "@ohif/extension-default": "3.9.0-beta.21",
     "@ohif/i18n": "3.9.0-beta.21",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^10.11.0",
     "react-router": "^6.3.0",
     "react-router-dom": "^6.3.0"
diff --git a/extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx b/extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx
index b8e6aa1a59b..a3bf48e8eca 100644
--- a/extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx
+++ b/extensions/cornerstone-dicom-rt/src/viewports/OHIFCornerstoneRTViewport.tsx
@@ -358,11 +358,6 @@ OHIFCornerstoneRTViewport.propTypes = {
   viewportId: PropTypes.string.isRequired,
   dataSource: PropTypes.object,
   children: PropTypes.node,
-  customProps: PropTypes.object,
-};
-
-OHIFCornerstoneRTViewport.defaultProps = {
-  customProps: {},
 };
 
 function _getReferencedDisplaySetMetadata(referencedDisplaySet) {
diff --git a/extensions/cornerstone-dicom-seg/babel.config.js b/extensions/cornerstone-dicom-seg/babel.config.js
index a38ddda2127..e5144255190 100644
--- a/extensions/cornerstone-dicom-seg/babel.config.js
+++ b/extensions/cornerstone-dicom-seg/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
   env: {
     test: {
       presets: [
diff --git a/extensions/cornerstone-dicom-seg/package.json b/extensions/cornerstone-dicom-seg/package.json
index 0e147b5def6..5684c283350 100644
--- a/extensions/cornerstone-dicom-seg/package.json
+++ b/extensions/cornerstone-dicom-seg/package.json
@@ -38,8 +38,8 @@
     "@ohif/extension-default": "3.9.0-beta.21",
     "@ohif/i18n": "3.9.0-beta.21",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^12.2.2",
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1"
diff --git a/extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx b/extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx
index da2cc18a753..c78017edcb0 100644
--- a/extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx
+++ b/extensions/cornerstone-dicom-seg/src/viewports/OHIFCornerstoneSEGViewport.tsx
@@ -367,11 +367,6 @@ OHIFCornerstoneSEGViewport.propTypes = {
   viewportId: PropTypes.string.isRequired,
   dataSource: PropTypes.object,
   children: PropTypes.node,
-  customProps: PropTypes.object,
-};
-
-OHIFCornerstoneSEGViewport.defaultProps = {
-  customProps: {},
 };
 
 function _getReferencedDisplaySetMetadata(referencedDisplaySet, segDisplaySet) {
diff --git a/extensions/cornerstone-dicom-sr/package.json b/extensions/cornerstone-dicom-sr/package.json
index edc7ce31d07..c180158784c 100644
--- a/extensions/cornerstone-dicom-sr/package.json
+++ b/extensions/cornerstone-dicom-sr/package.json
@@ -42,7 +42,7 @@
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2"
+    "react": "^18.3.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
diff --git a/extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx b/extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx
index b59853c7ef8..b4d44f4a450 100644
--- a/extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx
+++ b/extensions/cornerstone-dicom-sr/src/viewports/OHIFCornerstoneSRViewport.tsx
@@ -367,16 +367,11 @@ OHIFCornerstoneSRViewport.propTypes = {
   dataSource: PropTypes.object,
   children: PropTypes.node,
   viewportLabel: PropTypes.string,
-  customProps: PropTypes.object,
   viewportOptions: PropTypes.object,
   servicesManager: PropTypes.object.isRequired,
   extensionManager: PropTypes.instanceOf(ExtensionManager).isRequired,
 };
 
-OHIFCornerstoneSRViewport.defaultProps = {
-  customProps: {},
-};
-
 async function _getViewportReferencedDisplaySetData(
   displaySet,
   measurementSelected,
diff --git a/extensions/cornerstone-dynamic-volume/package.json b/extensions/cornerstone-dynamic-volume/package.json
index 09f6c33bebd..bc6d8bba896 100644
--- a/extensions/cornerstone-dynamic-volume/package.json
+++ b/extensions/cornerstone-dynamic-volume/package.json
@@ -38,7 +38,7 @@
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2"
+    "react": "^18.3.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
diff --git a/extensions/cornerstone/package.json b/extensions/cornerstone/package.json
index 23549ee8ad7..365088b7abd 100644
--- a/extensions/cornerstone/package.json
+++ b/extensions/cornerstone/package.json
@@ -46,9 +46,9 @@
     "dicom-parser": "^1.8.21",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
-    "react-resize-detector": "^6.7.6"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-resize-detector": "^10.0.1"
   },
   "devDependencies": {
     "lodash": "^4.17.21"
diff --git a/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx b/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
index e5ad2c3ef70..12e2b5625e1 100644
--- a/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
+++ b/extensions/cornerstone/src/Viewport/OHIFCornerstoneViewport.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useRef, useCallback, useState } from 'react';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import PropTypes from 'prop-types';
 import * as cs3DTools from '@cornerstonejs/tools';
 import {
@@ -109,7 +109,7 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
     onElementEnabled,
     // eslint-disable-next-line react/prop-types
     onElementDisabled,
-    isJumpToMeasurementDisabled,
+    isJumpToMeasurementDisabled = false,
     // Note: you SHOULD NOT use the initialImageIdOrIndex for manipulation
     // of the imageData in the OHIFCornerstoneViewport. This prop is used
     // to set the initial state of the viewport's first image to render
@@ -140,7 +140,7 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
 
   const [scrollbarHeight, setScrollbarHeight] = useState('100px');
   const [enabledVPElement, setEnabledVPElement] = useState(null);
-  const elementRef = useRef();
+  const elementRef = useRef() as React.MutableRefObject<HTMLDivElement>;
   const [appConfig] = useAppConfig();
 
   const {
@@ -417,19 +417,21 @@ const OHIFCornerstoneViewport = React.memo((props: withAppTypes) => {
     });
   }, [displaySets, viewportId, viewportActionCornersService, servicesManager, commandsManager]);
 
+  const { ref: resizeRef } = useResizeDetector({
+    onResize,
+  });
   return (
     <React.Fragment>
       <div className="viewport-wrapper">
-        <ReactResizeDetector
-          onResize={onResize}
-          targetRef={elementRef.current}
-        />
         <div
           className="cornerstone-viewport-element"
           style={{ height: '100%', width: '100%' }}
           onContextMenu={e => e.preventDefault()}
           onMouseDown={e => e.preventDefault()}
-          ref={elementRef}
+          ref={el => {
+            resizeRef.current = el;
+            elementRef.current = el;
+          }}
         ></div>
         <CornerstoneOverlays
           viewportId={viewportId}
@@ -683,10 +685,6 @@ function _rehydrateSynchronizers(
 // Component displayName
 OHIFCornerstoneViewport.displayName = 'OHIFCornerstoneViewport';
 
-OHIFCornerstoneViewport.defaultProps = {
-  isJumpToMeasurementDisabled: false,
-};
-
 OHIFCornerstoneViewport.propTypes = {
   displaySets: PropTypes.array.isRequired,
   dataSource: PropTypes.object.isRequired,
diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageSliceLoadingIndicator.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageSliceLoadingIndicator.tsx
index 70e03e534cb..429fea2cb63 100644
--- a/extensions/cornerstone/src/Viewport/Overlays/ViewportImageSliceLoadingIndicator.tsx
+++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportImageSliceLoadingIndicator.tsx
@@ -78,14 +78,8 @@ function ViewportImageSliceLoadingIndicator({ viewportData, element }) {
 }
 
 ViewportImageSliceLoadingIndicator.propTypes = {
-  percentComplete: PropTypes.number,
   error: PropTypes.object,
   element: PropTypes.object,
 };
 
-ViewportImageSliceLoadingIndicator.defaultProps = {
-  percentComplete: 0,
-  error: null,
-};
-
 export default ViewportImageSliceLoadingIndicator;
diff --git a/extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx b/extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx
index eb1dd8200ea..b2df7429adf 100644
--- a/extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx
+++ b/extensions/cornerstone/src/Viewport/Overlays/ViewportOrientationMarkers.tsx
@@ -136,16 +136,6 @@ function ViewportOrientationMarkers({
   return <div className="ViewportOrientationMarkers select-none">{markers}</div>;
 }
 
-ViewportOrientationMarkers.propTypes = {
-  percentComplete: PropTypes.number,
-  error: PropTypes.object,
-};
-
-ViewportOrientationMarkers.defaultProps = {
-  percentComplete: 0,
-  error: null,
-};
-
 /**
  *
  * Computes the orientation labels on a Cornerstone-enabled Viewport element
diff --git a/extensions/cornerstone/src/initCineService.ts b/extensions/cornerstone/src/initCineService.ts
index fb7f8c2fac8..b98c2f2816b 100644
--- a/extensions/cornerstone/src/initCineService.ts
+++ b/extensions/cornerstone/src/initCineService.ts
@@ -6,7 +6,7 @@ function _getVolumesFromViewport(viewport) {
 }
 
 function _getVolumeFromViewport(viewport) {
-  const volumes = _getVolumesFromViewport(viewport);
+  const volumes = _getVolumesFromViewport(viewport).filter(volume => volume);
   const dynamicVolume = volumes.find(volume => volume.isDynamicVolume());
 
   return dynamicVolume ?? volumes[0];
diff --git a/extensions/default/package.json b/extensions/default/package.json
index e95b12f6741..1dcf6f1cc2a 100644
--- a/extensions/default/package.json
+++ b/extensions/default/package.json
@@ -37,8 +37,8 @@
     "dcmjs": "^0.29.12",
     "dicomweb-client": "^0.10.4",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^12.2.2",
     "react-window": "^1.8.9",
     "webpack": "^5.50.0",
diff --git a/extensions/default/src/Toolbar/LegacyLayoutSelector.tsx b/extensions/default/src/Toolbar/LegacyLayoutSelector.tsx
index 9847d94e0f5..e87b2e4de13 100644
--- a/extensions/default/src/Toolbar/LegacyLayoutSelector.tsx
+++ b/extensions/default/src/Toolbar/LegacyLayoutSelector.tsx
@@ -2,7 +2,13 @@ import React, { useEffect, useState, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { LayoutSelector as OHIFLayoutSelector, ToolbarButton } from '@ohif/ui';
 
-function LegacyLayoutSelectorWithServices({ servicesManager, ...props }: withAppTypes) {
+function LegacyLayoutSelectorWithServices({
+  servicesManager,
+  rows = 3,
+  columns = 3,
+  onLayoutChange = () => {},
+  ...props
+}) {
   const { toolbarService } = servicesManager.services;
 
   const onSelection = useCallback(
@@ -78,10 +84,4 @@ LayoutSelector.propTypes = {
   servicesManager: PropTypes.object.isRequired,
 };
 
-LayoutSelector.defaultProps = {
-  rows: 3,
-  columns: 3,
-  onLayoutChange: () => {},
-};
-
 export default LegacyLayoutSelectorWithServices;
diff --git a/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx b/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
index b2ed1c96f91..6a4f8fdba22 100644
--- a/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
+++ b/extensions/default/src/Toolbar/ToolbarLayoutSelector.tsx
@@ -124,8 +124,9 @@ function ToolbarLayoutSelectorWithServices({
 }
 
 function LayoutSelector({
-  rows,
-  columns,
+  rows = 3,
+  columns = 4,
+  onLayoutChange = () => {},
   className,
   onSelection,
   onSelectionPreset,
@@ -242,10 +243,4 @@ LayoutSelector.propTypes = {
   servicesManager: PropTypes.object.isRequired,
 };
 
-LayoutSelector.defaultProps = {
-  columns: 4,
-  rows: 3,
-  onLayoutChange: () => {},
-};
-
 export default ToolbarLayoutSelectorWithServices;
diff --git a/extensions/default/src/Toolbar/ToolbarSplitButtonWithServices.tsx b/extensions/default/src/Toolbar/ToolbarSplitButtonWithServices.tsx
index 3bbc14b6e5f..f23bfb64124 100644
--- a/extensions/default/src/Toolbar/ToolbarSplitButtonWithServices.tsx
+++ b/extensions/default/src/Toolbar/ToolbarSplitButtonWithServices.tsx
@@ -54,7 +54,6 @@ function ToolbarSplitButtonWithServices({
 }
 
 ToolbarSplitButtonWithServices.propTypes = {
-  isRadio: PropTypes.bool,
   groupId: PropTypes.string,
   primary: PropTypes.shape({
     id: PropTypes.string.isRequired,
@@ -87,9 +86,4 @@ ToolbarSplitButtonWithServices.propTypes = {
   }),
 };
 
-ToolbarSplitButtonWithServices.defaultProps = {
-  isRadio: false,
-  isAction: false,
-};
-
 export default ToolbarSplitButtonWithServices;
diff --git a/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.tsx b/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.tsx
index 47e6a3a9b47..40ef8195daa 100644
--- a/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.tsx
+++ b/extensions/default/src/ViewerLayout/ToolbarButtonNestedMenu.tsx
@@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { ToolbarButton } from '@ohif/ui';
 
-function NestedMenu({ children, label, icon, isActive }) {
+function NestedMenu({ children, label = 'More', icon = 'tool-more-menu', isActive }) {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleNestedMenu = () => setIsOpen(!isOpen);
@@ -39,9 +39,4 @@ NestedMenu.propTypes = {
   label: PropTypes.string,
 };
 
-NestedMenu.defaultProps = {
-  icon: 'tool-more-menu',
-  label: 'More',
-};
-
 export default NestedMenu;
diff --git a/extensions/dicom-microscopy/babel.config.js b/extensions/dicom-microscopy/babel.config.js
index a38ddda2127..e5144255190 100644
--- a/extensions/dicom-microscopy/babel.config.js
+++ b/extensions/dicom-microscopy/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
   env: {
     test: {
       presets: [
diff --git a/extensions/dicom-microscopy/package.json b/extensions/dicom-microscopy/package.json
index 2c96f4faa8d..0d24a74d3ed 100644
--- a/extensions/dicom-microscopy/package.json
+++ b/extensions/dicom-microscopy/package.json
@@ -35,8 +35,8 @@
     "@ohif/i18n": "3.9.0-beta.21",
     "@ohif/ui": "3.9.0-beta.21",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^10.11.0",
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1"
diff --git a/extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx b/extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx
index fd44e21f768..4d40c71ed14 100644
--- a/extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx
+++ b/extensions/dicom-microscopy/src/DicomMicroscopyViewport.tsx
@@ -1,7 +1,5 @@
 import React, { Component } from 'react';
-import ReactResizeDetector from 'react-resize-detector';
 import PropTypes from 'prop-types';
-import debounce from 'lodash.debounce';
 import { LoadingIndicatorProgress } from '@ohif/ui';
 
 import './DicomMicroscopyViewport.css';
@@ -23,18 +21,12 @@ class DicomMicroscopyViewport extends Component {
 
   container = React.createRef();
   overlayElement = React.createRef();
-  debouncedResize: () => any;
 
   constructor(props: any) {
     super(props);
 
     const { microscopyService } = this.props.servicesManager.services;
     this.microscopyService = microscopyService;
-    this.debouncedResize = debounce(() => {
-      if (this.viewer) {
-        this.viewer.resize();
-      }
-    }, 100);
   }
 
   static propTypes = {
@@ -54,6 +46,7 @@ class DicomMicroscopyViewport extends Component {
     servicesManager: PropTypes.object,
     extensionManager: PropTypes.object,
     commandsManager: PropTypes.object,
+    resizeRef: PropTypes.oneOfType([PropTypes.func, PropTypes.shape({ current: PropTypes.any })]),
   };
 
   /**
@@ -298,13 +291,16 @@ class DicomMicroscopyViewport extends Component {
             </div>
           </div>
         </div>
-        {ReactResizeDetector && (
-          <ReactResizeDetector handleWidth handleHeight onResize={this.onWindowResize} />
-        )}
         {this.state.error ? (
           <h2>{JSON.stringify(this.state.error)}</h2>
         ) : (
-          <div style={style} ref={this.container} />
+          <div
+            style={style}
+            ref={(ref: any) => {
+              this.container.current = ref;
+              this.props.resizeRef.current = ref;
+            }}
+          />
         )}
         {this.state.isLoaded ? null : (
           <LoadingIndicatorProgress className={'h-full w-full bg-black'} />
@@ -312,10 +308,6 @@ class DicomMicroscopyViewport extends Component {
       </div>
     );
   }
-
-  onWindowResize = () => {
-    this.debouncedResize();
-  };
 }
 
 export default DicomMicroscopyViewport;
diff --git a/extensions/dicom-microscopy/src/index.tsx b/extensions/dicom-microscopy/src/index.tsx
index ff36bde1482..55b6004c7ba 100644
--- a/extensions/dicom-microscopy/src/index.tsx
+++ b/extensions/dicom-microscopy/src/index.tsx
@@ -8,6 +8,8 @@ import { useViewportGrid } from '@ohif/ui';
 import getDicomMicroscopySopClassHandler from './DicomMicroscopySopClassHandler';
 import getDicomMicroscopySRSopClassHandler from './DicomMicroscopySRSopClassHandler';
 import MicroscopyService from './services/MicroscopyService';
+import { useResizeDetector } from 'react-resize-detector';
+import debounce from 'lodash.debounce';
 
 const Component = React.lazy(() => {
   return import('./DicomMicroscopyViewport');
@@ -59,14 +61,25 @@ const extension: Types.Extensions.Extension = {
       const [viewportGrid, viewportGridService] = useViewportGrid();
       const { activeViewportId } = viewportGrid;
 
-      // a unique identifier based on the contents of displaySets.
-      // since we changed our rendering pipeline and if there is no
-      // element size change nor viewportId change we won't re-render
-      // we need a way to force re-rendering when displaySets change.
       const displaySetsKey = useMemo(() => {
         return props.displaySets.map(ds => ds.displaySetInstanceUID).join('-');
       }, [props.displaySets]);
 
+      const onResize = debounce(() => {
+        const { microscopyService } = servicesManager.services;
+        const managedViewer = microscopyService.getAllManagedViewers();
+
+        if (managedViewer && managedViewer.length > 0) {
+          managedViewer[0].viewer.resize();
+        }
+      }, 100);
+
+      const { ref: resizeRef } = useResizeDetector({
+        onResize,
+        handleHeight: true,
+        handleWidth: true,
+      });
+
       return (
         <MicroscopyViewport
           key={displaySetsKey}
@@ -78,6 +91,7 @@ const extension: Types.Extensions.Extension = {
             viewportGridService.setActiveViewportId(viewportId);
           }}
           viewportData={viewportOptions}
+          resizeRef={resizeRef}
           {...props}
         />
       );
diff --git a/extensions/dicom-microscopy/src/services/MicroscopyService.ts b/extensions/dicom-microscopy/src/services/MicroscopyService.ts
index 4068ad91024..be91cb6f2d1 100644
--- a/extensions/dicom-microscopy/src/services/MicroscopyService.ts
+++ b/extensions/dicom-microscopy/src/services/MicroscopyService.ts
@@ -628,6 +628,15 @@ export default class MicroscopyService extends PubSubService {
   setROIStyle(uid, styleOptions) {
     this.managedViewers.forEach(mv => mv.setROIStyle(uid, styleOptions));
   }
+
+  /**
+   * Get all managed viewers
+   *
+   * @returns {Array} managedViewers
+   */
+  getAllManagedViewers() {
+    return Array.from(this.managedViewers);
+  }
 }
 
 export { EVENTS };
diff --git a/extensions/dicom-pdf/package.json b/extensions/dicom-pdf/package.json
index d63f71dbcc6..55d233d6868 100644
--- a/extensions/dicom-pdf/package.json
+++ b/extensions/dicom-pdf/package.json
@@ -36,7 +36,7 @@
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2"
+    "react": "^18.3.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
diff --git a/extensions/dicom-video/package.json b/extensions/dicom-video/package.json
index 4bc4362111e..e04ea5e98aa 100644
--- a/extensions/dicom-video/package.json
+++ b/extensions/dicom-video/package.json
@@ -36,7 +36,7 @@
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2"
+    "react": "^18.3.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
diff --git a/extensions/measurement-tracking/package.json b/extensions/measurement-tracking/package.json
index 022ace3e185..ebc5eb2df8c 100644
--- a/extensions/measurement-tracking/package.json
+++ b/extensions/measurement-tracking/package.json
@@ -41,8 +41,8 @@
     "dcmjs": "^0.29.12",
     "lodash.debounce": "^4.17.21",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "webpack": "^5.50.0",
     "webpack-merge": "^5.7.3"
   },
diff --git a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx
index a805630ecad..f0c7cdac0da 100644
--- a/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx
+++ b/extensions/measurement-tracking/src/viewports/TrackedCornerstoneViewport.tsx
@@ -242,11 +242,6 @@ TrackedCornerstoneViewport.propTypes = {
   viewportId: PropTypes.string.isRequired,
   dataSource: PropTypes.object,
   children: PropTypes.node,
-  customProps: PropTypes.object,
-};
-
-TrackedCornerstoneViewport.defaultProps = {
-  customProps: {},
 };
 
 function _getNextMeasurementUID(
diff --git a/extensions/test-extension/package.json b/extensions/test-extension/package.json
index c5f496a8bd9..bf9ee14f83e 100644
--- a/extensions/test-extension/package.json
+++ b/extensions/test-extension/package.json
@@ -36,7 +36,7 @@
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2"
+    "react": "^18.3.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
diff --git a/extensions/tmtv/package.json b/extensions/tmtv/package.json
index 37d6d4865d2..906276a052f 100644
--- a/extensions/tmtv/package.json
+++ b/extensions/tmtv/package.json
@@ -36,7 +36,7 @@
     "dicom-parser": "^1.8.9",
     "hammerjs": "^2.0.8",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2"
+    "react": "^18.3.1"
   },
   "dependencies": {
     "@babel/runtime": "^7.20.13",
diff --git a/modes/microscopy/babel.config.js b/modes/microscopy/babel.config.js
index a38ddda2127..e5144255190 100644
--- a/modes/microscopy/babel.config.js
+++ b/modes/microscopy/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
   env: {
     test: {
       presets: [
diff --git a/modes/preclinical-4d/babel.config.js b/modes/preclinical-4d/babel.config.js
index a38ddda2127..e5144255190 100644
--- a/modes/preclinical-4d/babel.config.js
+++ b/modes/preclinical-4d/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
   env: {
     test: {
       presets: [
diff --git a/modes/segmentation/.webpack/webpack.prod.js b/modes/segmentation/.webpack/webpack.prod.js
index 163392a699a..95d7bfea576 100644
--- a/modes/segmentation/.webpack/webpack.prod.js
+++ b/modes/segmentation/.webpack/webpack.prod.js
@@ -51,6 +51,38 @@ const config = {
           extensions: ['.js', '.jsx', '.ts', '.tsx'],
         },
       },
+      {
+        test: /\.svg?$/,
+        oneOf: [
+          {
+            use: [
+              {
+                loader: '@svgr/webpack',
+                options: {
+                  svgoConfig: {
+                    plugins: [
+                      {
+                        name: 'preset-default',
+                        params: {
+                          overrides: {
+                            removeViewBox: false
+                          },
+                        },
+                      },
+                    ]
+                  },
+                  prettier: false,
+                  svgo: true,
+                  titleProp: true,
+                },
+              },
+            ],
+            issuer: {
+              and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+            },
+          },
+        ],
+      },
     ],
   },
   resolve: {
diff --git a/modes/segmentation/babel.config.js b/modes/segmentation/babel.config.js
index a38ddda2127..37dbb87cca2 100644
--- a/modes/segmentation/babel.config.js
+++ b/modes/segmentation/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
+  plugins: [ '@babel/plugin-proposal-class-properties'],
   env: {
     test: {
       presets: [
diff --git a/modes/segmentation/package.json b/modes/segmentation/package.json
index e96c6b4ae41..134ceef13b8 100644
--- a/modes/segmentation/package.json
+++ b/modes/segmentation/package.json
@@ -63,7 +63,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.0.0-beta.4",
-    "babel-plugin-inline-react-svg": "^2.0.1",
+    "@svgr/webpack": "^8.1.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",
diff --git a/package.json b/package.json
index ea80151568b..2eb937001b6 100644
--- a/package.json
+++ b/package.json
@@ -65,8 +65,8 @@
     "core-js": "^3.2.1"
   },
   "peerDependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "devDependencies": {
     "@babel/core": "^7.23.2",
@@ -82,13 +82,13 @@
     "@babel/preset-env": "^7.23.2",
     "@babel/preset-react": "^7.16.7",
     "@babel/preset-typescript": "^7.13.0",
+    "@svgr/webpack": "^8.1.0",
     "@types/jest": "^27.5.0",
     "@typescript-eslint/eslint-plugin": "^6.3.0",
     "@typescript-eslint/parser": "^6.3.0",
     "autoprefixer": "^10.4.4",
     "babel-eslint": "9.x",
     "babel-loader": "^8.2.4",
-    "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-module-resolver": "^5.0.0",
     "clean-webpack-plugin": "^3.0.0",
     "copy-webpack-plugin": "^9.0.1",
diff --git a/platform/app/cypress.config.ts b/platform/app/cypress.config.ts
index c575e7c56cd..648c42889d8 100644
--- a/platform/app/cypress.config.ts
+++ b/platform/app/cypress.config.ts
@@ -28,6 +28,7 @@ export default defineConfig({
     defaultCommandTimeout: 10000,
     requestTimeout: 10000,
     responseTimeout: 10000,
+    pageLoadTimeout: 10000,
     specPattern: 'cypress/integration/**/*.spec.[jt]s',
     projectId: '4oe38f',
     video: true,
diff --git a/platform/app/cypress/integration/volume/MPR.spec.js b/platform/app/cypress/integration/volume/MPR.spec.js
index 2ef026ec90d..9929519e5b2 100644
--- a/platform/app/cypress/integration/volume/MPR.spec.js
+++ b/platform/app/cypress/integration/volume/MPR.spec.js
@@ -78,8 +78,8 @@ describe('OHIF MPR', () => {
         const fOR = Object.keys(fORMap)[0];
         const fORAnnotation = fORMap[fOR];
 
-        // it should have crosshairs as the only key
-        expect(Object.keys(fORAnnotation)).to.have.length(1);
+        // it should have crosshairs as the only key (references lines make this 2)
+        expect(Object.keys(fORAnnotation)).to.have.length(2);
 
         const crosshairs = fORAnnotation.Crosshairs;
 
diff --git a/platform/app/cypress/support/aliases.js b/platform/app/cypress/support/aliases.js
index 5b28709ca67..0d677f5d250 100644
--- a/platform/app/cypress/support/aliases.js
+++ b/platform/app/cypress/support/aliases.js
@@ -61,8 +61,8 @@ export function initStudyListAliasesOnDesktop() {
 
   // We can't use data attributes (e.g. data--cy) for these since
   // they are using third party libraries (i.e. react-dates, react-select)
-  cy.get('#date-range-studyDate-start-date').as('studyListStartDate');
-  cy.get('#date-range-studyDate-end-date').as('studyListEndDate');
+  cy.get('[data-cy="input-date-range-start"').as('studyListStartDate');
+  cy.get('[data-cy="input-date-range-end"').as('studyListEndDate');
   cy.get('#input-modalities').as('modalities');
 }
 
diff --git a/platform/app/package.json b/platform/app/package.json
index 502aca4daa1..638bd1c3539 100644
--- a/platform/app/package.json
+++ b/platform/app/package.json
@@ -71,7 +71,9 @@
     "@ohif/mode-microscopy": "3.9.0-beta.21",
     "@ohif/mode-test": "3.9.0-beta.21",
     "@ohif/ui": "3.9.0-beta.21",
-    "@types/react": "^17.0.38",
+    "@ohif/ui-next": "3.9.0-beta.14",
+    "@svgr/webpack": "^8.1.0",
+    "@types/react": "^18.3.3",
     "classnames": "^2.3.2",
     "core-js": "^3.16.1",
     "cornerstone-math": "^0.1.9",
@@ -87,11 +89,11 @@
     "oidc-client": "1.11.5",
     "prop-types": "^15.7.2",
     "query-string": "^6.12.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-dropzone": "^10.1.7",
     "react-i18next": "^12.2.2",
-    "react-resize-detector": "^9.1.0",
+    "react-resize-detector": "^10.0.1",
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1"
   },
diff --git a/platform/app/src/App.tsx b/platform/app/src/App.tsx
index 0d06d22eeb9..463f4dd5803 100644
--- a/platform/app/src/App.tsx
+++ b/platform/app/src/App.tsx
@@ -1,4 +1,5 @@
 // External
+
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import i18n from '@ohif/i18n';
@@ -23,6 +24,7 @@ import {
   UserAuthenticationProvider,
   ToolboxProvider,
 } from '@ohif/ui';
+import { ThemeWrapper as ThemeWrapperNext, NotificationProvider } from '@ohif/ui-next';
 // Viewer Project
 // TODO: Should this influence study list?
 import { AppConfigProvider } from '@state';
@@ -36,7 +38,27 @@ let commandsManager: CommandsManager,
   serviceProvidersManager: ServiceProvidersManager,
   hotkeysManager: HotkeysManager;
 
-function App({ config, defaultExtensions, defaultModes }) {
+function App({
+  config = {
+    /**
+     * Relative route from domain root that OHIF instance is installed at.
+     * For example:
+     *
+     * Hosted at: https://ohif.org/where-i-host-the/viewer/
+     * Value: `/where-i-host-the/viewer/`
+     * */
+    routerBaseName: '/',
+    /**
+     *
+     */
+    showLoadingIndicator: true,
+    showStudyList: true,
+    oidc: [],
+    extensions: [],
+  },
+  defaultExtensions = [],
+  defaultModes = [],
+}) {
   const [init, setInit] = useState(null);
   useEffect(() => {
     const run = async () => {
@@ -83,11 +105,13 @@ function App({ config, defaultExtensions, defaultModes }) {
     [AppConfigProvider, { value: appConfigState }],
     [UserAuthenticationProvider, { service: userAuthenticationService }],
     [I18nextProvider, { i18n }],
+    [ThemeWrapperNext],
     [ThemeWrapper],
     [ToolboxProvider],
     [ViewportGridProvider, { service: viewportGridService }],
     [ViewportDialogProvider, { service: uiViewportDialogService }],
     [CineProvider, { service: cineService }],
+    // [NotificationProvider, { service: uiNotificationService }],
     [SnackbarProvider, { service: uiNotificationService }],
     [DialogProvider, { service: uiDialogService }],
     [ModalProvider, { service: uiModalService, modal: Modal }],
@@ -153,27 +177,9 @@ App.propTypes = {
   /* Extensions that are "bundled" or "baked-in" to the application.
    * These would be provided at build time as part of they entry point. */
   defaultExtensions: PropTypes.array,
-};
-
-App.defaultProps = {
-  config: {
-    /**
-     * Relative route from domain root that OHIF instance is installed at.
-     * For example:
-     *
-     * Hosted at: https://ohif.org/where-i-host-the/viewer/
-     * Value: `/where-i-host-the/viewer/`
-     * */
-    routerBaseName: '/',
-    /**
-     *
-     */
-    showLoadingIndicator: true,
-    showStudyList: true,
-    oidc: [],
-    extensions: [],
-  },
-  defaultExtensions: [],
+  /* Modes that are "bundled" or "baked-in" to the application.
+   * These would be provided at build time as part of they entry point. */
+  defaultModes: PropTypes.array,
 };
 
 export default App;
diff --git a/platform/app/src/components/ViewportGrid.tsx b/platform/app/src/components/ViewportGrid.tsx
index 427887b9c80..807b2072dac 100644
--- a/platform/app/src/components/ViewportGrid.tsx
+++ b/platform/app/src/components/ViewportGrid.tsx
@@ -1,5 +1,5 @@
 import React, { useEffect, useCallback, useRef, useState } from 'react';
-import ReactResizeDetector from 'react-resize-detector';
+import { useResizeDetector } from 'react-resize-detector';
 import PropTypes from 'prop-types';
 import { Types, MeasurementService } from '@ohif/core';
 import { ViewportGrid, ViewportPane, useViewportGrid } from '@ohif/ui';
@@ -8,16 +8,22 @@ import classNames from 'classnames';
 import { useAppConfig } from '@state';
 
 function ViewerViewportGrid(props: withAppTypes) {
-  const { servicesManager, viewportComponents, dataSource } = props;
+  const { servicesManager, viewportComponents = [], dataSource } = props;
   const [viewportGrid, viewportGridService] = useViewportGrid();
   const [appConfig] = useAppConfig();
 
   const { layout, activeViewportId, viewports, isHangingProtocolLayout } = viewportGrid;
   const { numCols, numRows } = layout;
-  const elementRef = useRef(null);
+  const { ref: resizeRef } = useResizeDetector({
+    refreshMode: 'debounce',
+    refreshRate: 7,
+    refreshOptions: { leading: true },
+    onResize: () => {
+      viewportGridService.setViewportGridSizeChanged();
+    },
+  });
   const layoutHash = useRef(null);
 
-  // TODO -> Need some way of selecting which displaySets hit the viewports.
   const { displaySetService, measurementService, hangingProtocolService, uiNotificationService } =
     servicesManager.services;
 
@@ -198,50 +204,6 @@ function ViewerViewportGrid(props: withAppTypes) {
     };
   }, [viewports]);
 
-  /**
-  const onDoubleClick = viewportId => {
-    // TODO -> Disabled for now.
-    // onNewImage on a cornerstone viewport is firing setDisplaySetsForViewport.
-    // Which it really really shouldn't. We need a larger fix for jump to
-    // measurements and all cornerstone "imageIndex" state to fix this.
-    if (cachedLayout) {
-      viewportGridService.set({
-        numCols: cachedLayout.numCols,
-        numRows: cachedLayout.numRows,
-        activeViewportId: cachedLayout.activeViewportId,
-        viewports: cachedLayout.viewports,
-        cachedLayout: null,
-      });
-
-      return;
-    }
-
-    const cachedViewports = viewports.map(viewport => {
-      return {
-        displaySetInstanceUID: viewport.displaySetInstanceUID,
-      };
-    });
-
-    viewportGridService.set({
-      numCols: 1,
-      numRows: 1,
-      activeViewportId: 0,
-      viewports: [
-        {
-          displaySetInstanceUID: viewports[viewportId].displaySetInstanceUID,
-          imageIndex: undefined,
-        },
-      ],
-      cachedLayout: {
-        numCols,
-        numRows,
-        viewports: cachedViewports,
-        activeViewportId: viewportId,
-      },
-    });
-  };
-  */
-
   const onDropHandler = (viewportId, { displaySetInstanceUID }) => {
     const updatedViewports = _getUpdatedViewports(viewportId, displaySetInstanceUID);
     viewportGridService.setDisplaySetsForViewports(updatedViewports);
@@ -363,21 +325,13 @@ function ViewerViewportGrid(props: withAppTypes) {
 
   return (
     <div
-      ref={elementRef}
+      ref={resizeRef}
       className="h-full w-full"
     >
       <ViewportGrid
         numRows={numRows}
         numCols={numCols}
       >
-        <ReactResizeDetector
-          refreshMode="debounce"
-          refreshRate={7} // ms seems to be fine for 10 viewports
-          onResize={() => {
-            viewportGridService.setViewportGridSizeChanged();
-          }}
-          targetRef={elementRef.current}
-        />
         {getViewportPanes()}
       </ViewportGrid>
     </div>
@@ -389,10 +343,6 @@ ViewerViewportGrid.propTypes = {
   servicesManager: PropTypes.instanceOf(Object).isRequired,
 };
 
-ViewerViewportGrid.defaultProps = {
-  viewportComponents: [],
-};
-
 function _getViewportComponent(displaySets, viewportComponents, uiNotificationService) {
   if (!displaySets || !displaySets.length) {
     return EmptyViewport;
diff --git a/platform/app/src/index.js b/platform/app/src/index.js
index 7b8d63324da..ba1beb05935 100644
--- a/platform/app/src/index.js
+++ b/platform/app/src/index.js
@@ -2,6 +2,7 @@
  * Entry point for development and production PWA builds.
  */
 import 'regenerator-runtime/runtime';
+import { createRoot } from 'react-dom/client';
 import App from './App';
 import React from 'react';
 import ReactDOM from 'react-dom';
@@ -35,10 +36,10 @@ loadDynamicConfig(window.config).then(config_json => {
     defaultModes,
   };
 
-  /** Create App */
-  const app = React.createElement(App, appProps, null);
-  /** Render */
-  ReactDOM.render(app, document.getElementById('root'));
+  const container = document.getElementById('root');
+
+  const root = createRoot(container);
+  root.render(React.createElement(App, appProps));
 });
 
 export { history };
diff --git a/platform/app/src/routes/Mode/Mode.tsx b/platform/app/src/routes/Mode/Mode.tsx
index 783356ddaf6..07b1512dfdd 100644
--- a/platform/app/src/routes/Mode/Mode.tsx
+++ b/platform/app/src/routes/Mode/Mode.tsx
@@ -306,9 +306,11 @@ export default function ModeRoute({
       }
       // The unsubscriptions must occur before the extension onModeExit
       // in order to prevent exceptions during cleanup caused by spurious events
-      unsubscriptions.forEach(unsub => {
-        unsub();
-      });
+      if (unsubscriptions) {
+        unsubscriptions.forEach(unsub => {
+          unsub();
+        });
+      }
       // The extension manager must be called after the mode, this is
       // expected to cleanup the state to a standard setup.
       extensionManager.onModeExit();
diff --git a/platform/app/tailwind.config.js b/platform/app/tailwind.config.js
index bc354e5a1a6..8c40c371f55 100644
--- a/platform/app/tailwind.config.js
+++ b/platform/app/tailwind.config.js
@@ -1,5 +1,4 @@
-// Todo: we probably should add external installed extensions/modes here as well.
-
+/** @type {import('tailwindcss').Config} */
 module.exports = {
   // Note: in Tailwind 3.0, JIT will purge unused styles by default
   // but in development, it is often useful to disable this to see
@@ -7,6 +6,7 @@ module.exports = {
   // ...(process.env.NODE_ENV === 'development' && {
   //   safelist: [{ pattern: /.*/ }],
   // }),
+  presets: [require('../ui/tailwind.config.js'), require('../ui-next/tailwind.config.js')],
   content: [
     './src/**/*.{jsx,js,ts,tsx, css}',
     '../../extensions/**/*.{jsx,js,ts,tsx, css}',
@@ -14,256 +14,10 @@ module.exports = {
     '../../modes/**/*.{jsx,js,ts,tsx, css}',
     './node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx, css}',
     '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
-    '../../node_modules/@ohif/ui/src/**/*.{js,jsx,ts,tsx,css}',
+    '../../node_modules/@ohif/ui-next/src/**/*.{js,jsx,ts,tsx,css}',
     '../../node_modules/@ohif/extension-*/src/**/*.{js,jsx,css, ts,tsx}',
   ],
   theme: {
-    screens: {
-      sm: '640px',
-      md: '768px',
-      lg: '1024px',
-      xl: '1280px',
-    },
-    colors: {
-      overlay: 'rgba(0, 0, 0, 0.8)',
-      transparent: 'transparent',
-      black: '#000',
-      white: '#fff',
-      initial: 'initial',
-      inherit: 'inherit',
-
-      indigo: {
-        dark: '#0b1a42',
-      },
-      aqua: {
-        pale: '#7bb2ce',
-      },
-
-      primary: {
-        light: '#5acce6',
-        main: '#0944b3',
-        dark: '#090c29',
-        active: '#348cfd',
-      },
-
-      inputfield: {
-        main: '#3a3f99',
-        disabled: '#2b166b',
-        focus: '#5acce6',
-        placeholder: '#39383f',
-      },
-
-      secondary: {
-        light: '#3a3f99',
-        main: '#2b166b',
-        dark: '#041c4a',
-        active: '#1f1f27',
-      },
-
-      common: {
-        bright: '#e1e1e1',
-        light: '#a19fad',
-        main: '#fff',
-        dark: '#726f7e',
-        active: '#2c3074',
-      },
-
-      customgreen: {
-        100: '#05D97C',
-        200: '#0FD97C',
-      },
-
-      customblue: {
-        10: '#0A163F',
-        20: '#0B1F54',
-        30: '#09286e',
-        40: '#0E307F',
-        50: '#0F3A94',
-        80: '#1454D4',
-        100: '#c4fdff',
-        200: '#38daff',
-        300: '#1D204D',
-        400: '#90A0C1',
-      },
-
-      customgray: {
-        100: '#262943',
-      },
-
-      gray: {
-        100: '#f7fafc',
-        200: '#edf2f7',
-        300: '#e2e8f0',
-        400: '#cbd5e0',
-        500: '#a0aec0',
-        600: '#718096',
-        700: '#4a5568',
-        800: '#2d3748',
-        900: '#1a202c',
-      },
-      red: {
-        100: '#fff5f5',
-        200: '#fed7d7',
-        300: '#feb2b2',
-        400: '#fc8181',
-        500: '#f56565',
-        600: '#e53e3e',
-        700: '#c53030',
-        800: '#9b2c2c',
-        900: '#742a2a',
-      },
-      orange: {
-        100: '#fffaf0',
-        200: '#feebc8',
-        300: '#fbd38d',
-        400: '#f6ad55',
-        500: '#ed8936',
-        600: '#dd6b20',
-        700: '#c05621',
-        800: '#9c4221',
-        900: '#7b341e',
-      },
-      yellow: {
-        100: '#fffff0',
-        200: '#fefcbf',
-        300: '#faf089',
-        400: '#f6e05e',
-        500: '#ecc94b',
-        600: '#d69e2e',
-        700: '#b7791f',
-        800: '#975a16',
-        900: '#744210',
-      },
-      green: {
-        100: '#f0fff4',
-        200: '#c6f6d5',
-        300: '#9ae6b4',
-        400: '#68d391',
-        500: '#48bb78',
-        600: '#38a169',
-        700: '#2f855a',
-        800: '#276749',
-        900: '#22543d',
-      },
-      teal: {
-        100: '#e6fffa',
-        200: '#b2f5ea',
-        300: '#81e6d9',
-        400: '#4fd1c5',
-        500: '#38b2ac',
-        600: '#319795',
-        700: '#2c7a7b',
-        800: '#285e61',
-        900: '#234e52',
-      },
-      blue: {
-        100: '#ebf8ff',
-        200: '#bee3f8',
-        300: '#90cdf4',
-        400: '#63b3ed',
-        500: '#4299e1',
-        600: '#3182ce',
-        700: '#2b6cb0',
-        800: '#2c5282',
-        900: '#2a4365',
-      },
-      indigo: {
-        100: '#ebf4ff',
-        200: '#c3dafe',
-        300: '#a3bffa',
-        400: '#7f9cf5',
-        500: '#667eea',
-        600: '#5a67d8',
-        700: '#4c51bf',
-        800: '#434190',
-        900: '#3c366b',
-      },
-      purple: {
-        100: '#faf5ff',
-        200: '#e9d8fd',
-        300: '#d6bcfa',
-        400: '#b794f4',
-        500: '#9f7aea',
-        600: '#805ad5',
-        700: '#6b46c1',
-        800: '#553c9a',
-        900: '#44337a',
-      },
-      pink: {
-        100: '#fff5f7',
-        200: '#fed7e2',
-        300: '#fbb6ce',
-        400: '#f687b3',
-        500: '#ed64a6',
-        600: '#d53f8c',
-        700: '#b83280',
-        800: '#97266d',
-        900: '#702459',
-      },
-    },
-    backgroundColor: theme => theme('colors'),
-    backgroundPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    backgroundSize: {
-      auto: 'auto',
-      cover: 'cover',
-      contain: 'contain',
-    },
-    borderColor: theme => ({
-      ...theme('colors'),
-      DEFAULT: theme('colors.gray.300', 'currentColor'),
-    }),
-    boxShadow: {
-      xs: '0 0 0 1px rgba(0, 0, 0, 0.05)',
-      sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',
-      DEFAULT: '0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)',
-      md: '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)',
-      lg: '0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)',
-      xl: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)',
-      '2xl': '0 25px 50px -12px rgba(0, 0, 0, 0.25)',
-      inner: 'inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)',
-      outline: '0 0 0 3px rgba(66, 153, 225, 0.5)',
-      none: 'none',
-    },
-    container: {},
-    cursor: {
-      auto: 'auto',
-      default: 'default',
-      pointer: 'pointer',
-      wait: 'wait',
-      text: 'text',
-      move: 'move',
-      'not-allowed': 'not-allowed',
-    },
-    fill: {
-      current: 'currentColor',
-    },
-    flex: {
-      1: '1 1 0%',
-      0.3: '0.3 0.3 0%',
-      0.5: '0.5 0.5 0%',
-      auto: '1 1 auto',
-      initial: '0 1 auto',
-      none: 'none',
-      static: '0 0 auto',
-    },
-    flexGrow: {
-      0: '0',
-      DEFAULT: '1',
-    },
-    flexShrink: {
-      0: '0',
-      DEFAULT: '1',
-    },
     fontFamily: {
       sans: [
         'Inter',
@@ -296,500 +50,5 @@ module.exports = {
       '5xl': '3rem',
       '6xl': '4rem',
     },
-    fontWeight: {
-      hairline: '100',
-      thin: '200',
-      light: '300',
-      normal: '300',
-      medium: '500',
-      semibold: '600',
-      bold: '700',
-      extrabold: '800',
-      black: '900',
-    },
-    height: theme => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      full: '100%',
-      screen: '100vh',
-      inherit: 'inherit',
-    }),
-    inset: theme => ({
-      ...theme('spacing'),
-      0: '0',
-      auto: 'auto',
-      full: '100%',
-      viewport: '0.5rem',
-      '1/2': '50%',
-      'viewport-scrollbar': '1.3rem',
-    }),
-    minHeight: theme => ({
-      ...theme('spacing'),
-      0: '0',
-      full: '100%',
-      screen: '100vh',
-    }),
-    letterSpacing: {
-      tighter: '-0.05em',
-      tight: '-0.025em',
-      normal: '0',
-      wide: '0.025em',
-      wider: '0.05em',
-      widest: '0.1em',
-    },
-    lineHeight: {
-      none: '1',
-      tight: '1.25',
-      snug: '1.375',
-      normal: '1.5',
-      relaxed: '1.625',
-      loose: '2',
-      3: '.75rem',
-      4: '1rem',
-      5: '1.25rem',
-      6: '1.5rem',
-      7: '1.75rem',
-      8: '2rem',
-      9: '2.25rem',
-      10: '2.5rem',
-    },
-    listStyleType: {
-      none: 'none',
-      disc: 'disc',
-      decimal: 'decimal',
-    },
-    margin: (theme, { negative }) => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      ...negative(theme('spacing')),
-    }),
-    maxHeight: theme => ({
-      full: '100%',
-      screen: '100vh',
-      ...theme('spacing'),
-    }),
-    maxWidth: (theme, { breakpoints }) => ({
-      none: 'none',
-      xs: '20rem',
-      sm: '24rem',
-      md: '28rem',
-      lg: '32rem',
-      xl: '36rem',
-      '2xl': '42rem',
-      '3xl': '48rem',
-      '4xl': '56rem',
-      '5xl': '64rem',
-      '6xl': '72rem',
-      full: '100%',
-      ...breakpoints(theme('screens')),
-      ...theme('spacing'),
-    }),
-    minWidth: theme => ({
-      ...theme('spacing'),
-      0: '0',
-      xs: '2rem',
-      sm: '4rem',
-      md: '6rem',
-      lg: '8rem',
-      xl: '10rem',
-      full: '100%',
-    }),
-    objectPosition: {
-      bottom: 'bottom',
-      center: 'center',
-      left: 'left',
-      'left-bottom': 'left bottom',
-      'left-top': 'left top',
-      right: 'right',
-      'right-bottom': 'right bottom',
-      'right-top': 'right top',
-      top: 'top',
-    },
-    opacity: {
-      0: '0',
-      5: '.5',
-      10: '.10',
-      15: '.15',
-      20: '.20',
-      25: '.25',
-      30: '.30',
-      35: '.35',
-      40: '.40',
-      45: '.45',
-      50: '.50',
-      55: '.55',
-      60: '.60',
-      65: '.65',
-      70: '.70',
-      75: '.75',
-      80: '.80',
-      85: '.85',
-      90: '.90',
-      95: '.95',
-      100: '1',
-    },
-    order: {
-      first: '-9999',
-      last: '9999',
-      none: '0',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-    },
-    padding: theme => theme('spacing'),
-    placeholderColor: theme => theme('colors'),
-    stroke: theme => ({
-      ...theme('colors'),
-      current: 'currentColor',
-    }),
-    strokeWidth: {
-      0: '0',
-      1: '1',
-      2: '2',
-    },
-    textColor: theme => theme('colors'),
-    width: theme => ({
-      auto: 'auto',
-      ...theme('spacing'),
-      '1/2': '50%',
-      '1/3': '33.333333%',
-      '2/3': '66.666667%',
-      '1/4': '25%',
-      '2/4': '50%',
-      '3/4': '75%',
-      '1/5': '20%',
-      '2/5': '40%',
-      '3/5': '60%',
-      '4/5': '80%',
-      '1/6': '16.666667%',
-      '2/6': '33.333333%',
-      '3/6': '50%',
-      '4/6': '66.666667%',
-      '5/6': '83.333333%',
-      '1/12': '8.333333%',
-      '2/12': '16.666667%',
-      '3/12': '25%',
-      '4/12': '33.333333%',
-      '5/12': '41.666667%',
-      '6/12': '50%',
-      '7/12': '58.333333%',
-      '8/12': '66.666667%',
-      '9/12': '75%',
-      '10/12': '83.333333%',
-      '11/12': '91.666667%',
-      '1/24': '4.166666667%',
-      '2/24': '8.333333333%',
-      '3/24': '12.5%',
-      '4/24': '16.66666667%',
-      '5/24': '20.83333333%',
-      '6/24': '25%',
-      '7/24': '29.16666667%',
-      '8/24': '33.33333333%',
-      '9/24': '37.5%',
-      '10/24': '41.66666667%',
-      '11/24': '45.83333333%',
-      '12/24': '50%',
-      '13/24': '54.16666667%',
-      '14/24': '58.33333333%',
-      '15/24': '62.5%',
-      '16/24': '66.66666667%',
-      '17/24': '70.83333333%',
-      '18/24': '75%',
-      '19/24': '79.16666667%',
-      '20/24': '83.33333333%',
-      '21/24': '87.5%',
-      '22/24': '91.66666667%',
-      '23/24': '95.83333333%',
-      full: '100%',
-      screen: '100vw',
-      'max-content': 'max-content',
-    }),
-    zIndex: {
-      auto: 'auto',
-      0: '0',
-      10: '10',
-      20: '20',
-      30: '30',
-      40: '40',
-      50: '50',
-    },
-    gap: theme => theme('spacing'),
-    gridTemplateColumns: {
-      none: 'none',
-      1: 'repeat(1, minmax(0, 1fr))',
-      2: 'repeat(2, minmax(0, 1fr))',
-      3: 'repeat(3, minmax(0, 1fr))',
-      4: 'repeat(4, minmax(0, 1fr))',
-      5: 'repeat(5, minmax(0, 1fr))',
-      6: 'repeat(6, minmax(0, 1fr))',
-      7: 'repeat(7, minmax(0, 1fr))',
-      8: 'repeat(8, minmax(0, 1fr))',
-      9: 'repeat(9, minmax(0, 1fr))',
-      10: 'repeat(10, minmax(0, 1fr))',
-      11: 'repeat(11, minmax(0, 1fr))',
-      12: 'repeat(12, minmax(0, 1fr))',
-    },
-    gridColumn: {
-      auto: 'auto',
-      'span-1': 'span 1 / span 1',
-      'span-2': 'span 2 / span 2',
-      'span-3': 'span 3 / span 3',
-      'span-4': 'span 4 / span 4',
-      'span-5': 'span 5 / span 5',
-      'span-6': 'span 6 / span 6',
-      'span-7': 'span 7 / span 7',
-      'span-8': 'span 8 / span 8',
-      'span-9': 'span 9 / span 9',
-      'span-10': 'span 10 / span 10',
-      'span-11': 'span 11 / span 11',
-      'span-12': 'span 12 / span 12',
-    },
-    gridColumnStart: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      13: '13',
-    },
-    gridColumnEnd: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-      8: '8',
-      9: '9',
-      10: '10',
-      11: '11',
-      12: '12',
-      13: '13',
-    },
-    gridTemplateRows: {
-      none: 'none',
-      1: 'repeat(1, minmax(0, 1fr))',
-      2: 'repeat(2, minmax(0, 1fr))',
-      3: 'repeat(3, minmax(0, 1fr))',
-      4: 'repeat(4, minmax(0, 1fr))',
-      5: 'repeat(5, minmax(0, 1fr))',
-      6: 'repeat(6, minmax(0, 1fr))',
-    },
-    gridRow: {
-      auto: 'auto',
-      'span-1': 'span 1 / span 1',
-      'span-2': 'span 2 / span 2',
-      'span-3': 'span 3 / span 3',
-      'span-4': 'span 4 / span 4',
-      'span-5': 'span 5 / span 5',
-      'span-6': 'span 6 / span 6',
-    },
-    gridRowStart: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-    },
-    gridRowEnd: {
-      auto: 'auto',
-      1: '1',
-      2: '2',
-      3: '3',
-      4: '4',
-      5: '5',
-      6: '6',
-      7: '7',
-    },
-    transformOrigin: {
-      center: 'center',
-      top: 'top',
-      'top-right': 'top right',
-      right: 'right',
-      'bottom-right': 'bottom right',
-      bottom: 'bottom',
-      'bottom-left': 'bottom left',
-      left: 'left',
-      'top-left': 'top left',
-    },
-    scale: {
-      0: '0',
-      50: '.5',
-      75: '.75',
-      90: '.9',
-      95: '.95',
-      100: '1',
-      105: '1.05',
-      110: '1.1',
-      125: '1.25',
-      150: '1.5',
-    },
-    rotate: {
-      '-180': '-180deg',
-      '-90': '-90deg',
-      '-45': '-45deg',
-      0: '0',
-      45: '45deg',
-      90: '90deg',
-      180: '180deg',
-    },
-    translate: (theme, { negative }) => ({
-      ...theme('spacing'),
-      ...negative(theme('spacing')),
-      '-full': '-100%',
-      '-1/2': '-50%',
-      '1/2': '50%',
-      full: '100%',
-    }),
-    skew: {
-      '-12': '-12deg',
-      '-6': '-6deg',
-      '-3': '-3deg',
-      0: '0',
-      3: '3deg',
-      6: '6deg',
-      12: '12deg',
-    },
-    transitionProperty: {
-      none: 'none',
-      all: 'all',
-      height: 'height',
-      DEFAULT:
-        'background-color, border-color, color, fill, stroke, opacity, box-shadow, transform',
-      colors: 'background-color, border-color, color, fill, stroke',
-      opacity: 'opacity',
-      shadow: 'box-shadow',
-      transform: 'transform',
-    },
-    transitionTimingFunction: {
-      linear: 'linear',
-      in: 'cubic-bezier(0.4, 0, 1, 1)',
-      out: 'cubic-bezier(0, 0, 0.2, 1)',
-      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
-    },
-    transitionDuration: {
-      75: '75ms',
-      100: '100ms',
-      150: '150ms',
-      200: '200ms',
-      300: '300ms',
-      500: '500ms',
-      700: '700ms',
-      1000: '1000ms',
-    },
-  },
-  variants: {
-    accessibility: ['responsive', 'focus'],
-    alignContent: ['responsive'],
-    alignItems: ['responsive'],
-    alignSelf: ['responsive'],
-    appearance: ['responsive'],
-    backgroundAttachment: ['responsive'],
-    backgroundColor: ['responsive', 'hover', 'focus', 'active', 'group-focus', 'group-hover'],
-    backgroundPosition: ['responsive'],
-    backgroundRepeat: ['responsive'],
-    backgroundSize: ['responsive'],
-    borderCollapse: ['responsive'],
-    borderColor: ['responsive', 'hover', 'focus', 'active', 'group-focus', 'group-hover'],
-    borderRadius: ['responsive', 'focus', 'first', 'last'],
-    borderStyle: ['responsive', 'focus'],
-    borderWidth: ['responsive', 'focus', 'first', 'last'],
-    boxShadow: ['responsive', 'hover', 'focus'],
-    boxSizing: ['responsive'],
-    cursor: ['responsive'],
-    display: ['responsive'],
-    fill: ['responsive'],
-    flex: ['responsive'],
-    flexDirection: ['responsive'],
-    flexGrow: ['responsive'],
-    flexShrink: ['responsive'],
-    flexWrap: ['responsive'],
-    float: ['responsive'],
-    clear: ['responsive'],
-    fontFamily: ['responsive'],
-    fontSize: ['responsive'],
-    fontSmoothing: ['responsive'],
-    fontStyle: ['responsive'],
-    fontWeight: ['responsive', 'hover', 'focus'],
-    height: ['responsive'],
-    inset: ['responsive'],
-    justifyContent: ['responsive'],
-    letterSpacing: ['responsive'],
-    lineHeight: ['responsive'],
-    listStylePosition: ['responsive'],
-    listStyleType: ['responsive'],
-    margin: ['responsive'],
-    maxHeight: ['responsive'],
-    maxWidth: ['responsive'],
-    minHeight: ['responsive'],
-    minWidth: ['responsive'],
-    objectFit: ['responsive'],
-    objectPosition: ['responsive'],
-    opacity: ['responsive', 'hover', 'focus', 'active'],
-    order: ['responsive'],
-    outline: ['responsive', 'focus'],
-    overflow: ['responsive'],
-    padding: ['responsive', 'first'],
-    placeholderColor: ['responsive', 'focus'],
-    pointerEvents: ['responsive'],
-    position: ['responsive'],
-    resize: ['responsive'],
-    stroke: ['responsive'],
-    strokeWidth: ['responsive'],
-    tableLayout: ['responsive'],
-    textAlign: ['responsive'],
-    textColor: ['responsive', 'hover', 'focus', 'active', 'group-hover'],
-    textDecoration: ['responsive', 'hover', 'focus'],
-    textTransform: ['responsive'],
-    userSelect: ['responsive'],
-    verticalAlign: ['responsive'],
-    visibility: ['responsive'],
-    whitespace: ['responsive'],
-    width: ['responsive'],
-    wordBreak: ['responsive'],
-    zIndex: ['responsive'],
-    gap: ['responsive'],
-    gridAutoFlow: ['responsive'],
-    gridTemplateColumns: ['responsive'],
-    gridColumn: ['responsive'],
-    gridColumnStart: ['responsive'],
-    gridColumnEnd: ['responsive'],
-    gridTemplateRows: ['responsive'],
-    gridRow: ['responsive'],
-    gridRowStart: ['responsive'],
-    gridRowEnd: ['responsive'],
-    transform: ['responsive'],
-    transformOrigin: ['responsive'],
-    scale: ['responsive', 'hover', 'focus'],
-    rotate: ['responsive', 'hover', 'focus'],
-    translate: ['responsive', 'hover', 'focus'],
-    skew: ['responsive', 'hover', 'focus'],
-    transitionProperty: ['responsive'],
-    transitionTimingFunction: ['responsive'],
-    transitionDuration: ['responsive'],
   },
-  corePlugins: {},
-  plugins: [],
 };
diff --git a/platform/cli/templates/extension/.webpack/webpack.prod.js b/platform/cli/templates/extension/.webpack/webpack.prod.js
index 070a723e38d..3a78c481305 100644
--- a/platform/cli/templates/extension/.webpack/webpack.prod.js
+++ b/platform/cli/templates/extension/.webpack/webpack.prod.js
@@ -43,7 +43,40 @@ const config = {
     },
   ],
   module: {
+
     rules: [
+      {
+        test: /\.svg?$/,
+        oneOf: [
+          {
+            use: [
+              {
+                loader: '@svgr/webpack',
+                options: {
+                  svgoConfig: {
+                    plugins: [
+                      {
+                        name: 'preset-default',
+                        params: {
+                          overrides: {
+                            removeViewBox: false
+                          },
+                        },
+                      },
+                    ]
+                  },
+                  prettier: false,
+                  svgo: true,
+                  titleProp: true,
+                },
+              },
+            ],
+            issuer: {
+              and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+            },
+          },
+        ],
+      },
       {
         test: /(\.jsx|\.js|\.tsx|\.ts)$/,
         loader: 'babel-loader',
diff --git a/platform/cli/templates/extension/babel.config.js b/platform/cli/templates/extension/babel.config.js
index 371f77fcf4f..7cbabaf7870 100644
--- a/platform/cli/templates/extension/babel.config.js
+++ b/platform/cli/templates/extension/babel.config.js
@@ -1,21 +1,5 @@
-// https://babeljs.io/docs/en/options#babelrcroots
-const { extendDefaultPlugins } = require('svgo');
-
 module.exports = {
   plugins: [
-    [
-      'inline-react-svg',
-      {
-        svgo: {
-          plugins: extendDefaultPlugins([
-            {
-              name: 'removeViewBox',
-              active: false,
-            },
-          ]),
-        },
-      },
-    ],
     ['@babel/plugin-proposal-class-properties', { loose: true }],
     '@babel/plugin-transform-typescript',
     ['@babel/plugin-proposal-private-property-in-object', { loose: true }],
diff --git a/platform/cli/templates/extension/dependencies.json b/platform/cli/templates/extension/dependencies.json
index 661ccf7d770..943bf89c8e0 100644
--- a/platform/cli/templates/extension/dependencies.json
+++ b/platform/cli/templates/extension/dependencies.json
@@ -20,8 +20,8 @@
     "@ohif/extension-cornerstone": "^3.0.0",
     "@ohif/i18n": "^1.0.0",
     "prop-types": "^15.6.2",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^12.2.2",
     "react-router": "^6.8.1",
     "react-router-dom": "^6.8.1",
@@ -47,7 +47,7 @@
     "@babel/plugin-proposal-private-property-in-object": "7.21.11",
     "babel-eslint": "9.x",
     "babel-loader": "^8.2.4",
-    "babel-plugin-inline-react-svg": "^2.0.2",
+    "@svgr/webpack": "^8.1.0",
     "babel-plugin-module-resolver": "^5.0.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.2.0",
diff --git a/platform/cli/templates/mode/.webpack/webpack.prod.js b/platform/cli/templates/mode/.webpack/webpack.prod.js
index d0829f3c6a2..9f742f9c9f1 100644
--- a/platform/cli/templates/mode/.webpack/webpack.prod.js
+++ b/platform/cli/templates/mode/.webpack/webpack.prod.js
@@ -49,6 +49,38 @@ const config = {
   ],
   module: {
     rules: [
+      {
+        test: /\.svg?$/,
+        oneOf: [
+          {
+            use: [
+              {
+                loader: '@svgr/webpack',
+                options: {
+                  svgoConfig: {
+                    plugins: [
+                      {
+                        name: 'preset-default',
+                        params: {
+                          overrides: {
+                            removeViewBox: false
+                          },
+                        },
+                      },
+                    ]
+                  },
+                  prettier: false,
+                  svgo: true,
+                  titleProp: true,
+                },
+              },
+            ],
+            issuer: {
+              and: [/\.(ts|tsx|js|jsx|md|mdx)$/],
+            },
+          },
+        ],
+      },
       {
         test: /(\.jsx|\.js|\.tsx|\.ts)$/,
         loader: 'babel-loader',
diff --git a/platform/cli/templates/mode/babel.config.js b/platform/cli/templates/mode/babel.config.js
index a38ddda2127..e5144255190 100644
--- a/platform/cli/templates/mode/babel.config.js
+++ b/platform/cli/templates/mode/babel.config.js
@@ -1,5 +1,5 @@
 module.exports = {
-  plugins: ['inline-react-svg', '@babel/plugin-proposal-class-properties'],
+  plugins: ['@babel/plugin-proposal-class-properties'],
   env: {
     test: {
       presets: [
diff --git a/platform/cli/templates/mode/dependencies.json b/platform/cli/templates/mode/dependencies.json
index e7600852870..7e2f5de7bc1 100644
--- a/platform/cli/templates/mode/dependencies.json
+++ b/platform/cli/templates/mode/dependencies.json
@@ -37,7 +37,7 @@
     "@babel/preset-typescript": "^7.13.0",
     "babel-eslint": "^8.0.3",
     "babel-loader": "^8.0.0-beta.4",
-    "babel-plugin-inline-react-svg": "^2.0.1",
+    "@svgr/webpack": "^8.1.0",
     "clean-webpack-plugin": "^4.0.0",
     "copy-webpack-plugin": "^10.2.0",
     "cross-env": "^7.0.3",
diff --git a/platform/docs/package.json b/platform/docs/package.json
index 6eb10b79431..ce53bad9c8f 100644
--- a/platform/docs/package.json
+++ b/platform/docs/package.json
@@ -47,8 +47,8 @@
     "url-loader": "^4.1.1"
   },
   "peerDependencies": {
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "browserslist": {
     "production": [
diff --git a/platform/i18n/package.json b/platform/i18n/package.json
index 2b59560ea8c..3ea5ea009ba 100644
--- a/platform/i18n/package.json
+++ b/platform/i18n/package.json
@@ -33,8 +33,8 @@
   "peerDependencies": {
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^12.2.2"
   },
   "dependencies": {
@@ -46,8 +46,8 @@
   "devDependencies": {
     "i18next": "^17.0.3",
     "i18next-browser-languagedetector": "^3.0.1",
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "react-i18next": "^12.2.2",
     "webpack-merge": "^5.7.3"
   }
diff --git a/platform/ui-next/components.json b/platform/ui-next/components.json
new file mode 100644
index 00000000000..76dfe134828
--- /dev/null
+++ b/platform/ui-next/components.json
@@ -0,0 +1,17 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "tailwind.config.js",
+    "css": "src/tailwind.css",
+    "baseColor": "slate",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "aliases": {
+    "components": "src/components",
+    "utils": "src/lib/utils"
+  }
+}
diff --git a/platform/ui-next/package.json b/platform/ui-next/package.json
new file mode 100644
index 00000000000..d719307fa19
--- /dev/null
+++ b/platform/ui-next/package.json
@@ -0,0 +1,37 @@
+{
+  "name": "@ohif/ui-next",
+  "version": "3.9.0-beta.14",
+  "description": "Next version of OHIF Viewers UI, more customizable using shadcn/ui",
+  "main": "index.ts",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "exports": {
+    "./tailwind.config": "./tailwind.config.ts",
+    "./lib/*": "./src/lib/*.ts",
+    "./components/*": "./src/components/*.tsx",
+    ".": "./src/index.ts"
+  },
+  "dependencies": {
+    "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-icons": "^1.3.0",
+    "@radix-ui/react-popover": "^1.0.7",
+    "@radix-ui/react-slot": "^1.0.2",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.0.0",
+    "date-fns": "^3.6.0",
+    "framer-motion": "6.2.4",
+    "lucide-react": "^0.379.0",
+    "next-themes": "^0.3.0",
+    "react": "^18.3.1",
+    "react-day-picker": "^8.10.1",
+    "sonner": "^1.4.41",
+    "tailwind-merge": "^2.3.0",
+    "tailwindcss": "3.2.4",
+    "tailwindcss-animate": "^1.0.7"
+  },
+  "keywords": [],
+  "author": "OHIF",
+  "license": "MIT"
+}
diff --git a/platform/ui-next/src/components/Button/Button.tsx b/platform/ui-next/src/components/Button/Button.tsx
new file mode 100644
index 00000000000..ebad47d2fde
--- /dev/null
+++ b/platform/ui-next/src/components/Button/Button.tsx
@@ -0,0 +1,54 @@
+import * as React from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default: 'h-9 px-4 py-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+export interface ButtonProps
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
+);
+Button.displayName = 'Button';
+
+export { Button, buttonVariants };
diff --git a/platform/ui-next/src/components/Button/index.ts b/platform/ui-next/src/components/Button/index.ts
new file mode 100644
index 00000000000..437eddc1f87
--- /dev/null
+++ b/platform/ui-next/src/components/Button/index.ts
@@ -0,0 +1 @@
+export { Button , buttonVariants} from "./Button"
diff --git a/platform/ui-next/src/components/Calendar/Calendar.tsx b/platform/ui-next/src/components/Calendar/Calendar.tsx
new file mode 100644
index 00000000000..b564cbb3fd3
--- /dev/null
+++ b/platform/ui-next/src/components/Calendar/Calendar.tsx
@@ -0,0 +1,61 @@
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { DayPicker } from 'react-day-picker';
+
+import { cn } from '../../lib/utils';
+
+import { buttonVariants } from '../Button';
+
+export type CalendarProps = React.ComponentProps<typeof DayPicker>;
+
+function Calendar({ className, classNames, showOutsideDays = true, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className={cn('p-3', className)}
+      captionLayout="dropdown"
+      fromYear={1945}
+      toYear={2024}
+      labels={{
+        labelMonthDropdown: () => undefined,
+        labelYearDropdown: () => undefined,
+      }}
+      classNames={{
+        months: 'flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0',
+        month: 'space-y-4',
+        caption: 'flex justify-between items-center px-2',
+
+        caption_dropdowns: 'flex space-x-2',
+        caption_label: 'hidden',
+        nav: 'space-x-1 flex items-center',
+        table: 'w-full border-collapse space-y-1',
+        head_row: 'flex',
+        head_cell: 'text-muted-foreground rounded-md w-9 font-normal text-[0.8rem]',
+        row: 'flex w-full mt-2',
+        cell: 'h-9 w-9 text-center text-sm p-0 relative [&:has([aria-selected].day-range-end)]:rounded-r-md [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected])]:bg-accent first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md focus-within:relative focus-within:z-20',
+        day: cn(
+          buttonVariants({ variant: 'ghost' }),
+          'h-9 w-9 p-0 font-normal aria-selected:opacity-100'
+        ),
+        day_range_end: 'day-range-end',
+        day_selected:
+          'bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground',
+        day_today: 'bg-accent text-accent-foreground',
+        day_outside:
+          'day-outside text-muted-foreground opacity-50 aria-selected:bg-accent/50 aria-selected:text-muted-foreground aria-selected:opacity-30',
+        day_disabled: 'text-muted-foreground opacity-50',
+        day_range_middle: 'aria-selected:bg-accent aria-selected:text-accent-foreground',
+        day_hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        IconLeft: ({ ...props }) => <ChevronLeft className="h-4 w-4" />,
+        IconRight: ({ ...props }) => <ChevronRight className="h-4 w-4" />,
+      }}
+      {...props}
+    />
+  );
+}
+Calendar.displayName = 'Calendar';
+
+export { Calendar };
diff --git a/platform/ui-next/src/components/Calendar/index.tsx b/platform/ui-next/src/components/Calendar/index.tsx
new file mode 100644
index 00000000000..110b553c2bb
--- /dev/null
+++ b/platform/ui-next/src/components/Calendar/index.tsx
@@ -0,0 +1,3 @@
+import { Calendar } from './Calendar';
+
+export default Calendar;
diff --git a/platform/ui-next/src/components/Combobox/Combobox.tsx b/platform/ui-next/src/components/Combobox/Combobox.tsx
new file mode 100644
index 00000000000..173b58e533b
--- /dev/null
+++ b/platform/ui-next/src/components/Combobox/Combobox.tsx
@@ -0,0 +1,66 @@
+import * as React from 'react';
+import { Check, ChevronsUpDown } from 'lucide-react';
+
+import { cn } from '../../lib/utils';
+import { Button } from '../Button/Button';
+import {
+  Command,
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  CommandItem,
+  CommandList,
+} from '../Command/Command';
+import { Popover, PopoverContent, PopoverTrigger } from '../Popover/Popover';
+
+export function Combobox({ data = [], placeholder = 'Select item...' }) {
+  const [open, setOpen] = React.useState(false);
+  const [value, setValue] = React.useState('');
+
+  return (
+    <Popover
+      open={open}
+      onOpenChange={setOpen}
+    >
+      <PopoverTrigger asChild>
+        <Button
+          variant="outline"
+          role="combobox"
+          aria-expanded={open}
+          className="w-[200px] justify-between"
+        >
+          {value ? data.find(item => item.value === value)?.label : placeholder}
+          <ChevronsUpDown className="ml-2 h-4 w-4 shrink-0 opacity-50" />
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent className="w-[200px] p-0">
+        <Command>
+          <CommandInput placeholder={`Search ${placeholder.toLowerCase()}...`} />
+          <CommandEmpty>No {placeholder.toLowerCase()} found.</CommandEmpty>
+          <CommandList>
+            <CommandGroup>
+              {data.map(item => (
+                <CommandItem
+                  key={item.value}
+                  value={item.value}
+                  onSelect={currentValue => {
+                    setValue(currentValue === value ? '' : currentValue);
+                    setOpen(false);
+                  }}
+                >
+                  <Check
+                    className={cn(
+                      'mr-2 h-4 w-4',
+                      value === item.value ? 'opacity-100' : 'opacity-0'
+                    )}
+                  />
+                  {item.label}
+                </CommandItem>
+              ))}
+            </CommandGroup>
+          </CommandList>
+        </Command>
+      </PopoverContent>
+    </Popover>
+  );
+}
diff --git a/platform/ui-next/src/components/Combobox/index.ts b/platform/ui-next/src/components/Combobox/index.ts
new file mode 100644
index 00000000000..83249c99ddf
--- /dev/null
+++ b/platform/ui-next/src/components/Combobox/index.ts
@@ -0,0 +1,3 @@
+import { Combobox } from './Combobox';
+
+export default Combobox;
diff --git a/platform/ui-next/src/components/Command/Command.tsx b/platform/ui-next/src/components/Command/Command.tsx
new file mode 100644
index 00000000000..5e4a14cafae
--- /dev/null
+++ b/platform/ui-next/src/components/Command/Command.tsx
@@ -0,0 +1,150 @@
+import * as React from 'react';
+import { type DialogProps } from '@radix-ui/react-dialog';
+import { MagnifyingGlassIcon } from '@radix-ui/react-icons';
+import { Command as CommandPrimitive } from 'cmdk';
+
+import { cn } from '../../lib/utils';
+import { Dialog, DialogContent } from '../Dialog/Dialog';
+
+const Command = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive
+    ref={ref}
+    className={cn(
+      'bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md',
+      className
+    )}
+    {...props}
+  />
+));
+Command.displayName = CommandPrimitive.displayName;
+
+interface CommandDialogProps extends DialogProps {}
+
+const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
+  return (
+    <Dialog {...props}>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+};
+
+const CommandInput = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Input>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
+>(({ className, ...props }, ref) => (
+  <div
+    className="flex items-center border-b px-3"
+    cmdk-input-wrapper=""
+  >
+    <MagnifyingGlassIcon className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+    <CommandPrimitive.Input
+      ref={ref}
+      className={cn(
+        'placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  </div>
+));
+
+CommandInput.displayName = CommandPrimitive.Input.displayName;
+
+const CommandList = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.List>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.List>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.List
+    ref={ref}
+    className={cn('max-h-[300px] overflow-y-auto overflow-x-hidden', className)}
+    {...props}
+  />
+));
+
+CommandList.displayName = CommandPrimitive.List.displayName;
+
+const CommandEmpty = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Empty>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Empty>
+>((props, ref) => (
+  <CommandPrimitive.Empty
+    ref={ref}
+    className="py-6 text-center text-sm"
+    {...props}
+  />
+));
+
+CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
+
+const CommandGroup = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Group>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Group>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Group
+    ref={ref}
+    className={cn(
+      'text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandGroup.displayName = CommandPrimitive.Group.displayName;
+
+const CommandSeparator = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Separator
+    ref={ref}
+    className={cn('bg-border -mx-1 h-px', className)}
+    {...props}
+  />
+));
+CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
+
+const CommandItem = React.forwardRef<
+  React.ElementRef<typeof CommandPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof CommandPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <CommandPrimitive.Item
+    ref={ref}
+    className={cn(
+      'aria-selected:bg-accent aria-selected:text-accent-foreground relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50',
+      className
+    )}
+    {...props}
+  />
+));
+
+CommandItem.displayName = CommandPrimitive.Item.displayName;
+
+const CommandShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return (
+    <span
+      className={cn('text-muted-foreground ml-auto text-xs tracking-widest', className)}
+      {...props}
+    />
+  );
+};
+CommandShortcut.displayName = 'CommandShortcut';
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};
diff --git a/platform/ui-next/src/components/Command/index.ts b/platform/ui-next/src/components/Command/index.ts
new file mode 100644
index 00000000000..2f7ec14d2e2
--- /dev/null
+++ b/platform/ui-next/src/components/Command/index.ts
@@ -0,0 +1,3 @@
+import * as CommandComponents from './Command';
+
+export default CommandComponents;
diff --git a/platform/ui-next/src/components/DateRange/DateRange.tsx b/platform/ui-next/src/components/DateRange/DateRange.tsx
new file mode 100644
index 00000000000..7af8e7aa0f5
--- /dev/null
+++ b/platform/ui-next/src/components/DateRange/DateRange.tsx
@@ -0,0 +1,153 @@
+import * as React from 'react';
+import { format, parse, isValid } from 'date-fns';
+import { Calendar as CalendarIcon } from 'lucide-react';
+import { cn } from '../../lib/utils';
+import Calendar from '../Calendar';
+import Popover from '../Popover';
+
+export type DatePickerWithRangeProps = {
+  id: string;
+  /** YYYYMMDD (19921022) */
+  startDate: string;
+  /** YYYYMMDD (19921022) */
+  endDate: string;
+  /** Callback that received { startDate: string(YYYYMMDD), endDate: string(YYYYMMDD)} */
+  onChange: (value: { startDate: string; endDate: string }) => void;
+};
+
+export function DatePickerWithRange({
+  className,
+  id,
+  startDate,
+  endDate,
+  onChange,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement> & DatePickerWithRangeProps) {
+  const [start, setStart] = React.useState<string>(
+    startDate ? format(parse(startDate, 'yyyyMMdd', new Date()), 'yyyy-MM-dd') : ''
+  );
+  const [end, setEnd] = React.useState<string>(
+    endDate ? format(parse(endDate, 'yyyyMMdd', new Date()), 'yyyy-MM-dd') : ''
+  );
+  const [openEnd, setOpenEnd] = React.useState(false);
+
+  const handleStartSelect = (selectedDate: Date | undefined) => {
+    if (selectedDate) {
+      const formattedDate = format(selectedDate, 'yyyy-MM-dd');
+      setStart(formattedDate);
+      setOpenEnd(true);
+      onChange({
+        startDate: format(selectedDate, 'yyyyMMdd'),
+        endDate: end.replace(/-/g, ''),
+      });
+    }
+  };
+
+  const handleEndSelect = (selectedDate: Date | undefined) => {
+    if (selectedDate) {
+      const formattedDate = format(selectedDate, 'yyyy-MM-dd');
+      setEnd(formattedDate);
+      setOpenEnd(false);
+      onChange({
+        startDate: start.replace(/-/g, ''),
+        endDate: format(selectedDate, 'yyyyMMdd'),
+      });
+    }
+  };
+
+  const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>, type: 'start' | 'end') => {
+    const value = e.target.value;
+    const date = parse(value, 'yyyy-MM-dd', new Date());
+    if (type === 'start') {
+      setStart(value);
+      if (isValid(date)) {
+        handleStartSelect(date);
+      }
+    } else {
+      setEnd(value);
+      if (isValid(date)) {
+        handleEndSelect(date);
+      }
+    }
+  };
+
+  React.useEffect(() => {
+    setStart(startDate ? format(parse(startDate, 'yyyyMMdd', new Date()), 'yyyy-MM-dd') : '');
+    setEnd(endDate ? format(parse(endDate, 'yyyyMMdd', new Date()), 'yyyy-MM-dd') : '');
+  }, [startDate, endDate]);
+
+  return (
+    <div className={cn('flex gap-2', className)}>
+      <Popover.Popover>
+        <Popover.PopoverTrigger asChild>
+          <div className="relative w-full">
+            <CalendarIcon className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-white" />
+            <input
+              id={`${id}-start`}
+              type="text"
+              placeholder="Start date"
+              autoComplete="off"
+              value={start}
+              onChange={e => handleInputChange(e, 'start')}
+              className={cn(
+                'border-inputfield-main focus:border-inputfield-focus h-full w-full justify-start rounded border bg-black py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-sm font-normal hover:bg-black hover:text-white',
+                !start && 'text-muted-foreground'
+              )}
+              data-cy="input-date-range-start"
+            />
+          </div>
+        </Popover.PopoverTrigger>
+        <Popover.PopoverContent
+          className="w-auto p-0"
+          align="start"
+        >
+          <Calendar
+            initialFocus
+            mode="single"
+            defaultMonth={start ? parse(start, 'yyyy-MM-dd', new Date()) : new Date()}
+            selected={start ? parse(start, 'yyyy-MM-dd', new Date()) : undefined}
+            onSelect={handleStartSelect}
+            numberOfMonths={1}
+          />
+        </Popover.PopoverContent>
+      </Popover.Popover>
+
+      <Popover.Popover
+        open={openEnd}
+        onOpenChange={setOpenEnd}
+      >
+        <Popover.PopoverTrigger asChild>
+          <div className="relative w-full">
+            <CalendarIcon className="absolute right-2 top-1/2 h-4 w-4 -translate-y-1/2 transform text-white" />
+            <input
+              id={`${id}-end`}
+              type="text"
+              placeholder="End date"
+              autoComplete="off"
+              value={end}
+              onChange={e => handleInputChange(e, 'end')}
+              className={cn(
+                'border-inputfield-main focus:border-inputfield-focus h-full w-full justify-start rounded border bg-black py-[6.5px] pl-[6.5px] pr-[6.5px] text-left text-sm font-normal hover:bg-black hover:text-white',
+                !end && 'text-muted-foreground'
+              )}
+              data-cy="input-date-range-end"
+            />
+          </div>
+        </Popover.PopoverTrigger>
+        <Popover.PopoverContent
+          className="w-auto p-0"
+          align="start"
+        >
+          <Calendar
+            initialFocus
+            mode="single"
+            defaultMonth={start ? parse(start, 'yyyy-MM-dd', new Date()) : new Date()}
+            selected={end ? parse(end, 'yyyy-MM-dd', new Date()) : undefined}
+            onSelect={handleEndSelect}
+            numberOfMonths={1}
+          />
+        </Popover.PopoverContent>
+      </Popover.Popover>
+    </div>
+  );
+}
diff --git a/platform/ui-next/src/components/DateRange/index.ts b/platform/ui-next/src/components/DateRange/index.ts
new file mode 100644
index 00000000000..dd77e0cb035
--- /dev/null
+++ b/platform/ui-next/src/components/DateRange/index.ts
@@ -0,0 +1,3 @@
+import { DatePickerWithRange } from "./DateRange";
+
+export default DatePickerWithRange;
diff --git a/platform/ui-next/src/components/Dialog/Dialog.tsx b/platform/ui-next/src/components/Dialog/Dialog.tsx
new file mode 100644
index 00000000000..0b67911aa16
--- /dev/null
+++ b/platform/ui-next/src/components/Dialog/Dialog.tsx
@@ -0,0 +1,105 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { Cross2Icon } from '@radix-ui/react-icons';
+
+import { cn } from '../../lib/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = DialogPrimitive.Close;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn(
+      'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0  fixed inset-0 z-50 bg-black/80',
+      className
+    )}
+    {...props}
+  />
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <DialogOverlay />
+    <DialogPrimitive.Content
+      ref={ref}
+      className={cn(
+        'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] fixed left-[50%] top-[50%] z-50 grid w-full max-w-lg translate-x-[-50%] translate-y-[-50%] gap-4 border p-6 shadow-lg duration-200 sm:rounded-lg',
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <DialogPrimitive.Close className="ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute right-4 top-4 rounded-sm opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-offset-2 disabled:pointer-events-none">
+        <Cross2Icon className="h-4 w-4" />
+        <span className="sr-only">Close</span>
+      </DialogPrimitive.Close>
+    </DialogPrimitive.Content>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col space-y-1.5 text-center sm:text-left', className)}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2', className)}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('text-muted-foreground text-sm', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogTrigger,
+  DialogClose,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/platform/ui-next/src/components/Dialog/index.ts b/platform/ui-next/src/components/Dialog/index.ts
new file mode 100644
index 00000000000..92f1d6d428b
--- /dev/null
+++ b/platform/ui-next/src/components/Dialog/index.ts
@@ -0,0 +1,3 @@
+import * as DialogComponents from './Dialog';
+
+export default DialogComponents;
diff --git a/platform/ui-next/src/components/Popover/Popover.tsx b/platform/ui-next/src/components/Popover/Popover.tsx
new file mode 100644
index 00000000000..28cdc7ddd31
--- /dev/null
+++ b/platform/ui-next/src/components/Popover/Popover.tsx
@@ -0,0 +1,31 @@
+import * as React from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { cn } from '../../lib/utils';
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverAnchor = PopoverPrimitive.Anchor;
+
+const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = 'center', sideOffset = 4, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(
+        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 rounded-md border p-4 shadow-md outline-none',
+        className
+      )}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };
diff --git a/platform/ui-next/src/components/Popover/index.ts b/platform/ui-next/src/components/Popover/index.ts
new file mode 100644
index 00000000000..56fdcd0c04e
--- /dev/null
+++ b/platform/ui-next/src/components/Popover/index.ts
@@ -0,0 +1,3 @@
+import * as Popover from './Popover';
+
+export default Popover;
diff --git a/platform/ui-next/src/components/ThemeWrapper/ThemeWrapper.tsx b/platform/ui-next/src/components/ThemeWrapper/ThemeWrapper.tsx
new file mode 100644
index 00000000000..561fcaacc1f
--- /dev/null
+++ b/platform/ui-next/src/components/ThemeWrapper/ThemeWrapper.tsx
@@ -0,0 +1,4 @@
+import React from 'react';
+import '../../tailwind.css';
+
+export const ThemeWrapper = ({ children }) => <React.Fragment>{children}</React.Fragment>;
diff --git a/platform/ui-next/src/components/ThemeWrapper/index.ts b/platform/ui-next/src/components/ThemeWrapper/index.ts
new file mode 100644
index 00000000000..69f5248ba78
--- /dev/null
+++ b/platform/ui-next/src/components/ThemeWrapper/index.ts
@@ -0,0 +1 @@
+export { ThemeWrapper } from './ThemeWrapper';
diff --git a/platform/ui-next/src/components/index.ts b/platform/ui-next/src/components/index.ts
new file mode 100644
index 00000000000..e0c1cbe767a
--- /dev/null
+++ b/platform/ui-next/src/components/index.ts
@@ -0,0 +1,10 @@
+import { Button, buttonVariants } from './Button';
+import { ThemeWrapper } from './ThemeWrapper';
+import Command from './Command';
+import Dialog from './Dialog';
+import Combobox from './Combobox';
+import Popover from './Popover';
+import Calendar  from './Calendar';
+import DatePickerWithRange from './DateRange';
+
+export { Button, buttonVariants, ThemeWrapper, Command, Dialog, Combobox, Popover, Calendar, DatePickerWithRange};
diff --git a/platform/ui-next/src/contextProviders/NotificationProvider.tsx b/platform/ui-next/src/contextProviders/NotificationProvider.tsx
new file mode 100644
index 00000000000..6cabfa317ae
--- /dev/null
+++ b/platform/ui-next/src/contextProviders/NotificationProvider.tsx
@@ -0,0 +1,85 @@
+import React, { useState, createContext, useContext, useCallback, useEffect } from 'react';
+import PropTypes from 'prop-types';
+import { Toaster, toast } from 'sonner';
+
+const NotificationContext = createContext(null);
+
+export const useNotification = () => useContext(NotificationContext);
+
+const NotificationProvider = ({ children, service }) => {
+  const DEFAULT_OPTIONS = {
+    title: '',
+    message: '',
+    duration: 5000,
+    position: 'bottom-right', // Aligning to Sonner's positioning system
+    type: 'info', // info, success, error
+  };
+
+  const [notificationItems, setNotificationItems] = useState([]);
+
+  const show = useCallback(options => {
+    const { title, message, duration, position, type } = { ...DEFAULT_OPTIONS, ...options };
+    const id = toast[type](message, {
+      duration,
+      position,
+      render: () => (
+        <div>
+          <strong>{title}</strong>
+          <p>{message}</p>
+        </div>
+      ),
+    });
+
+    setNotificationItems(state => [...state, { id, ...options }]);
+  }, []);
+
+  const hide = useCallback(id => {
+    toast.dismiss(id);
+    setNotificationItems(state => state.filter(item => item.id !== id));
+  }, []);
+
+  const hideAll = useCallback(() => {
+    toast.dismiss();
+    setNotificationItems([]);
+  }, []);
+
+  useEffect(() => {
+    window.notification = { show, hide, hideAll };
+  }, [show, hide, hideAll]);
+
+  /**
+   * Sets the implementation of a notification service that can be used by extensions.
+   *
+   * @returns void
+   */
+  useEffect(() => {
+    if (service) {
+      service.setServiceImplementation({ hide, show });
+    }
+  }, [service, hide, show]);
+
+  return (
+    <NotificationContext.Provider value={{ show, hide, hideAll, notificationItems }}>
+      <Toaster position="bottom-right" />
+      {children}
+    </NotificationContext.Provider>
+  );
+};
+
+NotificationProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export const withNotification = Component => {
+  return function WrappedComponent(props) {
+    const notificationContext = useNotification();
+    return (
+      <Component
+        {...props}
+        notificationContext={notificationContext}
+      />
+    );
+  };
+};
+
+export default NotificationProvider;
diff --git a/platform/ui-next/src/contextProviders/index.ts b/platform/ui-next/src/contextProviders/index.ts
new file mode 100644
index 00000000000..57d3d90ecd8
--- /dev/null
+++ b/platform/ui-next/src/contextProviders/index.ts
@@ -0,0 +1,3 @@
+import NotificationProvider, { useNotification } from './NotificationProvider';
+
+export { useNotification, NotificationProvider };
diff --git a/platform/ui-next/src/index.ts b/platform/ui-next/src/index.ts
new file mode 100644
index 00000000000..63fbdcf76e0
--- /dev/null
+++ b/platform/ui-next/src/index.ts
@@ -0,0 +1,28 @@
+import {
+  Button,
+  buttonVariants,
+  ThemeWrapper,
+  Dialog,
+  Command,
+  Popover,
+  Combobox,
+  Calendar,
+  DatePickerWithRange,
+} from './components';
+import { useNotification, NotificationProvider } from './contextProviders';
+
+export {
+  // components
+  Button,
+  Dialog,
+  Command,
+  Popover,
+  Combobox,
+  buttonVariants,
+  ThemeWrapper,
+  Calendar,
+  DatePickerWithRange,
+  // contextProviders
+  NotificationProvider,
+  useNotification,
+};
diff --git a/platform/ui-next/src/lib/utils.ts b/platform/ui-next/src/lib/utils.ts
new file mode 100644
index 00000000000..9ad0df4269e
--- /dev/null
+++ b/platform/ui-next/src/lib/utils.ts
@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
diff --git a/platform/ui-next/src/tailwind.css b/platform/ui-next/src/tailwind.css
new file mode 100644
index 00000000000..66b78c939a5
--- /dev/null
+++ b/platform/ui-next/src/tailwind.css
@@ -0,0 +1,67 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
diff --git a/platform/ui-next/tailwind.config.js b/platform/ui-next/tailwind.config.js
new file mode 100644
index 00000000000..bf9812f1ed2
--- /dev/null
+++ b/platform/ui-next/tailwind.config.js
@@ -0,0 +1,70 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  presets: [require('../ui/tailwind.config.js')],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  prefix: '',
+  theme: {
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};
diff --git a/platform/ui-next/tsconfig.json b/platform/ui-next/tsconfig.json
new file mode 100644
index 00000000000..e63e92ef486
--- /dev/null
+++ b/platform/ui-next/tsconfig.json
@@ -0,0 +1,11 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@ui/*": ["./src/*"]
+    }
+  },
+  "include": ["src"],
+  "exclude": ["node_modules"]
+}
diff --git a/platform/ui/package.json b/platform/ui/package.json
index 39c04bbf88c..08a52387935 100644
--- a/platform/ui/package.json
+++ b/platform/ui/package.json
@@ -29,8 +29,8 @@
     "build-storybook": "storybook build"
   },
   "peerDependencies": {
-    "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
   },
   "dependencies": {
     "@testing-library/react-hooks": "^3.2.1",
@@ -46,11 +46,11 @@
     "lodash.debounce": "4.0.8",
     "moment": "2.29.4",
     "mousetrap": "^1.6.5",
-    "react": "^17.0.2",
+    "react": "^18.3.1",
     "react-dates": "^21.8.0",
     "react-dnd": "14.0.2",
     "react-dnd-html5-backend": "14.0.0",
-    "react-dom": "^17.0.2",
+    "react-dom": "^18.3.1",
     "react-draggable": "4.4.3",
     "react-error-boundary": "^3.1.3",
     "react-modal": "3.11.2",
diff --git a/platform/ui/src/components/ActionButtons/ActionButtons.tsx b/platform/ui/src/components/ActionButtons/ActionButtons.tsx
index ae58b985b87..0e7bd33b5e9 100644
--- a/platform/ui/src/components/ActionButtons/ActionButtons.tsx
+++ b/platform/ui/src/components/ActionButtons/ActionButtons.tsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import { Button, ButtonEnums } from '../../components';
 
-function ActionButtons({ actions, disabled, t }) {
+function ActionButtons({ actions, disabled = false, t }) {
   return (
     <React.Fragment>
       {actions.map((action, index) => (
@@ -33,8 +33,4 @@ ActionButtons.propTypes = {
   disabled: PropTypes.bool,
 };
 
-ActionButtons.defaultProps = {
-  disabled: false,
-};
-
 export default ActionButtons;
diff --git a/platform/ui/src/components/Button/Button.tsx b/platform/ui/src/components/Button/Button.tsx
index 788eb4a505e..f3ba159de7e 100644
--- a/platform/ui/src/components/Button/Button.tsx
+++ b/platform/ui/src/components/Button/Button.tsx
@@ -58,7 +58,7 @@ const defaults = {
 };
 
 const Button = ({
-  children,
+  children = '',
   size = defaults.size,
   disabled = defaults.disabled,
   type = defaults.type,
@@ -66,7 +66,7 @@ const Button = ({
   endIcon: endIconProp,
   name,
   className,
-  onClick,
+  onClick = () => {},
   dataCY,
   startIconTooltip = null,
   endIconTooltip = null,
@@ -121,14 +121,6 @@ const Button = ({
   );
 };
 
-Button.defaultProps = {
-  disabled: false,
-  children: '',
-  onClick: () => {},
-  type: defaults.type,
-  size: defaults.size,
-};
-
 Button.propTypes = {
   /** What is inside the button, can be text or react component */
   children: PropTypes.node,
diff --git a/platform/ui/src/components/CinePlayer/CinePlayer.tsx b/platform/ui/src/components/CinePlayer/CinePlayer.tsx
index a628754ccdb..1a4024e9dfe 100644
--- a/platform/ui/src/components/CinePlayer/CinePlayer.tsx
+++ b/platform/ui/src/components/CinePlayer/CinePlayer.tsx
@@ -31,15 +31,15 @@ const fpsButtonClassNames =
 
 const CinePlayer: React.FC<CinePlayerProps> = ({
   className,
-  isPlaying,
-  minFrameRate,
-  maxFrameRate,
-  stepFrameRate,
-  frameRate: defaultFrameRate,
+  isPlaying = false,
+  minFrameRate = 1,
+  maxFrameRate = 90,
+  stepFrameRate = 1,
+  frameRate: defaultFrameRate = 24,
+  onFrameRateChange = () => {},
+  onPlayPauseChange = () => {},
+  onClose = () => {},
   dynamicInfo = {},
-  onFrameRateChange,
-  onPlayPauseChange,
-  onClose,
   updateDynamicInfo,
 }) => {
   const isDynamic = !!dynamicInfo?.numTimePoints;
@@ -163,21 +163,6 @@ const CinePlayer: React.FC<CinePlayerProps> = ({
   );
 };
 
-const noop = () => {};
-
-CinePlayer.defaultProps = {
-  isPlaying: false,
-  minFrameRate: 1,
-  maxFrameRate: 90,
-  stepFrameRate: 1,
-  frameRate: 24,
-  onPlayPauseChange: noop,
-  onFrameRateChange: noop,
-  onClose: noop,
-  isDynamic: false,
-  dynamicInfo: {},
-};
-
 CinePlayer.propTypes = {
   /** Minimum value for range slider */
   minFrameRate: PropTypes.number,
diff --git a/platform/ui/src/components/DateRange/DateRange.tsx b/platform/ui/src/components/DateRange/DateRange.tsx
index b93016731d3..bfca06ac303 100644
--- a/platform/ui/src/components/DateRange/DateRange.tsx
+++ b/platform/ui/src/components/DateRange/DateRange.tsx
@@ -29,7 +29,7 @@ const renderYearsOptions = () => {
 };
 
 const DateRange = props => {
-  const { id, onChange, startDate, endDate } = props;
+  const { id = '', onChange, startDate = null, endDate = null } = props;
   const [focusedInput, setFocusedInput] = useState(null);
   const renderYearsOptionsCallback = useCallback(renderYearsOptions, []);
   const { t } = useTranslation('DatePicker');
@@ -165,12 +165,6 @@ const DateRange = props => {
   );
 };
 
-DateRange.defaultProps = {
-  id: '',
-  startDate: null,
-  endDate: null,
-};
-
 DateRange.propTypes = {
   id: PropTypes.string,
   /** YYYYMMDD (19921022) */
diff --git a/platform/ui/src/components/Dialog/Dialog.tsx b/platform/ui/src/components/Dialog/Dialog.tsx
index 8de63a1a2ce..faa2bd504bd 100644
--- a/platform/ui/src/components/Dialog/Dialog.tsx
+++ b/platform/ui/src/components/Dialog/Dialog.tsx
@@ -15,10 +15,10 @@ const Dialog = ({
   actions,
   onShow,
   onSubmit,
-  header: HeaderComponent,
-  body: BodyComponent,
-  footer: FooterComponent,
-  value: defaultValue,
+  header: HeaderComponent = Header,
+  body: BodyComponent = Body,
+  footer: FooterComponent = Footer,
+  value: defaultValue = {},
 }) => {
   const [value, setValue] = useState(defaultValue);
 
@@ -78,13 +78,7 @@ Dialog.propTypes = {
       type: PropTypes.oneOf(['primary', 'secondary', 'cancel']).isRequired,
     })
   ).isRequired,
-};
-
-Dialog.defaultProps = {
-  header: Header,
-  footer: Footer,
-  body: Body,
-  value: {},
+  onShow: PropTypes.func,
 };
 
 export default Dialog;
diff --git a/platform/ui/src/components/Dialog/Footer.tsx b/platform/ui/src/components/Dialog/Footer.tsx
index e67a1448497..c369df95b30 100644
--- a/platform/ui/src/components/Dialog/Footer.tsx
+++ b/platform/ui/src/components/Dialog/Footer.tsx
@@ -4,7 +4,7 @@ import PropTypes from 'prop-types';
 
 import Button, { ButtonEnums } from '../Button';
 
-const Footer = ({ actions, className, onSubmit, value }) => {
+const Footer = ({ actions = [], className, onSubmit = () => {}, value }) => {
   const flex = 'flex items-center justify-end';
   const padding = 'pt-[20px]';
 
@@ -47,9 +47,4 @@ Footer.propTypes = {
   ).isRequired,
 };
 
-Footer.defaultProps = {
-  onSubmit: noop,
-  actions: [],
-};
-
 export default Footer;
diff --git a/platform/ui/src/components/Dialog/Header.tsx b/platform/ui/src/components/Dialog/Header.tsx
index d3bfb906ea4..24831c92a96 100644
--- a/platform/ui/src/components/Dialog/Header.tsx
+++ b/platform/ui/src/components/Dialog/Header.tsx
@@ -20,7 +20,7 @@ CloseButton.propTypes = {
   onClick: PropTypes.func,
 };
 
-const Header = ({ title, noCloseButton, onClose }) => {
+const Header = ({ title, noCloseButton = false, onClose }) => {
   const theme = 'bg-primary-dark';
   const flex = 'flex items-center justify-between';
   const padding = 'pb-[20px]';
@@ -46,8 +46,4 @@ Header.propTypes = {
   onClose: PropTypes.func,
 };
 
-Header.defaultProps = {
-  noCloseButton: false,
-};
-
 export default Header;
diff --git a/platform/ui/src/components/Dropdown/Dropdown.tsx b/platform/ui/src/components/Dropdown/Dropdown.tsx
index 2e9a441445d..c183ddc9346 100644
--- a/platform/ui/src/components/Dropdown/Dropdown.tsx
+++ b/platform/ui/src/components/Dropdown/Dropdown.tsx
@@ -11,15 +11,15 @@ const borderStyle = 'border-b last:border-b-0 border-secondary-main';
 const Dropdown = ({
   id,
   children,
-  showDropdownIcon,
+  showDropdownIcon = true,
   list,
   itemsClassName,
   titleClassName,
-  showBorders,
+  showBorders = true,
   alignment,
   // By default the max characters per line is the longest title
   // if you wish to override this, you can pass in a number
-  maxCharactersPerLine,
+  maxCharactersPerLine = 20,
 }) => {
   const [open, setOpen] = useState(false);
   const elementRef = useRef(null);
@@ -199,11 +199,6 @@ const Dropdown = ({
     </div>
   );
 };
-Dropdown.defaultProps = {
-  showDropdownIcon: true,
-  maxCharactersPerLine: 20,
-  showBorders: true,
-};
 
 Dropdown.propTypes = {
   id: PropTypes.string,
diff --git a/platform/ui/src/components/EmptyStudies/EmptyStudies.tsx b/platform/ui/src/components/EmptyStudies/EmptyStudies.tsx
index 091d98e4431..5ea1ea24b41 100644
--- a/platform/ui/src/components/EmptyStudies/EmptyStudies.tsx
+++ b/platform/ui/src/components/EmptyStudies/EmptyStudies.tsx
@@ -7,7 +7,7 @@ import Icon from '../Icon';
 import Typography from '../Typography';
 
 // TODO: Add loading spinner to OHIF + use it here.
-const EmptyStudies = ({ className }) => {
+const EmptyStudies = ({ className = '' }) => {
   const { t } = useTranslation('StudyList');
   return (
     <div className={classnames('inline-flex flex-col items-center', className)}>
@@ -25,10 +25,6 @@ const EmptyStudies = ({ className }) => {
   );
 };
 
-EmptyStudies.defaultProps = {
-  className: '',
-};
-
 EmptyStudies.propTypes = {
   className: PropTypes.string,
 };
diff --git a/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx b/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
index df87cce97c9..6fccb97b9f5 100644
--- a/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
+++ b/platform/ui/src/components/ErrorBoundary/ErrorBoundary.tsx
@@ -10,7 +10,7 @@ import IconButton from '../IconButton';
 
 const isProduction = process.env.NODE_ENV === 'production';
 
-const DefaultFallback = ({ error, context, resetErrorBoundary, fallbackRoute }) => {
+const DefaultFallback = ({ error, context, resetErrorBoundary = () => {}, fallbackRoute }) => {
   const { t } = useTranslation('ErrorBoundary');
   const [showDetails, setShowDetails] = useState(false);
   const title = `${t('Something went wrong')}${!isProduction && ` ${t('in')} ${context}`}.`;
@@ -57,25 +57,19 @@ const DefaultFallback = ({ error, context, resetErrorBoundary, fallbackRoute })
   );
 };
 
-const noop = () => {};
-
 DefaultFallback.propTypes = {
   error: PropTypes.object.isRequired,
   resetErrorBoundary: PropTypes.func,
   componentStack: PropTypes.string,
 };
 
-DefaultFallback.defaultProps = {
-  resetErrorBoundary: noop,
-};
-
 const ErrorBoundary = ({
-  context,
-  onReset,
-  onError,
-  fallbackComponent: FallbackComponent,
+  context = 'OHIF',
+  onReset = () => {},
+  onError = () => {},
+  fallbackComponent: FallbackComponent = DefaultFallback,
   children,
-  fallbackRoute,
+  fallbackRoute = null,
   isPage,
 }) => {
   const [isOpen, setIsOpen] = useState(true);
@@ -132,12 +126,4 @@ ErrorBoundary.propTypes = {
   fallbackRoute: PropTypes.string,
 };
 
-ErrorBoundary.defaultProps = {
-  context: 'OHIF',
-  onReset: noop,
-  onError: noop,
-  fallbackComponent: DefaultFallback,
-  fallbackRoute: null,
-};
-
 export default ErrorBoundary;
diff --git a/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx b/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx
index ece62562878..320b70074f1 100644
--- a/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx
+++ b/platform/ui/src/components/ExpandableToolbarButton/ExpandableToolbarButton.tsx
@@ -8,14 +8,14 @@ import Icon from '../Icon';
 import './ExpandableToolbarButton.css';
 
 const ExpandableToolbarButton = ({
-  type,
-  id,
-  isActive,
-  onClick,
-  icon,
+  type = 'primary',
+  id = '',
+  isActive = false,
+  onClick = () => {},
+  icon = 'clipboard',
   className,
-  content: Content,
-  contentProps,
+  content: Content = null,
+  contentProps = {},
 }) => {
   const classes = {
     type: {
@@ -71,15 +71,6 @@ const ExpandableToolbarButton = ({
 
 const noop = () => {};
 
-ExpandableToolbarButton.defaultProps = {
-  id: '',
-  icon: 'clipboard',
-  isActive: false,
-  type: 'primary',
-  content: null,
-  onClick: noop,
-};
-
 ExpandableToolbarButton.propTypes = {
   /* Influences background/hover styling */
   type: PropTypes.oneOf(['primary', 'secondary']),
diff --git a/platform/ui/src/components/Header/Header.tsx b/platform/ui/src/components/Header/Header.tsx
index 94fbb3fdaf1..7472d652ce5 100644
--- a/platform/ui/src/components/Header/Header.tsx
+++ b/platform/ui/src/components/Header/Header.tsx
@@ -14,9 +14,9 @@ import { PatientInfoVisibility } from '../../types/PatientInfoVisibility';
 function Header({
   children,
   menuOptions,
-  isReturnEnabled,
+  isReturnEnabled = true,
   onClickReturnButton,
-  isSticky,
+  isSticky = false,
   WhiteLabeling,
   showPatientInfo = PatientInfoVisibility.VISIBLE_COLLAPSED,
   servicesManager,
@@ -113,9 +113,4 @@ Header.propTypes = {
   servicesManager: PropTypes.object,
 };
 
-Header.defaultProps = {
-  isReturnEnabled: true,
-  isSticky: false,
-};
-
 export default Header;
diff --git a/platform/ui/src/components/HotkeyField/HotkeyField.tsx b/platform/ui/src/components/HotkeyField/HotkeyField.tsx
index 81e0b8824bc..4283dcf3288 100644
--- a/platform/ui/src/components/HotkeyField/HotkeyField.tsx
+++ b/platform/ui/src/components/HotkeyField/HotkeyField.tsx
@@ -15,7 +15,7 @@ import { getKeys, formatKeysForInput } from './utils';
  * @param {string} props.className input classes
  * @param {Array[]} props.modifierKeys
  */
-const HotkeyField = ({ disabled, keys, onChange, className, modifierKeys, hotkeys }) => {
+const HotkeyField = ({ disabled = false, keys, onChange, className, modifierKeys, hotkeys }) => {
   const inputValue = formatKeysForInput(keys);
 
   const onInputKeyDown = event => {
@@ -58,8 +58,4 @@ HotkeyField.propTypes = {
   }).isRequired,
 };
 
-HotkeyField.defaultProps = {
-  disabled: false,
-};
-
 export default HotkeyField;
diff --git a/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx b/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx
index 2b9b1eb02d4..7758546e764 100644
--- a/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx
+++ b/platform/ui/src/components/HotkeysPreferences/HotkeysPreferences.tsx
@@ -11,10 +11,10 @@ import { MODIFIER_KEYS } from './hotkeysConfig';
 import { validate, splitHotkeyDefinitionsAndCreateTuples } from './utils';
 
 const HotkeysPreferences = ({
-  disabled,
+  disabled = false,
   hotkeyDefinitions,
   errors: controlledErrors,
-  onChange,
+  onChange = () => {},
   hotkeysModule,
 }) => {
   const { t } = useTranslation('UserPreferencesModal');
@@ -127,8 +127,6 @@ const HotkeysPreferences = ({
   );
 };
 
-const noop = () => {};
-
 HotkeysPreferences.propTypes = {
   onChange: PropTypes.func,
   disabled: PropTypes.bool,
@@ -142,9 +140,4 @@ HotkeysPreferences.propTypes = {
   }).isRequired,
 };
 
-HotkeysPreferences.defaultProps = {
-  onChange: noop,
-  disabled: false,
-};
-
 export default HotkeysPreferences;
diff --git a/platform/ui/src/components/Icon/getIcon.js b/platform/ui/src/components/Icon/getIcon.js
index a6545d9f29f..9a3e24e1f49 100644
--- a/platform/ui/src/components/Icon/getIcon.js
+++ b/platform/ui/src/components/Icon/getIcon.js
@@ -1,179 +1,179 @@
 import React from 'react';
-// Icons
 
-import arrowDown from './../../assets/icons/arrow-down.svg';
-import arrowLeft from './../../assets/icons/arrow-left.svg';
-import arrowRight from './../../assets/icons/arrow-right.svg';
-import arrowLeftSmall from './../../assets/icons/arrow-left-small.svg';
-import arrowRightSmall from './../../assets/icons/arrow-right-small.svg';
-import calendar from './../../assets/icons/calendar.svg';
-import cancel from './../../assets/icons/cancel.svg';
-import clipboard from './../../assets/icons/clipboard.svg';
-import close from './../../assets/icons/closeIcon.svg';
-import dottedCircle from './../../assets/icons/dotted-circle.svg';
-import circledCheckmark from './../../assets/icons/circled-checkmark.svg';
-import chevronDown from './../../assets/icons/chevron-down.svg';
-import chevronLeft from './../../assets/icons/chevron-left.svg';
-import chevronMenu from './../../assets/icons/chevron-menu.svg';
-import chevronNext from './../../assets/icons/chevron-next.svg';
-import chevronPrev from './../../assets/icons/chevron-prev.svg';
-import chevronRight from './../../assets/icons/chevron-right.svg';
-import contentNext from './../../assets/icons/content-next.svg';
-import contentPrev from './../../assets/icons/content-prev.svg';
-import eyeVisible from './../../assets/icons/eye-visible.svg';
-import eyeHidden from './../../assets/icons/eye-hidden.svg';
-import exclamation from './../../assets/icons/exclamation.svg';
-import externalLink from './../../assets/icons/external-link.svg';
-import groupLayers from './../../assets/icons/group-layers.svg';
-import info from './../../assets/icons/info.svg';
-import infoAction from './../../assets/icons/info-action.svg';
-import infoLink from './../../assets/icons/info-link.svg';
-import launchArrow from './../../assets/icons/launch-arrow.svg';
-import launchInfo from './../../assets/icons/launch-info.svg';
-import link from './../../assets/icons/tool-stack-image-sync.svg';
-import listBullets from './../../assets/icons/list-bullets.svg';
-import lock from './../../assets/icons/lock.svg';
-import logoOhifSmall from './../../assets/icons/logo-ohif-small.svg';
-import logoDarkBackGround from './../../assets/icons/ohif-logo-color-darkbg.svg';
-import magnifier from './../../assets/icons/magnifier.svg';
-import notificationwarningDiamond from './../../assets/icons/notificationwarning-diamond.svg';
-import pencil from './../../assets/icons/pencil.svg';
-import powerOff from './../../assets/icons/power-off.svg';
-import profile from './../../assets/icons/profile.svg';
-import pushLeft from './../../assets/icons/push-left.svg';
-import pushRight from './../../assets/icons/push-right.svg';
-import settings from './../../assets/icons/settings.svg';
-import sidePanelCloseLeft from './../../assets/icons/side-panel-close-left.svg';
-import sidePanelCloseRight from './../../assets/icons/side-panel-close-right.svg';
-import sorting from './../../assets/icons/sorting.svg';
-import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
-import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
-import statusAlertWarning from './../../assets/icons/status-alert-warning.svg';
-import statusAlert from './../../assets/icons/status-alert.svg';
-import statusLocked from './../../assets/icons/status-locked.svg';
-import statusTracked from './../../assets/icons/status-tracked.svg';
-import statusUntracked from './../../assets/icons/status-untracked.svg';
-import tracked from './../../assets/icons/tracked.svg';
-import unlink from './../../assets/icons/unlink.svg';
-import checkboxChecked from './../../assets/icons/checkbox-checked.svg';
-import checkboxUnchecked from './../../assets/icons/checkbox-unchecked.svg';
-import iconAlertOutline from './../../assets/icons/icons-alert-outline.svg';
-import iconAlertSmall from './../../assets/icons/icon-alert-small.svg';
-import iconClose from './../../assets/icons/icon-close.svg';
-import iconClearField from './../../assets/icons/icon-clear-field.svg';
-import iconNextInactive from './../../assets/icons/icon-next-inactive.svg';
-import iconNext from './../../assets/icons/icon-next.svg';
-import iconPlay from './../../assets/icons/icon-play.svg';
-import iconPause from './../../assets/icons/icon-pause.svg';
-import iconPrevInactive from './../../assets/icons/icon-prev-inactive.svg';
-import iconPrev from './../../assets/icons/icon-prev.svg';
-import iconSearch from './../../assets/icons/icon-search.svg';
-import iconStatusAlert from './../../assets/icons/icon-status-alert.svg';
-import iconTransferring from './../../assets/icons/icon-transferring.svg';
-import iconUpload from './../../assets/icons/icon-upload.svg';
-import navigationPanelRightHide from './../../assets/icons/navigation-panel-right-hide.svg';
-import navigationPanelRightReveal from './../../assets/icons/navigation-panel-right-reveal.svg';
-import tabLinear from './../../assets/icons/tab-linear.svg';
-import tabPatientInfo from './../../assets/icons/tab-patient-info.svg';
-import tabROIThreshold from './../../assets/icons/tab-roi-threshold.svg';
-import tabSegmentation from './../../assets/icons/tab-segmentation.svg';
-import tabStudies from './../../assets/icons/tab-studies.svg';
-import uiArrowDown from './../../assets/icons/ui-arrow-down.svg';
-import uiArrowUp from './../../assets/icons/ui-arrow-up.svg';
-import uiArrowLeft from './../../assets/icons/ui-arrow-left.svg';
-import uiArrowRight from './../../assets/icons/ui-arrow-right.svg';
-import loadingOHIFMark from './../../assets/icons/loading-ohif-mark.svg';
-import notificationsInfo from './../../assets/icons/notifications-info.svg';
-import notificationsWarning from './../../assets/icons/notifications-warning.svg';
-import notificationsError from './../../assets/icons/notifications-error.svg';
-import notificationsSuccess from './../../assets/icons/notifications-success.svg';
-import nextArrow from './../../assets/icons/next-arrow.svg';
-import prevArrow from './../../assets/icons/prev-arrow.svg';
-import viewportStatusTracked from './../../assets/icons/viewport-status-tracked.svg';
+import { ReactComponent as arrowDown } from './../../assets/icons/arrow-down.svg';
+import { ReactComponent as arrowLeft } from './../../assets/icons/arrow-left.svg';
+import { ReactComponent as arrowRight } from './../../assets/icons/arrow-right.svg';
+import { ReactComponent as arrowLeftSmall } from './../../assets/icons/arrow-left-small.svg';
+import { ReactComponent as arrowRightSmall } from './../../assets/icons/arrow-right-small.svg';
+import { ReactComponent as calendar } from './../../assets/icons/calendar.svg';
+import { ReactComponent as cancel } from './../../assets/icons/cancel.svg';
+import { ReactComponent as clipboard } from './../../assets/icons/clipboard.svg';
+import { ReactComponent as close } from './../../assets/icons/closeIcon.svg';
+import { ReactComponent as dottedCircle } from './../../assets/icons/dotted-circle.svg';
+import { ReactComponent as circledCheckmark } from './../../assets/icons/circled-checkmark.svg';
+import { ReactComponent as chevronDown } from './../../assets/icons/chevron-down.svg';
+import { ReactComponent as chevronLeft } from './../../assets/icons/chevron-left.svg';
+import { ReactComponent as chevronMenu } from './../../assets/icons/chevron-menu.svg';
+import { ReactComponent as chevronNext } from './../../assets/icons/chevron-next.svg';
+import { ReactComponent as chevronPrev } from './../../assets/icons/chevron-prev.svg';
+import { ReactComponent as chevronRight } from './../../assets/icons/chevron-right.svg';
+import { ReactComponent as contentNext } from './../../assets/icons/content-next.svg';
+import { ReactComponent as contentPrev } from './../../assets/icons/content-prev.svg';
+import { ReactComponent as eyeVisible } from './../../assets/icons/eye-visible.svg';
+import { ReactComponent as eyeHidden } from './../../assets/icons/eye-hidden.svg';
+import { ReactComponent as exclamation } from './../../assets/icons/exclamation.svg';
+import { ReactComponent as externalLink } from './../../assets/icons/external-link.svg';
+import { ReactComponent as groupLayers } from './../../assets/icons/group-layers.svg';
+import { ReactComponent as info } from './../../assets/icons/info.svg';
+import { ReactComponent as infoAction } from './../../assets/icons/info-action.svg';
+import { ReactComponent as infoLink } from './../../assets/icons/info-link.svg';
+import { ReactComponent as launchArrow } from './../../assets/icons/launch-arrow.svg';
+import { ReactComponent as launchInfo } from './../../assets/icons/launch-info.svg';
+import { ReactComponent as link } from './../../assets/icons/tool-stack-image-sync.svg';
+import { ReactComponent as listBullets } from './../../assets/icons/list-bullets.svg';
+import { ReactComponent as lock } from './../../assets/icons/lock.svg';
+import { ReactComponent as logoOhifSmall } from './../../assets/icons/logo-ohif-small.svg';
+import { ReactComponent as logoDarkBackGround } from './../../assets/icons/ohif-logo-color-darkbg.svg';
+import { ReactComponent as magnifier } from './../../assets/icons/magnifier.svg';
+import { ReactComponent as notificationwarningDiamond } from './../../assets/icons/notificationwarning-diamond.svg';
+import { ReactComponent as pencil } from './../../assets/icons/pencil.svg';
+import { ReactComponent as powerOff } from './../../assets/icons/power-off.svg';
+import { ReactComponent as profile } from './../../assets/icons/profile.svg';
+import { ReactComponent as pushLeft } from './../../assets/icons/push-left.svg';
+import { ReactComponent as pushRight } from './../../assets/icons/push-right.svg';
+import { ReactComponent as settings } from './../../assets/icons/settings.svg';
+import { ReactComponent as sidePanelCloseLeft } from './../../assets/icons/side-panel-close-left.svg';
+import { ReactComponent as sidePanelCloseRight } from './../../assets/icons/side-panel-close-right.svg';
+import { ReactComponent as sorting } from './../../assets/icons/sorting.svg';
+import { ReactComponent as sortingActiveDown } from './../../assets/icons/sorting-active-down.svg';
+import { ReactComponent as sortingActiveUp } from './../../assets/icons/sorting-active-up.svg';
+import { ReactComponent as statusAlertWarning } from './../../assets/icons/status-alert-warning.svg';
+import { ReactComponent as statusAlert } from './../../assets/icons/status-alert.svg';
+import { ReactComponent as statusLocked } from './../../assets/icons/status-locked.svg';
+import { ReactComponent as statusTracked } from './../../assets/icons/status-tracked.svg';
+import { ReactComponent as statusUntracked } from './../../assets/icons/status-untracked.svg';
+import { ReactComponent as tracked } from './../../assets/icons/tracked.svg';
+import { ReactComponent as unlink } from './../../assets/icons/unlink.svg';
+import { ReactComponent as checkboxChecked } from './../../assets/icons/checkbox-checked.svg';
+import { ReactComponent as checkboxUnchecked } from './../../assets/icons/checkbox-unchecked.svg';
+import { ReactComponent as iconAlertOutline } from './../../assets/icons/icons-alert-outline.svg';
+import { ReactComponent as iconAlertSmall } from './../../assets/icons/icon-alert-small.svg';
+import { ReactComponent as iconClose } from './../../assets/icons/icon-close.svg';
+import { ReactComponent as iconClearField } from './../../assets/icons/icon-clear-field.svg';
+import { ReactComponent as iconNextInactive } from './../../assets/icons/icon-next-inactive.svg';
+import { ReactComponent as iconNext } from './../../assets/icons/icon-next.svg';
+import { ReactComponent as iconPlay } from './../../assets/icons/icon-play.svg';
+import { ReactComponent as iconPause } from './../../assets/icons/icon-pause.svg';
+import { ReactComponent as iconPrevInactive } from './../../assets/icons/icon-prev-inactive.svg';
+import { ReactComponent as iconPrev } from './../../assets/icons/icon-prev.svg';
+import { ReactComponent as iconSearch } from './../../assets/icons/icon-search.svg';
+import { ReactComponent as iconStatusAlert } from './../../assets/icons/icon-status-alert.svg';
+import { ReactComponent as iconTransferring } from './../../assets/icons/icon-transferring.svg';
+import { ReactComponent as iconUpload } from './../../assets/icons/icon-upload.svg';
+import { ReactComponent as navigationPanelRightHide } from './../../assets/icons/navigation-panel-right-hide.svg';
+import { ReactComponent as navigationPanelRightReveal } from './../../assets/icons/navigation-panel-right-reveal.svg';
+import { ReactComponent as tabLinear } from './../../assets/icons/tab-linear.svg';
+import { ReactComponent as tabPatientInfo } from './../../assets/icons/tab-patient-info.svg';
+import { ReactComponent as tabROIThreshold } from './../../assets/icons/tab-roi-threshold.svg';
+import { ReactComponent as tabSegmentation } from './../../assets/icons/tab-segmentation.svg';
+import { ReactComponent as tabStudies } from './../../assets/icons/tab-studies.svg';
+import { ReactComponent as uiArrowDown } from './../../assets/icons/ui-arrow-down.svg';
+import { ReactComponent as uiArrowUp } from './../../assets/icons/ui-arrow-up.svg';
+import { ReactComponent as uiArrowLeft } from './../../assets/icons/ui-arrow-left.svg';
+import { ReactComponent as uiArrowRight } from './../../assets/icons/ui-arrow-right.svg';
+import { ReactComponent as loadingOHIFMark } from './../../assets/icons/loading-ohif-mark.svg';
+import { ReactComponent as notificationsInfo } from './../../assets/icons/notifications-info.svg';
+import { ReactComponent as notificationsWarning } from './../../assets/icons/notifications-warning.svg';
+import { ReactComponent as notificationsError } from './../../assets/icons/notifications-error.svg';
+import { ReactComponent as notificationsSuccess } from './../../assets/icons/notifications-success.svg';
+import { ReactComponent as nextArrow } from './../../assets/icons/next-arrow.svg';
+import { ReactComponent as prevArrow } from './../../assets/icons/prev-arrow.svg';
+import { ReactComponent as viewportStatusTracked } from './../../assets/icons/viewport-status-tracked.svg';
+import { ReactComponent as toggleDicomOverlay } from './../../assets/icons/tool-toggle-dicom-overlay.svg';
+import { ReactComponent as toolZoom } from './../../assets/icons/tool-zoom.svg';
+import { ReactComponent as toolCapture } from './../../assets/icons/tool-capture.svg';
+import { ReactComponent as toolLayout } from './../../assets/icons/tool-layout-default.svg';
+import { ReactComponent as toolMore } from './../../assets/icons/tool-more-menu.svg';
+import { ReactComponent as toolMove } from './../../assets/icons/tool-move.svg';
+import { ReactComponent as toolWindow } from './../../assets/icons/tool-window-level.svg';
+import { ReactComponent as toolAnnotate } from './../../assets/icons/tool-annotate.svg';
+import { ReactComponent as toolBidirectional } from './../../assets/icons/tool-bidirectional.svg';
+import { ReactComponent as toolElipse } from './../../assets/icons/tool-measure-elipse.svg';
+import { ReactComponent as toolCircle } from './../../assets/icons/tool-circle.svg';
+import { ReactComponent as toolLength } from './../../assets/icons/tool-length.svg';
+import { ReactComponent as toolStackScroll } from './../../assets/icons/tool-stack-scroll.svg';
+import { ReactComponent as toolMagnify } from './../../assets/icons/tool-quick-magnify.svg';
+import { ReactComponent as toolFlipHorizontal } from './../../assets/icons/tool-flip-horizontal.svg';
+import { ReactComponent as toolInvert } from './../../assets/icons/tool-invert.svg';
+import { ReactComponent as toolRotateRight } from './../../assets/icons/tool-rotate-right.svg';
+import { ReactComponent as toolCine } from './../../assets/icons/tool-cine.svg';
+import { ReactComponent as toolCrosshair } from './../../assets/icons/tool-crosshair.svg';
+import { ReactComponent as toolProbe } from './../../assets/icons/focus-frame-target.svg';
+import { ReactComponent as toolAngle } from './../../assets/icons/tool-angle.svg';
+import { ReactComponent as toolReset } from './../../assets/icons/tool-reset.svg';
+import { ReactComponent as toolRectangle } from './../../assets/icons/tool-rectangle.svg';
+import { ReactComponent as toolFusionColor } from './../../assets/icons/tool-fusion-color.svg';
+import { ReactComponent as toolCreateThreshold } from './../../assets/icons/tool-create-threshold.svg';
+import { ReactComponent as toolCalibration } from './../../assets/icons/tool-calibrate.svg';
+import { ReactComponent as toolFreehand } from './../../assets/icons/tool-freehand.svg';
+import { ReactComponent as toolFreehandPolygon } from './../../assets/icons/tool-freehand-polygon.svg';
+import { ReactComponent as toolPolygon } from './../../assets/icons/tool-polygon.svg';
+import { ReactComponent as editPatient } from './../../assets/icons/edit-patient.svg';
+import { ReactComponent as panelGroupMore } from './../../assets/icons/panel-group-more.svg';
+import { ReactComponent as panelGroupOpenClose } from './../../assets/icons/panel-group-open-close.svg';
+import { ReactComponent as rowAdd } from './../../assets/icons/row-add.svg';
+import { ReactComponent as rowEdit } from './../../assets/icons/row-edit.svg';
+import { ReactComponent as rowHidden } from './../../assets/icons/row-hidden.svg';
+import { ReactComponent as rowShown } from './../../assets/icons/row-shown.svg';
+import { ReactComponent as rowLock } from './../../assets/icons/row-lock.svg';
+import { ReactComponent as rowUnlock } from './../../assets/icons/row-unlock.svg';
+import { ReactComponent as iconMPR } from './../../assets/icons/icon-mpr-alt.svg';
+import { ReactComponent as checkboxDefault } from './../../assets/icons/checkbox-default.svg';
+import { ReactComponent as checkboxActive } from './../../assets/icons/checkbox-active.svg';
+import { ReactComponent as referenceLines } from './../../assets/icons/tool-reference-lines.svg';
+import { ReactComponent as chevronDownNew } from './../../assets/icons/icon-disclosure-close.svg';
+import { ReactComponent as chevronLeftNew } from './../../assets/icons/icon-disclosure-open.svg';
+import { ReactComponent as settingsBars } from './../../assets/icons/icon-display-settings.svg';
+import { ReactComponent as iconAdd } from './../../assets/icons/icon-add.svg';
+import { ReactComponent as iconRename } from './../../assets/icons/icon-rename.svg';
+import { ReactComponent as iconDelete } from './../../assets/icons/icon-delete.svg';
+import { ReactComponent as iconMoreMenu } from './../../assets/icons/icon-more-menu.svg';
+import { ReactComponent as iconToolBrush } from './../../assets/icons/tool-seg-brush.svg';
+import { ReactComponent as iconToolEraser } from './../../assets/icons/tool-seg-eraser.svg';
+import { ReactComponent as iconToolScissor } from './../../assets/icons/icon-tool-scissor.svg';
+import { ReactComponent as iconToolShape } from './../../assets/icons/tool-seg-shape.svg';
+import { ReactComponent as iconToolThreshold } from './../../assets/icons/tool-seg-threshold.svg';
+import { ReactComponent as viewportWindowLevel } from './../../assets/icons/viewport-window-level.svg';
+import { ReactComponent as dicomTagBrowser } from './../../assets/icons/tool-dicom-tag-browser.svg';
+import { ReactComponent as iconToolFreehandRoi } from './../../assets/icons/tool-freehand-roi.svg';
+import { ReactComponent as iconToolLivewire } from './../../assets/icons/tool-magnetic-roi.svg';
+import { ReactComponent as iconToolSplineRoi } from './../../assets/icons/tool-spline-roi.svg';
+import { ReactComponent as iconToolUltrasoundBidirectional } from './../../assets/icons/tool-ultrasound-bidirectional.svg';
+import { ReactComponent as iconToolLoupe } from './../../assets/icons/tool-magnify.svg';
+import { ReactComponent as oldTrash } from './../../assets/icons/old-trash.svg';
+import { ReactComponent as oldPlay } from './../../assets/icons/old-play.svg';
+import { ReactComponent as oldStop } from './../../assets/icons/old-stop.svg';
+import { ReactComponent as iconColorLUT } from './../../assets/icons/icon-color-lut.svg';
+import { ReactComponent as iconChevronPatient } from './../../assets/icons/icon-chevron-patient.svg';
+import { ReactComponent as iconPatient } from './../../assets/icons/icon-patient.svg';
+import { ReactComponent as iconSettings } from './../../assets/icons/icon-settings.svg';
+import { ReactComponent as iconToolbarBack } from './../../assets/icons/icon-toolbar-back.svg';
+import { ReactComponent as iconMultiplePatients } from './../../assets/icons/icon-multiple-patients.svg';
+import { ReactComponent as layoutAdvanced3DFourUp } from './../../assets/icons/layout-advanced-3d-four-up.svg';
+import { ReactComponent as layoutAdvanced3DMain } from './../../assets/icons/layout-advanced-3d-main.svg';
+import { ReactComponent as layoutAdvanced3DOnly } from './../../assets/icons/layout-advanced-3d-only.svg';
+import { ReactComponent as layoutAdvanced3DPrimary } from './../../assets/icons/layout-advanced-3d-primary.svg';
+import { ReactComponent as layoutAdvancedAxialPrimary } from './../../assets/icons/layout-advanced-axial-primary.svg';
+import { ReactComponent as layoutAdvancedMPR } from './../../assets/icons/layout-advanced-mpr.svg';
+import { ReactComponent as layoutCommon1x1 } from './../../assets/icons/layout-common-1x1.svg';
+import { ReactComponent as layoutCommon1x2 } from './../../assets/icons/layout-common-1x2.svg';
+import { ReactComponent as layoutCommon2x2 } from './../../assets/icons/layout-common-2x2.svg';
+import { ReactComponent as layoutCommon2x3 } from './../../assets/icons/layout-common-2x3.svg';
+import { ReactComponent as iconToolRotate } from './../../assets/icons/tool-3d-rotate.svg';
+import { ReactComponent as tab4D } from './../../assets/icons/tab-4d.svg';
+import { ReactComponent as investigationalUse } from './../../assets/icons/illustration-investigational-use.svg';
+import { ReactComponent as actionNewDialog } from './../../assets/icons/action-new-dialog.svg';
 
-/** Tools */
-import toggleDicomOverlay from './../../assets/icons/tool-toggle-dicom-overlay.svg';
-import toolZoom from './../../assets/icons/tool-zoom.svg';
-import toolCapture from './../../assets/icons/tool-capture.svg';
-import toolLayout from './../../assets/icons/tool-layout-default.svg';
-import toolMore from './../../assets/icons/tool-more-menu.svg';
-import toolMove from './../../assets/icons/tool-move.svg';
-import toolWindow from './../../assets/icons/tool-window-level.svg';
-import toolAnnotate from './../../assets/icons/tool-annotate.svg';
-import toolBidirectional from './../../assets/icons/tool-bidirectional.svg';
-import toolElipse from './../../assets/icons/tool-measure-elipse.svg';
-import toolCircle from './../../assets/icons/tool-circle.svg';
-import toolLength from './../../assets/icons/tool-length.svg';
-import toolStackScroll from './../../assets/icons/tool-stack-scroll.svg';
-import toolMagnify from './../../assets/icons/tool-quick-magnify.svg';
-import toolFlipHorizontal from './../../assets/icons/tool-flip-horizontal.svg';
-import toolInvert from './../../assets/icons/tool-invert.svg';
-import toolRotateRight from './../../assets/icons/tool-rotate-right.svg';
-import toolCine from './../../assets/icons/tool-cine.svg';
-import toolCrosshair from './../../assets/icons/tool-crosshair.svg';
-import toolProbe from './../../assets/icons/focus-frame-target.svg';
-import toolAngle from './../../assets/icons/tool-angle.svg';
-import toolReset from './../../assets/icons/tool-reset.svg';
-import toolRectangle from './../../assets/icons/tool-rectangle.svg';
-import toolFusionColor from './../../assets/icons/tool-fusion-color.svg';
-import toolCreateThreshold from './../../assets/icons/tool-create-threshold.svg';
-import toolCalibration from './../../assets/icons/tool-calibrate.svg';
-import toolFreehand from './../../assets/icons/tool-freehand.svg';
-import toolFreehandPolygon from './../../assets/icons/tool-freehand-polygon.svg';
-import toolPolygon from './../../assets/icons/tool-polygon.svg';
-import toolBrush from './../../assets/icons/tool-brush.svg';
-import toolEraser from './../../assets/icons/tool-eraser.svg';
-import toolScissorRect from './../../assets/icons/tool-scissor-rect.svg';
-import toolScissorCircle from './../../assets/icons/tool-scissor-circle.svg';
-import toolPaintFill from './../../assets/icons/tool-paint-fill.svg';
-import editPatient from './../../assets/icons/edit-patient.svg';
-import panelGroupMore from './../../assets/icons/panel-group-more.svg';
-import panelGroupOpenClose from './../../assets/icons/panel-group-open-close.svg';
-import rowAdd from './../../assets/icons/row-add.svg';
-import rowEdit from './../../assets/icons/row-edit.svg';
-import rowHidden from './../../assets/icons/row-hidden.svg';
-import rowShown from './../../assets/icons/row-shown.svg';
-import rowLock from './../../assets/icons/row-lock.svg';
-import rowUnlock from './../../assets/icons/row-unlock.svg';
-import iconMPR from './../../assets/icons/icon-mpr-alt.svg';
-import checkboxDefault from './../../assets/icons/checkbox-default.svg';
-import checkboxActive from './../../assets/icons/checkbox-active.svg';
-import referenceLines from './../../assets/icons/tool-reference-lines.svg';
-import chevronDownNew from './../../assets/icons/icon-disclosure-close.svg';
-import chevronLeftNew from './../../assets/icons/icon-disclosure-open.svg';
-import settingsBars from './../../assets/icons/icon-display-settings.svg';
-import iconAdd from './../../assets/icons/icon-add.svg';
-import iconRename from './../../assets/icons/icon-rename.svg';
-import iconDelete from './../../assets/icons/icon-delete.svg';
-import iconMoreMenu from './../../assets/icons/icon-more-menu.svg';
-import iconToolBrush from './../../assets/icons/tool-seg-brush.svg';
-import iconToolEraser from './../../assets/icons/tool-seg-eraser.svg';
-import iconToolScissor from './../../assets/icons/icon-tool-scissor.svg';
-import iconToolShape from './../../assets/icons/tool-seg-shape.svg';
-import iconToolThreshold from './../../assets/icons/tool-seg-threshold.svg';
-import viewportWindowLevel from './../../assets/icons/viewport-window-level.svg';
-import dicomTagBrowser from './../../assets/icons/tool-dicom-tag-browser.svg';
-import iconToolFreehandRoi from './../../assets/icons/tool-freehand-roi.svg';
-import iconToolLivewire from './../../assets/icons/tool-magnetic-roi.svg';
-import iconToolSplineRoi from './../../assets/icons/tool-spline-roi.svg';
-import iconToolUltrasoundBidirectional from './../../assets/icons/tool-ultrasound-bidirectional.svg';
-import iconToolLoupe from './../../assets/icons/tool-magnify.svg';
-/** Old OHIF */
-import oldTrash from './../../assets/icons/old-trash.svg';
-import oldPlay from './../../assets/icons/old-play.svg';
-import oldStop from './../../assets/icons/old-stop.svg';
-
-/** ColorLut */
-import iconColorLUT from './../../assets/icons/icon-color-lut.svg';
-
-/** New Patient Info Toolbar */
-import iconChevronPatient from './../../assets/icons/icon-chevron-patient.svg';
-import iconPatient from './../../assets/icons/icon-patient.svg';
-import iconSettings from './../../assets/icons/icon-settings.svg';
-import iconToolbarBack from './../../assets/icons/icon-toolbar-back.svg';
-import iconMultiplePatients from './../../assets/icons/icon-multiple-patients.svg';
-
-/** Volume Rendering */
 import CTAAA from './../../assets/icons/CT-AAA.png';
 import CTAAA2 from './../../assets/icons/CT-AAA2.png';
 import CTAir from './../../assets/icons/CT-Air.png';
@@ -201,27 +201,6 @@ import MRDefault from './../../assets/icons/MR-Default.png';
 import MRMIP from './../../assets/icons/MR-MIP.png';
 import MRT2Brain from './../../assets/icons/MR-T2-Brain.png';
 import VolumeRendering from './../../assets/icons/VolumeRendering.png';
-import actionNewDialog from './../../assets/icons/action-new-dialog.svg';
-
-/** LAYOUT */
-
-import layoutAdvanced3DFourUp from './../../assets/icons/layout-advanced-3d-four-up.svg';
-import layoutAdvanced3DMain from './../../assets/icons/layout-advanced-3d-main.svg';
-import layoutAdvanced3DOnly from './../../assets/icons/layout-advanced-3d-only.svg';
-import layoutAdvanced3DPrimary from './../../assets/icons/layout-advanced-3d-primary.svg';
-import layoutAdvancedAxialPrimary from './../../assets/icons/layout-advanced-axial-primary.svg';
-import layoutAdvancedMPR from './../../assets/icons/layout-advanced-mpr.svg';
-import layoutCommon1x1 from './../../assets/icons/layout-common-1x1.svg';
-import layoutCommon1x2 from './../../assets/icons/layout-common-1x2.svg';
-import layoutCommon2x2 from './../../assets/icons/layout-common-2x2.svg';
-import layoutCommon2x3 from './../../assets/icons/layout-common-2x3.svg';
-import iconToolRotate from './../../assets/icons/tool-3d-rotate.svg';
-
-//
-import tab4D from './../../assets/icons/tab-4d.svg';
-
-/** New investigational use */
-import investigationalUse from './../../assets/icons/illustration-investigational-use.svg';
 
 const ICONS = {
   'arrow-down': arrowDown,
diff --git a/platform/ui/src/components/IconButton/IconButton.tsx b/platform/ui/src/components/IconButton/IconButton.tsx
index fff9d168f7b..e6d74594b11 100644
--- a/platform/ui/src/components/IconButton/IconButton.tsx
+++ b/platform/ui/src/components/IconButton/IconButton.tsx
@@ -74,14 +74,14 @@ const fullWidthClasses = {
 
 const IconButton = ({
   children,
-  variant,
-  color,
-  size,
-  rounded,
-  disabled,
-  type,
-  fullWidth,
-  onClick,
+  variant = 'contained',
+  color = 'default',
+  size = 'medium',
+  rounded = 'medium',
+  disabled = false,
+  type = 'button',
+  fullWidth = false,
+  onClick = () => {},
   className,
   id,
   ...rest
@@ -122,17 +122,6 @@ const IconButton = ({
   );
 };
 
-IconButton.defaultProps = {
-  onClick: () => {},
-  color: 'default',
-  disabled: false,
-  fullWidth: false,
-  rounded: 'medium',
-  size: 'medium',
-  type: 'button',
-  variant: 'contained',
-};
-
 IconButton.propTypes = {
   children: PropTypes.node.isRequired,
   size: PropTypes.oneOf(['small', 'medium', 'large', 'initial', 'toolbar', 'toolbox']),
diff --git a/platform/ui/src/components/ImageScrollbar/ImageScrollbar.tsx b/platform/ui/src/components/ImageScrollbar/ImageScrollbar.tsx
index 1128680a1c5..cfa5fcac4a6 100644
--- a/platform/ui/src/components/ImageScrollbar/ImageScrollbar.tsx
+++ b/platform/ui/src/components/ImageScrollbar/ImageScrollbar.tsx
@@ -20,10 +20,12 @@ class ImageScrollbar extends PureComponent {
       width: `${this.props.height}`,
     };
 
+    const { onContextMenu = e => e.preventDefault() } = this.props;
+
     return (
       <div
         className="scroll"
-        onContextMenu={this.props.onContextMenu}
+        onContextMenu={onContextMenu}
       >
         <div className="scroll-holder">
           <input
@@ -70,8 +72,4 @@ class ImageScrollbar extends PureComponent {
   };
 }
 
-ImageScrollbar.defaultProps = {
-  onContextMenu: e => e.preventDefault(),
-};
-
 export default ImageScrollbar;
diff --git a/platform/ui/src/components/InputDateRange/InputDateRange.tsx b/platform/ui/src/components/InputDateRange/InputDateRange.tsx
index 88dafbb1a23..88638b496d7 100644
--- a/platform/ui/src/components/InputDateRange/InputDateRange.tsx
+++ b/platform/ui/src/components/InputDateRange/InputDateRange.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import DateRange from '../DateRange';
+import { DatePickerWithRange } from '@ohif/ui-next';
 import InputLabelWrapper from '../InputLabelWrapper';
 
 const InputDateRange = ({
@@ -9,8 +9,8 @@ const InputDateRange = ({
   label,
   isSortable,
   sortDirection,
-  onLabelClick,
-  value,
+  onLabelClick = () => {},
+  value = {},
   onChange,
 }) => {
   const { startDate, endDate } = value;
@@ -26,9 +26,11 @@ const InputDateRange = ({
       isSortable={isSortable}
       sortDirection={sortDirection}
       onLabelClick={onClickHandler}
+      className="xl:min-w-[284px]"
     >
-      <div className="relative">
-        <DateRange
+      <div className="relative xl:max-w-[246px]">
+        <DatePickerWithRange
+          className="mt-2"
           id={id}
           startDate={startDate}
           endDate={endDate}
@@ -39,13 +41,6 @@ const InputDateRange = ({
   );
 };
 
-const noop = () => {};
-
-InputDateRange.defaultProps = {
-  value: {},
-  onLabelClick: noop,
-};
-
 InputDateRange.propTypes = {
   id: PropTypes.string,
   label: PropTypes.string.isRequired,
diff --git a/platform/ui/src/components/InputDoubleRange/InputDoubleRange.tsx b/platform/ui/src/components/InputDoubleRange/InputDoubleRange.tsx
index d5ea681657f..19367d0bcfd 100644
--- a/platform/ui/src/components/InputDoubleRange/InputDoubleRange.tsx
+++ b/platform/ui/src/components/InputDoubleRange/InputDoubleRange.tsx
@@ -25,20 +25,20 @@ type InputDoubleRangeProps = {
 const InputDoubleRange: React.FC<InputDoubleRangeProps> = ({
   values,
   onChange,
-  minValue,
-  maxValue,
-  step,
-  unit,
-  containerClassName,
-  inputClassName,
-  labelClassName,
-  labelVariant,
-  showLabel,
-  labelPosition,
-  trackColor,
-  allowNumberEdit,
+  minValue = 0,
+  maxValue = 100,
+  step = 1,
+  unit = '',
+  containerClassName = '',
+  inputClassName = '',
+  labelClassName = '',
+  labelVariant = 'body1',
+  showLabel = false,
+  labelPosition = 'left',
+  trackColor = 'primary',
+  allowNumberEdit = false,
   allowOutOfRange = false,
-  showAdjustmentArrows,
+  showAdjustmentArrows = false,
 }) => {
   // Set initial thumb positions as percentages
   const initialPercentageStart = Math.round(((values[0] - minValue) / (maxValue - minValue)) * 100);
@@ -235,20 +235,4 @@ const InputDoubleRange: React.FC<InputDoubleRangeProps> = ({
   );
 };
 
-InputDoubleRange.defaultProps = {
-  minValue: 0,
-  maxValue: 100,
-  step: 1,
-  unit: '',
-  containerClassName: '',
-  inputClassName: '',
-  labelClassName: '',
-  labelVariant: 'body1',
-  showLabel: false,
-  labelPosition: 'left',
-  trackColor: 'primary',
-  allowNumberEdit: false,
-  showAdjustmentArrows: false,
-};
-
 export default InputDoubleRange;
diff --git a/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx b/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx
index 904b06904e0..fcd21778224 100644
--- a/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx
+++ b/platform/ui/src/components/InputLabelWrapper/InputLabelWrapper.tsx
@@ -17,7 +17,7 @@ const InputLabelWrapper = ({
   isSortable,
   sortDirection,
   onLabelClick,
-  className,
+  className = '',
   children,
 }) => {
   const onClickHandler = e => {
@@ -53,10 +53,6 @@ const InputLabelWrapper = ({
   );
 };
 
-InputLabelWrapper.defaultProps = {
-  className: '',
-};
-
 InputLabelWrapper.propTypes = {
   label: PropTypes.string.isRequired,
   isSortable: PropTypes.bool.isRequired,
diff --git a/platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx b/platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx
index 6a0c3974566..7a5ee8d42a4 100644
--- a/platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx
+++ b/platform/ui/src/components/InputMultiSelect/InputMultiSelect.tsx
@@ -10,9 +10,9 @@ const InputMultiSelect = ({
   isSortable,
   sortDirection,
   onLabelClick,
-  value,
-  placeholder,
-  options,
+  value = [],
+  placeholder = '',
+  options = [],
   onChange,
 }) => {
   return (
@@ -50,12 +50,6 @@ const InputMultiSelect = ({
   );
 };
 
-InputMultiSelect.defaultProps = {
-  value: [],
-  placeholder: '',
-  options: [],
-};
-
 InputMultiSelect.propTypes = {
   id: PropTypes.string,
   label: PropTypes.string.isRequired,
diff --git a/platform/ui/src/components/InputText/InputText.tsx b/platform/ui/src/components/InputText/InputText.tsx
index 532b6282b64..290e2a0fff2 100644
--- a/platform/ui/src/components/InputText/InputText.tsx
+++ b/platform/ui/src/components/InputText/InputText.tsx
@@ -4,7 +4,15 @@ import PropTypes from 'prop-types';
 import Input from '../Input';
 import InputLabelWrapper from '../InputLabelWrapper';
 
-const InputText = ({ id, label, isSortable, sortDirection, onLabelClick, value, onChange }) => {
+const InputText = ({
+  id,
+  label,
+  isSortable = false,
+  sortDirection = 'none',
+  onLabelClick = () => {},
+  value = '',
+  onChange,
+}) => {
   return (
     <InputLabelWrapper
       label={label}
@@ -26,13 +34,6 @@ const InputText = ({ id, label, isSortable, sortDirection, onLabelClick, value,
   );
 };
 
-InputText.defaultProps = {
-  value: '',
-  isSortable: false,
-  onLabelClick: () => {},
-  sortDirection: 'none',
-};
-
 InputText.propTypes = {
   id: PropTypes.string,
   label: PropTypes.string.isRequired,
diff --git a/platform/ui/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx b/platform/ui/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx
index f2d4cb40456..3f29de6873a 100644
--- a/platform/ui/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx
+++ b/platform/ui/src/components/InvestigationalUseDialog/InvestigationalUseDialog.tsx
@@ -9,7 +9,11 @@ export enum showDialogOption {
   ShowOnceAndConfigure = 'configure',
 }
 
-const InvestigationalUseDialog = ({ dialogConfiguration }) => {
+const InvestigationalUseDialog = ({
+  dialogConfiguration = {
+    option: showDialogOption.AlwaysShowDialog,
+  },
+}) => {
   const { option, days } = dialogConfiguration;
   const [isHidden, setIsHidden] = useState(true);
 
@@ -97,13 +101,7 @@ InvestigationalUseDialog.propTypes = {
   dialogConfiguration: PropTypes.shape({
     option: PropTypes.oneOf(Object.values(showDialogOption)).isRequired,
     days: PropTypes.number,
-  }).isRequired,
-};
-
-InvestigationalUseDialog.defaultProps = {
-  dialogConfiguration: {
-    option: showDialogOption.AlwaysShowDialog,
-  },
+  }),
 };
 
 export default InvestigationalUseDialog;
diff --git a/platform/ui/src/components/LayoutPreset/LayoutPreset.tsx b/platform/ui/src/components/LayoutPreset/LayoutPreset.tsx
index 9113cc0ea3d..d8d0a7272e4 100644
--- a/platform/ui/src/components/LayoutPreset/LayoutPreset.tsx
+++ b/platform/ui/src/components/LayoutPreset/LayoutPreset.tsx
@@ -4,7 +4,7 @@ import classNames from 'classnames';
 import Icon from '../Icon/Icon';
 
 function LayoutPreset({
-  onSelection,
+  onSelection = () => {},
   title,
   icon,
   commandOptions,
@@ -27,10 +27,6 @@ function LayoutPreset({
   );
 }
 
-LayoutPreset.defaultProps = {
-  onSelection: () => {},
-};
-
 LayoutPreset.propTypes = {
   onSelection: PropTypes.func.isRequired,
   title: PropTypes.string,
diff --git a/platform/ui/src/components/LayoutSelector/LayoutSelector.tsx b/platform/ui/src/components/LayoutSelector/LayoutSelector.tsx
index 2271069edf8..de8512abcc5 100644
--- a/platform/ui/src/components/LayoutSelector/LayoutSelector.tsx
+++ b/platform/ui/src/components/LayoutSelector/LayoutSelector.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 
-function LayoutSelector({ onSelection, rows, columns }) {
+function LayoutSelector({ onSelection = () => {}, rows = 3, columns = 4 }) {
   const [hoveredIndex, setHoveredIndex] = useState();
   const hoverX = hoveredIndex % columns;
   const hoverY = Math.floor(hoveredIndex / columns);
@@ -48,12 +48,6 @@ function LayoutSelector({ onSelection, rows, columns }) {
   );
 }
 
-LayoutSelector.defaultProps = {
-  onSelection: () => {},
-  columns: 4,
-  rows: 3,
-};
-
 LayoutSelector.propTypes = {
   onSelection: PropTypes.func.isRequired,
   columns: PropTypes.number.isRequired,
diff --git a/platform/ui/src/components/LegacyButton/LegacyButton.tsx b/platform/ui/src/components/LegacyButton/LegacyButton.tsx
index dea53f92716..0ec63cae4f7 100644
--- a/platform/ui/src/components/LegacyButton/LegacyButton.tsx
+++ b/platform/ui/src/components/LegacyButton/LegacyButton.tsx
@@ -137,7 +137,7 @@ const fullWidthClasses = {
 };
 
 const LegacyButton = ({
-  children,
+  children = '',
   variant = defaults.variant,
   color = defaults.color,
   border = defaults.border,
@@ -151,7 +151,7 @@ const LegacyButton = ({
   endIcon: endIconProp,
   name,
   className,
-  onClick,
+  onClick = () => {},
   /** TODO: All possible props should be explicitly defined -- avoid spreading props  */
   ...rest
 }) => {
@@ -206,13 +206,6 @@ const LegacyButton = ({
   );
 };
 
-LegacyButton.defaultProps = {
-  color: defaults.color,
-  disabled: false,
-  children: '',
-  onClick: () => {},
-};
-
 LegacyButton.propTypes = {
   /** What is inside the button, can be text or react component */
   children: PropTypes.node,
diff --git a/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx b/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx
index fff5154f12c..9824b30f9be 100644
--- a/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx
+++ b/platform/ui/src/components/LegacyCinePlayer/LegacyCinePlayer.tsx
@@ -8,14 +8,14 @@ import Icon from '../Icon';
 import './LegacyCinePlayerCustomInputRange.css';
 
 const LegacyCinePlayer = ({
-  isPlaying,
-  minFrameRate,
-  maxFrameRate,
-  stepFrameRate,
-  frameRate: defaultFrameRate,
-  onFrameRateChange,
-  onPlayPauseChange,
-  onClose,
+  isPlaying = false,
+  minFrameRate = 1,
+  maxFrameRate = 90,
+  stepFrameRate = 1,
+  frameRate: defaultFrameRate = 24,
+  onFrameRateChange = () => {},
+  onPlayPauseChange = () => {},
+  onClose = () => {},
 }) => {
   const [frameRate, setFrameRate] = useState(defaultFrameRate);
   const debouncedSetFrameRate = debounce(onFrameRateChange, 300);
@@ -74,17 +74,6 @@ const LegacyCinePlayer = ({
 
 const noop = () => {};
 
-LegacyCinePlayer.defaultProps = {
-  isPlaying: false,
-  minFrameRate: 1,
-  maxFrameRate: 90,
-  stepFrameRate: 1,
-  frameRate: 24,
-  onPlayPauseChange: noop,
-  onFrameRateChange: noop,
-  onClose: noop,
-};
-
 LegacyCinePlayer.propTypes = {
   /** Minimum value for range slider */
   minFrameRate: PropTypes.number.isRequired,
diff --git a/platform/ui/src/components/LegacySidePanel/LegacySidePanel.tsx b/platform/ui/src/components/LegacySidePanel/LegacySidePanel.tsx
index 402d0bf14d4..466b59a2bcc 100644
--- a/platform/ui/src/components/LegacySidePanel/LegacySidePanel.tsx
+++ b/platform/ui/src/components/LegacySidePanel/LegacySidePanel.tsx
@@ -283,10 +283,6 @@ const LegacySidePanel = ({
   );
 };
 
-LegacySidePanel.defaultProps = {
-  defaultComponentOpen: null,
-};
-
 LegacySidePanel.propTypes = {
   servicesManager: PropTypes.object.isRequired,
   side: PropTypes.oneOf(['left', 'right']).isRequired,
diff --git a/platform/ui/src/components/LegacySplitButton/LegacySplitButton.tsx b/platform/ui/src/components/LegacySplitButton/LegacySplitButton.tsx
index 856d26dcbd7..4dae06b43d6 100644
--- a/platform/ui/src/components/LegacySplitButton/LegacySplitButton.tsx
+++ b/platform/ui/src/components/LegacySplitButton/LegacySplitButton.tsx
@@ -72,10 +72,10 @@ const LegacySplitButton = ({
   primary,
   secondary,
   items,
-  renderer,
+  renderer = null,
   onInteraction,
-  Component,
-  isActive,
+  Component = null,
+  isActive = false,
 }) => {
   const { t } = useTranslation('Buttons');
   const [state, setState] = useState({ isHovering: false, isExpanded: false });
@@ -149,7 +149,6 @@ const LegacySplitButton = ({
 };
 
 LegacySplitButton.propTypes = {
-  isToggle: PropTypes.bool,
   groupId: PropTypes.string.isRequired,
   primary: PropTypes.object.isRequired,
   secondary: PropTypes.object.isRequired,
@@ -160,11 +159,4 @@ LegacySplitButton.propTypes = {
   Component: PropTypes.elementType,
 };
 
-LegacySplitButton.defaultProps = {
-  isToggle: false,
-  renderer: null,
-  isActive: false,
-  Component: null,
-};
-
 export default LegacySplitButton;
diff --git a/platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx b/platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx
index 4f7d40dd0b6..00857662fd8 100644
--- a/platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx
+++ b/platform/ui/src/components/LegacyViewportActionBar/LegacyViewportActionBar.tsx
@@ -11,11 +11,11 @@ import LegacyCinePlayer from '../LegacyCinePlayer';
 
 const LegacyViewportActionBar = ({
   studyData,
-  showNavArrows,
-  showStatus,
-  showCine,
-  cineProps,
-  showPatientInfo: patientInfoVisibility,
+  showNavArrows = true,
+  showStatus = true,
+  showCine = false,
+  cineProps = {},
+  showPatientInfo: patientInfoVisibility = false,
   onArrowsClick,
   onDoubleClick,
   getStatusComponent,
@@ -166,14 +166,8 @@ LegacyViewportActionBar.propTypes = {
     }),
   }).isRequired,
   getStatusComponent: PropTypes.func.isRequired,
-};
-
-LegacyViewportActionBar.defaultProps = {
-  cineProps: {},
-  showCine: false,
-  showStatus: true,
-  showNavArrows: true,
-  showPatientInfo: false,
+  onDoubleClick: PropTypes.func.isRequired,
+  showStatus: PropTypes.bool,
 };
 
 export default LegacyViewportActionBar;
diff --git a/platform/ui/src/components/LineChart/LineChart.tsx b/platform/ui/src/components/LineChart/LineChart.tsx
index 472fa7a5bdc..08fe3cfe0a0 100644
--- a/platform/ui/src/components/LineChart/LineChart.tsx
+++ b/platform/ui/src/components/LineChart/LineChart.tsx
@@ -10,11 +10,11 @@ const LineChart = ({
   height: heightProp,
   axis,
   series,
-  showAxisLabels,
-  showAxisGrid,
-  showLegend,
-  legendWidth,
-  transparentChartBackground,
+  showAxisLabels = true,
+  showAxisGrid = true,
+  showLegend = false,
+  legendWidth = 120,
+  transparentChartBackground = false,
   containerClassName,
   chartContainerClassName,
 }: {
@@ -105,14 +105,6 @@ const LineChart = ({
   );
 };
 
-LineChart.defaultProps = {
-  showAxisLabels: true,
-  showAxisGrid: true,
-  showLegend: false,
-  legendWidth: 120,
-  transparentChartBackground: false,
-};
-
 LineChart.propTypes = {
   title: PropTypes.string,
   width: PropTypes.number,
diff --git a/platform/ui/src/components/ListMenu/ListMenu.tsx b/platform/ui/src/components/ListMenu/ListMenu.tsx
index 00fda14b7dd..56b896cb4c8 100644
--- a/platform/ui/src/components/ListMenu/ListMenu.tsx
+++ b/platform/ui/src/components/ListMenu/ListMenu.tsx
@@ -5,7 +5,7 @@ import PropTypes from 'prop-types';
 const flex = 'flex flex-row justify-between items-center';
 const theme = 'bg-indigo-dark text-white';
 
-const ListMenu = ({ items = [], renderer, onClick }) => {
+const ListMenu = ({ items = [], renderer, onClick = () => {} }) => {
   const [selectedIndex, setSelectedIndex] = useState(null);
 
   const ListItem = ({ item, index, isSelected }) => {
@@ -48,16 +48,10 @@ const ListMenu = ({ items = [], renderer, onClick }) => {
   );
 };
 
-const noop = () => {};
-
 ListMenu.propTypes = {
   items: PropTypes.array.isRequired,
   renderer: PropTypes.func.isRequired,
   onClick: PropTypes.func,
 };
 
-ListMenu.defaultProps = {
-  onClick: noop,
-};
-
 export default ListMenu;
diff --git a/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx b/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx
index 6126db1b7f9..70c20d6a9fa 100644
--- a/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx
+++ b/platform/ui/src/components/MeasurementTable/MeasurementItem.tsx
@@ -9,7 +9,7 @@ const MeasurementItem = ({
   index,
   label,
   displayText,
-  isActive,
+  isActive = false,
   onClick,
   onEdit,
   onDelete,
@@ -110,8 +110,4 @@ MeasurementItem.propTypes = {
   onDelete: PropTypes.func,
 };
 
-MeasurementItem.defaultProps = {
-  isActive: false,
-};
-
 export default MeasurementItem;
diff --git a/platform/ui/src/components/MeasurementTable/MeasurementTable.tsx b/platform/ui/src/components/MeasurementTable/MeasurementTable.tsx
index 210bcde5a04..226c41f0d10 100644
--- a/platform/ui/src/components/MeasurementTable/MeasurementTable.tsx
+++ b/platform/ui/src/components/MeasurementTable/MeasurementTable.tsx
@@ -5,10 +5,10 @@ import { useTranslation } from 'react-i18next';
 import MeasurementItem from './MeasurementItem';
 
 const MeasurementTable = ({
-  data,
+  data = [],
   title,
-  onClick,
-  onEdit,
+  onClick = () => {},
+  onEdit = () => {},
   onDelete,
   servicesManager,
 }: withAppTypes) => {
@@ -71,12 +71,6 @@ const MeasurementTable = ({
   );
 };
 
-MeasurementTable.defaultProps = {
-  data: [],
-  onClick: () => {},
-  onEdit: () => {},
-};
-
 MeasurementTable.propTypes = {
   title: PropTypes.string.isRequired,
   data: PropTypes.arrayOf(
diff --git a/platform/ui/src/components/Modal/Modal.tsx b/platform/ui/src/components/Modal/Modal.tsx
index 1a717dc103c..8730b5604ac 100644
--- a/platform/ui/src/components/Modal/Modal.tsx
+++ b/platform/ui/src/components/Modal/Modal.tsx
@@ -15,12 +15,12 @@ if (typeof document !== 'undefined') {
 
 const Modal = ({
   closeButton,
-  shouldCloseOnEsc,
+  shouldCloseOnEsc = true,
   isOpen,
   title,
   onClose,
   children,
-  shouldCloseOnOverlayClick,
+  shouldCloseOnOverlayClick = true,
   movable = false,
   containerDimensions = null,
   contentDimensions = null,
@@ -99,14 +99,6 @@ const Modal = ({
   );
 };
 
-Modal.defaultProps = {
-  shouldCloseOnEsc: true,
-  shouldCloseOnOverlayClick: true,
-  movable: false,
-  containerDimensions: null,
-  contentDimensions: null,
-};
-
 Modal.propTypes = {
   closeButton: PropTypes.bool,
   shouldCloseOnEsc: PropTypes.bool,
diff --git a/platform/ui/src/components/Notification/Notification.tsx b/platform/ui/src/components/Notification/Notification.tsx
index 5d1c82f5b55..816a06e3049 100644
--- a/platform/ui/src/components/Notification/Notification.tsx
+++ b/platform/ui/src/components/Notification/Notification.tsx
@@ -5,7 +5,15 @@ import PropTypes from 'prop-types';
 import Button, { ButtonEnums } from '../Button';
 import Icon from '../Icon';
 
-const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick, onKeyPress }) => {
+const Notification = ({
+  id,
+  type = 'info',
+  message,
+  actions,
+  onSubmit,
+  onOutsideClick = () => {},
+  onKeyPress,
+}) => {
   const notificationRef = useRef(null);
 
   useEffect(() => {
@@ -99,11 +107,6 @@ const Notification = ({ id, type, message, actions, onSubmit, onOutsideClick, on
   );
 };
 
-Notification.defaultProps = {
-  type: 'info',
-  onOutsideClick: () => {},
-};
-
 Notification.propTypes = {
   type: PropTypes.oneOf(['error', 'warning', 'info', 'success']),
   message: PropTypes.string.isRequired,
diff --git a/platform/ui/src/components/PanelSection/PanelSection.tsx b/platform/ui/src/components/PanelSection/PanelSection.tsx
index 6dd79fefdc1..06aea7f4ec6 100644
--- a/platform/ui/src/components/PanelSection/PanelSection.tsx
+++ b/platform/ui/src/components/PanelSection/PanelSection.tsx
@@ -49,8 +49,6 @@ const PanelSection = ({ title, children, actionIcons = [], childrenClassName })
   );
 };
 
-PanelSection.defaultProps = {};
-
 PanelSection.propTypes = {
   title: PropTypes.string,
   children: PropTypes.node,
diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx
index ff909483a10..20d001408de 100644
--- a/platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx
+++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationDropDownRow.tsx
@@ -7,7 +7,7 @@ function SegmentationDropDownRow({
   segmentations = [],
   activeSegmentation,
   onActiveSegmentationChange,
-  disableEditing,
+  disableEditing = false,
   onToggleSegmentationVisibility,
   onSegmentationEdit,
   onSegmentationDownload,
@@ -180,9 +180,4 @@ SegmentationDropDownRow.propTypes = {
   onSegmentationAdd: PropTypes.func,
 };
 
-SegmentationDropDownRow.defaultProps = {
-  segmentations: [],
-  disableEditing: false,
-};
-
 export default SegmentationDropDownRow;
diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
index 0e9e0b0a26e..e197fa02f70 100644
--- a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
+++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupSegment.tsx
@@ -8,7 +8,7 @@ const SegmentItem = ({
   segmentIndex,
   segmentationId,
   label,
-  isActive,
+  isActive = false,
   isVisible,
   color,
   showDelete,
@@ -236,8 +236,4 @@ SegmentItem.propTypes = {
   displayText: PropTypes.string,
 };
 
-SegmentItem.defaultProps = {
-  isActive: false,
-};
-
 export default SegmentItem;
diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx
index 73262d69f11..e92c05bcfff 100644
--- a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx
+++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTable.tsx
@@ -9,39 +9,34 @@ import SegmentationGroupSegment from './SegmentationGroupSegment';
 import { useTranslation } from 'react-i18next';
 
 const SegmentationGroupTable = ({
-  segmentations,
-  // segmentation initial config
+  segmentations = [],
   segmentationConfig,
-  // UI show/hide
-  disableEditing,
-  showAddSegmentation,
-  showAddSegment,
-  showDeleteSegment,
-  // segmentation/segment handlers
-  onSegmentationAdd,
-  onSegmentationEdit,
-  onSegmentationClick,
-  onSegmentationDelete,
-  onSegmentationDownload,
-  onSegmentationDownloadRTSS,
-  storeSegmentation,
-  // segment handlers
-  onSegmentClick,
-  onSegmentAdd,
-  onSegmentDelete,
-  onSegmentEdit,
-  onToggleSegmentationVisibility,
-  onToggleSegmentVisibility,
-  onToggleSegmentLock,
-  onSegmentColorClick,
-  // segmentation config handlers
-  setFillAlpha,
-  setFillAlphaInactive,
-  setOutlineWidthActive,
-  setOutlineOpacityActive,
-  setRenderFill,
-  setRenderInactiveSegmentations,
-  setRenderOutline,
+  disableEditing = false,
+  showAddSegmentation = true,
+  showAddSegment = true,
+  showDeleteSegment = true,
+  onSegmentationAdd = () => {},
+  onSegmentationEdit = () => {},
+  onSegmentationClick = () => {},
+  onSegmentationDelete = () => {},
+  onSegmentationDownload = () => {},
+  onSegmentationDownloadRTSS = () => {},
+  storeSegmentation = () => {},
+  onSegmentClick = () => {},
+  onSegmentAdd = () => {},
+  onSegmentDelete = () => {},
+  onSegmentEdit = () => {},
+  onToggleSegmentationVisibility = () => {},
+  onToggleSegmentVisibility = () => {},
+  onToggleSegmentLock = () => {},
+  onSegmentColorClick = () => {},
+  setFillAlpha = () => {},
+  setFillAlphaInactive = () => {},
+  setOutlineWidthActive = () => {},
+  setOutlineOpacityActive = () => {},
+  setRenderFill = () => {},
+  setRenderInactiveSegmentations = () => {},
+  setRenderOutline = () => {},
   addSegmentationClassName,
 }) => {
   const [isConfigOpen, setIsConfigOpen] = useState(false);
@@ -216,33 +211,4 @@ SegmentationGroupTable.propTypes = {
   setRenderOutline: PropTypes.func.isRequired,
 };
 
-SegmentationGroupTable.defaultProps = {
-  segmentations: [],
-  disableEditing: false,
-  showAddSegmentation: true,
-  showAddSegment: true,
-  showDeleteSegment: true,
-  onSegmentationAdd: () => {},
-  onSegmentationEdit: () => {},
-  onSegmentationClick: () => {},
-  onSegmentationDelete: () => {},
-  onSegmentationDownload: () => {},
-  onSemgnetationDownloadRTSS: () => {},
-  storeSegmentation: () => {},
-  onSegmentClick: () => {},
-  onSegmentAdd: () => {},
-  onSegmentDelete: () => {},
-  onSegmentEdit: () => {},
-  onToggleSegmentationVisibility: () => {},
-  onToggleSegmentVisibility: () => {},
-  onToggleSegmentLock: () => {},
-  onSegmentColorClick: () => {},
-  setFillAlpha: () => {},
-  setFillAlphaInactive: () => {},
-  setOutlineWidthActive: () => {},
-  setOutlineOpacityActive: () => {},
-  setRenderFill: () => {},
-  setRenderInactiveSegmentations: () => {},
-  setRenderOutline: () => {},
-};
 export default SegmentationGroupTable;
diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTableExpanded.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTableExpanded.tsx
index e2ae334bb76..543285f730c 100644
--- a/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTableExpanded.tsx
+++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationGroupTableExpanded.tsx
@@ -7,39 +7,34 @@ import { useTranslation } from 'react-i18next';
 import SegmentationItem from './SegmentationItem';
 
 const SegmentationGroupTableExpanded = ({
-  segmentations,
-  // segmentation initial config
+  segmentations = [],
   segmentationConfig,
-  // UI show/hide
-  disableEditing,
-  showAddSegmentation,
-  showAddSegment,
-  showDeleteSegment,
-  // segmentation/segment handlers
-  onSegmentationAdd,
-  onSegmentationEdit,
-  onSegmentationClick,
-  onSegmentationDelete,
-  onSegmentationDownload,
-  onSegmentationDownloadRTSS,
-  storeSegmentation,
-  // segment handlers
-  onSegmentClick,
-  onSegmentAdd,
-  onSegmentDelete,
-  onSegmentEdit,
-  onToggleSegmentationVisibility,
-  onToggleSegmentVisibility,
-  onToggleSegmentLock,
-  onSegmentColorClick,
-  // segmentation config handlers
-  setFillAlpha,
-  setFillAlphaInactive,
-  setOutlineWidthActive,
-  setOutlineOpacityActive,
-  setRenderFill,
-  setRenderInactiveSegmentations,
-  setRenderOutline,
+  disableEditing = false,
+  showAddSegmentation = true,
+  showAddSegment = true,
+  showDeleteSegment = true,
+  onSegmentationAdd = () => {},
+  onSegmentationEdit = () => {},
+  onSegmentationClick = () => {},
+  onSegmentationDelete = () => {},
+  onSegmentationDownload = () => {},
+  onSegmentationDownloadRTSS = () => {},
+  storeSegmentation = () => {},
+  onSegmentClick = () => {},
+  onSegmentAdd = () => {},
+  onSegmentDelete = () => {},
+  onSegmentEdit = () => {},
+  onToggleSegmentationVisibility = () => {},
+  onToggleSegmentVisibility = () => {},
+  onToggleSegmentLock = () => {},
+  onSegmentColorClick = () => {},
+  setFillAlpha = () => {},
+  setFillAlphaInactive = () => {},
+  setOutlineWidthActive = () => {},
+  setOutlineOpacityActive = () => {},
+  setRenderFill = () => {},
+  setRenderInactiveSegmentations = () => {},
+  setRenderOutline = () => {},
 }) => {
   const [isConfigOpen, setIsConfigOpen] = useState(false);
   const [activeSegmentationId, setActiveSegmentationId] = useState(null);
@@ -179,33 +174,4 @@ SegmentationGroupTableExpanded.propTypes = {
   setRenderOutline: PropTypes.func.isRequired,
 };
 
-SegmentationGroupTableExpanded.defaultProps = {
-  segmentations: [],
-  disableEditing: false,
-  showAddSegmentation: true,
-  showAddSegment: true,
-  showDeleteSegment: true,
-  onSegmentationAdd: () => {},
-  onSegmentationEdit: () => {},
-  onSegmentationClick: () => {},
-  onSegmentationDelete: () => {},
-  onSegmentationDownload: () => {},
-  onSemgnetationDownloadRTSS: () => {},
-  storeSegmentation: () => {},
-  onSegmentClick: () => {},
-  onSegmentAdd: () => {},
-  onSegmentDelete: () => {},
-  onSegmentEdit: () => {},
-  onToggleSegmentationVisibility: () => {},
-  onToggleSegmentVisibility: () => {},
-  onToggleSegmentLock: () => {},
-  onSegmentColorClick: () => {},
-  setFillAlpha: () => {},
-  setFillAlphaInactive: () => {},
-  setOutlineWidthActive: () => {},
-  setOutlineOpacityActive: () => {},
-  setRenderFill: () => {},
-  setRenderInactiveSegmentations: () => {},
-  setRenderOutline: () => {},
-};
 export default SegmentationGroupTableExpanded;
diff --git a/platform/ui/src/components/SegmentationGroupTable/SegmentationItem.tsx b/platform/ui/src/components/SegmentationGroupTable/SegmentationItem.tsx
index 8741c338f51..866ab64b343 100644
--- a/platform/ui/src/components/SegmentationGroupTable/SegmentationItem.tsx
+++ b/platform/ui/src/components/SegmentationGroupTable/SegmentationItem.tsx
@@ -8,8 +8,8 @@ import SegmentationGroupSegment from './SegmentationGroupSegment';
 import { Tooltip } from '../../components';
 
 function SegmentationItem({
-  segmentation,
-  disableEditing,
+  segmentation = {},
+  disableEditing = false,
   onSegmentationEdit,
   onSegmentationDownload,
   onSegmentationDownloadRTSS,
@@ -203,9 +203,4 @@ SegmentationItem.propTypes = {
   activeSegmentationId: PropTypes.string,
 };
 
-SegmentationItem.defaultProps = {
-  segmentation: null,
-  disableEditing: false,
-};
-
 export default SegmentationItem;
diff --git a/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx b/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx
index a7f3e966d7f..83c91428ffa 100644
--- a/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx
+++ b/platform/ui/src/components/SegmentationTable/SegmentationItem.tsx
@@ -8,8 +8,8 @@ const SegmentationItem = ({
   id,
   index,
   label,
-  displayText,
-  isActive,
+  displayText = [],
+  isActive = false,
   isVisible,
   onClick,
   onEdit,
@@ -138,9 +138,4 @@ SegmentationItem.propTypes = {
   toggleVisibility: PropTypes.func,
 };
 
-SegmentationItem.defaultProps = {
-  isActive: false,
-  displayText: [],
-};
-
 export default SegmentationItem;
diff --git a/platform/ui/src/components/SegmentationTable/SegmentationTable.tsx b/platform/ui/src/components/SegmentationTable/SegmentationTable.tsx
index 1d683baf4ce..97aa985d6c6 100644
--- a/platform/ui/src/components/SegmentationTable/SegmentationTable.tsx
+++ b/platform/ui/src/components/SegmentationTable/SegmentationTable.tsx
@@ -5,14 +5,14 @@ import SegmentationItem from './SegmentationItem';
 import Icon from '../Icon';
 
 const SegmentationTable = ({
-  title,
-  segmentations,
-  activeSegmentationId,
-  onClick,
-  onEdit,
-  onDelete,
-  onToggleVisibility,
-  onToggleVisibilityAll,
+  title = '',
+  segmentations = [],
+  activeSegmentationId = '',
+  onClick = () => {},
+  onEdit = () => {},
+  onDelete = () => {},
+  onToggleVisibility = () => {},
+  onToggleVisibilityAll = () => {},
 }) => {
   const [hiddenSegmentationIds, setHiddenSegmentationIds] = useState([]);
   const amount = segmentations.length;
@@ -112,14 +112,4 @@ SegmentationTable.propTypes = {
   onToggleVisibilityAll: PropTypes.func.isRequired,
 };
 
-SegmentationTable.defaultProps = {
-  title: '',
-  segmentations: [],
-  activeSegmentationId: '',
-  onClick: () => {},
-  onEdit: () => {},
-  onToggleVisibility: () => {},
-  onToggleVisibilityAll: () => {},
-};
-
 export default SegmentationTable;
diff --git a/platform/ui/src/components/Select/Select.tsx b/platform/ui/src/components/Select/Select.tsx
index 256b5f26a59..474edc23e71 100644
--- a/platform/ui/src/components/Select/Select.tsx
+++ b/platform/ui/src/components/Select/Select.tsx
@@ -42,20 +42,20 @@ const Option = props => {
 
 const Select = ({
   id,
-  className,
-  closeMenuOnSelect,
-  hideSelectedOptions,
-  isClearable,
-  isDisabled,
-  isMulti,
-  isSearchable,
+  className = '',
+  closeMenuOnSelect = true,
+  hideSelectedOptions = false,
+  isClearable = true,
+  isDisabled = false,
+  isMulti = false,
+  isSearchable = true,
   onChange,
   options,
   placeholder,
-  noIcons,
-  menuPlacement,
-  components,
-  value,
+  noIcons = false,
+  menuPlacement = 'auto',
+  components = {},
+  value = [],
 }) => {
   const _noIconComponents = {
     DropdownIndicator: () => null,
@@ -96,11 +96,9 @@ const Select = ({
       options={options}
       blurInputOnSelect={true}
       menuPortalTarget={document.body}
-      styles={
-        {
-          menuPortal: base => ({ ...base, zIndex: 9999 }),
-        }
-      }
+      styles={{
+        menuPortal: base => ({ ...base, zIndex: 9999 }),
+      }}
       value={value && Array.isArray(value) ? selectedOptions : value}
       onChange={(selectedOptions, { action }) => {
         const newSelection = !selectedOptions.length
@@ -112,20 +110,6 @@ const Select = ({
   );
 };
 
-Select.defaultProps = {
-  className: '',
-  closeMenuOnSelect: true,
-  hideSelectedOptions: false,
-  isClearable: true,
-  components: {},
-  isDisabled: false,
-  isMulti: false,
-  isSearchable: true,
-  noIcons: false,
-  menuPlacement: 'auto',
-  value: [],
-};
-
 Select.propTypes = {
   className: PropTypes.string,
   closeMenuOnSelect: PropTypes.bool,
diff --git a/platform/ui/src/components/SidePanel/SidePanel.tsx b/platform/ui/src/components/SidePanel/SidePanel.tsx
index bdfef63c4f7..c606cfdd1aa 100644
--- a/platform/ui/src/components/SidePanel/SidePanel.tsx
+++ b/platform/ui/src/components/SidePanel/SidePanel.tsx
@@ -161,7 +161,7 @@ const createBaseStyle = (expandedWidth: number) => {
 const SidePanel = ({
   side,
   className,
-  activeTabIndex: activeTabIndexProp,
+  activeTabIndex: activeTabIndexProp = null,
   tabs,
   onOpen,
   expandedWidth = 248,
@@ -400,11 +400,6 @@ const SidePanel = ({
   );
 };
 
-SidePanel.defaultProps = {
-  defaultComponentOpen: null,
-  activeTabIndex: null, // the default is to close the side panel
-};
-
 SidePanel.propTypes = {
   side: PropTypes.oneOf(['left', 'right']).isRequired,
   className: PropTypes.string,
diff --git a/platform/ui/src/components/SplitButton/SplitButton.tsx b/platform/ui/src/components/SplitButton/SplitButton.tsx
index 6fb7ec5b9c0..fd44f404163 100644
--- a/platform/ui/src/components/SplitButton/SplitButton.tsx
+++ b/platform/ui/src/components/SplitButton/SplitButton.tsx
@@ -91,9 +91,9 @@ const SplitButton = ({
   primary,
   secondary,
   items,
-  renderer,
+  renderer = null,
   onInteraction,
-  Component,
+  Component = Icon,
 }) => {
   const { t } = useTranslation('Buttons');
   const [state, setState] = useState({ isHovering: false, isExpanded: false });
@@ -172,7 +172,6 @@ const SplitButton = ({
 };
 
 SplitButton.propTypes = {
-  isToggle: PropTypes.bool,
   groupId: PropTypes.string.isRequired,
   primary: PropTypes.object.isRequired,
   secondary: PropTypes.object.isRequired,
@@ -184,11 +183,4 @@ SplitButton.propTypes = {
   interactionType: PropTypes.oneOf(['action', 'tool', 'toggle']),
 };
 
-SplitButton.defaultProps = {
-  isToggle: false,
-  renderer: null,
-  isActive: false,
-  Component: null,
-};
-
 export default SplitButton;
diff --git a/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx b/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
index 89175ccbbad..ddf4478ea39 100644
--- a/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
+++ b/platform/ui/src/components/StudyBrowser/StudyBrowser.tsx
@@ -19,15 +19,17 @@ const getTrackedSeries = displaySets => {
   return trackedSeries;
 };
 
+const noop = () => {};
+
 const StudyBrowser = ({
   tabs,
   activeTabName,
   expandedStudyInstanceUIDs,
-  onClickTab,
-  onClickStudy,
-  onClickThumbnail,
-  onDoubleClickThumbnail,
-  onClickUntrack,
+  onClickTab = noop,
+  onClickStudy = noop,
+  onClickThumbnail = noop,
+  onDoubleClickThumbnail = noop,
+  onClickUntrack = noop,
   activeDisplaySetInstanceUIDs,
   servicesManager,
 }: withAppTypes) => {
@@ -168,14 +170,4 @@ StudyBrowser.propTypes = {
   ),
 };
 
-const noop = () => {};
-
-StudyBrowser.defaultProps = {
-  onClickTab: noop,
-  onClickStudy: noop,
-  onClickThumbnail: noop,
-  onDoubleClickThumbnail: noop,
-  onClickUntrack: noop,
-};
-
 export default StudyBrowser;
diff --git a/platform/ui/src/components/Svg/getSvg.tsx b/platform/ui/src/components/Svg/getSvg.tsx
index 22ebc3b842d..8a1975176ed 100644
--- a/platform/ui/src/components/Svg/getSvg.tsx
+++ b/platform/ui/src/components/Svg/getSvg.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 // Svgs
-import logoOhif from './../../assets/svgs/ohif-logo.svg';
+import { ReactComponent as logoOhif } from './../../assets/svgs/ohif-logo.svg';
 
 const SVGS = {
   'logo-ohif': logoOhif,
diff --git a/platform/ui/src/components/Table/Table.tsx b/platform/ui/src/components/Table/Table.tsx
index ab699f708c5..ecb6bc64e30 100644
--- a/platform/ui/src/components/Table/Table.tsx
+++ b/platform/ui/src/components/Table/Table.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const Table = ({ children, className, fullWidth, style }) => {
+const Table = ({ children, className = '', fullWidth = true, style = {} }) => {
   const classes = {
     base: 'text-lg text-white',
     fullWidth: {
@@ -21,12 +21,6 @@ const Table = ({ children, className, fullWidth, style }) => {
   );
 };
 
-Table.defaultProps = {
-  className: '',
-  fullWidth: true,
-  style: {},
-};
-
 Table.propTypes = {
   fullWidth: PropTypes.bool,
   children: PropTypes.node.isRequired,
diff --git a/platform/ui/src/components/TableBody/TableBody.tsx b/platform/ui/src/components/TableBody/TableBody.tsx
index 95f4fdf1345..e22b27abde3 100644
--- a/platform/ui/src/components/TableBody/TableBody.tsx
+++ b/platform/ui/src/components/TableBody/TableBody.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const TableBody = ({ children, className, style }) => {
+const TableBody = ({ children, className = '', style = {} }) => {
   return (
     <div
       className={classnames('ohif-scrollbar mt-2 max-h-48 overflow-y-scroll', className)}
@@ -17,11 +17,6 @@ const TableBody = ({ children, className, style }) => {
   );
 };
 
-TableBody.defaultProps = {
-  className: '',
-  style: {},
-};
-
 TableBody.propTypes = {
   children: function (props, propName, componentName) {
     const elements = React.Children.toArray(props.children);
diff --git a/platform/ui/src/components/TableCell/TableCell.tsx b/platform/ui/src/components/TableCell/TableCell.tsx
index a107eea4661..9a5b5888158 100644
--- a/platform/ui/src/components/TableCell/TableCell.tsx
+++ b/platform/ui/src/components/TableCell/TableCell.tsx
@@ -4,14 +4,14 @@ import classnames from 'classnames';
 
 const TableCell = ({
   children,
-  className,
-  colSpan,
+  className = '',
+  colSpan = 1,
   // ignored because we don't want to expose this prop
   // eslint-disable-next-line react/prop-types
   cellsNum,
-  isTableHead,
-  align,
-  style,
+  isTableHead = false,
+  align = 'left',
+  style = {},
 }) => {
   const classes = {
     align: {
@@ -42,14 +42,6 @@ const TableCell = ({
   );
 };
 
-TableCell.defaultProps = {
-  align: 'left',
-  className: '',
-  colSpan: 1,
-  isTableHead: false,
-  style: {},
-};
-
 TableCell.propTypes = {
   align: PropTypes.oneOf(['left', 'center', 'right', 'justify']),
   children: PropTypes.node.isRequired,
diff --git a/platform/ui/src/components/TableHead/TableHead.tsx b/platform/ui/src/components/TableHead/TableHead.tsx
index b23cbf0a8ce..526c355affe 100644
--- a/platform/ui/src/components/TableHead/TableHead.tsx
+++ b/platform/ui/src/components/TableHead/TableHead.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const TableHead = ({ children, className, style }) => {
+const TableHead = ({ children, className = '', style = {} }) => {
   return (
     <div
       className={classnames(
@@ -20,11 +20,6 @@ const TableHead = ({ children, className, style }) => {
   );
 };
 
-TableHead.defaultProps = {
-  className: '',
-  style: {},
-};
-
 TableHead.propTypes = {
   children: function (props, propName, componentName) {
     const elements = React.Children.toArray(props.children);
diff --git a/platform/ui/src/components/TableRow/TableRow.tsx b/platform/ui/src/components/TableRow/TableRow.tsx
index e786b055060..ea66854a80b 100644
--- a/platform/ui/src/components/TableRow/TableRow.tsx
+++ b/platform/ui/src/components/TableRow/TableRow.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
-const TableRow = ({ children, className, isTableHead, style }) => {
+const TableRow = ({ children, className = '', isTableHead = false, style = {} }) => {
   const childrens = React.Children.map(children, child => {
     const isValidReactElement = React.isValidElement(child);
 
@@ -21,12 +21,6 @@ const TableRow = ({ children, className, isTableHead, style }) => {
   );
 };
 
-TableRow.defaultProps = {
-  isTableHead: false,
-  className: '',
-  style: {},
-};
-
 TableRow.propTypes = {
   isTableHead: PropTypes.bool,
   children: function (props, propName, componentName) {
diff --git a/platform/ui/src/components/Thumbnail/Thumbnail.tsx b/platform/ui/src/components/Thumbnail/Thumbnail.tsx
index c527102d199..3707d1e9911 100644
--- a/platform/ui/src/components/Thumbnail/Thumbnail.tsx
+++ b/platform/ui/src/components/Thumbnail/Thumbnail.tsx
@@ -19,7 +19,7 @@ const Thumbnail = ({
   numInstances,
   countIcon,
   messages,
-  dragData,
+  dragData = {},
   isActive,
   onClick,
   onDoubleClick,
@@ -130,8 +130,4 @@ Thumbnail.propTypes = {
   onDoubleClick: PropTypes.func.isRequired,
 };
 
-Thumbnail.defaultProps = {
-  dragData: {},
-};
-
 export default Thumbnail;
diff --git a/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx b/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
index e68f01cf38b..c741c0c7810 100644
--- a/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
+++ b/platform/ui/src/components/ToolbarButton/ToolbarButton.tsx
@@ -12,7 +12,7 @@ const ToolbarButton = ({
   label,
   commands,
   onInteraction,
-  dropdownContent,
+  dropdownContent = null,
   //
   className,
   disabled,
@@ -65,10 +65,6 @@ const ToolbarButton = ({
   );
 };
 
-ToolbarButton.defaultProps = {
-  dropdownContent: null,
-};
-
 ToolbarButton.propTypes = {
   /* Influences background/hover styling */
   id: PropTypes.string.isRequired,
diff --git a/platform/ui/src/components/Tooltip/PortalTooltip.tsx b/platform/ui/src/components/Tooltip/PortalTooltip.tsx
index cf20549721a..225bf2c360e 100644
--- a/platform/ui/src/components/Tooltip/PortalTooltip.tsx
+++ b/platform/ui/src/components/Tooltip/PortalTooltip.tsx
@@ -39,8 +39,8 @@ export default class PortalTooltip extends React.Component {
     if (!portalNodes[this.props.group]) {
       this.createPortal();
     }
-    let { parent, ...other } = props;
-    let parentEl = typeof parent === 'string' ? document.querySelector(parent) : parent;
+    const { parent, ...other } = props;
+    const parentEl = typeof parent === 'string' ? document.querySelector(parent) : parent;
     ReactDOM.render(
       <Card
         parentEl={parentEl}
@@ -66,8 +66,8 @@ export default class PortalTooltip extends React.Component {
       return;
     }
 
-    let props = { ...nextProps };
-    let newProps = { ...nextProps };
+    const props = { ...nextProps };
+    const newProps = { ...nextProps };
 
     if (portalNodes[this.props.group] && portalNodes[this.props.group].timeout) {
       clearTimeout(portalNodes[this.props.group].timeout);
@@ -86,6 +86,7 @@ export default class PortalTooltip extends React.Component {
 
   componentWillUnmount() {
     if (portalNodes[this.props.group]) {
+      // Todo: move this to root.unmount
       ReactDOM.unmountComponentAtNode(portalNodes[this.props.group].node);
       clearTimeout(portalNodes[this.props.group].timeout);
 
diff --git a/platform/ui/src/components/Tooltip/Tooltip.tsx b/platform/ui/src/components/Tooltip/Tooltip.tsx
index 630814cdcc5..5023cca281d 100644
--- a/platform/ui/src/components/Tooltip/Tooltip.tsx
+++ b/platform/ui/src/components/Tooltip/Tooltip.tsx
@@ -36,15 +36,15 @@ const arrowPositionStyle = {
 const Tooltip = ({
   content,
   secondaryContent = null,
-  isSticky,
-  position,
+  isSticky = false,
+  position = 'bottom',
   className,
-  tight,
+  tight = false,
   children,
-  isDisabled,
+  isDisabled = false,
   tooltipBoxClassName,
   // time to show/hide the tooltip on mouse over and  mouse out events (default: 300ms)
-  showHideDelay,
+  showHideDelay = 300,
   onHide,
 }) => {
   const [isActive, setIsActive] = useState(false);
@@ -189,14 +189,6 @@ const Tooltip = ({
   );
 };
 
-Tooltip.defaultProps = {
-  tight: false,
-  isSticky: false,
-  position: 'bottom',
-  isDisabled: false,
-  showHideDelay: 300,
-};
-
 Tooltip.propTypes = {
   isDisabled: PropTypes.bool,
   content: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
diff --git a/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx b/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx
index c48755363ed..aea55941aed 100644
--- a/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx
+++ b/platform/ui/src/components/TooltipClipboard/TooltipClipboard.tsx
@@ -9,7 +9,7 @@ const DELAY_TO_SHOW = 1000;
 const DELAY_TO_HIDE = 10; // it needs at least a little delay to prevent tooltip to suddenly hide
 const DELAY_TO_HIDE_AFTER_COPYING = 1000;
 
-const TooltipClipboard = ({ children, text }) => {
+const TooltipClipboard = ({ children, text = '' }) => {
   const { t } = useTranslation('TooltipClipboard');
 
   const [isActive, setIsActive] = useState(false);
@@ -158,10 +158,6 @@ const TooltipClipboard = ({ children, text }) => {
   );
 };
 
-TooltipClipboard.defaultProps = {
-  text: '',
-};
-
 TooltipClipboard.propTypes = {
   text: PropTypes.string,
   children: PropTypes.node.isRequired,
diff --git a/platform/ui/src/components/UserPreferences/UserPreferences.tsx b/platform/ui/src/components/UserPreferences/UserPreferences.tsx
index 923838f4feb..5e61210c8e6 100644
--- a/platform/ui/src/components/UserPreferences/UserPreferences.tsx
+++ b/platform/ui/src/components/UserPreferences/UserPreferences.tsx
@@ -12,12 +12,12 @@ const UserPreferences = ({
   availableLanguages,
   defaultLanguage,
   currentLanguage,
-  disabled,
+  disabled = false,
   hotkeyDefinitions,
   hotkeyDefaults,
-  onCancel,
-  onSubmit,
-  onReset,
+  onCancel = () => {},
+  onSubmit = () => {},
+  onReset = () => {},
   hotkeysModule,
 }) => {
   const { t } = useTranslation('UserPreferencesModal');
@@ -140,12 +140,6 @@ UserPreferences.propTypes = {
   disabled: PropTypes.bool,
   hotkeyDefaults: PropTypes.object.isRequired,
   hotkeyDefinitions: PropTypes.object.isRequired,
-  languageOptions: PropTypes.arrayOf(
-    PropTypes.shape({
-      label: PropTypes.string.isRequired,
-      value: PropTypes.any.isRequired,
-    })
-  ),
   onCancel: PropTypes.func,
   onSubmit: PropTypes.func,
   onReset: PropTypes.func,
@@ -158,15 +152,4 @@ UserPreferences.propTypes = {
   }).isRequired,
 };
 
-UserPreferences.defaultProps = {
-  languageOptions: [
-    { value: 'ONE', label: 'ONE' },
-    { value: 'TWO', label: 'TWO' },
-  ],
-  onCancel: noop,
-  onSubmit: noop,
-  onReset: noop,
-  disabled: false,
-};
-
 export default UserPreferences;
diff --git a/platform/ui/src/components/ViewportPane/ViewportPane.tsx b/platform/ui/src/components/ViewportPane/ViewportPane.tsx
index ada09c871d4..33fd2174b4c 100644
--- a/platform/ui/src/components/ViewportPane/ViewportPane.tsx
+++ b/platform/ui/src/components/ViewportPane/ViewportPane.tsx
@@ -13,7 +13,7 @@ function ViewportPane({
   isActive,
   onDrop,
   onDoubleClick,
-  onInteraction,
+  onInteraction = () => {},
   acceptDropsFor,
 }) {
   let dropElement = null;
@@ -108,10 +108,4 @@ ViewportPane.propTypes = {
   onDoubleClick: PropTypes.func,
 };
 
-const noop = () => {};
-
-ViewportPane.defaultProps = {
-  onInteraction: noop,
-};
-
 export default ViewportPane;
diff --git a/platform/ui/src/components/WindowLevel/WindowLevel.tsx b/platform/ui/src/components/WindowLevel/WindowLevel.tsx
index 7fd1c390f80..53a7258e573 100644
--- a/platform/ui/src/components/WindowLevel/WindowLevel.tsx
+++ b/platform/ui/src/components/WindowLevel/WindowLevel.tsx
@@ -12,7 +12,6 @@ import {
   histogramPropType,
   colormapPropType,
 } from './types';
-import PanelSection from '../PanelSection';
 
 const convertVOItoVOIRange = voi => {
   return {
@@ -22,21 +21,19 @@ const convertVOItoVOIRange = voi => {
 };
 
 const WindowLevel = ({
-  title,
-  step,
+  step = 1,
   histogram,
   voi: voiProp,
-  opacity: opacityProp,
-  showOpacitySlider,
+  opacity: opacityProp = 1,
+  showOpacitySlider = false,
   colormap,
-  style,
-  fillColor,
-  lineColor,
+  style = 'polygon',
+  fillColor = '#3f3f3f',
+  lineColor = '#707070',
   containerClassName,
   onVOIChange,
   onOpacityChange,
 }: {
-  title: string;
   step: number;
   histogram: Histogram;
   voi: VOI;
@@ -105,7 +102,6 @@ const WindowLevel = ({
   return (
     <div className={classnames('maxValue-w-sm p-0.5 text-[0px] text-white', containerClassName)}>
       <div className="px-2 pt-0 pb-[0.5]">
-        {/* <legend className="pb-1 text-base text-white"> {title}</legend> */}
         <div className="flex h-4 text-xs">
           <div className="relative h-fit grow">
             <span className="absolute left-0 bottom-px leading-3">{range.min}</span>
@@ -161,17 +157,7 @@ const WindowLevel = ({
   );
 };
 
-WindowLevel.defaultProps = {
-  step: 1,
-  opacity: 1,
-  showOpacitySlider: false,
-  style: 'polygon',
-  fillColor: '#3f3f3f',
-  lineColor: '#707070',
-};
-
 WindowLevel.propTypes = {
-  title: PropTypes.string,
   step: PropTypes.number,
   histogram: histogramPropType.isRequired,
   voi: voiPropType,
diff --git a/platform/ui/src/components/WindowLevel/WindowLevelHistogram.tsx b/platform/ui/src/components/WindowLevel/WindowLevelHistogram.tsx
index 987263a96dc..9e116d3583d 100644
--- a/platform/ui/src/components/WindowLevel/WindowLevelHistogram.tsx
+++ b/platform/ui/src/components/WindowLevel/WindowLevelHistogram.tsx
@@ -154,10 +154,10 @@ const WindowLevelHistogram = ({
   range,
   voiRange,
   histogram,
-  colormap,
-  style,
-  fillColor,
-  lineColor,
+  colormap = DEFAULT_COLORMAP,
+  style = 'polygon',
+  fillColor = '#3f3f3f',
+  lineColor = '#707070',
 }: {
   range: Range;
   voiRange: VOIRange;
@@ -216,13 +216,6 @@ const WindowLevelHistogram = ({
   );
 };
 
-WindowLevelHistogram.defaultProps = {
-  colormap: DEFAULT_COLORMAP,
-  style: 'polygon',
-  fillColor: '#3f3f3f',
-  lineColor: '#707070',
-};
-
 WindowLevelHistogram.propTypes = {
   range: rangePropType.isRequired,
   voiRange: voiRangePropType.isRequired,
diff --git a/platform/ui/src/contextProviders/DialogProvider.tsx b/platform/ui/src/contextProviders/DialogProvider.tsx
index b1cef23fe73..9e0667ae703 100644
--- a/platform/ui/src/contextProviders/DialogProvider.tsx
+++ b/platform/ui/src/contextProviders/DialogProvider.tsx
@@ -17,7 +17,7 @@ const DialogContext = createContext(null);
 
 export const useDialog = () => useContext(DialogContext);
 
-const DialogProvider = ({ children, service }) => {
+const DialogProvider = ({ children, service = null }) => {
   const [isDragging, setIsDragging] = useState(false);
   const [dialogs, setDialogs] = useState([]);
   const [lastDialogId, setLastDialogId] = useState(null);
@@ -300,10 +300,6 @@ export const withDialog = Component => {
   };
 };
 
-DialogProvider.defaultProps = {
-  service: null,
-};
-
 DialogProvider.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.func])
     .isRequired,
diff --git a/platform/ui/src/contextProviders/ModalComponent.tsx b/platform/ui/src/contextProviders/ModalComponent.tsx
index ad7e56d330a..3de9dce3e23 100644
--- a/platform/ui/src/contextProviders/ModalComponent.tsx
+++ b/platform/ui/src/contextProviders/ModalComponent.tsx
@@ -2,27 +2,17 @@ import PropTypes from 'prop-types';
 import React from 'react';
 
 export const ModalComponent = ({
-  content,
-  contentProps,
-  shouldCloseOnEsc,
-  isOpen,
-  closeButton,
-  title,
-  customClassName,
+  content = null,
+  contentProps = null,
+  shouldCloseOnEsc = true,
+  isOpen = true,
+  closeButton = true,
+  title = null,
+  customClassName = '',
 }) => {
   return <></>;
 };
 
-ModalComponent.defaultProps = {
-  content: null,
-  contentProps: null,
-  shouldCloseOnEsc: true,
-  isOpen: true,
-  closeButton: true,
-  title: null,
-  customClassName: '',
-};
-
 ModalComponent.propTypes = {
   content: PropTypes.node,
   contentProps: PropTypes.object,
diff --git a/platform/ui/src/contextProviders/ModalProvider.tsx b/platform/ui/src/contextProviders/ModalProvider.tsx
index edda2eccc92..19f31982d6c 100644
--- a/platform/ui/src/contextProviders/ModalProvider.tsx
+++ b/platform/ui/src/contextProviders/ModalProvider.tsx
@@ -21,7 +21,7 @@ export const useModal = () => useContext(ModalContext);
  * @property {string} [customClassName=null] The custom class to style the modal.
  */
 
-const ModalProvider = ({ children, modal: Modal, service }) => {
+const ModalProvider = ({ children, modal: Modal, service = null }) => {
   const DEFAULT_OPTIONS = {
     content: null,
     contentProps: null,
@@ -125,10 +125,6 @@ export const withModal = Component => {
   };
 };
 
-ModalProvider.defaultProps = {
-  service: null,
-};
-
 ModalProvider.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
   modal: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.func])
diff --git a/platform/ui/src/contextProviders/SnackbarProvider.tsx b/platform/ui/src/contextProviders/SnackbarProvider.tsx
index edc6b43a0ea..05ef35042b4 100644
--- a/platform/ui/src/contextProviders/SnackbarProvider.tsx
+++ b/platform/ui/src/contextProviders/SnackbarProvider.tsx
@@ -8,7 +8,7 @@ const SnackbarContext = createContext(null);
 
 export const useSnackbar = () => useContext(SnackbarContext);
 
-const SnackbarProvider = ({ children, service }) => {
+const SnackbarProvider = ({ children, service = null }) => {
   const DEFAULT_OPTIONS = {
     title: '',
     message: '',
@@ -104,10 +104,6 @@ const SnackbarProvider = ({ children, service }) => {
   );
 };
 
-SnackbarProvider.defaultProps = {
-  service: null,
-};
-
 SnackbarProvider.propTypes = {
   children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node, PropTypes.func])
     .isRequired,
diff --git a/platform/ui/tailwind.config.js b/platform/ui/tailwind.config.js
index fed8ac10a95..29e859d8f0e 100644
--- a/platform/ui/tailwind.config.js
+++ b/platform/ui/tailwind.config.js
@@ -34,7 +34,6 @@ module.exports = {
         dark: '#090c29',
         active: '#348cfd',
       },
-
       inputfield: {
         main: '#3a3f99',
         disabled: '#2b166b',
@@ -49,6 +48,10 @@ module.exports = {
         active: '#1f1f27',
       },
 
+      indigo: {
+        dark: '#0b1a42',
+      },
+
       common: {
         bright: '#e1e1e1',
         light: '#a19fad',
diff --git a/tsconfig.json b/tsconfig.json
index 762d8600070..3c2bf2cbf9c 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,10 +15,17 @@
     "paths": {
       "@ohif/core": ["platform/core/src"],
       "@ohif/ui": ["platform/ui/src"],
+      "@ohif/ui-next": ["platform/ui-next/src"],
       "@ohif/i18n": ["platform/i18n/src"],
       "@ohif/app": ["platform/app/src"]
     }
   },
-  "include": ["platform/**/src/**/*", "platform/**/public/**/*", "extensions/**/src/**/*", "modes/**/src/**/*"],
+  "include": [
+    "platform/**/src/**/*",
+    "platform/**/public/**/*",
+    "extensions/**/src/**/*",
+    "modes/**/src/**/*",
+    "custom.d.ts"
+  ],
   "exclude": ["node_modules", "dist"]
 }
diff --git a/yarn.lock b/yarn.lock
index dad9f22c813..99217aa2223 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -204,11 +204,24 @@
     "@babel/highlight" "^7.24.2"
     picocolors "^1.0.0"
 
+"@babel/code-frame@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/code-frame/-/code-frame-7.24.6.tgz#ab88da19344445c3d8889af2216606d3329f3ef2"
+  integrity sha512-ZJhac6FkEd1yhG2AHOmfcXG4ceoLltoCVJjN5XsWN9BifBQr+cHJbWi0h68HZuSORq+3WtJ2z0hwF2NG1b5kcA==
+  dependencies:
+    "@babel/highlight" "^7.24.6"
+    picocolors "^1.0.0"
+
 "@babel/compat-data@^7.20.5", "@babel/compat-data@^7.22.6", "@babel/compat-data@^7.23.2", "@babel/compat-data@^7.23.5", "@babel/compat-data@^7.24.4":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.4.tgz#6f102372e9094f25d908ca0d34fc74c74606059a"
   integrity sha512-vg8Gih2MLK+kOkHJp4gBEIkyaIi00jgWot2D9QOmmfLC8jINSOzmCLta6Bvz/JSBCqnegV0L80jhxkol5GWNfQ==
 
+"@babel/compat-data@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/compat-data/-/compat-data-7.24.6.tgz#b3600217688cabb26e25f8e467019e66d71b7ae2"
+  integrity sha512-aC2DGhBq5eEdyXWqrDInSqQjO0k8xtPRf5YylULqx8MCd6jBtzqfta/3ETMRpuKIc5hyswfO80ObyA1MvkCcUQ==
+
 "@babel/core@7.12.9":
   version "7.12.9"
   resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.12.9.tgz#fd450c4ec10cdbb980e2928b7aa7a28484593fc8"
@@ -252,6 +265,27 @@
     json5 "^2.2.3"
     semver "^6.3.1"
 
+"@babel/core@^7.21.3":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/core/-/core-7.24.6.tgz#8650e0e4b03589ebe886c4e4a60398db0a7ec787"
+  integrity sha512-qAHSfAdVyFmIvl0VHELib8xar7ONuSHrE2hLnsaWkYNTI68dmi1x8GYDhJjMI/e7XWal9QBlZkwbOnkcw7Z8gQ==
+  dependencies:
+    "@ampproject/remapping" "^2.2.0"
+    "@babel/code-frame" "^7.24.6"
+    "@babel/generator" "^7.24.6"
+    "@babel/helper-compilation-targets" "^7.24.6"
+    "@babel/helper-module-transforms" "^7.24.6"
+    "@babel/helpers" "^7.24.6"
+    "@babel/parser" "^7.24.6"
+    "@babel/template" "^7.24.6"
+    "@babel/traverse" "^7.24.6"
+    "@babel/types" "^7.24.6"
+    convert-source-map "^2.0.0"
+    debug "^4.1.0"
+    gensync "^1.0.0-beta.2"
+    json5 "^2.2.3"
+    semver "^6.3.1"
+
 "@babel/generator@^7.12.5", "@babel/generator@^7.18.7", "@babel/generator@^7.23.0", "@babel/generator@^7.24.1", "@babel/generator@^7.24.4", "@babel/generator@^7.7.2":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.4.tgz#1fc55532b88adf952025d5d2d1e71f946cb1c498"
@@ -262,6 +296,16 @@
     "@jridgewell/trace-mapping" "^0.3.25"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/generator/-/generator-7.24.6.tgz#dfac82a228582a9d30c959fe50ad28951d4737a7"
+  integrity sha512-S7m4eNa6YAPJRHmKsLHIDJhNAGNKoWNiWefz1MBbpnt8g9lvMDl1hir4P9bo/57bQEmuwEhnRU/AMWsD0G/Fbg==
+  dependencies:
+    "@babel/types" "^7.24.6"
+    "@jridgewell/gen-mapping" "^0.3.5"
+    "@jridgewell/trace-mapping" "^0.3.25"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.18.6", "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
@@ -269,6 +313,13 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-annotate-as-pure@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.24.6.tgz#517af93abc77924f9b2514c407bbef527fb8938d"
+  integrity sha512-DitEzDfOMnd13kZnDqns1ccmftwJTS9DMkyn9pYTxulS7bZxUxpMly3Nf23QQ6NwA4UB8lAqjbqWtyvElEMAkg==
+  dependencies:
+    "@babel/types" "^7.24.6"
+
 "@babel/helper-builder-binary-assignment-operator-visitor@^7.22.15":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.22.15.tgz#5426b109cf3ad47b91120f8328d8ab1be8b0b956"
@@ -276,6 +327,13 @@
   dependencies:
     "@babel/types" "^7.22.15"
 
+"@babel/helper-builder-binary-assignment-operator-visitor@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-builder-binary-assignment-operator-visitor/-/helper-builder-binary-assignment-operator-visitor-7.24.6.tgz#19e9089ee87b0d0928012c83961a8deef4b0223f"
+  integrity sha512-+wnfqc5uHiMYtvRX7qu80Toef8BXeh4HHR1SPeonGb1SKPniNEd4a/nlaJJMv/OIEYvIVavvo0yR7u10Gqz0Iw==
+  dependencies:
+    "@babel/types" "^7.24.6"
+
 "@babel/helper-compilation-targets@^7.20.7", "@babel/helper-compilation-targets@^7.22.15", "@babel/helper-compilation-targets@^7.22.6", "@babel/helper-compilation-targets@^7.23.6":
   version "7.23.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.23.6.tgz#4d79069b16cbcf1461289eccfbbd81501ae39991"
@@ -287,6 +345,17 @@
     lru-cache "^5.1.1"
     semver "^6.3.1"
 
+"@babel/helper-compilation-targets@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-compilation-targets/-/helper-compilation-targets-7.24.6.tgz#4a51d681f7680043d38e212715e2a7b1ad29cb51"
+  integrity sha512-VZQ57UsDGlX/5fFA7GkVPplZhHsVc+vuErWgdOiysI9Ksnw0Pbbd6pnPiR/mmJyKHgyIW0c7KT32gmhiF+cirg==
+  dependencies:
+    "@babel/compat-data" "^7.24.6"
+    "@babel/helper-validator-option" "^7.24.6"
+    browserslist "^4.22.2"
+    lru-cache "^5.1.1"
+    semver "^6.3.1"
+
 "@babel/helper-create-class-features-plugin@^7.18.6", "@babel/helper-create-class-features-plugin@^7.21.0", "@babel/helper-create-class-features-plugin@^7.24.1", "@babel/helper-create-class-features-plugin@^7.24.4":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.4.tgz#c806f73788a6800a5cfbbc04d2df7ee4d927cce3"
@@ -302,6 +371,21 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     semver "^6.3.1"
 
+"@babel/helper-create-class-features-plugin@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-class-features-plugin/-/helper-create-class-features-plugin-7.24.6.tgz#c50b86fa1c4ca9b7a890dc21884f097b6c4b5286"
+  integrity sha512-djsosdPJVZE6Vsw3kk7IPRWethP94WHGOhQTc67SNXE0ZzMhHgALw8iGmYS0TD1bbMM0VDROy43od7/hN6WYcA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.6"
+    "@babel/helper-environment-visitor" "^7.24.6"
+    "@babel/helper-function-name" "^7.24.6"
+    "@babel/helper-member-expression-to-functions" "^7.24.6"
+    "@babel/helper-optimise-call-expression" "^7.24.6"
+    "@babel/helper-replace-supers" "^7.24.6"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.6"
+    "@babel/helper-split-export-declaration" "^7.24.6"
+    semver "^6.3.1"
+
 "@babel/helper-create-regexp-features-plugin@^7.18.6", "@babel/helper-create-regexp-features-plugin@^7.22.15", "@babel/helper-create-regexp-features-plugin@^7.22.5":
   version "7.22.15"
   resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.22.15.tgz#5ee90093914ea09639b01c711db0d6775e558be1"
@@ -311,6 +395,15 @@
     regexpu-core "^5.3.1"
     semver "^6.3.1"
 
+"@babel/helper-create-regexp-features-plugin@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-create-regexp-features-plugin/-/helper-create-regexp-features-plugin-7.24.6.tgz#47d382dec0d49e74ca1b6f7f3b81f5968022a3c8"
+  integrity sha512-C875lFBIWWwyv6MHZUG9HmRrlTDgOsLWZfYR0nW69gaKJNe0/Mpxx5r0EID2ZdHQkdUmQo2t0uNckTL08/1BgA==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.6"
+    regexpu-core "^5.3.1"
+    semver "^6.3.1"
+
 "@babel/helper-define-polyfill-provider@^0.4.4":
   version "0.4.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-define-polyfill-provider/-/helper-define-polyfill-provider-0.4.4.tgz#64df615451cb30e94b59a9696022cffac9a10088"
@@ -349,6 +442,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
   integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
 
+"@babel/helper-environment-visitor@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-environment-visitor/-/helper-environment-visitor-7.24.6.tgz#ac7ad5517821641550f6698dd5468f8cef78620d"
+  integrity sha512-Y50Cg3k0LKLMjxdPjIl40SdJgMB85iXn27Vk/qbHZCFx/o5XO3PSnpi675h1KEmmDb6OFArfd5SCQEQ5Q4H88g==
+
 "@babel/helper-function-name@^7.22.5", "@babel/helper-function-name@^7.23.0":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
@@ -357,6 +455,14 @@
     "@babel/template" "^7.22.15"
     "@babel/types" "^7.23.0"
 
+"@babel/helper-function-name@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-function-name/-/helper-function-name-7.24.6.tgz#cebdd063386fdb95d511d84b117e51fc68fec0c8"
+  integrity sha512-xpeLqeeRkbxhnYimfr2PC+iA0Q7ljX/d1eZ9/inYbmfG2jpl8Lu3DyXvpOAnrS5kxkfOWJjioIMQsaMBXFI05w==
+  dependencies:
+    "@babel/template" "^7.24.6"
+    "@babel/types" "^7.24.6"
+
 "@babel/helper-hoist-variables@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
@@ -364,6 +470,13 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-hoist-variables@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-hoist-variables/-/helper-hoist-variables-7.24.6.tgz#8a7ece8c26756826b6ffcdd0e3cf65de275af7f9"
+  integrity sha512-SF/EMrC3OD7dSta1bLJIlrsVxwtd0UpjRJqLno6125epQMJ/kyFmpTT4pbvPbdQHzCHg+biQ7Syo8lnDtbR+uA==
+  dependencies:
+    "@babel/types" "^7.24.6"
+
 "@babel/helper-member-expression-to-functions@^7.23.0":
   version "7.23.0"
   resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.23.0.tgz#9263e88cc5e41d39ec18c9a3e0eced59a3e7d366"
@@ -371,6 +484,13 @@
   dependencies:
     "@babel/types" "^7.23.0"
 
+"@babel/helper-member-expression-to-functions@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.24.6.tgz#86084f3e0e4e2169a134754df3870bc7784db71e"
+  integrity sha512-OTsCufZTxDUsv2/eDXanw/mUZHWOxSbEmC3pP8cgjcy5rgeVPWWMStnv274DV60JtHxTk0adT0QrCzC4M9NWGg==
+  dependencies:
+    "@babel/types" "^7.24.6"
+
 "@babel/helper-module-imports@^7.10.4", "@babel/helper-module-imports@^7.16.7", "@babel/helper-module-imports@^7.22.15", "@babel/helper-module-imports@^7.24.1", "@babel/helper-module-imports@^7.24.3":
   version "7.24.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.3.tgz#6ac476e6d168c7c23ff3ba3cf4f7841d46ac8128"
@@ -378,6 +498,13 @@
   dependencies:
     "@babel/types" "^7.24.0"
 
+"@babel/helper-module-imports@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.24.6.tgz#65e54ffceed6a268dc4ce11f0433b82cfff57852"
+  integrity sha512-a26dmxFJBF62rRO9mmpgrfTLsAuyHk4e1hKTUkD/fcMfynt8gvEKwQPQDVxWhca8dHoDck+55DFt42zV0QMw5g==
+  dependencies:
+    "@babel/types" "^7.24.6"
+
 "@babel/helper-module-transforms@^7.12.1", "@babel/helper-module-transforms@^7.23.3":
   version "7.23.3"
   resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.23.3.tgz#d7d12c3c5d30af5b3c0fcab2a6d5217773e2d0f1"
@@ -389,6 +516,17 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     "@babel/helper-validator-identifier" "^7.22.20"
 
+"@babel/helper-module-transforms@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-transforms/-/helper-module-transforms-7.24.6.tgz#22346ed9df44ce84dee850d7433c5b73fab1fe4e"
+  integrity sha512-Y/YMPm83mV2HJTbX1Qh2sjgjqcacvOlhbzdCCsSlblOKjSYmQqEbO6rUniWQyRo9ncyfjT8hnUjlG06RXDEmcA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.24.6"
+    "@babel/helper-module-imports" "^7.24.6"
+    "@babel/helper-simple-access" "^7.24.6"
+    "@babel/helper-split-export-declaration" "^7.24.6"
+    "@babel/helper-validator-identifier" "^7.24.6"
+
 "@babel/helper-optimise-call-expression@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.22.5.tgz#f21531a9ccbff644fdd156b4077c16ff0c3f609e"
@@ -396,6 +534,13 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-optimise-call-expression@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.24.6.tgz#f7836e3ccca3dfa02f15d2bc8b794efe75a5256e"
+  integrity sha512-3SFDJRbx7KuPRl8XDUr8O7GAEB8iGyWPjLKJh/ywP/Iy9WOmEfMrsWbaZpvBu2HSYn4KQygIsz0O7m8y10ncMA==
+  dependencies:
+    "@babel/types" "^7.24.6"
+
 "@babel/helper-plugin-utils@7.10.4":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.10.4.tgz#2f75a831269d4f677de49986dff59927533cf375"
@@ -406,6 +551,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.0.tgz#945681931a52f15ce879fd5b86ce2dae6d3d7f2a"
   integrity sha512-9cUznXMG0+FxRuJfvL82QlTqIzhVW9sL0KjMPHhAOOvpQGL8QtdxnBKILjBqxlHyliz0yCa1G903ZXI/FuHy2w==
 
+"@babel/helper-plugin-utils@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.24.6.tgz#fa02a32410a15a6e8f8185bcbf608f10528d2a24"
+  integrity sha512-MZG/JcWfxybKwsA9N9PmtF2lOSFSEMVCpIRrbxccZFLJPrJciJdG/UhSh5W96GEteJI2ARqm5UAHxISwRDLSNg==
+
 "@babel/helper-remap-async-to-generator@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.22.20.tgz#7b68e1cb4fa964d2996fd063723fb48eca8498e0"
@@ -415,6 +565,15 @@
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-wrap-function" "^7.22.20"
 
+"@babel/helper-remap-async-to-generator@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.24.6.tgz#c96ceb9846e877d806ce82a1521230ea7e0fc354"
+  integrity sha512-1Qursq9ArRZPAMOZf/nuzVW8HgJLkTB9y9LfP4lW2MVp4e9WkLJDovfKBxoDcCk6VuzIxyqWHyBoaCtSRP10yg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.6"
+    "@babel/helper-environment-visitor" "^7.24.6"
+    "@babel/helper-wrap-function" "^7.24.6"
+
 "@babel/helper-replace-supers@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.24.1.tgz#7085bd19d4a0b7ed8f405c1ed73ccb70f323abc1"
@@ -424,6 +583,15 @@
     "@babel/helper-member-expression-to-functions" "^7.23.0"
     "@babel/helper-optimise-call-expression" "^7.22.5"
 
+"@babel/helper-replace-supers@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-replace-supers/-/helper-replace-supers-7.24.6.tgz#3ea87405a2986a49ab052d10e540fe036d747c71"
+  integrity sha512-mRhfPwDqDpba8o1F8ESxsEkJMQkUF8ZIWrAc0FtWhxnjfextxMWxr22RtFizxxSYLjVHDeMgVsRq8BBZR2ikJQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.24.6"
+    "@babel/helper-member-expression-to-functions" "^7.24.6"
+    "@babel/helper-optimise-call-expression" "^7.24.6"
+
 "@babel/helper-simple-access@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.22.5.tgz#4938357dc7d782b80ed6dbb03a0fba3d22b1d5de"
@@ -431,6 +599,13 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-simple-access@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-simple-access/-/helper-simple-access-7.24.6.tgz#1d6e04d468bba4fc963b4906f6dac6286cfedff1"
+  integrity sha512-nZzcMMD4ZhmB35MOOzQuiGO5RzL6tJbsT37Zx8M5L/i9KSrukGXWTjLe1knIbb/RmxoJE9GON9soq0c0VEMM5g==
+  dependencies:
+    "@babel/types" "^7.24.6"
+
 "@babel/helper-skip-transparent-expression-wrappers@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.22.5.tgz#007f15240b5751c537c40e77abb4e89eeaaa8847"
@@ -438,6 +613,13 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-skip-transparent-expression-wrappers@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-skip-transparent-expression-wrappers/-/helper-skip-transparent-expression-wrappers-7.24.6.tgz#c47e9b33b7ea50d1073e125ebc26661717cb7040"
+  integrity sha512-jhbbkK3IUKc4T43WadP96a27oYti9gEf1LdyGSP2rHGH77kwLwfhO7TgwnWvxxQVmke0ImmCSS47vcuxEMGD3Q==
+  dependencies:
+    "@babel/types" "^7.24.6"
+
 "@babel/helper-split-export-declaration@^7.22.6":
   version "7.22.6"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.22.6.tgz#322c61b7310c0997fe4c323955667f18fcefb91c"
@@ -445,21 +627,43 @@
   dependencies:
     "@babel/types" "^7.22.5"
 
+"@babel/helper-split-export-declaration@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.24.6.tgz#e830068f7ba8861c53b7421c284da30ae656d7a3"
+  integrity sha512-CvLSkwXGWnYlF9+J3iZUvwgAxKiYzK3BWuo+mLzD/MDGOZDj7Gq8+hqaOkMxmJwmlv0iu86uH5fdADd9Hxkymw==
+  dependencies:
+    "@babel/types" "^7.24.6"
+
 "@babel/helper-string-parser@^7.23.4":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.1.tgz#f99c36d3593db9540705d0739a1f10b5e20c696e"
   integrity sha512-2ofRCjnnA9y+wk8b9IAREroeUP02KHp431N2mhKniy2yKIDKpbrHv9eXwm8cBeWQYcJmzv5qKCu65P47eCF7CQ==
 
+"@babel/helper-string-parser@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-string-parser/-/helper-string-parser-7.24.6.tgz#28583c28b15f2a3339cfafafeaad42f9a0e828df"
+  integrity sha512-WdJjwMEkmBicq5T9fm/cHND3+UlFa2Yj8ALLgmoSQAJZysYbBjw+azChSGPN4DSPLXOcooGRvDwZWMcF/mLO2Q==
+
 "@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-identifier@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.24.6.tgz#08bb6612b11bdec78f3feed3db196da682454a5e"
+  integrity sha512-4yA7s865JHaqUdRbnaxarZREuPTHrjpDT+pXoAZ1yhyo6uFnIEpS8VMu16siFOHDpZNKYv5BObhsB//ycbICyw==
+
 "@babel/helper-validator-option@^7.22.15", "@babel/helper-validator-option@^7.23.5":
   version "7.23.5"
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.23.5.tgz#907a3fbd4523426285365d1206c423c4c5520307"
   integrity sha512-85ttAOMLsr53VgXkTbkx8oA6YTfT4q7/HzXSLEYmjcSTJPMPQtvq1BD79Byep5xMUYbGRzEpDsjUf3dyp54IKw==
 
+"@babel/helper-validator-option@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-option/-/helper-validator-option-7.24.6.tgz#59d8e81c40b7d9109ab7e74457393442177f460a"
+  integrity sha512-Jktc8KkF3zIkePb48QO+IapbXlSapOW9S+ogZZkcO6bABgYAxtZcjZ/O005111YLf+j4M84uEgwYoidDkXbCkQ==
+
 "@babel/helper-wrap-function@^7.22.20":
   version "7.22.20"
   resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.22.20.tgz#15352b0b9bfb10fc9c76f79f6342c00e3411a569"
@@ -469,6 +673,15 @@
     "@babel/template" "^7.22.15"
     "@babel/types" "^7.22.19"
 
+"@babel/helper-wrap-function@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helper-wrap-function/-/helper-wrap-function-7.24.6.tgz#c27af1006e310683fdc76b668a0a1f6003e36217"
+  integrity sha512-f1JLrlw/jbiNfxvdrfBgio/gRBk3yTAEJWirpAkiJG2Hb22E7cEYKHWo0dFPTv/niPovzIdPdEDetrv6tC6gPQ==
+  dependencies:
+    "@babel/helper-function-name" "^7.24.6"
+    "@babel/template" "^7.24.6"
+    "@babel/types" "^7.24.6"
+
 "@babel/helpers@^7.12.5", "@babel/helpers@^7.24.4":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.4.tgz#dc00907fd0d95da74563c142ef4cd21f2cb856b6"
@@ -478,6 +691,14 @@
     "@babel/traverse" "^7.24.1"
     "@babel/types" "^7.24.0"
 
+"@babel/helpers@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/helpers/-/helpers-7.24.6.tgz#cd124245299e494bd4e00edda0e4ea3545c2c176"
+  integrity sha512-V2PI+NqnyFu1i0GyTd/O/cTpxzQCYioSkUIRmgo7gFEHKKCg5w46+r/A6WeUR1+P3TeQ49dspGPNd/E3n9AnnA==
+  dependencies:
+    "@babel/template" "^7.24.6"
+    "@babel/types" "^7.24.6"
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.24.2":
   version "7.24.2"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.2.tgz#3f539503efc83d3c59080a10e6634306e0370d26"
@@ -488,11 +709,26 @@
     js-tokens "^4.0.0"
     picocolors "^1.0.0"
 
+"@babel/highlight@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.24.6.tgz#6d610c1ebd2c6e061cade0153bf69b0590b7b3df"
+  integrity sha512-2YnuOp4HAk2BsBrJJvYCbItHx0zWscI1C3zgWkz+wDyD9I7GIVrfnLyrR4Y1VR+7p+chAEcrgRQYZAGIKMV7vQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.24.6"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+    picocolors "^1.0.0"
+
 "@babel/parser@^7.0.0", "@babel/parser@^7.1.0", "@babel/parser@^7.12.7", "@babel/parser@^7.14.7", "@babel/parser@^7.18.8", "@babel/parser@^7.20.7", "@babel/parser@^7.23.0", "@babel/parser@^7.23.9", "@babel/parser@^7.24.0", "@babel/parser@^7.24.1", "@babel/parser@^7.24.4", "@babel/parser@^7.7.0":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.4.tgz#234487a110d89ad5a3ed4a8a566c36b9453e8c88"
   integrity sha512-zTvEBcghmeBma9QIGunWevvBAp4/Qu9Bdq+2k0Ot4fVMD6v3dsC9WOcRSKk7tRRyBM/53yKMJko9xOatGQAwSg==
 
+"@babel/parser@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.24.6.tgz#5e030f440c3c6c78d195528c3b688b101a365328"
+  integrity sha512-eNZXdfU35nJC2h24RznROuOpO94h6x8sg9ju0tT9biNtLZ2vuP8SduLqqV+/8+cebSLV9SJEAN5Z3zQbJG/M+Q==
+
 "@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.4":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.4.tgz#6125f0158543fb4edf1c22f322f3db67f21cb3e1"
@@ -501,6 +737,14 @@
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-bugfix-firefox-class-in-computed-class-key@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-firefox-class-in-computed-class-key/-/plugin-bugfix-firefox-class-in-computed-class-key-7.24.6.tgz#283a74ef365b1e954cda6b2724c678a978215e88"
+  integrity sha512-bYndrJ6Ph6Ar+GaB5VAc0JPoP80bQCm4qon6JEzXfRl5QZyQ8Ur1K6k7htxWmPA5z+k7JQvaMUrtXlqclWYzKw==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.22.15", "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.1.tgz#b645d9ba8c2bc5b7af50f0fe949f9edbeb07c8cf"
@@ -508,6 +752,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression/-/plugin-bugfix-safari-id-destructuring-collision-in-function-expression-7.24.6.tgz#f9f5ae4d6fb72f5950262cb6f0b2482c3bc684ef"
+  integrity sha512-iVuhb6poq5ikqRq2XWU6OQ+R5o9wF+r/or9CeUyovgptz0UlnK4/seOQ1Istu/XybYjAhQv1FRSSfHHufIku5Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.22.15", "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.1.tgz#da8261f2697f0f41b0855b91d3a20a1fbfd271d3"
@@ -517,6 +768,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
     "@babel/plugin-transform-optional-chaining" "^7.24.1"
 
+"@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining/-/plugin-bugfix-v8-spread-parameters-in-optional-chaining-7.24.6.tgz#ab9be6edfffa127bd5ec4317c76c5af0f8fc7e6c"
+  integrity sha512-c8TER5xMDYzzFcGqOEp9l4hvB7dcbhcGjcLVwxWfe4P5DOafdwjsBJZKsmv+o3aXh7NhopvayQIovHrh2zSRUQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.6"
+    "@babel/plugin-transform-optional-chaining" "^7.24.6"
+
 "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.1.tgz#1181d9685984c91d657b8ddf14f0487a6bab2988"
@@ -525,6 +785,14 @@
     "@babel/helper-environment-visitor" "^7.22.20"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly/-/plugin-bugfix-v8-static-class-fields-redefine-readonly-7.24.6.tgz#0faf879249ec622d7f1c42eaebf7d11197401b2c"
+  integrity sha512-z8zEjYmwBUHN/pCF3NuWBhHQjJCrd33qAi8MgANfMrAvn72k2cImT8VjK9LJFu4ysOLJqhfkYYb3MvwANRUNZQ==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-proposal-class-properties@^7.16.7":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-proposal-class-properties/-/plugin-proposal-class-properties-7.18.6.tgz#b110f59741895f7ec21a6fff696ec46265c446a3"
@@ -632,6 +900,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-syntax-import-assertions@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-assertions/-/plugin-syntax-import-assertions-7.24.6.tgz#52521c1c1698fc2dd9cf88f7a4dd86d4d041b9e1"
+  integrity sha512-BE6o2BogJKJImTmGpkmOic4V0hlRRxVtzqxiSPa8TIFxyhi4EFjHm08nq1M4STK4RytuLMgnSz0/wfflvGFNOg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-syntax-import-attributes@^7.22.5", "@babel/plugin-syntax-import-attributes@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.1.tgz#c66b966c63b714c4eec508fcf5763b1f2d381093"
@@ -639,6 +914,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-syntax-import-attributes@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-attributes/-/plugin-syntax-import-attributes-7.24.6.tgz#12aba325534129584672920274fefa4dc2d5f68e"
+  integrity sha512-D+CfsVZousPXIdudSII7RGy52+dYRtbyKAZcvtQKq/NpsivyMVduepzcLqG5pMBugtMdedxdC8Ramdpcne9ZWQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-syntax-import-meta@^7.10.4", "@babel/plugin-syntax-import-meta@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-import-meta/-/plugin-syntax-import-meta-7.10.4.tgz#ee601348c370fa334d2207be158777496521fd51"
@@ -667,6 +949,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-syntax-jsx@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.24.6.tgz#bcca2964150437f88f65e3679e3d68762287b9c8"
+  integrity sha512-lWfvAIFNWMlCsU0DRUun2GpFwZdGTukLaHJqRh1JRb80NdAP5Sb1HDHB5X9P9OtgZHQl089UzQkpYlBq2VTPRw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4", "@babel/plugin-syntax-logical-assignment-operators@^7.8.3":
   version "7.10.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz#ca91ef46303530448b906652bac2e9fe9941f699"
@@ -730,6 +1019,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-syntax-typescript@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-typescript/-/plugin-syntax-typescript-7.24.6.tgz#769daf2982d60308bc83d8936eaecb7582463c87"
+  integrity sha512-TzCtxGgVTEJWWwcYwQhCIQ6WaKlo80/B+Onsk4RRCcYqpYGFcG9etPW94VToGte5AAcxRrhjPUFvUS3Y2qKi4A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-syntax-unicode-sets-regex@^7.18.6":
   version "7.18.6"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-unicode-sets-regex/-/plugin-syntax-unicode-sets-regex-7.18.6.tgz#d49a3b3e6b52e5be6740022317580234a6a47357"
@@ -745,6 +1041,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-arrow-functions@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-arrow-functions/-/plugin-transform-arrow-functions-7.24.6.tgz#93607d1ef5b81c70af174aff3532d57216367492"
+  integrity sha512-jSSSDt4ZidNMggcLx8SaKsbGNEfIl0PHx/4mFEulorE7bpYLbN0d3pDW3eJ7Y5Z3yPhy3L3NaPCYyTUY7TuugQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-async-generator-functions@^7.23.2", "@babel/plugin-transform-async-generator-functions@^7.24.3":
   version "7.24.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.3.tgz#8fa7ae481b100768cc9842c8617808c5352b8b89"
@@ -755,6 +1058,16 @@
     "@babel/helper-remap-async-to-generator" "^7.22.20"
     "@babel/plugin-syntax-async-generators" "^7.8.4"
 
+"@babel/plugin-transform-async-generator-functions@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-generator-functions/-/plugin-transform-async-generator-functions-7.24.6.tgz#fa4a9e5c3a7f60f697ba36587b6c41b04f507d84"
+  integrity sha512-VEP2o4iR2DqQU6KPgizTW2mnMx6BG5b5O9iQdrW9HesLkv8GIA8x2daXBQxw1MrsIkFQGA/iJ204CKoQ8UcnAA==
+  dependencies:
+    "@babel/helper-environment-visitor" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-remap-async-to-generator" "^7.24.6"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+
 "@babel/plugin-transform-async-to-generator@^7.22.5", "@babel/plugin-transform-async-to-generator@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.1.tgz#0e220703b89f2216800ce7b1c53cb0cf521c37f4"
@@ -764,6 +1077,15 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/helper-remap-async-to-generator" "^7.22.20"
 
+"@babel/plugin-transform-async-to-generator@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-async-to-generator/-/plugin-transform-async-to-generator-7.24.6.tgz#eb11434b11d73d8c0cf9f71a6f4f1e6ba441df35"
+  integrity sha512-NTBA2SioI3OsHeIn6sQmhvXleSl9T70YY/hostQLveWs0ic+qvbA3fa0kwAwQ0OA/XGaAerNZRQGJyRfhbJK4g==
+  dependencies:
+    "@babel/helper-module-imports" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-remap-async-to-generator" "^7.24.6"
+
 "@babel/plugin-transform-block-scoped-functions@^7.22.5", "@babel/plugin-transform-block-scoped-functions@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.1.tgz#1c94799e20fcd5c4d4589523bbc57b7692979380"
@@ -771,6 +1093,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-block-scoped-functions@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoped-functions/-/plugin-transform-block-scoped-functions-7.24.6.tgz#975555b5bfa9870b1218da536d1528735f1f8c56"
+  integrity sha512-XNW7jolYHW9CwORrZgA/97tL/k05qe/HL0z/qqJq1mdWhwwCM6D4BJBV7wAz9HgFziN5dTOG31znkVIzwxv+vw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-block-scoping@^7.23.0", "@babel/plugin-transform-block-scoping@^7.24.4":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.4.tgz#28f5c010b66fbb8ccdeef853bef1935c434d7012"
@@ -778,6 +1107,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-block-scoping@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-block-scoping/-/plugin-transform-block-scoping-7.24.6.tgz#a03ec8a4591c2b43cf7798bc633e698293fda179"
+  integrity sha512-S/t1Xh4ehW7sGA7c1j/hiOBLnEYCp/c2sEG4ZkL8kI1xX9tW2pqJTCHKtdhe/jHKt8nG0pFCrDHUXd4DvjHS9w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-class-properties@^7.22.5", "@babel/plugin-transform-class-properties@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.1.tgz#bcbf1aef6ba6085cfddec9fc8d58871cf011fc29"
@@ -786,6 +1122,14 @@
     "@babel/helper-create-class-features-plugin" "^7.24.1"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-class-properties@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-properties/-/plugin-transform-class-properties-7.24.6.tgz#d9f394e97e88ef905d5a1e5e7a16238621b7982e"
+  integrity sha512-j6dZ0Z2Z2slWLR3kt9aOmSIrBvnntWjMDN/TVcMPxhXMLmJVqX605CBRlcGI4b32GMbfifTEsdEjGjiE+j/c3A==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-class-static-block@^7.22.11", "@babel/plugin-transform-class-static-block@^7.24.4":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.4.tgz#1a4653c0cf8ac46441ec406dece6e9bc590356a4"
@@ -795,6 +1139,15 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-class-static-block" "^7.14.5"
 
+"@babel/plugin-transform-class-static-block@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-class-static-block/-/plugin-transform-class-static-block-7.24.6.tgz#f43f29286f6f0dca33d18fd5033b817d6c3fa816"
+  integrity sha512-1QSRfoPI9RoLRa8Mnakc6v3e0gJxiZQTYrMfLn+mD0sz5+ndSzwymp2hDcYJTyT0MOn0yuWzj8phlIvO72gTHA==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+
 "@babel/plugin-transform-classes@^7.22.15", "@babel/plugin-transform-classes@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.1.tgz#5bc8fc160ed96378184bc10042af47f50884dcb1"
@@ -809,6 +1162,20 @@
     "@babel/helper-split-export-declaration" "^7.22.6"
     globals "^11.1.0"
 
+"@babel/plugin-transform-classes@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-classes/-/plugin-transform-classes-7.24.6.tgz#0cc198c02720d4eeb091004843477659c6b37977"
+  integrity sha512-+fN+NO2gh8JtRmDSOB6gaCVo36ha8kfCW1nMq2Gc0DABln0VcHN4PrALDvF5/diLzIRKptC7z/d7Lp64zk92Fg==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.6"
+    "@babel/helper-compilation-targets" "^7.24.6"
+    "@babel/helper-environment-visitor" "^7.24.6"
+    "@babel/helper-function-name" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-replace-supers" "^7.24.6"
+    "@babel/helper-split-export-declaration" "^7.24.6"
+    globals "^11.1.0"
+
 "@babel/plugin-transform-computed-properties@^7.22.5", "@babel/plugin-transform-computed-properties@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.1.tgz#bc7e787f8e021eccfb677af5f13c29a9934ed8a7"
@@ -817,6 +1184,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/template" "^7.24.0"
 
+"@babel/plugin-transform-computed-properties@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-computed-properties/-/plugin-transform-computed-properties-7.24.6.tgz#7a1765c01cdfe59c320d2d0f37a4dc4aecd14df1"
+  integrity sha512-cRzPobcfRP0ZtuIEkA8QzghoUpSB3X3qSH5W2+FzG+VjWbJXExtx0nbRqwumdBN1x/ot2SlTNQLfBCnPdzp6kg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/template" "^7.24.6"
+
 "@babel/plugin-transform-destructuring@^7.23.0", "@babel/plugin-transform-destructuring@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.1.tgz#b1e8243af4a0206841973786292b8c8dd8447345"
@@ -824,6 +1199,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-destructuring@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-destructuring/-/plugin-transform-destructuring-7.24.6.tgz#bdd1a6c90ffb2bfd13b6007b13316eeafc97cb53"
+  integrity sha512-YLW6AE5LQpk5npNXL7i/O+U9CE4XsBCuRPgyjl1EICZYKmcitV+ayuuUGMJm2lC1WWjXYszeTnIxF/dq/GhIZQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-dotall-regex@^7.22.5", "@babel/plugin-transform-dotall-regex@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.1.tgz#d56913d2f12795cc9930801b84c6f8c47513ac13"
@@ -832,6 +1214,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-dotall-regex@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dotall-regex/-/plugin-transform-dotall-regex-7.24.6.tgz#5a6b3148ec5f4f274ff48cebea90565087cad126"
+  integrity sha512-rCXPnSEKvkm/EjzOtLoGvKseK+dS4kZwx1HexO3BtRtgL0fQ34awHn34aeSHuXtZY2F8a1X8xqBBPRtOxDVmcA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-duplicate-keys@^7.22.5", "@babel/plugin-transform-duplicate-keys@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.1.tgz#5347a797fe82b8d09749d10e9f5b83665adbca88"
@@ -839,6 +1229,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-duplicate-keys@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-duplicate-keys/-/plugin-transform-duplicate-keys-7.24.6.tgz#2716301227cf7cd4fdadcbe4353ce191f8b3dc8a"
+  integrity sha512-/8Odwp/aVkZwPFJMllSbawhDAO3UJi65foB00HYnK/uXvvCPm0TAXSByjz1mpRmp0q6oX2SIxpkUOpPFHk7FLA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-dynamic-import@^7.22.11", "@babel/plugin-transform-dynamic-import@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.1.tgz#2a5a49959201970dd09a5fca856cb651e44439dd"
@@ -847,6 +1244,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-dynamic-import" "^7.8.3"
 
+"@babel/plugin-transform-dynamic-import@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-dynamic-import/-/plugin-transform-dynamic-import-7.24.6.tgz#b477177761d56b15a4ba42a83be31cf72d757acf"
+  integrity sha512-vpq8SSLRTBLOHUZHSnBqVo0AKX3PBaoPs2vVzYVWslXDTDIpwAcCDtfhUcHSQQoYoUvcFPTdC8TZYXu9ZnLT/w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+
 "@babel/plugin-transform-exponentiation-operator@^7.22.5", "@babel/plugin-transform-exponentiation-operator@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.1.tgz#6650ebeb5bd5c012d5f5f90a26613a08162e8ba4"
@@ -855,6 +1260,14 @@
     "@babel/helper-builder-binary-assignment-operator-visitor" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-exponentiation-operator@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-exponentiation-operator/-/plugin-transform-exponentiation-operator-7.24.6.tgz#011e9e1a429f91b024af572530873ca571f9ef06"
+  integrity sha512-EemYpHtmz0lHE7hxxxYEuTYOOBZ43WkDgZ4arQ4r+VX9QHuNZC+WH3wUWmRNvR8ECpTRne29aZV6XO22qpOtdA==
+  dependencies:
+    "@babel/helper-builder-binary-assignment-operator-visitor" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-export-namespace-from@^7.22.11", "@babel/plugin-transform-export-namespace-from@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.1.tgz#f033541fc036e3efb2dcb58eedafd4f6b8078acd"
@@ -863,6 +1276,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
 
+"@babel/plugin-transform-export-namespace-from@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-export-namespace-from/-/plugin-transform-export-namespace-from-7.24.6.tgz#b64ded74d9afb3db5d47d93996c4df69f15ac97c"
+  integrity sha512-inXaTM1SVrIxCkIJ5gqWiozHfFMStuGbGJAxZFBoHcRRdDP0ySLb3jH6JOwmfiinPwyMZqMBX+7NBDCO4z0NSA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+
 "@babel/plugin-transform-flow-strip-types@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-flow-strip-types/-/plugin-transform-flow-strip-types-7.24.1.tgz#fa8d0a146506ea195da1671d38eed459242b2dcc"
@@ -879,6 +1300,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
 
+"@babel/plugin-transform-for-of@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-for-of/-/plugin-transform-for-of-7.24.6.tgz#7f31780bd0c582b546372c0c0da9d9d56731e0a2"
+  integrity sha512-n3Sf72TnqK4nw/jziSqEl1qaWPbCRw2CziHH+jdRYvw4J6yeCzsj4jdw8hIntOEeDGTmHVe2w4MVL44PN0GMzg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.6"
+
 "@babel/plugin-transform-function-name@^7.22.5", "@babel/plugin-transform-function-name@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.1.tgz#8cba6f7730626cc4dfe4ca2fa516215a0592b361"
@@ -888,6 +1317,15 @@
     "@babel/helper-function-name" "^7.23.0"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-function-name@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-function-name/-/plugin-transform-function-name-7.24.6.tgz#60d1de3f6fd816a3e3bf9538578a64527e1b9c97"
+  integrity sha512-sOajCu6V0P1KPljWHKiDq6ymgqB+vfo3isUS4McqW1DZtvSVU2v/wuMhmRmkg3sFoq6GMaUUf8W4WtoSLkOV/Q==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.24.6"
+    "@babel/helper-function-name" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-json-strings@^7.22.11", "@babel/plugin-transform-json-strings@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.1.tgz#08e6369b62ab3e8a7b61089151b161180c8299f7"
@@ -896,6 +1334,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-json-strings" "^7.8.3"
 
+"@babel/plugin-transform-json-strings@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-json-strings/-/plugin-transform-json-strings-7.24.6.tgz#a84639180ea1f9001bb5e6dc01921235ab05ad8b"
+  integrity sha512-Uvgd9p2gUnzYJxVdBLcU0KurF8aVhkmVyMKW4MIY1/BByvs3EBpv45q01o7pRTVmTvtQq5zDlytP3dcUgm7v9w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+
 "@babel/plugin-transform-literals@^7.22.5", "@babel/plugin-transform-literals@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.24.1.tgz#0a1982297af83e6b3c94972686067df588c5c096"
@@ -903,6 +1349,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-literals@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-literals/-/plugin-transform-literals-7.24.6.tgz#7f44f2871d7a4456030b0540858046f0b7bc6b18"
+  integrity sha512-f2wHfR2HF6yMj+y+/y07+SLqnOSwRp8KYLpQKOzS58XLVlULhXbiYcygfXQxJlMbhII9+yXDwOUFLf60/TL5tw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-logical-assignment-operators@^7.22.11", "@babel/plugin-transform-logical-assignment-operators@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.1.tgz#719d8aded1aa94b8fb34e3a785ae8518e24cfa40"
@@ -911,6 +1364,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
 
+"@babel/plugin-transform-logical-assignment-operators@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-logical-assignment-operators/-/plugin-transform-logical-assignment-operators-7.24.6.tgz#9cc7baa5629866566562c159dc1eae7569810f33"
+  integrity sha512-EKaWvnezBCMkRIHxMJSIIylzhqK09YpiJtDbr2wsXTwnO0TxyjMUkaw4RlFIZMIS0iDj0KyIg7H7XCguHu/YDA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+
 "@babel/plugin-transform-member-expression-literals@^7.22.5", "@babel/plugin-transform-member-expression-literals@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.1.tgz#896d23601c92f437af8b01371ad34beb75df4489"
@@ -918,6 +1379,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-member-expression-literals@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-member-expression-literals/-/plugin-transform-member-expression-literals-7.24.6.tgz#5d3681ca201ac6909419cc51ac082a6ba4c5c756"
+  integrity sha512-9g8iV146szUo5GWgXpRbq/GALTnY+WnNuRTuRHWWFfWGbP9ukRL0aO/jpu9dmOPikclkxnNsjY8/gsWl6bmZJQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-modules-amd@^7.23.0", "@babel/plugin-transform-modules-amd@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.1.tgz#b6d829ed15258536977e9c7cc6437814871ffa39"
@@ -926,6 +1394,14 @@
     "@babel/helper-module-transforms" "^7.23.3"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-modules-amd@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-amd/-/plugin-transform-modules-amd-7.24.6.tgz#09aeac7acb7913496aaaafdc64f40683e0db7e41"
+  integrity sha512-eAGogjZgcwqAxhyFgqghvoHRr+EYRQPFjUXrTYKBRb5qPnAVxOOglaxc4/byHqjvq/bqO2F3/CGwTHsgKJYHhQ==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-modules-commonjs@^7.23.0", "@babel/plugin-transform-modules-commonjs@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.1.tgz#e71ba1d0d69e049a22bf90b3867e263823d3f1b9"
@@ -935,6 +1411,15 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/helper-simple-access" "^7.22.5"
 
+"@babel/plugin-transform-modules-commonjs@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-commonjs/-/plugin-transform-modules-commonjs-7.24.6.tgz#1b8269902f25bd91ca6427230d4735ddd1e1283e"
+  integrity sha512-JEV8l3MHdmmdb7S7Cmx6rbNEjRCgTQMZxllveHO0mx6uiclB0NflCawlQQ6+o5ZrwjUBYPzHm2XoK4wqGVUFuw==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-simple-access" "^7.24.6"
+
 "@babel/plugin-transform-modules-systemjs@^7.23.0", "@babel/plugin-transform-modules-systemjs@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.1.tgz#2b9625a3d4e445babac9788daec39094e6b11e3e"
@@ -945,6 +1430,16 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/helper-validator-identifier" "^7.22.20"
 
+"@babel/plugin-transform-modules-systemjs@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-systemjs/-/plugin-transform-modules-systemjs-7.24.6.tgz#c54eb53fe16f9b82d320abd76762d0320e3f9393"
+  integrity sha512-xg1Z0J5JVYxtpX954XqaaAT6NpAY6LtZXvYFCJmGFJWwtlz2EmJoR8LycFRGNE8dBKizGWkGQZGegtkV8y8s+w==
+  dependencies:
+    "@babel/helper-hoist-variables" "^7.24.6"
+    "@babel/helper-module-transforms" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-validator-identifier" "^7.24.6"
+
 "@babel/plugin-transform-modules-umd@^7.22.5", "@babel/plugin-transform-modules-umd@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.1.tgz#69220c66653a19cf2c0872b9c762b9a48b8bebef"
@@ -953,6 +1448,14 @@
     "@babel/helper-module-transforms" "^7.23.3"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-modules-umd@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-modules-umd/-/plugin-transform-modules-umd-7.24.6.tgz#c4ef8b6d4da230b8dc87e81cd66986728952f89b"
+  integrity sha512-esRCC/KsSEUvrSjv5rFYnjZI6qv4R1e/iHQrqwbZIoRJqk7xCvEUiN7L1XrmW5QSmQe3n1XD88wbgDTWLbVSyg==
+  dependencies:
+    "@babel/helper-module-transforms" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-named-capturing-groups-regex@^7.22.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.22.5.tgz#67fe18ee8ce02d57c855185e27e3dc959b2e991f"
@@ -961,6 +1464,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.5"
     "@babel/helper-plugin-utils" "^7.22.5"
 
+"@babel/plugin-transform-named-capturing-groups-regex@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-named-capturing-groups-regex/-/plugin-transform-named-capturing-groups-regex-7.24.6.tgz#352ee2861ab8705320029f80238cf26a92ba65d5"
+  integrity sha512-6DneiCiu91wm3YiNIGDWZsl6GfTTbspuj/toTEqLh9d4cx50UIzSdg+T96p8DuT7aJOBRhFyaE9ZvTHkXrXr6Q==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-new-target@^7.22.5", "@babel/plugin-transform-new-target@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.1.tgz#29c59988fa3d0157de1c871a28cd83096363cc34"
@@ -968,6 +1479,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-new-target@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-new-target/-/plugin-transform-new-target-7.24.6.tgz#fc024294714705113720d5e3dc0f9ad7abdbc289"
+  integrity sha512-f8liz9JG2Va8A4J5ZBuaSdwfPqN6axfWRK+y66fjKYbwf9VBLuq4WxtinhJhvp1w6lamKUwLG0slK2RxqFgvHA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-nullish-coalescing-operator@^7.22.11", "@babel/plugin-transform-nullish-coalescing-operator@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.1.tgz#0cd494bb97cb07d428bd651632cb9d4140513988"
@@ -976,6 +1494,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
 
+"@babel/plugin-transform-nullish-coalescing-operator@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-nullish-coalescing-operator/-/plugin-transform-nullish-coalescing-operator-7.24.6.tgz#12b83b3cdfd1cd2066350e36e4fb912ab194545e"
+  integrity sha512-+QlAiZBMsBK5NqrBWFXCYeXyiU1y7BQ/OYaiPAcQJMomn5Tyg+r5WuVtyEuvTbpV7L25ZSLfE+2E9ywj4FD48A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+
 "@babel/plugin-transform-numeric-separator@^7.22.11", "@babel/plugin-transform-numeric-separator@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.1.tgz#5bc019ce5b3435c1cadf37215e55e433d674d4e8"
@@ -984,6 +1510,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-numeric-separator" "^7.10.4"
 
+"@babel/plugin-transform-numeric-separator@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-numeric-separator/-/plugin-transform-numeric-separator-7.24.6.tgz#d9115669cc85aa91fbfb15f88f2226332cf4946a"
+  integrity sha512-6voawq8T25Jvvnc4/rXcWZQKKxUNZcKMS8ZNrjxQqoRFernJJKjE3s18Qo6VFaatG5aiX5JV1oPD7DbJhn0a4Q==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+
 "@babel/plugin-transform-object-rest-spread@^7.22.15", "@babel/plugin-transform-object-rest-spread@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.1.tgz#5a3ce73caf0e7871a02e1c31e8b473093af241ff"
@@ -994,6 +1528,16 @@
     "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
     "@babel/plugin-transform-parameters" "^7.24.1"
 
+"@babel/plugin-transform-object-rest-spread@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.24.6.tgz#68d763f69955f9e599c405c6c876f5be46b47d8a"
+  integrity sha512-OKmi5wiMoRW5Smttne7BwHM8s/fb5JFs+bVGNSeHWzwZkWXWValR1M30jyXo1s/RaqgwwhEC62u4rFH/FBcBPg==
+  dependencies:
+    "@babel/helper-compilation-targets" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-transform-parameters" "^7.24.6"
+
 "@babel/plugin-transform-object-super@^7.22.5", "@babel/plugin-transform-object-super@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.1.tgz#e71d6ab13483cca89ed95a474f542bbfc20a0520"
@@ -1002,6 +1546,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/helper-replace-supers" "^7.24.1"
 
+"@babel/plugin-transform-object-super@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-object-super/-/plugin-transform-object-super-7.24.6.tgz#9cbe6f995bed343a7ab8daf0416dac057a9c3e27"
+  integrity sha512-N/C76ihFKlZgKfdkEYKtaRUtXZAgK7sOY4h2qrbVbVTXPrKGIi8aww5WGe/+Wmg8onn8sr2ut6FXlsbu/j6JHg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-replace-supers" "^7.24.6"
+
 "@babel/plugin-transform-optional-catch-binding@^7.22.11", "@babel/plugin-transform-optional-catch-binding@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.1.tgz#92a3d0efe847ba722f1a4508669b23134669e2da"
@@ -1010,6 +1562,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
 
+"@babel/plugin-transform-optional-catch-binding@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-catch-binding/-/plugin-transform-optional-catch-binding-7.24.6.tgz#c81e90a971aad898e56f2b75a358e6c4855aeba3"
+  integrity sha512-L5pZ+b3O1mSzJ71HmxSCmTVd03VOT2GXOigug6vDYJzE5awLI7P1g0wFcdmGuwSDSrQ0L2rDOe/hHws8J1rv3w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+
 "@babel/plugin-transform-optional-chaining@^7.23.0", "@babel/plugin-transform-optional-chaining@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.1.tgz#26e588acbedce1ab3519ac40cc748e380c5291e6"
@@ -1019,6 +1579,15 @@
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
     "@babel/plugin-syntax-optional-chaining" "^7.8.3"
 
+"@babel/plugin-transform-optional-chaining@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-optional-chaining/-/plugin-transform-optional-chaining-7.24.6.tgz#3d636b3ed8b5a506f93e4d4675fc95754d7594f5"
+  integrity sha512-cHbqF6l1QP11OkYTYQ+hhVx1E017O5ZcSPXk9oODpqhcAD1htsWG2NpHrrhthEO2qZomLK0FXS+u7NfrkF5aOQ==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.6"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+
 "@babel/plugin-transform-parameters@^7.12.1", "@babel/plugin-transform-parameters@^7.20.7", "@babel/plugin-transform-parameters@^7.22.15", "@babel/plugin-transform-parameters@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.1.tgz#983c15d114da190506c75b616ceb0f817afcc510"
@@ -1026,6 +1595,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-parameters@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-parameters/-/plugin-transform-parameters-7.24.6.tgz#7aee86dfedd2fc0136fecbe6f7649fc02d86ab22"
+  integrity sha512-ST7guE8vLV+vI70wmAxuZpIKzVjvFX9Qs8bl5w6tN/6gOypPWUmMQL2p7LJz5E63vEGrDhAiYetniJFyBH1RkA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-private-methods@^7.22.5", "@babel/plugin-transform-private-methods@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.1.tgz#a0faa1ae87eff077e1e47a5ec81c3aef383dc15a"
@@ -1034,6 +1610,14 @@
     "@babel/helper-create-class-features-plugin" "^7.24.1"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-private-methods@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-methods/-/plugin-transform-private-methods-7.24.6.tgz#258e1f859a52ff7b30ad556598224c192defcda7"
+  integrity sha512-T9LtDI0BgwXOzyXrvgLTT8DFjCC/XgWLjflczTLXyvxbnSR/gpv0hbmzlHE/kmh9nOvlygbamLKRo6Op4yB6aw==
+  dependencies:
+    "@babel/helper-create-class-features-plugin" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-private-property-in-object@^7.22.11", "@babel/plugin-transform-private-property-in-object@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.1.tgz#756443d400274f8fb7896742962cc1b9f25c1f6a"
@@ -1044,6 +1628,16 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
 
+"@babel/plugin-transform-private-property-in-object@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-private-property-in-object/-/plugin-transform-private-property-in-object-7.24.6.tgz#59ff09a099f62213112cf348e96b6b11957d1f28"
+  integrity sha512-Qu/ypFxCY5NkAnEhCF86Mvg3NSabKsh/TPpBVswEdkGl7+FbsYHy1ziRqJpwGH4thBdQHh8zx+z7vMYmcJ7iaQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.6"
+    "@babel/helper-create-class-features-plugin" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+
 "@babel/plugin-transform-property-literals@^7.22.5", "@babel/plugin-transform-property-literals@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.1.tgz#d6a9aeab96f03749f4eebeb0b6ea8e90ec958825"
@@ -1051,6 +1645,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-property-literals@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-property-literals/-/plugin-transform-property-literals-7.24.6.tgz#243c4faabe811c405e9443059a58e834bf95dfd1"
+  integrity sha512-oARaglxhRsN18OYsnPTpb8TcKQWDYNsPNmTnx5++WOAsUJ0cSC/FZVlIJCKvPbU4yn/UXsS0551CFKJhN0CaMw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-react-constant-elements@^7.12.1", "@babel/plugin-transform-react-constant-elements@^7.18.12":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.24.1.tgz#d493a0918b9fdad7540f5afd9b5eb5c52500d18d"
@@ -1058,6 +1659,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-react-constant-elements@^7.21.3":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-constant-elements/-/plugin-transform-react-constant-elements-7.24.6.tgz#628c52aecfb2beca1e6383ce2c5b6722df3ff311"
+  integrity sha512-vQfyXRtG/kNIcTYRd/49uJnwvMig9X3R4XsTVXRml2RFupZFY+2RDuK+/ymb+MfX2WuIHAgUZc2xEvQrnI7QCg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-react-display-name@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-react-display-name/-/plugin-transform-react-display-name-7.24.1.tgz#554e3e1a25d181f040cf698b93fd289a03bfdcdb"
@@ -1099,6 +1707,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     regenerator-transform "^0.15.2"
 
+"@babel/plugin-transform-regenerator@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-regenerator/-/plugin-transform-regenerator-7.24.6.tgz#ed10cf0c13619365e15459f88d1b915ac57ffc24"
+  integrity sha512-SMDxO95I8WXRtXhTAc8t/NFQUT7VYbIWwJCJgEli9ml4MhqUMh4S6hxgH6SmAC3eAQNWCDJFxcFeEt9w2sDdXg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    regenerator-transform "^0.15.2"
+
 "@babel/plugin-transform-reserved-words@^7.22.5", "@babel/plugin-transform-reserved-words@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.1.tgz#8de729f5ecbaaf5cf83b67de13bad38a21be57c1"
@@ -1106,6 +1722,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-reserved-words@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-reserved-words/-/plugin-transform-reserved-words-7.24.6.tgz#9eb16cbf339fcea0a46677716c775afb5ef14245"
+  integrity sha512-DcrgFXRRlK64dGE0ZFBPD5egM2uM8mgfrvTMOSB2yKzOtjpGegVYkzh3s1zZg1bBck3nkXiaOamJUqK3Syk+4A==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-runtime@^7.18.6", "@babel/plugin-transform-runtime@^7.23.2":
   version "7.24.3"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-runtime/-/plugin-transform-runtime-7.24.3.tgz#dc58ad4a31810a890550365cc922e1ff5acb5d7f"
@@ -1125,6 +1748,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-shorthand-properties@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-shorthand-properties/-/plugin-transform-shorthand-properties-7.24.6.tgz#ef734ebccc428d2174c7bb36015d0800faf5381e"
+  integrity sha512-xnEUvHSMr9eOWS5Al2YPfc32ten7CXdH7Zwyyk7IqITg4nX61oHj+GxpNvl+y5JHjfN3KXE2IV55wAWowBYMVw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-spread@^7.22.5", "@babel/plugin-transform-spread@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.1.tgz#a1acf9152cbf690e4da0ba10790b3ac7d2b2b391"
@@ -1133,6 +1763,14 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/helper-skip-transparent-expression-wrappers" "^7.22.5"
 
+"@babel/plugin-transform-spread@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-spread/-/plugin-transform-spread-7.24.6.tgz#a56cecbd8617675531d1b79f5b755b7613aa0822"
+  integrity sha512-h/2j7oIUDjS+ULsIrNZ6/TKG97FgmEk1PXryk/HQq6op4XUUUwif2f69fJrzK0wza2zjCS1xhXmouACaWV5uPA==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-skip-transparent-expression-wrappers" "^7.24.6"
+
 "@babel/plugin-transform-sticky-regex@^7.22.5", "@babel/plugin-transform-sticky-regex@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.1.tgz#f03e672912c6e203ed8d6e0271d9c2113dc031b9"
@@ -1140,6 +1778,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-sticky-regex@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-sticky-regex/-/plugin-transform-sticky-regex-7.24.6.tgz#1a78127731fea87d954bed193840986a38f04327"
+  integrity sha512-fN8OcTLfGmYv7FnDrsjodYBo1DhPL3Pze/9mIIE2MGCT1KgADYIOD7rEglpLHZj8PZlC/JFX5WcD+85FLAQusw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-template-literals@^7.22.5", "@babel/plugin-transform-template-literals@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.1.tgz#15e2166873a30d8617e3e2ccadb86643d327aab7"
@@ -1147,6 +1792,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-template-literals@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-template-literals/-/plugin-transform-template-literals-7.24.6.tgz#aaf2ae157acd0e5c9265dba8ac0a439f8d2a6303"
+  integrity sha512-BJbEqJIcKwrqUP+KfUIkxz3q8VzXe2R8Wv8TaNgO1cx+nNavxn/2+H8kp9tgFSOL6wYPPEgFvU6IKS4qoGqhmg==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-typeof-symbol@^7.22.5", "@babel/plugin-transform-typeof-symbol@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.1.tgz#6831f78647080dec044f7e9f68003d99424f94c7"
@@ -1154,6 +1806,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-typeof-symbol@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typeof-symbol/-/plugin-transform-typeof-symbol-7.24.6.tgz#3d02da23ebcc8f1982ddcd1f2581cf3ee4e58762"
+  integrity sha512-IshCXQ+G9JIFJI7bUpxTE/oA2lgVLAIK8q1KdJNoPXOpvRaNjMySGuvLfBw/Xi2/1lLo953uE8hyYSDW3TSYig==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-typescript@^7.13.0", "@babel/plugin-transform-typescript@^7.24.1":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.4.tgz#03e0492537a4b953e491f53f2bc88245574ebd15"
@@ -1164,6 +1823,16 @@
     "@babel/helper-plugin-utils" "^7.24.0"
     "@babel/plugin-syntax-typescript" "^7.24.1"
 
+"@babel/plugin-transform-typescript@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-typescript/-/plugin-transform-typescript-7.24.6.tgz#339c6127a783c32e28a5b591e6c666f899b57db0"
+  integrity sha512-H0i+hDLmaYYSt6KU9cZE0gb3Cbssa/oxWis7PX4ofQzbvsfix9Lbh8SRk7LCPDlLWJHUiFeHU0qRRpF/4Zv7mQ==
+  dependencies:
+    "@babel/helper-annotate-as-pure" "^7.24.6"
+    "@babel/helper-create-class-features-plugin" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/plugin-syntax-typescript" "^7.24.6"
+
 "@babel/plugin-transform-unicode-escapes@^7.22.10", "@babel/plugin-transform-unicode-escapes@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.1.tgz#fb3fa16676549ac7c7449db9b342614985c2a3a4"
@@ -1171,6 +1840,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-unicode-escapes@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-escapes/-/plugin-transform-unicode-escapes-7.24.6.tgz#c8ddca8fd5bacece837a4e27bd3b7ed64580d1a8"
+  integrity sha512-bKl3xxcPbkQQo5eX9LjjDpU2xYHeEeNQbOhj0iPvetSzA+Tu9q/o5lujF4Sek60CM6MgYvOS/DJuwGbiEYAnLw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-unicode-property-regex@^7.22.5", "@babel/plugin-transform-unicode-property-regex@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.1.tgz#56704fd4d99da81e5e9f0c0c93cabd91dbc4889e"
@@ -1179,6 +1855,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-unicode-property-regex@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-property-regex/-/plugin-transform-unicode-property-regex-7.24.6.tgz#e66297d5d452db0b0be56515e3d0e10b7d33fb32"
+  integrity sha512-8EIgImzVUxy15cZiPii9GvLZwsy7Vxc+8meSlR3cXFmBIl5W5Tn9LGBf7CDKkHj4uVfNXCJB8RsVfnmY61iedA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-unicode-regex@^7.22.5", "@babel/plugin-transform-unicode-regex@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.1.tgz#57c3c191d68f998ac46b708380c1ce4d13536385"
@@ -1187,6 +1871,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-unicode-regex@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-regex/-/plugin-transform-unicode-regex-7.24.6.tgz#2001e7d87ed709eea145e0b65fb5f93c3c0e225b"
+  integrity sha512-pssN6ExsvxaKU638qcWb81RrvvgZom3jDgU/r5xFZ7TONkZGFf4MhI2ltMb8OcQWhHyxgIavEU+hgqtbKOmsPA==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/plugin-transform-unicode-sets-regex@^7.22.5", "@babel/plugin-transform-unicode-sets-regex@^7.24.1":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.1.tgz#c1ea175b02afcffc9cf57a9c4658326625165b7f"
@@ -1195,6 +1887,14 @@
     "@babel/helper-create-regexp-features-plugin" "^7.22.15"
     "@babel/helper-plugin-utils" "^7.24.0"
 
+"@babel/plugin-transform-unicode-sets-regex@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-transform-unicode-sets-regex/-/plugin-transform-unicode-sets-regex-7.24.6.tgz#f18b7292222aee85c155258ceb345a146a070a46"
+  integrity sha512-quiMsb28oXWIDK0gXLALOJRXLgICLiulqdZGOaPPd0vRT7fQp74NtdADAVu+D8s00C+0Xs0MxVP0VKF/sZEUgw==
+  dependencies:
+    "@babel/helper-create-regexp-features-plugin" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+
 "@babel/preset-env@7.23.2":
   version "7.23.2"
   resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.23.2.tgz#1f22be0ff0e121113260337dbc3e58fafce8d059"
@@ -1368,6 +2068,93 @@
     core-js-compat "^3.31.0"
     semver "^6.3.1"
 
+"@babel/preset-env@^7.20.2":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-env/-/preset-env-7.24.6.tgz#a5a55bc70e5ff1ed7f872067e2a9d65ff917ad6f"
+  integrity sha512-CrxEAvN7VxfjOG8JNF2Y/eMqMJbZPZ185amwGUBp8D9USK90xQmv7dLdFSa+VbD7fdIqcy/Mfv7WtzG8+/qxKg==
+  dependencies:
+    "@babel/compat-data" "^7.24.6"
+    "@babel/helper-compilation-targets" "^7.24.6"
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-validator-option" "^7.24.6"
+    "@babel/plugin-bugfix-firefox-class-in-computed-class-key" "^7.24.6"
+    "@babel/plugin-bugfix-safari-id-destructuring-collision-in-function-expression" "^7.24.6"
+    "@babel/plugin-bugfix-v8-spread-parameters-in-optional-chaining" "^7.24.6"
+    "@babel/plugin-bugfix-v8-static-class-fields-redefine-readonly" "^7.24.6"
+    "@babel/plugin-proposal-private-property-in-object" "7.21.0-placeholder-for-preset-env.2"
+    "@babel/plugin-syntax-async-generators" "^7.8.4"
+    "@babel/plugin-syntax-class-properties" "^7.12.13"
+    "@babel/plugin-syntax-class-static-block" "^7.14.5"
+    "@babel/plugin-syntax-dynamic-import" "^7.8.3"
+    "@babel/plugin-syntax-export-namespace-from" "^7.8.3"
+    "@babel/plugin-syntax-import-assertions" "^7.24.6"
+    "@babel/plugin-syntax-import-attributes" "^7.24.6"
+    "@babel/plugin-syntax-import-meta" "^7.10.4"
+    "@babel/plugin-syntax-json-strings" "^7.8.3"
+    "@babel/plugin-syntax-logical-assignment-operators" "^7.10.4"
+    "@babel/plugin-syntax-nullish-coalescing-operator" "^7.8.3"
+    "@babel/plugin-syntax-numeric-separator" "^7.10.4"
+    "@babel/plugin-syntax-object-rest-spread" "^7.8.3"
+    "@babel/plugin-syntax-optional-catch-binding" "^7.8.3"
+    "@babel/plugin-syntax-optional-chaining" "^7.8.3"
+    "@babel/plugin-syntax-private-property-in-object" "^7.14.5"
+    "@babel/plugin-syntax-top-level-await" "^7.14.5"
+    "@babel/plugin-syntax-unicode-sets-regex" "^7.18.6"
+    "@babel/plugin-transform-arrow-functions" "^7.24.6"
+    "@babel/plugin-transform-async-generator-functions" "^7.24.6"
+    "@babel/plugin-transform-async-to-generator" "^7.24.6"
+    "@babel/plugin-transform-block-scoped-functions" "^7.24.6"
+    "@babel/plugin-transform-block-scoping" "^7.24.6"
+    "@babel/plugin-transform-class-properties" "^7.24.6"
+    "@babel/plugin-transform-class-static-block" "^7.24.6"
+    "@babel/plugin-transform-classes" "^7.24.6"
+    "@babel/plugin-transform-computed-properties" "^7.24.6"
+    "@babel/plugin-transform-destructuring" "^7.24.6"
+    "@babel/plugin-transform-dotall-regex" "^7.24.6"
+    "@babel/plugin-transform-duplicate-keys" "^7.24.6"
+    "@babel/plugin-transform-dynamic-import" "^7.24.6"
+    "@babel/plugin-transform-exponentiation-operator" "^7.24.6"
+    "@babel/plugin-transform-export-namespace-from" "^7.24.6"
+    "@babel/plugin-transform-for-of" "^7.24.6"
+    "@babel/plugin-transform-function-name" "^7.24.6"
+    "@babel/plugin-transform-json-strings" "^7.24.6"
+    "@babel/plugin-transform-literals" "^7.24.6"
+    "@babel/plugin-transform-logical-assignment-operators" "^7.24.6"
+    "@babel/plugin-transform-member-expression-literals" "^7.24.6"
+    "@babel/plugin-transform-modules-amd" "^7.24.6"
+    "@babel/plugin-transform-modules-commonjs" "^7.24.6"
+    "@babel/plugin-transform-modules-systemjs" "^7.24.6"
+    "@babel/plugin-transform-modules-umd" "^7.24.6"
+    "@babel/plugin-transform-named-capturing-groups-regex" "^7.24.6"
+    "@babel/plugin-transform-new-target" "^7.24.6"
+    "@babel/plugin-transform-nullish-coalescing-operator" "^7.24.6"
+    "@babel/plugin-transform-numeric-separator" "^7.24.6"
+    "@babel/plugin-transform-object-rest-spread" "^7.24.6"
+    "@babel/plugin-transform-object-super" "^7.24.6"
+    "@babel/plugin-transform-optional-catch-binding" "^7.24.6"
+    "@babel/plugin-transform-optional-chaining" "^7.24.6"
+    "@babel/plugin-transform-parameters" "^7.24.6"
+    "@babel/plugin-transform-private-methods" "^7.24.6"
+    "@babel/plugin-transform-private-property-in-object" "^7.24.6"
+    "@babel/plugin-transform-property-literals" "^7.24.6"
+    "@babel/plugin-transform-regenerator" "^7.24.6"
+    "@babel/plugin-transform-reserved-words" "^7.24.6"
+    "@babel/plugin-transform-shorthand-properties" "^7.24.6"
+    "@babel/plugin-transform-spread" "^7.24.6"
+    "@babel/plugin-transform-sticky-regex" "^7.24.6"
+    "@babel/plugin-transform-template-literals" "^7.24.6"
+    "@babel/plugin-transform-typeof-symbol" "^7.24.6"
+    "@babel/plugin-transform-unicode-escapes" "^7.24.6"
+    "@babel/plugin-transform-unicode-property-regex" "^7.24.6"
+    "@babel/plugin-transform-unicode-regex" "^7.24.6"
+    "@babel/plugin-transform-unicode-sets-regex" "^7.24.6"
+    "@babel/preset-modules" "0.1.6-no-external-plugins"
+    babel-plugin-polyfill-corejs2 "^0.4.10"
+    babel-plugin-polyfill-corejs3 "^0.10.4"
+    babel-plugin-polyfill-regenerator "^0.6.1"
+    core-js-compat "^3.31.0"
+    semver "^6.3.1"
+
 "@babel/preset-flow@^7.22.15":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/preset-flow/-/preset-flow-7.24.1.tgz#da7196c20c2d7dd4e98cfd8b192fe53b5eb6f0bb"
@@ -1409,6 +2196,17 @@
     "@babel/plugin-transform-modules-commonjs" "^7.24.1"
     "@babel/plugin-transform-typescript" "^7.24.1"
 
+"@babel/preset-typescript@^7.21.0":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/preset-typescript/-/preset-typescript-7.24.6.tgz#27057470fb981c31338bdb897fc3d9aa0cb7dab2"
+  integrity sha512-U10aHPDnokCFRXgyT/MaIRTivUu2K/mu0vJlwRS9LxJmJet+PFQNKpggPyFCUtC6zWSBPjvxjnpNkAn3Uw2m5w==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.24.6"
+    "@babel/helper-validator-option" "^7.24.6"
+    "@babel/plugin-syntax-jsx" "^7.24.6"
+    "@babel/plugin-transform-modules-commonjs" "^7.24.6"
+    "@babel/plugin-transform-typescript" "^7.24.6"
+
 "@babel/register@^7.22.15":
   version "7.23.7"
   resolved "https://registry.yarnpkg.com/@babel/register/-/register-7.23.7.tgz#485a5e7951939d21304cae4af1719fdb887bc038"
@@ -1441,7 +2239,7 @@
     core-js-pure "^3.30.2"
     regenerator-runtime "^0.14.0"
 
-"@babel/runtime@7.22.11", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.6", "@babel/runtime@^7.23.2", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@7.22.11", "@babel/runtime@^7.0.0", "@babel/runtime@^7.1.2", "@babel/runtime@^7.10.3", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.0", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.17.8", "@babel/runtime@^7.18.3", "@babel/runtime@^7.18.6", "@babel/runtime@^7.20.13", "@babel/runtime@^7.20.6", "@babel/runtime@^7.23.2", "@babel/runtime@^7.24.1", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.4", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.24.4"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.4.tgz#de795accd698007a66ba44add6cc86542aff1edd"
   integrity sha512-dkxf7+hn8mFBwKjs9bvBlArzLVxVbS8usaPUDd5p2a9JCL9tB8OaOVN1isD4+Xyk4ns89/xeOmbQvgdK7IIVdA==
@@ -1457,6 +2255,15 @@
     "@babel/parser" "^7.24.0"
     "@babel/types" "^7.24.0"
 
+"@babel/template@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.24.6.tgz#048c347b2787a6072b24c723664c8d02b67a44f9"
+  integrity sha512-3vgazJlLwNXi9jhrR1ef8qiB65L1RK90+lEQwv4OxveHnqC3BfmnHdgySwRLzf6akhlOYenT+b7AfWq+a//AHw==
+  dependencies:
+    "@babel/code-frame" "^7.24.6"
+    "@babel/parser" "^7.24.6"
+    "@babel/types" "^7.24.6"
+
 "@babel/traverse@^7.0.0", "@babel/traverse@^7.12.9", "@babel/traverse@^7.18.8", "@babel/traverse@^7.18.9", "@babel/traverse@^7.23.2", "@babel/traverse@^7.24.1", "@babel/traverse@^7.7.0":
   version "7.24.1"
   resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.1.tgz#d65c36ac9dd17282175d1e4a3c49d5b7988f530c"
@@ -1473,6 +2280,22 @@
     debug "^4.3.1"
     globals "^11.1.0"
 
+"@babel/traverse@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.24.6.tgz#0941ec50cdeaeacad0911eb67ae227a4f8424edc"
+  integrity sha512-OsNjaJwT9Zn8ozxcfoBc+RaHdj3gFmCmYoQLUII1o6ZrUwku0BMg80FoOTPx+Gi6XhcQxAYE4xyjPTo4SxEQqw==
+  dependencies:
+    "@babel/code-frame" "^7.24.6"
+    "@babel/generator" "^7.24.6"
+    "@babel/helper-environment-visitor" "^7.24.6"
+    "@babel/helper-function-name" "^7.24.6"
+    "@babel/helper-hoist-variables" "^7.24.6"
+    "@babel/helper-split-export-declaration" "^7.24.6"
+    "@babel/parser" "^7.24.6"
+    "@babel/types" "^7.24.6"
+    debug "^4.3.1"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.12.7", "@babel/types@^7.18.9", "@babel/types@^7.20.0", "@babel/types@^7.20.7", "@babel/types@^7.22.15", "@babel/types@^7.22.19", "@babel/types@^7.22.5", "@babel/types@^7.23.0", "@babel/types@^7.23.4", "@babel/types@^7.24.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4", "@babel/types@^7.7.0":
   version "7.24.0"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.0.tgz#3b951f435a92e7333eba05b7566fd297960ea1bf"
@@ -1482,6 +2305,15 @@
     "@babel/helper-validator-identifier" "^7.22.20"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.21.3", "@babel/types@^7.24.6":
+  version "7.24.6"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.24.6.tgz#ba4e1f59870c10dc2fa95a274ac4feec23b21912"
+  integrity sha512-WaMsgi6Q8zMgMth93GvWPXkhAIEobfsIkLTacoVZoK1J0CevIPGYY2Vo5YvJGqyHqXM6P4ppOYGsIRU8MM9pFQ==
+  dependencies:
+    "@babel/helper-string-parser" "^7.24.6"
+    "@babel/helper-validator-identifier" "^7.24.6"
+    to-fast-properties "^2.0.0"
+
 "@base2/pretty-print-object@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@base2/pretty-print-object/-/pretty-print-object-1.0.1.tgz#371ba8be66d556812dc7fb169ebc3c08378f69d4"
@@ -2086,7 +2918,7 @@
     "@docusaurus/theme-search-algolia" "2.4.3"
     "@docusaurus/types" "2.4.3"
 
-"@docusaurus/react-loadable@5.5.2":
+"@docusaurus/react-loadable@5.5.2", "react-loadable@npm:@docusaurus/react-loadable@5.5.2":
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
   integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
@@ -2295,6 +3127,18 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
+"@emotion/is-prop-valid@^0.8.2":
+  version "0.8.8"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
+  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
+  dependencies:
+    "@emotion/memoize" "0.7.4"
+
+"@emotion/memoize@0.7.4":
+  version "0.7.4"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.4.tgz#19bf0f5af19149111c40d98bb0cf82119f5d9eeb"
+  integrity sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==
+
 "@emotion/memoize@^0.8.1":
   version "0.8.1"
   resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.8.1.tgz#c1ddb040429c6d21d38cc945fe75c818cfb68e17"
@@ -3504,6 +4348,27 @@
   dependencies:
     "@babel/runtime" "^7.13.10"
 
+"@radix-ui/react-dialog@1.0.5", "@radix-ui/react-dialog@^1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dialog/-/react-dialog-1.0.5.tgz#71657b1b116de6c7a0b03242d7d43e01062c7300"
+  integrity sha512-GjWJX/AUpB703eEBanuBnIWdIXg6NvJFCXcNlSZk4xdszCdhrJgBoUd1cGk67vFO+WdA2pfI/plOpqz/5GUP6Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-direction@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-direction/-/react-direction-1.0.1.tgz#9cb61bf2ccf568f3421422d182637b7f47596c9b"
@@ -3523,6 +4388,18 @@
     "@radix-ui/react-use-callback-ref" "1.0.1"
     "@radix-ui/react-use-escape-keydown" "1.0.3"
 
+"@radix-ui/react-dismissable-layer@1.0.5":
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.5.tgz#3f98425b82b9068dfbab5db5fff3df6ebf48b9d4"
+  integrity sha512-aJeDjQhywg9LBu2t/At58hCvr7pEm0o2Ke1x33B+MhjNmmZ17sy4KImo0KPLgsnc/zN7GPdce8Cnn0SWvwZO7g==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-escape-keydown" "1.0.3"
+
 "@radix-ui/react-focus-guards@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz#1ea7e32092216b946397866199d892f71f7f98ad"
@@ -3540,6 +4417,21 @@
     "@radix-ui/react-primitive" "1.0.3"
     "@radix-ui/react-use-callback-ref" "1.0.1"
 
+"@radix-ui/react-focus-scope@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.4.tgz#2ac45fce8c5bb33eb18419cdc1905ef4f1906525"
+  integrity sha512-sL04Mgvf+FmyvZeYfNu1EPAaaxD+aw7cYeIB9L9Fvq8+urhltTRaEo5ysKOpHuKPclsZcSUMKlN05x4u+CINpA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+
+"@radix-ui/react-icons@^1.3.0":
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-icons/-/react-icons-1.3.0.tgz#c61af8f323d87682c5ca76b856d60c2312dbcb69"
+  integrity sha512-jQxj/0LKgp+j9BiTXz3O3sgs26RNet2iLWmsPyRz2SIcR4q/4SbazXfnYwbAr+vLYKSfc7qxzyGQA1HLlYiuNw==
+
 "@radix-ui/react-id@1.0.1":
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-id/-/react-id-1.0.1.tgz#73cdc181f650e4df24f0b6a5b7aa426b912c88c0"
@@ -3548,6 +4440,28 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-use-layout-effect" "1.0.1"
 
+"@radix-ui/react-popover@^1.0.7":
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popover/-/react-popover-1.0.7.tgz#23eb7e3327330cb75ec7b4092d685398c1654e3c"
+  integrity sha512-shtvVnlsxT6faMnK/a7n0wptwBD23xc1Z5mdrtKLwVEfsEMXodS0r5s0/g5P0hX//EKYZS2sxUjqfzlg52ZSnQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/primitive" "1.0.1"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-dismissable-layer" "1.0.5"
+    "@radix-ui/react-focus-guards" "1.0.1"
+    "@radix-ui/react-focus-scope" "1.0.4"
+    "@radix-ui/react-id" "1.0.1"
+    "@radix-ui/react-popper" "1.1.3"
+    "@radix-ui/react-portal" "1.0.4"
+    "@radix-ui/react-presence" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-slot" "1.0.2"
+    "@radix-ui/react-use-controllable-state" "1.0.1"
+    aria-hidden "^1.1.1"
+    react-remove-scroll "2.5.5"
+
 "@radix-ui/react-popper@1.1.2":
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.2.tgz#4c0b96fcd188dc1f334e02dba2d538973ad842e9"
@@ -3565,6 +4479,23 @@
     "@radix-ui/react-use-size" "1.0.1"
     "@radix-ui/rect" "1.0.1"
 
+"@radix-ui/react-popper@1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-1.1.3.tgz#24c03f527e7ac348fabf18c89795d85d21b00b42"
+  integrity sha512-cKpopj/5RHZWjrbF2846jBNacjQVwkP068DfmgrNJXpvVWrOvlAmE9xSiy5OqeE+Gi8D9fP+oDhUnPqNMY8/5w==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@floating-ui/react-dom" "^2.0.0"
+    "@radix-ui/react-arrow" "1.0.3"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-context" "1.0.1"
+    "@radix-ui/react-primitive" "1.0.3"
+    "@radix-ui/react-use-callback-ref" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+    "@radix-ui/react-use-rect" "1.0.1"
+    "@radix-ui/react-use-size" "1.0.1"
+    "@radix-ui/rect" "1.0.1"
+
 "@radix-ui/react-portal@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.3.tgz#ffb961244c8ed1b46f039e6c215a6c4d9989bda1"
@@ -3573,6 +4504,23 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
+"@radix-ui/react-portal@1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-1.0.4.tgz#df4bfd353db3b1e84e639e9c63a5f2565fb00e15"
+  integrity sha512-Qki+C/EuGUVCQTOTD5vzJzJuMUlewbzuKyUy+/iHM2uwGiru9gZeBJtHAPKAEkB5KWGi9mP/CHKcY0wt1aW45Q==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-primitive" "1.0.3"
+
+"@radix-ui/react-presence@1.0.1":
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-1.0.1.tgz#491990ba913b8e2a5db1b06b203cb24b5cdef9ba"
+  integrity sha512-UXLW4UAbIY5ZjcvzjfRFo5gxva8QirC9hF7wRE4U5gz+TP0DbRk+//qyuAQ1McDxBt1xNMBTaciFGvEmJvAZCg==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@radix-ui/react-compose-refs" "1.0.1"
+    "@radix-ui/react-use-layout-effect" "1.0.1"
+
 "@radix-ui/react-primitive@1.0.3":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz#d49ea0f3f0b2fe3ab1cb5667eb03e8b843b914d0"
@@ -3633,7 +4581,7 @@
     "@babel/runtime" "^7.13.10"
     "@radix-ui/react-primitive" "1.0.3"
 
-"@radix-ui/react-slot@1.0.2":
+"@radix-ui/react-slot@1.0.2", "@radix-ui/react-slot@^1.0.2":
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.0.2.tgz#a9ff4423eade67f501ffb32ec22064bc9d3099ab"
   integrity sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==
@@ -4567,6 +5515,11 @@
     magic-string "^0.25.0"
     string.prototype.matchall "^4.0.6"
 
+"@svgr/babel-plugin-add-jsx-attribute@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-8.0.0.tgz#4001f5d5dd87fa13303e36ee106e3ff3a7eb8b22"
+  integrity sha512-b9MIk7yhdS1pMCZM8VeNfUlSKVRhsHZNMl5O9SfaX0l0t5wjdgu4IDzGB8bpnGBBOjGST3rRFVsaaEtI4W6f7g==
+
 "@svgr/babel-plugin-add-jsx-attribute@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-5.4.0.tgz#81ef61947bb268eb9d50523446f9c638fb355906"
@@ -4577,7 +5530,7 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-6.5.1.tgz#74a5d648bd0347bda99d82409d87b8ca80b9a1ba"
   integrity sha512-9PYGcXrAxitycIjRmZB+Q0JaN07GZIWaTBIGQzfaZv+qr1n8X1XUEJ5rZ/vx6OVD9RRYlrNnXWExQXcmZeD/BQ==
 
-"@svgr/babel-plugin-remove-jsx-attribute@*":
+"@svgr/babel-plugin-remove-jsx-attribute@*", "@svgr/babel-plugin-remove-jsx-attribute@8.0.0":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-8.0.0.tgz#69177f7937233caca3a1afb051906698f2f59186"
   integrity sha512-BcCkm/STipKvbCl6b7QFrMh/vx00vIP63k2eM66MfHJzPr6O2U0jYEViXkHJWqXqQYjdeA9cuCl5KWmlwjDvbA==
@@ -4587,7 +5540,7 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-attribute/-/babel-plugin-remove-jsx-attribute-5.4.0.tgz#6b2c770c95c874654fd5e1d5ef475b78a0a962ef"
   integrity sha512-yaS4o2PgUtwLFGTKbsiAy6D0o3ugcUhWK0Z45umJ66EPWunAz9fuFw2gJuje6wqQvQWOTJvIahUwndOXb7QCPg==
 
-"@svgr/babel-plugin-remove-jsx-empty-expression@*":
+"@svgr/babel-plugin-remove-jsx-empty-expression@*", "@svgr/babel-plugin-remove-jsx-empty-expression@8.0.0":
   version "8.0.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-8.0.0.tgz#c2c48104cfd7dcd557f373b70a56e9e3bdae1d44"
   integrity sha512-5BcGCBfBxB5+XSDSWnhTThfI9jcO5f0Ai2V24gZpG+wXF14BzwxxdDb4g6trdOux0rhibGs385BeFMSmxtS3uA==
@@ -4597,6 +5550,11 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-remove-jsx-empty-expression/-/babel-plugin-remove-jsx-empty-expression-5.0.1.tgz#25621a8915ed7ad70da6cea3d0a6dbc2ea933efd"
   integrity sha512-LA72+88A11ND/yFIMzyuLRSMJ+tRKeYKeQ+mR3DcAZ5I4h5CPWN9AHyUzJbWSYp/u2u0xhmgOe0+E41+GjEueA==
 
+"@svgr/babel-plugin-replace-jsx-attribute-value@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-8.0.0.tgz#8fbb6b2e91fa26ac5d4aa25c6b6e4f20f9c0ae27"
+  integrity sha512-KVQ+PtIjb1BuYT3ht8M5KbzWBhdAjjUPdlMtpuw/VjT8coTrItWX6Qafl9+ji831JaJcu6PJNKCV0bp01lBNzQ==
+
 "@svgr/babel-plugin-replace-jsx-attribute-value@^5.0.1":
   version "5.0.1"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-5.0.1.tgz#0b221fc57f9fcd10e91fe219e2cd0dd03145a897"
@@ -4607,6 +5565,11 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-replace-jsx-attribute-value/-/babel-plugin-replace-jsx-attribute-value-6.5.1.tgz#fb9d22ea26d2bc5e0a44b763d4c46d5d3f596c60"
   integrity sha512-8DPaVVE3fd5JKuIC29dqyMB54sA6mfgki2H2+swh+zNJoynC8pMPzOkidqHOSc6Wj032fhl8Z0TVn1GiPpAiJg==
 
+"@svgr/babel-plugin-svg-dynamic-title@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-8.0.0.tgz#1d5ba1d281363fc0f2f29a60d6d936f9bbc657b0"
+  integrity sha512-omNiKqwjNmOQJ2v6ge4SErBbkooV2aAWwaPFs2vUY7p7GhVkzRkJ00kILXQvRhA6miHnNpXv7MRnnSjdRjK8og==
+
 "@svgr/babel-plugin-svg-dynamic-title@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-5.4.0.tgz#139b546dd0c3186b6e5db4fefc26cb0baea729d7"
@@ -4617,6 +5580,11 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-dynamic-title/-/babel-plugin-svg-dynamic-title-6.5.1.tgz#01b2024a2b53ffaa5efceaa0bf3e1d5a4c520ce4"
   integrity sha512-FwOEi0Il72iAzlkaHrlemVurgSQRDFbk0OC8dSvD5fSBPHltNh7JtLsxmZUhjYBZo2PpcU/RJvvi6Q0l7O7ogw==
 
+"@svgr/babel-plugin-svg-em-dimensions@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-8.0.0.tgz#35e08df300ea8b1d41cb8f62309c241b0369e501"
+  integrity sha512-mURHYnu6Iw3UBTbhGwE/vsngtCIbHE43xCRK7kCw4t01xyGqb2Pd+WXekRRoFOBIY29ZoOhUCTEweDMdrjfi9g==
+
 "@svgr/babel-plugin-svg-em-dimensions@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-5.4.0.tgz#6543f69526632a133ce5cabab965deeaea2234a0"
@@ -4627,6 +5595,11 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-svg-em-dimensions/-/babel-plugin-svg-em-dimensions-6.5.1.tgz#dd3fa9f5b24eb4f93bcf121c3d40ff5facecb217"
   integrity sha512-gWGsiwjb4tw+ITOJ86ndY/DZZ6cuXMNE/SjcDRg+HLuCmwpcjOktwRF9WgAiycTqJD/QXqL2f8IzE2Rzh7aVXA==
 
+"@svgr/babel-plugin-transform-react-native-svg@8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-8.1.0.tgz#90a8b63998b688b284f255c6a5248abd5b28d754"
+  integrity sha512-Tx8T58CHo+7nwJ+EhUwx3LfdNSG9R2OKfaIXXs5soiy5HtgoAEkDay9LIimLOcG8dJQH1wPZp/cnAv6S9CrR1Q==
+
 "@svgr/babel-plugin-transform-react-native-svg@^5.4.0":
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-5.4.0.tgz#00bf9a7a73f1cad3948cdab1f8dfb774750f8c80"
@@ -4637,6 +5610,11 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-react-native-svg/-/babel-plugin-transform-react-native-svg-6.5.1.tgz#1d8e945a03df65b601551097d8f5e34351d3d305"
   integrity sha512-2jT3nTayyYP7kI6aGutkyfJ7UMGtuguD72OjeGLwVNyfPRBD8zQthlvL+fAbAKk5n9ZNcvFkp/b1lZ7VsYqVJg==
 
+"@svgr/babel-plugin-transform-svg-component@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-8.0.0.tgz#013b4bfca88779711f0ed2739f3f7efcefcf4f7e"
+  integrity sha512-DFx8xa3cZXTdb/k3kfPeaixecQLgKh5NVBMwD0AQxOzcZawK4oo1Jh9LbrcACUivsCA7TLG8eeWgrDXjTMhRmw==
+
 "@svgr/babel-plugin-transform-svg-component@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-5.5.0.tgz#583a5e2a193e214da2f3afeb0b9e8d3250126b4a"
@@ -4647,6 +5625,20 @@
   resolved "https://registry.yarnpkg.com/@svgr/babel-plugin-transform-svg-component/-/babel-plugin-transform-svg-component-6.5.1.tgz#48620b9e590e25ff95a80f811544218d27f8a250"
   integrity sha512-a1p6LF5Jt33O3rZoVRBqdxL350oge54iZWHNI6LJB5tQ7EelvD/Mb1mfBiZNAan0dt4i3VArkFRjA4iObuNykQ==
 
+"@svgr/babel-preset@8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-8.1.0.tgz#0e87119aecdf1c424840b9d4565b7137cabf9ece"
+  integrity sha512-7EYDbHE7MxHpv4sxvnVPngw5fuR6pw79SkcrILHJ/iMpuKySNCl5W1qcwPEpU+LgyRXOaAFgH0KhwD18wwg6ug==
+  dependencies:
+    "@svgr/babel-plugin-add-jsx-attribute" "8.0.0"
+    "@svgr/babel-plugin-remove-jsx-attribute" "8.0.0"
+    "@svgr/babel-plugin-remove-jsx-empty-expression" "8.0.0"
+    "@svgr/babel-plugin-replace-jsx-attribute-value" "8.0.0"
+    "@svgr/babel-plugin-svg-dynamic-title" "8.0.0"
+    "@svgr/babel-plugin-svg-em-dimensions" "8.0.0"
+    "@svgr/babel-plugin-transform-react-native-svg" "8.1.0"
+    "@svgr/babel-plugin-transform-svg-component" "8.0.0"
+
 "@svgr/babel-preset@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/babel-preset/-/babel-preset-5.5.0.tgz#8af54f3e0a8add7b1e2b0fcd5a882c55393df327"
@@ -4675,6 +5667,17 @@
     "@svgr/babel-plugin-transform-react-native-svg" "^6.5.1"
     "@svgr/babel-plugin-transform-svg-component" "^6.5.1"
 
+"@svgr/core@8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/core/-/core-8.1.0.tgz#41146f9b40b1a10beaf5cc4f361a16a3c1885e88"
+  integrity sha512-8QqtOQT5ACVlmsvKOJNEaWmRPmcojMOzCz4Hs2BGG/toAp/K38LcsMRyLp349glq5AzJbCEeimEoxaX6v/fLrA==
+  dependencies:
+    "@babel/core" "^7.21.3"
+    "@svgr/babel-preset" "8.1.0"
+    camelcase "^6.2.0"
+    cosmiconfig "^8.1.3"
+    snake-case "^3.0.4"
+
 "@svgr/core@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/core/-/core-5.5.0.tgz#82e826b8715d71083120fe8f2492ec7d7874a579"
@@ -4695,6 +5698,14 @@
     camelcase "^6.2.0"
     cosmiconfig "^7.0.1"
 
+"@svgr/hast-util-to-babel-ast@8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-8.0.0.tgz#6952fd9ce0f470e1aded293b792a2705faf4ffd4"
+  integrity sha512-EbDKwO9GpfWP4jN9sGdYwPBU0kdomaPIL2Eu4YwmgP+sJeXT+L7bMwJUBnhzfH8Q2qMBqZ4fJwpCyYsAN3mt2Q==
+  dependencies:
+    "@babel/types" "^7.21.3"
+    entities "^4.4.0"
+
 "@svgr/hast-util-to-babel-ast@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/hast-util-to-babel-ast/-/hast-util-to-babel-ast-5.5.0.tgz#5ee52a9c2533f73e63f8f22b779f93cd432a5461"
@@ -4710,6 +5721,16 @@
     "@babel/types" "^7.20.0"
     entities "^4.4.0"
 
+"@svgr/plugin-jsx@8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-8.1.0.tgz#96969f04a24b58b174ee4cd974c60475acbd6928"
+  integrity sha512-0xiIyBsLlr8quN+WyuxooNW9RJ0Dpr8uOnH/xrCVO8GLUcwHISwj1AG0k+LFzteTkAA0GbX0kj9q6Dk70PTiPA==
+  dependencies:
+    "@babel/core" "^7.21.3"
+    "@svgr/babel-preset" "8.1.0"
+    "@svgr/hast-util-to-babel-ast" "8.0.0"
+    svg-parser "^2.0.4"
+
 "@svgr/plugin-jsx@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-jsx/-/plugin-jsx-5.5.0.tgz#1aa8cd798a1db7173ac043466d7b52236b369000"
@@ -4730,6 +5751,15 @@
     "@svgr/hast-util-to-babel-ast" "^6.5.1"
     svg-parser "^2.0.4"
 
+"@svgr/plugin-svgo@8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-8.1.0.tgz#b115b7b967b564f89ac58feae89b88c3decd0f00"
+  integrity sha512-Ywtl837OGO9pTLIN/onoWLmDQ4zFUycI1g76vuKGEz6evR/ZTJlJuz3G/fIkb6OVBJ2g0o6CGJzaEjfmEo3AHA==
+  dependencies:
+    cosmiconfig "^8.1.3"
+    deepmerge "^4.3.1"
+    svgo "^3.0.2"
+
 "@svgr/plugin-svgo@^5.5.0":
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/@svgr/plugin-svgo/-/plugin-svgo-5.5.0.tgz#02da55d85320549324e201c7b2e53bf431fcc246"
@@ -4776,6 +5806,20 @@
     "@svgr/plugin-jsx" "^6.5.1"
     "@svgr/plugin-svgo" "^6.5.1"
 
+"@svgr/webpack@^8.1.0":
+  version "8.1.0"
+  resolved "https://registry.yarnpkg.com/@svgr/webpack/-/webpack-8.1.0.tgz#16f1b5346f102f89fda6ec7338b96a701d8be0c2"
+  integrity sha512-LnhVjMWyMQV9ZmeEy26maJk+8HTIbd59cH4F2MJ439k9DqejRisfFNGAPvRYlKETuh9LrImlS8aKsBgKjMA8WA==
+  dependencies:
+    "@babel/core" "^7.21.3"
+    "@babel/plugin-transform-react-constant-elements" "^7.21.3"
+    "@babel/preset-env" "^7.20.2"
+    "@babel/preset-react" "^7.18.6"
+    "@babel/preset-typescript" "^7.21.0"
+    "@svgr/core" "8.1.0"
+    "@svgr/plugin-jsx" "8.1.0"
+    "@svgr/plugin-svgo" "8.1.0"
+
 "@swc/core-darwin-arm64@1.4.13":
   version "1.4.13"
   resolved "https://registry.yarnpkg.com/@swc/core-darwin-arm64/-/core-darwin-arm64-1.4.13.tgz#9b1ff4477a9b9eb76275e1dd1af52fbe8d11a0d3"
@@ -5369,13 +6413,12 @@
     "@types/prop-types" "*"
     csstype "^3.0.2"
 
-"@types/react@^17.0.38":
-  version "17.0.80"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.80.tgz#a5dfc351d6a41257eb592d73d3a85d3b7dbcbb41"
-  integrity sha512-LrgHIu2lEtIo8M7d1FcI3BdwXWoRQwMoXOZ7+dPTW0lYREjmlHl3P0U1VD0i/9tppOuv8/sam7sOjx34TxSFbA==
+"@types/react@^18.3.3":
+  version "18.3.3"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-18.3.3.tgz#9679020895318b0915d7a3ab004d92d33375c45f"
+  integrity sha512-hti/R0pS0q1/xx+TsI73XIqk26eBsISZ2R0wUijXIngRK9R/e7Xw/cXVxQK7R5JjW+SV4zGcn5hXjudkN/pLIw==
   dependencies:
     "@types/prop-types" "*"
-    "@types/scheduler" "^0.16"
     csstype "^3.0.2"
 
 "@types/resolve@1.17.1":
@@ -5402,11 +6445,6 @@
   dependencies:
     "@types/node" "*"
 
-"@types/scheduler@^0.16":
-  version "0.16.8"
-  resolved "https://registry.yarnpkg.com/@types/scheduler/-/scheduler-0.16.8.tgz#ce5ace04cfeabe7ef87c0091e50752e36707deff"
-  integrity sha512-WZLiwShhwLRmeV6zH+GkbOFT6Z6VklCItrDioxUnv+u4Ll+8vKeFySoFyK/0ctcRpOmwAicELfmys1sDc/Rw+A==
-
 "@types/semver@^7.3.4", "@types/semver@^7.5.0":
   version "7.5.8"
   resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.5.8.tgz#8268a8c57a3e4abd25c165ecd36237db7948a55e"
@@ -6651,17 +7689,6 @@ babel-plugin-extract-import-names@1.6.22:
   dependencies:
     "@babel/helper-plugin-utils" "7.10.4"
 
-babel-plugin-inline-react-svg@^2.0.1, babel-plugin-inline-react-svg@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/babel-plugin-inline-react-svg/-/babel-plugin-inline-react-svg-2.0.2.tgz#3a7bc4dc791c2d809a54d43f1a5ac53f3be8acb9"
-  integrity sha512-iM9obPpCcdPE1EJE+UF+tni7CZ4q/OvdDm/TeBBHAYAEOqDcFd7fdnmym6OYAQMYfEpUnRYUYx2KxSUyo4cQxQ==
-  dependencies:
-    "@babel/helper-plugin-utils" "^7.0.0"
-    "@babel/parser" "^7.0.0"
-    lodash.isplainobject "^4.0.6"
-    resolve "^2.0.0-next.4"
-    svgo "^2.8.0"
-
 babel-plugin-istanbul@^6.1.1:
   version "6.1.1"
   resolved "https://registry.yarnpkg.com/babel-plugin-istanbul/-/babel-plugin-istanbul-6.1.1.tgz#fa88ec59232fd9b4e36dbbc540a8ec9a9b47da73"
@@ -7465,6 +8492,13 @@ cjs-module-lexer@^1.0.0, cjs-module-lexer@^1.2.3:
   resolved "https://registry.yarnpkg.com/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz#6c370ab19f8a3394e318fe682686ec0ac684d107"
   integrity sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==
 
+class-variance-authority@^0.7.0:
+  version "0.7.0"
+  resolved "https://registry.yarnpkg.com/class-variance-authority/-/class-variance-authority-0.7.0.tgz#1c3134d634d80271b1837452b06d821915954522"
+  integrity sha512-jFI8IQw4hczaL4ALINxqLEXQbWcNjoSkloa4IaufXCJr6QawJyw7tuRysRsrE8w2p/4gGaxKIt/hX3qz/IbD1A==
+  dependencies:
+    clsx "2.0.0"
+
 classnames@^2.2.5, classnames@^2.3.2:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.5.1.tgz#ba774c614be0f016da105c858e7159eae8e7687b"
@@ -7607,16 +8641,34 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==
 
+clsx@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.0.0.tgz#12658f3fd98fafe62075595a5c30e43d18f3d00b"
+  integrity sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==
+
 clsx@^1.1.1, clsx@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12"
   integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==
 
+clsx@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/clsx/-/clsx-2.1.1.tgz#eed397c9fd8bd882bfb18deab7102049a2f32999"
+  integrity sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==
+
 cmd-shim@6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/cmd-shim/-/cmd-shim-6.0.1.tgz#a65878080548e1dca760b3aea1e21ed05194da9d"
   integrity sha512-S9iI9y0nKR4hwEQsVWpyxld/6kRfGepGfzff83FcaiEBpmvlbA2nnGe7Cylgrx2f/p1P5S5wpRm9oL8z1PbS3Q==
 
+cmdk@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/cmdk/-/cmdk-1.0.0.tgz#0a095fdafca3dfabed82d1db78a6262fb163ded9"
+  integrity sha512-gDzVf0a09TvoJ5jnuPvygTB77+XdOSwEmJ88L6XPFPlv7T3RxbP9jgenfylrAMD0+Le1aO0nVjQUzl2g+vjz5Q==
+  dependencies:
+    "@radix-ui/react-dialog" "1.0.5"
+    "@radix-ui/react-primitive" "1.0.3"
+
 co@^4.6.0:
   version "4.6.0"
   resolved "https://registry.yarnpkg.com/co/-/co-4.6.0.tgz#6ea6bdf3d853ae54ccb8e47bfa0bf3f9031fb184"
@@ -8106,7 +9158,7 @@ cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
-cosmiconfig@^8.2.0, cosmiconfig@^8.3.5:
+cosmiconfig@^8.1.3, cosmiconfig@^8.2.0, cosmiconfig@^8.3.5:
   version "8.3.6"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.3.6.tgz#060a2b871d66dba6c8538ea1118ba1ac16f5fae3"
   integrity sha512-kcZ6+W5QzcJ3P1Mt+83OUv/oHFqZHIx8DuxG6eZ5RGMERoLqp4BuGjhHLYGK+Kf5XVkQvqBSmAy/nGWN3qDgEA==
@@ -8298,6 +9350,22 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
+css-tree@^2.3.1:
+  version "2.3.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.3.1.tgz#10264ce1e5442e8572fc82fbe490644ff54b5c20"
+  integrity sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==
+  dependencies:
+    mdn-data "2.0.30"
+    source-map-js "^1.0.1"
+
+css-tree@~2.2.0:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-2.2.1.tgz#36115d382d60afd271e377f9c5f67d02bd48c032"
+  integrity sha512-OA0mILzGc1kCOCSJerOeqDxDQ4HOh+G8NbOJFOTgOCzpw7fCBubk0fEyxp8AgOL/jvLgYA/uV0cMbe43ElF1JA==
+  dependencies:
+    mdn-data "2.0.28"
+    source-map-js "^1.0.1"
+
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -8396,6 +9464,13 @@ csso@^4.0.2, csso@^4.2.0:
   dependencies:
     css-tree "^1.1.2"
 
+csso@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/csso/-/csso-5.0.5.tgz#f9b7fe6cc6ac0b7d90781bb16d5e9874303e2ca6"
+  integrity sha512-0LrrStPOdJj+SPCCrGhzryycLjwcgUSHBtxNA8aIDxf0GLsRh1cKYhB00Gd1lDOS4yGH69+SNn13+TWbVHETFQ==
+  dependencies:
+    css-tree "~2.2.0"
+
 cssom@^0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cssom/-/cssom-0.5.0.tgz#d254fa92cd8b6fbd83811b9fbaed34663cc17c36"
@@ -8658,6 +9733,11 @@ date-fns@^1.27.2:
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-1.30.1.tgz#2e71bf0b119153dbb4cc4e88d9ea5acfb50dc05c"
   integrity sha512-hBSVCvSmWC+QypYObzwGOd9wqdDpOt+0wl0KbU+R+uuZBS1jN8VsD1ss3irQDknRj5NvxiTF6oj/nDRnN/UQNw==
 
+date-fns@^3.6.0:
+  version "3.6.0"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-3.6.0.tgz#f20ca4fe94f8b754951b24240676e8618c0206bf"
+  integrity sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==
+
 dateformat@^3.0.3:
   version "3.0.3"
   resolved "https://registry.yarnpkg.com/dateformat/-/dateformat-3.0.3.tgz#a6e37499a4d9a9cf85ef5872044d62901c9889ae"
@@ -8797,7 +9877,7 @@ deepmerge@^1.5.2:
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-1.5.2.tgz#10499d868844cdad4fee0842df8c7f6f0c95a753"
   integrity sha512-95k0GDqvBjZavkuvzx/YqVLv/6YYa17fz6ILMSf7neqQITCPbnfEnQvEgMPNjH4kgobe7+WIL0yJEHku+H3qtQ==
 
-deepmerge@^4.2.2:
+deepmerge@^4.2.2, deepmerge@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.3.1.tgz#44b5f2147cd3b00d4b56137685966f26fd25dd4a"
   integrity sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==
@@ -10912,6 +11992,26 @@ fraction.js@^4.3.7:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.3.7.tgz#06ca0085157e42fda7f9e726e79fefc4068840f7"
   integrity sha512-ZsDfxO51wGAXREY55a7la9LScWpwv9RxIrYABrlvOFBlH/ShPnrtsXeuUIfXKKOVicNxQ+o8JTbJvjS4M89yew==
 
+framer-motion@6.2.4:
+  version "6.2.4"
+  resolved "https://registry.yarnpkg.com/framer-motion/-/framer-motion-6.2.4.tgz#3d9c61be3fb8381a770efccdb56cc421de662979"
+  integrity sha512-1UfnSG4c4CefKft6QMYGx8AWt3TtaFoR/Ax4dkuDDD5BDDeIuUm7gesmJrF8GzxeX/i6fMm8+MEdPngUyPVdLA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    popmotion "11.0.3"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+  optionalDependencies:
+    "@emotion/is-prop-valid" "^0.8.2"
+
+framesync@6.0.1:
+  version "6.0.1"
+  resolved "https://registry.yarnpkg.com/framesync/-/framesync-6.0.1.tgz#5e32fc01f1c42b39c654c35b16440e07a25d6f20"
+  integrity sha512-fUY88kXvGiIItgNC7wcTOl0SNRCVXMKSWW2Yzfmn7EKNc+MpCzcz9DhdHcdjbrtN3c6R4H5dTY2jiCpPdysEjA==
+  dependencies:
+    tslib "^2.1.0"
+
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
@@ -11672,6 +12772,11 @@ he@^1.2.0:
   resolved "https://registry.yarnpkg.com/he/-/he-1.2.0.tgz#84ae65fa7eafb165fddb61566ae14baf05664f0f"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hey-listen@^1.0.8:
+  version "1.0.8"
+  resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68"
+  integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q==
+
 history@^4.9.0:
   version "4.10.1"
   resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3"
@@ -14012,11 +15117,6 @@ lodash.ismatch@^4.4.0:
   resolved "https://registry.yarnpkg.com/lodash.ismatch/-/lodash.ismatch-4.4.0.tgz#756cb5150ca3ba6f11085a78849645f188f85f37"
   integrity sha512-fPMfXjGQEV9Xsq/8MTSgUf255gawYRbjwMyDbcvDhXgV7enSZA0hynz6vMPnpAb5iONEzBHBPsT+0zes5Z301g==
 
-lodash.isplainobject@^4.0.6:
-  version "4.0.6"
-  resolved "https://registry.yarnpkg.com/lodash.isplainobject/-/lodash.isplainobject-4.0.6.tgz#7c526a52d89b45c45cc690b88163be0497f550cb"
-  integrity sha512-oSXzaWypCMHkPC3NvBEaPHf0KsA5mvPrOPgQWDsbg8n7orZ290M0BmC/jgRZ4vcJ6DTAhjrsSYgdsW/F+MFOBA==
-
 lodash.memoize@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe"
@@ -14154,6 +15254,11 @@ lru-cache@^7.4.4, lru-cache@^7.5.1, lru-cache@^7.7.1:
   resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.18.3.tgz#f793896e0fd0e954a59dfdd82f0773808df6aa89"
   integrity sha512-jumlc0BIUrS3qJGgIkWZsyfAM7NCWiBcCDhnd+3NNM5KbBmLTgHVfWBcg6W+rLUsIpzpERPsvwUP7CckAQSOoA==
 
+lucide-react@^0.379.0:
+  version "0.379.0"
+  resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.379.0.tgz#29e34eeffae7fb241b64b09868cbe3ab888ef7cc"
+  integrity sha512-KcdeVPqmhRldldAAgptb8FjIunM2x2Zy26ZBh1RsEUcdLIvsEmbcw7KpzFYUy5BbpGeWhPu9Z9J5YXfStiXwhg==
+
 magic-string@^0.25.0, magic-string@^0.25.1, magic-string@^0.25.2, magic-string@^0.25.7:
   version "0.25.9"
   resolved "https://registry.yarnpkg.com/magic-string/-/magic-string-0.25.9.tgz#de7f9faf91ef8a1c91d02c2e5314c8277dbcdd1c"
@@ -14458,6 +15563,16 @@ mdn-data@2.0.14:
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.14.tgz#7113fc4281917d63ce29b43446f701e68c25ba50"
   integrity sha512-dn6wd0uw5GsdswPFfsgMp5NSB0/aDe6fK94YJV/AJDYXL6HVLWBsxeq7js7Ad+mU2K9LAlwpk6kN2D5mwCPVow==
 
+mdn-data@2.0.28:
+  version "2.0.28"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.28.tgz#5ec48e7bef120654539069e1ae4ddc81ca490eba"
+  integrity sha512-aylIc7Z9y4yzHYAJNuESG3hfhC+0Ibp/MAMiaOZgNv4pmEdFyfZhhhny4MNiAfWdBQ1RQ2mfDWmM1x8SvGyp8g==
+
+mdn-data@2.0.30:
+  version "2.0.30"
+  resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.30.tgz#ce4df6f80af6cfbe218ecd5c552ba13c4dfa08cc"
+  integrity sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==
+
 mdn-data@2.0.4:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/mdn-data/-/mdn-data-2.0.4.tgz#699b3c38ac6f1d728091a64650b65d388502fd5b"
@@ -15207,6 +16322,11 @@ neo-async@^2.5.0, neo-async@^2.6.2:
   resolved "https://registry.yarnpkg.com/neo-async/-/neo-async-2.6.2.tgz#b4aafb93e3aeb2d8174ca53cf163ab7d7308305f"
   integrity sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==
 
+next-themes@^0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/next-themes/-/next-themes-0.3.0.tgz#b4d2a866137a67d42564b07f3a3e720e2ff3871a"
+  integrity sha512-/QHIrsYpd6Kfk7xakK4svpDI5mmXP0gfvCoJdGpZQ2TOrQZmsW0QxjaiLn8wbIKjtm4BTSqLoix4lxYYOnLJ/w==
+
 nice-try@^1.0.4:
   version "1.0.5"
   resolved "https://registry.yarnpkg.com/nice-try/-/nice-try-1.0.5.tgz#a3378a7696ce7d223e88fc9b764bd7ef1089e366"
@@ -16475,6 +17595,16 @@ polished@^4.2.2:
   dependencies:
     "@babel/runtime" "^7.17.8"
 
+popmotion@11.0.3:
+  version "11.0.3"
+  resolved "https://registry.yarnpkg.com/popmotion/-/popmotion-11.0.3.tgz#565c5f6590bbcddab7a33a074bb2ba97e24b0cc9"
+  integrity sha512-Y55FLdj3UxkR7Vl3s7Qr4e9m0onSnP8W7d/xQLsoJM40vs6UKHFdygs6SWryasTZYqugMjm3BepCF4CWXDiHgA==
+  dependencies:
+    framesync "6.0.1"
+    hey-listen "^1.0.8"
+    style-value-types "5.0.0"
+    tslib "^2.1.0"
+
 portfinder@^1.0.28:
   version "1.0.32"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.32.tgz#2fe1b9e58389712429dc2bea5beb2146146c7f81"
@@ -17567,6 +18697,11 @@ react-dates@^21.8.0:
     react-with-styles "^4.1.0"
     react-with-styles-interface-css "^6.0.0"
 
+react-day-picker@^8.10.1:
+  version "8.10.1"
+  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-8.10.1.tgz#4762ec298865919b93ec09ba69621580835b8e80"
+  integrity sha512-TMx7fNbhLk15eqcMt+7Z7S2KF7mfTId/XJDjKE8f+IUcFn0l08/kI4FiYTL/0yuOLmEcbR4Fwe3GJf/NiiMnPA==
+
 react-dev-utils@^12.0.1:
   version "12.0.1"
   resolved "https://registry.yarnpkg.com/react-dev-utils/-/react-dev-utils-12.0.1.tgz#ba92edb4a1f379bd46ccd6bcd4e7bc398df33e73"
@@ -17636,14 +18771,13 @@ react-docgen@^7.0.0:
     resolve "^1.22.1"
     strip-indent "^4.0.0"
 
-react-dom@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
-  integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
+react-dom@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
+  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
-    scheduler "^0.20.2"
+    scheduler "^0.23.2"
 
 react-draggable@4.4.3:
   version "4.4.3"
@@ -17785,14 +18919,6 @@ react-loadable-ssr-addon-v5-slorber@^1.0.1:
   dependencies:
     "@babel/runtime" "^7.10.3"
 
-"react-loadable@npm:@docusaurus/react-loadable@5.5.2":
-  version "5.5.2"
-  resolved "https://registry.yarnpkg.com/@docusaurus/react-loadable/-/react-loadable-5.5.2.tgz#81aae0db81ecafbdaee3651f12804580868fa6ce"
-  integrity sha512-A3dYjdBGuy0IGT+wyLIGIKLRE+sAk1iNk0f1HjNDysO7u8lhL4N3VEm+FAubmJbAztn94F7MxBTPmnixbiyFdQ==
-  dependencies:
-    "@types/react" "*"
-    prop-types "^15.6.2"
-
 react-modal@3.11.2:
   version "3.11.2"
   resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.11.2.tgz#bad911976d4add31aa30dba8a41d11e21c4ac8a4"
@@ -17852,10 +18978,10 @@ react-remove-scroll@2.5.5:
     use-callback-ref "^1.3.0"
     use-sidecar "^1.1.2"
 
-react-resize-detector@^9.1.0:
-  version "9.1.1"
-  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-9.1.1.tgz#ce13cf55b9b09d9978fc51e0c87bb3639704921e"
-  integrity sha512-siLzop7i4xIvZIACE/PHTvRegA8QRCEt0TfmvJ/qCIFQJ4U+3NuYcF8tNDmDWxfIn+X1eNCyY2rauH4KRxge8w==
+react-resize-detector@^10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/react-resize-detector/-/react-resize-detector-10.0.1.tgz#ae9a8c5b6b93c4c11e03b3eb87e57fd7b62f1020"
+  integrity sha512-CR2EdP83ycGlWkhhrd6+hhZVhPJO4xnzClFCTBXlODVTHOgiDJQu77sBt67J7P3gfU4ec/kOuf2c5EcyTUNLXQ==
   dependencies:
     lodash "^4.17.21"
 
@@ -18018,13 +19144,12 @@ react-with-styles@^4.1.0:
     prop-types "^15.7.2"
     react-with-direction "^1.3.1"
 
-react@^17.0.2:
-  version "17.0.2"
-  resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
-  integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
+react@^18.3.1:
+  version "18.3.1"
+  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
+  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 reactcss@^1.2.0:
   version "1.2.3"
@@ -18535,7 +19660,7 @@ resolve@^1.1.6, resolve@^1.1.7, resolve@^1.10.0, resolve@^1.10.1, resolve@^1.12.
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-resolve@^2.0.0-next.4, resolve@^2.0.0-next.5:
+resolve@^2.0.0-next.5:
   version "2.0.0-next.5"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-2.0.0-next.5.tgz#6b0ec3107e671e52b68cd068ef327173b90dc03c"
   integrity sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==
@@ -18757,13 +19882,12 @@ scheduler@^0.19.1:
     loose-envify "^1.1.0"
     object-assign "^4.1.1"
 
-scheduler@^0.20.2:
-  version "0.20.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.20.2.tgz#4baee39436e34aa93b4874bddcbf0fe8b8b50e91"
-  integrity sha512-2eWfGgAqqWFGqtdMmcL5zCMK1U8KlXv8SQFGglL3CEtd0aDVDWgeF/YoCmvln55m5zSk3J/20hTaSBeSObsQDQ==
+scheduler@^0.23.2:
+  version "0.23.2"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
+  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
   dependencies:
     loose-envify "^1.1.0"
-    object-assign "^4.1.1"
 
 schema-utils@2.7.0:
   version "2.7.0"
@@ -19204,6 +20328,14 @@ smart-buffer@^4.2.0:
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.2.0.tgz#6e1d71fa4f18c05f7d0ff216dd16a481d0e8d9ae"
   integrity sha512-94hK0Hh8rPqQl2xXc3HsaBoOXKV20MToPkcXvwbISWLEs+64sBq5kFgn2kJDHb1Pry9yrP0dxrCI9RRci7RXKg==
 
+snake-case@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/snake-case/-/snake-case-3.0.4.tgz#4f2bbd568e9935abdfd593f34c691dadb49c452c"
+  integrity sha512-LAOh4z89bGQvl9pFfNF8V146i7o7/CqFPbqzYgP+yYzDIDeS9HaNFtXABamRW+AQzEVODcvE79ljJ+8a9YSdMg==
+  dependencies:
+    dot-case "^3.0.4"
+    tslib "^2.0.3"
+
 sockjs@^0.3.21, sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -19230,6 +20362,11 @@ socks@^2.6.2:
     ip-address "^9.0.5"
     smart-buffer "^4.2.0"
 
+sonner@^1.4.41:
+  version "1.4.41"
+  resolved "https://registry.yarnpkg.com/sonner/-/sonner-1.4.41.tgz#ff085ae4f4244713daf294959beaa3e90f842d2c"
+  integrity sha512-uG511ggnnsw6gcn/X+YKkWPo5ep9il9wYi3QJxHsYe7yTZ4+cOd1wuodOUmOpFuXL+/RE3R04LczdNCDygTDgQ==
+
 sort-asc@^0.1.0:
   version "0.1.0"
   resolved "https://registry.yarnpkg.com/sort-asc/-/sort-asc-0.1.0.tgz#ab799df61fc73ea0956c79c4b531ed1e9e7727e9"
@@ -19272,7 +20409,7 @@ source-list-map@^2.0.0:
   resolved "https://registry.yarnpkg.com/source-list-map/-/source-list-map-2.0.1.tgz#3993bd873bfc48479cca9ea3a547835c7c154b34"
   integrity sha512-qnQ7gVMxGNxsiL4lEuJwe/To8UnK7fAnmbGEEH8RpLouuKbeEm0lhbQVFIrNSuB+G7tVrAlVsZgETT5nljf+Iw==
 
-source-map-js@^1.0.2, source-map-js@^1.2.0:
+source-map-js@^1.0.1, source-map-js@^1.0.2, source-map-js@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.2.0.tgz#16b809c162517b5b8c3e7dcd315a2a5c2612b2af"
   integrity sha512-itJW8lvSA0TXEphiRoawsCksnlf8SyvmFzIhltqAHluXd88pkCd+cXJVHTDwdCr0IzwptSm035IHQktUu1QUMg==
@@ -19583,7 +20720,7 @@ string-natural-compare@^3.0.1:
   resolved "https://registry.yarnpkg.com/string-natural-compare/-/string-natural-compare-3.0.1.tgz#7a42d58474454963759e8e8b7ae63d71c1e7fdf4"
   integrity sha512-n3sPwynL1nwKi3WJ6AIsClwBMa0zTi54fn2oLU6ndfTSIO05xaznjSf15PcBZU6FNWbmN5Q6cxT4V5hGvB4taw==
 
-"string-width-cjs@npm:string-width@^4.2.0":
+"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
   version "4.2.3"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
   integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -19601,15 +20738,6 @@ string-width@^1.0.1:
     is-fullwidth-code-point "^1.0.0"
     strip-ansi "^3.0.0"
 
-"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.yarnpkg.com/string-width/-/string-width-4.2.3.tgz#269c7117d27b05ad2e536830a8ec895ef9c6d010"
-  integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
-  dependencies:
-    emoji-regex "^8.0.0"
-    is-fullwidth-code-point "^3.0.0"
-    strip-ansi "^6.0.1"
-
 string-width@^2.1.0, string-width@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/string-width/-/string-width-2.1.1.tgz#ab93f27a8dc13d28cac815c462143a6d9012ae9e"
@@ -19705,7 +20833,7 @@ stringify-object@^3.3.0:
     is-obj "^1.0.1"
     is-regexp "^1.0.0"
 
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
   version "6.0.1"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
   integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -19733,13 +20861,6 @@ strip-ansi@^5.1.0:
   dependencies:
     ansi-regex "^4.1.0"
 
-strip-ansi@^6.0.0, strip-ansi@^6.0.1:
-  version "6.0.1"
-  resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-6.0.1.tgz#9e26c63d30f53443e9489495b2105d37b67a85d9"
-  integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
-  dependencies:
-    ansi-regex "^5.0.1"
-
 strip-ansi@^7.0.0, strip-ansi@^7.0.1:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/strip-ansi/-/strip-ansi-7.1.0.tgz#d5b6568ca689d8561370b0707685d22434faff45"
@@ -19835,6 +20956,14 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
+style-value-types@5.0.0:
+  version "5.0.0"
+  resolved "https://registry.yarnpkg.com/style-value-types/-/style-value-types-5.0.0.tgz#76c35f0e579843d523187989da866729411fc8ad"
+  integrity sha512-08yq36Ikn4kx4YU6RD7jWEv27v4V+PUsOGa4n/as8Et3CuODMJQ00ENeAVXAeydX4Z2j1XHZF1K2sX4mGl18fA==
+  dependencies:
+    hey-listen "^1.0.8"
+    tslib "^2.1.0"
+
 stylehacks@^5.1.1:
   version "5.1.1"
   resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-5.1.1.tgz#7934a34eb59d7152149fa69d6e9e56f2fc34bcc9"
@@ -19935,6 +21064,19 @@ svgo@^2.7.0, svgo@^2.8.0:
     picocolors "^1.0.0"
     stable "^0.1.8"
 
+svgo@^3.0.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/svgo/-/svgo-3.3.2.tgz#ad58002652dffbb5986fc9716afe52d869ecbda8"
+  integrity sha512-OoohrmuUlBs8B8o6MB2Aevn+pRIH9zDALSR+6hhqVfa6fRwG/Qw9VUMSMW9VNg2CFc/MTIfabtdOVl9ODIJjpw==
+  dependencies:
+    "@trysound/sax" "0.2.0"
+    commander "^7.2.0"
+    css-select "^5.1.0"
+    css-tree "^2.3.1"
+    css-what "^6.1.0"
+    csso "^5.0.5"
+    picocolors "^1.0.0"
+
 swc-loader@^0.2.3:
   version "0.2.6"
   resolved "https://registry.yarnpkg.com/swc-loader/-/swc-loader-0.2.6.tgz#bf0cba8eeff34bb19620ead81d1277fefaec6bc8"
@@ -19994,6 +21136,18 @@ table@^6.0.9:
     string-width "^4.2.3"
     strip-ansi "^6.0.1"
 
+tailwind-merge@^2.3.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/tailwind-merge/-/tailwind-merge-2.3.0.tgz#27d2134fd00a1f77eca22bcaafdd67055917d286"
+  integrity sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==
+  dependencies:
+    "@babel/runtime" "^7.24.1"
+
+tailwindcss-animate@^1.0.7:
+  version "1.0.7"
+  resolved "https://registry.yarnpkg.com/tailwindcss-animate/-/tailwindcss-animate-1.0.7.tgz#318b692c4c42676cc9e67b19b78775742388bef4"
+  integrity sha512-bl6mpH3T7I3UFxuvDEXLxy/VuFxBk5bbzplh7tXI68mwMokNYd1t9qPBHlnyTwfa4JGC4zP516I1hYYtQ/vspA==
+
 tailwindcss@3.2.4:
   version "3.2.4"
   resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.2.4.tgz#afe3477e7a19f3ceafb48e4b083e292ce0dc0250"
@@ -21783,7 +22937,7 @@ worker-loader@3.0.8, worker-loader@^3.0.8:
     loader-utils "^2.0.0"
     schema-utils "^3.0.0"
 
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
   version "7.0.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
   integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -21809,15 +22963,6 @@ wrap-ansi@^6.0.1, wrap-ansi@^6.2.0:
     string-width "^4.1.0"
     strip-ansi "^6.0.0"
 
-wrap-ansi@^7.0.0:
-  version "7.0.0"
-  resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz#67e145cff510a6a6984bdf1152911d69d2eb9e43"
-  integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
-  dependencies:
-    ansi-styles "^4.0.0"
-    string-width "^4.1.0"
-    strip-ansi "^6.0.0"
-
 wrap-ansi@^8.0.1, wrap-ansi@^8.1.0:
   version "8.1.0"
   resolved "https://registry.yarnpkg.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz#56dc22368ee570face1b49819975d9b9a5ead214"