diff --git a/.buildkite/pipelines/pipeline_pull_request_test.yml b/.buildkite/pipelines/pipeline_pull_request_test.yml
index af25c625a9f..418acd54bb5 100644
--- a/.buildkite/pipelines/pipeline_pull_request_test.yml
+++ b/.buildkite/pipelines/pipeline_pull_request_test.yml
@@ -1,9 +1,75 @@
 # 🏠/.buildkite/pipelines/pipeline_pull_request_test.yml
 
 steps:
-  - agents:
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":typescript: Linting"
+    agents:
       provider: "gcp"
-    command: .buildkite/scripts/pipeline_test.sh
-    if: build.branch != "main" # We're skipping testing commits in main for now to maintain parity with previous Jenkins setup
+    env:
+      TEST_TYPE: 'lint'
+    if: build.branch != "main" # This job is triggered by the combined test and deploy docs for every PR
+  
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":jest: TS unit tests"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'unit:ts'
+    if: build.branch != "main"
+  
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":jest: TSX unit tests on React 16"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'unit:tsx:16'
+    if: build.branch != "main"
+  
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":jest: TSX unit tests on React 17"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'unit:tsx:17'
+    if: build.branch != "main"
+  
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":jest: TSX unit tests on React 18"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'unit:tsx'
+    if: build.branch != "main"
+  
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":cypress: Cypress tests on React 16"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'cypress:16'
+    if: build.branch != "main"
+    artifact_paths:
+      - "cypress/screenshots/**/*.png"
+      - "cypress/videos/**/*.mp4"
+  
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":cypress: Cypress tests on React 17"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'cypress:17'
+    if: build.branch != "main"
+    artifact_paths:
+      - "cypress/screenshots/**/*.png"
+      - "cypress/videos/**/*.mp4"
+  
+  - command: .buildkite/scripts/pipeline_test.sh
+    label: ":cypress: Cypress tests on React 18"
+    agents:
+      provider: "gcp"
+    env:
+      TEST_TYPE: 'cypress:18'
+    if: build.branch != "main"
     artifact_paths:
       - "cypress/screenshots/**/*.png"
+      - "cypress/videos/**/*.mp4"
diff --git a/.buildkite/scripts/pipeline_test.sh b/.buildkite/scripts/pipeline_test.sh
index bad0e5ce24a..0ab290d4ed1 100644
--- a/.buildkite/scripts/pipeline_test.sh
+++ b/.buildkite/scripts/pipeline_test.sh
@@ -2,17 +2,63 @@
 
 set -euo pipefail
 
-docker run \
-  -i --rm \
-  --env GIT_COMMITTER_NAME=test \
-  --env GIT_COMMITTER_EMAIL=test \
-  --env HOME=/tmp \
-  --user="$(id -u):$(id -g)" \
-  --volume="$(pwd):/app" \
-  --workdir=/app \
-  docker.elastic.co/eui/ci:5.3 \
-  bash -c "/opt/yarn*/bin/yarn \
-  && yarn cypress install \
-  && yarn lint \
-  && yarn test-unit --node-options=--max_old_space_size=2048 \
-  && yarn test-cypress --node-options=--max_old_space_size=2048"
+DOCKER_OPTIONS=(
+  -i --rm
+  --env GIT_COMMITTER_NAME=test
+  --env GIT_COMMITTER_EMAIL=test
+  --env HOME=/tmp
+  --user="$(id -u):$(id -g)"
+  --volume="$(pwd):/app"
+  --workdir=/app
+  docker.elastic.co/eui/ci:5.5
+)
+
+case $TEST_TYPE in
+  lint)
+    echo "[TASK]: Running linters"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn lint")
+    ;;
+
+  unit:ts)
+    echo "[TASK]: Running .ts and .js unit tests"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --testMatch=non-react")
+    ;;
+
+  unit:tsx:16)
+    echo "[TASK]: Running Jest .tsx tests against React 16"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --react-version=16 --testMatch=react")
+    ;;
+  
+  unit:tsx:17)
+    echo "[TASK]: Running Jest .tsx tests against React 17"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --react-version=17 --testMatch=react")
+    ;;
+  
+  unit:tsx)
+    echo "[TASK]: Running Jest .tsx tests against React 18"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn test-unit --node-options=--max_old_space_size=2048 --testMatch=react")
+    ;;
+
+  cypress:16)
+    echo "[TASK]: Running Cypress tests against React 16"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && yarn test-cypress --node-options=--max_old_space_size=2048 --react-version=16")
+    ;;
+
+  cypress:17)
+    echo "[TASK]: Running Cypress tests against React 17"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && yarn test-cypress --node-options=--max_old_space_size=2048 --react-version=17")
+    ;;
+
+  cypress:18)
+    echo "[TASK]: Running Cypress tests against React 18"
+    DOCKER_OPTIONS+=(bash -c "/opt/yarn*/bin/yarn && yarn cypress install && yarn test-cypress --node-options=--max_old_space_size=2048")
+    ;;
+
+  *)
+    echo "[ERROR]: Unknown task"
+    echo "Exit code: 1"
+    exit 1
+    ;;
+esac
+
+docker run "${DOCKER_OPTIONS[@]}"
diff --git a/.nvmrc b/.nvmrc
index 4a1f488b6c3..f6610cade82 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1 +1 @@
-18.17.1
+18.18.1
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
index e2ba33fff7d..857654a3218 100644
--- a/.storybook/preview.tsx
+++ b/.storybook/preview.tsx
@@ -38,10 +38,20 @@ import { writingModeStyles } from './writing_mode.styles';
 // once all EUI components are converted to Emotion
 import '../dist/eui_theme_light.css';
 
+/**
+ * Prop controls
+ */
+
+import type { CommonProps } from '../src/components/common';
+import { hideStorybookControls } from './utils';
+
 const preview: Preview = {
   decorators: [
     (Story, context) => (
-      <EuiProvider colorMode={context.globals.colorMode}>
+      <EuiProvider
+        colorMode={context.globals.colorMode}
+        {...(context.componentId === 'euiprovider' && context.args)}
+      >
         <div
           css={[
             writingModeStyles.writingMode,
@@ -86,6 +96,7 @@ const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: { disable: true }, // Use colorMode instead
+    options: { showPanel: true }, // default to showing the controls panel
     controls: {
       expanded: true,
       sort: 'requiredFirst',
@@ -100,12 +111,13 @@ const preview: Preview = {
   },
   // Due to CommonProps, these props appear on almost every Story, but generally
   // aren't super useful to test - let's disable them by default and (if needed)
-  // individual stories can re-enable them
-  argTypes: {
-    css: { table: { disable: true } },
-    className: { table: { disable: true } },
-    'data-test-subj': { table: { disable: true } },
-  },
+  // individual stories can re-enable them, e.g. by passing
+  // `argTypes: { 'data-test-subj': { table: { disable: false } } }`
+  argTypes: hideStorybookControls<CommonProps>([
+    'css',
+    'className',
+    'data-test-subj',
+  ]),
 };
 
 export default preview;
diff --git a/.storybook/utils.test.ts b/.storybook/utils.test.ts
new file mode 100644
index 00000000000..d570363a393
--- /dev/null
+++ b/.storybook/utils.test.ts
@@ -0,0 +1,49 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { hideStorybookControls, disableStorybookControls } from './utils';
+
+describe('hideStorybookControls', () => {
+  it('outputs the expected `argTypes` object when passed prop name strings', () => {
+    expect(
+      hideStorybookControls(['isDisabled', 'isLoading', 'isInvalid'])
+    ).toEqual({
+      isDisabled: { table: { disable: true } },
+      isLoading: { table: { disable: true } },
+      isInvalid: { table: { disable: true } },
+    });
+  });
+
+  it('throws a typescript error if a generic is passed and the prop names do not match', () => {
+    type TestComponentProps = { hello: boolean; world: boolean };
+    // No typescript error
+    hideStorybookControls<TestComponentProps>(['hello', 'world']);
+    // @ts-expect-error - will fail `yarn lint` if a TS error is *not* produced
+    hideStorybookControls<TestComponentProps>(['hello', 'world', 'error']);
+  });
+});
+
+describe('disableStorybookControls', () => {
+  it('outputs the expected `argTypes` object when passed prop name strings', () => {
+    expect(
+      disableStorybookControls(['isDisabled', 'isLoading', 'isInvalid'])
+    ).toEqual({
+      isDisabled: { control: false },
+      isLoading: { control: false },
+      isInvalid: { control: false },
+    });
+  });
+
+  it('throws a typescript error if a generic is passed and the prop names do not match', () => {
+    type TestComponentProps = { hello: boolean; world: boolean };
+    // No typescript error
+    disableStorybookControls<TestComponentProps>(['hello', 'world']);
+    // @ts-expect-error - will fail `yarn lint` if a TS error is *not* produced
+    disableStorybookControls<TestComponentProps>(['hello', 'world', 'error']);
+  });
+});
diff --git a/.storybook/utils.ts b/.storybook/utils.ts
new file mode 100644
index 00000000000..517b93421c2
--- /dev/null
+++ b/.storybook/utils.ts
@@ -0,0 +1,64 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+/**
+ * argTypes configurations
+ */
+
+/**
+ * Completely hide props from Storybook's controls panel.
+ * Should be passed or spread to `argTypes`
+ */
+export const hideStorybookControls = <Props>(
+  propNames: Array<keyof Props>
+): Record<keyof Props, typeof HIDE_CONTROL> | {} => {
+  return propNames.reduce(
+    (obj, name) => ({ ...obj, [name]: HIDE_CONTROL }),
+    {}
+  );
+};
+const HIDE_CONTROL = { table: { disable: true } };
+
+/**
+ * Leave props visible in Storybook's controls panel, but disable them
+ * from being controllable (renders a `-`).
+ *
+ * Should be passed or spread to `argTypes`
+ */
+export const disableStorybookControls = <Props>(
+  propNames: Array<keyof Props>
+): Record<keyof Props, typeof DISABLE_CONTROL> | {} => {
+  return propNames.reduce(
+    (obj, name) => ({ ...obj, [name]: DISABLE_CONTROL }),
+    {}
+  );
+};
+const DISABLE_CONTROL = { control: false };
+
+/**
+ * parameters configurations
+ */
+
+/**
+ * Will hide all props/controls. Pass to `parameters`
+ *
+ * TODO: Figure out some way to not show Storybook's "setup" text?
+ */
+export const hideAllStorybookControls = {
+  controls: { exclude: /.*/g },
+};
+
+/**
+ * Will hide the control/addon panel entirely for a specific story.
+ * Should be passed or spread to to `parameters`.
+ *
+ * Note that users can choose to re-show the panel in the UI
+ */
+export const hidePanel = {
+  options: { showPanel: false },
+};
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 9380fce9570..81f888d4f88 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,41 @@
+## [`89.1.0`](https://github.com/elastic/eui/tree/v89.1.0)
+
+- Added `tokenVectorSparse` token and updated `tokenDenseVector` token (now named `tokenVectorDense`). ([#7282](https://github.com/elastic/eui/pull/7282))
+
+**CSS-in-JS conversions**
+
+- Reduced default CSS prefixes generated by Emotion to only browsers supported by EUI (latest evergreen browsers). This can be customized by passing your own Emotion cache to `EuiProvider`. ([#7272](https://github.com/elastic/eui/pull/7272))
+
+## [`89.0.0`](https://github.com/elastic/eui/tree/v89.0.0)
+
+- Added new `pushAnimation` prop to push `EuiFlyout`s, which enables a slide in animation ([#7239](https://github.com/elastic/eui/pull/7239))
+- Updated `EuiComboBox` to use `EuiInputPopover` under the hood ([#7246](https://github.com/elastic/eui/pull/7246))
+- Added `inputPopoverProps` to `EuiComboBox`, which allows customizing the underlying popover ([#7246](https://github.com/elastic/eui/pull/7246))
+- Added a new beta `EuiTextBlockTruncate` component for multi-line truncation ([#7250](https://github.com/elastic/eui/pull/7250))
+- Updated `EuiBasicTable` and `EuiInMemoryTable` to support multi-line truncation. This can be set via `truncateText.lines` in the `columns` prop. ([#7254](https://github.com/elastic/eui/pull/7254))
+
+**Bug fixes**
+
+- Fixed `EuiFlexGroup` and `EuiFlexGrid's `m` gutter size ([#7251](https://github.com/elastic/eui/pull/7251))
+- Fixed focus trap rerender issues in `EuiFlyout` with memoization ([#7259](https://github.com/elastic/eui/pull/7259))
+- Fixed a visual bug with `EuiContextMenu`'s animation between panels ([#7268](https://github.com/elastic/eui/pull/7268))
+
+**Breaking changes**
+
+- EUI's global body font-size now respects the `font.defaultUnits` token. This means that the global font size will use the `rem` unit by default, instead of `px`. ([#7182](https://github.com/elastic/eui/pull/7182))
+- Removed exported `accessibleClickKeys`, `comboBoxKeys`, and `cascadingMenuKeys` services. Use the generic `keys` service instead ([#7256](https://github.com/elastic/eui/pull/7256))
+- Removed `EuiColorStops` due to low usage ([#7262](https://github.com/elastic/eui/pull/7262))
+- Removed `EuiSuggest`. We recommend using `EuiSelectable` or `EuiComboBox` instead ([#7263](https://github.com/elastic/eui/pull/7263))
+- Removed `euiHeaderAffordForFixed` Sass mixin, and  `$euiHeaderHeight` and `$euiHeaderHeightCompensation` Sass variables. Use the CSS variable `--var(euiFixedHeadersOffset, 0)` instead. ([#7264](https://github.com/elastic/eui/pull/7264))
+
+**Accessibility**
+
+- When using `rem` or `em` font units, EUI now respects, instead of ignoring, browser default font sizes set by end users. ([#7182](https://github.com/elastic/eui/pull/7182))
+
+## [`88.5.4`](https://github.com/elastic/eui/tree/v88.5.4)
+
+- This release contains internal changes to a beta component needed by Kibana.
+
 ## [`88.5.3`](https://github.com/elastic/eui/tree/v88.5.3)
 
 **Bug fixes**
diff --git a/cypress.config.ts b/cypress.config.ts
index 0436068c760..4c53af5bf36 100644
--- a/cypress.config.ts
+++ b/cypress.config.ts
@@ -1,4 +1,5 @@
 import { defineConfig } from 'cypress';
+import { unlinkSync } from 'fs';
 import webpackConfig from './cypress/webpack.config';
 
 export default defineConfig({
@@ -28,9 +29,25 @@ export default defineConfig({
         },
       });
 
+      on(
+        'after:spec',
+        (spec: Cypress.Spec, results: CypressCommandLine.RunResult) => {
+          if (config.video) {
+            if (results.stats.failures !== 0) {
+              console.log(
+                `[FAILURE]: Recording video for ${results.spec.name}.`
+              );
+            } else {
+              unlinkSync(results.video!);
+            }
+          }
+        }
+      );
+
       return config;
     },
     specPattern: ['./src/**/*.spec.tsx', './src/**/*.a11y.tsx'], // scripts/cypress.js splits this using the CLI --spec argument
     video: false,
+    videoCompression: 32, // more time to process, but a smaller file to upload as an artifact
   },
 });
diff --git a/i18ntokens.json b/i18ntokens.json
index 94affb3d45f..01b05ed3709 100644
--- a/i18ntokens.json
+++ b/i18ntokens.json
@@ -455,14 +455,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 151,
+        "line": 165,
         "column": 27,
-        "index": 5087
+        "index": 5469
       },
       "end": {
-        "line": 154,
+        "line": 168,
         "column": 3,
-        "index": 5157
+        "index": 5539
       }
     },
     "filepath": "src/components/collapsible_nav_beta/collapsible_nav_beta.tsx"
@@ -647,132 +647,6 @@
     },
     "filepath": "src/components/color_picker/color_picker.tsx"
   },
-  {
-    "token": "euiColorStopThumb.buttonAriaLabel",
-    "defString": "Press the Enter key to modify this stop. Press Escape to focus the group",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 289,
-        "column": 8,
-        "index": 7845
-      },
-      "end": {
-        "line": 298,
-        "column": 9,
-        "index": 8162
-      }
-    },
-    "filepath": "src/components/color_picker/color_stops/color_stop_thumb.tsx"
-  },
-  {
-    "token": "euiColorStopThumb.buttonTitle",
-    "defString": "Click to edit, drag to reposition",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 289,
-        "column": 8,
-        "index": 7845
-      },
-      "end": {
-        "line": 298,
-        "column": 9,
-        "index": 8162
-      }
-    },
-    "filepath": "src/components/color_picker/color_stops/color_stop_thumb.tsx"
-  },
-  {
-    "token": "euiColorStopThumb.screenReaderAnnouncement",
-    "defString": "A popup with a color stop edit form opened.\n            Tab forward to cycle through form controls or press\n            escape to close this popup.",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 340,
-        "column": 12,
-        "index": 9548
-      },
-      "end": {
-        "line": 345,
-        "column": 14,
-        "index": 9808
-      }
-    },
-    "filepath": "src/components/color_picker/color_stops/color_stop_thumb.tsx"
-  },
-  {
-    "token": "euiColorStopThumb.stopLabel",
-    "defString": "Stop value",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 350,
-        "column": 12,
-        "index": 9948
-      },
-      "end": {
-        "line": 356,
-        "column": 13,
-        "index": 10177
-      }
-    },
-    "filepath": "src/components/color_picker/color_stops/color_stop_thumb.tsx"
-  },
-  {
-    "token": "euiColorStopThumb.stopErrorMessage",
-    "defString": "Value is out of range",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 350,
-        "column": 12,
-        "index": 9948
-      },
-      "end": {
-        "line": 356,
-        "column": 13,
-        "index": 10177
-      }
-    },
-    "filepath": "src/components/color_picker/color_stops/color_stop_thumb.tsx"
-  },
-  {
-    "token": "euiColorStopThumb.removeLabel",
-    "defString": "Remove this stop",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 382,
-        "column": 16,
-        "index": 11269
-      },
-      "end": {
-        "line": 385,
-        "column": 17,
-        "index": 11396
-      }
-    },
-    "filepath": "src/components/color_picker/color_stops/color_stop_thumb.tsx"
-  },
-  {
-    "token": "euiColorStops.screenReaderAnnouncement",
-    "defString": "{label}: {readOnly} {disabled} Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 543,
-        "column": 10,
-        "index": 16200
-      },
-      "end": {
-        "line": 551,
-        "column": 12,
-        "index": 16680
-      }
-    },
-    "filepath": "src/components/color_picker/color_stops/color_stops.tsx"
-  },
   {
     "token": "euiHue.label",
     "defString": "Select the HSV color mode 'hue' value",
@@ -851,14 +725,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 415,
+        "line": 335,
         "column": 12,
-        "index": 12237
+        "index": 9466
       },
       "end": {
-        "line": 418,
+        "line": 338,
         "column": 14,
-        "index": 12360
+        "index": 9589
       }
     },
     "filepath": "src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx"
@@ -869,14 +743,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 428,
+        "line": 348,
         "column": 16,
-        "index": 12799
+        "index": 10028
       },
       "end": {
-        "line": 432,
+        "line": 352,
         "column": 18,
-        "index": 13030
+        "index": 10259
       }
     },
     "filepath": "src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx"
@@ -887,14 +761,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 447,
+        "line": 367,
         "column": 16,
-        "index": 13459
+        "index": 10688
       },
       "end": {
-        "line": 453,
+        "line": 373,
         "column": 18,
-        "index": 13732
+        "index": 10961
       }
     },
     "filepath": "src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx"
@@ -905,14 +779,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 482,
+        "line": 402,
         "column": 20,
-        "index": 14723
+        "index": 11952
       },
       "end": {
-        "line": 488,
+        "line": 408,
         "column": 22,
-        "index": 15021
+        "index": 12250
       }
     },
     "filepath": "src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx"
@@ -923,14 +797,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 499,
+        "line": 419,
         "column": 12,
-        "index": 15225
+        "index": 12454
       },
       "end": {
-        "line": 503,
+        "line": 423,
         "column": 14,
-        "index": 15446
+        "index": 12675
       }
     },
     "filepath": "src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx"
@@ -941,14 +815,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 510,
+        "line": 430,
         "column": 10,
-        "index": 15565
+        "index": 12794
       },
       "end": {
-        "line": 513,
+        "line": 433,
         "column": 12,
-        "index": 15705
+        "index": 12934
       }
     },
     "filepath": "src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx"
@@ -959,14 +833,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 519,
+        "line": 439,
         "column": 10,
-        "index": 15818
+        "index": 13047
       },
       "end": {
-        "line": 522,
+        "line": 442,
         "column": 12,
-        "index": 15961
+        "index": 13190
       }
     },
     "filepath": "src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx"
@@ -977,14 +851,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 970,
-        "column": 10,
-        "index": 28029
+        "line": 767,
+        "column": 8,
+        "index": 22243
       },
       "end": {
-        "line": 973,
-        "column": 11,
-        "index": 28154
+        "line": 770,
+        "column": 9,
+        "index": 22362
       }
     },
     "filepath": "src/components/combo_box/combo_box.tsx"
@@ -1049,14 +923,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 38,
+        "line": 41,
         "column": 4,
-        "index": 1346
+        "index": 1427
       },
       "end": {
-        "line": 42,
+        "line": 45,
         "column": 5,
-        "index": 1501
+        "index": 1582
       }
     },
     "filepath": "src/components/datagrid/body/data_grid_cell_actions.tsx"
@@ -1067,14 +941,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 100,
-        "column": 12,
-        "index": 2981
+        "line": 135,
+        "column": 10,
+        "index": 4290
       },
       "end": {
-        "line": 108,
-        "column": 14,
-        "index": 3288
+        "line": 143,
+        "column": 12,
+        "index": 4581
       }
     },
     "filepath": "src/components/datagrid/body/data_grid_cell.tsx"
@@ -4703,14 +4577,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 295,
+        "line": 311,
         "column": 8,
-        "index": 9503
+        "index": 9875
       },
       "end": {
-        "line": 295,
+        "line": 311,
         "column": 78,
-        "index": 9573
+        "index": 9945
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4721,14 +4595,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 359,
+        "line": 385,
         "column": 12,
-        "index": 11856
+        "index": 12431
       },
       "end": {
-        "line": 362,
+        "line": 388,
         "column": 14,
-        "index": 12065
+        "index": 12640
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4739,14 +4613,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 364,
+        "line": 390,
         "column": 12,
-        "index": 12094
+        "index": 12669
       },
       "end": {
-        "line": 367,
+        "line": 393,
         "column": 14,
-        "index": 12266
+        "index": 12841
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -4757,14 +4631,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 370,
+        "line": 396,
         "column": 12,
-        "index": 12337
+        "index": 12912
       },
       "end": {
-        "line": 373,
+        "line": 399,
         "column": 14,
-        "index": 12524
+        "index": 13099
       }
     },
     "filepath": "src/components/flyout/flyout.tsx"
@@ -6055,12 +5929,12 @@
       "start": {
         "line": 687,
         "column": 16,
-        "index": 20276
+        "index": 20250
       },
       "end": {
         "line": 690,
         "column": 18,
-        "index": 20470
+        "index": 20444
       }
     },
     "filepath": "src/components/popover/popover.tsx"
@@ -6893,114 +6767,6 @@
     },
     "filepath": "src/components/steps/step_strings.tsx"
   },
-  {
-    "token": "euiSuggest.stateSavedTooltip",
-    "defString": "Saved.",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 210,
-        "column": 39,
-        "index": 5033
-      },
-      "end": {
-        "line": 213,
-        "column": 3,
-        "index": 5167
-      }
-    },
-    "filepath": "src/components/suggest/suggest.tsx"
-  },
-  {
-    "token": "euiSuggest.stateUnsavedTooltip",
-    "defString": "Changes have not been saved.",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 210,
-        "column": 39,
-        "index": 5033
-      },
-      "end": {
-        "line": 213,
-        "column": 3,
-        "index": 5167
-      }
-    },
-    "filepath": "src/components/suggest/suggest.tsx"
-  },
-  {
-    "token": "euiSuggest.stateLoading",
-    "defString": "State: loading.",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 236,
-        "column": 67,
-        "index": 5883
-      },
-      "end": {
-        "line": 244,
-        "column": 3,
-        "index": 6124
-      }
-    },
-    "filepath": "src/components/suggest/suggest.tsx"
-  },
-  {
-    "token": "euiSuggest.stateSaved",
-    "defString": "State: saved.",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 236,
-        "column": 67,
-        "index": 5883
-      },
-      "end": {
-        "line": 244,
-        "column": 3,
-        "index": 6124
-      }
-    },
-    "filepath": "src/components/suggest/suggest.tsx"
-  },
-  {
-    "token": "euiSuggest.stateUnsaved",
-    "defString": "State: unsaved.",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 236,
-        "column": 67,
-        "index": 5883
-      },
-      "end": {
-        "line": 244,
-        "column": 3,
-        "index": 6124
-      }
-    },
-    "filepath": "src/components/suggest/suggest.tsx"
-  },
-  {
-    "token": "euiSuggest.stateUnchanged",
-    "defString": "State: unchanged.",
-    "highlighting": "string",
-    "loc": {
-      "start": {
-        "line": 236,
-        "column": 67,
-        "index": 5883
-      },
-      "end": {
-        "line": 244,
-        "column": 3,
-        "index": 6124
-      }
-    },
-    "filepath": "src/components/suggest/suggest.tsx"
-  },
   {
     "token": "euiTableSortMobile.sorting",
     "defString": "Sorting",
diff --git a/i18ntokens_changelog.json b/i18ntokens_changelog.json
index 5ce5286fb2c..3c34a0048f0 100644
--- a/i18ntokens_changelog.json
+++ b/i18ntokens_changelog.json
@@ -1,4 +1,61 @@
 [
+  {
+    "version": "89.0.0",
+    "changes": [
+      {
+        "token": "euiColorStopThumb.buttonAriaLabel",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiColorStopThumb.buttonTitle",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiColorStopThumb.screenReaderAnnouncement",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiColorStopThumb.stopLabel",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiColorStopThumb.stopErrorMessage",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiColorStopThumb.removeLabel",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiColorStops.screenReaderAnnouncement",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiSuggest.stateSavedTooltip",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiSuggest.stateUnsavedTooltip",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiSuggest.stateLoading",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiSuggest.stateSaved",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiSuggest.stateUnsaved",
+        "changeType": "deleted"
+      },
+      {
+        "token": "euiSuggest.stateUnchanged",
+        "changeType": "deleted"
+      }
+    ]
+  },
   {
     "version": "88.5.0",
     "changes": [
diff --git a/package.json b/package.json
index ca6ad3ae8bc..2ff09dcd9b1 100644
--- a/package.json
+++ b/package.json
@@ -1,12 +1,12 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "88.5.3",
+  "version": "89.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",
   "types": "eui.d.ts",
-  "docker_image": "18.17.1",
+  "docker_image": "18.18.1",
   "engines": {
     "node": "16.x || 18.x || >=20.0"
   },
@@ -32,17 +32,14 @@
     "test": "yarn lint && yarn test-unit",
     "test-ci": "yarn test && yarn test-cypress",
     "test-unit": "node ./scripts/test-unit",
-    "test-a11y": "node ./scripts/a11y-testing",
     "test-staged": "yarn lint && node scripts/test-staged.js",
     "test-cypress": "node ./scripts/test-cypress",
     "test-cypress-dev": "yarn test-cypress --dev",
     "test-cypress-a11y": "yarn test-cypress --a11y",
     "combine-test-coverage": "sh ./scripts/combine-coverage.sh",
-    "start-test-server": "BABEL_MODULES=false NODE_ENV=puppeteer NODE_OPTIONS=--max-old-space-size=4096 webpack-dev-server --config src-docs/webpack.config.js --port 9999",
     "yo-component": "yo ./generator-eui/app/component.js",
     "update-token-changelog": "node ./scripts/update-token-changelog.js",
     "update-changelog-manual": "node -e \"require('./scripts/update-changelog').manualChangelog('${npm_config_release}')\"",
-    "start-test-server-and-a11y-test": "cross-env WAIT_ON_TIMEOUT=600000 start-server-and-test start-test-server http-get://localhost:9999 test-a11y",
     "yo-doc": "yo ./generator-eui/app/documentation.js",
     "yo-changelog": "yo ./generator-eui/changelog/index.js",
     "release": "node ./scripts/release.js",
@@ -99,7 +96,6 @@
     "vfile": "^4.2.0"
   },
   "devDependencies": {
-    "@axe-core/puppeteer": "^4.4.2",
     "@babel/cli": "^7.21.5",
     "@babel/core": "^7.21.8",
     "@babel/plugin-proposal-class-properties": "^7.18.6",
@@ -145,11 +141,11 @@
     "@types/classnames": "^2.3.1",
     "@types/enzyme": "^3.10.5",
     "@types/jest": "^24.0.6",
-    "@types/node": "^10.17.5",
     "@types/react": "^18.2.14",
     "@types/react-dom": "^18.2.6",
     "@types/react-is": "^17.0.3",
     "@types/react-router-dom": "^5.3.3",
+    "@types/stylis": "^4.2.1",
     "@types/testing-library__jest-dom": "^5.14.3",
     "@types/url-parse": "^1.4.8",
     "@types/uuid": "^8.3.0",
@@ -176,7 +172,7 @@
     "cross-env": "^7.0.2",
     "css-loader": "^6.7.1",
     "cssnano": "^4.1.10",
-    "cypress": "^12.17.2",
+    "cypress": "^13.3.1",
     "cypress-axe": "^1.0.0",
     "cypress-plugin-tab": "^1.0.5",
     "cypress-real-events": "^1.7.0",
@@ -221,7 +217,6 @@
     "prettier": "^2.8.8",
     "process": "^0.11.10",
     "prop-types": "^15.6.0",
-    "puppeteer": "^5.5.0",
     "raw-loader": "^4.0.1",
     "react": "^18.2.0",
     "react-16": "npm:react@^16.14.0",
diff --git a/scripts/a11y-testing.js b/scripts/a11y-testing.js
deleted file mode 100644
index b24125830d4..00000000000
--- a/scripts/a11y-testing.js
+++ /dev/null
@@ -1,106 +0,0 @@
-const chalk = require('chalk');
-const puppeteer = require('puppeteer');
-const { AxePuppeteer } = require('@axe-core/puppeteer');
-
-const docsPages = async (root, page) => {
-  const pagesToSkip = [
-    `${root}#/display/aspect-ratio`, // Has issues with the embedded audio player
-    `${root}#/layout/accordion`, // Has an issue with ARIA attributes
-    `${root}#/templates/page-template` // Has multiple `main` elements that we don't want to remove for bad copy/paste code
-  ];
-
-  return [
-    root,
-    ...(await page.$$eval('nav a', (anchors) => anchors.map((a) => a.href))),
-  ].filter((link) => !pagesToSkip.includes(link));
-};
-
-const printResult = (violations) => {
-  const violationData = violations.map(
-    ({ id, impact, description, nodes }) => ({
-      id,
-      impact,
-      description,
-      nodes: nodes.length
-    }));
-  console.table(violationData);
-}
-
-(async () => {
-  let totalViolationsCount = 0;
-  let root = 'http://localhost:9999/';
-  let browser;
-  let page;
-
-  try {
-    browser = await puppeteer.launch({ args: ['--no-sandbox'] });
-    page = await browser.newPage();
-
-    await page.setBypassCSP(true);
-  } catch (e) {
-    console.log(chalk.red('Failed to setup puppeteer'));
-    console.log(e);
-    process.exit(1);
-  }
-
-  try {
-    await page.goto(root);
-  } catch (e) {
-    root = 'http://localhost:8030/';
-    try {
-      await page.goto(root);
-    } catch (e) {
-      console.log(
-        chalk.red(
-          'No local server found. Expecting localhost:9999 or localhost:8030 to resolve.'
-        )
-      );
-      process.exit(1);
-    }
-  }
-  const links = await docsPages(root, page);
-
-  for (const link of links) {
-    await page.goto(link);
-
-    const { violations } = await new AxePuppeteer(page)
-      .options({
-        runOnly: {
-          type: 'tag',
-          values: ['section508', 'wcag2a', 'wcag2aa', 'wcag21a', 'wcag21aa']
-        },
-        rules: {
-          'color-contrast': { enabled: false },
-          'scrollable-region-focusable': { enabled: false },
-          'frame-title': { enabled: false }, // axe reports 18 page violations, but no <iframe> or <frame> on pages
-        },
-      })
-      .analyze();
-
-    if (violations.length > 0) {
-      totalViolationsCount += violations.length;
-
-      const pageName = link.length > 24 ? link.substr(2) : 'the home page';
-      console.log(chalk.red(`Errors on ${pageName}`));
-      printResult(violations);
-    }
-  }
-
-  await page.close();
-  await browser.close();
-
-  if (totalViolationsCount > 0) {
-    const errorsCount = chalk.red(
-      `${totalViolationsCount} accessibility errors`
-    );
-
-    console.log(`${errorsCount}
-
-Install axe for Chrome or Firefox to debug:
-Chrome: https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd
-Firefox: https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/`);
-    process.exit(1);
-  } else {
-    console.log(chalk.green('axe found no accessibility errors!'));
-  }
-})().catch((e) => console.error(e));
diff --git a/scripts/deploy/build_docs b/scripts/deploy/build_docs
index 54ce75954ef..c756929ce59 100755
--- a/scripts/deploy/build_docs
+++ b/scripts/deploy/build_docs
@@ -2,7 +2,7 @@
 
 set -e
 
-NODE_IMG="docker.elastic.co/eui/ci:5.3"
+NODE_IMG="docker.elastic.co/eui/ci:5.5"
 
 # Compile using node image
 echo "Building docs using ${NODE_IMG} Docker image"
diff --git a/scripts/docker-ci/Dockerfile b/scripts/docker-ci/Dockerfile
index 3ea11056526..341cd47dfa4 100644
--- a/scripts/docker-ci/Dockerfile
+++ b/scripts/docker-ci/Dockerfile
@@ -2,7 +2,7 @@
 # https://github.com/zenato/docker-puppeteer/blob/master/Dockerfile
 
 # >=12.0 required (for cypress). v18 is LTS.
-FROM --platform=linux/amd64 node:18.17.1-slim
+FROM --platform=linux/amd64 node:18.18.1-slim
 
 SHELL ["/bin/bash", "-o", "pipefail", "-c"]
 
@@ -15,9 +15,7 @@ RUN apt-get update \
 
 ENV APT_KEY_DONT_WARN_ON_DANGEROUS_USAGE=1
 
-# Install latest chrome package.
-# Note: this installs the necessary libs to make the bundled version of Chromium that Pupppeteer
-# installs, work.
+# Install latest chrome package and update libs
 RUN apt-get update \
     && apt-get install -y wget xvfb ca-certificates gnupg \
     --no-install-recommends \
@@ -31,24 +29,16 @@ RUN apt-get update \
     && rm -rf /var/lib/apt/lists/* \
     && rm -rf /src/*.deb
 
-# Uncomment to skip the chromium download when installing puppeteer. If you do,
-# you'll need to launch puppeteer with:
-# browser.launch({executablePath: 'google-chrome-unstable'})
-# ENV PUPPETEER_SKIP_CHROMIUM_DOWNLOAD true
-
-# Install puppeteer & cypress so they are available in the container.
-RUN yarn add puppeteer
-RUN yarn global add cypress
-
-# Add puppeteer user (pptruser).
-RUN groupadd -r pptruser && useradd -r -g pptruser -G audio,video pptruser \
-    && mkdir -p /home/pptruser/Downloads \
+# Add node user to audio and video groups to enable Cypress video
+# See https://wiki.debian.org/SystemGroups
+# Add directory for Cypress to write screenshots and videos
+RUN usermod -a -G audio,video node \
     && mkdir -p /cypress/screenshots \
-    && chown -R pptruser:pptruser /home/pptruser \
-    && chown -R pptruser:pptruser /node_modules \
-    && chown -R pptruser:pptruser /cypress
+    && mkdir -p /cypress/videos \
+    && chown -R node:node /cypress
 
-# Run user as non privileged.
-USER pptruser
+# Run as non-privileged node user for improved security
+# See https://github.com/nodejs/docker-node/blob/main/docs/BestPractices.md#non-root-user
+USER node
 
 CMD ["google-chrome-stable"]
diff --git a/scripts/jest/config.js b/scripts/jest/config.js
index 3174d93b6cb..84006d237aa 100644
--- a/scripts/jest/config.js
+++ b/scripts/jest/config.js
@@ -19,6 +19,7 @@ const config = {
     '<rootDir>/scripts/babel',
     '<rootDir>/scripts/tests',
     '<rootDir>/scripts/eslint-plugin',
+    '<rootDir>/.storybook',
   ],
   collectCoverageFrom: [
     'src/{components,services,global_styling}/**/*.{ts,tsx,js,jsx}',
diff --git a/scripts/test-a11y-docker.js b/scripts/test-a11y-docker.js
index eb802783cbe..64e4102644d 100644
--- a/scripts/test-a11y-docker.js
+++ b/scripts/test-a11y-docker.js
@@ -1,6 +1,6 @@
 const { execSync } = require('child_process');
 
-execSync('docker pull docker.elastic.co/eui/ci:5.3', {
+execSync('docker pull docker.elastic.co/eui/ci:5.5', {
   stdio: 'inherit',
 });
 /* eslint-disable-next-line no-multi-str */
@@ -9,7 +9,7 @@ execSync(
   -i --rm --cap-add=SYS_ADMIN --volume=$(pwd):/app --workdir=/app \
   -e GIT_COMMITTER_NAME=test -e GIT_COMMITTER_EMAIL=test -e HOME=/tmp \
   --user=$(id -u):$(id -g) \
-  docker.elastic.co/eui/ci:5.3 \
+  docker.elastic.co/eui/ci:5.5 \
   bash -c \'npm config set spin false \
     && /opt/yarn*/bin/yarn \
     && yarn cypress install \
diff --git a/scripts/test-docker.js b/scripts/test-docker.js
index 6236ae01be5..1ad2689eb0d 100644
--- a/scripts/test-docker.js
+++ b/scripts/test-docker.js
@@ -1,6 +1,6 @@
 const { execSync } = require('child_process');
 
-execSync('docker pull docker.elastic.co/eui/ci:5.3', {
+execSync('docker pull docker.elastic.co/eui/ci:5.5', {
   stdio: 'inherit',
 });
 /* eslint-disable-next-line no-multi-str */
@@ -9,7 +9,7 @@ execSync(
   -i --rm --cap-add=SYS_ADMIN --volume=$(pwd):/app --workdir=/app \
   -e GIT_COMMITTER_NAME=test -e GIT_COMMITTER_EMAIL=test -e HOME=/tmp \
   --user=$(id -u):$(id -g) \
-  docker.elastic.co/eui/ci:5.3 \
+  docker.elastic.co/eui/ci:5.5 \
   bash -c \'/opt/yarn*/bin/yarn \
     && yarn cypress install \
     && NODE_OPTIONS="--max-old-space-size=2048" npm run test-ci \
diff --git a/src-docs/src/components/codesandbox/link.js b/src-docs/src/components/codesandbox/link.js
index ef9d3297ea2..214a8aae8de 100644
--- a/src-docs/src/components/codesandbox/link.js
+++ b/src-docs/src/components/codesandbox/link.js
@@ -169,12 +169,13 @@ import '@elastic/charts/dist/theme_only_${colorMode}.css';`
 import React from 'react';
 import { createRoot } from 'react-dom/client';
 import createCache from '@emotion/cache';
-import { EuiProvider } from '@elastic/eui';
+import { EuiProvider, euiStylisPrefixer } from '@elastic/eui';
 
 import { Demo } from './demo';
 
 const cache = createCache({
   key: 'codesandbox',
+  stylisPlugins: [euiStylisPrefixer],
   container: document.querySelector('meta[name="emotion-styles"]'),
 });
 cache.compat = true;
diff --git a/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx b/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx
index 78c9fce25ed..576de96f5dd 100644
--- a/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx
+++ b/src-docs/src/components/guide_tabbed_page/guide_tabbed_page.tsx
@@ -20,7 +20,10 @@ import {
 } from '../../../../src/components';
 
 import { LanguageSelector, ThemeContext } from '../with_theme';
-import { GuideSection } from '../guide_section/guide_section';
+import {
+  GuideSection,
+  GuideSectionProps,
+} from '../guide_section/guide_section';
 
 export type GuideTabbedPageProps = PropsWithChildren &
   CommonProps & {
@@ -126,11 +129,20 @@ export const GuideTabbedPage: FunctionComponent<GuideTabbedPageProps> = ({
           />
         );
       } else {
-        const PageComponent = page.page;
+        let rendered: ReactNode;
+
+        if (page.page) {
+          const PageComponent = page.page;
+          rendered = <PageComponent showSass={showSass} />;
+        } else {
+          rendered = page.sections.map((sectionProps: GuideSectionProps) => (
+            <GuideSection {...sectionProps} />
+          ));
+        }
 
         return (
           <Route key={pathname} path={`${match.path}/${id}`}>
-            <PageComponent showSass={showSass} />
+            {rendered}
           </Route>
         );
       }
diff --git a/src-docs/src/routes.js b/src-docs/src/routes.js
index 6fdae119ce1..7f8e6d7f38f 100644
--- a/src-docs/src/routes.js
+++ b/src-docs/src/routes.js
@@ -215,8 +215,6 @@ import { StatExample } from './views/stat/stat_example';
 
 import { StepsExample } from './views/steps/steps_example';
 
-import { SuggestExample } from './views/suggest/suggest_example';
-
 import { SuperDatePickerExample } from './views/super_date_picker/super_date_picker_example';
 
 import { TableExample } from './views/tables/tables_example';
@@ -609,7 +607,6 @@ const navigation = [
       RangeControlExample,
       SearchBarExample,
       SelectableExample,
-      SuggestExample,
       SuperSelectExample,
     ].map((example) => createExample(example)),
   },
@@ -650,31 +647,33 @@ const navigation = [
   {
     name: 'Utilities',
     items: [
-      AccessibilityExample,
-      AutoSizerExample,
-      BeaconExample,
-      ColorPaletteExample,
-      CopyExample,
-      UtilityClassesExample,
-      DelayRenderExample,
-      ErrorBoundaryExample,
-      FocusTrapExample,
-      HighlightAndMarkExample,
-      HtmlIdGeneratorExample,
-      InnerTextExample,
-      I18nExample,
-      MutationObserverExample,
-      OutsideClickDetectorExample,
-      OverlayMaskExample,
-      PortalExample,
-      PrettyDurationExample,
-      ProviderExample,
-      ResizeObserverExample,
-      ScrollExample,
-      TextDiffExample,
-      TextTruncateExample,
-      WindowEventExample,
-    ].map((example) => createExample(example)),
+      ...[
+        AccessibilityExample,
+        AutoSizerExample,
+        BeaconExample,
+        ColorPaletteExample,
+        CopyExample,
+        UtilityClassesExample,
+        DelayRenderExample,
+        ErrorBoundaryExample,
+        FocusTrapExample,
+        HighlightAndMarkExample,
+        HtmlIdGeneratorExample,
+        InnerTextExample,
+        I18nExample,
+        MutationObserverExample,
+        OutsideClickDetectorExample,
+        OverlayMaskExample,
+        PortalExample,
+        PrettyDurationExample,
+        ProviderExample,
+        ResizeObserverExample,
+        ScrollExample,
+        TextDiffExample,
+      ].map((example) => createExample(example)),
+      createTabbedPage(TextTruncateExample),
+      createExample(WindowEventExample),
+    ],
   },
   {
     name: 'Package',
diff --git a/src-docs/src/views/_index.scss b/src-docs/src/views/_index.scss
index 1648b306b84..0fd9e4dbd8b 100644
--- a/src-docs/src/views/_index.scss
+++ b/src-docs/src/views/_index.scss
@@ -11,7 +11,6 @@ $guideDemoHighlightColor: transparentize($euiColorPrimary, .9);
 @import './page_template/page';
 @import './notification_event/notification_event';
 @import './spacer/spacer';
-@import './suggest/index';
 @import './text/text_scaling';
 @import './tree_view/tree_view';
 
diff --git a/src-docs/src/views/app_context.js b/src-docs/src/views/app_context.js
index 94495219134..1e38535ec8b 100644
--- a/src-docs/src/views/app_context.js
+++ b/src-docs/src/views/app_context.js
@@ -8,6 +8,7 @@ import { translateUsingPseudoLocale } from '../services';
 import { getLocale } from '../store';
 
 import { EuiContext, EuiProvider } from '../../../src/components';
+import { euiStylisPrefixer } from '../../../src/services';
 import { EUI_THEMES } from '../../../src/themes';
 
 import favicon16Prod from '../images/favicon/prod/favicon-16x16.png';
@@ -19,11 +20,13 @@ import favicon96Dev from '../images/favicon/dev/favicon-96x96.png';
 
 const generalEmotionCache = createCache({
   key: 'css',
+  stylisPlugins: [euiStylisPrefixer],
   container: document.querySelector('meta[name="emotion-styles"]'),
 });
 generalEmotionCache.compat = true;
 const utilityCache = createCache({
   key: 'util',
+  stylisPlugins: [euiStylisPrefixer],
   container: document.querySelector('meta[name="emotion-styles-utility"]'),
 });
 
diff --git a/src-docs/src/views/color_picker/color_picker_example.js b/src-docs/src/views/color_picker/color_picker_example.js
index 2a997acec0c..b349fb8a644 100644
--- a/src-docs/src/views/color_picker/color_picker_example.js
+++ b/src-docs/src/views/color_picker/color_picker_example.js
@@ -9,8 +9,6 @@ import {
   EuiColorPaletteDisplay,
   EuiColorPalettePicker,
   EuiText,
-  EuiCallOut,
-  EuiLink,
 } from '../../../../src/components';
 import {
   EuiColorPalettePickerPaletteTextProps,
@@ -327,32 +325,6 @@ export const ColorPickerExample = {
       snippet: colorPaletteDisplaySnippet,
       demo: <ColorPaletteDisplay />,
     },
-    {
-      title: 'Color stops',
-      isDeprecated: true,
-      text: (
-        <EuiCallOut
-          color="danger"
-          iconType="warning"
-          title="EuiColorStops has been scheduled for deprecation"
-        >
-          <p>
-            <strong>EuiColorStops</strong> is being deprecated due to low usage
-            and high maintenance requirements.
-          </p>
-          <p>
-            If necessary, we recommend{' '}
-            <EuiLink
-              href="https://github.com/elastic/eui/tree/main/src/components/color_picker/color_stops"
-              target="_blank"
-            >
-              copying the component to your application
-            </EuiLink>
-            . The component will be permanently removed in October 2023.
-          </p>
-        </EuiCallOut>
-      ),
-    },
     {
       title: 'Format selection',
       source: [
diff --git a/src-docs/src/views/description_list/playground.js b/src-docs/src/views/description_list/playground.js
index 521dbac181d..13bf9645dec 100644
--- a/src-docs/src/views/description_list/playground.js
+++ b/src-docs/src/views/description_list/playground.js
@@ -28,10 +28,10 @@ export const descriptionListConfig = () => {
 
   return {
     config: {
-      componentName: 'EuiSuggest',
+      componentName: 'EuiDescriptionList',
       props: propsToUse,
       scope: {
-        EuiSuggest: EuiDescriptionList,
+        EuiDescriptionList: EuiDescriptionList,
       },
       imports: {
         '@elastic/eui': {
diff --git a/src-docs/src/views/elastic_charts/accessibility_bullet.js b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
similarity index 91%
rename from src-docs/src/views/elastic_charts/accessibility_bullet.js
rename to src-docs/src/views/elastic_charts/accessibility_bullet.tsx
index ea958ae4318..01e386a7b7c 100644
--- a/src-docs/src/views/elastic_charts/accessibility_bullet.js
+++ b/src-docs/src/views/elastic_charts/accessibility_bullet.tsx
@@ -34,14 +34,14 @@ export default () => {
     spectrum = colorPalette([spectrum[4], euiPaletteGray(5)[4]], 5).reverse();
   }
 
-  const colorMap = {
-    '0': spectrum[0],
-    '100': spectrum[1],
-    '125': spectrum[2],
-    '150': spectrum[3],
-    '250': spectrum[4],
+  const colorMap: Record<number, string> = {
+    0: spectrum[0],
+    100: spectrum[1],
+    125: spectrum[2],
+    150: spectrum[3],
+    250: spectrum[4],
   };
-  const bandFillColor = (x) => colorMap[x];
+  const bandFillColor = (x: number) => colorMap[x];
   return (
     <>
       <EuiTitle size="xs" className="eui-textCenter">
diff --git a/src-docs/src/views/elastic_charts/accessibility_example.js b/src-docs/src/views/elastic_charts/accessibility_example.js
index 3cdfe7be46b..4ad80adb94a 100644
--- a/src-docs/src/views/elastic_charts/accessibility_example.js
+++ b/src-docs/src/views/elastic_charts/accessibility_example.js
@@ -209,7 +209,7 @@ export const ElasticChartsAccessibilityExample = {
 </Chart>`,
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: SunburstSource,
         },
       ],
@@ -283,7 +283,7 @@ export const ElasticChartsAccessibilityExample = {
       demo: <TextureMultiSeriesChart />,
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: TextureMultiSeriesChartSource,
         },
       ],
@@ -327,7 +327,7 @@ export const ElasticChartsAccessibilityExample = {
       demo: <AccessibilityBullet />,
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: BulletChartSource,
         },
       ],
diff --git a/src-docs/src/views/elastic_charts/accessibility_sunburst.js b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
similarity index 86%
rename from src-docs/src/views/elastic_charts/accessibility_sunburst.js
rename to src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
index 3f412e6d0f7..0f395cb97fc 100644
--- a/src-docs/src/views/elastic_charts/accessibility_sunburst.js
+++ b/src-docs/src/views/elastic_charts/accessibility_sunburst.tsx
@@ -19,9 +19,10 @@ export default () => {
   const euiChartTheme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
-  const { vizColors } = euiChartTheme.theme.colors;
+  const { vizColors } = euiChartTheme.theme.colors!;
 
-  const data = [
+  type Data = { fruit: string; count: number };
+  const data: Data[] = [
     { fruit: 'Apple', count: 100 },
     { fruit: 'Banana', count: 50 },
     { fruit: 'Tomato', count: 25 },
@@ -54,15 +55,16 @@ export default () => {
           ariaTableCaption="For the chart representation, after Clementine (22) individual results are not labelled as the segments become too small"
         />
         <Partition
+          id="partitionId"
           data={data}
           layout={PartitionLayout.sunburst}
           valueAccessor={({ count }) => count}
           layers={[
             {
-              groupByRollup: ({ fruit }) => fruit,
+              groupByRollup: ({ fruit }: Data) => fruit,
               shape: {
-                fillColor: ({ sortIndex }) =>
-                  vizColors[sortIndex % vizColors.length],
+                fillColor: (_, sortIndex) =>
+                  vizColors![sortIndex % vizColors!.length],
               },
             },
           ]}
diff --git a/src-docs/src/views/elastic_charts/category_chart.js b/src-docs/src/views/elastic_charts/category_chart.tsx
similarity index 86%
rename from src-docs/src/views/elastic_charts/category_chart.js
rename to src-docs/src/views/elastic_charts/category_chart.tsx
index b7e8dadb94e..2ba9a70b991 100644
--- a/src-docs/src/views/elastic_charts/category_chart.js
+++ b/src-docs/src/views/elastic_charts/category_chart.tsx
@@ -27,6 +27,7 @@ import {
   ChartTypeCard,
   MultiChartCard,
   CHART_COMPONENTS,
+  type ChartType,
   ChartCard,
 } from './shared';
 
@@ -38,33 +39,8 @@ export default () => {
   const [rotated, setRotated] = useState(true);
   const [ordered, setOrdered] = useState(true);
   const [formatted, setFormatted] = useState(false);
-  const [chartType, setChartType] = useState('BarSeries');
+  const [chartType, setChartType] = useState<ChartType>('BarSeries');
   const [valueLabels, setValueLabels] = useState(false);
-  const onMultiChange = (multiObject) => {
-    const { multi, stacked } = multiObject;
-    setMulti(multi);
-    setStacked(stacked);
-  };
-
-  const onRotatedChange = (e) => {
-    setRotated(e.target.checked);
-  };
-
-  const onOrderedChange = (e) => {
-    setOrdered(e.target.checked);
-  };
-
-  const onFormatChange = (e) => {
-    setFormatted(e.target.checked);
-  };
-
-  const onChartTypeChange = (chartType) => {
-    setChartType(chartType);
-  };
-
-  const onValueLabelsChange = (e) => {
-    setValueLabels(e.target.checked);
-  };
 
   const isDarkTheme = colorMode === 'DARK';
   const theme = isDarkTheme
@@ -83,7 +59,7 @@ export default () => {
     ...theme,
     barSeriesStyle: {
       displayValue: {
-        ...theme.barSeriesStyle.displayValue,
+        ...theme.barSeriesStyle?.displayValue,
         offsetX: rotated ? 4 : 0,
         offsetY: rotated ? 0 : -4,
         ...(multi && stacked
@@ -91,15 +67,15 @@ export default () => {
               alignment: {
                 vertical: 'middle',
                 horizontal: 'center',
-              },
+              } as const,
             }
           : {
               alignment: rotated
                 ? {
-                    vertical: 'middle',
+                    vertical: 'middle' as const,
                   }
                 : {
-                    horizontal: 'center',
+                    horizontal: 'center' as const,
                   },
             }),
       },
@@ -169,7 +145,7 @@ const customTheme = {
   <Axis
     id="bottom-axis"
     position={${rotated ? '"left"' : '"bottom"'}}
-    showGridLines={false}
+    gridLine={{ visible: false }}
   />
   <Axis
     id="left-axis"
@@ -178,7 +154,8 @@ const customTheme = {
   />
 </Chart>`;
 
-  const removeEmptyLines = (string) => string.replace(/(^[ \t]*\n)/gm, '');
+  const removeEmptyLines = (string: string) =>
+    string.replace(/(^[ \t]*\n)/gm, '');
 
   const textToCopy = valueLabels
     ? `${chartVariablesForValueLabels}
@@ -216,12 +193,12 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
           yAccessors={['count']}
           splitSeriesAccessors={multi ? ['issueType'] : undefined}
           stackAccessors={stacked ? ['issueType'] : undefined}
-          displayValueSettings={valueLabels && displayValueSettings}
+          displayValueSettings={valueLabels ? displayValueSettings : undefined}
         />
         <Axis
           id="bottom-axis"
           position={rotated ? 'left' : 'bottom'}
-          showGridLines={false}
+          gridLine={{ visible: false }}
         />
         <Axis
           id="left-axis"
@@ -250,13 +227,13 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
             <EuiSwitch
               label="Order by count descending"
               checked={ordered}
-              onChange={onOrderedChange}
+              onChange={(e) => setOrdered(e.target.checked)}
             />
             <EuiSpacer size="s" />
             <EuiSwitch
               label="Rotate 90deg"
               checked={rotated}
-              onChange={onRotatedChange}
+              onChange={(e) => setRotated(e.target.checked)}
             />
           </ChartCard>
         </EuiFlexItem>
@@ -271,21 +248,26 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
             <EuiSwitch
               label="Simulate thousands formatting"
               checked={formatted}
-              onChange={onFormatChange}
+              onChange={(e) => setFormatted(e.target.checked)}
             />
           </ChartCard>
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <ChartTypeCard
+          <ChartTypeCard<{ mixed: false }>
             type="Although we recommend only bar charts, categorical"
-            onChange={onChartTypeChange}
+            onChange={(chartType) => setChartType(chartType)}
             disabled
           />
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <MultiChartCard onChange={onMultiChange} />
+          <MultiChartCard
+            onChange={({ multi, stacked }) => {
+              setMulti(multi);
+              setStacked(stacked);
+            }}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>
@@ -297,7 +279,7 @@ ${removeEmptyLines(chartConfigurationToCopy)}`
             <EuiSwitch
               label="Show value labels"
               checked={valueLabels}
-              onChange={onValueLabelsChange}
+              onChange={(e) => setValueLabels(e.target.checked)}
             />
           </ChartCard>
         </EuiFlexItem>
diff --git a/src-docs/src/views/elastic_charts/data.js b/src-docs/src/views/elastic_charts/data.tsx
similarity index 100%
rename from src-docs/src/views/elastic_charts/data.js
rename to src-docs/src/views/elastic_charts/data.tsx
diff --git a/src-docs/src/views/elastic_charts/goal.js b/src-docs/src/views/elastic_charts/goal.tsx
similarity index 85%
rename from src-docs/src/views/elastic_charts/goal.js
rename to src-docs/src/views/elastic_charts/goal.tsx
index b834d2308e4..5edcac5b28f 100644
--- a/src-docs/src/views/elastic_charts/goal.js
+++ b/src-docs/src/views/elastic_charts/goal.tsx
@@ -1,13 +1,13 @@
-import React, { useContext } from 'react';
+import React from 'react';
 import { Chart, Settings, Goal } from '@elastic/charts';
 import { EuiSpacer, EuiTitle, EuiCodeBlock } from '../../../../src/components';
 import {
   htmlIdGenerator,
+  useEuiTheme,
   useIsWithinBreakpoints,
   euiPalettePositive,
 } from '../../../../src/services';
 import { EuiFlexGrid, EuiFlexItem } from '../../../../src/components/flex';
-import { ThemeContext } from '../../components';
 
 import {
   EUI_CHARTS_THEME_DARK,
@@ -15,21 +15,20 @@ import {
 } from '../../../../src/themes/charts/themes';
 
 export const GoalChart = () => {
+  const { colorMode } = useEuiTheme();
   const id = htmlIdGenerator('goal')();
-  const themeContext = useContext(ThemeContext);
-  const isDarkTheme = themeContext.theme.includes('dark');
+
+  const isDarkTheme = colorMode === 'DARK';
   const euiChartTheme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
 
-  const euiGoalConfig = euiChartTheme.euiGoalConfig;
-
   const isDesktop = useIsWithinBreakpoints(['l', 'xl']);
   const bandLabels = ['', 'freezing', 'cold', 'warm', 'hot'];
   const bands = [-10, 0, 15, 25, 40];
 
   const spectrum = euiPalettePositive(5);
-  const opacityMapHex = {
+  const opacityMapHex: Record<number, string> = {
     '-10': spectrum[0],
     '0': spectrum[1],
     '15': spectrum[2],
@@ -40,9 +39,9 @@ export const GoalChart = () => {
   const colorMapTheme = bands.reduce((acc, band) => {
     acc[band] = opacityMapHex[band];
     return acc;
-  }, {});
+  }, {} as Record<number, string>);
 
-  const bandFillColor = (x) => colorMapTheme[x];
+  const bandFillColor = (x: number) => colorMapTheme[x];
   return (
     <EuiFlexGrid direction={isDesktop ? 'row' : 'column'} columns={2}>
       <EuiFlexItem>
@@ -55,9 +54,11 @@ export const GoalChart = () => {
             ariaLabelledBy={id}
             ariaDescription="This goal chart has a target of 22."
             ariaUseDefaultSummary={false}
-            theme={euiChartTheme}
+            theme={euiChartTheme.theme}
           />
           <Goal
+            id="goalId"
+            subtype="goal"
             base={-10}
             target={22}
             actual={12}
@@ -70,7 +71,8 @@ export const GoalChart = () => {
             labelMinor="Celsius"
             centralMajor="12"
             centralMinor=""
-            config={{ ...euiGoalConfig, angleStart: Math.PI, angleEnd: 0 }}
+            angleStart={Math.PI}
+            angleEnd={0}
             bandLabels={bandLabels}
           />
         </Chart>
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_example.js b/src-docs/src/views/elastic_charts/metric/metric_chart_example.js
index 8e1891d9292..690f391676f 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_example.js
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_example.js
@@ -465,9 +465,11 @@ export const MetricChartExample = {
     {
       title: 'No Data',
       text: (
-        <p>
-          Various situations could lead to an uncertain state. We designed two{' '}
-          <strong>empty states</strong> that should cover most of those cases:
+        <>
+          <p>
+            Various situations could lead to an uncertain state. We designed two{' '}
+            <strong>empty states</strong> that should cover most of those cases:
+          </p>
           <ul>
             <li>
               When an applied filter makes the metric uncomputable (missing
@@ -483,7 +485,7 @@ export const MetricChartExample = {
               component won&apos;t be rendered, and an empty box is rendered.
             </li>
           </ul>
-        </p>
+        </>
       ),
       demo: <NoData />,
     },
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx
index 4508de3f285..e8fb53581fd 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_grid.tsx
@@ -149,7 +149,6 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 800 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[800, 300]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric id="1" data={DATA} />
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx
index 5e1810534fa..d5c6bff2679 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_column.tsx
@@ -22,7 +22,6 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 400]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx
index 0c690b90b8a..4209e1876fb 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_grid_row.tsx
@@ -22,7 +22,6 @@ export default () => {
   const chartBaseTheme = isDarkTheme ? DARK_THEME : LIGHT_THEME;
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 600 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[600, 200]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx
index 1b1fa0ae520..eea02bf9a56 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_no_data.tsx
@@ -32,7 +32,6 @@ export default () => {
         <EuiFlexGroup gutterSize="s" alignItems="center" direction="column">
           <EuiText textAlign="center">No Data</EuiText>
           <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
-            {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
             <Chart size={[200, 200]}>
               <Settings
                 baseTheme={chartBaseTheme}
@@ -64,7 +63,6 @@ export default () => {
         <EuiFlexGroup gutterSize="s" alignItems="center" direction="column">
           <EuiText textAlign="center">Filtered Out</EuiText>
           <EuiPanel paddingSize="none" style={{ overflow: 'hidden' }}>
-            {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
             <Chart size={[200, 200]}>
               <Settings
                 theme={euiChartTheme.theme}
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx
index 0f13121c6b6..15862ec3c2f 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_overview.tsx
@@ -26,7 +26,6 @@ export default () => {
   }));
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 200]}>
         <Settings theme={euiChartTheme.theme} baseTheme={chartBaseTheme} />
         <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx
index 412c4040c4e..cd1df762b94 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_progress_bar.tsx
@@ -33,7 +33,6 @@ export default () => {
           paddingSize="none"
           style={{ overflow: 'hidden', width: '200px' }}
         >
-          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={[200, 200]}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric
@@ -65,7 +64,6 @@ export default () => {
           paddingSize="none"
           style={{ overflow: 'hidden', width: '200px' }}
         >
-          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={[200, 200]}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx
index cd46d472587..4b47c179674 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_resizing.tsx
@@ -41,7 +41,6 @@ export default () => {
           paddingSize="none"
           style={{ overflow: 'hidden', height: '100%', width: '100%' }}
         >
-          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={['100%', '100%']}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx
index 9083061b319..ad973dca3e9 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_single_value.tsx
@@ -74,7 +74,6 @@ export default () => {
     <EuiFlexGroup direction={'column'}>
       <EuiFlexItem grow={0}>
         <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
-          {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
           <Chart size={[200, 200]}>
             <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
             <Metric
diff --git a/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx b/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx
index 2e42a469ea1..00653322f43 100644
--- a/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx
+++ b/src-docs/src/views/elastic_charts/metric/metric_chart_trend.tsx
@@ -28,7 +28,6 @@ export default () => {
 
   return (
     <EuiPanel paddingSize="none" style={{ overflow: 'hidden', width: 200 }}>
-      {/* @ts-ignore @elastic/charts typings are not yet compatible with React 18 */}
       <Chart size={[200, 200]}>
         <Settings baseTheme={chartBaseTheme} theme={euiChartTheme.theme} />
         <Metric
diff --git a/src-docs/src/views/elastic_charts/pie.js b/src-docs/src/views/elastic_charts/pie.tsx
similarity index 65%
rename from src-docs/src/views/elastic_charts/pie.js
rename to src-docs/src/views/elastic_charts/pie.tsx
index 89ab22b2848..aac1e141b04 100644
--- a/src-docs/src/views/elastic_charts/pie.js
+++ b/src-docs/src/views/elastic_charts/pie.tsx
@@ -1,6 +1,12 @@
 import React from 'react';
 
-import { Chart, Partition, Settings, PartitionLayout } from '@elastic/charts';
+import {
+  Chart,
+  Partition,
+  Settings,
+  PartitionLayout,
+  PartialTheme,
+} from '@elastic/charts';
 
 import {
   EUI_CHARTS_THEME_DARK,
@@ -14,6 +20,32 @@ import {
 } from '../../../../src/components';
 import { htmlIdGenerator, useEuiTheme } from '../../../../src/services';
 
+const STATUS_DATA = [
+  {
+    status: 'Open',
+    count: 25,
+  },
+  {
+    status: 'Closed',
+    count: 319,
+  },
+];
+
+const LANGUAGE_DATA = [
+  {
+    language: 'JavaScript',
+    percent: 51.4,
+  },
+  {
+    language: 'TypeScript',
+    percent: 39.6,
+  },
+  {
+    language: 'CSS',
+    percent: 8.7,
+  },
+];
+
 export default () => {
   const { colorMode } = useEuiTheme();
   const htmlId = htmlIdGenerator();
@@ -28,6 +60,10 @@ export default () => {
     ? EUI_CHARTS_THEME_DARK
     : EUI_CHARTS_THEME_LIGHT;
 
+  const themeOverrides: PartialTheme = {
+    partition: { emptySizeRatio: 0.4 },
+  };
+
   return (
     <div>
       <EuiFlexGrid columns={2}>
@@ -37,27 +73,21 @@ export default () => {
           </EuiTitle>
           <EuiSpacer />
           <Chart size={{ height: 200 }}>
-            <Settings theme={euiChartTheme.theme} ariaLabelledBy={exampleOne} />
+            <Settings
+              theme={[themeOverrides, euiChartTheme.theme]}
+              ariaLabelledBy={exampleOne}
+            />
             <Partition
               id="pieByPR"
-              data={[
-                {
-                  status: 'Open',
-                  count: 25,
-                },
-                {
-                  status: 'Closed',
-                  count: 319,
-                },
-              ]}
+              data={STATUS_DATA}
               layout={PartitionLayout.sunburst}
               valueAccessor={(d) => d.count}
               layers={[
                 {
-                  groupByRollup: (d) => d.status,
+                  groupByRollup: (d: (typeof STATUS_DATA)[0]) => d.status,
                   shape: {
-                    fillColor: (d) =>
-                      euiChartTheme.theme.colors.vizColors[d.sortIndex],
+                    fillColor: (_, sortIndex) =>
+                      euiChartTheme.theme.colors!.vizColors![sortIndex],
                   },
                 },
               ]}
@@ -74,33 +104,19 @@ export default () => {
             <Settings theme={euiChartTheme.theme} ariaLabelledBy={exampleTwo} />
             <Partition
               id="donutByLanguage"
-              data={[
-                {
-                  language: 'JavaScript',
-                  percent: 51.4,
-                },
-                {
-                  language: 'TypeScript',
-                  percent: 39.6,
-                },
-                {
-                  language: 'CSS',
-                  percent: 8.7,
-                },
-              ]}
+              data={LANGUAGE_DATA}
               layout={PartitionLayout.sunburst}
               valueAccessor={(d) => Number(d.percent)}
               valueFormatter={() => ''}
               layers={[
                 {
-                  groupByRollup: (d) => d.language,
+                  groupByRollup: (d: (typeof LANGUAGE_DATA)[0]) => d.language,
                   shape: {
-                    fillColor: (d) =>
-                      euiChartTheme.theme.colors.vizColors[d.sortIndex],
+                    fillColor: (_, sortIndex) =>
+                      euiChartTheme.theme.colors!.vizColors![sortIndex],
                   },
                 },
               ]}
-              emptySizeRatio={0.4}
               clockwiseSectors={false}
             />
           </Chart>
diff --git a/src-docs/src/views/elastic_charts/pie_alts.js b/src-docs/src/views/elastic_charts/pie_alts.tsx
similarity index 93%
rename from src-docs/src/views/elastic_charts/pie_alts.js
rename to src-docs/src/views/elastic_charts/pie_alts.tsx
index bfbd3d7bd41..9446eac4e6b 100644
--- a/src-docs/src/views/elastic_charts/pie_alts.js
+++ b/src-docs/src/views/elastic_charts/pie_alts.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { ReactNode, useState } from 'react';
 import groupBy from 'lodash/groupBy';
 import mapValues from 'lodash/mapValues';
 import orderBy from 'lodash/orderBy';
@@ -53,7 +53,7 @@ export default () => {
   );
   if (formatted) {
     color = [
-      euiPaletteForTemperature()[0],
+      euiPaletteForTemperature(0)[0],
       euiPaletteGray(5)[isDarkTheme ? 4 : 0],
     ];
   }
@@ -77,15 +77,15 @@ export default () => {
 
       data = orderBy(DATASET, 'issueType', 'desc');
       const sortedData = sortBy(data, [
-        ({ vizType }) => totals[vizType],
+        ({ vizType }: (typeof DATASET)[0]) => totals[vizType],
       ]).reverse();
       data = sortedData;
     }
   }
 
-  const tickFormat = (tick) => {
+  const tickFormat = (tick: string) => {
     if (formatted) {
-      return `${Number(tick * 100).toFixed(0)}%`;
+      return `${(Number(tick) * 100).toFixed(0)}%`;
     } else if (!grouped && String(tick).length > 1) {
       return String(tick).substring(0, String(tick).length - 3);
     } else {
@@ -95,7 +95,7 @@ export default () => {
 
   let isMisleadingChart = false;
   let isBadChart = false;
-  let description =
+  let description: ReactNode =
     'This chart is a good alternative to the standard multi-tier pie (or sunburst) chart. It clearly represents the actual values while maintaining visual comparison.';
   let title = 'Good alternative';
 
@@ -139,12 +139,12 @@ export default () => {
             <BarSeries
               id="rain"
               name="Rain"
-              data={data}
+              data={data as typeof DAYS_OF_RAIN}
               xAccessor="season"
               yAccessors={['days']}
               splitSeriesAccessors={['precipitation']}
               stackAccessors={stacked ? ['precipitation'] : undefined}
-              stackAsPercentage={formatted}
+              stackMode={formatted ? 'percentage' : undefined}
               color={color}
             />
             <Axis id="bottom-axis" position={rotated ? 'left' : 'bottom'} />
@@ -152,7 +152,7 @@ export default () => {
               id="left-axis"
               position={rotated ? 'bottom' : 'left'}
               tickFormat={tickFormat}
-              showGridLines
+              gridLine={{ visible: true }}
             />
           </Chart>
         </>
@@ -177,12 +177,12 @@ export default () => {
             <BarSeries
               id="issues"
               name="Issues"
-              data={data}
+              data={data as typeof GITHUB_DATASET}
               xAccessor="vizType"
               yAccessors={['count']}
               splitSeriesAccessors={['issueType']}
               stackAccessors={stacked ? ['issueType'] : undefined}
-              stackAsPercentage={formatted}
+              stackMode={formatted ? 'percentage' : undefined}
               color={color}
             />
             <Axis id="bottom-axis" position={rotated ? 'left' : 'bottom'} />
@@ -190,7 +190,7 @@ export default () => {
               id="left-axis"
               position={rotated ? 'bottom' : 'left'}
               tickFormat={tickFormat}
-              showGridLines
+              gridLine={{ visible: true }}
             />
           </Chart>
         </>
@@ -213,7 +213,6 @@ export default () => {
 
         <EuiFlexItem>
           <ChartCard
-            textAlign="left"
             title="Bar chart options"
             description="Compare how the following options change the understanding of the data with that of the sunburst or treemap chart."
           >
@@ -279,7 +278,7 @@ export default () => {
     xAccessor="${usesRainData ? 'season' : 'vizType'}"
     yAccessors={[${usesRainData ? "'days'" : "'count'"}]}
     splitSeriesAccessors={[${usesRainData ? "'precipitation'" : "'issueType'"}]}
-    ${formatted ? 'stackAsPercentage={true}' : ''}
+    ${formatted ? 'stackMode="percentage"' : ''}
     ${
       stacked
         ? `stackAccessors={[${
@@ -299,7 +298,7 @@ export default () => {
   />
   <Axis
     id="left-axis"
-    showGridLines
+    gridLine={{ visible: true }}
     position={${rotated ? "'bottom'" : "'left'"}}
     ${
       formatted
diff --git a/src-docs/src/views/elastic_charts/pie_example.js b/src-docs/src/views/elastic_charts/pie_example.js
index 8b2bc087d92..11229ce620b 100644
--- a/src-docs/src/views/elastic_charts/pie_example.js
+++ b/src-docs/src/views/elastic_charts/pie_example.js
@@ -146,7 +146,7 @@ export const ElasticChartsPieExample = {
       title: 'Pie and donut charts',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: pieSource,
         },
       ],
@@ -217,7 +217,7 @@ const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIG
       {
         groupByRollup: d => d.category,
         shape: {
-          fillColor: d => euiChartTheme.theme.colors.vizColors[d.sortIndex],
+          fillColor: (key, sortIndex) => euiChartTheme.theme.colors.vizColors[sortIndex],
         },
       },
     ]}
@@ -270,7 +270,7 @@ const euiChartTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK : EUI_CHARTS_THEME_LIG
       title: 'Sunbursts and treemaps',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: treemapsSource,
         },
       ],
diff --git a/src-docs/src/views/elastic_charts/pie_slices.js b/src-docs/src/views/elastic_charts/pie_slices.tsx
similarity index 90%
rename from src-docs/src/views/elastic_charts/pie_slices.js
rename to src-docs/src/views/elastic_charts/pie_slices.tsx
index 639cdc00994..b135aea51d0 100644
--- a/src-docs/src/views/elastic_charts/pie_slices.js
+++ b/src-docs/src/views/elastic_charts/pie_slices.tsx
@@ -66,7 +66,10 @@ export default () => {
   const [sliceOrderIdSelected, setSliceOrderIdSelected] = useState(
     sliceOrderRadios[0].id
   );
-  const [sliceOrderConfig, setSliceOrderConfig] = useState({
+  const [sliceOrderConfig, setSliceOrderConfig] = useState<{
+    clockwiseSectors?: boolean;
+    specialFirstInnermostSector?: boolean;
+  }>({
     clockwiseSectors: false,
   });
   const [sliceOrderConfigText, setSliceOrderConfigText] = useState(
@@ -77,20 +80,15 @@ export default () => {
     pieTypeRadios[0].id
   );
 
-  const [numSlices, setNumSlices] = useState('3');
+  const [numSlices, setNumSlices] = useState(3);
 
   const [grouped, setGrouped] = useState(true);
   const [showLegend, setShowLegend] = useState(false);
   const [showValues, setShowValues] = useState(true);
 
-  const onNumChartsChange = (e) => {
-    setNumSlices(e.target.value);
-  };
-
-  const onSliceOrderChange = (optionId) => {
-    const sliceOrderLabel = sliceOrderRadios.find(
-      ({ id }) => id === optionId
-    ).label;
+  const onSliceOrderChange = (optionId: string) => {
+    const sliceOrderLabel = sliceOrderRadios.find(({ id }) => id === optionId)!
+      .label!;
     if (sliceOrderLabel.includes('Counter')) {
       setSliceOrderConfig({ clockwiseSectors: false });
       setSliceOrderConfigText('clockwiseSectors={false}');
@@ -106,10 +104,6 @@ export default () => {
     setSliceOrderIdSelected(optionId);
   };
 
-  const onGroupChange = (e) => {
-    setGrouped(e.target.checked);
-  };
-
   const isBadChart = numSlices > 5 && !grouped;
   const isComplicatedChart = false;
 
@@ -142,7 +136,7 @@ export default () => {
 
   const themeOverrides = {
     partition: {
-      emptySizeRatio: pieTypeIdSelected.includes('Donut') && 0.4,
+      emptySizeRatio: pieTypeIdSelected.includes('Donut') ? 0.4 : undefined,
     },
   };
 
@@ -165,10 +159,10 @@ export default () => {
             valueGetter={showValues ? 'percent' : undefined}
             layers={[
               {
-                groupByRollup: (d) => d.browser,
+                groupByRollup: (d: (typeof BROWSER_DATA_2019)[0]) => d.browser,
                 shape: {
-                  fillColor: (d) =>
-                    euiChartTheme.theme.colors.vizColors[d.sortIndex],
+                  fillColor: (_, sortIndex) =>
+                    euiChartTheme.theme.colors!.vizColors![sortIndex],
                 },
               },
             ]}
@@ -182,14 +176,13 @@ export default () => {
       <EuiFlexGrid columns={3}>
         <EuiFlexItem>
           <ChartCard title="Chart type and labels">
+            <EuiSpacer size="s" />
             <EuiButtonGroup
               color="primary"
               legend="Chart type"
               options={pieTypeRadios}
               idSelected={pieTypeIdSelected}
-              onChange={(id) => {
-                setPieTypeIdSelected(id);
-              }}
+              onChange={(id) => setPieTypeIdSelected(id)}
               buttonSize="compressed"
               isFullWidth
             />
@@ -231,7 +224,7 @@ export default () => {
                 max={10}
                 showTicks
                 value={numSlices}
-                onChange={onNumChartsChange}
+                onChange={(e) => setNumSlices(Number(e.currentTarget.value))}
                 levels={[
                   { min: 1, max: 5.5, color: 'success' },
                   { min: 5.5, max: 10, color: 'danger' },
@@ -244,7 +237,7 @@ export default () => {
               <EuiSwitch
                 label="Group 'Other' slices"
                 checked={numSlices <= 5 ? false : grouped}
-                onChange={onGroupChange}
+                onChange={(e) => setGrouped(e.target.checked)}
                 disabled={numSlices <= 5}
               />
             </EuiFormRow>
@@ -253,7 +246,6 @@ export default () => {
         <EuiFlexItem>
           <ChartCard
             title="Slice order"
-            titleSize="xxs"
             description={
               <>
                 Partition supports the specialized slice order with{' '}
@@ -308,7 +300,7 @@ export default () => {
       {
         groupByRollup: d => d.browser,
         shape: {
-          fillColor: d => euiChartTheme.theme.colors.vizColors[d.sortIndex],
+          fillColor: (key, sortIndex) => euiChartTheme.theme.colors.vizColors[sortIndex],
         },
       },
     ]}
diff --git a/src-docs/src/views/elastic_charts/shared.js b/src-docs/src/views/elastic_charts/shared.tsx
similarity index 58%
rename from src-docs/src/views/elastic_charts/shared.js
rename to src-docs/src/views/elastic_charts/shared.tsx
index 8fd26f31c61..f55223badc7 100644
--- a/src-docs/src/views/elastic_charts/shared.js
+++ b/src-docs/src/views/elastic_charts/shared.tsx
@@ -1,8 +1,13 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
+import React, {
+  FunctionComponent,
+  PropsWithChildren,
+  ReactNode,
+  useState,
+} from 'react';
 import {
   EuiBadge,
   EuiRadioGroup,
+  type EuiRadioGroupOption,
   EuiSpacer,
   EuiSwitch,
   EuiPanel,
@@ -10,18 +15,19 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 import { BarSeries, LineSeries, AreaSeries } from '@elastic/charts';
-import euiPackage from '../../../../package';
+import euiPackage from '../../../../package.json';
 
 const { devDependencies } = euiPackage;
 
 export const chartsVersion =
-  devDependencies['@elastic/charts'].match(/\d+\.\d+\.\d+/)[0];
+  devDependencies['@elastic/charts'].match(/\d+\.\d+\.\d+/)![0];
 
 export const CHART_COMPONENTS = {
   BarSeries: BarSeries,
   LineSeries: LineSeries,
   AreaSeries: AreaSeries,
 };
+export type ChartType = keyof typeof CHART_COMPONENTS;
 
 export const ExternalBadge = () => {
   return (
@@ -40,26 +46,43 @@ export const ExternalBadge = () => {
   );
 };
 
-export const ChartCard = ({ title, description, children }) => {
+export const ChartCard: FunctionComponent<
+  PropsWithChildren & {
+    title: ReactNode;
+    description?: ReactNode;
+  }
+> = ({ title, description, children }) => {
   return (
     <EuiPanel>
       <EuiTitle size="s">
         <span>{title}</span>
       </EuiTitle>
       <EuiSpacer size="s" />
-      <EuiText size="s">
-        <p>{description}</p>
-      </EuiText>
-      <EuiSpacer size="s" />
+      {description && (
+        <>
+          <EuiText size="s">
+            <p>{description}</p>
+          </EuiText>
+          <EuiSpacer size="s" />
+        </>
+      )}
       {children}
     </EuiPanel>
   );
 };
 
-export const ChartTypeCard = (props) => {
+type ChartTypeCardProps<Mixed> = {
+  type: string;
+  mixed?: 'enabled' | 'disabled';
+  onChange: [Mixed] extends [{ mixed: true }]
+    ? (chartType: ChartType | 'Mixed') => void
+    : (chartType: ChartType) => void;
+  disabled?: boolean;
+};
+export const ChartTypeCard = <Mixed,>(props: ChartTypeCardProps<Mixed>) => {
   const idPrefix = 'chartType';
 
-  const toggleButtonsIcons = [
+  const toggleButtonsIcons: EuiRadioGroupOption[] = [
     {
       id: `${idPrefix}0`,
       label: 'BarSeries',
@@ -76,12 +99,11 @@ export const ChartTypeCard = (props) => {
 
   const [toggleIdSelected, setToggleIdSelectd] = useState(`${idPrefix}0`);
 
-  const onChartTypeChange = (optionId) => {
+  const onChartTypeChange = (optionId: string) => {
     setToggleIdSelectd(optionId);
 
-    const chartType = toggleButtonsIcons.find(
-      ({ id }) => id === optionId
-    ).label;
+    const chartType = toggleButtonsIcons.find(({ id }) => id === optionId)!
+      .label as ChartType;
     props.onChange(chartType);
   };
 
@@ -109,58 +131,42 @@ export const ChartTypeCard = (props) => {
   );
 };
 
-ChartTypeCard.propTypes = {
-  onChange: PropTypes.func.isRequired,
-  mixed: PropTypes.oneOf(['enabled', 'disabled', true, false]),
-  disabled: PropTypes.bool,
-};
-
-export const MultiChartCard = (props) => {
+export const MultiChartCard: FunctionComponent<{
+  onChange: ({ multi, stacked }: { multi: boolean; stacked: boolean }) => void;
+}> = ({ onChange }) => {
   const [multi, setMulti] = useState(false);
   const [stacked, setStacked] = useState(false);
 
-  const onMultiChange = (e) => {
-    const isStacked = e.target.checked ? stacked : false;
-
-    setMulti(e.target.checked);
-    setStacked(isStacked);
-
-    props.onChange({
-      multi: e.target.checked,
-      stacked,
-    });
-  };
-
-  const onStackedChange = (e) => {
-    setStacked(e.target.checked);
-
-    props.onChange({ multi: multi, stacked: e.target.checked });
-  };
   return (
     <ChartCard
-      textAlign="left"
       title="Single vs multiple series"
       description="Legends are only necessary when there are multiple series. Stacked series indicates accumulation but can hide subtle differences. Do not stack line charts."
     >
       <EuiSwitch
         label="Show multi-series"
         checked={multi}
-        onChange={onMultiChange}
+        onChange={(e) => {
+          const isStacked = e.target.checked ? stacked : false;
+
+          setMulti(e.target.checked);
+          setStacked(isStacked);
+
+          onChange({
+            multi: e.target.checked,
+            stacked,
+          });
+        }}
       />
       <EuiSpacer size="s" />
       <EuiSwitch
         label="Stacked"
         checked={stacked}
-        onChange={onStackedChange}
+        onChange={(e) => {
+          setStacked(e.target.checked);
+          onChange({ multi: multi, stacked: e.target.checked });
+        }}
         disabled={!multi}
       />
     </ChartCard>
   );
 };
-
-MultiChartCard.propTypes = {
-  /**
-   * Returns (multi:boolean, stacked:boolean)
-   */
-  onChange: PropTypes.func.isRequired,
-};
diff --git a/src-docs/src/views/elastic_charts/sizes.js b/src-docs/src/views/elastic_charts/sizes.tsx
similarity index 86%
rename from src-docs/src/views/elastic_charts/sizes.js
rename to src-docs/src/views/elastic_charts/sizes.tsx
index ba09040f6f6..50729c2dfca 100644
--- a/src-docs/src/views/elastic_charts/sizes.js
+++ b/src-docs/src/views/elastic_charts/sizes.tsx
@@ -3,12 +3,16 @@ import moment from 'moment';
 import {
   Chart,
   Settings,
+  type SettingsProps,
   Tooltip,
+  type TooltipProps,
   Axis,
+  type AxisProps,
   timeFormatter,
   niceTimeFormatByDay,
   LineAnnotation,
   BarSeries,
+  type PointerValue,
 } from '@elastic/charts';
 
 import {
@@ -33,14 +37,33 @@ import {
   formatDate,
   dateFormatAliases,
   withEuiTheme,
+  type WithEuiThemeProps,
 } from '../../../../src/services';
 
 import { MultiChartCard, ChartCard } from './shared';
 
 import { TIME_DATA, TIME_DATA_2 } from './data';
 
-class Sizes extends Component {
-  constructor(props) {
+type State = {
+  multi: boolean;
+  stacked: boolean;
+  width: number;
+  data1: typeof TIME_DATA;
+  data2: typeof TIME_DATA_2;
+  tooltipProps?: TooltipProps;
+  legendPosition?: SettingsProps['legendPosition'];
+  xAxisTitle?: AxisProps['title'];
+  xAxisFormatter?: AxisProps['tickFormat'];
+  xAxisStyle?: AxisProps['style'];
+  yAxisStyle?: AxisProps['style'];
+  changeDescription?: string;
+};
+class Sizes extends Component<WithEuiThemeProps, State> {
+  smallSize: number;
+  mediumSize: number;
+  xsmallSize: number;
+
+  constructor(props: WithEuiThemeProps) {
     super(props);
 
     this.mediumSize = 50;
@@ -60,37 +83,11 @@ class Sizes extends Component {
     this.changePropsBasedOnWidth(100);
   };
 
-  onStackedChange = (e) => {
-    this.setState({
-      stacked: e.target.checked,
-    });
-  };
-
-  onMultiChange = (multiObject) => {
-    this.setState({
-      ...multiObject,
-    });
-  };
-
-  onChartTypeChange = (optionId) => {
-    this.setState({
-      toggleIdSelected: optionId,
-    });
-  };
-
-  onWidthChartsChange = (e) => {
-    this.setState({
-      width: e.target.value,
-    });
-
-    this.changePropsBasedOnWidth(e.target.value);
-  };
-
-  changePropsBasedOnWidth = (width) => {
+  changePropsBasedOnWidth = (width: number) => {
     const data1 = TIME_DATA.slice();
     const data2 = TIME_DATA_2.slice();
     let tooltipProps;
-    let legendPosition = 'right';
+    let legendPosition: SettingsProps['legendPosition'] = 'right';
     const xAxisFormatter = timeFormatter(niceTimeFormatByDay(1));
     let xAxisTitle = `${formatDate(data1[0][0], dateFormatAliases.date)}`;
     let xAxisStyle;
@@ -103,7 +100,7 @@ class Sizes extends Component {
     }
 
     if (width < this.mediumSize) {
-      const headerFormatter = (tooltipData) => {
+      const headerFormatter = (tooltipData: PointerValue) => {
         return `${formatDate(
           tooltipData.value,
           dateFormatAliases.shortDateTime
@@ -184,7 +181,7 @@ class Sizes extends Component {
     if (width < this.xsmallSize) {
       annotation = (
         <LineAnnotation
-          annotationId="anno_"
+          id="anno_"
           domainType="yDomain"
           dataValues={[{ dataValue: 22, details: 'Threshold' }]}
           marker={'22'}
@@ -239,7 +236,7 @@ class Sizes extends Component {
                 tickFormat={xAxisFormatter}
                 id="bottom-axis"
                 position="bottom"
-                showGridLines={false}
+                gridLine={{ visible: false }}
                 style={xAxisStyle}
               />
               <Axis
@@ -259,7 +256,9 @@ class Sizes extends Component {
           className="euiGuide__chartsPageCrosshairSection"
         >
           <EuiFlexItem>
-            <MultiChartCard onChange={this.onMultiChange} />
+            <MultiChartCard
+              onChange={(multiObject) => this.setState({ ...multiObject })}
+            />
           </EuiFlexItem>
           <EuiFlexItem>
             <ChartCard
@@ -271,7 +270,11 @@ class Sizes extends Component {
                   min={20}
                   max={100}
                   value={width}
-                  onChange={this.onWidthChartsChange}
+                  onChange={(e) => {
+                    const width = Number(e.currentTarget.value);
+                    this.setState({ width });
+                    this.changePropsBasedOnWidth(width);
+                  }}
                   aria-label="Width of panel"
                 />
               </EuiFormRow>
@@ -347,7 +350,7 @@ class Sizes extends Component {
     position="bottom"
     title={'${xAxisTitle}'}
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
-    showGridLines={false}
+    gridLine={{ visible: false }}
     style={${JSON.stringify(xAxisStyle)}}
   />
   <Axis
diff --git a/src-docs/src/views/elastic_charts/sparklines.js b/src-docs/src/views/elastic_charts/sparklines.tsx
similarity index 94%
rename from src-docs/src/views/elastic_charts/sparklines.js
rename to src-docs/src/views/elastic_charts/sparklines.tsx
index 9e861901935..95159a38ec1 100644
--- a/src-docs/src/views/elastic_charts/sparklines.js
+++ b/src-docs/src/views/elastic_charts/sparklines.tsx
@@ -92,7 +92,8 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 48 }}>
-                <Settings theme={theme} showLegend={false} tooltip="none" />
+                <Settings theme={theme} showLegend={false} />
+                <Tooltip type="none" />
                 <LineSeries
                   id="increase"
                   data={TIME_DATA_SMALL}
@@ -126,7 +127,8 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 16 }}>
-                <Settings theme={theme} showLegend={false} tooltip="none" />
+                <Settings theme={theme} showLegend={false} />
+                <Tooltip type="none" />
                 <LineSeries
                   id="major"
                   data={TIME_DATA_MAJOR}
@@ -152,7 +154,8 @@ export default () => {
             >
               <EuiSpacer size="s" />
               <Chart size={{ height: 48 }}>
-                <Settings theme={theme} showLegend={false} tooltip="none" />
+                <Settings theme={theme} showLegend={false} />
+                <Tooltip type="none" />
                 <AreaSeries
                   id="subtle"
                   data={TIME_DATA_SMALL_REVERSE}
diff --git a/src-docs/src/views/elastic_charts/sparklines_example.js b/src-docs/src/views/elastic_charts/sparklines_example.js
index 5742642270f..a1fdf1cf090 100644
--- a/src-docs/src/views/elastic_charts/sparklines_example.js
+++ b/src-docs/src/views/elastic_charts/sparklines_example.js
@@ -30,7 +30,7 @@ export const ElasticChartsSparklinesExample = {
       title: 'Sparklines',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: sparklinesSource,
         },
       ],
@@ -61,9 +61,7 @@ const euiTheme = isDarkTheme ? EUI_CHARTS_THEME_DARK.theme : EUI_CHARTS_THEME_LI
               <EuiCode language="js">Settings.showLegend = false</EuiCode>
             </li>
             <li>
-              <EuiCode language="js">
-                Settings.tooltip = &quot;none&quot;
-              </EuiCode>
+              <EuiCode language="js">Tooltip.type = &quot;none&quot;</EuiCode>
             </li>
           </ul>
         </>
diff --git a/src-docs/src/views/elastic_charts/texture.js b/src-docs/src/views/elastic_charts/texture.tsx
similarity index 95%
rename from src-docs/src/views/elastic_charts/texture.js
rename to src-docs/src/views/elastic_charts/texture.tsx
index c275ba4fdd1..63500bd13be 100644
--- a/src-docs/src/views/elastic_charts/texture.js
+++ b/src-docs/src/views/elastic_charts/texture.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import {
   Chart,
-  CurveType,
   BarSeries,
   AreaSeries,
   Settings,
@@ -82,7 +81,6 @@ export default () => {
           }}
           stackAccessors={['yes']}
           data={SAMPLE_SMALL_DATA}
-          curve={CurveType.CURVE_MONOTONE_X}
         />
         <AreaSeries
           key={2}
@@ -92,7 +90,6 @@ export default () => {
           areaSeriesStyle={{
             area: {
               opacity: 0.05,
-              shape: 'circle',
               texture: {
                 opacity: 1,
                 shape: 'circle',
@@ -111,8 +108,9 @@ export default () => {
           data={SAMPLE_SMALL_DATA_2}
         />
         <Axis
+          id="yAxis"
           hide
-          position={Position.left}
+          position={Position.Left}
           tickFormat={(d) => Number(d).toFixed(2)}
         />
       </Chart>
diff --git a/src-docs/src/views/elastic_charts/theming.js b/src-docs/src/views/elastic_charts/theming.tsx
similarity index 79%
rename from src-docs/src/views/elastic_charts/theming.js
rename to src-docs/src/views/elastic_charts/theming.tsx
index 0732d7108a5..8810a9e814d 100644
--- a/src-docs/src/views/elastic_charts/theming.js
+++ b/src-docs/src/views/elastic_charts/theming.tsx
@@ -46,27 +46,21 @@ const paletteData = {
   euiPaletteGray,
 };
 
-const paletteNames = Object.keys(paletteData);
+const palettes = Object.entries(paletteData).map(([paletteName, palette]) => {
+  return {
+    value: paletteName,
+    title: paletteName,
+    palette:
+      palette === euiPaletteColorBlind
+        ? euiPaletteColorBlind({ sortBy: 'natural' })
+        : palette(10),
+    type: 'fixed' as const,
+  };
+});
 
 export default () => {
   const { colorMode } = useEuiTheme();
 
-  const palettes = paletteNames.map((paletteName, index) => {
-    const options =
-      index > 0
-        ? 10
-        : {
-            sortBy: 'natural',
-          };
-
-    return {
-      value: paletteName,
-      title: paletteName,
-      palette: paletteData[paletteNames[index]](options),
-      type: 'fixed',
-    };
-  });
-
   const [barPalette, setBarPalette] = useState('euiPaletteColorBlind');
 
   /**
@@ -84,14 +78,12 @@ export default () => {
     ? EUI_CHARTS_THEME_DARK.theme
     : EUI_CHARTS_THEME_LIGHT.theme;
 
-  const barPaletteIndex = paletteNames.findIndex((item) => item === barPalette);
-
   const customTheme =
-    barPaletteIndex > 0
+    barPalette !== 'euiPaletteColorBlind'
       ? [
           {
             colors: {
-              vizColors: paletteData[paletteNames[barPaletteIndex]](5),
+              vizColors: paletteData[barPalette as keyof typeof paletteData](5),
             },
           },
           theme,
@@ -119,11 +111,11 @@ export default () => {
           yAccessors={['y']}
           color={['black']}
         />
-        <Axis id="bottom-axis" position="bottom" showGridLines />
+        <Axis id="bottom-axis" position="bottom" gridLine={{ visible: true }} />
         <Axis
           id="left-axis"
           position="left"
-          showGridLines
+          gridLine={{ visible: true }}
           tickFormat={(d) => Number(d).toFixed(2)}
         />
       </Chart>
diff --git a/src-docs/src/views/elastic_charts/theming_categorical.js b/src-docs/src/views/elastic_charts/theming_categorical.tsx
similarity index 84%
rename from src-docs/src/views/elastic_charts/theming_categorical.js
rename to src-docs/src/views/elastic_charts/theming_categorical.tsx
index 3f6e76f0027..8ffef39feb2 100644
--- a/src-docs/src/views/elastic_charts/theming_categorical.js
+++ b/src-docs/src/views/elastic_charts/theming_categorical.tsx
@@ -21,7 +21,7 @@ import {
   EuiTitle,
 } from '../../../../src/components';
 
-import { CHART_COMPONENTS, ChartCard } from './shared';
+import { CHART_COMPONENTS, type ChartType, ChartCard } from './shared';
 import {
   euiPaletteColorBlind,
   euiPalettePositive,
@@ -29,6 +29,7 @@ import {
   euiPaletteGray,
   useEuiTheme,
 } from '../../../../src/services';
+import type { EuiPalette } from '../../../../src/services/color/eui_palettes';
 
 export default () => {
   const { colorMode } = useEuiTheme();
@@ -60,12 +61,14 @@ export default () => {
     colorTypeRadios[0].id
   );
   const [colorType, setColorType] = useState(colorTypeRadios[0].label);
-  const [numCharts, setNumCharts] = useState('3');
-  const [data, setData] = useState([]);
+  const [numCharts, setNumCharts] = useState(3);
+  const [data, setData] = useState<Array<{ x: number; y: number; g: string }>>(
+    []
+  );
   const [dataString, setDataString] = useState('[{x: 1, y: 5.5, g: 0}]');
-  const [vizColors, setVizColors] = useState();
-  const [vizColorsString, setVizColorsString] = useState();
-  const [chartType, setChartType] = useState('LineSeries');
+  const [vizColors, setVizColors] = useState<EuiPalette | undefined>();
+  const [vizColorsString, setVizColorsString] = useState('');
+  const [chartType, setChartType] = useState<ChartType>('LineSeries');
 
   useEffect(() => {
     createCategoryChart(3);
@@ -76,28 +79,7 @@ export default () => {
     ? EUI_CHARTS_THEME_DARK.theme
     : EUI_CHARTS_THEME_LIGHT.theme;
 
-  const onNumChartsChange = (e) => {
-    updateCorrectChart(Number(e.target.value), colorType);
-    setNumCharts(e.target.value);
-  };
-
-  const onColorTypeChange = (optionId) => {
-    const colorType = colorTypeRadios.find(({ id }) => id === optionId).label;
-    updateCorrectChart(Number(numCharts), colorType);
-    setColorType(colorType);
-    setColorTypeIdSelected(optionId);
-  };
-
-  const onGroupChange = (e) => {
-    const colorType = e.target.checked
-      ? 'Grouped'
-      : colorTypeRadios.find(({ id }) => id === colorTypeIdSelected).label;
-    updateCorrectChart(Number(numCharts), colorType);
-    setGrouped(e.target.checked);
-    setColorType(colorType);
-  };
-
-  const updateCorrectChart = (numCharts, chartType) => {
+  const updateCorrectChart = (numCharts: number, chartType: string) => {
     switch (chartType) {
       case 'Categorical':
         createCategoryChart(numCharts);
@@ -121,7 +103,7 @@ export default () => {
     }
   };
 
-  const createCategoryChart = (numCharts) => {
+  const createCategoryChart = (numCharts: number) => {
     const dg = new DataGenerator();
     const data = dg.generateGroupedSeries(20, numCharts).map((item) => {
       item.g = `Categorical ${item.g.toUpperCase()}`;
@@ -131,11 +113,11 @@ export default () => {
     setData(data);
     setDataString("[{x: 1, y: 5.5, g: 'Categorical 1'}]");
     setVizColors(undefined);
-    setVizColorsString(undefined);
+    setVizColorsString('');
     setChartType('LineSeries');
   };
 
-  const createQuantityChart = (numCharts) => {
+  const createQuantityChart = (numCharts: number) => {
     const vizColors = euiPalettePositive(numCharts);
 
     // convert series labels to percentages
@@ -159,7 +141,7 @@ export default () => {
     setChartType('BarSeries');
   };
 
-  const createTrendChart = (numCharts) => {
+  const createTrendChart = (numCharts: number) => {
     const vizColors = euiPaletteForStatus(numCharts);
 
     // convert series labels to better/worse
@@ -194,7 +176,7 @@ export default () => {
     setChartType('BarSeries');
   };
 
-  const createHighlightChart = (numCharts) => {
+  const createHighlightChart = (numCharts: number) => {
     const vizColors = euiPaletteGray(numCharts);
     vizColors[vizColors.length - 1] = highlightColor;
 
@@ -271,7 +253,7 @@ export default () => {
         return item;
       });
 
-      const isOdd = index % 2;
+      const isOdd = index % 2 === 0;
 
       const chart = (
         <ChartType
@@ -328,18 +310,18 @@ export default () => {
             theme={customTheme}
             showLegend={showLegend}
             legendPosition="right"
-            showLegendDisplayValue={false}
+            showLegendExtra={false}
           />
           {charts}
           <Axis
             id="bottom-axis"
             position="bottom"
-            showGridLines={chartType !== 'BarSeries'}
+            gridLine={{ visible: chartType !== 'BarSeries' }}
           />
           <Axis
             id="left-axis"
             position="left"
-            showGridLines
+            gridLine={{ visible: true }}
             tickFormat={(d) => Number(d).toFixed(2)}
           />
         </Chart>
@@ -357,7 +339,14 @@ export default () => {
               compressed
               options={colorTypeRadios}
               idSelected={grouped ? colorTypeRadios[0].id : colorTypeIdSelected}
-              onChange={onColorTypeChange}
+              onChange={(optionId) => {
+                const colorType = colorTypeRadios.find(
+                  ({ id }) => id === optionId
+                )!.label;
+                updateCorrectChart(Number(numCharts), colorType);
+                setColorType(colorType);
+                setColorTypeIdSelected(optionId);
+              }}
               disabled={grouped}
             />
           </ChartCard>
@@ -381,7 +370,11 @@ export default () => {
                 showTicks
                 value={grouped ? '2' : numCharts}
                 disabled={grouped}
-                onChange={onNumChartsChange}
+                onChange={(e) => {
+                  const numCharts = Number(e.currentTarget.value);
+                  updateCorrectChart(numCharts, colorType);
+                  setNumCharts(numCharts);
+                }}
                 levels={[
                   { min: 1, max: 5.5, color: 'success' },
                   { min: 5.5, max: 10, color: 'danger' },
@@ -401,7 +394,17 @@ export default () => {
             <EuiSwitch
               label="Show grouped"
               checked={grouped}
-              onChange={onGroupChange}
+              onChange={(e) => {
+                const colorType = e.target.checked
+                  ? 'Grouped'
+                  : colorTypeRadios.find(
+                      ({ id }) => id === colorTypeIdSelected
+                    )!.label;
+
+                updateCorrectChart(Number(numCharts), colorType);
+                setGrouped(e.target.checked);
+                setColorType(colorType);
+              }}
             />
           </ChartCard>
         </EuiFlexItem>
@@ -425,7 +428,7 @@ export default () => {
     theme={${customColorsString}}
     showLegend={${showLegend}}
     legendPosition="right"
-    showLegendDisplayValue={false}
+    showLegendExtra={false}
   />
   <${chartType}
     id="bars"
@@ -439,12 +442,12 @@ export default () => {
   <Axis
     id="bottom-axis"
     position="bottom"
-    ${chartType !== 'BarSeries' ? 'showGridLines' : ''}
+    gridLine={{ visible: ${chartType !== 'BarSeries'} }}
   />
   <Axis
     id="left-axis"
     position="left"
-    showGridLines
+    gridLine={{ visible: true }}
     tickFormat={(d) => Number(d).toFixed(2)}
   />
 </Chart>`}
diff --git a/src-docs/src/views/elastic_charts/theming_example.js b/src-docs/src/views/elastic_charts/theming_example.js
index ce86740d63e..9c48b22e2ad 100644
--- a/src-docs/src/views/elastic_charts/theming_example.js
+++ b/src-docs/src/views/elastic_charts/theming_example.js
@@ -43,7 +43,7 @@ export const ElasticChartsThemingExample = {
       title: 'Theming via EUI',
       source: [
         {
-          type: GuideSectionTypes.JS,
+          type: GuideSectionTypes.TSX,
           code: themingSource,
         },
       ],
diff --git a/src-docs/src/views/elastic_charts/time_chart.js b/src-docs/src/views/elastic_charts/time_chart.tsx
similarity index 84%
rename from src-docs/src/views/elastic_charts/time_chart.js
rename to src-docs/src/views/elastic_charts/time_chart.tsx
index 0c18e1c67bd..7b325b442f0 100644
--- a/src-docs/src/views/elastic_charts/time_chart.js
+++ b/src-docs/src/views/elastic_charts/time_chart.tsx
@@ -35,6 +35,7 @@ import { TIME_DATA, TIME_DATA_2 } from './data';
 import {
   ChartTypeCard,
   CHART_COMPONENTS,
+  type ChartType,
   MultiChartCard,
   ChartCard,
 } from './shared';
@@ -44,29 +45,17 @@ export default () => {
 
   const [multi, setMulti] = useState(false);
   const [stacked, setStacked] = useState(false);
-  const [chartType, setChartType] = useState('BarSeries');
-
-  const onMultiChange = (multiObject) => {
-    const { multi, stacked } = multiObject;
-    setMulti(multi);
-    setStacked(stacked);
-  };
-
-  const onChartTypeChange = (chartType) => {
-    setChartType(chartType);
-  };
+  const [chartType, setChartType] = useState<ChartType | 'Mixed'>('BarSeries');
 
   const isDarkTheme = colorMode === 'DARK';
   const theme = isDarkTheme
     ? EUI_CHARTS_THEME_DARK.theme
     : EUI_CHARTS_THEME_LIGHT.theme;
 
-  let ChartType = CHART_COMPONENTS[chartType];
-  let ChartType2 = CHART_COMPONENTS[chartType];
-  if (chartType === 'Mixed') {
-    ChartType = BarSeries;
-    ChartType2 = LineSeries;
-  }
+  const ChartType =
+    chartType === 'Mixed' ? BarSeries : CHART_COMPONENTS[chartType];
+  const ChartType2 =
+    chartType === 'Mixed' ? LineSeries : CHART_COMPONENTS[chartType];
 
   const isBadChart = chartType === 'LineSeries' && stacked;
 
@@ -109,13 +98,13 @@ export default () => {
           id="bottom-axis"
           position="bottom"
           tickFormat={timeFormatter(niceTimeFormatByDay(1))}
-          showGridLines={chartType !== 'BarSeries'}
-          tickPadding={0}
+          gridLine={{ visible: chartType !== 'BarSeries' }}
+          style={{ tickLine: { padding: 0 } }}
         />
         <Axis
           id="left-axis"
           position="left"
-          showGridLines
+          gridLine={{ visible: true }}
           tickFormat={(d) => Number(d).toFixed(2)}
         />
       </Chart>
@@ -124,15 +113,20 @@ export default () => {
 
       <EuiFlexGrid columns={3}>
         <EuiFlexItem>
-          <ChartTypeCard
+          <ChartTypeCard<{ mixed: true }>
             type="Time series"
-            onChange={onChartTypeChange}
+            onChange={(chartType) => setChartType(chartType)}
             mixed={multi ? 'enabled' : 'disabled'}
           />
         </EuiFlexItem>
 
         <EuiFlexItem>
-          <MultiChartCard onChange={onMultiChange} />
+          <MultiChartCard
+            onChange={({ multi, stacked }) => {
+              setMulti(multi);
+              setStacked(stacked);
+            }}
+          />
         </EuiFlexItem>
 
         <EuiFlexItem>
@@ -180,12 +174,12 @@ export default () => {
     id="bottom-axis"
     position="bottom"
     tickFormat={timeFormatter(niceTimeFormatByDay(1))}
-    ${chartType !== 'BarSeries' ? 'showGridLines' : ''}
+    gridLine={{ visible: ${chartType !== 'BarSeries'} }}
   />
   <Axis
     id="left-axis"
     position="left"
-    showGridLines
+    gridLine={{ visible: true }}
     tickFormat={(d) => Number(d).toFixed(2)}
   />
 </Chart>`}
diff --git a/src-docs/src/views/elastic_charts/treemap.js b/src-docs/src/views/elastic_charts/treemap.tsx
similarity index 75%
rename from src-docs/src/views/elastic_charts/treemap.js
rename to src-docs/src/views/elastic_charts/treemap.tsx
index daab0de712b..0a1728e6015 100644
--- a/src-docs/src/views/elastic_charts/treemap.js
+++ b/src-docs/src/views/elastic_charts/treemap.tsx
@@ -15,6 +15,7 @@ import {
 import { euiPaletteColorBlind, useEuiTheme } from '../../../../src/services';
 
 import { GITHUB_DATASET_MOD } from './data';
+type DataType = (typeof GITHUB_DATASET_MOD)[0];
 
 export default () => {
   const { colorMode } = useEuiTheme();
@@ -59,23 +60,23 @@ export default () => {
               valueAccessor={(d) => d.count}
               layers={[
                 {
-                  groupByRollup: (d) => d.total,
+                  groupByRollup: (d: DataType) => d.total,
                   shape: {
-                    fillColor: euiChartTheme.theme.partition.sectorLineStroke,
+                    fillColor: euiChartTheme.theme.partition!.sectorLineStroke!,
                   },
-                  hideInLegend: true,
                 },
                 {
-                  groupByRollup: (d) => d.vizType,
+                  groupByRollup: (d: DataType) => d.vizType,
                   shape: {
-                    fillColor: (d) => groupedPalette[d.sortIndex * 3],
+                    fillColor: (key, sortIndex) =>
+                      groupedPalette[sortIndex * 3],
                   },
                 },
                 {
-                  groupByRollup: (d) => d.issueType,
+                  groupByRollup: (d: DataType) => d.issueType,
                   shape: {
-                    fillColor: (d) =>
-                      groupedPalette[d.parent.sortIndex * 3 + d.sortIndex + 1],
+                    fillColor: (key, sortIndex, { parent }) =>
+                      groupedPalette[parent.sortIndex * 3 + sortIndex + 1],
                   },
                 },
               ]}
@@ -99,9 +100,10 @@ export default () => {
               topGroove={0}
               layers={[
                 {
-                  groupByRollup: (d) => d.vizType,
+                  groupByRollup: (d: DataType) => d.vizType,
                   shape: {
-                    fillColor: (d) => groupedPalette[d.sortIndex * 3],
+                    fillColor: (key, sortIndex) =>
+                      groupedPalette[sortIndex * 3],
                   },
                   fillLabel: {
                     valueFormatter: () => '',
@@ -109,10 +111,10 @@ export default () => {
                   },
                 },
                 {
-                  groupByRollup: (d) => d.issueType,
+                  groupByRollup: (d: DataType) => d.issueType,
                   shape: {
-                    fillColor: (d) =>
-                      groupedPalette[d.parent.sortIndex * 3 + d.sortIndex],
+                    fillColor: (key, sortIndex, { parent }) =>
+                      groupedPalette[parent.sortIndex * 3 + sortIndex],
                   },
                 },
               ]}
diff --git a/src-docs/src/views/icon/tokens.tsx b/src-docs/src/views/icon/tokens.tsx
index beaad629f09..b11f2a44b61 100644
--- a/src-docs/src/views/icon/tokens.tsx
+++ b/src-docs/src/views/icon/tokens.tsx
@@ -22,7 +22,6 @@ const tokens: EuiTokenMapType[] = [
   'tokenCompletionSuggester',
   'tokenConstant',
   'tokenDate',
-  'tokenDenseVector',
   'tokenElement',
   'tokenEnum',
   'tokenEnumMember',
@@ -66,6 +65,8 @@ const tokens: EuiTokenMapType[] = [
   'tokenText',
   'tokenTokenCount',
   'tokenVariable',
+  'tokenVectorDense',
+  'tokenVectorSparse',
 ];
 
 export default () => (
diff --git a/src-docs/src/views/popover/input_popover.tsx b/src-docs/src/views/popover/input_popover.tsx
index 1e87b9ee1a3..1b2fd51d14d 100644
--- a/src-docs/src/views/popover/input_popover.tsx
+++ b/src-docs/src/views/popover/input_popover.tsx
@@ -21,6 +21,7 @@ export default () => {
       <EuiInputPopover
         isOpen={isPopoverOpen}
         closePopover={() => setIsPopoverOpen(false)}
+        closeOnScroll={true}
         input={
           <EuiFieldText
             onFocus={() => setIsPopoverOpen(true)}
diff --git a/src-docs/src/views/provider/provider_example.js b/src-docs/src/views/provider/provider_example.js
index c01f8a9b524..cd7e33ba3ee 100644
--- a/src-docs/src/views/provider/provider_example.js
+++ b/src-docs/src/views/provider/provider_example.js
@@ -96,21 +96,41 @@ export const ProviderExample = {
             {'<EuiProvider globalStyles={false} utilityClasses={false} />'}
           </EuiCodeBlock>
 
-          <h3 id="cache-location">
-            @emotion/cache and style injection location
-          </h3>
+          <h3 id="cache-customization">@emotion/cache customization</h3>
           <p>
-            In the case that your app has its own static stylesheet,{' '}
-            <EuiCode>@emotion</EuiCode> styles may not be injected into the
-            correct location in the <EuiCode>{'<head>'}</EuiCode>, causing
-            unintentional overrides or unapplied styles.{' '}
-            <EuiLink href="https://emotion.sh/docs/@emotion/cache" external>
-              The <strong>@emotion/cache</strong> library
+            The{' '}
+            <EuiLink
+              href="https://emotion.sh/docs/@emotion/cache"
+              target="_blank"
+            >
+              <strong>@emotion/cache</strong> library
             </EuiLink>{' '}
-            provides configuration options that help with specifying the
-            injection location. We recommend using <EuiCode>{'<meta>'}</EuiCode>{' '}
-            tags to achieve this.
+            provides extra configuration options for EUI's CSS-in-JS behavior:
           </p>
+          <ul>
+            <li>
+              <strong>Browser prefixing</strong>: By default, EUI uses CSS
+              browser prefixes based on our{' '}
+              <EuiLink
+                href="https://www.elastic.co/support/matrix#matrix_browsers"
+                target="_blank"
+              >
+                supported browsers matrix
+              </EuiLink>{' '}
+              (latest evergreen only). Should you need to customize this, you
+              can pass in your own prefix plugin via the{' '}
+              <EuiCode>stylisPlugins</EuiCode> option.
+              <EuiSpacer size="s" />
+            </li>
+            <li>
+              <strong>Injection location</strong>: In the case that your app has
+              its own static stylesheet, Emotion's styles may not be injected
+              into the correct location in the <EuiCode>{'<head>'}</EuiCode>,
+              causing unintentional overrides or unapplied styles. You can use
+              the <EuiCode>container</EuiCode> option and{' '}
+              <EuiCode>{'<meta>'}</EuiCode> tags to achieve this.
+            </li>
+          </ul>
 
           <GlobalStyles />
 
@@ -121,8 +141,8 @@ export const ProviderExample = {
             <EuiCode>utility</EuiCode> properties on the{' '}
             <EuiCode>cache</EuiCode> prop to further define where specific
             styles should be inserted. See{' '}
-            <EuiLink href="#euiprovider-props">the props documentation</EuiLink>{' '}
-            for details.
+            <Link to="#euiprovider-props">the props documentation</Link> for
+            details.
           </p>
 
           <p>
diff --git a/src-docs/src/views/provider/provider_styles.tsx b/src-docs/src/views/provider/provider_styles.tsx
index 9b4ca730d41..c32fdbfe1f9 100644
--- a/src-docs/src/views/provider/provider_styles.tsx
+++ b/src-docs/src/views/provider/provider_styles.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { EuiCodeBlock, EuiSpacer, useEuiTheme } from '../../../../src';
+import { EuiCodeBlock, useEuiTheme } from '../../../../src';
 
 export default () => {
   const { colorMode } = useEuiTheme();
@@ -22,18 +22,17 @@ export default () => {
 </html>`}
       </EuiCodeBlock>
 
-      <EuiSpacer size="s" />
-
       <EuiCodeBlock language="jsx" fontSize="m" isCopyable>
         {`// App.js
-import { EuiProvider } from '@elastic/eui'
+import { EuiProvider, euiStylisPrefixer } from '@elastic/eui'
 import createCache from '@emotion/cache';
 
 const euiCache = createCache({
   key: 'eui',
+  stylisPlugins: [euiStylisPrefixer],
   container: document.querySelector('meta[name="eui-style-insert"]'),
 });
-cache.compat = true;
+euiCache.compat = true;
 
 <EuiProvider${colorMode === 'DARK' ? ' colorMode="dark"' : ''} cache={euiCache}>
   {/* Content */}
diff --git a/src-docs/src/views/suggest/_global_filter_group.scss b/src-docs/src/views/suggest/_global_filter_group.scss
deleted file mode 100644
index 9370e8f20e6..00000000000
--- a/src-docs/src/views/suggest/_global_filter_group.scss
+++ /dev/null
@@ -1,24 +0,0 @@
-.globalFilterGroup__filterBar {
-  margin-top: $euiSizeXS;
-}
-
-.globalFilterGroup__branch {
-  padding: $euiSize $euiSize $euiSizeS $euiSizeS;
-  background-repeat: no-repeat;
-  background-position: right top;
-  background-image: url("data:image/svg+xml,%0A%3Csvg width='28px' height='28px' viewBox='0 0 28 28' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='#{hexToRGB($euiColorLightShade)}'%3E%3Crect x='14' y='27' width='14' height='1'%3E%3C/rect%3E%3Crect x='0' y='0' width='1' height='14'%3E%3C/rect%3E%3C/g%3E%3C/svg%3E");
-}
-
-.globalFilterGroup__wrapper {
-  overflow: hidden;
-  transition: height $euiAnimSpeedNormal $euiAnimSlightResistance;
-}
-
-.globalFilterGroup__filterFlexItem {
-  overflow: hidden;
-  padding: $euiSizeS;
-}
-
-.globalFilterBar__flexItem {
-  max-width: calc(100% - #{$euiSizeXS}); // Width minus margin around each flex itm
-}
diff --git a/src-docs/src/views/suggest/_global_filter_item.scss b/src-docs/src/views/suggest/_global_filter_item.scss
deleted file mode 100644
index bfda7254583..00000000000
--- a/src-docs/src/views/suggest/_global_filter_item.scss
+++ /dev/null
@@ -1,32 +0,0 @@
-.globalFilterItem {
-  line-height: $euiSizeL + $euiSizeXS;
-  border: none;
-  color: $euiTextColor;
-
-  &:not(.globalFilterItem-isDisabled) {
-    @include euiFormControlDefaultShadow;
-  }
-}
-
-.globalFilterItem-isDisabled {
-  background-color: transparentize($euiColorLightShade, .4);
-  text-decoration: line-through;
-  font-weight: $euiFontWeightRegular;
-  font-style: italic;
-}
-
-.globalFilterItem-isPinned {
-  position: relative;
-
-  &::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    bottom: 0;
-    left: 0;
-    width: $euiSizeXS;
-    background-color: $euiColorSuccess;
-    border-top-left-radius: $euiBorderRadius / 2;
-    border-bottom-left-radius: $euiBorderRadius / 2;
-  }
-}
diff --git a/src-docs/src/views/suggest/_index.scss b/src-docs/src/views/suggest/_index.scss
deleted file mode 100644
index b8b21d226f4..00000000000
--- a/src-docs/src/views/suggest/_index.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-@import './global_filter_group';
-@import './global_filter_item';
-@import './saved_queries';
diff --git a/src-docs/src/views/suggest/_saved_queries.scss b/src-docs/src/views/suggest/_saved_queries.scss
deleted file mode 100644
index fcdb4840cab..00000000000
--- a/src-docs/src/views/suggest/_saved_queries.scss
+++ /dev/null
@@ -1,31 +0,0 @@
-.savedQueriesInput__hideDatepicker {
-  .euiSuperDatePicker__flexWrapper {
-    width: 100%;
-
-    > div:nth-of-type(1) {
-      display: none;
-    }
-  }
-}
-
-.savedQueriesInput {
-  padding-bottom: $euiSizeXL * 6;
-}
-
-.savedQueryManagement__text {
-  padding: $euiSizeM $euiSizeM ($euiSizeM / 2);
-}
-
-.savedQueryManagement__listWrapper {
-  // Addition height will ensure one item is "cutoff" to indicate more below the scroll
-  max-height: $euiFormMaxWidth + $euiSize;
-  overflow-y: hidden;
-}
-
-.savedQueryManagement__list {
-  @include euiYScrollWithShadows;
-  max-height: inherit; // Fixes overflow for applied max-height
-  // Left/Right padding is calculated to match the left alignment of the
-  // popover text and buttons
-  padding: ($euiSizeM / 2) $euiSizeXS !important; // stylelint-disable-line declaration-no-important
-}
diff --git a/src-docs/src/views/suggest/global_filter_add.js b/src-docs/src/views/suggest/global_filter_add.js
deleted file mode 100644
index 83abc7dac7e..00000000000
--- a/src-docs/src/views/suggest/global_filter_add.js
+++ /dev/null
@@ -1,54 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  EuiButtonEmpty,
-  EuiPopover,
-  EuiPopoverTitle,
-  EuiFlexGroup,
-  EuiFlexItem,
-} from '../../../../src/components';
-
-import GlobalFilterForm from './global_filter_form';
-
-export default () => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-
-  const togglePopover = () => {
-    setIsPopoverOpen(!isPopoverOpen);
-  };
-
-  const closePopover = () => {
-    setIsPopoverOpen(false);
-  };
-
-  return (
-    <EuiPopover
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-      button={
-        <EuiButtonEmpty onClick={togglePopover} size="xs">
-          + Add filter
-        </EuiButtonEmpty>
-      }
-      anchorPosition="downCenter"
-    >
-      <EuiPopoverTitle>
-        <EuiFlexGroup alignItems="baseline">
-          <EuiFlexItem>Add a filter</EuiFlexItem>
-          <EuiFlexItem grow={false}>
-            {/* This button should open a modal */}
-            <EuiButtonEmpty flush="right" size="xs">
-              Edit as Query DSL
-            </EuiButtonEmpty>
-          </EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPopoverTitle>
-
-      <GlobalFilterForm
-        style={{ width: 400 }}
-        onAdd={togglePopover}
-        onCancel={togglePopover}
-      />
-    </EuiPopover>
-  );
-};
diff --git a/src-docs/src/views/suggest/global_filter_bar.js b/src-docs/src/views/suggest/global_filter_bar.js
deleted file mode 100644
index ddb7ce4b4d8..00000000000
--- a/src-docs/src/views/suggest/global_filter_bar.js
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import { EuiBadgeGroup } from '../../../../src/components';
-import GlobalFilterAdd from './global_filter_add';
-import { GlobalFilterItem } from './global_filter_item';
-
-export const GlobalFilterBar = ({ filters, className, ...rest }) => {
-  const classes = classNames('globalFilterBar', className);
-
-  const pinnedFilters = filters
-    .filter((filter) => filter.isPinned)
-    .map((filter) => {
-      return <GlobalFilterItem key={filter.id} {...filter} />;
-    });
-
-  const unpinnedFilters = filters
-    .filter((filter) => !filter.isPinned)
-    .map((filter) => {
-      return <GlobalFilterItem key={filter.id} {...filter} />;
-    });
-
-  return (
-    <EuiBadgeGroup className={classes} {...rest}>
-      {/* Show pinned filters first and in a specific group */}
-      {pinnedFilters}
-      {unpinnedFilters}
-      <GlobalFilterAdd />
-    </EuiBadgeGroup>
-  );
-};
-
-GlobalFilterBar.propTypes = {
-  filters: PropTypes.array,
-};
diff --git a/src-docs/src/views/suggest/global_filter_form.js b/src-docs/src/views/suggest/global_filter_form.js
deleted file mode 100644
index 1132a77daac..00000000000
--- a/src-docs/src/views/suggest/global_filter_form.js
+++ /dev/null
@@ -1,256 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-
-import {
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiButtonEmpty,
-  EuiFormRow,
-  EuiComboBox,
-  EuiButton,
-  EuiSpacer,
-  EuiSwitch,
-  EuiFieldText,
-} from '../../../../src/components';
-
-const fieldOption = [
-  {
-    label: 'Fields',
-    isGroupLabelOption: true,
-  },
-  {
-    label: 'field_1',
-  },
-  {
-    label: 'field_2',
-  },
-  {
-    label: 'field_3',
-  },
-  {
-    label: 'field_4',
-  },
-];
-const operatorOption = [
-  {
-    label: 'Operators',
-    isGroupLabelOption: true,
-  },
-  {
-    label: 'IS',
-  },
-  {
-    label: 'IS NOT',
-  },
-  {
-    label: 'IS ONE OF',
-  },
-  {
-    label: 'EXISTS',
-  },
-];
-const valueOption = [
-  {
-    label: 'Values',
-    isGroupLabelOption: true,
-  },
-  {
-    label: 'Value 1',
-  },
-  {
-    label: 'Value 2',
-  },
-  {
-    label: 'Value 3',
-  },
-  {
-    label: 'Value 4',
-  },
-];
-
-const GlobalFilterForm = (props) => {
-  const [fieldOptions, setFieldOptions] = useState(fieldOption);
-  const [operandOptions, setOperandOptions] = useState(operatorOption);
-  const [valueOptions, setValueOptions] = useState(valueOption);
-  const [selectedField, setSelectedField] = useState(
-    props.selectedObject ? props.selectedObject.field : []
-  );
-  const [selectedOperand, setSelectedOperand] = useState(
-    props.selectedObject ? props.selectedObject.operand : []
-  );
-  const [selectedValues, setSelectedValues] = useState(
-    props.selectedObject ? props.selectedObject.values : []
-  );
-  const [useCustomLabel, setUseCustomLabel] = useState(false);
-  const [customLabel, setCustomLabel] = useState('');
-
-  const onFieldChange = (selectedOptions) => {
-    // We should only get back either 0 or 1 options.
-    setSelectedField(selectedOptions);
-  };
-
-  const onOperandChange = (selectedOptions) => {
-    // We should only get back either 0 or 1 options.
-    setSelectedOperand(selectedOptions);
-  };
-
-  const onValuesChange = (selectedOptions) => {
-    setSelectedValues(selectedOptions);
-  };
-
-  const onCustomLabelSwitchChange = (e) => {
-    setUseCustomLabel(e.target.checked);
-  };
-
-  const onFieldSearchChange = (searchValue) => {
-    setFieldOptions(
-      fieldOption.filter((option) =>
-        option.label.toLowerCase().includes(searchValue.toLowerCase())
-      )
-    );
-  };
-
-  const onOperandSearchChange = (searchValue) => {
-    setOperandOptions(
-      operatorOption.filter((option) =>
-        option.label.toLowerCase().includes(searchValue.toLowerCase())
-      )
-    );
-  };
-
-  const onValuesSearchChange = (searchValue) => {
-    setValueOptions(
-      valueOption.filter((option) =>
-        option.label.toLowerCase().includes(searchValue.toLowerCase())
-      )
-    );
-  };
-
-  const resetForm = () => {
-    setSelectedField([]);
-    setSelectedOperand([]);
-    setSelectedValues([]);
-    setUseCustomLabel(false);
-    setCustomLabel('');
-  };
-
-  const onCustomLabelChange = (e) => {
-    setCustomLabel(e.target.value);
-  };
-
-  const { onAdd, onCancel, selectedObject, ...rest } = props;
-
-  return (
-    <div {...rest}>
-      <EuiFlexGroup>
-        <EuiFlexItem style={{ maxWidth: '188px' }}>
-          <EuiFormRow label="Field">
-            <EuiComboBox
-              placeholder={
-                selectedOperand.length < 1 ? 'Start here' : 'Select a field'
-              }
-              options={fieldOptions}
-              selectedOptions={selectedField}
-              onChange={onFieldChange}
-              onSearchChange={onFieldSearchChange}
-              singleSelection={{ asPlainText: true }}
-              isClearable={false}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-        <EuiFlexItem style={{ maxWidth: '188px' }}>
-          <EuiFormRow label="Operand">
-            <EuiComboBox
-              placeholder={
-                selectedField.length < 1
-                  ? 'Select a field first'
-                  : 'Select an operand'
-              }
-              isDisabled={selectedField.length < 1}
-              options={operandOptions}
-              selectedOptions={selectedOperand}
-              onChange={onOperandChange}
-              onSearchChange={onOperandSearchChange}
-              singleSelection={{ asPlainText: true }}
-              isClearable={false}
-            />
-          </EuiFormRow>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiSpacer size="m" />
-
-      <div>
-        <EuiFormRow label="Value(s)">
-          <EuiComboBox
-            placeholder={
-              selectedField.length < 1 && selectedOperand.length < 1
-                ? 'Waiting on previous selections'
-                : 'Select one or more values'
-            }
-            isDisabled={selectedField.length < 1 || selectedOperand.length < 1}
-            options={valueOptions}
-            selectedOptions={selectedValues}
-            onChange={onValuesChange}
-            onSearchChange={onValuesSearchChange}
-          />
-        </EuiFormRow>
-      </div>
-
-      <EuiSpacer size="m" />
-
-      <EuiSwitch
-        label="Create custom label?"
-        checked={useCustomLabel}
-        onChange={onCustomLabelSwitchChange}
-      />
-
-      {useCustomLabel && (
-        <div>
-          <EuiSpacer size="m" />
-          <EuiFormRow label="Custom label">
-            <EuiFieldText value={customLabel} onChange={onCustomLabelChange} />
-          </EuiFormRow>
-        </div>
-      )}
-
-      <EuiSpacer size="m" />
-
-      <EuiFlexGroup direction="rowReverse" alignItems="center">
-        <EuiFlexItem grow={false}>
-          <EuiButton
-            isDisabled={selectedValues.length < 1 && customLabel.length === 0}
-            fill
-            onClick={onAdd}
-          >
-            Add
-          </EuiButton>
-        </EuiFlexItem>
-        <EuiFlexItem grow={false}>
-          <EuiButtonEmpty
-            flush="right"
-            onClick={selectedObject ? onCancel : resetForm}
-          >
-            {selectedObject ? 'Cancel' : 'Reset form'}
-          </EuiButtonEmpty>
-        </EuiFlexItem>
-        <EuiFlexItem />
-        <EuiFlexItem grow={false}>
-          {selectedObject && (
-            <EuiButtonEmpty flush="left" color="danger">
-              Delete
-            </EuiButtonEmpty>
-          )}
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  );
-};
-
-GlobalFilterForm.propTypes = {
-  onAdd: PropTypes.func.isRequired,
-  onCancel: PropTypes.func.isRequired,
-  selectedObject: PropTypes.object,
-};
-
-export default GlobalFilterForm;
diff --git a/src-docs/src/views/suggest/global_filter_item.js b/src-docs/src/views/suggest/global_filter_item.js
deleted file mode 100644
index d4c166cc638..00000000000
--- a/src-docs/src/views/suggest/global_filter_item.js
+++ /dev/null
@@ -1,184 +0,0 @@
-import React, { useState } from 'react';
-import PropTypes from 'prop-types';
-import classNames from 'classnames';
-
-import {
-  EuiBadge,
-  EuiPopover,
-  EuiContextMenu,
-} from '../../../../src/components';
-import GlobalFilterForm from './global_filter_form';
-
-function flattenPanelTree(tree, array = []) {
-  array.push(tree);
-
-  if (tree.items) {
-    tree.items.forEach((item) => {
-      if (item.panel) {
-        flattenPanelTree(item.panel, array);
-        item.panel = item.panel.id;
-      }
-    });
-  }
-
-  return array;
-}
-
-export const GlobalFilterItem = (props) => {
-  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
-  const togglePopover = () => {
-    setIsPopoverOpen(!isPopoverOpen);
-  };
-
-  const closePopover = () => {
-    setIsPopoverOpen(false);
-  };
-
-  const deleteFilter = (e) => {
-    // Make sure it doesn't also trigger the onclick for the whole badge
-    e.stopPropagation();
-  };
-
-  const {
-    className,
-    id,
-    field,
-    operator, // eslint-disable-line no-unused-vars
-    value,
-    isDisabled,
-    isPinned,
-    isExcluded,
-    ...rest
-  } = props;
-
-  const classes = classNames(
-    'globalFilterItem',
-    {
-      'globalFilterItem-isDisabled': isDisabled,
-      'globalFilterItem-isPinned': isPinned,
-      'globalFilterItem-isExcluded': isExcluded,
-    },
-    className
-  );
-
-  let prefix = null;
-  if (isExcluded) {
-    prefix = <span>NOT </span>;
-  }
-
-  let title = `Filter: ${field}: "${value}". Select for more filter actions.`;
-  if (isPinned) {
-    title = `Pinned ${title}`;
-  } else if (isDisabled) {
-    title = `Disabled ${title}`;
-  }
-
-  const badge = (
-    <EuiBadge
-      id={id}
-      className={classes}
-      title={title}
-      iconOnClick={deleteFilter}
-      iconOnClickAriaLabel={'Delete filter'}
-      color="hollow"
-      iconType="cross"
-      iconSide="right"
-      onClick={togglePopover}
-      onClickAriaLabel="Filter actions"
-      {...rest}
-    >
-      {prefix}
-      <span>{field}: </span>
-      <span>&quot;{value}&quot;</span>
-    </EuiBadge>
-  );
-
-  const _createFilterContextMenu = (filter, button) => {
-    const selectedObject = {
-      field: [{ label: filter.field }],
-      operand: [{ label: filter.operator }],
-      values: [{ label: filter.value }],
-    };
-
-    const panelTree = {
-      id: 0,
-      items: [
-        {
-          name: `${filter.isPinned ? 'Unpin' : 'Pin across all apps'}`,
-          icon: 'pin',
-          onClick: () => {
-            closePopover();
-          },
-        },
-        {
-          name: 'Edit filter query',
-          icon: 'pencil',
-          panel: {
-            id: 1,
-            width: 400,
-            content: (
-              <div style={{ padding: 16 }}>
-                <GlobalFilterForm
-                  selectedObject={selectedObject}
-                  onAdd={closePopover}
-                  onCancel={closePopover}
-                />
-              </div>
-            ),
-          },
-        },
-        {
-          name: `${filter.isExcluded ? 'Include results' : 'Exclude results'}`,
-          icon: `${filter.isExcluded ? 'plusInCircle' : 'minusInCircle'}`,
-          onClick: () => {
-            closePopover();
-          },
-        },
-        {
-          name: `${filter.isDisabled ? 'Re-enable' : 'Temporarily disable'}`,
-          icon: `${filter.isDisabled ? 'eye' : 'eyeClosed'}`,
-          onClick: () => {
-            closePopover();
-          },
-        },
-        {
-          name: 'Delete',
-          icon: 'trash',
-          onClick: () => {
-            closePopover();
-          },
-        },
-      ],
-    };
-
-    return (
-      <EuiPopover
-        id={`popoverFor_${filter.id}`}
-        isOpen={isPopoverOpen}
-        closePopover={closePopover}
-        button={button}
-        anchorPosition="downCenter"
-        panelPaddingSize="none"
-        display="block"
-      >
-        <EuiContextMenu
-          initialPanelId={0}
-          panels={flattenPanelTree(panelTree)}
-        />
-      </EuiPopover>
-    );
-  };
-
-  return _createFilterContextMenu(props, badge);
-};
-
-GlobalFilterItem.propTypes = {
-  className: PropTypes.string,
-  id: PropTypes.string.isRequired,
-  field: PropTypes.string.isRequired,
-  operator: PropTypes.string.isRequired,
-  value: PropTypes.string.isRequired,
-  isDisabled: PropTypes.bool.isRequired,
-  isPinned: PropTypes.bool.isRequired,
-  isExcluded: PropTypes.bool.isRequired,
-};
diff --git a/src-docs/src/views/suggest/global_filter_options.js b/src-docs/src/views/suggest/global_filter_options.js
deleted file mode 100644
index 89a8dd19769..00000000000
--- a/src-docs/src/views/suggest/global_filter_options.js
+++ /dev/null
@@ -1,111 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  EuiButtonIcon,
-  EuiPopover,
-  EuiContextMenu,
-  EuiPopoverTitle,
-} from '../../../../src/components';
-
-function flattenPanelTree(tree, array = []) {
-  array.push(tree);
-
-  if (tree.items) {
-    tree.items.forEach((item) => {
-      if (item.panel) {
-        flattenPanelTree(item.panel, array);
-        item.panel = item.panel.id;
-      }
-    });
-  }
-
-  return array;
-}
-
-export default () => {
-  const [isPopoverOpen, setPopover] = useState(false);
-
-  const togglePopover = () => {
-    setPopover(!isPopoverOpen);
-  };
-
-  const closePopover = () => {
-    setPopover(false);
-  };
-
-  const panelTree = {
-    id: 0,
-    items: [
-      {
-        name: 'Enable all',
-        icon: 'eye',
-        onClick: () => {
-          closePopover();
-        },
-      },
-      {
-        name: 'Disable all',
-        icon: 'eyeClosed',
-        onClick: () => {
-          closePopover();
-        },
-      },
-      {
-        name: 'Pin all',
-        icon: 'pin',
-        onClick: () => {
-          closePopover();
-        },
-      },
-      {
-        name: 'Unpin all',
-        icon: 'pin',
-        onClick: () => {
-          closePopover();
-        },
-      },
-      {
-        name: 'Invert inclusion',
-        icon: 'invert',
-        onClick: () => {
-          closePopover();
-        },
-      },
-      {
-        name: 'Invert visibility',
-        icon: 'eye',
-        onClick: () => {
-          closePopover();
-        },
-      },
-      {
-        name: 'Remove all',
-        icon: 'trash',
-        onClick: () => {
-          closePopover();
-        },
-      },
-    ],
-  };
-
-  return (
-    <EuiPopover
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-      button={
-        <EuiButtonIcon
-          onClick={togglePopover}
-          color="text"
-          iconType="filter"
-          aria-label="Change all filters"
-          title="Change all filters"
-        />
-      }
-      anchorPosition="downCenter"
-      panelPaddingSize="none"
-    >
-      <EuiPopoverTitle paddingSize="s">Change all filters</EuiPopoverTitle>
-      <EuiContextMenu initialPanelId={0} panels={flattenPanelTree(panelTree)} />
-    </EuiPopover>
-  );
-};
diff --git a/src-docs/src/views/suggest/hashtag_popover.js b/src-docs/src/views/suggest/hashtag_popover.js
deleted file mode 100644
index a68d625f2a4..00000000000
--- a/src-docs/src/views/suggest/hashtag_popover.js
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  EuiButton,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiIcon,
-  EuiListGroup,
-  EuiListGroupItem,
-  EuiPopover,
-  EuiPopoverFooter,
-  EuiPopoverTitle,
-  EuiText,
-} from '../../../../src/components';
-
-export default (props) => {
-  const [isPopoverOpen, setPopover] = useState(false);
-
-  const togglePopover = () => {
-    setPopover(!isPopoverOpen);
-  };
-
-  const closePopover = () => {
-    setPopover(false);
-  };
-
-  const hashtagButton = (
-    <EuiButtonEmpty
-      onClick={togglePopover}
-      size="xs"
-      iconType="arrowDown"
-      aria-label="Saved Queries popover"
-      iconSide="right"
-    >
-      <EuiIcon type="number" />
-    </EuiButtonEmpty>
-  );
-
-  return (
-    <EuiPopover
-      id="popover"
-      button={hashtagButton}
-      isOpen={isPopoverOpen}
-      anchorPosition="downLeft"
-      panelPaddingSize="none"
-      closePopover={closePopover}
-    >
-      <EuiPopoverTitle paddingSize="s">SAVED QUERIES</EuiPopoverTitle>
-      <div>
-        <EuiText
-          size="s"
-          color="subdued"
-          className="savedQueryManagement__text"
-        >
-          <p>Save query text and filters that you want to use again.</p>
-        </EuiText>
-        <div className="savedQueryManagement__listWrapper">
-          <EuiListGroup className="savedQueryManagement__list" flush={true}>
-            <EuiListGroupItem
-              extraAction={{
-                color: 'danger',
-                iconType: 'trash',
-                iconSize: 's',
-              }}
-              href="#"
-              label="Popular shoes in America"
-            />
-            <EuiListGroupItem
-              extraAction={{
-                color: 'danger',
-                iconType: 'trash',
-                iconSize: 's',
-              }}
-              href="#"
-              label="Popular shirts in Canada"
-            />
-          </EuiListGroup>
-        </div>
-        {props.value !== '' ? (
-          <EuiPopoverFooter paddingSize="s">
-            <EuiFlexGroup direction="rowReverse" alignItems="center">
-              <EuiFlexItem grow={false}>
-                <EuiButton size="s" fill>
-                  Save
-                </EuiButton>
-              </EuiFlexItem>
-            </EuiFlexGroup>
-          </EuiPopoverFooter>
-        ) : undefined}
-      </div>
-    </EuiPopover>
-  );
-};
diff --git a/src-docs/src/views/suggest/playground.js b/src-docs/src/views/suggest/playground.js
deleted file mode 100644
index 5ce0ebab000..00000000000
--- a/src-docs/src/views/suggest/playground.js
+++ /dev/null
@@ -1,82 +0,0 @@
-import { PropTypes } from 'react-view';
-import { EuiSuggest } from '../../../../src/components';
-import {
-  propUtilityForPlayground,
-  generateCustomProps,
-  createOptionalEnum,
-  simulateFunction,
-  dummyFunction,
-} from '../../services/playground';
-
-export const suggestConfig = () => {
-  const docgenInfo = Array.isArray(EuiSuggest.__docgenInfo)
-    ? EuiSuggest.__docgenInfo[0]
-    : EuiSuggest.__docgenInfo;
-  const propsToUse = propUtilityForPlayground(docgenInfo.props);
-
-  const suggestions = `[
-    {
-      type: { iconType: 'kqlField', color: 'tint4' },
-      label: 'Field sample',
-    },
-    {
-      type: { iconType: 'kqlValue', color: 'tint0' },
-      label: 'Value sample',
-    },
-    {
-      type: { iconType: 'kqlSelector', color: 'tint2' },
-      label: 'Conjunction sample',
-    },
-    {
-      type: { iconType: 'kqlOperand', color: 'tint1' },
-      label: 'Operator sample',
-    },
-    {
-      type: { iconType: 'search', color: 'tint8' },
-      label: 'Recent search',
-    },
-    {
-      type: { iconType: 'save', color: 'tint3' },
-      label: 'Saved search',
-    },
-  ]`;
-  propsToUse.suggestions = {
-    ...propsToUse.suggestions,
-    value: suggestions,
-  };
-
-  propsToUse.status = {
-    ...createOptionalEnum(propsToUse.status),
-    defaultValue: 'unchanged',
-  };
-
-  propsToUse.onItemClick = simulateFunction(propsToUse.onItemClick);
-  propsToUse.onInputChange = simulateFunction(propsToUse.onInputChange);
-  propsToUse.onSearchChange = simulateFunction(propsToUse.onSearchChange);
-
-  propsToUse.maxHeight = {
-    ...propsToUse.maxHeight,
-    type: PropTypes.String,
-  };
-
-  return {
-    config: {
-      componentName: 'EuiSuggest',
-      props: propsToUse,
-      scope: {
-        EuiSuggest,
-      },
-      imports: {
-        '@elastic/eui': {
-          named: ['EuiSuggest'],
-        },
-      },
-      customProps: {
-        ...generateCustomProps(['suggestions']),
-        onItemClick: dummyFunction,
-        onInputChange: dummyFunction,
-        onSearchChange: dummyFunction,
-      },
-    },
-  };
-};
diff --git a/src-docs/src/views/suggest/saved_queries.js b/src-docs/src/views/suggest/saved_queries.js
deleted file mode 100644
index 57e61eede71..00000000000
--- a/src-docs/src/views/suggest/saved_queries.js
+++ /dev/null
@@ -1,156 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
-  EuiSuggest,
-  EuiSuperDatePicker,
-} from '../../../../src/components';
-
-import { GlobalFilterBar } from './global_filter_bar';
-import GlobalFilterOptions from './global_filter_options';
-import HashtagPopover from './hashtag_popover';
-
-const shortDescription = 'This is the description';
-
-const sampleItems = [
-  {
-    type: { iconType: 'kqlField', color: 'tint4' },
-    label: 'Field sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlValue', color: 'tint0' },
-    label: 'Value sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlSelector', color: 'tint2' },
-    label: 'Conjunction sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlOperand', color: 'tint1' },
-    label: 'Operator sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'search', color: 'tint8' },
-    label: 'Recent search',
-  },
-  {
-    type: { iconType: 'save', color: 'tint3' },
-    label: 'Saved search',
-  },
-];
-
-export default () => {
-  const status = 'unchanged';
-  const [value, setValue] = useState('');
-  const [hideDatepicker, setHide] = useState(false);
-  const filters = [
-    {
-      id: 'filter0',
-      field: '@tags.keyword',
-      operator: 'IS',
-      value: 'value',
-      isDisabled: false,
-      isPinned: true,
-      isExcluded: false,
-    },
-    {
-      id: 'filter1',
-      field:
-        'Filter with a very long title to test if the badge will properly get truncated in the separate set of filter badges that are not quite as long but man does it really need to be long',
-      operator: 'IS',
-      value: 'value',
-      isDisabled: true,
-      isPinned: false,
-      isExcluded: false,
-    },
-    {
-      id: 'filter2',
-      field: '@tags.keyword',
-      operator: 'IS NOT',
-      value: 'value',
-      isDisabled: false,
-      isPinned: true,
-      isExcluded: true,
-    },
-    {
-      id: 'filter3',
-      field: '@tags.keyword',
-      operator: 'IS',
-      value: 'value',
-      isDisabled: false,
-      isPinned: false,
-      isExcluded: false,
-    },
-  ];
-
-  const onFieldFocus = () => {
-    setHide(true);
-  };
-
-  const onFieldBlur = () => {
-    setHide(false);
-  };
-
-  const getInputValue = (val) => {
-    setValue(val);
-  };
-
-  const onItemClick = (item) => {
-    console.log(item);
-  };
-
-  const onTimeChange = (dateRange) => {
-    console.log(dateRange);
-  };
-
-  const append = <EuiButtonEmpty>KQL</EuiButtonEmpty>;
-
-  return (
-    <div className="savedQueriesInput">
-      <EuiFlexGroup gutterSize="s">
-        <EuiFlexItem>
-          <EuiSuggest
-            status={status}
-            onFocus={onFieldFocus}
-            onBlur={onFieldBlur}
-            prepend={<HashtagPopover value={value} />}
-            append={append}
-            aria-label="Filter"
-            suggestions={sampleItems}
-            onItemClick={onItemClick}
-            onInputChange={getInputValue}
-          />
-        </EuiFlexItem>
-        <EuiFlexItem grow={false} className="savedQueriesInput__datepicker">
-          <EuiSuperDatePicker
-            width="auto"
-            isQuickSelectOnly={hideDatepicker}
-            onTimeChange={onTimeChange}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-      <EuiFlexGroup
-        className="globalFilterGroup"
-        gutterSize="none"
-        alignItems="flexStart"
-        responsive={false}
-      >
-        <EuiFlexItem className="globalFilterGroup__branch" grow={false}>
-          <GlobalFilterOptions />
-        </EuiFlexItem>
-        <EuiFlexItem className="globalFilterGroup__filterFlexItem">
-          <GlobalFilterBar
-            className="globalFilterGroup__filterBar"
-            filters={filters}
-          />
-        </EuiFlexItem>
-      </EuiFlexGroup>
-    </div>
-  );
-};
diff --git a/src-docs/src/views/suggest/suggest.tsx b/src-docs/src/views/suggest/suggest.tsx
deleted file mode 100644
index 2d1da494e5a..00000000000
--- a/src-docs/src/views/suggest/suggest.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { useState } from 'react';
-
-import {
-  EuiRadioGroup,
-  EuiSuggest,
-  EuiSpacer,
-  EuiFormRow,
-  EuiSuggestionProps,
-} from '../../../../src/components';
-
-import { EuiSuggestStatus } from '../../../../src/components/suggest/types';
-
-import { htmlIdGenerator } from '../../../../src/services';
-
-const shortDescription = 'This is the description';
-
-const sampleItems = [
-  {
-    type: { iconType: 'kqlField', color: 'tint4' },
-    label: 'Field sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlValue', color: 'tint0' },
-    label: 'Value sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlSelector', color: 'tint2' },
-    label: 'Conjunction sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlOperand', color: 'tint1' },
-    label: 'Operator sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'search', color: 'tint8' },
-    label: 'Recent search',
-  },
-  {
-    type: { iconType: 'save', color: 'tint3' },
-    label: 'Saved search',
-  },
-];
-
-const idPrefix = htmlIdGenerator()();
-
-export default () => {
-  const radios: Array<{
-    id: string;
-    value: EuiSuggestStatus;
-    label: string;
-  }> = [
-    { id: `${idPrefix}0`, value: 'unchanged', label: 'No new changes' },
-    { id: `${idPrefix}1`, value: 'unsaved', label: 'Not yet saved' },
-    { id: `${idPrefix}2`, value: 'saved', label: 'Saved' },
-    { id: `${idPrefix}3`, value: 'loading', label: 'Loading' },
-  ];
-  const [status, setStatus] = useState<EuiSuggestStatus>('unchanged');
-  const [radioIdSelected, setSelectedId] = useState(`${idPrefix}0`);
-
-  const onStatusChange = (optionId: string) => {
-    setSelectedId(optionId);
-    setStatus(radios.find((x) => x.id === optionId)!.value);
-  };
-
-  const onItemClick = (item: EuiSuggestionProps) => {
-    console.log(item);
-  };
-
-  return (
-    <div>
-      <EuiRadioGroup
-        options={radios}
-        idSelected={radioIdSelected}
-        onChange={(id) => onStatusChange(id)}
-      />
-      <EuiSpacer size="xl" />
-      <EuiFormRow label="Suggest" id={idPrefix}>
-        <EuiSuggest
-          fullWidth
-          aria-labelledby={`${idPrefix}-label`}
-          status={status}
-          onInput={() => {}}
-          onItemClick={onItemClick}
-          placeholder="Enter query to display suggestions"
-          suggestions={sampleItems}
-        />
-      </EuiFormRow>
-    </div>
-  );
-};
diff --git a/src-docs/src/views/suggest/suggest_example.js b/src-docs/src/views/suggest/suggest_example.js
deleted file mode 100644
index d243a7fe4b1..00000000000
--- a/src-docs/src/views/suggest/suggest_example.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { Link } from 'react-router-dom';
-
-import { EuiCallOut, EuiLink } from '../../../../src/components';
-
-export const SuggestExample = {
-  title: 'Suggest',
-  isDeprecated: true,
-  sections: [
-    {
-      text: (
-        <EuiCallOut
-          color="danger"
-          iconType="warning"
-          title="EuiSuggest has been scheduled for deprecation"
-        >
-          <p>
-            <strong>EuiSuggest</strong> is being deprecated due to low usage and
-            high overlap with other existing EUI components.
-          </p>
-          <p>
-            {' '}
-            We recommend using{' '}
-            <Link to="/forms/selectable">
-              <strong>EuiSelectable</strong>
-            </Link>{' '}
-            instead, or{' '}
-            <EuiLink
-              href="https://github.com/elastic/eui/tree/main/src/components/suggest"
-              target="_blank"
-            >
-              copying the component to your application
-            </EuiLink>{' '}
-            for usage if necessary. The component will be permanently removed in
-            October 2023.
-          </p>
-        </EuiCallOut>
-      ),
-    },
-  ],
-};
diff --git a/src-docs/src/views/suggest/suggest_item.tsx b/src-docs/src/views/suggest/suggest_item.tsx
deleted file mode 100644
index daa49a6147f..00000000000
--- a/src-docs/src/views/suggest/suggest_item.tsx
+++ /dev/null
@@ -1,102 +0,0 @@
-import React from 'react';
-
-import { EuiSuggestItem, EuiSuggest } from '../../../../src/components';
-
-const shortDescription = 'This is the description';
-
-const sampleItems = [
-  {
-    type: { iconType: 'kqlField', color: 'tint5' },
-    label: 'Field sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlValue', color: 'tint0' },
-    label: 'Value sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlSelector', color: 'tint3' },
-    label: 'Conjunction sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlOperand', color: 'tint1' },
-    label: 'Operator sample',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'search', color: 'tint10' },
-    label: 'Recent search',
-  },
-  {
-    type: { iconType: 'save', color: 'tint7' },
-    label: 'Saved query',
-  },
-];
-
-const customWidthItems = [
-  {
-    type: { iconType: 'kqlField', color: 'tint5' },
-    label: 'Field sample with label at 30%',
-    labelWidth: '30',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlField', color: 'tint5' },
-    label: 'Field sample with label at 50%',
-    labelWidth: '50',
-    description: shortDescription,
-  },
-  {
-    type: { iconType: 'kqlField', color: 'tint5' },
-    label: 'Field sample with label at 80%',
-    labelWidth: '80',
-    description: shortDescription,
-  },
-];
-
-const moreItems = [
-  {
-    type: { iconType: 'kqlValue', color: 'tint0' },
-    label: 'Items with no description will expand their label',
-  },
-  {
-    type: { iconType: 'kqlValue', color: 'tint0' },
-    label: 'Item with a description that wraps',
-    description:
-      'This is a long description. Fusce euismod dui eu metus sagittis molestie.',
-    truncate: false,
-  },
-];
-
-const allItems = sampleItems.concat(customWidthItems).concat(moreItems);
-
-export default ({
-  withInput,
-  fullWidth,
-  virtualized,
-}: {
-  withInput: boolean;
-  fullWidth: boolean;
-  virtualized: boolean;
-}) => (
-  <>
-    {withInput ? (
-      <EuiSuggest
-        fullWidth={fullWidth}
-        aria-label="Suggest"
-        onInput={() => {}}
-        placeholder="Enter query to display suggestions"
-        isVirtualized={virtualized}
-        suggestions={allItems}
-      />
-    ) : (
-      <div style={{ maxWidth: fullWidth ? undefined : '400px' }}>
-        {allItems.map((item, index) => (
-          <EuiSuggestItem key={index} {...item} />
-        ))}
-      </div>
-    )}
-  </>
-);
diff --git a/src-docs/src/views/suggest/suggest_item_example.tsx b/src-docs/src/views/suggest/suggest_item_example.tsx
deleted file mode 100644
index 78dd78ed28d..00000000000
--- a/src-docs/src/views/suggest/suggest_item_example.tsx
+++ /dev/null
@@ -1,58 +0,0 @@
-import React, { useState } from 'react';
-
-import { EuiSwitch, EuiSuggestItem } from '../../../../src/components';
-import { GuideSection } from '../../components/guide_section/guide_section';
-import { GuideSectionTypes } from '../../components/guide_section/guide_section_types';
-
-import SuggestItem from './suggest_item';
-const suggestItemSource = require('!!raw-loader!./suggest_item');
-
-export default () => {
-  const [fullWidth, setFullWidth] = useState(false);
-  const [withInput, setWithInput] = useState(false);
-  const [virtualized, setVirtualized] = useState(false);
-
-  return (
-    <>
-      <EuiSwitch
-        label="Full width"
-        checked={fullWidth}
-        onChange={(e) => setFullWidth(e.target.checked)}
-      />{' '}
-      &emsp;
-      <EuiSwitch
-        label="In dropdown"
-        checked={withInput}
-        onChange={(e) => {
-          const checked = e.target.checked;
-          setWithInput(checked);
-          setVirtualized((isSet) => (checked ? isSet : false));
-        }}
-      />{' '}
-      &emsp;
-      <EuiSwitch
-        label="Virtualized"
-        checked={virtualized}
-        disabled={!withInput}
-        onChange={(e) => setVirtualized(e.target.checked)}
-      />{' '}
-      &emsp;
-      <GuideSection
-        demo={
-          <SuggestItem
-            withInput={withInput}
-            fullWidth={fullWidth}
-            virtualized={virtualized}
-          />
-        }
-        source={[
-          {
-            type: GuideSectionTypes.JS,
-            code: suggestItemSource,
-          },
-        ]}
-        props={{ EuiSuggestItem }}
-      />
-    </>
-  );
-};
diff --git a/src-docs/src/views/super_date_picker/super_date_picker_example.js b/src-docs/src/views/super_date_picker/super_date_picker_example.js
index 95e194be0de..1f3b6b36bed 100644
--- a/src-docs/src/views/super_date_picker/super_date_picker_example.js
+++ b/src-docs/src/views/super_date_picker/super_date_picker_example.js
@@ -337,8 +337,8 @@ if (!endMoment || !endMoment.isValid()) {
           The following is a demo pattern of how to layout the{' '}
           <strong>EuiSuperDatePicker</strong> alongside Elastic&apos;s KQL
           search bar using{' '}
-          <Link to="/forms/suggest">
-            <strong>EuiSuggest</strong>
+          <Link to="/forms/search-bar">
+            <strong>EuiSearchBar</strong>
           </Link>{' '}
           and shrinking to fit when the search bar is in focus.
         </p>
diff --git a/src-docs/src/views/super_date_picker/super_date_picker_pattern.tsx b/src-docs/src/views/super_date_picker/super_date_picker_pattern.tsx
index c9eb9200259..663917ca1ed 100644
--- a/src-docs/src/views/super_date_picker/super_date_picker_pattern.tsx
+++ b/src-docs/src/views/super_date_picker/super_date_picker_pattern.tsx
@@ -5,7 +5,7 @@ import {
   EuiButtonIcon,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiSuggest,
+  EuiSearchBar,
   EuiSuperDatePicker,
   EuiSuperDatePickerProps,
   OnRefreshChangeProps,
@@ -14,13 +14,6 @@ import {
   EuiOutsideClickDetector,
 } from '../../../../src';
 
-const sampleItems = [
-  {
-    type: { iconType: 'kqlField', color: 'tint4' },
-    label: 'Field sample',
-  },
-];
-
 export default () => {
   const [recentlyUsedRanges, setRecentlyUsedRanges] = useState<
     NonNullable<EuiSuperDatePickerProps['recentlyUsedRanges']>
@@ -82,15 +75,18 @@ export default () => {
             onOutsideClick={() => setShowQuickSelectOnly(false)}
             isDisabled={!showQuickSelectOnly}
           >
-            <EuiSuggest
-              onFocus={() => setShowQuickSelectOnly(true)}
-              onBlur={() => setShowQuickSelectOnly(false)}
-              prepend={
-                <EuiButtonIcon aria-label="Saved searches" iconType="save" />
-              }
-              append={<EuiButtonEmpty>KQL</EuiButtonEmpty>}
-              aria-label="Filter using KQL"
-              suggestions={sampleItems}
+            <EuiSearchBar
+              box={{
+                onClick: () => setShowQuickSelectOnly(true),
+                onFocus: () => setShowQuickSelectOnly(true),
+                onBlur: () => setShowQuickSelectOnly(false),
+                prepend: (
+                  <EuiButtonIcon aria-label="Saved searches" iconType="save" />
+                ),
+                append: <EuiButtonEmpty>KQL</EuiButtonEmpty>,
+                'aria-label': 'Filter using KQL',
+                placeholder: 'type:visualization -dashboard',
+              }}
             />
           </EuiOutsideClickDetector>
         </EuiFlexItem>
diff --git a/src-docs/src/views/tables/auto/auto.tsx b/src-docs/src/views/tables/auto/auto.tsx
index 0344bf816b0..80c861df198 100644
--- a/src-docs/src/views/tables/auto/auto.tsx
+++ b/src-docs/src/views/tables/auto/auto.tsx
@@ -83,11 +83,12 @@ const columns: Array<EuiTableFieldDataColumnType<User>> = [
   {
     field: 'jobTitle',
     name: 'Job title',
+    truncateText: true,
   },
   {
     field: 'address',
     name: 'Address',
-    truncateText: true,
+    truncateText: { lines: 2 },
   },
 ];
 
@@ -147,11 +148,12 @@ const alignButtons: EuiButtonGroupOptionProps[] = [
 
 export default () => {
   const [tableLayout, setTableLayout] = useState('tableLayoutFixed');
-  const [vAlign, setVAlign] = useState('columnVAlignTop');
+  const [vAlign, setVAlign] = useState('columnVAlignMiddle');
   const [align, setAlign] = useState('columnAlignLeft');
 
   const onTableLayoutChange = (id: string, value: string) => {
     setTableLayout(id);
+    columns[4].width = value === 'custom' ? '100px' : undefined;
     columns[5].width = value === 'custom' ? '20%' : undefined;
   };
 
@@ -169,14 +171,16 @@ export default () => {
 
   switch (tableLayout) {
     case 'tableLayoutFixed':
-      callOutText = 'Address has truncateText set to true';
+      callOutText =
+        'Job title has truncateText set to true. Address is set to { lines: 2 }';
       break;
     case 'tableLayoutAuto':
       callOutText =
-        'Address has truncateText set to true which is not applied since tableLayout is set to auto';
+        'Job title will not wrap or truncate since tableLayout is set to auto. Address will truncate if necessary';
       break;
     case 'tableLayoutCustom':
-      callOutText = 'Address has truncateText set to true and width set to 20%';
+      callOutText =
+        'Job title has a custom column width of 100px. Address has a custom column width of 20%';
       break;
   }
 
diff --git a/src-docs/src/views/text_truncate/multi_line.tsx b/src-docs/src/views/text_truncate/multi_line.tsx
new file mode 100644
index 00000000000..f341584a839
--- /dev/null
+++ b/src-docs/src/views/text_truncate/multi_line.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { css } from '@emotion/react';
+import { faker } from '@faker-js/faker';
+
+import { EuiPanel, EuiText, EuiTextBlockTruncate } from '../../../../src';
+
+export default () => {
+  return (
+    <EuiText>
+      <EuiPanel
+        css={css`
+          overflow: auto;
+          resize: horizontal; /* Not all browsers support resize logical properties yet */
+          resize: inline;
+          inline-size: 50ch;
+          max-inline-size: 100%;
+        `}
+      >
+        <EuiTextBlockTruncate lines={3}>
+          {faker.lorem.lines(10)}
+        </EuiTextBlockTruncate>
+      </EuiPanel>
+    </EuiText>
+  );
+};
diff --git a/src-docs/src/views/text_truncate/text_truncate_example.js b/src-docs/src/views/text_truncate/text_truncate_example.js
index a38a75383b8..a463fba56b9 100644
--- a/src-docs/src/views/text_truncate/text_truncate_example.js
+++ b/src-docs/src/views/text_truncate/text_truncate_example.js
@@ -9,6 +9,7 @@ import {
   EuiCode,
   EuiCallOut,
   EuiTextTruncate,
+  EuiTextBlockTruncate,
 } from '../../../../src/components';
 
 import Truncation from './truncation';
@@ -29,10 +30,13 @@ const renderPropSource = require('!!raw-loader!./render_prop');
 import Performance from './performance';
 const performanceSource = require('!!raw-loader!./performance');
 
+import MultiLine from './multi_line';
+const multiLineSource = require('!!raw-loader!./multi_line');
+
 export const TextTruncateExample = {
   title: 'Text truncation',
   isBeta: true,
-  intro: (
+  notice: (
     <EuiCallOut iconType="beta" title="Beta development" color="warning">
       <strong>EuiTextTruncate</strong> is a beta component that is still
       undergoing <Link to="#performance">performance investigation</Link>. We
@@ -40,259 +44,308 @@ export const TextTruncateExample = {
       per page).
     </EuiCallOut>
   ),
-  sections: [
+  pages: [
     {
-      source: [
+      title: 'Single line',
+      sections: [
         {
-          type: GuideSectionTypes.JS,
-          code: truncationSource,
+          source: [
+            {
+              type: GuideSectionTypes.JS,
+              code: truncationSource,
+            },
+          ],
+          text: (
+            <>
+              <p>
+                <strong>EuiTextTruncate</strong> provides customizable and
+                size-aware single line text truncation.
+              </p>
+              <p>
+                The four truncation styles supported are{' '}
+                <EuiCode>start</EuiCode>, <EuiCode>end</EuiCode>,{' '}
+                <EuiCode>startEnd</EuiCode>, and <EuiCode>middle</EuiCode>.
+                Resize the below demo to see how different truncation styles
+                respond to dynamic width changes.
+              </p>
+            </>
+          ),
+          demo: <Truncation />,
+          props: { EuiTextTruncate },
+          snippet: `<EuiTextTruncate text="Hello world" />`,
         },
-      ],
-      text: (
-        <>
-          <p>
-            <strong>EuiTextTruncate</strong> provides customizable and
-            size-aware single line text truncation.
-          </p>
-          <p>
-            The four truncation styles supported are <EuiCode>start</EuiCode>,{' '}
-            <EuiCode>end</EuiCode>, <EuiCode>startEnd</EuiCode>, and{' '}
-            <EuiCode>middle</EuiCode>. Resize the below demo to see how
-            different truncation styles respond to dynamic width changes.
-          </p>
-        </>
-      ),
-      demo: <Truncation />,
-      props: { EuiTextTruncate },
-      snippet: `<EuiTextTruncate text="Hello world" />`,
-    },
-    {
-      text: (
-        <>
-          <EuiCallOut
-            iconType="accessibility"
-            title="Accessibility and comparison to text-overflow"
-          >
-            <p>
-              <strong>EuiTextTruncate</strong> attempts to mimic the behavior of{' '}
-              <EuiCode>text-overflow: ellipsis</EuiCode> as closely as possible,
-              although there may be edge cases and cross-browser issues, as this
-              is essentially a{' '}
-              <EuiLink
-                href="https://github.com/w3c/csswg-drafts/issues/3937"
-                target="_blank"
+        {
+          text: (
+            <>
+              <EuiCallOut
+                iconType="accessibility"
+                title="Accessibility and comparison to text-overflow"
               >
-                browser implementation
-              </EuiLink>{' '}
-              we are trying to polyfill.
+                <p>
+                  <strong>EuiTextTruncate</strong> attempts to mimic the
+                  behavior of <EuiCode>text-overflow: ellipsis</EuiCode> as
+                  closely as possible, although there may be edge cases and
+                  cross-browser issues, as this is essentially a{' '}
+                  <EuiLink
+                    href="https://github.com/w3c/csswg-drafts/issues/3937"
+                    target="_blank"
+                  >
+                    browser implementation
+                  </EuiLink>{' '}
+                  we are trying to polyfill.
+                </p>
+                <ul>
+                  <li>
+                    Screen readers should ignore the truncated text and only
+                    read out the full text.
+                  </li>
+                  <li>
+                    Sighted mouse users will be able to briefly hover over the
+                    truncated text and read the full text in a native browser
+                    title tooltip.
+                  </li>
+                  <li>
+                    For mouse users, double clicking to select the truncated
+                    line should allow copying the full untruncated text.
+                  </li>
+                </ul>
+              </EuiCallOut>
+            </>
+          ),
+        },
+        {
+          title: 'Custom ellipsis',
+          source: [
+            {
+              type: GuideSectionTypes.JS,
+              code: ellipsisSource,
+            },
+          ],
+          text: (
+            <p>
+              By default, <strong>EuiTextTruncate</strong> uses the unicode
+              character for horizontal ellipis. It can be customized via the{' '}
+              <EuiCode>ellipsis</EuiCode> prop as necessary (e.g. for specific
+              languages, extra punctuation, etc).
             </p>
-            <ul>
-              <li>
-                Screen readers should ignore the truncated text and only read
-                out the full text.
-              </li>
-              <li>
-                Sighted mouse users will be able to briefly hover over the
-                truncated text and read the full text in a native browser title
-                tooltip.
-              </li>
-              <li>
-                For mouse users, double clicking to select the truncated line
-                should allow copying the full untruncated text.
-              </li>
-            </ul>
-          </EuiCallOut>
-        </>
-      ),
-    },
-    {
-      title: 'Custom ellipsis',
-      source: [
+          ),
+          demo: <Ellipsis />,
+          props: { EuiTextTruncate },
+          snippet: `<EuiTextTruncate text="Hello world" ellipsis="[...]" />`,
+        },
+        {
+          title: 'Truncation offset',
+          source: [
+            {
+              type: GuideSectionTypes.JS,
+              code: truncationOffsetSource,
+            },
+          ],
+          text: (
+            <p>
+              The <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> truncation
+              types support a <EuiCode>truncationOffset</EuiCode> property that
+              allows preserving a specified number of characters at either the
+              start or end of the text. Increase or decrease the number control
+              below to see the prop in action.
+            </p>
+          ),
+          demo: <TruncationOffset />,
+          props: { EuiTextTruncate },
+          snippet: `<EuiTextTruncate
+      text="Hello world"
+      truncation="start"
+      truncationOffset={5}
+    />`,
+        },
         {
-          type: GuideSectionTypes.JS,
-          code: ellipsisSource,
+          title: 'Truncation position',
+          source: [
+            {
+              type: GuideSectionTypes.JS,
+              code: truncationPositionSource,
+            },
+          ],
+          text: (
+            <>
+              <p>
+                The <EuiCode>startEnd</EuiCode> truncation type supports a{' '}
+                <EuiCode>truncationPosition</EuiCode> property. By default,{' '}
+                <EuiCode>startEnd</EuiCode> anchors the displayed text to the
+                middle of the string. However, you may prefer to display a
+                specific subsection of the full text closer to the start or end,
+                which this prop allows.
+              </p>
+              <p>
+                This behavior will intelligently detect when positions are near
+                enough to the start or end of the text to omit leading or
+                trailing ellipses when necessary.
+              </p>
+              <p>
+                Increase or decrease the number control below to see the prop in
+                action.
+              </p>
+            </>
+          ),
+          demo: <TruncationPosition />,
+          props: { EuiTextTruncate },
+          snippet: `<EuiTextTruncate
+      text="Hello world"
+      truncation="startEnd"
+      truncationPosition={10}
+    />`,
         },
-      ],
-      text: (
-        <p>
-          By default, <strong>EuiTextTruncate</strong> uses the unicode
-          character for horizontal ellipis. It can be customized via the{' '}
-          <EuiCode>ellipsis</EuiCode> prop as necessary (e.g. for specific
-          languages, extra punctuation, etc).
-        </p>
-      ),
-      demo: <Ellipsis />,
-      props: { EuiTextTruncate },
-      snippet: `<EuiTextTruncate text="Hello world" ellipsis="[...]" />`,
-    },
-    {
-      title: 'Truncation offset',
-      source: [
         {
-          type: GuideSectionTypes.JS,
-          code: truncationOffsetSource,
+          title: 'Render prop',
+          source: [
+            {
+              type: GuideSectionTypes.JS,
+              code: renderPropSource,
+            },
+          ],
+          text: (
+            <>
+              <p>
+                By default, <strong>EuiTextTruncate</strong> will automatically
+                output the calculated truncated string. You can optionally
+                override this by passing a render prop function to{' '}
+                <EuiCode>children</EuiCode>, which allows for more flexible text
+                rendering.
+              </p>
+              <p>
+                The below example demonstrates a primary use case for the render
+                prop and the <EuiCode>truncationPosition</EuiCode> prop. If a
+                user is searching for a specific word in truncated text, you can
+                use{' '}
+                <Link to="/#/utilities/highlight-and-mark">
+                  <strong>EuiHighlight</strong> or <strong>EuiMark</strong>
+                </Link>{' '}
+                to highlight the search term, and passing the index of the found
+                word to <EuiCode>truncationPosition</EuiCode> ensures the search
+                term is always visible to the user.
+              </p>
+              <EuiCallOut
+                color="warning"
+                iconType="warning"
+                title="Do not render excessive extra content alongside the text. The sizing logic will not account for it, and the truncation calculations will be off."
+              />
+            </>
+          ),
+          demo: <RenderProp />,
+          props: { EuiTextTruncate },
+          snippet: `<EuiTextTruncate text="Hello world">
+      {(text) => <EuiMark>{text}</EuiMark>}
+    </EuiTextTruncate>`,
         },
-      ],
-      text: (
-        <p>
-          The <EuiCode>start</EuiCode> and <EuiCode>end</EuiCode> truncation
-          types support a <EuiCode>truncationOffset</EuiCode> property that
-          allows preserving a specified number of characters at either the start
-          or end of the text. Increase or decrease the number control below to
-          see the prop in action.
-        </p>
-      ),
-      demo: <TruncationOffset />,
-      props: { EuiTextTruncate },
-      snippet: `<EuiTextTruncate
-  text="Hello world"
-  truncation="start"
-  truncationOffset={5}
-/>`,
-    },
-    {
-      title: 'Truncation position',
-      source: [
         {
-          type: GuideSectionTypes.JS,
-          code: truncationPositionSource,
+          title: 'Performance',
+          text: (
+            <>
+              <p>
+                <strong>EuiTextTruncate</strong> uses a canvas element under the
+                hood to manipulate text and calculate whether the text width
+                fits within the available width. Additionally, by default, the
+                component will include its own resize observer in order to react
+                to width changes.
+              </p>
+              <p>
+                These functionalities can cause performance issues if the
+                component is rendered over hundreds of times per page, and we
+                would strongly recommend using caution when doing so. Several
+                escape hatches are available for performance improvements:
+              </p>
+              <ol
+                css={({ euiTheme }) =>
+                  css`
+                    li:not(:last-child) {
+                      margin-block-end: ${euiTheme.size.m};
+                    }
+                  `
+                }
+              >
+                <li>
+                  Pass a <EuiCode>width</EuiCode> prop to skip initializing a
+                  resize observer for each component instance. For text within a
+                  container of the same width, we would strongly recommend
+                  applying a single resize observer to the parent container and
+                  passing that width to all child{' '}
+                  <strong>EuiTextTruncate</strong>s. Additionally, you may want
+                  to consider{' '}
+                  <EuiLink
+                    href="https://lodash.com/docs/#throttle"
+                    target="_blank"
+                  >
+                    throttling
+                  </EuiLink>{' '}
+                  any resize observers or width-based logic.
+                </li>
+                <li>
+                  Use{' '}
+                  <EuiLink
+                    href="https://github.com/bvaughn/react-window"
+                    target="_blank"
+                  >
+                    virtualization
+                  </EuiLink>{' '}
+                  to reduce the number of rendered elements visible at any given
+                  time. For over hundreds of instances, this will generally be
+                  the most effective solution for performance or rerender
+                  issues.
+                </li>
+                <li>
+                  If necessary, consider pulling out the underlying{' '}
+                  <EuiCode>TruncationUtils</EuiCode> and re-using the same
+                  canvas context, as opposed to repeatedly creating new ones.
+                </li>
+              </ol>
+            </>
+          ),
+          demo: <Performance />,
+          source: [{ type: GuideSectionTypes.TSX, code: performanceSource }],
+          props: { EuiTextTruncate },
+          snippet: `<EuiTextTruncate
+      text="Hello world"
+      width={width}
+    />`,
         },
       ],
-      text: (
-        <>
-          <p>
-            The <EuiCode>startEnd</EuiCode> truncation type supports a{' '}
-            <EuiCode>truncationPosition</EuiCode> property. By default,{' '}
-            <EuiCode>startEnd</EuiCode> anchors the displayed text to the middle
-            of the string. However, you may prefer to display a specific
-            subsection of the full text closer to the start or end, which this
-            prop allows.
-          </p>
-          <p>
-            This behavior will intelligently detect when positions are near
-            enough to the start or end of the text to omit leading or trailing
-            ellipses when necessary.
-          </p>
-          <p>
-            Increase or decrease the number control below to see the prop in
-            action.
-          </p>
-        </>
-      ),
-      demo: <TruncationPosition />,
-      props: { EuiTextTruncate },
-      snippet: `<EuiTextTruncate
-  text="Hello world"
-  truncation="startEnd"
-  truncationPosition={10}
-/>`,
     },
     {
-      title: 'Render prop',
-      source: [
+      title: 'Multi line',
+      sections: [
         {
-          type: GuideSectionTypes.JS,
-          code: renderPropSource,
+          source: [
+            {
+              type: GuideSectionTypes.JS,
+              code: multiLineSource,
+            },
+          ],
+          text: (
+            <>
+              <p>
+                <strong>EuiTextBlockTruncate</strong> allows truncating text
+                after a set number of wrapping <EuiCode>lines</EuiCode>.
+              </p>
+              <p>
+                Please note: This component is currently a quick shortcut for
+                the{' '}
+                <EuiLink
+                  href="https://css-tricks.com/line-clampin"
+                  target="_blank"
+                >
+                  CSS line-clamp
+                </EuiLink>{' '}
+                property. This means that truncating at the end of the text is
+                the default, and there are currently no plans to add JavaScript
+                customization for this behavior.
+              </p>
+            </>
+          ),
+          demo: <MultiLine />,
+          props: { EuiTextBlockTruncate },
+          snippet: `<EuiTextBlockTruncate lines={3}>Hello world</EuiTextBlockTruncate>`,
         },
       ],
-      text: (
-        <>
-          <p>
-            By default, <strong>EuiTextTruncate</strong> will automatically
-            output the calculated truncated string. You can optionally override
-            this by passing a render prop function to{' '}
-            <EuiCode>children</EuiCode>, which allows for more flexible text
-            rendering.
-          </p>
-          <p>
-            The below example demonstrates a primary use case for the render
-            prop and the <EuiCode>truncationPosition</EuiCode> prop. If a user
-            is searching for a specific word in truncated text, you can use{' '}
-            <Link to="/#/utilities/highlight-and-mark">
-              <strong>EuiHighlight</strong> or <strong>EuiMark</strong>
-            </Link>{' '}
-            to highlight the search term, and passing the index of the found
-            word to <EuiCode>truncationPosition</EuiCode> ensures the search
-            term is always visible to the user.
-          </p>
-          <EuiCallOut
-            color="warning"
-            iconType="warning"
-            title="Do not render excessive extra content alongside the text. The sizing logic will not account for it, and the truncation calculations will be off."
-          />
-        </>
-      ),
-      demo: <RenderProp />,
-      props: { EuiTextTruncate },
-      snippet: `<EuiTextTruncate text="Hello world">
-  {(text) => <EuiMark>{text}</EuiMark>}
-</EuiTextTruncate>`,
-    },
-    {
-      title: 'Performance',
-      text: (
-        <>
-          <p>
-            <strong>EuiTextTruncate</strong> uses a canvas element under the
-            hood to manipulate text and calculate whether the text width fits
-            within the available width. Additionally, by default, the component
-            will include its own resize observer in order to react to width
-            changes.
-          </p>
-          <p>
-            These functionalities can cause performance issues if the component
-            is rendered over hundreds of times per page, and we would strongly
-            recommend using caution when doing so. Several escape hatches are
-            available for performance improvements:
-          </p>
-          <ol
-            css={({ euiTheme }) =>
-              css`
-                li:not(:last-child) {
-                  margin-block-end: ${euiTheme.size.m};
-                }
-              `
-            }
-          >
-            <li>
-              Pass a <EuiCode>width</EuiCode> prop to skip initializing a resize
-              observer for each component instance. For text within a container
-              of the same width, we would strongly recommend applying a single
-              resize observer to the parent container and passing that width to
-              all child <strong>EuiTextTruncate</strong>s. Additionally, you may
-              want to consider{' '}
-              <EuiLink href="https://lodash.com/docs/#throttle" target="_blank">
-                throttling
-              </EuiLink>{' '}
-              any resize observers or width-based logic.
-            </li>
-            <li>
-              Use{' '}
-              <EuiLink
-                href="https://github.com/bvaughn/react-window"
-                target="_blank"
-              >
-                virtualization
-              </EuiLink>{' '}
-              to reduce the number of rendered elements visible at any given
-              time. For over hundreds of instances, this will generally be the
-              most effective solution for performance or rerender issues.
-            </li>
-            <li>
-              If necessary, consider pulling out the underlying{' '}
-              <EuiCode>TruncationUtils</EuiCode> and re-using the same canvas
-              context, as opposed to repeatedly creating new ones.
-            </li>
-          </ol>
-        </>
-      ),
-      demo: <Performance />,
-      source: [{ type: GuideSectionTypes.TSX, code: performanceSource }],
-      props: { EuiTextTruncate },
-      snippet: `<EuiTextTruncate
-  text="Hello world"
-  width={width}
-/>`,
     },
   ],
 };
diff --git a/src-docs/src/views/theme/typography/_typography_js.tsx b/src-docs/src/views/theme/typography/_typography_js.tsx
index 354c7c5bd34..883d93b9e43 100644
--- a/src-docs/src/views/theme/typography/_typography_js.tsx
+++ b/src-docs/src/views/theme/typography/_typography_js.tsx
@@ -10,6 +10,8 @@ import {
   EuiPanel,
   EuiSpacer,
   EuiText,
+  EuiCallOut,
+  EuiLink,
 } from '../../../../../src/components';
 
 import {
@@ -285,6 +287,29 @@ export const FontScaleValuesJS = () => {
           />
         </EuiDescribedFormGroup>
       </EuiPanel>
+      <EuiSpacer size="m" />
+      <EuiCallOut
+        iconType="accessibility"
+        title={
+          <>
+            We strongly recommend using relative (<EuiCode>rem</EuiCode> or{' '}
+            <EuiCode>em</EuiCode>) units instead of <EuiCode>px</EuiCode> when
+            possible{' '}
+          </>
+        }
+      >
+        <p>
+          Relative font units respect configured browser default font sizes,
+          which some users may set to larger than than the 16px default due to,
+          e.g. visual impairment, monitor size, or personal preference.{' '}
+          <EuiLink
+            href="https://usability.yale.edu/web-accessibility/articles/zoom-resizing-text"
+            target="_blank"
+          >
+            Read more on accessible text resizing.
+          </EuiLink>
+        </p>
+      </EuiCallOut>
       <EuiSpacer />
       <EuiBasicTable<FontScaleDetails>
         tableLayout="auto"
diff --git a/src/components/basic_table/table_types.ts b/src/components/basic_table/table_types.ts
index 587515bbf58..0bd235f5d3c 100644
--- a/src/components/basic_table/table_types.ts
+++ b/src/components/basic_table/table_types.ts
@@ -12,7 +12,10 @@ import { Pagination } from './pagination_bar';
 import { Action } from './action_types';
 import { Primitive } from '../../services/sort/comparators';
 import { CommonProps } from '../common';
-import { EuiTableRowCellMobileOptionsShape } from '../table/table_row_cell';
+import {
+  EuiTableRowCellProps,
+  EuiTableRowCellMobileOptionsShape,
+} from '../table/table_row_cell';
 
 export type ItemId<T> = string | number | ((item: T) => string);
 export type ItemIdResolved = string | number;
@@ -68,9 +71,12 @@ export interface EuiTableFieldDataColumnType<T>
    */
   align?: HorizontalAlignment;
   /**
-   * Indicates whether this column should truncate its content when it doesn't fit
+   * Indicates whether this column should truncate overflowing text content.
+   * - Set to `true` to enable single-line truncation.
+   * - To enable multi-line truncation, use a configuration object with `lines`
+   * set to a number of lines to truncate to.
    */
-  truncateText?: boolean;
+  truncateText?: EuiTableRowCellProps['truncateText'];
   mobileOptions?: Omit<EuiTableRowCellMobileOptionsShape, 'render'> & {
     render?: (item: T) => ReactNode;
   };
diff --git a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap
index fe8ec160fdd..d890fdb1121 100644
--- a/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap
+++ b/src/components/bottom_bar/__snapshots__/bottom_bar.test.tsx.snap
@@ -6,12 +6,12 @@ exports[`EuiBottomBar is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="aria-label"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2 emotion-euiBottomBar-fixed-m-euiTestCss-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium testClass1 testClass2 emotion-euiBottomBar-fixed-m-euiTestCss-euiColorMode-dark"
       data-test-subj="test subject string"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
@@ -38,12 +38,12 @@ exports[`EuiBottomBar props affordForDisplacement can be false 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -69,12 +69,12 @@ exports[`EuiBottomBar props bodyClassName is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -99,12 +99,12 @@ exports[`EuiBottomBar props landmarkHeading 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="This should have been label"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -129,12 +129,12 @@ exports[`EuiBottomBar props paddingSize l is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge emotion-euiBottomBar-fixed-l-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingLarge emotion-euiBottomBar-fixed-l-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -159,12 +159,12 @@ exports[`EuiBottomBar props paddingSize m is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -189,12 +189,12 @@ exports[`EuiBottomBar props paddingSize none is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed emotion-euiBottomBar-fixed-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -219,12 +219,12 @@ exports[`EuiBottomBar props paddingSize s is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall emotion-euiBottomBar-fixed-s-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingSmall emotion-euiBottomBar-fixed-s-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -249,12 +249,12 @@ exports[`EuiBottomBar props position fixed is rendered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -280,12 +280,12 @@ exports[`EuiBottomBar props position props are altered 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 30px; right: 30px; bottom: 30px; top: 30px;"
     >
       <h2
@@ -311,7 +311,7 @@ exports[`EuiBottomBar props position static is rendered 1`] = `
   <div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium emotion-euiBottomBar-static-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--static euiBottomBar--paddingMedium emotion-euiBottomBar-static-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -337,7 +337,7 @@ exports[`EuiBottomBar props position sticky is rendered 1`] = `
   <div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium emotion-euiBottomBar-sticky-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--sticky euiBottomBar--paddingMedium emotion-euiBottomBar-sticky-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -363,12 +363,12 @@ exports[`EuiBottomBar props style is customized 1`] = `
 >
   <div />
   <div
-    class="emotion-euiColorMode-dark-colorClassName"
+    class="emotion-euiColorMode-dark"
     data-euiportal="true"
   >
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 12px; right: 0px; bottom: 0px;"
     >
       <h2
@@ -394,7 +394,7 @@ exports[`EuiBottomBar props usePortal can be false 1`] = `
   <div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--fixed euiBottomBar--paddingMedium emotion-euiBottomBar-fixed-m-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
diff --git a/src/components/button/__snapshots__/button.test.tsx.snap b/src/components/button/__snapshots__/button.test.tsx.snap
index 02d38a19de1..e5a199790ef 100644
--- a/src/components/button/__snapshots__/button.test.tsx.snap
+++ b/src/components/button/__snapshots__/button.test.tsx.snap
@@ -43,7 +43,7 @@ exports[`EuiButton props color danger is rendered 1`] = `
 
 exports[`EuiButton props color ghost is rendered 1`] = `
 <button
-  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-euiColorMode-dark-colorClassName"
+  class="euiButton emotion-euiButtonDisplay-m-defaultMinWidth-base-text-euiColorMode-dark"
   type="button"
 >
   <span
diff --git a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
index 06fcda5d27b..56dd6eadcf7 100644
--- a/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
+++ b/src/components/button/button_empty/__snapshots__/button_empty.test.tsx.snap
@@ -51,7 +51,7 @@ exports[`EuiButtonEmpty props color danger is rendered 1`] = `
 
 exports[`EuiButtonEmpty props color ghost is rendered 1`] = `
 <button
-  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiColorMode-dark-colorClassName"
+  class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-m-empty-text-euiColorMode-dark"
   type="button"
 >
   <span
diff --git a/src/components/button/button_empty/button_empty.stories.tsx b/src/components/button/button_empty/button_empty.stories.tsx
index fcbfdc29e62..ccf9cd2c12a 100644
--- a/src/components/button/button_empty/button_empty.stories.tsx
+++ b/src/components/button/button_empty/button_empty.stories.tsx
@@ -20,14 +20,8 @@ const meta: Meta<EuiButtonEmptyProps> = {
     },
     iconType: { control: 'text' },
   },
-};
-
-export default meta;
-type Story = StoryObj<EuiButtonEmptyProps>;
-
-export const Playground: Story = {
   args: {
-    children: 'Tertiary action',
+    // Component defaults
     color: 'primary',
     size: 'm',
     iconSize: 'm',
@@ -37,3 +31,12 @@ export const Playground: Story = {
     isSelected: false,
   },
 };
+
+export default meta;
+type Story = StoryObj<EuiButtonEmptyProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Tertiary action',
+  },
+};
diff --git a/src/components/button/button_group/button_group.stories.tsx b/src/components/button/button_group/button_group.stories.tsx
index 9e3c8cdd3cc..d4f0eef2928 100644
--- a/src/components/button/button_group/button_group.stories.tsx
+++ b/src/components/button/button_group/button_group.stories.tsx
@@ -8,6 +8,7 @@
 
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { disableStorybookControls } from '../../../../.storybook/utils';
 
 import {
   EuiButtonGroup,
@@ -19,11 +20,6 @@ const meta: Meta<EuiButtonGroupProps> = {
   title: 'EuiButtonGroup',
   // @ts-ignore This still works for Storybook controls, even though Typescript complains
   component: EuiButtonGroup,
-  parameters: {
-    controls: {
-      exclude: ['data-test-subj'],
-    },
-  },
   argTypes: {
     type: {
       options: ['single', 'multi'],
@@ -44,6 +40,15 @@ const meta: Meta<EuiButtonGroupProps> = {
       control: 'select',
     },
   },
+  args: {
+    // Component defaults
+    type: 'single',
+    buttonSize: 's',
+    color: 'text',
+    isDisabled: false,
+    isFullWidth: false,
+    isIconOnly: false,
+  },
 };
 
 export default meta;
@@ -76,6 +81,17 @@ const EuiButtonGroupSingle = (props: any) => {
   );
 };
 
+export const SingleSelection: Story = {
+  render: ({ ...args }) => <EuiButtonGroupSingle {...args} />,
+  args: {
+    legend: 'EuiButtonGroup - single selection',
+    options,
+    type: 'single',
+    idSelected: 'button1',
+  },
+  argTypes: disableStorybookControls(['type']),
+};
+
 const EuiButtonGroupMulti = (props: any) => {
   const [idToSelectedMap, setIdToSelectedMap] = useState<
     Record<string, boolean>
@@ -100,24 +116,13 @@ const EuiButtonGroupMulti = (props: any) => {
   );
 };
 
-export const Playground: Story = {
-  render: ({ ...args }) => {
-    if (args.type === 'multi') {
-      return <EuiButtonGroupMulti {...args} />;
-    } else {
-      return <EuiButtonGroupSingle {...args} />;
-    }
-  },
+export const MultiSelection: Story = {
+  render: ({ ...args }) => <EuiButtonGroupMulti {...args} />,
   args: {
-    legend: 'EuiButtonGroup demo',
-    type: 'single',
+    legend: 'EuiButtonGroup - multiple selections',
     options,
-    idSelected: 'button1',
+    type: 'multi',
     idToSelectedMap: { button1: true },
-    buttonSize: 's',
-    color: 'text',
-    isDisabled: false,
-    isFullWidth: false,
-    isIconOnly: false,
-  } as any,
+  },
+  argTypes: disableStorybookControls(['type']),
 };
diff --git a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
index 167a51a4e73..c2dea385a0a 100644
--- a/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
+++ b/src/components/button/button_icon/__snapshots__/button_icon.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`EuiButtonIcon props color danger is rendered 1`] = `
 exports[`EuiButtonIcon props color ghost is rendered 1`] = `
 <button
   aria-label="button"
-  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark-colorClassName"
+  class="euiButtonIcon emotion-euiButtonIcon-xs-empty-text-euiColorMode-dark"
   type="button"
 >
   <span
diff --git a/src/components/button/button_icon/button_icon.stories.tsx b/src/components/button/button_icon/button_icon.stories.tsx
index 29d2e49cf62..8ef364ab30a 100644
--- a/src/components/button/button_icon/button_icon.stories.tsx
+++ b/src/components/button/button_icon/button_icon.stories.tsx
@@ -13,14 +13,8 @@ import { EuiButtonIcon, EuiButtonIconProps } from './button_icon';
 const meta: Meta<EuiButtonIconProps> = {
   title: 'EuiButtonIcon',
   component: EuiButtonIcon,
-};
-
-export default meta;
-type Story = StoryObj<EuiButtonIconProps>;
-
-export const Playground: Story = {
   args: {
-    iconType: 'faceHappy',
+    // Component defaults
     color: 'primary',
     display: 'empty',
     size: 'xs',
@@ -30,3 +24,12 @@ export const Playground: Story = {
     isSelected: false,
   },
 };
+
+export default meta;
+type Story = StoryObj<EuiButtonIconProps>;
+
+export const Playground: Story = {
+  args: {
+    iconType: 'faceHappy',
+  },
+};
diff --git a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
index 0c74dfef51e..16ed32ffd1d 100644
--- a/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
+++ b/src/components/collapsible_nav/__snapshots__/collapsible_nav.test.tsx.snap
@@ -273,7 +273,7 @@ exports[`EuiCollapsibleNav props isDocked 1`] = `
     data-focus-lock-disabled="disabled"
   >
     <nav
-      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNav-push"
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
       id="id"
       style="inline-size: 320px;"
     />
@@ -353,7 +353,7 @@ exports[`EuiCollapsibleNav props showButtonIfDocked 1`] = `
     data-focus-lock-disabled="disabled"
   >
     <nav
-      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNav-push"
+      class="euiFlyout euiCollapsibleNav emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNav-push"
       id="id"
       style="inline-size: 320px;"
     />
diff --git a/src/components/collapsible_nav/collapsible_nav.stories.tsx b/src/components/collapsible_nav/collapsible_nav.stories.tsx
index 77a89909ea2..efefaf47e94 100644
--- a/src/components/collapsible_nav/collapsible_nav.stories.tsx
+++ b/src/components/collapsible_nav/collapsible_nav.stories.tsx
@@ -15,6 +15,13 @@ import { EuiCollapsibleNav, EuiCollapsibleNavProps } from './collapsible_nav';
 const meta: Meta<EuiCollapsibleNavProps> = {
   title: 'EuiCollapsibleNav',
   component: EuiCollapsibleNav,
+  args: {
+    // Component defaults
+    isDocked: false,
+    dockedBreakpoint: 'l',
+    showButtonIfDocked: false,
+    size: 320,
+  },
   // TODO: Improve props inherited from EuiFlyout, ideally through
   // a DRY import from `flyout.stories.tsx` once that's created
 };
@@ -43,9 +50,5 @@ export const Playground: Story = {
   args: {
     children: 'Collapsible nav content',
     isOpen: true,
-    isDocked: false,
-    dockedBreakpoint: 'l',
-    showButtonIfDocked: false,
-    size: 240,
   },
 };
diff --git a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
index c2a351ed988..9c7a4bfde42 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
+++ b/src/components/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiCollapsibleNavGroup is rendered 1`] = `
 
 exports[`EuiCollapsibleNavGroup props background dark is rendered 1`] = `
 <div
-  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark-euiColorMode-dark-colorClassName"
+  class="euiCollapsibleNavGroup emotion-euiCollapsibleNavGroup-notCollapsible-dark-euiColorMode-dark"
   id="id"
 />
 `;
diff --git a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx
index 4f761dc65a0..ae4d317761d 100644
--- a/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx
+++ b/src/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.stories.tsx
@@ -43,6 +43,14 @@ const meta: Meta<EuiCollapsibleNavGroupProps> = {
     isDisabled: { if: { arg: 'isCollapsible' } },
     element: { if: { arg: 'isCollapsible' } },
   },
+  args: {
+    iconType: 'logoElastic',
+    // Component defaults
+    iconSize: 'l',
+    titleSize: 'xxs',
+    titleElement: 'h3',
+    background: 'none',
+  },
 };
 
 export default meta;
@@ -51,12 +59,7 @@ type Story = StoryObj<EuiCollapsibleNavGroupProps>;
 export const Accordion: Story = {
   args: {
     children: 'This is an accordion group with a title',
-    background: 'none',
     title: 'Nav group - accordion',
-    iconType: 'logoElastic',
-    iconSize: 'l',
-    titleElement: 'h3',
-    titleSize: 'xxs',
     initialIsOpen: true,
     isCollapsible: true,
   },
@@ -65,12 +68,6 @@ export const Accordion: Story = {
 export const NonAccordion: StoryObj<EuiCollapsibleNavGroupProps> = {
   args: {
     children: 'This is a group with a title',
-    background: 'none',
-    title: 'Nav group - non-accordion',
-    iconType: 'logoElastic',
-    iconSize: 'l',
-    titleElement: 'h3',
-    titleSize: 'xxs',
     isCollapsible: false,
   },
 };
@@ -78,6 +75,5 @@ export const NonAccordion: StoryObj<EuiCollapsibleNavGroupProps> = {
 export const NoTitle: Story = {
   args: {
     children: 'This is a group without a title',
-    background: 'none',
   },
 };
diff --git a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
index e5a804d20f6..b14ce1a5f42 100644
--- a/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
+++ b/src/components/collapsible_nav_beta/__snapshots__/collapsible_nav_beta.test.tsx.snap
@@ -36,7 +36,7 @@ exports[`EuiCollapsibleNavBeta renders 1`] = `
     >
       <nav
         aria-label="aria-label"
-        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left-isPush-euiTestCss"
+        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta testClass1 testClass2 emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-euiTestCss"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
         style="inline-size: 248px;"
@@ -89,7 +89,7 @@ exports[`EuiCollapsibleNavBeta renders initialIsCollapsed 1`] = `
     >
       <nav
         aria-label="Site menu"
-        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
+        class="euiFlyout euiCollapsibleNav euiCollapsibleNavBeta emotion-euiFlyout-none-noMaxWidth-push-left-noAnimation-left-euiCollapsibleNavBeta-left-isPush-isPushCollapsed"
         data-test-subj="nav"
         id="generated-id_euiCollapsibleNav"
         style="inline-size: 48px;"
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
index b8a21163188..dc3bc82410b 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.stories.tsx
@@ -8,9 +8,14 @@
 
 import React, { FunctionComponent, PropsWithChildren, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import {
+  hideStorybookControls,
+  hideAllStorybookControls,
+} from '../../../.storybook/utils';
 
 import { EuiHeader, EuiHeaderSection, EuiHeaderSectionItem } from '../header';
 import { EuiPageTemplate } from '../page_template';
+import { EuiBottomBar } from '../bottom_bar';
 import { EuiFlyout } from '../flyout';
 import { EuiButton } from '../button';
 import { EuiTitle } from '../title';
@@ -34,6 +39,7 @@ const meta: Meta<EuiCollapsibleNavBetaProps> = {
     },
   },
   args: {
+    // Component defaults
     side: 'left',
     initialIsCollapsed: false,
     width: 248,
@@ -416,21 +422,57 @@ export const SecurityExample: Story = {
   ),
 };
 
-export const MultipleFixedHeaders: Story = {
-  render: ({ ...args }) => (
+export const CollapsedStateInLocalStorage: Story = {
+  render: () => {
+    const key = 'EuiCollapsibleNav__isCollapsed';
+    const initialIsCollapsed = window.localStorage.getItem(key) === 'true';
+    const onCollapseToggle = (isCollapsed: boolean) =>
+      window.localStorage.setItem(key, String(isCollapsed));
+
+    return (
+      <>
+        <EuiHeader position="fixed">
+          <EuiHeaderSection>
+            <EuiCollapsibleNavBeta
+              initialIsCollapsed={initialIsCollapsed}
+              onCollapseToggle={onCollapseToggle}
+            />
+          </EuiHeaderSection>
+        </EuiHeader>
+        <EuiPageTemplate>
+          <EuiPageTemplate.Section>
+            Toggle the collapsed state and refresh the page. The collapsed state
+            should have been saved/remembered
+          </EuiPageTemplate.Section>
+        </EuiPageTemplate>
+      </>
+    );
+  },
+  argTypes: hideStorybookControls(['aria-label', 'side', 'width']),
+};
+
+export const GlobalCSSVariable: Story = {
+  render: ({ side, ...args }) => (
     <>
-      <EuiHeader position="fixed">First header</EuiHeader>
       <EuiHeader position="fixed">
-        <EuiHeaderSection>
-          <EuiCollapsibleNavBeta {...args}>
-            This story tests that EuiCollapsibleNav automatically adjusts its
-            position & height for multiple fixed headers
+        <EuiHeaderSection side={side}>
+          <EuiCollapsibleNavBeta {...args} side={side}>
+            This story tests the global `--euiCollapsibleNavOffset` CSS variable
           </EuiCollapsibleNavBeta>
-          Second header
         </EuiHeaderSection>
       </EuiHeader>
+      {/* In production, would just be `left="var(--euiCollapsibleNavOffset, 0)"` if the nav isn't changing sides */}
+      <EuiBottomBar {...{ [side!]: 'var(--euiCollapsibleNavOffset, 0)' }}>
+        This text should be visible at all times and the bar position should
+        update dynamically based on the nav width (including on mobile)
+      </EuiBottomBar>
     </>
   ),
+  argTypes: hideStorybookControls([
+    'aria-label',
+    'initialIsCollapsed',
+    'onCollapseToggle',
+  ]),
 };
 
 const MockConsumerFlyout: FunctionComponent = () => {
@@ -438,13 +480,13 @@ const MockConsumerFlyout: FunctionComponent = () => {
   return (
     <>
       <EuiButton size="s" onClick={() => setFlyoutOpen(!flyoutIsOpen)}>
-        Toggle a flyout
+        Toggle flyout
       </EuiButton>
       {flyoutIsOpen && (
         <EuiFlyout onClose={() => setFlyoutOpen(false)}>
           <EuiCollapsibleNavBeta.Body>
-            Some other mock consumer flyout that <strong>should</strong> overlap
-            EuiCollapsibleNav
+            This flyout's mask should overlay / sit on top of the collapsible
+            nav, on both desktop and mobile
           </EuiCollapsibleNavBeta.Body>
         </EuiFlyout>
       )}
@@ -452,12 +494,14 @@ const MockConsumerFlyout: FunctionComponent = () => {
   );
 };
 
-export const FlyoutInFixedHeaders: Story = {
-  render: ({ ...args }) => {
+export const FlyoutOverlay: Story = {
+  render: (_) => {
     return (
       <EuiHeader position="fixed">
         <EuiHeaderSection>
-          <EuiCollapsibleNavBeta {...args}>Nav content</EuiCollapsibleNavBeta>
+          <EuiCollapsibleNavBeta>
+            Click the "Toggle flyout" button in the top right hand corner
+          </EuiCollapsibleNavBeta>
         </EuiHeaderSection>
         <EuiHeaderSection>
           <EuiHeaderSectionItem>
@@ -467,32 +511,5 @@ export const FlyoutInFixedHeaders: Story = {
       </EuiHeader>
     );
   },
-};
-
-export const CollapsedStateInLocalStorage: Story = {
-  render: () => {
-    const key = 'EuiCollapsibleNav__isCollapsed';
-    const initialIsCollapsed = window.localStorage.getItem(key) === 'true';
-    const onCollapseToggle = (isCollapsed: boolean) =>
-      window.localStorage.setItem(key, String(isCollapsed));
-
-    return (
-      <>
-        <EuiHeader position="fixed">
-          <EuiHeaderSection>
-            <EuiCollapsibleNavBeta
-              initialIsCollapsed={initialIsCollapsed}
-              onCollapseToggle={onCollapseToggle}
-            />
-          </EuiHeaderSection>
-        </EuiHeader>
-        <EuiPageTemplate>
-          <EuiPageTemplate.Section>
-            Toggle the collapsed state and refresh the page. The collapsed state
-            should have been saved/remembered
-          </EuiPageTemplate.Section>
-        </EuiPageTemplate>
-      </>
-    );
-  },
+  parameters: hideAllStorybookControls,
 };
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
index 5d3a62e91a7..121e594b47d 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_beta.tsx
@@ -18,7 +18,12 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { useEuiTheme, useGeneratedHtmlId, throttle } from '../../services';
+import {
+  useEuiTheme,
+  useEuiThemeCSSVariables,
+  useGeneratedHtmlId,
+  throttle,
+} from '../../services';
 
 import { CommonProps } from '../common';
 import { EuiFlyout, EuiFlyoutProps } from '../flyout';
@@ -88,6 +93,7 @@ const _EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps> = ({
   focusTrapProps: _focusTrapProps,
   ...rest
 }) => {
+  const { setGlobalCSSVariables } = useEuiThemeCSSVariables();
   const euiTheme = useEuiTheme();
   const headerHeight = euiHeaderVariables(euiTheme).height;
 
@@ -138,9 +144,17 @@ const _EuiCollapsibleNavBeta: FunctionComponent<EuiCollapsibleNavBetaProps> = ({
   const width = useMemo(() => {
     if (isOverlayFullWidth) return '100%';
     if (isPush && isCollapsed) return headerHeight;
-    return _width;
+    return `${_width}px`;
   }, [_width, isOverlayFullWidth, isPush, isCollapsed, headerHeight]);
 
+  // Other UI elements may need to account for the nav width -
+  // set a global CSS variable that they can use
+  useEffect(() => {
+    setGlobalCSSVariables({
+      '--euiCollapsibleNavOffset': isOverlay ? '0' : width,
+    });
+  }, [width, isOverlay, setGlobalCSSVariables]);
+
   /**
    * Prop setup
    */
diff --git a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
index 0b786eeaded..e11f8733151 100644
--- a/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
+++ b/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.tsx
@@ -115,6 +115,7 @@ const EuiCollapsibleNavItemDisplay: FunctionComponent<
   icon,
   iconProps,
   items,
+  accordionProps, // Ensure this isn't spread to non-accordions
   children, // Ensure children isn't spread
   ...props
 }) => {
@@ -133,6 +134,7 @@ const EuiCollapsibleNavItemDisplay: FunctionComponent<
       <EuiCollapsibleNavAccordion
         buttonContent={headerContent}
         items={items}
+        accordionProps={accordionProps}
         {...props}
         isSubItem={isSubItem}
       />
diff --git a/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap b/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap
deleted file mode 100644
index 964ccb2355d..00000000000
--- a/src/components/color_picker/color_stops/__snapshots__/color_stop_thumb.test.tsx.snap
+++ /dev/null
@@ -1,137 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders EuiColorStopThumb 1`] = `
-<div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover-euiTestCss"
-  data-test-subj="test subject string"
-  style="left: 0%;"
->
-  <div
-    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-  >
-    <button
-      aria-disabled="false"
-      aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-      aria-valuemax="24"
-      aria-valuemin="0"
-      aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-      data-test-subj="euiColorStopThumb"
-      role="slider"
-      style="background: rgb(255, 0, 0);"
-      tabindex="-1"
-      title="Click to edit, drag to reposition"
-      type="button"
-    />
-  </div>
-</div>
-`;
-
-exports[`renders disabled EuiColorStopThumb 1`] = `
-<div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover-euiTestCss"
-  data-test-subj="test subject string"
-  style="left: 0%;"
->
-  <div
-    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-  >
-    <button
-      aria-disabled="true"
-      aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-      aria-valuemax="24"
-      aria-valuemin="0"
-      aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-      data-test-subj="euiColorStopThumb"
-      disabled=""
-      role="slider"
-      style="background: rgb(255, 0, 0);"
-      tabindex="-1"
-      title="Click to edit, drag to reposition"
-      type="button"
-    />
-  </div>
-</div>
-`;
-
-exports[`renders picker-only EuiColorStopThumb 1`] = `
-<div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover-euiTestCss"
-  data-test-subj="test subject string"
-  style="left: 0%;"
->
-  <div
-    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-  >
-    <button
-      aria-disabled="false"
-      aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-      aria-valuemax="24"
-      aria-valuemin="0"
-      aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-      data-test-subj="euiColorStopThumb"
-      role="slider"
-      style="background: rgb(255, 0, 0);"
-      tabindex="-1"
-      title="Click to edit, drag to reposition"
-      type="button"
-    />
-  </div>
-</div>
-`;
-
-exports[`renders readOnly EuiColorStopThumb 1`] = `
-<div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover-euiTestCss"
-  data-test-subj="test subject string"
-  style="left: 0%;"
->
-  <div
-    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-  >
-    <button
-      aria-disabled="false"
-      aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-      aria-valuemax="24"
-      aria-valuemin="0"
-      aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-      data-test-subj="euiColorStopThumb"
-      role="slider"
-      style="background: rgb(255, 0, 0);"
-      tabindex="-1"
-      title="Click to edit, drag to reposition"
-      type="button"
-    />
-  </div>
-</div>
-`;
-
-exports[`renders swatch-only EuiColorStopThumb 1`] = `
-<div
-  class="euiPopover euiColorStopPopover testClass1 testClass2 emotion-euiPopover-euiColorStopThumbPopover-euiTestCss"
-  data-test-subj="test subject string"
-  style="left: 0%;"
->
-  <div
-    class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-  >
-    <button
-      aria-disabled="false"
-      aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-      aria-valuemax="24"
-      aria-valuemin="0"
-      aria-valuenow="0"
-      class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-      data-test-subj="euiColorStopThumb"
-      role="slider"
-      style="background: rgb(255, 0, 0);"
-      tabindex="-1"
-      title="Click to edit, drag to reposition"
-      type="button"
-    />
-  </div>
-</div>
-`;
diff --git a/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap b/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap
deleted file mode 100644
index f1b0ec7b47d..00000000000
--- a/src/components/color_picker/color_stops/__snapshots__/color_stops.test.tsx.snap
+++ /dev/null
@@ -1,834 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders EuiColorStops 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isEnabled-euiTestCss"
-  data-test-subj="euiColorStops test subject string"
-  tabindex="0"
->
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
-  </p>
-  <div
-    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
-  >
-    <div
-      class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
-    >
-      <div
-        class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        data-test-subj="euiRangeHighlightProgress"
-        style="margin-inline-start: 0%; inline-size: 100%;"
-      />
-    </div>
-    <div
-      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
-      data-test-subj="euiColorStopsAdd"
-    >
-      <div
-        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
-        style="left: 0%;"
-      />
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 0%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="24"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_0"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(255, 0, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 21%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="34"
-          aria-valuemin="1"
-          aria-valuenow="25"
-          aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_1"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(0, 255, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 29.4%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="100"
-          aria-valuemin="26"
-          aria-valuenow="35"
-          aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_2"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(0, 0, 255);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders compressed EuiColorStops 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isEnabled-euiTestCss"
-  data-test-subj="euiColorStops test subject string"
-  tabindex="0"
->
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
-  </p>
-  <div
-    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
-  >
-    <div
-      class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
-    >
-      <div
-        class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        data-test-subj="euiRangeHighlightProgress"
-        style="margin-inline-start: 0%; inline-size: 100%;"
-      />
-    </div>
-    <div
-      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
-      data-test-subj="euiColorStopsAdd"
-    >
-      <div
-        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
-        style="left: 0%;"
-      />
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 0%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="24"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_0"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(255, 0, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 21%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="34"
-          aria-valuemin="1"
-          aria-valuenow="25"
-          aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_1"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(0, 255, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 29.4%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="100"
-          aria-valuemin="26"
-          aria-valuenow="35"
-          aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_2"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(0, 0, 255);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders disabled EuiColorStops 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isDisabled-euiTestCss"
-  data-test-subj="euiColorStops test subject string"
-  tabindex="-1"
->
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    Test:  Disabled. Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
-  </p>
-  <div
-    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-disabled-euiColorStops__track"
-  >
-    <div
-      class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
-    >
-      <div
-        class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        data-test-subj="euiRangeHighlightProgress"
-        style="margin-inline-start: 0%; inline-size: 100%;"
-      />
-    </div>
-    <div
-      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isDisabled"
-      data-test-subj="euiColorStopsAdd"
-    >
-      <div
-        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
-        style="left: 0%;"
-      />
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 0%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="24"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_0"
-          data-test-subj="euiColorStopThumb"
-          disabled=""
-          role="slider"
-          style="background: rgb(255, 0, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 21%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="34"
-          aria-valuemin="1"
-          aria-valuenow="25"
-          aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_1"
-          data-test-subj="euiColorStopThumb"
-          disabled=""
-          role="slider"
-          style="background: rgb(0, 255, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 29.4%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="true"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="100"
-          aria-valuemin="26"
-          aria-valuenow="35"
-          aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_2"
-          data-test-subj="euiColorStopThumb"
-          disabled=""
-          role="slider"
-          style="background: rgb(0, 0, 255);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders empty EuiColorStops 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isEnabled-euiTestCss"
-  data-test-subj="euiColorStops test subject string"
-  tabindex="0"
->
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
-  </p>
-  <div
-    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
-  >
-    <div
-      class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
-    >
-      <div
-        class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        data-test-subj="euiRangeHighlightProgress"
-        style="margin-inline-start: 0%; inline-size: 100%;"
-      />
-    </div>
-    <div
-      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
-      data-test-subj="euiColorStopsAdd"
-    >
-      <div
-        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
-        style="left: 0%;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders fixed stop EuiColorStops 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isEnabled-euiTestCss"
-  data-test-subj="euiColorStops test subject string"
-  tabindex="0"
->
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
-  </p>
-  <div
-    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
-  >
-    <div
-      class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
-    >
-      <div
-        class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        data-test-subj="euiRangeHighlightProgress"
-        style="margin-inline-start: 0%; inline-size: 100%;"
-      />
-    </div>
-    <div
-      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
-      data-test-subj="euiColorStopsAdd"
-    >
-      <div
-        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
-        style="left: 0%;"
-      />
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 0%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="24"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_0"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(255, 0, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 21%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="34"
-          aria-valuemin="1"
-          aria-valuenow="25"
-          aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_1"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(0, 255, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 29.4%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="100"
-          aria-valuemin="26"
-          aria-valuenow="35"
-          aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_2"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(0, 0, 255);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders free-range EuiColorStops 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isEnabled-euiTestCss"
-  data-test-subj="euiColorStops test subject string"
-  tabindex="0"
->
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
-  </p>
-  <div
-    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
-  >
-    <div
-      class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
-    >
-      <div
-        class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        data-test-subj="euiRangeHighlightProgress"
-        style="margin-inline-start: 0%; inline-size: 100%;"
-      />
-    </div>
-    <div
-      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
-      data-test-subj="euiColorStopsAdd"
-    >
-      <div
-        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
-        style="left: 0%;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders fullWidth EuiColorStops 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-fullWidth-euiColorStops-isEnabled-euiTestCss"
-  data-test-subj="euiColorStops test subject string"
-  tabindex="0"
->
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
-  </p>
-  <div
-    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
-  >
-    <div
-      class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
-    >
-      <div
-        class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        data-test-subj="euiRangeHighlightProgress"
-        style="margin-inline-start: 0%; inline-size: 100%;"
-      />
-    </div>
-    <div
-      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
-      data-test-subj="euiColorStopsAdd"
-    >
-      <div
-        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
-        style="left: 0%;"
-      />
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 0%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="24"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_0"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(255, 0, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 21%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="34"
-          aria-valuemin="1"
-          aria-valuenow="25"
-          aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_1"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(0, 255, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 29.4%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="100"
-          aria-valuemin="26"
-          aria-valuenow="35"
-          aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_2"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(0, 0, 255);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders max-only EuiColorStops 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isEnabled-euiTestCss"
-  data-test-subj="euiColorStops test subject string"
-  tabindex="0"
->
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
-  </p>
-  <div
-    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
-  >
-    <div
-      class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
-    >
-      <div
-        class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        data-test-subj="euiRangeHighlightProgress"
-        style="margin-inline-start: 0%; inline-size: 100%;"
-      />
-    </div>
-    <div
-      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
-      data-test-subj="euiColorStopsAdd"
-    >
-      <div
-        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
-        style="left: 0%;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders min-only EuiColorStops 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isEnabled-euiTestCss"
-  data-test-subj="euiColorStops test subject string"
-  tabindex="0"
->
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    Test:   Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
-  </p>
-  <div
-    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
-  >
-    <div
-      class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
-    >
-      <div
-        class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        data-test-subj="euiRangeHighlightProgress"
-        style="margin-inline-start: 0%; inline-size: 100%;"
-      />
-    </div>
-    <div
-      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isEnabled"
-      data-test-subj="euiColorStopsAdd"
-    >
-      <div
-        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
-        style="left: 0%;"
-      />
-    </div>
-  </div>
-</div>
-`;
-
-exports[`renders readOnly EuiColorStops 1`] = `
-<div
-  aria-label="aria-label"
-  class="euiRangeWrapper euiColorStops testClass1 testClass2 emotion-euiRangeWrapper-regular-euiColorStops-isEnabled-isReadOnly-euiTestCss"
-  data-test-subj="euiColorStops test subject string"
-  tabindex="0"
->
-  <p
-    aria-live="polite"
-    class="emotion-euiScreenReaderOnly"
-  >
-    Test: Read-only.  Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop.
-  </p>
-  <div
-    class="euiRangeTrack euiColorStops__track emotion-euiRangeTrack-euiColorStops__track"
-  >
-    <div
-      class="euiRangeHighlight euiColorStops__highlight emotion-euiRangeHighlight"
-    >
-      <div
-        class="euiRangeHighlight__progress emotion-euiRangeHighlight__progress"
-        data-test-subj="euiRangeHighlightProgress"
-        style="margin-inline-start: 0%; inline-size: 100%;"
-      />
-    </div>
-    <div
-      class="euiColorStops__addContainer emotion-euiColorStopsAddContainer-isDisabled"
-      data-test-subj="euiColorStopsAdd"
-    >
-      <div
-        class="euiColorStops__addTarget emotion-euiColorStops__addTarget"
-        style="left: 0%;"
-      />
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 0%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="24"
-          aria-valuemin="0"
-          aria-valuenow="0"
-          aria-valuetext="Stop: 0, Color: #FF0000 (1 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_0"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(255, 0, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 21%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="34"
-          aria-valuemin="1"
-          aria-valuenow="25"
-          aria-valuetext="Stop: 25, Color: #00FF00 (2 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_1"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(0, 255, 0);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-    <div
-      class="euiPopover euiColorStopPopover emotion-euiPopover-euiColorStopThumbPopover"
-      style="left: 29.4%;"
-    >
-      <div
-        class="euiPopover__anchor euiColorStopThumbPopover__anchor css-16vtueo-render"
-      >
-        <button
-          aria-disabled="false"
-          aria-label="Press the Enter key to modify this stop. Press Escape to focus the group"
-          aria-valuemax="100"
-          aria-valuemin="26"
-          aria-valuenow="35"
-          aria-valuetext="Stop: 35, Color: #0000FF (3 of 3)"
-          class="euiRangeThumb euiColorStopThumb emotion-euiRangeThumb-euiColorStopThumb"
-          data-index="euiColorStop_2"
-          data-test-subj="euiColorStopThumb"
-          role="slider"
-          style="background: rgb(0, 0, 255);"
-          tabindex="-1"
-          title="Click to edit, drag to reposition"
-          type="button"
-        />
-      </div>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/color_picker/color_stops/color_stop_thumb.styles.ts b/src/components/color_picker/color_stops/color_stop_thumb.styles.ts
deleted file mode 100644
index 1dea78f03d2..00000000000
--- a/src/components/color_picker/color_stops/color_stop_thumb.styles.ts
+++ /dev/null
@@ -1,94 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { css } from '@emotion/react';
-
-import { UseEuiTheme } from '../../../services';
-import { mathWithUnits } from '../../../global_styling';
-import {
-  euiRangeVariables,
-  euiRangeThumbFocus,
-} from '../../form/range/range.styles';
-import { euiColorPickerVariables } from '../color_picker.styles';
-
-export const euiColorStopThumbStyles = (euiThemeContext: UseEuiTheme) => {
-  return {
-    // Base
-    euiColorStopThumb: css`
-      &:not(:disabled) {
-        inset-block-start: 0;
-        margin-block-start: 0;
-        pointer-events: auto;
-        cursor: grab;
-
-        &:active {
-          cursor: grabbing;
-        }
-      }
-    `,
-    isPopoverOpen: css`
-      ${euiRangeThumbFocus(euiThemeContext)}
-    `,
-  };
-};
-
-export const euiColorStopThumbPopoverStyles = (
-  euiThemeContext: UseEuiTheme
-) => {
-  const range = euiRangeVariables(euiThemeContext);
-  const { euiTheme } = euiThemeContext;
-
-  return {
-    // Base
-    euiColorStopThumbPopover: css`
-      position: absolute;
-      inset-block-start: 50%;
-      inline-size: ${range.thumbWidth};
-      block-size: ${range.thumbHeight};
-      margin-block-start: ${mathWithUnits(range.thumbHeight, (x) => x * -0.5)};
-
-      .euiColorStopThumbPopover__anchor {
-        position: absolute;
-        inline-size: 100%;
-        block-size: 100%;
-
-        /* Background color can potentially have opacity
-           Pseudo element placed below the thumb to prevent the track from showing through */
-        &::before {
-          content: '';
-          display: block;
-          position: absolute;
-          inset-inline-start: 0;
-          inset-block-start: 0;
-          block-size: ${range.thumbHeight};
-          inline-size: ${range.thumbWidth};
-          border-radius: ${range.thumbHeight};
-          background: ${euiTheme.colors.emptyShade};
-        }
-      }
-    `,
-    isLoadingPanel: css`
-      /* Overrides a stateful class on EuiPopover -> EuiPanel */
-      visibility: hidden !important; /* stylelint-disable-line declaration-no-important */
-    `,
-    hasFocus: css`
-      z-index: ${range.thumbZIndex};
-    `,
-  };
-};
-
-export const euiColorStopStyles = (euiThemeContext: UseEuiTheme) => {
-  const colorPicker = euiColorPickerVariables(euiThemeContext);
-
-  return {
-    // Base
-    euiColorStop: css`
-      inline-size: ${colorPicker.width};
-    `,
-  };
-};
diff --git a/src/components/color_picker/color_stops/color_stop_thumb.test.tsx b/src/components/color_picker/color_stops/color_stop_thumb.test.tsx
deleted file mode 100644
index f32f2eba097..00000000000
--- a/src/components/color_picker/color_stops/color_stop_thumb.test.tsx
+++ /dev/null
@@ -1,143 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-
-import { EuiColorStopThumb } from './color_stop_thumb';
-
-import { requiredProps } from '../../../test';
-import { shouldRenderCustomStyles } from '../../../test/internal';
-import { render } from '../../../test/rtl';
-
-jest.mock('../../portal', () => ({
-  EuiPortal: ({ children }: { children: any }) => children,
-}));
-
-const onChange = jest.fn();
-
-// Note: Unit/interaction tests can be found in ./color_stops.test
-
-shouldRenderCustomStyles(
-  <EuiColorStopThumb
-    onChange={onChange}
-    stop={0}
-    color="#FF0000"
-    localMin={0}
-    localMax={24}
-    globalMin={0}
-    globalMax={100}
-    colorPickerMode="default"
-    isPopoverOpen={true}
-    openPopover={() => {}}
-    closePopover={() => {}}
-    {...requiredProps}
-  />,
-  { childProps: ['valueInputProps'] }
-);
-
-test('renders EuiColorStopThumb', () => {
-  const { container } = render(
-    <EuiColorStopThumb
-      onChange={onChange}
-      stop={0}
-      color="#FF0000"
-      localMin={0}
-      localMax={24}
-      globalMin={0}
-      globalMax={100}
-      colorPickerMode="default"
-      isPopoverOpen={false}
-      openPopover={() => {}}
-      closePopover={() => {}}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders swatch-only EuiColorStopThumb', () => {
-  const { container } = render(
-    <EuiColorStopThumb
-      onChange={onChange}
-      stop={0}
-      color="#FF0000"
-      localMin={0}
-      localMax={24}
-      globalMin={0}
-      globalMax={100}
-      colorPickerMode="swatch"
-      isPopoverOpen={false}
-      openPopover={() => {}}
-      closePopover={() => {}}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders picker-only EuiColorStopThumb', () => {
-  const { container } = render(
-    <EuiColorStopThumb
-      onChange={onChange}
-      stop={0}
-      color="#FF0000"
-      localMin={0}
-      localMax={24}
-      globalMin={0}
-      globalMax={100}
-      colorPickerMode="picker"
-      isPopoverOpen={false}
-      openPopover={() => {}}
-      closePopover={() => {}}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders disabled EuiColorStopThumb', () => {
-  const { container } = render(
-    <EuiColorStopThumb
-      onChange={onChange}
-      stop={0}
-      color="#FF0000"
-      localMin={0}
-      localMax={24}
-      globalMin={0}
-      globalMax={100}
-      colorPickerMode="default"
-      disabled={true}
-      isPopoverOpen={false}
-      openPopover={() => {}}
-      closePopover={() => {}}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders readOnly EuiColorStopThumb', () => {
-  const { container } = render(
-    <EuiColorStopThumb
-      onChange={onChange}
-      stop={0}
-      color="#FF0000"
-      localMin={0}
-      localMax={24}
-      globalMin={0}
-      globalMax={100}
-      colorPickerMode="default"
-      readOnly={true}
-      isPopoverOpen={false}
-      openPopover={() => {}}
-      closePopover={() => {}}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
diff --git a/src/components/color_picker/color_stops/color_stop_thumb.tsx b/src/components/color_picker/color_stops/color_stop_thumb.tsx
deleted file mode 100644
index 271b0ab2aaa..00000000000
--- a/src/components/color_picker/color_stops/color_stop_thumb.tsx
+++ /dev/null
@@ -1,418 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React, {
-  FunctionComponent,
-  CSSProperties,
-  ReactChild,
-  useEffect,
-  useMemo,
-  useRef,
-  useState,
-} from 'react';
-import classNames from 'classnames';
-
-import { CommonProps } from '../../common';
-import {
-  getPositionFromStop,
-  getStopFromMouseLocation,
-  isColorInvalid,
-  isStopInvalid,
-} from './utils';
-import { getChromaColor } from '../utils';
-import { keys, useMouseMove, useEuiTheme } from '../../../services';
-
-import { EuiButtonIcon } from '../../button';
-import { EuiColorPicker, EuiColorPickerProps } from '../color_picker';
-import { EuiFlexGroup, EuiFlexItem } from '../../flex';
-import { EuiFieldNumber, EuiFieldNumberProps, EuiFormRow } from '../../form';
-import { EuiI18n } from '../../i18n';
-import { EuiPopover } from '../../popover';
-import { EuiScreenReaderOnly } from '../../accessibility';
-import { EuiSpacer } from '../../spacer';
-import { EuiRangeThumb } from '../../form/range/range_thumb';
-
-import {
-  euiColorStopThumbStyles,
-  euiColorStopThumbPopoverStyles,
-  euiColorStopStyles,
-} from './color_stop_thumb.styles';
-
-export interface ColorStop {
-  stop: number;
-  color: string;
-}
-
-interface EuiColorStopThumbProps extends CommonProps, ColorStop {
-  className?: string;
-  onChange: (colorStop: ColorStop) => void;
-  onFocus?: () => void;
-  onRemove?: () => void;
-  globalMin: number;
-  globalMax: number;
-  localMin: number;
-  localMax: number;
-  min?: number;
-  max?: number;
-  isRangeMin?: boolean;
-  isRangeMax?: boolean;
-  parentRef?: HTMLDivElement | null;
-  colorPickerMode: EuiColorPickerProps['mode'];
-  colorPickerShowAlpha?: EuiColorPickerProps['showAlpha'];
-  colorPickerSwatches?: EuiColorPickerProps['swatches'];
-  disabled?: boolean;
-  readOnly?: boolean;
-  isPopoverOpen: boolean;
-  openPopover: () => void;
-  closePopover: () => void;
-  'data-index'?: string;
-  'aria-valuetext'?: string;
-  style?: CSSProperties;
-  valueInputProps?: Partial<EuiFieldNumberProps>;
-}
-
-export const EuiColorStopThumb: FunctionComponent<EuiColorStopThumbProps> = ({
-  className,
-  stop,
-  color,
-  onChange,
-  onFocus,
-  onRemove,
-  globalMin,
-  globalMax,
-  localMin,
-  localMax,
-  min,
-  max,
-  isRangeMin = false,
-  isRangeMax = false,
-  parentRef,
-  colorPickerMode,
-  colorPickerShowAlpha,
-  colorPickerSwatches,
-  disabled,
-  readOnly,
-  isPopoverOpen,
-  openPopover,
-  closePopover,
-  'data-index': dataIndex,
-  'aria-valuetext': ariaValueText,
-  style,
-  valueInputProps = {},
-  ...rest
-}) => {
-  const background = useMemo(() => {
-    const chromaColor = getChromaColor(color, colorPickerShowAlpha);
-    return chromaColor ? chromaColor.css() : undefined;
-  }, [color, colorPickerShowAlpha]);
-  const [hasFocus, setHasFocus] = useState(isPopoverOpen);
-  const [colorIsInvalid, setColorIsInvalid] = useState(
-    isColorInvalid(color, colorPickerShowAlpha)
-  );
-  const [stopIsInvalid, setStopIsInvalid] = useState(isStopInvalid(stop));
-  const [numberInputRef, setNumberInputRef] = useState<HTMLInputElement | null>(
-    null
-  );
-  const popoverRef = useRef<EuiPopover>(null);
-
-  useEffect(() => {
-    if (isPopoverOpen && popoverRef && popoverRef.current) {
-      popoverRef.current.positionPopoverFixed();
-    }
-  }, [isPopoverOpen, stop]);
-
-  const getStopFromMouseLocationFn = (location: { x: number; y: number }) => {
-    // Guard against `null` ref in usage
-    return getStopFromMouseLocation(location, parentRef!, globalMin, globalMax);
-  };
-
-  const getPositionFromStopFn = (stop: ColorStop['stop']) => {
-    // Guard against `null` ref in usage
-    return getPositionFromStop(stop, parentRef!, globalMin, globalMax);
-  };
-
-  const handleOnRemove = () => {
-    if (onRemove) {
-      closePopover();
-      onRemove();
-    }
-  };
-
-  const handleFocus = () => {
-    setHasFocus(true);
-    if (onFocus) {
-      onFocus();
-    }
-  };
-
-  const setHasFocusTrue = () => setHasFocus(true);
-  const setHasFocusFalse = () => setHasFocus(false);
-
-  const handleColorChange = (value: ColorStop['color']) => {
-    setColorIsInvalid(isColorInvalid(value, colorPickerShowAlpha));
-    onChange({ stop, color: value });
-  };
-
-  const handleStopChange = (value: ColorStop['stop']) => {
-    const willBeInvalid = value > localMax || value < localMin;
-
-    if (willBeInvalid) {
-      if (value > localMax) {
-        value = localMax;
-      }
-      if (value < localMin) {
-        value = localMin;
-      }
-    }
-    setStopIsInvalid(isStopInvalid(value));
-    onChange({ stop: value, color });
-  };
-
-  const handleStopInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    let value = parseFloat(e.target.value);
-
-    const willBeInvalid = value > globalMax || value < globalMin;
-
-    if (willBeInvalid) {
-      if (value > globalMax && max != null) {
-        value = globalMax;
-      }
-      if (value < globalMin && min != null) {
-        value = globalMin;
-      }
-    }
-
-    setStopIsInvalid(isStopInvalid(value));
-    onChange({ stop: value, color });
-  };
-
-  const handlePointerChange = (
-    location: { x: number; y: number },
-    isFirstInteraction?: boolean
-  ) => {
-    if (isFirstInteraction) return; // Prevents change on the initial MouseDown event
-    if (parentRef == null) {
-      return;
-    }
-    const newStop = getStopFromMouseLocationFn(location);
-    handleStopChange(newStop);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLButtonElement>) => {
-    switch (event.key) {
-      case keys.ENTER:
-        event.preventDefault();
-        openPopover();
-        break;
-
-      case keys.ARROW_LEFT:
-        event.preventDefault();
-        if (readOnly) return;
-        handleStopChange(stop - 1);
-        break;
-
-      case keys.ARROW_RIGHT:
-        event.preventDefault();
-        if (readOnly) return;
-        handleStopChange(stop + 1);
-        break;
-    }
-  };
-
-  const [handleMouseDown, handleInteraction] =
-    useMouseMove<HTMLButtonElement>(handlePointerChange);
-
-  const handleOnMouseDown = (e: React.MouseEvent<HTMLButtonElement>) => {
-    if (!readOnly) {
-      handleMouseDown(e);
-    }
-    openPopover();
-  };
-
-  const handleTouchInteraction = (e: React.TouchEvent<HTMLButtonElement>) => {
-    if (!readOnly) {
-      handleInteraction(e);
-    }
-  };
-
-  const handleTouchStart = (e: React.TouchEvent<HTMLButtonElement>) => {
-    handleTouchInteraction(e);
-    if (!isPopoverOpen) {
-      openPopover();
-    }
-  };
-
-  const euiTheme = useEuiTheme();
-
-  const popoverStyles = euiColorStopThumbPopoverStyles(euiTheme);
-  const cssPopoverStyles = [
-    popoverStyles.euiColorStopThumbPopover,
-    (hasFocus || isPopoverOpen) && popoverStyles.hasFocus,
-  ];
-
-  const thumbStyles = euiColorStopThumbStyles(euiTheme);
-  const cssThumbStyles = [
-    thumbStyles.euiColorStopThumb,
-    isPopoverOpen && thumbStyles.isPopoverOpen,
-  ];
-
-  const colorStopStyles = euiColorStopStyles(euiTheme);
-  const cssColorStopStyles = colorStopStyles.euiColorStop;
-
-  const classes = classNames('euiColorStopPopover', className);
-
-  return (
-    <EuiPopover
-      css={cssPopoverStyles}
-      {...rest}
-      ref={popoverRef}
-      className={classes}
-      anchorClassName="euiColorStopThumbPopover__anchor"
-      panelPaddingSize="s"
-      isOpen={isPopoverOpen}
-      closePopover={closePopover}
-      initialFocus={numberInputRef || undefined}
-      focusTrapProps={{ clickOutsideDisables: false }}
-      panelProps={{
-        css: numberInputRef ? undefined : popoverStyles.isLoadingPanel,
-      }}
-      style={{
-        ...style,
-        left: `${getPositionFromStopFn(stop)}%`,
-      }}
-      button={
-        <EuiI18n
-          tokens={[
-            'euiColorStopThumb.buttonAriaLabel',
-            'euiColorStopThumb.buttonTitle',
-          ]}
-          defaults={[
-            'Press the Enter key to modify this stop. Press Escape to focus the group',
-            'Click to edit, drag to reposition',
-          ]}
-        >
-          {([buttonAriaLabel, buttonTitle]: ReactChild[]) => {
-            const ariaLabel = buttonAriaLabel as string;
-            const title = buttonTitle as string;
-            return (
-              <EuiRangeThumb
-                data-test-subj="euiColorStopThumb"
-                data-index={dataIndex}
-                min={localMin}
-                max={localMax}
-                value={stop}
-                onFocus={handleFocus}
-                onBlur={setHasFocusFalse}
-                onMouseOver={setHasFocusTrue}
-                onMouseOut={setHasFocusFalse}
-                onKeyDown={handleKeyDown}
-                onMouseDown={handleOnMouseDown}
-                onTouchStart={handleTouchStart}
-                onTouchMove={handleTouchInteraction}
-                aria-valuetext={ariaValueText}
-                aria-label={ariaLabel}
-                title={title}
-                className="euiColorStopThumb"
-                css={cssThumbStyles}
-                tabIndex={-1}
-                style={{
-                  background,
-                }}
-                disabled={disabled}
-              />
-            );
-          }}
-        </EuiI18n>
-      }
-    >
-      <div
-        className="euiColorStop"
-        css={cssColorStopStyles}
-        data-test-subj="euiColorStopPopover"
-      >
-        <EuiScreenReaderOnly>
-          <p aria-live="polite">
-            <EuiI18n
-              token="euiColorStopThumb.screenReaderAnnouncement"
-              default="A popup with a color stop edit form opened.
-            Tab forward to cycle through form controls or press
-            escape to close this popup."
-            />
-          </p>
-        </EuiScreenReaderOnly>
-        <EuiFlexGroup gutterSize="s" responsive={false}>
-          <EuiFlexItem>
-            <EuiI18n
-              tokens={[
-                'euiColorStopThumb.stopLabel',
-                'euiColorStopThumb.stopErrorMessage',
-              ]}
-              defaults={['Stop value', 'Value is out of range']}
-            >
-              {([stopLabel, stopErrorMessage]: React.ReactChild[]) => (
-                <EuiFormRow
-                  label={stopLabel}
-                  display="rowCompressed"
-                  isInvalid={stopIsInvalid}
-                  error={stopIsInvalid ? stopErrorMessage : null}
-                >
-                  <EuiFieldNumber
-                    {...valueInputProps}
-                    inputRef={setNumberInputRef}
-                    compressed={true}
-                    readOnly={readOnly}
-                    min={isRangeMin || min == null ? undefined : localMin}
-                    max={isRangeMax || max == null ? undefined : localMax}
-                    value={isStopInvalid(stop) ? '' : stop}
-                    isInvalid={stopIsInvalid}
-                    onChange={handleStopInputChange}
-                  />
-                </EuiFormRow>
-              )}
-            </EuiI18n>
-          </EuiFlexItem>
-          {!readOnly && (
-            <EuiFlexItem grow={false}>
-              <EuiFormRow display="rowCompressed" hasEmptyLabelSpace={true}>
-                <EuiI18n
-                  token="euiColorStopThumb.removeLabel"
-                  default="Remove this stop"
-                >
-                  {(removeLabel: string) => (
-                    <EuiButtonIcon
-                      iconType="trash"
-                      color="danger"
-                      aria-label={removeLabel}
-                      title={removeLabel}
-                      disabled={!onRemove}
-                      onClick={handleOnRemove}
-                    />
-                  )}
-                </EuiI18n>
-              </EuiFormRow>
-            </EuiFlexItem>
-          )}
-        </EuiFlexGroup>
-        {!readOnly && <EuiSpacer size="s" />}
-        <EuiColorPicker
-          readOnly={readOnly}
-          onChange={handleColorChange}
-          color={color}
-          mode={readOnly ? 'secondaryInput' : colorPickerMode}
-          swatches={colorPickerSwatches}
-          display="inline"
-          showAlpha={colorPickerShowAlpha}
-          isInvalid={colorIsInvalid}
-          secondaryInputDisplay={
-            colorPickerMode === 'swatch' ? 'none' : 'bottom'
-          }
-        />
-      </div>
-    </EuiPopover>
-  );
-};
diff --git a/src/components/color_picker/color_stops/color_stops.styles.ts b/src/components/color_picker/color_stops/color_stops.styles.ts
deleted file mode 100644
index abf000a06e0..00000000000
--- a/src/components/color_picker/color_stops/color_stops.styles.ts
+++ /dev/null
@@ -1,114 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { css } from '@emotion/react';
-
-import { UseEuiTheme, darken, brighten, hexToRgb } from '../../../services';
-import { mathWithUnits, euiCanAnimate } from '../../../global_styling';
-import { euiCustomControl } from '../../form/form.styles';
-
-import {
-  euiRangeThumbStyle,
-  euiRangeVariables,
-} from '../../form/range/range.styles';
-
-export const euiColorStopsStyles = (euiThemeContext: UseEuiTheme) => {
-  const range = euiRangeVariables(euiThemeContext);
-  const { euiTheme, colorMode } = euiThemeContext;
-
-  const isDarkMode = colorMode === 'DARK';
-  const stripeColor = isDarkMode
-    ? brighten(range.trackColor, 0.5)
-    : darken(range.trackColor, 0.5);
-  const stripesBackground = `repeating-linear-gradient(
-    -45deg,
-    ${range.trackColor},
-    ${range.trackColor} 25%,
-    ${stripeColor} 25%,
-    ${stripeColor} 50%,
-    ${range.trackColor} 50%
-  )`;
-
-  return {
-    // Base
-    euiColorStops: css``,
-    isEnabled: css`
-      /* Show focus ring on keyboard focus only and not mouse click/drag */
-      &:focus {
-        outline: none;
-      }
-
-      &:focus-visible {
-        .euiColorStops__track::after {
-          box-shadow: 0 0 0 1px
-              rgba(${hexToRgb(euiTheme.colors.emptyShade).join(', ')}, 0.8),
-            0 0 0 3px ${range.focusColor};
-        }
-      }
-    `,
-    isDisabled: css``,
-    isHoverDisabled: css``,
-    isReadOnly: css``,
-    isDragging: css`
-      cursor: grabbing;
-    `,
-    euiColorStops__track: css`
-      &::after {
-        background: ${stripesBackground};
-        background-size: ${euiTheme.size.xs} ${euiTheme.size.xs}; /* Percentage stops and background-size are both needed for Safari to render the gradient at fullWidth correctly */
-      }
-    `,
-    euiColorStops__addTarget: css`
-      ${euiCustomControl(euiThemeContext, { type: 'round' })}
-      ${euiRangeThumbStyle(euiThemeContext)}
-      position: absolute;
-      inset-block-start: 0;
-      block-size: ${range.thumbHeight};
-      inline-size: ${range.thumbHeight};
-      background-color: ${euiTheme.colors.lightestShade};
-      pointer-events: none;
-      opacity: 0;
-      border: ${euiTheme.border.width.thin} solid ${euiTheme.colors.darkShade};
-      box-shadow: none;
-      z-index: ${range.thumbZIndex};
-
-      ${euiCanAnimate} {
-        transition: opacity ${euiTheme.animation.fast} ease-in;
-      }
-    `,
-  };
-};
-
-export const euiColorStopsAddContainerStyles = (
-  euiThemeContext: UseEuiTheme
-) => {
-  const range = euiRangeVariables(euiThemeContext);
-
-  return {
-    euiColorStopsAddContainer: css`
-      display: block;
-      position: absolute;
-      inset-inline-start: 0;
-      inset-inline-end: 0;
-      inset-block-start: 50%;
-      block-size: ${range.thumbHeight};
-      margin-block-start: ${mathWithUnits(range.thumbHeight, (x) => x * -0.5)};
-      z-index: ${range.thumbZIndex};
-    `,
-    isEnabled: css`
-      &:hover {
-        cursor: pointer;
-
-        .euiColorStops__addTarget {
-          opacity: 0.7;
-        }
-      }
-    `,
-    isDisabled: css``,
-  };
-};
diff --git a/src/components/color_picker/color_stops/color_stops.test.tsx b/src/components/color_picker/color_stops/color_stops.test.tsx
deleted file mode 100644
index 889d51199f6..00000000000
--- a/src/components/color_picker/color_stops/color_stops.test.tsx
+++ /dev/null
@@ -1,531 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { mount } from 'enzyme';
-import { render } from '../../../test/rtl';
-
-import { EuiColorStops } from './color_stops';
-
-import {
-  VISUALIZATION_COLORS,
-  DEFAULT_VISUALIZATION_COLOR,
-  keys,
-} from '../../../services';
-import { requiredProps, findTestSubject } from '../../../test';
-import { shouldRenderCustomStyles } from '../../../test/internal';
-import { EuiFieldNumber } from '../../form/field_number';
-
-jest.mock('../../portal', () => ({
-  EuiPortal: ({ children }: { children: any }) => children,
-}));
-
-const onChange = jest.fn();
-
-const colorStopsArray = [
-  { stop: 0, color: '#FF0000' },
-  { stop: 25, color: '#00FF00' },
-  { stop: 35, color: '#0000FF' },
-];
-
-// Note: A couple tests that would be nice, but can't be accomplished at the moment:
-// - Tab to bypass thumbs (tabindex="-1" not respected)
-// - Drag to reposition thumb (we can't get real page position info)
-
-shouldRenderCustomStyles(
-  <EuiColorStops
-    label="Test"
-    onChange={onChange}
-    colorStops={colorStopsArray}
-    min={0}
-    max={100}
-    {...requiredProps}
-  />
-);
-
-test('renders EuiColorStops', () => {
-  const { container } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders free-range EuiColorStops', () => {
-  const { container } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={[]}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders min-only EuiColorStops', () => {
-  const { container } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={[]}
-      min={0}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders max-only EuiColorStops', () => {
-  const { container } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={[]}
-      max={100}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders compressed EuiColorStops', () => {
-  const { container } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      compressed={true}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders readOnly EuiColorStops', () => {
-  const { container } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      readOnly={true}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders fullWidth EuiColorStops', () => {
-  const { container } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      fullWidth={true}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders disabled EuiColorStops', () => {
-  const { container } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      disabled={true}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders fixed stop EuiColorStops', () => {
-  const { container } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      stopType="fixed"
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('renders stepped stop EuiColorStops', () => {
-  const { getByTestSubject } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      stopType="stepped"
-      stepNumber={10}
-      {...requiredProps}
-    />
-  );
-
-  expect(
-    getByTestSubject('euiRangeHighlightProgress').getAttribute('style')
-  ).toEqual('margin-inline-start: 0%; inline-size: 100%;');
-});
-
-test('renders empty EuiColorStops', () => {
-  const { container } = render(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={[]}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-  expect(container.firstChild).toMatchSnapshot();
-});
-
-test('popover color selector is shown when the thumb is clicked', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-
-  findTestSubject(colorStops, 'euiColorStopThumb')
-    .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 })
-    .simulate('mouseup', { pageX: 0, pageY: 0 });
-  const colorSelector = findTestSubject(colorStops, 'euiColorStopPopover');
-  expect(colorSelector.length).toBe(1);
-});
-
-test('passes value input props to number input', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      valueInputProps={{
-        append: '%',
-      }}
-      {...requiredProps}
-    />
-  );
-
-  findTestSubject(colorStops, 'euiColorStopThumb')
-    .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 })
-    .simulate('mouseup', { pageX: 0, pageY: 0 });
-  const colorSelector = findTestSubject(colorStops, 'euiColorStopPopover');
-  expect(colorSelector.find(EuiFieldNumber).prop('append')).toEqual('%');
-});
-
-test('stop input updates stops', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-
-  findTestSubject(colorStops, 'euiColorStopThumb')
-    .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 })
-    .simulate('mouseup', { pageX: 0, pageY: 0 });
-  const event = { target: { value: '10' } };
-  const inputs = colorStops.find('input[type="number"]');
-  expect(inputs.length).toBe(1);
-  inputs.simulate('change', event);
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith(
-    [
-      { color: '#FF0000', stop: 10 },
-      { color: '#00FF00', stop: 25 },
-      { color: '#0000FF', stop: 35 },
-    ],
-    false
-  );
-});
-
-test('stop input updates stops with error prevention (reset to bounds)', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-
-  findTestSubject(colorStops, 'euiColorStopThumb')
-    .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 })
-    .simulate('mouseup', { pageX: 0, pageY: 0 });
-  const event = { target: { value: '1000' } };
-  const inputs = colorStops.find('input[type="number"]');
-  inputs.simulate('change', event);
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith(
-    [
-      { color: '#FF0000', stop: 100 },
-      { color: '#00FF00', stop: 25 },
-      { color: '#0000FF', stop: 35 },
-    ],
-    false
-  );
-});
-
-test('hex input updates stops', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-
-  findTestSubject(colorStops, 'euiColorStopThumb')
-    .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 })
-    .simulate('mouseup', { pageX: 0, pageY: 0 });
-  const event = { target: { value: '#FFFFFF' } };
-  const inputs = colorStops.find('input[type="text"]');
-  expect(inputs.length).toBe(1);
-  inputs.simulate('change', event);
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith(
-    [
-      { color: '#FFFFFF', stop: 0 },
-      { color: '#00FF00', stop: 25 },
-      { color: '#0000FF', stop: 35 },
-    ],
-    false
-  );
-});
-
-test('hex input updates stops with error', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-
-  findTestSubject(colorStops, 'euiColorStopThumb')
-    .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 })
-    .simulate('mouseup', { pageX: 0, pageY: 0 });
-  const event = { target: { value: '#FFFFF' } };
-  const inputs = colorStops.find('input[type="text"]');
-  inputs.simulate('change', event);
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith(
-    [
-      { color: '#FFFFF', stop: 0 },
-      { color: '#00FF00', stop: 25 },
-      { color: '#0000FF', stop: 35 },
-    ],
-    true // isInvalid
-  );
-});
-
-test('picker updates stops', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-
-  findTestSubject(colorStops, 'euiColorStopThumb')
-    .first()
-    .simulate('mousedown', { pageX: 0, pageY: 0 })
-    .simulate('mouseup', { pageX: 0, pageY: 0 });
-  const swatches = colorStops.find('button.euiColorPicker__swatchSelect');
-  expect(swatches.length).toBe(VISUALIZATION_COLORS.length);
-  swatches.first().simulate('click');
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith(
-    [
-      { color: VISUALIZATION_COLORS[0], stop: 0 },
-      { color: '#00FF00', stop: 25 },
-      { color: '#0000FF', stop: 35 },
-    ],
-    false
-  );
-});
-
-test('thumb focus changes', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-
-  const wrapper = findTestSubject(colorStops, 'euiColorStops');
-  const thumbs = findTestSubject(colorStops, 'euiColorStopThumb');
-  wrapper.simulate('focus');
-  wrapper.simulate('keydown', {
-    key: keys.ARROW_DOWN,
-  });
-  expect(thumbs.first().getDOMNode()).toEqual(document.activeElement);
-  thumbs.first().simulate('keydown', {
-    key: keys.ARROW_DOWN,
-  });
-  expect(thumbs.at(1).getDOMNode()).toEqual(document.activeElement);
-});
-
-test('thumb direction movement', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-
-  const wrapper = findTestSubject(colorStops, 'euiColorStops');
-  const thumbs = findTestSubject(colorStops, 'euiColorStopThumb');
-  wrapper.simulate('focus');
-  wrapper.simulate('keydown', {
-    key: keys.ARROW_DOWN,
-  });
-  expect(thumbs.first().getDOMNode()).toEqual(document.activeElement);
-  thumbs.first().simulate('keydown', {
-    key: keys.ARROW_RIGHT,
-  });
-  expect(onChange).toBeCalledWith(
-    [
-      { color: '#FF0000', stop: 1 },
-      { color: '#00FF00', stop: 25 },
-      { color: '#0000FF', stop: 35 },
-    ],
-    false
-  );
-  thumbs.first().simulate('keydown', {
-    key: keys.ARROW_LEFT,
-  });
-  expect(onChange).toBeCalledWith(
-    [
-      { color: '#FF0000', stop: 0 },
-      { color: '#00FF00', stop: 25 },
-      { color: '#0000FF', stop: 35 },
-    ],
-    false
-  );
-});
-
-test('add new thumb via keyboard', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-
-  const wrapper = findTestSubject(colorStops, 'euiColorStops');
-  wrapper.simulate('focus');
-  wrapper.simulate('keydown', {
-    key: keys.ENTER,
-  });
-  expect(onChange).toBeCalled();
-  expect(onChange).toBeCalledWith(
-    [
-      { color: '#FF0000', stop: 0 },
-      { color: '#00FF00', stop: 25 },
-      { color: '#0000FF', stop: 35 },
-      { color: DEFAULT_VISUALIZATION_COLOR, stop: 45 },
-    ],
-    false
-  );
-});
-
-test('add new thumb via click', () => {
-  const colorStops = mount(
-    <EuiColorStops
-      label="Test"
-      onChange={onChange}
-      colorStops={colorStopsArray}
-      min={0}
-      max={100}
-      {...requiredProps}
-    />
-  );
-
-  const wrapper = findTestSubject(colorStops, 'euiColorStopsAdd');
-  wrapper.simulate('click', { pageX: 45, pageY: 0 });
-  expect(onChange).toBeCalled();
-  // This is a very odd expectation.
-  // But we can't get actual page positions in this environment (no getBoundingClientRect)
-  // So we'll expect the _correct_ color and _incorrect_ stop value (NaN),
-  // with the `isInvalid` arg _correctly_ true as a result.
-  expect(onChange).toBeCalledWith(
-    [
-      { color: '#FF0000', stop: 0 },
-      { color: '#00FF00', stop: 25 },
-      { color: '#0000FF', stop: 35 },
-      { color: DEFAULT_VISUALIZATION_COLOR, stop: NaN },
-    ],
-    true // isInvalid
-  );
-});
diff --git a/src/components/color_picker/color_stops/color_stops.tsx b/src/components/color_picker/color_stops/color_stops.tsx
deleted file mode 100644
index 75712428b08..00000000000
--- a/src/components/color_picker/color_stops/color_stops.tsx
+++ /dev/null
@@ -1,595 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React, {
-  FunctionComponent,
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-} from 'react';
-import classNames from 'classnames';
-
-import { CommonProps } from '../../common';
-import {
-  keys,
-  DEFAULT_VISUALIZATION_COLOR,
-  getSteppedGradient,
-  useEuiTheme,
-} from '../../../services';
-import { EuiColorStopThumb, ColorStop } from './color_stop_thumb';
-import {
-  addStop,
-  addDefinedStop,
-  getPositionFromStop,
-  getStopFromMouseLocation,
-  isInvalid,
-  removeStop,
-} from './utils';
-
-import { EuiColorPickerProps } from '../color_picker';
-import { getChromaColor } from '../utils';
-import { EuiI18n } from '../../i18n';
-import { EuiScreenReaderOnly } from '../../accessibility';
-import { EuiRangeHighlight } from '../../form/range/range_highlight';
-import { EuiRangeTrack } from '../../form/range/range_track';
-import { EuiRangeWrapper } from '../../form/range/range_wrapper';
-import { EuiFieldNumberProps } from '../../form/field_number';
-
-import {
-  euiColorStopsStyles,
-  euiColorStopsAddContainerStyles,
-} from './color_stops.styles';
-
-/**
- * @deprecated
- */
-export interface EuiColorStopsProps extends CommonProps {
-  addColor?: ColorStop['color'];
-  /**
-   * An array of #ColorStop. The stops must be numbers in an ordered range.
-   */
-  colorStops: ColorStop[];
-  onChange: (stops?: ColorStop[], isInvalid?: boolean) => void;
-  fullWidth?: boolean;
-  disabled?: boolean;
-  readOnly?: boolean;
-  invalid?: boolean;
-  compressed?: boolean;
-  className?: string;
-  max?: number;
-  min?: number;
-  label: string;
-  /**
-   *  Specify the type of stops:
-   *  `fixed`: individual color blocks.
-   *  `gradient`: each color fades into the next.
-   *  `stepped`: interpolation between colors with a fixed number of steps.
-   */
-  stopType?: 'fixed' | 'gradient' | 'stepped';
-  /**
-   * Only works when `stopType="stepped"`
-   */
-  stepNumber?: number;
-  mode?: EuiColorPickerProps['mode'];
-  swatches?: EuiColorPickerProps['swatches'];
-  showAlpha?: EuiColorPickerProps['showAlpha'];
-  /**
-   * Props passed to the value input field in the color stop popover.
-   * Can be used to configure functionality like append or prepend.
-   */
-  valueInputProps?: Partial<
-    Omit<
-      EuiFieldNumberProps,
-      | 'inputRef'
-      | 'compressed'
-      | 'readOnly'
-      | 'min'
-      | 'max'
-      | 'value'
-      | 'isInvalid'
-      | 'onChange'
-    >
-  >;
-}
-
-// Because of how the thumbs are rendered in the popover, using ref results in an infinite loop.
-// We'll instead use old fashioned namespaced DOM selectors to get references
-const STOP_ATTR = 'euiColorStop_';
-
-const DEFAULT_MIN = 0;
-const DEFAULT_MAX = 100;
-
-function isTargetAThumb(target: HTMLElement | EventTarget) {
-  const element = target as HTMLElement;
-  const attr = element.getAttribute('data-index');
-  return attr && attr.indexOf(STOP_ATTR) > -1;
-}
-
-function sortStops(colorStops: ColorStop[]) {
-  return colorStops
-    .map((el, index) => {
-      return {
-        ...el,
-        id: index,
-      };
-    })
-    .sort((a, b) => a.stop - b.stop);
-}
-
-function getValidStops(colorStops: ColorStop[]) {
-  return colorStops.map((el) => el.stop).filter((stop) => !isNaN(stop));
-}
-
-function getRangeMin(colorStops: ColorStop[], min?: number) {
-  const rangeMin = min || DEFAULT_MIN;
-  const stops = getValidStops(colorStops);
-  const first = Math.min(...stops); // https://johnresig.com/blog/fast-javascript-maxmin/
-
-  if (first < rangeMin) {
-    if (stops.length === 1) {
-      return first - DEFAULT_MIN;
-    } else if (stops.length >= 2) {
-      return first;
-    }
-  }
-  return DEFAULT_MIN;
-}
-function getRangeMax(colorStops: ColorStop[], max?: number) {
-  const rangeMax = max || DEFAULT_MAX;
-  const stops = getValidStops(colorStops);
-  const last = Math.max(...stops); // https://johnresig.com/blog/fast-javascript-maxmin/
-
-  if (last > rangeMax) {
-    if (stops.length === 1) {
-      return last + DEFAULT_MAX;
-    } else if (stops.length >= 2) {
-      return last;
-    }
-  }
-  return DEFAULT_MAX;
-}
-
-/**
- * @deprecated - EuiColorStops is scheduled for deprecation due to low internal usage and high
- * maintenance requirements. If necessary, we recommend copying this component into your own application.
- *
- * The component will be permanently removed in October 2023.
- */
-export const EuiColorStops: FunctionComponent<EuiColorStopsProps> = ({
-  addColor = DEFAULT_VISUALIZATION_COLOR,
-  max,
-  min,
-  mode = 'default',
-  colorStops,
-  onChange,
-  disabled,
-  readOnly,
-  compressed,
-  fullWidth,
-  className,
-  label,
-  stopType = 'gradient',
-  stepNumber = 10,
-  swatches,
-  showAlpha = false,
-  valueInputProps,
-  ...rest
-}) => {
-  const sortedStops = useMemo(() => sortStops(colorStops), [colorStops]);
-  const rangeMax: number = useMemo(() => {
-    const result = max != null ? max : getRangeMax(colorStops, max);
-    const width = max != null ? 0 : Math.round(result * 0.05);
-    return !isNaN(result) ? result + width : DEFAULT_MAX;
-  }, [colorStops, max]);
-  const rangeMin: number = useMemo(() => {
-    const result = min != null ? min : getRangeMin(colorStops, min);
-    const width = min != null ? 0 : Math.round(rangeMax * 0.05);
-    return !isNaN(result) ? result - width : DEFAULT_MIN;
-  }, [colorStops, min, rangeMax]);
-  const [hasFocus, setHasFocus] = useState(false);
-  const [focusedStopIndex, setFocusedStopIndex] = useState<number | null>(null);
-  const [openedStopId, setOpenedStopId] = useState<number | null>(null);
-  const [wrapperRef, setWrapperRef] = useState<HTMLDivElement | null>(null);
-  const [addTargetPosition, setAddTargetPosition] = useState<number>(0);
-  const [isHoverDisabled, setIsHoverDisabled] = useState<boolean>(false);
-  const [focusStopOnUpdate, setFocusStopOnUpdate] = useState<number | null>(
-    null
-  );
-
-  const isNotInteractive = disabled || readOnly;
-  const isDragging = isHoverDisabled && !isNotInteractive;
-  const addContainerIsDisabled = isHoverDisabled || isNotInteractive;
-
-  const classes = classNames('euiColorStops', className);
-
-  const euiTheme = useEuiTheme();
-  const styles = euiColorStopsStyles(euiTheme);
-  const cssPopoverStyles = [
-    styles.euiColorStops,
-    !disabled ? styles.isEnabled : styles.isDisabled,
-    readOnly && styles.isReadOnly,
-    isDragging && styles.isDragging,
-  ];
-  const cssTrackStyles = [styles.euiColorStops__track];
-  const cssAddTargetStyles = [styles.euiColorStops__addTarget];
-
-  const addContainerStyles = euiColorStopsAddContainerStyles(euiTheme);
-  const cssAddContainerStyles = [
-    addContainerStyles.euiColorStopsAddContainer,
-    !addContainerIsDisabled
-      ? addContainerStyles.isEnabled
-      : addContainerStyles.isDisabled,
-  ];
-
-  const getStopFromMouseLocationFn = (location: { x: number; y: number }) => {
-    // Guard against `null` ref in usage
-    return getStopFromMouseLocation(
-      location,
-      wrapperRef!,
-      min || rangeMin,
-      max || rangeMax
-    );
-  };
-
-  const getPositionFromStopFn = (stop: ColorStop['stop']) => {
-    // Guard against `null` ref in usage
-    return getPositionFromStop(
-      stop,
-      wrapperRef!,
-      min || rangeMin,
-      max || rangeMax
-    );
-  };
-
-  const handleOnChange = useCallback(
-    (colorStops: ColorStop[]) => {
-      onChange(colorStops, isInvalid(colorStops, showAlpha));
-    },
-    [onChange, showAlpha]
-  );
-
-  const onFocusStop = useCallback(
-    (index: number) => {
-      if (disabled || !wrapperRef) return;
-      const toFocus = wrapperRef.querySelector<HTMLElement>(
-        `[data-index=${STOP_ATTR}${index}]`
-      );
-      if (toFocus) {
-        setHasFocus(false);
-        setFocusedStopIndex(index);
-        toFocus.focus();
-      }
-    },
-    [disabled, wrapperRef]
-  );
-
-  useEffect(() => {
-    if (focusStopOnUpdate !== null) {
-      const toFocusIndex = sortedStops
-        .map((el) => el.stop)
-        .indexOf(focusStopOnUpdate);
-      const toFocusId = toFocusIndex > -1 ? sortedStops[toFocusIndex].id : null;
-      onFocusStop(toFocusIndex);
-      setOpenedStopId(toFocusId);
-      setFocusStopOnUpdate(null);
-    }
-  }, [sortedStops, onFocusStop, setFocusStopOnUpdate, focusStopOnUpdate]);
-
-  const onFocusWrapper = useCallback(() => {
-    setFocusedStopIndex(null);
-    if (wrapperRef) {
-      wrapperRef.focus();
-    }
-  }, [wrapperRef]);
-
-  const setWrapperHasFocus = (e: React.FocusEvent) => {
-    if (e.target === wrapperRef) {
-      setHasFocus(true);
-    }
-  };
-
-  const removeWrapperFocus = () => {
-    setHasFocus(false);
-  };
-
-  const onAdd = () => {
-    const stops = sortedStops.map(({ color, stop }) => {
-      return {
-        color,
-        stop,
-      };
-    });
-    const newColorStops = addStop(stops, addColor, max || rangeMax);
-
-    setFocusStopOnUpdate(newColorStops[colorStops.length].stop);
-    handleOnChange(newColorStops);
-  };
-
-  const onRemove = useCallback(
-    (index: number) => {
-      const newColorStops = removeStop(colorStops, index);
-
-      onFocusWrapper();
-      handleOnChange(newColorStops);
-    },
-    [colorStops, handleOnChange, onFocusWrapper]
-  );
-
-  const disableHover = () => {
-    if (disabled) return;
-    setIsHoverDisabled(true);
-  };
-
-  const enableHover = () => {
-    if (disabled) return;
-    setIsHoverDisabled(false);
-  };
-
-  const handleAddHover = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (isNotInteractive || !wrapperRef) return;
-    const stop = getStopFromMouseLocationFn({ x: e.pageX, y: e.pageY });
-    const position = getPositionFromStopFn(stop);
-
-    setAddTargetPosition(position);
-  };
-
-  const handleAddClick = (e: React.MouseEvent<HTMLDivElement>) => {
-    if (isNotInteractive || isTargetAThumb(e.target) || !wrapperRef) return;
-    const newStop = getStopFromMouseLocationFn({ x: e.pageX, y: e.pageY });
-    const newColorStops = addDefinedStop(colorStops, newStop, addColor);
-    setFocusStopOnUpdate(newStop);
-    handleOnChange(newColorStops);
-  };
-
-  const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
-    if (disabled) return;
-    switch (event.key) {
-      case keys.ESCAPE:
-        onFocusWrapper();
-        break;
-
-      case keys.ENTER:
-        if (readOnly || !hasFocus) return;
-        onAdd();
-        break;
-
-      case keys.BACKSPACE:
-        if (readOnly || hasFocus || focusedStopIndex == null) return;
-        if (isTargetAThumb(event.target)) {
-          if (
-            (min == null && focusedStopIndex === 0) ||
-            (max == null && focusedStopIndex === sortedStops.length - 1)
-          ) {
-            return;
-          }
-          const index = sortedStops[focusedStopIndex].id;
-          onRemove(index);
-        }
-        break;
-
-      case keys.ARROW_DOWN:
-        if (event.target === wrapperRef || isTargetAThumb(event.target)) {
-          event.preventDefault();
-          if (focusedStopIndex == null) {
-            onFocusStop(0);
-          } else {
-            const next =
-              focusedStopIndex === sortedStops.length - 1
-                ? focusedStopIndex
-                : focusedStopIndex + 1;
-            onFocusStop(next);
-          }
-        }
-        break;
-
-      case keys.ARROW_UP:
-        if (event.target === wrapperRef || isTargetAThumb(event.target)) {
-          event.preventDefault();
-          if (focusedStopIndex == null) {
-            onFocusStop(0);
-          } else {
-            const next =
-              focusedStopIndex === 0 ? focusedStopIndex : focusedStopIndex - 1;
-            onFocusStop(next);
-          }
-        }
-        break;
-    }
-  };
-
-  const thumbs = useMemo(() => {
-    const handleStopChange = (stop: ColorStop, id: number) => {
-      const newColorStops = [...colorStops];
-      newColorStops.splice(id, 1, stop);
-      handleOnChange(newColorStops);
-    };
-    return sortedStops.map((colorStop, index) => (
-      <EuiColorStopThumb
-        isRangeMin={min == null && colorStop.stop === rangeMin}
-        isRangeMax={max == null && colorStop.stop === rangeMax}
-        data-index={`${STOP_ATTR}${index}`}
-        key={colorStop.id}
-        globalMin={min || rangeMin}
-        globalMax={max || rangeMax}
-        min={min}
-        max={max}
-        localMin={
-          index === 0 ? min || rangeMin : sortedStops[index - 1].stop + 1
-        }
-        localMax={
-          index === sortedStops.length - 1
-            ? max || rangeMax
-            : sortedStops[index + 1].stop - 1
-        }
-        stop={colorStop.stop}
-        color={colorStop.color}
-        onRemove={
-          sortedStops.length > 1 ? () => onRemove(colorStop.id) : undefined
-        }
-        onChange={(stop) => handleStopChange(stop, colorStop.id)}
-        onFocus={() => setFocusedStopIndex(index)}
-        parentRef={wrapperRef}
-        colorPickerMode={mode}
-        colorPickerShowAlpha={showAlpha}
-        colorPickerSwatches={swatches}
-        disabled={disabled}
-        readOnly={readOnly}
-        aria-valuetext={`Stop: ${colorStop.stop}, Color: ${colorStop.color} (${
-          index + 1
-        } of ${colorStops.length})`}
-        isPopoverOpen={!isDragging && colorStop.id === openedStopId}
-        openPopover={() => {
-          setOpenedStopId(colorStop.id);
-        }}
-        closePopover={() => {
-          setOpenedStopId(null);
-        }}
-        valueInputProps={valueInputProps}
-      />
-    ));
-  }, [
-    colorStops,
-    disabled,
-    handleOnChange,
-    isDragging,
-    max,
-    min,
-    mode,
-    onRemove,
-    openedStopId,
-    rangeMax,
-    rangeMin,
-    readOnly,
-    showAlpha,
-    sortedStops,
-    swatches,
-    wrapperRef,
-    valueInputProps,
-  ]);
-
-  const positions = wrapperRef
-    ? sortedStops.map(({ stop }) => getPositionFromStopFn(stop))
-    : [];
-  const gradientStop = (colorStop: ColorStop, index: number) => {
-    const color = getChromaColor(colorStop.color, showAlpha);
-    const rgba = color ? color.css() : 'transparent';
-    if (index === 0) {
-      return `transparent, transparent ${positions[index]}%, ${rgba} ${positions[index]}%`;
-    }
-    return `${rgba} ${positions[index]}%`;
-  };
-  const fixedStop = (colorStop: ColorStop, index: number) => {
-    if (index === sortedStops.length - 1) {
-      return gradientStop(colorStop, index);
-    } else {
-      return `${gradientStop(colorStop, index)}, ${gradientStop(
-        colorStop,
-        index + 1
-      )}`;
-    }
-  };
-
-  let gradient: string = '';
-
-  if (stopType === 'stepped' && positions.length > 0) {
-    const trailingPercentage = positions[0];
-    const endingPercentage = positions[positions.length - 1];
-    const steppedColors = getSteppedGradient(colorStops, stepNumber);
-    let steppedGradient = '';
-    const percentage =
-      (endingPercentage - trailingPercentage) / steppedColors.length;
-    let percentageSteps =
-      (endingPercentage - trailingPercentage) / steppedColors.length +
-      trailingPercentage;
-    steppedColors.forEach((color) => {
-      steppedGradient = steppedGradient.concat(
-        `${color} ${percentageSteps - percentage}% ${percentageSteps}%, `
-      );
-      percentageSteps = percentageSteps + percentage;
-    });
-    steppedGradient = steppedGradient.substring(0, steppedGradient.length - 2);
-    gradient = `linear-gradient(to right, transparent ${trailingPercentage}%, ${steppedGradient})`;
-  } else {
-    const linearGradient = sortedStops.map(
-      stopType === 'gradient' ? gradientStop : fixedStop
-    );
-    gradient = `linear-gradient(to right,${linearGradient})`;
-  }
-
-  return (
-    <EuiRangeWrapper
-      css={cssPopoverStyles}
-      {...rest}
-      data-test-subj={classNames('euiColorStops', rest['data-test-subj'])}
-      ref={setWrapperRef}
-      className={classes}
-      fullWidth={fullWidth}
-      tabIndex={disabled ? -1 : 0}
-      onMouseDown={disableHover}
-      onMouseUp={enableHover}
-      onMouseLeave={enableHover}
-      onKeyDown={handleKeyDown}
-      onFocus={setWrapperHasFocus}
-      onBlur={removeWrapperFocus}
-    >
-      <EuiScreenReaderOnly>
-        <p aria-live="polite">
-          <EuiI18n
-            values={{
-              label,
-              disabled: disabled ? 'Disabled.' : '',
-              readOnly: readOnly ? 'Read-only.' : '',
-            }}
-            token="euiColorStops.screenReaderAnnouncement"
-            default="{label}: {readOnly} {disabled} Color stop picker. Each stop consists of a number and corresponding color value. Use the Down and Up arrow keys to select individual stops. Press the Enter key to create a new stop."
-          />
-        </p>
-      </EuiScreenReaderOnly>
-      <EuiRangeTrack
-        className="euiColorStops__track"
-        css={cssTrackStyles}
-        min={min || rangeMin}
-        max={max || rangeMax}
-        compressed={compressed}
-        disabled={disabled}
-        step={1}
-      >
-        {(trackWidth) => (
-          <>
-            <EuiRangeHighlight
-              className="euiColorStops__highlight"
-              min={min || rangeMin}
-              max={max || rangeMax}
-              lowerValue={min || rangeMin}
-              upperValue={max || rangeMax}
-              background={gradient}
-              trackWidth={trackWidth}
-            />
-            <div
-              data-test-subj="euiColorStopsAdd"
-              className="euiColorStops__addContainer"
-              css={cssAddContainerStyles}
-              onClick={handleAddClick}
-              onMouseMove={handleAddHover}
-            >
-              <div
-                className="euiColorStops__addTarget"
-                css={cssAddTargetStyles}
-                style={{
-                  left: `${addTargetPosition}%`,
-                }}
-              />
-            </div>
-            {thumbs}
-          </>
-        )}
-      </EuiRangeTrack>
-    </EuiRangeWrapper>
-  );
-};
diff --git a/src/components/color_picker/color_stops/index.ts b/src/components/color_picker/color_stops/index.ts
deleted file mode 100644
index 2ac47a5781c..00000000000
--- a/src/components/color_picker/color_stops/index.ts
+++ /dev/null
@@ -1,9 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-export { EuiColorStops } from './color_stops';
diff --git a/src/components/color_picker/color_stops/utils.test.ts b/src/components/color_picker/color_stops/utils.test.ts
deleted file mode 100644
index 814a0525fc4..00000000000
--- a/src/components/color_picker/color_stops/utils.test.ts
+++ /dev/null
@@ -1,115 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { addStop, addDefinedStop, removeStop, isInvalid } from './utils';
-
-const colorStops = [
-  { stop: 0, color: '#FF0000' },
-  { stop: 25, color: '#00FF00' },
-  { stop: 35, color: '#0000FF' },
-];
-
-describe('isInvalid', () => {
-  test('Should not mark valid colorStops as invalid', () => {
-    expect(isInvalid(colorStops)).toBe(false);
-  });
-
-  test('Should mark colorStops missing color as invalid', () => {
-    const colorStops = [{ stop: 0, color: '' }];
-    expect(isInvalid(colorStops)).toBe(true);
-  });
-
-  test('Should mark colorStops with invalid color as invalid', () => {
-    const colorStops = [{ stop: 0, color: 'not color' }];
-    expect(isInvalid(colorStops)).toBe(true);
-  });
-
-  test('Should mark colorStops missing stop as invalid', () => {
-    const colorStops = [{ stop: null, color: '#FF0000' }];
-    // @ts-ignore Intentionally wrong
-    expect(isInvalid(colorStops)).toBe(true);
-  });
-
-  test('Should mark colorStops with invalid stop as invalid', () => {
-    const colorStops = [{ stop: 'I am not a number', color: '#FF0000' }];
-    // @ts-ignore Intentionally wrong
-    expect(isInvalid(colorStops)).toBe(true);
-  });
-});
-
-describe('addStop', () => {
-  test('Should add stop when there is only a single stop', () => {
-    const colorStops = [{ stop: 0, color: '#FF0000' }];
-    expect(addStop(colorStops, '#FF0000', 100)).toEqual([
-      { stop: 0, color: '#FF0000' },
-      { stop: 1, color: '#FF0000' },
-    ]);
-  });
-
-  test('Should add stop to end of list', () => {
-    expect(addStop(colorStops, '#FF0000', 100)).toEqual([
-      { stop: 0, color: '#FF0000' },
-      { stop: 25, color: '#00FF00' },
-      { stop: 35, color: '#0000FF' },
-      { stop: 45, color: '#FF0000' },
-    ]);
-  });
-
-  test('Should add stop below the max if max is taken', () => {
-    expect(
-      addStop(
-        [
-          { stop: 0, color: '#FF0000' },
-          { stop: 100, color: '#FF0000' },
-        ],
-        '#FF0000',
-        100
-      )
-    ).toEqual([
-      { stop: 0, color: '#FF0000' },
-      { stop: 100, color: '#FF0000' },
-      { stop: 99, color: '#FF0000' },
-    ]);
-  });
-});
-
-describe('addDefinedStop', () => {
-  const colorStops = [{ stop: 0, color: '#FF0000' }];
-  test('Should add stop', () => {
-    expect(addDefinedStop(colorStops, 1)).toEqual([
-      { stop: 0, color: '#FF0000' },
-      { stop: 1, color: '#6092C0' },
-    ]);
-  });
-
-  test('Should add stop with a specified color', () => {
-    expect(addDefinedStop(colorStops, 1, '#FFFFFF')).toEqual([
-      { stop: 0, color: '#FF0000' },
-      { stop: 1, color: '#FFFFFF' },
-    ]);
-  });
-});
-
-describe('removeStop', () => {
-  test('Should not remove only stop', () => {
-    const colorStops = [{ stop: 0, color: '#FF0000' }];
-    expect(removeStop(colorStops, 0)).toEqual(colorStops);
-  });
-
-  test('Should remove stop at index', () => {
-    const colorStops = [
-      { stop: 0, color: '#FF0000' },
-      { stop: 25, color: '#00FF00' },
-      { stop: 35, color: '#0000FF' },
-    ];
-    expect(removeStop(colorStops, 1)).toEqual([
-      { stop: 0, color: '#FF0000' },
-      { stop: 35, color: '#0000FF' },
-    ]);
-  });
-});
diff --git a/src/components/color_picker/color_stops/utils.ts b/src/components/color_picker/color_stops/utils.ts
deleted file mode 100644
index f09e07659bf..00000000000
--- a/src/components/color_picker/color_stops/utils.ts
+++ /dev/null
@@ -1,129 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { getEventPosition, getChromaColor } from '../utils';
-import { DEFAULT_VISUALIZATION_COLOR } from '../../../services';
-import { ColorStop } from './color_stop_thumb';
-import { EUI_THUMB_SIZE } from '../../form/range/utils';
-
-export const removeStop = (colorStops: ColorStop[], index: number) => {
-  if (colorStops.length === 1) {
-    return colorStops;
-  }
-
-  return [...colorStops.slice(0, index), ...colorStops.slice(index + 1)];
-};
-
-export const addDefinedStop = (
-  colorStops: ColorStop[],
-  stop: ColorStop['stop'],
-  color: ColorStop['color'] = DEFAULT_VISUALIZATION_COLOR
-) => {
-  const newStop = {
-    stop,
-    color,
-  };
-  colorStops = [...colorStops, newStop];
-  colorStops.sort((a, b) => {
-    if (a.stop < b.stop) {
-      return -1;
-    }
-    if (a.stop > b.stop) {
-      return 1;
-    }
-    return 0;
-  });
-  return colorStops;
-};
-
-export const addStop = (
-  colorStops: ColorStop[],
-  color: ColorStop['color'] = DEFAULT_VISUALIZATION_COLOR,
-  max: number
-) => {
-  const index = colorStops.length ? colorStops.length - 1 : 0;
-  const stops = colorStops.map((el) => el.stop);
-  const currentStop = stops[index] != null ? stops[index] : max;
-  let delta = 1;
-  if (index !== 0) {
-    const prevStop = stops[index - 1];
-    delta = currentStop - prevStop;
-  }
-
-  let stop = currentStop + delta;
-
-  if (stop > max) {
-    stop = max;
-  }
-
-  // We've reached the max, so start working backwards
-  while (stops.indexOf(stop) > -1) {
-    stop--;
-  }
-
-  const newStop = {
-    stop,
-    color,
-  };
-  return [
-    ...colorStops.slice(0, index + 1),
-    newStop,
-    ...colorStops.slice(index + 1),
-  ];
-};
-
-export const isColorInvalid = (color: string, showAlpha: boolean = false) => {
-  return getChromaColor(color, showAlpha) == null || color === '';
-};
-
-export const isStopInvalid = (stop: ColorStop['stop']) => {
-  return stop == null || isNaN(stop);
-};
-
-export const isInvalid = (
-  colorStops: ColorStop[],
-  showAlpha: boolean = false
-) => {
-  return colorStops.some((colorStop) => {
-    return (
-      isColorInvalid(colorStop.color, showAlpha) ||
-      isStopInvalid(colorStop.stop)
-    );
-  });
-};
-
-export const calculateScale = (trackWidth: number) => {
-  const thumbToTrackRatio = EUI_THUMB_SIZE / trackWidth;
-  return (1 - thumbToTrackRatio) * 100;
-};
-
-export const getStopFromMouseLocation = (
-  location: { x: number; y: number },
-  ref: HTMLDivElement,
-  min: number,
-  max: number
-) => {
-  const box = getEventPosition(location, ref);
-  return Math.round((box.left / box.width) * (max - min) + min);
-};
-
-export const getPositionFromStop = (
-  stop: ColorStop['stop'],
-  ref: HTMLDivElement,
-  min: number,
-  max: number
-) => {
-  // For wide implementations, integer percentages can be visually off.
-  // Use 1 decimal place for more accuracy
-  return parseFloat(
-    (
-      ((stop - min) / (max - min)) *
-      calculateScale(ref && ref.clientWidth > 0 ? ref.clientWidth : 100)
-    ).toFixed(1)
-  );
-};
diff --git a/src/components/color_picker/index.ts b/src/components/color_picker/index.ts
index 633320d6938..eba48810e49 100644
--- a/src/components/color_picker/index.ts
+++ b/src/components/color_picker/index.ts
@@ -14,11 +14,6 @@ export type { EuiHueProps } from './hue';
 export { EuiHue } from './hue';
 export type { EuiSaturationProps } from './saturation';
 export { EuiSaturation } from './saturation';
-export { EuiColorStops } from './color_stops';
-// TODO: Exporting `EuiColorStopsProps` from `'./color_stops'`
-// results in a duplicate d.ts entry that causes build warnings
-// and potential downstream TS project failures.
-export type { EuiColorStopsProps } from './color_stops/color_stops';
 export type {
   EuiColorPalettePickerProps,
   EuiColorPalettePickerPaletteProps,
diff --git a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
index 6bf8b35fb61..a1e7f5f4028 100644
--- a/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
+++ b/src/components/combo_box/__snapshots__/combo_box.test.tsx.snap
@@ -1,1094 +1,430 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiComboBox is rendered 1`] = `
+exports[`EuiComboBox renders 1`] = `
 <div
   class="euiComboBox testClass1 testClass2 emotion-euiTestCss"
   data-test-subj="test subject string"
 >
   <div
-    class="euiFormControlLayout"
+    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
+      class="euiPopover__anchor css-zih94u-render"
     >
       <div
-        class="euiComboBox__inputWrap euiFormControlLayout--1icons"
-        data-test-subj="comboBoxInput"
-        tabindex="-1"
+        class="euiFormControlLayout"
       >
-        <input
-          aria-autocomplete="list"
-          aria-controls=""
-          aria-expanded="false"
-          aria-invalid="false"
-          aria-label="aria-label"
-          class="euiComboBox__input"
-          data-test-subj="comboBoxSearchInput"
-          id="generated-id__eui-combobox-id"
-          role="combobox"
-          style="inline-size: 2px;"
-          value=""
-        />
-      </div>
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-      >
-        <button
-          aria-label="Open list of options"
-          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-          data-test-subj="comboBoxToggleListButton"
-          tabindex="-1"
-          type="button"
+        <div
+          class="euiFormControlLayout__childrenWrapper"
         >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
-          />
-        </button>
+          <div
+            class="euiComboBox__inputWrap euiFormControlLayout--1icons"
+            data-test-subj="comboBoxInput"
+            tabindex="-1"
+          >
+            <input
+              aria-autocomplete="list"
+              aria-controls=""
+              aria-expanded="false"
+              aria-invalid="false"
+              aria-label="aria-label"
+              class="euiComboBox__input"
+              data-test-subj="comboBoxSearchInput"
+              id="generated-id__eui-combobox-id"
+              role="combobox"
+              style="inline-size: 2px;"
+              value=""
+            />
+          </div>
+          <div
+            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
+          >
+            <button
+              aria-label="Open list of options"
+              class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+              data-test-subj="comboBoxToggleListButton"
+              tabindex="-1"
+              type="button"
+            >
+              <span
+                aria-hidden="true"
+                class="euiFormControlLayoutCustomIcon__icon"
+                data-euiicon-type="arrowDown"
+              />
+            </button>
+          </div>
+        </div>
       </div>
     </div>
   </div>
 </div>
 `;
 
-exports[`props aria-label attribute is rendered 1`] = `
-<div
-  className="euiComboBox"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    aria-label="Test label"
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={false}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={Array []}
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value=""
-  />
-</div>
-`;
-
-exports[`props aria-labelledby attribute is rendered 1`] = `
-<div
-  className="euiComboBox"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    aria-labelledby="test-heading-id"
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={false}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={Array []}
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value=""
-  />
-</div>
-`;
-
-exports[`props autoFocus is rendered 1`] = `
-<div
-  className="euiComboBox"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={true}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={
-      Array [
-        Object {
-          "label": "Mimas",
-        },
-        Object {
-          "label": "Dione",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas, Dione"
-  />
-</div>
-`;
-
-exports[`props custom ID is rendered 1`] = `
-<div
-  className="euiComboBox"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={true}
-    id="test-id-1"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={
-      Array [
-        Object {
-          "label": "Mimas",
-        },
-        Object {
-          "label": "Iapetus",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas, Iapetus"
-  />
-</div>
-`;
-
-exports[`props delimiter is rendered 1`] = `
-<div
-  className="euiComboBox"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={true}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={
-      Array [
-        Object {
-          "label": "Mimas",
-        },
-        Object {
-          "label": "Dione",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas, Dione"
-  />
-</div>
-`;
-
-exports[`props full width is rendered 1`] = `
-<div
-  className="euiComboBox euiComboBox--fullWidth"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    compressed={false}
-    fullWidth={true}
-    hasSelectedOptions={true}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={
-      Array [
-        Object {
-          "label": "Mimas",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas"
-  />
-</div>
-`;
-
-exports[`props isClearable=false disallows user from clearing input when no options are selected 1`] = `
-<div
-  className="euiComboBox"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={false}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={Array []}
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value=""
-  />
-</div>
-`;
-
-exports[`props isClearable=false disallows user from clearing input when options are selected 1`] = `
-<div
-  className="euiComboBox"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={true}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={
-      Array [
-        Object {
-          "label": "Mimas",
-        },
-        Object {
-          "label": "Iapetus",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas, Iapetus"
-  />
-</div>
-`;
-
-exports[`props isDisabled is rendered 1`] = `
-<div
-  className="euiComboBox euiComboBox-isDisabled"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={true}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isDisabled={true}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={
-      Array [
-        Object {
-          "label": "Mimas",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas"
-  />
-</div>
-`;
-
-exports[`props option.prepend & option.append renders in pills 1`] = `
-Array [
-  <span
-    class="euiBadge euiComboBoxPill emotion-euiBadge-hollow"
-    data-test-subj="euiComboBoxPill"
-    title="1"
-  >
-    <span
-      class="euiBadge__content emotion-euiBadge__content"
-    >
-      <span
-        class="euiBadge__text emotion-euiBadge__text"
-      >
-        <span
-          class="euiComboBoxPill__prepend"
-        >
-          <span
-            data-test-subj="prepend"
-          >
-            Pre
-          </span>
-        </span>
-        <span
-          class="eui-textTruncate"
-        >
-          1
-        </span>
-      </span>
-      <button
-        aria-label="Remove 1 from selection in this group"
-        class="euiBadge__iconButton emotion-euiBadge__iconButton-right"
-        title="Remove 1 from selection in this group"
-        type="button"
-      >
-        <span
-          class="euiBadge__icon emotion-euiBadge__icon-right"
-          color="inherit"
-          data-euiicon-type="cross"
-        />
-      </button>
-    </span>
-  </span>,
-  <span
-    class="euiBadge euiComboBoxPill emotion-euiBadge-hollow"
-    data-test-subj="euiComboBoxPill"
-    title="2"
-  >
-    <span
-      class="euiBadge__content emotion-euiBadge__content"
-    >
-      <span
-        class="euiBadge__text emotion-euiBadge__text"
-      >
-        <span
-          class="eui-textTruncate"
-        >
-          2
-        </span>
-        <span
-          class="euiComboBoxPill__append"
-        >
-          <span
-            data-test-subj="append"
-          >
-            Post
-          </span>
-        </span>
-      </span>
-      <button
-        aria-label="Remove 2 from selection in this group"
-        class="euiBadge__iconButton emotion-euiBadge__iconButton-right"
-        title="Remove 2 from selection in this group"
-        type="button"
-      >
-        <span
-          class="euiBadge__icon emotion-euiBadge__icon-right"
-          color="inherit"
-          data-euiicon-type="cross"
-        />
-      </button>
-    </span>
-  </span>,
-]
-`;
-
-exports[`props option.prepend & option.append renders in single selection 1`] = `
-<span
-  class="euiComboBoxPill euiComboBoxPill--plainText"
-  data-test-subj="euiComboBoxPill"
->
-  <span
-    class="euiComboBoxPill__prepend"
-  >
-    <span
-      data-test-subj="prepend"
-    >
-      Pre
-    </span>
-  </span>
-  <span
-    class="eui-textTruncate"
-  >
-    1
-  </span>
-</span>
-`;
-
-exports[`props option.prepend & option.append renders in the options dropdown 1`] = `
-<div
-  class="euiPanel euiPanel--plain euiPopover__panel euiComboBoxOptionsList emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-isAttached-bottom"
-  data-popover-open="true"
-  data-popover-panel="true"
-  data-test-subj="comboBoxOptionsList"
-  style="z-index: 100;"
->
-  <div
-    class="euiComboBoxOptionsList__rowWrap"
-  >
+exports[`EuiComboBox renders the options list dropdown 1`] = `
+<body>
+  <div>
     <div
-      style="position: relative; height: 60px; width: 0px; overflow: auto; will-change: transform; direction: ltr;"
+      class="euiComboBox euiComboBox-isOpen"
+      data-test-subj="alsoGetsAppliedToOptionsList"
     >
       <div
-        aria-label="Choose from the following options"
-        id="generated-id_listbox"
-        role="listbox"
-        style="height: 58px; width: 100%;"
-        tabindex="0"
+        class="euiPopover euiPopover-isOpen euiInputPopover emotion-euiPopover-EuiInputPopover"
       >
-        <button
-          aria-selected="false"
-          class="euiFilterSelectItem emotion-euiFilterSelectItem"
-          id="generated-id__option-0"
-          role="option"
-          style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
-          title="1"
-          type="button"
+        <div
+          class="euiPopover__anchor css-zih94u-render"
         >
-          <span
-            class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+          <div
+            class="euiFormControlLayout"
           >
-            <span
-              class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+            <div
+              class="euiFormControlLayout__childrenWrapper"
             >
-              <span
-                class="euiComboBoxOption__contentWrapper"
+              <div
+                class="euiComboBox__inputWrap euiFormControlLayout--1icons"
+                data-test-subj="comboBoxInput"
+                tabindex="-1"
               >
-                <span
-                  class="euiComboBoxOption__prepend"
-                >
-                  <span
-                    data-test-subj="prepend"
-                  >
-                    Pre
-                  </span>
-                </span>
-                <span
-                  class="euiComboBoxOption__content"
-                >
-                  1
-                </span>
-              </span>
-            </span>
-          </span>
-        </button>
-        <button
-          aria-selected="false"
-          class="euiFilterSelectItem emotion-euiFilterSelectItem"
-          id="generated-id__option-1"
-          role="option"
-          style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
-          title="2"
-          type="button"
-        >
-          <span
-            class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
-          >
-            <span
-              class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
-            >
-              <span
-                class="euiComboBoxOption__contentWrapper"
+                <input
+                  aria-autocomplete="list"
+                  aria-controls="generated-id_listbox"
+                  aria-expanded="true"
+                  aria-invalid="false"
+                  class="euiComboBox__input"
+                  data-test-subj="comboBoxSearchInput"
+                  id="generated-id__eui-combobox-id"
+                  role="combobox"
+                  style="inline-size: 2px;"
+                  value=""
+                />
+              </div>
+              <div
+                class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
               >
-                <span
-                  class="euiComboBoxOption__content"
-                >
-                  2
-                </span>
-                <span
-                  class="euiComboBoxOption__append"
+                <button
+                  aria-label="Close list of options"
+                  class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
+                  data-test-subj="comboBoxToggleListButton"
+                  tabindex="-1"
+                  type="button"
                 >
                   <span
-                    data-test-subj="append"
-                  >
-                    Post
-                  </span>
-                </span>
-              </span>
-            </span>
-          </span>
-        </button>
+                    aria-hidden="true"
+                    class="euiFormControlLayoutCustomIcon__icon"
+                    data-euiicon-type="arrowDown"
+                  />
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
     </div>
   </div>
-</div>
-`;
-
-exports[`props options list is rendered 1`] = `
-<div
-  class="euiComboBox euiComboBox-isOpen"
-  data-test-subj="alsoGetsAppliedToOptionsList"
->
   <div
-    class="euiFormControlLayout"
+    data-euiportal="true"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper"
-    >
-      <div
-        class="euiComboBox__inputWrap euiFormControlLayout--1icons"
-        data-test-subj="comboBoxInput"
-        tabindex="-1"
-      >
-        <input
-          aria-autocomplete="list"
-          aria-controls="generated-id_listbox"
-          aria-expanded="true"
-          aria-invalid="false"
-          class="euiComboBox__input"
-          data-test-subj="comboBoxSearchInput"
-          id="generated-id__eui-combobox-id"
-          role="combobox"
-          style="inline-size: 2px;"
-          value=""
-        />
-      </div>
-      <div
-        class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-      >
-        <button
-          aria-label="Close list of options"
-          class="euiFormControlLayoutCustomIcon euiFormControlLayoutCustomIcon--clickable"
-          data-test-subj="comboBoxToggleListButton"
-          tabindex="-1"
-          type="button"
-        >
-          <span
-            aria-hidden="true"
-            class="euiFormControlLayoutCustomIcon__icon"
-            data-euiicon-type="arrowDown"
-          />
-        </button>
-      </div>
-    </div>
-  </div>
-  <div
-    class="euiPanel euiPanel--plain euiPopover__panel euiComboBoxOptionsList emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-isAttached-bottom"
-    data-popover-open="true"
-    data-popover-panel="true"
-    data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
-    style="z-index: 100;"
-  >
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
     <div
-      class="euiComboBoxOptionsList__rowWrap"
+      data-focus-lock-disabled="disabled"
     >
       <div
-        style="position: relative; height: 200px; width: 0px; overflow: auto; will-change: transform; direction: ltr;"
+        aria-live="assertive"
+        aria-modal="true"
+        class="euiPanel euiPanel--plain euiPopover__panel emotion-euiPanel-grow-m-plain-euiPopover__panel-isOpen-isAttached-bottom"
+        data-popover-open="true"
+        data-popover-panel="true"
+        role="dialog"
+        style="top: 0px; left: -22px; z-index: 2000; inline-size: 0px;"
       >
-        <div
-          aria-label="Choose from the following options"
-          id="generated-id_listbox"
-          role="listbox"
-          style="height: 290px; width: 100%;"
-          tabindex="0"
-        >
-          <button
-            aria-selected="false"
-            class="euiFilterSelectItem emotion-euiFilterSelectItem"
-            data-test-subj="titanOption"
-            id="generated-id__option-0"
-            role="option"
-            style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
-            title="Titan"
-            type="button"
+        <div>
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="-1"
+          />
+          <div
+            data-focus-lock-disabled="disabled"
           >
-            <span
-              class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+            <div
+              class="euiComboBoxOptionsList"
+              data-test-subj="comboBoxOptionsList alsoGetsAppliedToOptionsList-optionsList"
             >
-              <span
-                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+              <div
+                class="euiComboBoxOptionsList__virtualization"
+                style="position: relative; height: 200px; width: 0px; overflow: auto; will-change: transform; direction: ltr;"
               >
-                <span
-                  class="euiComboBoxOption__contentWrapper"
+                <div
+                  aria-label="Choose from the following options"
+                  id="generated-id_listbox"
+                  role="listbox"
+                  style="height: 290px; width: 100%;"
+                  tabindex="0"
                 >
-                  <span
-                    class="euiComboBoxOption__content"
+                  <button
+                    aria-selected="false"
+                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    data-test-subj="titanOption"
+                    id="generated-id__option-0"
+                    role="option"
+                    style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+                    title="Titan"
+                    type="button"
                   >
-                    Titan
-                  </span>
-                </span>
-              </span>
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="euiFilterSelectItem emotion-euiFilterSelectItem"
-            id="generated-id__option-1"
-            role="option"
-            style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
-            title="Enceladus"
-            type="button"
-          >
-            <span
-              class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
-            >
-              <span
-                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
-              >
-                <span
-                  class="euiComboBoxOption__contentWrapper"
-                >
-                  <span
-                    class="euiComboBoxOption__content"
+                    <span
+                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                    >
+                      <span
+                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                      >
+                        <span
+                          class="euiComboBoxOption__contentWrapper"
+                        >
+                          <span
+                            class="euiComboBoxOption__content"
+                          >
+                            Titan
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    id="generated-id__option-1"
+                    role="option"
+                    style="position: absolute; left: 0px; top: 29px; height: 29px; width: 100%;"
+                    title="Enceladus"
+                    type="button"
                   >
-                    Enceladus
-                  </span>
-                </span>
-              </span>
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="euiFilterSelectItem emotion-euiFilterSelectItem"
-            id="generated-id__option-2"
-            role="option"
-            style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
-            title="Mimas"
-            type="button"
-          >
-            <span
-              class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
-            >
-              <span
-                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
-              >
-                <span
-                  class="euiComboBoxOption__contentWrapper"
-                >
-                  <span
-                    class="euiComboBoxOption__content"
+                    <span
+                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                    >
+                      <span
+                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                      >
+                        <span
+                          class="euiComboBoxOption__contentWrapper"
+                        >
+                          <span
+                            class="euiComboBoxOption__content"
+                          >
+                            Enceladus
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    id="generated-id__option-2"
+                    role="option"
+                    style="position: absolute; left: 0px; top: 58px; height: 29px; width: 100%;"
+                    title="Mimas"
+                    type="button"
                   >
-                    Mimas
-                  </span>
-                </span>
-              </span>
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="euiFilterSelectItem emotion-euiFilterSelectItem"
-            id="generated-id__option-3"
-            role="option"
-            style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
-            title="Dione"
-            type="button"
-          >
-            <span
-              class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
-            >
-              <span
-                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
-              >
-                <span
-                  class="euiComboBoxOption__contentWrapper"
-                >
-                  <span
-                    class="euiComboBoxOption__content"
+                    <span
+                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                    >
+                      <span
+                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                      >
+                        <span
+                          class="euiComboBoxOption__contentWrapper"
+                        >
+                          <span
+                            class="euiComboBoxOption__content"
+                          >
+                            Mimas
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    id="generated-id__option-3"
+                    role="option"
+                    style="position: absolute; left: 0px; top: 87px; height: 29px; width: 100%;"
+                    title="Dione"
+                    type="button"
                   >
-                    Dione
-                  </span>
-                </span>
-              </span>
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="euiFilterSelectItem emotion-euiFilterSelectItem"
-            id="generated-id__option-4"
-            role="option"
-            style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
-            title="Iapetus"
-            type="button"
-          >
-            <span
-              class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
-            >
-              <span
-                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
-              >
-                <span
-                  class="euiComboBoxOption__contentWrapper"
-                >
-                  <span
-                    class="euiComboBoxOption__content"
+                    <span
+                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                    >
+                      <span
+                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                      >
+                        <span
+                          class="euiComboBoxOption__contentWrapper"
+                        >
+                          <span
+                            class="euiComboBoxOption__content"
+                          >
+                            Dione
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    id="generated-id__option-4"
+                    role="option"
+                    style="position: absolute; left: 0px; top: 116px; height: 29px; width: 100%;"
+                    title="Iapetus"
+                    type="button"
                   >
-                    Iapetus
-                  </span>
-                </span>
-              </span>
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="euiFilterSelectItem emotion-euiFilterSelectItem"
-            id="generated-id__option-5"
-            role="option"
-            style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
-            title="Phoebe"
-            type="button"
-          >
-            <span
-              class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
-            >
-              <span
-                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
-              >
-                <span
-                  class="euiComboBoxOption__contentWrapper"
-                >
-                  <span
-                    class="euiComboBoxOption__content"
+                    <span
+                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                    >
+                      <span
+                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                      >
+                        <span
+                          class="euiComboBoxOption__contentWrapper"
+                        >
+                          <span
+                            class="euiComboBoxOption__content"
+                          >
+                            Iapetus
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    id="generated-id__option-5"
+                    role="option"
+                    style="position: absolute; left: 0px; top: 145px; height: 29px; width: 100%;"
+                    title="Phoebe"
+                    type="button"
                   >
-                    Phoebe
-                  </span>
-                </span>
-              </span>
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="euiFilterSelectItem emotion-euiFilterSelectItem"
-            id="generated-id__option-6"
-            role="option"
-            style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
-            title="Rhea"
-            type="button"
-          >
-            <span
-              class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
-            >
-              <span
-                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
-              >
-                <span
-                  class="euiComboBoxOption__contentWrapper"
-                >
-                  <span
-                    class="euiComboBoxOption__content"
+                    <span
+                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                    >
+                      <span
+                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                      >
+                        <span
+                          class="euiComboBoxOption__contentWrapper"
+                        >
+                          <span
+                            class="euiComboBoxOption__content"
+                          >
+                            Phoebe
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    id="generated-id__option-6"
+                    role="option"
+                    style="position: absolute; left: 0px; top: 174px; height: 29px; width: 100%;"
+                    title="Rhea"
+                    type="button"
                   >
-                    Rhea
-                  </span>
-                </span>
-              </span>
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="euiFilterSelectItem emotion-euiFilterSelectItem"
-            id="generated-id__option-7"
-            role="option"
-            style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
-            title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
-            type="button"
-          >
-            <span
-              class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
-            >
-              <span
-                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
-              >
-                <span
-                  class="euiComboBoxOption__contentWrapper"
-                >
-                  <span
-                    class="euiComboBoxOption__content"
+                    <span
+                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                    >
+                      <span
+                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                      >
+                        <span
+                          class="euiComboBoxOption__contentWrapper"
+                        >
+                          <span
+                            class="euiComboBoxOption__content"
+                          >
+                            Rhea
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    id="generated-id__option-7"
+                    role="option"
+                    style="position: absolute; left: 0px; top: 203px; height: 29px; width: 100%;"
+                    title="Pandora is one of Saturn's moons, named for a Titaness of Greek mythology"
+                    type="button"
                   >
-                    Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
-                  </span>
-                </span>
-              </span>
-            </span>
-          </button>
-          <button
-            aria-selected="false"
-            class="euiFilterSelectItem emotion-euiFilterSelectItem"
-            id="generated-id__option-8"
-            role="option"
-            style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
-            title="Tethys"
-            type="button"
-          >
-            <span
-              class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
-            >
-              <span
-                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
-              >
-                <span
-                  class="euiComboBoxOption__contentWrapper"
-                >
-                  <span
-                    class="euiComboBoxOption__content"
+                    <span
+                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                    >
+                      <span
+                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                      >
+                        <span
+                          class="euiComboBoxOption__contentWrapper"
+                        >
+                          <span
+                            class="euiComboBoxOption__content"
+                          >
+                            Pandora is one of Saturn's moons, named for a Titaness of Greek mythology
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                  <button
+                    aria-selected="false"
+                    class="euiFilterSelectItem emotion-euiFilterSelectItem"
+                    id="generated-id__option-8"
+                    role="option"
+                    style="position: absolute; left: 0px; top: 232px; height: 29px; width: 100%;"
+                    title="Tethys"
+                    type="button"
                   >
-                    Tethys
-                  </span>
-                </span>
-              </span>
-            </span>
-          </button>
+                    <span
+                      class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+                    >
+                      <span
+                        class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+                      >
+                        <span
+                          class="euiComboBoxOption__contentWrapper"
+                        >
+                          <span
+                            class="euiComboBoxOption__content"
+                          >
+                            Tethys
+                          </span>
+                        </span>
+                      </span>
+                    </span>
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div
+            data-focus-guard="true"
+            style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+            tabindex="-1"
+          />
         </div>
       </div>
     </div>
+    <div
+      data-focus-guard="true"
+      style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
+      tabindex="-1"
+    />
   </div>
-</div>
-`;
-
-exports[`props selectedOptions are rendered 1`] = `
-<div
-  className="euiComboBox"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={true}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={
-      Array [
-        Object {
-          "label": "Mimas",
-        },
-        Object {
-          "label": "Iapetus",
-        },
-      ]
-    }
-    singleSelection={false}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas, Iapetus"
-  />
-</div>
-`;
-
-exports[`props singleSelection is rendered 1`] = `
-<div
-  className="euiComboBox"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={true}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={false}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={
-      Array [
-        Object {
-          "label": "Mimas",
-        },
-      ]
-    }
-    singleSelection={true}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas"
-  />
-</div>
-`;
-
-exports[`props singleSelection prepend and append is rendered 1`] = `
-<div
-  className="euiComboBox euiComboBox--prepended euiComboBox--appended euiComboBox-isOpen"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    append="String"
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={false}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={true}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    prepend="String"
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={Array []}
-    singleSelection={true}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value=""
-  />
-  <EuiPortal>
-    <EuiI18n
-      default="Choose from the following options"
-      token="euiComboBox.listboxAriaLabel"
-    >
-      <Component />
-    </EuiI18n>
-  </EuiPortal>
-</div>
-`;
-
-exports[`props singleSelection selects existing option when opened 1`] = `
-<div
-  className="euiComboBox euiComboBox-isOpen"
-  onBlur={[Function]}
-  onKeyDown={[Function]}
->
-  <EuiComboBoxInput
-    compressed={false}
-    fullWidth={false}
-    hasSelectedOptions={true}
-    id="generated-id__eui-combobox-id"
-    inputRef={[Function]}
-    isInvalid={false}
-    isListOpen={true}
-    noIcon={false}
-    onChange={[Function]}
-    onClear={[Function]}
-    onClick={[Function]}
-    onCloseListClick={[Function]}
-    onFocus={[Function]}
-    onOpenListClick={[Function]}
-    onRemoveOption={[Function]}
-    rootId={[Function]}
-    searchValue=""
-    selectedOptions={
-      Array [
-        Object {
-          "label": "Mimas",
-        },
-      ]
-    }
-    singleSelection={true}
-    toggleButtonRef={[Function]}
-    updatePosition={[Function]}
-    value="Mimas"
-  />
-  <EuiPortal>
-    <EuiI18n
-      default="Choose from the following options"
-      token="euiComboBox.listboxAriaLabel"
-    >
-      <Component />
-    </EuiI18n>
-  </EuiPortal>
-</div>
+</body>
 `;
diff --git a/src/components/combo_box/combo_box.spec.tsx b/src/components/combo_box/combo_box.spec.tsx
index 4fb066cbd0c..c9f45a66836 100644
--- a/src/components/combo_box/combo_box.spec.tsx
+++ b/src/components/combo_box/combo_box.spec.tsx
@@ -10,8 +10,15 @@
 /// <reference types="cypress-real-events" />
 /// <reference types="../../../cypress/support" />
 
-import React, { useState } from 'react';
-import { EuiComboBox } from './index';
+import React, { FunctionComponent, useState } from 'react';
+
+import { EuiFlyout, EuiPopover, EuiButton } from '../index';
+
+import {
+  EuiComboBox,
+  type EuiComboBoxProps,
+  type EuiComboBoxOptionOption,
+} from './index';
 
 // CI doesn't have access to the Inter font, so we need to manually include it
 // for truncation font calculations to work correctly
@@ -27,7 +34,7 @@ before(() => {
 });
 
 describe('EuiComboBox', () => {
-  describe('Focus management', () => {
+  describe('focus management', () => {
     it('keeps focus on the input box when clicking a disabled item', () => {
       cy.realMount(
         <EuiComboBox
@@ -106,6 +113,37 @@ describe('EuiComboBox', () => {
     });
   });
 
+  describe('inputPopoverProps', () => {
+    it('allows setting a minimum popover width', () => {
+      cy.mount(
+        <EuiComboBox
+          options={[{ label: 'Test' }]}
+          selectedOptions={[]}
+          onChange={() => {}}
+          data-test-subj="combobox"
+          inputPopoverProps={{
+            panelMinWidth: 300,
+            anchorPosition: 'downCenter',
+          }}
+          style={{ margin: '0 auto' }}
+        />
+      );
+      cy.get('[data-test-subj="comboBoxInput"]').click();
+
+      cy.get('[data-popover-panel]')
+        .should('have.css', 'inline-size', '400px')
+        .should('have.css', 'left', '50px');
+
+      cy.get('[data-test-subj="combobox"]').then(
+        ($el) => ($el[0].style.width = '200px')
+      );
+
+      cy.get('[data-popover-panel]')
+        .should('have.css', 'inline-size', '300px')
+        .should('have.css', 'left', '100px');
+    });
+  });
+
   describe('truncation', () => {
     const sharedProps = {
       style: { width: 200 },
@@ -194,86 +232,171 @@ describe('EuiComboBox', () => {
       });
     });
   });
-
-  describe('Backspace to delete last pill', () => {
-    const options = [
+  describe('selection', () => {
+    const defaultOptions: Array<EuiComboBoxOptionOption<{}>> = [
       { label: 'Item 1' },
       { label: 'Item 2' },
       { label: 'Item 3' },
     ];
-
-    const TestComboBox = (...rest) => {
-      const [selectedOptions, setSelected] = useState([]);
-      const onChange = (selectedOptions) => {
+    const StatefulComboBox: FunctionComponent<
+      Partial<EuiComboBoxProps<{}>>
+    > = ({ options = defaultOptions, ...rest }) => {
+      const [selectedOptions, setSelected] = useState<typeof options>([]);
+      const onChange = (selectedOptions: typeof options) => {
         setSelected(selectedOptions);
       };
       return (
         <EuiComboBox
           options={options}
           selectedOptions={selectedOptions}
-          onChange={onChange}
           {...rest}
+          onChange={onChange}
         />
       );
     };
 
-    it('does not delete the last pill if there is search text', () => {
-      cy.realMount(<TestComboBox />);
-      cy.get('[data-test-subj=comboBoxSearchInput]').realClick();
-      cy.realPress('{downarrow}');
-      cy.realPress('Enter');
-      cy.realPress('{downarrow}');
-      cy.realPress('Enter');
-      cy.get('.euiComboBoxPill').should('have.length', 2);
+    describe('delimiter', () => {
+      it('selects the option when the delimiter option is typed into the search', () => {
+        cy.mount(<StatefulComboBox delimiter="," />);
+        cy.get('[data-test-subj="euiComboBoxPill"]').should('not.exist');
 
-      cy.get('[data-test-subj=comboBoxSearchInput]').type('test');
-      cy.get('[data-test-subj=comboBoxSearchInput]').realPress('Backspace');
+        cy.get('[data-test-subj="comboBoxSearchInput"]').click();
+        cy.realType('Item 1,');
 
-      cy.get('[data-test-subj=comboBoxSearchInput]')
-        .invoke('val')
-        .should('equal', 'tes');
-      cy.get('.euiComboBoxPill').should('have.length', 2);
-    });
+        cy.get('[data-test-subj="euiComboBoxPill"]').should(
+          'have.text',
+          'Item 1'
+        );
+        cy.get('[data-test-subj="comboBoxSearchInput"]').should(
+          'have.value',
+          ''
+        );
+      });
 
-    it('does not delete the last pill if the input is not active when backspace is pressed', () => {
-      cy.realMount(<TestComboBox />);
-      cy.get('[data-test-subj=comboBoxSearchInput]').realClick();
-      cy.realPress('{downarrow}');
-      cy.realPress('Enter');
-      cy.get('[data-test-subj=comboBoxSearchInput]').type('test');
-      cy.realPress('Escape');
-      cy.get('.euiComboBoxPill').should('have.length', 1);
+      it('does nothing if the item if already selected', () => {
+        cy.mount(
+          <StatefulComboBox
+            delimiter=","
+            selectedOptions={[defaultOptions[0]]}
+          />
+        );
+        cy.get('[data-test-subj="euiComboBoxPill"]').should(
+          'have.text',
+          'Item 1'
+        );
+
+        cy.get('[data-test-subj="comboBoxSearchInput"]').click();
+        cy.realType('Item 1,');
+
+        cy.get('[data-test-subj="euiComboBoxPill"]').should('have.length', 1);
+        cy.get('[data-test-subj="comboBoxSearchInput"]').should(
+          'have.value',
+          'Item 1,'
+        );
+        cy.contains("Item 1, doesn't match any options");
+      });
 
-      cy.realPress(['Shift', 'Tab']); // Should be focused on the first pill's X button
-      cy.realPress('Backspace');
-      cy.get('.euiComboBoxPill').should('have.length', 1);
+      it('still respects enter to select', () => {
+        cy.mount(<StatefulComboBox delimiter="," />);
+        cy.get('[data-test-subj="euiComboBoxPill"]').should('not.exist');
 
-      cy.repeatRealPress('Tab', 2); // Should be focused on the clear button
-      cy.realPress('Backspace');
-      cy.get('.euiComboBoxPill').should('have.length', 1);
+        cy.get('[data-test-subj="comboBoxSearchInput"]').click();
+        cy.realType('Item 1');
+        cy.realPress('Enter');
+
+        cy.get('[data-test-subj="euiComboBoxPill"]').should(
+          'have.text',
+          'Item 1'
+        );
+      });
     });
 
-    it('deletes the last pill added when backspace on the input is pressed ', () => {
-      cy.realMount(<TestComboBox />);
-      cy.get('[data-test-subj=comboBoxSearchInput]').realClick();
-      cy.realPress('{downarrow}');
-      cy.realPress('Enter');
-      cy.realPress('{downarrow}');
-      cy.realPress('Enter');
-      cy.get('.euiComboBoxPill').should('have.length', 2);
+    describe('backspace to delete last pill', () => {
+      it('does not delete the last pill if there is search text', () => {
+        cy.realMount(<StatefulComboBox />);
+        cy.get('[data-test-subj=comboBoxSearchInput]').realClick();
+        cy.realPress('{downarrow}');
+        cy.realPress('Enter');
+        cy.realPress('{downarrow}');
+        cy.realPress('Enter');
+        cy.get('.euiComboBoxPill').should('have.length', 2);
+
+        cy.get('[data-test-subj=comboBoxSearchInput]').type('test');
+        cy.get('[data-test-subj=comboBoxSearchInput]').realPress('Backspace');
+
+        cy.get('[data-test-subj=comboBoxSearchInput]')
+          .invoke('val')
+          .should('equal', 'tes');
+        cy.get('.euiComboBoxPill').should('have.length', 2);
+      });
+
+      it('does not delete the last pill if the input is not active when backspace is pressed', () => {
+        cy.realMount(<StatefulComboBox />);
+        cy.get('[data-test-subj=comboBoxSearchInput]').realClick();
+        cy.realPress('{downarrow}');
+        cy.realPress('Enter');
+        cy.get('[data-test-subj=comboBoxSearchInput]').type('test');
+        cy.realPress('Escape');
+        cy.get('.euiComboBoxPill').should('have.length', 1);
+
+        cy.realPress(['Shift', 'Tab']); // Should be focused on the first pill's X button
+        cy.realPress('Backspace');
+        cy.get('.euiComboBoxPill').should('have.length', 1);
+
+        cy.repeatRealPress('Tab', 2); // Should be focused on the clear button
+        cy.realPress('Backspace');
+        cy.get('.euiComboBoxPill').should('have.length', 1);
+      });
+
+      it('deletes the last pill added when backspace on the input is pressed ', () => {
+        cy.realMount(<StatefulComboBox />);
+        cy.get('[data-test-subj=comboBoxSearchInput]').realClick();
+        cy.realPress('{downarrow}');
+        cy.realPress('Enter');
+        cy.realPress('{downarrow}');
+        cy.realPress('Enter');
+        cy.get('.euiComboBoxPill').should('have.length', 2);
+
+        cy.get('[data-test-subj=comboBoxSearchInput]').realPress('Backspace');
+        cy.get('.euiComboBoxPill').should('have.length', 1);
+      });
+
+      it('opens up the selection list again after deleting the active single selection ', () => {
+        cy.realMount(<StatefulComboBox singleSelection />);
+        cy.get('[data-test-subj=comboBoxSearchInput]').realClick();
+        cy.realPress('{downarrow}');
+        cy.realPress('Enter');
 
-      cy.get('[data-test-subj=comboBoxSearchInput]').realPress('Backspace');
-      cy.get('.euiComboBoxPill').should('have.length', 1);
+        cy.realPress('Backspace');
+        cy.get('[data-test-subj=comboBoxOptionsList]').should('have.length', 1);
+      });
     });
+  });
 
-    it('opens up the selection list again after deleting the active single selection ', () => {
-      cy.realMount(<TestComboBox singleSelection />);
-      cy.get('[data-test-subj=comboBoxSearchInput]').realClick();
-      cy.realPress('{downarrow}');
-      cy.realPress('Enter');
+  describe('z-index regression testing', () => {
+    it('displays the dropdown list above any inherited z-indices from parents', () => {
+      cy.mount(
+        <EuiFlyout onClose={() => {}} size="s">
+          <EuiPopover
+            isOpen={true}
+            anchorPosition="rightDown"
+            closePopover={() => {}}
+            button={<EuiButton>Toggle popover</EuiButton>}
+          >
+            <EuiComboBox options={[{ label: 'Test' }]} />
+          </EuiPopover>
+        </EuiFlyout>
+      );
+      cy.wait(500); // Let the flyout finish animating in
+      cy.get('[data-test-subj=comboBoxSearchInput]').click();
+
+      cy.get('[data-test-subj="comboBoxOptionsList"]')
+        .parents('[data-popover-panel]')
+        .should('have.css', 'z-index', '5000');
 
-      cy.realPress('Backspace');
-      cy.get('[data-test-subj=comboBoxOptionsList]').should('have.length', 1);
+      // Should be able to click the first option without an error
+      // about the popover or flyout blocking the click
+      cy.get('[role=option]').click('top');
     });
   });
 });
diff --git a/src/components/combo_box/combo_box.test.tsx b/src/components/combo_box/combo_box.test.tsx
index e2e0a6c1bae..4dcdcc9274d 100644
--- a/src/components/combo_box/combo_box.test.tsx
+++ b/src/components/combo_box/combo_box.test.tsx
@@ -6,62 +6,40 @@
  * Side Public License, v 1.
  */
 
-import React, { ReactNode } from 'react';
-import { act, fireEvent } from '@testing-library/react';
-import { shallow, mount } from 'enzyme';
-import { render } from '../../test/rtl';
-import { shouldRenderCustomStyles } from '../../test/internal';
+import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import { render, showEuiComboBoxOptions } from '../../test/rtl';
 import {
-  requiredProps,
-  findTestSubject,
-  takeMountedSnapshot,
-} from '../../test';
-import { comboBoxKeys } from '../../services';
+  shouldRenderCustomStyles,
+  testOnReactVersion,
+} from '../../test/internal';
+import { requiredProps } from '../../test';
 
-import { EuiComboBox, EuiComboBoxProps } from './combo_box';
+import { keys } from '../../services';
+import { EuiComboBox } from './combo_box';
 import type { EuiComboBoxOptionOption } from './types';
 
-jest.mock('../portal', () => ({
-  EuiPortal: ({ children }: { children: ReactNode }) => children,
-}));
-
-interface TitanOption {
-  'data-test-subj'?: 'titanOption';
+interface Options {
+  'data-test-subj'?: string;
   label: string;
 }
-const options: TitanOption[] = [
+const options: Options[] = [
   {
     'data-test-subj': 'titanOption',
     label: 'Titan',
   },
-  {
-    label: 'Enceladus',
-  },
-  {
-    label: 'Mimas',
-  },
-  {
-    label: 'Dione',
-  },
-  {
-    label: 'Iapetus',
-  },
-  {
-    label: 'Phoebe',
-  },
-  {
-    label: 'Rhea',
-  },
+  { label: 'Enceladus' },
+  { label: 'Mimas' },
+  { label: 'Dione' },
+  { label: 'Iapetus' },
+  { label: 'Phoebe' },
+  { label: 'Rhea' },
   {
     label:
       "Pandora is one of Saturn's moons, named for a Titaness of Greek mythology",
   },
-  {
-    label: 'Tethys',
-  },
-  {
-    label: 'Hyperion',
-  },
+  { label: 'Tethys' },
+  { label: 'Hyperion' },
 ];
 
 describe('EuiComboBox', () => {
@@ -74,20 +52,17 @@ describe('EuiComboBox', () => {
     {
       skip: { parentTest: true },
       childProps: ['truncationProps', 'options[0]'],
-      renderCallback: async ({ getByTestSubject, findAllByTestSubject }) => {
-        fireEvent.click(getByTestSubject('comboBoxToggleListButton'));
-        await findAllByTestSubject('truncatedText');
-      },
+      renderCallback: showEuiComboBoxOptions,
     }
   );
 
-  test('is rendered', () => {
+  it('renders', () => {
     const { container } = render(<EuiComboBox {...requiredProps} />);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('supports thousands of options in an options group', () => {
+  it('supports thousands of options in an options group', () => {
     // tests for a regression: RangeError: Maximum call stack size exceeded
     // https://mathiasbynens.be/demo/javascript-argument-count
     const options: EuiComboBoxOptionOption[] = [{ label: 'test', options: [] }];
@@ -95,508 +70,598 @@ describe('EuiComboBox', () => {
       options[0].options?.push({ label: `option ${i}` });
     }
 
-    mount(<EuiComboBox {...requiredProps} options={options} />);
+    render(<EuiComboBox {...requiredProps} options={options} />);
   });
-});
-
-describe('props', () => {
-  test('options list is rendered', () => {
-    const component = mount(
-      <EuiComboBox
-        options={options}
-        data-test-subj="alsoGetsAppliedToOptionsList"
-      />
-    );
 
-    act(() => {
-      component.setState({ isListOpen: true });
-    });
-    expect(takeMountedSnapshot(component)).toMatchSnapshot();
-  });
-
-  test('selectedOptions are rendered', () => {
-    const component = shallow(
-      <EuiComboBox
-        options={options}
-        selectedOptions={[options[2], options[4]]}
-      />
-    );
+  // React 16 for some reason doesn't snapshot the screen reader text
+  testOnReactVersion(['17', '18'])(
+    'renders the options list dropdown',
+    async () => {
+      const { baseElement } = render(
+        <EuiComboBox
+          options={options}
+          data-test-subj="alsoGetsAppliedToOptionsList"
+        />
+      );
+      await showEuiComboBoxOptions();
 
-    expect(component).toMatchSnapshot();
-  });
+      expect(baseElement).toMatchSnapshot();
+    }
+  );
 
-  test('custom ID is rendered', () => {
-    const component = shallow(
+  it('renders selectedOptions as pills', () => {
+    const { getAllByTestSubject } = render(
       <EuiComboBox
-        id="test-id-1"
         options={options}
         selectedOptions={[options[2], options[4]]}
       />
     );
+    const selections = getAllByTestSubject('euiComboBoxPill');
 
-    expect(component).toMatchSnapshot();
+    expect(selections).toHaveLength(2);
+    expect(selections[0]).toHaveTextContent(options[2].label);
+    expect(selections[1]).toHaveTextContent(options[4].label);
   });
 
-  describe('option.prepend & option.append', () => {
-    const options = [
-      { label: '1', prepend: <span data-test-subj="prepend">Pre</span> },
-      { label: '2', append: <span data-test-subj="append">Post</span> },
-    ];
+  describe('props', () => {
+    describe('option.prepend & option.append', () => {
+      const options = [
+        { label: '1', prepend: <span data-test-subj="prepend">Pre</span> },
+        { label: '2', append: <span data-test-subj="append">Post</span> },
+      ];
+
+      it('renders in pills', () => {
+        const { getByTestSubject, getAllByTestSubject } = render(
+          <EuiComboBox options={options} selectedOptions={options} />
+        );
+
+        expect(getByTestSubject('prepend')).toBeInTheDocument();
+        expect(getByTestSubject('append')).toBeInTheDocument();
+
+        expect(getAllByTestSubject('euiComboBoxPill')[0])
+          .toMatchInlineSnapshot(`
+          <span
+            class="euiBadge euiComboBoxPill emotion-euiBadge-hollow"
+            data-test-subj="euiComboBoxPill"
+            title="1"
+          >
+            <span
+              class="euiBadge__content emotion-euiBadge__content"
+            >
+              <span
+                class="euiBadge__text emotion-euiBadge__text"
+              >
+                <span
+                  class="euiComboBoxPill__prepend"
+                >
+                  <span
+                    data-test-subj="prepend"
+                  >
+                    Pre
+                  </span>
+                </span>
+                <span
+                  class="eui-textTruncate"
+                >
+                  1
+                </span>
+              </span>
+              <button
+                aria-label="Remove 1 from selection in this group"
+                class="euiBadge__iconButton emotion-euiBadge__iconButton-right"
+                title="Remove 1 from selection in this group"
+                type="button"
+              >
+                <span
+                  class="euiBadge__icon emotion-euiBadge__icon-right"
+                  color="inherit"
+                  data-euiicon-type="cross"
+                />
+              </button>
+            </span>
+          </span>
+        `);
+      });
 
-    test('renders in pills', () => {
-      const { getByTestSubject, getAllByTestSubject } = render(
-        <EuiComboBox options={options} selectedOptions={options} />
-      );
+      test('renders in the options dropdown', async () => {
+        const { getByTestSubject, getAllByRole } = render(
+          <EuiComboBox options={options} />
+        );
+        await showEuiComboBoxOptions();
+
+        const dropdown = getByTestSubject('comboBoxOptionsList');
+        expect(
+          dropdown.querySelector('.euiComboBoxOption__prepend')
+        ).toBeInTheDocument();
+        expect(
+          dropdown.querySelector('.euiComboBoxOption__append')
+        ).toBeInTheDocument();
+
+        expect(getAllByRole('option')[0]).toMatchInlineSnapshot(`
+          <button
+            aria-selected="false"
+            class="euiFilterSelectItem emotion-euiFilterSelectItem"
+            id="generated-id__option-0"
+            role="option"
+            style="position: absolute; left: 0px; top: 0px; height: 29px; width: 100%;"
+            title="1"
+            type="button"
+          >
+            <span
+              class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-center-row"
+            >
+              <span
+                class="euiFlexItem euiFilterSelectItem__content eui-textTruncate emotion-euiFlexItem-grow-1"
+              >
+                <span
+                  class="euiComboBoxOption__contentWrapper"
+                >
+                  <span
+                    class="euiComboBoxOption__prepend"
+                  >
+                    <span
+                      data-test-subj="prepend"
+                    >
+                      Pre
+                    </span>
+                  </span>
+                  <span
+                    class="euiComboBoxOption__content"
+                  >
+                    1
+                  </span>
+                </span>
+              </span>
+            </span>
+          </button>
+        `);
+      });
 
-      expect(getByTestSubject('prepend')).toBeInTheDocument();
-      expect(getByTestSubject('append')).toBeInTheDocument();
-      expect(getAllByTestSubject('euiComboBoxPill')).toMatchSnapshot();
+      test('renders in single selection', () => {
+        const { getByTestSubject } = render(
+          <EuiComboBox
+            options={options}
+            selectedOptions={[options[0]]}
+            singleSelection={{ asPlainText: true }}
+          />
+        );
+
+        expect(getByTestSubject('euiComboBoxPill')).toMatchInlineSnapshot(`
+          <span
+            class="euiComboBoxPill euiComboBoxPill--plainText"
+            data-test-subj="euiComboBoxPill"
+          >
+            <span
+              class="euiComboBoxPill__prepend"
+            >
+              <span
+                data-test-subj="prepend"
+              >
+                Pre
+              </span>
+            </span>
+            <span
+              class="eui-textTruncate"
+            >
+              1
+            </span>
+          </span>
+        `);
+      });
     });
 
-    test('renders in the options dropdown', () => {
-      const component = mount(<EuiComboBox options={options} />);
+    describe('singleSelection', () => {
+      it('does not show or allow selecting more than one option', async () => {
+        const onChange = jest.fn();
+
+        const { getAllByTestSubject } = render(
+          <EuiComboBox
+            options={options}
+            onChange={onChange}
+            selectedOptions={[options[2], options[0]]}
+            singleSelection={true}
+          />
+        );
+        const selections = getAllByTestSubject('euiComboBoxPill');
+
+        expect(selections).toHaveLength(1);
+        expect(selections[0]).toHaveTextContent('Mimas');
+      });
+
+      it('selects existing option when opened', async () => {
+        const { getByTestSubject } = render(
+          <EuiComboBox
+            options={options}
+            selectedOptions={[options[0]]}
+            singleSelection={true}
+          />
+        );
+        await showEuiComboBoxOptions();
+
+        const dropdown = getByTestSubject('comboBoxOptionsList');
+        const checkedOption = '[data-euiicon-type="check"]';
+
+        // Should only have 1 checked item
+        expect(dropdown.querySelectorAll(checkedOption)).toHaveLength(1);
+
+        // The first option should be rendered and have the check
+        const option = dropdown.querySelector('[data-test-subj="titanOption"]');
+        expect(option).toBeTruthy();
+        expect(option!.querySelector(checkedOption)).toBeTruthy();
+      });
 
-      act(() => {
-        component.setState({ isListOpen: true });
+      it('renders prepend and append in form layout', () => {
+        const { container } = render(
+          <EuiComboBox
+            options={options}
+            singleSelection={true}
+            prepend="String"
+            append="String"
+          />
+        );
+
+        expect(
+          container.querySelector('.euiFormControlLayout__prepend')
+        ).toBeInTheDocument();
+        expect(
+          container.querySelector('.euiFormControlLayout__append')
+        ).toBeInTheDocument();
       });
 
-      const dropdown = component.find(
-        'div[data-test-subj="comboBoxOptionsList"]'
-      );
-      expect(dropdown.find('.euiComboBoxOption__prepend')).toHaveLength(1);
-      expect(dropdown.find('.euiComboBoxOption__append')).toHaveLength(1);
-      expect(dropdown.render()).toMatchSnapshot();
+      it('renders as plain text', () => {
+        const { getByTestSubject } = render(
+          <EuiComboBox
+            options={options}
+            selectedOptions={[options[2]]}
+            singleSelection={{ asPlainText: true }}
+          />
+        );
+
+        expect(getByTestSubject('euiComboBoxPill').className).toContain(
+          'euiComboBoxPill--plainText'
+        );
+      });
     });
 
-    test('renders in single selection', () => {
-      const { getByTestSubject } = render(
+    test('isDisabled', () => {
+      const { container, queryByTestSubject, queryByTitle } = render(
         <EuiComboBox
           options={options}
           selectedOptions={[options[0]]}
-          singleSelection={{ asPlainText: true }}
+          isDisabled={true}
         />
       );
 
-      expect(getByTestSubject('euiComboBoxPill')).toMatchSnapshot();
-    });
-  });
-
-  describe('isClearable=false disallows user from clearing input', () => {
-    test('when no options are selected', () => {
-      const component = shallow(
-        <EuiComboBox options={options} isClearable={false} />
-      );
+      expect(container.firstElementChild!.className).toContain('-isDisabled');
+      expect(queryByTestSubject('comboBoxSearchInput')).toBeDisabled();
 
-      expect(component).toMatchSnapshot();
+      expect(queryByTestSubject('comboBoxClearButton')).toBeFalsy();
+      expect(queryByTestSubject('comboBoxToggleListButton')).toBeFalsy();
+      expect(
+        queryByTitle('Remove Titan from selection in this group')
+      ).toBeFalsy();
     });
 
-    test('when options are selected', () => {
-      const component = shallow(
+    test('fullWidth', () => {
+      // TODO: Should likely be a visual screenshot test
+      const { container } = render(
         <EuiComboBox
           options={options}
-          selectedOptions={[options[2], options[4]]}
-          isClearable={false}
+          selectedOptions={[options[2]]}
+          fullWidth={true}
         />
       );
 
-      expect(component).toMatchSnapshot();
+      expect(container.innerHTML).toContain('euiFormControlLayout--fullWidth');
+      expect(container.innerHTML).toContain('euiComboBox--fullWidth');
+      expect(container.innerHTML).toContain(
+        'euiComboBox__inputWrap--fullWidth'
+      );
     });
-  });
 
-  describe('singleSelection', () => {
-    test('is rendered', () => {
-      const component = shallow(
+    test('autoFocus', () => {
+      const { getByTestSubject } = render(
         <EuiComboBox
           options={options}
-          selectedOptions={[options[2]]}
-          singleSelection={true}
+          selectedOptions={[options[2], options[3]]}
+          autoFocus
         />
       );
 
-      expect(component).toMatchSnapshot();
-    });
-    test('selects existing option when opened', () => {
-      const component = shallow(
-        <EuiComboBox
-          options={options}
-          selectedOptions={[options[2]]}
-          singleSelection={true}
-        />
+      expect(document.activeElement).toBe(
+        getByTestSubject('comboBoxSearchInput')
       );
-
-      component.setState({ isListOpen: true });
-      expect(component).toMatchSnapshot();
     });
-    test('prepend and append is rendered', () => {
-      const component = shallow(
+
+    test('aria-label / aria-labelledby renders on the input, not on the wrapper', () => {
+      const { getByTestSubject } = render(
         <EuiComboBox
           options={options}
-          singleSelection={true}
-          prepend="String"
-          append="String"
+          // Production usages shouldn't have both attributes,
+          // we're just combining them for testing expedience
+          aria-label="Test label"
+          aria-labelledby="test-heading-id"
         />
       );
+      const input = getByTestSubject('comboBoxSearchInput');
 
-      component.setState({ isListOpen: true });
-      expect(component).toMatchSnapshot();
+      expect(input).toHaveAttribute('aria-label', 'Test label');
+      expect(input).toHaveAttribute('aria-labelledby', 'test-heading-id');
     });
-  });
 
-  test('isDisabled is rendered', () => {
-    const component = shallow(
-      <EuiComboBox
-        options={options}
-        selectedOptions={[options[2]]}
-        isDisabled={true}
-      />
-    );
+    test('inputRef', () => {
+      const inputRefCallback = jest.fn();
 
-    expect(component).toMatchSnapshot();
-  });
-
-  test('full width is rendered', () => {
-    const component = shallow(
-      <EuiComboBox
-        options={options}
-        selectedOptions={[options[2]]}
-        fullWidth={true}
-      />
-    );
+      const { getByRole } = render(
+        <EuiComboBox options={options} inputRef={inputRefCallback} />
+      );
+      expect(inputRefCallback).toHaveBeenCalledTimes(1);
 
-    expect(component).toMatchSnapshot();
+      expect(getByRole('combobox')).toBe(inputRefCallback.mock.calls[0][0]);
+    });
   });
 
-  test('delimiter is rendered', () => {
-    const component = shallow(
+  it('does not show multiple checkmarks with duplicate labels', async () => {
+    const options = [
+      { label: 'Titan', key: 'titan1' },
+      { label: 'Titan', key: 'titan2' },
+      { label: 'Tethys' },
+    ];
+    const { baseElement } = render(
       <EuiComboBox
+        singleSelection={{ asPlainText: true }}
         options={options}
-        selectedOptions={[options[2], options[3]]}
-        delimiter=","
+        selectedOptions={[options[1]]}
       />
     );
+    await showEuiComboBoxOptions();
 
-    expect(component).toMatchSnapshot();
-  });
-
-  test('autoFocus is rendered', () => {
-    const component = shallow(
-      <EuiComboBox
-        options={options}
-        selectedOptions={[options[2], options[3]]}
-      />
+    const dropdownOptions = baseElement.querySelectorAll(
+      '.euiFilterSelectItem'
     );
-
-    expect(component).toMatchSnapshot();
+    expect(
+      dropdownOptions[0]!.querySelector('[data-euiicon-type="check"]')
+    ).toBeFalsy();
+    expect(
+      dropdownOptions[1]!.querySelector('[data-euiicon-type="check"]')
+    ).toBeTruthy();
   });
 
-  test('aria-label attribute is rendered', () => {
-    const component = shallow(
-      <EuiComboBox aria-label="Test label" options={options} />
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-
-  test('aria-labelledby attribute is rendered', () => {
-    const component = shallow(
-      <EuiComboBox aria-labelledby="test-heading-id" options={options} />
-    );
-
-    expect(component).toMatchSnapshot();
-  });
-});
-
-test('does not show multiple checkmarks with duplicate labels', () => {
-  const options = [
-    {
-      label: 'Titan',
-      key: 'titan1',
-    },
-    {
-      label: 'Titan',
-      key: 'titan2',
-    },
-    {
-      label: 'Tethys',
-    },
-  ];
-  const { baseElement, getByTestSubject } = render(
-    <EuiComboBox
-      singleSelection={{ asPlainText: true }}
-      options={options}
-      selectedOptions={[options[1]]}
-    />
-  );
-  fireEvent.focus(getByTestSubject('comboBoxSearchInput'));
-
-  const dropdownOptions = baseElement.querySelectorAll('.euiFilterSelectItem');
-  expect(
-    dropdownOptions[0]!.querySelector('[data-euiicon-type="check"]')
-  ).toBeFalsy();
-  expect(
-    dropdownOptions[1]!.querySelector('[data-euiicon-type="check"]')
-  ).toBeTruthy();
-});
+  describe('behavior', () => {
+    describe('hitting "Enter"', () => {
+      it('calls the onCreateOption callback when there is input', () => {
+        const onCreateOptionHandler = jest.fn();
+
+        const { getByTestSubject } = render(
+          <EuiComboBox
+            options={options}
+            selectedOptions={[options[2]]}
+            onCreateOption={onCreateOptionHandler}
+          />
+        );
+        const input = getByTestSubject('comboBoxSearchInput');
+
+        fireEvent.change(input, { target: { value: 'foo' } });
+        fireEvent.keyDown(input, { key: 'Enter' });
+
+        expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
+        expect(onCreateOptionHandler).toHaveBeenCalledWith('foo', options);
+      });
 
-describe('behavior', () => {
-  describe('hitting "Enter"', () => {
-    test('calls the onCreateOption callback when there is input', () => {
-      const onCreateOptionHandler = jest.fn();
+      it('does not call onCreateOption when there is no input', () => {
+        const onCreateOptionHandler = jest.fn();
 
-      const component = mount(
-        <EuiComboBox
-          options={options}
-          selectedOptions={[options[2]]}
-          onCreateOption={onCreateOptionHandler}
-        />
-      );
+        const { getByTestSubject } = render(
+          <EuiComboBox
+            options={options}
+            selectedOptions={[options[2]]}
+            onCreateOption={onCreateOptionHandler}
+          />
+        );
+        const input = getByTestSubject('comboBoxSearchInput');
 
-      act(() => {
-        component.setState({ searchValue: 'foo' });
-      });
+        fireEvent.keyDown(input, { key: 'Enter' });
 
-      act(() => {
-        const searchInput = findTestSubject(component, 'comboBoxSearchInput');
-        searchInput.simulate('focus');
-        searchInput.simulate('keyDown', { key: comboBoxKeys.ENTER });
+        expect(onCreateOptionHandler).not.toHaveBeenCalled();
       });
-
-      expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
-      expect(onCreateOptionHandler).toHaveBeenNthCalledWith(1, 'foo', options);
     });
 
-    test("doesn't the onCreateOption callback when there is no input", () => {
-      const onCreateOptionHandler = jest.fn();
+    describe('tabbing off the search input', () => {
+      it("closes the options list if the user isn't navigating the options", async () => {
+        const keyDownBubbled = jest.fn();
 
-      const component = mount(
-        <EuiComboBox
-          options={options}
-          selectedOptions={[options[2]]}
-          onCreateOption={onCreateOptionHandler}
-        />
-      );
+        const { getByTestSubject } = render(
+          <div onKeyDown={keyDownBubbled}>
+            <EuiComboBox options={options} selectedOptions={[options[2]]} />
+          </div>
+        );
+        await showEuiComboBoxOptions();
 
-      const searchInput = findTestSubject(component, 'comboBoxSearchInput');
-      searchInput.simulate('focus');
-      searchInput.simulate('keyDown', { key: comboBoxKeys.ENTER });
-      expect(onCreateOptionHandler).not.toHaveBeenCalled();
-    });
-  });
+        const mockEvent = { key: keys.TAB, shiftKey: true };
+        fireEvent.keyDown(getByTestSubject('comboBoxSearchInput'), mockEvent);
 
-  describe('tabbing', () => {
-    test("off the search input closes the options list if the user isn't navigating the options", () => {
-      const onKeyDownWrapper = jest.fn();
-      const component = mount(
-        <div onKeyDown={onKeyDownWrapper}>
-          <EuiComboBox options={options} selectedOptions={[options[2]]} />
-        </div>
-      );
+        // If the TAB keydown bubbled up to the wrapper, then a browser DOM would shift the focus
+        expect(keyDownBubbled).toHaveBeenCalledWith(
+          expect.objectContaining(mockEvent)
+        );
+      });
 
-      const searchInput = findTestSubject(component, 'comboBoxSearchInput');
-      searchInput.simulate('focus');
+      it('calls onCreateOption', () => {
+        const onCreateOptionHandler = jest.fn();
 
-      // Focusing the input should open the options list.
-      expect(findTestSubject(component, 'comboBoxOptionsList')).toBeDefined();
+        const { getByTestSubject } = render(
+          <EuiComboBox
+            options={options}
+            selectedOptions={[options[2]]}
+            onCreateOption={onCreateOptionHandler}
+          />
+        );
+        const input = getByTestSubject('comboBoxSearchInput');
 
-      // Tab backwards to take focus off the combo box.
-      searchInput.simulate('keyDown', {
-        key: comboBoxKeys.TAB,
-        shiftKey: true,
-      });
+        fireEvent.change(input, { target: { value: 'foo' } });
+        fireEvent.blur(input);
 
-      // If the TAB keydown propagated to the wrapper, then a browser DOM would shift the focus
-      expect(onKeyDownWrapper).toHaveBeenCalledTimes(1);
-    });
+        expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
+        expect(onCreateOptionHandler).toHaveBeenCalledWith('foo', options);
+      });
 
-    test('off the search input calls onCreateOption', () => {
-      const onCreateOptionHandler = jest.fn();
+      it('does nothing if the user is navigating the options', async () => {
+        const keyDownBubbled = jest.fn();
 
-      const component = mount(
-        <EuiComboBox
-          options={options}
-          selectedOptions={[options[2]]}
-          onCreateOption={onCreateOptionHandler}
-        />
-      );
+        const { getByTestSubject } = render(
+          <div onKeyDown={keyDownBubbled}>
+            <EuiComboBox options={options} selectedOptions={[options[2]]} />
+          </div>
+        );
+        await showEuiComboBoxOptions();
 
-      const searchInput = findTestSubject(component, 'comboBoxSearchInput');
+        // Navigate to an option then tab off
+        const input = getByTestSubject('comboBoxSearchInput');
+        fireEvent.keyDown(input, { key: keys.ARROW_DOWN });
+        fireEvent.keyDown(input, { key: keys.TAB });
 
-      act(() => {
-        component.setState({ searchValue: 'foo' });
-        searchInput.simulate('focus');
+        // If the TAB keydown did not bubble to the wrapper, then the tab event was prevented
+        expect(keyDownBubbled).not.toHaveBeenCalled();
       });
-
-      searchInput.simulate('blur');
-
-      expect(onCreateOptionHandler).toHaveBeenCalledTimes(1);
-      expect(onCreateOptionHandler).toHaveBeenNthCalledWith(1, 'foo', options);
     });
 
-    test('off the search input does nothing if the user is navigating the options', () => {
-      const onKeyDownWrapper = jest.fn();
-      const component = mount(
-        <div onKeyDown={onKeyDownWrapper}>
+    describe('clear button', () => {
+      it('renders when options are selected', () => {
+        const { getByTestSubject } = render(
           <EuiComboBox options={options} selectedOptions={[options[2]]} />
-        </div>
-      );
-
-      const searchInput = findTestSubject(component, 'comboBoxSearchInput');
-      searchInput.simulate('focus');
-
-      // Focusing the input should open the options list.
-      expect(findTestSubject(component, 'comboBoxOptionsList')).toBeDefined();
+        );
 
-      // Navigate to an option.
-      searchInput.simulate('keyDown', { key: comboBoxKeys.ARROW_DOWN });
-
-      // Tab backwards to take focus off the combo box.
-      searchInput.simulate('keyDown', {
-        key: comboBoxKeys.TAB,
-        shiftKey: true,
+        expect(getByTestSubject('comboBoxClearButton')).toBeInTheDocument();
       });
 
-      // If the TAB keydown did not bubble to the wrapper, then the tab event was prevented
-      expect(onKeyDownWrapper.mock.calls.length).toBe(0);
-    });
-  });
-
-  describe('clear button', () => {
-    test('calls onChange callback with empty array', () => {
-      const onChangeHandler = jest.fn();
-      const component = mount(
-        <EuiComboBox
-          options={options}
-          selectedOptions={[options[2]]}
-          onChange={onChangeHandler}
-        />
-      );
-
-      findTestSubject(component, 'comboBoxClearButton').simulate('click');
-      expect(onChangeHandler).toHaveBeenCalledTimes(1);
-      expect(onChangeHandler).toHaveBeenNthCalledWith(1, []);
-    });
+      it('does not render when no options are selected', () => {
+        const { queryByTestSubject } = render(
+          <EuiComboBox options={options} />
+        );
 
-    test('focuses the input', () => {
-      const component = mount(
-        <EuiComboBox
-          options={options}
-          selectedOptions={[options[2]]}
-          onChange={() => {}}
-        />
-      );
+        expect(queryByTestSubject('comboBoxClearButton')).toBeFalsy();
+      });
 
-      findTestSubject(component, 'comboBoxClearButton').simulate('click');
-      expect(
-        findTestSubject(component, 'comboBoxSearchInput').getDOMNode()
-      ).toBe(document.activeElement);
-    });
-  });
+      it('does not render when isClearable is false', () => {
+        const { queryByTestSubject } = render(
+          <EuiComboBox
+            options={options}
+            selectedOptions={[options[2]]}
+            isClearable={false}
+          />
+        );
 
-  describe('sortMatchesBy', () => {
-    const sortMatchesByOptions = [
-      {
-        label: 'Something is Disabled',
-      },
-      ...options,
-    ];
-    test('options "none"', () => {
-      const component = mount<
-        EuiComboBox<TitanOption>,
-        EuiComboBoxProps<TitanOption>,
-        { matchingOptions: TitanOption[] }
-      >(<EuiComboBox options={sortMatchesByOptions} sortMatchesBy="none" />);
-
-      findTestSubject(component, 'comboBoxSearchInput').simulate('change', {
-        target: { value: 'di' },
+        expect(queryByTestSubject('comboBoxClearButton')).toBeFalsy();
       });
 
-      expect(component.state('matchingOptions')[0].label).toBe(
-        'Something is Disabled'
-      );
-    });
+      it('calls the onChange callback with empty array', () => {
+        const onChangeHandler = jest.fn();
 
-    test('options "startsWith"', () => {
-      const component = mount<
-        EuiComboBox<TitanOption>,
-        EuiComboBoxProps<TitanOption>,
-        { matchingOptions: TitanOption[] }
-      >(
-        <EuiComboBox
-          options={sortMatchesByOptions}
-          sortMatchesBy="startsWith"
-        />
-      );
+        const { getByTestSubject } = render(
+          <EuiComboBox
+            options={options}
+            selectedOptions={[options[2]]}
+            onChange={onChangeHandler}
+          />
+        );
+        fireEvent.click(getByTestSubject('comboBoxClearButton'));
 
-      findTestSubject(component, 'comboBoxSearchInput').simulate('change', {
-        target: { value: 'di' },
+        expect(onChangeHandler).toHaveBeenCalledTimes(1);
+        expect(onChangeHandler).toHaveBeenCalledWith([]);
       });
 
-      expect(component.state('matchingOptions')[0].label).toBe('Dione');
+      it('focuses the input', () => {
+        const { getByTestSubject } = render(
+          <EuiComboBox
+            options={options}
+            selectedOptions={[options[2]]}
+            onChange={() => {}}
+          />
+        );
+        fireEvent.click(getByTestSubject('comboBoxClearButton'));
+
+        expect(document.activeElement).toBe(
+          getByTestSubject('comboBoxSearchInput')
+        );
+      });
     });
-  });
 
-  describe('isCaseSensitive', () => {
-    const isCaseSensitiveOptions = [
-      {
-        label: 'Case sensitivity',
-      },
-    ];
-
-    test('options "false"', () => {
-      const component = mount<
-        EuiComboBox<TitanOption>,
-        EuiComboBoxProps<TitanOption>,
-        { matchingOptions: TitanOption[] }
-      >(
-        <EuiComboBox options={isCaseSensitiveOptions} isCaseSensitive={false} />
-      );
-
-      findTestSubject(component, 'comboBoxSearchInput').simulate('change', {
-        target: { value: 'case' },
+    describe('sortMatchesBy', () => {
+      const onSearchChange = jest.fn();
+      const sortMatchesByOptions = [
+        { label: 'Something is Disabled' },
+        ...options,
+      ];
+
+      test('"none"', () => {
+        const { getByTestSubject, getAllByRole } = render(
+          <EuiComboBox
+            options={sortMatchesByOptions}
+            onSearchChange={onSearchChange}
+            sortMatchesBy="none"
+          />
+        );
+        fireEvent.change(getByTestSubject('comboBoxSearchInput'), {
+          target: { value: 'di' },
+        });
+
+        const foundOptions = getAllByRole('option');
+        expect(foundOptions).toHaveLength(2);
+        expect(foundOptions[0]).toHaveTextContent('Something is Disabled');
+        expect(foundOptions[1]).toHaveTextContent('Dione');
       });
 
-      expect(component.state('matchingOptions')[0].label).toBe(
-        'Case sensitivity'
-      );
+      test('"startsWith"', () => {
+        const { getByTestSubject, getAllByRole } = render(
+          <EuiComboBox
+            options={sortMatchesByOptions}
+            onSearchChange={onSearchChange}
+            sortMatchesBy="startsWith"
+          />
+        );
+        fireEvent.change(getByTestSubject('comboBoxSearchInput'), {
+          target: { value: 'di' },
+        });
+
+        const foundOptions = getAllByRole('option');
+        expect(foundOptions).toHaveLength(2);
+        expect(foundOptions[0]).toHaveTextContent('Dione');
+        expect(foundOptions[1]).toHaveTextContent('Something is Disabled');
+      });
     });
 
-    test('options "true"', () => {
-      const component = mount<
-        EuiComboBox<TitanOption>,
-        EuiComboBoxProps<TitanOption>,
-        { matchingOptions: TitanOption[] }
-      >(
-        <EuiComboBox options={isCaseSensitiveOptions} isCaseSensitive={true} />
-      );
-
-      findTestSubject(component, 'comboBoxSearchInput').simulate('change', {
-        target: { value: 'case' },
+    describe('isCaseSensitive', () => {
+      const isCaseSensitiveOptions = [{ label: 'Case sensitivity' }];
+
+      test('false', () => {
+        const { getByTestSubject, queryAllByRole } = render(
+          <EuiComboBox
+            options={isCaseSensitiveOptions}
+            isCaseSensitive={false}
+          />
+        );
+        fireEvent.change(getByTestSubject('comboBoxSearchInput'), {
+          target: { value: 'case' },
+        });
+
+        expect(queryAllByRole('option')).toHaveLength(1);
       });
 
-      expect(component.state('matchingOptions').length).toBe(0);
+      test('true', () => {
+        const { getByTestSubject, queryAllByRole } = render(
+          <EuiComboBox
+            options={isCaseSensitiveOptions}
+            isCaseSensitive={true}
+          />
+        );
+        const input = getByTestSubject('comboBoxSearchInput');
 
-      findTestSubject(component, 'comboBoxSearchInput').simulate('change', {
-        target: { value: 'Case' },
-      });
+        fireEvent.change(input, { target: { value: 'case' } });
+        expect(queryAllByRole('option')).toHaveLength(0);
 
-      expect(component.state('matchingOptions')[0].label).toBe(
-        'Case sensitivity'
-      );
+        fireEvent.change(input, { target: { value: 'Case' } });
+        expect(queryAllByRole('option')).toHaveLength(1);
+      });
     });
   });
-
-  it('calls the inputRef prop with the input element', () => {
-    const inputRefCallback = jest.fn();
-
-    const component = mount<
-      EuiComboBox<TitanOption>,
-      EuiComboBoxProps<TitanOption>,
-      { matchingOptions: TitanOption[] }
-    >(<EuiComboBox options={options} inputRef={inputRefCallback} />);
-
-    expect(inputRefCallback).toHaveBeenCalledTimes(1);
-    expect(component.find('input[role="combobox"]').getDOMNode()).toBe(
-      inputRefCallback.mock.calls[0][0]
-    );
-  });
 });
diff --git a/src/components/combo_box/combo_box.tsx b/src/components/combo_box/combo_box.tsx
index 4d6e431b4dc..acd7ec2d70c 100644
--- a/src/components/combo_box/combo_box.tsx
+++ b/src/components/combo_box/combo_box.tsx
@@ -19,13 +19,11 @@ import React, {
 } from 'react';
 import classNames from 'classnames';
 
-import { findPopoverPosition, htmlIdGenerator, keys } from '../../services';
-import { getElementZIndex } from '../../services/popover';
+import { htmlIdGenerator, keys } from '../../services';
 import { CommonProps } from '../common';
-import { EuiPortal } from '../portal';
+import { EuiInputPopover, EuiInputPopoverProps } from '../popover';
 import { EuiI18n } from '../i18n';
 import { EuiFormControlLayoutProps } from '../form';
-import { EuiFilterSelectItemClass } from '../filter_group/filter_select_item';
 import type { EuiTextTruncateProps } from '../text_truncate';
 
 import {
@@ -41,11 +39,9 @@ import {
 } from './combo_box_input/combo_box_input';
 import { EuiComboBoxOptionsListProps } from './combo_box_options_list/combo_box_options_list';
 import {
-  UpdatePositionHandler,
   OptionHandler,
   RefInstance,
   EuiComboBoxOptionOption,
-  EuiComboBoxOptionsListPosition,
   EuiComboBoxSingleSelectionShape,
 } from './types';
 import { EuiComboBoxOptionsList } from './combo_box_options_list';
@@ -166,6 +162,13 @@ export interface _EuiComboBoxProps<T>
    * text will always take precedence.
    */
   truncationProps?: Partial<Omit<EuiTextTruncateProps, 'text' | 'children'>>;
+  /**
+   * Allows customizing the underlying EuiInputPopover component
+   * (except for props that control state).
+   */
+  inputPopoverProps?: Partial<
+    Omit<EuiInputPopoverProps, 'input' | 'isOpen' | 'closePopover'>
+  >;
 }
 
 /**
@@ -193,12 +196,8 @@ interface EuiComboBoxState<T> {
   activeOptionIndex: number;
   hasFocus: boolean;
   isListOpen: boolean;
-  listElement?: RefInstance<HTMLDivElement>;
-  listPosition: EuiComboBoxOptionsListPosition;
-  listZIndex: number | undefined;
   matchingOptions: Array<EuiComboBoxOptionOption<T>>;
   searchValue: string;
-  width: number;
 }
 
 const initialSearchValue = '';
@@ -224,9 +223,6 @@ export class EuiComboBox<T> extends Component<
     activeOptionIndex: -1,
     hasFocus: false,
     isListOpen: false,
-    listElement: null,
-    listPosition: 'bottom',
-    listZIndex: undefined,
     matchingOptions: getMatchingOptions<T>({
       options: this.props.options,
       selectedOptions: this.props.selectedOptions,
@@ -237,131 +233,36 @@ export class EuiComboBox<T> extends Component<
       sortMatchesBy: this.props.sortMatchesBy,
     }),
     searchValue: initialSearchValue,
-    width: 0,
   };
 
-  _isMounted = false;
   rootId = htmlIdGenerator();
 
   // Refs
   comboBoxRefInstance: RefInstance<HTMLDivElement> = null;
   comboBoxRefCallback: RefCallback<HTMLDivElement> = (ref) => {
     this.comboBoxRefInstance = ref;
-
-    if (this.comboBoxRefInstance) {
-      const comboBoxBounds = this.comboBoxRefInstance.getBoundingClientRect();
-      this.setState({
-        width: comboBoxBounds.width,
-      });
-    }
   };
 
   searchInputRefInstance: RefInstance<HTMLInputElement> = null;
   searchInputRefCallback: RefCallback<HTMLInputElement> = (ref) => {
     this.searchInputRefInstance = ref;
-    if (this.props.inputRef) this.props.inputRef(ref);
+    this.props.inputRef?.(ref);
   };
 
   listRefInstance: RefInstance<HTMLDivElement> = null;
   listRefCallback: RefCallback<HTMLDivElement> = (ref) => {
-    if (this.comboBoxRefInstance) {
-      // find the zIndex of the combobox relative to the page body
-      // and use that to depth-position the list box
-      // adds an extra `100` to provide some defense around neighboring elements' positioning
-      const listZIndex =
-        getElementZIndex(this.comboBoxRefInstance, document.body) + 100;
-      this.setState({ listZIndex });
-    }
     this.listRefInstance = ref;
   };
 
-  toggleButtonRefInstance: RefInstance<HTMLButtonElement | HTMLSpanElement> =
-    null;
-  toggleButtonRefCallback: RefCallback<HTMLButtonElement | HTMLSpanElement> = (
-    ref
-  ) => {
-    this.toggleButtonRefInstance = ref;
-  };
-
-  optionsRefInstances: Array<RefInstance<EuiFilterSelectItemClass>> = [];
-  optionRefCallback: EuiComboBoxOptionsListProps<T>['optionRef'] = (
-    index,
-    ref
-  ) => {
-    this.optionsRefInstances[index] = ref;
-  };
-
   openList = () => {
     this.setState({
       isListOpen: true,
     });
   };
 
-  closeList = (event?: Event) => {
-    if (event && event.target === this.searchInputRefInstance) {
-      // really long search values / custom entries triggers a scroll event on the input
-      // which the EuiComboBoxOptionsList passes through here
-      return;
-    }
-
+  closeList = () => {
     this.clearActiveOption();
-    this.setState({
-      listZIndex: undefined,
-      isListOpen: false,
-    });
-  };
-
-  updatePosition: UpdatePositionHandler = (
-    listElement = this.state.listElement
-  ) => {
-    if (!this._isMounted) {
-      return;
-    }
-
-    if (!this.state.isListOpen) {
-      return;
-    }
-
-    if (!listElement) {
-      return;
-    }
-
-    // it's possible that updateListPosition is called when listElement is becoming visible, but isn't yet
-    const listElementBounds = listElement.getBoundingClientRect();
-    if (listElementBounds.width === 0 || listElementBounds.height === 0) {
-      return;
-    }
-
-    if (!this.comboBoxRefInstance) {
-      return;
-    }
-
-    const comboBoxBounds = this.comboBoxRefInstance.getBoundingClientRect();
-
-    const { position, top } = findPopoverPosition({
-      allowCrossAxis: false,
-      anchor: this.comboBoxRefInstance,
-      popover: listElement,
-      position: 'bottom',
-    }) as { position: 'bottom'; top: number };
-
-    if (this.listRefInstance) {
-      this.listRefInstance.style.top = `${top}px`;
-      // listElement doesn't have its width set until after updating the position
-      // which means the popover service won't know about the correct width
-      // however, we already know where to position the element
-      this.listRefInstance.style.left = `${
-        comboBoxBounds.left + window.pageXOffset
-      }px`;
-      this.listRefInstance.style.width = `${comboBoxBounds.width}px`;
-    }
-
-    // Cache for future calls.
-    this.setState({
-      listElement,
-      listPosition: position,
-      width: comboBoxBounds.width,
-    });
+    this.setState({ isListOpen: false });
   };
 
   incrementActiveOptionIndex = (amount: number) => {
@@ -526,12 +427,8 @@ export class EuiComboBox<T> extends Component<
   };
 
   onComboBoxFocus: FocusEventHandler<HTMLInputElement> = (event) => {
-    if (this.props.onFocus) {
-      this.props.onFocus(event);
-    }
-
+    this.props.onFocus?.(event);
     this.openList();
-
     this.setState({ hasFocus: true });
   };
 
@@ -561,11 +458,8 @@ export class EuiComboBox<T> extends Component<
       this.comboBoxRefInstance.contains(relatedTarget);
 
     if (!focusedInOptionsList && !focusedInInput) {
+      this.props.onBlur?.(event);
       this.closeList();
-
-      if (this.props.onBlur) {
-        this.props.onBlur(event);
-      }
       this.setState({ hasFocus: false });
 
       // If the user tabs away or changes focus to another element, take whatever input they've
@@ -587,6 +481,7 @@ export class EuiComboBox<T> extends Component<
 
   onKeyDown: KeyboardEventHandler<HTMLDivElement> = (event) => {
     if (this.props.isDisabled) return;
+    event.persist(); // TODO: Remove once React 16 support is dropped
     switch (event.key) {
       case keys.ARROW_UP:
         event.preventDefault();
@@ -637,9 +532,7 @@ export class EuiComboBox<T> extends Component<
         break;
 
       default:
-        if (this.props.onKeyDown) {
-          this.props.onKeyDown(event);
-        }
+        this.props.onKeyDown?.(event);
     }
   };
 
@@ -669,17 +562,13 @@ export class EuiComboBox<T> extends Component<
       ? [addedOption]
       : selectedOptions.concat(addedOption);
 
-    if (onChange) {
-      onChange(changeOptions);
-    }
+    onChange?.(changeOptions);
 
     this.clearSearchValue();
     this.clearActiveOption();
 
     if (!isContainerBlur) {
-      if (this.searchInputRefInstance) {
-        this.searchInputRefInstance.focus();
-      }
+      this.searchInputRefInstance?.focus();
     }
 
     if (singleSelection) {
@@ -693,24 +582,17 @@ export class EuiComboBox<T> extends Component<
 
   onRemoveOption: OptionHandler<T> = (removedOption) => {
     const { onChange, selectedOptions } = this.props;
-    if (onChange) {
-      onChange(selectedOptions.filter((option) => option !== removedOption));
-    }
+    onChange?.(selectedOptions.filter((option) => option !== removedOption));
 
     this.clearActiveOption();
   };
 
   clearSelectedOptions = () => {
-    const { onChange } = this.props;
-    if (onChange) {
-      onChange([]);
-    }
+    this.props.onChange?.([]);
 
     // Clicking the clear button will also cause it to disappear. This would result in focus
     // shifting unexpectedly to the body element so we set it to the input which is more reasonable,
-    if (this.searchInputRefInstance) {
-      this.searchInputRefInstance.focus();
-    }
+    this.searchInputRefInstance?.focus();
 
     if (!this.state.isListOpen) {
       this.openList();
@@ -719,9 +601,7 @@ export class EuiComboBox<T> extends Component<
 
   onComboBoxClick = () => {
     // When the user clicks anywhere on the box, enter the interaction state.
-    if (this.searchInputRefInstance) {
-      this.searchInputRefInstance.focus();
-    }
+    this.searchInputRefInstance?.focus();
 
     // If the user does this from a state in which an option has focus, then we need to reset it or clear it.
     if (
@@ -742,22 +622,15 @@ export class EuiComboBox<T> extends Component<
   };
 
   onOpenListClick = () => {
-    if (this.searchInputRefInstance) {
-      this.searchInputRefInstance.focus();
-    }
+    this.searchInputRefInstance?.focus();
+
     if (!this.state.isListOpen) {
       this.openList();
     }
   };
 
   onOptionListScroll = () => {
-    if (this.searchInputRefInstance) {
-      this.searchInputRefInstance.focus();
-    }
-  };
-
-  onCloseListClick = () => {
-    this.closeList();
+    this.searchInputRefInstance?.focus();
   };
 
   onSearchChange: NonNullable<EuiComboBoxInputProps<T>['onChange']> = (
@@ -778,10 +651,6 @@ export class EuiComboBox<T> extends Component<
     }
   };
 
-  componentDidMount() {
-    this._isMounted = true;
-  }
-
   static getDerivedStateFromProps<T>(
     nextProps: _EuiComboBoxProps<T>,
     prevState: EuiComboBoxState<T>
@@ -817,76 +686,6 @@ export class EuiComboBox<T> extends Component<
     return stateUpdate;
   }
 
-  updateMatchingOptionsIfDifferent = (
-    newMatchingOptions: Array<EuiComboBoxOptionOption<T>>
-  ) => {
-    const { matchingOptions, activeOptionIndex } = this.state;
-    const { singleSelection, selectedOptions } = this.props;
-
-    let areOptionsDifferent = false;
-
-    if (matchingOptions.length !== newMatchingOptions.length) {
-      areOptionsDifferent = true;
-    } else {
-      for (let i = 0; i < matchingOptions.length; i++) {
-        if (matchingOptions[i].label !== newMatchingOptions[i].label) {
-          areOptionsDifferent = true;
-          break;
-        }
-      }
-    }
-
-    if (areOptionsDifferent) {
-      this.optionsRefInstances = [];
-      let nextActiveOptionIndex = activeOptionIndex;
-      // ensure that the currently selected single option is active if it is in the matchingOptions
-      if (Boolean(singleSelection) && selectedOptions.length === 1) {
-        if (newMatchingOptions.includes(selectedOptions[0])) {
-          nextActiveOptionIndex = newMatchingOptions.indexOf(
-            selectedOptions[0]
-          );
-        }
-      }
-
-      this.setState({
-        matchingOptions: newMatchingOptions,
-        activeOptionIndex: nextActiveOptionIndex,
-      });
-
-      if (!newMatchingOptions.length) {
-        // Prevent endless setState -> componentWillUpdate -> setState loop.
-        if (this.hasActiveOption()) {
-          this.clearActiveOption();
-        }
-      }
-    }
-  };
-
-  componentDidUpdate() {
-    const { options, selectedOptions, singleSelection, sortMatchesBy } =
-      this.props;
-    const { searchValue } = this.state;
-
-    // React 16.3 has a bug (fixed in 16.4) where getDerivedStateFromProps
-    // isn't called after a state change, and we track `searchValue` in state
-    // instead we need to react to a change in searchValue here
-    this.updateMatchingOptionsIfDifferent(
-      getMatchingOptions({
-        options,
-        selectedOptions,
-        searchValue,
-        isCaseSensitive: this.props.isCaseSensitive,
-        isPreFiltered: this.props.async,
-        showPrevSelected: Boolean(singleSelection),
-        sortMatchesBy,
-      })
-    );
-  }
-
-  componentWillUnmount() {
-    this._isMounted = false;
-  }
-
   render() {
     const {
       'data-test-subj': dataTestSubj,
@@ -919,6 +718,7 @@ export class EuiComboBox<T> extends Component<
       append,
       autoFocus,
       truncationProps,
+      inputPopoverProps,
       'aria-label': ariaLabel,
       'aria-labelledby': ariaLabelledby,
       ...rest
@@ -927,9 +727,7 @@ export class EuiComboBox<T> extends Component<
       activeOptionIndex,
       hasFocus,
       isListOpen,
-      listPosition,
       searchValue,
-      width,
       matchingOptions,
     } = this.state;
 
@@ -966,50 +764,41 @@ export class EuiComboBox<T> extends Component<
         : undefined;
 
       optionsList = (
-        <EuiPortal>
-          <EuiI18n
-            token="euiComboBox.listboxAriaLabel"
-            default="Choose from the following options"
-          >
-            {(listboxAriaLabel: string) => (
-              <EuiComboBoxOptionsList
-                zIndex={this.state.listZIndex}
-                activeOptionIndex={this.state.activeOptionIndex}
-                areAllOptionsSelected={this.areAllOptionsSelected()}
-                customOptionText={customOptionText}
-                data-test-subj={optionsListDataTestSubj}
-                fullWidth={fullWidth}
-                isCaseSensitive={isCaseSensitive}
-                isLoading={isLoading}
-                listRef={this.listRefCallback}
-                matchingOptions={matchingOptions}
-                onCloseList={this.closeList}
-                onCreateOption={onCreateOption}
-                onOptionClick={this.onOptionClick}
-                onOptionEnterKey={this.onOptionEnterKey}
-                onScroll={this.onOptionListScroll}
-                optionRef={this.optionRefCallback}
-                options={options}
-                position={listPosition}
-                singleSelection={singleSelection}
-                renderOption={renderOption}
-                rootId={this.rootId}
-                rowHeight={rowHeight}
-                scrollToIndex={activeOptionIndex}
-                searchValue={searchValue}
-                selectedOptions={selectedOptions}
-                updatePosition={this.updatePosition}
-                width={width}
-                delimiter={delimiter}
-                getSelectedOptionForSearchValue={
-                  getSelectedOptionForSearchValue
-                }
-                listboxAriaLabel={listboxAriaLabel}
-                truncationProps={truncationProps}
-              />
-            )}
-          </EuiI18n>
-        </EuiPortal>
+        <EuiI18n
+          token="euiComboBox.listboxAriaLabel"
+          default="Choose from the following options"
+        >
+          {(listboxAriaLabel: string) => (
+            <EuiComboBoxOptionsList
+              activeOptionIndex={this.state.activeOptionIndex}
+              areAllOptionsSelected={this.areAllOptionsSelected()}
+              customOptionText={customOptionText}
+              data-test-subj={optionsListDataTestSubj}
+              fullWidth={fullWidth}
+              isCaseSensitive={isCaseSensitive}
+              isLoading={isLoading}
+              listRef={this.listRefCallback}
+              matchingOptions={matchingOptions}
+              onCloseList={this.closeList}
+              onCreateOption={onCreateOption}
+              onOptionClick={this.onOptionClick}
+              onOptionEnterKey={this.onOptionEnterKey}
+              onScroll={this.onOptionListScroll}
+              options={options}
+              singleSelection={singleSelection}
+              renderOption={renderOption}
+              rootId={this.rootId}
+              rowHeight={rowHeight}
+              scrollToIndex={activeOptionIndex}
+              searchValue={searchValue}
+              selectedOptions={selectedOptions}
+              delimiter={delimiter}
+              getSelectedOptionForSearchValue={getSelectedOptionForSearchValue}
+              listboxAriaLabel={listboxAriaLabel}
+              truncationProps={truncationProps}
+            />
+          )}
+        </EuiI18n>
       );
     }
 
@@ -1029,46 +818,58 @@ export class EuiComboBox<T> extends Component<
         onBlur={this.onContainerBlur}
         ref={this.comboBoxRefCallback}
       >
-        <EuiComboBoxInput
-          compressed={compressed}
-          focusedOptionId={
-            this.hasActiveOption()
-              ? this.rootId(`_option-${this.state.activeOptionIndex}`)
-              : undefined
-          }
+        <EuiInputPopover
           fullWidth={fullWidth}
-          hasSelectedOptions={selectedOptions.length > 0}
-          id={inputId}
-          inputRef={this.searchInputRefCallback}
-          isDisabled={isDisabled}
-          isListOpen={isListOpen}
-          noIcon={!!noSuggestions}
-          onChange={this.onSearchChange}
-          onClear={
-            isClearable && !isDisabled ? this.clearSelectedOptions : undefined
+          panelPaddingSize="none"
+          disableFocusTrap={true}
+          closeOnScroll={true}
+          {...inputPopoverProps}
+          isOpen={isListOpen}
+          closePopover={this.closeList}
+          input={
+            <EuiComboBoxInput
+              compressed={compressed}
+              focusedOptionId={
+                this.hasActiveOption()
+                  ? this.rootId(`_option-${this.state.activeOptionIndex}`)
+                  : undefined
+              }
+              fullWidth={fullWidth}
+              hasSelectedOptions={selectedOptions.length > 0}
+              id={inputId}
+              inputRef={this.searchInputRefCallback}
+              isDisabled={isDisabled}
+              isListOpen={isListOpen}
+              noIcon={!!noSuggestions}
+              onChange={this.onSearchChange}
+              onClear={
+                isClearable && !isDisabled
+                  ? this.clearSelectedOptions
+                  : undefined
+              }
+              onClick={this.onComboBoxClick}
+              onCloseListClick={this.closeList}
+              onFocus={this.onComboBoxFocus}
+              onOpenListClick={this.onOpenListClick}
+              onRemoveOption={this.onRemoveOption}
+              placeholder={placeholder}
+              rootId={this.rootId}
+              searchValue={searchValue}
+              selectedOptions={selectedOptions}
+              singleSelection={singleSelection}
+              value={value}
+              append={singleSelection ? append : undefined}
+              prepend={singleSelection ? prepend : undefined}
+              isLoading={isLoading}
+              isInvalid={markAsInvalid}
+              autoFocus={autoFocus}
+              aria-label={ariaLabel}
+              aria-labelledby={ariaLabelledby}
+            />
           }
-          onClick={this.onComboBoxClick}
-          onCloseListClick={this.onCloseListClick}
-          onFocus={this.onComboBoxFocus}
-          onOpenListClick={this.onOpenListClick}
-          onRemoveOption={this.onRemoveOption}
-          placeholder={placeholder}
-          rootId={this.rootId}
-          searchValue={searchValue}
-          selectedOptions={selectedOptions}
-          singleSelection={singleSelection}
-          toggleButtonRef={this.toggleButtonRefCallback}
-          updatePosition={this.updatePosition}
-          value={value}
-          append={singleSelection ? append : undefined}
-          prepend={singleSelection ? prepend : undefined}
-          isLoading={isLoading}
-          isInvalid={markAsInvalid}
-          autoFocus={autoFocus}
-          aria-label={ariaLabel}
-          aria-labelledby={ariaLabelledby}
-        />
-        {optionsList}
+        >
+          {optionsList}
+        </EuiInputPopover>
       </div>
     );
   }
diff --git a/src/components/combo_box/combo_box_input/combo_box_input.tsx b/src/components/combo_box/combo_box_input/combo_box_input.tsx
index ead4a60c328..004112c7e8e 100644
--- a/src/components/combo_box/combo_box_input/combo_box_input.tsx
+++ b/src/components/combo_box/combo_box_input/combo_box_input.tsx
@@ -29,7 +29,6 @@ import {
   EuiComboBoxOptionOption,
   EuiComboBoxSingleSelectionShape,
   OptionHandler,
-  UpdatePositionHandler,
 } from '../types';
 
 export interface EuiComboBoxInputProps<T> extends CommonProps {
@@ -56,7 +55,6 @@ export interface EuiComboBoxInputProps<T> extends CommonProps {
   selectedOptions: Array<EuiComboBoxOptionOption<T>>;
   singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
   toggleButtonRef?: RefCallback<HTMLButtonElement | HTMLSpanElement>;
-  updatePosition: UpdatePositionHandler;
   value?: string;
   prepend?: EuiFormControlLayoutProps['prepend'];
   append?: EuiFormControlLayoutProps['append'];
@@ -99,12 +97,11 @@ export class EuiComboBoxInput<T> extends Component<
     this.setState({ inputWidth });
   };
 
-  updatePosition = () => {
-    // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
-    requestAnimationFrame(() => {
-      this.props.updatePosition();
-    });
-  };
+  componentDidUpdate(prevProps: EuiComboBoxInputProps<T>) {
+    if (prevProps.searchValue !== this.props.searchValue) {
+      this.updateInputSize(this.props.searchValue);
+    }
+  }
 
   onFocus: FocusEventHandler<HTMLInputElement> = (event) => {
     this.props.onFocus(event);
@@ -145,16 +142,6 @@ export class EuiComboBoxInput<T> extends Component<
     }
   };
 
-  componentDidUpdate(prevProps: EuiComboBoxInputProps<T>) {
-    if (prevProps.searchValue !== this.props.searchValue) {
-      this.updateInputSize(this.props.searchValue);
-
-      // We need to update the position of everything if the user enters enough input to change
-      // the size of the input.
-      this.updatePosition();
-    }
-  }
-
   render() {
     const {
       compressed,
@@ -176,7 +163,6 @@ export class EuiComboBoxInput<T> extends Component<
       searchValue,
       selectedOptions,
       singleSelection: singleSelectionProp,
-      toggleButtonRef,
       value,
       prepend,
       append,
@@ -289,7 +275,6 @@ export class EuiComboBoxInput<T> extends Component<
         'data-test-subj': 'comboBoxToggleListButton',
         disabled: isDisabled,
         onClick: isListOpen && !isDisabled ? onCloseListClick : onOpenListClick,
-        ref: toggleButtonRef,
         side: 'right',
         tabIndex: -1,
         type: 'arrowDown',
diff --git a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
index 46da053fed4..9904605dcca 100644
--- a/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
+++ b/src/components/combo_box/combo_box_options_list/_combo_box_options_list.scss
@@ -2,13 +2,13 @@
  * 1. Using specificity to override panel shadow
  * 2. Prevent really long input from overflowing the container.
  */
+
 .euiComboBoxOptionsList {
-  // Remove transforms from popover panel
-  transform: none !important; // stylelint-disable-line declaration-no-important
-  top: 0;
+  max-height: 200px; // Also used/set in the JS file
+  overflow: hidden;
 
-  .euiFilterSelectItem__content {
-    margin-block: 0 !important; // stylelint-disable-line declaration-no-important
+  &__virtualization {
+    @include euiScrollBar;
   }
 
   /* Kibana FTR affordance - without this, Selenium complains about the overlaid
@@ -26,13 +26,3 @@
   text-align: center;
   word-wrap: break-word;
 }
-
-.euiComboBoxOptionsList__rowWrap {
-  padding: 0;
-  max-height: 200px; // Also used/set in the JS file
-  overflow: hidden;
-
-  > div { // Targets the element for FixedSizeList that doesn't have a selector
-    @include euiScrollBar;
-  }
-}
diff --git a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
index 217e19e4d18..f06e5092d00 100644
--- a/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
+++ b/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx
@@ -6,15 +6,11 @@
  * Side Public License, v 1.
  */
 
-import React, {
-  Component,
-  ComponentProps,
-  ReactNode,
-  RefCallback,
-} from 'react';
+import React, { Component, ContextType, ReactNode, RefCallback } from 'react';
 import classNames from 'classnames';
 import {
   FixedSizeList,
+  FixedSizeListProps,
   ListProps,
   ListChildComponentProps,
 } from 'react-window';
@@ -28,79 +24,66 @@ import { EuiComboBoxTitle } from './combo_box_title';
 import { EuiI18n } from '../../i18n';
 import {
   EuiFilterSelectItem,
-  EuiFilterSelectItemClass,
   FilterChecked,
 } from '../../filter_group/filter_select_item';
 import { htmlIdGenerator } from '../../../services';
 import { CommonProps } from '../../common';
 import { EuiBadge } from '../../badge';
-import { EuiPopoverPanel } from '../../popover/popover_panel';
 import { EuiTextTruncate } from '../../text_truncate';
+import { EuiInputPopoverWidthContext } from '../../popover/input_popover';
 
 import type { _EuiComboBoxProps } from '../combo_box';
 import {
   EuiComboBoxOptionOption,
-  EuiComboBoxOptionsListPosition,
   EuiComboBoxSingleSelectionShape,
   OptionHandler,
-  RefInstance,
-  UpdatePositionHandler,
 } from '../types';
 
-export type EuiComboBoxOptionsListProps<T> = CommonProps &
-  ComponentProps<typeof EuiPopoverPanel> & {
-    activeOptionIndex?: number;
-    areAllOptionsSelected?: boolean;
-    listboxAriaLabel: string;
-    /**
-     * Creates a custom text option. You can use `{searchValue}` inside your string to better customize your text.
-     * It won't show if there's no onCreateOption.
-     */
-    customOptionText?: string;
-    fullWidth?: boolean;
-    getSelectedOptionForSearchValue?: (params: {
-      isCaseSensitive?: boolean;
-      searchValue: string;
-      selectedOptions: any[];
-    }) => EuiComboBoxOptionOption<T> | undefined;
+export type EuiComboBoxOptionsListProps<T> = CommonProps & {
+  activeOptionIndex?: number;
+  areAllOptionsSelected?: boolean;
+  listboxAriaLabel: string;
+  /**
+   * Creates a custom text option. You can use `{searchValue}` inside your string to better customize your text.
+   * It won't show if there's no onCreateOption.
+   */
+  customOptionText?: string;
+  fullWidth?: boolean;
+  getSelectedOptionForSearchValue?: (params: {
     isCaseSensitive?: boolean;
-    isLoading?: boolean;
-    listRef: RefCallback<HTMLDivElement>;
-    matchingOptions: Array<EuiComboBoxOptionOption<T>>;
-    onCloseList: (event: Event) => void;
-    onCreateOption?: (
-      searchValue: string,
-      options: Array<EuiComboBoxOptionOption<T>>
-    ) => boolean | void;
-    onOptionClick?: OptionHandler<T>;
-    onOptionEnterKey?: OptionHandler<T>;
-    onScroll?: ListProps['onScroll'];
-    optionRef: (
-      index: number,
-      node: RefInstance<EuiFilterSelectItemClass>
-    ) => void;
-    /**
-     * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
-     */
-    options: Array<EuiComboBoxOptionOption<T>>;
-    position?: EuiComboBoxOptionsListPosition;
-    renderOption?: (
-      option: EuiComboBoxOptionOption<T>,
-      searchValue: string,
-      OPTION_CONTENT_CLASSNAME: string
-    ) => ReactNode;
-    rootId: ReturnType<typeof htmlIdGenerator>;
-    rowHeight: number;
-    scrollToIndex?: number;
     searchValue: string;
-    selectedOptions: Array<EuiComboBoxOptionOption<T>>;
-    updatePosition: UpdatePositionHandler;
-    width: number;
-    singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
-    delimiter?: string;
-    zIndex?: number;
-    truncationProps?: _EuiComboBoxProps<T>['truncationProps'];
-  };
+    selectedOptions: any[];
+  }) => EuiComboBoxOptionOption<T> | undefined;
+  isCaseSensitive?: boolean;
+  isLoading?: boolean;
+  listRef: RefCallback<HTMLDivElement>;
+  matchingOptions: Array<EuiComboBoxOptionOption<T>>;
+  onCloseList: (event: Event) => void;
+  onCreateOption?: (
+    searchValue: string,
+    options: Array<EuiComboBoxOptionOption<T>>
+  ) => boolean | void;
+  onOptionClick?: OptionHandler<T>;
+  onOptionEnterKey?: OptionHandler<T>;
+  onScroll?: ListProps['onScroll'];
+  /**
+   * Array of EuiComboBoxOptionOption objects. See #EuiComboBoxOptionOption
+   */
+  options: Array<EuiComboBoxOptionOption<T>>;
+  renderOption?: (
+    option: EuiComboBoxOptionOption<T>,
+    searchValue: string,
+    OPTION_CONTENT_CLASSNAME: string
+  ) => ReactNode;
+  rootId: ReturnType<typeof htmlIdGenerator>;
+  rowHeight: number;
+  scrollToIndex?: number;
+  searchValue: string;
+  selectedOptions: Array<EuiComboBoxOptionOption<T>>;
+  singleSelection?: boolean | EuiComboBoxSingleSelectionShape;
+  delimiter?: string;
+  truncationProps?: _EuiComboBoxProps<T>['truncationProps'];
+};
 
 const hitEnterBadge = (
   <EuiBadge
@@ -114,9 +97,10 @@ const hitEnterBadge = (
 export class EuiComboBoxOptionsList<T> extends Component<
   EuiComboBoxOptionsListProps<T>
 > {
-  listRefInstance: RefInstance<HTMLDivElement> = null;
   listRef: FixedSizeList | null = null;
-  listBoxRef: HTMLUListElement | null = null;
+
+  static contextType = EuiInputPopoverWidthContext;
+  declare context: ContextType<typeof EuiInputPopoverWidthContext>;
 
   static defaultProps = {
     'data-test-subj': '',
@@ -124,44 +108,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
     isCaseSensitive: false,
   };
 
-  updatePosition = () => {
-    // Wait a beat for the DOM to update, since we depend on DOM elements' bounds.
-    requestAnimationFrame(() => {
-      this.props.updatePosition(this.listRefInstance);
-    });
-  };
-
-  componentDidMount() {
-    // Wait a frame, otherwise moving focus from one combo box to another will result in the class
-    // being removed from the body.
-    requestAnimationFrame(() => {
-      document.body.classList.add('euiBody-hasPortalContent');
-    });
-    this.updatePosition();
-    window.addEventListener('resize', this.updatePosition);
-
-    // Firefox will trigger a scroll event in many common situations when the options list div is appended
-    // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
-    setTimeout(() => {
-      window.addEventListener('scroll', this.closeListOnScroll, {
-        passive: true, // for better performance as we won't call preventDefault
-        capture: true, // scroll events don't bubble, they must be captured instead
-      });
-    }, 500);
-  }
-
   componentDidUpdate(prevProps: EuiComboBoxOptionsListProps<T>) {
-    const { options, selectedOptions, searchValue } = prevProps;
-
-    // We don't compare matchingOptions because that will result in a loop.
-    if (
-      searchValue !== this.props.searchValue ||
-      options !== this.props.options ||
-      selectedOptions !== this.props.selectedOptions
-    ) {
-      this.updatePosition();
-    }
-
     if (
       this.listRef &&
       typeof this.props.activeOptionIndex !== 'undefined' &&
@@ -171,44 +118,25 @@ export class EuiComboBoxOptionsList<T> extends Component<
     }
   }
 
-  componentWillUnmount() {
-    document.body.classList.remove('euiBody-hasPortalContent');
-    window.removeEventListener('resize', this.updatePosition);
-    window.removeEventListener('scroll', this.closeListOnScroll, {
-      capture: true,
-    });
-  }
-
-  closeListOnScroll = (event: Event) => {
-    // Close the list when a scroll event happens, but not if the scroll happened in the options list.
-    // This mirrors Firefox's approach of auto-closing `select` elements onscroll.
-    if (
-      this.listRefInstance &&
-      event.target &&
-      this.listRefInstance.contains(event.target as Node) === false
-    ) {
-      this.props.onCloseList(event);
-    }
-  };
-
-  listRefCallback: RefCallback<HTMLDivElement> = (ref) => {
-    this.props.listRef(ref);
-    this.listRefInstance = ref;
-  };
-
   setListRef = (ref: FixedSizeList | null) => {
     this.listRef = ref;
   };
 
-  setListBoxRef = (ref: HTMLUListElement | null) => {
-    this.listBoxRef = ref;
-
-    if (ref) {
-      ref.setAttribute('aria-label', this.props.listboxAriaLabel);
-      ref.setAttribute('id', this.props.rootId('listbox'));
-      ref.setAttribute('role', 'listbox');
-      ref.setAttribute('tabIndex', '0');
-    }
+  ListInnerElement: FixedSizeListProps['innerElementType'] = ({
+    children,
+    ...rest
+  }) => {
+    return (
+      <div
+        {...rest}
+        aria-label={this.props.listboxAriaLabel}
+        id={this.props.rootId('listbox')}
+        role="listbox"
+        tabIndex="0"
+      >
+        {children}
+      </div>
+    );
   };
 
   ListRow = ({ data, index, style }: ListChildComponentProps) => {
@@ -227,7 +155,6 @@ export class EuiComboBoxOptionsList<T> extends Component<
       singleSelection,
       selectedOptions,
       onOptionClick,
-      optionRef,
       activeOptionIndex,
       renderOption,
       searchValue,
@@ -271,7 +198,6 @@ export class EuiComboBoxOptionsList<T> extends Component<
             onOptionClick(option);
           }
         }}
-        ref={optionRef.bind(this, index)}
         isFocused={optionIsFocused}
         checked={checked}
         showIcons={singleSelection ? true : false}
@@ -383,9 +309,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       onOptionClick,
       onOptionEnterKey,
       onScroll,
-      optionRef,
       options,
-      position = 'bottom',
       renderOption,
       rootId,
       rowHeight,
@@ -393,11 +317,7 @@ export class EuiComboBoxOptionsList<T> extends Component<
       searchValue,
       selectedOptions,
       singleSelection,
-      updatePosition,
-      width,
       delimiter,
-      zIndex,
-      style,
       truncationProps,
       listboxAriaLabel,
       ...rest
@@ -534,47 +454,34 @@ export class EuiComboBoxOptionsList<T> extends Component<
       matchingOptions.length < 7 ? matchingOptions.length : 7;
     const height = numVisibleOptions * (rowHeight + 1); // Add one for the border
 
-    // bounded by max-height of euiComboBoxOptionsList__rowWrap
+    // bounded by max-height of .euiComboBoxOptionsList
     const boundedHeight = height > 200 ? 200 : height;
 
     const optionsList = (
       <FixedSizeList
+        className="euiComboBoxOptionsList__virtualization"
         height={boundedHeight}
         onScroll={onScroll}
         itemCount={matchingOptions.length}
         itemSize={rowHeight}
         itemData={matchingOptions}
         ref={this.setListRef}
-        innerRef={this.setListBoxRef}
-        width={width}
+        innerElementType={this.ListInnerElement}
+        width={this.context}
       >
         {this.ListRow}
       </FixedSizeList>
     );
 
-    /**
-     * Reusing the EuiPopover__panel classes to help with consistency/maintenance.
-     * But this should really be converted to user the popover component.
-     */
-    const classes = classNames('euiComboBoxOptionsList');
-
     return (
-      <EuiPopoverPanel
-        paddingSize="none"
-        hasShadow={false}
-        className={classes}
-        panelRef={this.listRefCallback}
+      <div
+        className="euiComboBoxOptionsList"
         data-test-subj={classNames('comboBoxOptionsList', dataTestSubj)}
-        style={{ ...style, zIndex: zIndex }}
-        isOpen
-        isAttached
-        position={position}
+        ref={listRef}
         {...rest}
       >
-        <div className="euiComboBoxOptionsList__rowWrap">
-          {emptyState || optionsList}
-        </div>
-      </EuiPopoverPanel>
+        {emptyState || optionsList}
+      </div>
     );
   }
 }
diff --git a/src/components/combo_box/index.ts b/src/components/combo_box/index.ts
index e80488c60ac..d85ab3bf70f 100644
--- a/src/components/combo_box/index.ts
+++ b/src/components/combo_box/index.ts
@@ -12,6 +12,5 @@ export * from './combo_box_input';
 export * from './combo_box_options_list';
 export type {
   EuiComboBoxOptionOption,
-  EuiComboBoxOptionsListPosition,
   EuiComboBoxSingleSelectionShape,
 } from './types';
diff --git a/src/components/combo_box/types.ts b/src/components/combo_box/types.ts
index 0049587d0e7..45cf3838975 100644
--- a/src/components/combo_box/types.ts
+++ b/src/components/combo_box/types.ts
@@ -26,15 +26,10 @@ export interface EuiComboBoxOptionOption<
   truncationProps?: _EuiComboBoxProps<T>['truncationProps'];
 }
 
-export type UpdatePositionHandler = (
-  listElement?: RefInstance<HTMLDivElement>
-) => void;
 export type OptionHandler<T> = (option: EuiComboBoxOptionOption<T>) => void;
 
 export type RefInstance<T> = T | null;
 
-export type EuiComboBoxOptionsListPosition = 'top' | 'bottom';
-
 export interface EuiComboBoxSingleSelectionShape {
   asPlainText?: boolean;
 }
diff --git a/src/components/context_menu/_context_menu_panel.scss b/src/components/context_menu/_context_menu_panel.scss
index cefb1938b48..7f21ff1e355 100644
--- a/src/components/context_menu/_context_menu_panel.scss
+++ b/src/components/context_menu/_context_menu_panel.scss
@@ -10,21 +10,25 @@
   &.euiContextMenuPanel-txInLeft {
     pointer-events: none;
     animation: euiContextMenuPanelTxInLeft $euiAnimSpeedNormal $euiAnimSlightResistance;
+    animation-fill-mode: forwards;
   }
 
   &.euiContextMenuPanel-txOutLeft {
     pointer-events: none;
     animation: euiContextMenuPanelTxOutLeft $euiAnimSpeedNormal $euiAnimSlightResistance;
+    animation-fill-mode: forwards;
   }
 
   &.euiContextMenuPanel-txInRight {
     pointer-events: none;
     animation: euiContextMenuPanelTxInRight $euiAnimSpeedNormal $euiAnimSlightResistance;
+    animation-fill-mode: forwards;
   }
 
   &.euiContextMenuPanel-txOutRight {
     pointer-events: none;
     animation: euiContextMenuPanelTxOutRight $euiAnimSpeedNormal $euiAnimSlightResistance;
+    animation-fill-mode: forwards;
   }
 }
 
diff --git a/src/components/context_menu/context_menu_panel.tsx b/src/components/context_menu/context_menu_panel.tsx
index 8cacaff10b1..1e6602b2c2c 100644
--- a/src/components/context_menu/context_menu_panel.tsx
+++ b/src/components/context_menu/context_menu_panel.tsx
@@ -19,7 +19,7 @@ import { tabbable, FocusableElement } from 'tabbable';
 import { CommonProps, NoArgCallback, keysOf } from '../common';
 import { EuiIcon } from '../icon';
 import { EuiResizeObserver } from '../observer/resize_observer';
-import { cascadingMenuKeys } from '../../services';
+import { keys } from '../../services';
 import {
   EuiContextMenuItem,
   EuiContextMenuItemProps,
@@ -164,7 +164,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
         document.activeElement === this.backButton ||
         document.activeElement === this.panel)
     ) {
-      if (event.key === cascadingMenuKeys.ARROW_LEFT) {
+      if (event.key === keys.ARROW_LEFT) {
         if (showPreviousPanel) {
           event.preventDefault();
           event.stopPropagation();
@@ -179,7 +179,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
 
     if (items?.length) {
       switch (event.key) {
-        case cascadingMenuKeys.TAB:
+        case keys.TAB:
           requestAnimationFrame(() => {
             // NOTE: document.activeElement is stale if not wrapped in requestAnimationFrame
             const focusedItemIndex = this.state.menuItems.indexOf(
@@ -197,7 +197,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
           });
           break;
 
-        case cascadingMenuKeys.ARROW_UP:
+        case keys.ARROW_UP:
           event.preventDefault();
           this.focusMenuItem('up');
 
@@ -206,7 +206,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
           }
           break;
 
-        case cascadingMenuKeys.ARROW_DOWN:
+        case keys.ARROW_DOWN:
           event.preventDefault();
           this.focusMenuItem('down');
 
@@ -215,7 +215,7 @@ export class EuiContextMenuPanel extends Component<Props, State> {
           }
           break;
 
-        case cascadingMenuKeys.ARROW_RIGHT:
+        case keys.ARROW_RIGHT:
           if (this.props.showNextPanel) {
             event.preventDefault();
             this.props.showNextPanel(
diff --git a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
index a943f8ee0b8..2a29d3c7006 100644
--- a/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
+++ b/src/components/control_bar/__snapshots__/control_bar.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`EuiControlBar is rendered 1`] = `
         </ol>
       </nav>
       <button
-        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiColorMode-dark-colorClassName"
+        class="euiButton euiControlBar__button emotion-euiButtonDisplay-s-defaultMinWidth-base-text-euiColorMode-dark"
         data-test-subj="dts"
         type="button"
       >
diff --git a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
index 85841317fe0..1955c97a301 100644
--- a/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
+++ b/src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
@@ -724,25 +724,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    0, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 1, row 1
-                  </p>
+                  0, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 1, row 1
+                </p>
               </div>
             </div>
             <div
@@ -758,25 +754,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    0, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 2, row 1
-                  </p>
+                  0, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 2, row 1
+                </p>
               </div>
             </div>
             <div
@@ -792,25 +784,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    1, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 1, row 2
-                  </p>
+                  1, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 1, row 2
+                </p>
               </div>
             </div>
             <div
@@ -826,25 +814,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    1, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 2, row 2
-                  </p>
+                  1, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 2, row 2
+                </p>
               </div>
             </div>
             <div
@@ -860,25 +844,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    2, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 1, row 3
-                  </p>
+                  2, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 1, row 3
+                </p>
               </div>
             </div>
             <div
@@ -894,25 +874,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    2, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 2, row 3
-                  </p>
+                  2, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 2, row 3
+                </p>
               </div>
             </div>
           </div>
@@ -1251,25 +1227,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 data-focus-lock-disabled="disabled"
               >
                 <div
-                  class="euiDataGridRowCell__expandFlex"
+                  class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
                 >
                   <div
-                    class="euiDataGridRowCell__expandContent"
+                    class="euiDataGridRowCell__content"
+                    data-datagrid-cellcontent="true"
                   >
-                    <div
-                      class="euiDataGridRowCell__truncate"
-                      data-datagrid-cellcontent="true"
-                    >
-                      0
-                    </div>
-                    <p
-                      class="emotion-euiScreenReaderOnly"
-                      hidden=""
-                    >
-                      - 
-                      leading, column 1, row 1
-                    </p>
+                    0
                   </div>
+                  <p
+                    class="emotion-euiScreenReaderOnly"
+                    hidden=""
+                  >
+                    - 
+                    leading, column 1, row 1
+                  </p>
                 </div>
               </div>
               <div
@@ -1291,25 +1263,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    0, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 2, row 1
-                  </p>
+                  0, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 2, row 1
+                </p>
               </div>
             </div>
             <div
@@ -1325,25 +1293,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    0, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 3, row 1
-                  </p>
+                  0, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 3, row 1
+                </p>
               </div>
             </div>
             <div
@@ -1367,25 +1331,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 data-focus-lock-disabled="disabled"
               >
                 <div
-                  class="euiDataGridRowCell__expandFlex"
+                  class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
                 >
                   <div
-                    class="euiDataGridRowCell__expandContent"
+                    class="euiDataGridRowCell__content"
+                    data-datagrid-cellcontent="true"
                   >
-                    <div
-                      class="euiDataGridRowCell__truncate"
-                      data-datagrid-cellcontent="true"
-                    >
-                      0
-                    </div>
-                    <p
-                      class="emotion-euiScreenReaderOnly"
-                      hidden=""
-                    >
-                      - 
-                      trailing, column 4, row 1
-                    </p>
+                    0
                   </div>
+                  <p
+                    class="emotion-euiScreenReaderOnly"
+                    hidden=""
+                  >
+                    - 
+                    trailing, column 4, row 1
+                  </p>
                 </div>
               </div>
               <div
@@ -1415,25 +1375,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 data-focus-lock-disabled="disabled"
               >
                 <div
-                  class="euiDataGridRowCell__expandFlex"
+                  class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
                 >
                   <div
-                    class="euiDataGridRowCell__expandContent"
+                    class="euiDataGridRowCell__content"
+                    data-datagrid-cellcontent="true"
                   >
-                    <div
-                      class="euiDataGridRowCell__truncate"
-                      data-datagrid-cellcontent="true"
-                    >
-                      1
-                    </div>
-                    <p
-                      class="emotion-euiScreenReaderOnly"
-                      hidden=""
-                    >
-                      - 
-                      leading, column 1, row 2
-                    </p>
+                    1
                   </div>
+                  <p
+                    class="emotion-euiScreenReaderOnly"
+                    hidden=""
+                  >
+                    - 
+                    leading, column 1, row 2
+                  </p>
                 </div>
               </div>
               <div
@@ -1455,25 +1411,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    1, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 2, row 2
-                  </p>
+                  1, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 2, row 2
+                </p>
               </div>
             </div>
             <div
@@ -1489,25 +1441,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    1, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 3, row 2
-                  </p>
+                  1, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 3, row 2
+                </p>
               </div>
             </div>
             <div
@@ -1531,25 +1479,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 data-focus-lock-disabled="disabled"
               >
                 <div
-                  class="euiDataGridRowCell__expandFlex"
+                  class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
                 >
                   <div
-                    class="euiDataGridRowCell__expandContent"
+                    class="euiDataGridRowCell__content"
+                    data-datagrid-cellcontent="true"
                   >
-                    <div
-                      class="euiDataGridRowCell__truncate"
-                      data-datagrid-cellcontent="true"
-                    >
-                      1
-                    </div>
-                    <p
-                      class="emotion-euiScreenReaderOnly"
-                      hidden=""
-                    >
-                      - 
-                      trailing, column 4, row 2
-                    </p>
+                    1
                   </div>
+                  <p
+                    class="emotion-euiScreenReaderOnly"
+                    hidden=""
+                  >
+                    - 
+                    trailing, column 4, row 2
+                  </p>
                 </div>
               </div>
               <div
@@ -1579,25 +1523,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 data-focus-lock-disabled="disabled"
               >
                 <div
-                  class="euiDataGridRowCell__expandFlex"
+                  class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
                 >
                   <div
-                    class="euiDataGridRowCell__expandContent"
+                    class="euiDataGridRowCell__content"
+                    data-datagrid-cellcontent="true"
                   >
-                    <div
-                      class="euiDataGridRowCell__truncate"
-                      data-datagrid-cellcontent="true"
-                    >
-                      2
-                    </div>
-                    <p
-                      class="emotion-euiScreenReaderOnly"
-                      hidden=""
-                    >
-                      - 
-                      leading, column 1, row 3
-                    </p>
+                    2
                   </div>
+                  <p
+                    class="emotion-euiScreenReaderOnly"
+                    hidden=""
+                  >
+                    - 
+                    leading, column 1, row 3
+                  </p>
                 </div>
               </div>
               <div
@@ -1619,25 +1559,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    2, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 2, row 3
-                  </p>
+                  2, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 2, row 3
+                </p>
               </div>
             </div>
             <div
@@ -1653,25 +1589,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    2, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 3, row 3
-                  </p>
+                  2, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 3, row 3
+                </p>
               </div>
             </div>
             <div
@@ -1695,25 +1627,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
                 data-focus-lock-disabled="disabled"
               >
                 <div
-                  class="euiDataGridRowCell__expandFlex"
+                  class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
                 >
                   <div
-                    class="euiDataGridRowCell__expandContent"
+                    class="euiDataGridRowCell__content"
+                    data-datagrid-cellcontent="true"
                   >
-                    <div
-                      class="euiDataGridRowCell__truncate"
-                      data-datagrid-cellcontent="true"
-                    >
-                      2
-                    </div>
-                    <p
-                      class="emotion-euiScreenReaderOnly"
-                      hidden=""
-                    >
-                      - 
-                      trailing, column 4, row 3
-                    </p>
+                    2
                   </div>
+                  <p
+                    class="emotion-euiScreenReaderOnly"
+                    hidden=""
+                  >
+                    - 
+                    trailing, column 4, row 3
+                  </p>
                 </div>
               </div>
               <div
@@ -2011,25 +1939,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    0, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 1, row 1
-                  </p>
+                  0, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 1, row 1
+                </p>
               </div>
             </div>
             <div
@@ -2045,25 +1969,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    0, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 2, row 1
-                  </p>
+                  0, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 2, row 1
+                </p>
               </div>
             </div>
             <div
@@ -2079,25 +1999,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    1, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 1, row 2
-                  </p>
+                  1, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 1, row 2
+                </p>
               </div>
             </div>
             <div
@@ -2113,25 +2029,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    1, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 2, row 2
-                  </p>
+                  1, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 2, row 2
+                </p>
               </div>
             </div>
             <div
@@ -2147,25 +2059,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    2, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 1, row 3
-                  </p>
+                  2, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 1, row 3
+                </p>
               </div>
             </div>
             <div
@@ -2181,25 +2089,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    2, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 2, row 3
-                  </p>
+                  2, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 2, row 3
+                </p>
               </div>
             </div>
           </div>
@@ -2489,25 +2393,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    0, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 1, row 1
-                  </p>
+                  0, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 1, row 1
+                </p>
               </div>
             </div>
             <div
@@ -2523,25 +2423,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    0, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 2, row 1
-                  </p>
+                  0, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 2, row 1
+                </p>
               </div>
             </div>
             <div
@@ -2557,25 +2453,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    1, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 1, row 2
-                  </p>
+                  1, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 1, row 2
+                </p>
               </div>
             </div>
             <div
@@ -2591,25 +2483,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    1, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 2, row 2
-                  </p>
+                  1, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 2, row 2
+                </p>
               </div>
             </div>
             <div
@@ -2625,25 +2513,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    2, A
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    A, column 1, row 3
-                  </p>
+                  2, A
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  A, column 1, row 3
+                </p>
               </div>
             </div>
             <div
@@ -2659,25 +2543,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
               tabindex="-1"
             >
               <div
-                class="euiDataGridRowCell__expandFlex"
+                class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
               >
                 <div
-                  class="euiDataGridRowCell__expandContent"
+                  class="euiDataGridRowCell__content eui-textTruncate"
+                  data-datagrid-cellcontent="true"
                 >
-                  <div
-                    class="euiDataGridRowCell__truncate"
-                    data-datagrid-cellcontent="true"
-                  >
-                    2, B
-                  </div>
-                  <p
-                    class="emotion-euiScreenReaderOnly"
-                    hidden=""
-                  >
-                    - 
-                    B, column 2, row 3
-                  </p>
+                  2, B
                 </div>
+                <p
+                  class="emotion-euiScreenReaderOnly"
+                  hidden=""
+                >
+                  - 
+                  B, column 2, row 3
+                </p>
               </div>
             </div>
           </div>
diff --git a/src/components/datagrid/_data_grid_data_row.scss b/src/components/datagrid/_data_grid_data_row.scss
index cfaa2a9095b..5a6869fe66c 100644
--- a/src/components/datagrid/_data_grid_data_row.scss
+++ b/src/components/datagrid/_data_grid_data_row.scss
@@ -38,22 +38,6 @@
       animation-delay: $euiAnimSpeedNormal;
       animation-fill-mode: forwards;
     }
-    /*
-     * For some incredibly bizarre reason, Safari doesn't correctly update the flex
-     * width of the content (when rows are an undefined height/single flex row),
-     * which causes the action icons to overlap & makes the content less readable.
-     * This workaround "animation" forces a rerender of the flex content width
-     *
-     * TODO: Remove this workaround once https://bugs.webkit.org/show_bug.cgi?id=258539 is resolved
-     */
-    .euiDataGridRowCell__expandContent {
-      animation-name: euiDataGridCellActionsSafariWorkaround;
-      animation-duration: 1000ms; // I don't know why the duration matters or why it being longer works more consistently 🥲
-      animation-delay: $euiAnimSpeedNormal + $euiAnimSpeedExtraFast; // Wait for above animation to finish
-      animation-iteration-count: 1;
-      animation-fill-mode: forwards;
-      animation-timing-function: linear;
-    }
   }
 
   // On focus, directly show action buttons (without animation)
@@ -95,23 +79,6 @@
   &.euiDataGridRowCell--capitalize {
     text-transform: capitalize;
   }
-
-  .euiDataGridRowCell__definedHeight {
-    @include euiTextBreakWord;
-    flex-grow: 1;
-  }
-
-  // We only truncate if the cell is not a control column.
-  &:not(.euiDataGridRowCell--controlColumn) {
-    .euiDataGridRowCell__content,
-    .euiDataGridRowCell__truncate,
-    &.euiDataGridRowCell__truncate,
-    .euiDataGridRowCell__expandContent {
-      @include euiTextTruncate;
-      overflow: hidden;
-      white-space: nowrap;
-    }
-  }
 }
 
 .euiDataGridRowCell__popover {
@@ -130,39 +97,51 @@
   @include euiBottomShadow; // TODO: Convert to euiShadowMedium() in Emotion
 }
 
-.euiDataGridRowCell__expandFlex {
-  position: relative; // for positioning expand button
+.euiDataGridRowCell__contentWrapper {
+  position: relative; // Needed for .euiDataGridRowCell__actions--overlay
+  height: 100%;
+  overflow: hidden;
+}
+
+.euiDataGridRowCell__defaultHeight {
   display: flex;
   align-items: baseline;
-  height: 100%;
+  max-width: 100%;
+
+  .euiDataGridRowCell__content {
+    flex-grow: 1;
+  }
+
+  .euiDataGridRowCell__actions {
+    flex-grow: 0;
+  }
 
   .euiDataGridRowCell--controlColumn & {
+    height: 100%;
     align-items: center;
   }
 }
 
-.euiDataGridRowCell__expandContent {
-  flex-grow: 1;
-}
-
-.euiDataGridRowCell__contentByHeight {
-  flex-grow: 1;
-  height: 100%;
+.euiDataGridRowCell__numericalHeight {
+  // Without this rule, popover anchors content that overflows off the page
+  [data-euiportal],
+  .euiPopover,
+  .euiPopover__anchor {
+    height: 100%;
+  }
 }
 
 // Cell actions
-.euiDataGridRowCell__expandActions {
+.euiDataGridRowCell__actions {
   display: flex;
-}
-@include euiDataGridRowCellActions($definedHeight: false) {
-  flex-grow: 0;
-}
-@include euiDataGridRowCellActions($definedHeight: true) {
-  background-color: $euiColorEmptyShade;
-  position: absolute;
-  right: 0;
-  top: 0;
-  padding: $euiDataGridCellPaddingM 0;
+
+  &--overlay {
+    position: absolute;
+    right: 0;
+    top: 0;
+    padding: $euiDataGridCellPaddingM 0;
+    background-color: $euiColorEmptyShade;
+  }
 }
 
 .euiDataGridRowCell__actionButtonIcon {
@@ -181,20 +160,20 @@
 // Row stripes
 @include euiDataGridStyles(stripes) {
   .euiDataGridRow--striped {
-    @include euiDataGridRowCellActions($definedHeight: true) {
+    &,
+    .euiDataGridRowCell__actions--overlay {
       background-color: $euiColorLightestShade;
     }
-    background-color: $euiColorLightestShade;
   }
 }
 
 // Row highlights
 @include euiDataGridStyles(rowHoverHighlight) {
   .euiDataGridRow:hover {
-    @include euiDataGridRowCellActions($definedHeight: true) {
+    &,
+    .euiDataGridRowCell__actions--overlay {
       background-color: $euiColorHighlight;
     }
-    background-color: $euiColorHighlight;
   }
 }
 
@@ -240,10 +219,11 @@
 
 // Compressed density grids - height tweaks
 @include euiDataGridStyles(fontSizeSmall, paddingSmall) {
-  @include euiDataGridRowCellActions($definedHeight: true) {
+  .euiDataGridRowCell__actions--overlay {
     padding: ($euiDataGridCellPaddingS / 2) 0;
   }
-  @include euiDataGridRowCellActions($definedHeight: false) {
+
+  .euiDataGridRowCell__defaultHeight .euiDataGridRowCell__actions {
     transform: translateY(1px);
   }
 }
@@ -259,14 +239,3 @@
     width: $euiSizeM;
   }
 }
-@keyframes euiDataGridCellActionsSafariWorkaround {
-  from {
-    width: 100%;
-    flex-basis: 100%;
-  }
-
-  to {
-    width: auto;
-    flex-basis: auto;
-  }
-}
diff --git a/src/components/datagrid/_mixins.scss b/src/components/datagrid/_mixins.scss
index 1a70c21cc97..4303730770c 100644
--- a/src/components/datagrid/_mixins.scss
+++ b/src/components/datagrid/_mixins.scss
@@ -82,18 +82,3 @@ $euiDataGridStyles: (
     @content;
   }
 }
-
-@mixin euiDataGridRowCellActions($definedHeight: false) {
-  @if $definedHeight {
-    // Defined heights are cells with row heights of auto, lineCount, or a static height
-    // that set the __contentByHeight class
-    .euiDataGridRowCell__contentByHeight + .euiDataGridRowCell__expandActions {
-      @content;
-    }
-  } @else {
-    // Otherwise, an undefined height (single flex row) will set __expandContent
-    .euiDataGridRowCell__expandContent + .euiDataGridRowCell__expandActions {
-      @content;
-    }
-  }
-}
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
index bce634a36b1..029ed6665a9 100644
--- a/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
+++ b/src/components/datagrid/body/__snapshots__/data_grid_body_custom.test.tsx.snap
@@ -134,25 +134,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       tabindex="-1"
     >
       <div
-        class="euiDataGridRowCell__expandFlex"
+        class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
       >
         <div
-          class="euiDataGridRowCell__expandContent"
+          class="euiDataGridRowCell__content eui-textTruncate"
+          data-datagrid-cellcontent="true"
         >
-          <div
-            class="euiDataGridRowCell__truncate"
-            data-datagrid-cellcontent="true"
-          >
-            hello
-          </div>
-          <p
-            class="emotion-euiScreenReaderOnly"
-            hidden=""
-          >
-            - 
-            columnA, column 1, row 1
-          </p>
+          hello
         </div>
+        <p
+          class="emotion-euiScreenReaderOnly"
+          hidden=""
+        >
+          - 
+          columnA, column 1, row 1
+        </p>
       </div>
     </div>
     <div
@@ -168,25 +164,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       tabindex="-1"
     >
       <div
-        class="euiDataGridRowCell__expandFlex"
+        class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
       >
         <div
-          class="euiDataGridRowCell__expandContent"
+          class="euiDataGridRowCell__content eui-textTruncate"
+          data-datagrid-cellcontent="true"
         >
-          <div
-            class="euiDataGridRowCell__truncate"
-            data-datagrid-cellcontent="true"
-          >
-            world
-          </div>
-          <p
-            class="emotion-euiScreenReaderOnly"
-            hidden=""
-          >
-            - 
-            columnB, column 2, row 1
-          </p>
+          world
         </div>
+        <p
+          class="emotion-euiScreenReaderOnly"
+          hidden=""
+        >
+          - 
+          columnB, column 2, row 1
+        </p>
       </div>
     </div>
   </div>
@@ -206,25 +198,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       tabindex="-1"
     >
       <div
-        class="euiDataGridRowCell__expandFlex"
+        class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
       >
         <div
-          class="euiDataGridRowCell__expandContent"
+          class="euiDataGridRowCell__content eui-textTruncate"
+          data-datagrid-cellcontent="true"
         >
-          <div
-            class="euiDataGridRowCell__truncate"
-            data-datagrid-cellcontent="true"
-          >
-            lorem
-          </div>
-          <p
-            class="emotion-euiScreenReaderOnly"
-            hidden=""
-          >
-            - 
-            columnA, column 1, row 2
-          </p>
+          lorem
         </div>
+        <p
+          class="emotion-euiScreenReaderOnly"
+          hidden=""
+        >
+          - 
+          columnA, column 1, row 2
+        </p>
       </div>
     </div>
     <div
@@ -240,25 +228,21 @@ exports[`EuiDataGridBodyCustomRender treats \`renderCustomGridBody\` as a render
       tabindex="-1"
     >
       <div
-        class="euiDataGridRowCell__expandFlex"
+        class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
       >
         <div
-          class="euiDataGridRowCell__expandContent"
+          class="euiDataGridRowCell__content eui-textTruncate"
+          data-datagrid-cellcontent="true"
         >
-          <div
-            class="euiDataGridRowCell__truncate"
-            data-datagrid-cellcontent="true"
-          >
-            ipsum
-          </div>
-          <p
-            class="emotion-euiScreenReaderOnly"
-            hidden=""
-          >
-            - 
-            columnB, column 2, row 2
-          </p>
+          ipsum
         </div>
+        <p
+          class="emotion-euiScreenReaderOnly"
+          hidden=""
+        >
+          - 
+          columnB, column 2, row 2
+        </p>
       </div>
     </div>
   </div>
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
index 2e2fa824dc3..7251f9857ab 100644
--- a/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
+++ b/src/components/datagrid/body/__snapshots__/data_grid_body_virtualized.test.tsx.snap
@@ -135,27 +135,23 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
       tabindex="-1"
     >
       <div
-        class="euiDataGridRowCell__expandFlex"
+        class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
       >
         <div
-          class="euiDataGridRowCell__expandContent"
+          class="euiDataGridRowCell__content eui-textTruncate"
+          data-datagrid-cellcontent="true"
         >
-          <div
-            class="euiDataGridRowCell__truncate"
-            data-datagrid-cellcontent="true"
-          >
-            <span>
-              cell content
-            </span>
-          </div>
-          <p
-            class="emotion-euiScreenReaderOnly"
-            hidden=""
-          >
-            - 
-            columnA, column 1, row 1
-          </p>
+          <span>
+            cell content
+          </span>
         </div>
+        <p
+          class="emotion-euiScreenReaderOnly"
+          hidden=""
+        >
+          - 
+          columnA, column 1, row 1
+        </p>
       </div>
     </div>
     <div
@@ -171,27 +167,23 @@ exports[`EuiDataGridBodyVirtualized renders 1`] = `
       tabindex="-1"
     >
       <div
-        class="euiDataGridRowCell__expandFlex"
+        class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
       >
         <div
-          class="euiDataGridRowCell__expandContent"
+          class="euiDataGridRowCell__content eui-textTruncate"
+          data-datagrid-cellcontent="true"
         >
-          <div
-            class="euiDataGridRowCell__truncate"
-            data-datagrid-cellcontent="true"
-          >
-            <span>
-              cell content
-            </span>
-          </div>
-          <p
-            class="emotion-euiScreenReaderOnly"
-            hidden=""
-          >
-            - 
-            columnB, column 2, row 1
-          </p>
+          <span>
+            cell content
+          </span>
         </div>
+        <p
+          class="emotion-euiScreenReaderOnly"
+          hidden=""
+        >
+          - 
+          columnB, column 2, row 1
+        </p>
       </div>
     </div>
   </div>
diff --git a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
index 3282d55d703..019cda14347 100644
--- a/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
+++ b/src/components/datagrid/body/__snapshots__/data_grid_cell.test.tsx.snap
@@ -49,38 +49,34 @@ exports[`EuiDataGridCell renders 1`] = `
   tabindex="-1"
 >
   <div
-    class="euiDataGridRowCell__expandFlex"
+    class="euiDataGridRowCell__contentWrapper euiDataGridRowCell__defaultHeight"
   >
     <div
-      class="euiDataGridRowCell__expandContent"
+      class="euiDataGridRowCell__content eui-textTruncate"
+      data-datagrid-cellcontent="true"
     >
-      <div
-        class="euiDataGridRowCell__truncate"
-        data-datagrid-cellcontent="true"
-      >
-        <div>
-          <button
-            data-datagrid-interactable="true"
-            tabindex="-1"
-          >
-            hello
-          </button>
-          <button
-            data-datagrid-interactable="true"
-            tabindex="-1"
-          >
-            world
-          </button>
-        </div>
+      <div>
+        <button
+          data-datagrid-interactable="true"
+          tabindex="-1"
+        >
+          hello
+        </button>
+        <button
+          data-datagrid-interactable="true"
+          tabindex="-1"
+        >
+          world
+        </button>
       </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        hidden=""
-      >
-        - 
-        someColumn, column 1, row 1
-      </p>
     </div>
+    <p
+      class="emotion-euiScreenReaderOnly"
+      hidden=""
+    >
+      - 
+      someColumn, column 1, row 1
+    </p>
   </div>
 </div>
 `;
diff --git a/src/components/datagrid/body/data_grid_cell.test.tsx b/src/components/datagrid/body/data_grid_cell.test.tsx
index 6aa83e8677b..0271566e937 100644
--- a/src/components/datagrid/body/data_grid_cell.test.tsx
+++ b/src/components/datagrid/body/data_grid_cell.test.tsx
@@ -718,19 +718,61 @@ describe('EuiDataGridCell', () => {
     });
   });
 
-  it('renders certain classes/styles if rowHeightOptions is passed', () => {
-    const component = mount(
-      <EuiDataGridCell
-        {...requiredProps}
-        rowHeightsOptions={{
-          defaultHeight: 20,
-          rowHeights: { 0: 10 },
-        }}
-      />
-    );
+  describe('renders certain classes/styles based on rowHeightOptions', () => {
+    const props = { ...requiredProps, renderCellValue: () => null };
 
-    expect(
-      component.find('.euiDataGridRowCell__contentByHeight').exists()
-    ).toBe(true);
+    test('default', () => {
+      const component = mount(
+        <EuiDataGridCell {...props} rowHeightsOptions={undefined} />
+      );
+
+      expect(
+        component.find('.euiDataGridRowCell__defaultHeight').exists()
+      ).toBe(true);
+      expect(component.find('.eui-textTruncate').exists()).toBe(true);
+    });
+
+    test('auto', () => {
+      const component = mount(
+        <EuiDataGridCell
+          {...props}
+          rowHeightsOptions={{ defaultHeight: 'auto' }}
+        />
+      );
+
+      expect(component.find('.euiDataGridRowCell__autoHeight').exists()).toBe(
+        true
+      );
+      expect(component.find('.eui-textBreakWord').exists()).toBe(true);
+    });
+
+    test('numerical', () => {
+      const component = mount(
+        <EuiDataGridCell
+          {...props}
+          rowHeightsOptions={{ defaultHeight: { height: 3 } }}
+        />
+      );
+
+      expect(
+        component.find('.euiDataGridRowCell__numericalHeight').exists()
+      ).toBe(true);
+      expect(component.find('.eui-textBreakWord').exists()).toBe(true);
+    });
+
+    test('lineCount', () => {
+      const component = mount(
+        <EuiDataGridCell
+          {...props}
+          rowHeightsOptions={{ defaultHeight: { lineCount: 3 } }}
+        />
+      );
+
+      expect(
+        component.find('.euiDataGridRowCell__lineCountHeight').exists()
+      ).toBe(true);
+      expect(component.find('.eui-textBreakWord').exists()).toBe(true);
+      expect(component.find('.euiTextBlockTruncate').exists()).toBe(true);
+    });
   });
 });
diff --git a/src/components/datagrid/body/data_grid_cell.tsx b/src/components/datagrid/body/data_grid_cell.tsx
index 0cdb33969fa..23ec939abb3 100644
--- a/src/components/datagrid/body/data_grid_cell.tsx
+++ b/src/components/datagrid/body/data_grid_cell.tsx
@@ -17,6 +17,7 @@ import React, {
   KeyboardEvent,
   memo,
   MutableRefObject,
+  ReactNode,
 } from 'react';
 import { createPortal } from 'react-dom';
 import { tabbable } from 'tabbable';
@@ -24,6 +25,7 @@ import { keys } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFocusTrap } from '../../focus_trap';
 import { EuiI18n } from '../../i18n';
+import { EuiTextBlockTruncate } from '../../text_truncate';
 import { hasResizeObserver } from '../../observer/resize_observer/resize_observer';
 import { DataGridFocusContext } from '../utils/focus';
 import { RowHeightVirtualizationUtils } from '../utils/row_heights';
@@ -34,6 +36,7 @@ import {
   EuiDataGridCellValueElementProps,
   EuiDataGridCellValueProps,
   EuiDataGridCellPopoverElementProps,
+  EuiDataGridRowHeightOption,
 } from '../data_grid_types';
 import {
   EuiDataGridCellActions,
@@ -46,69 +49,108 @@ const EuiDataGridCellContent: FunctionComponent<
   EuiDataGridCellValueProps & {
     setCellProps: EuiDataGridCellValueElementProps['setCellProps'];
     setCellContentsRef: EuiDataGridCell['setCellContentsRef'];
+    setPopoverAnchorRef: MutableRefObject<HTMLDivElement | null>;
     isExpanded: boolean;
-    isDefinedHeight: boolean;
+    isControlColumn: boolean;
     isFocused: boolean;
     ariaRowIndex: number;
+    rowHeight?: EuiDataGridRowHeightOption;
+    cellHeightType: string;
+    cellActions?: ReactNode;
   }
 > = memo(
   ({
     renderCellValue,
     column,
     setCellContentsRef,
-    rowHeightsOptions,
+    setPopoverAnchorRef,
     rowIndex,
     colIndex,
     ariaRowIndex,
+    rowHeight,
     rowHeightUtils,
-    isDefinedHeight,
+    isControlColumn,
     isFocused,
+    cellHeightType,
+    cellActions,
     ...rest
   }) => {
     // React is more permissible than the TS types indicate
     const CellElement =
       renderCellValue as JSXElementConstructor<EuiDataGridCellValueElementProps>;
 
-    return (
-      <>
-        <div
-          ref={setCellContentsRef}
-          data-datagrid-cellcontent
-          className={
-            isDefinedHeight
-              ? 'euiDataGridRowCell__definedHeight'
-              : 'euiDataGridRowCell__truncate'
-          }
-          style={
-            isDefinedHeight
-              ? rowHeightUtils?.getStylesForCell(rowHeightsOptions!, rowIndex)
-              : {}
-          }
-        >
-          <CellElement
-            isDetails={false}
-            data-test-subj="cell-content"
-            rowIndex={rowIndex}
-            colIndex={colIndex}
-            schema={column?.schema || rest.columnType}
-            {...rest}
+    const wrapperClasses = classNames(
+      'euiDataGridRowCell__contentWrapper',
+      `euiDataGridRowCell__${cellHeightType}Height`
+    );
+
+    const classes = classNames(
+      'euiDataGridRowCell__content',
+      !isControlColumn && {
+        'eui-textBreakWord': cellHeightType !== 'default',
+        'eui-textTruncate': cellHeightType === 'default',
+      }
+    );
+
+    let cellContent = (
+      <div
+        ref={(el) => {
+          setCellContentsRef(el);
+          setPopoverAnchorRef.current =
+            cellHeightType === 'default'
+              ? // Default height cells need the popover to be anchored on the wrapper,
+                // in order for the popover to centered on the full cell width (as content
+                // width is affected by the width of cell actions)
+                (el?.parentElement as HTMLDivElement)
+              : // Numerical height cells need the popover anchor to be below the wrapper
+                // class, in order to set height: 100% on the portalled popover div wrappers
+                el;
+        }}
+        data-datagrid-cellcontent
+        className={classes}
+      >
+        <CellElement
+          isDetails={false}
+          data-test-subj="cell-content"
+          rowIndex={rowIndex}
+          colIndex={colIndex}
+          schema={column?.schema || rest.columnType}
+          {...rest}
+        />
+      </div>
+    );
+    if (cellHeightType === 'lineCount' && !isControlColumn) {
+      const lines = rowHeightUtils!.getLineCount(rowHeight)!;
+      cellContent = (
+        <EuiTextBlockTruncate lines={lines} cloneElement>
+          {cellContent}
+        </EuiTextBlockTruncate>
+      );
+    }
+
+    const screenReaderText = (
+      <EuiScreenReaderOnly>
+        <p hidden={!isFocused}>
+          {'- '}
+          <EuiI18n
+            token="euiDataGridCell.position"
+            default="{columnId}, column {col}, row {row}"
+            values={{
+              columnId: column?.displayAsText || rest.columnId,
+              col: colIndex + 1,
+              row: ariaRowIndex,
+            }}
           />
-        </div>
-        <EuiScreenReaderOnly>
-          <p hidden={!isFocused}>
-            {'- '}
-            <EuiI18n
-              token="euiDataGridCell.position"
-              default="{columnId}, column {col}, row {row}"
-              values={{
-                columnId: column?.displayAsText || rest.columnId,
-                col: colIndex + 1,
-                row: ariaRowIndex,
-              }}
-            />
-          </p>
-        </EuiScreenReaderOnly>
-      </>
+        </p>
+      </EuiScreenReaderOnly>
+    );
+
+    return (
+      <div className={wrapperClasses}>
+        {cellContent}
+        {screenReaderText}
+        {cellActions}
+      </div>
     );
   }
 );
@@ -651,33 +693,52 @@ export class EuiDataGridCell extends Component<
       }
     };
 
-    const isDefinedHeight = !!rowHeightUtils?.getRowHeightOption(
+    const rowHeight = rowHeightUtils?.getRowHeightOption(
       rowIndex,
       rowHeightsOptions
     );
+    const cellHeightType =
+      rowHeightUtils?.getHeightType(rowHeight) || 'default';
 
     const cellContentProps = {
       ...rest,
       setCellProps: this.setCellProps,
       column,
       columnType,
+      cellHeightType,
       isExpandable,
       isExpanded: popoverIsOpen,
       isDetails: false,
       isFocused: this.state.isFocused,
       setCellContentsRef: this.setCellContentsRef,
-      rowHeightsOptions,
+      setPopoverAnchorRef: this.popoverAnchorRef,
+      rowHeight,
       rowHeightUtils,
-      isDefinedHeight,
+      isControlColumn: cellClasses.includes(
+        'euiDataGridRowCell--controlColumn'
+      ),
       ariaRowIndex,
     };
 
-    const anchorClass = 'euiDataGridRowCell__expandFlex';
-    const expandClass = isDefinedHeight
-      ? 'euiDataGridRowCell__contentByHeight'
-      : 'euiDataGridRowCell__expandContent';
+    const cellActions = showCellActions && (
+      <EuiDataGridCellActions
+        rowIndex={rowIndex}
+        colIndex={colIndex}
+        column={column}
+        cellHeightType={cellHeightType}
+        onExpandClick={() => {
+          if (popoverIsOpen) {
+            closeCellPopover();
+          } else {
+            openCellPopover({ rowIndex: visibleRowIndex, colIndex });
+          }
+        }}
+      />
+    );
 
-    let innerContent = (
+    const cellContent = isExpandable ? (
+      <EuiDataGridCellContent {...cellContentProps} cellActions={cellActions} />
+    ) : (
       <EuiFocusTrap
         disabled={!this.state.isEntered}
         autoFocus={true}
@@ -686,39 +747,11 @@ export class EuiDataGridCell extends Component<
         }}
         clickOutsideDisables={true}
       >
-        <div className={anchorClass} ref={this.popoverAnchorRef}>
-          <div className={expandClass}>
-            <EuiDataGridCellContent {...cellContentProps} />
-          </div>
-        </div>
+        <EuiDataGridCellContent {...cellContentProps} />
       </EuiFocusTrap>
     );
 
-    if (isExpandable) {
-      innerContent = (
-        <div className={anchorClass} ref={this.popoverAnchorRef}>
-          <div className={expandClass}>
-            <EuiDataGridCellContent {...cellContentProps} />
-          </div>
-          {showCellActions && (
-            <EuiDataGridCellActions
-              rowIndex={rowIndex}
-              colIndex={colIndex}
-              column={column}
-              onExpandClick={() => {
-                if (popoverIsOpen) {
-                  closeCellPopover();
-                } else {
-                  openCellPopover({ rowIndex: visibleRowIndex, colIndex });
-                }
-              }}
-            />
-          )}
-        </div>
-      );
-    }
-
-    const content = (
+    const cell = (
       <div
         role="gridcell"
         aria-rowindex={ariaRowIndex}
@@ -743,13 +776,13 @@ export class EuiDataGridCell extends Component<
         }}
         onBlur={this.onBlur}
       >
-        {innerContent}
+        {cellContent}
       </div>
     );
 
     return rowManager && !IS_JEST_ENVIRONMENT
       ? createPortal(
-          content,
+          cell,
           rowManager.getRow({
             rowIndex,
             visibleRowIndex,
@@ -757,6 +790,6 @@ export class EuiDataGridCell extends Component<
             height: style!.height as number, // comes in as an integer from react-window
           })
         )
-      : content;
+      : cell;
   }
 }
diff --git a/src/components/datagrid/body/data_grid_cell_actions.test.tsx b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
index e14f235f60c..151f3003814 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.test.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.test.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import { shallow } from 'enzyme';
+import { render } from '../../../test/rtl';
 
 import { EuiDataGridColumnCellAction } from '../data_grid_types';
 import {
@@ -24,6 +25,7 @@ describe('EuiDataGridCellActions', () => {
     onExpandClick: jest.fn(),
     rowIndex: 0,
     colIndex: 0,
+    cellHeightType: 'default',
   };
 
   it('renders an expand button', () => {
@@ -31,7 +33,7 @@ describe('EuiDataGridCellActions', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <div
-        className="euiDataGridRowCell__expandActions"
+        className="euiDataGridRowCell__actions"
       >
         <EuiI18n
           default="Click or hit enter to interact with cell content"
@@ -88,7 +90,7 @@ describe('EuiDataGridCellActions', () => {
 
     expect(component).toMatchInlineSnapshot(`
       <div
-        className="euiDataGridRowCell__expandActions"
+        className="euiDataGridRowCell__actions"
       >
         <MockAction
           Component={[Function]}
@@ -109,6 +111,17 @@ describe('EuiDataGridCellActions', () => {
     `);
   });
 
+  it('renders with overlay positioning for non default height cells', () => {
+    const { container } = render(
+      <EuiDataGridCellActions {...requiredProps} cellHeightType="auto" />
+    );
+
+    // TODO: Switch to `.toHaveStyle({ position: 'absolute' })` once on Emotion
+    expect(container.firstChild).toHaveClass(
+      'euiDataGridRowCell__actions--overlay'
+    );
+  });
+
   describe('visible cell actions limit', () => {
     it('by default, does not render more than the first two primary cell actions', () => {
       const component = shallow(
diff --git a/src/components/datagrid/body/data_grid_cell_actions.tsx b/src/components/datagrid/body/data_grid_cell_actions.tsx
index 21bac608c36..bc3ed204dfe 100644
--- a/src/components/datagrid/body/data_grid_cell_actions.tsx
+++ b/src/components/datagrid/body/data_grid_cell_actions.tsx
@@ -18,17 +18,20 @@ import { EuiButtonIcon, EuiButtonIconProps } from '../../button/button_icon';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../../button/button_empty';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiPopoverFooter } from '../../popover';
+import classNames from 'classnames';
 
 export const EuiDataGridCellActions = ({
   onExpandClick,
   column,
   rowIndex,
   colIndex,
+  cellHeightType,
 }: {
   onExpandClick: () => void;
   column?: EuiDataGridColumn;
   rowIndex: number;
   colIndex: number;
+  cellHeightType: string;
 }) => {
   // Note: The cell expand button/expansion popover is *always* rendered if
   // column.cellActions is present (regardless of column.isExpandable).
@@ -91,11 +94,11 @@ export const EuiDataGridCellActions = ({
     );
   }, [column, colIndex, rowIndex]);
 
-  return (
-    <div className="euiDataGridRowCell__expandActions">
-      {[...additionalButtons, expandButton]}
-    </div>
-  );
+  const classes = classNames('euiDataGridRowCell__actions', {
+    'euiDataGridRowCell__actions--overlay': cellHeightType !== 'default',
+  });
+
+  return <div className={classes}>{[...additionalButtons, expandButton]}</div>;
 };
 
 export const EuiDataGridCellPopoverActions = ({
diff --git a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx
index deca8599bc1..0c4dd05fb04 100644
--- a/src/components/datagrid/body/data_grid_cell_popover.spec.tsx
+++ b/src/components/datagrid/body/data_grid_cell_popover.spec.tsx
@@ -130,4 +130,82 @@ describe('EuiDataGridCellPopover', () => {
 
     cy.get('.euiDataGridRowCell__popover.hello.world').should('exist');
   });
+
+  describe('popover anchor/positioning', () => {
+    const props = {
+      ...baseProps,
+      rowCount: 1,
+      renderCellValue: ({ columnId }) => {
+        if (columnId === 'A') {
+          return 'short text';
+        } else {
+          return 'Very long text that should get cut off because it is so long';
+        }
+      },
+    };
+
+    const openCellPopover = (id: string) => {
+      cy.get(
+        `[data-gridcell-row-index="0"][data-gridcell-column-id="${id}"]`
+      ).realClick();
+      cy.realPress('Enter');
+    };
+
+    it('default row height', () => {
+      cy.realMount(<EuiDataGrid {...props} />);
+
+      openCellPopover('B');
+      cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
+        .should('have.css', 'left', '24.5px')
+        .should('have.css', 'top')
+        .and('match', /^(104|103)px/); // CI is off by 1 px
+    });
+
+    it('lineCount row height', () => {
+      cy.realMount(
+        <EuiDataGrid
+          {...props}
+          rowHeightsOptions={{ defaultHeight: { lineCount: 2 } }}
+        />
+      );
+      openCellPopover('B');
+
+      cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
+        .should('have.css', 'left', '24.5px')
+        .should('have.css', 'top')
+        .and('match', /^(127|126)px/); // CI is off by 1 px
+    });
+
+    it('numerical row height', () => {
+      cy.realMount(
+        <EuiDataGrid {...props} rowHeightsOptions={{ defaultHeight: 40 }} />
+      );
+      openCellPopover('B');
+
+      // Should not be anchored to the bottom of the overflowing text
+      cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
+        .should('have.css', 'left', '24.5px')
+        .should('have.css', 'top')
+        .and('match', /^(106|105)px/); // CI is off by 1 px
+    });
+
+    it('auto row height', () => {
+      cy.realMount(
+        <EuiDataGrid {...props} rowHeightsOptions={{ defaultHeight: 'auto' }} />
+      );
+
+      openCellPopover('B');
+      cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
+        .should('have.css', 'left', '24.5px')
+        .should('have.css', 'top')
+        .and('match', /^(151|150)px/); // CI is off by 1 px
+
+      // The shorter cell content should not have the same top position
+      openCellPopover('A');
+      cy.get('[data-test-subj="euiDataGridExpansionPopover"]')
+        .should('have.css', 'left', '19px')
+        .should('have.css', 'top')
+        .and('match', /^(103|102)px/); // CI is off by 1 px
+    });
+  });
 });
diff --git a/src/components/datagrid/body/data_grid_row_manager.test.ts b/src/components/datagrid/body/data_grid_row_manager.test.ts
index 83ee562adba..8525afba21c 100644
--- a/src/components/datagrid/body/data_grid_row_manager.test.ts
+++ b/src/components/datagrid/body/data_grid_row_manager.test.ts
@@ -6,18 +6,17 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../../test/internal';
+import { renderHook } from '@testing-library/react/pure'; // Pure is important here to preserve state between tests
 
-import { EuiDataGridRowManager } from '../data_grid_types';
 import { useRowManager } from './data_grid_row_manager';
 
 describe('row manager', () => {
   const mockGridRef = { current: document.createElement('div') } as any;
 
   describe('getRow', () => {
-    const { return: rowManager } = testCustomHook<EuiDataGridRowManager>(() =>
+    const rowManager = renderHook(() =>
       useRowManager({ innerGridRef: mockGridRef })
-    );
+    ).result.current;
 
     describe('when the row DOM element does not already exist', () => {
       beforeAll(() => {
@@ -109,37 +108,34 @@ describe('row manager', () => {
   });
 
   describe('rowClasses', () => {
-    const rowClasses = {
-      0: 'hello',
-    };
-    let row0: HTMLDivElement;
-    let row1: HTMLDivElement;
+    const mockArgs = { innerGridRef: mockGridRef };
     const mockRowArgs = { visibleRowIndex: 99, top: '15px', height: 30 };
 
-    const { return: rowManager, updateHookArgs } =
-      testCustomHook<EuiDataGridRowManager>(useRowManager, {
-        innerGridRef: mockGridRef,
-        rowClasses,
-      });
+    const initialRowClasses = { 0: 'hello' };
 
-    beforeAll(() => {
-      row0 = rowManager.getRow({ ...mockRowArgs, rowIndex: 0 });
-      row1 = rowManager.getRow({ ...mockRowArgs, rowIndex: 1 });
+    const { result, rerender } = renderHook(useRowManager, {
+      initialProps: { ...mockArgs, rowClasses: initialRowClasses },
     });
 
+    const getRow = (rowIndex: number) =>
+      result.current.getRow({ ...mockRowArgs, rowIndex });
+
     it('creates rows with the passed gridStyle.rowClasses', () => {
-      expect(row0.classList.contains('hello')).toBe(true);
+      expect(getRow(0).classList.contains('hello')).toBe(true);
     });
 
     it('updates row classes dynamically when gridStyle.rowClasses updates', () => {
-      updateHookArgs({ rowClasses: { 0: 'world' } });
+      rerender({ ...mockArgs, rowClasses: { 0: 'world' } });
+      const row0 = getRow(0);
 
       expect(row0.classList.contains('hello')).toBe(false);
       expect(row0.classList.contains('world')).toBe(true);
     });
 
     it('adds/removes row classes correctly when gridStyle.rowClasses updates', () => {
-      updateHookArgs({ rowClasses: { 1: 'test' } });
+      rerender({ ...mockArgs, rowClasses: { 1: 'test' } });
+      const row0 = getRow(0);
+      const row1 = getRow(1);
 
       expect(row0.classList.contains('hello')).toBe(false);
       expect(row0.classList.contains('world')).toBe(false);
diff --git a/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap b/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
index 184f011237e..bf87d4c82e4 100644
--- a/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
+++ b/src/components/datagrid/body/header/__snapshots__/data_grid_header_cell.test.tsx.snap
@@ -1,117 +1,58 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`EuiDataGridHeaderCell renders 1`] = `
-<EuiDataGridHeaderCellWrapper
-  className="euiDataGridHeaderCell--numeric"
-  headerIsInteractive={false}
-  id="someColumn"
-  index={0}
-  width={50}
+<div
+  class="euiDataGridHeaderCell euiDataGridHeaderCell--numeric"
+  data-gridcell-column-id="someColumn"
+  data-gridcell-column-index="0"
+  data-gridcell-row-index="-1"
+  data-gridcell-visible-row-index="-1"
+  data-test-subj="dataGridHeaderCell-someColumn"
+  role="columnheader"
+  style="width: 50px;"
+  tabindex="-1"
 >
-  <EuiDataGridColumnResizer
-    columnId="someColumn"
-    columnWidth={50}
-    setColumnWidth={[MockFunction]}
+  <div
+    class="euiDataGridColumnResizer"
+    data-test-subj="dataGridColumnResizer"
+    style="margin-right: 0px;"
   />
-  <EuiPopover
-    anchorClassName="eui-fullWidth"
-    anchorPosition="downCenter"
-    button={
+  <div
+    class="euiPopover eui-fullWidth emotion-euiPopover"
+  >
+    <div
+      class="euiPopover__anchor eui-fullWidth css-16vtueo-render"
+    >
       <button
         aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
-        className="euiDataGridHeaderCell__button"
-        onClick={[Function]}
+        class="euiDataGridHeaderCell__button"
+        data-euigrid-tab-managed="true"
+        tabindex="-1"
       >
         <div
-          className="euiDataGridHeaderCell__content"
+          class="euiDataGridHeaderCell__content"
           title="someColumn"
         >
           someColumn
         </div>
-        <EuiIcon
-          className="euiDataGridHeaderCell__icon"
+        <span
+          class="euiDataGridHeaderCell__icon"
           color="text"
+          data-euiicon-type="arrowDown"
           data-test-subj="dataGridHeaderCellActionButton-someColumn"
-          size="s"
-          type="arrowDown"
         />
       </button>
-    }
-    className="eui-fullWidth"
-    closePopover={[Function]}
-    display="inline-block"
-    hasArrow={true}
-    isOpen={false}
-    offset={7}
-    ownFocus={true}
-    panelPaddingSize="none"
-    panelProps={
-      Object {
-        "onKeyDown": [Function],
-      }
-    }
-    panelRef={[Function]}
-    popoverScreenReaderText={
-      <EuiI18n
-        default="To navigate through the list of column actions, press the Tab or Up and Down arrow keys."
-        token="euiDataGridHeaderCell.actionsPopoverScreenReaderText"
-      />
-    }
-    repositionToCrossAxis={true}
-  >
-    <EuiListGroup
-      data-test-subj="dataGridHeaderCellActionGroup-someColumn"
-      gutterSize="none"
-      listItems={
-        Array [
-          Object {
-            "color": "text",
-            "iconType": "eyeClosed",
-            "label": <EuiI18n
-              default="Hide column"
-              token="euiColumnActions.hideColumn"
-            />,
-            "onClick": [Function],
-            "size": "xs",
-          },
-          Object {
-            "color": "text",
-            "iconType": "sortLeft",
-            "isDisabled": false,
-            "label": <EuiI18n
-              default="Move left"
-              token="euiColumnActions.moveLeft"
-            />,
-            "onClick": [Function],
-            "size": "xs",
-          },
-          Object {
-            "color": "text",
-            "iconType": "sortRight",
-            "isDisabled": true,
-            "label": <EuiI18n
-              default="Move right"
-              token="euiColumnActions.moveRight"
-            />,
-            "onClick": [Function],
-            "size": "xs",
-          },
-        ]
-      }
-    />
-  </EuiPopover>
+    </div>
+  </div>
   <p
-    hidden={true}
+    hidden=""
     id="euiDataGridCellHeader_generated-id_sorting"
   />
   <p
-    hidden={true}
+    hidden=""
     id="euiDataGridCellHeader_generated-id_actions"
   >
-    <EuiI18n
-      default="Click to view column header actions"
-      token="euiDataGridHeaderCell.headerActions"
-    />
+    Click to view column header actions
   </p>
-</EuiDataGridHeaderCellWrapper>
+</div>
 `;
diff --git a/src/components/datagrid/body/header/data_grid_header_cell.test.tsx b/src/components/datagrid/body/header/data_grid_header_cell.test.tsx
index e04002b1257..109489fedc3 100644
--- a/src/components/datagrid/body/header/data_grid_header_cell.test.tsx
+++ b/src/components/datagrid/body/header/data_grid_header_cell.test.tsx
@@ -6,10 +6,14 @@
  * Side Public License, v 1.
  */
 
-import React from 'react';
-import { mount, shallow } from 'enzyme';
-import { testCustomHook } from '../../../../test/internal';
-import { render } from '../../../../test/rtl';
+import React, { ReactNode } from 'react';
+import { fireEvent } from '@testing-library/react';
+import {
+  render,
+  renderHook,
+  waitForEuiPopoverOpen,
+  waitForEuiPopoverClose,
+} from '../../../../test/rtl';
 
 import { DataGridFocusContext } from '../../utils/focus';
 import { mockFocusContext } from '../../utils/__mocks__/focus_context';
@@ -38,11 +42,12 @@ describe('EuiDataGridHeaderCell', () => {
   };
 
   it('renders', () => {
-    const component = shallow(<EuiDataGridHeaderCell {...requiredProps} />);
-    expect(component).toMatchSnapshot();
+    const { container } = render(<EuiDataGridHeaderCell {...requiredProps} />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('sorting', () => {
+    const onSort = () => {};
     const columnId = 'test';
     const mockSortingArgs = {
       sorting: undefined,
@@ -50,64 +55,77 @@ describe('EuiDataGridHeaderCell', () => {
       showColumnActions: true,
     };
 
-    const getRenderedText = (text: React.ReactElement) =>
-      render(<p>{text}</p>).container.textContent;
+    const getRender = (node: ReactNode) => render(<>{node}</>).container;
 
     describe('if the current column is being sorted', () => {
       it('renders an ascending sort arrow', () => {
-        const {
-          return: { sortingArrow },
-        } = testCustomHook(useSortingUtils, {
-          ...mockSortingArgs,
-          sorting: { columns: [{ id: columnId, direction: 'asc' }] },
-        });
+        const { sortingArrow } = renderHook(() =>
+          useSortingUtils({
+            ...mockSortingArgs,
+            sorting: {
+              onSort,
+              columns: [{ id: columnId, direction: 'asc' }],
+            },
+          })
+        ).result.current;
 
-        expect(shallow(sortingArrow).prop('data-euiicon-type')).toEqual(
-          'sortUp'
-        );
+        expect(
+          getRender(sortingArrow).querySelector('[data-euiicon-type="sortUp"]')
+        ).toBeInTheDocument();
       });
 
       it('renders a descending sort arrow', () => {
-        const {
-          return: { sortingArrow },
-        } = testCustomHook(useSortingUtils, {
-          ...mockSortingArgs,
-          sorting: { columns: [{ id: columnId, direction: 'desc' }] },
-        });
+        const { sortingArrow } = renderHook(() =>
+          useSortingUtils({
+            ...mockSortingArgs,
+            sorting: {
+              onSort,
+              columns: [{ id: columnId, direction: 'desc' }],
+            },
+          })
+        ).result.current;
 
-        expect(shallow(sortingArrow).prop('data-euiicon-type')).toEqual(
-          'sortDown'
-        );
+        expect(
+          getRender(sortingArrow).querySelector(
+            '[data-euiicon-type="sortDown"]'
+          )
+        ).toBeInTheDocument();
       });
 
       describe('when only the current column is being sorted', () => {
         describe('when the header cell has no actions', () => {
           it('renders aria-sort but not sortingScreenReaderText', () => {
-            const {
-              return: { ariaSort, sortingScreenReaderText },
-            } = testCustomHook(useSortingUtils, {
-              ...mockSortingArgs,
-              sorting: { columns: [{ id: columnId, direction: 'asc' }] },
-              showColumnActions: false,
-            });
+            const { ariaSort, sortingScreenReaderText } = renderHook(() =>
+              useSortingUtils({
+                ...mockSortingArgs,
+                sorting: {
+                  onSort,
+                  columns: [{ id: columnId, direction: 'asc' }],
+                },
+                showColumnActions: false,
+              })
+            ).result.current;
 
             expect(ariaSort).toEqual('ascending');
-            expect(getRenderedText(sortingScreenReaderText)).toEqual('');
+            expect(getRender(sortingScreenReaderText)).toHaveTextContent('');
           });
         });
 
         describe('when the header cell has actions', () => {
           it('renders aria-sort and sortingScreenReaderText', () => {
-            const {
-              return: { ariaSort, sortingScreenReaderText },
-            } = testCustomHook(useSortingUtils, {
-              ...mockSortingArgs,
-              sorting: { columns: [{ id: columnId, direction: 'desc' }] },
-              showColumnActions: true,
-            });
+            const { ariaSort, sortingScreenReaderText } = renderHook(() =>
+              useSortingUtils({
+                ...mockSortingArgs,
+                sorting: {
+                  onSort,
+                  columns: [{ id: columnId, direction: 'desc' }],
+                },
+                showColumnActions: true,
+              })
+            ).result.current;
 
             expect(ariaSort).toEqual('descending');
-            expect(getRenderedText(sortingScreenReaderText)).toEqual(
+            expect(getRender(sortingScreenReaderText)).toHaveTextContent(
               'Sorted descending.'
             );
           });
@@ -117,50 +135,55 @@ describe('EuiDataGridHeaderCell', () => {
 
     describe('if the current column is not being sorted', () => {
       it('does not render an arrow even if other columns are sorted', () => {
-        const {
-          return: { sortingArrow },
-        } = testCustomHook(useSortingUtils, {
-          ...mockSortingArgs,
-          sorting: { columns: [{ id: 'other', direction: 'desc' }] },
-        });
+        const { sortingArrow } = renderHook(() =>
+          useSortingUtils({
+            ...mockSortingArgs,
+            sorting: { onSort, columns: [{ id: 'other', direction: 'desc' }] },
+          })
+        ).result.current;
 
         expect(sortingArrow).toBeNull();
       });
 
       it('does not render aria-sort or screen reader sorting text', () => {
-        const {
-          return: { ariaSort, sortingScreenReaderText },
-        } = testCustomHook(useSortingUtils, mockSortingArgs);
+        const { ariaSort, sortingScreenReaderText } = renderHook(() =>
+          useSortingUtils(mockSortingArgs)
+        ).result.current;
 
         expect(ariaSort).toEqual(undefined);
-        expect(getRenderedText(sortingScreenReaderText)).toEqual('');
+        expect(getRender(sortingScreenReaderText)).toHaveTextContent('');
       });
     });
 
     describe('when multiple columns are being sorted', () => {
       it('does not render aria-sort, but renders sorting screen reader text text with a full list of sorted columns', () => {
-        const {
-          return: { ariaSort, sortingScreenReaderText },
-          getUpdatedState,
-          updateHookArgs,
-        } = testCustomHook(useSortingUtils, {
-          id: 'A',
-          sorting: {
-            columns: [
-              { id: 'A', direction: 'asc' },
-              { id: 'B', direction: 'desc' },
-            ],
+        const { result, rerender } = renderHook(useSortingUtils, {
+          initialProps: {
+            ...mockSortingArgs,
+            id: 'A',
+            sorting: {
+              onSort,
+              columns: [
+                { id: 'A', direction: 'asc' },
+                { id: 'B', direction: 'desc' },
+              ],
+            },
           },
         });
 
-        expect(ariaSort).toEqual(undefined);
-        expect(getRenderedText(sortingScreenReaderText)).toMatchInlineSnapshot(
-          '"Sorted by A, ascending, then sorted by B, descending."'
+        expect(result.current.ariaSort).toEqual(undefined);
+        expect(
+          getRender(result.current.sortingScreenReaderText)
+        ).toHaveTextContent(
+          'Sorted by A, ascending, then sorted by B, descending.'
         );
 
         // Branch coverage
-        updateHookArgs({
+        rerender({
+          ...mockSortingArgs,
+          id: 'B',
           sorting: {
+            onSort,
             columns: [
               { id: 'B', direction: 'desc' },
               { id: 'C', direction: 'asc' },
@@ -169,9 +192,9 @@ describe('EuiDataGridHeaderCell', () => {
           },
         });
         expect(
-          getRenderedText(getUpdatedState().sortingScreenReaderText)
-        ).toMatchInlineSnapshot(
-          '"Sorted by B, descending, then sorted by C, ascending, then sorted by A, ascending."'
+          getRender(result.current.sortingScreenReaderText)
+        ).toHaveTextContent(
+          'Sorted by B, descending, then sorted by C, ascending, then sorted by A, ascending.'
         );
       });
     });
@@ -179,69 +202,70 @@ describe('EuiDataGridHeaderCell', () => {
 
   describe('resizing', () => {
     it('renders a resizer', () => {
-      const component = shallow(<EuiDataGridHeaderCell {...requiredProps} />);
-      expect(component.find('EuiDataGridColumnResizer')).toHaveLength(1);
+      const { getByTestSubject } = render(
+        <EuiDataGridHeaderCell {...requiredProps} />
+      );
+      expect(getByTestSubject('dataGridColumnResizer')).toBeInTheDocument();
     });
 
     it('does not render a resizer if isResizable is false', () => {
-      const component = shallow(
+      const { queryByTestSubject } = render(
         <EuiDataGridHeaderCell
           {...requiredProps}
           column={{ id: 'test', isResizable: false }}
         />
       );
-      expect(component.find('EuiDataGridColumnResizer')).toHaveLength(0);
+      expect(
+        queryByTestSubject('dataGridColumnResizer')
+      ).not.toBeInTheDocument();
     });
 
     it('does not render a resizer if a column width cannot be found', () => {
-      const component = shallow(
+      const { queryByTestSubject } = render(
         <EuiDataGridHeaderCell
           {...requiredProps}
           columnWidths={{}}
           defaultColumnWidth={undefined}
         />
       );
-      expect(component.find('EuiDataGridColumnResizer')).toHaveLength(0);
+      expect(
+        queryByTestSubject('dataGridColumnResizer')
+      ).not.toBeInTheDocument();
     });
   });
 
   describe('popover', () => {
     it('does not render a popover if there are no column actions', () => {
-      const component = shallow(
+      const { container } = render(
         <EuiDataGridHeaderCell
           {...requiredProps}
           column={{ id: 'test', actions: false }}
         />
       );
-      expect(component.find('EuiPopover')).toHaveLength(0);
+      expect(container.querySelector('.euiPopover')).not.toBeInTheDocument();
     });
 
-    it('handles popover open', () => {
-      const component = mount(
+    it('handles popover open and close', () => {
+      const { container } = render(
         <DataGridFocusContext.Provider value={mockFocusContext}>
           <EuiDataGridHeaderCell {...requiredProps} />
         </DataGridFocusContext.Provider>
       );
-      component.find('.euiDataGridHeaderCell__button').simulate('click');
+      const toggle = container.querySelector('.euiDataGridHeaderCell__button')!;
 
-      expect(component.find('EuiPopover').prop('isOpen')).toEqual(true);
+      fireEvent.click(toggle);
+      waitForEuiPopoverOpen();
       expect(mockFocusContext.setFocusedCell).toHaveBeenCalledWith([0, -1]);
-    });
-
-    it('handles popover close', () => {
-      const component = shallow(<EuiDataGridHeaderCell {...requiredProps} />);
-      (component.find('EuiPopover').prop('closePopover') as Function)();
 
-      expect(component.find('EuiPopover').prop('isOpen')).toEqual(false);
+      fireEvent.click(toggle);
+      waitForEuiPopoverClose();
     });
 
     describe('keyboard arrow navigation', () => {
       const {
-        return: {
-          panelRef,
-          panelProps: { onKeyDown },
-        },
-      } = testCustomHook(usePopoverArrowNavigation);
+        panelRef,
+        panelProps: { onKeyDown },
+      } = renderHook(usePopoverArrowNavigation).result.current;
 
       const mockPanel = document.createElement('div');
       mockPanel.setAttribute('tabindex', '-1');
@@ -253,18 +277,19 @@ describe('EuiDataGridHeaderCell', () => {
       panelRef(mockPanel);
 
       const preventDefault = jest.fn();
+      const keyDownEvent = { preventDefault } as unknown as React.KeyboardEvent;
       beforeEach(() => jest.clearAllMocks());
 
       describe('early returns', () => {
         it('does nothing if the up/down arrow keys are not pressed', () => {
-          onKeyDown({ key: 'Tab', preventDefault });
+          onKeyDown({ ...keyDownEvent, key: 'Tab' });
           expect(preventDefault).not.toHaveBeenCalled();
         });
 
         it('does nothing if the popover contains no tabbable elements', () => {
           const emptyDiv = document.createElement('div');
           panelRef(emptyDiv);
-          onKeyDown({ key: 'ArrowDown', preventDefault });
+          onKeyDown({ ...keyDownEvent, key: 'ArrowDown' });
           expect(preventDefault).not.toHaveBeenCalled();
 
           panelRef(mockPanel); // Reset for other tests
@@ -275,7 +300,7 @@ describe('EuiDataGridHeaderCell', () => {
         beforeEach(() => mockPanel.focus());
 
         it('focuses the first action when the arrow down key is pressed', () => {
-          onKeyDown({ key: 'ArrowDown', preventDefault });
+          onKeyDown({ ...keyDownEvent, key: 'ArrowDown' });
           expect(preventDefault).toHaveBeenCalled();
           expect(
             document.activeElement?.getAttribute('data-test-subj')
@@ -283,7 +308,7 @@ describe('EuiDataGridHeaderCell', () => {
         });
 
         it('focuses the last action when the arrow up key is pressed', () => {
-          onKeyDown({ key: 'ArrowUp', preventDefault });
+          onKeyDown({ ...keyDownEvent, key: 'ArrowUp' });
           expect(preventDefault).toHaveBeenCalled();
           expect(
             document.activeElement?.getAttribute('data-test-subj')
@@ -298,19 +323,19 @@ describe('EuiDataGridHeaderCell', () => {
           );
 
           it('moves focus to the the next action', () => {
-            onKeyDown({ key: 'ArrowDown', preventDefault });
+            onKeyDown({ ...keyDownEvent, key: 'ArrowDown' });
             expect(
               document.activeElement?.getAttribute('data-test-subj')
             ).toEqual('second');
 
-            onKeyDown({ key: 'ArrowDown', preventDefault });
+            onKeyDown({ ...keyDownEvent, key: 'ArrowDown' });
             expect(
               document.activeElement?.getAttribute('data-test-subj')
             ).toEqual('last');
           });
 
           it('loops focus back to the first action when pressing down on the last action', () => {
-            onKeyDown({ key: 'ArrowDown', preventDefault });
+            onKeyDown({ ...keyDownEvent, key: 'ArrowDown' });
             expect(
               document.activeElement?.getAttribute('data-test-subj')
             ).toEqual('first');
@@ -323,19 +348,19 @@ describe('EuiDataGridHeaderCell', () => {
           );
 
           it('moves focus to the previous action', () => {
-            onKeyDown({ key: 'ArrowUp', preventDefault });
+            onKeyDown({ ...keyDownEvent, key: 'ArrowUp' });
             expect(
               document.activeElement?.getAttribute('data-test-subj')
             ).toEqual('second');
 
-            onKeyDown({ key: 'ArrowUp', preventDefault });
+            onKeyDown({ ...keyDownEvent, key: 'ArrowUp' });
             expect(
               document.activeElement?.getAttribute('data-test-subj')
             ).toEqual('first');
           });
 
           it('loops focus back to the last action when pressing up on the first action', () => {
-            onKeyDown({ key: 'ArrowUp', preventDefault });
+            onKeyDown({ ...keyDownEvent, key: 'ArrowUp' });
             expect(
               document.activeElement?.getAttribute('data-test-subj')
             ).toEqual('last');
diff --git a/src/components/datagrid/body/header/header_is_interactive.test.ts b/src/components/datagrid/body/header/header_is_interactive.test.ts
index 835c3688f5d..f79aafb060a 100644
--- a/src/components/datagrid/body/header/header_is_interactive.test.ts
+++ b/src/components/datagrid/body/header/header_is_interactive.test.ts
@@ -6,8 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { act } from '@testing-library/react';
-import { testCustomHook } from '../../../../test/internal';
+import { renderHook, act } from '@testing-library/react';
 import { useHeaderIsInteractive } from './header_is_interactive';
 
 describe('useHeaderIsInteractive', () => {
@@ -22,9 +21,9 @@ describe('useHeaderIsInteractive', () => {
   describe('initial headerIsInteractive state', () => {
     it('returns false when there are no interactive children within the header', () => {
       const [mockGridEl] = createMockGrid();
-      const {
-        return: { headerIsInteractive },
-      } = testCustomHook(() => useHeaderIsInteractive(mockGridEl));
+      const { headerIsInteractive } = renderHook(() =>
+        useHeaderIsInteractive(mockGridEl)
+      ).result.current;
 
       expect(headerIsInteractive).toEqual(false);
     });
@@ -33,9 +32,9 @@ describe('useHeaderIsInteractive', () => {
       const [mockGridEl, mockHeaderEl] = createMockGrid();
       mockHeaderEl.appendChild(document.createElement('button')); // Interactive child
 
-      const {
-        return: { headerIsInteractive },
-      } = testCustomHook(() => useHeaderIsInteractive(mockGridEl));
+      const { headerIsInteractive } = renderHook(() =>
+        useHeaderIsInteractive(mockGridEl)
+      ).result.current;
 
       expect(headerIsInteractive).toEqual(true);
     });
@@ -49,15 +48,13 @@ describe('useHeaderIsInteractive', () => {
       mockTarget.setAttribute('data-euigrid-tab-managed', 'true');
       mockHeaderEl.appendChild(mockCell);
 
-      const {
-        return: { headerIsInteractive, handleHeaderMutation },
-        getUpdatedState,
-      } = testCustomHook(() => useHeaderIsInteractive(null));
-      expect(headerIsInteractive).toEqual(false);
+      const { result } = renderHook(() => useHeaderIsInteractive(null));
+      expect(result.current.headerIsInteractive).toEqual(false);
 
-      act(() => handleHeaderMutation([{ target: mockTarget }]));
+      // @ts-ignore matching production types/data isn't necessary for this test
+      act(() => result.current.handleHeaderMutation([{ target: mockTarget }]));
 
-      expect(getUpdatedState().headerIsInteractive).toEqual(true);
+      expect(result.current.headerIsInteractive).toEqual(true);
     });
   });
 });
diff --git a/src/components/datagrid/controls/display_selector.test.tsx b/src/components/datagrid/controls/display_selector.test.tsx
index 40dd9910e5c..3fd034d88bc 100644
--- a/src/components/datagrid/controls/display_selector.test.tsx
+++ b/src/components/datagrid/controls/display_selector.test.tsx
@@ -9,7 +9,7 @@
 import React from 'react';
 import { act } from '@testing-library/react';
 import { shallow, mount, ShallowWrapper, ReactWrapper } from 'enzyme';
-import { testCustomHook } from '../../../test/internal';
+import { renderHook } from '../../../test/rtl';
 
 import {
   EuiDataGridToolBarVisibilityOptions,
@@ -486,11 +486,9 @@ describe('useDataGridDisplaySelector', () => {
   describe('gridStyles', () => {
     it('returns an object of grid styles with user overrides', () => {
       const initialStyles = { ...startingStyles, stripes: true };
-      const {
-        return: [, gridStyles],
-      } = testCustomHook(() =>
+      const [, gridStyles] = renderHook(() =>
         useDataGridDisplaySelector(true, initialStyles, {})
-      );
+      ).result.current;
 
       expect(gridStyles).toMatchInlineSnapshot(`
         Object {
diff --git a/src/components/datagrid/controls/fullscreen_selector.test.tsx b/src/components/datagrid/controls/fullscreen_selector.test.tsx
index f0ee04b73a0..f0dd674df29 100644
--- a/src/components/datagrid/controls/fullscreen_selector.test.tsx
+++ b/src/components/datagrid/controls/fullscreen_selector.test.tsx
@@ -7,169 +7,100 @@
  */
 
 import React from 'react';
-import { act } from '@testing-library/react';
-import { shallow } from 'enzyme';
+import { fireEvent } from '@testing-library/react';
+import { render, renderHook, renderHookAct } from '../../../test/rtl';
 import { keys } from '../../../services';
-import { testCustomHook } from '../../../test/internal';
+
 import { useDataGridFullScreenSelector } from './fullscreen_selector';
 
 describe('useDataGridFullScreenSelector', () => {
-  type ReturnedValues = ReturnType<typeof useDataGridFullScreenSelector>;
-
   describe('isFullScreen state', () => {
     test('setFullScreen toggles isFullScreen', () => {
-      const {
-        return: { isFullScreen, setIsFullScreen },
-        getUpdatedState,
-      } = testCustomHook(() => useDataGridFullScreenSelector());
-
-      expect(isFullScreen).toEqual(false);
-      act(() => setIsFullScreen(true));
-      expect(getUpdatedState().isFullScreen).toEqual(true);
+      const { result } = renderHook(() => useDataGridFullScreenSelector());
+
+      expect(result.current.isFullScreen).toEqual(false);
+      renderHookAct(() => result.current.setIsFullScreen(true));
+      expect(result.current.isFullScreen).toEqual(true);
     });
   });
 
   describe('fullScreenSelector', () => {
-    it('renders a button that toggles entering fullscreen', () => {
-      const {
-        return: { fullScreenSelector },
-      } = testCustomHook(() => useDataGridFullScreenSelector());
-      const component = shallow(<div>{fullScreenSelector}</div>);
-
-      expect(component).toMatchInlineSnapshot(`
-        <div>
-          <EuiToolTip
-            content="Enter fullscreen"
-            delay="long"
-            display="inlineBlock"
-            position="top"
-          >
-            <EuiButtonIcon
-              aria-label="Enter fullscreen"
-              className="euiDataGrid__controlBtn"
-              color="text"
-              data-test-subj="dataGridFullScreenButton"
-              iconType="fullScreen"
-              onClick={[Function]}
-              size="xs"
-            />
-          </EuiToolTip>
-        </div>
-      `);
-    });
-
-    it('renders a button that toggles exiting fullscreen', () => {
-      const {
-        return: { setIsFullScreen },
-        getUpdatedState,
-      } = testCustomHook<ReturnedValues>(() => useDataGridFullScreenSelector());
-      act(() => setIsFullScreen(true));
-
-      const { fullScreenSelector } = getUpdatedState();
-      const component = shallow(<div>{fullScreenSelector}</div>);
-
-      expect(component).toMatchInlineSnapshot(`
-        <div>
-          <EuiToolTip
-            content={
-              <React.Fragment>
-                Exit fullscreen
-                 (
-                <kbd>
-                  esc
-                </kbd>
-                )
-              </React.Fragment>
-            }
-            delay="long"
-            display="inlineBlock"
-            position="top"
-          >
-            <EuiButtonIcon
-              aria-label="Exit fullscreen"
-              className="euiDataGrid__controlBtn euiDataGrid__controlBtn--active"
-              color="text"
-              data-test-subj="dataGridFullScreenButton"
-              iconType="fullScreenExit"
-              onClick={[Function]}
-              size="xs"
-            />
-          </EuiToolTip>
-        </div>
-      `);
-    });
+    it('renders a button that toggles entering and exiting fullscreen', () => {
+      const { result } = renderHook(() => useDataGridFullScreenSelector());
+      const { container, getByTestSubject, rerender } = render(
+        <>{result.current.fullScreenSelector}</>
+      );
+      expect(
+        container.querySelector('[data-euiicon-type="fullScreen"]')
+      ).toBeInTheDocument();
 
-    it('toggles fullscreen mode on button click', () => {
-      const {
-        return: { fullScreenSelector, isFullScreen },
-        getUpdatedState,
-      } = testCustomHook(() => useDataGridFullScreenSelector());
-      expect(isFullScreen).toEqual(false);
-      const component = shallow(<div>{fullScreenSelector}</div>);
-
-      act(() => {
-        component
-          .find('[data-test-subj="dataGridFullScreenButton"]')
-          .simulate('click');
+      renderHookAct(() => {
+        fireEvent.click(getByTestSubject('dataGridFullScreenButton'));
       });
-      expect(getUpdatedState().isFullScreen).toEqual(true);
+      expect(result.current.isFullScreen).toEqual(true);
+      rerender(<>{result.current.fullScreenSelector}</>);
+
+      expect(
+        container.querySelector('[data-euiicon-type="fullScreenExit"]')
+      ).toBeInTheDocument();
     });
   });
 
   describe('handleGridKeyDown', () => {
+    const preventDefault = jest.fn();
+    const keyDownEvent = {
+      preventDefault,
+    } as unknown as React.KeyboardEvent<HTMLDivElement>;
+
+    beforeEach(() => preventDefault.mockReset());
+
     it('exits fullscreen mode when the Escape key is pressed', () => {
-      const {
-        return: { setIsFullScreen },
-        getUpdatedState,
-      } = testCustomHook<ReturnedValues>(() => useDataGridFullScreenSelector());
-      act(() => setIsFullScreen(true));
-      const { handleGridKeyDown } = getUpdatedState();
+      const { result } = renderHook(() => useDataGridFullScreenSelector());
+      renderHookAct(() => result.current.setIsFullScreen(true));
 
-      const preventDefault = jest.fn();
-      act(() => handleGridKeyDown({ key: keys.ESCAPE, preventDefault } as any));
+      renderHookAct(() =>
+        result.current.handleGridKeyDown({ ...keyDownEvent, key: keys.ESCAPE })
+      );
 
       expect(preventDefault).toHaveBeenCalled();
-      expect(getUpdatedState().isFullScreen).toEqual(false);
+      expect(result.current.isFullScreen).toEqual(false);
     });
 
     it('does nothing if fullscreen is not open', () => {
-      const {
-        return: { handleGridKeyDown },
-        getUpdatedState,
-      } = testCustomHook<ReturnedValues>(() => useDataGridFullScreenSelector());
+      const { result } = renderHook(() => useDataGridFullScreenSelector());
 
-      const preventDefault = jest.fn();
-      act(() => handleGridKeyDown({ key: keys.ESCAPE, preventDefault } as any));
+      renderHookAct(() =>
+        result.current.handleGridKeyDown({ ...keyDownEvent, key: keys.ESCAPE })
+      );
 
       expect(preventDefault).not.toHaveBeenCalled();
-      expect(getUpdatedState().isFullScreen).toEqual(false);
+      expect(result.current.isFullScreen).toEqual(false);
     });
 
-    it('does nothing if other keys are pressed or fullscreen is not open', () => {
-      const {
-        return: { handleGridKeyDown },
-        getUpdatedState,
-      } = testCustomHook<ReturnedValues>(() => useDataGridFullScreenSelector());
+    it('does nothing if other keys are pressed', () => {
+      const { result } = renderHook(() => useDataGridFullScreenSelector());
 
-      const preventDefault = jest.fn();
-      act(() => handleGridKeyDown({ key: keys.ENTER, preventDefault } as any));
+      renderHookAct(() =>
+        result.current.handleGridKeyDown({ ...keyDownEvent, key: keys.ENTER })
+      );
 
       expect(preventDefault).not.toHaveBeenCalled();
-      expect(getUpdatedState().isFullScreen).toEqual(false);
+      expect(result.current.isFullScreen).toEqual(false);
     });
   });
 
   describe('body classes', () => {
     it('adds and removes a fullscreen class to the document body when fullscreen opens/closes', () => {
-      const {
-        return: { setIsFullScreen },
-      } = testCustomHook(() => useDataGridFullScreenSelector());
-      act(() => setIsFullScreen(true));
+      const { setIsFullScreen } = renderHook(() =>
+        useDataGridFullScreenSelector()
+      ).result.current;
+
+      renderHookAct(() => setIsFullScreen(true));
       expect(
         document.body.classList.contains('euiDataGrid__restrictBody')
       ).toBe(true);
 
-      act(() => setIsFullScreen(false));
+      renderHookAct(() => setIsFullScreen(false));
       expect(
         document.body.classList.contains('euiDataGrid__restrictBody')
       ).toBe(false);
diff --git a/src/components/datagrid/utils/__mocks__/row_heights.ts b/src/components/datagrid/utils/__mocks__/row_heights.ts
index 0528c89d2cb..e06b4957d9d 100644
--- a/src/components/datagrid/utils/__mocks__/row_heights.ts
+++ b/src/components/datagrid/utils/__mocks__/row_heights.ts
@@ -24,11 +24,7 @@ export const RowHeightUtils = jest.fn().mockImplementation(() => {
 
   const rowHeightUtilsMock: RowHeightUtilsPublicAPI = {
     cacheStyles: jest.fn(),
-    getStylesForCell: jest.fn(() => ({
-      wordWrap: 'break-word',
-      wordBreak: 'break-word',
-      flexGrow: 1,
-    })),
+    getHeightType: jest.fn(rowHeightUtils.getHeightType),
     isAutoHeight: jest.fn(() => false),
     setRowHeight: jest.fn(),
     pruneHiddenColumnHeights: jest.fn(),
diff --git a/src/components/datagrid/utils/col_widths.test.ts b/src/components/datagrid/utils/col_widths.test.ts
index 28edd76caf3..a18194d73c4 100644
--- a/src/components/datagrid/utils/col_widths.test.ts
+++ b/src/components/datagrid/utils/col_widths.test.ts
@@ -6,8 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { act } from '@testing-library/react';
-import { testCustomHook } from '../../../test/internal';
+import { renderHook, act } from '@testing-library/react';
 import {
   useDefaultColumnWidth,
   doesColumnHaveAnInitialWidth,
@@ -20,7 +19,7 @@ jest.mock('../../../utils', () => ({ IS_JEST_ENVIRONMENT: false }));
 describe('useDefaultColumnWidth', () => {
   it('returns null if grid has not yet been initialized (gridWidth = 0)', () => {
     expect(
-      testCustomHook(() => useDefaultColumnWidth(0, [], [], [])).return
+      renderHook(() => useDefaultColumnWidth(0, [], [], [])).result.current
     ).toEqual(null);
   });
 
@@ -30,14 +29,16 @@ describe('useDefaultColumnWidth', () => {
       { id: 'B', initialWidth: 150 },
     ];
     expect(
-      testCustomHook(() => useDefaultColumnWidth(500, [], [], columns)).return
+      renderHook(() => useDefaultColumnWidth(500, [], [], columns)).result
+        .current
     ).toEqual(100);
   });
 
   it('returns the grid width divided by the number of columns without initialWidths', () => {
     const columns = [{ id: 'A' }, { id: 'B' }, { id: 'C' }, { id: 'D' }];
     expect(
-      testCustomHook(() => useDefaultColumnWidth(500, [], [], columns)).return
+      renderHook(() => useDefaultColumnWidth(500, [], [], columns)).result
+        .current
     ).toEqual(125); // 500 / 4
   });
 
@@ -45,16 +46,17 @@ describe('useDefaultColumnWidth', () => {
     const controlColumns = [{ id: 'controlColumn', width: 50 }] as any;
     const columns = [{ id: 'A' }, { id: 'B' }, { id: 'C' }, { id: 'D' }];
     expect(
-      testCustomHook(() =>
+      renderHook(() =>
         useDefaultColumnWidth(1000, controlColumns, controlColumns, columns)
-      ).return
+      ).result.current
     ).toEqual(225); // 1000 - (50 * 2) / 4
   });
 
   it('returns a minimum column width of 100px regardless of grid width / number of columns', () => {
     const columns = [{ id: 'A' }, { id: 'B' }, { id: 'C' }, { id: 'D' }];
     expect(
-      testCustomHook(() => useDefaultColumnWidth(200, [], [], columns)).return
+      renderHook(() => useDefaultColumnWidth(200, [], [], columns)).result
+        .current
     ).toEqual(100); // Would be 200 / 4 = 50 without a minumum
   });
 });
@@ -88,36 +90,34 @@ describe('useColumnWidths', () => {
     defaultColumnWidth: 150,
     onColumnResize: jest.fn(),
   };
-  type ReturnedValues = ReturnType<typeof useColumnWidths>;
 
   describe('columnWidths', () => {
     it('returns a map of column `id`s to `initialWidth`s', () => {
-      const {
-        return: { columnWidths },
-      } = testCustomHook(() => useColumnWidths(args));
+      const { columnWidths } = renderHook(() => useColumnWidths(args)).result
+        .current;
+
       expect(columnWidths).toEqual({ b: 75 });
     });
 
     it('recomputes column widths on columns change', () => {
-      const { updateHookArgs, getUpdatedState } =
-        testCustomHook<ReturnedValues>(useColumnWidths, args);
-
-      updateHookArgs({
+      const { rerender, result } = renderHook(useColumnWidths, {
+        initialProps: args,
+      });
+      rerender({
+        ...args,
         columns: [{ id: 'c', initialWidth: 125 }],
       });
-      expect(getUpdatedState().columnWidths).toEqual({ c: 125 });
+
+      expect(result.current.columnWidths).toEqual({ c: 125 });
     });
   });
 
   describe('setColumnWidth', () => {
     it("sets a single column's width in the columnWidths map", () => {
-      const {
-        return: { setColumnWidth },
-        getUpdatedState,
-      } = testCustomHook<ReturnedValues>(() => useColumnWidths(args));
+      const { result } = renderHook(() => useColumnWidths(args));
 
-      act(() => setColumnWidth('c', 125));
-      expect(getUpdatedState().columnWidths).toEqual({ b: 75, c: 125 });
+      act(() => result.current.setColumnWidth('c', 125));
+      expect(result.current.columnWidths).toEqual({ b: 75, c: 125 });
       expect(args.onColumnResize).toHaveBeenCalledWith({
         columnId: 'c',
         width: 125,
@@ -128,52 +128,53 @@ describe('useColumnWidths', () => {
   describe('getColumnWidth', () => {
     describe('leading control columns', () => {
       it('returns the width property of the column', () => {
-        const {
-          return: { getColumnWidth },
-        } = testCustomHook(() => useColumnWidths({ ...args }));
+        const { getColumnWidth } = renderHook(() =>
+          useColumnWidths({ ...args })
+        ).result.current;
+
         expect(getColumnWidth(0)).toEqual(50);
       });
     });
 
     describe('trailing control columns', () => {
       it('returns the width property of the column', () => {
-        const {
-          return: { getColumnWidth },
-        } = testCustomHook(() => useColumnWidths({ ...args }));
+        const { getColumnWidth } = renderHook(() =>
+          useColumnWidths({ ...args })
+        ).result.current;
+
         expect(getColumnWidth(3)).toEqual(25);
       });
     });
 
     describe('normal data columns', () => {
       it('returns the initialWidth property of the column if present and not overridden by user settings', () => {
-        const {
-          return: { getColumnWidth },
-        } = testCustomHook(() => useColumnWidths({ ...args }));
+        const { getColumnWidth } = renderHook(() =>
+          useColumnWidths({ ...args })
+        ).result.current;
+
         expect(getColumnWidth(1)).toEqual(75);
       });
 
       it('returns the defaultColumnWidth if no column initialWidth or user width was set', () => {
-        const {
-          return: { getColumnWidth },
-        } = testCustomHook(() => useColumnWidths({ ...args }));
+        const { getColumnWidth } = renderHook(() =>
+          useColumnWidths({ ...args })
+        ).result.current;
+
         expect(getColumnWidth(2)).toEqual(150);
       });
 
       it('returns a static 100px width if no default column width was passed', () => {
-        const {
-          return: { getColumnWidth },
-        } = testCustomHook(() =>
+        const { getColumnWidth } = renderHook(() =>
           useColumnWidths({ ...args, defaultColumnWidth: null })
-        );
+        ).result.current;
+
         expect(getColumnWidth(2)).toEqual(100);
       });
     });
 
     describe('when all columns are hidden', () => {
       it('does not error & falls back to the static default width', () => {
-        const {
-          return: { getColumnWidth },
-        } = testCustomHook(() =>
+        const { getColumnWidth } = renderHook(() =>
           useColumnWidths({
             ...args,
             leadingControlColumns: [],
@@ -181,7 +182,8 @@ describe('useColumnWidths', () => {
             columns: [],
             defaultColumnWidth: null,
           })
-        );
+        ).result.current;
+
         expect(getColumnWidth(0)).toEqual(100);
       });
     });
diff --git a/src/components/datagrid/utils/focus.test.tsx b/src/components/datagrid/utils/focus.test.tsx
index 9b2e0db5d37..35f861656b1 100644
--- a/src/components/datagrid/utils/focus.test.tsx
+++ b/src/components/datagrid/utils/focus.test.tsx
@@ -7,10 +7,8 @@
  */
 
 import React from 'react';
-import { act } from '@testing-library/react';
-import { mount } from 'enzyme';
+import { render, renderHook, renderHookAct } from '../../../test/rtl';
 import { keys } from '../../../services';
-import { testCustomHook } from '../../../test/internal';
 import {
   DataGridFocusContext,
   useFocus,
@@ -22,37 +20,26 @@ import {
 } from './focus';
 
 describe('useFocus', () => {
-  type ReturnValues = ReturnType<typeof useFocus>;
   const mockArgs = {
     headerIsInteractive: true,
     gridItemsRendered: { current: null },
   };
 
   describe('onFocusUpdate', () => {
-    const onFocus = jest.fn();
-    const {
-      return: { onFocusUpdate, setFocusedCell },
-    } = testCustomHook<ReturnValues>(() => useFocus(mockArgs));
-
-    let cleanupFn: Function;
-
     it("adds a cell's onFocus callback to the internal cellsUpdateFocus map,", () => {
-      cleanupFn = onFocusUpdate([0, 0], onFocus);
-      // Note: there's no great way to assert this since cellsUpdateFocus is internal,
-      // so this is a separate test mostly just to document the intention/behavior
-    });
+      const onFocus = jest.fn();
+      const { result } = renderHook(() => useFocus(mockArgs));
+      const cleanupFn = result.current.onFocusUpdate([0, 0], onFocus);
 
-    it("calls the cell's onFocus callback with true when the cell becomes focused", () => {
-      act(() => setFocusedCell([0, 0]));
+      // the mapped onFocus is called with true when the cell becomes focused
+      renderHookAct(() => result.current.setFocusedCell([0, 0]));
       expect(onFocus).toHaveBeenCalledWith(true);
-    });
 
-    it("calls the previous cell's onFocus callback with false when another cell becomes focused", () => {
-      act(() => setFocusedCell([1, 1]));
+      // the mapped onFocus is called with false when another cell becomes focused
+      renderHookAct(() => result.current.setFocusedCell([1, 1]));
       expect(onFocus).toHaveBeenCalledWith(false);
-    });
 
-    it('removes the cell from the internal cellsUpdateFocus map as a cleanup function', () => {
+      // the returned function removes the cell from the internal cellsUpdateFocus map
       cleanupFn();
       // Note: there's no great way to assert this since cellsUpdateFocus is internal,
       // so this is mostly here to document behavior and for line coverage
@@ -60,45 +47,39 @@ describe('useFocus', () => {
   });
 
   describe('focusedCell / setFocusedCell', () => {
-    const {
-      return: { focusedCell, setFocusedCell },
-      getUpdatedState,
-    } = testCustomHook(() => useFocus(mockArgs));
-
     it('gets and sets the focusedCell state', () => {
-      expect(focusedCell).toEqual(undefined);
-      act(() => setFocusedCell([2, 2]));
-      expect(getUpdatedState().focusedCell).toEqual([2, 2]);
+      const { result } = renderHook(() => useFocus(mockArgs));
+      expect(result.current.focusedCell).toEqual(undefined);
+
+      renderHookAct(() => result.current.setFocusedCell([2, 2]));
+      expect(result.current.focusedCell).toEqual([2, 2]);
     });
 
     it('does not update if setFocusedCell is called with the same cell X/Y coordinates', () => {
-      const focusedCellInMemory = getUpdatedState().focusedCell;
-      act(() => getUpdatedState().setFocusedCell([2, 2]));
-      expect(getUpdatedState().focusedCell).toBe(focusedCellInMemory); // Would fail if the exact same array wasn't returned
+      const { result } = renderHook(() => useFocus(mockArgs));
+      renderHookAct(() => result.current.setFocusedCell([2, 2]));
+
+      const focusedCellInMemory = result.current.focusedCell;
+      renderHookAct(() => result.current.setFocusedCell([2, 2]));
+      expect(result.current.focusedCell).toBe(focusedCellInMemory); // Would fail if the exact same array wasn't returned
     });
   });
 
   describe('focusFirstVisibleInteractiveCell', () => {
     describe('when the sticky header is interactive', () => {
       it('always focuses the first header cell', () => {
-        const {
-          return: { focusFirstVisibleInteractiveCell },
-          getUpdatedState,
-        } = testCustomHook<ReturnValues>(() =>
+        const { result } = renderHook(() =>
           useFocus({ ...mockArgs, headerIsInteractive: true })
         );
 
-        act(() => focusFirstVisibleInteractiveCell());
-        expect(getUpdatedState().focusedCell).toEqual([0, -1]);
+        renderHookAct(() => result.current.focusFirstVisibleInteractiveCell());
+        expect(result.current.focusedCell).toEqual([0, -1]);
       });
     });
 
     describe('describe when the header is not interactive', () => {
       it('focuses the first visible data cell in the virtualized grid', () => {
-        const {
-          return: { focusFirstVisibleInteractiveCell },
-          getUpdatedState,
-        } = testCustomHook<ReturnValues>(() =>
+        const { result } = renderHook(() =>
           useFocus({
             headerIsInteractive: false,
             gridItemsRendered: {
@@ -110,23 +91,20 @@ describe('useFocus', () => {
           })
         );
 
-        act(() => focusFirstVisibleInteractiveCell());
-        expect(getUpdatedState().focusedCell).toEqual([1, 10]);
+        renderHookAct(() => result.current.focusFirstVisibleInteractiveCell());
+        expect(result.current.focusedCell).toEqual([1, 10]);
       });
 
       it("does nothing if the grid isn't yet rendered", () => {
-        const {
-          return: { focusFirstVisibleInteractiveCell },
-          getUpdatedState,
-        } = testCustomHook<ReturnValues>(() =>
+        const { result } = renderHook(() =>
           useFocus({
             headerIsInteractive: false,
             gridItemsRendered: { current: null },
           })
         );
 
-        act(() => focusFirstVisibleInteractiveCell());
-        expect(getUpdatedState().focusedCell).toEqual(undefined);
+        renderHookAct(() => result.current.focusFirstVisibleInteractiveCell());
+        expect(result.current.focusedCell).toEqual(undefined);
       });
     });
   });
@@ -134,9 +112,8 @@ describe('useFocus', () => {
   describe('setIsFocusedCellInView / focusProps', () => {
     describe('when no focused child cell is in view', () => {
       it('renders the grid with tabindex 0 and an onKeyUp event', () => {
-        const {
-          return: { focusProps },
-        } = testCustomHook(() => useFocus(mockArgs));
+        const { focusProps } = renderHook(() => useFocus(mockArgs)).result
+          .current;
 
         expect(focusProps).toEqual({
           tabIndex: 0,
@@ -151,61 +128,48 @@ describe('useFocus', () => {
         );
 
         it('focuses into the first visible cell of the grid when the grid is directly tabbed to', () => {
-          const {
-            return: {
-              focusProps: { onKeyUp },
-            },
-            getUpdatedState,
-          } = testCustomHook<ReturnValues>(() => useFocus(mockArgs));
+          const { result } = renderHook(() => useFocus(mockArgs));
 
-          act(() =>
-            onKeyUp!({
+          renderHookAct(() =>
+            result.current.focusProps.onKeyUp!({
               key: keys.TAB,
               target: mockGrid,
               currentTarget: mockGrid,
             } as any)
           );
-          expect(getUpdatedState().focusedCell).toEqual([0, -1]);
+          expect(result.current.focusedCell).toEqual([0, -1]);
         });
 
         it('does nothing if not a tab keyup, or if the event was not on the grid itself', () => {
-          const {
-            return: {
-              focusProps: { onKeyUp },
-            },
-            getUpdatedState,
-          } = testCustomHook<ReturnValues>(() => useFocus(mockArgs));
+          const { result } = renderHook(() => useFocus(mockArgs));
 
-          act(() =>
-            onKeyUp!({
+          renderHookAct(() =>
+            result.current.focusProps.onKeyUp!({
               key: keys.ARROW_DOWN,
               target: mockGrid,
               currentTarget: mockGrid,
             } as any)
           );
-          expect(getUpdatedState().focusedCell).toEqual(undefined);
+          expect(result.current.focusedCell).toEqual(undefined);
 
-          act(() =>
-            onKeyUp!({
+          renderHookAct(() =>
+            result.current.focusProps.onKeyUp!({
               key: keys.TAB,
               target: someChild,
               currentTarget: mockGrid,
             } as any)
           );
-          expect(getUpdatedState().focusedCell).toEqual(undefined);
+          expect(result.current.focusedCell).toEqual(undefined);
         });
       });
     });
 
     describe('when a focused cell is in view', () => {
       it('renders the grid with tabindex -1 (because the child cell will already have a tabindex 0)', () => {
-        const {
-          return: { setIsFocusedCellInView },
-          getUpdatedState,
-        } = testCustomHook<ReturnValues>(() => useFocus(mockArgs));
+        const { result } = renderHook(() => useFocus(mockArgs));
 
-        act(() => setIsFocusedCellInView(true));
-        expect(getUpdatedState().focusProps).toEqual({
+        renderHookAct(() => result.current.setIsFocusedCellInView(true));
+        expect(result.current.focusProps).toEqual({
           tabIndex: -1,
         });
       });
@@ -649,7 +613,7 @@ describe('useHeaderFocusWorkaround', () => {
   it('moves focus down from the header to the first data row if the header becomes uninteractive', () => {
     const focusedCell = [2, -1];
     const setFocusedCell = jest.fn();
-    mount(
+    render(
       <DataGridFocusContext.Provider
         value={{ focusedCell, setFocusedCell } as any}
       >
@@ -662,7 +626,7 @@ describe('useHeaderFocusWorkaround', () => {
   it('does nothing if the focus was not on the header when the header became uninteractive', () => {
     const focusedCell = [2, 0];
     const setFocusedCell = jest.fn();
-    mount(
+    render(
       <DataGridFocusContext.Provider
         value={{ focusedCell, setFocusedCell } as any}
       >
diff --git a/src/components/datagrid/utils/ref.test.ts b/src/components/datagrid/utils/ref.test.ts
index eaad811867f..6ba0d3926f7 100644
--- a/src/components/datagrid/utils/ref.test.ts
+++ b/src/components/datagrid/utils/ref.test.ts
@@ -6,15 +6,14 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../../test/internal';
+import { renderHook } from '@testing-library/react';
 import { useCellLocationCheck, useSortPageCheck } from './ref';
 
 // see ref.spec.tsx for E2E useImperativeGridRef tests
 
 describe('useCellLocationCheck', () => {
-  const {
-    return: { checkCellExists },
-  } = testCustomHook(() => useCellLocationCheck(10, 5));
+  const { checkCellExists } = renderHook(() => useCellLocationCheck(10, 5))
+    .result.current;
 
   it("throws an error if the passed rowIndex is higher than the grid's rowCount", () => {
     expect(() => {
@@ -45,9 +44,9 @@ describe('useSortPageCheck', () => {
     const sortedRowMap: number[] = [];
 
     it('returns the passed rowIndex as-is', () => {
-      const {
-        return: { findVisibleRowIndex },
-      } = testCustomHook(() => useSortPageCheck(pagination, sortedRowMap));
+      const { findVisibleRowIndex } = renderHook(() =>
+        useSortPageCheck(pagination, sortedRowMap)
+      ).result.current;
 
       expect(findVisibleRowIndex(5)).toEqual(5);
     });
@@ -57,11 +56,11 @@ describe('useSortPageCheck', () => {
     const pagination = undefined;
     const sortedRowMap = [3, 4, 1, 2, 0];
 
-    it('returns the visibleRowIndex of the passed rowIndex (which is the index of the sortedRowMap)', () => {
-      const {
-        return: { findVisibleRowIndex },
-      } = testCustomHook(() => useSortPageCheck(pagination, sortedRowMap));
+    const { findVisibleRowIndex } = renderHook(() =>
+      useSortPageCheck(pagination, sortedRowMap)
+    ).result.current;
 
+    it('returns the visibleRowIndex of the passed rowIndex (which is the index of the sortedRowMap)', () => {
       expect(findVisibleRowIndex(0)).toEqual(4);
       expect(findVisibleRowIndex(1)).toEqual(2);
       expect(findVisibleRowIndex(2)).toEqual(3);
@@ -80,13 +79,13 @@ describe('useSortPageCheck', () => {
     };
     const sortedRowMap: number[] = [];
 
+    const { findVisibleRowIndex } = renderHook(() =>
+      useSortPageCheck(pagination, sortedRowMap)
+    ).result.current;
+
     beforeEach(() => jest.clearAllMocks());
 
     it('calculates what page the row should be on, paginates to that page, and returns the index of the row on that page', () => {
-      const {
-        return: { findVisibleRowIndex },
-      } = testCustomHook(() => useSortPageCheck(pagination, sortedRowMap));
-
       expect(findVisibleRowIndex(20)).toEqual(0); // First item on 2nd page
       expect(pagination.onChangePage).toHaveBeenLastCalledWith(1);
 
@@ -95,10 +94,6 @@ describe('useSortPageCheck', () => {
     });
 
     it('does not paginate if the user is already on the correct page', () => {
-      const {
-        return: { findVisibleRowIndex },
-      } = testCustomHook(() => useSortPageCheck(pagination, sortedRowMap));
-
       expect(findVisibleRowIndex(5)).toEqual(5);
       expect(pagination.onChangePage).not.toHaveBeenCalled();
     });
diff --git a/src/components/datagrid/utils/row_heights.test.ts b/src/components/datagrid/utils/row_heights.test.ts
index 643ac31ef1a..a7b8c832a73 100644
--- a/src/components/datagrid/utils/row_heights.test.ts
+++ b/src/components/datagrid/utils/row_heights.test.ts
@@ -184,34 +184,22 @@ describe('RowHeightUtils', () => {
         });
       });
     });
+  });
 
-    describe('getStylesForCell (returns inline CSS styles based on height config)', () => {
-      describe('auto height', () => {
-        it('returns empty styles object', () => {
-          expect(
-            rowHeightUtils.getStylesForCell({ defaultHeight: 'auto' }, 0)
-          ).toEqual({});
-        });
-      });
-
-      describe('lineCount height', () => {
-        it('returns line-clamp CSS', () => {
-          expect(
-            rowHeightUtils.getStylesForCell(
-              { defaultHeight: { lineCount: 5 } },
-              0
-            )
-          ).toEqual(expect.objectContaining({ WebkitLineClamp: 5 }));
-        });
-      });
-
-      describe('numeric heights', () => {
-        it('returns default CSS', () => {
-          expect(
-            rowHeightUtils.getStylesForCell({ defaultHeight: 34 }, 0)
-          ).toEqual({ height: '100%', overflow: 'hidden' });
-        });
-      });
+  describe('getHeightType', () => {
+    it('returns a string enum based on rowHeightsOptions', () => {
+      expect(rowHeightUtils.getHeightType(undefined)).toEqual('default');
+      expect(rowHeightUtils.getHeightType('auto')).toEqual('auto');
+      expect(rowHeightUtils.getHeightType({ lineCount: 3 })).toEqual(
+        'lineCount'
+      );
+      expect(rowHeightUtils.getHeightType({ lineCount: 0 })).toEqual(
+        'lineCount'
+      );
+      expect(rowHeightUtils.getHeightType({ height: 100 })).toEqual(
+        'numerical'
+      );
+      expect(rowHeightUtils.getHeightType(100)).toEqual('numerical');
     });
   });
 
diff --git a/src/components/datagrid/utils/row_heights.ts b/src/components/datagrid/utils/row_heights.ts
index 3aed6933c4b..0c82650e390 100644
--- a/src/components/datagrid/utils/row_heights.ts
+++ b/src/components/datagrid/utils/row_heights.ts
@@ -7,7 +7,6 @@
  */
 
 import {
-  CSSProperties,
   MutableRefObject,
   useCallback,
   useContext,
@@ -107,31 +106,21 @@ export class RowHeightUtils {
     };
   }
 
-  getStylesForCell = (
-    rowHeightsOptions: EuiDataGridRowHeightsOptions,
-    rowIndex: number
-  ): CSSProperties => {
-    const height = this.getRowHeightOption(rowIndex, rowHeightsOptions);
+  /**
+   * Height types
+   */
 
-    if (height === AUTO_HEIGHT) {
-      return {};
+  getHeightType = (option?: EuiDataGridRowHeightOption) => {
+    if (option == null) {
+      return 'default';
     }
-
-    const lineCount = this.getLineCount(height);
-    if (lineCount) {
-      return {
-        WebkitLineClamp: lineCount,
-        display: '-webkit-box',
-        WebkitBoxOrient: 'vertical',
-        height: '100%',
-        overflow: 'hidden',
-      };
+    if (option === AUTO_HEIGHT) {
+      return 'auto';
     }
-
-    return {
-      height: '100%',
-      overflow: 'hidden',
-    };
+    if (this.getLineCount(option) != null) {
+      return 'lineCount';
+    }
+    return 'numerical';
   };
 
   /**
diff --git a/src/components/datagrid/utils/scrolling.test.tsx b/src/components/datagrid/utils/scrolling.test.tsx
index 8546b6cb9e5..e4c95d9583e 100644
--- a/src/components/datagrid/utils/scrolling.test.tsx
+++ b/src/components/datagrid/utils/scrolling.test.tsx
@@ -7,8 +7,7 @@
  */
 
 import React from 'react';
-import { testCustomHook } from '../../../test/internal';
-import { render } from '../../../test/rtl';
+import { render, renderHook } from '../../../test/rtl';
 import { useScrollCellIntoView, useScrollBars } from './scrolling';
 
 // see scrolling.spec.tsx for E2E useScroll tests
@@ -53,37 +52,35 @@ describe('useScrollCellIntoView', () => {
   });
 
   it('does nothing if the grid references are unavailable', () => {
-    const {
-      return: { scrollCellIntoView },
-    } = testCustomHook(() =>
+    const { scrollCellIntoView } = renderHook(() =>
       useScrollCellIntoView({
         ...args,
         gridRef: { current: null },
         outerGridRef: { current: null },
       })
-    );
+    ).result.current;
+
     scrollCellIntoView({ rowIndex: 0, colIndex: 0 });
     expect(scrollTo).not.toHaveBeenCalled();
   });
 
   it('does nothing if the grid does not scroll', () => {
-    const {
-      return: { scrollCellIntoView },
-    } = testCustomHook(() =>
+    const { scrollCellIntoView } = renderHook(() =>
       useScrollCellIntoView({
         ...args,
         hasGridScrolling: false,
       })
-    );
+    ).result.current;
+
     scrollCellIntoView({ rowIndex: 0, colIndex: 0 });
     expect(scrollTo).not.toHaveBeenCalled();
   });
 
   it('calls scrollToItem if the specified cell is not virtualized', async () => {
     getCell.mockReturnValue(null);
-    const {
-      return: { scrollCellIntoView },
-    } = testCustomHook(() => useScrollCellIntoView(args));
+    const { scrollCellIntoView } = renderHook(() => useScrollCellIntoView(args))
+      .result.current;
+
     await scrollCellIntoView({ rowIndex: 20, colIndex: 5 });
     expect(scrollToItem).toHaveBeenCalledWith({ columnIndex: 5, rowIndex: 20 });
   });
@@ -94,11 +91,10 @@ describe('useScrollCellIntoView', () => {
       parentNode: { offsetTop: 50 },
       offsetLeft: 50,
     });
-    const {
-      return: { scrollCellIntoView },
-    } = testCustomHook(() => useScrollCellIntoView(args));
-    scrollCellIntoView({ rowIndex: 1, colIndex: 1 });
+    const { scrollCellIntoView } = renderHook(() => useScrollCellIntoView(args))
+      .result.current;
 
+    scrollCellIntoView({ rowIndex: 1, colIndex: 1 });
     expect(scrollToItem).not.toHaveBeenCalled();
     expect(scrollTo).not.toHaveBeenCalled();
   });
@@ -116,16 +112,14 @@ describe('useScrollCellIntoView', () => {
       };
 
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
         })
-      );
-      scrollCellIntoView({ rowIndex: 1, colIndex: 5 });
+      ).result.current;
 
+      scrollCellIntoView({ rowIndex: 1, colIndex: 5 });
       expect(scrollTo).toHaveBeenCalledWith({ scrollLeft: 50, scrollTop: 0 });
     });
   });
@@ -142,16 +136,14 @@ describe('useScrollCellIntoView', () => {
       };
 
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
         })
-      );
-      scrollCellIntoView({ rowIndex: 1, colIndex: 0 });
+      ).result.current;
 
+      scrollCellIntoView({ rowIndex: 1, colIndex: 0 });
       expect(scrollTo).toHaveBeenCalledWith({ scrollLeft: 0, scrollTop: 0 });
     });
 
@@ -167,16 +159,14 @@ describe('useScrollCellIntoView', () => {
       };
 
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
         })
-      );
-      scrollCellIntoView({ rowIndex: 1, colIndex: 1 });
+      ).result.current;
 
+      scrollCellIntoView({ rowIndex: 1, colIndex: 1 });
       expect(scrollTo).toHaveBeenCalledWith({ scrollLeft: 50, scrollTop: 0 });
     });
   });
@@ -194,60 +184,56 @@ describe('useScrollCellIntoView', () => {
 
     it('scrolls the grid down if the bottom side of the cell is out of view', () => {
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
         })
-      );
+      ).result.current;
+
       scrollCellIntoView({ rowIndex: 5, colIndex: 0 });
       expect(scrollTo).toHaveBeenCalledWith({ scrollTop: 50, scrollLeft: 0 });
     });
 
     it('accounts for the sticky bottom footer if present', () => {
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
           hasStickyFooter: true,
           footerRowHeight: 25,
         })
-      );
+      ).result.current;
+
       scrollCellIntoView({ rowIndex: 5, colIndex: 0 });
       expect(scrollTo).toHaveBeenCalledWith({ scrollTop: 75, scrollLeft: 0 });
     });
 
     it('makes no vertical adjustments if the cell is a sticky header cell', () => {
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
         })
-      );
+      ).result.current;
+
       scrollCellIntoView({ rowIndex: -1, colIndex: 0 });
       expect(scrollTo).not.toHaveBeenCalled();
     });
 
     it('makes no vertical adjustments if the cell is a sticky footer cell', () => {
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
           visibleRowCount: 25,
           hasStickyFooter: true,
         })
-      );
+      ).result.current;
+
       scrollCellIntoView({ rowIndex: 25, colIndex: 0 });
       expect(scrollTo).not.toHaveBeenCalled();
     });
@@ -265,29 +251,27 @@ describe('useScrollCellIntoView', () => {
 
     it('scrolls the grid up if the top side of the cell is out of view', () => {
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
         })
-      );
+      ).result.current;
+
       scrollCellIntoView({ rowIndex: 1, colIndex: 0 });
       expect(scrollTo).toHaveBeenCalledWith({ scrollTop: 50, scrollLeft: 0 });
     });
 
     it('accounts for the sticky header', () => {
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
           headerRowHeight: 30,
         })
-      );
+      ).result.current;
+
       scrollCellIntoView({ rowIndex: 1, colIndex: 0 });
       expect(scrollTo).toHaveBeenCalledWith({ scrollTop: 20, scrollLeft: 0 });
     });
@@ -304,46 +288,42 @@ describe('useScrollCellIntoView', () => {
       };
 
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
           headerRowHeight: 50,
         })
-      );
-      scrollCellIntoView({ rowIndex: 1, colIndex: 0 });
+      ).result.current;
 
+      scrollCellIntoView({ rowIndex: 1, colIndex: 0 });
       expect(scrollTo).toHaveBeenCalledWith({ scrollTop: 50, scrollLeft: 0 });
     });
 
     it('makes no vertical adjustments if the cell is a sticky header cell', () => {
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
         })
-      );
+      ).result.current;
+
       scrollCellIntoView({ rowIndex: -1, colIndex: 0 });
       expect(scrollTo).not.toHaveBeenCalled();
     });
 
     it('makes no vertical adjustments if the cell is a sticky footer cell', () => {
       getCell.mockReturnValue(cell);
-      const {
-        return: { scrollCellIntoView },
-      } = testCustomHook(() =>
+      const { scrollCellIntoView } = renderHook(() =>
         useScrollCellIntoView({
           ...args,
           outerGridRef: { current: { ...args.outerGridRef.current, ...grid } },
           visibleRowCount: 25,
           hasStickyFooter: true,
         })
-      );
+      ).result.current;
+
       scrollCellIntoView({ rowIndex: 25, colIndex: 0 });
       expect(scrollTo).not.toHaveBeenCalled();
     });
@@ -362,13 +342,11 @@ describe('useScrollBars', () => {
 
   describe('scrollBarHeight', () => {
     it("is derived by the difference between the grid's offsetHeight vs clientHeight", () => {
-      const {
-        return: { scrollBarHeight },
-      } = testCustomHook(() =>
+      const { scrollBarHeight } = renderHook(() =>
         useScrollBars({
           current: { ...mockOuterGrid, clientHeight: 40, offsetHeight: 50 },
         })
-      );
+      ).result.current;
 
       expect(scrollBarHeight).toEqual(10);
     });
@@ -376,13 +354,11 @@ describe('useScrollBars', () => {
 
   describe('scrollBarWidth', () => {
     it('is zero if there is no difference between offsetWidth and clientWidth', () => {
-      const {
-        return: { scrollBarWidth },
-      } = testCustomHook(() =>
+      const { scrollBarWidth } = renderHook(() =>
         useScrollBars({
           current: { ...mockOuterGrid, clientWidth: 40, offsetWidth: 40 },
         })
-      );
+      ).result.current;
 
       expect(scrollBarWidth).toEqual(0);
     });
@@ -390,25 +366,21 @@ describe('useScrollBars', () => {
 
   describe('hasVerticalScroll', () => {
     it("has scrolling overflow if the grid's scrollHeight exceeds its clientHeight", () => {
-      const {
-        return: { hasVerticalScroll },
-      } = testCustomHook(() =>
+      const { hasVerticalScroll } = renderHook(() =>
         useScrollBars({
           current: { ...mockOuterGrid, clientHeight: 50, scrollHeight: 100 },
         })
-      );
+      ).result.current;
 
       expect(hasVerticalScroll).toEqual(true);
     });
 
     it("does not have scrolling overflow if the the grid's scrollHeight is the same as its clientHeight", () => {
-      const {
-        return: { hasVerticalScroll },
-      } = testCustomHook(() =>
+      const { hasVerticalScroll } = renderHook(() =>
         useScrollBars({
           current: { ...mockOuterGrid, clientHeight: 50, scrollHeight: 50 },
         })
-      );
+      ).result.current;
 
       expect(hasVerticalScroll).toEqual(false);
     });
@@ -416,25 +388,21 @@ describe('useScrollBars', () => {
 
   describe('hasHorizontalScroll', () => {
     it("has scrolling overflow if the grid's scrollWidth exceeds its clientWidth", () => {
-      const {
-        return: { hasHorizontalScroll },
-      } = testCustomHook(() =>
+      const { hasHorizontalScroll } = renderHook(() =>
         useScrollBars({
           current: { ...mockOuterGrid, clientWidth: 100, scrollWidth: 200 },
         })
-      );
+      ).result.current;
 
       expect(hasHorizontalScroll).toEqual(true);
     });
 
     it("does not have scrolling overflow if the the grid's scrollWidth is the same as its clientWidth", () => {
-      const {
-        return: { hasHorizontalScroll },
-      } = testCustomHook(() =>
+      const { hasHorizontalScroll } = renderHook(() =>
         useScrollBars({
           current: { ...mockOuterGrid, clientWidth: 200, scrollWidth: 200 },
         })
-      );
+      ).result.current;
 
       expect(hasHorizontalScroll).toEqual(false);
     });
@@ -443,9 +411,7 @@ describe('useScrollBars', () => {
   describe('scrollBorderOverlay', () => {
     describe('if the grid does not scroll', () => {
       it('does not render anything', () => {
-        const {
-          return: { scrollBorderOverlay },
-        } = testCustomHook(() =>
+        const { scrollBorderOverlay } = renderHook(() =>
           useScrollBars({
             current: {
               ...mockOuterGrid,
@@ -455,7 +421,7 @@ describe('useScrollBars', () => {
               scrollWidth: 200,
             },
           })
-        );
+        ).result.current;
 
         expect(scrollBorderOverlay).toEqual(null);
       });
@@ -463,9 +429,7 @@ describe('useScrollBars', () => {
 
     describe('if the grid does not display borders', () => {
       it('does not render anything', () => {
-        const {
-          return: { scrollBorderOverlay },
-        } = testCustomHook(() =>
+        const { scrollBorderOverlay } = renderHook(() =>
           useScrollBars(
             {
               current: {
@@ -476,7 +440,7 @@ describe('useScrollBars', () => {
             },
             'none'
           )
-        );
+        ).result.current;
 
         expect(scrollBorderOverlay).toEqual(null);
       });
@@ -484,9 +448,7 @@ describe('useScrollBars', () => {
 
     describe('if the grid scrolls but has inline scrollbars & no scrollbar width/height', () => {
       it('renders a single overlay with borders for the outermost grid', () => {
-        const {
-          return: { scrollBorderOverlay },
-        } = testCustomHook(() =>
+        const { scrollBorderOverlay } = renderHook(() =>
           useScrollBars({
             current: {
               ...mockOuterGrid,
@@ -498,7 +460,7 @@ describe('useScrollBars', () => {
               scrollWidth: 200,
             },
           })
-        );
+        ).result.current;
         const { container } = render(<>{scrollBorderOverlay}</>);
 
         expect(container.firstChild).toMatchInlineSnapshot(`
@@ -512,9 +474,7 @@ describe('useScrollBars', () => {
 
     describe('if the grid scrolls and has scrollbars that take up width/height', () => {
       it('renders a top border for the bottom scrollbar', () => {
-        const {
-          return: { scrollBorderOverlay },
-        } = testCustomHook(() =>
+        const { scrollBorderOverlay } = renderHook(() =>
           useScrollBars({
             current: {
               ...mockOuterGrid,
@@ -526,7 +486,7 @@ describe('useScrollBars', () => {
               scrollWidth: 100,
             },
           })
-        );
+        ).result.current;
         const { container } = render(<>{scrollBorderOverlay}</>);
 
         expect(container.firstChild).toMatchInlineSnapshot(`
@@ -543,9 +503,7 @@ describe('useScrollBars', () => {
       });
 
       it('renders a left border for the bottom scrollbar', () => {
-        const {
-          return: { scrollBorderOverlay },
-        } = testCustomHook(() =>
+        const { scrollBorderOverlay } = renderHook(() =>
           useScrollBars({
             current: {
               ...mockOuterGrid,
@@ -557,7 +515,7 @@ describe('useScrollBars', () => {
               scrollWidth: 200,
             },
           })
-        );
+        ).result.current;
         const { container } = render(<>{scrollBorderOverlay}</>);
 
         expect(container.firstChild).toMatchInlineSnapshot(`
@@ -577,7 +535,7 @@ describe('useScrollBars', () => {
 
   it('returns falsey values if outerGridRef is not yet instantiated', () => {
     expect(
-      testCustomHook(() => useScrollBars({ current: null })).return
+      renderHook(() => useScrollBars({ current: null })).result.current
     ).toEqual({
       scrollBarHeight: 0,
       scrollBarWidth: 0,
diff --git a/src/components/date_picker/super_date_picker/pretty_duration.test.tsx b/src/components/date_picker/super_date_picker/pretty_duration.test.tsx
index a3818586f4a..92004915bf2 100644
--- a/src/components/date_picker/super_date_picker/pretty_duration.test.tsx
+++ b/src/components/date_picker/super_date_picker/pretty_duration.test.tsx
@@ -7,8 +7,7 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-import { testCustomHook } from '../../../test/internal';
+import { render, renderHook } from '../../../test/rtl';
 
 import {
   usePrettyDuration,
@@ -30,9 +29,9 @@ describe('usePrettyDuration', () => {
     const timeFrom = 'now-15m';
     const timeTo = 'now';
     expect(
-      testCustomHook(() =>
+      renderHook(() =>
         usePrettyDuration({ timeFrom, timeTo, quickRanges, dateFormat })
-      ).return
+      ).result.current
     ).toBe('quick range 15 minutes custom display');
   });
 
@@ -40,9 +39,9 @@ describe('usePrettyDuration', () => {
     const timeFrom = 'now-16m';
     const timeTo = 'now';
     expect(
-      testCustomHook(() =>
+      renderHook(() =>
         usePrettyDuration({ timeFrom, timeTo, quickRanges, dateFormat })
-      ).return
+      ).result.current
     ).toBe('Last 16 minutes');
   });
 
@@ -50,9 +49,9 @@ describe('usePrettyDuration', () => {
     const timeFrom = 'now-1M/w';
     const timeTo = 'now';
     expect(
-      testCustomHook(() =>
+      renderHook(() =>
         usePrettyDuration({ timeFrom, timeTo, quickRanges, dateFormat })
-      ).return
+      ).result.current
     ).toBe('Last 1 month rounded to the week');
   });
 
@@ -60,9 +59,9 @@ describe('usePrettyDuration', () => {
     const timeFrom = 'now';
     const timeTo = 'now+16m';
     expect(
-      testCustomHook(() =>
+      renderHook(() =>
         usePrettyDuration({ timeFrom, timeTo, quickRanges, dateFormat })
-      ).return
+      ).result.current
     ).toBe('Next 16 minutes');
   });
 
@@ -70,16 +69,16 @@ describe('usePrettyDuration', () => {
     const timeFrom = 'now-17m';
     const timeTo = 'now-15m';
     expect(
-      testCustomHook(() =>
+      renderHook(() =>
         usePrettyDuration({ timeFrom, timeTo, quickRanges, dateFormat })
-      ).return
+      ).result.current
     ).toBe('~ 17 minutes ago to ~ 15 minutes ago');
   });
 });
 
 describe('PrettyDuration', () => {
   it('renders the returned string from usePrettyDuration', () => {
-    const component = shallow(
+    const { container } = render(
       <PrettyDuration
         timeFrom="now"
         timeTo="now+15m"
@@ -87,11 +86,7 @@ describe('PrettyDuration', () => {
         dateFormat={dateFormat}
       />
     );
-    expect(component).toMatchInlineSnapshot(`
-      <Fragment>
-        Next 15 minutes
-      </Fragment>
-    `);
+    expect(container.firstChild).toMatchInlineSnapshot(`Next 15 minutes`);
   });
 });
 
diff --git a/src/components/date_picker/super_date_picker/pretty_interval.test.ts b/src/components/date_picker/super_date_picker/pretty_interval.test.ts
index fb0d9339966..ad5b563dd8f 100644
--- a/src/components/date_picker/super_date_picker/pretty_interval.test.ts
+++ b/src/components/date_picker/super_date_picker/pretty_interval.test.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../../test/internal';
+import { renderHook } from '@testing-library/react';
 
 import { usePrettyInterval } from './pretty_interval';
 
@@ -17,66 +17,65 @@ const SHORT_HAND = true;
 describe('usePrettyInterval', () => {
   test('off', () => {
     expect(
-      testCustomHook(() => usePrettyInterval(IS_NOT_PAUSED, 0)).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 0)).result.current
     ).toBe('Off');
     expect(
-      testCustomHook(() => usePrettyInterval(IS_PAUSED, 1000)).return
+      renderHook(() => usePrettyInterval(IS_PAUSED, 1000)).result.current
     ).toBe('Off');
   });
 
   test('seconds', () => {
     expect(
-      testCustomHook(() => usePrettyInterval(IS_NOT_PAUSED, 1000)).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 1000)).result.current
     ).toBe('1 second');
     expect(
-      testCustomHook(() => usePrettyInterval(IS_NOT_PAUSED, 15000)).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 15000)).result.current
     ).toBe('15 seconds');
     expect(
-      testCustomHook(() => usePrettyInterval(IS_NOT_PAUSED, 15000, SHORT_HAND))
-        .return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 15000, SHORT_HAND))
+        .result.current
     ).toBe('15 s');
   });
 
   test('minutes', () => {
     expect(
-      testCustomHook(() => usePrettyInterval(IS_NOT_PAUSED, 60000)).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 60000)).result.current
     ).toBe('1 minute');
     expect(
-      testCustomHook(() => usePrettyInterval(IS_NOT_PAUSED, 1800000)).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 1800000)).result.current
     ).toBe('30 minutes');
     expect(
-      testCustomHook(() =>
-        usePrettyInterval(IS_NOT_PAUSED, 1800000, SHORT_HAND)
-      ).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 1800000, SHORT_HAND))
+        .result.current
     ).toBe('30 m');
   });
 
   test('hours', () => {
     expect(
-      testCustomHook(() => usePrettyInterval(IS_NOT_PAUSED, 3600000)).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 3600000)).result.current
     ).toBe('1 hour');
     expect(
-      testCustomHook(() => usePrettyInterval(IS_NOT_PAUSED, 43200000)).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 43200000)).result
+        .current
     ).toBe('12 hours');
     expect(
-      testCustomHook(() =>
-        usePrettyInterval(IS_NOT_PAUSED, 43200000, SHORT_HAND)
-      ).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 43200000, SHORT_HAND))
+        .result.current
     ).toBe('12 h');
   });
 
   test('days', () => {
     expect(
-      testCustomHook(() => usePrettyInterval(IS_NOT_PAUSED, 86400000)).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 86400000)).result
+        .current
     ).toBe('1 day');
     expect(
-      testCustomHook(() => usePrettyInterval(IS_NOT_PAUSED, 86400000 * 2))
-        .return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 86400000 * 2)).result
+        .current
     ).toBe('2 days');
     expect(
-      testCustomHook(() =>
-        usePrettyInterval(IS_NOT_PAUSED, 86400000, SHORT_HAND)
-      ).return
+      renderHook(() => usePrettyInterval(IS_NOT_PAUSED, 86400000, SHORT_HAND))
+        .result.current
     ).toBe('1 d');
   });
 });
diff --git a/src/components/date_picker/super_date_picker/time_options.test.tsx b/src/components/date_picker/super_date_picker/time_options.test.tsx
index 27c70bb3c17..f256fbbdab0 100644
--- a/src/components/date_picker/super_date_picker/time_options.test.tsx
+++ b/src/components/date_picker/super_date_picker/time_options.test.tsx
@@ -7,14 +7,13 @@
  */
 
 import React from 'react';
-import { shallow } from 'enzyme';
-import { testCustomHook } from '../../../test/internal';
+import { render, renderHook } from '../../../test/rtl';
 
 import { useI18nTimeOptions, RenderI18nTimeOptions } from './time_options';
 
 describe('useI18nTimeOptions', () => {
   it('returns a series of time options constants/arrays/objects with i18n strings', () => {
-    const { return: timeOptions } = testCustomHook(useI18nTimeOptions);
+    const timeOptions = renderHook(useI18nTimeOptions).result.current;
 
     expect(timeOptions).toMatchInlineSnapshot(`
       Object {
@@ -188,16 +187,12 @@ describe('useI18nTimeOptions', () => {
 
 describe('RenderI18nTimeOptions', () => {
   it('is a render function that passes the underlying children timeOptions as an arg', () => {
-    const component = shallow(
+    const { container } = render(
       <RenderI18nTimeOptions>
         {({ timeUnitsOptions }) => <>{timeUnitsOptions[0].text}</>}
       </RenderI18nTimeOptions>
     );
 
-    expect(component).toMatchInlineSnapshot(`
-      <Fragment>
-        Seconds
-      </Fragment>
-    `);
+    expect(container.firstChild).toMatchInlineSnapshot(`Seconds`);
   });
 });
diff --git a/src/components/delay_hide/delay_hide.tsx b/src/components/delay_hide/delay_hide.tsx
index 43453cdebf2..3e9d2df980d 100644
--- a/src/components/delay_hide/delay_hide.tsx
+++ b/src/components/delay_hide/delay_hide.tsx
@@ -54,7 +54,7 @@ export class EuiDelayHide extends Component<
     countdownExpired: this.props.hide,
   };
 
-  private timeoutId?: number;
+  private timeoutId?: ReturnType<typeof setTimeout>;
 
   componentDidMount() {
     // if the component begins visible start counting
diff --git a/src/components/empty_prompt/empty_prompt.stories.tsx b/src/components/empty_prompt/empty_prompt.stories.tsx
index b71e1f06a46..dcb64852d34 100644
--- a/src/components/empty_prompt/empty_prompt.stories.tsx
+++ b/src/components/empty_prompt/empty_prompt.stories.tsx
@@ -21,25 +21,24 @@ import { EuiEmptyPrompt, EuiEmptyPromptProps } from './empty_prompt';
 const meta: Meta<EuiEmptyPromptProps> = {
   title: 'EuiEmptyPrompt',
   component: EuiEmptyPrompt,
+  args: {
+    // Component defaults
+    titleSize: 'm',
+    paddingSize: 'l',
+    color: 'plain', // Default is actually 'transparent', but for the purposes of easier testing in Storybook we'll set it to plain
+    layout: 'vertical',
+    hasBorder: false,
+    hasShadow: false,
+  },
 };
 
 export default meta;
 type Story = StoryObj<EuiEmptyPromptProps>;
 
-const componentDefaults: EuiEmptyPromptProps = {
-  titleSize: 'm',
-  paddingSize: 'l',
-  color: 'plain', // The component default is actually 'transparent', but for the purposes of easier testing in Storybook we'll set it to plain
-  layout: 'vertical',
-};
-
 export const Playground: Story = {
   args: {
-    ...componentDefaults,
     title: <h2>Start adding cases</h2>,
     iconType: 'logoSecurity',
-    hasBorder: false,
-    hasShadow: false,
     body: 'Add a new case or change your filter settings.', // Should be wrapped in a `<p>` in production usage, but using a string makes this easier to edit in Storybook controls
     actions: [
       <EuiButton color="primary" fill>
@@ -67,7 +66,6 @@ export const PageTemplate: Story = {
     </EuiPageTemplate>
   ),
   args: {
-    ...componentDefaults,
     title: <h2>Create your first visualization</h2>,
     layout: 'horizontal',
     icon: <EuiImage size="fullWidth" src={illustration} alt="" />,
diff --git a/src/components/error_boundary/error_boundary.stories.tsx b/src/components/error_boundary/error_boundary.stories.tsx
index 54b011ba4a7..f62dffba499 100644
--- a/src/components/error_boundary/error_boundary.stories.tsx
+++ b/src/components/error_boundary/error_boundary.stories.tsx
@@ -11,31 +11,26 @@ import type { Meta, StoryObj } from '@storybook/react';
 
 import { EuiErrorBoundary, EuiErrorBoundaryProps } from './error_boundary';
 
-const ErrorContent = () => {
-  throw new Error(
-    "I'm here to kick butt and chew bubblegum.\n\nAnd I'm all out of gum."
-  );
-};
-
 const meta: Meta<EuiErrorBoundaryProps> = {
   title: 'EuiErrorBoundary',
-  component: () => (
-    <EuiErrorBoundary>
-      <ErrorContent />
-    </EuiErrorBoundary>
-  ),
+  component: EuiErrorBoundary,
   parameters: {
     layout: 'fullscreen',
   },
-  argTypes: {
-    onError: {
-      description:
-        'TODO: extract prop descriptions, defaults, and types from Typescript ',
-    },
-  },
 };
 
 export default meta;
 type Story = StoryObj<EuiErrorBoundaryProps>;
 
-export const Default: Story = {};
+const ErrorContent = () => {
+  throw new Error(
+    "I'm here to kick butt and chew bubblegum.\n\nAnd I'm all out of gum."
+  );
+};
+
+export const Playground: Story = {
+  args: {
+    children: <ErrorContent />,
+    onError: console.log,
+  },
+};
diff --git a/src/components/filter_group/filter_button.stories.tsx b/src/components/filter_group/filter_button.stories.tsx
index 49a2f3802ca..03eb27542b5 100644
--- a/src/components/filter_group/filter_button.stories.tsx
+++ b/src/components/filter_group/filter_button.stories.tsx
@@ -9,20 +9,26 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { BUTTON_COLORS } from '../../themes/amsterdam/global_styling/mixins';
+
 import { EuiFilterGroup } from './filter_group';
 import { EuiFilterButton, EuiFilterButtonProps } from './filter_button';
 
 const meta: Meta<EuiFilterButtonProps> = {
   title: 'EuiFilterButton',
   component: EuiFilterButton as any,
-};
-
-const defaultProps = {
-  hasActiveFilters: true,
-  numFilters: 5,
-  iconType: 'arrowDown',
-  iconSide: 'right' as const,
-  isDisabled: false,
+  argTypes: {
+    color: { control: 'select', options: BUTTON_COLORS },
+  },
+  args: {
+    // Component defaults
+    iconSide: 'right',
+    color: 'text',
+    badgeColor: 'accent',
+    grow: true,
+    isSelected: false,
+    isDisabled: false,
+  },
 };
 
 export default meta;
@@ -34,7 +40,11 @@ export const Playground: Story = {
       <EuiFilterButton {...args}>Filter</EuiFilterButton>
     </EuiFilterGroup>
   ),
-  args: defaultProps,
+  args: {
+    hasActiveFilters: true,
+    numFilters: 5,
+    iconType: 'arrowDown',
+  },
 };
 
 export const MultipleButtons: Story = {
@@ -45,7 +55,11 @@ export const MultipleButtons: Story = {
       <EuiFilterButton {...args}>Filter three</EuiFilterButton>
     </EuiFilterGroup>
   ),
-  args: defaultProps,
+  args: {
+    hasActiveFilters: true,
+    numFilters: 5,
+    iconType: 'arrowDown',
+  },
 };
 
 export const FullWidthAndGrow: Story = {
@@ -78,5 +92,4 @@ export const FullWidthAndGrow: Story = {
       </EuiFilterButton>
     </EuiFilterGroup>
   ),
-  args: { isDisabled: false },
 };
diff --git a/src/components/flex/flex_grid.styles.ts b/src/components/flex/flex_grid.styles.ts
index 329921b8902..2fb5dfd1a0c 100644
--- a/src/components/flex/flex_grid.styles.ts
+++ b/src/components/flex/flex_grid.styles.ts
@@ -55,7 +55,7 @@ export const euiFlexGridStyles = (
         gap: ${euiTheme.size.s};
       `,
       m: css`
-        gap: ${euiTheme.size.m};
+        gap: ${euiTheme.size.base};
       `,
       l: css`
         gap: ${euiTheme.size.l};
diff --git a/src/components/flex/flex_group.styles.ts b/src/components/flex/flex_group.styles.ts
index 1efb18e3318..3abdc304399 100644
--- a/src/components/flex/flex_group.styles.ts
+++ b/src/components/flex/flex_group.styles.ts
@@ -40,7 +40,7 @@ export const euiFlexGroupStyles = (euiThemeContext: UseEuiTheme) => {
         gap: ${euiTheme.size.s};
       `,
       m: css`
-        gap: ${euiTheme.size.m};
+        gap: ${euiTheme.size.base};
       `,
       l: css`
         gap: ${euiTheme.size.l};
diff --git a/src/components/flyout/__snapshots__/flyout.test.tsx.snap b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
index ae4a5bab61e..f114f5e1070 100644
--- a/src/components/flyout/__snapshots__/flyout.test.tsx.snap
+++ b/src/components/flyout/__snapshots__/flyout.test.tsx.snap
@@ -758,6 +758,27 @@ Array [
 ]
 `;
 
+exports[`EuiFlyout props push flyouts renders 1`] = `
+<div
+  class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-push-right-noAnimation-right"
+  data-test-subj="flyout"
+>
+  <button
+    aria-label="Close this dialog"
+    class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
+    data-test-subj="euiFlyoutCloseButton"
+    type="button"
+  >
+    <span
+      aria-hidden="true"
+      class="euiButtonIcon__icon"
+      color="inherit"
+      data-euiicon-type="cross"
+    />
+  </button>
+</div>
+`;
+
 exports[`EuiFlyout props sides left is rendered 1`] = `
 Array [
   <div>
@@ -1047,42 +1068,6 @@ Array [
 ]
 `;
 
-exports[`EuiFlyout props type=push is rendered 1`] = `
-Array [
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />,
-  <div
-    data-focus-lock-disabled="disabled"
-  >
-    <div
-      class="euiFlyout emotion-euiFlyout-l-m-noMaxWidth-push-right-right"
-    >
-      <button
-        aria-label="Close this dialog"
-        class="euiButtonIcon euiFlyout__closeButton emotion-euiButtonIcon-xs-empty-text-euiFlyout__closeButton-inside"
-        data-test-subj="euiFlyoutCloseButton"
-        type="button"
-      >
-        <span
-          aria-hidden="true"
-          class="euiButtonIcon__icon"
-          color="inherit"
-          data-euiicon-type="cross"
-        />
-      </button>
-    </div>
-  </div>,
-  <div
-    data-focus-guard="true"
-    style="width: 1px; height: 0px; padding: 0px; overflow: hidden; position: fixed; top: 1px; left: 1px;"
-    tabindex="-1"
-  />,
-]
-`;
-
 exports[`EuiFlyout renders extra screen reader instructions when fixed EuiHeaders headers exist on the page 1`] = `
 <body
   class="euiBody--headerIsFixed euiBody--hasFlyout"
diff --git a/src/components/flyout/flyout.stories.tsx b/src/components/flyout/flyout.stories.tsx
new file mode 100644
index 00000000000..ab4ded32343
--- /dev/null
+++ b/src/components/flyout/flyout.stories.tsx
@@ -0,0 +1,102 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import type { Meta, StoryObj } from '@storybook/react';
+import React, { useState } from 'react';
+import { hideStorybookControls } from '../../../.storybook/utils';
+
+import { EuiButton, EuiText } from '../index';
+
+import { EuiFlyout, EuiFlyoutProps, EuiFlyoutBody } from './index';
+
+const meta: Meta<EuiFlyoutProps> = {
+  title: 'EuiFlyout',
+  component: EuiFlyout,
+  args: {
+    // Component defaults
+    type: 'overlay',
+    side: 'right',
+    size: 'm',
+    paddingSize: 'l',
+    pushMinBreakpoint: 'l',
+    closeButtonPosition: 'inside',
+    hideCloseButton: false,
+    ownFocus: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiFlyoutProps>;
+
+const StatefulFlyout = (props: Partial<EuiFlyoutProps>) => {
+  const [isOpen, setIsOpen] = useState(true);
+  return (
+    <>
+      <EuiButton size="s" onClick={() => setIsOpen(!isOpen)}>
+        Toggle flyout
+      </EuiButton>
+      {isOpen && <EuiFlyout {...props} onClose={() => setIsOpen(false)} />}
+    </>
+  );
+};
+
+export const Playground: Story = {
+  render: ({ ...args }) => <StatefulFlyout {...args} />,
+};
+
+export const PushFlyouts: Story = {
+  render: ({ ...args }) => {
+    const fillerText = (
+      <EuiText>
+        <p>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu
+          condimentum ipsum, nec ornare metus. Sed egestas elit nec placerat
+          suscipit. Cras pulvinar nisi eget enim sodales fringilla. Aliquam
+          lobortis lorem at ornare aliquet. Mauris laoreet laoreet mollis.
+          Pellentesque aliquet tortor dui, non luctus turpis pulvinar vitae.
+          Nunc ultrices scelerisque erat eu rutrum. Nam at ligula enim. Ut nec
+          nisl faucibus, euismod neque ut, aliquam nisl. Donec eu ante ut arcu
+          rutrum blandit nec ac nisl. In elementum id enim vitae aliquam. In
+          sagittis, neque vitae ultricies interdum, sapien justo efficitur
+          ligula, sit amet fermentum nisl magna sit amet turpis. Nulla facilisi.
+          Proin nec viverra mi. Morbi dolor arcu, ornare non consequat et,
+          viverra dapibus tellus.
+        </p>
+      </EuiText>
+    );
+    return (
+      <>
+        <StatefulFlyout {...args}>
+          <EuiFlyoutBody>{fillerText}</EuiFlyoutBody>
+        </StatefulFlyout>
+        {fillerText}
+      </>
+    );
+  },
+  args: {
+    type: 'push',
+    pushAnimation: false,
+    pushMinBreakpoint: 'xs',
+  },
+  argTypes: hideStorybookControls([
+    'onClose',
+    'aria-label',
+    'as',
+    'closeButtonPosition',
+    'closeButtonProps',
+    'focusTrapProps',
+    'hideCloseButton',
+    'includeFixedHeadersInFocusTrap',
+    'maskProps',
+    'maxWidth',
+    'outsideClickCloses',
+    'ownFocus',
+    'paddingSize',
+    'style',
+  ]),
+};
diff --git a/src/components/flyout/flyout.styles.ts b/src/components/flyout/flyout.styles.ts
index d24faac1f0d..96dc5c09540 100644
--- a/src/components/flyout/flyout.styles.ts
+++ b/src/components/flyout/flyout.styles.ts
@@ -158,20 +158,22 @@ export const euiFlyoutStyles = (euiThemeContext: UseEuiTheme) => {
     overlay: css`
       ${euiShadowXLarge(euiThemeContext)}
     `,
-    push: css`
-      clip-path: none;
-      /* Don't animate on loading a docked nav */
-      animation-duration: 0s !important; /* stylelint-disable-line declaration-no-important */
-      /* Make sure the header shadows are above */
-      z-index: ${Number(euiTheme.levels.flyout) - 1};
-    `,
-    pushSide: {
+    push: {
+      push: css`
+        clip-path: none;
+        /* Make sure the header shadows are above */
+        z-index: ${Number(euiTheme.levels.flyout) - 1};
+      `,
       right: css`
         ${logicalCSS('border-left', euiTheme.border.thick)}
       `,
       left: css`
         ${logicalCSS('border-right', euiTheme.border.thick)}
       `,
+      noAnimation: css`
+        /* Don't animate on loading a docked nav */
+        animation-duration: 0s !important; /* stylelint-disable-line declaration-no-important */
+      `,
     },
 
     // Padding
diff --git a/src/components/flyout/flyout.test.tsx b/src/components/flyout/flyout.test.tsx
index b0b3480e654..316d426b4a0 100644
--- a/src/components/flyout/flyout.test.tsx
+++ b/src/components/flyout/flyout.test.tsx
@@ -139,15 +139,34 @@ describe('EuiFlyout', () => {
       });
     });
 
-    describe('type=push', () => {
-      test('is rendered', () => {
-        const component = mount(
-          <EuiFlyout onClose={() => {}} type="push" pushMinBreakpoint="xs" />
+    describe('push flyouts', () => {
+      it('renders', () => {
+        const { getByTestSubject } = render(
+          <EuiFlyout
+            data-test-subj="flyout"
+            onClose={() => {}}
+            type="push"
+            pushMinBreakpoint="xs"
+          />
         );
 
-        expect(
-          takeMountedSnapshot(component, { hasArrayOutput: true })
-        ).toMatchSnapshot();
+        expect(getByTestSubject('flyout')).toMatchSnapshot();
+      });
+
+      it('can render with animations', () => {
+        const { getByTestSubject } = render(
+          <EuiFlyout
+            data-test-subj="flyout"
+            onClose={() => {}}
+            type="push"
+            pushMinBreakpoint="xs"
+            pushAnimation={true}
+          />
+        );
+
+        expect(getByTestSubject('flyout').className).not.toContain(
+          'noAnimation'
+        );
       });
     });
 
diff --git a/src/components/flyout/flyout.tsx b/src/components/flyout/flyout.tsx
index b506c50a07b..a6ac5deb1fb 100644
--- a/src/components/flyout/flyout.tsx
+++ b/src/components/flyout/flyout.tsx
@@ -9,6 +9,8 @@
 import React, {
   useEffect,
   useRef,
+  useMemo,
+  useCallback,
   useState,
   forwardRef,
   ComponentPropsWithRef,
@@ -131,6 +133,11 @@ interface _EuiFlyoutProps {
    * @default l
    */
   pushMinBreakpoint?: EuiBreakpointSize;
+  /**
+   * Enables a slide in animation on push flyouts
+   * @default false
+   */
+  pushAnimation?: boolean;
   style?: CSSProperties;
   /**
    * Object of props passed to EuiFocusTrap.
@@ -181,7 +188,8 @@ export const EuiFlyout = forwardRef(
       type = 'overlay',
       outsideClickCloses,
       pushMinBreakpoint = 'l',
-      focusTrapProps: _focusTrapProps = {},
+      pushAnimation = false,
+      focusTrapProps: _focusTrapProps,
       includeFixedHeadersInFocusTrap = true,
       'aria-describedby': _ariaDescribedBy,
       ...rest
@@ -216,20 +224,18 @@ export const EuiFlyout = forwardRef(
       /**
        * Accomodate for the `isPushed` state by adding padding to the body equal to the width of the element
        */
-      if (type === 'push') {
-        if (isPushed) {
-          if (side === 'right') {
-            document.body.style.paddingRight = `${dimensions.width}px`;
-          } else if (side === 'left') {
-            document.body.style.paddingLeft = `${dimensions.width}px`;
-          }
+      if (isPushed) {
+        if (side === 'right') {
+          document.body.style.paddingRight = `${dimensions.width}px`;
+        } else if (side === 'left') {
+          document.body.style.paddingLeft = `${dimensions.width}px`;
         }
       }
 
       return () => {
         document.body.classList.remove('euiBody--hasFlyout');
 
-        if (type === 'push') {
+        if (isPushed) {
           if (side === 'right') {
             document.body.style.paddingRight = '';
           } else if (side === 'left') {
@@ -237,28 +243,36 @@ export const EuiFlyout = forwardRef(
           }
         }
       };
-    }, [type, side, dimensions, isPushed]);
+    }, [side, dimensions, isPushed]);
 
     /**
      * ESC key closes flyout (always?)
      */
-    const onKeyDown = (event: KeyboardEvent) => {
-      if (!isPushed && event.key === keys.ESCAPE) {
-        event.preventDefault();
-        onClose(event);
-      }
-    };
+    const onKeyDown = useCallback(
+      (event: KeyboardEvent) => {
+        if (!isPushed && event.key === keys.ESCAPE) {
+          event.preventDefault();
+          onClose(event);
+        }
+      },
+      [onClose, isPushed]
+    );
 
     /**
      * Set inline styles
      */
-    let newStyle = style;
-    if (typeof maxWidth !== 'boolean') {
-      newStyle = { ...newStyle, ...logicalStyle('max-width', maxWidth) };
-    }
-    if (!isEuiFlyoutSizeNamed(size)) {
-      newStyle = { ...newStyle, ...logicalStyle('width', size) };
-    }
+    const inlineStyles = useMemo(() => {
+      const widthStyle =
+        !isEuiFlyoutSizeNamed(size) && logicalStyle('width', size);
+      const maxWidthStyle =
+        typeof maxWidth !== 'boolean' && logicalStyle('max-width', maxWidth);
+
+      return {
+        ...style,
+        ...widthStyle,
+        ...maxWidthStyle,
+      };
+    }, [style, maxWidth, size]);
 
     const euiTheme = useEuiTheme();
     const styles = euiFlyoutStyles(euiTheme);
@@ -268,15 +282,17 @@ export const EuiFlyout = forwardRef(
       styles.paddingSizes[paddingSize],
       isEuiFlyoutSizeNamed(size) && styles[size],
       maxWidth === false && styles.noMaxWidth,
-      styles[type],
-      type === 'push' && styles.pushSide[side],
+      isPushed ? styles.push.push : styles.overlay,
+      isPushed && styles.push[side],
+      isPushed && !pushAnimation && styles.push.noAnimation,
       styles[side],
     ];
 
     const classes = classnames('euiFlyout', className);
 
-    let closeButton;
-    if (onClose && !hideCloseButton) {
+    const closeButton = useMemo(() => {
+      if (hideCloseButton || !onClose) return null;
+
       const closeButtonClasses = classnames(
         'euiFlyout__closeButton',
         closeButtonProps?.className
@@ -291,7 +307,7 @@ export const EuiFlyout = forwardRef(
         closeButtonProps?.css,
       ];
 
-      closeButton = (
+      return (
         <EuiI18n token="euiFlyout.closeAriaLabel" default="Close this dialog">
           {(closeAriaLabel: string) => (
             <EuiButtonIcon
@@ -311,7 +327,14 @@ export const EuiFlyout = forwardRef(
           )}
         </EuiI18n>
       );
-    }
+    }, [
+      onClose,
+      hideCloseButton,
+      closeButtonPosition,
+      closeButtonProps,
+      side,
+      euiTheme,
+    ]);
 
     /*
      * If not disabled, automatically add fixed EuiHeaders as shards
@@ -340,10 +363,13 @@ export const EuiFlyout = forwardRef(
       }
     }, [includeFixedHeadersInFocusTrap, resizeRef]);
 
-    const focusTrapProps: EuiFlyoutProps['focusTrapProps'] = {
-      ..._focusTrapProps,
-      shards: [...fixedHeaders, ...(_focusTrapProps.shards || [])],
-    };
+    const focusTrapProps: EuiFlyoutProps['focusTrapProps'] = useMemo(
+      () => ({
+        ..._focusTrapProps,
+        shards: [...fixedHeaders, ...(_focusTrapProps?.shards || [])],
+      }),
+      [fixedHeaders, _focusTrapProps]
+    );
 
     /*
      * Provide meaningful screen reader instructions/details
@@ -388,19 +414,22 @@ export const EuiFlyout = forwardRef(
      * or if `outsideClickCloses={true}` to close on clicks that target
      * (both mousedown and mouseup) the overlay mask.
      */
-    const onClickOutside = (event: MouseEvent | TouchEvent) => {
-      // Do not close the flyout for any external click
-      if (outsideClickCloses === false) return undefined;
-      if (hasOverlayMask) {
-        // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
-        if (event.target === maskRef.current) return onClose(event);
-      } else {
-        // No overlay mask is present, so any outside clicks should close the flyout
-        if (outsideClickCloses === true) return onClose(event);
-      }
-      // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
-      return undefined;
-    };
+    const onClickOutside = useCallback(
+      (event: MouseEvent | TouchEvent) => {
+        // Do not close the flyout for any external click
+        if (outsideClickCloses === false) return undefined;
+        if (hasOverlayMask) {
+          // The overlay mask is present, so only clicks on the mask should close the flyout, regardless of outsideClickCloses
+          if (event.target === maskRef.current) return onClose(event);
+        } else {
+          // No overlay mask is present, so any outside clicks should close the flyout
+          if (outsideClickCloses === true) return onClose(event);
+        }
+        // Otherwise if ownFocus is false and outsideClickCloses is undefined, outside clicks should not close the flyout
+        return undefined;
+      },
+      [onClose, hasOverlayMask, outsideClickCloses]
+    );
 
     let flyout = (
       <EuiFocusTrap
@@ -413,7 +442,7 @@ export const EuiFlyout = forwardRef(
         <Element
           className={classes}
           css={cssStyles}
-          style={newStyle}
+          style={inlineStyles}
           ref={setRef}
           {...(rest as ComponentPropsWithRef<T>)}
           role={!isPushed ? 'dialog' : rest.role}
diff --git a/src/components/header/header.stories.tsx b/src/components/header/header.stories.tsx
index 0e458880861..bb0b4a5bae8 100644
--- a/src/components/header/header.stories.tsx
+++ b/src/components/header/header.stories.tsx
@@ -26,18 +26,18 @@ import { EuiHeader, EuiHeaderProps } from './header';
 const meta: Meta<EuiHeaderProps> = {
   title: 'EuiHeader',
   component: EuiHeader,
-};
-
-export default meta;
-type Story = StoryObj<EuiHeaderProps>;
-
-export const Playground: Story = {
   args: {
+    // Component defaults
     position: 'static',
     theme: 'default',
   },
 };
 
+export default meta;
+type Story = StoryObj<EuiHeaderProps>;
+
+export const Playground: Story = {};
+
 export const Sections: Story = {
   args: {
     position: 'fixed',
diff --git a/src/components/header/header_alert/header_alert.stories.tsx b/src/components/header/header_alert/header_alert.stories.tsx
index 1ffe3335566..91749eee728 100644
--- a/src/components/header/header_alert/header_alert.stories.tsx
+++ b/src/components/header/header_alert/header_alert.stories.tsx
@@ -40,26 +40,24 @@ import { EuiHeaderAlert, EuiHeaderAlertProps } from './header_alert';
 const meta: Meta<EuiHeaderAlertProps> = {
   title: 'EuiHeaderAlert',
   component: EuiHeaderAlert,
+  args: {
+    // Not default props, set for demo purposes
+    title: '7.0 release notes',
+    date: 'January 1st 1970',
+    text: 'Stay up-to-date on the latest and greatest features.',
+    action: (
+      <EuiLink href="#" target="_blank">
+        Check out the docs
+      </EuiLink>
+    ),
+    badge: <EuiBadge color="hollow">7.0</EuiBadge>,
+  },
 };
 
 export default meta;
 type Story = StoryObj<EuiHeaderAlertProps>;
 
-const defaultProps = {
-  title: '7.0 release notes',
-  date: 'January 1st 1970',
-  text: 'Stay up-to-date on the latest and greatest features.',
-  action: (
-    <EuiLink href="#" target="_blank">
-      Check out the docs
-    </EuiLink>
-  ),
-  badge: <EuiBadge color="hollow">7.0</EuiBadge>,
-};
-
-export const Playground: Story = {
-  args: defaultProps,
-};
+export const Playground: Story = {};
 
 /**
  * Flyout example
@@ -121,7 +119,6 @@ const Flyout = (props: EuiHeaderAlertProps) => {
 };
 export const FlyoutExample: Story = {
   render: ({ ...args }) => <Flyout {...args} />,
-  args: defaultProps,
 };
 
 /**
@@ -182,5 +179,4 @@ const Popover = (props: any) => {
 };
 export const PopoverExample: Story = {
   render: ({ ...args }) => <Popover {...args} />,
-  args: defaultProps,
 };
diff --git a/src/components/header/header_links/header_links.stories.tsx b/src/components/header/header_links/header_links.stories.tsx
index 4a07d685a53..35ae96b895b 100644
--- a/src/components/header/header_links/header_links.stories.tsx
+++ b/src/components/header/header_links/header_links.stories.tsx
@@ -17,6 +17,11 @@ import { EuiHeaderLinks, EuiHeaderLinksProps } from './header_links';
 const meta: Meta<EuiHeaderLinksProps> = {
   title: 'EuiHeaderLinks',
   component: EuiHeaderLinks,
+  args: {
+    // Component defaults
+    gutterSize: 's',
+    popoverBreakpoints: ['xs', 's'],
+  },
 };
 
 export default meta;
@@ -36,8 +41,4 @@ export const Playground: Story = {
       </EuiHeaderSection>
     </EuiHeader>
   ),
-  args: {
-    gutterSize: 's',
-    popoverBreakpoints: ['xs', 's'],
-  },
 };
diff --git a/src/components/header/header_logo/header_logo.stories.tsx b/src/components/header/header_logo/header_logo.stories.tsx
index 32eb29bf3ca..2ba258a2b84 100644
--- a/src/components/header/header_logo/header_logo.stories.tsx
+++ b/src/components/header/header_logo/header_logo.stories.tsx
@@ -15,6 +15,11 @@ import { EuiHeaderLogo, EuiHeaderLogoProps } from './header_logo';
 const meta: Meta<EuiHeaderLogoProps> = {
   title: 'EuiHeaderLogo',
   component: EuiHeaderLogo,
+  args: {
+    // Not default props, set for demo purposes
+    iconType: 'logoElastic',
+    children: 'Elastic',
+  },
 };
 
 export default meta;
@@ -28,10 +33,6 @@ export const Playground: Story = {
       </EuiHeaderSectionItem>
     </EuiHeader>
   ),
-  args: {
-    iconType: 'logoElastic',
-    iconTitle: 'Elastic',
-  },
 };
 
 export const WithText: Story = {
@@ -42,8 +43,4 @@ export const WithText: Story = {
       </EuiHeaderSectionItem>
     </EuiHeader>
   ),
-  args: {
-    iconType: 'logoElastic',
-    children: 'Elastic',
-  },
 };
diff --git a/src/components/icon/__snapshots__/icon.test.tsx.snap b/src/components/icon/__snapshots__/icon.test.tsx.snap
index 28179a5e9b0..d3d2d347700 100644
--- a/src/components/icon/__snapshots__/icon.test.tsx.snap
+++ b/src/components/icon/__snapshots__/icon.test.tsx.snap
@@ -4617,7 +4617,7 @@ exports[`EuiIcon props type logoApache is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <defs>
-    <linearGradient
+    <lineargradient
       id="logo_apache_generated-id_a"
       x1="21.902%"
       x2="141.879%"
@@ -4636,8 +4636,8 @@ exports[`EuiIcon props type logoApache is rendered 1`] = `
         offset="83.83%"
         stop-color="#E97826"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_apache_generated-id_b"
       x1="-217.651%"
       x2="74.743%"
@@ -4660,8 +4660,8 @@ exports[`EuiIcon props type logoApache is rendered 1`] = `
         offset="100%"
         stop-color="#E97826"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_apache_generated-id_c"
       x1="-80.044%"
       x2="146.24%"
@@ -4684,8 +4684,8 @@ exports[`EuiIcon props type logoApache is rendered 1`] = `
         offset="100%"
         stop-color="#E97826"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_apache_generated-id_d"
       x1="-18.316%"
       x2="165.002%"
@@ -4708,8 +4708,8 @@ exports[`EuiIcon props type logoApache is rendered 1`] = `
         offset="94.87%"
         stop-color="#CD2032"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_apache_generated-id_e"
       x1="-109.701%"
       x2="64.617%"
@@ -4732,8 +4732,8 @@ exports[`EuiIcon props type logoApache is rendered 1`] = `
         offset="100%"
         stop-color="#E97826"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_apache_generated-id_f"
       x1="-34.88%"
       x2="110.599%"
@@ -4756,8 +4756,8 @@ exports[`EuiIcon props type logoApache is rendered 1`] = `
         offset="100%"
         stop-color="#E97826"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_apache_generated-id_g"
       x1="-13.673%"
       x2="117.858%"
@@ -4780,7 +4780,7 @@ exports[`EuiIcon props type logoApache is rendered 1`] = `
         offset="94.87%"
         stop-color="#CD2032"
       />
-    </linearGradient>
+    </lineargradient>
   </defs>
   <g
     fill="none"
@@ -5144,7 +5144,7 @@ exports[`EuiIcon props type logoDropwizard is rendered 1`] = `
     fill="#24265D"
   />
   <defs>
-    <linearGradient
+    <lineargradient
       gradientUnits="userSpaceOnUse"
       id="logo_dropwizard_generated-id_a"
       x1="33.473"
@@ -5167,8 +5167,8 @@ exports[`EuiIcon props type logoDropwizard is rendered 1`] = `
         offset="1"
         stop-color="#252761"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       gradientUnits="userSpaceOnUse"
       id="logo_dropwizard_generated-id_b"
       x1="21.028"
@@ -5191,7 +5191,7 @@ exports[`EuiIcon props type logoDropwizard is rendered 1`] = `
         offset="1"
         stop-color="#252761"
       />
-    </linearGradient>
+    </lineargradient>
   </defs>
 </svg>
 `;
@@ -5380,8 +5380,8 @@ exports[`EuiIcon props type logoGCP is rendered 1`] = `
   role="img"
   viewBox="0 0 32 32"
   width="32"
-  xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
 >
   <defs>
     <path
@@ -5422,7 +5422,7 @@ exports[`EuiIcon props type logoGCP is rendered 1`] = `
         id="logo_gcp_generated-id_b"
       >
         <use
-          href="#logo_gcp_generated-id_a"
+          xlink:href="#logo_gcp_generated-id_a"
         />
       </mask>
       <path
@@ -5684,8 +5684,8 @@ exports[`EuiIcon props type logoGoogleG is rendered 1`] = `
   role="img"
   viewBox="0 0 32 32"
   width="32"
-  xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
 >
   <defs>
     <path
@@ -5717,7 +5717,7 @@ exports[`EuiIcon props type logoGoogleG is rendered 1`] = `
         id="logo_google_g_generated-id_b"
       >
         <use
-          href="#logo_google_g_generated-id_a"
+          xlink:href="#logo_google_g_generated-id_a"
         />
       </mask>
       <path
@@ -5735,7 +5735,7 @@ exports[`EuiIcon props type logoGoogleG is rendered 1`] = `
         id="logo_google_g_generated-id_d"
       >
         <use
-          href="#logo_google_g_generated-id_c"
+          xlink:href="#logo_google_g_generated-id_c"
         />
       </mask>
       <path
@@ -5753,7 +5753,7 @@ exports[`EuiIcon props type logoGoogleG is rendered 1`] = `
         id="logo_google_g_generated-id_f"
       >
         <use
-          href="#logo_google_g_generated-id_e"
+          xlink:href="#logo_google_g_generated-id_e"
         />
       </mask>
       <path
@@ -5771,7 +5771,7 @@ exports[`EuiIcon props type logoGoogleG is rendered 1`] = `
         id="logo_google_g_generated-id_h"
       >
         <use
-          href="#logo_google_g_generated-id_g"
+          xlink:href="#logo_google_g_generated-id_g"
         />
       </mask>
       <path
@@ -5861,14 +5861,14 @@ exports[`EuiIcon props type logoHAproxy is rendered 1`] = `
     />
   </g>
   <defs>
-    <clipPath
+    <clippath
       id="logo_haproxy_generated-id_a"
     >
       <path
         d="M0 0h32v32H0V0Z"
         fill="#fff"
       />
-    </clipPath>
+    </clippath>
   </defs>
 </svg>
 `;
@@ -5886,7 +5886,7 @@ exports[`EuiIcon props type logoIBM is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <defs>
-    <linearGradient
+    <lineargradient
       id="logo_ibm_generated-id_a"
       x1="8.005%"
       x2="53.33%"
@@ -5907,8 +5907,8 @@ exports[`EuiIcon props type logoIBM is rendered 1`] = `
         offset="100%"
         stop-color="#21A2EF"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_ibm_generated-id_b"
       x1="19.496%"
       x2="71.309%"
@@ -5924,8 +5924,8 @@ exports[`EuiIcon props type logoIBM is rendered 1`] = `
         stop-color="#6EAFF1"
         stop-opacity="0"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_ibm_generated-id_c"
       x1="21.909%"
       x2="21.909%"
@@ -5950,8 +5950,8 @@ exports[`EuiIcon props type logoIBM is rendered 1`] = `
         stop-color="#5CCFE5"
         stop-opacity="0"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_ibm_generated-id_d"
       x1="96.205%"
       x2="-1.172%"
@@ -5976,8 +5976,8 @@ exports[`EuiIcon props type logoIBM is rendered 1`] = `
         stop-color="#5CCFE5"
         stop-opacity="0"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_ibm_generated-id_e"
       x1="9.408%"
       x2="80.589%"
@@ -5992,7 +5992,7 @@ exports[`EuiIcon props type logoIBM is rendered 1`] = `
         offset="100%"
         stop-color="#21A1EF"
       />
-    </linearGradient>
+    </lineargradient>
   </defs>
   <g
     fill="none"
@@ -6213,7 +6213,7 @@ exports[`EuiIcon props type logoMemcached is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <defs>
-    <radialGradient
+    <radialgradient
       cx="41.406%"
       cy="42.708%"
       fx="41.406%"
@@ -6229,8 +6229,8 @@ exports[`EuiIcon props type logoMemcached is rendered 1`] = `
         offset="100%"
         stop-color="#C83737"
       />
-    </radialGradient>
-    <radialGradient
+    </radialgradient>
+    <radialgradient
       cx="44.271%"
       cy="42.708%"
       fx="44.271%"
@@ -6246,8 +6246,8 @@ exports[`EuiIcon props type logoMemcached is rendered 1`] = `
         offset="100%"
         stop-color="#C83737"
       />
-    </radialGradient>
-    <linearGradient
+    </radialgradient>
+    <lineargradient
       id="logo_memcached_generated-id_a"
       x1="50%"
       x2="50%"
@@ -6262,8 +6262,8 @@ exports[`EuiIcon props type logoMemcached is rendered 1`] = `
         offset="100%"
         stop-color="#80716D"
       />
-    </linearGradient>
-    <linearGradient
+    </lineargradient>
+    <lineargradient
       id="logo_memcached_generated-id_b"
       x1="88.778%"
       x2="30.149%"
@@ -6278,7 +6278,7 @@ exports[`EuiIcon props type logoMemcached is rendered 1`] = `
         offset="100%"
         stop-color="#2EA19E"
       />
-    </linearGradient>
+    </lineargradient>
   </defs>
   <g
     fill="none"
@@ -6530,8 +6530,8 @@ exports[`EuiIcon props type logoPhp is rendered 1`] = `
   role="img"
   viewBox="0 0 32 32"
   width="32"
-  xlink="http://www.w3.org/1999/xlink"
   xmlns="http://www.w3.org/2000/svg"
+  xmlns:xlink="http://www.w3.org/1999/xlink"
 >
   <defs>
     <path
@@ -6546,7 +6546,7 @@ exports[`EuiIcon props type logoPhp is rendered 1`] = `
       d="M0 17.43h30.987V0H0z"
       id="logo_php_generated-id_f"
     />
-    <radialGradient
+    <radialgradient
       cx="30.02%"
       cy="82.422%"
       fx="30.02%"
@@ -6571,7 +6571,7 @@ exports[`EuiIcon props type logoPhp is rendered 1`] = `
         offset="100%"
         stop-color="#484C89"
       />
-    </radialGradient>
+    </radialgradient>
   </defs>
   <g
     fill="none"
@@ -6586,7 +6586,7 @@ exports[`EuiIcon props type logoPhp is rendered 1`] = `
         id="logo_php_generated-id_c"
       >
         <use
-          href="#logo_php_generated-id_a"
+          xlink:href="#logo_php_generated-id_a"
         />
       </mask>
       <g
@@ -6604,7 +6604,7 @@ exports[`EuiIcon props type logoPhp is rendered 1`] = `
       id="logo_php_generated-id_e"
     >
       <use
-        href="#logo_php_generated-id_d"
+        xlink:href="#logo_php_generated-id_d"
       />
     </mask>
     <g
@@ -6621,7 +6621,7 @@ exports[`EuiIcon props type logoPhp is rendered 1`] = `
       id="logo_php_generated-id_g"
     >
       <use
-        href="#logo_php_generated-id_f"
+        xlink:href="#logo_php_generated-id_f"
       />
     </mask>
     <g
@@ -9675,7 +9675,13 @@ exports[`EuiIcon props type tokenDenseVector is rendered 1`] = `
   xmlns="http://www.w3.org/2000/svg"
 >
   <path
-    d="M4.154 12V4h2.713v1.14H5.658v5.72h1.21V12H4.153Zm7.692-8v8H9.133v-1.14h1.209V5.14h-1.21V4h2.714Z"
+    d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z"
+  />
+  <path
+    d="M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  />
+  <path
+    d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"
   />
 </svg>
 `;
@@ -10501,6 +10507,54 @@ exports[`EuiIcon props type tokenVariable is rendered 1`] = `
 </svg>
 `;
 
+exports[`EuiIcon props type tokenVectorDense is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="tokenVectorDense"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z"
+  />
+  <path
+    d="M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  />
+  <path
+    d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"
+  />
+</svg>
+`;
+
+exports[`EuiIcon props type tokenVectorSparse is rendered 1`] = `
+<svg
+  aria-hidden="true"
+  class="euiIcon emotion-euiIcon-m-isLoaded"
+  data-icon-type="tokenVectorSparse"
+  data-is-loaded="true"
+  height="16"
+  role="img"
+  viewBox="0 0 16 16"
+  width="16"
+  xmlns="http://www.w3.org/2000/svg"
+>
+  <path
+    d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  />
+  <path
+    d="M6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  />
+  <path
+    d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"
+  />
+</svg>
+`;
+
 exports[`EuiIcon props type training is rendered 1`] = `
 <svg
   aria-hidden="true"
diff --git a/src/components/icon/assets/tokenVectorDense.tsx b/src/components/icon/assets/tokenVectorDense.tsx
new file mode 100644
index 00000000000..f0cdc9f9570
--- /dev/null
+++ b/src/components/icon/assets/tokenVectorDense.tsx
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import type { SVGProps } from 'react';
+interface SVGRProps {
+  title?: string;
+  titleId?: string;
+}
+const EuiIconTokenVectorDense = ({
+  title,
+  titleId,
+  ...props
+}: SVGProps<SVGSVGElement> & SVGRProps) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={16}
+    height={16}
+    viewBox="0 0 16 16"
+    aria-labelledby={titleId}
+    {...props}
+  >
+    {title ? <title id={titleId}>{title}</title> : null}
+    <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z" />
+    <path d="M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
+    <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z" />
+  </svg>
+);
+export const icon = EuiIconTokenVectorDense;
diff --git a/src/components/icon/assets/tokenDenseVector.tsx b/src/components/icon/assets/tokenVectorSparse.tsx
similarity index 66%
rename from src/components/icon/assets/tokenDenseVector.tsx
rename to src/components/icon/assets/tokenVectorSparse.tsx
index 928303a39eb..f1e2a713b7b 100644
--- a/src/components/icon/assets/tokenDenseVector.tsx
+++ b/src/components/icon/assets/tokenVectorSparse.tsx
@@ -14,7 +14,7 @@ interface SVGRProps {
   title?: string;
   titleId?: string;
 }
-const EuiIconTokenDenseVector = ({
+const EuiIconTokenVectorSparse = ({
   title,
   titleId,
   ...props
@@ -28,7 +28,9 @@ const EuiIconTokenDenseVector = ({
     {...props}
   >
     {title ? <title id={titleId}>{title}</title> : null}
-    <path d="M4.154 12V4h2.713v1.14H5.658v5.72h1.21V12H4.153Zm7.692-8v8H9.133v-1.14h1.209V5.14h-1.21V4h2.714Z" />
+    <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
+    <path d="M6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" />
+    <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z" />
   </svg>
 );
-export const icon = EuiIconTokenDenseVector;
+export const icon = EuiIconTokenVectorSparse;
diff --git a/src/components/icon/icon.test.tsx b/src/components/icon/icon.test.tsx
index d8b15655b44..5080fade0fb 100644
--- a/src/components/icon/icon.test.tsx
+++ b/src/components/icon/icon.test.tsx
@@ -7,10 +7,13 @@
  */
 
 import React from 'react';
-import { mount } from 'enzyme';
+import { act, waitFor } from '@testing-library/react';
+import { render } from '../../test/rtl';
 import { requiredProps } from '../../test/required_props';
 import { shouldRenderCustomStyles } from '../../test/internal';
-import cheerio from 'cheerio';
+
+import { PropsOf } from '../common';
+
 import {
   EuiIcon,
   SIZES,
@@ -19,7 +22,6 @@ import {
   clearIconComponentCache,
   appendIconComponentCache,
 } from './icon';
-import { PropsOf } from '../common';
 import { icon as EuiIconVideoPlayer } from './assets/videoPlayer';
 
 jest.mock('./icon', () => {
@@ -28,50 +30,21 @@ jest.mock('./icon', () => {
 
 beforeEach(() => clearIconComponentCache());
 
-const prettyHtml = cheerio.load('');
-
-function testIcon(props: PropsOf<typeof EuiIcon>) {
-  return () => {
-    expect.assertions(1);
-    return new Promise<void>((resolve) => {
-      const onIconLoad = () => {
-        component.update();
-        expect(prettyHtml(component.html())).toMatchSnapshot();
-        resolve();
-      };
-      const component = mount(<EuiIcon {...props} onIconLoad={onIconLoad} />);
-    });
-  };
-}
-
-describe('EuiIcon', () => {
-  let consoleErrorOverride: jest.SpyInstance;
-  beforeAll(() => {
-    // Ignore EuiIcon update not wrapped in act() warnings as they are triggered
-    // directly from the component componentDidUpdate() and loadIconComponent()
-    // TODO: Refactor EuiIcon to not cause this issue and think of a simpler
-    //  implementation based on modern JS bundlers features instead of
-    //  the EuiIcon caching layer.
-    const originalConsoleError: typeof console.error = console.error;
-    consoleErrorOverride = jest
-      .spyOn(console, 'error')
-      .mockImplementation((message, ...args) => {
-        if (
-          message?.startsWith(
-            'Warning: An update to %s inside a test was not wrapped in act(...).'
-          )
-        ) {
-          return;
-        }
-
-        originalConsoleError(message, ...args);
-      });
-  });
-
-  afterAll(() => {
-    consoleErrorOverride.mockRestore();
+const testIcon = (props: PropsOf<typeof EuiIcon>) => async () => {
+  act(() => {
+    render(<EuiIcon {...props} />);
   });
+  await waitFor(
+    () => {
+      const icon = document.querySelector(`[data-icon-type=${props.type}]`);
+      expect(icon).toHaveAttribute('data-is-loaded', 'true');
+      expect(icon).toMatchSnapshot();
+    },
+    { timeout: 3000 } // CI will sometimes time out if the icon doesn't load fast enough
+  );
+};
 
+describe('EuiIcon', () => {
   test('is rendered', testIcon({ type: 'search', ...requiredProps }));
 
   shouldRenderCustomStyles(<EuiIcon type="customImg" />);
@@ -84,6 +57,17 @@ describe('EuiIcon', () => {
   });
 
   describe('props', () => {
+    test('onIconLoad', async () => {
+      const onIconLoad = jest.fn();
+
+      render(<EuiIcon type="search" onIconLoad={onIconLoad} />);
+      expect(onIconLoad).toHaveBeenCalledTimes(0);
+
+      await waitFor(() => {
+        expect(onIconLoad).toHaveBeenCalledTimes(1);
+      });
+    });
+
     describe('other props', () => {
       test(
         'are passed through to the icon',
@@ -156,31 +140,30 @@ describe('EuiIcon', () => {
         </span>
       );
     };
-    const component = mount(<EuiIcon type={CustomIcon} />);
-    expect(prettyHtml(component.html())).toMatchSnapshot();
+    const { container } = render(<EuiIcon type={CustomIcon} />);
+    expect(container.firstChild).toMatchSnapshot();
   });
 
   describe('appendIconComponentCache', () => {
     it('does nothing if not called', () => {
-      const component = mount(<EuiIcon type="videoPlayer" />);
-      expect(component.find('svg').prop('data-is-loading')).toEqual(true);
+      const { container } = render(<EuiIcon type="videoPlayer" />);
+      expect(container.firstChild).toHaveAttribute('data-is-loading', 'true');
     });
 
     it('preloads the specified icon into the cache', () => {
       appendIconComponentCache({
         videoPlayer: EuiIconVideoPlayer,
       });
-      const component = mount(<EuiIcon type="videoPlayer" />);
-      // Should not have either data-is-loading attr set to true, because it was pre-loaded
-      expect(component.find('svg').prop('data-is-loading')).not.toEqual(true);
+      const { container } = render(<EuiIcon type="videoPlayer" />);
+      expect(container.firstChild).not.toHaveAttribute('data-is-loading');
     });
 
     it('does not impact non-loaded icons', () => {
       appendIconComponentCache({
         videoPlayer: EuiIconVideoPlayer,
       });
-      const component = mount(<EuiIcon type="accessibility" />);
-      expect(component.find('svg').prop('data-is-loading')).toEqual(true);
+      const { container } = render(<EuiIcon type="accessibility" />);
+      expect(container.firstChild).toHaveAttribute('data-is-loading', 'true');
     });
   });
 });
diff --git a/src/components/icon/icon_map.ts b/src/components/icon/icon_map.ts
index 8595347bc36..28c68c74f49 100644
--- a/src/components/icon/icon_map.ts
+++ b/src/components/icon/icon_map.ts
@@ -444,7 +444,6 @@ export const typeToPathMap = {
   tokenCompletionSuggester: 'tokenCompletionSuggester',
   tokenConstant: 'tokenConstant',
   tokenDate: 'tokenDate',
-  tokenDenseVector: 'tokenDenseVector',
   tokenElement: 'tokenElement',
   tokenEnum: 'tokenEnum',
   tokenEnumMember: 'tokenEnumMember',
@@ -488,4 +487,7 @@ export const typeToPathMap = {
   tokenText: 'tokenText',
   tokenTokenCount: 'tokenTokenCount',
   tokenVariable: 'tokenVariable',
+  tokenVectorDense: 'tokenVectorDense',
+  tokenDenseVector: 'tokenVectorDense', // NOTE: This is an undocumented alias for `tokenVectorDense`, added for legacy compatability
+  tokenVectorSparse: 'tokenVectorSparse',
 };
diff --git a/src/components/icon/svgs/tokens/tokenDenseVector.svg b/src/components/icon/svgs/tokens/tokenDenseVector.svg
deleted file mode 100644
index 66cbdf88904..00000000000
--- a/src/components/icon/svgs/tokens/tokenDenseVector.svg
+++ /dev/null
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M4.1539 12V4H6.86711V5.13923H5.65807V10.8608H6.86711V12H4.1539ZM11.8461 4V12H9.13288V10.8608H10.3419V5.13923H9.13288V4H11.8461Z" />
-</svg>
diff --git a/src/components/icon/svgs/tokens/tokenVectorDense.svg b/src/components/icon/svgs/tokens/tokenVectorDense.svg
new file mode 100644
index 00000000000..883e56bcf02
--- /dev/null
+++ b/src/components/icon/svgs/tokens/tokenVectorDense.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11Z"/>
+  <path d="M6 5a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm0 3a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm4-7a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM8 9a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm2-5a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm1 2a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm-1 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"/>
+</svg>
diff --git a/src/components/icon/svgs/tokens/tokenVectorSparse.svg b/src/components/icon/svgs/tokens/tokenVectorSparse.svg
new file mode 100644
index 00000000000..f2296572cf0
--- /dev/null
+++ b/src/components/icon/svgs/tokens/tokenVectorSparse.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M2 2.5a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1H3v10h1.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5v-11ZM8 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Zm0 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M6 8a1 1 0 1 1-2 0 1 1 0 0 1 2 0Zm5 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+  <path d="M13.5 2a.5.5 0 0 1 .5.5v11a.5.5 0 0 1-.5.5h-2a.5.5 0 0 1 0-1H13V3h-1.5a.5.5 0 0 1 0-1h2Z"/>
+</svg>
diff --git a/src/components/index.scss b/src/components/index.scss
index e916bfccef7..9d2983b50e2 100644
--- a/src/components/index.scss
+++ b/src/components/index.scss
@@ -15,5 +15,4 @@
 @import 'side_nav/index';
 @import 'search_bar/index';
 @import 'selectable/index';
-@import 'suggest/index';
 @import 'table/index';
diff --git a/src/components/index.ts b/src/components/index.ts
index 8b1550792ba..8bb0c034309 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -152,8 +152,6 @@ export * from './stat';
 
 export * from './steps';
 
-export * from './suggest';
-
 export * from './table';
 
 export * from './token';
diff --git a/src/components/key_pad_menu/key_pad_menu_item.stories.tsx b/src/components/key_pad_menu/key_pad_menu_item.stories.tsx
index 051c15ad95f..c6e829f7057 100644
--- a/src/components/key_pad_menu/key_pad_menu_item.stories.tsx
+++ b/src/components/key_pad_menu/key_pad_menu_item.stories.tsx
@@ -19,6 +19,12 @@ const meta: Meta<EuiKeyPadMenuItemProps> = {
   argTypes: {
     checkable: { options: [undefined, 'multi', 'single'] },
   },
+  args: {
+    label: 'Hello world', // String makes prop easier to change/toggle
+    // Component defaults
+    isDisabled: false,
+    isSelected: false,
+  },
 };
 
 export default meta;
@@ -27,9 +33,5 @@ type Story = StoryObj<EuiKeyPadMenuItemProps>;
 export const Playground: Story = {
   args: {
     children: <EuiIcon type="faceHappy" size="l" />,
-    // Make these props easier to change/toggle
-    label: 'Hello world',
-    isDisabled: false,
-    isSelected: false,
   },
 };
diff --git a/src/components/markdown_editor/markdown_format.styles.test.ts b/src/components/markdown_editor/markdown_format.styles.test.ts
index 656a253e526..6cef488d674 100644
--- a/src/components/markdown_editor/markdown_format.styles.test.ts
+++ b/src/components/markdown_editor/markdown_format.styles.test.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../test/internal';
+import { renderHook } from '@testing-library/react';
 import { useEuiTheme } from '../../services';
 
 import { TEXT_SIZES } from '../text/text';
@@ -15,9 +15,9 @@ import { euiMarkdownFormatStyles } from './markdown_format.styles';
 describe('euiMarkdownFormat text sizes', () => {
   TEXT_SIZES.forEach((size) => {
     test(size, () => {
-      const emotionReturn = testCustomHook(() =>
+      const emotionReturn = renderHook(() =>
         euiMarkdownFormatStyles(useEuiTheme())
-      ).return as any;
+      ).result.current;
       expect(emotionReturn[size].styles).toMatchSnapshot();
     });
   });
diff --git a/src/components/overlay_mask/overlay_mask.test.tsx b/src/components/overlay_mask/overlay_mask.test.tsx
index 1fecde19718..53f3ce617d4 100644
--- a/src/components/overlay_mask/overlay_mask.test.tsx
+++ b/src/components/overlay_mask/overlay_mask.test.tsx
@@ -31,7 +31,7 @@ describe('EuiOverlayMask', () => {
     );
 
     expect(baseElement.querySelector('.euiOverlayMask')!.className).toContain(
-      'euiColorMode-inverse-colorClassName'
+      'euiColorMode-inverse'
     );
   });
 
diff --git a/src/components/page/__snapshots__/page_template.test.tsx.snap b/src/components/page/__snapshots__/page_template.test.tsx.snap
index b247255dbc2..58d259b75d3 100644
--- a/src/components/page/__snapshots__/page_template.test.tsx.snap
+++ b/src/components/page/__snapshots__/page_template.test.tsx.snap
@@ -1179,7 +1179,7 @@ exports[`EuiPageTemplate_Deprecated with bottomBar is rendered 1`] = `
     </div>
     <section
       aria-label="Page level controls"
-      class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-euiColorMode-dark-colorClassName"
+      class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-euiColorMode-dark"
       style="left: 0px; right: 0px; bottom: 0px;"
     >
       <h2
diff --git a/src/components/page/page.stories.tsx b/src/components/page/page.stories.tsx
index 7da4e143873..7b1415eb09a 100644
--- a/src/components/page/page.stories.tsx
+++ b/src/components/page/page.stories.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { hideStorybookControls } from '../../../.storybook/utils';
 
 import { EuiFlexGroup } from '../flex';
 import { EuiSkeletonText } from '../skeleton';
@@ -19,23 +20,22 @@ import { EuiPage, EuiPageProps } from './page';
 const meta: Meta<EuiPageProps> = {
   title: 'EuiPage',
   component: EuiPage,
+  argTypes: {
+    restrictWidth: { control: 'boolean' },
+  },
+  args: {
+    // Component defaults
+    paddingSize: 'none',
+    grow: true,
+    direction: 'row',
+    restrictWidth: false,
+  },
 };
 
 export default meta;
 type Story = StoryObj<EuiPageProps>;
 
-const componentDefaults: EuiPageProps = {
-  paddingSize: 'none',
-  grow: true,
-  direction: 'row',
-  restrictWidth: false,
-};
-
 export const Playground: Story = {
-  args: componentDefaults,
-  argTypes: {
-    restrictWidth: { control: 'boolean' },
-  },
   render: ({ ...args }) => (
     <EuiFlexGroup
       direction="column"
@@ -52,15 +52,14 @@ export const Playground: Story = {
 
 export const RestrictWidth: Story = {
   args: {
-    ...componentDefaults,
     restrictWidth: '80vw',
   },
-  argTypes: {
-    // This story displays the restrictWidth functionality; removing other props to prevent confusion
-    grow: { table: { disable: true } },
-    direction: { table: { disable: true } },
-    paddingSize: { table: { disable: true } },
-  },
+  // This story displays the restrictWidth functionality; removing other props to prevent confusion
+  argTypes: hideStorybookControls<EuiPageProps>([
+    'grow',
+    'direction',
+    'paddingSize',
+  ]),
   render: ({ ...args }) => <EuiPage {...args}>{_pageContent}</EuiPage>,
 };
 
diff --git a/src/components/page/page_body/page_body.stories.tsx b/src/components/page/page_body/page_body.stories.tsx
index 9c0229a919c..4e9621b5107 100644
--- a/src/components/page/page_body/page_body.stories.tsx
+++ b/src/components/page/page_body/page_body.stories.tsx
@@ -9,28 +9,31 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 
+import { BORDER_RADII, EuiPanelProps } from '../../panel/panel';
 import { EuiSkeletonText } from '../../skeleton';
 import { EuiPage } from '../page';
 
 import { EuiPageBody, EuiPageBodyProps } from './page_body';
 
-const meta: Meta<EuiPageBodyProps> = {
+const meta: Meta<EuiPageBodyProps & Pick<EuiPanelProps, 'borderRadius'>> = {
   title: 'EuiPageBody',
   component: EuiPageBody,
+  argTypes: {
+    borderRadius: { control: 'radio', options: BORDER_RADII },
+  },
+  args: {
+    // Component defaults
+    restrictWidth: false,
+    paddingSize: 'none',
+    borderRadius: 'none',
+    component: 'main', // This is not a component default, but for the purposes of easier testing in the DOM in Storybook we'll set it to main
+  },
 };
 
 export default meta;
 type Story = StoryObj<EuiPageBodyProps>;
 
-const componentDefaults: EuiPageBodyProps = {
-  panelled: true,
-  restrictWidth: false,
-  paddingSize: 'm', // The component default is actually 'none', but for nicer visuals in Storybook we'll set it to 'm'
-  component: 'main', // This is not a component default, but for the purposes of easier testing in the DOM in Storybook we'll set it to main
-};
-
 export const Playground: Story = {
-  args: componentDefaults,
   render: ({ ...args }) => (
     <EuiPage>
       <EuiPageBody {...args}>
@@ -43,4 +46,8 @@ export const Playground: Story = {
       </EuiPageBody>
     </EuiPage>
   ),
+  args: {
+    panelled: true,
+    paddingSize: 'm',
+  },
 };
diff --git a/src/components/page/page_header/page_header.stories.tsx b/src/components/page/page_header/page_header.stories.tsx
index aa0ec8a28d4..d692656150f 100644
--- a/src/components/page/page_header/page_header.stories.tsx
+++ b/src/components/page/page_header/page_header.stories.tsx
@@ -24,21 +24,20 @@ const meta: Meta<EuiPageHeaderProps> = {
     breadcrumbProps: { control: 'object' },
     tabsProps: { control: 'object' },
   },
+  args: {
+    // Component defaults
+    paddingSize: 'none',
+    responsive: true,
+    restrictWidth: false,
+    alignItems: undefined,
+  },
 };
 
 export default meta;
 type Story = StoryObj<EuiPageHeaderProps>;
 
-const componentDefaults: EuiPageHeaderProps = {
-  paddingSize: 'none',
-  responsive: true,
-  restrictWidth: false,
-  alignItems: undefined,
-};
-
 export const Playground: Story = {
   args: {
-    ...componentDefaults,
     pageTitle: 'Page title',
     iconType: 'logoKibana',
     description: 'Example of a description.',
diff --git a/src/components/page/page_section/page_section.stories.tsx b/src/components/page/page_section/page_section.stories.tsx
index 13a939dc511..89559bc065c 100644
--- a/src/components/page/page_section/page_section.stories.tsx
+++ b/src/components/page/page_section/page_section.stories.tsx
@@ -19,22 +19,21 @@ const meta: Meta<EuiPageSectionProps> = {
   argTypes: {
     bottomBorder: { control: 'select', options: [true, false, 'extended'] },
   },
+  args: {
+    // Component defaults
+    restrictWidth: false,
+    color: 'plain', // The component default is actually 'transparent', but for the purposes of easier testing in Storybook we'll set it to plain
+    paddingSize: 'l',
+    alignment: 'top',
+    grow: false,
+    component: 'section', // This is not a component default, but for the purposes of easier testing in the DOM in Storybook we'll set it to section
+  },
 };
 
 export default meta;
 type Story = StoryObj<EuiPageSectionProps>;
 
-const componentDefaults: EuiPageSectionProps = {
-  restrictWidth: false,
-  color: 'plain', // The component default is actually 'transparent', but for the purposes of easier testing in Storybook we'll set it to plain
-  paddingSize: 'l',
-  alignment: 'top',
-  grow: false,
-  component: 'section', // This is not a component default, but for the purposes of easier testing in the DOM in Storybook we'll set it to section
-};
-
 export const Playground: Story = {
-  args: componentDefaults,
   render: ({ ...args }) => (
     // Block size demos the grow prop
     <EuiFlexGroup direction="column" css={{ blockSize: '100vh' }}>
diff --git a/src/components/page/page_sidebar/page_sidebar.stories.tsx b/src/components/page/page_sidebar/page_sidebar.stories.tsx
index ec1096e72d7..5b0d1d7959c 100644
--- a/src/components/page/page_sidebar/page_sidebar.stories.tsx
+++ b/src/components/page/page_sidebar/page_sidebar.stories.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { hideStorybookControls } from '../../../../.storybook/utils';
 
 import { EuiSkeletonText } from '../../skeleton';
 import { EuiPageSection } from '../page_section';
@@ -21,23 +22,22 @@ const meta: Meta<EuiPageSidebarProps> = {
   parameters: {
     layout: 'fullscreen',
   },
+  argTypes: {
+    sticky: { control: 'boolean' },
+  },
+  args: {
+    // Component defaults
+    paddingSize: 'm', // The component default is actually 'none', but for nicer visuals in Storybook we'll set it to 'm'
+    sticky: false,
+    minWidth: 248,
+    responsive: ['xs', 's'],
+  },
 };
 
 export default meta;
 type Story = StoryObj<EuiPageSidebarProps>;
 
-const componentDefaults: EuiPageSidebarProps = {
-  paddingSize: 'm', // The component default is actually 'none', but for nicer visuals in Storybook we'll set it to 'm'
-  sticky: false,
-  minWidth: 248,
-  responsive: ['xs', 's'],
-};
-
 export const Playground: Story = {
-  args: componentDefaults,
-  argTypes: {
-    sticky: { control: 'boolean' },
-  },
   render: ({ ...args }) => (
     <EuiPage
       css={({ euiTheme }) => ({
@@ -60,14 +60,18 @@ export const Playground: Story = {
 
 export const StickyOffset: Story = {
   args: {
-    ...componentDefaults,
     sticky: { offset: 50 },
   },
   argTypes: {
+    sticky: {
+      control: 'object',
+    },
     // This story demos the sticky functionality; removing other props to prevent confusion
-    minWidth: { table: { disable: true } },
-    paddingSize: { table: { disable: true } },
-    responsive: { table: { disable: true } },
+    ...hideStorybookControls<EuiPageSidebarProps>([
+      'minWidth',
+      'paddingSize',
+      'responsive',
+    ]),
   },
   render: ({ ...args }) => (
     <EuiPage
diff --git a/src/components/page_template/bottom_bar/__snapshots__/page_bottom_bar.test.tsx.snap b/src/components/page_template/bottom_bar/__snapshots__/page_bottom_bar.test.tsx.snap
index 97a067c2896..70f9ff4b066 100644
--- a/src/components/page_template/bottom_bar/__snapshots__/page_bottom_bar.test.tsx.snap
+++ b/src/components/page_template/bottom_bar/__snapshots__/page_bottom_bar.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`_EuiPageBottomBar is rendered 1`] = `
 <div>
   <section
     aria-label="aria-label"
-    class="euiBottomBar euiBottomBar--sticky testClass1 testClass2 emotion-euiBottomBar-sticky-bar-euiTestCss-euiColorMode-dark-colorClassName"
+    class="euiBottomBar euiBottomBar--sticky testClass1 testClass2 emotion-euiBottomBar-sticky-bar-euiTestCss-euiColorMode-dark"
     data-test-subj="test subject string"
     style="left: 0px; right: 0px; bottom: 0px;"
   >
@@ -34,7 +34,7 @@ exports[`_EuiPageBottomBar paddingSize l is rendered 1`] = `
 <div>
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark-colorClassName"
+    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark"
     style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
@@ -63,7 +63,7 @@ exports[`_EuiPageBottomBar paddingSize m is rendered 1`] = `
 <div>
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark-colorClassName"
+    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark"
     style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
@@ -92,7 +92,7 @@ exports[`_EuiPageBottomBar paddingSize none is rendered 1`] = `
 <div>
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark-colorClassName"
+    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark"
     style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
@@ -121,7 +121,7 @@ exports[`_EuiPageBottomBar paddingSize s is rendered 1`] = `
 <div>
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark-colorClassName"
+    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark"
     style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
@@ -150,7 +150,7 @@ exports[`_EuiPageBottomBar paddingSize xl is rendered 1`] = `
 <div>
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark-colorClassName"
+    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark"
     style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
@@ -179,7 +179,7 @@ exports[`_EuiPageBottomBar paddingSize xs is rendered 1`] = `
 <div>
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark-colorClassName"
+    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark"
     style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
@@ -208,7 +208,7 @@ exports[`_EuiPageBottomBar restrict width can be set to a custom number 1`] = `
 <div>
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark-colorClassName"
+    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark"
     style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
@@ -238,7 +238,7 @@ exports[`_EuiPageBottomBar restrict width can be set to a custom value and measu
 <div>
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark-colorClassName"
+    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark"
     style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
@@ -268,7 +268,7 @@ exports[`_EuiPageBottomBar restrict width can be set to a default 1`] = `
 <div>
   <section
     aria-label="Page level controls"
-    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark-colorClassName"
+    class="euiBottomBar euiBottomBar--sticky emotion-euiBottomBar-sticky-bar-euiColorMode-dark"
     style="left: 0px; right: 0px; bottom: 0px;"
   >
     <h2
diff --git a/src/components/panel/split_panel/split_panel_inner.stories.tsx b/src/components/panel/split_panel/split_panel_inner.stories.tsx
index 5d5fcd13181..9828b9e02d8 100644
--- a/src/components/panel/split_panel/split_panel_inner.stories.tsx
+++ b/src/components/panel/split_panel/split_panel_inner.stories.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { disableStorybookControls } from '../../../../.storybook/utils';
 
 import { COLORS } from '../panel';
 import { EuiSplitPanel, _EuiSplitPanelInnerProps } from './split_panel';
@@ -17,7 +18,13 @@ const meta: Meta<_EuiSplitPanelInnerProps> = {
   component: EuiSplitPanel.Inner,
   argTypes: {
     color: { control: 'select', options: COLORS },
-    panelRef: { control: false },
+    ...disableStorybookControls<_EuiSplitPanelInnerProps>(['panelRef']),
+  },
+  args: {
+    // Component defaults
+    color: 'transparent',
+    paddingSize: 'm',
+    grow: true,
   },
 };
 
@@ -25,12 +32,6 @@ export default meta;
 type Story = StoryObj<_EuiSplitPanelInnerProps>;
 
 export const SplitPanelInner: Story = {
-  args: {
-    // Default props
-    color: 'transparent',
-    paddingSize: 'm',
-    grow: true,
-  },
   render: ({ ...args }) => (
     <EuiSplitPanel.Outer css={{ blockSize: '100vh' }}>
       <EuiSplitPanel.Inner {...args}>Top panel</EuiSplitPanel.Inner>
diff --git a/src/components/panel/split_panel/split_panel_outer.stories.tsx b/src/components/panel/split_panel/split_panel_outer.stories.tsx
index b612dfc8c3c..e6b89dc0254 100644
--- a/src/components/panel/split_panel/split_panel_outer.stories.tsx
+++ b/src/components/panel/split_panel/split_panel_outer.stories.tsx
@@ -14,17 +14,17 @@ import { EuiSplitPanel, _EuiSplitPanelOuterProps } from './split_panel';
 const meta: Meta<_EuiSplitPanelOuterProps> = {
   title: 'EuiSplitPanel',
   component: EuiSplitPanel.Outer,
+  args: {
+    // Component defaults
+    direction: 'column',
+    responsive: ['xs', 's'],
+  },
 };
 
 export default meta;
 type Story = StoryObj<_EuiSplitPanelOuterProps>;
 
 export const SplitPanelOuter: Story = {
-  args: {
-    // Default props
-    direction: 'column',
-    responsive: ['xs', 's'],
-  },
   render: ({ ...args }) => (
     <EuiSplitPanel.Outer {...args}>
       <EuiSplitPanel.Inner>Top or left panel</EuiSplitPanel.Inner>
diff --git a/src/components/popover/input_popover.spec.tsx b/src/components/popover/input_popover.spec.tsx
index 80fde317f43..2e00958b3fa 100644
--- a/src/components/popover/input_popover.spec.tsx
+++ b/src/components/popover/input_popover.spec.tsx
@@ -200,4 +200,56 @@ describe('EuiPopover', () => {
       });
     });
   });
+
+  describe('closeOnScroll', () => {
+    const ScrollAllTheThings = () => {
+      const [isOpen, setIsOpen] = useState(true);
+
+      return (
+        <div style={{ height: '150vh', margin: 10 }}>
+          <EuiInputPopover
+            closeOnScroll={true}
+            isOpen={isOpen}
+            closePopover={() => setIsOpen(false)}
+            input={
+              <EuiTextArea
+                data-test-subj="inputWithScroll"
+                onClick={() => setIsOpen(true)}
+                rows={1}
+                defaultValue={`hello\nworld`}
+              />
+            }
+          >
+            <div
+              style={{ height: 100, overflow: 'auto' }}
+              data-test-subj="popoverWithScroll"
+            >
+              <div style={{ height: 400 }}>Popover content</div>
+            </div>
+          </EuiInputPopover>
+        </div>
+      );
+    };
+
+    it('closes the popover when the user scrolls outside of the component', () => {
+      cy.mount(<ScrollAllTheThings />);
+      cy.wait(500); // Wait for the setTimeout in the useEffect
+
+      // Scrolling the input or popover should not close the popover
+      cy.get('[data-test-subj="inputWithScroll"]').scrollTo('bottom');
+      cy.get('[data-popover-panel]').should('exist');
+
+      cy.get('[data-test-subj="popoverWithScroll"]').scrollTo('bottom');
+      cy.wait(500); // Wait a tick for false positives
+      cy.get('[data-popover-panel]').should('exist');
+
+      // Scrolling anywhere else should close the popover
+      cy.scrollTo('bottom');
+      cy.get('[data-popover-panel]').should('not.exist');
+
+      // Popover should be able to re-opened after close
+      cy.get('[data-test-subj="inputWithScroll"]').click();
+      cy.get('[data-popover-panel]').should('exist');
+    });
+  });
 });
diff --git a/src/components/popover/input_popover.tsx b/src/components/popover/input_popover.tsx
index 1d61c2a708e..6fc3c41aa8f 100644
--- a/src/components/popover/input_popover.tsx
+++ b/src/components/popover/input_popover.tsx
@@ -15,6 +15,7 @@ import React, {
   useCallback,
   useMemo,
   useRef,
+  createContext,
 } from 'react';
 import { css } from '@emotion/react';
 import classnames from 'classnames';
@@ -36,6 +37,10 @@ export interface _EuiInputPopoverProps
    */
   anchorPosition?: 'downLeft' | 'downRight' | 'downCenter';
   disableFocusTrap?: boolean;
+  /**
+   * Allows automatically closing the input popover on page scroll
+   */
+  closeOnScroll?: boolean;
   fullWidth?: boolean;
   input: EuiPopoverProps['button'];
   inputRef?: EuiPopoverProps['buttonRef'];
@@ -52,10 +57,14 @@ export type EuiInputPopoverProps = CommonProps &
   HTMLAttributes<HTMLDivElement> &
   _EuiInputPopoverProps;
 
+// Used by child components that want to know the parent popover width
+export const EuiInputPopoverWidthContext = createContext<number>(0);
+
 export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
   children,
   className,
   closePopover,
+  closeOnScroll = false,
   disableFocusTrap = false,
   focusTrapProps,
   input,
@@ -140,6 +149,44 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
     [disableFocusTrap, closePopover, panelPropsOnKeyDown]
   );
 
+  /**
+   * Optional close on scroll behavior
+   */
+
+  useEffect(() => {
+    // When the popover opens, add a scroll listener to the page (& remove it after)
+    if (closeOnScroll && panelEl) {
+      // Close the popover, but only if the scroll event occurs outside the input or the popover itself
+      const closePopoverOnScroll = (event: Event) => {
+        if (!panelEl || !inputEl || !event.target) return;
+        const scrollTarget = event.target as Node;
+
+        if (
+          panelEl.contains(scrollTarget) === false &&
+          inputEl.contains(scrollTarget) === false
+        ) {
+          closePopover();
+        }
+      };
+
+      // Firefox will trigger a scroll event in many common situations when the options list div is appended
+      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
+      const timeoutId = setTimeout(() => {
+        window.addEventListener('scroll', closePopoverOnScroll, {
+          passive: true, // for better performance as we won't call preventDefault
+          capture: true, // scroll events don't bubble, they must be captured instead
+        });
+      }, 500);
+
+      return () => {
+        window.removeEventListener('scroll', closePopoverOnScroll, {
+          capture: true,
+        });
+        clearTimeout(timeoutId);
+      };
+    }
+  }, [closeOnScroll, closePopover, panelEl, inputEl]);
+
   return (
     <EuiPopover
       css={css(fullWidth ? undefined : logicalCSS('max-width', form.maxWidth))}
@@ -159,7 +206,9 @@ export const EuiInputPopover: FunctionComponent<EuiInputPopoverProps> = ({
         disabled={disableFocusTrap}
         {...focusTrapProps}
       >
-        {children}
+        <EuiInputPopoverWidthContext.Provider value={panelWidth}>
+          {children}
+        </EuiInputPopoverWidthContext.Provider>
       </EuiFocusTrap>
     </EuiPopover>
   );
diff --git a/src/components/popover/popover.tsx b/src/components/popover/popover.tsx
index 0c8b797f79b..d8366f4a6e5 100644
--- a/src/components/popover/popover.tsx
+++ b/src/components/popover/popover.tsx
@@ -23,7 +23,7 @@ import { CommonProps, NoArgCallback } from '../common';
 import { FocusTarget, EuiFocusTrap, EuiFocusTrapProps } from '../focus_trap';
 
 import {
-  cascadingMenuKeys,
+  keys,
   getTransitionTimings,
   getWaitDuration,
   performOnFrame,
@@ -383,7 +383,7 @@ export class EuiPopover extends Component<Props, State> {
   };
 
   onKeyDown = (event: KeyboardEvent) => {
-    if (event.key === cascadingMenuKeys.ESCAPE) {
+    if (event.key === keys.ESCAPE) {
       this.onEscapeKey(event as unknown as Event);
     }
   };
diff --git a/src/components/portal/__snapshots__/portal.test.tsx.snap b/src/components/portal/__snapshots__/portal.test.tsx.snap
index 3e402730021..ac2e79003ec 100644
--- a/src/components/portal/__snapshots__/portal.test.tsx.snap
+++ b/src/components/portal/__snapshots__/portal.test.tsx.snap
@@ -15,11 +15,11 @@ exports[`EuiPortal renders portals with a different theme provider from the glob
 <body>
   <div>
     <span
-      class="euiThemeProvider emotion-euiColorMode-inverse-colorClassName"
+      class="euiThemeProvider emotion-euiColorMode-inverse"
     />
   </div>
   <div
-    class="emotion-euiColorMode-inverse-colorClassName"
+    class="emotion-euiColorMode-inverse"
     data-euiportal="true"
   >
     Content
diff --git a/src/components/progress/progress.styles.test.ts b/src/components/progress/progress.styles.test.ts
index c1002f48427..4dda29e4e12 100644
--- a/src/components/progress/progress.styles.test.ts
+++ b/src/components/progress/progress.styles.test.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../test/internal';
+import { renderHook } from '@testing-library/react';
 import { useEuiTheme } from '../../services';
 
 import { POSITIONS, COLORS } from './progress';
@@ -15,9 +15,9 @@ import { euiProgressStyles } from './progress.styles';
 describe('euiProgressStyles', () => {
   describe('native progress CSS', () => {
     const isNative = true;
-    const emotionReturn = testCustomHook(() =>
+    const emotionReturn = renderHook(() =>
       euiProgressStyles(useEuiTheme(), isNative)
-    ).return as any;
+    ).result.current;
 
     describe('positions', () => {
       POSITIONS.forEach((position) => {
@@ -38,9 +38,9 @@ describe('euiProgressStyles', () => {
 
   describe('indeterminate div CSS', () => {
     const isNative = false;
-    const emotionReturn = testCustomHook(() =>
+    const emotionReturn = renderHook(() =>
       euiProgressStyles(useEuiTheme(), isNative)
-    ).return as any;
+    ).result.current;
 
     describe('positions', () => {
       POSITIONS.forEach((position) => {
diff --git a/src/components/provider/provider.stories.tsx b/src/components/provider/provider.stories.tsx
new file mode 100644
index 00000000000..7eb59fe5767
--- /dev/null
+++ b/src/components/provider/provider.stories.tsx
@@ -0,0 +1,43 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiProvider, EuiProviderProps } from './provider';
+
+const meta: Meta<EuiProviderProps<{}>> = {
+  title: 'EuiProvider',
+  component: EuiProvider,
+  argTypes: {
+    colorMode: {
+      control: 'select',
+      options: ['light', 'dark', 'inverse', 'LIGHT', 'DARK', 'INVERSE'],
+    },
+    modify: { control: 'object' },
+    componentDefaults: { control: 'object' },
+    globalStyles: { control: 'boolean' },
+    utilityClasses: { control: 'boolean' },
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiProviderProps<{}>>;
+
+export const FontDefaultUnits: Story = {
+  render: () => (
+    <>
+      Change <strong>`modify.font.defaultUnits`</strong> to{' '}
+      <strong>`rem`, `em`, or `px`</strong> and then inspect this demo's `html`
+      CSS
+    </>
+  ),
+  args: {
+    modify: { font: { defaultUnits: 'rem' } },
+  },
+};
diff --git a/src/components/provider/provider.test.tsx b/src/components/provider/provider.test.tsx
index 84fc7a9c96e..0f61e2d61e2 100644
--- a/src/components/provider/provider.test.tsx
+++ b/src/components/provider/provider.test.tsx
@@ -66,14 +66,22 @@ describe('EuiProvider', () => {
       ) as HTMLStyleElement;
     };
 
-    it('uses a default cache from Emotion when configured without a cache', () => {
-      render(<EuiProvider />);
+    it('uses a default fallback cache with EUI prefixing when one is not passed', () => {
+      render(
+        <EuiProvider>
+          <div css={{ label: 'test-no-cache', display: 'flex' }} />
+        </EuiProvider>
+      );
 
       expect(emotionCache.key).toEqual('css');
       expect(getStyleByCss('html').dataset.emotion).toEqual('css-global');
       expect(getStyleByCss('.eui-displayBlock').dataset.emotion).toEqual(
         'css-global'
       );
+      // The below CSS would have prefixes if the default `@emotion/css` cache were used
+      expect(getStyleByCss('test-no-cache').textContent).toMatchInlineSnapshot(
+        `".css-1b3dqg7-test-no-cache{display:flex;}"`
+      );
     });
 
     it('applies the cache to all styles', () => {
diff --git a/src/components/provider/provider.tsx b/src/components/provider/provider.tsx
index c9e39613e70..69403787511 100644
--- a/src/components/provider/provider.tsx
+++ b/src/components/provider/provider.tsx
@@ -7,13 +7,8 @@
  */
 
 import React, { PropsWithChildren } from 'react';
-import { cache as fallbackCache, EmotionCache } from '@emotion/css';
+import type { EmotionCache } from '@emotion/css';
 
-import {
-  EuiGlobalStyles,
-  EuiGlobalStylesProps,
-} from '../../global_styling/reset/global_styles';
-import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import {
   EuiThemeProvider,
   EuiThemeProviderProps,
@@ -21,7 +16,15 @@ import {
   CurrentEuiBreakpointProvider,
 } from '../../services';
 import { emitEuiProviderWarning } from '../../services/theme/warning';
+import { cache as fallbackCache } from '../../services/emotion/css';
+
+import {
+  EuiGlobalStyles,
+  EuiGlobalStylesProps,
+} from '../../global_styling/reset/global_styles';
+import { EuiUtilityClasses } from '../../global_styling/utility/utility';
 import { EuiThemeAmsterdam } from '../../themes';
+
 import { EuiCacheProvider } from './cache';
 import { EuiProviderNestedCheck, useIsNestedEuiProvider } from './nested';
 import {
diff --git a/src/components/resizable_container/resizable_button.stories.tsx b/src/components/resizable_container/resizable_button.stories.tsx
index c3a2c33fddf..4cd4b2261b0 100644
--- a/src/components/resizable_container/resizable_button.stories.tsx
+++ b/src/components/resizable_container/resizable_button.stories.tsx
@@ -19,6 +19,12 @@ import {
 const meta: Meta<EuiResizableButtonProps> = {
   title: 'EuiResizableButton',
   component: EuiResizableButton,
+  args: {
+    // Component defaults
+    alignIndicator: 'center',
+    disabled: false,
+    isHorizontal: false,
+  },
 };
 
 export default meta;
@@ -30,9 +36,4 @@ export const Playground: Story = {
       <EuiResizableButton {...args} />
     </EuiPanel>
   ),
-  args: {
-    isHorizontal: true,
-    alignIndicator: 'center',
-    disabled: false,
-  },
 };
diff --git a/src/components/resizable_container/resizable_collapse_button.stories.tsx b/src/components/resizable_container/resizable_collapse_button.stories.tsx
index 9b318e4291c..efc09176eff 100644
--- a/src/components/resizable_container/resizable_collapse_button.stories.tsx
+++ b/src/components/resizable_container/resizable_collapse_button.stories.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { hideStorybookControls } from '../../../.storybook/utils';
 
 import { EuiPanel } from '../panel';
 import { EuiResizableContainer } from './resizable_container';
@@ -19,19 +20,20 @@ import {
 const meta: Meta<EuiResizableCollapseButtonProps> = {
   title: 'EuiResizableCollapseButton',
   component: EuiResizableCollapseButton,
-};
-
-export default meta;
-type Story = StoryObj<EuiResizableCollapseButtonProps>;
-
-export const Playground: Story = {
   args: {
+    isVisible: true,
+    // Component defaults
     direction: 'horizontal',
     externalPosition: 'before',
     internalPosition: 'middle',
-    isVisible: true,
     isCollapsed: false,
   },
+};
+
+export default meta;
+type Story = StoryObj<EuiResizableCollapseButtonProps>;
+
+export const Playground: Story = {
   render: ({ isCollapsed, direction, ...args }) => (
     <EuiPanel
       paddingSize="none"
@@ -51,16 +53,12 @@ export const Playground: Story = {
 };
 
 export const ProductionUsage: Story = {
-  args: {
-    direction: 'horizontal',
-    internalPosition: 'middle',
-  },
-  argTypes: {
-    // Not testable via `EuiResizableContainer`, so hide these props from the controls
-    externalPosition: { table: { disable: true } },
-    isVisible: { table: { disable: true } },
-    isCollapsed: { table: { disable: true } },
-  },
+  // Not testable via `EuiResizableContainer`, so hide these props from the controls
+  argTypes: hideStorybookControls<EuiResizableCollapseButtonProps>([
+    'externalPosition',
+    'isVisible',
+    'isCollapsed',
+  ]),
   render: ({ direction, internalPosition }) => (
     <EuiResizableContainer direction={direction} css={{ blockSize: 500 }}>
       {(EuiResizablePanel, EuiResizableButton) => (
diff --git a/src/components/side_nav/side_nav.stories.tsx b/src/components/side_nav/side_nav.stories.tsx
index fdbfae7c9e1..9baf22f8336 100644
--- a/src/components/side_nav/side_nav.stories.tsx
+++ b/src/components/side_nav/side_nav.stories.tsx
@@ -8,6 +8,7 @@
 
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { hideStorybookControls } from '../../../.storybook/utils';
 
 import { EuiText } from '../text';
 
@@ -16,6 +17,12 @@ import { EuiSideNav, EuiSideNavProps } from './side_nav';
 const meta: Meta<EuiSideNavProps> = {
   title: 'EuiSideNav',
   component: EuiSideNav,
+  args: {
+    // Component defaults
+    mobileBreakpoints: ['xs', 's'],
+    items: [],
+    isOpenOnMobile: false,
+  },
   decorators: [
     (Story) => (
       <div style={{ width: 200 }}>
@@ -29,14 +36,6 @@ const meta: Meta<EuiSideNavProps> = {
 export default meta;
 type Story = StoryObj<EuiSideNavProps>;
 
-const componentDefaults: EuiSideNavProps = {
-  mobileBreakpoints: ['xs', 's'],
-  items: [],
-  // mobileTitle does not have defaults; they are being set here as they are shared between examples
-  mobileTitle: 'Mobile navigation header',
-  isOpenOnMobile: false,
-};
-
 const sharedSideNavItems = [
   {
     name: 'Has nested children',
@@ -83,29 +82,28 @@ const sharedSideNavItems = [
 
 export const Playground: Story = {
   args: {
-    ...componentDefaults,
     heading: 'Elastic',
     headingProps: { element: 'h1', screenReaderOnly: false },
     items: sharedSideNavItems,
+    mobileTitle: 'Mobile navigation header',
   },
 };
 
 export const MobileSideNav: Story = {
   args: {
-    ...componentDefaults,
     isOpenOnMobile: true,
     items: sharedSideNavItems,
     mobileTitle: 'Toggle isOpenOnMobile in the controls panel',
   },
-  argTypes: {
-    // This story demos the side nav on smaller screens; removing other props to streamline controls
-    'aria-label': { table: { disable: true } },
-    heading: { table: { disable: true } },
-    headingProps: { table: { disable: true } },
-    items: { table: { disable: true } },
-    renderItem: { table: { disable: true } },
-    truncate: { table: { disable: true } },
-  },
+  // This story demos the side nav on smaller screens; removing other props to streamline controls
+  argTypes: hideStorybookControls<EuiSideNavProps>([
+    'aria-label',
+    'heading',
+    'headingProps',
+    'items',
+    'renderItem',
+    'truncate',
+  ]),
   parameters: {
     viewport: {
       defaultViewport: 'mobile1',
@@ -115,7 +113,6 @@ export const MobileSideNav: Story = {
 
 export const RenderItem: Story = {
   args: {
-    ...componentDefaults,
     renderItem: ({ children }) => <EuiText color="accent">{children}</EuiText>,
     items: [
       {
@@ -135,15 +132,15 @@ export const RenderItem: Story = {
       },
     ],
   },
-  argTypes: {
-    // This story demos the renderItem prop; removing other props to streamline controls
-    'aria-label': { table: { disable: true } },
-    heading: { table: { disable: true } },
-    headingProps: { table: { disable: true } },
-    toggleOpenOnMobile: { table: { disable: true } },
-    isOpenOnMobile: { table: { disable: true } },
-    mobileBreakpoints: { table: { disable: true } },
-    mobileTitle: { table: { disable: true } },
-    truncate: { table: { disable: true } },
-  },
+  // This story demos the renderItem prop; removing other props to streamline controls
+  argTypes: hideStorybookControls<EuiSideNavProps>([
+    'aria-label',
+    'heading',
+    'headingProps',
+    'toggleOpenOnMobile',
+    'isOpenOnMobile',
+    'mobileBreakpoints',
+    'mobileTitle',
+    'truncate',
+  ]),
 };
diff --git a/src/components/suggest/__snapshots__/suggest.test.tsx.snap b/src/components/suggest/__snapshots__/suggest.test.tsx.snap
deleted file mode 100644
index 60eedbc96fb..00000000000
--- a/src/components/suggest/__snapshots__/suggest.test.tsx.snap
+++ /dev/null
@@ -1,922 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiSuggest is rendered 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unchanged.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props append 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-        <span
-          class="euiFormControlLayout__append"
-        >
-          Appended
-        </span>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unchanged.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props isVirtualized 1`] = `
-<div
-  class="euiSelectable"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unchanged.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props maxHeight 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unchanged.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props options common 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unchanged.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props options standard 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unchanged.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props remaining EuiFieldSearch props are spread to the search input 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--compressed"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-invalid="true"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFormControlLayout--2icons euiFieldSearch--compressed euiFieldSearch-isClearable euiFieldSearch-isInvalid euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            id="testId"
-            name="testName"
-            placeholder="Start typing"
-            type="search"
-            value="Controlled value"
-          />
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-          >
-            <button
-              aria-label="Clear input"
-              class="euiFormControlLayoutClearButton euiFormControlLayoutClearButton--small"
-              data-test-subj="clearSearchButton"
-              type="button"
-            >
-              <span
-                class="euiFormControlLayoutClearButton__icon"
-                data-euiicon-type="cross"
-              />
-            </button>
-            <span
-              color="danger"
-              data-euiicon-type="warning"
-            />
-          </div>
-        </div>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unchanged.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props status status: loading is rendered 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFormControlLayout--1icons euiFieldSearch--fullWidth euiFieldSearch-isLoading euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              aria-label="Loading"
-              class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
-              role="progressbar"
-            />
-          </div>
-        </div>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: loading.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props status status: saved is rendered 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-        <span
-          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-        >
-          <span
-            class="euiSuggestInput__statusIcon"
-            color="success"
-            data-euiicon-type="checkInCircleFilled"
-          />
-        </span>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: saved.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props status status: unchanged is rendered 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unchanged.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props status status: unsaved is rendered 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-        <span
-          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-        >
-          <span
-            class="euiSuggestInput__statusIcon"
-            color="accent"
-            data-euiicon-type="dot"
-          />
-        </span>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unsaved.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props tooltipContent tooltipContent for status: loading is rendered 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFormControlLayout--1icons euiFieldSearch--fullWidth euiFieldSearch-isLoading euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--right euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              aria-label="Loading"
-              class="euiLoadingSpinner emotion-euiLoadingSpinner-m"
-              role="progressbar"
-            />
-          </div>
-        </div>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: loading.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props tooltipContent tooltipContent for status: saved is rendered 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-        <span
-          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-        >
-          <span
-            class="euiSuggestInput__statusIcon"
-            color="success"
-            data-euiicon-type="checkInCircleFilled"
-          />
-        </span>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: saved.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props tooltipContent tooltipContent for status: unchanged is rendered 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unchanged.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
-
-exports[`EuiSuggest props tooltipContent tooltipContent for status: unsaved is rendered 1`] = `
-<div
-  class="euiSelectable euiSelectable-fullHeight"
->
-  <div
-    class="euiPopover euiInputPopover emotion-euiPopover-EuiInputPopover"
-  >
-    <div
-      class="euiPopover__anchor css-zih94u-render"
-    >
-      <div
-        class="euiFormControlLayout euiFormControlLayout--fullWidth euiFormControlLayout--group"
-      >
-        <div
-          class="euiFormControlLayout__childrenWrapper"
-        >
-          <div
-            class="euiFormControlLayoutIcons euiFormControlLayoutIcons--left euiFormControlLayoutIcons--absolute"
-          >
-            <span
-              class="euiFormControlLayoutCustomIcon"
-            >
-              <span
-                aria-hidden="true"
-                class="euiFormControlLayoutCustomIcon__icon"
-                data-euiicon-type="search"
-              />
-            </span>
-          </div>
-          <input
-            aria-activedescendant=""
-            aria-describedby="generated-id_instructions"
-            aria-haspopup="listbox"
-            aria-label="aria-label"
-            autocomplete="off"
-            class="euiFieldSearch euiFieldSearch--fullWidth euiFieldSearch--inGroup euiSelectableSearch testClass1 testClass2 emotion-euiTestCss"
-            data-test-subj="test subject string"
-            placeholder="Filter options"
-            type="search"
-            value=""
-          />
-        </div>
-        <span
-          class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
-        >
-          <span
-            class="euiSuggestInput__statusIcon"
-            color="accent"
-            data-euiicon-type="dot"
-          />
-        </span>
-      </div>
-      <p
-        class="emotion-euiScreenReaderOnly"
-        id="generated-id_instructions"
-      >
-        State: unsaved.
-         
-        Use the Up and Down arrow keys to move focus over options. Press Enter to select. Press Escape to collapse options.
-      </p>
-    </div>
-  </div>
-</div>
-`;
diff --git a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap b/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
deleted file mode 100644
index c7c43893e38..00000000000
--- a/src/components/suggest/__snapshots__/suggest_item.test.tsx.snap
+++ /dev/null
@@ -1,126 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`EuiSuggestItem is rendered 1`] = `
-<span
-  aria-label="aria-label"
-  class="euiSuggestItem euiSuggestItem--truncate testClass1 testClass2 emotion-euiTestCss"
-  data-test-subj="test subject string"
->
-  <span
-    class="euiSuggestItem__type euiSuggestItem__type--tint1"
-  >
-    <span
-      color="inherit"
-      data-euiicon-type="search"
-    />
-  </span>
-  <span
-    class="euiSuggestItem__label euiSuggestItem__label--width50"
-    title="Test label"
-  >
-    Test label
-  </span>
-</span>
-`;
-
-exports[`props item with no description has expanded label is rendered 1`] = `
-<span
-  class="euiSuggestItem euiSuggestItem--truncate"
->
-  <span
-    class="euiSuggestItem__type euiSuggestItem__type--tint2"
-  >
-    <span
-      color="inherit"
-      data-euiicon-type="kqlValue"
-    />
-  </span>
-  <span
-    class="euiSuggestItem__label euiSuggestItem__label--width50"
-    title="Charles de Gaulle International Airport"
-  >
-    Charles de Gaulle International Airport
-  </span>
-</span>
-`;
-
-exports[`props labelWidth is 30% is rendered 1`] = `
-<span
-  class="euiSuggestItem euiSuggestItem--truncate"
->
-  <span
-    class="euiSuggestItem__type euiSuggestItem__type--tint2"
-  >
-    <span
-      color="inherit"
-      data-euiicon-type="kqlValue"
-    />
-  </span>
-  <span
-    class="euiSuggestItem__label euiSuggestItem__label--width30"
-    title="This is the description"
-  >
-    This is the description
-  </span>
-  <span
-    class="euiSuggestItem__description"
-    title="This is the description"
-  >
-    This is the description
-  </span>
-</span>
-`;
-
-exports[`props truncate is rendered 1`] = `
-<span
-  class="euiSuggestItem euiSuggestItem--truncate"
->
-  <span
-    class="euiSuggestItem__type euiSuggestItem__type--tint2"
-  >
-    <span
-      color="inherit"
-      data-euiicon-type="kqlValue"
-    />
-  </span>
-  <span
-    class="euiSuggestItem__label euiSuggestItem__label--width50"
-    title="This is the description"
-  >
-    This is the description
-  </span>
-  <span
-    class="euiSuggestItem__description"
-    title="This is the description"
-  >
-    This is the description
-  </span>
-</span>
-`;
-
-exports[`props truncate renders false 1`] = `
-<span
-  class="euiSuggestItem"
->
-  <span
-    class="euiSuggestItem__type euiSuggestItem__type--tint2"
-  >
-    <span
-      color="inherit"
-      data-euiicon-type="kqlValue"
-    />
-  </span>
-  <span
-    class="euiSuggestItem__label euiSuggestItem__label--width50"
-    title="This is the description"
-  >
-    This is the description
-  </span>
-  <span
-    class="euiSuggestItem__description euiSuggestItem__description--wrap"
-    title="This is the description"
-  >
-    This is the description
-  </span>
-</span>
-`;
diff --git a/src/components/suggest/_index.scss b/src/components/suggest/_index.scss
deleted file mode 100644
index d31182e14d4..00000000000
--- a/src/components/suggest/_index.scss
+++ /dev/null
@@ -1,5 +0,0 @@
-@import 'variables';
-
-@import 'suggest_item';
-
-@import 'suggest_input';
diff --git a/src/components/suggest/_suggest_input.scss b/src/components/suggest/_suggest_input.scss
deleted file mode 100644
index a135311dafd..00000000000
--- a/src/components/suggest/_suggest_input.scss
+++ /dev/null
@@ -1,4 +0,0 @@
-.euiSuggestInput__statusIcon {
-  // stylelint-disable-next-line declaration-no-important
-  background-color: transparent !important; // Override typical append coloring
-}
diff --git a/src/components/suggest/_suggest_item.scss b/src/components/suggest/_suggest_item.scss
deleted file mode 100644
index 41e5b8284cf..00000000000
--- a/src/components/suggest/_suggest_item.scss
+++ /dev/null
@@ -1,103 +0,0 @@
-.euiSuggestItem {
-  display: flex;
-  align-items: flex-start;
-  font-size: $euiFontSizeXS;
-  line-height: $euiSize;
-  color: $euiTextColor;
-  flex: 1 1 100%;
-  max-width: 100%;
-
-  &--truncate {
-    .euiSuggestItem__label,
-    .euiSuggestItem__description {
-      @include euiTextTruncate;
-    }
-  }
-}
-
-// When `onClick` is provided, EuiSuggestItem renders as a <button>
-// and we want to adjust styles to better afford the interaction
-// stylelint-disable selector-no-qualifying-type
-button.euiSuggestItem {
-  width: 100%;
-  text-align: left;
-
-  &:hover,
-  &:focus {
-    cursor: pointer;
-    background-color: $euiFocusBackgroundColor;
-
-    .euiSuggestItem__label {
-      text-decoration: underline;
-    }
-  }
-}
-// stylelint-enable selector-no-qualifying-type
-
-@each $name, $color in $euiSuggestItemColors {
-  .euiSuggestItem__type--#{$name} {
-    $backgroundColor: tintOrShade($color, 82%, 70%);
-    background-color: $backgroundColor;
-    color: makeHighContrastColor($color, $backgroundColor);
-  }
-}
-
-.euiSuggestItem__type {
-  display: flex;
-  flex: 0 0 auto;
-  justify-content: center;
-  align-items: flex-start;
-  padding-top: $euiSizeS;
-  width: $euiSizeXL;
-  min-height: $euiSizeXL;
-  align-self: stretch;
-}
-
-.euiSuggestItem__label,
-.euiSuggestItem__description {
-  @include euiTextBreakWord;
-  display: inline-block;
-  padding: $euiSizeS;
-  flex-grow: 1;
-}
-
-.euiSuggestItem__label {
-  font-family: $euiCodeFontFamily;
-
-  // Sets labelWidth from 20% to 90% in increments of 10%
-  @for $i from 20 through 90 {
-    &.euiSuggestItem__label--width#{$i} {
-      flex-basis: calc(#{$i * 1%} - #{$euiSize});
-      min-width: calc(#{$i * 1%} - #{$euiSize});
-      $i: $i + 10;
-    }
-  }
-
-  &--expand {
-    flex-basis: auto;
-  }
-}
-
-.euiSuggestItem__description {
-  color: $euiTextSubduedColor;
-  padding-top: $euiSizeS + 1px;
-  flex-basis: auto;
-  align-self: baseline;
-
-  &.euiSuggestItem__description--wrap {
-    @include euiTextBreakWord;
-    white-space: normal !important; // stylelint-disable-line declaration-no-important
-  }
-}
-
-// For specifically within EuiSelectable
-
-.euiSuggestItemOption {
-  &[class*='isFocused'],
-  &:hover:not([aria-disabled='true']),
-  &:focus {
-    .euiSuggestItem__label {
-      text-decoration: underline;
-    }
-  }
-}
diff --git a/src/components/suggest/_variables.scss b/src/components/suggest/_variables.scss
deleted file mode 100644
index 5e4b63f6aec..00000000000
--- a/src/components/suggest/_variables.scss
+++ /dev/null
@@ -1,13 +0,0 @@
-$euiSuggestItemColors: (
-  tint0: $euiColorVis0,
-  tint1: $euiColorVis1,
-  tint2: $euiColorVis2,
-  tint3: $euiColorVis3,
-  tint4: $euiColorVis4,
-  tint5: $euiColorVis5,
-  tint6: $euiColorVis6,
-  tint7: $euiColorVis7,
-  tint8: $euiColorVis8,
-  tint9: $euiColorVis9,
-  tint10: $euiColorDarkShade,
-);
diff --git a/src/components/suggest/index.ts b/src/components/suggest/index.ts
deleted file mode 100644
index 60836f54a4b..00000000000
--- a/src/components/suggest/index.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-export type { EuiSuggestItemProps } from './suggest_item';
-export { EuiSuggestItem } from './suggest_item';
-
-export type { EuiSuggestProps, EuiSuggestionProps } from './suggest';
-export { EuiSuggest } from './suggest';
diff --git a/src/components/suggest/suggest.a11y.tsx b/src/components/suggest/suggest.a11y.tsx
deleted file mode 100644
index 276963ccd98..00000000000
--- a/src/components/suggest/suggest.a11y.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-/// <reference types="cypress" />
-/// <reference types="cypress-real-events" />
-/// <reference types="../../../cypress/support" />
-
-import React from 'react';
-import { EuiFormRow } from '../form';
-import { EuiSuggest } from './suggest';
-import { EuiSuggestItemProps } from './suggest_item';
-
-const Suggest = () => {
-  const suggestedItems: EuiSuggestItemProps[] = [
-    {
-      type: {
-        iconType: 'accessibility',
-        color: 'tint1',
-      },
-      label: 'Accessibility',
-      description: 'A short description',
-    },
-    {
-      type: {
-        iconType: 'image',
-        color: 'tint2',
-      },
-      label: 'Images',
-      description: 'Another short description',
-    },
-    {
-      type: {
-        iconType: 'lock',
-        color: 'tint3',
-      },
-      label: 'Locks',
-      description: 'A third short description',
-    },
-  ];
-  return (
-    <EuiFormRow label="Suggest a topic" id="cy-label-suggest-1">
-      <EuiSuggest
-        aria-labelledby="cy-label-suggest-1-label"
-        suggestions={suggestedItems}
-      />
-    </EuiFormRow>
-  );
-};
-
-describe('EuiSuggest', () => {
-  beforeEach(() => {
-    cy.realMount(<Suggest />);
-  });
-
-  describe('Automated accessibility check', () => {
-    it('has zero violations when rendered', () => {
-      cy.checkAxe();
-    });
-  });
-
-  describe('Keyboard accessibility', () => {
-    it('has zero violations after traversing list items', () => {
-      cy.realPress('Tab');
-      cy.get('#cy-label-suggest-1').should('have.focus');
-      cy.get('ul[role="listbox"]').should('exist');
-      cy.realPress('ArrowDown');
-      cy.realPress('ArrowUp');
-      cy.realPress('ArrowRight');
-      cy.realPress('ArrowLeft');
-      cy.get('li[role="option"]')
-        .first()
-        .should('have.attr', 'aria-selected', 'true');
-      cy.checkAxe();
-    });
-  });
-});
diff --git a/src/components/suggest/suggest.spec.tsx b/src/components/suggest/suggest.spec.tsx
deleted file mode 100644
index a9041a100c7..00000000000
--- a/src/components/suggest/suggest.spec.tsx
+++ /dev/null
@@ -1,130 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-/// <reference types="cypress" />
-/// <reference types="cypress-real-events" />
-/// <reference types="../../../cypress/support" />
-
-import React from 'react';
-
-import { EuiSuggest, EuiSuggestionProps } from './suggest';
-
-const sampleItems: EuiSuggestionProps[] = [
-  {
-    type: { iconType: 'kqlField', color: 'tint4' },
-    label: 'Field sample',
-    description: 'Description',
-  },
-  {
-    type: { iconType: 'kqlValue', color: 'tint0' },
-    label: 'Value sample',
-    description: 'Description',
-  },
-];
-
-describe('EuiSuggest', () => {
-  describe('onItemClick', () => {
-    it('is called when an option is clicked', () => {
-      const handler = cy.stub();
-      cy.mount(
-        <EuiSuggest
-          aria-label="onItemClick"
-          suggestions={sampleItems}
-          onItemClick={handler}
-        />
-      );
-
-      cy.get('input')
-        .click()
-        .then(() => {
-          expect(cy.get('ul')).to.exist;
-        });
-      cy.get('li[role=option]')
-        .first()
-        .click()
-        .then(() => {
-          expect(handler).to.be.calledWith(sampleItems[0]);
-        });
-    });
-
-    it('is called when an option is pressed via the Enter key', () => {
-      const handler = cy.stub();
-      cy.mount(
-        <EuiSuggest
-          aria-label="onItemClick"
-          suggestions={sampleItems}
-          onItemClick={handler}
-        />
-      );
-
-      cy.get('input')
-        .click()
-        .then(() => {
-          expect(cy.get('ul')).to.exist;
-        });
-      cy.realPress('ArrowDown');
-      cy.realPress('Enter').then(() => {
-        expect(handler).to.be.calledWith(sampleItems[0]);
-      });
-    });
-  });
-
-  describe('onInput', () => {
-    it('is called on each key input value change', () => {
-      const handler = cy.stub();
-      cy.mount(
-        <EuiSuggest
-          aria-label="onInputChange"
-          suggestions={sampleItems}
-          onInput={handler}
-        />
-      );
-
-      cy.get('input')
-        .type('search')
-        .type('{backspace}')
-        .then(() => {
-          expect(handler).to.have.callCount(7);
-        });
-    });
-  });
-
-  describe('onSearch', () => {
-    it('is called on each key input value change', () => {
-      const handler = cy.stub();
-      cy.mount(
-        <EuiSuggest
-          aria-label="onSearchChange"
-          suggestions={sampleItems}
-          onSearch={handler}
-        />
-      );
-
-      cy.get('input')
-        .type('search')
-        .type('{backspace}')
-        .then(() => {
-          expect(handler).to.have.callCount(8);
-        });
-    });
-  });
-
-  describe('filtering', () => {
-    it('filters the list via search', () => {
-      cy.mount(<EuiSuggest aria-label="filtering" suggestions={sampleItems} />);
-
-      cy.get('input')
-        .type('v')
-        .then(() => {
-          cy.get('li[role=option]')
-            .first()
-            .should('have.attr', 'title', 'Value sample');
-        });
-    });
-  });
-});
diff --git a/src/components/suggest/suggest.test.tsx b/src/components/suggest/suggest.test.tsx
deleted file mode 100644
index d90800581fe..00000000000
--- a/src/components/suggest/suggest.test.tsx
+++ /dev/null
@@ -1,182 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { shallow } from 'enzyme';
-import { requiredProps } from '../../test/required_props';
-import { render } from '../../test/rtl';
-
-import { EuiSelectable } from '../selectable';
-import { EuiSuggest, EuiSuggestionProps } from './suggest';
-import { ALL_STATUSES } from './types';
-
-const sampleItems: EuiSuggestionProps[] = [
-  {
-    type: { iconType: 'kqlField', color: 'tint4' },
-    label: 'Field sample',
-    description: 'Description',
-  },
-  {
-    type: { iconType: 'kqlValue', color: 'tint0' },
-    label: 'Value sample',
-    description: 'Description',
-  },
-];
-
-describe('EuiSuggest', () => {
-  test('is rendered', () => {
-    const { container } = render(
-      <EuiSuggest {...requiredProps} suggestions={sampleItems} />
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-
-  describe('props', () => {
-    describe('status', () => {
-      ALL_STATUSES.forEach((status) => {
-        test(`status: ${status} is rendered`, () => {
-          const { container } = render(
-            <EuiSuggest
-              {...requiredProps}
-              suggestions={sampleItems}
-              status={status}
-            />
-          );
-
-          expect(container.firstChild).toMatchSnapshot();
-        });
-      });
-    });
-
-    test('append', () => {
-      const { container } = render(
-        <EuiSuggest
-          {...requiredProps}
-          suggestions={sampleItems}
-          append={<span>Appended</span>}
-        />
-      );
-
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
-    describe('tooltipContent', () => {
-      ALL_STATUSES.forEach((status) => {
-        test(`tooltipContent for status: ${status} is rendered`, () => {
-          const { container } = render(
-            <EuiSuggest
-              {...requiredProps}
-              suggestions={sampleItems}
-              status={status}
-              tooltipContent={status}
-            />
-          );
-
-          expect(container.firstChild).toMatchSnapshot();
-        });
-      });
-    });
-
-    test('isVirtualized', () => {
-      const { container } = render(
-        <EuiSuggest
-          {...requiredProps}
-          suggestions={sampleItems}
-          isVirtualized
-        />
-      );
-
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
-    test('maxHeight', () => {
-      const { container } = render(
-        <EuiSuggest
-          {...requiredProps}
-          suggestions={sampleItems}
-          maxHeight="50vh"
-        />
-      );
-
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
-    describe('options', () => {
-      test('standard', () => {
-        const _sampleItems: EuiSuggestionProps[] = sampleItems.map(
-          (item, idx) => ({
-            ...item,
-            labelDisplay: idx === 0 ? 'fixed' : 'expand',
-            descriptionDisplay: idx === 0 ? 'truncate' : 'wrap',
-            labelWidth: idx === 0 ? '70' : 80,
-          })
-        );
-        const { container } = render(
-          <EuiSuggest {...requiredProps} suggestions={_sampleItems} />
-        );
-
-        expect(container.firstChild).toMatchSnapshot();
-      });
-
-      test('common', () => {
-        const _sampleItems: EuiSuggestionProps[] = sampleItems.map((item) => ({
-          ...item,
-          'aria-label': 'sampleItem',
-          'data-test-subj': 'sampleItem',
-          className: 'sampleItem',
-          id: 'sampleItem',
-        }));
-        const { container } = render(
-          <EuiSuggest {...requiredProps} suggestions={_sampleItems} />
-        );
-
-        expect(container.firstChild).toMatchSnapshot();
-      });
-    });
-
-    describe('onItemClick', () => {
-      it('passes an onChange callback to the underlying EuiSelectable, which will fire on list item clicks and enter keypresses', () => {
-        const onItemClick = jest.fn();
-        const _component = shallow(
-          <EuiSuggest
-            {...requiredProps}
-            suggestions={sampleItems}
-            onItemClick={onItemClick}
-          />
-        );
-        const component = _component.find(EuiSuggest).dive(); // Shallow workaround for Emotion wrapper
-
-        const options = component.find(EuiSelectable).prop('options');
-        options[1].checked = 'on';
-        component.find(EuiSelectable).simulate('change', options);
-
-        expect(onItemClick).toHaveBeenCalledWith(sampleItems[1]);
-      });
-    });
-
-    test('remaining EuiFieldSearch props are spread to the search input', () => {
-      const { container } = render(
-        <EuiSuggest
-          {...requiredProps}
-          suggestions={sampleItems}
-          name="testName"
-          id="testId"
-          placeholder="Start typing"
-          value="Controlled value"
-          isInvalid={true}
-          compressed={true}
-          fullWidth={false}
-          isClearable={true}
-        />
-      );
-
-      expect(container.firstChild).toMatchSnapshot();
-    });
-  });
-});
diff --git a/src/components/suggest/suggest.tsx b/src/components/suggest/suggest.tsx
deleted file mode 100644
index 2f1e1a68d95..00000000000
--- a/src/components/suggest/suggest.tsx
+++ /dev/null
@@ -1,355 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React, {
-  CSSProperties,
-  FormEvent,
-  FunctionComponent,
-  useState,
-  useCallback,
-} from 'react';
-import classNames from 'classnames';
-import { CommonProps, ExclusiveUnion } from '../common';
-
-import { EuiIcon } from '../icon';
-import { useEuiI18n } from '../i18n';
-import { EuiInputPopover } from '../popover';
-import {
-  EuiSelectable,
-  EuiSelectableOption,
-  EuiSelectableSearchableSearchProps,
-} from '../selectable';
-import { EuiToolTip } from '../tool_tip';
-
-import { EuiSuggestItem, _EuiSuggestItemPropsBase } from './suggest_item';
-import { EuiSuggestStatus, _EuiSuggestStatusMap } from './types';
-
-const statusMap: _EuiSuggestStatusMap = {
-  unsaved: {
-    icon: 'dot',
-    color: 'accent',
-  },
-  saved: {
-    icon: 'checkInCircleFilled',
-    color: 'success',
-  },
-  unchanged: {
-    icon: '',
-    color: 'success',
-  },
-  loading: {},
-};
-
-// keys of _EuiSuggestItemPropsBase
-const suggestItemPropsKeys = [
-  'label',
-  'type',
-  'description',
-  'labelDisplay',
-  'labelWidth',
-  'descriptionDisplay',
-];
-
-/**
- * @deprecated
- */
-export type EuiSuggestionProps = CommonProps & _EuiSuggestItemPropsBase;
-
-type _EuiSuggestProps = CommonProps &
-  Omit<
-    EuiSelectableSearchableSearchProps<{}>,
-    'isLoading' // status.loading should be used instead for consistency
-  > & {
-    /**
-     * List of suggestions to display using EuiSuggestItem.
-     * Accepts props from #EuiSuggestItemProps
-     */
-    suggestions: EuiSuggestionProps[];
-
-    /**
-     * Changes the content of the tooltip that wraps the status icon
-     */
-    tooltipContent?: string;
-
-    /**
-     * Status of the current query 'unsaved', 'saved', 'unchanged' or 'loading'.
-     */
-    status?: EuiSuggestStatus;
-
-    /**
-     * Element to be appended to the input bar.
-     */
-    append?: JSX.Element;
-
-    /**
-     * Handler for click on an EuiSuggestItem.
-     */
-    onItemClick?: (item: EuiSuggestionProps) => void;
-
-    /**
-     * Callback function called when the input changes.
-     */
-    onInput?: (target: EventTarget) => void;
-
-    /**
-     * Callback function called when the search changes.
-     */
-    onSearch?: (value: string) => void;
-
-    /**
-     * Use virtualized rendering for list items with `react-window`.
-     * Best used when there are a lot of items.
-     */
-    isVirtualized?: boolean;
-
-    /**
-     * Maximum height to set for the list.
-     * Default is `60vh`
-     */
-    maxHeight?: CSSProperties['maxHeight'];
-
-    /**
-     * Control whether or not options get filtered internally or if consumer will filter.
-     * Default `false`
-     */
-    isPreFiltered?: boolean;
-  };
-
-/**
- * @deprecated
- */
-export type EuiSuggestProps = _EuiSuggestProps &
-  ExclusiveUnion<
-    {
-      'aria-label': string;
-      'aria-labelledby'?: string;
-    },
-    {
-      'aria-label'?: string;
-      'aria-labelledby': string;
-    }
-  >;
-
-/**
- * @deprecated - EuiSuggest is scheduled for deprecation due to low internal usage and high
- * overlap with other existing EUI components. We recommend using EuiSelectable instead,
- * or copying this component into your own application for usage if necessary.
- *
- * The component will be permanently removed in October 2023.
- */
-export const EuiSuggest: FunctionComponent<EuiSuggestProps> = ({
-  onItemClick,
-  onBlur,
-  onFocus,
-  onInput,
-  onSearch,
-  status = 'unchanged',
-  append,
-  tooltipContent,
-  suggestions,
-  id,
-  'aria-label': ariaLabel,
-  'aria-labelledby': labelId,
-  isPreFiltered = false,
-  isVirtualized = false,
-  fullWidth = true,
-  maxHeight = '60vh',
-  ...rest
-}) => {
-  /**
-   * Popover helpers
-   */
-  const [popoverRef, setPopoverRef] = useState<HTMLElement | null>(null);
-  const [isPopoverOpen, setIsPopoverOpen] = useState<boolean>(false);
-  const openPopover = () => setIsPopoverOpen(true);
-  const closePopover = () => setIsPopoverOpen(false);
-
-  /**
-   * Search helpers
-   */
-  const searchOnFocus = (e: React.FocusEvent<HTMLInputElement>) => {
-    onFocus?.(e);
-    openPopover();
-  };
-
-  const searchOnBlur = (e: React.FocusEvent<HTMLInputElement>) => {
-    onBlur?.(e);
-    if (!popoverRef?.contains(e.relatedTarget as HTMLElement)) {
-      closePopover();
-    }
-  };
-
-  const searchOnInput = (e: FormEvent<HTMLInputElement>) => {
-    onInput?.(e.target);
-    openPopover();
-  };
-
-  const searchOnChange = (value: string) => {
-    onSearch?.(value);
-  };
-
-  /**
-   * Status
-   */
-  let icon = '';
-  let color = '';
-
-  if (statusMap[status]) {
-    icon = statusMap[status].icon || '';
-    color = statusMap[status].color || '';
-  }
-
-  // EuiFieldText's append accepts an array of elements so start by creating an empty array
-  const appendArray = [];
-
-  const [statusSaved, statusUnsaved] = useEuiI18n(
-    ['euiSuggest.stateSavedTooltip', 'euiSuggest.stateUnsavedTooltip'],
-    ['Saved.', 'Changes have not been saved.']
-  );
-  statusMap.saved.tooltip = statusSaved;
-  statusMap.unsaved.tooltip = statusUnsaved;
-
-  const statusElement = (status === 'saved' || status === 'unsaved') && (
-    <EuiToolTip
-      position="left"
-      content={tooltipContent || statusMap[status].tooltip}
-    >
-      <EuiIcon
-        className="euiSuggestInput__statusIcon"
-        color={color}
-        type={icon}
-      />
-    </EuiToolTip>
-  );
-
-  // Push the status element to the array if it is not undefined
-  if (statusElement) appendArray.push(statusElement);
-
-  // Check to see if consumer passed an append item and if so, add it to the array
-  if (append) appendArray.push(append);
-
-  const [stateLoading, stateSaved, stateUnsaved, stateUnchanged] = useEuiI18n(
-    [
-      'euiSuggest.stateLoading',
-      'euiSuggest.stateSaved',
-      'euiSuggest.stateUnsaved',
-      'euiSuggest.stateUnchanged',
-    ],
-    ['State: loading.', 'State: saved.', 'State: unsaved.', 'State: unchanged.']
-  );
-
-  const stateMessageMap = {
-    loading: stateLoading,
-    saved: stateSaved,
-    unsaved: stateUnsaved,
-    unchanged: stateUnchanged,
-  };
-  const stateMessage = stateMessageMap[status];
-
-  /**
-   * Options list
-   */
-  const suggestionList = suggestions.map((props: EuiSuggestionProps) => {
-    // Omit props destined for the EuiSuggestItem so that they don't
-    // cause warnings or render in the DOM of the EuiSelectableItem
-    const data = {};
-    const liProps = { label: props.label };
-    Object.keys(props).forEach((key) => {
-      if (suggestItemPropsKeys.includes(key)) {
-        // @ts-ignore string index type
-        data[key] = props[key];
-      } else {
-        // @ts-ignore string index type
-        liProps[key] = props[key];
-      }
-    });
-    return {
-      ...(liProps as typeof props),
-      data,
-      className: classNames(props.className, 'euiSuggestItemOption'),
-      // Force truncation if `isVirtualized` is true
-      truncate: isVirtualized ? true : props.truncate,
-    };
-  });
-
-  const renderOption = useCallback((props: EuiSuggestionProps) => {
-    return <EuiSuggestItem {...props} />;
-  }, []);
-
-  const onItemSelect = useCallback(
-    (options: EuiSelectableOption[]) => {
-      if (onItemClick) {
-        const selectedIndex = options.findIndex(
-          (option) => option.checked === 'on'
-        );
-        if (selectedIndex >= 0) {
-          const selectedSuggestion = suggestions[selectedIndex];
-          onItemClick(selectedSuggestion);
-        }
-      }
-    },
-    [onItemClick, suggestions]
-  );
-
-  return (
-    <>
-      <EuiSelectable<EuiSuggestionProps>
-        selectableScreenReaderText={stateMessage}
-        singleSelection={true}
-        height={isVirtualized ? undefined : 'full'}
-        options={suggestionList}
-        renderOption={renderOption}
-        onChange={onItemSelect}
-        listProps={{
-          bordered: false,
-          showIcons: false,
-          onFocusBadge: false,
-          paddingSize: 'none',
-          textWrap: isVirtualized ? 'truncate' : 'wrap',
-          isVirtualized,
-        }}
-        searchable
-        isPreFiltered={isPreFiltered}
-        searchProps={{
-          id,
-          append: appendArray.length ? appendArray : undefined,
-          fullWidth,
-          isLoading: status === 'loading' ? true : false,
-          onFocus: searchOnFocus,
-          onBlur: searchOnBlur,
-          onInput: searchOnInput,
-          onChange: searchOnChange,
-          'aria-label': ariaLabel,
-          'aria-labelledby': labelId,
-          ...rest,
-        }}
-      >
-        {(list, search) => (
-          <EuiInputPopover
-            disableFocusTrap
-            input={<>{search}</>}
-            isOpen={isPopoverOpen}
-            panelPaddingSize="none"
-            fullWidth={fullWidth}
-            closePopover={closePopover}
-            panelRef={setPopoverRef}
-            panelProps={{
-              'aria-live': undefined,
-              'aria-modal': false,
-              role: undefined,
-            }}
-          >
-            <div style={{ maxHeight }} className="eui-yScroll">
-              {list}
-            </div>
-          </EuiInputPopover>
-        )}
-      </EuiSelectable>
-    </>
-  );
-};
diff --git a/src/components/suggest/suggest_item.test.tsx b/src/components/suggest/suggest_item.test.tsx
deleted file mode 100644
index d630d2b5ae8..00000000000
--- a/src/components/suggest/suggest_item.test.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { requiredProps } from '../../test/required_props';
-import { render } from '../../test/rtl';
-
-import { EuiSuggestItem } from './suggest_item';
-
-const TYPE = {
-  iconType: 'search',
-  color: 'tint1',
-};
-
-describe('EuiSuggestItem', () => {
-  test('is rendered', () => {
-    const { container } = render(
-      <EuiSuggestItem {...requiredProps} label="Test label" type={TYPE} />
-    );
-
-    expect(container.firstChild).toMatchSnapshot();
-  });
-});
-
-describe('props', () => {
-  const sampleItem = {
-    type: { iconType: 'kqlValue', color: 'tint2' },
-    label: 'Charles de Gaulle International Airport',
-    description: 'This is the description',
-  };
-
-  describe('labelWidth is 30%', () => {
-    test('is rendered', () => {
-      const { container } = render(
-        <EuiSuggestItem
-          type={sampleItem.type}
-          description={sampleItem.description}
-          label={sampleItem.description}
-          labelWidth="30"
-        />
-      );
-      expect(container.firstChild).toMatchSnapshot();
-    });
-  });
-
-  describe('truncate', () => {
-    test('is rendered', () => {
-      const { container } = render(
-        <EuiSuggestItem
-          type={sampleItem.type}
-          description={sampleItem.description}
-          label={sampleItem.description}
-          truncate
-        />
-      );
-      expect(container.firstChild).toMatchSnapshot();
-    });
-
-    test('renders false', () => {
-      const { container } = render(
-        <EuiSuggestItem
-          type={sampleItem.type}
-          description={sampleItem.description}
-          label={sampleItem.description}
-          truncate={false}
-        />
-      );
-      expect(container.firstChild).toMatchSnapshot();
-    });
-  });
-
-  describe('item with no description has expanded label', () => {
-    test('is rendered', () => {
-      const { container } = render(
-        <EuiSuggestItem label={sampleItem.label} type={sampleItem.type} />
-      );
-      expect(container.firstChild).toMatchSnapshot();
-    });
-  });
-});
diff --git a/src/components/suggest/suggest_item.tsx b/src/components/suggest/suggest_item.tsx
deleted file mode 100644
index fedca2504f5..00000000000
--- a/src/components/suggest/suggest_item.tsx
+++ /dev/null
@@ -1,194 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React, {
-  FunctionComponent,
-  HTMLAttributes,
-  ButtonHTMLAttributes,
-  MouseEventHandler,
-} from 'react';
-import { CommonProps, ExclusiveUnion, keysOf } from '../common';
-import classNames from 'classnames';
-import { EuiIcon, IconType } from '../icon';
-
-interface Type {
-  iconType: IconType;
-  color: string | keyof typeof colorToClassNameMap;
-}
-
-export interface _EuiSuggestItemPropsBase {
-  /**
-   * Takes `iconType` for EuiIcon and 'color'. 'color' can be tint1 through tint9.
-   */
-  type: Type;
-
-  /**
-   * Label or primary text.
-   */
-  label: string;
-
-  /**
-   * Description or secondary text (optional).
-   */
-  description?: string;
-
-  /**
-   * Percentage width of `label`.
-   * Accepts multiples of `10`, from `20` to `90`.
-   * Label will expand to 100% if `description` is not provided.
-   */
-  labelWidth?: LabelWidthSize;
-
-  /**
-   * Truncates both label and description.
-   */
-  truncate?: boolean;
-}
-
-type PropsForSpan = Omit<HTMLAttributes<HTMLSpanElement>, 'onClick'>;
-type PropsForButton = Omit<
-  ButtonHTMLAttributes<HTMLButtonElement>,
-  'onClick' | 'type'
-> & {
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-};
-
-/**
- * @deprecated
- */
-export type EuiSuggestItemProps = CommonProps &
-  _EuiSuggestItemPropsBase &
-  ExclusiveUnion<PropsForSpan, PropsForButton>;
-
-interface ColorToClassMap {
-  tint0: string;
-  tint1: string;
-  tint2: string;
-  tint3: string;
-  tint4: string;
-  tint5: string;
-  tint6: string;
-  tint7: string;
-  tint8: string;
-  tint9: string;
-  tint10: string;
-  [key: string]: string;
-}
-
-type LabelWidthSize =
-  | '20'
-  | '30'
-  | '40'
-  | '50'
-  | '60'
-  | '70'
-  | '80'
-  | '90'
-  | 20
-  | 30
-  | 40
-  | 50
-  | 60
-  | 70
-  | 80
-  | 90;
-
-const colorToClassNameMap: ColorToClassMap = {
-  tint0: 'euiSuggestItem__type--tint0',
-  tint1: 'euiSuggestItem__type--tint1',
-  tint2: 'euiSuggestItem__type--tint2',
-  tint3: 'euiSuggestItem__type--tint3',
-  tint4: 'euiSuggestItem__type--tint4',
-  tint5: 'euiSuggestItem__type--tint5',
-  tint6: 'euiSuggestItem__type--tint6',
-  tint7: 'euiSuggestItem__type--tint7',
-  tint8: 'euiSuggestItem__type--tint8',
-  tint9: 'euiSuggestItem__type--tint9',
-  tint10: 'euiSuggestItem__type--tint10',
-};
-
-export const COLORS = keysOf(colorToClassNameMap);
-
-/**
- * @deprecated - EuiSuggest is scheduled for deprecation due to low internal usage and high
- * overlap with other existing EUI components. We recommend using EuiSelectable instead,
- * or copying this component into your own application for usage if necessary.
- *
- * The component will be permanently removed in October 2023.
- */
-export const EuiSuggestItem: FunctionComponent<EuiSuggestItemProps> = ({
-  className,
-  label,
-  type,
-  labelWidth = '50',
-  description,
-  truncate = true,
-  onClick,
-  ...rest
-}) => {
-  const classes = classNames(
-    'euiSuggestItem',
-    {
-      'euiSuggestItem--truncate': truncate,
-    },
-    className
-  );
-
-  const labelClassNames = classNames(
-    'euiSuggestItem__label',
-    `euiSuggestItem__label--width${labelWidth}`
-  );
-
-  const descriptionClassNames = classNames('euiSuggestItem__description', {
-    'euiSuggestItem__description--wrap': !truncate,
-  });
-
-  let typeColorClass = '';
-  if (type && type.color) {
-    if (COLORS.indexOf(type.color as string) > -1) {
-      typeColorClass = colorToClassNameMap[type.color];
-    }
-  }
-
-  const innerContent = (
-    <React.Fragment>
-      <span className={`euiSuggestItem__type ${typeColorClass}`}>
-        <EuiIcon
-          type={type.iconType}
-          color="inherit" // forces the icon to inherit its parent color
-        />
-      </span>
-      <span className={labelClassNames} title={label}>
-        {label}
-      </span>
-      {description && (
-        <span className={descriptionClassNames} title={description}>
-          {description}
-        </span>
-      )}
-    </React.Fragment>
-  );
-
-  if (onClick) {
-    return (
-      <button
-        onClick={onClick}
-        className={classes}
-        {...(rest as Omit<PropsForButton, 'onClick' | 'className'>)}
-      >
-        {innerContent}
-      </button>
-    );
-  } else {
-    return (
-      <span className={classes} {...(rest as PropsForSpan)}>
-        {innerContent}
-      </span>
-    );
-  }
-};
diff --git a/src/components/suggest/types.ts b/src/components/suggest/types.ts
deleted file mode 100644
index cd01ebd890e..00000000000
--- a/src/components/suggest/types.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-export const ALL_STATUSES = [
-  'unsaved',
-  'saved',
-  'unchanged',
-  'loading',
-] as const;
-type StatusTuple = typeof ALL_STATUSES;
-export type EuiSuggestStatus = StatusTuple[number];
-
-export interface _Status {
-  icon?: string;
-  color?: string;
-  tooltip?: string;
-}
-
-export interface _EuiSuggestStatusMap {
-  unsaved: _Status;
-  saved: _Status;
-  unchanged: _Status;
-  loading: _Status;
-}
diff --git a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
index 5617a87cf89..794bc452819 100644
--- a/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
+++ b/src/components/table/__snapshots__/table_row_cell.test.tsx.snap
@@ -112,7 +112,21 @@ exports[`truncateText defaults to false 1`] = `
 </td>
 `;
 
-exports[`truncateText is rendered when specified 1`] = `
+exports[`truncateText renders lines configuration 1`] = `
+<td
+  class="euiTableRowCell euiTableRowCell--middle"
+>
+  <div
+    class="euiTableCellContent"
+  >
+    <span
+      class="euiTableCellContent__text euiTextBlockTruncate emotion-euiTextBlockTruncate"
+    />
+  </div>
+</td>
+`;
+
+exports[`truncateText renders true 1`] = `
 <td
   class="euiTableRowCell euiTableRowCell--middle"
 >
diff --git a/src/components/table/table_row_cell.test.tsx b/src/components/table/table_row_cell.test.tsx
index 105149bd5f6..1a3ef10ba43 100644
--- a/src/components/table/table_row_cell.test.tsx
+++ b/src/components/table/table_row_cell.test.tsx
@@ -78,15 +78,32 @@ describe('textOnly', () => {
 });
 
 describe('truncateText', () => {
-  test('defaults to false', () => {
+  it('defaults to false', () => {
     const { container } = render(<EuiTableRowCell />);
 
     expect(container.firstChild).toMatchSnapshot();
   });
 
-  test('is rendered when specified', () => {
+  it('renders true', () => {
     const { container } = render(<EuiTableRowCell truncateText={true} />);
 
+    expect(
+      container.querySelector('.euiTableCellContent--truncateText')
+    ).toBeInTheDocument();
+    expect(container.firstChild).toMatchSnapshot();
+  });
+
+  test('renders lines configuration', () => {
+    const { container } = render(
+      <EuiTableRowCell truncateText={{ lines: 2 }} />
+    );
+
+    expect(
+      container.querySelector('.euiTableCellContent--truncateText')
+    ).not.toBeInTheDocument();
+    expect(container.querySelector('.euiTableCellContent__text')).toHaveClass(
+      'euiTextBlockTruncate'
+    );
     expect(container.firstChild).toMatchSnapshot();
   });
 });
diff --git a/src/components/table/table_row_cell.tsx b/src/components/table/table_row_cell.tsx
index 748efd9c1e0..546fbd93d81 100644
--- a/src/components/table/table_row_cell.tsx
+++ b/src/components/table/table_row_cell.tsx
@@ -8,15 +8,15 @@
 
 import React, {
   CSSProperties,
-  Fragment,
   FunctionComponent,
   ReactElement,
   ReactNode,
   TdHTMLAttributes,
+  useCallback,
 } from 'react';
 import classNames from 'classnames';
-import { CommonProps } from '../common';
 
+import { CommonProps } from '../common';
 import {
   HorizontalAlignment,
   LEFT_ALIGNMENT,
@@ -24,6 +24,8 @@ import {
   CENTER_ALIGNMENT,
   useIsWithinBreakpoints,
 } from '../../services';
+import { isObject } from '../../services/predicate';
+import { EuiTextBlockTruncate } from '../text_truncate';
 
 import { resolveWidthAsStyle } from './utils';
 
@@ -42,9 +44,12 @@ interface EuiTableRowCellSharedPropsShape {
    */
   textOnly?: boolean;
   /**
-   * Don't allow line breaks within cells
+   * Indicates whether this column should truncate overflowing text content.
+   * - Set to `true` to enable single-line truncation.
+   * - To enable multi-line truncation, use a configuration object with `lines`
+   * set to a number of lines to truncate to.
    */
-  truncateText?: boolean;
+  truncateText?: boolean | { lines: number };
   width?: CSSProperties['width'];
 }
 
@@ -138,7 +143,7 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
     'euiTableCellContent--alignRight': align === RIGHT_ALIGNMENT,
     'euiTableCellContent--alignCenter': align === CENTER_ALIGNMENT,
     'euiTableCellContent--showOnHover': showOnHover,
-    'euiTableCellContent--truncateText': truncateText,
+    'euiTableCellContent--truncateText': truncateText === true,
     // We're doing this rigamarole instead of creating `euiTableCellContent--textOnly` for BWC
     // purposes for the time-being.
     'euiTableCellContent--overflowingContent': textOnly !== true,
@@ -171,23 +176,33 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
 
   const styleObj = resolveWidthAsStyle(style, widthValue);
 
-  function modifyChildren(children: ReactNode) {
-    let modifiedChildren = children;
-
-    if (textOnly === true) {
-      modifiedChildren = <span className={childClasses}>{children}</span>;
-    } else if (React.isValidElement(children)) {
-      modifiedChildren = React.Children.map(
-        children,
-        (child: ReactElement<CommonProps>) =>
-          React.cloneElement(child, {
-            className: classNames(child.props.className, childClasses),
-          })
-      );
-    }
-
-    return modifiedChildren;
-  }
+  const modifyChildren = useCallback(
+    (children: ReactNode) => {
+      let modifiedChildren = children;
+
+      if (textOnly === true) {
+        modifiedChildren = <span className={childClasses}>{children}</span>;
+      } else if (React.isValidElement(children)) {
+        modifiedChildren = React.Children.map(
+          children,
+          (child: ReactElement<CommonProps>) =>
+            React.cloneElement(child, {
+              className: classNames(child.props.className, childClasses),
+            })
+        );
+      }
+      if (isObject(truncateText) && truncateText.lines) {
+        modifiedChildren = (
+          <EuiTextBlockTruncate lines={truncateText.lines} cloneElement>
+            {modifiedChildren}
+          </EuiTextBlockTruncate>
+        );
+      }
+
+      return modifiedChildren;
+    },
+    [childClasses, textOnly, truncateText]
+  );
 
   const childrenNode = modifyChildren(children);
 
@@ -223,14 +238,14 @@ export const EuiTableRowCell: FunctionComponent<Props> = ({
 
         {/* Content depending on mobile render existing */}
         {mobileOptions.render ? (
-          <Fragment>
+          <>
             <div className={`${mobileContentClasses} ${showForMobileClasses}`}>
               {modifyChildren(mobileOptions.render)}
             </div>
             <div className={`${contentClasses} ${hideForMobileClasses}`}>
               {childrenNode}
             </div>
-          </Fragment>
+          </>
         ) : (
           <div className={contentClasses}>{childrenNode}</div>
         )}
diff --git a/src/components/text/text.styles.test.ts b/src/components/text/text.styles.test.ts
index 9407755296e..d90aa4cd3a8 100644
--- a/src/components/text/text.styles.test.ts
+++ b/src/components/text/text.styles.test.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../test/internal';
+import { renderHook } from '@testing-library/react';
 import { useEuiTheme } from '../../services';
 
 import { TEXT_SIZES } from './text';
@@ -15,8 +15,8 @@ import { euiTextStyles } from './text.styles';
 describe('euiTextStyles sizes', () => {
   TEXT_SIZES.forEach((size) => {
     test(size, () => {
-      const emotionReturn = testCustomHook(() => euiTextStyles(useEuiTheme()))
-        .return as any;
+      const emotionReturn = renderHook(() => euiTextStyles(useEuiTheme()))
+        .result.current;
       expect(emotionReturn[size].styles).toMatchSnapshot();
     });
   });
diff --git a/src/components/text_truncate/index.ts b/src/components/text_truncate/index.ts
index a2785e5a6c7..4d5bbcb18b0 100644
--- a/src/components/text_truncate/index.ts
+++ b/src/components/text_truncate/index.ts
@@ -12,4 +12,7 @@ export type {
 } from './text_truncate';
 export { EuiTextTruncate } from './text_truncate';
 
+export type { EuiTextBlockTruncateProps } from './text_block_truncate';
+export { EuiTextBlockTruncate } from './text_block_truncate';
+
 export { TruncationUtils } from './utils';
diff --git a/src/components/text_truncate/text_block_truncate.stories.tsx b/src/components/text_truncate/text_block_truncate.stories.tsx
new file mode 100644
index 00000000000..fae93b3b2ca
--- /dev/null
+++ b/src/components/text_truncate/text_block_truncate.stories.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiPanel } from '../panel';
+
+import {
+  EuiTextBlockTruncate,
+  EuiTextBlockTruncateProps,
+} from './text_block_truncate';
+
+const meta: Meta<EuiTextBlockTruncateProps> = {
+  title: 'EuiTextBlockTruncate',
+  component: EuiTextBlockTruncate,
+  decorators: [
+    (Story) => (
+      <EuiPanel style={{ width: 200 }}>
+        <Story />
+      </EuiPanel>
+    ),
+  ],
+};
+
+export default meta;
+type Story = StoryObj<EuiTextBlockTruncateProps>;
+
+export const Playground: Story = {
+  render: ({ children, ...args }) => (
+    <EuiTextBlockTruncate {...args}>
+      <p className="cloneElementDemo">{children}</p>
+    </EuiTextBlockTruncate>
+  ),
+  args: {
+    lines: 3,
+    children:
+      "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.",
+  },
+};
diff --git a/src/components/text_truncate/text_block_truncate.test.tsx b/src/components/text_truncate/text_block_truncate.test.tsx
new file mode 100644
index 00000000000..d954c93d6bf
--- /dev/null
+++ b/src/components/text_truncate/text_block_truncate.test.tsx
@@ -0,0 +1,45 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+import { render } from '../../test/rtl';
+import { shouldRenderCustomStyles } from '../../test/internal';
+
+import { EuiTextBlockTruncate } from './text_block_truncate';
+
+describe('EuiTextBlockTruncate', () => {
+  shouldRenderCustomStyles(<EuiTextBlockTruncate lines={3} />);
+
+  it('renders', () => {
+    const { container } = render(
+      <EuiTextBlockTruncate lines={3}>Hello world</EuiTextBlockTruncate>
+    );
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <div
+        class="euiTextBlockTruncate emotion-euiTextBlockTruncate"
+      >
+        Hello world
+      </div>
+    `);
+  });
+
+  it('allows cloning styles onto the child element instead of rendering an extra div wrapper', () => {
+    const { container } = render(
+      <EuiTextBlockTruncate lines={3} cloneElement={true}>
+        <p className="test">Hello world</p>
+      </EuiTextBlockTruncate>
+    );
+    expect(container.firstChild).toMatchInlineSnapshot(`
+      <p
+        class="test euiTextBlockTruncate emotion-euiTextBlockTruncate"
+      >
+        Hello world
+      </p>
+    `);
+  });
+});
diff --git a/src/components/text_truncate/text_block_truncate.tsx b/src/components/text_truncate/text_block_truncate.tsx
new file mode 100644
index 00000000000..8e91d026e54
--- /dev/null
+++ b/src/components/text_truncate/text_block_truncate.tsx
@@ -0,0 +1,73 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, {
+  isValidElement,
+  FunctionComponent,
+  HTMLAttributes,
+  PropsWithChildren,
+  useMemo,
+} from 'react';
+import { css } from '@emotion/react';
+import classNames from 'classnames';
+
+import { CommonProps } from '../common';
+import { cloneElementWithCss } from '../../services';
+
+const styles = {
+  euiTextBlockTruncate: css`
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 0;
+    overflow: hidden;
+  `,
+};
+
+export type EuiTextBlockTruncateProps = PropsWithChildren &
+  CommonProps &
+  HTMLAttributes<HTMLDivElement> & {
+    /**
+     * Number of lines of text to truncate to
+     */
+    lines: number;
+    /**
+     * Applies styling to the child element instead of rendering a parent wrapper `div`.
+     * Can only be used when wrapping a *single* child element/tag, and not raw text.
+     */
+    cloneElement?: boolean;
+  };
+
+export const EuiTextBlockTruncate: FunctionComponent<
+  EuiTextBlockTruncateProps
+> = ({ children, className, style, lines, cloneElement, ...rest }) => {
+  const classes = classNames('euiTextBlockTruncate', className);
+
+  const cssStyles = styles.euiTextBlockTruncate;
+
+  const inlineStyles = useMemo(
+    () => ({
+      WebkitLineClamp: lines,
+      ...style,
+    }),
+    [lines, style]
+  );
+
+  if (isValidElement(children) && cloneElement) {
+    return cloneElementWithCss(children, {
+      css: cssStyles,
+      style: { ...children.props.style, ...inlineStyles },
+      className: classNames(children.props.className, classes),
+    });
+  } else {
+    return (
+      <div className={classes} css={cssStyles} style={inlineStyles} {...rest}>
+        {children}
+      </div>
+    );
+  }
+};
diff --git a/src/components/text_truncate/text_truncate.stories.tsx b/src/components/text_truncate/text_truncate.stories.tsx
index 82efe8a7755..d72d8f8cd90 100644
--- a/src/components/text_truncate/text_truncate.stories.tsx
+++ b/src/components/text_truncate/text_truncate.stories.tsx
@@ -9,6 +9,10 @@
 import React, { useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
 import { css } from '@emotion/react';
+import {
+  hideStorybookControls,
+  disableStorybookControls,
+} from '../../../.storybook/utils';
 
 import { EuiHighlight, EuiMark } from '../../components';
 
@@ -21,17 +25,17 @@ const meta: Meta<EuiTextTruncateProps> = {
     truncationOffset: { if: { arg: 'truncation', neq: 'startEnd' } }, // Should also not show on `middle`, but Storybook doesn't currently support multiple if conditions :(
     truncationPosition: { if: { arg: 'truncation', eq: 'startEnd' } },
   },
+  args: {
+    text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
+    // Component defaults
+    truncation: 'end',
+    ellipsis: '…',
+  },
 };
 
 export default meta;
 type Story = StoryObj<EuiTextTruncateProps>;
 
-const componentDefaults = {
-  text: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
-  truncation: 'end',
-  ellipsis: '…',
-} as const;
-
 export const Playground: Story = {
   render: (props) => (
     <div css={{ inlineSize: props.width }}>
@@ -39,7 +43,6 @@ export const Playground: Story = {
     </div>
   ),
   args: {
-    ...componentDefaults,
     width: 200,
   },
 };
@@ -66,12 +69,9 @@ export const ResizeObserver: Story = {
     </>
   ),
   args: {
-    ...componentDefaults,
     onResize: console.log,
   },
-  argTypes: {
-    width: { control: false },
-  },
+  argTypes: disableStorybookControls<EuiTextTruncateProps>(['width']),
 };
 
 export const StartEndAnchorForSearch: Story = {
@@ -116,18 +116,17 @@ export const StartEndAnchorForSearch: Story = {
     );
   },
   args: {
-    ...componentDefaults,
     width: 200,
     truncation: 'startEnd',
     truncationPosition: 30,
   },
-  argTypes: {
+  argTypes: hideStorybookControls<EuiTextTruncateProps>([
     // Disable uncontrollable props
-    truncation: { table: { disable: true } },
-    truncationPosition: { table: { disable: true } },
+    'truncation',
+    'truncationPosition',
     // Disable props that aren't useful for this this demo
-    truncationOffset: { table: { disable: true } },
-    children: { table: { disable: true } },
-    onResize: { table: { disable: true } },
-  },
+    'truncationOffset',
+    'children',
+    'onResize',
+  ]),
 };
diff --git a/src/components/title/title.styles.test.ts b/src/components/title/title.styles.test.ts
index 1428f5e21a1..d270a0ed775 100644
--- a/src/components/title/title.styles.test.ts
+++ b/src/components/title/title.styles.test.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../test/internal';
+import { renderHook } from '@testing-library/react';
 
 import { TITLE_SIZES } from './title';
 import { useEuiTitle } from './title.styles';
@@ -16,7 +16,7 @@ describe('euiTitle mixin', () => {
     TITLE_SIZES.forEach((size) => {
       it(size, () => {
         expect(
-          testCustomHook(() => useEuiTitle(size)).return
+          renderHook(() => useEuiTitle(size)).result.current
         ).toMatchSnapshot();
       });
     });
diff --git a/src/components/token/__snapshots__/token.test.tsx.snap b/src/components/token/__snapshots__/token.test.tsx.snap
index b776fbd354e..83caf2c1e79 100644
--- a/src/components/token/__snapshots__/token.test.tsx.snap
+++ b/src/components/token/__snapshots__/token.test.tsx.snap
@@ -256,7 +256,7 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenDate is rendered 1`] =
 
 exports[`EuiToken props iconType as EuiTokenMapType tokenDenseVector is rendered 1`] = `
 <span
-  class="euiToken emotion-euiToken-square-light-s-euiColorVis2"
+  class="euiToken emotion-euiToken-square-light-s-euiColorVis5"
 >
   <span
     data-euiicon-type="tokenDenseVector"
@@ -694,6 +694,26 @@ exports[`EuiToken props iconType as EuiTokenMapType tokenVariable is rendered 1`
 </span>
 `;
 
+exports[`EuiToken props iconType as EuiTokenMapType tokenVectorDense is rendered 1`] = `
+<span
+  class="euiToken emotion-euiToken-square-light-s-euiColorVis5"
+>
+  <span
+    data-euiicon-type="tokenVectorDense"
+  />
+</span>
+`;
+
+exports[`EuiToken props iconType as EuiTokenMapType tokenVectorSparse is rendered 1`] = `
+<span
+  class="euiToken emotion-euiToken-square-light-s-euiColorVis1"
+>
+  <span
+    data-euiicon-type="tokenVectorSparse"
+  />
+</span>
+`;
+
 exports[`EuiToken props shape circle is rendered 1`] = `
 <span
   class="euiToken emotion-euiToken-circle-light-s-gray"
diff --git a/src/components/token/token_map.ts b/src/components/token/token_map.ts
index 522e06f2a83..cc369296548 100644
--- a/src/components/token/token_map.ts
+++ b/src/components/token/token_map.ts
@@ -18,7 +18,6 @@ export type EuiTokenMapType =
   | 'tokenCompletionSuggester'
   | 'tokenConstant'
   | 'tokenDate'
-  | 'tokenDenseVector'
   | 'tokenElement'
   | 'tokenEnum'
   | 'tokenEnumMember'
@@ -61,7 +60,10 @@ export type EuiTokenMapType =
   | 'tokenTag'
   | 'tokenText'
   | 'tokenTokenCount'
-  | 'tokenVariable';
+  | 'tokenVariable'
+  | 'tokenVectorDense'
+  | 'tokenDenseVector' // NOTE: This is an undocumented alias for `tokenVectorDense`, added for legacy compatability
+  | 'tokenVectorSparse';
 
 /**
  * Most of the style combinations for tokens are semi-arbitrary. However, there was an effort
@@ -108,10 +110,6 @@ export const TOKEN_MAP: {
     shape: 'square',
     color: 'euiColorVis6',
   },
-  tokenDenseVector: {
-    shape: 'square',
-    color: 'euiColorVis2',
-  },
   tokenElement: {
     shape: 'square',
     color: 'euiColorVis3',
@@ -284,4 +282,16 @@ export const TOKEN_MAP: {
     shape: 'circle',
     color: 'euiColorVis7',
   },
+  tokenVectorDense: {
+    shape: 'square',
+    color: 'euiColorVis5',
+  },
+  tokenDenseVector: {
+    shape: 'square',
+    color: 'euiColorVis5',
+  },
+  tokenVectorSparse: {
+    shape: 'square',
+    color: 'euiColorVis1',
+  },
 };
diff --git a/src/global_styling/mixins/_color.test.ts b/src/global_styling/mixins/_color.test.ts
index c0b98fb5c67..7f7470c31e5 100644
--- a/src/global_styling/mixins/_color.test.ts
+++ b/src/global_styling/mixins/_color.test.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../test/internal';
+import { renderHook } from '@testing-library/react';
 import {
   BACKGROUND_COLORS,
   useEuiBackgroundColor,
@@ -18,16 +18,16 @@ describe('useEuiBackgroundColor mixin returns a calculated background version',
     BACKGROUND_COLORS.forEach((color) => {
       it(color, () => {
         expect(
-          testCustomHook(() => useEuiBackgroundColor(color)).return
+          renderHook(() => useEuiBackgroundColor(color)).result.current
         ).toMatchSnapshot();
       });
 
       describe('as transparent', () => {
         it(color, () => {
           expect(
-            testCustomHook(() =>
+            renderHook(() =>
               useEuiBackgroundColor(color, { method: 'transparent' })
-            ).return
+            ).result.current
           ).toMatchSnapshot();
         });
       });
@@ -36,7 +36,7 @@ describe('useEuiBackgroundColor mixin returns a calculated background version',
 });
 
 describe('useEuiBackgroundColorCSS hook returns an object of Emotion background-color properties', () => {
-  const colors = testCustomHook(useEuiBackgroundColorCSS).return as any;
+  const colors = renderHook(useEuiBackgroundColorCSS).result.current as any;
 
   describe('for each color:', () => {
     Object.entries(colors).map(([color, cssObj]) => {
diff --git a/src/global_styling/mixins/_header.scss b/src/global_styling/mixins/_header.scss
deleted file mode 100644
index aae8c7eb1fc..00000000000
--- a/src/global_styling/mixins/_header.scss
+++ /dev/null
@@ -1,29 +0,0 @@
-@import '../variables/header';
-
-@mixin euiHeaderAffordForFixed($headerHeight: $euiHeaderHeightCompensation) {
-  @warn 'This mixin will shortly be deprecated. Use the CSS variable var(--euiFixedHeadersOffset) instead, which updates dynamically based on the number of fixed headers on the page.';
-
-  // The `@at-root #{&}` allows for grouping alongside another specific body class.
-  // When not applied inside of another selector, it simply renders with the single class
-  @at-root #{&}.euiBody--headerIsFixed {
-    padding-top: $headerHeight;
-
-    // When the EuiHeader is fixed, we need to account for it in the position of the flyout
-    &:not(.euiDataGrid__restrictBody) .euiFlyout,
-    .euiCollapsibleNav {
-      top: $headerHeight;
-      height: calc(100% - #{$headerHeight});
-    }
-
-    @include euiBreakpoint('m', 'l', 'xl') {
-      .euiPageSideBar--sticky {
-        max-height: calc(100vh - #{$headerHeight});
-        top: #{$headerHeight};
-      }
-    }
-
-    &:not(.euiDataGrid__restrictBody) .euiOverlayMask[data-relative-to-header='below'] {
-      top: #{$headerHeight};
-    }
-  }
-}
diff --git a/src/global_styling/mixins/_index.scss b/src/global_styling/mixins/_index.scss
index 1e23b8a2228..0d8915a49d4 100644
--- a/src/global_styling/mixins/_index.scss
+++ b/src/global_styling/mixins/_index.scss
@@ -8,7 +8,6 @@
 
 @import 'button';
 @import 'form';
-@import 'header';
 @import 'loading';
 @import 'link';
 @import 'panel';
diff --git a/src/global_styling/mixins/_padding.test.ts b/src/global_styling/mixins/_padding.test.ts
index 92b388c33f7..4dcbcfb54a0 100644
--- a/src/global_styling/mixins/_padding.test.ts
+++ b/src/global_styling/mixins/_padding.test.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../test/internal';
+import { renderHook } from '@testing-library/react';
 import { PADDING_SIZES, useEuiPaddingSize, useEuiPaddingCSS } from './_padding';
 import { LOGICAL_SIDES } from '../functions/logicals';
 
@@ -15,7 +15,7 @@ describe('useEuiPaddingSize returns a static padding value', () => {
     PADDING_SIZES.forEach((size) => {
       it(size, () => {
         expect(
-          testCustomHook(() => useEuiPaddingSize(size)).return
+          renderHook(() => useEuiPaddingSize(size)).result.current
         ).toMatchSnapshot();
       });
     });
@@ -25,7 +25,7 @@ describe('useEuiPaddingSize returns a static padding value', () => {
 describe('useEuiPaddingCSS hook returns an object of Emotion padding properties', () => {
   LOGICAL_SIDES.forEach((side) => {
     describe(`for side: ${side},`, () => {
-      const sizes = testCustomHook(() => useEuiPaddingCSS(side)).return as any;
+      const sizes = renderHook(() => useEuiPaddingCSS(side)).result.current;
 
       describe('for each size:', () => {
         Object.entries(sizes).map(([size, cssObj]) => {
diff --git a/src/global_styling/mixins/_responsive.test.ts b/src/global_styling/mixins/_responsive.test.ts
index 6c5da7c013f..eb2de4e1cb2 100644
--- a/src/global_styling/mixins/_responsive.test.ts
+++ b/src/global_styling/mixins/_responsive.test.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../test/internal';
+import { renderHook } from '@testing-library/react';
 import { EuiThemeBreakpoints, _EuiThemeBreakpoint } from '../variables';
 import {
   useEuiBreakpoint,
@@ -35,12 +35,12 @@ describe('useEuiBreakpoint', () => {
       'returns a media query for two element breakpoint combinations (%s and %s)',
       (minSize, maxSize) => {
         expect(
-          testCustomHook(() =>
+          renderHook(() =>
             useEuiBreakpoint([
               minSize as _EuiThemeBreakpoint,
               maxSize as _EuiThemeBreakpoint,
             ])
-          ).return
+          ).result.current
         ).toMatchSnapshot();
       }
     );
@@ -50,7 +50,7 @@ describe('useEuiBreakpoint', () => {
     EuiThemeBreakpoints.forEach((size) => {
       test(`(${size})`, () => {
         expect(
-          testCustomHook(() => useEuiBreakpoint([size])).return
+          renderHook(() => useEuiBreakpoint([size])).result.current
         ).toMatchSnapshot();
       });
     });
@@ -59,7 +59,7 @@ describe('useEuiBreakpoint', () => {
   describe('breakpoint size arrays with more than 2 sizes', () => {
     it('should use the first and last items in the array', () => {
       expect(
-        testCustomHook(() => useEuiBreakpoint(['s', 'm', 'l'])).return
+        renderHook(() => useEuiBreakpoint(['s', 'm', 'l'])).result.current
       ).toMatchInlineSnapshot(
         '"@media only screen and (min-width: 575px) and (max-width: 1199px)"'
       );
@@ -67,7 +67,7 @@ describe('useEuiBreakpoint', () => {
 
     it('handles sorting the array if sizes are passed in the wrong order', () => {
       expect(
-        testCustomHook(() => useEuiBreakpoint(['l', 's', 'm'])).return
+        renderHook(() => useEuiBreakpoint(['l', 's', 'm'])).result.current
       ).toMatchInlineSnapshot(
         '"@media only screen and (min-width: 575px) and (max-width: 1199px)"'
       );
@@ -76,13 +76,13 @@ describe('useEuiBreakpoint', () => {
 
   it('does not generate a min-width if the min size is xs', () => {
     expect(
-      testCustomHook(() => useEuiBreakpoint(['xs', 'm'])).return
+      renderHook(() => useEuiBreakpoint(['xs', 'm'])).result.current
     ).toMatchInlineSnapshot('"@media only screen and (max-width: 991px)"');
   });
 
   it('skips generating a max-width if the max size is xl', () => {
     expect(
-      testCustomHook(() => useEuiBreakpoint(['m', 'xl'])).return
+      renderHook(() => useEuiBreakpoint(['m', 'xl'])).result.current
     ).toMatchInlineSnapshot('"@media only screen and (min-width: 768px)"');
   });
 
@@ -91,15 +91,15 @@ describe('useEuiBreakpoint', () => {
 
     test('if at least one input is not passed', () => {
       // @ts-expect-error Source has 0 element(s) but target requires 1
-      expect(testCustomHook(() => useEuiBreakpoint([])).return).toEqual(
+      expect(renderHook(() => useEuiBreakpoint([])).result.current).toEqual(
         fallbackOutput
       );
     });
 
     test('if a breakpoint key without a corresponding value is passed', () => {
-      expect(testCustomHook(() => useEuiBreakpoint(['asdf'])).return).toEqual(
-        fallbackOutput
-      );
+      expect(
+        renderHook(() => useEuiBreakpoint(['asdf'])).result.current
+      ).toEqual(fallbackOutput);
     });
   });
 });
@@ -109,7 +109,7 @@ describe('euiMinBreakpoint', () => {
     EuiThemeBreakpoints.slice(1).forEach((size) => {
       it(`(${size})`, () => {
         expect(
-          testCustomHook(() => useEuiMinBreakpoint(size)).return
+          renderHook(() => useEuiMinBreakpoint(size)).result.current
         ).toMatchSnapshot();
       });
     });
@@ -122,14 +122,14 @@ describe('euiMinBreakpoint', () => {
     it('warns if using min-width on a breakpoint that equals 0px', () => {
       // This functionally does nothing, hence the warning
       expect(
-        testCustomHook(() => useEuiMinBreakpoint('xs')).return
+        renderHook(() => useEuiMinBreakpoint('xs')).result.current
       ).toMatchInlineSnapshot('"@media only screen"');
       expect(warnSpy).toHaveBeenCalledWith('Invalid min breakpoint size: xs');
     });
 
     it('warns if an invalid size is passed', () => {
       expect(
-        testCustomHook(() => useEuiMinBreakpoint('asdf')).return
+        renderHook(() => useEuiMinBreakpoint('asdf')).result.current
       ).toMatchInlineSnapshot('"@media only screen"');
       expect(warnSpy).toHaveBeenCalledWith('Invalid min breakpoint size: asdf');
     });
@@ -141,7 +141,7 @@ describe('euiMaxBreakpoint', () => {
     EuiThemeBreakpoints.slice(1).forEach((size) => {
       it(`(${size})`, () => {
         expect(
-          testCustomHook(() => useEuiMaxBreakpoint(size)).return
+          renderHook(() => useEuiMaxBreakpoint(size)).result.current
         ).toMatchSnapshot();
       });
     });
@@ -154,14 +154,14 @@ describe('euiMaxBreakpoint', () => {
     it('warns if using max-width on a breakpoint that equals 0px', () => {
       // This functionally does nothing, hence the warning
       expect(
-        testCustomHook(() => useEuiMaxBreakpoint('xs')).return
+        renderHook(() => useEuiMaxBreakpoint('xs')).result.current
       ).toMatchInlineSnapshot('"@media only screen"');
       expect(warnSpy).toHaveBeenCalledWith('Invalid max breakpoint size: xs');
     });
 
     it('warns if an invalid size is passed', () => {
       expect(
-        testCustomHook(() => useEuiMaxBreakpoint('asdf')).return
+        renderHook(() => useEuiMaxBreakpoint('asdf')).result.current
       ).toMatchInlineSnapshot('"@media only screen"');
       expect(warnSpy).toHaveBeenCalledWith('Invalid max breakpoint size: asdf');
     });
diff --git a/src/global_styling/mixins/_states.test.ts b/src/global_styling/mixins/_states.test.ts
index 53f81f0d677..c00026ca290 100644
--- a/src/global_styling/mixins/_states.test.ts
+++ b/src/global_styling/mixins/_states.test.ts
@@ -6,26 +6,26 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../test/internal';
+import { renderHook } from '@testing-library/react';
 import { useEuiFocusRing } from './_states';
 
 describe('useEuiFocusRing hook returns a string', () => {
   describe('for each offset:', () => {
     it('inset', () => {
       expect(
-        testCustomHook(() => useEuiFocusRing('inset')).return
+        renderHook(() => useEuiFocusRing('inset')).result.current
       ).toMatchSnapshot();
     });
 
     it('outset', () => {
       expect(
-        testCustomHook(() => useEuiFocusRing('outset')).return
+        renderHook(() => useEuiFocusRing('outset')).result.current
       ).toMatchSnapshot();
     });
 
     it('16px', () => {
       expect(
-        testCustomHook(() => useEuiFocusRing('16px')).return
+        renderHook(() => useEuiFocusRing('16px')).result.current
       ).toMatchSnapshot();
     });
   });
@@ -33,7 +33,7 @@ describe('useEuiFocusRing hook returns a string', () => {
   describe('for any color:', () => {
     it('blue', () => {
       expect(
-        testCustomHook(() => useEuiFocusRing('outset', 'blue')).return
+        renderHook(() => useEuiFocusRing('outset', 'blue')).result.current
       ).toMatchSnapshot();
     });
   });
diff --git a/src/global_styling/mixins/_typography.test.ts b/src/global_styling/mixins/_typography.test.ts
index 3ce71130925..a76dcb43a89 100644
--- a/src/global_styling/mixins/_typography.test.ts
+++ b/src/global_styling/mixins/_typography.test.ts
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../test/internal';
+import { renderHook } from '@testing-library/react';
 
 import { EuiThemeFontScales, EuiThemeFontUnits } from '../variables/typography';
 import {
@@ -23,7 +23,7 @@ describe('euiFontSize', () => {
         EuiThemeFontScales.forEach((size) => {
           test(size, () => {
             expect(
-              testCustomHook(() => useEuiFontSize(size, { unit })).return
+              renderHook(() => useEuiFontSize(size, { unit })).result.current
             ).toMatchSnapshot();
           });
         });
@@ -33,13 +33,16 @@ describe('euiFontSize', () => {
 
   it('handles the optional customScale property by multiplying it against the passed scale', () => {
     expect(
-      testCustomHook(() => useEuiFontSize('m', { customScale: 'xs' })).return
+      renderHook(() => useEuiFontSize('m', { customScale: 'xs' })).result
+        .current
     ).toMatchSnapshot({}, 'm scale with xs customScale');
     expect(
-      testCustomHook(() => useEuiFontSize('l', { customScale: 'xxs' })).return
+      renderHook(() => useEuiFontSize('l', { customScale: 'xxs' })).result
+        .current
     ).toMatchSnapshot({}, 'l scale with xxs customScale');
     expect(
-      testCustomHook(() => useEuiFontSize('s', { customScale: 'xl' })).return
+      renderHook(() => useEuiFontSize('s', { customScale: 'xl' })).result
+        .current
     ).toMatchSnapshot({}, 's scale with xl customScale');
   });
 });
@@ -62,6 +65,8 @@ describe('euiTextTruncate', () => {
 
 describe('euiNumberFormat', () => {
   it('returns a string of CSS text', () => {
-    expect(testCustomHook(() => useEuiNumberFormat()).return).toMatchSnapshot();
+    expect(
+      renderHook(() => useEuiNumberFormat()).result.current
+    ).toMatchSnapshot();
   });
 });
diff --git a/src/global_styling/reset/global_styles.tsx b/src/global_styling/reset/global_styles.tsx
index f485bd0199c..55cd8d5cc2c 100644
--- a/src/global_styling/reset/global_styles.tsx
+++ b/src/global_styling/reset/global_styles.tsx
@@ -37,12 +37,15 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => {
    * This font reset sets all our base font/typography related properties
    * that are needed to override browser-specific element settings.
    */
-  const fontReset = `
-    font-family: ${font.family};
-    font-size: ${`${font.scale[font.body.scale] * base}px`};
-    line-height: ${base / (font.scale[font.body.scale] * base)};
-    font-weight: ${font.weight[font.body.weight]};
-  `;
+  const fontBodyScale = font.scale[font.body.scale];
+  const fontReset = {
+    fontFamily: font.family,
+    fontSize: `${
+      font.defaultUnits === 'px' ? fontBodyScale * base : fontBodyScale
+    }${font.defaultUnits}`,
+    lineHeight: base / (fontBodyScale * base),
+    fontWeight: font.weight[font.body.weight],
+  };
 
   /**
    * Final styles
@@ -70,7 +73,10 @@ export const EuiGlobalStyles = ({}: EuiGlobalStylesProps) => {
     input,
     textarea,
     select {
-      ${fontReset}
+      ${{
+        ...fontReset,
+        fontSize: '1rem', // Inherit from html root
+      }}
     }
 
     // Chrome has opinionated select:disabled opacity styles that need to be overridden
diff --git a/src/global_styling/utility/__snapshots__/utility.test.tsx.snap b/src/global_styling/utility/__snapshots__/utility.test.ts.snap
similarity index 100%
rename from src/global_styling/utility/__snapshots__/utility.test.tsx.snap
rename to src/global_styling/utility/__snapshots__/utility.test.ts.snap
diff --git a/src/global_styling/utility/utility.test.tsx b/src/global_styling/utility/utility.test.ts
similarity index 63%
rename from src/global_styling/utility/utility.test.tsx
rename to src/global_styling/utility/utility.test.ts
index 7a5a1725dce..a28ff43c999 100644
--- a/src/global_styling/utility/utility.test.tsx
+++ b/src/global_styling/utility/utility.test.ts
@@ -6,20 +6,18 @@
  * Side Public License, v 1.
  */
 
-import { testCustomHook } from '../../test/internal';
+import { renderHook } from '@testing-library/react';
 import { useEuiTheme } from '../../services';
 import { globalStyles } from './utility';
 
 describe('global utility styles', () => {
-  const useTestHook = () => {
-    const euiTheme = useEuiTheme();
-    return globalStyles(euiTheme);
-  };
-
   it('generates static global styles', () => {
-    const rawStyles = (testCustomHook(useTestHook) as any).return.styles;
+    const { result } = renderHook(() => {
+      const euiTheme = useEuiTheme();
+      return globalStyles(euiTheme);
+    });
     // Make Emotion's minification a little less annoying to read
-    const globalStyles = rawStyles.replace(/}\.eui-/g, '}\n.eui-');
-    expect(globalStyles).toMatchSnapshot();
+    const styles = result.current.styles.replace(/}\.eui-/g, '}\n.eui-');
+    expect(styles).toMatchSnapshot();
   });
 });
diff --git a/src/global_styling/variables/_header.scss b/src/global_styling/variables/_header.scss
deleted file mode 100644
index df68553c62e..00000000000
--- a/src/global_styling/variables/_header.scss
+++ /dev/null
@@ -1,3 +0,0 @@
-$euiHeaderHeight: $euiSizeXXL + $euiSizeS !default;
-// Use the following variable in other components to afford for the fixed header
-$euiHeaderHeightCompensation: $euiHeaderHeight !default;
diff --git a/src/global_styling/variables/_index.scss b/src/global_styling/variables/_index.scss
index 80fbed518bb..6971a19d892 100644
--- a/src/global_styling/variables/_index.scss
+++ b/src/global_styling/variables/_index.scss
@@ -21,7 +21,6 @@
 
 @import 'buttons';
 @import 'form';
-@import 'header';
 @import 'page';
 @import 'panel';
 @import 'tool_tip';
diff --git a/src/services/accessibility/accessible_click_keys.ts b/src/services/accessibility/accessible_click_keys.ts
deleted file mode 100644
index 77b7864e0a1..00000000000
--- a/src/services/accessibility/accessible_click_keys.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import { ENTER, SPACE } from '../keys';
-
-// These keys are used to execute click actions on interactive elements like buttons and links.
-export const accessibleClickKeys = {
-  [ENTER]: 'enter',
-  [SPACE]: 'space',
-};
diff --git a/src/services/accessibility/cascading_menu_keys.ts b/src/services/accessibility/cascading_menu_keys.ts
deleted file mode 100644
index 92009245223..00000000000
--- a/src/services/accessibility/cascading_menu_keys.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-/**
- * These keys are used for navigating cascading menu UI components.
- *
- * ARROW_DOWN: Select the next item in the list.
- * ARROW_LEFT: Show the previous menu.
- * ARROW_RIGHT: Show the next menu for the selected item.
- * ARROW_UP: Select the previous item in the list.
- * ESC: Deselect the current selection and hide the list.
- * TAB: Normal tabbing navigation is still supported.
- */
-
-import {
-  ARROW_DOWN,
-  ARROW_LEFT,
-  ARROW_RIGHT,
-  ARROW_UP,
-  ESCAPE,
-  TAB,
-} from '../keys';
-
-export const cascadingMenuKeys = {
-  ARROW_DOWN,
-  ARROW_LEFT,
-  ARROW_RIGHT,
-  ARROW_UP,
-  ESCAPE,
-  TAB,
-};
diff --git a/src/services/accessibility/combo_box_keys.ts b/src/services/accessibility/combo_box_keys.ts
deleted file mode 100644
index f638a645c95..00000000000
--- a/src/services/accessibility/combo_box_keys.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-/**
- * These keys are used for navigating combobox UI components.
- *
- * ARROW_UP: Select the previous item in the list.
- * ARROW_DOWN: Select the next item in the list.
- * ENTER / TAB: Complete input with the current selection.
- * ESC: Deselect the current selection and hide the list.
- */
-
-import { ARROW_DOWN, ENTER, ESCAPE, TAB, ARROW_UP } from '../keys';
-
-export const comboBoxKeys = {
-  ARROW_DOWN,
-  ARROW_UP,
-  ENTER,
-  ESCAPE,
-  TAB,
-};
diff --git a/src/services/accessibility/index.ts b/src/services/accessibility/index.ts
index 987a02d1a91..390682faaa9 100644
--- a/src/services/accessibility/index.ts
+++ b/src/services/accessibility/index.ts
@@ -6,7 +6,4 @@
  * Side Public License, v 1.
  */
 
-export { accessibleClickKeys } from './accessible_click_keys';
-export { cascadingMenuKeys } from './cascading_menu_keys';
-export { comboBoxKeys } from './combo_box_keys';
 export { htmlIdGenerator, useGeneratedHtmlId } from './html_id_generator';
diff --git a/src/services/emotion/css.test.ts b/src/services/emotion/css.test.ts
new file mode 100644
index 00000000000..2e2bab76422
--- /dev/null
+++ b/src/services/emotion/css.test.ts
@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css, cx } from './css';
+
+describe('custom EUI Emotion instance', () => {
+  it("creates a vanilla JS className that contains styles with EUI's custom configuration", () => {
+    const test = css`
+      display: flex;
+    `;
+    expect(test).toEqual('css-vyoujf');
+
+    // Should not have any extra browser prefixes, per EUI's configuration
+    const styleOutput = document.head.querySelector('style[data-emotion]')!;
+    expect(styleOutput.textContent).toEqual('.css-vyoujf{display:flex;}');
+  });
+
+  // NOTE: Currently, custom Emotion instances do *not* merge css auto labels
+  // @see https://github.com/emotion-js/emotion/issues/3113
+  it('correctly merges css with labels', () => {
+    const test1 = css`
+      label: hello;
+      color: red;
+    `;
+    const test2 = css`
+      label: world;
+      background-color: blue;
+    `;
+    expect(cx(test1, test2)).toEqual('css-4dyepw-hello-world');
+  });
+});
diff --git a/src/services/emotion/css.ts b/src/services/emotion/css.ts
new file mode 100644
index 00000000000..0c3193996bf
--- /dev/null
+++ b/src/services/emotion/css.ts
@@ -0,0 +1,25 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import createEmotion from '@emotion/css/create-instance';
+
+import { euiStylisPrefixer } from './prefixer';
+
+/**
+ * This custom instance is needed for internal EUI components to call
+ * `@emotion/css` with EUI's custom prefixer plugin
+ * @see https://emotion.sh/docs/@emotion/css#custom-instances
+ *
+ * NOTE: Usage is currently being beta tested internally,
+ * and is not yet intended to be a public export
+ */
+export const { css, cx, cache } = createEmotion({
+  key: 'css',
+  stylisPlugins: [euiStylisPrefixer],
+  speedy: false,
+});
diff --git a/src/services/emotion/index.ts b/src/services/emotion/index.ts
index d7a50a60227..2fb45487285 100644
--- a/src/services/emotion/index.ts
+++ b/src/services/emotion/index.ts
@@ -7,3 +7,4 @@
  */
 
 export * from './clone_element';
+export * from './prefixer';
diff --git a/src/services/emotion/prefixer.test.tsx b/src/services/emotion/prefixer.test.tsx
new file mode 100644
index 00000000000..867e611290e
--- /dev/null
+++ b/src/services/emotion/prefixer.test.tsx
@@ -0,0 +1,567 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React, { FunctionComponent, PropsWithChildren } from 'react';
+import { render } from '@testing-library/react';
+import { css, keyframes } from '@emotion/react';
+import { cache as defaultEmotionCache } from '@emotion/css';
+import createCache from '@emotion/cache';
+
+import { EuiProvider } from '../../components/provider';
+
+import { euiStylisPrefixer } from './prefixer';
+
+describe('euiStylisPrefixer', () => {
+  const cacheWithPrefixer = createCache({
+    key: 'test',
+    stylisPlugins: [euiStylisPrefixer],
+  });
+
+  const wrapper: FunctionComponent<PropsWithChildren> = ({ children }) => (
+    <EuiProvider
+      globalStyles={false}
+      utilityClasses={false}
+      cache={cacheWithPrefixer}
+    >
+      {children}
+    </EuiProvider>
+  );
+
+  const getStyleCss = (label: string) => {
+    const styleEl = Array.from(
+      document.querySelectorAll('style[data-emotion]')
+    ).find((el) => el?.textContent?.includes(label)) as HTMLStyleElement;
+    if (!styleEl) return;
+
+    // Make output styles a little easier to read
+    return styleEl
+      .textContent!.replace('{', ' {\n')
+      .replace(/;/g, ';\n')
+      .replace(/:/g, ': ');
+  };
+
+  describe('does prefix', () => {
+    test('user-select', () => {
+      render(
+        <div
+          css={css`
+            label: user-select;
+            user-select: none;
+          `}
+        />,
+        { wrapper }
+      );
+      expect(getStyleCss('user-select')).toMatchInlineSnapshot(`
+        ".test-8c1x7t-user-select {
+        -webkit-user-select: none;
+        user-select: none;
+        }"
+      `);
+    });
+
+    test('text-decoration', () => {
+      render(
+        <div
+          css={css`
+            label: text-decoration;
+            text-decoration: line-through dashed blue;
+            text-decoration-line: underline overline;
+            text-decoration-style: wavy;
+            text-decoration-color: red;
+            text-decoration-skip: objects;
+          `}
+        />,
+        { wrapper }
+      );
+      expect(getStyleCss('text-decoration')).toMatchInlineSnapshot(`
+        ".test-5idn3j-text-decoration {
+        -webkit-text-decoration: line-through dashed blue;
+        text-decoration: line-through dashed blue;
+        text-decoration-line: underline overline;
+        text-decoration-style: wavy;
+        text-decoration-color: red;
+        text-decoration-skip: objects;
+        }"
+      `);
+    });
+
+    test('text-size-adjust', () => {
+      render(
+        <div
+          css={css`
+            text-size-adjust: 80%;
+          `}
+        />,
+        { wrapper }
+      );
+      expect(getStyleCss('text-size-adjust')).toMatchInlineSnapshot(`
+        ".test-15dfadm {
+        -webkit-text-size-adjust: 80%;
+        text-size-adjust: 80%;
+        }"
+      `);
+    });
+
+    test('box-decoration-break', () => {
+      render(
+        <div
+          css={css`
+            label: box-decoration-break;
+            box-decoration-break: slice;
+          `}
+        />,
+        { wrapper }
+      );
+      expect(getStyleCss('box-decoration-break')).toMatchInlineSnapshot(`
+        ".test-m64wfr-box-decoration-break {
+        -webkit-box-decoration-break: slice;
+        box-decoration-break: slice;
+        }"
+      `);
+    });
+
+    describe('mask CSS', () => {
+      render(
+        <div
+          css={css`
+            label: mask-css;
+            mask: url(mask.svg);
+            mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
+            mask-clip: border-box;
+            mask-origin: padding-box;
+            mask-composite: subtract;
+            mask-mode: alpha;
+            mask-position: center;
+            mask-repeat: repeat-x;
+            mask-size: contain;
+          `}
+        />,
+        { wrapper }
+      );
+      expect(getStyleCss('mask-css')).toMatchInlineSnapshot(`
+        ".test-16l1rpr-mask-css {
+        -webkit-mask: url(mask.svg);
+        mask: url(mask.svg);
+        -webkit-mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
+        mask-image: linear-gradient(rgba(0, 0, 0, 1), transparent);
+        -webkit-mask-clip: border-box;
+        mask-clip: border-box;
+        -webkit-mask-origin: padding-box;
+        mask-origin: padding-box;
+        -webkit-mask-composite: subtract;
+        mask-composite: subtract;
+        -webkit-mask-mode: alpha;
+        mask-mode: alpha;
+        -webkit-mask-position: center;
+        mask-position: center;
+        -webkit-mask-repeat: repeat-x;
+        mask-repeat: repeat-x;
+        -webkit-mask-size: contain;
+        mask-size: contain;
+        }"
+      `);
+    });
+
+    test('background-clip text', () => {
+      render(
+        <div
+          css={css`
+            label: background-clip;
+            /* should not prefix */
+            background-clip: content-box;
+            /* should prefix */
+            background-clip: text;
+          `}
+        />,
+        { wrapper }
+      );
+      expect(getStyleCss('background-clip')).toMatchInlineSnapshot(`
+        ".test-9vijyk-background-clip {
+        background-clip: content-box;
+        -webkit-background-clip: text;
+        background-clip: text;
+        }"
+      `);
+    });
+
+    test('print-color-adjust', () => {
+      render(
+        <div
+          css={css`
+            label: print-color-adjust;
+            print-color-adjust: economy;
+          `}
+        />,
+        { wrapper }
+      );
+      expect(getStyleCss('print-color-adjust')).toMatchInlineSnapshot(`
+        ".test-cx4oo-print-color-adjust {
+        -webkit-print-color-adjust: economy;
+        print-color-adjust: economy;
+        }"
+      `);
+    });
+
+    test('max-content, min-content, fit-content, and stretch sizing values', () => {
+      render(
+        <div
+          /* eslint-disable local/css-logical-properties */
+          css={css`
+            label: intrinsic-extrensic-sizing;
+            /* should not prefix */
+            height: max-content;
+            width: min-content;
+            max-inline-size: fit-content;
+            /* should prefix */
+            min-block-size: stretch;
+          `}
+        />,
+        { wrapper }
+      );
+      expect(getStyleCss('intrinsic-extrensic-sizing')).toMatchInlineSnapshot(`
+        ".test-tsfq3u-intrinsic-extrensic-sizing {
+        height: max-content;
+        width: min-content;
+        max-inline-size: fit-content;
+        min-block-size: -webkit-fill-available;
+        min-block-size: -moz-available;
+        min-block-size: stretch;
+        }"
+      `);
+    });
+  });
+
+  describe('does not prefix', () => {
+    test('flex CSS', () => {
+      render(
+        <div
+          css={css`
+            label: no-flex-prefixes;
+            display: flex;
+            display: inline-flex;
+            align-items: center;
+            align-content: center;
+            align-self: center;
+            justify-content: center;
+            flex-shrink: 0;
+            flex-grow: 0;
+            flex-basis: 100%;
+            flex: 1;
+            flex-direction: column;
+            order: 2;
+          `}
+        />,
+        { wrapper }
+      );
+
+      expect(getStyleCss('no-flex-prefixes')).toMatchInlineSnapshot(`
+        ".test-1467bft-no-flex-prefixes {
+        display: flex;
+        display: inline-flex;
+        align-items: center;
+        align-content: center;
+        align-self: center;
+        justify-content: center;
+        flex-shrink: 0;
+        flex-grow: 0;
+        flex-basis: 100%;
+        flex: 1;
+        flex-direction: column;
+        order: 2;
+        }"
+      `);
+    });
+
+    test('transform & transition CSS', () => {
+      render(
+        <div
+          css={css`
+            label: no-transform-prefixes;
+            transform: translateY(-1px);
+            transition: transform 2s linear;
+          `}
+        />,
+        { wrapper }
+      );
+
+      expect(getStyleCss('no-transform-prefixes')).toMatchInlineSnapshot(`
+        ".test-1oc6c8-no-transform-prefixes {
+        transform: translateY(-1px);
+        transition: transform 2s linear;
+        }"
+      `);
+    });
+
+    test('animation CSS', () => {
+      const testAnimation = keyframes`
+        from { opacity: 0; }
+        to { opacity: 1; }
+      `;
+      render(
+        <div
+          css={css`
+            label: no-animation-prefixes;
+            animation: ${testAnimation};
+            animation-name: test;
+            animation-delay: 1s;
+            animation-direction: reverse;
+            animation-duration: 50ms;
+            animation-fill-mode: both;
+            animation-iteration-count: infinite;
+            animation-play-state: paused;
+            animation-timing-function: ease-in-out;
+          `}
+        />,
+        { wrapper }
+      );
+
+      expect(getStyleCss('no-animation-prefixes')).toMatchInlineSnapshot(`
+        ".test-1aw2200-no-animation-prefixes {
+        animation: animation-1flhruc;
+        animation-name: test;
+        animation-delay: 1s;
+        animation-direction: reverse;
+        animation-duration: 50ms;
+        animation-fill-mode: both;
+        animation-iteration-count: infinite;
+        animation-play-state: paused;
+        animation-timing-function: ease-in-out;
+        }"
+      `);
+      expect(getStyleCss('@keyframes')).toBeTruthy();
+      expect(getStyleCss('@-webkit-keyframes')).toBeFalsy();
+    });
+
+    test('position sticky', () => {
+      render(
+        <div
+          css={css`
+            label: no-position-sticky-prefix;
+            position: sticky;
+          `}
+        />,
+        { wrapper }
+      );
+
+      expect(getStyleCss('no-position-sticky-prefix')).toMatchInlineSnapshot(`
+        ".test-11x1k54-no-position-sticky-prefix {
+        position: sticky;
+        }"
+      `);
+    });
+
+    test('writing mode CSS', () => {
+      render(
+        <div
+          css={css`
+            label: no-writing-mode-prefixes;
+            writing-mode: vertical-lr;
+            writing-mode: vertical-rl;
+            writing-mode: horizontal-tb;
+          `}
+        />,
+        { wrapper }
+      );
+
+      expect(getStyleCss('no-writing-mode-prefixes')).toMatchInlineSnapshot(`
+        ".test-1d4iba8-no-writing-mode-prefixes {
+        writing-mode: vertical-lr;
+        writing-mode: vertical-rl;
+        writing-mode: horizontal-tb;
+        }"
+      `);
+    });
+
+    test('inline logical properties CSS', () => {
+      render(
+        <div
+          css={css`
+            label: no-logical-properties-prefixes;
+            padding-inline-start: 1rem;
+            margin-inline-end: 2em;
+          `}
+        />,
+        { wrapper }
+      );
+      expect(getStyleCss('no-logical-properties-prefixes'))
+        .toMatchInlineSnapshot(`
+        ".test-11697m3-no-logical-properties-prefixes {
+        padding-inline-start: 1rem;
+        margin-inline-end: 2em;
+        }"
+      `);
+    });
+
+    test('columns CSS', () => {
+      render(
+        <div
+          css={css`
+            label: no-columns-prefixes;
+            columns: 3;
+            column-count: 5;
+            column-fill: balance;
+            column-gap: 10px;
+            column-width: 20px;
+            column-span: all;
+            column-rule: blue dotted 2px;
+          `}
+        />,
+        { wrapper }
+      );
+
+      expect(getStyleCss('no-columns-prefixes')).toMatchInlineSnapshot(`
+        ".test-1eossg4-no-columns-prefixes {
+        columns: 3;
+        column-count: 5;
+        column-fill: balance;
+        column-gap: 10px;
+        column-width: 20px;
+        column-span: all;
+        column-rule: blue dotted 2px;
+        }"
+      `);
+    });
+
+    test('misc text effect CSS', () => {
+      render(
+        <div
+          css={css`
+            label: no-misc-text-effect-prefixes;
+            appearance: none;
+            hyphens: auto;
+            cursor: grab;
+          `}
+        />,
+        { wrapper }
+      );
+      expect(getStyleCss('no-misc-text-effect-prefixes'))
+        .toMatchInlineSnapshot(`
+        ".test-29xaas-no-misc-text-effect-prefixes {
+        appearance: none;
+        hyphens: auto;
+        cursor: grab;
+        }"
+      `);
+    });
+
+    test('misc filter/effect/image CSS', () => {
+      render(
+        <div
+          css={css`
+            label: no-filter-prefixes;
+            filter: grayscale(1);
+            clip-path: url(#foo);
+            backface-visibility: visible;
+            background: image-set(
+              linear-gradient(blue, white) 1x,
+              linear-gradient(blue, green) 2x
+            );
+          `}
+        />,
+        { wrapper }
+      );
+
+      expect(getStyleCss('no-filter-prefixes')).toMatchInlineSnapshot(`
+        ".test-8ziglt-no-filter-prefixes {
+        filter: grayscale(1);
+        clip-path: url(#foo);
+        backface-visibility: visible;
+        background: image-set(
+                      linear-gradient(blue, white) 1x,
+                      linear-gradient(blue, green) 2x
+                    );
+        }"
+      `);
+    });
+
+    test('misc selectors', () => {
+      render(
+        <div
+          css={css`
+            ::placeholder,
+            :read-only,
+            :read-write {
+              color: red;
+            }
+          `}
+        />,
+        { wrapper }
+      );
+
+      expect(getStyleCss('::-moz-placeholder')).toBeFalsy();
+      expect(getStyleCss(':-moz-read-only')).toBeFalsy();
+      expect(getStyleCss(':-moz-read-write')).toBeFalsy();
+    });
+  });
+
+  describe('default Emotion cache', () => {
+    it('prefixes extra CSS that the EUI plugin does not', () => {
+      render(
+        <EuiProvider cache={defaultEmotionCache}>
+          <div
+            css={css`
+              label: test-default-cache;
+              display: flex;
+              padding-inline-start: 1rem;
+              margin-inline-end: 2em;
+              animation: something;
+              transform: translateY(-1px);
+              transition: transform 2s linear;
+              position: sticky;
+              writing-mode: vertical-rl;
+              column-count: 2;
+              block-size: max-content;
+              filter: blur(5px);
+              cursor: grab;
+
+              ::placeholder {
+                color: red;
+              }
+            `}
+          />
+        </EuiProvider>
+      );
+
+      expect(getStyleCss('test-default-cache')).toMatchInlineSnapshot(`
+        ".css-tfft1m-test-default-cache {
+        display: -webkit-box;
+        display: -webkit-flex;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-padding-start: 1rem;
+        padding-inline-start: 1rem;
+        -webkit-margin-end: 2em;
+        margin-inline-end: 2em;
+        -webkit-animation: something;
+        animation: something;
+        -webkit-transform: translateY(-1px);
+        -moz-transform: translateY(-1px);
+        -ms-transform: translateY(-1px);
+        transform: translateY(-1px);
+        -webkit-transition: -webkit-transform 2s linear;
+        transition: transform 2s linear;
+        position: -webkit-sticky;
+        position: sticky;
+        -webkit-writing-mode: vertical-rl;
+        -ms-writing-mode: tb-rl;
+        writing-mode: vertical-rl;
+        -webkit-column-count: 2;
+        column-count: 2;
+        block-size: -webkit-max-content;
+        block-size: -moz-max-content;
+        block-size: max-content;
+        -webkit-filter: blur(5px);
+        filter: blur(5px);
+        cursor: -webkit-grab;
+        cursor: grab;
+        }"
+      `);
+      expect(getStyleCss('::-moz-placeholder')).toBeTruthy();
+    });
+  });
+});
diff --git a/src/services/emotion/prefixer.ts b/src/services/emotion/prefixer.ts
new file mode 100644
index 00000000000..c1c6259c5a4
--- /dev/null
+++ b/src/services/emotion/prefixer.ts
@@ -0,0 +1,120 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import {
+  charat,
+  DECLARATION,
+  hash,
+  indexof,
+  MOZ,
+  replace,
+  strlen,
+  WEBKIT,
+  type Element,
+} from 'stylis';
+
+// This is a heavily modified version of Emotion's default `prefixer` plugin
+// (mostly removing unnecessary prefixes), which is in turn a modified version
+// of stylis's default prefixer.
+// @see https://github.com/emotion-js/emotion/blob/main/packages/cache/src/prefixer.js
+/* eslint-disable prefer-template */
+
+/**
+ * This is a stylis plugin which handles auto-prefixing CSS output by Emotion.
+ *
+ * *Please note*: EUI/Elastic targets latest evergreen browsers for support only.
+ * @see https://www.elastic.co/support/matrix#matrix_browsers
+ */
+export const euiStylisPrefixer = (element: Element) => {
+  if (element.length > -1)
+    if (!element.return)
+      switch (element.type) {
+        case DECLARATION:
+          element.return = prefix(element.value, element.length);
+          break;
+      }
+};
+
+const prefix = (value: Element['value'], length: Element['length']): string => {
+  switch (hash(value, length)) {
+    /**
+     * `-webkit` prefixes
+     */
+    // user-select - https://caniuse.com/mdn-css_properties_user-select - needed by Safari
+    case 4246:
+    // text-decoration - https://caniuse.com/text-decoration - iOS Safari is the main one that needs this
+    case 5572:
+    // text-size-adjust - https://caniuse.com/text-size-adjust - iOS Safari
+    case 2756:
+    // box-decoration-break - https://caniuse.com/css-boxdecorationbreak - Chrome & Safari
+    case 3005:
+    // mask, mask-image, mask-(mode|clip|size), mask-(repeat|origin), mask-position, mask-composite - Chrome
+    case 6391:
+    case 5879:
+    case 5623:
+    case 6135:
+    case 4599:
+    case 4855:
+    // print-color-adjust - https://caniuse.com/css-color-adjust - Chrome
+    case 2282:
+      return WEBKIT + value + value;
+
+    // background-clip - https://caniuse.com/background-clip-text - Chrome, only for `text` value
+    case 4215:
+      if (~indexof(value, 'text')) {
+        return WEBKIT + value + value;
+      }
+
+    /**
+     * Intrinsic/extrinsic sizing value prefixes
+     * `stretch` alternatives needed by Chrome & Firefox - https://caniuse.com/intrinsic-width
+     */
+    // (min|max)?(width|height|inline-size|block-size)
+    case 8116:
+    case 7059:
+    case 5753:
+    case 5535:
+    case 5445:
+    case 5701:
+    case 4933:
+    case 4677:
+    case 5533:
+    case 5789:
+    case 5021:
+    case 4765:
+      // stretch, max-content, min-content, fill-available
+      if (strlen(value) - 1 - length > 6)
+        switch (charat(value, length + 1)) {
+          // (f)ill-available
+          case 102:
+            if (~indexof(value, 'fill-available')) {
+              return replace(
+                value,
+                /(.+:)(.+)-([^]+)/,
+                '$1' +
+                  WEBKIT +
+                  '$2-$3' +
+                  '$1' +
+                  MOZ +
+                  (charat(value, length + 3) === 108 ? '$3' : '$2-$3')
+              );
+            }
+          // (s)tretch
+          case 115:
+            if (~indexof(value, 'stretch')) {
+              return (
+                prefix(replace(value, 'stretch', 'fill-available'), length) +
+                value
+              );
+            }
+        }
+      break;
+  }
+
+  return value;
+};
diff --git a/src/services/index.ts b/src/services/index.ts
index 99ee327b329..42594a27d86 100644
--- a/src/services/index.ts
+++ b/src/services/index.ts
@@ -8,13 +8,7 @@
 
 // Export all keys under a `keys` named variable
 import * as keys from './keys';
-export {
-  accessibleClickKeys,
-  cascadingMenuKeys,
-  comboBoxKeys,
-  htmlIdGenerator,
-  useGeneratedHtmlId,
-} from './accessibility';
+export { htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
 export type { HorizontalAlignment } from './alignment';
 export {
diff --git a/src/services/theme/__snapshots__/provider.test.tsx.snap b/src/services/theme/__snapshots__/provider.test.tsx.snap
index 47336d01d76..5d8598c2489 100644
--- a/src/services/theme/__snapshots__/provider.test.tsx.snap
+++ b/src/services/theme/__snapshots__/provider.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`EuiThemeProvider CSS variables allows child components to set non-global theme CSS variables 1`] = `
 <span
-  class="euiThemeProvider emotion-euiCSSVariables-euiColorMode--colorClassName"
+  class="euiThemeProvider emotion-euiCSSVariables-euiColorMode-LIGHT"
 />
 `;
 
@@ -11,7 +11,7 @@ exports[`EuiThemeProvider nested EuiThemeProviders allows avoiding the extra spa
   Top-level provider
    
   <div
-    class="world hello emotion-euiColorMode-dark-colorClassName"
+    class="world hello emotion-euiColorMode-dark"
   >
     clone provider color onto div
   </div>
@@ -23,7 +23,7 @@ exports[`EuiThemeProvider nested EuiThemeProviders allows customizing the span w
   Top-level provider
    
   <span
-    class="euiThemeProvider test css-1mg4zk6-customCss-euiColorMode-dark-colorClassName"
+    class="euiThemeProvider test css-1q6x6jl-customCss-euiColorMode-dark"
     data-test-subj="nested"
   >
     Nested
@@ -36,15 +36,15 @@ exports[`EuiThemeProvider nested EuiThemeProviders renders with a span wrapper t
   Top-level provider
    
   <span
-    class="euiThemeProvider emotion-euiColorMode-dark-colorClassName"
+    class="euiThemeProvider emotion-euiColorMode-dark"
   >
     Nested
     <span
-      class="euiThemeProvider emotion-euiColorMode-light-colorClassName"
+      class="euiThemeProvider emotion-euiColorMode-light"
     >
       Double nested
       <span
-        class="euiThemeProvider emotion-euiColorMode-inverse-colorClassName"
+        class="euiThemeProvider emotion-euiColorMode-inverse"
       >
         Triple nested
       </span>
diff --git a/src/services/theme/provider.tsx b/src/services/theme/provider.tsx
index 0005f356d9f..76fab79de5b 100644
--- a/src/services/theme/provider.tsx
+++ b/src/services/theme/provider.tsx
@@ -16,13 +16,12 @@ import React, {
   PropsWithChildren,
   HTMLAttributes,
 } from 'react';
-import classNames from 'classnames';
-import { css } from '@emotion/css';
 import { Global, type CSSObject } from '@emotion/react';
 import isEqual from 'lodash/isEqual';
 
 import type { CommonProps } from '../../components/common';
 import { cloneElementWithCss } from '../emotion';
+import { css, cx } from '../emotion/css';
 
 import {
   EuiSystemContext,
@@ -160,7 +159,7 @@ export const EuiThemeProvider = <T extends {} = {}>({
         ? false
         : bodyColor !== theme.colors.text,
       colorClassName: css`
-        label: euiColorMode-${_colorMode};
+        label: euiColorMode-${_colorMode || colorMode};
         color: ${theme.colors.text};
       `,
       setGlobalCSSVariables: isGlobalTheme
@@ -177,6 +176,7 @@ export const EuiThemeProvider = <T extends {} = {}>({
     isGlobalTheme,
     bodyColor,
     _colorMode,
+    colorMode,
     setGlobalCSSVariables,
     globalCSSVariables,
     setThemeCSSVariables,
@@ -191,7 +191,7 @@ export const EuiThemeProvider = <T extends {} = {}>({
     const { cloneElement, className, ...rest } = wrapperProps || {};
     const props = {
       ...rest,
-      className: classNames(className, nestedThemeContext.colorClassName),
+      className: cx(className, nestedThemeContext.colorClassName),
     };
     // Condition avoids rendering an empty Emotion selector if no
     // theme-specific CSS variables have been set by child components
@@ -202,14 +202,11 @@ export const EuiThemeProvider = <T extends {} = {}>({
     if (cloneElement) {
       return cloneElementWithCss(children, {
         ...props,
-        className: classNames(children.props.className, props.className),
+        className: cx(children.props.className, props.className),
       });
     } else {
       return (
-        <span
-          {...props}
-          className={classNames('euiThemeProvider', props.className)}
-        >
+        <span {...props} className={cx('euiThemeProvider', props.className)}>
           {children}
         </span>
       );
diff --git a/src/services/theme/utils.ts b/src/services/theme/utils.ts
index 089f985a6ee..c7c9c5216d0 100644
--- a/src/services/theme/utils.ts
+++ b/src/services/theme/utils.ts
@@ -39,7 +39,7 @@ export const isInverseColorMode = (
 /**
  * Returns the color mode configured in the current EuiThemeProvider.
  * Returns the parent color mode if none is explicity set.
- * @param {string} coloMode - `light`, `dark`, or `inverse`
+ * @param {string} colorMode - `light`, `dark`, or `inverse`
  * @param {string} parentColorMode - `LIGHT` or `DARK`; used as the fallback
  */
 export const getColorMode = (
diff --git a/src/test/README.md b/src/test/README.md
index f76faa2119f..e8d174509b2 100644
--- a/src/test/README.md
+++ b/src/test/README.md
@@ -42,18 +42,3 @@ expect(
   })
 ).toMatchSnapshot();
 ```
-
-### testCustomHook
-
-Use this function to execute a custom hook and access its return value, which can be passed to `expect` for verification. The function also returns a `getUpdatedState` method which will always return the hook's current state, in case some interaction with the react component causes an update.
-
-```js
-const {
-  return: hookReturnValue,
-  getUpdatedState,
-} = testCustomHook(() => useCellPopover());
-
-expect(hookReturnValue).to.equal(myExpectedValue);
-doSomeActions();
-expect(getUpdatedState()).to.equal(myExpectedValue);
-```
diff --git a/src/test/internal/index.ts b/src/test/internal/index.ts
index ec088111b19..434f848588c 100644
--- a/src/test/internal/index.ts
+++ b/src/test/internal/index.ts
@@ -7,5 +7,4 @@
  */
 
 export * from './render_custom_styles';
-export * from './test_custom_hook';
 export * from './react_version';
diff --git a/src/test/internal/test_custom_hook.tsx b/src/test/internal/test_custom_hook.tsx
deleted file mode 100644
index 5db54cf2298..00000000000
--- a/src/test/internal/test_custom_hook.tsx
+++ /dev/null
@@ -1,41 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0 and the Server Side Public License, v 1; you may not use this file except
- * in compliance with, at your election, the Elastic License 2.0 or the Server
- * Side Public License, v 1.
- */
-
-import React from 'react';
-import { mount } from 'enzyme';
-
-export const HookWrapper = (props: { hook?: Function }) => {
-  const { hook: _, ...args } = props;
-  const hook = props.hook ? props.hook(args) : undefined;
-  // @ts-ignore the actual div is irrelevant, we just need to inspect the prop for return values
-  return <div hook={hook} />;
-};
-
-export const testCustomHook = <T,>(
-  hook?: Function,
-  args?: unknown
-): {
-  return: T;
-  getUpdatedState: () => T;
-  updateHookArgs: (args: unknown) => void;
-} => {
-  const wrapper = mount(<HookWrapper hook={hook} {...args} />);
-
-  const updateHookArgs = (args: any) => wrapper.setProps(args);
-
-  const getHookReturn = (): T => {
-    wrapper.update();
-    return wrapper.find('div').prop('hook');
-  };
-
-  return {
-    return: getHookReturn(),
-    getUpdatedState: getHookReturn, // Allows consuming tests to get most recent values
-    updateHookArgs, // Allows consuming tests to pass updated hook arguments (objects only, no tuples)
-  };
-};
diff --git a/src/test/rtl/component_helpers.d.ts b/src/test/rtl/component_helpers.d.ts
index 678cf0ba3dc..13dc28dcb6c 100644
--- a/src/test/rtl/component_helpers.d.ts
+++ b/src/test/rtl/component_helpers.d.ts
@@ -8,3 +8,5 @@ export declare const waitForEuiPopoverClose: () => Promise<void>;
 
 export declare const waitForEuiToolTipVisible: () => Promise<void>;
 export declare const waitForEuiToolTipHidden: () => Promise<void>;
+
+export declare const showEuiComboBoxOptions: () => Promise<void>;
diff --git a/src/test/rtl/component_helpers.ts b/src/test/rtl/component_helpers.ts
index aa37e1dde78..66611572cd6 100644
--- a/src/test/rtl/component_helpers.ts
+++ b/src/test/rtl/component_helpers.ts
@@ -7,7 +7,8 @@
  */
 
 import '@testing-library/jest-dom';
-import { waitFor } from '@testing-library/react';
+import { waitFor, fireEvent } from '@testing-library/react';
+import { screen } from './custom_render';
 
 /**
  * Ensure the EuiPopover being tested is open/closed before continuing
@@ -43,3 +44,14 @@ export const waitForEuiToolTipHidden = async () =>
     const tooltip = document.querySelector('.euiToolTipPopover');
     expect(tooltip).toBeNull();
   });
+
+/**
+ * Doot doo
+ */
+export const showEuiComboBoxOptions = async () => {
+  fireEvent.click(screen.getByTestSubject('comboBoxToggleListButton'));
+  await waitForEuiPopoverOpen();
+  await waitFor(() => {
+    expect(screen.getByRole('listbox')).toBeInTheDocument();
+  });
+};
diff --git a/src/themes/amsterdam/global_styling/mixins/_index.scss b/src/themes/amsterdam/global_styling/mixins/_index.scss
index 986c7aa2391..3d83a4cd823 100644
--- a/src/themes/amsterdam/global_styling/mixins/_index.scss
+++ b/src/themes/amsterdam/global_styling/mixins/_index.scss
@@ -10,7 +10,6 @@
 
 @import '../../../../global_styling/mixins/button';
 @import '../../../../global_styling/mixins/form';
-@import '../../../../global_styling/mixins/header';
 @import '../../../../global_styling/mixins/loading';
 @import 'link';
 @import '../../../../global_styling/mixins/panel';
diff --git a/wiki/contributing-to-eui/README.md b/wiki/contributing-to-eui/README.md
index 25307fb46df..d6f07c52d3e 100644
--- a/wiki/contributing-to-eui/README.md
+++ b/wiki/contributing-to-eui/README.md
@@ -6,9 +6,15 @@ If there isn't an associated feature request or bug report in EUI's backlog yet,
 
 ## Process
 
-### How we assign work and define our roadmap
+### Who can contribute?
 
-EUI is built primarily by employees of Elastic. We try to do this in the open as much as possible, but do utilize closed meetings and other planning tools to dictate our longer term roadmap. We try to transcribe the decisions from these discussions in the form of specifications to Github issues for transparency. In general, once on Github, any issue can be worked on by the community. We usually reserve larger projects or ones that are core to our roadmap or design to be done internally. In these cases we mark these issues as `assigned` to a person using Github. We do not, as a policy, assign issues to community members. If you find an issue that is not assigned, assume that you are welcome to work on it and can submit a pull request. Feel free to leave a comment to mark intent and avoid conflict.
+EUI is built primarily by and for employees of Elastic. We align our features and roadmap with the needs of our products internally.
+
+While EUI's primary customer is Kibana and other Elastic products, open source is a part of our DNA at Elastic, and commmunity contributions from outside of Elastic are welcome. These contributions are typically reviewed and merged on a best-effort basis and must generally align with the overall objectives of this project.
+
+In general, once on Github, any issue can be worked on by the community. If you find an issue that is not assigned, assume that you are welcome to work on it and can submit a pull request. We recommend that you leave us a comment indicating your intent before starting work to avoid potential conflict. We do not, as a policy, assign issues to community members and we usually reserve larger projects or ones that are core to our roadmap or design to be done internally.
+
+Our best PRs tend to come from existing users whom have a challenge they are attempting to overcome and wish to help us solve it. If you are new to open source and looking for a good project to start making contributions, this project may not be a good fit. We have an extensive backlog in which you'll likely encounter outdated issues and issues lacking the appropriate context to get started.
 
 ### How to ensure the timely review of pull requests
 
diff --git a/wiki/contributing-to-eui/testing/automated-accessibility-testing.md b/wiki/contributing-to-eui/testing/automated-accessibility-testing.md
index 2e1b4186089..d6646056d45 100644
--- a/wiki/contributing-to-eui/testing/automated-accessibility-testing.md
+++ b/wiki/contributing-to-eui/testing/automated-accessibility-testing.md
@@ -1,29 +1,28 @@
 # Accessibility testing
 
-The goal is for the entirety of the EUI docs site to be run through [axe](https://www.deque.com/axe/).
-As of [#2569](https://github.com/elastic/eui/pull/2569), all of the Guidelines pages are tested and the plumbing is in place to add the rest.
+The goal is for all EUI components to be run through [axe](https://www.deque.com/axe/).
+Please refer to [issue #6300](https://github.com/elastic/eui/issues/6300) to see components under test.
 
 ## What is axe?
 
 axe is an "[accessibility engine for automated Web UI testing](https://github.com/dequelabs/axe-core)".
-Automated tests cover ~30% of accessibility requirements but, ~60% of accessibility bugs are caught by automated tests.
-So, though it can't replace manual testing, it's a great baseline for all of our components to meet.
+Automated tests cover ~30% of accessibility requirements but ~60% of accessibility bugs are caught by automated tests.
+Automated testing can't replace manual testing, but it's an important baseline for all of our components.
 
-## How to run the tests?
+## How to run the Cypress accessibility tests?
 
-* `start-test-server-and-a11y-test` runs the test suite against the entire docs site and manages it's own local server for it.
-* `test-a11y` can be used if you want to run it against your dev server (assumed to be `http://localhost:8030`).
+* `test-cypress-a11y` runs the accessibility test suite in a local headless Cypress environment.
+* `test-a11y-docker` runs the test suite in the EUI team's CI Docker container.
+* `test-cypress-dev` runs the test suite using your dev server (assumed to be `http://localhost:8030`) and the Cypress test runner.
 
-### How to run it against 1 component?
+### How to run accessibility tests against 1 component?
 
 Though it's not setup to be run this way, there are two ways to do it.
 
-The recommended route is to install the axe addon (for [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd) or [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/)).
-Navigate to any page and run the analyzer from your browser's dev tools.
+The recommended route is to install the axe addon (for [Chrome](https://chrome.google.com/webstore/detail/axe-web-accessibility-tes/lhdoppojpmngadmnindnejefpokejbdd), [Firefox](https://addons.mozilla.org/en-US/firefox/addon/axe-devtools/), or [Edge](https://support.microsoft.com/en-us/microsoft-edge/download-the-new-microsoft-edge-based-on-chromium-0f4a3dd7-55df-60f5-739f-00010dba52cf)).
+Navigate to any page and run the analyzer from your browser's developer tools.
 This will return the same* results to you while also giving you some convenience utilities like highlighting the exact element that's failing.
 
-Not as nice of a experience though potentially more direct, in `scripts/a11y-testing.js` you can modify the list of component pages return from `docsPages()` to run only one file. But remember not to check in these changes!
-
 \* It might not actually be the same in a couple cases (e.g., we've disabled some rules or a recent update that was pushed to the addon but we haven't updated yet) but it will generally be more strict than we are, so you should never see something in CI that you can't see in the addon.
 
 ## Deconstructing an error message
@@ -48,4 +47,4 @@ Any violations should be confirmed using the [axe browser plugin](https://deque.
 
 ## Testing environment
 
-This testing suite runs in a Docker container built and maintained by the EUI team and published to the Elastic Container Registry. Any environment-related failures should be investigated starting with the Docker directory located at [`scripts/docker-puppeteer/`](../scripts/docker-puppeteer/README.md).
+This testing suite can be run on your local machine or in a Docker container. The EUI team has a plan to run these tests in a scheduled Buildkite job using the CI Docker container.
diff --git a/wiki/contributing-to-eui/testing/cypress-testing.md b/wiki/contributing-to-eui/testing/cypress-testing.md
index 093b125b40d..e73534ab300 100644
--- a/wiki/contributing-to-eui/testing/cypress-testing.md
+++ b/wiki/contributing-to-eui/testing/cypress-testing.md
@@ -79,7 +79,7 @@ Create Cypress test files with the following name patterns to run in specific si
 * `{component name}.spec.tsx` will run a full component test as part of every build
 * `{component name}.a11y.tsx` will run an accessibility test using [Cypress Axe](#cypress-axe)
 
-These test files should be in the same directory as `{component name}.tsx`.
+These test files should be in the same directory as `{component_name}.tsx`.
 
 #### Do's and don'ts
 
@@ -88,6 +88,11 @@ These test files should be in the same directory as `{component name}.tsx`.
 * DON'T depend upon class names or other implementation details for `find`ing nodes, if possible.
 * DON'T extend the `cy.` global namespace - instead prefer to import helper functions directly
 
+### Recording failed Cypress tests on CI
+EUI now has the ability to record failed Cypress tests as Buildkite CI artifacts. This feature is turned off by default, but can be turned on by changing line 50 of the [**cypress.config.ts**](https://github.com/elastic/eui/blob/main/cypress.config.ts) file from `video: false` to `video: true`. You can verify videos are being recorded by changing a Cypress test to fail on purpose, then running `yarn test-cypress` locally. Video files will be stored in the `cypress/videos/` directory.
+
+The EUI team has configured Cypress to only keep videos for failing tests. Videos are automatically compressed to make the artifact upload smaller.
+
 ### Cypress Axe
 EUI components are tested for accessibility as part of a scheduled task. This allows us to test changes to the DOM such as accordions being opened, or modal dialogs being triggered, more comprehensively. We use [cypress-axe](https://github.com/component-driven/cypress-axe) to access the underlying axe-core API methods and rulesets.
 
diff --git a/yarn.lock b/yarn.lock
index 895eec82a7d..3627ec4a09b 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17,13 +17,6 @@
   dependencies:
     default-browser-id "3.0.0"
 
-"@axe-core/puppeteer@^4.4.2":
-  version "4.4.2"
-  resolved "https://registry.yarnpkg.com/@axe-core/puppeteer/-/puppeteer-4.4.2.tgz#63ada57d407d8bea45bac5b05974e16282f41820"
-  integrity sha512-HsiXUALjQ5fcWZZgGUvYGr/b7qvWbQXeDuW2z+2YYOJsavlPV9z0IGdm4rmX0lmsdJ9usA5vq5LNLiz23ZyXmw==
-  dependencies:
-    axe-core "^4.4.1"
-
 "@babel/cli@^7.21.5":
   version "7.22.5"
   resolved "https://registry.yarnpkg.com/@babel/cli/-/cli-7.22.5.tgz#eb323bd69f50297792c2b7c205a97306a305d703"
@@ -2048,10 +2041,10 @@
   resolved "https://registry.yarnpkg.com/@cypress/react/-/react-7.0.3.tgz#e62d67c1344265ee959e99100ce237663f20abb1"
   integrity sha512-YseqnMugTbdPV9YCYEMXVqIf+P7x+pfjXOdjv4dnDFqNCZeHaZfOZVFZ4XfEHVxMv0aDszxlaLiIp3QDPhr12w==
 
-"@cypress/request@^2.88.11":
-  version "2.88.11"
-  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-2.88.11.tgz#5a4c7399bc2d7e7ed56e92ce5acb620c8b187047"
-  integrity sha512-M83/wfQ1EkspjkE2lNWNV5ui2Cv7UCv1swW1DqljahbzLVWltcsexQh8jYtuS/vzFXP+HySntGM83ZXA9fn17w==
+"@cypress/request@^3.0.0":
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/@cypress/request/-/request-3.0.1.tgz#72d7d5425236a2413bd3d8bb66d02d9dc3168960"
+  integrity sha512-TWivJlJi8ZDx2wGOw1dbLuHJKUYX7bWySw377nlnGOW3hP9/MUKIsEdXT/YngWxVdgNCHRBmFlBipE+5/2ZZlQ==
   dependencies:
     aws-sign2 "~0.7.0"
     aws4 "^1.8.0"
@@ -2066,9 +2059,9 @@
     json-stringify-safe "~5.0.1"
     mime-types "~2.1.19"
     performance-now "^2.1.0"
-    qs "~6.10.3"
+    qs "6.10.4"
     safe-buffer "^5.1.2"
-    tough-cookie "~2.5.0"
+    tough-cookie "^4.1.3"
     tunnel-agent "^0.6.0"
     uuid "^8.3.2"
 
@@ -4637,17 +4630,17 @@
     "@babel/types" "^7.3.0"
 
 "@types/body-parser@*":
-  version "1.19.2"
-  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.2.tgz#aea2059e28b7658639081347ac4fab3de166e6f0"
-  integrity sha512-ALYone6pm6QmwZoAgeyNksccT9Q4AWZQ6PvfwR37GT6r6FWUPguq6sUmNGSMV2Wr761oQoBxwGGa6DR5o1DC9g==
+  version "1.19.3"
+  resolved "https://registry.yarnpkg.com/@types/body-parser/-/body-parser-1.19.3.tgz#fb558014374f7d9e56c8f34bab2042a3a07d25cd"
+  integrity sha512-oyl4jvAfTGX9Bt6Or4H9ni1Z447/tQuxnZsytsCaExKlmJiU8sFgnIBRzJUpKwB5eWn9HuBYlUlVA74q/yN0eQ==
   dependencies:
     "@types/connect" "*"
     "@types/node" "*"
 
 "@types/bonjour@^3.5.9":
-  version "3.5.10"
-  resolved "https://registry.yarnpkg.com/@types/bonjour/-/bonjour-3.5.10.tgz#0f6aadfe00ea414edc86f5d106357cda9701e275"
-  integrity sha512-p7ienRMiS41Nu2/igbJxxLDWrSZ0WxM8UQgCeO9KhoVF7cOVFkrKsiDr1EsJIla8vV3oEEjGcz11jc5yimhzZw==
+  version "3.5.11"
+  resolved "https://registry.yarnpkg.com/@types/bonjour/-/bonjour-3.5.11.tgz#fbaa46a1529ea5c5e46cde36e4be6a880db55b84"
+  integrity sha512-isGhjmBtLIxdHBDl2xGwUzEM8AOyOvWsADWq7rqirdi/ZQoHnLWErHvsThcEzTX8juDRiZtzp2Qkv5bgNh6mAg==
   dependencies:
     "@types/node" "*"
 
@@ -4691,17 +4684,17 @@
   integrity sha512-rr+OQyAjxze7GgWrSaJwydHStIhHq2lvY3BOC2Mj7KnzI7XK0Uw1TOOdI9lDoajEbSWLiYgoo4f1R51erQfhPQ==
 
 "@types/connect-history-api-fallback@^1.3.5":
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.3.5.tgz#d1f7a8a09d0ed5a57aee5ae9c18ab9b803205dae"
-  integrity sha512-h8QJa8xSb1WD4fpKBDcATDNGXghFj6/3GRWG6dhmRcu0RX1Ubasur2Uvx5aeEwlf0MwblEC2bMzzMQntxnw/Cw==
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/@types/connect-history-api-fallback/-/connect-history-api-fallback-1.5.1.tgz#6e5e3602d93bda975cebc3449e1a318340af9e20"
+  integrity sha512-iaQslNbARe8fctL5Lk+DsmgWOM83lM+7FzP0eQUJs1jd3kBE8NWqBTIT2S8SqQOJjxvt2eyIjpOuYeRXq2AdMw==
   dependencies:
     "@types/express-serve-static-core" "*"
     "@types/node" "*"
 
 "@types/connect@*":
-  version "3.4.35"
-  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.35.tgz#5fcf6ae445e4021d1fc2219a4873cc73a3bb2ad1"
-  integrity sha512-cdeYyv4KWoEgpBISTxWvqYsVy444DOqehiF3fM3ne10AmJ62RSyNkUnxMJXHQWRQQX2eR94m5y1IZyDwBjV9FQ==
+  version "3.4.36"
+  resolved "https://registry.yarnpkg.com/@types/connect/-/connect-3.4.36.tgz#e511558c15a39cb29bd5357eebb57bd1459cd1ab"
+  integrity sha512-P63Zd/JUGq+PdrM1lv0Wv5SBYeA2+CORvbrXbngriYY0jzLUWfQMQQxOhjONEz/wlHOAxOdY7CY65rgQdTjq2w==
   dependencies:
     "@types/node" "*"
 
@@ -4786,19 +4779,10 @@
   resolved "https://registry.yarnpkg.com/@types/expect/-/expect-1.20.4.tgz#8288e51737bf7e3ab5d7c77bfa695883745264e5"
   integrity sha512-Q5Vn3yjTDyCMV50TB6VRIbQNxSE4OmZR86VSbGaNpfUolm0iePBB4KdEEHmxoY5sT2+2DIvXW0rvMDP2nHZ4Mg==
 
-"@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.18":
-  version "4.17.30"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.30.tgz#0f2f99617fa8f9696170c46152ccf7500b34ac04"
-  integrity sha512-gstzbTWro2/nFed1WXtf+TtrpwxH7Ggs4RLYTLbeVgIkUQOI3WG/JKjgeOU1zXDvezllupjrf8OPIdvTbIaVOQ==
-  dependencies:
-    "@types/node" "*"
-    "@types/qs" "*"
-    "@types/range-parser" "*"
-
-"@types/express-serve-static-core@^4.17.33":
-  version "4.17.35"
-  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.35.tgz#c95dd4424f0d32e525d23812aa8ab8e4d3906c4f"
-  integrity sha512-wALWQwrgiB2AWTT91CB62b6Yt0sNHpznUXeZEcnPU3DRdlDIz74x8Qg1UUYKSVFi+va5vKOLYRBI1bRKiLLKIg==
+"@types/express-serve-static-core@*", "@types/express-serve-static-core@^4.17.33":
+  version "4.17.37"
+  resolved "https://registry.yarnpkg.com/@types/express-serve-static-core/-/express-serve-static-core-4.17.37.tgz#7e4b7b59da9142138a2aaa7621f5abedce8c7320"
+  integrity sha512-ZohaCYTgGFcOP7u6aJOhY9uIZQgZ2vxC2yWoArY+FeDXlqeH66ZVBjgvg+RLVAS/DWNq4Ap9ZXu1+SUQiiWYMg==
   dependencies:
     "@types/node" "*"
     "@types/qs" "*"
@@ -4806,12 +4790,12 @@
     "@types/send" "*"
 
 "@types/express@*", "@types/express@^4.17.13":
-  version "4.17.13"
-  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.13.tgz#a76e2995728999bab51a33fabce1d705a3709034"
-  integrity sha512-6bSZTPaTIACxn48l50SR+axgrqm6qXFIxrdAKaG6PaJk3+zuUr35hBlgT7vOmJcum+OEaIBLtHV/qloEAFITeA==
+  version "4.17.19"
+  resolved "https://registry.yarnpkg.com/@types/express/-/express-4.17.19.tgz#6ff9b4851fda132c5d3dcd2f89fdb6a7a0031ced"
+  integrity sha512-UtOfBtzN9OvpZPPbnnYunfjM7XCI4jyk1NvnFhTVz5krYAnW4o5DCoIekvms+8ApqhB4+9wSge1kBijdfTSmfg==
   dependencies:
     "@types/body-parser" "*"
-    "@types/express-serve-static-core" "^4.17.18"
+    "@types/express-serve-static-core" "^4.17.33"
     "@types/qs" "*"
     "@types/serve-static" "*"
 
@@ -4881,10 +4865,15 @@
   resolved "https://registry.yarnpkg.com/@types/http-cache-semantics/-/http-cache-semantics-4.0.1.tgz#0ea7b61496902b95890dc4c3a116b60cb8dae812"
   integrity sha512-SZs7ekbP8CN0txVG2xVRH6EgKmEm31BOxA07vkFaETzZz1xh+cbt8BcI0slpymvwhx5dlFnQG2rTlPVQn+iRPQ==
 
+"@types/http-errors@*":
+  version "2.0.2"
+  resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.2.tgz#a86e00bbde8950364f8e7846687259ffcd96e8c2"
+  integrity sha512-lPG6KlZs88gef6aD85z3HNkztpj7w2R7HmR3gygjfXCQmsLloWNARFkMuzKiiY8FGdh1XDpgBdrSf4aKDiA7Kg==
+
 "@types/http-proxy@^1.17.8":
-  version "1.17.9"
-  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.9.tgz#7f0e7931343761efde1e2bf48c40f02f3f75705a"
-  integrity sha512-QsbSjA/fSk7xB+UXlCT3wHBy5ai9wOcNDWwZAtud+jXhwOM3l+EYZh8Lng4+/6n8uar0J7xILzqftJdJ/Wdfkw==
+  version "1.17.12"
+  resolved "https://registry.yarnpkg.com/@types/http-proxy/-/http-proxy-1.17.12.tgz#86e849e9eeae0362548803c37a0a1afc616bd96b"
+  integrity sha512-kQtujO08dVtQ2wXAuSFfk9ASy3sug4+ogFR8Kd8UgP8PEuc1/G/8yjYRmp//PcDNJEUKOza/MrQu15bouEUCiw==
   dependencies:
     "@types/node" "*"
 
@@ -4932,11 +4921,16 @@
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.11.tgz#d421b6c527a3037f7c84433fd2c4229e016863d3"
   integrity sha512-wOuvG1SN4Us4rez+tylwwwCV1psiNVOkJeM3AUWUNWg/jDQY2+HE/444y5gc+jBmRqASOm2Oeh5c1axHobwRKQ==
 
-"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8", "@types/json-schema@^7.0.9":
+"@types/json-schema@^7.0.3", "@types/json-schema@^7.0.4", "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8":
   version "7.0.9"
   resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d"
   integrity sha512-qcUXuemtEu+E5wZSJHNxUXeCZhAfXKQ41D+duX+VYPde7xyEVZci+/oXKJL13tnRs9lR2pr4fod59GT6/X1/yQ==
 
+"@types/json-schema@^7.0.9":
+  version "7.0.13"
+  resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.13.tgz#02c24f4363176d2d18fc8b70b9f3c54aba178a85"
+  integrity sha512-RbSSoHliUbnXj3ny0CNFOoxrIDV6SUGyStHsvDqosw6CkdPV8TtWGlfecuK4ToyMEAql6pzNxgCFKanovUzlgQ==
+
 "@types/json5@^0.0.29":
   version "0.0.29"
   resolved "https://registry.yarnpkg.com/@types/json5/-/json5-0.0.29.tgz#ee28707ae94e11d2b827bcbe5270bcea7f3e71ee"
@@ -4972,14 +4966,14 @@
   integrity sha512-vXOTGVSLR2jMw440moWTC7H19iUyLtP3Z1YTj7cSsubOICinjMxFeb/V57v9QdyyPGbbWolUFSSmSiRSn94tFw==
 
 "@types/mime@*":
-  version "3.0.1"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.1.tgz#5f8f2bca0a5863cb69bc0b0acd88c96cb1d4ae10"
-  integrity sha512-Y4XFY5VJAuw0FgAqPNd6NNoV44jbq9Bz2L7Rh/J6jLTiHBSBJa9fxqQIvkIld4GsoDOcCbvzOUAbLPsSKKg+uA==
+  version "3.0.2"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-3.0.2.tgz#c1ae807f13d308ee7511a5b81c74f327028e66e8"
+  integrity sha512-Wj+fqpTLtTbG7c0tH47dkahefpLKEbB+xAZuLq7b4/IDHPl/n6VoXcyUQ2bypFlbSwvCr0y+bD4euTTqTJsPxQ==
 
 "@types/mime@^1":
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.2.tgz#93e25bf9ee75fe0fd80b594bc4feb0e862111b5a"
-  integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/@types/mime/-/mime-1.3.3.tgz#bbe64987e0eb05de150c305005055c7ad784a9ce"
+  integrity sha512-Ys+/St+2VF4+xuY6+kDIXGxbNRO0mesVg0bbxEfB97Od1Vjpjx9KD1qxs64Gcb3CWPirk9Xe+PT4YiiHQ9T+eg==
 
 "@types/minimatch@*", "@types/minimatch@^3.0.3":
   version "3.0.3"
@@ -4999,15 +4993,12 @@
     "@types/node" "*"
     form-data "^3.0.0"
 
-"@types/node@*", "@types/node@^14.14.31":
-  version "14.17.21"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.21.tgz#6359d8cf73481e312a43886fa50afc70ce5592c6"
-  integrity sha512-zv8ukKci1mrILYiQOwGSV4FpkZhyxQtuFWGya2GujWg+zVAeRQ4qbaMmWp9vb9889CFA8JECH7lkwCL6Ygg8kA==
-
-"@types/node@^10.17.5":
-  version "10.17.24"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-10.17.24.tgz#c57511e3a19c4b5e9692bb2995c40a3a52167944"
-  integrity sha512-5SCfvCxV74kzR3uWgTYiGxrd69TbT1I6+cMx1A5kEly/IVveJBimtAMlXiEyVFn5DvUFewQWxOOiJhlxeQwxgA==
+"@types/node@*":
+  version "20.8.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-20.8.5.tgz#13352ae1f80032171616910e8aba2e3e52e57d96"
+  integrity sha512-SPlobFgbidfIeOYlzXiEjSYeIJiOCthv+9tSQVpvk4PAdIIc+2SmjNVzWXk9t0Y7dl73Zdf+OgXKHX9XtkqUpw==
+  dependencies:
+    undici-types "~5.25.1"
 
 "@types/node@^15.6.1":
   version "15.14.9"
@@ -5019,6 +5010,11 @@
   resolved "https://registry.yarnpkg.com/@types/node/-/node-16.18.36.tgz#0db5d7efc4760d36d0d1d22c85d1a53accd5dc27"
   integrity sha512-8egDX8dE50XyXWH6C6PRCNkTP106DuUrvdrednFouDSmCi7IOvrqr0frznfZaHifHH/3aq/7a7v9N4wdXMqhBQ==
 
+"@types/node@^18.17.5":
+  version "18.18.5"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-18.18.5.tgz#afc0fd975df946d6e1add5bbf98264225b212244"
+  integrity sha512-4slmbtwV59ZxitY4ixUZdy1uRLf9eSIvBWPQxNjhHYWEtn0FryfKpyS2cvADYXTayWdKEIsJengncrVvkI4I6A==
+
 "@types/normalize-package-data@^2.4.0":
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/@types/normalize-package-data/-/normalize-package-data-2.4.0.tgz#e486d0d97396d79beedd0a6e33f4534ff6b4973e"
@@ -5059,15 +5055,20 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.2.tgz#690a1475b84f2a884fd07cd797c00f5f31356ea8"
   integrity sha512-ce5d3q03Ex0sy4R14722Rmt6MT07Ua+k4FwDfdcToYJcMKNtRVQvJ6JCAPdAmAnbRb6CsX6aYb9m96NGod9uTw==
 
-"@types/qs@*", "@types/qs@^6.9.5":
+"@types/qs@*":
+  version "6.9.8"
+  resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.8.tgz#f2a7de3c107b89b441e071d5472e6b726b4adf45"
+  integrity sha512-u95svzDlTysU5xecFNTgfFG5RUWu1A9P0VzgpcIiGZA9iraHOdSzcxMxQ55DyeRaGCSxQi7LxXDI4rzq/MYfdg==
+
+"@types/qs@^6.9.5":
   version "6.9.7"
   resolved "https://registry.yarnpkg.com/@types/qs/-/qs-6.9.7.tgz#63bb7d067db107cc1e457c303bc25d511febf6cb"
   integrity sha512-FGa1F62FT09qcrueBA6qYTrJPVDzah9a+493+o2PCXsesWHIn27G98TsSMs3WPNbZIEj4+VJf6saSFpvD+3Zsw==
 
 "@types/range-parser@*":
-  version "1.2.4"
-  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
-  integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
+  version "1.2.5"
+  resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.5.tgz#38bd1733ae299620771bd414837ade2e57757498"
+  integrity sha512-xrO9OoVPqFuYyR/loIHjnbvvyRZREYKLjxV4+dY6v3FQR3stQ9ZxIGkaclF7YhI9hfjpuTbu14hZEy94qKLtOA==
 
 "@types/react-dom@<18.0.0", "@types/react-dom@>=16.9.0":
   version "17.0.11"
@@ -5175,25 +5176,26 @@
   integrity sha512-G8hZ6XJiHnuhQKR7ZmysCeJWE08o8T0AXtk5darsCaTVsYZhhgUrq53jizaR2FvsoeCwJhlmwTjkXBY5Pn/ZHw==
 
 "@types/send@*":
-  version "0.17.1"
-  resolved "https://registry.yarnpkg.com/@types/send/-/send-0.17.1.tgz#ed4932b8a2a805f1fe362a70f4e62d0ac994e301"
-  integrity sha512-Cwo8LE/0rnvX7kIIa3QHCkcuF21c05Ayb0ZfxPiv0W8VRiZiNW/WuRupHKpqqGVGf7SUA44QSOUKaEd9lIrd/Q==
+  version "0.17.2"
+  resolved "https://registry.yarnpkg.com/@types/send/-/send-0.17.2.tgz#af78a4495e3c2b79bfbdac3955fdd50e03cc98f2"
+  integrity sha512-aAG6yRf6r0wQ29bkS+x97BIs64ZLxeE/ARwyS6wrldMm3C1MdKwCcnnEwMC1slI8wuxJOpiUH9MioC0A0i+GJw==
   dependencies:
     "@types/mime" "^1"
     "@types/node" "*"
 
 "@types/serve-index@^1.9.1":
-  version "1.9.1"
-  resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.1.tgz#1b5e85370a192c01ec6cec4735cf2917337a6278"
-  integrity sha512-d/Hs3nWDxNL2xAczmOVZNj92YZCS6RGxfBPjKzuu/XirCgXdpKEb88dYNbrYGint6IVWLNP+yonwVAuRC0T2Dg==
+  version "1.9.2"
+  resolved "https://registry.yarnpkg.com/@types/serve-index/-/serve-index-1.9.2.tgz#cb26e775678a8526b73a5d980a147518740aaecd"
+  integrity sha512-asaEIoc6J+DbBKXtO7p2shWUpKacZOoMBEGBgPG91P8xhO53ohzHWGCs4ScZo5pQMf5ukQzVT9fhX1WzpHihig==
   dependencies:
     "@types/express" "*"
 
 "@types/serve-static@*", "@types/serve-static@^1.13.10":
-  version "1.15.0"
-  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.0.tgz#c7930ff61afb334e121a9da780aac0d9b8f34155"
-  integrity sha512-z5xyF6uh8CbjAu9760KDKsH2FcDxZ2tFCsA4HIMWE6IkiYMXfVoa+4f9KX+FN0ZLsaMw1WNG2ETLA6N+/YA+cg==
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/@types/serve-static/-/serve-static-1.15.3.tgz#2cfacfd1fd4520bbc3e292cca432d5e8e2e3ee61"
+  integrity sha512-yVRvFsEMrv7s0lGhzrggJjNOSmZCdgCjw9xWrPr/kNNLp6FaDfMC1KaYl3TSJ0c58bECwNBMoQrZJ8hA8E1eFg==
   dependencies:
+    "@types/http-errors" "*"
     "@types/mime" "*"
     "@types/node" "*"
 
@@ -5208,9 +5210,9 @@
   integrity sha512-JYM8x9EGF163bEyhdJBpR2QX1R5naCJHC8ucJylJ3w9/CVBaskdQ8WqBf8MmQrd1kRvp/a4TS8HJ+bxzR7ZJYQ==
 
 "@types/sockjs@^0.3.33":
-  version "0.3.33"
-  resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.33.tgz#570d3a0b99ac995360e3136fd6045113b1bd236f"
-  integrity sha512-f0KEEe05NvUnat+boPTZ0dgaLZ4SfSouXUgv5noUiefG2ajgKjmETo9ZJyuqsl7dfl2aHlLJUiki6B4ZYldiiw==
+  version "0.3.34"
+  resolved "https://registry.yarnpkg.com/@types/sockjs/-/sockjs-0.3.34.tgz#43e10e549b36d2ba2589278f00f81b5d7ccda167"
+  integrity sha512-R+n7qBFnm/6jinlteC9DBL5dGiDGjWAvjo4viUanpnc/dG1y7uDoacXPIQ/PQEg1fI912SMHIa014ZjRpvDw4g==
   dependencies:
     "@types/node" "*"
 
@@ -5219,6 +5221,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e"
   integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw==
 
+"@types/stylis@^4.2.1":
+  version "4.2.1"
+  resolved "https://registry.yarnpkg.com/@types/stylis/-/stylis-4.2.1.tgz#867fcb0f81719d9ecef533fdda03e32083b959f6"
+  integrity sha512-OSaMrXUKxVigGlKRrET39V2xdhzlztQ9Aqumn1WbCBKHOi9ry7jKSd7rkyj0GzmWaU960Rd+LpOFpLfx5bMQAg==
+
 "@types/testing-library__jest-dom@^5.14.3", "@types/testing-library__jest-dom@^5.9.1":
   version "5.14.5"
   resolved "https://registry.yarnpkg.com/@types/testing-library__jest-dom/-/testing-library__jest-dom-5.14.5.tgz#d113709c90b3c75fdb127ec338dad7d5f86c974f"
@@ -5259,10 +5266,10 @@
     "@types/expect" "^1.20.4"
     "@types/node" "*"
 
-"@types/ws@^8.5.1":
-  version "8.5.3"
-  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.3.tgz#7d25a1ffbecd3c4f2d35068d0b283c037003274d"
-  integrity sha512-6YOoWjruKj1uLf3INHH7D3qTXwFfEsg1kf3c0uDdSBJwfa/llkwIjrAGV7j7mVgGNbzTQ3HiHKKDXl6bJPD97w==
+"@types/ws@^8.5.5":
+  version "8.5.7"
+  resolved "https://registry.yarnpkg.com/@types/ws/-/ws-8.5.7.tgz#1ca585074fe5d2c81dec7a3d451f244a2a6d83cb"
+  integrity sha512-6UrLjiDUvn40CMrAubXuIVtj2PEfKDffJS7ychvnPU44j+KVeXmdHHTgqcM/dxLUTHxlXHiFM8Skmb8ozGdTnQ==
   dependencies:
     "@types/node" "*"
 
@@ -5921,7 +5928,7 @@ ajv-keywords@^3.1.0, ajv-keywords@^3.4.1, ajv-keywords@^3.5.2:
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-3.5.2.tgz#31f29da5ab6e00d1c2d329acf7b5929614d5014d"
   integrity sha512-5p6WTN0DdTGVQk6VjcEju19IgaHudalcfabD7yhDGeA6bcQnmL+CpveLJq/3hvfwd1aof6L386Ougkx6RfyMIQ==
 
-ajv-keywords@^5.0.0:
+ajv-keywords@^5.1.0:
   version "5.1.0"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-5.1.0.tgz#69d4d385a4733cdbeab44964a1170a88f87f0e16"
   integrity sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==
@@ -5938,10 +5945,10 @@ ajv@^6.1.0, ajv@^6.10.0, ajv@^6.12.2, ajv@^6.12.3, ajv@^6.12.4, ajv@^6.12.5:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
-ajv@^8.0.0, ajv@^8.8.0:
-  version "8.11.0"
-  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.11.0.tgz#977e91dd96ca669f54a11e23e378e33b884a565f"
-  integrity sha512-wGgprdCvMalC0BztXvitD2hC04YffAvtsUn93JbGXYLAtCUO4xd17mCCZQxUOItiBwZvJScWo8NIvQMQ71rdpg==
+ajv@^8.0.0, ajv@^8.9.0:
+  version "8.12.0"
+  resolved "https://registry.yarnpkg.com/ajv/-/ajv-8.12.0.tgz#d1a0527323e22f53562c567c00991577dfbe19d1"
+  integrity sha512-sRu1kpcO9yLtYxBKvqfTeh9KzZEwO3STyX1HT+4CaDzC6HpTGYhIhPIzj9XuKU7KYDwnaeh5hcOwjy1QuJzBPA==
   dependencies:
     fast-deep-equal "^3.1.1"
     json-schema-traverse "^1.0.0"
@@ -6095,7 +6102,7 @@ anymatch@^2.0.0:
     micromatch "^3.1.4"
     normalize-path "^2.1.1"
 
-anymatch@^3.0.3:
+anymatch@^3.0.3, anymatch@~3.1.2:
   version "3.1.3"
   resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.3.tgz#790c58b19ba1720a84205b57c618d5ad8524973e"
   integrity sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==
@@ -6103,14 +6110,6 @@ anymatch@^3.0.3:
     normalize-path "^3.0.0"
     picomatch "^2.0.4"
 
-anymatch@~3.1.2:
-  version "3.1.2"
-  resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716"
-  integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg==
-  dependencies:
-    normalize-path "^3.0.0"
-    picomatch "^2.0.4"
-
 app-root-dir@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/app-root-dir/-/app-root-dir-1.0.2.tgz#38187ec2dea7577fff033ffcb12172692ff6e118"
@@ -6263,7 +6262,7 @@ array-find@^1.0.0:
 array-flatten@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/array-flatten/-/array-flatten-1.1.1.tgz#9a5f699051b1e7073328f2a008968b64ea2955d2"
-  integrity sha1-ml9pkFGx5wczKPKgCJaLZOopVdI=
+  integrity sha512-PCVAQswWemu6UdxsDFFX/+gVeYqKAod3D3UVm91jHwynguOwAvYPhx8nNlM++NqRcK6CxxpUafjmhIdKiHibqg==
 
 array-flatten@^2.1.2:
   version "2.1.2"
@@ -6764,7 +6763,7 @@ base@^0.11.1:
 batch@0.6.1:
   version "0.6.1"
   resolved "https://registry.yarnpkg.com/batch/-/batch-0.6.1.tgz#dc34314f4e679318093fc760272525f94bf25c16"
-  integrity sha1-3DQxT05nkxgJP8dgJyUl+UvyXBY=
+  integrity sha512-x+VAiMRL6UPkx+kudNvxTl6hB2XNNCG2r+7wixVfIYwu/2HKRXimwQyaumLjMveWvT2Hkd/cAJw+QBMfJ/EKVw==
 
 bcrypt-pbkdf@^1.0.0:
   version "1.0.2"
@@ -6825,9 +6824,9 @@ bin-version@^3.0.0:
     find-versions "^3.0.0"
 
 binary-extensions@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.1.0.tgz#30fa40c9e7fe07dbc895678cd287024dea241dd9"
-  integrity sha512-1Yj8h9Q+QDF5FzhMs/c9+6UntbD5MkRfRwac8DoEm9ZfUBZ7tZ55YcGVAzEe4bXsdQHEk+s9S5wsOKVdZrw0tQ==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/binary-extensions/-/binary-extensions-2.2.0.tgz#75f502eeaf9ffde42fc98829645be4ea76bd9e2d"
+  integrity sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==
 
 binaryextensions@^2.1.2:
   version "2.3.0"
@@ -6896,10 +6895,10 @@ bluebird@3.7.2, bluebird@^3.5.0, bluebird@^3.5.1, bluebird@^3.5.5, bluebird@^3.7
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-body-parser@1.20.0:
-  version "1.20.0"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
-  integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==
+body-parser@1.20.1:
+  version "1.20.1"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.1.tgz#b1812a8912c195cd371a3ee5e66faa2338a5c668"
+  integrity sha512-jWi7abTbYwajOytWCQc37VulmWiRae5RyTpaCyDcS5/lMdtwSz5lOpDE67srw/HYe35f1z3fDQw+3txg7gNtWw==
   dependencies:
     bytes "3.1.2"
     content-type "~1.0.4"
@@ -6909,15 +6908,15 @@ body-parser@1.20.0:
     http-errors "2.0.0"
     iconv-lite "0.4.24"
     on-finished "2.4.1"
-    qs "6.10.3"
+    qs "6.11.0"
     raw-body "2.5.1"
     type-is "~1.6.18"
     unpipe "1.0.0"
 
 bonjour-service@^1.0.11:
-  version "1.0.13"
-  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.0.13.tgz#4ac003dc1626023252d58adf2946f57e5da450c1"
-  integrity sha512-LWKRU/7EqDUC9CTAQtuZl5HzBALoCYwtLhffW3et7vZMwv3bWLpJf8bRYlMD5OCcDpTfnPgNCV4yo9ZIaJGMiA==
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.1.1.tgz#960948fa0e0153f5d26743ab15baf8e33752c135"
+  integrity sha512-Z/5lQRMOG9k7W+FkeGTNjh7htqn/2LMnfOvBZ8pynNZCM9MwkQkI3zeI4oz09uWdcgmgHugVvBqxGg4VQJ5PCg==
   dependencies:
     array-flatten "^2.1.2"
     dns-equal "^1.0.0"
@@ -7090,7 +7089,7 @@ buffer-json@^2.0.0:
   resolved "https://registry.yarnpkg.com/buffer-json/-/buffer-json-2.0.0.tgz#f73e13b1e42f196fe2fd67d001c7d7107edd7c23"
   integrity sha512-+jjPFVqyfF1esi9fvfUs3NqM0pH1ziZ36VP4hmA/y/Ssfo/5w5xHKfTw9BwQjoJ1w/oVtpLomqwUHKdefGyuHw==
 
-buffer@^5.2.1, buffer@^5.5.0, buffer@^5.6.0:
+buffer@^5.5.0, buffer@^5.6.0:
   version "5.7.1"
   resolved "https://registry.yarnpkg.com/buffer/-/buffer-5.7.1.tgz#ba62e7c13133053582197160851a8f648e99eed0"
   integrity sha512-EHcyIPBQ4BSGlvjB16k5KgAJ27CIsHY/2JBmCRReo48y9rQ3MaUzWX3KVlBa4U7MyX02HdVj0K7C3WaB3ju7FQ==
@@ -7114,7 +7113,7 @@ builtins@^1.0.3:
 bytes@3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/bytes/-/bytes-3.0.0.tgz#d32815404d689699f85a4ea4fa8755dd13a96048"
-  integrity sha1-0ygVQE1olpn4Wk6k+odV3ROpYEg=
+  integrity sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==
 
 bytes@3.1.2:
   version "3.1.2"
@@ -7983,16 +7982,16 @@ colorette@^1.2.1, colorette@^1.4.0:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-1.4.0.tgz#5190fbb87276259a86ad700bff2c6d6faa3fca40"
   integrity sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==
 
-colorette@^2.0.10, colorette@^2.0.14:
-  version "2.0.19"
-  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
-  integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
-
-colorette@^2.0.19:
+colorette@^2.0.10, colorette@^2.0.19:
   version "2.0.20"
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.20.tgz#9eb793e6833067f7235902fcd3b09917a000a95a"
   integrity sha512-IfEDxwoWIjkeXL1eXcDiow4UbKjhLdq6/EuSVR9GMN7KVH3r9gQ83e73hsz1Nd1T3ijd5xv1wcWRYO+D6kCI2w==
 
+colorette@^2.0.14:
+  version "2.0.19"
+  resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.19.tgz#cdf044f47ad41a0f4b56b3a0d5b4e6e1a2d5a798"
+  integrity sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==
+
 colors@0.5.x:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/colors/-/colors-0.5.1.tgz#7d0023eaeb154e8ee9fce75dcb923d0ed1667774"
@@ -8189,9 +8188,9 @@ content-disposition@0.5.4:
     safe-buffer "5.2.1"
 
 content-type@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
-  integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.5.tgz#8b773162656d1d1086784c8f23a54ce6d73d7918"
+  integrity sha512-nTjqfcBFEipKdXCv4YDQWCfmcLZKm81ldF0pAopTvyrFGVbcR6P/VAAd5G7N+0tTr8QqiU0tFadD6FK4NtJwOA==
 
 convert-source-map@^1.1.0, convert-source-map@^1.5.0, convert-source-map@^1.7.0:
   version "1.8.0"
@@ -8213,7 +8212,7 @@ convert-source-map@^2.0.0:
 cookie-signature@1.0.6:
   version "1.0.6"
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
-  integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
+  integrity sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==
 
 cookie@0.5.0:
   version "0.5.0"
@@ -8278,11 +8277,16 @@ core-js@^3.6.5:
   resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.6.5.tgz#7395dc273af37fb2e50e9bd3d9fe841285231d1a"
   integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA==
 
-core-util-is@1.0.2, core-util-is@~1.0.0:
+core-util-is@1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7"
   integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac=
 
+core-util-is@~1.0.0:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85"
+  integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
+
 cosmiconfig@^5.0.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-5.2.0.tgz#45038e4d28a7fe787203aede9c25bca4a08b12c8"
@@ -8698,14 +8702,14 @@ cypress-real-events@^1.7.0:
   resolved "https://registry.yarnpkg.com/cypress-real-events/-/cypress-real-events-1.7.0.tgz#ad6a78de33af3af0e6437f5c713e30691c44472c"
   integrity sha512-iyXp07j0V9sG3YClVDcvHN2DAQDgr+EjTID82uWDw6OZBlU3pXEBqTMNYqroz3bxlb0k+F74U81aZwzMNaKyew==
 
-cypress@^12.17.2:
-  version "12.17.2"
-  resolved "https://registry.yarnpkg.com/cypress/-/cypress-12.17.2.tgz#040ac55de1e811f6e037d231a2869d5ab8c29c85"
-  integrity sha512-hxWAaWbqQBzzMuadSGSuQg5PDvIGOovm6xm0hIfpCVcORsCAj/gF2p0EvfnJ4f+jK2PCiDgP6D2eeE9/FK4Mjg==
+cypress@^13.3.1:
+  version "13.3.1"
+  resolved "https://registry.yarnpkg.com/cypress/-/cypress-13.3.1.tgz#d72f922e167891574c7773d07ac64d7114e11d49"
+  integrity sha512-g4mJLZxYN+UAF2LMy3Znd4LBnUmS59Vynd81VES59RdW48Yt+QtR2cush3melOoVNz0PPbADpWr8DcUx6mif8Q==
   dependencies:
-    "@cypress/request" "^2.88.11"
+    "@cypress/request" "^3.0.0"
     "@cypress/xvfb" "^1.2.4"
-    "@types/node" "^14.14.31"
+    "@types/node" "^18.17.5"
     "@types/sinonjs__fake-timers" "8.1.1"
     "@types/sizzle" "^2.3.2"
     arch "^2.2.0"
@@ -8738,6 +8742,7 @@ cypress@^12.17.2:
     minimist "^1.2.8"
     ospath "^1.2.2"
     pretty-bytes "^5.6.0"
+    process "^0.11.10"
     proxy-from-env "1.0.0"
     request-progress "^3.0.0"
     semver "^7.5.3"
@@ -9168,17 +9173,12 @@ delegates@^1.0.0:
   resolved "https://registry.yarnpkg.com/delegates/-/delegates-1.0.0.tgz#84c6e159b81904fdca59a0ef44cd870d31250f9a"
   integrity sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=
 
-depd@1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.1.tgz#5783b4e1c459f06fa5ca27f991f3d06e7a310359"
-  integrity sha1-V4O04cRZ8G+lyif5kfPQbnoxA1k=
-
 depd@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
   integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
 
-depd@^1.1.2:
+depd@^1.1.2, depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha512-7emPTl6Dpo6JRXOXjLRxck+FlLRX5847cLKEn00PLAgc3g2hTZZgr+e4c2v6QpSmLeFP3n5yUo7ft6avBK/5jQ==
@@ -9214,9 +9214,9 @@ detect-node-es@^1.1.0:
   integrity sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==
 
 detect-node@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.0.4.tgz#014ee8f8f669c5c58023da64b8179c083a28c46c"
-  integrity sha512-ZIzRpLJrOj7jjP2miAtgqIfmzbxa4ZOr5jJc601zklsfEx9oTzmmj2nVpIPRpNlRTIh8lc1kyViIY7BWSGNmKw==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/detect-node/-/detect-node-2.1.0.tgz#c9c70775a49c3d03bc2c06d9a73be550f978f8b1"
+  integrity sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==
 
 detect-package-manager@^2.0.1:
   version "2.0.1"
@@ -9233,11 +9233,6 @@ detect-port@^1.3.0:
     address "^1.0.1"
     debug "4"
 
-devtools-protocol@0.0.818844:
-  version "0.0.818844"
-  resolved "https://registry.yarnpkg.com/devtools-protocol/-/devtools-protocol-0.0.818844.tgz#d1947278ec85b53e4c8ca598f607a28fa785ba9e"
-  integrity sha512-AD1hi7iVJ8OD0aMLQU5VK0XH9LDlA1+BcPIgrAxPfaibx2DbWucuyOhc4oyQCbnvDDO68nN6/LcKfqTP343Jjg==
-
 dezalgo@^1.0.0:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/dezalgo/-/dezalgo-1.0.4.tgz#751235260469084c132157dfa857f386d4c33d81"
@@ -9296,12 +9291,12 @@ discontinuous-range@1.0.0:
 dns-equal@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/dns-equal/-/dns-equal-1.0.0.tgz#b39e7f1da6eb0a75ba9c17324b34753c47e0654d"
-  integrity sha1-s55/HabrCnW6nBcySzR1PEfgZU0=
+  integrity sha512-z+paD6YUQsk+AbGCEM4PrOXSss5gd66QfcVBFTKR/HpFL9jCqikS94HYwKww6fQyO7IxrIIyUu+g0Ka9tUS2Cg==
 
 dns-packet@^5.2.2:
-  version "5.4.0"
-  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.4.0.tgz#1f88477cf9f27e78a213fb6d118ae38e759a879b"
-  integrity sha512-EgqGeaBB8hLiHLZtp/IbaDQTL8pZ0+IvwzSHA6d7VyMDM+B9hgddEMa9xjK5oYnw0ci0JQ6g2XCD7/f6cafU6g==
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/dns-packet/-/dns-packet-5.6.1.tgz#ae888ad425a9d1478a0674256ab866de1012cf2f"
+  integrity sha512-l4gcSouhcgIKRvyy99RNVOgxXiicE+2jZoNmaNmZ6JXiGajBOJAesk1OBlJuM5k2c+eudGdLxDqXuPCKIj6kpw==
   dependencies:
     "@leichtgewicht/ip-codec" "^2.0.1"
 
@@ -9552,7 +9547,7 @@ editorconfig-to-prettier@0.1.1:
 ee-first@1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
-  integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
+  integrity sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==
 
 ejs@^2.6.1:
   version "2.7.4"
@@ -9611,7 +9606,7 @@ emoticon@^3.2.0:
 encodeurl@^1.0.2, encodeurl@~1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/encodeurl/-/encodeurl-1.0.2.tgz#ad3ff4c86ec2d029322f5a02c3a9a606c95b3f59"
-  integrity sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=
+  integrity sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==
 
 encoding@^0.1.11:
   version "0.1.12"
@@ -10071,7 +10066,7 @@ escape-goat@^2.0.0:
 escape-html@~1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/escape-html/-/escape-html-1.0.3.tgz#0258eae4d3d0c0974de1c169188ef0051d1d1988"
-  integrity sha1-Aljq5NPQwJdN4cFpGI7wBR0dGYg=
+  integrity sha512-NiSupZ4OeuGwr68lGIeym/ksIZMJodUGOSCZ/FSnTxcrekbvqrgdUxlJOMpijaKZVjAJrWrGs/6Jy8OMuyj9ow==
 
 escape-string-regexp@1.0.5, escape-string-regexp@^1.0.2, escape-string-regexp@^1.0.5:
   version "1.0.5"
@@ -10421,7 +10416,7 @@ esutils@2.0.2, esutils@^2.0.2:
 etag@~1.8.1:
   version "1.8.1"
   resolved "https://registry.yarnpkg.com/etag/-/etag-1.8.1.tgz#41ae2eeb65efa62268aebfea83ac7d79299b0887"
-  integrity sha1-Qa4u62XvpiJorr/qg6x9eSmbCIc=
+  integrity sha512-aIL5Fx7mawVa300al2BnEE4iNvo1qETxLrPI/o05L7z6go7fCw1J6EQmbK4FmJ2AS7kgVF/KEZWufBfdClMcPg==
 
 event-stream@=3.3.4:
   version "3.3.4"
@@ -10441,12 +10436,7 @@ eventemitter2@6.4.7:
   resolved "https://registry.yarnpkg.com/eventemitter2/-/eventemitter2-6.4.7.tgz#a7f6c4d7abf28a14c1ef3442f21cb306a054271d"
   integrity sha512-tYUSVOGeQPKt/eC1ABfhHy5Xd96N3oIijJvN3O9+TsC28T5V9yX9oEfEK5faP0EFSNVOG97qtAS68GBrQB2hDg==
 
-eventemitter3@^4.0.0:
-  version "4.0.5"
-  resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.5.tgz#51d81e4f1ccc8311a04f0c20121ea824377ea6d9"
-  integrity sha512-QR0rh0YiPuxuDQ6+T9GAO/xWTExXpxIes1Nl9RykNGTnE1HJmkuEfxJH9cubjIOQZ/GH4qNBR4u8VSHaKiWs4g==
-
-eventemitter3@^4.0.4:
+eventemitter3@^4.0.0, eventemitter3@^4.0.4:
   version "4.0.7"
   resolved "https://registry.yarnpkg.com/eventemitter3/-/eventemitter3-4.0.7.tgz#2de9b68f6528d5644ef5c59526a1b4a07306169f"
   integrity sha512-8guHBZCwKnFhYdHr2ysuRWErTwhoN2X8XELRlrRwpmfeY2jjuUN4taQMsULKUVo1K4DvZl+0pgfyoysHxvmvEw==
@@ -10595,13 +10585,13 @@ expose-gc@^1.0.0:
   integrity sha512-ecOHrdm+zyOCGIwX18/1RHkUWgxDqGGRiGhaNC+42jReTtudbm2ID/DMa/wpaHwqy5YQHPZvsDqRM2F2iZ0uVA==
 
 express@^4.17.3:
-  version "4.18.1"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.18.1.tgz#7797de8b9c72c857b9cd0e14a5eea80666267caf"
-  integrity sha512-zZBcOX9TfehHQhtupq57OF8lFZ3UZi08Y97dwFCkD8p9d/d2Y3M+ykKcwaMDEL+4qyUolgBDX6AblpR3fL212Q==
+  version "4.18.2"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.2.tgz#3fabe08296e930c796c19e3c516979386ba9fd59"
+  integrity sha512-5/PsL6iGPdfQ/lKM1UuielYgv3BUoJfz1aUwU9vHZ+J7gyvwdQXFEBIEIaxeGf0GIcreATNyBExtalisDbuMqQ==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.20.0"
+    body-parser "1.20.1"
     content-disposition "0.5.4"
     content-type "~1.0.4"
     cookie "0.5.0"
@@ -10620,7 +10610,7 @@ express@^4.17.3:
     parseurl "~1.3.3"
     path-to-regexp "0.1.7"
     proxy-addr "~2.0.7"
-    qs "6.10.3"
+    qs "6.11.0"
     range-parser "~1.2.1"
     safe-buffer "5.2.1"
     send "0.18.0"
@@ -10683,7 +10673,7 @@ extglob@^2.0.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.1"
 
-extract-zip@2.0.1, extract-zip@^2.0.0:
+extract-zip@2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/extract-zip/-/extract-zip-2.0.1.tgz#663dca56fe46df890d5f131ef4a06d22bb8ba13a"
   integrity sha512-GDhU9ntwuKyGXdZBUgTIe+vXnWj0fppUEtMDL0+idd5Sta8TGpHssn/eusA9mrPr9qNDym6SxAYZjNvCn/9RBg==
@@ -11101,9 +11091,9 @@ follow-redirects@1.5.10:
     debug "=3.1.0"
 
 follow-redirects@^1.0.0:
-  version "1.13.0"
-  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.13.0.tgz#b42e8d93a2a7eea5ed88633676d6597bc8e384db"
-  integrity sha512-aq6gF1BEKje4a9i9+5jimNFIpq4Q1WiwBToeRK5NvZBd/TRsmW8BsJfOEGkr76TbOyPVD3OVDN910EcUNtRYEA==
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.15.3.tgz#fe2f3ef2690afce7e82ed0b44db08165b207123a"
+  integrity sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==
 
 for-each@^0.3.3:
   version "0.3.3"
@@ -11211,7 +11201,7 @@ fragment-cache@^0.2.1:
 fresh@0.5.2:
   version "0.5.2"
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
-  integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
+  integrity sha512-zJ2mQYM18rEFOudeV4GShTGIQ7RbzA7ozbU9I/XBpm7kqgMywgmylMwXHxZJmkVoYkna9d2pVXVXPdYTP9ej8Q==
 
 from2@^2.1.0, from2@^2.1.1:
   version "2.3.0"
@@ -11291,9 +11281,9 @@ fs-monkey@^1.0.3:
   integrity sha512-cybjIfiiE+pTWicSCLFHSrXZ6EilF30oh91FDP9S2B051prEa7QWfrVTQm10/dDpswBDXZugPa1Ogu8Yh+HV0Q==
 
 fs-monkey@^1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.4.tgz#ee8c1b53d3fe8bb7e5d2c5c5dfc0168afdd2f747"
-  integrity sha512-INM/fWAxMICjttnD0DX1rBvinKskj5G1w+oy/pnm9u/tSlnBrzFonJMcalKJ30P8RRsPzKcCG7Q8l0jx5Fh9YQ==
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/fs-monkey/-/fs-monkey-1.0.5.tgz#fe450175f0db0d7ea758102e1d84096acb925788"
+  integrity sha512-8uMbBjrhzW76TYgEV27Y5E//W2f/lTFmx78P2w19FZSxarhI/798APGQyuGCwmkNxgwGRhrLfvWyLBvNtuOmew==
 
 fs-readdir-recursive@^1.1.0:
   version "1.1.0"
@@ -11323,11 +11313,16 @@ fsevents@^1.2.7:
     bindings "^1.5.0"
     nan "^2.12.1"
 
-fsevents@^2.3.2, fsevents@~2.3.2:
+fsevents@^2.3.2:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a"
   integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==
 
+fsevents@~2.3.2:
+  version "2.3.3"
+  resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.3.tgz#cac6407785d03675a2a5e1a5305c697b347d90d6"
+  integrity sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==
+
 fullname@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/fullname/-/fullname-4.0.1.tgz#c4b0d85a90f8f4847980a5e7a859b86f89c49331"
@@ -11341,9 +11336,9 @@ fullname@^4.0.1:
     rc "^1.2.8"
 
 function-bind@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/function-bind/-/function-bind-1.1.1.tgz#a56899d3ea3c9bab874bb9773b7c5ede92f4895d"
-  integrity sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==
+  version "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, function.prototype.name@^1.1.2, function.prototype.name@^1.1.5:
   version "1.1.5"
@@ -11430,7 +11425,17 @@ get-caller-file@^2.0.1, get-caller-file@^2.0.5:
   resolved "https://registry.yarnpkg.com/get-caller-file/-/get-caller-file-2.0.5.tgz#4f94412a82db32f36e3b0b9741f8a97feb031f7e"
   integrity sha512-DyFP3BM/3YHTQOCUL/w0OZHR0lpKeGrxotcHWcqNEdnltqFwXVfhEBQ94eIo34AfQpo0rGki4cyIiftY06h2Fg==
 
-get-intrinsic@^1.0.2, get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
+get-intrinsic@^1.0.2, get-intrinsic@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
+  integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
+  dependencies:
+    function-bind "^1.1.1"
+    has "^1.0.3"
+    has-proto "^1.0.1"
+    has-symbols "^1.0.3"
+
+get-intrinsic@^1.1.0, get-intrinsic@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.1.1.tgz#15f59f376f855c446963948f0d24cd3637b4abc6"
   integrity sha512-kWZrnVM42QCiEA2Ig1bG8zjoIMOgxWwYCEeNdwY6Tv/cOSeGpcoX4pXHfKUxNKVoArnrEr2e9srnAxxGIraS9Q==
@@ -11448,16 +11453,6 @@ get-intrinsic@^1.1.3, get-intrinsic@^1.2.0:
     has "^1.0.3"
     has-symbols "^1.0.3"
 
-get-intrinsic@^1.2.1:
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/get-intrinsic/-/get-intrinsic-1.2.1.tgz#d295644fed4505fc9cde952c37ee12b477a83d82"
-  integrity sha512-2DcsyfABl+gVHEfCOaTrWgyt+tb6MSEGmKq+kI5HwLbIYgjgmMcV8KQ41uaKz1xxUcn9tJtgFbQUEVcEbd0FYw==
-  dependencies:
-    function-bind "^1.1.1"
-    has "^1.0.3"
-    has-proto "^1.0.1"
-    has-symbols "^1.0.3"
-
 get-nonce@^1.0.0:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/get-nonce/-/get-nonce-1.0.1.tgz#fdf3f0278073820d2ce9426c18f07481b1e0cdf3"
@@ -11926,11 +11921,16 @@ got@^9.6.0:
     to-readable-stream "^1.0.0"
     url-parse-lax "^3.0.0"
 
-graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.5, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.6, graceful-fs@^4.2.9:
+graceful-fs@^4.1.11, graceful-fs@^4.1.15, graceful-fs@^4.1.2, graceful-fs@^4.1.5, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4, graceful-fs@^4.2.9:
   version "4.2.10"
   resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.10.tgz#147d3a006da4ca3ce14728c7aefc287c367d7a6c"
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
+graceful-fs@^4.2.6:
+  version "4.2.11"
+  resolved "https://registry.yarnpkg.com/graceful-fs/-/graceful-fs-4.2.11.tgz#4183e4e8bf08bb6e05bbb2f7d2e0c8f712ca40e3"
+  integrity sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==
+
 grapheme-splitter@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/grapheme-splitter/-/grapheme-splitter-1.0.4.tgz#9cf3a665c6247479896834af35cf1dbb4400767e"
@@ -11971,9 +11971,9 @@ gunzip-maybe@^1.4.2:
     through2 "^2.0.3"
 
 handle-thing@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.0.tgz#0e039695ff50c93fc288557d696f3c1dc6776754"
-  integrity sha512-d4sze1JNC454Wdo2fkuyzCr6aHcbL6PGGuFAz0Li/NcOm1tCHGnWDRmJP85dh9IhQErTc2svWFEX5xHIOo//kQ==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/handle-thing/-/handle-thing-2.0.1.tgz#857f79ce359580c340d43081cc648970d0bb234e"
+  integrity sha512-9Qn4yBxelxoh2Ow62nP+Ka/kMnOXRi8BXnRaUwezLNhqelnN49xKz4F/dPP8OYLxLxq6JDtZb2i9XznUQbNPTg==
 
 handlebars@^4.7.7:
   version "4.7.7"
@@ -12059,16 +12059,16 @@ has-symbol-support-x@^1.4.1:
   resolved "https://registry.yarnpkg.com/has-symbol-support-x/-/has-symbol-support-x-1.4.1.tgz#66ec2e377e0c7d7ccedb07a3a84d77510ff1bc4c"
   integrity sha512-JkaetveU7hFbqnAC1EV1sF4rlojU2D4Usc5CmS69l6NfmPDnpnFUegzFg33eDkkpNCxZ0mQp65HwUDrNFS/8MA==
 
-has-symbols@^1.0.1, has-symbols@^1.0.2:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
-  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
-
-has-symbols@^1.0.3:
+has-symbols@^1.0.1, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
   integrity sha512-l3LCuF6MgDNwTDKkdYGEihYjt5pRPbEg46rtlmnSPlUbgmB8LOIrKJbYYFBSbnPaJexMKtiPO8hmeRjRz2Td+A==
 
+has-symbols@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.2.tgz#165d3070c00309752a1236a479331e3ac56f1423"
+  integrity sha512-chXa79rL/UC2KlX17jo3vRGz0azaWEx5tGqZg5pO3NUyEJVB17dMruQlzCCOfUvElghKcm5194+BCRvi2Rv/Gw==
+
 has-to-string-tag-x@^1.2.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/has-to-string-tag-x/-/has-to-string-tag-x-1.4.1.tgz#a045ab383d7b4b2012a00148ab0aa5f290044d4d"
@@ -12124,13 +12124,18 @@ has-yarn@^2.1.0:
   resolved "https://registry.yarnpkg.com/has-yarn/-/has-yarn-2.1.0.tgz#137e11354a7b5bf11aa5cb649cf0c6f3ff2b2e77"
   integrity sha512-UqBRqi4ju7T+TqGNdqAO0PaSVGsDGJUBQvk9eUWNGRY1CFGDzYhLWoM7JQEemnlvVcv/YEmc2wNW8BC24EnUsw==
 
-has@^1.0.0, has@^1.0.3:
+has@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has/-/has-1.0.3.tgz#722d7cbfc1f6aa8241f16dd814e011e1f41e8796"
   integrity sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==
   dependencies:
     function-bind "^1.1.1"
 
+has@^1.0.3:
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/has/-/has-1.0.4.tgz#2eb2860e000011dae4f1406a86fe80e530fb2ec6"
+  integrity sha512-qdSAmqLF6209RFj4VVItywPMbm3vWylknmB3nvNiUIs72xAimcM8nVYxYr7ncvZq5qzk9MKIZR8ijqD/1QuYjQ==
+
 hasha@^5.0.0:
   version "5.2.2"
   resolved "https://registry.yarnpkg.com/hasha/-/hasha-5.2.2.tgz#a48477989b3b327aea3c04f53096d816d97522a1"
@@ -12294,7 +12299,7 @@ hosted-git-info@^4.0.1:
 hpack.js@^2.1.6:
   version "2.1.6"
   resolved "https://registry.yarnpkg.com/hpack.js/-/hpack.js-2.1.6.tgz#87774c0949e513f42e84575b3c45681fade2a0b2"
-  integrity sha1-h3dMCUnlE/QuhFdbPEVoH63ioLI=
+  integrity sha512-zJxVehUdMGIKsRaNt7apO2Gqp0BdqW5yaiGHXXmbpvxgBYVZnAql+BJb4RO5ad2MgpbZKn5G6nMnegrH1FcNYQ==
   dependencies:
     inherits "^2.0.1"
     obuf "^1.0.0"
@@ -12335,11 +12340,16 @@ html-encoding-sniffer@^1.0.2:
   dependencies:
     whatwg-encoding "^1.0.1"
 
-html-entities@^2.1.0, html-entities@^2.3.2:
+html-entities@^2.1.0:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
   integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==
 
+html-entities@^2.3.2:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.4.0.tgz#edd0cee70402584c8c76cc2c0556db09d1f45061"
+  integrity sha512-igBTJcNNNhvZFRtm8uA6xMY6xYleeDwn3PeBCkDz7tHttv4F2hsDI2aPgNERWzvRcNYHNT3ymRaQzllmXj4YsQ==
+
 html-escaper@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
@@ -12429,7 +12439,7 @@ http-cache-semantics@^4.0.0, http-cache-semantics@^4.1.0:
 http-deceiver@^1.2.7:
   version "1.2.7"
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
-  integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
+  integrity sha512-LmpOGxTfbpgtGVxJrj5k7asXHCgNZp5nLfp+hWc8QQRqtb7fUy6kRY3BO1h9ddF6yIPYUARgxGOwB42DnxIaNw==
 
 http-errors@2.0.0:
   version "2.0.0"
@@ -12443,19 +12453,19 @@ http-errors@2.0.0:
     toidentifier "1.0.1"
 
 http-errors@~1.6.2:
-  version "1.6.2"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.2.tgz#0a002cc85707192a7e7946ceedc11155f60ec736"
-  integrity sha1-CgAsyFcHGSp+eUbO7cERVfYOxzY=
+  version "1.6.3"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.6.3.tgz#8b55680bb4be283a0b5bf4ea2e38580be1d9320d"
+  integrity sha512-lks+lVC8dgGyh97jxvxeYTWQFvh4uw4yC12gVl63Cg30sjPX4wuGcdkICVXDAESr6OJGjqGA8Iz5mkeN6zlD7A==
   dependencies:
-    depd "1.1.1"
+    depd "~1.1.2"
     inherits "2.0.3"
-    setprototypeof "1.0.3"
-    statuses ">= 1.3.1 < 2"
+    setprototypeof "1.1.0"
+    statuses ">= 1.4.0 < 2"
 
 http-parser-js@>=0.5.1:
-  version "0.5.5"
-  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.5.tgz#d7c30d5d3c90d865b4a2e870181f9d6f22ac7ac5"
-  integrity sha512-x+JVEkO2PoM8qqpbPbOL3cqHPwerep7OwzK7Ay+sMQjKzaKCqWvjoXm5tqMP9tXWWTnTzAjIhXg+J99XYuPhPA==
+  version "0.5.8"
+  resolved "https://registry.yarnpkg.com/http-parser-js/-/http-parser-js-0.5.8.tgz#af23090d9ac4e24573de6f6aecc9d84a48bf20e3"
+  integrity sha512-SGeBX54F94Wgu5RH3X5jsDtf4eHyRogWX1XGT3b4HuW3tQPM4AaBzoUji/4AAJNXCEOWZ5O0DgZmJw1947gD5Q==
 
 http-proxy-agent@^2.0.0:
   version "2.1.0"
@@ -12745,7 +12755,7 @@ inherits@2, inherits@2.0.4, inherits@^2.0.0, inherits@^2.0.1, inherits@^2.0.3, i
 inherits@2.0.3:
   version "2.0.3"
   resolved "https://registry.yarnpkg.com/inherits/-/inherits-2.0.3.tgz#633c2c83e3da42a502f52466022480f4208261de"
-  integrity sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4=
+  integrity sha512-x00IRNXNy63jwGkJmzPigoySHbaqpNuzKbBOmzK+g2OdZpQ9w+sxCN+VSB3ja7IAge2OP2qpfxTjeNcyjmW1uw==
 
 ini@2.0.0:
   version "2.0.0"
@@ -12926,9 +12936,9 @@ ipaddr.js@1.9.1:
   integrity sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g==
 
 ipaddr.js@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.0.1.tgz#eca256a7a877e917aeb368b0a7497ddf42ef81c0"
-  integrity sha512-1qTgH9NG+IIJ4yfKs2e6Pp1bZg8wbDbKHT21HrLIeYBTRLgMYKnMTPAuI3Lcs61nfx5h1xlXnbJtH1kX5/d/ng==
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/ipaddr.js/-/ipaddr.js-2.1.0.tgz#2119bc447ff8c257753b196fc5f1ce08a4cdf39f"
+  integrity sha512-LlbxQ7xKzfBusov6UMi4MFpEg0m+mAm9xyNGEduwXMEDuf4WfzB/RZwMVYEd7IKGvh4IUkEXYxtAVu9T3OelJQ==
 
 is-absolute-url@^2.0.0:
   version "2.1.0"
@@ -13167,7 +13177,7 @@ is-extendable@^1.0.1:
 is-extglob@^2.1.0, is-extglob@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/is-extglob/-/is-extglob-2.1.1.tgz#a88c02535791f02ed37c76a1b9ea9773c833f8c2"
-  integrity sha1-qIwCU1eR8C7TfHahueqXc8gz+MI=
+  integrity sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==
 
 is-fullwidth-code-point@^1.0.0:
   version "1.0.0"
@@ -13437,9 +13447,9 @@ is-stream@^1.0.0, is-stream@^1.1.0:
   integrity sha1-EtSj3U5o4Lec6428hBc66A2RykQ=
 
 is-stream@^2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.0.tgz#bde9c32680d6fae04129d6ac9d921ce7815f78e3"
-  integrity sha512-XCoy+WlUr7d1+Z8GgSuXmpuUFC9fOhRXglJMx+dwLKTkL44Cjd4W1Z5P+BQZpr+cR93aGP4S/s7Ftw6Nd/kiEw==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/is-stream/-/is-stream-2.0.1.tgz#fac1e3d53b97ad5a9d0ae9cef2389f5810a5c077"
+  integrity sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==
 
 is-string@^1.0.5, is-string@^1.0.7:
   version "1.0.7"
@@ -13602,7 +13612,7 @@ isbinaryfile@^4.0.10, isbinaryfile@^4.0.8:
 isexe@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/isexe/-/isexe-2.0.0.tgz#e8fbf374dc556ff8947a10dcb0572d633f2cfa10"
-  integrity sha1-6PvzdNxVb/iUehDcsFctYz8s+hA=
+  integrity sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==
 
 isobject@^2.0.0:
   version "2.1.0"
@@ -14560,6 +14570,14 @@ latest-version@^5.1.0:
   dependencies:
     package-json "^6.3.0"
 
+launch-editor@^2.6.0:
+  version "2.6.1"
+  resolved "https://registry.yarnpkg.com/launch-editor/-/launch-editor-2.6.1.tgz#f259c9ef95cbc9425620bbbd14b468fcdb4ffe3c"
+  integrity sha512-eB/uXmFVpY4zezmGp5XtU21kwo7GBbKB+EQ+UZeWtGb9yAM5xt/Evk+lYH3eRNAtId+ej4u7TYPFZ07w4s7rRw==
+  dependencies:
+    picocolors "^1.0.0"
+    shell-quote "^1.8.1"
+
 lazy-ass@1.6.0, lazy-ass@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/lazy-ass/-/lazy-ass-1.6.0.tgz#7999655e8646c17f089fdd187d150d3324d54513"
@@ -15165,7 +15183,7 @@ mdurl@^1.0.0:
 media-typer@0.3.0:
   version "0.3.0"
   resolved "https://registry.yarnpkg.com/media-typer/-/media-typer-0.3.0.tgz#8710d7af0aa626f8fffa1ce00168545263255748"
-  integrity sha1-hxDXrwqmJvj/+hzgAWhUUmMlV0g=
+  integrity sha512-dq+qelQ9akHpcOl/gUVRTxVIOkAJ1wR3QAvb4RsVjS8oVoFjDGTc679wJYmUmknUF5HwMLOgb5O+a3KxfWapPQ==
 
 mem-fs-editor@^6.0.0:
   version "6.0.0"
@@ -15254,7 +15272,7 @@ mem@^5.1.0:
     mimic-fn "^2.1.0"
     p-is-promise "^2.1.0"
 
-memfs@^3.1.2, memfs@^3.4.3:
+memfs@^3.1.2:
   version "3.4.7"
   resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.4.7.tgz#e5252ad2242a724f938cb937e3c4f7ceb1f70e5a"
   integrity sha512-ygaiUSNalBX85388uskeCyhSAoOSgzBbtVCr9jA2RROssFL9Q19/ZXFqS+2Th2sr1ewNIWgFdLzLC3Yl1Zv+lw==
@@ -15268,7 +15286,7 @@ memfs@^3.4.1:
   dependencies:
     fs-monkey "^1.0.4"
 
-memfs@^3.4.12:
+memfs@^3.4.12, memfs@^3.4.3:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/memfs/-/memfs-3.6.0.tgz#d7a2110f86f79dd950a8b6df6d57bc984aa185f6"
   integrity sha512-EGowvkkgbMcIChjMTMkESFDbZeSh8xZ7kNSF0hAiAN4Jh6jgHCRS0Ga/+C8y6Au+oqpezRHCfPsmJ2+DwAgiwQ==
@@ -15333,7 +15351,7 @@ meow@^9.0.0:
 merge-descriptors@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/merge-descriptors/-/merge-descriptors-1.0.1.tgz#b00aaa556dd8b44568150ec9d1b953f3f90cbb61"
-  integrity sha1-sAqqVW3YtEVoFQ7J0blT8/kMu2E=
+  integrity sha512-cCi6g3/Zr1iqQi6ySbseM1Xvooa98N0w31jzUYrXPX2xqObmFGHJ0tQ5u74H3mVh7wLouTseZyYIq39g8cNp1w==
 
 merge-stream@^2.0.0:
   version "2.0.0"
@@ -15348,7 +15366,7 @@ merge2@^1.2.3, merge2@^1.3.0, merge2@^1.4.1:
 methods@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/methods/-/methods-1.1.2.tgz#5529a4d67654134edcc5266656835b0f851afcee"
-  integrity sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4=
+  integrity sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==
 
 micromatch@^3.1.10, micromatch@^3.1.4:
   version "3.1.10"
@@ -15369,15 +15387,7 @@ micromatch@^3.1.10, micromatch@^3.1.4:
     snapdragon "^0.8.1"
     to-regex "^3.0.2"
 
-micromatch@^4.0.2, micromatch@^4.0.4:
-  version "4.0.4"
-  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
-  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
-  dependencies:
-    braces "^3.0.1"
-    picomatch "^2.2.3"
-
-micromatch@^4.0.5:
+micromatch@^4.0.2, micromatch@^4.0.5:
   version "4.0.5"
   resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.5.tgz#bc8999a7cbbf77cdc89f132f6e467051b49090c6"
   integrity sha512-DMy+ERcEW2q8Z2Po+WNXuw3c5YaUSFjAO5GsJqfEl7UjvtIuFKO6ZrKvcItdy98dwFI2N1tg3zNIdKaQT+aNdA==
@@ -15385,6 +15395,14 @@ micromatch@^4.0.5:
     braces "^3.0.2"
     picomatch "^2.3.1"
 
+micromatch@^4.0.4:
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/micromatch/-/micromatch-4.0.4.tgz#896d519dfe9db25fce94ceb7a500919bf881ebf9"
+  integrity sha512-pRmzw/XUcwXGpD9aI9q/0XOwLNygjETJ8y0ao0wdqprrzDa4YnxLcz7fQRZr8voh8V10kGhABbNcHVk5wHgWwg==
+  dependencies:
+    braces "^3.0.1"
+    picomatch "^2.2.3"
+
 mime-db@1.52.0, "mime-db@>= 1.43.0 < 2":
   version "1.52.0"
   resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.52.0.tgz#bbabcdc02859f4987301c856e3387ce5ec43bf70"
@@ -15443,9 +15461,9 @@ min-indent@^1.0.0:
   integrity sha512-I9jwMn07Sy/IwOj3zVkVik2JTvgpaykDZEigL6Rx6N9LbMywwUSMtxET+7lVoDLLd3O3IXwJwvuuns8UB/HeAg==
 
 minimalistic-assert@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.0.tgz#702be2dda6b37f4836bcb3f5db56641b64a1d3d3"
-  integrity sha1-cCvi3aazf0g2vLP121ZkG2Sh09M=
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz#2e194de044626d4a10e7f7fbc00ce73e83e4d5c7"
+  integrity sha512-UtJcAD4yEaGtjPezWuO9wC4nwUnVH/8/Im3yEHQP4b67cXlD/Qr9hdITCU1xDbSEXg2XKNaP8jsReV7vQd00/A==
 
 minimatch@3.0.4, minimatch@3.0.x, minimatch@^3.0.4:
   version "3.0.4"
@@ -15716,7 +15734,7 @@ mri@^1.2.0:
 ms@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8"
-  integrity sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g=
+  integrity sha512-Tpp60P6IUJDTuOq/5Z8cdskzJujfwqfOTkrwIwj7IRISpnkJnT6SyJ4PCPnGMoFjC9ddhal5KVIYtAt97ix05A==
 
 ms@2.1.1:
   version "2.1.1"
@@ -15902,11 +15920,6 @@ node-fetch@^2.0.0:
   dependencies:
     whatwg-url "^5.0.0"
 
-node-fetch@^2.6.1:
-  version "2.6.1"
-  resolved "https://registry.yarnpkg.com/node-fetch/-/node-fetch-2.6.1.tgz#045bd323631f76ed2e2b55573394416b639a0052"
-  integrity sha512-V4aYg89jEoVRxRb2fJdAg8FHvI7cEyYdVAh94HH0UIK8oJxUfkjlDQN9RbMx+bEjP7+ggMiFRprSti032Oipxw==
-
 node-forge@^1:
   version "1.3.1"
   resolved "https://registry.yarnpkg.com/node-forge/-/node-forge-1.3.1.tgz#be8da2af243b2417d5f646a770663a92b7e9ded3"
@@ -16277,12 +16290,12 @@ object-copy@^0.1.0:
     define-property "^0.2.5"
     kind-of "^3.0.3"
 
-object-inspect@^1.11.0, object-inspect@^1.7.0, object-inspect@^1.9.0:
+object-inspect@^1.11.0, object-inspect@^1.7.0:
   version "1.11.1"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.11.1.tgz#d4bd7d7de54b9a75599f59a00bd698c1f1c6549b"
   integrity sha512-If7BjFlpkzzBeV1cqgT3OSWT3azyoxDGajR+iGnFBfVV2EWyDyWaZZW2ERDjUaY2QM8i5jI3Sj7mhsM4DDAqWA==
 
-object-inspect@^1.12.3:
+object-inspect@^1.12.3, object-inspect@^1.9.0:
   version "1.12.3"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.3.tgz#ba62dffd67ee256c8c086dfae69e016cd1f198b9"
   integrity sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==
@@ -16497,7 +16510,7 @@ open@^6.3.0:
   dependencies:
     is-wsl "^1.1.0"
 
-open@^8.0.4:
+open@^8.0.4, open@^8.0.9:
   version "8.4.2"
   resolved "https://registry.yarnpkg.com/open/-/open-8.4.2.tgz#5b5ffe2a8f793dcd2aad73e550cb87b59cb084f9"
   integrity sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==
@@ -16506,7 +16519,7 @@ open@^8.0.4:
     is-docker "^2.1.1"
     is-wsl "^2.2.0"
 
-open@^8.0.9, open@^8.4.0:
+open@^8.4.0:
   version "8.4.0"
   resolved "https://registry.yarnpkg.com/open/-/open-8.4.0.tgz#345321ae18f8138f82565a910fdc6b39e8c244f8"
   integrity sha512-XgFPPM+B28FtCCgSb9I+s9szOC1vZRSwgWsRUA5ylIxRTgKozqjOCrVOqGsYABPYK5qnfqClxZTFBa8PKt2v6Q==
@@ -17086,7 +17099,7 @@ path-scurry@^1.10.1:
 path-to-regexp@0.1.7:
   version "0.1.7"
   resolved "https://registry.yarnpkg.com/path-to-regexp/-/path-to-regexp-0.1.7.tgz#df604178005f522f15eb4490e7247a1bfaa67f8c"
-  integrity sha1-32BBeABfUi8V60SQ5yR6G/qmf4w=
+  integrity sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==
 
 path-to-regexp@^1.7.0:
   version "1.8.0"
@@ -17809,9 +17822,9 @@ process-nextick-args@^1.0.6:
   integrity sha1-FQ4gt1ZZCtP5EJPyWk8q2L/zC6M=
 
 process-nextick-args@~2.0.0:
-  version "2.0.0"
-  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.0.tgz#a37d732f4271b4ab1ad070d35508e8290788ffaa"
-  integrity sha512-MtEC1TqN0EU5nephaJ4rAtThHtC86dNN9qCuEhtshvpVBkAW5ZO7BASN9REnF9eoXGcRub+pFuKEpOHE+HbEMw==
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
+  integrity sha512-3ouUOpQhtgrbOa17J7+uxOTpITYWaGP7/AhoR3+A+/1e9skrzelGi/dXzEYyvbxubEF6Wn2ypscTKiKJFFn1ag==
 
 process-on-spawn@^1.0.0:
   version "1.0.0"
@@ -17949,6 +17962,11 @@ psl@^1.1.28:
   resolved "https://registry.yarnpkg.com/psl/-/psl-1.8.0.tgz#9326f8bcfb013adcc005fdff056acce020e51c24"
   integrity sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ==
 
+psl@^1.1.33:
+  version "1.9.0"
+  resolved "https://registry.yarnpkg.com/psl/-/psl-1.9.0.tgz#d0df2a137f00794565fcaf3b2c00cd09f8d5a5a7"
+  integrity sha512-E/ZsdU4HLs/68gYzgGTkMicWTLPdAftJLfJFlLUAAKZGkStNU72sZjT66SnMDVOfOWY/YAoiD7Jxa9iHvngcag==
+
 pump@^1.0.0:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pump/-/pump-1.0.3.tgz#5dfe8311c33bbf6fc18261f9f34702c47c08a954"
@@ -17987,7 +18005,12 @@ punycode@^1.4.1:
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-1.4.1.tgz#c0d5a63b2718800ad8e1eb0fa5269c84dd41845e"
   integrity sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==
 
-punycode@^2.1.0, punycode@^2.1.1:
+punycode@^2.1.0:
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.3.0.tgz#f67fa67c94da8f4d0cfff981aee4118064199b8f"
+  integrity sha512-rRV+zQD8tVFys26lAGR9WUuS4iUAngJScM+ZRSKtvl5tKeZ2t5bvdNFdNHBW9FWR4guGHlgmsZ1G7BSm2wTbuA==
+
+punycode@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/punycode/-/punycode-2.1.1.tgz#b58b010ac40c22c5657616c8d2c2c02c7bf479ec"
   integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==
@@ -18015,33 +18038,22 @@ puppeteer-core@^2.1.1:
     rimraf "^2.6.1"
     ws "^6.1.0"
 
-puppeteer@^5.5.0:
-  version "5.5.0"
-  resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-5.5.0.tgz#331a7edd212ca06b4a556156435f58cbae08af00"
-  integrity sha512-OM8ZvTXAhfgFA7wBIIGlPQzvyEETzDjeRa4mZRCRHxYL+GNH5WAuYUQdja3rpWZvkX/JKqmuVgbsxDNsDFjMEg==
-  dependencies:
-    debug "^4.1.0"
-    devtools-protocol "0.0.818844"
-    extract-zip "^2.0.0"
-    https-proxy-agent "^4.0.0"
-    node-fetch "^2.6.1"
-    pkg-dir "^4.2.0"
-    progress "^2.0.1"
-    proxy-from-env "^1.0.0"
-    rimraf "^3.0.2"
-    tar-fs "^2.0.0"
-    unbzip2-stream "^1.3.3"
-    ws "^7.2.3"
-
 q@^1.1.2:
   version "1.5.1"
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
-qs@6.10.3:
-  version "6.10.3"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
-  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
+qs@6.10.4:
+  version "6.10.4"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.4.tgz#6a3003755add91c0ec9eacdc5f878b034e73f9e7"
+  integrity sha512-OQiU+C+Ds5qiH91qh/mg0w+8nwQuLjM4F4M/PbmhDOoYehPh+Fb0bDjtR1sOvy7YKxvj28Y/M0PhP5uVX0kB+g==
+  dependencies:
+    side-channel "^1.0.4"
+
+qs@6.11.0:
+  version "6.11.0"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.11.0.tgz#fd0d963446f7a65e1367e01abd85429453f0c37a"
+  integrity sha512-MvjoMCJwEarSbUYk5O+nmoSzSutSsTwF85zcHPQ9OrlFoZOYIjaqBAJIqIXjptyD5vThxGq52Xu/MaJzRkIk4Q==
   dependencies:
     side-channel "^1.0.4"
 
@@ -18052,13 +18064,6 @@ qs@^6.10.0, qs@^6.11.0:
   dependencies:
     side-channel "^1.0.4"
 
-qs@~6.10.3:
-  version "6.10.5"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.5.tgz#974715920a80ff6a262264acd2c7e6c2a53282b4"
-  integrity sha512-O5RlPh0VFtR78y79rgcgKK4wbAI0C5zGVLztOIdpWX6ep368q5Hv6XRxDvXuZ9q3C6v+e3n8UfZZJw7IIG27eQ==
-  dependencies:
-    side-channel "^1.0.4"
-
 qs@~6.5.2:
   version "6.5.2"
   resolved "https://registry.yarnpkg.com/qs/-/qs-6.5.2.tgz#cb3ae806e8740444584ef154ce8ee98d403f3e36"
@@ -18614,7 +18619,7 @@ read-pkg@^5.0.0, read-pkg@^5.2.0:
     parse-json "^5.0.0"
     type-fest "^0.6.0"
 
-"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.1, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.5:
+"readable-stream@1 || 2", readable-stream@^2.0.0, readable-stream@^2.0.2, readable-stream@^2.0.4, readable-stream@^2.0.6, readable-stream@^2.1.5, readable-stream@^2.2.2, readable-stream@^2.3.0, readable-stream@^2.3.5:
   version "2.3.6"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.6.tgz#b11c27d88b8ff1fbe070643cf94b0c79ae1b0aaf"
   integrity sha512-tQtKA9WIAhBF3+VLAseyMqZeBjW0AHJoxOtYqSUZNJxauErmLbVm2FW1y+J/YA9dUrAC39ITejlZWhVIwawkKw==
@@ -18627,7 +18632,7 @@ read-pkg@^5.0.0, read-pkg@^5.2.0:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
-"readable-stream@2 || 3", readable-stream@^3.0.6, readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
+"readable-stream@2 || 3", readable-stream@^3.1.1, readable-stream@^3.4.0, readable-stream@^3.6.0:
   version "3.6.0"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.0.tgz#337bbda3adc0706bd3e024426a286d4b4b2c9198"
   integrity sha512-BViHy7LKeTz4oNnkcLJ+lVSL6vpiFeX6/d3oSH8zCW7UxP2onchk+vTGB143xuFjHS3deTgkKoXXymXqymiIdA==
@@ -18636,7 +18641,7 @@ read-pkg@^5.0.0, read-pkg@^5.2.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
-readable-stream@~2.3.6:
+readable-stream@^2.0.1, readable-stream@~2.3.6:
   version "2.3.8"
   resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-2.3.8.tgz#91125e8042bba1b9887f49345f6277027ce8be9b"
   integrity sha512-8p0AUk4XODgIewSi0l8Epjs+EVnWiK7NoDIEGU0HhE7+ZyY8D1IMY7odu5lRrFXGg71L15KG8QrPmum45RTtdA==
@@ -18649,6 +18654,15 @@ readable-stream@~2.3.6:
     string_decoder "~1.1.1"
     util-deprecate "~1.0.1"
 
+readable-stream@^3.0.6:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-3.6.2.tgz#56a9b36ea965c00c5a93ef31eb111a0f11056967"
+  integrity sha512-9u/sniCrY3D5WdsERHzHE4G2YCXqoG5FTHUiCC4SIbr6XcLZBY05ya9EKjYek9O5xOAwjGq+1JdGBAS7Q9ScoA==
+  dependencies:
+    inherits "^2.0.3"
+    string_decoder "^1.1.1"
+    util-deprecate "^1.0.1"
+
 readdir-scoped-modules@^1.1.0:
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/readdir-scoped-modules/-/readdir-scoped-modules-1.1.0.tgz#8d45407b4f870a0dcaebc0e28670d18e74514309"
@@ -19106,7 +19120,7 @@ requireindex@^1.1.0:
 requires-port@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/requires-port/-/requires-port-1.0.0.tgz#925d2601d39ac485e091cf0da5c6e694dc3dcaff"
-  integrity sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8=
+  integrity sha512-KigOCHcocU3XODJxsu8i/j8T9tzT4adHiecwORRQ0ZZFcp7ahwXuRU1m+yuO90C5ZUyGeGfocHDI14M3L3yDAQ==
 
 reselect@^4.0.0:
   version "4.0.0"
@@ -19419,7 +19433,7 @@ safe-buffer@5.1.2, safe-buffer@~5.1.0, safe-buffer@~5.1.1:
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.1.2.tgz#991ec69d296e0313747d59bdfd2b745c35f8828d"
   integrity sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g==
 
-safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2:
+safe-buffer@5.2.1, safe-buffer@>=5.1.0, safe-buffer@^5.0.1, safe-buffer@^5.1.0, safe-buffer@^5.1.1, safe-buffer@^5.1.2, safe-buffer@~5.2.0:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/safe-buffer/-/safe-buffer-5.2.1.tgz#1eaf9fa9bdb1fdd4ec75f58f9cdb4e6b7827eec6"
   integrity sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==
@@ -19551,14 +19565,14 @@ schema-utils@^3.2.0:
     ajv-keywords "^3.5.2"
 
 schema-utils@^4.0.0:
-  version "4.0.0"
-  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.0.0.tgz#60331e9e3ae78ec5d16353c467c34b3a0a1d3df7"
-  integrity sha512-1edyXKgh6XnJsJSQ8mKWXnN/BVaIbFMLpouRUrXgVq7WYne5kw3MW7UPhO44uRXQSIpTSXoJbmrR2X0w9kUTyg==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-4.2.0.tgz#70d7c93e153a273a805801882ebd3bff20d89c8b"
+  integrity sha512-L0jRsrPpjdckP3oPug3/VxNKt2trR8TcabrM6FOAAlvC/9Phcmm+cuAgTlxBqdBR1WJx7Naj9WHw+aOmheSVbw==
   dependencies:
     "@types/json-schema" "^7.0.9"
-    ajv "^8.8.0"
+    ajv "^8.9.0"
     ajv-formats "^2.1.1"
-    ajv-keywords "^5.0.0"
+    ajv-keywords "^5.1.0"
 
 scoped-regex@^1.0.0:
   version "1.0.0"
@@ -19573,12 +19587,12 @@ scoped-regex@^2.0.0:
 select-hose@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/select-hose/-/select-hose-2.0.0.tgz#625d8658f865af43ec962bfc376a37359a4994ca"
-  integrity sha1-Yl2GWPhlr0Psliv8N2o3NZpJlMo=
+  integrity sha512-mEugaLK+YfkijB4fx0e6kImuJdCIt2LxCRcbEYPqRGCs4F2ogyfZU5IAZRdjCP8JPq2AtdNoC/Dux63d9Kiryg==
 
-selfsigned@^2.0.1:
-  version "2.0.1"
-  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.0.1.tgz#8b2df7fa56bf014d19b6007655fff209c0ef0a56"
-  integrity sha512-LmME957M1zOsUhG+67rAjKfiWFox3SBxE/yymatMZsAx+oMrJ0YQ8AToOnyCm7xbeg2ep37IHLxdu0o2MavQOQ==
+selfsigned@^2.1.1:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/selfsigned/-/selfsigned-2.1.1.tgz#18a7613d714c0cd3385c48af0075abf3f266af61"
+  integrity sha512-GSL3aowiF7wa/WtSFwnUrludWFoNhftq8bUkH9pkzjpN2XSPOAYEgg6e0sS9s0rZwgJzJiQRPU18A6clnoW5wQ==
   dependencies:
     node-forge "^1"
 
@@ -19723,7 +19737,7 @@ serve-favicon@^2.5.0:
 serve-index@^1.9.1:
   version "1.9.1"
   resolved "https://registry.yarnpkg.com/serve-index/-/serve-index-1.9.1.tgz#d3768d69b1e7d82e5ce050fff5b453bea12a9239"
-  integrity sha1-03aNabHn2C5c4FD/9bRTvqEqkjk=
+  integrity sha512-pXHfKNP4qujrtteMrSBb0rc8HJ9Ms/GrXwcUtUtD5s4ewDJI8bT3Cz2zTVRMKtri49pLx2e0Ya8ziP5Ya2pZZw==
   dependencies:
     accepts "~1.3.4"
     batch "0.6.1"
@@ -19774,10 +19788,10 @@ set-value@^2.0.0, set-value@^2.0.1:
     is-plain-object "^2.0.3"
     split-string "^3.0.1"
 
-setprototypeof@1.0.3:
-  version "1.0.3"
-  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.0.3.tgz#66567e37043eeb4f04d91bd658c0cbefb55b8e04"
-  integrity sha1-ZlZ+NwQ+608E2RvWWMDL77VbjgQ=
+setprototypeof@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/setprototypeof/-/setprototypeof-1.1.0.tgz#d0bd85536887b6fe7c0d818cb962d9d91c54e656"
+  integrity sha512-BvE/TwpZX4FXExxOxZyRGQQv651MSwmWKZGqvmPcRIjDqWub67kTKuIMx43cZZrS/cBBzwBcNDWoFxt2XEFIpQ==
 
 setprototypeof@1.2.0:
   version "1.2.0"
@@ -19815,6 +19829,11 @@ shebang-regex@^3.0.0:
   resolved "https://registry.yarnpkg.com/shebang-regex/-/shebang-regex-3.0.0.tgz#ae16f1644d873ecad843b0307b143362d4c42172"
   integrity sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==
 
+shell-quote@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.yarnpkg.com/shell-quote/-/shell-quote-1.8.1.tgz#6dbf4db75515ad5bac63b4f1894c3a154c766680"
+  integrity sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==
+
 shelljs@^0.8.3, shelljs@^0.8.4:
   version "0.8.4"
   resolved "https://registry.yarnpkg.com/shelljs/-/shelljs-0.8.4.tgz#de7684feeb767f8716b326078a8a00875890e3c2"
@@ -20275,10 +20294,10 @@ statuses@2.0.1:
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
-"statuses@>= 1.3.1 < 2":
+"statuses@>= 1.4.0 < 2":
   version "1.5.0"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
-  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+  integrity sha512-OpZ3zP+jT1PI7I8nemJX4AKmAX070ZkYPVWV/AaKTJl+tXCTGyVdC1a4SL8RUQYEwk/f34ZX8UTykN68FwrqAA==
 
 stealthy-require@^1.1.1:
   version "1.1.1"
@@ -20507,11 +20526,11 @@ string.prototype.trimstart@^1.0.7:
     es-abstract "^1.22.1"
 
 string_decoder@^1.1.1:
-  version "1.2.0"
-  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.2.0.tgz#fe86e738b19544afe70469243b2a1ee9240eae8d"
-  integrity sha512-6YqyX6ZWEYguAxgZzHGL7SsCeGx3V2TtOTqZz1xSTSWnqsbWwbptafNyvf/ACquZUXV3DANr5BDIwNYe1mN42w==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-1.3.0.tgz#42f114594a46cf1a8e30b0a84f56c78c3edac21e"
+  integrity sha512-hkRX8U1WjJFd8LsDJ2yQ/wWWxaopEsABU1XfkM8A+j0+85JAGppt16cr1Whg6KIbb4okU6Mql6BOj+uup/wKeA==
   dependencies:
-    safe-buffer "~5.1.0"
+    safe-buffer "~5.2.0"
 
 string_decoder@~1.1.1:
   version "1.1.1"
@@ -20958,16 +20977,6 @@ tar-fs@^1.15.3:
     pump "^1.0.0"
     tar-stream "^1.1.2"
 
-tar-fs@^2.0.0:
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.0.tgz#d1cdd121ab465ee0eb9ccde2d35049d3f3daf0d5"
-  integrity sha512-9uW5iDvrIMCVpvasdFHW0wJPez0K4JnMZtsuIeDI7HyMGJNxmDZDOCQROr7lXyS+iL/QMpj07qcjGYTSdRFXUg==
-  dependencies:
-    chownr "^1.1.1"
-    mkdirp-classic "^0.5.2"
-    pump "^3.0.0"
-    tar-stream "^2.0.0"
-
 tar-fs@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/tar-fs/-/tar-fs-2.1.1.tgz#489a15ab85f1f0befabb370b7de4f9eb5cbe8784"
@@ -20991,17 +21000,6 @@ tar-stream@^1.1.2, tar-stream@^1.5.4:
     to-buffer "^1.1.1"
     xtend "^4.0.0"
 
-tar-stream@^2.0.0:
-  version "2.1.4"
-  resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.1.4.tgz#c4fb1a11eb0da29b893a5b25476397ba2d053bfa"
-  integrity sha512-o3pS2zlG4gxr67GmFYBLlq+dM8gyRGUOvsrHclSkvtVtQbjV0s/+ZE8OpICbaj8clrX3tjeHngYGP7rweaBnuw==
-  dependencies:
-    bl "^4.0.3"
-    end-of-stream "^1.4.1"
-    fs-constants "^1.0.0"
-    inherits "^2.0.3"
-    readable-stream "^3.1.1"
-
 tar-stream@^2.1.4:
   version "2.2.0"
   resolved "https://registry.yarnpkg.com/tar-stream/-/tar-stream-2.2.0.tgz#acad84c284136b060dc3faa64474aa9aebd77287"
@@ -21320,6 +21318,16 @@ tough-cookie@^2.3.3, tough-cookie@^2.3.4, tough-cookie@~2.5.0:
     psl "^1.1.28"
     punycode "^2.1.1"
 
+tough-cookie@^4.1.3:
+  version "4.1.3"
+  resolved "https://registry.yarnpkg.com/tough-cookie/-/tough-cookie-4.1.3.tgz#97b9adb0728b42280aa3d814b6b999b2ff0318bf"
+  integrity sha512-aX/y5pVRkfRnfmuX+OdbSdXvPe6ieKX/G2s7e98f4poJHnqH3281gDPm/metm6E/WRamfx7WC4HUqkWHfQHprw==
+  dependencies:
+    psl "^1.1.33"
+    punycode "^2.1.1"
+    universalify "^0.2.0"
+    url-parse "^1.5.3"
+
 tr46@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/tr46/-/tr46-1.0.1.tgz#a8b13fd6bfd2489519674ccde55ba3693b706d09"
@@ -21609,14 +21617,6 @@ unbox-primitive@^1.0.2:
     has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
-unbzip2-stream@^1.3.3:
-  version "1.4.3"
-  resolved "https://registry.yarnpkg.com/unbzip2-stream/-/unbzip2-stream-1.4.3.tgz#b0da04c4371311df771cdc215e87f2130991ace7"
-  integrity sha512-mlExGW4w71ebDJviH16lQLtZS32VKqsSfk80GCfUlwT/4/hNRFsoscrF/c++9xinkMzECL1uL9DDwXqFWkruPg==
-  dependencies:
-    buffer "^5.2.1"
-    through "^2.3.8"
-
 underscore@^1.9.1:
   version "1.10.2"
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.10.2.tgz#73d6aa3668f3188e4adb0f1943bd12cfd7efaaaf"
@@ -21627,6 +21627,11 @@ underscore@~1.4.4:
   resolved "https://registry.yarnpkg.com/underscore/-/underscore-1.4.4.tgz#61a6a32010622afa07963bf325203cf12239d604"
   integrity sha1-YaajIBBiKvoHljvzJSA88SI51gQ=
 
+undici-types@~5.25.1:
+  version "5.25.3"
+  resolved "https://registry.yarnpkg.com/undici-types/-/undici-types-5.25.3.tgz#e044115914c85f0bcbb229f346ab739f064998c3"
+  integrity sha512-Ga1jfYwRn7+cP9v8auvEXN1rX3sWqlayd4HP7OKk4mZWylEmu3KzXDUGrQUN6Ol7qo1gPvB2e5gX6udnyEPgdA==
+
 unherit@^1.0.4:
   version "1.1.3"
   resolved "https://registry.yarnpkg.com/unherit/-/unherit-1.1.3.tgz#6c9b503f2b41b262330c80e91c8614abdaa69c22"
@@ -21825,6 +21830,11 @@ universalify@^0.1.0:
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.1.1.tgz#fa71badd4437af4c148841e3b3b165f9e9e590b7"
   integrity sha1-+nG63UQ3r0wUiEHjs7Fl+enlkLc=
 
+universalify@^0.2.0:
+  version "0.2.0"
+  resolved "https://registry.yarnpkg.com/universalify/-/universalify-0.2.0.tgz#6451760566fa857534745ab1dde952d1b1761be0"
+  integrity sha512-CJ1QgKmNg3CwvAv/kOFmtnEN05f0D/cn9QntgNOQlQF9dgvVTHj3t+8JPdjqawCHk7V/KA+fbUqzZ9XWhcqPUg==
+
 universalify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/universalify/-/universalify-1.0.0.tgz#b61a1da173e8435b2fe3c67d29b9adf8594bd16d"
@@ -21838,7 +21848,7 @@ universalify@^2.0.0:
 unpipe@1.0.0, unpipe@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/unpipe/-/unpipe-1.0.0.tgz#b2bf4ee8514aae6165b4817829d21b2ef49904ec"
-  integrity sha1-sr9O6FFKrmFltIF4KdIbLvSZBOw=
+  integrity sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==
 
 unplugin@^1.3.1:
   version "1.4.0"
@@ -21931,9 +21941,9 @@ update-notifier@^5.1.0:
     xdg-basedir "^4.0.0"
 
 uri-js@^4.2.2:
-  version "4.2.2"
-  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.2.2.tgz#94c540e1ff772956e2299507c010aea6c8838eb0"
-  integrity sha512-KY9Frmirql91X2Qgjry0Wd4Y+YTdrdZheS8TFwvkbLWf/G5KNJDCh6pKL5OZctEW4+0Baa5idK2ZQuELRwPznQ==
+  version "4.4.1"
+  resolved "https://registry.yarnpkg.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"
+  integrity sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==
   dependencies:
     punycode "^2.1.0"
 
@@ -21956,7 +21966,7 @@ url-parse-lax@^3.0.0:
   dependencies:
     prepend-http "^2.0.0"
 
-url-parse@^1.5.10:
+url-parse@^1.5.10, url-parse@^1.5.3:
   version "1.5.10"
   resolved "https://registry.yarnpkg.com/url-parse/-/url-parse-1.5.10.tgz#9d3c2f736c1d75dd3bd2be507dcc111f1e2ea9c1"
   integrity sha512-WypcfiRhfeUP9vvF0j6rw0J3hrWrw6iZv3+22h6iRMJ/8z1Tj6XfLP4DsUix5MhMPnXpiHDoKyoZ/bdCkwBCiQ==
@@ -22084,7 +22094,7 @@ utility-types@^3.10.0:
 utils-merge@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/utils-merge/-/utils-merge-1.0.1.tgz#9f95710f50a267947b2ccc124741c1028427e713"
-  integrity sha1-n5VxD1CiZ5R7LMwSR0HBAoQn5xM=
+  integrity sha512-pMZTvIkT1d+TFGvDOqodOclx0QWkkgi6Tdoa8gC8ffGAAqz9pzPTZWAybbsHHoED/ztMtkv/VoYTYyShUn81hA==
 
 uuid@^3.3.2, uuid@^3.3.3:
   version "3.4.0"
@@ -22133,7 +22143,7 @@ value-equal@^1.0.1:
 vary@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/vary/-/vary-1.1.2.tgz#2299f02c6ded30d4a5961b0b9f74524a18f634fc"
-  integrity sha1-IpnwLG3tMNSllhsLn3RSShj2NPw=
+  integrity sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==
 
 vendors@^1.0.0:
   version "1.0.1"
@@ -22370,9 +22380,9 @@ webpack-dev-middleware@^6.1.1:
     schema-utils "^4.0.0"
 
 webpack-dev-server@^4.10.0:
-  version "4.10.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.10.0.tgz#de270d0009eba050546912be90116e7fd740a9ca"
-  integrity sha512-7dezwAs+k6yXVFZ+MaL8VnE+APobiO3zvpp3rBHe/HmWQ+avwh0Q3d0xxacOiBybZZ3syTZw9HXzpa3YNbAZDQ==
+  version "4.15.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-4.15.1.tgz#8944b29c12760b3a45bdaa70799b17cb91b03df7"
+  integrity sha512-5hbAst3h3C3L8w6W4P96L5vaV0PxSmJhxZvWKYIdgxOQm8pNZ5dEOmmSLBVpP85ReeyRt6AS1QJNyo/oFFPeVA==
   dependencies:
     "@types/bonjour" "^3.5.9"
     "@types/connect-history-api-fallback" "^1.3.5"
@@ -22380,7 +22390,7 @@ webpack-dev-server@^4.10.0:
     "@types/serve-index" "^1.9.1"
     "@types/serve-static" "^1.13.10"
     "@types/sockjs" "^0.3.33"
-    "@types/ws" "^8.5.1"
+    "@types/ws" "^8.5.5"
     ansi-html-community "^0.0.8"
     bonjour-service "^1.0.11"
     chokidar "^3.5.3"
@@ -22393,16 +22403,17 @@ webpack-dev-server@^4.10.0:
     html-entities "^2.3.2"
     http-proxy-middleware "^2.0.3"
     ipaddr.js "^2.0.1"
+    launch-editor "^2.6.0"
     open "^8.0.9"
     p-retry "^4.5.0"
     rimraf "^3.0.2"
     schema-utils "^4.0.0"
-    selfsigned "^2.0.1"
+    selfsigned "^2.1.1"
     serve-index "^1.9.1"
     sockjs "^0.3.24"
     spdy "^4.0.2"
     webpack-dev-middleware "^5.3.1"
-    ws "^8.4.2"
+    ws "^8.13.0"
 
 webpack-hot-middleware@^2.25.1:
   version "2.25.4"
@@ -22807,21 +22818,16 @@ ws@^6.1.0:
   dependencies:
     async-limiter "~1.0.0"
 
-ws@^7.2.3:
-  version "7.3.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-7.3.1.tgz#d0547bf67f7ce4f12a72dfe31262c68d7dc551c8"
-  integrity sha512-D3RuNkynyHmEJIpD2qrgVkc9DQ23OrN/moAwZX4L8DfvszsJxpjQuUq3LMx6HoYji9fbIOBY18XWBsAux1ZZUA==
+ws@^8.13.0:
+  version "8.14.2"
+  resolved "https://registry.yarnpkg.com/ws/-/ws-8.14.2.tgz#6c249a806eb2db7a20d26d51e7709eab7b2e6c7f"
+  integrity sha512-wEBG1ftX4jcglPxgFCMJmZ2PLtSbJ2Peg6TmpJFTbe9GZYOQCDPdMYu/Tm0/bGZkw8paZnJY45J4K2PZrLYq8g==
 
 ws@^8.2.3:
   version "8.13.0"
   resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
   integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
 
-ws@^8.4.2:
-  version "8.8.1"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.8.1.tgz#5dbad0feb7ade8ecc99b830c1d77c913d4955ff0"
-  integrity sha512-bGy2JzvzkPowEJV++hF07hAD6niYSr0JzBNo/J29WsB57A2r7Wlc1UFcTR9IzrPvuNVO4B8LGqF8qcpsVOhJCA==
-
 x-is-function@^1.0.4:
   version "1.0.4"
   resolved "https://registry.yarnpkg.com/x-is-function/-/x-is-function-1.0.4.tgz#5d294dc3d268cbdd062580e0c5df77a391d1fa1e"