From a7890597df6c843706a02e3747d184f7a708bc3d Mon Sep 17 00:00:00 2001
From: Alan Zou <itisalanlife@gmail.com>
Date: Mon, 27 May 2024 04:25:57 +0000
Subject: [PATCH] chore(Snapshot): [juno-core] update snapshot

---
 .../__snapshots__/Avatar.story.tsx.snap       |   2 +-
 .../__snapshots__/Box.story.tsx.snap          |   4 +-
 .../__snapshots__/Button.story.tsx.snap       |  22 +-
 .../__snapshots__/IconButton.story.tsx.snap   | 108 +++---
 .../__snapshots__/Card.story.tsx.snap         |  36 +-
 .../CardSelectionArea.story.tsx.snap          |   4 +-
 .../DialTextField.story.tsx.snap              |   2 +-
 .../__snapshots__/Dialer.story.tsx.snap       |  16 +-
 .../__snapshots__/DialogTitle.story.tsx.snap  |   4 +-
 .../__snapshots__/Dialog.story.tsx.snap       |  36 +-
 .../__snapshots__/Downshift.story.tsx.snap    |  84 ++---
 .../useSuggestionList.story.tsx.snap          |   4 +-
 .../__snapshots__/Drawer.story.tsx.snap       |   4 +-
 .../__snapshots__/Checkbox.story.tsx.snap     |  20 +-
 .../__snapshots__/FormGroup.story.tsx.snap    |  24 +-
 .../__snapshots__/DatePicker.story.tsx.snap   |  28 +-
 .../__snapshots__/TimePicker.story.tsx.snap   |  26 +-
 .../__snapshots__/Radio.story.tsx.snap        |  32 +-
 .../__snapshots__/RadioGroup.story.tsx.snap   |  40 +--
 .../__snapshots__/PlainSelects.story.tsx.snap |  22 +-
 .../__snapshots__/Selects.story.tsx.snap      |  44 +--
 .../__snapshots__/Slider.story.tsx.snap       |  32 +-
 .../__snapshots__/Switch.story.tsx.snap       |  24 +-
 .../OutlineTextField.story.tsx.snap           |  30 +-
 .../__snapshots__/TextField.story.tsx.snap    |  26 +-
 .../__snapshots__/Textarea.story.tsx.snap     |  16 +-
 .../__snapshots__/Hidden.story.tsx.snap       |   2 +-
 .../__snapshots__/Icon.story.tsx.snap         |   8 +-
 .../ListItemExamples.story.tsx.snap           | 104 +++---
 .../ListItemSecondaryAction.story.tsx.snap    |   4 +-
 .../MenuItemExamples.story.tsx.snap           |  24 +-
 .../__snapshots__/Portal.story.tsx.snap       |   2 +-
 .../__snapshots__/PortalHost.story.tsx.snap   |   2 +-
 .../__snapshots__/Table.story.tsx.snap        | 112 +++---
 .../__snapshots__/TabList.story.tsx.snap      |   2 +-
 .../__snapshots__/TabPanel.story.tsx.snap     |   2 +-
 .../__snapshots__/Tabs.story.tsx.snap         |  20 +-
 .../__snapshots__/Tooltip.story.tsx.snap      |  18 +-
 .../__snapshots__/Collapse.story.tsx.snap     |   6 +-
 .../__snapshots__/Fade.story.tsx.snap         |   8 +-
 .../__snapshots__/Grow.story.tsx.snap         |   8 +-
 .../__snapshots__/Slide.story.tsx.snap        |   8 +-
 .../__snapshots__/Zoom.story.tsx.snap         |   8 +-
 .../__snapshots__/ZoomFrom.story.tsx.snap     |   8 +-
 .../ZoomInFadeOut.story.tsx.snap              |   4 +-
 .../useFocusInside.story.tsx.snap             | 330 ++++++++++++++++++
 .../useForceUpdate.story.tsx.snap             |   6 -
 .../useGlobalListener.story.tsx.snap          |   4 +-
 .../useKeyDownOnce.story.tsx.snap             |   4 +-
 .../useMoveFocusedIndex.story.tsx.snap        |   2 +-
 .../__snapshots__/useLongPress.story.tsx.snap |   2 +-
 .../__snapshots__/useRetry.story.tsx.snap     |   4 +-
 .../useTouchMouseEvent.story.tsx.snap         |   2 +-
 .../__snapshots__/useTheme.story.tsx.snap     |   8 +-
 .../useThemeProps.story.tsx.snap              |   2 +-
 sync-github.json                              |   2 +-
 56 files changed, 865 insertions(+), 541 deletions(-)
 create mode 100644 packages/juno-core/src/foundation/hooks/useFocusInside/__stories__/__snapshots__/useFocusInside.story.tsx.snap

diff --git a/packages/juno-core/src/components/Avatar/__stories__/__snapshots__/Avatar.story.tsx.snap b/packages/juno-core/src/components/Avatar/__stories__/__snapshots__/Avatar.story.tsx.snap
index 7f118dc9..b670e42f 100644
--- a/packages/juno-core/src/components/Avatar/__stories__/__snapshots__/Avatar.story.tsx.snap
+++ b/packages/juno-core/src/components/Avatar/__stories__/__snapshots__/Avatar.story.tsx.snap
@@ -7649,7 +7649,7 @@ exports[`Storyshots 🚀 Cleanup Components/Avatar Avatar With Disabled 1`] = `
 }
 
 <div
-  className="MuiBox-root MuiBox-root-53"
+  className="MuiBox-root MuiBox-root-54"
 >
   <span
     aria-describedby={null}
diff --git a/packages/juno-core/src/components/Box/__stories__/__snapshots__/Box.story.tsx.snap b/packages/juno-core/src/components/Box/__stories__/__snapshots__/Box.story.tsx.snap
index 227caff6..9df06a2c 100644
--- a/packages/juno-core/src/components/Box/__stories__/__snapshots__/Box.story.tsx.snap
+++ b/packages/juno-core/src/components/Box/__stories__/__snapshots__/Box.story.tsx.snap
@@ -85,7 +85,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-54"
+    className="MuiBox-root MuiBox-root-55"
   >
     Box Example
   </div>,
@@ -94,7 +94,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-55"
+    className="MuiBox-root MuiBox-root-56"
   >
     Box Example
   </div>,
diff --git a/packages/juno-core/src/components/Buttons/Button/__stories__/__snapshots__/Button.story.tsx.snap b/packages/juno-core/src/components/Buttons/Button/__stories__/__snapshots__/Button.story.tsx.snap
index 19f3e8fe..64c7be49 100644
--- a/packages/juno-core/src/components/Buttons/Button/__stories__/__snapshots__/Button.story.tsx.snap
+++ b/packages/juno-core/src/components/Buttons/Button/__stories__/__snapshots__/Button.story.tsx.snap
@@ -1346,7 +1346,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button Examples 1`] = `
   >
     <li>
       <div
-        className="MuiBox-root MuiBox-root-56"
+        className="MuiBox-root MuiBox-root-57"
       >
         <p
           className="MuiTypography-root c6 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1478,7 +1478,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button Examples 1`] = `
         </button>
       </div>
       <div
-        className="MuiBox-root MuiBox-root-57"
+        className="MuiBox-root MuiBox-root-58"
       >
         <p
           className="MuiTypography-root c6 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1610,7 +1610,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button Examples 1`] = `
         </button>
       </div>
       <div
-        className="MuiBox-root MuiBox-root-58"
+        className="MuiBox-root MuiBox-root-59"
       >
         <p
           className="MuiTypography-root c6 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1742,7 +1742,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button Examples 1`] = `
         </button>
       </div>
       <div
-        className="MuiBox-root MuiBox-root-59"
+        className="MuiBox-root MuiBox-root-60"
       >
         <p
           className="MuiTypography-root c6 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -1874,7 +1874,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button Examples 1`] = `
         </button>
       </div>
       <div
-        className="MuiBox-root MuiBox-root-60"
+        className="MuiBox-root MuiBox-root-61"
       >
         <p
           className="MuiTypography-root c6 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -2427,7 +2427,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button Sizes 1`] = `
 >
   <li>
     <div
-      className="MuiBox-root MuiBox-root-61"
+      className="MuiBox-root MuiBox-root-62"
     >
       <p
         className="MuiTypography-root c1 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -2510,7 +2510,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button Sizes 1`] = `
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-62"
+      className="MuiBox-root MuiBox-root-63"
     >
       <p
         className="MuiTypography-root c1 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -2593,7 +2593,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button Sizes 1`] = `
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-63"
+      className="MuiBox-root MuiBox-root-64"
     >
       <p
         className="MuiTypography-root c1 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -2676,7 +2676,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button Sizes 1`] = `
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-64"
+      className="MuiBox-root MuiBox-root-65"
     >
       <p
         className="MuiTypography-root c1 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -2759,7 +2759,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button Sizes 1`] = `
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-65"
+      className="MuiBox-root MuiBox-root-66"
     >
       <p
         className="MuiTypography-root c1 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -7532,7 +7532,7 @@ exports[`Storyshots 🚀 Cleanup Components/Buttons Button With Keep Elevation 1
 }
 
 <div
-  className="MuiBox-root MuiBox-root-66"
+  className="MuiBox-root MuiBox-root-67"
 >
   <button
     className="MuiButtonBase-root MuiButton-root MuiButton-contained RcButton-contained c0"
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 dc4d5260..d41455e1 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
@@ -1529,7 +1529,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button Contained 1`]
 }
 
 <div
-  className="MuiBox-root MuiBox-root-73"
+  className="MuiBox-root MuiBox-root-74"
 >
   <h5
     className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -3575,7 +3575,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Focus Ri
 <div>
   Only support for inverse and round variant. Plain variant always use focusRing
   <div
-    className="MuiBox-root MuiBox-root-118"
+    className="MuiBox-root MuiBox-root-119"
   >
     <button
       className="MuiButtonBase-root c0 RcIconButton-root RcIconButton-round"
@@ -3719,7 +3719,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Focus Ri
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-119"
+    className="MuiBox-root MuiBox-root-120"
   >
     <button
       className="MuiButtonBase-root c6 RcIconButton-root RcIconButton-inverse"
@@ -3863,7 +3863,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Focus Ri
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-120"
+    className="MuiBox-root MuiBox-root-121"
   >
     <button
       className="MuiButtonBase-root c10 RcIconButton-root"
@@ -5044,10 +5044,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
 }
 
 <div
-  className="MuiBox-root MuiBox-root-101"
+  className="MuiBox-root MuiBox-root-102"
 >
   <div
-    className="MuiBox-root MuiBox-root-102"
+    className="MuiBox-root MuiBox-root-103"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -5090,7 +5090,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-103"
+    className="MuiBox-root MuiBox-root-104"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -5133,7 +5133,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-104"
+    className="MuiBox-root MuiBox-root-105"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -5176,7 +5176,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-105"
+    className="MuiBox-root MuiBox-root-106"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -5219,7 +5219,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-106"
+    className="MuiBox-root MuiBox-root-107"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -5262,7 +5262,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-107"
+    className="MuiBox-root MuiBox-root-108"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -5305,7 +5305,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-108"
+    className="MuiBox-root MuiBox-root-109"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -5348,7 +5348,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton Icon Button With Radius 1
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-109"
+    className="MuiBox-root MuiBox-root-110"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -6679,10 +6679,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
 }
 
 <div
-  className="MuiBox-root MuiBox-root-67"
+  className="MuiBox-root MuiBox-root-68"
 >
   <div
-    className="MuiBox-root MuiBox-root-68"
+    className="MuiBox-root MuiBox-root-69"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -6768,7 +6768,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-69"
+    className="MuiBox-root MuiBox-root-70"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -6854,7 +6854,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-70"
+    className="MuiBox-root MuiBox-root-71"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -6940,7 +6940,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-71"
+    className="MuiBox-root MuiBox-root-72"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -7026,7 +7026,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton Examples 1`] =
     </button>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-72"
+    className="MuiBox-root MuiBox-root-73"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -11411,10 +11411,10 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
 }
 
 <div
-  className="MuiBox-root MuiBox-root-110"
+  className="MuiBox-root MuiBox-root-111"
 >
   <div
-    className="MuiBox-root MuiBox-root-111"
+    className="MuiBox-root MuiBox-root-112"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -11617,7 +11617,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"
@@ -11820,7 +11820,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"
@@ -12023,7 +12023,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"
@@ -12226,7 +12226,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
     <br />
   </div>
   <div
