From 3ea6db6073e108153873b4e0510188cd6528513d Mon Sep 17 00:00:00 2001
From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
Date: Sat, 21 Sep 2024 01:33:33 +1000
Subject: [PATCH] [8.x] [react@18] bump &#x60;styled-components&#x60; (#192368)
 (#193522)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[react@18] bump &#x60;styled-components&#x60;
(#192368)](https://github.com/elastic/kibana/pull/192368)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Anton
Dosov","email":"anton.dosov@elastic.co"},"sourceCommit":{"committedDate":"2024-09-20T09:26:47Z","message":"[react@18]
bump `styled-components` (#192368)\n\n## Summary\r\n\r\nPrep for
https://github.com/elastic/kibana/issues/138222\r\n\r\n\r\nThis PR
updates `styled-components` package to the latest v5 version. I\r\nwould
like to do it for react@18 upgrade to suppress a noisy warning\r\nthat
is coming from `styled-components` when it is used with
react@18.\r\nHere is that
PR\r\nhttps://github.com/styled-components/styled-components/pull/3564/files\r\n\r\n\r\nUpdates
the failed snapshot tests.\r\n\r\n\r\nDear reviewers, could you please
smoke-check your apps visually? This is\r\na minor upgrade, but I think
it is worth to click around
anyway.","sha":"b1434a446fecd1feae4230e0e9a4fbe0fea4d8f1","branchLabelMapping":{"^v9.0.0$":"main","^v8.16.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:SharedUX","backport:prev-minor","ci:project-deploy-observability","Team:obs-ux-infra_services","apm:review"],"title":"[react@18]
bump
`styled-components`","number":192368,"url":"https://github.com/elastic/kibana/pull/192368","mergeCommit":{"message":"[react@18]
bump `styled-components` (#192368)\n\n## Summary\r\n\r\nPrep for
https://github.com/elastic/kibana/issues/138222\r\n\r\n\r\nThis PR
updates `styled-components` package to the latest v5 version. I\r\nwould
like to do it for react@18 upgrade to suppress a noisy warning\r\nthat
is coming from `styled-components` when it is used with
react@18.\r\nHere is that
PR\r\nhttps://github.com/styled-components/styled-components/pull/3564/files\r\n\r\n\r\nUpdates
the failed snapshot tests.\r\n\r\n\r\nDear reviewers, could you please
smoke-check your apps visually? This is\r\na minor upgrade, but I think
it is worth to click around
anyway.","sha":"b1434a446fecd1feae4230e0e9a4fbe0fea4d8f1"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/192368","number":192368,"mergeCommit":{"message":"[react@18]
bump `styled-components` (#192368)\n\n## Summary\r\n\r\nPrep for
https://github.com/elastic/kibana/issues/138222\r\n\r\n\r\nThis PR
updates `styled-components` package to the latest v5 version. I\r\nwould
like to do it for react@18 upgrade to suppress a noisy warning\r\nthat
is coming from `styled-components` when it is used with
react@18.\r\nHere is that
PR\r\nhttps://github.com/styled-components/styled-components/pull/3564/files\r\n\r\n\r\nUpdates
the failed snapshot tests.\r\n\r\n\r\nDear reviewers, could you please
smoke-check your apps visually? This is\r\na minor upgrade, but I think
it is worth to click around
anyway.","sha":"b1434a446fecd1feae4230e0e9a4fbe0fea4d8f1"}}]}]
BACKPORT-->

---------

Co-authored-by: Anton Dosov <anton.dosov@elastic.co>
Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
---
 package.json                                  |   2 +-
 .../screen_reader_a11y.test.tsx.snap          |   2 +-
 .../__snapshots__/code_editor.test.tsx.snap   |   2 +-
 .../__snapshots__/table_cell.test.tsx.snap    |   8 +-
 .../__snapshots__/agent_marker.test.tsx.snap  |   4 +-
 .../value_with_space_warning.test.tsx.snap    |   2 +-
 .../netflow/__snapshots__/index.test.tsx.snap | 344 ++++++++---------
 .../netflow_row_renderer.test.tsx.snap        | 352 +++++++++---------
 yarn.lock                                     |  23 +-
 9 files changed, 366 insertions(+), 373 deletions(-)

diff --git a/package.json b/package.json
index 0ac2beac21188..e2bcbc9fd7760 100644
--- a/package.json
+++ b/package.json
@@ -1241,7 +1241,7 @@
     "source-map-support": "^0.5.19",
     "stats-lite": "^2.2.0",
     "strip-ansi": "^6.0.0",
-    "styled-components": "^5.1.0",
+    "styled-components": "^5.3.11",
     "suricata-sid-db": "^1.0.2",
     "swr": "^2.2.5",
     "symbol-observable": "^1.2.0",
diff --git a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/screen_reader_a11y.test.tsx.snap b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/screen_reader_a11y.test.tsx.snap
index af2a055abc376..617f4ae90272e 100644
--- a/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/screen_reader_a11y.test.tsx.snap
+++ b/packages/core/chrome/core-chrome-browser-internal/src/ui/header/__snapshots__/screen_reader_a11y.test.tsx.snap
@@ -249,7 +249,7 @@ exports[`ScreenReaderRouteAnnouncements renders 1`] = `
                   </style>
                   <style
                     data-styled="active"
-                    data-styled-version="5.1.0"
+                    data-styled-version="5.3.11"
                   />
                 </head>,
                 "ctr": 1,
diff --git a/packages/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap b/packages/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap
index e0fe7d3ea2386..e58bd37dead6c 100644
--- a/packages/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap
+++ b/packages/shared-ux/code_editor/impl/__snapshots__/code_editor.test.tsx.snap
@@ -221,7 +221,7 @@ exports[`<CodeEditor /> is rendered 1`] = `
                     </style>
                     <style
                       data-styled="active"
-                      data-styled-version="5.1.0"
+                      data-styled-version="5.3.11"
                     />
                   </head>,
                   "ctr": 2,
diff --git a/src/plugins/discover/public/components/doc_table/components/table_row/__snapshots__/table_cell.test.tsx.snap b/src/plugins/discover/public/components/doc_table/components/table_row/__snapshots__/table_cell.test.tsx.snap
index a6449fd265492..b4f03267ec810 100644
--- a/src/plugins/discover/public/components/doc_table/components/table_row/__snapshots__/table_cell.test.tsx.snap
+++ b/src/plugins/discover/public/components/doc_table/components/table_row/__snapshots__/table_cell.test.tsx.snap
@@ -67,11 +67,11 @@ exports[`Doc table cell component renders a cell with filter buttons if it is fi
                       "container": <head>
                         <style
                           data-styled="active"
-                          data-styled-version="5.1.0"
+                          data-styled-version="5.3.11"
                         />
                         <style
                           data-styled="active"
-                          data-styled-version="5.1.0"
+                          data-styled-version="5.3.11"
                         />
                         <style
                           data-emotion="css"
@@ -194,11 +194,11 @@ exports[`Doc table cell component renders a cell with filter buttons if it is fi
                       "container": <head>
                         <style
                           data-styled="active"
-                          data-styled-version="5.1.0"
+                          data-styled-version="5.3.11"
                         />
                         <style
                           data-styled="active"
-                          data-styled-version="5.1.0"
+                          data-styled-version="5.3.11"
                         />
                         <style
                           data-emotion="css"
diff --git a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/__snapshots__/agent_marker.test.tsx.snap b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/__snapshots__/agent_marker.test.tsx.snap
index 005510a6dafcc..54e605c7f33b8 100644
--- a/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/__snapshots__/agent_marker.test.tsx.snap
+++ b/x-pack/plugins/observability_solution/apm/public/components/shared/charts/timeline/marker/__snapshots__/agent_marker.test.tsx.snap
@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`AgentMarker renders 1`] = `
-<ThemeProvider
+<Component
   theme={[Function]}
 >
   <AgentMarker
@@ -14,5 +14,5 @@ exports[`AgentMarker renders 1`] = `
       }
     }
   />
-</ThemeProvider>
+</Component>
 `;
diff --git a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/value_with_space_warning/__tests__/__snapshots__/value_with_space_warning.test.tsx.snap b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/value_with_space_warning/__tests__/__snapshots__/value_with_space_warning.test.tsx.snap
index c89e32c83e771..f52f35f0c5193 100644
--- a/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/value_with_space_warning/__tests__/__snapshots__/value_with_space_warning.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/detection_engine/rule_exceptions/components/value_with_space_warning/__tests__/__snapshots__/value_with_space_warning.test.tsx.snap
@@ -149,7 +149,7 @@ Object {
   </body>,
   "container": <div>
     <div
-      class="sc-AxjAm dmOCRD"
+      class="sc-aXZVg gstlKY"
     >
       <span
         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
diff --git a/x-pack/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
index ca2c9900772be..cbefd017dfbda 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/netflow/__snapshots__/index.test.tsx.snap
@@ -2,8 +2,8 @@
 
 exports[`Netflow renders correctly against snapshot 1`] = `
 <DocumentFragment>
-  .c10,
-.c10 * {
+  .c11,
+.c11 * {
   display: inline-block;
   max-width: 100%;
   overflow: hidden;
@@ -12,14 +12,14 @@ exports[`Netflow renders correctly against snapshot 1`] = `
   white-space: nowrap;
 }
 
-.c2 {
+.c3 {
   border-radius: 2px;
   padding: 0 4px 0 8px;
   position: relative;
   z-index: 0 !important;
 }
 
-.c2::before {
+.c3::before {
   background-image: linear-gradient( 135deg, #535966 25%, transparent 25% ), linear-gradient( -135deg, #535966 25%, transparent 25% ), linear-gradient( 135deg, transparent 75%, #535966 75% ), linear-gradient( -135deg, transparent 75%, #535966 75% );
   background-position: 0 0,1px 0,1px -1px,0px 1px;
   background-size: 2px 2px;
@@ -32,9 +32,9 @@ exports[`Netflow renders correctly against snapshot 1`] = `
   width: 4px;
 }
 
-.c2:hover,
-.c2:hover .euiBadge,
-.c2:hover .euiBadge__text {
+.c3:hover,
+.c3:hover .euiBadge,
+.c3:hover .euiBadge__text {
   cursor: move;
   cursor: -webkit-grab;
   cursor: -moz-grab;
@@ -42,46 +42,46 @@ exports[`Netflow renders correctly against snapshot 1`] = `
 }
 
 .event-column-view:hover .c2::before,
-tr:hover .c2::before {
+tr:hover .c3::before {
   background-image: linear-gradient( 135deg, #98a2b3 25%, transparent 25% ), linear-gradient( -135deg, #98a2b3 25%, transparent 25% ), linear-gradient( 135deg, transparent 75%, #98a2b3 75% ), linear-gradient( -135deg, transparent 75%, #98a2b3 75% );
 }
 
-.c2:hover,
-.c2:focus,
-.event-column-view:hover .c2:hover,
-.event-column-view:focus .c2:focus,
-tr:hover .c2:hover,
-tr:hover .c2:focus {
+.c3:hover,
+.c3:focus,
+.event-column-view:hover .c3:hover,
+.event-column-view:focus .c3:focus,
+tr:hover .c3:hover,
+tr:hover .c3:focus {
   background-color: #36a2ef;
 }
 
-.c2:hover,
-.c2:focus,
-.event-column-view:hover .c2:hover,
-.event-column-view:focus .c2:focus,
-tr:hover .c2:hover,
-tr:hover .c2:focus,
-.c2:hover a,
-.c2:focus a,
-.event-column-view:hover .c2:hover a,
-.event-column-view:focus .c2:focus a,
-tr:hover .c2:hover a,
-tr:hover .c2:focus a,
-.c2:hover a:hover,
-.c2:focus a:hover,
-.event-column-view:hover .c2:hover a:hover,
-.event-column-view:focus .c2:focus a:hover,
-tr:hover .c2:hover a:hover,
-tr:hover .c2:focus a:hover {
+.c3:hover,
+.c3:focus,
+.event-column-view:hover .c3:hover,
+.event-column-view:focus .c3:focus,
+tr:hover .c3:hover,
+tr:hover .c3:focus,
+.c3:hover a,
+.c3:focus a,
+.event-column-view:hover .c3:hover a,
+.event-column-view:focus .c3:focus a,
+tr:hover .c3:hover a,
+tr:hover .c3:focus a,
+.c3:hover a:hover,
+.c3:focus a:hover,
+.event-column-view:hover .c3:hover a:hover,
+.event-column-view:focus .c3:focus a:hover,
+tr:hover .c3:hover a:hover,
+tr:hover .c3:focus a:hover {
   color: #1d1e24;
 }
 
-.c2:hover::before,
-.c2:focus::before,
-.event-column-view:hover .c2:hover::before,
-.event-column-view:focus .c2:focus::before,
-tr:hover .c2:hover::before,
-tr:hover .c2:focus::before {
+.c3:hover::before,
+.c3:focus::before,
+.event-column-view:hover .c3:hover::before,
+.event-column-view:focus .c3:focus::before,
+tr:hover .c3:hover::before,
+tr:hover .c3:focus::before {
   background-image: linear-gradient( 135deg, #1d1e24 25%, transparent 25% ), linear-gradient( -135deg, #1d1e24 25%, transparent 25% ), linear-gradient( 135deg, transparent 75%, #1d1e24 75% ), linear-gradient( -135deg, transparent 75%, #1d1e24 75% );
 }
 
@@ -94,90 +94,90 @@ tr:hover .c2:focus::before {
   display: none !important;
 }
 
-.c3 > span.euiToolTipAnchor {
+.c4 > span.euiToolTipAnchor {
   display: block;
 }
 
-.c3 > span.euiToolTipAnchor.eui-textTruncate {
+.c4 > span.euiToolTipAnchor.eui-textTruncate {
   display: inline-block;
 }
 
-.c4 {
+.c5 {
   vertical-align: top;
 }
 
-.c12 svg {
+.c13 svg {
   position: relative;
   top: -1px;
 }
 
-.c21 {
+.c22 {
   margin-right: 5px;
 }
 
-.c20 {
+.c21 {
   margin-right: 5px;
 }
 
-.c6 {
+.c7 {
   margin-right: 3px;
 }
 
-.c7 {
+.c8 {
   margin: 0 5px;
 }
 
-.c16 {
+.c17 {
   background-color: #343741;
   height: 2.8px;
   width: 25px;
 }
 
-.c19 {
+.c20 {
   background-color: #343741;
   height: 2.2px;
   width: 25px;
 }
 
-.c18 {
+.c19 {
   margin-right: 5px;
 }
 
-.c15 {
+.c16 {
   margin: 0 2px;
 }
 
-.c15 .euiToolTipAnchor {
+.c16 .euiToolTipAnchor {
   white-space: nowrap;
 }
 
-.c17 {
+.c18 {
   margin: 0 5px;
 }
 
-.c14 {
+.c15 {
   position: relative;
   top: 1px;
 }
 
-.c13 {
+.c14 {
   margin-right: 5px;
 }
 
-.c11 {
+.c12 {
   margin: 0 3px;
 }
 
-.c9 {
+.c10 {
   font-weight: bold;
   margin-top: 2px;
 }
 
-.c8 {
+.c9 {
   margin-top: 3px;
 }
 
-.c5 {
+.c6 {
   margin-right: 3px;
   position: relative;
   top: -1px;
@@ -232,7 +232,7 @@ tr:hover .c2:focus::before {
                           >
                             <div
                               aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                              class="c2"
+                              class="c2 c3"
                               data-rfd-drag-handle-context-id="0"
                               data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-user_name-first_last"
                               data-rfd-draggable-context-id="0"
@@ -243,14 +243,14 @@ tr:hover .c2:focus::before {
                               tabindex="-1"
                             >
                               <span
-                                class="c3"
+                                class="c4"
                                 data-test-subj="draggable-content-user.name"
                               >
                                 <span
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <span
-                                    class="euiBadge c4 emotion-euiBadge-hollow"
+                                    class="euiBadge c5 emotion-euiBadge-hollow"
                                     title=""
                                   >
                                     <span
@@ -298,7 +298,7 @@ tr:hover .c2:focus::before {
                   >
                     <div
                       aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                      class="c2"
+                      class="c2 c3"
                       data-rfd-drag-handle-context-id="0"
                       data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-process_name-rat"
                       data-rfd-draggable-context-id="0"
@@ -309,14 +309,14 @@ tr:hover .c2:focus::before {
                       tabindex="-1"
                     >
                       <span
-                        class="c3"
+                        class="c4"
                         data-test-subj="draggable-content-process.name"
                       >
                         <span
                           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                         >
                           <span
-                            class="euiBadge c4 emotion-euiBadge-hollow"
+                            class="euiBadge c5 emotion-euiBadge-hollow"
                             title=""
                           >
                             <span
@@ -369,7 +369,7 @@ tr:hover .c2:focus::before {
                   >
                     <div
                       aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                      class="c2"
+                      class="c2 c3"
                       data-rfd-drag-handle-context-id="0"
                       data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_duration-1000000"
                       data-rfd-draggable-context-id="0"
@@ -380,14 +380,14 @@ tr:hover .c2:focus::before {
                       tabindex="-1"
                     >
                       <span
-                        class="c3"
+                        class="c4"
                         data-test-subj="draggable-content-event.duration"
                       >
                         <div
                           class="euiText emotion-euiText-xs"
                         >
                           <span
-                            class="c5"
+                            class="c6"
                             data-euiicon-type="clock"
                           />
                           <span
@@ -425,7 +425,7 @@ tr:hover .c2:focus::before {
                   >
                     <div
                       aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                      class="c2"
+                      class="c2 c3"
                       data-rfd-drag-handle-context-id="0"
                       data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_start-2018-11-12T19:03:25_836Z"
                       data-rfd-draggable-context-id="0"
@@ -436,14 +436,14 @@ tr:hover .c2:focus::before {
                       tabindex="-1"
                     >
                       <span
-                        class="c3"
+                        class="c4"
                         data-test-subj="draggable-content-event.start"
                       >
                         <div
                           class="euiText emotion-euiText-xs"
                         >
                           <span
-                            class="c5"
+                            class="c6"
                             data-euiicon-type="clock"
                           />
                           <span
@@ -485,7 +485,7 @@ tr:hover .c2:focus::before {
                           >
                             <div
                               aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                              class="c2"
+                              class="c2 c3"
                               data-rfd-drag-handle-context-id="0"
                               data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-test-abcd-event_end-2018-11-12T19:03:25_936Z"
                               data-rfd-draggable-context-id="0"
@@ -496,14 +496,14 @@ tr:hover .c2:focus::before {
                               tabindex="-1"
                             >
                               <span
-                                class="c3"
+                                class="c4"
                                 data-test-subj="draggable-content-event.end"
                               >
                                 <div
                                   class="euiText emotion-euiText-xs"
                                 >
                                   <span
-                                    class="c5"
+                                    class="c6"
                                     data-euiicon-type="clock"
                                   />
                                   <span
@@ -537,7 +537,7 @@ tr:hover .c2:focus::before {
                 class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-center-row"
               >
                 <div
-                  class="euiFlexItem c6 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="c1"
@@ -555,7 +555,7 @@ tr:hover .c2:focus::before {
                       >
                         <div
                           aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                          class="c2"
+                          class="c2 c3"
                           data-rfd-drag-handle-context-id="0"
                           data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_direction-outgoing"
                           data-rfd-draggable-context-id="0"
@@ -566,14 +566,14 @@ tr:hover .c2:focus::before {
                           tabindex="-1"
                         >
                           <span
-                            class="c3"
+                            class="c4"
                             data-test-subj="draggable-content-network.direction"
                           >
                             <span
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <span
-                                class="euiBadge c4 emotion-euiBadge-hollow"
+                                class="euiBadge c5 emotion-euiBadge-hollow"
                                 title=""
                               >
                                 <span
@@ -599,7 +599,7 @@ tr:hover .c2:focus::before {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c6 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="c1"
@@ -617,7 +617,7 @@ tr:hover .c2:focus::before {
                       >
                         <div
                           aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                          class="c2"
+                          class="c2 c3"
                           data-rfd-drag-handle-context-id="0"
                           data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_protocol-http"
                           data-rfd-draggable-context-id="0"
@@ -628,14 +628,14 @@ tr:hover .c2:focus::before {
                           tabindex="-1"
                         >
                           <span
-                            class="c3"
+                            class="c4"
                             data-test-subj="draggable-content-network.protocol"
                           >
                             <span
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <span
-                                class="euiBadge c4 emotion-euiBadge-hollow"
+                                class="euiBadge c5 emotion-euiBadge-hollow"
                                 title=""
                               >
                                 <span
@@ -656,7 +656,7 @@ tr:hover .c2:focus::before {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c6 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="c1"
@@ -674,7 +674,7 @@ tr:hover .c2:focus::before {
                       >
                         <div
                           aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                          class="c2"
+                          class="c2 c3"
                           data-rfd-drag-handle-context-id="0"
                           data-rfd-drag-handle-draggable-id="draggableId.content.network-default-draggable-test-abcd-network_bytes-100"
                           data-rfd-draggable-context-id="0"
@@ -685,14 +685,14 @@ tr:hover .c2:focus::before {
                           tabindex="-1"
                         >
                           <span
-                            class="c3"
+                            class="c4"
                             data-test-subj="draggable-content-network.bytes"
                           >
                             <span
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <div
-                                class="euiText c7 emotion-euiText-xs"
+                                class="euiText c8 emotion-euiText-xs"
                               >
                                 <span>
                                   100B
@@ -706,7 +706,7 @@ tr:hover .c2:focus::before {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c6 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="c1"
@@ -724,7 +724,7 @@ tr:hover .c2:focus::before {
                       >
                         <div
                           aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                          class="c2"
+                          class="c2 c3"
                           data-rfd-drag-handle-context-id="0"
                           data-rfd-drag-handle-draggable-id="draggableId.content.network-default-draggable-test-abcd-network_packets-3"
                           data-rfd-draggable-context-id="0"
@@ -735,14 +735,14 @@ tr:hover .c2:focus::before {
                           tabindex="-1"
                         >
                           <span
-                            class="c3"
+                            class="c4"
                             data-test-subj="draggable-content-network.packets"
                           >
                             <span
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <div
-                                class="euiText c7 emotion-euiText-xs"
+                                class="euiText c8 emotion-euiText-xs"
                               >
                                 <span>
                                   3 pkts
@@ -756,7 +756,7 @@ tr:hover .c2:focus::before {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c6 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem c7 emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="c1"
@@ -774,7 +774,7 @@ tr:hover .c2:focus::before {
                       >
                         <div
                           aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                          class="c2"
+                          class="c2 c3"
                           data-rfd-drag-handle-context-id="0"
                           data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_transport-tcp"
                           data-rfd-draggable-context-id="0"
@@ -785,14 +785,14 @@ tr:hover .c2:focus::before {
                           tabindex="-1"
                         >
                           <span
-                            class="c3"
+                            class="c4"
                             data-test-subj="draggable-content-network.transport"
                           >
                             <span
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <span
-                                class="euiBadge c4 emotion-euiBadge-hollow"
+                                class="euiBadge c5 emotion-euiBadge-hollow"
                                 title=""
                               >
                                 <span
@@ -831,7 +831,7 @@ tr:hover .c2:focus::before {
                       >
                         <div
                           aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                          class="c2"
+                          class="c2 c3"
                           data-rfd-drag-handle-context-id="0"
                           data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-network_community_id-we_live_in_a"
                           data-rfd-draggable-context-id="0"
@@ -842,14 +842,14 @@ tr:hover .c2:focus::before {
                           tabindex="-1"
                         >
                           <span
-                            class="c3"
+                            class="c4"
                             data-test-subj="draggable-content-network.community_id"
                           >
                             <span
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <span
-                                class="euiBadge c4 emotion-euiBadge-hollow"
+                                class="euiBadge c5 emotion-euiBadge-hollow"
                                 title=""
                               >
                                 <span
@@ -872,7 +872,7 @@ tr:hover .c2:focus::before {
               </div>
             </div>
             <div
-              class="euiFlexItem c8 emotion-euiFlexItem-growZero"
+              class="euiFlexItem c9 emotion-euiFlexItem-growZero"
             >
               <div
                 class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-stretch-row"
@@ -899,7 +899,7 @@ tr:hover .c2:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <div
-                              class="c9"
+                              class="c10"
                             >
                               Source
                             </div>
@@ -943,7 +943,7 @@ tr:hover .c2:focus::before {
                                                 >
                                                   <div
                                                     aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                    class="c2"
+                                                    class="c2 c3"
                                                     data-rfd-drag-handle-context-id="0"
                                                     data-rfd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-test-source_ip-192_168_1_2-abcd"
                                                     data-rfd-draggable-context-id="0"
@@ -954,7 +954,7 @@ tr:hover .c2:focus::before {
                                                     tabindex="-1"
                                                   >
                                                     <span
-                                                      class="c10"
+                                                      class="c11"
                                                       data-test-subj="draggable-truncatable-content"
                                                     >
                                                       <span
@@ -989,7 +989,7 @@ tr:hover .c2:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c11"
+                                          class="c12"
                                           data-test-subj="ip-port-separator"
                                         >
                                           :
@@ -999,7 +999,7 @@ tr:hover .c2:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <div
-                                          class="c12"
+                                          class="c13"
                                         >
                                           <a
                                             class="euiLink emotion-euiLink-primary"
@@ -1036,7 +1036,7 @@ tr:hover .c2:focus::before {
                               class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                             >
                               <div
-                                class="euiFlexItem c13 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1060,7 +1060,7 @@ tr:hover .c2:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c2"
+                                            class="c2 c3"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_continent_name-North America"
                                             data-rfd-draggable-context-id="0"
@@ -1071,7 +1071,7 @@ tr:hover .c2:focus::before {
                                             tabindex="-1"
                                           >
                                             <span
-                                              class="c3"
+                                              class="c4"
                                               data-test-subj="draggable-content-source.geo.continent_name"
                                             >
                                               <span
@@ -1088,7 +1088,7 @@ tr:hover .c2:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c13 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1112,7 +1112,7 @@ tr:hover .c2:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c2"
+                                            class="c2 c3"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_name-United States"
                                             data-rfd-draggable-context-id="0"
@@ -1123,7 +1123,7 @@ tr:hover .c2:focus::before {
                                             tabindex="-1"
                                           >
                                             <span
-                                              class="c3"
+                                              class="c4"
                                               data-test-subj="draggable-content-source.geo.country_name"
                                             >
                                               <span
@@ -1140,7 +1140,7 @@ tr:hover .c2:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c13 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1149,7 +1149,7 @@ tr:hover .c2:focus::before {
                                     class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <span
-                                      class="c14"
+                                      class="c15"
                                       data-test-subj="country-flag"
                                     >
                                       🇺🇸
@@ -1174,7 +1174,7 @@ tr:hover .c2:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c2"
+                                            class="c2 c3"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_country_iso_code-US"
                                             data-rfd-draggable-context-id="0"
@@ -1185,7 +1185,7 @@ tr:hover .c2:focus::before {
                                             tabindex="-1"
                                           >
                                             <span
-                                              class="c3"
+                                              class="c4"
                                               data-test-subj="draggable-content-source.geo.country_iso_code"
                                             >
                                               <span
@@ -1202,7 +1202,7 @@ tr:hover .c2:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c13 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1226,7 +1226,7 @@ tr:hover .c2:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c2"
+                                            class="c2 c3"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_region_name-Georgia"
                                             data-rfd-draggable-context-id="0"
@@ -1237,7 +1237,7 @@ tr:hover .c2:focus::before {
                                             tabindex="-1"
                                           >
                                             <span
-                                              class="c3"
+                                              class="c4"
                                               data-test-subj="draggable-content-source.geo.region_name"
                                             >
                                               <span
@@ -1254,7 +1254,7 @@ tr:hover .c2:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c13 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1278,7 +1278,7 @@ tr:hover .c2:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c2"
+                                            class="c2 c3"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-source_geo_city_name-Atlanta"
                                             data-rfd-draggable-context-id="0"
@@ -1289,7 +1289,7 @@ tr:hover .c2:focus::before {
                                             tabindex="-1"
                                           >
                                             <span
-                                              class="c3"
+                                              class="c4"
                                               data-test-subj="draggable-content-source.geo.city_name"
                                             >
                                               <span
@@ -1313,7 +1313,7 @@ tr:hover .c2:focus::before {
                   </span>
                 </div>
                 <div
-                  class="euiFlexGroup c15 emotion-euiFlexGroup-none-center-center-column"
+                  class="euiFlexGroup c16 emotion-euiFlexGroup-none-center-center-column"
                 >
                   <div
                     class="euiFlexItem emotion-euiFlexItem-growZero"
@@ -1325,7 +1325,7 @@ tr:hover .c2:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c16"
+                          class="c17"
                           height="2.8"
                         />
                       </div>
@@ -1348,7 +1348,7 @@ tr:hover .c2:focus::before {
                             >
                               <div
                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                class="c2"
+                                class="c2 c3"
                                 data-rfd-drag-handle-context-id="0"
                                 data-rfd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-test-abcd-source_bytes-60"
                                 data-rfd-draggable-context-id="0"
@@ -1359,17 +1359,17 @@ tr:hover .c2:focus::before {
                                 tabindex="-1"
                               >
                                 <span
-                                  class="c3"
+                                  class="c4"
                                   data-test-subj="draggable-content-source.bytes"
                                 >
                                   <span
                                     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                   >
                                     <div
-                                      class="euiText c17 emotion-euiText-xs"
+                                      class="euiText c18 emotion-euiText-xs"
                                     >
                                       <span
-                                        class="c18"
+                                        class="c19"
                                       >
                                         (60.00%)
                                       </span>
@@ -1388,7 +1388,7 @@ tr:hover .c2:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c16"
+                          class="c17"
                           height="2.8"
                         />
                       </div>
@@ -1411,7 +1411,7 @@ tr:hover .c2:focus::before {
                             >
                               <div
                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                class="c2"
+                                class="c2 c3"
                                 data-rfd-drag-handle-context-id="0"
                                 data-rfd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-test-abcd-source_packets-2"
                                 data-rfd-draggable-context-id="0"
@@ -1422,14 +1422,14 @@ tr:hover .c2:focus::before {
                                 tabindex="-1"
                               >
                                 <span
-                                  class="c3"
+                                  class="c4"
                                   data-test-subj="draggable-content-source.packets"
                                 >
                                   <span
                                     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                   >
                                     <div
-                                      class="euiText c17 emotion-euiText-xs"
+                                      class="euiText c18 emotion-euiText-xs"
                                     >
                                       <span>
                                         2 pkts
@@ -1446,7 +1446,7 @@ tr:hover .c2:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c16"
+                          class="c17"
                           height="2.8"
                         />
                       </div>
@@ -1480,7 +1480,7 @@ tr:hover .c2:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c19"
+                          class="c20"
                           height="2.2"
                         />
                       </div>
@@ -1511,7 +1511,7 @@ tr:hover .c2:focus::before {
                                     >
                                       <div
                                         aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                        class="c2"
+                                        class="c2 c3"
                                         data-rfd-drag-handle-context-id="0"
                                         data-rfd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-test-abcd-destination_bytes-40"
                                         data-rfd-draggable-context-id="0"
@@ -1522,17 +1522,17 @@ tr:hover .c2:focus::before {
                                         tabindex="-1"
                                       >
                                         <span
-                                          class="c3"
+                                          class="c4"
                                           data-test-subj="draggable-content-destination.bytes"
                                         >
                                           <span
                                             class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                           >
                                             <div
-                                              class="euiText c17 emotion-euiText-xs"
+                                              class="euiText c18 emotion-euiText-xs"
                                             >
                                               <span
-                                                class="c18"
+                                                class="c19"
                                               >
                                                 (40.00%)
                                               </span>
@@ -1555,7 +1555,7 @@ tr:hover .c2:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c19"
+                          class="c20"
                           height="2.2"
                         />
                       </div>
@@ -1578,7 +1578,7 @@ tr:hover .c2:focus::before {
                             >
                               <div
                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                class="c2"
+                                class="c2 c3"
                                 data-rfd-drag-handle-context-id="0"
                                 data-rfd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-test-abcd-destination_packets-1"
                                 data-rfd-draggable-context-id="0"
@@ -1589,14 +1589,14 @@ tr:hover .c2:focus::before {
                                 tabindex="-1"
                               >
                                 <span
-                                  class="c3"
+                                  class="c4"
                                   data-test-subj="draggable-content-destination.packets"
                                 >
                                   <span
                                     class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                   >
                                     <div
-                                      class="euiText c17 emotion-euiText-xs"
+                                      class="euiText c18 emotion-euiText-xs"
                                     >
                                       <span>
                                         1 pkts
@@ -1613,7 +1613,7 @@ tr:hover .c2:focus::before {
                         class="euiFlexItem emotion-euiFlexItem-growZero"
                       >
                         <span
-                          class="c19"
+                          class="c20"
                           height="2.2"
                         />
                       </div>
@@ -1642,7 +1642,7 @@ tr:hover .c2:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <div
-                              class="c9"
+                              class="c10"
                             >
                               Destination
                             </div>
@@ -1686,7 +1686,7 @@ tr:hover .c2:focus::before {
                                                 >
                                                   <div
                                                     aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                    class="c2"
+                                                    class="c2 c3"
                                                     data-rfd-drag-handle-context-id="0"
                                                     data-rfd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-test-destination_ip-10_1_2_3-abcd"
                                                     data-rfd-draggable-context-id="0"
@@ -1697,7 +1697,7 @@ tr:hover .c2:focus::before {
                                                     tabindex="-1"
                                                   >
                                                     <span
-                                                      class="c10"
+                                                      class="c11"
                                                       data-test-subj="draggable-truncatable-content"
                                                     >
                                                       <span
@@ -1732,7 +1732,7 @@ tr:hover .c2:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c11"
+                                          class="c12"
                                           data-test-subj="ip-port-separator"
                                         >
                                           :
@@ -1742,7 +1742,7 @@ tr:hover .c2:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <div
-                                          class="c12"
+                                          class="c13"
                                         >
                                           <a
                                             class="euiLink emotion-euiLink-primary"
@@ -1779,7 +1779,7 @@ tr:hover .c2:focus::before {
                               class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                             >
                               <div
-                                class="euiFlexItem c13 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1803,7 +1803,7 @@ tr:hover .c2:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c2"
+                                            class="c2 c3"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_continent_name-North America"
                                             data-rfd-draggable-context-id="0"
@@ -1814,7 +1814,7 @@ tr:hover .c2:focus::before {
                                             tabindex="-1"
                                           >
                                             <span
-                                              class="c3"
+                                              class="c4"
                                               data-test-subj="draggable-content-destination.geo.continent_name"
                                             >
                                               <span
@@ -1831,7 +1831,7 @@ tr:hover .c2:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c13 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1855,7 +1855,7 @@ tr:hover .c2:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c2"
+                                            class="c2 c3"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_name-United States"
                                             data-rfd-draggable-context-id="0"
@@ -1866,7 +1866,7 @@ tr:hover .c2:focus::before {
                                             tabindex="-1"
                                           >
                                             <span
-                                              class="c3"
+                                              class="c4"
                                               data-test-subj="draggable-content-destination.geo.country_name"
                                             >
                                               <span
@@ -1883,7 +1883,7 @@ tr:hover .c2:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c13 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1892,7 +1892,7 @@ tr:hover .c2:focus::before {
                                     class="euiFlexItem emotion-euiFlexItem-growZero"
                                   >
                                     <span
-                                      class="c14"
+                                      class="c15"
                                       data-test-subj="country-flag"
                                     >
                                       🇺🇸
@@ -1917,7 +1917,7 @@ tr:hover .c2:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c2"
+                                            class="c2 c3"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_country_iso_code-US"
                                             data-rfd-draggable-context-id="0"
@@ -1928,7 +1928,7 @@ tr:hover .c2:focus::before {
                                             tabindex="-1"
                                           >
                                             <span
-                                              class="c3"
+                                              class="c4"
                                               data-test-subj="draggable-content-destination.geo.country_iso_code"
                                             >
                                               <span
@@ -1945,7 +1945,7 @@ tr:hover .c2:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c13 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1969,7 +1969,7 @@ tr:hover .c2:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c2"
+                                            class="c2 c3"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_region_name-New York"
                                             data-rfd-draggable-context-id="0"
@@ -1980,7 +1980,7 @@ tr:hover .c2:focus::before {
                                             tabindex="-1"
                                           >
                                             <span
-                                              class="c3"
+                                              class="c4"
                                               data-test-subj="draggable-content-destination.geo.region_name"
                                             >
                                               <span
@@ -1997,7 +1997,7 @@ tr:hover .c2:focus::before {
                                 </div>
                               </div>
                               <div
-                                class="euiFlexItem c13 emotion-euiFlexItem-growZero"
+                                class="euiFlexItem c14 emotion-euiFlexItem-growZero"
                               >
                                 <div
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2021,7 +2021,7 @@ tr:hover .c2:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c2"
+                                            class="c2 c3"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-test-abcd-destination_geo_city_name-New York"
                                             data-rfd-draggable-context-id="0"
@@ -2032,7 +2032,7 @@ tr:hover .c2:focus::before {
                                             tabindex="-1"
                                           >
                                             <span
-                                              class="c3"
+                                              class="c4"
                                               data-test-subj="draggable-content-destination.geo.city_name"
                                             >
                                               <span
@@ -2087,7 +2087,7 @@ tr:hover .c2:focus::before {
               >
                 <div
                   aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                  class="c2"
+                  class="c2 c3"
                   data-rfd-drag-handle-context-id="0"
                   data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
                   data-rfd-draggable-context-id="0"
@@ -2098,14 +2098,14 @@ tr:hover .c2:focus::before {
                   tabindex="-1"
                 >
                   <span
-                    class="c3"
+                    class="c4"
                     data-test-subj="draggable-content-tls.fingerprints.ja3.hash"
                   >
                     <span
                       class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                     >
                       <span
-                        class="euiBadge c4 emotion-euiBadge-hollow"
+                        class="euiBadge c5 emotion-euiBadge-hollow"
                         title=""
                       >
                         <span
@@ -2120,7 +2120,7 @@ tr:hover .c2:focus::before {
                             class="euiBadge__text emotion-euiBadge__text"
                           >
                             <span
-                              class="c20"
+                              class="c21"
                             >
                               ja3
                             </span>
@@ -2173,7 +2173,7 @@ tr:hover .c2:focus::before {
               >
                 <div
                   aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                  class="c2"
+                  class="c2 c3"
                   data-rfd-drag-handle-context-id="0"
                   data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
                   data-rfd-draggable-context-id="0"
@@ -2184,14 +2184,14 @@ tr:hover .c2:focus::before {
                   tabindex="-1"
                 >
                   <span
-                    class="c3"
+                    class="c4"
                     data-test-subj="draggable-content-tls.client_certificate.fingerprint.sha1"
                   >
                     <span
                       class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                     >
                       <span
-                        class="euiBadge c4 emotion-euiBadge-hollow"
+                        class="euiBadge c5 emotion-euiBadge-hollow"
                         title=""
                       >
                         <span
@@ -2206,7 +2206,7 @@ tr:hover .c2:focus::before {
                             class="euiBadge__text emotion-euiBadge__text"
                           >
                             <span
-                              class="c21"
+                              class="c22"
                             >
                               client cert
                             </span>
@@ -2259,7 +2259,7 @@ tr:hover .c2:focus::before {
               >
                 <div
                   aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                  class="c2"
+                  class="c2 c3"
                   data-rfd-drag-handle-context-id="0"
                   data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-test-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
                   data-rfd-draggable-context-id="0"
@@ -2270,14 +2270,14 @@ tr:hover .c2:focus::before {
                   tabindex="-1"
                 >
                   <span
-                    class="c3"
+                    class="c4"
                     data-test-subj="draggable-content-tls.server_certificate.fingerprint.sha1"
                   >
                     <span
                       class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                     >
                       <span
-                        class="euiBadge c4 emotion-euiBadge-hollow"
+                        class="euiBadge c5 emotion-euiBadge-hollow"
                         title=""
                       >
                         <span
@@ -2292,7 +2292,7 @@ tr:hover .c2:focus::before {
                             class="euiBadge__text emotion-euiBadge__text"
                           >
                             <span
-                              class="c21"
+                              class="c22"
                             >
                               server cert
                             </span>
diff --git a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
index 9ed6e85196639..a5cd1d996a007 100644
--- a/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
+++ b/x-pack/plugins/security_solution/public/timelines/components/timeline/body/renderers/netflow/__snapshots__/netflow_row_renderer.test.tsx.snap
@@ -16,8 +16,8 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
   border-radius: 4px;
 }
 
-.c12,
-.c12 * {
+.c13,
+.c13 * {
   display: inline-block;
   max-width: 100%;
   overflow: hidden;
@@ -26,14 +26,14 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
   white-space: nowrap;
 }
 
-.c4 {
+.c5 {
   border-radius: 2px;
   padding: 0 4px 0 8px;
   position: relative;
   z-index: 0 !important;
 }
 
-.c4::before {
+.c5::before {
   background-image: linear-gradient( 135deg, #535966 25%, transparent 25% ), linear-gradient( -135deg, #535966 25%, transparent 25% ), linear-gradient( 135deg, transparent 75%, #535966 75% ), linear-gradient( -135deg, transparent 75%, #535966 75% );
   background-position: 0 0,1px 0,1px -1px,0px 1px;
   background-size: 2px 2px;
@@ -46,9 +46,9 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
   width: 4px;
 }
 
-.c4:hover,
-.c4:hover .euiBadge,
-.c4:hover .euiBadge__text {
+.c5:hover,
+.c5:hover .euiBadge,
+.c5:hover .euiBadge__text {
   cursor: move;
   cursor: -webkit-grab;
   cursor: -moz-grab;
@@ -56,46 +56,46 @@ exports[`netflowRowRenderer renders correctly against snapshot 1`] = `
 }
 
 .event-column-view:hover .c4::before,
-tr:hover .c4::before {
+tr:hover .c5::before {
   background-image: linear-gradient( 135deg, #98a2b3 25%, transparent 25% ), linear-gradient( -135deg, #98a2b3 25%, transparent 25% ), linear-gradient( 135deg, transparent 75%, #98a2b3 75% ), linear-gradient( -135deg, transparent 75%, #98a2b3 75% );
 }
 
-.c4:hover,
-.c4:focus,
-.event-column-view:hover .c4:hover,
-.event-column-view:focus .c4:focus,
-tr:hover .c4:hover,
-tr:hover .c4:focus {
+.c5:hover,
+.c5:focus,
+.event-column-view:hover .c5:hover,
+.event-column-view:focus .c5:focus,
+tr:hover .c5:hover,
+tr:hover .c5:focus {
   background-color: #36a2ef;
 }
 
-.c4:hover,
-.c4:focus,
-.event-column-view:hover .c4:hover,
-.event-column-view:focus .c4:focus,
-tr:hover .c4:hover,
-tr:hover .c4:focus,
-.c4:hover a,
-.c4:focus a,
-.event-column-view:hover .c4:hover a,
-.event-column-view:focus .c4:focus a,
-tr:hover .c4:hover a,
-tr:hover .c4:focus a,
-.c4:hover a:hover,
-.c4:focus a:hover,
-.event-column-view:hover .c4:hover a:hover,
-.event-column-view:focus .c4:focus a:hover,
-tr:hover .c4:hover a:hover,
-tr:hover .c4:focus a:hover {
+.c5:hover,
+.c5:focus,
+.event-column-view:hover .c5:hover,
+.event-column-view:focus .c5:focus,
+tr:hover .c5:hover,
+tr:hover .c5:focus,
+.c5:hover a,
+.c5:focus a,
+.event-column-view:hover .c5:hover a,
+.event-column-view:focus .c5:focus a,
+tr:hover .c5:hover a,
+tr:hover .c5:focus a,
+.c5:hover a:hover,
+.c5:focus a:hover,
+.event-column-view:hover .c5:hover a:hover,
+.event-column-view:focus .c5:focus a:hover,
+tr:hover .c5:hover a:hover,
+tr:hover .c5:focus a:hover {
   color: #1d1e24;
 }
 
-.c4:hover::before,
-.c4:focus::before,
-.event-column-view:hover .c4:hover::before,
-.event-column-view:focus .c4:focus::before,
-tr:hover .c4:hover::before,
-tr:hover .c4:focus::before {
+.c5:hover::before,
+.c5:focus::before,
+.event-column-view:hover .c5:hover::before,
+.event-column-view:focus .c5:focus::before,
+tr:hover .c5:hover::before,
+tr:hover .c5:focus::before {
   background-image: linear-gradient( 135deg, #1d1e24 25%, transparent 25% ), linear-gradient( -135deg, #1d1e24 25%, transparent 25% ), linear-gradient( 135deg, transparent 75%, #1d1e24 75% ), linear-gradient( -135deg, transparent 75%, #1d1e24 75% );
 }
 
@@ -108,90 +108,90 @@ tr:hover .c4:focus::before {
   display: none !important;
 }
 
-.c5 > span.euiToolTipAnchor {
+.c6 > span.euiToolTipAnchor {
   display: block;
 }
 
-.c5 > span.euiToolTipAnchor.eui-textTruncate {
+.c6 > span.euiToolTipAnchor.eui-textTruncate {
   display: inline-block;
 }
 
-.c6 {
+.c7 {
   vertical-align: top;
 }
 
-.c14 svg {
+.c15 svg {
   position: relative;
   top: -1px;
 }
 
-.c23 {
+.c24 {
   margin-right: 5px;
 }
 
-.c22 {
+.c23 {
   margin-right: 5px;
 }
 
-.c8 {
+.c9 {
   margin-right: 3px;
 }
 
-.c9 {
+.c10 {
   margin: 0 5px;
 }
 
-.c18 {
+.c19 {
   background-color: #343741;
   height: 2.8px;
   width: 25px;
 }
 
-.c21 {
+.c22 {
   background-color: #343741;
   height: 2.2px;
   width: 25px;
 }
 
-.c20 {
+.c21 {
   margin-right: 5px;
 }
 
-.c17 {
+.c18 {
   margin: 0 2px;
 }
 
-.c17 .euiToolTipAnchor {
+.c18 .euiToolTipAnchor {
   white-space: nowrap;
 }
 
-.c19 {
+.c20 {
   margin: 0 5px;
 }
 
-.c16 {
+.c17 {
   position: relative;
   top: 1px;
 }
 
-.c15 {
+.c16 {
   margin-right: 5px;
 }
 
-.c13 {
+.c14 {
   margin: 0 3px;
 }
 
-.c11 {
+.c12 {
   font-weight: bold;
   margin-top: 2px;
 }
 
-.c10 {
+.c11 {
   margin-top: 3px;
 }
 
-.c7 {
+.c8 {
   margin-right: 3px;
   position: relative;
   top: -1px;
@@ -256,7 +256,7 @@ tr:hover .c4:focus::before {
                               >
                                 <div
                                   aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                  class="c4"
+                                  class="c4 c5"
                                   data-rfd-drag-handle-context-id="0"
                                   data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-user_name-first_last"
                                   data-rfd-draggable-context-id="0"
@@ -272,14 +272,14 @@ tr:hover .c4:focus::before {
                                     user.name
                                   </p>
                                   <span
-                                    class="c5"
+                                    class="c6"
                                     data-test-subj="draggable-content-user.name"
                                   >
                                     <span
                                       class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                     >
                                       <span
-                                        class="euiBadge c6 emotion-euiBadge-hollow"
+                                        class="euiBadge c7 emotion-euiBadge-hollow"
                                         title=""
                                       >
                                         <span
@@ -332,7 +332,7 @@ tr:hover .c4:focus::before {
                       >
                         <div
                           aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                          class="c4"
+                          class="c4 c5"
                           data-rfd-drag-handle-context-id="0"
                           data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-process_name-rat"
                           data-rfd-draggable-context-id="0"
@@ -348,14 +348,14 @@ tr:hover .c4:focus::before {
                             process.name
                           </p>
                           <span
-                            class="c5"
+                            class="c6"
                             data-test-subj="draggable-content-process.name"
                           >
                             <span
                               class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                             >
                               <span
-                                class="euiBadge c6 emotion-euiBadge-hollow"
+                                class="euiBadge c7 emotion-euiBadge-hollow"
                                 title=""
                               >
                                 <span
@@ -413,7 +413,7 @@ tr:hover .c4:focus::before {
                       >
                         <div
                           aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                          class="c4"
+                          class="c4 c5"
                           data-rfd-drag-handle-context-id="0"
                           data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_duration-1000000"
                           data-rfd-draggable-context-id="0"
@@ -429,14 +429,14 @@ tr:hover .c4:focus::before {
                             event.duration
                           </p>
                           <span
-                            class="c5"
+                            class="c6"
                             data-test-subj="draggable-content-event.duration"
                           >
                             <div
                               class="euiText emotion-euiText-xs"
                             >
                               <span
-                                class="c7"
+                                class="c8"
                                 data-euiicon-type="clock"
                               />
                               <span
@@ -479,7 +479,7 @@ tr:hover .c4:focus::before {
                       >
                         <div
                           aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                          class="c4"
+                          class="c4 c5"
                           data-rfd-drag-handle-context-id="0"
                           data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_start-2018-11-12T19:03:25_836Z"
                           data-rfd-draggable-context-id="0"
@@ -495,14 +495,14 @@ tr:hover .c4:focus::before {
                             event.start
                           </p>
                           <span
-                            class="c5"
+                            class="c6"
                             data-test-subj="draggable-content-event.start"
                           >
                             <div
                               class="euiText emotion-euiText-xs"
                             >
                               <span
-                                class="c7"
+                                class="c8"
                                 data-euiicon-type="clock"
                               />
                               <span
@@ -549,7 +549,7 @@ tr:hover .c4:focus::before {
                               >
                                 <div
                                   aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                  class="c4"
+                                  class="c4 c5"
                                   data-rfd-drag-handle-context-id="0"
                                   data-rfd-drag-handle-draggable-id="draggableId.content.duration-event-start-end-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-event_end-2018-11-12T19:03:25_936Z"
                                   data-rfd-draggable-context-id="0"
@@ -565,14 +565,14 @@ tr:hover .c4:focus::before {
                                     event.end
                                   </p>
                                   <span
-                                    class="c5"
+                                    class="c6"
                                     data-test-subj="draggable-content-event.end"
                                   >
                                     <div
                                       class="euiText emotion-euiText-xs"
                                     >
                                       <span
-                                        class="c7"
+                                        class="c8"
                                         data-euiicon-type="clock"
                                       />
                                       <span
@@ -611,7 +611,7 @@ tr:hover .c4:focus::before {
                     class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-center-row"
                   >
                     <div
-                      class="euiFlexItem c8 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem c9 emotion-euiFlexItem-growZero"
                     >
                       <div
                         class="c3"
@@ -629,7 +629,7 @@ tr:hover .c4:focus::before {
                           >
                             <div
                               aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                              class="c4"
+                              class="c4 c5"
                               data-rfd-drag-handle-context-id="0"
                               data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_direction-outgoing"
                               data-rfd-draggable-context-id="0"
@@ -645,14 +645,14 @@ tr:hover .c4:focus::before {
                                 network.direction
                               </p>
                               <span
-                                class="c5"
+                                class="c6"
                                 data-test-subj="draggable-content-network.direction"
                               >
                                 <span
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <span
-                                    class="euiBadge c6 emotion-euiBadge-hollow"
+                                    class="euiBadge c7 emotion-euiBadge-hollow"
                                     title=""
                                   >
                                     <span
@@ -683,7 +683,7 @@ tr:hover .c4:focus::before {
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c8 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem c9 emotion-euiFlexItem-growZero"
                     >
                       <div
                         class="c3"
@@ -701,7 +701,7 @@ tr:hover .c4:focus::before {
                           >
                             <div
                               aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                              class="c4"
+                              class="c4 c5"
                               data-rfd-drag-handle-context-id="0"
                               data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_protocol-http"
                               data-rfd-draggable-context-id="0"
@@ -717,14 +717,14 @@ tr:hover .c4:focus::before {
                                 network.protocol
                               </p>
                               <span
-                                class="c5"
+                                class="c6"
                                 data-test-subj="draggable-content-network.protocol"
                               >
                                 <span
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <span
-                                    class="euiBadge c6 emotion-euiBadge-hollow"
+                                    class="euiBadge c7 emotion-euiBadge-hollow"
                                     title=""
                                   >
                                     <span
@@ -750,7 +750,7 @@ tr:hover .c4:focus::before {
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c8 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem c9 emotion-euiFlexItem-growZero"
                     >
                       <div
                         class="c3"
@@ -768,7 +768,7 @@ tr:hover .c4:focus::before {
                           >
                             <div
                               aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                              class="c4"
+                              class="c4 c5"
                               data-rfd-drag-handle-context-id="0"
                               data-rfd-drag-handle-draggable-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_bytes-100"
                               data-rfd-draggable-context-id="0"
@@ -784,14 +784,14 @@ tr:hover .c4:focus::before {
                                 network.bytes
                               </p>
                               <span
-                                class="c5"
+                                class="c6"
                                 data-test-subj="draggable-content-network.bytes"
                               >
                                 <span
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <div
-                                    class="euiText c9 emotion-euiText-xs"
+                                    class="euiText c10 emotion-euiText-xs"
                                   >
                                     <span>
                                       100B
@@ -810,7 +810,7 @@ tr:hover .c4:focus::before {
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c8 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem c9 emotion-euiFlexItem-growZero"
                     >
                       <div
                         class="c3"
@@ -828,7 +828,7 @@ tr:hover .c4:focus::before {
                           >
                             <div
                               aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                              class="c4"
+                              class="c4 c5"
                               data-rfd-drag-handle-context-id="0"
                               data-rfd-drag-handle-draggable-id="draggableId.content.network-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_packets-3"
                               data-rfd-draggable-context-id="0"
@@ -844,14 +844,14 @@ tr:hover .c4:focus::before {
                                 network.packets
                               </p>
                               <span
-                                class="c5"
+                                class="c6"
                                 data-test-subj="draggable-content-network.packets"
                               >
                                 <span
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <div
-                                    class="euiText c9 emotion-euiText-xs"
+                                    class="euiText c10 emotion-euiText-xs"
                                   >
                                     <span>
                                       3 pkts
@@ -870,7 +870,7 @@ tr:hover .c4:focus::before {
                       </div>
                     </div>
                     <div
-                      class="euiFlexItem c8 emotion-euiFlexItem-growZero"
+                      class="euiFlexItem c9 emotion-euiFlexItem-growZero"
                     >
                       <div
                         class="c3"
@@ -888,7 +888,7 @@ tr:hover .c4:focus::before {
                           >
                             <div
                               aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                              class="c4"
+                              class="c4 c5"
                               data-rfd-drag-handle-context-id="0"
                               data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_transport-tcp"
                               data-rfd-draggable-context-id="0"
@@ -904,14 +904,14 @@ tr:hover .c4:focus::before {
                                 network.transport
                               </p>
                               <span
-                                class="c5"
+                                class="c6"
                                 data-test-subj="draggable-content-network.transport"
                               >
                                 <span
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <span
-                                    class="euiBadge c6 emotion-euiBadge-hollow"
+                                    class="euiBadge c7 emotion-euiBadge-hollow"
                                     title=""
                                   >
                                     <span
@@ -955,7 +955,7 @@ tr:hover .c4:focus::before {
                           >
                             <div
                               aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                              class="c4"
+                              class="c4 c5"
                               data-rfd-drag-handle-context-id="0"
                               data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-network_community_id-we_live_in_a"
                               data-rfd-draggable-context-id="0"
@@ -971,14 +971,14 @@ tr:hover .c4:focus::before {
                                 network.community_id
                               </p>
                               <span
-                                class="c5"
+                                class="c6"
                                 data-test-subj="draggable-content-network.community_id"
                               >
                                 <span
                                   class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                 >
                                   <span
-                                    class="euiBadge c6 emotion-euiBadge-hollow"
+                                    class="euiBadge c7 emotion-euiBadge-hollow"
                                     title=""
                                   >
                                     <span
@@ -1006,7 +1006,7 @@ tr:hover .c4:focus::before {
                   </div>
                 </div>
                 <div
-                  class="euiFlexItem c10 emotion-euiFlexItem-growZero"
+                  class="euiFlexItem c11 emotion-euiFlexItem-growZero"
                 >
                   <div
                     class="euiFlexGroup emotion-euiFlexGroup-responsive-none-center-stretch-row"
@@ -1033,7 +1033,7 @@ tr:hover .c4:focus::before {
                                 class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
-                                  class="c11"
+                                  class="c12"
                                 >
                                   Source
                                 </div>
@@ -1077,7 +1077,7 @@ tr:hover .c4:focus::before {
                                                     >
                                                       <div
                                                         aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                        class="c4"
+                                                        class="c4 c5"
                                                         data-rfd-drag-handle-context-id="0"
                                                         data-rfd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-source_ip-192_168_1_2-abcd"
                                                         data-rfd-draggable-context-id="0"
@@ -1093,7 +1093,7 @@ tr:hover .c4:focus::before {
                                                           source.ip
                                                         </p>
                                                         <span
-                                                          class="c12"
+                                                          class="c13"
                                                           data-test-subj="draggable-truncatable-content"
                                                         >
                                                           <span
@@ -1133,7 +1133,7 @@ tr:hover .c4:focus::before {
                                             class="euiFlexItem emotion-euiFlexItem-growZero"
                                           >
                                             <span
-                                              class="c13"
+                                              class="c14"
                                               data-test-subj="ip-port-separator"
                                             >
                                               :
@@ -1166,7 +1166,7 @@ tr:hover .c4:focus::before {
                                                         >
                                                           <div
                                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                            class="c4"
+                                                            class="c4 c5"
                                                             data-rfd-drag-handle-context-id="0"
                                                             data-rfd-drag-handle-draggable-id="draggableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_port-9987"
                                                             data-rfd-draggable-context-id="0"
@@ -1182,14 +1182,14 @@ tr:hover .c4:focus::before {
                                                               source.port
                                                             </p>
                                                             <span
-                                                              class="c5"
+                                                              class="c6"
                                                               data-test-subj="draggable-content-source.port"
                                                             >
                                                               <span
                                                                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                                               >
                                                                 <div
-                                                                  class="c14"
+                                                                  class="c15"
                                                                 >
                                                                   <a
                                                                     class="euiLink emotion-euiLink-primary"
@@ -1241,7 +1241,7 @@ tr:hover .c4:focus::before {
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                                 >
                                   <div
-                                    class="euiFlexItem c15 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1265,7 +1265,7 @@ tr:hover .c4:focus::before {
                                             >
                                               <div
                                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                class="c4"
+                                                class="c4 c5"
                                                 data-rfd-drag-handle-context-id="0"
                                                 data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_continent_name-North America"
                                                 data-rfd-draggable-context-id="0"
@@ -1281,7 +1281,7 @@ tr:hover .c4:focus::before {
                                                   source.geo.continent_name
                                                 </p>
                                                 <span
-                                                  class="c5"
+                                                  class="c6"
                                                   data-test-subj="draggable-content-source.geo.continent_name"
                                                 >
                                                   <span
@@ -1303,7 +1303,7 @@ tr:hover .c4:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c15 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1327,7 +1327,7 @@ tr:hover .c4:focus::before {
                                             >
                                               <div
                                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                class="c4"
+                                                class="c4 c5"
                                                 data-rfd-drag-handle-context-id="0"
                                                 data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_name-United States"
                                                 data-rfd-draggable-context-id="0"
@@ -1343,7 +1343,7 @@ tr:hover .c4:focus::before {
                                                   source.geo.country_name
                                                 </p>
                                                 <span
-                                                  class="c5"
+                                                  class="c6"
                                                   data-test-subj="draggable-content-source.geo.country_name"
                                                 >
                                                   <span
@@ -1365,7 +1365,7 @@ tr:hover .c4:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c15 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1374,7 +1374,7 @@ tr:hover .c4:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c16"
+                                          class="c17"
                                           data-test-subj="country-flag"
                                         >
                                           🇺🇸
@@ -1399,7 +1399,7 @@ tr:hover .c4:focus::before {
                                             >
                                               <div
                                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                class="c4"
+                                                class="c4 c5"
                                                 data-rfd-drag-handle-context-id="0"
                                                 data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_country_iso_code-US"
                                                 data-rfd-draggable-context-id="0"
@@ -1415,7 +1415,7 @@ tr:hover .c4:focus::before {
                                                   source.geo.country_iso_code
                                                 </p>
                                                 <span
-                                                  class="c5"
+                                                  class="c6"
                                                   data-test-subj="draggable-content-source.geo.country_iso_code"
                                                 >
                                                   <span
@@ -1437,7 +1437,7 @@ tr:hover .c4:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c15 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1461,7 +1461,7 @@ tr:hover .c4:focus::before {
                                             >
                                               <div
                                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                class="c4"
+                                                class="c4 c5"
                                                 data-rfd-drag-handle-context-id="0"
                                                 data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_region_name-Georgia"
                                                 data-rfd-draggable-context-id="0"
@@ -1477,7 +1477,7 @@ tr:hover .c4:focus::before {
                                                   source.geo.region_name
                                                 </p>
                                                 <span
-                                                  class="c5"
+                                                  class="c6"
                                                   data-test-subj="draggable-content-source.geo.region_name"
                                                 >
                                                   <span
@@ -1499,7 +1499,7 @@ tr:hover .c4:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c15 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -1523,7 +1523,7 @@ tr:hover .c4:focus::before {
                                             >
                                               <div
                                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                class="c4"
+                                                class="c4 c5"
                                                 data-rfd-drag-handle-context-id="0"
                                                 data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_geo_city_name-Atlanta"
                                                 data-rfd-draggable-context-id="0"
@@ -1539,7 +1539,7 @@ tr:hover .c4:focus::before {
                                                   source.geo.city_name
                                                 </p>
                                                 <span
-                                                  class="c5"
+                                                  class="c6"
                                                   data-test-subj="draggable-content-source.geo.city_name"
                                                 >
                                                   <span
@@ -1568,7 +1568,7 @@ tr:hover .c4:focus::before {
                       </span>
                     </div>
                     <div
-                      class="euiFlexGroup c17 emotion-euiFlexGroup-none-center-center-column"
+                      class="euiFlexGroup c18 emotion-euiFlexGroup-none-center-center-column"
                     >
                       <div
                         class="euiFlexItem emotion-euiFlexItem-growZero"
@@ -1580,7 +1580,7 @@ tr:hover .c4:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c18"
+                              class="c19"
                               height="2.8"
                             />
                           </div>
@@ -1603,7 +1603,7 @@ tr:hover .c4:focus::before {
                                 >
                                   <div
                                     aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                    class="c4"
+                                    class="c4 c5"
                                     data-rfd-drag-handle-context-id="0"
                                     data-rfd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_bytes-60"
                                     data-rfd-draggable-context-id="0"
@@ -1619,17 +1619,17 @@ tr:hover .c4:focus::before {
                                       source.bytes
                                     </p>
                                     <span
-                                      class="c5"
+                                      class="c6"
                                       data-test-subj="draggable-content-source.bytes"
                                     >
                                       <span
                                         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                       >
                                         <div
-                                          class="euiText c19 emotion-euiText-xs"
+                                          class="euiText c20 emotion-euiText-xs"
                                         >
                                           <span
-                                            class="c20"
+                                            class="c21"
                                           >
                                             (60.00%)
                                           </span>
@@ -1653,7 +1653,7 @@ tr:hover .c4:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c18"
+                              class="c19"
                               height="2.8"
                             />
                           </div>
@@ -1676,7 +1676,7 @@ tr:hover .c4:focus::before {
                                 >
                                   <div
                                     aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                    class="c4"
+                                    class="c4 c5"
                                     data-rfd-drag-handle-context-id="0"
                                     data-rfd-drag-handle-draggable-id="draggableId.content.source-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-source_packets-2"
                                     data-rfd-draggable-context-id="0"
@@ -1692,14 +1692,14 @@ tr:hover .c4:focus::before {
                                       source.packets
                                     </p>
                                     <span
-                                      class="c5"
+                                      class="c6"
                                       data-test-subj="draggable-content-source.packets"
                                     >
                                       <span
                                         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                       >
                                         <div
-                                          class="euiText c19 emotion-euiText-xs"
+                                          class="euiText c20 emotion-euiText-xs"
                                         >
                                           <span>
                                             2 pkts
@@ -1721,7 +1721,7 @@ tr:hover .c4:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c18"
+                              class="c19"
                               height="2.8"
                             />
                           </div>
@@ -1755,7 +1755,7 @@ tr:hover .c4:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c21"
+                              class="c22"
                               height="2.2"
                             />
                           </div>
@@ -1786,7 +1786,7 @@ tr:hover .c4:focus::before {
                                         >
                                           <div
                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                            class="c4"
+                                            class="c4 c5"
                                             data-rfd-drag-handle-context-id="0"
                                             data-rfd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_bytes-40"
                                             data-rfd-draggable-context-id="0"
@@ -1802,17 +1802,17 @@ tr:hover .c4:focus::before {
                                               destination.bytes
                                             </p>
                                             <span
-                                              class="c5"
+                                              class="c6"
                                               data-test-subj="draggable-content-destination.bytes"
                                             >
                                               <span
                                                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                               >
                                                 <div
-                                                  class="euiText c19 emotion-euiText-xs"
+                                                  class="euiText c20 emotion-euiText-xs"
                                                 >
                                                   <span
-                                                    class="c20"
+                                                    class="c21"
                                                   >
                                                     (40.00%)
                                                   </span>
@@ -1840,7 +1840,7 @@ tr:hover .c4:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c21"
+                              class="c22"
                               height="2.2"
                             />
                           </div>
@@ -1863,7 +1863,7 @@ tr:hover .c4:focus::before {
                                 >
                                   <div
                                     aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                    class="c4"
+                                    class="c4 c5"
                                     data-rfd-drag-handle-context-id="0"
                                     data-rfd-drag-handle-draggable-id="draggableId.content.destination-arrow-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_packets-1"
                                     data-rfd-draggable-context-id="0"
@@ -1879,14 +1879,14 @@ tr:hover .c4:focus::before {
                                       destination.packets
                                     </p>
                                     <span
-                                      class="c5"
+                                      class="c6"
                                       data-test-subj="draggable-content-destination.packets"
                                     >
                                       <span
                                         class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                       >
                                         <div
-                                          class="euiText c19 emotion-euiText-xs"
+                                          class="euiText c20 emotion-euiText-xs"
                                         >
                                           <span>
                                             1 pkts
@@ -1908,7 +1908,7 @@ tr:hover .c4:focus::before {
                             class="euiFlexItem emotion-euiFlexItem-growZero"
                           >
                             <span
-                              class="c21"
+                              class="c22"
                               height="2.2"
                             />
                           </div>
@@ -1937,7 +1937,7 @@ tr:hover .c4:focus::before {
                                 class="euiFlexItem emotion-euiFlexItem-growZero"
                               >
                                 <div
-                                  class="c11"
+                                  class="c12"
                                 >
                                   Destination
                                 </div>
@@ -1981,7 +1981,7 @@ tr:hover .c4:focus::before {
                                                     >
                                                       <div
                                                         aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                        class="c4"
+                                                        class="c4 c5"
                                                         data-rfd-drag-handle-context-id="0"
                                                         data-rfd-drag-handle-draggable-id="draggableId.content.formatted-ip-data-provider-netflow-row-renderer-render-row-timeline-test-abcd-destination_ip-10_1_2_3-abcd"
                                                         data-rfd-draggable-context-id="0"
@@ -1997,7 +1997,7 @@ tr:hover .c4:focus::before {
                                                           destination.ip
                                                         </p>
                                                         <span
-                                                          class="c12"
+                                                          class="c13"
                                                           data-test-subj="draggable-truncatable-content"
                                                         >
                                                           <span
@@ -2037,7 +2037,7 @@ tr:hover .c4:focus::before {
                                             class="euiFlexItem emotion-euiFlexItem-growZero"
                                           >
                                             <span
-                                              class="c13"
+                                              class="c14"
                                               data-test-subj="ip-port-separator"
                                             >
                                               :
@@ -2070,7 +2070,7 @@ tr:hover .c4:focus::before {
                                                         >
                                                           <div
                                                             aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                            class="c4"
+                                                            class="c4 c5"
                                                             data-rfd-drag-handle-context-id="0"
                                                             data-rfd-drag-handle-draggable-id="draggableId.content.port-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_port-80"
                                                             data-rfd-draggable-context-id="0"
@@ -2086,14 +2086,14 @@ tr:hover .c4:focus::before {
                                                               destination.port
                                                             </p>
                                                             <span
-                                                              class="c5"
+                                                              class="c6"
                                                               data-test-subj="draggable-content-destination.port"
                                                             >
                                                               <span
                                                                 class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                                                               >
                                                                 <div
-                                                                  class="c14"
+                                                                  class="c15"
                                                                 >
                                                                   <a
                                                                     class="euiLink emotion-euiLink-primary"
@@ -2145,7 +2145,7 @@ tr:hover .c4:focus::before {
                                   class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
                                 >
                                   <div
-                                    class="euiFlexItem c15 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2169,7 +2169,7 @@ tr:hover .c4:focus::before {
                                             >
                                               <div
                                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                class="c4"
+                                                class="c4 c5"
                                                 data-rfd-drag-handle-context-id="0"
                                                 data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_continent_name-North America"
                                                 data-rfd-draggable-context-id="0"
@@ -2185,7 +2185,7 @@ tr:hover .c4:focus::before {
                                                   destination.geo.continent_name
                                                 </p>
                                                 <span
-                                                  class="c5"
+                                                  class="c6"
                                                   data-test-subj="draggable-content-destination.geo.continent_name"
                                                 >
                                                   <span
@@ -2207,7 +2207,7 @@ tr:hover .c4:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c15 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2231,7 +2231,7 @@ tr:hover .c4:focus::before {
                                             >
                                               <div
                                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                class="c4"
+                                                class="c4 c5"
                                                 data-rfd-drag-handle-context-id="0"
                                                 data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_name-United States"
                                                 data-rfd-draggable-context-id="0"
@@ -2247,7 +2247,7 @@ tr:hover .c4:focus::before {
                                                   destination.geo.country_name
                                                 </p>
                                                 <span
-                                                  class="c5"
+                                                  class="c6"
                                                   data-test-subj="draggable-content-destination.geo.country_name"
                                                 >
                                                   <span
@@ -2269,7 +2269,7 @@ tr:hover .c4:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c15 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2278,7 +2278,7 @@ tr:hover .c4:focus::before {
                                         class="euiFlexItem emotion-euiFlexItem-growZero"
                                       >
                                         <span
-                                          class="c16"
+                                          class="c17"
                                           data-test-subj="country-flag"
                                         >
                                           🇺🇸
@@ -2303,7 +2303,7 @@ tr:hover .c4:focus::before {
                                             >
                                               <div
                                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                class="c4"
+                                                class="c4 c5"
                                                 data-rfd-drag-handle-context-id="0"
                                                 data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_country_iso_code-US"
                                                 data-rfd-draggable-context-id="0"
@@ -2319,7 +2319,7 @@ tr:hover .c4:focus::before {
                                                   destination.geo.country_iso_code
                                                 </p>
                                                 <span
-                                                  class="c5"
+                                                  class="c6"
                                                   data-test-subj="draggable-content-destination.geo.country_iso_code"
                                                 >
                                                   <span
@@ -2341,7 +2341,7 @@ tr:hover .c4:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c15 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2365,7 +2365,7 @@ tr:hover .c4:focus::before {
                                             >
                                               <div
                                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                class="c4"
+                                                class="c4 c5"
                                                 data-rfd-drag-handle-context-id="0"
                                                 data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_region_name-New York"
                                                 data-rfd-draggable-context-id="0"
@@ -2381,7 +2381,7 @@ tr:hover .c4:focus::before {
                                                   destination.geo.region_name
                                                 </p>
                                                 <span
-                                                  class="c5"
+                                                  class="c6"
                                                   data-test-subj="draggable-content-destination.geo.region_name"
                                                 >
                                                   <span
@@ -2403,7 +2403,7 @@ tr:hover .c4:focus::before {
                                     </div>
                                   </div>
                                   <div
-                                    class="euiFlexItem c15 emotion-euiFlexItem-growZero"
+                                    class="euiFlexItem c16 emotion-euiFlexItem-growZero"
                                   >
                                     <div
                                       class="euiFlexGroup emotion-euiFlexGroup-responsive-none-flexStart-center-row"
@@ -2427,7 +2427,7 @@ tr:hover .c4:focus::before {
                                             >
                                               <div
                                                 aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                                                class="c4"
+                                                class="c4 c5"
                                                 data-rfd-drag-handle-context-id="0"
                                                 data-rfd-drag-handle-draggable-id="draggableId.content.geo-field-values-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-destination_geo_city_name-New York"
                                                 data-rfd-draggable-context-id="0"
@@ -2443,7 +2443,7 @@ tr:hover .c4:focus::before {
                                                   destination.geo.city_name
                                                 </p>
                                                 <span
-                                                  class="c5"
+                                                  class="c6"
                                                   data-test-subj="draggable-content-destination.geo.city_name"
                                                 >
                                                   <span
@@ -2503,7 +2503,7 @@ tr:hover .c4:focus::before {
                   >
                     <div
                       aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                      class="c4"
+                      class="c4 c5"
                       data-rfd-drag-handle-context-id="0"
                       data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_fingerprints_ja3_hash-tls_fingerprints_ja3_hash-value"
                       data-rfd-draggable-context-id="0"
@@ -2519,14 +2519,14 @@ tr:hover .c4:focus::before {
                         tls.fingerprints.ja3.hash
                       </p>
                       <span
-                        class="c5"
+                        class="c6"
                         data-test-subj="draggable-content-tls.fingerprints.ja3.hash"
                       >
                         <span
                           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                         >
                           <span
-                            class="euiBadge c6 emotion-euiBadge-hollow"
+                            class="euiBadge c7 emotion-euiBadge-hollow"
                             title=""
                           >
                             <span
@@ -2541,7 +2541,7 @@ tr:hover .c4:focus::before {
                                 class="euiBadge__text emotion-euiBadge__text"
                               >
                                 <span
-                                  class="c22"
+                                  class="c23"
                                 >
                                   ja3
                                 </span>
@@ -2599,7 +2599,7 @@ tr:hover .c4:focus::before {
                   >
                     <div
                       aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                      class="c4"
+                      class="c4 c5"
                       data-rfd-drag-handle-context-id="0"
                       data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_client_certificate_fingerprint_sha1-tls_client_certificate_fingerprint_sha1-value"
                       data-rfd-draggable-context-id="0"
@@ -2615,14 +2615,14 @@ tr:hover .c4:focus::before {
                         tls.client_certificate.fingerprint.sha1
                       </p>
                       <span
-                        class="c5"
+                        class="c6"
                         data-test-subj="draggable-content-tls.client_certificate.fingerprint.sha1"
                       >
                         <span
                           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                         >
                           <span
-                            class="euiBadge c6 emotion-euiBadge-hollow"
+                            class="euiBadge c7 emotion-euiBadge-hollow"
                             title=""
                           >
                             <span
@@ -2637,7 +2637,7 @@ tr:hover .c4:focus::before {
                                 class="euiBadge__text emotion-euiBadge__text"
                               >
                                 <span
-                                  class="c23"
+                                  class="c24"
                                 >
                                   client cert
                                 </span>
@@ -2695,7 +2695,7 @@ tr:hover .c4:focus::before {
                   >
                     <div
                       aria-describedby="rfd-hidden-text-0-hidden-text-0"
-                      class="c4"
+                      class="c4 c5"
                       data-rfd-drag-handle-context-id="0"
                       data-rfd-drag-handle-draggable-id="draggableId.content.draggable-badge-default-draggable-netflow-row-renderer-render-row-timeline-test-abcd-abcd-tls_server_certificate_fingerprint_sha1-tls_server_certificate_fingerprint_sha1-value"
                       data-rfd-draggable-context-id="0"
@@ -2711,14 +2711,14 @@ tr:hover .c4:focus::before {
                         tls.server_certificate.fingerprint.sha1
                       </p>
                       <span
-                        class="c5"
+                        class="c6"
                         data-test-subj="draggable-content-tls.server_certificate.fingerprint.sha1"
                       >
                         <span
                           class="euiToolTipAnchor emotion-euiToolTipAnchor-inlineBlock"
                         >
                           <span
-                            class="euiBadge c6 emotion-euiBadge-hollow"
+                            class="euiBadge c7 emotion-euiBadge-hollow"
                             title=""
                           >
                             <span
@@ -2733,7 +2733,7 @@ tr:hover .c4:focus::before {
                                 class="euiBadge__text emotion-euiBadge__text"
                               >
                                 <span
-                                  class="c23"
+                                  class="c24"
                                 >
                                   server cert
                                 </span>
diff --git a/yarn.lock b/yarn.lock
index 5b222b8b5b532..ec91f65be0692 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2022,20 +2022,13 @@
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.9.1.tgz#4ffb0055f7ef676ebc3a5a91fb621393294e2f43"
   integrity sha512-gJB6HLm5rYwSLI6PQa+X1t5CFGrv1J1TWG+sOyMCeKz2ojaj6Fnl/rZEspogG+cvqbt4AE/2eIyD2QfLKTBNlQ==
 
-"@emotion/is-prop-valid@1.2.1", "@emotion/is-prop-valid@^1.2.1":
+"@emotion/is-prop-valid@1.2.1", "@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.2.1":
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.2.1.tgz#23116cf1ed18bfeac910ec6436561ecb1a3885cc"
   integrity sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==
   dependencies:
     "@emotion/memoize" "^0.8.1"
 
-"@emotion/is-prop-valid@^0.8.8":
-  version "0.8.8"
-  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a"
-  integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==
-  dependencies:
-    "@emotion/memoize" "0.7.4"
-
 "@emotion/jest@^11.11.0":
   version "11.11.0"
   resolved "https://registry.yarnpkg.com/@emotion/jest/-/jest-11.11.0.tgz#4d64b33052308739dcdd7396fd2bc902f7244f82"
@@ -13156,7 +13149,7 @@ babel-plugin-require-context-hook@^1.0.0:
   resolved "https://registry.yarnpkg.com/babel-plugin-require-context-hook-babel7/-/babel-plugin-require-context-hook-babel7-1.0.0.tgz#1273d4cee7e343d0860966653759a45d727e815d"
   integrity sha512-kez0BAN/cQoyO1Yu1nre1bQSYZEF93Fg7VQiBHFfMWuaZTy7vJSTT4FY68FwHTYG53Nyt0A7vpSObSVxwweQeQ==
 
-"babel-plugin-styled-components@>= 1", babel-plugin-styled-components@^2.1.4:
+"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^2.1.4:
   version "2.1.4"
   resolved "https://registry.yarnpkg.com/babel-plugin-styled-components/-/babel-plugin-styled-components-2.1.4.tgz#9a1f37c7f32ef927b4b008b529feb4a2c82b1092"
   integrity sha512-Xgp9g+A/cG47sUyRwwYxGM4bR/jDRg5N6it/8+HxCnbT5XNKSKDT9xm4oag/osgqjC2It/vH0yXsomOG6k558g==
@@ -29750,17 +29743,17 @@ style-to-object@0.3.0, style-to-object@^0.3.0:
   dependencies:
     inline-style-parser "0.1.1"
 
-styled-components@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.1.0.tgz#2e3985b54f461027e1c91af3229e1c2530872a4e"
-  integrity sha512-0Qs2wEkFBXHFlysz6CV831VG6HedcrFUwChjnWylNivsx14MtmqQsohi21rMHZxzuTba063dEyoe/SR6VGJI7Q==
+styled-components@^5.3.11:
+  version "5.3.11"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.11.tgz#9fda7bf1108e39bf3f3e612fcc18170dedcd57a8"
+  integrity sha512-uuzIIfnVkagcVHv9nE0VPlHPSCmXIUGKfJ42LNjxCCTDTL5sgnJ8Z7GZBq0EnLYGln77tPpEpExt2+qa+cZqSw==
   dependencies:
     "@babel/helper-module-imports" "^7.0.0"
     "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^0.8.8"
+    "@emotion/is-prop-valid" "^1.1.0"
     "@emotion/stylis" "^0.8.4"
     "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1"
+    babel-plugin-styled-components ">= 1.12.0"
     css-to-react-native "^3.0.0"
     hoist-non-react-statics "^3.0.0"
     shallowequal "^1.1.0"