feat: make some component types compatible with react 18

src/components/Form/index.tsx

@@ -3,6 +3,7 @@ import styled from '../../utils/styled';
 import { Prompt } from '../Prompt';
 import { FormContext, FormContextType, FormValueNotifier, FormValueChange } from '../../contexts';
 import { StandardProps } from '../../common';
+import { ReactComponentDefaultProps } from '../../utils/react-18-compat';
 
 export interface FormSubmitEvent {
   /**
@@ -50,7 +51,7 @@ export interface FormValidationError {
   error: React.ReactChild;
 }
 
-export interface FormProps<FormValues> extends StandardProps {
+export interface FormProps<FormValues> extends StandardProps, ReactComponentDefaultProps {
   /**
    * Shows the given message if the user wants to navigate
    * with changes being made or renders custom component with message if provided.
@@ -351,6 +352,7 @@ export class Form<Values extends FormValuesData> extends React.Component<FormPro
       prompt,
       ...rest
     } = this.props;
+
     const { changed } = this.state;
     return (
       <StyledForm {...rest} onSubmit={this.submit}>

src/components/PaddedContainer/index.tsx

@@ -1,8 +1,9 @@
 import * as React from 'react';
 import styled, { css } from '../../utils/styled';
 import { distance } from '../../distance';
+import { ReactComponentDefaultProps } from '../../utils/react-18-compat';
 
-export interface PaddedContainerProps {
+export interface PaddedContainerProps extends ReactComponentDefaultProps {
   /**
    * Padding on top. Valid values: xxsmall, xsmall, small, medium, large, xlarge, xxlarge, xxxlarge.
    */

src/utils/react-18-compat.ts

@@ -0,0 +1,10 @@
+import * as React from 'react';
+
+/**
+ * This interface needs to be added to a property type that is used on `React.Component`.
+ *
+ * With React 18, React.Component and React.FC don't include children types anymore.
+ */
+export interface ReactComponentDefaultProps {
+  children?: React.ReactNode | undefined;
+}