fix empty content

packages/compass-components/src/components/empty-content.stories.mdx

@@ -19,19 +19,20 @@ import { ServerIcon } from './icons/server-icon';
         'NoSavedItemsIcon',
       ],
       mapping: {
-        DocumentIcon: () => <DocumentIcon />,
-        ServerIcon: () => <ServerIcon />,
-        FavoriteIcon: () => <FavoriteIcon isFavorite={false} />,
-        NoSavedItemsIcon: () => <NoSavedItemsIcon />,
+        DocumentIcon: DocumentIcon,
+        ServerIcon: ServerIcon,
+        FavoriteIcon: FavoriteIcon,
+        NoSavedItemsIcon: NoSavedItemsIcon,
       },
-      description: 'Icon to display in the empty state',
+      description:
+        'Icon component to display in the empty state (pass the component, not an element)',
     },
   }}
 />
 
 # EmptyContent
 
-The EmptyContent component is used to display an empty state with an optional icon, title, subtitle, and call to action.
+The EmptyContent component is used to display an empty state with an optional icon, title, subtitle, and call to action. The `icon` prop expects a React component (e.g. `DocumentIcon`), not a JSX element (e.g. `<DocumentIcon />`).
 
 ## Usage
 
@@ -44,13 +45,13 @@ The EmptyContent component is used to display an empty state with an optional ic
 <EmptyContent
   title="No Documents"
   subTitle="There are no documents in this collection."
-  icon={<DocumentIcon />}
+  icon={DocumentIcon}
 />
 
 <EmptyContent
   title="No Saved Queries"
   subTitle="You haven't saved any queries yet."
-  icon={<FavoriteIcon isFavorite={false} />}
+  icon={FavoriteIcon}
   callToAction="Click here to create your first query"
 />
 ```
@@ -77,7 +78,7 @@ Default empty state with title and subtitle.
     <EmptyContent
       title="No Documents"
       subTitle="There are no documents in this collection."
-      icon={<DocumentIcon />}
+      icon={DocumentIcon}
     />
   )}
 </Story>
@@ -91,7 +92,7 @@ Empty state with a document icon.
     <EmptyContent
       title="No Saved Queries"
       subTitle="You haven't saved any queries yet."
-      icon={<FavoriteIcon isFavorite={false} />}
+      icon={FavoriteIcon}
       callToAction="Click here to create your first query"
     />
   )}