diff --git a/packages/juno-core/src/components/Accordion/AccordionDetails/__stories__/__snapshots__/AccordionDetails.story.tsx.snap b/packages/juno-core/src/components/Accordion/AccordionDetails/__stories__/__snapshots__/AccordionDetails.story.tsx.snap
index 05b85444..81aa4fbf 100644
--- a/packages/juno-core/src/components/Accordion/AccordionDetails/__stories__/__snapshots__/AccordionDetails.story.tsx.snap
+++ b/packages/juno-core/src/components/Accordion/AccordionDetails/__stories__/__snapshots__/AccordionDetails.story.tsx.snap
@@ -110,9 +110,21 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionDetails Accordion
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -122,10 +134,6 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionDetails Accordion
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -183,8 +191,8 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionDetails Accordion
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Accordion/AccordionSummary/__stories__/__snapshots__/AccordionSummary.story.tsx.snap b/packages/juno-core/src/components/Accordion/AccordionSummary/__stories__/__snapshots__/AccordionSummary.story.tsx.snap
index 16321916..ef27f5dc 100644
--- a/packages/juno-core/src/components/Accordion/AccordionSummary/__stories__/__snapshots__/AccordionSummary.story.tsx.snap
+++ b/packages/juno-core/src/components/Accordion/AccordionSummary/__stories__/__snapshots__/AccordionSummary.story.tsx.snap
@@ -110,9 +110,21 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -122,10 +134,6 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -183,8 +191,8 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
@@ -421,9 +429,21 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -433,10 +453,6 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -494,8 +510,8 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/AccordionSummary Accordion
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Accordion/__stories__/__snapshots__/Accordion.story.tsx.snap b/packages/juno-core/src/components/Accordion/__stories__/__snapshots__/Accordion.story.tsx.snap
index d1ba6fc5..51884e7b 100644
--- a/packages/juno-core/src/components/Accordion/__stories__/__snapshots__/Accordion.story.tsx.snap
+++ b/packages/juno-core/src/components/Accordion/__stories__/__snapshots__/Accordion.story.tsx.snap
@@ -110,9 +110,21 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/Accordion Accordion 1`] =
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -122,10 +134,6 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/Accordion Accordion 1`] =
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -183,8 +191,8 @@ exports[`Storyshots 🚀 Cleanup Components/Accordion/Accordion Accordion 1`] =
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
@@ -422,9 +430,21 @@ Array [
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -434,10 +454,6 @@ Array [
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -495,8 +511,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
@@ -728,9 +744,21 @@ Array [
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -740,10 +768,6 @@ Array [
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -801,8 +825,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
@@ -1034,9 +1058,21 @@ Array [
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -1046,10 +1082,6 @@ Array [
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -1107,8 +1139,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Autocomplete/__stories__/__snapshots__/Autocomplete.story.tsx.snap b/packages/juno-core/src/components/Autocomplete/__stories__/__snapshots__/Autocomplete.story.tsx.snap
index fe9f5b48..f9044170 100644
--- a/packages/juno-core/src/components/Autocomplete/__stories__/__snapshots__/Autocomplete.story.tsx.snap
+++ b/packages/juno-core/src/components/Autocomplete/__stories__/__snapshots__/Autocomplete.story.tsx.snap
@@ -141,9 +141,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -153,10 +165,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -373,8 +381,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -458,7 +466,7 @@ Array [
           value=""
         />
         <div
-          className="MuiBox-root MuiBox-root-416"
+          className="MuiBox-root MuiBox-root-417"
         >
           <button
             aria-hidden={true}
@@ -723,9 +731,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -735,10 +755,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -834,9 +850,21 @@ Array [
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -846,10 +874,6 @@ Array [
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -1069,8 +1093,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -1091,8 +1115,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -1166,7 +1190,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-417"
+          className="MuiBox-root MuiBox-root-418"
         >
           <button
             aria-hidden={true}
diff --git a/packages/juno-core/src/components/Buttons/IconButton/__stories__/__snapshots__/IconButton.story.tsx.snap b/packages/juno-core/src/components/Buttons/IconButton/__stories__/__snapshots__/IconButton.story.tsx.snap
index f76814b7..77fd44ff 100644
--- a/packages/juno-core/src/components/Buttons/IconButton/__stories__/__snapshots__/IconButton.story.tsx.snap
+++ b/packages/juno-core/src/components/Buttons/IconButton/__stories__/__snapshots__/IconButton.story.tsx.snap
@@ -1,5 +1,1422 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button Contained 1`] = `
+.c4 {
+  width: 1em;
+  height: 1em;
+  stroke-width: 0;
+  stroke: currentColor;
+  fill: currentColor;
+  pointer-events: none;
+}
+
+.c3 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  font-size: 24px;
+}
+
+.c1 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  color: #666666;
+  border-radius: 50%;
+  -webkit-transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  cursor: pointer;
+  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);
+  -webkit-transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+}
+
+.c1:active {
+  box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
+}
+
+.c1,
+.c1 .c2 {
+  font-size: 20px;
+}
+
+.c1:active,
+.c1:active .c2 {
+  color: #666666;
+}
+
+.c1.focus-visible,
+.c1[data-focus-visible-added] {
+  background-color: rgba(102,102,102,0.16);
+}
+
+.c1.focus-visible:active,
+.c1[data-focus-visible-added]:active,
+.c1.focus-visible:active .c2,
+.c1[data-focus-visible-added]:active .c2 {
+  color: rgba(102,102,102,0.88);
+}
+
+.c1.RcIconButton-persistBg {
+  background-color: rgba(102,102,102,0.12);
+}
+
+.c1.RcIconButton-disabled,
+.c1.RcIconButton-disabled .c2 {
+  color: #B9B9B9;
+}
+
+.c1.RcIconButton-invisible {
+  opacity: 0;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.c1.RcIconButton-outline {
+  border: 1px solid #C7C7C7;
+}
+
+.c1.RcIconButton-contained {
+  color: #fff;
+  background-color: #666666;
+}
+
+.c1.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c1.RcIconButton-contained.focus-visible:before,
+.c1.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
+}
+
+.c1.RcIconButton-contained.focus-visible,
+.c1.RcIconButton-contained[data-focus-visible-added],
+.c1.RcIconButton-contained.focus-visible .c2,
+.c1.RcIconButton-contained[data-focus-visible-added] .c2 {
+  color: #fff;
+}
+
+.c1.RcIconButton-contained:active,
+.c1.RcIconButton-contained:active .c2 {
+  color: #fff;
+}
+
+.c1 .RcIconButtonTouchRipple-ripplePulsate {
+  border-radius: 0;
+  -webkit-animation-name: none;
+  animation-name: none;
+  opacity: 0;
+}
+
+.c5 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  color: #FFFFFF;
+  border-radius: 50%;
+  -webkit-transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  cursor: pointer;
+  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);
+  -webkit-transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+}
+
+.c5:active {
+  box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
+}
+
+.c5,
+.c5 .c2 {
+  font-size: 20px;
+}
+
+.c5:active,
+.c5:active .c2 {
+  color: #FFFFFF;
+}
+
+.c5.focus-visible,
+.c5[data-focus-visible-added] {
+  background-color: rgba(255,255,255,0.16);
+}
+
+.c5.focus-visible:active,
+.c5[data-focus-visible-added]:active,
+.c5.focus-visible:active .c2,
+.c5[data-focus-visible-added]:active .c2 {
+  color: rgba(255,255,255,0.88);
+}
+
+.c5.RcIconButton-persistBg {
+  background-color: rgba(255,255,255,0.12);
+}
+
+.c5.RcIconButton-disabled,
+.c5.RcIconButton-disabled .c2 {
+  color: #B9B9B9;
+}
+
+.c5.RcIconButton-invisible {
+  opacity: 0;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.c5.RcIconButton-outline {
+  border: 1px solid #C7C7C7;
+}
+
+.c5.RcIconButton-contained {
+  color: rgba(0,0,0,0.87);
+  background-color: #FFFFFF;
+}
+
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
+}
+
+.c5.RcIconButton-contained.focus-visible,
+.c5.RcIconButton-contained[data-focus-visible-added],
+.c5.RcIconButton-contained.focus-visible .c2,
+.c5.RcIconButton-contained[data-focus-visible-added] .c2 {
+  color: rgba(0,0,0,0.87);
+}
+
+.c5.RcIconButton-contained:active,
+.c5.RcIconButton-contained:active .c2 {
+  color: rgba(0,0,0,0.87);
+}
+
+.c5 .RcIconButtonTouchRipple-ripplePulsate {
+  border-radius: 0;
+  -webkit-animation-name: none;
+  animation-name: none;
+  opacity: 0;
+}
+
+.c6 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  color: #494949;
+  border-radius: 50%;
+  -webkit-transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  cursor: pointer;
+  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);
+  -webkit-transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+}
+
+.c6:active {
+  box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
+}
+
+.c6,
+.c6 .c2 {
+  font-size: 20px;
+}
+
+.c6:active,
+.c6:active .c2 {
+  color: #494949;
+}
+
+.c6.focus-visible,
+.c6[data-focus-visible-added] {
+  background-color: rgba(73,73,73,0.16);
+}
+
+.c6.focus-visible:active,
+.c6[data-focus-visible-added]:active,
+.c6.focus-visible:active .c2,
+.c6[data-focus-visible-added]:active .c2 {
+  color: rgba(73,73,73,0.88);
+}
+
+.c6.RcIconButton-persistBg {
+  background-color: rgba(73,73,73,0.12);
+}
+
+.c6.RcIconButton-disabled,
+.c6.RcIconButton-disabled .c2 {
+  color: #B9B9B9;
+}
+
+.c6.RcIconButton-invisible {
+  opacity: 0;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.c6.RcIconButton-outline {
+  border: 1px solid #C7C7C7;
+}
+
+.c6.RcIconButton-contained {
+  color: #fff;
+  background-color: #494949;
+}
+
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
+}
+
+.c6.RcIconButton-contained.focus-visible,
+.c6.RcIconButton-contained[data-focus-visible-added],
+.c6.RcIconButton-contained.focus-visible .c2,
+.c6.RcIconButton-contained[data-focus-visible-added] .c2 {
+  color: #fff;
+}
+
+.c6.RcIconButton-contained:active,
+.c6.RcIconButton-contained:active .c2 {
+  color: #fff;
+}
+
+.c6 .RcIconButtonTouchRipple-ripplePulsate {
+  border-radius: 0;
+  -webkit-animation-name: none;
+  animation-name: none;
+  opacity: 0;
+}
+
+.c7 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  color: #3C9949;
+  border-radius: 50%;
+  -webkit-transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  cursor: pointer;
+  box-shadow: none;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+}
+
+.c7:active {
+  box-shadow: none;
+}
+
+.c7,
+.c7 .c2 {
+  font-size: 20px;
+}
+
+.c7:active,
+.c7:active .c2 {
+  color: #3C9949;
+}
+
+.c7.focus-visible,
+.c7[data-focus-visible-added] {
+  background-color: rgba(60,153,73,0.16);
+}
+
+.c7.focus-visible:active,
+.c7[data-focus-visible-added]:active,
+.c7.focus-visible:active .c2,
+.c7[data-focus-visible-added]:active .c2 {
+  color: rgba(60,153,73,0.88);
+}
+
+.c7.RcIconButton-persistBg {
+  background-color: rgba(60,153,73,0.12);
+}
+
+.c7.RcIconButton-disabled,
+.c7.RcIconButton-disabled .c2 {
+  color: #B9B9B9;
+}
+
+.c7.RcIconButton-invisible {
+  opacity: 0;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.c7.RcIconButton-outline {
+  border: 1px solid #C7C7C7;
+}
+
+.c7.RcIconButton-contained {
+  color: #fff;
+  background-color: #3C9949;
+}
+
+.c7.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c7.RcIconButton-contained.focus-visible:before,
+.c7.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
+}
+
+.c7.RcIconButton-contained.focus-visible,
+.c7.RcIconButton-contained[data-focus-visible-added],
+.c7.RcIconButton-contained.focus-visible .c2,
+.c7.RcIconButton-contained[data-focus-visible-added] .c2 {
+  color: #fff;
+}
+
+.c7.RcIconButton-contained:active,
+.c7.RcIconButton-contained:active .c2 {
+  color: #fff;
+}
+
+.c7 .RcIconButtonTouchRipple-ripplePulsate {
+  border-radius: 0;
+  -webkit-animation-name: none;
+  animation-name: none;
+  opacity: 0;
+}
+
+.c8 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  color: #D63E39;
+  border-radius: 50%;
+  -webkit-transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  cursor: pointer;
+  box-shadow: none;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+}
+
+.c8:active {
+  box-shadow: none;
+}
+
+.c8,
+.c8 .c2 {
+  font-size: 20px;
+}
+
+.c8:active,
+.c8:active .c2 {
+  color: #D63E39;
+}
+
+.c8.focus-visible,
+.c8[data-focus-visible-added] {
+  background-color: rgba(214,62,57,0.16);
+}
+
+.c8.focus-visible:active,
+.c8[data-focus-visible-added]:active,
+.c8.focus-visible:active .c2,
+.c8[data-focus-visible-added]:active .c2 {
+  color: rgba(214,62,57,0.88);
+}
+
+.c8.RcIconButton-persistBg {
+  background-color: rgba(214,62,57,0.12);
+}
+
+.c8.RcIconButton-disabled,
+.c8.RcIconButton-disabled .c2 {
+  color: #B9B9B9;
+}
+
+.c8.RcIconButton-invisible {
+  opacity: 0;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.c8.RcIconButton-outline {
+  border: 1px solid #C7C7C7;
+}
+
+.c8.RcIconButton-contained {
+  color: #fff;
+  background-color: #D63E39;
+}
+
+.c8.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c8.RcIconButton-contained.focus-visible:before,
+.c8.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
+}
+
+.c8.RcIconButton-contained.focus-visible,
+.c8.RcIconButton-contained[data-focus-visible-added],
+.c8.RcIconButton-contained.focus-visible .c2,
+.c8.RcIconButton-contained[data-focus-visible-added] .c2 {
+  color: #fff;
+}
+
+.c8.RcIconButton-contained:active:before {
+  background-color: rgba(255,255,255,0.24);
+}
+
+.c8.RcIconButton-contained:active,
+.c8.RcIconButton-contained:active .c2 {
+  color: #fff;
+}
+
+.c8 .RcIconButtonTouchRipple-ripplePulsate {
+  border-radius: 0;
+  -webkit-animation-name: none;
+  animation-name: none;
+  opacity: 0;
+}
+
+.c9 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  color: #D63E39;
+  border-radius: 50%;
+  -webkit-transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  cursor: pointer;
+  background-color: rgba(214,62,57,0.16);
+  box-shadow: none;
+  -webkit-transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+}
+
+.c9:active {
+  box-shadow: none;
+}
+
+.c9,
+.c9 .c2 {
+  font-size: 20px;
+}
+
+.c9:active,
+.c9:active .c2 {
+  color: #D63E39;
+}
+
+.c9.focus-visible,
+.c9[data-focus-visible-added] {
+  background-color: rgba(214,62,57,0.32);
+}
+
+.c9.focus-visible:active,
+.c9[data-focus-visible-added]:active,
+.c9.focus-visible:active .c2,
+.c9[data-focus-visible-added]:active .c2 {
+  color: rgba(214,62,57,0.88);
+}
+
+.c9.RcIconButton-persistBg {
+  background-color: rgba(214,62,57,0.16);
+}
+
+.c9.RcIconButton-disabled {
+  background-color: rgba(214,62,57,0.12);
+}
+
+.c9.RcIconButton-disabled,
+.c9.RcIconButton-disabled .c2 {
+  color: #B9B9B9;
+}
+
+.c9.RcIconButton-invisible {
+  opacity: 0;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.c9.RcIconButton-outline {
+  border: 1px solid #C7C7C7;
+}
+
+.c9.RcIconButton-contained {
+  color: #fff;
+  background-color: #D63E39;
+}
+
+.c9.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c9.RcIconButton-contained.focus-visible:before,
+.c9.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
+}
+
+.c9.RcIconButton-contained.focus-visible,
+.c9.RcIconButton-contained[data-focus-visible-added],
+.c9.RcIconButton-contained.focus-visible .c2,
+.c9.RcIconButton-contained[data-focus-visible-added] .c2 {
+  color: #fff;
+}
+
+.c9.RcIconButton-contained:active:before {
+  background-color: rgba(255,255,255,0.24);
+}
+
+.c9.RcIconButton-contained:active,
+.c9.RcIconButton-contained:active .c2 {
+  color: #fff;
+}
+
+.c9 .RcIconButtonTouchRipple-ripplePulsate {
+  border-radius: 0;
+  -webkit-animation-name: none;
+  animation-name: none;
+  opacity: 0;
+}
+
+.c12 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  color: #D63E39;
+  border-radius: 50%;
+  -webkit-transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  cursor: pointer;
+  box-shadow: 0px 1px 3px 0px rgba(0,0,0,0.2),0px 1px 1px 0px rgba(0,0,0,0.14),0px 2px 1px -1px rgba(0,0,0,0.12);
+  -webkit-transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background-color 250ms cubic-bezier(0.4,0,0.2,1) 0ms,box-shadow 250ms cubic-bezier(0.4,0,0.2,1) 0ms,border 250ms cubic-bezier(0.4,0,0.2,1) 0ms;
+}
+
+.c12:active {
+  box-shadow: 0px 7px 8px -4px rgba(0,0,0,0.2),0px 12px 17px 2px rgba(0,0,0,0.14),0px 5px 22px 4px rgba(0,0,0,0.12);
+}
+
+.c12,
+.c12 .c2 {
+  font-size: 20px;
+}
+
+.c12:active,
+.c12:active .c2 {
+  color: #D63E39;
+}
+
+.c12.focus-visible,
+.c12[data-focus-visible-added] {
+  background-color: rgba(214,62,57,0.16);
+}
+
+.c12.focus-visible:active,
+.c12[data-focus-visible-added]:active,
+.c12.focus-visible:active .c2,
+.c12[data-focus-visible-added]:active .c2 {
+  color: rgba(214,62,57,0.88);
+}
+
+.c12.RcIconButton-persistBg {
+  background-color: rgba(214,62,57,0.12);
+}
+
+.c12.RcIconButton-disabled,
+.c12.RcIconButton-disabled .c2 {
+  color: #B9B9B9;
+}
+
+.c12.RcIconButton-invisible {
+  opacity: 0;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.c12.RcIconButton-outline {
+  border: 1px solid #C7C7C7;
+}
+
+.c12.RcIconButton-contained {
+  color: #fff;
+  background-color: #D63E39;
+}
+
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
+}
+
+.c12.RcIconButton-contained.focus-visible,
+.c12.RcIconButton-contained[data-focus-visible-added],
+.c12.RcIconButton-contained.focus-visible .c2,
+.c12.RcIconButton-contained[data-focus-visible-added] .c2 {
+  color: #fff;
+}
+
+.c12.RcIconButton-contained:active,
+.c12.RcIconButton-contained:active .c2 {
+  color: #fff;
+}
+
+.c12 .RcIconButtonTouchRipple-ripplePulsate {
+  border-radius: 0;
+  -webkit-animation-name: none;
+  animation-name: none;
+  opacity: 0;
+}
+
+.c13 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  width: 40px;
+  height: 40px;
+  color: #D63E39;
+  border-radius: 50%;
+  -webkit-transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  transition: background 150ms cubic-bezier(0.4,0,0.2,1) 0ms;
+  cursor: pointer;
+  background-color: rgba(214,62,57,0.16);
+}
+
+.c13,
+.c13 .c2 {
+  font-size: 20px;
+}
+
+.c13:active,
+.c13:active .c2 {
+  color: #D63E39;
+}
+
+.c13.focus-visible,
+.c13[data-focus-visible-added] {
+  background-color: rgba(214,62,57,0.32);
+}
+
+.c13.focus-visible:active,
+.c13[data-focus-visible-added]:active,
+.c13.focus-visible:active .c2,
+.c13[data-focus-visible-added]:active .c2 {
+  color: rgba(214,62,57,0.88);
+}
+
+.c13.RcIconButton-persistBg {
+  background-color: rgba(214,62,57,0.16);
+}
+
+.c13.RcIconButton-disabled {
+  background-color: rgba(214,62,57,0.12);
+}
+
+.c13.RcIconButton-disabled,
+.c13.RcIconButton-disabled .c2 {
+  color: #B9B9B9;
+}
+
+.c13.RcIconButton-invisible {
+  opacity: 0;
+  visibility: hidden;
+  width: 0;
+  height: 0;
+}
+
+.c13.RcIconButton-outline {
+  border: 1px solid #C7C7C7;
+}
+
+.c13.RcIconButton-contained {
+  color: #fff;
+  background-color: #D63E39;
+}
+
+.c13.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c13.RcIconButton-contained.focus-visible:before,
+.c13.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
+}
+
+.c13.RcIconButton-contained.focus-visible,
+.c13.RcIconButton-contained[data-focus-visible-added],
+.c13.RcIconButton-contained.focus-visible .c2,
+.c13.RcIconButton-contained[data-focus-visible-added] .c2 {
+  color: #fff;
+}
+
+.c13.RcIconButton-contained:active,
+.c13.RcIconButton-contained:active .c2 {
+  color: #fff;
+}
+
+.c13 .RcIconButtonTouchRipple-ripplePulsate {
+  border-radius: 0;
+  -webkit-animation-name: none;
+  animation-name: none;
+  opacity: 0;
+}
+
+.c0 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  font-family: Lato,Helvetica,Arial,sans-serif;
+  line-height: 32px;
+  color: #121212;
+}
+
+.c10 {
+  font-size: 0.9375rem;
+  font-weight: 400;
+  font-family: Lato,Helvetica,Arial,sans-serif;
+  line-height: 22px;
+}
+
+.c11.highlight-term {
+  color: #121212 !important;
+  background-color: #FFDFB1 !important;
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c1:hover {
+    background-color: rgba(102,102,102,0.08);
+  }
+
+  .c1:hover,
+  .c1:hover .c2 {
+    color: rgba(102,102,102,0.88);
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c1.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
+  }
+
+  .c1.RcIconButton-contained:hover,
+  .c1.RcIconButton-contained:hover .c2 {
+    color: #fff;
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c5:hover {
+    background-color: rgba(255,255,255,0.08);
+  }
+
+  .c5:hover,
+  .c5:hover .c2 {
+    color: rgba(255,255,255,0.88);
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
+  }
+
+  .c5.RcIconButton-contained:hover,
+  .c5.RcIconButton-contained:hover .c2 {
+    color: rgba(0,0,0,0.87);
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c6:hover {
+    background-color: rgba(73,73,73,0.08);
+  }
+
+  .c6:hover,
+  .c6:hover .c2 {
+    color: rgba(73,73,73,0.88);
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
+  }
+
+  .c6.RcIconButton-contained:hover,
+  .c6.RcIconButton-contained:hover .c2 {
+    color: #fff;
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c7:hover {
+    background-color: rgba(60,153,73,0.08);
+  }
+
+  .c7:hover,
+  .c7:hover .c2 {
+    color: rgba(60,153,73,0.88);
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c7.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
+  }
+
+  .c7.RcIconButton-contained:hover,
+  .c7.RcIconButton-contained:hover .c2 {
+    color: #fff;
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c8:hover {
+    background-color: rgba(214,62,57,0.08);
+  }
+
+  .c8:hover,
+  .c8:hover .c2 {
+    color: rgba(214,62,57,0.88);
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c8.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
+  }
+
+  .c8.RcIconButton-contained:hover,
+  .c8.RcIconButton-contained:hover .c2 {
+    color: #fff;
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c9:hover {
+    background-color: rgba(214,62,57,0.24);
+  }
+
+  .c9:hover,
+  .c9:hover .c2 {
+    color: rgba(214,62,57,0.88);
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c9.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
+  }
+
+  .c9.RcIconButton-contained:hover,
+  .c9.RcIconButton-contained:hover .c2 {
+    color: #fff;
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c12:hover {
+    background-color: rgba(214,62,57,0.08);
+  }
+
+  .c12:hover,
+  .c12:hover .c2 {
+    color: rgba(214,62,57,0.88);
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
+  }
+
+  .c12.RcIconButton-contained:hover,
+  .c12.RcIconButton-contained:hover .c2 {
+    color: #fff;
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c13:hover {
+    background-color: rgba(214,62,57,0.24);
+  }
+
+  .c13:hover,
+  .c13:hover .c2 {
+    color: rgba(214,62,57,0.88);
+  }
+}
+
+@media (hover:hover) and (pointer:fine) {
+  .c13.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
+  }
+
+  .c13.RcIconButton-contained:hover,
+  .c13.RcIconButton-contained:hover .c2 {
+    color: #fff;
+  }
+}
+
+<div
+  className="MuiBox-root MuiBox-root-71"
+>
+  <h5
+    className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
+    data-color="neutral.f06"
+    data-variant="headline1"
+  >
+    contained
+  </h5>
+  <button
+    className="MuiButtonBase-root c1 RcIconButton-root RcIconButton-contained"
+    disabled={false}
+    onBlur={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <span
+      className="c2 c3 phone icon"
+    >
+      <svg
+        className="c4"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.228 14.296c.124.331.324.717.602 1.154.285.448.649.938 1.09 1.465a13.92 13.92 0 0 0 1.328 1.391c.395.352.753.616 1.068.791.121.067.226.121.312.159l.218-.239.08-.078c-.004.003.001-.001.009-.015l.076-.093c.226-.238.417-.428.575-.573.171-.156.362-.306.617-.477a3.574 3.574 0 0 1 2.169-.483c.803.071 1.484.39 1.965.905.599.566 1.221 1.131 1.865 1.697s1.489 1.28 2.534 2.141c.586.482.976 1.073 1.157 1.757.184.694.125 1.365-.161 1.937-.193.479-.565 1.044-1.117 1.713-.544.659-1.035 1.155-1.456 1.47-.44.363-.947.637-1.516.818a6.01 6.01 0 0 1-1.829.264c-1.073 0-2.192-.21-3.356-.625-1.135-.405-2.29-.984-3.466-1.737a24.989 24.989 0 0 1-3.475-2.719 36.73 36.73 0 0 1-3.448-3.565c-1.492-1.787-2.714-3.551-3.664-5.291-.955-1.731-1.628-3.354-2.018-4.87-.397-1.544-.493-2.938-.281-4.173.204-1.306.769-2.366 1.703-3.149.433-.361 1.041-.728 1.828-1.11.803-.39 1.468-.63 2.018-.716.735-.115 1.455-.01 2.133.308s1.204.818 1.577 1.5a33.63 33.63 0 0 0 1.257 2.265 49.99 49.99 0 0 0 1.696 2.601c.414.626.579 1.307.486 2.017-.091.699-.403 1.322-.977 1.9a6.076 6.076 0 0 1-1.027.705 1.161 1.161 0 0 1-.218.137l-.171.083a2.256 2.256 0 0 1-.223.12 1.99 1.99 0 0 0-.144.067c.027.132.084.31.182.548z"
+        />
+      </svg>
+      
+    </span>
+  </button>
+  <button
+    className="MuiButtonBase-root c5 RcIconButton-root RcIconButton-contained"
+    disabled={false}
+    onBlur={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <span
+      className="c2 c3 phone icon"
+    >
+      <svg
+        className="c4"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.228 14.296c.124.331.324.717.602 1.154.285.448.649.938 1.09 1.465a13.92 13.92 0 0 0 1.328 1.391c.395.352.753.616 1.068.791.121.067.226.121.312.159l.218-.239.08-.078c-.004.003.001-.001.009-.015l.076-.093c.226-.238.417-.428.575-.573.171-.156.362-.306.617-.477a3.574 3.574 0 0 1 2.169-.483c.803.071 1.484.39 1.965.905.599.566 1.221 1.131 1.865 1.697s1.489 1.28 2.534 2.141c.586.482.976 1.073 1.157 1.757.184.694.125 1.365-.161 1.937-.193.479-.565 1.044-1.117 1.713-.544.659-1.035 1.155-1.456 1.47-.44.363-.947.637-1.516.818a6.01 6.01 0 0 1-1.829.264c-1.073 0-2.192-.21-3.356-.625-1.135-.405-2.29-.984-3.466-1.737a24.989 24.989 0 0 1-3.475-2.719 36.73 36.73 0 0 1-3.448-3.565c-1.492-1.787-2.714-3.551-3.664-5.291-.955-1.731-1.628-3.354-2.018-4.87-.397-1.544-.493-2.938-.281-4.173.204-1.306.769-2.366 1.703-3.149.433-.361 1.041-.728 1.828-1.11.803-.39 1.468-.63 2.018-.716.735-.115 1.455-.01 2.133.308s1.204.818 1.577 1.5a33.63 33.63 0 0 0 1.257 2.265 49.99 49.99 0 0 0 1.696 2.601c.414.626.579 1.307.486 2.017-.091.699-.403 1.322-.977 1.9a6.076 6.076 0 0 1-1.027.705 1.161 1.161 0 0 1-.218.137l-.171.083a2.256 2.256 0 0 1-.223.12 1.99 1.99 0 0 0-.144.067c.027.132.084.31.182.548z"
+        />
+      </svg>
+      
+    </span>
+  </button>
+  <button
+    className="MuiButtonBase-root c6 RcIconButton-root RcIconButton-contained"
+    disabled={false}
+    onBlur={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <span
+      className="c2 c3 phone icon"
+    >
+      <svg
+        className="c4"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.228 14.296c.124.331.324.717.602 1.154.285.448.649.938 1.09 1.465a13.92 13.92 0 0 0 1.328 1.391c.395.352.753.616 1.068.791.121.067.226.121.312.159l.218-.239.08-.078c-.004.003.001-.001.009-.015l.076-.093c.226-.238.417-.428.575-.573.171-.156.362-.306.617-.477a3.574 3.574 0 0 1 2.169-.483c.803.071 1.484.39 1.965.905.599.566 1.221 1.131 1.865 1.697s1.489 1.28 2.534 2.141c.586.482.976 1.073 1.157 1.757.184.694.125 1.365-.161 1.937-.193.479-.565 1.044-1.117 1.713-.544.659-1.035 1.155-1.456 1.47-.44.363-.947.637-1.516.818a6.01 6.01 0 0 1-1.829.264c-1.073 0-2.192-.21-3.356-.625-1.135-.405-2.29-.984-3.466-1.737a24.989 24.989 0 0 1-3.475-2.719 36.73 36.73 0 0 1-3.448-3.565c-1.492-1.787-2.714-3.551-3.664-5.291-.955-1.731-1.628-3.354-2.018-4.87-.397-1.544-.493-2.938-.281-4.173.204-1.306.769-2.366 1.703-3.149.433-.361 1.041-.728 1.828-1.11.803-.39 1.468-.63 2.018-.716.735-.115 1.455-.01 2.133.308s1.204.818 1.577 1.5a33.63 33.63 0 0 0 1.257 2.265 49.99 49.99 0 0 0 1.696 2.601c.414.626.579 1.307.486 2.017-.091.699-.403 1.322-.977 1.9a6.076 6.076 0 0 1-1.027.705 1.161 1.161 0 0 1-.218.137l-.171.083a2.256 2.256 0 0 1-.223.12 1.99 1.99 0 0 0-.144.067c.027.132.084.31.182.548z"
+        />
+      </svg>
+      
+    </span>
+  </button>
+  <button
+    className="MuiButtonBase-root c7 RcIconButton-root RcIconButton-contained"
+    disabled={false}
+    onBlur={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <span
+      className="c2 c3 phone icon"
+    >
+      <svg
+        className="c4"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.228 14.296c.124.331.324.717.602 1.154.285.448.649.938 1.09 1.465a13.92 13.92 0 0 0 1.328 1.391c.395.352.753.616 1.068.791.121.067.226.121.312.159l.218-.239.08-.078c-.004.003.001-.001.009-.015l.076-.093c.226-.238.417-.428.575-.573.171-.156.362-.306.617-.477a3.574 3.574 0 0 1 2.169-.483c.803.071 1.484.39 1.965.905.599.566 1.221 1.131 1.865 1.697s1.489 1.28 2.534 2.141c.586.482.976 1.073 1.157 1.757.184.694.125 1.365-.161 1.937-.193.479-.565 1.044-1.117 1.713-.544.659-1.035 1.155-1.456 1.47-.44.363-.947.637-1.516.818a6.01 6.01 0 0 1-1.829.264c-1.073 0-2.192-.21-3.356-.625-1.135-.405-2.29-.984-3.466-1.737a24.989 24.989 0 0 1-3.475-2.719 36.73 36.73 0 0 1-3.448-3.565c-1.492-1.787-2.714-3.551-3.664-5.291-.955-1.731-1.628-3.354-2.018-4.87-.397-1.544-.493-2.938-.281-4.173.204-1.306.769-2.366 1.703-3.149.433-.361 1.041-.728 1.828-1.11.803-.39 1.468-.63 2.018-.716.735-.115 1.455-.01 2.133.308s1.204.818 1.577 1.5a33.63 33.63 0 0 0 1.257 2.265 49.99 49.99 0 0 0 1.696 2.601c.414.626.579 1.307.486 2.017-.091.699-.403 1.322-.977 1.9a6.076 6.076 0 0 1-1.027.705 1.161 1.161 0 0 1-.218.137l-.171.083a2.256 2.256 0 0 1-.223.12 1.99 1.99 0 0 0-.144.067c.027.132.084.31.182.548z"
+        />
+      </svg>
+      
+    </span>
+  </button>
+  <br />
+  <br />
+  <h5
+    className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
+    data-color="neutral.f06"
+    data-variant="headline1"
+  >
+    Disabled ripple
+  </h5>
+  <button
+    className="MuiButtonBase-root c8 RcIconButton-root RcIconButton-contained"
+    disabled={false}
+    onBlur={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <span
+      className="c2 c3 phone icon"
+    >
+      <svg
+        className="c4"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.228 14.296c.124.331.324.717.602 1.154.285.448.649.938 1.09 1.465a13.92 13.92 0 0 0 1.328 1.391c.395.352.753.616 1.068.791.121.067.226.121.312.159l.218-.239.08-.078c-.004.003.001-.001.009-.015l.076-.093c.226-.238.417-.428.575-.573.171-.156.362-.306.617-.477a3.574 3.574 0 0 1 2.169-.483c.803.071 1.484.39 1.965.905.599.566 1.221 1.131 1.865 1.697s1.489 1.28 2.534 2.141c.586.482.976 1.073 1.157 1.757.184.694.125 1.365-.161 1.937-.193.479-.565 1.044-1.117 1.713-.544.659-1.035 1.155-1.456 1.47-.44.363-.947.637-1.516.818a6.01 6.01 0 0 1-1.829.264c-1.073 0-2.192-.21-3.356-.625-1.135-.405-2.29-.984-3.466-1.737a24.989 24.989 0 0 1-3.475-2.719 36.73 36.73 0 0 1-3.448-3.565c-1.492-1.787-2.714-3.551-3.664-5.291-.955-1.731-1.628-3.354-2.018-4.87-.397-1.544-.493-2.938-.281-4.173.204-1.306.769-2.366 1.703-3.149.433-.361 1.041-.728 1.828-1.11.803-.39 1.468-.63 2.018-.716.735-.115 1.455-.01 2.133.308s1.204.818 1.577 1.5a33.63 33.63 0 0 0 1.257 2.265 49.99 49.99 0 0 0 1.696 2.601c.414.626.579 1.307.486 2.017-.091.699-.403 1.322-.977 1.9a6.076 6.076 0 0 1-1.027.705 1.161 1.161 0 0 1-.218.137l-.171.083a2.256 2.256 0 0 1-.223.12 1.99 1.99 0 0 0-.144.067c.027.132.084.31.182.548z"
+        />
+      </svg>
+      
+    </span>
+  </button>
+  <button
+    className="MuiButtonBase-root c9 RcIconButton-root RcIconButton-inverse"
+    disabled={false}
+    onBlur={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <span
+      className="c2 c3 phone icon"
+    >
+      <svg
+        className="c4"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.228 14.296c.124.331.324.717.602 1.154.285.448.649.938 1.09 1.465a13.92 13.92 0 0 0 1.328 1.391c.395.352.753.616 1.068.791.121.067.226.121.312.159l.218-.239.08-.078c-.004.003.001-.001.009-.015l.076-.093c.226-.238.417-.428.575-.573.171-.156.362-.306.617-.477a3.574 3.574 0 0 1 2.169-.483c.803.071 1.484.39 1.965.905.599.566 1.221 1.131 1.865 1.697s1.489 1.28 2.534 2.141c.586.482.976 1.073 1.157 1.757.184.694.125 1.365-.161 1.937-.193.479-.565 1.044-1.117 1.713-.544.659-1.035 1.155-1.456 1.47-.44.363-.947.637-1.516.818a6.01 6.01 0 0 1-1.829.264c-1.073 0-2.192-.21-3.356-.625-1.135-.405-2.29-.984-3.466-1.737a24.989 24.989 0 0 1-3.475-2.719 36.73 36.73 0 0 1-3.448-3.565c-1.492-1.787-2.714-3.551-3.664-5.291-.955-1.731-1.628-3.354-2.018-4.87-.397-1.544-.493-2.938-.281-4.173.204-1.306.769-2.366 1.703-3.149.433-.361 1.041-.728 1.828-1.11.803-.39 1.468-.63 2.018-.716.735-.115 1.455-.01 2.133.308s1.204.818 1.577 1.5a33.63 33.63 0 0 0 1.257 2.265 49.99 49.99 0 0 0 1.696 2.601c.414.626.579 1.307.486 2.017-.091.699-.403 1.322-.977 1.9a6.076 6.076 0 0 1-1.027.705 1.161 1.161 0 0 1-.218.137l-.171.083a2.256 2.256 0 0 1-.223.12 1.99 1.99 0 0 0-.144.067c.027.132.084.31.182.548z"
+        />
+      </svg>
+      
+    </span>
+  </button>
+  <br />
+  <br />
+  <h5
+    className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
+    data-color="neutral.f06"
+    data-variant="headline1"
+  >
+    disabledFakeBorder
+    <br />
+    <span
+      className="MuiTypography-root c10 c11 highlight-term MuiTypography-noWrap"
+      data-color="initial"
+      data-variant="body1"
+      title="(Only use in highContractMode)"
+    >
+      (Only use in highContractMode)
+    </span>
+  </h5>
+  <button
+    className="MuiButtonBase-root c12 RcIconButton-root RcIconButton-contained"
+    disabled={false}
+    onBlur={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <span
+      className="c2 c3 phone icon"
+    >
+      <svg
+        className="c4"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.228 14.296c.124.331.324.717.602 1.154.285.448.649.938 1.09 1.465a13.92 13.92 0 0 0 1.328 1.391c.395.352.753.616 1.068.791.121.067.226.121.312.159l.218-.239.08-.078c-.004.003.001-.001.009-.015l.076-.093c.226-.238.417-.428.575-.573.171-.156.362-.306.617-.477a3.574 3.574 0 0 1 2.169-.483c.803.071 1.484.39 1.965.905.599.566 1.221 1.131 1.865 1.697s1.489 1.28 2.534 2.141c.586.482.976 1.073 1.157 1.757.184.694.125 1.365-.161 1.937-.193.479-.565 1.044-1.117 1.713-.544.659-1.035 1.155-1.456 1.47-.44.363-.947.637-1.516.818a6.01 6.01 0 0 1-1.829.264c-1.073 0-2.192-.21-3.356-.625-1.135-.405-2.29-.984-3.466-1.737a24.989 24.989 0 0 1-3.475-2.719 36.73 36.73 0 0 1-3.448-3.565c-1.492-1.787-2.714-3.551-3.664-5.291-.955-1.731-1.628-3.354-2.018-4.87-.397-1.544-.493-2.938-.281-4.173.204-1.306.769-2.366 1.703-3.149.433-.361 1.041-.728 1.828-1.11.803-.39 1.468-.63 2.018-.716.735-.115 1.455-.01 2.133.308s1.204.818 1.577 1.5a33.63 33.63 0 0 0 1.257 2.265 49.99 49.99 0 0 0 1.696 2.601c.414.626.579 1.307.486 2.017-.091.699-.403 1.322-.977 1.9a6.076 6.076 0 0 1-1.027.705 1.161 1.161 0 0 1-.218.137l-.171.083a2.256 2.256 0 0 1-.223.12 1.99 1.99 0 0 0-.144.067c.027.132.084.31.182.548z"
+        />
+      </svg>
+      
+    </span>
+  </button>
+  <button
+    className="MuiButtonBase-root c13 RcIconButton-root RcIconButton-inverse"
+    disabled={false}
+    onBlur={[Function]}
+    onDragLeave={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    onKeyUp={[Function]}
+    onMouseDown={[Function]}
+    onMouseLeave={[Function]}
+    onMouseUp={[Function]}
+    onTouchEnd={[Function]}
+    onTouchMove={[Function]}
+    onTouchStart={[Function]}
+    tabIndex={0}
+    type="button"
+  >
+    <span
+      className="c2 c3 phone icon"
+    >
+      <svg
+        className="c4"
+        viewBox="0 0 32 32"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M13.228 14.296c.124.331.324.717.602 1.154.285.448.649.938 1.09 1.465a13.92 13.92 0 0 0 1.328 1.391c.395.352.753.616 1.068.791.121.067.226.121.312.159l.218-.239.08-.078c-.004.003.001-.001.009-.015l.076-.093c.226-.238.417-.428.575-.573.171-.156.362-.306.617-.477a3.574 3.574 0 0 1 2.169-.483c.803.071 1.484.39 1.965.905.599.566 1.221 1.131 1.865 1.697s1.489 1.28 2.534 2.141c.586.482.976 1.073 1.157 1.757.184.694.125 1.365-.161 1.937-.193.479-.565 1.044-1.117 1.713-.544.659-1.035 1.155-1.456 1.47-.44.363-.947.637-1.516.818a6.01 6.01 0 0 1-1.829.264c-1.073 0-2.192-.21-3.356-.625-1.135-.405-2.29-.984-3.466-1.737a24.989 24.989 0 0 1-3.475-2.719 36.73 36.73 0 0 1-3.448-3.565c-1.492-1.787-2.714-3.551-3.664-5.291-.955-1.731-1.628-3.354-2.018-4.87-.397-1.544-.493-2.938-.281-4.173.204-1.306.769-2.366 1.703-3.149.433-.361 1.041-.728 1.828-1.11.803-.39 1.468-.63 2.018-.716.735-.115 1.455-.01 2.133.308s1.204.818 1.577 1.5a33.63 33.63 0 0 0 1.257 2.265 49.99 49.99 0 0 0 1.696 2.601c.414.626.579 1.307.486 2.017-.091.699-.403 1.322-.977 1.9a6.076 6.076 0 0 1-1.027.705 1.161 1.161 0 0 1-.218.137l-.171.083a2.256 2.256 0 0 1-.223.12 1.99 1.99 0 0 0-.144.067c.027.132.084.31.182.548z"
+        />
+      </svg>
+      
+    </span>
+  </button>
+</div>
+`;
+
 exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1`] = `
 .c4 {
   width: 1em;
@@ -94,9 +1511,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   background-color: #666666;
 }
 
-.c1.RcIconButton-contained.focus-visible,
-.c1.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c1.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c1.RcIconButton-contained.focus-visible:before,
+.c1.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c1.RcIconButton-contained.focus-visible,
@@ -106,10 +1535,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   color: #fff;
 }
 
-.c1.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c1.RcIconButton-contained:active,
 .c1.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -198,9 +1623,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -210,10 +1647,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -308,9 +1741,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 3px;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -320,10 +1765,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -418,9 +1859,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   background-color: #666666;
 }
 
-.c7.RcIconButton-contained.focus-visible,
-.c7.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c7.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 100vw;
+  position: absolute;
+}
+
+.c7.RcIconButton-contained.focus-visible:before,
+.c7.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c7.RcIconButton-contained.focus-visible,
@@ -430,10 +1883,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   color: #fff;
 }
 
-.c7.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c7.RcIconButton-contained:active,
 .c7.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -522,9 +1971,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   background-color: #666666;
 }
 
-.c8.RcIconButton-contained.focus-visible,
-.c8.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c8.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 2px;
+  position: absolute;
+}
+
+.c8.RcIconButton-contained.focus-visible:before,
+.c8.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c8.RcIconButton-contained.focus-visible,
@@ -534,10 +1995,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   color: #fff;
 }
 
-.c8.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c8.RcIconButton-contained:active,
 .c8.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -632,9 +2089,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   background-color: #666666;
 }
 
-.c9.RcIconButton-contained.focus-visible,
-.c9.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c9.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 8px;
+  position: absolute;
+}
+
+.c9.RcIconButton-contained.focus-visible:before,
+.c9.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c9.RcIconButton-contained.focus-visible,
@@ -644,10 +2113,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   color: #fff;
 }
 
-.c9.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c9.RcIconButton-contained:active,
 .c9.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -742,9 +2207,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   background-color: #666666;
 }
 
-.c10.RcIconButton-contained.focus-visible,
-.c10.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c10.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 16px;
+  position: absolute;
+}
+
+.c10.RcIconButton-contained.focus-visible:before,
+.c10.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c10.RcIconButton-contained.focus-visible,
@@ -754,10 +2231,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   color: #fff;
 }
 
-.c10.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c10.RcIconButton-contained:active,
 .c10.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -852,9 +2325,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   background-color: #666666;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 0px;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -864,10 +2349,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -906,8 +2387,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c1.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c1.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c1.RcIconButton-contained:hover,
@@ -928,8 +2409,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -950,8 +2431,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -972,8 +2453,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c7.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c7.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c7.RcIconButton-contained:hover,
@@ -994,8 +2475,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c8.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c8.RcIconButton-contained:hover,
@@ -1016,8 +2497,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c9.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c9.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c9.RcIconButton-contained:hover,
@@ -1038,8 +2519,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c10.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c10.RcIconButton-contained:hover,
@@ -1060,8 +2541,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -1071,10 +2552,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
 }
 
 <div
-  className="MuiBox-root MuiBox-root-98"
+  className="MuiBox-root MuiBox-root-99"
 >
   <div
-    className="MuiBox-root MuiBox-root-99"
+    className="MuiBox-root MuiBox-root-100"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1114,13 +2595,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
         </svg>
         
       </span>
-      <span
-        className="MuiTouchRipple-root"
-      />
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-100"
+    className="MuiBox-root MuiBox-root-101"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1160,13 +2638,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
         </svg>
         
       </span>
-      <span
-        className="MuiTouchRipple-root"
-      />
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-101"
+    className="MuiBox-root MuiBox-root-102"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1206,13 +2681,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
         </svg>
         
       </span>
-      <span
-        className="MuiTouchRipple-root"
-      />
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-102"
+    className="MuiBox-root MuiBox-root-103"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1252,13 +2724,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
         </svg>
         
       </span>
-      <span
-        className="MuiTouchRipple-root"
-      />
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-103"
+    className="MuiBox-root MuiBox-root-104"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1298,13 +2767,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
         </svg>
         
       </span>
-      <span
-        className="MuiTouchRipple-root"
-      />
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-104"
+    className="MuiBox-root MuiBox-root-105"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1344,13 +2810,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
         </svg>
         
       </span>
-      <span
-        className="MuiTouchRipple-root"
-      />
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-105"
+    className="MuiBox-root MuiBox-root-106"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1390,13 +2853,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
         </svg>
         
       </span>
-      <span
-        className="MuiTouchRipple-root"
-      />
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-106"
+    className="MuiBox-root MuiBox-root-107"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1436,9 +2896,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
         </svg>
         
       </span>
-      <span
-        className="MuiTouchRipple-root"
-      />
     </button>
   </div>
 </div>
@@ -1531,9 +2988,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton 1`] = `
   background-color: #666666;
 }
 
-.c0.RcIconButton-contained.focus-visible,
-.c0.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c0.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c0.RcIconButton-contained.focus-visible:before,
+.c0.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c0.RcIconButton-contained.focus-visible,
@@ -1543,10 +3012,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton 1`] = `
   color: #fff;
 }
 
-.c0.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c0.RcIconButton-contained:active,
 .c0.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -1571,8 +3036,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c0.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c0.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c0.RcIconButton-contained:hover,
@@ -1702,9 +3167,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   background-color: #666666;
 }
 
-.c1.RcIconButton-contained.focus-visible,
-.c1.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c1.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c1.RcIconButton-contained.focus-visible:before,
+.c1.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c1.RcIconButton-contained.focus-visible,
@@ -1714,10 +3191,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   color: #fff;
 }
 
-.c1.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c1.RcIconButton-contained:active,
 .c1.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -1799,9 +3272,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -1811,10 +3296,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -1903,9 +3384,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -1915,10 +3408,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -2007,9 +3496,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   background-color: #666666;
 }
 
-.c7.RcIconButton-contained.focus-visible,
-.c7.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c7.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c7.RcIconButton-contained.focus-visible:before,
+.c7.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c7.RcIconButton-contained.focus-visible,
@@ -2019,10 +3520,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   color: #fff;
 }
 
-.c7.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c7.RcIconButton-contained:active,
 .c7.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -2109,9 +3606,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   background-color: #666666;
 }
 
-.c8.RcIconButton-contained.focus-visible,
-.c8.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c8.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c8.RcIconButton-contained.focus-visible:before,
+.c8.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c8.RcIconButton-contained.focus-visible,
@@ -2121,10 +3630,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   color: #fff;
 }
 
-.c8.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c8.RcIconButton-contained:active,
 .c8.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -2211,9 +3716,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   background-color: #666666;
 }
 
-.c9.RcIconButton-contained.focus-visible,
-.c9.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c9.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c9.RcIconButton-contained.focus-visible:before,
+.c9.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c9.RcIconButton-contained.focus-visible,
@@ -2223,10 +3740,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   color: #fff;
 }
 
-.c9.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c9.RcIconButton-contained:active,
 .c9.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -2308,9 +3821,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   background-color: #666666;
 }
 
-.c10.RcIconButton-contained.focus-visible,
-.c10.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c10.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c10.RcIconButton-contained.focus-visible:before,
+.c10.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c10.RcIconButton-contained.focus-visible,
@@ -2320,10 +3845,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   color: #fff;
 }
 
-.c10.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c10.RcIconButton-contained:active,
 .c10.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -2411,9 +3932,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   background-color: #666666;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -2423,10 +3956,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -2528,9 +4057,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -2540,10 +4081,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -2576,8 +4113,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c1.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c1.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c1.RcIconButton-contained:hover,
@@ -2598,8 +4135,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -2620,8 +4157,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -2642,8 +4179,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c7.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c7.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c7.RcIconButton-contained:hover,
@@ -2664,8 +4201,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c8.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c8.RcIconButton-contained:hover,
@@ -2686,8 +4223,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c9.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c9.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c9.RcIconButton-contained:hover,
@@ -2708,8 +4245,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c10.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c10.RcIconButton-contained:hover,
@@ -2730,8 +4267,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -2752,8 +4289,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -2950,7 +4487,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
     <button
       aria-describedby={null}
       aria-label="star"
-      className="MuiButtonBase-root c8 RcIconButton-root"
+      className="MuiButtonBase-root c8 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -2988,7 +4525,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
     </button>
     <br />
     <button
-      className="MuiButtonBase-root c9 RcIconButton-root"
+      className="MuiButtonBase-root c9 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -3279,9 +4816,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #3C9949;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(60,153,73,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -3291,10 +4840,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(60,153,73,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -3383,9 +4928,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #3C9949;
 }
 
-.c7.RcIconButton-contained.focus-visible,
-.c7.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(60,153,73,0.84);
+.c7.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c7.RcIconButton-contained.focus-visible:before,
+.c7.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c7.RcIconButton-contained.focus-visible,
@@ -3395,10 +4952,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c7.RcIconButton-contained:active {
-  background-color: rgba(60,153,73,0.76);
-}
-
 .c7.RcIconButton-contained:active,
 .c7.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -3485,9 +5038,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #3C9949;
 }
 
-.c8.RcIconButton-contained.focus-visible,
-.c8.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(60,153,73,0.84);
+.c8.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c8.RcIconButton-contained.focus-visible:before,
+.c8.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c8.RcIconButton-contained.focus-visible,
@@ -3497,10 +5062,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c8.RcIconButton-contained:active {
-  background-color: rgba(60,153,73,0.76);
-}
-
 .c8.RcIconButton-contained:active,
 .c8.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -3582,9 +5143,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #3C9949;
 }
 
-.c9.RcIconButton-contained.focus-visible,
-.c9.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(60,153,73,0.84);
+.c9.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c9.RcIconButton-contained.focus-visible:before,
+.c9.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c9.RcIconButton-contained.focus-visible,
@@ -3594,10 +5167,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c9.RcIconButton-contained:active {
-  background-color: rgba(60,153,73,0.76);
-}
-
 .c9.RcIconButton-contained:active,
 .c9.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -3699,9 +5268,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #3C9949;
 }
 
-.c10.RcIconButton-contained.focus-visible,
-.c10.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(60,153,73,0.84);
+.c10.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c10.RcIconButton-contained.focus-visible:before,
+.c10.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c10.RcIconButton-contained.focus-visible,
@@ -3711,10 +5292,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c10.RcIconButton-contained:active {
-  background-color: rgba(60,153,73,0.76);
-}
-
 .c10.RcIconButton-contained:active,
 .c10.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -3796,9 +5373,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #368541;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(54,133,65,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -3808,10 +5397,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(54,133,65,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -3900,9 +5485,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #368541;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(54,133,65,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -3912,10 +5509,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(54,133,65,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -4002,9 +5595,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #368541;
 }
 
-.c13.RcIconButton-contained.focus-visible,
-.c13.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(54,133,65,0.84);
+.c13.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c13.RcIconButton-contained.focus-visible:before,
+.c13.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c13.RcIconButton-contained.focus-visible,
@@ -4014,10 +5619,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c13.RcIconButton-contained:active {
-  background-color: rgba(54,133,65,0.76);
-}
-
 .c13.RcIconButton-contained:active,
 .c13.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -4099,9 +5700,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #368541;
 }
 
-.c14.RcIconButton-contained.focus-visible,
-.c14.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(54,133,65,0.84);
+.c14.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c14.RcIconButton-contained.focus-visible:before,
+.c14.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c14.RcIconButton-contained.focus-visible,
@@ -4111,10 +5724,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c14.RcIconButton-contained:active {
-  background-color: rgba(54,133,65,0.76);
-}
-
 .c14.RcIconButton-contained:active,
 .c14.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -4216,9 +5825,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #368541;
 }
 
-.c15.RcIconButton-contained.focus-visible,
-.c15.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(54,133,65,0.84);
+.c15.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c15.RcIconButton-contained.focus-visible:before,
+.c15.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c15.RcIconButton-contained.focus-visible,
@@ -4228,10 +5849,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c15.RcIconButton-contained:active {
-  background-color: rgba(54,133,65,0.76);
-}
-
 .c15.RcIconButton-contained:active,
 .c15.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -4313,9 +5930,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FF8800;
 }
 
-.c16.RcIconButton-contained.focus-visible,
-.c16.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c16.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c16.RcIconButton-contained.focus-visible:before,
+.c16.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c16.RcIconButton-contained.focus-visible,
@@ -4325,10 +5954,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c16.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c16.RcIconButton-contained:active,
 .c16.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -4417,9 +6042,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FF8800;
 }
 
-.c17.RcIconButton-contained.focus-visible,
-.c17.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c17.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c17.RcIconButton-contained.focus-visible:before,
+.c17.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c17.RcIconButton-contained.focus-visible,
@@ -4429,10 +6066,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c17.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c17.RcIconButton-contained:active,
 .c17.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -4519,9 +6152,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FF8800;
 }
 
-.c18.RcIconButton-contained.focus-visible,
-.c18.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c18.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c18.RcIconButton-contained.focus-visible:before,
+.c18.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c18.RcIconButton-contained.focus-visible,
@@ -4531,10 +6176,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c18.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c18.RcIconButton-contained:active,
 .c18.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -4616,9 +6257,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FF8800;
 }
 
-.c19.RcIconButton-contained.focus-visible,
-.c19.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c19.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c19.RcIconButton-contained.focus-visible:before,
+.c19.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c19.RcIconButton-contained.focus-visible,
@@ -4628,10 +6281,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c19.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c19.RcIconButton-contained:active,
 .c19.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -4733,9 +6382,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FF8800;
 }
 
-.c20.RcIconButton-contained.focus-visible,
-.c20.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c20.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c20.RcIconButton-contained.focus-visible:before,
+.c20.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c20.RcIconButton-contained.focus-visible,
@@ -4745,10 +6406,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c20.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c20.RcIconButton-contained:active,
 .c20.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -4830,9 +6487,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FFDFB1;
 }
 
-.c21.RcIconButton-contained.focus-visible,
-.c21.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,223,177,0.84);
+.c21.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c21.RcIconButton-contained.focus-visible:before,
+.c21.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c21.RcIconButton-contained.focus-visible,
@@ -4842,10 +6511,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c21.RcIconButton-contained:active {
-  background-color: rgba(255,223,177,0.76);
-}
-
 .c21.RcIconButton-contained:active,
 .c21.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -4934,9 +6599,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FFDFB1;
 }
 
-.c22.RcIconButton-contained.focus-visible,
-.c22.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,223,177,0.84);
+.c22.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c22.RcIconButton-contained.focus-visible:before,
+.c22.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c22.RcIconButton-contained.focus-visible,
@@ -4946,10 +6623,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c22.RcIconButton-contained:active {
-  background-color: rgba(255,223,177,0.76);
-}
-
 .c22.RcIconButton-contained:active,
 .c22.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -5036,9 +6709,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FFDFB1;
 }
 
-.c23.RcIconButton-contained.focus-visible,
-.c23.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,223,177,0.84);
+.c23.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c23.RcIconButton-contained.focus-visible:before,
+.c23.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c23.RcIconButton-contained.focus-visible,
@@ -5048,10 +6733,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c23.RcIconButton-contained:active {
-  background-color: rgba(255,223,177,0.76);
-}
-
 .c23.RcIconButton-contained:active,
 .c23.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -5133,9 +6814,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FFDFB1;
 }
 
-.c24.RcIconButton-contained.focus-visible,
-.c24.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,223,177,0.84);
+.c24.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c24.RcIconButton-contained.focus-visible:before,
+.c24.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c24.RcIconButton-contained.focus-visible,
@@ -5145,10 +6838,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c24.RcIconButton-contained:active {
-  background-color: rgba(255,223,177,0.76);
-}
-
 .c24.RcIconButton-contained:active,
 .c24.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -5250,9 +6939,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FFDFB1;
 }
 
-.c25.RcIconButton-contained.focus-visible,
-.c25.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,223,177,0.84);
+.c25.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c25.RcIconButton-contained.focus-visible:before,
+.c25.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c25.RcIconButton-contained.focus-visible,
@@ -5262,10 +6963,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c25.RcIconButton-contained:active {
-  background-color: rgba(255,223,177,0.76);
-}
-
 .c25.RcIconButton-contained:active,
 .c25.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -5347,9 +7044,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FF8800;
 }
 
-.c26.RcIconButton-contained.focus-visible,
-.c26.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c26.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c26.RcIconButton-contained.focus-visible:before,
+.c26.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c26.RcIconButton-contained.focus-visible,
@@ -5359,10 +7068,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c26.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c26.RcIconButton-contained:active,
 .c26.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -5451,9 +7156,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FF8800;
 }
 
-.c27.RcIconButton-contained.focus-visible,
-.c27.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c27.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c27.RcIconButton-contained.focus-visible:before,
+.c27.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c27.RcIconButton-contained.focus-visible,
@@ -5463,10 +7180,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c27.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c27.RcIconButton-contained:active,
 .c27.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -5553,9 +7266,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FF8800;
 }
 
-.c28.RcIconButton-contained.focus-visible,
-.c28.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c28.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c28.RcIconButton-contained.focus-visible:before,
+.c28.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c28.RcIconButton-contained.focus-visible,
@@ -5565,10 +7290,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c28.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c28.RcIconButton-contained:active,
 .c28.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -5650,9 +7371,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FF8800;
 }
 
-.c29.RcIconButton-contained.focus-visible,
-.c29.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c29.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c29.RcIconButton-contained.focus-visible:before,
+.c29.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c29.RcIconButton-contained.focus-visible,
@@ -5662,10 +7395,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c29.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c29.RcIconButton-contained:active,
 .c29.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -5767,9 +7496,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #FF8800;
 }
 
-.c30.RcIconButton-contained.focus-visible,
-.c30.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c30.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c30.RcIconButton-contained.focus-visible:before,
+.c30.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c30.RcIconButton-contained.focus-visible,
@@ -5779,10 +7520,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: rgba(0,0,0,0.87);
 }
 
-.c30.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c30.RcIconButton-contained:active,
 .c30.RcIconButton-contained:active .c4 {
   color: rgba(0,0,0,0.87);
@@ -5864,9 +7601,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #E6413C;
 }
 
-.c31.RcIconButton-contained.focus-visible,
-.c31.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(230,65,60,0.84);
+.c31.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c31.RcIconButton-contained.focus-visible:before,
+.c31.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c31.RcIconButton-contained.focus-visible,
@@ -5876,10 +7625,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c31.RcIconButton-contained:active {
-  background-color: rgba(230,65,60,0.76);
-}
-
 .c31.RcIconButton-contained:active,
 .c31.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -5968,9 +7713,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #E6413C;
 }
 
-.c32.RcIconButton-contained.focus-visible,
-.c32.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(230,65,60,0.84);
+.c32.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c32.RcIconButton-contained.focus-visible:before,
+.c32.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c32.RcIconButton-contained.focus-visible,
@@ -5980,10 +7737,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c32.RcIconButton-contained:active {
-  background-color: rgba(230,65,60,0.76);
-}
-
 .c32.RcIconButton-contained:active,
 .c32.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -6070,9 +7823,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #E6413C;
 }
 
-.c33.RcIconButton-contained.focus-visible,
-.c33.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(230,65,60,0.84);
+.c33.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c33.RcIconButton-contained.focus-visible:before,
+.c33.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c33.RcIconButton-contained.focus-visible,
@@ -6082,10 +7847,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c33.RcIconButton-contained:active {
-  background-color: rgba(230,65,60,0.76);
-}
-
 .c33.RcIconButton-contained:active,
 .c33.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -6167,9 +7928,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #E6413C;
 }
 
-.c34.RcIconButton-contained.focus-visible,
-.c34.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(230,65,60,0.84);
+.c34.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c34.RcIconButton-contained.focus-visible:before,
+.c34.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c34.RcIconButton-contained.focus-visible,
@@ -6179,10 +7952,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c34.RcIconButton-contained:active {
-  background-color: rgba(230,65,60,0.76);
-}
-
 .c34.RcIconButton-contained:active,
 .c34.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -6284,9 +8053,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #E6413C;
 }
 
-.c35.RcIconButton-contained.focus-visible,
-.c35.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(230,65,60,0.84);
+.c35.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c35.RcIconButton-contained.focus-visible:before,
+.c35.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c35.RcIconButton-contained.focus-visible,
@@ -6296,10 +8077,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c35.RcIconButton-contained:active {
-  background-color: rgba(230,65,60,0.76);
-}
-
 .c35.RcIconButton-contained:active,
 .c35.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -6381,9 +8158,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #D63E39;
 }
 
-.c36.RcIconButton-contained.focus-visible,
-.c36.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(214,62,57,0.84);
+.c36.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c36.RcIconButton-contained.focus-visible:before,
+.c36.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c36.RcIconButton-contained.focus-visible,
@@ -6393,10 +8182,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c36.RcIconButton-contained:active {
-  background-color: rgba(214,62,57,0.76);
-}
-
 .c36.RcIconButton-contained:active,
 .c36.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -6485,9 +8270,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #D63E39;
 }
 
-.c37.RcIconButton-contained.focus-visible,
-.c37.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(214,62,57,0.84);
+.c37.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c37.RcIconButton-contained.focus-visible:before,
+.c37.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c37.RcIconButton-contained.focus-visible,
@@ -6497,10 +8294,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c37.RcIconButton-contained:active {
-  background-color: rgba(214,62,57,0.76);
-}
-
 .c37.RcIconButton-contained:active,
 .c37.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -6587,9 +8380,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #D63E39;
 }
 
-.c38.RcIconButton-contained.focus-visible,
-.c38.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(214,62,57,0.84);
+.c38.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c38.RcIconButton-contained.focus-visible:before,
+.c38.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c38.RcIconButton-contained.focus-visible,
@@ -6599,10 +8404,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c38.RcIconButton-contained:active {
-  background-color: rgba(214,62,57,0.76);
-}
-
 .c38.RcIconButton-contained:active,
 .c38.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -6684,9 +8485,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #D63E39;
 }
 
-.c39.RcIconButton-contained.focus-visible,
-.c39.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(214,62,57,0.84);
+.c39.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c39.RcIconButton-contained.focus-visible:before,
+.c39.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c39.RcIconButton-contained.focus-visible,
@@ -6696,10 +8509,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c39.RcIconButton-contained:active {
-  background-color: rgba(214,62,57,0.76);
-}
-
 .c39.RcIconButton-contained:active,
 .c39.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -6801,9 +8610,21 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   background-color: #D63E39;
 }
 
-.c40.RcIconButton-contained.focus-visible,
-.c40.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(214,62,57,0.84);
+.c40.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c40.RcIconButton-contained.focus-visible:before,
+.c40.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c40.RcIconButton-contained.focus-visible,
@@ -6813,10 +8634,6 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
   color: #fff;
 }
 
-.c40.RcIconButton-contained:active {
-  background-color: rgba(214,62,57,0.76);
-}
-
 .c40.RcIconButton-contained:active,
 .c40.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -6862,8 +8679,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(60,153,73,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -6884,8 +8701,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c7.RcIconButton-contained:hover {
-    background-color: rgba(60,153,73,0.92);
+  .c7.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c7.RcIconButton-contained:hover,
@@ -6906,8 +8723,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8.RcIconButton-contained:hover {
-    background-color: rgba(60,153,73,0.92);
+  .c8.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c8.RcIconButton-contained:hover,
@@ -6928,8 +8745,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c9.RcIconButton-contained:hover {
-    background-color: rgba(60,153,73,0.92);
+  .c9.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c9.RcIconButton-contained:hover,
@@ -6950,8 +8767,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10.RcIconButton-contained:hover {
-    background-color: rgba(60,153,73,0.92);
+  .c10.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c10.RcIconButton-contained:hover,
@@ -6972,8 +8789,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(54,133,65,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -6994,8 +8811,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(54,133,65,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -7016,8 +8833,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c13.RcIconButton-contained:hover {
-    background-color: rgba(54,133,65,0.92);
+  .c13.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c13.RcIconButton-contained:hover,
@@ -7038,8 +8855,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c14.RcIconButton-contained:hover {
-    background-color: rgba(54,133,65,0.92);
+  .c14.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c14.RcIconButton-contained:hover,
@@ -7060,8 +8877,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c15.RcIconButton-contained:hover {
-    background-color: rgba(54,133,65,0.92);
+  .c15.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c15.RcIconButton-contained:hover,
@@ -7082,8 +8899,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c16.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c16.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c16.RcIconButton-contained:hover,
@@ -7104,8 +8921,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c17.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c17.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c17.RcIconButton-contained:hover,
@@ -7126,8 +8943,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c18.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c18.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c18.RcIconButton-contained:hover,
@@ -7148,8 +8965,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c19.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c19.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c19.RcIconButton-contained:hover,
@@ -7170,8 +8987,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c20.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c20.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c20.RcIconButton-contained:hover,
@@ -7192,8 +9009,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c21.RcIconButton-contained:hover {
-    background-color: rgba(255,223,177,0.92);
+  .c21.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c21.RcIconButton-contained:hover,
@@ -7214,8 +9031,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c22.RcIconButton-contained:hover {
-    background-color: rgba(255,223,177,0.92);
+  .c22.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c22.RcIconButton-contained:hover,
@@ -7236,8 +9053,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c23.RcIconButton-contained:hover {
-    background-color: rgba(255,223,177,0.92);
+  .c23.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c23.RcIconButton-contained:hover,
@@ -7258,8 +9075,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c24.RcIconButton-contained:hover {
-    background-color: rgba(255,223,177,0.92);
+  .c24.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c24.RcIconButton-contained:hover,
@@ -7280,8 +9097,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c25.RcIconButton-contained:hover {
-    background-color: rgba(255,223,177,0.92);
+  .c25.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c25.RcIconButton-contained:hover,
@@ -7302,8 +9119,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c26.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c26.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c26.RcIconButton-contained:hover,
@@ -7324,8 +9141,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c27.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c27.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c27.RcIconButton-contained:hover,
@@ -7346,8 +9163,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c28.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c28.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c28.RcIconButton-contained:hover,
@@ -7368,8 +9185,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c29.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c29.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c29.RcIconButton-contained:hover,
@@ -7390,8 +9207,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c30.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c30.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c30.RcIconButton-contained:hover,
@@ -7412,8 +9229,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c31.RcIconButton-contained:hover {
-    background-color: rgba(230,65,60,0.92);
+  .c31.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c31.RcIconButton-contained:hover,
@@ -7434,8 +9251,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c32.RcIconButton-contained:hover {
-    background-color: rgba(230,65,60,0.92);
+  .c32.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c32.RcIconButton-contained:hover,
@@ -7456,8 +9273,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c33.RcIconButton-contained:hover {
-    background-color: rgba(230,65,60,0.92);
+  .c33.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c33.RcIconButton-contained:hover,
@@ -7478,8 +9295,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c34.RcIconButton-contained:hover {
-    background-color: rgba(230,65,60,0.92);
+  .c34.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c34.RcIconButton-contained:hover,
@@ -7500,8 +9317,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c35.RcIconButton-contained:hover {
-    background-color: rgba(230,65,60,0.92);
+  .c35.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c35.RcIconButton-contained:hover,
@@ -7522,8 +9339,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c36.RcIconButton-contained:hover {
-    background-color: rgba(214,62,57,0.92);
+  .c36.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c36.RcIconButton-contained:hover,
@@ -7544,8 +9361,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c37.RcIconButton-contained:hover {
-    background-color: rgba(214,62,57,0.92);
+  .c37.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c37.RcIconButton-contained:hover,
@@ -7566,8 +9383,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c38.RcIconButton-contained:hover {
-    background-color: rgba(214,62,57,0.92);
+  .c38.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c38.RcIconButton-contained:hover,
@@ -7588,8 +9405,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c39.RcIconButton-contained:hover {
-    background-color: rgba(214,62,57,0.92);
+  .c39.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c39.RcIconButton-contained:hover,
@@ -7610,8 +9427,8 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c40.RcIconButton-contained:hover {
-    background-color: rgba(214,62,57,0.92);
+  .c40.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c40.RcIconButton-contained:hover,
@@ -7621,10 +9438,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 <div
-  className="MuiBox-root MuiBox-root-107"
+  className="MuiBox-root MuiBox-root-108"
 >
   <div
-    className="MuiBox-root MuiBox-root-108"
+    className="MuiBox-root MuiBox-root-109"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -7674,6 +9491,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -7708,11 +9528,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
     <button
-      className="MuiButtonBase-root c8 RcIconButton-root"
+      className="MuiButtonBase-root c8 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -7742,6 +9565,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -7776,6 +9602,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -7815,7 +9644,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
     <br />
   </div>
   <div
-    className="MuiBox-root MuiBox-root-109"
+    className="MuiBox-root MuiBox-root-110"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -7865,6 +9694,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -7899,11 +9731,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
     <button
-      className="MuiButtonBase-root c13 RcIconButton-root"
+      className="MuiButtonBase-root c13 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -7933,6 +9768,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -7967,6 +9805,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8006,7 +9847,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
     <br />
   </div>
   <div
-    className="MuiBox-root MuiBox-root-110"
+    className="MuiBox-root MuiBox-root-111"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -8056,6 +9897,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8090,11 +9934,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
     <button
-      className="MuiButtonBase-root c18 RcIconButton-root"
+      className="MuiButtonBase-root c18 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -8124,6 +9971,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8158,6 +10008,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8197,7 +10050,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
     <br />
   </div>
   <div
-    className="MuiBox-root MuiBox-root-111"
+    className="MuiBox-root MuiBox-root-112"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -8247,6 +10100,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8281,11 +10137,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
     <button
-      className="MuiButtonBase-root c23 RcIconButton-root"
+      className="MuiButtonBase-root c23 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -8315,6 +10174,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8349,6 +10211,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8388,7 +10253,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
     <br />
   </div>
   <div
-    className="MuiBox-root MuiBox-root-112"
+    className="MuiBox-root MuiBox-root-113"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -8438,6 +10303,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8472,11 +10340,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
     <button
-      className="MuiButtonBase-root c28 RcIconButton-root"
+      className="MuiButtonBase-root c28 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -8506,6 +10377,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8540,6 +10414,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8579,7 +10456,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
     <br />
   </div>
   <div
-    className="MuiBox-root MuiBox-root-113"
+    className="MuiBox-root MuiBox-root-114"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -8629,6 +10506,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8663,11 +10543,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
     <button
-      className="MuiButtonBase-root c33 RcIconButton-root"
+      className="MuiButtonBase-root c33 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -8697,6 +10580,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8731,6 +10617,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8770,7 +10659,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
     <br />
   </div>
   <div
-    className="MuiBox-root MuiBox-root-114"
+    className="MuiBox-root MuiBox-root-115"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -8820,6 +10709,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8854,11 +10746,14 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
     <button
-      className="MuiButtonBase-root c38 RcIconButton-root"
+      className="MuiButtonBase-root c38 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -8888,6 +10783,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -8922,6 +10820,9 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
     <br />
     <br />
@@ -9051,9 +10952,21 @@ Array [
   background-color: #FF8800;
 }
 
-.c0.RcIconButton-contained.focus-visible,
-.c0.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c0.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c0.RcIconButton-contained.focus-visible:before,
+.c0.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c0.RcIconButton-contained.focus-visible,
@@ -9063,10 +10976,6 @@ Array [
   color: rgba(0,0,0,0.87);
 }
 
-.c0.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c0.RcIconButton-contained:active,
 .c0.RcIconButton-contained:active .c1 {
   color: rgba(0,0,0,0.87);
@@ -9125,8 +11034,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c0.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c0.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c0.RcIconButton-contained:hover,
@@ -9302,9 +11211,21 @@ Array [
   background-color: #FF8800;
 }
 
-.c0.RcIconButton-contained.focus-visible,
-.c0.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,136,0,0.84);
+.c0.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c0.RcIconButton-contained.focus-visible:before,
+.c0.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c0.RcIconButton-contained.focus-visible,
@@ -9314,10 +11235,6 @@ Array [
   color: rgba(0,0,0,0.87);
 }
 
-.c0.RcIconButton-contained:active {
-  background-color: rgba(255,136,0,0.76);
-}
-
 .c0.RcIconButton-contained:active,
 .c0.RcIconButton-contained:active .c1 {
   color: rgba(0,0,0,0.87);
@@ -9356,8 +11273,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c0.RcIconButton-contained:hover {
-    background-color: rgba(255,136,0,0.92);
+  .c0.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c0.RcIconButton-contained:hover,
@@ -9497,9 +11414,21 @@ Array [
   background-color: #666666;
 }
 
-.c1.RcIconButton-contained.focus-visible,
-.c1.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c1.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c1.RcIconButton-contained.focus-visible:before,
+.c1.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c1.RcIconButton-contained.focus-visible,
@@ -9509,10 +11438,6 @@ Array [
   color: #fff;
 }
 
-.c1.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c1.RcIconButton-contained:active,
 .c1.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -9601,9 +11526,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -9613,10 +11550,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -9705,9 +11638,21 @@ Array [
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -9717,10 +11662,6 @@ Array [
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -9809,9 +11750,21 @@ Array [
   background-color: #666666;
 }
 
-.c7.RcIconButton-contained.focus-visible,
-.c7.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c7.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c7.RcIconButton-contained.focus-visible:before,
+.c7.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c7.RcIconButton-contained.focus-visible,
@@ -9821,10 +11774,6 @@ Array [
   color: #fff;
 }
 
-.c7.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c7.RcIconButton-contained:active,
 .c7.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -9913,9 +11862,21 @@ Array [
   background-color: #666666;
 }
 
-.c8.RcIconButton-contained.focus-visible,
-.c8.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c8.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c8.RcIconButton-contained.focus-visible:before,
+.c8.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c8.RcIconButton-contained.focus-visible,
@@ -9925,10 +11886,6 @@ Array [
   color: #fff;
 }
 
-.c8.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c8.RcIconButton-contained:active,
 .c8.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -10017,9 +11974,21 @@ Array [
   background-color: #666666;
 }
 
-.c9.RcIconButton-contained.focus-visible,
-.c9.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c9.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c9.RcIconButton-contained.focus-visible:before,
+.c9.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c9.RcIconButton-contained.focus-visible,
@@ -10029,10 +11998,6 @@ Array [
   color: #fff;
 }
 
-.c9.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c9.RcIconButton-contained:active,
 .c9.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -10121,9 +12086,21 @@ Array [
   background-color: #666666;
 }
 
-.c10.RcIconButton-contained.focus-visible,
-.c10.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c10.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c10.RcIconButton-contained.focus-visible:before,
+.c10.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c10.RcIconButton-contained.focus-visible,
@@ -10133,10 +12110,6 @@ Array [
   color: #fff;
 }
 
-.c10.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c10.RcIconButton-contained:active,
 .c10.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -10225,9 +12198,21 @@ Array [
   background-color: #666666;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -10237,10 +12222,6 @@ Array [
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -10329,9 +12310,21 @@ Array [
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -10341,10 +12334,6 @@ Array [
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -10433,9 +12422,21 @@ Array [
   background-color: #666666;
 }
 
-.c13.RcIconButton-contained.focus-visible,
-.c13.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c13.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c13.RcIconButton-contained.focus-visible:before,
+.c13.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c13.RcIconButton-contained.focus-visible,
@@ -10445,10 +12446,6 @@ Array [
   color: #fff;
 }
 
-.c13.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c13.RcIconButton-contained:active,
 .c13.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -10537,9 +12534,21 @@ Array [
   background-color: #666666;
 }
 
-.c14.RcIconButton-contained.focus-visible,
-.c14.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c14.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c14.RcIconButton-contained.focus-visible:before,
+.c14.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c14.RcIconButton-contained.focus-visible,
@@ -10549,10 +12558,6 @@ Array [
   color: #fff;
 }
 
-.c14.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c14.RcIconButton-contained:active,
 .c14.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -10641,9 +12646,21 @@ Array [
   background-color: #666666;
 }
 
-.c15.RcIconButton-contained.focus-visible,
-.c15.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c15.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c15.RcIconButton-contained.focus-visible:before,
+.c15.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c15.RcIconButton-contained.focus-visible,
@@ -10653,10 +12670,6 @@ Array [
   color: #fff;
 }
 
-.c15.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c15.RcIconButton-contained:active,
 .c15.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -10745,9 +12758,21 @@ Array [
   background-color: #666666;
 }
 
-.c16.RcIconButton-contained.focus-visible,
-.c16.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c16.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c16.RcIconButton-contained.focus-visible:before,
+.c16.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c16.RcIconButton-contained.focus-visible,
@@ -10757,10 +12782,6 @@ Array [
   color: #fff;
 }
 
-.c16.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c16.RcIconButton-contained:active,
 .c16.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -10849,9 +12870,21 @@ Array [
   background-color: #666666;
 }
 
-.c17.RcIconButton-contained.focus-visible,
-.c17.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c17.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c17.RcIconButton-contained.focus-visible:before,
+.c17.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c17.RcIconButton-contained.focus-visible,
@@ -10861,10 +12894,6 @@ Array [
   color: #fff;
 }
 
-.c17.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c17.RcIconButton-contained:active,
 .c17.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -10953,9 +12982,21 @@ Array [
   background-color: #666666;
 }
 
-.c18.RcIconButton-contained.focus-visible,
-.c18.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c18.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c18.RcIconButton-contained.focus-visible:before,
+.c18.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c18.RcIconButton-contained.focus-visible,
@@ -10965,10 +13006,6 @@ Array [
   color: #fff;
 }
 
-.c18.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c18.RcIconButton-contained:active,
 .c18.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -11057,9 +13094,21 @@ Array [
   background-color: #666666;
 }
 
-.c19.RcIconButton-contained.focus-visible,
-.c19.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c19.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c19.RcIconButton-contained.focus-visible:before,
+.c19.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c19.RcIconButton-contained.focus-visible,
@@ -11069,10 +13118,6 @@ Array [
   color: #fff;
 }
 
-.c19.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c19.RcIconButton-contained:active,
 .c19.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -11161,9 +13206,21 @@ Array [
   background-color: #666666;
 }
 
-.c20.RcIconButton-contained.focus-visible,
-.c20.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c20.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c20.RcIconButton-contained.focus-visible:before,
+.c20.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c20.RcIconButton-contained.focus-visible,
@@ -11173,10 +13230,6 @@ Array [
   color: #fff;
 }
 
-.c20.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c20.RcIconButton-contained:active,
 .c20.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -11265,9 +13318,21 @@ Array [
   background-color: #666666;
 }
 
-.c21.RcIconButton-contained.focus-visible,
-.c21.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c21.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c21.RcIconButton-contained.focus-visible:before,
+.c21.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c21.RcIconButton-contained.focus-visible,
@@ -11277,10 +13342,6 @@ Array [
   color: #fff;
 }
 
-.c21.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c21.RcIconButton-contained:active,
 .c21.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -11369,9 +13430,21 @@ Array [
   background-color: #666666;
 }
 
-.c22.RcIconButton-contained.focus-visible,
-.c22.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c22.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c22.RcIconButton-contained.focus-visible:before,
+.c22.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c22.RcIconButton-contained.focus-visible,
@@ -11381,10 +13454,6 @@ Array [
   color: #fff;
 }
 
-.c22.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c22.RcIconButton-contained:active,
 .c22.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -11473,9 +13542,21 @@ Array [
   background-color: #666666;
 }
 
-.c23.RcIconButton-contained.focus-visible,
-.c23.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c23.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c23.RcIconButton-contained.focus-visible:before,
+.c23.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c23.RcIconButton-contained.focus-visible,
@@ -11485,10 +13566,6 @@ Array [
   color: #fff;
 }
 
-.c23.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c23.RcIconButton-contained:active,
 .c23.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -11577,9 +13654,21 @@ Array [
   background-color: #666666;
 }
 
-.c24.RcIconButton-contained.focus-visible,
-.c24.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c24.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c24.RcIconButton-contained.focus-visible:before,
+.c24.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c24.RcIconButton-contained.focus-visible,
@@ -11589,10 +13678,6 @@ Array [
   color: #fff;
 }
 
-.c24.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c24.RcIconButton-contained:active,
 .c24.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -11681,9 +13766,21 @@ Array [
   background-color: #666666;
 }
 
-.c25.RcIconButton-contained.focus-visible,
-.c25.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c25.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c25.RcIconButton-contained.focus-visible:before,
+.c25.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c25.RcIconButton-contained.focus-visible,
@@ -11693,10 +13790,6 @@ Array [
   color: #fff;
 }
 
-.c25.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c25.RcIconButton-contained:active,
 .c25.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -11785,9 +13878,21 @@ Array [
   background-color: #666666;
 }
 
-.c26.RcIconButton-contained.focus-visible,
-.c26.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c26.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c26.RcIconButton-contained.focus-visible:before,
+.c26.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c26.RcIconButton-contained.focus-visible,
@@ -11797,10 +13902,6 @@ Array [
   color: #fff;
 }
 
-.c26.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c26.RcIconButton-contained:active,
 .c26.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -11889,9 +13990,21 @@ Array [
   background-color: #666666;
 }
 
-.c27.RcIconButton-contained.focus-visible,
-.c27.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c27.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c27.RcIconButton-contained.focus-visible:before,
+.c27.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c27.RcIconButton-contained.focus-visible,
@@ -11901,10 +14014,6 @@ Array [
   color: #fff;
 }
 
-.c27.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c27.RcIconButton-contained:active,
 .c27.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -11993,9 +14102,21 @@ Array [
   background-color: #666666;
 }
 
-.c28.RcIconButton-contained.focus-visible,
-.c28.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c28.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c28.RcIconButton-contained.focus-visible:before,
+.c28.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c28.RcIconButton-contained.focus-visible,
@@ -12005,10 +14126,6 @@ Array [
   color: #fff;
 }
 
-.c28.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c28.RcIconButton-contained:active,
 .c28.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -12075,8 +14192,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c1.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c1.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c1.RcIconButton-contained:hover,
@@ -12097,8 +14214,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -12119,8 +14236,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -12141,8 +14258,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c7.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c7.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c7.RcIconButton-contained:hover,
@@ -12163,8 +14280,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c8.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c8.RcIconButton-contained:hover,
@@ -12185,8 +14302,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c9.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c9.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c9.RcIconButton-contained:hover,
@@ -12207,8 +14324,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c10.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c10.RcIconButton-contained:hover,
@@ -12229,8 +14346,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -12251,8 +14368,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -12273,8 +14390,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c13.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c13.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c13.RcIconButton-contained:hover,
@@ -12295,8 +14412,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c14.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c14.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c14.RcIconButton-contained:hover,
@@ -12317,8 +14434,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c15.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c15.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c15.RcIconButton-contained:hover,
@@ -12339,8 +14456,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c16.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c16.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c16.RcIconButton-contained:hover,
@@ -12361,8 +14478,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c17.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c17.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c17.RcIconButton-contained:hover,
@@ -12383,8 +14500,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c18.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c18.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c18.RcIconButton-contained:hover,
@@ -12405,8 +14522,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c19.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c19.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c19.RcIconButton-contained:hover,
@@ -12427,8 +14544,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c20.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c20.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c20.RcIconButton-contained:hover,
@@ -12449,8 +14566,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c21.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c21.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c21.RcIconButton-contained:hover,
@@ -12471,8 +14588,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c22.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c22.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c22.RcIconButton-contained:hover,
@@ -12493,8 +14610,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c23.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c23.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c23.RcIconButton-contained:hover,
@@ -12515,8 +14632,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c24.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c24.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c24.RcIconButton-contained:hover,
@@ -12537,8 +14654,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c25.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c25.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c25.RcIconButton-contained:hover,
@@ -12559,8 +14676,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c26.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c26.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c26.RcIconButton-contained:hover,
@@ -12581,8 +14698,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c27.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c27.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c27.RcIconButton-contained:hover,
@@ -12603,8 +14720,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c28.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c28.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c28.RcIconButton-contained:hover,
@@ -12628,10 +14745,10 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-71"
+    className="MuiBox-root MuiBox-root-72"
   >
     <div
-      className="MuiBox-root MuiBox-root-72"
+      className="MuiBox-root MuiBox-root-73"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -12671,10 +14788,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-73"
+      className="MuiBox-root MuiBox-root-74"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -12714,10 +14834,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-74"
+      className="MuiBox-root MuiBox-root-75"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -12757,10 +14880,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-75"
+      className="MuiBox-root MuiBox-root-76"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -12800,10 +14926,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-76"
+      className="MuiBox-root MuiBox-root-77"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -12843,10 +14972,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-77"
+      className="MuiBox-root MuiBox-root-78"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -12886,10 +15018,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-78"
+      className="MuiBox-root MuiBox-root-79"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -12929,10 +15064,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-79"
+      className="MuiBox-root MuiBox-root-80"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -12972,10 +15110,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-80"
+      className="MuiBox-root MuiBox-root-81"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13015,10 +15156,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-81"
+      className="MuiBox-root MuiBox-root-82"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13058,10 +15202,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-82"
+      className="MuiBox-root MuiBox-root-83"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13101,10 +15248,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-83"
+      className="MuiBox-root MuiBox-root-84"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13144,10 +15294,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-84"
+      className="MuiBox-root MuiBox-root-85"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13187,10 +15340,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-85"
+      className="MuiBox-root MuiBox-root-86"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13230,10 +15386,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-86"
+      className="MuiBox-root MuiBox-root-87"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13273,10 +15432,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-87"
+      className="MuiBox-root MuiBox-root-88"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13316,10 +15478,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-88"
+      className="MuiBox-root MuiBox-root-89"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13359,10 +15524,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-89"
+      className="MuiBox-root MuiBox-root-90"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13402,10 +15570,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-90"
+      className="MuiBox-root MuiBox-root-91"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13445,10 +15616,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-91"
+      className="MuiBox-root MuiBox-root-92"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13488,10 +15662,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-92"
+      className="MuiBox-root MuiBox-root-93"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13531,10 +15708,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-93"
+      className="MuiBox-root MuiBox-root-94"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13574,10 +15754,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-94"
+      className="MuiBox-root MuiBox-root-95"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13617,10 +15800,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-95"
+      className="MuiBox-root MuiBox-root-96"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13660,10 +15846,13 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-96"
+      className="MuiBox-root MuiBox-root-97"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -13703,6 +15892,9 @@ Array [
           </svg>
           
         </span>
+        <span
+          className="MuiTouchRipple-root"
+        />
       </button>
     </div>
   </div>,
@@ -15068,9 +17260,21 @@ Array [
   background-color: #666666;
 }
 
-.c1.RcIconButton-contained.focus-visible,
-.c1.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c1.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c1.RcIconButton-contained.focus-visible:before,
+.c1.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c1.RcIconButton-contained.focus-visible,
@@ -15080,10 +17284,6 @@ Array [
   color: #fff;
 }
 
-.c1.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c1.RcIconButton-contained:active,
 .c1.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -15466,8 +17666,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c1.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c1.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c1.RcIconButton-contained:hover,
@@ -15477,7 +17677,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-97"
+    className="MuiBox-root MuiBox-root-98"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -15517,6 +17717,9 @@ Array [
         </svg>
         
       </span>
+      <span
+        className="MuiTouchRipple-root"
+      />
     </button>
   </div>,
 ]
diff --git a/packages/juno-core/src/components/Buttons/IconButtonGroup/__stories__/__snapshots__/IconButtonGroup.story.tsx.snap b/packages/juno-core/src/components/Buttons/IconButtonGroup/__stories__/__snapshots__/IconButtonGroup.story.tsx.snap
index 1477b079..4f4890ef 100644
--- a/packages/juno-core/src/components/Buttons/IconButtonGroup/__stories__/__snapshots__/IconButtonGroup.story.tsx.snap
+++ b/packages/juno-core/src/components/Buttons/IconButtonGroup/__stories__/__snapshots__/IconButtonGroup.story.tsx.snap
@@ -101,9 +101,21 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -113,10 +125,6 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c3 {
   color: #fff;
@@ -173,8 +181,8 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -441,9 +449,21 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -453,10 +473,6 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -538,9 +554,21 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
   background-color: #666666;
 }
 
-.c8.RcIconButton-contained.focus-visible,
-.c8.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c8.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c8.RcIconButton-contained.focus-visible:before,
+.c8.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c8.RcIconButton-contained.focus-visible,
@@ -550,10 +578,6 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
   color: #fff;
 }
 
-.c8.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c8.RcIconButton-contained:active,
 .c8.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -640,9 +664,21 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
   background-color: #666666;
 }
 
-.c9.RcIconButton-contained.focus-visible,
-.c9.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c9.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c9.RcIconButton-contained.focus-visible:before,
+.c9.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c9.RcIconButton-contained.focus-visible,
@@ -652,10 +688,6 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
   color: #fff;
 }
 
-.c9.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c9.RcIconButton-contained:active,
 .c9.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -737,9 +769,21 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
   background-color: #666666;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 4px;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -749,10 +793,6 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -875,8 +915,8 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -897,8 +937,8 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c8.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c8.RcIconButton-contained:hover,
@@ -919,8 +959,8 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c9.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c9.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c9.RcIconButton-contained:hover,
@@ -941,8 +981,8 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -1303,7 +1343,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
     <button
       aria-describedby={null}
       aria-label="like"
-      className="MuiButtonBase-root c9 RcIconButton-root"
+      className="MuiButtonBase-root c9 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -1342,7 +1382,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
     <button
       aria-describedby={null}
       aria-label="like"
-      className="MuiButtonBase-root c9 RcIconButton-root"
+      className="MuiButtonBase-root c9 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -1381,7 +1421,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
     <button
       aria-describedby={null}
       aria-label="like"
-      className="MuiButtonBase-root c9 RcIconButton-root"
+      className="MuiButtonBase-root c9 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
@@ -1420,7 +1460,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons/IconButtonGroup IconButtonGr
     <button
       aria-describedby={null}
       aria-label="like"
-      className="MuiButtonBase-root c9 RcIconButton-root"
+      className="MuiButtonBase-root c9 RcIconButton-root RcIconButton-inverse"
       disabled={false}
       onBlur={[Function]}
       onDragLeave={[Function]}
diff --git a/packages/juno-core/src/components/Card/Card/__stories__/__snapshots__/Card.story.tsx.snap b/packages/juno-core/src/components/Card/Card/__stories__/__snapshots__/Card.story.tsx.snap
index 04acc059..6bb7a2e1 100644
--- a/packages/juno-core/src/components/Card/Card/__stories__/__snapshots__/Card.story.tsx.snap
+++ b/packages/juno-core/src/components/Card/Card/__stories__/__snapshots__/Card.story.tsx.snap
@@ -897,12 +897,12 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
         </h6>
       </a>
       <div
-        className="MuiBox-root MuiBox-root-115"
+        className="MuiBox-root MuiBox-root-116"
       />
       <div>
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-116 MuiCheckbox-root RcCheckbox-root c14"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-117 MuiCheckbox-root RcCheckbox-root c14"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -920,7 +920,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-119"
+              className="PrivateSwitchBase-input-120"
               data-indeterminate={false}
               onChange={[Function]}
               type="checkbox"
@@ -1139,7 +1139,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
         display="flex"
       >
         <div
-          className="MuiBox-root MuiBox-root-120"
+          className="MuiBox-root MuiBox-root-121"
         >
           <div
             className="MuiTypography-root c11"
@@ -1157,14 +1157,14 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
           </p>
         </div>
         <div
-          className="MuiBox-root MuiBox-root-121"
+          className="MuiBox-root MuiBox-root-122"
         >
           <span
             className="MuiSwitch-root RcSwitch-root c26 c27"
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-116 MuiSwitch-switchBase RcSwitch-switchBase PrivateSwitchBase-checked-117 Mui-checked RcSwitch-checked"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-117 MuiSwitch-switchBase RcSwitch-switchBase PrivateSwitchBase-checked-118 Mui-checked RcSwitch-checked"
               onBlur={[Function]}
               onDragLeave={[Function]}
               onFocus={[Function]}
@@ -1182,7 +1182,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
                 className="MuiIconButton-label"
               >
                 <input
-                  className="PrivateSwitchBase-input-119 MuiSwitch-input"
+                  className="PrivateSwitchBase-input-120 MuiSwitch-input"
                   defaultChecked={true}
                   onChange={[Function]}
                   type="checkbox"
@@ -1207,7 +1207,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
         display="flex"
       >
         <div
-          className="MuiBox-root MuiBox-root-122"
+          className="MuiBox-root MuiBox-root-123"
         >
           <div
             className="MuiTypography-root c11"
@@ -1225,7 +1225,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
           </p>
         </div>
         <div
-          className="MuiBox-root MuiBox-root-123"
+          className="MuiBox-root MuiBox-root-124"
         >
           <div
             className="MuiFormControl-root MuiTextField-root RcTextField-root c30 c31"
@@ -1288,7 +1288,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
         display="flex"
       >
         <div
-          className="MuiBox-root MuiBox-root-124"
+          className="MuiBox-root MuiBox-root-125"
         >
           <div
             className="MuiTypography-root c11"
@@ -1306,14 +1306,14 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
           </p>
         </div>
         <div
-          className="MuiBox-root MuiBox-root-125"
+          className="MuiBox-root MuiBox-root-126"
         >
           <span
             className="MuiSwitch-root RcSwitch-root c26 c27"
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-116 MuiSwitch-switchBase RcSwitch-switchBase PrivateSwitchBase-checked-117 Mui-checked RcSwitch-checked"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-117 MuiSwitch-switchBase RcSwitch-switchBase PrivateSwitchBase-checked-118 Mui-checked RcSwitch-checked"
               onBlur={[Function]}
               onDragLeave={[Function]}
               onFocus={[Function]}
@@ -1331,7 +1331,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
                 className="MuiIconButton-label"
               >
                 <input
-                  className="PrivateSwitchBase-input-119 MuiSwitch-input"
+                  className="PrivateSwitchBase-input-120 MuiSwitch-input"
                   defaultChecked={true}
                   onChange={[Function]}
                   type="checkbox"
@@ -1356,7 +1356,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
         display="flex"
       >
         <div
-          className="MuiBox-root MuiBox-root-126"
+          className="MuiBox-root MuiBox-root-127"
         >
           <div
             className="MuiTypography-root c11"
@@ -1374,14 +1374,14 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
           </p>
         </div>
         <div
-          className="MuiBox-root MuiBox-root-127"
+          className="MuiBox-root MuiBox-root-128"
         >
           <span
             className="MuiSwitch-root RcSwitch-root c26 c27"
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-116 MuiSwitch-switchBase RcSwitch-switchBase"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-117 MuiSwitch-switchBase RcSwitch-switchBase"
               onBlur={[Function]}
               onDragLeave={[Function]}
               onFocus={[Function]}
@@ -1399,7 +1399,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
                 className="MuiIconButton-label"
               >
                 <input
-                  className="PrivateSwitchBase-input-119 MuiSwitch-input"
+                  className="PrivateSwitchBase-input-120 MuiSwitch-input"
                   onChange={[Function]}
                   type="checkbox"
                 />
diff --git a/packages/juno-core/src/components/Card/CardHeader/__stories__/__snapshots__/CardHeader.story.tsx.snap b/packages/juno-core/src/components/Card/CardHeader/__stories__/__snapshots__/CardHeader.story.tsx.snap
index 33d8b9bf..edfb05ad 100644
--- a/packages/juno-core/src/components/Card/CardHeader/__stories__/__snapshots__/CardHeader.story.tsx.snap
+++ b/packages/juno-core/src/components/Card/CardHeader/__stories__/__snapshots__/CardHeader.story.tsx.snap
@@ -87,9 +87,21 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardHeader CardHeader 1`] = `
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -99,10 +111,6 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardHeader CardHeader 1`] = `
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -182,8 +190,8 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardHeader CardHeader 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Card/CardHoverActions/__stories__/__snapshots__/CardHoverActions.story.tsx.snap b/packages/juno-core/src/components/Card/CardHoverActions/__stories__/__snapshots__/CardHoverActions.story.tsx.snap
index 6a64a102..4027388f 100644
--- a/packages/juno-core/src/components/Card/CardHoverActions/__stories__/__snapshots__/CardHoverActions.story.tsx.snap
+++ b/packages/juno-core/src/components/Card/CardHoverActions/__stories__/__snapshots__/CardHoverActions.story.tsx.snap
@@ -94,9 +94,21 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardHoverActions CardHoverActi
   background-color: #FFFFFF;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,255,255,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -106,10 +118,6 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardHoverActions CardHoverActi
   color: rgba(0,0,0,0.87);
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(255,255,255,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c3 {
   color: rgba(0,0,0,0.87);
@@ -166,8 +174,8 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardHoverActions CardHoverActi
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(255,255,255,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Card/CardSelectionArea/__stories__/__snapshots__/CardSelectionArea.story.tsx.snap b/packages/juno-core/src/components/Card/CardSelectionArea/__stories__/__snapshots__/CardSelectionArea.story.tsx.snap
index 8f8a64d4..b71131fa 100644
--- a/packages/juno-core/src/components/Card/CardSelectionArea/__stories__/__snapshots__/CardSelectionArea.story.tsx.snap
+++ b/packages/juno-core/src/components/Card/CardSelectionArea/__stories__/__snapshots__/CardSelectionArea.story.tsx.snap
@@ -88,7 +88,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardSelectionArea CardSelectio
 >
   <span
     aria-disabled={false}
-    className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-128 MuiCheckbox-root RcCardSelectionArea-root MuiCheckbox-colorSecondary c1 MuiIconButton-colorSecondary"
+    className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-129 MuiCheckbox-root RcCardSelectionArea-root MuiCheckbox-colorSecondary c1 MuiIconButton-colorSecondary"
     onBlur={[Function]}
     onDragLeave={[Function]}
     onFocus={[Function]}
@@ -106,7 +106,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardSelectionArea CardSelectio
       className="MuiIconButton-label"
     >
       <input
-        className="PrivateSwitchBase-input-131"
+        className="PrivateSwitchBase-input-132"
         data-indeterminate={false}
         disabled={false}
         onChange={[Function]}
diff --git a/packages/juno-core/src/components/Card/__stories__/__snapshots__/CardExample.story.tsx.snap b/packages/juno-core/src/components/Card/__stories__/__snapshots__/CardExample.story.tsx.snap
index c3632c60..d294e757 100644
--- a/packages/juno-core/src/components/Card/__stories__/__snapshots__/CardExample.story.tsx.snap
+++ b/packages/juno-core/src/components/Card/__stories__/__snapshots__/CardExample.story.tsx.snap
@@ -480,9 +480,21 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardExample Icon Card Example
   background-color: #FFFFFF;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,255,255,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -492,10 +504,6 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardExample Icon Card Example
   color: rgba(0,0,0,0.87);
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(255,255,255,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c7 {
   color: rgba(0,0,0,0.87);
@@ -686,8 +694,8 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardExample Icon Card Example
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(255,255,255,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -1033,9 +1041,21 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardExample Media Card Example
   background-color: #FFFFFF;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,255,255,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -1045,10 +1065,6 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardExample Media Card Example
   color: rgba(0,0,0,0.87);
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(255,255,255,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c7 {
   color: rgba(0,0,0,0.87);
@@ -1234,8 +1250,8 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/CardExample Media Card Example
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(255,255,255,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Chip/__stories__/__snapshots__/Chip.story.tsx.snap b/packages/juno-core/src/components/Chip/__stories__/__snapshots__/Chip.story.tsx.snap
index 7acc2361..f68bcdd4 100644
--- a/packages/juno-core/src/components/Chip/__stories__/__snapshots__/Chip.story.tsx.snap
+++ b/packages/juno-core/src/components/Chip/__stories__/__snapshots__/Chip.story.tsx.snap
@@ -342,9 +342,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -354,10 +366,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c3 {
   color: #fff;
@@ -453,9 +461,21 @@ Array [
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -465,10 +485,6 @@ Array [
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c3 {
   color: #fff;
@@ -564,9 +580,21 @@ Array [
   background-color: #BE3933;
 }
 
-.c8.RcIconButton-contained.focus-visible,
-.c8.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(190,57,51,0.84);
+.c8.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c8.RcIconButton-contained.focus-visible:before,
+.c8.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c8.RcIconButton-contained.focus-visible,
@@ -576,10 +604,6 @@ Array [
   color: #fff;
 }
 
-.c8.RcIconButton-contained:active {
-  background-color: rgba(190,57,51,0.76);
-}
-
 .c8.RcIconButton-contained:active,
 .c8.RcIconButton-contained:active .c3 {
   color: #fff;
@@ -951,8 +975,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -973,8 +997,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -995,8 +1019,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8.RcIconButton-contained:hover {
-    background-color: rgba(190,57,51,0.92);
+  .c8.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c8.RcIconButton-contained:hover,
@@ -1864,9 +1888,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -1876,10 +1912,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c3 {
   color: #fff;
@@ -1975,9 +2007,21 @@ Array [
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -1987,10 +2031,6 @@ Array [
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c3 {
   color: #fff;
@@ -2086,9 +2126,21 @@ Array [
   background-color: #BE3933;
 }
 
-.c8.RcIconButton-contained.focus-visible,
-.c8.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(190,57,51,0.84);
+.c8.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c8.RcIconButton-contained.focus-visible:before,
+.c8.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c8.RcIconButton-contained.focus-visible,
@@ -2098,10 +2150,6 @@ Array [
   color: #fff;
 }
 
-.c8.RcIconButton-contained:active {
-  background-color: rgba(190,57,51,0.76);
-}
-
 .c8.RcIconButton-contained:active,
 .c8.RcIconButton-contained:active .c3 {
   color: #fff;
@@ -2665,8 +2713,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -2687,8 +2735,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -2709,8 +2757,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8.RcIconButton-contained:hover {
-    background-color: rgba(190,57,51,0.92);
+  .c8.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c8.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Dialer/DialDelete/__stories__/__snapshots__/DialDelete.story.tsx.snap b/packages/juno-core/src/components/Dialer/DialDelete/__stories__/__snapshots__/DialDelete.story.tsx.snap
index 28481476..ec90dc5b 100644
--- a/packages/juno-core/src/components/Dialer/DialDelete/__stories__/__snapshots__/DialDelete.story.tsx.snap
+++ b/packages/juno-core/src/components/Dialer/DialDelete/__stories__/__snapshots__/DialDelete.story.tsx.snap
@@ -101,9 +101,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer/DialDelete DialDelete 1`] = `
   background-color: #666666;
 }
 
-.c0.RcIconButton-contained.focus-visible,
-.c0.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c0.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c0.RcIconButton-contained.focus-visible:before,
+.c0.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c0.RcIconButton-contained.focus-visible,
@@ -113,10 +125,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer/DialDelete DialDelete 1`] = `
   color: #fff;
 }
 
-.c0.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c0.RcIconButton-contained:active,
 .c0.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -141,8 +149,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer/DialDelete DialDelete 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c0.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c0.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c0.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Dialer/DialPad/__stories__/__snapshots__/DialPad.story.tsx.snap b/packages/juno-core/src/components/Dialer/DialPad/__stories__/__snapshots__/DialPad.story.tsx.snap
index e71e8746..a314a533 100644
--- a/packages/juno-core/src/components/Dialer/DialPad/__stories__/__snapshots__/DialPad.story.tsx.snap
+++ b/packages/juno-core/src/components/Dialer/DialPad/__stories__/__snapshots__/DialPad.story.tsx.snap
@@ -87,9 +87,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer/DialPad DialPad 1`] = `
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -99,10 +111,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer/DialPad DialPad 1`] = `
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -187,8 +195,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer/DialPad DialPad 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Dialer/__stories__/__snapshots__/Dialer.story.tsx.snap b/packages/juno-core/src/components/Dialer/__stories__/__snapshots__/Dialer.story.tsx.snap
index 47fabb98..3de7d2d7 100644
--- a/packages/juno-core/src/components/Dialer/__stories__/__snapshots__/Dialer.story.tsx.snap
+++ b/packages/juno-core/src/components/Dialer/__stories__/__snapshots__/Dialer.story.tsx.snap
@@ -87,9 +87,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer 1`] = `
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -99,10 +111,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer 1`] = `
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -317,8 +325,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -976,9 +984,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
   background-color: #FFFFFF;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,255,255,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -988,10 +1008,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
   color: rgba(0,0,0,0.87);
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(255,255,255,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c7 {
   color: rgba(0,0,0,0.87);
@@ -1073,9 +1089,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
   background-color: #666666;
 }
 
-.c22.RcIconButton-contained.focus-visible,
-.c22.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c22.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c22.RcIconButton-contained.focus-visible:before,
+.c22.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c22.RcIconButton-contained.focus-visible,
@@ -1085,10 +1113,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
   color: #fff;
 }
 
-.c22.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c22.RcIconButton-contained:active,
 .c22.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -1177,9 +1201,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
   background-color: #3C9949;
 }
 
-.c25.RcIconButton-contained.focus-visible,
-.c25.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(60,153,73,0.84);
+.c25.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c25.RcIconButton-contained.focus-visible:before,
+.c25.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c25.RcIconButton-contained.focus-visible,
@@ -1189,10 +1225,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
   color: #fff;
 }
 
-.c25.RcIconButton-contained:active {
-  background-color: rgba(60,153,73,0.76);
-}
-
 .c25.RcIconButton-contained:active,
 .c25.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -1281,9 +1313,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
   background-color: #FFFFFF;
 }
 
-.c26.RcIconButton-contained.focus-visible,
-.c26.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(255,255,255,0.84);
+.c26.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c26.RcIconButton-contained.focus-visible:before,
+.c26.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c26.RcIconButton-contained.focus-visible,
@@ -1293,10 +1337,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
   color: rgba(0,0,0,0.87);
 }
 
-.c26.RcIconButton-contained:active {
-  background-color: rgba(255,255,255,0.76);
-}
-
 .c26.RcIconButton-contained:active,
 .c26.RcIconButton-contained:active .c7 {
   color: rgba(0,0,0,0.87);
@@ -1948,8 +1988,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(255,255,255,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -1970,8 +2010,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c22.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c22.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c22.RcIconButton-contained:hover,
@@ -1992,8 +2032,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c25.RcIconButton-contained:hover {
-    background-color: rgba(60,153,73,0.92);
+  .c25.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c25.RcIconButton-contained:hover,
@@ -2014,8 +2054,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c26.RcIconButton-contained:hover {
-    background-color: rgba(255,255,255,0.92);
+  .c26.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c26.RcIconButton-contained:hover,
@@ -2058,7 +2098,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
         New Call
       </p>
       <div
-        className="MuiBox-root MuiBox-root-132"
+        className="MuiBox-root MuiBox-root-133"
       />
       <button
         className="MuiButtonBase-root c5 c6 RcIconButton-root"
@@ -2919,9 +2959,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
   background-color: #666666;
 }
 
-.c7.RcIconButton-contained.focus-visible,
-.c7.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c7.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c7.RcIconButton-contained.focus-visible:before,
+.c7.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c7.RcIconButton-contained.focus-visible,
@@ -2931,10 +2983,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
   color: #fff;
 }
 
-.c7.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c7.RcIconButton-contained:active,
 .c7.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -3016,9 +3064,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
   background-color: #666666;
 }
 
-.c15.RcIconButton-contained.focus-visible,
-.c15.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c15.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c15.RcIconButton-contained.focus-visible:before,
+.c15.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c15.RcIconButton-contained.focus-visible,
@@ -3028,10 +3088,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
   color: #fff;
 }
 
-.c15.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c15.RcIconButton-contained:active,
 .c15.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -3300,8 +3356,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c7.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c7.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c7.RcIconButton-contained:hover,
@@ -3322,8 +3378,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c15.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c15.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c15.RcIconButton-contained:hover,
@@ -3339,7 +3395,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
 }
 
 <div
-  className="MuiBox-root MuiBox-root-133"
+  className="MuiBox-root MuiBox-root-134"
 >
   <div
     className="c0"
@@ -3976,7 +4032,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
     </div>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-134"
+    className="MuiBox-root MuiBox-root-135"
     style={
       Object {
         "overflowX": "hidden",
diff --git a/packages/juno-core/src/components/Dialog/DialogTitle/__stories__/__snapshots__/DialogTitle.story.tsx.snap b/packages/juno-core/src/components/Dialog/DialogTitle/__stories__/__snapshots__/DialogTitle.story.tsx.snap
index 95d83c38..59666274 100644
--- a/packages/juno-core/src/components/Dialog/DialogTitle/__stories__/__snapshots__/DialogTitle.story.tsx.snap
+++ b/packages/juno-core/src/components/Dialog/DialogTitle/__stories__/__snapshots__/DialogTitle.story.tsx.snap
@@ -113,9 +113,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialog/DialogTitle DialogTitle Examp
   background-color: #F6AD16;
 }
 
-.c7.RcIconButton-contained.focus-visible,
-.c7.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(246,173,22,0.84);
+.c7.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c7.RcIconButton-contained.focus-visible:before,
+.c7.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(0,0,0,0.16);
 }
 
 .c7.RcIconButton-contained.focus-visible,
@@ -125,10 +137,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialog/DialogTitle DialogTitle Examp
   color: rgba(0,0,0,0.87);
 }
 
-.c7.RcIconButton-contained:active {
-  background-color: rgba(246,173,22,0.76);
-}
-
 .c7.RcIconButton-contained:active,
 .c7.RcIconButton-contained:active .c8 {
   color: rgba(0,0,0,0.87);
@@ -210,9 +218,21 @@ exports[`Storyshots 🚀 Cleanup Components/Dialog/DialogTitle DialogTitle Examp
   background-color: #666666;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -222,10 +242,6 @@ exports[`Storyshots 🚀 Cleanup Components/Dialog/DialogTitle DialogTitle Examp
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -357,8 +373,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialog/DialogTitle DialogTitle Examp
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c7.RcIconButton-contained:hover {
-    background-color: rgba(246,173,22,0.92);
+  .c7.RcIconButton-contained:hover:before {
+    background-color: rgba(0,0,0,0.08);
   }
 
   .c7.RcIconButton-contained:hover,
@@ -379,8 +395,8 @@ exports[`Storyshots 🚀 Cleanup Components/Dialog/DialogTitle DialogTitle Examp
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -403,7 +419,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialog/DialogTitle DialogTitle Examp
     </div>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-135"
+    className="MuiBox-root MuiBox-root-136"
   >
     <p
       className="MuiTypography-root c3"
@@ -421,7 +437,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialog/DialogTitle DialogTitle Examp
     </p>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-136"
+    className="MuiBox-root MuiBox-root-137"
   >
     <h2
       className="MuiTypography-root c5"
diff --git a/packages/juno-core/src/components/Dialog/__stories__/__snapshots__/Dialog.story.tsx.snap b/packages/juno-core/src/components/Dialog/__stories__/__snapshots__/Dialog.story.tsx.snap
index b0a6de32..e50ad80c 100644
--- a/packages/juno-core/src/components/Dialog/__stories__/__snapshots__/Dialog.story.tsx.snap
+++ b/packages/juno-core/src/components/Dialog/__stories__/__snapshots__/Dialog.story.tsx.snap
@@ -232,7 +232,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-137 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-138 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -250,7 +250,7 @@ Array [
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-140 MuiSwitch-input"
+            className="PrivateSwitchBase-input-141 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
             value={false}
@@ -373,7 +373,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-137 MuiRadio-root RcRadio-root c1 PrivateSwitchBase-checked-138 Mui-checked RcRadio-checked"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-138 MuiRadio-root RcRadio-root c1 PrivateSwitchBase-checked-139 Mui-checked RcRadio-checked"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -392,13 +392,13 @@ Array [
         >
           <input
             checked={true}
-            className="PrivateSwitchBase-input-140"
+            className="PrivateSwitchBase-input-141"
             onChange={[Function]}
             type="radio"
             value="dialog"
           />
           <div
-            className="PrivateRadioButtonIcon-root-141 RadioButtonIcon-root PrivateRadioButtonIcon-checked-143"
+            className="PrivateRadioButtonIcon-root-142 RadioButtonIcon-root PrivateRadioButtonIcon-checked-144"
           >
             <svg
               aria-hidden={true}
@@ -412,7 +412,7 @@ Array [
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-142"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-143"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -434,7 +434,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-137 MuiRadio-root RcRadio-root c1"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-138 MuiRadio-root RcRadio-root c1"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -453,13 +453,13 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-140"
+            className="PrivateSwitchBase-input-141"
             onChange={[Function]}
             type="radio"
             value="drawer"
           />
           <div
-            className="PrivateRadioButtonIcon-root-141 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-142 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -473,7 +473,7 @@ Array [
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-142"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-143"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -594,7 +594,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-137 MuiRadio-root RcRadio-root c1"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-138 MuiRadio-root RcRadio-root c1"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -613,13 +613,13 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-140"
+            className="PrivateSwitchBase-input-141"
             onChange={[Function]}
             type="radio"
             value="small"
           />
           <div
-            className="PrivateRadioButtonIcon-root-141 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-142 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -633,7 +633,7 @@ Array [
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-142"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-143"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -655,7 +655,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-137 MuiRadio-root RcRadio-root c1 PrivateSwitchBase-checked-138 Mui-checked RcRadio-checked"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-138 MuiRadio-root RcRadio-root c1 PrivateSwitchBase-checked-139 Mui-checked RcRadio-checked"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -674,13 +674,13 @@ Array [
         >
           <input
             checked={true}
-            className="PrivateSwitchBase-input-140"
+            className="PrivateSwitchBase-input-141"
             onChange={[Function]}
             type="radio"
             value="medium"
           />
           <div
-            className="PrivateRadioButtonIcon-root-141 RadioButtonIcon-root PrivateRadioButtonIcon-checked-143"
+            className="PrivateRadioButtonIcon-root-142 RadioButtonIcon-root PrivateRadioButtonIcon-checked-144"
           >
             <svg
               aria-hidden={true}
@@ -694,7 +694,7 @@ Array [
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-142"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-143"
               focusable="false"
               viewBox="0 0 24 24"
             >
diff --git a/packages/juno-core/src/components/Downshift/__stories__/__snapshots__/Downshift.story.tsx.snap b/packages/juno-core/src/components/Downshift/__stories__/__snapshots__/Downshift.story.tsx.snap
index cbf10832..b3bc4102 100644
--- a/packages/juno-core/src/components/Downshift/__stories__/__snapshots__/Downshift.story.tsx.snap
+++ b/packages/juno-core/src/components/Downshift/__stories__/__snapshots__/Downshift.story.tsx.snap
@@ -101,9 +101,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift 1`] = `
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -113,10 +125,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift 1`] = `
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -212,9 +220,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift 1`] = `
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -224,10 +244,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift 1`] = `
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -443,8 +459,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -465,8 +481,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -532,7 +548,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift 1`] = `
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-144"
+        className="MuiBox-root MuiBox-root-145"
       >
         <button
           aria-hidden={true}
@@ -717,9 +733,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Autocomplete 1`]
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -729,10 +757,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Autocomplete 1`]
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -828,9 +852,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Autocomplete 1`]
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -840,10 +876,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Autocomplete 1`]
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -1077,8 +1109,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Autocomplete 1`]
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -1099,8 +1131,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Autocomplete 1`]
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -1187,7 +1219,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Autocomplete 1`]
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-160"
+        className="MuiBox-root MuiBox-root-161"
       >
         <button
           aria-hidden={true}
