CSF: Story ComponentAnnotations['subcomponents'] to correctly use its own type for subcomponents rather than attempt to inherit from the component

code/core/src/csf/story.test.ts

@@ -35,6 +35,8 @@ type ButtonArgs = {
 
 const Button = (props: ButtonArgs) => 'Button';
 
+const ButtonIcon = ({ icon }: { icon: string }) => `ButtonIcon ${icon}`;
+
 let a = 1;
 async function doSomething() {
   a = 2;
@@ -119,6 +121,22 @@ CSF1Story.story = {
   args: { a: 1 },
 };
 
+const simpleWithSubComponents: XMeta = {
+  title: 'simple',
+  component: Button,
+  tags: ['foo', 'bar'],
+  decorators: [(storyFn, context) => `withDecorator(${storyFn(context)})`],
+  parameters: { a: () => null, b: NaN, c: Symbol('symbol') },
+  loaders: [() => Promise.resolve({ d: '3' })],
+  async beforeEach() {
+    await doSomething();
+    return cleanup;
+  },
+  args: { x: '1' },
+  argTypes: { x: { type: { name: 'string' } } },
+  subcomponents: { ButtonIcon }, // the fact that this line does not cause a Typescript compilation error itself means that the type is correct
+};
+
 const CSF2Story: XStory = () => 'Named Story';
 CSF2Story.storyName = 'Another name for story';
 CSF2Story.tags = ['foo', 'bar'];

code/core/src/csf/story.ts

@@ -503,7 +503,7 @@ export interface ComponentAnnotations<TRenderer extends Renderer = Renderer, TAr
    *
    * By defining them each component will have its tab in the args table.
    */
-  subcomponents?: Record<string, TRenderer['component']>;
+  subcomponents?: Record<string, (TRenderer & { T: any })['component']>;
 
   /** Function that is executed after the story is rendered. */
   play?: PlayFunction<TRenderer, TArgs>;