diff --git a/__mocks__/@tippyjs/react.tsx b/__mocks__/@tippyjs/react.tsx
index 63aa0f392..9fc713d82 100644
--- a/__mocks__/@tippyjs/react.tsx
+++ b/__mocks__/@tippyjs/react.tsx
@@ -1,6 +1,6 @@
-import React from 'react';
+import React, { PropsWithChildren } from 'react';
 
-const Tippy: React.FC<{ content: string }> = props => {
+const Tippy = (props: PropsWithChildren<{ content: string }>) => {
   const { children, content, ...rest } = props;
 
   return (
diff --git a/src/components/Avatar/__snapshots__/Avatar.stories.storyshot b/src/components/Avatar/__snapshots__/Avatar.stories.storyshot
index 197668ed6..9e59b23b1 100644
--- a/src/components/Avatar/__snapshots__/Avatar.stories.storyshot
+++ b/src/components/Avatar/__snapshots__/Avatar.stories.storyshot
@@ -622,7 +622,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-8"
             >
-              
               JN
             </div>
           </div>
@@ -643,7 +642,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-8"
             >
-              
               +
               2
             </div>
@@ -678,7 +676,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-17"
             >
-              
               <span
                 className="emotion-18"
                 onClick={[Function]}
@@ -706,7 +703,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-17"
             >
-              
               +
               3
             </div>
@@ -774,7 +770,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-34"
             >
-              
               +
               2
             </div>
@@ -820,7 +815,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-41"
             >
-              
               JN
             </div>
           </div>
@@ -841,7 +835,6 @@ exports[`Storyshots Design System/Avatar Avatar Stack 1`] = `
             <div
               className="emotion-41"
             >
-              
               +
               2
             </div>
@@ -1153,7 +1146,6 @@ exports[`Storyshots Design System/Avatar Avatar with icon 1`] = `
         <div
           className="emotion-2"
         >
-          
           <span
             className="emotion-3"
             onClick={[Function]}
@@ -1174,7 +1166,6 @@ exports[`Storyshots Design System/Avatar Avatar with icon 1`] = `
         <div
           className="emotion-5"
         >
-          
           <span
             className="emotion-3"
             onClick={[Function]}
@@ -1195,7 +1186,6 @@ exports[`Storyshots Design System/Avatar Avatar with icon 1`] = `
         <div
           className="emotion-8"
         >
-          
           <span
             className="emotion-3"
             onClick={[Function]}
@@ -1216,7 +1206,6 @@ exports[`Storyshots Design System/Avatar Avatar with icon 1`] = `
         <div
           className="emotion-11"
         >
-          
           <span
             className="emotion-3"
             onClick={[Function]}
@@ -1476,7 +1465,6 @@ exports[`Storyshots Design System/Avatar Avatar with letter 1`] = `
         <div
           className="emotion-2"
         >
-          
           JN
         </div>
       </div>
@@ -1490,7 +1478,6 @@ exports[`Storyshots Design System/Avatar Avatar with letter 1`] = `
         <div
           className="emotion-3"
         >
-          
           JN
         </div>
       </div>
@@ -1504,7 +1491,6 @@ exports[`Storyshots Design System/Avatar Avatar with letter 1`] = `
         <div
           className="emotion-4"
         >
-          
           JN
         </div>
       </div>
@@ -1518,7 +1504,6 @@ exports[`Storyshots Design System/Avatar Avatar with letter 1`] = `
         <div
           className="emotion-5"
         >
-          
           JN
         </div>
       </div>
diff --git a/src/components/Button/__snapshots__/Button.stories.storyshot b/src/components/Button/__snapshots__/Button.stories.storyshot
index 767cb47b4..009af8cef 100644
--- a/src/components/Button/__snapshots__/Button.stories.storyshot
+++ b/src/components/Button/__snapshots__/Button.stories.storyshot
@@ -254,11 +254,9 @@ exports[`Storyshots Design System/Button Async Button 1`] = `
         >
           <div>
             Button inner text from event: 
-            
           </div>
           <div>
             Fake response: 
-            
           </div>
         </div>
       </div>
@@ -291,11 +289,9 @@ exports[`Storyshots Design System/Button Async Button 1`] = `
         >
           <div>
             Button inner text from event: 
-            
           </div>
           <div>
             Fake response: 
-            
           </div>
         </div>
       </div>
@@ -328,11 +324,9 @@ exports[`Storyshots Design System/Button Async Button 1`] = `
         >
           <div>
             Button inner text from event: 
-            
           </div>
           <div>
             Fake response: 
-            
           </div>
         </div>
       </div>
diff --git a/src/components/Chart/BarChart/BarChart.tsx b/src/components/Chart/BarChart/BarChart.tsx
index 5e0751e32..9cc7970cb 100644
--- a/src/components/Chart/BarChart/BarChart.tsx
+++ b/src/components/Chart/BarChart/BarChart.tsx
@@ -107,8 +107,6 @@ const BarChart: React.FC<Props> = ({ data }) => {
 
   const tickColoringOptions = setColoringOptions((obj: Data) => obj.name);
 
-  console.log({ labelColoringOptions, tickColoringOptions });
-
   return (
     <WrappedChart
       data={data}
diff --git a/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot b/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
index e080c6749..235b46118 100644
--- a/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
+++ b/src/components/CheckBox/__snapshots__/CheckBox.stories.storyshot
@@ -2034,7 +2034,6 @@ exports[`Storyshots Design System/CheckBox CheckBox with Props 1`] = `
               </span>
             </label>
           </span>
-          
         </span>
       </div>
     </div>
diff --git a/src/components/Chip/__snapshots__/Chip.stories.storyshot b/src/components/Chip/__snapshots__/Chip.stories.storyshot
index 5038bb7b4..e4e4a4d86 100644
--- a/src/components/Chip/__snapshots__/Chip.stories.storyshot
+++ b/src/components/Chip/__snapshots__/Chip.stories.storyshot
@@ -492,7 +492,6 @@ exports[`Storyshots Design System/Chip Read-Only Chips 1`] = `
             <div
               className="emotion-4"
             >
-              
               KN
             </div>
           </div>
diff --git a/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot b/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot
index 35f3f47f3..b55d66473 100644
--- a/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot
+++ b/src/components/DatePicker/__snapshots__/DatePicker.stories.storyshot
@@ -4984,7 +4984,6 @@ exports[`Storyshots Design System/DatePicker DatePicker with Filter 1`] = `
                           >
                             Select Dates
                              
-                            
                           </div>
                         </span>
                       </div>
@@ -5042,7 +5041,6 @@ exports[`Storyshots Design System/DatePicker DatePicker with Filter 1`] = `
                         <span
                           className="emotion-19"
                         >
-                          
                           <span
                             className="emotion-20"
                             data-testid="filter-selected-item-label"
diff --git a/src/components/Menu/__snapshots__/Menu.stories.storyshot b/src/components/Menu/__snapshots__/Menu.stories.storyshot
index 26f0ed875..aafcb3358 100644
--- a/src/components/Menu/__snapshots__/Menu.stories.storyshot
+++ b/src/components/Menu/__snapshots__/Menu.stories.storyshot
@@ -228,7 +228,6 @@ exports[`Storyshots Design System/Menu Disabled Menu 1`] = `
                   <div
                     className="emotion-6"
                   >
-                    
                     TC
                   </div>
                 </span>
@@ -588,7 +587,6 @@ exports[`Storyshots Design System/Menu Menu with avatar and different button col
                   <div
                     className="emotion-6"
                   >
-                    
                     TC
                   </div>
                 </span>
@@ -703,7 +701,6 @@ exports[`Storyshots Design System/Menu Menu with avatar and different button col
                   <div
                     className="emotion-6"
                   >
-                    
                     <span
                       className="emotion-9"
                       onClick={[Function]}
@@ -712,7 +709,6 @@ exports[`Storyshots Design System/Menu Menu with avatar and different button col
                         className="emotion-26"
                       />
                     </span>
-                    
                   </div>
                 </span>
                 <span
@@ -768,7 +764,6 @@ exports[`Storyshots Design System/Menu Menu with avatar and different button col
                   <div
                     className="emotion-35"
                   >
-                    
                     <span
                       className="emotion-9"
                       onClick={[Function]}
@@ -777,7 +772,6 @@ exports[`Storyshots Design System/Menu Menu with avatar and different button col
                         className="emotion-26"
                       />
                     </span>
-                    
                   </div>
                 </span>
                 <span
@@ -1139,7 +1133,6 @@ exports[`Storyshots Design System/Menu Menu with option icon and different colou
                   <div
                     className="emotion-6"
                   >
-                    
                     <span
                       className="emotion-7"
                       onClick={[Function]}
@@ -1148,7 +1141,6 @@ exports[`Storyshots Design System/Menu Menu with option icon and different colou
                         className="emotion-8"
                       />
                     </span>
-                    
                   </div>
                 </span>
                 <span
@@ -1204,7 +1196,6 @@ exports[`Storyshots Design System/Menu Menu with option icon and different colou
                   <div
                     className="emotion-6"
                   >
-                    
                     <span
                       className="emotion-7"
                       onClick={[Function]}
@@ -1213,7 +1204,6 @@ exports[`Storyshots Design System/Menu Menu with option icon and different colou
                         className="emotion-8"
                       />
                     </span>
-                    
                   </div>
                 </span>
                 <span
@@ -1269,7 +1259,6 @@ exports[`Storyshots Design System/Menu Menu with option icon and different colou
                   <div
                     className="emotion-6"
                   >
-                    
                     <span
                       className="emotion-7"
                       onClick={[Function]}
@@ -1278,7 +1267,6 @@ exports[`Storyshots Design System/Menu Menu with option icon and different colou
                         className="emotion-8"
                       />
                     </span>
-                    
                   </div>
                 </span>
                 <span
diff --git a/src/components/Toast/__snapshots__/Toast.stories.storyshot b/src/components/Toast/__snapshots__/Toast.stories.storyshot
index b4662fb1e..493312f04 100644
--- a/src/components/Toast/__snapshots__/Toast.stories.storyshot
+++ b/src/components/Toast/__snapshots__/Toast.stories.storyshot
@@ -431,9 +431,7 @@ exports[`Storyshots Design System/Toast Generic Toast 1`] = `
             "paddingTop": "8px",
           }
         }
-      >
-        
-      </p>
+      />
     </div>
   </div>
 </div>
diff --git a/src/components/storyUtils/PaletteShowcase/__snapshots__/PaletteShowcase.test.tsx.snap b/src/components/storyUtils/PaletteShowcase/__snapshots__/PaletteShowcase.test.tsx.snap
index fb6d9fc58..670cb93c3 100644
--- a/src/components/storyUtils/PaletteShowcase/__snapshots__/PaletteShowcase.test.tsx.snap
+++ b/src/components/storyUtils/PaletteShowcase/__snapshots__/PaletteShowcase.test.tsx.snap
@@ -12795,22 +12795,6 @@ exports[`PaletteShowcase should render correctly 1`] = `
   text-transform: uppercase;
 }
 
-.emotion-693 {
-  width: calc(100% - 20px);
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin: 10px;
-}
-
 .emotion-694 {
   height: 100px;
   background: white;
@@ -12836,21 +12820,6 @@ exports[`PaletteShowcase should render correctly 1`] = `
   font-size: 14px;
 }
 
-.emotion-697 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-}
-
 .emotion-698 {
   height: 50px;
   width: calc(100% - 20px);
@@ -13613,6 +13582,10 @@ exports[`PaletteShowcase should render correctly 1`] = `
   text-transform: uppercase;
 }
 
+.emotion-740 {
+  text-transform: capitalize;
+}
+
 .emotion-757 {
   height: 50px;
   width: calc(100% - 20px);
@@ -26757,22 +26730,6 @@ exports[`PaletteShowcase should render correctly 1`] = `
   text-transform: uppercase;
 }
 
-.emotion-693 {
-  width: calc(100% - 20px);
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  margin: 10px;
-}
-
 .emotion-694 {
   height: 100px;
   background: white;
@@ -26798,21 +26755,6 @@ exports[`PaletteShowcase should render correctly 1`] = `
   font-size: 14px;
 }
 
-.emotion-697 {
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  width: 100%;
-}
-
 .emotion-698 {
   height: 50px;
   width: calc(100% - 20px);
@@ -27575,6 +27517,10 @@ exports[`PaletteShowcase should render correctly 1`] = `
   text-transform: uppercase;
 }
 
+.emotion-740 {
+  text-transform: capitalize;
+}
+
 .emotion-757 {
   height: 50px;
   width: calc(100% - 20px);
@@ -32009,7 +31955,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
       Another palette is the pale where is not having shades.
     </p>
     <div
-      class="emotion-693"
+      class="emotion-5"
     >
       <div
         class="emotion-694"
@@ -32024,7 +31970,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
         />
       </div>
       <div
-        class="emotion-697"
+        class="emotion-9"
       >
         <div
           class="emotion-698"
@@ -32285,7 +32231,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               50
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #fff
             </div>
@@ -32297,7 +32243,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               100
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #fff
             </div>
@@ -32309,7 +32255,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               150
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #fff
             </div>
@@ -32321,7 +32267,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               200
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #fff
             </div>
@@ -32333,7 +32279,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               250
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #fff
             </div>
@@ -32345,7 +32291,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               300
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #fff
             </div>
@@ -32357,7 +32303,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               350
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #fff
             </div>
@@ -32369,7 +32315,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               400
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #fff
             </div>
@@ -32381,7 +32327,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               450
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #fff
             </div>
@@ -32393,7 +32339,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               500
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               white
             </div>
@@ -32405,7 +32351,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               550
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #e5e5e5
             </div>
@@ -32417,7 +32363,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               600
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #ccc
             </div>
@@ -32429,7 +32375,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               650
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #b2b2b2
             </div>
@@ -32441,7 +32387,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               700
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #999
             </div>
@@ -32453,7 +32399,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               750
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #7f7f7f
             </div>
@@ -32465,7 +32411,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               800
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #666
             </div>
@@ -32477,7 +32423,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               850
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #4c4c4c
             </div>
@@ -32489,7 +32435,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               900
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #323232
             </div>
@@ -32501,7 +32447,7 @@ exports[`PaletteShowcase should render correctly 1`] = `
               950
             </div>
             <div
-              class="emotion-11"
+              class="emotion-740"
             >
               #191919
             </div>
diff --git a/src/components/storyUtils/PresentComponent/PresentComponent.tsx b/src/components/storyUtils/PresentComponent/PresentComponent.tsx
index f3efde7b0..e7bfb79dc 100644
--- a/src/components/storyUtils/PresentComponent/PresentComponent.tsx
+++ b/src/components/storyUtils/PresentComponent/PresentComponent.tsx
@@ -1,11 +1,13 @@
 import * as React from 'react';
 
+import { ReactFCC } from '../../../utils/types';
+
 type Props = {
   name: string;
   width?: string;
 };
 
-const PresentComponent: React.FC<Props> = ({ name, width = 'auto', children }) => {
+const PresentComponent: ReactFCC<Props> = ({ name, width = 'auto', children }) => {
   return (
     <div
       style={{
diff --git a/src/components/storyUtils/Stack/Stack.tsx b/src/components/storyUtils/Stack/Stack.tsx
index bbda848e0..edc8b29bc 100644
--- a/src/components/storyUtils/Stack/Stack.tsx
+++ b/src/components/storyUtils/Stack/Stack.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
-import { ReactFCC } from 'utils/types';
+
+import { ReactFCC } from '../../../utils/types';
 
 type Props = {
   vertical?: boolean;