-    className="MuiBox-root MuiBox-root-115"
+    className="MuiBox-root MuiBox-root-116"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -12429,7 +12429,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
     <br />
   </div>
   <div
-    className="MuiBox-root MuiBox-root-116"
+    className="MuiBox-root MuiBox-root-117"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -12632,7 +12632,7 @@ exports[`Storyshots 🚀 Cleanup Components/IconButton IconButton with color and
     <br />
   </div>
   <div
-    className="MuiBox-root MuiBox-root-117"
+    className="MuiBox-root MuiBox-root-118"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16302,10 +16302,10 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-74"
+    className="MuiBox-root MuiBox-root-75"
   >
     <div
-      className="MuiBox-root MuiBox-root-75"
+      className="MuiBox-root MuiBox-root-76"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16351,7 +16351,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-76"
+      className="MuiBox-root MuiBox-root-77"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16397,7 +16397,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-77"
+      className="MuiBox-root MuiBox-root-78"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16443,7 +16443,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-78"
+      className="MuiBox-root MuiBox-root-79"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16489,7 +16489,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-79"
+      className="MuiBox-root MuiBox-root-80"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16535,7 +16535,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-80"
+      className="MuiBox-root MuiBox-root-81"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16581,7 +16581,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-81"
+      className="MuiBox-root MuiBox-root-82"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16627,7 +16627,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-82"
+      className="MuiBox-root MuiBox-root-83"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16673,7 +16673,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-83"
+      className="MuiBox-root MuiBox-root-84"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16719,7 +16719,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-84"
+      className="MuiBox-root MuiBox-root-85"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16765,7 +16765,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-85"
+      className="MuiBox-root MuiBox-root-86"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16811,7 +16811,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-86"
+      className="MuiBox-root MuiBox-root-87"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16857,7 +16857,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-87"
+      className="MuiBox-root MuiBox-root-88"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16903,7 +16903,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-88"
+      className="MuiBox-root MuiBox-root-89"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16949,7 +16949,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-89"
+      className="MuiBox-root MuiBox-root-90"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -16995,7 +16995,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-90"
+      className="MuiBox-root MuiBox-root-91"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -17041,7 +17041,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-91"
+      className="MuiBox-root MuiBox-root-92"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -17087,7 +17087,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-92"
+      className="MuiBox-root MuiBox-root-93"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -17133,7 +17133,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-93"
+      className="MuiBox-root MuiBox-root-94"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -17179,7 +17179,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-94"
+      className="MuiBox-root MuiBox-root-95"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -17225,7 +17225,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-95"
+      className="MuiBox-root MuiBox-root-96"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -17271,7 +17271,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-96"
+      className="MuiBox-root MuiBox-root-97"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -17317,7 +17317,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-97"
+      className="MuiBox-root MuiBox-root-98"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -17363,7 +17363,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-98"
+      className="MuiBox-root MuiBox-root-99"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -17409,7 +17409,7 @@ Array [
       </button>
     </div>
     <div
-      className="MuiBox-root MuiBox-root-99"
+      className="MuiBox-root MuiBox-root-100"
     >
       <h5
         className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
@@ -18223,7 +18223,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-100"
+    className="MuiBox-root MuiBox-root-101"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
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 ef74b89c..90245bcd 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-121"
+        className="MuiBox-root MuiBox-root-122"
       />
       <div>
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-122 MuiCheckbox-root RcCheckbox-root c14"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-123 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-125"
+              className="PrivateSwitchBase-input-126"
               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-126"
+          className="MuiBox-root MuiBox-root-127"
         >
           <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-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-122 MuiSwitch-switchBase RcSwitch-switchBase PrivateSwitchBase-checked-123 Mui-checked RcSwitch-checked"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-123 MuiSwitch-switchBase RcSwitch-switchBase PrivateSwitchBase-checked-124 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-125 MuiSwitch-input"
+                  className="PrivateSwitchBase-input-126 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-128"
+          className="MuiBox-root MuiBox-root-129"
         >
           <div
             className="MuiTypography-root c11"
@@ -1225,10 +1225,10 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
           </p>
         </div>
         <div
-          className="MuiBox-root MuiBox-root-129"
+          className="MuiBox-root MuiBox-root-130"
         >
           <div
-            className="MuiFormControl-root MuiTextField-root RcTextField-root c30 c31 sc-fIosxK c31"
+            className="MuiFormControl-root MuiTextField-root RcTextField-root c30 c31 sc-gyElHZ c31"
             theme={
               Object {
                 "breakpoints": Object {
@@ -1825,7 +1825,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
         display="flex"
       >
         <div
-          className="MuiBox-root MuiBox-root-130"
+          className="MuiBox-root MuiBox-root-131"
         >
           <div
             className="MuiTypography-root c11"
@@ -1843,14 +1843,14 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
           </p>
         </div>
         <div
-          className="MuiBox-root MuiBox-root-131"
+          className="MuiBox-root MuiBox-root-132"
         >
           <span
             className="MuiSwitch-root RcSwitch-root c26 c27"
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-122 MuiSwitch-switchBase RcSwitch-switchBase PrivateSwitchBase-checked-123 Mui-checked RcSwitch-checked"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-123 MuiSwitch-switchBase RcSwitch-switchBase PrivateSwitchBase-checked-124 Mui-checked RcSwitch-checked"
               onBlur={[Function]}
               onDragLeave={[Function]}
               onFocus={[Function]}
@@ -1868,7 +1868,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
                 className="MuiIconButton-label"
               >
                 <input
-                  className="PrivateSwitchBase-input-125 MuiSwitch-input"
+                  className="PrivateSwitchBase-input-126 MuiSwitch-input"
                   defaultChecked={true}
                   onChange={[Function]}
                   type="checkbox"
@@ -1893,7 +1893,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
         display="flex"
       >
         <div
-          className="MuiBox-root MuiBox-root-132"
+          className="MuiBox-root MuiBox-root-133"
         >
           <div
             className="MuiTypography-root c11"
@@ -1911,14 +1911,14 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
           </p>
         </div>
         <div
-          className="MuiBox-root MuiBox-root-133"
+          className="MuiBox-root MuiBox-root-134"
         >
           <span
             className="MuiSwitch-root RcSwitch-root c26 c27"
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-122 MuiSwitch-switchBase RcSwitch-switchBase"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-123 MuiSwitch-switchBase RcSwitch-switchBase"
               onBlur={[Function]}
               onDragLeave={[Function]}
               onFocus={[Function]}
@@ -1936,7 +1936,7 @@ exports[`Storyshots 🚀 Cleanup Components/Cards/Card Card Examples 1`] = `
                 className="MuiIconButton-label"
               >
                 <input
-                  className="PrivateSwitchBase-input-125 MuiSwitch-input"
+                  className="PrivateSwitchBase-input-126 MuiSwitch-input"
                   onChange={[Function]}
                   type="checkbox"
                 />
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 98087291..a6300f2f 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-134 MuiCheckbox-root RcCardSelectionArea-root MuiCheckbox-colorSecondary c1 MuiIconButton-colorSecondary"
+    className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-135 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-137"
+        className="PrivateSwitchBase-input-138"
         data-indeterminate={false}
         disabled={false}
         onChange={[Function]}
diff --git a/packages/juno-core/src/components/Dialer/DialTextField/__stories__/__snapshots__/DialTextField.story.tsx.snap b/packages/juno-core/src/components/Dialer/DialTextField/__stories__/__snapshots__/DialTextField.story.tsx.snap
index d3fe421b..5c5f374c 100644
--- a/packages/juno-core/src/components/Dialer/DialTextField/__stories__/__snapshots__/DialTextField.story.tsx.snap
+++ b/packages/juno-core/src/components/Dialer/DialTextField/__stories__/__snapshots__/DialTextField.story.tsx.snap
@@ -138,7 +138,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer/DialTextField DialTextField 1
 }
 
 <div
