From c80cc7bdf69ddbebe1166581358e1e8d92f06a15 Mon Sep 17 00:00:00 2001
From: Kyle Hill <kyle@truss.works>
Date: Thu, 6 May 2021 13:23:46 -0400
Subject: [PATCH] Updates Typescript to 4.2.4, updates eslint typescript
 plugins, fixes all type check warnings and errors

---
 package.json                                  |   6 +-
 .../FooterExtendedNavList.test.tsx            |   4 +-
 .../IdentifierMasthead/IdentifierMasthead.tsx |   2 +-
 .../SiteAlert/SiteAlert.stories.tsx           |  10 +-
 src/components/Table/Table.stories.tsx        |  14 ++-
 src/components/Tooltip/Tooltip.test.tsx       |   3 +-
 .../forms/DatePicker/Calendar.stories.tsx     |  19 +++-
 .../forms/DatePicker/DatePicker.stories.tsx   |   9 +-
 .../forms/DatePicker/Day.stories.tsx          |  42 +++++---
 .../forms/DatePicker/MonthPicker.stories.tsx  |  12 ++-
 .../forms/DatePicker/YearPicker.stories.tsx   |  21 +++-
 .../DateRangePicker.stories.tsx               |  19 +++-
 .../forms/FileInput/FileInput.stories.tsx     |  11 +-
 .../forms/TimePicker/TimePicker.stories.tsx   |  21 +++-
 .../grid/GridContainer/GridContainer.tsx      |  14 ++-
 yarn.lock                                     | 101 +++++++++++-------
 16 files changed, 214 insertions(+), 94 deletions(-)

diff --git a/package.json b/package.json
index 287ce978ce..9e3b6edd16 100644
--- a/package.json
+++ b/package.json
@@ -79,8 +79,8 @@
     "@types/jest": "^26.0.0",
     "@types/react": "^17.0.0",
     "@types/react-dom": "^17.0.0",
-    "@typescript-eslint/eslint-plugin": "^2.3.2",
-    "@typescript-eslint/parser": "^2.3.2",
+    "@typescript-eslint/eslint-plugin": "^4.22.1",
+    "@typescript-eslint/parser": "^4.22.1",
     "all-contributors-cli": "^6.20.0",
     "awesome-typescript-loader": "^5.2.1",
     "babel-eslint": "^10.0.3",
@@ -124,7 +124,7 @@
     "stylelint-prettier": "^1.1.1",
     "stylelint-scss": "^3.17.1",
     "ts-jest": "^26.1.2",
-    "typescript": "^3.8.0",
+    "typescript": "^4.2.4",
     "url-loader": "^4.0.0",
     "uswds": "2.10.3",
     "webpack": "^4.41.0",
