diff --git a/.gitattributes b/.gitattributes
index 0dd26ee2c3..31d27a0985 100644
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,4 +1,4 @@
 amd/* linguist-generated=true
-es/* linguist-generated=true
+es/**/* linguist-generated=true
 dist/* linguist-generated=true
-lib/* linguist-generated=true
+lib/**/* linguist-generated=true
diff --git a/karma.conf.js b/karma.conf.js
index f26089096a..65b9cbf1ad 100644
--- a/karma.conf.js
+++ b/karma.conf.js
@@ -68,7 +68,7 @@ module.exports = config => {
       }
     },
 
-    browsers: env.BROWSER ? env.BROWSER.split(',') : ['Chrome'],
+    browsers: env.BROWSER ? env.BROWSER.split(',') : ['ChromeHeadless'],
 
     singleRun: env.CONTINUOUS_INTEGRATION === 'true'
   });
diff --git a/package.json b/package.json
index c2dc55bad4..0ff24ea394 100644
--- a/package.json
+++ b/package.json
@@ -67,7 +67,6 @@
     "@babel/preset-env": "^7.0.0",
     "@babel/preset-react": "^7.0.0",
     "@babel/register": "^7.0.0",
-    "@cfaester/enzyme-adapter-react-18": "^0.8.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^14.6.1",
@@ -82,7 +81,6 @@
     "colors": "^1.2.1",
     "create-react-class": "^15.6.3",
     "cross-env": "^5.2.0",
-    "enzyme": "^3.1.0",
     "eslint": "^4.19.1",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
@@ -110,9 +108,9 @@
     "mocha": "^5.2.0",
     "patch-package": "^8.0.0",
     "prettier": "^1.12.1",
-    "react": "^18.3.1",
-    "react-dom": "^18.3.1",
-    "react-test-renderer": "^18.3.1",
+    "react": "19.2.7",
+    "react-dom": "19.2.7",
+    "react-test-renderer": "19.2.7",
     "release-script": "^1.0.2",
     "sinon": "^2.3.2",
     "sinon-chai": "^2.8.0",
@@ -126,9 +124,9 @@
     "keycode": "^2.2.0",
     "prop-types": "^15.6.1",
     "prop-types-extra": "^1.0.1",
-    "react-overlays": "^0.9.3",
+    "react-overlays": "^5.2.0",
     "react-prop-types": "^0.4.0",
-    "react-transition-group": "^2.0.0",
+    "react-transition-group": "^4.4.0",
     "uncontrollable": "^5.0.0",
     "warning": "^3.0.0"
   },
