fix: types for React 18

src/BrandedNavBar/MobileMenu.tsx

@@ -227,7 +227,7 @@ type BaseMobileMenuProps = {
   showNulogyLogo?: boolean;
 };
 
-const BaseMobileMenu: React.FC<BaseMobileMenuProps> = ({
+const BaseMobileMenu: React.FC<React.PropsWithChildren<BaseMobileMenuProps>> = ({
   menuData,
   closeMenu,
   subtext,

src/BrandedNavBar/NavBar.tsx

@@ -32,7 +32,7 @@ type MediumNavBarProps = {
   subtext?: string;
 };
 
-const MediumNavBar: React.FC<MediumNavBarProps> = ({
+const MediumNavBar: React.FC<React.PropsWithChildren<MediumNavBarProps>> = ({
   menuData,
   environment,
   logo,

src/Branding/Branding.tsx

@@ -39,7 +39,7 @@ const alignments = {
 const getLogoColor = (logoColor) => logoColors[logoColor] || logoColors.blue;
 const getAlignment = (alignment) => alignments[alignment] || alignments.left;
 
-const BrandingWrap: React.FC<any> = styled.div(
+const BrandingWrap: React.FC<React.PropsWithChildren<any>> = styled.div(
   ({ alignment, size }: any): CSSObject => ({
     width: "100%",
     display: "inline-flex",
@@ -50,7 +50,7 @@ const BrandingWrap: React.FC<any> = styled.div(
   })
 );
 
-const Line: React.FC<any> = styled.div(
+const Line: React.FC<React.PropsWithChildren<any>> = styled.div(
   ({ logoColor }: any): CSSObject => ({
     position: "relative",
     width: "100%",

src/Branding/BrandingText.tsx

@@ -13,22 +13,24 @@ const logoColors = {
 
 const getLogoColor = (logoColor) => logoColors[logoColor] || logoColors.blue;
 
-const BrandingText: React.FC<any> = styled.span(({ logoColor, size }: BrandingTextProps): any => ({
-  color: getLogoColor(logoColor),
-  textDecoration: "none",
-  fontWeight: theme.fontWeights.medium,
-  letterSpacing: "0.0333em",
-  textTransform: "uppercase",
-  fontSize: size === "small" ? "10px" : "11px",
-  lineHeight: "12px",
-  whiteSpace: "nowrap",
-  active: {
+const BrandingText: React.FC<React.PropsWithChildren<any>> = styled.span(
+  ({ logoColor, size }: BrandingTextProps): any => ({
     color: getLogoColor(logoColor),
-  },
-  visited: {
-    color: getLogoColor(logoColor),
-  },
-}));
+    textDecoration: "none",
+    fontWeight: theme.fontWeights.medium,
+    letterSpacing: "0.0333em",
+    textTransform: "uppercase",
+    fontSize: size === "small" ? "10px" : "11px",
+    lineHeight: "12px",
+    whiteSpace: "nowrap",
+    active: {
+      color: getLogoColor(logoColor),
+    },
+    visited: {
+      color: getLogoColor(logoColor),
+    },
+  })
+);
 BrandingText.defaultProps = {
   logoColor: "blue",
 };

src/Branding/LettermarkLogo.tsx

@@ -18,7 +18,7 @@ type LettermarkLogoProps = {
   letterFill?: string;
   size?: string;
 };
-const LettermarkLogo: React.FC<LettermarkLogoProps> = ({ size, letterFill, ...props }) => (
+const LettermarkLogo: React.FC<React.PropsWithChildren<LettermarkLogoProps>> = ({ size, letterFill, ...props }) => (
   <svg
     {...getSize(size)}
     {...props}

src/Branding/WordmarkLogo.tsx

@@ -19,7 +19,12 @@ type WordmarkLogoProps = {
   letterFill?: string;
   size?: string;
 };
-const WordmarkLogo: React.FC<WordmarkLogoProps> = ({ size, logoFill, letterFill, ...props }) => (
+const WordmarkLogo: React.FC<React.PropsWithChildren<WordmarkLogoProps>> = ({
+  size,
+  logoFill,
+  letterFill,
+  ...props
+}) => (
   <svg
     {...getSize(size)}
     {...props}

src/Button/Button.tsx

@@ -85,7 +85,7 @@ const WrapperButton = styled.button<ButtonProps>(
   space
 );
 
-const Button: React.FC<ButtonProps> = React.forwardRef(
+const Button: React.FC<React.PropsWithChildren<ButtonProps>> = React.forwardRef(
   ({ children, iconSide = "right", icon, className, asLink, size, ...props }: ButtonProps, ref) => {
     const {
       lineHeights: { smallTextCompressed },

src/Button/ControlIcon.tsx

@@ -24,7 +24,7 @@ const getIconColorByState = ({ toggled, disabled, theme }) => {
   return theme.colors.darkGrey;
 };
 
-const StyledButton: React.FC<any> = styled.button(
+const StyledButton: React.FC<React.PropsWithChildren<any>> = styled.button(
   ({ toggled, disabled, theme }: any) => ({
     background: "transparent",
     border: "none",

src/Button/PrimaryButton.tsx

@@ -2,7 +2,7 @@ import styled, { CSSObject } from "styled-components";
 import { darken } from "polished";
 import Button, { ButtonProps } from "./Button";
 
-const PrimaryButton: React.FC<any> = styled(Button)(
+const PrimaryButton: React.FC<React.PropsWithChildren<any>> = styled(Button)(
   ({ disabled, theme }: ButtonProps): CSSObject => ({
     color: theme.colors.white,
     borderColor: theme.colors.blue,

src/ButtonGroup/ButtonGroup.tsx

@@ -32,7 +32,7 @@ const buttonSpacings = (theme) => ({
 const getAlignment = (alignment) => alignments[alignment] || alignments.left;
 const getButtonSpacing = (alignment, theme) => buttonSpacings(theme)[alignment] || buttonSpacings(theme).left;
 
-const ButtonGroup: React.FC<ButtonGroupProps> = styled(Flex)(({ alignment, theme }: any) => ({
+const ButtonGroup: React.FC<React.PropsWithChildren<ButtonGroupProps>> = styled(Flex)(({ alignment, theme }: any) => ({
   flexWrap: "wrap",
   marginBottom: `-${theme.space.x1}`,
   justifyContent: getAlignment(alignment),

src/Card/Card.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 import { Box } from "../Box";
 import { BoxProps } from "../Box/Box";
 
-const Card: React.FC<BoxProps> = styled(Box)({});
+const Card: React.FC<React.PropsWithChildren<BoxProps>> = styled(Box)({});
 
 Card.defaultProps = {
   children: [],

src/Checkbox/Checkbox.tsx

@@ -127,7 +127,7 @@ const CheckboxInput = styled.input<CheckboxProps>((props) => ({
   },
 }));
 
-const Checkbox: React.FC<CheckboxProps> = forwardRef((props, ref) => {
+const Checkbox: React.FC<React.PropsWithChildren<CheckboxProps>> = forwardRef((props, ref) => {
   const { size, className, labelText, disabled, checked, required, error, indeterminate } = props;
 
   const componentSize = useComponentSize(size);

src/Checkbox/CheckboxGroup.tsx

@@ -51,7 +51,7 @@ const Legend = styled.legend(({ theme }) => ({
   marginBottom: theme.space.x1,
 }));
 
-const CheckboxGroup: React.FC<CheckboxGroupProps> = ({
+const CheckboxGroup: React.FC<React.PropsWithChildren<CheckboxGroupProps>> = ({
   className,
   id,
   errorMessage,

src/DatePicker/DatePickerHeader.tsx

@@ -13,7 +13,7 @@ type DatePickerHeaderProps = {
   locale?: string;
 };
 
-const DatePickerHeader: React.FC<DatePickerHeaderProps> = ({
+const DatePickerHeader: React.FC<React.PropsWithChildren<DatePickerHeaderProps>> = ({
   date,
   decreaseMonth,
   increaseMonth,

src/DateRange/DateRange.tsx

@@ -46,7 +46,7 @@ type DateRangeProps = FieldProps & {
 
 const DEFAULT_LABEL = "Date Range";
 
-const DateRange: React.FC<DateRangeProps> = forwardRef(
+const DateRange: React.FC<React.PropsWithChildren<DateRangeProps>> = forwardRef(
   (
     {
       dateFormat,

src/DropdownMenu/DropdownItem.tsx

@@ -8,7 +8,7 @@ type DropdownItemProps = {
   bgHoverColor?: string;
 };
 
-const DropdownItem: React.FC<DropdownItemProps> = styled.div(
+const DropdownItem: React.FC<React.PropsWithChildren<DropdownItemProps>> = styled.div(
   ({ theme, color, hoverColor, bgHoverColor }: DropdownItemProps): CSSObject => ({
     "*": {
       color: theme.colors[color],

src/DropdownMenu/DropdownMenu.tsx

@@ -47,7 +47,10 @@ const transformPropsToModifiers = ({ boundariesElement }) => ({
   boundariesElement,
 });
 
-const DropdownMenu: React.FC<DropdownMenuProps> = React.forwardRef<Reference, DropdownMenuProps>(
+const DropdownMenu: React.FC<React.PropsWithChildren<DropdownMenuProps>> = React.forwardRef<
+  Reference,
+  DropdownMenuProps
+>(
   (
     {
       trigger = () => <IconicButton icon="more" />,

src/DropdownMenu/DropdownMenuContainer.tsx

@@ -37,7 +37,7 @@ const getMenuMargin = (placement, showArrow) => {
   }
 };
 
-const DropdownMenuContainer: React.FC<DropdownMenuContainerProps> = styled(Box)(
+const DropdownMenuContainer: React.FC<React.PropsWithChildren<DropdownMenuContainerProps>> = styled(Box)(
   color,
   ({ dataPlacement, showArrow = true, backgroundColor = "white", theme }: DropdownMenuContainerProps): any => ({
     borderRadius: theme.radii.medium,

src/DropdownMenu/DropdownText.tsx

@@ -4,7 +4,7 @@ import { Text } from "../Type";
 import { TextProps } from "../Type/Text";
 import { addStyledProps } from "../StyledProps";
 
-const DropdownText: React.FC<TextProps> = styled(Text)(
+const DropdownText: React.FC<React.PropsWithChildren<TextProps>> = styled(Text)(
   ({ theme }: TextProps): CSSObject => ({
     color: theme.colors.darkGrey,
     fontWeight: theme.fontWeights.medium,

src/Form/Fieldset.tsx

@@ -1,6 +1,6 @@
 import styled from "styled-components";
 import { space } from "styled-system";
-const Fieldset: React.FC<any> = styled.fieldset(
+const Fieldset: React.FC<React.PropsWithChildren<any>> = styled.fieldset(
   {
     padding: 0,
     border: 0,

src/Form/FormSection.tsx

@@ -12,7 +12,7 @@ const FormSectionTitle = styled(Heading3).attrs({
   as: "legend",
 })({});
 
-const BaseFormSection: React.FC<BaseFormSectionProps> = ({ title, children, ...props }) => (
+const BaseFormSection: React.FC<React.PropsWithChildren<BaseFormSectionProps>> = ({ title, children, ...props }) => (
   <fieldset {...props}>
     {title != null && <FormSectionTitle>{title}</FormSectionTitle>}
     {children}

src/Icon/LoadingIcon.tsx

@@ -2,7 +2,7 @@ import React from "react";
 
 type LoadingIconProps = React.ComponentPropsWithoutRef<"svg">;
 
-const LoadingIcon: React.FC<LoadingIconProps> = (props) => {
+const LoadingIcon: React.FC<React.PropsWithChildren<LoadingIconProps>> = (props) => {
   return (
     <svg
       viewBox="0 0 24px 24px"

src/Layout/Header.tsx

@@ -22,7 +22,7 @@ type HeaderProps = BoxProps & {
   };
 };
 
-const Header: React.FC<HeaderProps> = ({
+const Header: React.FC<React.PropsWithChildren<HeaderProps>> = ({
   background,
   renderBreadcrumbs,
   title,

src/Layout/Page.tsx

@@ -13,7 +13,7 @@ type PageProps = FlexProps & {
   renderHeader?: () => JSX.Element;
 };
 
-export const Page: React.FC<PageProps> = ({
+export const Page: React.FC<React.PropsWithChildren<PageProps>> = ({
   breadcrumbs,
   title,
   children,

src/List/List.tsx

@@ -11,7 +11,7 @@ type ListProps = React.ComponentPropsWithRef<"ul"> &
     leftAlign?: boolean;
     listStyle?: string;
   };
-const List: React.FC<ListProps> = styled.ul(
+const List: React.FC<React.PropsWithChildren<ListProps>> = styled.ul(
   ({ compact, theme, leftAlign, listStyle }: ListProps) => ({
     margin: 0,
     paddingLeft: leftAlign ? "18px" : undefined,

src/List/ListItem.tsx

@@ -6,7 +6,7 @@ type ListItemProps = React.ComponentPropsWithRef<"li"> &
   TypographyProps & {
     className?: string;
   };
-const ListItem: React.FC<ListItemProps> = styled.li(space, color, typography, {
+const ListItem: React.FC<React.PropsWithChildren<ListItemProps>> = styled.li(space, color, typography, {
   "&:last-child": {
     marginBottom: 0,
   },

src/LoadingAnimation/LoadingAnimation.tsx

@@ -4,7 +4,7 @@ import { useTheme } from "styled-components";
 type LoadingAnimationProps = React.ComponentPropsWithRef<"svg"> & {
   inactive?: boolean;
 };
-const LoadingAnimation: React.FC<LoadingAnimationProps> = ({ inactive }) => {
+const LoadingAnimation: React.FC<React.PropsWithChildren<LoadingAnimationProps>> = ({ inactive }) => {
   const { colors } = useTheme();
 
   const color1 = inactive ? colors.grey : colors.blue;

src/Modal/Modal.tsx

@@ -82,7 +82,9 @@ type ModalProps = {
   parentSelector?: (...args: any) => HTMLElement;
 };
 
-const Modal: React.FC<ModalProps> & { setAppElement: (element: string | HTMLElement) => void } = ({
+const Modal: React.FC<React.PropsWithChildren<ModalProps>> & {
+  setAppElement: (element: string | HTMLElement) => void;
+} = ({
   isOpen,
   children,
   title,

src/Modal/ModalContent.tsx

@@ -7,14 +7,16 @@ type ModalContentProps = React.ComponentPropsWithRef<"div"> & {
   theme?: DefaultNDSThemeType;
 };
 
-const ModalContent: React.FC<ModalContentProps> = styled.div(({ hasFooter, theme }: ModalContentProps) => ({
-  marginTop: "-64px",
-  marginBottom: hasFooter ? "-72px" : 0,
-  overflow: "auto",
-  paddingTop: "88px",
-  paddingBottom: hasFooter ? "96px" : theme.space.x2,
-  paddingLeft: theme.space.x3,
-  paddingRight: theme.space.x3,
-}));
+const ModalContent: React.FC<React.PropsWithChildren<ModalContentProps>> = styled.div(
+  ({ hasFooter, theme }: ModalContentProps) => ({
+    marginTop: "-64px",
+    marginBottom: hasFooter ? "-72px" : 0,
+    overflow: "auto",
+    paddingTop: "88px",
+    paddingBottom: hasFooter ? "96px" : theme.space.x2,
+    paddingLeft: theme.space.x3,
+    paddingRight: theme.space.x3,
+  })
+);
 
 export default ModalContent;

src/NDSProvider/ComponentSizeContext.tsx

@@ -17,7 +17,10 @@ export function useComponentSize(selectedSize?: ComponentSize) {
   return selectedSize ?? context.size;
 }
 
-const ComponentSizeContextProvider: React.FC<ComponentSizeContextValue> = ({ size, children }) => {
+const ComponentSizeContextProvider: React.FC<React.PropsWithChildren<ComponentSizeContextValue>> = ({
+  size,
+  children,
+}) => {
   return <ComponentSizeContext.Provider value={{ size }}>{children}</ComponentSizeContext.Provider>;
 };
 

src/NDSProvider/NDSProvider.tsx

@@ -48,7 +48,7 @@ const AllNDSGlobalStyles = ({ theme, locale, disableGlobalStyles, children }: Al
     children
   );
 
-const NDSProvider: React.FC<NDSProviderProps> = ({
+const NDSProvider: React.FC<React.PropsWithChildren<NDSProviderProps>> = ({
   theme,
   children,
   disableGlobalStyles = false,

src/NavBar/NavBar.tsx

@@ -62,7 +62,7 @@ type MediumNavBarProps = {
   environment?: "development" | "training";
 };
 
-const MediumNavBar: React.FC<MediumNavBarProps> = ({
+const MediumNavBar: React.FC<React.PropsWithChildren<MediumNavBarProps>> = ({
   menuData,
   themeColor,
   subtext,

src/Overlay/Overlay.tsx

@@ -10,14 +10,16 @@ type OverlayProps = FlexProps & {
   theme?: DefaultNDSThemeType;
 };
 
-const Overlay: React.FC<OverlayProps> = styled(Flex)<OverlayProps>(({ dark, theme }: OverlayProps) => ({
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  zIndex: theme.zIndices.overlay,
-  backgroundColor: dark ? transparentize(0.5, theme.colors.blackBlue) : transparentize(0.05, theme.colors.white),
-}));
+const Overlay: React.FC<React.PropsWithChildren<OverlayProps>> = styled(Flex)<OverlayProps>(
+  ({ dark, theme }: OverlayProps) => ({
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    zIndex: theme.zIndices.overlay,
+    backgroundColor: dark ? transparentize(0.5, theme.colors.blackBlue) : transparentize(0.05, theme.colors.white),
+  })
+);
 Overlay.defaultProps = {
   position: "fixed",
   justifyContent: "center",

src/Popper/Popper.tsx

@@ -28,7 +28,7 @@ type PopperProps = {
   openAriaLabel?: string;
   closeAriaLabel?: string;
 };
-const Popper: React.FC<PopperProps> = React.forwardRef(
+const Popper: React.FC<React.PropsWithChildren<PopperProps>> = React.forwardRef(
   (
     {
       popperPlacement,

src/Radio/Radio.tsx

@@ -113,7 +113,7 @@ type RadioProps = NativeInputProps &
     error?: boolean;
   };
 
-const Radio: React.FC<RadioProps> = forwardRef(
+const Radio: React.FC<React.PropsWithChildren<RadioProps>> = forwardRef(
   ({ className, labelText, disabled, checked, required, error, size, ...props }, ref) => {
     const componentSize = useComponentSize(size);
     const spaceProps = getSubset(props, propTypes.space);