diff --git a/app/javascript/components/AeInlineMethod/FilterNamespace.jsx b/app/javascript/components/AeInlineMethod/FilterNamespace.jsx
index 70fb145ae9c..e1e8faf39d0 100644
--- a/app/javascript/components/AeInlineMethod/FilterNamespace.jsx
+++ b/app/javascript/components/AeInlineMethod/FilterNamespace.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Select, SelectItem, Search,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import { noSelect } from './helper';
 
 const FilterNamespace = ({ domains, onSearch }) => {
diff --git a/app/javascript/components/AeInlineMethod/NamespaceSelector.jsx b/app/javascript/components/AeInlineMethod/NamespaceSelector.jsx
index 72795668667..a2115f84897 100644
--- a/app/javascript/components/AeInlineMethod/NamespaceSelector.jsx
+++ b/app/javascript/components/AeInlineMethod/NamespaceSelector.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useMemo, useCallback } from 'react';
 import PropTypes from 'prop-types';
 import { useQuery } from 'react-query';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import { debounce } from 'lodash';
 import FilterNamespace from './FilterNamespace';
 import MiqDataTable from '../miq-data-table';
diff --git a/app/javascript/components/AeInlineMethod/index.jsx b/app/javascript/components/AeInlineMethod/index.jsx
index 6213ea7473e..1a56d5af338 100644
--- a/app/javascript/components/AeInlineMethod/index.jsx
+++ b/app/javascript/components/AeInlineMethod/index.jsx
@@ -3,7 +3,7 @@ import { QueryClient, QueryClientProvider } from 'react-query';
 import PropTypes from 'prop-types';
 import {
   Modal, Button, ModalBody, Accordion, AccordionItem,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import { AddAlt16 } from '@carbon/icons-react';
 import NotificationMessage from '../notification-message';
 import MiqDataTable from '../miq-data-table';
diff --git a/app/javascript/components/AutomationSimulation/index.jsx b/app/javascript/components/AutomationSimulation/index.jsx
index d910d0098c2..48443625405 100644
--- a/app/javascript/components/AutomationSimulation/index.jsx
+++ b/app/javascript/components/AutomationSimulation/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Tabs, Tab } from 'carbon-components-react';
+import { Tabs, Tab } from "@carbon/react";
 import NotificationMessage from '../notification-message';
 import MiqStructuredList from '../miq-structured-list';
 
diff --git a/app/javascript/components/ansible-playbook-edit-catalog-form/helper.js b/app/javascript/components/ansible-playbook-edit-catalog-form/helper.js
index a7c2daf279f..aee813c2808 100644
--- a/app/javascript/components/ansible-playbook-edit-catalog-form/helper.js
+++ b/app/javascript/components/ansible-playbook-edit-catalog-form/helper.js
@@ -1,6 +1,6 @@
 import { useFieldApi, useFormApi } from '@@ddf';
 import React from 'react';
-import { Button, Checkbox } from 'carbon-components-react';
+import { Button, Checkbox } from "@carbon/react";
 import PropTypes from 'prop-types';
 import { TreeViewRedux } from '../tree-view';
 
diff --git a/app/javascript/components/ansible-playbook-workflow/index.jsx b/app/javascript/components/ansible-playbook-workflow/index.jsx
index 8ab0af7c461..32678992265 100644
--- a/app/javascript/components/ansible-playbook-workflow/index.jsx
+++ b/app/javascript/components/ansible-playbook-workflow/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Controlled as CodeMirror } from 'react-codemirror2';
-import { Tabs, Tab } from 'carbon-components-react';
+import { Tabs, Tab } from "@carbon/react";
 import NotificationMessage from '../notification-message';
 
 /** The AnsiblePlaybookWorkflow is used to render the payload received from the  Ansible Playbook's show page */
diff --git a/app/javascript/components/ansible-repository-form/index.jsx b/app/javascript/components/ansible-repository-form/index.jsx
index 6ab4d3bc975..39401acdee1 100644
--- a/app/javascript/components/ansible-repository-form/index.jsx
+++ b/app/javascript/components/ansible-repository-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import createSchema from './ansible-repository-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/async-action-button.jsx b/app/javascript/components/async-action-button.jsx
index 3089495c7a5..09a29d2b2a7 100644
--- a/app/javascript/components/async-action-button.jsx
+++ b/app/javascript/components/async-action-button.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   isEqual, flatMap, get, set,
 } from 'lodash';
