From ec8bfda769e5e18450a35822bc04051b154f9493 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Wed, 27 Jul 2022 13:33:18 +0000
Subject: [PATCH 1/3] run react 18 types codemod

---
 src/ActionList/Description.tsx                   |  2 +-
 src/ActionList/Divider.tsx                       |  2 +-
 src/ActionList/Group.tsx                         |  4 ++--
 src/ActionList/Item.tsx                          |  4 ++--
 src/ActionList/Selection.tsx                     |  2 +-
 src/ActionList/Visuals.tsx                       |  6 +++---
 src/ActionMenu.tsx                               |  4 ++--
 src/AnchoredOverlay/AnchoredOverlay.tsx          |  2 +-
 src/Autocomplete/Autocomplete.tsx                |  2 +-
 src/Autocomplete/AutocompleteInput.tsx           |  2 +-
 src/Button/types.ts                              |  6 +++---
 src/CheckboxGroup.tsx                            |  2 +-
 src/CircleOcticon.tsx                            |  2 +-
 src/Dialog/ConfirmationDialog.tsx                |  8 ++++----
 src/Dialog/Dialog.tsx                            | 16 ++++++++--------
 .../FilteredActionList.stories.tsx               |  2 +-
 src/FormControl/_FormControlCaption.tsx          |  2 +-
 src/FormControl/_FormControlLabel.tsx            |  2 +-
 src/FormControl/_FormControlLeadingVisual.tsx    |  2 +-
 src/FormControl/_FormControlValidation.tsx       |  2 +-
 src/PageLayout/PageLayout.tsx                    | 14 +++++++-------
 src/Placeholder.tsx                              |  4 ++--
 src/Portal/Portal.tsx                            |  2 +-
 src/RadioGroup.tsx                               |  2 +-
 src/SegmentedControl/SegmentedControl.tsx        |  2 +-
 src/SegmentedControl/SegmentedControlButton.tsx  |  4 ++--
 .../SegmentedControlIconButton.tsx               |  4 ++--
 src/Select.tsx                                   |  6 +++---
 src/TextInput.tsx                                |  6 +++---
 src/TextInputWithTokens.tsx                      |  4 ++--
 src/ThemeProvider.tsx                            |  2 +-
 src/ToggleSwitch.tsx                             |  6 +++---
 src/Token/Token.tsx                              |  4 ++--
 src/Token/_RemoveTokenButton.tsx                 |  2 +-
 .../CheckboxOrRadioGroup.tsx                     |  2 +-
 .../_CheckboxOrRadioGroupCaption.tsx             |  2 +-
 .../_CheckboxOrRadioGroupLabel.tsx               |  2 +-
 .../_CheckboxOrRadioGroupValidation.tsx          |  2 +-
 src/_InputCaption.tsx                            |  2 +-
 src/_InputLabel.tsx                              |  2 +-
 src/_InputValidation.tsx                         |  4 ++--
 src/_TextInputInnerAction.tsx                    |  6 +++---
 src/_TextInputInnerVisualSlot.tsx                |  4 ++--
 src/_ValidationAnimationContainer.tsx            |  2 +-
 src/__tests__/TextInputWithTokens.test.tsx       |  2 +-
 src/__tests__/Token.test.tsx                     |  2 +-
 src/__tests__/deprecated/ChoiceFieldset.test.tsx |  2 +-
 src/__tests__/utils/createSlots.test.tsx         |  8 ++++----
 src/deprecated/ActionList/Item.tsx               |  4 ++--
 src/deprecated/Button/ButtonBase.tsx             |  2 +-
 .../ChoiceFieldset/ChoiceFieldCaption.tsx        |  2 +-
 .../ChoiceFieldset/ChoiceFieldLabel.tsx          |  2 +-
 .../ChoiceFieldset/ChoiceFieldsetDescription.tsx |  2 +-
 .../ChoiceFieldset/ChoiceFieldsetLegend.tsx      |  2 +-
 .../ChoiceFieldset/ChoiceFieldsetList.tsx        |  2 +-
 .../ChoiceFieldset/ChoiceFieldsetListItem.tsx    |  2 +-
 .../ChoiceFieldset/ChoiceFieldsetValidation.tsx  |  2 +-
 src/deprecated/ChoiceInputField.tsx              |  4 ++--
 src/deprecated/InputField/_InputFieldCaption.tsx |  2 +-
 src/deprecated/InputField/_InputFieldLabel.tsx   |  2 +-
 .../InputField/_InputFieldValidation.tsx         |  2 +-
 src/deprecated/_ChoiceInputLeadingVisual.tsx     |  2 +-
 src/stories/ActionList/examples.stories.tsx      |  2 +-
 src/stories/ActionList/fixtures.stories.tsx      |  8 ++++----
 src/stories/ActionMenu/examples.stories.tsx      |  2 +-
 src/stories/ActionMenu/fixtures.stories.tsx      |  4 ++--
 src/stories/AvatarStack.stories.tsx              |  2 +-
 src/stories/IssueLabelToken.stories.tsx          |  4 ++--
 src/stories/Portal.stories.tsx                   |  4 ++--
 src/stories/ProfileToken.stories.tsx             |  4 ++--
 src/stories/SelectPanel.stories.tsx              |  2 +-
 src/stories/Token.stories.tsx                    |  4 ++--
 src/stories/deprecated/ActionList.stories.tsx    |  2 +-
 src/stories/deprecated/ActionMenu.stories.tsx    |  2 +-
 src/stories/deprecated/DropdownMenu.stories.tsx  |  2 +-
 src/utils/create-slots.tsx                       |  8 ++++----
 src/utils/story-helpers.tsx                      |  2 +-
 src/utils/testing.tsx                            |  4 ++--
 src/utils/types/ComponentProps.ts                |  2 +-
 79 files changed, 134 insertions(+), 134 deletions(-)

diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx
index f3feff2f86c..3632bd598e0 100644
--- a/src/ActionList/Description.tsx
+++ b/src/ActionList/Description.tsx
@@ -14,7 +14,7 @@ export type ActionListDescriptionProps = {
   variant?: 'inline' | 'block'
 } & SxProp
 
