From 9225ca13db7b472198f0280b5e075bf5b281a47c Mon Sep 17 00:00:00 2001
From: Robert Niznik <rniznik@launchdarkly.com>
Date: Mon, 9 Dec 2024 14:43:31 -0500
Subject: [PATCH] fix(components): replace `Section` with `ListBoxSection` and
 `MenuSection` (#1498)

* fix(components): replace `Section` with `ListBoxSection` and `MenuSection`

* fix: ts
---
 .changeset/giant-shirts-hear.md               |  5 +++
 package.json                                  |  2 +-
 packages/components/__tests__/Menu.spec.tsx   | 15 ++++++--
 packages/components/src/Section.tsx           | 34 ++++++++++++++-----
 packages/components/src/index.ts              |  4 +--
 .../stories/Breadcrumbs.stories.tsx           |  4 +--
 .../components/stories/Calendar.stories.tsx   |  7 ++--
 .../components/stories/ComboBox.stories.tsx   |  4 +--
 .../components/stories/DateField.stories.tsx  |  4 +--
 .../components/stories/Disclosure.stories.tsx |  4 +--
 .../components/stories/GridList.stories.tsx   |  4 +--
 .../components/stories/ListBox.stories.tsx    | 14 ++++----
 packages/components/stories/Menu.stories.tsx  | 22 ++++++++----
 packages/components/stories/Modal.stories.tsx | 10 ++++--
 .../components/stories/Popover.stories.tsx    |  4 +--
 .../components/stories/RadioGroup.stories.tsx |  4 +--
 .../stories/RangeCalendar.stories.tsx         |  4 +--
 .../components/stories/Select.stories.tsx     |  4 +--
 packages/components/stories/Table.stories.tsx |  7 ++--
 packages/components/stories/Tabs.stories.tsx  |  4 +--
 .../components/stories/TagGroup.stories.tsx   |  4 +--
 .../components/stories/TextField.stories.tsx  |  7 ++--
 .../components/stories/TimeField.stories.tsx  |  4 +--
 packages/components/stories/Toast.stories.tsx |  4 +--
 .../stories/ToggleButtonGroup.stories.tsx     |  4 +--
 .../components/stories/Tooltip.stories.tsx    |  4 +--
 26 files changed, 120 insertions(+), 67 deletions(-)
 create mode 100644 .changeset/giant-shirts-hear.md

diff --git a/.changeset/giant-shirts-hear.md b/.changeset/giant-shirts-hear.md
new file mode 100644
index 000000000..b02208b49
--- /dev/null
+++ b/.changeset/giant-shirts-hear.md
@@ -0,0 +1,5 @@
+---
+"@launchpad-ui/components": patch
+---
+
+Replace `Section` with `ListBoxSection` and `MenuSection`
diff --git a/package.json b/package.json
index 895239a98..0858216e6 100644
--- a/package.json
+++ b/package.json
@@ -12,7 +12,7 @@
 		"clean": "nx run-many --target=clean --all",
 		"e2e:a11y": "STORYBOOK_URL=http://127.0.0.1:8080/ pnpm playwright test",
 		"generate": "plop",
-		"graph": "nx affected:graph",
+		"graph": "nx graph --affected",
 		"storybook": "pnpm build:transform && sb dev -p 3000",
 		"storybook:build": "pnpm build:transform && sb build --quiet",
 		"test": "pnpm build:transform && vitest run --coverage",
diff --git a/packages/components/__tests__/Menu.spec.tsx b/packages/components/__tests__/Menu.spec.tsx
index 88d80d977..b0f203174 100644
--- a/packages/components/__tests__/Menu.spec.tsx
+++ b/packages/components/__tests__/Menu.spec.tsx
@@ -1,7 +1,16 @@
 import { describe, expect, it } from 'vitest';
 
 import { render, screen, userEvent } from '../../../test/utils';
-import { Button, Header, Menu, MenuItem, MenuTrigger, Popover, Section, Separator } from '../src';
+import {
+	Button,
+	Header,
+	Menu,
+	MenuItem,
+	MenuSection,
+	MenuTrigger,
+	Popover,
+	Separator,
+} from '../src';
 
 describe('Menu', () => {
 	it('renders', async () => {
@@ -13,11 +22,11 @@ describe('Menu', () => {
 					<Menu>
 						<MenuItem>Item one</MenuItem>
 						<Separator />
-						<Section>
+						<MenuSection>
 							<Header>Section</Header>
 							<MenuItem>Item two</MenuItem>
 							<MenuItem>Item three</MenuItem>
-						</Section>
+						</MenuSection>
 					</Menu>
 				</Popover>
 			</MenuTrigger>,
diff --git a/packages/components/src/Section.tsx b/packages/components/src/Section.tsx
index fc6b96d94..70dc2ac7c 100644
--- a/packages/components/src/Section.tsx
+++ b/packages/components/src/Section.tsx
@@ -1,23 +1,41 @@
 import type { forwardRefType } from '@react-types/shared';
 import type { ForwardedRef } from 'react';
-import type { SectionProps } from 'react-aria-components';
+import type { ListBoxSectionProps, MenuSectionProps } from 'react-aria-components';
 
 import { cva } from 'class-variance-authority';
 import { forwardRef } from 'react';
-import { Section as AriaSection } from 'react-aria-components';
+import {
+	ListBoxSection as AriaListBoxSection,
+	MenuSection as AriaMenuSection,
+} from 'react-aria-components';
 
 import styles from './styles/Section.module.css';
 
 const section = cva(styles.section);
 
-const _Section = <T extends object>(
-	{ className, ...props }: SectionProps<T>,
+const _ListBoxSection = <T extends object>(
+	{ className, ...props }: ListBoxSectionProps<T>,
 	ref: ForwardedRef<HTMLElement>,
 ) => {
-	return <AriaSection {...props} ref={ref} className={section({ className })} />;
+	return <AriaListBoxSection {...props} ref={ref} className={section({ className })} />;
 };
 
-const Section = (forwardRef as forwardRefType)(_Section);
+/**
+ * A ListBoxSection represents a section within a ListBox.
+ */
+const ListBoxSection = (forwardRef as forwardRefType)(_ListBoxSection);
 
-export { Section };
-export type { SectionProps };
+const _MenuSection = <T extends object>(
+	{ className, ...props }: MenuSectionProps<T>,
+	ref: ForwardedRef<HTMLElement>,
+) => {
+	return <AriaMenuSection {...props} ref={ref} className={section({ className })} />;
+};
+
+/**
+ * A MenuSection represents a section within a Menu.
+ */
+const MenuSection = (forwardRef as forwardRefType)(_MenuSection);
+
+export { ListBoxSection, MenuSection };
+export type { ListBoxSectionProps, MenuSectionProps };
diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts
index 448cc3d79..5bccf57fc 100644
--- a/packages/components/src/index.ts
+++ b/packages/components/src/index.ts
@@ -51,7 +51,7 @@ export type { RadioButtonProps } from './RadioButton';
 export type { RadioGroupProps } from './RadioGroup';
 export type { RadioIconButtonProps } from './RadioIconButton';
 export type { SearchFieldProps } from './SearchField';
-export type { SectionProps } from './Section';
+export type { ListBoxSectionProps, MenuSectionProps } from './Section';
 export type { SelectProps, SelectValueProps } from './Select';
 export type { SeparatorProps } from './Separator';
 export type { SwitchProps } from './Switch';
@@ -133,7 +133,7 @@ export { RadioGroup } from './RadioGroup';
 export { RadioIconButton } from './RadioIconButton';
 export { RouterProvider } from './RouterProvider';
 export { SearchField } from './SearchField';
-export { Section } from './Section';
+export { ListBoxSection, MenuSection } from './Section';
 export { Select, SelectValue } from './Select';
 export { Separator } from './Separator';
 export { Switch } from './Switch';
diff --git a/packages/components/stories/Breadcrumbs.stories.tsx b/packages/components/stories/Breadcrumbs.stories.tsx
index d96d842d5..faf6f0bbb 100644
--- a/packages/components/stories/Breadcrumbs.stories.tsx
+++ b/packages/components/stories/Breadcrumbs.stories.tsx
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { Breadcrumb, Breadcrumbs, Link } from '../src';
 
 const meta: Meta<typeof Breadcrumbs> = {
 	component: Breadcrumbs,
-	// @ts-ignore
-	subcomponents: { Breadcrumb },
+	subcomponents: { Breadcrumb } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Navigation/Breadcrumbs',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/Calendar.stories.tsx b/packages/components/stories/Calendar.stories.tsx
index 3dec445ec..bba9389f5 100644
--- a/packages/components/stories/Calendar.stories.tsx
+++ b/packages/components/stories/Calendar.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import {
 	getLocalTimeZone,
@@ -25,8 +26,10 @@ import {
 
 const meta: Meta<typeof Calendar> = {
 	component: Calendar,
-	// @ts-ignore
-	subcomponents: { CalendarCell, CalendarGrid, CalendarPicker, Heading, Preset },
+	subcomponents: { CalendarCell, CalendarGrid, CalendarPicker, Heading, Preset } as Record<
+		string,
+		ComponentType<unknown>
+	>,
 	title: 'Components/Date and Time/Calendar',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/ComboBox.stories.tsx b/packages/components/stories/ComboBox.stories.tsx
index f6e3fb472..ccae29459 100644
--- a/packages/components/stories/ComboBox.stories.tsx
+++ b/packages/components/stories/ComboBox.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { Icon } from '@launchpad-ui/icons';
 import { vars } from '@launchpad-ui/vars';
@@ -19,8 +20,7 @@ import {
 
 const meta: Meta<typeof ComboBox> = {
 	component: ComboBox,
-	// @ts-ignore
-	subcomponents: { ComboBoxClearButton },
+	subcomponents: { ComboBoxClearButton } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Pickers/ComboBox',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/DateField.stories.tsx b/packages/components/stories/DateField.stories.tsx
index d66ceb922..29fa1cb67 100644
--- a/packages/components/stories/DateField.stories.tsx
+++ b/packages/components/stories/DateField.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { vars } from '@launchpad-ui/vars';
 import { userEvent } from '@storybook/test';
@@ -7,8 +8,7 @@ import { DateField, DateInput, DateSegment, Label, Text } from '../src';
 
 const meta: Meta<typeof DateField> = {
 	component: DateField,
-	// @ts-ignore
-	subcomponents: { DateInput, DateSegment },
+	subcomponents: { DateInput, DateSegment } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Date and Time/DateField',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/Disclosure.stories.tsx b/packages/components/stories/Disclosure.stories.tsx
index af135ccbf..c5d0bb5b4 100644
--- a/packages/components/stories/Disclosure.stories.tsx
+++ b/packages/components/stories/Disclosure.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { Icon } from '@launchpad-ui/icons';
 import { vars } from '@launchpad-ui/vars';
@@ -7,8 +8,7 @@ import { Button, Disclosure, DisclosurePanel, Heading } from '../src';
 
 const meta: Meta<typeof Disclosure> = {
 	component: Disclosure,
-	// @ts-ignore
-	subcomponents: { DisclosurePanel },
+	subcomponents: { DisclosurePanel } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Navigation/Disclosure',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/GridList.stories.tsx b/packages/components/stories/GridList.stories.tsx
index ac400cc6a..fb7381f84 100644
--- a/packages/components/stories/GridList.stories.tsx
+++ b/packages/components/stories/GridList.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { useDragAndDrop } from 'react-aria-components';
 import { useListData } from 'react-stately';
@@ -17,8 +18,7 @@ import {
 
 const meta: Meta<typeof GridList> = {
 	component: GridList,
-	// @ts-ignore
-	subcomponents: { GridListItem },
+	subcomponents: { GridListItem } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Collections/GridList',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/ListBox.stories.tsx b/packages/components/stories/ListBox.stories.tsx
index 223620a65..8f19df41e 100644
--- a/packages/components/stories/ListBox.stories.tsx
+++ b/packages/components/stories/ListBox.stories.tsx
@@ -1,16 +1,16 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 import type { Selection as AriaSelection } from 'react-aria-components';
 
 import { Icon } from '@launchpad-ui/icons';
 import { fireEvent, userEvent, within } from '@storybook/test';
 import { useState } from 'react';
 
-import { Header, ListBox, ListBoxItem, Section, Text } from '../src';
+import { Header, ListBox, ListBoxItem, ListBoxSection, Text } from '../src';
 
 const meta: Meta<typeof ListBox> = {
 	component: ListBox,
-	// @ts-ignore
-	subcomponents: { ListBoxItem, Section, Header },
+	subcomponents: { ListBoxItem, ListBoxSection, Header } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Collections/ListBox',
 	parameters: {
 		status: {
@@ -39,18 +39,18 @@ export const Grouping: Story = {
 	render: (args) => {
 		return (
 			<ListBox aria-label="Items" selectionMode="multiple" {...args}>
-				<Section>
+				<ListBoxSection>
 					<Header>Group 1</Header>
 					<ListBoxItem>Item one</ListBoxItem>
 					<ListBoxItem>Item two</ListBoxItem>
 					<ListBoxItem>Item three</ListBoxItem>
-				</Section>
-				<Section>
+				</ListBoxSection>
+				<ListBoxSection>
 					<Header>Group 2</Header>
 					<ListBoxItem>Item four</ListBoxItem>
 					<ListBoxItem>Item five</ListBoxItem>
 					<ListBoxItem>Item six</ListBoxItem>
-				</Section>
+				</ListBoxSection>
 			</ListBox>
 		);
 	},
diff --git a/packages/components/stories/Menu.stories.tsx b/packages/components/stories/Menu.stories.tsx
index e3229c674..3a323be40 100644
--- a/packages/components/stories/Menu.stories.tsx
+++ b/packages/components/stories/Menu.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 import type { Selection as AriaSelection } from 'react-aria-components';
 
 import { Icon } from '@launchpad-ui/icons';
@@ -11,9 +12,9 @@ import {
 	Keyboard,
 	Menu,
 	MenuItem,
+	MenuSection,
 	MenuTrigger,
 	Popover,
-	Section,
 	Separator,
 	SubmenuTrigger,
 	Text,
@@ -21,8 +22,15 @@ import {
 
 const meta: Meta<typeof Menu> = {
 	component: Menu,
-	// @ts-ignore
-	subcomponents: { MenuItem, MenuTrigger, SubmenuTrigger, Section, Header, Keyboard, Separator },
+	subcomponents: {
+		MenuItem,
+		MenuTrigger,
+		SubmenuTrigger,
+		MenuSection,
+		Header,
+		Keyboard,
+		Separator,
+	} as Record<string, ComponentType<unknown>>,
 	title: 'Components/Collections/Menu',
 	parameters: {
 		status: {
@@ -83,15 +91,15 @@ export const Grouping: Story = {
 				<Button>Trigger</Button>
 				<Popover>
 					<Menu {...args}>
-						<Section>
+						<MenuSection>
 							<Header>Group 1</Header>
 							<MenuItem>Item one</MenuItem>
 							<MenuItem>Item two</MenuItem>
-						</Section>
-						<Section>
+						</MenuSection>
+						<MenuSection>
 							<Header>Group 2</Header>
 							<MenuItem>Item three</MenuItem>
-						</Section>
+						</MenuSection>
 					</Menu>
 				</Popover>
 			</MenuTrigger>
diff --git a/packages/components/stories/Modal.stories.tsx b/packages/components/stories/Modal.stories.tsx
index 8ac15e8d2..59a022b1a 100644
--- a/packages/components/stories/Modal.stories.tsx
+++ b/packages/components/stories/Modal.stories.tsx
@@ -1,6 +1,8 @@
 import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
-import { expect, userEvent, within } from '@storybook/test';
 import type { PlayFunction } from '@storybook/types';
+import type { ComponentType } from 'react';
+
+import { expect, userEvent, within } from '@storybook/test';
 
 import { allModes } from '../../../.storybook/modes';
 import {
@@ -16,8 +18,10 @@ import {
 
 const meta: Meta<typeof Modal> = {
 	component: Modal,
-	// @ts-ignore
-	subcomponents: { ModalOverlay, Dialog, DialogTrigger, Heading },
+	subcomponents: { ModalOverlay, Dialog, DialogTrigger, Heading } as Record<
+		string,
+		ComponentType<unknown>
+	>,
 	title: 'Components/Overlays/Modal',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/Popover.stories.tsx b/packages/components/stories/Popover.stories.tsx
index 118ebfda7..d1b51cd1b 100644
--- a/packages/components/stories/Popover.stories.tsx
+++ b/packages/components/stories/Popover.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
 import type { PlayFunction } from '@storybook/types';
+import type { ComponentType } from 'react';
 
 import { expect, userEvent, within } from '@storybook/test';
 
@@ -7,8 +8,7 @@ import { Button, Dialog, DialogTrigger, Heading, OverlayArrow, Popover, Pressabl
 
 const meta: Meta<typeof Popover> = {
 	component: Popover,
-	// @ts-ignore
-	subcomponents: { OverlayArrow, DialogTrigger },
+	subcomponents: { OverlayArrow, DialogTrigger } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Overlays/Popover',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/RadioGroup.stories.tsx b/packages/components/stories/RadioGroup.stories.tsx
index 2800e9c9e..02f4f0254 100644
--- a/packages/components/stories/RadioGroup.stories.tsx
+++ b/packages/components/stories/RadioGroup.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { userEvent, within } from '@storybook/test';
 
@@ -6,8 +7,7 @@ import { Button, FieldError, Form, Label, Radio, RadioGroup, Text } from '../src
 
 const meta: Meta<typeof RadioGroup> = {
 	component: RadioGroup,
-	// @ts-ignore
-	subcomponents: { Radio },
+	subcomponents: { Radio } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Forms/RadioGroup',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/RangeCalendar.stories.tsx b/packages/components/stories/RangeCalendar.stories.tsx
index a188090a7..c0f6c29b0 100644
--- a/packages/components/stories/RangeCalendar.stories.tsx
+++ b/packages/components/stories/RangeCalendar.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import {
 	endOfMonth,
@@ -27,8 +28,7 @@ import {
 
 const meta: Meta<typeof RangeCalendar> = {
 	component: RangeCalendar,
-	// @ts-ignore
-	subcomponents: { CalendarCell, CalendarGrid, Heading },
+	subcomponents: { CalendarCell, CalendarGrid, Heading } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Date and Time/RangeCalendar',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/Select.stories.tsx b/packages/components/stories/Select.stories.tsx
index 60a91b003..8a87a158f 100644
--- a/packages/components/stories/Select.stories.tsx
+++ b/packages/components/stories/Select.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { Icon } from '@launchpad-ui/icons';
 import { vars } from '@launchpad-ui/vars';
@@ -8,8 +9,7 @@ import { Button, Label, ListBox, ListBoxItem, Popover, Select, SelectValue, Text
 
 const meta: Meta<typeof Select> = {
 	component: Select,
-	// @ts-ignore
-	subcomponents: { SelectValue },
+	subcomponents: { SelectValue } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Pickers/Select',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/Table.stories.tsx b/packages/components/stories/Table.stories.tsx
index 8cedc44f1..1e6b1d15d 100644
--- a/packages/components/stories/Table.stories.tsx
+++ b/packages/components/stories/Table.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 import type { SortDescriptor } from 'react-aria-components';
 
 import { useState } from 'react';
@@ -18,8 +19,10 @@ import {
 
 const meta: Meta<typeof Table> = {
 	component: Table,
-	// @ts-ignore
-	subcomponents: { Cell, Column, ResizableTableContainer, Row, TableBody, TableHeader },
+	subcomponents: { Cell, Column, ResizableTableContainer, Row, TableBody, TableHeader } as Record<
+		string,
+		ComponentType<unknown>
+	>,
 	title: 'Components/Collections/Table',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/Tabs.stories.tsx b/packages/components/stories/Tabs.stories.tsx
index 358de6234..a930c3d36 100644
--- a/packages/components/stories/Tabs.stories.tsx
+++ b/packages/components/stories/Tabs.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { Tab, TabList, TabPanel, Tabs } from '../src';
 
@@ -7,8 +8,7 @@ import { Route, Routes, useLocation } from 'react-router-dom';
 
 const meta: Meta<typeof Tabs> = {
 	component: Tabs,
-	// @ts-ignore
-	subcomponents: { Tab, TabList, TabPanel },
+	subcomponents: { Tab, TabList, TabPanel } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Navigation/Tabs',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/TagGroup.stories.tsx b/packages/components/stories/TagGroup.stories.tsx
index 7140801ba..54fcaa618 100644
--- a/packages/components/stories/TagGroup.stories.tsx
+++ b/packages/components/stories/TagGroup.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { userEvent } from '@storybook/test';
 import { useListData } from 'react-stately';
@@ -7,8 +8,7 @@ import { Label, Tag, TagGroup, TagList } from '../src';
 
 const meta: Meta<typeof TagGroup> = {
 	component: TagGroup,
-	// @ts-ignore
-	subcomponents: { TagList, Tag },
+	subcomponents: { TagList, Tag } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Collections/TagGroup',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/TextField.stories.tsx b/packages/components/stories/TextField.stories.tsx
index dd91599dd..a0f287200 100644
--- a/packages/components/stories/TextField.stories.tsx
+++ b/packages/components/stories/TextField.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { vars } from '@launchpad-ui/vars';
 import { userEvent, within } from '@storybook/test';
@@ -7,8 +8,10 @@ import { FieldError, Input, Label, Text, TextArea, TextField } from '../src';
 
 const meta: Meta<typeof TextField> = {
 	component: TextField,
-	// @ts-ignore
-	subcomponents: { Label, Text, Input, TextArea, FieldError },
+	subcomponents: { Label, Text, Input, TextArea, FieldError } as Record<
+		string,
+		ComponentType<unknown>
+	>,
 	title: 'Components/Forms/TextField',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/TimeField.stories.tsx b/packages/components/stories/TimeField.stories.tsx
index e35b86449..01cc7c3df 100644
--- a/packages/components/stories/TimeField.stories.tsx
+++ b/packages/components/stories/TimeField.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { vars } from '@launchpad-ui/vars';
 import { userEvent } from '@storybook/test';
@@ -7,8 +8,7 @@ import { DateInput, DateSegment, Label, Text, TimeField } from '../src';
 
 const meta: Meta<typeof TimeField> = {
 	component: TimeField,
-	// @ts-ignore
-	subcomponents: { DateInput, DateSegment },
+	subcomponents: { DateInput, DateSegment } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Date and Time/TimeField',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/Toast.stories.tsx b/packages/components/stories/Toast.stories.tsx
index 7cc612943..12d5404cb 100644
--- a/packages/components/stories/Toast.stories.tsx
+++ b/packages/components/stories/Toast.stories.tsx
@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { expect, userEvent, within } from '@storybook/test';
 
@@ -14,8 +15,7 @@ import {
 
 const meta: Meta<typeof ToastContainer> = {
 	component: ToastContainer,
-	// @ts-ignore
-	subcomponents: { SnackbarContainer },
+	subcomponents: { SnackbarContainer } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Status/Toast',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/ToggleButtonGroup.stories.tsx b/packages/components/stories/ToggleButtonGroup.stories.tsx
index d815e1f30..1a257245f 100644
--- a/packages/components/stories/ToggleButtonGroup.stories.tsx
+++ b/packages/components/stories/ToggleButtonGroup.stories.tsx
@@ -1,11 +1,11 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import type { ComponentType } from 'react';
 
 import { ToggleButton, ToggleButtonGroup, ToggleIconButton } from '../src';
 
 const meta: Meta<typeof ToggleButtonGroup> = {
 	component: ToggleButtonGroup,
-	// @ts-ignore
-	subcomponents: { ToggleButton },
+	subcomponents: { ToggleButton } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Buttons/ToggleButtonGroup',
 	parameters: {
 		status: {
diff --git a/packages/components/stories/Tooltip.stories.tsx b/packages/components/stories/Tooltip.stories.tsx
index 1db1c8273..472718e95 100644
--- a/packages/components/stories/Tooltip.stories.tsx
+++ b/packages/components/stories/Tooltip.stories.tsx
@@ -1,5 +1,6 @@
 import type { Meta, ReactRenderer, StoryObj } from '@storybook/react';
 import type { PlayFunction } from '@storybook/types';
+import type { ComponentType } from 'react';
 
 import { expect, userEvent, within } from '@storybook/test';
 
@@ -7,8 +8,7 @@ import { Button, Pressable, Tooltip, TooltipTrigger } from '../src';
 
 const meta: Meta<typeof Tooltip> = {
 	component: Tooltip,
-	// @ts-ignore
-	subcomponents: { TooltipTrigger, Pressable },
+	subcomponents: { TooltipTrigger, Pressable } as Record<string, ComponentType<unknown>>,
 	title: 'Components/Overlays/Tooltip',
 	parameters: {
 		status: {