diff --git a/patches/react-overlays+0.9.3.patch b/patches/react-overlays+0.9.3.patch
deleted file mode 100644
index 5539968862..0000000000
--- a/patches/react-overlays+0.9.3.patch
+++ /dev/null
@@ -1,35 +0,0 @@
-diff --git a/node_modules/react-overlays/lib/Modal.js b/node_modules/react-overlays/lib/Modal.js
-index 9fbba3b..c876341 100644
---- a/node_modules/react-overlays/lib/Modal.js
-+++ b/node_modules/react-overlays/lib/Modal.js
-@@ -576,7 +576,7 @@ var _initialiseProps = function _initialiseProps() {
-   };
- 
-   this.handleDocumentKeyDown = function (e) {
--    if (_this2.props.keyboard && e.keyCode === 27 && _this2.isTopModal()) {
-+    if (_this2.props.keyboard && (e.keyCode === 27 || e.key === 'Escape') && _this2.isTopModal()) {
-       if (_this2.props.onEscapeKeyDown) {
-         _this2.props.onEscapeKeyDown(e);
-       }
-@@ -586,7 +586,7 @@ var _initialiseProps = function _initialiseProps() {
-   };
- 
-   this.handleDocumentKeyUp = function (e) {
--    if (_this2.props.keyboard && e.keyCode === 27 && _this2.isTopModal()) {
-+    if (_this2.props.keyboard && (e.keyCode === 27 || e.key === 'Escape') && _this2.isTopModal()) {
-       if (_this2.props.onEscapeKeyUp) {
-         _this2.props.onEscapeKeyUp(e);
-       }
-diff --git a/node_modules/react-overlays/lib/RootCloseWrapper.js b/node_modules/react-overlays/lib/RootCloseWrapper.js
-index 683e1cf..c561092 100644
---- a/node_modules/react-overlays/lib/RootCloseWrapper.js
-+++ b/node_modules/react-overlays/lib/RootCloseWrapper.js
-@@ -115,7 +115,7 @@ var RootCloseWrapper = function (_React$Component) {
-         return;
-       }
- 
--      if (e.keyCode === escapeKeyCode && _this.props.onRootClose) {
-+      if ((e.keyCode === escapeKeyCode || e.key === 'Escape') && _this.props.onRootClose) {
-         _this.props.onRootClose(e);
-       }
-     };
diff --git a/patches/react-overlays+5.2.1.patch b/patches/react-overlays+5.2.1.patch
new file mode 100644
index 0000000000..3789e904b2
--- /dev/null
+++ b/patches/react-overlays+5.2.1.patch
@@ -0,0 +1,52 @@
+diff --git a/node_modules/react-overlays/cjs/Modal.js b/node_modules/react-overlays/cjs/Modal.js
+index 2247ad0..71c9f4a 100644
+--- a/node_modules/react-overlays/cjs/Modal.js
++++ b/node_modules/react-overlays/cjs/Modal.js
+@@ -215,7 +215,7 @@ var Modal = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+     }
+   });
+   var handleDocumentKeyDown = (0, _useEventCallback["default"])(function (e) {
+-    if (keyboard && e.keyCode === 27 && modal.isTopModal()) {
++    if (keyboard && (e.keyCode === 27 || e.key === 'Escape') && modal.isTopModal()) {
+       onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(e);
+ 
+       if (!e.defaultPrevented) {
+diff --git a/node_modules/react-overlays/cjs/useRootClose.js b/node_modules/react-overlays/cjs/useRootClose.js
+index 3fc40a7..cc16674 100644
+--- a/node_modules/react-overlays/cjs/useRootClose.js
++++ b/node_modules/react-overlays/cjs/useRootClose.js
+@@ -66,7 +66,7 @@ function useRootClose(ref, onRootClose, _temp) {
+     }
+   });
+   var handleKeyUp = (0, _useEventCallback["default"])(function (e) {
+-    if (e.keyCode === escapeKeyCode) {
++    if (e.keyCode === escapeKeyCode || e.key === 'Escape') {
+       onClose(e);
+     }
+   });
+diff --git a/node_modules/react-overlays/esm/Modal.js b/node_modules/react-overlays/esm/Modal.js
+index 42f79e4..a12ebac 100644
+--- a/node_modules/react-overlays/esm/Modal.js
++++ b/node_modules/react-overlays/esm/Modal.js
+@@ -193,7 +193,7 @@ var Modal = /*#__PURE__*/forwardRef(function (_ref, ref) {
+     }
+   });
+   var handleDocumentKeyDown = useEventCallback(function (e) {
+-    if (keyboard && e.keyCode === 27 && modal.isTopModal()) {
++    if (keyboard && (e.keyCode === 27 || e.key === 'Escape') && modal.isTopModal()) {
+       onEscapeKeyDown == null ? void 0 : onEscapeKeyDown(e);
+ 
+       if (!e.defaultPrevented) {
+diff --git a/node_modules/react-overlays/esm/useRootClose.js b/node_modules/react-overlays/esm/useRootClose.js
+index 8c7882c..30d0d56 100644
+--- a/node_modules/react-overlays/esm/useRootClose.js
++++ b/node_modules/react-overlays/esm/useRootClose.js
+@@ -53,7 +53,7 @@ function useRootClose(ref, onRootClose, _temp) {
+     }
+   });
+   var handleKeyUp = useEventCallback(function (e) {
+-    if (e.keyCode === escapeKeyCode) {
++    if (e.keyCode === escapeKeyCode || e.key === 'Escape') {
+       onClose(e);
+     }
+   });
diff --git a/src/ButtonGroup.js b/src/ButtonGroup.js
index 1ea2a68845..84229f5b17 100644
--- a/src/ButtonGroup.js
+++ b/src/ButtonGroup.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import all from 'prop-types-extra/lib/all';
+import warning from 'warning';
 
 import Button from './Button';
 import {
@@ -19,13 +19,7 @@ const propTypes = {
    * Display block buttons; only useful when used with the "vertical" prop.
    * @type {bool}
    */
-  block: all(
-    PropTypes.bool,
-    ({ block, vertical }) =>
-      block && !vertical
-        ? new Error('`block` requires `vertical` to be set to have any effect')
-        : null
-  )
+  block: PropTypes.bool
 };
 
 const defaultProps = {
@@ -39,6 +33,11 @@ class ButtonGroup extends React.Component {
     const { block, justified, vertical, className, ...props } = this.props;
     const [bsProps, elementProps] = splitBsProps(props);
 
+    warning(
+      !(block && !vertical),
+      '`block` requires `vertical` to be set to have any effect'
+    );
+
     const classes = {
       ...getClassSet(bsProps),
       [prefix(bsProps)]: !vertical,
diff --git a/src/CarouselItem.js b/src/CarouselItem.js
index 4c7d0eeda1..e4a11abbf8 100644
--- a/src/CarouselItem.js
+++ b/src/CarouselItem.js
@@ -1,7 +1,6 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
 import transition from 'dom-helpers/transition';
 
 const propTypes = {
@@ -29,6 +28,7 @@ class CarouselItem extends React.Component {
       direction: null
     };
 
+    this.containerRef = React.createRef();
     this.isUnmounted = false;
   }
 
@@ -43,7 +43,7 @@ class CarouselItem extends React.Component {
     const prevActive = prevProps.active;
 
     if (!active && prevActive) {
-      transition.end(ReactDOM.findDOMNode(this), this.handleAnimateOutEnd);
+      transition.end(this.containerRef.current, this.handleAnimateOutEnd);
     }
 
     if (active !== prevActive) {
@@ -99,7 +99,13 @@ class CarouselItem extends React.Component {
       classes[this.state.direction] = true;
     }
 
-    return <div {...props} className={classNames(className, classes)} />;
+    return (
+      <div
+        ref={this.containerRef}
+        {...props}
+        className={classNames(className, classes)}
+      />
+    );
   }
 }
 
diff --git a/src/Collapse.js b/src/Collapse.js
index 6d181aeec0..affcc4530b 100644
--- a/src/Collapse.js
+++ b/src/Collapse.js
@@ -11,6 +11,7 @@ import Transition, {
 
 import capitalize from './utils/capitalize';
 import createChainedFunction from './utils/createChainedFunction';
+import { getElementRef, makeMergedRef } from './utils/mergeRefs';
 
 const MARGINS = {
   height: ['marginTop', 'marginBottom'],
@@ -134,6 +135,12 @@ const defaultProps = {
 };
 
 class Collapse extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.childRef = React.createRef();
+  }
+
   getDimension() {
     return typeof this.props.dimension === 'function'
       ? this.props.dimension()
@@ -146,31 +153,34 @@ class Collapse extends React.Component {
   }
 
   /* -- Expanding -- */
-  handleEnter = elem => {
-    elem.style[this.getDimension()] = '0';
+  handleEnter = () => {
+    this.childRef.current.style[this.getDimension()] = '0';
   };
 
-  handleEntering = elem => {
+  handleEntering = () => {
     const dimension = this.getDimension();
-    elem.style[dimension] = this._getScrollDimensionValue(elem, dimension);
+    this.childRef.current.style[dimension] = this._getScrollDimensionValue(
+      this.childRef.current,
+      dimension
+    );
   };
 
-  handleEntered = elem => {
-    elem.style[this.getDimension()] = null;
+  handleEntered = () => {
+    this.childRef.current.style[this.getDimension()] = null;
   };
 
   /* -- Collapsing -- */
-  handleExit = elem => {
+  handleExit = () => {
     const dimension = this.getDimension();
-    elem.style[dimension] = `${this.props.getDimensionValue(
+    this.childRef.current.style[dimension] = `${this.props.getDimensionValue(
       dimension,
-      elem
+      this.childRef.current
     )}px`;
-    triggerBrowserReflow(elem);
+    triggerBrowserReflow(this.childRef.current);
   };
 
-  handleExiting = elem => {
-    elem.style[this.getDimension()] = '0';
+  handleExiting = () => {
+    this.childRef.current.style[this.getDimension()] = '0';
   };
 
   render() {
@@ -197,10 +207,13 @@ class Collapse extends React.Component {
     const handleExit = createChainedFunction(this.handleExit, onExit);
     const handleExiting = createChainedFunction(this.handleExiting, onExiting);
 
+    const ref = makeMergedRef([this.childRef, getElementRef(children)]);
+
     return (
       <Transition
         {...props}
         aria-expanded={props.role ? props.in : null}
+        nodeRef={this.childRef}
         onEnter={handleEnter}
         onEntering={handleEntering}
         onEntered={handleEntered}
@@ -210,6 +223,7 @@ class Collapse extends React.Component {
         {(state, innerProps) =>
           React.cloneElement(children, {
             ...innerProps,
+            ref,
             className: classNames(
               className,
               children.props.className,
diff --git a/src/ControlLabel.js b/src/ControlLabel.js
index 497e51d130..b833daa8dc 100644
--- a/src/ControlLabel.js
+++ b/src/ControlLabel.js
@@ -3,6 +3,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import warning from 'warning';
 
+import FormGroupContext from './FormGroupContext';
 import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
 
 const propTypes = {
@@ -17,13 +18,9 @@ const defaultProps = {
   srOnly: false
 };
 
-const contextTypes = {
-  $bs_formGroup: PropTypes.object
-};
-
 class ControlLabel extends React.Component {
   render() {
-    const formGroup = this.context.$bs_formGroup;
+    const formGroup = this.context;
     const controlId = formGroup && formGroup.controlId;
 
     const { htmlFor = controlId, srOnly, className, ...props } = this.props;
@@ -51,6 +48,6 @@ class ControlLabel extends React.Component {
 
 ControlLabel.propTypes = propTypes;
 ControlLabel.defaultProps = defaultProps;
-ControlLabel.contextTypes = contextTypes;
+ControlLabel.contextType = FormGroupContext;
 
 export default bsClass('control-label', ControlLabel);
diff --git a/src/Dropdown.js b/src/Dropdown.js
index 1fd68d3c4a..7bf64ad97d 100644
--- a/src/Dropdown.js
+++ b/src/Dropdown.js
@@ -3,19 +3,19 @@ import activeElement from 'dom-helpers/activeElement';
 import contains from 'dom-helpers/query/contains';
 import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import all from 'prop-types-extra/lib/all';
 import elementType from 'prop-types-extra/lib/elementType';
 import isRequiredForA11y from 'prop-types-extra/lib/isRequiredForA11y';
 import uncontrollable from 'uncontrollable';
+import warning from 'warning';
 
 import ButtonGroup from './ButtonGroup';
 import DropdownMenu from './DropdownMenu';
 import DropdownToggle from './DropdownToggle';
 import { bsClass as setBsClass, prefix } from './utils/bootstrapUtils';
 import createChainedFunction from './utils/createChainedFunction';
-import { exclusiveRoles, requiredRoles } from './utils/PropTypes';
+import { getDuplicateRoleError, getMissingRoleError } from './utils/PropTypes';
 import ValidComponentChildren from './utils/ValidComponentChildren';
+import { getElementRef, makeMergedRef } from './utils/mergeRefs';
 
 const TOGGLE_ROLE = DropdownToggle.defaultProps.bsRole;
 const MENU_ROLE = DropdownMenu.defaultProps.bsRole;
@@ -41,10 +41,7 @@ const propTypes = {
    * The children of a Dropdown may be a `<Dropdown.Toggle>` or a `<Dropdown.Menu>`.
    * @type {node}
    */
-  children: all(
-    requiredRoles(TOGGLE_ROLE, MENU_ROLE),
-    exclusiveRoles(MENU_ROLE)
-  ),
+  children: PropTypes.node,
 
   /**
    * Whether or not component is disabled.
@@ -123,6 +120,7 @@ class Dropdown extends React.Component {
     this.handleClose = this.handleClose.bind(this);
 
     this._focusInDropdown = false;
+    this.containerRef = React.createRef();
     this.lastOpenEventType = null;
   }
 
@@ -133,7 +131,7 @@ class Dropdown extends React.Component {
   UNSAFE_componentWillUpdate(nextProps) {
     if (!nextProps.open && this.props.open) {
       this._focusInDropdown = contains(
-        ReactDOM.findDOMNode(this.menu),
+        this.containerRef.current.querySelector('[role=menu]'),
         activeElement(document)
       );
     }
@@ -158,7 +156,9 @@ class Dropdown extends React.Component {
   }
 
   focus() {
-    const toggle = ReactDOM.findDOMNode(this.toggle);
+    const toggle = this.containerRef.current.querySelector(
+      '[role=button][aria-haspopup]'
+    );
 
     if (toggle && toggle.focus) {
       toggle.focus();
@@ -237,11 +237,12 @@ class Dropdown extends React.Component {
   }
 
   renderMenu(child, { id, onSelect, rootCloseEvent, ...props }) {
-    let ref = c => {
-      this.menu = c;
-    };
-
-    ref = createChainedFunction(child.ref, ref);
+    const ref = makeMergedRef([
+      el => {
+        this.menu = el;
+      },
+      getElementRef(child)
+    ]);
 
     return cloneElement(child, {
       ...props,
@@ -259,15 +260,8 @@ class Dropdown extends React.Component {
   }
 
   renderToggle(child, props) {
-    let ref = c => {
-      this.toggle = c;
-    };
-
-    ref = createChainedFunction(child.ref, ref);
-
     return cloneElement(child, {
       ...props,
-      ref,
       bsClass: prefix(props, 'toggle'),
       onClick: createChainedFunction(child.props.onClick, this.handleClick),
       onKeyDown: createChainedFunction(
@@ -296,6 +290,25 @@ class Dropdown extends React.Component {
 
     delete props.onToggle;
 
+    const missingRoleError = getMissingRoleError(
+      'Dropdown',
+      children,
+      TOGGLE_ROLE,
+      MENU_ROLE
+    );
+    if (missingRoleError) {
+      warning(false, missingRoleError);
+    }
+
+    const duplicateRoleError = getDuplicateRoleError(
+      'Dropdown',
+      children,
+      MENU_ROLE
+    );
+    if (duplicateRoleError) {
+      warning(false, duplicateRoleError);
+    }
+
     const classes = {
       [bsClass]: true,
       open,
@@ -311,31 +324,33 @@ class Dropdown extends React.Component {
     // underlying component, to allow it to render size and style variants.
 
     return (
-      <Component {...props} className={classNames(className, classes)}>
-        {ValidComponentChildren.map(children, child => {
-          switch (child.props.bsRole) {
-            case TOGGLE_ROLE:
-              return this.renderToggle(child, {
-                id,
-                disabled,
-                open,
-                role,
-                bsClass
-              });
-            case MENU_ROLE:
-              return this.renderMenu(child, {
-                id,
-                open,
-                pullRight,
-                bsClass,
-                onSelect,
-                rootCloseEvent
-              });
-            default:
-              return child;
-          }
-        })}
-      </Component>
+      <div ref={this.containerRef} style={{ display: 'contents' }}>
+        <Component {...props} className={classNames(className, classes)}>
+          {ValidComponentChildren.map(children, child => {
+            switch (child.props.bsRole) {
+              case TOGGLE_ROLE:
+                return this.renderToggle(child, {
+                  id,
+                  disabled,
+                  open,
+                  role,
+                  bsClass
+                });
+              case MENU_ROLE:
+                return this.renderMenu(child, {
+                  id,
+                  open,
+                  pullRight,
+                  bsClass,
+                  onSelect,
+                  rootCloseEvent
+                });
+              default:
+                return child;
+            }
+          })}
+        </Component>
+      </div>
     );
   }
 }
diff --git a/src/DropdownMenu.js b/src/DropdownMenu.js
index 8d4d9fad87..7beaeba0c6 100644
--- a/src/DropdownMenu.js
+++ b/src/DropdownMenu.js
@@ -1,8 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import RootCloseWrapper from 'react-overlays/lib/RootCloseWrapper';
+import { useRootClose } from 'react-overlays';
 
 import {
   bsClass,
@@ -33,10 +32,12 @@ class DropdownMenu extends React.Component {
 
     this.handleRootClose = this.handleRootClose.bind(this);
     this.handleKeyDown = this.handleKeyDown.bind(this);
+
+    this.menuRef = React.createRef();
   }
 
   getFocusableMenuItems() {
-    const node = ReactDOM.findDOMNode(this);
+    const node = this.menuRef.current;
     if (!node) {
       return [];
     }
@@ -117,8 +118,10 @@ class DropdownMenu extends React.Component {
         disabled={!open}
         onRootClose={this.handleRootClose}
         event={rootCloseEvent}
+        menuRef={this.menuRef}
       >
         <ul
+          ref={this.menuRef}
           {...elementProps}
           role="menu"
           className={classNames(className, classes)}
@@ -139,6 +142,19 @@ class DropdownMenu extends React.Component {
   }
 }
 
+function RootCloseWrapper({
+  disabled,
+  onRootClose,
+  event,
+
+  children,
+  menuRef
+}) {
+  useRootClose(menuRef, onRootClose, { disabled, clickTrigger: event });
+
+  return children;
+}
+
 DropdownMenu.propTypes = propTypes;
 DropdownMenu.defaultProps = defaultProps;
 
diff --git a/src/Fade.js b/src/Fade.js
index c9f1d8f336..b64fc118fc 100644
--- a/src/Fade.js
+++ b/src/Fade.js
@@ -5,6 +5,7 @@ import Transition, {
   ENTERED,
   ENTERING
 } from 'react-transition-group/Transition';
+import { getElementRef, useMergedRef } from './utils/mergeRefs';
 
 const propTypes = {
   /**
@@ -61,28 +62,43 @@ const propTypes = {
   onExited: PropTypes.func
 };
 
-const defaultProps = {
-  in: false,
-  timeout: 300,
-  mountOnEnter: false,
-  unmountOnExit: false,
-  appear: false
-};
-
 const fadeStyles = {
   [ENTERING]: 'in',
   [ENTERED]: 'in'
 };
 
-class Fade extends React.Component {
-  render() {
-    const { className, children, ...props } = this.props;
+const Fade = React.forwardRef(
+  (
+    {
+      className,
+      children,
+      in: inProp = false,
+      timeout = 300,
+      mountOnEnter = false,
+      unmountOnExit = false,
+      appear = false,
+      ...props
+    },
+    ref
+  ) => {
+    const childRef = React.useRef(null);
+
+    const setChildRef = useMergedRef([childRef, getElementRef(children), ref]);
 
     return (
-      <Transition {...props}>
+      <Transition
+        {...props}
+        in={inProp}
+        timeout={timeout}
+        mountOnEnter={mountOnEnter}
+        unmountOnExit={unmountOnExit}
+        appear={appear}
+        nodeRef={childRef}
+      >
         {(status, innerProps) =>
           React.cloneElement(children, {
             ...innerProps,
+            ref: setChildRef,
             className: classNames(
               'fade',
               className,
@@ -94,9 +110,9 @@ class Fade extends React.Component {
       </Transition>
     );
   }
-}
+);
 
+Fade.displayName = 'Fade';
 Fade.propTypes = propTypes;
-Fade.defaultProps = defaultProps;
 
 export default Fade;
diff --git a/src/FormControl.js b/src/FormControl.js
index 9b5aa7a47a..be7961cecf 100644
--- a/src/FormControl.js
+++ b/src/FormControl.js
@@ -6,6 +6,7 @@ import warning from 'warning';
 
 import FormControlFeedback from './FormControlFeedback';
 import FormControlStatic from './FormControlStatic';
+import FormGroupContext from './FormGroupContext';
 import {
   prefix,
   bsClass,
@@ -39,13 +40,9 @@ const defaultProps = {
   componentClass: 'input'
 };
 
-const contextTypes = {
-  $bs_formGroup: PropTypes.object
-};
-
 class FormControl extends React.Component {
   render() {
-    const formGroup = this.context.$bs_formGroup;
+    const formGroup = this.context;
     const controlId = formGroup && formGroup.controlId;
 
     const {
@@ -92,7 +89,7 @@ class FormControl extends React.Component {
 
 FormControl.propTypes = propTypes;
 FormControl.defaultProps = defaultProps;
-FormControl.contextTypes = contextTypes;
+FormControl.contextType = FormGroupContext;
 
 FormControl.Feedback = FormControlFeedback;
 FormControl.Static = FormControlStatic;
diff --git a/src/FormControlFeedback.js b/src/FormControlFeedback.js
index 0f95fc09c9..f2b7d6525d 100644
--- a/src/FormControlFeedback.js
+++ b/src/FormControlFeedback.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import FormGroupContext from './FormGroupContext';
 import Glyphicon from './Glyphicon';
 import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
 
@@ -9,10 +9,6 @@ const defaultProps = {
   bsRole: 'feedback'
 };
 
-const contextTypes = {
-  $bs_formGroup: PropTypes.object
-};
-
 class FormControlFeedback extends React.Component {
   getGlyph(validationState) {
     switch (validationState) {
@@ -50,7 +46,7 @@ class FormControlFeedback extends React.Component {
 
     if (!children) {
       return this.renderDefaultFeedback(
-        this.context.$bs_formGroup,
+        this.context,
         className,
         classes,
         elementProps
@@ -66,6 +62,6 @@ class FormControlFeedback extends React.Component {
 }
 
 FormControlFeedback.defaultProps = defaultProps;
-FormControlFeedback.contextTypes = contextTypes;
+FormControlFeedback.contextType = FormGroupContext;
 
 export default bsClass('form-control-feedback', FormControlFeedback);
diff --git a/src/FormGroup.js b/src/FormGroup.js
index 6ba68e7389..6bfd3da2bc 100644
--- a/src/FormGroup.js
+++ b/src/FormGroup.js
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import FormGroupContext from './FormGroupContext';
 import {
   bsClass,
   bsSizes,
@@ -19,22 +20,7 @@ const propTypes = {
   validationState: PropTypes.oneOf(['success', 'warning', 'error', null])
 };
 
-const childContextTypes = {
-  $bs_formGroup: PropTypes.object.isRequired
-};
-
 class FormGroup extends React.Component {
-  getChildContext() {
-    const { controlId, validationState } = this.props;
-
-    return {
-      $bs_formGroup: {
-        controlId,
-        validationState
-      }
-    };
-  }
-
   hasFeedback(children) {
     return ValidComponentChildren.some(
       children,
@@ -57,15 +43,18 @@ class FormGroup extends React.Component {
     }
 
     return (
-      <div {...elementProps} className={classNames(className, classes)}>
-        {children}
-      </div>
+      <FormGroupContext.Provider
+        value={{ controlId: this.props.controlId, validationState }}
+      >
+        <div {...elementProps} className={classNames(className, classes)}>
+          {children}
+        </div>
+      </FormGroupContext.Provider>
     );
   }
 }
 
 FormGroup.propTypes = propTypes;
-FormGroup.childContextTypes = childContextTypes;
 
 export default bsClass(
   'form-group',
diff --git a/src/FormGroupContext.js b/src/FormGroupContext.js
new file mode 100644
index 0000000000..4919156ce4
--- /dev/null
+++ b/src/FormGroupContext.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+const FormGroupContext = React.createContext(undefined);
+FormGroupContext.displayName = 'FormGroupContext';
+
+export default FormGroupContext;
diff --git a/src/MenuItem.js b/src/MenuItem.js
index 9805bda8ae..2e24b82e3d 100644
--- a/src/MenuItem.js
+++ b/src/MenuItem.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
-import all from 'prop-types-extra/lib/all';
+import warning from 'warning';
 
 import SafeAnchor from './SafeAnchor';
 import { bsClass, prefix, splitBsPropsAndOmit } from './utils/bootstrapUtils';
@@ -22,13 +22,7 @@ const propTypes = {
    * Styles the menu item as a horizontal rule, providing visual separation between
    * groups of menu items.
    */
-  divider: all(
-    PropTypes.bool,
-    ({ divider, children }) =>
-      divider && children
-        ? new Error('Children will not be rendered for dividers')
-        : null
-  ),
+  divider: PropTypes.bool,
 
   /**
    * Value passed to the `onSelect` handler, useful for identifying the selected menu item.
@@ -101,6 +95,11 @@ class MenuItem extends React.Component {
       ...props
     } = this.props;
 
+    warning(
+      !(divider && props.children),
+      'Children will not be rendered for dividers'
+    );
+
     const [bsProps, elementProps] = splitBsPropsAndOmit(props, [
       'eventKey',
       'onSelect'
diff --git a/src/Modal.js b/src/Modal.js
index f0b46d6929..38cf2bbb22 100644
--- a/src/Modal.js
+++ b/src/Modal.js
@@ -5,13 +5,13 @@ import canUseDOM from 'dom-helpers/util/inDOM';
 import getScrollbarSize from 'dom-helpers/util/scrollbarSize';
 import React from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import BaseModal from 'react-overlays/lib/Modal';
-import isOverflowing from 'react-overlays/lib/utils/isOverflowing';
+import isOverflowing from 'react-overlays/isOverflowing';
+import BaseModal from 'react-overlays/Modal';
 import elementType from 'prop-types-extra/lib/elementType';
 
 import Fade from './Fade';
 import Body from './ModalBody';
+import ModalContext from './ModalContext';
 import ModalDialog from './ModalDialog';
 import Footer from './ModalFooter';
 import Header from './ModalHeader';
@@ -37,6 +37,11 @@ const propTypes = {
    */
   backdropClassName: PropTypes.string,
 
+  /**
+   * Add optional styles to .modal-backdrop
+   */
+  backdropStyle: PropTypes.object,
+
   /**
    * Close the modal when escape key is pressed
    */
@@ -114,34 +119,34 @@ const propTypes = {
   /**
    * Callback fired after the Modal finishes transitioning out
    */
-  onExited: PropTypes.func,
-
-  /**
-   * @private
-   */
-  container: BaseModal.propTypes.container
+  onExited: PropTypes.func
 };
 
 const defaultProps = {
-  ...BaseModal.defaultProps,
+  show: false,
+  backdrop: true,
+  keyboard: true,
+  autoFocus: true,
+  enforceFocus: true,
+  restoreFocus: true,
+  onHide: function onHide() {},
+  renderBackdrop: function renderBackdrop(props) {
+    return <div {...props} />;
+  },
   animation: true,
   dialogComponentClass: ModalDialog
 };
 
-const childContextTypes = {
-  $bs_modal: PropTypes.shape({
-    onHide: PropTypes.func
-  })
-};
-
 /* eslint-disable no-use-before-define, react/no-multi-comp */
-function DialogTransition(props) {
-  return <Fade {...props} timeout={Modal.TRANSITION_DURATION} />;
-}
+const DialogTransition = React.forwardRef((props, ref) => (
+  <Fade ref={ref} {...props} timeout={Modal.TRANSITION_DURATION} />
+));
+DialogTransition.displayName = 'DialogTransition';
 
-function BackdropTransition(props) {
-  return <Fade {...props} timeout={Modal.BACKDROP_TRANSITION_DURATION} />;
-}
+const BackdropTransition = React.forwardRef((props, ref) => (
+  <Fade ref={ref} {...props} timeout={Modal.BACKDROP_TRANSITION_DURATION} />
+));
+BackdropTransition.displayName = 'BackdropTransition';
 
 /* eslint-enable no-use-before-define */
 
@@ -160,14 +165,6 @@ class Modal extends React.Component {
     };
   }
 
-  getChildContext() {
-    return {
-      $bs_modal: {
-        onHide: this.props.onHide
-      }
-    };
-  }
-
   componentWillUnmount() {
     // Clean up the listener if we need to.
     this.handleExited();
@@ -213,13 +210,11 @@ class Modal extends React.Component {
       return;
     }
 
-    const dialogNode = this._modal.getDialogElement();
+    const dialogNode = this._modal.dialog;
     const dialogHeight = dialogNode.scrollHeight;
 
     const document = ownerDocument(dialogNode);
-    const bodyIsOverflowing = isOverflowing(
-      ReactDOM.findDOMNode(this.props.container || document.body)
-    );
+    const bodyIsOverflowing = isOverflowing(document.body);
     const modalIsOverflowing =
       dialogHeight > document.documentElement.clientHeight;
 
@@ -241,6 +236,7 @@ class Modal extends React.Component {
     const {
       backdrop,
       backdropClassName,
+      backdropStyle,
       animation,
       show,
       dialogComponentClass: Dialog,
@@ -257,39 +253,55 @@ class Modal extends React.Component {
     const inClassName = show && !animation && 'in';
 
     return (
-      <BaseModal
-        {...baseModalProps}
-        ref={this.setModalRef}
-        show={show}
-        containerClassName={prefix(props, 'open')}
-        transition={animation ? DialogTransition : undefined}
-        backdrop={backdrop}
-        backdropTransition={animation ? BackdropTransition : undefined}
-        backdropClassName={classNames(
-          prefix(props, 'backdrop'),
-          backdropClassName,
-          inClassName
-        )}
-        onEntering={createChainedFunction(onEntering, this.handleEntering)}
-        onExited={createChainedFunction(onExited, this.handleExited)}
-      >
-        <Dialog
-          {...dialogProps}
-          style={{ ...this.state.style, ...style }}
-          className={classNames(className, inClassName)}
-          onClick={backdrop === true ? this.handleDialogClick : null}
-          handleDialogMouseDown={this.handleDialogMouseDown}
-        >
-          {children}
-        </Dialog>
-      </BaseModal>
+      <ModalContext.Provider value={{ onHide: this.props.onHide }}>
+        <BaseModal
+          {...baseModalProps}
+          ref={this.setModalRef}
+          show={show}
+          containerClassName={prefix(props, 'open')}
+          transition={animation ? DialogTransition : undefined}
+          backdrop={backdrop}
+          backdropTransition={animation ? BackdropTransition : undefined}
+          renderBackdrop={backdropProps => (
+            <div
+              {...backdropProps}
+              className={classNames(
+                prefix(props, 'backdrop'),
+                backdropClassName,
+                inClassName
+              )}
+              style={{
+                ...backdropProps.style,
+                ...backdropStyle
+              }}
+            />
+          )}
+          renderDialog={renderProps => (
+            <Dialog
+              {...dialogProps}
+              {...renderProps}
+              style={{ ...renderProps.style, ...this.state.style, ...style }}
+              className={classNames(
+                renderProps.className,
+                className,
+                inClassName
+              )}
+              onClick={backdrop === true ? this.handleDialogClick : null}
+              handleDialogMouseDown={this.handleDialogMouseDown}
+            >
+              {children}
+            </Dialog>
+          )}
+          onEntering={createChainedFunction(onEntering, this.handleEntering)}
+          onExited={createChainedFunction(onExited, this.handleExited)}
+        />
+      </ModalContext.Provider>
     );
   }
 }
 
 Modal.propTypes = propTypes;
 Modal.defaultProps = defaultProps;
-Modal.childContextTypes = childContextTypes;
 
 Modal.Body = Body;
 Modal.Header = Header;
diff --git a/src/ModalContext.js b/src/ModalContext.js
new file mode 100644
index 0000000000..d2a581ae9f
--- /dev/null
+++ b/src/ModalContext.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+const ModalContext = React.createContext(undefined);
+ModalContext.displayName = 'ModalContext';
+
+export default ModalContext;
diff --git a/src/ModalDialog.js b/src/ModalDialog.js
index 34b0b5a5a3..c8306ebe16 100644
--- a/src/ModalDialog.js
+++ b/src/ModalDialog.js
@@ -2,15 +2,11 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
-import {
-  bsClass,
-  bsSizes,
-  getClassSet,
-  prefix,
-  splitBsProps
-} from './utils/bootstrapUtils';
+import { getClassSet, prefix, splitBsProps } from './utils/bootstrapUtils';
 import { Size } from './utils/StyleConfig';
 
+const SIZES = [Size.LARGE, Size.SMALL];
+
 const propTypes = {
   /**
    * A css class to apply to the Modal dialog DOM node.
@@ -20,20 +16,31 @@ const propTypes = {
   /**
    * A method to run for the mousedown event on the dialog.
    */
-  handleDialogMouseDown: PropTypes.func
+  handleDialogMouseDown: PropTypes.func,
+
+  bsClass: PropTypes.string,
+  bsSize: PropTypes.oneOf(SIZES)
 };
 
-class ModalDialog extends React.Component {
-  render() {
-    const {
+const ModalDialog = React.forwardRef(
+  (
+    {
       dialogClassName,
       className,
       style,
       children,
       handleDialogMouseDown,
+      bsClass = 'modal',
+      bsSize,
       ...props
-    } = this.props;
-    const [bsProps, elementProps] = splitBsProps(props);
+    },
+    ref
+  ) => {
+    const [bsProps, elementProps] = splitBsProps({
+      ...props,
+      bsClass,
+      bsSize
+    });
 
     const bsClassName = prefix(bsProps);
 
@@ -47,6 +54,7 @@ class ModalDialog extends React.Component {
 
     return (
       <div
+        ref={ref}
         {...elementProps}
         tabIndex="-1"
         role="dialog"
@@ -65,8 +73,10 @@ class ModalDialog extends React.Component {
       </div>
     );
   }
-}
+);
 
+ModalDialog.displayName = 'ModalDialog';
 ModalDialog.propTypes = propTypes;
+ModalDialog.SIZES = SIZES;
 
-export default bsClass('modal', bsSizes([Size.LARGE, Size.SMALL], ModalDialog));
+export default ModalDialog;
diff --git a/src/ModalHeader.js b/src/ModalHeader.js
index 7828629944..d190280e4f 100644
--- a/src/ModalHeader.js
+++ b/src/ModalHeader.js
@@ -5,6 +5,7 @@ import React from 'react';
 import { bsClass, getClassSet, splitBsProps } from './utils/bootstrapUtils';
 import createChainedFunction from './utils/createChainedFunction';
 import CloseButton from './CloseButton';
+import ModalContext from './ModalContext';
 
 // TODO: `aria-label` should be `closeLabel`.
 
@@ -34,12 +35,6 @@ const defaultProps = {
   closeButton: false
 };
 
-const contextTypes = {
-  $bs_modal: PropTypes.shape({
-    onHide: PropTypes.func
-  })
-};
-
 class ModalHeader extends React.Component {
   render() {
     const {
@@ -51,7 +46,7 @@ class ModalHeader extends React.Component {
       ...props
     } = this.props;
 
-    const modal = this.context.$bs_modal;
+    const modal = this.context;
 
     const [bsProps, elementProps] = splitBsProps(props);
 
@@ -74,6 +69,6 @@ class ModalHeader extends React.Component {
 
 ModalHeader.propTypes = propTypes;
 ModalHeader.defaultProps = defaultProps;
-ModalHeader.contextTypes = contextTypes;
+ModalHeader.contextType = ModalContext;
 
 export default bsClass('modal-header', ModalHeader);
diff --git a/src/Nav.js b/src/Nav.js
index 562662a16e..c944e025b4 100644
--- a/src/Nav.js
+++ b/src/Nav.js
@@ -1,10 +1,10 @@
 import classNames from 'classnames';
-import React, { cloneElement } from 'react';
+import React, { cloneElement, useContext } from 'react';
 import PropTypes from 'prop-types';
-import ReactDOM from 'react-dom';
-import all from 'prop-types-extra/lib/all';
 import warning from 'warning';
 
+import NavbarContext from './NavbarContext';
+import TabContainerContext from './TabContainerContext';
 import {
   bsClass,
   bsStyles,
@@ -39,13 +39,7 @@ const propTypes = {
    */
   stacked: PropTypes.bool,
 
-  justified: all(
-    PropTypes.bool,
-    ({ justified, navbar }) =>
-      justified && navbar
-        ? Error('justified navbar `Nav`s are not supported')
-        : null
-  ),
+  justified: PropTypes.bool,
 
   /**
    * A callback fired when a NavItem is selected.
@@ -95,21 +89,13 @@ const defaultProps = {
   stacked: false
 };
 
-const contextTypes = {
-  $bs_navbar: PropTypes.shape({
-    bsClass: PropTypes.string,
-    onSelect: PropTypes.func
-  }),
-
-  $bs_tabContainer: PropTypes.shape({
-    activeKey: PropTypes.any,
-    onSelect: PropTypes.func.isRequired,
-    getTabId: PropTypes.func.isRequired,
-    getPaneId: PropTypes.func.isRequired
-  })
-};
-
 class Nav extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.containerRef = React.createRef();
+  }
+
   componentDidUpdate() {
     if (!this._needsRefocus) {
       return;
@@ -127,7 +113,7 @@ class Nav extends React.Component {
     const childrenArray = ValidComponentChildren.toArray(children);
     const activeChildIndex = childrenArray.indexOf(activeChild);
 
-    const childNodes = ReactDOM.findDOMNode(this).children;
+    const childNodes = this.containerRef.current.children;
     const activeNode = childNodes && childNodes[activeChildIndex];
 
     if (!activeNode || !activeNode.firstChild) {
@@ -138,7 +124,7 @@ class Nav extends React.Component {
   }
 
   getActiveProps() {
-    const tabContainer = this.context.$bs_tabContainer;
+    const tabContainer = this.props.tabContainerContext;
 
     if (tabContainer) {
       warning(
@@ -280,10 +266,12 @@ class Nav extends React.Component {
       pullLeft,
       className,
       children,
+      navbarContext,
+      tabContainerContext,
       ...props
     } = this.props;
 
-    const tabContainer = this.context.$bs_tabContainer;
+    const tabContainer = tabContainerContext;
     const role = propsRole || (tabContainer ? 'tablist' : null);
 
     const { activeKey, activeHref } = this.getActiveProps();
@@ -292,18 +280,23 @@ class Nav extends React.Component {
 
     const [bsProps, elementProps] = splitBsProps(props);
 
+    warning(
+      !(justified && propsNavbar),
+      'justified navbar `Nav`s are not supported'
+    );
+
     const classes = {
       ...getClassSet(bsProps),
       [prefix(bsProps, 'stacked')]: stacked,
       [prefix(bsProps, 'justified')]: justified
     };
 
-    const navbar = propsNavbar != null ? propsNavbar : this.context.$bs_navbar;
+    const navbar = propsNavbar != null ? propsNavbar : navbarContext;
     let pullLeftClassName;
     let pullRightClassName;
 
     if (navbar) {
-      const navbarProps = this.context.$bs_navbar || { bsClass: 'navbar' };
+      const navbarProps = navbarContext || { bsClass: 'navbar' };
 
       classes[prefix(navbarProps, 'nav')] = true;
 
@@ -319,6 +312,7 @@ class Nav extends React.Component {
 
     return (
       <ul
+        ref={this.containerRef}
         {...elementProps}
         role={role}
         className={classNames(className, classes)}
@@ -353,6 +347,18 @@ class Nav extends React.Component {
 
 Nav.propTypes = propTypes;
 Nav.defaultProps = defaultProps;
-Nav.contextTypes = contextTypes;
 
-export default bsClass('nav', bsStyles(['tabs', 'pills'], Nav));
+function NavWithContext(props) {
+  const navbarContext = useContext(NavbarContext);
+  const tabContainerContext = useContext(TabContainerContext);
+
+  return (
+    <Nav
+      {...props}
+      navbarContext={navbarContext}
+      tabContainerContext={tabContainerContext}
+    />
+  );
+}
+
+export default bsClass('nav', bsStyles(['tabs', 'pills'], NavWithContext));
diff --git a/src/Navbar.js b/src/Navbar.js
index 35b904568c..ac293cb6f8 100644
--- a/src/Navbar.js
+++ b/src/Navbar.js
@@ -2,7 +2,7 @@
 /* eslint-disable react/no-multi-comp */
 
 import classNames from 'classnames';
-import React from 'react';
+import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import elementType from 'prop-types-extra/lib/elementType';
 import uncontrollable from 'uncontrollable';
@@ -10,6 +10,7 @@ import uncontrollable from 'uncontrollable';
 import Grid from './Grid';
 import NavbarBrand from './NavbarBrand';
 import NavbarCollapse from './NavbarCollapse';
+import NavbarContext from './NavbarContext';
 import NavbarHeader from './NavbarHeader';
 import NavbarToggle from './NavbarToggle';
 import {
@@ -109,15 +110,6 @@ const defaultProps = {
   collapseOnSelect: false
 };
 
-const childContextTypes = {
-  $bs_navbar: PropTypes.shape({
-    bsClass: PropTypes.string,
-    expanded: PropTypes.bool,
-    onToggle: PropTypes.func.isRequired,
-    onSelect: PropTypes.func
-  })
-};
-
 class Navbar extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -126,22 +118,6 @@ class Navbar extends React.Component {
     this.handleCollapse = this.handleCollapse.bind(this);
   }
 
-  getChildContext() {
-    const { bsClass, expanded, onSelect, collapseOnSelect } = this.props;
-
-    return {
-      $bs_navbar: {
-        bsClass,
-        expanded,
-        onToggle: this.handleToggle,
-        onSelect: createChainedFunction(
-          onSelect,
-          collapseOnSelect ? this.handleCollapse : null
-        )
-      }
-    };
-  }
-
   handleCollapse() {
     const { onToggle, expanded } = this.props;
 
@@ -194,43 +170,57 @@ class Navbar extends React.Component {
       [prefix(bsProps, 'static-top')]: staticTop
     };
 
+    const { bsClass, expanded, onSelect, collapseOnSelect } = this.props;
+
+    const navbarContext = {
+      bsClass,
+      expanded,
+      onToggle: this.handleToggle,
+      onSelect: createChainedFunction(
+        onSelect,
+        collapseOnSelect ? this.handleCollapse : null
+      )
+    };
+
     return (
-      <Component {...elementProps} className={classNames(className, classes)}>
-        <Grid fluid={fluid}>{children}</Grid>
-      </Component>
+      <NavbarContext.Provider value={navbarContext}>
+        <Component {...elementProps} className={classNames(className, classes)}>
+          <Grid fluid={fluid}>{children}</Grid>
+        </Component>
+      </NavbarContext.Provider>
     );
   }
 }
 
 Navbar.propTypes = propTypes;
 Navbar.defaultProps = defaultProps;
-Navbar.childContextTypes = childContextTypes;
 
 setBsClass('navbar', Navbar);
 
 const UncontrollableNavbar = uncontrollable(Navbar, { expanded: 'onToggle' });
 
 function createSimpleWrapper(tag, suffix, displayName) {
-  const Wrapper = (
-    {
-      componentClass: Component = tag,
-      className,
-      pullRight = false,
-      pullLeft = false,
-      ...props
-    },
-    { $bs_navbar: navbarProps = { bsClass: 'navbar' } }
-  ) => (
-    <Component
-      {...props}
-      className={classNames(
-        className,
-        prefix(navbarProps, suffix),
-        pullRight && prefix(navbarProps, 'right'),
-        pullLeft && prefix(navbarProps, 'left')
-      )}
-    />
-  );
+  const Wrapper = ({
+    componentClass: Component = tag,
+    className,
+    pullRight = false,
+    pullLeft = false,
+    ...props
+  }) => {
+    const navbarProps = useContext(NavbarContext) || { bsClass: 'navbar' };
+
+    return (
+      <Component
+        {...props}
+        className={classNames(
+          className,
+          prefix(navbarProps, suffix),
+          pullRight && prefix(navbarProps, 'right'),
+          pullLeft && prefix(navbarProps, 'left')
+        )}
+      />
+    );
+  };
 
   Wrapper.displayName = displayName;
 
@@ -240,12 +230,6 @@ function createSimpleWrapper(tag, suffix, displayName) {
     pullLeft: PropTypes.bool
   };
 
-  Wrapper.contextTypes = {
-    $bs_navbar: PropTypes.shape({
-      bsClass: PropTypes.string
-    })
-  };
-
   return Wrapper;
 }
 
diff --git a/src/NavbarBrand.js b/src/NavbarBrand.js
index 8787d7f5fc..acc2fadb78 100644
--- a/src/NavbarBrand.js
+++ b/src/NavbarBrand.js
@@ -1,19 +1,13 @@
 import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import NavbarContext from './NavbarContext';
 import { prefix } from './utils/bootstrapUtils';
 
-const contextTypes = {
-  $bs_navbar: PropTypes.shape({
-    bsClass: PropTypes.string
-  })
-};
-
 class NavbarBrand extends React.Component {
   render() {
     const { className, children, ...props } = this.props;
-    const navbarProps = this.context.$bs_navbar || { bsClass: 'navbar' };
+    const navbarProps = this.context || { bsClass: 'navbar' };
 
     const bsClassName = prefix(navbarProps, 'brand');
 
@@ -31,6 +25,6 @@ class NavbarBrand extends React.Component {
   }
 }
 
-NavbarBrand.contextTypes = contextTypes;
+NavbarBrand.contextType = NavbarContext;
 
 export default NavbarBrand;
diff --git a/src/NavbarCollapse.js b/src/NavbarCollapse.js
index dd47ddbea7..a3c6d3565a 100644
--- a/src/NavbarCollapse.js
+++ b/src/NavbarCollapse.js
@@ -1,20 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 
 import Collapse from './Collapse';
+import NavbarContext from './NavbarContext';
 import { prefix } from './utils/bootstrapUtils';
 
-const contextTypes = {
-  $bs_navbar: PropTypes.shape({
-    bsClass: PropTypes.string,
-    expanded: PropTypes.bool
-  })
-};
-
 class NavbarCollapse extends React.Component {
   render() {
     const { children, ...props } = this.props;
-    const navbarProps = this.context.$bs_navbar || { bsClass: 'navbar' };
+    const navbarProps = this.context || { bsClass: 'navbar' };
 
     const bsClassName = prefix(navbarProps, 'collapse');
 
@@ -26,6 +19,6 @@ class NavbarCollapse extends React.Component {
   }
 }
 
-NavbarCollapse.contextTypes = contextTypes;
+NavbarCollapse.contextType = NavbarContext;
 
 export default NavbarCollapse;
diff --git a/src/NavbarContext.js b/src/NavbarContext.js
new file mode 100644
index 0000000000..2643103d9b
--- /dev/null
+++ b/src/NavbarContext.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+const NavbarContext = React.createContext(undefined);
+NavbarContext.displayName = 'NavbarContext';
+
+export default NavbarContext;
diff --git a/src/NavbarHeader.js b/src/NavbarHeader.js
index 6bc5c4c170..7de2f80b2c 100644
--- a/src/NavbarHeader.js
+++ b/src/NavbarHeader.js
@@ -1,19 +1,13 @@
 import classNames from 'classnames';
 import React from 'react';
-import PropTypes from 'prop-types';
 
+import NavbarContext from './NavbarContext';
 import { prefix } from './utils/bootstrapUtils';
 
-const contextTypes = {
-  $bs_navbar: PropTypes.shape({
-    bsClass: PropTypes.string
-  })
-};
-
 class NavbarHeader extends React.Component {
   render() {
     const { className, ...props } = this.props;
-    const navbarProps = this.context.$bs_navbar || { bsClass: 'navbar' };
+    const navbarProps = this.context || { bsClass: 'navbar' };
 
     const bsClassName = prefix(navbarProps, 'header');
 
@@ -21,6 +15,6 @@ class NavbarHeader extends React.Component {
   }
 }
 
-NavbarHeader.contextTypes = contextTypes;
+NavbarHeader.contextType = NavbarContext;
 
 export default NavbarHeader;
diff --git a/src/NavbarToggle.js b/src/NavbarToggle.js
index 7b397606b7..b8588b2adc 100644
--- a/src/NavbarToggle.js
+++ b/src/NavbarToggle.js
@@ -2,6 +2,7 @@ import classNames from 'classnames';
 import React from 'react';
 import PropTypes from 'prop-types';
 
+import NavbarContext from './NavbarContext';
 import { prefix } from './utils/bootstrapUtils';
 import createChainedFunction from './utils/createChainedFunction';
 
@@ -13,18 +14,10 @@ const propTypes = {
   children: PropTypes.node
 };
 
-const contextTypes = {
-  $bs_navbar: PropTypes.shape({
-    bsClass: PropTypes.string,
-    expanded: PropTypes.bool,
-    onToggle: PropTypes.func.isRequired
-  })
-};
-
 class NavbarToggle extends React.Component {
   render() {
     const { onClick, className, children, ...props } = this.props;
-    const navbarProps = this.context.$bs_navbar || { bsClass: 'navbar' };
+    const navbarProps = this.context || { bsClass: 'navbar' };
 
     const buttonProps = {
       type: 'button',
@@ -53,6 +46,6 @@ class NavbarToggle extends React.Component {
 }
 
 NavbarToggle.propTypes = propTypes;
-NavbarToggle.contextTypes = contextTypes;
+NavbarToggle.contextType = NavbarContext;
 
 export default NavbarToggle;
diff --git a/src/Overlay.js b/src/Overlay.js
index bd35b36389..fbfa2520ad 100644
--- a/src/Overlay.js
+++ b/src/Overlay.js
@@ -1,7 +1,7 @@
 import classNames from 'classnames';
 import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
-import BaseOverlay from 'react-overlays/lib/Overlay';
+import BaseOverlay from 'react-overlays/Overlay';
 import elementType from 'prop-types-extra/lib/elementType';
 
 import Fade from './Fade';
@@ -88,8 +88,12 @@ class Overlay extends React.Component {
     }
 
     return (
-      <BaseOverlay {...props} transition={transition}>
-        {child}
+      <BaseOverlay {...props} target={null} transition={transition}>
+        {({ props: overlayProps }) => (
+          <div ref={overlayProps.ref} style={{ display: 'content' }}>
+            {child}
+          </div>
+        )}
       </BaseOverlay>
     );
   }
diff --git a/src/OverlayTrigger.js b/src/OverlayTrigger.js
index 3adda67446..d45a25a833 100644
--- a/src/OverlayTrigger.js
+++ b/src/OverlayTrigger.js
@@ -115,6 +115,8 @@ class OverlayTrigger extends React.Component {
     this.state = {
       show: props.defaultOverlayShown
     };
+
+    this.triggerRef = React.createRef();
   }
 
   componentWillUnmount() {
@@ -207,7 +209,7 @@ class OverlayTrigger extends React.Component {
         {...props}
         show={this.state.show}
         onHide={this.handleHide}
-        target={this}
+        target={this.triggerRef}
       >
         {overlay}
       </Overlay>
@@ -292,7 +294,9 @@ class OverlayTrigger extends React.Component {
 
     return (
       <>
-        {cloneElement(child, triggerProps)}
+        <div ref={this.triggerRef} style={{ display: 'content' }}>
+          {cloneElement(child, triggerProps)}
+        </div>
         {ReactDOM.createPortal(this.makeOverlay(overlay, props), document.body)}
       </>
     );
diff --git a/src/Panel.js b/src/Panel.js
index 7a73f50660..80d83da51a 100644
--- a/src/Panel.js
+++ b/src/Panel.js
@@ -12,6 +12,8 @@ import {
 } from './utils/bootstrapUtils';
 import { State, Style } from './utils/StyleConfig';
 import Body from './PanelBody';
+import PanelContext from './PanelContext';
+import PanelGroupContext from './PanelGroupContext';
 import Heading from './PanelHeading';
 import Title from './PanelTitle';
 import Footer from './PanelFooter';
@@ -45,53 +47,9 @@ const propTypes = {
   id: PropTypes.string
 };
 
-const contextTypes = {
-  $bs_panelGroup: PropTypes.shape({
-    getId: PropTypes.func,
-    activeKey: PropTypes.any,
-    onToggle: PropTypes.func
-  })
-};
-
-const childContextTypes = {
-  $bs_panel: PropTypes.shape({
-    headingId: PropTypes.string,
-    bodyId: PropTypes.string,
-    bsClass: PropTypes.string,
-    onToggle: PropTypes.func,
-    expanded: PropTypes.bool
-  })
-};
-
 class Panel extends React.Component {
-  getChildContext() {
-    const { eventKey, id } = this.props;
-    const idKey = eventKey == null ? id : eventKey;
-
-    let ids;
-
-    if (idKey !== null) {
-      const panelGroup = this.context.$bs_panelGroup;
-      const getId = (panelGroup && panelGroup.getId) || defaultGetId;
-
-      ids = {
-        headingId: getId(idKey, 'heading'),
-        bodyId: getId(idKey, 'body')
-      };
-    }
-
-    return {
-      $bs_panel: {
-        ...ids,
-        bsClass: this.props.bsClass,
-        expanded: this.getExpanded(),
-        onToggle: this.handleToggle
-      }
-    };
-  }
-
   getExpanded() {
-    const panelGroup = this.context.$bs_panelGroup;
+    const panelGroup = this.context;
 
     if (panelGroup && has.call(panelGroup, 'activeKey')) {
       warning(
@@ -108,7 +66,7 @@ class Panel extends React.Component {
   }
 
   handleToggle = e => {
-    const panelGroup = this.context.$bs_panelGroup;
+    const panelGroup = this.context;
     const expanded = !this.getExpanded();
 
     if (panelGroup && panelGroup.onToggle) {
@@ -126,18 +84,41 @@ class Panel extends React.Component {
       'expanded'
     ]);
 
+    const { eventKey, id } = this.props;
+    const idKey = eventKey == null ? id : eventKey;
+
+    let ids;
+
+    if (idKey !== null) {
+      const panelGroup = this.context;
+      const getId = (panelGroup && panelGroup.getId) || defaultGetId;
+
+      ids = {
+        headingId: getId(idKey, 'heading'),
+        bodyId: getId(idKey, 'body')
+      };
+    }
+
+    const panelContext = {
+      ...ids,
+      bsClass: this.props.bsClass,
+      expanded: this.getExpanded(),
+      onToggle: this.handleToggle
+    };
+
     return (
-      <div {...props} className={classNames(className, getClassSet(bsProps))}>
-        {children}
-      </div>
+      <PanelContext.Provider value={panelContext}>
+        <div {...props} className={classNames(className, getClassSet(bsProps))}>
+          {children}
+        </div>
+      </PanelContext.Provider>
     );
   }
 }
 
 Panel.propTypes = propTypes;
 
-Panel.contextTypes = contextTypes;
-Panel.childContextTypes = childContextTypes;
+Panel.contextType = PanelGroupContext;
 
 const UncontrolledPanel = uncontrollable(
   bsClass(
diff --git a/src/PanelBody.js b/src/PanelBody.js
index 9e9d5ac891..32df9c40e3 100644
--- a/src/PanelBody.js
+++ b/src/PanelBody.js
@@ -3,6 +3,7 @@ import React from 'react';
 import cn from 'classnames';
 import { prefix, splitBsPropsAndOmit, bsClass } from './utils/bootstrapUtils';
 import PanelCollapse from './PanelCollapse';
+import PanelContext from './PanelContext';
 
 const propTypes = {
   /**
@@ -23,16 +24,10 @@ const defaultProps = {
   collapsible: false
 };
 
-const contextTypes = {
-  $bs_panel: PropTypes.shape({
-    bsClass: PropTypes.string
-  })
-};
-
 class PanelBody extends React.Component {
   render() {
     const { children, className, collapsible } = this.props;
-    const { bsClass: _bsClass } = this.context.$bs_panel || {};
+    const { bsClass: _bsClass } = this.context || {};
 
     const [bsProps, elementProps] = splitBsPropsAndOmit(this.props, [
       'collapsible'
@@ -55,6 +50,6 @@ class PanelBody extends React.Component {
 
 PanelBody.propTypes = propTypes;
 PanelBody.defaultProps = defaultProps;
-PanelBody.contextTypes = contextTypes;
+PanelBody.contextType = PanelContext;
 
 export default bsClass('panel', PanelBody);
diff --git a/src/PanelCollapse.js b/src/PanelCollapse.js
index 69d7a4e8ce..d3a2573231 100644
--- a/src/PanelCollapse.js
+++ b/src/PanelCollapse.js
@@ -3,6 +3,7 @@ import React from 'react';
 
 import { prefix, splitBsProps, bsClass } from './utils/bootstrapUtils';
 import Collapse from './Collapse';
+import PanelContext from './PanelContext';
 
 const propTypes = {
   /**
@@ -31,20 +32,11 @@ const propTypes = {
   onExited: PropTypes.func
 };
 
-const contextTypes = {
-  $bs_panel: PropTypes.shape({
-    headingId: PropTypes.string,
-    bodyId: PropTypes.string,
-    bsClass: PropTypes.string,
-    expanded: PropTypes.bool
-  })
-};
-
 class PanelCollapse extends React.Component {
   render() {
     const { children } = this.props;
     const { headingId, bodyId, bsClass: _bsClass, expanded } =
-      this.context.$bs_panel || {};
+      this.context || {};
 
     const [bsProps, props] = splitBsProps(this.props);
 
@@ -65,6 +57,6 @@ class PanelCollapse extends React.Component {
 }
 
 PanelCollapse.propTypes = propTypes;
-PanelCollapse.contextTypes = contextTypes;
+PanelCollapse.contextType = PanelContext;
 
 export default bsClass('panel', PanelCollapse);
diff --git a/src/PanelContext.js b/src/PanelContext.js
new file mode 100644
index 0000000000..ebfa9c8413
--- /dev/null
+++ b/src/PanelContext.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+const PanelContext = React.createContext(undefined);
+PanelContext.displayName = 'PanelContext';
+
+export default PanelContext;
diff --git a/src/PanelFooter.js b/src/PanelFooter.js
index 5c7aa061a3..8f9f21b304 100644
--- a/src/PanelFooter.js
+++ b/src/PanelFooter.js
@@ -1,18 +1,13 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import cn from 'classnames';
-import { prefix, bsClass, splitBsProps } from './utils/bootstrapUtils';
 
-const contextTypes = {
-  $bs_panel: PropTypes.shape({
-    bsClass: PropTypes.string
-  })
-};
+import PanelContext from './PanelContext';
+import { prefix, bsClass, splitBsProps } from './utils/bootstrapUtils';
 
 class PanelFooter extends React.Component {
   render() {
     let { children, className } = this.props;
-    let { bsClass: _bsClass } = this.context.$bs_panel || {};
+    let { bsClass: _bsClass } = this.context || {};
 
     const [bsProps, elementProps] = splitBsProps(this.props);
     bsProps.bsClass = _bsClass || bsProps.bsClass;
@@ -28,6 +23,6 @@ class PanelFooter extends React.Component {
   }
 }
 
-PanelFooter.contextTypes = contextTypes;
+PanelFooter.contextType = PanelContext;
 
 export default bsClass('panel', PanelFooter);
diff --git a/src/PanelGroup.js b/src/PanelGroup.js
index a7fd8466d8..01cd6c685f 100644
--- a/src/PanelGroup.js
+++ b/src/PanelGroup.js
@@ -3,6 +3,7 @@ import PropTypes from 'prop-types';
 import React, { cloneElement } from 'react';
 import uncontrollable from 'uncontrollable';
 
+import PanelGroupContext from './PanelGroupContext';
 import {
   bsClass,
   getClassSet,
@@ -56,40 +57,7 @@ const defaultProps = {
   accordion: false
 };
 
-const childContextTypes = {
-  $bs_panelGroup: PropTypes.shape({
-    getId: PropTypes.func,
-    headerRole: PropTypes.string,
-    panelRole: PropTypes.string,
-    activeKey: PropTypes.any,
-    onToggle: PropTypes.func
-  })
-};
-
 class PanelGroup extends React.Component {
-  getChildContext() {
-    const { activeKey, accordion, generateChildId, id } = this.props;
-    let getId = null;
-
-    if (accordion) {
-      getId =
-        generateChildId ||
-        ((key, type) => (id ? `${id}-${type}-${key}` : null));
-    }
-
-    return {
-      $bs_panelGroup: {
-        getId,
-        headerRole: 'tab',
-        panelRole: 'tabpanel',
-        ...(accordion && {
-          activeKey,
-          onToggle: this.handleSelect
-        })
-      }
-    };
-  }
-
   handleSelect = (key, expanded, e) => {
     if (expanded) {
       this.props.onSelect(key, e);
@@ -112,21 +80,41 @@ class PanelGroup extends React.Component {
 
     const classes = getClassSet(bsProps);
 
+    const { activeKey, generateChildId, id } = this.props;
+    let getId = null;
+
+    if (accordion) {
+      getId =
+        generateChildId ||
+        ((key, type) => (id ? `${id}-${type}-${key}` : null));
+    }
+
+    const panelGroupContext = {
+      getId,
+      headerRole: 'tab',
+      panelRole: 'tabpanel',
+      ...(accordion && {
+        activeKey,
+        onToggle: this.handleSelect
+      })
+    };
+
     return (
-      <div {...elementProps} className={classNames(className, classes)}>
-        {ValidComponentChildren.map(children, child =>
-          cloneElement(child, {
-            bsStyle: child.props.bsStyle || bsProps.bsStyle
-          })
-        )}
-      </div>
+      <PanelGroupContext.Provider value={panelGroupContext}>
+        <div {...elementProps} className={classNames(className, classes)}>
+          {ValidComponentChildren.map(children, child =>
+            cloneElement(child, {
+              bsStyle: child.props.bsStyle || bsProps.bsStyle
+            })
+          )}
+        </div>
+      </PanelGroupContext.Provider>
     );
   }
 }
 
 PanelGroup.propTypes = propTypes;
 PanelGroup.defaultProps = defaultProps;
-PanelGroup.childContextTypes = childContextTypes;
 
 export default uncontrollable(bsClass('panel-group', PanelGroup), {
   activeKey: 'onSelect'
diff --git a/src/PanelGroupContext.js b/src/PanelGroupContext.js
new file mode 100644
index 0000000000..3454451175
--- /dev/null
+++ b/src/PanelGroupContext.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+const PanelGroupContext = React.createContext(undefined);
+PanelGroupContext.displayName = 'PanelGroupContext';
+
+export default PanelGroupContext;
diff --git a/src/PanelHeading.js b/src/PanelHeading.js
index ddb61ffeac..17a69951a2 100644
--- a/src/PanelHeading.js
+++ b/src/PanelHeading.js
@@ -1,8 +1,8 @@
-import PropTypes from 'prop-types';
 import React from 'react';
 import cn from 'classnames';
 import elementType from 'react-prop-types/lib/elementType';
 
+import PanelContext from './PanelContext';
 import { prefix, bsClass, splitBsProps } from './utils/bootstrapUtils';
 
 const propTypes = {
@@ -13,13 +13,6 @@ const defaultProps = {
   componentClass: 'div'
 };
 
-const contextTypes = {
-  $bs_panel: PropTypes.shape({
-    headingId: PropTypes.string,
-    bsClass: PropTypes.string
-  })
-};
-
 class PanelHeading extends React.Component {
   render() {
     const {
@@ -28,7 +21,7 @@ class PanelHeading extends React.Component {
       componentClass: Component,
       ...props
     } = this.props;
-    const { headingId, bsClass: _bsClass } = this.context.$bs_panel || {};
+    const { headingId, bsClass: _bsClass } = this.context || {};
 
     const [bsProps, elementProps] = splitBsProps(props);
     bsProps.bsClass = _bsClass || bsProps.bsClass;
@@ -51,6 +44,6 @@ class PanelHeading extends React.Component {
 
 PanelHeading.propTypes = propTypes;
 PanelHeading.defaultProps = defaultProps;
-PanelHeading.contextTypes = contextTypes;
+PanelHeading.contextType = PanelContext;
 
 export default bsClass('panel', PanelHeading);
diff --git a/src/PanelTitle.js b/src/PanelTitle.js
index 2d102324b3..7aa4bacf7e 100644
--- a/src/PanelTitle.js
+++ b/src/PanelTitle.js
@@ -3,8 +3,9 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import elementType from 'react-prop-types/lib/elementType';
 
-import { prefix, splitBsProps, bsClass } from './utils/bootstrapUtils';
+import PanelContext from './PanelContext';
 import PanelToggle from './PanelToggle';
+import { prefix, splitBsProps, bsClass } from './utils/bootstrapUtils';
 
 const propTypes = {
   componentClass: elementType,
@@ -15,12 +16,6 @@ const propTypes = {
   toggle: PropTypes.bool
 };
 
-const contextTypes = {
-  $bs_panel: PropTypes.shape({
-    bsClass: PropTypes.string
-  })
-};
-
 const defaultProps = {
   componentClass: 'div'
 };
@@ -35,7 +30,7 @@ class PanelTitle extends React.Component {
       ...props
     } = this.props;
 
-    const { bsClass: _bsClass } = this.context.$bs_panel || {};
+    const { bsClass: _bsClass } = this.context || {};
 
     const [bsProps, elementProps] = splitBsProps(props);
     bsProps.bsClass = _bsClass || bsProps.bsClass;
@@ -57,6 +52,6 @@ class PanelTitle extends React.Component {
 
 PanelTitle.propTypes = propTypes;
 PanelTitle.defaultProps = defaultProps;
-PanelTitle.contextTypes = contextTypes;
+PanelTitle.contextType = PanelContext;
 
 export default bsClass('panel', PanelTitle);
diff --git a/src/PanelToggle.js b/src/PanelToggle.js
index cb8605317c..2e0a20036f 100644
--- a/src/PanelToggle.js
+++ b/src/PanelToggle.js
@@ -2,6 +2,8 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
 import elementType from 'react-prop-types/lib/elementType';
+
+import PanelContext from './PanelContext';
 import SafeAnchor from './SafeAnchor';
 import createChainedFunction from './utils/createChainedFunction';
 
@@ -22,14 +24,6 @@ const defaultProps = {
   componentClass: SafeAnchor
 };
 
-const contextTypes = {
-  $bs_panel: PropTypes.shape({
-    bodyId: PropTypes.string,
-    onToggle: PropTypes.func,
-    expanded: PropTypes.bool
-  })
-};
-
 class PanelToggle extends React.Component {
   constructor(...args) {
     super(...args);
@@ -38,7 +32,7 @@ class PanelToggle extends React.Component {
   }
 
   handleToggle(event) {
-    const { onToggle } = this.context.$bs_panel || {};
+    const { onToggle } = this.context || {};
 
     if (onToggle) {
       onToggle(event);
@@ -47,7 +41,7 @@ class PanelToggle extends React.Component {
 
   render() {
     const { onClick, className, componentClass, ...props } = this.props;
-    const { expanded, bodyId } = this.context.$bs_panel || {};
+    const { expanded, bodyId } = this.context || {};
     const Component = componentClass;
 
     props.onClick = createChainedFunction(onClick, this.handleToggle);
@@ -65,6 +59,6 @@ class PanelToggle extends React.Component {
 
 PanelToggle.propTypes = propTypes;
 PanelToggle.defaultProps = defaultProps;
-PanelToggle.contextTypes = contextTypes;
+PanelToggle.contextType = PanelContext;
 
 export default PanelToggle;
diff --git a/src/ProgressBar.js b/src/ProgressBar.js
index 63aa306873..0e90dc30ed 100644
--- a/src/ProgressBar.js
+++ b/src/ProgressBar.js
@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React, { cloneElement } from 'react';
 import PropTypes from 'prop-types';
+import warning from 'warning';
 
 import {
   bsClass as setBsClass,
@@ -17,12 +18,7 @@ const ROUND_PRECISION = 1000;
 /**
  * Validate that children, if any, are instances of `<ProgressBar>`.
  */
-function onlyProgressBar(props, propName, componentName) {
-  const children = props[propName];
-  if (!children) {
-    return null;
-  }
-
+function getInvalidChildError(children) {
   let error = null;
 
   React.Children.forEach(children, child => {
@@ -42,10 +38,9 @@ function onlyProgressBar(props, propName, componentName) {
     const childIdentifier = React.isValidElement(child)
       ? child.type.displayName || child.type.name || child.type
       : child;
-    error = new Error(
-      `Children of ${componentName} can contain only ProgressBar ` +
-        `components. Found ${childIdentifier}.`
-    );
+    error =
+      `Children of ProgressBar can contain only ProgressBar ` +
+      `components. Found ${childIdentifier}.`;
   });
 
   return error;
@@ -59,7 +54,7 @@ const propTypes = {
   srOnly: PropTypes.bool,
   striped: PropTypes.bool,
   active: PropTypes.bool,
-  children: onlyProgressBar,
+  children: PropTypes.node,
 
   /**
    * @private
@@ -139,6 +134,11 @@ class ProgressBar extends React.Component {
       ...wrapperProps
     } = props;
 
+    const childError = children ? getInvalidChildError(children) : null;
+    if (childError) {
+      warning(false, childError);
+    }
+
     return (
       <div {...wrapperProps} className={classNames(className, 'progress')}>
         {children
diff --git a/src/TabContainer.js b/src/TabContainer.js
index deebb182ea..a36058d6dd 100644
--- a/src/TabContainer.js
+++ b/src/TabContainer.js
@@ -2,6 +2,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import uncontrollable from 'uncontrollable';
 
+import TabContainerContext from './TabContainerContext';
+
 const TAB = 'tab';
 const PANE = 'pane';
 
@@ -58,44 +60,34 @@ const propTypes = {
   activeKey: PropTypes.any
 };
 
-const childContextTypes = {
-  $bs_tabContainer: PropTypes.shape({
-    activeKey: PropTypes.any,
-    onSelect: PropTypes.func.isRequired,
-    getTabId: PropTypes.func.isRequired,
-    getPaneId: PropTypes.func.isRequired
-  })
-};
-
 class TabContainer extends React.Component {
-  getChildContext() {
+  render() {
+    const { children, ...props } = this.props;
+
     const { activeKey, onSelect, generateChildId, id } = this.props;
 
     const getId =
       generateChildId || ((key, type) => (id ? `${id}-${type}-${key}` : null));
 
-    return {
-      $bs_tabContainer: {
-        activeKey,
-        onSelect,
-        getTabId: key => getId(key, TAB),
-        getPaneId: key => getId(key, PANE)
-      }
+    const tabContainerContext = {
+      activeKey,
+      onSelect,
+      getTabId: key => getId(key, TAB),
+      getPaneId: key => getId(key, PANE)
     };
-  }
-
-  render() {
-    const { children, ...props } = this.props;
 
     delete props.generateChildId;
     delete props.onSelect;
     delete props.activeKey;
 
-    return React.cloneElement(React.Children.only(children), props);
+    return (
+      <TabContainerContext.Provider value={tabContainerContext}>
+        {React.cloneElement(React.Children.only(children), props)}
+      </TabContainerContext.Provider>
+    );
   }
 }
 
 TabContainer.propTypes = propTypes;
-TabContainer.childContextTypes = childContextTypes;
 
 export default uncontrollable(TabContainer, { activeKey: 'onSelect' });
diff --git a/src/TabContainerContext.js b/src/TabContainerContext.js
new file mode 100644
index 0000000000..bc14745edf
--- /dev/null
+++ b/src/TabContainerContext.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+const TabContainerContext = React.createContext(undefined);
+TabContainerContext.displayName = 'TabContainerContext';
+
+export default TabContainerContext;
diff --git a/src/TabContent.js b/src/TabContent.js
index a5b3bbc8c0..4ab8ccbcb7 100644
--- a/src/TabContent.js
+++ b/src/TabContent.js
@@ -3,6 +3,8 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import elementType from 'prop-types-extra/lib/elementType';
 
+import TabContainerContext from './TabContainerContext';
+import TabContentContext from './TabContentContext';
 import {
   bsClass as setBsClass,
   prefix,
@@ -37,25 +39,6 @@ const defaultProps = {
   unmountOnExit: false
 };
 
-const contextTypes = {
-  $bs_tabContainer: PropTypes.shape({
-    activeKey: PropTypes.any
-  })
-};
-
-const childContextTypes = {
-  $bs_tabContent: PropTypes.shape({
-    bsClass: PropTypes.string,
-    animation: PropTypes.oneOfType([PropTypes.bool, elementType]),
-    activeKey: PropTypes.any,
-    mountOnEnter: PropTypes.bool,
-    unmountOnExit: PropTypes.bool,
-    onPaneEnter: PropTypes.func.isRequired,
-    onPaneExited: PropTypes.func.isRequired,
-    exiting: PropTypes.bool.isRequired
-  })
-};
-
 class TabContent extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -72,31 +55,6 @@ class TabContent extends React.Component {
     };
   }
 
-  getChildContext() {
-    const { bsClass, animation, mountOnEnter, unmountOnExit } = this.props;
-
-    const stateActiveKey = this.state.activeKey;
-    const containerActiveKey = this.getContainerActiveKey();
-
-    const activeKey =
-      stateActiveKey != null ? stateActiveKey : containerActiveKey;
-    const exiting =
-      stateActiveKey != null && stateActiveKey !== containerActiveKey;
-
-    return {
-      $bs_tabContent: {
-        bsClass,
-        animation,
-        activeKey,
-        mountOnEnter,
-        unmountOnExit,
-        onPaneEnter: this.handlePaneEnter,
-        onPaneExited: this.handlePaneExited,
-        exiting
-      }
-    };
-  }
-
   UNSAFE_componentWillReceiveProps(nextProps) {
     if (!nextProps.animation && this.state.activeChild) {
       this.setState({ activeKey: null, activeChild: null });
@@ -108,7 +66,7 @@ class TabContent extends React.Component {
   }
 
   getContainerActiveKey() {
-    const tabContainer = this.context.$bs_tabContainer;
+    const tabContainer = this.context;
     return tabContainer && tabContainer.activeKey;
   }
 
@@ -156,18 +114,40 @@ class TabContent extends React.Component {
       'unmountOnExit'
     ]);
 
+    const { bsClass, animation, mountOnEnter, unmountOnExit } = this.props;
+
+    const stateActiveKey = this.state.activeKey;
+    const containerActiveKey = this.getContainerActiveKey();
+
+    const activeKey =
+      stateActiveKey != null ? stateActiveKey : containerActiveKey;
+    const exiting =
+      stateActiveKey != null && stateActiveKey !== containerActiveKey;
+
+    const tabContentContext = {
+      bsClass,
+      animation,
+      activeKey,
+      mountOnEnter,
+      unmountOnExit,
+      onPaneEnter: this.handlePaneEnter,
+      onPaneExited: this.handlePaneExited,
+      exiting
+    };
+
     return (
-      <Component
-        {...elementProps}
-        className={classNames(className, prefix(bsProps, 'content'))}
-      />
+      <TabContentContext.Provider value={tabContentContext}>
+        <Component
+          {...elementProps}
+          className={classNames(className, prefix(bsProps, 'content'))}
+        />
+      </TabContentContext.Provider>
     );
   }
 }
 
 TabContent.propTypes = propTypes;
 TabContent.defaultProps = defaultProps;
-TabContent.contextTypes = contextTypes;
-TabContent.childContextTypes = childContextTypes;
+TabContent.contextType = TabContainerContext;
 
 export default setBsClass('tab', TabContent);
diff --git a/src/TabContentContext.js b/src/TabContentContext.js
new file mode 100644
index 0000000000..7e2c47c6d7
--- /dev/null
+++ b/src/TabContentContext.js
@@ -0,0 +1,6 @@
+import React from 'react';
+
+const TabContentContext = React.createContext(undefined);
+TabContentContext.displayName = 'TabContentContext';
+
+export default TabContentContext;
diff --git a/src/TabPane.js b/src/TabPane.js
index e69bf15aba..08895bdb2b 100644
--- a/src/TabPane.js
+++ b/src/TabPane.js
@@ -4,6 +4,8 @@ import PropTypes from 'prop-types';
 import elementType from 'prop-types-extra/lib/elementType';
 import warning from 'warning';
 
+import TabContainerContext from './TabContainerContext';
+import TabContentContext from './TabContentContext';
 import {
   bsClass,
   getClassSet,
@@ -81,31 +83,6 @@ const propTypes = {
   unmountOnExit: PropTypes.bool
 };
 
-const contextTypes = {
-  $bs_tabContainer: PropTypes.shape({
-    getTabId: PropTypes.func,
-    getPaneId: PropTypes.func
-  }),
-  $bs_tabContent: PropTypes.shape({
-    bsClass: PropTypes.string,
-    animation: PropTypes.oneOfType([PropTypes.bool, elementType]),
-    activeKey: PropTypes.any,
-    mountOnEnter: PropTypes.bool,
-    unmountOnExit: PropTypes.bool,
-    onPaneEnter: PropTypes.func.isRequired,
-    onPaneExited: PropTypes.func.isRequired,
-    exiting: PropTypes.bool.isRequired
-  })
-};
-
-/**
- * We override the `<TabContainer>` context so `<Nav>`s in `<TabPane>`s don't
- * conflict with the top level one.
- */
-const childContextTypes = {
-  $bs_tabContainer: PropTypes.oneOf([null])
-};
-
 class TabPane extends React.Component {
   constructor(props, context) {
     super(props, context);
@@ -116,12 +93,6 @@ class TabPane extends React.Component {
     this.in = false;
   }
 
-  getChildContext() {
-    return {
-      $bs_tabContainer: null
-    };
-  }
-
   componentDidMount() {
     if (this.shouldBeIn()) {
       // In lieu of the action event firing.
@@ -153,12 +124,12 @@ class TabPane extends React.Component {
       return this.props.animation;
     }
 
-    const tabContent = this.context.$bs_tabContent;
+    const tabContent = this.context;
     return tabContent && tabContent.animation;
   }
 
   handleEnter() {
-    const tabContent = this.context.$bs_tabContent;
+    const tabContent = this.context;
     if (!tabContent) {
       return;
     }
@@ -167,7 +138,7 @@ class TabPane extends React.Component {
   }
 
   handleExited() {
-    const tabContent = this.context.$bs_tabContent;
+    const tabContent = this.context;
     if (!tabContent) {
       return;
     }
@@ -177,7 +148,7 @@ class TabPane extends React.Component {
   }
 
   isActive() {
-    const tabContent = this.context.$bs_tabContent;
+    const tabContent = this.context;
     const activeKey = tabContent && tabContent.activeKey;
 
     return this.props.eventKey === activeKey;
@@ -187,7 +158,7 @@ class TabPane extends React.Component {
     return this.getAnimation() && this.isActive();
   }
 
-  render() {
+  renderPane(tabContainer) {
     const {
       eventKey,
       className,
@@ -202,10 +173,7 @@ class TabPane extends React.Component {
       ...props
     } = this.props;
 
-    const {
-      $bs_tabContent: tabContent,
-      $bs_tabContainer: tabContainer
-    } = this.context;
+    const tabContent = this.context;
 
     const [bsProps, elementProps] = splitBsPropsAndOmit(props, ['animation']);
 
@@ -281,10 +249,24 @@ class TabPane extends React.Component {
 
     return pane;
   }
+
+  render() {
+    // Read the `<TabContainer>` context so we can generate accessible ids, then
+    // override it with `null` so `<Nav>`s in `<TabPane>`s don't conflict with
+    // the top level one.
+    return (
+      <TabContainerContext.Consumer>
+        {tabContainer => (
+          <TabContainerContext.Provider value={null}>
+            {this.renderPane(tabContainer)}
+          </TabContainerContext.Provider>
+        )}
+      </TabContainerContext.Consumer>
+    );
+  }
 }
 
 TabPane.propTypes = propTypes;
-TabPane.contextTypes = contextTypes;
-TabPane.childContextTypes = childContextTypes;
+TabPane.contextType = TabContentContext;
 
 export default bsClass('tab-pane', TabPane);
diff --git a/src/utils/PropTypes.js b/src/utils/PropTypes.js
index 0eb25d4bb5..ad7769f560 100644
--- a/src/utils/PropTypes.js
+++ b/src/utils/PropTypes.js
@@ -1,5 +1,4 @@
 import PropTypes from 'prop-types';
-import createChainableTypeChecker from 'prop-types-extra/lib/utils/createChainableTypeChecker';
 
 import ValidComponentChildren from './ValidComponentChildren';
 
@@ -23,62 +22,67 @@ export function generatedId(name) {
   };
 }
 
-export function requiredRoles(...roles) {
-  return createChainableTypeChecker((props, propName, component) => {
-    let missing;
-
-    roles.every(role => {
-      if (
-        !ValidComponentChildren.some(
-          props.children,
-          child => child.props.bsRole === role
-        )
-      ) {
-        missing = role;
-        return false;
-      }
-
-      return true;
-    });
-
-    if (missing) {
-      return new Error(
-        `(children) ${component} - Missing a required child with bsRole: ` +
-          `${missing}. ${component} must have at least one child of each of ` +
-          `the following bsRoles: ${roles.join(', ')}`
-      );
+/**
+ * Return a warning message if `children` is missing a child for any of the
+ * required `roles`, otherwise `null`. `bsRole` is matched against each child's
+ * `bsRole` prop.
+ */
+export function getMissingRoleError(component, children, ...roles) {
+  let missing;
+
+  roles.every(role => {
+    if (
+      !ValidComponentChildren.some(
+        children,
+        child => child.props.bsRole === role
+      )
+    ) {
+      missing = role;
+      return false;
     }
 
-    return null;
+    return true;
   });
-}
-
-export function exclusiveRoles(...roles) {
-  return createChainableTypeChecker((props, propName, component) => {
-    let duplicate;
 
-    roles.every(role => {
-      const childrenWithRole = ValidComponentChildren.filter(
-        props.children,
-        child => child.props.bsRole === role
-      );
-
-      if (childrenWithRole.length > 1) {
-        duplicate = role;
-        return false;
-      }
+  if (missing) {
+    return (
+      `(children) ${component} - Missing a required child with bsRole: ` +
+      `${missing}. ${component} must have at least one child of each of ` +
+      `the following bsRoles: ${roles.join(', ')}`
+    );
+  }
 
-      return true;
-    });
+  return null;
+}
 
-    if (duplicate) {
-      return new Error(
-        `(children) ${component} - Duplicate children detected of bsRole: ` +
-          `${duplicate}. Only one child each allowed with the following ` +
-          `bsRoles: ${roles.join(', ')}`
-      );
+/**
+ * Return a warning message if `children` contains more than one child for any
+ * of the exclusive `roles`, otherwise `null`.
+ */
+export function getDuplicateRoleError(component, children, ...roles) {
+  let duplicate;
+
+  roles.every(role => {
+    const childrenWithRole = ValidComponentChildren.filter(
+      children,
+      child => child.props.bsRole === role
+    );
+
+    if (childrenWithRole.length > 1) {
+      duplicate = role;
+      return false;
     }
 
-    return null;
+    return true;
   });
+
+  if (duplicate) {
+    return (
+      `(children) ${component} - Duplicate children detected of bsRole: ` +
+      `${duplicate}. Only one child each allowed with the following ` +
+      `bsRoles: ${roles.join(', ')}`
+    );
+  }
+
+  return null;
 }
diff --git a/src/utils/bootstrapUtils.js b/src/utils/bootstrapUtils.js
index 5735d17a21..416b59ccbd 100644
--- a/src/utils/bootstrapUtils.js
+++ b/src/utils/bootstrapUtils.js
@@ -2,6 +2,8 @@
 
 import invariant from 'invariant';
 import PropTypes from 'prop-types';
+import React from 'react';
+import warning from 'warning';
 
 import { SIZE_MAP } from './StyleConfig';
 
@@ -15,6 +17,107 @@ function curry(fn) {
   };
 }
 
+function componentName(Component) {
+  return Component.displayName || Component.name || 'Component';
+}
+
+function isReactClass(Component) {
+  return Boolean(
+    Component &&
+      Component.prototype &&
+      typeof Component.prototype.render === 'function'
+  );
+}
+
+function warnOutOfRange(name, propName, value, allowed) {
+  if (value != null && allowed.indexOf(value) === -1) {
+    warning(
+      false,
+      `Invalid prop \`${propName}\` of value \`${value}\` supplied to ` +
+        `\`${name}\`, expected one of ${JSON.stringify(allowed)}.`
+    );
+  }
+}
+
+// Patch a class component's `render` so `propName` is validated on every
+// render, without wrapping the component (which would break ref forwarding,
+// static reads, and — for e.g. `bsRole` — class `defaultProps` merging).
+function patchRenderValidation(Component, propName, allowed) {
+  const flag = `__bsValidated_${propName}`;
+  const proto = Component.prototype;
+
+  if (Object.prototype.hasOwnProperty.call(proto, flag)) {
+    return;
+  }
+
+  const name = componentName(Component);
+  const innerRender = proto.render;
+
+  proto.render = function validatedRender(...renderArgs) {
+    warnOutOfRange(name, propName, this.props[propName], allowed);
+    return innerRender.apply(this, renderArgs);
+  };
+  proto[flag] = true;
+}
+
+// Wrap a function component so the default is applied and the value validated
+// at render.
+function wrapFunctionComponent(Inner, { propName, defaultValue, allowed }) {
+  const name = componentName(Inner);
+
+  function BootstrapComponent(props) {
+    const resolved =
+      defaultValue !== undefined && props[propName] === undefined
+        ? { ...props, [propName]: defaultValue }
+        : props;
+
+    if (allowed) {
+      warnOutOfRange(name, propName, resolved[propName], allowed);
+    }
+
+    return React.createElement(Inner, resolved);
+  }
+
+  BootstrapComponent.displayName = name;
+
+  // Carry over metadata read elsewhere: `propTypes`/`_values` for docs and
+  // `STYLES`/`SIZES` for decorator chaining.
+  if (Inner.propTypes) BootstrapComponent.propTypes = Inner.propTypes;
+  if (Inner.STYLES) BootstrapComponent.STYLES = Inner.STYLES;
+  if (Inner.SIZES) BootstrapComponent.SIZES = Inner.SIZES;
+
+  return BootstrapComponent;
+}
+
+// Apply a `bs*` default and (optionally) enum validation to a component,
+// dispatching on what kind of thing it is. Class components keep working
+// `defaultProps`; function components get a validating wrapper; anything else
+// (e.g. a plain object in tests) just records the default.
+function applyBsProp(Component, { propName, defaultValue, allowed }) {
+  const isClassComponent = isReactClass(Component);
+
+  if (typeof Component === 'function' && !isClassComponent) {
+    return wrapFunctionComponent(Component, {
+      propName,
+      defaultValue,
+      allowed
+    });
+  }
+
+  if (defaultValue !== undefined) {
+    Component.defaultProps = {
+      ...Component.defaultProps,
+      [propName]: defaultValue
+    };
+  }
+
+  if (allowed && isClassComponent) {
+    patchRenderValidation(Component, propName, allowed);
+  }
+
+  return Component;
+}
+
 export function prefix(props, variant) {
   let bsClass = (props.bsClass || '').trim();
   invariant(bsClass != null, 'A `bsClass` prop is required for this component');
@@ -23,12 +126,13 @@ export function prefix(props, variant) {
 
 export const bsClass = curry((defaultClass, Component) => {
   let propTypes = Component.propTypes || (Component.propTypes = {});
-  let defaultProps = Component.defaultProps || (Component.defaultProps = {});
 
   propTypes.bsClass = PropTypes.string;
-  defaultProps.bsClass = defaultClass;
 
-  return Component;
+  return applyBsProp(Component, {
+    propName: 'bsClass',
+    defaultValue: defaultClass
+  });
 });
 
 export const bsStyles = curry((styles, defaultStyle, Component) => {
@@ -57,12 +161,11 @@ export const bsStyles = curry((styles, defaultStyle, Component) => {
     bsStyle: propType
   };
 
-  if (defaultStyle !== undefined) {
-    let defaultProps = Component.defaultProps || (Component.defaultProps = {});
-    defaultProps.bsStyle = defaultStyle;
-  }
-
-  return Component;
+  return applyBsProp(Component, {
+    propName: 'bsStyle',
+    defaultValue: defaultStyle,
+    allowed: existing
+  });
 });
 
 export const bsSizes = curry((sizes, defaultSize, Component) => {
@@ -101,14 +204,11 @@ export const bsSizes = curry((sizes, defaultSize, Component) => {
     bsSize: propType
   };
 
-  if (defaultSize !== undefined) {
-    if (!Component.defaultProps) {
-      Component.defaultProps = {};
-    }
-    Component.defaultProps.bsSize = defaultSize;
-  }
-
-  return Component;
+  return applyBsProp(Component, {
+    propName: 'bsSize',
+    defaultValue: defaultSize,
+    allowed: values
+  });
 });
 
 export function getClassSet(props) {
diff --git a/src/utils/mergeRefs.js b/src/utils/mergeRefs.js
new file mode 100644
index 0000000000..0497882706
--- /dev/null
+++ b/src/utils/mergeRefs.js
@@ -0,0 +1,41 @@
+import React, { useCallback } from 'react';
+
+const hasRefProp = parseInt(React.version, 10) >= 19;
+
+/**
+ * Given any number of React ref callbacks or ref objects, returns a new ref callback
+ * that sets all of the provided refs. This result isn't memoized, so useMergedRef
+ * should be preferred.
+ */
+export function makeMergedRef(refs) {
+  return el => {
+    refs.forEach(ref => {
+      if (typeof ref === 'function') {
+        ref(el);
+      } else if (ref != null) {
+        ref.current = el;
+      }
+    });
+  };
+}
+
+/**
+ * Given any number of React ref callbacks or ref objects, returns a new ref callback
+ * that sets all of the provided refs.
+ */
+export function useMergedRef(refs) {
+  return useCallback(makeMergedRef(refs), refs);
+}
+
+/**
+ * Given a React element, returns the ref of that object in a way that's compatible
+ * with different React versions.
+ */
+export function getElementRef(reactElement) {
+  if (!reactElement) {
+    return null;
+  }
+
+  // Accessing reactElement.ref prints a warning in React 19 and will likely be removed eventually
+  return hasRefProp ? reactElement.props.ref : reactElement.ref;
+}
diff --git a/test/CheckboxSpec.js b/test/CheckboxSpec.js
index 9500622b44..dd08da409d 100644
--- a/test/CheckboxSpec.js
+++ b/test/CheckboxSpec.js
@@ -1,74 +1,60 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 
 import Checkbox from '../src/Checkbox';
 
-import { shouldWarn } from './helpers';
+import { assertNone, assertSingle, shouldWarn } from './helpers';
 
 describe('<Checkbox>', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
-      <Checkbox name="foo" checked className="my-checkbox">
+    const { container } = render(
+      <Checkbox name="foo" checked readOnly className="my-checkbox">
         My label
       </Checkbox>
     );
 
-    wrapper
-      .assertSingle('div.checkbox.my-checkbox')
-      .assertSingle('input[type="checkbox"][name="foo"][checked]');
+    const div = assertSingle(container, 'div.checkbox.my-checkbox');
+    const input = assertSingle(div, 'input[type="checkbox"][name="foo"]');
+    expect(input.checked).to.equal(true);
 
-    wrapper
-      .assertSingle('label')
-      .text()
-      .should.equal('My label');
+    assertSingle(container, 'label').textContent.should.equal('My label');
   });
 
   it('should support inline', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Checkbox inline name="foo" className="my-checkbox">
         My label
       </Checkbox>
     );
 
-    wrapper
-      .assertSingle('label.checkbox-inline.my-checkbox')
-      .assertSingle('input[type="checkbox"][name="foo"]');
+    const label = assertSingle(container, 'label.checkbox-inline.my-checkbox');
+    assertSingle(label, 'input[type="checkbox"][name="foo"]');
 
-    wrapper
-      .assertSingle('label')
-      .text()
-      .should.equal('My label');
+    assertSingle(container, 'label').textContent.should.equal('My label');
   });
 
   it('should support validation state', () => {
-    shallow(<Checkbox validationState="success" />).assertSingle(
-      '.has-success'
-    );
+    const { container } = render(<Checkbox validationState="success" />);
+    assertSingle(container, '.has-success');
   });
 
   it('should not support validation state when inline', () => {
     shouldWarn('ignored');
 
-    shallow(<Checkbox inline validationState="success" />)
-      .find('.has-success')
-      .should.have.length(0);
+    const { container } = render(<Checkbox inline validationState="success" />);
+    assertNone(container, '.has-success');
   });
 
   it('should support inputRef', () => {
-    class Container extends React.Component {
-      render() {
-        return (
-          <Checkbox
-            inputRef={ref => {
-              this.input = ref;
-            }}
-          />
-        );
-      }
-    }
-
-    const instance = mount(<Container />).instance();
+    let input;
+    render(
+      <Checkbox
+        inputRef={ref => {
+          input = ref;
+        }}
+      />
+    );
 
-    expect(instance.input.tagName).to.equal('INPUT');
+    expect(input.tagName).to.equal('INPUT');
   });
 });
diff --git a/test/ControlLabelSpec.js b/test/ControlLabelSpec.js
index f7bcd054eb..f1b517a84f 100644
--- a/test/ControlLabelSpec.js
+++ b/test/ControlLabelSpec.js
@@ -1,45 +1,47 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 
 import ControlLabel from '../src/ControlLabel';
 import FormGroup from '../src/FormGroup';
 
-import { shouldWarn } from './helpers';
+import { assertSingle, shouldWarn } from './helpers';
 
 describe('<ControlLabel>', () => {
   it('should render correctly', () => {
+    const { container } = render(
+      <ControlLabel htmlFor="foo" className="my-control-label">
+        Label
+      </ControlLabel>
+    );
+
     expect(
-      shallow(
-        <ControlLabel htmlFor="foo" className="my-control-label">
-          Label
-        </ControlLabel>
-      )
-        .assertSingle('label.control-label.my-control-label[htmlFor="foo"]')
-        .text()
+      assertSingle(container, 'label.control-label.my-control-label[for="foo"]')
+        .textContent
     ).to.equal('Label');
   });
 
   it('should respect srOnly', () => {
-    shallow(<ControlLabel srOnly>Label</ControlLabel>).assertSingle(
-      'label.control-label.sr-only'
-    );
+    const { container } = render(<ControlLabel srOnly>Label</ControlLabel>);
+    assertSingle(container, 'label.control-label.sr-only');
   });
 
   it('should use controlId for htmlFor', () => {
-    mount(
+    const { container } = render(
       <FormGroup controlId="foo">
         <ControlLabel>Label</ControlLabel>
       </FormGroup>
-    ).assertSingle('label.control-label[htmlFor="foo"]');
+    );
+    assertSingle(container, 'label.control-label[for="foo"]');
   });
 
   it('should prefer explicit htmlFor', () => {
     shouldWarn('ignored');
 
-    mount(
+    const { container } = render(
       <FormGroup controlId="foo">
         <ControlLabel htmlFor="bar">Label</ControlLabel>
       </FormGroup>
-    ).assertSingle('label.control-label[htmlFor="bar"]');
+    );
+    assertSingle(container, 'label.control-label[for="bar"]');
   });
 });
diff --git a/test/DropdownSpec.js b/test/DropdownSpec.js
index 314e937bdc..614404da4c 100644
--- a/test/DropdownSpec.js
+++ b/test/DropdownSpec.js
@@ -5,6 +5,7 @@ import React from 'react';
 import Dropdown from '../src/Dropdown';
 import Grid from '../src/Grid';
 import MenuItem from '../src/MenuItem';
+import { getDuplicateRoleError } from '../src/utils/PropTypes';
 
 import { shouldWarn } from './helpers';
 
@@ -15,8 +16,6 @@ class CustomMenu extends React.Component {
 }
 
 describe('<Dropdown>', () => {
-  let BaseDropdown = Dropdown.ControlledComponent;
-
   const dropdownChildren = [
     <Dropdown.Toggle key="toggle">Child Title</Dropdown.Toggle>,
     <Dropdown.Menu key="menu">
@@ -110,12 +109,8 @@ describe('<Dropdown>', () => {
       ]
     };
 
-    let err = BaseDropdown.propTypes.children(
-      props,
-      'children',
-      'DropdownButton'
-    );
-    err.message.should.match(/Duplicate children.*bsRole: menu/);
+    const err = getDuplicateRoleError('DropdownButton', props.children, 'menu');
+    err.should.match(/Duplicate children.*bsRole: menu/);
   });
 
   it('forwards pullRight to menu', () => {
@@ -408,7 +403,6 @@ describe('<Dropdown>', () => {
     outerRef.dropdown.menu.should.exist;
 
     outerRef.toggle.should.exist;
-    outerRef.dropdown.toggle.should.exist;
   });
 
   describe('focusable state', () => {
diff --git a/test/FadeSpec.js b/test/FadeSpec.js
index 8f7e1f87da..6a50c9d74b 100644
--- a/test/FadeSpec.js
+++ b/test/FadeSpec.js
@@ -21,21 +21,22 @@ describe('Fade', () => {
   });
 
   it('Should default to hidden', () => {
-    let instance;
-    render(
-      <Component ref={element => (instance = element)}>Panel content</Component>
-    );
+    render(<Component>Panel content</Component>);
 
-    assert.ok(instance.fade.props.in === false);
+    assert.equal(screen.getByText('Panel content').className, 'fade');
   });
 
-  it('Should always have the "fade" class', () => {
+  it('Should forward its ref to the child element', () => {
     let instance;
     render(
       <Component ref={element => (instance = element)}>Panel content</Component>
     );
 
-    assert.ok(instance.fade.props.in === false);
+    assert.equal(instance.fade, screen.getByText('Panel content'));
+  });
+
+  it('Should always have the "fade" class', () => {
+    render(<Component>Panel content</Component>);
 
     assert.equal(screen.getByText('Panel content').className, 'fade');
   });
@@ -51,7 +52,7 @@ describe('Fade', () => {
       done();
     }
 
-    assert.ok(instance.fade.props.in === false);
+    assert.equal(screen.getByText('Panel content').className, 'fade');
 
     act(() => {
       instance.setState({ in: true, onEntering });
diff --git a/test/FormControlFeedbackSpec.js b/test/FormControlFeedbackSpec.js
index 7a726a1b22..adb812260c 100644
--- a/test/FormControlFeedbackSpec.js
+++ b/test/FormControlFeedbackSpec.js
@@ -1,42 +1,48 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 
 import FormControl from '../src/FormControl';
 import FormGroup from '../src/FormGroup';
 
+import { assertSingle } from './helpers';
+
 describe('<FormControl.Feedback>', () => {
   it('should render default success', () => {
-    mount(
+    const { container } = render(
       <FormGroup validationState="success">
         <FormControl.Feedback />
       </FormGroup>
-    ).assertSingle('.form-control-feedback.glyphicon-ok');
+    );
+    assertSingle(container, '.form-control-feedback.glyphicon-ok');
   });
 
   it('should render default warning', () => {
-    mount(
+    const { container } = render(
       <FormGroup validationState="warning">
         <FormControl.Feedback />
       </FormGroup>
-    ).assertSingle('.form-control-feedback.glyphicon-warning-sign');
+    );
+    assertSingle(container, '.form-control-feedback.glyphicon-warning-sign');
   });
 
   it('should render default error', () => {
-    mount(
+    const { container } = render(
       <FormGroup validationState="error">
         <FormControl.Feedback />
       </FormGroup>
-    ).assertSingle('.form-control-feedback.glyphicon-remove');
+    );
+    assertSingle(container, '.form-control-feedback.glyphicon-remove');
   });
 
   it('should render default validation state', () => {
-    mount(
+    const { container } = render(
       <FormGroup validationState="success">
         <div>
           <FormControl.Feedback />
         </div>
       </FormGroup>
-    ).assertSingle('.form-control-feedback.glyphicon-ok');
+    );
+    assertSingle(container, '.form-control-feedback.glyphicon-ok');
   });
 
   it('should render custom component', () => {
@@ -44,10 +50,11 @@ describe('<FormControl.Feedback>', () => {
       return <div {...props} />;
     }
 
-    mount(
+    const { container } = render(
       <FormControl.Feedback>
         <MyComponent className="foo" />
       </FormControl.Feedback>
-    ).assertSingle('MyComponent.foo.form-control-feedback');
+    );
+    assertSingle(container, '.foo.form-control-feedback');
   });
 });
diff --git a/test/FormControlSpec.js b/test/FormControlSpec.js
index 6632ab0e3a..e4e190509c 100644
--- a/test/FormControlSpec.js
+++ b/test/FormControlSpec.js
@@ -1,78 +1,72 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 
 import FormControl from '../src/FormControl';
 import FormGroup from '../src/FormGroup';
 
-import { shouldWarn } from './helpers';
+import { assertNone, assertSingle, shouldWarn } from './helpers';
 
 describe('<FormControl>', () => {
   it('should render correctly', () => {
-    shallow(
+    const { container } = render(
       <FormControl type="text" id="foo" name="bar" className="my-control" />
-    ).assertSingle('input#foo.form-control.my-control[name="bar"]');
+    );
+    assertSingle(container, 'input#foo.form-control.my-control[name="bar"]');
   });
 
   it('should support textarea', () => {
-    shallow(<FormControl componentClass="textarea" />).assertSingle(
-      'textarea.form-control'
-    );
+    const { container } = render(<FormControl componentClass="textarea" />);
+    assertSingle(container, 'textarea.form-control');
   });
 
   it('should support select', () => {
-    shallow(<FormControl componentClass="select" />).assertSingle(
-      'select.form-control'
-    );
+    const { container } = render(<FormControl componentClass="select" />);
+    assertSingle(container, 'select.form-control');
   });
 
   it('should not render .form-control for type="file"', () => {
-    shallow(<FormControl type="file" />)
-      .assertSingle('input[type="file"]')
-      .find('.form-control')
-      .should.have.length(0);
+    const { container } = render(<FormControl type="file" />);
+    assertSingle(container, 'input[type="file"]');
+    assertNone(container, '.form-control');
   });
 
   it('should use controlId for id', () => {
-    mount(
+    const { container } = render(
       <FormGroup controlId="foo">
         <FormControl type="text" />
       </FormGroup>
-    ).assertSingle('input#foo.form-control');
+    );
+    assertSingle(container, 'input#foo.form-control');
   });
 
   it('should prefer explicit id', () => {
     shouldWarn('ignored');
 
-    mount(
+    const { container } = render(
       <FormGroup controlId="foo">
         <FormControl type="text" id="bar" />
       </FormGroup>
-    ).assertSingle('input#bar.form-control');
+    );
+    assertSingle(container, 'input#bar.form-control');
   });
 
   it('should support inputRef', () => {
-    class Container extends React.Component {
-      render() {
-        return (
-          <FormGroup controlId="foo">
-            <FormControl
-              type="text"
-              inputRef={ref => {
-                this.input = ref;
-              }}
-            />
-          </FormGroup>
-        );
-      }
-    }
-
-    const instance = mount(<Container />).instance();
-    expect(instance.input.tagName).to.equal('INPUT');
+    let input;
+    render(
+      <FormGroup controlId="foo">
+        <FormControl
+          type="text"
+          inputRef={ref => {
+            input = ref;
+          }}
+        />
+      </FormGroup>
+    );
+    expect(input.tagName).to.equal('INPUT');
   });
 
   it('should properly display size of FormControl', () => {
-    mount(<FormControl type="text" bsSize="lg" />).assertSingle(
-      'input.form-control.input-lg'
-    );
+    const { container } = render(<FormControl type="text" bsSize="lg" />);
+    assertSingle(container, 'input.form-control.input-lg');
   });
 });
diff --git a/test/FormControlStaticSpec.js b/test/FormControlStaticSpec.js
index 50047127b5..288a51a018 100644
--- a/test/FormControlStaticSpec.js
+++ b/test/FormControlStaticSpec.js
@@ -1,18 +1,21 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { shallow } from 'enzyme';
 
 import FormControl from '../src/FormControl';
 
+import { assertSingle } from './helpers';
+
 describe('<FormControl.Static>', () => {
   it('should render correctly', () => {
+    const { container } = render(
+      <FormControl.Static name="foo" className="my-form-control-static">
+        Static text
+      </FormControl.Static>
+    );
+
     expect(
-      shallow(
-        <FormControl.Static name="foo" className="my-form-control-static">
-          Static text
-        </FormControl.Static>
-      )
-        .assertSingle('.form-control-static.my-form-control-static')
-        .text()
+      assertSingle(container, '.form-control-static.my-form-control-static')
+        .textContent
     ).to.equal('Static text');
   });
 
@@ -21,14 +24,14 @@ describe('<FormControl.Static>', () => {
       return <div {...props}>{children}</div>;
     }
 
-    expect(
-      shallow(
-        <FormControl.Static componentClass={MyComponent}>
-          Static text
-        </FormControl.Static>
-      )
-        .assertSingle('MyComponent.form-control-static')
-        .contains('Static text')
-    ).to.equal(true);
+    const { container } = render(
+      <FormControl.Static componentClass={MyComponent}>
+        Static text
+      </FormControl.Static>
+    );
+
+    const node = assertSingle(container, '.form-control-static');
+    assert.equal(node.nodeName, 'DIV');
+    expect(node.textContent).to.contain('Static text');
   });
 });
diff --git a/test/FormSpec.js b/test/FormSpec.js
index a53aad9224..8972ac912c 100644
--- a/test/FormSpec.js
+++ b/test/FormSpec.js
@@ -1,37 +1,45 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { shallow } from 'enzyme';
 
 import Form from '../src/Form';
 import FormGroup from '../src/FormGroup';
 
+import { assertSingle } from './helpers';
+
 describe('<Form>', () => {
   it('should support horizontal', () => {
-    shallow(
+    const { container } = render(
       <Form horizontal className="my-form">
         <FormGroup />
       </Form>
-    )
-      .assertSingle('form.form-horizontal.my-form')
-      .assertSingle(FormGroup);
+    );
+
+    const form = assertSingle(container, 'form.form-horizontal.my-form');
+    assertSingle(form, '.form-group');
   });
 
   it('should support inline', () => {
-    shallow(
+    const { container } = render(
       <Form inline className="my-form">
         <FormGroup />
       </Form>
-    )
-      .assertSingle('form.form-inline.my-form')
-      .assertSingle(FormGroup);
+    );
+
+    const form = assertSingle(container, 'form.form-inline.my-form');
+    assertSingle(form, '.form-group');
   });
 
   it('should support custom componentClass', () => {
-    shallow(
+    const { container } = render(
       <Form componentClass="fieldset" horizontal className="my-form">
         <FormGroup />
       </Form>
-    )
-      .assertSingle('fieldset.form-horizontal.my-form')
-      .assertSingle(FormGroup);
+    );
+
+    const fieldset = assertSingle(
+      container,
+      'fieldset.form-horizontal.my-form'
+    );
+    assertSingle(fieldset, '.form-group');
   });
 });
diff --git a/test/HelpBlockSpec.js b/test/HelpBlockSpec.js
index 0a07d501d5..123bd51834 100644
--- a/test/HelpBlockSpec.js
+++ b/test/HelpBlockSpec.js
@@ -1,18 +1,20 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { shallow } from 'enzyme';
 
 import HelpBlock from '../src/HelpBlock';
 
+import { assertSingle } from './helpers';
+
 describe('<HelpBlock>', () => {
   it('should render correctly', () => {
+    const { container } = render(
+      <HelpBlock id="foo" className="my-help-block">
+        Help contents
+      </HelpBlock>
+    );
+
     expect(
-      shallow(
-        <HelpBlock id="foo" className="my-help-block">
-          Help contents
-        </HelpBlock>
-      )
-        .assertSingle('#foo.help-block.my-help-block')
-        .text()
+      assertSingle(container, '#foo.help-block.my-help-block').textContent
     ).to.equal('Help contents');
   });
 });
diff --git a/test/InputGroupSpec.js b/test/InputGroupSpec.js
index 35f4568c89..ef02a37e61 100644
--- a/test/InputGroupSpec.js
+++ b/test/InputGroupSpec.js
@@ -1,13 +1,15 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 
 import Button from '../src/Button';
 import FormControl from '../src/FormControl';
 import InputGroup from '../src/InputGroup';
 
+import { assertSingle } from './helpers';
+
 describe('<InputGroup>', () => {
   it('should render properly', () => {
-    const wrapper = mount(
+    const { container } = render(
       <InputGroup className="my-input-group">
         <InputGroup.Addon className="my-addon">Foo</InputGroup.Addon>
 
@@ -17,21 +19,22 @@ describe('<InputGroup>', () => {
           <Button>Bar</Button>
         </InputGroup.Button>
       </InputGroup>
-    ).assertSingle('.input-group.my-input-group');
+    );
+    const wrapper = assertSingle(container, '.input-group.my-input-group');
 
-    wrapper
-      .assertSingle('.input-group-addon.my-addon')
-      .text()
-      .should.equal('Foo');
+    assertSingle(
+      wrapper,
+      '.input-group-addon.my-addon'
+    ).textContent.should.equal('Foo');
 
-    wrapper.assertSingle('input.form-control[type="text"]');
+    assertSingle(wrapper, 'input.form-control[type="text"]');
 
-    wrapper.assertSingle('.input-group-btn.my-button').assertSingle(Button);
+    const button = assertSingle(wrapper, '.input-group-btn.my-button');
+    assertSingle(button, '.btn');
   });
 
   it('should support bsSize', () => {
-    shallow(<InputGroup bsSize="small" />).assertSingle(
-      '.input-group.input-group-sm'
-    );
+    const { container } = render(<InputGroup bsSize="small" />);
+    assertSingle(container, '.input-group.input-group-sm');
   });
 });
diff --git a/test/MenuItemSpec.js b/test/MenuItemSpec.js
index 2493b3724b..1343d35df2 100644
--- a/test/MenuItemSpec.js
+++ b/test/MenuItemSpec.js
@@ -1,7 +1,6 @@
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { shallow } from 'enzyme';
 
 import MenuItem from '../src/MenuItem';
 
@@ -146,17 +145,23 @@ describe('<MenuItem>', () => {
   });
 
   it('does not pass onClick to DOM node', () => {
-    shallow(<MenuItem onSelect={() => {}}>Item</MenuItem>)
-      .children()
-      .props()
-      .should.not.have.property('onSelect');
+    // `onSelect` is an internal prop and must not leak onto the rendered DOM
+    // node. There is no DOM attribute for `onSelect`, so the closest observable
+    // check is that the rendered anchor carries no `onselect` attribute (and no
+    // React unknown-prop warning is emitted, which the harness would surface).
+    const { container } = render(<MenuItem onSelect={() => {}}>Item</MenuItem>);
+    const anchor = container.querySelector('a');
+
+    assert.equal(anchor.getAttribute('onselect'), null);
   });
 
   it('does not pass onClick to children', () => {
-    shallow(<MenuItem onSelect={() => {}}>Item</MenuItem>)
-      .find('SafeAnchor')
-      .props()
-      .should.not.have.property('onSelect');
+    // Same intent as above: `onSelect` is omitted before being spread onto the
+    // child SafeAnchor, so it never reaches the rendered anchor element.
+    const { container } = render(<MenuItem onSelect={() => {}}>Item</MenuItem>);
+    const anchor = container.querySelector('a');
+
+    assert.equal(anchor.getAttribute('onselect'), null);
   });
 
   it('disabled link', async () => {
diff --git a/test/ModalSpec.js b/test/ModalSpec.js
index ba3948f4c3..874423ae2f 100644
--- a/test/ModalSpec.js
+++ b/test/ModalSpec.js
@@ -20,7 +20,7 @@ describe('<Modal>', () => {
       </Modal>
     );
 
-    assert.ok(instance._modal.getDialogElement().querySelector('strong'));
+    assert.ok(instance._modal.dialog.querySelector('strong'));
   });
 
   it('Should close the modal when the modal dialog is clicked', done => {
@@ -35,7 +35,7 @@ describe('<Modal>', () => {
       </Modal>
     );
 
-    const dialog = instance._modal.getDialogElement();
+    const dialog = instance._modal.dialog;
 
     userEvent.click(dialog);
   });
@@ -54,7 +54,7 @@ describe('<Modal>', () => {
       </Modal>
     );
 
-    const dialog = instance._modal.getDialogElement();
+    const dialog = instance._modal.dialog;
 
     userEvent.click(dialog);
 
@@ -74,15 +74,13 @@ describe('<Modal>', () => {
       </Modal>
     );
 
-    const button = instance._modal
-      .getDialogElement()
-      .getElementsByClassName('close')[0];
+    const button = instance._modal.dialog.getElementsByClassName('close')[0];
 
     userEvent.click(button);
   });
 
   it('Should close the modal when the escape key is pressed with keyboard=true', async () => {
-    const handleHide = sinon.spy();
+    const handleHide = sinon.spy(() => {});
 
     render(
       <Modal show onHide={handleHide} keyboard>
@@ -125,7 +123,7 @@ describe('<Modal>', () => {
       </Modal>
     );
 
-    const dialog = instance._modal.getDialogElement();
+    const dialog = instance._modal.dialog;
 
     assert.ok(dialog.className.match(/\bmymodal\b/));
   });
@@ -144,7 +142,7 @@ describe('<Modal>', () => {
       </Modal>
     );
 
-    const modal = instance._modal.getDialogElement();
+    const modal = instance._modal.dialog;
 
     assert.ok(modal.className.match(/\bmymodal\b/));
     assert.ok(modal.children[0].className.match(/\bmymodal-dialog\b/));
@@ -180,9 +178,9 @@ describe('<Modal>', () => {
       </Modal>
     );
 
-    const dialog = instance._modal
-      .getDialogElement()
-      .getElementsByClassName('modal-dialog')[0];
+    const dialog = instance._modal.dialog.getElementsByClassName(
+      'modal-dialog'
+    )[0];
 
     assert.ok(dialog.className.match(/\bmodal-sm\b/));
   });
@@ -201,7 +199,7 @@ describe('<Modal>', () => {
       </Modal>
     );
 
-    const dialog = instance._modal.getDialogElement();
+    const dialog = instance._modal.dialog;
 
     assert.ok(dialog.style.top === '1000px');
   });
@@ -220,9 +218,7 @@ describe('<Modal>', () => {
       </Modal>
     );
 
-    const dialog = instance._modal
-      .getDialogElement()
-      .querySelector('.modal-dialog');
+    const dialog = instance._modal.dialog.querySelector('.modal-dialog');
 
     assert.ok(dialog.className.match(/\btestCss\b/));
   });
@@ -230,8 +226,8 @@ describe('<Modal>', () => {
   it('Should use dialogComponentClass', () => {
     const noOp = () => {};
 
-    function CustomDialog() {
-      return <div className="custom-dialog" tabIndex="-1" />;
+    function CustomDialog({ ref }) {
+      return <div ref={ref} className="custom-dialog" tabIndex="-1" />;
     }
 
     let instance;
@@ -246,7 +242,7 @@ describe('<Modal>', () => {
       </Modal>
     );
 
-    assert.equal(instance._modal.getDialogElement().className, 'custom-dialog');
+    assert.equal(instance._modal.dialog.className, 'custom-dialog');
   });
 
   it('Should pass transition callbacks to Transition', done => {
diff --git a/test/NavSpec.js b/test/NavSpec.js
index 892090cccc..ff7aee81ff 100644
--- a/test/NavSpec.js
+++ b/test/NavSpec.js
@@ -1,7 +1,6 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen, fireEvent, act } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import React from 'react';
-import { mount } from 'enzyme';
 
 import Nav from '../src/Nav';
 import NavItem from '../src/NavItem';
@@ -136,32 +135,41 @@ describe('<Nav>', () => {
   });
 
   describe('keyboard navigation', () => {
-    let instance;
-    let selectSpy;
-
-    beforeEach(() => {
-      instance = mount(
-        <Nav activeKey={1} onSelect={selectSpy} role="tablist">
-          <NavItem eventKey={1}>NavItem 1 content</NavItem>
-          <NavItem eventKey={2} disabled>
-            NavItem 2 content
-          </NavItem>
-          <NavItem eventKey={3}>NavItem 3 content</NavItem>
-          <NavItem eventKey={4} disabled>
-            NavItem 4 content
-          </NavItem>
-          <NavItem eventKey={5}>NavItem 5 content</NavItem>
-        </Nav>,
-        { attachTo: mountPoint }
-      );
-
-      selectSpy = sinon.spy(activeKey => instance.setProps({ activeKey }));
-    });
-
-    afterEach(() => instance.unmount());
+    // Renders a `<Nav>` wrapped in a controlled parent, mirroring the way a
+    // real consumer updates `activeKey` in response to `onSelect`. `state`
+    // exposes the current `activeKey` and a setter so tests can drive and
+    // observe it in place of enzyme's `instance.prop`/`setProps`.
+    function renderNav(startKey = 1) {
+      const state = { setActiveKey: null, activeKey: startKey };
+      const selectSpy = sinon.spy(activeKey => state.setActiveKey(activeKey));
+
+      function ControlledNav() {
+        const [activeKey, setActiveKey] = React.useState(startKey);
+        state.setActiveKey = setActiveKey;
+        state.activeKey = activeKey;
+
+        return (
+          <Nav activeKey={activeKey} onSelect={selectSpy} role="tablist">
+            <NavItem eventKey={1}>NavItem 1 content</NavItem>
+            <NavItem eventKey={2} disabled>
+              NavItem 2 content
+            </NavItem>
+            <NavItem eventKey={3}>NavItem 3 content</NavItem>
+            <NavItem eventKey={4} disabled>
+              NavItem 4 content
+            </NavItem>
+            <NavItem eventKey={5}>NavItem 5 content</NavItem>
+          </Nav>
+        );
+      }
+
+      const { container } = render(<ControlledNav />);
+      return { container, selectSpy, state };
+    }
 
     it('only the active tab should be focusable', () => {
-      const links = instance.find('a').map(n => n.getDOMNode());
+      const { container } = renderNav();
+      const links = Array.from(container.querySelectorAll('a'));
 
       expect(links[0].getAttribute('tabindex')).to.not.equal('-1');
       expect(links[1].getAttribute('tabindex')).to.equal('-1');
@@ -171,120 +179,101 @@ describe('<Nav>', () => {
     });
 
     it('should focus the next tab on arrow key', () => {
-      const anchors = instance.find('a');
-      anchors
-        .at(0)
-        .getDOMNode()
-        .focus();
-
-      anchors.at(0).simulate('keydown', {
-        key: 'ArrowRight'
-      });
+      const { container, state } = renderNav();
+      const anchors = Array.from(container.querySelectorAll('a'));
+      anchors[0].focus();
 
-      expect(instance.prop('activeKey')).to.equal(3);
+      fireEvent.keyDown(anchors[0], { key: 'ArrowRight' });
 
-      expect(document.activeElement).to.equal(anchors.at(2).getDOMNode());
+      expect(state.activeKey).to.equal(3);
+      expect(document.activeElement).to.equal(anchors[2]);
     });
 
     it('should focus the previous tab on arrow key', () => {
-      instance.setProps({ activeKey: 5 });
+      const { container, state } = renderNav();
+      act(() => state.setActiveKey(5));
 
-      const anchors = instance.find('a');
-      anchors
-        .at(4)
-        .getDOMNode()
-        .focus();
+      const anchors = Array.from(container.querySelectorAll('a'));
+      anchors[4].focus();
 
-      anchors.at(4).simulate('keydown', { key: 'ArrowLeft' });
+      fireEvent.keyDown(anchors[4], { key: 'ArrowLeft' });
 
-      expect(instance.props().activeKey).to.equal(3);
-      expect(document.activeElement).to.equal(anchors.at(2).getDOMNode());
+      expect(state.activeKey).to.equal(3);
+      expect(document.activeElement).to.equal(anchors[2]);
     });
 
     it('should wrap to the next tab on arrow key', () => {
-      instance.setProps({ activeKey: 5 });
+      const { container, state } = renderNav();
+      act(() => state.setActiveKey(5));
 
-      const anchors = instance.find('a');
-      anchors
-        .at(4)
-        .getDOMNode()
-        .focus();
+      const anchors = Array.from(container.querySelectorAll('a'));
+      anchors[4].focus();
 
-      anchors.at(4).simulate('keydown', { key: 'ArrowDown' });
+      fireEvent.keyDown(anchors[4], { key: 'ArrowDown' });
 
-      expect(instance.props().activeKey).to.equal(1);
-      expect(document.activeElement).to.equal(anchors.at(0).getDOMNode());
+      expect(state.activeKey).to.equal(1);
+      expect(document.activeElement).to.equal(anchors[0]);
     });
 
     it('should wrap to the previous tab on arrow key', () => {
-      const anchors = instance.find('a');
-      anchors
-        .at(0)
-        .getDOMNode()
-        .focus();
+      const { container, state } = renderNav();
+      const anchors = Array.from(container.querySelectorAll('a'));
+      anchors[0].focus();
 
-      anchors.at(0).simulate('keydown', { key: 'ArrowUp' });
+      fireEvent.keyDown(anchors[0], { key: 'ArrowUp' });
 
-      expect(instance.props().activeKey).to.equal(5);
-      expect(document.activeElement).to.equal(anchors.at(4).getDOMNode());
+      expect(state.activeKey).to.equal(5);
+      expect(document.activeElement).to.equal(anchors[4]);
     });
   });
 
   describe('event keys', () => {
-    it('should accept any number as an event key', () => {
-      let instance;
-      let selectSpy = sinon.spy(activeKey => instance.setProps({ activeKey }));
-      instance = mount(
-        <Nav activeKey={-100} onSelect={selectSpy} role="tablist">
-          <NavItem eventKey={-100}>NavItem 1 content</NavItem>
-          <NavItem eventKey={0}>NavItem 2 content</NavItem>
-          <NavItem eventKey={1}>NavItem 3 content</NavItem>
-        </Nav>,
-        { attachTo: mountPoint }
-      );
+    function renderNav(startKey, items) {
+      const state = { setActiveKey: null, activeKey: startKey };
+      const selectSpy = sinon.spy(activeKey => state.setActiveKey(activeKey));
+
+      function ControlledNav() {
+        const [activeKey, setActiveKey] = React.useState(startKey);
+        state.setActiveKey = setActiveKey;
+        state.activeKey = activeKey;
+
+        return (
+          <Nav activeKey={activeKey} onSelect={selectSpy} role="tablist">
+            {items.map(eventKey => (
+              <NavItem key={String(eventKey)} eventKey={eventKey}>
+                NavItem {String(eventKey)} content
+              </NavItem>
+            ))}
+          </Nav>
+        );
+      }
+
+      const { container } = render(<ControlledNav />);
+      return { container, selectSpy, state };
+    }
 
-      const anchors = instance.find('a');
-      anchors
-        .at(0)
-        .getDOMNode()
-        .focus();
+    it('should accept any number as an event key', () => {
+      const { container, state } = renderNav(-100, [-100, 0, 1]);
 
-      anchors.at(0).simulate('keydown', {
-        key: 'ArrowRight'
-      });
+      const anchors = Array.from(container.querySelectorAll('a'));
+      anchors[0].focus();
 
-      expect(instance.props().activeKey).to.equal(0);
-      expect(document.activeElement).to.equal(anchors.at(1).getDOMNode());
+      fireEvent.keyDown(anchors[0], { key: 'ArrowRight' });
 
-      instance.unmount();
+      expect(state.activeKey).to.equal(0);
+      expect(document.activeElement).to.equal(anchors[1]);
     });
 
     it('should accept any string as an event key', () => {
-      let instance;
-      let selectSpy = sinon.spy(activeKey => instance.setProps({ activeKey }));
-      instance = mount(
-        <Nav activeKey="" onSelect={selectSpy} role="tablist">
-          <NavItem eventKey="a">NavItem 1 content</NavItem>
-          <NavItem eventKey="b">NavItem 2 content</NavItem>
-          <NavItem eventKey="">NavItem 3 content</NavItem>
-        </Nav>,
-        { attachTo: mountPoint }
-      );
-
-      const anchors = instance.find('a');
-      anchors
-        .at(2)
-        .getDOMNode()
-        .focus();
+      const { container, state } = renderNav('', ['a', 'b', '']);
 
-      anchors.at(2).simulate('keydown', {
-        key: 'ArrowRight'
-      });
+      const anchors = Array.from(container.querySelectorAll('a'));
+      anchors[2].focus();
 
-      expect(instance.props().activeKey).to.equal('a');
-      expect(document.activeElement).to.equal(anchors.at(0).getDOMNode());
+      fireEvent.keyDown(anchors[2], { key: 'ArrowRight' });
 
-      instance.unmount();
+      expect(state.activeKey).to.equal('a');
+      expect(document.activeElement).to.equal(anchors[0]);
     });
   });
 
diff --git a/test/OverlayTriggerSpec.js b/test/OverlayTriggerSpec.js
index 158bd9d679..c8eba6d4c8 100644
--- a/test/OverlayTriggerSpec.js
+++ b/test/OverlayTriggerSpec.js
@@ -1,6 +1,5 @@
 import { act, render, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import PropTypes from 'prop-types';
 import React from 'react';
 
 import OverlayTrigger from '../src/OverlayTrigger';
@@ -140,9 +139,8 @@ describe('<OverlayTrigger>', () => {
   });
 
   it('Should forward requested context', async () => {
-    const contextTypes = {
-      key: PropTypes.string
-    };
+    const TestContext = React.createContext(undefined);
+    TestContext.displayName = 'TestContext';
 
     const contextSpy = sinon.spy();
 
@@ -153,22 +151,19 @@ describe('<OverlayTrigger>', () => {
       }
     }
 
-    ContextReader.contextTypes = contextTypes;
+    ContextReader.contextType = TestContext;
 
     class ContextHolder extends React.Component {
-      getChildContext() {
-        return { key: 'value' };
-      }
-
       render() {
         return (
-          <OverlayTrigger trigger="click" overlay={<ContextReader />}>
-            <button>button</button>
-          </OverlayTrigger>
+          <TestContext.Provider value={{ key: 'value' }}>
+            <OverlayTrigger trigger="click" overlay={<ContextReader />}>
+              <button>button</button>
+            </OverlayTrigger>
+          </TestContext.Provider>
         );
       }
     }
-    ContextHolder.childContextTypes = contextTypes;
 
     render(<ContextHolder />);
     const overlayTrigger = screen.getByText('button');
diff --git a/test/PanelGroupSpec.js b/test/PanelGroupSpec.js
index d12ef9f120..def3d8db73 100644
--- a/test/PanelGroupSpec.js
+++ b/test/PanelGroupSpec.js
@@ -1,12 +1,10 @@
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
 
-import { mount } from 'enzyme';
-
 import Panel from '../src/Panel';
 import PanelGroup from '../src/PanelGroup';
 
-import { shouldWarn } from './helpers';
+import { assertSingle, shouldWarn } from './helpers';
 
 describe('<PanelGroup>', () => {
   it('Should pass bsStyle to Panels', () => {
@@ -39,7 +37,7 @@ describe('<PanelGroup>', () => {
 
   describe('accordion', () => {
     it('Should not collapse panel by bubbling onSelect callback', () => {
-      mount(
+      const { container } = render(
         <PanelGroup
           accordion
           id="panel"
@@ -51,9 +49,9 @@ describe('<PanelGroup>', () => {
             <input type="text" className="changeme" />
           </Panel>
         </PanelGroup>
-      )
-        .assertSingle('input.changeme')
-        .simulate('select');
+      );
+
+      fireEvent.select(assertSingle(container, 'input.changeme'));
     });
 
     it('Should call onSelect handler with eventKey', done => {
@@ -63,7 +61,7 @@ describe('<PanelGroup>', () => {
         done();
       }
 
-      mount(
+      const { container } = render(
         <PanelGroup accordion onSelect={handleSelect} id="panel">
           <Panel eventKey="1">
             <Panel.Heading>
@@ -73,13 +71,13 @@ describe('<PanelGroup>', () => {
             <Panel.Body collapsible>Panel 1</Panel.Body>
           </Panel>
         </PanelGroup>
-      )
-        .find('a')
-        .simulate('click');
+      );
+
+      fireEvent.click(assertSingle(container, 'a'));
     });
 
     it('Should manage expanded panels', () => {
-      const inst = mount(
+      const { container } = render(
         <PanelGroup accordion defaultActiveKey="1" id="panel">
           <Panel id="panel1" eventKey="1">
             <Panel.Heading>
@@ -98,20 +96,18 @@ describe('<PanelGroup>', () => {
         </PanelGroup>
       );
 
-      const panel1 = inst.find('#panel1').find('a');
-      const panel2 = inst.find('#panel2').find('a');
-      const panel1Dom = panel1.getDOMNode();
-      const panel2Dom = panel2.getDOMNode();
+      const panel1Dom = container.querySelector('#panel1 a');
+      const panel2Dom = container.querySelector('#panel2 a');
 
-      panel2.simulate('click');
+      fireEvent.click(panel2Dom);
       assert.equal(panel1Dom.getAttribute('class'), 'collapsed');
       assert.equal(panel2Dom.getAttribute('class'), '');
 
-      panel1.simulate('click');
+      fireEvent.click(panel1Dom);
       assert.equal(panel1Dom.getAttribute('class'), '');
       assert.equal(panel2Dom.getAttribute('class'), 'collapsed');
 
-      panel1.simulate('click');
+      fireEvent.click(panel1Dom);
       assert.equal(panel1Dom.getAttribute('class'), 'collapsed');
       assert.equal(panel2Dom.getAttribute('class'), 'collapsed');
     });
@@ -119,7 +115,7 @@ describe('<PanelGroup>', () => {
     it('Should warn if panel has explicit expanded', () => {
       shouldWarn('`<Panel>` `expanded`');
 
-      mount(
+      render(
         <PanelGroup accordion defaultActiveKey="1" id="panel">
           <Panel id="panel1" eventKey="1" />
           <Panel id="panel2" eventKey="2" expanded onToggle={() => {}} />
@@ -132,7 +128,7 @@ describe('<PanelGroup>', () => {
     let panelBodies, panelGroup, headers, links; // eslint-disable-line
 
     beforeEach(() => {
-      const inst = mount(
+      const { container } = render(
         <PanelGroup accordion defaultActiveKey="1" id="panel">
           <Panel eventKey="1">
             <Panel.Heading>
@@ -151,10 +147,10 @@ describe('<PanelGroup>', () => {
         </PanelGroup>
       );
 
-      panelGroup = inst.getDOMNode();
-      panelBodies = inst.find('.panel-collapse').map(n => n.getDOMNode());
-      headers = inst.find('.panel-heading').map(n => n.getDOMNode());
-      links = inst.find('.panel-heading a').map(n => n.getDOMNode());
+      panelGroup = container.querySelector('.panel-group');
+      panelBodies = Array.from(container.querySelectorAll('.panel-collapse'));
+      headers = Array.from(container.querySelectorAll('.panel-heading'));
+      links = Array.from(container.querySelectorAll('.panel-heading a'));
     });
 
     it('Should have a role of tablist', () => {
diff --git a/test/PanelSpec.js b/test/PanelSpec.js
index 7b3aa61978..088a5b1548 100644
--- a/test/PanelSpec.js
+++ b/test/PanelSpec.js
@@ -1,122 +1,141 @@
+import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
 
-import { mount } from 'enzyme';
-
 import Panel from '../src/Panel';
 
+import { assertSingle, assertNone } from './helpers';
+
 describe('<Panel>', () => {
   it('Should have class and body', () => {
-    const inst = mount(
+    const { container } = render(
       <Panel>
         <Panel.Body>Panel content</Panel.Body>
       </Panel>
     );
 
-    inst.assertSingle('div.panel.panel-default');
-    inst.assertSingle('div.panel-body');
+    assertSingle(container, 'div.panel.panel-default');
+    assertSingle(container, 'div.panel-body');
   });
 
   it('Should have bootstrap style class', () => {
-    mount(
+    const { container } = render(
       <Panel bsStyle="primary">
         <Panel.Body>Panel content</Panel.Body>
       </Panel>
-    ).assertSingle('div.panel-primary');
+    );
+
+    assertSingle(container, 'div.panel-primary');
   });
 
   it('Should honor additional classes passed in; adding not overriding', () => {
-    mount(<Panel className="foo" />).assertSingle('div.foo');
+    const { container } = render(<Panel className="foo" />);
+
+    assertSingle(container, 'div.foo');
   });
 
   it('Should have unwrapped header', () => {
-    mount(
+    const { container } = render(
       <Panel>
         <Panel.Heading>Heading</Panel.Heading>
       </Panel>
-    )
-      .assertSingle('div.panel-heading')
-      .text()
-      .should.equal('Heading');
+    );
+
+    assertSingle(container, 'div.panel-heading').textContent.should.equal(
+      'Heading'
+    );
   });
 
   it('Should have custom component header', () => {
-    mount(
+    const { container } = render(
       <Panel>
         <Panel.Heading componentClass="h3">Heading</Panel.Heading>
       </Panel>
-    )
-      .assertSingle('h3.panel-heading')
-      .text()
-      .should.equal('Heading');
+    );
+
+    assertSingle(container, 'h3.panel-heading').textContent.should.equal(
+      'Heading'
+    );
   });
 
   describe('<PanelTitle>', () => {
     it('Should render a title', () => {
-      mount(<Panel.Title>foo</Panel.Title>)
-        .assertSingle('div.panel-title')
-        .text()
-        .should.equal('foo');
+      const { container } = render(<Panel.Title>foo</Panel.Title>);
+
+      assertSingle(container, 'div.panel-title').textContent.should.equal(
+        'foo'
+      );
     });
 
     it('Should render a custom component', () => {
-      mount(<Panel.Title componentClass="h3">foo</Panel.Title>).assertSingle(
-        'h3.panel-title'
+      const { container } = render(
+        <Panel.Title componentClass="h3">foo</Panel.Title>
       );
+
+      assertSingle(container, 'h3.panel-title');
     });
 
     it('Should render with a toggle', () => {
-      mount(<Panel.Title toggle>foo</Panel.Title>).assertSingle(
-        '.panel-title > PanelToggle'
-      );
+      const { container } = render(<Panel.Title toggle>foo</Panel.Title>);
+
+      // The toggle renders a `SafeAnchor` (an `<a>`) directly inside the title.
+      assertSingle(container, '.panel-title > a');
     });
   });
 
   describe('<PanelToggle>', () => {
     it('Should render a Toggle a SafeAnchor', () => {
-      mount(<Panel.Toggle>foo</Panel.Toggle>)
-        .assertSingle('SafeAnchor')
-        .assertSingle('a[role="button"][href="#"]');
+      const { container } = render(<Panel.Toggle>foo</Panel.Toggle>);
+
+      assertSingle(container, 'a[role="button"][href="#"]');
     });
 
     it('Should render a custom component', () => {
-      mount(<Panel.Toggle componentClass="h3">foo</Panel.Toggle>).assertSingle(
-        'h3'
+      const { container } = render(
+        <Panel.Toggle componentClass="h3">foo</Panel.Toggle>
       );
+
+      assertSingle(container, 'h3');
     });
 
     it('Should simulate onToggle', done => {
-      mount(
+      const { container } = render(
         <Panel onToggle={() => done()}>
           <Panel.Toggle>foo</Panel.Toggle>
         </Panel>
-      )
-        .assertSingle('PanelToggle')
-        .simulate('click');
+      );
+
+      fireEvent.click(assertSingle(container, 'a'));
     });
   });
 
   it('Should have a footer', () => {
-    mount(
+    const { container } = render(
       <Panel>
         <Panel.Footer>foo</Panel.Footer>
       </Panel>
-    ).assertSingle('div.panel-footer');
+    );
+
+    assertSingle(container, 'div.panel-footer');
   });
 
   it('Should have collapse classes', () => {
-    mount(
+    const { container } = render(
       <Panel defaultExpanded>
         <Panel.Body collapsible>Panel content</Panel.Body>
       </Panel>
-    ).assertSingle('div.panel-collapse.collapse.in');
+    );
+
+    assertSingle(container, 'div.panel-collapse.collapse.in');
   });
 
   it('Should pass through dom properties', () => {
-    mount(<Panel id="testid">Panel content</Panel>).assertSingle('div#testid');
+    const { container } = render(<Panel id="testid">Panel content</Panel>);
+
+    assertSingle(container, 'div#testid');
   });
 
   it('Should set ids on toggle and collapse', () => {
-    const inst = mount(
+    const { container } = render(
       <Panel id="testid">
         <Panel.Heading>
           <Panel.Title toggle>foo</Panel.Title>
@@ -125,12 +144,12 @@ describe('<Panel>', () => {
       </Panel>
     );
 
-    inst.assertSingle('#testid--body.panel-collapse');
-    inst.assertSingle('#testid--heading.panel-heading');
+    assertSingle(container, '#testid--body.panel-collapse');
+    assertSingle(container, '#testid--heading.panel-heading');
   });
 
   it('Should be open', () => {
-    const inst = mount(
+    const { container } = render(
       <Panel defaultExpanded>
         <Panel.Heading>
           <Panel.Title toggle>foo</Panel.Title>
@@ -140,12 +159,12 @@ describe('<Panel>', () => {
       </Panel>
     );
 
-    inst.assertSingle('.in.panel-collapse');
-    inst.assertNone('a.collapsed');
+    assertSingle(container, '.in.panel-collapse');
+    assertNone(container, 'a.collapsed');
   });
 
   it('Should be closed', () => {
-    const inst = mount(
+    const { container } = render(
       <Panel defaultExpanded={false}>
         <Panel.Heading>
           <Panel.Title toggle>foo</Panel.Title>
@@ -155,12 +174,12 @@ describe('<Panel>', () => {
       </Panel>
     );
 
-    inst.assertNone('.in.panel-collapse');
-    inst.assertSingle('a.collapsed');
+    assertNone(container, '.in.panel-collapse');
+    assertSingle(container, 'a.collapsed');
   });
 
   it('Should toggle when uncontrolled', () => {
-    const inst = mount(
+    const { container } = render(
       <Panel defaultExpanded={false}>
         <Panel.Heading>
           <Panel.Title toggle>foo</Panel.Title>
@@ -170,17 +189,18 @@ describe('<Panel>', () => {
       </Panel>
     );
 
-    inst.assertSingle('a').simulate('click');
+    fireEvent.click(assertSingle(container, 'a'));
 
-    inst
-      .children() // get pass controlled wrapper
-      .prop('expanded')
-      .should.equal(true);
+    // Toggling the uncontrolled panel expands it, which the toggle reflects
+    // through its `aria-expanded` attribute.
+    assertSingle(container, 'a')
+      .getAttribute('aria-expanded')
+      .should.equal('true');
   });
 
   describe('Web Accessibility', () => {
     it('Should be aria-expanded=true', () => {
-      mount(
+      const { container } = render(
         <Panel defaultExpanded>
           <Panel.Heading>
             <Panel.Title toggle>foo</Panel.Title>
@@ -188,11 +208,13 @@ describe('<Panel>', () => {
 
           <Panel.Body collapsible>Panel content</Panel.Body>
         </Panel>
-      ).assertSingle('.panel-title a[aria-expanded=true]');
+      );
+
+      assertSingle(container, '.panel-title a[aria-expanded="true"]');
     });
 
     it('Should be aria-expanded=false', () => {
-      mount(
+      const { container } = render(
         <Panel defaultExpanded={false}>
           <Panel.Heading>
             <Panel.Title toggle>foo</Panel.Title>
@@ -200,13 +222,13 @@ describe('<Panel>', () => {
 
           <Panel.Body collapsible>Panel content</Panel.Body>
         </Panel>
-      )
-        .assertSingle('.panel-title a')
-        .assertSingle('[aria-expanded=false]');
+      );
+
+      assertSingle(container, '.panel-title a[aria-expanded="false"]');
     });
 
     it('Should add aria-controls with id', () => {
-      const inst = mount(
+      const { container } = render(
         <Panel id="testid">
           <Panel.Heading>
             <Panel.Title toggle>foo</Panel.Title>
@@ -216,8 +238,11 @@ describe('<Panel>', () => {
         </Panel>
       );
 
-      inst.assertSingle('a[aria-controls="testid--body"]');
-      inst.assertSingle('.panel-collapse[aria-labelledby="testid--heading"]');
+      assertSingle(container, 'a[aria-controls="testid--body"]');
+      assertSingle(
+        container,
+        '.panel-collapse[aria-labelledby="testid--heading"]'
+      );
     });
   });
 });
diff --git a/test/ProgressBarSpec.js b/test/ProgressBarSpec.js
index db4ae2a723..eb932bf03b 100644
--- a/test/ProgressBarSpec.js
+++ b/test/ProgressBarSpec.js
@@ -217,7 +217,7 @@ describe('<ProgressBar>', () => {
   });
 
   it('allows only ProgressBar in children', () => {
-    shouldWarn('Failed prop');
+    shouldWarn('can contain only ProgressBar');
 
     function NotProgressBar() {
       return null;
diff --git a/test/RadioSpec.js b/test/RadioSpec.js
index bc16fe77b7..91a73e6e70 100644
--- a/test/RadioSpec.js
+++ b/test/RadioSpec.js
@@ -1,72 +1,60 @@
+import { render } from '@testing-library/react';
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 
 import Radio from '../src/Radio';
 
-import { shouldWarn } from './helpers';
+import { assertNone, assertSingle, shouldWarn } from './helpers';
 
 describe('<Radio>', () => {
   it('should render correctly', () => {
-    const wrapper = shallow(
-      <Radio name="foo" checked className="my-radio">
+    const { container } = render(
+      <Radio name="foo" checked readOnly className="my-radio">
         My label
       </Radio>
     );
 
-    wrapper
-      .assertSingle('div.radio.my-radio')
-      .assertSingle('input[type="radio"][name="foo"][checked]');
+    const div = assertSingle(container, 'div.radio.my-radio');
+    const input = assertSingle(div, 'input[type="radio"][name="foo"]');
+    expect(input.checked).to.equal(true);
 
-    wrapper
-      .assertSingle('label')
-      .text()
-      .should.equal('My label');
+    assertSingle(container, 'label').textContent.should.equal('My label');
   });
 
   it('should support inline', () => {
-    const wrapper = shallow(
+    const { container } = render(
       <Radio inline name="foo" className="my-radio">
         My label
       </Radio>
     );
 
-    wrapper
-      .assertSingle('label.radio-inline.my-radio')
-      .assertSingle('input[type="radio"][name="foo"]');
+    const label = assertSingle(container, 'label.radio-inline.my-radio');
+    assertSingle(label, 'input[type="radio"][name="foo"]');
 
-    wrapper
-      .assertSingle('label')
-      .text()
-      .should.equal('My label');
+    assertSingle(container, 'label').textContent.should.equal('My label');
   });
 
   it('should support validation state', () => {
-    shallow(<Radio validationState="success" />).assertSingle('.has-success');
+    const { container } = render(<Radio validationState="success" />);
+    assertSingle(container, '.has-success');
   });
 
   it('should not support validation state when inline', () => {
     shouldWarn('ignored');
 
-    shallow(<Radio inline validationState="success" />)
-      .find('.has-success')
-      .should.have.length(0);
+    const { container } = render(<Radio inline validationState="success" />);
+    assertNone(container, '.has-success');
   });
 
   it('should support inputRef', () => {
-    class Container extends React.Component {
-      render() {
-        return (
-          <Radio
-            inputRef={ref => {
-              this.input = ref;
-            }}
-          />
-        );
-      }
-    }
-
-    const instance = mount(<Container />).instance();
+    let input;
+    render(
+      <Radio
+        inputRef={ref => {
+          input = ref;
+        }}
+      />
+    );
 
-    expect(instance.input.tagName).to.equal('INPUT');
+    expect(input.tagName).to.equal('INPUT');
   });
 });
diff --git a/test/SafeAnchorSpec.js b/test/SafeAnchorSpec.js
index c050db936d..58431f16be 100644
--- a/test/SafeAnchorSpec.js
+++ b/test/SafeAnchorSpec.js
@@ -1,34 +1,34 @@
+import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { mount, shallow } from 'enzyme';
 
 import SafeAnchor from '../src/SafeAnchor';
 
+import { assertSingle } from './helpers';
+
 describe('SafeAnchor', () => {
   it('renders an anchor tag', () => {
-    mount(<SafeAnchor />)
-      .getDOMNode()
-      .tagName.should.equal('A');
+    const { container } = render(<SafeAnchor />);
+    assertSingle(container, 'a').tagName.should.equal('A');
   });
 
   it('forwards provided href', () => {
-    shallow(<SafeAnchor href="http://google.com" />)
-      .find('a')
-      .prop('href')
+    const { container } = render(<SafeAnchor href="http://google.com" />);
+    container
+      .querySelector('a')
+      .getAttribute('href')
       .should.equal('http://google.com');
   });
 
   it('ensures that an href is provided', () => {
-    mount(<SafeAnchor />)
-      .getDOMNode()
-      .hasAttribute('href').should.be.true;
+    const { container } = render(<SafeAnchor />);
+    container.querySelector('a').hasAttribute('href').should.be.true;
   });
 
   it('forwards onClick handler', () => {
     const handleClick = sinon.spy();
 
-    shallow(<SafeAnchor onClick={handleClick} />)
-      .find('a')
-      .simulate('click', { preventDefault() {} });
+    const { container } = render(<SafeAnchor onClick={handleClick} />);
+    fireEvent.click(container.querySelector('a'));
 
     handleClick.should.have.been.calledOnce;
   });
@@ -36,9 +36,8 @@ describe('SafeAnchor', () => {
   it('provides onClick handler as onKeyDown handler for "space"', () => {
     const handleClick = sinon.spy();
 
-    shallow(<SafeAnchor onClick={handleClick} />)
-      .find('a')
-      .simulate('keyDown', { key: ' ', preventDefault() {} });
+    const { container } = render(<SafeAnchor onClick={handleClick} />);
+    fireEvent.keyDown(container.querySelector('a'), { key: ' ' });
 
     handleClick.should.have.been.calledOnce;
   });
@@ -46,77 +45,86 @@ describe('SafeAnchor', () => {
   it('prevents default when no href is provided', () => {
     const handleClick = sinon.spy();
 
-    const wrapper = mount(<SafeAnchor onClick={handleClick} />);
-    wrapper.find('a').simulate('click');
+    const { container, rerender } = render(
+      <SafeAnchor onClick={handleClick} />
+    );
+    fireEvent.click(container.querySelector('a'));
 
-    wrapper
-      .setProps({ href: '#' })
-      .find('a')
-      .simulate('click');
+    rerender(<SafeAnchor onClick={handleClick} href="#" />);
+    fireEvent.click(container.querySelector('a'));
 
     expect(handleClick).to.have.been.calledTwice;
-    expect(handleClick.getCall(0).args[0].isDefaultPrevented()).to.be.true;
-    expect(handleClick.getCall(1).args[0].isDefaultPrevented()).to.be.true;
+    expect(handleClick.getCall(0).args[0].defaultPrevented).to.equal(true);
+    expect(handleClick.getCall(1).args[0].defaultPrevented).to.equal(true);
   });
 
   it('does not prevent default when href is provided', () => {
     const handleClick = sinon.spy();
 
-    mount(<SafeAnchor href="#foo" onClick={handleClick} />)
-      .find('a')
-      .simulate('click');
+    const { container } = render(
+      <SafeAnchor href="#foo" onClick={handleClick} />
+    );
+    fireEvent.click(container.querySelector('a'));
 
     expect(handleClick).to.have.been.calledOnce;
-    expect(handleClick.getCall(0).args[0].isDefaultPrevented()).to.be.false;
+    expect(handleClick.getCall(0).args[0].defaultPrevented).to.equal(false);
   });
 
   it('Should disable link behavior', () => {
     let clickSpy = sinon.spy();
     let spy = sinon.spy(SafeAnchor.prototype, 'handleClick');
 
-    mount(
+    const { container } = render(
       <SafeAnchor disabled href="#foo" onClick={clickSpy}>
         Title
       </SafeAnchor>
-    ).simulate('click');
+    );
+    fireEvent.click(container.querySelector('a'));
 
     expect(spy).to.have.been.calledOnce;
+    // Disabled links must not fire the user-provided onClick handler. This also
+    // stands in for the removed `isPropagationStopped()` assertion: the disabled
+    // path returns early after stopping propagation, so onClick is never called.
     expect(clickSpy).to.have.not.been.called;
-    expect(spy.getCall(0).args[0].isDefaultPrevented()).to.equal(true);
-    expect(spy.getCall(0).args[0].isPropagationStopped()).to.equal(true);
+    expect(spy.getCall(0).args[0].defaultPrevented).to.equal(true);
+
+    spy.restore();
   });
 
   it('forwards provided role', () => {
-    shallow(<SafeAnchor role="test" />)
-      .find('a')
-      .prop('role')
+    const { container } = render(<SafeAnchor role="test" />);
+    container
+      .querySelector('a')
+      .getAttribute('role')
       .should.equal('test');
   });
 
   it('forwards provided role with href', () => {
-    shallow(<SafeAnchor role="test" href="http://google.com" />)
-      .find('a')
-      .prop('role')
+    const { container } = render(
+      <SafeAnchor role="test" href="http://google.com" />
+    );
+    container
+      .querySelector('a')
+      .getAttribute('role')
       .should.equal('test');
   });
 
   it('set role=button with no provided href', () => {
-    shallow(<SafeAnchor />)
-      .find('a')
-      .prop('role')
+    const { container } = render(<SafeAnchor />);
+    container
+      .querySelector('a')
+      .getAttribute('role')
       .should.equal('button');
 
-    shallow(<SafeAnchor href="#" />)
-      .find('a')
-      .prop('role')
+    const { container: hashContainer } = render(<SafeAnchor href="#" />);
+    hashContainer
+      .querySelector('a')
+      .getAttribute('role')
       .should.equal('button');
   });
 
   it('sets no role with provided href', () => {
-    expect(
-      shallow(<SafeAnchor href="http://google.com" />)
-        .find('a')
-        .prop('role')
-    ).to.not.exist;
+    const { container } = render(<SafeAnchor href="http://google.com" />);
+    expect(container.querySelector('a').getAttribute('role')).to.not.exist;
   });
 });
diff --git a/test/TabContainerSpec.js b/test/TabContainerSpec.js
index d637ed8571..9d602d59da 100644
--- a/test/TabContainerSpec.js
+++ b/test/TabContainerSpec.js
@@ -1,6 +1,5 @@
-import { act } from '@testing-library/react';
+import { act, render } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 
 import Nav from '../src/Nav';
 import NavItem from '../src/NavItem';
@@ -8,9 +7,20 @@ import TabPane from '../src/TabPane';
 import TabContent from '../src/TabContent';
 import TabContainer from '../src/TabContainer';
 
+import { assertSingle, assertNone } from './helpers';
+
+// Asserts that exactly one pane is active and that it corresponds to the given
+// `eventKey`. Replaces enzyme's `assertSingle('[eventKey=N]').assertSingle('.active')`
+// — `<TabContainer id="custom-id">` generates pane ids of the form
+// `custom-id-pane-<eventKey>`.
+function assertActivePane(container, eventKey) {
+  const active = assertSingle(container, '.tab-pane.active');
+  active.id.should.equal(`custom-id-pane-${eventKey}`);
+}
+
 describe('<TabContainer>', () => {
   it('should not propagate context past TabPanes', () => {
-    let instance = mount(
+    const { container } = render(
       <TabContainer id="custom-id">
         <div>
           <Nav>
@@ -27,22 +37,19 @@ describe('<TabContainer>', () => {
       </TabContainer>
     );
 
-    let top = instance
-      .find('div > Nav')
-      .first()
-      .instance().context.$bs_tabContainer;
-
-    let nested = instance
-      .find('TabPane Nav')
-      .first()
-      .instance().context.$bs_tabContainer;
+    // The top-level `<Nav>` reads the `<TabContainer>` context and so defaults
+    // its role to `tablist`. The `<Nav>` nested inside the `<TabPane>` does not,
+    // because the context is reset to `null` past `<TabPane>`s.
+    const navs = container.querySelectorAll('.nav');
+    const top = navs[0];
+    const nested = navs[1];
 
-    expect(top).to.exist;
-    expect(nested).to.not.exist;
+    expect(top.getAttribute('role')).to.equal('tablist');
+    expect(nested.getAttribute('role')).to.not.exist;
   });
 
   it('should match up ids', () => {
-    let instance = mount(
+    const { container } = render(
       <TabContainer id="custom-id">
         <div>
           <Nav>
@@ -55,25 +62,18 @@ describe('<TabContainer>', () => {
       </TabContainer>
     );
 
-    let tabId = instance
-      .find('NavItem a')
-      .first()
-      .prop('id');
-
-    let paneId = instance
-      .find('TabPane div')
-      .first()
-      .prop('id');
+    let tabId = container.querySelector('.nav a').id;
+    let paneId = container.querySelector('.tab-pane').id;
 
     expect(tabId).to.exist;
     expect(paneId).to.exist;
 
-    instance.assertSingle(`a[aria-controls="${paneId}"]`);
-    instance.assertSingle(`div[aria-labelledby="${tabId}"]`);
+    assertSingle(container, `a[aria-controls="${paneId}"]`);
+    assertSingle(container, `div[aria-labelledby="${tabId}"]`);
   });
 
   it('should default Nav role to tablist', () => {
-    let instance = mount(
+    const { container } = render(
       <TabContainer id="custom-id">
         <div>
           <Nav bsStyle="pills">
@@ -83,22 +83,19 @@ describe('<TabContainer>', () => {
       </TabContainer>
     );
 
-    instance
-      .find(Nav)
-      .getDOMNode()
+    container
+      .querySelector('.nav')
       .getAttribute('role')
       .should.equal('tablist');
 
-    instance
-      .find('NavItem a')
-      .first()
-      .getDOMNode()
+    container
+      .querySelector('.nav a')
       .getAttribute('role')
       .should.equal('tab');
   });
 
   it('should use explicit Nav role', () => {
-    let instance = mount(
+    const { container } = render(
       <TabContainer id="custom-id">
         <div>
           <Nav role="navigation" bsStyle="pills">
@@ -110,20 +107,13 @@ describe('<TabContainer>', () => {
       </TabContainer>
     );
 
-    instance
-      .find(Nav)
-      .getDOMNode()
+    container
+      .querySelector('.nav')
       .getAttribute('role')
       .should.equal('navigation');
 
     // make sure its not passed to the NavItem
-    expect(
-      instance
-        .find('NavItem a')
-        .first()
-        .getDOMNode()
-        .getAttribute('role')
-    ).to.not.exist;
+    expect(container.querySelector('.nav a').getAttribute('role')).to.not.exist;
   });
 
   describe('tab switching edge cases', () => {
@@ -156,154 +146,166 @@ describe('<TabContainer>', () => {
     }
 
     it('should not get stuck after tab becomes unmounted', () => {
-      const instance = mount(<Switcher eventKeys={[1, 2]} activeKey={2} />);
+      const ref = React.createRef();
+      const { container } = render(
+        <Switcher ref={ref} eventKeys={[1, 2]} activeKey={2} />
+      );
 
-      instance.assertSingle(TabContent);
-      instance.assertSingle('[eventKey=2]').assertSingle('.active');
+      assertSingle(container, '.tab-content');
+      assertActivePane(container, 2);
 
       act(() => {
-        instance.setState({ eventKeys: [1] });
+        ref.current.setState({ eventKeys: [1] });
       });
-      instance.assertNone('.active');
+      assertNone(container, '.tab-pane.active');
 
       act(() => {
-        instance.setState({ activeKey: 1 });
+        ref.current.setState({ activeKey: 1 });
       });
-      instance.assertSingle('[eventKey=1]').assertSingle('.active');
+      assertActivePane(container, 1);
     });
 
     it('should handle closing tab and changing active tab', () => {
-      const instance = mount(<Switcher eventKeys={[1, 2]} activeKey={2} />);
+      const ref = React.createRef();
+      const { container } = render(
+        <Switcher ref={ref} eventKeys={[1, 2]} activeKey={2} />
+      );
 
-      instance.assertSingle('[eventKey=2]').assertSingle('.active');
+      assertActivePane(container, 2);
 
       act(() => {
-        instance.setState({ eventKeys: [1], activeKey: 1 });
+        ref.current.setState({ eventKeys: [1], activeKey: 1 });
       });
-      // XXX I have no idea why this is needed but the test fails without it.
-      instance.update();
-      instance.assertSingle('[eventKey=1]').assertSingle('.active');
+      assertActivePane(container, 1);
     });
 
     it('should not call onSelect when container unmounts', () => {
       const spy = sinon.spy();
-      const instance = mount(
-        <Switcher eventKeys={[1]} activeKey={1} onSelect={spy} />
+      const ref = React.createRef();
+      const { container } = render(
+        <Switcher ref={ref} eventKeys={[1]} activeKey={1} onSelect={spy} />
       );
 
-      instance.assertSingle(TabPane);
+      assertSingle(container, '.tab-pane');
 
       act(() => {
-        instance.setState({ show: false });
+        ref.current.setState({ show: false });
       });
       spy.should.have.not.been.called;
     });
 
     it('should clean up unmounted tab state', () => {
-      const instance = mount(<Switcher eventKeys={[1, 2, 3]} activeKey={3} />);
+      const ref = React.createRef();
+      const { container } = render(
+        <Switcher ref={ref} eventKeys={[1, 2, 3]} activeKey={3} />
+      );
 
-      instance.find(TabPane).length.should.equal(3);
-      instance.assertSingle('[eventKey=3]').assertSingle('.active');
+      container.querySelectorAll('.tab-pane').length.should.equal(3);
+      assertActivePane(container, 3);
 
       act(() => {
-        instance.setState({ eventKeys: [1, 2], activeKey: 2 });
+        ref.current.setState({ eventKeys: [1, 2], activeKey: 2 });
       });
-      // XXX I have no idea why this is needed but the test fails without it.
-      instance.update();
-      instance.find(TabPane).length.should.equal(2);
-      instance.assertSingle('[eventKey=2]').assertSingle('.active');
+      container.querySelectorAll('.tab-pane').length.should.equal(2);
+      assertActivePane(container, 2);
     });
 
     it('should not get stuck if tab stops animating', () => {
-      const instance = mount(<Switcher eventKeys={[1, 2]} activeKey={1} />);
+      const ref = React.createRef();
+      const { container } = render(
+        <Switcher ref={ref} eventKeys={[1, 2]} activeKey={1} />
+      );
 
-      instance.assertSingle('[eventKey=1]').assertSingle('.active');
+      assertActivePane(container, 1);
 
       act(() => {
-        instance.setState({ animation: false });
+        ref.current.setState({ animation: false });
       });
-      instance.assertSingle('[eventKey=1]').assertSingle('.active');
+      assertActivePane(container, 1);
 
       act(() => {
-        instance.setState({ activeKey: 2 });
+        ref.current.setState({ activeKey: 2 });
       });
-      instance.assertSingle('[eventKey=2]').assertSingle('.active');
+      assertActivePane(container, 2);
 
       act(() => {
-        instance.setState({ animation: true });
+        ref.current.setState({ animation: true });
       });
       act(() => {
-        instance.setState({ activeKey: 1 });
+        ref.current.setState({ activeKey: 1 });
       });
-      instance.assertSingle('[eventKey=2]').assertSingle('.active');
+      assertActivePane(container, 2);
     });
 
     it('should handle simultaneous eventKey and activeKey change', () => {
-      const instance = mount(<Switcher eventKeys={[1, 2]} activeKey={2} />);
+      const ref = React.createRef();
+      const { container } = render(
+        <Switcher ref={ref} eventKeys={[1, 2]} activeKey={2} />
+      );
 
-      instance.assertSingle('[eventKey=2]').assertSingle('.active');
+      assertActivePane(container, 2);
 
       act(() => {
-        instance.setState({ eventKeys: [1, 3], activeKey: 3 });
+        ref.current.setState({ eventKeys: [1, 3], activeKey: 3 });
       });
-      // XXX I have no idea why this is needed but the test fails without it.
-      instance.update();
-      instance.assertSingle('[eventKey=3]').assertSingle('.active');
+      assertActivePane(container, 3);
 
       act(() => {
-        instance.setState({ eventKeys: [1, 4], activeKey: 4 });
+        ref.current.setState({ eventKeys: [1, 4], activeKey: 4 });
       });
-      // XXX I have no idea why this is needed but the test fails without it.
-      instance.update();
-      instance.assertSingle('[eventKey=4]').assertSingle('.active');
+      assertActivePane(container, 4);
     });
 
     it('should not get stuck if eventKey ceases to exist', () => {
-      const instance = mount(<Switcher eventKeys={[1, 2]} activeKey={2} />);
+      const ref = React.createRef();
+      const { container } = render(
+        <Switcher ref={ref} eventKeys={[1, 2]} activeKey={2} />
+      );
 
-      instance.assertSingle('[eventKey=2]').assertSingle('.active');
+      assertActivePane(container, 2);
 
       act(() => {
-        instance.setState({ eventKeys: [1, 3] });
+        ref.current.setState({ eventKeys: [1, 3] });
       });
-      instance.assertNone('.active');
+      assertNone(container, '.tab-pane.active');
 
       act(() => {
-        instance.setState({ activeKey: 3 });
+        ref.current.setState({ activeKey: 3 });
       });
-      instance.assertSingle('[eventKey=3]').assertSingle('.active');
+      assertActivePane(container, 3);
 
       // Check that active state lingers after changing event key.
       act(() => {
-        instance.setState({ activeKey: 1 });
+        ref.current.setState({ activeKey: 1 });
       });
-      instance.assertSingle('[eventKey=3]').assertSingle('.active');
+      assertActivePane(container, 3);
 
       // But once event key changes again, make sure active state switches.
       act(() => {
-        instance.setState({ eventKeys: [1, 2] });
+        ref.current.setState({ eventKeys: [1, 2] });
       });
-      // XXX I have no idea why this is needed but the test fails without it.
-      instance.update();
-      instance.assertSingle('[eventKey=1]').assertSingle('.active');
+      assertActivePane(container, 1);
     });
 
     [[[1, 2], [2, 1]], [[2, 1], [1, 2]]].forEach(([order1, order2]) => {
       it('should handle event key swaps', () => {
-        const instance = mount(<Switcher eventKeys={order1} activeKey={1} />);
+        const ref = React.createRef();
+        const { container } = render(
+          <Switcher ref={ref} eventKeys={order1} activeKey={1} />
+        );
 
-        instance.assertSingle('[eventKey=1]').assertSingle('.active');
+        assertActivePane(container, 1);
 
         act(() => {
-          instance.setState({ eventKeys: order2 });
+          ref.current.setState({ eventKeys: order2 });
         });
-        instance.assertSingle('[eventKey=1]').assertSingle('.active');
+        assertActivePane(container, 1);
 
         // Check that the animation is still wired up.
         act(() => {
-          instance.setState({ activeKey: 2 });
+          ref.current.setState({ activeKey: 2 });
         });
-        instance.assertSingle('[eventKey=1]').assertSingle('.active');
+        assertActivePane(container, 1);
       });
     });
   });
diff --git a/test/ToggleButtonGroupSpec.js b/test/ToggleButtonGroupSpec.js
index e07bde14bb..b6c4da43ef 100644
--- a/test/ToggleButtonGroupSpec.js
+++ b/test/ToggleButtonGroupSpec.js
@@ -1,47 +1,47 @@
+import { render, fireEvent } from '@testing-library/react';
 import React from 'react';
-import { mount } from 'enzyme';
 
 import ToggleButtonGroup from '../src/ToggleButtonGroup';
 
 describe('ToggleButtonGroup', () => {
   it('should render checkboxes', () => {
-    mount(
+    const { container } = render(
       <ToggleButtonGroup type="checkbox">
         <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
       </ToggleButtonGroup>
-    )
-      .find('input[type="checkbox"]')
-      .length.should.equal(3);
+    );
+
+    container.querySelectorAll('input[type="checkbox"]').length.should.equal(3);
   });
 
   it('should render radios', () => {
-    mount(
+    const { container } = render(
       <ToggleButtonGroup type="radio" name="items">
         <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
       </ToggleButtonGroup>
-    )
-      .find('input[type="radio"]')
-      .length.should.equal(3);
+    );
+
+    container.querySelectorAll('input[type="radio"]').length.should.equal(3);
   });
 
   it('should select initial values', () => {
-    mount(
+    const { container } = render(
       <ToggleButtonGroup type="checkbox" defaultValue={[1, 3]}>
         <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
       </ToggleButtonGroup>
-    )
-      .find('input[checked=true]')
-      .length.should.equal(2);
+    );
+
+    container.querySelectorAll('input:checked').length.should.equal(2);
   });
 
   it('should disable radios', () => {
-    mount(
+    const { container } = render(
       <ToggleButtonGroup type="radio" name="items">
         <ToggleButtonGroup.Button value={1} disabled>
           Option 1
@@ -51,39 +51,37 @@ describe('ToggleButtonGroup', () => {
         </ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
       </ToggleButtonGroup>
-    )
-      .find('input[disabled=true]')
-      .length.should.equal(2);
+    );
+
+    container.querySelectorAll('input:disabled').length.should.equal(2);
   });
 
   it('should return an array of values', () => {
     const spy = sinon.spy();
-    mount(
+    const { container } = render(
       <ToggleButtonGroup type="checkbox" onChange={spy}>
         <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
       </ToggleButtonGroup>
-    )
-      .find('input[type="checkbox"]')
-      .at(1)
-      .simulate('change');
+    );
+
+    fireEvent.click(container.querySelectorAll('input[type="checkbox"]')[1]);
 
     spy.should.have.been.calledWith([2]);
   });
 
   it('should return a single value', () => {
     const spy = sinon.spy();
-    mount(
+    const { container } = render(
       <ToggleButtonGroup type="radio" name="items" onChange={spy}>
         <ToggleButtonGroup.Button value={1}>Option 1</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={2}>Option 2</ToggleButtonGroup.Button>
         <ToggleButtonGroup.Button value={3}>Option 3</ToggleButtonGroup.Button>
       </ToggleButtonGroup>
-    )
-      .find('input[type="radio"]')
-      .at(1)
-      .simulate('change');
+    );
+
+    fireEvent.click(container.querySelectorAll('input[type="radio"]')[1]);
 
     spy.should.have.been.calledWith(2);
   });
diff --git a/test/helpers.js b/test/helpers.js
index e529a47136..eef996d2d2 100644
--- a/test/helpers.js
+++ b/test/helpers.js
@@ -2,6 +2,18 @@ export function shouldWarn(about) {
   console.error.expected.push(about); // eslint-disable-line no-console
 }
 
+// Asserts that exactly one element in `root` matches `selector` and returns it.
+export function assertSingle(root, selector) {
+  const found = root.querySelectorAll(selector);
+  expect(found).to.have.length(1);
+  return found[0];
+}
+
+// Asserts that no element in `root` matches `selector`.
+export function assertNone(root, selector) {
+  expect(root.querySelectorAll(selector)).to.have.length(0);
+}
+
 export function getOne(collection) {
   expect(collection.length).to.equal(1);
   return collection[0];
diff --git a/test/index.js b/test/index.js
index 667a9a4275..c05f3a71e1 100644
--- a/test/index.js
+++ b/test/index.js
@@ -4,25 +4,6 @@ import deprecated from 'prop-types-extra/lib/deprecated';
 
 import { _resetWarned } from '../src/utils/deprecationWarning';
 
-import Enzyme, { ShallowWrapper, ReactWrapper } from 'enzyme';
-import Adapter from '@cfaester/enzyme-adapter-react-18';
-
-Enzyme.configure({ adapter: new Adapter() });
-
-function assertLength(length) {
-  return function $assertLength(selector) {
-    let result = this.find(selector);
-    expect(result).to.have.length(length);
-    return result;
-  };
-}
-
-ReactWrapper.prototype.assertSingle = assertLength(1);
-ShallowWrapper.prototype.assertSingle = assertLength(1);
-
-ReactWrapper.prototype.assertNone = assertLength(0);
-ShallowWrapper.prototype.assertNone = assertLength(0);
-
 beforeEach(() => {
   /* eslint-disable no-console */
   sinon.stub(console, 'error').callsFake((msg, ...args) => {
@@ -40,21 +21,6 @@ beforeEach(() => {
       return;
     }
 
-    if (msg.includes('defaultProps')) {
-      // @hmhealey This is removed in React 19
-      return;
-    }
-
-    if (msg.includes('findDOMNode')) {
-      // @hmhealey This is removed in React 19
-      return;
-    }
-
-    if (msg.includes('childContextTypes') || msg.includes('contextTypes')) {
-      // @hmhealey These are removed in React 19
-      return;
-    }
-
     console.error.threw = true;
     throw new Error(msg);
   });
@@ -67,11 +33,16 @@ beforeEach(() => {
 
 afterEach(() => {
   /* eslint-disable no-console */
-  if (!console.error.threw && console.error.expected.length) {
-    expect(console.error.warned).to.have.keys(console.error.expected);
+  try {
+    if (!console.error.threw && console.error.expected.length) {
+      expect(console.error.warned).to.have.keys(console.error.expected);
+    }
+  } finally {
+    // Always restore the stub, even when the expectation above fails, so a
+    // single failing assertion doesn't leave `console.error` wrapped and cause
+    // the next test's `sinon.stub` to throw and abort the whole run.
+    console.error.restore();
   }
-
-  console.error.restore();
   /* eslint-enable no-console */
 
   _resetWarned();
diff --git a/test/utils/bootstrapUtilsSpec.js b/test/utils/bootstrapUtilsSpec.js
index 466e079996..cfc5dc1e7a 100644
--- a/test/utils/bootstrapUtilsSpec.js
+++ b/test/utils/bootstrapUtilsSpec.js
@@ -79,15 +79,14 @@ describe('bootstrapUtils', () => {
 
   describe('bsStyles', () => {
     it('should add style to allowed propTypes', () => {
-      const Component = () => null;
-      bsStyles(['minimal', 'boss', 'plaid'])(Component);
+      const Component = bsStyles(['minimal', 'boss', 'plaid'])(() => null);
 
       expect(Component.propTypes).to.exist;
 
-      React.createElement(Component, { bsStyle: 'plaid' });
+      render(React.createElement(Component, { bsStyle: 'plaid' }));
 
       shouldWarn('expected one of ["minimal","boss","plaid"]');
-      React.createElement(Component, { bsStyle: 'not-plaid' });
+      render(React.createElement(Component, { bsStyle: 'not-plaid' }));
     });
 
     it('should not override other propTypes', () => {
@@ -101,13 +100,14 @@ describe('bootstrapUtils', () => {
     });
 
     it('should set a default if provided', () => {
-      const propTypes = { other: PropTypes.string };
-      const Component = () => null;
-      Component.propTypes = propTypes;
-      bsStyles(['minimal', 'boss', 'plaid'], 'plaid')(Component);
+      const Inner = props => <span data-bs-style={props.bsStyle} />;
+      const Component = bsStyles(['minimal', 'boss', 'plaid'], 'plaid')(Inner);
 
-      expect(Component.defaultProps).to.exist;
-      expect(Component.defaultProps.bsStyle).to.equal('plaid');
+      const { container } = render(React.createElement(Component));
+
+      expect(
+        container.querySelector('span').getAttribute('data-bs-style')
+      ).to.equal('plaid');
     });
 
     it('should work with ES classes', () => {
@@ -178,16 +178,15 @@ describe('bootstrapUtils', () => {
 
   describe('bsSizes', () => {
     it('should add size to allowed propTypes', () => {
-      const Component = () => null;
-      bsSizes(['large', 'small'])(Component);
+      const Component = bsSizes(['large', 'small'])(() => null);
 
       expect(Component.propTypes).to.exist;
 
-      React.createElement(Component, { bsSize: 'small' });
-      React.createElement(Component, { bsSize: 'sm' });
+      render(React.createElement(Component, { bsSize: 'small' }));
+      render(React.createElement(Component, { bsSize: 'sm' }));
 
       shouldWarn('expected one of ["lg","large","sm","small"]');
-      React.createElement(Component, { bsSize: 'superSmall' });
+      render(React.createElement(Component, { bsSize: 'superSmall' }));
     });
 
     it('should not override other propTypes', () => {
diff --git a/yarn.lock b/yarn.lock
index e71f43c617..e6ab96277f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -796,18 +796,16 @@
     core-js "^2.5.7"
     regenerator-runtime "^0.12.0"
 
-"@babel/runtime@^7.1.2":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
-  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
-  dependencies:
-    regenerator-runtime "^0.13.4"
-
 "@babel/runtime@^7.12.5":
   version "7.28.2"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.28.2.tgz#2ae5a9d51cc583bd1f5673b3bb70d6d819682473"
   integrity sha512-KHp2IflsnGywDjBWDkR9iEqiWSpc8GIi0lgTT3mOElT0PP1tG26P4tmFI2YvAdzgq9RGyoHZQEIEdZy6Ec5xCA==
 
+"@babel/runtime@^7.13.8", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.3", "@babel/runtime@^7.8.7":
+  version "7.29.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.29.7.tgz#12022450c45a4da6d8d8287b18a4ff2ddb23f768"
+  integrity sha512-Nq8OhGWiZIZGV6hLHoyAKLLcJihP/xFeBMGJoUrxTX2psI8dCifzLhZISFb+VWS3wFMRDmCGw5R+dOySCqPLhw==
+
 "@babel/template@7.0.0-beta.51":
   version "7.0.0-beta.51"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.51.tgz#9602a40aebcf357ae9677e2532ef5fc810f5fbff"
@@ -900,17 +898,6 @@
     "@babel/helper-string-parser" "^7.27.1"
     "@babel/helper-validator-identifier" "^7.27.1"
 
-"@cfaester/enzyme-adapter-react-18@^0.8.0":
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/@cfaester/enzyme-adapter-react-18/-/enzyme-adapter-react-18-0.8.0.tgz#313814eb79658a6e74209f9f1743bcefff14a46f"
-  integrity sha512-3Z3ThTUouHwz8oIyhTYQljEMNRFtlVyc3VOOHCbxs47U6cnXs8K9ygi/c1tv49s7MBlTXeIcuN+Ttd9aPtILFQ==
-  dependencies:
-    enzyme-shallow-equal "^1.0.0"
-    function.prototype.name "^1.1.6"
-    has "^1.0.4"
-    react-is "^18.2.0"
-    react-shallow-renderer "^16.15.0"
-
 "@colors/colors@1.5.0":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
@@ -955,6 +942,18 @@
     "@jridgewell/resolve-uri" "^3.1.0"
     "@jridgewell/sourcemap-codec" "^1.4.14"
 
+"@popperjs/core@^2.11.6":
+  version "2.11.8"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.8.tgz#6b79032e760a0899cd4204710beede972a3a185f"
+  integrity sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==
+
+"@restart/hooks@^0.4.7":
+  version "0.4.16"
+  resolved "https://registry.yarnpkg.com/@restart/hooks/-/hooks-0.4.16.tgz#95ae8ac1cc7e2bd4fed5e39800ff85604c6d59fb"
+  integrity sha512-f7aCv7c+nU/3mF7NWLtVVr0Ra80RqsO89hO72r+Y/nvQr5+q0UFGkocElTH6MJApvReVh6JHUFYn2cw1WdHF3w==
+  dependencies:
+    dequal "^2.0.3"
+
 "@samverschueren/stream-to-observable@^0.3.0":
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/@samverschueren/stream-to-observable/-/stream-to-observable-0.3.0.tgz#ecdf48d532c58ea477acfcab80348424f8d0662f"
@@ -1041,6 +1040,18 @@
   dependencies:
     undici-types "~7.10.0"
 
+"@types/react@>=16.9.11":
+  version "19.2.17"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-19.2.17.tgz#dccac365baa0f1734ec270ff4b51c89465e8dc7f"
+  integrity sha512-MXfmqaVPEVgkBT/aY0aGCkRWWtByiYQXo3xdQ8r5RzuFrPiRn8Gar2tQdXSUQ2GKV3bkXckek89V8wQBY2Q/Aw==
+  dependencies:
+    csstype "^3.2.2"
+
+"@types/warning@^3.0.0":
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/@types/warning/-/warning-3.0.4.tgz#ebc0c83180dc83994d902bbd51ab0af8a445b1f9"
+  integrity sha512-CqN8MnISMwQbLJXO3doBAV4Yw9hx9/Pyr2rZ78+NfaCnhyRA/nKrpyk6E7mKw17ZOaQdLpK9GiUjrqLzBlN3sg==
+
 "@webassemblyjs/ast@1.14.1", "@webassemblyjs/ast@^1.14.1":
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.14.1.tgz#a9f6a07f2b03c95c8d38c4536a1fdfb521ff55b6"
@@ -1383,14 +1394,6 @@ array-unique@^0.3.2:
   version "0.3.2"
   resolved "https://registry.yarnpkg.com/array-unique/-/array-unique-0.3.2.tgz#a894b75d4bc4f6cd679ef3244a9fd8f46ae2d428"
 
-array.prototype.flat@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.1.tgz#812db8f02cad24d3fab65dd67eabe3b8903494a4"
-  dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.10.0"
-    function-bind "^1.1.1"
-
 arrify@^1.0.0, arrify@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/arrify/-/arrify-1.0.1.tgz#898508da2226f380df904728456849c1501a4b0d"
@@ -1576,10 +1579,6 @@ body-parser@^1.19.0:
     type-is "~1.6.18"
     unpipe "1.0.0"
 
-boolbase@~1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/boolbase/-/boolbase-1.0.0.tgz#68dff5fbe60c51eb37725ea9e3ed310dcc1e776e"
-
 brace-expansion@^1.1.7:
   version "1.1.11"
   resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-1.1.11.tgz#3c7fcbf529d87226f3d2f52b966ff5271eb441dd"
@@ -1746,7 +1745,7 @@ call-bind-apply-helpers@^1.0.0, call-bind-apply-helpers@^1.0.1, call-bind-apply-
     es-errors "^1.3.0"
     function-bind "^1.1.2"
 
-call-bind@^1.0.7, call-bind@^1.0.8:
+call-bind@^1.0.8:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/call-bind/-/call-bind-1.0.8.tgz#0736a9660f537e3388826f440d5ec45f744eaa4c"
   integrity sha512-oKlSFMcMwpUg2ednkhQ454wfWiU/ul3CkJe/PEHcTKuiX6RpbehUiFMXu13HalGZxfUwCQzZG747YXBn1im9ww==
@@ -1756,7 +1755,7 @@ call-bind@^1.0.7, call-bind@^1.0.8:
     get-intrinsic "^1.2.4"
     set-function-length "^1.2.2"
 
-call-bound@^1.0.2, call-bound@^1.0.3, call-bound@^1.0.4:
+call-bound@^1.0.2, call-bound@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/call-bound/-/call-bound-1.0.4.tgz#238de935d2a2a692928c538c7ccfa91067fd062a"
   integrity sha512-+ys997U96po4Kx/ABpBCqhA9EuxJaQWDQg7295H4hBphv3IZg0boBKuwYpt4YXp6MZ5AmZQnU/tyMTlRpaSejg==
@@ -1829,17 +1828,6 @@ chardet@^0.4.0:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/chardet/-/chardet-0.4.2.tgz#b5473b33dc97c424e5d98dc87d55d4d8a29c8bf2"
 
-cheerio@^1.0.0-rc.2:
-  version "1.0.0-rc.2"
-  resolved "https://registry.yarnpkg.com/cheerio/-/cheerio-1.0.0-rc.2.tgz#4b9f53a81b27e4d5dac31c0ffd0cfa03cc6830db"
-  dependencies:
-    css-select "~1.2.0"
-    dom-serializer "~0.1.0"
-    entities "~1.1.1"
-    htmlparser2 "^3.9.1"
-    lodash "^4.15.0"
-    parse5 "^3.0.1"
-
 chokidar@^2.0.3:
   version "2.0.4"
   resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-2.0.4.tgz#356ff4e2b0e8e43e322d18a372460bbcf3accd26"
@@ -2003,10 +1991,6 @@ color-name@~1.1.4:
   resolved "https://registry.yarnpkg.com/color-name/-/color-name-1.1.4.tgz#c2a09a87acbde69543de6f63fa3995c826c536a2"
   integrity sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==
 
-colors@0.5.x:
-  version "0.5.1"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
-
 colors@^1.1.2, colors@^1.2.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/colors/-/colors-1.3.2.tgz#2df8ff573dfbf255af562f8ce7181d6b971a359b"
@@ -2218,18 +2202,10 @@ crypto-browserify@^3.11.0:
     randombytes "^2.0.0"
     randomfill "^1.0.3"
 
-css-select@~1.2.0:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
-  dependencies:
-    boolbase "~1.0.0"
-    css-what "2.1"
-    domutils "1.5.1"
-    nth-check "~1.0.1"
-
-css-what@2.1:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.0.tgz#9467d032c38cfaefb9f2d79501253062f87fa1bd"
+csstype@^3.0.2, csstype@^3.2.2:
+  version "3.2.3"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.2.3.tgz#ec48c0f3e993e50648c86da559e2610995cf989a"
+  integrity sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==
 
 custom-event@~1.0.0:
   version "1.0.1"
@@ -2310,7 +2286,7 @@ deep-is@~0.1.3:
   version "0.1.3"
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
 
-define-data-property@^1.0.1, define-data-property@^1.1.4:
+define-data-property@^1.1.4:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/define-data-property/-/define-data-property-1.1.4.tgz#894dc141bb7d3060ae4366f6a0107e68fbe48c5e"
   integrity sha512-rBMvIzlpA8v6E+SJZoo++HAYqsLrkg7MSfIinMPFhmkorw7X+dOXVJQs+QT69zGkzMyfDnIMN2Wid1+NbL3T+A==
@@ -2325,15 +2301,6 @@ define-properties@^1.1.2:
   dependencies:
     object-keys "^1.0.12"
 
-define-properties@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.2.1.tgz#10781cc616eb951a80a034bafcaa7377f6af2b6c"
-  integrity sha512-8QmQKqEASLd5nx0U1B1okLElbUuuttJ/AnYmRXbbbGDWh6uS208EjD4Xqq/I9wK7u0v6O08XhTWnt5XtEbR6Dg==
-  dependencies:
-    define-data-property "^1.0.1"
-    has-property-descriptors "^1.0.0"
-    object-keys "^1.1.1"
-
 define-property@^0.2.5:
   version "0.2.5"
   resolved "https://registry.yarnpkg.com/define-property/-/define-property-0.2.5.tgz#c35b1ef918ec3c990f9a5bc57be04aacec5c8116"
@@ -2415,10 +2382,6 @@ diffie-hellman@^5.0.0:
     miller-rabin "^4.0.0"
     randombytes "^2.0.0"
 
-discontinuous-range@1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/discontinuous-range/-/discontinuous-range-1.0.0.tgz#e38331f0844bba49b9a9cb71c771585aab1bc65a"
-
 doctrine@1.5.0:
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/doctrine/-/doctrine-1.5.0.tgz#379dce730f6166f76cefa4e6707a159b02c5a6fa"
@@ -2437,16 +2400,17 @@ dom-accessibility-api@^0.5.9:
   resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.16.tgz#5a7429e6066eb3664d911e33fb0e45de8eb08453"
   integrity sha512-X7BJ2yElsnOJ30pZF4uIIDfBEVgF4XEBxL9Bxhy6dnrm5hkzqmsWHGTiHqRiITNhMyFLyAiWndIJP7Z1NTteDg==
 
-dom-helpers@^3.2.0, dom-helpers@^3.2.1, dom-helpers@^3.3.1:
+dom-helpers@^3.2.0:
   version "3.3.1"
   resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.3.1.tgz#fc1a4e15ffdf60ddde03a480a9c0fece821dd4a6"
 
-dom-helpers@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-3.4.0.tgz#e9b369700f959f62ecde5a6babde4bccd9169af8"
-  integrity sha512-LnuPJ+dwqKDIyotW1VzmOZ5TONUN7CwkCR5hrgawTUbkBGYdeoNLZo6nNfGkCrjtE1nXXaj7iMMpDa8/d9WoIA==
+dom-helpers@^5.0.1, dom-helpers@^5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902"
+  integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==
   dependencies:
-    "@babel/runtime" "^7.1.2"
+    "@babel/runtime" "^7.8.7"
+    csstype "^3.0.2"
 
 dom-serialize@^2.2.1:
   version "2.2.1"
@@ -2458,45 +2422,10 @@ dom-serialize@^2.2.1:
     extend "^3.0.0"
     void-elements "^2.0.0"
 
-dom-serializer@0, dom-serializer@~0.1.0:
-  version "0.1.0"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-0.1.0.tgz#073c697546ce0780ce23be4a28e293e40bc30c82"
-  dependencies:
-    domelementtype "~1.1.1"
-    entities "~1.1.1"
-
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
 
-domelementtype@1, domelementtype@^1.3.0:
-  version "1.3.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.3.0.tgz#b17aed82e8ab59e52dd9c19b1756e0fc187204c2"
-
-domelementtype@~1.1.1:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-1.1.3.tgz#bd28773e2642881aec51544924299c5cd822185b"
-
-domhandler@^2.3.0:
-  version "2.4.2"
-  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-2.4.2.tgz#8805097e933d65e85546f726d60f5eb88b44f803"
-  dependencies:
-    domelementtype "1"
-
-domutils@1.5.1:
-  version "1.5.1"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.5.1.tgz#dcd8488a26f563d61079e48c9f7b7e32373682cf"
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
-domutils@^1.5.1:
-  version "1.7.0"
-  resolved "https://registry.yarnpkg.com/domutils/-/domutils-1.7.0.tgz#56ea341e834e06e6748af7a1cb25da67ea9f8c2a"
-  dependencies:
-    dom-serializer "0"
-    domelementtype "1"
-
 dunder-proto@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/dunder-proto/-/dunder-proto-1.0.1.tgz#d7ae667e1dc83482f8b70fd0f6eefc50da30f58a"
@@ -2612,49 +2541,13 @@ ent@~2.2.0:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/ent/-/ent-2.2.0.tgz#e964219325a21d05f44466a2f686ed6ce5f5dd1d"
 
-entities@^1.1.1, entities@~1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0"
-
-enzyme-shallow-equal@^1.0.0:
-  version "1.0.7"
-  resolved "https://registry.yarnpkg.com/enzyme-shallow-equal/-/enzyme-shallow-equal-1.0.7.tgz#4e3aa678022387a68e6c47aff200587851885b5e"
-  integrity sha512-/um0GFqUXnpM9SvKtje+9Tjoz3f1fpBC3eXRFrNs8kpYn69JljciYP7KZTqM/YQbUY9KUjvKB4jo/q+L6WGGvg==
-  dependencies:
-    hasown "^2.0.0"
-    object-is "^1.1.5"
-
-enzyme@^3.1.0:
-  version "3.6.0"
-  resolved "https://registry.yarnpkg.com/enzyme/-/enzyme-3.6.0.tgz#d213f280a258f61e901bc663d4cc2d6fd9a9dec8"
-  dependencies:
-    array.prototype.flat "^1.2.1"
-    cheerio "^1.0.0-rc.2"
-    function.prototype.name "^1.1.0"
-    has "^1.0.3"
-    is-boolean-object "^1.0.0"
-    is-callable "^1.1.4"
-    is-number-object "^1.0.3"
-    is-string "^1.0.4"
-    is-subset "^0.1.1"
-    lodash.escape "^4.0.1"
-    lodash.isequal "^4.5.0"
-    object-inspect "^1.6.0"
-    object-is "^1.0.1"
-    object.assign "^4.1.0"
-    object.entries "^1.0.4"
-    object.values "^1.0.4"
-    raf "^3.4.0"
-    rst-selector-parser "^2.2.3"
-    string.prototype.trim "^1.1.2"
-
 error-ex@^1.2.0, error-ex@^1.3.1:
   version "1.3.2"
   resolved "https://registry.yarnpkg.com/error-ex/-/error-ex-1.3.2.tgz#b4ac40648107fdcdcfae242f428bea8a14d4f1bf"
   dependencies:
     is-arrayish "^0.2.1"
 
-es-abstract@^1.10.0, es-abstract@^1.5.0, es-abstract@^1.5.1, es-abstract@^1.6.1, es-abstract@^1.7.0:
+es-abstract@^1.5.1, es-abstract@^1.7.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.12.0.tgz#9dbbdd27c6856f0001421ca18782d786bf8a6165"
   dependencies:
@@ -3258,7 +3151,7 @@ fsevents@~2.3.2:
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
   integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
 
-function-bind@^1.0.2, function-bind@^1.1.0, function-bind@^1.1.1:
+function-bind@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
 
@@ -3267,35 +3160,10 @@ function-bind@^1.1.2:
   resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.2.tgz#2c02d864d97f3ea6c8830c464cbd11ab6eab7a1c"
   integrity sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==
 
-function.prototype.name@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.0.tgz#8bd763cc0af860a859cc5d49384d74b932cd2327"
-  dependencies:
-    define-properties "^1.1.2"
-    function-bind "^1.1.1"
-    is-callable "^1.1.3"
-
-function.prototype.name@^1.1.6:
-  version "1.1.8"
-  resolved "https://registry.yarnpkg.com/function.prototype.name/-/function.prototype.name-1.1.8.tgz#e68e1df7b259a5c949eeef95cdbde53edffabb78"
-  integrity sha512-e5iwyodOHhbMr/yNrc7fDYG4qlbIvI5gajyzPnb5TCwyhjApznQh1BMFou9b30SevY43gCJKXycoCBjMbsuW0Q==
-  dependencies:
-    call-bind "^1.0.8"
-    call-bound "^1.0.3"
-    define-properties "^1.2.1"
-    functions-have-names "^1.2.3"
-    hasown "^2.0.2"
-    is-callable "^1.2.7"
-
 functional-red-black-tree@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
 
-functions-have-names@^1.2.3:
-  version "1.2.3"
-  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
-  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
-
 gauge@~2.7.3:
   version "2.7.4"
   resolved "https://registry.yarnpkg.com/gauge/-/gauge-2.7.4.tgz#2c03405c7538c39d7eb37b317022e325fb018bf7"
@@ -3489,17 +3357,13 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
-has-property-descriptors@^1.0.0, has-property-descriptors@^1.0.2:
+has-property-descriptors@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.2.tgz#963ed7d071dc7bf5f084c5bfbe0d1b6222586854"
   integrity sha512-55JNKuIW+vq4Ke1BjOTjM2YctQIvCT7GFzHwmfZPGo5wnrgkid0YQtnAleFSqumZm4az3n2BS+erby5ipJdgrg==
   dependencies:
     es-define-property "^1.0.0"
 
-has-symbols@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.0.tgz#ba1a8f1af2a0fc39650f5c850367704122063b44"
-
 has-symbols@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.1.0.tgz#fc9c6a783a084951d0b971fe1018de813707a338"
@@ -3542,11 +3406,6 @@ has@^1.0.1, has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-has@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/has/-/has-1.0.4.tgz#2eb2860e000011dae4f1406a86fe80e530fb2ec6"
-  integrity sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
-
 hash-base@^3.0.0:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/hash-base/-/hash-base-3.0.4.tgz#5fc8686847ecd73499403319a6b0a3f3f6ae4918"
@@ -3561,7 +3420,7 @@ hash.js@^1.0.0, hash.js@^1.0.3:
     inherits "^2.0.3"
     minimalistic-assert "^1.0.1"
 
-hasown@^2.0.0, hasown@^2.0.2:
+hasown@^2.0.2:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/hasown/-/hasown-2.0.2.tgz#003eaf91be7adc372e84ec59dc37252cedb80003"
   integrity sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==
@@ -3593,17 +3452,6 @@ html-escaper@^2.0.0:
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
   integrity sha512-H2iMtd0I4Mt5eYiapRdIDjp+XzelXQ0tFE4JS7YFwFevXXMmOp9myNrUvCg0D6ws8iqkRPBfKHgbwig1SmlLfg==
 
-htmlparser2@^3.9.1:
-  version "3.9.2"
-  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-3.9.2.tgz#1bdf87acca0f3f9e53fa4fcceb0f4b4cbb00b338"
-  dependencies:
-    domelementtype "^1.3.0"
-    domhandler "^2.3.0"
-    domutils "^1.5.1"
-    entities "^1.1.1"
-    inherits "^2.0.1"
-    readable-stream "^2.0.2"
-
 http-errors@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
@@ -3762,10 +3610,6 @@ is-binary-path@~2.1.0:
   dependencies:
     binary-extensions "^2.0.0"
 
-is-boolean-object@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/is-boolean-object/-/is-boolean-object-1.0.0.tgz#98f8b28030684219a95f375cfbd88ce3405dff93"
-
 is-buffer@^1.1.5:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/is-buffer/-/is-buffer-1.1.6.tgz#efaa2ea9daa0d7ab2ea13a97b2b8ad51fefbe8be"
@@ -3776,15 +3620,10 @@ is-builtin-module@^1.0.0:
   dependencies:
     builtin-modules "^1.0.0"
 
-is-callable@^1.1.1, is-callable@^1.1.3, is-callable@^1.1.4:
+is-callable@^1.1.1, is-callable@^1.1.3:
   version "1.1.4"
   resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.1.4.tgz#1e1adf219e1eeb684d691f9d6a05ff0d30a24d75"
 
-is-callable@^1.2.7:
-  version "1.2.7"
-  resolved "https://registry.yarnpkg.com/is-callable/-/is-callable-1.2.7.tgz#3bc2a85ea742d9e36205dcacdd72ca1fdc51b055"
-  integrity sha512-1BC0BVFhS/p0qtw6enp8e+8OD0UrK0oFLztSjNzhcKA3WDuJxxAPXzPuPtKkjEY9UUoEWlX/8fgKeu2S8i9JTA==
-
 is-ci@^1.0.10:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/is-ci/-/is-ci-1.2.0.tgz#3f4a08d6303a09882cef3f0fb97439c5f5ce2d53"
@@ -3887,10 +3726,6 @@ is-glob@^4.0.1, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-number-object@^1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/is-number-object/-/is-number-object-1.0.3.tgz#f265ab89a9f445034ef6aff15a8f00b00f551799"
-
 is-number@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/is-number/-/is-number-3.0.0.tgz#24fd6201a4782cf50561c810276afc7d12d71195"
@@ -3960,14 +3795,6 @@ is-stream@^1.0.1, is-stream@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-1.1.0.tgz#12d4a3dd4e68e0b79ceb8dbc84173ae80d91ca44"
 
-is-string@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/is-string/-/is-string-1.0.4.tgz#cc3a9b69857d621e963725a24caeec873b826e64"
-
-is-subset@^0.1.1:
-  version "0.1.1"
-  resolved "https://registry.yarnpkg.com/is-subset/-/is-subset-0.1.1.tgz#8a59117d932de1de00f245fcdd39ce43f1e939a6"
-
 is-symbol@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/is-symbol/-/is-symbol-1.0.1.tgz#3cc59f00025194b6ab2e38dbae6689256b660572"
@@ -4504,19 +4331,7 @@ lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
 
-lodash.escape@^4.0.1:
-  version "4.0.1"
-  resolved "https://registry.yarnpkg.com/lodash.escape/-/lodash.escape-4.0.1.tgz#c9044690c21e04294beaa517712fded1fa88de98"
-
-lodash.flattendeep@^4.4.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/lodash.flattendeep/-/lodash.flattendeep-4.4.0.tgz#fb030917f86a3134e5bc9bec0d69e0013ddfedb2"
-
-lodash.isequal@^4.5.0:
-  version "4.5.0"
-  resolved "https://registry.yarnpkg.com/lodash.isequal/-/lodash.isequal-4.5.0.tgz#415c4478f2bcc30120c22ce10ed3226f7d3e18e0"
-
-lodash@^4.15.0, lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
+lodash@^4.17.10, lodash@^4.17.4, lodash@^4.17.5, lodash@^4.3.0:
   version "4.17.10"
   resolved "https://registry.yarnpkg.com/lodash/-/lodash-4.17.10.tgz#1b7793cf7259ea38fb3661d4d38b3260af8ae4e7"
 
@@ -4559,7 +4374,7 @@ lolex@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lolex/-/lolex-1.6.0.tgz#3a9a0283452a47d7439e72731b9e07d7386e49f6"
 
-loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.3.1, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.4.0.tgz#71ee51fa7be4caec1a63839f7e682d8132d30caf"
   dependencies:
@@ -4786,10 +4601,6 @@ mocha@^5.2.0:
     mkdirp "0.5.1"
     supports-color "5.4.0"
 
-moo@^0.4.3:
-  version "0.4.3"
-  resolved "https://registry.yarnpkg.com/moo/-/moo-0.4.3.tgz#3f847a26f31cf625a956a87f2b10fbc013bfd10e"
-
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
@@ -4831,16 +4642,6 @@ natural-compare@^1.4.0:
   version "1.4.0"
   resolved "https://registry.yarnpkg.com/natural-compare/-/natural-compare-1.4.0.tgz#4abebfeed7541f2c27acfb29bdbbd15c8d5ba4f7"
 
-nearley@^2.7.10:
-  version "2.15.1"
-  resolved "https://registry.yarnpkg.com/nearley/-/nearley-2.15.1.tgz#965e4e6ec9ed6b80fc81453e161efbcebb36d247"
-  dependencies:
-    moo "^0.4.3"
-    nomnom "~1.6.2"
-    railroad-diagrams "^1.0.0"
-    randexp "0.4.6"
-    semver "^5.4.1"
-
 needle@^2.2.1:
   version "2.2.2"
   resolved "https://registry.yarnpkg.com/needle/-/needle-2.2.2.tgz#1120ca4c41f2fcc6976fd28a8968afe239929418"
@@ -4927,13 +4728,6 @@ node-releases@^2.0.19:
   resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.19.tgz#9e445a52950951ec4d177d843af370b411caf314"
   integrity sha512-xxOWJsBKtzAq7DY0J+DTzuz58K8e7sJbdgwkbMWQe8UYB6ekmsQ45q0M/tJDsGaZmbC+l7n57UV8Hl5tHxO9uw==
 
-nomnom@~1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/nomnom/-/nomnom-1.6.2.tgz#84a66a260174408fc5b77a18f888eccc44fb6971"
-  dependencies:
-    colors "0.5.x"
-    underscore "~1.4.4"
-
 nopt@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/nopt/-/nopt-4.0.1.tgz#d0d4685afd5415193c8c7505602d0d17cd64474d"
@@ -5005,12 +4799,6 @@ npmlog@^4.0.2:
     gauge "~2.7.3"
     set-blocking "~2.0.0"
 
-nth-check@~1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/nth-check/-/nth-check-1.0.1.tgz#9929acdf628fc2c41098deab82ac580cf149aae4"
-  dependencies:
-    boolbase "~1.0.0"
-
 number-is-nan@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/number-is-nan/-/number-is-nan-1.0.1.tgz#097b602b53422a522c1afb8790318336941a011d"
@@ -5036,23 +4824,7 @@ object-inspect@^1.13.3:
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.13.4.tgz#8375265e21bc20d0fa582c22e1b13485d6e00213"
   integrity sha512-W67iLl4J2EXEGTbfeHCffrjDfitvLANg0UlX3wFUUSTx92KXRFegMHUVgSqE+wvhAbi4WqjGg9czysTV2Epbew==
 
-object-inspect@^1.6.0:
-  version "1.6.0"
-  resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.6.0.tgz#c70b6cbf72f274aab4c34c0c82f5167bf82cf15b"
-
-object-is@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.0.1.tgz#0aa60ec9989a0b3ed795cf4d06f62cf1ad6539b6"
-
-object-is@^1.1.5:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/object-is/-/object-is-1.1.6.tgz#1a6a53aed2dd8f7e6775ff870bea58545956ab07"
-  integrity sha512-F8cZ+KfGlSGi09lJT7/Nd6KJZ9ygtvYC0/UYYLI9nmQKLMnydpB9yvbv9K1uSkEu7FU9vYPmVwLg328tX+ot3Q==
-  dependencies:
-    call-bind "^1.0.7"
-    define-properties "^1.2.1"
-
-object-keys@^1.0.11, object-keys@^1.0.12:
+object-keys@^1.0.12:
   version "1.0.12"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.0.12.tgz#09c53855377575310cca62f55bb334abff7b3ed2"
 
@@ -5067,24 +4839,6 @@ object-visit@^1.0.0:
   dependencies:
     isobject "^3.0.0"
 
-object.assign@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.yarnpkg.com/object.assign/-/object.assign-4.1.0.tgz#968bf1100d7956bb3ca086f006f846b3bc4008da"
-  dependencies:
-    define-properties "^1.1.2"
-    function-bind "^1.1.1"
-    has-symbols "^1.0.0"
-    object-keys "^1.0.11"
-
-object.entries@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/object.entries/-/object.entries-1.0.4.tgz#1bf9a4dd2288f5b33f3a993d257661f05d161a5f"
-  dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.6.1"
-    function-bind "^1.1.0"
-    has "^1.0.1"
-
 object.getownpropertydescriptors@^2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/object.getownpropertydescriptors/-/object.getownpropertydescriptors-2.0.3.tgz#8758c846f5b407adab0f236e0986f14b051caa16"
@@ -5098,15 +4852,6 @@ object.pick@^1.3.0:
   dependencies:
     isobject "^3.0.1"
 
-object.values@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/object.values/-/object.values-1.0.4.tgz#e524da09b4f66ff05df457546ec72ac99f13069a"
-  dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.6.1"
-    function-bind "^1.1.0"
-    has "^1.0.1"
-
 on-finished@2.4.1:
   version "2.4.1"
   resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
@@ -5255,12 +5000,6 @@ parse-json@^4.0.0:
     error-ex "^1.3.1"
     json-parse-better-errors "^1.0.1"
 
-parse5@^3.0.1:
-  version "3.0.3"
-  resolved "https://registry.yarnpkg.com/parse5/-/parse5-3.0.3.tgz#042f792ffdd36851551cf4e9e066b3874ab45b5c"
-  dependencies:
-    "@types/node" "*"
-
 parseurl@~1.3.3:
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/parseurl/-/parseurl-1.3.3.tgz#9da19e7bee8d12dff0513ed5b76957793bc2e8d4"
@@ -5480,13 +5219,22 @@ prop-types-extra@^1.0.1:
     react-is "^16.3.2"
     warning "^3.0.0"
 
-prop-types@^15.5.10, prop-types@^15.6.1, prop-types@^15.6.2:
+prop-types@^15.6.1, prop-types@^15.6.2:
   version "15.6.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.6.2.tgz#05d5ca77b4453e985d60fc7ff8c859094a497102"
   dependencies:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
+prop-types@^15.7.2:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 pseudomap@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/pseudomap/-/pseudomap-1.0.2.tgz#f052a28da70e618917ef0a8ac34c1ae5a68286b3"
@@ -5544,27 +5292,10 @@ querystring@0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/querystring/-/querystring-0.2.0.tgz#b209849203bb25df820da756e747005878521620"
 
-raf@^3.4.0:
-  version "3.4.0"
-  resolved "https://registry.yarnpkg.com/raf/-/raf-3.4.0.tgz#a28876881b4bc2ca9117d4138163ddb80f781575"
-  dependencies:
-    performance-now "^2.1.0"
-
-railroad-diagrams@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/railroad-diagrams/-/railroad-diagrams-1.0.0.tgz#eb7e6267548ddedfb899c1b90e57374559cddb7e"
-
 ramda@^0.25.0:
   version "0.25.0"
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.25.0.tgz#8fdf68231cffa90bc2f9460390a0cb74a29b29a9"
 
-randexp@0.4.6:
-  version "0.4.6"
-  resolved "https://registry.yarnpkg.com/randexp/-/randexp-0.4.6.tgz#e986ad5e5e31dae13ddd6f7b3019aa7c87f60ca3"
-  dependencies:
-    discontinuous-range "1.0.0"
-    ret "~0.1.10"
-
 randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.0.6.tgz#d302c522948588848a8d300c932b44c24231da80"
@@ -5609,18 +5340,17 @@ rc@^1.2.7:
     minimist "^1.2.0"
     strip-json-comments "~2.0.1"
 
-react-dom@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-18.3.1.tgz#c2265d79511b57d479b3dd3fdfa51536494c5cb4"
-  integrity sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==
+react-dom@19.2.7:
+  version "19.2.7"
+  resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-19.2.7.tgz#0450dc9ae9ddbff76ef196401cd8b8c7fb466ccc"
+  integrity sha512-t0BRVXvbiE/o20Hfw669rLbMCDWtYZLvmJigy2f0MxsXF+71pxhR3xOkspmsO8h3ZlNzyibAmtCa3l4lYKk6gQ==
   dependencies:
-    loose-envify "^1.1.0"
-    scheduler "^0.23.2"
+    scheduler "^0.27.0"
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.2.0, react-is@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.3.1.tgz#e83557dc12eae63a99e003a46388b1dcbb44db7e"
-  integrity sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg==
+react-is@^16.13.1:
+  version "16.13.1"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
+  integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
 react-is@^16.3.2:
   version "16.4.2"
@@ -5631,21 +5361,28 @@ react-is@^17.0.1:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
 
+react-is@^19.2.7:
+  version "19.2.7"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-19.2.7.tgz#57668ee86a78574a542b0a539455212b2c086df2"
+  integrity sha512-kZFnouyVv7eP/Phmrlo9FK+zcAdriZJvzxXHF1Sl1P377WSGe2G/JxVolhTrB/jeV47lKImhNUsijjHAAbcl/A==
+
 react-lifecycles-compat@^3.0.4:
   version "3.0.4"
   resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
 
-react-overlays@^0.9.3:
-  version "0.9.3"
-  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-0.9.3.tgz#5bac8c1e9e7e057a125181dee2d784864dd62902"
-  integrity sha512-u2T7nOLnK+Hrntho4p0Nxh+BsJl0bl4Xuwj/Y0a56xywLMetgAfyjnDVrudLXsNcKGaspoC+t3C1V80W9QQTdQ==
-  dependencies:
-    classnames "^2.2.5"
-    dom-helpers "^3.2.1"
-    prop-types "^15.5.10"
-    prop-types-extra "^1.0.1"
-    react-transition-group "^2.2.1"
-    warning "^3.0.0"
+react-overlays@^5.2.0:
+  version "5.2.1"
+  resolved "https://registry.yarnpkg.com/react-overlays/-/react-overlays-5.2.1.tgz#49dc007321adb6784e1f212403f0fb37a74ab86b"
+  integrity sha512-GLLSOLWr21CqtJn8geSwQfoJufdt3mfdsnIiQswouuQ2MMPns+ihZklxvsTDKD3cR2tF8ELbi5xUsvqVhR6WvA==
+  dependencies:
+    "@babel/runtime" "^7.13.8"
+    "@popperjs/core" "^2.11.6"
+    "@restart/hooks" "^0.4.7"
+    "@types/warning" "^3.0.0"
+    dom-helpers "^5.2.0"
+    prop-types "^15.7.2"
+    uncontrollable "^7.2.1"
+    warning "^4.0.3"
 
 react-prop-types@^0.4.0:
   version "0.4.0"
@@ -5653,48 +5390,28 @@ react-prop-types@^0.4.0:
   dependencies:
     warning "^3.0.0"
 
-react-shallow-renderer@^16.15.0:
-  version "16.15.0"
-  resolved "https://registry.yarnpkg.com/react-shallow-renderer/-/react-shallow-renderer-16.15.0.tgz#48fb2cf9b23d23cde96708fe5273a7d3446f4457"
-  integrity sha512-oScf2FqQ9LFVQgA73vr86xl2NaOIX73rh+YFqcOp68CWj56tSfgtGKrEbyhCj0rSijyG9M1CYprTh39fBi5hzA==
-  dependencies:
-    object-assign "^4.1.1"
-    react-is "^16.12.0 || ^17.0.0 || ^18.0.0"
-
-react-test-renderer@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-18.3.1.tgz#e693608a1f96283400d4a3afead6893f958b80b4"
-  integrity sha512-KkAgygexHUkQqtvvx/otwxtuFu5cVjfzTCtjXLH9boS19/Nbtg84zS7wIQn39G8IlrhThBpQsMKkq5ZHZIYFXA==
-  dependencies:
-    react-is "^18.3.1"
-    react-shallow-renderer "^16.15.0"
-    scheduler "^0.23.2"
-
-react-transition-group@^2.0.0:
-  version "2.4.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.4.0.tgz#1d9391fabfd82e016f26fabd1eec329dbd922b5a"
+react-test-renderer@19.2.7:
+  version "19.2.7"
+  resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-19.2.7.tgz#465cc2df3156ad997f94e93b12d6031d54828fde"
+  integrity sha512-U4TyPDJ9MsC8rFimXuJum8w40aPc9kbOZYO8Pc2/4A884i8hwJsMNA/JNyuOc/f2/37wHvk7HjpVl1V4re7Dig==
   dependencies:
-    dom-helpers "^3.3.1"
-    loose-envify "^1.3.1"
-    prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
+    react-is "^19.2.7"
+    scheduler "^0.27.0"
 
-react-transition-group@^2.2.1:
-  version "2.9.0"
-  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-2.9.0.tgz#df9cdb025796211151a436c69a8f3b97b5b07c8d"
-  integrity sha512-+HzNTCHpeQyl4MJ/bdE0u6XRMe9+XG/+aL4mCxVN4DnPBQ0/5bfHWPDuOZUzYdMj94daZaZdCCc1Dzt9R/xSSg==
+react-transition-group@^4.4.0:
+  version "4.4.5"
+  resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.5.tgz#e53d4e3f3344da8521489fbef8f2581d42becdd1"
+  integrity sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==
   dependencies:
-    dom-helpers "^3.4.0"
+    "@babel/runtime" "^7.5.5"
+    dom-helpers "^5.0.1"
     loose-envify "^1.4.0"
     prop-types "^15.6.2"
-    react-lifecycles-compat "^3.0.4"
 
-react@^18.3.1:
-  version "18.3.1"
-  resolved "https://registry.yarnpkg.com/react/-/react-18.3.1.tgz#49ab892009c53933625bd16b2533fc754cab2891"
-  integrity sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==
-  dependencies:
-    loose-envify "^1.1.0"
+react@19.2.7:
+  version "19.2.7"
+  resolved "https://registry.yarnpkg.com/react/-/react-19.2.7.tgz#1f47a1bfc06f8ec885752c6f4af14369a9f8260b"
+  integrity sha512-HNe9WslTbXmFK8o8cmwgAeJFSBvt1bPdHCVKtaaV+WlAN36mpT4hcRpwbf3fY56ar2oIXzsBpOAiIRHAdY0OlQ==
 
 read-pkg-up@^2.0.0:
   version "2.0.0"
@@ -5768,11 +5485,6 @@ regenerator-runtime@^0.12.0:
   version "0.12.1"
   resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.12.1.tgz#fa1a71544764c036f8c49b13a08b2594c9f8a0de"
 
-regenerator-runtime@^0.13.4:
-  version "0.13.9"
-  resolved "https://registry.yarnpkg.com/regenerator-runtime/-/regenerator-runtime-0.13.9.tgz#8925742a98ffd90814988d7566ad30ca3b263b52"
-  integrity sha512-p3VT+cOEgxFsRRA9X4lkI1E+k2/CtnKtU4gcxyaCUreilL/vqI6CdZ3wxVUx3UOUg+gnUOQQcRI7BmSI656MYA==
-
 regenerator-transform@^0.13.3:
   version "0.13.3"
   resolved "https://registry.yarnpkg.com/regenerator-transform/-/regenerator-transform-0.13.3.tgz#264bd9ff38a8ce24b06e0636496b2c856b57bcbb"
@@ -5957,13 +5669,6 @@ ripemd160@^2.0.0, ripemd160@^2.0.1:
     hash-base "^3.0.0"
     inherits "^2.0.1"
 
-rst-selector-parser@^2.2.3:
-  version "2.2.3"
-  resolved "https://registry.yarnpkg.com/rst-selector-parser/-/rst-selector-parser-2.2.3.tgz#81b230ea2fcc6066c89e3472de794285d9b03d91"
-  dependencies:
-    lodash.flattendeep "^4.4.0"
-    nearley "^2.7.10"
-
 run-async@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/run-async/-/run-async-2.3.0.tgz#0371ab4ae0bdd720d4166d7dfda64ff7a445a6c0"
@@ -6008,12 +5713,10 @@ sax@^1.2.4:
   version "1.2.4"
   resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9"
 
-scheduler@^0.23.2:
-  version "0.23.2"
-  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.23.2.tgz#414ba64a3b282892e944cf2108ecc078d115cdc3"
-  integrity sha512-UOShsPwz7NrMUqhR6t0hWjFduvOzbtv7toDH1/hIrfRNIDBnnBWd0CwJTGvTpngVlmwGCdP9/Zl/tVrDqcuYzQ==
-  dependencies:
-    loose-envify "^1.1.0"
+scheduler@^0.27.0:
+  version "0.27.0"
+  resolved "https://registry.yarnpkg.com/scheduler/-/scheduler-0.27.0.tgz#0c4ef82d67d1e5c1e359e8fc76d3a87f045fe5bd"
+  integrity sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q==
 
 schema-utils@^4.3.0, schema-utils@^4.3.2:
   version "4.3.2"
@@ -6420,14 +6123,6 @@ string-width@^4.1.0, string-width@^4.2.0:
     is-fullwidth-code-point "^3.0.0"
     strip-ansi "^6.0.1"
 
-string.prototype.trim@^1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/string.prototype.trim/-/string.prototype.trim-1.1.2.tgz#d04de2c89e137f4d7d206f086b5ed2fae6be8cea"
-  dependencies:
-    define-properties "^1.1.2"
-    es-abstract "^1.5.0"
-    function-bind "^1.0.2"
-
 string_decoder@^1.0.0, string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.1.1.tgz#9cf1611ba62685d7030ae9e4ba34149c3af03fc8"
@@ -6723,9 +6418,15 @@ uncontrollable@^5.0.0:
   dependencies:
     invariant "^2.2.4"
 
-underscore@~1.4.4:
-  version "1.4.4"
-  resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
+uncontrollable@^7.2.1:
+  version "7.2.1"
+  resolved "https://registry.yarnpkg.com/uncontrollable/-/uncontrollable-7.2.1.tgz#1fa70ba0c57a14d5f78905d533cf63916dc75738"
+  integrity sha512-svtcfoTADIB0nT9nltgjujTi7BzVmwjZClOmskKu/E8FW9BXzg9os8OLr4f8Dlnk0rYWJIWr4wv9eKUXiQvQwQ==
+  dependencies:
+    "@babel/runtime" "^7.6.3"
+    "@types/react" ">=16.9.11"
+    invariant "^2.2.4"
+    react-lifecycles-compat "^3.0.4"
 
 undici-types@~7.10.0:
   version "7.10.0"
@@ -6878,6 +6579,13 @@ warning@^3.0.0:
   dependencies:
     loose-envify "^1.0.0"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack@^2.4.1:
   version "2.4.4"
   resolved "https://registry.yarnpkg.com/watchpack/-/watchpack-2.4.4.tgz#473bda72f0850453da6425081ea46fc0d7602947"