-export const Description: React.FC<ActionListDescriptionProps> = ({variant = 'inline', sx = {}, ...props}) => {
+export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({variant = 'inline', sx = {}, ...props}) => {
   const styles = {
     fontSize: 0,
     lineHeight: '16px',
diff --git a/src/ActionList/Divider.tsx b/src/ActionList/Divider.tsx
index 2d03ef24b8a..c74ded13289 100644
--- a/src/ActionList/Divider.tsx
+++ b/src/ActionList/Divider.tsx
@@ -9,7 +9,7 @@ export type ActionListDividerProps = SxProp
 /**
  * Visually separates `Item`s or `Group`s in an `ActionList`.
  */
-export const Divider: React.FC<ActionListDividerProps> = ({sx = {}}) => {
+export const Divider: React.FC<React.PropsWithChildren<ActionListDividerProps>> = ({sx = {}}) => {
   return (
     <Box
       as="li"
diff --git a/src/ActionList/Group.tsx b/src/ActionList/Group.tsx
index d6f2715c325..68fc9406793 100644
--- a/src/ActionList/Group.tsx
+++ b/src/ActionList/Group.tsx
@@ -35,7 +35,7 @@ export type ActionListGroupProps = {
 type ContextProps = Pick<ActionListGroupProps, 'selectionVariant'>
 export const GroupContext = React.createContext<ContextProps>({})
 
-export const Group: React.FC<ActionListGroupProps> = ({
+export const Group: React.FC<React.PropsWithChildren<ActionListGroupProps>> = ({
   title,
   variant = 'subtle',
   auxiliaryText,
@@ -82,7 +82,7 @@ export type HeaderProps = Pick<ActionListGroupProps, 'variant' | 'title' | 'auxi
  *
  * For visual presentation only. It's hidden from screen readers.
  */
-const Header: React.FC<HeaderProps> = ({variant, title, auxiliaryText, labelId, ...props}) => {
+const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({variant, title, auxiliaryText, labelId, ...props}) => {
   const {variant: listVariant} = React.useContext(ListContext)
 
   const styles = {
diff --git a/src/ActionList/Item.tsx b/src/ActionList/Item.tsx
index 599e1c42151..e64cbfaf4a6 100644
--- a/src/ActionList/Item.tsx
+++ b/src/ActionList/Item.tsx
@@ -81,7 +81,7 @@ export type ActionListItemProps = {
   /**
    * Private API for use internally only. Used by LinkItem to wrap contents in an anchor
    */
-  _PrivateItemWrapper?: React.FC
+  _PrivateItemWrapper?: React.FC<React.PropsWithChildren<unknown>>
 } & SxProp
 
 const {Slots, Slot} = createSlots(['LeadingVisual', 'InlineDescription', 'BlockDescription', 'TrailingVisual'])
@@ -302,7 +302,7 @@ export const Item = React.forwardRef<HTMLLIElement, ActionListItemProps>(
 
 Item.displayName = 'ActionList.Item'
 
-const ConditionalBox: React.FC<{if: boolean} & BoxProps> = props => {
+const ConditionalBox: React.FC<React.PropsWithChildren<{if: boolean} & BoxProps>> = props => {
   const {if: condition, ...rest} = props
 
   if (condition) return <Box {...rest}>{props.children}</Box>
diff --git a/src/ActionList/Selection.tsx b/src/ActionList/Selection.tsx
index 9e7e03e8ee1..40584cf88db 100644
--- a/src/ActionList/Selection.tsx
+++ b/src/ActionList/Selection.tsx
@@ -6,7 +6,7 @@ import {ActionListItemProps} from './Item'
 import {LeadingVisualContainer} from './Visuals'
 
 type SelectionProps = Pick<ActionListItemProps, 'selected'>
-export const Selection: React.FC<SelectionProps> = ({selected}) => {
+export const Selection: React.FC<React.PropsWithChildren<SelectionProps>> = ({selected}) => {
   const {selectionVariant: listSelectionVariant} = React.useContext(ListContext)
   const {selectionVariant: groupSelectionVariant} = React.useContext(GroupContext)
 
diff --git a/src/ActionList/Visuals.tsx b/src/ActionList/Visuals.tsx
index b40780443ee..fcdbbf16206 100644
--- a/src/ActionList/Visuals.tsx
+++ b/src/ActionList/Visuals.tsx
@@ -6,7 +6,7 @@ import {getVariantStyles, Slot, ItemContext, TEXT_ROW_HEIGHT} from './Item'
 
 type VisualProps = SxProp & React.HTMLAttributes<HTMLSpanElement>
 
-export const LeadingVisualContainer: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+export const LeadingVisualContainer: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
   return (
     <Box
       as="span"
@@ -29,7 +29,7 @@ export const LeadingVisualContainer: React.FC<VisualProps> = ({sx = {}, ...props
 }
 
 export type ActionListLeadingVisualProps = VisualProps
-export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+export const LeadingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
   return (
     <Slot name="LeadingVisual">
       {({variant, disabled}: ItemContext) => (
@@ -51,7 +51,7 @@ export const LeadingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
 }
 
 export type ActionListTrailingVisualProps = VisualProps
-export const TrailingVisual: React.FC<VisualProps> = ({sx = {}, ...props}) => {
+export const TrailingVisual: React.FC<React.PropsWithChildren<VisualProps>> = ({sx = {}, ...props}) => {
   return (
     <Slot name="TrailingVisual">
       {({variant, disabled}: ItemContext) => (
diff --git a/src/ActionMenu.tsx b/src/ActionMenu.tsx
index b471530132c..329207d046f 100644
--- a/src/ActionMenu.tsx
+++ b/src/ActionMenu.tsx
@@ -33,7 +33,7 @@ export type ActionMenuProps = {
   onOpenChange?: (s: boolean) => void
 } & Pick<AnchoredOverlayProps, 'anchorRef'>
 
-const Menu: React.FC<ActionMenuProps> = ({
+const Menu: React.FC<React.PropsWithChildren<ActionMenuProps>> = ({
   anchorRef: externalAnchorRef,
   open,
   onOpenChange,
@@ -102,7 +102,7 @@ type MenuOverlayProps = Partial<OverlayProps> &
      */
     children: React.ReactElement[] | React.ReactElement
   }
-const Overlay: React.FC<MenuOverlayProps> = ({children, align = 'start', ...overlayProps}) => {
+const Overlay: React.FC<React.PropsWithChildren<MenuOverlayProps>> = ({children, align = 'start', ...overlayProps}) => {
   // we typecast anchorRef as required instead of optional
   // because we know that we're setting it in context in Menu
   const {anchorRef, renderAnchor, anchorId, open, onOpen, onClose} = React.useContext(MenuContext) as MandateProps<
diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx
index 49ca88c79b3..1f64d20db24 100644
--- a/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -86,7 +86,7 @@ export type AnchoredOverlayProps = AnchoredOverlayBaseProps &
  * An `AnchoredOverlay` provides an anchor that will open a floating overlay positioned relative to the anchor.
  * The overlay can be opened and navigated using keyboard or mouse.
  */
-export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
+export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayProps>> = ({
   renderAnchor,
   anchorRef: externalAnchorRef,
   anchorId: externalAnchorId,
diff --git a/src/Autocomplete/Autocomplete.tsx b/src/Autocomplete/Autocomplete.tsx
index 602a93c758a..9af0c9e8902 100644
--- a/src/Autocomplete/Autocomplete.tsx
+++ b/src/Autocomplete/Autocomplete.tsx
@@ -45,7 +45,7 @@ const reducer = (state: State, action: Action) => {
   }
 }
 
-const Autocomplete: React.FC<{id?: string}> = ({children, id: idProp}) => {
+const Autocomplete: React.FC<React.PropsWithChildren<{id?: string}>> = ({children, id: idProp}) => {
   const activeDescendantRef = useRef<HTMLElement>(null)
   const scrollContainerRef = useRef<HTMLDivElement>(null)
   const inputRef = useRef<HTMLInputElement>(null)
diff --git a/src/Autocomplete/AutocompleteInput.tsx b/src/Autocomplete/AutocompleteInput.tsx
index 20a5f0b7404..6db72d4f20e 100644
--- a/src/Autocomplete/AutocompleteInput.tsx
+++ b/src/Autocomplete/AutocompleteInput.tsx
@@ -16,7 +16,7 @@ import {ComponentProps} from '../utils/types'
 
 type InternalAutocompleteInputProps = {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  as?: React.ComponentType<any>
+  as?: React.ComponentType<React.PropsWithChildren<any>>
 }
 
 const AutocompleteInput = React.forwardRef(
diff --git a/src/Button/types.ts b/src/Button/types.ts
index 4a66cc5d4e9..ab6100897c3 100644
--- a/src/Button/types.ts
+++ b/src/Button/types.ts
@@ -41,16 +41,16 @@ export type ButtonProps = {
   /**
    * The leading icon comes before button content
    */
-  leadingIcon?: React.FunctionComponent<IconProps>
+  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
   /**
    * The trailing icon comes after button content
    */
-  trailingIcon?: React.FunctionComponent<IconProps>
+  trailingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
   children: React.ReactNode
 } & ButtonBaseProps
 
 export type IconButtonProps = ButtonA11yProps & {
-  icon: React.FunctionComponent<IconProps>
+  icon: React.FunctionComponent<React.PropsWithChildren<IconProps>>
 } & ButtonBaseProps
 
 // adopted from React.AnchorHTMLAttributes
diff --git a/src/CheckboxGroup.tsx b/src/CheckboxGroup.tsx
index 5e36ded7262..a37dcbe54b9 100644
--- a/src/CheckboxGroup.tsx
+++ b/src/CheckboxGroup.tsx
@@ -20,7 +20,7 @@ export const CheckboxGroupContext = createContext<{
   onChange?: ChangeEventHandler<HTMLInputElement>
 }>({})
 
-const CheckboxGroup: FC<CheckboxGroupProps> = ({children, disabled, onChange, ...rest}) => {
+const CheckboxGroup: FC<React.PropsWithChildren<CheckboxGroupProps>> = ({children, disabled, onChange, ...rest}) => {
   const formControlComponentChildren = React.Children.toArray(children)
     .filter(child => React.isValidElement(child) && child.type === FormControl)
     .map(formControlComponent =>
diff --git a/src/CircleOcticon.tsx b/src/CircleOcticon.tsx
index d55a2b86c81..158d901017e 100644
--- a/src/CircleOcticon.tsx
+++ b/src/CircleOcticon.tsx
@@ -5,7 +5,7 @@ import Box, {BoxProps} from './Box'
 export type CircleOcticonProps = {
   as?: React.ElementType
   size?: number
-  icon: React.ComponentType<{size?: IconProps['size']}>
+  icon: React.ComponentType<React.PropsWithChildren<{size?: IconProps['size']}>>
 } & BoxProps
 
 function CircleOcticon(props: CircleOcticonProps) {
diff --git a/src/Dialog/ConfirmationDialog.tsx b/src/Dialog/ConfirmationDialog.tsx
index 03bd4b9214b..46bbda3bae5 100644
--- a/src/Dialog/ConfirmationDialog.tsx
+++ b/src/Dialog/ConfirmationDialog.tsx
@@ -52,7 +52,7 @@ const StyledTitle = styled(Box).attrs({as: 'h1'})`
   flex-grow: 1;
   margin: 0; /* override default margin */
 `
-const ConfirmationHeader: React.FC<DialogHeaderProps> = ({title, onClose, dialogLabelId}) => {
+const ConfirmationHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({title, onClose, dialogLabelId}) => {
   const onCloseClick = useCallback(() => {
     onClose('close-button')
   }, [onClose])
@@ -69,7 +69,7 @@ const StyledConfirmationBody = styled(Box)`
   color: ${get('colors.fg.muted')};
   flex-grow: 1;
 `
-const ConfirmationBody: React.FC<DialogProps> = ({children}) => {
+const ConfirmationBody: React.FC<React.PropsWithChildren<DialogProps>> = ({children}) => {
   return <StyledConfirmationBody>{children}</StyledConfirmationBody>
 }
 const StyledConfirmationFooter = styled(Box)`
@@ -81,7 +81,7 @@ const StyledConfirmationFooter = styled(Box)`
   justify-content: end;
   padding: ${get('space.1')} ${get('space.3')} ${get('space.3')};
 `
-const ConfirmationFooter: React.FC<DialogProps> = ({footerButtons}) => {
+const ConfirmationFooter: React.FC<React.PropsWithChildren<DialogProps>> = ({footerButtons}) => {
   const {containerRef: footerRef} = useFocusZone({
     bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
     focusInStrategy: 'closest'
@@ -100,7 +100,7 @@ const ConfirmationFooter: React.FC<DialogProps> = ({footerButtons}) => {
  * two buttons: one to cancel the action and one to confirm it. No custom
  * rendering capabilities are provided for ConfirmationDialog.
  */
-export const ConfirmationDialog: React.FC<ConfirmationDialogProps> = props => {
+export const ConfirmationDialog: React.FC<React.PropsWithChildren<ConfirmationDialogProps>> = props => {
   const {
     onClose,
     title,
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index 2bc1e534077..52736a51b6a 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -67,7 +67,7 @@ export interface DialogProps {
    *
    * Warning: using a custom renderer may violate Primer UX principles.
    */
-  renderHeader?: React.FunctionComponent<DialogHeaderProps>
+  renderHeader?: React.FunctionComponent<React.PropsWithChildren<DialogHeaderProps>>
 
   /**
    * Provide a custom render function for the dialog body. This content is
@@ -76,7 +76,7 @@ export interface DialogProps {
    *
    * Warning: using a custom renderer may violate Primer UX principles.
    */
-  renderBody?: React.FunctionComponent<DialogProps>
+  renderBody?: React.FunctionComponent<React.PropsWithChildren<DialogProps>>
 
   /**
    * Provide a custom render function for the dialog footer. This content is
@@ -85,7 +85,7 @@ export interface DialogProps {
    *
    * Warning: using a custom renderer may violate Primer UX principles.
    */
-  renderFooter?: React.FunctionComponent<DialogProps>
+  renderFooter?: React.FunctionComponent<React.PropsWithChildren<DialogProps>>
 
   /**
    * Specifies the buttons to be rendered in the Dialog footer.
@@ -213,7 +213,7 @@ const StyledDialog = styled.div<StyledDialogProps>`
   ${sx};
 `
 
-const DefaultHeader: React.FC<DialogHeaderProps> = ({dialogLabelId, title, subtitle, dialogDescriptionId, onClose}) => {
+const DefaultHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({dialogLabelId, title, subtitle, dialogDescriptionId, onClose}) => {
   const onCloseClick = useCallback(() => {
     onClose('close-button')
   }, [onClose])
@@ -229,10 +229,10 @@ const DefaultHeader: React.FC<DialogHeaderProps> = ({dialogLabelId, title, subti
     </Dialog.Header>
   )
 }
-const DefaultBody: React.FC<DialogProps> = ({children}) => {
+const DefaultBody: React.FC<React.PropsWithChildren<DialogProps>> = ({children}) => {
   return <Dialog.Body>{children}</Dialog.Body>
 }
-const DefaultFooter: React.FC<DialogProps> = ({footerButtons}) => {
+const DefaultFooter: React.FC<React.PropsWithChildren<DialogProps>> = ({footerButtons}) => {
   const {containerRef: footerRef} = useFocusZone({
     bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
     focusInStrategy: 'closest'
@@ -362,7 +362,7 @@ const buttonTypes = {
   primary: ButtonPrimary,
   danger: ButtonDanger
 }
-const Buttons: React.FC<{buttons: DialogButtonProps[]}> = ({buttons}) => {
+const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>> = ({buttons}) => {
   const autoFocusRef = useProvidedRefOrCreate<HTMLButtonElement>(buttons.find(button => button.autoFocus)?.ref)
   let autoFocusCount = 0
   const [hasRendered, setHasRendered] = useState(0)
@@ -405,7 +405,7 @@ const DialogCloseButton = styled(Button)`
   line-height: normal;
   box-shadow: none;
 `
-const CloseButton: React.FC<{onClose: () => void}> = ({onClose}) => {
+const CloseButton: React.FC<React.PropsWithChildren<{onClose: () => void}>> = ({onClose}) => {
   return (
     <DialogCloseButton aria-label="Close" onClick={onClose}>
       <StyledOcticon icon={XIcon} />
diff --git a/src/FilteredActionList/FilteredActionList.stories.tsx b/src/FilteredActionList/FilteredActionList.stories.tsx
index 9c38c45b681..09d97eaf472 100644
--- a/src/FilteredActionList/FilteredActionList.stories.tsx
+++ b/src/FilteredActionList/FilteredActionList.stories.tsx
@@ -9,7 +9,7 @@ const meta: Meta = {
   title: 'Composite components/FilteredActionList',
   component: FilteredActionList,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => (
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
       <ThemeProvider>
         <BaseStyles>
           <Story />
diff --git a/src/FormControl/_FormControlCaption.tsx b/src/FormControl/_FormControlCaption.tsx
index 12197ef383d..e26b95cd5cc 100644
--- a/src/FormControl/_FormControlCaption.tsx
+++ b/src/FormControl/_FormControlCaption.tsx
@@ -4,7 +4,7 @@ import InputCaption from '../_InputCaption'
 import {FormControlContext} from './FormControl'
 import {Slot} from './slots'
 
-const FormControlCaption: React.FC<{id?: string} & SxProp> = ({children, sx, id}) => (
+const FormControlCaption: React.FC<React.PropsWithChildren<{id?: string} & SxProp>> = ({children, sx, id}) => (
   <Slot name="Caption">
     {({captionId, disabled}: FormControlContext) => (
       <InputCaption id={id || captionId} disabled={disabled} sx={sx}>
diff --git a/src/FormControl/_FormControlLabel.tsx b/src/FormControl/_FormControlLabel.tsx
index e8fd00e7e99..5f24c6559af 100644
--- a/src/FormControl/_FormControlLabel.tsx
+++ b/src/FormControl/_FormControlLabel.tsx
@@ -11,7 +11,7 @@ export type Props = {
   visuallyHidden?: boolean
 } & SxProp
 
-const FormControlLabel: React.FC<{htmlFor?: string; id?: string} & Props> = ({
+const FormControlLabel: React.FC<React.PropsWithChildren<{htmlFor?: string; id?: string} & Props>> = ({
   children,
   htmlFor,
   id,
diff --git a/src/FormControl/_FormControlLeadingVisual.tsx b/src/FormControl/_FormControlLeadingVisual.tsx
index 6936ed7ad7a..4b5cbc8f63b 100644
--- a/src/FormControl/_FormControlLeadingVisual.tsx
+++ b/src/FormControl/_FormControlLeadingVisual.tsx
@@ -5,7 +5,7 @@ import {SxProp} from '../sx'
 import {FormControlContext} from './FormControl'
 import {Slot} from './slots'
 
-const FormControlLeadingVisual: React.FC<SxProp> = ({children, sx}) => (
+const FormControlLeadingVisual: React.FC<React.PropsWithChildren<SxProp>> = ({children, sx}) => (
   <Slot name="LeadingVisual">
     {({disabled, captionId}: FormControlContext) => (
       <Box
diff --git a/src/FormControl/_FormControlValidation.tsx b/src/FormControl/_FormControlValidation.tsx
index b2653c3c7d4..354ae8f4f6a 100644
--- a/src/FormControl/_FormControlValidation.tsx
+++ b/src/FormControl/_FormControlValidation.tsx
@@ -10,7 +10,7 @@ export type FormControlValidationProps = {
   id?: string
 } & SxProp
 
-const FormControlValidation: React.FC<FormControlValidationProps> = ({children, variant, sx, id}) => (
+const FormControlValidation: React.FC<React.PropsWithChildren<FormControlValidationProps>> = ({children, variant, sx, id}) => (
   <Slot name="Validation">
     {({validationMessageId}: FormControlContext) => (
       <InputValidation validationStatus={variant} id={id || validationMessageId} sx={sx}>
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index eaab7e4c4a5..19bce2b160f 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -47,7 +47,7 @@ const containerWidths = {
 }
 
 // TODO: refs
-const Root: React.FC<PageLayoutProps> = ({
+const Root: React.FC<React.PropsWithChildren<PageLayoutProps>> = ({
   containerWidth = 'xlarge',
   padding = 'normal',
   rowGap = 'normal',
@@ -111,7 +111,7 @@ function negateSpacingValue(value: number | null | Array<number | null>) {
   return value === null ? null : -value
 }
 
-const HorizontalDivider: React.FC<DividerProps> = ({variant = 'none', variantWhenNarrow = 'inherit', sx = {}}) => {
+const HorizontalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({variant = 'none', variantWhenNarrow = 'inherit', sx = {}}) => {
   const {padding} = React.useContext(PageLayoutContext)
   return (
     <Box
@@ -153,7 +153,7 @@ const verticalDividerVariants = {
   }
 }
 
-const VerticalDivider: React.FC<DividerProps> = ({variant = 'none', variantWhenNarrow = 'inherit', sx = {}}) => {
+const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({variant = 'none', variantWhenNarrow = 'inherit', sx = {}}) => {
   return (
     <Box
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -182,7 +182,7 @@ export type PageLayoutHeaderProps = {
   hidden?: boolean | ResponsiveValue<boolean>
 } & SxProp
 
-const Header: React.FC<PageLayoutHeaderProps> = ({
+const Header: React.FC<React.PropsWithChildren<PageLayoutHeaderProps>> = ({
   divider = 'none',
   dividerWhenNarrow = 'inherit',
   hidden = false,
@@ -232,7 +232,7 @@ const contentWidths = {
   xlarge: '1280px'
 }
 
-const Content: React.FC<PageLayoutContentProps> = ({width = 'full', hidden = false, children, sx = {}}) => {
+const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({width = 'full', hidden = false, children, sx = {}}) => {
   const isHidden = useResponsiveValue(hidden, false)
   return (
     <Box
@@ -282,7 +282,7 @@ const paneWidths = {
   large: ['100%', null, '256px', '320px', '336px']
 }
 
-const Pane: React.FC<PageLayoutPaneProps> = ({
+const Pane: React.FC<React.PropsWithChildren<PageLayoutPaneProps>> = ({
   position = 'end',
   positionWhenNarrow = 'inherit',
   width = 'medium',
@@ -349,7 +349,7 @@ export type PageLayoutFooterProps = {
   hidden?: boolean | ResponsiveValue<boolean>
 } & SxProp
 
-const Footer: React.FC<PageLayoutFooterProps> = ({
+const Footer: React.FC<React.PropsWithChildren<PageLayoutFooterProps>> = ({
   divider = 'none',
   dividerWhenNarrow = 'inherit',
   hidden = false,
diff --git a/src/Placeholder.tsx b/src/Placeholder.tsx
index 1cfcdff1cc9..e069359b0dd 100644
--- a/src/Placeholder.tsx
+++ b/src/Placeholder.tsx
@@ -2,11 +2,11 @@ import {Box} from '.'
 import React from 'react'
 
 /** Private component used to render placeholders in storybook and documentation examples  */
-export const Placeholder: React.FC<{
+export const Placeholder: React.FC<React.PropsWithChildren<{
   width?: number | string
   height: number | string
   label?: string
-}> = ({width, height, label}) => {
+}>> = ({width, height, label}) => {
   return (
     <Box
       sx={{
diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx
index bc5445e9143..73ab6bf5d79 100644
--- a/src/Portal/Portal.tsx
+++ b/src/Portal/Portal.tsx
@@ -60,7 +60,7 @@ export interface PortalProps {
  * Creates a React Portal, placing all children in a separate physical DOM root node.
  * @see https://reactjs.org/docs/portals.html
  */
-export const Portal: React.FC<PortalProps> = ({children, onMount, containerName: _containerName}) => {
+export const Portal: React.FC<React.PropsWithChildren<PortalProps>> = ({children, onMount, containerName: _containerName}) => {
   const hostElement = document.createElement('div')
 
   // Portaled content should get their own stacking context so they don't interfere
diff --git a/src/RadioGroup.tsx b/src/RadioGroup.tsx
index de86c0b1835..35874ff4312 100644
--- a/src/RadioGroup.tsx
+++ b/src/RadioGroup.tsx
@@ -24,7 +24,7 @@ export const RadioGroupContext = createContext<{
   name: string
 } | null>(null)
 
-const RadioGroup: FC<RadioGroupProps> = ({children, disabled, onChange, name, ...rest}) => {
+const RadioGroup: FC<React.PropsWithChildren<RadioGroupProps>> = ({children, disabled, onChange, name, ...rest}) => {
   const [selectedRadioValue, setSelectedRadioValue] = useRenderForcingRef<string | null>(null)
 
   const updateSelectedCheckboxes: ChangeEventHandler<HTMLInputElement> = e => {
diff --git a/src/SegmentedControl/SegmentedControl.tsx b/src/SegmentedControl/SegmentedControl.tsx
index b5a35b44cf5..852f4c6be8a 100644
--- a/src/SegmentedControl/SegmentedControl.tsx
+++ b/src/SegmentedControl/SegmentedControl.tsx
@@ -31,7 +31,7 @@ const getSegmentedControlStyles = (props?: SegmentedControlProps) => ({
   height: '32px' // TODO: use primitive `control.medium.size` when it is available
 })
 
-const Root: React.FC<SegmentedControlProps> = ({
+const Root: React.FC<React.PropsWithChildren<SegmentedControlProps>> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
   children,
diff --git a/src/SegmentedControl/SegmentedControlButton.tsx b/src/SegmentedControl/SegmentedControlButton.tsx
index 727fed82c03..f2054158625 100644
--- a/src/SegmentedControl/SegmentedControlButton.tsx
+++ b/src/SegmentedControl/SegmentedControlButton.tsx
@@ -11,7 +11,7 @@ export type SegmentedControlButtonProps = {
   /** Whether the segment is selected */
   selected?: boolean
   /** The leading icon comes before item label */
-  leadingIcon?: React.FunctionComponent<IconProps>
+  leadingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
 } & SxProp &
   HTMLAttributes<HTMLButtonElement | HTMLLIElement>
 
@@ -19,7 +19,7 @@ const SegmentedControlButtonStyled = styled.button`
   ${sx};
 `
 
-const SegmentedControlButton: React.FC<SegmentedControlButtonProps> = ({
+const SegmentedControlButton: React.FC<React.PropsWithChildren<SegmentedControlButtonProps>> = ({
   children,
   leadingIcon: LeadingIcon,
   selected,
diff --git a/src/SegmentedControl/SegmentedControlIconButton.tsx b/src/SegmentedControl/SegmentedControlIconButton.tsx
index 84377525231..1d617151823 100644
--- a/src/SegmentedControl/SegmentedControlIconButton.tsx
+++ b/src/SegmentedControl/SegmentedControlIconButton.tsx
@@ -12,7 +12,7 @@ import Tooltip from '../Tooltip'
 export type SegmentedControlIconButtonProps = {
   'aria-label': string
   /** The icon that represents the segmented control item */
-  icon: React.FunctionComponent<IconProps>
+  icon: React.FunctionComponent<React.PropsWithChildren<IconProps>>
   /** Whether the segment is selected */
   selected?: boolean
 } & SxProp &
@@ -28,7 +28,7 @@ const SegmentedControlIconButtonStyled = styled.button`
 //
 // See Slack thread: https://github.slack.com/archives/C02NUUQ9C30/p1656444474509599
 //
-export const SegmentedControlIconButton: React.FC<SegmentedControlIconButtonProps> = ({
+export const SegmentedControlIconButton: React.FC<React.PropsWithChildren<SegmentedControlIconButtonProps>> = ({
   'aria-label': ariaLabel,
   icon: Icon,
   selected,
diff --git a/src/Select.tsx b/src/Select.tsx
index 9e579f553d1..cb39a66fb0f 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -49,7 +49,7 @@ const StyledSelect = styled.select`
   }
 `
 
-const ArrowIndicatorSVG: React.FC<{className?: string}> = ({className}) => (
+const ArrowIndicatorSVG: React.FC<React.PropsWithChildren<{className?: string}>> = ({className}) => (
   <svg width="16" height="16" fill="currentColor" xmlns="http://www.w3.org/2000/svg" className={className}>
     <path d="m4.074 9.427 3.396 3.396a.25.25 0 0 0 .354 0l3.396-3.396A.25.25 0 0 0 11.043 9H4.251a.25.25 0 0 0-.177.427ZM4.074 7.47 7.47 4.073a.25.25 0 0 1 .354 0L11.22 7.47a.25.25 0 0 1-.177.426H4.251a.25.25 0 0 1-.177-.426Z" />
   </svg>
@@ -101,9 +101,9 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   )
 )
 
-const Option: React.FC<React.HTMLProps<HTMLOptionElement> & {value: string}> = props => <option {...props} />
+const Option: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptionElement> & {value: string}>> = props => <option {...props} />
 
-const OptGroup: React.FC<React.HTMLProps<HTMLOptGroupElement>> = props => <optgroup {...props} />
+const OptGroup: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>> = props => <optgroup {...props} />
 
 export default Object.assign(Select, {
   Option,
diff --git a/src/TextInput.tsx b/src/TextInput.tsx
index af50cade0f3..ba0110f15b2 100644
--- a/src/TextInput.tsx
+++ b/src/TextInput.tsx
@@ -11,7 +11,7 @@ import TextInputAction from './_TextInputInnerAction'
 
 export type TextInputNonPassthroughProps = {
   /** @deprecated Use `leadingVisual` or `trailingVisual` prop instead */
-  icon?: React.ComponentType<{className?: string}>
+  icon?: React.ComponentType<React.PropsWithChildren<{className?: string}>>
   /** Whether the to show a loading indicator in the input */
   loading?: boolean
   /**
@@ -24,11 +24,11 @@ export type TextInputNonPassthroughProps = {
   /**
    * A visual that renders inside the input before the typing area
    */
-  leadingVisual?: string | React.ComponentType<{className?: string}>
+  leadingVisual?: string | React.ComponentType<React.PropsWithChildren<{className?: string}>>
   /**
    * A visual that renders inside the input after the typing area
    */
-  trailingVisual?: string | React.ComponentType<{className?: string}>
+  trailingVisual?: string | React.ComponentType<React.PropsWithChildren<{className?: string}>>
   /**
    * A visual that renders inside the input after the typing area
    */
diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx
index bc59c4e2eb8..07e260a100a 100644
--- a/src/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens.tsx
@@ -15,7 +15,7 @@ import TextInputWrapper, {textInputHorizPadding, TextInputSizes} from './_TextIn
 import UnstyledTextInput from './_UnstyledTextInput'
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-type AnyReactComponent = React.ComponentType<any>
+type AnyReactComponent = React.ComponentType<React.PropsWithChildren<any>>
 
 // NOTE: if these props or their JSDoc comments are updated, be sure to also update
 // the prop table in docs/content/TextInputTokens.mdx
@@ -23,7 +23,7 @@ export type TextInputWithTokensProps<TokenComponentType extends AnyReactComponen
   /**
    * The array of tokens to render
    */
-  tokens: TokenComponentType extends React.ComponentType<infer TokenProps> ? TokenProps[] : never
+  tokens: TokenComponentType extends React.ComponentType<React.PropsWithChildren<infer TokenProps>> ? TokenProps[] : never
   /**
    * The function that gets called when a token is removed
    */
diff --git a/src/ThemeProvider.tsx b/src/ThemeProvider.tsx
index de34daecbd6..39a741f2444 100644
--- a/src/ThemeProvider.tsx
+++ b/src/ThemeProvider.tsx
@@ -48,7 +48,7 @@ const getServerHandoff = () => {
   return {}
 }
 
-export const ThemeProvider: React.FC<ThemeProviderProps> = ({children, ...props}) => {
+export const ThemeProvider: React.FC<React.PropsWithChildren<ThemeProviderProps>> = ({children, ...props}) => {
   // Get fallback values from parent ThemeProvider (if exists)
   const {
     theme: fallbackTheme,
diff --git a/src/ToggleSwitch.tsx b/src/ToggleSwitch.tsx
index d92425acd5f..ebf43b993cb 100644
--- a/src/ToggleSwitch.tsx
+++ b/src/ToggleSwitch.tsx
@@ -53,7 +53,7 @@ type SwitchButtonProps = {
 
 type InnerIconProps = {size?: SwitchProps['size']}
 
-const CircleIcon: React.FC<InnerIconProps> = ({size}) => (
+const CircleIcon: React.FC<React.PropsWithChildren<InnerIconProps>> = ({size}) => (
   <svg
     width={size === 'small' ? '12' : '16'}
     height={size === 'small' ? '12' : '16'}
@@ -64,7 +64,7 @@ const CircleIcon: React.FC<InnerIconProps> = ({size}) => (
     <path fillRule="evenodd" d="M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z" />
   </svg>
 )
-const LineIcon: React.FC<InnerIconProps> = ({size}) => (
+const LineIcon: React.FC<React.PropsWithChildren<InnerIconProps>> = ({size}) => (
   <svg
     width={size === 'small' ? '12' : '16'}
     height={size === 'small' ? '12' : '16'}
@@ -209,7 +209,7 @@ const hiddenTextStyles: BetterSystemStyleObject = {
   height: 0
 }
 
-const Switch: React.FC<SwitchProps> = ({
+const Switch: React.FC<React.PropsWithChildren<SwitchProps>> = ({
   'aria-labelledby': ariaLabelledby,
   'aria-describedby': ariaDescribedby,
   defaultChecked,
diff --git a/src/Token/Token.tsx b/src/Token/Token.tsx
index b742a84303e..f9e67231921 100644
--- a/src/Token/Token.tsx
+++ b/src/Token/Token.tsx
@@ -10,12 +10,12 @@ export interface TokenProps extends TokenBaseProps {
    * A function that renders a component before the token text
    */
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  leadingVisual?: React.ComponentType<any>
+  leadingVisual?: React.ComponentType<React.PropsWithChildren<any>>
 }
 
 const tokenBorderWidthPx = 1
 
-const LeadingVisualContainer: React.FC<Pick<TokenBaseProps, 'size'>> = ({children, size}) => (
+const LeadingVisualContainer: React.FC<React.PropsWithChildren<Pick<TokenBaseProps, 'size'>>> = ({children, size}) => (
   <Box
     sx={{
       flexShrink: 0,
diff --git a/src/Token/_RemoveTokenButton.tsx b/src/Token/_RemoveTokenButton.tsx
index 1bd9a08a26a..369976ae4f9 100644
--- a/src/Token/_RemoveTokenButton.tsx
+++ b/src/Token/_RemoveTokenButton.tsx
@@ -89,7 +89,7 @@ const StyledTokenButton = styled.span<TokenButtonProps & SxProp>`
   ${sx}
 `
 
-const RemoveTokenButton: React.FC<ComponentProps<typeof StyledTokenButton>> = ({
+const RemoveTokenButton: React.FC<React.PropsWithChildren<ComponentProps<typeof StyledTokenButton>>> = ({
   'aria-label': ariaLabel,
   isParentInteractive,
   size,
diff --git a/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx b/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
index 7b50d5ab1fc..e72ac308101 100644
--- a/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
+++ b/src/_CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx
@@ -48,7 +48,7 @@ const Body = styled.div`
   }
 `
 
-const CheckboxOrRadioGroup: React.FC<CheckboxOrRadioGroupProps> = ({
+const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupProps>> = ({
   'aria-labelledby': ariaLabelledby,
   children,
   disabled,
diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx
index 3a569d0ccce..6286098713c 100644
--- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx
+++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupCaption.tsx
@@ -4,7 +4,7 @@ import {SxProp} from '../sx'
 import {CheckboxOrRadioGroupContext} from './CheckboxOrRadioGroup'
 import {Slot} from './slots'
 
-const CheckboxOrRadioGroupCaption: React.FC<SxProp> = ({children, sx}) => (
+const CheckboxOrRadioGroupCaption: React.FC<React.PropsWithChildren<SxProp>> = ({children, sx}) => (
   <Slot name="Caption">
     {({disabled, captionId}: CheckboxOrRadioGroupContext) => (
       <Text color={disabled ? 'fg.muted' : 'fg.subtle'} fontSize={1} id={captionId} sx={sx}>
diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx
index 7fbc34eca25..be314df5ed6 100644
--- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx
+++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx
@@ -12,7 +12,7 @@ export type CheckboxOrRadioGroupLabelProps = {
   visuallyHidden?: boolean
 } & SxProp
 
-const CheckboxOrRadioGroupLabel: React.FC<CheckboxOrRadioGroupLabelProps> = ({children, visuallyHidden, sx}) => (
+const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupLabelProps>> = ({children, visuallyHidden, sx}) => (
   <Slot name="Label">
     {({required, disabled}: CheckboxOrRadioGroupContext) => (
       <VisuallyHidden
diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx
index 67538b52627..4739dfe6c62 100644
--- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx
+++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx
@@ -10,7 +10,7 @@ export type CheckboxOrRadioGroupValidationProps = {
   variant: FormValidationStatus
 } & SxProp
 
-const CheckboxOrRadioGroupValidation: React.FC<CheckboxOrRadioGroupValidationProps> = ({children, variant, sx}) => (
+const CheckboxOrRadioGroupValidation: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupValidationProps>> = ({children, variant, sx}) => (
   <Slot name="Validation">
     {({validationMessageId = ''}: CheckboxOrRadioGroupContext) => (
       <InputValidation validationStatus={variant} id={validationMessageId} sx={sx}>
diff --git a/src/_InputCaption.tsx b/src/_InputCaption.tsx
index 012e7c00930..b7a77ae4f1f 100644
--- a/src/_InputCaption.tsx
+++ b/src/_InputCaption.tsx
@@ -13,7 +13,7 @@ type Props = {
   disabled?: boolean
 } & SxProp
 
-const InputCaption: React.FC<Props> = ({children, disabled, id, sx}) => (
+const InputCaption: React.FC<React.PropsWithChildren<Props>> = ({children, disabled, id, sx}) => (
   <Text color={disabled ? 'fg.subtle' : 'fg.muted'} display="block" fontSize={0} id={id} sx={sx}>
     {children}
   </Text>
diff --git a/src/_InputLabel.tsx b/src/_InputLabel.tsx
index 43ea1088bee..6b100edbbaf 100644
--- a/src/_InputLabel.tsx
+++ b/src/_InputLabel.tsx
@@ -9,7 +9,7 @@ interface Props extends React.HTMLProps<HTMLLabelElement> {
   visuallyHidden?: boolean
 }
 
-const InputLabel: React.FC<Props & SxProp> = ({children, disabled, htmlFor, id, required, visuallyHidden, sx}) => {
+const InputLabel: React.FC<React.PropsWithChildren<Props & SxProp>> = ({children, disabled, htmlFor, id, required, visuallyHidden, sx}) => {
   return (
     <VisuallyHidden
       isVisible={!visuallyHidden}
diff --git a/src/_InputValidation.tsx b/src/_InputValidation.tsx
index c48fae62f58..377d396b0d5 100644
--- a/src/_InputValidation.tsx
+++ b/src/_InputValidation.tsx
@@ -9,7 +9,7 @@ type Props = {
   validationStatus?: FormValidationStatus
 } & SxProp
 
-const validationIconMap: Record<NonNullable<Props['validationStatus']>, React.ComponentType<IconProps>> = {
+const validationIconMap: Record<NonNullable<Props['validationStatus']>, React.ComponentType<React.PropsWithChildren<IconProps>>> = {
   success: CheckCircleFillIcon,
   error: AlertFillIcon,
   warning: AlertFillIcon
@@ -21,7 +21,7 @@ const validationColorMap: Record<NonNullable<Props['validationStatus']>, string>
   warning: 'attention.fg'
 }
 
-const InputValidation: React.FC<Props> = ({children, id, validationStatus, sx}) => {
+const InputValidation: React.FC<React.PropsWithChildren<Props>> = ({children, id, validationStatus, sx}) => {
   const IconComponent = validationStatus ? validationIconMap[validationStatus] : undefined
   const fgColor = validationStatus ? validationColorMap[validationStatus] : undefined
 
diff --git a/src/_TextInputInnerAction.tsx b/src/_TextInputInnerAction.tsx
index 255f8c842f6..15c840f824f 100644
--- a/src/_TextInputInnerAction.tsx
+++ b/src/_TextInputInnerAction.tsx
@@ -10,7 +10,7 @@ type TextInputActionProps = Omit<React.HTMLProps<HTMLButtonElement>, 'aria-label
   /** Text that appears in a tooltip. If an icon is passed, this is also used as the label used by assistive technologies. */
   ['aria-label']?: string
   /** The icon to render inside the button */
-  icon?: React.FunctionComponent<IconProps>
+  icon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
   /**
    * @deprecated Text input action buttons should only use the 'invisible' button variant
    * Determine's the styles on a button one of 'default' | 'primary' | 'invisible' | 'danger'
@@ -39,10 +39,10 @@ const invisibleButtonStyleOverrides = {
   }
 }
 
-const ConditionalTooltip: React.FC<{
+const ConditionalTooltip: React.FC<React.PropsWithChildren<{
   ['aria-label']?: string
   children: React.ReactNode
-}> = ({'aria-label': ariaLabel, children}) => (
+}>> = ({'aria-label': ariaLabel, children}) => (
   <>
     {ariaLabel ? (
       <Tooltip
diff --git a/src/_TextInputInnerVisualSlot.tsx b/src/_TextInputInnerVisualSlot.tsx
index aac487b11e8..e1711242638 100644
--- a/src/_TextInputInnerVisualSlot.tsx
+++ b/src/_TextInputInnerVisualSlot.tsx
@@ -2,14 +2,14 @@ import React from 'react'
 import {Box, Spinner} from '.'
 import {TextInputNonPassthroughProps} from './TextInput'
 
-const TextInputInnerVisualSlot: React.FC<{
+const TextInputInnerVisualSlot: React.FC<React.PropsWithChildren<{
   /** Whether the input is expected to ever show a loading indicator */
   hasLoadingIndicator: boolean
   /** Whether the to show the loading indicator */
   showLoadingIndicator: TextInputNonPassthroughProps['loading']
   /** Which side of this visual is being rendered */
   visualPosition: 'leading' | 'trailing'
-}> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition}) => {
+}>> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition}) => {
   if ((!children && !hasLoadingIndicator) || (visualPosition === 'leading' && !children && !showLoadingIndicator)) {
     return null
   }
diff --git a/src/_ValidationAnimationContainer.tsx b/src/_ValidationAnimationContainer.tsx
index 591a8c9c745..a3cb6d9867c 100644
--- a/src/_ValidationAnimationContainer.tsx
+++ b/src/_ValidationAnimationContainer.tsx
@@ -20,7 +20,7 @@ const fadeIn = keyframes`
 const AnimatedElement = styled.div<Props>`
   animation: ${props => props.show && css`170ms ${fadeIn} cubic-bezier(0.44, 0.74, 0.36, 1);`};
 `
-const ValidationAnimationContainer: React.FC<Props> = ({show, children}) => {
+const ValidationAnimationContainer: React.FC<React.PropsWithChildren<Props>> = ({show, children}) => {
   const [shouldRender, setRender] = useState(show)
 
   useEffect(() => {
diff --git a/src/__tests__/TextInputWithTokens.test.tsx b/src/__tests__/TextInputWithTokens.test.tsx
index 51cbfd28fc7..d960eda99da 100644
--- a/src/__tests__/TextInputWithTokens.test.tsx
+++ b/src/__tests__/TextInputWithTokens.test.tsx
@@ -20,7 +20,7 @@ const mockTokens = [
   {text: 'seven', id: 7}
 ]
 
-const LabelledTextInputWithTokens: React.FC<TextInputWithTokensProps> = ({onTokenRemove, tokens, ...rest}) => (
+const LabelledTextInputWithTokens: React.FC<React.PropsWithChildren<TextInputWithTokensProps>> = ({onTokenRemove, tokens, ...rest}) => (
   <>
     {/* eslint-disable-next-line jsx-a11y/label-has-for */}
     <label htmlFor="tokenInput" id="tokenLabel">
diff --git a/src/__tests__/Token.test.tsx b/src/__tests__/Token.test.tsx
index 2ad296224e1..0ffc842aea0 100644
--- a/src/__tests__/Token.test.tsx
+++ b/src/__tests__/Token.test.tsx
@@ -10,7 +10,7 @@ import {AvatarTokenProps} from '../Token/AvatarToken'
 expect.extend(toHaveNoViolations)
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-const testTokenComponent = (Component: React.ComponentType<any>) => {
+const testTokenComponent = (Component: React.ComponentType<React.PropsWithChildren<any>>) => {
   behavesAsComponent({Component: Token})
 
   it('renders a <span>', () => {
diff --git a/src/__tests__/deprecated/ChoiceFieldset.test.tsx b/src/__tests__/deprecated/ChoiceFieldset.test.tsx
index 99a34b506eb..6fd659fb282 100644
--- a/src/__tests__/deprecated/ChoiceFieldset.test.tsx
+++ b/src/__tests__/deprecated/ChoiceFieldset.test.tsx
@@ -7,7 +7,7 @@ import userEvent from '@testing-library/user-event'
 import ChoiceFieldset, {Item, ChoiceFieldsetProps} from '../../deprecated/ChoiceFieldset'
 import {ChoiceFieldsetListProps} from '../../deprecated/ChoiceFieldset/ChoiceFieldsetList'
 
-const SelectableChoicelistFieldset: React.FC<ChoiceFieldsetProps & ChoiceFieldsetListProps> = ({
+const SelectableChoicelistFieldset: React.FC<React.PropsWithChildren<ChoiceFieldsetProps & ChoiceFieldsetListProps>> = ({
   onSelect,
   selectionVariant,
   selected = []
diff --git a/src/__tests__/utils/createSlots.test.tsx b/src/__tests__/utils/createSlots.test.tsx
index 621bc60117b..980572508db 100644
--- a/src/__tests__/utils/createSlots.test.tsx
+++ b/src/__tests__/utils/createSlots.test.tsx
@@ -7,7 +7,7 @@ import createSlots from '../../utils/create-slots'
 const {Slots, Slot} = createSlots(['One', 'Two', 'Three'])
 type ContextTypes = {salutation?: string}
 
-const ComponentWithSlots: React.FC<ContextTypes> = ({salutation, children}) => {
+const ComponentWithSlots: React.FC<React.PropsWithChildren<ContextTypes>> = ({salutation, children}) => {
   return (
     <Slots context={{salutation}}>
       {slots => (
@@ -21,9 +21,9 @@ const ComponentWithSlots: React.FC<ContextTypes> = ({salutation, children}) => {
     </Slots>
   )
 }
-const SlotItem1: React.FC = ({children}) => <Slot name="One">{children}</Slot>
-const SlotItem2: React.FC = ({children}) => <Slot name="Two">{children}</Slot>
-const SlotItem3: React.FC = ({children}) => (
+const SlotItem1: React.FC<React.PropsWithChildren<unknown>> = ({children}) => <Slot name="One">{children}</Slot>
+const SlotItem2: React.FC<React.PropsWithChildren<unknown>> = ({children}) => <Slot name="Two">{children}</Slot>
+const SlotItem3: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
   <Slot name="Three">
     {(context: ContextTypes) => (
       <>
diff --git a/src/deprecated/ActionList/Item.tsx b/src/deprecated/ActionList/Item.tsx
index 70f4a3db399..f2a0bc3a969 100644
--- a/src/deprecated/ActionList/Item.tsx
+++ b/src/deprecated/ActionList/Item.tsx
@@ -42,13 +42,13 @@ export interface ItemProps extends SxProp {
   /**
    * Icon (or similar) positioned before `Item` text.
    */
-  leadingVisual?: React.FunctionComponent<IconProps>
+  leadingVisual?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
 
   /**
    * @deprecated Use `trailingVisual` instead
    * Icon (or similar) positioned after `Item` text.
    */
-  trailingIcon?: React.FunctionComponent<IconProps>
+  trailingIcon?: React.FunctionComponent<React.PropsWithChildren<IconProps>>
 
   /**
    * @deprecated Use `trailingVisual` instead
diff --git a/src/deprecated/Button/ButtonBase.tsx b/src/deprecated/Button/ButtonBase.tsx
index d0f6237db43..cc2d5eedb4b 100644
--- a/src/deprecated/Button/ButtonBase.tsx
+++ b/src/deprecated/Button/ButtonBase.tsx
@@ -20,7 +20,7 @@ const variants = variant({
 })
 
 type StyledButtonBaseProps = {
-  as?: 'button' | 'a' | 'summary' | 'input' | string | React.ReactType
+  as?: 'button' | 'a' | 'summary' | 'input' | string | React.ElementType
   variant?: 'small' | 'medium' | 'large'
 }
 
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx
index 40179709359..0bd46a8032b 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ChoiceInputField from '../ChoiceInputField'
 
-const ChoiceFieldCaption: React.FC = ({children}) => <ChoiceInputField.Caption>{children}</ChoiceInputField.Caption>
+const ChoiceFieldCaption: React.FC<React.PropsWithChildren<unknown>> = ({children}) => <ChoiceInputField.Caption>{children}</ChoiceInputField.Caption>
 
 export default ChoiceFieldCaption
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx
index 5f40e1ab932..9b2c92f2a4e 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import ChoiceInputField from '../ChoiceInputField'
 
-const ChoiceFieldLabel: React.FC = ({children}) => <ChoiceInputField.Label>{children}</ChoiceInputField.Label>
+const ChoiceFieldLabel: React.FC<React.PropsWithChildren<unknown>> = ({children}) => <ChoiceInputField.Label>{children}</ChoiceInputField.Label>
 
 export default ChoiceFieldLabel
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx
index f9a756e5fbe..960b22d8464 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetDescription.tsx
@@ -2,7 +2,7 @@ import React from 'react'
 import {Text} from '../..'
 import {ChoiceFieldsetContext, Slot} from './ChoiceFieldset'
 
-const ChoiceFieldsetDescription: React.FC = ({children}) => (
+const ChoiceFieldsetDescription: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
   <Slot name="Description">
     {({disabled}: ChoiceFieldsetContext) => (
       <Text color={disabled ? 'fg.muted' : 'fg.default'} fontSize={1}>
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx
index 08d1eddebd6..05a4d1bc8c4 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx
@@ -10,7 +10,7 @@ export interface ChoiceFieldsetLegendProps {
   visuallyHidden?: boolean
 }
 
-const ChoiceFieldsetLegend: React.FC<ChoiceFieldsetLegendProps> = ({children, visuallyHidden}) => (
+const ChoiceFieldsetLegend: React.FC<React.PropsWithChildren<ChoiceFieldsetLegendProps>> = ({children, visuallyHidden}) => (
   <Slot name="Legend">
     {({required, disabled}: ChoiceFieldsetContext) => (
       <VisuallyHidden
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx
index 8d872796a41..4768be395d4 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx
@@ -37,7 +37,7 @@ const getSelectedCheckboxes = (
   return selectedValues.filter(selectedValue => selectedValue !== value)
 }
 
-const ChoiceFieldsetList: React.FC<ChoiceFieldsetListProps> = ({selectionVariant, children}) => {
+const ChoiceFieldsetList: React.FC<React.PropsWithChildren<ChoiceFieldsetListProps>> = ({selectionVariant, children}) => {
   const ssrSafeUniqueName = useSSRSafeId()
 
   return (
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx
index 443e329ec4b..f1c2fb9a55a 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx
@@ -23,7 +23,7 @@ export interface ChoiceFieldProps {
   value: string
 }
 
-const ChoiceFieldsetListItem: React.FC<ChoiceFieldProps> = ({children, id, disabled: disabledProp, value}) => {
+const ChoiceFieldsetListItem: React.FC<React.PropsWithChildren<ChoiceFieldProps>> = ({children, id, disabled: disabledProp, value}) => {
   const choiceFieldsetListContext = useContext(ChoiceFieldsetListContext)
   if (choiceFieldsetListContext === null) {
     throw new Error('ChoiceFieldsetListContext returned null')
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx
index 2375878cd6b..13d553260fd 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx
@@ -4,6 +4,6 @@ export interface ChoiceFieldsetValidationProps {
   validationKey: string
 }
 
-const ChoiceFieldsetValidation: React.FC<ChoiceFieldsetValidationProps> = ({children}) => <>{children}</>
+const ChoiceFieldsetValidation: React.FC<React.PropsWithChildren<ChoiceFieldsetValidationProps>> = ({children}) => <>{children}</>
 
 export default ChoiceFieldsetValidation
diff --git a/src/deprecated/ChoiceInputField.tsx b/src/deprecated/ChoiceInputField.tsx
index 5f8a27e39bf..a2cc13d0634 100644
--- a/src/deprecated/ChoiceInputField.tsx
+++ b/src/deprecated/ChoiceInputField.tsx
@@ -25,7 +25,7 @@ const getInputToRender = (inputType: 'radio' | 'checkbox', children?: React.Reac
   )
 }
 
-const ChoiceInputField: React.FC<Props> = ({children, disabled, id: idProp, validationStatus}) => {
+const ChoiceInputField: React.FC<React.PropsWithChildren<Props>> = ({children, disabled, id: idProp, validationStatus}) => {
   const id = useSSRSafeId(idProp)
   const captionChildren: React.ReactElement[] | undefined | null = React.Children.map(children, child =>
     React.isValidElement(child) && child.type === InputFieldCaption ? child : null
@@ -125,7 +125,7 @@ const ChoiceInputField: React.FC<Props> = ({children, disabled, id: idProp, vali
   )
 }
 
-const Label: React.FC = ({children}) => <InputField.Label>{children}</InputField.Label>
+const Label: React.FC<React.PropsWithChildren<unknown>> = ({children}) => <InputField.Label>{children}</InputField.Label>
 
 /**
  * @deprecated Use `FormControl` instead. See https://primer.style/react/FormControl for more info
diff --git a/src/deprecated/InputField/_InputFieldCaption.tsx b/src/deprecated/InputField/_InputFieldCaption.tsx
index 9e39a68de12..2bdb9951d1b 100644
--- a/src/deprecated/InputField/_InputFieldCaption.tsx
+++ b/src/deprecated/InputField/_InputFieldCaption.tsx
@@ -3,7 +3,7 @@ import InputCaption from '../../_InputCaption'
 import {InputFieldContext} from './InputField'
 import {Slot} from './slots'
 
-const InputFieldCaption: React.FC = ({children}) => (
+const InputFieldCaption: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
   <Slot name="Caption">
     {({captionId, disabled}: InputFieldContext) => (
       <InputCaption id={captionId} disabled={disabled}>
diff --git a/src/deprecated/InputField/_InputFieldLabel.tsx b/src/deprecated/InputField/_InputFieldLabel.tsx
index 843234da761..f63e71135c2 100644
--- a/src/deprecated/InputField/_InputFieldLabel.tsx
+++ b/src/deprecated/InputField/_InputFieldLabel.tsx
@@ -10,7 +10,7 @@ export interface Props {
   visuallyHidden?: boolean
 }
 
-const InputFieldLabel: React.FC<Props> = ({children, visuallyHidden}) => (
+const InputFieldLabel: React.FC<React.PropsWithChildren<Props>> = ({children, visuallyHidden}) => (
   <Slot name="Label">
     {({disabled, id, required}: InputFieldContext) => (
       <InputLabel htmlFor={id} visuallyHidden={visuallyHidden} required={required} disabled={disabled}>
diff --git a/src/deprecated/InputField/_InputFieldValidation.tsx b/src/deprecated/InputField/_InputFieldValidation.tsx
index 986c4ceecc7..c30bf6cbc57 100644
--- a/src/deprecated/InputField/_InputFieldValidation.tsx
+++ b/src/deprecated/InputField/_InputFieldValidation.tsx
@@ -3,6 +3,6 @@ export interface InputFieldValidationProps {
   validationKey: string
 }
 
-const InputFieldValidation: React.FC<InputFieldValidationProps> = ({children}) => <>{children}</>
+const InputFieldValidation: React.FC<React.PropsWithChildren<InputFieldValidationProps>> = ({children}) => <>{children}</>
 
 export default InputFieldValidation
diff --git a/src/deprecated/_ChoiceInputLeadingVisual.tsx b/src/deprecated/_ChoiceInputLeadingVisual.tsx
index 60dbf3cedb8..a2e639c6ab8 100644
--- a/src/deprecated/_ChoiceInputLeadingVisual.tsx
+++ b/src/deprecated/_ChoiceInputLeadingVisual.tsx
@@ -1,6 +1,6 @@
 import React from 'react'
 import {Slot} from '../deprecated/InputField/slots'
 
-const ChoiceInputLeadingVisual: React.FC = ({children}) => <Slot name="LeadingVisual">{children}</Slot>
+const ChoiceInputLeadingVisual: React.FC<React.PropsWithChildren<unknown>> = ({children}) => <Slot name="LeadingVisual">{children}</Slot>
 
 export default ChoiceInputLeadingVisual
diff --git a/src/stories/ActionList/examples.stories.tsx b/src/stories/ActionList/examples.stories.tsx
index d19b47ca9bb..7fcaf2b615e 100644
--- a/src/stories/ActionList/examples.stories.tsx
+++ b/src/stories/ActionList/examples.stories.tsx
@@ -28,7 +28,7 @@ const meta: Meta = {
   title: 'Composite components/ActionList/examples',
   component: ActionList,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => (
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
       <ThemeProvider>
         <BaseStyles>
           <Story />
diff --git a/src/stories/ActionList/fixtures.stories.tsx b/src/stories/ActionList/fixtures.stories.tsx
index 9bbcd28cfd2..2fe3eb24df1 100644
--- a/src/stories/ActionList/fixtures.stories.tsx
+++ b/src/stories/ActionList/fixtures.stories.tsx
@@ -39,7 +39,7 @@ const meta: Meta = {
   title: 'Composite components/ActionList/fixtures',
   component: ActionList,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => (
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
       <ThemeProvider>
         <BaseStyles>
           <Story />
@@ -158,7 +158,7 @@ const labels = [
   {name: 'good first issue', color: '#7057ff', description: 'Good for newcomers'}
 ]
 
-const LabelColor: React.FC<{color: string}> = ({color}) => (
+const LabelColor: React.FC<React.PropsWithChildren<{color: string}>> = ({color}) => (
   <Box sx={{backgroundColor: color, width: '14px', height: '14px', borderRadius: 3}} />
 )
 
@@ -810,7 +810,7 @@ export function ChildWithInternalState(): JSX.Element {
 }
 ChildWithInternalState.storyName = 'Child with internal state'
 
-const StatefulChild: React.FC = props => {
+const StatefulChild: React.FC<React.PropsWithChildren<unknown>> = props => {
   const [nameVisible, setNameVisibility] = React.useState(false)
   const toggle = () => {
     setNameVisibility(!nameVisible)
@@ -992,7 +992,7 @@ type SortableItemProps = {
   onSelect: ActionListItemProps['onSelect']
   reorder: ({optionToMove, moveAfterOption}: {optionToMove: Option; moveAfterOption: Option}) => void
 }
-const SortableItem: React.FC<SortableItemProps> = ({option, role, onSelect, reorder}) => {
+const SortableItem: React.FC<React.PropsWithChildren<SortableItemProps>> = ({option, role, onSelect, reorder}) => {
   const [{isDragging}, dragRef] = useDrag(() => ({
     type: 'ITEM',
     item: option,
diff --git a/src/stories/ActionMenu/examples.stories.tsx b/src/stories/ActionMenu/examples.stories.tsx
index 42028456f61..38f6d699cc2 100644
--- a/src/stories/ActionMenu/examples.stories.tsx
+++ b/src/stories/ActionMenu/examples.stories.tsx
@@ -19,7 +19,7 @@ const meta: Meta = {
   title: 'Composite components/ActionMenu/examples',
   component: ActionMenu,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => (
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
       <ThemeProvider>
         <BaseStyles>
           <Story />
diff --git a/src/stories/ActionMenu/fixtures.stories.tsx b/src/stories/ActionMenu/fixtures.stories.tsx
index 81758a8cf4d..b8819ce4e90 100644
--- a/src/stories/ActionMenu/fixtures.stories.tsx
+++ b/src/stories/ActionMenu/fixtures.stories.tsx
@@ -39,7 +39,7 @@ const meta: Meta = {
   title: 'Composite components/ActionMenu/fixtures',
   component: ActionMenu,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => (
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
       <ThemeProvider>
         <BaseStyles>
           <Story />
@@ -310,7 +310,7 @@ const LayoutToggleItem = ({
 }: {
   selected: boolean
   children: React.ReactNode
-  Icon: React.ComponentType<IconProps>
+  Icon: React.ComponentType<React.PropsWithChildren<IconProps>>
 }) => {
   return (
     <FormControl
diff --git a/src/stories/AvatarStack.stories.tsx b/src/stories/AvatarStack.stories.tsx
index 58d61de429f..159c1c98a19 100644
--- a/src/stories/AvatarStack.stories.tsx
+++ b/src/stories/AvatarStack.stories.tsx
@@ -9,7 +9,7 @@ const meta: Meta = {
   title: 'Composite components/AvatarStack',
   component: AvatarStack,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => (
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
       <ThemeProvider>
         <BaseStyles>
           <Story />
diff --git a/src/stories/IssueLabelToken.stories.tsx b/src/stories/IssueLabelToken.stories.tsx
index a7bb7c10feb..8875e274937 100644
--- a/src/stories/IssueLabelToken.stories.tsx
+++ b/src/stories/IssueLabelToken.stories.tsx
@@ -37,7 +37,7 @@ export default {
 
 const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove']
 
-const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
+const SingleExampleContainer: React.FC<React.PropsWithChildren<{label?: string}>> = ({children, label}) => (
   <Box
     display="flex"
     sx={{
@@ -55,7 +55,7 @@ const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) =
   </Box>
 )
 
-const ExampleCollectionContainer: React.FC = ({children}) => (
+const ExampleCollectionContainer: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
   <Box
     display="flex"
     sx={{
diff --git a/src/stories/Portal.stories.tsx b/src/stories/Portal.stories.tsx
index 320b45e59c0..7bee1cf79ba 100644
--- a/src/stories/Portal.stories.tsx
+++ b/src/stories/Portal.stories.tsx
@@ -48,7 +48,7 @@ export const customPortalRootById = () => (
   </>
 )
 
-export const CustomPortalRootByRegistration: React.FC<Record<string, never>> = () => {
+export const CustomPortalRootByRegistration: React.FC<React.PropsWithChildren<Record<string, never>>> = () => {
   const outerContainerRef = React.useRef<HTMLDivElement>(null)
   const [mounted, setMounted] = React.useState(false)
   React.useEffect(() => {
@@ -75,7 +75,7 @@ export const CustomPortalRootByRegistration: React.FC<Record<string, never>> = (
   )
 }
 
-export const MultiplePortalRoots: React.FC<Record<string, never>> = () => {
+export const MultiplePortalRoots: React.FC<React.PropsWithChildren<Record<string, never>>> = () => {
   const outerContainerRef = React.useRef<HTMLDivElement>(null)
   const innerContainerRef = React.useRef<HTMLDivElement>(null)
   const [mounted, setMounted] = React.useState(false)
diff --git a/src/stories/ProfileToken.stories.tsx b/src/stories/ProfileToken.stories.tsx
index 9ccfaad0351..5c0f0315b4e 100644
--- a/src/stories/ProfileToken.stories.tsx
+++ b/src/stories/ProfileToken.stories.tsx
@@ -34,7 +34,7 @@ export default {
 
 const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove']
 
-const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
+const SingleExampleContainer: React.FC<React.PropsWithChildren<{label?: string}>> = ({children, label}) => (
   <Box
     display="flex"
     sx={{
@@ -52,7 +52,7 @@ const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) =
   </Box>
 )
 
-const ExampleCollectionContainer: React.FC = ({children}) => (
+const ExampleCollectionContainer: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
   <Box
     display="flex"
     sx={{
diff --git a/src/stories/SelectPanel.stories.tsx b/src/stories/SelectPanel.stories.tsx
index 8c6ced294ce..06d22e289fe 100644
--- a/src/stories/SelectPanel.stories.tsx
+++ b/src/stories/SelectPanel.stories.tsx
@@ -12,7 +12,7 @@ const meta: Meta = {
   title: 'Composite components/SelectPanel',
   component: SelectPanel,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => {
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => {
       return (
         <ThemeProvider theme={theme}>
           <BaseStyles>
diff --git a/src/stories/Token.stories.tsx b/src/stories/Token.stories.tsx
index 7703aa4709a..4235e0848f6 100644
--- a/src/stories/Token.stories.tsx
+++ b/src/stories/Token.stories.tsx
@@ -39,7 +39,7 @@ export default {
 
 const excludedControlKeys = ['id', 'as', 'tabIndex', 'onRemove', 'leadingVisual']
 
-const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) => (
+const SingleExampleContainer: React.FC<React.PropsWithChildren<{label?: string}>> = ({children, label}) => (
   <Box
     display="flex"
     sx={{
@@ -57,7 +57,7 @@ const SingleExampleContainer: React.FC<{label?: string}> = ({children, label}) =
   </Box>
 )
 
-const ExampleCollectionContainer: React.FC = ({children}) => (
+const ExampleCollectionContainer: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
   <Box
     display="flex"
     sx={{
diff --git a/src/stories/deprecated/ActionList.stories.tsx b/src/stories/deprecated/ActionList.stories.tsx
index 0659ae39d9c..195f43475a1 100644
--- a/src/stories/deprecated/ActionList.stories.tsx
+++ b/src/stories/deprecated/ActionList.stories.tsx
@@ -28,7 +28,7 @@ const meta: Meta = {
   title: 'Deprecated components/ActionList',
   component: ActionList,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => (
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
       <ThemeProvider>
         <BaseStyles>
           <Story />
diff --git a/src/stories/deprecated/ActionMenu.stories.tsx b/src/stories/deprecated/ActionMenu.stories.tsx
index 1f3dd602f41..ca8ba70fb4c 100644
--- a/src/stories/deprecated/ActionMenu.stories.tsx
+++ b/src/stories/deprecated/ActionMenu.stories.tsx
@@ -23,7 +23,7 @@ const meta: Meta = {
   title: 'Deprecated components/ActionMenu',
   component: ActionMenu,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => (
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => (
       <ThemeProvider>
         <BaseStyles>
           <Story />
diff --git a/src/stories/deprecated/DropdownMenu.stories.tsx b/src/stories/deprecated/DropdownMenu.stories.tsx
index bdeaf0c3ef2..66226b40aec 100644
--- a/src/stories/deprecated/DropdownMenu.stories.tsx
+++ b/src/stories/deprecated/DropdownMenu.stories.tsx
@@ -11,7 +11,7 @@ const meta: Meta = {
   title: 'Deprecated components/DropdownMenu',
   component: DropdownMenu,
   decorators: [
-    (Story: React.ComponentType): JSX.Element => {
+    (Story: React.ComponentType<React.PropsWithChildren<unknown>>): JSX.Element => {
       return (
         <ThemeProvider theme={theme}>
           <BaseStyles>
diff --git a/src/utils/create-slots.tsx b/src/utils/create-slots.tsx
index aee01490f18..884d45f07f6 100644
--- a/src/utils/create-slots.tsx
+++ b/src/utils/create-slots.tsx
@@ -27,10 +27,10 @@ const createSlots = <SlotNames extends string>(slotNames: SlotNames[]) => {
    *  When all the children have mounted = registered themselves in slot,
    *  we re-render the parent component to render with slots
    */
-  const Slots: React.FC<{
+  const Slots: React.FC<React.PropsWithChildren<{
     context?: ContextProps['context']
     children: (slots: Slots) => React.ReactNode
-  }> = ({context = {}, children}) => {
+  }>> = ({context = {}, children}) => {
     // initialise slots
     const slotsDefinition: Slots = {}
     slotNames.map(name => (slotsDefinition[name] = null))
@@ -76,10 +76,10 @@ const createSlots = <SlotNames extends string>(slotNames: SlotNames[]) => {
     )
   }
 
-  const Slot: React.FC<{
+  const Slot: React.FC<React.PropsWithChildren<{
     name: SlotNames
     children: React.ReactNode
-  }> = ({name, children}) => {
+  }>> = ({name, children}) => {
     const {registerSlot, unregisterSlot, context} = React.useContext(SlotsContext)
 
     React.useEffect(() => {
diff --git a/src/utils/story-helpers.tsx b/src/utils/story-helpers.tsx
index 98c8d6992ab..eeb74c639a3 100644
--- a/src/utils/story-helpers.tsx
+++ b/src/utils/story-helpers.tsx
@@ -51,7 +51,7 @@ const GlobalStyleMultiTheme = createGlobalStyle`
   }
 `
 
-export const withThemeProvider = (Story: React.FC<StoryContext>, context: StoryContext) => {
+export const withThemeProvider = (Story: React.FC<React.PropsWithChildren<StoryContext>>, context: StoryContext) => {
   // used for testing ThemeProvider.stories.tsx
   if (context.parameters.disableThemeDecorator) return <Story {...context} />
 
diff --git a/src/utils/testing.tsx b/src/utils/testing.tsx
index ea4572d2749..da23c6dfc4d 100644
--- a/src/utils/testing.tsx
+++ b/src/utils/testing.tsx
@@ -171,7 +171,7 @@ export function getClassName(node: React.ReactElement) {
 
 export function getClasses(node: React.ReactElement) {
   const className = getClassName(node)
-  return className ? className.trim().split(/ +/) : []
+  return className ? className.trim().split(/ +/) : [];
 }
 
 export async function loadCSS(path: string) {
@@ -202,7 +202,7 @@ interface Options {
 
 interface BehavesAsComponent {
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  Component: React.ComponentType<any>
+  Component: React.ComponentType<React.PropsWithChildren<any>>
   toRender?: () => React.ReactElement
   options?: Options
 }
diff --git a/src/utils/types/ComponentProps.ts b/src/utils/types/ComponentProps.ts
index 44d9e19f492..2b62b77915d 100644
--- a/src/utils/types/ComponentProps.ts
+++ b/src/utils/types/ComponentProps.ts
@@ -5,7 +5,7 @@
  *
  * @example ComponentProps<typeof MyComponent>
  */
-export type ComponentProps<T> = T extends React.ComponentType<infer Props>
+export type ComponentProps<T> = T extends React.ComponentType<React.PropsWithChildren<infer Props>>
   ? // eslint-disable-next-line @typescript-eslint/ban-types
     Props extends object
     ? Props

From 2144cdc15319229e741ebca080f7d909e9b7225d Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Wed, 27 Jul 2022 13:35:42 +0000
Subject: [PATCH 2/3] run prettier

---
 src/ActionList/Description.tsx                |  6 ++-
 src/Dialog/Dialog.tsx                         |  8 ++-
 src/FormControl/_FormControlValidation.tsx    |  7 ++-
 src/PageLayout/PageLayout.tsx                 | 19 +++++--
 src/Placeholder.tsx                           | 12 +++--
 src/Portal/Portal.tsx                         |  6 ++-
 src/Select.tsx                                |  8 ++-
 src/TextInputWithTokens.tsx                   |  4 +-
 .../_CheckboxOrRadioGroupLabel.tsx            |  6 ++-
 .../_CheckboxOrRadioGroupValidation.tsx       |  6 ++-
 src/_InputLabel.tsx                           | 10 +++-
 src/_InputValidation.tsx                      |  5 +-
 src/_TextInputInnerAction.tsx                 | 10 ++--
 src/_TextInputInnerVisualSlot.tsx             | 18 ++++---
 src/__tests__/.eslintrc.json                  |  4 +-
 src/__tests__/TextInputWithTokens.test.tsx    |  6 ++-
 .../deprecated/ChoiceFieldset.test.tsx        | 49 +++++++++----------
 .../ChoiceFieldset/ChoiceFieldCaption.tsx     |  4 +-
 .../ChoiceFieldset/ChoiceFieldLabel.tsx       |  4 +-
 .../ChoiceFieldset/ChoiceFieldsetLegend.tsx   |  5 +-
 .../ChoiceFieldset/ChoiceFieldsetList.tsx     |  5 +-
 .../ChoiceFieldset/ChoiceFieldsetListItem.tsx |  7 ++-
 .../ChoiceFieldsetValidation.tsx              |  4 +-
 src/deprecated/ChoiceInputField.tsx           | 11 ++++-
 .../InputField/_InputFieldValidation.tsx      |  4 +-
 src/deprecated/_ChoiceInputLeadingVisual.tsx  |  4 +-
 src/utils/create-slots.tsx                    | 20 +++++---
 src/utils/testing.tsx                         |  2 +-
 28 files changed, 174 insertions(+), 80 deletions(-)

diff --git a/src/ActionList/Description.tsx b/src/ActionList/Description.tsx
index 3632bd598e0..20950363b0e 100644
--- a/src/ActionList/Description.tsx
+++ b/src/ActionList/Description.tsx
@@ -14,7 +14,11 @@ export type ActionListDescriptionProps = {
   variant?: 'inline' | 'block'
 } & SxProp
 
-export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({variant = 'inline', sx = {}, ...props}) => {
+export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({
+  variant = 'inline',
+  sx = {},
+  ...props
+}) => {
   const styles = {
     fontSize: 0,
     lineHeight: '16px',
diff --git a/src/Dialog/Dialog.tsx b/src/Dialog/Dialog.tsx
index 52736a51b6a..58ec4428240 100644
--- a/src/Dialog/Dialog.tsx
+++ b/src/Dialog/Dialog.tsx
@@ -213,7 +213,13 @@ const StyledDialog = styled.div<StyledDialogProps>`
   ${sx};
 `
 
-const DefaultHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({dialogLabelId, title, subtitle, dialogDescriptionId, onClose}) => {
+const DefaultHeader: React.FC<React.PropsWithChildren<DialogHeaderProps>> = ({
+  dialogLabelId,
+  title,
+  subtitle,
+  dialogDescriptionId,
+  onClose
+}) => {
   const onCloseClick = useCallback(() => {
     onClose('close-button')
   }, [onClose])
diff --git a/src/FormControl/_FormControlValidation.tsx b/src/FormControl/_FormControlValidation.tsx
index 354ae8f4f6a..c508c426dfc 100644
--- a/src/FormControl/_FormControlValidation.tsx
+++ b/src/FormControl/_FormControlValidation.tsx
@@ -10,7 +10,12 @@ export type FormControlValidationProps = {
   id?: string
 } & SxProp
 
-const FormControlValidation: React.FC<React.PropsWithChildren<FormControlValidationProps>> = ({children, variant, sx, id}) => (
+const FormControlValidation: React.FC<React.PropsWithChildren<FormControlValidationProps>> = ({
+  children,
+  variant,
+  sx,
+  id
+}) => (
   <Slot name="Validation">
     {({validationMessageId}: FormControlContext) => (
       <InputValidation validationStatus={variant} id={id || validationMessageId} sx={sx}>
diff --git a/src/PageLayout/PageLayout.tsx b/src/PageLayout/PageLayout.tsx
index 19bce2b160f..b317597f12f 100644
--- a/src/PageLayout/PageLayout.tsx
+++ b/src/PageLayout/PageLayout.tsx
@@ -111,7 +111,11 @@ function negateSpacingValue(value: number | null | Array<number | null>) {
   return value === null ? null : -value
 }
 
-const HorizontalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({variant = 'none', variantWhenNarrow = 'inherit', sx = {}}) => {
+const HorizontalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({
+  variant = 'none',
+  variantWhenNarrow = 'inherit',
+  sx = {}
+}) => {
   const {padding} = React.useContext(PageLayoutContext)
   return (
     <Box
@@ -153,7 +157,11 @@ const verticalDividerVariants = {
   }
 }
 
-const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({variant = 'none', variantWhenNarrow = 'inherit', sx = {}}) => {
+const VerticalDivider: React.FC<React.PropsWithChildren<DividerProps>> = ({
+  variant = 'none',
+  variantWhenNarrow = 'inherit',
+  sx = {}
+}) => {
   return (
     <Box
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -232,7 +240,12 @@ const contentWidths = {
   xlarge: '1280px'
 }
 
-const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({width = 'full', hidden = false, children, sx = {}}) => {
+const Content: React.FC<React.PropsWithChildren<PageLayoutContentProps>> = ({
+  width = 'full',
+  hidden = false,
+  children,
+  sx = {}
+}) => {
   const isHidden = useResponsiveValue(hidden, false)
   return (
     <Box
diff --git a/src/Placeholder.tsx b/src/Placeholder.tsx
index e069359b0dd..861ae840f59 100644
--- a/src/Placeholder.tsx
+++ b/src/Placeholder.tsx
@@ -2,11 +2,13 @@ import {Box} from '.'
 import React from 'react'
 
 /** Private component used to render placeholders in storybook and documentation examples  */
-export const Placeholder: React.FC<React.PropsWithChildren<{
-  width?: number | string
-  height: number | string
-  label?: string
-}>> = ({width, height, label}) => {
+export const Placeholder: React.FC<
+  React.PropsWithChildren<{
+    width?: number | string
+    height: number | string
+    label?: string
+  }>
+> = ({width, height, label}) => {
   return (
     <Box
       sx={{
diff --git a/src/Portal/Portal.tsx b/src/Portal/Portal.tsx
index 73ab6bf5d79..c881cda5366 100644
--- a/src/Portal/Portal.tsx
+++ b/src/Portal/Portal.tsx
@@ -60,7 +60,11 @@ export interface PortalProps {
  * Creates a React Portal, placing all children in a separate physical DOM root node.
  * @see https://reactjs.org/docs/portals.html
  */
-export const Portal: React.FC<React.PropsWithChildren<PortalProps>> = ({children, onMount, containerName: _containerName}) => {
+export const Portal: React.FC<React.PropsWithChildren<PortalProps>> = ({
+  children,
+  onMount,
+  containerName: _containerName
+}) => {
   const hostElement = document.createElement('div')
 
   // Portaled content should get their own stacking context so they don't interfere
diff --git a/src/Select.tsx b/src/Select.tsx
index cb39a66fb0f..1b71aa72a89 100644
--- a/src/Select.tsx
+++ b/src/Select.tsx
@@ -101,9 +101,13 @@ const Select = React.forwardRef<HTMLSelectElement, SelectProps>(
   )
 )
 
-const Option: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptionElement> & {value: string}>> = props => <option {...props} />
+const Option: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptionElement> & {value: string}>> = props => (
+  <option {...props} />
+)
 
-const OptGroup: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>> = props => <optgroup {...props} />
+const OptGroup: React.FC<React.PropsWithChildren<React.HTMLProps<HTMLOptGroupElement>>> = props => (
+  <optgroup {...props} />
+)
 
 export default Object.assign(Select, {
   Option,
diff --git a/src/TextInputWithTokens.tsx b/src/TextInputWithTokens.tsx
index 07e260a100a..1039acbcd94 100644
--- a/src/TextInputWithTokens.tsx
+++ b/src/TextInputWithTokens.tsx
@@ -23,7 +23,9 @@ export type TextInputWithTokensProps<TokenComponentType extends AnyReactComponen
   /**
    * The array of tokens to render
    */
-  tokens: TokenComponentType extends React.ComponentType<React.PropsWithChildren<infer TokenProps>> ? TokenProps[] : never
+  tokens: TokenComponentType extends React.ComponentType<React.PropsWithChildren<infer TokenProps>>
+    ? TokenProps[]
+    : never
   /**
    * The function that gets called when a token is removed
    */
diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx
index be314df5ed6..9b4b0a4008f 100644
--- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx
+++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupLabel.tsx
@@ -12,7 +12,11 @@ export type CheckboxOrRadioGroupLabelProps = {
   visuallyHidden?: boolean
 } & SxProp
 
-const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupLabelProps>> = ({children, visuallyHidden, sx}) => (
+const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupLabelProps>> = ({
+  children,
+  visuallyHidden,
+  sx
+}) => (
   <Slot name="Label">
     {({required, disabled}: CheckboxOrRadioGroupContext) => (
       <VisuallyHidden
diff --git a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx
index 4739dfe6c62..e8772e94862 100644
--- a/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx
+++ b/src/_CheckboxOrRadioGroup/_CheckboxOrRadioGroupValidation.tsx
@@ -10,7 +10,11 @@ export type CheckboxOrRadioGroupValidationProps = {
   variant: FormValidationStatus
 } & SxProp
 
-const CheckboxOrRadioGroupValidation: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupValidationProps>> = ({children, variant, sx}) => (
+const CheckboxOrRadioGroupValidation: React.FC<React.PropsWithChildren<CheckboxOrRadioGroupValidationProps>> = ({
+  children,
+  variant,
+  sx
+}) => (
   <Slot name="Validation">
     {({validationMessageId = ''}: CheckboxOrRadioGroupContext) => (
       <InputValidation validationStatus={variant} id={validationMessageId} sx={sx}>
diff --git a/src/_InputLabel.tsx b/src/_InputLabel.tsx
index 6b100edbbaf..3bee967643b 100644
--- a/src/_InputLabel.tsx
+++ b/src/_InputLabel.tsx
@@ -9,7 +9,15 @@ interface Props extends React.HTMLProps<HTMLLabelElement> {
   visuallyHidden?: boolean
 }
 
-const InputLabel: React.FC<React.PropsWithChildren<Props & SxProp>> = ({children, disabled, htmlFor, id, required, visuallyHidden, sx}) => {
+const InputLabel: React.FC<React.PropsWithChildren<Props & SxProp>> = ({
+  children,
+  disabled,
+  htmlFor,
+  id,
+  required,
+  visuallyHidden,
+  sx
+}) => {
   return (
     <VisuallyHidden
       isVisible={!visuallyHidden}
diff --git a/src/_InputValidation.tsx b/src/_InputValidation.tsx
index 377d396b0d5..9f147460871 100644
--- a/src/_InputValidation.tsx
+++ b/src/_InputValidation.tsx
@@ -9,7 +9,10 @@ type Props = {
   validationStatus?: FormValidationStatus
 } & SxProp
 
-const validationIconMap: Record<NonNullable<Props['validationStatus']>, React.ComponentType<React.PropsWithChildren<IconProps>>> = {
+const validationIconMap: Record<
+  NonNullable<Props['validationStatus']>,
+  React.ComponentType<React.PropsWithChildren<IconProps>>
+> = {
   success: CheckCircleFillIcon,
   error: AlertFillIcon,
   warning: AlertFillIcon
diff --git a/src/_TextInputInnerAction.tsx b/src/_TextInputInnerAction.tsx
index 15c840f824f..4d2d6eb4fde 100644
--- a/src/_TextInputInnerAction.tsx
+++ b/src/_TextInputInnerAction.tsx
@@ -39,10 +39,12 @@ const invisibleButtonStyleOverrides = {
   }
 }
 
-const ConditionalTooltip: React.FC<React.PropsWithChildren<{
-  ['aria-label']?: string
-  children: React.ReactNode
-}>> = ({'aria-label': ariaLabel, children}) => (
+const ConditionalTooltip: React.FC<
+  React.PropsWithChildren<{
+    ['aria-label']?: string
+    children: React.ReactNode
+  }>
+> = ({'aria-label': ariaLabel, children}) => (
   <>
     {ariaLabel ? (
       <Tooltip
diff --git a/src/_TextInputInnerVisualSlot.tsx b/src/_TextInputInnerVisualSlot.tsx
index e1711242638..2fd86eab436 100644
--- a/src/_TextInputInnerVisualSlot.tsx
+++ b/src/_TextInputInnerVisualSlot.tsx
@@ -2,14 +2,16 @@ import React from 'react'
 import {Box, Spinner} from '.'
 import {TextInputNonPassthroughProps} from './TextInput'
 
-const TextInputInnerVisualSlot: React.FC<React.PropsWithChildren<{
-  /** Whether the input is expected to ever show a loading indicator */
-  hasLoadingIndicator: boolean
-  /** Whether the to show the loading indicator */
-  showLoadingIndicator: TextInputNonPassthroughProps['loading']
-  /** Which side of this visual is being rendered */
-  visualPosition: 'leading' | 'trailing'
-}>> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition}) => {
+const TextInputInnerVisualSlot: React.FC<
+  React.PropsWithChildren<{
+    /** Whether the input is expected to ever show a loading indicator */
+    hasLoadingIndicator: boolean
+    /** Whether the to show the loading indicator */
+    showLoadingIndicator: TextInputNonPassthroughProps['loading']
+    /** Which side of this visual is being rendered */
+    visualPosition: 'leading' | 'trailing'
+  }>
+> = ({children, hasLoadingIndicator, showLoadingIndicator, visualPosition}) => {
   if ((!children && !hasLoadingIndicator) || (visualPosition === 'leading' && !children && !showLoadingIndicator)) {
     return null
   }
diff --git a/src/__tests__/.eslintrc.json b/src/__tests__/.eslintrc.json
index ce5c2c03a59..0cbc7046eaf 100644
--- a/src/__tests__/.eslintrc.json
+++ b/src/__tests__/.eslintrc.json
@@ -1,7 +1,5 @@
 {
-  "extends": [
-    "plugin:jest/recommended"
-  ],
+  "extends": ["plugin:jest/recommended"],
   "parserOptions": {
     "project": "../../tsconfig.json"
   },
diff --git a/src/__tests__/TextInputWithTokens.test.tsx b/src/__tests__/TextInputWithTokens.test.tsx
index d960eda99da..30309417b99 100644
--- a/src/__tests__/TextInputWithTokens.test.tsx
+++ b/src/__tests__/TextInputWithTokens.test.tsx
@@ -20,7 +20,11 @@ const mockTokens = [
   {text: 'seven', id: 7}
 ]
 
-const LabelledTextInputWithTokens: React.FC<React.PropsWithChildren<TextInputWithTokensProps>> = ({onTokenRemove, tokens, ...rest}) => (
+const LabelledTextInputWithTokens: React.FC<React.PropsWithChildren<TextInputWithTokensProps>> = ({
+  onTokenRemove,
+  tokens,
+  ...rest
+}) => (
   <>
     {/* eslint-disable-next-line jsx-a11y/label-has-for */}
     <label htmlFor="tokenInput" id="tokenLabel">
diff --git a/src/__tests__/deprecated/ChoiceFieldset.test.tsx b/src/__tests__/deprecated/ChoiceFieldset.test.tsx
index 6fd659fb282..fd89b97e8d5 100644
--- a/src/__tests__/deprecated/ChoiceFieldset.test.tsx
+++ b/src/__tests__/deprecated/ChoiceFieldset.test.tsx
@@ -7,34 +7,31 @@ import userEvent from '@testing-library/user-event'
 import ChoiceFieldset, {Item, ChoiceFieldsetProps} from '../../deprecated/ChoiceFieldset'
 import {ChoiceFieldsetListProps} from '../../deprecated/ChoiceFieldset/ChoiceFieldsetList'
 
-const SelectableChoicelistFieldset: React.FC<React.PropsWithChildren<ChoiceFieldsetProps & ChoiceFieldsetListProps>> = ({
-  onSelect,
-  selectionVariant,
-  selected = []
-}) => {
-  const [selectionVals, setSelectionVals] = React.useState<string[]>(selected)
+const SelectableChoicelistFieldset: React.FC<React.PropsWithChildren<ChoiceFieldsetProps & ChoiceFieldsetListProps>> =
+  ({onSelect, selectionVariant, selected = []}) => {
+    const [selectionVals, setSelectionVals] = React.useState<string[]>(selected)
 
-  React.useEffect(() => {
-    onSelect && onSelect(selectionVals)
-  }, [onSelect, selectionVals])
+    React.useEffect(() => {
+      onSelect && onSelect(selectionVals)
+    }, [onSelect, selectionVals])
 
-  return (
-    <SSRProvider>
-      <ChoiceFieldset
-        onSelect={selectedVals => {
-          setSelectionVals(selectedVals)
-        }}
-        selected={selectionVals}
-      >
-        <ChoiceFieldset.Legend>Legend</ChoiceFieldset.Legend>
-        <ChoiceFieldset.List selectionVariant={selectionVariant}>
-          <ChoiceFieldset.Item value="labelOne">Label one</ChoiceFieldset.Item>
-          <ChoiceFieldset.Item value="labelTwo">Label two</ChoiceFieldset.Item>
-        </ChoiceFieldset.List>
-      </ChoiceFieldset>
-    </SSRProvider>
-  )
-}
+    return (
+      <SSRProvider>
+        <ChoiceFieldset
+          onSelect={selectedVals => {
+            setSelectionVals(selectedVals)
+          }}
+          selected={selectionVals}
+        >
+          <ChoiceFieldset.Legend>Legend</ChoiceFieldset.Legend>
+          <ChoiceFieldset.List selectionVariant={selectionVariant}>
+            <ChoiceFieldset.Item value="labelOne">Label one</ChoiceFieldset.Item>
+            <ChoiceFieldset.Item value="labelTwo">Label two</ChoiceFieldset.Item>
+          </ChoiceFieldset.List>
+        </ChoiceFieldset>
+      </SSRProvider>
+    )
+  }
 
 describe('ChoiceFieldset', () => {
   it('renders default', () => {
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx
index 0bd46a8032b..47146864496 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldCaption.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import ChoiceInputField from '../ChoiceInputField'
 
-const ChoiceFieldCaption: React.FC<React.PropsWithChildren<unknown>> = ({children}) => <ChoiceInputField.Caption>{children}</ChoiceInputField.Caption>
+const ChoiceFieldCaption: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
+  <ChoiceInputField.Caption>{children}</ChoiceInputField.Caption>
+)
 
 export default ChoiceFieldCaption
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx
index 9b2c92f2a4e..cbd039a47dc 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldLabel.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import ChoiceInputField from '../ChoiceInputField'
 
-const ChoiceFieldLabel: React.FC<React.PropsWithChildren<unknown>> = ({children}) => <ChoiceInputField.Label>{children}</ChoiceInputField.Label>
+const ChoiceFieldLabel: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
+  <ChoiceInputField.Label>{children}</ChoiceInputField.Label>
+)
 
 export default ChoiceFieldLabel
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx
index 05a4d1bc8c4..e8c4065ba98 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetLegend.tsx
@@ -10,7 +10,10 @@ export interface ChoiceFieldsetLegendProps {
   visuallyHidden?: boolean
 }
 
-const ChoiceFieldsetLegend: React.FC<React.PropsWithChildren<ChoiceFieldsetLegendProps>> = ({children, visuallyHidden}) => (
+const ChoiceFieldsetLegend: React.FC<React.PropsWithChildren<ChoiceFieldsetLegendProps>> = ({
+  children,
+  visuallyHidden
+}) => (
   <Slot name="Legend">
     {({required, disabled}: ChoiceFieldsetContext) => (
       <VisuallyHidden
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx
index 4768be395d4..0b3308f5fb8 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetList.tsx
@@ -37,7 +37,10 @@ const getSelectedCheckboxes = (
   return selectedValues.filter(selectedValue => selectedValue !== value)
 }
 
-const ChoiceFieldsetList: React.FC<React.PropsWithChildren<ChoiceFieldsetListProps>> = ({selectionVariant, children}) => {
+const ChoiceFieldsetList: React.FC<React.PropsWithChildren<ChoiceFieldsetListProps>> = ({
+  selectionVariant,
+  children
+}) => {
   const ssrSafeUniqueName = useSSRSafeId()
 
   return (
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx
index f1c2fb9a55a..c3efe4293cf 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetListItem.tsx
@@ -23,7 +23,12 @@ export interface ChoiceFieldProps {
   value: string
 }
 
-const ChoiceFieldsetListItem: React.FC<React.PropsWithChildren<ChoiceFieldProps>> = ({children, id, disabled: disabledProp, value}) => {
+const ChoiceFieldsetListItem: React.FC<React.PropsWithChildren<ChoiceFieldProps>> = ({
+  children,
+  id,
+  disabled: disabledProp,
+  value
+}) => {
   const choiceFieldsetListContext = useContext(ChoiceFieldsetListContext)
   if (choiceFieldsetListContext === null) {
     throw new Error('ChoiceFieldsetListContext returned null')
diff --git a/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx b/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx
index 13d553260fd..6307644d28a 100644
--- a/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx
+++ b/src/deprecated/ChoiceFieldset/ChoiceFieldsetValidation.tsx
@@ -4,6 +4,8 @@ export interface ChoiceFieldsetValidationProps {
   validationKey: string
 }
 
-const ChoiceFieldsetValidation: React.FC<React.PropsWithChildren<ChoiceFieldsetValidationProps>> = ({children}) => <>{children}</>
+const ChoiceFieldsetValidation: React.FC<React.PropsWithChildren<ChoiceFieldsetValidationProps>> = ({children}) => (
+  <>{children}</>
+)
 
 export default ChoiceFieldsetValidation
diff --git a/src/deprecated/ChoiceInputField.tsx b/src/deprecated/ChoiceInputField.tsx
index a2cc13d0634..d9451ccda68 100644
--- a/src/deprecated/ChoiceInputField.tsx
+++ b/src/deprecated/ChoiceInputField.tsx
@@ -25,7 +25,12 @@ const getInputToRender = (inputType: 'radio' | 'checkbox', children?: React.Reac
   )
 }
 
-const ChoiceInputField: React.FC<React.PropsWithChildren<Props>> = ({children, disabled, id: idProp, validationStatus}) => {
+const ChoiceInputField: React.FC<React.PropsWithChildren<Props>> = ({
+  children,
+  disabled,
+  id: idProp,
+  validationStatus
+}) => {
   const id = useSSRSafeId(idProp)
   const captionChildren: React.ReactElement[] | undefined | null = React.Children.map(children, child =>
     React.isValidElement(child) && child.type === InputFieldCaption ? child : null
@@ -125,7 +130,9 @@ const ChoiceInputField: React.FC<React.PropsWithChildren<Props>> = ({children, d
   )
 }
 
-const Label: React.FC<React.PropsWithChildren<unknown>> = ({children}) => <InputField.Label>{children}</InputField.Label>
+const Label: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
+  <InputField.Label>{children}</InputField.Label>
+)
 
 /**
  * @deprecated Use `FormControl` instead. See https://primer.style/react/FormControl for more info
diff --git a/src/deprecated/InputField/_InputFieldValidation.tsx b/src/deprecated/InputField/_InputFieldValidation.tsx
index c30bf6cbc57..9125b78a9e9 100644
--- a/src/deprecated/InputField/_InputFieldValidation.tsx
+++ b/src/deprecated/InputField/_InputFieldValidation.tsx
@@ -3,6 +3,8 @@ export interface InputFieldValidationProps {
   validationKey: string
 }
 
-const InputFieldValidation: React.FC<React.PropsWithChildren<InputFieldValidationProps>> = ({children}) => <>{children}</>
+const InputFieldValidation: React.FC<React.PropsWithChildren<InputFieldValidationProps>> = ({children}) => (
+  <>{children}</>
+)
 
 export default InputFieldValidation
diff --git a/src/deprecated/_ChoiceInputLeadingVisual.tsx b/src/deprecated/_ChoiceInputLeadingVisual.tsx
index a2e639c6ab8..095273b94f3 100644
--- a/src/deprecated/_ChoiceInputLeadingVisual.tsx
+++ b/src/deprecated/_ChoiceInputLeadingVisual.tsx
@@ -1,6 +1,8 @@
 import React from 'react'
 import {Slot} from '../deprecated/InputField/slots'
 
-const ChoiceInputLeadingVisual: React.FC<React.PropsWithChildren<unknown>> = ({children}) => <Slot name="LeadingVisual">{children}</Slot>
+const ChoiceInputLeadingVisual: React.FC<React.PropsWithChildren<unknown>> = ({children}) => (
+  <Slot name="LeadingVisual">{children}</Slot>
+)
 
 export default ChoiceInputLeadingVisual
diff --git a/src/utils/create-slots.tsx b/src/utils/create-slots.tsx
index 884d45f07f6..9489a43c1d9 100644
--- a/src/utils/create-slots.tsx
+++ b/src/utils/create-slots.tsx
@@ -27,10 +27,12 @@ const createSlots = <SlotNames extends string>(slotNames: SlotNames[]) => {
    *  When all the children have mounted = registered themselves in slot,
    *  we re-render the parent component to render with slots
    */
-  const Slots: React.FC<React.PropsWithChildren<{
-    context?: ContextProps['context']
-    children: (slots: Slots) => React.ReactNode
-  }>> = ({context = {}, children}) => {
+  const Slots: React.FC<
+    React.PropsWithChildren<{
+      context?: ContextProps['context']
+      children: (slots: Slots) => React.ReactNode
+    }>
+  > = ({context = {}, children}) => {
     // initialise slots
     const slotsDefinition: Slots = {}
     slotNames.map(name => (slotsDefinition[name] = null))
@@ -76,10 +78,12 @@ const createSlots = <SlotNames extends string>(slotNames: SlotNames[]) => {
     )
   }
 
-  const Slot: React.FC<React.PropsWithChildren<{
-    name: SlotNames
-    children: React.ReactNode
-  }>> = ({name, children}) => {
+  const Slot: React.FC<
+    React.PropsWithChildren<{
+      name: SlotNames
+      children: React.ReactNode
+    }>
+  > = ({name, children}) => {
     const {registerSlot, unregisterSlot, context} = React.useContext(SlotsContext)
 
     React.useEffect(() => {
diff --git a/src/utils/testing.tsx b/src/utils/testing.tsx
index da23c6dfc4d..ae2efc34a0d 100644
--- a/src/utils/testing.tsx
+++ b/src/utils/testing.tsx
@@ -171,7 +171,7 @@ export function getClassName(node: React.ReactElement) {
 
 export function getClasses(node: React.ReactElement) {
   const className = getClassName(node)
-  return className ? className.trim().split(/ +/) : [];
+  return className ? className.trim().split(/ +/) : []
 }
 
 export async function loadCSS(path: string) {

From 0fbce13611672c59f9f6b80e3e4a9d7de9c65a12 Mon Sep 17 00:00:00 2001
From: Matthew Costabile <mattcosta7@github.com>
Date: Wed, 27 Jul 2022 13:35:51 +0000
Subject: [PATCH 3/3] changeset

---
 .changeset/cyan-frogs-pump.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/cyan-frogs-pump.md

diff --git a/.changeset/cyan-frogs-pump.md b/.changeset/cyan-frogs-pump.md
new file mode 100644
index 00000000000..a1edc6a7223
--- /dev/null
+++ b/.changeset/cyan-frogs-pump.md
@@ -0,0 +1,5 @@
+---
+'@primer/react': patch
+---
+
+update types to allow children for react 18