From 6246c61cf730efdd7ce3eed7fd8cff8a4440b5c9 Mon Sep 17 00:00:00 2001
From: logonoff <git@logonoff.co>
Date: Wed, 21 May 2025 18:43:21 -0400
Subject: [PATCH] chore(deps): replace clsx with @patternfly/react-styles

---
 cypress/component/MultiContentCard.cy.tsx     | 10 +-
 package-lock.json                             | 91 +++++++++++--------
 packages/module/package.json                  |  4 +-
 .../MultiContentCard/MultiContentCard.md      |  2 +-
 .../MultiContentCardExample.tsx               | 10 +-
 ...ltiContentCardExpandableActionsExample.tsx |  4 +-
 ...ltiContentCardExpandableDividerExample.tsx | 10 +-
 .../MultiContentCardExpandableExample.tsx     | 10 +-
 ...tentCardExpandableSingleDividerExample.tsx | 10 +-
 packages/module/src/Ansible/Ansible.tsx       | 10 +-
 .../module/src/CloseButton/CloseButton.tsx    |  4 +-
 packages/module/src/ErrorStack/ErrorStack.tsx |  6 +-
 .../__snapshots__/MissingPage.test.tsx.snap   |  2 -
 .../MultiContentCard.test.tsx.snap            | 23 -----
 .../ResponsiveActions.test.tsx.snap           |  2 -
 .../module/src/ServiceCard/ServiceCard.tsx    |  4 +-
 packages/module/src/Shortcut/Shortcut.tsx     | 20 ++--
 .../src/StaleDataWarning/StaleDataWarning.tsx | 13 ++-
 .../Status/__snapshots__/Status.test.tsx.snap |  4 -
 packages/module/src/TagCount/TagCount.tsx     | 12 +--
 .../__snapshots__/TagCount.test.tsx.snap      |  4 -
 .../UnauthorizedAccess.test.tsx.snap          |  5 -
 .../UnavailableContent.test.tsx.snap          |  4 -
 .../__snapshots__/WarningModal.test.tsx.snap  |  3 -
 24 files changed, 116 insertions(+), 151 deletions(-)

