diff --git a/packages/documentation-framework/components/cssVariables/cssSearch.js b/packages/documentation-framework/components/cssVariables/cssSearch.js
index 5c55bcb668..0c7e68824d 100644
--- a/packages/documentation-framework/components/cssVariables/cssSearch.js
+++ b/packages/documentation-framework/components/cssVariables/cssSearch.js
@@ -1,5 +1,5 @@
 import React from "react";
-import { TextInput } from "@patternfly/react-core";
+import { SearchInput } from "@patternfly/react-core";
 
 export class CSSSearch extends React.Component {
   constructor(props) {
@@ -9,7 +9,7 @@ export class CSSSearch extends React.Component {
     };
   }
 
-  onFilterChange = (_change, event) => {
+  onFilterChange = (event) => {
     this.setState(
       {
         filterValue: event.target.value
@@ -20,8 +20,7 @@ export class CSSSearch extends React.Component {
 
   render() {
     return (
-      <TextInput
-        type="text"
+      <SearchInput
         aria-label="Filter CSS Variables"
         placeholder="Filter CSS Variables"
         value={this.state.filterValue}
diff --git a/packages/documentation-framework/components/cssVariables/cssVariables.js b/packages/documentation-framework/components/cssVariables/cssVariables.js
index b948d1b74a..6322bc7376 100644
--- a/packages/documentation-framework/components/cssVariables/cssVariables.js
+++ b/packages/documentation-framework/components/cssVariables/cssVariables.js
@@ -1,12 +1,12 @@
 import React from "react";
 import { debounce } from "@patternfly/react-core";
 import {
-//  Table,
-//  TableHeader,
-//  TableBody,
-  sortable,
-  SortByDirection,
-  expandable
+  Table,
+  Thead,
+  Th,
+  Tr,
+  Tbody,
+  Td
 } from "@patternfly/react-table";
 import * as tokensModule from "@patternfly/react-tokens/dist/esm/componentIndex";
 import global_spacer_md from "@patternfly/react-tokens/dist/esm/global_spacer_md";
@@ -77,23 +77,10 @@ export class CSSVariables extends React.Component {
 
     this.flatList = flattenList(applicableFiles);
 
-    this.columns = [
-      ...props.hideSelectorColumn ? [] : [{
-         title: "Selector",
-         transforms: [sortable],
-         cellFormatters: [expandable]
-      }],
-      { title: "Variable", transforms: [sortable] },
-      { title: "Value", transforms: [sortable] }
-    ]
-
     this.state = {
       searchRE: '',
       rows: this.getFilteredRows(),
-      sortBy: {
-        index: 0,
-        direction: "asc" // a-z
-      }
+      allRowsExpanded: true
     };
   }
 
@@ -140,20 +127,16 @@ export class CSSVariables extends React.Component {
         ];
         filteredRows.push({
           isOpen: values ? false : undefined,
-          cells
+          cells,
+          details: values ? {
+            parent: rowNumber,
+            fullWidth: true,
+            data: mappingAsList(property, values)
+          } : undefined
         });
         rowNumber += 1;
         if (values) {
-          filteredRows.push({
-            parent: rowNumber,
-            fullWidth: true,
-            cells: [
-              {
-                title: mappingAsList(property, values)
-              }
-            ]
-          });
-          rowNumber += 1;
+          rowNumber += 1
         }
       }
     });
@@ -170,9 +153,10 @@ export class CSSVariables extends React.Component {
     } else {
       newRows[rowKey] = { ...newRows[rowKey], isOpen };
     }
-    this.setState({
+    this.setState(prevState => ({
       rows: newRows,
-    });
+      ...(collapseAll && {allRowsExpanded: !prevState.allRowsExpanded})
+    }));
   };
 
   getDebouncedFilteredRows = debounce(value => {
@@ -183,50 +167,68 @@ export class CSSVariables extends React.Component {
     });
   }, 500);
 
-  onSort = (_event, index, direction) => {
-    this.flatList = this.flatList.sort((a, b) => {
-      const indexToColMap = {
-        '1': 'selector',
-        '2': 'property',
-        '3': 'value'
-      };
-      const column = indexToColMap[index];
-      if (direction === SortByDirection.asc) {
-        return a[column] < b[column] ? -1 : a[column] > b[column] ? 1 : 0;
-      } else {
-        return a[column] > b[column] ? -1 : a[column] < b[column] ? 1 : 0;
-      }
-    });
-    this.setState({
-      sortBy: {
-        index,
-        direction
-      },
-      rows: this.getFilteredRows(this.state.searchRE)
-    });
-  };
-
   render() {
     return (
       <React.Fragment>
         <CSSSearch getDebouncedFilteredRows={this.getDebouncedFilteredRows} />
-{/*        <Table
+        <Table
           variant="compact"
           aria-label={`CSS Variables for prefixes ${this.prefix.join(" ")}`}
-          sortBy={this.state.sortBy}
-          onSort={this.onSort}
-          cells={this.columns}
-          rows={this.state.rows}
-          onCollapse={this.onCollapse}
-          canCollapseAll={true}
-          collapseAllAriaLabel="expand all css variables"
-          gridBreakPoint="grid-lg"
-          contentId="css-variables-content"
-          expandId="css-variables-toggle"
         >
-          <TableHeader />
-          <TableBody />
-        </Table>*/}
+          <Thead>
+            <Tr>
+              {!this.props.hideSelectorColumn && (
+                <React.Fragment>
+                  <Th expand={{
+                    areAllExpanded: this.state.allRowsExpanded,
+                    collapseAllAriaLabel: "Expand or collapse all CSS variables",
+                    onToggle: this.onCollapse
+                  }}/>
+                  <Th>Selector</Th>
+                </React.Fragment>
+              )}
+              <Th>Variable</Th>
+              <Th>Value</Th>
+            </Tr>
+          </Thead>
+          {!this.props.hideSelectorColumn ? (
+            this.state.rows.map((row, rowIndex) => (
+              <Tbody key={rowIndex} isExpanded={row.isOpen}>
+                <Tr>
+                  <Td
+                    expand={
+                      row.details
+                        ? {
+                          rowIndex,
+                          isExpanded: row.isOpen,
+                          onToggle: this.onCollapse,
+                          expandId: 'composable-expandable-example'
+                        }
+                        : undefined
+                    }
+                  />
+                  <Td dataLabel="Selector">{row.cells[0]}</Td>
+                  <Td dataLabel="Variable">{row.cells[1]}</Td>
+                  <Td dataLabel="Value">{row.cells[2]}</Td>
+                </Tr>
+                {row.details ? (
+                  <Tr isExpanded={row.isOpen}>
+                    {!row.details.fullWidth ? <Td /> : null}
+                    <Td dataLabel="Selector" colSpan={5}>{row.details.data}</Td>
+                  </Tr>
+                ) : null}
+              </Tbody>
+            ))) : (
+              <Tbody>
+                {this.state.rows.map((row, rowIndex) => (
+                  <Tr key={rowIndex}>
+                    <Td dataLabel="Variable">{row.cells[0]}</Td>
+                    <Td dataLabel="Value">{row.cells[1]}</Td>
+                  </Tr>
+                ))}
+              </Tbody>
+          )}
+        </Table>
       </React.Fragment>
     );
   }
diff --git a/packages/documentation-framework/components/propsTable/propsTable.js b/packages/documentation-framework/components/propsTable/propsTable.js
index 31fc56d064..9a6f520547 100644
--- a/packages/documentation-framework/components/propsTable/propsTable.js
+++ b/packages/documentation-framework/components/propsTable/propsTable.js
@@ -1,91 +1,97 @@
 import React from "react";
-//import { Badge } from "@patternfly/react-core";
+import { Badge } from "@patternfly/react-core";
 import {
-//  Table,
-//  TableHeader,
-//  TableBody,
-  cellWidth,
+  Table,
+  Caption,
+  Thead,
+  Th,
+  Tr,
+  Tbody,
+  Td,
+  TableText
 } from "@patternfly/react-table";
 import { AutoLinkHeader } from "../autoLinkHeader/autoLinkHeader";
-//import { PropTypeWithLinks } from "./propTypeWithLinks";
-//import { css } from "@patternfly/react-styles";
-//import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibility/accessibility";
+import { PropTypeWithLinks } from "./propTypeWithLinks";
+import { css } from "@patternfly/react-styles";
+import accessibleStyles from "@patternfly/react-styles/css/utilities/Accessibility/accessibility";
 
-export const PropsTable = ({ title, description, rows, allPropComponents }) => {
-  const columns = [
-    { title: "Name", transforms: [cellWidth(20)] },
-    { title: "Type", transforms: [cellWidth(20)] },
-    { title: "Default", transforms: [] },
-    { title: "Description", transforms: [] },
-  ];
-
-  return (
-    <React.Fragment>
-      <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
-      {/*<Table
-        className="pf-u-mt-md pf-u-mb-lg"
-        variant="compact"
-        aria-label={title}
-        caption={
-          <div>
-            {description && <div className="pf-u-mb-md">{description}</div>}
-            <div>
-              <span className="ws-prop-required">*</span>required
-            </div>
-          </div>
-        }
-        cells={columns}
-        gridBreakPoint="grid-lg"
-        rows={rows
-          // Sort required rows first
+export const PropsTable = ({ title, description, rows, allPropComponents }) => (
+  <React.Fragment>
+    <AutoLinkHeader size="h3">{title}</AutoLinkHeader>
+    <Table className="pf-u-mt-md pf-u-mb-lg" variant="compact" aria-label={title} gridBreakPoint="grid-lg">
+      <Caption>
+        {description && <div className="pf-u-mb-md">{description}</div>}
+        <div>
+          <span className="ws-prop-required">*</span>required
+        </div>
+      </Caption>
+      <Thead>
+        <Tr>
+          <Th width={20}>Name</Th>
+          <Th width={20}>Type</Th>
+          <Th>Default</Th>
+          <Th>Description</Th>
+        </Tr>
+      </Thead>
+      <Tbody>
+        {rows
           .sort((a, b) => (a.required === b.required ? 0 : a.required ? -1 : 1))
-          .map((row, idx) => ({
-            cells: [
-              <div className="pf-m-break-word">
-                {row.deprecated && "Deprecated: "}
-                {row.name}
-                {row.required ? (
-                  <React.Fragment key={`${row.name}-required-prop`}>
-                    <span
-                      aria-hidden="true"
-                      key={`${row.name}-asterisk`}
-                      className="ws-prop-required"
-                    >
-                      *
-                    </span>
-                    <span
-                      key={`${row.name}-required`}
-                      className={css(accessibleStyles.screenReader)}
-                    >
-                      required
-                    </span>
-                  </React.Fragment>
-                ) : (
-                  ""
-                )}
-                {row.beta && (
-                  <Badge
-                    key={`${row.name}-${idx}`}
-                    className="ws-beta-badge pf-u-ml-sm"
+          .map((row, idx) => (
+            <Tr key={idx}>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.deprecated && "Deprecated: "}
+                  {row.name}
+                  {row.required ? (
+                    <React.Fragment key={`${row.name}-required-prop`}>
+                  <span
+                    aria-hidden="true"
+                    key={`${row.name}-asterisk`}
+                    className="ws-prop-required"
                   >
-                    Beta
-                  </Badge>
-                )}
-              </div>,
-              <div className="pf-m-break-word">
-                <PropTypeWithLinks
-                  type={row.type}
-                  allPropComponents={allPropComponents}
-                />
-              </div>,
-              <div className="pf-m-break-word">{row.defaultValue}</div>,
-              <div className="pf-m-break-word">{row.description}</div>,
-            ],
-          }))}
-      >
-        <TableHeader />
-        <TableBody />
-      </Table>*/}
-    </React.Fragment>
-  );
-};
+                    *
+                  </span>
+                      <span
+                        key={`${row.name}-required`}
+                        className={css(accessibleStyles.screenReader)}
+                      >
+                    required
+                  </span>
+                    </React.Fragment>
+                  ) : (
+                    ""
+                  )}
+                  {row.beta && (
+                    <Badge
+                      key={`${row.name}-${idx}`}
+                      className="ws-beta-badge pf-u-ml-sm"
+                    >
+                      Beta
+                    </Badge>
+                  )}
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  <PropTypeWithLinks
+                    type={row.type}
+                    allPropComponents={allPropComponents}
+                  />
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.defaultValue}
+                </TableText>
+              </Td>
+              <Td>
+                <TableText wrapModifier="breakWord">
+                  {row.description}
+                </TableText>
+              </Td>
+            </Tr>
+          ))}
+      </Tbody>
+    </Table>
+  </React.Fragment>
+);
diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css
index d32cd3cefc..23995732fe 100644
--- a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css
+++ b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.css
@@ -12,10 +12,6 @@
   padding: 0 var(--pf-global--spacer--md);
 }
 
-.ws-patternfly-3 > svg {
-  margin-left: var(--pf-global--spacer--sm);
-}
-
 @media (min-width: 1200px) {
   .ws-page-sidebar {
     box-shadow: none !important;
diff --git a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
index 10a562087f..a5c685efbe 100644
--- a/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
+++ b/packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js
@@ -5,15 +5,16 @@ import {
   PageSidebar,
   Brand,
   Dropdown,
-  DropdownToggle,
   DropdownItem,
   DropdownGroup,
+  DropdownList,
   Divider,
   Masthead,
   MastheadToggle,
   MastheadMain,
   MastheadContent,
   MastheadBrand,
+  MenuToggle,
   PageToggleButton,
   Toolbar,
   ToolbarGroup,
@@ -23,7 +24,6 @@ import {
   Switch,
   SearchInput
 } from '@patternfly/react-core';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
 import BarsIcon from '@patternfly/react-icons/dist/esm/icons/bars-icon';
 import GithubIcon from '@patternfly/react-icons/dist/esm/icons/github-icon';
 import { SideNav, TopNav, GdprBanner } from '../../components';
@@ -48,14 +48,9 @@ const HeaderTools = ({
   const [isSearchExpanded, setIsSearchExpanded] = React.useState(false);
 
   const getDropdownItem = (version, isLatest = false) => (
-    <DropdownItem
-      key={version.name}
-      component={
-        <a href={isLatest ? '/' : `/${version.name}`}>
-          {`Release ${version.name}`}
-        </a>
-      }
-    />
+    <DropdownItem itemId={version.name} key={version.name} to={isLatest ? '/' : `/${version.name}`}>
+      {`Release ${version.name}`}
+    </DropdownItem>
   );
 
   const onChange = (_evt, value) => {
@@ -82,7 +77,7 @@ const HeaderTools = ({
           </ToolbarItem>
         )}
         <ToolbarGroup
-          alignment={{ default: 'alignRight' }}
+          align={{ default: 'alignRight' }}
           spaceItems={{ default: 'spacerNone', md: 'spacerMd' }}
         >
           {hasDarkThemeSwitcher && (
@@ -117,42 +112,51 @@ const HeaderTools = ({
           {hasVersionSwitcher && (
             <ToolbarItem>
               <Dropdown
-                isFullHeight
                 onSelect={() => setDropdownOpen(!isDropdownOpen)}
+                onOpenChange={(isOpen) => setDropdownOpen(isOpen)}
                 isOpen={isDropdownOpen}
-                toggle={(
-                  <DropdownToggle
-                    onToggle={() => setDropdownOpen(!isDropdownOpen)}
+                toggle={(toggleRef) => (
+                  <MenuToggle
+                    isFullHeight
+                    ref={toggleRef}
+                    onClick={() => setDropdownOpen(!isDropdownOpen)}
+                    isExpanded={isDropdownOpen}
                   >
                     Release {initialVersion.name}
-                  </DropdownToggle>
+                  </MenuToggle>
                 )}
-                dropdownItems={[
-                  <DropdownGroup key="latest" label="Latest">
+              >
+                <DropdownGroup key="Latest" label="Latest">
+                  <DropdownList>
                     {getDropdownItem(latestVersion, true)}
-                  </DropdownGroup>,
-                  <DropdownGroup key="Previous" label="Previous releases">
+                  </DropdownList>
+                </DropdownGroup>
+                <DropdownGroup key="Previous releases" label="Previous releases">
+                  <DropdownList>
                     {Object.values(versions.Releases)
                       .filter(version => !version.hidden && !version.latest)
                       .slice(0,3)
                       .map(version => getDropdownItem(version))}
-                  </DropdownGroup>,
-                  <Divider key="divider" className="ws-switcher-divider"/>,
-                  <DropdownItem
-                    key="PatternFly 3"
-                    className="ws-patternfly-3"
-                    target="_blank"
-                    href="https://pf3.patternfly.org/"
-                  >
-                    PatternFly 3
-                    <ExternalLinkAltIcon />
-                  </DropdownItem>
-                ]}
-              />
+                  </DropdownList>
+                </DropdownGroup>
+                <Divider key="divider" className="ws-switcher-divider"/>
+                <DropdownGroup key="Previous versions" label="Previous versions">
+                  <DropdownList>
+                    <DropdownItem
+                      key="PatternFly 3"
+                      className="ws-patternfly-3"
+                      isExternalLink
+                      to="https://pf3.patternfly.org/"
+                      itemId="patternfly-3"
+                    >
+                      PatternFly 3
+                    </DropdownItem>
+                  </DropdownList>
+                </DropdownGroup>
+              </Dropdown>
             </ToolbarItem>
           )}
-        </ToolbarGroup>
-      </ToolbarContent>
+        </ToolbarGroup></ToolbarContent>
     </Toolbar>
   );
 }
diff --git a/packages/documentation-framework/package.json b/packages/documentation-framework/package.json
index b272704af0..ed955f7725 100644
--- a/packages/documentation-framework/package.json
+++ b/packages/documentation-framework/package.json
@@ -83,9 +83,9 @@
   },
   "peerDependencies": {
     "@patternfly/patternfly": "^5.0.0-alpha.13",
-    "@patternfly/react-code-editor": "^5.0.0-alpha.7",
-    "@patternfly/react-core": "^5.0.0-alpha.7",
-    "@patternfly/react-table": "^5.0.0-alpha.7",
+    "@patternfly/react-code-editor": "^5.0.0-alpha.54",
+    "@patternfly/react-core": "^5.0.0-alpha.53",
+    "@patternfly/react-table": "^5.0.0-alpha.54",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"
   }
diff --git a/packages/documentation-framework/versions.json b/packages/documentation-framework/versions.json
index 51a15455e9..a969e9dfd6 100644
--- a/packages/documentation-framework/versions.json
+++ b/packages/documentation-framework/versions.json
@@ -5,18 +5,18 @@
       "date": "2022-02-08",
       "latest": true,
       "versions": {
-        "@patternfly/patternfly": "5.0.0-alpha.13",
+        "@patternfly/patternfly": "5.0.0-alpha.37",
+        "@patternfly/react-charts": "^7.0.0-alpha.14",
+        "@patternfly/react-code-editor": "^5.0.0-alpha.54",
+        "@patternfly/react-core": "^5.0.0-alpha.53",
+        "@patternfly/react-icons": "^5.0.0-alpha.8",
+        "@patternfly/react-styles": "^5.0.0-alpha.6",
+        "@patternfly/react-table": "^5.0.0-alpha.54",
+        "@patternfly/react-tokens": "^5.0.0-alpha.6",
         "@patternfly/react-catalog-view-extension": "4.95.1",
-        "@patternfly/react-charts": "7.0.0-alpha.3",
-        "@patternfly/react-code-editor": "5.0.0-alpha.7",
-        "@patternfly/react-core": "5.0.0-alpha.7",
         "@patternfly/react-drag-drop": "5.0.0-alpha.0",
-        "@patternfly/react-icons": "5.0.0-alpha.2",
         "@patternfly/react-inline-edit-extension": "4.86.118",
         "@patternfly/react-log-viewer": "4.87.100",
-        "@patternfly/react-styles": "5.0.0-alpha.2",
-        "@patternfly/react-table": "5.0.0-alpha.7",
-        "@patternfly/react-tokens": "5.0.0-alpha.2",
         "@patternfly/react-topology": "4.91.27",
         "@patternfly/react-virtualized-extension": "4.88.113"
       }
diff --git a/packages/v4/package.json b/packages/v4/package.json
index 905294cd73..6069a83f3d 100644
--- a/packages/v4/package.json
+++ b/packages/v4/package.json
@@ -17,11 +17,11 @@
     "screenshots": "pf-docs-framework screenshots"
   },
   "dependencies": {
-    "@patternfly/documentation-framework": "^2.0.0-alpha.0",
+    "@patternfly/documentation-framework": "^2.0.0-alpha.14",
     "@patternfly/quickstarts": "^2.4.0",
-    "@patternfly/react-catalog-view-extension": "^4.96.0",
-    "@patternfly/react-console": "^4.95.5",
-    "@patternfly/react-docs": "6.0.0-alpha.8",
+    "@patternfly/react-catalog-view-extension": "5.0.0-alpha.1",
+    "@patternfly/react-console": "^5.0.0-alpha.1",
+    "@patternfly/react-docs": "6.0.0-alpha.58",
     "@patternfly/react-log-viewer": "4.87.100",
     "@patternfly/react-topology": "^4.91.40",
     "react": "^17.0.0 || ^18.0.0",
diff --git a/packages/v4/patternfly-docs/content/design-guidelines/styles/colors/ColorSwatch.js b/packages/v4/patternfly-docs/content/design-guidelines/styles/colors/ColorSwatch.js
index 117b89d2c8..693bc7201c 100644
--- a/packages/v4/patternfly-docs/content/design-guidelines/styles/colors/ColorSwatch.js
+++ b/packages/v4/patternfly-docs/content/design-guidelines/styles/colors/ColorSwatch.js
@@ -1,6 +1,6 @@
 import React from 'react';
 import tokens from '@patternfly/react-tokens/dist/esm/patternfly_variables';
-import { Popover } from '@patternfly/react-core';
+import { Popover, Button } from '@patternfly/react-core';
 import { normalizeColor, tokenName } from './helpers';
 import './ColorSwatch.css';
 
@@ -35,7 +35,7 @@ export function ColorSwatch({
         {color}
       </code>
       <p>
-        <a href={token.value.replace('#', '#color-')}>
+        <a href='/developer-resources/global-css-variables#global-css-variables'>
           See all global CSS color variables
         </a>
       </p>
@@ -61,15 +61,17 @@ export function ColorSwatch({
         aria-label="Global CSS variable"
         bodyContent={popoverContent}
       >
-        <svg
-          width="44px"
-          height="44px"
-          viewBox="0 0 44 44"
-          style={isBoxShadow ? { boxShadow: `var(${color})` } : {}}
-        >
-          <circle cx="22" cy="22" r="22" style={{ fill: isBoxShadow ? 'white' : `var(${color})`, stroke: 'var(--pf-global--palette--black-300)' }} />
-          {label === 'Hover' && handSVG}
-        </svg>
+        <Button variant="plain" aria-label={`Global CSS variable info for ${color}`}>
+          <svg
+            width="44px"
+            height="44px"
+            viewBox="0 0 44 44"
+            style={isBoxShadow ? { boxShadow: `var(${color})` } : {}}
+          >
+            <circle cx="22" cy="22" r="22" style={{ fill: isBoxShadow ? 'white' : `var(${color})`, stroke: 'var(--pf-global--palette--black-300)' }} />
+            {label === 'Hover' && handSVG}
+          </svg>
+        </Button>
       </Popover>
       <div className="ws-color-swatch-description">
         <label className="ws-color-swatch-description-label">
diff --git a/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/IconRecommendations.js b/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/IconRecommendations.js
index c77e5391a5..01f7342aba 100644
--- a/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/IconRecommendations.js
+++ b/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/IconRecommendations.js
@@ -2,13 +2,12 @@ import React from 'react';
 import {
   Divider,
   SearchInput,
-  Title,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
-  EmptyState, 
-  EmptyStateVariant, 
-  EmptyStateIcon, 
+  EmptyState,
+  EmptyStateHeader,
+  EmptyStateIcon,
   EmptyStateBody,
   Spinner
 } from '@patternfly/react-core';
@@ -16,14 +15,12 @@ import * as icons from '@patternfly/react-icons';
 import './icons.css';
 import {
   Table,
-  TableHeader,
-  TableBody,
-  TableVariant,
-  sortable,
-  SortByDirection
+  Thead,
+  Th,
+  Tr,
+  Td,
+  Tbody
 } from '@patternfly/react-table';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Table/table';
 import { recommendationsArray } from './icon-migrations';
 import faArrowCircleODown from './fa-arrow-circle-o-down.svg';
 import faArrowCircleOUp from './fa-arrow-circle-o-up.svg';
@@ -37,6 +34,7 @@ import pfIconHistory from './pf-icon-history.svg';
 import pficonKey from './pficon-key.svg';
 import pficonSearch from './pficon-search.svg';
 import pficonSettings from './pficon-settings.svg';
+import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon";
 
 const iconSvgs = {
   'fa-arrow-circle-o-down': faArrowCircleODown,
@@ -53,154 +51,142 @@ const iconSvgs = {
   'pficon-settings': pficonSettings
 };
 
-export class IconRecommendations extends React.Component {
-  state = {
-    searchValue: '',
-    columns: [
-      { title: 'Old icon', transforms: [sortable], props: { className: css(styles.modifiers.fitContent)} },
-      { title: 'Updated icon', transforms: [sortable], props: { className: css(styles.modifiers.fitContent)} },
-      'Contextual usage'
-    ],
-    sortBy: {}
-  };
+export const IconRecommendations = () => {
+  const [searchValue, setSearchValue] = React.useState('');
+  const [sortByIndex, setSortByIndex] = React.useState();
+  const [sortDirection, setSortDirection] = React.useState();
 
-  handleSearchChange = (event, _checked) => {
-    const searchValue = event.target.value;
-    this.setState(() => ({
-      searchValue
-    }));
-  };
+  const getSortParams = columnIndex => ({
+    sortBy: {
+      index: sortByIndex,
+      direction: sortDirection,
+      defaultDirection: 'asc' // starting sort direction when first sorting a column. Defaults to 'asc'
+    },
+    onSort: (_event, index, direction) => {
+      setSortByIndex(index);
+      setSortDirection(direction);
+    },
+    columnIndex
+  });
 
-  onSort = (_event, index, direction) => {
-    this.setState({
-      sortBy: {
-        index,
-        direction
-      }
+  const filteredRows = React.useMemo(() => {
+    return recommendationsArray.filter(recommendation => {
+      const oldRec = recommendation[0];
+      const newRec = recommendation[1];
+      return oldRec.iconName.toLowerCase().includes(searchValue.toLowerCase()) ||
+        oldRec.iconUsage.toLowerCase().includes(searchValue.toLowerCase()) ||
+        oldRec.type.toLowerCase().includes(searchValue.toLowerCase()) ||
+        newRec.iconName.toLowerCase().includes(searchValue.toLowerCase()) ||
+        newRec.iconUsage.toLowerCase().includes(searchValue.toLowerCase()) ||
+        newRec.type.toLowerCase().includes(searchValue.toLowerCase())
     });
-  }
+  }, [searchValue]);
 
-  onClear = () => {
-    this.setState({ searchValue: '' });
-  }
-
-  buildRecommendationRows = (searchTerm) => recommendationsArray.filter(recGroup => recGroup
-    .some(obj => Object.values(obj).some(val => {
-      const cellText = val?.props?.children ? val.props.children : val;
-      return cellText.indexOf(searchTerm) > -1;
-    })))
-    .map(iconRow => iconRow
-      .reduce((acc, cur) => {
-        acc[cur.iconType].push({
-          name: cur.iconName,
-          icon: cur.iconName,
-          style: cur.style,
-          reactIcon: cur.reactIcon
-        });
-        if (cur.iconType === 'new') {
-          acc['iconUsage'].push(<div>{cur.iconUsage}</div>);
-        }
-        return acc;
-      }, {
-        old: [],
-        new: [],
-        iconUsage: []
-      })
-    );
-
-  render() {
-    const { searchValue, columns, sortBy } = this.state;
-    const { direction, index } = sortBy;
-    const SearchIcon = icons.SearchIcon;
-    const iconRecommendations = this.buildRecommendationRows(searchValue);
-    let iconRows = iconRecommendations.map((rowObj, idx) => {
-      const columnNames = Object.keys(rowObj);
-      const cells = columnNames.map(columnName => { // old
-        const cellObj = {
-          title: [],
-          key: `${columnName}-${idx}`
-        }; 
-        rowObj[columnName].map((cellLine, index) => {
-          const { icon, name, reactIcon } = cellLine;
-          const Icon = reactIcon !== 'svg' && icons[reactIcon];
-          const iconSvg = reactIcon === 'svg' && <img src={iconSvgs[name]} className="ws-icon-svg" alt={`${icon} icon`} />;
-          const SpinnerComponent = reactIcon === 'PF-Spinner-Component';
-          
-          (columnName === 'iconUsage')
-            ? cellObj.title.push(<div className="ws-recommendations-entry" key={`${name}-${index}`}>{cellLine}</div>)
-            : cellObj.title.push(<div className={`${css(styles.modifiers.fitContent)} ws-recommendations-entry`} key={`${name}-${index}`}>
-              <span className="ws-recommendations-icon">
-                {Icon && <Icon />}
-                {iconSvg}
-                {SpinnerComponent && <Spinner size='md' />}
-              </span>
-              {icon}
-            </div>);
-
-          return null;
-        });
-        return cellObj;
-      });
-      return cells;
-    });
-
-    if (direction) {
-      const sortedRows = iconRows.sort((a, b) => {
-        const cellA = a[index].title[0].key.toLowerCase();
-        const cellB = b[index].title[0].key.toLowerCase();
+  const sortedRows = React.useMemo(() => {
+    let rows = filteredRows;
+    if (sortByIndex !== null) {
+      rows.sort((a, b) => {
+        const cellA = sortByIndex === 0 ? a[0].iconName.toLowerCase() : a[a.length - 1].iconName.toLowerCase();
+        const cellB = sortByIndex === 0 ? b[0].iconName.toLowerCase() : b[b.length - 1].iconName.toLowerCase();
         return cellA < cellB
           ? -1
           : cellA > cellB
-            ? 1 : 0});
-      iconRows = direction === SortByDirection.asc ? sortedRows : sortedRows.reverse();
+            ? 1 : 0
+      });
     }
-    
-    return (
-      <div>
-        <Toolbar id="data-toolbar-recs">
-          <ToolbarContent>
-            <ToolbarItem>
-              <SearchInput
-                name="recommendedIconsSearch"
-                id="recommendedIconsSearch"
-                aria-label="Search icons"
-                placeholder="Search for any icon or usage guideline"
-                value={searchValue}
-                onChange={this.handleSearchChange}
-                onClear={this.onClear}
-              />
-            </ToolbarItem>
-            <ToolbarItem alignment={{ default: 'alignRight' }}>
-              <b>{iconRows.length} items</b>
-            </ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-        <Divider />
-        <Table
-          aria-label="Updated icons table"
-          cells={columns}
-          rows={iconRows}
-          className="ws-icons-recommendations"
-          sortBy={sortBy}
-          onSort={this.onSort}
-          variant={TableVariant.compact}
-        >
-          <TableHeader />
-          <TableBody />
-        </Table>
+    return sortDirection === 'asc' ? rows : rows.reverse();
+  }, [sortByIndex, sortDirection, filteredRows]);
 
-          {iconRows.length === 0 && (
-          <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateIcon icon={icons.SearchIcon}/>
-            <Title headingLevel="h5" size="2xl">
-              No results found for "{ searchValue }".
-            </Title>
-            <EmptyStateBody>
-              We couldn't find any icons that matched your search. Try entering a new search term to find what you're looking for.
-            </EmptyStateBody>
-          </EmptyState>
-        )}
-      </div>
-    );
-  }
+  return (
+    <div>
+      <Toolbar id="data-toolbar-recs">
+        <ToolbarContent>
+          <ToolbarItem>
+            <SearchInput
+              name="recommendedIconsSearch"
+              id="recommendedIconsSearch"
+              aria-label="Search update icon recommendations"
+              placeholder="Search for any icon or usage guideline"
+              value={searchValue}
+              onChange={(_, value) => setSearchValue(value)}
+              onClear={() => setSearchValue('')}
+            />
+          </ToolbarItem>
+          <ToolbarItem align={{ default: 'alignRight' }}>
+            <b>{filteredRows.length} items</b>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <Divider />
+      <Table
+        aria-label="Updated icons table"
+        className="ws-icons-recommendations"
+        variant="compact"
+      >
+        <Thead>
+          <Tr>
+            <Th sort={getSortParams(0)}>Old icon</Th>
+            <Th sort={getSortParams(1)}>Updated icon</Th>
+            <Th>Contextual usage</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {sortedRows.map(recommendation => (
+            <Tr key={recommendation[0].iconName}>
+              <Td data-label="Old icon" modifier="fitContent">
+                {recommendation.map(oldRec => {
+                  if (oldRec.iconType === "old") {
+                    const oldIconSvg = oldRec.reactIcon === 'svg' &&
+                      <img src={iconSvgs[oldRec.iconName]} className="ws-icon-svg" alt={`${oldRec.iconName} icon`}/>;
+                    const OldIcon = oldRec.reactIcon !== 'svg' && icons[oldRec.reactIcon];
+                    return (
+                      <div className="ws-recommendations-entry" key={oldRec.iconName + oldRec.iconType + oldRec.iconUsage}>
+                        <span className="ws-recommendations-icon">
+                          {OldIcon && <OldIcon/>}
+                          {oldIconSvg}
+                        </span>
+                          {oldRec.iconName}
+                      </div>
+                    );
+                  } else return '';
+                })}
+              </Td>
+              <Td data-label="Updated icon"  modifier="fitContent">
+                {recommendation.map(newRec => {
+                  if (newRec.iconType === "new") {
+                    const newIconSvg = newRec.reactIcon === 'svg' &&
+                      <img src={iconSvgs[newRec.iconName]} className="ws-icon-svg" alt={`${newRec.iconName} icon`}/>;
+                    const NewIcon = newRec.reactIcon !== 'svg' && icons[newRec.reactIcon];
+                    return (
+                      <div className="ws-recommendations-entry" key={newRec.iconName + newRec.iconType + newRec.iconUsage}>
+                        <span className="ws-recommendations-icon">
+                          {NewIcon && <NewIcon/>}
+                          {newIconSvg}
+                          {newRec.reactIcon === 'PF-Spinner-Component' && <Spinner size='md'/>}
+                        </span>
+                        {newRec.iconName}
+                      </div>
+                    );
+                  } else return '';
+                })}
+              </Td>
+              <Td data-label="Contextual usage">
+                {recommendation.map(rec => {
+                  return rec.iconUsage
+                })}
+              </Td>
+            </Tr>
+          ))}
+        </Tbody>
+      </Table>
+      {filteredRows.length === 0 && (
+        <EmptyState>
+          <EmptyStateHeader titleText={`No results found for "${ searchValue }"`} headingLevel="h5" icon={<EmptyStateIcon icon={SearchIcon} />} />
+          <EmptyStateBody>
+            We couldn't find any icons that matched your search. Try entering a new search term to find what you're looking for.
+          </EmptyStateBody>
+        </EmptyState>
+      )}
+    </div>
+  );
 }
diff --git a/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/IconsTable.js b/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/IconsTable.js
index b38e205914..6787da250f 100644
--- a/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/IconsTable.js
+++ b/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/IconsTable.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import {
+  Button,
   Divider,
   SearchInput,
-  Title,
   Toolbar,
   ToolbarContent,
   ToolbarItem,
-  EmptyState, 
-  EmptyStateVariant, 
-  EmptyStateIcon, 
+  EmptyState,
+  EmptyStateHeader,
+  EmptyStateIcon,
   EmptyStateBody,
   Tooltip,
   TooltipPosition
@@ -17,58 +17,44 @@ import * as icons from '@patternfly/react-icons';
 import './icons.css';
 import {
   Table,
-  TableHeader,
-  TableBody,
-  TableVariant,
-  sortable,
-  SortByDirection
+  Tbody,
+  Thead,
+  Tr,
+  Th,
+  Td
 } from '@patternfly/react-table';
 import { iconsData } from './icons';
 import { saveAs } from 'file-saver';
-import { css } from '@patternfly/react-styles';
-import styles from '@patternfly/react-styles/css/components/Table/table';
+import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
 import * as iconUnicodes from '@patternfly/patternfly/assets/icons/iconUnicodes.json';
 
-export class IconsTable extends React.Component {
-  state = {
-    searchValue: '',
-    columns: [
-      'Icon',
-      { title: 'Name', transforms: [sortable], props: { className: css(styles.modifiers.fitContent)} },
-      'Style',
-      'Type',
-      'React',
-      { title: 'Usage/tooltip', transforms: [sortable] },
-      { title: 'Unicode', props: { className: css(styles.modifiers.fitContent)}}
-    ],
-    sortBy: {},
-    tooltipContent: 'Copy'
-  };
-
-  handleSearchChange = (event, _checked) => {
-    const searchValue = event.target.value;
-    this.setState(() => ({
-      searchValue
-    }));
-  };
-
-  onSort = (_event, index, direction) => {
-    this.setState({
-      sortBy: {
-        index,
-        direction
-      }
-    });
-  }
-
-  onDownloadSvg = ({ currentTarget }) => {
-    const domNode = currentTarget.cloneNode(true);
+export const IconsTable = () => {
+  const columns = ['Icon', 'Name', 'Style', 'React', 'Usage/tooltip', 'Unicode'];
+  const [searchValue, setSearchValue] = React.useState('');
+  const [isCopied, setCopied] = React.useState(false);
+  const [sortByIndex, setSortByIndex] = React.useState();
+  const [sortDirection, setSortDirection] = React.useState();
+
+  const getSortParams = columnIndex => ({
+    sortBy: {
+      index: sortByIndex,
+      direction: sortDirection,
+      defaultDirection: 'asc' // starting sort direction when first sorting a column. Defaults to 'asc'
+    },
+    onSort: (_event, index, direction) => {
+      setSortByIndex(index);
+      setSortDirection(direction);
+    },
+    columnIndex
+  });
+
+  const onDownloadSvg = (currentTarget, name) => {
+    const domNode = currentTarget.children[0].cloneNode(true);
     domNode.setAttribute("xmlns", "http://www.w3.org/2000/svg");
     domNode.setAttribute("width", "100%");
     domNode.setAttribute("height", "100%");
     const { outerHTML } = domNode;
     const preface = '<?xml version="1.0" standalone="no"?>\r\n';
-    const name = currentTarget.parentElement.nextSibling.textContent;
     const filename = `${name}.svg`;
 
     const blob = new Blob([preface, outerHTML], {
@@ -78,189 +64,137 @@ export class IconsTable extends React.Component {
     saveAs(blob, filename);
   };
 
-  onCopyText = event => {
-    const text = event.currentTarget.textContent;
-    const clipboard = event.currentTarget.parentElement;
-    const el = document.createElement('textarea');
-    el.value = text.toString();
-    clipboard.appendChild(el);
-    el.select();
-    document.execCommand('copy');
-    clipboard.removeChild(el);
-    this.setState({ tooltipContent: 'Copied' })
-  }
-
-  onHoverUnicode = () => {
-    this.setState({ tooltipContent: 'Copy' })
-  }
-
-  onClear = () => {
-    this.setState({ searchValue: '' });
-  }
-
-  customRowWrapper = ({
-    trRef,
-    rowProps,
-    ...props
-  }) => {
-    const removeBorder = props.row.removeBorder;
-    const customStyle = {
-      borderBottom: 'none'
-    }
-    return (
-      <tr
-        {...props}
-        ref={trRef}
-        style={removeBorder ? customStyle : {}}
-      />
-    );
-  }
-
-  buildRows = ({
-    Style = ' ', 
-    Name = ' ', 
-    React_name: ReactName = ' ', 
-    Type = ' ', 
-    Contextual_usage = ' ', 
-    color, 
-    Label = null, 
-    Unicode
-  }, removeBorder = false) => {
-    const hasIcon = ReactName !== ' ';
-    const Icon = hasIcon
-      ? icons[ReactName]
-      : null;
-    // 2 unicodes are hard coded in icons.js, otherwise find in unicodes mapping from Core
-    const iconUnicode = Unicode || iconUnicodes.default[Name] || '';
-  
-    return {
-      removeBorder,
-      cells: [
-        {
-          title: hasIcon
-            ? (<Tooltip content="Download SVG" position={TooltipPosition.bottom}><Icon onClick={this.onDownloadSvg} color={color} /></Tooltip>)
-            : ' ',
-          props: { column: 'Icon' }
-        },
-        {
-          title: Name,
-          props: { column: 'Name' }
-        },
-        Style,
-        {
-          title: Type,
-          props: { column: 'Type' }
-        },
-        ReactName,
-        {
-          title: Label
-            ? (
-              <>
-                <div>{Contextual_usage}</div>
-                <br/>
-                <div>Tooltip: {Label}</div>
-              </>
-            )
-            : Contextual_usage,
-          props: { column: 'Usage/tooltip' }
-        },
-        {
-          title: <Tooltip content={this.state.tooltipContent} position={TooltipPosition.bottom}><span onMouseEnter={this.onHoverUnicode} onClick={this.onCopyText} color={color}>{iconUnicode}</span></Tooltip>,
-          props: { column: 'Unicode' }
-        }
-      ]
-    }
+  const clipboardCopyFunc = (event, text) => {
+    navigator.clipboard.writeText(text.toString());
+    setCopied(true);
   };
 
-  render() {
-    const { searchValue, columns, sortBy } = this.state;
-    const { direction, index } = sortBy;
-    const SearchIcon = icons.SearchIcon;
-    const searchRE = new RegExp(searchValue, 'i');
-    const iconRows = iconsData
-      .map(row => {
-        if (Array.isArray(row)) {
-          const lastIdx = row.length - 1;
-          return row.map((subRow, idx) => idx < lastIdx
-            ? this.buildRows(subRow, true)
-            : this.buildRows(subRow, false)
-          )
-        }
-        return this.buildRows(row);
-      })
-
-    let filteredRows = iconRows.filter(row => {
-      const isSearchMatch = row =>row.cells.some(cell => {
-        const searchField = typeof cell.title === 'string'
-          ? cell.title
-          : cell;
-        return searchRE.test(searchField);
-      })
-
-      return Array.isArray(row)
-        ? row.some(subRow => isSearchMatch(subRow))
-        : isSearchMatch(row)
-    })
-
-    if (direction) {
-      const sortedRows = filteredRows.sort((a, b) => {
-        a = Array.isArray(a) ? a[0] : a;
-        b = Array.isArray(b) ? b[0] : b;
-        return a.cells[index].title < b.cells[index].title
+  const filteredRows = React.useMemo(() => {
+    return iconsData.filter(icon => {
+      return icon.Name.toLowerCase().includes(searchValue.toLowerCase()) ||
+        icon.Contextual_usage?.toLowerCase().includes(searchValue.toLowerCase()) ||
+        icon.Extra_context?.toLowerCase().includes(searchValue.toLowerCase()) ||
+        icon.Label?.toLowerCase().includes(searchValue.toLowerCase()) ||
+        (typeof icon.Type === "string" && icon.Type.toLowerCase().includes(searchValue.toLowerCase())) ||
+        (Array.isArray(icon.Type) && icon.Type.filter((type) => type.toLowerCase().includes(searchValue.toLowerCase())).length > 0)
+    });
+  }, [searchValue]);
+
+  const sortedRows = React.useMemo(() => {
+    let rows = filteredRows;
+    if (sortByIndex !== null) {
+      rows.sort((a, b) => {
+        const cellA = sortByIndex === 1 ? a.Name.toLowerCase() : a.Contextual_usage.toLowerCase();
+        const cellB = sortByIndex === 1 ? b.Name.toLowerCase() : b.Contextual_usage.toLowerCase();
+        return cellA < cellB
           ? -1
-          : a.cells[index].title > b.cells[index].title
-            ? 1 : 0});
-      filteredRows = direction === SortByDirection.asc ? sortedRows : sortedRows.reverse();
+          : cellA > cellB
+            ? 1 : 0
+      });
     }
-    
-    return (
-      <div>
-        <Toolbar id="data-toolbar-table">
-          <ToolbarContent>
-            <ToolbarItem>
-              <SearchInput
-                name="iconsSearch"
-                id="iconsSearch"
-                aria-label="Search icons"
-                placeholder="Search for any icon, attribute, or usage guideline"
-                value={searchValue}
-                onChange={this.handleSearchChange}
-                onClear={this.onClear}
-              />
-            </ToolbarItem>
-            <ToolbarItem alignment={{ default: 'alignRight' }}>
-              <b>{filteredRows.length} items</b>
-            </ToolbarItem>
-          </ToolbarContent>
-        </Toolbar>
-        <Divider />
-        <Table
-          aria-label="Sortable Table"
-          sortBy={sortBy}
-          onSort={this.onSort}
-          cells={columns}
-          rows={filteredRows.flat()}
-          variant={TableVariant.compact}
-          id="ws-icons-table"
-          rowWrapper={this.customRowWrapper}
-        >
-          <TableHeader />
-          <TableBody />
-        </Table>
-
-        {filteredRows.length === 0 && (
-          <EmptyState variant={EmptyStateVariant.full}>
-            <EmptyStateIcon icon={icons.SearchIcon}/>
-            <Title headingLevel="h5" size="2xl">
-              No results found for "{ searchValue }"
-            </Title>
-            <EmptyStateBody>
-            We couldn't find any icons that matched your search. If none of the icons listed fit 
+    return sortDirection === 'asc' ? rows : rows.reverse();
+  }, [sortByIndex, sortDirection, filteredRows]);
+
+  return (
+    <div>
+      <Toolbar id="data-toolbar-table">
+        <ToolbarContent>
+          <ToolbarItem>
+            <SearchInput
+              name="iconsSearch"
+              id="iconsSearch"
+              aria-label="Search icons"
+              placeholder="Search for any icon, attribute, or usage guideline"
+              value={searchValue}
+              onChange={(_, value) => setSearchValue(value)}
+              onClear={() => setSearchValue('')}
+            />
+          </ToolbarItem>
+          <ToolbarItem align={{ default: 'alignRight' }}>
+            <b>{filteredRows.length} items</b>
+          </ToolbarItem>
+        </ToolbarContent>
+      </Toolbar>
+      <Divider />
+      <Table
+        aria-label="Filterable PatternFly icons"
+        variant={'compact'}
+        id="ws-icons-table"
+      >
+        <Thead>
+          <Tr>
+            <Th>{columns[0]}</Th>
+            <Th sort={getSortParams(1)}>{columns[1]}</Th>
+            <Th>{columns[2]}</Th>
+            <Th>{columns[3]}</Th>
+            <Th sort={getSortParams(4)}>{columns[4]}</Th>
+            <Th modifier="fitContent">{columns[5]}</Th>
+          </Tr>
+        </Thead>
+        <Tbody>
+          {sortedRows.map((icon, index) => {
+            const Icon = icons[icon.React_name];
+            const iconUnicode = icon.Unicode || iconUnicodes.default[icon.Name] || '';
+            return (
+              <Tr key={index}>
+                <Td dataLabel={columns[0]} className="pf-c-table__favorite">
+                  <Tooltip content="Download SVG" position={TooltipPosition.right}>
+                    <Button
+                      aria-label={`Download SVG ${icon.Name}`}
+                      onClick={(event) => onDownloadSvg(event.currentTarget, icon.Name)}
+                      variant="plain"
+                    >
+                      <Icon color={icon.color || 'var(--pf-global--Color--100)'} />
+                    </Button>
+                  </Tooltip>
+                </Td>
+                <Td dataLabel={columns[1]} modifier="fitContent">{icon.Name}</Td>
+                <Td dataLabel={columns[2]}>{icon.Style}</Td>
+                <Td dataLabel={columns[4]}>{icon.React_name}</Td>
+                <Td dataLabel={columns[5]}>
+                  {icon.Contextual_usage}
+                  {icon.Extra_context && (
+                    <React.Fragment>
+                      <br/><br/>{icon.Extra_context}
+                    </React.Fragment>
+                  )}
+                  {icon.Label && (
+                    <React.Fragment>
+                      <br/><br/>Tooltip:{icon.Label}
+                    </React.Fragment>
+                  )}
+                </Td>
+                <Td dataLabel={columns[6]}>
+                  <Tooltip
+                    trigger="mouseenter focus click"
+                    content={<div>{isCopied ? 'Copied' : 'Copy'}</div>}
+                    position={TooltipPosition.left}
+                    exitDelay={isCopied ? 1000 : 100}
+                    onTooltipHidden={() => setCopied(false)}
+                  >
+                    <Button
+                      aria-label={`Copy ${icon.Name} icon unicode to clipboard`}
+                      variant="plain"
+                      onClick={(event) => clipboardCopyFunc(event, iconUnicode)}
+                    >
+                      {iconUnicode}
+                    </Button>
+                  </Tooltip>
+                </Td>
+              </Tr>
+            )
+          })}
+        </Tbody>
+      </Table>
+
+      {filteredRows.length === 0 && (
+        <EmptyState>
+          <EmptyStateHeader titleText={`No results found for "${ searchValue }"`} headingLevel="h4" icon={<EmptyStateIcon icon={SearchIcon} />} />
+          <EmptyStateBody>We couldn't find any icons that matched your search. If none of the icons listed fit
             your use case, you may use any additional 'fa' icons within <a href="https://fontawesome.com/icons?d=gallery&amp;m=free">Font Awesome's free set</a>.
-            </EmptyStateBody>
-          </EmptyState>
-        )}
-      </div>
-    );
-  }
+          </EmptyStateBody>
+        </EmptyState>
+      )}
+    </div>
+  );
 }
diff --git a/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icon-migrations.js b/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icon-migrations.js
index f34aae5f09..5ba0dfe4f1 100644
--- a/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icon-migrations.js
+++ b/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icon-migrations.js
@@ -1195,14 +1195,6 @@ export const recommendationsArray = [
     }
   ],
   [
-    {
-      style: "",
-      iconName: "pficon-arrow",
-      type: "",
-      iconUsage: "",
-      iconType: "old",
-      reactIcon: "ArrowIcon"
-    },
     {
       style: "fas",
       iconName: "fas fa-share-square",
@@ -1210,6 +1202,14 @@ export const recommendationsArray = [
       iconUsage: "Indicates the ability to share via various methods with others",
       iconType: "new",
       reactIcon: "ShareSquareIcon"
+    },
+    {
+      style: "",
+      iconName: "pficon-arrow",
+      type: "",
+      iconUsage: "",
+      iconType: "old",
+      reactIcon: "ArrowIcon"
     }
   ],
   [
@@ -1313,7 +1313,7 @@ export const recommendationsArray = [
       style: "",
       iconName: "",
       type: "",
-      iconUsage: <span>Use the animated <Link to="/components/spinner">PatternFly Spinner component</Link> to indicate that something is "loading" or in the middle of processing</span>,
+      iconUsage: <span key="spinner component">Use the animated <Link to="/components/spinner">PatternFly Spinner component</Link> to indicate that something is "loading" or in the middle of processing</span>,
       iconType: "new",
       reactIcon: "PF-Spinner-Component"
     }
diff --git a/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icons.js b/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icons.js
index 10a5d10196..8c61dd14a3 100644
--- a/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icons.js
+++ b/packages/v4/patternfly-docs/content/design-guidelines/styles/icons/icons.js
@@ -27,18 +27,14 @@ export const iconsData = [
     "Type": "Framework",
     "Contextual_usage": "Indicates the ability to navigate to the previous page of a multi-page data set",
   },
-  [
-    {
-      "Style": "fas",
-      "Name": "fa-angle-right",
-      "React_name": "AngleRightIcon",
-      "Type": "Framework",
-      "Contextual_usage": "Indicates expandable elements such as accordions, progressive disclosures, or expandable lists are currently collapsed. Clicking this will expand the element.",
-    },
-    {
-      "Contextual_usage": "Also indicates the ability to navigate to the next page in a multipage data set.",
-    }
-  ],
+  {
+    "Style": "fas",
+    "Name": "fa-angle-right",
+    "React_name": "AngleRightIcon",
+    "Type": "Framework",
+    "Contextual_usage": "Indicates expandable elements such as accordions, progressive disclosures, or expandable lists are currently collapsed. Clicking this will expand the element.",
+    "Extra_context": "Also indicates the ability to navigate to the next page in a multipage data set."
+  },
   {
     "Style": "fas",
     "Name": "fa-angle-up",
@@ -103,7 +99,6 @@ export const iconsData = [
     "Type": "Framework",
     "Contextual_usage": "Indicates the ability to collapse a navigation menu",
   },
-  [
     {
       "Style": "fas",
       "Name": "fa-bell",
@@ -114,7 +109,7 @@ export const iconsData = [
     },
     {
       "Style": "",
-      "Name": "fa-bell",
+      "Name": "fa-bell (blue)",
       "React_name": "BellIcon",
       "Type": "Status",
       "Contextual_usage": "Represents status: default notification",
@@ -126,8 +121,7 @@ export const iconsData = [
       "React_name": "AttentionBellIcon",
       "Type": "Status",
       "Contextual_usage": "Represents status: attention",
-    }
-  ],
+    },
   {
     "Style": "fas",
     "Name": "fa-bug",
@@ -156,20 +150,15 @@ export const iconsData = [
     "Type": "Status",
     "Contextual_usage": "Represents status: Indicates a switch toggle is in the enabled position",
   },
-  [
-    {
-      "Style": "fas",
-      "Name": "fa-check-circle",
-      "React_name": "CheckCircleIcon",
-      "Type": "Action",
-      "Contextual_usage": "Indicates the ability to commit edited changes.",
-      color: 'var(--pf-global--success-color--100)',
-    },
-    {
-      "Type": "Status",
-      "Contextual_usage": "Represents status: OK in content views such as a tables",
-    }
-  ],
+  {
+    "Style": "fas",
+    "Name": "fa-check-circle",
+    "React_name": "CheckCircleIcon",
+    "Type": ["Action","Status"],
+    "Contextual_usage": "Indicates the ability to commit edited changes",
+    "Extra_context": "Represents status: OK in content views such as a tables",
+    color: 'var(--pf-global--success-color--100)',
+  },
   {
     "Style": "fas",
     "Name": "fa-clipboard-check",
@@ -358,43 +347,30 @@ export const iconsData = [
     "Type": "Action",
     "Contextual_usage": "Indicates the ability to filter search results or datasets",
   },
-  [
-    {
-      "Style": "fas",
-      "Name": "fa-flag",
-      "React_name": "FlagIcon",
-      "Type": "Object",
-      "Contextual_usage": "Represents a message",
-    },
-    {
-      "Type": "Action",
-      "Contextual_usage": "Also indicates the ability to access a messages",
-    }
-  ],
-  [
-    {
-      "Style": "fas",
-      "Name": "fa-folder",
-      "React_name": "FolderIcon",
-      "Type": "Framework",
-      "Contextual_usage": "Represents a collapsed hierarchical group.",
-    },
-    {
-      "Contextual_usage": "Indicates the ability to expand the group.",
-    }
-  ],
-  [
-    {
-      "Style": "fas",
-      "Name": "fa-folder-open",
-      "React_name": "FolderOpenIcon",
-      "Type": "Framework",
-      "Contextual_usage": "Represents an expanded hierarchical group.",
-    },
-    {
-      "Contextual_usage": "Indicates the ability to collapse the group.",
-    }
-  ],
+  {
+    "Style": "fas",
+    "Name": "fa-flag",
+    "React_name": "FlagIcon",
+    "Type": ["Object", "Action"],
+    "Contextual_usage": "Represents a message.",
+    "Extra_context": "Also indicates the ability to access a messages.",
+  },
+  {
+    "Style": "fas",
+    "Name": "fa-folder",
+    "React_name": "FolderIcon",
+    "Type": "Framework",
+    "Contextual_usage": "Represents a collapsed hierarchical group.",
+    "Extra_context": "Indicates the ability to expand the group.",
+  },
+  {
+    "Style": "fas",
+    "Name": "fa-folder-open",
+    "React_name": "FolderOpenIcon",
+    "Type": "Framework",
+    "Contextual_usage": "Represents an expanded hierarchical group.",
+    "Extra_context": "Indicates the ability to collapse the group.",
+  },
   {
     "Style": "fas",
     "Name": "fa-grip-horizontal",
@@ -609,7 +585,7 @@ export const iconsData = [
   },
   {
     "Style": "far",
-    "Name": "fa-question-circle",
+    "Name": "fa-question-circle (outlined)",
     "React_name": "OutlinedQuestionCircleIcon",
     "Type": "Framework",
     "Contextual_usage": "Indicates the availability of contextual help",
@@ -761,19 +737,14 @@ export const iconsData = [
     "Type": "Action",
     "Contextual_usage": "Indicates an upload function is available",
   },
-  [
-    {
-      "Style": "fas",
-      "Name": "fa-user",
-      "React_name": "UserIcon",
-      "Type": "Object",
-      "Contextual_usage": "Represents a user (in a dataset, paired with a username).",
+  {
+    "Style": "fas",
+    "Name": "fa-user",
+    "React_name": "UserIcon",
+    "Type": ["Framework","Object"],
+    "Contextual_usage": "Represents a user (in a dataset, paired with a username).",
+    "Extra_context": "Indicates the availability of a user profile (in the masthead, paired with a username).",
     },
-    {
-      "Type": "Framework",
-      "Contextual_usage": "Indicates the availability of a user profile (in the masthead, paired with a username)",
-    }
-  ],
   {
     "Style": "fas",
     "Name": "fa-users",
diff --git a/packages/v4/patternfly-docs/patternfly-docs.source.js b/packages/v4/patternfly-docs/patternfly-docs.source.js
index 90b67318a9..60060ca81d 100644
--- a/packages/v4/patternfly-docs/patternfly-docs.source.js
+++ b/packages/v4/patternfly-docs/patternfly-docs.source.js
@@ -44,9 +44,9 @@ module.exports = (sourceMD, sourceProps) => {
   const reactLogViewerPath = require
     .resolve('@patternfly/react-log-viewer/package.json')
     .replace('package.json', 'src');
-    const reactTopologyPath = require
-    .resolve('@patternfly/react-topology/package.json')
-    .replace('package.json', 'src');
+  //const reactTopologyPath = require
+  //  .resolve('@patternfly/react-topology/package.json')
+  //  .replace('package.json', 'src');
 
   const logViewerContentBase = require
     .resolve('@patternfly/react-log-viewer/package.json')
@@ -58,7 +58,7 @@ module.exports = (sourceMD, sourceProps) => {
   sourceProps(path.join(reactCodeEditorPath, '/**/*.tsx'),reactPropsIgnore);
   sourceProps(path.join(reactChartsPath, '/**/*.tsx'),reactPropsIgnore);
   sourceProps(path.join(reactLogViewerPath, '/**/*.tsx'), reactPropsIgnore);
-  sourceProps(path.join(reactTopologyPath, '/**/*.tsx'), reactPropsIgnore);
+  //sourceProps(path.join(reactTopologyPath, '/**/*.tsx'), reactPropsIgnore);
 
   // React MD
   sourceMD(path.join(reactCorePath, '/components/**/examples/*.md'), 'react');
@@ -68,8 +68,7 @@ module.exports = (sourceMD, sourceProps) => {
   sourceMD(path.join(reactCorePath, '/**/demos/**/*.md'), 'react-demos');
 
   // React-table MD
-  sourceMD(path.join(reactTablePath, '/**/TableComposable/examples/*.md'), 'react');
-  sourceMD(path.join(reactTablePath, '/**/Table/examples/*.md'), 'react-legacy');
+  sourceMD(path.join(reactTablePath, '/components/**/examples/*.md'), 'react');
   sourceMD(path.join(reactTablePath, '/deprecated/components/**/examples/*.md'), 'react-deprecated');
   sourceMD(path.join(reactTablePath, '/**/demos/*.md'), 'react-demos');
 
@@ -84,7 +83,8 @@ module.exports = (sourceMD, sourceProps) => {
   sourceMD(path.join(logViewerContentBase, '/**/demos/*.md'), 'react-demos');
 
   // React-topology MD
-  sourceMD(path.join(reactTopologyPath, '/**/examples/*.md'), 'react');
+  // Topology mappings commented out until Topology is compatible with v5
+  // sourceMD(path.join(reactTopologyPath, '/**/examples/*.md'), 'react');
 
   // React OUIA MD
   sourceMD(path.join(reactCorePath, '/**/helpers/OUIA/*.md'), 'react');
diff --git a/yarn.lock b/yarn.lock
index 8ac1b0be64..c5770cbfbe 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2490,15 +2490,10 @@
   resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.222.4.tgz#5d988779c50df3dafc989d6e807d16971e34d228"
   integrity sha512-+0fk4dzxEbWn+hgaOnR0BjfeUdEeVVrqfH7+GFeFc+RKjEMjIR/BZbWWN8YQDezmDv6A32gHmEKaY3Uwbt06Lw==
 
-"@patternfly/patternfly@5.0.0-alpha.12":
-  version "5.0.0-alpha.12"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.0-alpha.12.tgz#252cc43acefccac781c7820f2aedeb8edeb15e7e"
-  integrity sha512-NIb6i3LVq0aHayLWh7wwliaPvH2oUYsrkiUYgomfOl6nuKDmpY1CAEIZFxcegfomUCmpSM44RsuPGFjMvHNoOA==
-
-"@patternfly/patternfly@^4.224.2":
-  version "4.224.2"
-  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-4.224.2.tgz#9d1b000c3c43457ae47c3556a334412d164fad90"
-  integrity sha512-HGNV26uyHSIECuhjPg/WGn0mXbAotcs6ODfhAOkfYjIgGylddgiwElxUe1rpEHV5mQJJ2rMn4OdeJIIpzRX61g==
+"@patternfly/patternfly@5.0.0-alpha.37":
+  version "5.0.0-alpha.37"
+  resolved "https://registry.yarnpkg.com/@patternfly/patternfly/-/patternfly-5.0.0-alpha.37.tgz#c9fc381b8cb2506a949c4e350f9db1dcaee4530b"
+  integrity sha512-S/EEb+HkLCxBBuBZuCv4dGEjklFDk8S85Un2m6/+SmEKIQWCQmgKXwCRSuLuSeANqt0Fb4prjj80vM4Of/uN0g==
 
 "@patternfly/quickstarts@^2.4.0":
   version "2.4.0"
@@ -2510,6 +2505,14 @@
     history "^5.0.0"
     showdown "1.8.6"
 
+"@patternfly/react-catalog-view-extension@5.0.0-alpha.1":
+  version "5.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-5.0.0-alpha.1.tgz#fb93e9e77c9327dce51671e0e6083639ae562f69"
+  integrity sha512-jm2kknrcaI/hukPVc5+TlEeAecCXOYNaOvpsrLglK9CGVTgKIjgl0u9v8PKwk6hSQau7AcWfqicPUdgtJ/xhag==
+  dependencies:
+    "@patternfly/react-core" "^5.0.0-alpha.50"
+    "@patternfly/react-styles" "^5.0.0-alpha.5"
+
 "@patternfly/react-catalog-view-extension@^4.93.15":
   version "4.95.1"
   resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.95.1.tgz#a8ff4b14364a8505ff5156e3be6737032a70e277"
@@ -2519,67 +2522,58 @@
     "@patternfly/react-core" "^4.267.6"
     "@patternfly/react-styles" "^4.92.3"
 
-"@patternfly/react-catalog-view-extension@^4.96.0":
-  version "4.96.0"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-catalog-view-extension/-/react-catalog-view-extension-4.96.0.tgz#b3e3e8875b0dc37c204cf71c29ea8a95d0442ad4"
-  integrity sha512-ZMPvaE6KOjbLioCdi1wPtxughsce4+sPq6Us5s4JKu2xgn+e83NcfSD3pAcS5e+M8K3SWwdXd3ycgkD8F+Obvg==
+"@patternfly/react-charts@^7.0.0-alpha.14":
+  version "7.0.0-alpha.16"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-charts/-/react-charts-7.0.0-alpha.16.tgz#de9b6da3389ceabbb649eb8d85f138af3bf4ae2f"
+  integrity sha512-o10bGcdUbSe5H8CGKc9PLNXbCMavjkLYkeQFlQ6f0IT4SjnlTKp2iREebICt4Ca4HQwppxrpwyLlGBSSJjO2CA==
   dependencies:
-    "@patternfly/patternfly" "^4.224.2"
-    "@patternfly/react-core" "^4.276.6"
-    "@patternfly/react-styles" "^4.92.6"
-
-"@patternfly/react-charts@^7.0.0-alpha.3":
-  version "7.0.0-alpha.3"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-charts/-/react-charts-7.0.0-alpha.3.tgz#490de28aedae00a89617a4cf2c7cef522659f2d5"
-  integrity sha512-Tc2vm9pzJHDRAoRHdWXGnhEs8n4tktdEUC2/3UCL9z0QI54XFiWk7IjWHWY+a6sJNvEEud4FmakiiFgqTD1LSQ==
-  dependencies:
-    "@patternfly/react-styles" "^5.0.0-alpha.2"
-    "@patternfly/react-tokens" "^5.0.0-alpha.2"
+    "@patternfly/react-styles" "^5.0.0-alpha.6"
+    "@patternfly/react-tokens" "^5.0.0-alpha.6"
     hoist-non-react-statics "^3.3.0"
     lodash "^4.17.19"
-    tslib "^2.0.0"
-    victory-area "^36.6.7"
-    victory-axis "^36.6.7"
-    victory-bar "^36.6.7"
-    victory-chart "^36.6.7"
-    victory-core "^36.6.7"
-    victory-create-container "^36.6.7"
-    victory-cursor-container "^36.6.7"
-    victory-group "^36.6.7"
-    victory-legend "^36.6.7"
-    victory-line "^36.6.7"
-    victory-pie "^36.6.7"
-    victory-scatter "^36.6.7"
-    victory-stack "^36.6.7"
-    victory-tooltip "^36.6.7"
-    victory-voronoi-container "^36.6.7"
-    victory-zoom-container "^36.6.7"
-
-"@patternfly/react-code-editor@^5.0.0-alpha.7":
-  version "5.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-5.0.0-alpha.7.tgz#dab9421e12ef7423019db3170543718b497d68c6"
-  integrity sha512-JjlaFguDTsNdYXeSvoI45fbt/4H/3asdi+yvwEnhkfXvaRxQch4h78V3v9wdILor5gP2ayBYFD47l6e5pp1ppw==
-  dependencies:
-    "@patternfly/react-core" "^5.0.0-alpha.7"
-    "@patternfly/react-icons" "^5.0.0-alpha.2"
-    "@patternfly/react-styles" "^5.0.0-alpha.2"
+    tslib "^2.5.0"
+    victory-area "^36.6.8"
+    victory-axis "^36.6.8"
+    victory-bar "^36.6.8"
+    victory-chart "^36.6.8"
+    victory-core "^36.6.8"
+    victory-create-container "^36.6.8"
+    victory-cursor-container "^36.6.8"
+    victory-group "^36.6.8"
+    victory-legend "^36.6.8"
+    victory-line "^36.6.8"
+    victory-pie "^36.6.8"
+    victory-scatter "^36.6.8"
+    victory-stack "^36.6.8"
+    victory-tooltip "^36.6.8"
+    victory-voronoi-container "^36.6.8"
+    victory-zoom-container "^36.6.8"
+
+"@patternfly/react-code-editor@^5.0.0-alpha.54":
+  version "5.0.0-alpha.60"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-code-editor/-/react-code-editor-5.0.0-alpha.60.tgz#6c393d88079e6035d579e02bf194dc263e8f1449"
+  integrity sha512-Zec+UJaiiTgfWKsh2Jv58W2gHB/NQ45o+oB11WsGNzw0ahLhPtCFa2OccGmBjbkpjqaGovRRG2j2PqcBIPLL9Q==
+  dependencies:
+    "@patternfly/react-core" "^5.0.0-alpha.59"
+    "@patternfly/react-icons" "^5.0.0-alpha.9"
+    "@patternfly/react-styles" "^5.0.0-alpha.6"
     react-dropzone "14.2.3"
-    tslib "^2.0.0"
+    tslib "^2.5.0"
 
-"@patternfly/react-console@^4.95.5":
-  version "4.95.5"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-console/-/react-console-4.95.5.tgz#79315209080a3c3da0440eaa1e6513df68ace040"
-  integrity sha512-zEZkO8fGTqcYfq2bjelwOXdBd+EM7AY3jVDAfnTUhkEnASONUHPBFcfjuq74mPxCBq6fHBwBZW5rLo518+YPCg==
+"@patternfly/react-console@^5.0.0-alpha.1":
+  version "5.0.0-alpha.1"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-console/-/react-console-5.0.0-alpha.1.tgz#d6896e1e3283f29f5bd4c6a14d2007b49341e2ad"
+  integrity sha512-NSftqGFbxC7dQBafSfhTyHBnwYf4oSEpfvgXkBBkWfixrolPvogC9HygxDWh0M3dehwBC2nbTA7hwthkOUolpQ==
   dependencies:
     "@novnc/novnc" "^1.3.0"
-    "@patternfly/react-core" "^4.276.6"
-    "@patternfly/react-styles" "^4.92.6"
+    "@patternfly/react-core" "^5.0.0-alpha.50"
+    "@patternfly/react-styles" "^5.0.0-alpha.5"
     "@spice-project/spice-html5" "^0.2.1"
     file-saver "^1.3.8"
     xterm "^4.8.1"
     xterm-addon-fit "^0.2.1"
 
-"@patternfly/react-core@^4.267.6", "@patternfly/react-core@^4.273.1", "@patternfly/react-core@^4.276.6":
+"@patternfly/react-core@^4.267.6", "@patternfly/react-core@^4.273.1":
   version "4.276.6"
   resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-4.276.6.tgz#fa39aa61022f70bf350b2efc660bdeb096bda447"
   integrity sha512-G0K+378jf9jw9g+hCAoKnsAe/UGTRspqPeuAYypF2FgNr+dC7dUpc7/VkNhZBVqSJzUWVEK8NyXcqkfi0IemIg==
@@ -2605,41 +2599,41 @@
     tippy.js "5.1.2"
     tslib "^2.0.0"
 
-"@patternfly/react-core@^5.0.0-alpha.7":
-  version "5.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-5.0.0-alpha.7.tgz#8324739066d4fad33a31a969d0243c502887e27b"
-  integrity sha512-S3brFqBQbkZhKhEOtUhgVPOrTgsjiqPXAyhevOxvzcD4Cu+9ncDEH+pA9CIIQVVVmWX8hMxbdWEGQAqAp9VG0g==
+"@patternfly/react-core@^5.0.0-alpha.50", "@patternfly/react-core@^5.0.0-alpha.53", "@patternfly/react-core@^5.0.0-alpha.59":
+  version "5.0.0-alpha.59"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-core/-/react-core-5.0.0-alpha.59.tgz#113de42c9ca6c90dedeaec88dc50b0fd1043d5ea"
+  integrity sha512-olwtyKmKdwRvjTJUMdCyw3s1wGEd9BHT9I+L2mYvoATdI2juy5YxtmKZM6rkKpW6JDUF7qNtLsZYZomIv4AS0w==
   dependencies:
-    "@patternfly/react-icons" "^5.0.0-alpha.2"
-    "@patternfly/react-styles" "^5.0.0-alpha.2"
-    "@patternfly/react-tokens" "^5.0.0-alpha.2"
-    focus-trap "6.9.2"
+    "@patternfly/react-icons" "^5.0.0-alpha.9"
+    "@patternfly/react-styles" "^5.0.0-alpha.6"
+    "@patternfly/react-tokens" "^5.0.0-alpha.6"
+    focus-trap "7.4.0"
     react-dropzone "^14.2.3"
-    tslib "^2.0.0"
-
-"@patternfly/react-docs@6.0.0-alpha.8":
-  version "6.0.0-alpha.8"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-docs/-/react-docs-6.0.0-alpha.8.tgz#78eea3698e24f82ae605daca8882de2cf9cbe1bf"
-  integrity sha512-UJ6Gh3bWM2Gt7F9REbr7ZgLN6F91KCUdVv5IXtxE6Zc2lErIIVpJa6kgPn5i6phx1CQ0bFYe9WzK4Bn1v1Aqhg==
-  dependencies:
-    "@patternfly/patternfly" "5.0.0-alpha.12"
-    "@patternfly/react-charts" "^7.0.0-alpha.3"
-    "@patternfly/react-code-editor" "^5.0.0-alpha.7"
-    "@patternfly/react-core" "^5.0.0-alpha.7"
-    "@patternfly/react-icons" "^5.0.0-alpha.2"
-    "@patternfly/react-styles" "^5.0.0-alpha.2"
-    "@patternfly/react-table" "^5.0.0-alpha.7"
-    "@patternfly/react-tokens" "^5.0.0-alpha.2"
+    tslib "^2.5.0"
+
+"@patternfly/react-docs@6.0.0-alpha.58":
+  version "6.0.0-alpha.58"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-docs/-/react-docs-6.0.0-alpha.58.tgz#7037fef98684ef4beb8a6692ff362ae044cea208"
+  integrity sha512-r8c/h+VJXcbUvlJ3mOBD/fFO6CChWC812od2mdYCrhsgtEMkmX8RqIRpIKcuMWnSfzxuqKbm0+4ZUJzimG3vCA==
+  dependencies:
+    "@patternfly/patternfly" "5.0.0-alpha.37"
+    "@patternfly/react-charts" "^7.0.0-alpha.14"
+    "@patternfly/react-code-editor" "^5.0.0-alpha.54"
+    "@patternfly/react-core" "^5.0.0-alpha.53"
+    "@patternfly/react-icons" "^5.0.0-alpha.8"
+    "@patternfly/react-styles" "^5.0.0-alpha.6"
+    "@patternfly/react-table" "^5.0.0-alpha.54"
+    "@patternfly/react-tokens" "^5.0.0-alpha.6"
 
 "@patternfly/react-icons@^4.93.4", "@patternfly/react-icons@^4.93.6":
   version "4.93.6"
   resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-4.93.6.tgz#4aff18724afa30157e3ffd6a6414951dbb39dcb3"
   integrity sha512-ZrXegc/81oiuTIeWvoHb3nG/eZODbB4rYmekBEsrbiysyO7m/sUFoi/RLvgFINrRoh6YCJqL5fj06Jg6d7jX1g==
 
-"@patternfly/react-icons@^5.0.0-alpha.2":
-  version "5.0.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.0.0-alpha.2.tgz#7de27f8014bd7562e530bfab47e958dbfbb4fb68"
-  integrity sha512-i9E+LZnhi8Fr6SGhHYgMRKO2/IB6eazf9MB4oSnIK7YrV3L+sFVHFsDeVKQcvSdjJy/v/983fIBulARkBQWamg==
+"@patternfly/react-icons@^5.0.0-alpha.8", "@patternfly/react-icons@^5.0.0-alpha.9":
+  version "5.0.0-alpha.9"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-icons/-/react-icons-5.0.0-alpha.9.tgz#11f9a842cf6c6472138a64f843baa09fb4436fb3"
+  integrity sha512-ORoMgrtUapGtzXGMybhf2s/jtT82kTRDYJo7oSi69XE0yGrY0PgUrsb17rypTsxh/L6/DK1Rj+XuHWmPAYFLQw==
 
 "@patternfly/react-log-viewer@4.87.100":
   version "4.87.100"
@@ -2663,32 +2657,32 @@
   resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-4.92.6.tgz#a72c5f0b7896ce1c419d1db79f8e39ba6632057d"
   integrity sha512-b8uQdEReMyeoMzjpMri845QxqtupY/tIFFYfVeKoB2neno8gkcW1RvDdDe62LF88q45OktCwAe/8A99ker10Iw==
 
-"@patternfly/react-styles@^5.0.0-alpha.2":
-  version "5.0.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.0.0-alpha.2.tgz#10d9cad3c5ae46c4eaf7e7d34787fa9a719b0ca7"
-  integrity sha512-/8u2B6Uf5djS+8Y8F+NRsd0ItCv0U/9ZDZyGUfV9A6iG1CcbosV3HT7dmuAjWsrXMLrBSCOo7VhO3/K4jUkp+w==
+"@patternfly/react-styles@^5.0.0-alpha.5", "@patternfly/react-styles@^5.0.0-alpha.6":
+  version "5.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-styles/-/react-styles-5.0.0-alpha.6.tgz#8ad025291180d840ba376553d597d1a835a3858b"
+  integrity sha512-bhhCFXJud5V3sXnDsPFFQ9QInwEyGdn8EjH+bKAJ2880rYeHL0Njhorzd7wbEvXE5yD2aA4LlNM3YCB66wraoQ==
 
-"@patternfly/react-table@^5.0.0-alpha.7":
-  version "5.0.0-alpha.7"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-5.0.0-alpha.7.tgz#d2b35042133cdd096b5315086b2362c9d129cde4"
-  integrity sha512-7DqlmfisKR4WOqmDdBsNziGrUM84ILMRfzkfH/T/OoNSHH0Fd+qKviELf60sJucB34zMfJuFuaZ217im5wPZzg==
+"@patternfly/react-table@^5.0.0-alpha.54":
+  version "5.0.0-alpha.61"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-table/-/react-table-5.0.0-alpha.61.tgz#1f737cf615d2c7810fd839d914bccdecf33bb024"
+  integrity sha512-ci/qU2VePtntpGVwhM7PRDp65A/p+sCrjILnkFmqbw0eIz0QEp8BwXVd07R8NfsYRPKO++FzS/hGZRpsV0FX5g==
   dependencies:
-    "@patternfly/react-core" "^5.0.0-alpha.7"
-    "@patternfly/react-icons" "^5.0.0-alpha.2"
-    "@patternfly/react-styles" "^5.0.0-alpha.2"
-    "@patternfly/react-tokens" "^5.0.0-alpha.2"
+    "@patternfly/react-core" "^5.0.0-alpha.59"
+    "@patternfly/react-icons" "^5.0.0-alpha.9"
+    "@patternfly/react-styles" "^5.0.0-alpha.6"
+    "@patternfly/react-tokens" "^5.0.0-alpha.6"
     lodash "^4.17.19"
-    tslib "^2.0.0"
+    tslib "^2.5.0"
 
 "@patternfly/react-tokens@^4.94.6":
   version "4.94.6"
   resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-4.94.6.tgz#47c715721ad3dd315a523f352ba1a0de2b03f0bc"
   integrity sha512-tm7C6nat+uKMr1hrapis7hS3rN9cr41tpcCKhx6cod6FLU8KwF2Yt5KUxakhIOCEcE/M/EhXhAw/qejp8w0r7Q==
 
-"@patternfly/react-tokens@^5.0.0-alpha.2":
-  version "5.0.0-alpha.2"
-  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-5.0.0-alpha.2.tgz#0dfe564980dc81b315ac7fe8be4d3e20e9b82b08"
-  integrity sha512-qzdsyRnqjj5vyeCad6o0ziwzvWnBw9YbQxPzAiT2k+R6xj5XceC1XJVinzvmEagAYnvtUHkiKPykXa57MN3aYA==
+"@patternfly/react-tokens@^5.0.0-alpha.6":
+  version "5.0.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/@patternfly/react-tokens/-/react-tokens-5.0.0-alpha.6.tgz#fda99c6f25386eab2c85d3118554fdde96db782d"
+  integrity sha512-QYea/Y8Jj2feqlaDFCAspds/FQ+/fK8bcd8Q5bFcRiQ+Z0Prw62JuW1OPVi9Bx1xACsZ0FHRbW4iQKXQGLvKBA==
 
 "@patternfly/react-topology@^4.91.40":
   version "4.91.40"
@@ -6350,6 +6344,13 @@ focus-trap@6.9.2:
   dependencies:
     tabbable "^5.3.2"
 
+focus-trap@7.4.0:
+  version "7.4.0"
+  resolved "https://registry.yarnpkg.com/focus-trap/-/focus-trap-7.4.0.tgz#20f760a497f593b01d2e446168009c1f12ab0385"
+  integrity sha512-yI7FwUqU4TVb+7t6PaQ3spT/42r/KLEi8mtdGoQo2li/kFzmu9URmalTvw7xCCJtSOyhBxscvEAmvjeN9iHARg==
+  dependencies:
+    tabbable "^6.1.1"
+
 follow-redirects@1.5.10:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.5.10.tgz#7b7a9f9aea2fdff36786a94ff643ed07f4ff5e2a"
@@ -11651,6 +11652,11 @@ tabbable@^5.3.2:
   resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-5.3.3.tgz#aac0ff88c73b22d6c3c5a50b1586310006b47fbf"
   integrity sha512-QD9qKY3StfbZqWOPLp0++pOrAVb/HbUi5xCc8cUo4XjP19808oaMiDzn0leBY5mCespIBM0CIZePzZjgzR83kA==
 
+tabbable@^6.1.1:
+  version "6.1.1"
+  resolved "https://registry.yarnpkg.com/tabbable/-/tabbable-6.1.1.tgz#40cfead5ed11be49043f04436ef924c8890186a0"
+  integrity sha512-4kl5w+nCB44EVRdO0g/UGoOp3vlwgycUVtkk/7DPyeLZUCuNFFKCFG6/t/DgHLrUPHjrZg6s5tNm+56Q2B0xyg==
+
 tapable@^2.0.0, tapable@^2.1.1, tapable@^2.2.0:
   version "2.2.1"
   resolved "https://registry.yarnpkg.com/tapable/-/tapable-2.2.1.tgz#1967a73ef4060a82f12ab96af86d52fdb76eeca0"
@@ -11958,7 +11964,7 @@ tslib@^2.0.1:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.1.tgz#410eb0d113e5b6356490eec749603725b021b43e"
   integrity sha512-SgIkNheinmEBgx1IUNirK0TUD4X9yjjBRTqqjggWCU3pUEqIk3/Uwl3yRixYKT6WjQuGiwDv4NomL3wqRCj+CQ==
 
-tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0:
+tslib@^2.0.3, tslib@^2.1.0, tslib@^2.3.0, tslib@^2.4.0, tslib@^2.5.0:
   version "2.5.0"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf"
   integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg==
@@ -12413,7 +12419,7 @@ vfile@^4.0.0:
     unist-util-stringify-position "^2.0.0"
     vfile-message "^2.0.0"
 
-victory-area@^36.6.7:
+victory-area@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-area/-/victory-area-36.6.8.tgz#6a67d6ab8cc9cff7a46f091e8722203055f99f42"
   integrity sha512-aIyMuzUqiDcpTCB7FUOYDJvqiDPiluEXLOw6Lh1vrUYmV7CNqMDOIBtTau2vI41Ao0o0YJdCAcyzBib9e3UYbw==
@@ -12423,7 +12429,7 @@ victory-area@^36.6.7:
     victory-core "^36.6.8"
     victory-vendor "^36.6.8"
 
-victory-axis@^36.6.7, victory-axis@^36.6.8:
+victory-axis@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-axis/-/victory-axis-36.6.8.tgz#aa565fba604d7773f7f9bf7e201605f9fc01cc5c"
   integrity sha512-tClVJEay1YOJAh9rRyyLx8pei7Sr1/xTz04bJmfzFoAxFoPBtvgfFwXhfZ1YjGIl7m5Wh2CiYMY3figueLzYtg==
@@ -12432,7 +12438,7 @@ victory-axis@^36.6.7, victory-axis@^36.6.8:
     prop-types "^15.8.1"
     victory-core "^36.6.8"
 
-victory-bar@^36.6.7:
+victory-bar@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-bar/-/victory-bar-36.6.8.tgz#da94a966160de930cd2c0150ca4439b7a20e9636"
   integrity sha512-jLLPm3IW8/2uSLPvQD9bxzXnTraUYBIDTkbZPZy7oHP01OVzP1sj+MMHcINCWcUbyUyLZDL3u8CvViXjS273JQ==
@@ -12452,7 +12458,7 @@ victory-brush-container@^36.6.8:
     react-fast-compare "^3.2.0"
     victory-core "^36.6.8"
 
-victory-chart@^36.6.7:
+victory-chart@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-chart/-/victory-chart-36.6.8.tgz#17feb0290df90fb094d7ae89a7d20857790ad096"
   integrity sha512-kC1jL63PAmqUrvZNOfwAXNuaIwz4nvXYUuEPu59WRBCOIGDGRgv2wJ1O7O0xYXqDkI57EtAYf9KUK+miEn/Btg==
@@ -12465,7 +12471,7 @@ victory-chart@^36.6.7:
     victory-polar-axis "^36.6.8"
     victory-shared-events "^36.6.8"
 
-victory-core@^36.6.7, victory-core@^36.6.8:
+victory-core@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-core/-/victory-core-36.6.8.tgz#554869ef63103556b50f0d91ad64976f7d13d45e"
   integrity sha512-SkyEszZKGyxjqfptfFWYdI22CvCuE9LhkaDpikzIhT2gcE3SuOBO5fk/740XMYE2ZUsJ4Fu/Vy4+8jZi17y44A==
@@ -12475,7 +12481,7 @@ victory-core@^36.6.7, victory-core@^36.6.8:
     react-fast-compare "^3.2.0"
     victory-vendor "^36.6.8"
 
-victory-create-container@^36.6.7:
+victory-create-container@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-create-container/-/victory-create-container-36.6.8.tgz#c41835f2e5fed4f294f0594b8d4ce564e4a73a88"
   integrity sha512-H2BsdTbJ/RxxcEg5lzk3TDlihtOs7I/5KaIBP3yosPs702i40mL2qndkRkj08QeiZhkaKfQ2GOUvyP+t7DSdmg==
@@ -12488,7 +12494,7 @@ victory-create-container@^36.6.7:
     victory-voronoi-container "^36.6.8"
     victory-zoom-container "^36.6.8"
 
-victory-cursor-container@^36.6.7, victory-cursor-container@^36.6.8:
+victory-cursor-container@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-cursor-container/-/victory-cursor-container-36.6.8.tgz#ca15719b0d03c4601c4dbe7dc7710abba5b50c4c"
   integrity sha512-3WIBRl+7jnZok6syLfW8RK23nliDcoD/JUTN0YZo6bKBqHeFc4+ur3mlwCfghH7sGoxJRYuOJxTd9x2MwM5HQQ==
@@ -12497,7 +12503,7 @@ victory-cursor-container@^36.6.7, victory-cursor-container@^36.6.8:
     prop-types "^15.8.1"
     victory-core "^36.6.8"
 
-victory-group@^36.6.7:
+victory-group@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-group/-/victory-group-36.6.8.tgz#ad4e97a56317d243b413654917f27e68b8ce58b6"
   integrity sha512-CiupDIGPPWVgwif3ayd8glSlR41mVbuT0Nl0ay9q42w2fiM32syiJAoifIw47X4tL8ow/DXH+/5Pd8eEyA2trA==
@@ -12508,7 +12514,7 @@ victory-group@^36.6.7:
     victory-core "^36.6.8"
     victory-shared-events "^36.6.8"
 
-victory-legend@^36.6.7:
+victory-legend@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-legend/-/victory-legend-36.6.8.tgz#c0a5957f713cb77d80c1d8a3a1e7bd2e2021339e"
   integrity sha512-OnkzB82Mvt5/1LYNsrfZQoXaVvgfp1rCsFRI3imq257Sh/UPy0/eZehCMQs/SVbU0z0EuIpXokhZb3BBdoJgpw==
@@ -12517,7 +12523,7 @@ victory-legend@^36.6.7:
     prop-types "^15.8.1"
     victory-core "^36.6.8"
 
-victory-line@^36.6.7:
+victory-line@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-line/-/victory-line-36.6.8.tgz#72cdd808bef877c025e520ef8ba691fb922c3d31"
   integrity sha512-MozOejQRZPdzFaru5zUfqVB4TEff6nZjtQhOs+F5yyhXjLgM89zGX30r3jK5cjVdAPbTu4KPUrwktvlw+AkPRA==
@@ -12527,7 +12533,7 @@ victory-line@^36.6.7:
     victory-core "^36.6.8"
     victory-vendor "^36.6.8"
 
-victory-pie@^36.6.7:
+victory-pie@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-pie/-/victory-pie-36.6.8.tgz#bd80f7abd7feb917e11b442d2a4bec3e716ef0f6"
   integrity sha512-dUHWiiKd60dlt7OjFa+YYwanHAkP/T0abzy6O3SFxGre52oeqd8px1EoVhlLKpn4ao8L35koG9mvz6/pGyr8Dw==
@@ -12546,7 +12552,7 @@ victory-polar-axis@^36.6.8:
     prop-types "^15.8.1"
     victory-core "^36.6.8"
 
-victory-scatter@^36.6.7:
+victory-scatter@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-scatter/-/victory-scatter-36.6.8.tgz#2d387ce059189045a8160dbb66003682a8b946e1"
   integrity sha512-GKSNneBxIWLsF3eBSTW5IwT5S4YdsfFl4PVCP3/wTa2myfS5DIS9FufEnJp/FEZGalEXYWxeR47rlWqABxAj5A==
@@ -12575,7 +12581,7 @@ victory-shared-events@^36.6.8:
     react-fast-compare "^3.2.0"
     victory-core "^36.6.8"
 
-victory-stack@^36.6.7:
+victory-stack@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-stack/-/victory-stack-36.6.8.tgz#99e44f626cb78d2466120a75a2c353186ef83b7c"
   integrity sha512-Pkux46IqAealOi0KvqQpaJKKKpHCfZ/sh5IeUKYFy+QKWAjiQjG6hFZeHgr2YaS7OfdbvHhoAdvp03KntWzpbw==
@@ -12586,7 +12592,7 @@ victory-stack@^36.6.7:
     victory-core "^36.6.8"
     victory-shared-events "^36.6.8"
 
-victory-tooltip@^36.6.7, victory-tooltip@^36.6.8:
+victory-tooltip@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-tooltip/-/victory-tooltip-36.6.8.tgz#3175c848480adf53f487613a0f6b2880e39ae06c"
   integrity sha512-9P+QeAGyDpP0trJnQ1NtnbDhpoJB0Ghc2boYEehvL12p0OzolY9/Nq5SDP0tu5i1BBujwFXtnoCDqt+mOH25fA==
@@ -12615,7 +12621,7 @@ victory-vendor@^36.6.8:
     d3-time "^3.0.0"
     d3-timer "^3.0.1"
 
-victory-voronoi-container@^36.6.7, victory-voronoi-container@^36.6.8:
+victory-voronoi-container@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-voronoi-container/-/victory-voronoi-container-36.6.8.tgz#77ca5bdcfdf585caa23850b061613a874942e39f"
   integrity sha512-x9/OOZdMm4dh38jNhSfBYT0nG6ribsINU0/WNzIn3QcDXFBInsJ7jRySxYmdmk45OdXfbDRwDMqVHk72sWQyUw==
@@ -12627,7 +12633,7 @@ victory-voronoi-container@^36.6.7, victory-voronoi-container@^36.6.8:
     victory-core "^36.6.8"
     victory-tooltip "^36.6.8"
 
-victory-zoom-container@^36.6.7, victory-zoom-container@^36.6.8:
+victory-zoom-container@^36.6.8:
   version "36.6.8"
   resolved "https://registry.yarnpkg.com/victory-zoom-container/-/victory-zoom-container-36.6.8.tgz#1a1232477dbbdc610156efbc9cf53c6cb54afa5a"
   integrity sha512-gxX5iJUaxrFFZ2IGS0sQnUI+3Mhj6bVLqtOlQd3Krld+9f/ieuUbxl+P+eIyhQU/VyHSlirIZeOGOXJeYcU9jQ==