-  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 sc-dPiLbb iuMvTB"
+  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 sc-bBHHxi hvzxep"
   theme={
     Object {
       "breakpoints": Object {
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 83037d75..da8a13a4 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
@@ -347,7 +347,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer 1`] = `
 }
 
 <div
-  className="MuiBox-root MuiBox-root-138"
+  className="MuiBox-root MuiBox-root-139"
 >
   <div>
     <h6
@@ -362,7 +362,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer 1`] = `
       className="c2"
     >
       <div
-        className="MuiFormControl-root MuiTextField-root RcTextField-root c3 c4 c4 iuMvTB MuiFormControl-fullWidth"
+        className="MuiFormControl-root MuiTextField-root RcTextField-root c3 c4 c4 hvzxep MuiFormControl-fullWidth"
         theme={
           Object {
             "breakpoints": Object {
@@ -1429,7 +1429,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer 1`] = `
       className="c2"
     >
       <div
-        className="MuiFormControl-root MuiTextField-root RcTextField-root c3 c4 c4 iuMvTB MuiFormControl-fullWidth"
+        className="MuiFormControl-root MuiTextField-root RcTextField-root c3 c4 c4 hvzxep MuiFormControl-fullWidth"
         theme={
           Object {
             "breakpoints": Object {
@@ -3675,7 +3675,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
         New Call
       </p>
       <div
-        className="MuiBox-root MuiBox-root-139"
+        className="MuiBox-root MuiBox-root-140"
       />
       <button
         className="MuiButtonBase-root c5 c6 RcIconButton-root"
@@ -3714,7 +3714,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Dialer Examples 1`] = `
       className="c10"
     >
       <div
-        className="MuiFormControl-root MuiTextField-root RcTextField-root c11 c12 c12 iuMvTB MuiFormControl-fullWidth"
+        className="MuiFormControl-root MuiTextField-root RcTextField-root c11 c12 c12 hvzxep MuiFormControl-fullWidth"
         theme={
           Object {
             "breakpoints": Object {
@@ -6017,7 +6017,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
 }
 
 <div
-  className="MuiBox-root MuiBox-root-140"
+  className="MuiBox-root MuiBox-root-141"
 >
   <div
     className="c0"
@@ -6101,7 +6101,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
               </div>
             </div>
             <div
-              className="MuiFormControl-root MuiTextField-root RcTextField-root c11 c12 c12 iuMvTB MuiFormControl-fullWidth"
+              className="MuiFormControl-root MuiTextField-root RcTextField-root c11 c12 c12 hvzxep MuiFormControl-fullWidth"
               theme={
                 Object {
                   "breakpoints": Object {
@@ -7180,7 +7180,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialer Keypad mode 1`] = `
     </div>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-141"
+    className="MuiBox-root MuiBox-root-142"
     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 eb7741dc..4398489d 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
@@ -397,7 +397,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialog/DialogTitle DialogTitle Examp
     </div>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-142"
+    className="MuiBox-root MuiBox-root-143"
   >
     <p
       className="MuiTypography-root c3"
@@ -415,7 +415,7 @@ exports[`Storyshots 🚀 Cleanup Components/Dialog/DialogTitle DialogTitle Examp
     </p>
   </div>
   <div
-    className="MuiBox-root MuiBox-root-143"
+    className="MuiBox-root MuiBox-root-144"
   >
     <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 dd1cb91e..cd1c01c9 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
@@ -225,7 +225,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-144 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-145 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -243,7 +243,7 @@ Array [
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-147 MuiSwitch-input"
+            className="PrivateSwitchBase-input-148 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
             value={false}
@@ -374,7 +374,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-144 MuiRadio-root RcRadio-root c1 PrivateSwitchBase-checked-145 Mui-checked RcRadio-checked"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-145 MuiRadio-root RcRadio-root c1 PrivateSwitchBase-checked-146 Mui-checked RcRadio-checked"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -393,13 +393,13 @@ Array [
         >
           <input
             checked={true}
-            className="PrivateSwitchBase-input-147"
+            className="PrivateSwitchBase-input-148"
             onChange={[Function]}
             type="radio"
             value="dialog"
           />
           <div
-            className="PrivateRadioButtonIcon-root-148 RadioButtonIcon-root PrivateRadioButtonIcon-checked-150"
+            className="PrivateRadioButtonIcon-root-149 RadioButtonIcon-root PrivateRadioButtonIcon-checked-151"
           >
             <svg
               aria-hidden={true}
@@ -413,7 +413,7 @@ Array [
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-149"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-150"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -435,7 +435,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-144 MuiRadio-root RcRadio-root c1"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-145 MuiRadio-root RcRadio-root c1"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -454,13 +454,13 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-147"
+            className="PrivateSwitchBase-input-148"
             onChange={[Function]}
             type="radio"
             value="drawer"
           />
           <div
-            className="PrivateRadioButtonIcon-root-148 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-149 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -474,7 +474,7 @@ Array [
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-149"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-150"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -603,7 +603,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-144 MuiRadio-root RcRadio-root c1"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-145 MuiRadio-root RcRadio-root c1"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -622,13 +622,13 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-147"
+            className="PrivateSwitchBase-input-148"
             onChange={[Function]}
             type="radio"
             value="small"
           />
           <div
-            className="PrivateRadioButtonIcon-root-148 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-149 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -642,7 +642,7 @@ Array [
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-149"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-150"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -664,7 +664,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-144 MuiRadio-root RcRadio-root c1 PrivateSwitchBase-checked-145 Mui-checked RcRadio-checked"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-145 MuiRadio-root RcRadio-root c1 PrivateSwitchBase-checked-146 Mui-checked RcRadio-checked"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -683,13 +683,13 @@ Array [
         >
           <input
             checked={true}
-            className="PrivateSwitchBase-input-147"
+            className="PrivateSwitchBase-input-148"
             onChange={[Function]}
             type="radio"
             value="medium"
           />
           <div
-            className="PrivateRadioButtonIcon-root-148 RadioButtonIcon-root PrivateRadioButtonIcon-checked-150"
+            className="PrivateRadioButtonIcon-root-149 RadioButtonIcon-root PrivateRadioButtonIcon-checked-151"
           >
             <svg
               aria-hidden={true}
@@ -703,7 +703,7 @@ Array [
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-149"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-150"
               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 97755768..2bd10248 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
@@ -482,7 +482,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift 1`] = `
 }
 
 <div
-  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
   theme={
     Object {
       "breakpoints": Object {
@@ -1069,7 +1069,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift 1`] = `
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-151"
+        className="MuiBox-root MuiBox-root-152"
       >
         <button
           aria-hidden={true}
@@ -1720,7 +1720,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -2307,7 +2307,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-169"
+          className="MuiBox-root MuiBox-root-170"
         >
           <button
             aria-hidden={true}
@@ -3016,7 +3016,7 @@ Array [
     }
   >
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
       theme={
         Object {
           "breakpoints": Object {
@@ -3603,7 +3603,7 @@ Array [
           className="c3"
         >
           <div
-            className="MuiBox-root MuiBox-root-170"
+            className="MuiBox-root MuiBox-root-171"
           >
             <button
               aria-hidden={true}
@@ -4171,7 +4171,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Debug 1`] = `
 }
 
 <div
-  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
   theme={
     Object {
       "breakpoints": Object {
@@ -4758,7 +4758,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Debug 1`] = `
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-154"
+        className="MuiBox-root MuiBox-root-155"
       >
         <button
           aria-hidden={true}
@@ -5185,7 +5185,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -6211,7 +6211,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -7568,7 +7568,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -8317,7 +8317,7 @@ Array [
         className="c9"
       >
         <div
-          className="MuiBox-root MuiBox-root-156"
+          className="MuiBox-root MuiBox-root-157"
         >
           <button
             aria-hidden={true}
@@ -9151,7 +9151,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -9850,7 +9850,7 @@ Array [
         className="c9"
       >
         <div
-          className="MuiBox-root MuiBox-root-157"
+          className="MuiBox-root MuiBox-root-158"
         >
           <button
             aria-hidden={true}
@@ -10563,7 +10563,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -11258,7 +11258,7 @@ Array [
         className="c9"
       >
         <div
-          className="MuiBox-root MuiBox-root-158"
+          className="MuiBox-root MuiBox-root-159"
         >
           <button
             aria-hidden={true}
@@ -11970,7 +11970,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -12665,7 +12665,7 @@ Array [
         className="c9"
       >
         <div
-          className="MuiBox-root MuiBox-root-159"
+          className="MuiBox-root MuiBox-root-160"
         >
           <button
             aria-hidden={true}
@@ -13717,7 +13717,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Fixed Item Heigh
 }
 
 <div
-  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
   theme={
     Object {
       "breakpoints": Object {
@@ -14304,7 +14304,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Fixed Item Heigh
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-155"
+        className="MuiBox-root MuiBox-root-156"
       >
         <button
           aria-hidden={true}
@@ -14906,7 +14906,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -15494,7 +15494,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-161"
+          className="MuiBox-root MuiBox-root-162"
         >
           <button
             aria-hidden={true}
@@ -16098,7 +16098,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -16686,7 +16686,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-162"
+          className="MuiBox-root MuiBox-root-163"
         >
           <button
             aria-hidden={true}
@@ -17290,7 +17290,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -17878,7 +17878,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-163"
+          className="MuiBox-root MuiBox-root-164"
         >
           <button
             aria-hidden={true}
@@ -18482,7 +18482,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -19070,7 +19070,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-164"
+          className="MuiBox-root MuiBox-root-165"
         >
           <button
             aria-hidden={true}
@@ -19643,7 +19643,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Lazy Load Exampl
 }
 
 <div
-  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
   theme={
     Object {
       "breakpoints": Object {
@@ -20231,7 +20231,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift Lazy Load Exampl
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-160"
+        className="MuiBox-root MuiBox-root-161"
       >
         <button
           aria-hidden={true}
@@ -20816,7 +20816,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -21403,7 +21403,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-166"
+          className="MuiBox-root MuiBox-root-167"
         >
           <button
             aria-hidden={true}
@@ -21974,7 +21974,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -22561,7 +22561,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-167"
+          className="MuiBox-root MuiBox-root-168"
         >
           <button
             aria-hidden={true}
@@ -23195,7 +23195,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Custom Inpu
 }
 
 <div
-  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 c3 sc-bTfYFJ c2 sc-dtMgUX c3 MuiFormControl-fullWidth"
+  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 c3 sc-kHOZwM c2 sc-cZMNgc c3 MuiFormControl-fullWidth"
   theme={
     Object {
       "breakpoints": Object {
@@ -23782,7 +23782,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Custom Inpu
       className="c4"
     >
       <div
-        className="MuiBox-root MuiBox-root-168"
+        className="MuiBox-root MuiBox-root-169"
       >
         <button
           aria-hidden={true}
@@ -24384,7 +24384,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -24972,7 +24972,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-152"
+          className="MuiBox-root MuiBox-root-153"
         >
           <button
             aria-hidden={true}
@@ -25576,7 +25576,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -26164,7 +26164,7 @@ Array [
         className="c3"
       >
         <div
-          className="MuiBox-root MuiBox-root-153"
+          className="MuiBox-root MuiBox-root-154"
         >
           <button
             aria-hidden={true}
@@ -26733,7 +26733,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Dynamic 1`]
 }
 
 <div
-  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-bTfYFJ c1 sc-dtMgUX c2 MuiFormControl-fullWidth"
+  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 c2 sc-kHOZwM c1 sc-cZMNgc c2 MuiFormControl-fullWidth"
   theme={
     Object {
       "breakpoints": Object {
@@ -27320,7 +27320,7 @@ exports[`Storyshots 🚀 Cleanup Components/Downshift Downshift With Dynamic 1`]
       className="c3"
     >
       <div
-        className="MuiBox-root MuiBox-root-165"
+        className="MuiBox-root MuiBox-root-166"
       >
         <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 bd9c44ce..fce059d9 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
@@ -952,7 +952,7 @@ Array [
         />
       </div>
       <div
-        className="MuiBox-root MuiBox-root-171"
+        className="MuiBox-root MuiBox-root-172"
       >
         <button
           aria-hidden={true}
@@ -1030,7 +1030,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-172"
+    className="MuiBox-root MuiBox-root-173"
   >
     <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 8fc29ecf..f1ee4b0f 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
@@ -1026,7 +1026,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-173 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-174 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -1044,7 +1044,7 @@ Array [
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-176 MuiSwitch-input"
+            className="PrivateSwitchBase-input-177 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 4c4f482d..12d008aa 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-177 MuiCheckbox-root RcCheckbox-root c0"
+  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-178 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-180"
+      className="PrivateSwitchBase-input-181"
       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-181 MuiCheckbox-root RcCheckbox-root c2"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-182 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-184"
+          className="PrivateSwitchBase-input-185"
           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-181 MuiCheckbox-root RcCheckbox-root c2"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-182 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-184"
+          className="PrivateSwitchBase-input-185"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
@@ -363,7 +363,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-185 MuiCheckbox-root RcCheckbox-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-186 MuiCheckbox-root RcCheckbox-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -381,7 +381,7 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-188"
+          className="PrivateSwitchBase-input-189"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
@@ -485,7 +485,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-185 MuiCheckbox-root RcCheckbox-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-186 MuiCheckbox-root RcCheckbox-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -503,7 +503,7 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-188"
+          className="PrivateSwitchBase-input-189"
           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 b94e5357..b3c28cd1 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
@@ -149,7 +149,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-189 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-190 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -167,7 +167,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-192 MuiSwitch-input"
+            className="PrivateSwitchBase-input-193 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -194,7 +194,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-189 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-190 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -212,7 +212,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-192 MuiSwitch-input"
+            className="PrivateSwitchBase-input-193 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -239,7 +239,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-189 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-190 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -257,7 +257,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-192 MuiSwitch-input"
+            className="PrivateSwitchBase-input-193 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -281,7 +281,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-189 MuiCheckbox-root RcCheckbox-root c2"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-190 MuiCheckbox-root RcCheckbox-root c2"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -299,7 +299,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-192"
+          className="PrivateSwitchBase-input-193"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
@@ -331,7 +331,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-189 MuiCheckbox-root RcCheckbox-root c2"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-190 MuiCheckbox-root RcCheckbox-root c2"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -349,7 +349,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-192"
+          className="PrivateSwitchBase-input-193"
           data-indeterminate={false}
           onChange={[Function]}
           type="checkbox"
@@ -381,7 +381,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-189 MuiCheckbox-root RcCheckbox-root c2"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-190 MuiCheckbox-root RcCheckbox-root c2"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -399,7 +399,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/FormGroup FormGroup 1`] = `
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-192"
+          className="PrivateSwitchBase-input-193"
           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 5e73df00..e3cbaac3 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
@@ -324,7 +324,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     theme={
       Object {
         "breakpoints": Object {
@@ -1320,7 +1320,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     theme={
       Object {
         "breakpoints": Object {
@@ -2348,7 +2348,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     onClick={[Function]}
     theme={
       Object {
@@ -3386,7 +3386,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -4504,7 +4504,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     onClick={[Function]}
     theme={
       Object {
@@ -5536,7 +5536,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     onClick={[Function]}
     theme={
       Object {
@@ -6541,7 +6541,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     theme={
       Object {
         "breakpoints": Object {
@@ -7491,7 +7491,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     theme={
       Object {
         "breakpoints": Object {
@@ -8699,7 +8699,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/DatePicker DatePicker with ran
       Min
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-ctqQKy c2 "
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-dFtzxp c2 "
       theme={
         Object {
           "breakpoints": Object {
@@ -9320,7 +9320,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/DatePicker DatePicker with ran
       Max
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-ctqQKy c2 "
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-dFtzxp c2 "
       theme={
         Object {
           "breakpoints": Object {
@@ -9941,7 +9941,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/DatePicker DatePicker with ran
       Min and Max
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-ctqQKy c2 "
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-dFtzxp c2 "
       theme={
         Object {
           "breakpoints": Object {
@@ -10562,7 +10562,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/DatePicker DatePicker with ran
       disablePast
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-ctqQKy c2 "
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-dFtzxp c2 "
       theme={
         Object {
           "breakpoints": Object {
@@ -11183,7 +11183,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/DatePicker DatePicker with ran
       disableFuture
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-ctqQKy c2 "
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-dFtzxp c2 "
       theme={
         Object {
           "breakpoints": Object {
@@ -11804,7 +11804,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/DatePicker DatePicker with ran
       init value invalid(2019-11-16~2020-11-20)
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c8 c9 sc-ctqQKy c9 "
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c8 c9 sc-dFtzxp c9 "
       theme={
         Object {
           "breakpoints": Object {
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 88d6efe7..958e2b40 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
@@ -394,7 +394,7 @@ Array [
         Min and Max
       </h5>
       <div
-        className="MuiFormControl-root MuiTextField-root RcTextField-root c2 c3 sc-ctqQKy c3 "
+        className="MuiFormControl-root MuiTextField-root RcTextField-root c2 c3 sc-dFtzxp c3 "
         theme={
           Object {
             "breakpoints": Object {
@@ -1039,7 +1039,7 @@ Array [
         Only min
       </h5>
       <div
-        className="MuiFormControl-root MuiTextField-root RcTextField-root c2 c3 sc-ctqQKy c3 "
+        className="MuiFormControl-root MuiTextField-root RcTextField-root c2 c3 sc-dFtzxp c3 "
         theme={
           Object {
             "breakpoints": Object {
@@ -2729,7 +2729,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     theme={
       Object {
         "breakpoints": Object {
@@ -3729,7 +3729,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     theme={
       Object {
         "breakpoints": Object {
@@ -4837,7 +4837,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     theme={
       Object {
         "breakpoints": Object {
@@ -5899,7 +5899,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     theme={
       Object {
         "breakpoints": Object {
@@ -6991,7 +6991,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -8158,7 +8158,7 @@ Array [
       </p>
       <br />
       <div
-        className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-ctqQKy c2 "
+        className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-dFtzxp c2 "
         theme={
           Object {
             "breakpoints": Object {
@@ -8778,7 +8778,7 @@ Array [
       </p>
       <br />
       <div
-        className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-ctqQKy c2 "
+        className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-dFtzxp c2 "
         theme={
           Object {
             "breakpoints": Object {
@@ -9903,7 +9903,7 @@ Array [
       </p>
       <br />
       <div
-        className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-ctqQKy c2 "
+        className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-dFtzxp c2 "
         theme={
           Object {
             "breakpoints": Object {
@@ -10523,7 +10523,7 @@ Array [
       </p>
       <br />
       <div
-        className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-ctqQKy c2 "
+        className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-dFtzxp c2 "
         theme={
           Object {
             "breakpoints": Object {
@@ -11616,7 +11616,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     theme={
       Object {
         "breakpoints": Object {
@@ -12573,7 +12573,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-ctqQKy c1 "
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-dFtzxp c1 "
     theme={
       Object {
         "breakpoints": Object {
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 bfb541fd..8a07b796 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-193 MuiRadio-root RcRadio-root c0"
+  className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-194 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-196"
+      className="PrivateSwitchBase-input-197"
       onChange={[Function]}
       type="radio"
     />
     <div
-      className="PrivateRadioButtonIcon-root-197 RadioButtonIcon-root"
+      className="PrivateRadioButtonIcon-root-198 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-198"
+        className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-199"
         focusable="false"
         viewBox="0 0 24 24"
       >
@@ -165,7 +165,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-200 MuiRadio-root RcRadio-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-201 MuiRadio-root RcRadio-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -183,12 +183,12 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-203"
+          className="PrivateSwitchBase-input-204"
           onChange={[Function]}
           type="radio"
         />
         <div
-          className="PrivateRadioButtonIcon-root-204 RadioButtonIcon-root"
+          className="PrivateRadioButtonIcon-root-205 RadioButtonIcon-root"
         >
           <svg
             aria-hidden={true}
@@ -202,7 +202,7 @@ Array [
           </svg>
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-205"
+            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-206"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -318,7 +318,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-200 MuiRadio-root RcRadio-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-201 MuiRadio-root RcRadio-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -336,12 +336,12 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-203"
+          className="PrivateSwitchBase-input-204"
           onChange={[Function]}
           type="radio"
         />
         <div
-          className="PrivateRadioButtonIcon-root-204 RadioButtonIcon-root"
+          className="PrivateRadioButtonIcon-root-205 RadioButtonIcon-root"
         >
           <svg
             aria-hidden={true}
@@ -355,7 +355,7 @@ Array [
           </svg>
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-205"
+            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-206"
             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-207 MuiRadio-root RcRadio-root c2 PrivateSwitchBase-checked-208 Mui-checked RcRadio-checked"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-208 MuiRadio-root RcRadio-root c2 PrivateSwitchBase-checked-209 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-210"
+            className="PrivateSwitchBase-input-211"
             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-207 MuiRadio-root RcRadio-root c2"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-208 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-210"
+            className="PrivateSwitchBase-input-211"
             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 104385b1..20e31818 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-211 MuiRadio-root RcRadio-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-212 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-214"
+          className="PrivateSwitchBase-input-215"
           name="mui-10000"
           onChange={[Function]}
           type="radio"
           value="radio1"
         />
         <div
-          className="PrivateRadioButtonIcon-root-215 RadioButtonIcon-root"
+          className="PrivateRadioButtonIcon-root-216 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-216"
+            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-217"
             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-211 MuiRadio-root RcRadio-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-212 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-214"
+          className="PrivateSwitchBase-input-215"
           name="mui-10000"
           onChange={[Function]}
           type="radio"
           value="radio2"
         />
         <div
-          className="PrivateRadioButtonIcon-root-215 RadioButtonIcon-root"
+          className="PrivateRadioButtonIcon-root-216 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-216"
+            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-217"
             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-218 MuiRadio-root RcRadio-root c3 PrivateSwitchBase-checked-219 Mui-checked RcRadio-checked"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-219 MuiRadio-root RcRadio-root c3 PrivateSwitchBase-checked-220 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-221"
+              className="PrivateSwitchBase-input-222"
               disabled={false}
               onChange={[Function]}
               type="radio"
               value="radio1"
             />
             <div
-              className="PrivateRadioButtonIcon-root-222 RadioButtonIcon-root PrivateRadioButtonIcon-checked-224"
+              className="PrivateRadioButtonIcon-root-223 RadioButtonIcon-root PrivateRadioButtonIcon-checked-225"
             >
               <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-223"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-224"
                 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-218 MuiRadio-root RcRadio-root c3"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-219 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-221"
+              className="PrivateSwitchBase-input-222"
               disabled={false}
               onChange={[Function]}
               type="radio"
               value="radio2"
             />
             <div
-              className="PrivateRadioButtonIcon-root-222 RadioButtonIcon-root"
+              className="PrivateRadioButtonIcon-root-223 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-223"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-224"
                 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-218 MuiRadio-root RcRadio-root c3 PrivateSwitchBase-disabled-220 Mui-disabled RcRadio-disabled Mui-disabled Mui-disabled"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-219 MuiRadio-root RcRadio-root c3 PrivateSwitchBase-disabled-221 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-221"
+              className="PrivateSwitchBase-input-222"
               disabled={true}
               onChange={[Function]}
               type="radio"
               value="radio3"
             />
             <div
-              className="PrivateRadioButtonIcon-root-222 RadioButtonIcon-root"
+              className="PrivateRadioButtonIcon-root-223 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-223"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-224"
                 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 b8a2ad65..a019ea9d 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
@@ -306,7 +306,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect 1`]
       controlled mode
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c3 sc-fIosxK c2 sc-iFMAIt c3"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c3 sc-gyElHZ c2 sc-iqVWFU c3"
       theme={
         Object {
           "breakpoints": Object {
@@ -926,7 +926,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect 1`]
       uncontrolled mode
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c3 sc-fIosxK c2 sc-iFMAIt c3"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c3 sc-gyElHZ c2 sc-iqVWFU c3"
       theme={
         Object {
           "breakpoints": Object {
@@ -2404,7 +2404,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect Exam
 }
 
 <div
-  className="MuiBox-root MuiBox-root-225"
+  className="MuiBox-root MuiBox-root-226"
 >
   <div>
     <p
@@ -2415,7 +2415,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect Exam
       text
     </p>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c3 sc-fIosxK c2 sc-iFMAIt c3"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c3 sc-gyElHZ c2 sc-iqVWFU c3"
       theme={
         Object {
           "breakpoints": Object {
@@ -3032,7 +3032,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect Exam
       plain
     </p>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c9 sc-fIosxK c2 sc-iFMAIt c9"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c9 sc-gyElHZ c2 sc-iqVWFU c9"
       theme={
         Object {
           "breakpoints": Object {
@@ -3672,7 +3672,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect Exam
       round
     </p>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c14 sc-fIosxK c2 sc-iFMAIt c14"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c14 sc-gyElHZ c2 sc-iqVWFU c14"
       theme={
         Object {
           "breakpoints": Object {
@@ -4302,7 +4302,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect Exam
       plainIcon
     </p>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c14 sc-fIosxK c2 sc-iFMAIt c14"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 c14 sc-gyElHZ c2 sc-iqVWFU c14"
       theme={
         Object {
           "breakpoints": Object {
@@ -4929,7 +4929,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect Exam
       text
     </p>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c15 c16 c3 sc-fIosxK c16 sc-iFMAIt c3"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c15 c16 c3 sc-gyElHZ c16 sc-iqVWFU c3"
       theme={
         Object {
           "breakpoints": Object {
@@ -5546,7 +5546,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect Exam
       plain
     </p>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c15 c16 c9 sc-fIosxK c16 sc-iFMAIt c9"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c15 c16 c9 sc-gyElHZ c16 sc-iqVWFU c9"
       theme={
         Object {
           "breakpoints": Object {
@@ -6186,7 +6186,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect Exam
       round
     </p>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c15 c16 c14 sc-fIosxK c16 sc-iFMAIt c14"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c15 c16 c14 sc-gyElHZ c16 sc-iqVWFU c14"
       theme={
         Object {
           "breakpoints": Object {
@@ -6816,7 +6816,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/PlainSelect PlainSelect Exam
       plainIcon
     </p>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c15 c16 c14 sc-fIosxK c16 sc-iFMAIt c14"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c15 c16 c14 sc-gyElHZ c16 sc-iqVWFU c14"
       theme={
         Object {
           "breakpoints": Object {
diff --git a/packages/juno-core/src/components/Forms/Select/__stories__/__snapshots__/Selects.story.tsx.snap b/packages/juno-core/src/components/Forms/Select/__stories__/__snapshots__/Selects.story.tsx.snap
index 0201d941..47c1418f 100644
--- a/packages/juno-core/src/components/Forms/Select/__stories__/__snapshots__/Selects.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/Select/__stories__/__snapshots__/Selects.story.tsx.snap
@@ -284,7 +284,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -1174,7 +1174,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -2050,7 +2050,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -2940,7 +2940,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -3830,7 +3830,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -4719,7 +4719,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -5563,7 +5563,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -6402,7 +6402,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -7241,7 +7241,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -8080,7 +8080,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -8919,7 +8919,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -9758,7 +9758,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -10597,7 +10597,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -11657,7 +11657,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/Select Select 1`] = `
       LineSelect
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-fIosxK c2"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-gyElHZ c2"
       theme={
         Object {
           "breakpoints": Object {
@@ -12278,7 +12278,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/Select Select 1`] = `
       BoxSelect
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c5 sc-fIosxK c5"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c5 sc-gyElHZ c5"
       theme={
         Object {
           "breakpoints": Object {
@@ -12898,7 +12898,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/Select Select 1`] = `
       uncontrolled mode
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c6 c2 sc-fIosxK c2"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c6 c2 sc-gyElHZ c2"
       theme={
         Object {
           "breakpoints": Object {
@@ -13512,7 +13512,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/Select Select 1`] = `
       uncontrolled mode
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c6 c5 sc-fIosxK c5"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c6 c5 sc-gyElHZ c5"
       theme={
         Object {
           "breakpoints": Object {
@@ -14315,7 +14315,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/Select Select With Custom Me
 }
 
 <div
-  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+  className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
   theme={
     Object {
       "breakpoints": Object {
@@ -15108,7 +15108,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -15957,7 +15957,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-fIosxK c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-gyElHZ c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -16863,7 +16863,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/Select Virtualize Menu 1`] =
       VirtualizeLineSelect
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-fIosxK c2"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c2 sc-gyElHZ c2"
       theme={
         Object {
           "breakpoints": Object {
@@ -17483,7 +17483,7 @@ exports[`Storyshots 🚀 Cleanup Components/Selects/Select Virtualize Menu 1`] =
       VirtualizeBoxSelect
     </h5>
     <div
-      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c5 sc-fIosxK c5"
+      className="MuiFormControl-root MuiTextField-root RcTextField-root c1 c5 sc-gyElHZ c5"
       theme={
         Object {
           "breakpoints": Object {
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 5d10f51a..b3a21dc3 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-226"
+    className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-227"
     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-228 MuiSlider-valueLabel"
+      className="PrivateValueLabel-offset-229 MuiSlider-valueLabel"
     >
       <span
-        className="PrivateValueLabel-circle-229"
+        className="PrivateValueLabel-circle-230"
       >
         <span
-          className="PrivateValueLabel-label-230"
+          className="PrivateValueLabel-label-231"
         >
           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-231"
+          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-232"
           data-index={0}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -230,13 +230,13 @@ Array [
           tabIndex={0}
         >
           <span
-            className="PrivateValueLabel-offset-233 MuiSlider-valueLabel"
+            className="PrivateValueLabel-offset-234 MuiSlider-valueLabel"
           >
             <span
-              className="PrivateValueLabel-circle-234"
+              className="PrivateValueLabel-circle-235"
             >
               <span
-                className="PrivateValueLabel-label-235"
+                className="PrivateValueLabel-label-236"
               >
                 0
               </span>
@@ -550,7 +550,7 @@ Array [
           aria-valuemax={100}
           aria-valuemin={0}
           aria-valuenow={0}
-          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-231"
+          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-232"
           data-index={0}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -566,13 +566,13 @@ Array [
           tabIndex={0}
         >
           <span
-            className="PrivateValueLabel-offset-233 MuiSlider-valueLabel"
+            className="PrivateValueLabel-offset-234 MuiSlider-valueLabel"
           >
             <span
-              className="PrivateValueLabel-circle-234"
+              className="PrivateValueLabel-circle-235"
             >
               <span
-                className="PrivateValueLabel-label-235"
+                className="PrivateValueLabel-label-236"
               >
                 0
               </span>
@@ -1306,7 +1306,7 @@ Array [
           aria-valuemax={100}
           aria-valuemin={0}
           aria-valuenow={0}
-          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-231"
+          className="MuiSlider-thumb RcSlider-thumb MuiSlider-thumbColorPrimary PrivateValueLabel-thumb-232"
           data-index={0}
           onBlur={[Function]}
           onFocus={[Function]}
@@ -1322,13 +1322,13 @@ Array [
           tabIndex={0}
         >
           <span
-            className="PrivateValueLabel-offset-233 MuiSlider-valueLabel"
+            className="PrivateValueLabel-offset-234 MuiSlider-valueLabel"
           >
             <span
-              className="PrivateValueLabel-circle-234"
+              className="PrivateValueLabel-circle-235"
             >
               <span
-                className="PrivateValueLabel-label-235"
+                className="PrivateValueLabel-label-236"
               >
                 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 1aef843d..4067e01a 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
@@ -74,7 +74,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch 1`] = `
 >
   <span
     aria-disabled={false}
-    className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-236 MuiSwitch-switchBase RcSwitch-switchBase"
+    className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-237 MuiSwitch-switchBase RcSwitch-switchBase"
     onBlur={[Function]}
     onDragLeave={[Function]}
     onFocus={[Function]}
@@ -92,7 +92,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch 1`] = `
       className="MuiIconButton-label"
     >
       <input
-        className="PrivateSwitchBase-input-239 MuiSwitch-input"
+        className="PrivateSwitchBase-input-240 MuiSwitch-input"
         onChange={[Function]}
         type="checkbox"
       />
@@ -236,7 +236,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-240 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-241 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -254,7 +254,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-243 MuiSwitch-input"
+            className="PrivateSwitchBase-input-244 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -291,7 +291,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-240 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-241 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -309,7 +309,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-243 MuiSwitch-input"
+            className="PrivateSwitchBase-input-244 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -357,7 +357,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-240 MuiSwitch-switchBase RcSwitch-switchBase"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-241 MuiSwitch-switchBase RcSwitch-switchBase"
             onBlur={[Function]}
             onDragLeave={[Function]}
             onFocus={[Function]}
@@ -375,7 +375,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
               className="MuiIconButton-label"
             >
               <input
-                className="PrivateSwitchBase-input-243 MuiSwitch-input"
+                className="PrivateSwitchBase-input-244 MuiSwitch-input"
                 disabled={false}
                 name="RcSwitch name prop"
                 onChange={[Function]}
@@ -404,7 +404,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-240 MuiSwitch-switchBase RcSwitch-switchBase"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-241 MuiSwitch-switchBase RcSwitch-switchBase"
             onBlur={[Function]}
             onDragLeave={[Function]}
             onFocus={[Function]}
@@ -422,7 +422,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/Switch Switch Examples 1`] = `
               className="MuiIconButton-label"
             >
               <input
-                className="PrivateSwitchBase-input-243 MuiSwitch-input"
+                className="PrivateSwitchBase-input-244 MuiSwitch-input"
                 disabled={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -553,7 +553,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-244 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-245 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -571,7 +571,7 @@ Array [
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-247 MuiSwitch-input"
+            className="PrivateSwitchBase-input-248 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 e1e12e78..261ee4d6 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
@@ -938,7 +938,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-248"
+        className="MuiBox-root MuiBox-root-249"
       >
         <button
           aria-hidden={true}
@@ -1972,7 +1972,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-249"
+        className="MuiBox-root MuiBox-root-250"
       >
         <button
           aria-hidden={true}
@@ -3048,7 +3048,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-250"
+        className="MuiBox-root MuiBox-root-251"
       >
         <button
           aria-hidden={true}
@@ -4150,7 +4150,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-251"
+        className="MuiBox-root MuiBox-root-252"
       >
         <button
           aria-hidden={true}
@@ -5273,7 +5273,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-252"
+        className="MuiBox-root MuiBox-root-253"
       >
         <button
           aria-hidden={true}
@@ -6385,7 +6385,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-253"
+        className="MuiBox-root MuiBox-root-254"
       >
         <button
           aria-hidden={true}
@@ -7497,7 +7497,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-254"
+        className="MuiBox-root MuiBox-root-255"
       >
         <button
           aria-hidden={true}
@@ -8722,7 +8722,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-255"
+        className="MuiBox-root MuiBox-root-256"
       >
         <button
           aria-hidden={true}
@@ -9838,7 +9838,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-256"
+        className="MuiBox-root MuiBox-root-257"
       >
         <button
           aria-hidden={true}
@@ -10952,7 +10952,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-257"
+        className="MuiBox-root MuiBox-root-258"
       >
         <button
           aria-hidden={true}
@@ -12116,7 +12116,7 @@ Array [
         tabIndex={-1}
       />
       <div
-        className="MuiBox-root MuiBox-root-258"
+        className="MuiBox-root MuiBox-root-259"
       >
         <button
           aria-hidden={true}
@@ -13339,7 +13339,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-259"
+        className="MuiBox-root MuiBox-root-260"
       >
         <button
           aria-hidden={true}
@@ -14503,7 +14503,7 @@ Array [
         tabIndex={-1}
       />
       <div
-        className="MuiBox-root MuiBox-root-260"
+        className="MuiBox-root MuiBox-root-261"
       >
         <button
           aria-hidden={true}
@@ -15726,7 +15726,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-261"
+        className="MuiBox-root MuiBox-root-262"
       >
         <button
           aria-hidden={true}
@@ -16890,7 +16890,7 @@ Array [
         tabIndex={-1}
       />
       <div
-        className="MuiBox-root MuiBox-root-262"
+        className="MuiBox-root MuiBox-root-263"
       >
         <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 1855c5fb..e245e6e6 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
@@ -962,7 +962,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-263"
+        className="MuiBox-root MuiBox-root-264"
       >
         <button
           aria-describedby={null}
@@ -1948,7 +1948,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-264"
+        className="MuiBox-root MuiBox-root-265"
       >
         <button
           aria-hidden={true}
@@ -2998,7 +2998,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-265"
+        className="MuiBox-root MuiBox-root-266"
       >
         <button
           aria-describedby={null}
@@ -4092,7 +4092,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-266"
+        className="MuiBox-root MuiBox-root-267"
       >
         <button
           aria-hidden={true}
@@ -5182,7 +5182,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-267"
+        className="MuiBox-root MuiBox-root-268"
       >
         <button
           aria-hidden={true}
@@ -6304,7 +6304,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-268"
+        className="MuiBox-root MuiBox-root-269"
       >
         <button
           aria-hidden={true}
@@ -7394,7 +7394,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-269"
+        className="MuiBox-root MuiBox-root-270"
       >
         <button
           aria-hidden={true}
@@ -8480,7 +8480,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-270"
+        className="MuiBox-root MuiBox-root-271"
       >
         <button
           aria-hidden={true}
@@ -9570,7 +9570,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-271"
+        className="MuiBox-root MuiBox-root-272"
       >
         <button
           aria-hidden={true}
@@ -10656,7 +10656,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-272"
+        className="MuiBox-root MuiBox-root-273"
       >
         <button
           aria-hidden={true}
@@ -11955,7 +11955,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/TextField TextField with align
           value="text align"
         />
         <div
-          className="MuiBox-root MuiBox-root-273"
+          className="MuiBox-root MuiBox-root-274"
         >
           <button
             aria-hidden={true}
@@ -12576,7 +12576,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/TextField TextField with align
           value="text align"
         />
         <div
-          className="MuiBox-root MuiBox-root-274"
+          className="MuiBox-root MuiBox-root-275"
         >
           <button
             aria-hidden={true}
@@ -13197,7 +13197,7 @@ exports[`Storyshots 🚀 Cleanup Components/Forms/TextField TextField with align
           value="text align"
         />
         <div
-          className="MuiBox-root MuiBox-root-275"
+          className="MuiBox-root MuiBox-root-276"
         >
           <button
             aria-hidden={true}
diff --git a/packages/juno-core/src/components/Forms/Textarea/__stories__/__snapshots__/Textarea.story.tsx.snap b/packages/juno-core/src/components/Forms/Textarea/__stories__/__snapshots__/Textarea.story.tsx.snap
index 420aad77..e79b2deb 100644
--- a/packages/juno-core/src/components/Forms/Textarea/__stories__/__snapshots__/Textarea.story.tsx.snap
+++ b/packages/juno-core/src/components/Forms/Textarea/__stories__/__snapshots__/Textarea.story.tsx.snap
@@ -177,7 +177,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-eWfVMQ c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-kTLmzF c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -938,7 +938,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-eWfVMQ c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-kTLmzF c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -1675,7 +1675,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-eWfVMQ c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-kTLmzF c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -2424,7 +2424,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-eWfVMQ c1 MuiFormControl-fullWidth"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-kTLmzF c1 MuiFormControl-fullWidth"
     theme={
       Object {
         "breakpoints": Object {
@@ -3177,7 +3177,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-eWfVMQ c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-kTLmzF c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -3930,7 +3930,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-eWfVMQ c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-kTLmzF c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -4681,7 +4681,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-eWfVMQ c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-kTLmzF c1"
     theme={
       Object {
         "breakpoints": Object {
@@ -5434,7 +5434,7 @@ Array [
 }
 
 <div
-    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-eWfVMQ c1"
+    className="MuiFormControl-root MuiTextField-root RcTextField-root c0 c1 sc-kTLmzF c1"
     theme={
       Object {
         "breakpoints": Object {
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 8605eed4..7c1a1f64 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-276"
+    className="MuiBox-root MuiBox-root-277"
   >
     <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 86e4d5bd..8650aaf1 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
@@ -473,7 +473,7 @@ exports[`Storyshots 🚀 Cleanup Components/Icon Icon With Dark Theme 1`] = `
 >
   <li>
     <button
-      className="MuiButtonBase-root-304 MuiButton-root-277 MuiButton-contained-285 RcButton-contained c1"
+      className="MuiButtonBase-root-305 MuiButton-root-278 MuiButton-contained-286 RcButton-contained c1"
       disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
@@ -491,13 +491,13 @@ exports[`Storyshots 🚀 Cleanup Components/Icon Icon With Dark Theme 1`] = `
       type="button"
     >
       <span
-        className="MuiButton-label-278"
+        className="MuiButton-label-279"
       >
         light
       </span>
     </button>
     <button
-      className="MuiButtonBase-root-304 MuiButton-root-277 MuiButton-contained-285 RcButton-contained c1"
+      className="MuiButtonBase-root-305 MuiButton-root-278 MuiButton-contained-286 RcButton-contained c1"
       disabled={false}
       onBlur={[Function]}
       onClick={[Function]}
@@ -515,7 +515,7 @@ exports[`Storyshots 🚀 Cleanup Components/Icon Icon With Dark Theme 1`] = `
       type="button"
     >
       <span
-        className="MuiButton-label-278"
+        className="MuiButton-label-279"
       >
         dark
       </span>
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 47ce0753..88906eb1 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
@@ -958,7 +958,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-322 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-323 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -976,7 +976,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-325"
+            className="PrivateSwitchBase-input-326"
             data-indeterminate={true}
             onChange={[Function]}
             type="checkbox"
@@ -1046,7 +1046,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-322 MuiRadio-root RcRadio-root c15 c16"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-323 MuiRadio-root RcRadio-root c15 c16"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -1064,12 +1064,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-325"
+            className="PrivateSwitchBase-input-326"
             onChange={[Function]}
             type="radio"
           />
           <div
-            className="PrivateRadioButtonIcon-root-326 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-327 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -1083,7 +1083,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-327"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-328"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -1125,7 +1125,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-322 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-323 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -1143,7 +1143,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-325"
+              className="PrivateSwitchBase-input-326"
               data-indeterminate={true}
               onChange={[Function]}
               type="checkbox"
@@ -1298,7 +1298,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-322 MuiSwitch-switchBase RcSwitch-switchBase"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-323 MuiSwitch-switchBase RcSwitch-switchBase"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -1316,7 +1316,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-325 MuiSwitch-input"
+              className="PrivateSwitchBase-input-326 MuiSwitch-input"
               onChange={[Function]}
               type="checkbox"
             />
@@ -1403,7 +1403,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-322 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-323 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c12 c13"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -1421,7 +1421,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Multiple-Lin
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-325"
+              className="PrivateSwitchBase-input-326"
               data-indeterminate={true}
               onChange={[Function]}
               type="checkbox"
@@ -2340,7 +2340,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiCheckbox-root RcCheckbox-root c15 c16"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiCheckbox-root RcCheckbox-root c15 c16"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -2358,7 +2358,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-318"
+            className="PrivateSwitchBase-input-319"
             data-indeterminate={false}
             onChange={[Function]}
             type="checkbox"
@@ -2418,7 +2418,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiRadio-root RcRadio-root c18 c19"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiRadio-root RcRadio-root c18 c19"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -2436,12 +2436,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-318"
+            className="PrivateSwitchBase-input-319"
             onChange={[Function]}
             type="radio"
           />
           <div
-            className="PrivateRadioButtonIcon-root-319 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-320 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -2455,7 +2455,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-320"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-321"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -2508,7 +2508,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiSwitch-switchBase RcSwitch-switchBase"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiSwitch-switchBase RcSwitch-switchBase"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -2526,7 +2526,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-318 MuiSwitch-input"
+              className="PrivateSwitchBase-input-319 MuiSwitch-input"
               onChange={[Function]}
               type="checkbox"
             />
@@ -2583,7 +2583,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiCheckbox-root RcCheckbox-root c15 c16"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiCheckbox-root RcCheckbox-root c15 c16"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -2601,7 +2601,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-318"
+              className="PrivateSwitchBase-input-319"
               data-indeterminate={false}
               onChange={[Function]}
               type="checkbox"
@@ -2670,7 +2670,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiRadio-root RcRadio-root c18 c19"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiRadio-root RcRadio-root c18 c19"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -2688,12 +2688,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-318"
+              className="PrivateSwitchBase-input-319"
               onChange={[Function]}
               type="radio"
             />
             <div
-              className="PrivateRadioButtonIcon-root-319 RadioButtonIcon-root"
+              className="PrivateRadioButtonIcon-root-320 RadioButtonIcon-root"
             >
               <svg
                 aria-hidden={true}
@@ -2707,7 +2707,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               </svg>
               <svg
                 aria-hidden={true}
-                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-320"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-321"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -2769,7 +2769,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiSwitch-switchBase RcSwitch-switchBase"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiSwitch-switchBase RcSwitch-switchBase"
             onBlur={[Function]}
             onDragLeave={[Function]}
             onFocus={[Function]}
@@ -2787,7 +2787,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               className="MuiIconButton-label"
             >
               <input
-                className="PrivateSwitchBase-input-318 MuiSwitch-input"
+                className="PrivateSwitchBase-input-319 MuiSwitch-input"
                 onChange={[Function]}
                 type="checkbox"
               />
@@ -2847,7 +2847,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiCheckbox-root RcCheckbox-root c15 c16"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiCheckbox-root RcCheckbox-root c15 c16"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -2865,7 +2865,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-318"
+            className="PrivateSwitchBase-input-319"
             data-indeterminate={false}
             onChange={[Function]}
             type="checkbox"
@@ -2930,7 +2930,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiRadio-root RcRadio-root c18 c19"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiRadio-root RcRadio-root c18 c19"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -2948,12 +2948,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-318"
+            className="PrivateSwitchBase-input-319"
             onChange={[Function]}
             type="radio"
           />
           <div
-            className="PrivateRadioButtonIcon-root-319 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-320 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -2967,7 +2967,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-320"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-321"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -3025,7 +3025,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiSwitch-switchBase RcSwitch-switchBase"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiSwitch-switchBase RcSwitch-switchBase"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3043,7 +3043,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-318 MuiSwitch-input"
+              className="PrivateSwitchBase-input-319 MuiSwitch-input"
               onChange={[Function]}
               type="checkbox"
             />
@@ -3288,7 +3288,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiCheckbox-root RcCheckbox-root c15 c16"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiCheckbox-root RcCheckbox-root c15 c16"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3306,7 +3306,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-318"
+              className="PrivateSwitchBase-input-319"
               data-indeterminate={false}
               onChange={[Function]}
               type="checkbox"
@@ -3354,7 +3354,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiCheckbox-root RcCheckbox-root c15 c16"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiCheckbox-root RcCheckbox-root c15 c16"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3372,7 +3372,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-318"
+              className="PrivateSwitchBase-input-319"
               data-indeterminate={false}
               onChange={[Function]}
               type="checkbox"
@@ -3432,7 +3432,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiRadio-root RcRadio-root c18 c19"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiRadio-root RcRadio-root c18 c19"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3450,12 +3450,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-318"
+              className="PrivateSwitchBase-input-319"
               onChange={[Function]}
               type="radio"
             />
             <div
-              className="PrivateRadioButtonIcon-root-319 RadioButtonIcon-root"
+              className="PrivateRadioButtonIcon-root-320 RadioButtonIcon-root"
             >
               <svg
                 aria-hidden={true}
@@ -3469,7 +3469,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               </svg>
               <svg
                 aria-hidden={true}
-                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-320"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-321"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -3507,7 +3507,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiRadio-root RcRadio-root c18 c19"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiRadio-root RcRadio-root c18 c19"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3525,12 +3525,12 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-318"
+              className="PrivateSwitchBase-input-319"
               onChange={[Function]}
               type="radio"
             />
             <div
-              className="PrivateRadioButtonIcon-root-319 RadioButtonIcon-root"
+              className="PrivateRadioButtonIcon-root-320 RadioButtonIcon-root"
             >
               <svg
                 aria-hidden={true}
@@ -3544,7 +3544,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               </svg>
               <svg
                 aria-hidden={true}
-                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-320"
+                className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-321"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
@@ -3597,7 +3597,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiSwitch-switchBase RcSwitch-switchBase"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiSwitch-switchBase RcSwitch-switchBase"
             onBlur={[Function]}
             onDragLeave={[Function]}
             onFocus={[Function]}
@@ -3615,7 +3615,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               className="MuiIconButton-label"
             >
               <input
-                className="PrivateSwitchBase-input-318 MuiSwitch-input"
+                className="PrivateSwitchBase-input-319 MuiSwitch-input"
                 onChange={[Function]}
                 type="checkbox"
               />
@@ -3655,7 +3655,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
         >
           <span
             aria-disabled={false}
-            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-315 MuiSwitch-switchBase RcSwitch-switchBase"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-316 MuiSwitch-switchBase RcSwitch-switchBase"
             onBlur={[Function]}
             onDragLeave={[Function]}
             onFocus={[Function]}
@@ -3673,7 +3673,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItem Examples Single-Line
               className="MuiIconButton-label"
             >
               <input
-                className="PrivateSwitchBase-input-318 MuiSwitch-input"
+                className="PrivateSwitchBase-input-319 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 26909959..ee35dd2d 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
@@ -225,7 +225,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItemSecondaryAction ListIt
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-329 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c5"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-330 MuiCheckbox-root RcCheckbox-root MuiCheckbox-indeterminate c5"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -243,7 +243,7 @@ exports[`Storyshots 🚀 Cleanup Components/Lists/ListItemSecondaryAction ListIt
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-332"
+            className="PrivateSwitchBase-input-333"
             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 842ef976..65557b92 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
@@ -1910,7 +1910,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c2"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-334 MuiCheckbox-root RcCheckbox-root c2"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -1928,7 +1928,7 @@ Array [
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-336"
+            className="PrivateSwitchBase-input-337"
             data-indeterminate={false}
             onChange={[Function]}
             type="checkbox"
@@ -2143,7 +2143,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiRadio-root RcRadio-root c2"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-334 MuiRadio-root RcRadio-root c2"
         onBlur={[Function]}
         onDragLeave={[Function]}
         onFocus={[Function]}
@@ -2161,12 +2161,12 @@ Array [
           className="MuiIconButton-label"
         >
           <input
-            className="PrivateSwitchBase-input-336"
+            className="PrivateSwitchBase-input-337"
             onChange={[Function]}
             type="radio"
           />
           <div
-            className="PrivateRadioButtonIcon-root-337 RadioButtonIcon-root"
+            className="PrivateRadioButtonIcon-root-338 RadioButtonIcon-root"
           >
             <svg
               aria-hidden={true}
@@ -2180,7 +2180,7 @@ Array [
             </svg>
             <svg
               aria-hidden={true}
-              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-338"
+              className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-339"
               focusable="false"
               viewBox="0 0 24 24"
             >
@@ -2432,7 +2432,7 @@ Array [
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiSwitch-switchBase RcSwitch-switchBase"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-334 MuiSwitch-switchBase RcSwitch-switchBase"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -2450,7 +2450,7 @@ Array [
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-336 MuiSwitch-input"
+              className="PrivateSwitchBase-input-337 MuiSwitch-input"
               onChange={[Function]}
               type="checkbox"
             />
@@ -3640,7 +3640,7 @@ Array [
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-334 MuiCheckbox-root RcCheckbox-root c4"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3658,7 +3658,7 @@ Array [
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-336"
+              className="PrivateSwitchBase-input-337"
               data-indeterminate={false}
               onChange={[Function]}
               type="checkbox"
@@ -3706,7 +3706,7 @@ Array [
       >
         <span
           aria-disabled={false}
-          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-333 MuiCheckbox-root RcCheckbox-root c4"
+          className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-334 MuiCheckbox-root RcCheckbox-root c4"
           onBlur={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
@@ -3724,7 +3724,7 @@ Array [
             className="MuiIconButton-label"
           >
             <input
-              className="PrivateSwitchBase-input-336"
+              className="PrivateSwitchBase-input-337"
               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 c9903651..0e492918 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-340"
+  className="MuiBox-root MuiBox-root-341"
 >
   <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 f08f1f00..236aa325 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
@@ -1217,7 +1217,7 @@ Array [
         value="Example"
       />
       <div
-        className="MuiBox-root MuiBox-root-341"
+        className="MuiBox-root MuiBox-root-342"
       >
         <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 b22a9740..c72efd01 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 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-342 MuiCheckbox-root RcCheckbox-root c4"
+            className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-343 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-345"
+                className="PrivateSwitchBase-input-346"
                 data-indeterminate={false}
                 onChange={[Function]}
                 type="checkbox"
@@ -66573,7 +66573,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Virtualized Table 1`] =
           >
             <span
               aria-disabled={false}
-              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-346 MuiCheckbox-root RcCheckbox-root c3"
+              className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-347 MuiCheckbox-root RcCheckbox-root c3"
               onBlur={[Function]}
               onClick={[Function]}
               onDragLeave={[Function]}
@@ -66593,7 +66593,7 @@ exports[`Storyshots 🚀 Cleanup Components/Table/Table Virtualized Table 1`] =
               >
                 <input
                   checked={false}
-                  className="PrivateSwitchBase-input-349"
+                  className="PrivateSwitchBase-input-350"
                   data-indeterminate={false}
                   onChange={[Function]}
                   type="checkbox"
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 dd57bbf5..9669d7da 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-350 PrivateTabIndicator-colorPrimary-351 MuiTabs-indicator RcTabs-indicator"
+          className="PrivateTabIndicator-root-351 PrivateTabIndicator-colorPrimary-352 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 791f7890..534301da 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-354 PrivateTabIndicator-colorPrimary-355 MuiTabs-indicator RcTabs-indicator"
+              className="PrivateTabIndicator-root-355 PrivateTabIndicator-colorPrimary-356 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 0d94e20c..9a5d6b5b 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
@@ -386,7 +386,7 @@ Array [
           </button>
         </div>
         <span
-          className="PrivateTabIndicator-root-375 PrivateTabIndicator-colorPrimary-376 MuiTabs-indicator RcTabs-indicator"
+          className="PrivateTabIndicator-root-376 PrivateTabIndicator-colorPrimary-377 MuiTabs-indicator RcTabs-indicator"
           style={
             Object {
               "left": 0,
@@ -479,7 +479,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-379"
+    className="MuiBox-root MuiBox-root-380"
   >
     <button
       className="MuiButtonBase-root MuiButton-root MuiButton-contained RcButton-contained c0"
@@ -888,7 +888,7 @@ exports[`Storyshots 🚀 Cleanup Components/Tabs/Tabs Tabs 1`] = `
         </button>
       </div>
       <span
-        className="PrivateTabIndicator-root-358 PrivateTabIndicator-colorPrimary-359 MuiTabs-indicator RcTabs-indicator"
+        className="PrivateTabIndicator-root-359 PrivateTabIndicator-colorPrimary-360 MuiTabs-indicator RcTabs-indicator"
         style={
           Object {
             "left": 0,
@@ -1263,7 +1263,7 @@ Array [
           </button>
         </div>
         <span
-          className="PrivateTabIndicator-root-367 PrivateTabIndicator-colorPrimary-368 MuiTabs-indicator RcTabs-indicator"
+          className="PrivateTabIndicator-root-368 PrivateTabIndicator-colorPrimary-369 MuiTabs-indicator RcTabs-indicator"
           style={
             Object {
               "left": 0,
@@ -1395,7 +1395,7 @@ Array [
               Tab 0
             </span>
             <span
-              className="PrivateTabIndicator-root-362 PrivateTabIndicator-colorPrimary-363 MuiTabs-indicator RcTabs-indicator"
+              className="PrivateTabIndicator-root-363 PrivateTabIndicator-colorPrimary-364 MuiTabs-indicator RcTabs-indicator"
               style={Object {}}
             />
           </button>
@@ -1796,7 +1796,7 @@ Array [
               Tab 0
             </span>
             <span
-              className="PrivateTabIndicator-root-362 PrivateTabIndicator-colorPrimary-363 MuiTabs-indicator RcTabs-indicator"
+              className="PrivateTabIndicator-root-363 PrivateTabIndicator-colorPrimary-364 MuiTabs-indicator RcTabs-indicator"
               style={Object {}}
             />
           </button>
@@ -2185,7 +2185,7 @@ Array [
               Tab 0
             </span>
             <span
-              className="PrivateTabIndicator-root-362 PrivateTabIndicator-colorPrimary-363 MuiTabs-indicator RcTabs-indicator"
+              className="PrivateTabIndicator-root-363 PrivateTabIndicator-colorPrimary-364 MuiTabs-indicator RcTabs-indicator"
               style={Object {}}
             />
           </button>
@@ -2577,7 +2577,7 @@ Array [
               Tab 0
             </span>
             <span
-              className="PrivateTabIndicator-root-362 PrivateTabIndicator-colorPrimary-363 MuiTabs-indicator RcTabs-indicator"
+              className="PrivateTabIndicator-root-363 PrivateTabIndicator-colorPrimary-364 MuiTabs-indicator RcTabs-indicator"
               style={Object {}}
             />
           </button>
@@ -2937,7 +2937,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-366"
+    className="MuiBox-root MuiBox-root-367"
   >
     <button
       className="MuiButtonBase-root MuiButton-root MuiButton-contained RcButton-contained c0"
@@ -3061,7 +3061,7 @@ Array [
               Tab 0-0
             </span>
             <span
-              className="PrivateTabIndicator-root-371 PrivateTabIndicator-colorPrimary-372 MuiTabs-indicator RcTabs-indicator"
+              className="PrivateTabIndicator-root-372 PrivateTabIndicator-colorPrimary-373 MuiTabs-indicator RcTabs-indicator"
               style={Object {}}
             />
           </button>
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 54323ed5..962cfbb4 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
@@ -70,7 +70,7 @@ exports[`Storyshots 🚀 Cleanup Components/Tooltip Tooltip 1`] = `
 }
 
 <div
-  className="MuiBox-root MuiBox-root-380"
+  className="MuiBox-root MuiBox-root-381"
 >
   <button
     aria-describedby={null}
@@ -1071,7 +1071,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-381 MuiCheckbox-root RcCheckbox-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-382 MuiCheckbox-root RcCheckbox-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -1089,7 +1089,7 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-384"
+          className="PrivateSwitchBase-input-385"
           data-indeterminate={false}
           disabled={false}
           onChange={[Function]}
@@ -1222,7 +1222,7 @@ Array [
   >
     <span
       aria-disabled={false}
-      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-381 MuiRadio-root RcRadio-root c1"
+      className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-382 MuiRadio-root RcRadio-root c1"
       onBlur={[Function]}
       onDragLeave={[Function]}
       onFocus={[Function]}
@@ -1240,13 +1240,13 @@ Array [
         className="MuiIconButton-label"
       >
         <input
-          className="PrivateSwitchBase-input-384"
+          className="PrivateSwitchBase-input-385"
           disabled={false}
           onChange={[Function]}
           type="radio"
         />
         <div
-          className="PrivateRadioButtonIcon-root-385 RadioButtonIcon-root"
+          className="PrivateRadioButtonIcon-root-386 RadioButtonIcon-root"
         >
           <svg
             aria-hidden={true}
@@ -1260,7 +1260,7 @@ Array [
           </svg>
           <svg
             aria-hidden={true}
-            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-386"
+            className="MuiSvgIcon-root PrivateRadioButtonIcon-layer-387"
             focusable="false"
             viewBox="0 0 24 24"
           >
@@ -2876,7 +2876,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-388 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-389 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -2896,7 +2896,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-391 MuiSwitch-input"
+            className="PrivateSwitchBase-input-392 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 0c1c55cf..a6257469 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
@@ -133,7 +133,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-392"
+    className="MuiBox-root MuiBox-root-393"
   >
     <div
       className="MuiCollapse-root MuiCollapse-hidden"
@@ -150,7 +150,7 @@ Array [
           className="MuiCollapse-wrapperInner"
         >
           <div
-            className="MuiBox-root MuiBox-root-393"
+            className="MuiBox-root MuiBox-root-394"
           />
         </div>
       </div>
@@ -170,7 +170,7 @@ Array [
           className="MuiCollapse-wrapperInner"
         >
           <div
-            className="MuiBox-root MuiBox-root-394"
+            className="MuiBox-root MuiBox-root-395"
           />
         </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 1a92a865..a12222ba 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
@@ -106,7 +106,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-395 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-396 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -126,7 +126,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-398 MuiSwitch-input"
+            className="PrivateSwitchBase-input-399 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -160,10 +160,10 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-399"
+    className="MuiBox-root MuiBox-root-400"
   >
     <div
-      className="MuiBox-root MuiBox-root-400"
+      className="MuiBox-root MuiBox-root-401"
       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 182d40fa..a421c866 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
@@ -106,7 +106,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-401 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-402 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -126,7 +126,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-404 MuiSwitch-input"
+            className="PrivateSwitchBase-input-405 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -160,10 +160,10 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-405"
+    className="MuiBox-root MuiBox-root-406"
   >
     <div
-      className="MuiBox-root MuiBox-root-406"
+      className="MuiBox-root MuiBox-root-407"
       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 db47b686..66bf8952 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
@@ -106,7 +106,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-407 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-408 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -126,7 +126,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-410 MuiSwitch-input"
+            className="PrivateSwitchBase-input-411 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -160,10 +160,10 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-411"
+    className="MuiBox-root MuiBox-root-412"
   >
     <div
-      className="MuiBox-root MuiBox-root-412"
+      className="MuiBox-root MuiBox-root-413"
       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 0b988cae..33642a6b 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
@@ -106,7 +106,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-413 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-414 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -126,7 +126,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-416 MuiSwitch-input"
+            className="PrivateSwitchBase-input-417 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -160,10 +160,10 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-417"
+    className="MuiBox-root MuiBox-root-418"
   >
     <div
-      className="MuiBox-root MuiBox-root-418"
+      className="MuiBox-root MuiBox-root-419"
       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 e34cf76b..79a2b810 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
@@ -106,7 +106,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-419 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-420 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -126,7 +126,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-422 MuiSwitch-input"
+            className="PrivateSwitchBase-input-423 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
@@ -304,7 +304,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-423 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-424 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -324,7 +324,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-426 MuiSwitch-input"
+            className="PrivateSwitchBase-input-427 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 dbc05502..22a78c35 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
@@ -106,7 +106,7 @@ Array [
     >
       <span
         aria-disabled={false}
-        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-427 MuiSwitch-switchBase RcSwitch-switchBase"
+        className="MuiButtonBase-root MuiIconButton-root PrivateSwitchBase-root-428 MuiSwitch-switchBase RcSwitch-switchBase"
         onBlur={[Function]}
         onClick={[Function]}
         onDragLeave={[Function]}
@@ -126,7 +126,7 @@ Array [
         >
           <input
             checked={false}
-            className="PrivateSwitchBase-input-430 MuiSwitch-input"
+            className="PrivateSwitchBase-input-431 MuiSwitch-input"
             onChange={[Function]}
             type="checkbox"
           />
diff --git a/packages/juno-core/src/foundation/hooks/useFocusInside/__stories__/__snapshots__/useFocusInside.story.tsx.snap b/packages/juno-core/src/foundation/hooks/useFocusInside/__stories__/__snapshots__/useFocusInside.story.tsx.snap
new file mode 100644
index 00000000..6597e7a3
--- /dev/null
+++ b/packages/juno-core/src/foundation/hooks/useFocusInside/__stories__/__snapshots__/useFocusInside.story.tsx.snap
@@ -0,0 +1,330 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots 🔧 Foundation/Hooks/useFocusInside useFocusInside 1`] = `
+Array [
+  .c0 {
+  font-size: 1.5rem;
+  font-weight: 400;
+  font-family: Lato,Helvetica,Arial,sans-serif;
+  line-height: 32px;
+  color: #121212;
+}
+
+.c1 {
+  font-family: Lato,Helvetica,Arial,sans-serif;
+}
+
+.c2.highlight-term {
+  color: #121212 !important;
+  background-color: #FFDFB1 !important;
+}
+
+<h5
+    className="MuiTypography-root c0 MuiTypography-paragraph MuiTypography-displayBlock"
+    data-color="neutral.f06"
+    data-variant="headline1"
+  >
+    Focus will alway inside the container with
+     
+    <span
+      className="MuiTypography-root c1 c2 highlight-term MuiTypography-noWrap"
+      data-color="initial"
+      data-variant="inherit"
+      title="useFocusInside"
+    >
+      useFocusInside
+    </span>
+    <br />
+    <br />
+    use tab to switch focus, will alway keep inside container
+     
+  </h5>,
+  .c0 {
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 0;
+  height: 0;
+}
+
+.c2 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  line-height: 1;
+  border-radius: 50%;
+  overflow: hidden;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  outline: none;
+  color: #FFFFFF;
+  font-size: 1.25rem;
+  font-weight: 700;
+  font-family: Lato,Helvetica,Arial,sans-serif;
+  line-height: 28px;
+  width: 64px;
+  height: 64px;
+  background-color: #F3F3F3;
+}
+
+.c2 > img,
+.c2 > canvas {
+  width: 100%;
+  height: 100%;
+}
+
+.c1 {
+  position: relative;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  outline: 0;
+  background: none;
+  color: inherit;
+  border: none;
+  padding: 0;
+  font: inherit;
+  cursor: pointer;
+  outline: inherit;
+}
+
+.c1.focus-visible,
+.c1[data-focus-visible-added] {
+  box-shadow: 0 0 0 1px #066FAC;
+  border-radius: 4px;
+}
+
+.c1.focus-visible,
+.c1[data-focus-visible-added] .RcAvatar-avatarContainer,
+.c1 .RcAvatar-avatarContainer:hover {
+  opacity: 0.88;
+}
+
+.c1.focus-visible:active,
+.c1[data-focus-visible-added] .RcAvatar-avatarContainer:active,
+.c1 .RcAvatar-avatarContainer:active {
+  opacity: 0.76;
+}
+
+.c3 {
+  font-size: 0.875rem;
+  font-weight: 400;
+  font-family: Lato,Helvetica,Arial,sans-serif;
+  line-height: 20px;
+  color: #666666;
+}
+
+<div
+    className="MuiBox-root MuiBox-root-8"
+  >
+    <span
+      className="c0"
+      data-test-automation-id="focus-inside-start"
+      onFocus={[Function]}
+      tabIndex={0}
+    />
+    <button
+      className="c1 "
+      data-focusable={true}
+      data-test-automation-class="avatar"
+      type="button"
+    >
+      <div
+        className="c2 RcAvatar-avatarContainer"
+      >
+        <p
+          className="MuiTypography-root c3"
+          data-color="neutral.f04"
+          data-variant="body1"
+        >
+          0
+        </p>
+      </div>
+    </button>
+    <button
+      className="c1 "
+      data-focusable={true}
+      data-test-automation-class="avatar"
+      type="button"
+    >
+      <div
+        className="c2 RcAvatar-avatarContainer"
+      >
+        <p
+          className="MuiTypography-root c3"
+          data-color="neutral.f04"
+          data-variant="body1"
+        >
+          1
+        </p>
+      </div>
+    </button>
+    <button
+      className="c1 "
+      data-focusable={true}
+      data-test-automation-class="avatar"
+      type="button"
+    >
+      <div
+        className="c2 RcAvatar-avatarContainer"
+      >
+        <p
+          className="MuiTypography-root c3"
+          data-color="neutral.f04"
+          data-variant="body1"
+        >
+          2
+        </p>
+      </div>
+    </button>
+    <button
+      className="c1 "
+      data-focusable={true}
+      data-test-automation-class="avatar"
+      type="button"
+    >
+      <div
+        className="c2 RcAvatar-avatarContainer"
+      >
+        <p
+          className="MuiTypography-root c3"
+          data-color="neutral.f04"
+          data-variant="body1"
+        >
+          3
+        </p>
+      </div>
+    </button>
+    <button
+      className="c1 "
+      data-focusable={true}
+      data-test-automation-class="avatar"
+      type="button"
+    >
+      <div
+        className="c2 RcAvatar-avatarContainer"
+      >
+        <p
+          className="MuiTypography-root c3"
+          data-color="neutral.f04"
+          data-variant="body1"
+        >
+          4
+        </p>
+      </div>
+    </button>
+    <button
+      className="c1 "
+      data-focusable={true}
+      data-test-automation-class="avatar"
+      type="button"
+    >
+      <div
+        className="c2 RcAvatar-avatarContainer"
+      >
+        <p
+          className="MuiTypography-root c3"
+          data-color="neutral.f04"
+          data-variant="body1"
+        >
+          5
+        </p>
+      </div>
+    </button>
+    <button
+      className="c1 "
+      data-focusable={true}
+      data-test-automation-class="avatar"
+      type="button"
+    >
+      <div
+        className="c2 RcAvatar-avatarContainer"
+      >
+        <p
+          className="MuiTypography-root c3"
+          data-color="neutral.f04"
+          data-variant="body1"
+        >
+          6
+        </p>
+      </div>
+    </button>
+    <button
+      className="c1 "
+      data-focusable={true}
+      data-test-automation-class="avatar"
+      type="button"
+    >
+      <div
+        className="c2 RcAvatar-avatarContainer"
+      >
+        <p
+          className="MuiTypography-root c3"
+          data-color="neutral.f04"
+          data-variant="body1"
+        >
+          7
+        </p>
+      </div>
+    </button>
+    <button
+      className="c1 "
+      data-focusable={true}
+      data-test-automation-class="avatar"
+      type="button"
+    >
+      <div
+        className="c2 RcAvatar-avatarContainer"
+      >
+        <p
+          className="MuiTypography-root c3"
+          data-color="neutral.f04"
+          data-variant="body1"
+        >
+          8
+        </p>
+      </div>
+    </button>
+    <button
+      className="c1 "
+      data-focusable={true}
+      data-test-automation-class="avatar"
+      type="button"
+    >
+      <div
+        className="c2 RcAvatar-avatarContainer"
+      >
+        <p
+          className="MuiTypography-root c3"
+          data-color="neutral.f04"
+          data-variant="body1"
+        >
+          9
+        </p>
+      </div>
+    </button>
+    <span
+      className="c0"
+      data-test-automation-id="focus-inside-end"
+      onFocus={[Function]}
+      tabIndex={0}
+    />
+  </div>,
+]
+`;
diff --git a/packages/juno-core/src/foundation/hooks/useForceUpdate/__stories__/__snapshots__/useForceUpdate.story.tsx.snap b/packages/juno-core/src/foundation/hooks/useForceUpdate/__stories__/__snapshots__/useForceUpdate.story.tsx.snap
index 23148292..0b56fe5e 100644
--- a/packages/juno-core/src/foundation/hooks/useForceUpdate/__stories__/__snapshots__/useForceUpdate.story.tsx.snap
+++ b/packages/juno-core/src/foundation/hooks/useForceUpdate/__stories__/__snapshots__/useForceUpdate.story.tsx.snap
@@ -121,9 +121,6 @@ Array [
       Render times: 
       1
     </span>
-    <span
-      className="MuiTouchRipple-root"
-    />
   </button>,
   @media (hover:hover) and (pointer:fine) {
 
@@ -270,9 +267,6 @@ Array [
       Render times: 
       1
     </span>
-    <span
-      className="MuiTouchRipple-root"
-    />
   </button>,
 ]
 `;
diff --git a/packages/juno-core/src/foundation/hooks/useGlobalListener/__stories__/__snapshots__/useGlobalListener.story.tsx.snap b/packages/juno-core/src/foundation/hooks/useGlobalListener/__stories__/__snapshots__/useGlobalListener.story.tsx.snap
index e7c0f597..b4d3415f 100644
--- a/packages/juno-core/src/foundation/hooks/useGlobalListener/__stories__/__snapshots__/useGlobalListener.story.tsx.snap
+++ b/packages/juno-core/src/foundation/hooks/useGlobalListener/__stories__/__snapshots__/useGlobalListener.story.tsx.snap
@@ -117,7 +117,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-8"
+    className="MuiBox-root MuiBox-root-9"
   >
     <button
       className="MuiButtonBase-root MuiButton-root MuiButton-contained RcButton-contained c0"
@@ -232,7 +232,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-9"
+    className="MuiBox-root MuiBox-root-10"
     style={
       Object {
         "overflowX": "hidden",
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 e480a871..60673447 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
@@ -899,7 +899,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-10"
+        className="MuiBox-root MuiBox-root-11"
       >
         <button
           aria-hidden={true}
@@ -1867,7 +1867,7 @@ Array [
         value=""
       />
       <div
-        className="MuiBox-root MuiBox-root-11"
+        className="MuiBox-root MuiBox-root-12"
       >
         <button
           aria-hidden={true}
diff --git a/packages/juno-core/src/foundation/hooks/useKeyboardMoveFocus/__stories__/__snapshots__/useMoveFocusedIndex.story.tsx.snap b/packages/juno-core/src/foundation/hooks/useKeyboardMoveFocus/__stories__/__snapshots__/useMoveFocusedIndex.story.tsx.snap
index f1fb4862..0027f66b 100644
--- a/packages/juno-core/src/foundation/hooks/useKeyboardMoveFocus/__stories__/__snapshots__/useMoveFocusedIndex.story.tsx.snap
+++ b/packages/juno-core/src/foundation/hooks/useKeyboardMoveFocus/__stories__/__snapshots__/useMoveFocusedIndex.story.tsx.snap
@@ -195,7 +195,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-12"
+    className="MuiBox-root MuiBox-root-13"
   >
     <div>
       <h5
diff --git a/packages/juno-core/src/foundation/hooks/useLongPress/__stories__/__snapshots__/useLongPress.story.tsx.snap b/packages/juno-core/src/foundation/hooks/useLongPress/__stories__/__snapshots__/useLongPress.story.tsx.snap
index 46b06c0f..b5de076c 100644
--- a/packages/juno-core/src/foundation/hooks/useLongPress/__stories__/__snapshots__/useLongPress.story.tsx.snap
+++ b/packages/juno-core/src/foundation/hooks/useLongPress/__stories__/__snapshots__/useLongPress.story.tsx.snap
@@ -161,7 +161,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-13"
+    className="MuiBox-root MuiBox-root-14"
     style={
       Object {
         "overflowX": "hidden",
diff --git a/packages/juno-core/src/foundation/hooks/useRetry/__stories__/__snapshots__/useRetry.story.tsx.snap b/packages/juno-core/src/foundation/hooks/useRetry/__stories__/__snapshots__/useRetry.story.tsx.snap
index fac10fcf..b5784a18 100644
--- a/packages/juno-core/src/foundation/hooks/useRetry/__stories__/__snapshots__/useRetry.story.tsx.snap
+++ b/packages/juno-core/src/foundation/hooks/useRetry/__stories__/__snapshots__/useRetry.story.tsx.snap
@@ -293,7 +293,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-14"
+    className="MuiBox-root MuiBox-root-15"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-displayBlock"
@@ -652,7 +652,7 @@ Array [
 }
 
 <div
-    className="MuiBox-root MuiBox-root-15"
+    className="MuiBox-root MuiBox-root-16"
   >
     <h5
       className="MuiTypography-root c0 MuiTypography-displayBlock"
diff --git a/packages/juno-core/src/foundation/hooks/useTouchMouseEvent/__stories__/__snapshots__/useTouchMouseEvent.story.tsx.snap b/packages/juno-core/src/foundation/hooks/useTouchMouseEvent/__stories__/__snapshots__/useTouchMouseEvent.story.tsx.snap
index 2a4e9451..023ff21c 100644
--- a/packages/juno-core/src/foundation/hooks/useTouchMouseEvent/__stories__/__snapshots__/useTouchMouseEvent.story.tsx.snap
+++ b/packages/juno-core/src/foundation/hooks/useTouchMouseEvent/__stories__/__snapshots__/useTouchMouseEvent.story.tsx.snap
@@ -94,7 +94,7 @@ exports[`Storyshots 🔧 Foundation/Hooks/useTouchMouseEvent useTouchMouseEvent
     </span>
   </button>
   <div
-    className="MuiBox-root MuiBox-root-16"
+    className="MuiBox-root MuiBox-root-17"
     style={
       Object {
         "overflowX": "hidden",
diff --git a/packages/juno-core/src/foundation/theme/__stories__/__snapshots__/useTheme.story.tsx.snap b/packages/juno-core/src/foundation/theme/__stories__/__snapshots__/useTheme.story.tsx.snap
index 711869bb..07793c19 100644
--- a/packages/juno-core/src/foundation/theme/__stories__/__snapshots__/useTheme.story.tsx.snap
+++ b/packages/juno-core/src/foundation/theme/__stories__/__snapshots__/useTheme.story.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Storyshots 🔧 Foundation/Hooks/useTheme Theme Value 1`] = `
 <div
-  className="MuiBox-root MuiBox-root-17"
+  className="MuiBox-root MuiBox-root-18"
 >
   <pre>
     {
@@ -548,7 +548,7 @@ Array [
     Current Theme
   </h5>,
   <div
-    className="MuiBox-root MuiBox-root-18"
+    className="MuiBox-root MuiBox-root-19"
   >
     <pre>
       {
@@ -1090,7 +1090,7 @@ Array [
     Dark Theme
   </h5>,
   <div
-    className="MuiBox-root-19 MuiBox-root-20"
+    className="MuiBox-root-20 MuiBox-root-21"
   >
     <pre>
       {
@@ -1641,7 +1641,7 @@ Array [
     HighContrast Theme
   </h5>,
   <div
-    className="MuiBox-root-21 MuiBox-root-22"
+    className="MuiBox-root-22 MuiBox-root-23"
   >
     <pre>
       {
diff --git a/packages/juno-core/src/foundation/theme/__stories__/__snapshots__/useThemeProps.story.tsx.snap b/packages/juno-core/src/foundation/theme/__stories__/__snapshots__/useThemeProps.story.tsx.snap
index b8eb020b..c3f2821d 100644
--- a/packages/juno-core/src/foundation/theme/__stories__/__snapshots__/useThemeProps.story.tsx.snap
+++ b/packages/juno-core/src/foundation/theme/__stories__/__snapshots__/useThemeProps.story.tsx.snap
@@ -69,7 +69,7 @@ Array [
 }
 
 <p
-    className="MuiTypography-root-23 c0 c1 MuiTypography-noWrap-42"
+    className="MuiTypography-root-24 c0 c1 MuiTypography-noWrap-43"
     data-color="initial"
     data-variant="body1"
   >
diff --git a/sync-github.json b/sync-github.json
index b04ffe70..cbd6b3e9 100644
--- a/sync-github.json
+++ b/sync-github.json
@@ -1,3 +1,3 @@
 {
-  "latestCommitSHA": "a8217aab58d89ff9026316b4b551d34f6dcc05cb"
+  "latestCommitSHA": "77e715f65908ac7975726a1fdbe07af98f661d8a"
 }
\ No newline at end of file