From 8540614b7e99ffa97affab628ed4e50a800b5a67 Mon Sep 17 00:00:00 2001
From: Jason <jason@scurker.com>
Date: Tue, 17 Oct 2023 16:30:20 -0500
Subject: [PATCH 1/4] feat(react): remove PropTypes from all react components

---
 .../src/components/Accordion/Accordion.tsx    | 18 ---------
 .../react/src/components/Address/index.tsx    | 15 -------
 .../components/Breadcrumb/BreadcrumbItem.tsx  |  4 --
 packages/react/src/components/Card/Card.tsx   |  5 ---
 .../react/src/components/Card/CardContent.tsx |  4 --
 .../react/src/components/Card/CardFooter.tsx  |  4 --
 .../react/src/components/Card/CardHeader.tsx  |  4 --
 .../components/ClickOutsideListener/index.tsx | 13 +-----
 packages/react/src/components/Code/index.tsx  |  9 -----
 .../src/components/DescriptionList/index.tsx  | 10 -----
 .../react/src/components/Dialog/index.tsx     | 25 ------------
 .../ExpandCollapsePanel.tsx                   | 23 ++++-------
 .../ExpandCollapsePanel/PanelTrigger.tsx      | 11 -----
 .../react/src/components/FieldWrap/index.tsx  |  6 ---
 packages/react/src/components/Icon/index.tsx  | 10 +----
 .../react/src/components/IconButton/index.tsx | 16 --------
 .../react/src/components/IssuePanel/index.tsx |  7 +---
 .../react/src/components/Layout/index.tsx     |  9 -----
 packages/react/src/components/Line/index.tsx  |  5 ---
 packages/react/src/components/Link/index.tsx  | 12 ------
 .../react/src/components/Loader/index.tsx     |  5 ---
 .../src/components/LoaderOverlay/index.tsx    |  9 -----
 packages/react/src/components/Main/index.tsx  |  9 -----
 .../react/src/components/MenuBar/index.tsx    | 12 ++----
 .../react/src/components/MenuItem/index.tsx   | 14 +------
 .../react/src/components/NavBar/NavBar.tsx    |  8 ----
 .../react/src/components/NavBar/NavItem.tsx   |  4 --
 .../react/src/components/Notice/index.tsx     | 13 ------
 .../components/OptionsMenu/OptionsMenu.tsx    | 17 +-------
 .../OptionsMenu/OptionsMenuItem.tsx           |  7 ----
 .../OptionsMenu/OptionsMenuList.tsx           | 16 +-------
 .../OptionsMenu/OptionsMenuTrigger.tsx        | 10 -----
 .../OptionsMenu/OptionsMenuWrapper.tsx        |  7 ----
 .../src/components/Pagination/Pagination.tsx  | 20 ----------
 packages/react/src/components/Panel/Panel.tsx |  9 -----
 .../src/components/Panel/PanelContent.tsx     |  7 ----
 .../src/components/Panel/PanelHeader.tsx      |  6 ---
 .../react/src/components/Pointout/index.tsx   | 40 +++----------------
 .../src/components/ProgressBar/index.tsx      |  1 -
 .../src/components/RadioCardGroup/index.tsx   | 30 +-------------
 .../react/src/components/RadioGroup/index.tsx | 30 +-------------
 packages/react/src/components/Scrim/index.tsx |  7 +---
 .../react/src/components/SideBar/SideBar.tsx  | 18 +--------
 .../src/components/SideBar/SideBarItem.tsx    |  5 ---
 .../react/src/components/SkipLink/index.tsx   | 19 ---------
 .../react/src/components/Stepper/index.tsx    | 13 ------
 packages/react/src/components/Table/Table.tsx |  6 ---
 .../react/src/components/Table/TableBody.tsx  |  5 ---
 .../react/src/components/Table/TableCell.tsx  |  5 ---
 .../src/components/Table/TableFooter.tsx      |  5 ---
 .../react/src/components/Table/TableHead.tsx  |  5 ---
 .../src/components/Table/TableHeader.tsx      |  9 -----
 .../react/src/components/Table/TableRow.tsx   |  5 ---
 packages/react/src/components/Tabs/Tab.tsx    |  6 ---
 .../react/src/components/Tabs/TabPanel.tsx    |  6 ---
 packages/react/src/components/Tabs/Tabs.tsx   | 20 +++-------
 packages/react/src/components/Tag/index.tsx   |  9 -----
 .../react/src/components/TextField/index.tsx  | 18 ---------
 packages/react/src/components/Toast/index.tsx | 25 +-----------
 .../react/src/components/Tooltip/index.tsx    | 17 --------
 .../src/components/TopBar/TopBarMenu.tsx      | 12 ++----
 .../src/components/TopBar/TopBarTrigger.tsx   |  5 ---
 .../TwoColumnPanel/ColumnGroupHeader.tsx      |  4 --
 .../TwoColumnPanel/ColumnHeader.tsx           |  4 --
 .../components/TwoColumnPanel/ColumnList.tsx  |  4 --
 .../react/src/components/Workspace/index.tsx  | 18 ---------
 packages/react/src/contexts/theme.tsx         |  6 ---
 packages/react/src/propTypes.ts               | 11 -----
 68 files changed, 37 insertions(+), 714 deletions(-)
 delete mode 100644 packages/react/src/propTypes.ts

diff --git a/packages/react/src/components/Accordion/Accordion.tsx b/packages/react/src/components/Accordion/Accordion.tsx
index 4c445ae31..86baa5158 100644
--- a/packages/react/src/components/Accordion/Accordion.tsx
+++ b/packages/react/src/components/Accordion/Accordion.tsx
@@ -5,7 +5,6 @@ import ExpandCollapsePanel, {
   PanelTrigger
 } from '../ExpandCollapsePanel';
 import { useId } from 'react-id-generator';
