diff --git a/package.json b/package.json
index be92099..e23ef26 100644
--- a/package.json
+++ b/package.json
@@ -57,5 +57,6 @@
     "@types/react-dom": "^18",
     "@types/file-saver": "^2.0.7",
     "tslib": "^2.6.3"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }
diff --git a/packages/module/package.json b/packages/module/package.json
index f680e9d..9b6ba05 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -5,10 +5,11 @@
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "scripts": {
-    "build": "yarn build:esm && yarn build:cjs",
+    "build": "yarn build:esm && yarn build:cjs && yarn cp:css",
     "build:watch": "npm run build:esm -- --watch",
     "build:esm": "tsc --build --verbose ./tsconfig.json",
     "build:cjs": "tsc --build --verbose ./tsconfig.cjs.json",
+    "cp:css": "cp -r src/css dist/css",
     "clean": "rimraf dist",
     "docs:develop": "pf-docs-framework start",
     "docs:build": "pf-docs-framework build all --output public",
@@ -39,6 +40,7 @@
     "@patternfly/react-styles": "6.0.0-alpha.23",
     "@spice-project/spice-html5": "^0.2.1",
     "file-saver": "^1.3.8",
+    "react-jss": "^10.10.0",
     "xterm": "^4.8.1",
     "xterm-addon-fit": "^0.2.1"
   },
@@ -52,8 +54,8 @@
     "@patternfly/patternfly-a11y": "^4.3.1",
     "@patternfly/react-code-editor": "6.0.0-alpha.61",
     "@patternfly/react-table": "6.0.0-alpha.61",
+    "monaco-editor": "^0.34.1",
     "rimraf": "^2.6.2",
-    "serve": "^14.2.3",
-    "monaco-editor": "^0.34.1"
+    "serve": "^14.2.3"
   }
 }
