diff --git a/CHANGELOG.md b/CHANGELOG.md
index 8aebb1a..a32a43f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## v3.0.0
+
+### Changed
+
+-   Updated to latest version of MUI 6, components and themes
+
 ## v2.0.0
 
 ### Changed
diff --git a/package.json b/package.json
index 8349025..644dedf 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "react-showcase-demo",
-    "version": "2.0.0",
+    "version": "3.0.0",
     "private": true,
     "type": "module",
     "scripts": {
@@ -19,9 +19,9 @@
     "dependencies": {
         "@brightlayer-ui/colors": "^3.1.1",
         "@brightlayer-ui/icons-mui": "^3.6.0",
-        "@brightlayer-ui/react-components": "^6.1.2",
+        "@brightlayer-ui/react-components": "^7.0.0",
         "@brightlayer-ui/react-progress-icons": "^2.1.1",
-        "@brightlayer-ui/react-themes": "^8.0.0-alpha.0",
+        "@brightlayer-ui/react-themes": "^8.0.0",
         "@date-io/date-fns": "^2.13.1",
         "@emotion/css": "^11.9.0",
         "@emotion/react": "^11.10.6",
diff --git a/src/__tests__/blui-tests/__snapshots__/Components.test.tsx.snap b/src/__tests__/blui-tests/__snapshots__/Components.test.tsx.snap
index a68f6f9..3f0861c 100644
--- a/src/__tests__/blui-tests/__snapshots__/Components.test.tsx.snap
+++ b/src/__tests__/blui-tests/__snapshots__/Components.test.tsx.snap
@@ -12,8 +12,10 @@ exports[`Component: ChannelValueExample ChannelValueExample renders examples cor
       Basic Usage
     </p>
     <span
-      className="BluiChannelValue-root MuiBox-root cssltr-1flyiuq"
-      data-testid="blui-channel-value-root"
+      className="BluiChannelValue-root cssltr-kek565"
+      color="inherit"
+      data-testid="blui-channel-value-root-test"
+      fontSize="inherit"
     >
       <h6
         className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -34,8 +36,10 @@ exports[`Component: ChannelValueExample ChannelValueExample renders examples cor
       w/ Units
     </p>
     <span
-      className="BluiChannelValue-root MuiBox-root cssltr-1flyiuq"
-      data-testid="blui-channel-value-root"
+      className="BluiChannelValue-root cssltr-kek565"
+      color="inherit"
+      data-testid="blui-channel-value-root-test"
+      fontSize="inherit"
     >
       <h6
         className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -63,8 +67,10 @@ exports[`Component: ChannelValueExample ChannelValueExample renders examples cor
       w/ Icon
     </p>
     <span
-      className="BluiChannelValue-root MuiBox-root cssltr-1flyiuq"
-      data-testid="blui-channel-value-root"
+      className="BluiChannelValue-root cssltr-kek565"
+      color="inherit"
+      data-testid="blui-channel-value-root-test"
+      fontSize="inherit"
     >
       <span
         className="BluiChannelValue-icon cssltr-1oqvg4e"
@@ -115,8 +121,10 @@ exports[`Component: ChannelValueExample ChannelValueExample renders examples cor
       w/ Custom Font Size
     </p>
     <span
-      className="BluiChannelValue-root MuiBox-root cssltr-th3vuf"
-      data-testid="blui-channel-value-root"
+      className="BluiChannelValue-root cssltr-c8a5as"
+      color="inherit"
+      data-testid="blui-channel-value-root-test"
+      fontSize={24}
     >
       <span
         className="BluiChannelValue-icon cssltr-1oqvg4e"
@@ -172,11 +180,11 @@ exports[`Component: EmptyStateExample EmptyStateExample renders examples correct
       Basic Usage
     </p>
     <div
-      className="BluiEmptyState-root MuiBox-root cssltr-1n1qj8a"
+      className="BluiEmptyState-root MuiBox-root cssltr-lyk9sl"
       data-testid="blui-empty-state-root"
     >
       <div
-        className="BluiEmptyState-icon MuiBox-root cssltr-1qeq0w3"
+        className="BluiEmptyState-icon MuiBox-root cssltr-xipz7o"
       >
         <svg
           aria-hidden={true}
@@ -191,7 +199,7 @@ exports[`Component: EmptyStateExample EmptyStateExample renders examples correct
         </svg>
       </div>
       <h6
-        className="MuiTypography-root MuiTypography-h6 cssltr-5d0866-MuiTypography-root"
+        className="MuiTypography-root MuiTypography-h6 BluiEmptyState-title cssltr-5d0866-MuiTypography-root"
         style={{}}
       >
         Location Unknown
@@ -208,11 +216,11 @@ exports[`Component: EmptyStateExample EmptyStateExample renders examples correct
       w/ Description
     </p>
     <div
-      className="BluiEmptyState-root MuiBox-root cssltr-1n1qj8a"
+      className="BluiEmptyState-root MuiBox-root cssltr-lyk9sl"
       data-testid="blui-empty-state-root"
     >
       <div
-        className="BluiEmptyState-icon MuiBox-root cssltr-1qeq0w3"
+        className="BluiEmptyState-icon MuiBox-root cssltr-xipz7o"
       >
         <svg
           aria-hidden={true}
@@ -227,13 +235,13 @@ exports[`Component: EmptyStateExample EmptyStateExample renders examples correct
         </svg>
       </div>
       <h6
-        className="MuiTypography-root MuiTypography-h6 cssltr-5d0866-MuiTypography-root"
+        className="MuiTypography-root MuiTypography-h6 BluiEmptyState-title cssltr-5d0866-MuiTypography-root"
         style={{}}
       >
         Location Services Disabled
       </h6>
       <h6
-        className="MuiTypography-root MuiTypography-subtitle2 BluiEmptyState-description cssltr-1seh92d-MuiTypography-root"
+        className="MuiTypography-root MuiTypography-subtitle2 BluiEmptyState-description cssltr-1pp0zv-MuiTypography-root"
         style={{}}
       >
         Enable Location Services via Settings to receive GPS information
@@ -247,11 +255,11 @@ exports[`Component: EmptyStateExample EmptyStateExample renders examples correct
     w/ Actions
   </p>,
   <div
-    className="BluiEmptyState-root MuiBox-root cssltr-1n1qj8a"
+    className="BluiEmptyState-root MuiBox-root cssltr-lyk9sl"
     data-testid="blui-empty-state-root"
   >
     <div
-      className="BluiEmptyState-icon MuiBox-root cssltr-1qeq0w3"
+      className="BluiEmptyState-icon MuiBox-root cssltr-xipz7o"
     >
       <svg
         aria-hidden={true}
@@ -266,13 +274,13 @@ exports[`Component: EmptyStateExample EmptyStateExample renders examples correct
       </svg>
     </div>
     <h6
-      className="MuiTypography-root MuiTypography-h6 cssltr-5d0866-MuiTypography-root"
+      className="MuiTypography-root MuiTypography-h6 BluiEmptyState-title cssltr-5d0866-MuiTypography-root"
       style={{}}
     >
       No Devices
     </h6>
     <h6
-      className="MuiTypography-root MuiTypography-subtitle2 BluiEmptyState-description cssltr-1seh92d-MuiTypography-root"
+      className="MuiTypography-root MuiTypography-subtitle2 BluiEmptyState-description cssltr-1pp0zv-MuiTypography-root"
       style={{}}
     >
       Check your network connection or add a new device
@@ -335,11 +343,12 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
         Basic Usage
       </p>
       <div
-        className="BluiHero-root MuiBox-root cssltr-xrulrs"
+        className="BluiHero-root MuiBox-root cssltr-n0deun"
+        classes={{}}
         data-testid="blui-hero-root"
       >
         <div
-          className="BluiHero-icon MuiBox-root cssltr-14pgf5l"
+          className="BluiHero-icon MuiBox-root cssltr-1okws1c"
         >
           <svg
             aria-hidden={true}
@@ -357,7 +366,7 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
           </svg>
         </div>
         <span
-          className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+          className="BluiHero-values cssltr-v1bge9"
         />
         <p
           className="MuiTypography-root MuiTypography-body1 BluiHero-label cssltr-1pn5hg5-MuiTypography-root"
@@ -377,11 +386,12 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
         w/ Value and Units
       </p>
       <div
-        className="BluiHero-root MuiBox-root cssltr-xrulrs"
+        className="BluiHero-root MuiBox-root cssltr-n0deun"
+        classes={{}}
         data-testid="blui-hero-root"
       >
         <div
-          className="BluiHero-icon MuiBox-root cssltr-14pgf5l"
+          className="BluiHero-icon MuiBox-root cssltr-1okws1c"
         >
           <svg
             aria-hidden={true}
@@ -399,11 +409,13 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
           </svg>
         </div>
         <span
-          className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+          className="BluiHero-values cssltr-v1bge9"
         >
           <span
-            className="BluiChannelValue-root MuiBox-root cssltr-1flyiuq"
-            data-testid="blui-channel-value-root"
+            className="BluiChannelValue-root cssltr-kek565"
+            color="inherit"
+            data-testid="blui-channel-value-root-test"
+            fontSize="inherit"
           >
             <h6
               className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -443,11 +455,12 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
         w/ Channel Value Children
       </p>
       <div
-        className="BluiHero-root MuiBox-root cssltr-xrulrs"
+        className="BluiHero-root MuiBox-root cssltr-n0deun"
+        classes={{}}
         data-testid="blui-hero-root"
       >
         <div
-          className="BluiHero-icon MuiBox-root cssltr-14pgf5l"
+          className="BluiHero-icon MuiBox-root cssltr-1okws1c"
         >
           <svg
             aria-hidden={true}
@@ -465,11 +478,13 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
           </svg>
         </div>
         <span
-          className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+          className="BluiHero-values cssltr-v1bge9"
         >
           <span
-            className="BluiChannelValue-root MuiBox-root cssltr-1ej03bs"
-            data-testid="blui-channel-value-root"
+            className="BluiChannelValue-root cssltr-1dtyrv9"
+            color="inherit"
+            data-testid="blui-channel-value-root-test"
+            fontSize="large"
           >
             <h6
               className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -487,8 +502,10 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
             </h6>
           </span>
           <span
-            className="BluiChannelValue-root MuiBox-root cssltr-1ej03bs"
-            data-testid="blui-channel-value-root"
+            className="BluiChannelValue-root cssltr-1dtyrv9"
+            color="inherit"
+            data-testid="blui-channel-value-root-test"
+            fontSize="large"
           >
             <h6
               className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -524,11 +541,12 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
         w/ Icon Colors
       </p>
       <div
-        className="BluiHero-root MuiBox-root cssltr-xrulrs"
+        className="BluiHero-root MuiBox-root cssltr-n0deun"
+        classes={{}}
         data-testid="blui-hero-root"
       >
         <div
-          className="BluiHero-icon MuiBox-root cssltr-1lsp8cs"
+          className="BluiHero-icon MuiBox-root cssltr-13sdyqh"
         >
           <svg
             aria-hidden={true}
@@ -548,11 +566,13 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
           </svg>
         </div>
         <span
-          className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+          className="BluiHero-values cssltr-v1bge9"
         >
           <span
-            className="BluiChannelValue-root MuiBox-root cssltr-1flyiuq"
-            data-testid="blui-channel-value-root"
+            className="BluiChannelValue-root cssltr-kek565"
+            color="inherit"
+            data-testid="blui-channel-value-root-test"
+            fontSize="inherit"
           >
             <h6
               className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -590,14 +610,16 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
     </p>
     <div
       className="BluiHeroBanner-root MuiBox-root cssltr-1ehwgtw"
+      classes={{}}
       data-testid="blui-hero-banner-root"
     >
       <div
-        className="BluiHero-root MuiBox-root cssltr-bocl9p"
+        className="BluiHero-root MuiBox-root cssltr-2a12sz"
+        classes={{}}
         data-testid="blui-hero-root"
       >
         <div
-          className="BluiHero-icon MuiBox-root cssltr-14pgf5l"
+          className="BluiHero-icon MuiBox-root cssltr-1okws1c"
         >
           <svg
             aria-hidden={true}
@@ -615,11 +637,13 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
           </svg>
         </div>
         <span
-          className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+          className="BluiHero-values cssltr-v1bge9"
         >
           <span
-            className="BluiChannelValue-root MuiBox-root cssltr-1flyiuq"
-            data-testid="blui-channel-value-root"
+            className="BluiChannelValue-root cssltr-kek565"
+            color="inherit"
+            data-testid="blui-channel-value-root-test"
+            fontSize="inherit"
           >
             <h6
               className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -645,11 +669,12 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
         </p>
       </div>
       <div
-        className="BluiHero-root MuiBox-root cssltr-bocl9p"
+        className="BluiHero-root MuiBox-root cssltr-2a12sz"
+        classes={{}}
         data-testid="blui-hero-root"
       >
         <div
-          className="BluiHero-icon MuiBox-root cssltr-14pgf5l"
+          className="BluiHero-icon MuiBox-root cssltr-1okws1c"
         >
           <svg
             aria-hidden={true}
@@ -667,11 +692,13 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
           </svg>
         </div>
         <span
-          className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+          className="BluiHero-values cssltr-v1bge9"
         >
           <span
-            className="BluiChannelValue-root MuiBox-root cssltr-1flyiuq"
-            data-testid="blui-channel-value-root"
+            className="BluiChannelValue-root cssltr-kek565"
+            color="inherit"
+            data-testid="blui-channel-value-root-test"
+            fontSize="inherit"
           >
             <h6
               className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -697,11 +724,12 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
         </p>
       </div>
       <div
-        className="BluiHero-root MuiBox-root cssltr-bocl9p"
+        className="BluiHero-root MuiBox-root cssltr-2a12sz"
+        classes={{}}
         data-testid="blui-hero-root"
       >
         <div
-          className="BluiHero-icon MuiBox-root cssltr-14pgf5l"
+          className="BluiHero-icon MuiBox-root cssltr-1okws1c"
         >
           <svg
             aria-hidden={true}
@@ -719,11 +747,13 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
           </svg>
         </div>
         <span
-          className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+          className="BluiHero-values cssltr-v1bge9"
         >
           <span
-            className="BluiChannelValue-root MuiBox-root cssltr-1ej03bs"
-            data-testid="blui-channel-value-root"
+            className="BluiChannelValue-root cssltr-1dtyrv9"
+            color="inherit"
+            data-testid="blui-channel-value-root-test"
+            fontSize="large"
           >
             <h6
               className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -741,8 +771,10 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
             </h6>
           </span>
           <span
-            className="BluiChannelValue-root MuiBox-root cssltr-1ej03bs"
-            data-testid="blui-channel-value-root"
+            className="BluiChannelValue-root cssltr-1dtyrv9"
+            color="inherit"
+            data-testid="blui-channel-value-root-test"
+            fontSize="large"
           >
             <h6
               className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -768,11 +800,12 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
         </p>
       </div>
       <div
-        className="BluiHero-root MuiBox-root cssltr-bocl9p"
+        className="BluiHero-root MuiBox-root cssltr-2a12sz"
+        classes={{}}
         data-testid="blui-hero-root"
       >
         <div
-          className="BluiHero-icon MuiBox-root cssltr-1lsp8cs"
+          className="BluiHero-icon MuiBox-root cssltr-13sdyqh"
         >
           <svg
             aria-hidden={true}
@@ -792,11 +825,13 @@ exports[`Component: HeroExample HeroExample renders examples correctly 1`] = `
           </svg>
         </div>
         <span
-          className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+          className="BluiHero-values cssltr-v1bge9"
         >
           <span
-            className="BluiChannelValue-root MuiBox-root cssltr-1flyiuq"
-            data-testid="blui-channel-value-root"
+            className="BluiChannelValue-root cssltr-kek565"
+            color="inherit"
+            data-testid="blui-channel-value-root-test"
+            fontSize="inherit"
           >
             <h6
               className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -844,7 +879,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       }
     >
       <div
-        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-cxchxp-MuiAvatar-root"
+        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-uvgcnl-MuiAvatar-root"
       >
         <svg
           aria-hidden={true}
@@ -886,7 +921,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       }
     >
       <div
-        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-cxchxp-MuiAvatar-root"
+        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-uvgcnl-MuiAvatar-root"
       >
         <svg
           aria-hidden={true}
@@ -915,7 +950,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         style={{}}
       >
         <div
-          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1inmcri-MuiTypography-root"
+          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-jvutuj-MuiTypography-root"
           style={{}}
         >
           with a Subtitle
@@ -939,7 +974,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       }
     >
       <div
-        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-qwpipe-MuiAvatar-root"
+        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-190o4rq-MuiAvatar-root"
       >
         <svg
           aria-hidden={true}
@@ -968,7 +1003,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         style={{}}
       >
         <div
-          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1inmcri-MuiTypography-root"
+          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-jvutuj-MuiTypography-root"
           style={{}}
         >
           with an icon
@@ -992,7 +1027,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       }
     >
       <div
-        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-oxxdyt-MuiAvatar-root"
+        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-1t134mf-MuiAvatar-root"
       >
         <svg
           aria-hidden={true}
@@ -1025,7 +1060,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         style={{}}
       >
         <div
-          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1inmcri-MuiTypography-root"
+          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-jvutuj-MuiTypography-root"
           style={{}}
         >
           Item 1
@@ -1067,7 +1102,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       }
     >
       <div
-        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-cxchxp-MuiAvatar-root"
+        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-uvgcnl-MuiAvatar-root"
       >
         <svg
           aria-hidden={true}
@@ -1096,7 +1131,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         style={{}}
       >
         <div
-          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1inmcri-MuiTypography-root"
+          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-jvutuj-MuiTypography-root"
           style={{}}
         >
           with a partial divider
@@ -1124,7 +1159,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       }
     >
       <div
-        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-cxchxp-MuiAvatar-root"
+        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-uvgcnl-MuiAvatar-root"
       >
         <svg
           aria-hidden={true}
@@ -1153,7 +1188,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         style={{}}
       >
         <div
-          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1inmcri-MuiTypography-root"
+          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-jvutuj-MuiTypography-root"
           style={{}}
         >
           with a full divider
@@ -1162,7 +1197,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
     </div>
   </li>,
   <li
-    className="MuiListItem-root MuiListItem-gutters MuiListItem-padding BluiInfoListItem-root cssltr-uacsow-MuiListItem-root"
+    className="MuiListItem-root MuiListItem-gutters MuiListItem-padding BluiInfoListItem-root cssltr-gssocr-MuiListItem-root"
     onClick={[Function]}
   >
     <div
@@ -1195,7 +1230,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         }
       >
         <div
-          className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-cxchxp-MuiAvatar-root"
+          className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-uvgcnl-MuiAvatar-root"
         >
           <svg
             aria-hidden={true}
@@ -1224,7 +1259,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
           style={{}}
         >
           <div
-            className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1inmcri-MuiTypography-root"
+            className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-jvutuj-MuiTypography-root"
             style={{}}
           >
             that is clickable
@@ -1249,7 +1284,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       }
     >
       <div
-        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-13dy6du-MuiAvatar-root"
+        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-avatar cssltr-g2yfwq-MuiAvatar-root"
       >
         <svg
           aria-hidden={true}
@@ -1281,7 +1316,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         style={{}}
       >
         <div
-          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1inmcri-MuiTypography-root"
+          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-jvutuj-MuiTypography-root"
           style={{}}
         >
           with an avatar
@@ -1305,7 +1340,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       }
     >
       <div
-        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-qwpipe-MuiAvatar-root"
+        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-190o4rq-MuiAvatar-root"
       >
         <svg
           aria-hidden={true}
@@ -1338,7 +1373,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         style={{}}
       >
         <div
-          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1lym8w5-MuiTypography-root"
+          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1cimvb7-MuiTypography-root"
           style={{}}
         >
           with a background color
@@ -1362,7 +1397,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       }
     >
       <div
-        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-oxxdyt-MuiAvatar-root"
+        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-1t134mf-MuiAvatar-root"
       >
         <svg
           aria-hidden={true}
@@ -1408,7 +1443,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         style={{}}
       >
         <div
-          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1inmcri-MuiTypography-root"
+          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-jvutuj-MuiTypography-root"
           style={{}}
         >
           with a left component
@@ -1432,7 +1467,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       }
     >
       <div
-        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-oxxdyt-MuiAvatar-root"
+        className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-1t134mf-MuiAvatar-root"
       >
         <svg
           aria-hidden={true}
@@ -1465,7 +1500,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         style={{}}
       >
         <div
-          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1inmcri-MuiTypography-root"
+          className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-jvutuj-MuiTypography-root"
           style={{}}
         >
           with a right component
@@ -1476,8 +1511,10 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
       className="BluiInfoListItem-rightComponent MuiBox-root cssltr-7i4b71"
     >
       <span
-        className="BluiChannelValue-root MuiBox-root cssltr-1flyiuq"
-        data-testid="blui-channel-value-root"
+        className="BluiChannelValue-root cssltr-kek565"
+        color="inherit"
+        data-testid="blui-channel-value-root-test"
+        fontSize="inherit"
       >
         <h6
           className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -1534,7 +1571,7 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
         }
       >
         <div
-          className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-qwpipe-MuiAvatar-root"
+          className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-190o4rq-MuiAvatar-root"
         >
           <svg
             aria-hidden={true}
@@ -1567,13 +1604,13 @@ exports[`Component: InfoListItemExample InfoListItemExample renders examples cor
           style={{}}
         >
           <div
-            className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1lym8w5-MuiTypography-root"
+            className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1cimvb7-MuiTypography-root"
             style={{}}
           >
             with all properties
           </div>
           <div
-            className="MuiTypography-root MuiTypography-body2 MuiTypography-noWrap BluiInfoListItem-info cssltr-v85ucy-MuiTypography-root"
+            className="MuiTypography-root MuiTypography-body2 MuiTypography-noWrap BluiInfoListItem-info cssltr-1wq5f0m-MuiTypography-root"
             style={{}}
           >
             more info...
@@ -1600,7 +1637,7 @@ exports[`Component: ListItemTagExample ListItemTagExample renders examples corre
         Basic Usage
       </p>
       <span
-        className="MuiTypography-root MuiTypography-overline MuiTypography-noWrap BluiListItemTag-root BluiListItemTag-noVariant cssltr-txwxd6-MuiTypography-root"
+        className="MuiTypography-root MuiTypography-overline MuiTypography-noWrap BluiListItemTag-root BluiListItemTag-noVariant cssltr-kimbzh-MuiTypography-root"
         data-testid="blui-list-item-tag"
         style={{}}
       >
@@ -1617,7 +1654,7 @@ exports[`Component: ListItemTagExample ListItemTagExample renders examples corre
         w/ Custom Colors
       </p>
       <span
-        className="MuiTypography-root MuiTypography-overline MuiTypography-noWrap BluiListItemTag-root BluiListItemTag-noVariant cssltr-16rhlxd-MuiTypography-root"
+        className="MuiTypography-root MuiTypography-overline MuiTypography-noWrap BluiListItemTag-root BluiListItemTag-noVariant cssltr-1lxi61j-MuiTypography-root"
         data-testid="blui-list-item-tag"
         style={{}}
       >
@@ -1650,7 +1687,7 @@ exports[`Component: ListItemTagExample ListItemTagExample renders examples corre
         }
       >
         <div
-          className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-oxxdyt-MuiAvatar-root"
+          className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-1t134mf-MuiAvatar-root"
         >
           <svg
             aria-hidden={true}
@@ -1679,7 +1716,7 @@ exports[`Component: ListItemTagExample ListItemTagExample renders examples corre
           style={{}}
         >
           <div
-            className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-1inmcri-MuiTypography-root"
+            className="MuiTypography-root MuiTypography-subtitle2 MuiTypography-noWrap BluiInfoListItem-subtitle cssltr-jvutuj-MuiTypography-root"
             style={{}}
           >
             with List Item Tags
@@ -1693,14 +1730,14 @@ exports[`Component: ListItemTagExample ListItemTagExample renders examples corre
           className="MuiBox-root cssltr-k008qs"
         >
           <span
-            className="MuiTypography-root MuiTypography-overline MuiTypography-noWrap BluiListItemTag-root BluiListItemTag-noVariant cssltr-wufuvy-MuiTypography-root"
+            className="MuiTypography-root MuiTypography-overline MuiTypography-noWrap BluiListItemTag-root BluiListItemTag-noVariant cssltr-nvgyxm-MuiTypography-root"
             data-testid="blui-list-item-tag"
             style={{}}
           >
             Build Passing
           </span>
           <span
-            className="MuiTypography-root MuiTypography-overline MuiTypography-noWrap BluiListItemTag-root BluiListItemTag-noVariant cssltr-16e8zyu-MuiTypography-root"
+            className="MuiTypography-root MuiTypography-overline MuiTypography-noWrap BluiListItemTag-root BluiListItemTag-noVariant cssltr-1flv5ll-MuiTypography-root"
             data-testid="blui-list-item-tag"
             style={{}}
           >
@@ -1751,8 +1788,10 @@ exports[`Component: ThreeLinerExample ThreeLinerExample renders examples correct
       className="BluiThreeLiner-info MuiBox-root cssltr-9q8ecb"
     >
       <span
-        className="BluiChannelValue-root MuiBox-root cssltr-1flyiuq"
-        data-testid="blui-channel-value-root"
+        className="BluiChannelValue-root cssltr-kek565"
+        color="inherit"
+        data-testid="blui-channel-value-root-test"
+        fontSize="inherit"
       >
         <span
           className="BluiChannelValue-icon cssltr-1oqvg4e"
@@ -1940,6 +1979,7 @@ exports[`Component: UserMenuExample UserMenuExample renders examples correctly 1
         </h6>
         <div
           className="BluiSpacer-root MuiBox-root cssltr-jxy7be"
+          classes={{}}
           data-testid="blui-spacer-root"
         />
         <div
diff --git a/src/__tests__/blui-tests/__snapshots__/Surfaces.test.tsx.snap b/src/__tests__/blui-tests/__snapshots__/Surfaces.test.tsx.snap
index ac5db48..41883b6 100644
--- a/src/__tests__/blui-tests/__snapshots__/Surfaces.test.tsx.snap
+++ b/src/__tests__/blui-tests/__snapshots__/Surfaces.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`Component: BLUIAppBarExample BLUIAppBarExample renders examples correct
     className="MuiBox-root cssltr-fvxjzt"
   >
     <header
-      className="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky BluiAppBar-root expanded cssltr-nx5hj5-MuiPaper-root-MuiAppBar-root"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky BluiAppBar-root Mui-expanded expanded cssltr-nx5hj5-MuiPaper-root-MuiAppBar-root"
       data-testid="blui-appbar-root"
       style={
         {
@@ -22,9 +22,14 @@ exports[`Component: BLUIAppBarExample BLUIAppBarExample renders examples correct
       >
         <div
           className="BluiThreeLiner-root liner MuiBox-root cssltr-uqb9nc"
+          classes={
+            {
+              "title": "title",
+            }
+          }
         >
           <div
-            className="BluiThreeLiner-title title title MuiBox-root cssltr-e9ah7v"
+            className="BluiThreeLiner-title title MuiBox-root cssltr-e9ah7v"
           >
             Title
           </div>
@@ -52,7 +57,7 @@ exports[`Component: BLUIAppBarExample BLUIAppBarExample renders examples correct
     className="MuiBox-root cssltr-fvxjzt"
   >
     <header
-      className="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky BluiAppBar-root expanded cssltr-nx5hj5-MuiPaper-root-MuiAppBar-root"
+      className="MuiPaper-root MuiPaper-elevation MuiPaper-elevation4 MuiAppBar-root MuiAppBar-colorPrimary MuiAppBar-positionSticky BluiAppBar-root Mui-expanded expanded cssltr-nx5hj5-MuiPaper-root-MuiAppBar-root"
       data-testid="blui-appbar-root"
       style={
         {
@@ -68,19 +73,26 @@ exports[`Component: BLUIAppBarExample BLUIAppBarExample renders examples correct
       >
         <div
           className="BluiThreeLiner-root liner MuiBox-root cssltr-uqb9nc"
+          classes={
+            {
+              "info": "info",
+              "subtitle": "subtitle",
+              "title": "title",
+            }
+          }
         >
           <div
-            className="BluiThreeLiner-title title title MuiBox-root cssltr-e9ah7v"
+            className="BluiThreeLiner-title title MuiBox-root cssltr-e9ah7v"
           >
             W/ Dynamic Content
           </div>
           <div
-            className="BluiThreeLiner-subtitle subtitle subtitle MuiBox-root cssltr-1666yuc"
+            className="BluiThreeLiner-subtitle subtitle MuiBox-root cssltr-1666yuc"
           >
             Subtitle
           </div>
           <div
-            className="BluiThreeLiner-info info info MuiBox-root cssltr-9q8ecb"
+            className="BluiThreeLiner-info info MuiBox-root cssltr-9q8ecb"
           >
             Info
           </div>
@@ -117,7 +129,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
       }
     >
       <div
-        className="BluiScoreCard-header MuiBox-root cssltr-4ekqjb"
+        className="BluiScoreCard-header MuiBox-root cssltr-1vm5ien"
         data-testid="blui-score-card-header"
       >
         <div
@@ -179,7 +191,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
       }
     >
       <div
-        className="BluiScoreCard-header MuiBox-root cssltr-4ekqjb"
+        className="BluiScoreCard-header MuiBox-root cssltr-mam46"
         data-testid="blui-score-card-header"
       >
         <div
@@ -256,7 +268,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
       }
     >
       <div
-        className="BluiScoreCard-header MuiBox-root cssltr-4ekqjb"
+        className="BluiScoreCard-header MuiBox-root cssltr-mam46"
         data-testid="blui-score-card-header"
       >
         <div
@@ -375,7 +387,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
         className="MuiList-root MuiList-padding cssltr-12kkqz5-MuiList-root"
       >
         <li
-          className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding BluiInfoListItem-root cssltr-1lt4ou4-MuiListItem-root"
+          className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding BluiInfoListItem-root cssltr-1fmyo93-MuiListItem-root"
           onClick={[Function]}
         >
           <div
@@ -394,7 +406,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
           </div>
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium BluiInfoListItem-chevron cssltr-1587uyb-MuiSvgIcon-root"
+            className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium BluiInfoListItem-chevron cssltr-1jm4sjb-MuiSvgIcon-root"
             data-testid="ChevronRightIcon"
             focusable="false"
             role="button"
@@ -422,7 +434,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
       }
     >
       <div
-        className="BluiScoreCard-header MuiBox-root cssltr-4ekqjb"
+        className="BluiScoreCard-header MuiBox-root cssltr-mam46"
         data-testid="blui-score-card-header"
       >
         <div
@@ -505,14 +517,16 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
         >
           <div
             className="BluiHeroBanner-root MuiBox-root cssltr-srjk1z"
+            classes={{}}
             data-testid="blui-hero-banner-root"
           >
             <div
-              className="BluiHero-root MuiBox-root cssltr-bocl9p"
+              className="BluiHero-root MuiBox-root cssltr-2a12sz"
+              classes={{}}
               data-testid="blui-hero-root"
             >
               <div
-                className="BluiHero-icon MuiBox-root cssltr-17a4wol"
+                className="BluiHero-icon MuiBox-root cssltr-1tmkfrg"
               >
                 <svg
                   aria-hidden={true}
@@ -532,11 +546,13 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
                 </svg>
               </div>
               <span
-                className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+                className="BluiHero-values cssltr-v1bge9"
               >
                 <span
-                  className="BluiChannelValue-root MuiBox-root cssltr-whg9xq"
-                  data-testid="blui-channel-value-root"
+                  className="BluiChannelValue-root cssltr-v74076"
+                  color="inherit"
+                  data-testid="blui-channel-value-root-test"
+                  fontSize="normal"
                 >
                   <h6
                     className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -562,11 +578,12 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
               </p>
             </div>
             <div
-              className="BluiHero-root MuiBox-root cssltr-bocl9p"
+              className="BluiHero-root MuiBox-root cssltr-2a12sz"
+              classes={{}}
               data-testid="blui-hero-root"
             >
               <div
-                className="BluiHero-icon MuiBox-root cssltr-17a4wol"
+                className="BluiHero-icon MuiBox-root cssltr-1tmkfrg"
               >
                 <svg
                   aria-hidden={true}
@@ -586,11 +603,13 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
                 </svg>
               </div>
               <span
-                className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+                className="BluiHero-values cssltr-v1bge9"
               >
                 <span
-                  className="BluiChannelValue-root MuiBox-root cssltr-whg9xq"
-                  data-testid="blui-channel-value-root"
+                  className="BluiChannelValue-root cssltr-v74076"
+                  color="inherit"
+                  data-testid="blui-channel-value-root-test"
+                  fontSize="normal"
                 >
                   <h6
                     className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -625,7 +644,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
         className="MuiList-root MuiList-padding cssltr-12kkqz5-MuiList-root"
       >
         <li
-          className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding BluiInfoListItem-root cssltr-1lt4ou4-MuiListItem-root"
+          className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding BluiInfoListItem-root cssltr-1fmyo93-MuiListItem-root"
           onClick={[Function]}
         >
           <div
@@ -644,7 +663,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
           </div>
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium BluiInfoListItem-chevron cssltr-1587uyb-MuiSvgIcon-root"
+            className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium BluiInfoListItem-chevron cssltr-1jm4sjb-MuiSvgIcon-root"
             data-testid="ChevronRightIcon"
             focusable="false"
             role="button"
@@ -669,7 +688,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
     }
   >
     <div
-      className="BluiScoreCard-header MuiBox-root cssltr-4ekqjb"
+      className="BluiScoreCard-header MuiBox-root cssltr-1vm5ien"
       data-testid="blui-score-card-header"
     >
       <div
@@ -746,7 +765,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
               }
             >
               <div
-                className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-oxxdyt-MuiAvatar-root"
+                className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-1t134mf-MuiAvatar-root"
               >
                 <svg
                   aria-hidden={true}
@@ -788,7 +807,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
               }
             >
               <div
-                className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-1rsioro-MuiAvatar-root"
+                className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-8t0ze0-MuiAvatar-root"
               >
                 <svg
                   aria-hidden={true}
@@ -830,7 +849,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
               }
             >
               <div
-                className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-oxxdyt-MuiAvatar-root"
+                className="MuiAvatar-root MuiAvatar-circular MuiAvatar-colorDefault BluiInfoListItem-icon cssltr-1t134mf-MuiAvatar-root"
               >
                 <svg
                   aria-hidden={true}
@@ -864,14 +883,16 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
       >
         <div
           className="BluiHeroBanner-root MuiBox-root cssltr-srjk1z"
+          classes={{}}
           data-testid="blui-hero-banner-root"
         >
           <div
-            className="BluiHero-root MuiBox-root cssltr-bocl9p"
+            className="BluiHero-root MuiBox-root cssltr-2a12sz"
+            classes={{}}
             data-testid="blui-hero-root"
           >
             <div
-              className="BluiHero-icon MuiBox-root cssltr-1ehupy8"
+              className="BluiHero-icon MuiBox-root cssltr-ca2ftl"
             >
               <svg
                 aria-hidden={true}
@@ -890,11 +911,13 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
               </svg>
             </div>
             <span
-              className="BluiHero-values MuiBox-root cssltr-1lgzb0a"
+              className="BluiHero-values cssltr-v1bge9"
             >
               <span
-                className="BluiChannelValue-root MuiBox-root cssltr-whg9xq"
-                data-testid="blui-channel-value-root"
+                className="BluiChannelValue-root cssltr-v74076"
+                color="inherit"
+                data-testid="blui-channel-value-root-test"
+                fontSize="normal"
               >
                 <h6
                   className="MuiTypography-root MuiTypography-h6 BluiChannelValue-text BluiChannelValue-value cssltr-l646db-MuiTypography-root"
@@ -929,7 +952,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
       className="MuiList-root MuiList-padding cssltr-12kkqz5-MuiList-root"
     >
       <li
-        className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding BluiInfoListItem-root cssltr-1lt4ou4-MuiListItem-root"
+        className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding BluiInfoListItem-root cssltr-1fmyo93-MuiListItem-root"
         onClick={[Function]}
       >
         <div
@@ -948,7 +971,7 @@ exports[`Component: ScoreCardExample ScoreCardExample renders examples correctly
         </div>
         <svg
           aria-hidden={true}
-          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium BluiInfoListItem-chevron cssltr-1587uyb-MuiSvgIcon-root"
+          className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium BluiInfoListItem-chevron cssltr-1jm4sjb-MuiSvgIcon-root"
           data-testid="ChevronRightIcon"
           focusable="false"
           role="button"
@@ -986,18 +1009,21 @@ exports[`Component: SpacerExample SpacerExample renders examples correctly 1`] =
     >
       <div
         className="BluiSpacer-root MuiBox-root cssltr-zrkb6b"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         1
       </div>
       <div
         className="BluiSpacer-root MuiBox-root cssltr-4ikeoe"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         2
       </div>
       <div
         className="BluiSpacer-root MuiBox-root cssltr-ihz316"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         3
@@ -1018,18 +1044,21 @@ exports[`Component: SpacerExample SpacerExample renders examples correctly 1`] =
     >
       <div
         className="BluiSpacer-root MuiBox-root cssltr-zrkb6b"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         1
       </div>
       <div
         className="BluiSpacer-root MuiBox-root cssltr-4ikeoe"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         2
       </div>
       <div
         className="BluiSpacer-root MuiBox-root cssltr-ihz316"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         3
@@ -1056,18 +1085,21 @@ exports[`Component: SpacerExample SpacerExample renders examples correctly 1`] =
     >
       <div
         className="BluiSpacer-root MuiBox-root cssltr-1cb72ie"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         1
       </div>
       <div
         className="BluiSpacer-root MuiBox-root cssltr-p8ehs9"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         2
       </div>
       <div
         className="BluiSpacer-root MuiBox-root cssltr-eqp6ib"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         3
@@ -1088,18 +1120,21 @@ exports[`Component: SpacerExample SpacerExample renders examples correctly 1`] =
     >
       <div
         className="BluiSpacer-root MuiBox-root cssltr-jg34ma"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         1
       </div>
       <div
         className="BluiSpacer-root MuiBox-root cssltr-vpradr"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         2
       </div>
       <div
         className="BluiSpacer-root MuiBox-root cssltr-zxma3v"
+        classes={{}}
         data-testid="blui-spacer-root"
       >
         3
diff --git a/yarn.lock b/yarn.lock
index 33f1410..faca699 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -493,12 +493,11 @@
   resolved "https://registry.yarnpkg.com/@brightlayer-ui/prettier-config/-/prettier-config-1.0.3.tgz#e40a7ae7435c6fd5118acbf249080e0aa81e93af"
   integrity sha512-EYm3+V7Qd+oYEF+8FadsXAZqXryEHHbGnrV1BMp9selhABjceqUqXPVE4Sn3SKWQdBNJ3En2A3EzgrzRbvRTaw==
 
-"@brightlayer-ui/react-components@^6.1.2":
-  version "6.3.0"
-  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-components/-/react-components-6.3.0.tgz#59d03ac9f0dbbb9b56f3e639068d6463c8c70738"
-  integrity sha512-EQc2PfQ/jxMUzppA4Wykxp1jfN6VCvJveAGvGluCbuXf6tPrFeeAGsUfunA/IcqUnD9whidPw+E7iGaI1+dhTQ==
+"@brightlayer-ui/react-components@^7.0.0":
+  version "7.0.0"
+  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-components/-/react-components-7.0.0.tgz#113113c39bc144ebb96c60c908f2a58ad0b3fa1c"
+  integrity sha512-H+FfeWA4kIU6LOK/7Wi3PL9mUs+kO8UQfqnfKmo6zURxdmKRSKB1dj4527RzyayWFe1wZFcxVdGtlwNkFvXO7g==
   dependencies:
-    "@brightlayer-ui/colors" "^3.1.1"
     "@emotion/css" "^11.10.5"
     "@seznam/compose-react-refs" "^1.0.6"
     color "^4.2.3"
@@ -512,10 +511,10 @@
     color "^3.1.2"
     react-jss "^10.4.0"
 
-"@brightlayer-ui/react-themes@^8.0.0-alpha.0":
-  version "8.0.0-alpha.0"
-  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-themes/-/react-themes-8.0.0-alpha.0.tgz#683fdef86cb1a9e5248ebacdb1d73b9fc8799d9b"
-  integrity sha512-aC5IJD5bEnWvZJqxmNnR4PdZGz+fBqhRX/lNU9OTKRoYKRI8SpdhkgWpWibbboLGUjIWE1AB9WZeyqnybUUJGQ==
+"@brightlayer-ui/react-themes@^8.0.0":
+  version "8.0.0"
+  resolved "https://registry.yarnpkg.com/@brightlayer-ui/react-themes/-/react-themes-8.0.0.tgz#91ad70289889dd8986b6524216345444cdf69624"
+  integrity sha512-kLo1tSLt+IHG5/xywltIeewLefRZiVSzI7XgIic0I13jQ1Lc3P5e5nj5QHcBzw6CQFQ7r7oOHb7aiIibXpVMwQ==
   dependencies:
     "@brightlayer-ui/colors" "^3.1.1"
     "@fontsource/open-sans" "^5.0.3"