diff --git a/package-lock.json b/package-lock.json
index 83c90a0e..35b71dec 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -6570,12 +6570,6 @@
       "integrity": "sha512-cOU9usZw8/dXIXKtwa8pM0OTJQuJkxMN6w30csNRUerHfeQ5R6U3kkU/FtJeIf3M202OHfY2U8ccInBG7/xogA==",
       "dev": true
     },
-    "node_modules/classnames": {
-      "version": "2.3.2",
-      "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz",
-      "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==",
-      "dev": true
-    },
     "node_modules/clean-css": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz",
@@ -6833,6 +6827,15 @@
         "node": ">=6"
       }
     },
+    "node_modules/clsx": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.0.0.tgz",
+      "integrity": "sha512-rQ1+kcj+ttHG0MKVGBUXwayCCF1oh39BF5COIpRzuCEv8Mwjv0XucrI2ExNTOn9IlLifGClWQcU9BrZORvtw6Q==",
+      "dev": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -22326,7 +22329,7 @@
         "@types/react": "^18.0.0",
         "@types/react-dom": "^18.0.0",
         "@types/react-router-dom": "^5.3.3",
-        "classnames": "^2.2.5",
+        "clsx": "^2.0.0",
         "copyfiles": "^2.4.1",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
diff --git a/packages/module/package.json b/packages/module/package.json
index 1b697285..f84a942e 100644
--- a/packages/module/package.json
+++ b/packages/module/package.json
@@ -48,7 +48,7 @@
     "@types/react": "^18.0.0",
     "@types/react-dom": "^18.0.0",
     "@types/react-router-dom": "^5.3.3",
-    "classnames": "^2.2.5",
+    "clsx": "^2.0.0",
     "copyfiles": "^2.4.1",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
diff --git a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx
index e3a67691..5479ced5 100644
--- a/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx
+++ b/packages/module/patternfly-docs/content/extensions/component-groups/examples/LongTextTooltip/LongTextTooltipExample.tsx
@@ -2,9 +2,9 @@ import React from 'react';
 import { TooltipPosition } from '@patternfly/react-core';
 import LongTextTooltip from "@patternfly/react-component-groups/dist/dynamic/LongTextTooltip";
 
-export const LongTextTooltipExample: React.FunctionComponent = () => (
+export const BasicExample: React.FunctionComponent = () => (
   <LongTextTooltip
     content="This is a very long tooltip that will be truncated to fit the screen. It will also have a max width of 400px."
     maxLength={40}
     tooltipPosition={TooltipPosition.bottom}/>
-)
+);
diff --git a/packages/module/src/Ansible/Ansible.tsx b/packages/module/src/Ansible/Ansible.tsx
index fbdaa82d..9ad53a37 100644
--- a/packages/module/src/Ansible/Ansible.tsx
+++ b/packages/module/src/Ansible/Ansible.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import { createUseStyles } from 'react-jss';
 
 export interface AnsibleProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
@@ -17,12 +17,12 @@ const useStyles = createUseStyles({
       top: '0.25rem'
     }
   },
-  supported: {
+  ansibleSupported: {
     '& .st0': {
       fill: 'var(--pf-v5-global--info-color--100)',
     }
   },
-  unsupported: {
+  ansibleUnsupported: {
     '& .st0, .st1, .st2': {
       fill: 'var(--pf-v5-global--disabled-color--200)',
       cursor: 'not-allowed',
@@ -32,10 +32,10 @@ const useStyles = createUseStyles({
 
 const Ansible: React.FunctionComponent<AnsibleProps> = ({ unsupported, className, ...props }: AnsibleProps) => {
   const classes = useStyles();
-  const ansibleLogoClass = classNames(
+  const ansibleLogoClass = clsx(
     classes.ansible,
-    { [classes.supported]: !unsupported || unsupported === 0 },
-    { [classes.unsupported]: unsupported || unsupported === 1 },
+    { [classes.ansibleSupported]: !unsupported || unsupported === 0 },
+    { [classes.ansibleUnsupported]: unsupported || unsupported === 1 },
     className
   );
 
diff --git a/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap b/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap
index 31d4082f..0aead775 100644
--- a/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap
+++ b/packages/module/src/Ansible/__snapshots__/Ansible.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Ansible component should render supported - boolean 1`] = `
 <div>
   <i
-    class="ansible-0-2-1 supported-0-2-2"
+    class="ansible-0-2-1 ansibleSupported-0-2-2"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -27,7 +27,7 @@ exports[`Ansible component should render supported - boolean 1`] = `
 exports[`Ansible component should render supported - number 1`] = `
 <div>
   <i
-    class="ansible-0-2-1 supported-0-2-2"
+    class="ansible-0-2-1 ansibleSupported-0-2-2"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -51,7 +51,7 @@ exports[`Ansible component should render supported - number 1`] = `
 exports[`Ansible component should render unsupported - boolean 1`] = `
 <div>
   <i
-    class="ansible-0-2-1 unsupported-0-2-3"
+    class="ansible-0-2-1 ansibleUnsupported-0-2-3"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
@@ -99,7 +99,7 @@ exports[`Ansible component should render unsupported - boolean 1`] = `
 exports[`Ansible component should render unsupported - number 1`] = `
 <div>
   <i
-    class="ansible-0-2-1 unsupported-0-2-3"
+    class="ansible-0-2-1 ansibleUnsupported-0-2-3"
   >
     <svg
       style="enable-background: new 0 0 2032 2027.2;"
diff --git a/packages/module/src/Battery/Battery.tsx b/packages/module/src/Battery/Battery.tsx
index 1f98e80c..32f1b650 100644
--- a/packages/module/src/Battery/Battery.tsx
+++ b/packages/module/src/Battery/Battery.tsx
@@ -1,5 +1,5 @@
-import React from 'react';
-import classNames from 'classnames';
+import React, { useMemo } from 'react';
+import clsx from 'clsx';
 import { createUseStyles } from 'react-jss'
 
 const batteryDefault = {
@@ -43,25 +43,37 @@ const useStyles = createUseStyles({
     }
   },
 
-  'battery-0': batteryDefault,
-  'battery-null': batteryDefault,
-
-  'battery-1': batteryLow,
-  'battery-low': batteryLow,
-  'battery-info': batteryLow,
-
-  'battery-2': batteryMedium,
-  'battery-medium': batteryMedium,
-  'battery-warn': batteryMedium,
-
-  'battery-3': batteryHigh,
-  'battery-high': batteryHigh,
-  'battery-error': batteryHigh,
-
-  'battery-4': batteryCritical,
-  'battery-critical': batteryCritical,
+  batteryDefault,
+  batteryLow,
+  batteryMedium,
+  batteryHigh,
+  batteryCritical,
 });
 
+const batteryLevels = (severity: BatterySeverity, classMode?: boolean) => {
+  switch (severity) {
+  case 'critical':
+  case 4:
+    return classMode ? 'batteryCritical' : <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+  case 'high':
+  case 'error':
+  case 3:
+    return classMode ? 'batteryHigh' : <path d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+  case 'medium':
+  case 'warn':
+  case 2:
+    return classMode ? 'batteryMedium' : <path d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+  case 'low':
+  case 'info':
+  case 1:
+    return classMode ? 'batteryLow' : <path d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+  default:
+    // eslint-disable-next-line
+      console.error('Warning: Unsupported value presented to battery component');
+    return classMode ? 'batteryDefault' : <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
+  }
+};
+
 export type BatterySeverity = 1 | 2 | 3 | 4 | 'info' | 'low' | 'warn' | 'medium' | 'error' | 'high' | 'critical';
 
 export interface BatteryProps extends React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> {
@@ -77,36 +89,14 @@ export interface BatteryProps extends React.DetailedHTMLProps<React.HTMLAttribut
 
 const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, labelHidden, className, ...props }: BatteryProps) => {
   const classes = useStyles();
-  const batteryClasses = classNames(classes.battery, classes[`battery-${severity}`], className);
+  const batteryClasses = clsx(classes.battery, classes[String(batteryLevels(severity, true))], className);
 
   let ariaLabels = {};
   if (labelHidden) {
     ariaLabels = { ['aria-label']: `${severity} ${label}` };
   }
 
-  const batteryLevels = (severity: BatterySeverity) => {
-    switch (severity) {
-    case 'critical':
-    case 4:
-      return <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
-    case 'high':
-    case 'error':
-    case 3:
-      return <path d="M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
-    case 'medium':
-    case 'warn':
-    case 2:
-      return <path d="M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
-    case 'low':
-    case 'info':
-    case 1:
-      return <path d="M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
-    default:
-      // eslint-disable-next-line
-        console.error('Warning: Unsupported value presented to battery component');
-      return <path d="M 99.168858,143.38516 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698858,11.2 z M 99.168857,235.25069 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z M 99.168857,327.14542 H 351.33914 c 5.33437,0 9.69886,-5.04 9.69886,-11.19999 v -28 c 0,-6.16001 -4.36449,-11.2 -9.69886,-11.2 H 99.168857 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.19999 9.698857,11.19999 z M 99.168993,419.0375 H 351.33927 c 5.33437,0 9.69886,-5.04 9.69886,-11.2 v -28 c 0,-6.16 -4.36449,-11.2 -9.69886,-11.2 H 99.168993 c -5.334371,0 -9.698857,5.04 -9.698857,11.2 v 28 c 0,6.16 4.364486,11.2 9.698857,11.2 z" />;
-    }
-  };
+  const batteryVariant = useMemo(() => batteryLevels(severity) , [ severity ])
 
   return (
     <React.Fragment>
@@ -134,10 +124,10 @@ const Battery: React.FunctionComponent<BatteryProps> = ({ severity, label, label
             }}
             d="m 144.16452,21.032222 h 159.67454 q 123.1748,0 123.1748,128.667868 v 212.64759 q 0,128.66788 -123.1748,128.66788 H 144.16452 q -123.174811,0 -123.174811,-128.66788 V 149.70009 q 0,-128.667868 123.174811,-128.667868 z"
           />
-          {batteryLevels(severity)}
+          {batteryVariant}
         </svg>
       </i>
-      {!labelHidden && <span className="label"> {label} </span>}
+      {!labelHidden && <span> {label} </span>}
     </React.Fragment>
   );
 };
diff --git a/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap b/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
index 14b758ba..eb13acf7 100644
--- a/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
+++ b/packages/module/src/Battery/__snapshots__/Batery.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`Battery component API should hide label 1`] = `
 <div>
   <i
     aria-label="high high"
-    class="battery-0-2-1 battery-high-0-2-11"
+    class="battery-0-2-1 batteryHigh-0-2-5"
     widget-id="high"
     widget-type="InsightsBattery"
   >
@@ -31,7 +31,7 @@ exports[`Battery component API should hide label 1`] = `
 exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-4-0-2-13"
+    class="battery-0-2-1 batteryCritical-0-2-6"
     widget-id="4"
     widget-type="InsightsBattery"
   >
@@ -52,9 +52,7 @@ exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     4
      
@@ -65,7 +63,7 @@ exports[`Battery component should render correctly CriticalBattery - 4 1`] = `
 exports[`Battery component should render correctly CriticalBattery - critical 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-critical-0-2-14"
+    class="battery-0-2-1 batteryCritical-0-2-6"
     widget-id="critical"
     widget-type="InsightsBattery"
   >
@@ -86,9 +84,7 @@ exports[`Battery component should render correctly CriticalBattery - critical 1`
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     critical
      
@@ -99,7 +95,7 @@ exports[`Battery component should render correctly CriticalBattery - critical 1`
 exports[`Battery component should render correctly HighBattery - 3 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-3-0-2-10"
+    class="battery-0-2-1 batteryHigh-0-2-5"
     widget-id="3"
     widget-type="InsightsBattery"
   >
@@ -120,9 +116,7 @@ exports[`Battery component should render correctly HighBattery - 3 1`] = `
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     3
      
@@ -133,7 +127,7 @@ exports[`Battery component should render correctly HighBattery - 3 1`] = `
 exports[`Battery component should render correctly HighBattery - error 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-error-0-2-12"
+    class="battery-0-2-1 batteryHigh-0-2-5"
     widget-id="error"
     widget-type="InsightsBattery"
   >
@@ -154,9 +148,7 @@ exports[`Battery component should render correctly HighBattery - error 1`] = `
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     error
      
@@ -167,7 +159,7 @@ exports[`Battery component should render correctly HighBattery - error 1`] = `
 exports[`Battery component should render correctly HighBattery - high 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-high-0-2-11"
+    class="battery-0-2-1 batteryHigh-0-2-5"
     widget-id="high"
     widget-type="InsightsBattery"
   >
@@ -188,9 +180,7 @@ exports[`Battery component should render correctly HighBattery - high 1`] = `
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     high
      
@@ -201,7 +191,7 @@ exports[`Battery component should render correctly HighBattery - high 1`] = `
 exports[`Battery component should render correctly LowBattery - 1 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-1-0-2-4"
+    class="battery-0-2-1 batteryLow-0-2-3"
     widget-id="1"
     widget-type="InsightsBattery"
   >
@@ -222,9 +212,7 @@ exports[`Battery component should render correctly LowBattery - 1 1`] = `
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     1
      
@@ -235,7 +223,7 @@ exports[`Battery component should render correctly LowBattery - 1 1`] = `
 exports[`Battery component should render correctly LowBattery - info 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-info-0-2-6"
+    class="battery-0-2-1 batteryLow-0-2-3"
     widget-id="info"
     widget-type="InsightsBattery"
   >
@@ -256,9 +244,7 @@ exports[`Battery component should render correctly LowBattery - info 1`] = `
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     info
      
@@ -269,7 +255,7 @@ exports[`Battery component should render correctly LowBattery - info 1`] = `
 exports[`Battery component should render correctly LowBattery - low 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-low-0-2-5"
+    class="battery-0-2-1 batteryLow-0-2-3"
     widget-id="low"
     widget-type="InsightsBattery"
   >
@@ -290,9 +276,7 @@ exports[`Battery component should render correctly LowBattery - low 1`] = `
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     low
      
@@ -303,7 +287,7 @@ exports[`Battery component should render correctly LowBattery - low 1`] = `
 exports[`Battery component should render correctly MediumBattery - 2 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-2-0-2-7"
+    class="battery-0-2-1 batteryMedium-0-2-4"
     widget-id="2"
     widget-type="InsightsBattery"
   >
@@ -324,9 +308,7 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     2
      
@@ -337,7 +319,7 @@ exports[`Battery component should render correctly MediumBattery - 2 1`] = `
 exports[`Battery component should render correctly MediumBattery - medium 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-medium-0-2-8"
+    class="battery-0-2-1 batteryMedium-0-2-4"
     widget-id="medium"
     widget-type="InsightsBattery"
   >
@@ -358,9 +340,7 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     medium
      
@@ -371,7 +351,7 @@ exports[`Battery component should render correctly MediumBattery - medium 1`] =
 exports[`Battery component should render correctly MediumBattery - warn 1`] = `
 <div>
   <i
-    class="battery-0-2-1 battery-warn-0-2-9"
+    class="battery-0-2-1 batteryMedium-0-2-4"
     widget-id="warn"
     widget-type="InsightsBattery"
   >
@@ -392,9 +372,7 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
     warn
      
@@ -405,7 +383,7 @@ exports[`Battery component should render correctly MediumBattery - warn 1`] = `
 exports[`Battery component should render correctly NullBatery, default 1`] = `
 <div>
   <i
-    class="battery-0-2-1"
+    class="battery-0-2-1 batteryDefault-0-2-2"
     widget-id=""
     widget-type="InsightsBattery"
   >
@@ -426,9 +404,7 @@ exports[`Battery component should render correctly NullBatery, default 1`] = `
       />
     </svg>
   </i>
-  <span
-    class="label"
-  >
+  <span>
      
      
   </span>
diff --git a/packages/module/src/LongTextTooltip/LongTextTooltip.tsx b/packages/module/src/LongTextTooltip/LongTextTooltip.tsx
index fa591d8f..5f2a0aca 100644
--- a/packages/module/src/LongTextTooltip/LongTextTooltip.tsx
+++ b/packages/module/src/LongTextTooltip/LongTextTooltip.tsx
@@ -12,7 +12,7 @@ export interface LongTextTooltipProps extends Omit<TooltipProps, 'content'> {
   tooltipMaxWidth?: string;
 }
 
-const LongTextTooltip: React.FC<LongTextTooltipProps> = ({
+const LongTextTooltip: React.FunctionComponent<LongTextTooltipProps> = ({
   content = '',
   maxLength = Infinity,
   tooltipMaxWidth = '50vw',
@@ -23,7 +23,7 @@ const LongTextTooltip: React.FC<LongTextTooltipProps> = ({
 
   return content.length > maxLength ? (
     <Tooltip maxWidth={tooltipMaxWidth} position={tooltipPosition} content={<div>{content}</div>} {...rest}>
-      <div>{truncate(content, maxLength)}</div>
+      <span>{truncate(content, maxLength)}</span>
     </Tooltip>
   ) : (
     <span>{content}</span>
diff --git a/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap b/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap
index cb3cb2a7..c0966179 100644
--- a/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap
+++ b/packages/module/src/LongTextTooltip/__snapshots__/LongTextTooltip.test.tsx.snap
@@ -280,9 +280,9 @@ exports[`LongTextTooltip component should render content with maxLength shorter
       <div
         style="display: contents;"
       >
-        <div>
+        <span>
           …
-        </div>
+        </span>
       </div>
     </div>
   </body>,
@@ -290,9 +290,9 @@ exports[`LongTextTooltip component should render content with maxLength shorter
     <div
       style="display: contents;"
     >
-      <div>
+      <span>
         …
-      </div>
+      </span>
     </div>
   </div>,
   "debug": [Function],