diff --git a/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md b/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md
index 3c1b4b9..e09aeca 100644
--- a/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md
+++ b/packages/module/patternfly-docs/content/extensions/react-console/examples/ReactConsole.md
@@ -13,11 +13,7 @@ React console lives in its own package at [`@patternfly/react-console`](https://
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from './SerialConsoleCustom.jsx';
 import { debounce } from '@patternfly/react-core';
-import '@patternfly/react-styles/src/css/components/Consoles/AccessConsoles.css';
-import '@patternfly/react-styles/src/css/components/Consoles/DesktopViewer.css';
-import '@patternfly/react-styles/src/css/components/Consoles/SerialConsole.css';
-import '@patternfly/react-styles/src/css/components/Consoles/VncConsole.css';
-import '@patternfly/react-styles/src/css/components/Consoles/xterm.css';
+import '@patternfly/react-console/dist/css/xterm.css';
 
 ## Examples
 
diff --git a/packages/module/patternfly-docs/generated/extensions/react-console/react.js b/packages/module/patternfly-docs/generated/extensions/react-console/react.js
index 600ff24..a4230ed 100644
--- a/packages/module/patternfly-docs/generated/extensions/react-console/react.js
+++ b/packages/module/patternfly-docs/generated/extensions/react-console/react.js
@@ -3,11 +3,7 @@ import { AutoLinkHeader, Example, Link as PatternflyThemeLink } from '@patternfl
 import { AccessConsoles, SerialConsole, VncConsole, DesktopViewer } from '@patternfly/react-console';
 import { SerialConsoleCustom } from '../../../content/extensions/react-console/examples/./SerialConsoleCustom.jsx';
 import { debounce } from '@patternfly/react-core';
-import '@patternfly/react-styles/src/css/components/Consoles/AccessConsoles.css';
-import '@patternfly/react-styles/src/css/components/Consoles/DesktopViewer.css';
-import '@patternfly/react-styles/src/css/components/Consoles/SerialConsole.css';
-import '@patternfly/react-styles/src/css/components/Consoles/VncConsole.css';
-import '@patternfly/react-styles/src/css/components/Consoles/xterm.css';
+import '@patternfly/react-console/dist/css/xterm.css';
 import srcImportbasicusage from './react/basic-usage.png';
 const pageData = {
   "id": "React console",
diff --git a/packages/module/src/components/AccessConsoles/AccessConsoles.tsx b/packages/module/src/components/AccessConsoles/AccessConsoles.tsx
index 699cd9c..4aa0586 100644
--- a/packages/module/src/components/AccessConsoles/AccessConsoles.tsx
+++ b/packages/module/src/components/AccessConsoles/AccessConsoles.tsx
@@ -1,14 +1,26 @@
 import React from 'react';
-import { css } from '@patternfly/react-styles';
 import { Select, SelectOption, MenuToggle, MenuToggleElement, SelectList } from '@patternfly/react-core';
 
 import { constants } from '../common/constants';
-
-import styles from '@patternfly/react-styles/css/components/Consoles/AccessConsoles';
-import '@patternfly/react-styles/css/components/Consoles/AccessConsoles.css';
+import { createUseStyles } from 'react-jss';
 
 const { NONE_TYPE, SERIAL_CONSOLE_TYPE, VNC_CONSOLE_TYPE, DESKTOP_VIEWER_CONSOLE_TYPE } = constants;
 
+const useStyles = createUseStyles({
+  console: {
+    display: 'grid',
+    gridTemplateAreas: '\'actions-main actions-extra\'\n    \'main main\'',
+    rowGap: 'var(--pf-t-global--spacer--md)'
+  },
+  consoleActions: {
+    gridArea: 'actions-main',
+    display: 'flex',
+    '> div': {
+      marginRight: 'var(--pf-t-global--spacer--sm)'
+    }
+  }
+});
+
 const getChildTypeName = (child: any) =>
   child && child.props && child.props.type ? child.props.type : (child && child.type && child.type.displayName) || null;
 
@@ -48,6 +60,7 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
   textDesktopViewerConsole = 'Desktop viewer',
   preselectedType = null
 }) => {
+  const styles = useStyles();
   const typeMap = {
     [SERIAL_CONSOLE_TYPE]: textSerialConsole,
     [VNC_CONSOLE_TYPE]: textVncConsole,
@@ -135,9 +148,9 @@ export const AccessConsoles: React.FunctionComponent<AccessConsolesProps> = ({
     }
   });
   return (
-    <div className={css(styles.console)}>
+    <div className={styles.console}>
       {React.Children.toArray(children).length > 1 && (
-        <div className={css(styles.consoleActions)}>
+        <div className={styles.consoleActions}>
           <Select
             aria-label={textSelectConsoleType}
             toggle={toggle}
diff --git a/packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap b/packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap
index b161821..6004428 100644
--- a/packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap
+++ b/packages/module/src/components/AccessConsoles/__snapshots__/AccessConsoles.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`AccessConsoles Empty 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   />
 </DocumentFragment>
 `;
@@ -11,7 +11,7 @@ exports[`AccessConsoles Empty 1`] = `
 exports[`AccessConsoles with DesktopViewer 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   />
 </DocumentFragment>
 `;
@@ -19,10 +19,10 @@ exports[`AccessConsoles with DesktopViewer 1`] = `
 exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   >
     <div
-      class="pf-v6-c-console__actions"
+      class="consoleActions-0-2-2"
     >
       <button
         aria-expanded="false"
@@ -62,7 +62,7 @@ exports[`AccessConsoles with SerialConsole and VncConsole as children 1`] = `
 exports[`AccessConsoles with SerialConsole as a single child 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   />
 </DocumentFragment>
 `;
@@ -70,7 +70,7 @@ exports[`AccessConsoles with SerialConsole as a single child 1`] = `
 exports[`AccessConsoles with VncConsole as a single child 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   />
 </DocumentFragment>
 `;
@@ -78,10 +78,10 @@ exports[`AccessConsoles with VncConsole as a single child 1`] = `
 exports[`AccessConsoles with preselected SerialConsole 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   >
     <div
-      class="pf-v6-c-console__actions-serial"
+      class="consoleActionsSerial-0-2-4"
     >
       <button
         aria-disabled="false"
@@ -105,7 +105,7 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
       </button>
     </div>
     <div
-      class="pf-v6-c-console__serial"
+      class="consoleSerial-0-2-3"
     >
       <div
         class="pf-v6-c-empty-state"
@@ -156,7 +156,7 @@ exports[`AccessConsoles with preselected SerialConsole 1`] = `
 exports[`AccessConsoles with wrapped SerialConsole as a child 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console"
+    class="console-0-2-1"
   >
     <p>
       Serial console text
diff --git a/packages/module/src/components/DesktopViewer/DesktopViewer.tsx b/packages/module/src/components/DesktopViewer/DesktopViewer.tsx
index 6db7b27..106bd69 100644
--- a/packages/module/src/components/DesktopViewer/DesktopViewer.tsx
+++ b/packages/module/src/components/DesktopViewer/DesktopViewer.tsx
@@ -1,12 +1,19 @@
 import React from 'react';
 
-import { css } from '@patternfly/react-styles';
 import { ManualConnection } from './ManualConnection';
 import { ConnectWithRemoteViewer, ConnectWithRemoteViewerProps } from './ConnectWithRemoteViewer';
 import { ConsoleDetailPropType } from './ConsoleDetailPropType';
 
-import styles from '@patternfly/react-styles/css/components/Consoles/DesktopViewer';
-import '@patternfly/react-styles/css/components/Consoles/DesktopViewer.css';
+import { createUseStyles } from 'react-jss';
+
+const useStyles = createUseStyles({
+  consoleDesktopViewer: {
+    gridArea: 'main',
+    display: 'grid',
+    gap: 'var(--pf-t-global--spacer--md)',
+    gridTemplateColumns: 'repeat(auto-fit, minmax(20rem, 1fr))'
+  }
+});
 
 export interface DesktopViewerProps extends ConnectWithRemoteViewerProps {
   /** Custom content of more-info section  */
@@ -51,7 +58,7 @@ export const DesktopViewer: React.FunctionComponent<DesktopViewerProps> = ({
   rdp = null,
   ...props
 }: DesktopViewerProps) => (
-  <div className={css(styles.consoleDesktopViewer)}>
+  <div className={useStyles().consoleDesktopViewer}>
     <ConnectWithRemoteViewer
       spice={spice}
       vnc={vnc}
diff --git a/packages/module/src/components/DesktopViewer/__snapshots__/DesktopViewer.test.tsx.snap b/packages/module/src/components/DesktopViewer/__snapshots__/DesktopViewer.test.tsx.snap
index a913c63..ff7084c 100644
--- a/packages/module/src/components/DesktopViewer/__snapshots__/DesktopViewer.test.tsx.snap
+++ b/packages/module/src/components/DesktopViewer/__snapshots__/DesktopViewer.test.tsx.snap
@@ -143,7 +143,7 @@ exports[`DesktopViewer default MoreInformationContent 1`] = `
 exports[`DesktopViewer empty 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__desktop-viewer"
+    class="consoleDesktopViewer-0-2-1"
   >
     <div
       class="pf-v6-c-console__remote-viewer"
@@ -189,7 +189,7 @@ exports[`DesktopViewer empty 1`] = `
 exports[`DesktopViewer with Spice and VNC 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__desktop-viewer"
+    class="consoleDesktopViewer-0-2-1"
   >
     <div
       class="pf-v6-c-console__remote-viewer"
@@ -510,7 +510,7 @@ exports[`DesktopViewer with Spice and VNC 1`] = `
 exports[`DesktopViewer with Spice, VNC and RDP (different hostname) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__desktop-viewer"
+    class="consoleDesktopViewer-0-2-1"
   >
     <div
       class="pf-v6-c-console__remote-viewer"
@@ -926,7 +926,7 @@ exports[`DesktopViewer with Spice, VNC and RDP (different hostname) 1`] = `
 exports[`DesktopViewer with Spice, VNC and RDP 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__desktop-viewer"
+    class="consoleDesktopViewer-0-2-1"
   >
     <div
       class="pf-v6-c-console__remote-viewer"
diff --git a/packages/module/src/components/SerialConsole/SerialConsole.tsx b/packages/module/src/components/SerialConsole/SerialConsole.tsx
index ac535cb..5b87771 100644
--- a/packages/module/src/components/SerialConsole/SerialConsole.tsx
+++ b/packages/module/src/components/SerialConsole/SerialConsole.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { css } from '@patternfly/react-styles';
 import { Button, EmptyState, Spinner, EmptyStateFooter } from '@patternfly/react-core';
 
 import { XTerm, XTermProps } from './XTerm';
@@ -8,12 +7,16 @@ import { SerialConsoleActions } from './SerialConsoleActions';
 
 import { constants } from '../common/constants';
 
-import styles from '@patternfly/react-styles/css/components/Consoles/SerialConsole';
-import '@patternfly/react-styles/css/components/Consoles/xterm.css';
-import '@patternfly/react-styles/css/components/Consoles/SerialConsole.css';
+import { createUseStyles } from 'react-jss';
 
 const { CONNECTED, DISCONNECTED, LOADING } = constants;
 
+const useStyles = createUseStyles({
+  consoleSerial: {
+    gridArea: 'main'
+  }
+});
+
 export interface SerialConsoleProps extends XTermProps {
   /** Initiate connection to backend. In other words, the calling components manages connection state. */
   onConnect: () => void;
@@ -63,6 +66,8 @@ const SerialConsoleBase: React.FunctionComponent<SerialConsoleProps> = ({
   textLoading = 'Loading ...',
   innerRef
 }) => {
+  const styles = useStyles();
+
   React.useEffect(() => {
     onConnect();
     return () => {
@@ -130,7 +135,7 @@ const SerialConsoleBase: React.FunctionComponent<SerialConsoleProps> = ({
           textReset={textReset}
         />
       )}
-      <div className={css(styles.consoleSerial)}>{terminal}</div>
+      <div className={styles.consoleSerial}>{terminal}</div>
     </>
   );
 };
diff --git a/packages/module/src/components/SerialConsole/SerialConsoleActions.tsx b/packages/module/src/components/SerialConsole/SerialConsoleActions.tsx
index 770f557..ee98ff0 100644
--- a/packages/module/src/components/SerialConsole/SerialConsoleActions.tsx
+++ b/packages/module/src/components/SerialConsole/SerialConsoleActions.tsx
@@ -1,9 +1,18 @@
 import React from 'react';
-import { css } from '@patternfly/react-styles';
 import { Button } from '@patternfly/react-core';
 
-import styles from '@patternfly/react-styles/css/components/Consoles/SerialConsole';
+import { createUseStyles } from 'react-jss';
 
+const useStyles = createUseStyles({
+  consoleActionsSerial: {
+    gridArea: 'actions-extra',
+    display: 'flex',
+    justifyContent: 'flex-end',
+    '> button': {
+      marginRight: 'var(--pf-t-global--spacer--sm)'
+    }
+  }
+});
 export interface SerialConsoleActionsProps extends React.HTMLProps<HTMLDivElement> {
   onDisconnect: () => void;
   onReset: () => void;
@@ -16,7 +25,7 @@ export const SerialConsoleActions: React.FunctionComponent<SerialConsoleActionsP
   textReset = 'Reset',
   ...props
 }: SerialConsoleActionsProps) => (
-  <div className={css(styles.consoleActionsSerial)}>
+  <div className={useStyles().consoleActionsSerial}>
     <Button variant="secondary" onClick={props.onDisconnect}>
       {textDisconnect}
     </Button>
diff --git a/packages/module/src/components/SerialConsole/XTerm.tsx b/packages/module/src/components/SerialConsole/XTerm.tsx
index 15247d3..98eb170 100644
--- a/packages/module/src/components/SerialConsole/XTerm.tsx
+++ b/packages/module/src/components/SerialConsole/XTerm.tsx
@@ -130,6 +130,6 @@ export const XTerm: React.FunctionComponent<XTermProps> = ({
 
   // ensure react never reuses this div by keying it with the terminal widget
   // Workaround for xtermjs/xterm.js#3172
-  return <div ref={ref} className="pf-v6-c-console__xterm" role="list" onFocus={onFocusIn} onBlur={onFocusOut} />;
+  return <div ref={ref} role="list" onFocus={onFocusIn} onBlur={onFocusOut} />;
 };
 XTerm.displayName = 'XTerm';
diff --git a/packages/module/src/components/SerialConsole/__snapshots__/SerialConsole.test.tsx.snap b/packages/module/src/components/SerialConsole/__snapshots__/SerialConsole.test.tsx.snap
index 154adda..5a46e8a 100644
--- a/packages/module/src/components/SerialConsole/__snapshots__/SerialConsole.test.tsx.snap
+++ b/packages/module/src/components/SerialConsole/__snapshots__/SerialConsole.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`SerialConsole in the DISCONNECTED state 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__serial"
+    class="consoleSerial-0-2-1"
   >
     <div
       class="pf-v6-c-empty-state"
@@ -47,7 +47,7 @@ exports[`SerialConsole in the DISCONNECTED state 1`] = `
 exports[`SerialConsole in the LOADING state 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__actions-serial"
+    class="consoleActionsSerial-0-2-2"
   >
     <button
       aria-disabled="false"
@@ -71,7 +71,7 @@ exports[`SerialConsole in the LOADING state 1`] = `
     </button>
   </div>
   <div
-    class="pf-v6-c-console__serial"
+    class="consoleSerial-0-2-1"
   >
     <div
       class="pf-v6-c-empty-state"
@@ -121,7 +121,7 @@ exports[`SerialConsole in the LOADING state 1`] = `
 exports[`SerialConsole with CONNECTED state renders 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__actions-serial"
+    class="consoleActionsSerial-0-2-2"
   >
     <button
       aria-disabled="false"
@@ -145,10 +145,9 @@ exports[`SerialConsole with CONNECTED state renders 1`] = `
     </button>
   </div>
   <div
-    class="pf-v6-c-console__serial"
+    class="consoleSerial-0-2-1"
   >
     <div
-      class="pf-v6-c-console__xterm"
       role="list"
     >
       <div
diff --git a/packages/module/src/components/SerialConsole/__snapshots__/SerialConsoleActions.test.tsx.snap b/packages/module/src/components/SerialConsole/__snapshots__/SerialConsoleActions.test.tsx.snap
index 4188cb0..60f782a 100644
--- a/packages/module/src/components/SerialConsole/__snapshots__/SerialConsoleActions.test.tsx.snap
+++ b/packages/module/src/components/SerialConsole/__snapshots__/SerialConsoleActions.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Render SerialConsoleActions 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__actions-serial"
+    class="consoleActionsSerial-0-2-1"
   >
     <button
       aria-disabled="false"
@@ -32,7 +32,7 @@ exports[`Render SerialConsoleActions 1`] = `
 exports[`Render SerialConsoleActions with custom texts 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__actions-serial"
+    class="consoleActionsSerial-0-2-1"
   >
     <button
       aria-disabled="false"
diff --git a/packages/module/src/components/SerialConsole/__snapshots__/XTerm.test.tsx.snap b/packages/module/src/components/SerialConsole/__snapshots__/XTerm.test.tsx.snap
index 494e650..712ffd4 100644
--- a/packages/module/src/components/SerialConsole/__snapshots__/XTerm.test.tsx.snap
+++ b/packages/module/src/components/SerialConsole/__snapshots__/XTerm.test.tsx.snap
@@ -3,7 +3,6 @@
 exports[`XTerm Render empty XTerm component 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__xterm"
     role="list"
   >
     <div
diff --git a/packages/module/src/components/VncConsole/VncActions.tsx b/packages/module/src/components/VncConsole/VncActions.tsx
index a5115f8..dd8d9cc 100644
--- a/packages/module/src/components/VncConsole/VncActions.tsx
+++ b/packages/module/src/components/VncConsole/VncActions.tsx
@@ -1,10 +1,18 @@
 import React from 'react';
-import { css } from '@patternfly/react-styles';
 import { Button, ButtonVariant } from '@patternfly/react-core';
 import { Dropdown, DropdownItem, DropdownList, MenuToggle, MenuToggleElement } from '@patternfly/react-core';
 
-import styles from '@patternfly/react-styles/css/components/Consoles/VncConsole';
+import { createUseStyles } from 'react-jss';
 
+const useStyles = createUseStyles({
+  consoleActionsVnc: {
+    gridArea: 'actions-extra',
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'flex-end',
+    columnGap: 'var(--pf-t-global--spacer--sm)'
+  }
+});
 export interface VncActionProps {
   onDisconnect: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
   onCtrlAltDel: () => void;
@@ -25,6 +33,7 @@ export const VncActions: React.FunctionComponent<VncActionProps> = ({
   additionalButtons = []
 }) => {
   const [isOpen, setIsOpen] = React.useState(false);
+  const styles = useStyles();
 
   const onToggleClick = () => {
     setIsOpen(!isOpen);
@@ -34,7 +43,7 @@ export const VncActions: React.FunctionComponent<VncActionProps> = ({
     setIsOpen(false);
   };
   const toolbar = (
-    <div className={css(styles.consoleActionsVnc)}>
+    <div className={styles.consoleActionsVnc}>
       {additionalButtons}
       <Dropdown
         id="pf-v6-c-console__send-shortcut"
diff --git a/packages/module/src/components/VncConsole/VncConsole.tsx b/packages/module/src/components/VncConsole/VncConsole.tsx
index a1b8373..f98ab00 100644
--- a/packages/module/src/components/VncConsole/VncConsole.tsx
+++ b/packages/module/src/components/VncConsole/VncConsole.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 
-import { css } from '@patternfly/react-styles';
 import { Button, EmptyState, Spinner, EmptyStateFooter } from '@patternfly/react-core';
 
 import { initLogging } from '@novnc/novnc/core/util/logging';
@@ -10,11 +9,16 @@ import RFB from '@novnc/novnc/core/rfb';
 import { VncActions } from './VncActions';
 import { constants } from '../common/constants';
 
-import styles from '@patternfly/react-styles/css/components/Consoles/VncConsole';
-import '@patternfly/react-styles/css/components/Consoles/VncConsole.css';
+import { createUseStyles } from 'react-jss';
 
 const { CONNECTED, CONNECTING, DISCONNECTED } = constants;
 
+const useStyles = createUseStyles({
+  consoleVnc: {
+    gridArea: 'main'
+  }
+});
+
 export interface VncConsoleProps extends React.HTMLProps<HTMLDivElement> {
   /** Children nodes */
   children?: React.ReactNode;
@@ -99,6 +103,7 @@ export const VncConsole: React.FunctionComponent<VncConsoleProps> = ({
   textCtrlAltDel
 }) => {
   const rfb = React.useRef<any>();
+  const styles = useStyles();
 
   const novncElem = React.useRef<HTMLDivElement>(null);
   const [status, setStatus] = React.useState(CONNECTING);
@@ -235,7 +240,7 @@ export const VncConsole: React.FunctionComponent<VncConsoleProps> = ({
   return (
     <>
       {rightContent}
-      <div className={css(styles.consoleVnc)}>
+      <div className={styles.consoleVnc}>
         {children}
         <React.Fragment>
           <div>
diff --git a/packages/module/src/components/VncConsole/__snapshots__/VncActions.test.tsx.snap b/packages/module/src/components/VncConsole/__snapshots__/VncActions.test.tsx.snap
index aea1f28..4f3186e 100644
--- a/packages/module/src/components/VncConsole/__snapshots__/VncActions.test.tsx.snap
+++ b/packages/module/src/components/VncConsole/__snapshots__/VncActions.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`VncActions VncActions renders correctly component hierarchy 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__actions-vnc"
+    class="consoleActionsVnc-0-2-1"
   >
     <button
       aria-expanded="false"
@@ -54,7 +54,7 @@ exports[`VncActions VncActions renders correctly component hierarchy 1`] = `
 exports[`VncActions VncActions renders correctly html 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__actions-vnc"
+    class="consoleActionsVnc-0-2-1"
   >
     <button
       aria-expanded="false"
@@ -105,7 +105,7 @@ exports[`VncActions VncActions renders correctly html 1`] = `
 exports[`VncActions placeholder render test 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__actions-vnc"
+    class="consoleActionsVnc-0-2-1"
   >
     <button
       aria-expanded="false"
diff --git a/packages/module/src/components/VncConsole/__snapshots__/VncConsole.test.tsx.snap b/packages/module/src/components/VncConsole/__snapshots__/VncConsole.test.tsx.snap
index 9e262d2..920f58a 100644
--- a/packages/module/src/components/VncConsole/__snapshots__/VncConsole.test.tsx.snap
+++ b/packages/module/src/components/VncConsole/__snapshots__/VncConsole.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`placeholder render test 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v6-c-console__vnc"
+    class="consoleVnc-0-2-1"
   >
     <div>
       <div
diff --git a/packages/module/src/css/xterm.css b/packages/module/src/css/xterm.css
new file mode 100644
index 0000000..0bc5685
--- /dev/null
+++ b/packages/module/src/css/xterm.css
@@ -0,0 +1,171 @@
+/**
+ * Copyright (c) 2014 The xterm.js authors. All rights reserved.
+ * Copyright (c) 2012-2013, Christopher Jeffrey (MIT License)
+ * https://github.com/chjj/term.js
+ * @license MIT
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+ * THE SOFTWARE.
+ *
+ * Originally forked from (with the author's permission):
+ *   Fabrice Bellard's javascript vt100 for jslinux:
+ *   http://bellard.org/jslinux/
+ *   Copyright (c) 2011 Fabrice Bellard
+ *   The original design remains. The terminal itself
+ *   has been extended to include xterm CSI codes, among
+ *   other features.
+ */
+
+/**
+ *  Default styles for xterm.js
+ */
+
+ .xterm {
+    font-feature-settings: "liga" 0;
+    position: relative;
+    user-select: none;
+    -ms-user-select: none;
+    -webkit-user-select: none;
+}
+
+.xterm.focus,
+.xterm:focus {
+    outline: none;
+}
+
+.xterm .xterm-helpers {
+    position: absolute;
+    top: 0;
+    /**
+     * The z-index of the helpers must be higher than the canvases in order for
+     * IMEs to appear on top.
+     */
+    z-index: 5;
+}
+
+.xterm .xterm-helper-textarea {
+    padding: 0;
+    border: 0;
+    margin: 0;
+    /* Move textarea out of the screen to the far left, so that the cursor is not visible */
+    position: absolute;
+    opacity: 0;
+    left: -9999em;
+    top: 0;
+    width: 0;
+    height: 0;
+    z-index: -5;
+    /** Prevent wrapping so the IME appears against the textarea at the correct position */
+    white-space: nowrap;
+    overflow: hidden;
+    resize: none;
+}
+
+.xterm .composition-view {
+    /* TODO: Composition position got messed up somewhere */
+    background: var(--pf-t--color--black);
+    color: var(--pf-t--color--white);
+    display: none;
+    position: absolute;
+    white-space: nowrap;
+    z-index: 1;
+}
+
+.xterm .composition-view.active {
+    display: block;
+}
+
+.xterm .xterm-viewport {
+    /* On OS X this is required in order for the scroll bar to appear fully opaque */
+    background-color: var(--pf-t--color--black);
+    overflow-y: scroll;
+    cursor: default;
+    position: absolute;
+    right: 0;
+    left: 0;
+    top: 0;
+    bottom: 0;
+}
+
+.xterm .xterm-screen {
+    position: relative;
+}
+
+.xterm .xterm-screen canvas {
+    position: absolute;
+    left: 0;
+    top: 0;
+}
+
+.xterm .xterm-scroll-area {
+    visibility: hidden;
+}
+
+.xterm-char-measure-element {
+    display: inline-block;
+    visibility: hidden;
+    position: absolute;
+    top: 0;
+    left: -9999em;
+    line-height: normal;
+}
+
+.xterm {
+    cursor: text;
+}
+
+.xterm.enable-mouse-events {
+    /* When mouse events are enabled (eg. tmux), revert to the standard pointer cursor */
+    cursor: default;
+}
+
+.xterm.xterm-cursor-pointer {
+    cursor: pointer;
+}
+
+.xterm.column-select.focus {
+    /* Column selection mode */
+    cursor: crosshair;
+}
+
+.xterm .xterm-accessibility,
+.xterm .xterm-message {
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 10;
+    color: transparent;
+}
+
+.xterm .live-region {
+    position: absolute;
+    left: -9999px;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+}
+
+.xterm-dim {
+    opacity: 0.5;
+}
+
+.xterm-underline {
+    text-decoration: underline;
+}
diff --git a/yarn.lock b/yarn.lock
index 11a88dc..bd7f18a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2094,6 +2094,13 @@
   dependencies:
     regenerator-runtime "^0.13.10"
 
+"@babel/runtime@^7.3.1", "@babel/runtime@^7.8.3":
+  version "7.24.8"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.24.8.tgz#5d958c3827b13cc6d05e038c07fb2e5e3420d82e"
+  integrity sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4":
   version "7.20.0"
   resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.0.tgz"
@@ -2213,6 +2220,18 @@
   resolved "https://registry.npmjs.org/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@emotion/is-prop-valid@^0.7.3":
+  version "0.7.3"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.7.3.tgz#a6bf4fa5387cbba59d44e698a4680f481a8da6cc"
+  integrity sha512-uxJqm/sqwXw3YPA5GXX365OBcJGFtxUVkB6WyezqFHlNe9jqUWH5ur2O2M8dGBz61kn1g3ZBlzUunFQXQIClhA==
+  dependencies:
+    "@emotion/memoize" "0.7.1"
+
+"@emotion/memoize@0.7.1":
+  version "0.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.1.tgz#e93c13942592cf5ef01aa8297444dc192beee52f"
+  integrity sha512-Qv4LTqO11jepd5Qmlp3M1YEjBumoTHcHFdgPTQ+sFlIL5myi/7xu/POwP7IRu6odBdmLXdtIs1D6TuW6kbwbbg==
+
 "@eslint/eslintrc@^1.3.3":
   version "1.3.3"
   resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.3.tgz"
@@ -5004,6 +5023,15 @@ crypto-random-string@^1.0.0:
   resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz"
   integrity sha512-GsVpkFPlycH7/fRR7Dhcmnoii54gV1nz7y4CWyeFS14N+JVBBhY+r8amRHE4BwSYal7BPTDp8isvAlCxyFt3Hg==
 
+css-jss@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/css-jss/-/css-jss-10.10.0.tgz#bd51fbd255cc24597ac0f0f32368394794d37ef3"
+  integrity sha512-YyMIS/LsSKEGXEaVJdjonWe18p4vXLo8CMA4FrW/kcaEyqdIGKCFXao31gbJddXEdIxSXFFURWrenBJPlKTgAA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "^10.10.0"
+    jss-preset-default "^10.10.0"
+
 css-loader@6.7.3:
   version "6.7.3"
   resolved "https://registry.npmjs.org/css-loader/-/css-loader-6.7.3.tgz"
@@ -5029,6 +5057,14 @@ css-select@^4.1.3:
     domutils "^2.8.0"
     nth-check "^2.0.1"
 
+css-vendor@^2.0.8:
+  version "2.0.8"
+  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+  dependencies:
+    "@babel/runtime" "^7.8.3"
+    is-in-browser "^1.0.2"
+
 css-what@^6.0.1:
   version "6.1.0"
   resolved "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz"
@@ -7061,6 +7097,13 @@ he@^1.2.0:
   resolved "https://registry.npmjs.org/he/-/he-1.2.0.tgz"
   integrity sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==
 
+hoist-non-react-statics@^3.2.0, hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 homedir-polyfill@^1.0.0:
   version "1.0.3"
   resolved "https://registry.npmjs.org/homedir-polyfill/-/homedir-polyfill-1.0.3.tgz"
@@ -7245,6 +7288,11 @@ humps@^2.0.1:
   resolved "https://registry.npmjs.org/humps/-/humps-2.0.1.tgz"
   integrity sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g==
 
+hyphenate-style-name@^1.0.3:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.1.0.tgz#1797bf50369588b47b72ca6d5e65374607cf4436"
+  integrity sha512-WDC/ui2VVRrz3jOVi+XtjqkDjiVjTtFaAGiW37k6b+ohyQ5wYDOGkvCZa8+H0nx3gyvv0+BST9xuOgIyGQ00gw==
+
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -7596,6 +7644,11 @@ is-hexadecimal@^1.0.0:
   resolved "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz"
   integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw==
 
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+  integrity sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g==
+
 is-installed-globally@^0.1.0:
   version "0.1.0"
   resolved "https://registry.npmjs.org/is-installed-globally/-/is-installed-globally-0.1.0.tgz"
@@ -8516,6 +8569,140 @@ jsonfile@^6.0.1:
   optionalDependencies:
     graceful-fs "^4.1.6"
 
+jss-plugin-camel-case@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.10.0.tgz#27ea159bab67eb4837fa0260204eb7925d4daa1c"
+  integrity sha512-z+HETfj5IYgFxh1wJnUAU8jByI48ED+v0fuTuhKrPR+pRBYS2EDwbusU8aFOpCdYhtRc9zhN+PJ7iNE8pAWyPw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    hyphenate-style-name "^1.0.3"
+    jss "10.10.0"
+
+jss-plugin-compose@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-compose/-/jss-plugin-compose-10.10.0.tgz#00d7a79adf7fcfe4927a792febdf0deceb0a7cd2"
+  integrity sha512-F5kgtWpI2XfZ3Z8eP78tZEYFdgTIbpA/TMuX3a8vwrNolYtN1N4qJR/Ob0LAsqIwCMLojtxN7c7Oo/+Vz6THow==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-default-unit@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.10.0.tgz#db3925cf6a07f8e1dd459549d9c8aadff9804293"
+  integrity sha512-SvpajxIECi4JDUbGLefvNckmI+c2VWmP43qnEy/0eiwzRUsafg5DVSIWSzZe4d2vFX1u9nRDP46WCFV/PXVBGQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+
+jss-plugin-expand@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-expand/-/jss-plugin-expand-10.10.0.tgz#5debd80554174ca2d9b9e38d85d4cb6f3e0393ab"
+  integrity sha512-ymT62W2OyDxBxr7A6JR87vVX9vTq2ep5jZLIdUSusfBIEENLdkkc0lL/Xaq8W9s3opUq7R0sZQpzRWELrfVYzA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+
+jss-plugin-extend@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-extend/-/jss-plugin-extend-10.10.0.tgz#94eb450847a8941777e77ea4533a579c1c578430"
+  integrity sha512-sKYrcMfr4xxigmIwqTjxNcHwXJIfvhvjTNxF+Tbc1NmNdyspGW47Ey6sGH8BcQ4FFQhLXctpWCQSpDwdNmXSwg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-global@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.10.0.tgz#1c55d3c35821fab67a538a38918292fc9c567efd"
+  integrity sha512-icXEYbMufiNuWfuazLeN+BNJO16Ge88OcXU5ZDC2vLqElmMybA31Wi7lZ3lf+vgufRocvPj8443irhYRgWxP+A==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+
+jss-plugin-nested@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.10.0.tgz#db872ed8925688806e77f1fc87f6e62264513219"
+  integrity sha512-9R4JHxxGgiZhurDo3q7LdIiDEgtA1bTGzAbhSPyIOWb7ZubrjQe8acwhEQ6OEKydzpl8XHMtTnEwHXCARLYqYA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.10.0.tgz#67f4dd4c70830c126f4ec49b4b37ccddb680a5d7"
+  integrity sha512-5VNJvQJbnq/vRfje6uZLe/FyaOpzP/IH1LP+0fr88QamVrGJa0hpRRyAa0ea4U/3LcorJfBFVyC4yN2QC73lJg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+
+jss-plugin-rule-value-function@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.10.0.tgz#7d99e3229e78a3712f78ba50ab342e881d26a24b"
+  integrity sha512-uEFJFgaCtkXeIPgki8ICw3Y7VMkL9GEan6SqmT9tqpwM+/t+hxfMUdU4wQ0MtOiMNWhwnckBV0IebrKcZM9C0g==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-rule-value-observable@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-observable/-/jss-plugin-rule-value-observable-10.10.0.tgz#d17b28c4401156bbe4cd0c4a73a80aad70613e8b"
+  integrity sha512-ZLMaYrR3QE+vD7nl3oNXuj79VZl9Kp8/u6A1IbTPDcuOu8b56cFdWRZNZ0vNr8jHewooEeq2doy8Oxtymr2ZPA==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+    symbol-observable "^1.2.0"
+
+jss-plugin-template@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-template/-/jss-plugin-template-10.10.0.tgz#072cda74a94c91b02d3a895d9e2408fd978ce033"
+  integrity sha512-ocXZBIOJOA+jISPdsgkTs8wwpK6UbsvtZK5JI7VUggTD6LWKbtoxUzadd2TpfF+lEtlhUmMsCkTRNkITdPKa6w==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+    tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.10.0.tgz#c01428ef5a89f2b128ec0af87a314d0c767931c7"
+  integrity sha512-UY/41WumgjW8r1qMCO8l1ARg7NHnfRVWRhZ2E2m0DMYsr2DD91qIXLyNhiX83hHswR7Wm4D+oDYNC1zWCJWtqg==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    css-vendor "^2.0.8"
+    jss "10.10.0"
+
+jss-preset-default@10.10.0, jss-preset-default@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss-preset-default/-/jss-preset-default-10.10.0.tgz#c8209449a0f6d232526c2ba3a3a6ec69ee97e023"
+  integrity sha512-GL175Wt2FGhjE+f+Y3aWh+JioL06/QWFgZp53CbNNq6ZkVU0TDplD8Bxm9KnkotAYn3FlplNqoW5CjyLXcoJ7Q==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    jss "10.10.0"
+    jss-plugin-camel-case "10.10.0"
+    jss-plugin-compose "10.10.0"
+    jss-plugin-default-unit "10.10.0"
+    jss-plugin-expand "10.10.0"
+    jss-plugin-extend "10.10.0"
+    jss-plugin-global "10.10.0"
+    jss-plugin-nested "10.10.0"
+    jss-plugin-props-sort "10.10.0"
+    jss-plugin-rule-value-function "10.10.0"
+    jss-plugin-rule-value-observable "10.10.0"
+    jss-plugin-template "10.10.0"
+    jss-plugin-vendor-prefixer "10.10.0"
+
+jss@10.10.0, jss@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/jss/-/jss-10.10.0.tgz#a75cc85b0108c7ac8c7b7d296c520a3e4fbc6ccc"
+  integrity sha512-cqsOTS7jqPsPMjtKYDUpdFC0AbhYFLTcuGRqymgmdJIeQ8cH7+AgX7YSgQy79wXloZq2VvATYxUOUQEvS1V/Zw==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    csstype "^3.0.2"
+    is-in-browser "^1.1.3"
+    tiny-warning "^1.0.2"
+
 "jsx-ast-utils@^2.4.1 || ^3.0.0":
   version "3.3.3"
   resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz"
@@ -10024,7 +10211,7 @@ prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.6.1, prop-types@^15.8.1:
+prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10238,6 +10425,11 @@ rc@^1.0.1, rc@^1.1.6, rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
+react-display-name@^0.2.4:
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/react-display-name/-/react-display-name-0.2.5.tgz#304c7cbfb59ee40389d436e1a822c17fe27936c6"
+  integrity sha512-I+vcaK9t4+kypiSgaiVWAipqHRXYmZIuAiS8vzFvXHHXVigg/sMKwlRgLy6LH2i3rmP+0Vzfl5lFsFRwF1r3pg==
+
 react-docgen@5.3.1:
   version "5.3.1"
   resolved "https://registry.npmjs.org/react-docgen/-/react-docgen-5.3.1.tgz"
@@ -10269,7 +10461,7 @@ react-dropzone@14.2.3, react-dropzone@^14.2.3:
     file-selector "^0.6.0"
     prop-types "^15.8.1"
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -10284,6 +10476,23 @@ react-is@^18.0.0:
   resolved "https://registry.npmjs.org/react-is/-/react-is-18.2.0.tgz"
   integrity sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==
 
+react-jss@^10.10.0:
+  version "10.10.0"
+  resolved "https://registry.yarnpkg.com/react-jss/-/react-jss-10.10.0.tgz#d08ab3257b0eed01e15d6d8275840055c279b0da"
+  integrity sha512-WLiq84UYWqNBF6579/uprcIUnM1TSywYq6AIjKTTTG5ziJl9Uy+pwuvpN3apuyVwflMbD60PraeTKT7uWH9XEQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    "@emotion/is-prop-valid" "^0.7.3"
+    css-jss "10.10.0"
+    hoist-non-react-statics "^3.2.0"
+    is-in-browser "^1.1.3"
+    jss "10.10.0"
+    jss-preset-default "10.10.0"
+    prop-types "^15.6.0"
+    shallow-equal "^1.2.0"
+    theming "^3.3.0"
+    tiny-warning "^1.0.2"
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz"
@@ -10384,6 +10593,11 @@ regenerator-runtime@^0.13.10:
   resolved "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.10.tgz"
   integrity sha512-KepLsg4dU12hryUO7bp/axHAKvwGOCV0sGloQtpagJ12ai+ojVDqkeGSiRX1zlq+kjIMZ1t7gpze+26QqtdGqw==
 
+regenerator-runtime@^0.14.0:
+  version "0.14.1"
+  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.14.1.tgz#356ade10263f685dda125100cd862c1db895327f"
+  integrity sha512-dYnhHh0nJoMfnkZs6GmmhFknAGRrLznOu5nc9ML+EJxGvrx6H7teuevqVqCuPcPK//3eDrrjQhehXVx9cnkGdw==
+
 regenerator-transform@^0.15.2:
   version "0.15.2"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.15.2.tgz#5bbae58b522098ebdf09bca2f83838929001c7a4"
@@ -11037,6 +11251,11 @@ shallow-clone@^3.0.0:
   dependencies:
     kind-of "^6.0.2"
 
+shallow-equal@^1.2.0:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
+  integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
+
 sharp@0.32.6:
   version "0.32.6"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.32.6.tgz#6ad30c0b7cd910df65d5f355f774aa4fce45732a"
@@ -11597,6 +11816,11 @@ supports-preserve-symlinks-flag@^1.0.0:
   resolved "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz"
   integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
 
+symbol-observable@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.2.0.tgz#c22688aed4eab3cdc2dfeacbb561660560a00804"
+  integrity sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ==
+
 symbol-tree@^3.2.4:
   version "3.2.4"
   resolved "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz"
@@ -11731,6 +11955,16 @@ textextensions@^2.5.0:
   resolved "https://registry.npmjs.org/textextensions/-/textextensions-2.6.0.tgz"
   integrity sha512-49WtAWS+tcsy93dRt6P0P3AMD2m5PvXRhuEA0kaXos5ZLlujtYmpmFsB+QvWUSxE1ZsstmYXfQ7L40+EcQgpAQ==
 
+theming@^3.3.0:
+  version "3.3.0"
+  resolved "https://registry.yarnpkg.com/theming/-/theming-3.3.0.tgz#dacabf04aa689edde35f1e1c117ec6de73fbf870"
+  integrity sha512-u6l4qTJRDaWZsqa8JugaNt7Xd8PPl9+gonZaIe28vAhqgHMIG/DOyFPqiKN/gQLQYj05tHv+YQdNILL4zoiAVA==
+  dependencies:
+    hoist-non-react-statics "^3.3.0"
+    prop-types "^15.5.8"
+    react-display-name "^0.2.4"
+    tiny-warning "^1.0.2"
+
 through2@^2.0.0:
   version "2.0.5"
   resolved "https://registry.npmjs.org/through2/-/through2-2.0.5.tgz"
@@ -11754,6 +11988,11 @@ timed-out@^4.0.0:
   resolved "https://registry.npmjs.org/timed-out/-/timed-out-4.0.1.tgz"
   integrity sha512-G7r3AhovYtr5YKOWQkta8RKAPb+J9IsO4uVmzjl8AZwfhs8UcUwTiD6gcJYSgOtzyjvQKrKYn41syHbUWMkafA==
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz"