diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 12cd22a41a..7b5a580f03 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -22,8 +22,13 @@ import { forwardRef } from '../../utils/forwardRef';
 import hasTouchHandler from '../../utils/hasTouchHandler';
 import { splitStyles } from '../../utils/splitStyles';
 import Surface from '../Surface';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
+
+type CardComposition = {
+  Content: typeof CardContent;
+  Actions: typeof CardActions;
+  Cover: typeof CardCover;
+  Title: typeof CardTitle;
+};
 
 type OutlinedCardProps = {
   mode: 'outlined';
@@ -131,7 +136,8 @@ export type Props = $Omit<React.ComponentProps<typeof Surface>, 'mode'> & {
  * export default MyComponent;
  * ```
  */
-const CardComponent = (
+
+const Card = (
   {
     elevation: cardElevation = 1,
     delayLongPress,
@@ -330,24 +336,19 @@ const CardComponent = (
   );
 };
 
-const Component = forwardRef(CardComponent);
-Component.displayName = 'Card';
+Card.displayName = 'Card';
+const Component = forwardRef(Card);
 
-const Card = Component as typeof Component & {
-  Content: typeof CardContent;
-  Actions: typeof CardActions;
-  Cover: typeof CardCover;
-  Title: typeof CardTitle;
-};
+const CardComponent = Component as typeof Component & CardComposition;
 
 // @component ./CardContent.tsx
-Card.Content = CardContent;
+CardComponent.Content = CardContent;
 // @component ./CardActions.tsx
-Card.Actions = CardActions;
+CardComponent.Actions = CardActions;
 // @component ./CardCover.tsx
-Card.Cover = CardCover;
+CardComponent.Cover = CardCover;
 // @component ./CardTitle.tsx
-Card.Title = CardTitle;
+CardComponent.Title = CardTitle;
 
 const styles = StyleSheet.create({
   innerContainer: {
@@ -365,4 +366,4 @@ const styles = StyleSheet.create({
   },
 });
 
-export default Card;
+export default CardComponent;
diff --git a/src/components/List/ListItem.tsx b/src/components/List/ListItem.tsx
index 154a053a38..4fbfcc0cb2 100644
--- a/src/components/List/ListItem.tsx
+++ b/src/components/List/ListItem.tsx
@@ -270,8 +270,8 @@ const ListItem = (
   );
 };
 
+ListItem.displayName = 'List.Item';
 const Component = forwardRef(ListItem);
-Component.displayName = 'List.Item';
 
 const styles = StyleSheet.create({
   container: {