diff --git a/babel.config.json b/babel.config.json
index 6815ebd872..59457e1a81 100644
--- a/babel.config.json
+++ b/babel.config.json
@@ -1,14 +1,13 @@
 {
   "presets": [
     ["@babel/preset-env", { "modules": false } ],
-    ["@babel/preset-react", { "useSpread": true } ],
+    ["@babel/preset-react", { "useSpread": true, "runtime": "automatic" } ],
     "@babel/preset-typescript"
   ],
   "env": {
     "test": {
       "presets": [
         ["@babel/preset-env", {}],
-        ["@babel/preset-react", { "useSpread": true } ],
         "@babel/preset-typescript"
       ]
     }
diff --git a/package-lock.json b/package-lock.json
index 309fd64945..61e7f73f0e 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -118,8 +118,8 @@
         "typescript": "^4.7.4"
       },
       "peerDependencies": {
-        "react": "^16.8.6 || ^17 || ^18",
-        "react-dom": "^16.8.6 || ^17 || ^18",
+        "react": "^16.14 || ^17 || ^18",
+        "react-dom": "^16.14 || ^17 || ^18",
         "react-intl": "^5.25.1 || ^6.4.0"
       }
     },
diff --git a/package.json b/package.json
index c55666da16..4c72a4e30c 100644
--- a/package.json
+++ b/package.json
@@ -107,8 +107,8 @@
     "uuid": "^9.0.0"
   },
   "peerDependencies": {
-    "react": "^16.8.6 || ^17 || ^18",
-    "react-dom": "^16.8.6 || ^17 || ^18",
+    "react": "^16.14 || ^17 || ^18",
+    "react-dom": "^16.14 || ^17 || ^18",
     "react-intl": "^5.25.1 || ^6.4.0"
   },
   "devDependencies": {
diff --git a/src/ActionRow/index.tsx b/src/ActionRow/index.tsx
index 5a698762f2..f1a867077d 100644
--- a/src/ActionRow/index.tsx
+++ b/src/ActionRow/index.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import type { HTMLAttributes, ElementType, ReactNode } from 'react';
+import { createElement } from 'react';
 import classNames from 'classnames';
 
-interface ActionRowProps extends React.HTMLAttributes<HTMLElement> {
+interface ActionRowProps extends HTMLAttributes<HTMLElement> {
   /** Specifies the base element */
-  as?: React.ElementType;
+  as?: ElementType;
   /** Specifies the contents of the row */
-  children: React.ReactNode;
+  children: ReactNode;
   /** Specifies class name to append to the base element */
   className?: string;
   /** Specifies whether row should be displayed horizontally */
@@ -18,7 +19,7 @@ function ActionRow({
   children,
   ...props
 }: ActionRowProps) {
-  return React.createElement(
+  return createElement(
     as,
     {
       ...props,
diff --git a/src/Alert/Alert.test.tsx b/src/Alert/Alert.test.tsx
index 60929101b3..bff737a13c 100644
--- a/src/Alert/Alert.test.tsx
+++ b/src/Alert/Alert.test.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import type { ReactNode } from 'react';
 import { IntlProvider } from 'react-intl';
 import renderer, { act } from 'react-test-renderer';
 import { render, screen, within } from '@testing-library/react';
@@ -11,9 +11,9 @@ import Alert, { AlertProps } from '.';
 
 /** A compile time check. Whatever React elements this wraps won't run at runtime. */
 // eslint-disable-next-line @typescript-eslint/no-unused-vars
-function CompileCheck(_props: { children: React.ReactNode }) { return null; }
+function CompileCheck(_props: { children: ReactNode }) { return null; }
 
-function AlertWrapper({ children, ...props }: AlertProps & { children: React.ReactNode }) {
+function AlertWrapper({ children, ...props }: AlertProps & { children: ReactNode }) {
   return (
     <IntlProvider locale="en" messages={{}}>
       <Alert {...props}>
diff --git a/src/Alert/index.tsx b/src/Alert/index.tsx
index bbdb22b497..478100bcaa 100644
--- a/src/Alert/index.tsx
+++ b/src/Alert/index.tsx
@@ -1,5 +1,6 @@
 /* eslint-disable react/require-default-props */
-import React, {
+import type { ComponentType, ReactElement, ForwardedRef } from 'react';
+import {
   useCallback,
   useEffect,
   useState,
@@ -46,7 +47,7 @@ export interface AlertProps extends BaseProps {
   transition?: boolean | TransitionComponent;
   children?: ReactNode;
   /** Icon that will be shown in the alert */
-  icon?: React.ComponentType<IconProps>;
+  icon?: ComponentType<IconProps>;
   /** Whether the alert is shown. */
   show?: boolean;
   /** Whether the alert is dismissible. Defaults to false. */
@@ -54,7 +55,7 @@ export interface AlertProps extends BaseProps {
   /** Optional callback function for when the alert it dismissed. */
   onClose?: () => void;
   /** Optional list of action elements. May include, at most, 2 actions, or 1 if dismissible is true. */
-  actions?: React.ReactElement[];
+  actions?: ReactElement[];
   /** Position of the dismiss and call-to-action buttons. Defaults to `false`. */
   stacked?: boolean;
   /** Sets the text for alert close button, defaults to 'Dismiss'. */
@@ -96,7 +97,7 @@ const Alert = forwardRef(({
   stacked = false,
   show = true,
   ...props
-}: AlertProps, ref: React.ForwardedRef<HTMLDivElement>) => {
+}: AlertProps, ref: ForwardedRef<HTMLDivElement>) => {
   const [isStacked, setIsStacked] = useState(stacked);
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
   const actionButtonSize = 'sm';
@@ -110,7 +111,7 @@ const Alert = forwardRef(({
   }, [isExtraSmall, stacked]);
 
   const cloneActionElement = useCallback(
-    (Action: React.ReactElement) => {
+    (Action: ReactElement) => {
       const addtlActionProps = { size: actionButtonSize, key: Action.props.children };
       return cloneElement(Action, addtlActionProps);
     },
diff --git a/src/Annotation/Annotation.test.jsx b/src/Annotation/Annotation.test.jsx
index 9d0bd229b7..4492d66406 100644
--- a/src/Annotation/Annotation.test.jsx
+++ b/src/Annotation/Annotation.test.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react';
 import Annotation from '.';
diff --git a/src/Annotation/index.tsx b/src/Annotation/index.tsx
index b4ae89f8c8..095e4b8d01 100644
--- a/src/Annotation/index.tsx
+++ b/src/Annotation/index.tsx
@@ -1,9 +1,10 @@
-import React, { ForwardedRef } from 'react';
+import type { HTMLAttributes, ReactNode } from 'react';
+import { forwardRef, ForwardedRef } from 'react';
 import classNames from 'classnames';
 
-interface AnnotationProps extends React.HTMLAttributes<HTMLSpanElement> {
+interface AnnotationProps extends HTMLAttributes<HTMLSpanElement> {
   /** Specifies contents of the component. */
-  children: React.ReactNode;
+  children: ReactNode;
   /** Specifies class name to append to the base element. */
   className?: string;
   /** Specifies variant to use. */
@@ -12,7 +13,7 @@ interface AnnotationProps extends React.HTMLAttributes<HTMLSpanElement> {
   arrowPlacement?: 'top' | 'right' | 'bottom' | 'left';
 }
 
-const Annotation = React.forwardRef(({
+const Annotation = forwardRef(({
   className,
   variant = 'success',
   children,
diff --git a/src/Avatar/Avatar.test.jsx b/src/Avatar/Avatar.test.jsx
index 6a0065edfc..caaad284f6 100644
--- a/src/Avatar/Avatar.test.jsx
+++ b/src/Avatar/Avatar.test.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import Avatar from './index';
 
diff --git a/src/Avatar/index.tsx b/src/Avatar/index.tsx
index f354caf686..057b917eaa 100644
--- a/src/Avatar/index.tsx
+++ b/src/Avatar/index.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
+import type { ImgHTMLAttributes } from 'react';
 import classNames from 'classnames';
 // @ts-ignore
 import defaultAvatar from './default-avatar.svg';
 
-export interface AvatarProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+export interface AvatarProps extends ImgHTMLAttributes<HTMLImageElement> {
   /** Alt text. Usually the user's name */
   alt?: string;
   /** Size of the avatar */
diff --git a/src/Badge/index.jsx b/src/Badge/index.jsx
index 5bc76469ca..b6a395f160 100644
--- a/src/Badge/index.jsx
+++ b/src/Badge/index.jsx
@@ -1,8 +1,8 @@
-import React from 'react';
+import { forwardRef } from 'react';
 import PropTypes from 'prop-types';
 import BaseBadge from 'react-bootstrap/Badge';
 
-const Badge = React.forwardRef((props, ref) => <BaseBadge {...props} ref={ref} />);
+const Badge = forwardRef((props, ref) => <BaseBadge {...props} ref={ref} />);
 
 const STYLE_VARIANTS = [
   'primary',
diff --git a/src/Breadcrumb/Breadcrumb.test.jsx b/src/Breadcrumb/Breadcrumb.test.jsx
index 3b402d971e..b50710789c 100644
--- a/src/Breadcrumb/Breadcrumb.test.jsx
+++ b/src/Breadcrumb/Breadcrumb.test.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
diff --git a/src/Breadcrumb/BreadcrumbLink.jsx b/src/Breadcrumb/BreadcrumbLink.jsx
index e5d826a7d8..54db57a33c 100644
--- a/src/Breadcrumb/BreadcrumbLink.jsx
+++ b/src/Breadcrumb/BreadcrumbLink.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { createElement } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -24,7 +24,7 @@ export default function BreadcrumbLink({ as, clickHandler, linkProps }) {
     addtlProps.onClick = clickHandler;
   }
 
-  return React.createElement(
+  return createElement(
     as,
     {
       ...props,
diff --git a/src/Breadcrumb/index.jsx b/src/Breadcrumb/index.jsx
index 0e3f0e38c5..33968faeb1 100644
--- a/src/Breadcrumb/index.jsx
+++ b/src/Breadcrumb/index.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import { Fragment } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -21,7 +21,7 @@ function Breadcrumb({
     >
       <ol className={classNames('list-inline', { 'is-mobile': isMobile })}>
         {displayLinks.map((link, i) => (
-          <React.Fragment key={link.label}>
+          <Fragment key={link.label}>
             <li className={classNames('list-inline-item')}>
               <BreadcrumbLink as={linkAs} clickHandler={clickHandler} linkProps={link} />
             </li>
@@ -31,7 +31,7 @@ function Breadcrumb({
                 {spacer || <Icon src={ChevronRight} id={`spacer-${i}`} />}
               </li>
               )}
-          </React.Fragment>
+          </Fragment>
         ))}
         {!isMobile && activeLabel && <li className="list-inline-item active" key="active" aria-current="page">{activeLabel}</li>}
       </ol>
diff --git a/src/Bubble/Bubble.test.tsx b/src/Bubble/Bubble.test.tsx
index d732aa504e..8ec8f18a3d 100644
--- a/src/Bubble/Bubble.test.tsx
+++ b/src/Bubble/Bubble.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react';
 import Bubble from '.';
diff --git a/src/Bubble/index.tsx b/src/Bubble/index.tsx
index a30e71e957..576e58edf1 100644
--- a/src/Bubble/index.tsx
+++ b/src/Bubble/index.tsx
@@ -1,11 +1,12 @@
-import React from 'react';
+import type { ReactNode, ForwardedRef } from 'react';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 
 export type BubbleVariant = 'primary' | 'success' | 'error' | 'warning';
 
 export interface BubbleProps {
   /** Specifies contents of the component. */
-  children: React.ReactNode;
+  children: ReactNode;
   /** The `Bubble` style variant to use. */
   variant?: BubbleVariant;
   /** Activates disabled variant. */
@@ -16,14 +17,14 @@ export interface BubbleProps {
   expandable?: boolean;
 }
 
-const Bubble = React.forwardRef(({
+const Bubble = forwardRef(({
   variant = 'primary',
   className,
   children = null,
   disabled = false,
   expandable = false,
   ...props
-}: BubbleProps, ref: React.ForwardedRef<HTMLDivElement>) => (
+}: BubbleProps, ref: ForwardedRef<HTMLDivElement>) => (
   <div
     ref={ref}
     className={classNames(
diff --git a/src/Button/Button.test.tsx b/src/Button/Button.test.tsx
index 91b7f23a71..ad1eff6194 100644
--- a/src/Button/Button.test.tsx
+++ b/src/Button/Button.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { IntlProvider } from 'react-intl';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
diff --git a/src/Button/ButtonGroup.test.tsx b/src/Button/ButtonGroup.test.tsx
index c43dc7ec2f..bbf4c66a51 100644
--- a/src/Button/ButtonGroup.test.tsx
+++ b/src/Button/ButtonGroup.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 
 import Button, { ButtonGroup } from './index';
diff --git a/src/Button/ButtonToolbar.test.tsx b/src/Button/ButtonToolbar.test.tsx
index efccb2a753..5ede81a9d3 100644
--- a/src/Button/ButtonToolbar.test.tsx
+++ b/src/Button/ButtonToolbar.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import renderer from 'react-test-renderer';
 
 import { ButtonToolbar } from './index';
diff --git a/src/Button/index.tsx b/src/Button/index.tsx
index e45b98e557..745224e987 100644
--- a/src/Button/index.tsx
+++ b/src/Button/index.tsx
@@ -1,4 +1,7 @@
-import React from 'react';
+import type {
+  ElementType, ComponentType, ReactNode, ForwardedRef, AriaRole,
+} from 'react';
+import { forwardRef } from 'react';
 import classNames from 'classnames';
 import BaseButton, { type ButtonProps as BaseButtonProps } from 'react-bootstrap/Button';
 import BaseButtonGroup, { type ButtonGroupProps as BaseButtonGroupProps } from 'react-bootstrap/ButtonGroup';
@@ -29,7 +32,7 @@ type OtherDeprecatedValue = string & {}; // Allow any other string value for now
 
 export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
   /** Set a custom element for this component (default: `button`, with `type="button"`). */
-  as?: React.ElementType;
+  as?: ElementType;
   size?: 'sm' | 'md' | 'lg' | 'inline';
   /**
    * An icon component to render. Example:
@@ -38,7 +41,7 @@ export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
    * <Button iconBefore={Close}>Close</Button>
    * ```
    */
-  iconBefore?: React.ComponentType;
+  iconBefore?: ComponentType;
   /**
    * An icon component to render. Example:
    * ```
@@ -46,7 +49,7 @@ export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
    * <Button iconAfter={Close}>Close</Button>
    * ```
    */
-  iconAfter?: React.ComponentType;
+  iconAfter?: ComponentType;
 
   // The following are the same as in BaseButtonProps, but we re-define them to add documentation.
   // The upstream type defintions do not have any comments/docs.
@@ -56,7 +59,7 @@ export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
   /** Optional: Specify additional class name(s) to apply to the button */
   className?: string;
   /** Specifies the text that is displayed within the button. */
-  children: React.ReactNode;
+  children: ReactNode;
   /** Specifies variant to use.
    * Can be one of the base variants: `primary`, `secondary`, `tertiary`, `brand`, `success`, `danger`, `warning`,
    * `info`, `dark`, `light`, `link`,
@@ -66,13 +69,13 @@ export interface ButtonProps extends Omit<BaseButtonProps, 'size'> {
   variant?: BaseVariant | `inverse-${BaseVariant}` | `outline-${BaseVariant}` | `inverse-outline-${BaseVariant}` | OtherDeprecatedValue;
 }
 
-const Button: ComponentWithAsProp<'button', ButtonProps> = React.forwardRef(({
+const Button: ComponentWithAsProp<'button', ButtonProps> = forwardRef(({
   children,
   iconAfter,
   iconBefore,
   size,
   ...props
-}: ButtonProps, ref: React.ForwardedRef<HTMLDivElement>) => (
+}: ButtonProps, ref: ForwardedRef<HTMLDivElement>) => (
   <BaseButton
     size={size as 'sm' | 'lg' | undefined} // Bootstrap's <Button> types do not allow 'md' or 'inline', but we do.
     {...props}
@@ -91,9 +94,9 @@ const Button: ComponentWithAsProp<'button', ButtonProps> = React.forwardRef(({
 
 interface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {
   /** Specifies element type for this component. */
-  as?: React.ElementType;
+  as?: ElementType;
   /** An ARIA role describing the button group (default: `group`). */
-  role?: React.AriaRole;
+  role?: AriaRole;
   /** Specifies the size for all Buttons in the group (default: `md`). */
   size?: 'sm' | 'md' | 'lg' | 'inline';
   /** Display as a button toggle group (default: `false`). */
@@ -105,7 +108,7 @@ interface ButtonGroupProps extends Omit<BaseButtonGroupProps, 'size'> {
 }
 
 const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (
-  React.forwardRef(({ size = 'md', ...props }: ButtonGroupProps, ref: React.ForwardedRef<HTMLDivElement>) => (
+  forwardRef(({ size = 'md', ...props }: ButtonGroupProps, ref: ForwardedRef<HTMLDivElement>) => (
     <BaseButtonGroup size={size as 'sm' | 'lg'} {...props} ref={ref} />
   ))
 );
@@ -115,13 +118,13 @@ const ButtonGroup: ComponentWithAsProp<'div', ButtonGroupProps> = (
 
 interface ButtonToolbarProps extends BaseButtonToolbarProps {
   /** An ARIA role describing the button group (default: `toolbar`). */
-  role?: React.AriaRole;
+  role?: AriaRole;
   /** Overrides underlying component base CSS class name (default: `btn-toolbar`) */
   bsPrefix?: string;
 }
 
 const ButtonToolbar: ComponentWithAsProp<'div', ButtonToolbarProps> = (
-  React.forwardRef((props: ButtonToolbarProps, ref: React.ForwardedRef<HTMLDivElement>) => (
+  forwardRef((props: ButtonToolbarProps, ref: ForwardedRef<HTMLDivElement>) => (
     <BaseButtonToolbar {...props} ref={ref} />
   ))
 );
diff --git a/src/asInput/asInput.test.jsx b/src/asInput/asInput.test.jsx
index 3951272f1b..1763b5c672 100644
--- a/src/asInput/asInput.test.jsx
+++ b/src/asInput/asInput.test.jsx
@@ -1,4 +1,3 @@
-import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
diff --git a/src/asInput/index.jsx b/src/asInput/index.jsx
index 93175d1fe8..53bd8cc914 100644
--- a/src/asInput/index.jsx
+++ b/src/asInput/index.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+/* eslint-disable react/no-unused-prop-types */
+import { cloneElement, Component } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
@@ -62,7 +63,7 @@ export const defaultProps = {
 };
 
 const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) => {
-  class NewComponent extends React.Component {
+  class NewComponent extends Component {
     constructor(props) {
       super(props);
       this.handleChange = this.handleChange.bind(this);
@@ -179,7 +180,7 @@ const asInput = (WrappedComponent, inputType = undefined, labelFirst = true) =>
 
     getAddons({ addonElements, type }) {
       if (Array.isArray(addonElements)) {
-        return addonElements.map((addon, index) => React.cloneElement(
+        return addonElements.map((addon, index) => cloneElement(
           addon,
           { key: this.generateInputGroupAddonKey({ prefix: type, index }) },
         ));
diff --git a/www/gatsby-node.js b/www/gatsby-node.js
index 3400d41792..a0a1e7e1a6 100644
--- a/www/gatsby-node.js
+++ b/www/gatsby-node.js
@@ -10,6 +10,15 @@ const onCreateWebpackConfig = require('./utils/onCreateWebpackConfig');
 const createCssUtilityClassNodes = require('./utils/createCssUtilityClassNodes');
 const onCreatePage = require('./utils/onCreatePage');
 
+exports.onCreateBabelConfig = ({ actions }) => {
+  actions.setBabelPreset({
+    name: '@babel/preset-react',
+    options: {
+      runtime: 'automatic',
+    },
+  });
+};
+
 exports.onCreateWebpackConfig = ({ actions }) => onCreateWebpackConfig(actions);
 
 exports.onCreateNode = ({ node, actions, getNode }) => onCreateNode(node, actions, getNode);
diff --git a/www/playroom.config.js b/www/playroom.config.js
index f3c37a8dd7..f668a01322 100644
--- a/www/playroom.config.js
+++ b/www/playroom.config.js
@@ -26,7 +26,7 @@ module.exports = {
               options: {
                 presets: [
                   require.resolve('@babel/preset-env'),
-                  require.resolve('@babel/preset-react'),
+                  [require.resolve('@babel/preset-react'), { runtime: 'automatic' }],
                   require.resolve('@babel/preset-typescript'),
                 ],
                 plugins: [