diff --git a/src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.test.tsx b/src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.test.tsx
index 4b637356d3..250e9d884f 100644
--- a/src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.test.tsx
+++ b/src/components/Footer/FooterExtendedNavList/FooterExtendedNavList.test.tsx
@@ -122,14 +122,14 @@ describe('FooterExtendedNavList component', () => {
     describe('when client window width is less than mobile threshold', () => {
       beforeEach(() => {
         // Mobile width is less than 480
-        //eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        //eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         window.innerWidth = 479
       })
 
       afterEach(() => {
         // Return to JSDOM default
-        //eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+        //eslint-disable-next-line @typescript-eslint/ban-ts-comment
         //@ts-ignore
         window.innerWidth = 1024
       })
diff --git a/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.tsx b/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.tsx
index db3d1fe55d..e7a6e6d8ca 100644
--- a/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.tsx
+++ b/src/components/Identifier/IdentifierMasthead/IdentifierMasthead.tsx
@@ -1,4 +1,4 @@
-import React, { ReactElement } from 'react'
+import React from 'react'
 import classnames from 'classnames'
 
 interface IdentifierMastheadProps {
diff --git a/src/components/SiteAlert/SiteAlert.stories.tsx b/src/components/SiteAlert/SiteAlert.stories.tsx
index 83bcff27d5..321fe85006 100644
--- a/src/components/SiteAlert/SiteAlert.stories.tsx
+++ b/src/components/SiteAlert/SiteAlert.stories.tsx
@@ -40,6 +40,12 @@ Source: http://designsystem.digital.gov/components/site-alert
   },
 }
 
+type StorybookArguments = {
+  slim: boolean
+  showIcon: boolean
+  variant: 'info' | 'emergency'
+}
+
 const infoHeading = 'Short alert message'
 
 const additionalContext = (
@@ -139,7 +145,9 @@ export const emergencyAlertNoIcon = (): React.ReactElement => (
   </SiteAlert>
 )
 
-export const alertWithCustomControls = (argTypes): React.ReactElement => (
+export const alertWithCustomControls = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <SiteAlert
     slim={argTypes.slim}
     showIcon={argTypes.showIcon}
diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
index 388d252b89..3c82a2c64e 100644
--- a/src/components/Table/Table.stories.tsx
+++ b/src/components/Table/Table.stories.tsx
@@ -36,6 +36,12 @@ Source: https://designsystem.digital.gov/components/table/
   },
 }
 
+type StorybookArguments = {
+  bordered: boolean
+  striped: boolean
+  stackedStyle: 'default' | 'headers'
+}
+
 const testContent = (
   <>
     <thead>
@@ -335,13 +341,13 @@ export const scrollable = (): React.ReactElement => (
   </>
 )
 
-export const striped = (argTypes): React.ReactElement => (
+export const striped = (argTypes: StorybookArguments): React.ReactElement => (
   <Table striped bordered={argTypes.bordered} caption="This is a striped table">
     {testContent}
   </Table>
 )
 
-export const compact = (argTypes): React.ReactElement => (
+export const compact = (argTypes: StorybookArguments): React.ReactElement => (
   <Table
     compact
     bordered={argTypes.bordered}
@@ -351,7 +357,9 @@ export const compact = (argTypes): React.ReactElement => (
   </Table>
 )
 
-export const stackedStylesDemo = (argTypes): React.ReactElement => (
+export const stackedStylesDemo = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Table
     bordered={argTypes.bordered}
     stackedStyle={argTypes.stackedStyle}
diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
index 5684b836e2..c9ebc10713 100644
--- a/src/components/Tooltip/Tooltip.test.tsx
+++ b/src/components/Tooltip/Tooltip.test.tsx
@@ -1,6 +1,5 @@
-import React, { ReactNode } from 'react'
+import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
-import userEvent from '@testing-library/user-event'
 
 import { Tooltip } from './Tooltip'
 
diff --git a/src/components/forms/DatePicker/Calendar.stories.tsx b/src/components/forms/DatePicker/Calendar.stories.tsx
index ebf8ad3738..8b4e667fa5 100644
--- a/src/components/forms/DatePicker/Calendar.stories.tsx
+++ b/src/components/forms/DatePicker/Calendar.stories.tsx
@@ -17,12 +17,19 @@ export default {
 }
 */
 
+type StorybookArguments = {
+  handleSelectDate: (value: string) => void
+  setStatuses: (statuses: string[]) => void
+}
+
 const defaultProps = {
   minDate: new Date('0000-01-01'),
   focusMode: FocusMode.None,
 }
 
-export const defaultCalendar = (argTypes): React.ReactElement => (
+export const defaultCalendar = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Calendar
     {...defaultProps}
     handleSelectDate={argTypes.handleSelectDate}
@@ -30,7 +37,7 @@ export const defaultCalendar = (argTypes): React.ReactElement => (
   />
 )
 
-export const givenDate = (argTypes): React.ReactElement => (
+export const givenDate = (argTypes: StorybookArguments): React.ReactElement => (
   <Calendar
     {...defaultProps}
     handleSelectDate={argTypes.handleSelectDate}
@@ -39,7 +46,9 @@ export const givenDate = (argTypes): React.ReactElement => (
   />
 )
 
-export const selectedDate = (argTypes): React.ReactElement => (
+export const selectedDate = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Calendar
     {...defaultProps}
     handleSelectDate={argTypes.handleSelectDate}
@@ -48,7 +57,7 @@ export const selectedDate = (argTypes): React.ReactElement => (
   />
 )
 
-export const minAndMax = (argTypes): React.ReactElement => (
+export const minAndMax = (argTypes: StorybookArguments): React.ReactElement => (
   <Calendar
     {...defaultProps}
     handleSelectDate={argTypes.handleSelectDate}
@@ -59,7 +68,7 @@ export const minAndMax = (argTypes): React.ReactElement => (
   />
 )
 
-export const rangeDate = (argTypes): React.ReactElement => (
+export const rangeDate = (argTypes: StorybookArguments): React.ReactElement => (
   <Calendar
     {...defaultProps}
     handleSelectDate={argTypes.handleSelectDate}
diff --git a/src/components/forms/DatePicker/DatePicker.stories.tsx b/src/components/forms/DatePicker/DatePicker.stories.tsx
index 36538f2cc3..9e37d89807 100644
--- a/src/components/forms/DatePicker/DatePicker.stories.tsx
+++ b/src/components/forms/DatePicker/DatePicker.stories.tsx
@@ -42,7 +42,14 @@ We may find that we want to expose props for custom event handlers or even a ref
   },
 }
 
-export const completeDatePicker = (argTypes): React.ReactElement => (
+type StorybookArguments = {
+  onSubmit: React.FormEventHandler<HTMLFormElement>
+  disabled?: boolean
+}
+
+export const completeDatePicker = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
     <FormGroup>
       <Label id="appointment-date-label" htmlFor="appointment-date">
diff --git a/src/components/forms/DatePicker/Day.stories.tsx b/src/components/forms/DatePicker/Day.stories.tsx
index 0eba9f6cb3..6a137fd5a6 100644
--- a/src/components/forms/DatePicker/Day.stories.tsx
+++ b/src/components/forms/DatePicker/Day.stories.tsx
@@ -15,13 +15,21 @@ export default {
 }
 */
 
+type StorybookArguments = {
+  onClick: (value: string) => void
+  onKeyDown: (event: React.KeyboardEvent<Element>) => void
+  onMouseMove: (hoverDate: Date) => void
+}
+
 const testDate = new Date('January 20 2021')
 
 const defaultProps = {
   date: testDate,
 }
 
-export const defaultDay = (argTypes): React.ReactElement => (
+export const defaultDay = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -30,7 +38,7 @@ export const defaultDay = (argTypes): React.ReactElement => (
   />
 )
 
-export const disabled = (argTypes): React.ReactElement => (
+export const disabled = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -39,7 +47,7 @@ export const disabled = (argTypes): React.ReactElement => (
     isDisabled
   />
 )
-export const selected = (argTypes): React.ReactElement => (
+export const selected = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -48,7 +56,7 @@ export const selected = (argTypes): React.ReactElement => (
     isSelected
   />
 )
-export const focused = (argTypes): React.ReactElement => (
+export const focused = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -57,7 +65,9 @@ export const focused = (argTypes): React.ReactElement => (
     isFocused
   />
 )
-export const previousMonth = (argTypes): React.ReactElement => (
+export const previousMonth = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -66,7 +76,7 @@ export const previousMonth = (argTypes): React.ReactElement => (
     isPrevMonth
   />
 )
-export const sameMonth = (argTypes): React.ReactElement => (
+export const sameMonth = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -75,7 +85,7 @@ export const sameMonth = (argTypes): React.ReactElement => (
     isFocusedMonth
   />
 )
-export const nextMonth = (argTypes): React.ReactElement => (
+export const nextMonth = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -84,7 +94,7 @@ export const nextMonth = (argTypes): React.ReactElement => (
     isNextMonth
   />
 )
-export const today = (argTypes): React.ReactElement => (
+export const today = (argTypes: StorybookArguments): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -94,7 +104,9 @@ export const today = (argTypes): React.ReactElement => (
   />
 )
 
-export const isRangeDate = (argTypes): React.ReactElement => (
+export const isRangeDate = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -104,7 +116,9 @@ export const isRangeDate = (argTypes): React.ReactElement => (
   />
 )
 
-export const isRangeStart = (argTypes): React.ReactElement => (
+export const isRangeStart = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -113,7 +127,9 @@ export const isRangeStart = (argTypes): React.ReactElement => (
     isRangeStart
   />
 )
-export const isRangeEnd = (argTypes): React.ReactElement => (
+export const isRangeEnd = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
@@ -122,7 +138,9 @@ export const isRangeEnd = (argTypes): React.ReactElement => (
     isRangeEnd
   />
 )
-export const isWithinRange = (argTypes): React.ReactElement => (
+export const isWithinRange = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Day
     {...defaultProps}
     onClick={argTypes.onClick}
diff --git a/src/components/forms/DatePicker/MonthPicker.stories.tsx b/src/components/forms/DatePicker/MonthPicker.stories.tsx
index 7208a1a38a..c8aab0a43c 100644
--- a/src/components/forms/DatePicker/MonthPicker.stories.tsx
+++ b/src/components/forms/DatePicker/MonthPicker.stories.tsx
@@ -13,16 +13,24 @@ export default {
 }
 */
 
+type StorybookArguments = {
+  handleSelectMonth: (value: number) => void
+}
+
 const testProps = {
   date: new Date('January 20 2021'),
   minDate: parseDateString('0000-01-01') as Date,
 }
 
-export const monthPicker = (argTypes): React.ReactElement => (
+export const monthPicker = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <MonthPicker {...testProps} handleSelectMonth={argTypes.handleSelectMonth} />
 )
 
-export const withMinAndMax = (argTypes): React.ReactElement => (
+export const withMinAndMax = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <MonthPicker
     {...testProps}
     handleSelectMonth={argTypes.handleSelectMonth}
diff --git a/src/components/forms/DatePicker/YearPicker.stories.tsx b/src/components/forms/DatePicker/YearPicker.stories.tsx
index 32ffddced9..9235b50bcd 100644
--- a/src/components/forms/DatePicker/YearPicker.stories.tsx
+++ b/src/components/forms/DatePicker/YearPicker.stories.tsx
@@ -16,12 +16,19 @@ export default {
 }
 */
 
+type StorybookArguments = {
+  handleSelectYear: (year: number) => void
+  setStatuses: (statuses: string[]) => void
+}
+
 const testProps = {
   date: new Date('January 20 2021'),
   minDate: parseDateString('0000-01-01') as Date,
 }
 
-export const yearPicker = (argTypes): React.ReactElement => (
+export const yearPicker = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <YearPicker
     {...testProps}
     handleSelectYear={argTypes.handleSelectYear}
@@ -29,7 +36,9 @@ export const yearPicker = (argTypes): React.ReactElement => (
   />
 )
 
-export const withMinAndMaxInCurrentChunk = (argTypes): React.ReactElement => (
+export const withMinAndMaxInCurrentChunk = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <YearPicker
     {...testProps}
     handleSelectYear={argTypes.handleSelectYear}
@@ -39,7 +48,9 @@ export const withMinAndMaxInCurrentChunk = (argTypes): React.ReactElement => (
   />
 )
 
-export const withMinInCurrentChunk = (argTypes): React.ReactElement => (
+export const withMinInCurrentChunk = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <YearPicker
     {...testProps}
     handleSelectYear={argTypes.handleSelectYear}
@@ -48,7 +59,9 @@ export const withMinInCurrentChunk = (argTypes): React.ReactElement => (
   />
 )
 
-export const withMaxInCurrentChunk = (argTypes): React.ReactElement => (
+export const withMaxInCurrentChunk = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <YearPicker
     {...testProps}
     handleSelectYear={argTypes.handleSelectYear}
diff --git a/src/components/forms/DateRangePicker/DateRangePicker.stories.tsx b/src/components/forms/DateRangePicker/DateRangePicker.stories.tsx
index 6c2875da6b..fb226262ba 100644
--- a/src/components/forms/DateRangePicker/DateRangePicker.stories.tsx
+++ b/src/components/forms/DateRangePicker/DateRangePicker.stories.tsx
@@ -2,7 +2,6 @@ import React from 'react'
 
 import { DateRangePicker } from './DateRangePicker'
 import { Form } from '../Form/Form'
-import { addDays, formatDate } from '../DatePicker/utils'
 
 export default {
   title: 'Components/Form controls/Date range picker',
@@ -32,7 +31,15 @@ export default {
   },
 }
 
-export const completeDateRangePicker = (argTypes): React.ReactElement => (
+type StorybookArguments = {
+  onSubmit: React.FormEventHandler<HTMLFormElement>
+  startDatePickerDisabled: boolean
+  endDatePickerDisabled: boolean
+}
+
+export const completeDateRangePicker = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
     <DateRangePicker
       startDateLabel="Event start date"
@@ -53,7 +60,9 @@ export const completeDateRangePicker = (argTypes): React.ReactElement => (
   </Form>
 )
 
-export const withDefaultValues = (argTypes): React.ReactElement => (
+export const withDefaultValues = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
     <DateRangePicker
       startDateLabel="Event start date"
@@ -76,7 +85,9 @@ export const withDefaultValues = (argTypes): React.ReactElement => (
   </Form>
 )
 
-export const withAllowableRanges = (argTypes): React.ReactElement => (
+export const withAllowableRanges = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
     <DateRangePicker
       startDateLabel="Event start date"
diff --git a/src/components/forms/FileInput/FileInput.stories.tsx b/src/components/forms/FileInput/FileInput.stories.tsx
index dbf0c2e34a..eaee735104 100644
--- a/src/components/forms/FileInput/FileInput.stories.tsx
+++ b/src/components/forms/FileInput/FileInput.stories.tsx
@@ -24,6 +24,11 @@ Source: https://designsystem.digital.gov/components/form-controls/#file-input
   },
 }
 
+type StorybookArguments = {
+  onChange: (event: React.ChangeEvent<Element>) => void
+  onDrop: React.DragEventHandler<Element>
+}
+
 export const singleFileInput = (): React.ReactElement => (
   <FormGroup>
     <Label htmlFor="file-input-single">Input accepts a single file</Label>
@@ -108,7 +113,9 @@ export const disabled = (): React.ReactElement => (
   </FormGroup>
 )
 
-export const withCustomHandlers = (argTypes): React.ReactElement => {
+export const withCustomHandlers = (
+  argTypes: StorybookArguments
+): React.ReactElement => {
   const [files, setFiles] = useState<FileList>()
   const fileInputRef = useRef<HTMLInputElement>()
 
@@ -119,7 +126,7 @@ export const withCustomHandlers = (argTypes): React.ReactElement => {
 
   const fileList = []
   for (let i = 0; i < files?.length; i++) {
-    fileList.push(<li key={`file_${i}`}>{files[i].name}</li>)
+    fileList.push(<li key={`file_${i}`}>{files[Number(i)].name}</li>)
   }
 
   return (
diff --git a/src/components/forms/TimePicker/TimePicker.stories.tsx b/src/components/forms/TimePicker/TimePicker.stories.tsx
index 1d53d80828..5cf1d51517 100644
--- a/src/components/forms/TimePicker/TimePicker.stories.tsx
+++ b/src/components/forms/TimePicker/TimePicker.stories.tsx
@@ -23,11 +23,18 @@ https://designsystem.digital.gov/components/time-picker/
   },
 }
 
+type StorybookArguments = {
+  onSubmit: () => void
+  disabled: boolean
+}
+
 const noop = (): void => {
   return
 }
 
-export const completeTimePicker = (argTypes): React.ReactElement => (
+export const completeTimePicker = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
     <TimePicker
       id="appointment-time"
@@ -40,7 +47,9 @@ export const completeTimePicker = (argTypes): React.ReactElement => (
   </Form>
 )
 
-export const defaultTimePicker = (argTypes): React.ReactElement => (
+export const defaultTimePicker = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
     <TimePicker
       id="appointment-time"
@@ -51,7 +60,9 @@ export const defaultTimePicker = (argTypes): React.ReactElement => (
   </Form>
 )
 
-export const withMinAndMaxTimes = (argTypes): React.ReactElement => (
+export const withMinAndMaxTimes = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
     <TimePicker
       id="appointment-time"
@@ -66,7 +77,9 @@ export const withMinAndMaxTimes = (argTypes): React.ReactElement => (
   </Form>
 )
 
-export const withDefaultValue = (argTypes): React.ReactElement => (
+export const withDefaultValue = (
+  argTypes: StorybookArguments
+): React.ReactElement => (
   <Form onSubmit={argTypes.onSubmit}>
     <TimePicker
       id="appointment-time"
diff --git a/src/components/grid/GridContainer/GridContainer.tsx b/src/components/grid/GridContainer/GridContainer.tsx
index fcaf86c626..55fbf8c0ae 100644
--- a/src/components/grid/GridContainer/GridContainer.tsx
+++ b/src/components/grid/GridContainer/GridContainer.tsx
@@ -3,7 +3,7 @@ import classnames from 'classnames'
 
 import { ContainerSizes } from '../types'
 
-type GridContainerProps<T> = {
+type GridContainerProps = {
   containerSize?: ContainerSizes
   className?: string
   children: React.ReactNode
@@ -13,11 +13,9 @@ interface WithCustomGridContainerProps<T> {
   asCustom: React.FunctionComponent<T>
 }
 
-export type DefaultGridContainerProps = GridContainerProps<
-  JSX.IntrinsicElements['div']
->
+export type DefaultGridContainerProps = GridContainerProps
 
-export type CustomGridContainerProps<T> = GridContainerProps<T> &
+export type CustomGridContainerProps<T> = GridContainerProps &
   WithCustomGridContainerProps<T>
 
 export function isCustomProps<T>(
@@ -26,9 +24,9 @@ export function isCustomProps<T>(
   return 'asCustom' in props
 }
 
-function gridContainerClasses<T>(
-  className: GridContainerProps<T>['className'],
-  containerSize: GridContainerProps<T>['containerSize']
+function gridContainerClasses(
+  className: GridContainerProps['className'],
+  containerSize: GridContainerProps['containerSize']
 ): string | undefined {
   const classes = classnames(
     {
diff --git a/yarn.lock b/yarn.lock
index d97018b359..9bd1dbccea 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1904,13 +1904,7 @@
   dependencies:
     core-js "^3.8.2"
     ts-dedent "^2.0.0"
-    url-loader "^4.1.1"
     util-deprecate "^1.0.2"
-    webpack "4"
-    webpack-dev-middleware "^3.7.3"
-    webpack-filter-warnings-plugin "^1.2.1"
-    webpack-hot-middleware "^2.25.0"
-    webpack-virtual-modules "^0.2.2"
 
 "@storybook/client-api@6.2.9":
   version "6.2.9"
@@ -2419,11 +2413,6 @@
   resolved "https://registry.yarnpkg.com/@types/color-name/-/color-name-1.1.1.tgz#1c1261bbeaa10a8055bbc5d8ab84b7b2afc846a0"
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
-"@types/eslint-visitor-keys@^1.0.0":
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/@types/eslint-visitor-keys/-/eslint-visitor-keys-1.0.0.tgz#1ee30d79544ca84d68d4b3cdb0af4f205663dd2d"
-  integrity sha512-OCutwjDZ4aFS6PB1UZ988C4YgwlBHJd6wCeQqaLdmadZ/7e+w79+hbMUFC1QXDNCmdyoRfAFdm0RypzwR+Qpag==
-
 "@types/glob-base@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@types/glob-base/-/glob-base-0.3.0.tgz#a581d688347e10e50dd7c17d6f2880a10354319d"
@@ -2706,49 +2695,76 @@
   dependencies:
     "@types/yargs-parser" "*"
 
-"@typescript-eslint/eslint-plugin@^2.3.2":
-  version "2.34.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-2.34.0.tgz#6f8ce8a46c7dea4a6f1d171d2bb8fbae6dac2be9"
-  integrity sha512-4zY3Z88rEE99+CNvTbXSyovv2z9PNOVffTWD2W8QF5s2prBQtwN2zadqERcrHpcR7O/+KMI3fcTAmUUhK/iQcQ==
+"@typescript-eslint/eslint-plugin@^4.22.1":
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-4.22.1.tgz#6bcdbaa4548553ab861b4e5f34936ead1349a543"
+  integrity sha512-kVTAghWDDhsvQ602tHBc6WmQkdaYbkcTwZu+7l24jtJiYvm9l+/y/b2BZANEezxPDiX5MK2ZecE+9BFi/YJryw==
   dependencies:
-    "@typescript-eslint/experimental-utils" "2.34.0"
+    "@typescript-eslint/experimental-utils" "4.22.1"
+    "@typescript-eslint/scope-manager" "4.22.1"
+    debug "^4.1.1"
     functional-red-black-tree "^1.0.1"
+    lodash "^4.17.15"
     regexpp "^3.0.0"
+    semver "^7.3.2"
     tsutils "^3.17.1"
 
-"@typescript-eslint/experimental-utils@2.34.0":
-  version "2.34.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-2.34.0.tgz#d3524b644cdb40eebceca67f8cf3e4cc9c8f980f"
-  integrity sha512-eS6FTkq+wuMJ+sgtuNTtcqavWXqsflWcfBnlYhg/nS4aZ1leewkXGbvBhaapn1q6qf4M71bsR1tez5JTRMuqwA==
+"@typescript-eslint/experimental-utils@4.22.1":
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-4.22.1.tgz#3938a5c89b27dc9a39b5de63a62ab1623ab27497"
+  integrity sha512-svYlHecSMCQGDO2qN1v477ax/IDQwWhc7PRBiwAdAMJE7GXk5stF4Z9R/8wbRkuX/5e9dHqbIWxjeOjckK3wLQ==
   dependencies:
     "@types/json-schema" "^7.0.3"
-    "@typescript-eslint/typescript-estree" "2.34.0"
+    "@typescript-eslint/scope-manager" "4.22.1"
+    "@typescript-eslint/types" "4.22.1"
+    "@typescript-eslint/typescript-estree" "4.22.1"
     eslint-scope "^5.0.0"
     eslint-utils "^2.0.0"
 
-"@typescript-eslint/parser@^2.3.2":
-  version "2.34.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-2.34.0.tgz#50252630ca319685420e9a39ca05fe185a256bc8"
-  integrity sha512-03ilO0ucSD0EPTw2X4PntSIRFtDPWjrVq7C3/Z3VQHRC7+13YB55rcJI3Jt+YgeHbjUdJPcPa7b23rXCBokuyA==
+"@typescript-eslint/parser@^4.22.1":
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-4.22.1.tgz#a95bda0fd01d994a15fc3e99dc984294f25c19cc"
+  integrity sha512-l+sUJFInWhuMxA6rtirzjooh8cM/AATAe3amvIkqKFeMzkn85V+eLzb1RyuXkHak4dLfYzOmF6DXPyflJvjQnw==
   dependencies:
-    "@types/eslint-visitor-keys" "^1.0.0"
-    "@typescript-eslint/experimental-utils" "2.34.0"
-    "@typescript-eslint/typescript-estree" "2.34.0"
-    eslint-visitor-keys "^1.1.0"
+    "@typescript-eslint/scope-manager" "4.22.1"
+    "@typescript-eslint/types" "4.22.1"
+    "@typescript-eslint/typescript-estree" "4.22.1"
+    debug "^4.1.1"
+
+"@typescript-eslint/scope-manager@4.22.1":
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-4.22.1.tgz#5bb357f94f9cd8b94e6be43dd637eb73b8f355b4"
+  integrity sha512-d5bAiPBiessSmNi8Amq/RuLslvcumxLmyhf1/Xa9IuaoFJ0YtshlJKxhlbY7l2JdEk3wS0EnmnfeJWSvADOe0g==
+  dependencies:
+    "@typescript-eslint/types" "4.22.1"
+    "@typescript-eslint/visitor-keys" "4.22.1"
 
-"@typescript-eslint/typescript-estree@2.34.0":
-  version "2.34.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-2.34.0.tgz#14aeb6353b39ef0732cc7f1b8285294937cf37d5"
-  integrity sha512-OMAr+nJWKdlVM9LOqCqh3pQQPwxHAN7Du8DR6dmwCrAmxtiXQnhHJ6tBNtf+cggqfo51SG/FCwnKhXCIM7hnVg==
+"@typescript-eslint/types@4.22.1":
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-4.22.1.tgz#bf99c6cec0b4a23d53a61894816927f2adad856a"
+  integrity sha512-2HTkbkdAeI3OOcWbqA8hWf/7z9c6gkmnWNGz0dKSLYLWywUlkOAQ2XcjhlKLj5xBFDf8FgAOF5aQbnLRvgNbCw==
+
+"@typescript-eslint/typescript-estree@4.22.1":
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-4.22.1.tgz#dca379eead8cdfd4edc04805e83af6d148c164f9"
+  integrity sha512-p3We0pAPacT+onSGM+sPR+M9CblVqdA9F1JEdIqRVlxK5Qth4ochXQgIyb9daBomyQKAXbygxp1aXQRV0GC79A==
   dependencies:
+    "@typescript-eslint/types" "4.22.1"
+    "@typescript-eslint/visitor-keys" "4.22.1"
     debug "^4.1.1"
-    eslint-visitor-keys "^1.1.0"
-    glob "^7.1.6"
+    globby "^11.0.1"
     is-glob "^4.0.1"
-    lodash "^4.17.15"
     semver "^7.3.2"
     tsutils "^3.17.1"
 
+"@typescript-eslint/visitor-keys@4.22.1":
+  version "4.22.1"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-4.22.1.tgz#6045ae25a11662c671f90b3a403d682dfca0b7a6"
+  integrity sha512-WPkOrIRm+WCLZxXQHCi+WG8T2MMTUFR70rWjdWYddLT7cEfb2P4a3O/J2U1FBVsSFTocXLCoXWY6MZGejeStvQ==
+  dependencies:
+    "@typescript-eslint/types" "4.22.1"
+    eslint-visitor-keys "^2.0.0"
+
 "@webassemblyjs/ast@1.9.0":
   version "1.9.0"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.9.0.tgz#bd850604b4042459a5a41cd7d338cbed695ed964"
@@ -5993,6 +6009,11 @@ eslint-visitor-keys@^1.0.0, eslint-visitor-keys@^1.1.0:
   resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-1.3.0.tgz#30ebd1ef7c2fdff01c3a4f151044af25fab0523e"
   integrity sha512-6J72N8UNa462wa/KFODt/PJ3IU60SDpC3QXC1Hjc1BXXpfL2C9R5+AU7jhe0F6GREqVMh4Juu+NY7xn+6dipUQ==
 
+eslint-visitor-keys@^2.0.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/eslint-visitor-keys/-/eslint-visitor-keys-2.1.0.tgz#f65328259305927392c938ed44eb0a5c9b2bd303"
+  integrity sha512-0rSmRBzXgDzIsD6mGdJgevzgezI534Cer5L/vyMX0kHzT/jiB43jRhd9YUlMGYLQy2zprNmoT8qasCGtY+QaKw==
+
 eslint@^6.5.1:
   version "6.8.0"
   resolved "https://registry.yarnpkg.com/eslint/-/eslint-6.8.0.tgz#62262d6729739f9275723824302fb227c8c93ffb"
@@ -13484,10 +13505,10 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^3.8.0:
-  version "3.9.9"
-  resolved "https://registry.yarnpkg.com/typescript/-/typescript-3.9.9.tgz#e69905c54bc0681d0518bd4d587cc6f2d0b1a674"
-  integrity sha512-kdMjTiekY+z/ubJCATUPlRDl39vXYiMV9iyeMuEuXZh2we6zz80uovNN2WlAxmmdE/Z/YQe+EbOEXB5RHEED3w==
+typescript@^4.2.4:
+  version "4.2.4"
+  resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
+  integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
 
 uglify-js@^3.1.4:
   version "3.13.4"