diff --git a/cypress/component/MultiContentCard.cy.tsx b/cypress/component/MultiContentCard.cy.tsx
index f1c7b6c5..93e625ff 100644
--- a/cypress/component/MultiContentCard.cy.tsx
+++ b/cypress/component/MultiContentCard.cy.tsx
@@ -14,7 +14,7 @@ import {
 } from '@patternfly/react-core';
 import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 
 const useStyles = createUseStyles({
   action: {
@@ -35,7 +35,7 @@ export const MultiContentCardExample: FunctionComponent = () => {
         <Content component={ContentVariants.h4}>Getting Started</Content>
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <CogIcon />
           </Icon>
@@ -47,7 +47,7 @@ export const MultiContentCardExample: FunctionComponent = () => {
         </Content>
       </CardBody>
       <CardFooter>
-        <List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
+        <List className={css(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
           <ListItem>
             <Button variant="link" isInline>
               First link
@@ -68,7 +68,7 @@ export const MultiContentCardExample: FunctionComponent = () => {
     </Card>,
     <Card isFullHeight isPlain key="card-2">
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <LockIcon />
           </Icon>
@@ -101,7 +101,7 @@ export const MultiContentCardExample: FunctionComponent = () => {
         <Content component={ContentVariants.h4}>Next Steps</Content>
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <BellIcon />
           </Icon>
diff --git a/package-lock.json b/package-lock.json
index 59933570..7fee27ab 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4002,9 +4002,9 @@
       }
     },
     "node_modules/@patternfly/documentation-framework": {
-      "version": "6.5.18",
-      "resolved": "https://registry.npmjs.org/@patternfly/documentation-framework/-/documentation-framework-6.5.18.tgz",
-      "integrity": "sha512-HC3I/T9vo0WywTp4ae55WWqqMthrZEr3I8k12ENgNOpo7knkjCSliLzTlgkNypuqV4eO+YDWhnMjcVRr+JOsqw==",
+      "version": "6.10.19",
+      "resolved": "https://registry.npmjs.org/@patternfly/documentation-framework/-/documentation-framework-6.10.19.tgz",
+      "integrity": "sha512-ybPaIJ3avJftc89GQPW3FnwhBg+ylU3Xp1AC8U5yQiCzkrjasc5+YdBiQk2+UJ9XR7BNDq8IWe6qU4htREWRsQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4012,7 +4012,7 @@
         "@babel/preset-env": "^7.24.3",
         "@babel/preset-react": "^7.24.1",
         "@mdx-js/util": "1.6.16",
-        "@patternfly/ast-helpers": "^1.4.0-alpha.159",
+        "@patternfly/ast-helpers": "^1.4.0-alpha.205",
         "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
         "autoprefixer": "9.8.6",
         "babel-loader": "^9.1.3",
@@ -4075,10 +4075,10 @@
         "pf-docs-framework": "scripts/cli/cli.js"
       },
       "peerDependencies": {
-        "@patternfly/patternfly": "^6.1.0",
-        "@patternfly/react-code-editor": "^6.1.0",
-        "@patternfly/react-core": "^6.1.0",
-        "@patternfly/react-table": "^6.1.0",
+        "@patternfly/patternfly": "^6.2.3",
+        "@patternfly/react-code-editor": "^6.2.2",
+        "@patternfly/react-core": "^6.2.2",
+        "@patternfly/react-table": "^6.2.2",
         "react": "^17.0.0 || ^18.0.0",
         "react-dom": "^17.0.0 || ^18.0.0"
       }
@@ -4305,7 +4305,9 @@
       }
     },
     "node_modules/@patternfly/patternfly": {
-      "version": "6.1.0",
+      "version": "6.2.3",
+      "resolved": "https://registry.npmjs.org/@patternfly/patternfly/-/patternfly-6.2.3.tgz",
+      "integrity": "sha512-FR027W7JygcQpvlRU/Iom936Vm0apzfi2o5lvtlcWW6IaeZCCTtTaDxehoYuELHlemzkLziQAgu6LuCJEVayjw==",
       "dev": true,
       "license": "MIT"
     },
@@ -4352,14 +4354,16 @@
       }
     },
     "node_modules/@patternfly/react-code-editor": {
-      "version": "6.1.0",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-code-editor/-/react-code-editor-6.2.2.tgz",
+      "integrity": "sha512-KPnkNP769afD2rvoNQtgCx+SYscamM5QSRmw2FJ9QPHVMksarwTsMvrdMxvu+n6Dhs/T40vQLU5UR7X2yPrURg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@monaco-editor/react": "^4.6.0",
-        "@patternfly/react-core": "^6.1.0",
-        "@patternfly/react-icons": "^6.1.0",
-        "@patternfly/react-styles": "^6.1.0",
+        "@patternfly/react-core": "^6.2.2",
+        "@patternfly/react-icons": "^6.2.2",
+        "@patternfly/react-styles": "^6.2.2",
         "react-dropzone": "14.3.5",
         "tslib": "^2.8.1"
       },
@@ -4373,13 +4377,15 @@
       "link": true
     },
     "node_modules/@patternfly/react-core": {
-      "version": "6.1.0",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-core/-/react-core-6.2.2.tgz",
+      "integrity": "sha512-JUrZ57JQ4bkmed1kxaciXb0ZpIVYyCHc2HjtzoKQ5UNRlx204zR2isATSHjdw2GFcWvwpkC5/fU2BR+oT3opbg==",
       "license": "MIT",
       "dependencies": {
-        "@patternfly/react-icons": "^6.1.0",
-        "@patternfly/react-styles": "^6.1.0",
-        "@patternfly/react-tokens": "^6.1.0",
-        "focus-trap": "7.6.2",
+        "@patternfly/react-icons": "^6.2.2",
+        "@patternfly/react-styles": "^6.2.2",
+        "@patternfly/react-tokens": "^6.2.2",
+        "focus-trap": "7.6.4",
         "react-dropzone": "^14.3.5",
         "tslib": "^2.8.1"
       },
@@ -4389,7 +4395,9 @@
       }
     },
     "node_modules/@patternfly/react-icons": {
-      "version": "6.1.0",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-icons/-/react-icons-6.2.2.tgz",
+      "integrity": "sha512-XkBwzuV/uiolX+T6QgB3RIqphM1m+vAZjAe3McYtyY22j1rsOdlWDE4RtRrJ1q7EoIZwyZHj0h8T9vMfUsLn4Q==",
       "license": "MIT",
       "peerDependencies": {
         "react": "^17 || ^18",
@@ -4397,17 +4405,21 @@
       }
     },
     "node_modules/@patternfly/react-styles": {
-      "version": "6.1.0",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-styles/-/react-styles-6.2.2.tgz",
+      "integrity": "sha512-rncRDq66H8VnLyb9DrHHlZtPddlpNL9+W0XuQC0L7F6p78hOwSZmoGTW2Vq8/wJplDj8h/61qRpfRF9VEYPW0g==",
       "license": "MIT"
     },
     "node_modules/@patternfly/react-table": {
-      "version": "6.1.0",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-table/-/react-table-6.2.2.tgz",
+      "integrity": "sha512-7CxVKhnpA+f8dLJ0hVvzZOe4Djx/nE+w70ipeAHf4Yi5JwfDWmbK97YvjYPfamp/bsXTLtPcK2n4AoY5DQX6Pg==",
       "license": "MIT",
       "dependencies": {
-        "@patternfly/react-core": "^6.1.0",
-        "@patternfly/react-icons": "^6.1.0",
-        "@patternfly/react-styles": "^6.1.0",
-        "@patternfly/react-tokens": "^6.1.0",
+        "@patternfly/react-core": "^6.2.2",
+        "@patternfly/react-icons": "^6.2.2",
+        "@patternfly/react-styles": "^6.2.2",
+        "@patternfly/react-tokens": "^6.2.2",
         "lodash": "^4.17.21",
         "tslib": "^2.8.1"
       },
@@ -4417,7 +4429,9 @@
       }
     },
     "node_modules/@patternfly/react-tokens": {
-      "version": "6.1.0",
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/@patternfly/react-tokens/-/react-tokens-6.2.2.tgz",
+      "integrity": "sha512-2GRWDPBTrcTlGNFc5NPJjrjEVU90RpgcGX/CIe2MplLgM32tpVIkeUtqIoJPLRk5GrbhyFuHJYRU+O93gU4o3Q==",
       "license": "MIT"
     },
     "node_modules/@pkgjs/parseargs": {
@@ -6606,7 +6620,9 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.7.7",
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.9.0.tgz",
+      "integrity": "sha512-re4CqKTJaURpzbLHtIi6XpDv20/CnpXOtjRY5/CU32L8gU8ek9UIivcfvSWvmKEngmVbrUtPpdDwWDWL7DNHvg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -8283,13 +8299,6 @@
         "node": ">=6"
       }
     },