-import { Button, InlineLoading } from 'carbon-components-react';
+import { Button, InlineLoading } from "@carbon/react";
 
 import {
   useFormApi, useFieldApi, validatorTypes, FormSpy,
diff --git a/app/javascript/components/async-credentials/async-credentials.jsx b/app/javascript/components/async-credentials/async-credentials.jsx
index aa88dd42ff3..a38256c5b27 100644
--- a/app/javascript/components/async-credentials/async-credentials.jsx
+++ b/app/javascript/components/async-credentials/async-credentials.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import {
   isEqual, flatMap, get, set,
 } from 'lodash';
-import { Button, InlineLoading } from 'carbon-components-react';
+import { Button, InlineLoading } from "@carbon/react";
 
 import {
   useFormApi, useFieldApi, validatorTypes, FormSpy,
diff --git a/app/javascript/components/async-credentials/edit-password-field.jsx b/app/javascript/components/async-credentials/edit-password-field.jsx
index 355f63521dc..98ac1a82b38 100644
--- a/app/javascript/components/async-credentials/edit-password-field.jsx
+++ b/app/javascript/components/async-credentials/edit-password-field.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   FormGroup, TextInput, TextArea, Button,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import { prepareProps } from '@data-driven-forms/carbon-component-mapper';
 import { EditOff16 } from '@carbon/icons-react';
 
diff --git a/app/javascript/components/async-credentials/password-field.jsx b/app/javascript/components/async-credentials/password-field.jsx
index 9e9cdc4efc5..901d5119744 100644
--- a/app/javascript/components/async-credentials/password-field.jsx
+++ b/app/javascript/components/async-credentials/password-field.jsx
@@ -1,6 +1,6 @@
 import React, { useState, Fragment } from 'react';
 import PropTypes from 'prop-types';
-import { FormGroup, TextInput, Button } from 'carbon-components-react';
+import { FormGroup, TextInput, Button } from "@carbon/react";
 import { Edit16 } from '@carbon/icons-react';
 
 import { componentTypes, useFormApi } from '@@ddf';
@@ -25,7 +25,7 @@ const PasswordField = ({
     helperText,
     ...rest,
     component: edit ? 'edit-password-field' : componentClass,
-    ...(edit) && { componentClass },
+    ...(edit && { componentClass }),
   };
 
   const newProps = { ...secretField };
diff --git a/app/javascript/components/automate-entry-points/index.jsx b/app/javascript/components/automate-entry-points/index.jsx
index e5e5f805152..a0f5b715959 100644
--- a/app/javascript/components/automate-entry-points/index.jsx
+++ b/app/javascript/components/automate-entry-points/index.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import {
   Checkbox, Loading, Modal, ModalBody,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import PropTypes from 'prop-types';
 import {
   Document16,
diff --git a/app/javascript/components/automate-simulation-form/index.jsx b/app/javascript/components/automate-simulation-form/index.jsx
index 9f37581044c..df0a34c0e06 100644
--- a/app/javascript/components/automate-simulation-form/index.jsx
+++ b/app/javascript/components/automate-simulation-form/index.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import MiqFormRenderer, { useFormApi } from '@@ddf';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
 import PropTypes from 'prop-types';
-import { Loading, Button } from 'carbon-components-react';
+import { Loading, Button } from "@carbon/react";
 import createSchema from './automate-simulation-form.schema';
 import AutomationSimulation from '../AutomationSimulation';
 
diff --git a/app/javascript/components/breadcrumbs/breadcrumbs.jsx b/app/javascript/components/breadcrumbs/breadcrumbs.jsx
index 49b203fba17..9baecedb69b 100644
--- a/app/javascript/components/breadcrumbs/breadcrumbs.jsx
+++ b/app/javascript/components/breadcrumbs/breadcrumbs.jsx
@@ -2,7 +2,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Breadcrumb, BreadcrumbItem } from 'carbon-components-react';
+import { Breadcrumb, BreadcrumbItem } from "@carbon/react";
 import { unescape } from 'lodash';
 import { onClickTree, onClick, onClickToExplorer } from './on-click-functions';
 
diff --git a/app/javascript/components/breadcrumbs/notifications-toggle.jsx b/app/javascript/components/breadcrumbs/notifications-toggle.jsx
index 4e6655a3bbc..f705c41047d 100644
--- a/app/javascript/components/breadcrumbs/notifications-toggle.jsx
+++ b/app/javascript/components/breadcrumbs/notifications-toggle.jsx
@@ -2,7 +2,7 @@ import cx from 'classnames';
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { useDispatch, useSelector } from 'react-redux';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import { TOGGLE_DRAWER_VISIBILITY } from '../../miq-redux/actions/notifications-actions';
 import MiqIcon from '../../menu/icon';
 import NotificationDrawer from '../notification-drawer/notification-drawer';
diff --git a/app/javascript/components/button-group/index.jsx b/app/javascript/components/button-group/index.jsx
index 690ecdd3ee3..27f57e657af 100644
--- a/app/javascript/components/button-group/index.jsx
+++ b/app/javascript/components/button-group/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import MiqFormRenderer, { useFormApi } from '@@ddf';
-import { Button, Loading } from 'carbon-components-react';
+import { Button, Loading } from "@carbon/react";
 import PropTypes from 'prop-types';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
 import createSchema from './group-form.schema';
diff --git a/app/javascript/components/catalog-form/catalog-form.jsx b/app/javascript/components/catalog-form/catalog-form.jsx
index e2e4a13a0e1..383b32e736e 100644
--- a/app/javascript/components/catalog-form/catalog-form.jsx
+++ b/app/javascript/components/catalog-form/catalog-form.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import createSchema from './catalog-form.schema';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/cloud-database-form/cloud-database-form.jsx b/app/javascript/components/cloud-database-form/cloud-database-form.jsx
index a25a2cdc563..60a066e6bd1 100644
--- a/app/javascript/components/cloud-database-form/cloud-database-form.jsx
+++ b/app/javascript/components/cloud-database-form/cloud-database-form.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '@@ddf';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import createSchema from './cloud-database-form.schema';
diff --git a/app/javascript/components/cloud-network-form/cloud-network-form.jsx b/app/javascript/components/cloud-network-form/cloud-network-form.jsx
index 829f41bc631..9aefb3978e5 100644
--- a/app/javascript/components/cloud-network-form/cloud-network-form.jsx
+++ b/app/javascript/components/cloud-network-form/cloud-network-form.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import createSchema from './cloud-network-form.schema';
 import { networkProviders } from '../../helpers/network-providers';
diff --git a/app/javascript/components/cloud-object-store-container-form/index.jsx b/app/javascript/components/cloud-object-store-container-form/index.jsx
index 383c811da5f..08793310420 100644
--- a/app/javascript/components/cloud-object-store-container-form/index.jsx
+++ b/app/javascript/components/cloud-object-store-container-form/index.jsx
@@ -1,6 +1,6 @@
 /* eslint-disable camelcase */
 import React, { useState } from 'react';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import createSchema from './cloud-object-store-container-form.schema';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/cloud-tenant-form/index.jsx b/app/javascript/components/cloud-tenant-form/index.jsx
index 3eca5d2c210..b72b7669957 100644
--- a/app/javascript/components/cloud-tenant-form/index.jsx
+++ b/app/javascript/components/cloud-tenant-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '@@ddf';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import createSchema from './cloud-tenant-form.schema';
diff --git a/app/javascript/components/cloud-volume-form/attach-detach-cloud-volume-form.jsx b/app/javascript/components/cloud-volume-form/attach-detach-cloud-volume-form.jsx
index 54a20c98311..a4ceb9e244a 100644
--- a/app/javascript/components/cloud-volume-form/attach-detach-cloud-volume-form.jsx
+++ b/app/javascript/components/cloud-volume-form/attach-detach-cloud-volume-form.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import MiqFormRenderer, { useFormApi } from '@@ddf';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import createSchema from './attach-detach-cloud-volume.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 
diff --git a/app/javascript/components/code-editor/index.js b/app/javascript/components/code-editor/index.js
index 71d96b57aad..c336df488e3 100644
--- a/app/javascript/components/code-editor/index.js
+++ b/app/javascript/components/code-editor/index.js
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Controlled as CodeMirror } from 'react-codemirror2';
-import { FormGroup, RadioButtonGroup, RadioButton } from 'carbon-components-react';
+import { FormGroup, RadioButtonGroup, RadioButton } from "@carbon/react";
 import { prepareProps } from '@data-driven-forms/carbon-component-mapper';
 
 import { useFieldApi } from '@@ddf';
diff --git a/app/javascript/components/container-projects/chart-card.jsx b/app/javascript/components/container-projects/chart-card.jsx
index bb50afd448e..60f7f097ad5 100644
--- a/app/javascript/components/container-projects/chart-card.jsx
+++ b/app/javascript/components/container-projects/chart-card.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { MeterChart } from '@carbon/charts-react';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import EmptyCard from './empty-card';
 import BarChartCard from './bar-chart-card';
 import TrendChartCard from './trend-chart-card';
diff --git a/app/javascript/components/copy-catalog-form/copy-catalog-form.jsx b/app/javascript/components/copy-catalog-form/copy-catalog-form.jsx
index d077de8fe50..6ca34cee03b 100644
--- a/app/javascript/components/copy-catalog-form/copy-catalog-form.jsx
+++ b/app/javascript/components/copy-catalog-form/copy-catalog-form.jsx
@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import createSchema from './copy-catalog-form.schema';
 import { http } from '../../http_api';
diff --git a/app/javascript/components/copy-dashboard-form/copy-dashboard-form.jsx b/app/javascript/components/copy-dashboard-form/copy-dashboard-form.jsx
index f9b3de15255..576c3577924 100644
--- a/app/javascript/components/copy-dashboard-form/copy-dashboard-form.jsx
+++ b/app/javascript/components/copy-dashboard-form/copy-dashboard-form.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import createSchema from './copy-dashboard-form.schema';
 import { http, API } from '../../http_api';
diff --git a/app/javascript/components/custom-url-tabs/index.jsx b/app/javascript/components/custom-url-tabs/index.jsx
index 4a68d10cc40..09a3b7f13f9 100644
--- a/app/javascript/components/custom-url-tabs/index.jsx
+++ b/app/javascript/components/custom-url-tabs/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Tab, Tabs, Modal } from 'carbon-components-react';
+import { Tab, Tabs, Modal } from "@carbon/react";
 import { checkForFormChanges } from './helper';
 
 const CustomURLTabs = ({
diff --git a/app/javascript/components/dashboard-widgets/widget-remove-modal/index.jsx b/app/javascript/components/dashboard-widgets/widget-remove-modal/index.jsx
index cba9565407b..76c9f35816e 100644
--- a/app/javascript/components/dashboard-widgets/widget-remove-modal/index.jsx
+++ b/app/javascript/components/dashboard-widgets/widget-remove-modal/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from 'carbon-components-react';
+import { Modal } from "@carbon/react";
 import miqRedirectBack from '../../../helpers/miq-redirect-back';
 
 const WidgetRemoveModal = ({
diff --git a/app/javascript/components/dashboard-widgets/widget-wrapper/helper.jsx b/app/javascript/components/dashboard-widgets/widget-wrapper/helper.jsx
index 890b8f899fd..efae7202307 100644
--- a/app/javascript/components/dashboard-widgets/widget-wrapper/helper.jsx
+++ b/app/javascript/components/dashboard-widgets/widget-wrapper/helper.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-alert */
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { OverflowMenuItem, Loading } from 'carbon-components-react';
+import { OverflowMenuItem, Loading } from "@carbon/react";
 import classNames from 'classnames';
 import WidgetChart from '../widget-chart';
 import WidgetError from '../widget-error';
diff --git a/app/javascript/components/dashboard-widgets/widget-wrapper/index.jsx b/app/javascript/components/dashboard-widgets/widget-wrapper/index.jsx
index c0a82d02be3..a5ea86b2bf7 100644
--- a/app/javascript/components/dashboard-widgets/widget-wrapper/index.jsx
+++ b/app/javascript/components/dashboard-widgets/widget-wrapper/index.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { OverflowMenu } from 'carbon-components-react';
+import { OverflowMenu } from "@carbon/react";
 import debouncePromise from '../../../helpers/promise-debounce';
 import { getOverflowButtons, getWidget } from './helper';
 import WidgetRemoveModal from '../widget-remove-modal';
diff --git a/app/javascript/components/dashboard-widgets/widget-zoom/index.jsx b/app/javascript/components/dashboard-widgets/widget-zoom/index.jsx
index 3bd86ed3bed..432631fb799 100644
--- a/app/javascript/components/dashboard-widgets/widget-zoom/index.jsx
+++ b/app/javascript/components/dashboard-widgets/widget-zoom/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import { Close16 } from '@carbon/icons-react';
 
 const WidgetZoom = ({
diff --git a/app/javascript/components/dashboard_toolbar.jsx b/app/javascript/components/dashboard_toolbar.jsx
index 09c276c1d58..178c488e143 100644
--- a/app/javascript/components/dashboard_toolbar.jsx
+++ b/app/javascript/components/dashboard_toolbar.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { OverflowMenu, OverflowMenuItem } from "@carbon/react";
 import { ChevronDown20 } from '@carbon/icons-react';
 
 const addClick = (item) =>
diff --git a/app/javascript/components/edit-service-form/index.jsx b/app/javascript/components/edit-service-form/index.jsx
index 0381f1e2d7c..bb6409aa550 100644
--- a/app/javascript/components/edit-service-form/index.jsx
+++ b/app/javascript/components/edit-service-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import createSchema from './edit-service-form.schema';
 import MiqFormRenderer from '../../forms/data-driven-form';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
diff --git a/app/javascript/components/embedded-automate-entry-point/index.jsx b/app/javascript/components/embedded-automate-entry-point/index.jsx
index d7e70c88c28..bc046b58edd 100644
--- a/app/javascript/components/embedded-automate-entry-point/index.jsx
+++ b/app/javascript/components/embedded-automate-entry-point/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Button, TextInput } from 'carbon-components-react';
+import { Button, TextInput } from "@carbon/react";
 import { Close16, TreeViewAlt16 } from '@carbon/icons-react';
 import { useFieldApi } from '@@ddf';
 import AutomateEntryPoints from '../automate-entry-points';
diff --git a/app/javascript/components/embedded-terraform-repository-form/index.jsx b/app/javascript/components/embedded-terraform-repository-form/index.jsx
index acc13d3e30f..d6665363b73 100644
--- a/app/javascript/components/embedded-terraform-repository-form/index.jsx
+++ b/app/javascript/components/embedded-terraform-repository-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import createSchema from './embedded-terraform-repository-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/embedded-workflow-entry-point/index.jsx b/app/javascript/components/embedded-workflow-entry-point/index.jsx
index db3d08a4f04..87ffe6725b5 100644
--- a/app/javascript/components/embedded-workflow-entry-point/index.jsx
+++ b/app/javascript/components/embedded-workflow-entry-point/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Button, TextInput } from 'carbon-components-react';
+import { Button, TextInput } from "@carbon/react";
 import { Close16, TreeViewAlt16 } from '@carbon/icons-react';
 import { useFieldApi } from '@@ddf';
 import WorkflowEntryPoints from '../workflows/workflow-entry-points';
diff --git a/app/javascript/components/ems_container_dashboard/index.js b/app/javascript/components/ems_container_dashboard/index.js
index cb199d436c6..fb7d5eefb89 100644
--- a/app/javascript/components/ems_container_dashboard/index.js
+++ b/app/javascript/components/ems_container_dashboard/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import PfAggregateStatusCard from '../pf_aggregate_status_card';
 import { getProviderInfo, getAggStatusInfo } from './helper';
 
diff --git a/app/javascript/components/evacuate-form/index.jsx b/app/javascript/components/evacuate-form/index.jsx
index 3e31bd2fbae..7f97cd9e1d0 100644
--- a/app/javascript/components/evacuate-form/index.jsx
+++ b/app/javascript/components/evacuate-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import { createSchema } from './evacuate-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
diff --git a/app/javascript/components/filter-dropdown/index.js b/app/javascript/components/filter-dropdown/index.js
index 2e20a9f1a04..199ae7ede20 100644
--- a/app/javascript/components/filter-dropdown/index.js
+++ b/app/javascript/components/filter-dropdown/index.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Select, SelectItem, SelectItemGroup, Button,
-} from 'carbon-components-react';
+} from "@carbon/react";
 
 const FilterDropdown = ({
   defSearches, mySearches, filterSelected, defaultSelected, selectedFilter,
diff --git a/app/javascript/components/filter-provision-instance/index.jsx b/app/javascript/components/filter-provision-instance/index.jsx
index df68e40ac5a..cd546d060dc 100644
--- a/app/javascript/components/filter-provision-instance/index.jsx
+++ b/app/javascript/components/filter-provision-instance/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { Search32, Close32 } from '@carbon/icons-react';
-import { Button, Checkbox, TextInput } from 'carbon-components-react';
+import { Button, Checkbox, TextInput } from "@carbon/react";
 
 /** Component to filter the images at provisioning instances page. */
 const FilterProvisionInstance = ({
diff --git a/app/javascript/components/firmware-registry/firmware-registry-form.jsx b/app/javascript/components/firmware-registry/firmware-registry-form.jsx
index d1002e035ed..5e479d4a948 100644
--- a/app/javascript/components/firmware-registry/firmware-registry-form.jsx
+++ b/app/javascript/components/firmware-registry/firmware-registry-form.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import schema from './firmware-registry-form.schema';
 import MiqFormRenderer from '../../forms/data-driven-form';
 
diff --git a/app/javascript/components/flavor-form/index.jsx b/app/javascript/components/flavor-form/index.jsx
index 519b4e0ec50..9b39d92d57c 100644
--- a/app/javascript/components/flavor-form/index.jsx
+++ b/app/javascript/components/flavor-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '@@ddf';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import createSchema from './flavor-form.schema';
diff --git a/app/javascript/components/fonticon-picker/font-icon-picker-ddf.jsx b/app/javascript/components/fonticon-picker/font-icon-picker-ddf.jsx
index 4041e9bba36..318f18d79a7 100644
--- a/app/javascript/components/fonticon-picker/font-icon-picker-ddf.jsx
+++ b/app/javascript/components/fonticon-picker/font-icon-picker-ddf.jsx
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import {
   FormGroup, Button,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { prepareProps } from '@data-driven-forms/carbon-component-mapper';
diff --git a/app/javascript/components/fonticon-picker/icon-list.jsx b/app/javascript/components/fonticon-picker/icon-list.jsx
index 1d4927c266e..0233e5f4c1a 100644
--- a/app/javascript/components/fonticon-picker/icon-list.jsx
+++ b/app/javascript/components/fonticon-picker/icon-list.jsx
@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react';
-import { Grid, Row, Column } from 'carbon-components-react';
+import { Grid, Row, Column } from "@carbon/react";
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
diff --git a/app/javascript/components/fonticon-picker/icon-modal.jsx b/app/javascript/components/fonticon-picker/icon-modal.jsx
index f1b41bfd684..e00802f8509 100644
--- a/app/javascript/components/fonticon-picker/icon-modal.jsx
+++ b/app/javascript/components/fonticon-picker/icon-modal.jsx
@@ -5,7 +5,7 @@ import {
   Tabs,
   Tab,
   Modal, ModalBody,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import IconList from './icon-list';
 
 const IconModal = ({
diff --git a/app/javascript/components/fonticon-picker/index.jsx b/app/javascript/components/fonticon-picker/index.jsx
index 3a8a9f8ab17..c50e2e9548b 100644
--- a/app/javascript/components/fonticon-picker/index.jsx
+++ b/app/javascript/components/fonticon-picker/index.jsx
@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import { ChevronDown32 } from '@carbon/icons-react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
diff --git a/app/javascript/components/generic-objects-form/custom-button-form/index.jsx b/app/javascript/components/generic-objects-form/custom-button-form/index.jsx
index 85b2d4b76a8..bf33970cc94 100644
--- a/app/javascript/components/generic-objects-form/custom-button-form/index.jsx
+++ b/app/javascript/components/generic-objects-form/custom-button-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import MiqFormRenderer, { useFormApi } from '@@ddf';
-import { Button, Loading } from 'carbon-components-react';
+import { Button, Loading } from "@carbon/react";
 import PropTypes from 'prop-types';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
 import createSchema from './custom-button-form.schema';
diff --git a/app/javascript/components/generic-objects-form/helper.js b/app/javascript/components/generic-objects-form/helper.js
index f797c927f4a..f371f0b7b25 100644
--- a/app/javascript/components/generic-objects-form/helper.js
+++ b/app/javascript/components/generic-objects-form/helper.js
@@ -2,7 +2,7 @@ import React from 'react';
 
 import { useFieldApi, useFormApi } from '@@ddf';
 import { TrashCan32 } from '@carbon/icons-react';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 
 const compare = (array, name) => {
   // eslint-disable-next-line prefer-const
diff --git a/app/javascript/components/host-initiator-form/index.jsx b/app/javascript/components/host-initiator-form/index.jsx
index 4e3867cf1ff..714eb133178 100644
--- a/app/javascript/components/host-initiator-form/index.jsx
+++ b/app/javascript/components/host-initiator-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import createSchema from './host-initiator-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 
diff --git a/app/javascript/components/host-initiator-group-form/index.jsx b/app/javascript/components/host-initiator-group-form/index.jsx
index c5ca0c3cde0..55e0dd46773 100644
--- a/app/javascript/components/host-initiator-group-form/index.jsx
+++ b/app/javascript/components/host-initiator-group-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import createSchema from './host-initiator-group-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import EditingContext from './editing-context';
diff --git a/app/javascript/components/key-value-list/index.jsx b/app/javascript/components/key-value-list/index.jsx
index eed5eb13f1e..84e7817cb4e 100644
--- a/app/javascript/components/key-value-list/index.jsx
+++ b/app/javascript/components/key-value-list/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { useFieldApi, useFormApi } from '@@ddf';
-import { Button, TextInput } from 'carbon-components-react';
+import { Button, TextInput } from "@carbon/react";
 import { TrashCan32 } from '@carbon/icons-react';
 
 /** component used as a mapper to include the key value pairs ofr extra vars */
@@ -33,7 +33,7 @@ const KeyValueListComponent = (props) => {
       <br />
       {input.value && input.value.map((pair, index) => (
         // eslint-disable-next-line react/no-array-index-key
-        <div key={index} className="key-value-list-pair">
+        (<div key={index} className="key-value-list-pair">
           <TextInput
             id={`${input.name}.${index}.key`}
             labelText={keyLabel}
@@ -54,7 +54,7 @@ const KeyValueListComponent = (props) => {
             iconDescription="Delete Key-Value Pair"
             onClick={() => deletePair(index)}
           />
-        </div>
+        </div>)
       ))}
       <Button kind="secondary" onClick={addPair}>{__('Add Key-Value Pair')}</Button>
     </div>
diff --git a/app/javascript/components/live-migrate-form/index.jsx b/app/javascript/components/live-migrate-form/index.jsx
index 07588b61b47..65b9a8e0d21 100644
--- a/app/javascript/components/live-migrate-form/index.jsx
+++ b/app/javascript/components/live-migrate-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import { createSchema } from './live-migrate-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
diff --git a/app/javascript/components/miq-about-modal/miq-about-modal.jsx b/app/javascript/components/miq-about-modal/miq-about-modal.jsx
index db27aeb2e33..737412c878e 100644
--- a/app/javascript/components/miq-about-modal/miq-about-modal.jsx
+++ b/app/javascript/components/miq-about-modal/miq-about-modal.jsx
@@ -6,7 +6,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
 import { bindActionCreators } from 'redux';
-import { Modal, ModalBody, Button } from 'carbon-components-react';
+import { Modal, ModalBody, Button } from "@carbon/react";
 import ModalItem from './modal-item';
 
 const SHOW_ABOUT_MODAL = '@@aboutModal/show';
diff --git a/app/javascript/components/miq-ae-class/index.jsx b/app/javascript/components/miq-ae-class/index.jsx
index 7630e4aba08..131b7dbaa1f 100644
--- a/app/javascript/components/miq-ae-class/index.jsx
+++ b/app/javascript/components/miq-ae-class/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import MiqFormRenderer, { useFormApi } from '@@ddf';
 import PropTypes from 'prop-types';
 import createSchema from './class-form.schema';
diff --git a/app/javascript/components/miq-ae-customization/index.jsx b/app/javascript/components/miq-ae-customization/index.jsx
index d325290bad9..57d0ad8ad0e 100644
--- a/app/javascript/components/miq-ae-customization/index.jsx
+++ b/app/javascript/components/miq-ae-customization/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import { FormSpy } from '@data-driven-forms/react-form-renderer';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import MiqFormRenderer, { useFormApi } from '@@ddf';
 import PropTypes from 'prop-types';
 import createSchema from './miq-ae-customization-form.schema';
diff --git a/app/javascript/components/miq-alert-set-form/index.jsx b/app/javascript/components/miq-alert-set-form/index.jsx
index af0145c3175..0339249a632 100644
--- a/app/javascript/components/miq-alert-set-form/index.jsx
+++ b/app/javascript/components/miq-alert-set-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import MiqFormRenderer from '@@ddf';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import createSchema from './miq-alert-set-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 
diff --git a/app/javascript/components/miq-confirm-action-modal/index.jsx b/app/javascript/components/miq-confirm-action-modal/index.jsx
index 9416f072d83..7b022942456 100644
--- a/app/javascript/components/miq-confirm-action-modal/index.jsx
+++ b/app/javascript/components/miq-confirm-action-modal/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Modal } from 'carbon-components-react';
+import { Modal } from "@carbon/react";
 
 export const modalCallbackTypes = {
   CLOSE: 'close',
diff --git a/app/javascript/components/miq-custom-tab/index.jsx b/app/javascript/components/miq-custom-tab/index.jsx
index 2e47cae8c01..0cc536b10e5 100644
--- a/app/javascript/components/miq-custom-tab/index.jsx
+++ b/app/javascript/components/miq-custom-tab/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Tabs, Tab } from 'carbon-components-react';
+import { Tabs, Tab } from "@carbon/react";
 import { useDispatch } from 'react-redux';
 import { miqCustomTabActions } from '../../miq-redux/actions/miq-custom-tab-actions';
 import { labelConfig, tabText } from './helper';
diff --git a/app/javascript/components/miq-data-table/index.jsx b/app/javascript/components/miq-data-table/index.jsx
index cb2c3af58bd..c5732cc7c2d 100644
--- a/app/javascript/components/miq-data-table/index.jsx
+++ b/app/javascript/components/miq-data-table/index.jsx
@@ -9,7 +9,7 @@ import {
   TableBody,
   TableSelectAll,
   TableSelectRow,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import classNames from 'classnames';
 import MiqPagination from '../miq-pagination';
 import {
diff --git a/app/javascript/components/miq-data-table/miq-table-cell.jsx b/app/javascript/components/miq-data-table/miq-table-cell.jsx
index 709c1e0d6fc..bf4dbddd195 100644
--- a/app/javascript/components/miq-data-table/miq-table-cell.jsx
+++ b/app/javascript/components/miq-data-table/miq-table-cell.jsx
@@ -3,7 +3,7 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import {
   Button, TableCell, TextInput, Toggle, Link,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import classNames from 'classnames';
 import MiqConfirmActionModal, { modalCallbackTypes } from '../miq-confirm-action-modal';
 import {
diff --git a/app/javascript/components/miq-data-table/miq-table-toolbar.jsx b/app/javascript/components/miq-data-table/miq-table-toolbar.jsx
index d511f05fc76..9f14aa8178b 100644
--- a/app/javascript/components/miq-data-table/miq-table-toolbar.jsx
+++ b/app/javascript/components/miq-data-table/miq-table-toolbar.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import {
   Dropdown, TableToolbar, TableToolbarContent, TableToolbarSearch,
-} from 'carbon-components-react';
+} from "@carbon/react";
 
 const MiqTableToolbar = ({
   toolbarMenu, onMenuSelect, onToolBarSearch, clearFilter,
diff --git a/app/javascript/components/miq-pagination.jsx b/app/javascript/components/miq-pagination.jsx
index 1be456f2e00..3f7cfa1bdbf 100644
--- a/app/javascript/components/miq-pagination.jsx
+++ b/app/javascript/components/miq-pagination.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Pagination } from 'carbon-components-react';
+import { Pagination } from "@carbon/react";
 
 const getItemRangeText = (min, max, totalItems) => sprintf(n__(`%d-%d of %d item`, `%d-%d of %d items`, totalItems), min, max, totalItems);
 
diff --git a/app/javascript/components/miq-structured-list/index.jsx b/app/javascript/components/miq-structured-list/index.jsx
index d15f4ed493e..7fe2abf0e73 100644
--- a/app/javascript/components/miq-structured-list/index.jsx
+++ b/app/javascript/components/miq-structured-list/index.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { StructuredListWrapper, Accordion, AccordionItem } from 'carbon-components-react';
+import { StructuredListWrapper, Accordion, AccordionItem } from "@carbon/react";
 import MiqStructuredListMessage from './miq-structured-list-message';
 import MiqStructuredListHeader from './miq-structured-list-header';
 import MiqStructuredListBody from './miq-structured-list-body/miq-structured-list-body';
diff --git a/app/javascript/components/miq-structured-list/miq-structured-list-body/miq-structured-list-body-label.jsx b/app/javascript/components/miq-structured-list/miq-structured-list-body/miq-structured-list-body-label.jsx
index b6a68ed5293..b9c69ed44f4 100644
--- a/app/javascript/components/miq-structured-list/miq-structured-list-body/miq-structured-list-body-label.jsx
+++ b/app/javascript/components/miq-structured-list/miq-structured-list-body/miq-structured-list-body-label.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StructuredListCell } from 'carbon-components-react';
+import { StructuredListCell } from "@carbon/react";
 
 /** Component to render the label (left hand side of list) */
 const MiqStructuredListBodyLabel = ({ label }) => (
diff --git a/app/javascript/components/miq-structured-list/miq-structured-list-body/miq-structured-list-body.jsx b/app/javascript/components/miq-structured-list/miq-structured-list-body/miq-structured-list-body.jsx
index 32167d14c4e..b895e3b48c0 100644
--- a/app/javascript/components/miq-structured-list/miq-structured-list-body/miq-structured-list-body.jsx
+++ b/app/javascript/components/miq-structured-list/miq-structured-list-body/miq-structured-list-body.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { StructuredListBody, StructuredListRow } from 'carbon-components-react';
+import { StructuredListBody, StructuredListRow } from "@carbon/react";
 import { rowClickEvent } from '../helpers';
 import MiqStructuredListBodyLabel from './miq-structured-list-body-label';
 import MiqStructuredListBodyValue from './miq-structured-list-body-value';
diff --git a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-button.jsx b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-button.jsx
index 3cd389e5793..a9b1c5ed096 100644
--- a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-button.jsx
+++ b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-button.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import { customOnClickHandler } from '../../../../helpers/custom-click-handler';
 
 /** Component to render a button in the cell.  */
diff --git a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-inputs.jsx b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-inputs.jsx
index 658eb809f6a..002fc1b2e0f 100644
--- a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-inputs.jsx
+++ b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-inputs.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Checkbox, TextArea, Dropdown } from 'carbon-components-react';
+import { Checkbox, TextArea, Dropdown } from "@carbon/react";
 import { Controlled as CodeMirror } from 'react-codemirror2';
 import { DynamicReactComponents, InputTypes } from '../../helpers';
 import MiqMarkdown from '../../../MiqMarkdown';
diff --git a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-link.jsx b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-link.jsx
index a841cef3099..858a569e22f 100644
--- a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-link.jsx
+++ b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-tags/miq-structured-list-link.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Link } from 'carbon-components-react';
+import { Link } from "@carbon/react";
 import MiqStructuredListContent from '../miq-structured-list-content';
 import { customOnClickHandler } from '../../../../helpers/custom-click-handler';
 
diff --git a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-array.jsx b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-array.jsx
index 2145dcf0f35..94ece268d82 100644
--- a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-array.jsx
+++ b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-array.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { StructuredListCell } from 'carbon-components-react';
+import { StructuredListCell } from "@carbon/react";
 import { isObject, isArray } from '../../helpers';
 import MiqStructuredListText from '../value-tags/miq-structured-list-text';
 import MiqStructuredListContent from '../miq-structured-list-content';
diff --git a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-object.jsx b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-object.jsx
index bce904b3189..9a78c96588c 100644
--- a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-object.jsx
+++ b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-object.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { StructuredListCell } from 'carbon-components-react';
+import { StructuredListCell } from "@carbon/react";
 import MiqStructuredListConditionalTag from '../value-tags/miq-structured-list-conditional-tag';
 
 /** Usage eg: Automation / Embedded Automate / Generic Objects / item
diff --git a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-sub.jsx b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-sub.jsx
index 3384386054e..59edfdd9c7a 100644
--- a/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-sub.jsx
+++ b/app/javascript/components/miq-structured-list/miq-structured-list-body/value-types/miq-structured-list-sub.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { StructuredListCell } from 'carbon-components-react';
+import { StructuredListCell } from "@carbon/react";
 import MiqStructuredListConditionalTag from '../value-tags/miq-structured-list-conditional-tag';
 
 /** Component to render additional columns */
diff --git a/app/javascript/components/miq-structured-list/miq-structured-list-header.jsx b/app/javascript/components/miq-structured-list/miq-structured-list-header.jsx
index b2dded73228..5da7c880d0b 100644
--- a/app/javascript/components/miq-structured-list/miq-structured-list-header.jsx
+++ b/app/javascript/components/miq-structured-list/miq-structured-list-header.jsx
@@ -4,7 +4,7 @@ import {
   StructuredListHead,
   StructuredListRow,
   StructuredListCell,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import { isObject } from './helpers';
 
 const MiqStructuredListHeader = ({ headers }) => {
diff --git a/app/javascript/components/multiselect-with-selectall/index.js b/app/javascript/components/multiselect-with-selectall/index.js
index bf4ce52a3db..02e5781868b 100644
--- a/app/javascript/components/multiselect-with-selectall/index.js
+++ b/app/javascript/components/multiselect-with-selectall/index.js
@@ -1,7 +1,7 @@
 import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import { prepareProps } from '@data-driven-forms/carbon-component-mapper';
-import { MultiSelect } from 'carbon-components-react';
+import { MultiSelect } from "@carbon/react";
 import { useFieldApi } from '@@ddf';
 
 const MultiSelectWithSelectAll = (props) => {
diff --git a/app/javascript/components/network-security-groups-form/index.jsx b/app/javascript/components/network-security-groups-form/index.jsx
index 4907f4bcfa1..99d30fd5062 100644
--- a/app/javascript/components/network-security-groups-form/index.jsx
+++ b/app/javascript/components/network-security-groups-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import createSchema from './network-security-groups-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/notification-drawer/notification-drawer.jsx b/app/javascript/components/notification-drawer/notification-drawer.jsx
index b1492efc424..cf35f6f4c60 100644
--- a/app/javascript/components/notification-drawer/notification-drawer.jsx
+++ b/app/javascript/components/notification-drawer/notification-drawer.jsx
@@ -6,7 +6,7 @@ import { ChevronLeft16, ChevronRight16, Close16 } from '@carbon/icons-react';
 import classNames from 'classnames';
 import {
   Button, Accordion, AccordionItem, InlineNotification, OverflowMenu, OverflowMenuItem,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import { getNotficationStatusIconName, newCountText, viewDetails } from './helpers';
 import { maxNotifications as maxNotificationsConstant } from '../../notifications/backend';
 import {
diff --git a/app/javascript/components/orchestration-template/orcherstration-template-form.js b/app/javascript/components/orchestration-template/orcherstration-template-form.js
index a7aa9ac8f23..d448144a2e5 100644
--- a/app/javascript/components/orchestration-template/orcherstration-template-form.js
+++ b/app/javascript/components/orchestration-template/orcherstration-template-form.js
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import { API } from '../../http_api';
 import MiqFormRenderer from '../../forms/data-driven-form';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
diff --git a/app/javascript/components/pf_aggregate_status_card.jsx b/app/javascript/components/pf_aggregate_status_card.jsx
index 4830431eab8..d97f77d578a 100644
--- a/app/javascript/components/pf_aggregate_status_card.jsx
+++ b/app/javascript/components/pf_aggregate_status_card.jsx
@@ -40,7 +40,7 @@ const PfAggregateStatusCard = ({
           ) : (
             notifications.map((notification, i) => (
               // eslint-disable-next-line react/no-array-index-key
-              <span key={i} className="card-pf-aggregate-status-notification">
+              (<span key={i} className="card-pf-aggregate-status-notification">
                 <a href={notification.href}>
                   { notification.iconImage && (
                     <>
@@ -53,7 +53,7 @@ const PfAggregateStatusCard = ({
                     </>
                   )}
                 </a>
-              </span>
+              </span>)
             ))) }
 
           { (data.notifications && data.notifications[0] && data.notifications[0].iconClass) && (
diff --git a/app/javascript/components/physical-storage-form/index.jsx b/app/javascript/components/physical-storage-form/index.jsx
index b1eca0e460b..93fc4626b37 100644
--- a/app/javascript/components/physical-storage-form/index.jsx
+++ b/app/javascript/components/physical-storage-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import createSchema from './physical-storage-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import mapper from '../../forms/mappers/componentMapper';
diff --git a/app/javascript/components/policy-profile-form/index.js b/app/javascript/components/policy-profile-form/index.js
index 8c7dab9f141..edd8e7195b8 100644
--- a/app/javascript/components/policy-profile-form/index.js
+++ b/app/javascript/components/policy-profile-form/index.js
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import MiqFormRenderer from '@@ddf';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import createSchema from './policy-profile-form.schema';
diff --git a/app/javascript/components/pxe-servers-form/pxe-server-form.jsx b/app/javascript/components/pxe-servers-form/pxe-server-form.jsx
index a18845d0ed8..28368e62b2e 100644
--- a/app/javascript/components/pxe-servers-form/pxe-server-form.jsx
+++ b/app/javascript/components/pxe-servers-form/pxe-server-form.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import createSchema from './pxe-server-form.schema';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/reconfigure-vm-form/index.jsx b/app/javascript/components/reconfigure-vm-form/index.jsx
index f95911317b6..93ae77ed8e4 100644
--- a/app/javascript/components/reconfigure-vm-form/index.jsx
+++ b/app/javascript/components/reconfigure-vm-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import componentMapper from '../../forms/mappers/componentMapper';
 import MiqFormRenderer from '../../forms/data-driven-form';
 import { createSchema } from './reconfigure-form.schema';
diff --git a/app/javascript/components/reconfigure-vm-form/reconfigure-table/index.jsx b/app/javascript/components/reconfigure-vm-form/reconfigure-table/index.jsx
index 553db6e3fe4..90b2cbb3d0a 100644
--- a/app/javascript/components/reconfigure-vm-form/reconfigure-table/index.jsx
+++ b/app/javascript/components/reconfigure-vm-form/reconfigure-table/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import classNames from 'classnames';
 import MiqDataTable from '../../miq-data-table';
 
diff --git a/app/javascript/components/refresh-notifications.jsx b/app/javascript/components/refresh-notifications.jsx
index f1b2f4471ce..3715ed5188c 100644
--- a/app/javascript/components/refresh-notifications.jsx
+++ b/app/javascript/components/refresh-notifications.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { InlineNotification } from 'carbon-components-react';
+import { InlineNotification } from "@carbon/react";
 
 const RefreshNotifications = ({
   status,
diff --git a/app/javascript/components/region-form/index.jsx b/app/javascript/components/region-form/index.jsx
index 332ebfa0b49..907ceee99be 100644
--- a/app/javascript/components/region-form/index.jsx
+++ b/app/javascript/components/region-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import createSchema from './region-form.schema';
 import MiqFormRenderer from '../../forms/data-driven-form';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/remove-catalog-item-modal.jsx b/app/javascript/components/remove-catalog-item-modal.jsx
index e2d1ad29729..c51740d1f76 100644
--- a/app/javascript/components/remove-catalog-item-modal.jsx
+++ b/app/javascript/components/remove-catalog-item-modal.jsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Loading, ModalBody } from 'carbon-components-react';
+import { Loading, ModalBody } from "@carbon/react";
 import { API } from '../http_api';
 
 const parseApiError = (error) => {
diff --git a/app/javascript/components/remove-generic-item-modal.jsx b/app/javascript/components/remove-generic-item-modal.jsx
index 8989e88f8dc..a74e9ec3a84 100644
--- a/app/javascript/components/remove-generic-item-modal.jsx
+++ b/app/javascript/components/remove-generic-item-modal.jsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { connect } from 'react-redux';
-import { Loading, ModalBody } from 'carbon-components-react';
+import { Loading, ModalBody } from "@carbon/react";
 import { API } from '../http_api';
 import miqRedirectBack from '../helpers/miq-redirect-back';
 
diff --git a/app/javascript/components/request-workflow-status/request-workflow-status-item.jsx b/app/javascript/components/request-workflow-status/request-workflow-status-item.jsx
index a2c9d1d8bde..0fe74fd31be 100644
--- a/app/javascript/components/request-workflow-status/request-workflow-status-item.jsx
+++ b/app/javascript/components/request-workflow-status/request-workflow-status-item.jsx
@@ -1,7 +1,7 @@
 import React, { useEffect, useState, useRef } from 'react';
 import {
   Tag, Loading, Link,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import PropTypes from 'prop-types';
 import { workflowStatusData, workflowStateTypes } from './data';
 import MiqDataTable from '../miq-data-table';
diff --git a/app/javascript/components/routers-form/index.jsx b/app/javascript/components/routers-form/index.jsx
index 7362764a654..867ffc1a6a3 100644
--- a/app/javascript/components/routers-form/index.jsx
+++ b/app/javascript/components/routers-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import createSchema from './RoutersForm.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/schedule-form/index.jsx b/app/javascript/components/schedule-form/index.jsx
index 215b6090e97..b7ab2cd7453 100644
--- a/app/javascript/components/schedule-form/index.jsx
+++ b/app/javascript/components/schedule-form/index.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import { createSchema } from './schedule-form.schema';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/search-bar/index.jsx b/app/javascript/components/search-bar/index.jsx
index 0975deb0db0..6c30f82ef8a 100644
--- a/app/javascript/components/search-bar/index.jsx
+++ b/app/javascript/components/search-bar/index.jsx
@@ -3,7 +3,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
   Button, TextInput, Form,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import {
   ChevronDown32, Search32, ProgressBarRound32, Close32,
 } from '@carbon/icons-react';
diff --git a/app/javascript/components/service-dialog-from-form/service-dialog-from.jsx b/app/javascript/components/service-dialog-from-form/service-dialog-from.jsx
index 907b0f53a4d..3f7093de849 100644
--- a/app/javascript/components/service-dialog-from-form/service-dialog-from.jsx
+++ b/app/javascript/components/service-dialog-from-form/service-dialog-from.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 
 import MiqFormRenderer from '../../forms/data-driven-form';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
diff --git a/app/javascript/components/set-ownership-form/index.jsx b/app/javascript/components/set-ownership-form/index.jsx
index 340587f3093..42d40185f92 100644
--- a/app/javascript/components/set-ownership-form/index.jsx
+++ b/app/javascript/components/set-ownership-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { groupBy } from 'lodash';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import { API } from '../../http_api';
 import createSchema from './ownership-form.schema';
diff --git a/app/javascript/components/settings-company-categories/index.jsx b/app/javascript/components/settings-company-categories/index.jsx
index 7bd726a3b51..2658d637157 100644
--- a/app/javascript/components/settings-company-categories/index.jsx
+++ b/app/javascript/components/settings-company-categories/index.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import MiqDataTable from '../miq-data-table';
 import { rowData } from '../miq-data-table/helper';
 
diff --git a/app/javascript/components/settings-company-tags/index.jsx b/app/javascript/components/settings-company-tags/index.jsx
index ebaddb422d4..8aba817e309 100644
--- a/app/javascript/components/settings-company-tags/index.jsx
+++ b/app/javascript/components/settings-company-tags/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Button, Accordion, AccordionItem } from 'carbon-components-react';
+import { Button, Accordion, AccordionItem } from "@carbon/react";
 import { AddAlt16 } from '@carbon/icons-react';
 import MiqDataTable from '../miq-data-table';
 import MiqStructuredList from '../miq-structured-list';
diff --git a/app/javascript/components/settings-label-tag-mapping/index.jsx b/app/javascript/components/settings-label-tag-mapping/index.jsx
index df7ff5e25d8..b25807d9c42 100644
--- a/app/javascript/components/settings-label-tag-mapping/index.jsx
+++ b/app/javascript/components/settings-label-tag-mapping/index.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import MiqDataTable from '../miq-data-table';
 import { rowData } from '../miq-data-table/helper';
 import NotificationMessage from '../notification-message';
diff --git a/app/javascript/components/settings-time-profile-form/index.jsx b/app/javascript/components/settings-time-profile-form/index.jsx
index 9677626f441..cdf71b2a511 100644
--- a/app/javascript/components/settings-time-profile-form/index.jsx
+++ b/app/javascript/components/settings-time-profile-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import PropTypes from 'prop-types';
 import createSchema from './settings-time-profile-form.schema';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/subnet-form/index.jsx b/app/javascript/components/subnet-form/index.jsx
index 3c27dd0dde2..e8ff35b6812 100644
--- a/app/javascript/components/subnet-form/index.jsx
+++ b/app/javascript/components/subnet-form/index.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import createSchema from './subnet-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/taggingWrapper.jsx b/app/javascript/components/taggingWrapper.jsx
index c3b469deae0..7a0ba6d673d 100644
--- a/app/javascript/components/taggingWrapper.jsx
+++ b/app/javascript/components/taggingWrapper.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { connect } from 'react-redux';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import { TaggingWithButtonsConnected, TaggingConnected, taggingApp } from '../tagging';
 
 const selectedTags = (state, tag) => {
diff --git a/app/javascript/components/tenant-quota-form/index.jsx b/app/javascript/components/tenant-quota-form/index.jsx
index b0fb5329a85..ff5cc45415a 100644
--- a/app/javascript/components/tenant-quota-form/index.jsx
+++ b/app/javascript/components/tenant-quota-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import MiqDataTable from '../miq-data-table';
 import { createRows, setupForm, prepareData } from './helper';
diff --git a/app/javascript/components/terraform-template-catalog-form/helper.js b/app/javascript/components/terraform-template-catalog-form/helper.js
index 14cb3f80f78..d395224c4fe 100644
--- a/app/javascript/components/terraform-template-catalog-form/helper.js
+++ b/app/javascript/components/terraform-template-catalog-form/helper.js
@@ -1,6 +1,6 @@
 import { useFieldApi, useFormApi } from '@@ddf';
 import React from 'react';
-import { Checkbox } from 'carbon-components-react';
+import { Checkbox } from "@carbon/react";
 import PropTypes from 'prop-types';
 import { TreeViewRedux } from '../tree-view';
 
diff --git a/app/javascript/components/textual_summary/generic_table_row.jsx b/app/javascript/components/textual_summary/generic_table_row.jsx
index ff2ac1dec1d..3f72981e05c 100644
--- a/app/javascript/components/textual_summary/generic_table_row.jsx
+++ b/app/javascript/components/textual_summary/generic_table_row.jsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 import IconOrImage from './icon_or_image';
 
 const filterValue = (val) => (val == null ? '' : String(val));
@@ -12,12 +12,12 @@ const renderMultivalue = function renderMultivalue(values, onClick) {
         {
           values.map((item, i) => (
             // eslint-disable-next-line react/no-array-index-key
-            <tr onClick={(e) => onClick(item, e)} key={i} className={item.link ? '' : 'no-hover'} title={item.title}>
+            (<tr onClick={(e) => onClick(item, e)} key={i} className={item.link ? '' : 'no-hover'} title={item.title}>
               <td style={{ border: 0, margin: 0, padding: 0 }}>
                 <IconOrImage icon={item.icon} image={item.image} title={item.title} />
                 {filterValue(item.value)}
               </td>
-            </tr>
+            </tr>)
           ))
         }
       </tbody>
diff --git a/app/javascript/components/textual_summary/index.jsx b/app/javascript/components/textual_summary/index.jsx
index 5f78fdd94f3..ffb5ed18edf 100644
--- a/app/javascript/components/textual_summary/index.jsx
+++ b/app/javascript/components/textual_summary/index.jsx
@@ -13,7 +13,7 @@ export const TextualSummary = (props) => (
       // eslint-disable-next-line react/destructuring-assignment
       props.summary.map((bigGroup, i) => (
         // eslint-disable-next-line react/no-array-index-key
-        <TextualRow onClick={props.onClick} key={i} groups={bigGroup} />
+        (<TextualRow onClick={props.onClick} key={i} groups={bigGroup} />)
       ))
     }
   </div>
diff --git a/app/javascript/components/toast-list/toast-item.jsx b/app/javascript/components/toast-list/toast-item.jsx
index 4849fc3f71d..7264cab8958 100644
--- a/app/javascript/components/toast-list/toast-item.jsx
+++ b/app/javascript/components/toast-list/toast-item.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable jsx-a11y/anchor-is-valid */
 import React, { useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { ToastNotification, Link } from 'carbon-components-react';
+import { ToastNotification, Link } from "@carbon/react";
 import { useDispatch } from 'react-redux';
 import { markNotificationRead, MARK_NOTIFICATION_READ } from '../../miq-redux/actions/notifications-actions';
 
diff --git a/app/javascript/components/toolbar/ToolbarKebab.jsx b/app/javascript/components/toolbar/ToolbarKebab.jsx
index fd0e4c03470..0b779728ba1 100644
--- a/app/javascript/components/toolbar/ToolbarKebab.jsx
+++ b/app/javascript/components/toolbar/ToolbarKebab.jsx
@@ -7,7 +7,7 @@ import {
   SideNavDivider,
   SideNavLink,
   SideNavItems,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import { ToolbarClick } from './ToolbarClick';
 
 const KebabListItem = (item, props) => {
diff --git a/app/javascript/components/toolbar/ToolbarList.jsx b/app/javascript/components/toolbar/ToolbarList.jsx
index 496135c3240..5f37b0d3063 100644
--- a/app/javascript/components/toolbar/ToolbarList.jsx
+++ b/app/javascript/components/toolbar/ToolbarList.jsx
@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
 import PropTypes from 'prop-types';
-import { OverflowMenu, OverflowMenuItem } from 'carbon-components-react';
+import { OverflowMenu, OverflowMenuItem } from "@carbon/react";
 import { ChevronDown20 } from '@carbon/icons-react';
 import { MenuIcon } from './MenuIcon';
 import { isEnabled } from './utility';
diff --git a/app/javascript/components/tree-view/field.jsx b/app/javascript/components/tree-view/field.jsx
index 0f42af18a8f..b7b8c2d9f2b 100644
--- a/app/javascript/components/tree-view/field.jsx
+++ b/app/javascript/components/tree-view/field.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { Tree, ActionTypes } from 'react-wooden-tree';
-import { FormGroup } from 'carbon-components-react';
+import { FormGroup } from "@carbon/react";
 import { prepareProps } from '@data-driven-forms/carbon-component-mapper';
 import { useFieldApi, useFormApi } from '@data-driven-forms/react-form-renderer';
 
diff --git a/app/javascript/components/tree-view/selector.jsx b/app/javascript/components/tree-view/selector.jsx
index 60a0bd41f2a..58fa5f1e978 100644
--- a/app/javascript/components/tree-view/selector.jsx
+++ b/app/javascript/components/tree-view/selector.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Tree, ActionTypes } from 'react-wooden-tree';
 import {
   Modal, FormGroup, TextInput, Button,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import { prepareProps } from '@data-driven-forms/carbon-component-mapper';
 import { useFieldApi, useFormApi } from '@data-driven-forms/react-form-renderer';
 import { TreeViewAlt16, Close16 } from '@carbon/icons-react';
diff --git a/app/javascript/components/visual-settings-form/index.jsx b/app/javascript/components/visual-settings-form/index.jsx
index 3785508b0da..d3317fdf428 100644
--- a/app/javascript/components/visual-settings-form/index.jsx
+++ b/app/javascript/components/visual-settings-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import MiqFormRenderer from '@@ddf';
 import createSchema from './visual-settings-form.schema';
 
diff --git a/app/javascript/components/vm-cloud-add-remove-security-group-form/index.jsx b/app/javascript/components/vm-cloud-add-remove-security-group-form/index.jsx
index 5511762d36c..5591df20233 100644
--- a/app/javascript/components/vm-cloud-add-remove-security-group-form/index.jsx
+++ b/app/javascript/components/vm-cloud-add-remove-security-group-form/index.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import createSchema from './vm-cloud-add-security-form.schema';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/vm-edit-form/index.jsx b/app/javascript/components/vm-edit-form/index.jsx
index 79cd5e02eb4..8dab2b9e010 100644
--- a/app/javascript/components/vm-edit-form/index.jsx
+++ b/app/javascript/components/vm-edit-form/index.jsx
@@ -1,7 +1,7 @@
 /* eslint-disable camelcase */
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import createSchema from './vm-edit-form.schema';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/vm-resize-form/vm-resize-form.jsx b/app/javascript/components/vm-resize-form/vm-resize-form.jsx
index f509de14c48..49fd0650ad8 100644
--- a/app/javascript/components/vm-resize-form/vm-resize-form.jsx
+++ b/app/javascript/components/vm-resize-form/vm-resize-form.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '@@ddf';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import createSchema from './vm-resize.schema';
diff --git a/app/javascript/components/vm-server-relationship-form/index.jsx b/app/javascript/components/vm-server-relationship-form/index.jsx
index 3bfb5abb375..d806d2e71e7 100644
--- a/app/javascript/components/vm-server-relationship-form/index.jsx
+++ b/app/javascript/components/vm-server-relationship-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect, useMemo } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import MiqFormRenderer from '../../forms/data-driven-form';
 import { API } from '../../http_api';
 import createSchema from './vm-server-relationship-form.schema';
diff --git a/app/javascript/components/vm-snapshot-form/vm-snapshot-form.jsx b/app/javascript/components/vm-snapshot-form/vm-snapshot-form.jsx
index 37f5284d46f..c950e3edfb0 100644
--- a/app/javascript/components/vm-snapshot-form/vm-snapshot-form.jsx
+++ b/app/javascript/components/vm-snapshot-form/vm-snapshot-form.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 
 import MiqFormRenderer from '../../forms/data-driven-form';
diff --git a/app/javascript/components/volume-mapping-form/index.jsx b/app/javascript/components/volume-mapping-form/index.jsx
index 50560eb85db..89c0fc67de6 100644
--- a/app/javascript/components/volume-mapping-form/index.jsx
+++ b/app/javascript/components/volume-mapping-form/index.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import MiqFormRenderer from '@@ddf';
 import createSchema from './volume-mapping-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
diff --git a/app/javascript/components/workers-form/workers-form.jsx b/app/javascript/components/workers-form/workers-form.jsx
index ca388a7f8e2..04215f83e96 100644
--- a/app/javascript/components/workers-form/workers-form.jsx
+++ b/app/javascript/components/workers-form/workers-form.jsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
-import { Grid } from 'carbon-components-react';
+import { Grid } from "@carbon/react";
 import { get } from 'lodash';
 import addSchema from './workers.schema';
 import MiqFormRenderer from '../../forms/data-driven-form';
diff --git a/app/javascript/components/workflow-repository-form/index.jsx b/app/javascript/components/workflow-repository-form/index.jsx
index bb8108d4073..087c89b86ec 100644
--- a/app/javascript/components/workflow-repository-form/index.jsx
+++ b/app/javascript/components/workflow-repository-form/index.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import MiqFormRenderer from '@@ddf';
-import { Loading } from 'carbon-components-react';
+import { Loading } from "@carbon/react";
 import createSchema from './workflow-repository-form.schema';
 import miqRedirectBack from '../../helpers/miq-redirect-back';
 import { API } from '../../http_api';
diff --git a/app/javascript/components/workflows/workflow-entry-points.jsx b/app/javascript/components/workflows/workflow-entry-points.jsx
index 2012f59874f..35c38c12162 100644
--- a/app/javascript/components/workflows/workflow-entry-points.jsx
+++ b/app/javascript/components/workflows/workflow-entry-points.jsx
@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
-import { Loading, Modal, ModalBody } from 'carbon-components-react';
+import { Loading, Modal, ModalBody } from "@carbon/react";
 import MiqDataTable from '../miq-data-table';
 import { workflowsEntryPoints } from './helper';
 import { http } from '../../http_api';
diff --git a/app/javascript/components/workflows/workflow_payload.jsx b/app/javascript/components/workflows/workflow_payload.jsx
index 69a304f36e8..8ff6b39ab60 100644
--- a/app/javascript/components/workflows/workflow_payload.jsx
+++ b/app/javascript/components/workflows/workflow_payload.jsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import {
   Loading, Tabs, Tab,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import AWSSfnGraph from '@tshepomgaga/aws-sfn-graph';
 import { Controlled as CodeMirror } from 'react-codemirror2';
 import '@tshepomgaga/aws-sfn-graph/index.css';
diff --git a/app/javascript/forms/miq-button.jsx b/app/javascript/forms/miq-button.jsx
index 30ff04b75ae..ceb3a85cb65 100644
--- a/app/javascript/forms/miq-button.jsx
+++ b/app/javascript/forms/miq-button.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ClassNames from 'classnames';
-import { Button } from 'carbon-components-react';
+import { Button } from "@carbon/react";
 
 function MiqButton(props) {
   let { title } = props;
diff --git a/app/javascript/menu/group-switcher.jsx b/app/javascript/menu/group-switcher.jsx
index 08988eee94c..475a19a8a25 100644
--- a/app/javascript/menu/group-switcher.jsx
+++ b/app/javascript/menu/group-switcher.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown } from 'carbon-components-react';
+import { Dropdown } from "@carbon/react";
 import { SideNavItems, SideNavItem } from 'carbon-components-react/es/components/UIShell';
 import { Collaborate20 } from '@carbon/icons-react';
 import TooltipIcon from 'carbon-components-react/es/components/TooltipIcon';
diff --git a/app/javascript/oldjs/miq_application.js b/app/javascript/oldjs/miq_application.js
index a3bdfa3c8eb..5a4bf9cbdcf 100644
--- a/app/javascript/oldjs/miq_application.js
+++ b/app/javascript/oldjs/miq_application.js
@@ -1148,7 +1148,7 @@ window.miqInitSelectPicker = function(selector, options) {
     size: 10,
     dropupAuto: false,
     noneSelectedText: __('Nothing selected'),
-    ...options || {},
+    ...(options || {}),
   });
   $('.bootstrap-select > button[title]').not('.selectpicker').tooltip({ container: 'none' });
 };
diff --git a/app/javascript/provider-dialogs/modal.js b/app/javascript/provider-dialogs/modal.js
index 586f10cb6cd..8f4bd9d80e6 100644
--- a/app/javascript/provider-dialogs/modal.js
+++ b/app/javascript/provider-dialogs/modal.js
@@ -2,7 +2,7 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import {
   ComposedModal, ModalHeader, ModalFooter, ModalBody,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import { Provider } from 'react-redux';
 import FormButtonsRedux from '../forms/form-buttons-redux';
 
diff --git a/app/javascript/spec/timeline-options-form/timeline-options-form.spec.js b/app/javascript/spec/timeline-options-form/timeline-options-form.spec.js
index 02fc09302ea..02fe2f058e6 100644
--- a/app/javascript/spec/timeline-options-form/timeline-options-form.spec.js
+++ b/app/javascript/spec/timeline-options-form/timeline-options-form.spec.js
@@ -2,7 +2,7 @@ import React from 'react';
 import toJson from 'enzyme-to-json';
 import fetchMock from 'fetch-mock';
 import { act } from 'react-dom/test-utils';
-import { Button, Select } from 'carbon-components-react';
+import { Button, Select } from "@carbon/react";
 import TimelineOptions from '../../components/timeline-options/timeline-options';
 import { sampleReponse, sampleSubmitPressedValues, sampleVmData } from './sample-data';
 import { mount, shallow } from '../helpers/mountForm';
diff --git a/app/javascript/tagging/components/InnerComponents/CategoryModifier.js b/app/javascript/tagging/components/InnerComponents/CategoryModifier.js
index 70c0bd288d7..21896dda9e8 100644
--- a/app/javascript/tagging/components/InnerComponents/CategoryModifier.js
+++ b/app/javascript/tagging/components/InnerComponents/CategoryModifier.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Column, FormGroup } from 'carbon-components-react';
+import { Column, FormGroup } from "@carbon/react";
 import TagSelector from './TagSelector';
 import TaggingPropTypes from '../TaggingPropTypes';
 
diff --git a/app/javascript/tagging/components/InnerComponents/Tag.js b/app/javascript/tagging/components/InnerComponents/Tag.js
index 84855da45ae..f8a477ab849 100644
--- a/app/javascript/tagging/components/InnerComponents/Tag.js
+++ b/app/javascript/tagging/components/InnerComponents/Tag.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { FormLabel, Button } from 'carbon-components-react';
+import { FormLabel, Button } from "@carbon/react";
 import { Close16 } from '@carbon/icons-react';
 import TaggingPropTypes from '../TaggingPropTypes';
 
diff --git a/app/javascript/tagging/components/InnerComponents/TagModifier.js b/app/javascript/tagging/components/InnerComponents/TagModifier.js
index 3ab7451dc7f..c1601ae6b88 100644
--- a/app/javascript/tagging/components/InnerComponents/TagModifier.js
+++ b/app/javascript/tagging/components/InnerComponents/TagModifier.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Form, Row, Column } from 'carbon-components-react';
+import { Form, Row, Column } from "@carbon/react";
 
 const TagModifier = ({ header, hideHeader, children }) => (
   <>
diff --git a/app/javascript/tagging/components/InnerComponents/TagSelector.js b/app/javascript/tagging/components/InnerComponents/TagSelector.js
index 7196d3ec708..4d3424cb75f 100644
--- a/app/javascript/tagging/components/InnerComponents/TagSelector.js
+++ b/app/javascript/tagging/components/InnerComponents/TagSelector.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown } from 'carbon-components-react';
+import { Dropdown } from "@carbon/react";
 import TaggingPropTypes from '../TaggingPropTypes';
 
 class TagSelector extends React.Component {
diff --git a/app/javascript/tagging/components/InnerComponents/TagView.js b/app/javascript/tagging/components/InnerComponents/TagView.js
index 6cbcd570413..74c0626e19b 100644
--- a/app/javascript/tagging/components/InnerComponents/TagView.js
+++ b/app/javascript/tagging/components/InnerComponents/TagView.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Column } from 'carbon-components-react';
+import { Row, Column } from "@carbon/react";
 import TagCategory from './TagCategory';
 import TaggingPropTypes from '../TaggingPropTypes';
 import NotificationMessage from '../../../components/notification-message';
diff --git a/app/javascript/tagging/components/InnerComponents/ValueModifier.js b/app/javascript/tagging/components/InnerComponents/ValueModifier.js
index bee46027150..4e61aa1ac3b 100644
--- a/app/javascript/tagging/components/InnerComponents/ValueModifier.js
+++ b/app/javascript/tagging/components/InnerComponents/ValueModifier.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Column, FormGroup } from 'carbon-components-react';
+import { Column, FormGroup } from "@carbon/react";
 import ValueSelector from './ValueSelector';
 import TaggingPropTypes from '../TaggingPropTypes';
 
diff --git a/app/javascript/tagging/components/InnerComponents/ValueSelector.js b/app/javascript/tagging/components/InnerComponents/ValueSelector.js
index e14caf86749..bb444be7f36 100644
--- a/app/javascript/tagging/components/InnerComponents/ValueSelector.js
+++ b/app/javascript/tagging/components/InnerComponents/ValueSelector.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Dropdown, MultiSelect } from 'carbon-components-react';
+import { Dropdown, MultiSelect } from "@carbon/react";
 import TaggingPropTypes from '../TaggingPropTypes';
 
 class ValueSelector extends React.Component {
diff --git a/app/javascript/tagging/components/Tagging/Tagging.js b/app/javascript/tagging/components/Tagging/Tagging.js
index 8b5ef97d94c..4079a68da2c 100644
--- a/app/javascript/tagging/components/Tagging/Tagging.js
+++ b/app/javascript/tagging/components/Tagging/Tagging.js
@@ -1,7 +1,7 @@
 /* eslint-disable react/destructuring-assignment */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Row, Column } from 'carbon-components-react';
+import { Row, Column } from "@carbon/react";
 import TagModifier from '../InnerComponents/TagModifier';
 import TagView from '../InnerComponents/TagView';
 import CategoryModifier from '../InnerComponents/CategoryModifier';
diff --git a/app/javascript/tagging/components/TaggingWithButtons/TaggingWithButtons.jsx b/app/javascript/tagging/components/TaggingWithButtons/TaggingWithButtons.jsx
index 76d2741bcd2..96029f94a89 100644
--- a/app/javascript/tagging/components/TaggingWithButtons/TaggingWithButtons.jsx
+++ b/app/javascript/tagging/components/TaggingWithButtons/TaggingWithButtons.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import {
   Grid, Row, ButtonSet, Button,
-} from 'carbon-components-react';
+} from "@carbon/react";
 import Tagging from '../Tagging/Tagging';
 import TaggingPropTypes from '../TaggingPropTypes';
 
diff --git a/app/stylesheet/carbon.scss b/app/stylesheet/carbon.scss
index 51dde8c0fc3..cb53c4633fa 100644
--- a/app/stylesheet/carbon.scss
+++ b/app/stylesheet/carbon.scss
@@ -12,6 +12,8 @@ $css--body: false;
 $css--reset: false;
 $css--default-type: false;
 
+@use '@carbon/react';
+
 // Use the white theme
 @import '~@carbon/themes/scss/themes';
 $carbon--theme: $carbon--theme--white;
@@ -19,7 +21,6 @@ $carbon--theme: $carbon--theme--white;
 @include carbon--theme();
 
 @import '~@carbon/charts/styles.css';
-@import '~carbon-components/scss/globals/scss/styles.scss';
 
 // ignored by patternfly, but sets the right base for carbon rem units
 html {
diff --git a/config/webpack/loaders.js b/config/webpack/loaders.js
index fba7cfef5de..60c147e93dd 100644
--- a/config/webpack/loaders.js
+++ b/config/webpack/loaders.js
@@ -73,6 +73,7 @@ module.exports = [
           sassOptions: {
             sourceMap: true,
             includePaths: [
+              `${nodeModules}`,
               `${nodeModules}/bootstrap-sass/assets/stylesheets`,
               `${nodeModules}/bootstrap/scss`,
               `${nodeModules}/patternfly/dist/sass/patternfly`,
diff --git a/package.json b/package.json
index 6feae419a07..d4311267cff 100644
--- a/package.json
+++ b/package.json
@@ -34,7 +34,7 @@
   "dependencies": {
     "@carbon/charts": "^0.58.2",
     "@carbon/charts-react": "^0.58.2",
-    "@carbon/icons-react": "~10.49.5",
+    "@carbon/react": "^1.91.0",
     "@carbon/themes": "~10.55.5",
     "@data-driven-forms/carbon-component-mapper": "~3.18.8",
     "@data-driven-forms/react-form-renderer": "~3.18.8",
@@ -59,7 +59,7 @@
     "awesome-debounce-promise": "^2.1.0",
     "bootstrap-filestyle": "~1.2.1",
     "bootstrap-select": "^1.13.18",
-    "bootstrap-switch": "3.4.0",
+    "bootstrap-switch": "3.3.4",
     "carbon-components": "~10.58.15",
     "carbon-components-react": "~7.59.24",
     "carbon-icons": "~7.0.7",
@@ -86,11 +86,11 @@
     "patternfly": "~3.59.5",
     "prop-types": "^15.6.0",
     "proxy-polyfill": "^0.1.7",
-    "react": "~16.13.1",
+    "react": "~17.0.0",
     "react-accessible-treeview": "^2.10.0",
     "react-bootstrap": "~0.33.0",
     "react-codemirror2": "^8.0.0",
-    "react-dom": "~16.13.1",
+    "react-dom": "~17.0.0",
     "react-markdown": "~6.0.3",
     "react-query": "^3.39.3",
     "react-redux": "^7.1.1",
@@ -162,7 +162,7 @@
     "react-test-renderer": "~16.8.0",
     "regenerator-runtime": "~0.13.5",
     "resolve-url-loader": "~3.1.5",
-    "sass": "~1.58.0",
+    "sass": "^1.93.1",
     "sass-loader": "~8.0.2",
     "style-loader": "~1.1.3",
     "stylelint": "~14.5.1",
@@ -181,6 +181,7 @@
   },
   "packageManager": "yarn@4.10.3",
   "resolutions": {
+    "acorn": "7.3.0",
     "angular": "~1.8.3",
     "angular-animate": "~1.8.3",
     "angular-sanitize": "~1.8.3",
@@ -199,6 +200,7 @@
     "path-to-regexp": "~8.0.0",
     "patternfly": "~3.59.5",
     "request": "npm:@cypress/request@^3.0.9",
+    "react": "~17.0.0",
     "terser": "~4.8.1"
   }
 }
diff --git a/yarn.lock b/yarn.lock
index 4ca5dc05748..2ab5c39e9cf 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1420,6 +1420,17 @@ __metadata:
   version: 7.28.4
   resolution: "@babel/runtime@npm:7.28.4"
   checksum: 10/6c9a70452322ea80b3c9b2a412bcf60771819213a67576c8cec41e88a95bb7bf01fc983754cda35dc19603eef52df22203ccbf7777b9d6316932f9fb77c25163
+"@babel/runtime@npm:^7.1.2, @babel/runtime@npm:^7.10.0, @babel/runtime@npm:^7.10.2, @babel/runtime@npm:^7.11.2, @babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.19.4, @babel/runtime@npm:^7.23.8, @babel/runtime@npm:^7.3.1, @babel/runtime@npm:^7.5.5, @babel/runtime@npm:^7.6.2, @babel/runtime@npm:^7.6.3, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.7.6, @babel/runtime@npm:^7.8.3, @babel/runtime@npm:^7.9.2":
+  version: 7.27.6
+  resolution: "@babel/runtime@npm:7.27.6"
+  checksum: 10/cc957a12ba3781241b83d528eb69ddeb86ca5ac43179a825e83aa81263a6b3eb88c57bed8a937cdeacfc3192e07ec24c73acdfea4507d0c0428c8e23d6322bfe
+  languageName: node
+  linkType: hard
+
+"@babel/runtime@npm:^7.16.7, @babel/runtime@npm:^7.24.5, @babel/runtime@npm:^7.27.3, @babel/runtime@npm:^7.9.1":
+  version: 7.28.4
+  resolution: "@babel/runtime@npm:7.28.4"
+  checksum: 10/6c9a70452322ea80b3c9b2a412bcf60771819213a67576c8cec41e88a95bb7bf01fc983754cda35dc19603eef52df22203ccbf7777b9d6316932f9fb77c25163
   languageName: node
   linkType: hard
 
@@ -1516,6 +1527,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@carbon/colors@npm:^11.40.0":
+  version: 11.40.0
+  resolution: "@carbon/colors@npm:11.40.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10/f32e472536eec817c60fe3edad0ff6503c29eb64fa20dcd7f841da7be3c2982073d444a3df274eed372fbd238e887368a4633ecad5d2e7feed0214fc1833a2e6
+  languageName: node
+  linkType: hard
+
+"@carbon/feature-flags@npm:^0.30.0":
+  version: 0.30.0
+  resolution: "@carbon/feature-flags@npm:0.30.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10/242fb956772adb2faddd213d8c25b1c65dff369593547c4b7a8c5dd9a03f91fffca376132ea0fcca377e030e6b6040b63d0c7c159739ead7426dd32dac4af217
+  languageName: node
+  linkType: hard
+
 "@carbon/feature-flags@npm:^0.7.2":
   version: 0.7.3
   resolution: "@carbon/feature-flags@npm:0.7.3"
@@ -1536,6 +1565,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@carbon/grid@npm:^11.43.0":
+  version: 11.43.0
+  resolution: "@carbon/grid@npm:11.43.0"
+  dependencies:
+    "@carbon/layout": "npm:^11.41.0"
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10/3cee03765051b28b1df793a32107c9981e65f43eca6dcf2e82a3a7c696d1e34a8d827d962ef666762d3cb6d453eda97c4ce43e0190a18947cd1369930fc94388
+  languageName: node
+  linkType: hard
+
 "@carbon/icon-helpers@npm:^10.28.5":
   version: 10.67.0
   resolution: "@carbon/icon-helpers@npm:10.67.0"
@@ -1545,7 +1584,16 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@carbon/icons-react@npm:^10.49.0, @carbon/icons-react@npm:^10.49.5, @carbon/icons-react@npm:~10.49.5":
+"@carbon/icon-helpers@npm:^10.66.0":
+  version: 10.66.0
+  resolution: "@carbon/icon-helpers@npm:10.66.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10/63d1a63e4e3eeb53955bcd9e9f2f42f47b1c7cceb341e8398d249424826c79359070d09b8a76f773aabe77299f02253ae6d9e8bd5e51c987848cd99f6377178f
+  languageName: node
+  linkType: hard
+
+"@carbon/icons-react@npm:^10.49.0, @carbon/icons-react@npm:^10.49.5":
   version: 10.49.6
   resolution: "@carbon/icons-react@npm:10.49.6"
   dependencies:
@@ -1558,6 +1606,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@carbon/icons-react@npm:^11.67.0":
+  version: 11.67.0
+  resolution: "@carbon/icons-react@npm:11.67.0"
+  dependencies:
+    "@carbon/icon-helpers": "npm:^10.66.0"
+    "@ibm/telemetry-js": "npm:^1.5.0"
+    prop-types: "npm:^15.8.1"
+  peerDependencies:
+    react: ">=16"
+  checksum: 10/f4dd61a3e5a73dd1725c3271fad398d7360d7ebf7c0ca2874c83cf043e5dcbe3295b57a51524db0e62e502c5bd226f5973bbbf5427707b9d19698e39d98dbbbc
+  languageName: node
+  linkType: hard
+
 "@carbon/import-once@npm:^10.7.3":
   version: 10.7.3
   resolution: "@carbon/import-once@npm:10.7.3"
@@ -1576,6 +1637,85 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@carbon/layout@npm:^11.41.0":
+  version: 11.41.0
+  resolution: "@carbon/layout@npm:11.41.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10/4e4d2f2ecc98cd96d974adaf4bc6535a851c4b212004a6eea56f1dad976deb41d408645802ecc8668e9af8fef0c05e86fe12c52149dcdc4e30d486982dc6e24d
+  languageName: node
+  linkType: hard
+
+"@carbon/motion@npm:^11.35.0":
+  version: 11.35.0
+  resolution: "@carbon/motion@npm:11.35.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10/adf191802de28850b24aed2ca2b4ab429d0b203c1c6e5b71f332e1f3299a0cbfe6794c2850aaf7efa63d34fea78c7acdcf0b487630efd8cc0f1a9bc02a84ae7f
+  languageName: node
+  linkType: hard
+
+"@carbon/react@npm:^1.91.0":
+  version: 1.91.0
+  resolution: "@carbon/react@npm:1.91.0"
+  dependencies:
+    "@babel/runtime": "npm:^7.27.3"
+    "@carbon/feature-flags": "npm:^0.30.0"
+    "@carbon/icons-react": "npm:^11.67.0"
+    "@carbon/layout": "npm:^11.41.0"
+    "@carbon/styles": "npm:^1.90.0"
+    "@carbon/utilities": "npm:^0.10.0"
+    "@floating-ui/react": "npm:^0.27.4"
+    "@ibm/telemetry-js": "npm:^1.5.0"
+    classnames: "npm:2.5.1"
+    copy-to-clipboard: "npm:^3.3.1"
+    downshift: "npm:9.0.10"
+    es-toolkit: "npm:^1.27.0"
+    flatpickr: "npm:4.6.13"
+    invariant: "npm:^2.2.3"
+    prop-types: "npm:^15.8.1"
+    react-fast-compare: "npm:^3.2.2"
+    tabbable: "npm:^6.2.0"
+    window-or-global: "npm:^1.0.1"
+  peerDependencies:
+    react: ^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0
+    react-dom: ^16.8.6 || ^17.0.1 || ^18.2.0 || ^19.0.0
+    react-is: ^16.13.1 || ^17.0.2 || ^18.3.1 || ^19.0.0
+    sass: ^1.33.0
+  checksum: 10/02418f5db8b2cdca5b61252dbf7a4e88641c70f7aede75b8b747a30c78e2847eb9e8acbb965b0bf3b2573e0538a19d1abb7a4dea400831761957849ca6109f04
+  languageName: node
+  linkType: hard
+
+"@carbon/styles@npm:^1.90.0":
+  version: 1.90.0
+  resolution: "@carbon/styles@npm:1.90.0"
+  dependencies:
+    "@carbon/colors": "npm:^11.40.0"
+    "@carbon/feature-flags": "npm:^0.30.0"
+    "@carbon/grid": "npm:^11.43.0"
+    "@carbon/layout": "npm:^11.41.0"
+    "@carbon/motion": "npm:^11.35.0"
+    "@carbon/themes": "npm:^11.60.0"
+    "@carbon/type": "npm:^11.47.0"
+    "@ibm/plex": "npm:6.0.0-next.6"
+    "@ibm/plex-mono": "npm:1.1.0"
+    "@ibm/plex-sans": "npm:1.1.0"
+    "@ibm/plex-sans-arabic": "npm:1.1.0"
+    "@ibm/plex-sans-devanagari": "npm:1.1.0"
+    "@ibm/plex-sans-hebrew": "npm:0.0.3-alpha.0"
+    "@ibm/plex-sans-thai": "npm:0.0.3-alpha.0"
+    "@ibm/plex-sans-thai-looped": "npm:0.0.3-alpha.0"
+    "@ibm/plex-serif": "npm:0.0.3-alpha.0"
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  peerDependencies:
+    sass: ^1.33.0
+  peerDependenciesMeta:
+    sass:
+      optional: true
+  checksum: 10/863696ee351abca81d60762786e9e722ee79ced2d00012fd62916b731d8ad6c8656a06f2a73ff9aa5b35e9afa70e6938fe6d4d9ee5bce632a6ce928f0cb6f69b
+  languageName: node
+  linkType: hard
+
 "@carbon/telemetry@npm:0.1.0":
   version: 0.1.0
   resolution: "@carbon/telemetry@npm:0.1.0"
@@ -1585,6 +1725,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@carbon/themes@npm:^11.60.0":
+  version: 11.60.0
+  resolution: "@carbon/themes@npm:11.60.0"
+  dependencies:
+    "@carbon/colors": "npm:^11.40.0"
+    "@carbon/layout": "npm:^11.41.0"
+    "@carbon/type": "npm:^11.47.0"
+    "@ibm/telemetry-js": "npm:^1.5.0"
+    color: "npm:^4.0.0"
+  checksum: 10/fcf44be6a9d8f29ad349683953f74a916ea0cbc4a3b06433e8fe6807eb84365df0ea8bd6212fdedfde275177f1b232edd32b65361b8313b6a07c98ca7a7d4831
+  languageName: node
+  linkType: hard
+
 "@carbon/themes@npm:~10.55.5":
   version: 10.55.6
   resolution: "@carbon/themes@npm:10.55.6"
@@ -1609,6 +1762,27 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@carbon/type@npm:^11.47.0":
+  version: 11.47.0
+  resolution: "@carbon/type@npm:11.47.0"
+  dependencies:
+    "@carbon/grid": "npm:^11.43.0"
+    "@carbon/layout": "npm:^11.41.0"
+    "@ibm/telemetry-js": "npm:^1.5.0"
+  checksum: 10/be1ce47b28aea513129241c6e1612a517685842c9ab3263f6d5ab01a08269a998fd5bba0ea2e5f042807ce588792a8c426e4152624382267323d777644f497e5
+  languageName: node
+  linkType: hard
+
+"@carbon/utilities@npm:^0.10.0":
+  version: 0.10.0
+  resolution: "@carbon/utilities@npm:0.10.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.6.1"
+    "@internationalized/number": "npm:^3.6.1"
+  checksum: 10/b07b72f945b9996879c63c6793fbd7aa96f9cac5fb6f415345bec79e9aa65f3df822bc4e2e8e12681c0c28a231c2cda6c4a8293c4c0f2e5fd76266d4ff924f28
+  languageName: node
+  linkType: hard
+
 "@carbon/utils-position@npm:1.1.1":
   version: 1.1.1
   resolution: "@carbon/utils-position@npm:1.1.1"
@@ -1760,6 +1934,58 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@floating-ui/core@npm:^1.7.3":
+  version: 1.7.3
+  resolution: "@floating-ui/core@npm:1.7.3"
+  dependencies:
+    "@floating-ui/utils": "npm:^0.2.10"
+  checksum: 10/a8952ff2673ddf28f12feeb86d90c54949e45bcb1af5758b7672850ac0dadb36d4bd61aa45dad1b6a35ba40d4756d3573afac6610b90502639d7266b91e0864e
+  languageName: node
+  linkType: hard
+
+"@floating-ui/dom@npm:^1.7.4":
+  version: 1.7.4
+  resolution: "@floating-ui/dom@npm:1.7.4"
+  dependencies:
+    "@floating-ui/core": "npm:^1.7.3"
+    "@floating-ui/utils": "npm:^0.2.10"
+  checksum: 10/d3d6a23e7b9804ba56338c7c666590258683af14b6026270d32afc1202f72b5b82cca359004bdc7830bf2463a045da6c7bd4e7d5351218cf270ff94206197971
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react-dom@npm:^2.1.6":
+  version: 2.1.6
+  resolution: "@floating-ui/react-dom@npm:2.1.6"
+  dependencies:
+    "@floating-ui/dom": "npm:^1.7.4"
+  peerDependencies:
+    react: ">=16.8.0"
+    react-dom: ">=16.8.0"
+  checksum: 10/fbfd3319b42edb9c156e4e872f500d2edb112bc9cfd1b45892bff16ccf21c2484ddc9c416f7631c2aaaadec1b2f98b205db8a3f89eb78ca870905fcfe3917c35
+  languageName: node
+  linkType: hard
+
+"@floating-ui/react@npm:^0.27.4":
+  version: 0.27.16
+  resolution: "@floating-ui/react@npm:0.27.16"
+  dependencies:
+    "@floating-ui/react-dom": "npm:^2.1.6"
+    "@floating-ui/utils": "npm:^0.2.10"
+    tabbable: "npm:^6.0.0"
+  peerDependencies:
+    react: ">=17.0.0"
+    react-dom: ">=17.0.0"
+  checksum: 10/b9baedee124035323a8f74794ec782678faf52af1c88731ce7d2641b7e7c97748fda1e711a3c4db007a0153d93158d867f4726ee632d713d3de76ec4bdfd84e1
+  languageName: node
+  linkType: hard
+
+"@floating-ui/utils@npm:^0.2.10":
+  version: 0.2.10
+  resolution: "@floating-ui/utils@npm:0.2.10"
+  checksum: 10/b635ea865a8be2484b608b7157f5abf9ed439f351011a74b7e988439e2898199a9a8b790f52291e05bdcf119088160dc782d98cff45cc98c5a271bc6f51327ae
+  languageName: node
+  linkType: hard
+
 "@gar/promisify@npm:^1.0.1":
   version: 1.1.3
   resolution: "@gar/promisify@npm:1.1.3"
@@ -1767,6 +1993,77 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ibm/plex-mono@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@ibm/plex-mono@npm:1.1.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.6.1"
+  checksum: 10/dc9deecac43c7db641e472cb350b883042d8833f103fb0b2ebbb435750908a77c7f60d57ab90da9b3cc05f8c026ba0104506231f3905ec125ae644d923cbe813
+  languageName: node
+  linkType: hard
+
+"@ibm/plex-sans-arabic@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@ibm/plex-sans-arabic@npm:1.1.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.6.1"
+  checksum: 10/69bfd4d9f80ecfeb5365a5be84453e877275e8c1b8cbdefcf7ba15d01157face0e6ed524a3b8f2b993e4de85abbd53811b5eaf6ecd6b31391e5e8d7d1c268356
+  languageName: node
+  linkType: hard
+
+"@ibm/plex-sans-devanagari@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@ibm/plex-sans-devanagari@npm:1.1.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.6.1"
+  checksum: 10/a6b05ad8c4d556cb439d5b51c94ebb8152c1a26cb9e86f6b3a95808b6a2c4c21fab29a96296ac4af7bde8d46c8360e8bea7f082054a088f96eb3949a77241e93
+  languageName: node
+  linkType: hard
+
+"@ibm/plex-sans-hebrew@npm:0.0.3-alpha.0":
+  version: 0.0.3-alpha.0
+  resolution: "@ibm/plex-sans-hebrew@npm:0.0.3-alpha.0"
+  checksum: 10/e67ed6e081dbf9a522eca8e35471a329c788e6a03042df89649b034eaa2e66898bc44b72c0c0f57d93d24b37796cfc92729cee7754eb83ec2cd27f1fa9bdeea6
+  languageName: node
+  linkType: hard
+
+"@ibm/plex-sans-thai-looped@npm:0.0.3-alpha.0":
+  version: 0.0.3-alpha.0
+  resolution: "@ibm/plex-sans-thai-looped@npm:0.0.3-alpha.0"
+  checksum: 10/11272b1353611fed07788a870793ca6f45c644f47faa99880d5278552a7acd85b0696ca02336b7aa8e29bf5d6353538d322149cb8b6b2e65985c38f0af6359fe
+  languageName: node
+  linkType: hard
+
+"@ibm/plex-sans-thai@npm:0.0.3-alpha.0":
+  version: 0.0.3-alpha.0
+  resolution: "@ibm/plex-sans-thai@npm:0.0.3-alpha.0"
+  checksum: 10/baac49d77d2075ee6ecbd5ed22d938b1afca898e5d8d9948f079613d2be011216acf52a6ae555e3cf732d8aa60b7b89b1eaef4380590a66270d7b166067a271a
+  languageName: node
+  linkType: hard
+
+"@ibm/plex-sans@npm:1.1.0":
+  version: 1.1.0
+  resolution: "@ibm/plex-sans@npm:1.1.0"
+  dependencies:
+    "@ibm/telemetry-js": "npm:^1.6.1"
+  checksum: 10/065c244f5f741d60423bd714554365b323d551e8227861244d51e03c05bcd1808caa041f4909284120b3ab2bf4a5d4d0a54469013af4701b741875cf29a77b2d
+  languageName: node
+  linkType: hard
+
+"@ibm/plex-serif@npm:0.0.3-alpha.0":
+  version: 0.0.3-alpha.0
+  resolution: "@ibm/plex-serif@npm:0.0.3-alpha.0"
+  checksum: 10/462dcf33937f50f5a0ecf320f1d930c612e92293aa40dda08c05f6630d8795e4233023bb4f8ed3d340d2dbbd82a4b7ec5ae5e511f4260b16ff9ade6f481e48e8
+  languageName: node
+  linkType: hard
+
+"@ibm/plex@npm:6.0.0-next.6":
+  version: 6.0.0-next.6
+  resolution: "@ibm/plex@npm:6.0.0-next.6"
+  checksum: 10/1a814759646855a01aa0e76fd3bb76ff3ce67e6eee3173a89faeb9ab2df9147319cf2f6e4e711ffd7e2b253e1e1046a0fc4dd54c4cf11c91addc8a25f00509de
+  languageName: node
+  linkType: hard
+
 "@ibm/telemetry-js@npm:^1.5.0":
   version: 1.10.2
   resolution: "@ibm/telemetry-js@npm:1.10.2"
@@ -1776,6 +2073,24 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@ibm/telemetry-js@npm:^1.6.1":
+  version: 1.10.2
+  resolution: "@ibm/telemetry-js@npm:1.10.2"
+  bin:
+    ibmtelemetry: dist/collect.js
+  checksum: 10/bc1802cf691b0bb9df8cc19c8f4ab03b8022b5a53df778a9e99c817f708c51a02f440ea395ceb3656f057c8aa6356d5271f54eb3af3bcbb5c0b536fea9af2e36
+  languageName: node
+  linkType: hard
+
+"@internationalized/number@npm:^3.6.1":
+  version: 3.6.5
+  resolution: "@internationalized/number@npm:3.6.5"
+  dependencies:
+    "@swc/helpers": "npm:^0.5.0"
+  checksum: 10/f80618842b9b8ea04e235277911eeb8e2ee129f1b266b94704a9f773df7536486c25db41ae708f6c2f4845cdb0a25e7d1856332370daba6c530528ac0ee997e3
+  languageName: node
+  linkType: hard
+
 "@isaacs/cliui@npm:^8.0.2":
   version: 8.0.2
   resolution: "@isaacs/cliui@npm:8.0.2"
@@ -2443,6 +2758,150 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@parcel/watcher-android-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-android-arm64@npm:2.5.1"
+  conditions: os=android & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-darwin-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-darwin-arm64@npm:2.5.1"
+  conditions: os=darwin & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-darwin-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-darwin-x64@npm:2.5.1"
+  conditions: os=darwin & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-freebsd-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-freebsd-x64@npm:2.5.1"
+  conditions: os=freebsd & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=arm & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm-musl@npm:2.5.1"
+  conditions: os=linux & cpu=arm & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm64-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm64-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=arm64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-arm64-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-arm64-musl@npm:2.5.1"
+  conditions: os=linux & cpu=arm64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-x64-glibc@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-x64-glibc@npm:2.5.1"
+  conditions: os=linux & cpu=x64 & libc=glibc
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-linux-x64-musl@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-linux-x64-musl@npm:2.5.1"
+  conditions: os=linux & cpu=x64 & libc=musl
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-arm64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-arm64@npm:2.5.1"
+  conditions: os=win32 & cpu=arm64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-ia32@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-ia32@npm:2.5.1"
+  conditions: os=win32 & cpu=ia32
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher-win32-x64@npm:2.5.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher-win32-x64@npm:2.5.1"
+  conditions: os=win32 & cpu=x64
+  languageName: node
+  linkType: hard
+
+"@parcel/watcher@npm:^2.4.1":
+  version: 2.5.1
+  resolution: "@parcel/watcher@npm:2.5.1"
+  dependencies:
+    "@parcel/watcher-android-arm64": "npm:2.5.1"
+    "@parcel/watcher-darwin-arm64": "npm:2.5.1"
+    "@parcel/watcher-darwin-x64": "npm:2.5.1"
+    "@parcel/watcher-freebsd-x64": "npm:2.5.1"
+    "@parcel/watcher-linux-arm-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-arm-musl": "npm:2.5.1"
+    "@parcel/watcher-linux-arm64-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-arm64-musl": "npm:2.5.1"
+    "@parcel/watcher-linux-x64-glibc": "npm:2.5.1"
+    "@parcel/watcher-linux-x64-musl": "npm:2.5.1"
+    "@parcel/watcher-win32-arm64": "npm:2.5.1"
+    "@parcel/watcher-win32-ia32": "npm:2.5.1"
+    "@parcel/watcher-win32-x64": "npm:2.5.1"
+    detect-libc: "npm:^1.0.3"
+    is-glob: "npm:^4.0.3"
+    micromatch: "npm:^4.0.5"
+    node-addon-api: "npm:^7.0.0"
+    node-gyp: "npm:latest"
+  dependenciesMeta:
+    "@parcel/watcher-android-arm64":
+      optional: true
+    "@parcel/watcher-darwin-arm64":
+      optional: true
+    "@parcel/watcher-darwin-x64":
+      optional: true
+    "@parcel/watcher-freebsd-x64":
+      optional: true
+    "@parcel/watcher-linux-arm-glibc":
+      optional: true
+    "@parcel/watcher-linux-arm-musl":
+      optional: true
+    "@parcel/watcher-linux-arm64-glibc":
+      optional: true
+    "@parcel/watcher-linux-arm64-musl":
+      optional: true
+    "@parcel/watcher-linux-x64-glibc":
+      optional: true
+    "@parcel/watcher-linux-x64-musl":
+      optional: true
+    "@parcel/watcher-win32-arm64":
+      optional: true
+    "@parcel/watcher-win32-ia32":
+      optional: true
+    "@parcel/watcher-win32-x64":
+      optional: true
+  checksum: 10/2cc1405166fb3016b34508661902ab08b6dec59513708165c633c84a4696fff64f9b99ea116e747c121215e09619f1decab6f0350d1cb26c9210b98eb28a6a56
+  languageName: node
+  linkType: hard
+
 "@pf3/select@npm:~1.12.6":
   version: 1.12.6
   resolution: "@pf3/select@npm:1.12.6"
@@ -2477,6 +2936,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@swc/helpers@npm:^0.5.0":
+  version: 0.5.17
+  resolution: "@swc/helpers@npm:0.5.17"
+  dependencies:
+    tslib: "npm:^2.8.0"
+  checksum: 10/1fc8312a78f1f99c8ec838585445e99763eeebff2356100738cdfdb8ad47d2d38df678ee6edd93a90fe319ac52da67adc14ac00eb82b606c5fb8ebc5d06ec2a2
+  languageName: node
+  linkType: hard
+
 "@tootallnate/once@npm:1":
   version: 1.1.2
   resolution: "@tootallnate/once@npm:1.1.2"
@@ -3563,48 +4031,12 @@ __metadata:
   languageName: node
   linkType: hard
 
-"acorn@npm:^5.5.3":
-  version: 5.7.4
-  resolution: "acorn@npm:5.7.4"
-  bin:
-    acorn: bin/acorn
-  checksum: 10/97f2ae55e99aed81a7aa9039719c60283a66817fadb3152beb323ba6038824770512f807436e99090be38602f23bcbf6021867d86442616da471f1dfaca7c3d9
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^6.0.1, acorn@npm:^6.4.1":
-  version: 6.4.2
-  resolution: "acorn@npm:6.4.2"
-  bin:
-    acorn: bin/acorn
-  checksum: 10/b430c346813289daf1b4e673333d10c54a7c452a776f097597c7b0bd71c7ff58f0e8f850f334963eac806a52928985ff20c0fa39c67cd5276d10e0ed4370f9c8
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^7.1.1, acorn@npm:^7.4.0":
-  version: 7.4.1
-  resolution: "acorn@npm:7.4.1"
-  bin:
-    acorn: bin/acorn
-  checksum: 10/8be2a40714756d713dfb62544128adce3b7102c6eb94bc312af196c2cc4af76e5b93079bd66b05e9ca31b35a9b0ce12171d16bc55f366cafdb794fdab9d753ec
-  languageName: node
-  linkType: hard
-
-"acorn@npm:^8.2.4, acorn@npm:^8.5.0":
-  version: 8.15.0
-  resolution: "acorn@npm:8.15.0"
+"acorn@npm:7.3.0":
+  version: 7.3.0
+  resolution: "acorn@npm:7.3.0"
   bin:
     acorn: bin/acorn
-  checksum: 10/77f2de5051a631cf1729c090e5759148459cdb76b5f5c70f890503d629cf5052357b0ce783c0f976dd8a93c5150f59f6d18df1def3f502396a20f81282482fa4
-  languageName: node
-  linkType: hard
-
-"acorn@npm:~2.6.4":
-  version: 2.6.4
-  resolution: "acorn@npm:2.6.4"
-  bin:
-    acorn: ./bin/acorn
-  checksum: 10/e721cc4399fb5d8d4919349255e7eb1f33948d9d3c8e4b0881344153095d66f4282c8b958b60d1df05757f3a7dcc3c9844aa2961f3f15ee79d24ca906536ac97
+  checksum: 10/6535108791c19b2f98fef738f2ec56ae7fabd627461f43989a9ba9469ae6e3ee1232b4509bd0f34ecbd13cdbddeb04a756b33791e13b2c9f9e5f12f04b1907a4
   languageName: node
   linkType: hard
 
@@ -5386,18 +5818,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"carbon-components@npm:~10.58.15":
-  version: 10.58.15
-  resolution: "carbon-components@npm:10.58.15"
-  dependencies:
-    "@carbon/telemetry": "npm:0.1.0"
-    flatpickr: "npm:4.6.1"
-    lodash.debounce: "npm:^4.0.8"
-    warning: "npm:^3.0.0"
-  checksum: 10/f76ba22855a87a6015ab9e810199f55fc1d2e55bc3ab829ed1dff1ad545a8a53b503642e5eafcd27796308ab36365bbd7b5d6a9c0cbcf3f366c73fbffd28b66a
-  languageName: node
-  linkType: hard
-
 "carbon-icons@npm:~7.0.7":
   version: 7.0.7
   resolution: "carbon-icons@npm:7.0.7"
@@ -5562,6 +5982,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"chokidar@npm:^3.4.1, chokidar@npm:^3.5.3":
+  version: 3.6.0
+  resolution: "chokidar@npm:3.6.0"
+  dependencies:
+    anymatch: "npm:~3.1.2"
+    braces: "npm:~3.0.2"
+    fsevents: "npm:~2.3.2"
+    glob-parent: "npm:~5.1.2"
+    is-binary-path: "npm:~2.1.0"
+    is-glob: "npm:~4.0.1"
+    normalize-path: "npm:~3.0.0"
+    readdirp: "npm:~3.6.0"
+  dependenciesMeta:
+    fsevents:
+      optional: true
+  checksum: 10/c327fb07704443f8d15f7b4a7ce93b2f0bc0e6cea07ec28a7570aa22cd51fcf0379df589403976ea956c369f25aa82d84561947e227cd925902e1751371658df
+  languageName: node
+  linkType: hard
+
+"chokidar@npm:^4.0.0":
+  version: 4.0.3
+  resolution: "chokidar@npm:4.0.3"
+  dependencies:
+    readdirp: "npm:^4.0.1"
+  checksum: 10/bf2a575ea5596000e88f5db95461a9d59ad2047e939d5a4aac59dd472d126be8f1c1ff3c7654b477cf532d18f42a97279ef80ee847972fd2a25410bf00b80b59
+  languageName: node
+  linkType: hard
+
 "chownr@npm:^1.1.1":
   version: 1.1.4
   resolution: "chownr@npm:1.1.4"
@@ -5641,6 +6089,7 @@ __metadata:
   languageName: node
   linkType: hard
 
+"classnames@npm:2.5.1, classnames@npm:^2.2.5":
 "classnames@npm:^2.2.5, classnames@npm:~2.5.0":
   version: 2.5.1
   resolution: "classnames@npm:2.5.1"
@@ -5806,7 +6255,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-string@npm:^1.6.0":
+"color-string@npm:^1.6.0, color-string@npm:^1.9.0":
   version: 1.9.1
   resolution: "color-string@npm:1.9.1"
   dependencies:
@@ -5826,6 +6275,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"color@npm:^4.0.0":
+  version: 4.2.3
+  resolution: "color@npm:4.2.3"
+  dependencies:
+    color-convert: "npm:^2.0.1"
+    color-string: "npm:^1.9.0"
+  checksum: 10/b23f5e500a79ea22428db43d1a70642d983405c0dd1f95ef59dbdb9ba66afbb4773b334fa0b75bb10b0552fd7534c6b28d4db0a8b528f91975976e70973c0152
+  languageName: node
+  linkType: hard
+
 "colord@npm:^2.9.2":
   version: 2.9.3
   resolution: "colord@npm:2.9.3"
@@ -5960,6 +6419,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"compute-scroll-into-view@npm:^3.1.0":
+  version: 3.1.1
+  resolution: "compute-scroll-into-view@npm:3.1.1"
+  checksum: 10/b68827555c39862cf3d7def838f3b8ee3751e3e88b9ec3bb601484666f0596963cd91db16b23248e14759339cf2ddff72b9c53c3070f6fd27177393ea83185f3
+  languageName: node
+  linkType: hard
+
 "concat-stream@npm:^1.5.0":
   version: 1.6.2
   resolution: "concat-stream@npm:1.6.2"
@@ -7272,6 +7738,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"detect-libc@npm:^1.0.3":
+  version: 1.0.3
+  resolution: "detect-libc@npm:1.0.3"
+  bin:
+    detect-libc: ./bin/detect-libc.js
+  checksum: 10/3849fe7720feb153e4ac9407086956e073f1ce1704488290ef0ca8aab9430a8d48c8a9f8351889e7cdc64e5b1128589501e4fef48f3a4a49ba92cd6d112d0757
+  languageName: node
+  linkType: hard
+
 "detect-newline@npm:^2.1.0":
   version: 2.1.0
   resolution: "detect-newline@npm:2.1.0"
@@ -7476,6 +7951,21 @@ __metadata:
   languageName: node
   linkType: hard
 
+"downshift@npm:9.0.10":
+  version: 9.0.10
+  resolution: "downshift@npm:9.0.10"
+  dependencies:
+    "@babel/runtime": "npm:^7.24.5"
+    compute-scroll-into-view: "npm:^3.1.0"
+    prop-types: "npm:^15.8.1"
+    react-is: "npm:18.2.0"
+    tslib: "npm:^2.6.2"
+  peerDependencies:
+    react: ">=16.12.0"
+  checksum: 10/eb102d7eb18613c292b2b3e2b42ec70eb36ddda4d2bbcb544cc85932359b727ac566de4f3cf66123741d44fe16ac7639ff148abb5a9702e1f70bfab8ec1a3468
+  languageName: node
+  linkType: hard
+
 "drmonty-datatables-colvis@npm:~1.1.2":
   version: 1.1.2
   resolution: "drmonty-datatables-colvis@npm:1.1.2"
@@ -7952,6 +8442,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"es-toolkit@npm:^1.27.0":
+  version: 1.39.10
+  resolution: "es-toolkit@npm:1.39.10"
+  dependenciesMeta:
+    "@trivago/prettier-plugin-sort-imports@4.3.0":
+      unplugged: true
+    prettier-plugin-sort-re-exports@0.0.1:
+      unplugged: true
+  checksum: 10/e29686bda6131825a4974ae15892d68c33a8e686b634614ebc3bc15c5d0f85f7533fca8613708f01a54b8b9b379794258b6edf3db47d626546477029d1faabbc
+  languageName: node
+  linkType: hard
+
 "es5-ext@npm:^0.10.35, es5-ext@npm:^0.10.62, es5-ext@npm:^0.10.64, es5-ext@npm:~0.10.14":
   version: 0.10.64
   resolution: "es5-ext@npm:0.10.64"
@@ -9013,6 +9515,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"flatpickr@npm:4.6.13":
+  version: 4.6.13
+  resolution: "flatpickr@npm:4.6.13"
+  checksum: 10/0e32f2fbd427aa8d838da8fb0cf2e56b65efc22783dcebcc32c11b7fbb6bbc8c3532f9410915f3acb7dc0feebb49202bea03e49cc80b9d4d11b3bdce49488bc0
+  languageName: node
+  linkType: hard
+
 "flatpickr@npm:4.6.9":
   version: 4.6.9
   resolution: "flatpickr@npm:4.6.9"
@@ -10161,10 +10670,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"immutable@npm:^4.0.0":
-  version: 4.3.7
-  resolution: "immutable@npm:4.3.7"
-  checksum: 10/37d963c5050f03ae5f3714ba7a43d469aa482051087f4c65d673d1501c309ea231d87480c792e19fa85e2eaf965f76af5d0aa92726505f3cfe4af91619dfb80b
+"immutable@npm:^5.0.2":
+  version: 5.1.3
+  resolution: "immutable@npm:5.1.3"
+  checksum: 10/6d29b29036143e7ea1e7f7be581c71bca873ea77c175d33c6c839bf4017265a58c41ec269e3ffcd7b483797fc7fa9c928b4ed3d6edfeeb1b5711d84f60d04090
   languageName: node
   linkType: hard
 
@@ -10680,7 +11189,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:~4.0.1":
+"is-glob@npm:^4.0.0, is-glob@npm:^4.0.1, is-glob@npm:^4.0.3, is-glob@npm:~4.0.1":
   version: 4.0.3
   resolution: "is-glob@npm:4.0.3"
   dependencies:
@@ -13044,7 +13553,7 @@ __metadata:
     "@babel/runtime-corejs3": "npm:~7.28.0"
     "@carbon/charts": "npm:^0.58.2"
     "@carbon/charts-react": "npm:^0.58.2"
-    "@carbon/icons-react": "npm:~10.49.5"
+    "@carbon/react": "npm:^1.91.0"
     "@carbon/themes": "npm:~10.55.5"
     "@data-driven-forms/carbon-component-mapper": "npm:~3.18.8"
     "@data-driven-forms/react-form-renderer": "npm:~3.18.8"
@@ -13073,6 +13582,7 @@ __metadata:
     babel-loader: "npm:~8.4.0"
     bootstrap-filestyle: "npm:~1.2.1"
     bootstrap-select: "npm:^1.13.18"
+    bootstrap-switch: "npm:3.3.4"
     bootstrap-switch: "npm:3.4.0"
     carbon-components: "npm:~10.58.15"
     carbon-components-react: "npm:~7.59.24"
@@ -13133,11 +13643,11 @@ __metadata:
     precss: "npm:~4.0.0"
     prop-types: "npm:^15.6.0"
     proxy-polyfill: "npm:^0.1.7"
-    react: "npm:~16.13.1"
+    react: "npm:~17.0.0"
     react-accessible-treeview: "npm:^2.10.0"
     react-bootstrap: "npm:~0.33.0"
     react-codemirror2: "npm:^8.0.0"
-    react-dom: "npm:~16.13.1"
+    react-dom: "npm:~17.0.0"
     react-markdown: "npm:~6.0.3"
     react-query: "npm:^3.39.3"
     react-redux: "npm:^7.1.1"
@@ -13152,7 +13662,7 @@ __metadata:
     regenerator-runtime: "npm:~0.13.5"
     resolve-url-loader: "npm:~3.1.5"
     rxjs: "npm:~5.6.0-forward-compat.2"
-    sass: "npm:~1.58.0"
+    sass: "npm:^1.93.1"
     sass-loader: "npm:~8.0.2"
     spice-html5-bower: "npm:~1.7.3"
     spin.js: "npm:~4.0.0"
@@ -13411,7 +13921,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.8":
+"micromatch@npm:^4.0.2, micromatch@npm:^4.0.4, micromatch@npm:^4.0.5, micromatch@npm:^4.0.8":
   version: 4.0.8
   resolution: "micromatch@npm:4.0.8"
   dependencies:
@@ -13912,6 +14422,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"node-addon-api@npm:^7.0.0":
+  version: 7.1.1
+  resolution: "node-addon-api@npm:7.1.1"
+  dependencies:
+    node-gyp: "npm:latest"
+  checksum: 10/ee1e1ed6284a2f8cd1d59ac6175ecbabf8978dcf570345e9a8095a9d0a2b9ced591074ae77f9009287b00c402352b38aa9322a34f2199cdc9f567b842a636b94
+  languageName: node
+  linkType: hard
+
 "node-fetch@npm:~2.6.1":
   version: 2.6.13
   resolution: "node-fetch@npm:2.6.13"
@@ -16008,17 +16527,23 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-dom@npm:~16.13.1":
-  version: 16.13.1
-  resolution: "react-dom@npm:16.13.1"
+"react-dom@npm:~17.0.0":
+  version: 17.0.2
+  resolution: "react-dom@npm:17.0.2"
   dependencies:
     loose-envify: "npm:^1.1.0"
     object-assign: "npm:^4.1.1"
-    prop-types: "npm:^15.6.2"
-    scheduler: "npm:^0.19.1"
+    scheduler: "npm:^0.20.2"
   peerDependencies:
-    react: ^16.13.1
-  checksum: 10/e2ba9b449b5aab4b990604c397f06e0fd700652ac28186f6e973081cfc3d6bc8742c7969d7861185c05dca7f1850587355a498dabcf6155eae7aec17fc80cfcf
+    react: 17.0.2
+  checksum: 10/0b3836131a64da8b1c2c852cc28b09c21a738c33c7a8d6021ac20d5619d753c8ee5fff8f97c95f2fc33053e44c2cbce9657453e21c55900164e6e0c3e955e826
+  languageName: node
+  linkType: hard
+
+"react-fast-compare@npm:^3.2.2":
+  version: 3.2.2
+  resolution: "react-fast-compare@npm:3.2.2"
+  checksum: 10/a6826180ba75cefba1c8d3ac539735f9b627ca05d3d307fe155487f5d0228d376dac6c9708d04a283a7b9f9aee599b637446635b79c8c8753d0b4eece56c125c
   languageName: node
   linkType: hard
 
@@ -16048,6 +16573,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"react-is@npm:18.2.0":
+  version: 18.2.0
+  resolution: "react-is@npm:18.2.0"
+  checksum: 10/200cd65bf2e0be7ba6055f647091b725a45dd2a6abef03bf2380ce701fd5edccee40b49b9d15edab7ac08a762bf83cb4081e31ec2673a5bfb549a36ba21570df
+  languageName: node
+  linkType: hard
+
 "react-is@npm:^16.12.0, react-is@npm:^16.13.1, react-is@npm:^16.3.2, react-is@npm:^16.7.0, react-is@npm:^16.8.4, react-is@npm:^16.8.6":
   version: 16.13.1
   resolution: "react-is@npm:16.13.1"
@@ -16258,25 +16790,13 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react@npm:^16.13.1":
-  version: 16.14.0
-  resolution: "react@npm:16.14.0"
-  dependencies:
-    loose-envify: "npm:^1.1.0"
-    object-assign: "npm:^4.1.1"
-    prop-types: "npm:^15.6.2"
-  checksum: 10/ee04c82f5ecb70fe15a48d8cfc3fb20ce2f7e65277d4adcb56a0ac2b82c54550d4c65eabce0d5dc0cc90d053831b9586d72ee515b11cdf0c5436c7f95aafdcda
-  languageName: node
-  linkType: hard
-
-"react@npm:~16.13.1":
-  version: 16.13.1
-  resolution: "react@npm:16.13.1"
+"react@npm:~17.0.0":
+  version: 17.0.2
+  resolution: "react@npm:17.0.2"
   dependencies:
     loose-envify: "npm:^1.1.0"
     object-assign: "npm:^4.1.1"
-    prop-types: "npm:^15.6.2"
-  checksum: 10/b907b97f3b1bf31abf691ea15bd2d674ab0ac9063e15b79e1a7dac0b75c0a0cd5728f69b55c687bd023af58ca586ab7794724ee466fc863d190954e7e1d3885e
+  checksum: 10/ece60c31c1d266d132783aaaffa185d2e4c9b4db144f853933ec690cee1e0600c8929a1dd0a9e79323eea8e2df636c9a06d40f6cfdc9f797f65225433e67f707
   languageName: node
   linkType: hard
 
@@ -16391,6 +16911,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"readdirp@npm:^4.0.1":
+  version: 4.1.2
+  resolution: "readdirp@npm:4.1.2"
+  checksum: 10/7b817c265940dba90bb9c94d82920d76c3a35ea2d67f9f9d8bd936adcfe02d50c802b14be3dd2e725e002dddbe2cc1c7a0edfb1bc3a365c9dfd5a61e612eea1e
+  languageName: node
+  linkType: hard
+
 "readdirp@npm:~3.6.0":
   version: 3.6.0
   resolution: "readdirp@npm:3.6.0"
@@ -17116,16 +17643,20 @@ __metadata:
   languageName: node
   linkType: hard
 
-"sass@npm:~1.58.0":
-  version: 1.58.3
-  resolution: "sass@npm:1.58.3"
+"sass@npm:^1.93.1":
+  version: 1.93.1
+  resolution: "sass@npm:1.93.1"
   dependencies:
-    chokidar: "npm:>=3.0.0 <4.0.0"
-    immutable: "npm:^4.0.0"
+    "@parcel/watcher": "npm:^2.4.1"
+    chokidar: "npm:^4.0.0"
+    immutable: "npm:^5.0.2"
     source-map-js: "npm:>=0.6.2 <2.0.0"
+  dependenciesMeta:
+    "@parcel/watcher":
+      optional: true
   bin:
     sass: sass.js
-  checksum: 10/54df42bdfd1748e079c6602c6ce87eb729c50d13cdd8f78b1537c16ecfd7952bbae138710b5620b232e2095d865799a44fdce80cfc529cb3a1cbb5942e0e3ea2
+  checksum: 10/a09c23d4c3c874c56383fa495f0f9051a107d046036ab4502ff9328c28724adf1dff6b918ba8efa9682391a3849f6f0fc2c877694a590cf38164da93d73318b9
   languageName: node
   linkType: hard
 
@@ -17165,6 +17696,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"scheduler@npm:^0.20.2":
+  version: 0.20.2
+  resolution: "scheduler@npm:0.20.2"
+  dependencies:
+    loose-envify: "npm:^1.1.0"
+    object-assign: "npm:^4.1.1"
+  checksum: 10/898917fa475386953d998add9107c04bf2c335eee86172833995dee126d12a68bee3c29edbd61fa0bcbcb8ee511c422eaab23b86b02f95aab26ecfaed8df5e64
+  languageName: node
+  linkType: hard
+
 "schema-utils@npm:^1.0.0":
   version: 1.0.0
   resolution: "schema-utils@npm:1.0.0"
@@ -18510,6 +19051,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tabbable@npm:^6.0.0, tabbable@npm:^6.2.0":
+  version: 6.2.0
+  resolution: "tabbable@npm:6.2.0"
+  checksum: 10/980fa73476026e99dcacfc0d6e000d41d42c8e670faf4682496d30c625495e412c4369694f2a15cf1e5252d22de3c396f2b62edbe8d60b5dadc40d09e3f2dde3
+  languageName: node
+  linkType: hard
+
 "table-resolver@npm:^4.1.1":
   version: 4.1.1
   resolution: "table-resolver@npm:4.1.1"
@@ -18978,6 +19526,7 @@ __metadata:
   languageName: node
   linkType: hard
 
+"tslib@npm:^2.1.0, tslib@npm:^2.6.2, tslib@npm:^2.8.0":
 "tslib@npm:^2.0.0, tslib@npm:^2.1.0":
   version: 2.8.1
   resolution: "tslib@npm:2.8.1"