From 1b1a5b4bc711933c04062aea87818ba3f956a5b0 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 10 Jun 2025 16:44:46 +1000
Subject: [PATCH 1/8] chore: make module boundaries explicit

---
 .../color/test/ColorArea.test.tsx             |   3 +-
 .../form/stories/Form.stories.tsx             | 325 ++++++++++--------
 packages/@react-spectrum/form/stories/data.js | 307 -----------------
 packages/@react-spectrum/form/stories/data.ts | 317 +++++++++++++++++
 .../color/scripts/generateIcons.cjs           |   6 +-
 .../express/scripts/generateIcons.cjs         |   4 +-
 .../illustrations/src/Error.tsx               |   4 +-
 .../illustrations/src/File.tsx                |   4 +-
 .../illustrations/src/Folder.tsx              |   4 +-
 .../illustrations/src/NoSearchResults.tsx     |   4 +-
 .../illustrations/src/NotFound.tsx            |   4 +-
 .../illustrations/src/Timeout.tsx             |   4 +-
 .../illustrations/src/Unauthorized.tsx        |   4 +-
 .../illustrations/src/Unavailable.tsx         |   4 +-
 .../illustrations/src/Upload.tsx              |   4 +-
 .../ui/scripts/generateIcons.cjs              |   8 +-
 .../workflow/scripts/generateIcons.cjs        |   4 +-
 .../docs/pages/react-aria/home/ExampleApp.tsx |   6 +-
 .../{renderOverride.js => renderOverride.tsx} |  32 +-
 .../src/{shadowDOM.js => shadowDOM.ts}        |   8 +-
 .../src/{testSSR.js => testSSR.tsx}           |   8 +-
 scripts/generateS2IconIndex.js                |   2 +-
 22 files changed, 560 insertions(+), 506 deletions(-)
 delete mode 100644 packages/@react-spectrum/form/stories/data.js
 create mode 100644 packages/@react-spectrum/form/stories/data.ts
 rename packages/dev/test-utils/src/{renderOverride.js => renderOverride.tsx} (53%)
 rename packages/dev/test-utils/src/{shadowDOM.js => shadowDOM.ts} (79%)
 rename packages/dev/test-utils/src/{testSSR.js => testSSR.tsx} (90%)

diff --git a/packages/@react-spectrum/color/test/ColorArea.test.tsx b/packages/@react-spectrum/color/test/ColorArea.test.tsx
index 913e6514322..a008ea13b7d 100644
--- a/packages/@react-spectrum/color/test/ColorArea.test.tsx
+++ b/packages/@react-spectrum/color/test/ColorArea.test.tsx
@@ -17,6 +17,7 @@ import {parseColor} from '@react-stately/color';
 import React from 'react';
 import * as stories from '../stories/ColorArea.stories';
 import userEvent from '@testing-library/user-event';
+import { ProviderProps } from '@react-spectrum/provider';
 
 let {XRedYGreen: DefaultColorArea, XBlueYGreen, XSaturationYBrightness, XSaturationYLightness} = composeStories(stories);
 
@@ -209,7 +210,7 @@ describe('ColorArea', () => {
               {...props}
               onChange={onChangeSpy}
               onChangeEnd={onChangeEndSpy} />
-          , undefined, {locale: 'ar-AE'});
+          , undefined, {locale: 'ar-AE'} as ProviderProps);
           let [xSlider, ySlider] = getAllByRole('slider', {hidden: true});
 
           expect(xSlider.getAttribute('aria-valuetext')).toBe([
diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index e154e5efad7..4a4b4cd2a7c 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -18,12 +18,13 @@ import {chain} from '@react-aria/utils';
 import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
 import {ColorField} from '@react-spectrum/color';
 import {ComboBox} from '@react-spectrum/combobox';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Content, Header} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
-import {countries, states} from './data';
+import {countries, Country, State, states} from './data';
 import {DateField, DatePicker, DateRangePicker, TimeField} from '@react-spectrum/datepicker';
 import {Flex} from '@react-spectrum/layout';
-import {Form} from '../';
+import {Form, SpectrumFormProps} from '../';
 import {FormTranslatedText} from './../chromatic/FormLanguages.stories';
 import {Heading} from '@react-spectrum/text';
 import {InlineAlert} from '@react-spectrum/inlinealert';
@@ -44,74 +45,92 @@ import {Well} from '@react-spectrum/well';
 
 export default {
   title: 'Form',
+  component: Form,
   providerSwitcher: {status: 'positive'}
-};
+} as ComponentMeta<typeof Form>;
 
-export const Default = () => render({});
-export const LabelPositionSide = () => render({labelPosition: 'side'});
+export type FormStory = ComponentStoryObj<typeof Form>;
 
-LabelPositionSide.story = {
-  name: 'labelPosition: side'
+export const Default: FormStory = {
+  render: () => <Render />
 };
 
-export const CustomWidth = () => render({width: 400});
+export const LabelPositionSide: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    labelPosition: 'side'
+  },
+  name: 'labelPosition: side'
+};
 
-CustomWidth.story = {
+export const CustomWidth: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    width: 400
+  },
   name: 'custom width'
 };
 
-export const CustomWidthLabelPositionSide = () => render({width: 400, labelPosition: 'side'});
-
-CustomWidthLabelPositionSide.story = {
+export const CustomWidthLabelPositionSide: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    width: 400,
+    labelPosition: 'side'
+  },
   name: 'custom width, labelPosition: side'
 };
 
-export const LabelAlignEnd = () => render({width: 400, labelAlign: 'end'});
-
-LabelAlignEnd.story = {
+export const LabelAlignEnd: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    width: 400,
+    labelAlign: 'end'
+  },
   name: 'labelAlign: end'
 };
 
-export const LabelPositionSideLabelAlignEnd = () =>
-  render({width: 400, labelPosition: 'side', labelAlign: 'end'});
-
-LabelPositionSideLabelAlignEnd.story = {
+export const LabelPositionSideLabelAlignEnd: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    width: 400,
+    labelPosition: 'side',
+    labelAlign: 'end'
+  },
   name: 'labelPosition: side, labelAlign: end'
 };
 
-export const FieldsNextToEachOther = () => (
-  <Form>
-    <Flex>
-      <TextField
-        label="First Name"
-        marginEnd="size-100"
-        flex={1}
-        description="Please enter your first name." />
-      <TextField label="Last Name" flex={1} description="Please enter your last name." />
-    </Flex>
-    <TextField label="Street Address" description="Please include apartment or suite number." />
-    <Flex>
-      <TextField
-        label="City"
-        marginEnd="size-100"
-        flex={1}
-        description="Please enter the city you live in." />
-      <Picker label="State" items={states} marginEnd="size-100" flex={1}>
-        {(item) => <Item key={item.abbr}>{item.name}</Item>}
-      </Picker>
-      <TextField label="Zip code" flex={1} description="Please enter a five-digit zip code." />
-    </Flex>
-  </Form>
-);
-
-FieldsNextToEachOther.story = {
+export const FieldsNextToEachOther: FormStory = {
+  render: (args) => (
+    <Form {...args}>
+      <Flex>
+        <TextField
+          label="First Name"
+          marginEnd="size-100"
+          flex={1}
+          description="Please enter your first name." />
+        <TextField label="Last Name" flex={1} description="Please enter your last name." />
+      </Flex>
+      <TextField label="Street Address" description="Please include apartment or suite number." />
+      <Flex>
+        <TextField
+          label="City"
+          marginEnd="size-100"
+          flex={1}
+          description="Please enter the city you live in." />
+        <Picker<State> label="State" items={states} marginEnd="size-100" flex={1}>
+          {(item) => <Item key={item.abbr}>{item.name}</Item>}
+        </Picker>
+        <TextField label="Zip code" flex={1} description="Please enter a five-digit zip code." />
+      </Flex>
+    </Form>
+  ),
   name: 'fields next to each other'
 };
 
-export const FieldsWithAutoCompleteProperty = () => {
+const FieldsWithAutoCompletePropertyRender = (props: SpectrumFormProps) => {
   const [checked, setChecked] = useState(true);
   return (
-    <Form>
+    <Form {...props}>
       <Well role="group" aria-labelledby="billing-legend">
         <h2 id="billing-legend" className={typographyStyles['spectrum-Heading4']}>
           Billing address
@@ -147,7 +166,7 @@ export const FieldsWithAutoCompleteProperty = () => {
             label="City"
             marginEnd="size-100"
             flex={1} />
-          <Picker
+          <Picker<State>
             autoComplete="billing address-level1"
             name="state"
             isRequired
@@ -165,7 +184,7 @@ export const FieldsWithAutoCompleteProperty = () => {
             flex={1} />
         </Flex>
         <Flex>
-          <Picker
+          <Picker<Country>
             autoComplete="billing country"
             name="country"
             isRequired
@@ -234,7 +253,7 @@ export const FieldsWithAutoCompleteProperty = () => {
                 label="City"
                 marginEnd="size-100"
                 flex={1} />
-              <Picker
+              <Picker<State>
                 autoComplete="shipping address-level1"
                 name="shippingState"
                 isRequired
@@ -252,7 +271,7 @@ export const FieldsWithAutoCompleteProperty = () => {
                 flex={1} />
             </Flex>
             <Flex>
-              <Picker
+              <Picker<Country>
                 autoComplete="shipping country"
                 name="shippingCountry"
                 isRequired
@@ -286,122 +305,140 @@ export const FieldsWithAutoCompleteProperty = () => {
     </Form>
   );
 };
-
-FieldsWithAutoCompleteProperty.story = {
+export const FieldsWithAutoCompleteProperty: FormStory = {
+  render: (args) => <FieldsWithAutoCompletePropertyRender {...args} />,
   name: 'fields with autoComplete property'
 };
 
-export const IsRequiredTrue = () => render({isRequired: true});
-
-IsRequiredTrue.story = {
+export const IsRequiredTrue: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    isRequired: true
+  },
   name: 'isRequired: true'
 };
 
-export const IsRequiredTrueNecessityIndicatorLabel = () =>
-  render({isRequired: true, necessityIndicator: 'label'});
-
-IsRequiredTrueNecessityIndicatorLabel.story = {
+export const IsRequiredTrueNecessityIndicatorLabel: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    isRequired: true,
+    necessityIndicator: 'label'
+  },
   name: 'isRequired: true, necessityIndicator: label'
 };
 
-export const IsRequiredFalseNecessityIndicatorLabel = () =>
-  render({isRequired: false, necessityIndicator: 'label'});
-
-IsRequiredFalseNecessityIndicatorLabel.story = {
+export const IsRequiredFalseNecessityIndicatorLabel: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    isRequired: false,
+    necessityIndicator: 'label'
+  },
   name: 'isRequired: false, necessityIndicator: label'
 };
 
-export const IsDisabled = () => render({isDisabled: true});
-
-IsDisabled.story = {
+export const IsDisabled: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    isDisabled: true
+  },
   name: 'isDisabled'
 };
 
-export const IsQuiet = () => render({isQuiet: true});
-
-IsQuiet.story = {
+export const IsQuiet: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    isQuiet: true
+  },
   name: 'isQuiet'
 };
 
-export const IsQuietLabelPositionSide = () => render({isQuiet: true, labelPosition: 'side'});
-
-IsQuietLabelPositionSide.story = {
+export const IsQuietLabelPositionSide: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    isQuiet: true,
+    labelPosition: 'side'
+  },
   name: 'isQuiet, labelPosition: side'
 };
 
-export const IsEmphasized = () => render({isEmphasized: true});
-
-IsEmphasized.story = {
+export const IsEmphasized: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    isEmphasized: true
+  },
   name: 'isEmphasized'
 };
 
-export const ValidationStateInvalid = () => render({validationState: 'invalid'});
-
-ValidationStateInvalid.story = {
+export const ValidationStateInvalid: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    validationState: 'invalid'
+  },
   name: 'validationState: invalid'
 };
 
-export const ValidationStateValid = () => render({validationState: 'valid'});
-
-ValidationStateValid.story = {
+export const ValidationStateValid: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    validationState: 'valid'
+  },
   name: 'validationState: valid'
 };
 
-export const ValidationStateInvalidIsQuietTrue = () =>
-  render({validationState: 'invalid', isQuiet: true});
-
-ValidationStateInvalidIsQuietTrue.story = {
+export const ValidationStateInvalidIsQuietTrue: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    validationState: 'invalid',
+    isQuiet: true
+  },
   name: 'validationState: invalid, isQuiet: true'
 };
 
-export const ValidationStateValidIsQuietTrue = () =>
-  render({validationState: 'valid', isQuiet: true});
-
-ValidationStateValidIsQuietTrue.story = {
+export const ValidationStateValidIsQuietTrue: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    validationState: 'valid',
+    isQuiet: true
+  },
   name: 'validationState: valid, isQuiet: true'
 };
 
-export const FormWithReset = () => <FormWithControls />;
-
-FormWithReset.story = {
+export const FormWithReset: FormStory = {
+  render: () => <FormWithControls />,
   name: 'form with reset'
 };
 
-
-export const _FormWithSubmit = () => <FormWithSubmit />;
-
-_FormWithSubmit.story = {
+export const _FormWithSubmit: FormStory = {
+  render: () => <FormWithSubmit />,
   name: 'form with submit'
 };
 
-export const FormWithNumberfieldAndLocaleArAe = () => (
-  <Flex gap="size-100">
-    <NumberField label="Outside form" description="Hello" />
-    <Form>
-      <NumberField label="Inside form" />
-    </Form>
-    <Form>
-      <TextField label="First Name" />
-    </Form>
-    <Form>
-      <TextField label="First Name" />
-      <NumberField label="Inside form" />
-    </Form>
-  </Flex>
-);
-
-FormWithNumberfieldAndLocaleArAe.story = {
+export const FormWithNumberfieldAndLocaleArAe: FormStory = {
+  render: () => (
+    <Flex gap="size-100">
+      <NumberField label="Outside form" description="Hello" />
+      <Form>
+        <NumberField label="Inside form" />
+      </Form>
+      <Form>
+        <TextField label="First Name" />
+      </Form>
+      <Form>
+        <TextField label="First Name" />
+        <NumberField label="Inside form" />
+      </Form>
+    </Flex>
+  ),
   name: 'form with numberfield and locale=ar-AE'
 };
 
-export const WithTranslations = () => <FormTranslatedText />;
-
-WithTranslations.story = {
+export const WithTranslations: FormStory = {
+  render: () => <FormTranslatedText />,
   name: 'with translations',
   parameters: {description: {data: 'Translations included for: Arabic, English, Hebrew, Japanese, Korean, Simplified Chinese, and Traditional Chinese.'}}
 };
 
-function render(props: any = {}) {
+function Render(props: any = {}) {
   return (
     <Form {...props}>
       <CheckboxGroup label="Pets" name="pets" validate={v => v.includes('dogs') ? 'No dogs' : null}>
@@ -422,10 +459,10 @@ function render(props: any = {}) {
         <Item key="snake">Snake</Item>
       </SearchAutocomplete>
       <NumberField label="Years lived there" name="years" />
-      <Picker label="State" items={states} name="state">
+      <Picker<State> label="State" items={states} name="state">
         {item => <Item key={item.abbr}>{item.name}</Item>}
       </Picker>
-      <Picker label="Country" items={countries} name="country">
+      <Picker<Country> label="Country" items={countries} name="country">
         {item => <Item key={item.name}>{item.name}</Item>}
       </Picker>
       <Picker label="Favorite color" name="color" description="Select any color you like." errorMessage="Please select a nicer color.">
@@ -498,7 +535,7 @@ function FormWithControls(props: any = {}) {
       <TextField name="first-name" label="First Name (controlled)" value={firstName} onChange={setFirstName} />
       <TextField name="last-name" label="Last Name (uncontrolled)" defaultValue="world" />
       <TextField name="street-address" label="Street Address (uncontrolled)" />
-      <Picker name="country" label="Country (uncontrolled)" items={countries}>
+      <Picker<Country> name="country" label="Country (uncontrolled)" items={countries}>
         {item => <Item key={item.name}>{item.name}</Item>}
       </Picker>
       <NumberField name="age" label="Age (uncontrolled)" />
@@ -709,21 +746,22 @@ function FormWithSubmit() {
   );
 }
 
-export const NativeValidation = () => render({
-  isRequired: true,
-  validationBehavior: 'native',
-  showSubmit: true,
-  onSubmit: (e) => {
-    e.preventDefault();
-    action('onSubmit')(Object.fromEntries(new FormData(e.target as HTMLFormElement).entries()));
-  }
-});
-
-NativeValidation.story = {
+export const NativeValidation: FormStory = {
+  render: (args) => <Render {...args} />,
+  args: {
+    isRequired: true,
+    validationBehavior: 'native',
+    // @ts-ignore
+    showSubmit: true,
+    onSubmit: (e) => {
+      e.preventDefault();
+      action('onSubmit')(Object.fromEntries(new FormData(e.target as HTMLFormElement).entries()));
+    }
+  },
   parameters: {description: {data: 'This story is to test that client validation occurs on form submit and updates when the user commits changes to a field value (e.g. on blur).'}}
 };
 
-export function ServerValidation() {
+const ServerValidationRender = () => {
   let [serverErrors, setServerErrors] = useState<any>({});
   let onSubmit = async (e) => {
     e.preventDefault();
@@ -734,19 +772,22 @@ export function ServerValidation() {
     setServerErrors(errors);
   };
 
-  return render({
-    validationBehavior: 'native',
-    onSubmit,
-    validationErrors: serverErrors,
-    showSubmit: true
-  });
-}
+  return (
+    <Render
+      validationBehavior="native"
+      onSubmit={onSubmit}
+      validationErrors={serverErrors}
+      // @ts-ignore
+      showSubmit />
+  );
+};
 
-ServerValidation.story = {
+export const ServerValidation: FormStory = {
+  render: () => <ServerValidationRender />,
   parameters: {description: {data: 'This story is to test that server errors appear after submission, and are cleared when a field is modified.'}}
 };
 
-export let NumberFieldFormSubmit = {
+export const NumberFieldFormSubmit: FormStory = {
   render: () => {
     return (
       <Form
diff --git a/packages/@react-spectrum/form/stories/data.js b/packages/@react-spectrum/form/stories/data.js
deleted file mode 100644
index cf8f81b079e..00000000000
--- a/packages/@react-spectrum/form/stories/data.js
+++ /dev/null
@@ -1,307 +0,0 @@
-export const states = [
-  {name: 'Alabama', abbr: 'AL'},
-  {name: 'Alaska', abbr: 'AK'},
-  {name: 'American Samoa', abbr: 'AS'},
-  {name: 'Arizona', abbr: 'AZ'},
-  {name: 'Arkansas', abbr: 'AR'},
-  {name: 'California', abbr: 'CA'},
-  {name: 'Colorado', abbr: 'CO'},
-  {name: 'Connecticut', abbr: 'CT'},
-  {name: 'Delaware', abbr: 'DE'},
-  {name: 'District Of Columbia', abbr: 'DC'},
-  {name: 'Federated States Of Micronesia', abbr: 'FM'},
-  {name: 'Florida', abbr: 'FL'},
-  {name: 'Georgia', abbr: 'GA'},
-  {name: 'Guam', abbr: 'GU'},
-  {name: 'Hawaii', abbr: 'HI'},
-  {name: 'Idaho', abbr: 'ID'},
-  {name: 'Illinois', abbr: 'IL'},
-  {name: 'Indiana', abbr: 'IN'},
-  {name: 'Iowa', abbr: 'IA'},
-  {name: 'Kansas', abbr: 'KS'},
-  {name: 'Kentucky', abbr: 'KY'},
-  {name: 'Louisiana', abbr: 'LA'},
-  {name: 'Maine', abbr: 'ME'},
-  {name: 'Marshall Islands', abbr: 'MH'},
-  {name: 'Maryland', abbr: 'MD'},
-  {name: 'Massachusetts', abbr: 'MA'},
-  {name: 'Michigan', abbr: 'MI'},
-  {name: 'Minnesota', abbr: 'MN'},
-  {name: 'Mississippi', abbr: 'MS'},
-  {name: 'Missouri', abbr: 'MO'},
-  {name: 'Montana', abbr: 'MT'},
-  {name: 'Nebraska', abbr: 'NE'},
-  {name: 'Nevada', abbr: 'NV'},
-  {name: 'New Hampshire', abbr: 'NH'},
-  {name: 'New Jersey', abbr: 'NJ'},
-  {name: 'New Mexico', abbr: 'NM'},
-  {name: 'New York', abbr: 'NY'},
-  {name: 'North Carolina', abbr: 'NC'},
-  {name: 'North Dakota', abbr: 'ND'},
-  {name: 'Northern Mariana Islands', abbr: 'MP'},
-  {name: 'Ohio', abbr: 'OH'},
-  {name: 'Oklahoma', abbr: 'OK'},
-  {name: 'Oregon', abbr: 'OR'},
-  {name: 'Palau', abbr: 'PW'},
-  {name: 'Pennsylvania', abbr: 'PA'},
-  {name: 'Puerto Rico', abbr: 'PR'},
-  {name: 'Rhode Island', abbr: 'RI'},
-  {name: 'South Carolina', abbr: 'SC'},
-  {name: 'South Dakota', abbr: 'SD'},
-  {name: 'Tennessee', abbr: 'TN'},
-  {name: 'Texas', abbr: 'TX'},
-  {name: 'Utah', abbr: 'UT'},
-  {name: 'Vermont', abbr: 'VT'},
-  {name: 'Virgin Islands', abbr: 'VI'},
-  {name: 'Virginia', abbr: 'VA'},
-  {name: 'Washington', abbr: 'WA'},
-  {name: 'West Virginia', abbr: 'WV'},
-  {name: 'Wisconsin', abbr: 'WI'},
-  {name: 'Wyoming', abbr: 'WY'}
-];
-
-export const countries = [ 
-  {name: 'Afghanistan', code: 'AF'}, 
-  {name: 'Åland Islands', code: 'AX'}, 
-  {name: 'Albania', code: 'AL'}, 
-  {name: 'Algeria', code: 'DZ'}, 
-  {name: 'American Samoa', code: 'AS'}, 
-  {name: 'AndorrA', code: 'AD'}, 
-  {name: 'Angola', code: 'AO'}, 
-  {name: 'Anguilla', code: 'AI'}, 
-  {name: 'Antarctica', code: 'AQ'}, 
-  {name: 'Antigua and Barbuda', code: 'AG'}, 
-  {name: 'Argentina', code: 'AR'}, 
-  {name: 'Armenia', code: 'AM'}, 
-  {name: 'Aruba', code: 'AW'}, 
-  {name: 'Australia', code: 'AU'}, 
-  {name: 'Austria', code: 'AT'}, 
-  {name: 'Azerbaijan', code: 'AZ'}, 
-  {name: 'Bahamas', code: 'BS'}, 
-  {name: 'Bahrain', code: 'BH'}, 
-  {name: 'Bangladesh', code: 'BD'}, 
-  {name: 'Barbados', code: 'BB'}, 
-  {name: 'Belarus', code: 'BY'}, 
-  {name: 'Belgium', code: 'BE'}, 
-  {name: 'Belize', code: 'BZ'}, 
-  {name: 'Benin', code: 'BJ'}, 
-  {name: 'Bermuda', code: 'BM'}, 
-  {name: 'Bhutan', code: 'BT'}, 
-  {name: 'Bolivia', code: 'BO'}, 
-  {name: 'Bosnia and Herzegovina', code: 'BA'}, 
-  {name: 'Botswana', code: 'BW'}, 
-  {name: 'Bouvet Island', code: 'BV'}, 
-  {name: 'Brazil', code: 'BR'}, 
-  {name: 'British Indian Ocean Territory', code: 'IO'}, 
-  {name: 'Brunei Darussalam', code: 'BN'}, 
-  {name: 'Bulgaria', code: 'BG'}, 
-  {name: 'Burkina Faso', code: 'BF'}, 
-  {name: 'Burundi', code: 'BI'}, 
-  {name: 'Cambodia', code: 'KH'}, 
-  {name: 'Cameroon', code: 'CM'}, 
-  {name: 'Canada', code: 'CA'}, 
-  {name: 'Cape Verde', code: 'CV'}, 
-  {name: 'Cayman Islands', code: 'KY'}, 
-  {name: 'Central African Republic', code: 'CF'}, 
-  {name: 'Chad', code: 'TD'}, 
-  {name: 'Chile', code: 'CL'}, 
-  {name: 'China', code: 'CN'}, 
-  {name: 'Christmas Island', code: 'CX'}, 
-  {name: 'Cocos (Keeling) Islands', code: 'CC'}, 
-  {name: 'Colombia', code: 'CO'}, 
-  {name: 'Comoros', code: 'KM'}, 
-  {name: 'Congo', code: 'CG'}, 
-  {name: 'Congo, The Democratic Republic of the', code: 'CD'}, 
-  {name: 'Cook Islands', code: 'CK'}, 
-  {name: 'Costa Rica', code: 'CR'}, 
-  {name: 'Cote D\'Ivoire', code: 'CI'}, 
-  {name: 'Croatia', code: 'HR'}, 
-  {name: 'Cuba', code: 'CU'}, 
-  {name: 'Cyprus', code: 'CY'}, 
-  {name: 'Czech Republic', code: 'CZ'}, 
-  {name: 'Denmark', code: 'DK'}, 
-  {name: 'Djibouti', code: 'DJ'}, 
-  {name: 'Dominica', code: 'DM'}, 
-  {name: 'Dominican Republic', code: 'DO'}, 
-  {name: 'Ecuador', code: 'EC'}, 
-  {name: 'Egypt', code: 'EG'}, 
-  {name: 'El Salvador', code: 'SV'}, 
-  {name: 'Equatorial Guinea', code: 'GQ'}, 
-  {name: 'Eritrea', code: 'ER'}, 
-  {name: 'Estonia', code: 'EE'}, 
-  {name: 'Ethiopia', code: 'ET'}, 
-  {name: 'Falkland Islands (Malvinas)', code: 'FK'}, 
-  {name: 'Faroe Islands', code: 'FO'}, 
-  {name: 'Fiji', code: 'FJ'}, 
-  {name: 'Finland', code: 'FI'}, 
-  {name: 'France', code: 'FR'}, 
-  {name: 'French Guiana', code: 'GF'}, 
-  {name: 'French Polynesia', code: 'PF'}, 
-  {name: 'French Southern Territories', code: 'TF'}, 
-  {name: 'Gabon', code: 'GA'}, 
-  {name: 'Gambia', code: 'GM'}, 
-  {name: 'Georgia', code: 'GE'}, 
-  {name: 'Germany', code: 'DE'}, 
-  {name: 'Ghana', code: 'GH'}, 
-  {name: 'Gibraltar', code: 'GI'}, 
-  {name: 'Greece', code: 'GR'}, 
-  {name: 'Greenland', code: 'GL'}, 
-  {name: 'Grenada', code: 'GD'}, 
-  {name: 'Guadeloupe', code: 'GP'}, 
-  {name: 'Guam', code: 'GU'}, 
-  {name: 'Guatemala', code: 'GT'}, 
-  {name: 'Guernsey', code: 'GG'}, 
-  {name: 'Guinea', code: 'GN'}, 
-  {name: 'Guinea-Bissau', code: 'GW'}, 
-  {name: 'Guyana', code: 'GY'}, 
-  {name: 'Haiti', code: 'HT'}, 
-  {name: 'Heard Island and Mcdonald Islands', code: 'HM'}, 
-  {name: 'Holy See (Vatican City State)', code: 'VA'}, 
-  {name: 'Honduras', code: 'HN'}, 
-  {name: 'Hong Kong', code: 'HK'}, 
-  {name: 'Hungary', code: 'HU'}, 
-  {name: 'Iceland', code: 'IS'}, 
-  {name: 'India', code: 'IN'}, 
-  {name: 'Indonesia', code: 'ID'}, 
-  {name: 'Iran, Islamic Republic Of', code: 'IR'}, 
-  {name: 'Iraq', code: 'IQ'}, 
-  {name: 'Ireland', code: 'IE'}, 
-  {name: 'Isle of Man', code: 'IM'}, 
-  {name: 'Israel', code: 'IL'}, 
-  {name: 'Italy', code: 'IT'}, 
-  {name: 'Jamaica', code: 'JM'}, 
-  {name: 'Japan', code: 'JP'}, 
-  {name: 'Jersey', code: 'JE'}, 
-  {name: 'Jordan', code: 'JO'}, 
-  {name: 'Kazakhstan', code: 'KZ'}, 
-  {name: 'Kenya', code: 'KE'}, 
-  {name: 'Kiribati', code: 'KI'}, 
-  {name: 'Korea, Democratic People\'S Republic of', code: 'KP'}, 
-  {name: 'Korea, Republic of', code: 'KR'}, 
-  {name: 'Kuwait', code: 'KW'}, 
-  {name: 'Kyrgyzstan', code: 'KG'}, 
-  {name: 'Lao People\'S Democratic Republic', code: 'LA'}, 
-  {name: 'Latvia', code: 'LV'}, 
-  {name: 'Lebanon', code: 'LB'}, 
-  {name: 'Lesotho', code: 'LS'}, 
-  {name: 'Liberia', code: 'LR'}, 
-  {name: 'Libyan Arab Jamahiriya', code: 'LY'}, 
-  {name: 'Liechtenstein', code: 'LI'}, 
-  {name: 'Lithuania', code: 'LT'}, 
-  {name: 'Luxembourg', code: 'LU'}, 
-  {name: 'Macao', code: 'MO'}, 
-  {name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK'}, 
-  {name: 'Madagascar', code: 'MG'}, 
-  {name: 'Malawi', code: 'MW'}, 
-  {name: 'Malaysia', code: 'MY'}, 
-  {name: 'Maldives', code: 'MV'}, 
-  {name: 'Mali', code: 'ML'}, 
-  {name: 'Malta', code: 'MT'}, 
-  {name: 'Marshall Islands', code: 'MH'}, 
-  {name: 'Martinique', code: 'MQ'}, 
-  {name: 'Mauritania', code: 'MR'}, 
-  {name: 'Mauritius', code: 'MU'}, 
-  {name: 'Mayotte', code: 'YT'}, 
-  {name: 'Mexico', code: 'MX'}, 
-  {name: 'Micronesia, Federated States of', code: 'FM'}, 
-  {name: 'Moldova, Republic of', code: 'MD'}, 
-  {name: 'Monaco', code: 'MC'}, 
-  {name: 'Mongolia', code: 'MN'}, 
-  {name: 'Montserrat', code: 'MS'}, 
-  {name: 'Morocco', code: 'MA'}, 
-  {name: 'Mozambique', code: 'MZ'}, 
-  {name: 'Myanmar', code: 'MM'}, 
-  {name: 'Namibia', code: 'NA'}, 
-  {name: 'Nauru', code: 'NR'}, 
-  {name: 'Nepal', code: 'NP'}, 
-  {name: 'Netherlands', code: 'NL'}, 
-  {name: 'Netherlands Antilles', code: 'AN'}, 
-  {name: 'New Caledonia', code: 'NC'}, 
-  {name: 'New Zealand', code: 'NZ'}, 
-  {name: 'Nicaragua', code: 'NI'}, 
-  {name: 'Niger', code: 'NE'}, 
-  {name: 'Nigeria', code: 'NG'}, 
-  {name: 'Niue', code: 'NU'}, 
-  {name: 'Norfolk Island', code: 'NF'}, 
-  {name: 'Northern Mariana Islands', code: 'MP'}, 
-  {name: 'Norway', code: 'NO'}, 
-  {name: 'Oman', code: 'OM'}, 
-  {name: 'Pakistan', code: 'PK'}, 
-  {name: 'Palau', code: 'PW'}, 
-  {name: 'Palestinian Territory, Occupied', code: 'PS'}, 
-  {name: 'Panama', code: 'PA'}, 
-  {name: 'Papua New Guinea', code: 'PG'}, 
-  {name: 'Paraguay', code: 'PY'}, 
-  {name: 'Peru', code: 'PE'}, 
-  {name: 'Philippines', code: 'PH'}, 
-  {name: 'Pitcairn', code: 'PN'}, 
-  {name: 'Poland', code: 'PL'}, 
-  {name: 'Portugal', code: 'PT'}, 
-  {name: 'Puerto Rico', code: 'PR'}, 
-  {name: 'Qatar', code: 'QA'}, 
-  {name: 'Reunion', code: 'RE'}, 
-  {name: 'Romania', code: 'RO'}, 
-  {name: 'Russian Federation', code: 'RU'}, 
-  {name: 'RWANDA', code: 'RW'}, 
-  {name: 'Saint Helena', code: 'SH'}, 
-  {name: 'Saint Kitts and Nevis', code: 'KN'}, 
-  {name: 'Saint Lucia', code: 'LC'}, 
-  {name: 'Saint Pierre and Miquelon', code: 'PM'}, 
-  {name: 'Saint Vincent and the Grenadines', code: 'VC'}, 
-  {name: 'Samoa', code: 'WS'}, 
-  {name: 'San Marino', code: 'SM'}, 
-  {name: 'Sao Tome and Principe', code: 'ST'}, 
-  {name: 'Saudi Arabia', code: 'SA'}, 
-  {name: 'Senegal', code: 'SN'}, 
-  {name: 'Serbia and Montenegro', code: 'CS'}, 
-  {name: 'Seychelles', code: 'SC'}, 
-  {name: 'Sierra Leone', code: 'SL'}, 
-  {name: 'Singapore', code: 'SG'}, 
-  {name: 'Slovakia', code: 'SK'}, 
-  {name: 'Slovenia', code: 'SI'}, 
-  {name: 'Solomon Islands', code: 'SB'}, 
-  {name: 'Somalia', code: 'SO'}, 
-  {name: 'South Africa', code: 'ZA'}, 
-  {name: 'South Georgia and the South Sandwich Islands', code: 'GS'}, 
-  {name: 'Spain', code: 'ES'}, 
-  {name: 'Sri Lanka', code: 'LK'}, 
-  {name: 'Sudan', code: 'SD'}, 
-  {name: 'Suriname', code: 'SR'}, 
-  {name: 'Svalbard and Jan Mayen', code: 'SJ'}, 
-  {name: 'Swaziland', code: 'SZ'}, 
-  {name: 'Sweden', code: 'SE'}, 
-  {name: 'Switzerland', code: 'CH'}, 
-  {name: 'Syrian Arab Republic', code: 'SY'}, 
-  {name: 'Taiwan, Province of China', code: 'TW'}, 
-  {name: 'Tajikistan', code: 'TJ'}, 
-  {name: 'Tanzania, United Republic of', code: 'TZ'}, 
-  {name: 'Thailand', code: 'TH'}, 
-  {name: 'Timor-Leste', code: 'TL'}, 
-  {name: 'Togo', code: 'TG'}, 
-  {name: 'Tokelau', code: 'TK'}, 
-  {name: 'Tonga', code: 'TO'}, 
-  {name: 'Trinidad and Tobago', code: 'TT'}, 
-  {name: 'Tunisia', code: 'TN'}, 
-  {name: 'Turkey', code: 'TR'}, 
-  {name: 'Turkmenistan', code: 'TM'}, 
-  {name: 'Turks and Caicos Islands', code: 'TC'}, 
-  {name: 'Tuvalu', code: 'TV'}, 
-  {name: 'Uganda', code: 'UG'}, 
-  {name: 'Ukraine', code: 'UA'}, 
-  {name: 'United Arab Emirates', code: 'AE'}, 
-  {name: 'United Kingdom', code: 'GB'}, 
-  {name: 'United States', code: 'US'}, 
-  {name: 'United States Minor Outlying Islands', code: 'UM'}, 
-  {name: 'Uruguay', code: 'UY'}, 
-  {name: 'Uzbekistan', code: 'UZ'}, 
-  {name: 'Vanuatu', code: 'VU'}, 
-  {name: 'Venezuela', code: 'VE'}, 
-  {name: 'Viet Nam', code: 'VN'}, 
-  {name: 'Virgin Islands, British', code: 'VG'}, 
-  {name: 'Virgin Islands, U.S.', code: 'VI'}, 
-  {name: 'Wallis and Futuna', code: 'WF'}, 
-  {name: 'Western Sahara', code: 'EH'}, 
-  {name: 'Yemen', code: 'YE'}, 
-  {name: 'Zambia', code: 'ZM'}, 
-  {name: 'Zimbabwe', code: 'ZW'} 
-];
diff --git a/packages/@react-spectrum/form/stories/data.ts b/packages/@react-spectrum/form/stories/data.ts
new file mode 100644
index 00000000000..e1ed21b474a
--- /dev/null
+++ b/packages/@react-spectrum/form/stories/data.ts
@@ -0,0 +1,317 @@
+export interface State {
+  name: string,
+  abbr: string
+}
+
+export const states: State[] = [
+  {name: 'Alabama', abbr: 'AL'},
+  {name: 'Alaska', abbr: 'AK'},
+  {name: 'American Samoa', abbr: 'AS'},
+  {name: 'Arizona', abbr: 'AZ'},
+  {name: 'Arkansas', abbr: 'AR'},
+  {name: 'California', abbr: 'CA'},
+  {name: 'Colorado', abbr: 'CO'},
+  {name: 'Connecticut', abbr: 'CT'},
+  {name: 'Delaware', abbr: 'DE'},
+  {name: 'District Of Columbia', abbr: 'DC'},
+  {name: 'Federated States Of Micronesia', abbr: 'FM'},
+  {name: 'Florida', abbr: 'FL'},
+  {name: 'Georgia', abbr: 'GA'},
+  {name: 'Guam', abbr: 'GU'},
+  {name: 'Hawaii', abbr: 'HI'},
+  {name: 'Idaho', abbr: 'ID'},
+  {name: 'Illinois', abbr: 'IL'},
+  {name: 'Indiana', abbr: 'IN'},
+  {name: 'Iowa', abbr: 'IA'},
+  {name: 'Kansas', abbr: 'KS'},
+  {name: 'Kentucky', abbr: 'KY'},
+  {name: 'Louisiana', abbr: 'LA'},
+  {name: 'Maine', abbr: 'ME'},
+  {name: 'Marshall Islands', abbr: 'MH'},
+  {name: 'Maryland', abbr: 'MD'},
+  {name: 'Massachusetts', abbr: 'MA'},
+  {name: 'Michigan', abbr: 'MI'},
+  {name: 'Minnesota', abbr: 'MN'},
+  {name: 'Mississippi', abbr: 'MS'},
+  {name: 'Missouri', abbr: 'MO'},
+  {name: 'Montana', abbr: 'MT'},
+  {name: 'Nebraska', abbr: 'NE'},
+  {name: 'Nevada', abbr: 'NV'},
+  {name: 'New Hampshire', abbr: 'NH'},
+  {name: 'New Jersey', abbr: 'NJ'},
+  {name: 'New Mexico', abbr: 'NM'},
+  {name: 'New York', abbr: 'NY'},
+  {name: 'North Carolina', abbr: 'NC'},
+  {name: 'North Dakota', abbr: 'ND'},
+  {name: 'Northern Mariana Islands', abbr: 'MP'},
+  {name: 'Ohio', abbr: 'OH'},
+  {name: 'Oklahoma', abbr: 'OK'},
+  {name: 'Oregon', abbr: 'OR'},
+  {name: 'Palau', abbr: 'PW'},
+  {name: 'Pennsylvania', abbr: 'PA'},
+  {name: 'Puerto Rico', abbr: 'PR'},
+  {name: 'Rhode Island', abbr: 'RI'},
+  {name: 'South Carolina', abbr: 'SC'},
+  {name: 'South Dakota', abbr: 'SD'},
+  {name: 'Tennessee', abbr: 'TN'},
+  {name: 'Texas', abbr: 'TX'},
+  {name: 'Utah', abbr: 'UT'},
+  {name: 'Vermont', abbr: 'VT'},
+  {name: 'Virgin Islands', abbr: 'VI'},
+  {name: 'Virginia', abbr: 'VA'},
+  {name: 'Washington', abbr: 'WA'},
+  {name: 'West Virginia', abbr: 'WV'},
+  {name: 'Wisconsin', abbr: 'WI'},
+  {name: 'Wyoming', abbr: 'WY'}
+];
+
+export interface Country {
+  name: string,
+  code: string
+}
+
+export const countries: Country[] = [
+  {name: 'Afghanistan', code: 'AF'},
+  {name: 'Åland Islands', code: 'AX'},
+  {name: 'Albania', code: 'AL'},
+  {name: 'Algeria', code: 'DZ'},
+  {name: 'American Samoa', code: 'AS'},
+  {name: 'AndorrA', code: 'AD'},
+  {name: 'Angola', code: 'AO'},
+  {name: 'Anguilla', code: 'AI'},
+  {name: 'Antarctica', code: 'AQ'},
+  {name: 'Antigua and Barbuda', code: 'AG'},
+  {name: 'Argentina', code: 'AR'},
+  {name: 'Armenia', code: 'AM'},
+  {name: 'Aruba', code: 'AW'},
+  {name: 'Australia', code: 'AU'},
+  {name: 'Austria', code: 'AT'},
+  {name: 'Azerbaijan', code: 'AZ'},
+  {name: 'Bahamas', code: 'BS'},
+  {name: 'Bahrain', code: 'BH'},
+  {name: 'Bangladesh', code: 'BD'},
+  {name: 'Barbados', code: 'BB'},
+  {name: 'Belarus', code: 'BY'},
+  {name: 'Belgium', code: 'BE'},
+  {name: 'Belize', code: 'BZ'},
+  {name: 'Benin', code: 'BJ'},
+  {name: 'Bermuda', code: 'BM'},
+  {name: 'Bhutan', code: 'BT'},
+  {name: 'Bolivia', code: 'BO'},
+  {name: 'Bosnia and Herzegovina', code: 'BA'},
+  {name: 'Botswana', code: 'BW'},
+  {name: 'Bouvet Island', code: 'BV'},
+  {name: 'Brazil', code: 'BR'},
+  {name: 'British Indian Ocean Territory', code: 'IO'},
+  {name: 'Brunei Darussalam', code: 'BN'},
+  {name: 'Bulgaria', code: 'BG'},
+  {name: 'Burkina Faso', code: 'BF'},
+  {name: 'Burundi', code: 'BI'},
+  {name: 'Cambodia', code: 'KH'},
+  {name: 'Cameroon', code: 'CM'},
+  {name: 'Canada', code: 'CA'},
+  {name: 'Cape Verde', code: 'CV'},
+  {name: 'Cayman Islands', code: 'KY'},
+  {name: 'Central African Republic', code: 'CF'},
+  {name: 'Chad', code: 'TD'},
+  {name: 'Chile', code: 'CL'},
+  {name: 'China', code: 'CN'},
+  {name: 'Christmas Island', code: 'CX'},
+  {name: 'Cocos (Keeling) Islands', code: 'CC'},
+  {name: 'Colombia', code: 'CO'},
+  {name: 'Comoros', code: 'KM'},
+  {name: 'Congo', code: 'CG'},
+  {name: 'Congo, The Democratic Republic of the', code: 'CD'},
+  {name: 'Cook Islands', code: 'CK'},
+  {name: 'Costa Rica', code: 'CR'},
+  {name: 'Cote D\'Ivoire', code: 'CI'},
+  {name: 'Croatia', code: 'HR'},
+  {name: 'Cuba', code: 'CU'},
+  {name: 'Cyprus', code: 'CY'},
+  {name: 'Czech Republic', code: 'CZ'},
+  {name: 'Denmark', code: 'DK'},
+  {name: 'Djibouti', code: 'DJ'},
+  {name: 'Dominica', code: 'DM'},
+  {name: 'Dominican Republic', code: 'DO'},
+  {name: 'Ecuador', code: 'EC'},
+  {name: 'Egypt', code: 'EG'},
+  {name: 'El Salvador', code: 'SV'},
+  {name: 'Equatorial Guinea', code: 'GQ'},
+  {name: 'Eritrea', code: 'ER'},
+  {name: 'Estonia', code: 'EE'},
+  {name: 'Ethiopia', code: 'ET'},
+  {name: 'Falkland Islands (Malvinas)', code: 'FK'},
+  {name: 'Faroe Islands', code: 'FO'},
+  {name: 'Fiji', code: 'FJ'},
+  {name: 'Finland', code: 'FI'},
+  {name: 'France', code: 'FR'},
+  {name: 'French Guiana', code: 'GF'},
+  {name: 'French Polynesia', code: 'PF'},
+  {name: 'French Southern Territories', code: 'TF'},
+  {name: 'Gabon', code: 'GA'},
+  {name: 'Gambia', code: 'GM'},
+  {name: 'Georgia', code: 'GE'},
+  {name: 'Germany', code: 'DE'},
+  {name: 'Ghana', code: 'GH'},
+  {name: 'Gibraltar', code: 'GI'},
+  {name: 'Greece', code: 'GR'},
+  {name: 'Greenland', code: 'GL'},
+  {name: 'Grenada', code: 'GD'},
+  {name: 'Guadeloupe', code: 'GP'},
+  {name: 'Guam', code: 'GU'},
+  {name: 'Guatemala', code: 'GT'},
+  {name: 'Guernsey', code: 'GG'},
+  {name: 'Guinea', code: 'GN'},
+  {name: 'Guinea-Bissau', code: 'GW'},
+  {name: 'Guyana', code: 'GY'},
+  {name: 'Haiti', code: 'HT'},
+  {name: 'Heard Island and Mcdonald Islands', code: 'HM'},
+  {name: 'Holy See (Vatican City State)', code: 'VA'},
+  {name: 'Honduras', code: 'HN'},
+  {name: 'Hong Kong', code: 'HK'},
+  {name: 'Hungary', code: 'HU'},
+  {name: 'Iceland', code: 'IS'},
+  {name: 'India', code: 'IN'},
+  {name: 'Indonesia', code: 'ID'},
+  {name: 'Iran, Islamic Republic Of', code: 'IR'},
+  {name: 'Iraq', code: 'IQ'},
+  {name: 'Ireland', code: 'IE'},
+  {name: 'Isle of Man', code: 'IM'},
+  {name: 'Israel', code: 'IL'},
+  {name: 'Italy', code: 'IT'},
+  {name: 'Jamaica', code: 'JM'},
+  {name: 'Japan', code: 'JP'},
+  {name: 'Jersey', code: 'JE'},
+  {name: 'Jordan', code: 'JO'},
+  {name: 'Kazakhstan', code: 'KZ'},
+  {name: 'Kenya', code: 'KE'},
+  {name: 'Kiribati', code: 'KI'},
+  {name: 'Korea, Democratic People\'S Republic of', code: 'KP'},
+  {name: 'Korea, Republic of', code: 'KR'},
+  {name: 'Kuwait', code: 'KW'},
+  {name: 'Kyrgyzstan', code: 'KG'},
+  {name: 'Lao People\'S Democratic Republic', code: 'LA'},
+  {name: 'Latvia', code: 'LV'},
+  {name: 'Lebanon', code: 'LB'},
+  {name: 'Lesotho', code: 'LS'},
+  {name: 'Liberia', code: 'LR'},
+  {name: 'Libyan Arab Jamahiriya', code: 'LY'},
+  {name: 'Liechtenstein', code: 'LI'},
+  {name: 'Lithuania', code: 'LT'},
+  {name: 'Luxembourg', code: 'LU'},
+  {name: 'Macao', code: 'MO'},
+  {name: 'Macedonia, The Former Yugoslav Republic of', code: 'MK'},
+  {name: 'Madagascar', code: 'MG'},
+  {name: 'Malawi', code: 'MW'},
+  {name: 'Malaysia', code: 'MY'},
+  {name: 'Maldives', code: 'MV'},
+  {name: 'Mali', code: 'ML'},
+  {name: 'Malta', code: 'MT'},
+  {name: 'Marshall Islands', code: 'MH'},
+  {name: 'Martinique', code: 'MQ'},
+  {name: 'Mauritania', code: 'MR'},
+  {name: 'Mauritius', code: 'MU'},
+  {name: 'Mayotte', code: 'YT'},
+  {name: 'Mexico', code: 'MX'},
+  {name: 'Micronesia, Federated States of', code: 'FM'},
+  {name: 'Moldova, Republic of', code: 'MD'},
+  {name: 'Monaco', code: 'MC'},
+  {name: 'Mongolia', code: 'MN'},
+  {name: 'Montserrat', code: 'MS'},
+  {name: 'Morocco', code: 'MA'},
+  {name: 'Mozambique', code: 'MZ'},
+  {name: 'Myanmar', code: 'MM'},
+  {name: 'Namibia', code: 'NA'},
+  {name: 'Nauru', code: 'NR'},
+  {name: 'Nepal', code: 'NP'},
+  {name: 'Netherlands', code: 'NL'},
+  {name: 'Netherlands Antilles', code: 'AN'},
+  {name: 'New Caledonia', code: 'NC'},
+  {name: 'New Zealand', code: 'NZ'},
+  {name: 'Nicaragua', code: 'NI'},
+  {name: 'Niger', code: 'NE'},
+  {name: 'Nigeria', code: 'NG'},
+  {name: 'Niue', code: 'NU'},
+  {name: 'Norfolk Island', code: 'NF'},
+  {name: 'Northern Mariana Islands', code: 'MP'},
+  {name: 'Norway', code: 'NO'},
+  {name: 'Oman', code: 'OM'},
+  {name: 'Pakistan', code: 'PK'},
+  {name: 'Palau', code: 'PW'},
+  {name: 'Palestinian Territory, Occupied', code: 'PS'},
+  {name: 'Panama', code: 'PA'},
+  {name: 'Papua New Guinea', code: 'PG'},
+  {name: 'Paraguay', code: 'PY'},
+  {name: 'Peru', code: 'PE'},
+  {name: 'Philippines', code: 'PH'},
+  {name: 'Pitcairn', code: 'PN'},
+  {name: 'Poland', code: 'PL'},
+  {name: 'Portugal', code: 'PT'},
+  {name: 'Puerto Rico', code: 'PR'},
+  {name: 'Qatar', code: 'QA'},
+  {name: 'Reunion', code: 'RE'},
+  {name: 'Romania', code: 'RO'},
+  {name: 'Russian Federation', code: 'RU'},
+  {name: 'RWANDA', code: 'RW'},
+  {name: 'Saint Helena', code: 'SH'},
+  {name: 'Saint Kitts and Nevis', code: 'KN'},
+  {name: 'Saint Lucia', code: 'LC'},
+  {name: 'Saint Pierre and Miquelon', code: 'PM'},
+  {name: 'Saint Vincent and the Grenadines', code: 'VC'},
+  {name: 'Samoa', code: 'WS'},
+  {name: 'San Marino', code: 'SM'},
+  {name: 'Sao Tome and Principe', code: 'ST'},
+  {name: 'Saudi Arabia', code: 'SA'},
+  {name: 'Senegal', code: 'SN'},
+  {name: 'Serbia and Montenegro', code: 'CS'},
+  {name: 'Seychelles', code: 'SC'},
+  {name: 'Sierra Leone', code: 'SL'},
+  {name: 'Singapore', code: 'SG'},
+  {name: 'Slovakia', code: 'SK'},
+  {name: 'Slovenia', code: 'SI'},
+  {name: 'Solomon Islands', code: 'SB'},
+  {name: 'Somalia', code: 'SO'},
+  {name: 'South Africa', code: 'ZA'},
+  {name: 'South Georgia and the South Sandwich Islands', code: 'GS'},
+  {name: 'Spain', code: 'ES'},
+  {name: 'Sri Lanka', code: 'LK'},
+  {name: 'Sudan', code: 'SD'},
+  {name: 'Suriname', code: 'SR'},
+  {name: 'Svalbard and Jan Mayen', code: 'SJ'},
+  {name: 'Swaziland', code: 'SZ'},
+  {name: 'Sweden', code: 'SE'},
+  {name: 'Switzerland', code: 'CH'},
+  {name: 'Syrian Arab Republic', code: 'SY'},
+  {name: 'Taiwan, Province of China', code: 'TW'},
+  {name: 'Tajikistan', code: 'TJ'},
+  {name: 'Tanzania, United Republic of', code: 'TZ'},
+  {name: 'Thailand', code: 'TH'},
+  {name: 'Timor-Leste', code: 'TL'},
+  {name: 'Togo', code: 'TG'},
+  {name: 'Tokelau', code: 'TK'},
+  {name: 'Tonga', code: 'TO'},
+  {name: 'Trinidad and Tobago', code: 'TT'},
+  {name: 'Tunisia', code: 'TN'},
+  {name: 'Turkey', code: 'TR'},
+  {name: 'Turkmenistan', code: 'TM'},
+  {name: 'Turks and Caicos Islands', code: 'TC'},
+  {name: 'Tuvalu', code: 'TV'},
+  {name: 'Uganda', code: 'UG'},
+  {name: 'Ukraine', code: 'UA'},
+  {name: 'United Arab Emirates', code: 'AE'},
+  {name: 'United Kingdom', code: 'GB'},
+  {name: 'United States', code: 'US'},
+  {name: 'United States Minor Outlying Islands', code: 'UM'},
+  {name: 'Uruguay', code: 'UY'},
+  {name: 'Uzbekistan', code: 'UZ'},
+  {name: 'Vanuatu', code: 'VU'},
+  {name: 'Venezuela', code: 'VE'},
+  {name: 'Viet Nam', code: 'VN'},
+  {name: 'Virgin Islands, British', code: 'VG'},
+  {name: 'Virgin Islands, U.S.', code: 'VI'},
+  {name: 'Wallis and Futuna', code: 'WF'},
+  {name: 'Western Sahara', code: 'EH'},
+  {name: 'Yemen', code: 'YE'},
+  {name: 'Zambia', code: 'ZM'},
+  {name: 'Zimbabwe', code: 'ZW'}
+];
diff --git a/packages/@spectrum-icons/color/scripts/generateIcons.cjs b/packages/@spectrum-icons/color/scripts/generateIcons.cjs
index eba326e974c..98d5174c850 100644
--- a/packages/@spectrum-icons/color/scripts/generateIcons.cjs
+++ b/packages/@spectrum-icons/color/scripts/generateIcons.cjs
@@ -23,10 +23,10 @@ function template(iconName) {
   }
   return (
 `import {${iconName} as IconComponent} from '@adobe/react-spectrum-workflow-color/dist/${iconRename}.js';
-import {Icon} from '@react-spectrum/icon';
-import React from 'react';
+import {Icon, IconPropsWithoutChildren} from '@react-spectrum/icon';
+import React, {JSX} from 'react';
 
-export default function ${iconRename}(props) {
+export default function ${iconRename}(props: IconPropsWithoutChildren): JSX.Element {
   return <Icon {...props}><IconComponent /></Icon>;
 }
 `
diff --git a/packages/@spectrum-icons/express/scripts/generateIcons.cjs b/packages/@spectrum-icons/express/scripts/generateIcons.cjs
index 0b0173b6fae..e1067463a36 100644
--- a/packages/@spectrum-icons/express/scripts/generateIcons.cjs
+++ b/packages/@spectrum-icons/express/scripts/generateIcons.cjs
@@ -30,11 +30,11 @@ for (let file of fs.readdirSync(dir)) {
 
   let jsx = compileSVG(path.join(dir, file));
   let wrapper = `import {Icon, IconPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
 ${jsx}
 
-export default function ${componentName}(props: IconPropsWithoutChildren) {
+export default function ${componentName}(props: IconPropsWithoutChildren): JSX.Element {
   return <Icon {...props}><IconComponent /></Icon>;
 }
 `;
diff --git a/packages/@spectrum-icons/illustrations/src/Error.tsx b/packages/@spectrum-icons/illustrations/src/Error.tsx
index 014a2854932..8899311a1d6 100644
--- a/packages/@spectrum-icons/illustrations/src/Error.tsx
+++ b/packages/@spectrum-icons/illustrations/src/Error.tsx
@@ -1,7 +1,7 @@
 import {Illustration, IllustrationPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export default function Error500(props: IllustrationPropsWithoutChildren) {
+export default function Error500(props: IllustrationPropsWithoutChildren): JSX.Element {
   return (
     <Illustration {...props}>
       <svg width="146.569" height="94">
diff --git a/packages/@spectrum-icons/illustrations/src/File.tsx b/packages/@spectrum-icons/illustrations/src/File.tsx
index fb582915d3c..6672b436294 100644
--- a/packages/@spectrum-icons/illustrations/src/File.tsx
+++ b/packages/@spectrum-icons/illustrations/src/File.tsx
@@ -1,7 +1,7 @@
 import {Illustration, IllustrationPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export default function File(props: IllustrationPropsWithoutChildren) {
+export default function File(props: IllustrationPropsWithoutChildren): JSX.Element {
   return (
     <Illustration {...props}>
       <svg viewBox="0 0 32 32" height="32" width="32">
diff --git a/packages/@spectrum-icons/illustrations/src/Folder.tsx b/packages/@spectrum-icons/illustrations/src/Folder.tsx
index b622b6a186c..8aac3d22b72 100644
--- a/packages/@spectrum-icons/illustrations/src/Folder.tsx
+++ b/packages/@spectrum-icons/illustrations/src/Folder.tsx
@@ -1,7 +1,7 @@
 import {Illustration, IllustrationPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export default function File(props: IllustrationPropsWithoutChildren) {
+export default function File(props: IllustrationPropsWithoutChildren): JSX.Element {
   return (
     <Illustration {...props}>
       <svg viewBox="0 0 32 32" height="32" width="32">
diff --git a/packages/@spectrum-icons/illustrations/src/NoSearchResults.tsx b/packages/@spectrum-icons/illustrations/src/NoSearchResults.tsx
index b9fcd2ce537..0376782a4a6 100644
--- a/packages/@spectrum-icons/illustrations/src/NoSearchResults.tsx
+++ b/packages/@spectrum-icons/illustrations/src/NoSearchResults.tsx
@@ -1,7 +1,7 @@
 import {Illustration, IllustrationPropsWithoutChildren} from "@react-spectrum/icon";
-import React from "react";
+import React, {JSX} from "react";
 
-export default function NoSearchResults(props: IllustrationPropsWithoutChildren) {
+export default function NoSearchResults(props: IllustrationPropsWithoutChildren): JSX.Element {
   return (
     <Illustration {...props}>
       <svg xmlns="http://www.w3.org/2000/svg" width="99.039" height="94.342">
diff --git a/packages/@spectrum-icons/illustrations/src/NotFound.tsx b/packages/@spectrum-icons/illustrations/src/NotFound.tsx
index caf1537f5b1..f0904063f25 100644
--- a/packages/@spectrum-icons/illustrations/src/NotFound.tsx
+++ b/packages/@spectrum-icons/illustrations/src/NotFound.tsx
@@ -1,7 +1,7 @@
 import {Illustration, IllustrationPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export default function Error404(props: IllustrationPropsWithoutChildren) {
+export default function Error404(props: IllustrationPropsWithoutChildren): JSX.Element {
   return (
     <Illustration {...props}>
       <svg width="135.321" height="87">
diff --git a/packages/@spectrum-icons/illustrations/src/Timeout.tsx b/packages/@spectrum-icons/illustrations/src/Timeout.tsx
index 165ad33ee95..f991ed972e9 100644
--- a/packages/@spectrum-icons/illustrations/src/Timeout.tsx
+++ b/packages/@spectrum-icons/illustrations/src/Timeout.tsx
@@ -1,7 +1,7 @@
 import {Illustration, IllustrationPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export default function Error504(props: IllustrationPropsWithoutChildren) {
+export default function Error504(props: IllustrationPropsWithoutChildren): JSX.Element {
   return (
     <Illustration {...props}>
       <svg width="137" height="94">
diff --git a/packages/@spectrum-icons/illustrations/src/Unauthorized.tsx b/packages/@spectrum-icons/illustrations/src/Unauthorized.tsx
index d2ed20b34b2..ba7c1f3d078 100644
--- a/packages/@spectrum-icons/illustrations/src/Unauthorized.tsx
+++ b/packages/@spectrum-icons/illustrations/src/Unauthorized.tsx
@@ -1,7 +1,7 @@
 import {Illustration, IllustrationPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export default function Error403(props: IllustrationPropsWithoutChildren) {
+export default function Error403(props: IllustrationPropsWithoutChildren): JSX.Element {
   return (
     <Illustration {...props}>
       <svg width="125" height="87">
diff --git a/packages/@spectrum-icons/illustrations/src/Unavailable.tsx b/packages/@spectrum-icons/illustrations/src/Unavailable.tsx
index 614fc17cf23..4c98d7a8ef5 100644
--- a/packages/@spectrum-icons/illustrations/src/Unavailable.tsx
+++ b/packages/@spectrum-icons/illustrations/src/Unavailable.tsx
@@ -1,7 +1,7 @@
 import {Illustration, IllustrationPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export default function Error503(props: IllustrationPropsWithoutChildren) {
+export default function Error503(props: IllustrationPropsWithoutChildren): JSX.Element {
   return (
     <Illustration {...props}>
       <svg width="143.1" height="94">
diff --git a/packages/@spectrum-icons/illustrations/src/Upload.tsx b/packages/@spectrum-icons/illustrations/src/Upload.tsx
index cafeb7fef5d..fcb51b561f2 100644
--- a/packages/@spectrum-icons/illustrations/src/Upload.tsx
+++ b/packages/@spectrum-icons/illustrations/src/Upload.tsx
@@ -1,7 +1,7 @@
 import {Illustration, IllustrationPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export default function Error504(props: IllustrationPropsWithoutChildren) {
+export default function Error504(props: IllustrationPropsWithoutChildren): JSX.Element {
   return (
     <Illustration {...props}>
       <svg width="191.2" height="97.9">
diff --git a/packages/@spectrum-icons/ui/scripts/generateIcons.cjs b/packages/@spectrum-icons/ui/scripts/generateIcons.cjs
index 6d7822853af..ccf6eeb3a9d 100644
--- a/packages/@spectrum-icons/ui/scripts/generateIcons.cjs
+++ b/packages/@spectrum-icons/ui/scripts/generateIcons.cjs
@@ -39,13 +39,13 @@ function template(iconName) {
 `import {${iconName} as IconComponent} from '@adobe/react-spectrum-ui/dist/${iconName}.js';
 import {UIIcon, UIIconPropsWithoutChildren} from '@react-spectrum/icon';
 import {useProvider} from '@react-spectrum/provider';
-import React from 'react';
+import React, {JSX} from 'react';
 
 ${jsx}
 
 ExpressIcon.displayName = IconComponent.displayName;
 
-export default function ${iconName}(props: UIIconPropsWithoutChildren) {
+export default function ${iconName}(props: UIIconPropsWithoutChildren): JSX.Element {
   let provider;
   try {
     provider = useProvider();
@@ -61,9 +61,9 @@ export default function ${iconName}(props: UIIconPropsWithoutChildren) {
   return (
 `import {${iconName} as IconComponent} from '@adobe/react-spectrum-ui/dist/${iconName}.js';
 import {UIIcon, UIIconPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export default function ${iconName}(props: UIIconPropsWithoutChildren) {
+export default function ${iconName}(props: UIIconPropsWithoutChildren): JSX.Element {
   return <UIIcon {...props}><IconComponent /></UIIcon>;
 }
 `
diff --git a/packages/@spectrum-icons/workflow/scripts/generateIcons.cjs b/packages/@spectrum-icons/workflow/scripts/generateIcons.cjs
index c8311efafa1..0bbed3c8157 100644
--- a/packages/@spectrum-icons/workflow/scripts/generateIcons.cjs
+++ b/packages/@spectrum-icons/workflow/scripts/generateIcons.cjs
@@ -24,9 +24,9 @@ function template(iconName) {
   return (
 `import {${iconName} as IconComponent} from '@adobe/react-spectrum-workflow/dist/${importName}.js';
 import {Icon, IconPropsWithoutChildren} from '@react-spectrum/icon';
-import React from 'react';
+import React, {JSX} from 'react';
 
-export default function ${iconRename}(props: IconPropsWithoutChildren) {
+export default function ${iconRename}(props: IconPropsWithoutChildren): JSX.Element {
   return <Icon {...props}><IconComponent /></Icon>;
 }
 `
diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
index 0ecd739b676..a4f85539bc7 100644
--- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
+++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
@@ -48,13 +48,13 @@ const allColumns: ColumnProps[] = [
 
 let hideOnScroll = document.getElementById('hideOnScroll');
 
-export function ExampleApp() {
+export function ExampleApp(): React.ReactNode {
   let [sortDescriptor, setSortDescriptor] = useState<SortDescriptor>({
     column: 'common_name',
     direction: 'ascending'
   });
 
-  let [allItems, setAllItems] = useState(() => plants.map(p => ({...p, isFavorite: false})));
+  let [allItems, setAllItems] = useState<Plant[]>(() => plants.map(p => ({...p, isFavorite: false})));
   let [search, setSearch] = useState('');
   let [favorite, setFavorite] = useState(false);
   let [cycles, setCycles] = useState<Selection>(new Set());
@@ -433,7 +433,7 @@ function PlantDialog({item, onSave}: {item?: Plant | null, onSave: (item: Plant)
                 <input type="hidden" name="image" value={droppedImage} />
               </DropZone>
               <div className="flex flex-col gap-3 flex-1 min-w-0">
-                <ComboBox label="Common Name" name="common_name" isRequired items={plants} defaultInputValue={item?.common_name} allowsCustomValue autoFocus={navigator.maxTouchPoints === 0}>
+                <ComboBox<Plant> label="Common Name" name="common_name" isRequired items={plants} defaultInputValue={item?.common_name} allowsCustomValue autoFocus={navigator.maxTouchPoints === 0}>
                   {plant => <ComboBoxItem>{plant.common_name}</ComboBoxItem>}
                 </ComboBox>
                 <TextField label="Scientific Name" name="scientific_name" isRequired defaultValue={item?.scientific_name?.join('')} />
diff --git a/packages/dev/test-utils/src/renderOverride.js b/packages/dev/test-utils/src/renderOverride.tsx
similarity index 53%
rename from packages/dev/test-utils/src/renderOverride.js
rename to packages/dev/test-utils/src/renderOverride.tsx
index 574548a94fb..fdeffc383c3 100644
--- a/packages/dev/test-utils/src/renderOverride.js
+++ b/packages/dev/test-utils/src/renderOverride.tsx
@@ -10,34 +10,30 @@
  * governing permissions and limitations under the License.
  */
 
-import {Provider} from '@react-spectrum/provider';
+import {Provider, ProviderProps} from '@react-spectrum/provider';
 import React from 'react';
 import {render} from '@testing-library/react';
 import {StrictModeWrapper} from './StrictModeWrapper';
 import {theme} from '@react-spectrum/theme-default';
 
-let reactTestingLibrary = require('@testing-library/react');
+export {renderHook, act, act as actHook, fireEvent, within, screen, waitFor} from '@testing-library/react';
 
-// export everything
-export * from '@testing-library/react';
-
-// export renderHook and actHook from testing-library/react-hooks library if they don't exist in @testing-library/react
-// (i.e. renderHook is only in v13+ of testing library)
-export let renderHook = reactTestingLibrary.renderHook;
-export let actHook = reactTestingLibrary.act;
-if (!renderHook) {
-  let rhtl = require('@testing-library/react-hooks');
-  renderHook = rhtl.renderHook;
-  actHook = rhtl.act;
-}
-
-function customRender(ui, options) {
+function customRender(ui: Parameters<typeof render>[0], options?: Parameters<typeof render>[1] | undefined): ReturnType<typeof render> {
   return render(ui, {wrapper: StrictModeWrapper, ...options});
 }
 
 // override render method with
 export {customRender as render};
 
-export function renderv3(ui, options, providerProps) {
-  return render(ui, {wrapper: (props) => <Provider theme={theme} {...providerProps}><StrictModeWrapper {...props} /></Provider>, ...options});
+export function renderv3(ui: Parameters<typeof render>[0], options?: Parameters<typeof render>[1] | undefined, providerProps?: ProviderProps | undefined): ReturnType<typeof render> {
+  return render(ui, {
+    wrapper: (props: React.PropsWithChildren) => (
+      <Provider
+        theme={theme}
+        {...providerProps}>
+        <StrictModeWrapper {...props} />
+      </Provider>
+    ),
+    ...options
+  });
 }
diff --git a/packages/dev/test-utils/src/shadowDOM.js b/packages/dev/test-utils/src/shadowDOM.ts
similarity index 79%
rename from packages/dev/test-utils/src/shadowDOM.js
rename to packages/dev/test-utils/src/shadowDOM.ts
index 84a2b06746e..ee41da0f5d0 100644
--- a/packages/dev/test-utils/src/shadowDOM.js
+++ b/packages/dev/test-utils/src/shadowDOM.ts
@@ -10,7 +10,13 @@
  * governing permissions and limitations under the License.
  */
 
-export function createShadowRoot(attachTo = document.body) {
+interface ShadowRootReturnValue {
+  shadowHost: HTMLElement,
+  shadowRoot: ShadowRoot,
+  cleanup: () => void
+}
+
+export function createShadowRoot(attachTo: HTMLElement = document.body): ShadowRootReturnValue {
   const div = document.createElement('div');
   attachTo.appendChild(div);
   const shadowRoot = div.attachShadow({mode: 'open'});
diff --git a/packages/dev/test-utils/src/testSSR.js b/packages/dev/test-utils/src/testSSR.tsx
similarity index 90%
rename from packages/dev/test-utils/src/testSSR.js
rename to packages/dev/test-utils/src/testSSR.tsx
index 77da5f71b8a..0695dd99e14 100644
--- a/packages/dev/test-utils/src/testSSR.js
+++ b/packages/dev/test-utils/src/testSSR.tsx
@@ -30,7 +30,7 @@ try {
   // ignore.
 }
 
-export async function testSSR(filename, source, runAfterServer) {
+export async function testSSR(filename: string, source: string, runAfterServer?: () => void): Promise<void> {
   // Transform the code with babel so JSX becomes JS.
   source = babel.transformSync(source, {filename, plugins: ['@babel/plugin-syntax-import-attributes']}).code;
 
@@ -58,7 +58,7 @@ export async function testSSR(filename, source, runAfterServer) {
         }
 
         // Capture React errors/warning and make them fail the tests.
-        let errors = [];
+        let errors: string[] = [];
         console.error = console.warn = (...messages) => {
           errors.push(util.format(...messages));
         };
@@ -72,9 +72,9 @@ export async function testSSR(filename, source, runAfterServer) {
           if (ReactDOMClient) {
             act(() => ReactDOMClient.hydrateRoot(container, <SSRProvider>{element}</SSRProvider>));
           } else {
-            act(() => {ReactDOM.hydrate(<SSRProvider>{element}</SSRProvider>, container);});
+            act(() => {(ReactDOM as any).hydrate(<SSRProvider>{element}</SSRProvider>, container);});
           }
-        } catch (err) {
+        } catch (err: any) {
           errors.push(err.stack);
         }
 
diff --git a/scripts/generateS2IconIndex.js b/scripts/generateS2IconIndex.js
index a7af51f6e37..b2435de05a9 100644
--- a/scripts/generateS2IconIndex.js
+++ b/scripts/generateS2IconIndex.js
@@ -124,7 +124,7 @@ let styles = style({
     }
 
     src += `
-export default function ${importName}(props: ${type} & {size?: ${Object.keys(sizes).map(s => `'${s}'`).join(' | ')}})${isIllustration ? '' : ': ReactNode'} {
+export default function ${importName}(props: ${type} & {size?: ${Object.keys(sizes).map(s => `'${s}'`).join(' | ')}}): ReactNode {
   ${ctx}let {size = 'M', ...otherProps} = props;
   switch (size) {${Object.keys(sizes).map(size => `
     case '${size}':

From 839a3114737cf6f896547619e343bb9fee28c3d3 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 10 Jun 2025 16:48:37 +1000
Subject: [PATCH 2/8] fix s2 illustrations

---
 .../s2/spectrum-illustrations/gradient/generic1/3D.tsx       | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/3Dasset.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic1/AIGenerate.tsx  | 3 ++-
 .../gradient/generic1/AIGenerateImage.tsx                    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/AIchat.tsx   | 3 ++-
 .../gradient/generic1/Accessibility.tsx                      | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Animation.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Apps.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Artboard.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Assets.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/AudioWave.tsx   | 3 ++-
 .../gradient/generic1/BadgeVerified.tsx                      | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Bell.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Bolt.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Brand.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Briefcase.tsx   | 3 ++-
 .../gradient/generic1/BrightnessContrast.tsx                 | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Browser.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Brush.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic1/BuildTable.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Buildings.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Calendar.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Camera.tsx   | 3 ++-
 .../gradient/generic1/CardTapPayment.tsx                     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Channel.tsx  | 3 ++-
 .../gradient/generic1/ChartAreaStack.tsx                     | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Chatbubble.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Checkmark.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Clipboard.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Clock.tsx    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Cloud.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic1/CloudUpload.tsx | 3 ++-
 .../gradient/generic1/CodeBrackets.tsx                       | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Color.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic1/CommentText.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Confetti.tsx | 3 ++-
 .../gradient/generic1/Conversationbubbles.tsx                | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Crop.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Cursor.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Cut.tsx      | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Data.tsx     | 3 ++-
 .../gradient/generic1/DataAnalytics.tsx                      | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Desktop.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Diamond.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Document.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Download.tsx | 3 ++-
 .../gradient/generic1/DropToUpload.tsx                       | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Education.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Effects.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Emoji.tsx    | 3 ++-
 .../gradient/generic1/EmptyStateExport.tsx                   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Explosion.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/ExportTo.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Exposure.tsx | 3 ++-
 .../spectrum-illustrations/gradient/generic1/FileImage.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/FileShared.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/FileText.tsx | 3 ++-
 .../spectrum-illustrations/gradient/generic1/FileVideo.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/FileZip.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Filmstrip.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Filter.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Filters.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Fireworks.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Flag.tsx     | 3 ++-
 .../gradient/generic1/FlagCheckmark.tsx                      | 3 ++-
 .../spectrum-illustrations/gradient/generic1/FlagCross.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/FolderClose.tsx | 3 ++-
 .../spectrum-illustrations/gradient/generic1/FolderOpen.tsx  | 3 ++-
 .../gradient/generic1/FolderShared.tsx                       | 3 ++-
 .../spectrum-illustrations/gradient/generic1/GearSetting.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Gift.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Globe.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic1/GlobeGrid.tsx   | 3 ++-
 .../gradient/generic1/GraphBarChart.tsx                      | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Hand.tsx     | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Handshake.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Heart.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic1/HelpCircle.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Home.tsx     | 3 ++-
 .../gradient/generic1/Illustration.tsx                       | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Image.tsx    | 5 +++--
 .../spectrum-illustrations/gradient/generic1/ImageStack.tsx  | 5 +++--
 .../gradient/generic1/InfiniteLooping.tsx                    | 5 +++--
 .../spectrum-illustrations/gradient/generic1/Information.tsx | 5 +++--
 .../spectrum-illustrations/gradient/generic1/Interaction.tsx | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Laptop.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Layers.tsx   | 5 +++--
 .../spectrum-illustrations/gradient/generic1/Libraries.tsx   | 5 +++--
 .../spectrum-illustrations/gradient/generic1/Lightbulb.tsx   | 5 +++--
 .../gradient/generic1/LightbulbRays.tsx                      | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Lighten.tsx  | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Link.tsx     | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Location.tsx | 5 +++--
 .../spectrum-illustrations/gradient/generic1/LockClose.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/LockOpen.tsx | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Logo.tsx     | 5 +++--
 .../spectrum-illustrations/gradient/generic1/MagicWand.tsx   | 5 +++--
 .../spectrum-illustrations/gradient/generic1/MailClose.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/MailOpen.tsx | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Market.tsx   | 5 +++--
 .../gradient/generic1/MegaphonePromote.tsx                   | 5 +++--
 .../gradient/generic1/MegaphonePromote2.tsx                  | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Mention.tsx  | 5 +++--
 .../spectrum-illustrations/gradient/generic1/Microphone.tsx  | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Minimize.tsx | 5 +++--
 .../spectrum-illustrations/gradient/generic1/MovieCamera.tsx | 5 +++--
 .../spectrum-illustrations/gradient/generic1/MusicNote.tsx   | 5 +++--
 .../spectrum-illustrations/gradient/generic1/NoElements.tsx  | 5 +++--
 .../gradient/generic1/Paperairplane.tsx                      | 5 +++--
 .../spectrum-illustrations/gradient/generic1/Paperclip.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Pause.tsx    | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Pencil.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Phone.tsx    | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/PieChart.tsx | 5 +++--
 .../spectrum-illustrations/gradient/generic1/PiggyBank.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Pin.tsx      | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Play.tsx     | 5 +++--
 .../gradient/generic1/PlayTriangle.tsx                       | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Plugin.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Prompt.tsx   | 5 +++--
 .../spectrum-illustrations/gradient/generic1/Properties.tsx  | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic1/Redo.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Remix.tsx    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Replace.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Revert.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Ribbon.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Rocket.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/RotateCCW.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/RotateCW.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Ruler.tsx    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Search.tsx   | 3 ++-
 .../gradient/generic1/Segmentation.tsx                       | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Server.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Shapes.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/ShoppingBag.tsx | 3 ++-
 .../gradient/generic1/ShoppingCart.tsx                       | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Sparkles.tsx | 3 ++-
 .../spectrum-illustrations/gradient/generic1/SpeedFast.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/StampClone.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Star.tsx     | 3 ++-
 .../spectrum-illustrations/gradient/generic1/StepForward.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Switch.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Tablet.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Tag.tsx      | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Targeted.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Text.tsx     | 3 ++-
 .../gradient/generic1/ThreeArrowsCircle.tsx                  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/ThumbsUp.tsx | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Transform.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/Translate.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Trash.tsx    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Trophy.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Update.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Upload.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/User.tsx     | 3 ++-
 .../spectrum-illustrations/gradient/generic1/UserAvatar.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic1/UserGroup.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/VectorDraw.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Video.tsx    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Volume.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic1/VolumeOne.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic1/Wallet.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/3D.tsx       | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/3Dasset.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic2/AIGenerate.tsx  | 3 ++-
 .../gradient/generic2/AIGenerateImage.tsx                    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/AIchat.tsx   | 3 ++-
 .../gradient/generic2/Accessibility.tsx                      | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Animation.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Apps.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Artboard.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Assets.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/AudioWave.tsx   | 3 ++-
 .../gradient/generic2/BadgeVerified.tsx                      | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Bell.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Bolt.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Brand.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Briefcase.tsx   | 3 ++-
 .../gradient/generic2/BrightnessContrast.tsx                 | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Browser.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Brush.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic2/BuildTable.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Buildings.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Calendar.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Camera.tsx   | 3 ++-
 .../gradient/generic2/CardTapPayment.tsx                     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Channel.tsx  | 3 ++-
 .../gradient/generic2/ChartAreaStack.tsx                     | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Chatbubble.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Checkmark.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Clipboard.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Clock.tsx    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Cloud.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic2/CloudUpload.tsx | 3 ++-
 .../gradient/generic2/CodeBrackets.tsx                       | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Color.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic2/CommentText.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Confetti.tsx | 3 ++-
 .../gradient/generic2/Conversationbubbles.tsx                | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Crop.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Cursor.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Cut.tsx      | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Data.tsx     | 3 ++-
 .../gradient/generic2/DataAnalytics.tsx                      | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Desktop.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Diamond.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Document.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Download.tsx | 3 ++-
 .../gradient/generic2/DropToUpload.tsx                       | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Education.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Effects.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Emoji.tsx    | 3 ++-
 .../gradient/generic2/EmptyStateExport.tsx                   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Explosion.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/ExportTo.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Exposure.tsx | 3 ++-
 .../spectrum-illustrations/gradient/generic2/FileImage.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/FileShared.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/FileText.tsx | 3 ++-
 .../spectrum-illustrations/gradient/generic2/FileVideo.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/FileZip.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Filmstrip.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Filter.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Filters.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Fireworks.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Flag.tsx     | 3 ++-
 .../gradient/generic2/FlagCheckmark.tsx                      | 3 ++-
 .../spectrum-illustrations/gradient/generic2/FlagCross.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/FolderClose.tsx | 3 ++-
 .../spectrum-illustrations/gradient/generic2/FolderOpen.tsx  | 3 ++-
 .../gradient/generic2/FolderShared.tsx                       | 3 ++-
 .../spectrum-illustrations/gradient/generic2/GearSetting.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Gift.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Globe.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic2/GlobeGrid.tsx   | 3 ++-
 .../gradient/generic2/GraphBarChart.tsx                      | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Hand.tsx     | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Handshake.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Heart.tsx    | 3 ++-
 .../spectrum-illustrations/gradient/generic2/HelpCircle.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Home.tsx     | 3 ++-
 .../gradient/generic2/Illustration.tsx                       | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Image.tsx    | 5 +++--
 .../spectrum-illustrations/gradient/generic2/ImageStack.tsx  | 5 +++--
 .../gradient/generic2/InfiniteLooping.tsx                    | 5 +++--
 .../spectrum-illustrations/gradient/generic2/Information.tsx | 5 +++--
 .../spectrum-illustrations/gradient/generic2/Interaction.tsx | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Laptop.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Layers.tsx   | 5 +++--
 .../spectrum-illustrations/gradient/generic2/Libraries.tsx   | 5 +++--
 .../spectrum-illustrations/gradient/generic2/Lightbulb.tsx   | 5 +++--
 .../gradient/generic2/LightbulbRays.tsx                      | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Lighten.tsx  | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Link.tsx     | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Location.tsx | 5 +++--
 .../spectrum-illustrations/gradient/generic2/LockClose.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/LockOpen.tsx | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Logo.tsx     | 5 +++--
 .../spectrum-illustrations/gradient/generic2/MagicWand.tsx   | 5 +++--
 .../spectrum-illustrations/gradient/generic2/MailClose.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/MailOpen.tsx | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Market.tsx   | 5 +++--
 .../gradient/generic2/MegaphonePromote.tsx                   | 5 +++--
 .../gradient/generic2/MegaphonePromote2.tsx                  | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Mention.tsx  | 5 +++--
 .../spectrum-illustrations/gradient/generic2/Microphone.tsx  | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Minimize.tsx | 5 +++--
 .../spectrum-illustrations/gradient/generic2/MovieCamera.tsx | 5 +++--
 .../spectrum-illustrations/gradient/generic2/MusicNote.tsx   | 5 +++--
 .../spectrum-illustrations/gradient/generic2/NoElements.tsx  | 5 +++--
 .../gradient/generic2/Paperairplane.tsx                      | 5 +++--
 .../spectrum-illustrations/gradient/generic2/Paperclip.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Pause.tsx    | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Pencil.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Phone.tsx    | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/PieChart.tsx | 5 +++--
 .../spectrum-illustrations/gradient/generic2/PiggyBank.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Pin.tsx      | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Play.tsx     | 5 +++--
 .../gradient/generic2/PlayTriangle.tsx                       | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Plugin.tsx   | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Prompt.tsx   | 5 +++--
 .../spectrum-illustrations/gradient/generic2/Properties.tsx  | 5 +++--
 .../s2/spectrum-illustrations/gradient/generic2/Redo.tsx     | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Remix.tsx    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Replace.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Revert.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Ribbon.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Rocket.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/RotateCCW.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/RotateCW.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Ruler.tsx    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Search.tsx   | 3 ++-
 .../gradient/generic2/Segmentation.tsx                       | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Server.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Shapes.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/ShoppingBag.tsx | 3 ++-
 .../gradient/generic2/ShoppingCart.tsx                       | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Sparkles.tsx | 3 ++-
 .../spectrum-illustrations/gradient/generic2/SpeedFast.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/StampClone.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Star.tsx     | 3 ++-
 .../spectrum-illustrations/gradient/generic2/StepForward.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Switch.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Tablet.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Tag.tsx      | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Targeted.tsx | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Text.tsx     | 3 ++-
 .../gradient/generic2/ThreeArrowsCircle.tsx                  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/ThumbsUp.tsx | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Transform.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/Translate.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Trash.tsx    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Trophy.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Update.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Upload.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/User.tsx     | 3 ++-
 .../spectrum-illustrations/gradient/generic2/UserAvatar.tsx  | 3 ++-
 .../spectrum-illustrations/gradient/generic2/UserGroup.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/VectorDraw.tsx  | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Video.tsx    | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Volume.tsx   | 3 ++-
 .../spectrum-illustrations/gradient/generic2/VolumeOne.tsx   | 3 ++-
 .../s2/spectrum-illustrations/gradient/generic2/Wallet.tsx   | 3 ++-
 .../@react-spectrum/s2/spectrum-illustrations/linear/3D.tsx  | 3 ++-
 .../s2/spectrum-illustrations/linear/3Dasset.tsx             | 3 ++-
 .../s2/spectrum-illustrations/linear/AIChat.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/AIGenerate.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/AIGenerateImage.tsx     | 3 ++-
 .../s2/spectrum-illustrations/linear/Accessibility.tsx       | 3 ++-
 .../s2/spectrum-illustrations/linear/Addproject.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/AlertNotice.tsx         | 3 ++-
 .../s2/spectrum-illustrations/linear/Animation.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Apps.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/ArrowDown.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/ArrowLeft.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/ArrowRight.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/ArrowUp.tsx             | 3 ++-
 .../s2/spectrum-illustrations/linear/Artboard.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/Assets.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/AudioWave.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/BadgeVerified.tsx       | 3 ++-
 .../s2/spectrum-illustrations/linear/Bell.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/Bolt.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/Brand.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/Briefcase.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/BrightnessContrast.tsx  | 3 ++-
 .../s2/spectrum-illustrations/linear/Browser.tsx             | 3 ++-
 .../s2/spectrum-illustrations/linear/BrowserError.tsx        | 3 ++-
 .../spectrum-illustrations/linear/BrowserNotCompatible.tsx   | 3 ++-
 .../s2/spectrum-illustrations/linear/Brush.tsx               | 3 ++-
 .../@react-spectrum/s2/spectrum-illustrations/linear/Bug.tsx | 3 ++-
 .../s2/spectrum-illustrations/linear/BuildTable.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/Buildings.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Calendar.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/Camera.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/CardTapPayment.tsx      | 3 ++-
 .../s2/spectrum-illustrations/linear/Channel.tsx             | 3 ++-
 .../s2/spectrum-illustrations/linear/ChartAreaStack.tsx      | 3 ++-
 .../s2/spectrum-illustrations/linear/Chatbubble.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/Check.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/Clipboard.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Clock.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/Close.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/Cloud.tsx               | 3 ++-
 .../spectrum-illustrations/linear/CloudStateDisconnected.tsx | 3 ++-
 .../s2/spectrum-illustrations/linear/CloudStateError.tsx     | 3 ++-
 .../s2/spectrum-illustrations/linear/CloudUpload.tsx         | 3 ++-
 .../s2/spectrum-illustrations/linear/CodeBrackets.tsx        | 3 ++-
 .../s2/spectrum-illustrations/linear/Color.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/CommentText.tsx         | 3 ++-
 .../s2/spectrum-illustrations/linear/ConfettiCelebration.tsx | 3 ++-
 .../s2/spectrum-illustrations/linear/Conversationbubbles.tsx | 3 ++-
 .../s2/spectrum-illustrations/linear/Crop.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/Cursor.tsx              | 3 ++-
 .../@react-spectrum/s2/spectrum-illustrations/linear/Cut.tsx | 3 ++-
 .../s2/spectrum-illustrations/linear/Data.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/DataAnalytics.tsx       | 3 ++-
 .../s2/spectrum-illustrations/linear/Desktop.tsx             | 3 ++-
 .../s2/spectrum-illustrations/linear/Diamond.tsx             | 3 ++-
 .../s2/spectrum-illustrations/linear/Document.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/Download.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/DropToUpload.tsx        | 3 ++-
 .../s2/spectrum-illustrations/linear/Education.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Effects.tsx             | 3 ++-
 .../s2/spectrum-illustrations/linear/Emoji160.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/EmptyStateExport.tsx    | 3 ++-
 .../s2/spectrum-illustrations/linear/Error.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/Explosion.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/ExportTo.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/Exposure.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/FileAlert.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/FileImage.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/FileText.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/FileVideo.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/FileZip.tsx             | 3 ++-
 .../s2/spectrum-illustrations/linear/Filmstrip.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Filter.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/Filters.tsx             | 3 ++-
 .../s2/spectrum-illustrations/linear/Fireworks.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Flag.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/FlagCheckmark.tsx       | 3 ++-
 .../s2/spectrum-illustrations/linear/FlagCross.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/FolderClose.tsx         | 3 ++-
 .../s2/spectrum-illustrations/linear/FolderOpen.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/FolderShared.tsx        | 3 ++-
 .../s2/spectrum-illustrations/linear/GearSetting.tsx         | 3 ++-
 .../s2/spectrum-illustrations/linear/Gift.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/Globe.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/GlobeGrid.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/GraphBarChart.tsx       | 3 ++-
 .../s2/spectrum-illustrations/linear/Hand.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/Handshake.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Heart.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/HelpCircle.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/Home.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/Illustration.tsx        | 5 +++--
 .../s2/spectrum-illustrations/linear/Image.tsx               | 5 +++--
 .../s2/spectrum-illustrations/linear/ImageStack.tsx          | 5 +++--
 .../s2/spectrum-illustrations/linear/InfiniteLooping.tsx     | 5 +++--
 .../s2/spectrum-illustrations/linear/Information.tsx         | 5 +++--
 .../s2/spectrum-illustrations/linear/Interaction.tsx         | 5 +++--
 .../s2/spectrum-illustrations/linear/Laptop.tsx              | 5 +++--
 .../s2/spectrum-illustrations/linear/Layers.tsx              | 5 +++--
 .../s2/spectrum-illustrations/linear/Libraries.tsx           | 5 +++--
 .../s2/spectrum-illustrations/linear/Lightbulb.tsx           | 5 +++--
 .../s2/spectrum-illustrations/linear/LightbulbRays.tsx       | 5 +++--
 .../s2/spectrum-illustrations/linear/Lighten.tsx             | 5 +++--
 .../s2/spectrum-illustrations/linear/Link.tsx                | 5 +++--
 .../s2/spectrum-illustrations/linear/Location.tsx            | 5 +++--
 .../s2/spectrum-illustrations/linear/LockClose.tsx           | 5 +++--
 .../s2/spectrum-illustrations/linear/LockOpen.tsx            | 5 +++--
 .../s2/spectrum-illustrations/linear/Logo.tsx                | 5 +++--
 .../s2/spectrum-illustrations/linear/MagicWand.tsx           | 5 +++--
 .../s2/spectrum-illustrations/linear/MailClose.tsx           | 5 +++--
 .../s2/spectrum-illustrations/linear/MailOpen.tsx            | 5 +++--
 .../s2/spectrum-illustrations/linear/Market.tsx              | 5 +++--
 .../s2/spectrum-illustrations/linear/MegaphonePromote.tsx    | 5 +++--
 .../linear/MegaphonePromoteExpressive.tsx                    | 5 +++--
 .../s2/spectrum-illustrations/linear/Mention.tsx             | 5 +++--
 .../s2/spectrum-illustrations/linear/Microphone.tsx          | 5 +++--
 .../s2/spectrum-illustrations/linear/MicrophoneOff.tsx       | 5 +++--
 .../s2/spectrum-illustrations/linear/Minimize.tsx            | 5 +++--
 .../s2/spectrum-illustrations/linear/MovieCamera.tsx         | 5 +++--
 .../s2/spectrum-illustrations/linear/MusicNote.tsx           | 5 +++--
 .../s2/spectrum-illustrations/linear/NoBrands.tsx            | 5 +++--
 .../s2/spectrum-illustrations/linear/NoComment.tsx           | 5 +++--
 .../s2/spectrum-illustrations/linear/NoComments.tsx          | 5 +++--
 .../s2/spectrum-illustrations/linear/NoElements.tsx          | 5 +++--
 .../s2/spectrum-illustrations/linear/NoFile.tsx              | 5 +++--
 .../s2/spectrum-illustrations/linear/NoFilter.tsx            | 5 +++--
 .../s2/spectrum-illustrations/linear/NoImage.tsx             | 5 +++--
 .../s2/spectrum-illustrations/linear/NoLibraries.tsx         | 5 +++--
 .../s2/spectrum-illustrations/linear/NoLibrariesBrands.tsx   | 5 +++--
 .../s2/spectrum-illustrations/linear/NoReviewLinks.tsx       | 5 +++--
 .../s2/spectrum-illustrations/linear/NoSearchResults.tsx     | 5 +++--
 .../s2/spectrum-illustrations/linear/NoSharedFile.tsx        | 5 +++--
 .../s2/spectrum-illustrations/linear/Paperairplane.tsx       | 5 +++--
 .../s2/spectrum-illustrations/linear/Paperclip.tsx           | 5 +++--
 .../s2/spectrum-illustrations/linear/Pause.tsx               | 5 +++--
 .../s2/spectrum-illustrations/linear/Pencil.tsx              | 5 +++--
 .../s2/spectrum-illustrations/linear/Phone.tsx               | 5 +++--
 .../s2/spectrum-illustrations/linear/PieChart.tsx            | 5 +++--
 .../s2/spectrum-illustrations/linear/PiggyBank.tsx           | 5 +++--
 .../@react-spectrum/s2/spectrum-illustrations/linear/Pin.tsx | 5 +++--
 .../s2/spectrum-illustrations/linear/Play.tsx                | 5 +++--
 .../s2/spectrum-illustrations/linear/PlayTriangle.tsx        | 5 +++--
 .../s2/spectrum-illustrations/linear/Plugin.tsx              | 5 +++--
 .../s2/spectrum-illustrations/linear/Prompt.tsx              | 5 +++--
 .../s2/spectrum-illustrations/linear/Properties.tsx          | 5 +++--
 .../s2/spectrum-illustrations/linear/Redo.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/Remix.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/Replace.tsx             | 3 ++-
 .../s2/spectrum-illustrations/linear/ReportAbuse.tsx         | 3 ++-
 .../s2/spectrum-illustrations/linear/Revert.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/Ribbon.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/Rocket.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/RotateCCW.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/RotateCW.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/Ruler.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/Search.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/Segmentation.tsx        | 3 ++-
 .../s2/spectrum-illustrations/linear/Server.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/Shapes.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/ShoppingBag.tsx         | 3 ++-
 .../s2/spectrum-illustrations/linear/ShoppingCart.tsx        | 3 ++-
 .../s2/spectrum-illustrations/linear/Sparkles.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/SpeedFast.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/StampClone.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/Star.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/StepForward.tsx         | 3 ++-
 .../s2/spectrum-illustrations/linear/Stopwatch.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Switch.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/Tablet.tsx              | 3 ++-
 .../@react-spectrum/s2/spectrum-illustrations/linear/Tag.tsx | 3 ++-
 .../s2/spectrum-illustrations/linear/Targeted.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/Text.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/ThreeArrowsCircle.tsx   | 3 ++-
 .../s2/spectrum-illustrations/linear/ThumbsDown.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/ThumbsUp.tsx            | 3 ++-
 .../s2/spectrum-illustrations/linear/Transform.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Translate.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Trash.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/Trophy.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/Update.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/Upload.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/User.tsx                | 3 ++-
 .../s2/spectrum-illustrations/linear/UserAvatar.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/UserGroup.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/VectorDraw.tsx          | 3 ++-
 .../s2/spectrum-illustrations/linear/Video.tsx               | 3 ++-
 .../s2/spectrum-illustrations/linear/Volume.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/VolumeOff.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/VolumeOne.tsx           | 3 ++-
 .../s2/spectrum-illustrations/linear/Wallet.tsx              | 3 ++-
 .../s2/spectrum-illustrations/linear/Warning.tsx             | 3 ++-
 scripts/generateS2IconIndex.js                               | 3 ++-
 517 files changed, 1172 insertions(+), 655 deletions(-)

diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3D.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3D.tsx
index a56532c523e..9239fa9322c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3D.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3D.tsx
@@ -13,10 +13,11 @@
 import _3D_L from 'illustration:./S2_fill_3D_generic1_160.svg';
 import _3D_M from 'illustration:./S2_fill_3D_generic1_96.svg';
 import _3D_S from 'illustration:./S2_fill_3D_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function _3D(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function _3D(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3Dasset.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3Dasset.tsx
index f77a3b4e94c..3250052537f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3Dasset.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/3Dasset.tsx
@@ -13,10 +13,11 @@
 import _3Dasset_L from 'illustration:./S2_fill_3Dasset_generic1_160.svg';
 import _3Dasset_M from 'illustration:./S2_fill_3Dasset_generic1_96.svg';
 import _3Dasset_S from 'illustration:./S2_fill_3Dasset_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function _3Dasset(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function _3Dasset(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerate.tsx
index 8d522c30ac9..55f8f4d71b8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerate.tsx
@@ -13,10 +13,11 @@
 import AIGenerate_L from 'illustration:./S2_fill_AIGenerate_generic1_160.svg';
 import AIGenerate_M from 'illustration:./S2_fill_AIGenerate_generic1_96.svg';
 import AIGenerate_S from 'illustration:./S2_fill_AIGenerate_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AIGenerate(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AIGenerate(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerateImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerateImage.tsx
index 80de8e602bf..c5a32ff9c39 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerateImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIGenerateImage.tsx
@@ -13,10 +13,11 @@
 import AIGenerateImage_L from 'illustration:./S2_fill_AIGenerateImage_generic1_160.svg';
 import AIGenerateImage_M from 'illustration:./S2_fill_AIGenerateImage_generic1_96.svg';
 import AIGenerateImage_S from 'illustration:./S2_fill_AIGenerateImage_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AIGenerateImage(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AIGenerateImage(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIchat.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIchat.tsx
index 0b08b9ebc7d..72781349830 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIchat.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AIchat.tsx
@@ -13,10 +13,11 @@
 import AIchat_L from 'illustration:./S2_fill_AIchat_generic1_160.svg';
 import AIchat_M from 'illustration:./S2_fill_AIchat_generic1_96.svg';
 import AIchat_S from 'illustration:./S2_fill_AIchat_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AIchat(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AIchat(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Accessibility.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Accessibility.tsx
index f615950d046..3114aced332 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Accessibility.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Accessibility.tsx
@@ -13,10 +13,11 @@
 import Accessibility_L from 'illustration:./S2_fill_accessibility_generic1_160.svg';
 import Accessibility_M from 'illustration:./S2_fill_accessibility_generic1_96.svg';
 import Accessibility_S from 'illustration:./S2_fill_accessibility_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Accessibility(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Accessibility(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Animation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Animation.tsx
index e3ef8c386fc..f0c24c0da39 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Animation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Animation.tsx
@@ -13,10 +13,11 @@
 import Animation_L from 'illustration:./S2_fill_animation_generic1_160.svg';
 import Animation_M from 'illustration:./S2_fill_animation_generic1_96.svg';
 import Animation_S from 'illustration:./S2_fill_animation_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Animation(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Animation(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Apps.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Apps.tsx
index 8009b7da354..2ee5a949589 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Apps.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Apps.tsx
@@ -13,10 +13,11 @@
 import Apps_L from 'illustration:./S2_fill_apps_generic1_160.svg';
 import Apps_M from 'illustration:./S2_fill_apps_generic1_96.svg';
 import Apps_S from 'illustration:./S2_fill_apps_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Apps(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Apps(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Artboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Artboard.tsx
index 06ff630a809..068ec81b5ae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Artboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Artboard.tsx
@@ -13,10 +13,11 @@
 import Artboard_L from 'illustration:./S2_fill_artboard_generic1_160.svg';
 import Artboard_M from 'illustration:./S2_fill_artboard_generic1_96.svg';
 import Artboard_S from 'illustration:./S2_fill_artboard_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Artboard(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Artboard(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Assets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Assets.tsx
index 1f4746835db..6ba77e31fa6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Assets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Assets.tsx
@@ -13,10 +13,11 @@
 import Assets_L from 'illustration:./S2_fill_assets_generic1_160.svg';
 import Assets_M from 'illustration:./S2_fill_assets_generic1_96.svg';
 import Assets_S from 'illustration:./S2_fill_assets_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Assets(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Assets(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AudioWave.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AudioWave.tsx
index cb8bb0a648b..b410ba86511 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AudioWave.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/AudioWave.tsx
@@ -13,10 +13,11 @@
 import AudioWave_L from 'illustration:./S2_fill_audioWave_generic1_160.svg';
 import AudioWave_M from 'illustration:./S2_fill_audioWave_generic1_96.svg';
 import AudioWave_S from 'illustration:./S2_fill_audioWave_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AudioWave(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AudioWave(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BadgeVerified.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BadgeVerified.tsx
index 04e4f3bcdb8..3960726148a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BadgeVerified.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BadgeVerified.tsx
@@ -13,10 +13,11 @@
 import BadgeVerified_L from 'illustration:./S2_fill_badgeVerified_generic1_160.svg';
 import BadgeVerified_M from 'illustration:./S2_fill_badgeVerified_generic1_96.svg';
 import BadgeVerified_S from 'illustration:./S2_fill_badgeVerified_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BadgeVerified(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BadgeVerified(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bell.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bell.tsx
index d2b9db10d8c..37b2fc90486 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bell.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bell.tsx
@@ -13,10 +13,11 @@
 import Bell_L from 'illustration:./S2_fill_bell_generic1_160.svg';
 import Bell_M from 'illustration:./S2_fill_bell_generic1_96.svg';
 import Bell_S from 'illustration:./S2_fill_bell_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Bell(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Bell(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bolt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bolt.tsx
index 6188925088d..2b4f383d1f2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bolt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Bolt.tsx
@@ -13,10 +13,11 @@
 import Bolt_L from 'illustration:./S2_fill_bolt_generic1_160.svg';
 import Bolt_M from 'illustration:./S2_fill_bolt_generic1_96.svg';
 import Bolt_S from 'illustration:./S2_fill_bolt_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Bolt(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Bolt(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brand.tsx
index cb6001b502c..15026a3c447 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brand.tsx
@@ -13,10 +13,11 @@
 import Brand_L from 'illustration:./S2_fill_brand_generic1_160.svg';
 import Brand_M from 'illustration:./S2_fill_brand_generic1_96.svg';
 import Brand_S from 'illustration:./S2_fill_brand_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Brand(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Brand(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Briefcase.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Briefcase.tsx
index 91a2aed2596..b530cc2cdbf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Briefcase.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Briefcase.tsx
@@ -13,10 +13,11 @@
 import Briefcase_L from 'illustration:./S2_fill_briefcase_generic1_160.svg';
 import Briefcase_M from 'illustration:./S2_fill_briefcase_generic1_96.svg';
 import Briefcase_S from 'illustration:./S2_fill_briefcase_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Briefcase(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Briefcase(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BrightnessContrast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BrightnessContrast.tsx
index 3a56663a6ca..3d1877ca6af 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BrightnessContrast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BrightnessContrast.tsx
@@ -13,10 +13,11 @@
 import BrightnessContrast_L from 'illustration:./S2_fill_brightnessContrast_generic1_160.svg';
 import BrightnessContrast_M from 'illustration:./S2_fill_brightnessContrast_generic1_96.svg';
 import BrightnessContrast_S from 'illustration:./S2_fill_brightnessContrast_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BrightnessContrast(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BrightnessContrast(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Browser.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Browser.tsx
index 90b55384163..e698d9b3905 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Browser.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Browser.tsx
@@ -13,10 +13,11 @@
 import Browser_L from 'illustration:./S2_fill_browser_generic1_160.svg';
 import Browser_M from 'illustration:./S2_fill_browser_generic1_96.svg';
 import Browser_S from 'illustration:./S2_fill_browser_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Browser(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Browser(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brush.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brush.tsx
index 3889cce1702..eec91006219 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brush.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Brush.tsx
@@ -13,10 +13,11 @@
 import Brush_L from 'illustration:./S2_fill_brush_generic1_160.svg';
 import Brush_M from 'illustration:./S2_fill_brush_generic1_96.svg';
 import Brush_S from 'illustration:./S2_fill_brush_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Brush(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Brush(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BuildTable.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BuildTable.tsx
index 2f6b9b82d5f..99fbb30a79c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BuildTable.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/BuildTable.tsx
@@ -13,10 +13,11 @@
 import BuildTable_L from 'illustration:./S2_fill_buildTable_generic1_160.svg';
 import BuildTable_M from 'illustration:./S2_fill_buildTable_generic1_96.svg';
 import BuildTable_S from 'illustration:./S2_fill_buildTable_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BuildTable(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BuildTable(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Buildings.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Buildings.tsx
index 9a17b14d436..899a5c066aa 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Buildings.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Buildings.tsx
@@ -13,10 +13,11 @@
 import Buildings_L from 'illustration:./S2_fill_buildings_generic1_160.svg';
 import Buildings_M from 'illustration:./S2_fill_buildings_generic1_96.svg';
 import Buildings_S from 'illustration:./S2_fill_buildings_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Buildings(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Buildings(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Calendar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Calendar.tsx
index 824cae8deed..618a7a3cd67 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Calendar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Calendar.tsx
@@ -13,10 +13,11 @@
 import Calendar_L from 'illustration:./S2_fill_calendar_generic1_160.svg';
 import Calendar_M from 'illustration:./S2_fill_calendar_generic1_96.svg';
 import Calendar_S from 'illustration:./S2_fill_calendar_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Calendar(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Calendar(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Camera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Camera.tsx
index 9f1ab1fc754..e82429a4783 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Camera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Camera.tsx
@@ -13,10 +13,11 @@
 import Camera_L from 'illustration:./S2_fill_camera_generic1_160.svg';
 import Camera_M from 'illustration:./S2_fill_camera_generic1_96.svg';
 import Camera_S from 'illustration:./S2_fill_camera_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Camera(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Camera(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CardTapPayment.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CardTapPayment.tsx
index c73bcd9c8ff..5587b1665c0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CardTapPayment.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CardTapPayment.tsx
@@ -13,10 +13,11 @@
 import CardTapPayment_L from 'illustration:./S2_fill_cardTapPayment_generic1_160.svg';
 import CardTapPayment_M from 'illustration:./S2_fill_cardTapPayment_generic1_96.svg';
 import CardTapPayment_S from 'illustration:./S2_fill_cardTapPayment_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CardTapPayment(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CardTapPayment(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Channel.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Channel.tsx
index f2bccf3f9f1..d836121081d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Channel.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Channel.tsx
@@ -13,10 +13,11 @@
 import Channel_L from 'illustration:./S2_fill_channel_generic1_160.svg';
 import Channel_M from 'illustration:./S2_fill_channel_generic1_96.svg';
 import Channel_S from 'illustration:./S2_fill_channel_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Channel(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Channel(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ChartAreaStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ChartAreaStack.tsx
index a073bf6bebf..4dcb7012521 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ChartAreaStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ChartAreaStack.tsx
@@ -13,10 +13,11 @@
 import ChartAreaStack_L from 'illustration:./S2_fill_chartAreaStack_generic1_160.svg';
 import ChartAreaStack_M from 'illustration:./S2_fill_chartAreaStack_generic1_96.svg';
 import ChartAreaStack_S from 'illustration:./S2_fill_chartAreaStack_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ChartAreaStack(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ChartAreaStack(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Chatbubble.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Chatbubble.tsx
index a7a9eb546e5..df2a75b3fcf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Chatbubble.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Chatbubble.tsx
@@ -13,10 +13,11 @@
 import Chatbubble_L from 'illustration:./S2_fill_chatbubble_generic1_160.svg';
 import Chatbubble_M from 'illustration:./S2_fill_chatbubble_generic1_96.svg';
 import Chatbubble_S from 'illustration:./S2_fill_chatbubble_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Chatbubble(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Chatbubble(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Checkmark.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Checkmark.tsx
index 3c935a66c65..dcaad219c5f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Checkmark.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Checkmark.tsx
@@ -13,10 +13,11 @@
 import Checkmark_L from 'illustration:./S2_fill_checkmark_generic1_160.svg';
 import Checkmark_M from 'illustration:./S2_fill_checkmark_generic1_96.svg';
 import Checkmark_S from 'illustration:./S2_fill_checkmark_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Checkmark(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Checkmark(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clipboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clipboard.tsx
index b04e222a43a..f735c32c63c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clipboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clipboard.tsx
@@ -13,10 +13,11 @@
 import Clipboard_L from 'illustration:./S2_fill_clipboard_generic1_160.svg';
 import Clipboard_M from 'illustration:./S2_fill_clipboard_generic1_96.svg';
 import Clipboard_S from 'illustration:./S2_fill_clipboard_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Clipboard(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Clipboard(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clock.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clock.tsx
index 98b6829f277..b59c4a71ba6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clock.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Clock.tsx
@@ -13,10 +13,11 @@
 import Clock_L from 'illustration:./S2_fill_clock_generic1_160.svg';
 import Clock_M from 'illustration:./S2_fill_clock_generic1_96.svg';
 import Clock_S from 'illustration:./S2_fill_clock_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Clock(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Clock(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cloud.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cloud.tsx
index 468878a9841..c07da529515 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cloud.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cloud.tsx
@@ -13,10 +13,11 @@
 import Cloud_L from 'illustration:./S2_fill_cloud_generic1_160.svg';
 import Cloud_M from 'illustration:./S2_fill_cloud_generic1_96.svg';
 import Cloud_S from 'illustration:./S2_fill_cloud_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Cloud(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Cloud(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CloudUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CloudUpload.tsx
index 9eca9149f86..2ff147512db 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CloudUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CloudUpload.tsx
@@ -13,10 +13,11 @@
 import CloudUpload_L from 'illustration:./S2_fill_cloudUpload_generic1_160.svg';
 import CloudUpload_M from 'illustration:./S2_fill_cloudUpload_generic1_96.svg';
 import CloudUpload_S from 'illustration:./S2_fill_cloudUpload_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CloudUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CloudUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CodeBrackets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CodeBrackets.tsx
index f494d4887c1..00ad70c8e34 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CodeBrackets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CodeBrackets.tsx
@@ -13,10 +13,11 @@
 import CodeBrackets_L from 'illustration:./S2_fill_CodeBrackets_generic1_160.svg';
 import CodeBrackets_M from 'illustration:./S2_fill_CodeBrackets_generic1_96.svg';
 import CodeBrackets_S from 'illustration:./S2_fill_CodeBrackets_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CodeBrackets(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CodeBrackets(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Color.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Color.tsx
index 6924b5179ee..c0fad5e8de3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Color.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Color.tsx
@@ -13,10 +13,11 @@
 import Color_L from 'illustration:./S2_fill_color_generic1_160.svg';
 import Color_M from 'illustration:./S2_fill_color_generic1_96.svg';
 import Color_S from 'illustration:./S2_fill_color_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Color(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Color(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CommentText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CommentText.tsx
index f0f1379a68c..4580d6b0349 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CommentText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/CommentText.tsx
@@ -13,10 +13,11 @@
 import CommentText_L from 'illustration:./S2_fill_commentText_generic1_160.svg';
 import CommentText_M from 'illustration:./S2_fill_commentText_generic1_96.svg';
 import CommentText_S from 'illustration:./S2_fill_commentText_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CommentText(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CommentText(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Confetti.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Confetti.tsx
index 7323c56f832..da55321b2af 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Confetti.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Confetti.tsx
@@ -13,10 +13,11 @@
 import Confetti_L from 'illustration:./S2_fill_confetti_generic1_160.svg';
 import Confetti_M from 'illustration:./S2_fill_confetti_generic1_96.svg';
 import Confetti_S from 'illustration:./S2_fill_confetti_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Confetti(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Confetti(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Conversationbubbles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Conversationbubbles.tsx
index ed613716c7c..74ff704b317 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Conversationbubbles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Conversationbubbles.tsx
@@ -13,10 +13,11 @@
 import Conversationbubbles_L from 'illustration:./S2_fill_conversationbubbles_generic1_160.svg';
 import Conversationbubbles_M from 'illustration:./S2_fill_conversationbubbles_generic1_96.svg';
 import Conversationbubbles_S from 'illustration:./S2_fill_conversationbubbles_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Conversationbubbles(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Conversationbubbles(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Crop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Crop.tsx
index 8ba3454d3c7..3e45a1297e7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Crop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Crop.tsx
@@ -13,10 +13,11 @@
 import Crop_L from 'illustration:./S2_fill_crop_generic1_160.svg';
 import Crop_M from 'illustration:./S2_fill_crop_generic1_96.svg';
 import Crop_S from 'illustration:./S2_fill_crop_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Crop(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Crop(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cursor.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cursor.tsx
index 4c56152fc31..81173d7e841 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cursor.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cursor.tsx
@@ -13,10 +13,11 @@
 import Cursor_L from 'illustration:./S2_fill_cursor_generic1_160.svg';
 import Cursor_M from 'illustration:./S2_fill_cursor_generic1_96.svg';
 import Cursor_S from 'illustration:./S2_fill_cursor_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Cursor(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Cursor(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cut.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cut.tsx
index 6ef34e6755a..15f3b70d5af 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cut.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Cut.tsx
@@ -13,10 +13,11 @@
 import Cut_L from 'illustration:./S2_fill_cut_generic1_160.svg';
 import Cut_M from 'illustration:./S2_fill_cut_generic1_96.svg';
 import Cut_S from 'illustration:./S2_fill_cut_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Cut(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Cut(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Data.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Data.tsx
index b0ac05a476d..49f1bb2b00c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Data.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Data.tsx
@@ -13,10 +13,11 @@
 import Data_L from 'illustration:./S2_fill_data_generic1_160.svg';
 import Data_M from 'illustration:./S2_fill_data_generic1_96.svg';
 import Data_S from 'illustration:./S2_fill_data_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Data(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Data(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DataAnalytics.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DataAnalytics.tsx
index 776f55f3b37..f7af5c8e5a2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DataAnalytics.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DataAnalytics.tsx
@@ -13,10 +13,11 @@
 import DataAnalytics_L from 'illustration:./S2_fill_dataAnalytics_generic1_160.svg';
 import DataAnalytics_M from 'illustration:./S2_fill_dataAnalytics_generic1_96.svg';
 import DataAnalytics_S from 'illustration:./S2_fill_dataAnalytics_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function DataAnalytics(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function DataAnalytics(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Desktop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Desktop.tsx
index 31369c60b47..0a4bc59fb28 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Desktop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Desktop.tsx
@@ -13,10 +13,11 @@
 import Desktop_L from 'illustration:./S2_fill_desktop_generic1_160.svg';
 import Desktop_M from 'illustration:./S2_fill_desktop_generic1_96.svg';
 import Desktop_S from 'illustration:./S2_fill_desktop_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Desktop(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Desktop(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Diamond.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Diamond.tsx
index ea9807428c1..d341ae2be08 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Diamond.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Diamond.tsx
@@ -13,10 +13,11 @@
 import Diamond_L from 'illustration:./S2_fill_diamond_generic1_160.svg';
 import Diamond_M from 'illustration:./S2_fill_diamond_generic1_96.svg';
 import Diamond_S from 'illustration:./S2_fill_diamond_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Diamond(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Diamond(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Document.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Document.tsx
index f76332d212b..e9b5c47b01a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Document.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Document.tsx
@@ -13,10 +13,11 @@
 import Document_L from 'illustration:./S2_fill_document_generic1_160.svg';
 import Document_M from 'illustration:./S2_fill_document_generic1_96.svg';
 import Document_S from 'illustration:./S2_fill_document_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Document(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Document(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Download.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Download.tsx
index c1ca6648d2f..15ea7b73af5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Download.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Download.tsx
@@ -13,10 +13,11 @@
 import Download_L from 'illustration:./S2_fill_download_generic1_160.svg';
 import Download_M from 'illustration:./S2_fill_download_generic1_96.svg';
 import Download_S from 'illustration:./S2_fill_download_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Download(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Download(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DropToUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DropToUpload.tsx
index 0f741c5d9a1..66be3c581eb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DropToUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/DropToUpload.tsx
@@ -13,10 +13,11 @@
 import DropToUpload_L from 'illustration:./S2_fill_dropToUpload_generic1_160.svg';
 import DropToUpload_M from 'illustration:./S2_fill_dropToUpload_generic1_96.svg';
 import DropToUpload_S from 'illustration:./S2_fill_dropToUpload_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function DropToUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function DropToUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Education.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Education.tsx
index ba852b0e6ee..9db62402495 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Education.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Education.tsx
@@ -13,10 +13,11 @@
 import Education_L from 'illustration:./S2_fill_education_generic1_160.svg';
 import Education_M from 'illustration:./S2_fill_education_generic1_96.svg';
 import Education_S from 'illustration:./S2_fill_education_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Education(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Education(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Effects.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Effects.tsx
index c4668198dae..d4b8633496a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Effects.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Effects.tsx
@@ -13,10 +13,11 @@
 import Effects_L from 'illustration:./S2_fill_effects_generic1_160.svg';
 import Effects_M from 'illustration:./S2_fill_effects_generic1_96.svg';
 import Effects_S from 'illustration:./S2_fill_effects_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Effects(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Effects(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Emoji.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Emoji.tsx
index 75dedfd6a95..16065b71e61 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Emoji.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Emoji.tsx
@@ -13,10 +13,11 @@
 import Emoji_L from 'illustration:./S2_fill_emoji_generic1_160.svg';
 import Emoji_M from 'illustration:./S2_fill_emoji_generic1_96.svg';
 import Emoji_S from 'illustration:./S2_fill_emoji_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Emoji(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Emoji(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/EmptyStateExport.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/EmptyStateExport.tsx
index e166ab960b0..8f8c75a2346 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/EmptyStateExport.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/EmptyStateExport.tsx
@@ -13,10 +13,11 @@
 import EmptyStateExport_L from 'illustration:./S2_fill_EmptyStateExport_generic1_160.svg';
 import EmptyStateExport_M from 'illustration:./S2_fill_EmptyStateExport_generic1_96.svg';
 import EmptyStateExport_S from 'illustration:./S2_fill_EmptyStateExport_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function EmptyStateExport(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function EmptyStateExport(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Explosion.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Explosion.tsx
index 148fee8997b..f46ec15a345 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Explosion.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Explosion.tsx
@@ -13,10 +13,11 @@
 import Explosion_L from 'illustration:./S2_fill_explosion_generic1_160.svg';
 import Explosion_M from 'illustration:./S2_fill_explosion_generic1_96.svg';
 import Explosion_S from 'illustration:./S2_fill_explosion_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Explosion(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Explosion(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ExportTo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ExportTo.tsx
index 443dd63b92f..872e1c296a2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ExportTo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ExportTo.tsx
@@ -13,10 +13,11 @@
 import ExportTo_L from 'illustration:./S2_fill_exportTo_generic1_160.svg';
 import ExportTo_M from 'illustration:./S2_fill_exportTo_generic1_96.svg';
 import ExportTo_S from 'illustration:./S2_fill_exportTo_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ExportTo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ExportTo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Exposure.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Exposure.tsx
index 2db5a826e51..c08c29b85e9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Exposure.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Exposure.tsx
@@ -13,10 +13,11 @@
 import Exposure_L from 'illustration:./S2_fill_exposure_generic1_160.svg';
 import Exposure_M from 'illustration:./S2_fill_exposure_generic1_96.svg';
 import Exposure_S from 'illustration:./S2_fill_exposure_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Exposure(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Exposure(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileImage.tsx
index fb13cd3a9a7..0ddd2120ae8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileImage.tsx
@@ -13,10 +13,11 @@
 import FileImage_L from 'illustration:./S2_fill_fileImage_generic1_160.svg';
 import FileImage_M from 'illustration:./S2_fill_fileImage_generic1_96.svg';
 import FileImage_S from 'illustration:./S2_fill_fileImage_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileImage(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileImage(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileShared.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileShared.tsx
index 019891c9266..aaf1a927ec1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileShared.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileShared.tsx
@@ -13,10 +13,11 @@
 import FileShared_L from 'illustration:./S2_fill_fileShared_generic1_160.svg';
 import FileShared_M from 'illustration:./S2_fill_fileShared_generic1_96.svg';
 import FileShared_S from 'illustration:./S2_fill_fileShared_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileShared(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileShared(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileText.tsx
index 10b9d2d9206..fa7c1d24efb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileText.tsx
@@ -13,10 +13,11 @@
 import FileText_L from 'illustration:./S2_fill_fileText_generic1_160.svg';
 import FileText_M from 'illustration:./S2_fill_fileText_generic1_96.svg';
 import FileText_S from 'illustration:./S2_fill_fileText_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileText(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileText(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileVideo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileVideo.tsx
index acbef2b7265..1c9978af13f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileVideo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileVideo.tsx
@@ -13,10 +13,11 @@
 import FileVideo_L from 'illustration:./S2_fill_fileVideo_generic1_160.svg';
 import FileVideo_M from 'illustration:./S2_fill_fileVideo_generic1_96.svg';
 import FileVideo_S from 'illustration:./S2_fill_fileVideo_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileVideo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileVideo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileZip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileZip.tsx
index c6db96f91f8..f75d5916928 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileZip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FileZip.tsx
@@ -13,10 +13,11 @@
 import FileZip_L from 'illustration:./S2_fill_fileZip_generic1_160.svg';
 import FileZip_M from 'illustration:./S2_fill_fileZip_generic1_96.svg';
 import FileZip_S from 'illustration:./S2_fill_fileZip_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileZip(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileZip(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filmstrip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filmstrip.tsx
index 4d2979c6e8d..505f99541c8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filmstrip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filmstrip.tsx
@@ -13,10 +13,11 @@
 import Filmstrip_L from 'illustration:./S2_fill_filmstrip_generic1_160.svg';
 import Filmstrip_M from 'illustration:./S2_fill_filmstrip_generic1_96.svg';
 import Filmstrip_S from 'illustration:./S2_fill_filmstrip_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Filmstrip(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Filmstrip(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filter.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filter.tsx
index 168100b6946..42034b162b9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filter.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filter.tsx
@@ -13,10 +13,11 @@
 import Filter_L from 'illustration:./S2_fill_filter_generic1_160.svg';
 import Filter_M from 'illustration:./S2_fill_filter_generic1_96.svg';
 import Filter_S from 'illustration:./S2_fill_filter_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Filter(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Filter(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filters.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filters.tsx
index cce7c7eb9c2..a402bb15d49 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filters.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Filters.tsx
@@ -13,10 +13,11 @@
 import Filters_L from 'illustration:./S2_fill_filters_generic1_160.svg';
 import Filters_M from 'illustration:./S2_fill_filters_generic1_96.svg';
 import Filters_S from 'illustration:./S2_fill_filters_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Filters(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Filters(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Fireworks.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Fireworks.tsx
index fb67f593eb4..81c083d58cb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Fireworks.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Fireworks.tsx
@@ -13,10 +13,11 @@
 import Fireworks_L from 'illustration:./S2_fill_fireworks_generic1_160.svg';
 import Fireworks_M from 'illustration:./S2_fill_fireworks_generic1_96.svg';
 import Fireworks_S from 'illustration:./S2_fill_fireworks_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Fireworks(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Fireworks(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Flag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Flag.tsx
index b3891541f42..183ee4a4912 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Flag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Flag.tsx
@@ -13,10 +13,11 @@
 import Flag_L from 'illustration:./S2_fill_flag_generic1_160.svg';
 import Flag_M from 'illustration:./S2_fill_flag_generic1_96.svg';
 import Flag_S from 'illustration:./S2_fill_flag_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Flag(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Flag(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCheckmark.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCheckmark.tsx
index a74b7e13a5e..78b8ac6867b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCheckmark.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCheckmark.tsx
@@ -13,10 +13,11 @@
 import FlagCheckmark_L from 'illustration:./S2_fill_flagCheckmark_generic1_160.svg';
 import FlagCheckmark_M from 'illustration:./S2_fill_flagCheckmark_generic1_96.svg';
 import FlagCheckmark_S from 'illustration:./S2_fill_flagCheckmark_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FlagCheckmark(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FlagCheckmark(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCross.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCross.tsx
index 0be9e4cf982..19d43e591dc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCross.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FlagCross.tsx
@@ -13,10 +13,11 @@
 import FlagCross_L from 'illustration:./S2_fill_flagCross_generic1_160.svg';
 import FlagCross_M from 'illustration:./S2_fill_flagCross_generic1_96.svg';
 import FlagCross_S from 'illustration:./S2_fill_flagCross_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FlagCross(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FlagCross(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderClose.tsx
index c1f90621463..f3eb62ca43a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderClose.tsx
@@ -13,10 +13,11 @@
 import FolderClose_L from 'illustration:./S2_fill_folderClose_generic1_160.svg';
 import FolderClose_M from 'illustration:./S2_fill_folderClose_generic1_96.svg';
 import FolderClose_S from 'illustration:./S2_fill_folderClose_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FolderClose(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FolderClose(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderOpen.tsx
index b48057167ba..ca16c17cd23 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderOpen.tsx
@@ -13,10 +13,11 @@
 import FolderOpen_L from 'illustration:./S2_fill_folderOpen_generic1_160.svg';
 import FolderOpen_M from 'illustration:./S2_fill_folderOpen_generic1_96.svg';
 import FolderOpen_S from 'illustration:./S2_fill_folderOpen_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FolderOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FolderOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderShared.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderShared.tsx
index b4ec3843bb9..86be278e7b3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderShared.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/FolderShared.tsx
@@ -13,10 +13,11 @@
 import FolderShared_L from 'illustration:./S2_fill_folderShared_generic1_160.svg';
 import FolderShared_M from 'illustration:./S2_fill_folderShared_generic1_96.svg';
 import FolderShared_S from 'illustration:./S2_fill_folderShared_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FolderShared(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FolderShared(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GearSetting.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GearSetting.tsx
index 28aaa80b2e7..6568ccb60a1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GearSetting.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GearSetting.tsx
@@ -13,10 +13,11 @@
 import GearSetting_L from 'illustration:./S2_fill_gearSetting_generic1_160.svg';
 import GearSetting_M from 'illustration:./S2_fill_gearSetting_generic1_96.svg';
 import GearSetting_S from 'illustration:./S2_fill_gearSetting_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function GearSetting(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function GearSetting(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Gift.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Gift.tsx
index dc24a4bc4e1..762e244ac11 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Gift.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Gift.tsx
@@ -13,10 +13,11 @@
 import Gift_L from 'illustration:./S2_fill_gift_generic1_160.svg';
 import Gift_M from 'illustration:./S2_fill_gift_generic1_96.svg';
 import Gift_S from 'illustration:./S2_fill_gift_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Gift(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Gift(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Globe.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Globe.tsx
index 00c35097b96..21213ee3fa4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Globe.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Globe.tsx
@@ -13,10 +13,11 @@
 import Globe_L from 'illustration:./S2_fill_globe_generic1_160.svg';
 import Globe_M from 'illustration:./S2_fill_globe_generic1_96.svg';
 import Globe_S from 'illustration:./S2_fill_globe_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Globe(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Globe(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GlobeGrid.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GlobeGrid.tsx
index 2d9037fbdda..8429c8f4b3e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GlobeGrid.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GlobeGrid.tsx
@@ -13,10 +13,11 @@
 import GlobeGrid_L from 'illustration:./S2_fill_globeGrid_generic1_160.svg';
 import GlobeGrid_M from 'illustration:./S2_fill_globeGrid_generic1_96.svg';
 import GlobeGrid_S from 'illustration:./S2_fill_globeGrid_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function GlobeGrid(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function GlobeGrid(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GraphBarChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GraphBarChart.tsx
index 3e7c71f98fc..57833d6c603 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GraphBarChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/GraphBarChart.tsx
@@ -13,10 +13,11 @@
 import GraphBarChart_L from 'illustration:./S2_fill_graphBarChart_generic1_160.svg';
 import GraphBarChart_M from 'illustration:./S2_fill_graphBarChart_generic1_96.svg';
 import GraphBarChart_S from 'illustration:./S2_fill_graphBarChart_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function GraphBarChart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function GraphBarChart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Hand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Hand.tsx
index 4e83dedb658..fb80412368a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Hand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Hand.tsx
@@ -13,10 +13,11 @@
 import Hand_L from 'illustration:./S2_fill_hand_generic1_160.svg';
 import Hand_M from 'illustration:./S2_fill_hand_generic1_96.svg';
 import Hand_S from 'illustration:./S2_fill_hand_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Hand(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Hand(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Handshake.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Handshake.tsx
index a711ccb1deb..e1a2bc17a84 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Handshake.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Handshake.tsx
@@ -13,10 +13,11 @@
 import Handshake_L from 'illustration:./S2_fill_handshake_generic1_160.svg';
 import Handshake_M from 'illustration:./S2_fill_handshake_generic1_96.svg';
 import Handshake_S from 'illustration:./S2_fill_handshake_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Handshake(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Handshake(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Heart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Heart.tsx
index 6f0ed72cece..53cb66ef390 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Heart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Heart.tsx
@@ -13,10 +13,11 @@
 import Heart_L from 'illustration:./S2_fill_heart_generic1_160.svg';
 import Heart_M from 'illustration:./S2_fill_heart_generic1_96.svg';
 import Heart_S from 'illustration:./S2_fill_heart_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Heart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Heart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/HelpCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/HelpCircle.tsx
index 0d6149eed12..a22067f8807 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/HelpCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/HelpCircle.tsx
@@ -13,10 +13,11 @@
 import HelpCircle_L from 'illustration:./S2_fill_helpCircle_generic1_160.svg';
 import HelpCircle_M from 'illustration:./S2_fill_helpCircle_generic1_96.svg';
 import HelpCircle_S from 'illustration:./S2_fill_helpCircle_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function HelpCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function HelpCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Home.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Home.tsx
index 8ff73960d01..39a6eb4c91b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Home.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Home.tsx
@@ -13,10 +13,11 @@
 import Home_L from 'illustration:./S2_fill_home_generic1_160.svg';
 import Home_M from 'illustration:./S2_fill_home_generic1_96.svg';
 import Home_S from 'illustration:./S2_fill_home_generic1_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Home(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Home(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Illustration.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Illustration.tsx
index 1ff8fd3fc52..e23105dfc61 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Illustration.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Illustration.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Illustration_L from 'illustration:./S2_fill_illustration_generic1_160.svg';
 import Illustration_M from 'illustration:./S2_fill_illustration_generic1_96.svg';
 import Illustration_S from 'illustration:./S2_fill_illustration_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Illustration(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Illustration(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Image.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Image.tsx
index 65e03ade16a..ca6ed1e968d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Image.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Image.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Image_L from 'illustration:./S2_fill_image_generic1_160.svg';
 import Image_M from 'illustration:./S2_fill_image_generic1_96.svg';
 import Image_S from 'illustration:./S2_fill_image_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Image(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Image(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ImageStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ImageStack.tsx
index a024ec4e689..1dffed46262 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ImageStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ImageStack.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ImageStack_L from 'illustration:./S2_fill_imageStack_generic1_160.svg';
 import ImageStack_M from 'illustration:./S2_fill_imageStack_generic1_96.svg';
 import ImageStack_S from 'illustration:./S2_fill_imageStack_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ImageStack(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ImageStack(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/InfiniteLooping.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/InfiniteLooping.tsx
index 5c9d7350b09..bb55e88307d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/InfiniteLooping.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/InfiniteLooping.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import InfiniteLooping_L from 'illustration:./S2_fill_infiniteLooping_generic1_160.svg';
 import InfiniteLooping_M from 'illustration:./S2_fill_infiniteLooping_generic1_96.svg';
 import InfiniteLooping_S from 'illustration:./S2_fill_infiniteLooping_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function InfiniteLooping(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function InfiniteLooping(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Information.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Information.tsx
index f12ad5943c6..35b53de0888 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Information.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Information.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Information_L from 'illustration:./S2_fill_information_generic1_160.svg';
 import Information_M from 'illustration:./S2_fill_information_generic1_96.svg';
 import Information_S from 'illustration:./S2_fill_information_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Information(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Information(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Interaction.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Interaction.tsx
index 38a78382705..9456a33fc78 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Interaction.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Interaction.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Interaction_L from 'illustration:./S2_fill_interaction_generic1_160.svg';
 import Interaction_M from 'illustration:./S2_fill_interaction_generic1_96.svg';
 import Interaction_S from 'illustration:./S2_fill_interaction_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Interaction(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Interaction(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Laptop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Laptop.tsx
index 13682c10735..bd2da36b87a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Laptop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Laptop.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Laptop_L from 'illustration:./S2_fill_laptop_generic1_160.svg';
 import Laptop_M from 'illustration:./S2_fill_laptop_generic1_96.svg';
 import Laptop_S from 'illustration:./S2_fill_laptop_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Laptop(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Laptop(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Layers.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Layers.tsx
index b8de1f291b0..93f5ec23628 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Layers.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Layers.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Layers_L from 'illustration:./S2_fill_layers_generic1_160.svg';
 import Layers_M from 'illustration:./S2_fill_layers_generic1_96.svg';
 import Layers_S from 'illustration:./S2_fill_layers_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Layers(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Layers(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Libraries.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Libraries.tsx
index 89641b4f93b..ab41ef018fc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Libraries.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Libraries.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Libraries_L from 'illustration:./S2_fill_libraries_generic1_160.svg';
 import Libraries_M from 'illustration:./S2_fill_libraries_generic1_96.svg';
 import Libraries_S from 'illustration:./S2_fill_libraries_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Libraries(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Libraries(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lightbulb.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lightbulb.tsx
index b23e00c1cd3..98e11b83ae5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lightbulb.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lightbulb.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Lightbulb_L from 'illustration:./S2_fill_lightbulb_generic1_160.svg';
 import Lightbulb_M from 'illustration:./S2_fill_lightbulb_generic1_96.svg';
 import Lightbulb_S from 'illustration:./S2_fill_lightbulb_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Lightbulb(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Lightbulb(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LightbulbRays.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LightbulbRays.tsx
index 75ccc8e3f0d..7423fea24ba 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LightbulbRays.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LightbulbRays.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import LightbulbRays_L from 'illustration:./S2_fill_lightbulbRays_generic1_160.svg';
 import LightbulbRays_M from 'illustration:./S2_fill_lightbulbRays_generic1_96.svg';
 import LightbulbRays_S from 'illustration:./S2_fill_lightbulbRays_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function LightbulbRays(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function LightbulbRays(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lighten.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lighten.tsx
index 1f9acc83a8d..3cbe481f3db 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lighten.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Lighten.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Lighten_L from 'illustration:./S2_fill_lighten_generic1_160.svg';
 import Lighten_M from 'illustration:./S2_fill_lighten_generic1_96.svg';
 import Lighten_S from 'illustration:./S2_fill_lighten_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Lighten(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Lighten(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Link.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Link.tsx
index 3663caf6226..55e870fe617 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Link.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Link.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Link_L from 'illustration:./S2_fill_link_generic1_160.svg';
 import Link_M from 'illustration:./S2_fill_link_generic1_96.svg';
 import Link_S from 'illustration:./S2_fill_link_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Link(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Link(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Location.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Location.tsx
index 1ed330e3634..fce080f505d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Location.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Location.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Location_L from 'illustration:./S2_fill_location_generic1_160.svg';
 import Location_M from 'illustration:./S2_fill_location_generic1_96.svg';
 import Location_S from 'illustration:./S2_fill_location_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Location(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Location(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockClose.tsx
index 6eda7cc9de9..ce062dc3500 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockClose.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import LockClose_L from 'illustration:./S2_fill_lockClose_generic1_160.svg';
 import LockClose_M from 'illustration:./S2_fill_lockClose_generic1_96.svg';
 import LockClose_S from 'illustration:./S2_fill_lockClose_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function LockClose(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function LockClose(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockOpen.tsx
index 9bec5b91daf..0c10df8cbac 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/LockOpen.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import LockOpen_L from 'illustration:./S2_fill_lockOpen_generic1_160.svg';
 import LockOpen_M from 'illustration:./S2_fill_lockOpen_generic1_96.svg';
 import LockOpen_S from 'illustration:./S2_fill_lockOpen_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function LockOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function LockOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Logo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Logo.tsx
index 09d0687fc55..244e0e36b52 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Logo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Logo.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Logo_L from 'illustration:./S2_fill_logo_generic1_160.svg';
 import Logo_M from 'illustration:./S2_fill_logo_generic1_96.svg';
 import Logo_S from 'illustration:./S2_fill_logo_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Logo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Logo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MagicWand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MagicWand.tsx
index 02434d004cb..21793e99381 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MagicWand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MagicWand.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MagicWand_L from 'illustration:./S2_fill_magicWand_generic1_160.svg';
 import MagicWand_M from 'illustration:./S2_fill_magicWand_generic1_96.svg';
 import MagicWand_S from 'illustration:./S2_fill_magicWand_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MagicWand(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MagicWand(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailClose.tsx
index 33a143e700e..8b23d1570f6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailClose.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MailClose_L from 'illustration:./S2_fill_mailClose_generic1_160.svg';
 import MailClose_M from 'illustration:./S2_fill_mailClose_generic1_96.svg';
 import MailClose_S from 'illustration:./S2_fill_mailClose_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MailClose(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MailClose(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailOpen.tsx
index 56c428858bd..bf09f16d533 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MailOpen.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MailOpen_L from 'illustration:./S2_fill_mailOpen_generic1_160.svg';
 import MailOpen_M from 'illustration:./S2_fill_mailOpen_generic1_96.svg';
 import MailOpen_S from 'illustration:./S2_fill_mailOpen_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MailOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MailOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Market.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Market.tsx
index a3b04f20235..0fd35a9f316 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Market.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Market.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Market_L from 'illustration:./S2_fill_market_generic1_160.svg';
 import Market_M from 'illustration:./S2_fill_market_generic1_96.svg';
 import Market_S from 'illustration:./S2_fill_market_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Market(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Market(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote.tsx
index 0aedc43007c..2322f3c07fb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MegaphonePromote_L from 'illustration:./S2_fill_megaphonePromote_generic1_160.svg';
 import MegaphonePromote_M from 'illustration:./S2_fill_megaphonePromote_generic1_96.svg';
 import MegaphonePromote_S from 'illustration:./S2_fill_megaphonePromote_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MegaphonePromote(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MegaphonePromote(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote2.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote2.tsx
index fc302522350..3384df87af3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote2.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MegaphonePromote2.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MegaphonePromote2_L from 'illustration:./S2_fill_megaphonePromote2_generic1_160.svg';
 import MegaphonePromote2_M from 'illustration:./S2_fill_megaphonePromote2_generic1_96.svg';
 import MegaphonePromote2_S from 'illustration:./S2_fill_megaphonePromote2_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MegaphonePromote2(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MegaphonePromote2(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Mention.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Mention.tsx
index 403c67b41de..4ec4560f402 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Mention.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Mention.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Mention_L from 'illustration:./S2_fill_mention_generic1_160.svg';
 import Mention_M from 'illustration:./S2_fill_mention_generic1_96.svg';
 import Mention_S from 'illustration:./S2_fill_mention_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Mention(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Mention(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Microphone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Microphone.tsx
index 161adec3380..3d4137b03d3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Microphone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Microphone.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Microphone_L from 'illustration:./S2_fill_microphone_generic1_160.svg';
 import Microphone_M from 'illustration:./S2_fill_microphone_generic1_96.svg';
 import Microphone_S from 'illustration:./S2_fill_microphone_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Microphone(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Microphone(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Minimize.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Minimize.tsx
index db8cfd89c87..afecc59bd45 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Minimize.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Minimize.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Minimize_L from 'illustration:./S2_fill_minimize_generic1_160.svg';
 import Minimize_M from 'illustration:./S2_fill_minimize_generic1_96.svg';
 import Minimize_S from 'illustration:./S2_fill_minimize_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Minimize(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Minimize(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MovieCamera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MovieCamera.tsx
index 6f553002be5..556a379ed63 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MovieCamera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MovieCamera.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MovieCamera_L from 'illustration:./S2_fill_movieCamera_generic1_160.svg';
 import MovieCamera_M from 'illustration:./S2_fill_movieCamera_generic1_96.svg';
 import MovieCamera_S from 'illustration:./S2_fill_movieCamera_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MovieCamera(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MovieCamera(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MusicNote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MusicNote.tsx
index 2cfd8077d9a..2db9e63020a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MusicNote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/MusicNote.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MusicNote_L from 'illustration:./S2_fill_musicNote_generic1_160.svg';
 import MusicNote_M from 'illustration:./S2_fill_musicNote_generic1_96.svg';
 import MusicNote_S from 'illustration:./S2_fill_musicNote_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MusicNote(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MusicNote(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/NoElements.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/NoElements.tsx
index c0447ff8267..15eca4886dc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/NoElements.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/NoElements.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import NoElements_L from 'illustration:./S2_fill_noElements_generic1_160.svg';
 import NoElements_M from 'illustration:./S2_fill_noElements_generic1_96.svg';
 import NoElements_S from 'illustration:./S2_fill_noElements_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoElements(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoElements(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperairplane.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperairplane.tsx
index 55d98a03cb9..8b5224246db 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperairplane.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperairplane.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Paperairplane_L from 'illustration:./S2_fill_paperairplane_generic1_160.svg';
 import Paperairplane_M from 'illustration:./S2_fill_paperairplane_generic1_96.svg';
 import Paperairplane_S from 'illustration:./S2_fill_paperairplane_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Paperairplane(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Paperairplane(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperclip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperclip.tsx
index e5e286d8f8b..8f057f0690e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperclip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Paperclip.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Paperclip_L from 'illustration:./S2_fill_paperclip_generic1_160.svg';
 import Paperclip_M from 'illustration:./S2_fill_paperclip_generic1_96.svg';
 import Paperclip_S from 'illustration:./S2_fill_paperclip_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Paperclip(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Paperclip(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pause.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pause.tsx
index 5c12a212257..7038b69fc40 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pause.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pause.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Pause_L from 'illustration:./S2_fill_pause_generic1_160.svg';
 import Pause_M from 'illustration:./S2_fill_pause_generic1_96.svg';
 import Pause_S from 'illustration:./S2_fill_pause_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Pause(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Pause(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pencil.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pencil.tsx
index a64f7ca035b..3d64aa3c9f0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pencil.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pencil.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Pencil_L from 'illustration:./S2_fill_pencil_generic1_160.svg';
 import Pencil_M from 'illustration:./S2_fill_pencil_generic1_96.svg';
 import Pencil_S from 'illustration:./S2_fill_pencil_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Pencil(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Pencil(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Phone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Phone.tsx
index d807af76304..c1fd3313aee 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Phone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Phone.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Phone_L from 'illustration:./S2_fill_phone_generic1_160.svg';
 import Phone_M from 'illustration:./S2_fill_phone_generic1_96.svg';
 import Phone_S from 'illustration:./S2_fill_phone_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Phone(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Phone(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PieChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PieChart.tsx
index a395e328ff6..32aff3bd056 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PieChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PieChart.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import PieChart_L from 'illustration:./S2_fill_pieChart_generic1_160.svg';
 import PieChart_M from 'illustration:./S2_fill_pieChart_generic1_96.svg';
 import PieChart_S from 'illustration:./S2_fill_pieChart_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function PieChart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function PieChart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PiggyBank.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PiggyBank.tsx
index 4b2d615db8f..45127aa7432 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PiggyBank.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PiggyBank.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import PiggyBank_L from 'illustration:./S2_fill_piggyBank_generic1_160.svg';
 import PiggyBank_M from 'illustration:./S2_fill_piggyBank_generic1_96.svg';
 import PiggyBank_S from 'illustration:./S2_fill_piggyBank_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function PiggyBank(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function PiggyBank(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pin.tsx
index 341f3f42836..a71f7320083 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Pin.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Pin_L from 'illustration:./S2_fill_pin_generic1_160.svg';
 import Pin_M from 'illustration:./S2_fill_pin_generic1_96.svg';
 import Pin_S from 'illustration:./S2_fill_pin_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Pin(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Pin(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Play.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Play.tsx
index 1b4a86571b6..23de4a221bb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Play.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Play.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Play_L from 'illustration:./S2_fill_play_generic1_160.svg';
 import Play_M from 'illustration:./S2_fill_play_generic1_96.svg';
 import Play_S from 'illustration:./S2_fill_play_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Play(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Play(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PlayTriangle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PlayTriangle.tsx
index 428c19c375a..4112fb7569e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PlayTriangle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/PlayTriangle.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import PlayTriangle_L from 'illustration:./S2_fill_playTriangle_generic1_160.svg';
 import PlayTriangle_M from 'illustration:./S2_fill_playTriangle_generic1_96.svg';
 import PlayTriangle_S from 'illustration:./S2_fill_playTriangle_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function PlayTriangle(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function PlayTriangle(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Plugin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Plugin.tsx
index 5540ba81036..a23bc85e2c9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Plugin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Plugin.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Plugin_L from 'illustration:./S2_fill_plugin_generic1_160.svg';
 import Plugin_M from 'illustration:./S2_fill_plugin_generic1_96.svg';
 import Plugin_S from 'illustration:./S2_fill_plugin_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Plugin(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Plugin(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Prompt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Prompt.tsx
index 5aa808f94ec..0e92ef52cfe 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Prompt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Prompt.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Prompt_L from 'illustration:./S2_fill_prompt_generic1_160.svg';
 import Prompt_M from 'illustration:./S2_fill_prompt_generic1_96.svg';
 import Prompt_S from 'illustration:./S2_fill_prompt_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Prompt(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Prompt(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Properties.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Properties.tsx
index 545cf0e348b..91f8aca7f40 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Properties.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Properties.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Properties_L from 'illustration:./S2_fill_properties_generic1_160.svg';
 import Properties_M from 'illustration:./S2_fill_properties_generic1_96.svg';
 import Properties_S from 'illustration:./S2_fill_properties_generic1_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Properties(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Properties(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Redo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Redo.tsx
index 09bbf5e4b26..033c23717ef 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Redo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Redo.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Redo_L from 'illustration:./S2_fill_redo_generic1_160.svg';
 import Redo_M from 'illustration:./S2_fill_redo_generic1_96.svg';
 import Redo_S from 'illustration:./S2_fill_redo_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Redo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Redo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Remix.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Remix.tsx
index ef12d7f410d..5acdab8fe5a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Remix.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Remix.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Remix_L from 'illustration:./S2_fill_remix_generic1_160.svg';
 import Remix_M from 'illustration:./S2_fill_remix_generic1_96.svg';
 import Remix_S from 'illustration:./S2_fill_remix_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Remix(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Remix(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Replace.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Replace.tsx
index d7af18b8c05..8cf8f892e79 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Replace.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Replace.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Replace_L from 'illustration:./S2_fill_replace_generic1_160.svg';
 import Replace_M from 'illustration:./S2_fill_replace_generic1_96.svg';
 import Replace_S from 'illustration:./S2_fill_replace_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Replace(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Replace(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Revert.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Revert.tsx
index ccd73256170..859c7ee7fde 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Revert.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Revert.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Revert_L from 'illustration:./S2_fill_revert_generic1_160.svg';
 import Revert_M from 'illustration:./S2_fill_revert_generic1_96.svg';
 import Revert_S from 'illustration:./S2_fill_revert_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Revert(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Revert(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ribbon.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ribbon.tsx
index ed7a72c4f21..84aa06c1a71 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ribbon.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ribbon.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Ribbon_L from 'illustration:./S2_fill_ribbon_generic1_160.svg';
 import Ribbon_M from 'illustration:./S2_fill_ribbon_generic1_96.svg';
 import Ribbon_S from 'illustration:./S2_fill_ribbon_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Ribbon(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Ribbon(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Rocket.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Rocket.tsx
index 14d6e2bdb07..a3e5791478f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Rocket.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Rocket.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Rocket_L from 'illustration:./S2_fill_rocket_generic1_160.svg';
 import Rocket_M from 'illustration:./S2_fill_rocket_generic1_96.svg';
 import Rocket_S from 'illustration:./S2_fill_rocket_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Rocket(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Rocket(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCCW.tsx
index 4aec9ce38e3..eb77dd00c8d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCCW.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import RotateCCW_L from 'illustration:./S2_fill_rotateCCW_generic1_160.svg';
 import RotateCCW_M from 'illustration:./S2_fill_rotateCCW_generic1_96.svg';
 import RotateCCW_S from 'illustration:./S2_fill_rotateCCW_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function RotateCCW(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function RotateCCW(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCW.tsx
index c35b0a00c5d..dcd4512d855 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/RotateCW.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import RotateCW_L from 'illustration:./S2_fill_rotateCW_generic1_160.svg';
 import RotateCW_M from 'illustration:./S2_fill_rotateCW_generic1_96.svg';
 import RotateCW_S from 'illustration:./S2_fill_rotateCW_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function RotateCW(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function RotateCW(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ruler.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ruler.tsx
index d6ba22a4260..ccfe0af42bb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ruler.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Ruler.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Ruler_L from 'illustration:./S2_fill_ruler_generic1_160.svg';
 import Ruler_M from 'illustration:./S2_fill_ruler_generic1_96.svg';
 import Ruler_S from 'illustration:./S2_fill_ruler_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Ruler(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Ruler(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Search.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Search.tsx
index 787e1e3ace2..d8ec1b48882 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Search.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Search.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Search_L from 'illustration:./S2_fill_search_generic1_160.svg';
 import Search_M from 'illustration:./S2_fill_search_generic1_96.svg';
 import Search_S from 'illustration:./S2_fill_search_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Search(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Search(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Segmentation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Segmentation.tsx
index 8054c1c410a..c65358928b2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Segmentation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Segmentation.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Segmentation_L from 'illustration:./S2_fill_segmentation_generic1_160.svg';
 import Segmentation_M from 'illustration:./S2_fill_segmentation_generic1_96.svg';
 import Segmentation_S from 'illustration:./S2_fill_segmentation_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Segmentation(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Segmentation(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Server.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Server.tsx
index 8378fbae8b8..9d5b171b839 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Server.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Server.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Server_L from 'illustration:./S2_fill_server_generic1_160.svg';
 import Server_M from 'illustration:./S2_fill_server_generic1_96.svg';
 import Server_S from 'illustration:./S2_fill_server_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Server(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Server(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Shapes.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Shapes.tsx
index c9ee7f81d2c..353617b97dd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Shapes.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Shapes.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Shapes_L from 'illustration:./S2_fill_shapes_generic1_160.svg';
 import Shapes_M from 'illustration:./S2_fill_shapes_generic1_96.svg';
 import Shapes_S from 'illustration:./S2_fill_shapes_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Shapes(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Shapes(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingBag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingBag.tsx
index 44f8ab01395..14cb9c92b54 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingBag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingBag.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ShoppingBag_L from 'illustration:./S2_fill_shoppingBag_generic1_160.svg';
 import ShoppingBag_M from 'illustration:./S2_fill_shoppingBag_generic1_96.svg';
 import ShoppingBag_S from 'illustration:./S2_fill_shoppingBag_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ShoppingBag(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ShoppingBag(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingCart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingCart.tsx
index 4e3a34b158d..745a95fdef8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingCart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ShoppingCart.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ShoppingCart_L from 'illustration:./S2_fill_shoppingCart_generic1_160.svg';
 import ShoppingCart_M from 'illustration:./S2_fill_shoppingCart_generic1_96.svg';
 import ShoppingCart_S from 'illustration:./S2_fill_shoppingCart_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ShoppingCart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ShoppingCart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Sparkles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Sparkles.tsx
index c0db1fc2ae0..f51711b8772 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Sparkles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Sparkles.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Sparkles_L from 'illustration:./S2_fill_sparkles_generic1_160.svg';
 import Sparkles_M from 'illustration:./S2_fill_sparkles_generic1_96.svg';
 import Sparkles_S from 'illustration:./S2_fill_sparkles_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Sparkles(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Sparkles(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/SpeedFast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/SpeedFast.tsx
index b5aaa14e164..952f0f4c660 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/SpeedFast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/SpeedFast.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import SpeedFast_L from 'illustration:./S2_fill_speedFast_generic1_160.svg';
 import SpeedFast_M from 'illustration:./S2_fill_speedFast_generic1_96.svg';
 import SpeedFast_S from 'illustration:./S2_fill_speedFast_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function SpeedFast(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function SpeedFast(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StampClone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StampClone.tsx
index 3587e86c772..c4c15fc990e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StampClone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StampClone.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import StampClone_L from 'illustration:./S2_fill_stampClone_generic1_160.svg';
 import StampClone_M from 'illustration:./S2_fill_stampClone_generic1_96.svg';
 import StampClone_S from 'illustration:./S2_fill_stampClone_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function StampClone(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function StampClone(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Star.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Star.tsx
index fc9f863cdee..3eae2279731 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Star.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Star.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Star_L from 'illustration:./S2_fill_star_generic1_160.svg';
 import Star_M from 'illustration:./S2_fill_star_generic1_96.svg';
 import Star_S from 'illustration:./S2_fill_star_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Star(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Star(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StepForward.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StepForward.tsx
index fc6788aa343..801762b8b78 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StepForward.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/StepForward.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import StepForward_L from 'illustration:./S2_fill_stepForward_generic1_160.svg';
 import StepForward_M from 'illustration:./S2_fill_stepForward_generic1_96.svg';
 import StepForward_S from 'illustration:./S2_fill_stepForward_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function StepForward(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function StepForward(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Switch.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Switch.tsx
index 0aebef4e4b9..7030d695074 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Switch.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Switch.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Switch_L from 'illustration:./S2_fill_switch_generic1_160.svg';
 import Switch_M from 'illustration:./S2_fill_switch_generic1_96.svg';
 import Switch_S from 'illustration:./S2_fill_switch_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Switch(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Switch(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tablet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tablet.tsx
index 39c8f965f56..5750524f767 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tablet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tablet.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Tablet_L from 'illustration:./S2_fill_tablet_generic1_160.svg';
 import Tablet_M from 'illustration:./S2_fill_tablet_generic1_96.svg';
 import Tablet_S from 'illustration:./S2_fill_tablet_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Tablet(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Tablet(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tag.tsx
index b87bfd13081..46fee28098b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Tag.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Tag_L from 'illustration:./S2_fill_tag_generic1_160.svg';
 import Tag_M from 'illustration:./S2_fill_tag_generic1_96.svg';
 import Tag_S from 'illustration:./S2_fill_tag_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Tag(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Tag(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Targeted.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Targeted.tsx
index f252c425fca..1776c737196 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Targeted.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Targeted.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Targeted_L from 'illustration:./S2_fill_targeted_generic1_160.svg';
 import Targeted_M from 'illustration:./S2_fill_targeted_generic1_96.svg';
 import Targeted_S from 'illustration:./S2_fill_targeted_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Targeted(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Targeted(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Text.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Text.tsx
index eef8c0f078a..301ee85aa73 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Text.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Text.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Text_L from 'illustration:./S2_fill_text_generic1_160.svg';
 import Text_M from 'illustration:./S2_fill_text_generic1_96.svg';
 import Text_S from 'illustration:./S2_fill_text_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Text(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Text(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThreeArrowsCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThreeArrowsCircle.tsx
index 13895a8709f..74cdba1f126 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThreeArrowsCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThreeArrowsCircle.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ThreeArrowsCircle_L from 'illustration:./S2_fill_threeArrowsCircle_generic1_160.svg';
 import ThreeArrowsCircle_M from 'illustration:./S2_fill_threeArrowsCircle_generic1_96.svg';
 import ThreeArrowsCircle_S from 'illustration:./S2_fill_threeArrowsCircle_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ThreeArrowsCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ThreeArrowsCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThumbsUp.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThumbsUp.tsx
index 6871d27e5a0..84b2a0d5fbd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThumbsUp.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/ThumbsUp.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ThumbsUp_L from 'illustration:./S2_fill_thumbsUp_generic1_160.svg';
 import ThumbsUp_M from 'illustration:./S2_fill_thumbsUp_generic1_96.svg';
 import ThumbsUp_S from 'illustration:./S2_fill_thumbsUp_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ThumbsUp(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ThumbsUp(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Transform.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Transform.tsx
index d3533ba7440..78a594f417b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Transform.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Transform.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Transform_L from 'illustration:./S2_fill_transform_generic1_160.svg';
 import Transform_M from 'illustration:./S2_fill_transform_generic1_96.svg';
 import Transform_S from 'illustration:./S2_fill_transform_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Transform(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Transform(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Translate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Translate.tsx
index b311b4a06c3..8e2fba37fb0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Translate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Translate.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Translate_L from 'illustration:./S2_fill_translate_generic1_160.svg';
 import Translate_M from 'illustration:./S2_fill_translate_generic1_96.svg';
 import Translate_S from 'illustration:./S2_fill_translate_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Translate(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Translate(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trash.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trash.tsx
index a0652b6b751..c0c918267b3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trash.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trash.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Trash_L from 'illustration:./S2_fill_trash_generic1_160.svg';
 import Trash_M from 'illustration:./S2_fill_trash_generic1_96.svg';
 import Trash_S from 'illustration:./S2_fill_trash_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Trash(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Trash(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trophy.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trophy.tsx
index bdcd0230f53..1abf4f1cd41 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trophy.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Trophy.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Trophy_L from 'illustration:./S2_fill_trophy_generic1_160.svg';
 import Trophy_M from 'illustration:./S2_fill_trophy_generic1_96.svg';
 import Trophy_S from 'illustration:./S2_fill_trophy_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Trophy(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Trophy(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Update.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Update.tsx
index 633f44dd4a6..68cb384c631 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Update.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Update.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Update_L from 'illustration:./S2_fill_update_generic1_160.svg';
 import Update_M from 'illustration:./S2_fill_update_generic1_96.svg';
 import Update_S from 'illustration:./S2_fill_update_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Update(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Update(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Upload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Upload.tsx
index 8ae5fa7451f..5b6874eb6fa 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Upload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Upload.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Upload_L from 'illustration:./S2_fill_upload_generic1_160.svg';
 import Upload_M from 'illustration:./S2_fill_upload_generic1_96.svg';
 import Upload_S from 'illustration:./S2_fill_upload_generic1_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Upload(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Upload(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/User.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/User.tsx
index ba975040c9f..8e8799ca452 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/User.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/User.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import User_L from 'illustration:./S2_fill_user_generic1_160.svg';
 import User_M from 'illustration:./S2_fill_user_generic1_96.svg';
 import User_S from 'illustration:./S2_fill_user_generic1_48.svg';
 
-export default function User(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function User(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserAvatar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserAvatar.tsx
index 3f2597b9d75..74648e7c5ec 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserAvatar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserAvatar.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import UserAvatar_L from 'illustration:./S2_fill_userAvatar_generic1_160.svg';
 import UserAvatar_M from 'illustration:./S2_fill_userAvatar_generic1_96.svg';
 import UserAvatar_S from 'illustration:./S2_fill_userAvatar_generic1_48.svg';
 
-export default function UserAvatar(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function UserAvatar(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserGroup.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserGroup.tsx
index 326c5f9977a..ae1c41c58c2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserGroup.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/UserGroup.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import UserGroup_L from 'illustration:./S2_fill_userGroup_generic1_160.svg';
 import UserGroup_M from 'illustration:./S2_fill_userGroup_generic1_96.svg';
 import UserGroup_S from 'illustration:./S2_fill_userGroup_generic1_48.svg';
 
-export default function UserGroup(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function UserGroup(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VectorDraw.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VectorDraw.tsx
index 6db576b6561..1edbf9aa757 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VectorDraw.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VectorDraw.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import VectorDraw_L from 'illustration:./S2_fill_vectorDraw_generic1_160.svg';
 import VectorDraw_M from 'illustration:./S2_fill_vectorDraw_generic1_96.svg';
 import VectorDraw_S from 'illustration:./S2_fill_vectorDraw_generic1_48.svg';
 
-export default function VectorDraw(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function VectorDraw(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Video.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Video.tsx
index 6b46d75897c..615815ecbe6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Video.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Video.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import Video_L from 'illustration:./S2_fill_video_generic1_160.svg';
 import Video_M from 'illustration:./S2_fill_video_generic1_96.svg';
 import Video_S from 'illustration:./S2_fill_video_generic1_48.svg';
 
-export default function Video(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Video(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Volume.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Volume.tsx
index 77656dcaaf6..abd41027299 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Volume.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Volume.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import Volume_L from 'illustration:./S2_fill_volume_generic1_160.svg';
 import Volume_M from 'illustration:./S2_fill_volume_generic1_96.svg';
 import Volume_S from 'illustration:./S2_fill_volume_generic1_48.svg';
 
-export default function Volume(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Volume(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VolumeOne.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VolumeOne.tsx
index 8202627351e..c0a9de197b8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VolumeOne.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/VolumeOne.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import VolumeOne_L from 'illustration:./S2_fill_volumeOne_generic1_160.svg';
 import VolumeOne_M from 'illustration:./S2_fill_volumeOne_generic1_96.svg';
 import VolumeOne_S from 'illustration:./S2_fill_volumeOne_generic1_48.svg';
 
-export default function VolumeOne(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function VolumeOne(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Wallet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Wallet.tsx
index 9728ba5f6aa..0f02a464f52 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Wallet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic1/Wallet.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import Wallet_L from 'illustration:./S2_fill_wallet_generic1_160.svg';
 import Wallet_M from 'illustration:./S2_fill_wallet_generic1_96.svg';
 import Wallet_S from 'illustration:./S2_fill_wallet_generic1_48.svg';
 
-export default function Wallet(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Wallet(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3D.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3D.tsx
index 8fa7ccf9427..303e3d0fd5b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3D.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3D.tsx
@@ -13,10 +13,11 @@
 import _3D_L from 'illustration:./S2_fill_3D_generic2_160.svg';
 import _3D_M from 'illustration:./S2_fill_3D_generic2_96.svg';
 import _3D_S from 'illustration:./S2_fill_3D_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function _3D(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function _3D(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3Dasset.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3Dasset.tsx
index 84c6388731d..870304921f1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3Dasset.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/3Dasset.tsx
@@ -13,10 +13,11 @@
 import _3Dasset_L from 'illustration:./S2_fill_3Dasset_generic2_160.svg';
 import _3Dasset_M from 'illustration:./S2_fill_3Dasset_generic2_96.svg';
 import _3Dasset_S from 'illustration:./S2_fill_3Dasset_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function _3Dasset(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function _3Dasset(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerate.tsx
index c5a396c110d..a8c6d6f5ad8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerate.tsx
@@ -13,10 +13,11 @@
 import AIGenerate_L from 'illustration:./S2_fill_AIGenerate_generic2_160.svg';
 import AIGenerate_M from 'illustration:./S2_fill_AIGenerate_generic2_96.svg';
 import AIGenerate_S from 'illustration:./S2_fill_AIGenerate_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AIGenerate(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AIGenerate(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerateImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerateImage.tsx
index 6c06cf17c09..9d608156ce3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerateImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIGenerateImage.tsx
@@ -13,10 +13,11 @@
 import AIGenerateImage_L from 'illustration:./S2_fill_AIGenerateImage_generic2_160.svg';
 import AIGenerateImage_M from 'illustration:./S2_fill_AIGenerateImage_generic2_96.svg';
 import AIGenerateImage_S from 'illustration:./S2_fill_AIGenerateImage_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AIGenerateImage(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AIGenerateImage(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIchat.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIchat.tsx
index d53904bef6a..e9baa6031c3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIchat.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AIchat.tsx
@@ -13,10 +13,11 @@
 import AIchat_L from 'illustration:./S2_fill_AIchat_generic2_160.svg';
 import AIchat_M from 'illustration:./S2_fill_AIchat_generic2_96.svg';
 import AIchat_S from 'illustration:./S2_fill_AIchat_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AIchat(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AIchat(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Accessibility.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Accessibility.tsx
index 17d3de5c300..827e1af7c66 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Accessibility.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Accessibility.tsx
@@ -13,10 +13,11 @@
 import Accessibility_L from 'illustration:./S2_fill_accessibility_generic2_160.svg';
 import Accessibility_M from 'illustration:./S2_fill_accessibility_generic2_96.svg';
 import Accessibility_S from 'illustration:./S2_fill_accessibility_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Accessibility(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Accessibility(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Animation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Animation.tsx
index 502d36953ae..17efad21863 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Animation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Animation.tsx
@@ -13,10 +13,11 @@
 import Animation_L from 'illustration:./S2_fill_animation_generic2_160.svg';
 import Animation_M from 'illustration:./S2_fill_animation_generic2_96.svg';
 import Animation_S from 'illustration:./S2_fill_animation_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Animation(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Animation(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Apps.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Apps.tsx
index d000c841c77..0f40110a02e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Apps.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Apps.tsx
@@ -13,10 +13,11 @@
 import Apps_L from 'illustration:./S2_fill_apps_generic2_160.svg';
 import Apps_M from 'illustration:./S2_fill_apps_generic2_96.svg';
 import Apps_S from 'illustration:./S2_fill_apps_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Apps(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Apps(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Artboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Artboard.tsx
index 89788362aad..240edd55e58 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Artboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Artboard.tsx
@@ -13,10 +13,11 @@
 import Artboard_L from 'illustration:./S2_fill_artboard_generic2_160.svg';
 import Artboard_M from 'illustration:./S2_fill_artboard_generic2_96.svg';
 import Artboard_S from 'illustration:./S2_fill_artboard_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Artboard(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Artboard(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Assets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Assets.tsx
index 9c78fd75375..c1223e9cc18 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Assets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Assets.tsx
@@ -13,10 +13,11 @@
 import Assets_L from 'illustration:./S2_fill_assets_generic2_160.svg';
 import Assets_M from 'illustration:./S2_fill_assets_generic2_96.svg';
 import Assets_S from 'illustration:./S2_fill_assets_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Assets(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Assets(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AudioWave.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AudioWave.tsx
index 50e2c5f7665..3ba67aee9f6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AudioWave.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/AudioWave.tsx
@@ -13,10 +13,11 @@
 import AudioWave_L from 'illustration:./S2_fill_audioWave_generic2_160.svg';
 import AudioWave_M from 'illustration:./S2_fill_audioWave_generic2_96.svg';
 import AudioWave_S from 'illustration:./S2_fill_audioWave_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AudioWave(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AudioWave(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BadgeVerified.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BadgeVerified.tsx
index 183ef90d467..947cfee412a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BadgeVerified.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BadgeVerified.tsx
@@ -13,10 +13,11 @@
 import BadgeVerified_L from 'illustration:./S2_fill_badgeVerified_generic2_160.svg';
 import BadgeVerified_M from 'illustration:./S2_fill_badgeVerified_generic2_96.svg';
 import BadgeVerified_S from 'illustration:./S2_fill_badgeVerified_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BadgeVerified(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BadgeVerified(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bell.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bell.tsx
index 8c44af63049..6326c781039 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bell.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bell.tsx
@@ -13,10 +13,11 @@
 import Bell_L from 'illustration:./S2_fill_bell_generic2_160.svg';
 import Bell_M from 'illustration:./S2_fill_bell_generic2_96.svg';
 import Bell_S from 'illustration:./S2_fill_bell_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Bell(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Bell(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bolt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bolt.tsx
index 39b1cb653ab..dc3848d4942 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bolt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Bolt.tsx
@@ -13,10 +13,11 @@
 import Bolt_L from 'illustration:./S2_fill_bolt_generic2_160.svg';
 import Bolt_M from 'illustration:./S2_fill_bolt_generic2_96.svg';
 import Bolt_S from 'illustration:./S2_fill_bolt_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Bolt(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Bolt(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brand.tsx
index 486533c2235..d2788aa331b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brand.tsx
@@ -13,10 +13,11 @@
 import Brand_L from 'illustration:./S2_fill_brand_generic2_160.svg';
 import Brand_M from 'illustration:./S2_fill_brand_generic2_96.svg';
 import Brand_S from 'illustration:./S2_fill_brand_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Brand(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Brand(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Briefcase.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Briefcase.tsx
index 4c1ad70ea2c..085ea96e90e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Briefcase.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Briefcase.tsx
@@ -13,10 +13,11 @@
 import Briefcase_L from 'illustration:./S2_fill_briefcase_generic2_160.svg';
 import Briefcase_M from 'illustration:./S2_fill_briefcase_generic2_96.svg';
 import Briefcase_S from 'illustration:./S2_fill_briefcase_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Briefcase(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Briefcase(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BrightnessContrast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BrightnessContrast.tsx
index 5a1048c17f0..8de257eeb3a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BrightnessContrast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BrightnessContrast.tsx
@@ -13,10 +13,11 @@
 import BrightnessContrast_L from 'illustration:./S2_fill_brightnessContrast_generic2_160.svg';
 import BrightnessContrast_M from 'illustration:./S2_fill_brightnessContrast_generic2_96.svg';
 import BrightnessContrast_S from 'illustration:./S2_fill_brightnessContrast_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BrightnessContrast(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BrightnessContrast(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Browser.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Browser.tsx
index 5e8316845e4..0547f8a8e07 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Browser.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Browser.tsx
@@ -13,10 +13,11 @@
 import Browser_L from 'illustration:./S2_fill_browser_generic2_160.svg';
 import Browser_M from 'illustration:./S2_fill_browser_generic2_96.svg';
 import Browser_S from 'illustration:./S2_fill_browser_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Browser(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Browser(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brush.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brush.tsx
index a9fc1b724fb..1f2b834170f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brush.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Brush.tsx
@@ -13,10 +13,11 @@
 import Brush_L from 'illustration:./S2_fill_brush_generic2_160.svg';
 import Brush_M from 'illustration:./S2_fill_brush_generic2_96.svg';
 import Brush_S from 'illustration:./S2_fill_brush_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Brush(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Brush(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BuildTable.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BuildTable.tsx
index 3b0ae696873..6eecbeb21d9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BuildTable.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/BuildTable.tsx
@@ -13,10 +13,11 @@
 import BuildTable_L from 'illustration:./S2_fill_buildTable_generic2_160.svg';
 import BuildTable_M from 'illustration:./S2_fill_buildTable_generic2_96.svg';
 import BuildTable_S from 'illustration:./S2_fill_buildTable_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BuildTable(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BuildTable(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Buildings.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Buildings.tsx
index e6fa41dfe5a..c219ee7b244 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Buildings.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Buildings.tsx
@@ -13,10 +13,11 @@
 import Buildings_L from 'illustration:./S2_fill_buildings_generic2_160.svg';
 import Buildings_M from 'illustration:./S2_fill_buildings_generic2_96.svg';
 import Buildings_S from 'illustration:./S2_fill_buildings_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Buildings(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Buildings(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Calendar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Calendar.tsx
index ef1d3985c60..d19e35a41d5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Calendar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Calendar.tsx
@@ -13,10 +13,11 @@
 import Calendar_L from 'illustration:./S2_fill_calendar_generic2_160.svg';
 import Calendar_M from 'illustration:./S2_fill_calendar_generic2_96.svg';
 import Calendar_S from 'illustration:./S2_fill_calendar_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Calendar(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Calendar(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Camera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Camera.tsx
index 33b618ee78b..1f830a72489 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Camera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Camera.tsx
@@ -13,10 +13,11 @@
 import Camera_L from 'illustration:./S2_fill_camera_generic2_160.svg';
 import Camera_M from 'illustration:./S2_fill_camera_generic2_96.svg';
 import Camera_S from 'illustration:./S2_fill_camera_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Camera(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Camera(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CardTapPayment.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CardTapPayment.tsx
index 58b42856d39..a439c61dc91 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CardTapPayment.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CardTapPayment.tsx
@@ -13,10 +13,11 @@
 import CardTapPayment_L from 'illustration:./S2_fill_cardTapPayment_generic2_160.svg';
 import CardTapPayment_M from 'illustration:./S2_fill_cardTapPayment_generic2_96.svg';
 import CardTapPayment_S from 'illustration:./S2_fill_cardTapPayment_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CardTapPayment(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CardTapPayment(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Channel.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Channel.tsx
index f43deefe11e..e107f2595ca 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Channel.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Channel.tsx
@@ -13,10 +13,11 @@
 import Channel_L from 'illustration:./S2_fill_channel_generic2_160.svg';
 import Channel_M from 'illustration:./S2_fill_channel_generic2_96.svg';
 import Channel_S from 'illustration:./S2_fill_channel_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Channel(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Channel(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ChartAreaStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ChartAreaStack.tsx
index a4989f36258..54b43d88b5b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ChartAreaStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ChartAreaStack.tsx
@@ -13,10 +13,11 @@
 import ChartAreaStack_L from 'illustration:./S2_fill_chartAreaStack_generic2_160.svg';
 import ChartAreaStack_M from 'illustration:./S2_fill_chartAreaStack_generic2_96.svg';
 import ChartAreaStack_S from 'illustration:./S2_fill_chartAreaStack_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ChartAreaStack(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ChartAreaStack(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Chatbubble.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Chatbubble.tsx
index 500ab82bdb2..c6d4565bbb4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Chatbubble.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Chatbubble.tsx
@@ -13,10 +13,11 @@
 import Chatbubble_L from 'illustration:./S2_fill_chatbubble_generic2_160.svg';
 import Chatbubble_M from 'illustration:./S2_fill_chatbubble_generic2_96.svg';
 import Chatbubble_S from 'illustration:./S2_fill_chatbubble_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Chatbubble(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Chatbubble(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Checkmark.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Checkmark.tsx
index bc40e8dc42c..97cb46b0426 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Checkmark.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Checkmark.tsx
@@ -13,10 +13,11 @@
 import Checkmark_L from 'illustration:./S2_fill_checkmark_generic2_160.svg';
 import Checkmark_M from 'illustration:./S2_fill_checkmark_generic2_96.svg';
 import Checkmark_S from 'illustration:./S2_fill_checkmark_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Checkmark(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Checkmark(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clipboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clipboard.tsx
index 0c9115a6f06..d295d37b905 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clipboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clipboard.tsx
@@ -13,10 +13,11 @@
 import Clipboard_L from 'illustration:./S2_fill_clipboard_generic2_160.svg';
 import Clipboard_M from 'illustration:./S2_fill_clipboard_generic2_96.svg';
 import Clipboard_S from 'illustration:./S2_fill_clipboard_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Clipboard(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Clipboard(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clock.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clock.tsx
index 5f323e4b260..18861bb9001 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clock.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Clock.tsx
@@ -13,10 +13,11 @@
 import Clock_L from 'illustration:./S2_fill_clock_generic2_160.svg';
 import Clock_M from 'illustration:./S2_fill_clock_generic2_96.svg';
 import Clock_S from 'illustration:./S2_fill_clock_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Clock(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Clock(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cloud.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cloud.tsx
index 2e1c98635b5..e0411575032 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cloud.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cloud.tsx
@@ -13,10 +13,11 @@
 import Cloud_L from 'illustration:./S2_fill_cloud_generic2_160.svg';
 import Cloud_M from 'illustration:./S2_fill_cloud_generic2_96.svg';
 import Cloud_S from 'illustration:./S2_fill_cloud_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Cloud(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Cloud(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CloudUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CloudUpload.tsx
index bd7339ea3cc..8045cff4c2b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CloudUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CloudUpload.tsx
@@ -13,10 +13,11 @@
 import CloudUpload_L from 'illustration:./S2_fill_cloudUpload_generic2_160.svg';
 import CloudUpload_M from 'illustration:./S2_fill_cloudUpload_generic2_96.svg';
 import CloudUpload_S from 'illustration:./S2_fill_cloudUpload_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CloudUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CloudUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CodeBrackets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CodeBrackets.tsx
index 1b82e8e77af..07e2d94c63d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CodeBrackets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CodeBrackets.tsx
@@ -13,10 +13,11 @@
 import CodeBrackets_L from 'illustration:./S2_fill_CodeBrackets_generic2_160.svg';
 import CodeBrackets_M from 'illustration:./S2_fill_CodeBrackets_generic2_96.svg';
 import CodeBrackets_S from 'illustration:./S2_fill_CodeBrackets_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CodeBrackets(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CodeBrackets(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Color.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Color.tsx
index c390ab9c301..23f037b4e53 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Color.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Color.tsx
@@ -13,10 +13,11 @@
 import Color_L from 'illustration:./S2_fill_color_generic2_160.svg';
 import Color_M from 'illustration:./S2_fill_color_generic2_96.svg';
 import Color_S from 'illustration:./S2_fill_color_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Color(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Color(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CommentText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CommentText.tsx
index 51182510b16..dad5769d17e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CommentText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/CommentText.tsx
@@ -13,10 +13,11 @@
 import CommentText_L from 'illustration:./S2_fill_commentText_generic2_160.svg';
 import CommentText_M from 'illustration:./S2_fill_commentText_generic2_96.svg';
 import CommentText_S from 'illustration:./S2_fill_commentText_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CommentText(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CommentText(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Confetti.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Confetti.tsx
index 7c873367db2..bf56836fcbd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Confetti.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Confetti.tsx
@@ -13,10 +13,11 @@
 import Confetti_L from 'illustration:./S2_fill_confetti_generic2_160.svg';
 import Confetti_M from 'illustration:./S2_fill_confetti_generic2_96.svg';
 import Confetti_S from 'illustration:./S2_fill_confetti_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Confetti(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Confetti(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Conversationbubbles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Conversationbubbles.tsx
index cfda6de918a..4c1cae662f0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Conversationbubbles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Conversationbubbles.tsx
@@ -13,10 +13,11 @@
 import Conversationbubbles_L from 'illustration:./S2_fill_conversationbubbles_generic2_160.svg';
 import Conversationbubbles_M from 'illustration:./S2_fill_conversationbubbles_generic2_96.svg';
 import Conversationbubbles_S from 'illustration:./S2_fill_conversationbubbles_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Conversationbubbles(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Conversationbubbles(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Crop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Crop.tsx
index 5807ced37df..86b0d946d8a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Crop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Crop.tsx
@@ -13,10 +13,11 @@
 import Crop_L from 'illustration:./S2_fill_crop_generic2_160.svg';
 import Crop_M from 'illustration:./S2_fill_crop_generic2_96.svg';
 import Crop_S from 'illustration:./S2_fill_crop_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Crop(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Crop(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cursor.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cursor.tsx
index 1b420d0a3ff..7fc8e5e8d4a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cursor.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cursor.tsx
@@ -13,10 +13,11 @@
 import Cursor_L from 'illustration:./S2_fill_cursor_generic2_160.svg';
 import Cursor_M from 'illustration:./S2_fill_cursor_generic2_96.svg';
 import Cursor_S from 'illustration:./S2_fill_cursor_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Cursor(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Cursor(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cut.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cut.tsx
index 63748698041..11b6d1ac976 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cut.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Cut.tsx
@@ -13,10 +13,11 @@
 import Cut_L from 'illustration:./S2_fill_cut_generic2_160.svg';
 import Cut_M from 'illustration:./S2_fill_cut_generic2_96.svg';
 import Cut_S from 'illustration:./S2_fill_cut_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Cut(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Cut(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Data.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Data.tsx
index 964ea0fe995..35268818eda 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Data.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Data.tsx
@@ -13,10 +13,11 @@
 import Data_L from 'illustration:./S2_fill_data_generic2_160.svg';
 import Data_M from 'illustration:./S2_fill_data_generic2_96.svg';
 import Data_S from 'illustration:./S2_fill_data_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Data(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Data(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DataAnalytics.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DataAnalytics.tsx
index 10cbbefd739..c92aec2b8bd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DataAnalytics.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DataAnalytics.tsx
@@ -13,10 +13,11 @@
 import DataAnalytics_L from 'illustration:./S2_fill_dataAnalytics_generic2_160.svg';
 import DataAnalytics_M from 'illustration:./S2_fill_dataAnalytics_generic2_96.svg';
 import DataAnalytics_S from 'illustration:./S2_fill_dataAnalytics_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function DataAnalytics(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function DataAnalytics(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Desktop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Desktop.tsx
index cb737ab6708..fc1901b54b7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Desktop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Desktop.tsx
@@ -13,10 +13,11 @@
 import Desktop_L from 'illustration:./S2_fill_desktop_generic2_160.svg';
 import Desktop_M from 'illustration:./S2_fill_desktop_generic2_96.svg';
 import Desktop_S from 'illustration:./S2_fill_desktop_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Desktop(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Desktop(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Diamond.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Diamond.tsx
index e2c72df743e..75ce17bcc77 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Diamond.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Diamond.tsx
@@ -13,10 +13,11 @@
 import Diamond_L from 'illustration:./S2_fill_diamond_generic2_160.svg';
 import Diamond_M from 'illustration:./S2_fill_diamond_generic2_96.svg';
 import Diamond_S from 'illustration:./S2_fill_diamond_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Diamond(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Diamond(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Document.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Document.tsx
index 3b254d700ab..73a7be049f5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Document.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Document.tsx
@@ -13,10 +13,11 @@
 import Document_L from 'illustration:./S2_fill_document_generic2_160.svg';
 import Document_M from 'illustration:./S2_fill_document_generic2_96.svg';
 import Document_S from 'illustration:./S2_fill_document_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Document(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Document(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Download.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Download.tsx
index e4e071ce230..48e6334ac00 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Download.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Download.tsx
@@ -13,10 +13,11 @@
 import Download_L from 'illustration:./S2_fill_download_generic2_160.svg';
 import Download_M from 'illustration:./S2_fill_download_generic2_96.svg';
 import Download_S from 'illustration:./S2_fill_download_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Download(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Download(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DropToUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DropToUpload.tsx
index 8ad0291e123..2360b363312 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DropToUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/DropToUpload.tsx
@@ -13,10 +13,11 @@
 import DropToUpload_L from 'illustration:./S2_fill_dropToUpload_generic2_160.svg';
 import DropToUpload_M from 'illustration:./S2_fill_dropToUpload_generic2_96.svg';
 import DropToUpload_S from 'illustration:./S2_fill_dropToUpload_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function DropToUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function DropToUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Education.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Education.tsx
index b7bfa417bc5..0cfc8443bce 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Education.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Education.tsx
@@ -13,10 +13,11 @@
 import Education_L from 'illustration:./S2_fill_education_generic2_160.svg';
 import Education_M from 'illustration:./S2_fill_education_generic2_96.svg';
 import Education_S from 'illustration:./S2_fill_education_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Education(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Education(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Effects.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Effects.tsx
index bf9d10fd1a9..c35adc055f1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Effects.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Effects.tsx
@@ -13,10 +13,11 @@
 import Effects_L from 'illustration:./S2_fill_effects_generic2_160.svg';
 import Effects_M from 'illustration:./S2_fill_effects_generic2_96.svg';
 import Effects_S from 'illustration:./S2_fill_effects_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Effects(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Effects(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Emoji.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Emoji.tsx
index 75b86a04eb2..b7cac0983d5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Emoji.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Emoji.tsx
@@ -13,10 +13,11 @@
 import Emoji_L from 'illustration:./S2_fill_emoji_generic2_160.svg';
 import Emoji_M from 'illustration:./S2_fill_emoji_generic2_96.svg';
 import Emoji_S from 'illustration:./S2_fill_emoji_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Emoji(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Emoji(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/EmptyStateExport.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/EmptyStateExport.tsx
index 5162dc8848f..13b47cb8499 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/EmptyStateExport.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/EmptyStateExport.tsx
@@ -13,10 +13,11 @@
 import EmptyStateExport_L from 'illustration:./S2_fill_EmptyStateExport_generic2_160.svg';
 import EmptyStateExport_M from 'illustration:./S2_fill_EmptyStateExport_generic2_96.svg';
 import EmptyStateExport_S from 'illustration:./S2_fill_EmptyStateExport_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function EmptyStateExport(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function EmptyStateExport(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Explosion.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Explosion.tsx
index 43cd286e4d6..7778aa12d7f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Explosion.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Explosion.tsx
@@ -13,10 +13,11 @@
 import Explosion_L from 'illustration:./S2_fill_explosion_generic2_160.svg';
 import Explosion_M from 'illustration:./S2_fill_explosion_generic2_96.svg';
 import Explosion_S from 'illustration:./S2_fill_explosion_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Explosion(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Explosion(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ExportTo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ExportTo.tsx
index e31603268bb..453ce5c6e48 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ExportTo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ExportTo.tsx
@@ -13,10 +13,11 @@
 import ExportTo_L from 'illustration:./S2_fill_exportTo_generic2_160.svg';
 import ExportTo_M from 'illustration:./S2_fill_exportTo_generic2_96.svg';
 import ExportTo_S from 'illustration:./S2_fill_exportTo_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ExportTo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ExportTo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Exposure.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Exposure.tsx
index 213b28db14b..5f095732177 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Exposure.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Exposure.tsx
@@ -13,10 +13,11 @@
 import Exposure_L from 'illustration:./S2_fill_exposure_generic2_160.svg';
 import Exposure_M from 'illustration:./S2_fill_exposure_generic2_96.svg';
 import Exposure_S from 'illustration:./S2_fill_exposure_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Exposure(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Exposure(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileImage.tsx
index 9d16b67fe56..fa5be3f193a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileImage.tsx
@@ -13,10 +13,11 @@
 import FileImage_L from 'illustration:./S2_fill_fileImage_generic2_160.svg';
 import FileImage_M from 'illustration:./S2_fill_fileImage_generic2_96.svg';
 import FileImage_S from 'illustration:./S2_fill_fileImage_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileImage(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileImage(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileShared.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileShared.tsx
index ad5f23ab6ae..a5799aa302a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileShared.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileShared.tsx
@@ -13,10 +13,11 @@
 import FileShared_L from 'illustration:./S2_fill_fileShared_generic2_160.svg';
 import FileShared_M from 'illustration:./S2_fill_fileShared_generic2_96.svg';
 import FileShared_S from 'illustration:./S2_fill_fileShared_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileShared(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileShared(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileText.tsx
index d94fdc94289..3012003eebd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileText.tsx
@@ -13,10 +13,11 @@
 import FileText_L from 'illustration:./S2_fill_fileText_generic2_160.svg';
 import FileText_M from 'illustration:./S2_fill_fileText_generic2_96.svg';
 import FileText_S from 'illustration:./S2_fill_fileText_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileText(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileText(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileVideo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileVideo.tsx
index eab310f30b2..6251cc456ec 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileVideo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileVideo.tsx
@@ -13,10 +13,11 @@
 import FileVideo_L from 'illustration:./S2_fill_fileVideo_generic2_160.svg';
 import FileVideo_M from 'illustration:./S2_fill_fileVideo_generic2_96.svg';
 import FileVideo_S from 'illustration:./S2_fill_fileVideo_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileVideo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileVideo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileZip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileZip.tsx
index 6fa8a483bdc..460b9ee0021 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileZip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FileZip.tsx
@@ -13,10 +13,11 @@
 import FileZip_L from 'illustration:./S2_fill_fileZip_generic2_160.svg';
 import FileZip_M from 'illustration:./S2_fill_fileZip_generic2_96.svg';
 import FileZip_S from 'illustration:./S2_fill_fileZip_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileZip(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileZip(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filmstrip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filmstrip.tsx
index f578f3313b0..24274491b54 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filmstrip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filmstrip.tsx
@@ -13,10 +13,11 @@
 import Filmstrip_L from 'illustration:./S2_fill_filmstrip_generic2_160.svg';
 import Filmstrip_M from 'illustration:./S2_fill_filmstrip_generic2_96.svg';
 import Filmstrip_S from 'illustration:./S2_fill_filmstrip_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Filmstrip(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Filmstrip(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filter.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filter.tsx
index 9e19705a141..e9d103e406b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filter.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filter.tsx
@@ -13,10 +13,11 @@
 import Filter_L from 'illustration:./S2_fill_filter_generic2_160.svg';
 import Filter_M from 'illustration:./S2_fill_filter_generic2_96.svg';
 import Filter_S from 'illustration:./S2_fill_filter_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Filter(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Filter(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filters.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filters.tsx
index 8e8cff4d90e..5b7fd62e928 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filters.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Filters.tsx
@@ -13,10 +13,11 @@
 import Filters_L from 'illustration:./S2_fill_filters_generic2_160.svg';
 import Filters_M from 'illustration:./S2_fill_filters_generic2_96.svg';
 import Filters_S from 'illustration:./S2_fill_filters_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Filters(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Filters(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Fireworks.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Fireworks.tsx
index edcaf9db5e3..d9282a81279 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Fireworks.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Fireworks.tsx
@@ -13,10 +13,11 @@
 import Fireworks_L from 'illustration:./S2_fill_fireworks_generic2_160.svg';
 import Fireworks_M from 'illustration:./S2_fill_fireworks_generic2_96.svg';
 import Fireworks_S from 'illustration:./S2_fill_fireworks_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Fireworks(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Fireworks(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Flag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Flag.tsx
index 7b8af526aab..aca1d14bb87 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Flag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Flag.tsx
@@ -13,10 +13,11 @@
 import Flag_L from 'illustration:./S2_fill_flag_generic2_160.svg';
 import Flag_M from 'illustration:./S2_fill_flag_generic2_96.svg';
 import Flag_S from 'illustration:./S2_fill_flag_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Flag(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Flag(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCheckmark.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCheckmark.tsx
index d89d6d2a9f2..db540ef8ca1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCheckmark.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCheckmark.tsx
@@ -13,10 +13,11 @@
 import FlagCheckmark_L from 'illustration:./S2_fill_flagCheckmark_generic2_160.svg';
 import FlagCheckmark_M from 'illustration:./S2_fill_flagCheckmark_generic2_96.svg';
 import FlagCheckmark_S from 'illustration:./S2_fill_flagCheckmark_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FlagCheckmark(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FlagCheckmark(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCross.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCross.tsx
index 50b1e5d8aeb..17a1b09ff2e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCross.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FlagCross.tsx
@@ -13,10 +13,11 @@
 import FlagCross_L from 'illustration:./S2_fill_flagCross_generic2_160.svg';
 import FlagCross_M from 'illustration:./S2_fill_flagCross_generic2_96.svg';
 import FlagCross_S from 'illustration:./S2_fill_flagCross_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FlagCross(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FlagCross(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderClose.tsx
index d477d04d475..8f6d85ff11f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderClose.tsx
@@ -13,10 +13,11 @@
 import FolderClose_L from 'illustration:./S2_fill_folderClose_generic2_160.svg';
 import FolderClose_M from 'illustration:./S2_fill_folderClose_generic2_96.svg';
 import FolderClose_S from 'illustration:./S2_fill_folderClose_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FolderClose(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FolderClose(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderOpen.tsx
index 3788f151c79..7d1f5e2af7d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderOpen.tsx
@@ -13,10 +13,11 @@
 import FolderOpen_L from 'illustration:./S2_fill_folderOpen_generic2_160.svg';
 import FolderOpen_M from 'illustration:./S2_fill_folderOpen_generic2_96.svg';
 import FolderOpen_S from 'illustration:./S2_fill_folderOpen_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FolderOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FolderOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderShared.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderShared.tsx
index 788b777048e..88f369dbc80 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderShared.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/FolderShared.tsx
@@ -13,10 +13,11 @@
 import FolderShared_L from 'illustration:./S2_fill_folderShared_generic2_160.svg';
 import FolderShared_M from 'illustration:./S2_fill_folderShared_generic2_96.svg';
 import FolderShared_S from 'illustration:./S2_fill_folderShared_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FolderShared(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FolderShared(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GearSetting.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GearSetting.tsx
index b28bba62c00..13a6e603686 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GearSetting.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GearSetting.tsx
@@ -13,10 +13,11 @@
 import GearSetting_L from 'illustration:./S2_fill_gearSetting_generic2_160.svg';
 import GearSetting_M from 'illustration:./S2_fill_gearSetting_generic2_96.svg';
 import GearSetting_S from 'illustration:./S2_fill_gearSetting_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function GearSetting(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function GearSetting(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Gift.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Gift.tsx
index 8a8005a9fd1..54ac29d3471 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Gift.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Gift.tsx
@@ -13,10 +13,11 @@
 import Gift_L from 'illustration:./S2_fill_gift_generic2_160.svg';
 import Gift_M from 'illustration:./S2_fill_gift_generic2_96.svg';
 import Gift_S from 'illustration:./S2_fill_gift_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Gift(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Gift(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Globe.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Globe.tsx
index 4f1304d236f..6ca54394ea7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Globe.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Globe.tsx
@@ -13,10 +13,11 @@
 import Globe_L from 'illustration:./S2_fill_globe_generic2_160.svg';
 import Globe_M from 'illustration:./S2_fill_globe_generic2_96.svg';
 import Globe_S from 'illustration:./S2_fill_globe_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Globe(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Globe(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GlobeGrid.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GlobeGrid.tsx
index 6bb03b83979..0ff335010c5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GlobeGrid.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GlobeGrid.tsx
@@ -13,10 +13,11 @@
 import GlobeGrid_L from 'illustration:./S2_fill_globeGrid_generic2_160.svg';
 import GlobeGrid_M from 'illustration:./S2_fill_globeGrid_generic2_96.svg';
 import GlobeGrid_S from 'illustration:./S2_fill_globeGrid_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function GlobeGrid(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function GlobeGrid(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GraphBarChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GraphBarChart.tsx
index 80982253880..ce6056937f8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GraphBarChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/GraphBarChart.tsx
@@ -13,10 +13,11 @@
 import GraphBarChart_L from 'illustration:./S2_fill_graphBarChart_generic2_160.svg';
 import GraphBarChart_M from 'illustration:./S2_fill_graphBarChart_generic2_96.svg';
 import GraphBarChart_S from 'illustration:./S2_fill_graphBarChart_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function GraphBarChart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function GraphBarChart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Hand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Hand.tsx
index 8c567f63bc6..1f7fd4d1995 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Hand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Hand.tsx
@@ -13,10 +13,11 @@
 import Hand_L from 'illustration:./S2_fill_hand_generic2_160.svg';
 import Hand_M from 'illustration:./S2_fill_hand_generic2_96.svg';
 import Hand_S from 'illustration:./S2_fill_hand_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Hand(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Hand(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Handshake.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Handshake.tsx
index d6a684cb8d7..3d93bfdd2f2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Handshake.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Handshake.tsx
@@ -13,10 +13,11 @@
 import Handshake_L from 'illustration:./S2_fill_handshake_generic2_160.svg';
 import Handshake_M from 'illustration:./S2_fill_handshake_generic2_96.svg';
 import Handshake_S from 'illustration:./S2_fill_handshake_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Handshake(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Handshake(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Heart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Heart.tsx
index ce6c3b73d7a..f1eb672aa82 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Heart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Heart.tsx
@@ -13,10 +13,11 @@
 import Heart_L from 'illustration:./S2_fill_heart_generic2_160.svg';
 import Heart_M from 'illustration:./S2_fill_heart_generic2_96.svg';
 import Heart_S from 'illustration:./S2_fill_heart_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Heart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Heart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/HelpCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/HelpCircle.tsx
index ae0f19e8d4e..f118530c2cd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/HelpCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/HelpCircle.tsx
@@ -13,10 +13,11 @@
 import HelpCircle_L from 'illustration:./S2_fill_helpCircle_generic2_160.svg';
 import HelpCircle_M from 'illustration:./S2_fill_helpCircle_generic2_96.svg';
 import HelpCircle_S from 'illustration:./S2_fill_helpCircle_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function HelpCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function HelpCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Home.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Home.tsx
index a31948245aa..1db379fedff 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Home.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Home.tsx
@@ -13,10 +13,11 @@
 import Home_L from 'illustration:./S2_fill_home_generic2_160.svg';
 import Home_M from 'illustration:./S2_fill_home_generic2_96.svg';
 import Home_S from 'illustration:./S2_fill_home_generic2_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Home(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Home(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Illustration.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Illustration.tsx
index 9c20fc79111..afc6435c9ba 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Illustration.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Illustration.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Illustration_L from 'illustration:./S2_fill_illustration_generic2_160.svg';
 import Illustration_M from 'illustration:./S2_fill_illustration_generic2_96.svg';
 import Illustration_S from 'illustration:./S2_fill_illustration_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Illustration(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Illustration(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Image.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Image.tsx
index 57dfe07a4aa..a26ce819ef6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Image.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Image.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Image_L from 'illustration:./S2_fill_image_generic2_160.svg';
 import Image_M from 'illustration:./S2_fill_image_generic2_96.svg';
 import Image_S from 'illustration:./S2_fill_image_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Image(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Image(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ImageStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ImageStack.tsx
index 14c0159ac61..62503d240bf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ImageStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ImageStack.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ImageStack_L from 'illustration:./S2_fill_imageStack_generic2_160.svg';
 import ImageStack_M from 'illustration:./S2_fill_imageStack_generic2_96.svg';
 import ImageStack_S from 'illustration:./S2_fill_imageStack_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ImageStack(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ImageStack(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/InfiniteLooping.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/InfiniteLooping.tsx
index ae64858190b..f02fdad017e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/InfiniteLooping.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/InfiniteLooping.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import InfiniteLooping_L from 'illustration:./S2_fill_infiniteLooping_generic2_160.svg';
 import InfiniteLooping_M from 'illustration:./S2_fill_infiniteLooping_generic2_96.svg';
 import InfiniteLooping_S from 'illustration:./S2_fill_infiniteLooping_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function InfiniteLooping(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function InfiniteLooping(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Information.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Information.tsx
index 68c429e0fc0..1d282ff2e19 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Information.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Information.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Information_L from 'illustration:./S2_fill_information_generic2_160.svg';
 import Information_M from 'illustration:./S2_fill_information_generic2_96.svg';
 import Information_S from 'illustration:./S2_fill_information_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Information(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Information(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Interaction.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Interaction.tsx
index 82865b98dc3..00072e154ee 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Interaction.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Interaction.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Interaction_L from 'illustration:./S2_fill_interaction_generic2_160.svg';
 import Interaction_M from 'illustration:./S2_fill_interaction_generic2_96.svg';
 import Interaction_S from 'illustration:./S2_fill_interaction_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Interaction(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Interaction(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Laptop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Laptop.tsx
index fe3c31ee0fb..3707167be01 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Laptop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Laptop.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Laptop_L from 'illustration:./S2_fill_laptop_generic2_160.svg';
 import Laptop_M from 'illustration:./S2_fill_laptop_generic2_96.svg';
 import Laptop_S from 'illustration:./S2_fill_laptop_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Laptop(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Laptop(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Layers.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Layers.tsx
index 8ec7a0bf91b..33808443877 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Layers.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Layers.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Layers_L from 'illustration:./S2_fill_layers_generic2_160.svg';
 import Layers_M from 'illustration:./S2_fill_layers_generic2_96.svg';
 import Layers_S from 'illustration:./S2_fill_layers_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Layers(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Layers(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Libraries.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Libraries.tsx
index 4c608479e4d..c3d2bcfc5df 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Libraries.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Libraries.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Libraries_L from 'illustration:./S2_fill_libraries_generic2_160.svg';
 import Libraries_M from 'illustration:./S2_fill_libraries_generic2_96.svg';
 import Libraries_S from 'illustration:./S2_fill_libraries_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Libraries(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Libraries(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lightbulb.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lightbulb.tsx
index 82939fe136b..bc202ce8aab 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lightbulb.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lightbulb.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Lightbulb_L from 'illustration:./S2_fill_lightbulb_generic2_160.svg';
 import Lightbulb_M from 'illustration:./S2_fill_lightbulb_generic2_96.svg';
 import Lightbulb_S from 'illustration:./S2_fill_lightbulb_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Lightbulb(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Lightbulb(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LightbulbRays.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LightbulbRays.tsx
index 1214d77cb69..b932864b66c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LightbulbRays.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LightbulbRays.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import LightbulbRays_L from 'illustration:./S2_fill_lightbulbRays_generic2_160.svg';
 import LightbulbRays_M from 'illustration:./S2_fill_lightbulbRays_generic2_96.svg';
 import LightbulbRays_S from 'illustration:./S2_fill_lightbulbRays_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function LightbulbRays(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function LightbulbRays(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lighten.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lighten.tsx
index d7abc07be7c..f3610973eaf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lighten.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Lighten.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Lighten_L from 'illustration:./S2_fill_lighten_generic2_160.svg';
 import Lighten_M from 'illustration:./S2_fill_lighten_generic2_96.svg';
 import Lighten_S from 'illustration:./S2_fill_lighten_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Lighten(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Lighten(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Link.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Link.tsx
index 56e99d9c89f..44a211db6f6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Link.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Link.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Link_L from 'illustration:./S2_fill_link_generic2_160.svg';
 import Link_M from 'illustration:./S2_fill_link_generic2_96.svg';
 import Link_S from 'illustration:./S2_fill_link_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Link(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Link(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Location.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Location.tsx
index c09aedebe5e..28856e541df 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Location.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Location.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Location_L from 'illustration:./S2_fill_location_generic2_160.svg';
 import Location_M from 'illustration:./S2_fill_location_generic2_96.svg';
 import Location_S from 'illustration:./S2_fill_location_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Location(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Location(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockClose.tsx
index b326579b9e1..4f882226883 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockClose.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import LockClose_L from 'illustration:./S2_fill_lockClose_generic2_160.svg';
 import LockClose_M from 'illustration:./S2_fill_lockClose_generic2_96.svg';
 import LockClose_S from 'illustration:./S2_fill_lockClose_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function LockClose(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function LockClose(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockOpen.tsx
index 85b5c860bc8..37ba6a9f745 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/LockOpen.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import LockOpen_L from 'illustration:./S2_fill_lockOpen_generic2_160.svg';
 import LockOpen_M from 'illustration:./S2_fill_lockOpen_generic2_96.svg';
 import LockOpen_S from 'illustration:./S2_fill_lockOpen_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function LockOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function LockOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Logo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Logo.tsx
index f56f71c14d2..e64e013df7a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Logo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Logo.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Logo_L from 'illustration:./S2_fill_logo_generic2_160.svg';
 import Logo_M from 'illustration:./S2_fill_logo_generic2_96.svg';
 import Logo_S from 'illustration:./S2_fill_logo_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Logo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Logo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MagicWand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MagicWand.tsx
index 1559612e11c..588fccb0133 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MagicWand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MagicWand.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MagicWand_L from 'illustration:./S2_fill_magicWand_generic2_160.svg';
 import MagicWand_M from 'illustration:./S2_fill_magicWand_generic2_96.svg';
 import MagicWand_S from 'illustration:./S2_fill_magicWand_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MagicWand(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MagicWand(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailClose.tsx
index bb6fa27ed39..3d8da1e0096 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailClose.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MailClose_L from 'illustration:./S2_fill_mailClose_generic2_160.svg';
 import MailClose_M from 'illustration:./S2_fill_mailClose_generic2_96.svg';
 import MailClose_S from 'illustration:./S2_fill_mailClose_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MailClose(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MailClose(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailOpen.tsx
index 987b509acdf..d8595def4fa 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MailOpen.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MailOpen_L from 'illustration:./S2_fill_mailOpen_generic2_160.svg';
 import MailOpen_M from 'illustration:./S2_fill_mailOpen_generic2_96.svg';
 import MailOpen_S from 'illustration:./S2_fill_mailOpen_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MailOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MailOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Market.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Market.tsx
index 519fd8df9c0..2ca1f6bf9ab 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Market.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Market.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Market_L from 'illustration:./S2_fill_market_generic2_160.svg';
 import Market_M from 'illustration:./S2_fill_market_generic2_96.svg';
 import Market_S from 'illustration:./S2_fill_market_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Market(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Market(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote.tsx
index e00ff59f71a..f783e0e3872 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MegaphonePromote_L from 'illustration:./S2_fill_megaphonePromote_generic2_160.svg';
 import MegaphonePromote_M from 'illustration:./S2_fill_megaphonePromote_generic2_96.svg';
 import MegaphonePromote_S from 'illustration:./S2_fill_megaphonePromote_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MegaphonePromote(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MegaphonePromote(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote2.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote2.tsx
index ef8869350d5..2fba07aae3d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote2.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MegaphonePromote2.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MegaphonePromote2_L from 'illustration:./S2_fill_megaphonePromote2_generic2_160.svg';
 import MegaphonePromote2_M from 'illustration:./S2_fill_megaphonePromote2_generic2_96.svg';
 import MegaphonePromote2_S from 'illustration:./S2_fill_megaphonePromote2_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MegaphonePromote2(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MegaphonePromote2(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Mention.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Mention.tsx
index 5f36a4ab61f..76857762d57 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Mention.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Mention.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Mention_L from 'illustration:./S2_fill_mention_generic2_160.svg';
 import Mention_M from 'illustration:./S2_fill_mention_generic2_96.svg';
 import Mention_S from 'illustration:./S2_fill_mention_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Mention(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Mention(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Microphone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Microphone.tsx
index d3741d5c632..fe49d70f91d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Microphone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Microphone.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Microphone_L from 'illustration:./S2_fill_microphone_generic2_160.svg';
 import Microphone_M from 'illustration:./S2_fill_microphone_generic2_96.svg';
 import Microphone_S from 'illustration:./S2_fill_microphone_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Microphone(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Microphone(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Minimize.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Minimize.tsx
index 7594333183d..83342d78042 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Minimize.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Minimize.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Minimize_L from 'illustration:./S2_fill_minimize_generic2_160.svg';
 import Minimize_M from 'illustration:./S2_fill_minimize_generic2_96.svg';
 import Minimize_S from 'illustration:./S2_fill_minimize_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Minimize(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Minimize(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MovieCamera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MovieCamera.tsx
index 3a25f94dd9e..e326fd478f0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MovieCamera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MovieCamera.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MovieCamera_L from 'illustration:./S2_fill_movieCamera_generic2_160.svg';
 import MovieCamera_M from 'illustration:./S2_fill_movieCamera_generic2_96.svg';
 import MovieCamera_S from 'illustration:./S2_fill_movieCamera_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MovieCamera(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MovieCamera(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MusicNote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MusicNote.tsx
index a252bff369c..6faa86a63aa 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MusicNote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/MusicNote.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import MusicNote_L from 'illustration:./S2_fill_musicNote_generic2_160.svg';
 import MusicNote_M from 'illustration:./S2_fill_musicNote_generic2_96.svg';
 import MusicNote_S from 'illustration:./S2_fill_musicNote_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MusicNote(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MusicNote(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/NoElements.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/NoElements.tsx
index f63075c362c..13f49b22fae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/NoElements.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/NoElements.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import NoElements_L from 'illustration:./S2_fill_noElements_generic2_160.svg';
 import NoElements_M from 'illustration:./S2_fill_noElements_generic2_96.svg';
 import NoElements_S from 'illustration:./S2_fill_noElements_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoElements(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoElements(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperairplane.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperairplane.tsx
index ac201c4fdd5..6ae40844909 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperairplane.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperairplane.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Paperairplane_L from 'illustration:./S2_fill_paperairplane_generic2_160.svg';
 import Paperairplane_M from 'illustration:./S2_fill_paperairplane_generic2_96.svg';
 import Paperairplane_S from 'illustration:./S2_fill_paperairplane_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Paperairplane(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Paperairplane(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperclip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperclip.tsx
index bbc9cc08f0d..8ae365629bf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperclip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Paperclip.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Paperclip_L from 'illustration:./S2_fill_paperclip_generic2_160.svg';
 import Paperclip_M from 'illustration:./S2_fill_paperclip_generic2_96.svg';
 import Paperclip_S from 'illustration:./S2_fill_paperclip_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Paperclip(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Paperclip(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pause.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pause.tsx
index 87689bbb7e3..0762573ed8d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pause.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pause.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Pause_L from 'illustration:./S2_fill_pause_generic2_160.svg';
 import Pause_M from 'illustration:./S2_fill_pause_generic2_96.svg';
 import Pause_S from 'illustration:./S2_fill_pause_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Pause(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Pause(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pencil.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pencil.tsx
index e89f758a083..8d43b4799a2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pencil.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pencil.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Pencil_L from 'illustration:./S2_fill_pencil_generic2_160.svg';
 import Pencil_M from 'illustration:./S2_fill_pencil_generic2_96.svg';
 import Pencil_S from 'illustration:./S2_fill_pencil_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Pencil(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Pencil(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Phone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Phone.tsx
index 3c0da0daaa0..4734d03a852 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Phone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Phone.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Phone_L from 'illustration:./S2_fill_phone_generic2_160.svg';
 import Phone_M from 'illustration:./S2_fill_phone_generic2_96.svg';
 import Phone_S from 'illustration:./S2_fill_phone_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Phone(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Phone(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PieChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PieChart.tsx
index babc16238a2..dff5fd75c91 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PieChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PieChart.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import PieChart_L from 'illustration:./S2_fill_pieChart_generic2_160.svg';
 import PieChart_M from 'illustration:./S2_fill_pieChart_generic2_96.svg';
 import PieChart_S from 'illustration:./S2_fill_pieChart_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function PieChart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function PieChart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PiggyBank.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PiggyBank.tsx
index 0f82a86b13e..df88e98f7c2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PiggyBank.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PiggyBank.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import PiggyBank_L from 'illustration:./S2_fill_piggyBank_generic2_160.svg';
 import PiggyBank_M from 'illustration:./S2_fill_piggyBank_generic2_96.svg';
 import PiggyBank_S from 'illustration:./S2_fill_piggyBank_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function PiggyBank(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function PiggyBank(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pin.tsx
index ed5524b8783..a2281ba3233 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Pin.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Pin_L from 'illustration:./S2_fill_pin_generic2_160.svg';
 import Pin_M from 'illustration:./S2_fill_pin_generic2_96.svg';
 import Pin_S from 'illustration:./S2_fill_pin_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Pin(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Pin(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Play.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Play.tsx
index 0cff40ae018..2f0218af52a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Play.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Play.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Play_L from 'illustration:./S2_fill_play_generic2_160.svg';
 import Play_M from 'illustration:./S2_fill_play_generic2_96.svg';
 import Play_S from 'illustration:./S2_fill_play_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Play(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Play(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PlayTriangle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PlayTriangle.tsx
index b29b24894e0..712f019a26d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PlayTriangle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/PlayTriangle.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import PlayTriangle_L from 'illustration:./S2_fill_playTriangle_generic2_160.svg';
 import PlayTriangle_M from 'illustration:./S2_fill_playTriangle_generic2_96.svg';
 import PlayTriangle_S from 'illustration:./S2_fill_playTriangle_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function PlayTriangle(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function PlayTriangle(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Plugin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Plugin.tsx
index 20d71234fe5..a05bc911a61 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Plugin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Plugin.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Plugin_L from 'illustration:./S2_fill_plugin_generic2_160.svg';
 import Plugin_M from 'illustration:./S2_fill_plugin_generic2_96.svg';
 import Plugin_S from 'illustration:./S2_fill_plugin_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Plugin(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Plugin(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Prompt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Prompt.tsx
index 413e230f05a..828e4b6cebb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Prompt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Prompt.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Prompt_L from 'illustration:./S2_fill_prompt_generic2_160.svg';
 import Prompt_M from 'illustration:./S2_fill_prompt_generic2_96.svg';
 import Prompt_S from 'illustration:./S2_fill_prompt_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Prompt(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Prompt(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Properties.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Properties.tsx
index 5043186f534..7d22aaf53cb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Properties.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Properties.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Properties_L from 'illustration:./S2_fill_properties_generic2_160.svg';
 import Properties_M from 'illustration:./S2_fill_properties_generic2_96.svg';
 import Properties_S from 'illustration:./S2_fill_properties_generic2_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Properties(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Properties(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Redo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Redo.tsx
index 2f415636add..a459577e57e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Redo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Redo.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Redo_L from 'illustration:./S2_fill_redo_generic2_160.svg';
 import Redo_M from 'illustration:./S2_fill_redo_generic2_96.svg';
 import Redo_S from 'illustration:./S2_fill_redo_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Redo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Redo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Remix.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Remix.tsx
index fe0b9b22a7b..e319fb57ca4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Remix.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Remix.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Remix_L from 'illustration:./S2_fill_remix_generic2_160.svg';
 import Remix_M from 'illustration:./S2_fill_remix_generic2_96.svg';
 import Remix_S from 'illustration:./S2_fill_remix_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Remix(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Remix(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Replace.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Replace.tsx
index a68c97611c6..282be1965ac 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Replace.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Replace.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Replace_L from 'illustration:./S2_fill_replace_generic2_160.svg';
 import Replace_M from 'illustration:./S2_fill_replace_generic2_96.svg';
 import Replace_S from 'illustration:./S2_fill_replace_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Replace(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Replace(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Revert.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Revert.tsx
index a5d4ca6e765..9b98f59a312 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Revert.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Revert.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Revert_L from 'illustration:./S2_fill_revert_generic2_160.svg';
 import Revert_M from 'illustration:./S2_fill_revert_generic2_96.svg';
 import Revert_S from 'illustration:./S2_fill_revert_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Revert(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Revert(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ribbon.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ribbon.tsx
index cbf9289e974..3846cdb1dd3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ribbon.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ribbon.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Ribbon_L from 'illustration:./S2_fill_ribbon_generic2_160.svg';
 import Ribbon_M from 'illustration:./S2_fill_ribbon_generic2_96.svg';
 import Ribbon_S from 'illustration:./S2_fill_ribbon_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Ribbon(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Ribbon(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Rocket.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Rocket.tsx
index 423f5948752..225a44503ad 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Rocket.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Rocket.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Rocket_L from 'illustration:./S2_fill_rocket_generic2_160.svg';
 import Rocket_M from 'illustration:./S2_fill_rocket_generic2_96.svg';
 import Rocket_S from 'illustration:./S2_fill_rocket_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Rocket(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Rocket(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCCW.tsx
index 1a11471426d..626d0110f33 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCCW.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import RotateCCW_L from 'illustration:./S2_fill_rotateCCW_generic2_160.svg';
 import RotateCCW_M from 'illustration:./S2_fill_rotateCCW_generic2_96.svg';
 import RotateCCW_S from 'illustration:./S2_fill_rotateCCW_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function RotateCCW(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function RotateCCW(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCW.tsx
index 0d6342fccb1..596cfbc39e8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/RotateCW.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import RotateCW_L from 'illustration:./S2_fill_rotateCW_generic2_160.svg';
 import RotateCW_M from 'illustration:./S2_fill_rotateCW_generic2_96.svg';
 import RotateCW_S from 'illustration:./S2_fill_rotateCW_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function RotateCW(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function RotateCW(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ruler.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ruler.tsx
index c93619eaea8..e30ab0c3c4d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ruler.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Ruler.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Ruler_L from 'illustration:./S2_fill_ruler_generic2_160.svg';
 import Ruler_M from 'illustration:./S2_fill_ruler_generic2_96.svg';
 import Ruler_S from 'illustration:./S2_fill_ruler_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Ruler(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Ruler(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Search.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Search.tsx
index 8362c3ab5a1..6c1a5922c6a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Search.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Search.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Search_L from 'illustration:./S2_fill_search_generic2_160.svg';
 import Search_M from 'illustration:./S2_fill_search_generic2_96.svg';
 import Search_S from 'illustration:./S2_fill_search_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Search(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Search(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Segmentation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Segmentation.tsx
index 747f02f7567..4b1fd9d268f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Segmentation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Segmentation.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Segmentation_L from 'illustration:./S2_fill_segmentation_generic2_160.svg';
 import Segmentation_M from 'illustration:./S2_fill_segmentation_generic2_96.svg';
 import Segmentation_S from 'illustration:./S2_fill_segmentation_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Segmentation(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Segmentation(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Server.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Server.tsx
index cbb0a8f623f..11c92b886fd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Server.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Server.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Server_L from 'illustration:./S2_fill_server_generic2_160.svg';
 import Server_M from 'illustration:./S2_fill_server_generic2_96.svg';
 import Server_S from 'illustration:./S2_fill_server_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Server(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Server(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Shapes.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Shapes.tsx
index 789a885a088..aa446264610 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Shapes.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Shapes.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Shapes_L from 'illustration:./S2_fill_shapes_generic2_160.svg';
 import Shapes_M from 'illustration:./S2_fill_shapes_generic2_96.svg';
 import Shapes_S from 'illustration:./S2_fill_shapes_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Shapes(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Shapes(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingBag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingBag.tsx
index 9144c2d0c99..af8944dc7fe 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingBag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingBag.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ShoppingBag_L from 'illustration:./S2_fill_shoppingBag_generic2_160.svg';
 import ShoppingBag_M from 'illustration:./S2_fill_shoppingBag_generic2_96.svg';
 import ShoppingBag_S from 'illustration:./S2_fill_shoppingBag_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ShoppingBag(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ShoppingBag(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingCart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingCart.tsx
index 47aa2e53546..f0d6448f3ae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingCart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ShoppingCart.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ShoppingCart_L from 'illustration:./S2_fill_shoppingCart_generic2_160.svg';
 import ShoppingCart_M from 'illustration:./S2_fill_shoppingCart_generic2_96.svg';
 import ShoppingCart_S from 'illustration:./S2_fill_shoppingCart_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ShoppingCart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ShoppingCart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Sparkles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Sparkles.tsx
index 16830e53cd0..019afee6fb4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Sparkles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Sparkles.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Sparkles_L from 'illustration:./S2_fill_sparkles_generic2_160.svg';
 import Sparkles_M from 'illustration:./S2_fill_sparkles_generic2_96.svg';
 import Sparkles_S from 'illustration:./S2_fill_sparkles_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Sparkles(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Sparkles(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/SpeedFast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/SpeedFast.tsx
index e6e7ff51f4b..79fcbb4b488 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/SpeedFast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/SpeedFast.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import SpeedFast_L from 'illustration:./S2_fill_speedFast_generic2_160.svg';
 import SpeedFast_M from 'illustration:./S2_fill_speedFast_generic2_96.svg';
 import SpeedFast_S from 'illustration:./S2_fill_speedFast_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function SpeedFast(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function SpeedFast(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StampClone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StampClone.tsx
index 4ab4578e435..8c359b1595a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StampClone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StampClone.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import StampClone_L from 'illustration:./S2_fill_stampClone_generic2_160.svg';
 import StampClone_M from 'illustration:./S2_fill_stampClone_generic2_96.svg';
 import StampClone_S from 'illustration:./S2_fill_stampClone_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function StampClone(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function StampClone(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Star.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Star.tsx
index 7ad0208c7f6..e43aa773cfd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Star.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Star.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Star_L from 'illustration:./S2_fill_star_generic2_160.svg';
 import Star_M from 'illustration:./S2_fill_star_generic2_96.svg';
 import Star_S from 'illustration:./S2_fill_star_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Star(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Star(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StepForward.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StepForward.tsx
index b65562d9765..7f3631020ae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StepForward.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/StepForward.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import StepForward_L from 'illustration:./S2_fill_stepForward_generic2_160.svg';
 import StepForward_M from 'illustration:./S2_fill_stepForward_generic2_96.svg';
 import StepForward_S from 'illustration:./S2_fill_stepForward_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function StepForward(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function StepForward(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Switch.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Switch.tsx
index 48c5a474ffe..fb00486c95e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Switch.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Switch.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Switch_L from 'illustration:./S2_fill_switch_generic2_160.svg';
 import Switch_M from 'illustration:./S2_fill_switch_generic2_96.svg';
 import Switch_S from 'illustration:./S2_fill_switch_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Switch(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Switch(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tablet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tablet.tsx
index dfdb449fddb..8861c7044c3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tablet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tablet.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Tablet_L from 'illustration:./S2_fill_tablet_generic2_160.svg';
 import Tablet_M from 'illustration:./S2_fill_tablet_generic2_96.svg';
 import Tablet_S from 'illustration:./S2_fill_tablet_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Tablet(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Tablet(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tag.tsx
index 5c18a606de2..8997698b990 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Tag.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Tag_L from 'illustration:./S2_fill_tag_generic2_160.svg';
 import Tag_M from 'illustration:./S2_fill_tag_generic2_96.svg';
 import Tag_S from 'illustration:./S2_fill_tag_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Tag(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Tag(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Targeted.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Targeted.tsx
index a6456dbfcaf..c9f28e96eb2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Targeted.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Targeted.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Targeted_L from 'illustration:./S2_fill_targeted_generic2_160.svg';
 import Targeted_M from 'illustration:./S2_fill_targeted_generic2_96.svg';
 import Targeted_S from 'illustration:./S2_fill_targeted_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Targeted(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Targeted(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Text.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Text.tsx
index 28362e018f7..7885305855d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Text.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Text.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Text_L from 'illustration:./S2_fill_text_generic2_160.svg';
 import Text_M from 'illustration:./S2_fill_text_generic2_96.svg';
 import Text_S from 'illustration:./S2_fill_text_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Text(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Text(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThreeArrowsCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThreeArrowsCircle.tsx
index 9622cbc2bed..38c906dbe7e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThreeArrowsCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThreeArrowsCircle.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ThreeArrowsCircle_L from 'illustration:./S2_fill_threeArrowsCircle_generic2_160.svg';
 import ThreeArrowsCircle_M from 'illustration:./S2_fill_threeArrowsCircle_generic2_96.svg';
 import ThreeArrowsCircle_S from 'illustration:./S2_fill_threeArrowsCircle_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ThreeArrowsCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ThreeArrowsCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThumbsUp.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThumbsUp.tsx
index efff47cefe9..5dcdafa2ef4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThumbsUp.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/ThumbsUp.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import ThumbsUp_L from 'illustration:./S2_fill_thumbsUp_generic2_160.svg';
 import ThumbsUp_M from 'illustration:./S2_fill_thumbsUp_generic2_96.svg';
 import ThumbsUp_S from 'illustration:./S2_fill_thumbsUp_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ThumbsUp(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ThumbsUp(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Transform.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Transform.tsx
index 877aceb6d3b..f16d7aa1b24 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Transform.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Transform.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Transform_L from 'illustration:./S2_fill_transform_generic2_160.svg';
 import Transform_M from 'illustration:./S2_fill_transform_generic2_96.svg';
 import Transform_S from 'illustration:./S2_fill_transform_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Transform(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Transform(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Translate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Translate.tsx
index c66e18177e9..d7f914ec7be 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Translate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Translate.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Translate_L from 'illustration:./S2_fill_translate_generic2_160.svg';
 import Translate_M from 'illustration:./S2_fill_translate_generic2_96.svg';
 import Translate_S from 'illustration:./S2_fill_translate_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Translate(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Translate(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trash.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trash.tsx
index 76d26c334f5..542b87f022b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trash.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trash.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Trash_L from 'illustration:./S2_fill_trash_generic2_160.svg';
 import Trash_M from 'illustration:./S2_fill_trash_generic2_96.svg';
 import Trash_S from 'illustration:./S2_fill_trash_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Trash(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Trash(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trophy.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trophy.tsx
index 615445ede05..4ea3089d188 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trophy.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Trophy.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Trophy_L from 'illustration:./S2_fill_trophy_generic2_160.svg';
 import Trophy_M from 'illustration:./S2_fill_trophy_generic2_96.svg';
 import Trophy_S from 'illustration:./S2_fill_trophy_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Trophy(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Trophy(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Update.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Update.tsx
index 5e74ece7091..8a2749aecde 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Update.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Update.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Update_L from 'illustration:./S2_fill_update_generic2_160.svg';
 import Update_M from 'illustration:./S2_fill_update_generic2_96.svg';
 import Update_S from 'illustration:./S2_fill_update_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Update(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Update(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Upload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Upload.tsx
index b57dd707e92..ddd68b4c74a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Upload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Upload.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import Upload_L from 'illustration:./S2_fill_upload_generic2_160.svg';
 import Upload_M from 'illustration:./S2_fill_upload_generic2_96.svg';
 import Upload_S from 'illustration:./S2_fill_upload_generic2_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Upload(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Upload(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/User.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/User.tsx
index 539fb7dd6cf..9ac4a58bcdb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/User.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/User.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import User_L from 'illustration:./S2_fill_user_generic2_160.svg';
 import User_M from 'illustration:./S2_fill_user_generic2_96.svg';
 import User_S from 'illustration:./S2_fill_user_generic2_48.svg';
 
-export default function User(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function User(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserAvatar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserAvatar.tsx
index 16a1e94682f..067b4db7297 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserAvatar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserAvatar.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import UserAvatar_L from 'illustration:./S2_fill_userAvatar_generic2_160.svg';
 import UserAvatar_M from 'illustration:./S2_fill_userAvatar_generic2_96.svg';
 import UserAvatar_S from 'illustration:./S2_fill_userAvatar_generic2_48.svg';
 
-export default function UserAvatar(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function UserAvatar(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserGroup.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserGroup.tsx
index 9f1b4365b27..2723bbbdfa9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserGroup.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/UserGroup.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import UserGroup_L from 'illustration:./S2_fill_userGroup_generic2_160.svg';
 import UserGroup_M from 'illustration:./S2_fill_userGroup_generic2_96.svg';
 import UserGroup_S from 'illustration:./S2_fill_userGroup_generic2_48.svg';
 
-export default function UserGroup(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function UserGroup(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VectorDraw.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VectorDraw.tsx
index 397ae3006dc..db2d118a60b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VectorDraw.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VectorDraw.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import VectorDraw_L from 'illustration:./S2_fill_vectorDraw_generic2_160.svg';
 import VectorDraw_M from 'illustration:./S2_fill_vectorDraw_generic2_96.svg';
 import VectorDraw_S from 'illustration:./S2_fill_vectorDraw_generic2_48.svg';
 
-export default function VectorDraw(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function VectorDraw(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Video.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Video.tsx
index ac6e3c7f260..20a8874766d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Video.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Video.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import Video_L from 'illustration:./S2_fill_video_generic2_160.svg';
 import Video_M from 'illustration:./S2_fill_video_generic2_96.svg';
 import Video_S from 'illustration:./S2_fill_video_generic2_48.svg';
 
-export default function Video(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Video(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Volume.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Volume.tsx
index 60bf5a608a9..3f6a044ce4d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Volume.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Volume.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import Volume_L from 'illustration:./S2_fill_volume_generic2_160.svg';
 import Volume_M from 'illustration:./S2_fill_volume_generic2_96.svg';
 import Volume_S from 'illustration:./S2_fill_volume_generic2_48.svg';
 
-export default function Volume(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Volume(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VolumeOne.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VolumeOne.tsx
index 2740da453dd..8bf44a1dadc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VolumeOne.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/VolumeOne.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import VolumeOne_L from 'illustration:./S2_fill_volumeOne_generic2_160.svg';
 import VolumeOne_M from 'illustration:./S2_fill_volumeOne_generic2_96.svg';
 import VolumeOne_S from 'illustration:./S2_fill_volumeOne_generic2_48.svg';
 
-export default function VolumeOne(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function VolumeOne(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Wallet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Wallet.tsx
index 723eb052baa..336094e9c17 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Wallet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/gradient/generic2/Wallet.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import Wallet_L from 'illustration:./S2_fill_wallet_generic2_160.svg';
 import Wallet_M from 'illustration:./S2_fill_wallet_generic2_96.svg';
 import Wallet_S from 'illustration:./S2_fill_wallet_generic2_48.svg';
 
-export default function Wallet(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Wallet(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/3D.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/3D.tsx
index 2af1eab2ded..1918e9e0441 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/3D.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/3D.tsx
@@ -13,10 +13,11 @@
 import _3D_L from 'illustration:./S2_lin_3D_160.svg';
 import _3D_M from 'illustration:./S2_lin_3D_96.svg';
 import _3D_S from 'illustration:./S2_lin_3D_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function _3D(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function _3D(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/3Dasset.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/3Dasset.tsx
index f99923f62fc..0d4c8dd8bd3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/3Dasset.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/3Dasset.tsx
@@ -13,10 +13,11 @@
 import _3Dasset_L from 'illustration:./S2_lin_3Dasset_160.svg';
 import _3Dasset_M from 'illustration:./S2_lin_3Dasset_96.svg';
 import _3Dasset_S from 'illustration:./S2_lin_3Dasset_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function _3Dasset(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function _3Dasset(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIChat.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIChat.tsx
index 26dab4a2ec0..ca2e7b75c4d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIChat.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIChat.tsx
@@ -13,10 +13,11 @@
 import AIChat_L from 'illustration:./S2_lin_AIChat_160.svg';
 import AIChat_M from 'illustration:./S2_lin_AIChat_96.svg';
 import AIChat_S from 'illustration:./S2_lin_AIChat_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AIChat(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AIChat(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerate.tsx
index 81d34b3808d..75e770ecc57 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerate.tsx
@@ -13,10 +13,11 @@
 import AIGenerate_L from 'illustration:./S2_lin_AIGenerate_160.svg';
 import AIGenerate_M from 'illustration:./S2_lin_AIGenerate_96.svg';
 import AIGenerate_S from 'illustration:./S2_lin_AIGenerate_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AIGenerate(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AIGenerate(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerateImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerateImage.tsx
index 5b6b6f78019..c34cf17a982 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerateImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AIGenerateImage.tsx
@@ -13,10 +13,11 @@
 import AIGenerateImage_L from 'illustration:./S2_lin_AIGenerateImage_160.svg';
 import AIGenerateImage_M from 'illustration:./S2_lin_AIGenerateImage_96.svg';
 import AIGenerateImage_S from 'illustration:./S2_lin_AIGenerateImage_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AIGenerateImage(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AIGenerateImage(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Accessibility.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Accessibility.tsx
index d4e87434305..361d6f4291a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Accessibility.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Accessibility.tsx
@@ -13,10 +13,11 @@
 import Accessibility_L from 'illustration:./S2_lin_accessibility_160.svg';
 import Accessibility_M from 'illustration:./S2_lin_accessibility_96.svg';
 import Accessibility_S from 'illustration:./S2_lin_accessibility_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Accessibility(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Accessibility(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Addproject.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Addproject.tsx
index cd457be0954..926ad679b24 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Addproject.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Addproject.tsx
@@ -13,10 +13,11 @@
 import Addproject_L from 'illustration:./S2_lin_addproject_160.svg';
 import Addproject_M from 'illustration:./S2_lin_addproject_96.svg';
 import Addproject_S from 'illustration:./S2_lin_addproject_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Addproject(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Addproject(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AlertNotice.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AlertNotice.tsx
index 9706323c23d..e7baa97fd60 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AlertNotice.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AlertNotice.tsx
@@ -13,10 +13,11 @@
 import AlertNotice_L from 'illustration:./S2_lin_alertNotice_160.svg';
 import AlertNotice_M from 'illustration:./S2_lin_alertNotice_96.svg';
 import AlertNotice_S from 'illustration:./S2_lin_alertNotice_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AlertNotice(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AlertNotice(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Animation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Animation.tsx
index 705986f8307..1b7fdc405e1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Animation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Animation.tsx
@@ -13,10 +13,11 @@
 import Animation_L from 'illustration:./S2_lin_animation_160.svg';
 import Animation_M from 'illustration:./S2_lin_animation_96.svg';
 import Animation_S from 'illustration:./S2_lin_animation_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Animation(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Animation(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Apps.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Apps.tsx
index 6864569f8bc..da76f8489da 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Apps.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Apps.tsx
@@ -13,10 +13,11 @@
 import Apps_L from 'illustration:./S2_lin_apps_160.svg';
 import Apps_M from 'illustration:./S2_lin_apps_96.svg';
 import Apps_S from 'illustration:./S2_lin_apps_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Apps(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Apps(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowDown.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowDown.tsx
index 5d2290deeda..8784d756ed5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowDown.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowDown.tsx
@@ -13,10 +13,11 @@
 import ArrowDown_L from 'illustration:./S2_lin_arrowDown_160.svg';
 import ArrowDown_M from 'illustration:./S2_lin_arrowDown_96.svg';
 import ArrowDown_S from 'illustration:./S2_lin_arrowDown_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ArrowDown(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ArrowDown(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowLeft.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowLeft.tsx
index 169082c2803..23462884920 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowLeft.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowLeft.tsx
@@ -13,10 +13,11 @@
 import ArrowLeft_L from 'illustration:./S2_lin_arrowLeft_160.svg';
 import ArrowLeft_M from 'illustration:./S2_lin_arrowLeft_96.svg';
 import ArrowLeft_S from 'illustration:./S2_lin_arrowLeft_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ArrowLeft(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ArrowLeft(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowRight.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowRight.tsx
index 63b767e045c..7efc36a427b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowRight.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowRight.tsx
@@ -13,10 +13,11 @@
 import ArrowRight_L from 'illustration:./S2_lin_arrowRight_160.svg';
 import ArrowRight_M from 'illustration:./S2_lin_arrowRight_96.svg';
 import ArrowRight_S from 'illustration:./S2_lin_arrowRight_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ArrowRight(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ArrowRight(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowUp.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowUp.tsx
index 8a81910d1a6..b1ddee3ddb1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowUp.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ArrowUp.tsx
@@ -13,10 +13,11 @@
 import ArrowUp_L from 'illustration:./S2_lin_arrowUp_160.svg';
 import ArrowUp_M from 'illustration:./S2_lin_arrowUp_96.svg';
 import ArrowUp_S from 'illustration:./S2_lin_arrowUp_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ArrowUp(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ArrowUp(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Artboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Artboard.tsx
index decd277c156..ac6906827ba 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Artboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Artboard.tsx
@@ -13,10 +13,11 @@
 import Artboard_L from 'illustration:./S2_lin_artboard_160.svg';
 import Artboard_M from 'illustration:./S2_lin_artboard_96.svg';
 import Artboard_S from 'illustration:./S2_lin_artboard_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Artboard(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Artboard(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Assets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Assets.tsx
index 288cb6a8c0c..fb176e8686d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Assets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Assets.tsx
@@ -13,10 +13,11 @@
 import Assets_L from 'illustration:./S2_lin_assets_160.svg';
 import Assets_M from 'illustration:./S2_lin_assets_96.svg';
 import Assets_S from 'illustration:./S2_lin_assets_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Assets(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Assets(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AudioWave.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AudioWave.tsx
index 22937a574c0..877f57fd2f3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/AudioWave.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/AudioWave.tsx
@@ -13,10 +13,11 @@
 import AudioWave_L from 'illustration:./S2_lin_audioWave_160.svg';
 import AudioWave_M from 'illustration:./S2_lin_audioWave_96.svg';
 import AudioWave_S from 'illustration:./S2_lin_audioWave_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function AudioWave(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function AudioWave(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BadgeVerified.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BadgeVerified.tsx
index 11af4ffabf4..b83614555dc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BadgeVerified.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BadgeVerified.tsx
@@ -13,10 +13,11 @@
 import BadgeVerified_L from 'illustration:./S2_lin_badgeVerified_160.svg';
 import BadgeVerified_M from 'illustration:./S2_lin_badgeVerified_96.svg';
 import BadgeVerified_S from 'illustration:./S2_lin_badgeVerified_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BadgeVerified(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BadgeVerified(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bell.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bell.tsx
index 4b2fc9d9054..fdcbbcf96ac 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bell.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bell.tsx
@@ -13,10 +13,11 @@
 import Bell_L from 'illustration:./S2_lin_bell_160.svg';
 import Bell_M from 'illustration:./S2_lin_bell_96.svg';
 import Bell_S from 'illustration:./S2_lin_bell_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Bell(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Bell(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bolt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bolt.tsx
index 0ef54f24da8..1b76b447cb4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bolt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bolt.tsx
@@ -13,10 +13,11 @@
 import Bolt_L from 'illustration:./S2_lin_bolt_160.svg';
 import Bolt_M from 'illustration:./S2_lin_bolt_96.svg';
 import Bolt_S from 'illustration:./S2_lin_bolt_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Bolt(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Bolt(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brand.tsx
index 5147e9e5f28..e64209f532e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brand.tsx
@@ -13,10 +13,11 @@
 import Brand_L from 'illustration:./S2_lin_brand_160.svg';
 import Brand_M from 'illustration:./S2_lin_brand_96.svg';
 import Brand_S from 'illustration:./S2_lin_brand_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Brand(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Brand(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Briefcase.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Briefcase.tsx
index b17f7d9be0a..06025236370 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Briefcase.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Briefcase.tsx
@@ -13,10 +13,11 @@
 import Briefcase_L from 'illustration:./S2_lin_briefcase_160.svg';
 import Briefcase_M from 'illustration:./S2_lin_briefcase_96.svg';
 import Briefcase_S from 'illustration:./S2_lin_briefcase_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Briefcase(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Briefcase(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrightnessContrast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrightnessContrast.tsx
index 768928aa707..672a3fbc961 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrightnessContrast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrightnessContrast.tsx
@@ -13,10 +13,11 @@
 import BrightnessContrast_L from 'illustration:./S2_lin_brightnessContrast_160.svg';
 import BrightnessContrast_M from 'illustration:./S2_lin_brightnessContrast_96.svg';
 import BrightnessContrast_S from 'illustration:./S2_lin_brightnessContrast_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BrightnessContrast(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BrightnessContrast(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Browser.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Browser.tsx
index 7710177f7f7..a7b0b36a714 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Browser.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Browser.tsx
@@ -13,10 +13,11 @@
 import Browser_L from 'illustration:./S2_lin_browser_160.svg';
 import Browser_M from 'illustration:./S2_lin_browser_96.svg';
 import Browser_S from 'illustration:./S2_lin_browser_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Browser(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Browser(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserError.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserError.tsx
index bbfd4a79e0a..ae6759526e8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserError.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserError.tsx
@@ -13,10 +13,11 @@
 import BrowserError_L from 'illustration:./S2_lin_browserError_160.svg';
 import BrowserError_M from 'illustration:./S2_lin_browserError_96.svg';
 import BrowserError_S from 'illustration:./S2_lin_browserError_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BrowserError(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BrowserError(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserNotCompatible.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserNotCompatible.tsx
index 167300c8ea7..d6fa9a3895c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserNotCompatible.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BrowserNotCompatible.tsx
@@ -13,10 +13,11 @@
 import BrowserNotCompatible_L from 'illustration:./S2_lin_browserNotCompatible_160.svg';
 import BrowserNotCompatible_M from 'illustration:./S2_lin_browserNotCompatible_96.svg';
 import BrowserNotCompatible_S from 'illustration:./S2_lin_browserNotCompatible_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BrowserNotCompatible(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BrowserNotCompatible(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brush.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brush.tsx
index d8d9d90aa70..50814fa79df 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brush.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Brush.tsx
@@ -13,10 +13,11 @@
 import Brush_L from 'illustration:./S2_lin_brush_160.svg';
 import Brush_M from 'illustration:./S2_lin_brush_96.svg';
 import Brush_S from 'illustration:./S2_lin_brush_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Brush(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Brush(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bug.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bug.tsx
index 2ca9eecdcb0..3eda5d42dd0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bug.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Bug.tsx
@@ -13,10 +13,11 @@
 import Bug_L from 'illustration:./S2_lin_bug_160.svg';
 import Bug_M from 'illustration:./S2_lin_bug_96.svg';
 import Bug_S from 'illustration:./S2_lin_bug_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Bug(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Bug(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BuildTable.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BuildTable.tsx
index 25a23728752..075467fb1f3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/BuildTable.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/BuildTable.tsx
@@ -13,10 +13,11 @@
 import BuildTable_L from 'illustration:./S2_lin_buildTable_160.svg';
 import BuildTable_M from 'illustration:./S2_lin_buildTable_96.svg';
 import BuildTable_S from 'illustration:./S2_lin_buildTable_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function BuildTable(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function BuildTable(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Buildings.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Buildings.tsx
index 48edc6b7a7d..757f3e69ee7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Buildings.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Buildings.tsx
@@ -13,10 +13,11 @@
 import Buildings_L from 'illustration:./S2_lin_buildings_160.svg';
 import Buildings_M from 'illustration:./S2_lin_buildings_96.svg';
 import Buildings_S from 'illustration:./S2_lin_buildings_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Buildings(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Buildings(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Calendar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Calendar.tsx
index 409ac7fa4ab..6bb10cbb030 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Calendar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Calendar.tsx
@@ -13,10 +13,11 @@
 import Calendar_L from 'illustration:./S2_lin_calendar_160.svg';
 import Calendar_M from 'illustration:./S2_lin_calendar_96.svg';
 import Calendar_S from 'illustration:./S2_lin_calendar_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Calendar(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Calendar(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Camera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Camera.tsx
index a8248a91d28..05a5aab2959 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Camera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Camera.tsx
@@ -13,10 +13,11 @@
 import Camera_L from 'illustration:./S2_lin_camera_160.svg';
 import Camera_M from 'illustration:./S2_lin_camera_96.svg';
 import Camera_S from 'illustration:./S2_lin_camera_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Camera(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Camera(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CardTapPayment.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CardTapPayment.tsx
index daa44096e54..555bea41217 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CardTapPayment.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CardTapPayment.tsx
@@ -13,10 +13,11 @@
 import CardTapPayment_L from 'illustration:./S2_lin_cardTapPayment_160.svg';
 import CardTapPayment_M from 'illustration:./S2_lin_cardTapPayment_96.svg';
 import CardTapPayment_S from 'illustration:./S2_lin_cardTapPayment_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CardTapPayment(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CardTapPayment(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Channel.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Channel.tsx
index d1b0ff1f225..f46119a8f67 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Channel.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Channel.tsx
@@ -13,10 +13,11 @@
 import Channel_L from 'illustration:./S2_lin_channel_160.svg';
 import Channel_M from 'illustration:./S2_lin_channel_96.svg';
 import Channel_S from 'illustration:./S2_lin_channel_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Channel(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Channel(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ChartAreaStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ChartAreaStack.tsx
index 2982470078c..14962678e99 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ChartAreaStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ChartAreaStack.tsx
@@ -13,10 +13,11 @@
 import ChartAreaStack_L from 'illustration:./S2_lin_chartAreaStack_160.svg';
 import ChartAreaStack_M from 'illustration:./S2_lin_chartAreaStack_96.svg';
 import ChartAreaStack_S from 'illustration:./S2_lin_chartAreaStack_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ChartAreaStack(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ChartAreaStack(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Chatbubble.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Chatbubble.tsx
index 14685c8a886..171343fd8a7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Chatbubble.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Chatbubble.tsx
@@ -13,10 +13,11 @@
 import Chatbubble_L from 'illustration:./S2_lin_chatbubble_160.svg';
 import Chatbubble_M from 'illustration:./S2_lin_chatbubble_96.svg';
 import Chatbubble_S from 'illustration:./S2_lin_chatbubble_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Chatbubble(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Chatbubble(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Check.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Check.tsx
index c31cf40358a..7414e9ae7c4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Check.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Check.tsx
@@ -13,10 +13,11 @@
 import Check_L from 'illustration:./S2_lin_check_160.svg';
 import Check_M from 'illustration:./S2_lin_check_96.svg';
 import Check_S from 'illustration:./S2_lin_check_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Check(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Check(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clipboard.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clipboard.tsx
index 80be47b2ce6..3f1a1dd677b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clipboard.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clipboard.tsx
@@ -13,10 +13,11 @@
 import Clipboard_L from 'illustration:./S2_lin_clipboard_160.svg';
 import Clipboard_M from 'illustration:./S2_lin_clipboard_96.svg';
 import Clipboard_S from 'illustration:./S2_lin_clipboard_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Clipboard(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Clipboard(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clock.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clock.tsx
index 7de0ae1d3cf..35f84540416 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clock.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Clock.tsx
@@ -13,10 +13,11 @@
 import Clock_L from 'illustration:./S2_lin_clock_160.svg';
 import Clock_M from 'illustration:./S2_lin_clock_96.svg';
 import Clock_S from 'illustration:./S2_lin_clock_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Clock(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Clock(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Close.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Close.tsx
index e1b92e4cf64..5964ea1c5e4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Close.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Close.tsx
@@ -13,10 +13,11 @@
 import Close_L from 'illustration:./S2_lin_close_160.svg';
 import Close_M from 'illustration:./S2_lin_close_96.svg';
 import Close_S from 'illustration:./S2_lin_close_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Close(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Close(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cloud.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cloud.tsx
index d635ccdd92c..e50f77edace 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cloud.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cloud.tsx
@@ -13,10 +13,11 @@
 import Cloud_L from 'illustration:./S2_lin_cloud_160.svg';
 import Cloud_M from 'illustration:./S2_lin_cloud_96.svg';
 import Cloud_S from 'illustration:./S2_lin_cloud_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Cloud(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Cloud(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateDisconnected.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateDisconnected.tsx
index 5f93cf926c0..c55269e93af 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateDisconnected.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateDisconnected.tsx
@@ -13,10 +13,11 @@
 import CloudStateDisconnected_L from 'illustration:./S2_lin_cloudStateDisconnected_160.svg';
 import CloudStateDisconnected_M from 'illustration:./S2_lin_cloudStateDisconnected_96.svg';
 import CloudStateDisconnected_S from 'illustration:./S2_lin_cloudStateDisconnected_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CloudStateDisconnected(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CloudStateDisconnected(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateError.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateError.tsx
index d1cee7455ca..5e6e09094ca 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateError.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudStateError.tsx
@@ -13,10 +13,11 @@
 import CloudStateError_L from 'illustration:./S2_lin_cloudStateError_160.svg';
 import CloudStateError_M from 'illustration:./S2_lin_cloudStateError_96.svg';
 import CloudStateError_S from 'illustration:./S2_lin_cloudStateError_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CloudStateError(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CloudStateError(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudUpload.tsx
index a98ab0fe0c9..348704e3f15 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CloudUpload.tsx
@@ -13,10 +13,11 @@
 import CloudUpload_L from 'illustration:./S2_lin_cloudUpload_160.svg';
 import CloudUpload_M from 'illustration:./S2_lin_cloudUpload_96.svg';
 import CloudUpload_S from 'illustration:./S2_lin_cloudUpload_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CloudUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CloudUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CodeBrackets.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CodeBrackets.tsx
index 525135b5af4..98346c0e239 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CodeBrackets.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CodeBrackets.tsx
@@ -13,10 +13,11 @@
 import CodeBrackets_L from 'illustration:./S2_lin_codeBrackets_160.svg';
 import CodeBrackets_M from 'illustration:./S2_lin_codeBrackets_96.svg';
 import CodeBrackets_S from 'illustration:./S2_lin_codeBrackets_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CodeBrackets(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CodeBrackets(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Color.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Color.tsx
index 7ec1f157655..d39a5593b17 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Color.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Color.tsx
@@ -13,10 +13,11 @@
 import Color_L from 'illustration:./S2_lin_color_160.svg';
 import Color_M from 'illustration:./S2_lin_color_96.svg';
 import Color_S from 'illustration:./S2_lin_color_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Color(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Color(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CommentText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CommentText.tsx
index 6d43d0644c1..696cef8d1be 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/CommentText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/CommentText.tsx
@@ -13,10 +13,11 @@
 import CommentText_L from 'illustration:./S2_lin_commentText_160.svg';
 import CommentText_M from 'illustration:./S2_lin_commentText_96.svg';
 import CommentText_S from 'illustration:./S2_lin_commentText_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function CommentText(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function CommentText(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ConfettiCelebration.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ConfettiCelebration.tsx
index d943748e5e2..956c3cea280 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ConfettiCelebration.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ConfettiCelebration.tsx
@@ -13,10 +13,11 @@
 import ConfettiCelebration_L from 'illustration:./S2_lin_confettiCelebration_160.svg';
 import ConfettiCelebration_M from 'illustration:./S2_lin_confettiCelebration_96.svg';
 import ConfettiCelebration_S from 'illustration:./S2_lin_confettiCelebration_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ConfettiCelebration(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ConfettiCelebration(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Conversationbubbles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Conversationbubbles.tsx
index 0b1cb36c5ed..7f73eb543c1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Conversationbubbles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Conversationbubbles.tsx
@@ -13,10 +13,11 @@
 import Conversationbubbles_L from 'illustration:./S2_lin_conversationbubbles_160.svg';
 import Conversationbubbles_M from 'illustration:./S2_lin_conversationbubbles_96.svg';
 import Conversationbubbles_S from 'illustration:./S2_lin_conversationbubbles_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Conversationbubbles(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Conversationbubbles(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Crop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Crop.tsx
index 8f7658492f7..8877662b8c6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Crop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Crop.tsx
@@ -13,10 +13,11 @@
 import Crop_L from 'illustration:./S2_lin_crop_160.svg';
 import Crop_M from 'illustration:./S2_lin_crop_96.svg';
 import Crop_S from 'illustration:./S2_lin_crop_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Crop(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Crop(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cursor.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cursor.tsx
index b8072797f99..59d887d5bee 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cursor.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cursor.tsx
@@ -13,10 +13,11 @@
 import Cursor_L from 'illustration:./S2_lin_cursor_160.svg';
 import Cursor_M from 'illustration:./S2_lin_cursor_96.svg';
 import Cursor_S from 'illustration:./S2_lin_cursor_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Cursor(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Cursor(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cut.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cut.tsx
index 054ba102bc1..1864c1f35a5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cut.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Cut.tsx
@@ -13,10 +13,11 @@
 import Cut_L from 'illustration:./S2_lin_cut_160.svg';
 import Cut_M from 'illustration:./S2_lin_cut_96.svg';
 import Cut_S from 'illustration:./S2_lin_cut_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Cut(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Cut(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Data.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Data.tsx
index b9050d98fad..b52db9790b3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Data.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Data.tsx
@@ -13,10 +13,11 @@
 import Data_L from 'illustration:./S2_lin_data_160.svg';
 import Data_M from 'illustration:./S2_lin_data_96.svg';
 import Data_S from 'illustration:./S2_lin_data_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Data(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Data(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/DataAnalytics.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/DataAnalytics.tsx
index 99a1dfebac6..2421a75d34e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/DataAnalytics.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/DataAnalytics.tsx
@@ -13,10 +13,11 @@
 import DataAnalytics_L from 'illustration:./S2_lin_dataAnalytics_160.svg';
 import DataAnalytics_M from 'illustration:./S2_lin_dataAnalytics_96.svg';
 import DataAnalytics_S from 'illustration:./S2_lin_dataAnalytics_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function DataAnalytics(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function DataAnalytics(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Desktop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Desktop.tsx
index 5f8b57ce848..f12902b4f38 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Desktop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Desktop.tsx
@@ -13,10 +13,11 @@
 import Desktop_L from 'illustration:./S2_lin_desktop_160.svg';
 import Desktop_M from 'illustration:./S2_lin_desktop_96.svg';
 import Desktop_S from 'illustration:./S2_lin_desktop_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Desktop(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Desktop(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Diamond.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Diamond.tsx
index e29d98e5bbf..819667548cc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Diamond.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Diamond.tsx
@@ -13,10 +13,11 @@
 import Diamond_L from 'illustration:./S2_lin_diamond_160.svg';
 import Diamond_M from 'illustration:./S2_lin_diamond_96.svg';
 import Diamond_S from 'illustration:./S2_lin_diamond_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Diamond(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Diamond(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Document.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Document.tsx
index 3b0c05dcc33..7d4cd34ff8a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Document.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Document.tsx
@@ -13,10 +13,11 @@
 import Document_L from 'illustration:./S2_lin_document_160.svg';
 import Document_M from 'illustration:./S2_lin_document_96.svg';
 import Document_S from 'illustration:./S2_lin_document_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Document(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Document(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Download.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Download.tsx
index 40ff66cf6c1..4e5927a7760 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Download.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Download.tsx
@@ -13,10 +13,11 @@
 import Download_L from 'illustration:./S2_lin_download_160.svg';
 import Download_M from 'illustration:./S2_lin_download_96.svg';
 import Download_S from 'illustration:./S2_lin_download_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Download(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Download(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/DropToUpload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/DropToUpload.tsx
index 23a2e82d982..f43e8000ea8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/DropToUpload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/DropToUpload.tsx
@@ -13,10 +13,11 @@
 import DropToUpload_L from 'illustration:./S2_lin_dropToUpload_160.svg';
 import DropToUpload_M from 'illustration:./S2_lin_dropToUpload_96.svg';
 import DropToUpload_S from 'illustration:./S2_lin_dropToUpload_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function DropToUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function DropToUpload(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Education.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Education.tsx
index f5b601a4329..bb8b4e69b43 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Education.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Education.tsx
@@ -13,10 +13,11 @@
 import Education_L from 'illustration:./S2_lin_education_160.svg';
 import Education_M from 'illustration:./S2_lin_education_96.svg';
 import Education_S from 'illustration:./S2_lin_education_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Education(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Education(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Effects.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Effects.tsx
index 838d5f6ea5f..00d47f6c6d7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Effects.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Effects.tsx
@@ -13,10 +13,11 @@
 import Effects_L from 'illustration:./S2_lin_effects_160.svg';
 import Effects_M from 'illustration:./S2_lin_effects_96.svg';
 import Effects_S from 'illustration:./S2_lin_effects_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Effects(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Effects(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Emoji160.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Emoji160.tsx
index d1fa8ee9aad..07c3e33ef8b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Emoji160.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Emoji160.tsx
@@ -13,10 +13,11 @@
 import Emoji160_L from 'illustration:./S2_lin_emoji_160_160.svg';
 import Emoji160_M from 'illustration:./S2_lin_emoji_160_96.svg';
 import Emoji160_S from 'illustration:./S2_lin_emoji_160_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Emoji160(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Emoji160(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/EmptyStateExport.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/EmptyStateExport.tsx
index 41cc85b26b5..b9e24ede1ac 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/EmptyStateExport.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/EmptyStateExport.tsx
@@ -13,10 +13,11 @@
 import EmptyStateExport_L from 'illustration:./S2_lin_emptyStateExport_160.svg';
 import EmptyStateExport_M from 'illustration:./S2_lin_emptyStateExport_96.svg';
 import EmptyStateExport_S from 'illustration:./S2_lin_emptyStateExport_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function EmptyStateExport(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function EmptyStateExport(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Error.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Error.tsx
index 208caa4ddc3..369099cedee 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Error.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Error.tsx
@@ -13,10 +13,11 @@
 import Error_L from 'illustration:./S2_lin_error_160.svg';
 import Error_M from 'illustration:./S2_lin_error_96.svg';
 import Error_S from 'illustration:./S2_lin_error_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Error(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Error(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Explosion.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Explosion.tsx
index 9dbfe49a69b..fc422ba32a3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Explosion.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Explosion.tsx
@@ -13,10 +13,11 @@
 import Explosion_L from 'illustration:./S2_lin_explosion_160.svg';
 import Explosion_M from 'illustration:./S2_lin_explosion_96.svg';
 import Explosion_S from 'illustration:./S2_lin_explosion_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Explosion(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Explosion(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ExportTo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ExportTo.tsx
index f3153dfc2a0..9440da3ac41 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ExportTo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ExportTo.tsx
@@ -13,10 +13,11 @@
 import ExportTo_L from 'illustration:./S2_lin_exportTo_160.svg';
 import ExportTo_M from 'illustration:./S2_lin_exportTo_96.svg';
 import ExportTo_S from 'illustration:./S2_lin_exportTo_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ExportTo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ExportTo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Exposure.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Exposure.tsx
index c75ec3220b5..aec8753314c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Exposure.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Exposure.tsx
@@ -13,10 +13,11 @@
 import Exposure_L from 'illustration:./S2_lin_exposure_160.svg';
 import Exposure_M from 'illustration:./S2_lin_exposure_96.svg';
 import Exposure_S from 'illustration:./S2_lin_exposure_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Exposure(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Exposure(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileAlert.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileAlert.tsx
index 1f779c9460e..469a41e8c0a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileAlert.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileAlert.tsx
@@ -13,10 +13,11 @@
 import FileAlert_L from 'illustration:./S2_lin_fileAlert_160.svg';
 import FileAlert_M from 'illustration:./S2_lin_fileAlert_96.svg';
 import FileAlert_S from 'illustration:./S2_lin_fileAlert_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileAlert(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileAlert(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileImage.tsx
index 4d7c9f42868..5ffc1761a26 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileImage.tsx
@@ -13,10 +13,11 @@
 import FileImage_L from 'illustration:./S2_lin_fileImage_160.svg';
 import FileImage_M from 'illustration:./S2_lin_fileImage_96.svg';
 import FileImage_S from 'illustration:./S2_lin_fileImage_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileImage(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileImage(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileText.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileText.tsx
index 10829570d6b..41226f82747 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileText.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileText.tsx
@@ -13,10 +13,11 @@
 import FileText_L from 'illustration:./S2_lin_fileText_160.svg';
 import FileText_M from 'illustration:./S2_lin_fileText_96.svg';
 import FileText_S from 'illustration:./S2_lin_fileText_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileText(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileText(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileVideo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileVideo.tsx
index fb9b31db6a9..2631dac73c8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileVideo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileVideo.tsx
@@ -13,10 +13,11 @@
 import FileVideo_L from 'illustration:./S2_lin_fileVideo_160.svg';
 import FileVideo_M from 'illustration:./S2_lin_fileVideo_96.svg';
 import FileVideo_S from 'illustration:./S2_lin_fileVideo_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileVideo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileVideo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileZip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileZip.tsx
index ad39fa84b75..4024cc9220f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileZip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FileZip.tsx
@@ -13,10 +13,11 @@
 import FileZip_L from 'illustration:./S2_lin_fileZip_160.svg';
 import FileZip_M from 'illustration:./S2_lin_fileZip_96.svg';
 import FileZip_S from 'illustration:./S2_lin_fileZip_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FileZip(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FileZip(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filmstrip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filmstrip.tsx
index ba445d9da4f..5e2241b796e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filmstrip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filmstrip.tsx
@@ -13,10 +13,11 @@
 import Filmstrip_L from 'illustration:./S2_lin_filmstrip_160.svg';
 import Filmstrip_M from 'illustration:./S2_lin_filmstrip_96.svg';
 import Filmstrip_S from 'illustration:./S2_lin_filmstrip_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Filmstrip(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Filmstrip(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filter.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filter.tsx
index c037bc5dce1..01a08bf37eb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filter.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filter.tsx
@@ -13,10 +13,11 @@
 import Filter_L from 'illustration:./S2_lin_filter_160.svg';
 import Filter_M from 'illustration:./S2_lin_filter_96.svg';
 import Filter_S from 'illustration:./S2_lin_filter_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Filter(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Filter(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filters.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filters.tsx
index 0f40d96e94e..dbb1edb30cb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filters.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Filters.tsx
@@ -13,10 +13,11 @@
 import Filters_L from 'illustration:./S2_lin_filters_160.svg';
 import Filters_M from 'illustration:./S2_lin_filters_96.svg';
 import Filters_S from 'illustration:./S2_lin_filters_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Filters(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Filters(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Fireworks.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Fireworks.tsx
index 7d1c06de744..994d88a7385 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Fireworks.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Fireworks.tsx
@@ -13,10 +13,11 @@
 import Fireworks_L from 'illustration:./S2_lin_fireworks_160.svg';
 import Fireworks_M from 'illustration:./S2_lin_fireworks_96.svg';
 import Fireworks_S from 'illustration:./S2_lin_fireworks_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Fireworks(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Fireworks(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Flag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Flag.tsx
index 02f6e4a7c1d..7085780ccb5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Flag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Flag.tsx
@@ -13,10 +13,11 @@
 import Flag_L from 'illustration:./S2_lin_flag_160.svg';
 import Flag_M from 'illustration:./S2_lin_flag_96.svg';
 import Flag_S from 'illustration:./S2_lin_flag_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Flag(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Flag(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCheckmark.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCheckmark.tsx
index 23ca5d97dd9..9c887af0fc9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCheckmark.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCheckmark.tsx
@@ -13,10 +13,11 @@
 import FlagCheckmark_L from 'illustration:./S2_lin_flagCheckmark_160.svg';
 import FlagCheckmark_M from 'illustration:./S2_lin_flagCheckmark_96.svg';
 import FlagCheckmark_S from 'illustration:./S2_lin_flagCheckmark_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FlagCheckmark(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FlagCheckmark(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCross.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCross.tsx
index f9bcc7ef82b..ce6bf9d5f25 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCross.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FlagCross.tsx
@@ -13,10 +13,11 @@
 import FlagCross_L from 'illustration:./S2_lin_flagCross_160.svg';
 import FlagCross_M from 'illustration:./S2_lin_flagCross_96.svg';
 import FlagCross_S from 'illustration:./S2_lin_flagCross_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FlagCross(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FlagCross(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderClose.tsx
index 8980234d7a8..e471f326524 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderClose.tsx
@@ -13,10 +13,11 @@
 import FolderClose_L from 'illustration:./S2_lin_folderClose_160.svg';
 import FolderClose_M from 'illustration:./S2_lin_folderClose_96.svg';
 import FolderClose_S from 'illustration:./S2_lin_folderClose_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FolderClose(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FolderClose(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderOpen.tsx
index ed9d751c18c..e5dcd3107b7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderOpen.tsx
@@ -13,10 +13,11 @@
 import FolderOpen_L from 'illustration:./S2_lin_folderOpen_160.svg';
 import FolderOpen_M from 'illustration:./S2_lin_folderOpen_96.svg';
 import FolderOpen_S from 'illustration:./S2_lin_folderOpen_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FolderOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FolderOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderShared.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderShared.tsx
index b7c15a4a6f0..0418ddbee5f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderShared.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/FolderShared.tsx
@@ -13,10 +13,11 @@
 import FolderShared_L from 'illustration:./S2_lin_folderShared_160.svg';
 import FolderShared_M from 'illustration:./S2_lin_folderShared_96.svg';
 import FolderShared_S from 'illustration:./S2_lin_folderShared_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function FolderShared(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function FolderShared(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GearSetting.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GearSetting.tsx
index 50deaa029ce..e6a9d6645a5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GearSetting.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GearSetting.tsx
@@ -13,10 +13,11 @@
 import GearSetting_L from 'illustration:./S2_lin_gearSetting_160.svg';
 import GearSetting_M from 'illustration:./S2_lin_gearSetting_96.svg';
 import GearSetting_S from 'illustration:./S2_lin_gearSetting_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function GearSetting(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function GearSetting(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Gift.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Gift.tsx
index 480c6ba82e4..31974e57b66 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Gift.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Gift.tsx
@@ -13,10 +13,11 @@
 import Gift_L from 'illustration:./S2_lin_gift_160.svg';
 import Gift_M from 'illustration:./S2_lin_gift_96.svg';
 import Gift_S from 'illustration:./S2_lin_gift_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Gift(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Gift(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Globe.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Globe.tsx
index 80a89df9634..4dfbdefe228 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Globe.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Globe.tsx
@@ -13,10 +13,11 @@
 import Globe_L from 'illustration:./S2_lin_globe_160.svg';
 import Globe_M from 'illustration:./S2_lin_globe_96.svg';
 import Globe_S from 'illustration:./S2_lin_globe_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Globe(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Globe(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GlobeGrid.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GlobeGrid.tsx
index 78e84c1322d..fa4a9e2ec92 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GlobeGrid.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GlobeGrid.tsx
@@ -13,10 +13,11 @@
 import GlobeGrid_L from 'illustration:./S2_lin_globeGrid_160.svg';
 import GlobeGrid_M from 'illustration:./S2_lin_globeGrid_96.svg';
 import GlobeGrid_S from 'illustration:./S2_lin_globeGrid_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function GlobeGrid(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function GlobeGrid(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GraphBarChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GraphBarChart.tsx
index 4f49250dd5a..0c7aa1679a4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/GraphBarChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/GraphBarChart.tsx
@@ -13,10 +13,11 @@
 import GraphBarChart_L from 'illustration:./S2_lin_graphBarChart_160.svg';
 import GraphBarChart_M from 'illustration:./S2_lin_graphBarChart_96.svg';
 import GraphBarChart_S from 'illustration:./S2_lin_graphBarChart_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function GraphBarChart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function GraphBarChart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Hand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Hand.tsx
index 5143bf11ecb..c3a66ca4db8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Hand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Hand.tsx
@@ -13,10 +13,11 @@
 import Hand_L from 'illustration:./S2_lin_hand_160.svg';
 import Hand_M from 'illustration:./S2_lin_hand_96.svg';
 import Hand_S from 'illustration:./S2_lin_hand_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Hand(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Hand(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Handshake.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Handshake.tsx
index 48f8efd1a93..27cc5dd62dc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Handshake.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Handshake.tsx
@@ -13,10 +13,11 @@
 import Handshake_L from 'illustration:./S2_lin_handshake_160.svg';
 import Handshake_M from 'illustration:./S2_lin_handshake_96.svg';
 import Handshake_S from 'illustration:./S2_lin_handshake_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Handshake(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Handshake(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Heart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Heart.tsx
index b6b2999d376..623c01b0cbc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Heart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Heart.tsx
@@ -13,10 +13,11 @@
 import Heart_L from 'illustration:./S2_lin_heart_160.svg';
 import Heart_M from 'illustration:./S2_lin_heart_96.svg';
 import Heart_S from 'illustration:./S2_lin_heart_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Heart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Heart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/HelpCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/HelpCircle.tsx
index b85dca84240..c776f6685e0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/HelpCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/HelpCircle.tsx
@@ -13,10 +13,11 @@
 import HelpCircle_L from 'illustration:./S2_lin_helpCircle_160.svg';
 import HelpCircle_M from 'illustration:./S2_lin_helpCircle_96.svg';
 import HelpCircle_S from 'illustration:./S2_lin_helpCircle_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function HelpCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function HelpCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Home.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Home.tsx
index 8cd51947264..81740c5368c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Home.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Home.tsx
@@ -13,10 +13,11 @@
 import Home_L from 'illustration:./S2_lin_home_160.svg';
 import Home_M from 'illustration:./S2_lin_home_96.svg';
 import Home_S from 'illustration:./S2_lin_home_48.svg';
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Home(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Home(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Illustration.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Illustration.tsx
index ed52080e22e..0e65343f6eb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Illustration.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Illustration.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Illustration_L from 'illustration:./S2_lin_illustration_160.svg';
 import Illustration_M from 'illustration:./S2_lin_illustration_96.svg';
 import Illustration_S from 'illustration:./S2_lin_illustration_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Illustration(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Illustration(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Image.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Image.tsx
index 78d171615ca..6bd0d1590bb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Image.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Image.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Image_L from 'illustration:./S2_lin_image_160.svg';
 import Image_M from 'illustration:./S2_lin_image_96.svg';
 import Image_S from 'illustration:./S2_lin_image_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Image(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Image(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ImageStack.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ImageStack.tsx
index cbcf5e21663..66051d1d9dd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ImageStack.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ImageStack.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import ImageStack_L from 'illustration:./S2_lin_imageStack_160.svg';
 import ImageStack_M from 'illustration:./S2_lin_imageStack_96.svg';
 import ImageStack_S from 'illustration:./S2_lin_imageStack_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function ImageStack(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ImageStack(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/InfiniteLooping.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/InfiniteLooping.tsx
index 84c54be7b58..8ade0f793bb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/InfiniteLooping.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/InfiniteLooping.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import InfiniteLooping_L from 'illustration:./S2_lin_infiniteLooping_160.svg';
 import InfiniteLooping_M from 'illustration:./S2_lin_infiniteLooping_96.svg';
 import InfiniteLooping_S from 'illustration:./S2_lin_infiniteLooping_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function InfiniteLooping(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function InfiniteLooping(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Information.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Information.tsx
index ae75bef606a..69e48bea5f6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Information.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Information.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Information_L from 'illustration:./S2_lin_information_160.svg';
 import Information_M from 'illustration:./S2_lin_information_96.svg';
 import Information_S from 'illustration:./S2_lin_information_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Information(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Information(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Interaction.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Interaction.tsx
index d4484550a32..039d586cea2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Interaction.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Interaction.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Interaction_L from 'illustration:./S2_lin_interaction_160.svg';
 import Interaction_M from 'illustration:./S2_lin_interaction_96.svg';
 import Interaction_S from 'illustration:./S2_lin_interaction_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Interaction(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Interaction(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Laptop.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Laptop.tsx
index 932acca031a..9e07476356e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Laptop.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Laptop.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Laptop_L from 'illustration:./S2_lin_laptop_160.svg';
 import Laptop_M from 'illustration:./S2_lin_laptop_96.svg';
 import Laptop_S from 'illustration:./S2_lin_laptop_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Laptop(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Laptop(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Layers.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Layers.tsx
index 89117941ae2..bf3237b2dbd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Layers.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Layers.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Layers_L from 'illustration:./S2_lin_layers_160.svg';
 import Layers_M from 'illustration:./S2_lin_layers_96.svg';
 import Layers_S from 'illustration:./S2_lin_layers_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Layers(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Layers(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Libraries.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Libraries.tsx
index ab3af8ab1e2..4dba287421e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Libraries.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Libraries.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Libraries_L from 'illustration:./S2_lin_libraries_160.svg';
 import Libraries_M from 'illustration:./S2_lin_libraries_96.svg';
 import Libraries_S from 'illustration:./S2_lin_libraries_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Libraries(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Libraries(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lightbulb.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lightbulb.tsx
index 7aebfa9ca38..848c4b60556 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lightbulb.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lightbulb.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Lightbulb_L from 'illustration:./S2_lin_lightbulb_160.svg';
 import Lightbulb_M from 'illustration:./S2_lin_lightbulb_96.svg';
 import Lightbulb_S from 'illustration:./S2_lin_lightbulb_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Lightbulb(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Lightbulb(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LightbulbRays.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LightbulbRays.tsx
index 52bbb22b197..4fe88c50ae6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LightbulbRays.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LightbulbRays.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import LightbulbRays_L from 'illustration:./S2_lin_lightbulbRays_160.svg';
 import LightbulbRays_M from 'illustration:./S2_lin_lightbulbRays_96.svg';
 import LightbulbRays_S from 'illustration:./S2_lin_lightbulbRays_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function LightbulbRays(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function LightbulbRays(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lighten.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lighten.tsx
index 5dad7dafed2..2c029a32dd4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lighten.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Lighten.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Lighten_L from 'illustration:./S2_lin_lighten_160.svg';
 import Lighten_M from 'illustration:./S2_lin_lighten_96.svg';
 import Lighten_S from 'illustration:./S2_lin_lighten_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Lighten(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Lighten(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Link.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Link.tsx
index e3aacfb8ea7..4c63a88d019 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Link.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Link.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Link_L from 'illustration:./S2_lin_link_160.svg';
 import Link_M from 'illustration:./S2_lin_link_96.svg';
 import Link_S from 'illustration:./S2_lin_link_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Link(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Link(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Location.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Location.tsx
index 996dfef85a2..730b5e4876e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Location.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Location.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Location_L from 'illustration:./S2_lin_location_160.svg';
 import Location_M from 'illustration:./S2_lin_location_96.svg';
 import Location_S from 'illustration:./S2_lin_location_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Location(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Location(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockClose.tsx
index 37162a2d414..dd2a03f976e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockClose.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import LockClose_L from 'illustration:./S2_lin_lockClose_160.svg';
 import LockClose_M from 'illustration:./S2_lin_lockClose_96.svg';
 import LockClose_S from 'illustration:./S2_lin_lockClose_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function LockClose(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function LockClose(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockOpen.tsx
index e1eaa107150..782d39d36f5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/LockOpen.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import LockOpen_L from 'illustration:./S2_lin_lockOpen_160.svg';
 import LockOpen_M from 'illustration:./S2_lin_lockOpen_96.svg';
 import LockOpen_S from 'illustration:./S2_lin_lockOpen_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function LockOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function LockOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Logo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Logo.tsx
index e114a30df1f..8dbbd1494f5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Logo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Logo.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Logo_L from 'illustration:./S2_lin_logo_160.svg';
 import Logo_M from 'illustration:./S2_lin_logo_96.svg';
 import Logo_S from 'illustration:./S2_lin_logo_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Logo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Logo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MagicWand.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MagicWand.tsx
index 978a862eff7..5adea725535 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MagicWand.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MagicWand.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import MagicWand_L from 'illustration:./S2_lin_magicWand_160.svg';
 import MagicWand_M from 'illustration:./S2_lin_magicWand_96.svg';
 import MagicWand_S from 'illustration:./S2_lin_magicWand_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MagicWand(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MagicWand(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailClose.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailClose.tsx
index 3b825634d7d..42596952034 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailClose.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailClose.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import MailClose_L from 'illustration:./S2_lin_mailClose_160.svg';
 import MailClose_M from 'illustration:./S2_lin_mailClose_96.svg';
 import MailClose_S from 'illustration:./S2_lin_mailClose_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MailClose(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MailClose(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailOpen.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailOpen.tsx
index 2d5d391a99a..9818cbe16ae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailOpen.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MailOpen.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import MailOpen_L from 'illustration:./S2_lin_mailOpen_160.svg';
 import MailOpen_M from 'illustration:./S2_lin_mailOpen_96.svg';
 import MailOpen_S from 'illustration:./S2_lin_mailOpen_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MailOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MailOpen(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Market.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Market.tsx
index 94d805336f9..a5156b1447e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Market.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Market.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Market_L from 'illustration:./S2_lin_market_160.svg';
 import Market_M from 'illustration:./S2_lin_market_96.svg';
 import Market_S from 'illustration:./S2_lin_market_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Market(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Market(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromote.tsx
index 9af839d4ae9..900e8152f11 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromote.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import MegaphonePromote_L from 'illustration:./S2_lin_megaphonePromote_160.svg';
 import MegaphonePromote_M from 'illustration:./S2_lin_megaphonePromote_96.svg';
 import MegaphonePromote_S from 'illustration:./S2_lin_megaphonePromote_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MegaphonePromote(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MegaphonePromote(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromoteExpressive.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromoteExpressive.tsx
index 57f082883b4..d3819bf1636 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromoteExpressive.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MegaphonePromoteExpressive.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import MegaphonePromoteExpressive_L from 'illustration:./S2_lin_megaphonePromote_Expressive_160.svg';
 import MegaphonePromoteExpressive_M from 'illustration:./S2_lin_megaphonePromote_Expressive_96.svg';
 import MegaphonePromoteExpressive_S from 'illustration:./S2_lin_megaphonePromote_Expressive_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MegaphonePromoteExpressive(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MegaphonePromoteExpressive(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Mention.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Mention.tsx
index 1c5b2feee69..f83922065a3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Mention.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Mention.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Mention_L from 'illustration:./S2_lin_mention_160.svg';
 import Mention_M from 'illustration:./S2_lin_mention_96.svg';
 import Mention_S from 'illustration:./S2_lin_mention_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Mention(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Mention(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Microphone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Microphone.tsx
index 3c87dec2b52..0203e66f56e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Microphone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Microphone.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Microphone_L from 'illustration:./S2_lin_microphone_160.svg';
 import Microphone_M from 'illustration:./S2_lin_microphone_96.svg';
 import Microphone_S from 'illustration:./S2_lin_microphone_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Microphone(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Microphone(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MicrophoneOff.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MicrophoneOff.tsx
index 798fa598057..2f880784ce6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MicrophoneOff.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MicrophoneOff.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import MicrophoneOff_L from 'illustration:./S2_lin_microphoneOff_160.svg';
 import MicrophoneOff_M from 'illustration:./S2_lin_microphoneOff_96.svg';
 import MicrophoneOff_S from 'illustration:./S2_lin_microphoneOff_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MicrophoneOff(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MicrophoneOff(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Minimize.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Minimize.tsx
index 4ca499b6f83..9f1ac717a28 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Minimize.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Minimize.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Minimize_L from 'illustration:./S2_lin_minimize_160.svg';
 import Minimize_M from 'illustration:./S2_lin_minimize_96.svg';
 import Minimize_S from 'illustration:./S2_lin_minimize_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Minimize(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Minimize(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MovieCamera.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MovieCamera.tsx
index bacae7e489a..fa199524194 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MovieCamera.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MovieCamera.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import MovieCamera_L from 'illustration:./S2_lin_movieCamera_160.svg';
 import MovieCamera_M from 'illustration:./S2_lin_movieCamera_96.svg';
 import MovieCamera_S from 'illustration:./S2_lin_movieCamera_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MovieCamera(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MovieCamera(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MusicNote.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MusicNote.tsx
index 4a95957c992..a9563b0256f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/MusicNote.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/MusicNote.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import MusicNote_L from 'illustration:./S2_lin_musicNote_160.svg';
 import MusicNote_M from 'illustration:./S2_lin_musicNote_96.svg';
 import MusicNote_S from 'illustration:./S2_lin_musicNote_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function MusicNote(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function MusicNote(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoBrands.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoBrands.tsx
index aa5b34a3d8c..deed798848f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoBrands.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoBrands.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoBrands_L from 'illustration:./S2_lin_noBrands_160.svg';
 import NoBrands_M from 'illustration:./S2_lin_noBrands_96.svg';
 import NoBrands_S from 'illustration:./S2_lin_noBrands_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoBrands(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoBrands(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComment.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComment.tsx
index d4940e4c0ea..6fe1400f6ae 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComment.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComment.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoComment_L from 'illustration:./S2_lin_noComment_160.svg';
 import NoComment_M from 'illustration:./S2_lin_noComment_96.svg';
 import NoComment_S from 'illustration:./S2_lin_noComment_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoComment(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoComment(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComments.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComments.tsx
index 5e895931742..a1d5346494c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComments.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoComments.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoComments_L from 'illustration:./S2_lin_noComments_160.svg';
 import NoComments_M from 'illustration:./S2_lin_noComments_96.svg';
 import NoComments_S from 'illustration:./S2_lin_noComments_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoComments(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoComments(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoElements.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoElements.tsx
index 5b564e7465f..d26361453f6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoElements.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoElements.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoElements_L from 'illustration:./S2_lin_noElements_160.svg';
 import NoElements_M from 'illustration:./S2_lin_noElements_96.svg';
 import NoElements_S from 'illustration:./S2_lin_noElements_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoElements(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoElements(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFile.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFile.tsx
index 5a207865408..328b914335a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFile.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFile.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoFile_L from 'illustration:./S2_lin_noFile_160.svg';
 import NoFile_M from 'illustration:./S2_lin_noFile_96.svg';
 import NoFile_S from 'illustration:./S2_lin_noFile_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoFile(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoFile(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFilter.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFilter.tsx
index 1aff5af3e3a..20b4fdc0e86 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFilter.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoFilter.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoFilter_L from 'illustration:./S2_lin_noFilter_160.svg';
 import NoFilter_M from 'illustration:./S2_lin_noFilter_96.svg';
 import NoFilter_S from 'illustration:./S2_lin_noFilter_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoFilter(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoFilter(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoImage.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoImage.tsx
index a9d084f85af..7172cb41ce0 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoImage.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoImage.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoImage_L from 'illustration:./S2_lin_noImage_160.svg';
 import NoImage_M from 'illustration:./S2_lin_noImage_96.svg';
 import NoImage_S from 'illustration:./S2_lin_noImage_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoImage(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoImage(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibraries.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibraries.tsx
index 388753b80fd..7a6728e441e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibraries.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibraries.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoLibraries_L from 'illustration:./S2_lin_noLibraries_160.svg';
 import NoLibraries_M from 'illustration:./S2_lin_noLibraries_96.svg';
 import NoLibraries_S from 'illustration:./S2_lin_noLibraries_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoLibraries(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoLibraries(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibrariesBrands.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibrariesBrands.tsx
index d5378c53483..5bfdf9f55a5 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibrariesBrands.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoLibrariesBrands.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoLibrariesBrands_L from 'illustration:./S2_lin_noLibrariesBrands_160.svg';
 import NoLibrariesBrands_M from 'illustration:./S2_lin_noLibrariesBrands_96.svg';
 import NoLibrariesBrands_S from 'illustration:./S2_lin_noLibrariesBrands_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoLibrariesBrands(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoLibrariesBrands(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoReviewLinks.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoReviewLinks.tsx
index e1cecffb438..d5aa01ec5cf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoReviewLinks.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoReviewLinks.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoReviewLinks_L from 'illustration:./S2_lin_noReviewLinks_160.svg';
 import NoReviewLinks_M from 'illustration:./S2_lin_noReviewLinks_96.svg';
 import NoReviewLinks_S from 'illustration:./S2_lin_noReviewLinks_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoReviewLinks(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoReviewLinks(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSearchResults.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSearchResults.tsx
index f42166861d0..74533789ebc 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSearchResults.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSearchResults.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoSearchResults_L from 'illustration:./S2_lin_noSearchResults_160.svg';
 import NoSearchResults_M from 'illustration:./S2_lin_noSearchResults_96.svg';
 import NoSearchResults_S from 'illustration:./S2_lin_noSearchResults_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoSearchResults(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoSearchResults(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSharedFile.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSharedFile.tsx
index b9dc9a9aa19..71d70284ef8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSharedFile.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/NoSharedFile.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import NoSharedFile_L from 'illustration:./S2_lin_noSharedFile_160.svg';
 import NoSharedFile_M from 'illustration:./S2_lin_noSharedFile_96.svg';
 import NoSharedFile_S from 'illustration:./S2_lin_noSharedFile_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function NoSharedFile(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function NoSharedFile(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperairplane.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperairplane.tsx
index 084f2ada41b..2588ab20311 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperairplane.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperairplane.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Paperairplane_L from 'illustration:./S2_lin_paperairplane_160.svg';
 import Paperairplane_M from 'illustration:./S2_lin_paperairplane_96.svg';
 import Paperairplane_S from 'illustration:./S2_lin_paperairplane_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Paperairplane(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Paperairplane(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperclip.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperclip.tsx
index fa5985592a2..fc969a2eddb 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperclip.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Paperclip.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Paperclip_L from 'illustration:./S2_lin_paperclip_160.svg';
 import Paperclip_M from 'illustration:./S2_lin_paperclip_96.svg';
 import Paperclip_S from 'illustration:./S2_lin_paperclip_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Paperclip(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Paperclip(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pause.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pause.tsx
index e9420d394f0..4cb41d94e84 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pause.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pause.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Pause_L from 'illustration:./S2_lin_pause_160.svg';
 import Pause_M from 'illustration:./S2_lin_pause_96.svg';
 import Pause_S from 'illustration:./S2_lin_pause_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Pause(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Pause(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pencil.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pencil.tsx
index 1f627dba070..022e01e6839 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pencil.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pencil.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Pencil_L from 'illustration:./S2_lin_pencil_160.svg';
 import Pencil_M from 'illustration:./S2_lin_pencil_96.svg';
 import Pencil_S from 'illustration:./S2_lin_pencil_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Pencil(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Pencil(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Phone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Phone.tsx
index 522dfa91532..b00a1180199 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Phone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Phone.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Phone_L from 'illustration:./S2_lin_phone_160.svg';
 import Phone_M from 'illustration:./S2_lin_phone_96.svg';
 import Phone_S from 'illustration:./S2_lin_phone_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Phone(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Phone(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PieChart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PieChart.tsx
index e8230ef5872..732c8b1eac6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PieChart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PieChart.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import PieChart_L from 'illustration:./S2_lin_pieChart_160.svg';
 import PieChart_M from 'illustration:./S2_lin_pieChart_96.svg';
 import PieChart_S from 'illustration:./S2_lin_pieChart_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function PieChart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function PieChart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PiggyBank.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PiggyBank.tsx
index b8a5ad53455..d157ed27038 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PiggyBank.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PiggyBank.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import PiggyBank_L from 'illustration:./S2_lin_piggyBank_160.svg';
 import PiggyBank_M from 'illustration:./S2_lin_piggyBank_96.svg';
 import PiggyBank_S from 'illustration:./S2_lin_piggyBank_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function PiggyBank(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function PiggyBank(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pin.tsx
index a86f4309d91..75442ef59b1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Pin.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Pin_L from 'illustration:./S2_lin_pin_160.svg';
 import Pin_M from 'illustration:./S2_lin_pin_96.svg';
 import Pin_S from 'illustration:./S2_lin_pin_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Pin(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Pin(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Play.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Play.tsx
index 9b07a4d6fff..03dc1cf0989 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Play.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Play.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Play_L from 'illustration:./S2_lin_play_160.svg';
 import Play_M from 'illustration:./S2_lin_play_96.svg';
 import Play_S from 'illustration:./S2_lin_play_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Play(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Play(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PlayTriangle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PlayTriangle.tsx
index 4308e9ca9d3..23e9cfb96cf 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/PlayTriangle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/PlayTriangle.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import PlayTriangle_L from 'illustration:./S2_lin_playTriangle_160.svg';
 import PlayTriangle_M from 'illustration:./S2_lin_playTriangle_96.svg';
 import PlayTriangle_S from 'illustration:./S2_lin_playTriangle_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function PlayTriangle(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function PlayTriangle(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Plugin.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Plugin.tsx
index 595c387cf33..db7101e166e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Plugin.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Plugin.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Plugin_L from 'illustration:./S2_lin_plugin_160.svg';
 import Plugin_M from 'illustration:./S2_lin_plugin_96.svg';
 import Plugin_S from 'illustration:./S2_lin_plugin_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Plugin(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Plugin(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Prompt.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Prompt.tsx
index 29af595e426..a359fcc23f4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Prompt.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Prompt.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Prompt_L from 'illustration:./S2_lin_prompt_160.svg';
 import Prompt_M from 'illustration:./S2_lin_prompt_96.svg';
 import Prompt_S from 'illustration:./S2_lin_prompt_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Prompt(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Prompt(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Properties.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Properties.tsx
index adac9dda282..43d8a689b9d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Properties.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Properties.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
-import {IconProps, IllustrationContext} from '../../src/Icon';
 import Properties_L from 'illustration:./S2_lin_properties_160.svg';
 import Properties_M from 'illustration:./S2_lin_properties_96.svg';
 import Properties_S from 'illustration:./S2_lin_properties_48.svg';
+import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 
-export default function Properties(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Properties(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Redo.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Redo.tsx
index 477c5857c62..2bc3ebfbfab 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Redo.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Redo.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Redo_L from 'illustration:./S2_lin_redo_160.svg';
 import Redo_M from 'illustration:./S2_lin_redo_96.svg';
 import Redo_S from 'illustration:./S2_lin_redo_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Redo(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Redo(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Remix.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Remix.tsx
index 537288ea3b6..e0f27cc6524 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Remix.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Remix.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Remix_L from 'illustration:./S2_lin_remix_160.svg';
 import Remix_M from 'illustration:./S2_lin_remix_96.svg';
 import Remix_S from 'illustration:./S2_lin_remix_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Remix(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Remix(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Replace.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Replace.tsx
index b0272261697..9d449bd23ed 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Replace.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Replace.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Replace_L from 'illustration:./S2_lin_replace_160.svg';
 import Replace_M from 'illustration:./S2_lin_replace_96.svg';
 import Replace_S from 'illustration:./S2_lin_replace_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Replace(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Replace(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ReportAbuse.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ReportAbuse.tsx
index 4d2a4a76189..f0c25b575ef 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ReportAbuse.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ReportAbuse.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ReportAbuse_L from 'illustration:./S2_lin_reportAbuse_160.svg';
 import ReportAbuse_M from 'illustration:./S2_lin_reportAbuse_96.svg';
 import ReportAbuse_S from 'illustration:./S2_lin_reportAbuse_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ReportAbuse(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ReportAbuse(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Revert.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Revert.tsx
index 5753c28cab1..87d3ff0f02a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Revert.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Revert.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Revert_L from 'illustration:./S2_lin_revert_160.svg';
 import Revert_M from 'illustration:./S2_lin_revert_96.svg';
 import Revert_S from 'illustration:./S2_lin_revert_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Revert(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Revert(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ribbon.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ribbon.tsx
index 0f306945759..bfb028867a3 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ribbon.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ribbon.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Ribbon_L from 'illustration:./S2_lin_ribbon_160.svg';
 import Ribbon_M from 'illustration:./S2_lin_ribbon_96.svg';
 import Ribbon_S from 'illustration:./S2_lin_ribbon_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Ribbon(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Ribbon(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Rocket.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Rocket.tsx
index 39827601784..e4864e0ecb6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Rocket.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Rocket.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Rocket_L from 'illustration:./S2_lin_rocket_160.svg';
 import Rocket_M from 'illustration:./S2_lin_rocket_96.svg';
 import Rocket_S from 'illustration:./S2_lin_rocket_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Rocket(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Rocket(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCCW.tsx
index 322647e80c7..34fe5d7ec84 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCCW.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import RotateCCW_L from 'illustration:./S2_lin_rotateCCW_160.svg';
 import RotateCCW_M from 'illustration:./S2_lin_rotateCCW_96.svg';
 import RotateCCW_S from 'illustration:./S2_lin_rotateCCW_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function RotateCCW(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function RotateCCW(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCW.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCW.tsx
index 40c288ac2b2..67879e2b25e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCW.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/RotateCW.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import RotateCW_L from 'illustration:./S2_lin_rotateCW_160.svg';
 import RotateCW_M from 'illustration:./S2_lin_rotateCW_96.svg';
 import RotateCW_S from 'illustration:./S2_lin_rotateCW_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function RotateCW(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function RotateCW(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ruler.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ruler.tsx
index 0152947ded7..f3cfad9dd18 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ruler.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Ruler.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Ruler_L from 'illustration:./S2_lin_ruler_160.svg';
 import Ruler_M from 'illustration:./S2_lin_ruler_96.svg';
 import Ruler_S from 'illustration:./S2_lin_ruler_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Ruler(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Ruler(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Search.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Search.tsx
index 40ddaf62b70..f714da7f9b1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Search.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Search.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Search_L from 'illustration:./S2_lin_search_160.svg';
 import Search_M from 'illustration:./S2_lin_search_96.svg';
 import Search_S from 'illustration:./S2_lin_search_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Search(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Search(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Segmentation.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Segmentation.tsx
index 3f28ba55dd7..8b62c86e9f1 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Segmentation.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Segmentation.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Segmentation_L from 'illustration:./S2_lin_segmentation_160.svg';
 import Segmentation_M from 'illustration:./S2_lin_segmentation_96.svg';
 import Segmentation_S from 'illustration:./S2_lin_segmentation_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Segmentation(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Segmentation(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Server.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Server.tsx
index abc0391af62..5e07480d0d7 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Server.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Server.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Server_L from 'illustration:./S2_lin_server_160.svg';
 import Server_M from 'illustration:./S2_lin_server_96.svg';
 import Server_S from 'illustration:./S2_lin_server_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Server(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Server(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Shapes.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Shapes.tsx
index 46345e4adbd..d6ee1901253 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Shapes.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Shapes.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Shapes_L from 'illustration:./S2_lin_shapes_160.svg';
 import Shapes_M from 'illustration:./S2_lin_shapes_96.svg';
 import Shapes_S from 'illustration:./S2_lin_shapes_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Shapes(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Shapes(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingBag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingBag.tsx
index 11d15254ab5..7244c08ecfa 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingBag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingBag.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ShoppingBag_L from 'illustration:./S2_lin_shoppingBag_160.svg';
 import ShoppingBag_M from 'illustration:./S2_lin_shoppingBag_96.svg';
 import ShoppingBag_S from 'illustration:./S2_lin_shoppingBag_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ShoppingBag(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ShoppingBag(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingCart.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingCart.tsx
index 61fd8e6f54d..53663bc090e 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingCart.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ShoppingCart.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ShoppingCart_L from 'illustration:./S2_lin_shoppingCart_160.svg';
 import ShoppingCart_M from 'illustration:./S2_lin_shoppingCart_96.svg';
 import ShoppingCart_S from 'illustration:./S2_lin_shoppingCart_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ShoppingCart(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ShoppingCart(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Sparkles.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Sparkles.tsx
index 2b64e7903f7..445861ee230 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Sparkles.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Sparkles.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Sparkles_L from 'illustration:./S2_lin_sparkles_160.svg';
 import Sparkles_M from 'illustration:./S2_lin_sparkles_96.svg';
 import Sparkles_S from 'illustration:./S2_lin_sparkles_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Sparkles(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Sparkles(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/SpeedFast.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/SpeedFast.tsx
index f7b825c029f..9c8dece776b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/SpeedFast.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/SpeedFast.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import SpeedFast_L from 'illustration:./S2_lin_speedFast_160.svg';
 import SpeedFast_M from 'illustration:./S2_lin_speedFast_96.svg';
 import SpeedFast_S from 'illustration:./S2_lin_speedFast_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function SpeedFast(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function SpeedFast(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/StampClone.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/StampClone.tsx
index 2d3d11bfe8f..7fa32375088 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/StampClone.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/StampClone.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import StampClone_L from 'illustration:./S2_lin_stampClone_160.svg';
 import StampClone_M from 'illustration:./S2_lin_stampClone_96.svg';
 import StampClone_S from 'illustration:./S2_lin_stampClone_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function StampClone(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function StampClone(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Star.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Star.tsx
index b327648e374..b6f066b7d9a 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Star.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Star.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Star_L from 'illustration:./S2_lin_star_160.svg';
 import Star_M from 'illustration:./S2_lin_star_96.svg';
 import Star_S from 'illustration:./S2_lin_star_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Star(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Star(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/StepForward.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/StepForward.tsx
index 130175b255a..52b17da22ed 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/StepForward.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/StepForward.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import StepForward_L from 'illustration:./S2_lin_stepForward_160.svg';
 import StepForward_M from 'illustration:./S2_lin_stepForward_96.svg';
 import StepForward_S from 'illustration:./S2_lin_stepForward_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function StepForward(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function StepForward(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Stopwatch.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Stopwatch.tsx
index ab12280bfd8..866edc81fa2 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Stopwatch.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Stopwatch.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Stopwatch_L from 'illustration:./S2_lin_stopwatch_160.svg';
 import Stopwatch_M from 'illustration:./S2_lin_stopwatch_96.svg';
 import Stopwatch_S from 'illustration:./S2_lin_stopwatch_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Stopwatch(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Stopwatch(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Switch.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Switch.tsx
index b213ff9d308..ab90a390f30 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Switch.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Switch.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Switch_L from 'illustration:./S2_lin_switch_160.svg';
 import Switch_M from 'illustration:./S2_lin_switch_96.svg';
 import Switch_S from 'illustration:./S2_lin_switch_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Switch(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Switch(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tablet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tablet.tsx
index f0a7c68b8c8..d15a27016f4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tablet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tablet.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Tablet_L from 'illustration:./S2_lin_tablet_160.svg';
 import Tablet_M from 'illustration:./S2_lin_tablet_96.svg';
 import Tablet_S from 'illustration:./S2_lin_tablet_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Tablet(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Tablet(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tag.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tag.tsx
index c4282eb89ba..1b39987472b 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tag.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Tag.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Tag_L from 'illustration:./S2_lin_tag_160.svg';
 import Tag_M from 'illustration:./S2_lin_tag_96.svg';
 import Tag_S from 'illustration:./S2_lin_tag_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Tag(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Tag(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Targeted.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Targeted.tsx
index 28bf9a5ce10..419d81df157 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Targeted.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Targeted.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Targeted_L from 'illustration:./S2_lin_targeted_160.svg';
 import Targeted_M from 'illustration:./S2_lin_targeted_96.svg';
 import Targeted_S from 'illustration:./S2_lin_targeted_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Targeted(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Targeted(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Text.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Text.tsx
index 15550d2dd94..1fa3c4aaa23 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Text.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Text.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Text_L from 'illustration:./S2_lin_text_160.svg';
 import Text_M from 'illustration:./S2_lin_text_96.svg';
 import Text_S from 'illustration:./S2_lin_text_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Text(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Text(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThreeArrowsCircle.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThreeArrowsCircle.tsx
index a36f9dc638d..e58e8cd0e2f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThreeArrowsCircle.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThreeArrowsCircle.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ThreeArrowsCircle_L from 'illustration:./S2_lin_threeArrowsCircle_160.svg';
 import ThreeArrowsCircle_M from 'illustration:./S2_lin_threeArrowsCircle_96.svg';
 import ThreeArrowsCircle_S from 'illustration:./S2_lin_threeArrowsCircle_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ThreeArrowsCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ThreeArrowsCircle(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsDown.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsDown.tsx
index 65939adc7c0..ab9fa658246 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsDown.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsDown.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ThumbsDown_L from 'illustration:./S2_lin_thumbsDown_160.svg';
 import ThumbsDown_M from 'illustration:./S2_lin_thumbsDown_96.svg';
 import ThumbsDown_S from 'illustration:./S2_lin_thumbsDown_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ThumbsDown(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ThumbsDown(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsUp.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsUp.tsx
index ece75b0e6ae..5db5949ebc8 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsUp.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/ThumbsUp.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import ThumbsUp_L from 'illustration:./S2_lin_thumbsUp_160.svg';
 import ThumbsUp_M from 'illustration:./S2_lin_thumbsUp_96.svg';
 import ThumbsUp_S from 'illustration:./S2_lin_thumbsUp_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function ThumbsUp(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function ThumbsUp(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Transform.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Transform.tsx
index 4c93d675ad5..0cf023a5420 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Transform.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Transform.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Transform_L from 'illustration:./S2_lin_transform_160.svg';
 import Transform_M from 'illustration:./S2_lin_transform_96.svg';
 import Transform_S from 'illustration:./S2_lin_transform_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Transform(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Transform(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Translate.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Translate.tsx
index 070fc5c4544..cc19439971d 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Translate.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Translate.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Translate_L from 'illustration:./S2_lin_translate_160.svg';
 import Translate_M from 'illustration:./S2_lin_translate_96.svg';
 import Translate_S from 'illustration:./S2_lin_translate_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Translate(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Translate(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trash.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trash.tsx
index 556450b29e9..66d4f9f2f2f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trash.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trash.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Trash_L from 'illustration:./S2_lin_trash_160.svg';
 import Trash_M from 'illustration:./S2_lin_trash_96.svg';
 import Trash_S from 'illustration:./S2_lin_trash_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Trash(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Trash(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trophy.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trophy.tsx
index 416ad00526e..e62b5fca432 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trophy.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Trophy.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Trophy_L from 'illustration:./S2_lin_trophy_160.svg';
 import Trophy_M from 'illustration:./S2_lin_trophy_96.svg';
 import Trophy_S from 'illustration:./S2_lin_trophy_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Trophy(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Trophy(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Update.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Update.tsx
index a920a802eb5..9e673e378d6 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Update.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Update.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Update_L from 'illustration:./S2_lin_update_160.svg';
 import Update_M from 'illustration:./S2_lin_update_96.svg';
 import Update_S from 'illustration:./S2_lin_update_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Update(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Update(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Upload.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Upload.tsx
index 693718fcafb..d1e5e9648c4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Upload.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Upload.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import Upload_L from 'illustration:./S2_lin_upload_160.svg';
 import Upload_M from 'illustration:./S2_lin_upload_96.svg';
 import Upload_S from 'illustration:./S2_lin_upload_48.svg';
 import {useContextProps} from 'react-aria-components';
 
-export default function Upload(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Upload(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/User.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/User.tsx
index 10bb7ef15c5..14213eee65f 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/User.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/User.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import User_L from 'illustration:./S2_lin_user_160.svg';
 import User_M from 'illustration:./S2_lin_user_96.svg';
 import User_S from 'illustration:./S2_lin_user_48.svg';
 
-export default function User(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function User(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserAvatar.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserAvatar.tsx
index f735f0e1d81..e2960b72236 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserAvatar.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserAvatar.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import UserAvatar_L from 'illustration:./S2_lin_userAvatar_160.svg';
 import UserAvatar_M from 'illustration:./S2_lin_userAvatar_96.svg';
 import UserAvatar_S from 'illustration:./S2_lin_userAvatar_48.svg';
 
-export default function UserAvatar(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function UserAvatar(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserGroup.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserGroup.tsx
index f412e72d4ef..fa5d19cd54c 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserGroup.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/UserGroup.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import UserGroup_L from 'illustration:./S2_lin_userGroup_160.svg';
 import UserGroup_M from 'illustration:./S2_lin_userGroup_96.svg';
 import UserGroup_S from 'illustration:./S2_lin_userGroup_48.svg';
 
-export default function UserGroup(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function UserGroup(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VectorDraw.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VectorDraw.tsx
index 4b6298c6576..f31f15db581 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VectorDraw.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VectorDraw.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import VectorDraw_L from 'illustration:./S2_lin_vectorDraw_160.svg';
 import VectorDraw_M from 'illustration:./S2_lin_vectorDraw_96.svg';
 import VectorDraw_S from 'illustration:./S2_lin_vectorDraw_48.svg';
 
-export default function VectorDraw(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function VectorDraw(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Video.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Video.tsx
index 73b34d8c2fd..29ba8465265 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Video.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Video.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import Video_L from 'illustration:./S2_lin_video_160.svg';
 import Video_M from 'illustration:./S2_lin_video_96.svg';
 import Video_S from 'illustration:./S2_lin_video_48.svg';
 
-export default function Video(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Video(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Volume.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Volume.tsx
index 8f6d0392ef4..0a7b53828a4 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Volume.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Volume.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import Volume_L from 'illustration:./S2_lin_volume_160.svg';
 import Volume_M from 'illustration:./S2_lin_volume_96.svg';
 import Volume_S from 'illustration:./S2_lin_volume_48.svg';
 
-export default function Volume(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Volume(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOff.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOff.tsx
index 25b82c058ed..f55b20801c9 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOff.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOff.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import VolumeOff_L from 'illustration:./S2_lin_volumeOff_160.svg';
 import VolumeOff_M from 'illustration:./S2_lin_volumeOff_96.svg';
 import VolumeOff_S from 'illustration:./S2_lin_volumeOff_48.svg';
 
-export default function VolumeOff(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function VolumeOff(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOne.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOne.tsx
index 41207106ed2..da7791aa4de 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOne.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/VolumeOne.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import VolumeOne_L from 'illustration:./S2_lin_volumeOne_160.svg';
 import VolumeOne_M from 'illustration:./S2_lin_volumeOne_96.svg';
 import VolumeOne_S from 'illustration:./S2_lin_volumeOne_48.svg';
 
-export default function VolumeOne(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function VolumeOne(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Wallet.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Wallet.tsx
index 7ddbfefb507..4fde28f0ccd 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Wallet.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Wallet.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import Wallet_L from 'illustration:./S2_lin_wallet_160.svg';
 import Wallet_M from 'illustration:./S2_lin_wallet_96.svg';
 import Wallet_S from 'illustration:./S2_lin_wallet_48.svg';
 
-export default function Wallet(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Wallet(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Warning.tsx b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Warning.tsx
index cbfa1ec4dd6..a7014e91d50 100644
--- a/packages/@react-spectrum/s2/spectrum-illustrations/linear/Warning.tsx
+++ b/packages/@react-spectrum/s2/spectrum-illustrations/linear/Warning.tsx
@@ -10,13 +10,14 @@
  * governing permissions and limitations under the License.
  */
 
+import {ReactNode} from 'react';
 import {IconProps, IllustrationContext} from '../../src/Icon';
 import {useContextProps} from 'react-aria-components';
 import Warning_L from 'illustration:./S2_lin_warning_160.svg';
 import Warning_M from 'illustration:./S2_lin_warning_96.svg';
 import Warning_S from 'illustration:./S2_lin_warning_48.svg';
 
-export default function Warning(props: IconProps & {size?: 'L' | 'S' | 'M'}) {
+export default function Warning(props: IconProps & {size?: 'L' | 'S' | 'M'}): ReactNode {
   [props] = useContextProps(props, null, IllustrationContext);
   let {size = 'M', ...otherProps} = props;
   switch (size) {
diff --git a/scripts/generateS2IconIndex.js b/scripts/generateS2IconIndex.js
index b2435de05a9..392ce5b3786 100644
--- a/scripts/generateS2IconIndex.js
+++ b/scripts/generateS2IconIndex.js
@@ -66,7 +66,8 @@ function generate(dir) {
   }
 
   let relative = path.relative(dir, 'packages/@react-spectrum/s2/src/Icon');
-  let typeImport = dir.includes('ui-icons') ? "import {ReactNode, SVGProps} from 'react';" : `import {IconProps, IllustrationContext} from '${relative}';`;
+  let typeImport = dir.includes('ui-icons') ? "import {ReactNode, SVGProps} from 'react';" : `import {ReactNode} from 'react';
+import {IconProps, IllustrationContext} from '${relative}';`;
   let ctx = dir.includes('spectrum-illustrations') ? '[props] = useContextProps(props, null, IllustrationContext);\n  ' : '';
   let type = dir.includes('ui-icons') ? 'SVGProps<SVGSVGElement>' : 'IconProps';
   let isIllustration =  dir.includes('spectrum-illustrations');

From 10f0fb9be2e34664d8d4b70c1affc3c2b4187a3e Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Tue, 10 Jun 2025 17:02:11 +1000
Subject: [PATCH 3/8] fix lint and ts for React 18/19

---
 packages/@react-spectrum/color/test/ColorArea.test.tsx | 2 +-
 packages/dev/docs/pages/react-aria/home/ExampleApp.tsx | 2 +-
 packages/dev/test-utils/src/renderOverride.tsx         | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/@react-spectrum/color/test/ColorArea.test.tsx b/packages/@react-spectrum/color/test/ColorArea.test.tsx
index a008ea13b7d..f166cd180ac 100644
--- a/packages/@react-spectrum/color/test/ColorArea.test.tsx
+++ b/packages/@react-spectrum/color/test/ColorArea.test.tsx
@@ -14,10 +14,10 @@ import {ColorArea} from '../';
 import {composeStories} from '@storybook/react';
 import {fireEvent, installMouseEvent, installPointerEvent, pointerMap, renderv3 as render} from '@react-spectrum/test-utils-internal';
 import {parseColor} from '@react-stately/color';
+import {ProviderProps} from '@react-spectrum/provider';
 import React from 'react';
 import * as stories from '../stories/ColorArea.stories';
 import userEvent from '@testing-library/user-event';
-import { ProviderProps } from '@react-spectrum/provider';
 
 let {XRedYGreen: DefaultColorArea, XBlueYGreen, XSaturationYBrightness, XSaturationYLightness} = composeStories(stories);
 
diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
index a4f85539bc7..3c3d5c5470c 100644
--- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
+++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
@@ -433,7 +433,7 @@ function PlantDialog({item, onSave}: {item?: Plant | null, onSave: (item: Plant)
                 <input type="hidden" name="image" value={droppedImage} />
               </DropZone>
               <div className="flex flex-col gap-3 flex-1 min-w-0">
-                <ComboBox<Plant> label="Common Name" name="common_name" isRequired items={plants} defaultInputValue={item?.common_name} allowsCustomValue autoFocus={navigator.maxTouchPoints === 0}>
+                <ComboBox<Plant> label="Common Name" name="common_name" isRequired items={plants as Iterable<Plant>} defaultInputValue={item?.common_name} allowsCustomValue autoFocus={navigator.maxTouchPoints === 0}>
                   {plant => <ComboBoxItem>{plant.common_name}</ComboBoxItem>}
                 </ComboBox>
                 <TextField label="Scientific Name" name="scientific_name" isRequired defaultValue={item?.scientific_name?.join('')} />
diff --git a/packages/dev/test-utils/src/renderOverride.tsx b/packages/dev/test-utils/src/renderOverride.tsx
index fdeffc383c3..9850ee60ff2 100644
--- a/packages/dev/test-utils/src/renderOverride.tsx
+++ b/packages/dev/test-utils/src/renderOverride.tsx
@@ -16,7 +16,7 @@ import {render} from '@testing-library/react';
 import {StrictModeWrapper} from './StrictModeWrapper';
 import {theme} from '@react-spectrum/theme-default';
 
-export {renderHook, act, act as actHook, fireEvent, within, screen, waitFor} from '@testing-library/react';
+export {renderHook, act, act as actHook, fireEvent, within, screen, waitFor, getAllByRole, createEvent, waitForElementToBeRemoved} from '@testing-library/react';
 
 function customRender(ui: Parameters<typeof render>[0], options?: Parameters<typeof render>[1] | undefined): ReturnType<typeof render> {
   return render(ui, {wrapper: StrictModeWrapper, ...options});

From 9d10e6212285540abc9abc0f5e023831c71b9a18 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Wed, 11 Jun 2025 06:57:25 +1000
Subject: [PATCH 4/8] fix 16, 17

---
 packages/dev/test-utils/src/renderOverride.tsx | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/dev/test-utils/src/renderOverride.tsx b/packages/dev/test-utils/src/renderOverride.tsx
index 9850ee60ff2..a2c1064f2c0 100644
--- a/packages/dev/test-utils/src/renderOverride.tsx
+++ b/packages/dev/test-utils/src/renderOverride.tsx
@@ -16,12 +16,23 @@ import {render} from '@testing-library/react';
 import {StrictModeWrapper} from './StrictModeWrapper';
 import {theme} from '@react-spectrum/theme-default';
 
-export {renderHook, act, act as actHook, fireEvent, within, screen, waitFor, getAllByRole, createEvent, waitForElementToBeRemoved} from '@testing-library/react';
+export {act, fireEvent, within, screen, waitFor, getAllByRole, createEvent, waitForElementToBeRemoved} from '@testing-library/react';
 
 function customRender(ui: Parameters<typeof render>[0], options?: Parameters<typeof render>[1] | undefined): ReturnType<typeof render> {
   return render(ui, {wrapper: StrictModeWrapper, ...options});
 }
 
+let reactTestingLibrary = require('@testing-library/react');
+// export renderHook and actHook from testing-library/react-hooks library if they don't exist in @testing-library/react
+// (i.e. renderHook is only in v13+ of testing library)
+export let renderHook = reactTestingLibrary.renderHook;
+export let actHook = reactTestingLibrary.act;
+if (!renderHook) {
+  let rhtl = require('@testing-library/react-hooks');
+  renderHook = rhtl.renderHook;
+  actHook = rhtl.act;
+}
+
 // override render method with
 export {customRender as render};
 

From b420bfc9156d9f00af6fb7a63873bf7f1f7eef01 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Wed, 11 Jun 2025 10:29:01 +1000
Subject: [PATCH 5/8] fix return types to work with isolated modules for
 renderOverrides

---
 packages/dev/test-utils/src/renderOverride.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/dev/test-utils/src/renderOverride.tsx b/packages/dev/test-utils/src/renderOverride.tsx
index a2c1064f2c0..16992acf2c8 100644
--- a/packages/dev/test-utils/src/renderOverride.tsx
+++ b/packages/dev/test-utils/src/renderOverride.tsx
@@ -10,9 +10,9 @@
  * governing permissions and limitations under the License.
  */
 
+import {act as originalAct, renderHook as originalRenderHook, render} from '@testing-library/react';
 import {Provider, ProviderProps} from '@react-spectrum/provider';
 import React from 'react';
-import {render} from '@testing-library/react';
 import {StrictModeWrapper} from './StrictModeWrapper';
 import {theme} from '@react-spectrum/theme-default';
 
@@ -25,8 +25,8 @@ function customRender(ui: Parameters<typeof render>[0], options?: Parameters<typ
 let reactTestingLibrary = require('@testing-library/react');
 // export renderHook and actHook from testing-library/react-hooks library if they don't exist in @testing-library/react
 // (i.e. renderHook is only in v13+ of testing library)
-export let renderHook = reactTestingLibrary.renderHook;
-export let actHook = reactTestingLibrary.act;
+export let renderHook = reactTestingLibrary.renderHook as typeof originalRenderHook;
+export let actHook = reactTestingLibrary.act as typeof originalAct;
 if (!renderHook) {
   let rhtl = require('@testing-library/react-hooks');
   renderHook = rhtl.renderHook;

From bc8f241a4bb0a05631d26e7fe7cf32efae87484f Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Wed, 11 Jun 2025 12:21:06 +1000
Subject: [PATCH 6/8] fix inference

---
 .../form/stories/Form.stories.tsx              | 18 +++++++++---------
 .../docs/pages/react-aria/home/ExampleApp.tsx  |  6 ++----
 .../react-aria/home/{plants.js => plants.ts}   | 16 +++++++++++++++-
 3 files changed, 26 insertions(+), 14 deletions(-)
 rename packages/dev/docs/pages/react-aria/home/{plants.js => plants.ts} (96%)

diff --git a/packages/@react-spectrum/form/stories/Form.stories.tsx b/packages/@react-spectrum/form/stories/Form.stories.tsx
index 4a4b4cd2a7c..ded882d8e99 100644
--- a/packages/@react-spectrum/form/stories/Form.stories.tsx
+++ b/packages/@react-spectrum/form/stories/Form.stories.tsx
@@ -21,7 +21,7 @@ import {ComboBox} from '@react-spectrum/combobox';
 import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {Content, Header} from '@react-spectrum/view';
 import {ContextualHelp} from '@react-spectrum/contextualhelp';
-import {countries, Country, State, states} from './data';
+import {countries, states} from './data';
 import {DateField, DatePicker, DateRangePicker, TimeField} from '@react-spectrum/datepicker';
 import {Flex} from '@react-spectrum/layout';
 import {Form, SpectrumFormProps} from '../';
@@ -117,7 +117,7 @@ export const FieldsNextToEachOther: FormStory = {
           marginEnd="size-100"
           flex={1}
           description="Please enter the city you live in." />
-        <Picker<State> label="State" items={states} marginEnd="size-100" flex={1}>
+        <Picker label="State" items={states} marginEnd="size-100" flex={1}>
           {(item) => <Item key={item.abbr}>{item.name}</Item>}
         </Picker>
         <TextField label="Zip code" flex={1} description="Please enter a five-digit zip code." />
@@ -166,7 +166,7 @@ const FieldsWithAutoCompletePropertyRender = (props: SpectrumFormProps) => {
             label="City"
             marginEnd="size-100"
             flex={1} />
-          <Picker<State>
+          <Picker
             autoComplete="billing address-level1"
             name="state"
             isRequired
@@ -184,7 +184,7 @@ const FieldsWithAutoCompletePropertyRender = (props: SpectrumFormProps) => {
             flex={1} />
         </Flex>
         <Flex>
-          <Picker<Country>
+          <Picker
             autoComplete="billing country"
             name="country"
             isRequired
@@ -253,7 +253,7 @@ const FieldsWithAutoCompletePropertyRender = (props: SpectrumFormProps) => {
                 label="City"
                 marginEnd="size-100"
                 flex={1} />
-              <Picker<State>
+              <Picker
                 autoComplete="shipping address-level1"
                 name="shippingState"
                 isRequired
@@ -271,7 +271,7 @@ const FieldsWithAutoCompletePropertyRender = (props: SpectrumFormProps) => {
                 flex={1} />
             </Flex>
             <Flex>
-              <Picker<Country>
+              <Picker
                 autoComplete="shipping country"
                 name="shippingCountry"
                 isRequired
@@ -459,10 +459,10 @@ function Render(props: any = {}) {
         <Item key="snake">Snake</Item>
       </SearchAutocomplete>
       <NumberField label="Years lived there" name="years" />
-      <Picker<State> label="State" items={states} name="state">
+      <Picker label="State" items={states} name="state">
         {item => <Item key={item.abbr}>{item.name}</Item>}
       </Picker>
-      <Picker<Country> label="Country" items={countries} name="country">
+      <Picker label="Country" items={countries} name="country">
         {item => <Item key={item.name}>{item.name}</Item>}
       </Picker>
       <Picker label="Favorite color" name="color" description="Select any color you like." errorMessage="Please select a nicer color.">
@@ -535,7 +535,7 @@ function FormWithControls(props: any = {}) {
       <TextField name="first-name" label="First Name (controlled)" value={firstName} onChange={setFirstName} />
       <TextField name="last-name" label="Last Name (uncontrolled)" defaultValue="world" />
       <TextField name="street-address" label="Street Address (uncontrolled)" />
-      <Picker<Country> name="country" label="Country (uncontrolled)" items={countries}>
+      <Picker name="country" label="Country (uncontrolled)" items={countries}>
         {item => <Item key={item.name}>{item.name}</Item>}
       </Picker>
       <NumberField name="age" label="Age (uncontrolled)" />
diff --git a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
index 3c3d5c5470c..39085048daf 100644
--- a/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
+++ b/packages/dev/docs/pages/react-aria/home/ExampleApp.tsx
@@ -23,7 +23,7 @@ import {getLocalTimeZone, today} from '@internationalized/date';
 import {GridList, GridListItem} from 'tailwind-starter/GridList';
 import {Menu, MenuItem} from 'tailwind-starter/Menu';
 import {Modal} from 'tailwind-starter/Modal';
-import plants from './plants';
+import plants, {Plant} from './plants';
 import {Popover} from 'tailwind-starter/Popover';
 import React, {ReactElement, UIEvent, useCallback, useEffect, useMemo, useRef, useState} from 'react';
 import {SearchField} from 'tailwind-starter/SearchField';
@@ -35,8 +35,6 @@ import {tv} from 'tailwind-variants';
 import {useCollator, useFilter, VisuallyHidden} from 'react-aria';
 import {useMediaQuery} from '@react-spectrum/utils';
 
-type Plant = typeof plants[0] & {isFavorite: boolean};
-
 const allColumns: ColumnProps[] = [
   {id: 'favorite', children: <VisuallyHidden>Favorite</VisuallyHidden>, width: 40, minWidth: 40},
   {id: 'common_name', children: 'Name', minWidth: 150, allowsSorting: true},
@@ -433,7 +431,7 @@ function PlantDialog({item, onSave}: {item?: Plant | null, onSave: (item: Plant)
                 <input type="hidden" name="image" value={droppedImage} />
               </DropZone>
               <div className="flex flex-col gap-3 flex-1 min-w-0">
-                <ComboBox<Plant> label="Common Name" name="common_name" isRequired items={plants as Iterable<Plant>} defaultInputValue={item?.common_name} allowsCustomValue autoFocus={navigator.maxTouchPoints === 0}>
+                <ComboBox label="Common Name" name="common_name" isRequired items={plants} defaultInputValue={item?.common_name} allowsCustomValue autoFocus={navigator.maxTouchPoints === 0}>
                   {plant => <ComboBoxItem>{plant.common_name}</ComboBoxItem>}
                 </ComboBox>
                 <TextField label="Scientific Name" name="scientific_name" isRequired defaultValue={item?.scientific_name?.join('')} />
diff --git a/packages/dev/docs/pages/react-aria/home/plants.js b/packages/dev/docs/pages/react-aria/home/plants.ts
similarity index 96%
rename from packages/dev/docs/pages/react-aria/home/plants.js
rename to packages/dev/docs/pages/react-aria/home/plants.ts
index f2dc5080720..65be38efb0c 100644
--- a/packages/dev/docs/pages/react-aria/home/plants.js
+++ b/packages/dev/docs/pages/react-aria/home/plants.ts
@@ -9,6 +9,20 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
+
+export interface Plant {
+  id: number,
+  common_name: string,
+  scientific_name: string[],
+  watering: string,
+  sunlight: string[],
+  cycle: string,
+  default_image: {
+    thumbnail: string
+  },
+  isFavorite?: boolean
+}
+
 export default [
   {
     id: 1,
@@ -230,4 +244,4 @@ export default [
       thumbnail: new URL('plants/nasturtium.jpg?as=webp', import.meta.url).toString()
     }
   }
-];
+] as Plant[];

From b499c68ba6e9eb006445c58215ba7c7cb35ca29f Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Wed, 11 Jun 2025 18:37:27 +1000
Subject: [PATCH 7/8] chore: ts explicit module boundary RAC

---
 .../src/Autocomplete.tsx                      |   8 +-
 .../react-aria-components/src/Breadcrumbs.tsx |  12 +-
 packages/react-aria-components/src/Button.tsx |   7 +-
 .../react-aria-components/src/Calendar.tsx    |  36 +-
 .../react-aria-components/src/Checkbox.tsx    |  14 +-
 .../react-aria-components/src/Collection.tsx  |  12 +-
 .../react-aria-components/src/ColorArea.tsx   |   8 +-
 .../react-aria-components/src/ColorField.tsx  |  10 +-
 .../react-aria-components/src/ColorPicker.tsx |   6 +-
 .../react-aria-components/src/ColorSlider.tsx |   8 +-
 .../react-aria-components/src/ColorSwatch.tsx |  10 +-
 .../src/ColorSwatchPicker.tsx                 |  12 +-
 .../react-aria-components/src/ColorThumb.tsx  |   8 +-
 .../react-aria-components/src/ColorWheel.tsx  |  14 +-
 .../react-aria-components/src/ComboBox.tsx    |  10 +-
 .../react-aria-components/src/DateField.tsx   |  28 +-
 .../react-aria-components/src/DatePicker.tsx  |  18 +-
 packages/react-aria-components/src/Dialog.tsx |  10 +-
 .../react-aria-components/src/Disclosure.tsx  |  20 +-
 .../react-aria-components/src/DragAndDrop.tsx |  10 +-
 .../react-aria-components/src/DropZone.tsx    |   8 +-
 .../react-aria-components/src/FieldError.tsx  |   8 +-
 .../react-aria-components/src/FileTrigger.tsx |   4 +-
 packages/react-aria-components/src/Form.tsx   |   8 +-
 .../react-aria-components/src/GridList.tsx    |  22 +-
 packages/react-aria-components/src/Group.tsx  |   8 +-
 packages/react-aria-components/src/Header.tsx |   8 +-
 .../react-aria-components/src/Heading.tsx     |   4 +-
 packages/react-aria-components/src/Input.tsx  |   8 +-
 .../react-aria-components/src/Keyboard.tsx    |   8 +-
 packages/react-aria-components/src/Label.tsx  |   8 +-
 packages/react-aria-components/src/Link.tsx   |   8 +-
 .../react-aria-components/src/ListBox.tsx     |  30 +-
 packages/react-aria-components/src/Menu.tsx   |  29 +-
 packages/react-aria-components/src/Meter.tsx  |   8 +-
 packages/react-aria-components/src/Modal.tsx  |  14 +-
 .../react-aria-components/src/NumberField.tsx |  10 +-
 .../src/OverlayArrow.tsx                      |   8 +-
 .../react-aria-components/src/Popover.tsx     |   6 +-
 .../react-aria-components/src/ProgressBar.tsx |   8 +-
 .../react-aria-components/src/RSPContexts.ts  |  14 +-
 .../react-aria-components/src/RadioGroup.tsx  |  16 +-
 .../react-aria-components/src/SearchField.tsx |   8 +-
 packages/react-aria-components/src/Select.tsx |  16 +-
 .../react-aria-components/src/Separator.tsx   |   7 +-
 packages/react-aria-components/src/Slider.tsx |  26 +-
 packages/react-aria-components/src/Switch.tsx |   8 +-
 packages/react-aria-components/src/Table.tsx  |  54 +-
 packages/react-aria-components/src/Tabs.tsx   |  24 +-
 .../react-aria-components/src/TagGroup.tsx    |  20 +-
 packages/react-aria-components/src/Text.tsx   |   8 +-
 .../react-aria-components/src/TextArea.tsx    |   8 +-
 .../react-aria-components/src/TextField.tsx   |   8 +-
 packages/react-aria-components/src/Toast.tsx  |  22 +-
 .../src/ToggleButton.tsx                      |   8 +-
 .../src/ToggleButtonGroup.tsx                 |  10 +-
 .../react-aria-components/src/Toolbar.tsx     |   8 +-
 .../react-aria-components/src/Tooltip.tsx     |  10 +-
 packages/react-aria-components/src/Tree.tsx   |  27 +-
 packages/react-aria-components/src/utils.tsx  |   2 +-
 .../stories/Autocomplete.stories.tsx          |  44 +-
 .../stories/Breadcrumbs.stories.tsx           |  53 +-
 .../stories/Button.stories.tsx                |  24 +-
 .../stories/Calendar.stories.tsx              | 129 ++---
 .../stories/Checkbox.stories.tsx              |  14 +-
 .../stories/CheckboxGroup.stories.tsx         |  21 +-
 .../stories/ColorArea.stories.tsx             | 113 +++--
 .../stories/ColorField.stories.tsx            |  30 +-
 .../stories/ColorPicker.stories.tsx           |  40 +-
 .../stories/ColorSlider.stories.tsx           | 107 ++--
 .../stories/ColorSwatch.stories.tsx           |  30 +-
 .../stories/ColorWheel.stories.tsx            |  10 +-
 .../stories/ComboBox.stories.tsx              |  34 +-
 .../stories/ComboBoxReproductions.stories.tsx |  11 +-
 .../stories/DateField.stories.tsx             |  14 +-
 .../stories/DatePicker.stories.tsx            |  16 +-
 .../stories/Disclosure.stories.tsx            |   9 +-
 .../stories/Dropzone.stories.tsx              |  27 +-
 .../stories/FileTrigger.stories.tsx           |  14 +-
 .../stories/Form.stories.tsx                  |  10 +-
 .../stories/GridList.stories.tsx              |  45 +-
 .../stories/Link.stories.tsx                  |  10 +-
 .../stories/ListBox.stories.tsx               |  70 ++-
 .../stories/Menu.stories.tsx                  |  76 +--
 .../stories/Meter.stories.tsx                 |   7 +-
 .../stories/Modal.stories.tsx                 |  14 +-
 .../stories/NumberField.stories.tsx           |  10 +-
 .../stories/Popover.stories.tsx               | 469 +++++++++---------
 .../stories/ProgressBar.stories.tsx           |   7 +-
 .../stories/RadioGroup.stories.tsx            |  27 +-
 .../stories/SearchField.stories.tsx           |  10 +-
 .../stories/Select.stories.tsx                |  23 +-
 .../stories/Slider.stories.tsx                |  14 +-
 .../stories/Switch.stories.tsx                |  10 +-
 .../stories/Table.stories.tsx                 |  91 ++--
 .../stories/Tabs.stories.tsx                  |  19 +-
 .../stories/TextField.stories.tsx             |  12 +-
 .../stories/TimeField.stories.tsx             |  10 +-
 .../stories/ToggleButton.stories.tsx          |  16 +-
 .../stories/Toolbar.stories.tsx               |  12 +-
 .../stories/Tooltip.stories.tsx               | 441 ++++++++--------
 .../stories/Tree.stories.tsx                  |  88 ++--
 .../stories/animations.stories.tsx            |   2 +-
 .../react-aria-components/stories/utils.tsx   |   8 +-
 .../test/AriaAutocomplete.test-util.tsx       |   4 +-
 .../test/AriaMenu.test-util.tsx               |   2 +-
 .../test/AriaTree.test-util.tsx               |   2 +-
 107 files changed, 1745 insertions(+), 1284 deletions(-)

diff --git a/packages/react-aria-components/src/Autocomplete.tsx b/packages/react-aria-components/src/Autocomplete.tsx
index 451598e5f40..813d26651a7 100644
--- a/packages/react-aria-components/src/Autocomplete.tsx
+++ b/packages/react-aria-components/src/Autocomplete.tsx
@@ -15,7 +15,7 @@ import {AutocompleteState, useAutocompleteState} from '@react-stately/autocomple
 import {InputContext} from './Input';
 import {mergeProps} from '@react-aria/utils';
 import {Provider, removeDataAttributes, SlotProps, SlottedContextValue, useSlottedContext} from './utils';
-import React, {createContext, JSX, RefObject, useRef} from 'react';
+import React, {Context, createContext, JSX, RefObject, useRef} from 'react';
 import {SearchFieldContext} from './SearchField';
 import {TextFieldContext} from './TextField';
 
@@ -27,11 +27,11 @@ interface InternalAutocompleteContextValue {
   collectionRef: RefObject<HTMLElement | null>
 }
 
-export const AutocompleteContext = createContext<SlottedContextValue<Partial<AutocompleteProps>>>(null);
-export const AutocompleteStateContext = createContext<AutocompleteState | null>(null);
+export const AutocompleteContext: Context<SlottedContextValue<Partial<AutocompleteProps>>> = createContext<SlottedContextValue<Partial<AutocompleteProps>>>(null);
+export const AutocompleteStateContext: Context<AutocompleteState | null> = createContext<AutocompleteState | null>(null);
 // This context is to pass the register and filter down to whatever collection component is wrapped by the Autocomplete
 // TODO: export from RAC, but rename to something more appropriate
-export const UNSTABLE_InternalAutocompleteContext = createContext<InternalAutocompleteContextValue | null>(null);
+export const UNSTABLE_InternalAutocompleteContext: Context<InternalAutocompleteContextValue | null> = createContext<InternalAutocompleteContextValue | null>(null);
 
 /**
  * An autocomplete combines a TextField or SearchField with a Menu or ListBox, allowing users to search or filter a list of suggestions.
diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx
index fab3127041d..e5d28a41db0 100644
--- a/packages/react-aria-components/src/Breadcrumbs.tsx
+++ b/packages/react-aria-components/src/Breadcrumbs.tsx
@@ -17,7 +17,7 @@ import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType, Key} from '@react-types/shared';
 import {LinkContext} from './Link';
 import {Node} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useContext} from 'react';
 
 export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps {
   /** Whether the breadcrumbs are disabled. */
@@ -26,12 +26,14 @@ export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledK
   onAction?: (key: Key) => void
 }
 
-export const BreadcrumbsContext = createContext<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>>(null);
+export const BreadcrumbsContext: Context<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>> = createContext<ContextValue<BreadcrumbsProps<any>, HTMLOListElement>>(null);
 
 /**
  * Breadcrumbs display a hierarchy of links to the current page or resource in an application.
  */
-export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: ForwardedRef<HTMLOListElement>) {
+export const Breadcrumbs:
+  <T extends object>(props: BreadcrumbsProps<T> & React.RefAttributes<HTMLOListElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Breadcrumbs<T extends object>(props: BreadcrumbsProps<T>, ref: ForwardedRef<HTMLOListElement>) {
   [props, ref] = useContextProps(props, ref, BreadcrumbsContext);
   let {CollectionRoot} = useContext(CollectionRendererContext);
   let {navProps} = useBreadcrumbs(props);
@@ -75,7 +77,9 @@ export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>  {
 /**
  * A Breadcrumb represents an individual item in a `<Breadcrumbs>` list.
  */
-export const Breadcrumb = /*#__PURE__*/ createLeafComponent('item', function Breadcrumb(props: BreadcrumbProps, ref: ForwardedRef<HTMLLIElement>, node: Node<unknown>) {
+export const Breadcrumb:
+  (props: BreadcrumbProps & React.RefAttributes<object>) => React.ReactElement | null =
+/*#__PURE__*/ createLeafComponent('item', function Breadcrumb(props: BreadcrumbProps, ref: ForwardedRef<HTMLLIElement>, node: Node<unknown>) {
   // Recreating useBreadcrumbItem because we want to use composition instead of having the link builtin.
   let isCurrent = node.nextKey == null;
   let {isDisabled, onAction} = useSlottedContext(BreadcrumbsContext)!;
diff --git a/packages/react-aria-components/src/Button.tsx b/packages/react-aria-components/src/Button.tsx
index 808e169332b..ee8a6954c1d 100644
--- a/packages/react-aria-components/src/Button.tsx
+++ b/packages/react-aria-components/src/Button.tsx
@@ -30,7 +30,7 @@ import {
 import {createHideableComponent} from '@react-aria/collections';
 import {filterDOMProps} from '@react-aria/utils';
 import {ProgressBarContext} from './ProgressBar';
-import React, {createContext, ForwardedRef, useEffect, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, useEffect, useRef} from 'react';
 
 export interface ButtonRenderProps {
   /**
@@ -101,7 +101,7 @@ interface ButtonContextValue extends ButtonProps {
 
 const additionalButtonHTMLAttributes = new Set(['form', 'formAction', 'formEncType', 'formMethod', 'formNoValidate', 'formTarget', 'name', 'value']);
 
-export const ButtonContext = createContext<ContextValue<ButtonContextValue, HTMLButtonElement>>({});
+export const ButtonContext: Context<ContextValue<ButtonContextValue, HTMLButtonElement>> = createContext<ContextValue<ButtonContextValue, HTMLButtonElement>>({});
 
 /**
  * A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
@@ -181,7 +181,8 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
       </ProgressBarContext.Provider>
     </button>
   );
-});
+}) satisfies (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null as
+ (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
 
 function disablePendingProps(props) {
   // Don't allow interaction while isPending is true
diff --git a/packages/react-aria-components/src/Calendar.tsx b/packages/react-aria-components/src/Calendar.tsx
index f3ed804b892..70d0b08705e 100644
--- a/packages/react-aria-components/src/Calendar.tsx
+++ b/packages/react-aria-components/src/Calendar.tsx
@@ -30,7 +30,7 @@ import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleProps, us
 import {DOMAttributes, FocusableElement, forwardRefType, HoverEvents} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext} from './RSPContexts';
-import React, {createContext, ForwardedRef, forwardRef, ReactElement, useContext, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, ReactElement, useContext, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface CalendarRenderProps {
@@ -87,15 +87,17 @@ export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeC
   createCalendar?: (identifier: CalendarIdentifier) => ICalendar
 }
 
-export const CalendarContext = createContext<ContextValue<CalendarProps<any>, HTMLDivElement>>(null);
-export const RangeCalendarContext = createContext<ContextValue<RangeCalendarProps<any>, HTMLDivElement>>(null);
-export const CalendarStateContext = createContext<CalendarState | null>(null);
-export const RangeCalendarStateContext = createContext<RangeCalendarState | null>(null);
+export const CalendarContext: Context<ContextValue<CalendarProps<any>, HTMLDivElement>> = createContext<ContextValue<CalendarProps<any>, HTMLDivElement>>(null);
+export const RangeCalendarContext: Context<ContextValue<RangeCalendarProps<any>, HTMLDivElement>> = createContext<ContextValue<RangeCalendarProps<any>, HTMLDivElement>>(null);
+export const CalendarStateContext: Context<CalendarState | null> = createContext<CalendarState | null>(null);
+export const RangeCalendarStateContext: Context<RangeCalendarState | null> = createContext<RangeCalendarState | null>(null);
 
 /**
  * A calendar displays one or more date grids and allows users to select a single date.
  */
-export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const Calendar:
+  <T extends DateValue>(props: CalendarProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Calendar<T extends DateValue>(props: CalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, CalendarContext);
   let {locale} = useLocale();
   let state = useCalendarState({
@@ -168,7 +170,9 @@ export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
 /**
  * A range calendar displays one or more date grids and allows users to select a contiguous range of dates.
  */
-export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const RangeCalendar:
+  <T extends DateValue>(props: RangeCalendarProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, RangeCalendarContext);
   let {locale} = useLocale();
   let state = useRangeCalendarState({
@@ -352,7 +356,9 @@ const InternalCalendarGridContext = createContext<InternalCalendarGridContextVal
  * A calendar grid displays a single grid of days within a calendar or range calendar which
  * can be keyboard navigated and selected by the user.
  */
-export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(function CalendarGrid(props: CalendarGridProps, ref: ForwardedRef<HTMLTableElement>) {
+export const CalendarGrid:
+  (props: CalendarGridProps & React.RefAttributes<HTMLTableElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function CalendarGrid(props: CalendarGridProps, ref: ForwardedRef<HTMLTableElement>) {
   let calendarState = useContext(CalendarStateContext);
   let rangeCalendarState = useContext(RangeCalendarStateContext);
   let calenderProps = useSlottedContext(CalendarContext)!;
@@ -422,7 +428,10 @@ function CalendarGridHeader(props: CalendarGridHeaderProps, ref: ForwardedRef<HT
 /**
  * A calendar grid header displays a row of week day names at the top of a month.
  */
-const CalendarGridHeaderForwardRef = /*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridHeader);
+const CalendarGridHeaderForwardRef:
+  (props: CalendarGridHeaderProps & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridHeader);
+
 export {CalendarGridHeaderForwardRef as CalendarGridHeader};
 
 export interface CalendarHeaderCellProps extends DOMProps {}
@@ -443,7 +452,10 @@ function CalendarHeaderCell(props: CalendarHeaderCellProps, ref: ForwardedRef<HT
 /**
  * A calendar header cell displays a week day name at the top of a column within a calendar.
  */
-const CalendarHeaderCellForwardRef = forwardRef(CalendarHeaderCell);
+const CalendarHeaderCellForwardRef:
+  React.ForwardRefExoticComponent<CalendarHeaderCellProps & React.RefAttributes<HTMLTableCellElement>> =
+forwardRef(CalendarHeaderCell);
+
 export {CalendarHeaderCellForwardRef as CalendarHeaderCell};
 
 export interface CalendarGridBodyProps extends StyleProps {
@@ -480,7 +492,7 @@ function CalendarGridBody(props: CalendarGridBodyProps, ref: ForwardedRef<HTMLTa
 /**
  * A calendar grid body displays a grid of calendar cells within a month.
  */
-const CalendarGridBodyForwardRef = /*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridBody);
+const CalendarGridBodyForwardRef: (props: CalendarGridBodyProps & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null = /*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridBody);
 export {CalendarGridBodyForwardRef as CalendarGridBody};
 
 export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps>, HoverEvents {
@@ -491,7 +503,7 @@ export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps>,
 /**
  * A calendar cell displays a date cell within a calendar grid which can be selected by the user.
  */
-export const CalendarCell = /*#__PURE__*/ (forwardRef as forwardRefType)(function CalendarCell({date, ...otherProps}: CalendarCellProps, ref: ForwardedRef<HTMLTableCellElement>) {
+export const CalendarCell: (props: CalendarCellProps & React.RefAttributes<HTMLTableCellElement>) => ReactElement | null = /*#__PURE__*/ (forwardRef as forwardRefType)(function CalendarCell({date, ...otherProps}: CalendarCellProps, ref: ForwardedRef<HTMLTableCellElement>) {
   let calendarState = useContext(CalendarStateContext);
   let rangeCalendarState = useContext(RangeCalendarStateContext);
   let state = calendarState ?? rangeCalendarState!;
diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx
index c9356e692c3..89c8b093b35 100644
--- a/packages/react-aria-components/src/Checkbox.tsx
+++ b/packages/react-aria-components/src/Checkbox.tsx
@@ -18,7 +18,7 @@ import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
 import {forwardRefType, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useContext, useMemo} from 'react';
 import {TextContext} from './Text';
 
 export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps>, SlotProps {}
@@ -109,13 +109,15 @@ export interface CheckboxRenderProps {
   isRequired: boolean
 }
 
-export const CheckboxGroupContext = createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);
-export const CheckboxGroupStateContext = createContext<CheckboxGroupState | null>(null);
+export const CheckboxGroupContext: Context<ContextValue<CheckboxGroupProps, HTMLDivElement>> = createContext<ContextValue<CheckboxGroupProps, HTMLDivElement>>(null);
+export const CheckboxGroupStateContext: Context<CheckboxGroupState | null> = createContext<CheckboxGroupState | null>(null);
 
 /**
  * A checkbox group allows a user to select multiple items from a list of options.
  */
-export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const CheckboxGroup:
+  (props: CheckboxGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function CheckboxGroup(props: CheckboxGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, CheckboxGroupContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -176,7 +178,9 @@ export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
  * A checkbox allows a user to select multiple items from a list of individual items, or
  * to mark one individual item as selected.
  */
-export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
+export const Checkbox:
+  (props: CheckboxProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Checkbox(props: CheckboxProps, ref: ForwardedRef<HTMLLabelElement>) {
   let {
     inputRef: userProvidedInputRef = null,
     ...otherProps
diff --git a/packages/react-aria-components/src/Collection.tsx b/packages/react-aria-components/src/Collection.tsx
index 9508272bbf9..6c7d591f786 100644
--- a/packages/react-aria-components/src/Collection.tsx
+++ b/packages/react-aria-components/src/Collection.tsx
@@ -12,7 +12,7 @@
 import {CollectionBase, DropTargetDelegate, ItemDropTarget, Key, LayoutDelegate, RefObject} from '@react-types/shared';
 import {createBranchComponent, useCachedChildren} from '@react-aria/collections';
 import {Collection as ICollection, Node, SelectionBehavior, SelectionMode, SectionProps as SharedSectionProps} from 'react-stately';
-import React, {cloneElement, createContext, ForwardedRef, HTMLAttributes, isValidElement, JSX, ReactElement, ReactNode, useContext, useMemo} from 'react';
+import React, {cloneElement, Context, createContext, ForwardedRef, HTMLAttributes, isValidElement, JSX, ReactElement, ReactNode, useContext, useMemo} from 'react';
 import {StyleProps} from './utils';
 
 export interface CollectionProps<T> extends Omit<CollectionBase<T>, 'children'> {
@@ -97,16 +97,18 @@ interface SectionContextValue {
   render: (props: SectionProps<any>, ref: ForwardedRef<HTMLElement>, section: Node<any>, className?: string) => ReactElement
 }
 
-export const SectionContext = createContext<SectionContextValue | null>(null);
+export const SectionContext: Context<SectionContextValue | null> = createContext<SectionContextValue | null>(null);
 
 /** @deprecated */
-export const Section = /*#__PURE__*/ createBranchComponent('section', <T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>): JSX.Element => {
+export const Section =
+/*#__PURE__*/ createBranchComponent('section', <T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<object>): JSX.Element => {
   let {name, render} = useContext(SectionContext)!;
   if (process.env.NODE_ENV !== 'production') {
     console.warn(`<Section> is deprecated. Please use <${name}> instead.`);
   }
   return render(props, ref, section, 'react-aria-Section');
-});
+}) satisfies <T extends object>(props: SectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null as
+  <T extends object>(props: SectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null;
 
 export interface CollectionBranchProps {
   /** The collection of items to render. */
@@ -211,7 +213,7 @@ export function renderAfterDropIndicators(collection: ICollection<Node<unknown>>
   return afterIndicators;
 }
 
-export const CollectionRendererContext = createContext<CollectionRenderer>(DefaultCollectionRenderer);
+export const CollectionRendererContext: Context<CollectionRenderer> = createContext<CollectionRenderer>(DefaultCollectionRenderer);
 
 type PersistedKeysReturnValue = Set<Key> | null;
 export function usePersistedKeys(focusedKey: Key | null): PersistedKeysReturnValue {
diff --git a/packages/react-aria-components/src/ColorArea.tsx b/packages/react-aria-components/src/ColorArea.tsx
index 52b23c85621..b1d43db0924 100644
--- a/packages/react-aria-components/src/ColorArea.tsx
+++ b/packages/react-aria-components/src/ColorArea.tsx
@@ -4,7 +4,7 @@ import {ColorAreaState, useColorAreaState} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
 import {InternalColorThumbContext} from './ColorThumb';
 import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useRef} from 'react';
 
 export interface ColorAreaRenderProps {
   /**
@@ -20,12 +20,14 @@ export interface ColorAreaRenderProps {
 
 export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, SlotProps {}
 
-export const ColorAreaStateContext = createContext<ColorAreaState | null>(null);
+export const ColorAreaStateContext: Context<ColorAreaState | null> = createContext<ColorAreaState | null>(null);
 
 /**
  * A color area allows users to adjust two channels of an RGB, HSL or HSB color value against a two-dimensional gradient background.
  */
-export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorArea:
+  React.ForwardRefExoticComponent<ColorAreaProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColorArea(props: ColorAreaProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorAreaContext);
   let inputXRef = useRef(null);
   let inputYRef = useRef(null);
diff --git a/packages/react-aria-components/src/ColorField.tsx b/packages/react-aria-components/src/ColorField.tsx
index 7ac9326601a..b107d63bbdc 100644
--- a/packages/react-aria-components/src/ColorField.tsx
+++ b/packages/react-aria-components/src/ColorField.tsx
@@ -19,7 +19,7 @@ import {InputContext} from './Input';
 import {InputDOMProps, ValidationResult} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface ColorFieldRenderProps {
@@ -46,7 +46,7 @@ export interface ColorFieldRenderProps {
 
 export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, SlotProps {
   /**
-   * The color channel that this field edits. If not provided, 
+   * The color channel that this field edits. If not provided,
    * the color is edited as a hex value.
    */
   channel?: ColorChannel,
@@ -57,12 +57,14 @@ export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'pl
   colorSpace?: ColorSpace
 }
 
-export const ColorFieldStateContext = createContext<ColorFieldState | null>(null);
+export const ColorFieldStateContext: Context<ColorFieldState | null> = createContext<ColorFieldState | null>(null);
 
 /**
  * A color field allows users to edit a hex color or individual color channel value.
  */
-export const ColorField = forwardRef(function ColorField(props: ColorFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorField:
+  React.ForwardRefExoticComponent<ColorFieldProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColorField(props: ColorFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorFieldContext);
   if (props.channel) {
     return <ColorChannelField {...props} channel={props.channel} forwardedRef={ref} />;
diff --git a/packages/react-aria-components/src/ColorPicker.tsx b/packages/react-aria-components/src/ColorPicker.tsx
index 68a187c6427..7099d7c74a7 100644
--- a/packages/react-aria-components/src/ColorPicker.tsx
+++ b/packages/react-aria-components/src/ColorPicker.tsx
@@ -16,7 +16,7 @@ import {ColorSwatchContext} from './ColorSwatch';
 import {ColorSwatchPickerContext} from './ColorSwatchPicker';
 import {mergeProps} from 'react-aria';
 import {Provider, RenderProps, SlotProps, SlottedContextValue, useRenderProps, useSlottedContext} from './utils';
-import React, {createContext, JSX} from 'react';
+import React, {Context, createContext, JSX} from 'react';
 
 export interface ColorPickerRenderProps {
   /** The currently selected color. */
@@ -25,8 +25,8 @@ export interface ColorPickerRenderProps {
 
 export interface ColorPickerProps extends StatelyColorPickerProps, SlotProps, Pick<RenderProps<ColorPickerRenderProps>, 'children'> {}
 
-export const ColorPickerContext = createContext<SlottedContextValue<ColorPickerProps>>(null);
-export const ColorPickerStateContext = createContext<ColorPickerState | null>(null);
+export const ColorPickerContext: Context<SlottedContextValue<ColorPickerProps>> = createContext<SlottedContextValue<ColorPickerProps>>(null);
+export const ColorPickerStateContext: Context<ColorPickerState | null> = createContext<ColorPickerState | null>(null);
 
 /**
  * A ColorPicker synchronizes a color value between multiple React Aria color components.
diff --git a/packages/react-aria-components/src/ColorSlider.tsx b/packages/react-aria-components/src/ColorSlider.tsx
index 9b2924a5c64..7c958ef30e8 100644
--- a/packages/react-aria-components/src/ColorSlider.tsx
+++ b/packages/react-aria-components/src/ColorSlider.tsx
@@ -5,7 +5,7 @@ import {filterDOMProps} from '@react-aria/utils';
 import {InternalColorThumbContext} from './ColorThumb';
 import {LabelContext} from './Label';
 import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef} from 'react';
 import {SliderOutputContext, SliderStateContext, SliderTrackContext} from './Slider';
 
 export interface ColorSliderRenderProps {
@@ -27,12 +27,14 @@ export interface ColorSliderRenderProps {
 
 export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, SlotProps {}
 
-export const ColorSliderStateContext = createContext<ColorSliderState | null>(null);
+export const ColorSliderStateContext: Context<ColorSliderState | null> = createContext<ColorSliderState | null>(null);
 
 /**
  * A color slider allows users to adjust an individual channel of a color value.
  */
-export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorSlider:
+  React.ForwardRefExoticComponent<ColorSliderProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColorSlider(props: ColorSliderProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorSliderContext);
   let {locale} = useLocale();
   let state = useColorSliderState({...props, locale});
diff --git a/packages/react-aria-components/src/ColorSwatch.tsx b/packages/react-aria-components/src/ColorSwatch.tsx
index a19eb138502..0c599fce9bf 100644
--- a/packages/react-aria-components/src/ColorSwatch.tsx
+++ b/packages/react-aria-components/src/ColorSwatch.tsx
@@ -1,7 +1,7 @@
 import {AriaColorSwatchProps, useColorSwatch} from 'react-aria';
 import {Color} from 'react-stately';
 import {ContextValue, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef} from 'react';
 
 export interface ColorSwatchRenderProps {
   /** The color of the swatch. */
@@ -10,12 +10,14 @@ export interface ColorSwatchRenderProps {
 
 export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, SlotProps {}
 
-export const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);
+export const ColorSwatchContext: Context<ContextValue<ColorSwatchProps, HTMLDivElement>> = createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);
 
 /**
  * A ColorSwatch displays a preview of a selected color.
  */
-export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorSwatch:
+  React.ForwardRefExoticComponent<ColorSwatchProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColorSwatch(props: ColorSwatchProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorSwatchContext);
   let {colorSwatchProps, color} = useColorSwatch(props);
   let renderProps = useRenderProps({
@@ -26,7 +28,7 @@ export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchPro
       color
     }
   });
-  
+
   return (
     <div
       {...colorSwatchProps}
diff --git a/packages/react-aria-components/src/ColorSwatchPicker.tsx b/packages/react-aria-components/src/ColorSwatchPicker.tsx
index 3df54e518e6..4956a7c23f4 100644
--- a/packages/react-aria-components/src/ColorSwatchPicker.tsx
+++ b/packages/react-aria-components/src/ColorSwatchPicker.tsx
@@ -6,7 +6,7 @@ import {filterDOMProps} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ListBox, ListBoxItem, ListBoxItemRenderProps, ListBoxRenderProps} from './ListBox';
-import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, ReactNode, useContext, useEffect, useMemo} from 'react';
 import {useLocale, useLocalizedStringFormatter} from 'react-aria';
 
 export interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}
@@ -20,13 +20,15 @@ export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>
   layout?: 'grid' | 'stack'
 }
 
-export const ColorSwatchPickerContext = createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);
+export const ColorSwatchPickerContext: Context<ContextValue<ColorSwatchPickerProps, HTMLDivElement>> = createContext<ContextValue<ColorSwatchPickerProps, HTMLDivElement>>(null);
 const ColorMapContext = createContext<Map<string, Color> | null>(null);
 
 /**
  * A ColorSwatchPicker displays a list of color swatches and allows a user to select one of them.
  */
-export const ColorSwatchPicker = forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorSwatchPicker:
+  React.ForwardRefExoticComponent<ColorSwatchPickerProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColorSwatchPicker(props: ColorSwatchPickerProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorSwatchPickerContext);
   let state = useColorPickerState(props);
   let colorMap = useMemo(() => new Map(), []);
@@ -68,7 +70,9 @@ export interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPicke
   isDisabled?: boolean
 }
 
-export const ColorSwatchPickerItem = forwardRef(function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorSwatchPickerItem:
+  React.ForwardRefExoticComponent<ColorSwatchPickerItemProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColorSwatchPickerItem(props: ColorSwatchPickerItemProps, ref: ForwardedRef<HTMLDivElement>) {
   let propColor = props.color || '#0000';
   let color = useMemo(() => typeof propColor === 'string' ? parseColor(propColor) : propColor, [propColor]);
   let {locale} = useLocale();
diff --git a/packages/react-aria-components/src/ColorThumb.tsx b/packages/react-aria-components/src/ColorThumb.tsx
index b33b07b912b..a45fa9ecd19 100644
--- a/packages/react-aria-components/src/ColorThumb.tsx
+++ b/packages/react-aria-components/src/ColorThumb.tsx
@@ -2,7 +2,7 @@ import {Color} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
 import {HoverEvents, RefObject} from '@react-types/shared';
 import {mergeProps, useFocusRing, useHover} from 'react-aria';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';
 import {RenderProps, useRenderProps} from './utils';
 
 interface ColorState {
@@ -20,7 +20,7 @@ interface InternalColorThumbContextValue {
   isDisabled?: boolean
 }
 
-export const InternalColorThumbContext = createContext<InternalColorThumbContextValue | null>(null);
+export const InternalColorThumbContext: Context<InternalColorThumbContextValue | null> = createContext<InternalColorThumbContextValue | null>(null);
 
 export interface ColorThumbRenderProps {
   /**
@@ -59,7 +59,9 @@ export interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRend
 /**
  * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
  */
-export const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorThumb:
+  React.ForwardRefExoticComponent<ColorThumbProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColorThumb(props: ColorThumbProps, ref: ForwardedRef<HTMLDivElement>) {
   let {state, thumbProps, inputXRef, inputYRef, xInputProps, yInputProps, isDisabled = false} = useContext(InternalColorThumbContext)!;
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let {hoverProps, isHovered} = useHover(props);
diff --git a/packages/react-aria-components/src/ColorWheel.tsx b/packages/react-aria-components/src/ColorWheel.tsx
index 71dd0301849..fbceeca3274 100644
--- a/packages/react-aria-components/src/ColorWheel.tsx
+++ b/packages/react-aria-components/src/ColorWheel.tsx
@@ -4,7 +4,7 @@ import {ColorWheelState, useColorWheelState} from 'react-stately';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
 import {InternalColorThumbContext} from './ColorThumb';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';
 
 export interface ColorWheelRenderProps {
   /**
@@ -20,12 +20,14 @@ export interface ColorWheelRenderProps {
 
 export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps {}
 
-export const ColorWheelStateContext = createContext<ColorWheelState | null>(null);
+export const ColorWheelStateContext: Context<ColorWheelState | null> = createContext<ColorWheelState | null>(null);
 
 /**
  * A color wheel allows users to adjust the hue of an HSL or HSB color value on a circular track.
  */
-export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorWheel:
+  React.ForwardRefExoticComponent<ColorWheelProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColorWheel(props: ColorWheelProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorWheelContext);
   let state = useColorWheelState(props);
   let inputRef = useRef(null);
@@ -69,12 +71,14 @@ export interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}
 export interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps> {}
 interface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, ColorWheelTrackProps {}
 
-export const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);
+export const ColorWheelTrackContext: Context<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>> = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);
 
 /**
  * A color wheel track renders a circular gradient track.
  */
-export const ColorWheelTrack = forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColorWheelTrack:
+  React.ForwardRefExoticComponent<ColorWheelTrackProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColorWheelTrack(props: ColorWheelTrackProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ColorWheelTrackContext);
   let state = useContext(ColorWheelStateContext)!;
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx
index a3804b1d5a9..f0b4dabb4c7 100644
--- a/packages/react-aria-components/src/ComboBox.tsx
+++ b/packages/react-aria-components/src/ComboBox.tsx
@@ -24,7 +24,7 @@ import {LabelContext} from './Label';
 import {ListBoxContext, ListStateContext} from './ListBox';
 import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
-import React, {createContext, ForwardedRef, forwardRef, useCallback, useMemo, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useCallback, useMemo, useRef, useState} from 'react';
 import {TextContext} from './Text';
 
 export interface ComboBoxRenderProps {
@@ -63,13 +63,15 @@ export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<
   allowsEmptyCollection?: boolean
 }
 
-export const ComboBoxContext = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);
-export const ComboBoxStateContext = createContext<ComboBoxState<any> | null>(null);
+export const ComboBoxContext: Context<ContextValue<ComboBoxProps<any>, HTMLDivElement>> = createContext<ContextValue<ComboBoxProps<any>, HTMLDivElement>>(null);
+export const ComboBoxStateContext: Context<ComboBoxState<any> | null> = createContext<ComboBoxState<any> | null>(null);
 
 /**
  * A combo box combines a text input with a listbox, allowing users to filter a list of options to items matching a query.
  */
-export const ComboBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const ComboBox:
+  <T extends object>(props: ComboBoxProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function ComboBox<T extends object>(props: ComboBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ComboBoxContext);
   let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;
   let content = useMemo(() => (
diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx
index 6d4a385cb36..c5bc756f015 100644
--- a/packages/react-aria-components/src/DateField.tsx
+++ b/packages/react-aria-components/src/DateField.tsx
@@ -20,7 +20,7 @@ import {forwardRefType} from '@react-types/shared';
 import {Group, GroupContext} from './Group';
 import {Input, InputContext} from './Input';
 import {LabelContext} from './Label';
-import React, {cloneElement, createContext, ForwardedRef, forwardRef, JSX, ReactElement, useContext, useRef} from 'react';
+import React, {cloneElement, Context, createContext, ForwardedRef, forwardRef, JSX, ReactElement, useContext, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface DateFieldRenderProps {
@@ -42,16 +42,18 @@ export interface DateFieldRenderProps {
 export interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps {}
 export interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps {}
 
-export const DateFieldContext = createContext<ContextValue<DateFieldProps<any>, HTMLDivElement>>(null);
-export const TimeFieldContext = createContext<ContextValue<TimeFieldProps<any>, HTMLDivElement>>(null);
-export const DateFieldStateContext = createContext<DateFieldState | null>(null);
-export const TimeFieldStateContext = createContext<TimeFieldState | null>(null);
+export const DateFieldContext: Context<ContextValue<DateFieldProps<any>, HTMLDivElement>> = createContext<ContextValue<DateFieldProps<any>, HTMLDivElement>>(null);
+export const TimeFieldContext: Context<ContextValue<TimeFieldProps<any>, HTMLDivElement>> = createContext<ContextValue<TimeFieldProps<any>, HTMLDivElement>>(null);
+export const DateFieldStateContext: Context<DateFieldState | null> = createContext<DateFieldState | null>(null);
+export const TimeFieldStateContext: Context<TimeFieldState | null> = createContext<TimeFieldState | null>(null);
 
 /**
  * A date field allows users to enter and edit date and time values using a keyboard.
  * Each part of a date value is displayed in an individually editable segment.
  */
-export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const DateField:
+  <T extends DateValue>(props: DateFieldProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function DateField<T extends DateValue>(props: DateFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DateFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -118,7 +120,9 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
  * A time field allows users to enter and edit time values using a keyboard.
  * Each part of a time value is displayed in an individually editable segment.
  */
-export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const TimeField:
+  <T extends TimeValue>(props: TimeFieldProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function TimeField<T extends TimeValue>(props: TimeFieldProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TimeFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -174,7 +178,7 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
         {...renderProps}
         ref={ref}
         slot={props.slot || undefined}
-        data-invalid={state.isInvalid || undefined} 
+        data-invalid={state.isInvalid || undefined}
         data-disabled={state.isDisabled || undefined} />
     </Provider>
   );
@@ -216,7 +220,9 @@ export interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRen
 /**
  * A date input groups the editable date segments within a date field.
  */
-export const DateInput = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateInput(props: DateInputProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
+export const DateInput:
+  (props: DateInputProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function DateInput(props: DateInputProps, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
   // If state is provided by DateField/TimeField, just render.
   // Otherwise (e.g. in DatePicker), we need to call hooks and create state ourselves.
   let dateFieldState = useContext(DateFieldStateContext);
@@ -323,7 +329,9 @@ export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps>, H
  * A date segment displays an individual unit of a date and time, and allows users to edit
  * the value by typing or using the arrow keys to increment and decrement.
  */
-export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLDivElement>) {
+export const DateSegment:
+  (props: DateSegmentProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLDivElement>) {
   let dateFieldState = useContext(DateFieldStateContext);
   let timeFieldState = useContext(TimeFieldStateContext);
   let state = dateFieldState ?? timeFieldState!;
diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx
index 55e03a122bf..9ee1d1bf92f 100644
--- a/packages/react-aria-components/src/DatePicker.tsx
+++ b/packages/react-aria-components/src/DatePicker.tsx
@@ -23,7 +23,7 @@ import {forwardRefType} from '@react-types/shared';
 import {GroupContext} from './Group';
 import {LabelContext} from './Label';
 import {PopoverContext} from './Popover';
-import React, {createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useCallback, useRef, useState} from 'react';
 import {TextContext} from './Text';
 
 export interface DatePickerRenderProps {
@@ -67,10 +67,10 @@ export interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps,
 export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DatePickerRenderProps>, SlotProps {}
 export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps {}
 
-export const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);
-export const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);
-export const DatePickerStateContext = createContext<DatePickerState | null>(null);
-export const DateRangePickerStateContext = createContext<DateRangePickerState | null>(null);
+export const DatePickerContext: Context<ContextValue<DatePickerProps<any>, HTMLDivElement>> = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);
+export const DateRangePickerContext: Context<ContextValue<DateRangePickerProps<any>, HTMLDivElement>> = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);
+export const DatePickerStateContext: Context<DatePickerState | null> = createContext<DatePickerState | null>(null);
+export const DateRangePickerStateContext: Context<DateRangePickerState | null> = createContext<DateRangePickerState | null>(null);
 
 // Contexts to clear inside the popover.
 const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];
@@ -78,7 +78,9 @@ const CLEAR_CONTEXTS = [GroupContext, ButtonContext, LabelContext, TextContext];
 /**
  * A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value.
  */
-export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const DatePicker:
+  <T extends DateValue>(props: DatePickerProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function DatePicker<T extends DateValue>(props: DatePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DatePickerContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -182,7 +184,9 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
  * A date range picker combines two DateFields and a RangeCalendar popover to allow
  * users to enter or select a date and time range.
  */
-export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const DateRangePicker:
+  <T extends DateValue>(props: DateRangePickerProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function DateRangePicker<T extends DateValue>(props: DateRangePickerProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DateRangePickerContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx
index 9520550ba23..2eed8bb0645 100644
--- a/packages/react-aria-components/src/Dialog.tsx
+++ b/packages/react-aria-components/src/Dialog.tsx
@@ -18,7 +18,7 @@ import {HeadingContext} from './RSPContexts';
 import {OverlayTriggerProps, OverlayTriggerState, useMenuTriggerState} from 'react-stately';
 import {PopoverContext} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useRef, useState} from 'react';
 import {RootMenuTriggerStateContext} from './Menu';
 
 export interface DialogTriggerProps extends OverlayTriggerProps {
@@ -34,8 +34,8 @@ export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps {
   children?: ReactNode | ((opts: DialogRenderProps) => ReactNode)
 }
 
-export const DialogContext = createContext<ContextValue<DialogProps, HTMLElement>>(null);
-export const OverlayTriggerStateContext = createContext<OverlayTriggerState | null>(null);
+export const DialogContext: Context<ContextValue<DialogProps, HTMLElement>> = createContext<ContextValue<DialogProps, HTMLElement>>(null);
+export const OverlayTriggerStateContext: Context<OverlayTriggerState | null> = createContext<OverlayTriggerState | null>(null);
 
 /**
  * A DialogTrigger opens a dialog when a trigger element is pressed.
@@ -91,7 +91,9 @@ export function DialogTrigger(props: DialogTriggerProps): JSX.Element {
 /**
  * A dialog is an overlay shown above other content in an application.
  */
-export const Dialog = /*#__PURE__*/ (forwardRef as forwardRefType)(function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
+export const Dialog:
+  (props: DialogProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Dialog(props: DialogProps, ref: ForwardedRef<HTMLElement>) {
   let originalAriaLabelledby = props['aria-labelledby'];
   [props, ref] = useContextProps(props, ref, DialogContext);
   let {dialogProps, titleProps} = useDialog({
diff --git a/packages/react-aria-components/src/Disclosure.tsx b/packages/react-aria-components/src/Disclosure.tsx
index 392bf517d31..15ad66c7e21 100644
--- a/packages/react-aria-components/src/Disclosure.tsx
+++ b/packages/react-aria-components/src/Disclosure.tsx
@@ -16,7 +16,7 @@ import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, useContext
 import {DisclosureGroupState, DisclosureState, DisclosureGroupProps as StatelyDisclosureGroupProps, useDisclosureGroupState, useDisclosureState} from 'react-stately';
 import {DOMProps, forwardRefType, Key} from '@react-types/shared';
 import {filterDOMProps, mergeProps, mergeRefs, useId} from '@react-aria/utils';
-import React, {createContext, DOMAttributes, ForwardedRef, forwardRef, ReactNode, useContext} from 'react';
+import React, {Context, createContext, DOMAttributes, ForwardedRef, forwardRef, ReactNode, useContext} from 'react';
 
 export interface DisclosureGroupProps extends StatelyDisclosureGroupProps, RenderProps<DisclosureGroupRenderProps>, DOMProps {}
 
@@ -32,13 +32,15 @@ export interface DisclosureGroupRenderProps {
   state: DisclosureGroupState
 }
 
-export const DisclosureGroupStateContext = createContext<DisclosureGroupState | null>(null);
+export const DisclosureGroupStateContext: Context<DisclosureGroupState | null> = createContext<DisclosureGroupState | null>(null);
 
 /**
  * A DisclosureGroup is a grouping of related disclosures, sometimes called an accordion.
  * It supports both single and multiple expanded items.
  */
-export const DisclosureGroup = forwardRef(function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const DisclosureGroup:
+  React.ForwardRefExoticComponent<DisclosureGroupProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function DisclosureGroup(props: DisclosureGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   let state = useDisclosureGroupState(props);
 
   let renderProps = useRenderProps({
@@ -92,8 +94,8 @@ export interface DisclosureRenderProps {
   state: DisclosureState
 }
 
-export const DisclosureContext = createContext<ContextValue<DisclosureProps, HTMLDivElement>>(null);
-export const DisclosureStateContext = createContext<DisclosureState | null>(null);
+export const DisclosureContext: Context<ContextValue<DisclosureProps, HTMLDivElement>> = createContext<ContextValue<DisclosureProps, HTMLDivElement>>(null);
+export const DisclosureStateContext: Context<DisclosureState | null> = createContext<DisclosureState | null>(null);
 
 interface InternalDisclosureContextValue {
   panelProps: DOMAttributes<HTMLElement>,
@@ -105,7 +107,9 @@ const InternalDisclosureContext = createContext<InternalDisclosureContextValue |
 /**
  * A disclosure is a collapsible section of content. It is composed of a a header with a heading and trigger button, and a panel that contains the content.
  */
-export const Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
+export const Disclosure:
+  (props: DisclosureProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Disclosure(props: DisclosureProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, DisclosureContext);
   let groupState = useContext(DisclosureGroupStateContext)!;
   let {id, ...otherProps} = props;
@@ -203,7 +207,9 @@ export interface DisclosurePanelProps extends RenderProps<DisclosurePanelRenderP
 /**
  * A DisclosurePanel provides the content for a disclosure.
  */
-export const DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivElement>) {
+export const DisclosurePanel:
+  (props: DisclosurePanelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function DisclosurePanel(props: DisclosurePanelProps, ref: ForwardedRef<HTMLDivElement>) {
   let {role = 'group'} = props;
   let {panelProps, panelRef} = useContext(InternalDisclosureContext)!;
   let {
diff --git a/packages/react-aria-components/src/DragAndDrop.tsx b/packages/react-aria-components/src/DragAndDrop.tsx
index 264555c570a..4efe2059df8 100644
--- a/packages/react-aria-components/src/DragAndDrop.tsx
+++ b/packages/react-aria-components/src/DragAndDrop.tsx
@@ -12,7 +12,7 @@
 import type {DropIndicatorProps as AriaDropIndicatorProps, ItemDropTarget, Key} from 'react-aria';
 import type {DragAndDropHooks} from './useDragAndDrop';
 import type {DraggableCollectionState, DroppableCollectionState, MultipleSelectionManager} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useMemo} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, JSX, ReactNode, useCallback, useContext, useMemo} from 'react';
 import type {RenderProps} from './utils';
 
 export interface DragAndDropContextValue {
@@ -21,8 +21,8 @@ export interface DragAndDropContextValue {
   dropState?: DroppableCollectionState
 }
 
-export const DragAndDropContext = createContext<DragAndDropContextValue>({});
-export const DropIndicatorContext = createContext<DropIndicatorContextValue | null>(null);
+export const DragAndDropContext: Context<DragAndDropContextValue> = createContext<DragAndDropContextValue>({});
+export const DropIndicatorContext: Context<DropIndicatorContextValue | null> = createContext<DropIndicatorContextValue | null>(null);
 
 export interface DropIndicatorRenderProps {
   /**
@@ -40,7 +40,9 @@ interface DropIndicatorContextValue {
 /**
  * A DropIndicator is rendered between items in a collection to indicate where dropped data will be inserted.
  */
-export const DropIndicator = forwardRef(function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element {
+export const DropIndicator:
+  React.ForwardRefExoticComponent<DropIndicatorProps & React.RefAttributes<HTMLElement>> =
+forwardRef(function DropIndicator(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>): JSX.Element {
   let {render} = useContext(DropIndicatorContext)!;
   return <>{render(props, ref)}</>;
 });
diff --git a/packages/react-aria-components/src/DropZone.tsx b/packages/react-aria-components/src/DropZone.tsx
index 5a163e90202..79899d87f00 100644
--- a/packages/react-aria-components/src/DropZone.tsx
+++ b/packages/react-aria-components/src/DropZone.tsx
@@ -16,7 +16,7 @@ import {DropOptions, mergeProps, useButton, useClipboard, useDrop, useFocusRing,
 import {filterDOMProps, isFocusable, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface DropZoneRenderProps {
@@ -49,12 +49,14 @@ export interface DropZoneRenderProps {
 
 export interface DropZoneProps extends Omit<DropOptions, 'getDropOperationForPoint' | 'ref' | 'hasDropButton'>, HoverEvents, RenderProps<DropZoneRenderProps>, SlotProps, AriaLabelingProps {}
 
-export const DropZoneContext = createContext<ContextValue<DropZoneProps, HTMLDivElement>>(null);
+export const DropZoneContext: Context<ContextValue<DropZoneProps, HTMLDivElement>> = createContext<ContextValue<DropZoneProps, HTMLDivElement>>(null);
 
 /**
  * A drop zone is an area into which one or multiple objects can be dragged and dropped.
  */
-export const DropZone = forwardRef(function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
+export const DropZone:
+  React.ForwardRefExoticComponent<DropZoneProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function DropZone(props: DropZoneProps, ref: ForwardedRef<HTMLDivElement>) {
   let {isDisabled = false} = props;
   [props, ref] = useContextProps(props, ref, DropZoneContext);
   let dropzoneRef = useObjectRef(ref);
diff --git a/packages/react-aria-components/src/FieldError.tsx b/packages/react-aria-components/src/FieldError.tsx
index fba03ee6e92..09146dc9b36 100644
--- a/packages/react-aria-components/src/FieldError.tsx
+++ b/packages/react-aria-components/src/FieldError.tsx
@@ -12,11 +12,11 @@
 
 import {DOMProps, ValidationResult} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {RenderProps, useRenderProps} from './utils';
 import {Text} from './Text';
 
-export const FieldErrorContext = createContext<ValidationResult | null>(null);
+export const FieldErrorContext: Context<ValidationResult | null> = createContext<ValidationResult | null>(null);
 
 export interface FieldErrorRenderProps extends ValidationResult {}
 export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, DOMProps {}
@@ -24,7 +24,9 @@ export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, DOM
 /**
  * A FieldError displays validation errors for a form field.
  */
-export const FieldError = forwardRef(function FieldError(props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) {
+export const FieldError:
+  React.ForwardRefExoticComponent<FieldErrorProps & React.RefAttributes<HTMLElement>> =
+forwardRef(function FieldError(props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) {
   let validation = useContext(FieldErrorContext);
   if (!validation?.isInvalid) {
     return null;
diff --git a/packages/react-aria-components/src/FileTrigger.tsx b/packages/react-aria-components/src/FileTrigger.tsx
index 26e3f773d36..7f54efa2692 100644
--- a/packages/react-aria-components/src/FileTrigger.tsx
+++ b/packages/react-aria-components/src/FileTrigger.tsx
@@ -45,7 +45,9 @@ export interface FileTriggerProps {
 /**
  * A FileTrigger allows a user to access the file system with any pressable React Aria or React Spectrum component, or custom components built with usePress.
  */
-export const FileTrigger = forwardRef(function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
+export const FileTrigger:
+  React.ForwardRefExoticComponent<FileTriggerProps & React.RefAttributes<HTMLInputElement>> =
+forwardRef(function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
   let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, acceptDirectory, ...rest} = props;
   let inputRef = useObjectRef(ref);
   let domProps = filterDOMProps(rest);
diff --git a/packages/react-aria-components/src/Form.tsx b/packages/react-aria-components/src/Form.tsx
index e9ea21896b3..7a5539a9615 100644
--- a/packages/react-aria-components/src/Form.tsx
+++ b/packages/react-aria-components/src/Form.tsx
@@ -12,7 +12,7 @@
 
 import {ContextValue, DOMProps, useContextProps} from './utils';
 import {FormValidationContext} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef} from 'react';
 import {FormProps as SharedFormProps} from '@react-types/form';
 
 export interface FormProps extends SharedFormProps, DOMProps {
@@ -25,13 +25,15 @@ export interface FormProps extends SharedFormProps, DOMProps {
   validationBehavior?: 'aria' | 'native'
 }
 
-export const FormContext = createContext<ContextValue<FormProps, HTMLFormElement>>(null);
+export const FormContext: Context<ContextValue<FormProps, HTMLFormElement>> = createContext<ContextValue<FormProps, HTMLFormElement>>(null);
 
 /**
  * A form is a group of inputs that allows users to submit data to a server,
  * with support for providing field validation errors.
  */
-export const Form = forwardRef(function Form(props: FormProps, ref: ForwardedRef<HTMLFormElement>) {
+export const Form:
+  React.ForwardRefExoticComponent<FormProps & React.RefAttributes<HTMLFormElement>> =
+forwardRef(function Form(props: FormProps, ref: ForwardedRef<HTMLFormElement>) {
   [props, ref] = useContextProps(props, ref, FormContext);
   let {validationErrors, validationBehavior = 'native', children, className, ...domProps} = props;
   return (
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index 191cb9a2612..b776f11fef3 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -21,7 +21,7 @@ import {DraggableCollectionState, DroppableCollectionState, Collection as IColle
 import {filterDOMProps, inertValue, LoadMoreSentinelProps, UNSTABLE_useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {ListStateContext} from './ListBox';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface GridListRenderProps {
@@ -76,13 +76,15 @@ export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>
 }
 
 
-export const GridListContext = createContext<ContextValue<GridListProps<any>, HTMLDivElement>>(null);
+export const GridListContext: Context<ContextValue<GridListProps<any>, HTMLDivElement>> = createContext<ContextValue<GridListProps<any>, HTMLDivElement>>(null);
 
 /**
  * A grid list displays a list of interactive items, with support for keyboard navigation,
  * single or multiple selection, and row actions.
  */
-export const GridList = /*#__PURE__*/ (forwardRef as forwardRefType)(function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const GridList:
+  <T extends object>(props: GridListProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function GridList<T extends object>(props: GridListProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   // Render the portal first so that we have the collection by the time we render the DOM in SSR.
   [props, ref] = useContextProps(props, ref, GridListContext);
 
@@ -280,10 +282,10 @@ export interface GridListItemProps<T = object> extends RenderProps<GridListItemR
 /**
  * A GridListItem represents an individual item in a GridList.
  */
-export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function GridListItem<T extends object>(props: GridListItemProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function GridListItem<T extends object>(props: GridListItemProps<T>, forwardedRef: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext);
-  let ref = useObjectRef<HTMLDivElement>(forwardedRef);
+  let ref = useObjectRef<HTMLDivElement>(forwardedRef as ForwardedRef<HTMLDivElement>);
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {rowProps, gridCellProps, descriptionProps, ...states} = useGridListItem(
     {
@@ -415,7 +417,8 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
       </div>
     </>
   );
-});
+}) satisfies <T extends object>(props: GridListItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
+<T extends object>(props: GridListItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
 
 function GridListDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
@@ -508,7 +511,7 @@ export interface GridListLoadingSentinelProps extends Omit<LoadMoreSentinelProps
   isLoading?: boolean
 }
 
-export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', function GridListLoadingIndicator<T extends object>(props: GridListLoadingSentinelProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const UNSTABLE_GridListLoadingSentinel = /*#__PURE__*/ createLeafComponent('loader', function GridListLoadingIndicator(props: GridListLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -543,7 +546,7 @@ export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', fu
           {...mergeProps(filterDOMProps(props as any))}
           role="row"
           aria-rowindex={isVirtualized ? item.index + 1 : undefined}
-          ref={ref}>
+          ref={ref as ForwardedRef<HTMLDivElement>}>
           <div
             aria-colindex={isVirtualized ? 1 : undefined}
             role="gridcell">
@@ -553,4 +556,5 @@ export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', fu
       )}
     </>
   );
-});
+}) satisfies (props: GridListLoadingSentinelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
+(props: GridListLoadingSentinelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
diff --git a/packages/react-aria-components/src/Group.tsx b/packages/react-aria-components/src/Group.tsx
index 222ca6a0037..66415627f05 100644
--- a/packages/react-aria-components/src/Group.tsx
+++ b/packages/react-aria-components/src/Group.tsx
@@ -13,7 +13,7 @@
 import {AriaLabelingProps, DOMProps, forwardRefType} from '@react-types/shared';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {HoverProps, mergeProps, useFocusRing, useHover} from 'react-aria';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
 export interface GroupRenderProps {
   /**
@@ -58,12 +58,14 @@ export interface GroupProps extends AriaLabelingProps, Omit<HTMLAttributes<HTMLE
   role?: 'group' | 'region' | 'presentation'
 }
 
-export const GroupContext = createContext<ContextValue<GroupProps, HTMLDivElement>>({});
+export const GroupContext: Context<ContextValue<GroupProps, HTMLDivElement>> = createContext<ContextValue<GroupProps, HTMLDivElement>>({});
 
 /**
  * A group represents a set of related UI controls, and supports interactive states for styling.
  */
-export const Group = /*#__PURE__*/ (forwardRef as forwardRefType)(function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const Group:
+  (props: GroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Group(props: GroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, GroupContext);
   let {isDisabled, isInvalid, onHoverStart, onHoverChange, onHoverEnd, ...otherProps} = props;
 
diff --git a/packages/react-aria-components/src/Header.tsx b/packages/react-aria-components/src/Header.tsx
index 2c855e941ee..bd17f151c03 100644
--- a/packages/react-aria-components/src/Header.tsx
+++ b/packages/react-aria-components/src/Header.tsx
@@ -12,11 +12,13 @@
 
 import {ContextValue, useContextProps} from './utils';
 import {createLeafComponent} from '@react-aria/collections';
-import React, {createContext, ForwardedRef, HTMLAttributes} from 'react';
+import React, {Context, createContext, ForwardedRef, HTMLAttributes} from 'react';
 
-export const HeaderContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
+export const HeaderContext: Context<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>> = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
 
-export const Header = /*#__PURE__*/ createLeafComponent('header', function Header(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
+export const Header:
+  (props: React.HTMLAttributes<HTMLElement> & React.RefAttributes<object>) => React.ReactElement | null =
+/*#__PURE__*/ createLeafComponent('header', function Header(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, HeaderContext);
   return (
     <header className="react-aria-Header" {...props} ref={ref}>
diff --git a/packages/react-aria-components/src/Heading.tsx b/packages/react-aria-components/src/Heading.tsx
index fc9649321df..05dcd760758 100644
--- a/packages/react-aria-components/src/Heading.tsx
+++ b/packages/react-aria-components/src/Heading.tsx
@@ -18,7 +18,9 @@ export interface HeadingProps extends HTMLAttributes<HTMLElement> {
   level?: number
 }
 
-export const Heading = forwardRef(function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
+export const Heading:
+  React.ForwardRefExoticComponent<HeadingProps & React.RefAttributes<HTMLHeadingElement>> =
+forwardRef(function Heading(props: HeadingProps, ref: ForwardedRef<HTMLHeadingElement>) {
   [props, ref] = useContextProps(props, ref, HeadingContext);
   let {children, level = 3, className, ...domProps} = props;
   let Element = `h${level}` as ElementType;
diff --git a/packages/react-aria-components/src/Input.tsx b/packages/react-aria-components/src/Input.tsx
index 9cd46c17feb..dc637576f33 100644
--- a/packages/react-aria-components/src/Input.tsx
+++ b/packages/react-aria-components/src/Input.tsx
@@ -13,7 +13,7 @@
 import {ContextValue, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {createHideableComponent} from '@react-aria/collections';
 import {HoverEvents, mergeProps, useFocusRing, useHover} from 'react-aria';
-import React, {createContext, ForwardedRef, InputHTMLAttributes} from 'react';
+import React, {Context, createContext, ForwardedRef, InputHTMLAttributes} from 'react';
 
 export interface InputRenderProps {
   /**
@@ -45,7 +45,7 @@ export interface InputRenderProps {
 
 export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps> {}
 
-export const InputContext = createContext<ContextValue<InputProps, HTMLInputElement>>({});
+export const InputContext: Context<ContextValue<InputProps, HTMLInputElement>> = createContext<ContextValue<InputProps, HTMLInputElement>>({});
 
 let filterHoverProps = (props: InputProps) => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -89,4 +89,6 @@ export const Input = /*#__PURE__*/ createHideableComponent(function Input(props:
       data-focus-visible={isFocusVisible || undefined}
       data-invalid={isInvalid || undefined} />
   );
-});
+}) satisfies (props: InputProps & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null as
+(props: InputProps & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+
diff --git a/packages/react-aria-components/src/Keyboard.tsx b/packages/react-aria-components/src/Keyboard.tsx
index 39625d1c51b..e086265b23f 100644
--- a/packages/react-aria-components/src/Keyboard.tsx
+++ b/packages/react-aria-components/src/Keyboard.tsx
@@ -11,11 +11,13 @@
  */
 
 import {ContextValue, useContextProps} from './utils';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
-export const KeyboardContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
+export const KeyboardContext: Context<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>> = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLElement>>({});
 
-export const Keyboard = forwardRef(function Keyboard(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
+export const Keyboard:
+  React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLElement>> =
+forwardRef(function Keyboard(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, KeyboardContext);
   return <kbd dir="ltr" {...props} ref={ref} />;
 });
diff --git a/packages/react-aria-components/src/Label.tsx b/packages/react-aria-components/src/Label.tsx
index 961b792302a..256b38109fd 100644
--- a/packages/react-aria-components/src/Label.tsx
+++ b/packages/react-aria-components/src/Label.tsx
@@ -12,17 +12,19 @@
 
 import {ContextValue, useContextProps} from './utils';
 import {createHideableComponent} from '@react-aria/collections';
-import React, {createContext, ForwardedRef, LabelHTMLAttributes} from 'react';
+import React, {Context, createContext, ForwardedRef, LabelHTMLAttributes} from 'react';
 
 export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
   elementType?: string
 }
 
-export const LabelContext = createContext<ContextValue<LabelProps, HTMLLabelElement>>({});
+export const LabelContext: Context<ContextValue<LabelProps, HTMLLabelElement>> = createContext<ContextValue<LabelProps, HTMLLabelElement>>({});
 
 export const Label = /*#__PURE__*/ createHideableComponent(function Label(props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
   [props, ref] = useContextProps(props, ref, LabelContext);
   let {elementType: ElementType = 'label', ...labelProps} = props;
   // @ts-ignore
   return <ElementType className="react-aria-Label" {...labelProps} ref={ref} />;
-});
+}) satisfies (props: LabelProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null as
+(props: LabelProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;
+
diff --git a/packages/react-aria-components/src/Link.tsx b/packages/react-aria-components/src/Link.tsx
index 061bd0f3fa6..16759a2b217 100644
--- a/packages/react-aria-components/src/Link.tsx
+++ b/packages/react-aria-components/src/Link.tsx
@@ -13,7 +13,7 @@
 import {AriaLinkOptions, HoverEvents, mergeProps, useFocusRing, useHover, useLink} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {forwardRefType} from '@react-types/shared';
-import React, {createContext, ElementType, ForwardedRef, forwardRef} from 'react';
+import React, {Context, createContext, ElementType, ForwardedRef, forwardRef} from 'react';
 
 export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, HoverEvents, RenderProps<LinkRenderProps>, SlotProps {}
 
@@ -50,13 +50,15 @@ export interface LinkRenderProps {
   isDisabled: boolean
 }
 
-export const LinkContext = createContext<ContextValue<LinkProps, HTMLAnchorElement>>(null);
+export const LinkContext: Context<ContextValue<LinkProps, HTMLAnchorElement>> = createContext<ContextValue<LinkProps, HTMLAnchorElement>>(null);
 
 /**
  * A link allows a user to navigate to another page or resource within a web page
  * or application.
  */
-export const Link = /*#__PURE__*/ (forwardRef as forwardRefType)(function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
+export const Link:
+  (props: LinkProps & React.RefAttributes<HTMLAnchorElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Link(props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) {
   [props, ref] = useContextProps(props, ref, LinkContext);
 
   let ElementType: ElementType = props.href && !props.isDisabled ? 'a' : 'span';
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 098758e46f9..a1996b1c2df 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -20,7 +20,7 @@ import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Ori
 import {filterDOMProps, inertValue, LoadMoreSentinelProps, mergeRefs, UNSTABLE_useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {HeaderContext} from './Header';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {SeparatorContext} from './Separator';
 import {TextContext} from './Text';
 import {UNSTABLE_InternalAutocompleteContext} from './Autocomplete';
@@ -77,13 +77,15 @@ export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' |
   orientation?: Orientation
 }
 
-export const ListBoxContext = createContext<ContextValue<ListBoxProps<any>, HTMLDivElement>>(null);
-export const ListStateContext = createContext<ListState<any> | null>(null);
+export const ListBoxContext: Context<ContextValue<ListBoxProps<any>, HTMLDivElement>> = createContext<ContextValue<ListBoxProps<any>, HTMLDivElement>>(null);
+export const ListStateContext: Context<ListState<any> | null> = createContext<ListState<any> | null>(null);
 
 /**
  * A listbox displays a list of options and allows a user to select one or more of them.
  */
-export const ListBox = /*#__PURE__*/ (forwardRef as forwardRefType)(function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const ListBox:
+  <T extends object>(props: ListBoxProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function ListBox<T extends object>(props: ListBoxProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ListBoxContext);
   let state = useContext(ListStateContext);
 
@@ -269,7 +271,7 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
 
 export interface ListBoxSectionProps<T> extends SectionProps<T> {}
 
-function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-ListBoxSection') {
+function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<object>, className = 'react-aria-ListBoxSection') {
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dropState} = useContext(DragAndDropContext)!;
   let {CollectionBranch} = useContext(CollectionRendererContext);
@@ -304,7 +306,9 @@ function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, re
 /**
  * A ListBoxSection represents a section within a ListBox.
  */
-export const ListBoxSection = /*#__PURE__*/ createBranchComponent('section', ListBoxSectionInner);
+export const ListBoxSection = /*#__PURE__*/ createBranchComponent('section', ListBoxSectionInner) satisfies
+  <T extends object>(props: ListBoxSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement | null as
+  <T extends object>(props: ListBoxSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
@@ -329,7 +333,7 @@ export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRen
 /**
  * A ListBoxItem represents an individual option in a ListBox.
  */
-export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, forwardedRef: ForwardedRef<Element>, item: Node<object>) {
   let ref = useObjectRef<any>(forwardedRef);
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
@@ -412,7 +416,9 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
       </Provider>
     </ElementType>
   );
-});
+}) satisfies <T extends object>(props: ListBoxItemProps<T> & React.RefAttributes<T>) => React.ReactElement | null as
+<T extends object>(props: ListBoxItemProps<T> & React.RefAttributes<T>) => React.ReactElement | null;
+
 
 function ListBoxDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
@@ -476,7 +482,7 @@ export interface ListBoxLoadingSentinelProps extends Omit<LoadMoreSentinelProps,
   isLoading?: boolean
 }
 
-export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', function ListBoxLoadingIndicator<T extends object>(props: ListBoxLoadingSentinelProps, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', function ListBoxLoadingIndicator(props: ListBoxLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -521,10 +527,12 @@ export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', fun
           // aria-selected isn't needed here since this option is not selectable.
           // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
           role="option"
-          ref={ref}>
+          ref={ref as ForwardedRef<HTMLDivElement>}>
           {renderProps.children}
         </div>
       )}
     </>
   );
-});
+}) satisfies (props: ListBoxLoadingSentinelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
+(props: ListBoxLoadingSentinelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index ec734898577..1412e17f42e 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -24,6 +24,7 @@ import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
 import {PressResponder} from '@react-aria/interactions';
 import React, {
+  Context,
   createContext,
   ForwardedRef,
   forwardRef,
@@ -41,9 +42,9 @@ import {SeparatorContext} from './Separator';
 import {TextContext} from './Text';
 import {UNSTABLE_InternalAutocompleteContext} from './Autocomplete';
 
-export const MenuContext = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
-export const MenuStateContext = createContext<TreeState<any> | null>(null);
-export const RootMenuTriggerStateContext = createContext<RootMenuTriggerState | null>(null);
+export const MenuContext: Context<ContextValue<MenuProps<any>, HTMLDivElement>> = createContext<ContextValue<MenuProps<any>, HTMLDivElement>>(null);
+export const MenuStateContext: Context<TreeState<any> | null> = createContext<TreeState<any> | null>(null);
+export const RootMenuTriggerStateContext: Context<RootMenuTriggerState | null> = createContext<RootMenuTriggerState | null>(null);
 const SelectionManagerContext = createContext<SelectionManager | null>(null);
 
 export interface MenuTriggerProps extends BaseMenuTriggerProps {
@@ -146,7 +147,9 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
       {props.children[1]}
     </Provider>
   );
-}, props => props.children[0]);
+}, props => props.children[0]) satisfies (props: SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null as
+(props: SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null;
+
 
 export interface MenuRenderProps {
   /**
@@ -164,7 +167,9 @@ export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, Collec
 /**
  * A menu displays a list of actions or options that a user can choose.
  */
-export const Menu = /*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const Menu:
+  <T extends object>(props: MenuProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Menu<T extends object>(props: MenuProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, MenuContext);
 
   // Delay rendering the actual menu until we have the collection so that auto focus works properly.
@@ -282,7 +287,7 @@ class GroupSelectionManager extends SelectionManager {
   }
 }
 
-function MenuSectionInner<T extends object>(props: MenuSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<T>, className = 'react-aria-MenuSection') {
+function MenuSectionInner<T extends object>(props: MenuSectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<object>, className = 'react-aria-MenuSection') {
   let state = useContext(MenuStateContext)!;
   let {CollectionBranch} = useContext(CollectionRendererContext);
   let [headingRef, heading] = useSlot();
@@ -321,7 +326,9 @@ function MenuSectionInner<T extends object>(props: MenuSectionProps<T>, ref: For
 /**
  * A MenuSection represents a section within a Menu.
  */
-export const MenuSection = /*#__PURE__*/ createBranchComponent('section', MenuSectionInner);
+export const MenuSection = /*#__PURE__*/ createBranchComponent('section', MenuSectionInner) satisfies
+<T extends object>(props: MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null as
+<T extends object>(props: MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null;
 
 export interface MenuItemRenderProps extends ItemRenderProps {
   /**
@@ -358,8 +365,8 @@ const MenuItemContext = createContext<ContextValue<MenuItemProps, HTMLDivElement
 /**
  * A MenuItem represents an individual action in a Menu.
  */
-export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuItem<T extends object>(props: MenuItemProps<T>, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<T>) {
-  [props, forwardedRef] = useContextProps(props, forwardedRef, MenuItemContext);
+export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuItem<T extends object>(props: MenuItemProps<T>, forwardedRef: ForwardedRef<Element>, item: Node<object>) {
+  [props, forwardedRef] = useContextProps(props, forwardedRef as ForwardedRef<HTMLDivElement>, MenuItemContext);
   let id = useSlottedContext(MenuItemContext)?.id as string;
   let state = useContext(MenuStateContext)!;
   let ref = useObjectRef<any>(forwardedRef);
@@ -422,4 +429,6 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
       </Provider>
     </ElementType>
   );
-});
+}) satisfies <T extends object>(props: MenuItemProps<T> & React.RefAttributes<T>) => ReactElement | null as
+<T extends object>(props: MenuItemProps<T> & React.RefAttributes<T>) => ReactElement | null;
+
diff --git a/packages/react-aria-components/src/Meter.tsx b/packages/react-aria-components/src/Meter.tsx
index d74a1c226b2..10cc37fa6cc 100644
--- a/packages/react-aria-components/src/Meter.tsx
+++ b/packages/react-aria-components/src/Meter.tsx
@@ -15,7 +15,7 @@ import {clamp} from '@react-stately/utils';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {forwardRefType} from '@react-types/shared';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef} from 'react';
 
 export interface MeterProps extends Omit<AriaMeterProps, 'label'>, RenderProps<MeterRenderProps>, SlotProps {}
 
@@ -31,12 +31,14 @@ export interface MeterRenderProps {
   valueText: string | undefined
 }
 
-export const MeterContext = createContext<ContextValue<MeterProps, HTMLDivElement>>(null);
+export const MeterContext: Context<ContextValue<MeterProps, HTMLDivElement>> = createContext<ContextValue<MeterProps, HTMLDivElement>>(null);
 
 /**
  * A meter represents a quantity within a known range, or a fractional value.
  */
-export const Meter = /*#__PURE__*/ (forwardRef as forwardRefType)(function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
+export const Meter:
+  (props: MeterProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Meter(props: MeterProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, MeterContext);
   let {
     value = 0,
diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index e76520fc10b..9a928852341 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/packages/react-aria-components/src/Modal.tsx
@@ -16,7 +16,7 @@ import {DOMAttributes, forwardRefType, RefObject} from '@react-types/shared';
 import {filterDOMProps, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
-import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';
 
 export interface ModalOverlayProps extends AriaModalOverlayProps, OverlayTriggerProps, RenderProps<ModalRenderProps>, SlotProps {
   /**
@@ -42,8 +42,8 @@ interface InternalModalContextValue {
   isDismissable?: boolean
 }
 
-export const ModalContext = createContext<ContextValue<ModalOverlayProps, HTMLDivElement>>(null);
-const InternalModalContext = createContext<InternalModalContextValue | null>(null);
+export const ModalContext: Context<ContextValue<ModalOverlayProps, HTMLDivElement>> = createContext<ContextValue<ModalOverlayProps, HTMLDivElement>>(null);
+const InternalModalContext: Context<InternalModalContextValue | null> = createContext<InternalModalContextValue | null>(null);
 
 export interface ModalRenderProps {
   /**
@@ -65,7 +65,9 @@ export interface ModalRenderProps {
 /**
  * A modal is an overlay element which blocks interaction with elements outside it.
  */
-export const Modal = /*#__PURE__*/ (forwardRef as forwardRefType)(function Modal(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
+export const Modal:
+  (props: ModalOverlayProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Modal(props: ModalOverlayProps, ref: ForwardedRef<HTMLDivElement>) {
   let ctx = useContext(InternalModalContext);
 
   if (ctx) {
@@ -141,7 +143,9 @@ function ModalOverlayWithForwardRef(props: ModalOverlayProps, ref: ForwardedRef<
 /**
  * A ModalOverlay is a wrapper for a Modal which allows customizing the backdrop element.
  */
-export const ModalOverlay = /*#__PURE__*/ (forwardRef as forwardRefType)(ModalOverlayWithForwardRef);
+export const ModalOverlay:
+ (props: ModalOverlayProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(ModalOverlayWithForwardRef);
 
 function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInnerProps) {
   let modalRef = props.modalRef;
diff --git a/packages/react-aria-components/src/NumberField.tsx b/packages/react-aria-components/src/NumberField.tsx
index 375b9ff7ab0..e9859ac7da1 100644
--- a/packages/react-aria-components/src/NumberField.tsx
+++ b/packages/react-aria-components/src/NumberField.tsx
@@ -21,7 +21,7 @@ import {GroupContext} from './Group';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
 import {NumberFieldState, useNumberFieldState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface NumberFieldRenderProps {
@@ -48,13 +48,15 @@ export interface NumberFieldRenderProps {
 
 export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<NumberFieldRenderProps>, SlotProps {}
 
-export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, HTMLDivElement>>(null);
-export const NumberFieldStateContext = createContext<NumberFieldState | null>(null);
+export const NumberFieldContext: Context<ContextValue<NumberFieldProps, HTMLDivElement>> = createContext<ContextValue<NumberFieldProps, HTMLDivElement>>(null);
+export const NumberFieldStateContext: Context<NumberFieldState | null> = createContext<NumberFieldState | null>(null);
 
 /**
  * A number field allows a user to enter a number, and increment or decrement the value using stepper buttons.
  */
-export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+export const NumberField:
+  (props: NumberFieldProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function NumberField(props: NumberFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, NumberFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
diff --git a/packages/react-aria-components/src/OverlayArrow.tsx b/packages/react-aria-components/src/OverlayArrow.tsx
index a99c5c446a5..1df86f37c0f 100644
--- a/packages/react-aria-components/src/OverlayArrow.tsx
+++ b/packages/react-aria-components/src/OverlayArrow.tsx
@@ -14,13 +14,13 @@ import {ContextValue, RenderProps, useContextProps, useRenderProps} from './util
 import {DOMProps, forwardRefType} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {PlacementAxis} from 'react-aria';
-import React, {createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
+import React, {Context, createContext, CSSProperties, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
 interface OverlayArrowContextValue extends OverlayArrowProps {
   placement: PlacementAxis | null
 }
 
-export const OverlayArrowContext = createContext<ContextValue<OverlayArrowContextValue, HTMLDivElement>>({
+export const OverlayArrowContext: Context<ContextValue<OverlayArrowContextValue, HTMLDivElement>> = createContext<ContextValue<OverlayArrowContextValue, HTMLDivElement>>({
   placement: 'bottom'
 });
 
@@ -38,7 +38,9 @@ export interface OverlayArrowRenderProps {
  * An OverlayArrow renders a custom arrow element relative to an overlay element
  * such as a popover or tooltip such that it aligns with a trigger element.
  */
-export const OverlayArrow = /*#__PURE__*/ (forwardRef as forwardRefType)(function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
+export const OverlayArrow:
+  (props: OverlayArrowProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function OverlayArrow(props: OverlayArrowProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, OverlayArrowContext);
   let placement = (props as OverlayArrowContextValue).placement;
   let style: CSSProperties = {
diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx
index 0ab82a28e31..247ce6fe735 100644
--- a/packages/react-aria-components/src/Popover.tsx
+++ b/packages/react-aria-components/src/Popover.tsx
@@ -85,7 +85,7 @@ interface PopoverContextValue extends PopoverProps {
   clearContexts?: Context<any>[]
 }
 
-export const PopoverContext = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);
+export const PopoverContext: Context<ContextValue<PopoverContextValue, HTMLElement>> = createContext<ContextValue<PopoverContextValue, HTMLElement>>(null);
 
 // Stores a ref for the portal container for a group of popovers (e.g. submenus).
 const PopoverGroupContext = createContext<RefObject<Element | null> | null>(null);
@@ -93,7 +93,9 @@ const PopoverGroupContext = createContext<RefObject<Element | null> | null>(null
 /**
  * A popover is an overlay element positioned relative to a trigger.
  */
-export const Popover = /*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
+export const Popover:
+  (props: PopoverProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Popover(props: PopoverProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, PopoverContext);
   let contextState = useContext(OverlayTriggerStateContext);
   let localState = useOverlayTriggerState(props);
diff --git a/packages/react-aria-components/src/ProgressBar.tsx b/packages/react-aria-components/src/ProgressBar.tsx
index f18c67f7f22..79a56ed8d4a 100644
--- a/packages/react-aria-components/src/ProgressBar.tsx
+++ b/packages/react-aria-components/src/ProgressBar.tsx
@@ -14,7 +14,7 @@ import {AriaProgressBarProps, useProgressBar} from 'react-aria';
 import {clamp} from '@react-stately/utils';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef} from 'react';
 
 export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'label'>, RenderProps<ProgressBarRenderProps>, SlotProps {}
 
@@ -35,13 +35,15 @@ export interface ProgressBarRenderProps {
   isIndeterminate: boolean
 }
 
-export const ProgressBarContext = createContext<ContextValue<ProgressBarProps, HTMLDivElement>>(null);
+export const ProgressBarContext: Context<ContextValue<ProgressBarProps, HTMLDivElement>> = createContext<ContextValue<ProgressBarProps, HTMLDivElement>>(null);
 
 /**
  * Progress bars show either determinate or indeterminate progress of an operation
  * over time.
  */
-export const ProgressBar = forwardRef(function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ProgressBar:
+  React.ForwardRefExoticComponent<ProgressBarProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ProgressBar(props: ProgressBarProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ProgressBarContext);
   let {
     value = 0,
diff --git a/packages/react-aria-components/src/RSPContexts.ts b/packages/react-aria-components/src/RSPContexts.ts
index 2b5db6a7462..d8643f74c39 100644
--- a/packages/react-aria-components/src/RSPContexts.ts
+++ b/packages/react-aria-components/src/RSPContexts.ts
@@ -15,8 +15,8 @@ import {ColorAreaProps} from './ColorArea';
 import {ColorFieldProps} from './ColorField';
 import {ColorSliderProps} from './ColorSlider';
 import {ColorWheelProps} from './ColorWheel';
+import {Context, createContext} from 'react';
 import {ContextValue} from './utils';
-import {createContext} from 'react';
 import {HeadingProps} from './Heading';
 
 // This file is a temporary workaround for a tree shaking issue in SWC (the minifier used by Parcel).
@@ -25,9 +25,9 @@ import {HeadingProps} from './Heading';
 // and implementation even if only the context is imported. We moved these contexts to a separate file so
 // that the implementation does not get included in the bundle. This will be removed once the tree shaking
 // issue is fixed.
-export const CheckboxContext = createContext<ContextValue<CheckboxProps, HTMLLabelElement>>(null);
-export const ColorAreaContext = createContext<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>>(null);
-export const ColorFieldContext = createContext<ContextValue<ColorFieldProps, HTMLDivElement>>(null);
-export const ColorSliderContext = createContext<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>(null);
-export const ColorWheelContext = createContext<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>>(null);
-export const HeadingContext = createContext<ContextValue<HeadingProps, HTMLHeadingElement>>({});
+export const CheckboxContext: Context<ContextValue<CheckboxProps, HTMLLabelElement>> = createContext<ContextValue<CheckboxProps, HTMLLabelElement>>(null);
+export const ColorAreaContext: Context<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>> = createContext<ContextValue<Partial<ColorAreaProps>, HTMLDivElement>>(null);
+export const ColorFieldContext: Context<ContextValue<ColorFieldProps, HTMLDivElement>> = createContext<ContextValue<ColorFieldProps, HTMLDivElement>>(null);
+export const ColorSliderContext: Context<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>> = createContext<ContextValue<Partial<ColorSliderProps>, HTMLDivElement>>(null);
+export const ColorWheelContext: Context<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>> = createContext<ContextValue<Partial<ColorWheelProps>, HTMLDivElement>>(null);
+export const HeadingContext: Context<ContextValue<HeadingProps, HTMLHeadingElement>> = createContext<ContextValue<HeadingProps, HTMLHeadingElement>>({});
diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx
index 32926cd69fc..dfb4e6c2323 100644
--- a/packages/react-aria-components/src/RadioGroup.tsx
+++ b/packages/react-aria-components/src/RadioGroup.tsx
@@ -18,7 +18,7 @@ import {FormContext} from './Form';
 import {forwardRefType, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {RadioGroupState, useRadioGroupState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, useMemo} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useMemo} from 'react';
 import {TextContext} from './Text';
 
 export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<RadioGroupRenderProps>, SlotProps {}
@@ -109,14 +109,16 @@ export interface RadioRenderProps {
   isRequired: boolean
 }
 
-export const RadioGroupContext = createContext<ContextValue<RadioGroupProps, HTMLDivElement>>(null);
-export const RadioContext = createContext<ContextValue<Partial<RadioProps>, HTMLLabelElement>>(null);
-export const RadioGroupStateContext = createContext<RadioGroupState | null>(null);
+export const RadioGroupContext: Context<ContextValue<RadioGroupProps, HTMLDivElement>> = createContext<ContextValue<RadioGroupProps, HTMLDivElement>>(null);
+export const RadioContext: Context<ContextValue<Partial<RadioProps>, HTMLLabelElement>> = createContext<ContextValue<Partial<RadioProps>, HTMLLabelElement>>(null);
+export const RadioGroupStateContext: Context<RadioGroupState | null> = createContext<RadioGroupState | null>(null);
 
 /**
  * A radio group allows a user to select a single item from a list of mutually exclusive options.
  */
-export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const RadioGroup:
+  (props: RadioGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function RadioGroup(props: RadioGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, RadioGroupContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -179,7 +181,9 @@ export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function
 /**
  * A radio represents an individual option within a radio group.
  */
-export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio(props: RadioProps, ref: ForwardedRef<HTMLLabelElement>) {
+export const Radio:
+  (props: RadioProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Radio(props: RadioProps, ref: ForwardedRef<HTMLLabelElement>) {
   let {
     inputRef: userProvidedInputRef = null,
     ...otherProps
diff --git a/packages/react-aria-components/src/SearchField.tsx b/packages/react-aria-components/src/SearchField.tsx
index 29d322f65cf..8ec9bdbbee0 100644
--- a/packages/react-aria-components/src/SearchField.tsx
+++ b/packages/react-aria-components/src/SearchField.tsx
@@ -20,7 +20,7 @@ import {FormContext} from './Form';
 import {GroupContext} from './Group';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, useRef} from 'react';
 import {SearchFieldState, useSearchFieldState} from 'react-stately';
 import {TextContext} from './Text';
 
@@ -48,12 +48,14 @@ export interface SearchFieldRenderProps {
 
 export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<SearchFieldRenderProps>, SlotProps {}
 
-export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, HTMLDivElement>>(null);
+export const SearchFieldContext: Context<ContextValue<SearchFieldProps, HTMLDivElement>> = createContext<ContextValue<SearchFieldProps, HTMLDivElement>>(null);
 
 /**
  * A search field allows a user to enter and clear a search query.
  */
-export const SearchField = /*#__PURE__*/ createHideableComponent(function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+export const SearchField:
+  (props: SearchFieldProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ createHideableComponent(function SearchField(props: SearchFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SearchFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
index d96efb4dc23..9efe16d1f96 100644
--- a/packages/react-aria-components/src/Select.tsx
+++ b/packages/react-aria-components/src/Select.tsx
@@ -26,7 +26,7 @@ import {LabelContext} from './Label';
 import {ListBoxContext, ListStateContext} from './ListBox';
 import {OverlayTriggerStateContext} from './Dialog';
 import {PopoverContext} from './Popover';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, HTMLAttributes, ReactNode, useCallback, useContext, useMemo, useRef, useState} from 'react';
 import {TextContext} from './Text';
 
 export interface SelectRenderProps {
@@ -70,13 +70,15 @@ export interface SelectProps<T extends object = {}> extends Omit<AriaSelectProps
   placeholder?: string
 }
 
-export const SelectContext = createContext<ContextValue<SelectProps<any>, HTMLDivElement>>(null);
-export const SelectStateContext = createContext<SelectState<unknown> | null>(null);
+export const SelectContext: Context<ContextValue<SelectProps<any>, HTMLDivElement>> = createContext<ContextValue<SelectProps<any>, HTMLDivElement>>(null);
+export const SelectStateContext: Context<SelectState<unknown> | null> = createContext<SelectState<unknown> | null>(null);
 
 /**
  * A select displays a collapsible list of options and allows a user to select one of them.
  */
-export const Select = /*#__PURE__*/ (forwardRef as forwardRefType)(function Select<T extends object = {}>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const Select:
+  <T extends object = {}>(props: SelectProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Select<T extends object = {}>(props: SelectProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SelectContext);
   let {children, isDisabled = false, isInvalid = false, isRequired = false} = props;
   let content = useMemo(() => (
@@ -239,13 +241,15 @@ export interface SelectValueRenderProps<T> {
 
 export interface SelectValueProps<T extends object> extends Omit<HTMLAttributes<HTMLElement>, keyof RenderProps<unknown>>, RenderProps<SelectValueRenderProps<T>> {}
 
-export const SelectValueContext = createContext<ContextValue<SelectValueProps<any>, HTMLSpanElement>>(null);
+export const SelectValueContext: Context<ContextValue<SelectValueProps<any>, HTMLSpanElement>> = createContext<ContextValue<SelectValueProps<any>, HTMLSpanElement>>(null);
 
 /**
  * SelectValue renders the current value of a Select, or a placeholder if no value is selected.
  * It is usually placed within the button element.
  */
-export const SelectValue = /*#__PURE__*/ (forwardRef as forwardRefType)(function SelectValue<T extends object>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {
+export const SelectValue:
+  <T extends object>(props: SelectValueProps<T> & React.RefAttributes<HTMLSpanElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function SelectValue<T extends object>(props: SelectValueProps<T>, ref: ForwardedRef<HTMLSpanElement>) {
   [props, ref] = useContextProps(props, ref, SelectValueContext);
   let state = useContext(SelectStateContext)!;
   let {placeholder} = useSlottedContext(SelectContext)!;
diff --git a/packages/react-aria-components/src/Separator.tsx b/packages/react-aria-components/src/Separator.tsx
index 4e14b71b47d..32a4d1b4b95 100644
--- a/packages/react-aria-components/src/Separator.tsx
+++ b/packages/react-aria-components/src/Separator.tsx
@@ -14,11 +14,11 @@ import {SeparatorProps as AriaSeparatorProps, useSeparator} from 'react-aria';
 import {ContextValue, SlotProps, StyleProps, useContextProps} from './utils';
 import {createLeafComponent} from '@react-aria/collections';
 import {filterDOMProps} from '@react-aria/utils';
-import React, {createContext, ElementType, ForwardedRef} from 'react';
+import React, {Context, createContext, ElementType, ForwardedRef} from 'react';
 
 export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProps {}
 
-export const SeparatorContext = createContext<ContextValue<SeparatorProps, HTMLElement>>({});
+export const SeparatorContext: Context<ContextValue<SeparatorProps, HTMLElement>> = createContext<ContextValue<SeparatorProps, HTMLElement>>({});
 
 export const Separator = /*#__PURE__*/ createLeafComponent('separator', function Separator(props: SeparatorProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, SeparatorContext);
@@ -44,4 +44,5 @@ export const Separator = /*#__PURE__*/ createLeafComponent('separator', function
       ref={ref}
       slot={slot || undefined} />
   );
-});
+}) satisfies (props: SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null as
+(props: SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
diff --git a/packages/react-aria-components/src/Slider.tsx b/packages/react-aria-components/src/Slider.tsx
index ad7f1ebf77e..a530d71bf83 100644
--- a/packages/react-aria-components/src/Slider.tsx
+++ b/packages/react-aria-components/src/Slider.tsx
@@ -15,7 +15,7 @@ import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRend
 import {filterDOMProps} from '@react-aria/utils';
 import {forwardRefType, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, OutputHTMLAttributes, useContext, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, HTMLAttributes, OutputHTMLAttributes, useContext, useRef} from 'react';
 import {SliderState, useSliderState} from 'react-stately';
 
 export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps<T>, 'label'>, RenderProps<SliderRenderProps>, SlotProps {
@@ -25,10 +25,10 @@ export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps
   formatOptions?: Intl.NumberFormatOptions
 }
 
-export const SliderContext = createContext<ContextValue<SliderProps, HTMLDivElement>>(null);
-export const SliderStateContext = createContext<SliderState | null>(null);
-export const SliderTrackContext = createContext<ContextValue<SliderTrackContextValue, HTMLDivElement>>(null);
-export const SliderOutputContext = createContext<ContextValue<SliderOutputContextValue, HTMLOutputElement>>(null);
+export const SliderContext: Context<ContextValue<SliderProps, HTMLDivElement>> = createContext<ContextValue<SliderProps, HTMLDivElement>>(null);
+export const SliderStateContext: Context<SliderState | null> = createContext<SliderState | null>(null);
+export const SliderTrackContext: Context<ContextValue<SliderTrackContextValue, HTMLDivElement>> = createContext<ContextValue<SliderTrackContextValue, HTMLDivElement>>(null);
+export const SliderOutputContext: Context<ContextValue<SliderOutputContextValue, HTMLOutputElement>> = createContext<ContextValue<SliderOutputContextValue, HTMLOutputElement>>(null);
 
 export interface SliderRenderProps {
   /**
@@ -50,7 +50,9 @@ export interface SliderRenderProps {
 /**
  * A slider allows a user to select one or more values within a range.
  */
-export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slider<T extends number | number[]>(props: SliderProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const Slider:
+  <T extends number | number[]>(props: SliderProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Slider<T extends number | number[]>(props: SliderProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SliderContext);
   let trackRef = useRef<HTMLDivElement>(null);
   let numberFormatter = useNumberFormatter(props.formatOptions);
@@ -104,7 +106,9 @@ interface SliderOutputContextValue extends Omit<OutputHTMLAttributes<HTMLOutputE
 /**
  * A slider output displays the current value of a slider as text.
  */
-export const SliderOutput = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderOutput(props: SliderOutputProps, ref: ForwardedRef<HTMLOutputElement>) {
+export const SliderOutput:
+  (props: SliderOutputProps & React.RefAttributes<HTMLOutputElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function SliderOutput(props: SliderOutputProps, ref: ForwardedRef<HTMLOutputElement>) {
   [props, ref] = useContextProps(props, ref, SliderOutputContext);
   let {children, style, className, ...otherProps} = props;
   let state = useContext(SliderStateContext)!;
@@ -145,7 +149,9 @@ interface SliderTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'chi
 /**
  * A slider track is a container for one or more slider thumbs.
  */
-export const SliderTrack = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>) {
+export const SliderTrack:
+  (props: SliderTrackProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function SliderTrack(props: SliderTrackProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, SliderTrackContext);
   let state = useContext(SliderStateContext)!;
   let {onHoverStart, onHoverEnd, onHoverChange, ...otherProps} = props;
@@ -214,7 +220,9 @@ export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | '
 /**
  * A slider thumb represents an individual value that the user can adjust within a slider track.
  */
-export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function SliderThumb(props: SliderThumbProps, ref: ForwardedRef<HTMLDivElement>) {
+export const SliderThumb:
+  (props: SliderThumbProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function SliderThumb(props: SliderThumbProps, ref: ForwardedRef<HTMLDivElement>) {
   let {
     inputRef: userInputRef = null
   } = props;
diff --git a/packages/react-aria-components/src/Switch.tsx b/packages/react-aria-components/src/Switch.tsx
index 67e264efd6e..de63eb5cf00 100644
--- a/packages/react-aria-components/src/Switch.tsx
+++ b/packages/react-aria-components/src/Switch.tsx
@@ -14,7 +14,7 @@ import {AriaSwitchProps, HoverEvents, mergeProps, useFocusRing, useHover, useSwi
 import {ContextValue, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {forwardRefType, RefObject} from '@react-types/shared';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef} from 'react';
 import {ToggleState, useToggleState} from 'react-stately';
 
 export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps>, SlotProps {
@@ -66,12 +66,14 @@ export interface SwitchRenderProps {
   state: ToggleState
 }
 
-export const SwitchContext = createContext<ContextValue<SwitchProps, HTMLLabelElement>>(null);
+export const SwitchContext: Context<ContextValue<SwitchProps, HTMLLabelElement>> = createContext<ContextValue<SwitchProps, HTMLLabelElement>>(null);
 
 /**
  * A switch allows a user to turn a setting on or off.
  */
-export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Switch(props: SwitchProps, ref: ForwardedRef<HTMLLabelElement>) {
+export const Switch:
+  (props: SwitchProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Switch(props: SwitchProps, ref: ForwardedRef<HTMLLabelElement>) {
   let {
     inputRef: userProvidedInputRef = null,
     ...otherProps
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index b0559e64713..9386dc20718 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -14,7 +14,7 @@ import {filterDOMProps, inertValue, isScrollable, LoadMoreSentinelProps, mergeRe
 import {GridNode} from '@react-types/grid';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, JSX, ReactElement, ReactNode, useCallback, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import ReactDOM from 'react-dom';
 
 class TableCollection<T> extends BaseCollection<T> implements ITableCollection<T> {
@@ -227,7 +227,9 @@ export interface ResizableTableContainerProps extends DOMProps, ScrollableProps<
   onResizeEnd?: (widths: Map<Key, ColumnSize>) => void
 }
 
-export const ResizableTableContainer = forwardRef(function ResizableTableContainer(props: ResizableTableContainerProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ResizableTableContainer:
+  React.ForwardRefExoticComponent<ResizableTableContainerProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ResizableTableContainer(props: ResizableTableContainerProps, ref: ForwardedRef<HTMLDivElement>) {
   let containerRef = useObjectRef(ref);
   let tableRef = useRef<HTMLTableElement>(null);
   let scrollRef = useRef<HTMLElement | null>(null);
@@ -282,9 +284,9 @@ export const ResizableTableContainer = forwardRef(function ResizableTableContain
   );
 });
 
-export const TableContext = createContext<ContextValue<TableProps, HTMLTableElement>>(null);
-export const TableStateContext = createContext<TableState<any> | null>(null);
-export const TableColumnResizeStateContext = createContext<TableColumnResizeState<unknown> | null>(null);
+export const TableContext: Context<ContextValue<TableProps, HTMLTableElement>> = createContext<ContextValue<TableProps, HTMLTableElement>>(null);
+export const TableStateContext: Context<TableState<any> | null> = createContext<TableState<any> | null>(null);
+export const TableColumnResizeStateContext: Context<TableColumnResizeState<unknown> | null> = createContext<TableColumnResizeState<unknown> | null>(null);
 
 export interface TableRenderProps {
   /**
@@ -331,7 +333,9 @@ export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, Sty
  * A table displays data in rows and columns and enables a user to navigate its contents via directional navigation keys,
  * and optionally supports row selection and sorting.
  */
-export const Table = forwardRef(function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
+export const Table:
+  React.ForwardRefExoticComponent<TableProps & React.RefAttributes<HTMLTableElement>> =
+forwardRef(function Table(props: TableProps, ref: ForwardedRef<HTMLTableElement>) {
   [props, ref] = useContextProps(props, ref, TableContext);
 
   // Separate selection state so we have access to it from collection components via useTableOptions.
@@ -600,7 +604,9 @@ export const TableHeader =  /*#__PURE__*/ createBranchComponent(
       {props.children}
     </Collection>
   )
-);
+) satisfies <T extends object>(props: TableHeaderProps<T> & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null as
+<T extends object>(props: TableHeaderProps<T> & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null;
+
 
 function TableHeaderRow({item}: {item: GridNode<any>}) {
   let ref = useRef<HTMLTableRowElement>(null);
@@ -689,7 +695,7 @@ export interface ColumnProps extends RenderProps<ColumnRenderProps> {
 /**
  * A column within a `<Table>`.
  */
-export const Column = /*#__PURE__*/ createLeafComponent('column', (props: ColumnProps, forwardedRef: ForwardedRef<HTMLTableCellElement>, column: GridNode<unknown>) => {
+export const Column = /*#__PURE__*/ createLeafComponent('column', (props: ColumnProps, forwardedRef: ForwardedRef<HTMLTableCellElement>, column: GridNode<object>) => {
   let ref = useObjectRef<HTMLTableHeaderCellElement>(forwardedRef);
   let state = useContext(TableStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
@@ -769,7 +775,9 @@ export const Column = /*#__PURE__*/ createLeafComponent('column', (props: Column
       </Provider>
     </TH>
   );
-});
+}) satisfies (props: ColumnProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null as
+(props: ColumnProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null;
+
 
 export interface ColumnResizerRenderProps {
   /**
@@ -811,7 +819,9 @@ interface ColumnResizerContextValue {
 
 const ColumnResizerContext = createContext<ColumnResizerContextValue | null>(null);
 
-export const ColumnResizer = forwardRef(function ColumnResizer(props: ColumnResizerProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ColumnResizer:
+  React.ForwardRefExoticComponent<ColumnResizerProps & React.RefAttributes<HTMLDivElement>> =
+forwardRef(function ColumnResizer(props: ColumnResizerProps, ref: ForwardedRef<HTMLDivElement>) {
   let layoutState = useContext(TableColumnResizeStateContext);
   if (!layoutState) {
     throw new Error('Wrap your <Table> in a <ResizableTableContainer> to enable column resizing');
@@ -989,7 +999,9 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
       {emptyState}
     </TBody>
   );
-});
+}) satisfies <T extends object>(props: TableBodyProps<T> & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null as
+<T extends object>(props: TableBodyProps<T> & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null;
+
 
 export interface RowRenderProps extends ItemRenderProps {
   /** Whether the row's children have keyboard focus. */
@@ -1025,7 +1037,7 @@ export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMPr
  */
 export const Row = /*#__PURE__*/ createBranchComponent(
   'item',
-  <T extends object>(props: RowProps<T>, forwardedRef: ForwardedRef<HTMLTableRowElement>, item: GridNode<T>) => {
+  <T extends object>(props: RowProps<T>, forwardedRef: ForwardedRef<HTMLTableRowElement>, item: GridNode<object>) => {
     let ref = useObjectRef<HTMLTableRowElement>(forwardedRef);
     let state = useContext(TableStateContext)!;
     let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext);
@@ -1164,7 +1176,9 @@ export const Row = /*#__PURE__*/ createBranchComponent(
       </Collection>
     );
   }
-);
+) satisfies <T extends object>(props: RowProps<T> & React.RefAttributes<HTMLTableRowElement>) => ReactElement | null as
+<T extends object>(props: RowProps<T> & React.RefAttributes<HTMLTableRowElement>) => ReactElement | null;
+
 
 export interface CellRenderProps {
   /**
@@ -1205,7 +1219,7 @@ export interface CellProps extends RenderProps<CellRenderProps> {
 /**
  * A cell within a table row.
  */
-export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps, forwardedRef: ForwardedRef<HTMLTableCellElement>, cell: GridNode<unknown>) => {
+export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps, forwardedRef: ForwardedRef<HTMLTableCellElement>, cell: GridNode<object>) => {
   let ref = useObjectRef<HTMLTableCellElement>(forwardedRef);
   let state = useContext(TableStateContext)!;
   let {dragState} = useContext(DragAndDropContext);
@@ -1249,7 +1263,9 @@ export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps,
       </CollectionRendererContext.Provider>
     </TD>
   );
-});
+}) satisfies (props: CellProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null as
+(props: CellProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null;
+
 
 function TableDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
@@ -1359,7 +1375,7 @@ export interface TableLoadingSentinelProps extends Omit<LoadMoreSentinelProps, '
   isLoading?: boolean
 }
 
-export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', function TableLoadingIndicator<T extends object>(props: TableLoadingSentinelProps, ref: ForwardedRef<HTMLTableRowElement>, item: Node<T>) {
+export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', function TableLoadingIndicator(props: TableLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(TableStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -1409,7 +1425,7 @@ export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', funct
           {...mergeProps(filterDOMProps(props as any), rowProps)}
           {...renderProps}
           role="row"
-          ref={ref}>
+          ref={ref as ForwardedRef<HTMLTableRowElement>}>
           <TD role="rowheader" {...rowHeaderProps} style={style}>
             {renderProps.children}
           </TD>
@@ -1417,4 +1433,6 @@ export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', funct
       )}
     </>
   );
-});
+}) satisfies <T extends object>(props: TableLoadingSentinelProps & React.RefAttributes<T>) => ReactElement | null as
+<T extends object>(props: TableLoadingSentinelProps & React.RefAttributes<T>) => ReactElement | null;
+
diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index dea9b90c12c..6f5e54b9c4c 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -17,7 +17,7 @@ import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, u
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
 import {filterDOMProps, inertValue, useObjectRef} from '@react-aria/utils';
 import {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, JSX, useContext, useMemo} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, JSX, useContext, useMemo} from 'react';
 
 export interface TabsProps extends Omit<AriaTabListProps<any>, 'items' | 'children'>, RenderProps<TabsRenderProps>, SlotProps {}
 
@@ -115,13 +115,15 @@ export interface TabPanelRenderProps {
   state: TabListState<unknown>
 }
 
-export const TabsContext = createContext<ContextValue<TabsProps, HTMLDivElement>>(null);
-export const TabListStateContext = createContext<TabListState<object> | null>(null);
+export const TabsContext: Context<ContextValue<TabsProps, HTMLDivElement>> = createContext<ContextValue<TabsProps, HTMLDivElement>>(null);
+export const TabListStateContext: Context<TabListState<object> | null> = createContext<TabListState<object> | null>(null);
 
 /**
  * Tabs organize content into multiple sections and allow users to navigate between them.
  */
-export const Tabs = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
+export const Tabs:
+  (props: TabsProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Tabs(props: TabsProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TabsContext);
   let {children, orientation = 'horizontal'} = props;
   children = useMemo(() => (
@@ -188,7 +190,9 @@ function TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {
  * A TabList is used within Tabs to group tabs that a user can switch between.
  * The ids of the items within the <TabList> must match up with a corresponding item inside the <TabPanels>.
  */
-export const TabList = /*#__PURE__*/ (forwardRef as forwardRefType)(function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
+export const TabList:
+  <T extends object>(props: TabListProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function TabList<T extends object>(props: TabListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
   let state = useContext(TabListStateContext);
   return state
     ? <TabListInner props={props} forwardedRef={ref} />
@@ -240,7 +244,7 @@ function TabListInner<T extends object>({props, forwardedRef: ref}: TabListInner
 /**
  * A Tab provides a title for an individual item within a TabList.
  */
-export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<unknown>) => {
+export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<object>) => {
   let state = useContext(TabListStateContext)!;
   let ref = useObjectRef<any>(forwardedRef);
   let {tabProps, isSelected, isDisabled, isPressed} = useTab({key: item.key, ...props}, state, ref);
@@ -282,7 +286,9 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
       {renderProps.children}
     </ElementType>
   );
-});
+}) satisfies (props: TabProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null as
+(props: TabProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
+
 
 /**
  * A TabPanel provides the content for a tab.
@@ -337,4 +343,6 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
       </Provider>
     </div>
   );
-});
+}) satisfies (props: TabPanelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
+(props: TabPanelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+
diff --git a/packages/react-aria-components/src/TagGroup.tsx b/packages/react-aria-components/src/TagGroup.tsx
index eccd36bd58e..9b315612eca 100644
--- a/packages/react-aria-components/src/TagGroup.tsx
+++ b/packages/react-aria-components/src/TagGroup.tsx
@@ -20,7 +20,7 @@ import {forwardRefType, HoverEvents, Key, LinkDOMProps} from '@react-types/share
 import {LabelContext} from './Label';
 import {ListState, Node, useListState} from 'react-stately';
 import {ListStateContext} from './ListBox';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';
 import {TextContext} from './Text';
 
 export interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps {}
@@ -52,13 +52,15 @@ export interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'
   renderEmptyState?: (props: TagListRenderProps) => ReactNode
 }
 
-export const TagGroupContext = createContext<ContextValue<TagGroupProps, HTMLDivElement>>(null);
-export const TagListContext = createContext<ContextValue<TagListProps<any>, HTMLDivElement>>(null);
+export const TagGroupContext: Context<ContextValue<TagGroupProps, HTMLDivElement>> = createContext<ContextValue<TagGroupProps, HTMLDivElement>>(null);
+export const TagListContext: Context<ContextValue<TagListProps<any>, HTMLDivElement>> = createContext<ContextValue<TagListProps<any>, HTMLDivElement>>(null);
 
 /**
  * A tag group is a focusable list of labels, categories, keywords, filters, or other items, with support for keyboard navigation, selection, and removal.
  */
-export const TagGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const TagGroup:
+  (props: TagGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function TagGroup(props: TagGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TagGroupContext);
   return (
     <CollectionBuilder content={props.children}>
@@ -126,7 +128,9 @@ function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProp
 /**
  * A tag list is a container for tags within a TagGroup.
  */
-export const TagList = /*#__PURE__*/ (forwardRef as forwardRefType)(function TagList<T extends object>(props: TagListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
+export const TagList:
+  <T extends object>(props: TagListProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function TagList<T extends object>(props: TagListProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element {
   let state = useContext(ListStateContext);
   return state
     ? <TagListInner props={props} forwardedRef={ref} />
@@ -199,7 +203,7 @@ export interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps, Hov
 /**
  * A Tag is an individual item within a TagList.
  */
-export const Tag = /*#__PURE__*/ createLeafComponent('item', (props: TagProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<unknown>) => {
+export const Tag = /*#__PURE__*/ createLeafComponent('item', (props: TagProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<object>) => {
   let state = useContext(ListStateContext)!;
   let ref = useObjectRef<HTMLDivElement>(forwardedRef);
   let {focusProps, isFocusVisible} = useFocusRing({within: false});
@@ -260,4 +264,6 @@ export const Tag = /*#__PURE__*/ createLeafComponent('item', (props: TagProps, f
       </div>
     </div>
   );
-});
+}) satisfies (props: TagProps & React.RefAttributes<object>) => React.ReactElement | null as
+(props: TagProps & React.RefAttributes<object>) => React.ReactElement | null;
+
diff --git a/packages/react-aria-components/src/Text.tsx b/packages/react-aria-components/src/Text.tsx
index 022dff3b452..d8a4302d573 100644
--- a/packages/react-aria-components/src/Text.tsx
+++ b/packages/react-aria-components/src/Text.tsx
@@ -11,15 +11,17 @@
  */
 
 import {ContextValue, useContextProps} from './utils';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, HTMLAttributes} from 'react';
 
 export interface TextProps extends HTMLAttributes<HTMLElement> {
   elementType?: string
 }
 
-export const TextContext = createContext<ContextValue<TextProps, HTMLElement>>({});
+export const TextContext: Context<ContextValue<TextProps, HTMLElement>> = createContext<ContextValue<TextProps, HTMLElement>>({});
 
-export const Text = forwardRef(function Text(props: TextProps, ref: ForwardedRef<HTMLElement>) {
+export const Text:
+  React.ForwardRefExoticComponent<TextProps & React.RefAttributes<HTMLElement>> =
+forwardRef(function Text(props: TextProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, TextContext);
   let {elementType: ElementType = 'span', ...domProps} = props;
   // @ts-ignore
diff --git a/packages/react-aria-components/src/TextArea.tsx b/packages/react-aria-components/src/TextArea.tsx
index ae811bf7954..0f65f3b7f79 100644
--- a/packages/react-aria-components/src/TextArea.tsx
+++ b/packages/react-aria-components/src/TextArea.tsx
@@ -1,11 +1,11 @@
 import {ContextValue, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {HoverEvents, mergeProps, useFocusRing, useHover} from 'react-aria';
 import {InputRenderProps} from './Input';
-import React, {createContext, ForwardedRef, forwardRef, TextareaHTMLAttributes} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, TextareaHTMLAttributes} from 'react';
 
 export interface TextAreaProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'className' | 'style'>, HoverEvents, StyleRenderProps<InputRenderProps> {}
 
-export const TextAreaContext = createContext<ContextValue<TextAreaProps, HTMLTextAreaElement>>({});
+export const TextAreaContext: Context<ContextValue<TextAreaProps, HTMLTextAreaElement>> = createContext<ContextValue<TextAreaProps, HTMLTextAreaElement>>({});
 
 let filterHoverProps = (props: TextAreaProps): TextAreaProps => {
   // eslint-disable-next-line @typescript-eslint/no-unused-vars
@@ -16,7 +16,9 @@ let filterHoverProps = (props: TextAreaProps): TextAreaProps => {
 /**
  * A textarea allows a user to input mult-line text.
  */
-export const TextArea = forwardRef(function TextArea(props: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) {
+export const TextArea:
+  React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>> =
+forwardRef(function TextArea(props: TextAreaProps, ref: ForwardedRef<HTMLTextAreaElement>) {
   [props, ref] = useContextProps(props, ref, TextAreaContext);
 
   let {hoverProps, isHovered} = useHover(props);
diff --git a/packages/react-aria-components/src/TextField.tsx b/packages/react-aria-components/src/TextField.tsx
index 066959780dd..252da4a0a2c 100644
--- a/packages/react-aria-components/src/TextField.tsx
+++ b/packages/react-aria-components/src/TextField.tsx
@@ -18,7 +18,7 @@ import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {FormContext} from './Form';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
-import React, {createContext, ForwardedRef, useCallback, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, useCallback, useRef, useState} from 'react';
 import {TextAreaContext} from './TextArea';
 import {TextContext} from './Text';
 
@@ -50,7 +50,7 @@ export interface TextFieldProps extends Omit<AriaTextFieldProps, 'label' | 'plac
   isInvalid?: boolean
 }
 
-export const TextFieldContext = createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);
+export const TextFieldContext: Context<ContextValue<TextFieldProps, HTMLDivElement>> = createContext<ContextValue<TextFieldProps, HTMLDivElement>>(null);
 
 /**
  * A text field allows a user to enter a plain text value with a keyboard.
@@ -122,4 +122,6 @@ export const TextField = /*#__PURE__*/ createHideableComponent(function TextFiel
       </Provider>
     </div>
   );
-});
+}) satisfies (props: TextFieldProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
+(props: TextFieldProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+
diff --git a/packages/react-aria-components/src/Toast.tsx b/packages/react-aria-components/src/Toast.tsx
index 391163227b8..db076b0fd28 100644
--- a/packages/react-aria-components/src/Toast.tsx
+++ b/packages/react-aria-components/src/Toast.tsx
@@ -16,13 +16,13 @@ import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, StyleRenderProps, use
 import {createPortal} from 'react-dom';
 import {forwardRefType} from '@react-types/shared';
 import {QueuedToast, ToastQueue, ToastState, useToastQueue} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, ReactNode, useContext} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, ReactNode, useContext} from 'react';
 import {TextContext} from './Text';
 import {useIsSSR} from '@react-aria/ssr';
 import {useObjectRef} from '@react-aria/utils';
 import {useUNSAFE_PortalContext} from '@react-aria/overlays';
 
-export const ToastStateContext = createContext<ToastState<any> | null>(null);
+export const ToastStateContext: Context<ToastState<any> | null> = createContext<ToastState<any> | null>(null);
 
 export interface ToastRegionRenderProps<T> {
   /** A list of all currently visible toasts. */
@@ -54,7 +54,9 @@ export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderPr
 /**
  * A ToastRegion displays one or more toast notifications.
  */
-export const ToastRegion = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastRegion<T>(props: ToastRegionProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {
+export const ToastRegion:
+  <T>(props: ToastRegionProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function ToastRegion<T>(props: ToastRegionProps<T>, ref: ForwardedRef<HTMLDivElement>): JSX.Element | null {
   let isSSR = useIsSSR();
   let state = useToastQueue(props.queue);
   let objectRef = useObjectRef(ref);
@@ -109,7 +111,9 @@ export interface ToastListProps<T> extends Omit<ToastRegionProps<T>, 'queue' | '
   children: (renderProps: {toast: QueuedToast<T>}) => ReactElement
 }
 
-export const ToastList = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToastList<T>(props: ToastListProps<T>, ref: ForwardedRef<HTMLOListElement>) {
+export const ToastList:
+  <T>(props: ToastListProps<T> & React.RefAttributes<HTMLOListElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function ToastList<T>(props: ToastListProps<T>, ref: ForwardedRef<HTMLOListElement>) {
   let state = useContext(ToastStateContext)!;
   let {hoverProps, isHovered} = useHover({});
   let renderProps = useRenderProps({
@@ -157,7 +161,9 @@ export interface ToastProps<T> extends AriaToastProps<T>, RenderProps<ToastRende
 /**
  * A Toast displays a brief, temporary notification of actions, errors, or other events in an application.
  */
-export const Toast = /*#__PURE__*/ (forwardRef as forwardRefType)(function Toast<T>(props: ToastProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const Toast:
+  <T>(props: ToastProps<T> & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Toast<T>(props: ToastProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   let state = useContext(ToastStateContext)!;
   let objectRef = useObjectRef(ref);
   let {toastProps, contentProps, titleProps, descriptionProps, closeButtonProps} = useToast(
@@ -207,12 +213,14 @@ export const Toast = /*#__PURE__*/ (forwardRef as forwardRefType)(function Toast
   );
 });
 
-export const ToastContentContext = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>>({});
+export const ToastContentContext: Context<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>> = createContext<ContextValue<HTMLAttributes<HTMLElement>, HTMLDivElement>>({});
 
 /**
  * ToastContent wraps the main content of a toast notification.
  */
-export const ToastContent = /*#__PURE__*/ forwardRef(function ToastContent(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLDivElement>) {
+export const ToastContent:
+  React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLElement> & React.RefAttributes<HTMLDivElement>> =
+/*#__PURE__*/ forwardRef(function ToastContent(props: HTMLAttributes<HTMLElement>, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ToastContentContext);
   return (
     <div className="react-aria-ToastContent" {...props} ref={ref}>
diff --git a/packages/react-aria-components/src/ToggleButton.tsx b/packages/react-aria-components/src/ToggleButton.tsx
index 3361ccf73d8..a9baee5131e 100644
--- a/packages/react-aria-components/src/ToggleButton.tsx
+++ b/packages/react-aria-components/src/ToggleButton.tsx
@@ -14,7 +14,7 @@ import {AriaToggleButtonProps, HoverEvents, mergeProps, useFocusRing, useHover,
 import {ButtonRenderProps} from './Button';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {forwardRefType, Key} from '@react-types/shared';
-import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {ToggleGroupStateContext} from './ToggleButtonGroup';
 import {ToggleState, useToggleState} from 'react-stately';
 
@@ -35,12 +35,14 @@ export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children
   id?: Key
 }
 
-export const ToggleButtonContext = createContext<ContextValue<ToggleButtonProps, HTMLButtonElement>>({});
+export const ToggleButtonContext: Context<ContextValue<ToggleButtonProps, HTMLButtonElement>> = createContext<ContextValue<ToggleButtonProps, HTMLButtonElement>>({});
 
 /**
  * A toggle button allows a user to toggle a selection on or off, for example switching between two states or modes.
  */
-export const ToggleButton = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
+export const ToggleButton:
+  (props: ToggleButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function ToggleButton(props: ToggleButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
   [props, ref] = useContextProps(props, ref, ToggleButtonContext);
   let groupState = useContext(ToggleGroupStateContext);
   let state = useToggleState(groupState && props.id != null ? {
diff --git a/packages/react-aria-components/src/ToggleButtonGroup.tsx b/packages/react-aria-components/src/ToggleButtonGroup.tsx
index 44381b50f1c..9f787c38dfc 100644
--- a/packages/react-aria-components/src/ToggleButtonGroup.tsx
+++ b/packages/react-aria-components/src/ToggleButtonGroup.tsx
@@ -12,7 +12,7 @@
 import {AriaToggleButtonGroupProps, useToggleButtonGroup} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {forwardRefType} from '@react-types/shared';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef} from 'react';
 import {ToggleGroupState, useToggleGroupState} from 'react-stately';
 
 export interface ToggleButtonGroupRenderProps {
@@ -29,13 +29,15 @@ export interface ToggleButtonGroupRenderProps {
 
 export interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps, RenderProps<ToggleButtonGroupRenderProps>, SlotProps {}
 
-export const ToggleButtonGroupContext = createContext<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>({});
-export const ToggleGroupStateContext = createContext<ToggleGroupState | null>(null);
+export const ToggleButtonGroupContext: Context<ContextValue<ToggleButtonGroupProps, HTMLDivElement>> = createContext<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>({});
+export const ToggleGroupStateContext: Context<ToggleGroupState | null> = createContext<ToggleGroupState | null>(null);
 
 /**
  * A toggle button group allows a user to toggle multiple options, with single or multiple selection.
  */
-export const ToggleButtonGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
+export const ToggleButtonGroup:
+  (props: ToggleButtonGroupProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function ToggleButtonGroup(props: ToggleButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ToggleButtonGroupContext);
   let state = useToggleGroupState(props);
   let {groupProps} = useToggleButtonGroup(props, state, ref);
diff --git a/packages/react-aria-components/src/Toolbar.tsx b/packages/react-aria-components/src/Toolbar.tsx
index 97919a1c61b..253543bc741 100644
--- a/packages/react-aria-components/src/Toolbar.tsx
+++ b/packages/react-aria-components/src/Toolbar.tsx
@@ -14,7 +14,7 @@ import {AriaToolbarProps, useToolbar} from '@react-aria/toolbar';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {forwardRefType, Orientation} from '@react-types/shared';
-import React, {createContext, ForwardedRef, forwardRef} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef} from 'react';
 
 export interface ToolbarRenderProps {
   /**
@@ -27,13 +27,15 @@ export interface ToolbarRenderProps {
 export interface ToolbarProps extends AriaToolbarProps, SlotProps, RenderProps<ToolbarRenderProps> {
 }
 
-export const ToolbarContext = createContext<ContextValue<ToolbarProps, HTMLDivElement>>({});
+export const ToolbarContext: Context<ContextValue<ToolbarProps, HTMLDivElement>> = createContext<ContextValue<ToolbarProps, HTMLDivElement>>({});
 
 /**
  * A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes,
  * with arrow key navigation.
  */
-export const Toolbar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Toolbar(props: ToolbarProps, ref: ForwardedRef<HTMLDivElement>) {
+export const Toolbar:
+  (props: ToolbarProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Toolbar(props: ToolbarProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, ToolbarContext);
   let {toolbarProps} = useToolbar(props, ref);
   let renderProps = useRenderProps({
diff --git a/packages/react-aria-components/src/Tooltip.tsx b/packages/react-aria-components/src/Tooltip.tsx
index 48446807554..1c3b1a292c8 100644
--- a/packages/react-aria-components/src/Tooltip.tsx
+++ b/packages/react-aria-components/src/Tooltip.tsx
@@ -16,7 +16,7 @@ import {ContextValue, Provider, RenderProps, useContextProps, useRenderProps} fr
 import {FocusableProvider} from '@react-aria/focus';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
 import {useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
 
 export interface TooltipTriggerComponentProps extends TooltipTriggerProps {
@@ -73,8 +73,8 @@ export interface TooltipRenderProps {
   state: TooltipTriggerState
 }
 
-export const TooltipTriggerStateContext = createContext<TooltipTriggerState | null>(null);
-export const TooltipContext = createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);
+export const TooltipTriggerStateContext: Context<TooltipTriggerState | null> = createContext<TooltipTriggerState | null>(null);
+export const TooltipContext: Context<ContextValue<TooltipProps, HTMLDivElement>> = createContext<ContextValue<TooltipProps, HTMLDivElement>>(null);
 
 /**
  * TooltipTrigger wraps around a trigger element and a Tooltip. It handles opening and closing
@@ -102,7 +102,9 @@ export function TooltipTrigger(props: TooltipTriggerComponentProps): JSX.Element
 /**
  * A tooltip displays a description of an element on hover or focus.
  */
-export const Tooltip = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tooltip({UNSTABLE_portalContainer, ...props}: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
+export const Tooltip:
+  (props: TooltipProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Tooltip({UNSTABLE_portalContainer, ...props}: TooltipProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TooltipContext);
   let contextState = useContext(TooltipTriggerStateContext);
   let localState = useTooltipTriggerState(props);
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index e02ec0a2b9e..fbf55a1818f 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -21,7 +21,7 @@ import {DragAndDropContext, DropIndicatorContext, useDndPersistedKeys, useRender
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, Node, SelectionBehavior, TreeState, useTreeState} from 'react-stately';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
-import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
+import React, {Context, createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {TreeDropTargetDelegate} from './TreeDropTargetDelegate';
 import {useControlledState} from '@react-stately/utils';
 
@@ -147,14 +147,16 @@ export interface TreeProps<T> extends Omit<AriaTreeProps<T>, 'children'>, Multip
 }
 
 
-export const TreeContext = createContext<ContextValue<TreeProps<any>, HTMLDivElement>>(null);
-export const TreeStateContext = createContext<TreeState<any> | null>(null);
+export const TreeContext: Context<ContextValue<TreeProps<any>, HTMLDivElement>> = createContext<ContextValue<TreeProps<any>, HTMLDivElement>>(null);
+export const TreeStateContext: Context<TreeState<any> | null> = createContext<TreeState<any> | null>(null);
 
 /**
  * A tree provides users with a way to navigate nested hierarchical information, with support for keyboard navigation
  * and selection.
  */
-export const Tree = /*#__PURE__*/ (forwardRef as forwardRefType)(function Tree<T extends object>(props: TreeProps<T>, ref: ForwardedRef<HTMLDivElement>) {
+export const Tree:
+  <T extends object>(props: TreeProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ (forwardRef as forwardRefType)(function Tree<T extends object>(props: TreeProps<T>, ref: ForwardedRef<HTMLDivElement>) {
   // Render the portal first so that we have the collection by the time we render the DOM in SSR.
   [props, ref] = useContextProps(props, ref, TreeContext);
 
@@ -457,9 +459,10 @@ export const TreeItemContent = /*#__PURE__*/ createLeafComponent('content', func
       {renderProps.children}
     </CollectionRendererContext.Provider>
   );
-});
+}) satisfies (props: TreeItemContentProps & React.RefAttributes<object>) => React.ReactElement | null as
+(props: TreeItemContentProps & React.RefAttributes<object>) => React.ReactElement | null;
 
-export const TreeItemContentContext = createContext<TreeItemContentRenderProps | null>(null);
+export const TreeItemContentContext: Context<TreeItemContentRenderProps | null> = createContext<TreeItemContentRenderProps | null>(null);
 
 export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRenderProps>, LinkDOMProps, HoverEvents, Pick<AriaTreeItemOptions, 'hasChildItems'> {
   /** The unique id of the tree row. */
@@ -693,7 +696,9 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
       </div>
     </>
   );
-});
+}) satisfies <T extends object>(props: TreeItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
+<T extends object>(props: TreeItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+
 
 export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
   /**
@@ -705,7 +710,7 @@ export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
 
 export interface TreeLoaderProps extends RenderProps<UNSTABLE_TreeLoadingIndicatorRenderProps>, StyleRenderProps<UNSTABLE_TreeLoadingIndicatorRenderProps> {}
 
-export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', function TreeLoader<T extends object>(props: TreeLoaderProps,  ref: ForwardedRef<HTMLDivElement>, item: Node<T>) {
+export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', function TreeLoader(props: TreeLoaderProps,  ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(TreeStateContext)!;
   // This loader row is is non-interactable, but we want the same aria props calculated as a typical row
   // @ts-ignore
@@ -732,7 +737,7 @@ export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', funct
     <>
       <div
         role="row"
-        ref={ref}
+        ref={ref as ForwardedRef<HTMLDivElement>}
         {...mergeProps(filterDOMProps(props as any), ariaProps)}
         {...renderProps}
         data-level={level}>
@@ -742,7 +747,9 @@ export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', funct
       </div>
     </>
   );
-});
+}) satisfies (props: TreeLoaderProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
+(props: TreeLoaderProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+
 
 function convertExpanded(expanded: 'all' | Iterable<Key>): 'all' | Set<Key> {
   if (!expanded) {
diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx
index 9eb060549a9..a88b7c2d063 100644
--- a/packages/react-aria-components/src/utils.tsx
+++ b/packages/react-aria-components/src/utils.tsx
@@ -14,7 +14,7 @@ import {AriaLabelingProps, RefObject,  DOMProps as SharedDOMProps} from '@react-
 import {mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';
 import React, {Context, CSSProperties, ForwardedRef, JSX, ReactNode, RefCallback, UIEvent, useCallback, useContext, useMemo, useRef, useState} from 'react';
 
-export const DEFAULT_SLOT = Symbol('default');
+export const DEFAULT_SLOT: symbol = Symbol('default');
 
 interface SlottedValue<T> {
   slots?: Record<string | symbol, T>
diff --git a/packages/react-aria-components/stories/Autocomplete.stories.tsx b/packages/react-aria-components/stories/Autocomplete.stories.tsx
index 4c299fe80a0..0360be90f6f 100644
--- a/packages/react-aria-components/stories/Autocomplete.stories.tsx
+++ b/packages/react-aria-components/stories/Autocomplete.stories.tsx
@@ -12,6 +12,7 @@
 
 import {action} from '@storybook/addon-actions';
 import {Autocomplete, Button, Collection, DialogTrigger, Header, Input, Keyboard, Label, ListBox, ListBoxSection, ListLayout, Menu, MenuItem, MenuSection, MenuTrigger, Popover, SearchField, Select, SelectValue, Separator, SubmenuTrigger, Text, TextField, Virtualizer} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {MyListBoxItem, MyMenuItem} from './utils';
 import React from 'react';
 import styles from '../example/index.css';
@@ -20,8 +21,9 @@ import {useFilter} from 'react-aria';
 
 export default {
   title: 'React Aria Components',
+  component: Autocomplete,
   args: {
-    onAction: action('onAction'),
+    onAction: action('onAction') as () => void,
     selectionMode: 'multiple',
     escapeKeyBehavior: 'clearSelection'
   },
@@ -38,14 +40,18 @@ export default {
     },
     selectionMode: {
       control: 'radio',
-      options: ['none', 'single', 'multiple']
+      options: ['none', 'single', 'multiple'] as const
     },
     escapeKeyBehavior: {
       control: 'radio',
-      options: ['clearSelection', 'none']
+      options: ['clearSelection', 'none'] as const
     }
   }
-};
+} as ComponentMeta<typeof Autocomplete>;
+
+export type AutocompleteStory = ComponentStoryObj<typeof Autocomplete>;
+export type MenuStory = ComponentStoryObj<typeof Menu>;
+export type ListBoxStory = ComponentStoryObj<typeof ListBox>;
 
 let StaticMenu = (props) => {
   return (
@@ -112,7 +118,7 @@ function AutocompleteWrapper(props) {
   );
 }
 
-export const AutocompleteExample = {
+export const AutocompleteExample: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper>
@@ -130,7 +136,7 @@ export const AutocompleteExample = {
   name: 'Autocomplete complex static with textfield'
 };
 
-export const AutocompleteSearchfield = {
+export const AutocompleteSearchfield: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper defaultInputValue="Ba">
@@ -288,7 +294,7 @@ let dynamicRenderFuncSections = (item: ItemNode) => {
   }
 };
 
-export const AutocompleteMenuDynamic = {
+export const AutocompleteMenuDynamic: AutocompleteStory = {
   render: (args) => {
     return (
       <>
@@ -312,7 +318,7 @@ export const AutocompleteMenuDynamic = {
   name: 'Autocomplete, dynamic menu'
 };
 
-export const AutocompleteOnActionOnMenuItems = {
+export const AutocompleteOnActionOnMenuItems: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper>
@@ -341,7 +347,7 @@ interface AutocompleteItem {
 
 let items: AutocompleteItem[] = [{id: '1', name: 'Foo'}, {id: '2', name: 'Bar'}, {id: '3', name: 'Baz'}];
 
-export const AutocompleteDisabledKeys = {
+export const AutocompleteDisabledKeys: AutocompleteStory = {
   render: (args) => {
     return (
       <AutocompleteWrapper>
@@ -361,7 +367,7 @@ export const AutocompleteDisabledKeys = {
   name: 'Autocomplete, disabled key'
 };
 
-const AsyncExample = (args) => {
+const AsyncExample = (args: any): React.ReactElement => {
   let list = useAsyncList<AutocompleteItem>({
     async load({filterText}) {
       let json = await new Promise(resolve => {
@@ -412,7 +418,7 @@ const AsyncExample = (args) => {
   );
 };
 
-export const AutocompleteAsyncLoadingExample = {
+export const AutocompleteAsyncLoadingExample: ComponentStoryObj<typeof AsyncExample> = {
   render: (args) => {
     return <AsyncExample {...args} />;
   },
@@ -444,14 +450,14 @@ const CaseSensitiveFilter = (args) => {
   );
 };
 
-export const AutocompleteCaseSensitive = {
+export const AutocompleteCaseSensitive: AutocompleteStory = {
   render: (args) => {
     return <CaseSensitiveFilter {...args} />;
   },
   name: 'Autocomplete, case sensitive filter'
 };
 
-export const AutocompleteWithListbox = {
+export const AutocompleteWithListbox: AutocompleteStory = {
   render: (args) => {
     return (
       <DialogTrigger>
@@ -528,7 +534,7 @@ function VirtualizedListBox(props) {
   );
 }
 
-export const AutocompleteWithVirtualizedListbox = {
+export const AutocompleteWithVirtualizedListbox: AutocompleteStory = {
   render: (args) => {
     return (
       <DialogTrigger>
@@ -614,7 +620,7 @@ function ShellExample() {
   );
 }
 
-export const AutocompleteInPopover = {
+export const AutocompleteInPopover: MenuStory = {
   render: () => {
     return (
       <MenuTrigger>
@@ -659,7 +665,7 @@ export const AutocompleteInPopover = {
   }
 };
 
-export const AutocompleteInPopoverDialogTrigger = {
+export const AutocompleteInPopoverDialogTrigger: MenuStory = {
   render: () => {
     return (
       <DialogTrigger>
@@ -770,7 +776,7 @@ const MyMenu2 = () => {
   );
 };
 
-export function AutocompleteWithExtraButtons() {
+export function AutocompleteWithExtraButtons(): React.ReactElement {
   return (
     <div>
       <input />
@@ -786,7 +792,7 @@ export function AutocompleteWithExtraButtons() {
 // TODO: note that Space is used to select an item in a multiselect menu but that is also reserved for the
 // autocomplete input field. Should we add logic to allow Space to select menu items when focus is in the Menu
 // or is that a rare/unlikely use case for menus in general?
-export const AutocompleteMenuInPopoverDialogTrigger = {
+export const AutocompleteMenuInPopoverDialogTrigger: MenuStory = {
   render: (args) => {
     return (
       <DialogTrigger>
@@ -830,7 +836,7 @@ export const AutocompleteMenuInPopoverDialogTrigger = {
 
 let manyItems = [...Array(100)].map((_, i) => ({id: i, name: `Item ${i}`}));
 
-export const AutocompleteSelect = () => (
+export const AutocompleteSelect = (): React.ReactElement => (
   <Select style={{marginBottom: 40}}>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
diff --git a/packages/react-aria-components/stories/Breadcrumbs.stories.tsx b/packages/react-aria-components/stories/Breadcrumbs.stories.tsx
index 5406b8d281c..d4db0df804d 100644
--- a/packages/react-aria-components/stories/Breadcrumbs.stories.tsx
+++ b/packages/react-aria-components/stories/Breadcrumbs.stories.tsx
@@ -11,26 +11,31 @@
  */
 
 import {Breadcrumb, Breadcrumbs, Link} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import React from 'react';
 
 export default {
   title: 'React Aria Components',
   component: Breadcrumbs
-};
+} as ComponentMeta<typeof Breadcrumbs>;
+
+export type BreadcrumbsStory = ComponentStoryObj<typeof Breadcrumbs>;
 
-export const BreadcrumbsExample = (args: any) => (
-  <Breadcrumbs {...args}>
-    <Breadcrumb>
-      <Link href="/">Home</Link>
-    </Breadcrumb>
-    <Breadcrumb>
-      <Link href="/react-aria">React Aria</Link>
-    </Breadcrumb>
-    <Breadcrumb>
-      <Link href="/react-aria">Breadcrumbs</Link>
-    </Breadcrumb>
-  </Breadcrumbs>
-);
+export const BreadcrumbsExample: BreadcrumbsStory = {
+  render: (args: any) => (
+    <Breadcrumbs {...args}>
+      <Breadcrumb>
+        <Link href="/">Home</Link>
+      </Breadcrumb>
+      <Breadcrumb>
+        <Link href="/react-aria">React Aria</Link>
+      </Breadcrumb>
+      <Breadcrumb>
+        <Link href="/react-aria">Breadcrumbs</Link>
+      </Breadcrumb>
+    </Breadcrumbs>
+  )
+};
 
 interface ItemValue {
   id: string,
@@ -42,12 +47,14 @@ let items: Array<ItemValue> = [
   {id: 'Breadcrumbs', url: '/react-aria/breadcrumbs'}
 ];
 
-export const DynamicBreadcrumbsExample = (args: any) => (
-  <Breadcrumbs {...args} items={items}>
-    {(item: ItemValue) => (
-      <Breadcrumb>
-        <Link href={item.url}>{item.id}</Link>
-      </Breadcrumb>
-    )}
-  </Breadcrumbs>
-);
+export const DynamicBreadcrumbsExample: BreadcrumbsStory = {
+  render: (args: any) => (
+    <Breadcrumbs {...args} items={items}>
+      {(item: ItemValue) => (
+        <Breadcrumb>
+          <Link href={item.url}>{item.id}</Link>
+        </Breadcrumb>
+      )}
+    </Breadcrumbs>
+  )
+};
diff --git a/packages/react-aria-components/stories/Button.stories.tsx b/packages/react-aria-components/stories/Button.stories.tsx
index 15b6642edce..6649b61963f 100644
--- a/packages/react-aria-components/stories/Button.stories.tsx
+++ b/packages/react-aria-components/stories/Button.stories.tsx
@@ -12,22 +12,26 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button, ProgressBar, Text} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {mergeProps} from '@react-aria/utils';
 import React, {useEffect, useRef, useState} from 'react';
 import * as styles from './button-ripple.css';
 import * as styles2 from './button-pending.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Button
+} as ComponentMeta<typeof Button>;
 
-export const ButtonExample = () => {
-  return (
+export type ButtonStory = ComponentStoryObj<typeof Button>;
+
+export const ButtonExample: ButtonStory = {
+  render: () => (
     <Button data-testid="button-example" onPress={action('onPress')} onClick={action('onClick')}>Press me</Button>
-  );
+  )
 };
 
-export const PendingButton = {
+export const PendingButton: ButtonStory = {
   render: (args) => <PendingButtonExample {...args} />,
   args: {
     children: 'Press me'
@@ -79,10 +83,10 @@ function PendingButtonExample(props) {
   );
 }
 
-export const RippleButtonExample = () => {
-  return (
+export const RippleButtonExample: ButtonStory = {
+  render: () => (
     <RippleButton data-testid="button-example">Press me</RippleButton>
-  );
+  )
 };
 
 function RippleButton(props) {
@@ -148,7 +152,7 @@ function ButtonPerformanceExample() {
   );
 }
 
-export const ButtonPerformance = {
+export const ButtonPerformance: ButtonStory = {
   render: (args) => <ButtonPerformanceExample {...args} />,
   parameters: {
     description: {
diff --git a/packages/react-aria-components/stories/Calendar.stories.tsx b/packages/react-aria-components/stories/Calendar.stories.tsx
index e8f0b2158f1..728ba099c7d 100644
--- a/packages/react-aria-components/stories/Calendar.stories.tsx
+++ b/packages/react-aria-components/stories/Calendar.stories.tsx
@@ -11,23 +11,28 @@
  */
 
 import {Button, Calendar, CalendarCell, CalendarGrid, CalendarStateContext, Heading, RangeCalendar} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import React, {useContext} from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Calendar
+} as ComponentMeta<typeof Calendar>;
+
+export type CalendarStory = ComponentStoryObj<typeof Calendar>;
+
 
 function Footer() {
   const state = useContext(CalendarStateContext);
   const setValue = state?.setValue;
-  
+
   return (
     <div>
-      <Button 
-        slot={null} 
+      <Button
+        slot={null}
         className="reset-button"
         onPress={() => {
-          // reset value 
+          // reset value
           setValue?.(null);
         }}>
         Reset value
@@ -36,60 +41,68 @@ function Footer() {
   );
 }
 
-export const CalendarExample = () => (
-  <Calendar style={{width: 220}}>
-    <div style={{display: 'flex', alignItems: 'center'}}>
-      <Button slot="previous">&lt;</Button>
-      <Heading style={{flex: 1, textAlign: 'center'}} />
-      <Button slot="next">&gt;</Button>
-    </div>
-    <CalendarGrid style={{width: '100%'}}>
-      {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
-    </CalendarGrid>
-  </Calendar>
-);
-
-export const CalendarResetValue = () => (
-  <Calendar style={{width: 220}}>
-    <div style={{display: 'flex', alignItems: 'center'}}>
-      <Button slot="previous">&lt;</Button>
-      <Heading style={{flex: 1, textAlign: 'center'}} />
-      <Button slot="next">&gt;</Button>
-    </div>
-    <CalendarGrid style={{width: '100%'}}>
-      {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
-    </CalendarGrid>
-    <Footer />
-  </Calendar>
-);
-
-export const CalendarMultiMonth = () => (
-  <Calendar style={{width: 500}} visibleDuration={{months: 2}}>
-    <div style={{display: 'flex', alignItems: 'center'}}>
-      <Button slot="previous">&lt;</Button>
-      <Heading style={{flex: 1, textAlign: 'center'}} />
-      <Button slot="next">&gt;</Button>
-    </div>
-    <div style={{display: 'flex', gap: 20}}>
-      <CalendarGrid style={{flex: 1}}>
+export const CalendarExample: CalendarStory = {
+  render: () => (
+    <Calendar style={{width: 220}}>
+      <div style={{display: 'flex', alignItems: 'center'}}>
+        <Button slot="previous">&lt;</Button>
+        <Heading style={{flex: 1, textAlign: 'center'}} />
+        <Button slot="next">&gt;</Button>
+      </div>
+      <CalendarGrid style={{width: '100%'}}>
         {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
       </CalendarGrid>
-      <CalendarGrid style={{flex: 1}} offset={{months: 1}}>
+    </Calendar>
+  )
+};
+
+export const CalendarResetValue: CalendarStory = {
+  render: () => (
+    <Calendar style={{width: 220}}>
+      <div style={{display: 'flex', alignItems: 'center'}}>
+        <Button slot="previous">&lt;</Button>
+        <Heading style={{flex: 1, textAlign: 'center'}} />
+        <Button slot="next">&gt;</Button>
+      </div>
+      <CalendarGrid style={{width: '100%'}}>
         {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
       </CalendarGrid>
-    </div>
-  </Calendar>
-);
+      <Footer />
+    </Calendar>
+  )
+};
 
-export const RangeCalendarExample = () => (
-  <RangeCalendar style={{width: 220}}>
-    <div style={{display: 'flex', alignItems: 'center'}}>
-      <Button slot="previous">&lt;</Button>
-      <Heading style={{flex: 1, textAlign: 'center'}} />
-      <Button slot="next">&gt;</Button>
-    </div>
-    <CalendarGrid style={{width: '100%'}}>
-      {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
-    </CalendarGrid>
-  </RangeCalendar>
-);
+export const CalendarMultiMonth: CalendarStory = {
+  render: () => (
+    <Calendar style={{width: 500}} visibleDuration={{months: 2}}>
+      <div style={{display: 'flex', alignItems: 'center'}}>
+        <Button slot="previous">&lt;</Button>
+        <Heading style={{flex: 1, textAlign: 'center'}} />
+        <Button slot="next">&gt;</Button>
+      </div>
+      <div style={{display: 'flex', gap: 20}}>
+        <CalendarGrid style={{flex: 1}}>
+          {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+        </CalendarGrid>
+        <CalendarGrid style={{flex: 1}} offset={{months: 1}}>
+          {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+        </CalendarGrid>
+      </div>
+    </Calendar>
+  )
+};
+
+export const RangeCalendarExample: CalendarStory = {
+  render: () => (
+    <RangeCalendar style={{width: 220}}>
+      <div style={{display: 'flex', alignItems: 'center'}}>
+        <Button slot="previous">&lt;</Button>
+        <Heading style={{flex: 1, textAlign: 'center'}} />
+        <Button slot="next">&gt;</Button>
+      </div>
+      <CalendarGrid style={{width: '100%'}}>
+        {date => <CalendarCell date={date} style={({isSelected, isOutsideMonth}) => ({display: isOutsideMonth ? 'none' : '', textAlign: 'center', cursor: 'default', background: isSelected ? 'blue' : ''})} />}
+      </CalendarGrid>
+    </RangeCalendar>
+  )
+};
diff --git a/packages/react-aria-components/stories/Checkbox.stories.tsx b/packages/react-aria-components/stories/Checkbox.stories.tsx
index 35e66678a4f..8fa061e5a58 100644
--- a/packages/react-aria-components/stories/Checkbox.stories.tsx
+++ b/packages/react-aria-components/stories/Checkbox.stories.tsx
@@ -1,14 +1,18 @@
 import {Checkbox} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import React from 'react';
 import './styles.css';
 
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Checkbox
+} as ComponentMeta<typeof Checkbox>;
+
+export type CheckboxStory = ComponentStoryObj<typeof Checkbox>;
 
-export const CheckboxExample = () => {
-  return (
+export const CheckboxExample: CheckboxStory = {
+  render: () => (
     <Checkbox>
       <div className="checkbox">
         <svg viewBox="0 0 18 18" aria-hidden="true">
@@ -17,5 +21,5 @@ export const CheckboxExample = () => {
       </div>
       Unsubscribe
     </Checkbox>
-  );
+  )
 };
diff --git a/packages/react-aria-components/stories/CheckboxGroup.stories.tsx b/packages/react-aria-components/stories/CheckboxGroup.stories.tsx
index cb7f63273f4..942110b17e2 100644
--- a/packages/react-aria-components/stories/CheckboxGroup.stories.tsx
+++ b/packages/react-aria-components/stories/CheckboxGroup.stories.tsx
@@ -1,15 +1,18 @@
 import {Button, Checkbox, CheckboxGroup, FieldError, Form, Label} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import React from 'react';
 import './styles.css';
 import styles from '../example/index.css';
 
-
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: CheckboxGroup
+} as ComponentMeta<typeof CheckboxGroup>;
+
+export type CheckboxGroupStory = ComponentStoryObj<typeof CheckboxGroup>;
 
-export const CheckboxGroupExample = () => {
-  return (
+export const CheckboxGroupExample: CheckboxGroupStory = {
+  render: () => (
     <CheckboxGroup>
       <Label>Favorite sports</Label>
       <Checkbox value="soccer">
@@ -32,11 +35,11 @@ export const CheckboxGroupExample = () => {
       </Checkbox>
       <FieldError className={styles.errorMessage} />
     </CheckboxGroup>
-  );
+  )
 };
 
-export const CheckboxGroupSubmitExample = () => {
-  return (
+export const CheckboxGroupSubmitExample: CheckboxGroupStory = {
+  render: () => (
     <Form>
       <CheckboxGroup isRequired>
         <Label>Favorite sports</Label>
@@ -62,5 +65,5 @@ export const CheckboxGroupSubmitExample = () => {
       <Button type="submit">Submit</Button>
       <Button type="reset">Reset</Button>
     </Form>
-  );
+  )
 };
diff --git a/packages/react-aria-components/stories/ColorArea.stories.tsx b/packages/react-aria-components/stories/ColorArea.stories.tsx
index 905754099d1..ba2c252898e 100644
--- a/packages/react-aria-components/stories/ColorArea.stories.tsx
+++ b/packages/react-aria-components/stories/ColorArea.stories.tsx
@@ -10,36 +10,41 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorArea, ColorThumb} from '../src';
-import {ColorSliderExample} from './ColorSlider.stories';
+import {ColorArea, ColorAreaProps, ColorThumb} from '../src';
+import {ColorSliderExampleRender} from './ColorSlider.stories';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import {parseColor} from 'react-stately';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 
 export default {
   title: 'React Aria Components',
   decorators: [
     (Story, ctx) => {
       let args = ctx.args;
-      let [color, setColor] = useState(parseColor(args.defaultValue));
+      let [color, setColor] = useState(parseColor(args.defaultValue?.toString() ?? ''));
       let zChannel = color.getColorChannels().find(c => c !== args.xChannel && c !== args.yChannel);
       return (
         <div style={{display: 'flex', flexDirection: 'column', gap: 8}}>
           {Story({...ctx, args: {...ctx.args, value: color, onChange: setColor}})}
-          <ColorSliderExample channel={zChannel} value={color} onChange={setColor} />
+          <ColorSliderExampleRender channel={zChannel!} value={color} onChange={setColor} />
         </div>
       );
     }
-  ]
-};
+  ],
+  component: ColorArea,
+  excludeStories: ['ColorAreaExampleRender']
+} as ComponentMeta<typeof ColorArea>;
+
+export type ColorAreaStory = ComponentStoryObj<typeof ColorArea>;
 
 const SIZE = 192;
 const FOCUSED_THUMB_SIZE = 28;
 const THUMB_SIZE = 20;
 const BORDER_RADIUS = 4;
 
-export const ColorAreaExample = (args) => (
+export const ColorAreaExampleRender = (props: ColorAreaProps): JSX.Element => (
   <ColorArea
-    {...args}
+    {...props}
     style={({isDisabled}) => ({
       width: SIZE,
       height: SIZE,
@@ -62,57 +67,61 @@ export const ColorAreaExample = (args) => (
   </ColorArea>
 );
 
-ColorAreaExample.args = {
-  defaultValue: 'rgb(100, 149, 237)',
-  xChannel: 'red',
-  yChannel: 'green'
-};
-
-ColorAreaExample.argTypes = {
-  xChannel: {
-    control: 'select',
-    options: ['red', 'green', 'blue']
+export const ColorAreaExample: ColorAreaStory = {
+  render: (args) => (
+    <ColorAreaExampleRender {...args} />
+  ),
+  args: {
+    defaultValue: 'rgb(100, 149, 237)',
+    xChannel: 'red',
+    yChannel: 'green'
   },
-  yChannel: {
-    control: 'select',
-    options: ['red', 'green', 'blue']
+  argTypes: {
+    xChannel: {
+      control: 'select',
+      options: ['red', 'green', 'blue']
+    },
+    yChannel: {
+      control: 'select',
+      options: ['red', 'green', 'blue']
+    }
   }
 };
 
-export const ColorAreaHSL = (args) => <ColorAreaExample {...args} />;
-
-ColorAreaHSL.args = {
-  defaultValue: 'hsl(219, 79%, 66%)',
-  xChannel: 'hue',
-  yChannel: 'saturation'
-};
-
-ColorAreaHSL.argTypes = {
-  xChannel: {
-    control: 'select',
-    options: ['hue', 'saturation', 'lightness']
+export const ColorAreaHSL: ColorAreaStory = {
+  render: ColorAreaExample.render,
+  args: {
+    defaultValue: 'hsl(219, 79%, 66%)',
+    xChannel: 'hue',
+    yChannel: 'saturation'
   },
-  yChannel: {
-    control: 'select',
-    options: ['hue', 'saturation', 'lightness']
+  argTypes: {
+    xChannel: {
+      control: 'select',
+      options: ['hue', 'saturation', 'lightness']
+    },
+    yChannel: {
+      control: 'select',
+      options: ['hue', 'saturation', 'lightness']
+    }
   }
 };
 
-export const ColorAreaHSB = (args) => <ColorAreaExample {...args} />;
-
-ColorAreaHSB.args = {
-  defaultValue: 'hsb(219, 79%, 66%)',
-  xChannel: 'hue',
-  yChannel: 'saturation'
-};
-
-ColorAreaHSB.argTypes = {
-  xChannel: {
-    control: 'select',
-    options: ['hue', 'saturation', 'brightness']
+export const ColorAreaHSB: ColorAreaStory = {
+  render: ColorAreaExample.render,
+  args: {
+    defaultValue: 'hsb(219, 79%, 66%)',
+    xChannel: 'hue',
+    yChannel: 'saturation'
   },
-  yChannel: {
-    control: 'select',
-    options: ['hue', 'saturation', 'brightness']
+  argTypes: {
+    xChannel: {
+      control: 'select',
+      options: ['hue', 'saturation', 'brightness']
+    },
+    yChannel: {
+      control: 'select',
+      options: ['hue', 'saturation', 'brightness']
+    }
   }
 };
diff --git a/packages/react-aria-components/stories/ColorField.stories.tsx b/packages/react-aria-components/stories/ColorField.stories.tsx
index 7111aa06cfd..84094a3145e 100644
--- a/packages/react-aria-components/stories/ColorField.stories.tsx
+++ b/packages/react-aria-components/stories/ColorField.stories.tsx
@@ -10,7 +10,8 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorField, Input, Label} from 'react-aria-components';
+import {ColorField, ColorFieldProps, Input, Label} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import React from 'react';
 
 export default {
@@ -24,17 +25,22 @@ export default {
       control: 'select',
       options: [null, 'red', 'green', 'blue', 'hue', 'saturation', 'lightness', 'brightness']
     }
-  }
-};
+  },
+  component: ColorField
+} as ComponentMeta<typeof ColorField>;
 
-export const ColorFieldExample = (args) => (
-  <ColorField {...args}>
-    <Label>{args.label}</Label>
-    <Input style={{display: 'block'}} />
-  </ColorField>
-);
+;
+export type ColorFieldStory = ComponentStoryObj<(props: ColorFieldProps & {label: string}) => ReturnType<typeof ColorField>>;
 
-ColorFieldExample.args = {
-  label: 'Test',
-  defaultValue: '#f00'
+export const ColorFieldExample: ColorFieldStory = {
+  render: (args) => (
+    <ColorField {...args}>
+      <Label>{args.label}</Label>
+      <Input style={{display: 'block'}} />
+    </ColorField>
+  ),
+  args: {
+    label: 'Test',
+    defaultValue: '#f00'
+  }
 };
diff --git a/packages/react-aria-components/stories/ColorPicker.stories.tsx b/packages/react-aria-components/stories/ColorPicker.stories.tsx
index dba4bcd7767..0bb10e19a1a 100644
--- a/packages/react-aria-components/stories/ColorPicker.stories.tsx
+++ b/packages/react-aria-components/stories/ColorPicker.stories.tsx
@@ -11,25 +11,29 @@
  */
 
 import {Button, ColorSpace, ColorSwatchPicker, ColorSwatchPickerItem, Dialog, DialogTrigger, getColorChannels, Input, Label, Popover} from '../src';
-import {ColorAreaExample} from './ColorArea.stories';
+import {ColorAreaExampleRender} from './ColorArea.stories';
 import {ColorField} from '../src/ColorField';
 import {ColorPicker} from '../src/ColorPicker';
-import {ColorSliderExample} from './ColorSlider.stories';
-import {ColorSwatchExample} from './ColorSwatch.stories';
+import {ColorSliderExampleRender} from './ColorSlider.stories';
+import {ColorSwatchExampleRender} from './ColorSwatch.stories';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import React, {useState} from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: ColorPicker
+} as ComponentMeta<typeof ColorPicker>;
+
+export type ColorPickerStory = ComponentStoryObj<typeof ColorPicker>;
 
-export const ColorPickerExample = (args) => {
+function ColorPickerExampleRender(args) {
   let [format, setFormat] = useState<ColorSpace | 'hex'>('hex');
   return (
     <ColorPicker {...args} defaultValue="rgb(255, 0, 0)">
       <ColorPickerTrigger>
-        <ColorAreaExample colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
-        <ColorSliderExample colorSpace="hsb" channel="hue" />
-        <ColorSliderExample channel="alpha" />
+        <ColorAreaExampleRender colorSpace="hsb" xChannel="saturation" yChannel="brightness" />
+        <ColorSliderExampleRender colorSpace="hsb" channel="hue" />
+        <ColorSliderExampleRender channel="alpha" />
         <label>
           {'Format: '}
           <select value={format} onChange={e => setFormat(e.target.value as ColorSpace | 'hex')}>
@@ -69,7 +73,7 @@ export const ColorPickerExample = (args) => {
                 position: 'relative'
               })}>
               {({isSelected}) => (<>
-                <ColorSwatchExample />
+                <ColorSwatchExampleRender />
                 {isSelected && (
                   <div
                     style={{
@@ -88,9 +92,13 @@ export const ColorPickerExample = (args) => {
       </ColorPickerTrigger>
     </ColorPicker>
   );
+}
+
+export const ColorPickerExample: ColorPickerStory = {
+  render: (args) => <ColorPickerExampleRender {...args} />
 };
 
-export const ColorPickerSliders = (args) => {
+function ColorPickerSlidersRender(args) {
   let [colorSpace, setColorSpace] = useState<ColorSpace>('rgb');
   return (
     <ColorPicker {...args} defaultValue="rgb(255, 0, 0)">
@@ -104,19 +112,23 @@ export const ColorPickerSliders = (args) => {
               <option>hsb</option>
             </select>
           </label>
-          {color.toFormat(colorSpace).getColorChannels().map(c => <ColorSliderExample key={c} colorSpace={colorSpace} channel={c} />)}
-          <ColorSliderExample channel="alpha" />
+          {color.toFormat(colorSpace).getColorChannels().map(c => <ColorSliderExampleRender key={c} colorSpace={colorSpace} channel={c} />)}
+          <ColorSliderExampleRender channel="alpha" />
         </ColorPickerTrigger>
       )}
     </ColorPicker>
   );
+}
+
+export const ColorPickerSliders: ColorPickerStory = {
+  render: (args) => <ColorPickerSlidersRender {...args} />
 };
 
 function ColorPickerTrigger({children}) {
   return (
     <DialogTrigger>
       <Button style={{background: 'none', border: 'none', padding: 0}}>
-        <ColorSwatchExample aria-label="Color picker" />
+        <ColorSwatchExampleRender aria-label="Color picker" />
       </Button>
       <Popover
         placement="bottom start"
diff --git a/packages/react-aria-components/stories/ColorSlider.stories.tsx b/packages/react-aria-components/stories/ColorSlider.stories.tsx
index 57c7e35893f..6291079605f 100644
--- a/packages/react-aria-components/stories/ColorSlider.stories.tsx
+++ b/packages/react-aria-components/stories/ColorSlider.stories.tsx
@@ -10,61 +10,70 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSlider, ColorThumb, Label, SliderOutput, SliderTrack} from '../src';
-import React from 'react';
+import {ColorSlider, ColorSliderProps, ColorThumb, Label, SliderOutput, SliderTrack} from '../src';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: ColorSlider,
+  excludeStories: ['ColorSliderExampleRender']
+} as ComponentMeta<typeof ColorSlider>;
+
+export type ColorSliderStory = ComponentStoryObj<typeof ColorSlider>;
 
 const TRACK_THICKNESS = 28;
 const THUMB_SIZE = 20;
 
-export const ColorSliderExample = (args) => (
-  <ColorSlider 
-    {...args}
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      alignItems: 'center',
-      width: 192
-    }}>
-    <div style={{display: 'flex', alignSelf: 'stretch', justifyContent: 'space-between'}}>
-      <Label />
-      <SliderOutput />
-    </div>
-    <SliderTrack
-      style={({defaultStyle}) => ({
-        height: TRACK_THICKNESS,
-        width: '100%',
-        borderRadius: 4,
-        background: `
-            ${defaultStyle.background},
-            repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
-      })}>
-      <ColorThumb
-        style={({isFocusVisible, color}) => ({
-          top: TRACK_THICKNESS / 2,
-          border: '2px solid white',
-          boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
-          width: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
-          height: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
-          borderRadius: '50%',
-          boxSizing: 'border-box',
-          background: color.toString()
-        })} />
-    </SliderTrack>
-  </ColorSlider>
-);
-
-ColorSliderExample.args = {
-  channel: 'hue',
-  defaultValue: 'hsl(0, 100%, 50%)'
-};
+export function ColorSliderExampleRender(args: ColorSliderProps): JSX.Element {
+  return (
+    <ColorSlider
+      {...args}
+      style={{
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        width: 192
+      }}>
+      <div style={{display: 'flex', alignSelf: 'stretch', justifyContent: 'space-between'}}>
+        <Label />
+        <SliderOutput />
+      </div>
+      <SliderTrack
+        style={({defaultStyle}) => ({
+          height: TRACK_THICKNESS,
+          width: '100%',
+          borderRadius: 4,
+          background: `
+              ${defaultStyle.background},
+              repeating-conic-gradient(#CCC 0% 25%, white 0% 50%) 50% / 16px 16px`
+        })}>
+        <ColorThumb
+          style={({isFocusVisible, color}) => ({
+            top: TRACK_THICKNESS / 2,
+            border: '2px solid white',
+            boxShadow: '0 0 0 1px black, inset 0 0 0 1px black',
+            width: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
+            height: isFocusVisible ? TRACK_THICKNESS + 4 : THUMB_SIZE,
+            borderRadius: '50%',
+            boxSizing: 'border-box',
+            background: color.toString()
+          })} />
+      </SliderTrack>
+    </ColorSlider>
+  );
+}
 
-ColorSliderExample.argTypes = {
-  channel: {
-    control: 'select',
-    options: ['hue', 'saturation', 'lightness', 'alpha']
+export const ColorSliderExample: ColorSliderStory = {
+  render: (args) => <ColorSliderExampleRender {...args} />,
+  args: {
+    channel: 'hue',
+    defaultValue: 'hsl(0, 100%, 50%)'
+  },
+  argTypes: {
+    channel: {
+      control: 'select',
+      options: ['hue', 'saturation', 'lightness', 'alpha']
+    }
   }
 };
diff --git a/packages/react-aria-components/stories/ColorSwatch.stories.tsx b/packages/react-aria-components/stories/ColorSwatch.stories.tsx
index 8ae4293c5ea..e72b9ce7b24 100644
--- a/packages/react-aria-components/stories/ColorSwatch.stories.tsx
+++ b/packages/react-aria-components/stories/ColorSwatch.stories.tsx
@@ -10,14 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
-import {ColorSwatch} from '../src/ColorSwatch';
-import React from 'react';
+import {ColorSwatch, ColorSwatchProps} from '../src/ColorSwatch';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: ColorSwatch
+} as ComponentMeta<typeof ColorSwatch>;
+
+export type ColorSwatchStory = ComponentStoryObj<typeof ColorSwatch>;
 
-export const ColorSwatchExample = (args) => (
+export const ColorSwatchExampleRender = (args: ColorSwatchProps): JSX.Element => (
   <ColorSwatch
     {...args}
     style={({color}) => ({
@@ -31,12 +35,14 @@ export const ColorSwatchExample = (args) => (
     })} />
 );
 
-ColorSwatchExample.args = {
-  color: 'rgb(255, 0, 0)'
-};
-
-ColorSwatchExample.argTypes = {
-  color: {
-    control: 'color'
+export const ColorSwatchExample: ColorSwatchStory = {
+  render: (args) => <ColorSwatchExampleRender {...args} />,
+  args: {
+    color: 'rgb(255, 0, 0)'
+  },
+  argTypes: {
+    color: {
+      control: 'color'
+    }
   }
 };
diff --git a/packages/react-aria-components/stories/ColorWheel.stories.tsx b/packages/react-aria-components/stories/ColorWheel.stories.tsx
index f3a02858c0d..4dc25530b96 100644
--- a/packages/react-aria-components/stories/ColorWheel.stories.tsx
+++ b/packages/react-aria-components/stories/ColorWheel.stories.tsx
@@ -11,18 +11,22 @@
  */
 
 import {ColorThumb, ColorWheel, ColorWheelTrack} from '../src';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: ColorWheel
+} as ComponentMeta<typeof ColorWheel>;
+
+export type ColorWheelStory = ComponentStoryFn<typeof ColorWheel>;
 
 const RADIUS = 100;
 const TRACK_THICKNESS = 28;
 const THUMB_SIZE = 20;
 
 
-export const ColorWheelExample = (args) => (
+export const ColorWheelExample: ColorWheelStory = (args) => (
   <ColorWheel {...args} outerRadius={RADIUS} innerRadius={RADIUS - TRACK_THICKNESS}>
     <ColorWheelTrack />
     <ColorThumb
diff --git a/packages/react-aria-components/stories/ComboBox.stories.tsx b/packages/react-aria-components/stories/ComboBox.stories.tsx
index b49343e41c8..e81ead8c113 100644
--- a/packages/react-aria-components/stories/ComboBox.stories.tsx
+++ b/packages/react-aria-components/stories/ComboBox.stories.tsx
@@ -11,17 +11,22 @@
  */
 
 import {Button, Collection, ComboBox, Input, Label, ListBox, ListLayout, Popover, useFilter, Virtualizer} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn, ComponentStoryObj} from '@storybook/react';
 import {LoadingSpinner, MyListBoxItem} from './utils';
-import React, {useMemo, useState} from 'react';
+import React, {JSX, useMemo, useState} from 'react';
 import styles from '../example/index.css';
 import {UNSTABLE_ListBoxLoadingSentinel} from '../src/ListBox';
 import {useAsyncList} from 'react-stately';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: ComboBox
+} as ComponentMeta<typeof ComboBox>;
+
+export type ComboBoxStory = ComponentStoryFn<typeof ComboBox>;
+export type ComboBoxStoryObj = ComponentStoryObj<typeof ComboBox>;
 
-export const ComboBoxExample = () => (
+export const ComboBoxExample: ComboBoxStory = () => (
   <ComboBox name="combo-box-example" data-testid="combo-box-example">
     <Label style={{display: 'block'}}>Test</Label>
     <div style={{display: 'flex'}}>
@@ -49,7 +54,7 @@ interface ComboBoxItem {
 }
 
 let items: ComboBoxItem[] = [{id: '1', name: 'Foo'}, {id: '2', name: 'Bar'}, {id: '3', name: 'Baz'}];
-export const ComboBoxRenderPropsStatic = () => (
+export const ComboBoxRenderPropsStatic: ComboBoxStory = () => (
   <ComboBox data-testid="combo-box-render-props-static">
     {({isOpen}) => (
       <>
@@ -72,7 +77,7 @@ export const ComboBoxRenderPropsStatic = () => (
   </ComboBox>
 );
 
-export const ComboBoxRenderPropsDefaultItems = () => (
+export const ComboBoxRenderPropsDefaultItems: ComboBoxStory = () => (
   <ComboBox defaultItems={items}>
     {({isOpen}) => (
       <>
@@ -93,7 +98,7 @@ export const ComboBoxRenderPropsDefaultItems = () => (
   </ComboBox>
 );
 
-export const ComboBoxRenderPropsItems = {
+export const ComboBoxRenderPropsItems: ComboBoxStoryObj = {
   render: () => (
     <ComboBox items={items}>
       {({isOpen}) => (
@@ -121,7 +126,7 @@ export const ComboBoxRenderPropsItems = {
   }
 };
 
-export const ComboBoxRenderPropsListBoxDynamic = () => (
+export const ComboBoxRenderPropsListBoxDynamic: ComboBoxStory = () => (
   <ComboBox>
     {({isOpen}) => (
       <>
@@ -142,7 +147,7 @@ export const ComboBoxRenderPropsListBoxDynamic = () => (
   </ComboBox>
 );
 
-export const ComboBoxAsyncLoadingExample = () => {
+export const ComboBoxAsyncLoadingExample: ComboBoxStory = () => {
   let list = useAsyncList<ComboBoxItem>({
     async load({filterText}) {
       let json = await new Promise(resolve => {
@@ -185,7 +190,7 @@ export const ComboBoxAsyncLoadingExample = () => {
   );
 };
 
-export const ComboBoxImeExample = () => (
+export const ComboBoxImeExample: ComboBoxStory = () => (
   <ComboBox>
     <Label style={{display: 'block'}}>IME Test</Label>
     <div style={{display: 'flex'}}>
@@ -211,7 +216,7 @@ export const ComboBoxImeExample = () => (
 
 let manyItems = [...Array(10000)].map((_, i) => ({id: i, name: `Item ${i}`}));
 
-export const VirtualizedComboBox = () => {
+export const VirtualizedComboBox: ComboBoxStory = () => {
   const [searchTerm, setSearchTerm] = useState('');
   const {contains} = useFilter({sensitivity: 'base'});
   const filteredItems = useMemo(() => {
@@ -253,14 +258,14 @@ interface Character {
   birth_year: number
 }
 
-export const AsyncVirtualizedDynamicCombobox = (args) => {
+const AsyncVirtualizedDynamicComboboxRender = (props: {delay: number}): JSX.Element => {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
         cursor = cursor.replace(/^http:\/\//i, 'https://');
       }
 
-      await new Promise(resolve => setTimeout(resolve, args.delay));
+      await new Promise(resolve => setTimeout(resolve, props.delay));
       let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
       let json = await res.json();
 
@@ -297,7 +302,8 @@ export const AsyncVirtualizedDynamicCombobox = (args) => {
   );
 };
 
-AsyncVirtualizedDynamicCombobox.story = {
+export const AsyncVirtualizedDynamicCombobox: ComponentStoryObj<typeof AsyncVirtualizedDynamicComboboxRender> = {
+  render: (args) => <AsyncVirtualizedDynamicComboboxRender {...args} />,
   args: {
     delay: 50
   }
diff --git a/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx b/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx
index d2cc751ab6d..efeb7d0c1eb 100644
--- a/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx
+++ b/packages/react-aria-components/stories/ComboBoxReproductions.stories.tsx
@@ -11,14 +11,19 @@
  */
 
 import {Button, ComboBox, Input, Label, ListBox, ListBoxItem, Popover} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React from 'react';
 import './combobox-reproductions.css';
 
+
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: ComboBox
+} as ComponentMeta<typeof ComboBox>;
+
+export type ComboBoxReproductionStory = ComponentStoryFn<typeof ComboBox>;
 
-export const ComboBoxReproductionExample = () => (
+export const ComboBoxReproductionExample: ComboBoxReproductionStory = () => (
   <ComboBox>
     <Label>Favorite Animal</Label>
     <div>
diff --git a/packages/react-aria-components/stories/DateField.stories.tsx b/packages/react-aria-components/stories/DateField.stories.tsx
index f056e1da964..31e010be1d7 100644
--- a/packages/react-aria-components/stories/DateField.stories.tsx
+++ b/packages/react-aria-components/stories/DateField.stories.tsx
@@ -12,6 +12,7 @@
 
 import {action} from '@storybook/addon-actions';
 import clsx from 'clsx';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import {DateField, DateInput, DateSegment, FieldError, Label} from 'react-aria-components';
 import {fromAbsolute, getLocalTimeZone, parseAbsoluteToLocal} from '@internationalized/date';
 import React from 'react';
@@ -48,14 +49,17 @@ export default {
   },
   args: {
     onChange: action('OnChange')
-  }
-};
+  },
+  component: DateField
+} as ComponentMeta<typeof DateField>;
+
+export type DateFieldStory = ComponentStoryFn<typeof DateField>;
 
-export const DateFieldExample = (props) => (
+export const DateFieldExample: DateFieldStory = (props) => (
   <DateField
     {...props}
-    minValue={props.minValue ? fromAbsolute(props.minValue, getLocalTimeZone()) : undefined}
-    maxValue={props.maxValue ? fromAbsolute(props.maxValue, getLocalTimeZone()) : undefined}
+    minValue={props.minValue ? fromAbsolute(props.minValue as unknown as number, getLocalTimeZone()) : undefined}
+    maxValue={props.maxValue ? fromAbsolute(props.maxValue as unknown as number, getLocalTimeZone()) : undefined}
     data-testid="date-field-example"
     defaultValue={parseAbsoluteToLocal('2024-01-01T01:01:00Z')}>
     <Label style={{display: 'block'}}>Date</Label>
diff --git a/packages/react-aria-components/stories/DatePicker.stories.tsx b/packages/react-aria-components/stories/DatePicker.stories.tsx
index d2fbeaf976f..34f16ad272b 100644
--- a/packages/react-aria-components/stories/DatePicker.stories.tsx
+++ b/packages/react-aria-components/stories/DatePicker.stories.tsx
@@ -12,14 +12,18 @@
 
 import {Button, Calendar, CalendarCell, CalendarGrid, DateInput, DatePicker, DateRangePicker, DateSegment, Dialog, Group, Heading, Label, Popover, RangeCalendar} from 'react-aria-components';
 import clsx from 'clsx';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: DatePicker
+} as ComponentMeta<typeof DatePicker>;
 
-export const DatePickerExample = () => (
+export type DatePickerStory = ComponentStoryFn<typeof DatePicker>;
+
+export const DatePickerExample: DatePickerStory = () => (
   <DatePicker data-testid="date-picker-example">
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex'}}>
@@ -52,7 +56,7 @@ export const DatePickerExample = () => (
   </DatePicker>
 );
 
-export const DatePickerTriggerWidthExample = () => (
+export const DatePickerTriggerWidthExample: DatePickerStory = () => (
   <DatePicker data-testid="date-picker-example">
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex', width: 300}}>
@@ -87,7 +91,7 @@ export const DatePickerTriggerWidthExample = () => (
   </DatePicker>
 );
 
-export const DateRangePickerExample = () => (
+export const DateRangePickerExample: DatePickerStory = () => (
   <DateRangePicker data-testid="date-range-picker-example">
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex'}}>
@@ -126,7 +130,7 @@ export const DateRangePickerExample = () => (
   </DateRangePicker>
 );
 
-export const DateRangePickerTriggerWidthExample = () => (
+export const DateRangePickerTriggerWidthExample: DatePickerStory = () => (
   <DateRangePicker data-testid="date-range-picker-example">
     <Label style={{display: 'block'}}>Date</Label>
     <Group style={{display: 'inline-flex', width: 300}}>
diff --git a/packages/react-aria-components/stories/Disclosure.stories.tsx b/packages/react-aria-components/stories/Disclosure.stories.tsx
index 2e95bc632fc..a1a7b8fbc79 100644
--- a/packages/react-aria-components/stories/Disclosure.stories.tsx
+++ b/packages/react-aria-components/stories/Disclosure.stories.tsx
@@ -11,6 +11,7 @@
  */
 
 import {Button, Heading} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import {Disclosure, DisclosurePanel} from '../src/Disclosure';
 import React from 'react';
 import './styles.css';
@@ -18,9 +19,11 @@ import './styles.css';
 export default {
   title: 'React Aria Components',
   component: Disclosure
-};
+} as ComponentMeta<typeof Disclosure>;
+
+export type DisclosureStory = ComponentStoryFn<typeof Disclosure>;
 
-export const DisclosureExample = (args: any) => (
+export const DisclosureExample: DisclosureStory = (args) => (
   <Disclosure {...args}>
     {({isExpanded}) => (
       <>
@@ -35,7 +38,7 @@ export const DisclosureExample = (args: any) => (
   </Disclosure>
 );
 
-export const DisclosureControlledExample = (args: any) => {
+export const DisclosureControlledExample: DisclosureStory = (args) => {
   let [isExpanded, setExpanded] = React.useState(false);
   return (
     <Disclosure {...args} isExpanded={isExpanded} onExpandedChange={setExpanded}>
diff --git a/packages/react-aria-components/stories/Dropzone.stories.tsx b/packages/react-aria-components/stories/Dropzone.stories.tsx
index 6b405581383..3fce1363d53 100644
--- a/packages/react-aria-components/stories/Dropzone.stories.tsx
+++ b/packages/react-aria-components/stories/Dropzone.stories.tsx
@@ -13,15 +13,20 @@
 import {action} from '@storybook/addon-actions';
 import {Button, DropZone, FileTrigger, Link, Text} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
+import {ComponentMeta, ComponentStoryFn, ComponentStoryObj} from '@storybook/react';
 import {FocusRing, mergeProps, useButton, useClipboard, useDrag} from 'react-aria';
 import React, {useRef} from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: DropZone
+} as ComponentMeta<typeof DropZone>;
+
+export type DropzoneStory = ComponentStoryFn<typeof DropZone>;
+export type DropzoneStoryObj = ComponentStoryObj<typeof DropZone>;
 
-export const DropzoneExampleWithFileTriggerLink = (props) => (
+export const DropzoneExampleWithFileTriggerLink: DropzoneStory = (props) => (
   <div>
     <DropZone
       {...props}
@@ -38,7 +43,7 @@ export const DropzoneExampleWithFileTriggerLink = (props) => (
   </div>
 );
 
-export const DropzoneExampleWithFileTriggerButton = (props) => (
+export const DropzoneExampleWithFileTriggerButton: DropzoneStory = (props) => (
   <div>
     <DropZone
       {...props}
@@ -53,7 +58,7 @@ export const DropzoneExampleWithFileTriggerButton = (props) => (
   </div>
 );
 
-export const DropzoneExampleWithDraggableAndFileTrigger = (props) => (
+export const DropzoneExampleWithDraggableAndFileTrigger: DropzoneStory = (props) => (
   <div>
     <Draggable />
     <DropZone
@@ -70,13 +75,12 @@ export const DropzoneExampleWithDraggableAndFileTrigger = (props) => (
   </div>
 );
 
-export const DropZoneOnlyAcceptPNGWithFileTrigger = (props) => (
+export const DropZoneOnlyAcceptPNGWithFileTrigger: DropzoneStory = (props) => (
   <div>
     <DropZone
       {...props}
       getDropOperation={(types) =>  types.has('image/png') ? 'copy' : 'cancel'}
       className={styles.dropzone}
-      onPress={action('OnPress')}
       onDrop={action('OnDrop')}
       onDropEnter={action('OnDropEnter')}
       onDropExit={action('OnDropExit')} >
@@ -87,13 +91,12 @@ export const DropZoneOnlyAcceptPNGWithFileTrigger = (props) => (
   </div>
 );
 
-export const DropZoneWithCaptureMobileOnly = (props) => (
+export const DropZoneWithCaptureMobileOnly: DropzoneStory = (props) => (
   <div>
     <DropZone
       {...props}
       getDropOperation={(types) =>  types.has('image/png') ? 'copy' : 'cancel'}
       className={styles.dropzone}
-      onPress={action('OnPress')}
       onDrop={action('OnDrop')}
       onDropEnter={action('OnDropEnter')}
       onDropExit={action('OnDropExit')} >
@@ -104,7 +107,7 @@ export const DropZoneWithCaptureMobileOnly = (props) => (
   </div>
 );
 
-export const DropzoneExampleWithDraggableObject = (props) => (
+export const DropzoneExampleWithDraggableObject: DropzoneStory = (props) => (
   <div>
     <Draggable />
     <DropZone
@@ -120,7 +123,7 @@ export const DropzoneExampleWithDraggableObject = (props) => (
   </div>
 );
 
-export const DropzoneExampleWithCopyableObject = (props) => (
+export const DropzoneExampleWithCopyableObject: DropzoneStory = (props) => (
   <div>
     <Copyable />
     <DropZone
@@ -163,7 +166,7 @@ const DropzoneWithRenderPropsExample = (props) => (
   </div>
 );
 
-export const DropzoneWithRenderProps = {
+export const DropzoneWithRenderProps: DropzoneStoryObj = {
   args: {
     isDisabled: false
   },
diff --git a/packages/react-aria-components/stories/FileTrigger.stories.tsx b/packages/react-aria-components/stories/FileTrigger.stories.tsx
index cdae7204e75..19d014de946 100644
--- a/packages/react-aria-components/stories/FileTrigger.stories.tsx
+++ b/packages/react-aria-components/stories/FileTrigger.stories.tsx
@@ -12,13 +12,17 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button, FileTrigger, Link} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: FileTrigger
+} as ComponentMeta<typeof FileTrigger>;
+
+export type FileTriggerStory = ComponentStoryFn<typeof FileTrigger>;
 
-export const FileTriggerButton = (props) => (
+export const FileTriggerButton: FileTriggerStory = (props) => (
   <FileTrigger
     onSelect={action('onSelect')}
     data-testid="filetrigger-example"
@@ -27,7 +31,7 @@ export const FileTriggerButton = (props) => (
   </FileTrigger>
 );
 
-export const FileTriggerDirectories = (props) => {
+export const FileTriggerDirectories: FileTriggerStory = (props) => {
   let [files, setFiles] = React.useState<string[]>([]);
 
   return (
@@ -52,7 +56,7 @@ export const FileTriggerDirectories = (props) => {
   );
 };
 
-export const FileTriggerLinkAllowsMultiple = (props) => (
+export const FileTriggerLinkAllowsMultiple: FileTriggerStory = (props) => (
   <FileTrigger
     {...props}
     onSelect={action('onSelect')}
diff --git a/packages/react-aria-components/stories/Form.stories.tsx b/packages/react-aria-components/stories/Form.stories.tsx
index 6af26826533..e3b00933e26 100644
--- a/packages/react-aria-components/stories/Form.stories.tsx
+++ b/packages/react-aria-components/stories/Form.stories.tsx
@@ -12,14 +12,18 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button, Form, Input, Label, ListBox, ListBoxItem, Popover, Select, SelectValue, TextField} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Form
+} as ComponentMeta<typeof Form>;
+
+export type FormStory = ComponentStoryFn<typeof Form>;
 
 
-export const FormAutoFillExample = () => {
+export const FormAutoFillExample: FormStory = () => {
   return (
     <Form
       aria-label="Shipping information"
diff --git a/packages/react-aria-components/stories/GridList.stories.tsx b/packages/react-aria-components/stories/GridList.stories.tsx
index 2f246ab46a8..b98ce5e50f8 100644
--- a/packages/react-aria-components/stories/GridList.stories.tsx
+++ b/packages/react-aria-components/stories/GridList.stories.tsx
@@ -27,6 +27,7 @@ import {
   ListLayout,
   Modal,
   ModalOverlay,
+  ModalOverlayProps,
   Popover,
   Size,
   Tag,
@@ -36,17 +37,21 @@ import {
   Virtualizer
 } from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
+import {ComponentMeta, ComponentStoryFn, ComponentStoryObj} from '@storybook/react';
 import {Key, useAsyncList, useListData} from 'react-stately';
 import {LoadingSpinner} from './utils';
-import React, {useState} from 'react';
+import React, {JSX, useState} from 'react';
 import styles from '../example/index.css';
 import {UNSTABLE_GridListLoadingSentinel} from '../src/GridList';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: GridList
+} as ComponentMeta<typeof GridList>;
+
+export type GridListStory = ComponentStoryFn<typeof GridList>;
 
-export const GridListExample = (args) => (
+export const GridListExample: GridListStory = (args) => (
   <GridList
     {...args}
     className={styles.menu}
@@ -138,7 +143,7 @@ const MyCheckbox = ({children, ...props}: CheckboxProps) => {
   );
 };
 
-export function VirtualizedGridList() {
+export let VirtualizedGridList: GridListStory = () => {
   let items: {id: number, name: string}[] = [];
   for (let i = 0; i < 10000; i++) {
     items.push({id: i, name: `Item ${i}`});
@@ -181,9 +186,9 @@ export function VirtualizedGridList() {
       </GridList>
     </Virtualizer>
   );
-}
+};
 
-export function VirtualizedGridListGrid() {
+export let VirtualizedGridListGrid: GridListStory = () => {
   let items: {id: number, name: string}[] = [];
   for (let i = 0; i < 10000; i++) {
     items.push({id: i, name: `Item ${i}`});
@@ -200,7 +205,7 @@ export function VirtualizedGridListGrid() {
       </GridList>
     </Virtualizer>
   );
-}
+};
 
 let renderEmptyState = ({isLoading}) => {
   return  (
@@ -233,14 +238,14 @@ const MyGridListLoaderIndicator = (props) => {
   );
 };
 
-export const AsyncGridList = (args) => {
+function AsyncGridListRender(props: {delay: number}): JSX.Element {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
         cursor = cursor.replace(/^http:\/\//i, 'https://');
       }
 
-      await new Promise(resolve => setTimeout(resolve, args.delay));
+      await new Promise(resolve => setTimeout(resolve, props.delay));
       let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
       let json = await res.json();
 
@@ -265,22 +270,23 @@ export const AsyncGridList = (args) => {
       <MyGridListLoaderIndicator isLoading={list.loadingState === 'loadingMore'} onLoadMore={list.loadMore} />
     </GridList>
   );
-};
+}
 
-AsyncGridList.story = {
+export let AsyncGridList: ComponentStoryObj<typeof AsyncGridListRender> = {
+  render: (args) => <AsyncGridListRender {...args} />,
   args: {
     delay: 50
   }
 };
 
-export const AsyncGridListVirtualized = (args) => {
+function AsyncGridListVirtualizedRender(props: {delay: number}): JSX.Element {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
         cursor = cursor.replace(/^http:\/\//i, 'https://');
       }
 
-      await new Promise(resolve => setTimeout(resolve, args.delay));
+      await new Promise(resolve => setTimeout(resolve, props.delay));
       let res = await fetch(cursor || `https://swapi.py4e.com/api/people/?search=${filterText}`, {signal});
       let json = await res.json();
       return {
@@ -311,13 +317,14 @@ export const AsyncGridListVirtualized = (args) => {
   );
 };
 
-AsyncGridListVirtualized.story = {
+export let AsyncGridListVirtualized: ComponentStoryObj<typeof AsyncGridListVirtualizedRender> = {
+  render: (args) => <AsyncGridListVirtualizedRender {...args} />,
   args: {
     delay: 50
   }
 };
 
-export function TagGroupInsideGridList() {
+export let TagGroupInsideGridList: GridListStory = () => {
   return (
     <GridList
       className={styles.menu}
@@ -359,7 +366,7 @@ export function TagGroupInsideGridList() {
       </MyGridListItem>
     </GridList>
   );
-}
+};
 
 const GridListDropdown = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -402,7 +409,7 @@ const GridListDropdown = () => {
   );
 };
 
-function GridListInModalPickerRender(props) {
+function GridListInModalPickerRender(props: ModalOverlayProps): JSX.Element {
   const [mainModalOpen, setMainModalOpen] = useState(true);
   return (
     <>
@@ -447,7 +454,7 @@ function GridListInModalPickerRender(props) {
   );
 }
 
-export const GridListInModalPicker = {
+export let GridListInModalPicker: ComponentStoryObj<typeof GridListInModalPickerRender> = {
   render: (args) => <GridListInModalPickerRender {...args} />,
   parameters: {
     docs: {
diff --git a/packages/react-aria-components/stories/Link.stories.tsx b/packages/react-aria-components/stories/Link.stories.tsx
index 4b99cabd503..f960f498949 100644
--- a/packages/react-aria-components/stories/Link.stories.tsx
+++ b/packages/react-aria-components/stories/Link.stories.tsx
@@ -10,14 +10,18 @@
  * governing permissions and limitations under the License.
  */
 
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import {Link} from 'react-aria-components';
 import React from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Link
+} as ComponentMeta<typeof Link>;
+
+export type LinkStory = ComponentStoryFn<typeof Link>;
 
-export const LinkExample = () => {
+export const LinkExample: LinkStory = () => {
   return (
     <Link data-testid="link-example" href="https://www.imdb.com/title/tt6348138/" hrefLang="en"  target="_blank">
       The missing link
diff --git a/packages/react-aria-components/stories/ListBox.stories.tsx b/packages/react-aria-components/stories/ListBox.stories.tsx
index 88657dc87b2..a5d0b5f5418 100644
--- a/packages/react-aria-components/stories/ListBox.stories.tsx
+++ b/packages/react-aria-components/stories/ListBox.stories.tsx
@@ -11,19 +11,24 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Collection, DropIndicator, GridLayout, Header, ListBox, ListBoxItem, ListBoxProps, ListBoxSection, ListLayout, Separator, Text, useDragAndDrop, Virtualizer, WaterfallLayout} from 'react-aria-components';
+import {Collection, DropIndicator, GridLayout, Header, ListBox, ListBoxItem, ListBoxSection, ListLayout, Separator, Text, useDragAndDrop, Virtualizer, WaterfallLayout} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn, ComponentStoryObj} from '@storybook/react';
 import {LoadingSpinner, MyListBoxItem} from './utils';
-import React from 'react';
+import React, {JSX} from 'react';
 import {Size} from '@react-stately/virtualizer';
 import styles from '../example/index.css';
 import {UNSTABLE_ListBoxLoadingSentinel} from '../src/ListBox';
 import {useAsyncList, useListData} from 'react-stately';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: ListBox
+} as ComponentMeta<typeof ListBox>;
+
+export type ListBoxStory = ComponentStoryFn<typeof ListBox>;
+export type ListBoxStoryObj = ComponentStoryObj<typeof ListBox>;
 
-export const ListBoxExample = (args) => (
+export const ListBoxExample: ListBoxStory = (args) => (
   <ListBox className={styles.menu} {...args} aria-label="test listbox">
     <MyListBoxItem>Foo</MyListBoxItem>
     <MyListBoxItem>Bar</MyListBoxItem>
@@ -62,7 +67,7 @@ ListBoxExample.story = {
 
 // Known accessibility false positive: https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives#listbox
 // also has a aXe landmark error, not sure what it means
-export const ListBoxSections = () => (
+export const ListBoxSections: ListBoxStory = () => (
   <ListBox className={styles.menu} selectionMode="multiple" selectionBehavior="replace" aria-label="test listbox with section">
     <ListBoxSection className={styles.group}>
       <Header style={{fontSize: '1.2em'}}>Section 1</Header>
@@ -79,7 +84,7 @@ export const ListBoxSections = () => (
   </ListBox>
 );
 
-export const ListBoxComplex = () => (
+export const ListBoxComplex: ListBoxStory = () => (
   <ListBox className={styles.menu} selectionMode="multiple" selectionBehavior="replace" aria-label="listbox complex">
     <MyListBoxItem>
       <Text slot="label">Item 1</Text>
@@ -96,8 +101,14 @@ export const ListBoxComplex = () => (
   </ListBox>
 );
 
+interface Album {
+  id: number,
+  image: string,
+  title: string,
+  artist: string
+}
 
-let albums = [
+let albums: Album[] = [
   {
     id: 1,
     image: 'https://images.unsplash.com/photo-1593958812614-2db6a598c71c?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxzZWFyY2h8Nnx8ZGlzY298ZW58MHx8MHx8fDA%3D&auto=format&fit=crop&w=900&q=60',
@@ -130,7 +141,8 @@ let albums = [
   }
 ];
 
-export const ListBoxDnd = (props: ListBoxProps<typeof albums[0]>) => {
+type AlbumListBoxStory = ComponentStoryFn<typeof ListBox<Album>>;
+export const ListBoxDnd: AlbumListBoxStory = (props) => {
   let list = useListData({
     initialItems: albums
   });
@@ -181,7 +193,7 @@ ListBoxDnd.story = {
   }
 };
 
-export const ListBoxHover = () => (
+export const ListBoxHover: ListBoxStory = () => (
   <ListBox className={styles.menu} aria-label="test listbox" onAction={action('onAction')} >
     <MyListBoxItem onHoverStart={action('onHoverStart')} onHoverChange={action('onHoverChange')} onHoverEnd={action('onHoverEnd')}>Hover</MyListBoxItem>
     <MyListBoxItem>Bar</MyListBoxItem>
@@ -190,7 +202,7 @@ export const ListBoxHover = () => (
   </ListBox>
 );
 
-export const ListBoxGrid = (args) => (
+export const ListBoxGrid: ListBoxStory = (args) => (
   <ListBox
     {...args}
     className={styles.menu}
@@ -241,7 +253,7 @@ function generateRandomString(minLength: number, maxLength: number): string {
   return result;
 }
 
-export function VirtualizedListBox({variableHeight}) {
+function VirtualizedListBoxRender({variableHeight}: {variableHeight: boolean}): JSX.Element {
   let sections: {id: string, name: string, children: {id: string, name: string}[]}[] = [];
   for (let s = 0; s < 10; s++) {
     let items: {id: string, name: string}[] = [];
@@ -272,12 +284,15 @@ export function VirtualizedListBox({variableHeight}) {
   );
 }
 
-VirtualizedListBox.args = {
-  variableHeight: false
+export const VirtualizedListBox: ComponentStoryObj<typeof VirtualizedListBoxRender> = {
+  render: (args) => <VirtualizedListBoxRender {...args} />,
+  args: {
+    variableHeight: false
+  }
 };
 
-export function VirtualizedListBoxEmpty() {
-  return (
+export let VirtualizedListBoxEmpty: ListBoxStoryObj = {
+  render: () => (
     <Virtualizer
       layout={ListLayout}
       layoutOptions={{
@@ -288,10 +303,10 @@ export function VirtualizedListBoxEmpty() {
         <></>
       </ListBox>
     </Virtualizer>
-  );
-}
+  )
+};
 
-export function VirtualizedListBoxDnd() {
+export let VirtualizedListBoxDnd: ListBoxStory = () => {
   let items: {id: number, name: string}[] = [];
   for (let i = 0; i < 10000; i++) {
     items.push({id: i, name: `Item ${i}`});
@@ -338,9 +353,9 @@ export function VirtualizedListBoxDnd() {
       </Virtualizer>
     </div>
   );
-}
+};
 
-function VirtualizedListBoxGridExample({minSize = 80, maxSize = 100, preserveAspectRatio = false}) {
+function VirtualizedListBoxGridExample({minSize = 80, maxSize = 100, preserveAspectRatio = false}: {minSize: number, maxSize: number, preserveAspectRatio: boolean}): JSX.Element {
   let items: {id: number, name: string}[] = [];
   for (let i = 0; i < 10000; i++) {
     items.push({id: i, name: `Item ${i}`});
@@ -391,8 +406,8 @@ function VirtualizedListBoxGridExample({minSize = 80, maxSize = 100, preserveAsp
   );
 }
 
-export const VirtualizedListBoxGrid = {
-  render(args) {
+export const VirtualizedListBoxGrid: ComponentStoryObj<typeof VirtualizedListBoxGridExample> = {
+  render: (args) => {
     return <VirtualizedListBoxGridExample {...args} />;
   },
   args: {
@@ -404,7 +419,7 @@ export const VirtualizedListBoxGrid = {
 
 let lorem = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.'.split(' ');
 
-export function VirtualizedListBoxWaterfall({minSize = 80, maxSize = 100}) {
+export function VirtualizedListBoxWaterfall({minSize = 80, maxSize = 100}: {minSize: number, maxSize: number}): JSX.Element {
   let items: {id: number, name: string}[] = [];
   for (let i = 0; i < 1000; i++) {
     let words = Math.max(2, Math.floor(Math.random() * 25));
@@ -468,7 +483,7 @@ const MyListBoxLoaderIndicator = (props) => {
   );
 };
 
-export const AsyncListBox = (args) => {
+function AsyncListBoxRender(args: {delay: number, orientation: 'horizontal' | 'vertical'}): JSX.Element {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
@@ -515,7 +530,8 @@ export const AsyncListBox = (args) => {
   );
 };
 
-AsyncListBox.story = {
+export const AsyncListBox: ComponentStoryObj<typeof AsyncListBoxRender> = {
+  render: (args) => <AsyncListBoxRender {...args} />,
   args: {
     orientation: 'horizontal',
     delay: 50
@@ -528,7 +544,7 @@ AsyncListBox.story = {
   }
 };
 
-export const AsyncListBoxVirtualized = (args) => {
+export const AsyncListBoxVirtualized: ComponentStoryFn<typeof AsyncListBoxRender> = (args) => {
   let list = useAsyncList<Character>({
     async load({signal, cursor, filterText}) {
       if (cursor) {
diff --git a/packages/react-aria-components/stories/Menu.stories.tsx b/packages/react-aria-components/stories/Menu.stories.tsx
index c16209a35c7..d36b2d03819 100644
--- a/packages/react-aria-components/stories/Menu.stories.tsx
+++ b/packages/react-aria-components/stories/Menu.stories.tsx
@@ -11,16 +11,20 @@
  */
 
 import {action} from '@storybook/addon-actions';
-import {Button, Header, Heading, Input, Keyboard, Label, Menu, MenuSection, MenuTrigger, Popover, Separator, SubmenuTrigger, Text, TextField} from 'react-aria-components';
+import {Button, Header, Heading, Input, Keyboard, Label, Menu, MenuSection, MenuTrigger, Popover, Separator, SubmenuTrigger, SubmenuTriggerProps, Text, TextField} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import {MyMenuItem} from './utils';
-import React from 'react';
+import React, {JSX} from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Menu
+} as ComponentMeta<typeof Menu>;
+
+export type MenuStory = ComponentStoryFn<typeof Menu>;
 
-export const MenuExample = () => (
+export const MenuExample: MenuStory = () => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
@@ -43,7 +47,7 @@ export const MenuExample = () => (
   </MenuTrigger>
 );
 
-export const MenuComplex = () => (
+export const MenuComplex: MenuStory = () => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
@@ -68,7 +72,7 @@ export const MenuComplex = () => (
   </MenuTrigger>
 );
 
-export const MenuScrollPaddingExample = () => (
+export const MenuScrollPaddingExample: MenuStory = () => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
@@ -116,30 +120,34 @@ export const MenuScrollPaddingExample = () => (
   </MenuTrigger>
 );
 
-export const SubmenuExample = (args) => (
-  <MenuTrigger>
-    <Button aria-label="Menu">☰</Button>
-    <Popover>
-      <Menu className={styles.menu} onAction={action('onAction')}>
-        <MyMenuItem id="Foo">Foo</MyMenuItem>
-        <SubmenuTrigger {...args}>
-          <MyMenuItem id="Bar">Bar</MyMenuItem>
-          <Popover className={styles.popover}>
-            <Menu className={styles.menu} onAction={action('onAction')}>
-              <MyMenuItem id="Submenu Foo">Submenu Foo</MyMenuItem>
-              <MyMenuItem id="Submenu Bar">Submenu Bar</MyMenuItem>
-              <MyMenuItem id="Submenu Baz">Submenu Baz</MyMenuItem>
-            </Menu>
-          </Popover>
-        </SubmenuTrigger>
-        <MyMenuItem id="Baz">Baz</MyMenuItem>
-        <MyMenuItem id="Google" href="https://google.com">Google</MyMenuItem>
-      </Menu>
-    </Popover>
-  </MenuTrigger>
-);
+function SubmenuExampleRender(args: Omit<SubmenuTriggerProps, 'children'> & {delay: number}): JSX.Element {
+  return (
+    <MenuTrigger>
+      <Button aria-label="Menu">☰</Button>
+      <Popover>
+        <Menu className={styles.menu} onAction={action('onAction')}>
+          <MyMenuItem id="Foo">Foo</MyMenuItem>
+          <SubmenuTrigger {...args}>
+            <MyMenuItem id="Bar">Bar</MyMenuItem>
+            <Popover className={styles.popover}>
+              <Menu className={styles.menu} onAction={action('onAction')}>
+                <MyMenuItem id="Submenu Foo">Submenu Foo</MyMenuItem>
+                <MyMenuItem id="Submenu Bar">Submenu Bar</MyMenuItem>
+                <MyMenuItem id="Submenu Baz">Submenu Baz</MyMenuItem>
+              </Menu>
+            </Popover>
+          </SubmenuTrigger>
+          <MyMenuItem id="Baz">Baz</MyMenuItem>
+          <MyMenuItem id="Google" href="https://google.com">Google</MyMenuItem>
+        </Menu>
+      </Popover>
+    </MenuTrigger>
+  );
+}
+type SubmenuExampleStory = ComponentStoryFn<typeof SubmenuExampleRender>;
+export const SubmenuExample: SubmenuExampleStory = (args) => <SubmenuExampleRender {...args} />;
 
-export const SubmenuNestedExample = (args) => (
+export const SubmenuNestedExample: SubmenuExampleStory = (args) => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
@@ -201,7 +209,7 @@ let dynamicRenderFunc = (item, args) => {
   }
 };
 
-export const SubmenuManyItemsExample = (args) => (
+export const SubmenuManyItemsExample: SubmenuExampleStory = (args) => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
@@ -212,7 +220,7 @@ export const SubmenuManyItemsExample = (args) => (
   </MenuTrigger>
 );
 
-export const SubmenuDisabledExample = (args) => (
+export const SubmenuDisabledExample: SubmenuExampleStory = (args) => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
@@ -235,7 +243,7 @@ export const SubmenuDisabledExample = (args) => (
   </MenuTrigger>
 );
 
-export const SubmenuSectionsExample = (args) => (
+export const SubmenuSectionsExample: SubmenuExampleStory = (args) => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
@@ -280,7 +288,7 @@ export const SubmenuSectionsExample = (args) => (
 );
 
 // TODO: figure out why it is autofocusing the Menu in the SubDialog
-export const SubdialogExample = (args) => (
+export const SubdialogExample: SubmenuExampleStory = (args) => (
   <MenuTrigger>
     <Button aria-label="Menu">☰</Button>
     <Popover>
diff --git a/packages/react-aria-components/stories/Meter.stories.tsx b/packages/react-aria-components/stories/Meter.stories.tsx
index a83f3270a7c..5d87c28ea36 100644
--- a/packages/react-aria-components/stories/Meter.stories.tsx
+++ b/packages/react-aria-components/stories/Meter.stories.tsx
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import {Label, Meter} from 'react-aria-components';
 import React from 'react';
 
@@ -24,9 +25,11 @@ export default {
     minValue: {control: 'number'},
     maxValue: {control: 'number'}
   }
-};
+} as ComponentMeta<typeof Meter>;
+
+export type MeterStory = ComponentStoryFn<typeof Meter>;
 
-export const MeterExample = (args) => {
+export const MeterExample: MeterStory = (args) => {
   return (
     <Meter {...args}>
       {({percentage, valueText}) => (
diff --git a/packages/react-aria-components/stories/Modal.stories.tsx b/packages/react-aria-components/stories/Modal.stories.tsx
index 61ffa767357..9eefd4b8474 100644
--- a/packages/react-aria-components/stories/Modal.stories.tsx
+++ b/packages/react-aria-components/stories/Modal.stories.tsx
@@ -11,13 +11,17 @@
  */
 
 import {Button, Dialog, DialogTrigger, Heading, Modal, ModalOverlay} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React, {useEffect} from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Modal
+} as ComponentMeta<typeof Modal>;
+
+export type ModalStory = ComponentStoryFn<typeof Modal>;
 
-export const ModalExample = () => (
+export const ModalExample: ModalStory = () => (
   <DialogTrigger>
     <Button>Open modal</Button>
     <ModalOverlay
@@ -61,7 +65,7 @@ export const ModalExample = () => (
   </DialogTrigger>
 );
 
-export const ModalInteractionOutsideExample = () => {
+export const ModalInteractionOutsideExample: ModalStory = () => {
 
   useEffect(() => {
     let button = document.createElement('button');
@@ -128,7 +132,7 @@ export const ModalInteractionOutsideExample = () => {
   );
 };
 
-export const ModalInteractionOutsideDefaultOverlayExample = () => {
+export const ModalInteractionOutsideDefaultOverlayExample: ModalStory = () => {
 
   useEffect(() => {
     let button = document.createElement('button');
diff --git a/packages/react-aria-components/stories/NumberField.stories.tsx b/packages/react-aria-components/stories/NumberField.stories.tsx
index ae525f8821a..f381996ba0c 100644
--- a/packages/react-aria-components/stories/NumberField.stories.tsx
+++ b/packages/react-aria-components/stories/NumberField.stories.tsx
@@ -11,13 +11,17 @@
  */
 
 import {Button, Group, Input, Label, NumberField} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryObj} from '@storybook/react';
 import React from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: NumberField
+} as ComponentMeta<typeof NumberField>;
+
+export type NumberFieldStory = ComponentStoryObj<typeof NumberField>;
 
-export const NumberFieldExample = {
+export const NumberFieldExample: NumberFieldStory = {
   args: {
     defaultValue: 0,
     minValue: 0,
diff --git a/packages/react-aria-components/stories/Popover.stories.tsx b/packages/react-aria-components/stories/Popover.stories.tsx
index ba700b5fba1..53deae1db4b 100644
--- a/packages/react-aria-components/stories/Popover.stories.tsx
+++ b/packages/react-aria-components/stories/Popover.stories.tsx
@@ -11,13 +11,17 @@
  */
 
 import {Button, Dialog, DialogTrigger, Heading, OverlayArrow, Popover} from 'react-aria-components';
-import React, {useEffect, useRef, useState} from 'react';
+import {ComponentMeta, ComponentStoryFn, ComponentStoryObj} from '@storybook/react';
+import React, {JSX, useEffect, useRef, useState} from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Popover
+} as ComponentMeta<typeof Popover>;
+
+export type PopoverStory = ComponentStoryFn<typeof Popover>;
 
-export const PopoverExample = () => (
+export const PopoverExample: PopoverStory = () => (
   <DialogTrigger>
     <Button>Open popover</Button>
     <Popover
@@ -52,7 +56,7 @@ export const PopoverExample = () => (
 
 const COUNTDOWN = 5000;
 
-function PopoverTriggerObserver() {
+function PopoverTriggerObserver(): JSX.Element {
   const buttonRef = useRef<HTMLButtonElement>(null);
   const [countdown, setCountdown] = useState(COUNTDOWN);
 
@@ -118,11 +122,235 @@ function PopoverTriggerObserver() {
 }
 
 
-export const PopoverTriggerObserverExample = {
-  render: PopoverTriggerObserver
+export const PopoverTriggerObserverExample: ComponentStoryObj<typeof PopoverTriggerObserver> = {
+  render: () => <PopoverTriggerObserver />
 };
 
-export const PopoverArrowBoundaryOffsetExample = {
+function PopoverArrowBoundaryOffsetExampleRender({topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight}:
+  {topLeft: number, topRight: number, leftTop: number, leftBottom: number, rightTop: number, rightBottom: number, bottomLeft: number, bottomRight: number}): JSX.Element {
+  return (
+    <div style={{display: 'flex', flexDirection: 'column'}}>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Top left</Button>
+            <Popover
+              placement="top left"
+              shouldFlip={false}
+              arrowBoundaryOffset={topLeft}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Top left</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Top right</Button>
+            <Popover
+              placement="top right"
+              shouldFlip={false}
+              arrowBoundaryOffset={topRight}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Top right</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Left top</Button>
+            <Popover
+              placement="left top"
+              shouldFlip={false}
+              arrowBoundaryOffset={leftTop}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(-90deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Left top</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Left bottom</Button>
+            <Popover
+              placement="left bottom"
+              shouldFlip={false}
+              arrowBoundaryOffset={leftBottom}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(-90deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Left bottom</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Right top</Button>
+            <Popover
+              placement="right top"
+              shouldFlip={false}
+              arrowBoundaryOffset={rightTop}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(90deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Right top</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Right bottom</Button>
+            <Popover
+              placement="right bottom"
+              shouldFlip={false}
+              arrowBoundaryOffset={rightBottom}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(90deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Right bottom</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Bottom left</Button>
+            <Popover
+              placement="bottom left"
+              shouldFlip={false}
+              arrowBoundaryOffset={bottomLeft}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(180deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Bottom left</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <DialogTrigger>
+            <Button style={{width: 200, height: 100}}>Bottom right</Button>
+            <Popover
+              placement="bottom right"
+              shouldFlip={false}
+              arrowBoundaryOffset={bottomRight}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                zIndex: 5,
+                borderRadius: '30px'
+              }}>
+              <OverlayArrow style={{display: 'flex'}}>
+                <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(180deg)'}}>
+                  <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              <Dialog style={{outline: 'none'}}>
+                <div>Bottom right</div>
+              </Dialog>
+            </Popover>
+          </DialogTrigger>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const PopoverArrowBoundaryOffsetExample: ComponentStoryObj<typeof PopoverArrowBoundaryOffsetExampleRender> = {
   args: {
     topLeft: 25,
     topRight: 25,
@@ -191,231 +419,10 @@ export const PopoverArrowBoundaryOffsetExample = {
       }
     }
   },
-  render: ({topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
-    return (
-      <div style={{display: 'flex', flexDirection: 'column'}}>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Top left</Button>
-              <Popover
-                placement="top left"
-                shouldFlip={false}
-                arrowBoundaryOffset={topLeft}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Top left</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Top right</Button>
-              <Popover
-                placement="top right"
-                shouldFlip={false}
-                arrowBoundaryOffset={topRight}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Top right</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Left top</Button>
-              <Popover
-                placement="left top"
-                shouldFlip={false}
-                arrowBoundaryOffset={leftTop}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(-90deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Left top</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Left bottom</Button>
-              <Popover
-                placement="left bottom"
-                shouldFlip={false}
-                arrowBoundaryOffset={leftBottom}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(-90deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Left bottom</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Right top</Button>
-              <Popover
-                placement="right top"
-                shouldFlip={false}
-                arrowBoundaryOffset={rightTop}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(90deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Right top</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Right bottom</Button>
-              <Popover
-                placement="right bottom"
-                shouldFlip={false}
-                arrowBoundaryOffset={rightBottom}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(90deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Right bottom</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Bottom left</Button>
-              <Popover
-                placement="bottom left"
-                shouldFlip={false}
-                arrowBoundaryOffset={bottomLeft}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(180deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Bottom left</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <DialogTrigger>
-              <Button style={{width: 200, height: 100}}>Bottom right</Button>
-              <Popover
-                placement="bottom right"
-                shouldFlip={false}
-                arrowBoundaryOffset={bottomRight}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  zIndex: 5,
-                  borderRadius: '30px'
-                }}>
-                <OverlayArrow style={{display: 'flex'}}>
-                  <svg width="12" height="12" viewBox="0 0 12 12" style={{display: 'block', transform: 'rotate(180deg)'}}>
-                    <path d="M0 0L6 6L12 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                <Dialog style={{outline: 'none'}}>
-                  <div>Bottom right</div>
-                </Dialog>
-              </Popover>
-            </DialogTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
+  render: (args) => <PopoverArrowBoundaryOffsetExampleRender {...args} />
 };
 
-export const PopoverTriggerWidthExample = () => (
+export const PopoverTriggerWidthExample: PopoverStory = () => (
   <DialogTrigger>
     <Button>Open popover</Button>
     <Popover
diff --git a/packages/react-aria-components/stories/ProgressBar.stories.tsx b/packages/react-aria-components/stories/ProgressBar.stories.tsx
index 863c4729db5..1f9df95b6fa 100644
--- a/packages/react-aria-components/stories/ProgressBar.stories.tsx
+++ b/packages/react-aria-components/stories/ProgressBar.stories.tsx
@@ -10,6 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import {Label, ProgressBar} from 'react-aria-components';
 import React from 'react';
 
@@ -24,9 +25,11 @@ export default {
     minValue: {control: 'number'},
     maxValue: {control: 'number'}
   }
-};
+} as ComponentMeta<typeof ProgressBar>;
+
+export type ProgressBarStory = ComponentStoryFn<typeof ProgressBar>;
 
-export const ProgressBarExample = (args) => {
+export const ProgressBarExample: ProgressBarStory = (args) => {
   return (
     <ProgressBar {...args}>
       {({percentage, valueText}) => (
diff --git a/packages/react-aria-components/stories/RadioGroup.stories.tsx b/packages/react-aria-components/stories/RadioGroup.stories.tsx
index 0ecc72721e6..d4a68bfc5e2 100644
--- a/packages/react-aria-components/stories/RadioGroup.stories.tsx
+++ b/packages/react-aria-components/stories/RadioGroup.stories.tsx
@@ -11,14 +11,18 @@
  */
 
 import {Button, Dialog, DialogTrigger, FieldError, Form, Label, Modal, ModalOverlay, Radio, RadioGroup} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React, {useState} from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: RadioGroup
+} as ComponentMeta<typeof RadioGroup>;
+
+export type RadioGroupStory = ComponentStoryFn<typeof RadioGroup>;
 
-export const RadioGroupExample = () => {
+export const RadioGroupExample: RadioGroupStory = () => {
   return (
     <RadioGroup
       data-testid="radio-group-example"
@@ -31,9 +35,9 @@ export const RadioGroupExample = () => {
   );
 };
 
-export const RadioGroupControlledExample = () => {
+export const RadioGroupControlledExample: RadioGroupStory = () => {
   let [selected, setSelected] = useState<string|null>(null);
-  
+
   return (
     <RadioGroup
       data-testid="radio-group-example"
@@ -48,7 +52,7 @@ export const RadioGroupControlledExample = () => {
   );
 };
 
-export const RadioGroupInDialogExample = () => {
+export const RadioGroupInDialogExample: RadioGroupStory = () => {
   return (
     <DialogTrigger>
       <Button>Open dialog</Button>
@@ -81,7 +85,14 @@ export const RadioGroupInDialogExample = () => {
             {({close}) => (
               <>
                 <div>
-                  <RadioGroupExample />
+                  <RadioGroup
+                    data-testid="radio-group-example"
+                    className={styles.radiogroup}>
+                    <Label>Favorite pet</Label>
+                    <Radio className={styles.radio} value="dogs" data-testid="radio-dog">Dog</Radio>
+                    <Radio className={styles.radio} value="cats">Cat</Radio>
+                    <Radio className={styles.radio} value="dragon">Dragon</Radio>
+                  </RadioGroup>
                 </div>
                 <div>
                   <Button onPress={close} style={{marginTop: 10}}>
@@ -97,7 +108,7 @@ export const RadioGroupInDialogExample = () => {
   );
 };
 
-export const RadioGroupSubmitExample = () => {
+export const RadioGroupSubmitExample: RadioGroupStory = () => {
   return (
     <Form>
       <RadioGroup
diff --git a/packages/react-aria-components/stories/SearchField.stories.tsx b/packages/react-aria-components/stories/SearchField.stories.tsx
index 8986303480b..d1664db39ea 100644
--- a/packages/react-aria-components/stories/SearchField.stories.tsx
+++ b/packages/react-aria-components/stories/SearchField.stories.tsx
@@ -12,14 +12,18 @@
 
 import {Button, Input, Label, SearchField} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: SearchField
+} as ComponentMeta<typeof SearchField>;
+
+export type SearchFieldStory = ComponentStoryFn<typeof SearchField>;
 
-export const SearchFieldExample = () => {
+export const SearchFieldExample: SearchFieldStory = () => {
   return (
     <SearchField className={classNames(styles, 'searchFieldExample')} data-testid="search-field-example">
       <Label>Search</Label>
diff --git a/packages/react-aria-components/stories/Select.stories.tsx b/packages/react-aria-components/stories/Select.stories.tsx
index 51f9473833a..9d7da0a2bb6 100644
--- a/packages/react-aria-components/stories/Select.stories.tsx
+++ b/packages/react-aria-components/stories/Select.stories.tsx
@@ -11,17 +11,21 @@
  */
 
 import {Button, Collection, Label, ListBox, ListLayout, OverlayArrow, Popover, Select, SelectValue, Virtualizer} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn, ComponentStoryObj} from '@storybook/react';
 import {LoadingSpinner, MyListBoxItem} from './utils';
-import React from 'react';
+import React, {JSX} from 'react';
 import styles from '../example/index.css';
 import {UNSTABLE_ListBoxLoadingSentinel} from '../src/ListBox';
 import {useAsyncList} from 'react-stately';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Select
+} as ComponentMeta<typeof Select>;
+
+export type SelectStory = ComponentStoryFn<typeof Select>;
 
-export const SelectExample = () => (
+export const SelectExample: SelectStory = () => (
   <Select data-testid="select-example" id="select-example-id">
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
@@ -42,7 +46,7 @@ export const SelectExample = () => (
   </Select>
 );
 
-export const SelectRenderProps = () => (
+export const SelectRenderProps: SelectStory = () => (
   <Select data-testid="select-render-props">
     {({isOpen}) => (
       <>
@@ -66,7 +70,7 @@ export const SelectRenderProps = () => (
 
 let manyItems = [...Array(100)].map((_, i) => ({id: i, name: `Item ${i}`}));
 
-export const SelectManyItems = () => (
+export const SelectManyItems: SelectStory = () => (
   <Select>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
@@ -84,7 +88,7 @@ export const SelectManyItems = () => (
   </Select>
 );
 
-export const VirtualizedSelect = () => (
+export const VirtualizedSelect: SelectStory = () => (
   <Select>
     <Label style={{display: 'block'}}>Test</Label>
     <Button>
@@ -119,7 +123,7 @@ const MyListBoxLoaderIndicator = (props) => {
   );
 };
 
-export const AsyncVirtualizedCollectionRenderSelect = (args) => {
+function AsyncVirtualizedCollectionRenderSelectRender(args: {delay: number}): JSX.Element {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -169,7 +173,8 @@ export const AsyncVirtualizedCollectionRenderSelect = (args) => {
   );
 };
 
-AsyncVirtualizedCollectionRenderSelect.story = {
+export const AsyncVirtualizedCollectionRenderSelect: ComponentStoryObj<typeof AsyncVirtualizedCollectionRenderSelectRender> = {
+  render: (args) => <AsyncVirtualizedCollectionRenderSelectRender {...args} />,
   args: {
     delay: 50
   }
diff --git a/packages/react-aria-components/stories/Slider.stories.tsx b/packages/react-aria-components/stories/Slider.stories.tsx
index c7f50d0dc50..4f874b3a6d1 100644
--- a/packages/react-aria-components/stories/Slider.stories.tsx
+++ b/packages/react-aria-components/stories/Slider.stories.tsx
@@ -10,15 +10,19 @@
  * governing permissions and limitations under the License.
  */
 
-import {Label, Slider, SliderOutput, SliderProps, SliderThumb, SliderTrack} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
+import {Label, Slider, SliderOutput, SliderThumb, SliderTrack} from 'react-aria-components';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Slider
+} as ComponentMeta<typeof Slider>;
+
+export type SliderStory = ComponentStoryFn<typeof Slider>;
 
-export const SliderExample = () => {
+export const SliderExample: SliderStory = () => {
   const [value, setValue] = React.useState([30, 60]);
   return (
     <div>
@@ -66,7 +70,7 @@ export const SliderExample = () => {
   );
 };
 
-export const SliderCSS = (props: SliderProps) => (
+export const SliderCSS: SliderStory = (props) => (
   <Slider {...props} defaultValue={30} className={styles.slider}>
     <div className={styles.label}>
       <Label>Test</Label>
diff --git a/packages/react-aria-components/stories/Switch.stories.tsx b/packages/react-aria-components/stories/Switch.stories.tsx
index ed615f72092..d47b4bb9bab 100644
--- a/packages/react-aria-components/stories/Switch.stories.tsx
+++ b/packages/react-aria-components/stories/Switch.stories.tsx
@@ -11,15 +11,19 @@
  */
 
 import {classNames} from '@react-spectrum/utils';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 import {Switch} from 'react-aria-components';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Switch
+} as ComponentMeta<typeof Switch>;
+
+export type SwitchStory = ComponentStoryFn<typeof Switch>;
 
-export const SwitchExample = () => {
+export const SwitchExample: SwitchStory = () => {
   return (
     <Switch className={classNames(styles, 'switchExample')} data-testid="switch-example">
       <div className={classNames(styles, 'switchExample-indicator')} />
diff --git a/packages/react-aria-components/stories/Table.stories.tsx b/packages/react-aria-components/stories/Table.stories.tsx
index 956a0dd3912..b26807dabe1 100644
--- a/packages/react-aria-components/stories/Table.stories.tsx
+++ b/packages/react-aria-components/stories/Table.stories.tsx
@@ -12,17 +12,22 @@
 
 import {action} from '@storybook/addon-actions';
 import {Button, Cell, Checkbox, CheckboxProps, Collection, Column, ColumnProps, ColumnResizer, Dialog, DialogTrigger, DropIndicator, Heading, Menu, MenuTrigger, Modal, ModalOverlay, Popover, ResizableTableContainer, Row, Table, TableBody, TableHeader, TableLayout, useDragAndDrop, Virtualizer} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn, ComponentStoryObj} from '@storybook/react';
 import {isTextDropItem} from 'react-aria';
 import {LoadingSpinner, MyMenuItem} from './utils';
-import React, {startTransition, Suspense, useState} from 'react';
+import React, {JSX, startTransition, Suspense, useState} from 'react';
+import {Selection, useAsyncList, useListData} from 'react-stately';
 import styles from '../example/index.css';
 import {UNSTABLE_TableLoadingSentinel} from '../src/Table';
-import {useAsyncList, useListData} from 'react-stately';
 
 export default {
   title: 'React Aria Components',
+  component: Table,
   excludeStories: ['DndTable', 'makePromise']
-};
+} as ComponentMeta<typeof Table>;
+
+export type TableStory = ComponentStoryFn<typeof Table>;
+export type TableStoryObj = ComponentStoryObj<typeof Table>;
 
 const ReorderableTable = ({initialItems}: {initialItems: {id: string, name: string}[]}) => {
   let list = useListData({initialItems});
@@ -89,7 +94,7 @@ const ReorderableTable = ({initialItems}: {initialItems: {id: string, name: stri
   );
 };
 
-export const ReorderableTableExample = () => (
+export const ReorderableTableExample: TableStory = () => (
   <>
     <ResizableTableContainer style={{width: 300, overflow: 'auto'}}>
       <ReorderableTable initialItems={[{id: '1', name: 'Bob'}]} />
@@ -100,7 +105,7 @@ export const ReorderableTableExample = () => (
   </>
 );
 
-const TableExample = (args) => {
+const TableExample: TableStory = (args) => {
   let list = useListData({
     initialItems: [
       {id: 1, name: 'Games', date: '6/7/2020', type: 'File folder'},
@@ -176,7 +181,7 @@ const TableExample = (args) => {
   );
 };
 
-export const TableExampleStory = {
+export const TableExampleStory: TableStoryObj = {
   render: TableExample,
   args: {
     selectionMode: 'none',
@@ -212,7 +217,7 @@ let rows = [
   {id: 4, name: 'log.txt', date: '1/18/20167', type: 'Text Document'}
 ];
 
-export const TableDynamicExample = () => {
+export const TableDynamicExample: TableStory = () => {
   return (
     <Table aria-label="Files">
       <TableHeader columns={columns}>
@@ -251,7 +256,7 @@ let timeTableRows = [
   {id: 6, time: '13:00 - 14:00', monday: 'History', tuesday: 'Math', wednesday: 'English', thursday: 'Science', friday: 'Art'}
 ];
 
-export const TableCellColSpanExample = () => {
+export const TableCellColSpanExample: TableStory = () => {
   return (
     <Table aria-label="Timetable">
       <TableHeader columns={timeTableColumns}>
@@ -284,7 +289,7 @@ export const TableCellColSpanExample = () => {
   );
 };
 
-export const TableCellColSpanWithVariousSpansExample = () => {
+export const TableCellColSpanWithVariousSpansExample: TableStory = () => {
   return (
     <Table aria-label="Table with various colspans">
       <TableHeader>
@@ -366,10 +371,10 @@ interface DndTableProps {
   'aria-label': string,
   isDisabled?: boolean,
   isLoading?: boolean,
-  onSelectionChange?: (keys) => void
+  onSelectionChange?: (keys: Selection) => void
 }
 
-export const DndTable = (props: DndTableProps) => {
+function DndTableRender(props: DndTableProps): JSX.Element {
   let list = useListData({
     initialItems: props.initialItems
   });
@@ -470,16 +475,22 @@ export const DndTable = (props: DndTableProps) => {
   );
 };
 
+export const DndTable: ComponentStoryFn<typeof DndTableRender> = (props) => {
+  return (
+    <DndTableRender {...props} />
+  );
+};
+
 type DndTableExampleProps = {
   isDisabledFirstTable?: boolean,
   isDisabledSecondTable?: boolean,
   isLoading?: boolean
 }
 
-export const DndTableExample = (props: DndTableExampleProps) => {
+function DndTableExampleRender(props: DndTableExampleProps): JSX.Element {
   return (
     <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
-      <DndTable
+      <DndTableRender
         isLoading={props.isLoading}
         initialItems={[
         {id: '1', type: 'file', name: 'Adobe Photoshop'},
@@ -491,7 +502,7 @@ export const DndTableExample = (props: DndTableExampleProps) => {
         ]}
         aria-label="First Table"
         isDisabled={props.isDisabledFirstTable} />
-      <DndTable
+      <DndTableRender
         isLoading={props.isLoading}
         initialItems={[
         {id: '7', type: 'folder', name: 'Pictures'},
@@ -507,6 +518,10 @@ export const DndTableExample = (props: DndTableExampleProps) => {
   );
 };
 
+export const DndTableExample: ComponentStoryFn<typeof DndTableExampleRender> = (props) => {
+  return <DndTableExampleRender {...props} />;
+};
+
 DndTableExample.args = {
   isDisabledFirstTable: false,
   isDisabledSecondTable: false,
@@ -556,7 +571,7 @@ function MyTableBody(props) {
   );
 }
 
-const TableLoadingBodyWrapper = (args: {isLoadingMore: boolean}) => {
+const TableLoadingBodyWrapper = (args: {isLoadingMore: boolean}): JSX.Element => {
   return (
     <Table aria-label="Files">
       <TableHeader columns={columns}>
@@ -577,7 +592,7 @@ const TableLoadingBodyWrapper = (args: {isLoadingMore: boolean}) => {
   );
 };
 
-export const TableLoadingBodyWrapperStory = {
+export const TableLoadingBodyWrapperStory: ComponentStoryObj<typeof TableLoadingBodyWrapper> = {
   render: TableLoadingBodyWrapper,
   args: {
     isLoadingMore: false
@@ -595,7 +610,7 @@ function MyRow(props) {
   );
 }
 
-const TableLoadingRowRenderWrapper = (args: {isLoadingMore: boolean}) => {
+const TableLoadingRowRenderWrapper = (args: {isLoadingMore: boolean}): JSX.Element => {
   return (
     <Table aria-label="Files">
       <TableHeader columns={columns}>
@@ -616,7 +631,7 @@ const TableLoadingRowRenderWrapper = (args: {isLoadingMore: boolean}) => {
   );
 };
 
-export const TableLoadingRowRenderWrapperStory = {
+export const TableLoadingRowRenderWrapperStory: ComponentStoryObj<typeof TableLoadingRowRenderWrapper> = {
   render: TableLoadingRowRenderWrapper,
   args: {
     isLoadingMore: false
@@ -630,7 +645,7 @@ function renderEmptyLoader({isLoading, tableWidth = 400}) {
   return <div style={{height: 30, position: 'sticky', top: 0, left: 0, width: tableWidth}}>{contents}</div>;
 }
 
-const RenderEmptyState = (args: {isLoading: boolean}) => {
+const RenderEmptyState = (args: {isLoading: boolean}): JSX.Element => {
   let {isLoading} = args;
   return (
     <Table aria-label="Files" selectionMode="multiple">
@@ -658,7 +673,7 @@ const RenderEmptyState = (args: {isLoading: boolean}) => {
   );
 };
 
-export const RenderEmptyStateStory  = {
+export const RenderEmptyStateStory: ComponentStoryObj<typeof RenderEmptyState> = {
   render: RenderEmptyState,
   args: {
     isLoading: false
@@ -673,7 +688,7 @@ interface Character {
   birth_year: number
 }
 
-const OnLoadMoreTable = (args) => {
+const OnLoadMoreTable = (args: {delay: number}): JSX.Element => {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -721,7 +736,7 @@ const OnLoadMoreTable = (args) => {
   );
 };
 
-export const OnLoadMoreTableStory  = {
+export const OnLoadMoreTableStory: ComponentStoryObj<typeof OnLoadMoreTable> = {
   render: OnLoadMoreTable,
   name: 'onLoadMore table',
   args: {
@@ -729,7 +744,7 @@ export const OnLoadMoreTableStory  = {
   }
 };
 
-export function VirtualizedTable() {
+export const VirtualizedTable: TableStory = () => {
   let items: {id: number, foo: string, bar: string, baz: string}[] = [];
   for (let i = 0; i < 1000; i++) {
     items.push({id: i, foo: `Foo ${i}`, bar: `Bar ${i}`, baz: `Baz ${i}`});
@@ -784,9 +799,9 @@ export function VirtualizedTable() {
       </Table>
     </Virtualizer>
   );
-}
+};
 
-export function VirtualizedTableWithResizing() {
+export const VirtualizedTableWithResizing: TableStory = () => {
   let items: {id: number, foo: string, bar: string, baz: string}[] = [];
   for (let i = 0; i < 1000; i++) {
     items.push({id: i, foo: `Foo ${i}`, bar: `Bar ${i}`, baz: `Baz ${i}`});
@@ -819,9 +834,9 @@ export function VirtualizedTableWithResizing() {
       </Virtualizer>
     </ResizableTableContainer>
   );
-}
+};
 
-function VirtualizedTableWithEmptyState(args) {
+function VirtualizedTableWithEmptyState(args: {isLoading: boolean, showRows: boolean}): JSX.Element {
   let rows = [
     {foo: 'Foo 1', bar: 'Bar 1', baz: 'Baz 1'},
     {foo: 'Foo 2', bar: 'Bar 2', baz: 'Baz 2'},
@@ -861,7 +876,7 @@ function VirtualizedTableWithEmptyState(args) {
   );
 }
 
-export const VirtualizedTableWithEmptyStateStory  = {
+export const VirtualizedTableWithEmptyStateStory: ComponentStoryObj<typeof VirtualizedTableWithEmptyState> = {
   render: VirtualizedTableWithEmptyState,
   args: {
     isLoading: false,
@@ -870,7 +885,7 @@ export const VirtualizedTableWithEmptyStateStory  = {
   name: 'Virtualized Table With Empty State'
 };
 
-const OnLoadMoreTableVirtualized = (args) => {
+const OnLoadMoreTableVirtualized = (args: {delay: number}): JSX.Element => {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -922,7 +937,7 @@ const OnLoadMoreTableVirtualized = (args) => {
   );
 };
 
-export const OnLoadMoreTableStoryVirtualized  = {
+export const OnLoadMoreTableStoryVirtualized: ComponentStoryObj<typeof OnLoadMoreTableVirtualized> = {
   render: OnLoadMoreTableVirtualized,
   name: 'Virtualized Table with async loading',
   args: {
@@ -930,7 +945,7 @@ export const OnLoadMoreTableStoryVirtualized  = {
   }
 };
 
-const OnLoadMoreTableVirtualizedResizeWrapper = (args) => {
+const OnLoadMoreTableVirtualizedResizeWrapper = (args: {delay: number}): JSX.Element => {
   let list = useAsyncList<Character>({
     async load({signal, cursor}) {
       if (cursor) {
@@ -984,7 +999,7 @@ const OnLoadMoreTableVirtualizedResizeWrapper = (args) => {
   );
 };
 
-export const OnLoadMoreTableVirtualizedResizeWrapperStory  = {
+export const OnLoadMoreTableVirtualizedResizeWrapperStory: ComponentStoryObj<typeof OnLoadMoreTableVirtualizedResizeWrapper> = {
   render: OnLoadMoreTableVirtualizedResizeWrapper,
   name: 'Virtualized Table with async loading, with wrapper around Virtualizer',
   args: {
@@ -1010,11 +1025,11 @@ const items: Launch[] = [
   {id: 3, mission_name: 'RatSat', launch_year: 2009}
 ];
 
-export function makePromise(items: Launch[]) {
+export function makePromise(items: Launch[]): Promise<Launch[]> {
   return new Promise(resolve => setTimeout(() => resolve(items), 1000));
 }
 
-function TableSuspense({reactTransition = false}) {
+function TableSuspense({reactTransition = false}: {reactTransition?: boolean}): JSX.Element {
   let [promise, setPromise] = useState(() => makePromise(items.slice(0, 2)));
   let [isPending, startTransition] = React.useTransition();
   return (
@@ -1064,8 +1079,8 @@ function LocationsTableBody({promise}) {
   ));
 }
 
-export const TableWithSuspense = {
-  render: React.use != null ? TableSuspense : () => 'This story requires React 19.',
+export const TableWithSuspense: ComponentStoryObj<typeof TableSuspense> = {
+  render: React.use != null ? (args) => <TableSuspense {...args} /> : () => <>'This story requires React 19.'</>,
   args: {
     reactTransition: false
   },
@@ -1485,7 +1500,7 @@ const columns1 = [
   }
 ];
 
-export function TableWithReactTransition() {
+export const TableWithReactTransition: TableStory = () => {
   const [show, setShow] = useState(true);
   const items = show ? rows2 : rows1;
 
@@ -1514,4 +1529,4 @@ export function TableWithReactTransition() {
       </Table>
     </div>
   );
-}
+};
diff --git a/packages/react-aria-components/stories/Tabs.stories.tsx b/packages/react-aria-components/stories/Tabs.stories.tsx
index 0ff70166160..b0980cb9b77 100644
--- a/packages/react-aria-components/stories/Tabs.stories.tsx
+++ b/packages/react-aria-components/stories/Tabs.stories.tsx
@@ -10,15 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
-import {Button, OverlayArrow, Tab, TabList, TabPanel, TabProps, Tabs, TabsProps, Tooltip, TooltipTrigger} from 'react-aria-components';
+import {Button, OverlayArrow, Tab, TabList, TabPanel, TabProps, Tabs, Tooltip, TooltipTrigger} from 'react-aria-components';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
+import {Orientation} from 'react-aria';
 import React, {useState} from 'react';
 import {RouterProvider} from '@react-aria/utils';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Tabs
+} as ComponentMeta<typeof Tabs>;
+
+export type TabsStory = ComponentStoryFn<typeof Tabs>;
 
-export const TabsExample = () => {
+export const TabsExample: TabsStory = () => {
   let [url, setUrl] = useState('/FoR');
 
   return (
@@ -62,8 +67,8 @@ export const TabsExample = () => {
 };
 
 // Has error with invalid aria-controls, bug documented here: https://github.com/adobe/react-spectrum/issues/4781#issuecomment-1641057070
-export const TabsRenderProps = () => {
-  const [tabOrientation, setTabOrientation] = useState<TabsProps['orientation']>('vertical');
+export const TabsRenderProps: TabsStory = () => {
+  const [tabOrientation, setTabOrientation] = useState<Orientation>('vertical');
 
   return (
     <div style={{display: 'flex', flexDirection: 'row', gap: 8}}>
@@ -108,7 +113,7 @@ const CustomTab = (props: TabProps) => {
   );
 };
 
-export const NestedTabs = () => (
+export const NestedTabs: TabsStory = () => (
   <Tabs>
     <TabList style={{display: 'flex', gap: 8}}>
       <CustomTab id="foo">Foo</CustomTab>
diff --git a/packages/react-aria-components/stories/TextField.stories.tsx b/packages/react-aria-components/stories/TextField.stories.tsx
index 1fa6a1609a9..fbf72c950b0 100644
--- a/packages/react-aria-components/stories/TextField.stories.tsx
+++ b/packages/react-aria-components/stories/TextField.stories.tsx
@@ -12,14 +12,18 @@
 
 import {Button, FieldError, Form, Input, Label, TextField} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: TextField
+} as ComponentMeta<typeof TextField>;
+
+export type TextFieldStory = ComponentStoryFn<typeof TextField>;
 
-export const TextfieldExample = () => {
+export const TextfieldExample: TextFieldStory = () => {
   return (
     <TextField data-testid="textfield-example">
       <Label>First name</Label>
@@ -28,7 +32,7 @@ export const TextfieldExample = () => {
   );
 };
 
-export const TextFieldSubmitExample = (args) => {
+export const TextFieldSubmitExample: TextFieldStory = (args) => {
   return (
     <Form>
       <TextField className={classNames(styles, 'textfieldExample')} name="email" type="email" isRequired {...args}>
diff --git a/packages/react-aria-components/stories/TimeField.stories.tsx b/packages/react-aria-components/stories/TimeField.stories.tsx
index 5cd64496cad..f018b055fbd 100644
--- a/packages/react-aria-components/stories/TimeField.stories.tsx
+++ b/packages/react-aria-components/stories/TimeField.stories.tsx
@@ -11,15 +11,19 @@
  */
 
 import clsx from 'clsx';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import {DateInput, DateSegment, Label, TimeField} from 'react-aria-components';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: TimeField
+} as ComponentMeta<typeof TimeField>;
 
-export const TimeFieldExample = () => (
+export type TimeFieldStory = ComponentStoryFn<typeof TimeField>;
+
+export const TimeFieldExample: TimeFieldStory = () => (
   <TimeField data-testid="time-field-example">
     <Label style={{display: 'block'}}>Time</Label>
     <DateInput className={styles.field}>
diff --git a/packages/react-aria-components/stories/ToggleButton.stories.tsx b/packages/react-aria-components/stories/ToggleButton.stories.tsx
index 8c33b7a7510..13213069eb4 100644
--- a/packages/react-aria-components/stories/ToggleButton.stories.tsx
+++ b/packages/react-aria-components/stories/ToggleButton.stories.tsx
@@ -12,23 +12,27 @@
 
 import {action} from '@storybook/addon-actions';
 import {classNames} from '@react-spectrum/utils';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import React, {useState} from 'react';
 import styles from '../example/index.css';
 import {ToggleButton} from 'react-aria-components';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: ToggleButton
+} as ComponentMeta<typeof ToggleButton>;
+
+export type ToggleButtonStory = ComponentStoryFn<typeof ToggleButton>;
 
-export const ToggleButtonExample = () => {
+export const ToggleButtonExample: ToggleButtonStory = () => {
 
   const [textColor, setTextColor] = useState('black');
 
   return (
     <ToggleButton
-      className={classNames(styles, 'toggleButtonExample')} 
-      data-testid="toggle-button-example" 
-      onKeyUp={action('keyup')} 
+      className={classNames(styles, 'toggleButtonExample')}
+      data-testid="toggle-button-example"
+      onKeyUp={action('keyup')}
       onPress={action('press')}
       onHoverStart={() => setTextColor('red')}
       onHoverEnd={() => setTextColor('black')}
diff --git a/packages/react-aria-components/stories/Toolbar.stories.tsx b/packages/react-aria-components/stories/Toolbar.stories.tsx
index 239aa874347..1994153688d 100644
--- a/packages/react-aria-components/stories/Toolbar.stories.tsx
+++ b/packages/react-aria-components/stories/Toolbar.stories.tsx
@@ -10,17 +10,21 @@
  * governing permissions and limitations under the License.
  */
 
-import {Checkbox, Link, ToggleButton, Toolbar, ToolbarProps} from 'react-aria-components';
+import {Checkbox, Link, ToggleButton, Toolbar} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
+import {ComponentMeta, ComponentStoryFn} from '@storybook/react';
 import {Orientation} from 'react-stately';
 import React from 'react';
 import styles from '../example/index.css';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Toolbar
+} as ComponentMeta<typeof Toolbar>;
+
+export type ToolbarStory = ComponentStoryFn<typeof Toolbar>;
 
-export const ToolbarExample = (props: ToolbarProps) => {
+export const ToolbarExample: ToolbarStory = (props) => {
   return (
     <div>
       <label htmlFor="before">Input Before Toolbar</label>
diff --git a/packages/react-aria-components/stories/Tooltip.stories.tsx b/packages/react-aria-components/stories/Tooltip.stories.tsx
index 4483730e2b2..dab9d0a5e0f 100644
--- a/packages/react-aria-components/stories/Tooltip.stories.tsx
+++ b/packages/react-aria-components/stories/Tooltip.stories.tsx
@@ -11,13 +11,18 @@
  */
 
 import {Button, OverlayArrow, Tooltip, TooltipTrigger} from 'react-aria-components';
-import React from 'react';
+import {ComponentMeta, ComponentStoryFn, ComponentStoryObj} from '@storybook/react';
+import React, {JSX} from 'react';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Tooltip
+} as ComponentMeta<typeof Tooltip>;
+
+export type TooltipStory = ComponentStoryFn<typeof Tooltip>;
+export type TooltipStoryObj = ComponentStoryObj<typeof Tooltip>;
 
-export const TooltipExample = () => (
+export const TooltipExample: TooltipStory = () => (
   <TooltipTrigger>
     <Button>Tooltip trigger</Button>
     <Tooltip
@@ -39,7 +44,224 @@ export const TooltipExample = () => (
   </TooltipTrigger>
 );
 
-export const TooltipArrowBoundaryOffsetExample = {
+function TooltipArrowBoundaryOffsetExampleRender(args: {
+  topLeft: number,
+  topRight: number,
+  leftTop: number,
+  leftBottom: number,
+  rightTop: number,
+  rightBottom: number,
+  bottomLeft: number,
+  bottomRight: number
+}): JSX.Element {
+  let {topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight} = args;
+  return (
+    <div style={{display: 'flex', flexDirection: 'column'}}>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Top left</Button>
+            <Tooltip
+              placement="top left"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={topLeft}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Top left
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Top right</Button>
+            <Tooltip
+              placement="top right"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={topRight}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Top right
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Left top</Button>
+            <Tooltip
+              placement="left top"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={leftTop}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(-90deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Left top
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Left bottom</Button>
+            <Tooltip
+              placement="left bottom"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={leftBottom}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(-90deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Left bottom
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Right top</Button>
+            <Tooltip
+              placement="right top"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={rightTop}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(90deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Right top
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Right bottom</Button>
+            <Tooltip
+              placement="right bottom"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={rightBottom}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(90deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Right bottom
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+      </div>
+      <div style={{display: 'flex'}}>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Bottom left</Button>
+            <Tooltip
+              placement="bottom left"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={bottomLeft}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(180deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Bottom left
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+        <div style={{padding: 12}}>
+          <TooltipTrigger isOpen delay={0} closeDelay={0}>
+            <Button style={{width: 200, height: 100}}>Bottom right</Button>
+            <Tooltip
+              placement="bottom right"
+              shouldFlip={false}
+              offset={7}
+              arrowBoundaryOffset={bottomRight}
+              style={{
+                background: 'Canvas',
+                color: 'CanvasText',
+                border: '1px solid gray',
+                padding: 8,
+                borderRadius: 9999
+              }}>
+              <OverlayArrow>
+                <svg width="8" height="8" style={{display: 'block', transform: 'rotate(180deg)'}}>
+                  <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
+                </svg>
+              </OverlayArrow>
+              Bottom right
+            </Tooltip>
+          </TooltipTrigger>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export const TooltipArrowBoundaryOffsetExample: ComponentStoryObj<typeof TooltipArrowBoundaryOffsetExampleRender> = {
   args: {
     topLeft: 25,
     topRight: 25,
@@ -72,7 +294,7 @@ export const TooltipArrowBoundaryOffsetExample = {
         max: 100
       }
     },
-    leftBotton: {
+    leftBottom: {
       control: {
         type: 'range',
         min: -100,
@@ -108,210 +330,5 @@ export const TooltipArrowBoundaryOffsetExample = {
       }
     }
   },
-  render: ({topLeft, topRight, leftTop, leftBottom, rightTop, rightBottom, bottomLeft, bottomRight}: any) => {
-    return (
-      <div style={{display: 'flex', flexDirection: 'column'}}>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Top left</Button>
-              <Tooltip
-                placement="top left"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={topLeft}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Top left
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Top right</Button>
-              <Tooltip
-                placement="top right"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={topRight}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Top right
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Left top</Button>
-              <Tooltip
-                placement="left top"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={leftTop}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(-90deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Left top
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Left bottom</Button>
-              <Tooltip
-                placement="left bottom"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={leftBottom}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(-90deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Left bottom
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Right top</Button>
-              <Tooltip
-                placement="right top"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={rightTop}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(90deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Right top
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Right bottom</Button>
-              <Tooltip
-                placement="right bottom"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={rightBottom}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(90deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Right bottom
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-        </div>
-        <div style={{display: 'flex'}}>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Bottom left</Button>
-              <Tooltip
-                placement="bottom left"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={bottomLeft}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(180deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Bottom left
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-          <div style={{padding: 12}}>
-            <TooltipTrigger isOpen delay={0} closeDelay={0}>
-              <Button style={{width: 200, height: 100}}>Bottom right</Button>
-              <Tooltip
-                placement="bottom right"
-                shouldFlip={false}
-                offset={7}
-                arrowBoundaryOffset={bottomRight}
-                style={{
-                  background: 'Canvas',
-                  color: 'CanvasText',
-                  border: '1px solid gray',
-                  padding: 8,
-                  borderRadius: 9999
-                }}>
-                <OverlayArrow>
-                  <svg width="8" height="8" style={{display: 'block', transform: 'rotate(180deg)'}}>
-                    <path d="M0 0L4 4L8 0" fill="white" strokeWidth={1} stroke="gray" />
-                  </svg>
-                </OverlayArrow>
-                Bottom right
-              </Tooltip>
-            </TooltipTrigger>
-          </div>
-        </div>
-      </div>
-    );
-  }
+  render: (args) => <TooltipArrowBoundaryOffsetExampleRender {...args} />
 };
diff --git a/packages/react-aria-components/stories/Tree.stories.tsx b/packages/react-aria-components/stories/Tree.stories.tsx
index f9a83404b71..4bcf0040267 100644
--- a/packages/react-aria-components/stories/Tree.stories.tsx
+++ b/packages/react-aria-components/stories/Tree.stories.tsx
@@ -13,15 +13,19 @@
 import {action} from '@storybook/addon-actions';
 import {Button, Checkbox, CheckboxProps, Collection, DroppableCollectionReorderEvent, isTextDropItem, Key, ListLayout, Menu, MenuTrigger, Popover, Text, Tree, TreeItem, TreeItemContent, TreeItemProps, TreeProps, useDragAndDrop, Virtualizer} from 'react-aria-components';
 import {classNames} from '@react-spectrum/utils';
+import {ComponentMeta, ComponentStoryFn, ComponentStoryObj} from '@storybook/react';
 import {MyMenuItem} from './utils';
-import React, {ReactNode} from 'react';
+import React, {JSX, ReactNode} from 'react';
 import styles from '../example/index.css';
 import {UNSTABLE_TreeLoadingIndicator} from '../src/Tree';
 import {useTreeData} from '@react-stately/data';
 
 export default {
-  title: 'React Aria Components'
-};
+  title: 'React Aria Components',
+  component: Tree
+} as ComponentMeta<typeof Tree>;
+
+export type TreeStory = ComponentStoryFn<typeof Tree>;
 
 interface StaticTreeItemProps extends TreeItemProps {
   title?: string,
@@ -138,7 +142,7 @@ const StaticTreeItemNoActions = (props: StaticTreeItemProps) => {
   );
 };
 
-const TreeExampleStaticRender = (args) => (
+const TreeExampleStaticRender = <T extends object>(args: TreeProps<T>): JSX.Element => (
   <Tree className={styles.tree} {...args} disabledKeys={['projects']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
     <StaticTreeItem id="Photos" textValue="Photos">Photos</StaticTreeItem>
     <StaticTreeItem id="projects" textValue="Projects" title="Projects">
@@ -185,7 +189,7 @@ const TreeExampleStaticRender = (args) => (
   </Tree>
 );
 
-const TreeExampleStaticNoActionsRender = (args) => (
+const TreeExampleStaticNoActionsRender = <T extends object>(args: TreeProps<T>): JSX.Element => (
   <Tree className={styles.tree} {...args} disabledKeys={['projects']} aria-label="test static tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
     <StaticTreeItemNoActions id="Photos" textValue="Photos">Photos</StaticTreeItemNoActions>
     <StaticTreeItemNoActions id="projects" textValue="Projects" title="Projects">
@@ -232,13 +236,12 @@ const TreeExampleStaticNoActionsRender = (args) => (
   </Tree>
 );
 
-export const TreeExampleStatic = {
-  render: TreeExampleStaticRender,
+export const TreeExampleStatic: ComponentStoryObj<typeof TreeExampleStaticRender> = {
+  render: (args) => <TreeExampleStaticRender {...args} />,
   args: {
     selectionMode: 'none',
     selectionBehavior: 'toggle',
-    disabledBehavior: 'selection',
-    disallowClearAll: false
+    disabledBehavior: 'selection'
   },
   argTypes: {
     selectionMode: {
@@ -261,13 +264,12 @@ export const TreeExampleStatic = {
   }
 };
 
-export const TreeExampleStaticNoActions = {
-  render: TreeExampleStaticNoActionsRender,
+export const TreeExampleStaticNoActions: ComponentStoryObj<typeof TreeExampleStaticNoActionsRender> = {
+  render: (args) => <TreeExampleStaticNoActionsRender {...args} />,
   args: {
     selectionMode: 'none',
     selectionBehavior: 'toggle',
-    disabledBehavior: 'selection',
-    disallowClearAll: false
+    disabledBehavior: 'selection'
   },
   argTypes: {
     selectionMode: {
@@ -411,7 +413,7 @@ const DynamicTreeItem = (props: DynamicTreeItemProps) => {
 
 let defaultExpandedKeys = new Set(['projects', 'project-2', 'project-5', 'reports', 'reports-1', 'reports-1A', 'reports-1AB']);
 
-const TreeExampleDynamicRender = (args: TreeProps<unknown>) => {
+const TreeExampleDynamicRender = <T extends object>(args: TreeProps<T>): JSX.Element => {
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -429,13 +431,13 @@ const TreeExampleDynamicRender = (args: TreeProps<unknown>) => {
   );
 };
 
-export const TreeExampleDynamic = {
+export const TreeExampleDynamic: ComponentStoryObj<typeof TreeExampleDynamicRender> = {
   ...TreeExampleStatic,
-  render: TreeExampleDynamicRender,
-  parameters: null
+  render: (args) => <TreeExampleDynamicRender {...args} />,
+  parameters: undefined
 };
 
-export const WithActions = {
+export const WithActions: ComponentStoryObj<typeof TreeExampleDynamicRender> = {
   ...TreeExampleDynamic,
   args: {
     onAction: action('onAction'),
@@ -444,7 +446,7 @@ export const WithActions = {
   name: 'Tree with actions'
 };
 
-const WithLinksRender = (args: TreeProps<unknown>) => {
+const WithLinksRender = <T extends object>(args: TreeProps<T>): JSX.Element => {
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -461,9 +463,9 @@ const WithLinksRender = (args: TreeProps<unknown>) => {
   );
 };
 
-export const WithLinks = {
+export const WithLinks: ComponentStoryObj<typeof WithLinksRender> = {
   ...TreeExampleDynamic,
-  render: WithLinksRender,
+  render: (args) => <WithLinksRender {...args} />,
   name: 'Tree with links',
   parameters: {
     description: {
@@ -476,7 +478,7 @@ function renderEmptyLoader({isLoading}) {
   return isLoading ? 'Root level loading spinner' : 'Nothing in tree';
 }
 
-const EmptyTreeStatic = (args: {isLoading: boolean}) => (
+const EmptyTreeStatic = <T extends object>(args: TreeProps<T> & {isLoading: boolean}): JSX.Element => (
   <Tree
     {...args}
     className={styles.tree}
@@ -492,15 +494,16 @@ const EmptyTreeStatic = (args: {isLoading: boolean}) => (
   </Tree>
 );
 
-export const EmptyTreeStaticStory = {
-  render: EmptyTreeStatic,
+export const EmptyTreeStaticStory: ComponentStoryObj<typeof EmptyTreeStatic> = {
+  render: (args) => <EmptyTreeStatic {...args} />,
   args: {
     isLoading: false
   },
   name: 'Empty/Loading Tree rendered with TreeLoader collection element'
 };
 
-function LoadingStoryDepOnCollection(args) {
+function LoadingStoryDepOnCollection<T extends object>(props: TreeProps<T> & {isLoading: boolean}): JSX.Element {
+  let {isLoading, ...args} = props;
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -509,20 +512,20 @@ function LoadingStoryDepOnCollection(args) {
 
   return (
     <Tree {...args} defaultExpandedKeys={defaultExpandedKeys} disabledKeys={['reports-1AB']} className={styles.tree} aria-label="test dynamic tree" onExpandedChange={action('onExpandedChange')} onSelectionChange={action('onSelectionChange')}>
-      <Collection items={treeData.items} dependencies={[args.isLoading]}>
+      <Collection items={treeData.items} dependencies={[isLoading]}>
         {(item) => (
-          <DynamicTreeItem renderLoader={(id) => id === 'project-2C'} isLoading={args.isLoading} id={item.key} childItems={item.children ?? []} textValue={item.value.name}>
+          <DynamicTreeItem renderLoader={(id) => id === 'project-2C'} isLoading={isLoading} id={item.key} childItems={item.children ?? []} textValue={item.value.name}>
             {item.value.name}
           </DynamicTreeItem>
         )}
       </Collection>
-      {args.isLoading && <MyTreeLoader />}
+      {isLoading && <MyTreeLoader />}
     </Tree>
   );
 }
 
-export const LoadingStoryDepOnCollectionStory = {
-  render: LoadingStoryDepOnCollection,
+export const LoadingStoryDepOnCollectionStory: ComponentStoryObj<typeof LoadingStoryDepOnCollection> = {
+  render: (args) => <LoadingStoryDepOnCollection {...args} />,
   args: {
     isLoading: false
   },
@@ -534,7 +537,7 @@ export const LoadingStoryDepOnCollectionStory = {
   }
 };
 
-function LoadingStoryDepOnTop(args: TreeProps<unknown> & {isLoading: boolean}) {
+function LoadingStoryDepOnTop<T extends object>(args: TreeProps<T> & {isLoading: boolean}): JSX.Element {
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -552,8 +555,8 @@ function LoadingStoryDepOnTop(args: TreeProps<unknown> & {isLoading: boolean}) {
   );
 }
 
-export const LoadingStoryDepOnTopStory = {
-  render: LoadingStoryDepOnTop,
+export const LoadingStoryDepOnTopStory: ComponentStoryObj<typeof LoadingStoryDepOnTop> = {
+  render: (args) => <LoadingStoryDepOnTop {...args} />,
   args: {
     isLoading: false
   },
@@ -630,7 +633,7 @@ const DynamicTreeItemWithButtonLoader = (props: DynamicTreeItemProps) => {
   );
 };
 
-function ButtonLoadingIndicator(args: TreeProps<unknown> & {isLoading: boolean}) {
+function ButtonLoadingIndicator<T extends object>(args: TreeProps<T> & {isLoading: boolean}): JSX.Element {
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -647,8 +650,8 @@ function ButtonLoadingIndicator(args: TreeProps<unknown> & {isLoading: boolean})
   );
 }
 
-export const ButtonLoadingIndicatorStory = {
-  render: ButtonLoadingIndicator,
+export const ButtonLoadingIndicatorStory: ComponentStoryObj<typeof ButtonLoadingIndicator> = {
+  render: (args) => <ButtonLoadingIndicator {...args} />,
   args: {
     isLoading: false
   },
@@ -659,7 +662,8 @@ export const ButtonLoadingIndicatorStory = {
     }
   }
 };
-function VirtualizedTreeRender(args) {
+
+function VirtualizedTreeRender<T extends object>(args: TreeProps<T>): JSX.Element {
   return (
     <Virtualizer layout={ListLayout} layoutOptions={{rowHeight: 30}}>
       <TreeExampleDynamicRender {...args} />
@@ -667,12 +671,12 @@ function VirtualizedTreeRender(args) {
   );
 }
 
-export const VirtualizedTree = {
+export const VirtualizedTree: ComponentStoryObj<typeof VirtualizedTreeRender> = {
   ...TreeExampleDynamic,
-  render: VirtualizedTreeRender
+  render: (args) => <VirtualizedTreeRender {...args} />
 };
 
-function TreeDragAndDropExample(args) {
+function TreeDragAndDropExample<T extends object>(args: TreeProps<T> & {shouldAcceptItemDrop: 'folders' | 'all', dropFunction: 'onMove' | 'onInsert' | 'onRootDrop', shouldAllowInsert: boolean}): JSX.Element {
   let treeData = useTreeData<any>({
     initialItems: rows,
     getKey: item => item.id,
@@ -848,9 +852,9 @@ function SecondTree(args) {
   );
 }
 
-export const TreeWithDragAndDrop = {
+export const TreeWithDragAndDrop: ComponentStoryObj<typeof TreeDragAndDropExample> = {
   ...TreeExampleDynamic,
-  render: function TreeDndExample(args) {
+  render: (args) => {
     return (
       <div style={{display: 'flex', gap: 12, flexWrap: 'wrap'}}>
         <TreeDragAndDropExample {...args} />
diff --git a/packages/react-aria-components/stories/animations.stories.tsx b/packages/react-aria-components/stories/animations.stories.tsx
index c90cb9137ef..b08fa420cda 100644
--- a/packages/react-aria-components/stories/animations.stories.tsx
+++ b/packages/react-aria-components/stories/animations.stories.tsx
@@ -16,7 +16,7 @@ export default {
 };
 
 export let ModalAnimation = {
-  render: () => {
+  render: (): React.ReactElement => {
     return (
       <div className="App">
         <DialogTrigger>
diff --git a/packages/react-aria-components/stories/utils.tsx b/packages/react-aria-components/stories/utils.tsx
index c277ef1630e..d5a7439afa9 100644
--- a/packages/react-aria-components/stories/utils.tsx
+++ b/packages/react-aria-components/stories/utils.tsx
@@ -1,9 +1,9 @@
 import {classNames} from '@react-spectrum/utils';
 import {ListBoxItem, ListBoxItemProps, MenuItem, MenuItemProps, ProgressBar} from 'react-aria-components';
-import React from 'react';
+import React, {JSX} from 'react';
 import styles from '../example/index.css';
 
-export const MyListBoxItem = (props: ListBoxItemProps) => {
+export const MyListBoxItem = (props: ListBoxItemProps): JSX.Element => {
   return (
     <ListBoxItem
       {...props}
@@ -17,7 +17,7 @@ export const MyListBoxItem = (props: ListBoxItemProps) => {
   );
 };
 
-export const MyMenuItem = (props: MenuItemProps) => {
+export const MyMenuItem = (props: MenuItemProps): JSX.Element => {
   return (
     <MenuItem
       {...props}
@@ -30,7 +30,7 @@ export const MyMenuItem = (props: MenuItemProps) => {
   );
 };
 
-export const LoadingSpinner = ({style = {}}) => {
+export const LoadingSpinner = ({style = {}}: {style?: React.CSSProperties}): JSX.Element => {
   return (
     <ProgressBar
       aria-label="loading"
diff --git a/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx b/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx
index 9fb6ca08ce5..b6c208abf90 100644
--- a/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx
+++ b/packages/react-aria-components/test/AriaAutocomplete.test-util.tsx
@@ -63,7 +63,7 @@ interface AriaAutocompleteTestProps extends AriaBaseTestProps {
   selectionListener?: jest.Mock<any, any>,
   actionListener?: jest.Mock<any, any>
 }
-export const AriaAutocompleteTests = ({renderers, setup, prefix, ariaPattern = 'menu', selectionListener, actionListener}: AriaAutocompleteTestProps) => {
+export const AriaAutocompleteTests = ({renderers, setup, prefix, ariaPattern = 'menu', selectionListener, actionListener}: AriaAutocompleteTestProps): void => {
   describe(prefix ? prefix + ' AriaAutocomplete' : 'AriaAutocomplete', function () {
     let user;
     let collectionNodeRole;
@@ -706,7 +706,7 @@ export const AriaAutocompleteTests = ({renderers, setup, prefix, ariaPattern = '
 
         describe('pointer events', function () {
           installPointerEvent();
-          
+
           it('should close the menu when hovering an adjacent menu item in the virtual focus list', async function () {
             let {getByRole, getAllByRole} = (renderers.submenus!)();
             let menu = getByRole('menu');
diff --git a/packages/react-aria-components/test/AriaMenu.test-util.tsx b/packages/react-aria-components/test/AriaMenu.test-util.tsx
index 2913168417d..201cb2627ab 100644
--- a/packages/react-aria-components/test/AriaMenu.test-util.tsx
+++ b/packages/react-aria-components/test/AriaMenu.test-util.tsx
@@ -63,7 +63,7 @@ interface AriaMenuTestProps extends AriaBaseTestProps {
     submenus?: (props?: {name: string}) => ReturnType<typeof render>
   }
 }
-export const AriaMenuTests = ({renderers, setup, prefix}: AriaMenuTestProps) => {
+export const AriaMenuTests = ({renderers, setup, prefix}: AriaMenuTestProps): void => {
   describe(prefix ? prefix + 'AriaMenuTrigger' : 'AriaMenuTrigger', function () {
     let onOpenChange = jest.fn();
     let onOpen = jest.fn();
diff --git a/packages/react-aria-components/test/AriaTree.test-util.tsx b/packages/react-aria-components/test/AriaTree.test-util.tsx
index 357cceac0e6..f695141b107 100644
--- a/packages/react-aria-components/test/AriaTree.test-util.tsx
+++ b/packages/react-aria-components/test/AriaTree.test-util.tsx
@@ -54,7 +54,7 @@ interface AriaTreeTestProps extends AriaBaseTestProps {
     allInteractionsDisabled?: (props?: {name: string}) => ReturnType<typeof render>
   }
 }
-export const AriaTreeTests = ({renderers, setup, prefix}: AriaTreeTestProps) => {
+export const AriaTreeTests = ({renderers, setup, prefix}: AriaTreeTestProps): void => {
   describe(prefix ? prefix + 'AriaTree' : 'AriaTree', function () {
     let user;
     let testUtilUser = new User();

From def0d48d023b63c3e7a296ba332141094a530271 Mon Sep 17 00:00:00 2001
From: Robert Snow <snowystinger@gmail.com>
Date: Wed, 11 Jun 2025 18:59:49 +1000
Subject: [PATCH 8/8] remove the harder to deal with satisfies

---
 packages/react-aria-components/src/Button.tsx |  7 ++--
 .../react-aria-components/src/Collection.tsx  |  6 +--
 .../react-aria-components/src/GridList.tsx    | 14 ++++---
 packages/react-aria-components/src/Input.tsx  |  7 ++--
 packages/react-aria-components/src/Label.tsx  |  7 ++--
 .../react-aria-components/src/ListBox.tsx     | 20 +++++----
 packages/react-aria-components/src/Menu.tsx   | 20 +++++----
 .../react-aria-components/src/Separator.tsx   |  7 ++--
 packages/react-aria-components/src/Table.tsx  | 42 +++++++++++--------
 packages/react-aria-components/src/Tabs.tsx   | 14 ++++---
 .../react-aria-components/src/TagGroup.tsx    |  7 ++--
 .../react-aria-components/src/TextField.tsx   |  7 ++--
 packages/react-aria-components/src/Tree.tsx   | 21 ++++++----
 13 files changed, 101 insertions(+), 78 deletions(-)

diff --git a/packages/react-aria-components/src/Button.tsx b/packages/react-aria-components/src/Button.tsx
index ee8a6954c1d..404cc449f70 100644
--- a/packages/react-aria-components/src/Button.tsx
+++ b/packages/react-aria-components/src/Button.tsx
@@ -106,7 +106,9 @@ export const ButtonContext: Context<ContextValue<ButtonContextValue, HTMLButtonE
 /**
  * A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
  */
-export const Button = /*#__PURE__*/ createHideableComponent(function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
+export const Button:
+  (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null =
+/*#__PURE__*/ createHideableComponent(function Button(props: ButtonProps, ref: ForwardedRef<HTMLButtonElement>) {
   [props, ref] = useContextProps(props, ref, ButtonContext);
   props = disablePendingProps(props);
   let ctx = props as ButtonContextValue;
@@ -181,8 +183,7 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
       </ProgressBarContext.Provider>
     </button>
   );
-}) satisfies (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null as
- (props: ButtonProps & React.RefAttributes<HTMLButtonElement>) => React.ReactElement | null;
+});
 
 function disablePendingProps(props) {
   // Don't allow interaction while isPending is true
diff --git a/packages/react-aria-components/src/Collection.tsx b/packages/react-aria-components/src/Collection.tsx
index 6c7d591f786..ab96a7f49af 100644
--- a/packages/react-aria-components/src/Collection.tsx
+++ b/packages/react-aria-components/src/Collection.tsx
@@ -100,15 +100,15 @@ interface SectionContextValue {
 export const SectionContext: Context<SectionContextValue | null> = createContext<SectionContextValue | null>(null);
 
 /** @deprecated */
-export const Section =
+export const Section:
+  <T extends object>(props: SectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null =
 /*#__PURE__*/ createBranchComponent('section', <T extends object>(props: SectionProps<T>, ref: ForwardedRef<HTMLElement>, section: Node<object>): JSX.Element => {
   let {name, render} = useContext(SectionContext)!;
   if (process.env.NODE_ENV !== 'production') {
     console.warn(`<Section> is deprecated. Please use <${name}> instead.`);
   }
   return render(props, ref, section, 'react-aria-Section');
-}) satisfies <T extends object>(props: SectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null as
-  <T extends object>(props: SectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null;
+});
 
 export interface CollectionBranchProps {
   /** The collection of items to render. */
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index b776f11fef3..b86fd1396a1 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -282,7 +282,9 @@ export interface GridListItemProps<T = object> extends RenderProps<GridListItemR
 /**
  * A GridListItem represents an individual item in a GridList.
  */
-export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function GridListItem<T extends object>(props: GridListItemProps<T>, forwardedRef: ForwardedRef<Element>, item: Node<object>) {
+export const GridListItem:
+ <T extends object>(props: GridListItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ createLeafComponent('item', function GridListItem<T extends object>(props: GridListItemProps<T>, forwardedRef: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext);
   let ref = useObjectRef<HTMLDivElement>(forwardedRef as ForwardedRef<HTMLDivElement>);
@@ -417,8 +419,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
       </div>
     </>
   );
-}) satisfies <T extends object>(props: GridListItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
-<T extends object>(props: GridListItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+});
 
 function GridListDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
   ref = useObjectRef(ref);
@@ -511,7 +512,9 @@ export interface GridListLoadingSentinelProps extends Omit<LoadMoreSentinelProps
   isLoading?: boolean
 }
 
-export const UNSTABLE_GridListLoadingSentinel = /*#__PURE__*/ createLeafComponent('loader', function GridListLoadingIndicator(props: GridListLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
+export const UNSTABLE_GridListLoadingSentinel:
+  (props: GridListLoadingSentinelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ createLeafComponent('loader', function GridListLoadingIndicator(props: GridListLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -556,5 +559,4 @@ export const UNSTABLE_GridListLoadingSentinel = /*#__PURE__*/ createLeafComponen
       )}
     </>
   );
-}) satisfies (props: GridListLoadingSentinelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
-(props: GridListLoadingSentinelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+});
diff --git a/packages/react-aria-components/src/Input.tsx b/packages/react-aria-components/src/Input.tsx
index dc637576f33..92848f659f3 100644
--- a/packages/react-aria-components/src/Input.tsx
+++ b/packages/react-aria-components/src/Input.tsx
@@ -56,7 +56,9 @@ let filterHoverProps = (props: InputProps) => {
 /**
  * An input allows a user to input text.
  */
-export const Input = /*#__PURE__*/ createHideableComponent(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
+export const Input:
+  (props: InputProps & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null =
+/*#__PURE__*/ createHideableComponent(function Input(props: InputProps, ref: ForwardedRef<HTMLInputElement>) {
   [props, ref] = useContextProps(props, ref, InputContext);
 
   let {hoverProps, isHovered} = useHover(props);
@@ -89,6 +91,5 @@ export const Input = /*#__PURE__*/ createHideableComponent(function Input(props:
       data-focus-visible={isFocusVisible || undefined}
       data-invalid={isInvalid || undefined} />
   );
-}) satisfies (props: InputProps & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null as
-(props: InputProps & React.RefAttributes<HTMLInputElement>) => React.ReactElement | null;
+});
 
diff --git a/packages/react-aria-components/src/Label.tsx b/packages/react-aria-components/src/Label.tsx
index 256b38109fd..1990fa352e4 100644
--- a/packages/react-aria-components/src/Label.tsx
+++ b/packages/react-aria-components/src/Label.tsx
@@ -20,11 +20,12 @@ export interface LabelProps extends LabelHTMLAttributes<HTMLLabelElement> {
 
 export const LabelContext: Context<ContextValue<LabelProps, HTMLLabelElement>> = createContext<ContextValue<LabelProps, HTMLLabelElement>>({});
 
-export const Label = /*#__PURE__*/ createHideableComponent(function Label(props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
+export const Label:
+  (props: LabelProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null =
+/*#__PURE__*/ createHideableComponent(function Label(props: LabelProps, ref: ForwardedRef<HTMLLabelElement>) {
   [props, ref] = useContextProps(props, ref, LabelContext);
   let {elementType: ElementType = 'label', ...labelProps} = props;
   // @ts-ignore
   return <ElementType className="react-aria-Label" {...labelProps} ref={ref} />;
-}) satisfies (props: LabelProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null as
-(props: LabelProps & React.RefAttributes<HTMLLabelElement>) => React.ReactElement | null;
+});
 
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index a1996b1c2df..31bb1c9c8a8 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -306,9 +306,9 @@ function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, re
 /**
  * A ListBoxSection represents a section within a ListBox.
  */
-export const ListBoxSection = /*#__PURE__*/ createBranchComponent('section', ListBoxSectionInner) satisfies
-  <T extends object>(props: ListBoxSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement | null as
-  <T extends object>(props: ListBoxSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
+export const ListBoxSection:
+  <T extends object>(props: ListBoxSectionProps<T> & React.RefAttributes<HTMLElement>) => React.ReactElement | null =
+/*#__PURE__*/ createBranchComponent('section', ListBoxSectionInner);
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
@@ -333,7 +333,9 @@ export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRen
 /**
  * A ListBoxItem represents an individual option in a ListBox.
  */
-export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, forwardedRef: ForwardedRef<Element>, item: Node<object>) {
+export const ListBoxItem:
+  <T extends object>(props: ListBoxItemProps<T> & React.RefAttributes<T>) => React.ReactElement | null =
+/*#__PURE__*/ createLeafComponent('item', function ListBoxItem<T extends object>(props: ListBoxItemProps<T>, forwardedRef: ForwardedRef<Element>, item: Node<object>) {
   let ref = useObjectRef<any>(forwardedRef);
   let state = useContext(ListStateContext)!;
   let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
@@ -416,8 +418,7 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
       </Provider>
     </ElementType>
   );
-}) satisfies <T extends object>(props: ListBoxItemProps<T> & React.RefAttributes<T>) => React.ReactElement | null as
-<T extends object>(props: ListBoxItemProps<T> & React.RefAttributes<T>) => React.ReactElement | null;
+});
 
 
 function ListBoxDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
@@ -482,7 +483,9 @@ export interface ListBoxLoadingSentinelProps extends Omit<LoadMoreSentinelProps,
   isLoading?: boolean
 }
 
-export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', function ListBoxLoadingIndicator(props: ListBoxLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
+export const UNSTABLE_ListBoxLoadingSentinel:
+  (props: ListBoxLoadingSentinelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+createLeafComponent('loader', function ListBoxLoadingIndicator(props: ListBoxLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(ListStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -533,6 +536,5 @@ export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', fun
       )}
     </>
   );
-}) satisfies (props: ListBoxLoadingSentinelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
-(props: ListBoxLoadingSentinelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+});
 
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index 1412e17f42e..54cc68f6993 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -113,7 +113,9 @@ const SubmenuTriggerContext = createContext<{parentMenuRef: RefObject<HTMLElemen
  *
  * @version alpha
  */
-export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigger', (props: SubmenuTriggerProps, ref: ForwardedRef<HTMLDivElement>, item) => {
+export const SubmenuTrigger:
+  (props: SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ createBranchComponent('submenutrigger', (props: SubmenuTriggerProps, ref: ForwardedRef<HTMLDivElement>, item) => {
   let {CollectionBranch} = useContext(CollectionRendererContext);
   let state = useContext(MenuStateContext)!;
   let rootMenuTriggerState = useContext(RootMenuTriggerStateContext)!;
@@ -147,8 +149,7 @@ export const SubmenuTrigger =  /*#__PURE__*/ createBranchComponent('submenutrigg
       {props.children[1]}
     </Provider>
   );
-}, props => props.children[0]) satisfies (props: SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null as
-(props: SubmenuTriggerProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null;
+}, props => props.children[0]);
 
 
 export interface MenuRenderProps {
@@ -326,9 +327,9 @@ function MenuSectionInner<T extends object>(props: MenuSectionProps<T>, ref: For
 /**
  * A MenuSection represents a section within a Menu.
  */
-export const MenuSection = /*#__PURE__*/ createBranchComponent('section', MenuSectionInner) satisfies
-<T extends object>(props: MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null as
-<T extends object>(props: MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null;
+export const MenuSection:
+  <T extends object>(props: MenuSectionProps<T> & React.RefAttributes<HTMLElement>) => ReactElement | null =
+/*#__PURE__*/ createBranchComponent('section', MenuSectionInner);
 
 export interface MenuItemRenderProps extends ItemRenderProps {
   /**
@@ -365,7 +366,9 @@ const MenuItemContext = createContext<ContextValue<MenuItemProps, HTMLDivElement
 /**
  * A MenuItem represents an individual action in a Menu.
  */
-export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuItem<T extends object>(props: MenuItemProps<T>, forwardedRef: ForwardedRef<Element>, item: Node<object>) {
+export const MenuItem:
+  <T extends object>(props: MenuItemProps<T> & React.RefAttributes<T>) => ReactElement | null =
+/*#__PURE__*/ createLeafComponent('item', function MenuItem<T extends object>(props: MenuItemProps<T>, forwardedRef: ForwardedRef<Element>, item: Node<object>) {
   [props, forwardedRef] = useContextProps(props, forwardedRef as ForwardedRef<HTMLDivElement>, MenuItemContext);
   let id = useSlottedContext(MenuItemContext)?.id as string;
   let state = useContext(MenuStateContext)!;
@@ -429,6 +432,5 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
       </Provider>
     </ElementType>
   );
-}) satisfies <T extends object>(props: MenuItemProps<T> & React.RefAttributes<T>) => ReactElement | null as
-<T extends object>(props: MenuItemProps<T> & React.RefAttributes<T>) => ReactElement | null;
+});
 
diff --git a/packages/react-aria-components/src/Separator.tsx b/packages/react-aria-components/src/Separator.tsx
index 32a4d1b4b95..27f326cdff6 100644
--- a/packages/react-aria-components/src/Separator.tsx
+++ b/packages/react-aria-components/src/Separator.tsx
@@ -20,7 +20,9 @@ export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProp
 
 export const SeparatorContext: Context<ContextValue<SeparatorProps, HTMLElement>> = createContext<ContextValue<SeparatorProps, HTMLElement>>({});
 
-export const Separator = /*#__PURE__*/ createLeafComponent('separator', function Separator(props: SeparatorProps, ref: ForwardedRef<HTMLElement>) {
+export const Separator:
+  (props: SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null =
+/*#__PURE__*/ createLeafComponent('separator', function Separator(props: SeparatorProps, ref: ForwardedRef<HTMLElement>) {
   [props, ref] = useContextProps(props, ref, SeparatorContext);
 
   let {elementType, orientation, style, className, slot, ...otherProps} = props;
@@ -44,5 +46,4 @@ export const Separator = /*#__PURE__*/ createLeafComponent('separator', function
       ref={ref}
       slot={slot || undefined} />
   );
-}) satisfies (props: SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null as
-(props: SeparatorProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
+});
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index 9386dc20718..beb3e334c17 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -556,7 +556,9 @@ export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderP
 /**
  * A header within a `<Table>`, containing the table columns.
  */
-export const TableHeader =  /*#__PURE__*/ createBranchComponent(
+export const TableHeader:
+  <T extends object>(props: TableHeaderProps<T> & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null =
+/*#__PURE__*/ createBranchComponent(
   'tableheader',
   <T extends object>(props: TableHeaderProps<T>, ref: ForwardedRef<HTMLTableSectionElement>) => {
     let collection = useContext(TableStateContext)!.collection as TableCollection<unknown>;
@@ -604,8 +606,7 @@ export const TableHeader =  /*#__PURE__*/ createBranchComponent(
       {props.children}
     </Collection>
   )
-) satisfies <T extends object>(props: TableHeaderProps<T> & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null as
-<T extends object>(props: TableHeaderProps<T> & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null;
+);
 
 
 function TableHeaderRow({item}: {item: GridNode<any>}) {
@@ -695,7 +696,9 @@ export interface ColumnProps extends RenderProps<ColumnRenderProps> {
 /**
  * A column within a `<Table>`.
  */
-export const Column = /*#__PURE__*/ createLeafComponent('column', (props: ColumnProps, forwardedRef: ForwardedRef<HTMLTableCellElement>, column: GridNode<object>) => {
+export const Column:
+  (props: ColumnProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ createLeafComponent('column', (props: ColumnProps, forwardedRef: ForwardedRef<HTMLTableCellElement>, column: GridNode<object>) => {
   let ref = useObjectRef<HTMLTableHeaderCellElement>(forwardedRef);
   let state = useContext(TableStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
@@ -775,8 +778,7 @@ export const Column = /*#__PURE__*/ createLeafComponent('column', (props: Column
       </Provider>
     </TH>
   );
-}) satisfies (props: ColumnProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null as
-(props: ColumnProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null;
+});
 
 
 export interface ColumnResizerRenderProps {
@@ -932,7 +934,9 @@ export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKey
 /**
  * The body of a `<Table>`, containing the table rows.
  */
-export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T extends object>(props: TableBodyProps<T>, ref: ForwardedRef<HTMLTableSectionElement>) => {
+export const TableBody:
+  <T extends object>(props: TableBodyProps<T> & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null =
+/*#__PURE__*/ createBranchComponent('tablebody', <T extends object>(props: TableBodyProps<T>, ref: ForwardedRef<HTMLTableSectionElement>) => {
   let state = useContext(TableStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let collection = state.collection;
@@ -999,8 +1003,7 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
       {emptyState}
     </TBody>
   );
-}) satisfies <T extends object>(props: TableBodyProps<T> & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null as
-<T extends object>(props: TableBodyProps<T> & React.RefAttributes<HTMLTableSectionElement>) => ReactElement | null;
+});
 
 
 export interface RowRenderProps extends ItemRenderProps {
@@ -1035,7 +1038,9 @@ export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMPr
 /**
  * A row within a `<Table>`.
  */
-export const Row = /*#__PURE__*/ createBranchComponent(
+export const Row:
+  <T extends object>(props: RowProps<T> & React.RefAttributes<HTMLTableRowElement>) => ReactElement | null =
+/*#__PURE__*/ createBranchComponent(
   'item',
   <T extends object>(props: RowProps<T>, forwardedRef: ForwardedRef<HTMLTableRowElement>, item: GridNode<object>) => {
     let ref = useObjectRef<HTMLTableRowElement>(forwardedRef);
@@ -1176,8 +1181,7 @@ export const Row = /*#__PURE__*/ createBranchComponent(
       </Collection>
     );
   }
-) satisfies <T extends object>(props: RowProps<T> & React.RefAttributes<HTMLTableRowElement>) => ReactElement | null as
-<T extends object>(props: RowProps<T> & React.RefAttributes<HTMLTableRowElement>) => ReactElement | null;
+);
 
 
 export interface CellRenderProps {
@@ -1219,7 +1223,9 @@ export interface CellProps extends RenderProps<CellRenderProps> {
 /**
  * A cell within a table row.
  */
-export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps, forwardedRef: ForwardedRef<HTMLTableCellElement>, cell: GridNode<object>) => {
+export const Cell:
+  (props: CellProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null =
+/*#__PURE__*/ createLeafComponent('cell', (props: CellProps, forwardedRef: ForwardedRef<HTMLTableCellElement>, cell: GridNode<object>) => {
   let ref = useObjectRef<HTMLTableCellElement>(forwardedRef);
   let state = useContext(TableStateContext)!;
   let {dragState} = useContext(DragAndDropContext);
@@ -1263,8 +1269,7 @@ export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps,
       </CollectionRendererContext.Provider>
     </TD>
   );
-}) satisfies (props: CellProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null as
-(props: CellProps & React.RefAttributes<HTMLDivElement>) => ReactElement | null;
+});
 
 
 function TableDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<HTMLElement>) {
@@ -1375,7 +1380,9 @@ export interface TableLoadingSentinelProps extends Omit<LoadMoreSentinelProps, '
   isLoading?: boolean
 }
 
-export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', function TableLoadingIndicator(props: TableLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
+export const UNSTABLE_TableLoadingSentinel:
+  <T extends object>(props: TableLoadingSentinelProps & React.RefAttributes<T>) => ReactElement | null =
+createLeafComponent('loader', function TableLoadingIndicator(props: TableLoadingSentinelProps, ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(TableStateContext)!;
   let {isVirtualized} = useContext(CollectionRendererContext);
   let {isLoading, onLoadMore, scrollOffset, ...otherProps} = props;
@@ -1433,6 +1440,5 @@ export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', funct
       )}
     </>
   );
-}) satisfies <T extends object>(props: TableLoadingSentinelProps & React.RefAttributes<T>) => ReactElement | null as
-<T extends object>(props: TableLoadingSentinelProps & React.RefAttributes<T>) => ReactElement | null;
+});
 
diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index 6f5e54b9c4c..49f9a7faf09 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -244,7 +244,9 @@ function TabListInner<T extends object>({props, forwardedRef: ref}: TabListInner
 /**
  * A Tab provides a title for an individual item within a TabList.
  */
-export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<object>) => {
+export const Tab:
+  (props: TabProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null =
+/*#__PURE__*/ createLeafComponent('item', (props: TabProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<object>) => {
   let state = useContext(TabListStateContext)!;
   let ref = useObjectRef<any>(forwardedRef);
   let {tabProps, isSelected, isDisabled, isPressed} = useTab({key: item.key, ...props}, state, ref);
@@ -286,14 +288,15 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
       {renderProps.children}
     </ElementType>
   );
-}) satisfies (props: TabProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null as
-(props: TabProps & React.RefAttributes<HTMLElement>) => React.ReactElement | null;
+});
 
 
 /**
  * A TabPanel provides the content for a tab.
  */
-export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(props: TabPanelProps, forwardedRef: ForwardedRef<HTMLDivElement>) {
+export const TabPanel:
+  (props: TabPanelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ createHideableComponent(function TabPanel(props: TabPanelProps, forwardedRef: ForwardedRef<HTMLDivElement>) {
   const state = useContext(TabListStateContext)!;
   let ref = useObjectRef<HTMLDivElement>(forwardedRef);
   let {tabPanelProps} = useTabPanel(props, state, ref);
@@ -343,6 +346,5 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
       </Provider>
     </div>
   );
-}) satisfies (props: TabPanelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
-(props: TabPanelProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+});
 
diff --git a/packages/react-aria-components/src/TagGroup.tsx b/packages/react-aria-components/src/TagGroup.tsx
index 9b315612eca..d118d0a7102 100644
--- a/packages/react-aria-components/src/TagGroup.tsx
+++ b/packages/react-aria-components/src/TagGroup.tsx
@@ -203,7 +203,9 @@ export interface TagProps extends RenderProps<TagRenderProps>, LinkDOMProps, Hov
 /**
  * A Tag is an individual item within a TagList.
  */
-export const Tag = /*#__PURE__*/ createLeafComponent('item', (props: TagProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<object>) => {
+export const Tag:
+  (props: TagProps & React.RefAttributes<object>) => React.ReactElement | null =
+/*#__PURE__*/ createLeafComponent('item', (props: TagProps, forwardedRef: ForwardedRef<HTMLDivElement>, item: Node<object>) => {
   let state = useContext(ListStateContext)!;
   let ref = useObjectRef<HTMLDivElement>(forwardedRef);
   let {focusProps, isFocusVisible} = useFocusRing({within: false});
@@ -264,6 +266,5 @@ export const Tag = /*#__PURE__*/ createLeafComponent('item', (props: TagProps, f
       </div>
     </div>
   );
-}) satisfies (props: TagProps & React.RefAttributes<object>) => React.ReactElement | null as
-(props: TagProps & React.RefAttributes<object>) => React.ReactElement | null;
+});
 
diff --git a/packages/react-aria-components/src/TextField.tsx b/packages/react-aria-components/src/TextField.tsx
index 252da4a0a2c..7b6bfba85d0 100644
--- a/packages/react-aria-components/src/TextField.tsx
+++ b/packages/react-aria-components/src/TextField.tsx
@@ -55,7 +55,9 @@ export const TextFieldContext: Context<ContextValue<TextFieldProps, HTMLDivEleme
 /**
  * A text field allows a user to enter a plain text value with a keyboard.
  */
-export const TextField = /*#__PURE__*/ createHideableComponent(function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
+export const TextField:
+  (props: TextFieldProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ createHideableComponent(function TextField(props: TextFieldProps, ref: ForwardedRef<HTMLDivElement>) {
   [props, ref] = useContextProps(props, ref, TextFieldContext);
   let {validationBehavior: formValidationBehavior} = useSlottedContext(FormContext) || {};
   let validationBehavior = props.validationBehavior ?? formValidationBehavior ?? 'native';
@@ -122,6 +124,5 @@ export const TextField = /*#__PURE__*/ createHideableComponent(function TextFiel
       </Provider>
     </div>
   );
-}) satisfies (props: TextFieldProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
-(props: TextFieldProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+});
 
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index fbf55a1818f..598538a79e9 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -448,7 +448,9 @@ export interface TreeItemContentRenderProps extends TreeItemRenderProps {}
 // need to do a bunch of check to figure out what is the Content and what are the actual collection elements (aka child rows) of the TreeItem
 export interface TreeItemContentProps extends Pick<RenderProps<TreeItemContentRenderProps>, 'children'> {}
 
-export const TreeItemContent = /*#__PURE__*/ createLeafComponent('content', function TreeItemContent(props: TreeItemContentProps) {
+export const TreeItemContent:
+  (props: TreeItemContentProps & React.RefAttributes<object>) => React.ReactElement | null =
+/*#__PURE__*/ createLeafComponent('content', function TreeItemContent(props: TreeItemContentProps) {
   let values = useContext(TreeItemContentContext)!;
   let renderProps = useRenderProps({
     children: props.children,
@@ -459,8 +461,7 @@ export const TreeItemContent = /*#__PURE__*/ createLeafComponent('content', func
       {renderProps.children}
     </CollectionRendererContext.Provider>
   );
-}) satisfies (props: TreeItemContentProps & React.RefAttributes<object>) => React.ReactElement | null as
-(props: TreeItemContentProps & React.RefAttributes<object>) => React.ReactElement | null;
+});
 
 export const TreeItemContentContext: Context<TreeItemContentRenderProps | null> = createContext<TreeItemContentRenderProps | null>(null);
 
@@ -487,7 +488,9 @@ export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRend
 /**
  * A TreeItem represents an individual item in a Tree.
  */
-export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends object>(props: TreeItemProps<T>, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) => {
+export const TreeItem:
+  <T extends object>(props: TreeItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+/*#__PURE__*/ createBranchComponent('item', <T extends object>(props: TreeItemProps<T>, ref: ForwardedRef<HTMLDivElement>, item: Node<T>) => {
   let state = useContext(TreeStateContext)!;
   ref = useObjectRef<HTMLDivElement>(ref);
   let {dragAndDropHooks, dragState, dropState} = useContext(DragAndDropContext)!;
@@ -696,8 +699,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
       </div>
     </>
   );
-}) satisfies <T extends object>(props: TreeItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
-<T extends object>(props: TreeItemProps<T> & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+});
 
 
 export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
@@ -710,7 +712,9 @@ export interface UNSTABLE_TreeLoadingIndicatorRenderProps {
 
 export interface TreeLoaderProps extends RenderProps<UNSTABLE_TreeLoadingIndicatorRenderProps>, StyleRenderProps<UNSTABLE_TreeLoadingIndicatorRenderProps> {}
 
-export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', function TreeLoader(props: TreeLoaderProps,  ref: ForwardedRef<Element>, item: Node<object>) {
+export const UNSTABLE_TreeLoadingIndicator:
+  (props: TreeLoaderProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null =
+createLeafComponent('loader', function TreeLoader(props: TreeLoaderProps,  ref: ForwardedRef<Element>, item: Node<object>) {
   let state = useContext(TreeStateContext)!;
   // This loader row is is non-interactable, but we want the same aria props calculated as a typical row
   // @ts-ignore
@@ -747,8 +751,7 @@ export const UNSTABLE_TreeLoadingIndicator = createLeafComponent('loader', funct
       </div>
     </>
   );
-}) satisfies (props: TreeLoaderProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null as
-(props: TreeLoaderProps & React.RefAttributes<HTMLDivElement>) => React.ReactElement | null;
+});
 
 
 function convertExpanded(expanded: 'all' | Iterable<Key>): 'all' | Set<Key> {