-    "node_modules/clsx": {
-      "version": "2.1.1",
-      "license": "MIT",
-      "engines": {
-        "node": ">=6"
-      }
-    },
     "node_modules/co": {
       "version": "4.6.0",
       "dev": true,
@@ -12214,7 +12223,9 @@
       }
     },
     "node_modules/focus-trap": {
-      "version": "7.6.2",
+      "version": "7.6.4",
+      "resolved": "https://registry.npmjs.org/focus-trap/-/focus-trap-7.6.4.tgz",
+      "integrity": "sha512-xx560wGBk7seZ6y933idtjJQc1l+ck+pI3sKvhKozdBV1dRZoKhkW5xoCaFv9tQiX5RH1xfSxjuNu6g+lmN/gw==",
       "license": "MIT",
       "dependencies": {
         "tabbable": "^6.2.0"
@@ -13274,9 +13285,9 @@
       }
     },
     "node_modules/http-proxy-middleware": {
-      "version": "2.0.7",
-      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.7.tgz",
-      "integrity": "sha512-fgVY8AV7qU7z/MmXJ/rxwbrtQH4jBQ9m7kp3llF0liB7glmFeVZFBepQb32T3y8n8k2+AEYuMPCpinYW+/CuRA==",
+      "version": "2.0.9",
+      "resolved": "https://registry.npmjs.org/http-proxy-middleware/-/http-proxy-middleware-2.0.9.tgz",
+      "integrity": "sha512-c1IyJYLYppU574+YI7R4QyX2ystMtVXZwIdzazUIPIJsHuWNd+mho2j+bKoHftndicGj9yh+xjd+l0yj7VeT1Q==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -22470,6 +22481,8 @@
     },
     "node_modules/tabbable": {
       "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==",
       "license": "MIT"
     },
     "node_modules/tapable": {
@@ -26043,8 +26056,8 @@
       "dependencies": {
         "@patternfly/react-core": "^6.0.0",
         "@patternfly/react-icons": "^6.0.0",
+        "@patternfly/react-styles": "^6.0.0",
         "@patternfly/react-table": "^6.0.0",
-        "clsx": "^2.1.1",
         "react-jss": "^10.10.0"
       },
       "devDependencies": {
diff --git a/packages/module/package.json b/packages/module/package.json
index 2156b4db..5f54edb3 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -33,9 +33,9 @@
   "dependencies": {
     "@patternfly/react-core": "^6.0.0",
     "@patternfly/react-icons": "^6.0.0",
+    "@patternfly/react-styles": "^6.0.0",
     "@patternfly/react-table": "^6.0.0",
-    "react-jss": "^10.10.0",
-    "clsx": "^2.1.1"
+    "react-jss": "^10.10.0"
   },
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md
index 87707d95..de083ffb 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCard.md
@@ -10,7 +10,7 @@ sourceLink: https://github.com/patternfly/react-component-groups/blob/main/packa
 import MultiContentCard, { MultiContentCardDividerVariant } from "@patternfly/react-component-groups/dist/dynamic/MultiContentCard";
 import { ArrowRightIcon, BellIcon, CogIcon, EllipsisVIcon, LockIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 import { FunctionComponent, useState } from 'react';
 
 A **multi-content card** component allows to display multiple card components in a single layout. To further customize this layout, you can also utilize all properties of the [card component](/components/card), with the exception of `children` and `title`.
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx
index 6cd87360..119a97c4 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExample.tsx
@@ -14,7 +14,7 @@ import {
 } from '@patternfly/react-core';
 import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 
 const useStyles = createUseStyles({
   action: {
@@ -37,7 +37,7 @@ export const BasicExample: FunctionComponent = () => {
         <Content component={ContentVariants.h4}>Getting Started</Content>
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <CogIcon className={classes.actionIcon} />
           </Icon>
@@ -49,7 +49,7 @@ export const BasicExample: FunctionComponent = () => {
         </Content>
       </CardBody>
       <CardFooter>
-        <List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
+        <List className={css(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
           <ListItem>
             <Button variant="link" isInline>
               First link
@@ -71,7 +71,7 @@ export const BasicExample: FunctionComponent = () => {
     <Card isFullHeight isPlain key="card-2">
       <CardHeader style={{ visibility: 'hidden' }}>-</CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <LockIcon className={classes.actionIcon} />
           </Icon>
@@ -104,7 +104,7 @@ export const BasicExample: FunctionComponent = () => {
         <Content component={ContentVariants.h4}>Next Steps</Content>
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <BellIcon className={classes.actionIcon} />
           </Icon>
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx
index 15e2a7c1..72e47e90 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableActionsExample.tsx
@@ -22,7 +22,7 @@ import {
 } from '@patternfly/react-core';
 import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 
 const useStyles = createUseStyles({
   bulletPoints: {
@@ -49,7 +49,7 @@ export const BasicExample: FunctionComponent = () => {
         </Content>
       </CardBody>
       <CardFooter>
-        <List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
+        <List className={css(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
           <ListItem>
             <Button variant="link" isInline>
               First link
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx
index 0e756d40..3cf41b63 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableDividerExample.tsx
@@ -14,7 +14,7 @@ import {
 } from '@patternfly/react-core';
 import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 
 const useStyles = createUseStyles({
   action: {
@@ -38,7 +38,7 @@ export const BasicExample: FunctionComponent = () => {
         <Content component={ContentVariants.h4}>Getting Started</Content>
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <CogIcon className={classes.actionIcon} />
           </Icon>
@@ -50,7 +50,7 @@ export const BasicExample: FunctionComponent = () => {
         </Content>
       </CardBody>
       <CardFooter>
-        <List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
+        <List className={css(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
           <ListItem>
             <Button variant="link" isInline>
               First link
@@ -74,7 +74,7 @@ export const BasicExample: FunctionComponent = () => {
         -
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <LockIcon className={classes.actionIcon} />
           </Icon>
@@ -107,7 +107,7 @@ export const BasicExample: FunctionComponent = () => {
         <Content component={ContentVariants.h4}>Next Steps</Content>
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <BellIcon className={classes.actionIcon} />
           </Icon>
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx
index d5ed946f..1766332e 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableExample.tsx
@@ -14,7 +14,7 @@ import {
 } from '@patternfly/react-core';
 import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 
 const useStyles = createUseStyles({
   action: {
@@ -37,7 +37,7 @@ export const BasicExample: FunctionComponent = () => {
         <Content component={ContentVariants.h4}>Getting Started</Content>
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <CogIcon className={classes.actionIcon} />
           </Icon>
@@ -49,7 +49,7 @@ export const BasicExample: FunctionComponent = () => {
         </Content>
       </CardBody>
       <CardFooter>
-        <List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
+        <List className={css(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
           <ListItem>
             <Button variant="link" isInline>
               First link
@@ -73,7 +73,7 @@ export const BasicExample: FunctionComponent = () => {
         -
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <LockIcon className={classes.actionIcon} />
           </Icon>
@@ -106,7 +106,7 @@ export const BasicExample: FunctionComponent = () => {
         <Content component={ContentVariants.h4}>Next Steps</Content>
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <BellIcon className={classes.actionIcon} />
           </Icon>
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableSingleDividerExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableSingleDividerExample.tsx
index e44cbcde..37f9e806 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableSingleDividerExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/MultiContentCard/MultiContentCardExpandableSingleDividerExample.tsx
@@ -16,7 +16,7 @@ import {
 } from '@patternfly/react-core';
 import { ArrowRightIcon, BellIcon, CogIcon, LockIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 
 const useStyles = createUseStyles({
   action: {
@@ -40,7 +40,7 @@ export const BasicExample: FunctionComponent = () => {
         <Content component={ContentVariants.h4}>Getting Started</Content>
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <CogIcon className={classes.actionIcon} />
           </Icon>
@@ -52,7 +52,7 @@ export const BasicExample: FunctionComponent = () => {
         </Content>
       </CardBody>
       <CardFooter>
-        <List className={clsx(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
+        <List className={css(classes.bulletPoints, 'pf-v6-u-font-size-sm', 'pf-v6-u-ml-0')}>
           <ListItem>
             <Button variant="link" isInline>
               First link
@@ -76,7 +76,7 @@ export const BasicExample: FunctionComponent = () => {
         -
       </CardHeader>
       <CardBody>
-        <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+        <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
           <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
             <LockIcon className={classes.actionIcon} />
           </Icon>
@@ -111,7 +111,7 @@ export const BasicExample: FunctionComponent = () => {
             <Content component={ContentVariants.h4}>Next Steps</Content>
           </CardHeader>
           <CardBody>
-            <Content className={clsx(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
+            <Content className={css(classes.action, 'pf-v6-u-font-weight-bold', 'pf-v6-u-mb-sm')}>
               <Icon size="md" className="pf-v6-u-pl-sm pf-v6-u-pr-md">
                 <BellIcon className={classes.actionIcon} />
               </Icon>
diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx
index 34ea5da2..f2867e82 100644
--- a/packages/module/src/Ansible/Ansible.tsx
+++ b/packages/module/src/Ansible/Ansible.tsx
@@ -1,6 +1,6 @@
 import type { FunctionComponent, CSSProperties } from 'react';
 import { Fragment } from 'react';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 import { createUseStyles } from 'react-jss';
 
 export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
@@ -14,7 +14,7 @@ export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttribut
   ouiaId?: string | number;
 }
 
-const RHAAPTechnologyIcon = 
+const RHAAPTechnologyIcon =
 <svg
   width="24" height="24" viewBox="0 0 38 38"
   xmlns="http://www.w3.org/2000/svg">
@@ -54,7 +54,7 @@ const useStyles = createUseStyles({
 
 const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP, className, ouiaId = "Ansible-icon", ...props }: AnsibleProps) => {
   const classes = useStyles();
-  const ansibleLogoClass = clsx(
+  const ansibleLogoClass = css(
     classes.ansible,
     { [classes.ansibleSupported]: isSupported },
     { [classes.ansibleUnsupported]: !isSupported },
@@ -71,7 +71,7 @@ const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP,
         width="803.8"
         height="221.5"
       />
-  
+
       <rect
         x="-279.7"
         y="904"
@@ -80,7 +80,7 @@ const Ansible: FunctionComponent<AnsibleProps> = ({ isSupported = true, isRHAAP,
         width="2590.2"
         height="221.5"
       />
-  
+
       <rect
         x="17.1"
         y="1620.5"
diff --git a/packages/module/src/CloseButton/CloseButton.tsx b/packages/module/src/CloseButton/CloseButton.tsx
index 531d5450..8c83ccde 100644
--- a/packages/module/src/CloseButton/CloseButton.tsx
+++ b/packages/module/src/CloseButton/CloseButton.tsx
@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import { Button, ButtonProps, ButtonVariant } from '@patternfly/react-core';
 import { CloseIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 
 const useStyles = createUseStyles({
   closeButton: {
@@ -28,7 +28,7 @@ export const CloseButton: FunctionComponent<CloseButtonProps> = ({
   return (
     <Button icon={<CloseIcon />}
       aria-label={props['aria-label'] || 'Close'}
-      className={clsx(classes.closeButton, className)}
+      className={css(classes.closeButton, className)}
       data-test-id={dataTestID}
       onClick={onClick}
       variant={ButtonVariant.plain}
diff --git a/packages/module/src/ErrorStack/ErrorStack.tsx b/packages/module/src/ErrorStack/ErrorStack.tsx
index 8b5a0bac..99035ec2 100644
--- a/packages/module/src/ErrorStack/ErrorStack.tsx
+++ b/packages/module/src/ErrorStack/ErrorStack.tsx
@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 import { Content } from '@patternfly/react-core';
 import { createUseStyles } from 'react-jss';
 
@@ -28,7 +28,7 @@ export const ErrorStack: FunctionComponent<ErrorStackProps> = ({ error, classNam
 
   if (error.stack) {
     return (
-      <Content className={clsx(classes.errorStack, className)} {...props} >
+      <Content className={css(classes.errorStack, className)} {...props} >
         {error.stack.split('\n').map((line) => (
           <div key={line}>{line}</div>
         ))}
@@ -40,7 +40,7 @@ export const ErrorStack: FunctionComponent<ErrorStackProps> = ({ error, classNam
     return (
       <>
         <Content component="h6">{error.name}</Content>
-        <Content className={clsx(classes.errorStack, className)} component="blockquote" {...props}>
+        <Content className={css(classes.errorStack, className)} component="blockquote" {...props}>
           {error.message}
         </Content>
       </>
diff --git a/packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap b/packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap
index 452a9841..0dd244ee 100644
--- a/packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap
+++ b/packages/module/src/MissingPage/__snapshots__/MissingPage.test.tsx.snap
@@ -53,7 +53,6 @@ exports[`MissingPage component should render 1`] = `
             data-ouia-component-id="MissingPage-footer"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="MissingPage-home-button"
               data-ouia-component-type="PF6/Button"
@@ -120,7 +119,6 @@ exports[`MissingPage component should render 1`] = `
           data-ouia-component-id="MissingPage-footer"
         >
           <a
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-link"
             data-ouia-component-id="MissingPage-home-button"
             data-ouia-component-type="PF6/Button"
diff --git a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap
index 8b507fa4..39596a22 100644
--- a/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap
+++ b/packages/module/src/MultiContentCard/__snapshots__/MultiContentCard.test.tsx.snap
@@ -93,7 +93,6 @@ exports[`MultiContentCard component should render basic multi-content card 1`] =
             >
               <span>
                 <button
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link pf-m-inline"
                   data-ouia-component-id="OUIA-Generated-Button-link-1"
                   data-ouia-component-type="PF6/Button"
@@ -113,7 +112,6 @@ exports[`MultiContentCard component should render basic multi-content card 1`] =
             >
               <span>
                 <button
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link pf-m-inline"
                   data-ouia-component-id="OUIA-Generated-Button-link-2"
                   data-ouia-component-type="PF6/Button"
@@ -133,7 +131,6 @@ exports[`MultiContentCard component should render basic multi-content card 1`] =
             >
               <span>
                 <button
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link pf-m-inline"
                   data-ouia-component-id="OUIA-Generated-Button-link-3"
                   data-ouia-component-type="PF6/Button"
@@ -217,7 +214,6 @@ exports[`MultiContentCard component should render basic multi-content card 1`] =
             data-pf-content="true"
           >
             <button
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-4"
               data-ouia-component-type="PF6/Button"
@@ -341,7 +337,6 @@ exports[`MultiContentCard component should render basic multi-content card 1`] =
             data-pf-content="true"
           >
             <button
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-5"
               data-ouia-component-type="PF6/Button"
@@ -403,7 +398,6 @@ exports[`MultiContentCard component should render expandable multi-content card
       class="pf-v6-c-card__header-toggle"
     >
       <button
-        aria-disabled="false"
         aria-expanded="false"
         aria-label="Details"
         class="pf-v6-c-button pf-m-plain"
@@ -472,7 +466,6 @@ exports[`MultiContentCard component should render expandable multi-content card
       class="pf-v6-c-card__header-toggle"
     >
       <button
-        aria-disabled="false"
         aria-expanded="true"
         aria-label="Details"
         class="pf-v6-c-button pf-m-plain"
@@ -611,7 +604,6 @@ exports[`MultiContentCard component should render expandable multi-content card
               >
                 <span>
                   <button
-                    aria-disabled="false"
                     class="pf-v6-c-button pf-m-link pf-m-inline"
                     data-ouia-component-id="OUIA-Generated-Button-link-6"
                     data-ouia-component-type="PF6/Button"
@@ -631,7 +623,6 @@ exports[`MultiContentCard component should render expandable multi-content card
               >
                 <span>
                   <button
-                    aria-disabled="false"
                     class="pf-v6-c-button pf-m-link pf-m-inline"
                     data-ouia-component-id="OUIA-Generated-Button-link-7"
                     data-ouia-component-type="PF6/Button"
@@ -651,7 +642,6 @@ exports[`MultiContentCard component should render expandable multi-content card
               >
                 <span>
                   <button
-                    aria-disabled="false"
                     class="pf-v6-c-button pf-m-link pf-m-inline"
                     data-ouia-component-id="OUIA-Generated-Button-link-8"
                     data-ouia-component-type="PF6/Button"
@@ -735,7 +725,6 @@ exports[`MultiContentCard component should render expandable multi-content card
               data-pf-content="true"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-link pf-m-inline"
                 data-ouia-component-id="OUIA-Generated-Button-link-9"
                 data-ouia-component-type="PF6/Button"
@@ -859,7 +848,6 @@ exports[`MultiContentCard component should render expandable multi-content card
               data-pf-content="true"
             >
               <button
-                aria-disabled="false"
                 class="pf-v6-c-button pf-m-link pf-m-inline"
                 data-ouia-component-id="OUIA-Generated-Button-link-10"
                 data-ouia-component-type="PF6/Button"
@@ -922,7 +910,6 @@ exports[`MultiContentCard component should render expandable multi-content card
       class="pf-v6-c-card__header-toggle"
     >
       <button
-        aria-disabled="false"
         aria-expanded="false"
         aria-label="Details"
         class="pf-v6-c-button pf-m-plain"
@@ -1096,7 +1083,6 @@ exports[`MultiContentCard component should render multi-content card with a sing
             >
               <span>
                 <button
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link pf-m-inline"
                   data-ouia-component-id="OUIA-Generated-Button-link-16"
                   data-ouia-component-type="PF6/Button"
@@ -1116,7 +1102,6 @@ exports[`MultiContentCard component should render multi-content card with a sing
             >
               <span>
                 <button
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link pf-m-inline"
                   data-ouia-component-id="OUIA-Generated-Button-link-17"
                   data-ouia-component-type="PF6/Button"
@@ -1136,7 +1121,6 @@ exports[`MultiContentCard component should render multi-content card with a sing
             >
               <span>
                 <button
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link pf-m-inline"
                   data-ouia-component-id="OUIA-Generated-Button-link-18"
                   data-ouia-component-type="PF6/Button"
@@ -1220,7 +1204,6 @@ exports[`MultiContentCard component should render multi-content card with a sing
             data-pf-content="true"
           >
             <button
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-19"
               data-ouia-component-type="PF6/Button"
@@ -1347,7 +1330,6 @@ exports[`MultiContentCard component should render multi-content card with a sing
             data-pf-content="true"
           >
             <button
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-20"
               data-ouia-component-type="PF6/Button"
@@ -1486,7 +1468,6 @@ exports[`MultiContentCard component should render multi-content card with divide
             >
               <span>
                 <button
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link pf-m-inline"
                   data-ouia-component-id="OUIA-Generated-Button-link-11"
                   data-ouia-component-type="PF6/Button"
@@ -1506,7 +1487,6 @@ exports[`MultiContentCard component should render multi-content card with divide
             >
               <span>
                 <button
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link pf-m-inline"
                   data-ouia-component-id="OUIA-Generated-Button-link-12"
                   data-ouia-component-type="PF6/Button"
@@ -1526,7 +1506,6 @@ exports[`MultiContentCard component should render multi-content card with divide
             >
               <span>
                 <button
-                  aria-disabled="false"
                   class="pf-v6-c-button pf-m-link pf-m-inline"
                   data-ouia-component-id="OUIA-Generated-Button-link-13"
                   data-ouia-component-type="PF6/Button"
@@ -1613,7 +1592,6 @@ exports[`MultiContentCard component should render multi-content card with divide
             data-pf-content="true"
           >
             <button
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-14"
               data-ouia-component-type="PF6/Button"
@@ -1740,7 +1718,6 @@ exports[`MultiContentCard component should render multi-content card with divide
             data-pf-content="true"
           >
             <button
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link pf-m-inline"
               data-ouia-component-id="OUIA-Generated-Button-link-15"
               data-ouia-component-type="PF6/Button"
diff --git a/packages/module/src/ResponsiveActions/__snapshots__/ResponsiveActions.test.tsx.snap b/packages/module/src/ResponsiveActions/__snapshots__/ResponsiveActions.test.tsx.snap
index 2109f6d5..38f91f7c 100644
--- a/packages/module/src/ResponsiveActions/__snapshots__/ResponsiveActions.test.tsx.snap
+++ b/packages/module/src/ResponsiveActions/__snapshots__/ResponsiveActions.test.tsx.snap
@@ -18,7 +18,6 @@ exports[`ResponsiveActions component should render correctly ResponsiveActions 1
         >
            
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-primary"
             data-ouia-component-id="ResponsiveActions-action-0"
             data-ouia-component-type="PF6/Button"
@@ -47,7 +46,6 @@ exports[`ResponsiveActions component should render correctly ResponsiveActions 1
         >
            
           <button
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-secondary"
             data-ouia-component-id="ResponsiveActions-action-1"
             data-ouia-component-type="PF6/Button"
diff --git a/packages/module/src/ServiceCard/ServiceCard.tsx b/packages/module/src/ServiceCard/ServiceCard.tsx
index f304f30e..3a595415 100644
--- a/packages/module/src/ServiceCard/ServiceCard.tsx
+++ b/packages/module/src/ServiceCard/ServiceCard.tsx
@@ -3,7 +3,7 @@ import { Card, CardBody, CardFooter, CardHeader, CardProps, Content, ContentVari
 import { HelperText } from '@patternfly/react-core/dist/dynamic/components/HelperText';
 import { HelperTextItem } from '@patternfly/react-core/dist/dynamic/components/HelperText';
 import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 
 /** extends CardProps */
 export interface ServiceCardProps extends CardProps {
@@ -52,7 +52,7 @@ const ServiceCard: FunctionComponent<ServiceCardProps> = ({
   const classes = useStyles();
 
   return (
-    <Card className={clsx({ [classes.fullHeightCard]: isFullHeight })} ouiaId={`${ouiaId}-card`} {...props}>
+    <Card className={css({ [classes.fullHeightCard]: isFullHeight })} ouiaId={`${ouiaId}-card`} {...props}>
       <CardHeader>
         <Flex direction={{ default: isStacked ? 'column' : 'row' }} alignItems={{ default: isStacked ? 'alignItemsFlexStart' : 'alignItemsCenter' }}>
           <FlexItem className={classes.image}>
diff --git a/packages/module/src/Shortcut/Shortcut.tsx b/packages/module/src/Shortcut/Shortcut.tsx
index 9577d01f..7fd8741c 100644
--- a/packages/module/src/Shortcut/Shortcut.tsx
+++ b/packages/module/src/Shortcut/Shortcut.tsx
@@ -2,7 +2,7 @@ import type { FunctionComponent } from 'react';
 import { MouseIcon } from '@patternfly/react-icons';
 import { Label } from '@patternfly/react-core';
 import { createUseStyles } from 'react-jss';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 
 export interface ShortcutProps {
   /** Array of shortcut keys */
@@ -51,8 +51,8 @@ const Shortcut: FunctionComponent<ShortcutProps> = ({
   showSymbols = true,
   hover,
   click,
-  drag, 
-  rightClick, 
+  drag,
+  rightClick,
   dragAndDrop,
   className,
   ouiaId = 'Shortcut',
@@ -60,7 +60,7 @@ const Shortcut: FunctionComponent<ShortcutProps> = ({
 }: ShortcutProps) => {
   const classes = useStyles();
   const badges = [
-    ...(hover ? [ 
+    ...(hover ? [
       <Label variant="outline" key="hover" data-test-id="hover">
         <MouseIcon /> Hover
       </Label>
@@ -73,22 +73,22 @@ const Shortcut: FunctionComponent<ShortcutProps> = ({
           {key.length === 1 ? key.toUpperCase() : key[0].toUpperCase() + key.slice(1).toLowerCase()}
         </Label>
       )}),
-    ...(click ? [ 
+    ...(click ? [
       <Label variant="outline" key="click" data-test-id="click">
         <MouseIcon /> Click
       </Label>
     ] : []),
-    ...(rightClick ? [ 
+    ...(rightClick ? [
       <Label variant="outline" key="right-click" data-test-id="right-click">
         <MouseIcon /> Right click
       </Label>
     ] : []),
-    ...(drag ? [ 
+    ...(drag ? [
       <Label variant="outline" key="drag" data-test-id="drag">
         <MouseIcon /> Drag
       </Label>
     ] : []),
-    ...(dragAndDrop ? [ 
+    ...(dragAndDrop ? [
       <Label variant="outline" key="drag-and-drop" data-test-id="drag-and-drop">
         <MouseIcon /> Drag + Drop
       </Label>
@@ -97,7 +97,7 @@ const Shortcut: FunctionComponent<ShortcutProps> = ({
 
   return (
     <>
-      <span className={clsx({ [classes.shortcut]: description, className })} data-ouia-component-id={ouiaId} {...props}>
+      <span className={css({ [classes.shortcut]: description, className })} data-ouia-component-id={ouiaId} {...props}>
         {badges.length > 0 && badges.reduce((prev, curr, idx) => (
           <span key={idx}>{[ prev, ' + ', curr ]}</span>
         ))}
@@ -106,4 +106,4 @@ const Shortcut: FunctionComponent<ShortcutProps> = ({
     </>
   );}
 
-export default Shortcut;
\ No newline at end of file
+export default Shortcut;
diff --git a/packages/module/src/StaleDataWarning/StaleDataWarning.tsx b/packages/module/src/StaleDataWarning/StaleDataWarning.tsx
index 5f4a3707..ea59cbff 100644
--- a/packages/module/src/StaleDataWarning/StaleDataWarning.tsx
+++ b/packages/module/src/StaleDataWarning/StaleDataWarning.tsx
@@ -1,7 +1,7 @@
 import type { ReactElement, FunctionComponent } from 'react';
 import { ExclamationCircleIcon, ExclamationTriangleIcon } from '@patternfly/react-icons';
 import { Button, Icon, Tooltip, TooltipProps } from '@patternfly/react-core';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 import { createUseStyles } from 'react-jss';
 
 type Render = (config: { msg: string }) => ReactElement<any, any> | null;
@@ -83,7 +83,7 @@ const StaleDataWarning: FunctionComponent<StaleDataWarningProps> = ({
         msg,
       };
     }
-  
+
     return {
       isWarn: true,
       msg,
@@ -102,15 +102,15 @@ const StaleDataWarning: FunctionComponent<StaleDataWarningProps> = ({
   if (render) {
     return (
       <span
-        className={clsx({ [classes.inventoryCullingWarning]: isWarn, [classes.inventoryCullingDanger]: isError }, className)}
+        className={css({ [classes.inventoryCullingWarning]: isWarn, [classes.inventoryCullingDanger]: isError }, className)}
       >
         {isWarn &&
-          <Icon status="warning"><ExclamationTriangleIcon className={clsx( classes.iconMargin )} aria-label={ariaLabel || "Warning"}/></Icon>   
+          <Icon status="warning"><ExclamationTriangleIcon className={css( classes.iconMargin )} aria-label={ariaLabel || "Warning"}/></Icon>
         }
         {isError &&
-          <Icon status="danger"><ExclamationCircleIcon  className={clsx( classes.iconMargin )} aria-label={ariaLabel || "Danger"}/></Icon>   
+          <Icon status="danger"><ExclamationCircleIcon  className={css( classes.iconMargin )} aria-label={ariaLabel || "Danger"}/></Icon>
         }
-        <span className={clsx( classes.messageFont )}>
+        <span className={css( classes.messageFont )}>
           {render({ msg })}
         </span>
       </span>
@@ -127,4 +127,3 @@ const StaleDataWarning: FunctionComponent<StaleDataWarningProps> = ({
 };
 
 export default StaleDataWarning;
-
diff --git a/packages/module/src/Status/__snapshots__/Status.test.tsx.snap b/packages/module/src/Status/__snapshots__/Status.test.tsx.snap
index 0b8c8e06..16600836 100644
--- a/packages/module/src/Status/__snapshots__/Status.test.tsx.snap
+++ b/packages/module/src/Status/__snapshots__/Status.test.tsx.snap
@@ -161,7 +161,6 @@ exports[`Status component should render correctly link 1`] = `
   "baseElement": <body>
     <div>
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-link"
         data-ouia-component-id="Status-link-icon"
         data-ouia-component-type="PF6/Button"
@@ -224,7 +223,6 @@ exports[`Status component should render correctly link 1`] = `
   </body>,
   "container": <div>
     <button
-      aria-disabled="false"
       class="pf-v6-c-button pf-m-link"
       data-ouia-component-id="Status-link-icon"
       data-ouia-component-type="PF6/Button"
@@ -347,7 +345,6 @@ exports[`Status component should render correctly popover 1`] = `
         style="display: contents;"
       >
         <button
-          aria-disabled="false"
           class="pf-v6-c-button pf-m-link pf-m-inline"
           data-ouia-component-id="Status-popover-icon"
           data-ouia-component-type="PF6/Button"
@@ -414,7 +411,6 @@ exports[`Status component should render correctly popover 1`] = `
       style="display: contents;"
     >
       <button
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-link pf-m-inline"
         data-ouia-component-id="Status-popover-icon"
         data-ouia-component-type="PF6/Button"
diff --git a/packages/module/src/TagCount/TagCount.tsx b/packages/module/src/TagCount/TagCount.tsx
index 2fed682e..b944127a 100644
--- a/packages/module/src/TagCount/TagCount.tsx
+++ b/packages/module/src/TagCount/TagCount.tsx
@@ -1,5 +1,5 @@
 import type { FunctionComponent } from 'react';
-import clsx from 'clsx';
+import { css } from '@patternfly/react-styles';
 import { Button, ButtonProps, Icon } from '@patternfly/react-core';
 import { TagIcon } from '@patternfly/react-icons';
 import { createUseStyles } from 'react-jss'
@@ -34,16 +34,16 @@ export interface TagCountProps extends ButtonProps {
 }
 
 const TagCount: FunctionComponent<TagCountProps> = ({
-  count, 
+  count,
   className,
   iconSize= 'md',
   ouiaId = 'TagCount',
-  ...props 
+  ...props
 }: TagCountProps) => {
   const classes = useStyles(!count);
-  const tagClasses = clsx(classes.buttonTagCount, className);
+  const tagClasses = css(classes.buttonTagCount, className);
   return (
-    <Button 
+    <Button
       icon={
         <>
           <Icon iconSize={iconSize} data-ouia-component-id={`${ouiaId}-icon`}>
@@ -52,7 +52,7 @@ const TagCount: FunctionComponent<TagCountProps> = ({
           <span className={classes.tagText} data-ouia-component-id={`${ouiaId}-text`}>{count}</span>
         </>
       }
-      aria-label="Tag count" 
+      aria-label="Tag count"
       {...props}
       variant="plain"
       isDisabled={!count}
diff --git a/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
index 5eaeefa8..cc5f5167 100644
--- a/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
+++ b/packages/module/src/TagCount/__snapshots__/TagCount.test.tsx.snap
@@ -6,7 +6,6 @@ exports[`TagCount component should render a disabled tag count with no value 1`]
   "baseElement": <body>
     <div>
       <button
-        aria-disabled="false"
         aria-label="Tag count"
         class="pf-v6-c-button pf-m-plain buttonTagCount-0-2-1"
         data-ouia-component-id="TagCount"
@@ -50,7 +49,6 @@ exports[`TagCount component should render a disabled tag count with no value 1`]
   </body>,
   "container": <div>
     <button
-      aria-disabled="false"
       aria-label="Tag count"
       class="pf-v6-c-button pf-m-plain buttonTagCount-0-2-1"
       data-ouia-component-id="TagCount"
@@ -151,7 +149,6 @@ exports[`TagCount component should render a tag count of 11 1`] = `
   "baseElement": <body>
     <div>
       <button
-        aria-disabled="false"
         aria-label="Tag count"
         class="pf-v6-c-button pf-m-plain buttonTagCount-0-2-1"
         data-ouia-component-id="TagCount"
@@ -196,7 +193,6 @@ exports[`TagCount component should render a tag count of 11 1`] = `
   </body>,
   "container": <div>
     <button
-      aria-disabled="false"
       aria-label="Tag count"
       class="pf-v6-c-button pf-m-plain buttonTagCount-0-2-1"
       data-ouia-component-id="TagCount"
diff --git a/packages/module/src/UnauthorizedAccess/__snapshots__/UnauthorizedAccess.test.tsx.snap b/packages/module/src/UnauthorizedAccess/__snapshots__/UnauthorizedAccess.test.tsx.snap
index 49823c23..f246db42 100644
--- a/packages/module/src/UnauthorizedAccess/__snapshots__/UnauthorizedAccess.test.tsx.snap
+++ b/packages/module/src/UnauthorizedAccess/__snapshots__/UnauthorizedAccess.test.tsx.snap
@@ -49,7 +49,6 @@ exports[`UnauthorizedAccess component should apply custom styles 1`] = `
       data-ouia-component-id="UnauthorizedAccess-footer"
     >
       <a
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-primary"
         data-ouia-component-id="UnauthorizedAccess-home-button"
         data-ouia-component-type="PF6/Button"
@@ -175,7 +174,6 @@ exports[`UnauthorizedAccess component should render 1`] = `
       data-ouia-component-id="UnauthorizedAccess-footer"
     >
       <a
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-primary"
         data-ouia-component-id="UnauthorizedAccess-home-button"
         data-ouia-component-type="PF6/Button"
@@ -325,7 +323,6 @@ exports[`UnauthorizedAccess component should show custom body text 1`] = `
       data-ouia-component-id="UnauthorizedAccess-footer"
     >
       <a
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-primary"
         data-ouia-component-id="UnauthorizedAccess-home-button"
         data-ouia-component-type="PF6/Button"
@@ -395,7 +392,6 @@ exports[`UnauthorizedAccess component should show custom title 1`] = `
       data-ouia-component-id="UnauthorizedAccess-footer"
     >
       <a
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-primary"
         data-ouia-component-id="UnauthorizedAccess-home-button"
         data-ouia-component-type="PF6/Button"
@@ -465,7 +461,6 @@ exports[`UnauthorizedAccess component should use custom icon 1`] = `
       data-ouia-component-id="UnauthorizedAccess-footer"
     >
       <a
-        aria-disabled="false"
         class="pf-v6-c-button pf-m-primary"
         data-ouia-component-id="UnauthorizedAccess-home-button"
         data-ouia-component-type="PF6/Button"
diff --git a/packages/module/src/UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap b/packages/module/src/UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap
index e0c8b77f..298f34f5 100644
--- a/packages/module/src/UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap
+++ b/packages/module/src/UnavailableContent/__snapshots__/UnavailableContent.test.tsx.snap
@@ -53,7 +53,6 @@ exports[`Unavailable component should render with a link 1`] = `
             data-ouia-component-id="UnavailableContent-footer"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-primary"
               data-ouia-component-id="UnavailableContent-link-button"
               data-ouia-component-type="PF6/Button"
@@ -122,7 +121,6 @@ exports[`Unavailable component should render with a link 1`] = `
           data-ouia-component-id="UnavailableContent-footer"
         >
           <a
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-primary"
             data-ouia-component-id="UnavailableContent-link-button"
             data-ouia-component-type="PF6/Button"
@@ -248,7 +246,6 @@ exports[`Unavailable component should render with no link 1`] = `
             data-ouia-component-id="UnavailableContent-footer"
           >
             <a
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-primary"
               data-ouia-component-id="UnavailableContent-link-button"
               data-ouia-component-type="PF6/Button"
@@ -317,7 +314,6 @@ exports[`Unavailable component should render with no link 1`] = `
           data-ouia-component-id="UnavailableContent-footer"
         >
           <a
-            aria-disabled="false"
             class="pf-v6-c-button pf-m-primary"
             data-ouia-component-id="UnavailableContent-link-button"
             data-ouia-component-type="PF6/Button"
diff --git a/packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap b/packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap
index 848f34ff..49bdd419 100644
--- a/packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap
+++ b/packages/module/src/WarningModal/__snapshots__/WarningModal.test.tsx.snap
@@ -31,7 +31,6 @@ exports[`WarningModal component should render 1`] = `
             class="pf-v6-c-modal-box__close"
           >
             <button
-              aria-disabled="false"
               aria-label="Close"
               class="pf-v6-c-button pf-m-plain"
               data-ouia-component-id="WarningModal-ModalBoxCloseButton"
@@ -119,7 +118,6 @@ exports[`WarningModal component should render 1`] = `
             class="pf-v6-c-modal-box__footer"
           >
             <button
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-primary"
               data-ouia-component-id="WarningModal-confirm-button"
               data-ouia-component-type="PF6/Button"
@@ -133,7 +131,6 @@ exports[`WarningModal component should render 1`] = `
               </span>
             </button>
             <button
-              aria-disabled="false"
               class="pf-v6-c-button pf-m-link"
               data-ouia-component-id="WarningModal-cancel-button"
               data-ouia-component-type="PF6/Button"