@@ -1372,9 +1404,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Debug 1`] = `
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -1384,10 +1428,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Debug 1`] = `
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -1483,9 +1523,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Debug 1`] = `
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -1495,10 +1547,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Debug 1`] = `
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -1714,8 +1762,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Debug 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -1736,8 +1784,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Debug 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -1803,7 +1851,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Debug 1`] = `
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-145"
+        className="MuiBox-root MuiBox-root-146"
       >
         <button
           aria-hidden={true}
@@ -1989,9 +2037,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -2001,10 +2061,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -2198,8 +2254,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -2475,9 +2531,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -2487,10 +2555,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -2684,8 +2748,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -3019,9 +3083,21 @@ Array [
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -3031,10 +3107,6 @@ Array [
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -3130,9 +3202,21 @@ Array [
   background-color: #666666;
 }
 
-.c14.RcIconButton-contained.focus-visible,
-.c14.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c14.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c14.RcIconButton-contained.focus-visible:before,
+.c14.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c14.RcIconButton-contained.focus-visible,
@@ -3142,10 +3226,6 @@ Array [
   color: #fff;
 }
 
-.c14.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c14.RcIconButton-contained:active,
 .c14.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -3543,8 +3623,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -3565,8 +3645,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c14.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c14.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c14.RcIconButton-contained:hover,
@@ -3870,7 +3950,7 @@ Array [
         className="c10"
       >
         <div
-          className="MuiBox-root MuiBox-root-147"
+          className="MuiBox-root MuiBox-root-148"
         >
           <button
             aria-hidden={true}
@@ -4057,9 +4137,21 @@ Array [
   background-color: #666666;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -4069,10 +4161,6 @@ Array [
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -4202,9 +4290,21 @@ Array [
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -4214,10 +4314,6 @@ Array [
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -4313,9 +4409,21 @@ Array [
   background-color: #666666;
 }
 
-.c15.RcIconButton-contained.focus-visible,
-.c15.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c15.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c15.RcIconButton-contained.focus-visible:before,
+.c15.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c15.RcIconButton-contained.focus-visible,
@@ -4325,10 +4433,6 @@ Array [
   color: #fff;
 }
 
-.c15.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c15.RcIconButton-contained:active,
 .c15.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -4658,8 +4762,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -4694,8 +4798,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -4716,8 +4820,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c15.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c15.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c15.RcIconButton-contained:hover,
@@ -4943,7 +5047,7 @@ Array [
         className="c10"
       >
         <div
-          className="MuiBox-root MuiBox-root-148"
+          className="MuiBox-root MuiBox-root-149"
         >
           <button
             aria-hidden={true}
@@ -5131,9 +5235,21 @@ Array [
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -5143,10 +5259,6 @@ Array [
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -5344,9 +5456,21 @@ Array [
   background-color: #BE3933;
 }
 
-.c14.RcIconButton-contained.focus-visible,
-.c14.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(190,57,51,0.84);
+.c14.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c14.RcIconButton-contained.focus-visible:before,
+.c14.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c14.RcIconButton-contained.focus-visible,
@@ -5356,10 +5480,6 @@ Array [
   color: #fff;
 }
 
-.c14.RcIconButton-contained:active {
-  background-color: rgba(190,57,51,0.76);
-}
-
 .c14.RcIconButton-contained:active,
 .c14.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -5655,8 +5775,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -5719,8 +5839,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c14.RcIconButton-contained:hover {
-    background-color: rgba(190,57,51,0.92);
+  .c14.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c14.RcIconButton-contained:hover,
@@ -5928,7 +6048,7 @@ Array [
         className="c10"
       >
         <div
-          className="MuiBox-root MuiBox-root-149"
+          className="MuiBox-root MuiBox-root-150"
         >
           <button
             aria-hidden={true}
@@ -6115,9 +6235,21 @@ Array [
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -6127,10 +6259,6 @@ Array [
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -6226,9 +6354,21 @@ Array [
   background-color: #666666;
 }
 
-.c14.RcIconButton-contained.focus-visible,
-.c14.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c14.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c14.RcIconButton-contained.focus-visible:before,
+.c14.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c14.RcIconButton-contained.focus-visible,
@@ -6238,10 +6378,6 @@ Array [
   color: #fff;
 }
 
-.c14.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c14.RcIconButton-contained:active,
 .c14.RcIconButton-contained:active .c7 {
   color: #fff;
@@ -6639,8 +6775,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -6661,8 +6797,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c14.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c14.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c14.RcIconButton-contained:hover,
@@ -6912,7 +7048,7 @@ Array [
         className="c10"
       >
         <div
-          className="MuiBox-root MuiBox-root-150"
+          className="MuiBox-root MuiBox-root-151"
         >
           <button
             aria-hidden={true}
@@ -7582,9 +7718,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Fixed Item Heigh
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -7594,10 +7742,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Fixed Item Heigh
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -7693,9 +7837,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Fixed Item Heigh
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -7705,10 +7861,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Fixed Item Heigh
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -7924,8 +8076,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Fixed Item Heigh
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -7946,8 +8098,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Fixed Item Heigh
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -8013,7 +8165,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Fixed Item Heigh
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-146"
+        className="MuiBox-root MuiBox-root-147"
       >
         <button
           aria-hidden={true}
@@ -8234,9 +8386,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -8246,10 +8410,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -8345,9 +8505,21 @@ Array [
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -8357,10 +8529,6 @@ Array [
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -8576,8 +8744,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -8598,8 +8766,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -8665,7 +8833,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-152"
+          className="MuiBox-root MuiBox-root-153"
         >
           <button
             aria-hidden={true}
@@ -8887,9 +9055,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -8899,10 +9079,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -8998,9 +9174,21 @@ Array [
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -9010,10 +9198,6 @@ Array [
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -9229,8 +9413,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -9251,8 +9435,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -9318,7 +9502,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-153"
+          className="MuiBox-root MuiBox-root-154"
         >
           <button
             aria-hidden={true}
@@ -9540,9 +9724,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -9552,10 +9748,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -9651,9 +9843,21 @@ Array [
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -9663,10 +9867,6 @@ Array [
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -9882,8 +10082,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -9904,8 +10104,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -9971,7 +10171,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-154"
+          className="MuiBox-root MuiBox-root-155"
         >
           <button
             aria-hidden={true}
@@ -10193,9 +10393,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -10205,10 +10417,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -10304,9 +10512,21 @@ Array [
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -10316,10 +10536,6 @@ Array [
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -10535,8 +10751,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -10557,8 +10773,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -10624,7 +10840,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-155"
+          className="MuiBox-root MuiBox-root-156"
         >
           <button
             aria-hidden={true}
@@ -10815,9 +11031,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Lazy Load Exampl
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -10827,10 +11055,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Lazy Load Exampl
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -10926,9 +11150,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Lazy Load Exampl
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -10938,10 +11174,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Lazy Load Exampl
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -11157,8 +11389,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Lazy Load Exampl
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -11179,8 +11411,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Lazy Load Exampl
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -11246,7 +11478,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Lazy Load Exampl
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-151"
+        className="MuiBox-root MuiBox-root-152"
       >
         <button
           aria-hidden={true}
@@ -11437,9 +11669,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -11449,10 +11693,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -11548,9 +11788,21 @@ Array [
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -11560,10 +11812,6 @@ Array [
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -11787,8 +12035,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -11809,8 +12057,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -11880,7 +12128,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-157"
+          className="MuiBox-root MuiBox-root-158"
         >
           <button
             aria-hidden={true}
@@ -12062,9 +12310,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -12074,10 +12334,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -12173,9 +12429,21 @@ Array [
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -12185,10 +12453,6 @@ Array [
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -12408,8 +12672,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -12430,8 +12694,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -12501,7 +12765,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-158"
+          className="MuiBox-root MuiBox-root-159"
         >
           <button
             aria-hidden={true}
@@ -12687,9 +12951,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Custom Inpu
   background-color: #666666;
 }
 
-.c6.RcIconButton-contained.focus-visible,
-.c6.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c6.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c6.RcIconButton-contained.focus-visible:before,
+.c6.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c6.RcIconButton-contained.focus-visible,
@@ -12699,10 +12975,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Custom Inpu
   color: #fff;
 }
 
-.c6.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c6.RcIconButton-contained:active,
 .c6.RcIconButton-contained:active .c9 {
   color: #fff;
@@ -12798,9 +13070,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Custom Inpu
   background-color: #666666;
 }
 
-.c13.RcIconButton-contained.focus-visible,
-.c13.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c13.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c13.RcIconButton-contained.focus-visible:before,
+.c13.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c13.RcIconButton-contained.focus-visible,
@@ -12810,10 +13094,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Custom Inpu
   color: #fff;
 }
 
-.c13.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c13.RcIconButton-contained:active,
 .c13.RcIconButton-contained:active .c9 {
   color: #fff;
@@ -13096,8 +13376,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Custom Inpu
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c6.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c6.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c6.RcIconButton-contained:hover,
@@ -13118,8 +13398,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Custom Inpu
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c13.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c13.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c13.RcIconButton-contained:hover,
@@ -13185,7 +13465,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Custom Inpu
       className="c4"
     >
       <div
-        className="MuiBox-root MuiBox-root-159"
+        className="MuiBox-root MuiBox-root-160"
       >
         <button
           aria-hidden={true}
@@ -13370,9 +13650,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Dynamic 1`]
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -13382,10 +13674,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Dynamic 1`]
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -13481,9 +13769,21 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Dynamic 1`]
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -13493,10 +13793,6 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Dynamic 1`]
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c8 {
   color: #fff;
@@ -13708,8 +14004,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Dynamic 1`]
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -13730,8 +14026,8 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Dynamic 1`]
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -13797,7 +14093,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Dynamic 1`]
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-156"
+        className="MuiBox-root MuiBox-root-157"
       >
         <button
           aria-hidden={true}
diff --git a/packages/juno-core/src/components/Downshift/__stories__/__snapshots__/useSuggestionList.story.tsx.snap b/packages/juno-core/src/components/Downshift/__stories__/__snapshots__/useSuggestionList.story.tsx.snap
index d535fa5b..ed6fa3de 100644
--- a/packages/juno-core/src/components/Downshift/__stories__/__snapshots__/useSuggestionList.story.tsx.snap
+++ b/packages/juno-core/src/components/Downshift/__stories__/__snapshots__/useSuggestionList.story.tsx.snap
@@ -102,9 +102,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -114,10 +126,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -354,8 +362,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -412,7 +420,7 @@ Array [
         />
       </div>
       <div
-        className="MuiBox-root MuiBox-root-161"
+        className="MuiBox-root MuiBox-root-162"
       >
         <button
           aria-hidden={true}
@@ -490,7 +498,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-162"
+    className="MuiBox-root MuiBox-root-163"
   >
     <div
       aria-labelledby="suggestion-list-0-label"
diff --git a/packages/juno-core/src/components/Drawer/__stories__/__snapshots__/Drawer.story.tsx.snap b/packages/juno-core/src/components/Drawer/__stories__/__snapshots__/Drawer.story.tsx.snap
index 46e5365d..951c9bd3 100644
--- a/packages/juno-core/src/components/Drawer/__stories__/__snapshots__/Drawer.story.tsx.snap
+++ b/packages/juno-core/src/components/Drawer/__stories__/__snapshots__/Drawer.story.tsx.snap
@@ -1059,7 +1059,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-163 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-164 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -1077,7 +1077,7 @@ Array [
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-166 MuiSwitch-input"
+            className="PrivateSwitchBase-input-167 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
diff --git a/packages/juno-core/src/components/Forms/Checkbox/__stories__/__snapshots__/Checkbox.story.tsx.snap b/packages/juno-core/src/components/Forms/Checkbox/__stories__/__snapshots__/Checkbox.story.tsx.snap
index 9f8b4031..7f0d36ac 100644
--- a/packages/juno-core/src/components/Forms/Checkbox/__stories__/__snapshots__/Checkbox.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/Checkbox/__stories__/__snapshots__/Checkbox.story.tsx.snap
@@ -44,7 +44,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Checkbox Checkbox 1`] = `
 
 <span
   aria-disabled={false}
-  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-167 MuiCheckbox-root RcCheckbox-root c0"
+  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-168 MuiCheckbox-root RcCheckbox-root c0"
   onBlur={[Function]}
   onDragLeave={[Function]}
   onFocus={[Function]}
@@ -62,7 +62,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Checkbox Checkbox 1`] = `
     className="MuiIconButton-label"
   >
     <input
-      className="PrivateSwitchBase-input-170"
+      className="PrivateSwitchBase-input-171"
       data-indeterminate={false}
       onChange={[Function]}
       type="checkbox"
@@ -179,7 +179,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Checkbox Checkbox Examples 1`]
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-171 MuiCheckbox-root RcCheckbox-root c2"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-172 MuiCheckbox-root RcCheckbox-root c2"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -197,7 +197,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Checkbox Checkbox Examples 1`]
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-174"
+          className="PrivateSwitchBase-input-175"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
@@ -239,7 +239,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Checkbox Checkbox Examples 1`]
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-171 MuiCheckbox-root RcCheckbox-root c2"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-172 MuiCheckbox-root RcCheckbox-root c2"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -257,7 +257,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Checkbox Checkbox Examples 1`]
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-174"
+          className="PrivateSwitchBase-input-175"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
@@ -363,7 +363,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-175 MuiCheckbox-root RcCheckbox-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-176 MuiCheckbox-root RcCheckbox-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -381,7 +381,7 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-178"
+          className="PrivateSwitchBase-input-179"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
@@ -485,7 +485,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-175 MuiCheckbox-root RcCheckbox-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-176 MuiCheckbox-root RcCheckbox-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -503,7 +503,7 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-178"
+          className="PrivateSwitchBase-input-179"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
diff --git a/packages/juno-core/src/components/Forms/FormGroup/__stories__/__snapshots__/FormGroup.story.tsx.snap b/packages/juno-core/src/components/Forms/FormGroup/__stories__/__snapshots__/FormGroup.story.tsx.snap
index 621217ee..b2cab3d9 100644
--- a/packages/juno-core/src/components/Forms/FormGroup/__stories__/__snapshots__/FormGroup.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/FormGroup/__stories__/__snapshots__/FormGroup.story.tsx.snap
@@ -157,7 +157,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-179 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-180 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -175,7 +175,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-182 MuiSwitch-input"
+            className="PrivateSwitchBase-input-183 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -202,7 +202,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-179 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-180 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -220,7 +220,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-182 MuiSwitch-input"
+            className="PrivateSwitchBase-input-183 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -247,7 +247,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-179 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-180 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -265,7 +265,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-182 MuiSwitch-input"
+            className="PrivateSwitchBase-input-183 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -289,7 +289,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-179 MuiCheckbox-root RcCheckbox-root c2"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-180 MuiCheckbox-root RcCheckbox-root c2"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -307,7 +307,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-182"
+          className="PrivateSwitchBase-input-183"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
@@ -339,7 +339,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-179 MuiCheckbox-root RcCheckbox-root c2"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-180 MuiCheckbox-root RcCheckbox-root c2"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -357,7 +357,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-182"
+          className="PrivateSwitchBase-input-183"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
@@ -389,7 +389,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-179 MuiCheckbox-root RcCheckbox-root c2"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-180 MuiCheckbox-root RcCheckbox-root c2"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -407,7 +407,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-182"
+          className="PrivateSwitchBase-input-183"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
diff --git a/packages/juno-core/src/components/Forms/Picker/DatePicker/__stories__/__snapshots__/DatePicker.story.tsx.snap b/packages/juno-core/src/components/Forms/Picker/DatePicker/__stories__/__snapshots__/DatePicker.story.tsx.snap
index 5ea1109b..bfd641b1 100644
--- a/packages/juno-core/src/components/Forms/Picker/DatePicker/__stories__/__snapshots__/DatePicker.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/Picker/DatePicker/__stories__/__snapshots__/DatePicker.story.tsx.snap
@@ -102,9 +102,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -114,10 +126,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -287,8 +295,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -562,9 +570,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -574,10 +594,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -759,8 +775,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -1064,9 +1080,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -1076,10 +1104,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -1257,8 +1281,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -1651,9 +1675,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -1663,10 +1699,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -1844,8 +1876,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -2148,9 +2180,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -2160,10 +2204,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -2333,8 +2373,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -2558,9 +2598,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -2570,10 +2622,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -2743,8 +2791,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -2951,9 +2999,21 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/DatePicker DatePicker with ran
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -2963,10 +3023,6 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/DatePicker DatePicker with ran
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -3358,8 +3414,8 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/DatePicker DatePicker with ran
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Forms/Picker/TimePicker/__stories__/__snapshots__/TimePicker.story.tsx.snap b/packages/juno-core/src/components/Forms/Picker/TimePicker/__stories__/__snapshots__/TimePicker.story.tsx.snap
index e11d5a5f..8fc42000 100644
--- a/packages/juno-core/src/components/Forms/Picker/TimePicker/__stories__/__snapshots__/TimePicker.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/Picker/TimePicker/__stories__/__snapshots__/TimePicker.story.tsx.snap
@@ -102,9 +102,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -114,10 +126,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -322,8 +330,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -1451,9 +1459,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -1463,10 +1483,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -1636,8 +1652,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -1991,9 +2007,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -2003,10 +2031,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -2192,8 +2216,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -2513,9 +2537,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -2525,10 +2561,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -2714,8 +2746,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -3082,9 +3114,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -3094,10 +3138,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -3275,8 +3315,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -3669,9 +3709,21 @@ Array [
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -3681,10 +3733,6 @@ Array [
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -3886,8 +3934,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
@@ -4337,9 +4385,21 @@ Array [
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -4349,10 +4409,6 @@ Array [
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -4554,8 +4610,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
@@ -5005,9 +5061,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -5017,10 +5085,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -5206,8 +5270,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
@@ -5458,9 +5522,21 @@ Array [
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -5470,10 +5546,6 @@ Array [
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -5643,8 +5715,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Forms/Radio/__stories__/__snapshots__/Radio.story.tsx.snap b/packages/juno-core/src/components/Forms/Radio/__stories__/__snapshots__/Radio.story.tsx.snap
index fab6062d..c41aa286 100644
--- a/packages/juno-core/src/components/Forms/Radio/__stories__/__snapshots__/Radio.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/Radio/__stories__/__snapshots__/Radio.story.tsx.snap
@@ -32,7 +32,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Radio Radio 1`] = `
 
 <span
   aria-disabled={false}
-  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-183 MuiRadio-root RcRadio-root c0"
+  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-184 MuiRadio-root RcRadio-root c0"
   onBlur={[Function]}
   onDragLeave={[Function]}
   onFocus={[Function]}
@@ -50,12 +50,12 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Radio Radio 1`] = `
     className="MuiIconButton-label"
   >
     <input
-      className="PrivateSwitchBase-input-186"
+      className="PrivateSwitchBase-input-187"
       onChange={[Function]}
       type="radio"
     />
     <div
-      className="PrivateRadioButtonIcon-root-187 RadioButtonIcon-root"
+      className="PrivateRadioButtonIcon-root-188 RadioButtonIcon-root"
     >
       <svg
         aria-hidden={true}
@@ -69,7 +69,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Radio Radio 1`] = `
       </svg>
       <svg
         aria-hidden={true}
-        className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-188"
+        className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-189"
         focusable="false"
         viewBox="0 0 24 24"
       >
@@ -165,7 +165,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-190 MuiRadio-root RcRadio-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-191 MuiRadio-root RcRadio-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -183,12 +183,12 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-193"
+          className="PrivateSwitchBase-input-194"
           onChange={[Function]}
           type="radio"
         />
         <div
-          className="PrivateRadioButtonIcon-root-194 RadioButtonIcon-root"
+          className="PrivateRadioButtonIcon-root-195 RadioButtonIcon-root"
         >
           <svg
             aria-hidden={true}
@@ -202,7 +202,7 @@ Array [
           </svg>
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-195"
+            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-196"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -318,7 +318,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-190 MuiRadio-root RcRadio-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-191 MuiRadio-root RcRadio-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -336,12 +336,12 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-193"
+          className="PrivateSwitchBase-input-194"
           onChange={[Function]}
           type="radio"
         />
         <div
-          className="PrivateRadioButtonIcon-root-194 RadioButtonIcon-root"
+          className="PrivateRadioButtonIcon-root-195 RadioButtonIcon-root"
         >
           <svg
             aria-hidden={true}
@@ -355,7 +355,7 @@ Array [
           </svg>
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-195"
+            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-196"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -478,7 +478,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Radio Radio with custom icon 1
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-197 MuiRadio-root RcRadio-root c2 PrivateSwitchBase-checked-198 Mui-checked RcRadio-checked"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-198 MuiRadio-root RcRadio-root c2 PrivateSwitchBase-checked-199 Mui-checked RcRadio-checked"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -497,7 +497,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Radio Radio with custom icon 1
         >
           <input
             checked={true}
-            className="PrivateSwitchBase-input-200"
+            className="PrivateSwitchBase-input-201"
             disabled={false}
             onChange={[Function]}
             type="radio"
@@ -530,7 +530,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Radio Radio with custom icon 1
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-197 MuiRadio-root RcRadio-root c2"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-198 MuiRadio-root RcRadio-root c2"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -549,7 +549,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Radio Radio with custom icon 1
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-200"
+            className="PrivateSwitchBase-input-201"
             disabled={false}
             onChange={[Function]}
             type="radio"
diff --git a/packages/juno-core/src/components/Forms/RadioGroup/__stories__/__snapshots__/RadioGroup.story.tsx.snap b/packages/juno-core/src/components/Forms/RadioGroup/__stories__/__snapshots__/RadioGroup.story.tsx.snap
index 3c714e9c..aaa2d670 100644
--- a/packages/juno-core/src/components/Forms/RadioGroup/__stories__/__snapshots__/RadioGroup.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/RadioGroup/__stories__/__snapshots__/RadioGroup.story.tsx.snap
@@ -67,7 +67,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup Radio Group 1`] = `
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-201 MuiRadio-root RcRadio-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-202 MuiRadio-root RcRadio-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -86,14 +86,14 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup Radio Group 1`] = `
       >
         <input
           checked={false}
-          className="PrivateSwitchBase-input-204"
+          className="PrivateSwitchBase-input-205"
           name="mui-10000"
           onChange={[Function]}
           type="radio"
           value="radio1"
         />
         <div
-          className="PrivateRadioButtonIcon-root-205 RadioButtonIcon-root"
+          className="PrivateRadioButtonIcon-root-206 RadioButtonIcon-root"
         >
           <svg
             aria-hidden={true}
@@ -107,7 +107,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup Radio Group 1`] = `
           </svg>
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-206"
+            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-207"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -132,7 +132,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup Radio Group 1`] = `
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-201 MuiRadio-root RcRadio-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-202 MuiRadio-root RcRadio-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -151,14 +151,14 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup Radio Group 1`] = `
       >
         <input
           checked={false}
-          className="PrivateSwitchBase-input-204"
+          className="PrivateSwitchBase-input-205"
           name="mui-10000"
           onChange={[Function]}
           type="radio"
           value="radio2"
         />
         <div
-          className="PrivateRadioButtonIcon-root-205 RadioButtonIcon-root"
+          className="PrivateRadioButtonIcon-root-206 RadioButtonIcon-root"
         >
           <svg
             aria-hidden={true}
@@ -172,7 +172,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup Radio Group 1`] = `
           </svg>
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-206"
+            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-207"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -294,7 +294,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup RadioGroup Examples
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-208 MuiRadio-root RcRadio-root c3 PrivateSwitchBase-checked-209 Mui-checked RcRadio-checked"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-209 MuiRadio-root RcRadio-root c3 PrivateSwitchBase-checked-210 Mui-checked RcRadio-checked"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -313,14 +313,14 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup RadioGroup Examples
           >
             <input
               checked={true}
-              className="PrivateSwitchBase-input-211"
+              className="PrivateSwitchBase-input-212"
               disabled={false}
               onChange={[Function]}
               type="radio"
               value="radio1"
             />
             <div
-              className="PrivateRadioButtonIcon-root-212 RadioButtonIcon-root PrivateRadioButtonIcon-checked-214"
+              className="PrivateRadioButtonIcon-root-213 RadioButtonIcon-root PrivateRadioButtonIcon-checked-215"
             >
               <svg
                 aria-hidden={true}
@@ -334,7 +334,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup RadioGroup Examples
               </svg>
               <svg
                 aria-hidden={true}
-                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-213"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-214"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -356,7 +356,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup RadioGroup Examples
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-208 MuiRadio-root RcRadio-root c3"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-209 MuiRadio-root RcRadio-root c3"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -375,14 +375,14 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup RadioGroup Examples
           >
             <input
               checked={false}
-              className="PrivateSwitchBase-input-211"
+              className="PrivateSwitchBase-input-212"
               disabled={false}
               onChange={[Function]}
               type="radio"
               value="radio2"
             />
             <div
-              className="PrivateRadioButtonIcon-root-212 RadioButtonIcon-root"
+              className="PrivateRadioButtonIcon-root-213 RadioButtonIcon-root"
             >
               <svg
                 aria-hidden={true}
@@ -396,7 +396,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup RadioGroup Examples
               </svg>
               <svg
                 aria-hidden={true}
-                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-213"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-214"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -418,7 +418,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup RadioGroup Examples
       >
         <span
           aria-disabled={true}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-208 MuiRadio-root RcRadio-root c3 PrivateSwitchBase-disabled-210 Mui-disabled RcRadio-disabled Mui-disabled Mui-disabled"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-209 MuiRadio-root RcRadio-root c3 PrivateSwitchBase-disabled-211 Mui-disabled RcRadio-disabled Mui-disabled Mui-disabled"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -437,14 +437,14 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup RadioGroup Examples
           >
             <input
               checked={false}
-              className="PrivateSwitchBase-input-211"
+              className="PrivateSwitchBase-input-212"
               disabled={true}
               onChange={[Function]}
               type="radio"
               value="radio3"
             />
             <div
-              className="PrivateRadioButtonIcon-root-212 RadioButtonIcon-root"
+              className="PrivateRadioButtonIcon-root-213 RadioButtonIcon-root"
             >
               <svg
                 aria-hidden={true}
@@ -458,7 +458,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/RadioGroup RadioGroup Examples
               </svg>
               <svg
                 aria-hidden={true}
-                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-213"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-214"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
diff --git a/packages/juno-core/src/components/Forms/Select/PlainSelect/__stories__/__snapshots__/PlainSelects.story.tsx.snap b/packages/juno-core/src/components/Forms/Select/PlainSelect/__stories__/__snapshots__/PlainSelects.story.tsx.snap
index f4604d6e..11116a3f 100644
--- a/packages/juno-core/src/components/Forms/Select/PlainSelect/__stories__/__snapshots__/PlainSelects.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/Select/PlainSelect/__stories__/__snapshots__/PlainSelects.story.tsx.snap
@@ -1325,7 +1325,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect Exam
 }
 
 <div
-  className="MuiBox-root MuiBox-root-215"
+  className="MuiBox-root MuiBox-root-216"
 >
   <div>
     <p
diff --git a/packages/juno-core/src/components/Forms/Slider/__stories__/__snapshots__/Slider.story.tsx.snap b/packages/juno-core/src/components/Forms/Slider/__stories__/__snapshots__/Slider.story.tsx.snap
index fc4cc9e9..45767c80 100644
--- a/packages/juno-core/src/components/Forms/Slider/__stories__/__snapshots__/Slider.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/Slider/__stories__/__snapshots__/Slider.story.tsx.snap
@@ -52,7 +52,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Slider Slider 1`] = `
     aria-valuemax={100}
     aria-valuemin={0}
     aria-valuenow={0}
-    className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-216"
+    className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-217"
     data-index={0}
     onBlur={[Function]}
     onFocus={[Function]}
@@ -68,13 +68,13 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Slider Slider 1`] = `
     tabIndex={0}
   >
     <span
-      className="PrivateValueLabel-offset-218 MuiSlider-valueLabel"
+      className="PrivateValueLabel-offset-219 MuiSlider-valueLabel"
     >
       <span
-        className="PrivateValueLabel-circle-219"
+        className="PrivateValueLabel-circle-220"
       >
         <span
-          className="PrivateValueLabel-label-220"
+          className="PrivateValueLabel-label-221"
         >
           0
         </span>
@@ -214,7 +214,7 @@ Array [
           aria-valuemax={100}
           aria-valuemin={0}
           aria-valuenow={0}
-          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-221"
+          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-222"
           data-index={0}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -230,13 +230,13 @@ Array [
           tabIndex={0}
         >
           <span
-            className="PrivateValueLabel-offset-223 MuiSlider-valueLabel"
+            className="PrivateValueLabel-offset-224 MuiSlider-valueLabel"
           >
             <span
-              className="PrivateValueLabel-circle-224"
+              className="PrivateValueLabel-circle-225"
             >
               <span
-                className="PrivateValueLabel-label-225"
+                className="PrivateValueLabel-label-226"
               >
                 0
               </span>
@@ -544,7 +544,7 @@ Array [
           aria-valuemax={100}
           aria-valuemin={0}
           aria-valuenow={0}
-          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-221"
+          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-222"
           data-index={0}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -560,13 +560,13 @@ Array [
           tabIndex={0}
         >
           <span
-            className="PrivateValueLabel-offset-223 MuiSlider-valueLabel"
+            className="PrivateValueLabel-offset-224 MuiSlider-valueLabel"
           >
             <span
-              className="PrivateValueLabel-circle-224"
+              className="PrivateValueLabel-circle-225"
             >
               <span
-                className="PrivateValueLabel-label-225"
+                className="PrivateValueLabel-label-226"
               >
                 0
               </span>
@@ -762,7 +762,7 @@ Array [
           aria-valuemax={100}
           aria-valuemin={0}
           aria-valuenow={0}
-          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-221"
+          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-222"
           data-index={0}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -778,13 +778,13 @@ Array [
           tabIndex={0}
         >
           <span
-            className="PrivateValueLabel-offset-223 MuiSlider-valueLabel"
+            className="PrivateValueLabel-offset-224 MuiSlider-valueLabel"
           >
             <span
-              className="PrivateValueLabel-circle-224"
+              className="PrivateValueLabel-circle-225"
             >
               <span
-                className="PrivateValueLabel-label-225"
+                className="PrivateValueLabel-label-226"
               >
                 0%
               </span>
diff --git a/packages/juno-core/src/components/Forms/Switch/__stories__/__snapshots__/Switch.story.tsx.snap b/packages/juno-core/src/components/Forms/Switch/__stories__/__snapshots__/Switch.story.tsx.snap
index 6700db19..e64012bf 100644
--- a/packages/juno-core/src/components/Forms/Switch/__stories__/__snapshots__/Switch.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/Switch/__stories__/__snapshots__/Switch.story.tsx.snap
@@ -82,7 +82,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch 1`] = `
 >
   <span
     aria-disabled={false}
-    className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-226 MuiSwitch-switchBase RcSwitch-switchBase"
+    className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-227 MuiSwitch-switchBase RcSwitch-switchBase"
     onBlur={[Function]}
     onDragLeave={[Function]}
     onFocus={[Function]}
@@ -100,7 +100,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch 1`] = `
       className="MuiIconButton-label"
     >
       <input
-        className="PrivateSwitchBase-input-229 MuiSwitch-input"
+        className="PrivateSwitchBase-input-230 MuiSwitch-input"
         onChange={[Function]}
         type="checkbox"
       />
@@ -252,7 +252,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-230 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-231 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -270,7 +270,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-233 MuiSwitch-input"
+            className="PrivateSwitchBase-input-234 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -307,7 +307,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-230 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-231 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -325,7 +325,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-233 MuiSwitch-input"
+            className="PrivateSwitchBase-input-234 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -373,7 +373,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-230 MuiSwitch-switchBase RcSwitch-switchBase"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-231 MuiSwitch-switchBase RcSwitch-switchBase"
             onBlur={[Function]}
             onDragLeave={[Function]}
             onFocus={[Function]}
@@ -391,7 +391,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
               className="MuiIconButton-label"
             >
               <input
-                className="PrivateSwitchBase-input-233 MuiSwitch-input"
+                className="PrivateSwitchBase-input-234 MuiSwitch-input"
                 disabled={false}
                 name="RcSwitch name prop"
                 onChange={[Function]}
@@ -420,7 +420,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-230 MuiSwitch-switchBase RcSwitch-switchBase"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-231 MuiSwitch-switchBase RcSwitch-switchBase"
             onBlur={[Function]}
             onDragLeave={[Function]}
             onFocus={[Function]}
@@ -438,7 +438,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
               className="MuiIconButton-label"
             >
               <input
-                className="PrivateSwitchBase-input-233 MuiSwitch-input"
+                className="PrivateSwitchBase-input-234 MuiSwitch-input"
                 disabled={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -577,7 +577,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-234 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-235 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -595,7 +595,7 @@ Array [
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-237 MuiSwitch-input"
+            className="PrivateSwitchBase-input-238 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
diff --git a/packages/juno-core/src/components/Forms/TextField/__stories__/__snapshots__/OutlineTextField.story.tsx.snap b/packages/juno-core/src/components/Forms/TextField/__stories__/__snapshots__/OutlineTextField.story.tsx.snap
index d5e9233e..29a9bcde 100644
--- a/packages/juno-core/src/components/Forms/TextField/__stories__/__snapshots__/OutlineTextField.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/TextField/__stories__/__snapshots__/OutlineTextField.story.tsx.snap
@@ -102,9 +102,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -114,10 +126,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -350,8 +358,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -397,7 +405,7 @@ Array [
         type="text"
       />
       <div
-        className="MuiBox-root MuiBox-root-238"
+        className="MuiBox-root MuiBox-root-239"
       >
         <button
           aria-hidden={true}
@@ -570,9 +578,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -582,10 +602,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -818,8 +834,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -890,7 +906,7 @@ Array [
         type="text"
       />
       <div
-        className="MuiBox-root MuiBox-root-239"
+        className="MuiBox-root MuiBox-root-240"
       >
         <button
           aria-hidden={true}
@@ -1078,9 +1094,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -1090,10 +1118,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -1400,8 +1424,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -1464,7 +1488,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-240"
+        className="MuiBox-root MuiBox-root-241"
       >
         <button
           aria-hidden={true}
@@ -1647,9 +1671,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -1659,10 +1695,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -1969,8 +2001,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -2053,7 +2085,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-241"
+        className="MuiBox-root MuiBox-root-242"
       >
         <button
           aria-hidden={true}
@@ -2279,9 +2311,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -2291,10 +2335,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -2601,8 +2641,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -2671,7 +2711,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-242"
+        className="MuiBox-root MuiBox-root-243"
       >
         <button
           aria-hidden={true}
@@ -2886,9 +2926,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -2898,10 +2950,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -3208,8 +3256,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -3278,7 +3326,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-243"
+        className="MuiBox-root MuiBox-root-244"
       >
         <button
           aria-hidden={true}
@@ -3493,9 +3541,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -3505,10 +3565,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -3815,8 +3871,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -3885,7 +3941,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-244"
+        className="MuiBox-root MuiBox-root-245"
       >
         <button
           aria-hidden={true}
@@ -4077,9 +4133,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -4089,10 +4157,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -4188,9 +4252,21 @@ Array [
   background-color: #666666;
 }
 
-.c10.RcIconButton-contained.focus-visible,
-.c10.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c10.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c10.RcIconButton-contained.focus-visible:before,
+.c10.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c10.RcIconButton-contained.focus-visible,
@@ -4200,10 +4276,6 @@ Array [
   color: #fff;
 }
 
-.c10.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c10.RcIconButton-contained:active,
 .c10.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -4476,8 +4548,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -4498,8 +4570,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c10.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c10.RcIconButton-contained:hover,
@@ -4568,7 +4640,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-245"
+        className="MuiBox-root MuiBox-root-246"
       >
         <button
           aria-hidden={true}
@@ -4787,9 +4859,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -4799,10 +4883,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -5109,8 +5189,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -5178,7 +5258,7 @@ Array [
         type="text"
       />
       <div
-        className="MuiBox-root MuiBox-root-246"
+        className="MuiBox-root MuiBox-root-247"
       >
         <button
           aria-hidden={true}
@@ -5342,9 +5422,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -5354,10 +5446,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -5684,8 +5772,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -5790,7 +5878,7 @@ Array [
         type="text"
       />
       <div
-        className="MuiBox-root MuiBox-root-247"
+        className="MuiBox-root MuiBox-root-248"
       >
         <button
           aria-hidden={true}
@@ -5982,9 +6070,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -5994,10 +6094,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -6324,8 +6420,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -6453,7 +6549,7 @@ Array [
         tabIndex={-1}
       />
       <div
-        className="MuiBox-root MuiBox-root-248"
+        className="MuiBox-root MuiBox-root-249"
       >
         <button
           aria-hidden={true}
@@ -6761,9 +6857,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -6773,10 +6881,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -7083,8 +7187,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -7175,7 +7279,7 @@ Array [
         type="text"
       />
       <div
-        className="MuiBox-root MuiBox-root-249"
+        className="MuiBox-root MuiBox-root-250"
       >
         <button
           aria-hidden={true}
@@ -7401,9 +7505,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -7413,10 +7529,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -7723,8 +7835,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -7838,7 +7950,7 @@ Array [
         tabIndex={-1}
       />
       <div
-        className="MuiBox-root MuiBox-root-250"
+        className="MuiBox-root MuiBox-root-251"
       >
         <button
           aria-hidden={true}
@@ -8146,9 +8258,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -8158,10 +8282,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -8468,8 +8588,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -8560,7 +8680,7 @@ Array [
         type="text"
       />
       <div
-        className="MuiBox-root MuiBox-root-251"
+        className="MuiBox-root MuiBox-root-252"
       >
         <button
           aria-hidden={true}
@@ -8786,9 +8906,21 @@ Array [
   background-color: #666666;
 }
 
-.c5.RcIconButton-contained.focus-visible,
-.c5.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c5.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c5.RcIconButton-contained.focus-visible:before,
+.c5.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c5.RcIconButton-contained.focus-visible,
@@ -8798,10 +8930,6 @@ Array [
   color: #fff;
 }
 
-.c5.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c5.RcIconButton-contained:active,
 .c5.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -9108,8 +9236,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c5.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c5.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c5.RcIconButton-contained:hover,
@@ -9223,7 +9351,7 @@ Array [
         tabIndex={-1}
       />
       <div
-        className="MuiBox-root MuiBox-root-252"
+        className="MuiBox-root MuiBox-root-253"
       >
         <button
           aria-hidden={true}
diff --git a/packages/juno-core/src/components/Forms/TextField/__stories__/__snapshots__/TextField.story.tsx.snap b/packages/juno-core/src/components/Forms/TextField/__stories__/__snapshots__/TextField.story.tsx.snap
index efcb6666..540bb37d 100644
--- a/packages/juno-core/src/components/Forms/TextField/__stories__/__snapshots__/TextField.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/TextField/__stories__/__snapshots__/TextField.story.tsx.snap
@@ -184,9 +184,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -196,10 +208,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -374,8 +382,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -422,7 +430,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-253"
+        className="MuiBox-root MuiBox-root-254"
       >
         <button
           aria-describedby={null}
@@ -650,9 +658,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -662,10 +682,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -840,8 +856,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -887,7 +903,7 @@ Array [
         type="search"
       />
       <div
-        className="MuiBox-root MuiBox-root-254"
+        className="MuiBox-root MuiBox-root-255"
       >
         <button
           aria-hidden={true}
@@ -1043,9 +1059,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -1055,10 +1083,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -1297,8 +1321,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -1392,7 +1416,7 @@ Array [
         type="number"
       />
       <div
-        className="MuiBox-root MuiBox-root-255"
+        className="MuiBox-root MuiBox-root-256"
       >
         <button
           aria-describedby={null}
@@ -1591,9 +1615,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -1603,10 +1639,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -1845,8 +1877,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -1941,7 +1973,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-256"
+        className="MuiBox-root MuiBox-root-257"
       >
         <button
           aria-hidden={true}
@@ -2136,9 +2168,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -2148,10 +2192,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -2390,8 +2430,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -2486,7 +2526,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-257"
+        className="MuiBox-root MuiBox-root-258"
       >
         <button
           aria-hidden={true}
@@ -2713,9 +2753,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -2725,10 +2777,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -2967,8 +3015,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -3063,7 +3111,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-258"
+        className="MuiBox-root MuiBox-root-259"
       >
         <button
           aria-hidden={true}
@@ -3258,9 +3306,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -3270,10 +3330,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -3512,8 +3568,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -3608,7 +3664,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-259"
+        className="MuiBox-root MuiBox-root-260"
       >
         <button
           aria-hidden={true}
@@ -3803,9 +3859,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -3815,10 +3883,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -4053,8 +4117,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -4149,7 +4213,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-260"
+        className="MuiBox-root MuiBox-root-261"
       >
         <button
           aria-hidden={true}
@@ -4344,9 +4408,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -4356,10 +4432,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -4598,8 +4670,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -4694,7 +4766,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-261"
+        className="MuiBox-root MuiBox-root-262"
       >
         <button
           aria-hidden={true}
@@ -4889,9 +4961,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -4901,10 +4985,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -5139,8 +5219,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -5235,7 +5315,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-262"
+        className="MuiBox-root MuiBox-root-263"
       >
         <button
           aria-hidden={true}
@@ -5389,9 +5469,21 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/TextField TextField with align
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -5401,10 +5493,6 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/TextField TextField with align
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -5888,8 +5976,8 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/TextField TextField with align
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -5981,7 +6069,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/TextField TextField with align
           value="text align"
         />
         <div
-          className="MuiBox-root MuiBox-root-263"
+          className="MuiBox-root MuiBox-root-264"
         >
           <button
             aria-hidden={true}
@@ -6065,7 +6153,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/TextField TextField with align
           value="text align"
         />
         <div
-          className="MuiBox-root MuiBox-root-264"
+          className="MuiBox-root MuiBox-root-265"
         >
           <button
             aria-hidden={true}
@@ -6149,7 +6237,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/TextField TextField with align
           value="text align"
         />
         <div
-          className="MuiBox-root MuiBox-root-265"
+          className="MuiBox-root MuiBox-root-266"
         >
           <button
             aria-hidden={true}
diff --git a/packages/juno-core/src/components/Hidden/__stories__/__snapshots__/Hidden.story.tsx.snap b/packages/juno-core/src/components/Hidden/__stories__/__snapshots__/Hidden.story.tsx.snap
index 610d45e3..6bfe690a 100644
--- a/packages/juno-core/src/components/Hidden/__stories__/__snapshots__/Hidden.story.tsx.snap
+++ b/packages/juno-core/src/components/Hidden/__stories__/__snapshots__/Hidden.story.tsx.snap
@@ -3,7 +3,7 @@
 exports[`Storyshots 🚀 Cleanup Components/Hidden Hidden 1`] = `
 Array [
   <div
-    className="MuiBox-root MuiBox-root-266"
+    className="MuiBox-root MuiBox-root-267"
   >
     <pre>
       {
diff --git a/packages/juno-core/src/components/Icon/__stories__/__snapshots__/Icon.story.tsx.snap b/packages/juno-core/src/components/Icon/__stories__/__snapshots__/Icon.story.tsx.snap
index e2213821..67cc97fe 100644
--- a/packages/juno-core/src/components/Icon/__stories__/__snapshots__/Icon.story.tsx.snap
+++ b/packages/juno-core/src/components/Icon/__stories__/__snapshots__/Icon.story.tsx.snap
@@ -480,7 +480,7 @@ exports[`Storyshots 🚀 Cleanup Components/Icon Icon With Dark Theme 1`] = `
 >
   <li>
     <button
-      className="MuiButtonBase-root-294 MuiButton-root-267 MuiButton-contained-275 RcButton-contained c1"
+      className="MuiButtonBase-root-295 MuiButton-root-268 MuiButton-contained-276 RcButton-contained c1"
       disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
@@ -498,13 +498,13 @@ exports[`Storyshots 🚀 Cleanup Components/Icon Icon With Dark Theme 1`] = `
       type="button"
     >
       <span
-        className="MuiButton-label-268"
+        className="MuiButton-label-269"
       >
         light
       </span>
     </button>
     <button
-      className="MuiButtonBase-root-294 MuiButton-root-267 MuiButton-contained-275 RcButton-contained c1"
+      className="MuiButtonBase-root-295 MuiButton-root-268 MuiButton-contained-276 RcButton-contained c1"
       disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
@@ -522,7 +522,7 @@ exports[`Storyshots 🚀 Cleanup Components/Icon Icon With Dark Theme 1`] = `
       type="button"
     >
       <span
-        className="MuiButton-label-268"
+        className="MuiButton-label-269"
       >
         dark
       </span>
diff --git a/packages/juno-core/src/components/List/List/__stories__/__snapshots__/ListExamples.story.tsx.snap b/packages/juno-core/src/components/List/List/__stories__/__snapshots__/ListExamples.story.tsx.snap
index d0d30d6e..36776a27 100644
--- a/packages/juno-core/src/components/List/List/__stories__/__snapshots__/ListExamples.story.tsx.snap
+++ b/packages/juno-core/src/components/List/List/__stories__/__snapshots__/ListExamples.story.tsx.snap
@@ -87,9 +87,21 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/List Examples List With Contro
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -99,10 +111,6 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/List Examples List With Contro
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c4 {
   color: #fff;
@@ -229,8 +237,8 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/List Examples List With Contro
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/List/ListItem/__stories__/__snapshots__/ListItemExamples.story.tsx.snap b/packages/juno-core/src/components/List/ListItem/__stories__/__snapshots__/ListItemExamples.story.tsx.snap
index 2fd2daf7..f3a97122 100644
--- a/packages/juno-core/src/components/List/ListItem/__stories__/__snapshots__/ListItemExamples.story.tsx.snap
+++ b/packages/juno-core/src/components/List/ListItem/__stories__/__snapshots__/ListItemExamples.story.tsx.snap
@@ -117,9 +117,21 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -129,10 +141,6 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -228,9 +236,21 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
   background-color: #666666;
 }
 
-.c8.RcIconButton-contained.focus-visible,
-.c8.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c8.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c8.RcIconButton-contained.focus-visible:before,
+.c8.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c8.RcIconButton-contained.focus-visible,
@@ -240,10 +260,6 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
   color: #fff;
 }
 
-.c8.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c8.RcIconButton-contained:active,
 .c8.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -615,8 +631,8 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
@@ -637,8 +653,8 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c8.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c8.RcIconButton-contained:hover,
@@ -970,7 +986,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-312 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-313 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -988,7 +1004,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-315"
+            className="PrivateSwitchBase-input-316"
             data-indeterminate={true}
             onChange={[Function]}
             type="checkbox"
@@ -1058,7 +1074,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-312 MuiRadio-root RcRadio-root c15 c16"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-313 MuiRadio-root RcRadio-root c15 c16"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -1076,12 +1092,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-315"
+            className="PrivateSwitchBase-input-316"
             onChange={[Function]}
             type="radio"
           />
           <div
-            className="PrivateRadioButtonIcon-root-316 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-317 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -1095,7 +1111,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-317"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-318"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -1137,7 +1153,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-312 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-313 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -1155,7 +1171,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-315"
+              className="PrivateSwitchBase-input-316"
               data-indeterminate={true}
               onChange={[Function]}
               type="checkbox"
@@ -1310,7 +1326,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-312 MuiSwitch-switchBase RcSwitch-switchBase"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-313 MuiSwitch-switchBase RcSwitch-switchBase"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -1328,7 +1344,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-315 MuiSwitch-input"
+              className="PrivateSwitchBase-input-316 MuiSwitch-input"
               onChange={[Function]}
               type="checkbox"
             />
@@ -1415,7 +1431,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-312 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-313 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -1433,7 +1449,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-315"
+              className="PrivateSwitchBase-input-316"
               data-indeterminate={true}
               onChange={[Function]}
               type="checkbox"
@@ -1588,9 +1604,21 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
   background-color: #666666;
 }
 
-.c13.RcIconButton-contained.focus-visible,
-.c13.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c13.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c13.RcIconButton-contained.focus-visible:before,
+.c13.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c13.RcIconButton-contained.focus-visible,
@@ -1600,10 +1628,6 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
   color: #fff;
 }
 
-.c13.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c13.RcIconButton-contained:active,
 .c13.RcIconButton-contained:active .c9 {
   color: #fff;
@@ -2054,8 +2078,8 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c13.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c13.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c13.RcIconButton-contained:hover,
@@ -2361,7 +2385,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiCheckbox-root RcCheckbox-root c15 c16"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiCheckbox-root RcCheckbox-root c15 c16"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -2379,7 +2403,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-308"
+            className="PrivateSwitchBase-input-309"
             data-indeterminate={false}
             onChange={[Function]}
             type="checkbox"
@@ -2439,7 +2463,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiRadio-root RcRadio-root c18 c19"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiRadio-root RcRadio-root c18 c19"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -2457,12 +2481,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-308"
+            className="PrivateSwitchBase-input-309"
             onChange={[Function]}
             type="radio"
           />
           <div
-            className="PrivateRadioButtonIcon-root-309 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-310 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -2476,7 +2500,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-310"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-311"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -2529,7 +2553,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiSwitch-switchBase RcSwitch-switchBase"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiSwitch-switchBase RcSwitch-switchBase"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -2547,7 +2571,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-308 MuiSwitch-input"
+              className="PrivateSwitchBase-input-309 MuiSwitch-input"
               onChange={[Function]}
               type="checkbox"
             />
@@ -2604,7 +2628,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiCheckbox-root RcCheckbox-root c15 c16"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiCheckbox-root RcCheckbox-root c15 c16"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -2622,7 +2646,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-308"
+              className="PrivateSwitchBase-input-309"
               data-indeterminate={false}
               onChange={[Function]}
               type="checkbox"
@@ -2691,7 +2715,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiRadio-root RcRadio-root c18 c19"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiRadio-root RcRadio-root c18 c19"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -2709,12 +2733,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-308"
+              className="PrivateSwitchBase-input-309"
               onChange={[Function]}
               type="radio"
             />
             <div
-              className="PrivateRadioButtonIcon-root-309 RadioButtonIcon-root"
+              className="PrivateRadioButtonIcon-root-310 RadioButtonIcon-root"
             >
               <svg
                 aria-hidden={true}
@@ -2728,7 +2752,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               </svg>
               <svg
                 aria-hidden={true}
-                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-310"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-311"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -2790,7 +2814,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiSwitch-switchBase RcSwitch-switchBase"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiSwitch-switchBase RcSwitch-switchBase"
             onBlur={[Function]}
             onDragLeave={[Function]}
             onFocus={[Function]}
@@ -2808,7 +2832,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               className="MuiIconButton-label"
             >
               <input
-                className="PrivateSwitchBase-input-308 MuiSwitch-input"
+                className="PrivateSwitchBase-input-309 MuiSwitch-input"
                 onChange={[Function]}
                 type="checkbox"
               />
@@ -2868,7 +2892,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiCheckbox-root RcCheckbox-root c15 c16"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiCheckbox-root RcCheckbox-root c15 c16"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -2886,7 +2910,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-308"
+            className="PrivateSwitchBase-input-309"
             data-indeterminate={false}
             onChange={[Function]}
             type="checkbox"
@@ -2951,7 +2975,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiRadio-root RcRadio-root c18 c19"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiRadio-root RcRadio-root c18 c19"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -2969,12 +2993,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-308"
+            className="PrivateSwitchBase-input-309"
             onChange={[Function]}
             type="radio"
           />
           <div
-            className="PrivateRadioButtonIcon-root-309 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-310 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -2988,7 +3012,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-310"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-311"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -3046,7 +3070,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiSwitch-switchBase RcSwitch-switchBase"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiSwitch-switchBase RcSwitch-switchBase"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3064,7 +3088,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-308 MuiSwitch-input"
+              className="PrivateSwitchBase-input-309 MuiSwitch-input"
               onChange={[Function]}
               type="checkbox"
             />
@@ -3309,7 +3333,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiCheckbox-root RcCheckbox-root c15 c16"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiCheckbox-root RcCheckbox-root c15 c16"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3327,7 +3351,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-308"
+              className="PrivateSwitchBase-input-309"
               data-indeterminate={false}
               onChange={[Function]}
               type="checkbox"
@@ -3375,7 +3399,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiCheckbox-root RcCheckbox-root c15 c16"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiCheckbox-root RcCheckbox-root c15 c16"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3393,7 +3417,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-308"
+              className="PrivateSwitchBase-input-309"
               data-indeterminate={false}
               onChange={[Function]}
               type="checkbox"
@@ -3453,7 +3477,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiRadio-root RcRadio-root c18 c19"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiRadio-root RcRadio-root c18 c19"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3471,12 +3495,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-308"
+              className="PrivateSwitchBase-input-309"
               onChange={[Function]}
               type="radio"
             />
             <div
-              className="PrivateRadioButtonIcon-root-309 RadioButtonIcon-root"
+              className="PrivateRadioButtonIcon-root-310 RadioButtonIcon-root"
             >
               <svg
                 aria-hidden={true}
@@ -3490,7 +3514,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               </svg>
               <svg
                 aria-hidden={true}
-                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-310"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-311"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -3528,7 +3552,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiRadio-root RcRadio-root c18 c19"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiRadio-root RcRadio-root c18 c19"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3546,12 +3570,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-308"
+              className="PrivateSwitchBase-input-309"
               onChange={[Function]}
               type="radio"
             />
             <div
-              className="PrivateRadioButtonIcon-root-309 RadioButtonIcon-root"
+              className="PrivateRadioButtonIcon-root-310 RadioButtonIcon-root"
             >
               <svg
                 aria-hidden={true}
@@ -3565,7 +3589,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               </svg>
               <svg
                 aria-hidden={true}
-                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-310"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-311"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -3618,7 +3642,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiSwitch-switchBase RcSwitch-switchBase"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiSwitch-switchBase RcSwitch-switchBase"
             onBlur={[Function]}
             onDragLeave={[Function]}
             onFocus={[Function]}
@@ -3636,7 +3660,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               className="MuiIconButton-label"
             >
               <input
-                className="PrivateSwitchBase-input-308 MuiSwitch-input"
+                className="PrivateSwitchBase-input-309 MuiSwitch-input"
                 onChange={[Function]}
                 type="checkbox"
               />
@@ -3676,7 +3700,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-305 MuiSwitch-switchBase RcSwitch-switchBase"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-306 MuiSwitch-switchBase RcSwitch-switchBase"
             onBlur={[Function]}
             onDragLeave={[Function]}
             onFocus={[Function]}
@@ -3694,7 +3718,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               className="MuiIconButton-label"
             >
               <input
-                className="PrivateSwitchBase-input-308 MuiSwitch-input"
+                className="PrivateSwitchBase-input-309 MuiSwitch-input"
                 onChange={[Function]}
                 type="checkbox"
               />
diff --git a/packages/juno-core/src/components/List/ListItemSecondaryAction/__stories__/__snapshots__/ListItemSecondaryAction.story.tsx.snap b/packages/juno-core/src/components/List/ListItemSecondaryAction/__stories__/__snapshots__/ListItemSecondaryAction.story.tsx.snap
index b6c82da4..4e2aa733 100644
--- a/packages/juno-core/src/components/List/ListItemSecondaryAction/__stories__/__snapshots__/ListItemSecondaryAction.story.tsx.snap
+++ b/packages/juno-core/src/components/List/ListItemSecondaryAction/__stories__/__snapshots__/ListItemSecondaryAction.story.tsx.snap
@@ -223,7 +223,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItemSecondaryAction ListIt
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-319 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c5"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-320 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c5"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -241,7 +241,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItemSecondaryAction ListIt
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-322"
+            className="PrivateSwitchBase-input-323"
             data-indeterminate={true}
             onChange={[Function]}
             type="checkbox"
diff --git a/packages/juno-core/src/components/Menu/MenuItem/__stories__/__snapshots__/MenuItemExamples.story.tsx.snap b/packages/juno-core/src/components/Menu/MenuItem/__stories__/__snapshots__/MenuItemExamples.story.tsx.snap
index d5934834..cb4c858e 100644
--- a/packages/juno-core/src/components/Menu/MenuItem/__stories__/__snapshots__/MenuItemExamples.story.tsx.snap
+++ b/packages/juno-core/src/components/Menu/MenuItem/__stories__/__snapshots__/MenuItemExamples.story.tsx.snap
@@ -1914,7 +1914,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-323 MuiCheckbox-root RcCheckbox-root c2"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-324 MuiCheckbox-root RcCheckbox-root c2"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -1932,7 +1932,7 @@ Array [
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-326"
+            className="PrivateSwitchBase-input-327"
             data-indeterminate={false}
             onChange={[Function]}
             type="checkbox"
@@ -2126,7 +2126,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-323 MuiRadio-root RcRadio-root c2"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-324 MuiRadio-root RcRadio-root c2"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -2144,12 +2144,12 @@ Array [
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-326"
+            className="PrivateSwitchBase-input-327"
             onChange={[Function]}
             type="radio"
           />
           <div
-            className="PrivateRadioButtonIcon-root-327 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-328 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -2163,7 +2163,7 @@ Array [
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-328"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-329"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -2402,7 +2402,7 @@ Array [
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-323 MuiSwitch-switchBase RcSwitch-switchBase"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-324 MuiSwitch-switchBase RcSwitch-switchBase"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -2420,7 +2420,7 @@ Array [
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-326 MuiSwitch-input"
+              className="PrivateSwitchBase-input-327 MuiSwitch-input"
               onChange={[Function]}
               type="checkbox"
             />
@@ -3005,9 +3005,21 @@ Array [
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -3017,10 +3029,6 @@ Array [
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -3141,8 +3149,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
@@ -3593,7 +3601,7 @@ Array [
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-323 MuiCheckbox-root RcCheckbox-root c4"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-324 MuiCheckbox-root RcCheckbox-root c4"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3611,7 +3619,7 @@ Array [
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-326"
+              className="PrivateSwitchBase-input-327"
               data-indeterminate={false}
               onChange={[Function]}
               type="checkbox"
@@ -3659,7 +3667,7 @@ Array [
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-323 MuiCheckbox-root RcCheckbox-root c4"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-324 MuiCheckbox-root RcCheckbox-root c4"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3677,7 +3685,7 @@ Array [
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-326"
+              className="PrivateSwitchBase-input-327"
               data-indeterminate={false}
               onChange={[Function]}
               type="checkbox"
diff --git a/packages/juno-core/src/components/Portal/__stories__/__snapshots__/Portal.story.tsx.snap b/packages/juno-core/src/components/Portal/__stories__/__snapshots__/Portal.story.tsx.snap
index 4dbe1f88..cd82973f 100644
--- a/packages/juno-core/src/components/Portal/__stories__/__snapshots__/Portal.story.tsx.snap
+++ b/packages/juno-core/src/components/Portal/__stories__/__snapshots__/Portal.story.tsx.snap
@@ -15,7 +15,7 @@ exports[`Storyshots 🚀 Cleanup Components/Portal Portal 1`] = `
 }
 
 <div
-  className="MuiBox-root MuiBox-root-330"
+  className="MuiBox-root MuiBox-root-331"
 >
   <p
     className="MuiTypography-root c0 c1 MuiTypography-noWrap"
diff --git a/packages/juno-core/src/components/PortalHost/__stories__/__snapshots__/PortalHost.story.tsx.snap b/packages/juno-core/src/components/PortalHost/__stories__/__snapshots__/PortalHost.story.tsx.snap
index d0d4868a..06e0f629 100644
--- a/packages/juno-core/src/components/PortalHost/__stories__/__snapshots__/PortalHost.story.tsx.snap
+++ b/packages/juno-core/src/components/PortalHost/__stories__/__snapshots__/PortalHost.story.tsx.snap
@@ -339,9 +339,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -351,10 +363,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -536,8 +544,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -595,7 +603,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-331"
+        className="MuiBox-root MuiBox-root-332"
       >
         <button
           aria-hidden={true}
diff --git a/packages/juno-core/src/components/Table/__stories__/__snapshots__/Table.story.tsx.snap b/packages/juno-core/src/components/Table/__stories__/__snapshots__/Table.story.tsx.snap
index 14a6dbe4..ad28d8a9 100644
--- a/packages/juno-core/src/components/Table/__stories__/__snapshots__/Table.story.tsx.snap
+++ b/packages/juno-core/src/components/Table/__stories__/__snapshots__/Table.story.tsx.snap
@@ -821,7 +821,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -841,7 +841,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -3147,7 +3147,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -3167,7 +3167,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -5366,7 +5366,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -5386,7 +5386,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -7585,7 +7585,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -7605,7 +7605,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -9804,7 +9804,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -9824,7 +9824,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -12023,7 +12023,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -12043,7 +12043,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -14242,7 +14242,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -14262,7 +14262,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -16461,7 +16461,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -16481,7 +16481,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -18680,7 +18680,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -18700,7 +18700,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -20899,7 +20899,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -20919,7 +20919,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -23118,7 +23118,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -23138,7 +23138,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -25337,7 +25337,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -25357,7 +25357,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -27556,7 +27556,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -27576,7 +27576,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -29775,7 +29775,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -29795,7 +29795,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -31994,7 +31994,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -32014,7 +32014,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -34213,7 +34213,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -34233,7 +34233,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -36432,7 +36432,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -36452,7 +36452,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -38651,7 +38651,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -38671,7 +38671,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -40870,7 +40870,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -40890,7 +40890,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -43089,7 +43089,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -43109,7 +43109,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -45308,7 +45308,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -45328,7 +45328,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -47527,7 +47527,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -47547,7 +47547,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -49746,7 +49746,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -49766,7 +49766,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -51965,7 +51965,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -51985,7 +51985,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -54184,7 +54184,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -54204,7 +54204,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -56403,7 +56403,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -56423,7 +56423,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -58622,7 +58622,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-332 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
             onBlur={[Function]}
             onClick={[Function]}
             onDragLeave={[Function]}
@@ -58642,7 +58642,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Table 1`] = `
             >
               <input
                 checked={false}
-                className="PrivateSwitchBase-input-335"
+                className="PrivateSwitchBase-input-336"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -66572,7 +66572,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Virtualized Table 1`] =
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-336 MuiCheckbox-root RcCheckbox-root c3"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-337 MuiCheckbox-root RcCheckbox-root c3"
               onBlur={[Function]}
               onClick={[Function]}
               onDragLeave={[Function]}
@@ -66592,7 +66592,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Virtualized Table 1`] =
               >
                 <input
                   checked={false}
-                  className="PrivateSwitchBase-input-339"
+                  className="PrivateSwitchBase-input-340"
                   data-indeterminate={false}
                   onChange={[Function]}
                   type="checkbox"
diff --git a/packages/juno-core/src/components/TablePagination/__stories__/__snapshots__/TablePaginationComponent.story.tsx.snap b/packages/juno-core/src/components/TablePagination/__stories__/__snapshots__/TablePaginationComponent.story.tsx.snap
index 9cb9ed3d..dae605aa 100644
--- a/packages/juno-core/src/components/TablePagination/__stories__/__snapshots__/TablePaginationComponent.story.tsx.snap
+++ b/packages/juno-core/src/components/TablePagination/__stories__/__snapshots__/TablePaginationComponent.story.tsx.snap
@@ -97,9 +97,21 @@ Array [
   background-color: #666666;
 }
 
-.c10.RcIconButton-contained.focus-visible,
-.c10.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c10.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c10.RcIconButton-contained.focus-visible:before,
+.c10.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c10.RcIconButton-contained.focus-visible,
@@ -109,10 +121,6 @@ Array [
   color: #fff;
 }
 
-.c10.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c10.RcIconButton-contained:active,
 .c10.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -194,9 +202,21 @@ Array [
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -206,10 +226,6 @@ Array [
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -476,8 +492,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c10.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c10.RcIconButton-contained:hover,
@@ -498,8 +514,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
@@ -760,9 +776,21 @@ Array [
   background-color: #666666;
 }
 
-.c4.RcIconButton-contained.focus-visible,
-.c4.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c4.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c4.RcIconButton-contained.focus-visible:before,
+.c4.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c4.RcIconButton-contained.focus-visible,
@@ -772,10 +800,6 @@ Array [
   color: #fff;
 }
 
-.c4.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c4.RcIconButton-contained:active,
 .c4.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -857,9 +881,21 @@ Array [
   background-color: #666666;
 }
 
-.c8.RcIconButton-contained.focus-visible,
-.c8.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c8.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c8.RcIconButton-contained.focus-visible:before,
+.c8.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c8.RcIconButton-contained.focus-visible,
@@ -869,10 +905,6 @@ Array [
   color: #fff;
 }
 
-.c8.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c8.RcIconButton-contained:active,
 .c8.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -970,8 +1002,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c4.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c4.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c4.RcIconButton-contained:hover,
@@ -992,8 +1024,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c8.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c8.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c8.RcIconButton-contained:hover,
@@ -1245,9 +1277,21 @@ Array [
   background-color: #666666;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -1257,10 +1301,6 @@ Array [
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -1342,9 +1382,21 @@ Array [
   background-color: #666666;
 }
 
-.c13.RcIconButton-contained.focus-visible,
-.c13.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c13.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c13.RcIconButton-contained.focus-visible:before,
+.c13.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c13.RcIconButton-contained.focus-visible,
@@ -1354,10 +1406,6 @@ Array [
   color: #fff;
 }
 
-.c13.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c13.RcIconButton-contained:active,
 .c13.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -1631,8 +1679,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -1653,8 +1701,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c13.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c13.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c13.RcIconButton-contained:hover,
@@ -1972,9 +2020,21 @@ Array [
   background-color: #666666;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -1984,10 +2044,6 @@ Array [
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -2069,9 +2125,21 @@ Array [
   background-color: #666666;
 }
 
-.c13.RcIconButton-contained.focus-visible,
-.c13.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c13.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c13.RcIconButton-contained.focus-visible:before,
+.c13.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c13.RcIconButton-contained.focus-visible,
@@ -2081,10 +2149,6 @@ Array [
   color: #fff;
 }
 
-.c13.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c13.RcIconButton-contained:active,
 .c13.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -2358,8 +2422,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -2380,8 +2444,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c13.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c13.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c13.RcIconButton-contained:hover,
@@ -2738,9 +2802,21 @@ Array [
   background-color: #666666;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -2750,10 +2826,6 @@ Array [
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -2835,9 +2907,21 @@ Array [
   background-color: #666666;
 }
 
-.c13.RcIconButton-contained.focus-visible,
-.c13.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c13.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c13.RcIconButton-contained.focus-visible:before,
+.c13.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c13.RcIconButton-contained.focus-visible,
@@ -2847,10 +2931,6 @@ Array [
   color: #fff;
 }
 
-.c13.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c13.RcIconButton-contained:active,
 .c13.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -3124,8 +3204,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -3146,8 +3226,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c13.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c13.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c13.RcIconButton-contained:hover,
@@ -3417,9 +3497,21 @@ Array [
   background-color: #666666;
 }
 
-.c11.RcIconButton-contained.focus-visible,
-.c11.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c11.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c11.RcIconButton-contained.focus-visible:before,
+.c11.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c11.RcIconButton-contained.focus-visible,
@@ -3429,10 +3521,6 @@ Array [
   color: #fff;
 }
 
-.c11.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c11.RcIconButton-contained:active,
 .c11.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -3514,9 +3602,21 @@ Array [
   background-color: #666666;
 }
 
-.c13.RcIconButton-contained.focus-visible,
-.c13.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c13.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c13.RcIconButton-contained.focus-visible:before,
+.c13.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c13.RcIconButton-contained.focus-visible,
@@ -3526,10 +3626,6 @@ Array [
   color: #fff;
 }
 
-.c13.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c13.RcIconButton-contained:active,
 .c13.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -3803,8 +3899,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c11.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c11.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c11.RcIconButton-contained:hover,
@@ -3825,8 +3921,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c13.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c13.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c13.RcIconButton-contained:hover,
@@ -4136,9 +4232,21 @@ Array [
   background-color: #666666;
 }
 
-.c10.RcIconButton-contained.focus-visible,
-.c10.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c10.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c10.RcIconButton-contained.focus-visible:before,
+.c10.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c10.RcIconButton-contained.focus-visible,
@@ -4148,10 +4256,6 @@ Array [
   color: #fff;
 }
 
-.c10.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c10.RcIconButton-contained:active,
 .c10.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -4233,9 +4337,21 @@ Array [
   background-color: #666666;
 }
 
-.c12.RcIconButton-contained.focus-visible,
-.c12.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c12.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c12.RcIconButton-contained.focus-visible:before,
+.c12.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c12.RcIconButton-contained.focus-visible,
@@ -4245,10 +4361,6 @@ Array [
   color: #fff;
 }
 
-.c12.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c12.RcIconButton-contained:active,
 .c12.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -4518,8 +4630,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c10.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c10.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c10.RcIconButton-contained:hover,
@@ -4540,8 +4652,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c12.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c12.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c12.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/components/Tabs/TabList/__stories__/__snapshots__/TabList.story.tsx.snap b/packages/juno-core/src/components/Tabs/TabList/__stories__/__snapshots__/TabList.story.tsx.snap
index 61f72f15..7e36816d 100644
--- a/packages/juno-core/src/components/Tabs/TabList/__stories__/__snapshots__/TabList.story.tsx.snap
+++ b/packages/juno-core/src/components/Tabs/TabList/__stories__/__snapshots__/TabList.story.tsx.snap
@@ -371,7 +371,7 @@ Array [
           </button>
         </div>
         <span
-          className="PrivateTabIndicator-root-340 PrivateTabIndicator-colorPrimary-341 MuiTabs-indicator RcTabs-indicator"
+          className="PrivateTabIndicator-root-341 PrivateTabIndicator-colorPrimary-342 MuiTabs-indicator RcTabs-indicator"
           style={
             Object {
               "left": 0,
diff --git a/packages/juno-core/src/components/Tabs/TabPanel/__stories__/__snapshots__/TabPanel.story.tsx.snap b/packages/juno-core/src/components/Tabs/TabPanel/__stories__/__snapshots__/TabPanel.story.tsx.snap
index f5f0cd17..49e729a2 100644
--- a/packages/juno-core/src/components/Tabs/TabPanel/__stories__/__snapshots__/TabPanel.story.tsx.snap
+++ b/packages/juno-core/src/components/Tabs/TabPanel/__stories__/__snapshots__/TabPanel.story.tsx.snap
@@ -95,7 +95,7 @@ Array [
               Tab 0
             </span>
             <span
-              className="PrivateTabIndicator-root-344 PrivateTabIndicator-colorPrimary-345 MuiTabs-indicator RcTabs-indicator"
+              className="PrivateTabIndicator-root-345 PrivateTabIndicator-colorPrimary-346 MuiTabs-indicator RcTabs-indicator"
               style={Object {}}
             />
           </button>
diff --git a/packages/juno-core/src/components/Tabs/Tabs/__stories__/__snapshots__/Tabs.story.tsx.snap b/packages/juno-core/src/components/Tabs/Tabs/__stories__/__snapshots__/Tabs.story.tsx.snap
index 2c331f45..22def159 100644
--- a/packages/juno-core/src/components/Tabs/Tabs/__stories__/__snapshots__/Tabs.story.tsx.snap
+++ b/packages/juno-core/src/components/Tabs/Tabs/__stories__/__snapshots__/Tabs.story.tsx.snap
@@ -289,7 +289,7 @@ exports[`Storyshots 🚀 Cleanup Components/Tabs/Tabs Tabs 1`] = `
         </button>
       </div>
       <span
-        className="PrivateTabIndicator-root-348 PrivateTabIndicator-colorPrimary-349 MuiTabs-indicator RcTabs-indicator"
+        className="PrivateTabIndicator-root-349 PrivateTabIndicator-colorPrimary-350 MuiTabs-indicator RcTabs-indicator"
         style={
           Object {
             "left": 0,
@@ -487,7 +487,7 @@ Array [
               </span>
             </span>
             <span
-              className="PrivateTabIndicator-root-357 PrivateTabIndicator-colorPrimary-358 MuiTabs-indicator RcTabs-indicator"
+              className="PrivateTabIndicator-root-358 PrivateTabIndicator-colorPrimary-359 MuiTabs-indicator RcTabs-indicator"
               style={Object {}}
             />
           </button>
@@ -1116,7 +1116,7 @@ Array [
           </button>
         </div>
         <span
-          className="PrivateTabIndicator-root-352 PrivateTabIndicator-colorPrimary-353 MuiTabs-indicator RcTabs-indicator"
+          className="PrivateTabIndicator-root-353 PrivateTabIndicator-colorPrimary-354 MuiTabs-indicator RcTabs-indicator"
           style={
             Object {
               "left": 0,
@@ -1549,7 +1549,7 @@ Array [
           </button>
         </div>
         <span
-          className="PrivateTabIndicator-root-352 PrivateTabIndicator-colorPrimary-353 MuiTabs-indicator RcTabs-indicator"
+          className="PrivateTabIndicator-root-353 PrivateTabIndicator-colorPrimary-354 MuiTabs-indicator RcTabs-indicator"
           style={
             Object {
               "left": 0,
@@ -1970,7 +1970,7 @@ Array [
           </button>
         </div>
         <span
-          className="PrivateTabIndicator-root-352 PrivateTabIndicator-colorPrimary-353 MuiTabs-indicator RcTabs-indicator"
+          className="PrivateTabIndicator-root-353 PrivateTabIndicator-colorPrimary-354 MuiTabs-indicator RcTabs-indicator"
           style={
             Object {
               "left": 0,
@@ -2471,7 +2471,7 @@ Array [
           </button>
         </div>
         <span
-          className="PrivateTabIndicator-root-352 PrivateTabIndicator-colorPrimary-353 MuiTabs-indicator RcTabs-indicator"
+          className="PrivateTabIndicator-root-353 PrivateTabIndicator-colorPrimary-354 MuiTabs-indicator RcTabs-indicator"
           style={
             Object {
               "left": 0,
@@ -2571,7 +2571,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-356"
+    className="MuiBox-root MuiBox-root-357"
   >
     <button
       className="MuiButtonBase-root MuiButton-root MuiButton-contained RcButton-contained c0"
@@ -3047,7 +3047,7 @@ Array [
           </button>
         </div>
         <span
-          className="PrivateTabIndicator-root-361 PrivateTabIndicator-colorPrimary-362 MuiTabs-indicator RcTabs-indicator"
+          className="PrivateTabIndicator-root-362 PrivateTabIndicator-colorPrimary-363 MuiTabs-indicator RcTabs-indicator"
           style={
             Object {
               "left": 0,
diff --git a/packages/juno-core/src/components/Tooltip/__stories__/__snapshots__/Tooltip.story.tsx.snap b/packages/juno-core/src/components/Tooltip/__stories__/__snapshots__/Tooltip.story.tsx.snap
index ac1f4b62..f59856b1 100644
--- a/packages/juno-core/src/components/Tooltip/__stories__/__snapshots__/Tooltip.story.tsx.snap
+++ b/packages/juno-core/src/components/Tooltip/__stories__/__snapshots__/Tooltip.story.tsx.snap
@@ -77,7 +77,7 @@ exports[`Storyshots 🚀 Cleanup Components/Tooltip Tooltip 1`] = `
 }
 
 <div
-  className="MuiBox-root MuiBox-root-365"
+  className="MuiBox-root MuiBox-root-366"
 >
   <button
     aria-describedby={null}
@@ -829,9 +829,21 @@ Array [
   background-color: #666666;
 }
 
-.c1.RcIconButton-contained.focus-visible,
-.c1.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c1.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c1.RcIconButton-contained.focus-visible:before,
+.c1.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c1.RcIconButton-contained.focus-visible,
@@ -841,10 +853,6 @@ Array [
   color: #fff;
 }
 
-.c1.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c1.RcIconButton-contained:active,
 .c1.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -869,8 +877,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c1.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c1.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c1.RcIconButton-contained:hover,
@@ -1142,7 +1150,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-366 MuiCheckbox-root RcCheckbox-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-367 MuiCheckbox-root RcCheckbox-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -1160,7 +1168,7 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-369"
+          className="PrivateSwitchBase-input-370"
           data-indeterminate={false}
           disabled={false}
           onChange={[Function]}
@@ -1293,7 +1301,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-366 MuiRadio-root RcRadio-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-367 MuiRadio-root RcRadio-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -1311,13 +1319,13 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-369"
+          className="PrivateSwitchBase-input-370"
           disabled={false}
           onChange={[Function]}
           type="radio"
         />
         <div
-          className="PrivateRadioButtonIcon-root-370 RadioButtonIcon-root"
+          className="PrivateRadioButtonIcon-root-371 RadioButtonIcon-root"
         >
           <svg
             aria-hidden={true}
@@ -1331,7 +1339,7 @@ Array [
           </svg>
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-371"
+            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-372"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -3015,7 +3023,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-373 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-374 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -3035,7 +3043,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-376 MuiSwitch-input"
+            className="PrivateSwitchBase-input-377 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
diff --git a/packages/juno-core/src/components/Transitions/Collapse/__stories__/__snapshots__/Collapse.story.tsx.snap b/packages/juno-core/src/components/Transitions/Collapse/__stories__/__snapshots__/Collapse.story.tsx.snap
index 6a8e9fdf..99ce1e07 100644
--- a/packages/juno-core/src/components/Transitions/Collapse/__stories__/__snapshots__/Collapse.story.tsx.snap
+++ b/packages/juno-core/src/components/Transitions/Collapse/__stories__/__snapshots__/Collapse.story.tsx.snap
@@ -140,7 +140,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-377"
+    className="MuiBox-root MuiBox-root-378"
   >
     <div
       className="MuiCollapse-root MuiCollapse-hidden"
@@ -157,7 +157,7 @@ Array [
           className="MuiCollapse-wrapperInner"
         >
           <div
-            className="MuiBox-root MuiBox-root-378"
+            className="MuiBox-root MuiBox-root-379"
           />
         </div>
       </div>
@@ -177,7 +177,7 @@ Array [
           className="MuiCollapse-wrapperInner"
         >
           <div
-            className="MuiBox-root MuiBox-root-379"
+            className="MuiBox-root MuiBox-root-380"
           />
         </div>
       </div>
diff --git a/packages/juno-core/src/components/Transitions/Fade/__stories__/__snapshots__/Fade.story.tsx.snap b/packages/juno-core/src/components/Transitions/Fade/__stories__/__snapshots__/Fade.story.tsx.snap
index e19fcc48..af5ddbdb 100644
--- a/packages/juno-core/src/components/Transitions/Fade/__stories__/__snapshots__/Fade.story.tsx.snap
+++ b/packages/juno-core/src/components/Transitions/Fade/__stories__/__snapshots__/Fade.story.tsx.snap
@@ -114,7 +114,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-380 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-381 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -134,7 +134,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-383 MuiSwitch-input"
+            className="PrivateSwitchBase-input-384 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -168,10 +168,10 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-384"
+    className="MuiBox-root MuiBox-root-385"
   >
     <div
-      className="MuiBox-root MuiBox-root-385"
+      className="MuiBox-root MuiBox-root-386"
       style={
         Object {
           "opacity": 0,
diff --git a/packages/juno-core/src/components/Transitions/Grow/__stories__/__snapshots__/Grow.story.tsx.snap b/packages/juno-core/src/components/Transitions/Grow/__stories__/__snapshots__/Grow.story.tsx.snap
index febab32a..b458bfb2 100644
--- a/packages/juno-core/src/components/Transitions/Grow/__stories__/__snapshots__/Grow.story.tsx.snap
+++ b/packages/juno-core/src/components/Transitions/Grow/__stories__/__snapshots__/Grow.story.tsx.snap
@@ -114,7 +114,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-386 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-387 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -134,7 +134,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-389 MuiSwitch-input"
+            className="PrivateSwitchBase-input-390 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -168,10 +168,10 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-390"
+    className="MuiBox-root MuiBox-root-391"
   >
     <div
-      className="MuiBox-root MuiBox-root-391"
+      className="MuiBox-root MuiBox-root-392"
       style={
         Object {
           "opacity": 0,
diff --git a/packages/juno-core/src/components/Transitions/Slide/__stories__/__snapshots__/Slide.story.tsx.snap b/packages/juno-core/src/components/Transitions/Slide/__stories__/__snapshots__/Slide.story.tsx.snap
index 6e5d72a9..b560f435 100644
--- a/packages/juno-core/src/components/Transitions/Slide/__stories__/__snapshots__/Slide.story.tsx.snap
+++ b/packages/juno-core/src/components/Transitions/Slide/__stories__/__snapshots__/Slide.story.tsx.snap
@@ -114,7 +114,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-392 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-393 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -134,7 +134,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-395 MuiSwitch-input"
+            className="PrivateSwitchBase-input-396 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -168,10 +168,10 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-396"
+    className="MuiBox-root MuiBox-root-397"
   >
     <div
-      className="MuiBox-root MuiBox-root-397"
+      className="MuiBox-root MuiBox-root-398"
       style={
         Object {
           "visibility": "hidden",
diff --git a/packages/juno-core/src/components/Transitions/Zoom/__stories__/__snapshots__/Zoom.story.tsx.snap b/packages/juno-core/src/components/Transitions/Zoom/__stories__/__snapshots__/Zoom.story.tsx.snap
index fc3cea32..90ba7da3 100644
--- a/packages/juno-core/src/components/Transitions/Zoom/__stories__/__snapshots__/Zoom.story.tsx.snap
+++ b/packages/juno-core/src/components/Transitions/Zoom/__stories__/__snapshots__/Zoom.story.tsx.snap
@@ -114,7 +114,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-398 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-399 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -134,7 +134,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-401 MuiSwitch-input"
+            className="PrivateSwitchBase-input-402 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -168,10 +168,10 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-402"
+    className="MuiBox-root MuiBox-root-403"
   >
     <div
-      className="MuiBox-root MuiBox-root-403"
+      className="MuiBox-root MuiBox-root-404"
       style={
         Object {
           "transform": "scale(0)",
diff --git a/packages/juno-core/src/components/Transitions/ZoomFrom/__stories__/__snapshots__/ZoomFrom.story.tsx.snap b/packages/juno-core/src/components/Transitions/ZoomFrom/__stories__/__snapshots__/ZoomFrom.story.tsx.snap
index d3dfafb7..46196da6 100644
--- a/packages/juno-core/src/components/Transitions/ZoomFrom/__stories__/__snapshots__/ZoomFrom.story.tsx.snap
+++ b/packages/juno-core/src/components/Transitions/ZoomFrom/__stories__/__snapshots__/ZoomFrom.story.tsx.snap
@@ -114,7 +114,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-404 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-405 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -134,7 +134,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-407 MuiSwitch-input"
+            className="PrivateSwitchBase-input-408 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -320,7 +320,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-408 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-409 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -340,7 +340,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-411 MuiSwitch-input"
+            className="PrivateSwitchBase-input-412 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
diff --git a/packages/juno-core/src/components/Transitions/ZoomInFadeOut/__stories__/__snapshots__/ZoomInFadeOut.story.tsx.snap b/packages/juno-core/src/components/Transitions/ZoomInFadeOut/__stories__/__snapshots__/ZoomInFadeOut.story.tsx.snap
index 21d303dd..6d0b495c 100644
--- a/packages/juno-core/src/components/Transitions/ZoomInFadeOut/__stories__/__snapshots__/ZoomInFadeOut.story.tsx.snap
+++ b/packages/juno-core/src/components/Transitions/ZoomInFadeOut/__stories__/__snapshots__/ZoomInFadeOut.story.tsx.snap
@@ -114,7 +114,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-412 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-413 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -134,7 +134,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-415 MuiSwitch-input"
+            className="PrivateSwitchBase-input-416 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
diff --git a/packages/juno-core/src/foundation/__stories__/__snapshots__/Palette.story.tsx.snap b/packages/juno-core/src/foundation/__stories__/__snapshots__/Palette.story.tsx.snap
index 7ff1f979..4f5ce134 100644
--- a/packages/juno-core/src/foundation/__stories__/__snapshots__/Palette.story.tsx.snap
+++ b/packages/juno-core/src/foundation/__stories__/__snapshots__/Palette.story.tsx.snap
@@ -101,9 +101,21 @@ exports[`Storyshots 🔧 Foundation/Palette Palette 1`] = `
   background-color: #666666;
 }
 
-.c3.RcIconButton-contained.focus-visible,
-.c3.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c3.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c3.RcIconButton-contained.focus-visible:before,
+.c3.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c3.RcIconButton-contained.focus-visible,
@@ -113,10 +125,6 @@ exports[`Storyshots 🔧 Foundation/Palette Palette 1`] = `
   color: #fff;
 }
 
-.c3.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c3.RcIconButton-contained:active,
 .c3.RcIconButton-contained:active .c6 {
   color: #fff;
@@ -874,8 +882,8 @@ exports[`Storyshots 🔧 Foundation/Palette Palette 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c3.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c3.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c3.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/foundation/hooks/useAudio/__stories__/__snapshots__/useAudio.story.tsx.snap b/packages/juno-core/src/foundation/hooks/useAudio/__stories__/__snapshots__/useAudio.story.tsx.snap
index 11c84c6d..d51e4bcc 100644
--- a/packages/juno-core/src/foundation/hooks/useAudio/__stories__/__snapshots__/useAudio.story.tsx.snap
+++ b/packages/juno-core/src/foundation/hooks/useAudio/__stories__/__snapshots__/useAudio.story.tsx.snap
@@ -94,9 +94,21 @@ exports[`Storyshots 🔧 Foundation/Hooks/useAudio useAudio 1`] = `
   background-color: #066FAC;
 }
 
-.c0.RcIconButton-contained.focus-visible,
-.c0.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(6,111,172,0.84);
+.c0.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c0.RcIconButton-contained.focus-visible:before,
+.c0.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c0.RcIconButton-contained.focus-visible,
@@ -106,10 +118,6 @@ exports[`Storyshots 🔧 Foundation/Hooks/useAudio useAudio 1`] = `
   color: #fff;
 }
 
-.c0.RcIconButton-contained:active {
-  background-color: rgba(6,111,172,0.76);
-}
-
 .c0.RcIconButton-contained:active,
 .c0.RcIconButton-contained:active .c1 {
   color: #fff;
@@ -134,8 +142,8 @@ exports[`Storyshots 🔧 Foundation/Hooks/useAudio useAudio 1`] = `
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c0.RcIconButton-contained:hover {
-    background-color: rgba(6,111,172,0.92);
+  .c0.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c0.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/foundation/hooks/useKeyDownOnce/__stories__/__snapshots__/useKeyDownOnce.story.tsx.snap b/packages/juno-core/src/foundation/hooks/useKeyDownOnce/__stories__/__snapshots__/useKeyDownOnce.story.tsx.snap
index 07bd634f..d77ba74d 100644
--- a/packages/juno-core/src/foundation/hooks/useKeyDownOnce/__stories__/__snapshots__/useKeyDownOnce.story.tsx.snap
+++ b/packages/juno-core/src/foundation/hooks/useKeyDownOnce/__stories__/__snapshots__/useKeyDownOnce.story.tsx.snap
@@ -129,9 +129,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -141,10 +153,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -319,8 +327,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
@@ -555,9 +563,21 @@ Array [
   background-color: #666666;
 }
 
-.c2.RcIconButton-contained.focus-visible,
-.c2.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c2.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c2.RcIconButton-contained.focus-visible:before,
+.c2.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c2.RcIconButton-contained.focus-visible,
@@ -567,10 +587,6 @@ Array [
   color: #fff;
 }
 
-.c2.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c2.RcIconButton-contained:active,
 .c2.RcIconButton-contained:active .c5 {
   color: #fff;
@@ -745,8 +761,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c2.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c2.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c2.RcIconButton-contained:hover,
diff --git a/packages/juno-core/src/foundation/hooks/useKeyboardMoveFocus/__stories__/__snapshots__/useOnlyOneFocusable.story.tsx.snap b/packages/juno-core/src/foundation/hooks/useKeyboardMoveFocus/__stories__/__snapshots__/useOnlyOneFocusable.story.tsx.snap
index f13a01fa..6e214e76 100644
--- a/packages/juno-core/src/foundation/hooks/useKeyboardMoveFocus/__stories__/__snapshots__/useOnlyOneFocusable.story.tsx.snap
+++ b/packages/juno-core/src/foundation/hooks/useKeyboardMoveFocus/__stories__/__snapshots__/useOnlyOneFocusable.story.tsx.snap
@@ -129,9 +129,21 @@ Array [
   background-color: #666666;
 }
 
-.c1.RcIconButton-contained.focus-visible,
-.c1.RcIconButton-contained[data-focus-visible-added] {
-  background-color: rgba(102,102,102,0.84);
+.c1.RcIconButton-contained:before {
+  content: '';
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  position: absolute;
+}
+
+.c1.RcIconButton-contained.focus-visible:before,
+.c1.RcIconButton-contained[data-focus-visible-added]:before {
+  background-color: rgba(255,255,255,0.16);
 }
 
 .c1.RcIconButton-contained.focus-visible,
@@ -141,10 +153,6 @@ Array [
   color: #fff;
 }
 
-.c1.RcIconButton-contained:active {
-  background-color: rgba(102,102,102,0.76);
-}
-
 .c1.RcIconButton-contained:active,
 .c1.RcIconButton-contained:active .c2 {
   color: #fff;
@@ -173,8 +181,8 @@ Array [
 }
 
 @media (hover:hover) and (pointer:fine) {
-  .c1.RcIconButton-contained:hover {
-    background-color: rgba(102,102,102,0.92);
+  .c1.RcIconButton-contained:hover:before {
+    background-color: rgba(255,255,255,0.08);
   }
 
   .c1.RcIconButton-contained:hover,
diff --git a/sync-github.json b/sync-github.json
index 3dba9a3d..10a7ba9f 100644
--- a/sync-github.json
+++ b/sync-github.json
@@ -1,3 +1,3 @@
 {
-  "latestCommitSHA": "8b063d92b0c92bfb0479b1de8436954073ae476c"
+  "latestCommitSHA": "fdb607514cbb6046a93e305d30c008c5a03a7dbd"
 }
\ No newline at end of file