-import PropTypes from 'prop-types';
 
 export interface AccordionTriggerProps
   extends React.HTMLAttributes<HTMLButtonElement> {
@@ -116,22 +115,5 @@ Accordion.displayName = 'Accordion';
 AccordionContent.displayName = 'AccordionContent';
 AccordionTrigger.displayName = 'AccordionTrigger';
 
-Accordion.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
-
-AccordionTrigger.propTypes = {
-  children: PropTypes.node,
-  heading: PropTypes.shape({
-    level: PropTypes.number
-  })
-};
-
-AccordionContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
-
 export default Accordion;
 export { Accordion, AccordionTrigger, AccordionContent };
diff --git a/packages/react/src/components/Address/index.tsx b/packages/react/src/components/Address/index.tsx
index a1bedf7d1..905e409b4 100644
--- a/packages/react/src/components/Address/index.tsx
+++ b/packages/react/src/components/Address/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 interface AddressProps extends React.HTMLAttributes<HTMLElement> {
@@ -13,10 +12,6 @@ export const Address = ({ children, className, ...other }: AddressProps) => (
 );
 
 Address.displayName = 'Address';
-Address.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 
 type AddressLineProps = React.HTMLAttributes<HTMLElement>;
 
@@ -32,10 +27,6 @@ export const AddressLine = ({
   ) : null;
 
 AddressLine.displayName = 'AddressLine';
-AddressLine.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string
-};
 
 interface AddressCityStateZipProps extends React.HTMLAttributes<HTMLElement> {
   city: React.ReactNode;
@@ -62,9 +53,3 @@ export const AddressCityStateZip = ({
   ) : null;
 
 AddressCityStateZip.displayName = 'AddressCityStateZip';
-AddressCityStateZip.propTypes = {
-  city: PropTypes.node,
-  state: PropTypes.node,
-  zip: PropTypes.node,
-  className: PropTypes.string
-};
diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx
index a72943560..74ad1da64 100644
--- a/packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 
 type BreadcrumbItemProps = React.HTMLAttributes<HTMLSpanElement>;
 
@@ -16,7 +15,4 @@ const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>( // eslint-d
     </span>
   )
 );
-BreadcrumbItem.propTypes = {
-  className: PropTypes.string
-};
 export default BreadcrumbItem;
diff --git a/packages/react/src/components/Card/Card.tsx b/packages/react/src/components/Card/Card.tsx
index 214e15dd6..f9763660e 100644
--- a/packages/react/src/components/Card/Card.tsx
+++ b/packages/react/src/components/Card/Card.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
@@ -17,9 +16,5 @@ const Card = ({ className, variant, ...other }: CardProps) => (
 );
 
 Card.displayName = 'Card';
-Card.propTypes = {
-  className: PropTypes.string,
-  variant: PropTypes.string
-};
 
 export default Card;
diff --git a/packages/react/src/components/Card/CardContent.tsx b/packages/react/src/components/Card/CardContent.tsx
index bc760c3e1..9b54bda02 100644
--- a/packages/react/src/components/Card/CardContent.tsx
+++ b/packages/react/src/components/Card/CardContent.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -9,8 +8,5 @@ const CardContent = ({ className, ...other }: CardContentProps) => (
 );
 
 CardContent.displayName = 'CardContent';
-CardContent.propTypes = {
-  className: PropTypes.string
-};
 
 export default CardContent;
diff --git a/packages/react/src/components/Card/CardFooter.tsx b/packages/react/src/components/Card/CardFooter.tsx
index cdc2971c4..56dfa4b9e 100644
--- a/packages/react/src/components/Card/CardFooter.tsx
+++ b/packages/react/src/components/Card/CardFooter.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
@@ -9,8 +8,5 @@ const CardFooter = ({ className, ...other }: CardFooterProps) => (
 );
 
 CardFooter.displayName = 'CardFooter';
-CardFooter.propTypes = {
-  className: PropTypes.string
-};
 
 export default CardFooter;
diff --git a/packages/react/src/components/Card/CardHeader.tsx b/packages/react/src/components/Card/CardHeader.tsx
index fe771c32c..d18361635 100644
--- a/packages/react/src/components/Card/CardHeader.tsx
+++ b/packages/react/src/components/Card/CardHeader.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
@@ -9,8 +8,5 @@ const CardHeader = ({ className, ...other }: CardHeaderProps) => (
 );
 
 CardHeader.displayName = 'CardHeader';
-CardHeader.propTypes = {
-  className: PropTypes.string
-};
 
 export default CardHeader;
diff --git a/packages/react/src/components/ClickOutsideListener/index.tsx b/packages/react/src/components/ClickOutsideListener/index.tsx
index b5355e5ed..8bddc5281 100644
--- a/packages/react/src/components/ClickOutsideListener/index.tsx
+++ b/packages/react/src/components/ClickOutsideListener/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import setRef from '../../utils/setRef';
 
 export interface ClickOutsideListenerProps<
@@ -12,9 +11,7 @@ export interface ClickOutsideListenerProps<
   target?: T;
 }
 
-export default class ClickOutsideListener extends React.Component<
-  ClickOutsideListenerProps
-> {
+export default class ClickOutsideListener extends React.Component<ClickOutsideListenerProps> {
   static displayName = 'ClickOutsideListener';
 
   static defaultProps = {
@@ -22,14 +19,6 @@ export default class ClickOutsideListener extends React.Component<
     touchEvent: 'touchend'
   };
 
-  static propTypes = {
-    children: PropTypes.node,
-    target: PropTypes.any,
-    onClickOutside: PropTypes.func.isRequired,
-    mouseEvent: PropTypes.oneOf(['mousedown', 'click', 'mouseup', false]),
-    touchEvent: PropTypes.oneOf(['touchstart', 'touchend', false])
-  };
-
   private nodeRef: HTMLElement | null;
 
   handleEvent = (event: MouseEvent | TouchEvent) => {
diff --git a/packages/react/src/components/Code/index.tsx b/packages/react/src/components/Code/index.tsx
index b9501dfc0..b5974a33b 100644
--- a/packages/react/src/components/Code/index.tsx
+++ b/packages/react/src/components/Code/index.tsx
@@ -1,5 +1,4 @@
 import React, { useRef, useState, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import { SyntaxHighlighterProps } from 'react-syntax-highlighter';
 import SyntaxHighlighter from 'react-syntax-highlighter/dist/cjs/light';
 import classNames from 'classnames';
@@ -81,12 +80,4 @@ const Code: React.ComponentType<React.PropsWithChildren<Props>> = ({
 
 Code.displayName = 'Code';
 
-Code.propTypes = {
-  children: PropTypes.string.isRequired,
-  language: PropTypes.oneOf(['javascript', 'css', 'html', 'yaml']),
-  className: PropTypes.string,
-  tabIndex: PropTypes.number,
-  scrollable: PropTypes.bool
-};
-
 export default Code;
diff --git a/packages/react/src/components/DescriptionList/index.tsx b/packages/react/src/components/DescriptionList/index.tsx
index 803e477ae..d68d73d54 100644
--- a/packages/react/src/components/DescriptionList/index.tsx
+++ b/packages/react/src/components/DescriptionList/index.tsx
@@ -1,12 +1,6 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-const commonPropTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
-
 interface DescriptionProps {
   children: React.ReactNode;
   className?: string;
@@ -33,7 +27,6 @@ export const DescriptionList = ({
 );
 
 DescriptionList.displayName = 'DescriptionList';
-DescriptionList.propTypes = commonPropTypes;
 
 export const DescriptionListItem = ({
   children,
@@ -46,7 +39,6 @@ export const DescriptionListItem = ({
 );
 
 DescriptionListItem.displayName = 'DescriptionListItem';
-DescriptionListItem.propTypes = commonPropTypes;
 
 export const DescriptionTerm = ({
   children,
@@ -59,7 +51,6 @@ export const DescriptionTerm = ({
 );
 
 DescriptionTerm.displayName = 'DescriptionTerm';
-DescriptionTerm.propTypes = commonPropTypes;
 
 export const DescriptionDetails = ({
   children,
@@ -72,4 +63,3 @@ export const DescriptionDetails = ({
 );
 
 DescriptionDetails.displayName = 'DescriptionDetails';
-DescriptionDetails.propTypes = commonPropTypes;
diff --git a/packages/react/src/components/Dialog/index.tsx b/packages/react/src/components/Dialog/index.tsx
index 92124e703..47a62efab 100644
--- a/packages/react/src/components/Dialog/index.tsx
+++ b/packages/react/src/components/Dialog/index.tsx
@@ -1,6 +1,5 @@
 import React from 'react';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import FocusTrap from 'focus-trap-react';
 import Offscreen from '../Offscreen';
@@ -42,20 +41,6 @@ export default class Dialog extends React.Component<DialogProps, DialogState> {
     closeButtonText: 'Close'
   };
 
-  static propTypes = {
-    className: PropTypes.string,
-    show: PropTypes.bool,
-    dialogRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ]),
-    onClose: PropTypes.func,
-    forceAction: PropTypes.bool,
-    heading: PropTypes.oneOfType([PropTypes.object, PropTypes.node]).isRequired,
-    closeButtonText: PropTypes.string,
-    portal: PropTypes.any
-  };
-
   private element: HTMLDivElement | null;
   private heading: HTMLHeadingElement | null;
 
@@ -223,11 +208,6 @@ const DialogContent = ({
   </div>
 );
 DialogContent.displayName = 'DialogContent';
-DialogContent.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  align: PropTypes.string
-};
 
 export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement> &
   DialogAlignmentProps;
@@ -250,9 +230,4 @@ const DialogFooter = ({
   </div>
 );
 DialogFooter.displayName = 'DialogFooter';
-DialogFooter.propTypes = {
-  className: PropTypes.string,
-  children: PropTypes.node,
-  align: PropTypes.string
-};
 export { Dialog, DialogContent, DialogFooter };
diff --git a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.tsx b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.tsx
index 5de705a36..242fd4d4f 100644
--- a/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.tsx
+++ b/packages/react/src/components/ExpandCollapsePanel/ExpandCollapsePanel.tsx
@@ -1,5 +1,4 @@
 import React, { ReactElement } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import PanelTrigger from './PanelTrigger';
 import {
@@ -33,14 +32,6 @@ export default class ExpandCollapsePanel extends React.Component<
     onToggle: () => {}
   };
 
-  static propTypes = {
-    open: PropTypes.bool,
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-    animationTiming: PropTypes.oneOfType([PropTypes.number, PropTypes.bool]),
-    onToggle: PropTypes.func
-  };
-
   readonly state: ExpandCollapsePanelState = {
     controlled: typeof this.props.open !== 'undefined',
     isOpen: typeof this.props.open !== 'undefined' ? this.props.open : false
@@ -63,8 +54,9 @@ export default class ExpandCollapsePanel extends React.Component<
   animateOpen = () => {
     const { current: panel } = this.panel;
     const { animationTiming } = this.props;
-    const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)')
-      .matches;
+    const prefersReducedMotion = matchMedia(
+      '(prefers-reduced-motion: reduce)'
+    ).matches;
 
     if (!animationTiming || prefersReducedMotion) {
       this.setState({ isAnimating: false });
@@ -107,8 +99,9 @@ export default class ExpandCollapsePanel extends React.Component<
   animateClose = () => {
     const { current: panel } = this.panel;
     const { animationTiming } = this.props;
-    const prefersReducedMotion = matchMedia('(prefers-reduced-motion: reduce)')
-      .matches;
+    const prefersReducedMotion = matchMedia(
+      '(prefers-reduced-motion: reduce)'
+    ).matches;
 
     if (!animationTiming || prefersReducedMotion) {
       this.setState({ isAnimating: false });
@@ -186,10 +179,10 @@ export default class ExpandCollapsePanel extends React.Component<
     } = this.props;
     const { isOpen, isAnimating, animationClass } = this.state;
     const trigger = React.Children.toArray(children).find(
-      child => (child as ReactElement<any>).type === PanelTrigger
+      (child) => (child as ReactElement<any>).type === PanelTrigger
     );
     const panelElements = React.Children.toArray(children).filter(
-      child =>
+      (child) =>
         typeof child === 'string' ||
         (child as ReactElement<any>).type !== PanelTrigger
     );
diff --git a/packages/react/src/components/ExpandCollapsePanel/PanelTrigger.tsx b/packages/react/src/components/ExpandCollapsePanel/PanelTrigger.tsx
index 60fce8024..a73305b74 100644
--- a/packages/react/src/components/ExpandCollapsePanel/PanelTrigger.tsx
+++ b/packages/react/src/components/ExpandCollapsePanel/PanelTrigger.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import Icon, { IconType } from '../Icon';
 
@@ -56,16 +55,6 @@ const PanelTrigger = ({
   );
 };
 
-PanelTrigger.propTypes = {
-  children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
-  open: PropTypes.bool,
-  iconExpanded: PropTypes.string,
-  iconCollapsed: PropTypes.string,
-  heading: PropTypes.shape({
-    level: PropTypes.number
-  })
-};
-
 PanelTrigger.displayName = 'PanelTrigger';
 
 export default React.memo(PanelTrigger);
diff --git a/packages/react/src/components/FieldWrap/index.tsx b/packages/react/src/components/FieldWrap/index.tsx
index 436a78f6f..583413671 100644
--- a/packages/react/src/components/FieldWrap/index.tsx
+++ b/packages/react/src/components/FieldWrap/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 interface Props extends React.HTMLAttributes<HTMLElement> {
@@ -16,10 +15,5 @@ const FieldWrap = React.forwardRef<HTMLElement, Props>(
 );
 
 FieldWrap.displayName = 'FieldWrap';
-FieldWrap.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  as: PropTypes.string
-};
 
 export default FieldWrap;
diff --git a/packages/react/src/components/Icon/index.tsx b/packages/react/src/components/Icon/index.tsx
index 07b14d710..4c06c4ff9 100644
--- a/packages/react/src/components/Icon/index.tsx
+++ b/packages/react/src/components/Icon/index.tsx
@@ -1,6 +1,5 @@
 import React, { useState, useEffect, useRef, forwardRef } from 'react';
 import Offscreen from '../Offscreen';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { IconType, iconTypes } from './types';
 
@@ -29,7 +28,7 @@ const Icon = forwardRef<HTMLDivElement, IconProps>(
       }
 
       import(`./icons/${name}.svg`)
-        .then(icon => {
+        .then((icon) => {
           isMounted.current && setIcon(() => icon.default);
         })
         .catch(() => {
@@ -59,13 +58,6 @@ const Icon = forwardRef<HTMLDivElement, IconProps>(
   }
 );
 
-Icon.propTypes = {
-  label: PropTypes.string,
-  className: PropTypes.string,
-  // @ts-expect-error
-  type: PropTypes.string.isRequired
-};
-
 Icon.displayName = 'Icon';
 
 export default Icon;
diff --git a/packages/react/src/components/IconButton/index.tsx b/packages/react/src/components/IconButton/index.tsx
index a7d1ae31d..e0d92b8c2 100644
--- a/packages/react/src/components/IconButton/index.tsx
+++ b/packages/react/src/components/IconButton/index.tsx
@@ -12,7 +12,6 @@ import React, {
   MutableRefObject,
   HTMLProps
 } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 import * as Polymorphic from '../../utils/polymorphic-type';
 import Icon, { IconType } from '../Icon';
@@ -110,21 +109,6 @@ const IconButton = forwardRef(
   }
 ) as PolymorphicIconButton;
 
-IconButton.propTypes = {
-  // @ts-expect-error
-  as: PropTypes.elementType,
-  // @ts-expect-error
-  icon: PropTypes.string.isRequired,
-  label: PropTypes.node.isRequired,
-  // @ts-expect-error
-  tooltipPlacement: PropTypes.string,
-  // @ts-expect-error
-  tooltipVariant: PropTypes.string,
-  tooltipPortal: PropTypes.any,
-  // @ts-expect-error
-  variant: PropTypes.string
-};
-
 IconButton.displayName = 'IconButton';
 
 export default IconButton;
diff --git a/packages/react/src/components/IssuePanel/index.tsx b/packages/react/src/components/IssuePanel/index.tsx
index e1f971978..4ba4cf142 100644
--- a/packages/react/src/components/IssuePanel/index.tsx
+++ b/packages/react/src/components/IssuePanel/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import IconButton from '../IconButton';
 
@@ -11,7 +10,7 @@ const IssuePanel = ({
 }: {
   className?: string;
   title?: string;
-  actions?: typeof IconButton[];
+  actions?: (typeof IconButton)[];
   children: React.ReactNode;
 }) => {
   return (
@@ -30,9 +29,5 @@ const IssuePanel = ({
 };
 
 IssuePanel.displayName = 'IssuePanel';
-IssuePanel.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 
 export default IssuePanel;
diff --git a/packages/react/src/components/Layout/index.tsx b/packages/react/src/components/Layout/index.tsx
index 2d66d5a27..6b304e467 100644
--- a/packages/react/src/components/Layout/index.tsx
+++ b/packages/react/src/components/Layout/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 export interface LayoutProps extends React.HTMLAttributes<HTMLDivElement> {
   layoutRef?: React.Ref<HTMLDivElement>;
@@ -11,14 +10,6 @@ export default class Layout extends React.Component<LayoutProps> {
     layoutRef: () => {}
   };
 
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    layoutRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ])
-  };
-
   render() {
     const { layoutRef, children, ...other } = this.props;
     return (
diff --git a/packages/react/src/components/Line/index.tsx b/packages/react/src/components/Line/index.tsx
index 2c37e9f4a..38c5890fe 100644
--- a/packages/react/src/components/Line/index.tsx
+++ b/packages/react/src/components/Line/index.tsx
@@ -1,15 +1,10 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const Line = ({ className, ...other }: React.HTMLAttributes<HTMLHRElement>) => (
   <hr className={classNames('Line', className)} {...other} />
 );
 
-Line.propTypes = {
-  className: PropTypes.string
-};
-
 Line.displayName = 'Line';
 
 export default Line;
diff --git a/packages/react/src/components/Link/index.tsx b/packages/react/src/components/Link/index.tsx
index 8616949ac..139ce14c3 100644
--- a/packages/react/src/components/Link/index.tsx
+++ b/packages/react/src/components/Link/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export interface LinkProps
@@ -31,17 +30,6 @@ const Link = ({
   </a>
 );
 
-Link.propTypes = {
-  children: PropTypes.node,
-  className: PropTypes.string,
-  variant: PropTypes.string,
-  thin: PropTypes.bool,
-  linkRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.any })
-  ])
-};
-
 Link.displayName = 'Link';
 
 export default Link;
diff --git a/packages/react/src/components/Loader/index.tsx b/packages/react/src/components/Loader/index.tsx
index 6d8bd4da9..aae9bd472 100644
--- a/packages/react/src/components/Loader/index.tsx
+++ b/packages/react/src/components/Loader/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Offscreen from '../Offscreen';
 import classNames from 'classnames';
 
@@ -32,10 +31,6 @@ const Loader = React.forwardRef<HTMLDivElement, LoaderProps>(
   }
 );
 
-Loader.propTypes = {
-  className: PropTypes.string
-};
-
 Loader.displayName = 'Loader';
 
 export default Loader;
diff --git a/packages/react/src/components/LoaderOverlay/index.tsx b/packages/react/src/components/LoaderOverlay/index.tsx
index 6f80570fb..a7a047232 100644
--- a/packages/react/src/components/LoaderOverlay/index.tsx
+++ b/packages/react/src/components/LoaderOverlay/index.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef, useEffect } from 'react';
 import FocusTrap from 'focus-trap-react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Loader from '../Loader';
 import AxeLoader from './axe-loader';
@@ -93,14 +92,6 @@ const LoaderOverlay = forwardRef<HTMLDivElement, LoaderOverlayProps>(
   }
 );
 
-LoaderOverlay.propTypes = {
-  className: PropTypes.string,
-  variant: PropTypes.oneOf(['large', 'small']),
-  label: PropTypes.string,
-  focusOnInitialRender: PropTypes.bool,
-  children: PropTypes.node
-};
-
 LoaderOverlay.displayName = 'LoaderOverlay';
 
 export default LoaderOverlay;
diff --git a/packages/react/src/components/Main/index.tsx b/packages/react/src/components/Main/index.tsx
index cf09d1ffe..02bbddda6 100644
--- a/packages/react/src/components/Main/index.tsx
+++ b/packages/react/src/components/Main/index.tsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 
 export interface MainProps extends React.HTMLAttributes<HTMLDivElement> {
   mainRef?: React.Ref<HTMLDivElement>;
@@ -11,14 +10,6 @@ export default class Main extends Component<MainProps> {
     mainRef: () => {}
   };
 
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    mainRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ])
-  };
-
   render() {
     const { mainRef, children, ...other } = this.props;
     return (
diff --git a/packages/react/src/components/MenuBar/index.tsx b/packages/react/src/components/MenuBar/index.tsx
index daad361f9..ee3eee7a0 100644
--- a/packages/react/src/components/MenuBar/index.tsx
+++ b/packages/react/src/components/MenuBar/index.tsx
@@ -1,5 +1,4 @@
 import React, { Children, cloneElement } from 'react';
-import PropTypes from 'prop-types';
 import keyname from 'keyname';
 import { isWide } from '../../utils/viewport';
 
@@ -17,13 +16,6 @@ export default class TopBar extends React.Component<
   MenuBarProps,
   MenuBarState
 > {
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    className: PropTypes.string,
-    thin: PropTypes.bool,
-    hasTrigger: PropTypes.bool
-  };
-
   static defaultProps = {
     thin: false,
     hasTrigger: false
@@ -117,7 +109,9 @@ export default class TopBar extends React.Component<
       menuItems.shift();
     }
 
-    const currentIndex = menuItems.findIndex(menuitem => menuitem === e.target);
+    const currentIndex = menuItems.findIndex(
+      (menuitem) => menuitem === e.target
+    );
     if (currentIndex === -1 || (key !== 'left' && key !== 'right')) {
       return;
     }
diff --git a/packages/react/src/components/MenuItem/index.tsx b/packages/react/src/components/MenuItem/index.tsx
index eb02df592..d6c8e458c 100644
--- a/packages/react/src/components/MenuItem/index.tsx
+++ b/packages/react/src/components/MenuItem/index.tsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import keyname from 'keyname';
 import clickLink from './click-link';
 import setRef from '../../utils/setRef';
@@ -23,17 +22,6 @@ export default class MenuItem extends Component<MenuItemProps> {
     autoClickLink: true
   };
 
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    menuItemRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ]),
-    onClick: PropTypes.func,
-    onKeyDown: PropTypes.func,
-    autoClickLink: PropTypes.bool
-  };
-
   private item: HTMLLIElement | null;
 
   constructor(props: MenuItemProps) {
@@ -68,7 +56,7 @@ export default class MenuItem extends Component<MenuItemProps> {
       <li
         {...other}
         role="menuitem"
-        ref={item => {
+        ref={(item) => {
           this.item = item;
           setRef(menuItemRef, item);
         }}
diff --git a/packages/react/src/components/NavBar/NavBar.tsx b/packages/react/src/components/NavBar/NavBar.tsx
index 64118132d..26dd6fa84 100644
--- a/packages/react/src/components/NavBar/NavBar.tsx
+++ b/packages/react/src/components/NavBar/NavBar.tsx
@@ -5,7 +5,6 @@ import React, {
   KeyboardEventHandler
 } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 import Icon from '../Icon';
 import { useId } from 'react-id-generator';
 
@@ -97,12 +96,5 @@ const NavBar = ({
 };
 
 NavBar.displayName = 'NavBar';
-NavBar.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  collapsed: PropTypes.bool,
-  navTriggerLabel: PropTypes.string,
-  propId: PropTypes.string
-};
 
 export default NavBar;
diff --git a/packages/react/src/components/NavBar/NavItem.tsx b/packages/react/src/components/NavBar/NavItem.tsx
index 4af138f6f..1b0efaf20 100644
--- a/packages/react/src/components/NavBar/NavItem.tsx
+++ b/packages/react/src/components/NavBar/NavItem.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 interface NavItemProps extends React.HTMLAttributes<HTMLLIElement> {
@@ -34,8 +33,5 @@ const NavItem = ({
 };
 
 NavItem.displayName = 'NavItem';
-NavItem.propTypes = {
-  children: PropTypes.node.isRequired
-};
 
 export default NavItem;
diff --git a/packages/react/src/components/Notice/index.tsx b/packages/react/src/components/Notice/index.tsx
index 082cc94f8..cbd4cd735 100644
--- a/packages/react/src/components/Notice/index.tsx
+++ b/packages/react/src/components/Notice/index.tsx
@@ -1,5 +1,4 @@
 import React, { forwardRef, ReactNode } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon, { IconType } from '../Icon';
 import { ContentNode } from '../../types';
@@ -42,17 +41,5 @@ const Notice = forwardRef<HTMLDivElement, NoticeProps>(
 );
 
 Notice.displayName = 'Notice';
-Notice.propTypes = {
-  children: PropTypes.node,
-  type: PropTypes.oneOf(['caution', 'info', 'danger']),
-  // @ts-expect-error
-  title: PropTypes.oneOfType([
-    PropTypes.string,
-    PropTypes.number,
-    PropTypes.element
-  ]),
-  // @ts-expect-error
-  icon: PropTypes.string
-};
 
 export default Notice;
diff --git a/packages/react/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react/src/components/OptionsMenu/OptionsMenu.tsx
index abd3c9d38..948cbc895 100644
--- a/packages/react/src/components/OptionsMenu/OptionsMenu.tsx
+++ b/packages/react/src/components/OptionsMenu/OptionsMenu.tsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react';
-import PropTypes from 'prop-types';
 import OptionsMenuWrapper from './OptionsMenuWrapper';
 import OptionsMenuList from './OptionsMenuList';
 import setRef from '../../utils/setRef';
@@ -47,20 +46,6 @@ export default class OptionsMenu extends Component<
     align: 'right'
   };
 
-  static propTypes = {
-    trigger: PropTypes.func,
-    children: PropTypes.node.isRequired,
-    onClose: PropTypes.func,
-    className: PropTypes.string,
-    onSelect: PropTypes.func,
-    closeOnSelect: PropTypes.bool,
-    menuRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ]),
-    align: PropTypes.oneOf(['left', 'right'])
-  };
-
   private triggerRef: React.RefObject<HTMLButtonElement>;
 
   constructor(props: AllOptionsMenuProps) {
@@ -116,7 +101,7 @@ export default class OptionsMenu extends Component<
           })}
         <OptionsMenuList
           show={show}
-          menuRef={el => {
+          menuRef={(el) => {
             if (menuRef) {
               setRef(menuRef, el);
             }
diff --git a/packages/react/src/components/OptionsMenu/OptionsMenuItem.tsx b/packages/react/src/components/OptionsMenu/OptionsMenuItem.tsx
index 04d99f8dd..52205d1e3 100644
--- a/packages/react/src/components/OptionsMenu/OptionsMenuItem.tsx
+++ b/packages/react/src/components/OptionsMenu/OptionsMenuItem.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 export interface OptionsMenuItemProps
   extends Pick<
@@ -18,12 +17,6 @@ class OptionsMenuItemComponent extends React.Component<OptionsMenuItemProps> {
     onSelect: () => {}
   };
 
-  static propTypes = {
-    disabled: PropTypes.bool,
-    className: PropTypes.string,
-    onSelect: PropTypes.func
-  };
-
   handleClick = (event: React.MouseEvent<HTMLElement>) => {
     const { disabled, onSelect } = this.props;
     if (!disabled) {
diff --git a/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx b/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx
index 2c5e849b9..4b8088a28 100644
--- a/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx
+++ b/packages/react/src/components/OptionsMenu/OptionsMenuList.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { OptionsMenuProps } from './OptionsMenu';
 import ClickOutsideListener from '../ClickOutsideListener';
 import classnames from 'classnames';
@@ -28,19 +27,6 @@ export default class OptionsMenuList extends React.Component<
     onClose: () => {}
   };
 
-  static propTypes = {
-    show: PropTypes.bool,
-    children: PropTypes.node.isRequired,
-    onClose: PropTypes.func,
-    className: PropTypes.string,
-    onSelect: PropTypes.func,
-    closeOnSelect: PropTypes.bool,
-    menuRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ])
-  };
-
   private itemRefs: Array<HTMLLIElement | null>;
   private menuRef: HTMLUListElement | null;
 
@@ -189,7 +175,7 @@ export default class OptionsMenuList extends React.Component<
           aria-expanded={show}
           role="menu"
           onClick={handleClick}
-          ref={el => {
+          ref={(el) => {
             this.menuRef = el;
             if (menuRef) {
               setRef(menuRef, el);
diff --git a/packages/react/src/components/OptionsMenu/OptionsMenuTrigger.tsx b/packages/react/src/components/OptionsMenu/OptionsMenuTrigger.tsx
index 43fb2ac2c..7dac74304 100644
--- a/packages/react/src/components/OptionsMenu/OptionsMenuTrigger.tsx
+++ b/packages/react/src/components/OptionsMenu/OptionsMenuTrigger.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 export interface OptionsMenuTriggerProps
@@ -27,15 +26,6 @@ function OptionsMenuTriggerComponent({
   );
 }
 
-OptionsMenuTriggerComponent.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  triggerRef: PropTypes.oneOfType([
-    PropTypes.func,
-    PropTypes.shape({ current: PropTypes.any })
-  ])
-};
-
 export default React.forwardRef(function OptionsMenuTrigger(
   props: OptionsMenuTriggerProps,
   ref: React.Ref<HTMLButtonElement>
diff --git a/packages/react/src/components/OptionsMenu/OptionsMenuWrapper.tsx b/packages/react/src/components/OptionsMenu/OptionsMenuWrapper.tsx
index 56b853fdd..ffcc70a63 100644
--- a/packages/react/src/components/OptionsMenu/OptionsMenuWrapper.tsx
+++ b/packages/react/src/components/OptionsMenu/OptionsMenuWrapper.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { OptionsMenuAlignmentProps } from './OptionsMenu';
 
@@ -30,10 +29,4 @@ const OptionsMenuWrapper = ({
   />
 );
 
-OptionsMenuWrapper.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  align: PropTypes.oneOf(['left', 'right'])
-};
-
 export default OptionsMenuWrapper;
diff --git a/packages/react/src/components/Pagination/Pagination.tsx b/packages/react/src/components/Pagination/Pagination.tsx
index 5f39afefc..ffae298d9 100644
--- a/packages/react/src/components/Pagination/Pagination.tsx
+++ b/packages/react/src/components/Pagination/Pagination.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { Placement } from '@popperjs/core';
 import IconButton from '../IconButton';
 import { ContentNode } from '../../types';
-import * as CustomPropTypes from '../../propTypes';
 
 interface Props extends React.HTMLAttributes<HTMLDivElement> {
   totalItems: number;
@@ -117,23 +115,5 @@ const Pagination = React.forwardRef<HTMLDivElement, Props>(
 );
 
 Pagination.displayName = 'Pagination';
-Pagination.propTypes = {
-  totalItems: PropTypes.number.isRequired,
-  itemsPerPage: PropTypes.number,
-  currentPage: PropTypes.number,
-  statusLabel: PropTypes.element,
-  firstPageLabel: CustomPropTypes.contentNode,
-  previousPageLabel: CustomPropTypes.contentNode,
-  nextPageLabel: CustomPropTypes.contentNode,
-  lastPageLabel: CustomPropTypes.contentNode,
-  onNextPageClick: PropTypes.func,
-  onPreviousPageClick: PropTypes.func,
-  onFirstPageClick: PropTypes.func,
-  onLastPageClick: PropTypes.func,
-  // @ts-expect-error
-  tooltipPlacement: PropTypes.string,
-  className: PropTypes.string,
-  thin: PropTypes.bool
-};
 
 export default Pagination;
diff --git a/packages/react/src/components/Panel/Panel.tsx b/packages/react/src/components/Panel/Panel.tsx
index dd9e72053..04e5c62e6 100644
--- a/packages/react/src/components/Panel/Panel.tsx
+++ b/packages/react/src/components/Panel/Panel.tsx
@@ -1,5 +1,4 @@
 import React, { HTMLAttributes, ReactNode, forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import rndid from '../../utils/rndid';
 
@@ -76,13 +75,5 @@ const Panel = forwardRef<HTMLElement, PanelProps>(
 );
 
 Panel.displayName = 'Panel';
-Panel.propTypes = {
-  children: PropTypes.node.isRequired,
-  // @ts-expect-error
-  heading: PropTypes.oneOfType([PropTypes.object, PropTypes.node]),
-  className: PropTypes.string,
-  padding: PropTypes.bool,
-  collapsed: PropTypes.bool
-};
 
 export default Panel;
diff --git a/packages/react/src/components/Panel/PanelContent.tsx b/packages/react/src/components/Panel/PanelContent.tsx
index d75e0e353..55bc084dd 100644
--- a/packages/react/src/components/Panel/PanelContent.tsx
+++ b/packages/react/src/components/Panel/PanelContent.tsx
@@ -1,6 +1,5 @@
 import React, { ReactNode, forwardRef } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 export interface PanelContentProps
   extends React.HTMLAttributes<HTMLDivElement> {
@@ -30,10 +29,4 @@ const PanelContent = forwardRef<HTMLDivElement, PanelContentProps>(
 
 PanelContent.displayName = 'PanelContent';
 
-PanelContent.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  padding: PropTypes.bool
-};
-
 export default PanelContent;
diff --git a/packages/react/src/components/Panel/PanelHeader.tsx b/packages/react/src/components/Panel/PanelHeader.tsx
index eb409e3d9..f89eb441c 100644
--- a/packages/react/src/components/Panel/PanelHeader.tsx
+++ b/packages/react/src/components/Panel/PanelHeader.tsx
@@ -1,6 +1,5 @@
 import React, { ReactNode, forwardRef } from 'react';
 import classNames from 'classnames';
-import PropTypes from 'prop-types';
 
 export interface PanelHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
   children: ReactNode;
@@ -23,9 +22,4 @@ const PanelHeader = forwardRef<HTMLDivElement, PanelHeaderProps>(
 
 PanelHeader.displayName = 'PanelHeader';
 
-PanelHeader.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
-
 export default PanelHeader;
diff --git a/packages/react/src/components/Pointout/index.tsx b/packages/react/src/components/Pointout/index.tsx
index 7165ee3c2..370e9c5cf 100644
--- a/packages/react/src/components/Pointout/index.tsx
+++ b/packages/react/src/components/Pointout/index.tsx
@@ -1,5 +1,4 @@
 import React, { ButtonHTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 import { createPortal } from 'react-dom';
 import classNames from 'classnames';
 import focusable from 'focusable';
@@ -63,35 +62,6 @@ export default class Pointout extends React.Component<
     position: 'center'
   };
 
-  static propTypes = {
-    heading: PropTypes.node,
-    children: PropTypes.node.isRequired,
-    ftpRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ]),
-    noArrow: function(props: PointoutProps, propName: keyof PointoutProps) {
-      if (props[propName] === true && typeof props['target'] !== 'undefined') {
-        return new Error(
-          'A "target" prop with "noArrow=true" is not currently supported.'
-        );
-      }
-    },
-    arrowPosition: PropTypes.string,
-    onClose: PropTypes.func,
-    dismissText: PropTypes.string,
-    className: PropTypes.string,
-    target: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ]),
-    disableOffscreenPointout: PropTypes.bool,
-    portal: PropTypes.any,
-    previousButtonProps: PropTypes.any,
-    nextButtonProps: PropTypes.any,
-    closeButtonProps: PropTypes.any
-  };
-
   private resizeDebounceId: number;
   private resizeDebounce: () => void;
   private offscreenRef: HTMLElement | null;
@@ -231,7 +201,7 @@ export default class Pointout extends React.Component<
     const offscreenFocusable = getFocusableElements(offscreenRef);
     const visibleFocusable = getFocusableElements(visibleRef);
     const elementIndex = offscreenFocusable.findIndex(
-      element => element === target
+      (element) => element === target
     );
 
     if (elementIndex === -1 || !visibleFocusable[elementIndex]) {
@@ -252,7 +222,7 @@ export default class Pointout extends React.Component<
     const offscreenFocusable = getFocusableElements(offscreenRef);
     const visibleFocusable = getFocusableElements(visibleRef);
     const elementIndex = offscreenFocusable.findIndex(
-      element => element === target
+      (element) => element === target
     );
 
     if (elementIndex === -1 || !visibleFocusable[elementIndex]) {
@@ -396,7 +366,7 @@ export default class Pointout extends React.Component<
         role={target ? undefined : 'region'}
         aria-labelledby={heading ? headingId : undefined}
         aria-hidden={!!target && !disableOffscreenPointout}
-        ref={el => (this.visibleRef = el)}
+        ref={(el) => (this.visibleRef = el)}
       >
         {noArrow ? null : (
           <div
@@ -470,7 +440,7 @@ export default class Pointout extends React.Component<
             className="Offscreen"
             role="region"
             aria-labelledby={heading ? headingId : undefined}
-            ref={el => (this.offscreenRef = el)}
+            ref={(el) => (this.offscreenRef = el)}
           >
             <button
               type="button"
@@ -481,7 +451,7 @@ export default class Pointout extends React.Component<
             <div
               className="Pointout__content"
               tabIndex={-1}
-              ref={el => (this.offscreenContentRef = el)}
+              ref={(el) => (this.offscreenContentRef = el)}
             >
               {heading &&
                 React.cloneElement(heading as React.ReactElement<any>, {
diff --git a/packages/react/src/components/ProgressBar/index.tsx b/packages/react/src/components/ProgressBar/index.tsx
index 40fedc2b2..950d538f1 100644
--- a/packages/react/src/components/ProgressBar/index.tsx
+++ b/packages/react/src/components/ProgressBar/index.tsx
@@ -1,6 +1,5 @@
 import { Cauldron } from '../../types';
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import classnames from 'classnames';
 
 type ProgressBarProps = {
diff --git a/packages/react/src/components/RadioCardGroup/index.tsx b/packages/react/src/components/RadioCardGroup/index.tsx
index 8ed06b21a..847227580 100644
--- a/packages/react/src/components/RadioCardGroup/index.tsx
+++ b/packages/react/src/components/RadioCardGroup/index.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useRef, useEffect } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon, { IconType } from '../Icon';
 import Card, { CardContent } from '../Card';
@@ -87,7 +86,7 @@ const RadioCardGroup = ({
             name={name}
             value={radioValue}
             id={id}
-            ref={input => {
+            ref={(input) => {
               if (!input) {
                 return;
               }
@@ -148,33 +147,6 @@ const RadioCardGroup = ({
   );
 };
 
-RadioCardGroup.propTypes = {
-  name: PropTypes.string,
-  radios: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      id: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-      cardImg: PropTypes.element.isRequired,
-      cardIcon: PropTypes.string.isRequired
-    })
-  ).isRequired,
-  hasLabel: (
-    props: { [key: string]: string },
-    propName: string,
-    componentName: string
-  ) => {
-    if (!props['aria-label'] && !props['aria-labelledby']) {
-      return new Error(
-        `${componentName} must have an "aria-label" or "aria-labelledby" prop`
-      );
-    }
-  },
-  className: PropTypes.string,
-  defaultValue: PropTypes.string,
-  onChange: PropTypes.func
-};
-
 RadioCardGroup.displayName = 'RadioCardGroup';
 
 export default RadioCardGroup;
diff --git a/packages/react/src/components/RadioGroup/index.tsx b/packages/react/src/components/RadioGroup/index.tsx
index 152ccfce4..4cb7c198a 100644
--- a/packages/react/src/components/RadioGroup/index.tsx
+++ b/packages/react/src/components/RadioGroup/index.tsx
@@ -1,5 +1,4 @@
 import React, { Ref, useState, useRef, useEffect, forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../Icon';
 
@@ -84,7 +83,7 @@ const RadioGroup = forwardRef(
               name={name}
               value={radioValue}
               id={id}
-              ref={input => {
+              ref={(input) => {
                 if (!input) {
                   return;
                 }
@@ -152,33 +151,6 @@ const RadioGroup = forwardRef(
   }
 );
 
-RadioGroup.propTypes = {
-  name: PropTypes.string,
-  radios: PropTypes.arrayOf(
-    PropTypes.shape({
-      value: PropTypes.string.isRequired,
-      id: PropTypes.string.isRequired,
-      label: PropTypes.string.isRequired,
-      labelDescription: PropTypes.string
-    }).isRequired
-  ).isRequired,
-  hasLabel: (
-    props: { [key: string]: string },
-    _propName: string,
-    componentName: string
-  ): null | Error => {
-    if (!props['aria-label'] && !props['aria-labelledby']) {
-      return new Error(
-        `${componentName} must have an "aria-label" or "aria-labelledby" prop`
-      );
-    }
-    return null;
-  },
-  className: PropTypes.string,
-  defaultValue: PropTypes.string,
-  onChange: PropTypes.func
-};
-
 RadioGroup.displayName = 'RadioGroup';
 
 export default RadioGroup;
diff --git a/packages/react/src/components/Scrim/index.tsx b/packages/react/src/components/Scrim/index.tsx
index 1489d3778..22d29b06f 100644
--- a/packages/react/src/components/Scrim/index.tsx
+++ b/packages/react/src/components/Scrim/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 export interface ScrimProps {
   show: boolean;
@@ -13,10 +12,6 @@ interface ScrimState {
 export default class Scrim extends React.Component<ScrimProps, ScrimState> {
   private el: HTMLDivElement | null;
 
-  static propTypes = {
-    show: PropTypes.bool.isRequired
-  };
-
   constructor(props: ScrimProps) {
     super(props);
 
@@ -83,7 +78,7 @@ export default class Scrim extends React.Component<ScrimProps, ScrimState> {
     }
 
     return (
-      <div ref={el => (this.el = el)} className={`Scrim ${animationClass}`} />
+      <div ref={(el) => (this.el = el)} className={`Scrim ${animationClass}`} />
     );
   }
 }
diff --git a/packages/react/src/components/SideBar/SideBar.tsx b/packages/react/src/components/SideBar/SideBar.tsx
index 6de94d87f..c16df8cc7 100644
--- a/packages/react/src/components/SideBar/SideBar.tsx
+++ b/packages/react/src/components/SideBar/SideBar.tsx
@@ -1,5 +1,4 @@
 import React, { Component, Fragment } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import keyname from 'keyname';
 import Scrim from '../Scrim';
@@ -26,13 +25,6 @@ export default class SideBar extends Component<SideBarProps, SideBarState> {
     show: false
   };
 
-  static propTypes = {
-    children: PropTypes.node.isRequired,
-    onDismiss: PropTypes.func.isRequired,
-    className: PropTypes.string,
-    show: PropTypes.bool
-  };
-
   private navList = React.createRef<HTMLUListElement>();
   private resizeDebounceId: number;
   private resizeDebounce: () => void;
@@ -124,14 +116,8 @@ export default class SideBar extends Component<SideBarProps, SideBarState> {
     const { animateClass, wide } = this.state;
     // disabling no-unused-vars to prevent onDismiss from being passed through to dom element
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    const {
-      children,
-      className,
-      show,
-      onDismiss,
-      navProps,
-      ...other
-    } = this.props;
+    const { children, className, show, onDismiss, navProps, ...other } =
+      this.props;
     /* eslint-disable jsx-a11y/no-noninteractive-element-interactions */
     return (
       <Fragment>
diff --git a/packages/react/src/components/SideBar/SideBarItem.tsx b/packages/react/src/components/SideBar/SideBarItem.tsx
index 80a527744..5eb8517d8 100644
--- a/packages/react/src/components/SideBar/SideBarItem.tsx
+++ b/packages/react/src/components/SideBar/SideBarItem.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import clickLink from '../MenuItem/click-link';
 
 export interface SideBarItemProps extends React.HTMLAttributes<HTMLLIElement> {
@@ -30,9 +29,5 @@ SideBarItem.displayName = 'SideBarItem';
 SideBarItem.defaultProps = {
   autoClickLink: true
 };
-SideBarItem.propTypes = {
-  children: PropTypes.node.isRequired,
-  autoClickLink: PropTypes.bool
-};
 
 export default SideBarItem;
diff --git a/packages/react/src/components/SkipLink/index.tsx b/packages/react/src/components/SkipLink/index.tsx
index a0264d295..3312a250c 100644
--- a/packages/react/src/components/SkipLink/index.tsx
+++ b/packages/react/src/components/SkipLink/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../Icon';
 import { isBrowser } from '../../utils/is-browser';
@@ -26,24 +25,6 @@ export default class SkipLink extends React.Component<
     targetText: 'Main Content'
   };
 
-  static propTypes = {
-    // enforce a valid id hash string (example: '#foo')
-    target: (
-      props: SkipLinkProps,
-      propName: keyof SkipLinkProps,
-      componentName: string
-    ) => {
-      const value = props[propName];
-      if (!value || typeof value !== 'string' || value[0] !== '#') {
-        return new Error(
-          `Invalid prop ${propName} supplied to ${componentName} (must be string starting with "#")`
-        );
-      }
-    },
-    skipText: PropTypes.string,
-    targetText: PropTypes.string
-  };
-
   constructor(props: SkipLinkProps) {
     super(props);
 
diff --git a/packages/react/src/components/Stepper/index.tsx b/packages/react/src/components/Stepper/index.tsx
index a8e63dd57..74b61356b 100644
--- a/packages/react/src/components/Stepper/index.tsx
+++ b/packages/react/src/components/Stepper/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import TooltipTabstop from '../TooltipTabstop';
 
@@ -76,13 +75,6 @@ export const Step = (props: StepProps) => {
 
 Step.displayName = 'Step';
 
-Step.propTypes = {
-  children: PropTypes.node,
-  tooltip: PropTypes.node,
-  tooltipText: PropTypes.string,
-  className: PropTypes.string
-};
-
 interface StepperProps {
   children: React.ReactNode;
   className?: string;
@@ -96,9 +88,4 @@ const Stepper = ({ children, className, ...other }: StepperProps) => (
 
 Stepper.displayName = 'Stepper';
 
-Stepper.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
-
 export default Stepper;
diff --git a/packages/react/src/components/Table/Table.tsx b/packages/react/src/components/Table/Table.tsx
index 2e6f2efae..9d43043d9 100644
--- a/packages/react/src/components/Table/Table.tsx
+++ b/packages/react/src/components/Table/Table.tsx
@@ -1,5 +1,4 @@
 import React, { TableHTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 interface TableProps extends TableHTMLAttributes<HTMLTableElement> {
@@ -20,10 +19,5 @@ const Table = ({ children, className, variant, ...other }: TableProps) => (
 );
 
 Table.displayName = 'Table';
-Table.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string,
-  variant: PropTypes.string
-};
 
 export default Table;
diff --git a/packages/react/src/components/Table/TableBody.tsx b/packages/react/src/components/Table/TableBody.tsx
index 02a835aef..82adb696e 100644
--- a/packages/react/src/components/Table/TableBody.tsx
+++ b/packages/react/src/components/Table/TableBody.tsx
@@ -1,5 +1,4 @@
 import React, { HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const TableBody = ({
@@ -13,9 +12,5 @@ const TableBody = ({
 );
 
 TableBody.displayName = 'TableBody';
-TableBody.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 
 export default TableBody;
diff --git a/packages/react/src/components/Table/TableCell.tsx b/packages/react/src/components/Table/TableCell.tsx
index 6f7b87538..6b04f835d 100644
--- a/packages/react/src/components/Table/TableCell.tsx
+++ b/packages/react/src/components/Table/TableCell.tsx
@@ -1,5 +1,4 @@
 import React, { TdHTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const TableCell = ({
@@ -13,9 +12,5 @@ const TableCell = ({
 );
 
 TableCell.displayName = 'TableCell';
-TableCell.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 
 export default TableCell;
diff --git a/packages/react/src/components/Table/TableFooter.tsx b/packages/react/src/components/Table/TableFooter.tsx
index 7d6148c6f..9d198d82b 100644
--- a/packages/react/src/components/Table/TableFooter.tsx
+++ b/packages/react/src/components/Table/TableFooter.tsx
@@ -1,5 +1,4 @@
 import React, { HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const TableFooter = ({
@@ -13,9 +12,5 @@ const TableFooter = ({
 );
 
 TableFooter.displayName = 'TableFooter';
-TableFooter.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 
 export default TableFooter;
diff --git a/packages/react/src/components/Table/TableHead.tsx b/packages/react/src/components/Table/TableHead.tsx
index 339c22b3b..fff0e2db5 100644
--- a/packages/react/src/components/Table/TableHead.tsx
+++ b/packages/react/src/components/Table/TableHead.tsx
@@ -1,5 +1,4 @@
 import React, { HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const TableHead = ({
@@ -13,9 +12,5 @@ const TableHead = ({
 );
 
 TableHead.displayName = 'TableHead';
-TableHead.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 
 export default TableHead;
diff --git a/packages/react/src/components/Table/TableHeader.tsx b/packages/react/src/components/Table/TableHeader.tsx
index 6f998a86b..56a107169 100644
--- a/packages/react/src/components/Table/TableHeader.tsx
+++ b/packages/react/src/components/Table/TableHeader.tsx
@@ -1,5 +1,4 @@
 import React, { ThHTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Offscreen from '../Offscreen';
 import Icon from '../Icon';
@@ -72,13 +71,5 @@ const TableHeader = ({
 };
 
 TableHeader.displayName = 'TableHeader';
-TableHeader.propTypes = {
-  children: PropTypes.node.isRequired,
-  sortDirection: PropTypes.string,
-  onSort: PropTypes.func,
-  className: PropTypes.string,
-  sortAscendingAnnouncement: PropTypes.string,
-  sortDescendingAnnouncement: PropTypes.string
-};
 
 export default TableHeader;
diff --git a/packages/react/src/components/Table/TableRow.tsx b/packages/react/src/components/Table/TableRow.tsx
index c81ecb2d5..6ee310ac3 100644
--- a/packages/react/src/components/Table/TableRow.tsx
+++ b/packages/react/src/components/Table/TableRow.tsx
@@ -1,5 +1,4 @@
 import React, { HTMLAttributes } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 const TableRow = ({
@@ -13,9 +12,5 @@ const TableRow = ({
 );
 
 TableRow.displayName = 'TableRow';
-TableRow.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 
 export default TableRow;
diff --git a/packages/react/src/components/Tabs/Tab.tsx b/packages/react/src/components/Tabs/Tab.tsx
index e87284c7b..63484f2cd 100644
--- a/packages/react/src/components/Tabs/Tab.tsx
+++ b/packages/react/src/components/Tabs/Tab.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 interface TabProps extends React.HTMLAttributes<HTMLLIElement> {
   target: React.RefObject<HTMLDivElement> | HTMLElement;
@@ -18,10 +17,5 @@ const Tab = React.forwardRef<HTMLLIElement, TabProps>(
 );
 
 Tab.displayName = 'Tab';
-Tab.propTypes = {
-  target: PropTypes.any.isRequired,
-  id: PropTypes.string,
-  children: PropTypes.node
-};
 
 export default Tab;
diff --git a/packages/react/src/components/Tabs/TabPanel.tsx b/packages/react/src/components/Tabs/TabPanel.tsx
index 4fc40b957..d828ac4e1 100644
--- a/packages/react/src/components/Tabs/TabPanel.tsx
+++ b/packages/react/src/components/Tabs/TabPanel.tsx
@@ -1,5 +1,4 @@
 import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { useId } from 'react-id-generator';
 
@@ -27,10 +26,5 @@ const TabPanel = forwardRef<HTMLDivElement, TabPanelProps>(
 );
 
 TabPanel.displayName = 'TabPanel';
-TabPanel.propTypes = {
-  id: PropTypes.string,
-  children: PropTypes.node,
-  className: PropTypes.string
-};
 
 export default TabPanel;
diff --git a/packages/react/src/components/Tabs/Tabs.tsx b/packages/react/src/components/Tabs/Tabs.tsx
index 49d193d77..e51891122 100644
--- a/packages/react/src/components/Tabs/Tabs.tsx
+++ b/packages/react/src/components/Tabs/Tabs.tsx
@@ -1,6 +1,5 @@
 import { Cauldron } from '../../types';
 import React, { useState, useEffect, useRef } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Tab from './Tab';
 import { useId } from 'react-id-generator';
@@ -34,7 +33,7 @@ const Tabs = ({
   const tabsRef = useRef<HTMLDivElement>(null);
 
   const tabs = React.Children.toArray(children).filter(
-    child => (child as React.ReactElement<any>).type === Tab
+    (child) => (child as React.ReactElement<any>).type === Tab
   );
 
   const tabCount = tabs.length;
@@ -97,9 +96,11 @@ const Tabs = ({
   };
 
   const tabComponents = tabs.map((child, index) => {
-    const { target, id: propId, ...other } = (child as React.ReactElement<
-      any
-    >).props;
+    const {
+      target,
+      id: propId,
+      ...other
+    } = (child as React.ReactElement<any>).props;
     const selected = index === activeIndex;
     const [id] = propId ? [propId] : useId(1, 'tab');
 
@@ -160,14 +161,5 @@ const Tabs = ({
 };
 
 Tabs.displayName = 'Tabs';
-Tabs.propTypes = {
-  children: PropTypes.node.isRequired,
-  'aria-label': PropTypes.string,
-  'aria-labelledby': PropTypes.string,
-  initialActiveIndex: PropTypes.number,
-  thin: PropTypes.bool,
-  orientation: PropTypes.string,
-  className: PropTypes.string
-};
 
 export default Tabs;
diff --git a/packages/react/src/components/Tag/index.tsx b/packages/react/src/components/Tag/index.tsx
index f5121b327..a48f21e1e 100644
--- a/packages/react/src/components/Tag/index.tsx
+++ b/packages/react/src/components/Tag/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
 interface TagProps {
@@ -13,10 +12,6 @@ export const TagLabel = ({ children, className, ...other }: TagProps) => (
   </div>
 );
 TagLabel.displayName = 'TagLabel';
-TagLabel.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 
 const Tag = ({ children, className, ...other }: TagProps) => (
   <div className={classNames('Tag', className)} {...other}>
@@ -24,8 +19,4 @@ const Tag = ({ children, className, ...other }: TagProps) => (
   </div>
 );
 Tag.displayName = 'Tag';
-Tag.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 export default Tag;
diff --git a/packages/react/src/components/TextField/index.tsx b/packages/react/src/components/TextField/index.tsx
index bcba74fe4..8b2a69ea9 100644
--- a/packages/react/src/components/TextField/index.tsx
+++ b/packages/react/src/components/TextField/index.tsx
@@ -1,5 +1,4 @@
 import React, { ChangeEvent } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import rndid from '../../utils/rndid';
 import tokenList from '../../utils/token-list';
@@ -40,23 +39,6 @@ export default class TextField extends React.Component<
     multiline: false
   };
 
-  static propTypes = {
-    label: PropTypes.node.isRequired,
-    id: PropTypes.string,
-    error: PropTypes.node,
-    defaultValue: PropTypes.string,
-    value: PropTypes.string,
-    onChange: PropTypes.func,
-    fieldRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ]),
-    required: PropTypes.bool,
-    requiredText: PropTypes.string, // support localized required text
-    multiline: PropTypes.bool,
-    'aria-describedby': PropTypes.string
-  };
-
   private inputId: string;
   private errorId: string;
   private input: HTMLInputElement | HTMLTextAreaElement | null;
diff --git a/packages/react/src/components/Toast/index.tsx b/packages/react/src/components/Toast/index.tsx
index 4e39462ac..27ddd03b4 100644
--- a/packages/react/src/components/Toast/index.tsx
+++ b/packages/react/src/components/Toast/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import Icon from '../Icon';
 import AriaIsolate from '../../utils/aria-isolate';
@@ -37,28 +36,6 @@ export default class Toast extends React.Component<ToastProps, ToastState> {
     dismissible: true
   };
 
-  static propTypes = {
-    // the ui to be added as the message of the toast
-    children: PropTypes.node.isRequired,
-    // "confirmation", "caution", or "action-needed"
-    type: PropTypes.string.isRequired,
-    // function to be exectued when toast is dismissed
-    onDismiss: PropTypes.func,
-    // text to be added as the aria-label of the "x" dismiss button (default: "Dismiss")
-    dismissText: PropTypes.string,
-    // an optional ref function to get a handle on the toast element
-    toastRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ]),
-    // whether or not to focus the toast
-    focus: PropTypes.bool,
-    // whether or not to show the toast
-    show: PropTypes.bool,
-    // whether or not the toast is dismissible
-    dismissible: PropTypes.bool
-  };
-
   static displayName = 'Toast';
 
   private el: HTMLDivElement | null;
@@ -140,7 +117,7 @@ export default class Toast extends React.Component<ToastProps, ToastState> {
     return (
       <React.Fragment>
         <div
-          ref={el => {
+          ref={(el) => {
             this.el = el;
             setRef(toastRef, el);
           }}
diff --git a/packages/react/src/components/Tooltip/index.tsx b/packages/react/src/components/Tooltip/index.tsx
index 189695c5a..38e4d2839 100644
--- a/packages/react/src/components/Tooltip/index.tsx
+++ b/packages/react/src/components/Tooltip/index.tsx
@@ -1,7 +1,6 @@
 import React, { useState, useRef, useEffect, useCallback } from 'react';
 import classnames from 'classnames';
 import { createPortal } from 'react-dom';
-import PropTypes from 'prop-types';
 import { useId } from 'react-id-generator';
 import { Placement } from '@popperjs/core';
 import { usePopper } from 'react-popper';
@@ -222,25 +221,12 @@ export default function Tooltip({
 
 Tooltip.displayName = 'Tooltip';
 
-Tooltip.propTypes = {
-  children: PropTypes.node.isRequired,
-  target: PropTypes.any.isRequired,
-  association: PropTypes.oneOf(['aria-labelledby', 'aria-describedby']),
-  show: PropTypes.bool,
-  placement: PropTypes.string,
-  variant: PropTypes.string,
-  portal: PropTypes.any
-};
-
 export const TooltipHead = ({
   className,
   ...other
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={classnames('TooltipHead', className)} {...other} />
 );
-TooltipHead.propTypes = {
-  className: PropTypes.string
-};
 
 export const TooltipContent = ({
   className,
@@ -248,6 +234,3 @@ export const TooltipContent = ({
 }: React.HTMLAttributes<HTMLDivElement>) => (
   <div className={classnames('TooltipContent', className)} {...other} />
 );
-TooltipContent.propTypes = {
-  className: PropTypes.string
-};
diff --git a/packages/react/src/components/TopBar/TopBarMenu.tsx b/packages/react/src/components/TopBar/TopBarMenu.tsx
index 5e0c00c2c..a078e5c6c 100644
--- a/packages/react/src/components/TopBar/TopBarMenu.tsx
+++ b/packages/react/src/components/TopBar/TopBarMenu.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import MenuItem from '../MenuItem';
 import { OptionsMenuList } from '../OptionsMenu';
 import classnames from 'classnames';
@@ -30,11 +29,6 @@ export default class TopBarMenu extends React.Component<
     menuItemRef: () => {}
   };
 
-  static propTypes = {
-    id: PropTypes.string.isRequired,
-    children: PropTypes.node.isRequired
-  };
-
   state: TopBarMenuState = {
     open: false
   };
@@ -79,10 +73,10 @@ export default class TopBarMenu extends React.Component<
     const { open } = state;
 
     const menu = React.Children.toArray(children).find(
-      child => (child as React.ReactElement<any>).type === OptionsMenuList
+      (child) => (child as React.ReactElement<any>).type === OptionsMenuList
     );
     const otherChildren = React.Children.toArray(children).filter(
-      child =>
+      (child) =>
         typeof child === 'string' ||
         (child as React.ReactElement<any>).type !== OptionsMenuList
     );
@@ -90,7 +84,7 @@ export default class TopBarMenu extends React.Component<
     return (
       <MenuItem
         {...other}
-        menuItemRef={el => {
+        menuItemRef={(el) => {
           this.menuItemRef = el;
           setRef(props.menuItemRef, el);
         }}
diff --git a/packages/react/src/components/TopBar/TopBarTrigger.tsx b/packages/react/src/components/TopBar/TopBarTrigger.tsx
index f3ff71158..fdb9cd6dd 100644
--- a/packages/react/src/components/TopBar/TopBarTrigger.tsx
+++ b/packages/react/src/components/TopBar/TopBarTrigger.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import MenuItem from '../MenuItem';
 
@@ -19,9 +18,5 @@ const TopBarTrigger: React.ComponentType<
   </MenuItem>
 );
 TopBarTrigger.displayName = 'TopBarTrigger';
-TopBarTrigger.propTypes = {
-  children: PropTypes.node.isRequired,
-  className: PropTypes.string
-};
 
 export default TopBarTrigger;
diff --git a/packages/react/src/components/TwoColumnPanel/ColumnGroupHeader.tsx b/packages/react/src/components/TwoColumnPanel/ColumnGroupHeader.tsx
index 62b232691..e2a96df2d 100644
--- a/packages/react/src/components/TwoColumnPanel/ColumnGroupHeader.tsx
+++ b/packages/react/src/components/TwoColumnPanel/ColumnGroupHeader.tsx
@@ -1,4 +1,3 @@
-import PropTypes from 'prop-types';
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
 
@@ -19,7 +18,4 @@ const ColumnGroupHeader = forwardRef<HTMLDivElement, ColumnGroupHeaderProps>(
 );
 
 ColumnGroupHeader.displayName = 'ColumnGroupHeader';
-ColumnGroupHeader.propTypes = {
-  className: PropTypes.string
-};
 export default ColumnGroupHeader;
diff --git a/packages/react/src/components/TwoColumnPanel/ColumnHeader.tsx b/packages/react/src/components/TwoColumnPanel/ColumnHeader.tsx
index f7a187607..0719b90da 100644
--- a/packages/react/src/components/TwoColumnPanel/ColumnHeader.tsx
+++ b/packages/react/src/components/TwoColumnPanel/ColumnHeader.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 
 type ColumnHeaderProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -19,7 +18,4 @@ const ColumnHeader = forwardRef<HTMLDivElement, ColumnHeaderProps>(
 );
 
 ColumnHeader.displayName = 'ColumnHeader';
-ColumnHeader.propTypes = {
-  className: PropTypes.string
-};
 export default ColumnHeader;
diff --git a/packages/react/src/components/TwoColumnPanel/ColumnList.tsx b/packages/react/src/components/TwoColumnPanel/ColumnList.tsx
index 30a768038..874e3a341 100644
--- a/packages/react/src/components/TwoColumnPanel/ColumnList.tsx
+++ b/packages/react/src/components/TwoColumnPanel/ColumnList.tsx
@@ -1,6 +1,5 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
-import PropTypes from 'prop-types';
 
 type ColumnListProps = React.HTMLAttributes<HTMLDivElement>;
 
@@ -19,7 +18,4 @@ const ColumnList = forwardRef<HTMLDivElement, ColumnListProps>(
 );
 
 ColumnList.displayName = 'ColumnList';
-ColumnList.propTypes = {
-  className: PropTypes.string
-};
 export default ColumnList;
diff --git a/packages/react/src/components/Workspace/index.tsx b/packages/react/src/components/Workspace/index.tsx
index 8789ffa87..3739a9208 100644
--- a/packages/react/src/components/Workspace/index.tsx
+++ b/packages/react/src/components/Workspace/index.tsx
@@ -1,5 +1,4 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import Main from '../Main';
 import Layout from '../Layout';
 
@@ -18,23 +17,6 @@ export default class Workspace extends React.Component<WorkspaceProps> {
     noSideBar: false
   };
 
-  static propTypes = {
-    children: PropTypes.oneOfType([
-      PropTypes.array,
-      PropTypes.object,
-      PropTypes.string
-    ]).isRequired,
-    workspaceRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ]),
-    layoutRef: PropTypes.oneOfType([
-      PropTypes.func,
-      PropTypes.shape({ current: PropTypes.any })
-    ]),
-    noSideBar: PropTypes.bool
-  };
-
   componentDidMount() {
     document.body.classList.toggle('Page--no-sidebar', this.props.noSideBar);
   }
diff --git a/packages/react/src/contexts/theme.tsx b/packages/react/src/contexts/theme.tsx
index 8e3ddbf01..fc1e2c6c7 100644
--- a/packages/react/src/contexts/theme.tsx
+++ b/packages/react/src/contexts/theme.tsx
@@ -1,5 +1,4 @@
 import React, { useState, useEffect, useContext, createContext } from 'react';
-import PropTypes from 'prop-types';
 
 type Theme = 'light' | 'dark';
 
@@ -84,9 +83,4 @@ function useThemeContext() {
   return useContext(ThemeContext);
 }
 
-ThemeProvider.propTypes = {
-  children: PropTypes.any,
-  initialTheme: PropTypes.string
-};
-
 export { ThemeContext, ThemeProvider, useThemeContext };
diff --git a/packages/react/src/propTypes.ts b/packages/react/src/propTypes.ts
deleted file mode 100644
index 633f5eacf..000000000
--- a/packages/react/src/propTypes.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import PropTypes from 'prop-types';
-
-/**
- * This prop type is meant to ensure that a prop can actually be rendered as content.
- * It should match the ContentNode type in types.ts
- */
-export const contentNode = PropTypes.oneOfType([
-  PropTypes.string,
-  PropTypes.number,
-  PropTypes.element
-]);

From 24c88428876fc317726dd735b63e4197bd5ca28b Mon Sep 17 00:00:00 2001
From: Jason <jason@scurker.com>
Date: Tue, 17 Oct 2023 16:54:15 -0500
Subject: [PATCH 2/4] fix a bunch of prop-types warnings

---
 packages/react/src/components/Address/index.tsx  |  4 +++-
 .../src/components/Breadcrumb/BreadcrumbItem.tsx |  4 +++-
 .../react/src/components/Card/CardContent.tsx    |  4 +++-
 .../react/src/components/Card/CardFooter.tsx     |  4 +++-
 packages/react/src/components/Code/index.tsx     |  2 +-
 packages/react/src/components/Dialog/index.tsx   |  4 ++--
 packages/react/src/components/Line/index.tsx     |  6 +++++-
 .../src/components/OptionsMenu/OptionsMenu.tsx   |  1 +
 .../react/src/components/SideBar/SideBarItem.tsx |  3 ++-
 packages/react/src/components/Tooltip/index.tsx  | 16 +++++++++++-----
 .../src/components/TopBar/TopBarTrigger.tsx      |  1 +
 .../TwoColumnPanel/ColumnGroupHeader.tsx         |  4 +++-
 .../components/TwoColumnPanel/ColumnHeader.tsx   |  4 +++-
 .../src/components/TwoColumnPanel/ColumnList.tsx |  4 +++-
 14 files changed, 44 insertions(+), 17 deletions(-)

diff --git a/packages/react/src/components/Address/index.tsx b/packages/react/src/components/Address/index.tsx
index 905e409b4..53f59043a 100644
--- a/packages/react/src/components/Address/index.tsx
+++ b/packages/react/src/components/Address/index.tsx
@@ -13,7 +13,9 @@ export const Address = ({ children, className, ...other }: AddressProps) => (
 
 Address.displayName = 'Address';
 
-type AddressLineProps = React.HTMLAttributes<HTMLElement>;
+type AddressLineProps = React.HTMLAttributes<HTMLElement> & {
+  className?: string;
+};
 
 export const AddressLine = ({
   children,
diff --git a/packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx b/packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx
index 74ad1da64..ab75d9b62 100644
--- a/packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx
+++ b/packages/react/src/components/Breadcrumb/BreadcrumbItem.tsx
@@ -1,7 +1,9 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
 
-type BreadcrumbItemProps = React.HTMLAttributes<HTMLSpanElement>;
+type BreadcrumbItemProps = React.HTMLAttributes<HTMLSpanElement> & {
+  className?: string;
+};
 
 const BreadcrumbItem = forwardRef<HTMLElement, BreadcrumbItemProps>( // eslint-disable-line react/display-name
   ({ className, children, ...props }: BreadcrumbItemProps, ref) => (
diff --git a/packages/react/src/components/Card/CardContent.tsx b/packages/react/src/components/Card/CardContent.tsx
index 9b54bda02..52055d774 100644
--- a/packages/react/src/components/Card/CardContent.tsx
+++ b/packages/react/src/components/Card/CardContent.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
 
-export type CardContentProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardContentProps = React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
 
 const CardContent = ({ className, ...other }: CardContentProps) => (
   <div className={classNames('Card__content', className)} {...other} />
diff --git a/packages/react/src/components/Card/CardFooter.tsx b/packages/react/src/components/Card/CardFooter.tsx
index 56dfa4b9e..c6b43ba7f 100644
--- a/packages/react/src/components/Card/CardFooter.tsx
+++ b/packages/react/src/components/Card/CardFooter.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
 
-export type CardFooterProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardFooterProps = React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
 
 const CardFooter = ({ className, ...other }: CardFooterProps) => (
   <div className={classNames('Card__footer', className)} {...other} />
diff --git a/packages/react/src/components/Code/index.tsx b/packages/react/src/components/Code/index.tsx
index b5974a33b..ffdf7d0bb 100644
--- a/packages/react/src/components/Code/index.tsx
+++ b/packages/react/src/components/Code/index.tsx
@@ -29,7 +29,7 @@ const Code: React.ComponentType<React.PropsWithChildren<Props>> = ({
   className,
   scrollable = false,
   ...props
-}) => {
+}: Props) => {
   const ref = useRef<HTMLPreElement>(null);
   const [scrollableRegion, setScrollableRegion] = useState(false);
   // react-syntax-highlighter does not provide direct access to its dom elements
diff --git a/packages/react/src/components/Dialog/index.tsx b/packages/react/src/components/Dialog/index.tsx
index 47a62efab..936f1b1d8 100644
--- a/packages/react/src/components/Dialog/index.tsx
+++ b/packages/react/src/components/Dialog/index.tsx
@@ -188,7 +188,7 @@ interface DialogAlignmentProps {
 }
 
 export type DialogContentProps = React.HTMLAttributes<HTMLDivElement> &
-  DialogAlignmentProps;
+  DialogAlignmentProps & { className?: string };
 
 const DialogContent = ({
   children,
@@ -210,7 +210,7 @@ const DialogContent = ({
 DialogContent.displayName = 'DialogContent';
 
 export type DialogFooterProps = React.HTMLAttributes<HTMLDivElement> &
-  DialogAlignmentProps;
+  DialogAlignmentProps & { className?: string };
 
 const DialogFooter = ({
   children,
diff --git a/packages/react/src/components/Line/index.tsx b/packages/react/src/components/Line/index.tsx
index 38c5890fe..d1f0a7e5f 100644
--- a/packages/react/src/components/Line/index.tsx
+++ b/packages/react/src/components/Line/index.tsx
@@ -1,7 +1,11 @@
 import React from 'react';
 import classNames from 'classnames';
 
-const Line = ({ className, ...other }: React.HTMLAttributes<HTMLHRElement>) => (
+interface LineProps extends React.HTMLAttributes<HTMLHRElement> {
+  className?: string;
+}
+
+const Line = ({ className, ...other }: LineProps) => (
   <hr className={classNames('Line', className)} {...other} />
 );
 
diff --git a/packages/react/src/components/OptionsMenu/OptionsMenu.tsx b/packages/react/src/components/OptionsMenu/OptionsMenu.tsx
index 948cbc895..6e1459a1b 100644
--- a/packages/react/src/components/OptionsMenu/OptionsMenu.tsx
+++ b/packages/react/src/components/OptionsMenu/OptionsMenu.tsx
@@ -18,6 +18,7 @@ export interface OptionsMenuRenderTriggerProps {
 
 export interface OptionsMenuProps extends OptionsMenuAlignmentProps {
   id?: string;
+  className?: string;
   menuRef?: React.Ref<HTMLUListElement>;
   trigger?: (props: OptionsMenuRenderTriggerProps) => React.ReactNode;
   onClose?: () => void;
diff --git a/packages/react/src/components/SideBar/SideBarItem.tsx b/packages/react/src/components/SideBar/SideBarItem.tsx
index 5eb8517d8..87fa4e8a1 100644
--- a/packages/react/src/components/SideBar/SideBarItem.tsx
+++ b/packages/react/src/components/SideBar/SideBarItem.tsx
@@ -3,12 +3,13 @@ import clickLink from '../MenuItem/click-link';
 
 export interface SideBarItemProps extends React.HTMLAttributes<HTMLLIElement> {
   children: React.ReactNode;
+  className?: string;
   autoClickLink?: boolean;
 }
 
 const SideBarItem: React.ComponentType<
   React.PropsWithChildren<SideBarItemProps>
-> = ({ children, autoClickLink, ...other }) => {
+> = ({ children, autoClickLink, ...other }: SideBarItemProps) => {
   const onClick = (e: React.MouseEvent<HTMLLIElement>) => {
     if (!autoClickLink) {
       return;
diff --git a/packages/react/src/components/Tooltip/index.tsx b/packages/react/src/components/Tooltip/index.tsx
index 38e4d2839..e763906b7 100644
--- a/packages/react/src/components/Tooltip/index.tsx
+++ b/packages/react/src/components/Tooltip/index.tsx
@@ -10,6 +10,7 @@ const TIP_HIDE_DELAY = 100;
 
 export interface TooltipProps extends React.HTMLAttributes<HTMLDivElement> {
   children: React.ReactNode;
+  className?: string;
   target: React.RefObject<HTMLElement> | HTMLElement;
   variant?: 'text' | 'info' | 'big';
   association?: 'aria-labelledby' | 'aria-describedby';
@@ -221,16 +222,21 @@ export default function Tooltip({
 
 Tooltip.displayName = 'Tooltip';
 
-export const TooltipHead = ({
-  className,
-  ...other
-}: React.HTMLAttributes<HTMLDivElement>) => (
+interface TooltipHeadProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
+export const TooltipHead = ({ className, ...other }: TooltipHeadProps) => (
   <div className={classnames('TooltipHead', className)} {...other} />
 );
 
+interface TooltipContentProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+}
+
 export const TooltipContent = ({
   className,
   ...other
-}: React.HTMLAttributes<HTMLDivElement>) => (
+}: TooltipContentProps) => (
   <div className={classnames('TooltipContent', className)} {...other} />
 );
diff --git a/packages/react/src/components/TopBar/TopBarTrigger.tsx b/packages/react/src/components/TopBar/TopBarTrigger.tsx
index fdb9cd6dd..af1447cb7 100644
--- a/packages/react/src/components/TopBar/TopBarTrigger.tsx
+++ b/packages/react/src/components/TopBar/TopBarTrigger.tsx
@@ -4,6 +4,7 @@ import MenuItem from '../MenuItem';
 
 interface TopBarTriggerProps extends React.HTMLAttributes<HTMLLIElement> {
   children: React.ReactNode;
+  className?: string;
 }
 
 const TopBarTrigger: React.ComponentType<
diff --git a/packages/react/src/components/TwoColumnPanel/ColumnGroupHeader.tsx b/packages/react/src/components/TwoColumnPanel/ColumnGroupHeader.tsx
index e2a96df2d..f137c3781 100644
--- a/packages/react/src/components/TwoColumnPanel/ColumnGroupHeader.tsx
+++ b/packages/react/src/components/TwoColumnPanel/ColumnGroupHeader.tsx
@@ -1,7 +1,9 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
 
-type ColumnGroupHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+type ColumnGroupHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
 
 const ColumnGroupHeader = forwardRef<HTMLDivElement, ColumnGroupHeaderProps>(
   ({ className, children, ...props }, ref) => {
diff --git a/packages/react/src/components/TwoColumnPanel/ColumnHeader.tsx b/packages/react/src/components/TwoColumnPanel/ColumnHeader.tsx
index 0719b90da..cb5313799 100644
--- a/packages/react/src/components/TwoColumnPanel/ColumnHeader.tsx
+++ b/packages/react/src/components/TwoColumnPanel/ColumnHeader.tsx
@@ -1,7 +1,9 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
 
-type ColumnHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+type ColumnHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
 
 const ColumnHeader = forwardRef<HTMLDivElement, ColumnHeaderProps>(
   ({ className, children, ...props }, ref) => {
diff --git a/packages/react/src/components/TwoColumnPanel/ColumnList.tsx b/packages/react/src/components/TwoColumnPanel/ColumnList.tsx
index 874e3a341..5c90c1bb0 100644
--- a/packages/react/src/components/TwoColumnPanel/ColumnList.tsx
+++ b/packages/react/src/components/TwoColumnPanel/ColumnList.tsx
@@ -1,7 +1,9 @@
 import React, { forwardRef } from 'react';
 import classnames from 'classnames';
 
-type ColumnListProps = React.HTMLAttributes<HTMLDivElement>;
+type ColumnListProps = React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
 
 const ColumnList = forwardRef<HTMLDivElement, ColumnListProps>(
   ({ className, children, ...props }, ref) => {

From 585a951c3479f15d09076b9af6a06b64f65a22c8 Mon Sep 17 00:00:00 2001
From: Jason <jason@scurker.com>
Date: Tue, 17 Oct 2023 16:58:33 -0500
Subject: [PATCH 3/4] missed a few

---
 packages/react/src/components/Card/CardHeader.tsx      | 4 +++-
 packages/react/src/components/TopBar/TopBarTrigger.tsx | 2 +-
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/components/Card/CardHeader.tsx b/packages/react/src/components/Card/CardHeader.tsx
index d18361635..6c71609e3 100644
--- a/packages/react/src/components/Card/CardHeader.tsx
+++ b/packages/react/src/components/Card/CardHeader.tsx
@@ -1,7 +1,9 @@
 import React from 'react';
 import classNames from 'classnames';
 
-export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+export type CardHeaderProps = React.HTMLAttributes<HTMLDivElement> & {
+  className?: string;
+};
 
 const CardHeader = ({ className, ...other }: CardHeaderProps) => (
   <div className={classNames('Card__header', className)} {...other} />
diff --git a/packages/react/src/components/TopBar/TopBarTrigger.tsx b/packages/react/src/components/TopBar/TopBarTrigger.tsx
index af1447cb7..17ab064bc 100644
--- a/packages/react/src/components/TopBar/TopBarTrigger.tsx
+++ b/packages/react/src/components/TopBar/TopBarTrigger.tsx
@@ -9,7 +9,7 @@ interface TopBarTriggerProps extends React.HTMLAttributes<HTMLLIElement> {
 
 const TopBarTrigger: React.ComponentType<
   React.PropsWithChildren<TopBarTriggerProps>
-> = ({ children, className, ...other }) => (
+> = ({ children, className, ...other }: TopBarTriggerProps) => (
   <MenuItem
     aria-haspopup="true"
     className={classNames('TopBar__menu-trigger', className)}

From 762c64a6302f8e2255700a2196fa4e2d12caf9c2 Mon Sep 17 00:00:00 2001
From: Jason <jason@scurker.com>
Date: Tue, 17 Oct 2023 17:01:46 -0500
Subject: [PATCH 4/4] remove prop-types dependencies

---
 packages/react/package.json | 2 --
 packages/react/yarn.lock    | 4 ++--
 2 files changed, 2 insertions(+), 4 deletions(-)

diff --git a/packages/react/package.json b/packages/react/package.json
index 220d68005..369a9662a 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -28,7 +28,6 @@
     "focus-trap-react": "8",
     "focusable": "^2.3.0",
     "keyname": "^0.1.0",
-    "prop-types": "^15.6.0",
     "react-id-generator": "^3.0.1",
     "react-popper": "^2.2.4",
     "react-syntax-highlighter": "^15.5.0",
@@ -47,7 +46,6 @@
     "@svgr/rollup": "^6.1.2",
     "@types/classnames": "^2.2.10",
     "@types/node": "^17.0.42",
-    "@types/prop-types": "^15.7.3",
     "@types/react": "^18.0.12",
     "@types/react-dom": "^18.0.5",
     "@types/react-syntax-highlighter": "^15.5.2",
diff --git a/packages/react/yarn.lock b/packages/react/yarn.lock
index 34e53cea6..ed00ea4dc 100644
--- a/packages/react/yarn.lock
+++ b/packages/react/yarn.lock
@@ -1718,7 +1718,7 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0"
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
-"@types/prop-types@*", "@types/prop-types@^15.7.3":
+"@types/prop-types@*":
   version "15.7.5"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
   integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
@@ -6018,7 +6018,7 @@ prop-types-exact@^1.2.0:
     object.assign "^4.1.0"
     reflect.ownkeys "^0.2.0"
 
-prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==