From 599a8f3e1d528f2f600a7e5f075b7eed4d9d1ee0 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 30 Mar 2023 21:49:36 -0400
Subject: [PATCH 1/2] feat(Table): deprecate Table and associated components

---
 .../CodeEditor/__test__/CodeEditor.test.tsx   |   14 +
 .../__snapshots__/CodeEditor.test.tsx.snap    |   35 +-
 packages/react-core/src/demos/CardDemos.md    |    8 +-
 .../src/demos/Filters/FilterDemos.md          |    2 +-
 .../examples/FilterAttributeSearch.tsx        |    6 +-
 .../Filters/examples/FilterCheckboxSelect.tsx |    6 +-
 .../demos/Filters/examples/FilterFaceted.tsx  |    6 +-
 .../examples/FilterMixedSelectGroup.tsx       |    6 +-
 .../examples/FilterSameSelectGroup.tsx        |    6 +-
 .../Filters/examples/FilterSearchInput.tsx    |    6 +-
 .../Filters/examples/FilterSingleSelect.tsx   |    6 +-
 .../src/demos/examples/Tabs/TabsAndTable.tsx  |   10 +-
 packages/react-docs/package.json              |    2 +-
 .../patternfly-docs/patternfly-docs.source.js |    2 +-
 .../demos/MastheadDemo/MastheadDemo.tsx       |    2 +
 .../demos/SwitchDemo/SwitchDemo.tsx           |    2 +-
 .../demos/TableDemo/TableCollapsibleDemo.tsx  |    3 +-
 .../demos/TableDemo/TableComposableDemo.tsx   |   58 +-
 .../TableDemo/TableCompoundExpandableDemo.tsx |    5 +-
 .../TableEditableCompoundExpandableDemo.tsx   |    5 +-
 .../demos/TableDemo/TableEditableDemo.tsx     |    6 +-
 .../demos/TableDemo/TableEmptyStateDemo.tsx   |    4 +-
 .../demos/TableDemo/TableFavoritesDemo.tsx    |    3 +-
 .../demos/TableDemo/TableRowClickDemo.tsx     |    5 +-
 .../demos/TableDemo/TableRowWrapperDemo.tsx   |    4 +-
 .../demos/TableDemo/TableSelectableDemo.tsx   |    6 +-
 .../TableDemo/TableSimpleActionsDemo.tsx      |    3 +-
 .../demos/TableDemo/TableSimpleDemo.tsx       |    3 +-
 .../demos/TableDemo/TableSortableDemo.tsx     |    5 +-
 ...TableSortableForCompoundExpandableDemo.tsx |    7 +-
 .../{TableComposable => Table}/Caption.tsx    |    0
 .../components/Table/DraggableRowWrapper.tsx  |    2 +-
 .../Table/EditableSelectInputCell.tsx         |    2 +-
 .../src/components/Table/EditableTextCell.tsx |    2 +-
 .../InnerScrollContainer.tsx                  |    0
 .../OuterScrollContainer.tsx                  |    0
 .../src/components/Table/RowWrapper.tsx       |    2 +-
 .../src/components/Table/Table.tsx            |  439 +++--
 .../src/components/Table/TableTypes.tsx       |    4 +-
 .../{TableComposable => Table}/Tbody.tsx      |    0
 .../{TableComposable => Table}/Td.tsx         |   32 +-
 .../{TableComposable => Table}/Th.tsx         |   28 +-
 .../{TableComposable => Table}/Thead.tsx      |    0
 .../{TableComposable => Table}/Tr.tsx         |    4 +-
 .../src/components/Table/TreeRowWrapper.tsx   |    2 +-
 .../src/components/Table/base/index.ts        |   10 -
 .../src/components/Table/base/types.tsx       |   14 +-
 .../examples/Table.md                         |   32 +-
 .../examples/TableActions.tsx                 |    6 +-
 .../examples/TableActionsOverflow.tsx         |    6 +-
 .../examples/TableBasic.tsx                   |    6 +-
 .../examples/TableCellWidth.tsx               |    6 +-
 .../examples/TableCompoundExpandable.tsx      |    6 +-
 .../examples/TableControllingText.tsx         |    6 +-
 .../examples/TableDraggable.tsx               |    6 +-
 .../examples/TableEmptyState.tsx              |    6 +-
 .../examples/TableExpandable.tsx              |    6 +-
 .../examples/TableFavoritable.tsx             |    6 +-
 .../examples/TableHoverable.tsx               |    6 +-
 .../examples/TableMisc.tsx                    |    6 +-
 .../examples/TableMultipleStickyColumns.tsx   |    6 +-
 .../examples/TableNestedExpandable.tsx        |    6 +-
 .../examples/TableNestedHeaders.tsx           |    6 +-
 .../examples/TableNestedStickyHeader.tsx      |    6 +-
 .../examples/TableNestedTableExpandable.tsx   |   10 +-
 .../examples/TableSelectable.tsx              |    6 +-
 .../examples/TableSelectableRadio.tsx         |    6 +-
 .../examples/TableSortable.tsx                |    6 +-
 .../examples/TableSortableCustom.tsx          |    6 +-
 .../examples/TableStickyColumn.tsx            |    6 +-
 .../examples/TableStickyColumnsAndHeader.tsx  |    6 +-
 .../examples/TableStriped.tsx                 |    6 +-
 .../examples/TableStripedExpandable.tsx       |    6 +-
 .../examples/TableStripedMultipleTbody.tsx    |    6 +-
 .../examples/TableStripedTr.tsx               |    6 +-
 .../examples/TableTextModifiers.tsx           |    6 +-
 .../examples/TableTree.tsx                    |    6 +-
 .../react-table/src/components/Table/index.ts |   16 +-
 .../TableComposable/TableComposable.tsx       |  226 ---
 .../examples/TableRightStickyColumn.tsx       |  153 --
 .../src/components/TableComposable/index.ts   |    9 -
 packages/react-table/src/components/index.ts  |    1 -
 .../components/Table/Body.tsx                 |    5 +-
 .../components/Table/BodyCell.tsx             |    2 +-
 .../components/Table/BodyWrapper.tsx          |    6 +-
 .../components/Table/Header.tsx               |    4 +-
 .../components/Table/HeaderCell.tsx           |    2 +-
 .../src/deprecated/components/Table/Table.tsx |  299 ++++
 .../components/Table/TableContext.ts          |    4 +-
 .../components/Table/__tests__/Table.test.tsx |   14 +-
 .../__snapshots__/Table.test.tsx.snap         |    0
 .../components/Table/base/body-row.tsx        |   17 +-
 .../components/Table/base/body.tsx            |    4 +-
 .../components/Table/base/header-row.tsx      |   16 +-
 .../components/Table/base/header.tsx          |   10 +-
 .../deprecated/components/Table/base/index.ts |    4 +
 .../components/Table/base/resolve-row-key.ts  |    2 +-
 .../Table/examples/LegacyTableActions.tsx     |    8 +-
 .../Table/examples/LegacyTableBasic.tsx       |    4 +-
 .../Table/examples/LegacyTableCellWidth.tsx   |    3 +-
 .../LegacyTableCompoundExpandable.tsx         |    3 +-
 .../examples/LegacyTableControllingText.tsx   |    7 +-
 .../Table/examples/LegacyTableEmptyState.tsx  |    2 +-
 .../Table/examples/LegacyTableExpandable.tsx  |    3 +-
 .../Table/examples/LegacyTableFavoritable.tsx |    3 +-
 .../Table/examples/LegacyTableHoverable.tsx   |    3 +-
 .../Table/examples/LegacyTableMisc.tsx        |    2 +-
 .../Table/examples/LegacyTableSelectable.tsx  |    3 +-
 .../examples/LegacyTableSelectableRadio.tsx   |    3 +-
 .../Table/examples/LegacyTableSortable.tsx    |   12 +-
 .../examples/LegacyTableSortableCustom.tsx    |    3 +-
 .../Table/examples/LegacyTableStriped.tsx     |    2 +-
 .../examples/LegacyTableStripedCustomTr.tsx   |    2 +-
 .../examples/LegacyTableStripedExpandable.tsx |    3 +-
 .../examples/LegacyTableTextModifiers.tsx     |    3 +-
 .../Table/examples/LegacyTableTree.tsx        |   16 +-
 .../src/deprecated/components/Table/index.ts  |    4 +-
 .../src/deprecated/components/index.ts        |    2 +-
 packages/react-table/src/docs/demos/Table.md  |   51 +-
 .../demos/table-demos/ColumnManagement.jsx    |    5 +-
 .../src/docs/demos/table-demos/Compact.jsx    |    6 +-
 .../demos/table-demos/CompoundExpansion.jsx   |   10 +-
 .../demos/table-demos/ExpandCollapseAll.jsx   |    6 +-
 .../demos/table-demos/SortableResponsive.jsx  |    6 +-
 .../table-demos/StaticBottomPagination.jsx    |    6 +-
 .../demos/table-demos/StickyFirstColumn.jsx   |    6 +-
 yarn.lock                                     | 1451 ++++++-----------
 127 files changed, 1395 insertions(+), 2024 deletions(-)
 rename packages/react-table/src/components/{TableComposable => Table}/Caption.tsx (100%)
 rename packages/react-table/src/components/{TableComposable => Table}/InnerScrollContainer.tsx (100%)
 rename packages/react-table/src/components/{TableComposable => Table}/OuterScrollContainer.tsx (100%)
 rename packages/react-table/src/components/{TableComposable => Table}/Tbody.tsx (100%)
 rename packages/react-table/src/components/{TableComposable => Table}/Td.tsx (91%)
 rename packages/react-table/src/components/{TableComposable => Table}/Th.tsx (90%)
 rename packages/react-table/src/components/{TableComposable => Table}/Thead.tsx (100%)
 rename packages/react-table/src/components/{TableComposable => Table}/Tr.tsx (96%)
 delete mode 100644 packages/react-table/src/components/Table/base/index.ts
 rename packages/react-table/src/components/{TableComposable => Table}/examples/Table.md (90%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableActions.tsx (98%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableActionsOverflow.tsx (96%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableBasic.tsx (95%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableCellWidth.tsx (91%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableCompoundExpandable.tsx (96%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableControllingText.tsx (91%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableDraggable.tsx (95%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableEmptyState.tsx (90%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableExpandable.tsx (97%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableFavoritable.tsx (96%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableHoverable.tsx (92%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableMisc.tsx (95%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableMultipleStickyColumns.tsx (96%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableNestedExpandable.tsx (97%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableNestedHeaders.tsx (96%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableNestedStickyHeader.tsx (96%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableNestedTableExpandable.tsx (97%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableSelectable.tsx (96%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableSelectableRadio.tsx (93%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableSortable.tsx (96%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableSortableCustom.tsx (97%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableStickyColumn.tsx (95%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableStickyColumnsAndHeader.tsx (97%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableStriped.tsx (90%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableStripedExpandable.tsx (97%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableStripedMultipleTbody.tsx (95%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableStripedTr.tsx (91%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableTextModifiers.tsx (85%)
 rename packages/react-table/src/components/{TableComposable => Table}/examples/TableTree.tsx (97%)
 delete mode 100644 packages/react-table/src/components/TableComposable/TableComposable.tsx
 delete mode 100644 packages/react-table/src/components/TableComposable/examples/TableRightStickyColumn.tsx
 delete mode 100644 packages/react-table/src/components/TableComposable/index.ts
 rename packages/react-table/src/{ => deprecated}/components/Table/Body.tsx (97%)
 rename packages/react-table/src/{ => deprecated}/components/Table/BodyCell.tsx (98%)
 rename packages/react-table/src/{ => deprecated}/components/Table/BodyWrapper.tsx (86%)
 rename packages/react-table/src/{ => deprecated}/components/Table/Header.tsx (88%)
 rename packages/react-table/src/{ => deprecated}/components/Table/HeaderCell.tsx (95%)
 create mode 100644 packages/react-table/src/deprecated/components/Table/Table.tsx
 rename packages/react-table/src/{ => deprecated}/components/Table/TableContext.ts (60%)
 rename packages/react-table/src/{ => deprecated}/components/Table/__tests__/Table.test.tsx (98%)
 rename packages/react-table/src/{ => deprecated}/components/Table/__tests__/__snapshots__/Table.test.tsx.snap (100%)
 rename packages/react-table/src/{ => deprecated}/components/Table/base/body-row.tsx (85%)
 rename packages/react-table/src/{ => deprecated}/components/Table/base/body.tsx (94%)
 rename packages/react-table/src/{ => deprecated}/components/Table/base/header-row.tsx (88%)
 rename packages/react-table/src/{ => deprecated}/components/Table/base/header.tsx (87%)
 create mode 100644 packages/react-table/src/deprecated/components/Table/base/index.ts
 rename packages/react-table/src/{ => deprecated}/components/Table/base/resolve-row-key.ts (92%)

diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
index f8927aa6e3a..544d5451ea7 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
+++ b/packages/react-code-editor/src/components/CodeEditor/__test__/CodeEditor.test.tsx
@@ -2,6 +2,20 @@ import React from 'react';
 import { render } from '@testing-library/react';
 import { CodeEditor, Language } from '../CodeEditor';
 
+Object.defineProperty(window, 'matchMedia', {
+  writable: true,
+  value: jest.fn().mockImplementation(query => ({
+    matches: false,
+    media: query,
+    onchange: null,
+    addListener: jest.fn(), // Deprecated
+    removeListener: jest.fn(), // Deprecated
+    addEventListener: jest.fn(),
+    removeEventListener: jest.fn(),
+    dispatchEvent: jest.fn(),
+  })),
+});
+
 describe('CodeEditor', () => {
   beforeAll(() => {
     window.HTMLCanvasElement.prototype.getContext = () => ({} as any);
diff --git a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
index 3edfa6df0dd..395479988f5 100644
--- a/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
+++ b/packages/react-code-editor/src/components/CodeEditor/__test__/__snapshots__/CodeEditor.test.tsx.snap
@@ -142,7 +142,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
         >
           <div
             class="react-monaco-editor-container"
-            data-keybinding-context="1"
+            data-keybinding-context="2"
             data-mode-id="plaintext"
             style="height: 400px;"
           >
@@ -199,6 +199,11 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                       class="view-rulers"
                       role="presentation"
                     />
+                    <div
+                      aria-hidden="true"
+                      class="blockDecorations-container"
+                      role="presentation"
+                    />
                     <div
                       aria-hidden="true"
                       class="view-zones"
@@ -210,7 +215,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                       class="view-lines monaco-mouse-cursor-text"
                       data-mprt="7"
                       role="presentation"
-                      style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 45px; height: 5px;"
+                      style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 54px; height: 19px;"
                     >
                       <div
                         class="view-line"
@@ -256,7 +261,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                     aria-hidden="true"
                     class="decorationsOverviewRuler"
                     height="5"
-                    style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px;"
+                    style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px; display: block;"
                     width="14"
                   />
                   <div
@@ -267,7 +272,7 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                   >
                     <div
                       class="slider"
-                      style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 5px;"
+                      style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"
                     />
                   </div>
                 </div>
@@ -286,7 +291,6 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                   autocorrect="off"
                   class="inputarea monaco-mouse-cursor-text"
                   data-mprt="6"
-                  readonly="true"
                   role="textbox"
                   spellcheck="false"
                   style="font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; top: 0px; left: 0px; width: 1px; height: 1px;"
@@ -343,11 +347,6 @@ exports[`CodeEditor matches snapshot with all props 1`] = `
                 class="overflowingContentWidgets"
                 data-mprt="2"
               />
-              <div
-                aria-hidden="true"
-                class="context-view"
-                style="display: none;"
-              />
             </div>
           </div>
         </div>
@@ -437,6 +436,11 @@ exports[`CodeEditor matches snapshot without props 1`] = `
                     class="view-rulers"
                     role="presentation"
                   />
+                  <div
+                    aria-hidden="true"
+                    class="blockDecorations-container"
+                    role="presentation"
+                  />
                   <div
                     aria-hidden="true"
                     class="view-zones"
@@ -448,7 +452,7 @@ exports[`CodeEditor matches snapshot without props 1`] = `
                     class="view-lines monaco-mouse-cursor-text"
                     data-mprt="7"
                     role="presentation"
-                    style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 26px; height: 5px;"
+                    style="position: absolute; font-family: Consolas, 'Courier New', monospace; font-weight: normal; font-size: 14px; font-feature-settings: \\"liga\\" off, \\"calt\\" off; line-height: 19px; letter-spacing: 0px; width: 35px; height: 19px;"
                   >
                     <div
                       class="view-line"
@@ -490,7 +494,7 @@ exports[`CodeEditor matches snapshot without props 1`] = `
                   aria-hidden="true"
                   class="decorationsOverviewRuler"
                   height="5"
-                  style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px;"
+                  style="position: absolute; transform: translate3d(0px, 0px, 0px); contain: strict; top: 0px; right: 0px; width: 14px; height: 5px; display: block;"
                   width="14"
                 />
                 <div
@@ -501,7 +505,7 @@ exports[`CodeEditor matches snapshot without props 1`] = `
                 >
                   <div
                     class="slider"
-                    style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 5px;"
+                    style="position: absolute; top: 0px; left: 0px; width: 14px; transform: translate3d(0px, 0px, 0px); contain: strict; height: 20px;"
                   />
                 </div>
               </div>
@@ -576,11 +580,6 @@ exports[`CodeEditor matches snapshot without props 1`] = `
               class="overflowingContentWidgets"
               data-mprt="2"
             />
-            <div
-              aria-hidden="true"
-              class="context-view"
-              style="display: none;"
-            />
           </div>
         </div>
       </div>
diff --git a/packages/react-core/src/demos/CardDemos.md b/packages/react-core/src/demos/CardDemos.md
index 916a9a33c1a..f9e0b30c034 100644
--- a/packages/react-core/src/demos/CardDemos.md
+++ b/packages/react-core/src/demos/CardDemos.md
@@ -8,7 +8,7 @@ import InfoCircleIcon from '@patternfly/react-icons/dist/js/icons/info-circle-ic
 import ArrowRightIcon from '@patternfly/react-icons/dist/js/icons/arrow-right-icon';
 import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
 import { CheckCircleIcon, ExclamationCircleIcon, ExclamationTriangleIcon, TimesCircleIcon, BellIcon } from '@patternfly/react-icons';
-import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts';
 import chart_color_gold_100 from '@patternfly/react-tokens/dist/esm/chart_color_gold_100';
 import chart_color_gold_300 from '@patternfly/react-tokens/dist/esm/chart_color_gold_300';
@@ -655,7 +655,7 @@ import {
   Popover,
   Title
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import BellIcon from '@patternfly/react-icons/dist/js/icons/bell-icon';
 import CheckCircleIcon from '@patternfly/react-icons/dist/js/icons/check-circle-icon';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/js/icons/exclamation-circle-icon';
@@ -723,7 +723,7 @@ const StatusPlain: React.FunctionComponent = () => {
       <div>
         Components of the Control Panel are responsible for maintaining and reconciling the state of the cluster.
       </div>
-      <TableComposable variant="compact">
+      <Table variant="compact">
         <Thead>
           <Tr>
             <Th />
@@ -762,7 +762,7 @@ const StatusPlain: React.FunctionComponent = () => {
             </Tbody>
           );
         })}
-      </TableComposable>
+      </Table>
     </>
   );
 
diff --git a/packages/react-core/src/demos/Filters/FilterDemos.md b/packages/react-core/src/demos/Filters/FilterDemos.md
index 0bd10b0d779..7307ebdf9b5 100644
--- a/packages/react-core/src/demos/Filters/FilterDemos.md
+++ b/packages/react-core/src/demos/Filters/FilterDemos.md
@@ -32,7 +32,7 @@ ToolbarToggleGroup
 } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 ## Filtering demos
 
diff --git a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
index 5f47580d166..154ee952caf 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterAttributeSearch.tsx
@@ -25,7 +25,7 @@ import {
   EmptyStateActions,
   EmptyStateIcon
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -649,7 +649,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -701,7 +701,7 @@ export const FilterAttributeSearch: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
index 4f343b18505..fa949bea4f0 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterCheckboxSelect.tsx
@@ -15,7 +15,7 @@ import {
   Badge,
   Pagination
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
@@ -375,7 +375,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -419,7 +419,7 @@ export const FilterCheckboxSelect: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
index 9b4da81e200..aa57d5f27c0 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterFaceted.tsx
@@ -24,7 +24,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -465,7 +465,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -517,7 +517,7 @@ export const FilterFaceted: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
index 565a17023d0..7bb3e860032 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterMixedSelectGroup.tsx
@@ -23,7 +23,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -515,7 +515,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -567,7 +567,7 @@ export const FilterMixedSelectGroup: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
index 5da3371cc37..48728874b8a 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSameSelectGroup.tsx
@@ -21,7 +21,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
@@ -488,7 +488,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -540,7 +540,7 @@ export const FilterSameSelectGroup: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
index 076d7082944..8ecd9c5a5f3 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSearchInput.tsx
@@ -21,7 +21,7 @@ import {
   EmptyStateIcon,
   EmptyStateActions
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 
 interface Repository {
@@ -296,7 +296,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -348,7 +348,7 @@ export const FilterSearchInput: React.FunctionComponent = () => {
             </Tr>
           )}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
index 132d63747e4..f4960625bee 100644
--- a/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
+++ b/packages/react-core/src/demos/Filters/examples/FilterSingleSelect.tsx
@@ -12,7 +12,7 @@ import {
   ToolbarItem,
   Pagination
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 
 interface Repository {
@@ -360,7 +360,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
   return (
     <React.Fragment>
       {toolbar}
-      <TableComposable aria-label="Selectable table">
+      <Table aria-label="Selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -404,7 +404,7 @@ export const FilterSingleSelect: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
index c7d582dd8b3..1b9791fdb37 100644
--- a/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
+++ b/packages/react-core/src/demos/examples/Tabs/TabsAndTable.tsx
@@ -41,7 +41,7 @@ import {
   ToolbarToggleGroup
 } from '@patternfly/react-core';
 import {
-  TableComposable,
+  Table,
   Thead,
   Tbody,
   Tr,
@@ -209,8 +209,8 @@ export const TablesAndTabs = () => {
     </Toolbar>
   );
 
-  const tableComposable = (
-    <TableComposable aria-label="`Composable` table">
+  const table = (
+    <Table aria-label="`Composable` table">
       <Thead noWrap>
         <Tr>
           <Th
@@ -284,7 +284,7 @@ export const TablesAndTabs = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 
   const panelContent = (
@@ -375,7 +375,7 @@ export const TablesAndTabs = () => {
   const tabContent = (
     <Drawer isExpanded={isExpanded} isInline>
       <DrawerContent panelContent={panelContent}>
-        <DrawerContentBody>{tableComposable}</DrawerContentBody>
+        <DrawerContentBody>{table}</DrawerContentBody>
       </DrawerContent>
     </Drawer>
   );
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
index 56840ace597..2d80863be94 100644
--- a/packages/react-docs/package.json
+++ b/packages/react-docs/package.json
@@ -33,7 +33,7 @@
     "@patternfly/react-tokens": "^5.0.0-alpha.6"
   },
   "devDependencies": {
-    "@patternfly/documentation-framework": "^2.0.0-alpha.8",
+    "@patternfly/documentation-framework": "^2.0.0-alpha.14",
     "@patternfly/patternfly-a11y": "4.3.1",
     "rimraf": "^2.6.3",
     "shx": "^0.3.2"
diff --git a/packages/react-docs/patternfly-docs/patternfly-docs.source.js b/packages/react-docs/patternfly-docs/patternfly-docs.source.js
index bbd45b3fe4d..86cd7cbb911 100644
--- a/packages/react-docs/patternfly-docs/patternfly-docs.source.js
+++ b/packages/react-docs/patternfly-docs/patternfly-docs.source.js
@@ -31,7 +31,7 @@ module.exports = (baseSourceMD, sourceProps) => {
   sourceMD(path.join(reactCorePath, '/**/demos/**/*.md'), 'react-demos');
 
   // React-table MD
-  sourceMD(path.join(reactTablePath, '/**/TableComposable/examples/*.md'), 'react');
+  sourceMD(path.join(reactTablePath, '/components/**/examples/*.md'), 'react');
   // TODO: remove this comment from here and the same file in pf-org once deprecation work is complete
   // sourceMD(path.join(reactTablePath, '/**/Table/examples/*.md'), 'react-legacy');
   sourceMD(path.join(reactTablePath, '/deprecated/components/**/examples/*.md'), 'react-deprecated');
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
index b14e7e6a057..d7a8a148922 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/MastheadDemo/MastheadDemo.tsx
@@ -13,6 +13,8 @@ import {
 } from '@patternfly/react-core';
 import { ContextSelector, ContextSelectorItem } from '@patternfly/react-core/deprecated';
 import {
+  ContextSelector,
+  ContextSelectorItem,
   Dropdown as DropdownDeprecated,
   DropdownToggle,
   KebabToggle,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx
index cb7ff2d7d3d..da8fc80bc83 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/SwitchDemo/SwitchDemo.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Switch, Button } from '@patternfly/react-core';
-import { Table, TableBody, TableHeader } from '@patternfly/react-table';
+import { Table, TableBody, TableHeader } from '@patternfly/react-table/deprecated';
 
 interface SwitchState {
   simple: {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCollapsibleDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCollapsibleDemo.tsx
index 305c40d1b50..ddc31f984b8 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCollapsibleDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCollapsibleDemo.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Table, TableHeader, TableBody, TableProps, expandable, ICell, IRow } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
+import { expandable, ICell, IRow } from '@patternfly/react-table';
 
 interface TableState {
   columns: (ICell | string)[];
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx
index df21e35e3f2..5e8635a6819 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableComposableDemo.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import {
-  TableComposable,
+  Table,
   Thead,
   Tbody,
   Tr,
@@ -53,7 +53,7 @@ export const TableComposableDemo = () => {
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
-        <TableComposable aria-label="Simple table using composable components">
+        <Table aria-label="Simple table using composable components">
           <Caption>Simple table using composable components</Caption>
           <Thead>
             <Tr>
@@ -83,7 +83,7 @@ export const TableComposableDemo = () => {
               </Tr>
             ))}
           </Tbody>
-        </TableComposable>
+        </Table>
       </>
     );
   };
@@ -100,7 +100,7 @@ export const TableComposableDemo = () => {
       console.log(`handle row click ${rowIndex}`, row);
     };
     return (
-      <TableComposable aria-label="Misc table">
+      <Table aria-label="Misc table">
         <Thead noWrap>
           <Tr>
             <Th>
@@ -179,7 +179,7 @@ export const TableComposableDemo = () => {
             );
           })}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -214,7 +214,7 @@ export const TableComposableDemo = () => {
       setRows(updatedRows);
     };
     return (
-      <TableComposable aria-label="Sortable Table">
+      <Table aria-label="Sortable Table">
         <Thead>
           <Tr>
             {columns.map((column, columnIndex) => {
@@ -249,7 +249,7 @@ export const TableComposableDemo = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -287,7 +287,7 @@ export const TableComposableDemo = () => {
       setSelected(selected.map(sel => isSelected));
     };
     return (
-      <TableComposable aria-label="Selectable Table">
+      <Table aria-label="Selectable Table">
         <Thead>
           <Tr>
             <Th
@@ -326,7 +326,7 @@ export const TableComposableDemo = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -342,7 +342,7 @@ export const TableComposableDemo = () => {
       setSelected(rowId);
     };
     return (
-      <TableComposable aria-label="Radio selectable table">
+      <Table aria-label="Radio selectable table">
         <Thead>
           <Tr>
             <Th />
@@ -377,7 +377,7 @@ export const TableComposableDemo = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -429,7 +429,7 @@ export const TableComposableDemo = () => {
       ['5', '2', 'b', 'four', 'five']
     ];
     return (
-      <TableComposable aria-label="Actions table">
+      <Table aria-label="Actions table">
         <Thead>
           <Tr>
             <Th>{columns[0]}</Th>
@@ -467,7 +467,7 @@ export const TableComposableDemo = () => {
             );
           })}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -513,7 +513,7 @@ export const TableComposableDemo = () => {
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
-        <TableComposable
+        <Table
           aria-label="Compact Table"
           variant={choice !== 'default' ? 'compact' : null}
           borders={choice !== 'compactBorderless'}
@@ -536,7 +536,7 @@ export const TableComposableDemo = () => {
               </Tr>
             ))}
           </Tbody>
-        </TableComposable>
+        </Table>
       </React.Fragment>
     );
   };
@@ -611,7 +611,7 @@ export const TableComposableDemo = () => {
             </ToolbarItem>
           </ToolbarContent>
         </Toolbar>
-        <TableComposable aria-label="Expandable Table" variant={compact ? 'compact' : null}>
+        <Table aria-label="Expandable Table" variant={compact ? 'compact' : null}>
           <Thead>
             <Tr>
               <Th />
@@ -697,7 +697,7 @@ export const TableComposableDemo = () => {
               </Tbody>
             );
           })}
-        </TableComposable>
+        </Table>
       </React.Fragment>
     );
   };
@@ -715,7 +715,7 @@ export const TableComposableDemo = () => {
       const rows = [firstColumnRows, ['a', 'two', 'k', 'four', 'five'], ['p', 'two', 'b', 'four', 'five']];
 
       return (
-        <TableComposable aria-label="Demo child table" id={id}>
+        <Table aria-label="Demo child table" id={id}>
           <Thead>
             <Tr>
               {columns.map((column, columnIndex) => (
@@ -734,7 +734,7 @@ export const TableComposableDemo = () => {
               </Tr>
             ))}
           </Tbody>
-        </TableComposable>
+        </Table>
       );
     };
     // key = row_col of the parent it corresponds to
@@ -830,7 +830,7 @@ export const TableComposableDemo = () => {
       return null;
     };
     return (
-      <TableComposable aria-label="Compound expandable table">
+      <Table aria-label="Compound expandable table">
         <Thead>
           <Tr>
             {columns.map((column, columnIndex) => (
@@ -896,7 +896,7 @@ export const TableComposableDemo = () => {
             </Tbody>
           );
         })}
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -908,7 +908,7 @@ export const TableComposableDemo = () => {
       ['one - 3', 'two - 3', 'three - 3', 'four - 3', 'five - 3']
     ];
     return (
-      <TableComposable aria-label="Cell widths">
+      <Table aria-label="Cell widths">
         <Thead>
           <Tr>
             {columns.map((column, columnIndex) => (
@@ -937,7 +937,7 @@ export const TableComposableDemo = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -968,7 +968,7 @@ export const TableComposableDemo = () => {
       ]
     ];
     return (
-      <TableComposable aria-label="Controlling text">
+      <Table aria-label="Controlling text">
         <Thead>
           <Tr>
             <Th width={20}>{columns[0]}</Th>
@@ -995,7 +995,7 @@ export const TableComposableDemo = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -1012,7 +1012,7 @@ export const TableComposableDemo = () => {
       ]
     ];
     return (
-      <TableComposable aria-label="Table text">
+      <Table aria-label="Table text">
         <Thead>
           <Tr>
             <Th width={30}>{columns[0]}</Th>
@@ -1030,7 +1030,7 @@ export const TableComposableDemo = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -1071,7 +1071,7 @@ export const TableComposableDemo = () => {
       }
     };
     return (
-      <TableComposable aria-label="Favoritable table" variant={'compact'}>
+      <Table aria-label="Favoritable table" variant={'compact'}>
         <Thead>
           <Tr>
             <Th {...sortParams} />
@@ -1106,7 +1106,7 @@ export const TableComposableDemo = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx
index 843637f02c4..0f644a82c27 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableCompoundExpandableDemo.tsx
@@ -1,14 +1,11 @@
 import * as React from 'react';
 import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableProps,
   compoundExpand,
   IRow,
   ICell,
   IRowCell
 } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx
index 63387024c1e..ba8724f4ec5 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableCompoundExpandableDemo.tsx
@@ -1,14 +1,11 @@
 import * as React from 'react';
 import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableProps,
   compoundExpand,
   IRow,
   ICell,
   IRowCell
 } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx
index 0614b7dda82..d0a67c36f5b 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEditableDemo.tsx
@@ -1,10 +1,6 @@
 /* eslint-disable no-shadow */
 import * as React from 'react';
 import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableProps,
   TableVariant,
   ICell,
   IRow,
@@ -17,6 +13,8 @@ import {
   EditableTextCell,
   EditableSelectInputCell
 } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
+
 import { SelectOption } from '@patternfly/react-core';
 
 const rowLevelValidationRules: IValidatorDef[] = [
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx
index fbed27dae41..7fa388c6006 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableEmptyStateDemo.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { Table, TableHeader, TableBody, TableProps, IRow, ICell } from '@patternfly/react-table';
+import { IRow, ICell } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
+
 import {
   EmptyState,
   EmptyStateBody,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx
index a6d1a1150ab..1c1b465d8dc 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableFavoritesDemo.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Table, TableHeader, TableBody, TableProps, sortable, ICell, IRow, ISortBy } from '@patternfly/react-table';
+import { sortable, ICell, IRow, ISortBy } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Checkbox } from '@patternfly/react-core';
 
 interface TableState {
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx
index 1368ce5f40a..71a77fdaab6 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowClickDemo.tsx
@@ -1,14 +1,11 @@
 import * as React from 'react';
 import {
-  Table,
-  TableHeader,
-  TableBody,
   IRow,
   IExtraRowData,
   IComputedData,
-  TableProps,
   ICell
 } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 interface ITableRowClickDemoState {
   rows: IRow[];
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
index cf2d376dcc4..9d295216fe4 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableRowWrapperDemo.tsx
@@ -1,5 +1,7 @@
 import * as React from 'react';
-import { Table, TableHeader, TableBody, RowWrapperProps, TableProps, ICell, IRow } from '@patternfly/react-table';
+import { RowWrapperProps, ICell, IRow } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
+
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSelectableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSelectableDemo.tsx
index f1de4284c2d..955cda3af66 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSelectableDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSelectableDemo.tsx
@@ -1,14 +1,12 @@
 import * as React from 'react';
 import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableProps,
   headerCol,
   ICell,
   IRow,
   RowSelectVariant
 } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
+
 import { Checkbox, Divider, Radio } from '@patternfly/react-core';
 import '@patternfly/patternfly/utilities/Spacing/spacing.css';
 
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSimpleActionsDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSimpleActionsDemo.tsx
index 72e49ba0ffb..6a6304c88d1 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSimpleActionsDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSimpleActionsDemo.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Table, TableHeader, TableBody, TableProps, headerCol, ICell, IRow, IActions } from '@patternfly/react-table';
+import { headerCol, ICell, IRow, IActions } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 interface ITableState {
   columns: (ICell | string)[];
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSimpleDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSimpleDemo.tsx
index e86b830c0b7..68bc213b409 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSimpleDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSimpleDemo.tsx
@@ -1,5 +1,6 @@
 import * as React from 'react';
-import { Table, TableHeader, TableBody, TableProps, textCenter, ICell, IRow } from '@patternfly/react-table';
+import { textCenter, ICell, IRow } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 export class TableSimpleDemo extends React.Component<
   TableProps,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableDemo.tsx
index 0399d5f8758..177cda2de58 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableDemo.tsx
@@ -1,15 +1,12 @@
 import * as React from 'react';
 import {
-  Table,
-  TableHeader,
-  TableBody,
-  TableProps,
   sortable,
   SortByDirection,
   ICell,
   IRow,
   ISortBy
 } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 export class TableSortableDemo extends React.Component<
   TableProps,
diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableForCompoundExpandableDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableForCompoundExpandableDemo.tsx
index e5a9323a9ab..e5c015f2af0 100644
--- a/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableForCompoundExpandableDemo.tsx
+++ b/packages/react-integration/demo-app-ts/src/components/demos/TableDemo/TableSortableForCompoundExpandableDemo.tsx
@@ -1,16 +1,13 @@
 import * as React from 'react';
 import {
-  Table,
-  TableHeader,
-  TableBody,
   TableVariant,
   sortable,
   SortByDirection,
   ICell,
   IRow,
-  ISortBy,
-  TableProps
+  ISortBy
 } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 export interface DemoSortableTableProps {
   firstColumnRows?: string[];
diff --git a/packages/react-table/src/components/TableComposable/Caption.tsx b/packages/react-table/src/components/Table/Caption.tsx
similarity index 100%
rename from packages/react-table/src/components/TableComposable/Caption.tsx
rename to packages/react-table/src/components/Table/Caption.tsx
diff --git a/packages/react-table/src/components/Table/DraggableRowWrapper.tsx b/packages/react-table/src/components/Table/DraggableRowWrapper.tsx
index 16aa4473bdc..9f485a1e1f8 100644
--- a/packages/react-table/src/components/Table/DraggableRowWrapper.tsx
+++ b/packages/react-table/src/components/Table/DraggableRowWrapper.tsx
@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-tree-view';
 import { RowWrapperProps } from './RowWrapper';
-import { Tr } from '../TableComposable';
+import { Tr } from './Tr';
 
 export const DraggableRowWrapper: React.FunctionComponent<RowWrapperProps> = ({
   className,
diff --git a/packages/react-table/src/components/Table/EditableSelectInputCell.tsx b/packages/react-table/src/components/Table/EditableSelectInputCell.tsx
index f472fc29ab1..eed09424e26 100644
--- a/packages/react-table/src/components/Table/EditableSelectInputCell.tsx
+++ b/packages/react-table/src/components/Table/EditableSelectInputCell.tsx
@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import { Select, SelectOptionObject } from '@patternfly/react-core/dist/esm/components/Select';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
-import { EditableSelectInputProps } from './base';
+import { EditableSelectInputProps } from './base/types';
 
 export interface IEditableSelectInputCell extends Omit<React.HTMLProps<HTMLElement | HTMLDivElement>, 'onSelect'> {
   /** Row index of this select input cell */
diff --git a/packages/react-table/src/components/Table/EditableTextCell.tsx b/packages/react-table/src/components/Table/EditableTextCell.tsx
index 553abbe001e..fb35ed1fbfc 100644
--- a/packages/react-table/src/components/Table/EditableTextCell.tsx
+++ b/packages/react-table/src/components/Table/EditableTextCell.tsx
@@ -3,7 +3,7 @@ import { TextInput } from '@patternfly/react-core/dist/esm/components/TextInput'
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import formStyles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
-import { EditableTextCellProps } from './base';
+import { EditableTextCellProps } from './base/types';
 
 export interface IEditableTextCell extends React.HTMLProps<HTMLDivElement> {
   /** The current value of the text input */
diff --git a/packages/react-table/src/components/TableComposable/InnerScrollContainer.tsx b/packages/react-table/src/components/Table/InnerScrollContainer.tsx
similarity index 100%
rename from packages/react-table/src/components/TableComposable/InnerScrollContainer.tsx
rename to packages/react-table/src/components/Table/InnerScrollContainer.tsx
diff --git a/packages/react-table/src/components/TableComposable/OuterScrollContainer.tsx b/packages/react-table/src/components/Table/OuterScrollContainer.tsx
similarity index 100%
rename from packages/react-table/src/components/TableComposable/OuterScrollContainer.tsx
rename to packages/react-table/src/components/Table/OuterScrollContainer.tsx
diff --git a/packages/react-table/src/components/Table/RowWrapper.tsx b/packages/react-table/src/components/Table/RowWrapper.tsx
index 7ee80303be7..0c4198daa66 100644
--- a/packages/react-table/src/components/Table/RowWrapper.tsx
+++ b/packages/react-table/src/components/Table/RowWrapper.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { OUIAProps } from '@patternfly/react-core/dist/esm/helpers/OUIA/ouia';
 import { debounce, canUseDOM } from '@patternfly/react-core/dist/esm/helpers/util';
-import { Tr } from '../TableComposable/Tr';
+import { Tr } from './Tr';
 import { IRow } from './TableTypes';
 
 // legacy export now, RowWrapperRow can simply be typed as IRow in the future
diff --git a/packages/react-table/src/components/Table/Table.tsx b/packages/react-table/src/components/Table/Table.tsx
index 307165544ae..b1a7b36a8e2 100644
--- a/packages/react-table/src/components/Table/Table.tsx
+++ b/packages/react-table/src/components/Table/Table.tsx
@@ -1,301 +1,226 @@
 import * as React from 'react';
-import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core/dist/esm/helpers';
-import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
-import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
+import styles from '@patternfly/react-styles/css/components/Table/table';
+import stylesGrid from '@patternfly/react-styles/css/components/Table/table-grid';
+import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-tree-view';
 import { css } from '@patternfly/react-styles';
-import { Provider } from './base';
-import { BodyCell } from './BodyCell';
-import { HeaderCell } from './HeaderCell';
-import { RowWrapper, RowWrapperProps } from './RowWrapper';
-import { BodyWrapper } from './BodyWrapper';
-import { calculateColumns } from './utils/headerUtils';
-import { RowSelectVariant } from './SelectColumn';
-import { TableContext } from './TableContext';
-import {
-  ISortBy,
-  OnCollapse,
-  OnExpand,
-  OnSelect,
-  OnRowEdit,
-  OnSort,
-  IActions,
-  IActionsResolver,
-  IAreActionsDisabled,
-  IRow,
-  ICell,
-  TableVariant,
-  TableGridBreakpoint,
-  IHeaderRow,
-  OnFavorite
-} from './TableTypes';
-import { TreeRowWrapper } from './TreeRowWrapper';
-import { CustomActionsToggleProps } from './ActionsColumn';
+import { toCamel } from './utils';
+import { IVisibility } from './utils/decorators/classNames';
+import { useOUIAProps, OUIAProps, handleArrows, setTabIndex } from '@patternfly/react-core';
+import { TableGridBreakpoint, TableVariant } from './TableTypes';
 
-export interface TableProps extends OUIAProps {
+export interface BaseCellProps {
+  /** Content rendered inside the cell */
+  children?: React.ReactNode;
+  /** Additional classes added to the cell  */
+  className?: string;
+  /** Element to render */
+  component?: React.ReactNode;
+  /** Modifies cell to center its contents. */
+  textCenter?: boolean;
+  /** Style modifier to apply */
+  modifier?: 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap';
+  /** Width percentage modifier */
+  width?: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100;
+  /** Visibility breakpoint modifiers */
+  visibility?: (keyof IVisibility)[];
+  /** @hide Forwarded ref */
+  innerRef?: React.Ref<any>;
+}
+
+export interface TableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps {
   /** Adds an accessible name for the Table */
   'aria-label'?: string;
   /** Content rendered inside the Table */
   children?: React.ReactNode;
   /** Additional classes added to the Table  */
   className?: string;
-  /** Style variant for the Table  */
-  variant?: 'compact';
   /**
-   * Render borders
-   * Borders can only currently be disabled if the variant is set to 'compact'
-   * https://github.com/patternfly/patternfly/issues/3650
+   * Style variant for the Table
+   * compact: Reduces spacing and makes the table more compact
    */
+  variant?: TableVariant | 'compact';
+  /** Render borders */
   borders?: boolean;
   /** Specifies the grid breakpoints  */
   gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl';
-  /** Specifies the initial sorting pattern for the table - asc/desc and the index of the column to sort by */
-  sortBy?: ISortBy;
-  /** Function triggered when an expandable content is collapsed. When this is used, one expandable toggle button will be positioned in the first cell of a non-expandable row, preceding an expandable row */
-  onCollapse?: OnCollapse;
-  /** Function triggered when a compound expandable item is clicked */
-  onExpand?: OnExpand;
-  /** Function triggered when a row's checkbox is selected. When this is used, one checkbox/radio button will be positioned in the first or second cell of a non-expandable row */
-  onSelect?: OnSelect;
-  /** Enables or disables the ability to select all - this is mutually exclusive with radio button select variant */
-  canSelectAll?: boolean;
-  /** Enables or disables the ability to expand all */
-  canCollapseAll?: boolean;
-  /** Flag indicating the select all checkbox is disabled */
-  isHeaderSelectDisabled?: boolean;
-  /** Specifies the type of the select element variant - can be one of checkbox or radio button */
-  selectVariant?: 'checkbox' | 'radio';
-  /** An optional alternative aria label for the expand collapse all table header */
-  collapseAllAriaLabel?: string;
-  /** Function triggered when a row's inline edit is activated. Adds a column for inline edit when present. */
-  onRowEdit?: OnRowEdit;
-  /** Function triggered when sort icon is clicked */
-  onSort?: OnSort;
-  /** Actions to add to the Table */
-  actions?: IActions;
-  /** Resolver for the given action  */
-  actionResolver?: IActionsResolver;
-  /** Specifies if the Kebab for actions is disabled */
-  areActionsDisabled?: IAreActionsDisabled;
-  /** Component to place in the header */
-  header?: React.ReactNode;
-  /** Component used for caption*/
-  caption?: React.ReactNode;
-  /** label for row */
-  rowLabeledBy?: string;
-  /** ID for expand */
-  expandId?: string;
-  /** ID for content */
-  contentId?: string;
-  /** The desired position to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property */
-  dropdownPosition?: 'right' | 'left';
-  /** The desired direction to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property */
-  dropdownDirection?: 'up' | 'down';
-  /** The container to append the dropdown menu to. Defaults to 'inline'.
-   * If your menu is being cut off you can append it to an element higher up the DOM tree.
-   * Some examples:
-   * actionsMenuAppendTo="parent"
-   * actionsMenuAppendTo={() => document.body}
-   * actionsMenuAppendTo={document.getElementById('target')}
-   */
-  actionsMenuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
-  /** The toggle of the actions menu dropdown. A KebabToggle or DropdownToggle component */
-  actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
-  /** Row data */
-  rows: (IRow | string[])[];
-  /** Cell/column data */
-  cells: (ICell | string)[];
-  /** Wrapper for the body  */
-  bodyWrapper?: Function;
-  /** Wrapper for the row */
-  rowWrapper?: (props: RowWrapperProps) => JSX.Element;
   /** A valid WAI-ARIA role to be applied to the table element */
   role?: string;
   /** If set to true, the table header sticks to the top of its container */
   isStickyHeader?: boolean;
-  /**
-   * Enables favorites column
-   * Callback triggered when a row is favorited/unfavorited
-   */
-  onFavorite?: OnFavorite;
-  /** Along with the onSort prop, enables favorites sorting, defaults to true */
-  canSortFavorites?: boolean;
+  /** @hide Forwarded ref */
+  innerRef?: React.RefObject<any>;
   /** Flag indicating table is a tree table */
   isTreeTable?: boolean;
   /** Flag indicating this table is nested within another table */
   isNested?: boolean;
-  /** Flag indicating this table is striped */
+  /** Flag indicating this table should be striped. This property works best for a single <tbody> table. Striping may also be done manually by applying this property to Tbody and Tr components. */
   isStriped?: boolean;
   /** Flag indicating this table contains expandable rows to maintain proper striping */
   isExpandable?: boolean;
+  /** Collection of column spans for nested headers. Deprecated: see https://github.com/patternfly/patternfly/issues/4584 */
+  nestedHeaderColumnSpans?: number[];
+  /** Visible text to add alongside the hidden a11y caption for tables with selectable rows. */
+  selectableRowCaptionText?: string;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
   /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
   ouiaSafe?: boolean;
 }
 
-export class Table extends React.Component<TableProps, {}> {
-  static displayName = 'Table';
-  static hasWarnBeta = false;
-  static defaultProps: Partial<TableProps> = {
-    children: null as React.ReactNode,
-    className: '',
-    variant: null as TableVariant,
-    borders: true,
-    rowLabeledBy: 'simple-node',
-    expandId: 'expandable-toggle',
-    contentId: 'expanded-content',
-    dropdownPosition: DropdownPosition.right,
-    dropdownDirection: DropdownDirection.down,
-    actionsMenuAppendTo: 'inline',
-    header: undefined as React.ReactNode,
-    caption: undefined as React.ReactNode,
-    'aria-label': undefined as string,
-    gridBreakPoint: TableGridBreakpoint.gridMd,
-    role: 'grid',
-    canSelectAll: true,
-    canCollapseAll: false,
-    isHeaderSelectDisabled: false,
-    selectVariant: 'checkbox',
-    collapseAllAriaLabel: '',
-    ouiaSafe: true,
-    isStickyHeader: false,
-    canSortFavorites: true,
-    isTreeTable: false,
-    isNested: false
-  };
-  state = {
-    ouiaStateId: getDefaultOUIAId(Table.displayName)
-  };
+interface TableContextProps {
+  registerSelectableRow?: () => void;
+}
+
+export const TableContext = React.createContext<TableContextProps>({
+  registerSelectableRow: () => {}
+});
 
-  isSelected = (row: IRow) => row.selected === true;
+const TableBase: React.FunctionComponent<TableProps> = ({
+  children,
+  className,
+  variant,
+  borders = true,
+  isStickyHeader = false,
+  gridBreakPoint = TableGridBreakpoint.gridMd,
+  'aria-label': ariaLabel,
+  role = 'grid',
+  innerRef,
+  ouiaId,
+  ouiaSafe = true,
+  isTreeTable = false,
+  isNested = false,
+  isStriped = false,
+  isExpandable = false,
+  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+  nestedHeaderColumnSpans,
+  selectableRowCaptionText,
+  ...props
+}: TableProps) => {
+  const ref = React.useRef(null);
+  const tableRef = innerRef || ref;
 
-  areAllRowsSelected = (rows: IRow[]) => {
-    if (rows === undefined || rows.length === 0) {
-      return false;
+  const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
+  const [tableCaption, setTableCaption] = React.useState<JSX.Element | undefined>();
+
+  React.useEffect(() => {
+    document.addEventListener('keydown', handleKeys);
+
+    // sets up roving tab-index to tree tables only
+    if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
+      const tbody = tableRef.current.querySelector('tbody');
+      tbody && setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
     }
-    return rows.every(
-      (row) => this.isSelected(row) || row.disableSelection || (row.hasOwnProperty('parent') && !row.showSelect)
-    );
-  };
 
-  areAllExpanded = (rows: IRow[]) => {
-    if (rows === undefined || rows.length === 0) {
-      return false;
+    return function cleanup() {
+      document.removeEventListener('keydown', handleKeys);
+    };
+  }, [tableRef, tableRef.current]);
+
+  React.useEffect(() => {
+    if (selectableRowCaptionText) {
+      setTableCaption(
+        <caption>
+          {selectableRowCaptionText}
+          <div className="pf-screen-reader">
+            This table has selectable rows. It can be navigated by row using tab, and each row can be selected using
+            space or enter.
+          </div>
+        </caption>
+      );
+    } else {
+      setTableCaption(
+        <caption className="pf-screen-reader">
+          This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space
+          or enter.
+        </caption>
+      );
     }
-    return rows.every((row) => row.isOpen === undefined || row.isOpen);
-  };
+  }, [selectableRowCaptionText]);
 
-  render() {
-    const {
-      'aria-label': ariaLabel,
-      caption,
-      header,
-      onSort,
-      onSelect,
-      canSelectAll,
-      canCollapseAll,
-      isHeaderSelectDisabled,
-      selectVariant,
-      collapseAllAriaLabel,
-      sortBy,
-      children,
-      actions,
-      actionResolver,
-      areActionsDisabled,
-      onCollapse,
-      onExpand,
-      onRowEdit,
-      rowLabeledBy,
-      dropdownPosition,
-      dropdownDirection,
-      actionsMenuAppendTo: menuAppendTo,
-      actionsToggle,
-      contentId,
-      expandId,
-      variant,
-      rows,
-      cells,
-      bodyWrapper,
-      rowWrapper,
-      role,
-      borders,
-      onFavorite,
-      canSortFavorites,
-      ...props
-    } = this.props;
+  const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
+  const grid =
+    stylesGrid.modifiers?.[
+      toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl') as 'grid' | 'gridMd' | 'gridLg' | 'gridXl' | 'grid_2xl'
+    ];
+  const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
+  const treeGrid =
+    stylesTreeView.modifiers?.[
+      toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl') as
+        | 'treeViewGrid'
+        | 'treeViewGridMd'
+        | 'treeViewGridLg'
+        | 'treeViewGridXl'
+        | 'treeViewGrid_2xl'
+    ];
 
-    if (!ariaLabel && !caption && !header && role !== 'presentation') {
-      // eslint-disable-next-line no-console
-      console.error('Table: Specify at least one of: header, caption, aria-label');
+  const handleKeys = (event: KeyboardEvent) => {
+    if (
+      isNested ||
+      !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
+      (tableRef && tableRef.current !== (event.target as HTMLElement).closest('.pf-c-table:not(.pf-m-nested)'))
+    ) {
+      return;
+    }
+    const activeElement = document.activeElement;
+    const key = event.key;
+    const rows = (Array.from(tableRef.current.querySelectorAll('tbody tr')) as Element[]).filter(
+      el => !el.classList.contains('pf-m-disabled') && !(el as HTMLElement).hidden
+    );
+    if (key === 'Space' || key === 'Enter') {
+      (activeElement as HTMLElement).click();
+      event.preventDefault();
     }
 
-    const headerData = calculateColumns(cells, {
-      sortBy,
-      onSort,
-      onSelect,
-      canSelectAll: selectVariant === RowSelectVariant.radio ? false : canSelectAll,
-      canCollapseAll,
-      isHeaderSelectDisabled,
-      selectVariant,
-      collapseAllAriaLabel,
-      allRowsSelected: onSelect ? this.areAllRowsSelected(rows as IRow[]) : false,
-      allRowsExpanded: onCollapse ? this.areAllExpanded(rows as IRow[]) : false,
-      actions,
-      actionResolver,
-      areActionsDisabled,
-      onCollapse,
-      onRowEdit,
-      onExpand,
-      rowLabeledBy,
-      expandId,
-      contentId,
-      dropdownPosition,
-      dropdownDirection,
-      menuAppendTo,
-      actionsToggle,
-      onFavorite,
-      canSortFavorites,
-      // order of columns: Collapsible | Selectable | Favoritable
-      firstUserColumnIndex: [onCollapse, onSelect, onFavorite].filter((callback) => callback).length
-    });
+    const getFocusableElement = (element: Element) =>
+      element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
 
-    const table = (
-      <TableContext.Provider
-        value={{
-          headerData,
-          headerRows: null as IHeaderRow[],
-          rows
-        }}
-      >
-        {header}
-        <Provider
-          {...props}
-          aria-label={ariaLabel}
-          renderers={{
-            body: {
-              wrapper: bodyWrapper || BodyWrapper,
-              row: rowWrapper || (this.props.isTreeTable ? TreeRowWrapper : RowWrapper),
-              cell: BodyCell
-            },
-            header: {
-              cell: HeaderCell
-            }
-          }}
-          columns={headerData}
-          role={role}
-          variant={variant}
-          borders={borders}
-        >
-          {caption && <caption>{caption}</caption>}
-          {children}
-        </Provider>
-      </TableContext.Provider>
+    handleArrows(
+      event,
+      rows,
+      (element: Element) => element === activeElement.closest('tr'),
+      getFocusableElement,
+      ['button', 'input', 'a'],
+      undefined,
+      false,
+      true,
+      false
     );
+  };
 
-    if (onRowEdit) {
-      return <form className={css(inlineStyles.inlineEdit)}>{table}</form>;
-    }
+  const registerSelectableRow = () => {
+    !hasSelectableRows && setHasSelectableRows(true);
+  };
 
-    return table;
-  }
-}
+  return (
+    <TableContext.Provider value={{ registerSelectableRow }}>
+      <table
+        aria-label={ariaLabel}
+        role={role}
+        className={css(
+          className,
+          styles.table,
+          isTreeTable ? treeGrid : grid,
+          styles.modifiers[variant],
+          !borders && styles.modifiers.noBorderRows,
+          isStickyHeader && styles.modifiers.stickyHeader,
+          isTreeTable && stylesTreeView.modifiers.treeView,
+          isStriped && styles.modifiers.striped,
+          isExpandable && styles.modifiers.expandable,
+          isNested && 'pf-m-nested'
+        )}
+        ref={tableRef}
+        {...(isTreeTable && { role: 'treegrid' })}
+        {...ouiaProps}
+        {...props}
+      >
+        {hasSelectableRows && tableCaption}
+        {children}
+      </table>
+    </TableContext.Provider>
+  );
+};
+
+export const Table = React.forwardRef((props: TableProps, ref: React.Ref<HTMLTableElement>) => (
+  <TableBase {...props} innerRef={ref as React.MutableRefObject<any>} />
+));
+Table.displayName = 'Table';
diff --git a/packages/react-table/src/components/Table/TableTypes.tsx b/packages/react-table/src/components/Table/TableTypes.tsx
index 8ce09f884a5..05ac266a713 100644
--- a/packages/react-table/src/components/Table/TableTypes.tsx
+++ b/packages/react-table/src/components/Table/TableTypes.tsx
@@ -1,10 +1,10 @@
-import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button';
-import { formatterValueType, ColumnType, RowType, RowKeyType, HeaderType } from './base';
+import { formatterValueType, ColumnType, RowType, RowKeyType, HeaderType } from './base/types';
 import { SortByDirection } from './SortColumn';
 import { DropdownItemProps } from '@patternfly/react-core/dist/esm/components/Dropdown';
 import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
 import * as React from 'react';
 import { CustomActionsToggleProps } from './ActionsColumn';
+import { ButtonProps } from '@patternfly/react-core/dist/esm/components/Button';
 
 export enum TableGridBreakpoint {
   none = '',
diff --git a/packages/react-table/src/components/TableComposable/Tbody.tsx b/packages/react-table/src/components/Table/Tbody.tsx
similarity index 100%
rename from packages/react-table/src/components/TableComposable/Tbody.tsx
rename to packages/react-table/src/components/Table/Tbody.tsx
diff --git a/packages/react-table/src/components/TableComposable/Td.tsx b/packages/react-table/src/components/Table/Td.tsx
similarity index 91%
rename from packages/react-table/src/components/TableComposable/Td.tsx
rename to packages/react-table/src/components/Table/Td.tsx
index 9c47d33a017..f932a6b9284 100644
--- a/packages/react-table/src/components/TableComposable/Td.tsx
+++ b/packages/react-table/src/components/Table/Td.tsx
@@ -2,20 +2,22 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import scrollStyles from '@patternfly/react-styles/css/components/Table/table-scrollable';
-import { BaseCellProps } from './TableComposable';
-import { cellActions } from '../Table/utils/decorators/cellActions';
-import { selectable } from '../Table/utils/decorators/selectable';
-import { collapsible } from '../Table/utils/decorators/collapsible';
-import { compoundExpand } from '../Table/utils/decorators/compoundExpand';
-import { cellWidth } from '../Table/utils/decorators/cellWidth';
-import { Visibility, classNames } from './../Table/utils/decorators/classNames';
-import { favoritable } from '../Table/utils/decorators/favoritable';
-import { draggable } from '../Table/utils/decorators/draggable';
-import { treeRow } from '../Table/utils/decorators/treeRow';
-import { mergeProps } from '../Table/base/merge-props';
-import { IVisibility } from '../Table/utils/decorators/classNames';
-import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
-import { IFormatterValueType, IExtra } from '../Table/TableTypes';
+import { BaseCellProps } from './Table';
+import {
+  cellActions,
+  selectable,
+  collapsible,
+  compoundExpand,
+  cellWidth,
+  Visibility,
+  classNames,
+  favoritable } from './utils';
+import { draggable } from './utils/decorators/draggable';
+import { treeRow } from './utils';
+import { mergeProps } from './base/merge-props';
+import { IVisibility } from './utils/decorators/classNames';
+import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
+import { IFormatterValueType, IExtra } from './TableTypes';
 import {
   TdActionsType,
   TdCompoundExpandType,
@@ -24,7 +26,7 @@ import {
   TdFavoritesType,
   TdSelectType,
   TdTreeRowType
-} from '../Table/base';
+} from './base/types';
 export interface TdProps extends BaseCellProps, Omit<React.HTMLProps<HTMLTableDataCellElement>, 'onSelect' | 'width'> {
   /**
    * The column header the cell corresponds to.
diff --git a/packages/react-table/src/components/TableComposable/Th.tsx b/packages/react-table/src/components/Table/Th.tsx
similarity index 90%
rename from packages/react-table/src/components/TableComposable/Th.tsx
rename to packages/react-table/src/components/Table/Th.tsx
index 8c2333374df..1e77337b353 100644
--- a/packages/react-table/src/components/TableComposable/Th.tsx
+++ b/packages/react-table/src/components/Table/Th.tsx
@@ -2,18 +2,22 @@ import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import scrollStyles from '@patternfly/react-styles/css/components/Table/table-scrollable';
-import { info } from '../Table/utils/decorators/info';
-import { sortable, sortableFavorites } from '../Table/utils/decorators/sortable';
-import { selectable } from '../Table/utils/decorators/selectable';
-import { collapsible } from '../Table/utils/decorators/collapsible';
-import { cellWidth } from './../Table/utils/decorators/cellWidth';
-import { Visibility, classNames } from './../Table/utils/decorators/classNames';
-import { ThInfoType, ThSelectType, ThExpandType, ThSortType, formatterValueType } from '../Table/base/types';
-import { mergeProps } from '../Table/base/merge-props';
-import { IVisibility } from '../Table/utils/decorators/classNames';
-import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
-import { BaseCellProps } from './TableComposable';
-import { IFormatterValueType, IColumn } from '../Table/TableTypes';
+import {
+  info,
+  sortable,
+  sortableFavorites,
+  selectable,
+  collapsible,
+  cellWidth,
+  Visibility,
+  classNames
+} from './utils';
+import { ThInfoType,ThSelectType, ThExpandType, ThSortType, formatterValueType } from './base/types';
+import { mergeProps } from './base/merge-props';
+import { IVisibility } from './utils/decorators/classNames';
+import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip/Tooltip';
+import { BaseCellProps } from './Table';
+import { IFormatterValueType, IColumn } from './TableTypes';
 
 export interface ThProps
   extends BaseCellProps,
diff --git a/packages/react-table/src/components/TableComposable/Thead.tsx b/packages/react-table/src/components/Table/Thead.tsx
similarity index 100%
rename from packages/react-table/src/components/TableComposable/Thead.tsx
rename to packages/react-table/src/components/Table/Thead.tsx
diff --git a/packages/react-table/src/components/TableComposable/Tr.tsx b/packages/react-table/src/components/Table/Tr.tsx
similarity index 96%
rename from packages/react-table/src/components/TableComposable/Tr.tsx
rename to packages/react-table/src/components/Table/Tr.tsx
index b36d73c2edb..672f62f4689 100644
--- a/packages/react-table/src/components/TableComposable/Tr.tsx
+++ b/packages/react-table/src/components/Table/Tr.tsx
@@ -3,7 +3,7 @@ import { useOUIAProps, OUIAProps } from '@patternfly/react-core/dist/esm/helpers
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
 import { css } from '@patternfly/react-styles';
-import { TableComposableContext } from './TableComposable';
+import { TableContext } from './Table';
 
 export interface TrProps extends React.HTMLProps<HTMLTableRowElement>, OUIAProps {
   /** Content rendered inside the <tr> row */
@@ -74,7 +74,7 @@ const TrBase: React.FunctionComponent<TrProps> = ({
 
   const rowIsHidden = isHidden || (isExpanded !== undefined && !isExpanded);
 
-  const { registerSelectableRow } = React.useContext(TableComposableContext);
+  const { registerSelectableRow } = React.useContext(TableContext);
 
   React.useEffect(() => {
     if (isSelectable && !rowIsHidden) {
diff --git a/packages/react-table/src/components/Table/TreeRowWrapper.tsx b/packages/react-table/src/components/Table/TreeRowWrapper.tsx
index 630d1e441c8..885cae64a7c 100644
--- a/packages/react-table/src/components/Table/TreeRowWrapper.tsx
+++ b/packages/react-table/src/components/Table/TreeRowWrapper.tsx
@@ -3,7 +3,7 @@ import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-tree-view';
 import { RowWrapperProps } from './RowWrapper';
-import { Tr } from '../TableComposable';
+import { Tr } from './Tr';
 
 export const TreeRowWrapper: React.FunctionComponent<RowWrapperProps> = ({
   className,
diff --git a/packages/react-table/src/components/Table/base/index.ts b/packages/react-table/src/components/Table/base/index.ts
deleted file mode 100644
index 17b59134316..00000000000
--- a/packages/react-table/src/components/Table/base/index.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-export * from './provider';
-export * from './header';
-export * from './body';
-export * from './body-row';
-export * from './evaluate-formatters';
-export * from './evaluate-transforms';
-export * from './merge-props';
-export * from './columns-are-equal';
-export * from './resolve-row-key';
-export * from './types';
diff --git a/packages/react-table/src/components/Table/base/types.tsx b/packages/react-table/src/components/Table/base/types.tsx
index d8d1404468e..5419e18d2fd 100644
--- a/packages/react-table/src/components/Table/base/types.tsx
+++ b/packages/react-table/src/components/Table/base/types.tsx
@@ -10,12 +10,12 @@ import { TooltipProps } from '@patternfly/react-core/dist/esm/components/Tooltip
 import { PopoverProps } from '@patternfly/react-core/dist/esm/components/Popover';
 import { DropdownPosition, DropdownDirection } from '@patternfly/react-core/dist/esm/deprecated/components/Dropdown';
 import { SelectProps, SelectOptionObject } from '@patternfly/react-core/dist/esm/components/Select';
-import { TableComposable } from '../../TableComposable/TableComposable';
-import { Thead } from '../../TableComposable/Thead';
-import { Tbody } from '../../TableComposable/Tbody';
-import { Tr } from '../../TableComposable/Tr';
-import { Th } from '../../TableComposable/Th';
-import { Td } from '../../TableComposable/Td';
+import { Table } from '../Table';
+import { Thead } from '../Thead';
+import { Tbody } from '../Tbody';
+import { Tr } from '../Tr';
+import { Th } from '../Th';
+import { Td } from '../Td';
 import {
   IActions,
   ISortBy,
@@ -202,7 +202,7 @@ export interface RowType {
 // Table Defaults
 export const TableDefaults = {
   renderers: {
-    table: TableComposable,
+    table: Table,
     header: {
       wrapper: Thead,
       row: Tr,
diff --git a/packages/react-table/src/components/TableComposable/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md
similarity index 90%
rename from packages/react-table/src/components/TableComposable/examples/Table.md
rename to packages/react-table/src/components/Table/examples/Table.md
index b0412bb01ee..cd2e36c79e7 100644
--- a/packages/react-table/src/components/TableComposable/examples/Table.md
+++ b/packages/react-table/src/components/Table/examples/Table.md
@@ -4,7 +4,7 @@ cssPrefix: pf-c-table
 section: components
 propComponents:
   [
-    'TableComposable',
+    'Table',
     'Thead',
     'Tbody',
     'Tr',
@@ -36,11 +36,9 @@ propComponents:
 ouia: true
 ---
 
-# Table
-
 Note: Table lives in its own package at [@patternfly/react-table](https://www.npmjs.com/package/@patternfly/react-table)!
 
-The `TableComposable` component takes an explicit and declarative approach, and its implementation closely mirrors that of an HTML table.
+The `Table` component takes an explicit and declarative approach, and its implementation closely mirrors that of an HTML table.
 
 The documentation for the deprecated table implementation can be found under the [React deprecated](/components/table/react-deprecated) tab. It is configuration based and takes a less declarative and more implicit approach to laying out the table structure, such as the rows and cells within it.
 
@@ -60,13 +58,13 @@ import styles from '@patternfly/react-styles/css/components/Table/table';
 
 ## Table examples
 
-This `TableComposable` component differs from the deprecated `Table` component, in that it allows you to compose the table by nesting the relevant `Thead`, `Tbody`, `Tr`, `Th` and `Td` components within it. For a less declarative and more implicit approach, use the `Table` component instead.
+This `Table` component differs from the deprecated `Table` component, in that it allows you to compose the table by nesting the relevant `Thead`, `Tbody`, `Tr`, `Th` and `Td` components within it. For a less declarative and more implicit approach, use the `Table` component instead.
 
 Some general notes:
 
 - Provide `dataLabel` prop to the `Td` components so that in mobile view the cell has a label to provide context.
-- If you want a table caption, simply place a `<Caption>My caption</Caption>` as the first child within a `TableComposable`.
-- You can set the `TableComposable` variant to `compact`
+- If you want a table caption, simply place a `<Caption>My caption</Caption>` as the first child within a `Table`.
+- You can set the `Table` variant to `compact`
 
 ### Basic
 
@@ -269,7 +267,7 @@ To make a favoritable column sortable, pass a `ThSortType` object to the favorit
 
 To enable a tree table:
 
-1. Pass the `isTreeTable` prop to the `TableComposable` component
+1. Pass the `isTreeTable` prop to the `Table` component
 2. Use a `TreeRowWrapper` rather than `Tr`
 3. Pass the following `props` to each row (both the `TreeRowWrapper` and the `treeRow` in the first column):
    - `isExpanded` - Flag indicating the node is expanded and its children are visible
@@ -305,7 +303,7 @@ To make a row draggable:
 1. The table needs a draggable column.
 2. Each draggable `Tr` needs to be passed `draggable`, `onDrop`, `onDragEnd`, and `onDragStart` props.
 3. The `Tbody` needs `onDragOver`, `onDrop`, and `onDragLeave` props.
-4. While the user is dragging a row, the `pf-m-drag-over` class needs to be applied to `TableComposable`.
+4. While the user is dragging a row, the `pf-m-drag-over` class needs to be applied to `Table`.
 5. The draggable `Td` in each row needs a `TdDraggableType` object passed to its `draggable` prop.
 
 ```ts isBeta file="TableDraggable.tsx"
@@ -325,7 +323,7 @@ There are a few ways this can be handled:
 
 ### Sticky column
 
-To make a column sticky, wrap `TableComposable` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky: `isStickyColumn` and `hasRightBorder`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. To set the minimum width of the sticky column, use the `stickyMinWidth` property.
+To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the following properties to the `Th` or `Td` that should be sticky: `isStickyColumn` and `hasRightBorder`. To prevent the default text wrapping behavior and allow horizontal scrolling, all `Th` or `Td` cells should also have the `modifier="nowrap"` property. To set the minimum width of the sticky column, use the `stickyMinWidth` property.
 
 ```ts file="TableStickyColumn.tsx"
 ```
@@ -341,7 +339,7 @@ To make multiple left-aligned columns sticky:
 
 To prevent the default text wrapping behavior and allow horizontal scrolling, all Th or Td cells should also have the modifier="nowrap" property.
 
-- wrap `TableComposable` with `InnerScrollContainer`
+- wrap `Table` with `InnerScrollContainer`
 - add `isStickyColumn` to all columns that should be sticky
 - add `hasRightBorder` to the rightmost sticky column
 - add `stickyLeftOffset` to each sticky column after the first, with a value that equals the combined width - set by `stickyMindWidth` - of the previous sticky columns
@@ -367,7 +365,7 @@ To prevent the default text wrapping behavior and allow horizontal scrolling, al
 
 ### Sticky columns and header
 
-To maintain proper sticky behavior across sticky columns and header, `TableComposable` must be wrapped with `OuterScrollContainer` and `InnerScrollContainer`.
+To maintain proper sticky behavior across sticky columns and header, `Table` must be wrapped with `OuterScrollContainer` and `InnerScrollContainer`.
 
 ```ts file="TableStickyColumnsAndHeader.tsx"
 ```
@@ -376,8 +374,8 @@ To maintain proper sticky behavior across sticky columns and header, `TableCompo
 
 To make a nested column header:
 
-1. Wrap `TableComposable` with `InnerScrollContainer`.
-2. Pass `nestedHeaderColumnSpans` to `TableComposable`. `nestedHeaderColumnSpans` is an array of numbers representing the column spans of the top level columns to `TableComposable`, where each number is equal to the number of sub columns for a column, or `1` if a column contains no sub columns.
+1. Wrap `Table` with `InnerScrollContainer`.
+2. Pass `nestedHeaderColumnSpans` to `Table`. `nestedHeaderColumnSpans` is an array of numbers representing the column spans of the top level columns to `Table`, where each number is equal to the number of sub columns for a column, or `1` if a column contains no sub columns.
 3. Pass `hasNestedHeader` to `Thead`.
 4. Pass two `Tr` as children of `Thead`.
 
@@ -405,14 +403,14 @@ The second `Tr` represents the second level of sub columns. The `Th` in this row
 
 ### Striped
 
-To apply striping to a basic table, add the `isStriped` property to `TableComposable`.
+To apply striping to a basic table, add the `isStriped` property to `Table`.
 
 ```ts file="TableStriped.tsx"
 ```
 
 ### Striped expandable
 
-To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `TableComposable`.
+To apply striping to an expandable table, add the `isStriped` and `isExpandable` properties to `Table`.
 
 ```ts file="TableStripedExpandable.tsx"
 ```
@@ -426,7 +424,7 @@ When there are multiple `Tbody` components within a table, a more granular appli
 
 ### Striped tr
 
-To manually control striping, add the `isStriped` property to each desired `Tr`. This replaces adding the `isStriped` property to `TableComposable`.
+To manually control striping, add the `isStriped` property to each desired `Tr`. This replaces adding the `isStriped` property to `Table`.
 
 ```ts file="TableStripedTr.tsx"
 ```
diff --git a/packages/react-table/src/components/TableComposable/examples/TableActions.tsx b/packages/react-table/src/components/Table/examples/TableActions.tsx
similarity index 98%
rename from packages/react-table/src/components/TableComposable/examples/TableActions.tsx
rename to packages/react-table/src/components/Table/examples/TableActions.tsx
index f73d6a20744..b56b6876c15 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableActions.tsx
+++ b/packages/react-table/src/components/Table/examples/TableActions.tsx
@@ -2,7 +2,7 @@
 import React from 'react';
 import { Button, MenuToggle, ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from '@patternfly/react-core';
 import {
-  TableComposable,
+  Table,
   TableText,
   Thead,
   Tr,
@@ -108,7 +108,7 @@ export const TableActions: React.FunctionComponent = () => {
           onChange={onExampleTypeChange}
         />
       </ToggleGroup>
-      <TableComposable aria-label="Actions table">
+      <Table aria-label="Actions table">
         <Thead>
           <Tr>
             <Th>{columnNames.name}</Th>
@@ -162,7 +162,7 @@ export const TableActions: React.FunctionComponent = () => {
             );
           })}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableActionsOverflow.tsx b/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
similarity index 96%
rename from packages/react-table/src/components/TableComposable/examples/TableActionsOverflow.tsx
rename to packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
index e7ba0dfc04c..5ae2296e33e 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableActionsOverflow.tsx
+++ b/packages/react-table/src/components/Table/examples/TableActionsOverflow.tsx
@@ -12,7 +12,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
 
 interface Repository {
@@ -58,7 +58,7 @@ export const TableActions: React.FunctionComponent = () => {
 
   return (
     <React.Fragment>
-      <TableComposable aria-label="Actions table">
+      <Table aria-label="Actions table">
         <Thead>
           <Tr>
             <Th>{columnNames.name}</Th>
@@ -123,7 +123,7 @@ export const TableActions: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableBasic.tsx b/packages/react-table/src/components/Table/examples/TableBasic.tsx
similarity index 95%
rename from packages/react-table/src/components/TableComposable/examples/TableBasic.tsx
rename to packages/react-table/src/components/Table/examples/TableBasic.tsx
index ccfde960bfa..4acd5acc69f 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableBasic.tsx
+++ b/packages/react-table/src/components/Table/examples/TableBasic.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from '@patternfly/react-core';
-import { TableComposable, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -57,7 +57,7 @@ export const TableBasic: React.FunctionComponent = () => {
           onChange={onExampleTypeChange}
         />
       </ToggleGroup>
-      <TableComposable
+      <Table
         aria-label="Simple table"
         variant={exampleChoice !== 'default' ? 'compact' : undefined}
         borders={exampleChoice !== 'compactBorderless'}
@@ -83,7 +83,7 @@ export const TableBasic: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableCellWidth.tsx b/packages/react-table/src/components/Table/examples/TableCellWidth.tsx
similarity index 91%
rename from packages/react-table/src/components/TableComposable/examples/TableCellWidth.tsx
rename to packages/react-table/src/components/Table/examples/TableCellWidth.tsx
index 5e36ad39281..5d094dd74d8 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableCellWidth.tsx
+++ b/packages/react-table/src/components/Table/examples/TableCellWidth.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -26,7 +26,7 @@ export const TableCellWidth: React.FunctionComponent = () => {
   };
 
   return (
-    <TableComposable aria-label="Cell widths">
+    <Table aria-label="Cell widths">
       <Thead>
         <Tr>
           <Th width={15}>{columnNames.name}</Th>
@@ -51,6 +51,6 @@ export const TableCellWidth: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableCompoundExpandable.tsx b/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
similarity index 96%
rename from packages/react-table/src/components/TableComposable/examples/TableCompoundExpandable.tsx
rename to packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
index 50272b106f9..c727e36b736 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableCompoundExpandable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableCompoundExpandable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, TdProps, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, TdProps, ExpandableRowContent } from '@patternfly/react-table';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -58,7 +58,7 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
   });
 
   return (
-    <TableComposable aria-label="Compound expandable table">
+    <Table aria-label="Compound expandable table">
       <Thead>
         <Tr>
           <Th>{columnNames.name}</Th>
@@ -127,6 +127,6 @@ export const TableCompoundExpandable: React.FunctionComponent = () => {
           </Tbody>
         );
       })}
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableControllingText.tsx b/packages/react-table/src/components/Table/examples/TableControllingText.tsx
similarity index 91%
rename from packages/react-table/src/components/TableComposable/examples/TableControllingText.tsx
rename to packages/react-table/src/components/Table/examples/TableControllingText.tsx
index b1a908572ab..4d82a9141ea 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableControllingText.tsx
+++ b/packages/react-table/src/components/Table/examples/TableControllingText.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 // This example has been simplified to focus on the text modifier props. In real usage,
 // you may want to derive your rows from typed underlying data and minimal state. See other examples.
@@ -13,7 +13,7 @@ const columnNames = {
 };
 
 export const TableControllingText: React.FunctionComponent = () => (
-  <TableComposable aria-label="Controlling text">
+  <Table aria-label="Controlling text">
     <Thead>
       <Tr>
         <Th width={20}>{columnNames.truncate}</Th>
@@ -47,5 +47,5 @@ export const TableControllingText: React.FunctionComponent = () => (
         </Td>
       </Tr>
     </Tbody>
-  </TableComposable>
+  </Table>
 );
diff --git a/packages/react-table/src/components/TableComposable/examples/TableDraggable.tsx b/packages/react-table/src/components/Table/examples/TableDraggable.tsx
similarity index 95%
rename from packages/react-table/src/components/TableComposable/examples/TableDraggable.tsx
rename to packages/react-table/src/components/Table/examples/TableDraggable.tsx
index 1778ee4312f..f67f91dee84 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableDraggable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableDraggable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tbody, Tr, Th, Td, TbodyProps, TrProps } from '@patternfly/react-table';
+import { Table, Thead, Tbody, Tr, Th, Td, TbodyProps, TrProps } from '@patternfly/react-table';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
 export const TableDraggable: React.FunctionComponent = () => {
@@ -140,7 +140,7 @@ export const TableDraggable: React.FunctionComponent = () => {
   ];
 
   return (
-    <TableComposable aria-label="Draggable table" className={isDragging && styles.modifiers.dragOver}>
+    <Table aria-label="Draggable table" className={isDragging && styles.modifiers.dragOver}>
       <Thead>
         <Tr>
           <Th />
@@ -165,6 +165,6 @@ export const TableDraggable: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableEmptyState.tsx b/packages/react-table/src/components/Table/examples/TableEmptyState.tsx
similarity index 90%
rename from packages/react-table/src/components/TableComposable/examples/TableEmptyState.tsx
rename to packages/react-table/src/components/Table/examples/TableEmptyState.tsx
index 14f68ac01dc..1d89ce97499 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableEmptyState.tsx
+++ b/packages/react-table/src/components/Table/examples/TableEmptyState.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import {
   Bullseye,
   EmptyState,
@@ -17,7 +17,7 @@ import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 // you may want to derive your rows from typed underlying data and minimal state. See other examples.
 
 export const TableEmptyState: React.FunctionComponent = () => (
-  <TableComposable aria-label="Empty state table">
+  <Table aria-label="Empty state table">
     <Thead>
       <Tr>
         <Th>Repositories</Th>
@@ -48,5 +48,5 @@ export const TableEmptyState: React.FunctionComponent = () => (
         </Td>
       </Tr>
     </Tbody>
-  </TableComposable>
+  </Table>
 );
diff --git a/packages/react-table/src/components/TableComposable/examples/TableExpandable.tsx b/packages/react-table/src/components/Table/examples/TableExpandable.tsx
similarity index 97%
rename from packages/react-table/src/components/TableComposable/examples/TableExpandable.tsx
rename to packages/react-table/src/components/Table/examples/TableExpandable.tsx
index cb48d15ed44..50f7124473c 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableExpandable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableExpandable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Checkbox } from '@patternfly/react-core';
 
 interface Repository {
@@ -117,7 +117,7 @@ export const TableExpandable: React.FunctionComponent = () => {
         id="toggle-compact"
         name="toggle-compact"
       />
-      <TableComposable aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
+      <Table aria-label="Expandable table" variant={isExampleCompact ? 'compact' : undefined}>
         <Thead>
           <Tr>
             <Th />
@@ -195,7 +195,7 @@ export const TableExpandable: React.FunctionComponent = () => {
             </Tbody>
           );
         })}
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableFavoritable.tsx b/packages/react-table/src/components/Table/examples/TableFavoritable.tsx
similarity index 96%
rename from packages/react-table/src/components/TableComposable/examples/TableFavoritable.tsx
rename to packages/react-table/src/components/Table/examples/TableFavoritable.tsx
index 2128bf2a58a..53c08f82074 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableFavoritable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableFavoritable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -84,7 +84,7 @@ export const TableFavoritable: React.FunctionComponent = () => {
   });
 
   return (
-    <TableComposable aria-label="Favoritable table" variant="compact">
+    <Table aria-label="Favoritable table" variant="compact">
       <Thead>
         <Tr>
           <Th sort={getSortParams(0)} />
@@ -113,6 +113,6 @@ export const TableFavoritable: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableHoverable.tsx b/packages/react-table/src/components/Table/examples/TableHoverable.tsx
similarity index 92%
rename from packages/react-table/src/components/TableComposable/examples/TableHoverable.tsx
rename to packages/react-table/src/components/Table/examples/TableHoverable.tsx
index 327a768e457..9d70516d30b 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableHoverable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableHoverable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -30,7 +30,7 @@ export const TableHoverable: React.FunctionComponent = () => {
   const [selectedRepoName, setSelectedRepoName] = React.useState('');
 
   return (
-    <TableComposable aria-label="Hoverable table">
+    <Table aria-label="Hoverable table">
       <Thead>
         <Tr>
           <Th>{columnNames.name}</Th>
@@ -57,6 +57,6 @@ export const TableHoverable: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableMisc.tsx b/packages/react-table/src/components/Table/examples/TableMisc.tsx
similarity index 95%
rename from packages/react-table/src/components/TableComposable/examples/TableMisc.tsx
rename to packages/react-table/src/components/Table/examples/TableMisc.tsx
index 0ceb445319e..d72ebc7183d 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableMisc.tsx
+++ b/packages/react-table/src/components/Table/examples/TableMisc.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -26,7 +26,7 @@ export const TableMisc: React.FunctionComponent = () => {
   };
 
   return (
-    <TableComposable aria-label="Misc table">
+    <Table aria-label="Misc table">
       <Thead noWrap>
         <Tr>
           <Th
@@ -87,6 +87,6 @@ export const TableMisc: React.FunctionComponent = () => {
           );
         })}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableMultipleStickyColumns.tsx b/packages/react-table/src/components/Table/examples/TableMultipleStickyColumns.tsx
similarity index 96%
rename from packages/react-table/src/components/TableComposable/examples/TableMultipleStickyColumns.tsx
rename to packages/react-table/src/components/Table/examples/TableMultipleStickyColumns.tsx
index ab06f35c065..0fbe3ca7cee 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableMultipleStickyColumns.tsx
+++ b/packages/react-table/src/components/Table/examples/TableMultipleStickyColumns.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import BlueprintIcon from '@patternfly/react-icons/dist/esm/icons/blueprint-icon';
 
 interface Fact {
@@ -88,7 +88,7 @@ export const TableMultipleStickyColumns: React.FunctionComponent = () => {
 
   return (
     <InnerScrollContainer>
-      <TableComposable aria-label="Multiple sticky column table" gridBreakPoint="">
+      <Table aria-label="Multiple sticky column table" gridBreakPoint="">
         <Thead>
           <Tr>
             <Th isStickyColumn modifier="truncate" sort={getSortParams(0)}>
@@ -147,7 +147,7 @@ export const TableMultipleStickyColumns: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </InnerScrollContainer>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableNestedExpandable.tsx b/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx
similarity index 97%
rename from packages/react-table/src/components/TableComposable/examples/TableNestedExpandable.tsx
rename to packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx
index caf12f78e7d..4c317e05997 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableNestedExpandable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableNestedExpandable.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  TableComposable,
+  Table,
   Thead,
   Tr,
   Th,
@@ -70,7 +70,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
 
   return (
     <InnerScrollContainer>
-      <TableComposable aria-label="Nested column headers with expandable rows table" gridBreakPoint="">
+      <Table aria-label="Nested column headers with expandable rows table" gridBreakPoint="">
         <Thead hasNestedHeader>
           <Tr>
             <Th rowSpan={2} />
@@ -120,7 +120,7 @@ export const TableNestedExpandable: React.FunctionComponent = () => {
             </Tr>
           </Tbody>
         ))}
-      </TableComposable>
+      </Table>
     </InnerScrollContainer>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableNestedHeaders.tsx b/packages/react-table/src/components/Table/examples/TableNestedHeaders.tsx
similarity index 96%
rename from packages/react-table/src/components/TableComposable/examples/TableNestedHeaders.tsx
rename to packages/react-table/src/components/Table/examples/TableNestedHeaders.tsx
index 641fad0bb55..76c9890dbdd 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableNestedHeaders.tsx
+++ b/packages/react-table/src/components/Table/examples/TableNestedHeaders.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import { Stack, StackItem } from '@patternfly/react-core';
 
 interface PodConnection {
@@ -114,7 +114,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
 
   return (
     <InnerScrollContainer>
-      <TableComposable aria-label="Nested column headers table" gridBreakPoint="">
+      <Table aria-label="Nested column headers table" gridBreakPoint="">
         <Thead hasNestedHeader>
           <Tr>
             <Th hasRightBorder colSpan={3}>
@@ -192,7 +192,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </InnerScrollContainer>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableNestedStickyHeader.tsx b/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
similarity index 96%
rename from packages/react-table/src/components/TableComposable/examples/TableNestedStickyHeader.tsx
rename to packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
index 462276749a3..673b0660de5 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableNestedStickyHeader.tsx
+++ b/packages/react-table/src/components/Table/examples/TableNestedStickyHeader.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 import { Stack, StackItem } from '@patternfly/react-core';
 
 interface PodConnection {
@@ -114,7 +114,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
 
   return (
     <InnerScrollContainer>
-      <TableComposable aria-label="Nested column headers table" gridBreakPoint="" isStickyHeader>
+      <Table aria-label="Nested column headers table" gridBreakPoint="" isStickyHeader>
         <Thead hasNestedHeader>
           <Tr>
             <Th hasRightBorder colSpan={3}>
@@ -195,7 +195,7 @@ export const TableNestedHeaders: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </InnerScrollContainer>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableNestedTableExpandable.tsx b/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx
similarity index 97%
rename from packages/react-table/src/components/TableComposable/examples/TableNestedTableExpandable.tsx
rename to packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx
index c3cce30377c..93a14c53143 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableNestedTableExpandable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableNestedTableExpandable.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
 import {
-  TableComposable,
+  Table,
   Thead,
   Tr,
   Th,
@@ -46,7 +46,7 @@ const NestedReposTable: React.FunctionComponent = () => {
   };
 
   return (
-    <TableComposable aria-label="Simple table" variant="compact">
+    <Table aria-label="Simple table" variant="compact">
       <Thead>
         <Tr>
           <Th>{columnNames.name}</Th>
@@ -67,7 +67,7 @@ const NestedReposTable: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
 
@@ -138,7 +138,7 @@ export const TableExpandable: React.FunctionComponent = () => {
   ];
 
   return (
-    <TableComposable aria-label="Simple table">
+    <Table aria-label="Simple table">
       <Thead>
         <Tr>
           <Td />
@@ -185,6 +185,6 @@ export const TableExpandable: React.FunctionComponent = () => {
           ) : null}
         </Tbody>
       ))}
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableSelectable.tsx b/packages/react-table/src/components/Table/examples/TableSelectable.tsx
similarity index 96%
rename from packages/react-table/src/components/TableComposable/examples/TableSelectable.tsx
rename to packages/react-table/src/components/Table/examples/TableSelectable.tsx
index 65cbf937ff0..5fb50bcb574 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableSelectable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableSelectable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -85,7 +85,7 @@ export const TableSelectable: React.FunctionComponent = () => {
   }, []);
 
   return (
-    <TableComposable aria-label="Selectable table">
+    <Table aria-label="Selectable table">
       <Thead>
         <Tr>
           <Th
@@ -120,6 +120,6 @@ export const TableSelectable: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableSelectableRadio.tsx b/packages/react-table/src/components/Table/examples/TableSelectableRadio.tsx
similarity index 93%
rename from packages/react-table/src/components/TableComposable/examples/TableSelectableRadio.tsx
rename to packages/react-table/src/components/Table/examples/TableSelectableRadio.tsx
index 99da7eb88dc..8870d93424f 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableSelectableRadio.tsx
+++ b/packages/react-table/src/components/Table/examples/TableSelectableRadio.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -32,7 +32,7 @@ export const TableSelectableRadio: React.FunctionComponent = () => {
   const [selectedRepoName, setSelectedRepoName] = React.useState<string | null>(null);
 
   return (
-    <TableComposable aria-label="Selectable table">
+    <Table aria-label="Selectable table">
       <Thead>
         <Tr>
           <Th />
@@ -63,6 +63,6 @@ export const TableSelectableRadio: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableSortable.tsx b/packages/react-table/src/components/Table/examples/TableSortable.tsx
similarity index 96%
rename from packages/react-table/src/components/TableComposable/examples/TableSortable.tsx
rename to packages/react-table/src/components/Table/examples/TableSortable.tsx
index 4baa0a39e70..ed831fb517d 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableSortable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableSortable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -79,7 +79,7 @@ export const TableSortable: React.FunctionComponent = () => {
 
   // In this example, we wrap all but the 1st column and make the 1st and 3rd columns sortable just to demonstrate.
   return (
-    <TableComposable aria-label="Sortable table">
+    <Table aria-label="Sortable table">
       <Thead>
         <Tr>
           <Th sort={getSortParams(0)}>{columnNames.name}</Th>
@@ -102,6 +102,6 @@ export const TableSortable: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableSortableCustom.tsx b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
similarity index 97%
rename from packages/react-table/src/components/TableComposable/examples/TableSortableCustom.tsx
rename to packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
index 0145b861fb9..cdb513e3fb8 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableSortableCustom.tsx
+++ b/packages/react-table/src/components/Table/examples/TableSortableCustom.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, ThProps } from '@patternfly/react-table';
 import {
   Toolbar,
   ToolbarContent,
@@ -139,7 +139,7 @@ export const TableSortableCustom: React.FunctionComponent = () => {
           </ToolbarItem> */}
         </ToolbarContent>
       </Toolbar>
-      <TableComposable aria-label="Sortable table custom toolbar">
+      <Table aria-label="Sortable table custom toolbar">
         <Thead>
           <Tr>
             <Th sort={getSortParams(0)}>{columnNames.name}</Th>
@@ -162,7 +162,7 @@ export const TableSortableCustom: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableStickyColumn.tsx b/packages/react-table/src/components/Table/examples/TableStickyColumn.tsx
similarity index 95%
rename from packages/react-table/src/components/TableComposable/examples/TableStickyColumn.tsx
rename to packages/react-table/src/components/Table/examples/TableStickyColumn.tsx
index 48461a3fd12..8544c860423 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableStickyColumn.tsx
+++ b/packages/react-table/src/components/Table/examples/TableStickyColumn.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
 
 interface Fact {
   name: string;
@@ -87,7 +87,7 @@ export const TableStickyColumn: React.FunctionComponent = () => {
 
   return (
     <InnerScrollContainer>
-      <TableComposable aria-label="Sticky column table" gridBreakPoint="">
+      <Table aria-label="Sticky column table" gridBreakPoint="">
         <Thead>
           <Tr>
             <Th isStickyColumn hasRightBorder modifier="truncate" sort={getSortParams(0)}>
@@ -138,7 +138,7 @@ export const TableStickyColumn: React.FunctionComponent = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     </InnerScrollContainer>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableStickyColumnsAndHeader.tsx b/packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx
similarity index 97%
rename from packages/react-table/src/components/TableComposable/examples/TableStickyColumnsAndHeader.tsx
rename to packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx
index 623a8770e33..d76292189a2 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableStickyColumnsAndHeader.tsx
+++ b/packages/react-table/src/components/Table/examples/TableStickyColumnsAndHeader.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import {
-  TableComposable,
+  Table,
   Thead,
   Tr,
   Th,
@@ -100,7 +100,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
     <div style={{ height: '600px' }}>
       <OuterScrollContainer>
         <InnerScrollContainer>
-          <TableComposable aria-label="Sticky columns and header table" gridBreakPoint="" isStickyHeader>
+          <Table aria-label="Sticky columns and header table" gridBreakPoint="" isStickyHeader>
             <Thead>
               <Tr>
                 <Th isStickyColumn modifier="truncate" sort={getSortParams(0)}>
@@ -159,7 +159,7 @@ export const TableStickyColumnsAndHeader: React.FunctionComponent = () => {
                 </Tr>
               ))}
             </Tbody>
-          </TableComposable>
+          </Table>
         </InnerScrollContainer>
       </OuterScrollContainer>
     </div>
diff --git a/packages/react-table/src/components/TableComposable/examples/TableStriped.tsx b/packages/react-table/src/components/Table/examples/TableStriped.tsx
similarity index 90%
rename from packages/react-table/src/components/TableComposable/examples/TableStriped.tsx
rename to packages/react-table/src/components/Table/examples/TableStriped.tsx
index dbdb914e629..52bba996a15 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableStriped.tsx
+++ b/packages/react-table/src/components/Table/examples/TableStriped.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -27,7 +27,7 @@ export const TableStriped: React.FunctionComponent = () => {
   };
 
   return (
-    <TableComposable aria-label="Simple table" isStriped>
+    <Table aria-label="Simple table" isStriped>
       <Caption>Simple striped table using composable components</Caption>
       <Thead>
         <Tr>
@@ -49,6 +49,6 @@ export const TableStriped: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableStripedExpandable.tsx b/packages/react-table/src/components/Table/examples/TableStripedExpandable.tsx
similarity index 97%
rename from packages/react-table/src/components/TableComposable/examples/TableStripedExpandable.tsx
rename to packages/react-table/src/components/Table/examples/TableStripedExpandable.tsx
index 8e7f67cde51..630b3a9b467 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableStripedExpandable.tsx
+++ b/packages/react-table/src/components/Table/examples/TableStripedExpandable.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Checkbox } from '@patternfly/react-core';
 
 interface Repository {
@@ -112,7 +112,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
         id="toggle-compact-striped"
         name="toggle-compact-striped"
       />
-      <TableComposable
+      <Table
         aria-label="Expandable table"
         variant={isExampleCompact ? 'compact' : undefined}
         isStriped
@@ -194,7 +194,7 @@ export const TableStripedExpandable: React.FunctionComponent = () => {
             </Tbody>
           );
         })}
-      </TableComposable>
+      </Table>
     </React.Fragment>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableStripedMultipleTbody.tsx b/packages/react-table/src/components/Table/examples/TableStripedMultipleTbody.tsx
similarity index 95%
rename from packages/react-table/src/components/TableComposable/examples/TableStripedMultipleTbody.tsx
rename to packages/react-table/src/components/Table/examples/TableStripedMultipleTbody.tsx
index e3a872a2785..a6425b06409 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableStripedMultipleTbody.tsx
+++ b/packages/react-table/src/components/Table/examples/TableStripedMultipleTbody.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -62,7 +62,7 @@ export const TableStripedMultipleTbody: React.FunctionComponent = () => {
   };
 
   return (
-    <TableComposable aria-label="Simple table">
+    <Table aria-label="Simple table">
       <Caption>Striped table using multiple tbody components</Caption>
       <Thead>
         <Tr>
@@ -115,6 +115,6 @@ export const TableStripedMultipleTbody: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableStripedTr.tsx b/packages/react-table/src/components/Table/examples/TableStripedTr.tsx
similarity index 91%
rename from packages/react-table/src/components/TableComposable/examples/TableStripedTr.tsx
rename to packages/react-table/src/components/Table/examples/TableStripedTr.tsx
index 0f0a0308cdf..5927275b95e 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableStripedTr.tsx
+++ b/packages/react-table/src/components/Table/examples/TableStripedTr.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Caption, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
@@ -27,7 +27,7 @@ export const TableStripedTr: React.FunctionComponent = () => {
   };
 
   return (
-    <TableComposable aria-label="Simple table">
+    <Table aria-label="Simple table">
       <Caption>Manually striped table using composable components</Caption>
       <Thead>
         <Tr>
@@ -49,6 +49,6 @@ export const TableStripedTr: React.FunctionComponent = () => {
           </Tr>
         ))}
       </Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/TableComposable/examples/TableTextModifiers.tsx b/packages/react-table/src/components/Table/examples/TableTextModifiers.tsx
similarity index 85%
rename from packages/react-table/src/components/TableComposable/examples/TableTextModifiers.tsx
rename to packages/react-table/src/components/Table/examples/TableTextModifiers.tsx
index 97e4be0b3cc..50eb6da30ed 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableTextModifiers.tsx
+++ b/packages/react-table/src/components/Table/examples/TableTextModifiers.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, TableText } from '@patternfly/react-table';
 
 // This example has been simplified to focus on the text modifier props. In real usage,
 // you may want to derive your rows from typed underlying data and minimal state. See other examples.
@@ -10,7 +10,7 @@ const columnNames = {
 };
 
 export const TableTextModifiers: React.FunctionComponent = () => (
-  <TableComposable aria-label="Table text">
+  <Table aria-label="Table text">
     <Thead>
       <Tr>
         <Th width={30}>{columnNames.truncate}</Th>
@@ -29,5 +29,5 @@ export const TableTextModifiers: React.FunctionComponent = () => (
         </Td>
       </Tr>
     </Tbody>
-  </TableComposable>
+  </Table>
 );
diff --git a/packages/react-table/src/components/TableComposable/examples/TableTree.tsx b/packages/react-table/src/components/Table/examples/TableTree.tsx
similarity index 97%
rename from packages/react-table/src/components/TableComposable/examples/TableTree.tsx
rename to packages/react-table/src/components/Table/examples/TableTree.tsx
index aa338073ec1..64c9c68fa29 100644
--- a/packages/react-table/src/components/TableComposable/examples/TableTree.tsx
+++ b/packages/react-table/src/components/Table/examples/TableTree.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, TreeRowWrapper, TdProps } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, TreeRowWrapper, TdProps } from '@patternfly/react-table';
 import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
@@ -194,7 +194,7 @@ export const TableTree: React.FunctionComponent = () => {
   };
 
   return (
-    <TableComposable isTreeTable aria-label="Tree table">
+    <Table isTreeTable aria-label="Tree table">
       <Thead>
         <Tr>
           <Th width={40}>{columnNames.name}</Th>
@@ -204,6 +204,6 @@ export const TableTree: React.FunctionComponent = () => {
         </Tr>
       </Thead>
       <Tbody>{renderRows(data)}</Tbody>
-    </TableComposable>
+    </Table>
   );
 };
diff --git a/packages/react-table/src/components/Table/index.ts b/packages/react-table/src/components/Table/index.ts
index 525395ec696..e5260c213d8 100644
--- a/packages/react-table/src/components/Table/index.ts
+++ b/packages/react-table/src/components/Table/index.ts
@@ -1,15 +1,9 @@
-export * from './Table';
 export * from './ActionsColumn';
-export * from './Body';
-export * from './BodyCell';
-export * from './BodyWrapper';
 export * from './CollapseColumn';
 export * from './DraggableCell';
 export * from './EditableSelectInputCell';
 export * from './EditableTextCell';
 export * from './ExpandableRowContent';
-export * from './Header';
-export * from './HeaderCell';
 export * from './HeaderCellInfoWrapper';
 export * from './RowWrapper';
 export * from './SelectColumn';
@@ -17,6 +11,14 @@ export * from './SortColumn';
 export * from './TableText';
 export * from './utils';
 export * from './TableTypes';
-export * from './TableContext';
 export * from './FavoritesCell';
 export * from './TreeRowWrapper';
+export * from './Table';
+export * from './Thead';
+export * from './Tbody';
+export * from './Tr';
+export * from './Th';
+export * from './Td';
+export * from './Caption';
+export * from './OuterScrollContainer';
+export * from './InnerScrollContainer';
diff --git a/packages/react-table/src/components/TableComposable/TableComposable.tsx b/packages/react-table/src/components/TableComposable/TableComposable.tsx
deleted file mode 100644
index a901d11af3d..00000000000
--- a/packages/react-table/src/components/TableComposable/TableComposable.tsx
+++ /dev/null
@@ -1,226 +0,0 @@
-import * as React from 'react';
-import styles from '@patternfly/react-styles/css/components/Table/table';
-import stylesGrid from '@patternfly/react-styles/css/components/Table/table-grid';
-import stylesTreeView from '@patternfly/react-styles/css/components/Table/table-tree-view';
-import { css } from '@patternfly/react-styles';
-import { toCamel } from '../Table/utils/utils';
-import { IVisibility } from '../Table/utils/decorators/classNames';
-import { useOUIAProps, OUIAProps, handleArrows, setTabIndex } from '@patternfly/react-core/dist/esm/helpers';
-import { TableGridBreakpoint, TableVariant } from '../Table/TableTypes';
-
-export interface BaseCellProps {
-  /** Content rendered inside the cell */
-  children?: React.ReactNode;
-  /** Additional classes added to the cell  */
-  className?: string;
-  /** Element to render */
-  component?: React.ReactNode;
-  /** Modifies cell to center its contents. */
-  textCenter?: boolean;
-  /** Style modifier to apply */
-  modifier?: 'breakWord' | 'fitContent' | 'nowrap' | 'truncate' | 'wrap';
-  /** Width percentage modifier */
-  width?: 10 | 15 | 20 | 25 | 30 | 35 | 40 | 45 | 50 | 60 | 70 | 80 | 90 | 100;
-  /** Visibility breakpoint modifiers */
-  visibility?: (keyof IVisibility)[];
-  /** @hide Forwarded ref */
-  innerRef?: React.Ref<any>;
-}
-
-export interface TableComposableProps extends React.HTMLProps<HTMLTableElement>, OUIAProps {
-  /** Adds an accessible name for the Table */
-  'aria-label'?: string;
-  /** Content rendered inside the Table */
-  children?: React.ReactNode;
-  /** Additional classes added to the Table  */
-  className?: string;
-  /**
-   * Style variant for the Table
-   * compact: Reduces spacing and makes the table more compact
-   */
-  variant?: TableVariant | 'compact';
-  /** Render borders */
-  borders?: boolean;
-  /** Specifies the grid breakpoints  */
-  gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl';
-  /** A valid WAI-ARIA role to be applied to the table element */
-  role?: string;
-  /** If set to true, the table header sticks to the top of its container */
-  isStickyHeader?: boolean;
-  /** @hide Forwarded ref */
-  innerRef?: React.RefObject<any>;
-  /** Flag indicating table is a tree table */
-  isTreeTable?: boolean;
-  /** Flag indicating this table is nested within another table */
-  isNested?: boolean;
-  /** Flag indicating this table should be striped. This property works best for a single <tbody> table. Striping may also be done manually by applying this property to Tbody and Tr components. */
-  isStriped?: boolean;
-  /** Flag indicating this table contains expandable rows to maintain proper striping */
-  isExpandable?: boolean;
-  /** Collection of column spans for nested headers. Deprecated: see https://github.com/patternfly/patternfly/issues/4584 */
-  nestedHeaderColumnSpans?: number[];
-  /** Visible text to add alongside the hidden a11y caption for tables with selectable rows. */
-  selectableRowCaptionText?: string;
-  /** Value to overwrite the randomly generated data-ouia-component-id.*/
-  ouiaId?: number | string;
-  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
-  ouiaSafe?: boolean;
-}
-
-interface TableComposableContextProps {
-  registerSelectableRow?: () => void;
-}
-
-export const TableComposableContext = React.createContext<TableComposableContextProps>({
-  registerSelectableRow: () => {}
-});
-
-const TableComposableBase: React.FunctionComponent<TableComposableProps> = ({
-  children,
-  className,
-  variant,
-  borders = true,
-  isStickyHeader = false,
-  gridBreakPoint = TableGridBreakpoint.gridMd,
-  'aria-label': ariaLabel,
-  role = 'grid',
-  innerRef,
-  ouiaId,
-  ouiaSafe = true,
-  isTreeTable = false,
-  isNested = false,
-  isStriped = false,
-  isExpandable = false,
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
-  nestedHeaderColumnSpans,
-  selectableRowCaptionText,
-  ...props
-}: TableComposableProps) => {
-  const ref = React.useRef(null);
-  const tableRef = innerRef || ref;
-
-  const [hasSelectableRows, setHasSelectableRows] = React.useState(false);
-  const [tableCaption, setTableCaption] = React.useState<JSX.Element | undefined>();
-
-  React.useEffect(() => {
-    document.addEventListener('keydown', handleKeys);
-
-    // sets up roving tab-index to tree tables only
-    if (tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) {
-      const tbody = tableRef.current.querySelector('tbody');
-      tbody && setTabIndex(Array.from(tbody.querySelectorAll('button, a, input')));
-    }
-
-    return function cleanup() {
-      document.removeEventListener('keydown', handleKeys);
-    };
-  }, [tableRef, tableRef.current]);
-
-  React.useEffect(() => {
-    if (selectableRowCaptionText) {
-      setTableCaption(
-        <caption>
-          {selectableRowCaptionText}
-          <div className="pf-screen-reader">
-            This table has selectable rows. It can be navigated by row using tab, and each row can be selected using
-            space or enter.
-          </div>
-        </caption>
-      );
-    } else {
-      setTableCaption(
-        <caption className="pf-screen-reader">
-          This table has selectable rows. It can be navigated by row using tab, and each row can be selected using space
-          or enter.
-        </caption>
-      );
-    }
-  }, [selectableRowCaptionText]);
-
-  const ouiaProps = useOUIAProps('Table', ouiaId, ouiaSafe);
-  const grid =
-    stylesGrid.modifiers?.[
-      toCamel(gridBreakPoint || '').replace(/-?2xl/, '_2xl') as 'grid' | 'gridMd' | 'gridLg' | 'gridXl' | 'grid_2xl'
-    ];
-  const breakPointPrefix = `treeView${gridBreakPoint.charAt(0).toUpperCase() + gridBreakPoint.slice(1)}`;
-  const treeGrid =
-    stylesTreeView.modifiers?.[
-      toCamel(breakPointPrefix || '').replace(/-?2xl/, '_2xl') as
-        | 'treeViewGrid'
-        | 'treeViewGridMd'
-        | 'treeViewGridLg'
-        | 'treeViewGridXl'
-        | 'treeViewGrid_2xl'
-    ];
-
-  const handleKeys = (event: KeyboardEvent) => {
-    if (
-      isNested ||
-      !(tableRef && tableRef.current && tableRef.current.classList.contains('pf-m-tree-view')) || // implements roving tab-index to tree tables only
-      (tableRef && tableRef.current !== (event.target as HTMLElement).closest('.pf-c-table:not(.pf-m-nested)'))
-    ) {
-      return;
-    }
-    const activeElement = document.activeElement;
-    const key = event.key;
-    const rows = (Array.from(tableRef.current.querySelectorAll('tbody tr')) as Element[]).filter(
-      el => !el.classList.contains('pf-m-disabled') && !(el as HTMLElement).hidden
-    );
-    if (key === 'Space' || key === 'Enter') {
-      (activeElement as HTMLElement).click();
-      event.preventDefault();
-    }
-
-    const getFocusableElement = (element: Element) =>
-      element.querySelectorAll('button:not(:disabled), input:not(:disabled), a:not(:disabled)')[0];
-
-    handleArrows(
-      event,
-      rows,
-      (element: Element) => element === activeElement.closest('tr'),
-      getFocusableElement,
-      ['button', 'input', 'a'],
-      undefined,
-      false,
-      true,
-      false
-    );
-  };
-
-  const registerSelectableRow = () => {
-    !hasSelectableRows && setHasSelectableRows(true);
-  };
-
-  return (
-    <TableComposableContext.Provider value={{ registerSelectableRow }}>
-      <table
-        aria-label={ariaLabel}
-        role={role}
-        className={css(
-          className,
-          styles.table,
-          isTreeTable ? treeGrid : grid,
-          styles.modifiers[variant],
-          !borders && styles.modifiers.noBorderRows,
-          isStickyHeader && styles.modifiers.stickyHeader,
-          isTreeTable && stylesTreeView.modifiers.treeView,
-          isStriped && styles.modifiers.striped,
-          isExpandable && styles.modifiers.expandable,
-          isNested && 'pf-m-nested'
-        )}
-        ref={tableRef}
-        {...(isTreeTable && { role: 'treegrid' })}
-        {...ouiaProps}
-        {...props}
-      >
-        {hasSelectableRows && tableCaption}
-        {children}
-      </table>
-    </TableComposableContext.Provider>
-  );
-};
-
-export const TableComposable = React.forwardRef((props: TableComposableProps, ref: React.Ref<HTMLTableElement>) => (
-  <TableComposableBase {...props} innerRef={ref as React.MutableRefObject<any>} />
-));
-TableComposable.displayName = 'TableComposable';
diff --git a/packages/react-table/src/components/TableComposable/examples/TableRightStickyColumn.tsx b/packages/react-table/src/components/TableComposable/examples/TableRightStickyColumn.tsx
deleted file mode 100644
index 9676661e42f..00000000000
--- a/packages/react-table/src/components/TableComposable/examples/TableRightStickyColumn.tsx
+++ /dev/null
@@ -1,153 +0,0 @@
-import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
-
-interface Fact {
-  name: string;
-  state: string;
-  detail1: string;
-  detail2: string;
-  detail3: string;
-  detail4: string;
-  detail5: string;
-  detail6: string;
-  detail7: string;
-}
-
-export const ComposableTableRightStickyColumn: React.FunctionComponent = () => {
-  // In real usage, this data would come from some external source like an API via props.
-  const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({
-    name: `Fact ${index + 1}`,
-    state: `State ${index + 1}`,
-    detail1: `Test cell ${index + 1}-3`,
-    detail2: `Test cell ${index + 1}-4`,
-    detail3: `Test cell ${index + 1}-5`,
-    detail4: `Test cell ${index + 1}-6`,
-    detail5: `Test cell ${index + 1}-7`,
-    detail6: `Test cell ${index + 1}-8`,
-    detail7: `Test cell ${index + 1}-9`
-  }));
-
-  const columnNames = {
-    name: 'Fact',
-    state: 'State',
-    header3: 'Header 3',
-    header4: 'Header 4',
-    header5: 'Header 5',
-    header6: 'Header 6',
-    header7: 'Header 7',
-    header8: 'Header 8',
-    header9: 'Header 9'
-  };
-
-  // Index of the currently sorted column
-  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
-  // as the identifier of the sorted column. See the "Compound expandable" example.
-  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
-
-  // Sort direction of the currently sorted column
-  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
-
-  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
-  // This example is trivial since our data objects just contain strings, but if the data was more complex
-  // this would be a place to return simplified string or number versions of each column to sort by.
-  const getSortableRowValues = (fact: Fact): (string | number)[] => {
-    const { name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7 } = fact;
-    return [name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7];
-  };
-
-  // Note that we perform the sort as part of the component's render logic and not in onSort.
-  // We shouldn't store the list of data in state because we don't want to have to sync that with props.
-  let sortedFacts = facts;
-  if (activeSortIndex !== null) {
-    sortedFacts = facts.sort((a, b) => {
-      const aValue = getSortableRowValues(a)[activeSortIndex];
-      const bValue = getSortableRowValues(b)[activeSortIndex];
-      if (aValue === bValue) {
-        return 0;
-      }
-      if (activeSortDirection === 'asc') {
-        return aValue > bValue ? 1 : -1;
-      } else {
-        return bValue > aValue ? 1 : -1;
-      }
-    });
-  }
-
-  const getSortParams = (columnIndex: number): ThProps['sort'] => ({
-    sortBy: {
-      index: activeSortIndex,
-      direction: activeSortDirection
-    },
-    onSort: (_event, index, direction) => {
-      setActiveSortIndex(index);
-      setActiveSortDirection(direction);
-    },
-    columnIndex
-  });
-
-  return (
-    <InnerScrollContainer>
-      <TableComposable aria-label="Sticky column table" gridBreakPoint="">
-        <Thead>
-          <Tr>
-            <Th modifier="truncate" sort={getSortParams(0)}>
-              {columnNames.name}
-            </Th>
-            <Th modifier="truncate" sort={getSortParams(1)}>
-              {columnNames.state}
-            </Th>
-            <Th modifier="truncate">{columnNames.header3}</Th>
-            <Th modifier="truncate">{columnNames.header4}</Th>
-            <Th modifier="truncate">{columnNames.header5}</Th>
-            <Th modifier="truncate">{columnNames.header6}</Th>
-            <Th modifier="truncate">{columnNames.header7}</Th>
-            <Th isStickyColumn hasLeftBorder stickyMinWidth="130px" stickyRightOffset="130px" modifier="truncate">
-              {columnNames.header8}
-            </Th>
-            <Th isStickyColumn stickyMinWidth="130px" modifier="truncate">
-              {columnNames.header9}
-            </Th>
-          </Tr>
-        </Thead>
-        <Tbody>
-          {sortedFacts.map(fact => (
-            <Tr key={fact.name}>
-              <Th modifier="nowrap">{fact.name}</Th>
-              <Td modifier="nowrap" dataLabel={columnNames.state}>
-                {fact.state}
-              </Td>
-              <Td modifier="nowrap" dataLabel={columnNames.header3}>
-                {fact.detail1}
-              </Td>
-              <Td modifier="nowrap" dataLabel={columnNames.header4}>
-                {fact.detail2}
-              </Td>
-              <Td modifier="nowrap" dataLabel={columnNames.header5}>
-                {fact.detail3}
-              </Td>
-              <Td modifier="nowrap" dataLabel={columnNames.header6}>
-                {fact.detail4}
-              </Td>
-              <Td modifier="nowrap" dataLabel={columnNames.header7}>
-                {fact.detail5}
-              </Td>
-              <Td
-                isStickyColumn
-                hasLeftBorder
-                stickyMinWidth="130px"
-                stickyRightOffset="130px"
-                modifier="nowrap"
-                dataLabel={columnNames.header8}
-              >
-                {fact.detail6}
-              </Td>
-              <Td isStickyColumn stickyMinWidth="130px" modifier="nowrap" dataLabel={columnNames.header9}>
-                {fact.detail7}
-              </Td>
-            </Tr>
-          ))}
-        </Tbody>
-      </TableComposable>
-    </InnerScrollContainer>
-  );
-};
diff --git a/packages/react-table/src/components/TableComposable/index.ts b/packages/react-table/src/components/TableComposable/index.ts
deleted file mode 100644
index b5f04464442..00000000000
--- a/packages/react-table/src/components/TableComposable/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-export * from './TableComposable';
-export * from './Thead';
-export * from './Tbody';
-export * from './Tr';
-export * from './Th';
-export * from './Td';
-export * from './Caption';
-export * from './OuterScrollContainer';
-export * from './InnerScrollContainer';
diff --git a/packages/react-table/src/components/index.ts b/packages/react-table/src/components/index.ts
index 676493ae1c1..75193adc339 100644
--- a/packages/react-table/src/components/index.ts
+++ b/packages/react-table/src/components/index.ts
@@ -1,2 +1 @@
 export * from './Table';
-export * from './TableComposable';
diff --git a/packages/react-table/src/components/Table/Body.tsx b/packages/react-table/src/deprecated/components/Table/Body.tsx
similarity index 97%
rename from packages/react-table/src/components/Table/Body.tsx
rename to packages/react-table/src/deprecated/components/Table/Body.tsx
index 660d47cf21b..c9b51c5595f 100644
--- a/packages/react-table/src/components/Table/Body.tsx
+++ b/packages/react-table/src/deprecated/components/Table/Body.tsx
@@ -1,9 +1,8 @@
 import * as React from 'react';
 import { Body as BaseBody } from './base';
-import { RowType, RowKeyType } from './base/types';
-import { IRow, IRowCell, IExtraRowData } from './TableTypes';
+import { RowType, RowKeyType } from '../../../components/Table/base/types';
+import { IRow, IRowCell, IExtraRowData, isRowExpanded } from '../../../components';
 import { TableContext } from './TableContext';
-import { isRowExpanded } from './utils';
 
 export interface IComputedData {
   isInput: boolean;
diff --git a/packages/react-table/src/components/Table/BodyCell.tsx b/packages/react-table/src/deprecated/components/Table/BodyCell.tsx
similarity index 98%
rename from packages/react-table/src/components/Table/BodyCell.tsx
rename to packages/react-table/src/deprecated/components/Table/BodyCell.tsx
index dd27ccdad84..84e2dc0d0fa 100644
--- a/packages/react-table/src/components/Table/BodyCell.tsx
+++ b/packages/react-table/src/deprecated/components/Table/BodyCell.tsx
@@ -3,7 +3,7 @@ import { Tooltip } from '@patternfly/react-core/dist/esm/components/Tooltip';
 import { Bullseye } from '@patternfly/react-core/dist/esm/layouts/Bullseye';
 import { EmptyState } from '@patternfly/react-core/dist/esm/components/EmptyState';
 import { SelectProps } from '@patternfly/react-core/dist/esm/components/Select';
-import { Td } from '../TableComposable/Td';
+import { Td } from '../../../components';
 
 export interface BodyCellProps {
   'data-label'?: string;
diff --git a/packages/react-table/src/components/Table/BodyWrapper.tsx b/packages/react-table/src/deprecated/components/Table/BodyWrapper.tsx
similarity index 86%
rename from packages/react-table/src/components/Table/BodyWrapper.tsx
rename to packages/react-table/src/deprecated/components/Table/BodyWrapper.tsx
index 75333565558..80615c7e9ac 100644
--- a/packages/react-table/src/components/Table/BodyWrapper.tsx
+++ b/packages/react-table/src/deprecated/components/Table/BodyWrapper.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
-import { IRow, IRowData, IExtraData, IHeaderRow } from './TableTypes';
-import { mapOpenedRows } from './utils/headerUtils';
-import { Tbody } from '../TableComposable/Tbody';
+import { IRow, IRowData, IExtraData, IHeaderRow } from '../../../components';
+import { mapOpenedRows } from '../../../components';
+import { Tbody } from '../../../components';
 
 export interface BodyWrapperProps {
   children?: React.ReactNode;
diff --git a/packages/react-table/src/components/Table/Header.tsx b/packages/react-table/src/deprecated/components/Table/Header.tsx
similarity index 88%
rename from packages/react-table/src/components/Table/Header.tsx
rename to packages/react-table/src/deprecated/components/Table/Header.tsx
index 90751ca148b..74d3327ae88 100644
--- a/packages/react-table/src/components/Table/Header.tsx
+++ b/packages/react-table/src/deprecated/components/Table/Header.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react';
 import { Header } from './base';
-import { IHeaderRow } from './TableTypes';
+import { IHeaderRow } from '../../../components';
 import { TableContext } from './TableContext';
-import { ColumnsType } from './base/types';
+import { ColumnsType } from '../../../components/Table/base/types';
 
 interface ContextHeaderProps {
   className?: string;
diff --git a/packages/react-table/src/components/Table/HeaderCell.tsx b/packages/react-table/src/deprecated/components/Table/HeaderCell.tsx
similarity index 95%
rename from packages/react-table/src/components/Table/HeaderCell.tsx
rename to packages/react-table/src/deprecated/components/Table/HeaderCell.tsx
index fc6c77d6bec..1bc946f35a2 100644
--- a/packages/react-table/src/components/Table/HeaderCell.tsx
+++ b/packages/react-table/src/deprecated/components/Table/HeaderCell.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Th } from '../TableComposable/Th';
+import { Th } from '../../../components';
 
 export interface HeaderCellProps {
   'data-label'?: string;
diff --git a/packages/react-table/src/deprecated/components/Table/Table.tsx b/packages/react-table/src/deprecated/components/Table/Table.tsx
new file mode 100644
index 00000000000..b783f88cd9a
--- /dev/null
+++ b/packages/react-table/src/deprecated/components/Table/Table.tsx
@@ -0,0 +1,299 @@
+import * as React from 'react';
+import { OUIAProps, getDefaultOUIAId } from '@patternfly/react-core';
+import { DropdownDirection, DropdownPosition } from '@patternfly/react-core/dist/esm/deprecated/components';
+import inlineStyles from '@patternfly/react-styles/css/components/InlineEdit/inline-edit';
+import { css } from '@patternfly/react-styles';
+import { Provider } from '../../../components/Table/base/provider';
+import { BodyCell } from './BodyCell';
+import { HeaderCell } from './HeaderCell';
+import { RowWrapper, RowWrapperProps } from '../../../components';
+import { BodyWrapper } from './BodyWrapper';
+import { calculateColumns, RowSelectVariant } from '../../../components';
+import { TableContext } from './TableContext';
+import {
+  ISortBy,
+  OnCollapse,
+  OnExpand,
+  OnSelect,
+  OnRowEdit,
+  OnSort,
+  IActions,
+  IActionsResolver,
+  IAreActionsDisabled,
+  IRow,
+  ICell,
+  TableVariant,
+  TableGridBreakpoint,
+  IHeaderRow,
+  OnFavorite,
+  TreeRowWrapper,
+  CustomActionsToggleProps } from '../../../components';
+
+export interface TableProps extends OUIAProps {
+  /** Adds an accessible name for the Table */
+  'aria-label'?: string;
+  /** Content rendered inside the Table */
+  children?: React.ReactNode;
+  /** Additional classes added to the Table  */
+  className?: string;
+  /** Style variant for the Table  */
+  variant?: 'compact';
+  /**
+   * Render borders
+   * Borders can only currently be disabled if the variant is set to 'compact'
+   * https://github.com/patternfly/patternfly/issues/3650
+   */
+  borders?: boolean;
+  /** Specifies the grid breakpoints  */
+  gridBreakPoint?: '' | 'grid' | 'grid-md' | 'grid-lg' | 'grid-xl' | 'grid-2xl';
+  /** Specifies the initial sorting pattern for the table - asc/desc and the index of the column to sort by */
+  sortBy?: ISortBy;
+  /** Function triggered when an expandable content is collapsed. When this is used, one expandable toggle button will be positioned in the first cell of a non-expandable row, preceding an expandable row */
+  onCollapse?: OnCollapse;
+  /** Function triggered when a compound expandable item is clicked */
+  onExpand?: OnExpand;
+  /** Function triggered when a row's checkbox is selected. When this is used, one checkbox/radio button will be positioned in the first or second cell of a non-expandable row */
+  onSelect?: OnSelect;
+  /** Enables or disables the ability to select all - this is mutually exclusive with radio button select variant */
+  canSelectAll?: boolean;
+  /** Enables or disables the ability to expand all */
+  canCollapseAll?: boolean;
+  /** Flag indicating the select all checkbox is disabled */
+  isHeaderSelectDisabled?: boolean;
+  /** Specifies the type of the select element variant - can be one of checkbox or radio button */
+  selectVariant?: 'checkbox' | 'radio';
+  /** An optional alternative aria label for the expand collapse all table header */
+  collapseAllAriaLabel?: string;
+  /** Function triggered when a row's inline edit is activated. Adds a column for inline edit when present. */
+  onRowEdit?: OnRowEdit;
+  /** Function triggered when sort icon is clicked */
+  onSort?: OnSort;
+  /** Actions to add to the Table */
+  actions?: IActions;
+  /** Resolver for the given action  */
+  actionResolver?: IActionsResolver;
+  /** Specifies if the Kebab for actions is disabled */
+  areActionsDisabled?: IAreActionsDisabled;
+  /** Component to place in the header */
+  header?: React.ReactNode;
+  /** Component used for caption*/
+  caption?: React.ReactNode;
+  /** label for row */
+  rowLabeledBy?: string;
+  /** ID for expand */
+  expandId?: string;
+  /** ID for content */
+  contentId?: string;
+  /** The desired position to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property */
+  dropdownPosition?: 'right' | 'left';
+  /** The desired direction to show the dropdown when clicking on the actions Kebab. Can only be used together with `actions` property */
+  dropdownDirection?: 'up' | 'down';
+  /** The container to append the dropdown menu to. Defaults to 'inline'.
+   * If your menu is being cut off you can append it to an element higher up the DOM tree.
+   * Some examples:
+   * actionsMenuAppendTo="parent"
+   * actionsMenuAppendTo={() => document.body}
+   * actionsMenuAppendTo={document.getElementById('target')}
+   */
+  actionsMenuAppendTo?: HTMLElement | (() => HTMLElement) | 'inline' | 'parent';
+  /** The toggle of the actions menu dropdown. A KebabToggle or DropdownToggle component */
+  actionsToggle?: (props: CustomActionsToggleProps) => React.ReactNode;
+  /** Row data */
+  rows: (IRow | string[])[];
+  /** Cell/column data */
+  cells: (ICell | string)[];
+  /** Wrapper for the body  */
+  bodyWrapper?: Function;
+  /** Wrapper for the row */
+  rowWrapper?: (props: RowWrapperProps) => JSX.Element;
+  /** A valid WAI-ARIA role to be applied to the table element */
+  role?: string;
+  /** If set to true, the table header sticks to the top of its container */
+  isStickyHeader?: boolean;
+  /**
+   * Enables favorites column
+   * Callback triggered when a row is favorited/unfavorited
+   */
+  onFavorite?: OnFavorite;
+  /** Along with the onSort prop, enables favorites sorting, defaults to true */
+  canSortFavorites?: boolean;
+  /** Flag indicating table is a tree table */
+  isTreeTable?: boolean;
+  /** Flag indicating this table is nested within another table */
+  isNested?: boolean;
+  /** Flag indicating this table is striped */
+  isStriped?: boolean;
+  /** Flag indicating this table contains expandable rows to maintain proper striping */
+  isExpandable?: boolean;
+  /** Value to overwrite the randomly generated data-ouia-component-id.*/
+  ouiaId?: number | string;
+  /** Set the value of data-ouia-safe. Only set to true when the component is in a static state, i.e. no animations are occurring. At all other times, this value must be false. */
+  ouiaSafe?: boolean;
+}
+
+export class Table extends React.Component<TableProps, {}> {
+  static displayName = 'Table';
+  static hasWarnBeta = false;
+  static defaultProps: Partial<TableProps> = {
+    children: null as React.ReactNode,
+    className: '',
+    variant: null as TableVariant,
+    borders: true,
+    rowLabeledBy: 'simple-node',
+    expandId: 'expandable-toggle',
+    contentId: 'expanded-content',
+    dropdownPosition: DropdownPosition.right,
+    dropdownDirection: DropdownDirection.down,
+    actionsMenuAppendTo: 'inline',
+    header: undefined as React.ReactNode,
+    caption: undefined as React.ReactNode,
+    'aria-label': undefined as string,
+    gridBreakPoint: TableGridBreakpoint.gridMd,
+    role: 'grid',
+    canSelectAll: true,
+    canCollapseAll: false,
+    isHeaderSelectDisabled: false,
+    selectVariant: 'checkbox',
+    collapseAllAriaLabel: '',
+    ouiaSafe: true,
+    isStickyHeader: false,
+    canSortFavorites: true,
+    isTreeTable: false,
+    isNested: false
+  };
+  state = {
+    ouiaStateId: getDefaultOUIAId(Table.displayName)
+  };
+
+  isSelected = (row: IRow) => row.selected === true;
+
+  areAllRowsSelected = (rows: IRow[]) => {
+    if (rows === undefined || rows.length === 0) {
+      return false;
+    }
+    return rows.every(
+      (row) => this.isSelected(row) || row.disableSelection || (row.hasOwnProperty('parent') && !row.showSelect)
+    );
+  };
+
+  areAllExpanded = (rows: IRow[]) => {
+    if (rows === undefined || rows.length === 0) {
+      return false;
+    }
+    return rows.every((row) => row.isOpen === undefined || row.isOpen);
+  };
+
+  render() {
+    const {
+      'aria-label': ariaLabel,
+      caption,
+      header,
+      onSort,
+      onSelect,
+      canSelectAll,
+      canCollapseAll,
+      isHeaderSelectDisabled,
+      selectVariant,
+      collapseAllAriaLabel,
+      sortBy,
+      children,
+      actions,
+      actionResolver,
+      areActionsDisabled,
+      onCollapse,
+      onExpand,
+      onRowEdit,
+      rowLabeledBy,
+      dropdownPosition,
+      dropdownDirection,
+      actionsMenuAppendTo: menuAppendTo,
+      actionsToggle,
+      contentId,
+      expandId,
+      variant,
+      rows,
+      cells,
+      bodyWrapper,
+      rowWrapper,
+      role,
+      borders,
+      onFavorite,
+      canSortFavorites,
+      ...props
+    } = this.props;
+
+    if (!ariaLabel && !caption && !header && role !== 'presentation') {
+      // eslint-disable-next-line no-console
+      console.error('Table: Specify at least one of: header, caption, aria-label');
+    }
+
+    const headerData = calculateColumns(cells, {
+      sortBy,
+      onSort,
+      onSelect,
+      canSelectAll: selectVariant === RowSelectVariant.radio ? false : canSelectAll,
+      canCollapseAll,
+      isHeaderSelectDisabled,
+      selectVariant,
+      collapseAllAriaLabel,
+      allRowsSelected: onSelect ? this.areAllRowsSelected(rows as IRow[]) : false,
+      allRowsExpanded: onCollapse ? this.areAllExpanded(rows as IRow[]) : false,
+      actions,
+      actionResolver,
+      areActionsDisabled,
+      onCollapse,
+      onRowEdit,
+      onExpand,
+      rowLabeledBy,
+      expandId,
+      contentId,
+      dropdownPosition,
+      dropdownDirection,
+      menuAppendTo,
+      actionsToggle,
+      onFavorite,
+      canSortFavorites,
+      // order of columns: Collapsible | Selectable | Favoritable
+      firstUserColumnIndex: [onCollapse, onSelect, onFavorite].filter((callback) => callback).length
+    });
+
+    const table = (
+      <TableContext.Provider
+        value={{
+          headerData,
+          headerRows: null as IHeaderRow[],
+          rows
+        }}
+      >
+        {header}
+        <Provider
+          {...props}
+          aria-label={ariaLabel}
+          renderers={{
+            body: {
+              wrapper: bodyWrapper || BodyWrapper,
+              row: rowWrapper || (this.props.isTreeTable ? TreeRowWrapper : RowWrapper),
+              cell: BodyCell
+            },
+            header: {
+              cell: HeaderCell
+            }
+          }}
+          columns={headerData}
+          role={role}
+          variant={variant}
+          borders={borders}
+        >
+          {caption && <caption>{caption}</caption>}
+          {children}
+        </Provider>
+      </TableContext.Provider>
+    );
+
+    if (onRowEdit) {
+      return <form className={css(inlineStyles.inlineEdit)}>{table}</form>;
+    }
+
+    return table;
+  }
+}
diff --git a/packages/react-table/src/components/Table/TableContext.ts b/packages/react-table/src/deprecated/components/Table/TableContext.ts
similarity index 60%
rename from packages/react-table/src/components/Table/TableContext.ts
rename to packages/react-table/src/deprecated/components/Table/TableContext.ts
index 58486b6ce62..4758ed0b102 100644
--- a/packages/react-table/src/components/Table/TableContext.ts
+++ b/packages/react-table/src/deprecated/components/Table/TableContext.ts
@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { IHeaderRow, IRow } from './TableTypes';
-import { ColumnsType } from './base';
+import { IHeaderRow, IRow } from '../../../components';
+import { ColumnsType } from '../../../components/Table/base/types';
 
 export const TableContext = React.createContext({
   headerData: null as ColumnsType,
diff --git a/packages/react-table/src/components/Table/__tests__/Table.test.tsx b/packages/react-table/src/deprecated/components/Table/__tests__/Table.test.tsx
similarity index 98%
rename from packages/react-table/src/components/Table/__tests__/Table.test.tsx
rename to packages/react-table/src/deprecated/components/Table/__tests__/Table.test.tsx
index d229193ed71..4d8ca16c325 100644
--- a/packages/react-table/src/components/Table/__tests__/Table.test.tsx
+++ b/packages/react-table/src/deprecated/components/Table/__tests__/Table.test.tsx
@@ -3,9 +3,6 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 
 import {
-  Table,
-  TableHeader,
-  TableBody,
   TableGridBreakpoint,
   TableVariant,
   RowSelectVariant,
@@ -26,9 +23,14 @@ import {
   breakWord,
   fitContent,
   ICell
+} from '../../../../components';
+import {
+  Table,
+  TableHeader,
+  TableBody
 } from '../index';
-import { rows, columns, editableRows, editableColumns, actions } from '../../../test-helpers/data-sets';
-import { ColumnsType } from '../base';
+import { rows, columns, editableRows, editableColumns, actions } from '../../../../test-helpers/data-sets';
+import { ColumnsType } from '../../../../components/Table/base/types';
 
 describe('Table', () => {
   describe('simple', () => {
@@ -51,7 +53,7 @@ describe('Table', () => {
       );
       const table = screen.getByLabelText('Table with ouiaSafe');
       expect(table.getAttribute('data-ouia-safe')).toEqual("false");
-      
+
     });
 
     test('header', () => {
diff --git a/packages/react-table/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap b/packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
similarity index 100%
rename from packages/react-table/src/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
rename to packages/react-table/src/deprecated/components/Table/__tests__/__snapshots__/Table.test.tsx.snap
diff --git a/packages/react-table/src/components/Table/base/body-row.tsx b/packages/react-table/src/deprecated/components/Table/base/body-row.tsx
similarity index 85%
rename from packages/react-table/src/components/Table/base/body-row.tsx
rename to packages/react-table/src/deprecated/components/Table/base/body-row.tsx
index ebfd5a691f2..7d8f81c5c71 100644
--- a/packages/react-table/src/components/Table/base/body-row.tsx
+++ b/packages/react-table/src/deprecated/components/Table/base/body-row.tsx
@@ -6,11 +6,18 @@
  */
 import isEqual from 'lodash/isEqual';
 import * as React from 'react';
-import { columnsAreEqual } from './columns-are-equal';
-import { evaluateFormatters } from './evaluate-formatters';
-import { evaluateTransforms } from './evaluate-transforms';
-import { mergeProps } from './merge-props';
-import { createElementType, formatterValueType, ColumnType, ColumnsType, RowType, RendererType } from './types';
+import {
+  createElementType,
+  formatterValueType,
+  ColumnType,
+  ColumnsType,
+  RowType,
+  RendererType
+} from '../../../../components/Table/base/types';
+import { columnsAreEqual } from '../../../../components/Table/base/columns-are-equal';
+import { evaluateFormatters } from '../../../../components/Table/base/evaluate-formatters';
+import { evaluateTransforms } from '../../../../components/Table/base/evaluate-transforms';
+import { mergeProps } from '../../../../components/Table/base/merge-props';
 
 export interface BodyRowProps {
   columns: ColumnsType;
diff --git a/packages/react-table/src/components/Table/base/body.tsx b/packages/react-table/src/deprecated/components/Table/base/body.tsx
similarity index 94%
rename from packages/react-table/src/components/Table/base/body.tsx
rename to packages/react-table/src/deprecated/components/Table/base/body.tsx
index 4637854d5eb..98f08cfccf7 100644
--- a/packages/react-table/src/components/Table/base/body.tsx
+++ b/packages/react-table/src/deprecated/components/Table/base/body.tsx
@@ -6,10 +6,10 @@
  */
 import * as React from 'react';
 import isEqual from 'lodash/isEqual';
-import { RowsType, RowType, RowKeyType, RenderersTypes, createElementType, ColumnsType } from './types';
+import { RowsType, RowType, RowKeyType, RenderersTypes, createElementType, ColumnsType } from '../../../../components/Table/base/types';
+import { ProviderContext } from '../../../../components/Table/base/provider';
 import { resolveRowKey } from './resolve-row-key';
 import { BodyRow } from './body-row';
-import { ProviderContext } from './provider';
 
 export interface BodyProps {
   onRow?: Function;
diff --git a/packages/react-table/src/components/Table/base/header-row.tsx b/packages/react-table/src/deprecated/components/Table/base/header-row.tsx
similarity index 88%
rename from packages/react-table/src/components/Table/base/header-row.tsx
rename to packages/react-table/src/deprecated/components/Table/base/header-row.tsx
index bde3e5544ff..7fc3a9d38cb 100644
--- a/packages/react-table/src/components/Table/base/header-row.tsx
+++ b/packages/react-table/src/deprecated/components/Table/base/header-row.tsx
@@ -5,11 +5,17 @@
  * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
  */
 import * as React from 'react';
-import { evaluateFormatters } from './evaluate-formatters';
-import { evaluateTransforms } from './evaluate-transforms';
-import { mergeProps } from './merge-props';
-import { createElementType, ColumnType, HeaderType, RowsType, RendererType } from './types';
-import { HeaderCellInfoWrapper } from '../HeaderCellInfoWrapper';
+import {
+  createElementType,
+  ColumnType,
+  HeaderType,
+  RowsType,
+  RendererType
+} from '../../../../components/Table/base/types';
+import { evaluateFormatters } from '../../../../components/Table/base/evaluate-formatters';
+import { evaluateTransforms } from '../../../../components/Table/base/evaluate-transforms';
+import { mergeProps } from '../../../../components/Table/base/merge-props';
+import { HeaderCellInfoWrapper } from '../../../../components';
 
 export interface HeaderRowProps {
   rowData: RowsType;
diff --git a/packages/react-table/src/components/Table/base/header.tsx b/packages/react-table/src/deprecated/components/Table/base/header.tsx
similarity index 87%
rename from packages/react-table/src/components/Table/base/header.tsx
rename to packages/react-table/src/deprecated/components/Table/base/header.tsx
index 740aad16dae..1e3ac95fd57 100644
--- a/packages/react-table/src/components/Table/base/header.tsx
+++ b/packages/react-table/src/deprecated/components/Table/base/header.tsx
@@ -5,8 +5,14 @@
  * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
  */
 import * as React from 'react';
-import { createElementType, RowsType, ColumnsType, RenderersTypes } from './types';
-import { ProviderContext } from './provider';
+import {
+  createElementType,
+  RowsType,
+  ColumnsType,
+  RenderersTypes
+} from '../../../../components/Table/base/types';
+import { ProviderContext } from '../../../../components/Table/base/provider';
+
 import { HeaderRow } from './header-row';
 
 export interface HeaderProps {
diff --git a/packages/react-table/src/deprecated/components/Table/base/index.ts b/packages/react-table/src/deprecated/components/Table/base/index.ts
new file mode 100644
index 00000000000..83c196e535a
--- /dev/null
+++ b/packages/react-table/src/deprecated/components/Table/base/index.ts
@@ -0,0 +1,4 @@
+export * from './resolve-row-key';
+export * from './body';
+export * from './body-row';
+export * from './header';
diff --git a/packages/react-table/src/components/Table/base/resolve-row-key.ts b/packages/react-table/src/deprecated/components/Table/base/resolve-row-key.ts
similarity index 92%
rename from packages/react-table/src/components/Table/base/resolve-row-key.ts
rename to packages/react-table/src/deprecated/components/Table/base/resolve-row-key.ts
index 5f3318d6826..fdb4cc46ea8 100644
--- a/packages/react-table/src/components/Table/base/resolve-row-key.ts
+++ b/packages/react-table/src/deprecated/components/Table/base/resolve-row-key.ts
@@ -5,7 +5,7 @@
  * https://github.com/reactabular/reactabular/tree/v8.14.0/packages/reactabular-table/src
  */
 
-import { RowType, RowKeyType } from './types';
+import { RowType, RowKeyType } from '../../../../components/Table/base/types';
 
 /**
  * @param {{rowData: RowType, rowIndex: number, rowKey: RowKeyType}} rowData - row data
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableActions.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableActions.tsx
index e14b961bf84..6e9ba4edff9 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableActions.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableActions.tsx
@@ -15,14 +15,16 @@ import {
   CustomActionsToggleProps,
   fitContent,
   headerCol,
-  TableProps,
   IActions,
   IActionsResolver,
+  TableText
+} from '@patternfly/react-table';
+import {
   Table,
   TableBody,
   TableHeader,
-  TableText
-} from '@patternfly/react-table';
+  TableProps
+} from '@patternfly/react-table/deprecated';
 
 interface Repository {
   name: string;
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableBasic.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableBasic.tsx
index bce0b65382c..cabc541bd87 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableBasic.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableBasic.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { ToggleGroup, ToggleGroupItem, ToggleGroupItemProps } from '@patternfly/react-core';
 interface Repository {
   name: string;
@@ -37,7 +37,7 @@ export const LegacyTableBasic: React.FunctionComponent = () => {
     }
   ];
 
-  // This state is just for the ToggleGroup in this example and isn't necessary for TableComposable usage.
+  // This state is just for the ToggleGroup in this example and isn't necessary for table usage.
   const [exampleChoice, setExampleChoice] = React.useState<ExampleType>('default');
   const onExampleTypeChange: ToggleGroupItemProps['onChange'] = (_isSelected, event) => {
     const id = event.currentTarget.id;
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCellWidth.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCellWidth.tsx
index dff74558ab7..f6f78c1360c 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCellWidth.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCellWidth.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, classNames, cellWidth, Visibility, TableProps } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
+import { classNames, cellWidth, Visibility } from '@patternfly/react-table';
 
 interface Repository {
   name: string;
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCompoundExpandable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCompoundExpandable.tsx
index 2d71eb439ba..6cc847b95b3 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCompoundExpandable.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableCompoundExpandable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, compoundExpand, TableProps } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
+import { compoundExpand } from '@patternfly/react-table';
 
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableControllingText.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableControllingText.tsx
index 01502e37684..b1eded86df4 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableControllingText.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableControllingText.tsx
@@ -1,16 +1,13 @@
 import React from 'react';
 import {
-  Table,
-  TableHeader,
-  TableBody,
   cellWidth,
   truncate,
   breakWord,
   wrappable,
   fitContent,
-  nowrap,
-  TableProps
+  nowrap
 } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 // This example has been simplified to focus on the text modifier props. In real usage,
 // you may want to derive your rows from typed underlying data and minimal state. See other examples.
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx
index 9a6197cb30c..b15b7f8a765 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableEmptyState.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import {
   Bullseye,
   EmptyState,
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableExpandable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableExpandable.tsx
index 01d1c198730..5c4b6334234 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableExpandable.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableExpandable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Table, TableBody, TableHeader, TableVariant, TableProps, expandable, IRowCell } from '@patternfly/react-table';
+import { TableVariant, expandable, IRowCell } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Checkbox } from '@patternfly/react-core';
 
 interface Repository {
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableFavoritable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableFavoritable.tsx
index 41415cb88f2..854cab28089 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableFavoritable.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableFavoritable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, sortable, TableProps } from '@patternfly/react-table';
+import { sortable } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Checkbox } from '@patternfly/react-core';
 
 interface Repository {
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableHoverable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableHoverable.tsx
index 22470c8e054..77a43478371 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableHoverable.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableHoverable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, info, textCenter, TableProps, ICell } from '@patternfly/react-table';
+import { info, textCenter, ICell } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import styles from '@patternfly/react-styles/css/components/Table/table';
 
 interface Repository {
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx
index 0ec7de51239..b43ca282415 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableMisc.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { css } from '@patternfly/react-styles';
 
 interface Repository {
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectable.tsx
index e4a0e1517a6..e3325a9283b 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectable.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Table, TableBody, TableHeader, headerCol, TableProps } from '@patternfly/react-table';
+import { headerCol } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Checkbox } from '@patternfly/react-core';
 
 interface Repository {
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectableRadio.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectableRadio.tsx
index 52dbe9ed97d..b47014b03b0 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectableRadio.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSelectableRadio.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, headerCol, TableProps } from '@patternfly/react-table';
+import { headerCol } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 interface Repository {
   name: string;
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortable.tsx
index c2f0f73b714..efb624eaf86 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortable.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortable.tsx
@@ -1,14 +1,6 @@
 import React from 'react';
-import {
-  TableProps,
-  sortable,
-  info,
-  cellWidth,
-  wrappable,
-  Table,
-  TableBody,
-  TableHeader
-} from '@patternfly/react-table';
+import { sortable, info, cellWidth, wrappable } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 interface Repository {
   name: string;
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
index e058a29545f..85dcb7fb80d 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableSortableCustom.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { TableProps, sortable, info, Table, TableBody, TableHeader } from '@patternfly/react-table';
+import { sortable, info } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import {
   Toolbar,
   ToolbarContent,
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStriped.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStriped.tsx
index 67e90679845..11d034d7601 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStriped.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStriped.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 interface Repository {
   name: string;
   branches: string;
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedCustomTr.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedCustomTr.tsx
index c40cc3a5b74..c9dd1396ecb 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedCustomTr.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedCustomTr.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { css } from '@patternfly/react-styles';
 
 interface Repository {
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedExpandable.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedExpandable.tsx
index c27f2446995..cb9953abccf 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedExpandable.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableStripedExpandable.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Table, TableBody, TableHeader, TableVariant, TableProps, expandable, IRowCell } from '@patternfly/react-table';
+import { TableVariant, expandable, IRowCell } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 import { Checkbox } from '@patternfly/react-core';
 
 interface Repository {
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTextModifiers.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTextModifiers.tsx
index 7861133621b..449879cb1bc 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTextModifiers.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTextModifiers.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { Table, TableHeader, TableBody, cellWidth, TableText, TableProps } from '@patternfly/react-table';
+import { cellWidth, TableText } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody, TableProps } from '@patternfly/react-table/deprecated';
 
 // This example has been simplified to focus on the text modifier props. In real usage,
 // you may want to derive your rows from typed underlying data and minimal state. See other examples.
diff --git a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTree.tsx b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTree.tsx
index d04441af6d6..547aaa9f951 100644
--- a/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTree.tsx
+++ b/packages/react-table/src/deprecated/components/Table/examples/LegacyTableTree.tsx
@@ -1,14 +1,6 @@
 import React from 'react';
-import {
-  Table,
-  TableHeader,
-  TableBody,
-  treeRow,
-  IRow,
-  OnTreeRowCollapse,
-  OnCheckChange,
-  OnToggleRowDetails
-} from '@patternfly/react-table';
+import { treeRow, IRow, OnTreeRowCollapse, OnCheckChange, OnToggleRowDetails } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 import LeafIcon from '@patternfly/react-icons/dist/esm/icons/leaf-icon';
 import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon';
 import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon';
@@ -110,9 +102,9 @@ export const LegacyTableTree: React.FunctionComponent = () => {
   // We index the tree nodes in the order of the table rows, for looking up by rowIndex
   const flattenedNodes: RepositoriesTreeNode[] = [];
 
-  /** 
+  /**
     Recursive function which flattens the data into an array of flattened IRow objects
-    params: 
+    params:
       - nodes - array of a single level of tree nodes
       - level - number representing how deeply nested the current row is
       - posinset - position of the row relative to this row's siblings
diff --git a/packages/react-table/src/deprecated/components/Table/index.ts b/packages/react-table/src/deprecated/components/Table/index.ts
index 8a72944c0e4..d9d1cf477de 100644
--- a/packages/react-table/src/deprecated/components/Table/index.ts
+++ b/packages/react-table/src/deprecated/components/Table/index.ts
@@ -1 +1,3 @@
-export * from './';
\ No newline at end of file
+export * from './Table';
+export * from './Body';
+export * from './Header';
diff --git a/packages/react-table/src/deprecated/components/index.ts b/packages/react-table/src/deprecated/components/index.ts
index b13bb4eb87d..75193adc339 100644
--- a/packages/react-table/src/deprecated/components/index.ts
+++ b/packages/react-table/src/deprecated/components/index.ts
@@ -1 +1 @@
-export * from './';
+export * from './Table';
diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 498b669b9a0..0059b0237d2 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -32,6 +32,8 @@ DropdownToggle,
 DropdownToggleCheckbox,
 KebabToggle
 } from '@patternfly/react-core/deprecated';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
+
 import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
@@ -80,7 +82,7 @@ import {
   DropdownToggle,
   DropdownToggleCheckbox
 } from '@patternfly/react-core/deprecated';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 class BulkSelectTableDemo extends React.Component {
@@ -284,7 +286,7 @@ class BulkSelectTableDemo extends React.Component {
         <PageSection isWidthLimited>
           {this.renderToolbar()}
           {!loading && (
-            <Table
+            <TableDeprecated
               aria-label="Bulk Select Table Demo"
               cells={['Title', 'Body']}
               rows={rows}
@@ -293,7 +295,7 @@ class BulkSelectTableDemo extends React.Component {
             >
               <TableHeader />
               <TableBody />
-            </Table>
+            </TableDeprecated>
           )}
 
           {loading && (
@@ -363,7 +365,7 @@ import {
   Select,
   SelectVariant
 } from '@patternfly/react-core';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 import CodeIcon from '@patternfly/react-icons/dist/esm/icons/code-icon';
 import CodeBranchIcon from '@patternfly/react-icons/dist/esm/icons/code-branch-icon';
 import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon';
@@ -1058,7 +1060,7 @@ class ColumnManagementAction extends React.Component {
 
     return (
       <React.Fragment>
-        <Table
+        <TableDeprecated
           gridBreakPoint="grid-xl"
           header={
             <React.Fragment>
@@ -1075,7 +1077,7 @@ class ColumnManagementAction extends React.Component {
         >
           <TableHeader />
           <TableBody />
-        </Table>
+        </TableDeprecated>
         <Pagination
           isCompact
           id="page-layout-table-draggable-column-management-action-toolbar-bottom"
@@ -1125,7 +1127,7 @@ import {
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 
 class FilterTableDemo extends React.Component {
   constructor(props) {
@@ -1464,10 +1466,10 @@ class FilterTableDemo extends React.Component {
     return (
       <React.Fragment>
         {this.renderToolbar()}
-        <Table cells={columns} rows={tableRows} onSelect={onSelect} aria-label="Filterable Table Demo">
+        <TableDeprecated cells={columns} rows={tableRows} onSelect={onSelect} aria-label="Filterable Table Demo">
           <TableHeader />
           <TableBody />
-        </Table>
+        </TableDeprecated>
       </React.Fragment>
     );
   }
@@ -1494,7 +1496,7 @@ To demonstrate this, navigate to the last page of data below using the `>>` navi
 ```js
 import React from 'react';
 import { Pagination } from '@patternfly/react-core';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 
 class ComplexPaginationTableDemo extends React.Component {
   constructor(props) {
@@ -1568,10 +1570,10 @@ class ComplexPaginationTableDemo extends React.Component {
     return (
       <React.Fragment>
         {this.renderPagination()}
-        <Table aria-label="Automated pagination table" cells={this.columns} rows={rows}>
+        <TableDeprecated aria-label="Automated pagination table" cells={this.columns} rows={rows}>
           <TableHeader />
           <TableBody />
-        </Table>
+        </TableDeprecated>
       </React.Fragment>
     );
   }
@@ -1589,7 +1591,7 @@ class ComplexPaginationTableDemo extends React.Component {
 ```js isFullscreen
 import React from 'react';
 import { Label, PageSection } from '@patternfly/react-core';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 import { rows } from '../examples/Data.jsx';
 
 class StickyHeaderTableDemo extends React.Component {
@@ -1611,7 +1613,7 @@ class StickyHeaderTableDemo extends React.Component {
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
           <Card component="div">
-            <Table
+            <TableDeprecated
               cells={[
                 { title: 'Servers', transforms: [cellWidth(15)] },
                 { title: 'Threads', transforms: [cellWidth(10)] },
@@ -1643,7 +1645,7 @@ class StickyHeaderTableDemo extends React.Component {
             >
               <TableHeader />
               <TableBody />
-            </Table>
+            </TableDeprecated>
           </Card>
         </PageSection>
       </DashboardWrapper>
@@ -1685,7 +1687,7 @@ import {
   Title
 } from '@patternfly/react-core';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 class EmptyStateDemo extends React.Component {
@@ -1730,10 +1732,10 @@ class EmptyStateDemo extends React.Component {
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
           <Card component="div">
-            <Table cells={columns} rows={rows} aria-label="Empty state demo">
+            <TableDeprecated cells={columns} rows={rows} aria-label="Empty state demo">
               <TableHeader />
               <TableBody />
-            </Table>
+            </TableDeprecated>
           </Card>
         </PageSection>
       </DashboardWrapper>
@@ -1747,7 +1749,8 @@ class EmptyStateDemo extends React.Component {
 ```js isFullscreen
 import React from 'react';
 import { Bullseye, Card, EmptyState, EmptyStateIcon, Spinner, Title } from '@patternfly/react-core';
-import { PageSection, Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { PageSection } from '@patternfly/react-table';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
 class LoadingStateDemo extends React.Component {
@@ -1781,10 +1784,10 @@ class LoadingStateDemo extends React.Component {
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
           <Card component="div">
-            <Table cells={columns} rows={rows} aria-label="Loading table demo">
+            <TableDeprecated cells={columns} rows={rows} aria-label="Loading table demo">
               <TableHeader />
               <TableBody />
-            </Table>
+            </TableDeprecated>
           </Card>
         </PageSection>
       </DashboardWrapper>
@@ -1807,7 +1810,7 @@ import {
   PageSection,
   Title
 } from '@patternfly/react-core';
-import { Table, TableHeader, TableBody } from '@patternfly/react-table';
+import { Table as TableDeprecated, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
@@ -1847,10 +1850,10 @@ class ErrorStateDemo extends React.Component {
       <DashboardWrapper hasPageTemplateTitle>
         <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
           <Card component="div">
-            <Table cells={columns} rows={rows} aria-label="Error table demo">
+            <TableDeprecated cells={columns} rows={rows} aria-label="Error table demo">
               <TableHeader />
               <TableBody />
-            </Table>
+            </TableDeprecated>
           </Card>
         </PageSection>
       </DashboardWrapper>
diff --git a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx
index fbf45e3d23b..fbf676c0903 100644
--- a/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/ColumnManagement.jsx
@@ -24,6 +24,7 @@ import {
   Select,
   SelectVariant
 } from '@patternfly/react-core';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SortAmountDownIcon from '@patternfly/react-icons/dist/esm/icons/sort-amount-down-icon';
 import { rows, columns } from '../../examples/Data.jsx';
@@ -439,7 +440,7 @@ export const ColumnManagementAction = () => {
         <PageSection isFilled>
           <Card>
             {toolbarItems}
-            <TableComposable variant="compact" aria-label="Column Management Table">
+            <Table variant="compact" aria-label="Column Management Table">
               <Thead>
                 <Tr>
                   {managedColumns.map((column, columnIndex) => (
@@ -475,7 +476,7 @@ export const ColumnManagementAction = () => {
                   </Tr>
                 ))}
               </Tbody>
-            </TableComposable>
+            </Table>
             {renderPagination(PaginationVariant.bottom)}
             {renderModal()}
           </Card>
diff --git a/packages/react-table/src/docs/demos/table-demos/Compact.jsx b/packages/react-table/src/docs/demos/table-demos/Compact.jsx
index 2959dd8c507..5e9217ff5b9 100644
--- a/packages/react-table/src/docs/demos/table-demos/Compact.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/Compact.jsx
@@ -12,7 +12,7 @@ import {
   SelectOption,
   PageSection
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
@@ -101,7 +101,7 @@ export const CompactTable = () => {
         <PageSection isFilled>
           <Card>
             {tableToolbar}
-            <TableComposable variant="compact" aria-label="Compact Table">
+            <Table variant="compact" aria-label="Compact Table">
               <Thead>
                 <Tr>
                   <Th key={0}>{columns[0]}</Th>
@@ -136,7 +136,7 @@ export const CompactTable = () => {
                   </Tr>
                 ))}
               </Tbody>
-            </TableComposable>
+            </Table>
             {renderPagination('bottom', false)}
           </Card>
         </PageSection>
diff --git a/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx b/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx
index 766883fb996..f6b06b8b794 100644
--- a/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/CompoundExpansion.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import {
   ActionsColumn,
-  TableComposable,
+  Table,
   Thead,
   Tr,
   Th,
@@ -51,7 +51,7 @@ export const CompoundExpandable = () => {
     };
 
     return (
-      <TableComposable borders={false} aria-label="Nested table" variant="compact">
+      <Table borders={false} aria-label="Nested table" variant="compact">
         <Thead>
           <Tr>
             <Th>{columnNames.description}</Th>
@@ -72,7 +72,7 @@ export const CompoundExpandable = () => {
             </Tr>
           ))}
         </Tbody>
-      </TableComposable>
+      </Table>
     );
   };
 
@@ -184,7 +184,7 @@ export const CompoundExpandable = () => {
       <PageSection padding={{ default: 'noPadding', xl: 'padding' }}>
         <Card>
           {tableToolbar}
-          <TableComposable aria-label="Compound expandable table">
+          <Table aria-label="Compound expandable table">
             <Thead>
               <Tr>
                 <Th>{columnNames.name}</Th>
@@ -260,7 +260,7 @@ export const CompoundExpandable = () => {
                 </Tbody>
               );
             })}
-          </TableComposable>
+          </Table>
           {renderPagination('bottom', false)}
         </Card>
       </PageSection>
diff --git a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
index 6ad3a5b7d08..a3bac93aaa2 100644
--- a/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/ExpandCollapseAll.jsx
@@ -1,5 +1,7 @@
 import React from 'react';
-import { Card, Label, PageSection, Table, TableHeader, TableBody, expandable } from '@patternfly/react-table';
+import { Card, Label, PageSection } from '@patternfly/react-core';
+import { expandable } from '@patternfly/react-table';
+import { Table, TableHeader, TableBody } from '@patternfly/react-table/deprecated';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 import { TextVariants } from '@patternfly/react-core';
 
@@ -178,7 +180,7 @@ class ExpandCollapseAllTableDemo extends React.Component {
       if (collapseAll) {
         this.setState(() => {
           return {
-            expandedServerNames: isOpen ? [...serverData.map((server) => server.name)] : [] 
+            expandedServerNames: isOpen ? [...serverData.map((server) => server.name)] : []
           };
         });
 
diff --git a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
index 551f0e23533..f6a4c5c368c 100644
--- a/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/SortableResponsive.jsx
@@ -22,7 +22,7 @@ import {
   OverflowMenuItem,
   PageSection
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { rows, columns } from '../../examples/Data.jsx';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
@@ -244,7 +244,7 @@ export const ComposableTableSortable = () => {
         >
           <Card component="div">
             {tableToolbar}
-            <TableComposable aria-label="Sortable Table">
+            <Table aria-label="Sortable Table">
               <Thead>
                 <Tr>
                   {columns.map((column, columnIndex) => {
@@ -319,7 +319,7 @@ export const ComposableTableSortable = () => {
                   </Tr>
                 ))}
               </Tbody>
-            </TableComposable>
+            </Table>
             {renderPagination('bottom', false)}
           </Card>
         </PageSection>
diff --git a/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
index 019d9803c63..3dfa6d2fbfe 100644
--- a/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/StaticBottomPagination.jsx
@@ -13,7 +13,7 @@ import {
   PageSection,
   Label
 } from '@patternfly/react-core';
-import { TableComposable, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td } from '@patternfly/react-table';
 import { rows, columns } from '../../examples/Data.jsx';
 
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
@@ -120,7 +120,7 @@ export const StaticBottomPagination = () => {
         <PageSection isFilled>
           <Card>
             {tableToolbar}
-            <TableComposable variant="compact" aria-label="Paginated Table">
+            <Table variant="compact" aria-label="Paginated Table">
               <Thead>
                 <Tr>
                   {columns.map((column, columnIndex) => (
@@ -146,7 +146,7 @@ export const StaticBottomPagination = () => {
                   </Tr>
                 ))}
               </Tbody>
-            </TableComposable>
+            </Table>
             {renderPagination('bottom', false)}
           </Card>
         </PageSection>
diff --git a/packages/react-table/src/docs/demos/table-demos/StickyFirstColumn.jsx b/packages/react-table/src/docs/demos/table-demos/StickyFirstColumn.jsx
index f1ea5f728ee..ed4815047d1 100644
--- a/packages/react-table/src/docs/demos/table-demos/StickyFirstColumn.jsx
+++ b/packages/react-table/src/docs/demos/table-demos/StickyFirstColumn.jsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { TableComposable, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
+import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer } from '@patternfly/react-table';
 import { Card, PageSection } from '@patternfly/react-core';
 import DashboardWrapper from '@patternfly/react-core/src/demos/examples/DashboardWrapper';
 
@@ -116,7 +116,7 @@ export const StickyFirstColumn = () => {
       <PageSection isWidthLimited padding={{ default: 'noPadding', xl: 'padding' }}>
         <Card component="div">
           <InnerScrollContainer>
-            <TableComposable aria-label="Sticky column table" gridBreakPoint="">
+            <Table aria-label="Sticky column table" gridBreakPoint="">
               <Thead>
                 <Tr>
                   <Th
@@ -201,7 +201,7 @@ export const StickyFirstColumn = () => {
                   </Tr>
                 ))}
               </Tbody>
-            </TableComposable>
+            </Table>
           </InnerScrollContainer>
         </Card>
       </PageSection>
diff --git a/yarn.lock b/yarn.lock
index 13763b2e3b4..b99d6965751 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2501,7 +2501,7 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
-"@discoveryjs/json-ext@^0.5.0":
+"@discoveryjs/json-ext@0.5.7", "@discoveryjs/json-ext@^0.5.0":
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
@@ -3894,10 +3894,10 @@
     acorn-static-class-features "^1.0.0"
     astring "^1.7.5"
 
-"@patternfly/documentation-framework@^2.0.0-alpha.8":
-  version "2.0.0-alpha.10"
-  resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-2.0.0-alpha.10.tgz#217dc785d421c25dae46b5c7840dc30eebba9f8e"
-  integrity sha512-P8XzP7Jve6UvOdkhn39yB0Uzi2vYPQ8x2XpyRFjAVM+W+TrtOjlcoXiF1JgNO5kdyf0Cm9ByqfOgTNy1wuqpEA==
+"@patternfly/documentation-framework@^2.0.0-alpha.14":
+  version "2.0.0-alpha.14"
+  resolved "https://registry.yarnpkg.com/@patternfly/documentation-framework/-/documentation-framework-2.0.0-alpha.14.tgz#b37dbe11f388e801c1c40c09003dcf75040047e7"
+  integrity sha512-udpcZppP+ryhWroZwfYgClj25U25syfWn9Wki3ajqorfjjzgT+I6HSQoUPpk5n5iG4hCq+T1UQvM8KJYw4iaDA==
   dependencies:
     "@babel/core" "7.18.2"
     "@babel/plugin-proposal-class-properties" "7.17.12"
@@ -3908,19 +3908,19 @@
     "@babel/preset-env" "7.18.2"
     "@mdx-js/util" "1.6.16"
     "@patternfly/ast-helpers" "^0.4.57"
-    "@reach/router" "1.3.4"
+    "@reach/router" "npm:@gatsbyjs/reach-router@1.3.9"
     autoprefixer "9.8.6"
-    babel-loader "8.2.5"
+    babel-loader "9.1.2"
     camelcase-css "2.0.1"
     chokidar "3.5.3"
-    clean-webpack-plugin "3.0.0"
+    clean-webpack-plugin "4.0.0"
     codesandbox "2.2.0"
     commander "4.1.1"
-    copy-webpack-plugin "6.1.0"
-    css-loader "4.3.0"
+    copy-webpack-plugin "11.0.0"
+    css-loader "6.7.3"
     detab "2.0.3"
     express "4.18.1"
-    file-loader "6.1.0"
+    file-loader "6.2.0"
     file-saver "1.3.8"
     fs-extra "9.0.1"
     glob "8.0.3"
@@ -3928,29 +3928,30 @@
     hast-to-hyperscript "9.0.0"
     hast-util-to-text "2.0.0"
     html-formatter "0.1.9"
-    html-webpack-plugin "4.4.1"
+    html-webpack-plugin "5.5.0"
     js-yaml "3.14.0"
     mdast-util-to-hast "9.1.1"
     mdurl "1.0.1"
-    mini-css-extract-plugin "1.3.9"
-    monaco-editor "0.21.3"
-    monaco-editor-webpack-plugin "2.1.0"
-    null-loader "4.0.0"
+    mini-css-extract-plugin "2.7.5"
+    monaco-editor "0.34.1"
+    monaco-editor-webpack-plugin "7.0.1"
     parse-entities "2.0.0"
+    path-browserify "1.0.1"
     postcss "7.0.32"
-    postcss-loader "4.2.0"
+    postcss-loader "7.1.0"
+    process "^0.11.10"
     puppeteer "14.3.0"
     puppeteer-cluster "0.23.0"
     react-docgen "5.3.1"
-    react-monaco-editor "0.48.0"
-    react-ssr-prepass "1.2.1"
+    react-monaco-editor "^0.51.0"
+    react-ssr-prepass "1.5.0"
     remark-footnotes "1.0.0"
     remark-frontmatter "2.0.0"
     remark-mdx "2.0.0-next.8"
     remark-mdxjs "2.0.0-next.8"
     remark-parse "8.0.3"
     remark-squeeze-paragraphs "4.0.0"
-    responsive-loader "2.1.1"
+    responsive-loader "3.1.2"
     sharp "0.30.6"
     style-to-object "0.3.0"
     to-vfile "6.1.0"
@@ -3960,10 +3961,10 @@
     unist-util-visit "2.0.3"
     url-loader "4.1.0"
     vfile-reporter "6.0.1"
-    webpack "4.44.1"
-    webpack-bundle-analyzer "3.8.0"
-    webpack-cli "3.3.12"
-    webpack-dev-server "3.11.0"
+    webpack "5.76.3"
+    webpack-bundle-analyzer "4.8.0"
+    webpack-cli "5.0.1"
+    webpack-dev-server "4.13.1"
     webpack-merge "5.8.0"
 
 "@patternfly/patternfly-a11y@4.3.1":
@@ -4007,12 +4008,16 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
-"@reach/router@1.3.4":
-  version "1.3.4"
-  resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c"
-  integrity sha512-+mtn9wjlB9NN2CNnnC/BRYtwdKBfSyyasPYraNAyvaV1occr/5NnB4CVzjEZipNHwYebQwcndGUmpFzxAUoqSA==
+"@polka/url@^1.0.0-next.20":
+  version "1.0.0-next.21"
+  resolved "https://registry.yarnpkg.com/@polka/url/-/url-1.0.0-next.21.tgz#5de5a2385a35309427f6011992b544514d559aa1"
+  integrity sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==
+
+"@reach/router@npm:@gatsbyjs/reach-router@1.3.9":
+  version "1.3.9"
+  resolved "https://registry.yarnpkg.com/@gatsbyjs/reach-router/-/reach-router-1.3.9.tgz#305c3c4c5041f27e53fc33e344a08ee2c4b985af"
+  integrity sha512-/354IaUSM54xb7K/TxpLBJB94iEAJ3P82JD38T8bLnIDWF+uw8+W/82DKnQ7y24FJcKxtVmG43aiDLG88KSuYQ==
   dependencies:
-    create-react-context "0.3.0"
     invariant "^2.2.3"
     prop-types "^15.6.1"
     react-lifecycles-compat "^3.0.4"
@@ -4351,10 +4356,6 @@
   resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.11.tgz#56588b17ae8f50c53983a524fc3cc47437969d64"
   integrity sha512-qjDJRrmvBMiTx+jyLxvLfJU7UznFuokDv4f3WRuriHKERccVpFU+8XMQUAbDzoiJCsmexxRExQeMwwCdamSKDA==
 
-"@types/html-minifier-terser@^5.0.0":
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/@types/html-minifier-terser/-/html-minifier-terser-5.1.0.tgz"
-
 "@types/html-minifier-terser@^6.0.0":
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/@types/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#4fc33a00c1d0c16987b1a20cf92d20614c55ac35"
@@ -4472,6 +4473,11 @@
   resolved "https://registry.npmjs.org/@types/node/-/node-14.17.17.tgz"
   integrity sha512-niAjcewgEYvSPCZm3OaM9y6YQrL2SEPH9PymtE6fuZAvFiP6ereCcvApGl2jKTq7copTIguX3PBvfP08LN4LvQ==
 
+"@types/node@^18.11.9":
+  version "18.15.11"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.15.11.tgz#b3b790f09cb1696cffcec605de025b088fa4225f"
+  integrity sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.npmjs.org/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz"
@@ -4599,7 +4605,7 @@
   resolved "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-2.0.1.tgz"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
-"@types/tapable@*", "@types/tapable@^1.0.5":
+"@types/tapable@*":
   version "1.0.6"
   resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.6.tgz"
 
@@ -4634,7 +4640,7 @@
     "@types/source-list-map" "*"
     source-map "^0.7.3"
 
-"@types/webpack@^4.4.31", "@types/webpack@^4.41.8":
+"@types/webpack@^4.4.31":
   version "4.41.22"
   resolved "https://registry.npmjs.org/@types/webpack/-/webpack-4.41.22.tgz"
   dependencies:
@@ -5006,6 +5012,11 @@
   resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-1.2.0.tgz#7b20ce1c12533912c3b217ea68262365fa29a6f5"
   integrity sha512-4FB8Tj6xyVkyqjj1OaTqCjXYULB9FMkqQ8yGrZjRDrYh0nOE+7Lhs45WioWQQMV+ceFlE368Ukhe6xdvJM9Egg==
 
+"@webpack-cli/configtest@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/configtest/-/configtest-2.0.1.tgz#a69720f6c9bad6aef54a8fa6ba9c3533e7ef4c7f"
+  integrity sha512-njsdJXJSiS2iNbQVS0eT8A/KPnmyH4pv1APj2K0d1wrZcBLw+yppxOy4CGqa0OxDJkzfL/XELDhD8rocnIwB5A==
+
 "@webpack-cli/info@^1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-1.5.0.tgz#6c78c13c5874852d6e2dd17f08a41f3fe4c261b1"
@@ -5013,11 +5024,21 @@
   dependencies:
     envinfo "^7.7.3"
 
+"@webpack-cli/info@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/info/-/info-2.0.1.tgz#eed745799c910d20081e06e5177c2b2569f166c0"
+  integrity sha512-fE1UEWTwsAxRhrJNikE7v4EotYflkEhBL7EbajfkPlf6E37/2QshOy/D48Mw8G5XMFlQtS6YV42vtbG9zBpIQA==
+
 "@webpack-cli/serve@^1.7.0":
   version "1.7.0"
   resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-1.7.0.tgz#e1993689ac42d2b16e9194376cfb6753f6254db1"
   integrity sha512-oxnCNGj88fL+xzV+dacXs44HcDwf1ovs3AuEzvP7mqXw7fQntqIhQ1BRmynh4qEKQSSSRSWVyXRjmTbZIX9V2Q==
 
+"@webpack-cli/serve@^2.0.1":
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/@webpack-cli/serve/-/serve-2.0.1.tgz#34bdc31727a1889198855913db2f270ace6d7bf8"
+  integrity sha512-0G7tNyS+yW8TdgHwZKlDWYXFA6OJQnoLCQvYKkQP0Q2X205PSQ6RNUj0M+1OB/9gRQaUZ/ccYfaxd0nhaWKfjw==
+
 "@xtuc/ieee754@^1.2.0":
   version "1.2.0"
   resolved "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz"
@@ -5067,7 +5088,7 @@ abbrev@1, abbrev@^1.0.0:
   version "1.1.1"
   resolved "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz"
 
-accepts@^1.3.5, accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.7:
+accepts@^1.3.5, accepts@~1.3.4, accepts@~1.3.5:
   version "1.3.7"
   resolved "https://registry.npmjs.org/accepts/-/accepts-1.3.7.tgz"
   dependencies:
@@ -5134,6 +5155,11 @@ acorn-walk@^7.1.1:
   version "7.2.0"
   resolved "https://registry.npmjs.org/acorn-walk/-/acorn-walk-7.2.0.tgz"
 
+acorn-walk@^8.0.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-8.2.0.tgz#741210f2e2426454508853a2f44d0ab83b7f69c1"
+  integrity sha512-k+iyHEuPgSw6SbuDpGQM+06HQUa04DZ3o+F6CSzXMvvI5KMvnaEqXe+YVe555R9nn6GPt404fos4wcgpw12SDA==
+
 acorn@^6.0.1, acorn@^6.4.1:
   version "6.4.1"
   resolved "https://registry.npmjs.org/acorn/-/acorn-6.4.1.tgz"
@@ -5142,6 +5168,11 @@ acorn@^7.1.0, acorn@^7.1.1:
   version "7.4.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-7.4.0.tgz"
 
+acorn@^8.0.4, acorn@^8.7.1, acorn@^8.8.0:
+  version "8.8.2"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
+  integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
+
 acorn@^8.2.4:
   version "8.5.0"
   resolved "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz"
@@ -5157,11 +5188,6 @@ acorn@^8.5.0:
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.1.tgz#0a3f9cbecc4ec3bea6f0a80b66ae8dd2da250b73"
   integrity sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==
 
-acorn@^8.8.0:
-  version "8.8.2"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.8.2.tgz#1b2f25db02af965399b9776b0c2c391276d37c4a"
-  integrity sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==
-
 add-stream@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/add-stream/-/add-stream-1.0.0.tgz#6a7990437ca736d5e1288db92bd3266d5f5cb2aa"
@@ -5285,10 +5311,6 @@ ansi-align@^2.0.0:
   dependencies:
     string-width "^2.0.0"
 
-ansi-colors@^3.0.0:
-  version "3.2.4"
-  resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-3.2.4.tgz"
-
 ansi-colors@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/ansi-colors/-/ansi-colors-4.1.1.tgz"
@@ -5320,14 +5342,6 @@ ansi-html-community@^0.0.8:
   resolved "https://registry.yarnpkg.com/ansi-html-community/-/ansi-html-community-0.0.8.tgz#69fbc4d6ccbe383f9736934ae34c3f8290f1bf41"
   integrity sha512-1APHAyr3+PCamwNw3bXCPp4HFLONZt/yIH0sZp0/469KWNTEy+qN5jQ3GVX6DMZ1UXAi34yVwtTeaG/HpBuuzw==
 
-ansi-html@0.0.7:
-  version "0.0.7"
-  resolved "https://registry.npmjs.org/ansi-html/-/ansi-html-0.0.7.tgz"
-
-ansi-regex@^2.0.0:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz"
-
 ansi-regex@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/ansi-regex/-/ansi-regex-3.0.0.tgz"
@@ -5350,7 +5364,7 @@ ansi-regex@^6.0.1:
   resolved "https://registry.yarnpkg.com/ansi-regex/-/ansi-regex-6.0.1.tgz#3183e38fae9a65d7cb5e53945cd5897d0260a06a"
   integrity sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==
 
-ansi-styles@^3.2.0, ansi-styles@^3.2.1:
+ansi-styles@^3.2.1:
   version "3.2.1"
   resolved "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz"
   dependencies:
@@ -5494,7 +5508,7 @@ array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-1.1.1.tgz"
 
-array-flatten@^2.1.0, array-flatten@^2.1.2:
+array-flatten@^2.1.2:
   version "2.1.2"
   resolved "https://registry.npmjs.org/array-flatten/-/array-flatten-2.1.2.tgz"
 
@@ -5646,12 +5660,6 @@ async-limiter@^1.0.0, async-limiter@~1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz"
 
-async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.npmjs.org/async/-/async-2.6.3.tgz"
-  dependencies:
-    lodash "^4.17.14"
-
 async@^3.2.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/async/-/async-3.2.0.tgz"
@@ -5758,15 +5766,13 @@ babel-jest@^27.2.5:
     graceful-fs "^4.2.4"
     slash "^3.0.0"
 
-babel-loader@8.2.5:
-  version "8.2.5"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
-  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
+babel-loader@9.1.2:
+  version "9.1.2"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-9.1.2.tgz#a16a080de52d08854ee14570469905a5fc00d39c"
+  integrity sha512-mN14niXW43tddohGl8HPu5yfQq70iUThvFL/4QzESA7GcZoC0eVOhvWdQ8+3UlSjaDE9MVtsW9mxDY07W7VpVA==
   dependencies:
-    find-cache-dir "^3.3.1"
-    loader-utils "^2.0.0"
-    make-dir "^3.1.0"
-    schema-utils "^2.6.5"
+    find-cache-dir "^3.3.2"
+    schema-utils "^4.0.0"
 
 babel-plugin-dynamic-import-node@^2.3.3:
   version "2.3.3"
@@ -5922,15 +5928,6 @@ before-after-hook@^2.2.0:
   resolved "https://registry.yarnpkg.com/before-after-hook/-/before-after-hook-2.2.3.tgz#c51e809c81a4e354084422b9b26bad88249c517c"
   integrity sha512-NzUnlZexiaH/46WDhANlyR2bXRopNg4F/zuSA3OpZnllCUgRaOF2znDioDWrmbNVsuZk6l9pMquQB38cfBZwkQ==
 
-bfj@^6.1.1:
-  version "6.1.2"
-  resolved "https://registry.npmjs.org/bfj/-/bfj-6.1.2.tgz"
-  dependencies:
-    bluebird "^3.5.5"
-    check-types "^8.0.3"
-    hoopy "^0.1.4"
-    tryer "^1.0.1"
-
 big.js@^5.2.2:
   version "5.2.2"
   resolved "https://registry.npmjs.org/big.js/-/big.js-5.2.2.tgz"
@@ -6026,21 +6023,6 @@ bn.js@^5.1.1:
   version "5.1.3"
   resolved "https://registry.npmjs.org/bn.js/-/bn.js-5.1.3.tgz"
 
-body-parser@1.19.0:
-  version "1.19.0"
-  resolved "https://registry.npmjs.org/body-parser/-/body-parser-1.19.0.tgz"
-  dependencies:
-    bytes "3.1.0"
-    content-type "~1.0.4"
-    debug "2.6.9"
-    depd "~1.1.2"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    on-finished "~2.3.0"
-    qs "6.7.0"
-    raw-body "2.4.0"
-    type-is "~1.6.17"
-
 body-parser@1.20.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
@@ -6087,18 +6069,7 @@ bonjour-service@^1.0.11:
     fast-deep-equal "^3.1.3"
     multicast-dns "^7.2.5"
 
-bonjour@^3.5.0:
-  version "3.5.0"
-  resolved "https://registry.npmjs.org/bonjour/-/bonjour-3.5.0.tgz"
-  dependencies:
-    array-flatten "^2.1.0"
-    deep-equal "^1.0.1"
-    dns-equal "^1.0.0"
-    dns-txt "^2.0.2"
-    multicast-dns "^6.0.1"
-    multicast-dns-service-types "^1.1.0"
-
-boolbase@^1.0.0, boolbase@~1.0.0:
+boolbase@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/boolbase/-/boolbase-1.0.0.tgz"
   integrity sha1-aN/1++YMUes3cl6p4+0xDcwed24=
@@ -6293,10 +6264,6 @@ buffer-from@^1.0.0:
   version "1.1.1"
   resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.1.tgz"
 
-buffer-indexof@^1.0.0:
-  version "1.1.1"
-  resolved "https://registry.npmjs.org/buffer-indexof/-/buffer-indexof-1.1.1.tgz"
-
 buffer-xor@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/buffer-xor/-/buffer-xor-1.0.3.tgz"
@@ -6525,13 +6492,6 @@ camel-case@^3.0.0:
     no-case "^2.2.0"
     upper-case "^1.1.1"
 
-camel-case@^4.1.1:
-  version "4.1.1"
-  resolved "https://registry.npmjs.org/camel-case/-/camel-case-4.1.1.tgz"
-  dependencies:
-    pascal-case "^3.1.1"
-    tslib "^1.10.0"
-
 camel-case@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/camel-case/-/camel-case-4.1.2.tgz#9728072a954f805228225a6deea6b38461e1bd5a"
@@ -6557,7 +6517,7 @@ camelcase@^4.0.0:
   resolved "https://registry.yarnpkg.com/camelcase/-/camelcase-4.1.0.tgz#d545635be1e33c542649c69173e5de6acfae34dd"
   integrity sha512-FxAv7HpHrXbh3aPo4o2qxHay2lkLY3x5Mw3KeE4KQE8ysVfziWeRZDwcjauvwBSGEC/nXUPzZy8zeh4HokqOnw==
 
-camelcase@^5.0.0, camelcase@^5.3.1:
+camelcase@^5.3.1:
   version "5.3.1"
   resolved "https://registry.npmjs.org/camelcase/-/camelcase-5.3.1.tgz"
 
@@ -6702,10 +6662,6 @@ check-more-types@^2.24.0:
   version "2.24.0"
   resolved "https://registry.npmjs.org/check-more-types/-/check-more-types-2.24.0.tgz"
 
-check-types@^8.0.3:
-  version "8.0.3"
-  resolved "https://registry.npmjs.org/check-types/-/check-types-8.0.3.tgz"
-
 chokidar@3.5.3, chokidar@^3.4.2, chokidar@^3.5.3:
   version "3.5.3"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.3.tgz#1cf37c8707b932bd1af1ae22c0432e2acd1903bd"
@@ -6819,12 +6775,6 @@ classnames@^2.2.6:
   resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz"
   integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
 
-clean-css@^4.2.3:
-  version "4.2.3"
-  resolved "https://registry.npmjs.org/clean-css/-/clean-css-4.2.3.tgz"
-  dependencies:
-    source-map "~0.6.0"
-
 clean-css@^5.2.2:
   version "5.3.1"
   resolved "https://registry.yarnpkg.com/clean-css/-/clean-css-5.3.1.tgz#d0610b0b90d125196a2894d35366f734e5d7aa32"
@@ -6836,7 +6786,14 @@ clean-stack@^2.0.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/clean-stack/-/clean-stack-2.2.0.tgz"
 
-clean-webpack-plugin@3.0.0, clean-webpack-plugin@^3.0.0:
+clean-webpack-plugin@4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/clean-webpack-plugin/-/clean-webpack-plugin-4.0.0.tgz#72947d4403d452f38ed61a9ff0ada8122aacd729"
+  integrity sha512-WuWE1nyTNAyW5T7oNyys2EN0cfP2fdRxhxnIQWiAp0bMabPdHhoGxM8A6YL2GhqwgrPnnaemVE7nv5XJ2Fhh2w==
+  dependencies:
+    del "^4.1.1"
+
+clean-webpack-plugin@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/clean-webpack-plugin/-/clean-webpack-plugin-3.0.0.tgz"
   dependencies:
@@ -6928,14 +6885,6 @@ cli-width@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/cli-width/-/cli-width-3.0.0.tgz"
 
-cliui@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.npmjs.org/cliui/-/cliui-5.0.0.tgz"
-  dependencies:
-    string-width "^3.1.0"
-    strip-ansi "^5.2.0"
-    wrap-ansi "^5.1.0"
-
 cliui@^7.0.2:
   version "7.0.4"
   resolved "https://registry.npmjs.org/cliui/-/cliui-7.0.4.tgz"
@@ -7145,7 +7094,7 @@ command-line-usage@^5.0.5:
     table-layout "^0.4.3"
     typical "^2.6.1"
 
-commander@4.1.1, commander@^4.1.1:
+commander@4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz"
 
@@ -7162,7 +7111,7 @@ commander@^5.1.0:
   version "5.1.0"
   resolved "https://registry.npmjs.org/commander/-/commander-5.1.0.tgz"
 
-commander@^7.0.0:
+commander@^7.0.0, commander@^7.2.0:
   version "7.2.0"
   resolved "https://registry.yarnpkg.com/commander/-/commander-7.2.0.tgz#a36cb57d0b501ce108e4d20559a150a391d97ab7"
   integrity sha512-QrWXB+ZQSVPmIWIhtEO9H+gwHaMGYiF5ChvoJ+K9ZGHG/sVsa6yiesAD1GC/x46sET00Xlwo1u49RVVVzvcSkw==
@@ -7172,6 +7121,11 @@ commander@^8.3.0:
   resolved "https://registry.yarnpkg.com/commander/-/commander-8.3.0.tgz#4837ea1b2da67b9c616a67afbb0fafee567bca66"
   integrity sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==
 
+commander@^9.4.1:
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/commander/-/commander-9.5.0.tgz#bc08d1eb5cedf7ccb797a96199d41c7bc3e60d30"
+  integrity sha512-KRs7WVDKg86PWiuAqhDrAQnTXZKraVcCc6vFdL14qrZ/DcWwuRo7VoiYXalXO7S5GKpqYiVEwCbgFDfxNHKJBQ==
+
 common-ancestor-path@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/common-ancestor-path/-/common-ancestor-path-1.0.1.tgz#4f7d2d1394d91b7abdf51871c62f71eadb0182a7"
@@ -7289,10 +7243,6 @@ confusing-browser-globals@^1.0.10:
   resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.11.tgz#ae40e9b57cdd3915408a2805ebd3a5585608dc81"
   integrity sha512-JsPKdmh8ZkmnHxDk55FZ1TqVLvEQTvoByJZRN9jzI0UjxK/QgAmsphz7PGtqgPieQZ/CQcHWXCR7ATDNhGe+YA==
 
-connect-history-api-fallback@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.npmjs.org/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz"
-
 connect-history-api-fallback@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-2.0.0.tgz#647264845251a0daf25b97ce87834cace0f5f1c8"
@@ -7320,12 +7270,6 @@ constants-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz"
 
-content-disposition@0.5.3, content-disposition@~0.5.2:
-  version "0.5.3"
-  resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz"
-  dependencies:
-    safe-buffer "5.1.2"
-
 content-disposition@0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/content-disposition/-/content-disposition-0.5.4.tgz#8b82b4efac82512a02bb0b1dcec9d2c5e8eb5bfe"
@@ -7333,6 +7277,12 @@ content-disposition@0.5.4:
   dependencies:
     safe-buffer "5.2.1"
 
+content-disposition@~0.5.2:
+  version "0.5.3"
+  resolved "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz"
+  dependencies:
+    safe-buffer "5.1.2"
+
 content-type@^1.0.4, content-type@~1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz"
@@ -7442,10 +7392,6 @@ cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.npmjs.org/cookie-signature/-/cookie-signature-1.0.6.tgz"
 
-cookie@0.4.0:
-  version "0.4.0"
-  resolved "https://registry.npmjs.org/cookie/-/cookie-0.4.0.tgz"
-
 cookie@0.5.0:
   version "0.5.0"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
@@ -7477,7 +7423,19 @@ copy-to@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/copy-to/-/copy-to-2.0.1.tgz"
 
-copy-webpack-plugin@6.1.0, copy-webpack-plugin@^6.1.0:
+copy-webpack-plugin@11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/copy-webpack-plugin/-/copy-webpack-plugin-11.0.0.tgz#96d4dbdb5f73d02dd72d0528d1958721ab72e04a"
+  integrity sha512-fX2MWpamkW0hZxMEg0+mYnA40LTosOSa5TqZ9GYIBzyJa9C3QUaMPSE2xAi/buNr8u89SfD9wHSQVBzrRa/SOQ==
+  dependencies:
+    fast-glob "^3.2.11"
+    glob-parent "^6.0.1"
+    globby "^13.1.1"
+    normalize-path "^3.0.0"
+    schema-utils "^4.0.0"
+    serialize-javascript "^6.0.0"
+
+copy-webpack-plugin@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmjs.org/copy-webpack-plugin/-/copy-webpack-plugin-6.1.0.tgz"
   dependencies:
@@ -7538,6 +7496,16 @@ cosmiconfig@^7.0.0:
     path-type "^4.0.0"
     yaml "^1.10.0"
 
+cosmiconfig@^8.0.0:
+  version "8.1.3"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-8.1.3.tgz#0e614a118fcc2d9e5afc2f87d53cd09931015689"
+  integrity sha512-/UkO2JKI18b5jVMJUp0lvKFMpa/Gye+ZgZjKD+DGEN9y7NRcf/nK1A0sp67ONmKtnDCNMS44E6jrk0Yc3bDuUw==
+  dependencies:
+    import-fresh "^3.2.1"
+    js-yaml "^4.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+
 create-ecdh@^4.0.0:
   version "4.0.4"
   resolved "https://registry.npmjs.org/create-ecdh/-/create-ecdh-4.0.4.tgz"
@@ -7572,13 +7540,6 @@ create-hmac@^1.1.0, create-hmac@^1.1.4, create-hmac@^1.1.7:
     safe-buffer "^5.0.1"
     sha.js "^2.4.8"
 
-create-react-context@0.3.0:
-  version "0.3.0"
-  resolved "https://registry.npmjs.org/create-react-context/-/create-react-context-0.3.0.tgz"
-  dependencies:
-    gud "^1.0.0"
-    warning "^4.0.3"
-
 cross-fetch@3.1.5:
   version "3.1.5"
   resolved "https://registry.yarnpkg.com/cross-fetch/-/cross-fetch-3.1.5.tgz#e1389f44d9e7ba767907f7af8454787952ab534f"
@@ -7594,16 +7555,6 @@ cross-spawn@^5.0.1:
     shebang-command "^1.2.0"
     which "^1.2.9"
 
-cross-spawn@^6.0.0, cross-spawn@^6.0.5:
-  version "6.0.5"
-  resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz"
-  dependencies:
-    nice-try "^1.0.4"
-    path-key "^2.0.1"
-    semver "^5.5.0"
-    shebang-command "^1.2.0"
-    which "^1.2.9"
-
 cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
@@ -7632,7 +7583,21 @@ crypto-random-string@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz"
 
-css-loader@4.3.0, css-loader@^4.3.0:
+css-loader@6.7.3:
+  version "6.7.3"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-6.7.3.tgz#1e8799f3ccc5874fdd55461af51137fcc5befbcd"
+  integrity sha512-qhOH1KlBMnZP8FzRO6YCH9UHXQhVMcEGLyNdb7Hv2cpcmJbW0YrddO+tG1ab5nT41KpHIYGsbeHqxB9xPu1pKQ==
+  dependencies:
+    icss-utils "^5.1.0"
+    postcss "^8.4.19"
+    postcss-modules-extract-imports "^3.0.0"
+    postcss-modules-local-by-default "^4.0.0"
+    postcss-modules-scope "^3.0.0"
+    postcss-modules-values "^4.0.0"
+    postcss-value-parser "^4.2.0"
+    semver "^7.3.8"
+
+css-loader@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/css-loader/-/css-loader-4.3.0.tgz"
   dependencies:
@@ -7649,15 +7614,6 @@ css-loader@4.3.0, css-loader@^4.3.0:
     schema-utils "^2.7.1"
     semver "^7.3.2"
 
-css-select@^1.1.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/css-select/-/css-select-1.2.0.tgz"
-  dependencies:
-    boolbase "~1.0.0"
-    css-what "2.1"
-    domutils "1.5.1"
-    nth-check "~1.0.1"
-
 css-select@^4.1.3:
   version "4.3.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-4.3.0.tgz#db7129b2846662fd8628cfc496abb2b59e41529b"
@@ -7669,10 +7625,6 @@ css-select@^4.1.3:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
-css-what@2.1:
-  version "2.1.3"
-  resolved "https://registry.npmjs.org/css-what/-/css-what-2.1.3.tgz"
-
 css-what@^6.0.1:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-6.1.0.tgz#fb5effcf76f1ddea2c81bdfaa4de44e79bac70f4"
@@ -7944,7 +7896,7 @@ debug@4.3.4, debug@^4.3.3, debug@^4.3.4:
   dependencies:
     ms "2.1.2"
 
-debug@^3.0.0, debug@^3.1.0, debug@^3.1.1, debug@^3.2.5:
+debug@^3.0.0, debug@^3.1.0:
   version "3.2.6"
   resolved "https://registry.npmjs.org/debug/-/debug-3.2.6.tgz"
   dependencies:
@@ -7975,7 +7927,7 @@ decamelize-keys@^1.1.0:
     decamelize "^1.1.0"
     map-obj "^1.0.0"
 
-decamelize@^1.1.0, decamelize@^1.2.0:
+decamelize@^1.1.0:
   version "1.2.0"
   resolved "https://registry.npmjs.org/decamelize/-/decamelize-1.2.0.tgz"
 
@@ -7999,17 +7951,6 @@ dedent@^0.7.0:
   version "0.7.0"
   resolved "https://registry.npmjs.org/dedent/-/dedent-0.7.0.tgz"
 
-deep-equal@^1.0.1:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/deep-equal/-/deep-equal-1.1.0.tgz"
-  dependencies:
-    is-arguments "^1.0.4"
-    is-date-object "^1.0.1"
-    is-regex "^1.0.4"
-    object-is "^1.0.1"
-    object-keys "^1.1.1"
-    regexp.prototype.flags "^1.2.0"
-
 deep-equal@^2.0.5:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/deep-equal/-/deep-equal-2.2.0.tgz#5caeace9c781028b9ff459f33b779346637c43e6"
@@ -8050,13 +7991,6 @@ deepmerge@^4.2.2:
   resolved "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz"
   integrity sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg==
 
-default-gateway@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.npmjs.org/default-gateway/-/default-gateway-4.2.0.tgz"
-  dependencies:
-    execa "^1.0.0"
-    ip-regex "^2.1.0"
-
 default-gateway@^6.0.3:
   version "6.0.3"
   resolved "https://registry.yarnpkg.com/default-gateway/-/default-gateway-6.0.3.tgz#819494c888053bdb743edbf343d6cdf7f2943a71"
@@ -8181,7 +8115,7 @@ destroy@1.2.0:
   resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
   integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
-destroy@^1.0.4, destroy@~1.0.4:
+destroy@^1.0.4:
   version "1.0.4"
   resolved "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz"
 
@@ -8253,13 +8187,6 @@ dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/dns-equal/-/dns-equal-1.0.0.tgz"
 
-dns-packet@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/dns-packet/-/dns-packet-1.3.1.tgz"
-  dependencies:
-    ip "^1.1.0"
-    safe-buffer "^5.0.1"
-
 dns-packet@^5.2.2:
   version "5.4.0"
   resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.4.0.tgz#1f88477cf9f27e78a213fb6d118ae38e759a879b"
@@ -8267,12 +8194,6 @@ dns-packet@^5.2.2:
   dependencies:
     "@leichtgewicht/ip-codec" "^2.0.1"
 
-dns-txt@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.npmjs.org/dns-txt/-/dns-txt-2.0.2.tgz"
-  dependencies:
-    buffer-indexof "^1.0.0"
-
 doctrine@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz"
@@ -8290,19 +8211,12 @@ dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
   resolved "https://registry.npmjs.org/dom-accessibility-api/-/dom-accessibility-api-0.5.11.tgz"
   integrity sha512-7X6GvzjYf4yTdRKuCVScV+aA9Fvh5r8WzWrXBH9w82ZWB/eYDMGCnazoC/YAqAzUJWHzLOnZqr46K3iEyUhUvw==
 
-dom-converter@^0.2, dom-converter@^0.2.0:
+dom-converter@^0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/dom-converter/-/dom-converter-0.2.0.tgz"
   dependencies:
     utila "~0.4"
 
-dom-serializer@0:
-  version "0.2.2"
-  resolved "https://registry.npmjs.org/dom-serializer/-/dom-serializer-0.2.2.tgz"
-  dependencies:
-    domelementtype "^2.0.1"
-    entities "^2.0.0"
-
 dom-serializer@^1.0.1:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
@@ -8321,10 +8235,6 @@ domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.npmjs.org/domain-browser/-/domain-browser-1.2.0.tgz"
 
-domelementtype@1, domelementtype@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-1.3.1.tgz"
-
 domelementtype@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.0.1.tgz"
@@ -8347,12 +8257,6 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
-domhandler@^2.3.0:
-  version "2.4.2"
-  resolved "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz"
-  dependencies:
-    domelementtype "1"
-
 domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   version "4.3.1"
   resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.3.1.tgz#8d792033416f59d68bc03a5aa7b018c1ca89279c"
@@ -8360,20 +8264,6 @@ domhandler@^4.0.0, domhandler@^4.2.0, domhandler@^4.3.1:
   dependencies:
     domelementtype "^2.2.0"
 
-domutils@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.npmjs.org/domutils/-/domutils-1.5.1.tgz"
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-domutils@^1.5.1:
-  version "1.7.0"
-  resolved "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz"
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
 domutils@^2.5.2, domutils@^2.8.0:
   version "2.8.0"
   resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
@@ -8383,13 +8273,6 @@ domutils@^2.5.2, domutils@^2.8.0:
     domelementtype "^2.2.0"
     domhandler "^4.2.0"
 
-dot-case@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/dot-case/-/dot-case-3.0.3.tgz"
-  dependencies:
-    no-case "^3.0.3"
-    tslib "^1.10.0"
-
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/dot-case/-/dot-case-3.0.4.tgz#9b2b670d00a431667a8a75ba29cd1b98809ce751"
@@ -8426,7 +8309,7 @@ duplexer3@^0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/duplexer3/-/duplexer3-0.1.4.tgz"
 
-duplexer@^0.1.1:
+duplexer@^0.1.1, duplexer@^0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
 
@@ -8462,10 +8345,6 @@ ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/ee-first/-/ee-first-1.1.1.tgz"
 
-ejs@^2.6.1:
-  version "2.7.1"
-  resolved "https://registry.npmjs.org/ejs/-/ejs-2.7.1.tgz"
-
 ejs@^3.1.7:
   version "3.1.8"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.8.tgz#758d32910c78047585c7ef1f92f9ee041c1c190b"
@@ -8514,10 +8393,6 @@ emittery@^0.8.1:
   resolved "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz"
   integrity sha512-uDfvUjVrfGJJhymx/kz6prltenw1u7WrCg1oa94zYY8xxVpLLUu045LAT0dhDZdXG58/EpPL/5kA180fQ/qudg==
 
-emoji-regex@^7.0.1:
-  version "7.0.3"
-  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-7.0.3.tgz"
-
 emoji-regex@^8.0.0:
   version "8.0.0"
   resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-8.0.0.tgz"
@@ -8557,7 +8432,7 @@ enhanced-resolve@^4.0.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^4.1.1, enhanced-resolve@^4.3.0:
+enhanced-resolve@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-4.3.0.tgz"
   dependencies:
@@ -8565,7 +8440,7 @@ enhanced-resolve@^4.1.1, enhanced-resolve@^4.3.0:
     memory-fs "^0.5.0"
     tapable "^1.0.0"
 
-enhanced-resolve@^5.9.3:
+enhanced-resolve@^5.10.0, enhanced-resolve@^5.9.3:
   version "5.12.0"
   resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.12.0.tgz#300e1c90228f5b570c4d35babf263f6da7155634"
   integrity sha512-QHTXI/sZQmko1cbDoNAa3mJ5qhWUUNAq3vR0/YiD379fWQrcfuoX1+HW2S0MTt7XmoPLapdaDKUtelUSPic7hQ==
@@ -8579,10 +8454,6 @@ enquirer@^2.3.6, enquirer@~2.3.6:
   dependencies:
     ansi-colors "^4.1.1"
 
-entities@^1.1.1:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/entities/-/entities-1.1.2.tgz"
-
 entities@^2.0.0:
   version "2.0.3"
   resolved "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz"
@@ -8628,7 +8499,7 @@ error-stack-parser@^2.0.6:
   dependencies:
     stackframe "^1.3.4"
 
-es-abstract@^1.17.0, es-abstract@^1.17.0-next.1:
+es-abstract@^1.17.0:
   version "1.17.4"
   resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.4.tgz"
   dependencies:
@@ -8644,7 +8515,7 @@ es-abstract@^1.17.0, es-abstract@^1.17.0-next.1:
     string.prototype.trimleft "^2.1.1"
     string.prototype.trimright "^2.1.1"
 
-es-abstract@^1.17.5, es-abstract@^1.5.1:
+es-abstract@^1.17.5:
   version "1.17.6"
   resolved "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.6.tgz"
   dependencies:
@@ -9164,12 +9035,6 @@ events@^3.2.0:
   resolved "https://registry.yarnpkg.com/events/-/events-3.3.0.tgz#31a95ad0a924e2d2c419a813aeb2c4e878ea7400"
   integrity sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==
 
-eventsource@^1.0.7:
-  version "1.0.7"
-  resolved "https://registry.npmjs.org/eventsource/-/eventsource-1.0.7.tgz"
-  dependencies:
-    original "^1.0.0"
-
 evp_bytestokey@^1.0.0, evp_bytestokey@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/evp_bytestokey/-/evp_bytestokey-1.0.3.tgz"
@@ -9204,18 +9069,6 @@ execa@^0.7.0:
     signal-exit "^3.0.0"
     strip-eof "^1.0.0"
 
-execa@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/execa/-/execa-1.0.0.tgz"
-  dependencies:
-    cross-spawn "^6.0.0"
-    get-stream "^4.0.0"
-    is-stream "^1.1.0"
-    npm-run-path "^2.0.0"
-    p-finally "^1.0.0"
-    signal-exit "^3.0.0"
-    strip-eof "^1.0.0"
-
 execa@^5.0.0:
   version "5.1.1"
   resolved "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz"
@@ -9333,41 +9186,6 @@ express@4.18.1:
     utils-merge "1.0.1"
     vary "~1.1.2"
 
-express@^4.16.3, express@^4.17.1:
-  version "4.17.1"
-  resolved "https://registry.npmjs.org/express/-/express-4.17.1.tgz"
-  dependencies:
-    accepts "~1.3.7"
-    array-flatten "1.1.1"
-    body-parser "1.19.0"
-    content-disposition "0.5.3"
-    content-type "~1.0.4"
-    cookie "0.4.0"
-    cookie-signature "1.0.6"
-    debug "2.6.9"
-    depd "~1.1.2"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    finalhandler "~1.1.2"
-    fresh "0.5.2"
-    merge-descriptors "1.0.1"
-    methods "~1.1.2"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    path-to-regexp "0.1.7"
-    proxy-addr "~2.0.5"
-    qs "6.7.0"
-    range-parser "~1.2.1"
-    safe-buffer "5.1.2"
-    send "0.17.1"
-    serve-static "1.14.1"
-    setprototypeof "1.1.1"
-    statuses "~1.5.0"
-    type-is "~1.6.18"
-    utils-merge "1.0.1"
-    vary "~1.1.2"
-
 express@^4.17.3:
   version "4.18.2"
   resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
@@ -9527,12 +9345,6 @@ fault@^1.0.1:
   dependencies:
     format "^0.2.0"
 
-faye-websocket@^0.10.0:
-  version "0.10.0"
-  resolved "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.10.0.tgz"
-  dependencies:
-    websocket-driver ">=0.5.1"
-
 faye-websocket@^0.11.3:
   version "0.11.4"
   resolved "https://registry.yarnpkg.com/faye-websocket/-/faye-websocket-0.11.4.tgz#7f0d9275cfdd86a1c963dc8b65fcc451edcbb1da"
@@ -9540,12 +9352,6 @@ faye-websocket@^0.11.3:
   dependencies:
     websocket-driver ">=0.5.1"
 
-faye-websocket@~0.11.1:
-  version "0.11.3"
-  resolved "https://registry.npmjs.org/faye-websocket/-/faye-websocket-0.11.3.tgz"
-  dependencies:
-    websocket-driver ">=0.5.1"
-
 fb-watchman@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/fb-watchman/-/fb-watchman-2.0.1.tgz"
@@ -9581,7 +9387,15 @@ file-entry-cache@^6.0.1:
   dependencies:
     flat-cache "^3.0.4"
 
-file-loader@6.1.0, file-loader@^6.1.0:
+file-loader@6.2.0:
+  version "6.2.0"
+  resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-6.2.0.tgz#baef7cf8e1840df325e4390b4484879480eebe4d"
+  integrity sha512-qo3glqyTa61Ytg4u73GultjHGjdRyig3tG6lPtyX/jOEJvHif9uB0/OCI2Kif6ctF3caQTW2G5gym21oAsI4pw==
+  dependencies:
+    loader-utils "^2.0.0"
+    schema-utils "^3.0.0"
+
+file-loader@^6.1.0:
   version "6.1.0"
   resolved "https://registry.npmjs.org/file-loader/-/file-loader-6.1.0.tgz"
   dependencies:
@@ -9646,18 +9460,6 @@ finalhandler@1.2.0:
     statuses "2.0.1"
     unpipe "~1.0.0"
 
-finalhandler@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/finalhandler/-/finalhandler-1.1.2.tgz"
-  dependencies:
-    debug "2.6.9"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    on-finished "~2.3.0"
-    parseurl "~1.3.3"
-    statuses "~1.5.0"
-    unpipe "~1.0.0"
-
 find-cache-dir@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-2.1.0.tgz"
@@ -9674,6 +9476,15 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-cache-dir@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b"
+  integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==
+  dependencies:
+    commondir "^1.0.1"
+    make-dir "^3.0.2"
+    pkg-dir "^4.1.0"
+
 find-file-up@^0.1.2:
   version "0.1.3"
   resolved "https://registry.npmjs.org/find-file-up/-/find-file-up-0.1.3.tgz"
@@ -9727,15 +9538,6 @@ find-versions@^4.0.0:
   dependencies:
     semver-regex "^3.1.2"
 
-findup-sync@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/findup-sync/-/findup-sync-3.0.0.tgz"
-  dependencies:
-    detect-file "^1.0.0"
-    is-glob "^4.0.0"
-    micromatch "^3.0.4"
-    resolve-dir "^1.0.1"
-
 findup-sync@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/findup-sync/-/findup-sync-5.0.0.tgz#54380ad965a7edca00cc8f63113559aadc541bd2"
@@ -9891,10 +9693,6 @@ forwarded@0.2.0:
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.2.0.tgz#2269936428aad4c15c7ebe9779a84bf0b2a81811"
   integrity sha512-buRG0fpBtRHSTCOASe6hD258tEubFoRLb4ZNA6NxMVHNw2gOcwHo9wyablzMzOA5z9xA9L1KNjk/Nt6MT9aYow==
 
-forwarded@~0.1.2:
-  version "0.1.2"
-  resolved "https://registry.npmjs.org/forwarded/-/forwarded-0.1.2.tgz"
-
 fragment-cache@^0.2.1:
   version "0.2.1"
   resolved "https://registry.npmjs.org/fragment-cache/-/fragment-cache-0.2.1.tgz"
@@ -10074,7 +9872,7 @@ gensync@^1.0.0-beta.2:
   resolved "https://registry.npmjs.org/gensync/-/gensync-1.0.0-beta.2.tgz"
   integrity sha512-3hN7NaskYvMDLQY55gnW3NQ+mesEAepTqlg+VEbj7zzqEMBVNhzcGYYeqFo/TlYz6eQiFcp1HcsCZO+nGgS8zg==
 
-get-caller-file@^2.0.1, get-caller-file@^2.0.5:
+get-caller-file@^2.0.5:
   version "2.0.5"
   resolved "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz"
 
@@ -10119,12 +9917,6 @@ get-stream@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/get-stream/-/get-stream-3.0.0.tgz"
 
-get-stream@^4.0.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/get-stream/-/get-stream-4.1.0.tgz"
-  dependencies:
-    pump "^3.0.0"
-
 get-stream@^5.0.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz"
@@ -10264,7 +10056,7 @@ glob-parent@^5.1.2, glob-parent@~5.1.2:
   dependencies:
     is-glob "^4.0.1"
 
-glob-parent@^6.0.2:
+glob-parent@^6.0.1, glob-parent@^6.0.2:
   version "6.0.2"
   resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-6.0.2.tgz#6d237d99083950c79290f24c7642a3de9a28f9e3"
   integrity sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==
@@ -10371,12 +10163,6 @@ global-modules@^1.0.0:
     is-windows "^1.0.1"
     resolve-dir "^1.0.0"
 
-global-modules@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/global-modules/-/global-modules-2.0.0.tgz"
-  dependencies:
-    global-prefix "^3.0.0"
-
 global-prefix@^0.1.4:
   version "0.1.5"
   resolved "https://registry.npmjs.org/global-prefix/-/global-prefix-0.1.5.tgz"
@@ -10511,16 +10297,12 @@ grapheme-splitter@^1.0.4:
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
   integrity sha512-bzh50DW9kTPM00T8y4o8vQg89Di9oLJVLW/KaOGIXJWP/iqCN6WKYkbNOF04vFLJhwcpYUh9ydh/+5vpOqV4YQ==
 
-gud@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/gud/-/gud-1.0.0.tgz"
-
-gzip-size@^5.0.0:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/gzip-size/-/gzip-size-5.1.1.tgz"
+gzip-size@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/gzip-size/-/gzip-size-6.0.0.tgz#065367fd50c239c0671cbcbad5be3e2eeb10e462"
+  integrity sha512-ax7ZYomf6jqPTQ4+XCpUGyXKHk5WweS+e05MBO4/y3WJ5RkmPXNKvX+bx1behVILVwr6JSQvZAku021CHPXG3Q==
   dependencies:
-    duplexer "^0.1.1"
-    pify "^4.0.1"
+    duplexer "^0.1.2"
 
 handle-thing@^2.0.0:
   version "2.0.0"
@@ -10727,10 +10509,6 @@ homedir-polyfill@^1.0.0, homedir-polyfill@^1.0.1:
   dependencies:
     parse-passwd "^1.0.0"
 
-hoopy@^0.1.4:
-  version "0.1.4"
-  resolved "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz"
-
 hosted-git-info@^2.1.4, hosted-git-info@^2.4.2:
   version "2.8.8"
   resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.8.tgz"
@@ -10778,10 +10556,6 @@ html-encoding-sniffer@^2.0.1:
   dependencies:
     whatwg-encoding "^1.0.5"
 
-html-entities@^1.3.1:
-  version "1.3.1"
-  resolved "https://registry.npmjs.org/html-entities/-/html-entities-1.3.1.tgz"
-
 html-entities@^2.1.0, html-entities@^2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
@@ -10796,18 +10570,6 @@ html-formatter@0.1.9:
   resolved "https://registry.yarnpkg.com/html-formatter/-/html-formatter-0.1.9.tgz#58e8859712f3d4d9e7094027517c4c46f4c336b8"
   integrity sha512-ao56oQHElDyKjnRara+Tw9iT6Ieuu6MRiBvCOCn2yhKtdT2Z9ViAyBal2j83bAf8sc6qAzGU0gkNVlFzkVAFHQ==
 
-html-minifier-terser@^5.0.1:
-  version "5.1.1"
-  resolved "https://registry.npmjs.org/html-minifier-terser/-/html-minifier-terser-5.1.1.tgz"
-  dependencies:
-    camel-case "^4.1.1"
-    clean-css "^4.2.3"
-    commander "^4.1.1"
-    he "^1.2.0"
-    param-case "^3.0.3"
-    relateurl "^0.2.7"
-    terser "^4.6.3"
-
 html-minifier-terser@^6.0.2:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/html-minifier-terser/-/html-minifier-terser-6.1.0.tgz#bfc818934cc07918f6b3669f5774ecdfd48f32ab"
@@ -10821,21 +10583,7 @@ html-minifier-terser@^6.0.2:
     relateurl "^0.2.7"
     terser "^5.10.0"
 
-html-webpack-plugin@4.4.1:
-  version "4.4.1"
-  resolved "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.4.1.tgz"
-  dependencies:
-    "@types/html-minifier-terser" "^5.0.0"
-    "@types/tapable" "^1.0.5"
-    "@types/webpack" "^4.41.8"
-    html-minifier-terser "^5.0.1"
-    loader-utils "^1.2.3"
-    lodash "^4.17.15"
-    pretty-error "^2.1.1"
-    tapable "^1.1.3"
-    util.promisify "1.0.0"
-
-html-webpack-plugin@^5.5.0:
+html-webpack-plugin@5.5.0, html-webpack-plugin@^5.5.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/html-webpack-plugin/-/html-webpack-plugin-5.5.0.tgz#c3911936f57681c1f9f4d8b68c158cd9dfe52f50"
   integrity sha512-sy88PC2cRTVxvETRgUHFrL4No3UxvcH8G1NepGhqaTT+GXN2kTamqasot0inS5hXeg1cMbFDt27zzo9p35lZVw==
@@ -10846,17 +10594,6 @@ html-webpack-plugin@^5.5.0:
     pretty-error "^4.0.0"
     tapable "^2.0.0"
 
-htmlparser2@^3.3.0:
-  version "3.10.1"
-  resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz"
-  dependencies:
-    domelementtype "^1.3.1"
-    domhandler "^2.3.0"
-    domutils "^1.5.1"
-    entities "^1.1.1"
-    inherits "^2.0.1"
-    readable-stream "^3.1.1"
-
 htmlparser2@^6.1.0:
   version "6.1.0"
   resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
@@ -10888,16 +10625,6 @@ http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.npmjs.org/http-deceiver/-/http-deceiver-1.2.7.tgz"
 
-http-errors@1.7.2:
-  version "1.7.2"
-  resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz"
-  dependencies:
-    depd "~1.1.2"
-    inherits "2.0.3"
-    setprototypeof "1.1.1"
-    statuses ">= 1.5.0 < 2"
-    toidentifier "1.0.0"
-
 http-errors@1.7.3, http-errors@~1.7.2:
   version "1.7.3"
   resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz"
@@ -10968,15 +10695,6 @@ http-proxy-agent@^5.0.0:
     agent-base "6"
     debug "4"
 
-http-proxy-middleware@0.19.1:
-  version "0.19.1"
-  resolved "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-0.19.1.tgz"
-  dependencies:
-    http-proxy "^1.17.0"
-    is-glob "^4.0.0"
-    lodash "^4.17.11"
-    micromatch "^3.1.10"
-
 http-proxy-middleware@^2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
@@ -10988,7 +10706,7 @@ http-proxy-middleware@^2.0.3:
     is-plain-obj "^3.0.0"
     micromatch "^4.0.2"
 
-http-proxy@^1.17.0, http-proxy@^1.18.1:
+http-proxy@^1.18.1:
   version "1.18.1"
   resolved "https://registry.npmjs.org/http-proxy/-/http-proxy-1.18.1.tgz"
   dependencies:
@@ -11089,6 +10807,11 @@ icss-utils@^4.0.0, icss-utils@^4.1.1:
   dependencies:
     postcss "^7.0.14"
 
+icss-utils@^5.0.0, icss-utils@^5.1.0:
+  version "5.1.0"
+  resolved "https://registry.yarnpkg.com/icss-utils/-/icss-utils-5.1.0.tgz#c6be6858abd013d768e98366ae47e25d5887b1ae"
+  integrity sha512-soFhflCVWLfRNOPU3iv5Z9VUdT44xFRbzjLsEzSr5AQmgqPMTHdU3PMT1Cf1ssx8fLNJDA1juftYl+PUcv3MqA==
+
 ieee754@^1.1.4:
   version "1.1.13"
   resolved "https://registry.npmjs.org/ieee754/-/ieee754-1.1.13.tgz"
@@ -11145,13 +10868,6 @@ import-lazy@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/import-lazy/-/import-lazy-2.1.0.tgz"
 
-import-local@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/import-local/-/import-local-2.0.0.tgz"
-  dependencies:
-    pkg-dir "^3.0.0"
-    resolve-cwd "^2.0.0"
-
 import-local@^3.0.2:
   version "3.0.3"
   resolved "https://registry.npmjs.org/import-local/-/import-local-3.0.3.tgz"
@@ -11265,13 +10981,6 @@ inquirer@^8.2.2, inquirer@^8.2.4:
     through "^2.3.6"
     wrap-ansi "^7.0.0"
 
-internal-ip@^4.3.0:
-  version "4.3.0"
-  resolved "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz"
-  dependencies:
-    default-gateway "^4.2.0"
-    ipaddr.js "^1.9.0"
-
 internal-slot@^1.0.3, internal-slot@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.4.tgz#8551e7baf74a7a6ba5f749cfb16aa60722f0d6f3"
@@ -11286,7 +10995,7 @@ internal-slot@^1.0.3, internal-slot@^1.0.4:
   resolved "https://registry.yarnpkg.com/internmap/-/internmap-2.0.3.tgz#6685f23755e43c524e251d29cbc97248e3061009"
   integrity sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==
 
-interpret@^1.0.0, interpret@^1.4.0:
+interpret@^1.0.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/interpret/-/interpret-1.4.0.tgz"
 
@@ -11295,6 +11004,11 @@ interpret@^2.2.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-2.2.0.tgz#1a78a0b5965c40a5416d007ad6f50ad27c417df9"
   integrity sha512-Ju0Bz/cEia55xDwUWEa8+olFpCiQoypjnQySseKtmjNrnps3P+xfpUmGr90T7yjlVJmOtybRvPXhKMbHr+fWnw==
 
+interpret@^3.1.1:
+  version "3.1.1"
+  resolved "https://registry.yarnpkg.com/interpret/-/interpret-3.1.1.tgz#5be0ceed67ca79c6c4bc5cf0d7ee843dcea110c4"
+  integrity sha512-6xwYfHbajpoF0xLW+iwLkhwgvLoZDfjYfoFNu8ftMoXINzwuymNLd9u/KmwtdT2GbR+/Cz66otEGEVVUHX9QLQ==
+
 invariant@^2.2.3:
   version "2.2.4"
   resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz"
@@ -11305,7 +11019,7 @@ ip-regex@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/ip-regex/-/ip-regex-2.1.0.tgz"
 
-ip@^1.1.0, ip@^1.1.4, ip@^1.1.5:
+ip@^1.1.4:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/ip/-/ip-1.1.5.tgz#bdded70114290828c0a039e72ef25f5aaec4354a"
   integrity sha512-rBtCAQAJm8A110nbwn6YdveUnuZH3WrC36IwkRXxDnq53JvXA2NVQvB7IHyKomxK1MJ4VDNw3UtFDdXQ+AvLYA==
@@ -11315,7 +11029,7 @@ ip@^2.0.0:
   resolved "https://registry.yarnpkg.com/ip/-/ip-2.0.0.tgz#4cf4ab182fee2314c75ede1276f8c80b479936da"
   integrity sha512-WKa+XuLG1A1R0UWhl2+1XQSi+fZWMsYKffMZTTYsiZaUD8k2yDAj5atimTUD2TZkyCkNEeYE5NhFZmupOGtjYQ==
 
-ipaddr.js@1.9.1, ipaddr.js@^1.9.0:
+ipaddr.js@1.9.1:
   version "1.9.1"
   resolved "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz"
 
@@ -11324,10 +11038,6 @@ ipaddr.js@^2.0.1:
   resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
   integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
 
-is-absolute-url@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/is-absolute-url/-/is-absolute-url-3.0.3.tgz"
-
 is-absolute@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/is-absolute/-/is-absolute-1.0.0.tgz"
@@ -11362,10 +11072,6 @@ is-alphanumerical@^1.0.0:
     is-alphabetical "^1.0.0"
     is-decimal "^1.0.0"
 
-is-arguments@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.npmjs.org/is-arguments/-/is-arguments-1.0.4.tgz"
-
 is-arguments@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/is-arguments/-/is-arguments-1.1.1.tgz#15b3f88fda01f2a97fec84ca761a560f123efa9b"
@@ -11738,7 +11444,7 @@ is-reference@1.2.1:
   dependencies:
     "@types/estree" "*"
 
-is-regex@^1.0.4, is-regex@^1.0.5, is-regex@^1.1.0, is-regex@^1.1.1:
+is-regex@^1.0.5, is-regex@^1.1.0, is-regex@^1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/is-regex/-/is-regex-1.1.1.tgz"
   dependencies:
@@ -12596,10 +12302,6 @@ json-stringify-safe@5, json-stringify-safe@^5.0.1, json-stringify-safe@~5.0.1:
   version "5.0.1"
   resolved "https://registry.npmjs.org/json-stringify-safe/-/json-stringify-safe-5.0.1.tgz"
 
-json3@^3.3.2:
-  version "3.3.3"
-  resolved "https://registry.npmjs.org/json3/-/json3-3.3.3.tgz"
-
 json5@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/json5/-/json5-1.0.1.tgz"
@@ -12707,10 +12409,6 @@ keygrip@~1.1.0:
   dependencies:
     tsscmp "1.0.6"
 
-killable@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz"
-
 kind-of@^3.0.2, kind-of@^3.0.3, kind-of@^3.2.0:
   version "3.2.2"
   resolved "https://registry.npmjs.org/kind-of/-/kind-of-3.2.2.tgz"
@@ -12735,10 +12433,10 @@ kleur@^3.0.3:
   version "3.0.3"
   resolved "https://registry.npmjs.org/kleur/-/kleur-3.0.3.tgz"
 
-klona@^2.0.4:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.5.tgz#d166574d90076395d9963aa7a928fabb8d76afbc"
-  integrity sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ==
+klona@^2.0.6:
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/klona/-/klona-2.0.6.tgz#85bffbf819c03b2f53270412420a4555ef882e22"
+  integrity sha512-dhG34DXATL5hSxJbIexCft8FChFXtmskoZYnoPWjXQuebWYCNkVeV3KkGegCK9CP1oswI/vQibS2GY7Em/sJJA==
 
 koa-bodyparser@^4.2.0:
   version "4.3.0"
@@ -12891,6 +12589,14 @@ latest-version@^3.0.0:
   dependencies:
     package-json "^4.0.0"
 
+launch-editor@^2.6.0:
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.6.0.tgz#4c0c1a6ac126c572bd9ff9a30da1d2cae66defd7"
+  integrity sha512-JpDCcQnyAAzZZaZ7vEiSqL690w7dAEyLao+KC96zBplnYbJS7TYNjvM3M7y3dGz+v7aIsJk3hllWuc0kWAjyRQ==
+  dependencies:
+    picocolors "^1.0.0"
+    shell-quote "^1.7.3"
+
 lazy-ass@^1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/lazy-ass/-/lazy-ass-1.6.0.tgz"
@@ -13077,7 +12783,7 @@ loader-runner@^4.2.0:
   resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
   integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
-loader-utils@^1.1.0, loader-utils@^1.2.3, loader-utils@^1.4.0:
+loader-utils@^1.1.0, loader-utils@^1.2.3:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.0.tgz"
   dependencies:
@@ -13093,6 +12799,20 @@ loader-utils@^2.0.0:
     emojis-list "^3.0.0"
     json5 "^2.1.2"
 
+loader-utils@^2.0.2:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-2.0.4.tgz#8b5cb38b5c34a9a018ee1fc0e6a066d1dfcc528c"
+  integrity sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==
+  dependencies:
+    big.js "^5.2.2"
+    emojis-list "^3.0.0"
+    json5 "^2.1.2"
+
+loader-utils@^3.2.1:
+  version "3.2.1"
+  resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-3.2.1.tgz#4fb104b599daafd82ef3e1a41fb9265f87e1f576"
+  integrity sha512-ZvFw1KWS3GVyYBYb7qkmRM/WwL2TQQBxgCK62rlvm4WpVQ23Nb4tYjApUlfjrEGvOs7KHEsmyUn75OHZrJMWPw==
+
 local-web-server@^2.6.1:
   version "2.6.1"
   resolved "https://registry.npmjs.org/local-web-server/-/local-web-server-2.6.1.tgz"
@@ -13188,7 +12908,7 @@ lodash.throttle@^4.1.1:
   version "4.1.1"
   resolved "https://registry.npmjs.org/lodash.throttle/-/lodash.throttle-4.1.1.tgz"
 
-lodash@^4.17.11, lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.14, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.5:
+lodash@^4.17.12, lodash@^4.17.13, lodash@^4.17.15, lodash@^4.17.19, lodash@^4.17.5:
   version "4.17.20"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.20.tgz"
 
@@ -13234,10 +12954,6 @@ log-update@^4.0.0:
     slice-ansi "^4.0.0"
     wrap-ansi "^6.2.0"
 
-loglevel@^1.6.8:
-  version "1.7.0"
-  resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.7.0.tgz"
-
 longest-streak@^2.0.1:
   version "2.0.4"
   resolved "https://registry.npmjs.org/longest-streak/-/longest-streak-2.0.4.tgz"
@@ -13252,12 +12968,6 @@ lower-case@^1.1.1:
   version "1.1.4"
   resolved "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz"
 
-lower-case@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.npmjs.org/lower-case/-/lower-case-2.0.1.tgz"
-  dependencies:
-    tslib "^1.10.0"
-
 lower-case@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/lower-case/-/lower-case-2.0.2.tgz#6fa237c63dbdc4a82ca0fd882e4722dc5e634e28"
@@ -13635,7 +13345,7 @@ methods@~1.1.0, methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz"
 
-micromatch@^3.0.4, micromatch@^3.1.10, micromatch@^3.1.4:
+micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
   resolved "https://registry.npmjs.org/micromatch/-/micromatch-3.1.10.tgz"
   dependencies:
@@ -13709,10 +13419,6 @@ mime@1.6.0:
   version "1.6.0"
   resolved "https://registry.npmjs.org/mime/-/mime-1.6.0.tgz"
 
-mime@^2.4.4:
-  version "2.4.6"
-  resolved "https://registry.npmjs.org/mime/-/mime-2.4.6.tgz"
-
 mimer@^0.3.2:
   version "0.3.2"
   resolved "https://registry.npmjs.org/mimer/-/mimer-0.3.2.tgz"
@@ -13754,14 +13460,12 @@ mini-create-react-context@^0.4.0:
     "@babel/runtime" "^7.12.1"
     tiny-warning "^1.0.3"
 
-mini-css-extract-plugin@1.3.9:
-  version "1.3.9"
-  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-1.3.9.tgz#47a32132b0fd97a119acd530e8421e8f6ab16d5e"
-  integrity sha512-Ac4s+xhVbqlyhXS5J/Vh/QXUz3ycXlCqoCPpg0vdfhsIBH9eg/It/9L1r1XhSCH737M1lqcWnMuWL13zcygn5A==
+mini-css-extract-plugin@2.7.5:
+  version "2.7.5"
+  resolved "https://registry.yarnpkg.com/mini-css-extract-plugin/-/mini-css-extract-plugin-2.7.5.tgz#afbb344977659ec0f1f6e050c7aea456b121cfc5"
+  integrity sha512-9HaR++0mlgom81s95vvNjxkg52n2b5s//3ZTI1EtzFb98awsLSivs2LMsVqnQ3ay0PVhqWcGNyDaTE961FOcjQ==
   dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-    webpack-sources "^1.1.0"
+    schema-utils "^4.0.0"
 
 mini-css-extract-plugin@^0.11.1:
   version "0.11.2"
@@ -13975,7 +13679,7 @@ mkdirp-infer-owner@^2.0.0:
     infer-owner "^1.0.4"
     mkdirp "^1.0.3"
 
-"mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@^0.5.3, mkdirp@^0.5.5:
+"mkdirp@>=0.5 0", mkdirp@^0.5.1, mkdirp@^0.5.3:
   version "0.5.5"
   resolved "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz"
   dependencies:
@@ -13989,15 +13693,23 @@ modify-values@^1.0.0:
   version "1.0.1"
   resolved "https://registry.npmjs.org/modify-values/-/modify-values-1.0.1.tgz"
 
-monaco-editor-webpack-plugin@2.1.0, monaco-editor-webpack-plugin@^2.1.0:
+monaco-editor-webpack-plugin@7.0.1:
+  version "7.0.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-7.0.1.tgz#ba19c60aba990184e36ad8722b1ed6a564527c7c"
+  integrity sha512-M8qIqizltrPlIbrb73cZdTWfU9sIsUVFvAZkL3KGjAHmVWEJ0hZKa/uad14JuOckc0GwnCaoGHvMoYtJjVyCzw==
+  dependencies:
+    loader-utils "^2.0.2"
+
+monaco-editor-webpack-plugin@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/monaco-editor-webpack-plugin/-/monaco-editor-webpack-plugin-2.1.0.tgz"
   dependencies:
     loader-utils "^2.0.0"
 
-monaco-editor@0.21.3:
-  version "0.21.3"
-  resolved "https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.21.3.tgz"
+monaco-editor@0.34.1:
+  version "0.34.1"
+  resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.34.1.tgz#1b75c4ad6bc4c1f9da656d740d98e0b850a22f87"
+  integrity sha512-FKc80TyiMaruhJKKPz5SpJPIjL+dflGvz4CpuThaPMc94AyN7SeC9HQ8hrvaxX7EyHdJcUY5i4D0gNyJj1vSZQ==
 
 moniker@0.1.2:
   version "0.1.2"
@@ -14024,14 +13736,15 @@ move-concurrently@^1.0.1:
     rimraf "^2.5.4"
     run-queue "^1.0.3"
 
+mrmime@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/mrmime/-/mrmime-1.0.1.tgz#5f90c825fad4bdd41dc914eff5d1a8cfdaf24f27"
+  integrity sha512-hzzEagAgDyoU1Q6yg5uI+AorQgdvMCur3FcKf7NhMKWsaYg+RnbTyHRa/9IlLF9rf455MOCtcqqrQQ83pPP7Uw==
+
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz"
 
-ms@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/ms/-/ms-2.1.1.tgz"
-
 ms@2.1.2, ms@^2.0.0, ms@^2.1.1:
   version "2.1.2"
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
@@ -14041,17 +13754,6 @@ ms@2.1.3:
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.1.3.tgz#574c8138ce1d2b5861f0b44579dbadd60c6615b2"
   integrity sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==
 
-multicast-dns-service-types@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/multicast-dns-service-types/-/multicast-dns-service-types-1.1.0.tgz"
-
-multicast-dns@^6.0.1:
-  version "6.2.3"
-  resolved "https://registry.npmjs.org/multicast-dns/-/multicast-dns-6.2.3.tgz"
-  dependencies:
-    dns-packet "^1.3.1"
-    thunky "^1.0.2"
-
 multicast-dns@^7.2.5:
   version "7.2.5"
   resolved "https://registry.yarnpkg.com/multicast-dns/-/multicast-dns-7.2.5.tgz#77eb46057f4d7adbd16d9290fa7299f6fa64cced"
@@ -14100,6 +13802,11 @@ nanoid@^2.1.0:
   version "2.1.11"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-2.1.11.tgz"
 
+nanoid@^3.3.4:
+  version "3.3.6"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.6.tgz#443380c856d6e9f9824267d960b4236ad583ea4c"
+  integrity sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==
+
 nanomatch@^1.2.9:
   version "1.2.13"
   resolved "https://registry.npmjs.org/nanomatch/-/nanomatch-1.2.13.tgz"
@@ -14146,23 +13853,12 @@ netrc@0.1.4:
   version "0.1.4"
   resolved "https://registry.npmjs.org/netrc/-/netrc-0.1.4.tgz"
 
-nice-try@^1.0.4:
-  version "1.0.5"
-  resolved "https://registry.npmjs.org/nice-try/-/nice-try-1.0.5.tgz"
-
 no-case@^2.2.0:
   version "2.3.2"
   resolved "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz"
   dependencies:
     lower-case "^1.1.1"
 
-no-case@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/no-case/-/no-case-3.0.3.tgz"
-  dependencies:
-    lower-case "^2.0.1"
-    tslib "^1.10.0"
-
 no-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/no-case/-/no-case-3.0.4.tgz#d361fd5c9800f558551a8369fc0dcd4662b6124d"
@@ -14216,10 +13912,6 @@ node-fetch@^2.6.1:
   dependencies:
     whatwg-url "^5.0.0"
 
-node-forge@0.9.0:
-  version "0.9.0"
-  resolved "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz"
-
 node-forge@^1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
@@ -14532,20 +14224,6 @@ nth-check@^2.0.1:
   dependencies:
     boolbase "^1.0.0"
 
-nth-check@~1.0.1:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/nth-check/-/nth-check-1.0.2.tgz"
-  dependencies:
-    boolbase "~1.0.0"
-
-null-loader@4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/null-loader/-/null-loader-4.0.0.tgz#8e491b253cd87341d82c0e84b66980d806dfbd04"
-  integrity sha512-vSoBF6M08/RHwc6r0gvB/xBJBtmbvvEkf6+IiadUCoNYchjxE8lwzCGFg0Qp2D25xPiJxUBh2iNWzlzGMILp7Q==
-  dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^2.6.5"
-
 num2fraction@^1.2.2:
   version "1.2.2"
   resolved "https://registry.npmjs.org/num2fraction/-/num2fraction-1.2.2.tgz"
@@ -14625,13 +14303,6 @@ object-inspect@^1.9.0:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.2.tgz#c0641f26394532f28ab8d796ab954e43c009a8ea"
   integrity sha512-z+cPxW0QGUp0mcqcsgQyLVRDoXFQbXOwBaqyF7VIgI4TWNQsDHrBpUQslRmIfAoYWdYzs6UlKJtB2XJpTaNSpQ==
 
-object-is@^1.0.1, object-is@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.npmjs.org/object-is/-/object-is-1.1.2.tgz"
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.5"
-
 object-is@^1.1.5:
   version "1.1.5"
   resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.5.tgz#b9deeaa5fc7f1846a0faecdceec138e5778f53ac"
@@ -14705,13 +14376,6 @@ object.fromentries@^2.0.6:
     define-properties "^1.1.4"
     es-abstract "^1.20.4"
 
-object.getownpropertydescriptors@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz"
-  dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.5.1"
-
 object.hasown@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/object.hasown/-/object.hasown-1.1.2.tgz#f919e21fad4eb38a57bc6345b3afd496515c3f92"
@@ -14814,11 +14478,12 @@ opencollective-postinstall@^2.0.2:
   resolved "https://registry.yarnpkg.com/opencollective-postinstall/-/opencollective-postinstall-2.0.3.tgz#7a0fff978f6dbfa4d006238fbac98ed4198c3259"
   integrity sha512-8AV/sCtuzUeTo8gQK5qDZzARrulB3egtLzFgteqB2tcT4Mw7B8Kt7JcDHmltjz6FOAHsvTevk70gZEbhM4ZS9Q==
 
-opener@^1.5.1:
+opener@^1.5.2:
   version "1.5.2"
-  resolved "https://registry.npmjs.org/opener/-/opener-1.5.2.tgz"
+  resolved "https://registry.yarnpkg.com/opener/-/opener-1.5.2.tgz#5d37e1f35077b9dcac4301372271afdeb2a13598"
+  integrity sha512-ur5UIdyw5Y7yEj9wLzhqXiy6GZ3Mwx0yGI+5sMn2r0N0v3cKJvUmFH5yPP+WXh9e0xfyzyJX95D8l088DNFj7A==
 
-opn@^5.4.0, opn@^5.5.0:
+opn@^5.4.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/opn/-/opn-5.5.0.tgz"
   dependencies:
@@ -14885,12 +14550,6 @@ ora@^6.0.1:
     strip-ansi "^7.0.1"
     wcwidth "^1.0.1"
 
-original@^1.0.0:
-  version "1.0.2"
-  resolved "https://registry.npmjs.org/original/-/original-1.0.2.tgz"
-  dependencies:
-    url-parse "^1.4.3"
-
 os-browserify@^0.3.0:
   version "0.3.0"
   resolved "https://registry.npmjs.org/os-browserify/-/os-browserify-0.3.0.tgz"
@@ -14996,12 +14655,6 @@ p-reduce@^2.0.0, p-reduce@^2.1.0:
   resolved "https://registry.yarnpkg.com/p-reduce/-/p-reduce-2.1.0.tgz#09408da49507c6c274faa31f28df334bc712b64a"
   integrity sha512-2USApvnsutq8uoxZBGbbWM0JIYLiEMJ9RlaN7fAzVNb9OZN0SHjjTTfIcb667XynS5Y1VhwDJVDa72TnPzAYWw==
 
-p-retry@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/p-retry/-/p-retry-3.0.1.tgz"
-  dependencies:
-    retry "^0.12.0"
-
 p-retry@^4.5.0:
   version "4.6.2"
   resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.2.tgz#9baae7184057edd4e17231cee04264106e092a16"
@@ -15106,13 +14759,6 @@ parallel-transform@^1.1.0:
     inherits "^2.0.3"
     readable-stream "^2.1.5"
 
-param-case@^3.0.3:
-  version "3.0.3"
-  resolved "https://registry.npmjs.org/param-case/-/param-case-3.0.3.tgz"
-  dependencies:
-    dot-case "^3.0.3"
-    tslib "^1.10.0"
-
 param-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/param-case/-/param-case-3.0.4.tgz#7d17fe4aa12bde34d4a77d91acfb6219caad01c5"
@@ -15240,13 +14886,6 @@ parseurl@^1.3.2, parseurl@~1.3.2, parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.npmjs.org/parseurl/-/parseurl-1.3.3.tgz"
 
-pascal-case@^3.1.1:
-  version "3.1.1"
-  resolved "https://registry.npmjs.org/pascal-case/-/pascal-case-3.1.1.tgz"
-  dependencies:
-    no-case "^3.0.3"
-    tslib "^1.10.0"
-
 pascal-case@^3.1.2:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/pascal-case/-/pascal-case-3.1.2.tgz#b48e0ef2b98e205e7c1dae747d0b1508237660eb"
@@ -15263,6 +14902,11 @@ path-browserify@0.0.1:
   version "0.0.1"
   resolved "https://registry.npmjs.org/path-browserify/-/path-browserify-0.0.1.tgz"
 
+path-browserify@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/path-browserify/-/path-browserify-1.0.1.tgz#d98454a9c3753d5790860f16f68867b9e46be1fd"
+  integrity sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==
+
 path-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/path-case/-/path-case-3.0.4.tgz#9168645334eb942658375c56f80b4c0cb5f82c6f"
@@ -15291,7 +14935,7 @@ path-is-inside@^1.0.1, path-is-inside@^1.0.2:
   version "1.0.2"
   resolved "https://registry.npmjs.org/path-is-inside/-/path-is-inside-1.0.2.tgz"
 
-path-key@^2.0.0, path-key@^2.0.1:
+path-key@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/path-key/-/path-key-2.0.1.tgz"
 
@@ -15494,28 +15138,18 @@ pn@^1.1.0:
   version "1.1.0"
   resolved "https://registry.npmjs.org/pn/-/pn-1.1.0.tgz"
 
-portfinder@^1.0.26:
-  version "1.0.28"
-  resolved "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz"
-  dependencies:
-    async "^2.6.2"
-    debug "^3.1.1"
-    mkdirp "^0.5.5"
-
 posix-character-classes@^0.1.0:
   version "0.1.1"
   resolved "https://registry.npmjs.org/posix-character-classes/-/posix-character-classes-0.1.1.tgz"
 
-postcss-loader@4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-4.2.0.tgz#f6993ea3e0f46600fb3ee49bbd010448123a7db4"
-  integrity sha512-mqgScxHqbiz1yxbnNcPdKYo/6aVt+XExURmEbQlviFVWogDbM4AJ0A/B+ZBpYsJrTRxKw7HyRazg9x0Q9SWwLA==
+postcss-loader@7.1.0:
+  version "7.1.0"
+  resolved "https://registry.yarnpkg.com/postcss-loader/-/postcss-loader-7.1.0.tgz#3ba0dfddff06043f3eac7690a1d8b432264bb866"
+  integrity sha512-vTD2DJ8vJD0Vr1WzMQkRZWRjcynGh3t7NeoLg+Sb1TeuK7etiZfL/ZwHbaVa3M+Qni7Lj/29voV9IggnIUjlIw==
   dependencies:
-    cosmiconfig "^7.0.0"
-    klona "^2.0.4"
-    loader-utils "^2.0.0"
-    schema-utils "^3.0.0"
-    semver "^7.3.4"
+    cosmiconfig "^8.0.0"
+    klona "^2.0.6"
+    semver "^7.3.8"
 
 postcss-modules-extract-imports@^2.0.0:
   version "2.0.0"
@@ -15523,6 +15157,11 @@ postcss-modules-extract-imports@^2.0.0:
   dependencies:
     postcss "^7.0.5"
 
+postcss-modules-extract-imports@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-3.0.0.tgz#cda1f047c0ae80c97dbe28c3e76a43b88025741d"
+  integrity sha512-bdHleFnP3kZ4NYDhuGlVK+CMrQ/pqUm8bx/oGL93K6gVwiclvX5x0n76fYMKuIGKzlABOy13zsvqjb0f92TEXw==
+
 postcss-modules-local-by-default@^3.0.3:
   version "3.0.3"
   resolved "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz"
@@ -15532,6 +15171,15 @@ postcss-modules-local-by-default@^3.0.3:
     postcss-selector-parser "^6.0.2"
     postcss-value-parser "^4.1.0"
 
+postcss-modules-local-by-default@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-4.0.0.tgz#ebbb54fae1598eecfdf691a02b3ff3b390a5a51c"
+  integrity sha512-sT7ihtmGSF9yhm6ggikHdV0hlziDTX7oFoXtuVWeDd3hHObNkcHRo9V3yg7vCAY7cONyxJC/XXCmmiHHcvX7bQ==
+  dependencies:
+    icss-utils "^5.0.0"
+    postcss-selector-parser "^6.0.2"
+    postcss-value-parser "^4.1.0"
+
 postcss-modules-scope@^2.2.0:
   version "2.2.0"
   resolved "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz"
@@ -15539,6 +15187,13 @@ postcss-modules-scope@^2.2.0:
     postcss "^7.0.6"
     postcss-selector-parser "^6.0.0"
 
+postcss-modules-scope@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-scope/-/postcss-modules-scope-3.0.0.tgz#9ef3151456d3bbfa120ca44898dfca6f2fa01f06"
+  integrity sha512-hncihwFA2yPath8oZ15PZqvWGkWf+XUfQgUGamS4LqoP1anQLOsOJw0vr7J7IwLpoY9fatA2qiGUGmuZL0Iqlg==
+  dependencies:
+    postcss-selector-parser "^6.0.4"
+
 postcss-modules-values@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz"
@@ -15546,6 +15201,13 @@ postcss-modules-values@^3.0.0:
     icss-utils "^4.0.0"
     postcss "^7.0.6"
 
+postcss-modules-values@^4.0.0:
+  version "4.0.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-values/-/postcss-modules-values-4.0.0.tgz#d7c5e7e68c3bb3c9b27cbf48ca0bb3ffb4602c9c"
+  integrity sha512-RDxHkAiEGI78gS2ofyvCsu7iycRv7oqw5xMWn9iMoR0N/7mf9D50ecQqUo5BZ9Zh2vH4bCUR/ktCqbB9m8vJjQ==
+  dependencies:
+    icss-utils "^5.0.0"
+
 postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
   version "6.0.2"
   resolved "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.0.2.tgz"
@@ -15554,10 +15216,23 @@ postcss-selector-parser@^6.0.0, postcss-selector-parser@^6.0.2:
     indexes-of "^1.0.1"
     uniq "^1.0.1"
 
+postcss-selector-parser@^6.0.4:
+  version "6.0.11"
+  resolved "https://registry.yarnpkg.com/postcss-selector-parser/-/postcss-selector-parser-6.0.11.tgz#2e41dc39b7ad74046e1615185185cd0b17d0c8dc"
+  integrity sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==
+  dependencies:
+    cssesc "^3.0.0"
+    util-deprecate "^1.0.2"
+
 postcss-value-parser@^4.1.0:
   version "4.1.0"
   resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz"
 
+postcss-value-parser@^4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.2.0.tgz#723c09920836ba6d3e5af019f92bc0971c02e514"
+  integrity sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==
+
 postcss@7.0.32:
   version "7.0.32"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.32.tgz#4310d6ee347053da3433db2be492883d62cec59d"
@@ -15583,6 +15258,15 @@ postcss@^7.0.5:
     source-map "^0.6.1"
     supports-color "^6.1.0"
 
+postcss@^8.4.19:
+  version "8.4.21"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.21.tgz#c639b719a57efc3187b13a1d765675485f4134f4"
+  integrity sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==
+  dependencies:
+    nanoid "^3.3.4"
+    picocolors "^1.0.0"
+    source-map-js "^1.0.2"
+
 prebuild-install@^7.1.0:
   version "7.1.1"
   resolved "https://registry.yarnpkg.com/prebuild-install/-/prebuild-install-7.1.1.tgz#de97d5b34a70a0c81334fd24641f2a1702352e45"
@@ -15629,13 +15313,6 @@ pretty-bytes@^5.6.0:
   resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.6.0.tgz"
   integrity sha512-FFw039TmrBqFK8ma/7OL3sDz/VytdtJr044/QUJtH0wK9lb9jLq9tJyIxUwtQJHwar2BqtiA4iCWSwo9JLkzFg==
 
-pretty-error@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/pretty-error/-/pretty-error-2.1.1.tgz"
-  dependencies:
-    renderkid "^2.0.1"
-    utila "~0.4"
-
 pretty-error@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/pretty-error/-/pretty-error-4.0.0.tgz#90a703f46dd7234adb46d0f84823e9d1cb8f10d6"
@@ -15764,13 +15441,6 @@ protoduck@^4.0.0:
   dependencies:
     genfun "^4.0.1"
 
-proxy-addr@~2.0.5:
-  version "2.0.6"
-  resolved "https://registry.npmjs.org/proxy-addr/-/proxy-addr-2.0.6.tgz"
-  dependencies:
-    forwarded "~0.1.2"
-    ipaddr.js "1.9.1"
-
 proxy-addr@~2.0.7:
   version "2.0.7"
   resolved "https://registry.yarnpkg.com/proxy-addr/-/proxy-addr-2.0.7.tgz#f19fe69ceab311eeb94b42e70e8c2070f9ba1025"
@@ -15909,10 +15579,6 @@ qs@6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
-qs@6.7.0:
-  version "6.7.0"
-  resolved "https://registry.npmjs.org/qs/-/qs-6.7.0.tgz"
-
 qs@^6.5.2:
   version "6.9.4"
   resolved "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz"
@@ -15936,10 +15602,6 @@ querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.npmjs.org/querystring/-/querystring-0.2.0.tgz"
 
-querystringify@^2.1.1:
-  version "2.2.0"
-  resolved "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz"
-
 quick-lru@^4.0.1:
   version "4.0.1"
   resolved "https://registry.npmjs.org/quick-lru/-/quick-lru-4.0.1.tgz"
@@ -15966,15 +15628,6 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   version "1.2.1"
   resolved "https://registry.npmjs.org/range-parser/-/range-parser-1.2.1.tgz"
 
-raw-body@2.4.0:
-  version "2.4.0"
-  resolved "https://registry.npmjs.org/raw-body/-/raw-body-2.4.0.tgz"
-  dependencies:
-    bytes "3.1.0"
-    http-errors "1.7.2"
-    iconv-lite "0.4.24"
-    unpipe "1.0.0"
-
 raw-body@2.5.1:
   version "2.5.1"
   resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
@@ -16077,13 +15730,6 @@ react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
 
-react-monaco-editor@0.48.0:
-  version "0.48.0"
-  resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.48.0.tgz#f2b547c619f0ba3b49d3c8a0e0168ff9d0aa70dc"
-  integrity sha512-fD3ww76aIGJynTa6QZqM9hbRHCQe8v20+W2ofTjLzx8P1FTdoWoPPR6AIqCTMc1xjOrmGJVWFYFp5U6z5C04KQ==
-  dependencies:
-    prop-types "^15.8.1"
-
 react-monaco-editor@^0.51.0:
   version "0.51.0"
   resolved "https://registry.yarnpkg.com/react-monaco-editor/-/react-monaco-editor-0.51.0.tgz#68d6afc912f7fcb7782e57b39889a5fd75fc0ceb"
@@ -16130,12 +15776,10 @@ react-router@5.3.3, react-router@^5.3.3:
     tiny-invariant "^1.0.2"
     tiny-warning "^1.0.0"
 
-react-ssr-prepass@1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/react-ssr-prepass/-/react-ssr-prepass-1.2.1.tgz#ba867bbe60714f42977dbe1ef9b8ff469b950602"
-  integrity sha512-8hMhx9zXyEZ+t4oI0chPInxm/HpjrmvNuZxI5TmIXbORYmIV2CnK4WVPTdm/7Iq+3/6RAiNxTNZSQyUu5irX4Q==
-  dependencies:
-    object-is "^1.1.2"
+react-ssr-prepass@1.5.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/react-ssr-prepass/-/react-ssr-prepass-1.5.0.tgz#bc4ca7fcb52365e6aea11cc254a3d1bdcbd030c5"
+  integrity sha512-yFNHrlVEReVYKsLI5lF05tZoHveA5pGzjFbFJY/3pOqqjGOmMmqx83N4hIjN2n6E1AOa+eQEUxs3CgRnPmT0RQ==
 
 react@^18:
   version "18.2.0"
@@ -16360,13 +16004,6 @@ regex-not@^1.0.0, regex-not@^1.0.2:
     extend-shallow "^3.0.2"
     safe-regex "^1.1.0"
 
-regexp.prototype.flags@^1.2.0:
-  version "1.3.0"
-  resolved "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.0.tgz"
-  dependencies:
-    define-properties "^1.1.3"
-    es-abstract "^1.17.0-next.1"
-
 regexp.prototype.flags@^1.4.3:
   version "1.4.3"
   resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
@@ -16579,16 +16216,6 @@ remove-trailing-separator@^1.0.1:
   version "1.1.0"
   resolved "https://registry.npmjs.org/remove-trailing-separator/-/remove-trailing-separator-1.1.0.tgz"
 
-renderkid@^2.0.1:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/renderkid/-/renderkid-2.0.3.tgz"
-  dependencies:
-    css-select "^1.1.0"
-    dom-converter "^0.2"
-    htmlparser2 "^3.3.0"
-    strip-ansi "^3.0.0"
-    utila "^0.4.0"
-
 renderkid@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/renderkid/-/renderkid-3.0.0.tgz#5fd823e4d6951d37358ecc9a58b1f06836b6268a"
@@ -16676,20 +16303,10 @@ require-from-string@^2.0.2:
   resolved "https://registry.yarnpkg.com/require-from-string/-/require-from-string-2.0.2.tgz#89a7fdd938261267318eafe14f9c32e598c36909"
   integrity sha512-Xf0nWe6RseziFMu+Ap9biiUbmplq6S9/p+7w7YXP/JBHhrUDDUhwa+vANyubuqfZWTveU//DYVGsDG7RKL/vEw==
 
-require-main-filename@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz"
-
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz"
 
-resolve-cwd@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-2.0.0.tgz"
-  dependencies:
-    resolve-from "^3.0.0"
-
 resolve-cwd@^3.0.0:
   version "3.0.0"
   resolved "https://registry.npmjs.org/resolve-cwd/-/resolve-cwd-3.0.0.tgz"
@@ -16711,10 +16328,6 @@ resolve-dir@^1.0.0, resolve-dir@^1.0.1:
     expand-tilde "^2.0.0"
     global-modules "^1.0.0"
 
-resolve-from@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-3.0.0.tgz"
-
 resolve-from@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz"
@@ -16770,13 +16383,17 @@ resolve@^2.0.0-next.4:
     path-parse "^1.0.7"
     supports-preserve-symlinks-flag "^1.0.0"
 
-responsive-loader@2.1.1:
-  version "2.1.1"
-  resolved "https://registry.yarnpkg.com/responsive-loader/-/responsive-loader-2.1.1.tgz#462b34601fb1200740ab7aba05c99040dea22d64"
-  integrity sha512-5vv37eOR6M+fnUakZRkldR0Z/35MaCziap2re+eDiQPq6+1uy4onTk7aZ1OZM+iUAz6Ove6hnEBOfmRYHmq/6w==
+responsive-loader@3.1.2:
+  version "3.1.2"
+  resolved "https://registry.yarnpkg.com/responsive-loader/-/responsive-loader-3.1.2.tgz#382ebb509d3a9facd24b009fb1d741dd63e5ed4d"
+  integrity sha512-6UOrSdEkifzxnQPnUFwa3HqXlnHmYEWBIg3zRveuk7VbLhnuNCiKbx0jGs7071Gm10rhSb6seEC+bApSjkX3wA==
   dependencies:
-    loader-utils "^2.0.0"
-    schema-utils "^2.7.1"
+    "@types/node" "^18.11.9"
+    find-cache-dir "^3.3.2"
+    json5 "^2.2.1"
+    loader-utils "^3.2.1"
+    make-dir "^3.1.0"
+    schema-utils "^4.0.0"
 
 restore-cursor@^2.0.0:
   version "2.0.0"
@@ -17022,13 +16639,7 @@ select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz"
 
-selfsigned@^1.10.7:
-  version "1.10.7"
-  resolved "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz"
-  dependencies:
-    node-forge "0.9.0"
-
-selfsigned@^2.0.1:
+selfsigned@^2.0.1, selfsigned@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.1.1.tgz#18a7613d714c0cd3385c48af0075abf3f266af61"
   integrity sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==
@@ -17070,7 +16681,7 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   version "6.3.0"
   resolved "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz"
 
-semver@^7.0.0, semver@^7.1.1:
+semver@^7.0.0, semver@^7.1.1, semver@^7.3.8:
   version "7.3.8"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.8.tgz#07a78feafb3f7b32347d725e33de7e2a2df67798"
   integrity sha512-NB1ctGL5rlHrPJtFDVIVzTyQylMLu9N9VICA6HSFJo8MCGVTMW6gfpicwKmmK/dAjTOrqu5l63JJOpDSrAis3A==
@@ -17095,24 +16706,6 @@ semver@^7.3.7:
   dependencies:
     lru-cache "^6.0.0"
 
-send@0.17.1:
-  version "0.17.1"
-  resolved "https://registry.npmjs.org/send/-/send-0.17.1.tgz"
-  dependencies:
-    debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    etag "~1.8.1"
-    fresh "0.5.2"
-    http-errors "~1.7.2"
-    mime "1.6.0"
-    ms "2.1.1"
-    on-finished "~2.3.0"
-    range-parser "~1.2.1"
-    statuses "~1.5.0"
-
 send@0.18.0:
   version "0.18.0"
   resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
@@ -17178,15 +16771,6 @@ serve-index@^1.9.1:
     mime-types "~2.1.17"
     parseurl "~1.3.2"
 
-serve-static@1.14.1:
-  version "1.14.1"
-  resolved "https://registry.npmjs.org/serve-static/-/serve-static-1.14.1.tgz"
-  dependencies:
-    encodeurl "~1.0.2"
-    escape-html "~1.0.3"
-    parseurl "~1.3.3"
-    send "0.17.1"
-
 serve-static@1.15.0:
   version "1.15.0"
   resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
@@ -17356,6 +16940,15 @@ simple-swizzle@^0.2.2:
   dependencies:
     is-arrayish "^0.3.1"
 
+sirv@^1.0.7:
+  version "1.0.19"
+  resolved "https://registry.yarnpkg.com/sirv/-/sirv-1.0.19.tgz#1d73979b38c7fe91fcba49c85280daa9c2363b49"
+  integrity sha512-JuLThK3TnZG1TAKDwNIqNq6QA2afLOCcm+iE8D1Kj3GA40pSPsxQjjJl0J8X3tsR7T+CP1GavpzLwYkgVLWrZQ==
+  dependencies:
+    "@polka/url" "^1.0.0-next.20"
+    mrmime "^1.0.0"
+    totalist "^1.0.0"
+
 sisteransi@^1.0.3:
   version "1.0.3"
   resolved "https://registry.npmjs.org/sisteransi/-/sisteransi-1.0.3.tgz"
@@ -17437,25 +17030,6 @@ snapdragon@^0.8.1:
     source-map-resolve "^0.5.0"
     use "^3.1.0"
 
-sockjs-client@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.npmjs.org/sockjs-client/-/sockjs-client-1.4.0.tgz"
-  dependencies:
-    debug "^3.2.5"
-    eventsource "^1.0.7"
-    faye-websocket "~0.11.1"
-    inherits "^2.0.3"
-    json3 "^3.3.2"
-    url-parse "^1.4.3"
-
-sockjs@0.3.20:
-  version "0.3.20"
-  resolved "https://registry.npmjs.org/sockjs/-/sockjs-0.3.20.tgz"
-  dependencies:
-    faye-websocket "^0.10.0"
-    uuid "^3.4.0"
-    websocket-driver "0.6.5"
-
 sockjs@^0.3.24:
   version "0.3.24"
   resolved "https://registry.yarnpkg.com/sockjs/-/sockjs-0.3.24.tgz#c9bc8995f33a111bea0395ec30aa3206bdb5ccce"
@@ -17519,6 +17093,11 @@ source-list-map@^2.0.0:
   version "2.0.1"
   resolved "https://registry.npmjs.org/source-list-map/-/source-list-map-2.0.1.tgz"
 
+source-map-js@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"
+  integrity sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==
+
 source-map-resolve@^0.5.0, source-map-resolve@^0.5.2:
   version "0.5.3"
   resolved "https://registry.npmjs.org/source-map-resolve/-/source-map-resolve-0.5.3.tgz"
@@ -17721,7 +17300,7 @@ statuses@2.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
-"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@^1.0.0, statuses@^1.5.0, statuses@~1.5.0:
+"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@^1.0.0, statuses@^1.5.0:
   version "1.5.0"
   resolved "https://registry.npmjs.org/statuses/-/statuses-1.5.0.tgz"
 
@@ -17828,14 +17407,6 @@ string-width@^2.0.0, string-width@^2.1.0, string-width@^2.1.1:
     is-fullwidth-code-point "^2.0.0"
     strip-ansi "^4.0.0"
 
-string-width@^3.0.0, string-width@^3.1.0:
-  version "3.1.0"
-  resolved "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz"
-  dependencies:
-    emoji-regex "^7.0.1"
-    is-fullwidth-code-point "^2.0.0"
-    strip-ansi "^5.1.0"
-
 string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0:
   version "4.2.0"
   resolved "https://registry.npmjs.org/string-width/-/string-width-4.2.0.tgz"
@@ -17947,19 +17518,13 @@ stringify-entities@^3.0.1:
     is-decimal "^1.0.2"
     is-hexadecimal "^1.0.0"
 
-strip-ansi@^3.0.0, strip-ansi@^3.0.1:
-  version "3.0.1"
-  resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz"
-  dependencies:
-    ansi-regex "^2.0.0"
-
 strip-ansi@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-4.0.0.tgz"
   dependencies:
     ansi-regex "^3.0.0"
 
-strip-ansi@^5.0.0, strip-ansi@^5.1.0, strip-ansi@^5.2.0:
+strip-ansi@^5.1.0:
   version "5.2.0"
   resolved "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz"
   dependencies:
@@ -18283,7 +17848,7 @@ terser-webpack-plugin@^5.1.3:
     serialize-javascript "^6.0.0"
     terser "^5.14.1"
 
-terser@^4.1.2, terser@^4.6.3:
+terser@^4.1.2:
   version "4.8.0"
   resolved "https://registry.npmjs.org/terser/-/terser-4.8.0.tgz"
   dependencies:
@@ -18471,6 +18036,11 @@ toidentifier@1.0.1:
   resolved "https://registry.yarnpkg.com/toidentifier/-/toidentifier-1.0.1.tgz#3be34321a88a820ed1bd80dfaa33e479fbb8dd35"
   integrity sha512-o5sSPKEkg/DIQNmH43V0/uerLrpzVedkUh8tGNvaeXpfpuwjKenlSox/2O/BTlZUtEe+JG7s5YhEz608PlAHRA==
 
+totalist@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/totalist/-/totalist-1.1.0.tgz#a4d65a3e546517701e3e5c37a47a70ac97fe56df"
+  integrity sha512-gduQwd1rOdDMGxFG1gEvhV88Oirdo2p+KjoYFU7k2g+i7n6AFFbDQ5kMPUsW0pNbfQsB/cwXvT1i4Bue0s9g5g==
+
 tough-cookie@^2.3.3, tough-cookie@~2.5.0:
   version "2.5.0"
   resolved "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz"
@@ -18538,10 +18108,6 @@ trough@^1.0.0:
   version "1.0.5"
   resolved "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz"
 
-tryer@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.npmjs.org/tryer/-/tryer-1.0.1.tgz"
-
 ts-loader@^8.3.0:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/ts-loader/-/ts-loader-8.4.0.tgz#e845ea0f38d140bdc3d7d60293ca18d12ff2720f"
@@ -18585,7 +18151,7 @@ tsconfig-paths@^4.1.2:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.1, tslib@^1.9.0:
   version "1.13.0"
   resolved "https://registry.npmjs.org/tslib/-/tslib-1.13.0.tgz"
 
@@ -18672,7 +18238,7 @@ type-fest@^0.8.1:
   version "0.8.1"
   resolved "https://registry.npmjs.org/type-fest/-/type-fest-0.8.1.tgz"
 
-type-is@^1.6.16, type-is@~1.6.17, type-is@~1.6.18:
+type-is@^1.6.16, type-is@~1.6.18:
   version "1.6.18"
   resolved "https://registry.npmjs.org/type-is/-/type-is-1.6.18.tgz"
   dependencies:
@@ -19090,13 +18656,6 @@ url-parse-lax@^1.0.0:
   dependencies:
     prepend-http "^1.0.1"
 
-url-parse@^1.4.3:
-  version "1.4.7"
-  resolved "https://registry.npmjs.org/url-parse/-/url-parse-1.4.7.tgz"
-  dependencies:
-    querystringify "^2.1.1"
-    requires-port "^1.0.0"
-
 url@^0.11.0:
   version "0.11.0"
   resolved "https://registry.npmjs.org/url/-/url-0.11.0.tgz"
@@ -19108,17 +18667,10 @@ use@^3.1.0:
   version "3.1.1"
   resolved "https://registry.npmjs.org/use/-/use-3.1.1.tgz"
 
-util-deprecate@^1.0.1, util-deprecate@~1.0.1:
+util-deprecate@^1.0.1, util-deprecate@^1.0.2, util-deprecate@~1.0.1:
   version "1.0.2"
   resolved "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz"
 
-util.promisify@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/util.promisify/-/util.promisify-1.0.0.tgz"
-  dependencies:
-    define-properties "^1.1.2"
-    object.getownpropertydescriptors "^2.0.3"
-
 util@0.10.3:
   version "0.10.3"
   resolved "https://registry.npmjs.org/util/-/util-0.10.3.tgz"
@@ -19131,7 +18683,7 @@ util@^0.11.0:
   dependencies:
     inherits "2.0.3"
 
-utila@^0.4.0, utila@~0.4:
+utila@~0.4:
   version "0.4.0"
   resolved "https://registry.npmjs.org/utila/-/utila-0.4.0.tgz"
 
@@ -19143,11 +18695,6 @@ uuid@^3.3.2:
   version "3.3.3"
   resolved "https://registry.npmjs.org/uuid/-/uuid-3.3.3.tgz"
 
-uuid@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/uuid/-/uuid-3.4.0.tgz#b23e4358afa8a202fe7a100af1f5f883f02007ee"
-  integrity sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==
-
 uuid@^8.3.2:
   version "8.3.2"
   resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
@@ -19158,10 +18705,6 @@ v8-compile-cache@2.3.0:
   resolved "https://registry.yarnpkg.com/v8-compile-cache/-/v8-compile-cache-2.3.0.tgz#2de19618c66dc247dcfb6f99338035d8245a2cee"
   integrity sha512-l8lCEmLcLYZh4nbunNZvQCJc5pv7+RCwa8q/LdUx8u7lsWvPDKmpodJAJNwkAhJC//dFY48KuIEmjtd4RViDrA==
 
-v8-compile-cache@^2.1.1:
-  version "2.1.1"
-  resolved "https://registry.npmjs.org/v8-compile-cache/-/v8-compile-cache-2.1.1.tgz"
-
 v8-to-istanbul@^8.1.0:
   version "8.1.0"
   resolved "https://registry.npmjs.org/v8-to-istanbul/-/v8-to-istanbul-8.1.0.tgz"
@@ -19539,12 +19082,6 @@ walker@^1.0.7:
   dependencies:
     makeerror "1.0.x"
 
-warning@^4.0.3:
-  version "4.0.3"
-  resolved "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz"
-  dependencies:
-    loose-envify "^1.0.0"
-
 watchpack-chokidar2@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/watchpack-chokidar2/-/watchpack-chokidar2-2.0.0.tgz"
@@ -19561,7 +19098,7 @@ watchpack@^1.7.4:
     chokidar "^3.4.1"
     watchpack-chokidar2 "^2.0.0"
 
-watchpack@^2.3.1:
+watchpack@^2.3.1, watchpack@^2.4.0:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.0.tgz#fa33032374962c78113f93c7f2fb4c54c9862a5d"
   integrity sha512-Lcvm7MGST/4fup+ifyKi2hjyIAwcdI4HRgtvTpIUxBRhB+RFtUh8XtDOxUfctVCnhVi+QQj49i91OyvzkJl6cg==
@@ -19604,40 +19141,21 @@ webidl-conversions@^6.1.0:
   resolved "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-6.1.0.tgz"
   integrity sha512-qBIvFLGiBpLjfwmYAaHPXsn+ho5xZnGvyGvsarywGNc8VyQJUMHJ8OBKGGrPER0okBeMDaan4mNBlgBROxuI8w==
 
-webpack-bundle-analyzer@3.8.0:
-  version "3.8.0"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-3.8.0.tgz#ce6b3f908daf069fd1f7266f692cbb3bded9ba16"
-  integrity sha512-PODQhAYVEourCcOuU+NiYI7WdR8QyELZGgPvB1y2tjbUpbmcQOt5Q7jEK+ttd5se0KSBKD9SXHCEozS++Wllmw==
-  dependencies:
-    acorn "^7.1.1"
-    acorn-walk "^7.1.1"
-    bfj "^6.1.1"
-    chalk "^2.4.1"
-    commander "^2.18.0"
-    ejs "^2.6.1"
-    express "^4.16.3"
-    filesize "^3.6.1"
-    gzip-size "^5.0.0"
-    lodash "^4.17.15"
-    mkdirp "^0.5.1"
-    opener "^1.5.1"
-    ws "^6.0.0"
-
-webpack-cli@3.3.12:
-  version "3.3.12"
-  resolved "https://registry.npmjs.org/webpack-cli/-/webpack-cli-3.3.12.tgz"
+webpack-bundle-analyzer@4.8.0:
+  version "4.8.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-4.8.0.tgz#951b8aaf491f665d2ae325d8b84da229157b1d04"
+  integrity sha512-ZzoSBePshOKhr+hd8u6oCkZVwpVaXgpw23ScGLFpR6SjYI7+7iIWYarjN6OEYOfRt8o7ZyZZQk0DuMizJ+LEIg==
   dependencies:
-    chalk "^2.4.2"
-    cross-spawn "^6.0.5"
-    enhanced-resolve "^4.1.1"
-    findup-sync "^3.0.0"
-    global-modules "^2.0.0"
-    import-local "^2.0.0"
-    interpret "^1.4.0"
-    loader-utils "^1.4.0"
-    supports-color "^6.1.0"
-    v8-compile-cache "^2.1.1"
-    yargs "^13.3.2"
+    "@discoveryjs/json-ext" "0.5.7"
+    acorn "^8.0.4"
+    acorn-walk "^8.0.0"
+    chalk "^4.1.0"
+    commander "^7.2.0"
+    gzip-size "^6.0.0"
+    lodash "^4.17.20"
+    opener "^1.5.2"
+    sirv "^1.0.7"
+    ws "^7.3.1"
 
 webpack-cli@4.10.0:
   version "4.10.0"
@@ -19657,15 +19175,24 @@ webpack-cli@4.10.0:
     rechoir "^0.7.0"
     webpack-merge "^5.7.3"
 
-webpack-dev-middleware@^3.7.2:
-  version "3.7.2"
-  resolved "https://registry.npmjs.org/webpack-dev-middleware/-/webpack-dev-middleware-3.7.2.tgz"
+webpack-cli@5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-5.0.1.tgz#95fc0495ac4065e9423a722dec9175560b6f2d9a"
+  integrity sha512-S3KVAyfwUqr0Mo/ur3NzIp6jnerNpo7GUO6so51mxLi1spqsA17YcMXy0WOIJtBSnj748lthxC6XLbNKh/ZC+A==
   dependencies:
-    memory-fs "^0.4.1"
-    mime "^2.4.4"
-    mkdirp "^0.5.1"
-    range-parser "^1.2.1"
-    webpack-log "^2.0.0"
+    "@discoveryjs/json-ext" "^0.5.0"
+    "@webpack-cli/configtest" "^2.0.1"
+    "@webpack-cli/info" "^2.0.1"
+    "@webpack-cli/serve" "^2.0.1"
+    colorette "^2.0.14"
+    commander "^9.4.1"
+    cross-spawn "^7.0.3"
+    envinfo "^7.7.3"
+    fastest-levenshtein "^1.0.12"
+    import-local "^3.0.2"
+    interpret "^3.1.1"
+    rechoir "^0.8.0"
+    webpack-merge "^5.7.3"
 
 webpack-dev-middleware@^5.3.1:
   version "5.3.3"
@@ -19678,44 +19205,41 @@ webpack-dev-middleware@^5.3.1:
     range-parser "^1.2.1"
     schema-utils "^4.0.0"
 
-webpack-dev-server@3.11.0:
-  version "3.11.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-3.11.0.tgz#8f154a3bce1bcfd1cc618ef4e703278855e7ff8c"
-  integrity sha512-PUxZ+oSTxogFQgkTtFndEtJIPNmml7ExwufBZ9L2/Xyyd5PnOL5UreWe5ZT7IU25DSdykL9p1MLQzmLh2ljSeg==
+webpack-dev-server@4.13.1:
+  version "4.13.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.13.1.tgz#6417a9b5d2f528e7644b68d6ed335e392dccffe8"
+  integrity sha512-5tWg00bnWbYgkN+pd5yISQKDejRBYGEw15RaEEslH+zdbNDxxaZvEAO2WulaSaFKb5n3YG8JXsGaDsut1D0xdA==
   dependencies:
-    ansi-html "0.0.7"
-    bonjour "^3.5.0"
-    chokidar "^2.1.8"
+    "@types/bonjour" "^3.5.9"
+    "@types/connect-history-api-fallback" "^1.3.5"
+    "@types/express" "^4.17.13"
+    "@types/serve-index" "^1.9.1"
+    "@types/serve-static" "^1.13.10"
+    "@types/sockjs" "^0.3.33"
+    "@types/ws" "^8.5.1"
+    ansi-html-community "^0.0.8"
+    bonjour-service "^1.0.11"
+    chokidar "^3.5.3"
+    colorette "^2.0.10"
     compression "^1.7.4"
-    connect-history-api-fallback "^1.6.0"
-    debug "^4.1.1"
-    del "^4.1.1"
-    express "^4.17.1"
-    html-entities "^1.3.1"
-    http-proxy-middleware "0.19.1"
-    import-local "^2.0.0"
-    internal-ip "^4.3.0"
-    ip "^1.1.5"
-    is-absolute-url "^3.0.3"
-    killable "^1.0.1"
-    loglevel "^1.6.8"
-    opn "^5.5.0"
-    p-retry "^3.0.1"
-    portfinder "^1.0.26"
-    schema-utils "^1.0.0"
-    selfsigned "^1.10.7"
-    semver "^6.3.0"
+    connect-history-api-fallback "^2.0.0"
+    default-gateway "^6.0.3"
+    express "^4.17.3"
+    graceful-fs "^4.2.6"
+    html-entities "^2.3.2"
+    http-proxy-middleware "^2.0.3"
+    ipaddr.js "^2.0.1"
+    launch-editor "^2.6.0"
+    open "^8.0.9"
+    p-retry "^4.5.0"
+    rimraf "^3.0.2"
+    schema-utils "^4.0.0"
+    selfsigned "^2.1.1"
     serve-index "^1.9.1"
-    sockjs "0.3.20"
-    sockjs-client "1.4.0"
+    sockjs "^0.3.24"
     spdy "^4.0.2"
-    strip-ansi "^3.0.1"
-    supports-color "^6.1.0"
-    url "^0.11.0"
-    webpack-dev-middleware "^3.7.2"
-    webpack-log "^2.0.0"
-    ws "^6.2.1"
-    yargs "^13.3.2"
+    webpack-dev-middleware "^5.3.1"
+    ws "^8.13.0"
 
 webpack-dev-server@4.9.3:
   version "4.9.3"
@@ -19752,13 +19276,6 @@ webpack-dev-server@4.9.3:
     webpack-dev-middleware "^5.3.1"
     ws "^8.4.2"
 
-webpack-log@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/webpack-log/-/webpack-log-2.0.0.tgz"
-  dependencies:
-    ansi-colors "^3.0.0"
-    uuid "^3.3.2"
-
 webpack-merge@5.8.0, webpack-merge@^5.7.3:
   version "5.8.0"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-5.8.0.tgz#2b39dbf22af87776ad744c390223731d30a68f61"
@@ -19779,34 +19296,6 @@ webpack-sources@^3.2.3:
   resolved "https://registry.yarnpkg.com/webpack-sources/-/webpack-sources-3.2.3.tgz#2d4daab8451fd4b240cc27055ff6a0c2ccea0cde"
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
-webpack@4.44.1, webpack@^4.43.0:
-  version "4.44.1"
-  resolved "https://registry.npmjs.org/webpack/-/webpack-4.44.1.tgz"
-  dependencies:
-    "@webassemblyjs/ast" "1.9.0"
-    "@webassemblyjs/helper-module-context" "1.9.0"
-    "@webassemblyjs/wasm-edit" "1.9.0"
-    "@webassemblyjs/wasm-parser" "1.9.0"
-    acorn "^6.4.1"
-    ajv "^6.10.2"
-    ajv-keywords "^3.4.1"
-    chrome-trace-event "^1.0.2"
-    enhanced-resolve "^4.3.0"
-    eslint-scope "^4.0.3"
-    json-parse-better-errors "^1.0.2"
-    loader-runner "^2.4.0"
-    loader-utils "^1.2.3"
-    memory-fs "^0.4.1"
-    micromatch "^3.1.10"
-    mkdirp "^0.5.3"
-    neo-async "^2.6.1"
-    node-libs-browser "^2.2.1"
-    schema-utils "^1.0.0"
-    tapable "^1.1.3"
-    terser-webpack-plugin "^1.4.3"
-    watchpack "^1.7.4"
-    webpack-sources "^1.4.1"
-
 webpack@5.73.0:
   version "5.73.0"
   resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.73.0.tgz#bbd17738f8a53ee5760ea2f59dce7f3431d35d38"
@@ -19837,11 +19326,63 @@ webpack@5.73.0:
     watchpack "^2.3.1"
     webpack-sources "^3.2.3"
 
-websocket-driver@0.6.5:
-  version "0.6.5"
-  resolved "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.6.5.tgz"
+webpack@5.76.3:
+  version "5.76.3"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.76.3.tgz#dffdc72c8950e5b032fddad9c4452e7787d2f489"
+  integrity sha512-18Qv7uGPU8b2vqGeEEObnfICyw2g39CHlDEK4I7NK13LOur1d0HGmGNKGT58Eluwddpn3oEejwvBPoP4M7/KSA==
   dependencies:
-    websocket-extensions ">=0.1.1"
+    "@types/eslint-scope" "^3.7.3"
+    "@types/estree" "^0.0.51"
+    "@webassemblyjs/ast" "1.11.1"
+    "@webassemblyjs/wasm-edit" "1.11.1"
+    "@webassemblyjs/wasm-parser" "1.11.1"
+    acorn "^8.7.1"
+    acorn-import-assertions "^1.7.6"
+    browserslist "^4.14.5"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^5.10.0"
+    es-module-lexer "^0.9.0"
+    eslint-scope "5.1.1"
+    events "^3.2.0"
+    glob-to-regexp "^0.4.1"
+    graceful-fs "^4.2.9"
+    json-parse-even-better-errors "^2.3.1"
+    loader-runner "^4.2.0"
+    mime-types "^2.1.27"
+    neo-async "^2.6.2"
+    schema-utils "^3.1.0"
+    tapable "^2.1.1"
+    terser-webpack-plugin "^5.1.3"
+    watchpack "^2.4.0"
+    webpack-sources "^3.2.3"
+
+webpack@^4.43.0:
+  version "4.44.1"
+  resolved "https://registry.npmjs.org/webpack/-/webpack-4.44.1.tgz"
+  dependencies:
+    "@webassemblyjs/ast" "1.9.0"
+    "@webassemblyjs/helper-module-context" "1.9.0"
+    "@webassemblyjs/wasm-edit" "1.9.0"
+    "@webassemblyjs/wasm-parser" "1.9.0"
+    acorn "^6.4.1"
+    ajv "^6.10.2"
+    ajv-keywords "^3.4.1"
+    chrome-trace-event "^1.0.2"
+    enhanced-resolve "^4.3.0"
+    eslint-scope "^4.0.3"
+    json-parse-better-errors "^1.0.2"
+    loader-runner "^2.4.0"
+    loader-utils "^1.2.3"
+    memory-fs "^0.4.1"
+    micromatch "^3.1.10"
+    mkdirp "^0.5.3"
+    neo-async "^2.6.1"
+    node-libs-browser "^2.2.1"
+    schema-utils "^1.0.0"
+    tapable "^1.1.3"
+    terser-webpack-plugin "^1.4.3"
+    watchpack "^1.7.4"
+    webpack-sources "^1.4.1"
 
 websocket-driver@>=0.5.1, websocket-driver@^0.7.4:
   version "0.7.4"
@@ -19911,10 +19452,6 @@ which-collection@^1.0.1:
     is-weakmap "^2.0.1"
     is-weakset "^2.0.1"
 
-which-module@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.npmjs.org/which-module/-/which-module-2.0.0.tgz"
-
 which-pm-runs@^1.0.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/which-pm-runs/-/which-pm-runs-1.1.0.tgz#35ccf7b1a0fce87bd8b92a478c9d045785d3bf35"
@@ -19982,14 +19519,6 @@ worker-farm@^1.7.0:
   dependencies:
     errno "~0.1.7"
 
-wrap-ansi@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-5.1.0.tgz"
-  dependencies:
-    ansi-styles "^3.2.0"
-    string-width "^3.0.0"
-    strip-ansi "^5.0.0"
-
 wrap-ansi@^6.2.0:
   version "6.2.0"
   resolved "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-6.2.0.tgz"
@@ -20079,23 +19608,27 @@ ws@^5.2.1:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^6.0.0, ws@^6.2.1:
-  version "6.2.1"
-  resolved "https://registry.npmjs.org/ws/-/ws-6.2.1.tgz"
-  dependencies:
-    async-limiter "~1.0.0"
-
 ws@^7.0.0:
   version "7.2.0"
   resolved "https://registry.npmjs.org/ws/-/ws-7.2.0.tgz"
   dependencies:
     async-limiter "^1.0.0"
 
+ws@^7.3.1:
+  version "7.5.9"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.9.tgz#54fa7db29f4c7cec68b1ddd3a89de099942bb591"
+  integrity sha512-F+P9Jil7UiSKSkppIiD94dN07AwvFixvLIj1Og1Rl9GGMuNipJnV9JzjD6XuqmAeiswGvUmNLjr5cFuXwNS77Q==
+
 ws@^7.4.6:
   version "7.5.5"
   resolved "https://registry.npmjs.org/ws/-/ws-7.5.5.tgz"
   integrity sha512-BAkMFcAzl8as1G/hArkxOxq3G7pjUqQ3gzYbLL0/5zNkph70e+lCoxBGnm6AW1+/aiNeV4fnKqZ8m4GZewmH2w==
 
+ws@^8.13.0:
+  version "8.13.0"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
+  integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
+
 ws@^8.4.2:
   version "8.11.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.11.0.tgz#6a0d36b8edfd9f96d8b25683db2f8d7de6e8e143"
@@ -20188,33 +19721,11 @@ yargs-parser@21.1.1, yargs-parser@^21.1.1:
   resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-21.1.1.tgz#9096bceebf990d21bb31fa9516e0ede294a77d35"
   integrity sha512-tVpsJW7DdjecAiFpbIB1e3qxIQsE6NoPc5/eTdrbbIC4h0LVsWhnoa3g+m2HclBIujHzsxZ4VJVA+GUuc2/LBw==
 
-yargs-parser@^13.1.2:
-  version "13.1.2"
-  resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-13.1.2.tgz"
-  dependencies:
-    camelcase "^5.0.0"
-    decamelize "^1.2.0"
-
 yargs-parser@^20.2.2, yargs-parser@^20.2.3:
   version "20.2.9"
   resolved "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.9.tgz"
   integrity sha512-y11nGElTIV+CT3Zv9t7VKl+Q3hTQoT9a1Qzezhhl6Rp21gJ/IVTW7Z3y9EWXhuUBC2Shnf+DX0antecpAwSP8w==
 
-yargs@^13.3.2:
-  version "13.3.2"
-  resolved "https://registry.npmjs.org/yargs/-/yargs-13.3.2.tgz"
-  dependencies:
-    cliui "^5.0.0"
-    find-up "^3.0.0"
-    get-caller-file "^2.0.1"
-    require-directory "^2.1.1"
-    require-main-filename "^2.0.0"
-    set-blocking "^2.0.0"
-    string-width "^3.0.0"
-    which-module "^2.0.0"
-    y18n "^4.0.0"
-    yargs-parser "^13.1.2"
-
 yargs@^16.2.0:
   version "16.2.0"
   resolved "https://registry.npmjs.org/yargs/-/yargs-16.2.0.tgz"

From 8a1f2905952c08f767e06f5a0954b5e4912f3630 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Wed, 5 Apr 2023 08:27:11 -0400
Subject: [PATCH 2/2] fixes after rebasing

---
 .../src/components/Table/examples/Table.md    |   4 +-
 .../Table/examples/TableRightStickyColumn.tsx | 153 ++++++++++++++++++
 packages/react-table/src/docs/demos/Table.md  |   2 +-
 3 files changed, 156 insertions(+), 3 deletions(-)
 create mode 100644 packages/react-table/src/components/Table/examples/TableRightStickyColumn.tsx

diff --git a/packages/react-table/src/components/Table/examples/Table.md b/packages/react-table/src/components/Table/examples/Table.md
index cd2e36c79e7..8250ed1d56b 100644
--- a/packages/react-table/src/components/Table/examples/Table.md
+++ b/packages/react-table/src/components/Table/examples/Table.md
@@ -332,7 +332,7 @@ To make a column sticky, wrap `Table` with `InnerScrollContainer` and add the fo
 
 To make multiple left-aligned columns sticky:
 
-- wrap TableComposable with InnerScrollContainer
+- wrap Table with InnerScrollContainer
 - add isStickyColumn to all columns that should be sticky
 - add hasRightBorder to the rightmost sticky column
 - add stickyLeftOffset to each sticky column after the first, with a value that equals the combined width - set by stickyMindWidth - of the previous sticky columns
@@ -353,7 +353,7 @@ To prevent the default text wrapping behavior and allow horizontal scrolling, al
 
 To make multiple right-aligned columns sticky:
 
-- wrap `TableComposable` with `InnerScrollContainer`
+- wrap `Table` with `InnerScrollContainer`
 - add `isStickyColumn` to all columns that should be sticky
 - add `hasLeftBorder` to the leftmost sticky column
 - add `stickyRightOffset` to each sticky column preceding the last, with a value that equals the combined width - set by `stickyMindWidth` - of the next sticky columns
diff --git a/packages/react-table/src/components/Table/examples/TableRightStickyColumn.tsx b/packages/react-table/src/components/Table/examples/TableRightStickyColumn.tsx
new file mode 100644
index 00000000000..ee3373599c5
--- /dev/null
+++ b/packages/react-table/src/components/Table/examples/TableRightStickyColumn.tsx
@@ -0,0 +1,153 @@
+import React from 'react';
+import { Table, Thead, Tr, Th, Tbody, Td, InnerScrollContainer, ThProps } from '@patternfly/react-table';
+
+interface Fact {
+  name: string;
+  state: string;
+  detail1: string;
+  detail2: string;
+  detail3: string;
+  detail4: string;
+  detail5: string;
+  detail6: string;
+  detail7: string;
+}
+
+export const ComposableTableRightStickyColumn: React.FunctionComponent = () => {
+  // In real usage, this data would come from some external source like an API via props.
+  const facts: Fact[] = Array.from({ length: 9 }, (_, index) => ({
+    name: `Fact ${index + 1}`,
+    state: `State ${index + 1}`,
+    detail1: `Test cell ${index + 1}-3`,
+    detail2: `Test cell ${index + 1}-4`,
+    detail3: `Test cell ${index + 1}-5`,
+    detail4: `Test cell ${index + 1}-6`,
+    detail5: `Test cell ${index + 1}-7`,
+    detail6: `Test cell ${index + 1}-8`,
+    detail7: `Test cell ${index + 1}-9`
+  }));
+
+  const columnNames = {
+    name: 'Fact',
+    state: 'State',
+    header3: 'Header 3',
+    header4: 'Header 4',
+    header5: 'Header 5',
+    header6: 'Header 6',
+    header7: 'Header 7',
+    header8: 'Header 8',
+    header9: 'Header 9'
+  };
+
+  // Index of the currently sorted column
+  // Note: if you intend to make columns reorderable, you may instead want to use a non-numeric key
+  // as the identifier of the sorted column. See the "Compound expandable" example.
+  const [activeSortIndex, setActiveSortIndex] = React.useState<number | null>(null);
+
+  // Sort direction of the currently sorted column
+  const [activeSortDirection, setActiveSortDirection] = React.useState<'asc' | 'desc' | null>(null);
+
+  // Since OnSort specifies sorted columns by index, we need sortable values for our object by column index.
+  // This example is trivial since our data objects just contain strings, but if the data was more complex
+  // this would be a place to return simplified string or number versions of each column to sort by.
+  const getSortableRowValues = (fact: Fact): (string | number)[] => {
+    const { name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7 } = fact;
+    return [name, state, detail1, detail2, detail3, detail4, detail5, detail6, detail7];
+  };
+
+  // Note that we perform the sort as part of the component's render logic and not in onSort.
+  // We shouldn't store the list of data in state because we don't want to have to sync that with props.
+  let sortedFacts = facts;
+  if (activeSortIndex !== null) {
+    sortedFacts = facts.sort((a, b) => {
+      const aValue = getSortableRowValues(a)[activeSortIndex];
+      const bValue = getSortableRowValues(b)[activeSortIndex];
+      if (aValue === bValue) {
+        return 0;
+      }
+      if (activeSortDirection === 'asc') {
+        return aValue > bValue ? 1 : -1;
+      } else {
+        return bValue > aValue ? 1 : -1;
+      }
+    });
+  }
+
+  const getSortParams = (columnIndex: number): ThProps['sort'] => ({
+    sortBy: {
+      index: activeSortIndex,
+      direction: activeSortDirection
+    },
+    onSort: (_event, index, direction) => {
+      setActiveSortIndex(index);
+      setActiveSortDirection(direction);
+    },
+    columnIndex
+  });
+
+  return (
+    <InnerScrollContainer>
+      <Table aria-label="Sticky column table" gridBreakPoint="">
+        <Thead>
+          <Tr>
+            <Th modifier="truncate" sort={getSortParams(0)}>
+              {columnNames.name}
+            </Th>
+            <Th modifier="truncate" sort={getSortParams(1)}>
+              {columnNames.state}
+            </Th>
+            <Th modifier="truncate">{columnNames.header3}</Th>
+            <Th modifier="truncate">{columnNames.header4}</Th>
+            <Th modifier="truncate">{columnNames.header5}</Th>
+            <Th modifier="truncate">{columnNames.header6}</Th>
+            <Th modifier="truncate">{columnNames.header7}</Th>
+            <Th isStickyColumn hasLeftBorder stickyMinWidth="130px" stickyRightOffset="130px" modifier="truncate">
+              {columnNames.header8}
+            </Th>
+            <Th isStickyColumn stickyMinWidth="130px" modifier="truncate">
+              {columnNames.header9}
+            </Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {sortedFacts.map(fact => (
+            <Tr key={fact.name}>
+              <Th modifier="nowrap">{fact.name}</Th>
+              <Td modifier="nowrap" dataLabel={columnNames.state}>
+                {fact.state}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header3}>
+                {fact.detail1}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header4}>
+                {fact.detail2}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header5}>
+                {fact.detail3}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header6}>
+                {fact.detail4}
+              </Td>
+              <Td modifier="nowrap" dataLabel={columnNames.header7}>
+                {fact.detail5}
+              </Td>
+              <Td
+                isStickyColumn
+                hasLeftBorder
+                stickyMinWidth="130px"
+                stickyRightOffset="130px"
+                modifier="nowrap"
+                dataLabel={columnNames.header8}
+              >
+                {fact.detail6}
+              </Td>
+              <Td isStickyColumn stickyMinWidth="130px" modifier="nowrap" dataLabel={columnNames.header9}>
+                {fact.detail7}
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+    </InnerScrollContainer>
+  );
+};
diff --git a/packages/react-table/src/docs/demos/Table.md b/packages/react-table/src/docs/demos/Table.md
index 0059b0237d2..f82cd7b20e3 100644
--- a/packages/react-table/src/docs/demos/Table.md
+++ b/packages/react-table/src/docs/demos/Table.md
@@ -1664,7 +1664,7 @@ class StickyHeaderTableDemo extends React.Component {
 
 A toolbar may be added above a sticky table either inside or outside the `OuterScrollContainer`.
 
-```ts isFullscreen file="../../components/TableComposable/examples/TableStickyColumnsAndHeader.tsx"
+```ts isFullscreen file="../../components/Table/examples/TableStickyColumnsAndHeader.tsx"
 
 ```