[7.x] Replace a number of any-ed styled(eui*) with accurate types (#64555)

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SpanFlyout/index.tsx

@@ -71,10 +71,10 @@ function getSpanTypes(span: Span) {
   };
 }
 
-const SpanBadge = styled(EuiBadge)`
+const SpanBadge = (styled(EuiBadge)`
   display: inline-block;
   margin-right: ${px(units.quarter)};
-` as any;
+` as unknown) as typeof EuiBadge;
 
 const HttpInfoContainer = styled('div')`
   margin-right: ${px(units.quarter)};

x-pack/legacy/plugins/apm/public/components/app/TransactionDetails/WaterfallWithSummmary/WaterfallContainer/Waterfall/SyncBadge.tsx

@@ -10,10 +10,10 @@ import React from 'react';
 import styled from 'styled-components';
 import { px, units } from '../../../../../../style/variables';
 
-const SpanBadge = styled(EuiBadge)`
+const SpanBadge = (styled(EuiBadge)`
   display: inline-block;
   margin-right: ${px(units.quarter)};
-` as any;
+` as unknown) as typeof EuiBadge;
 
 interface SyncBadgeProps {
   /**

x-pack/legacy/plugins/apm/public/components/shared/Summary/ErrorCountSummaryItemBadge.tsx

@@ -17,7 +17,7 @@ interface Props {
 
 const Badge = (styled(EuiBadge)`
   margin-top: ${px(units.eighth)};
-` as any) as any;
+` as unknown) as typeof EuiBadge;
 
 export const ErrorCountSummaryItemBadge = ({ count }: Props) => (
   <Badge color={euiThemeLight.euiColorDanger}>

x-pack/legacy/plugins/apm/public/components/shared/Summary/HttpInfoSummaryItem/index.tsx

@@ -13,7 +13,7 @@ import { HttpStatusBadge } from '../HttpStatusBadge';
 
 const HttpInfoBadge = (styled(EuiBadge)`
   margin-right: ${px(units.quarter)};
-` as any) as any;
+` as unknown) as typeof EuiBadge;
 
 const Url = styled('span')`
   display: inline-block;

x-pack/plugins/siem/public/components/and_or_badge/index.tsx

@@ -10,7 +10,7 @@ import styled from 'styled-components';
 
 import * as i18n from './translations';
 
-const RoundedBadge = styled(EuiBadge)`
+const RoundedBadge = (styled(EuiBadge)`
   align-items: center;
   border-radius: 100%;
   display: inline-flex;
@@ -30,7 +30,7 @@ const RoundedBadge = styled(EuiBadge)`
   .euiBadge__text {
     text-overflow: clip;
   }
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 RoundedBadge.displayName = 'RoundedBadge';
 

x-pack/plugins/siem/public/components/embeddables/map_tool_tip/line_tool_tip_content.tsx

@@ -17,10 +17,10 @@ import {
 import { FeatureProperty } from '../types';
 import * as i18n from '../translations';
 
-const FlowBadge = styled(EuiBadge)`
+const FlowBadge = (styled(EuiBadge)`
   height: 45px;
   min-width: 85px;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 const EuiFlexGroupStyled = styled(EuiFlexGroup)`
   margin: 0 auto;

x-pack/plugins/siem/public/components/flyout/index.tsx

@@ -18,14 +18,14 @@ import { DEFAULT_TIMELINE_WIDTH } from '../timeline/body/constants';
 import { StatefulTimeline } from '../timeline';
 import { TimelineById } from '../../store/timeline/types';
 
-export const Badge = styled(EuiBadge)`
+export const Badge = (styled(EuiBadge)`
   position: absolute;
   padding-left: 4px;
   padding-right: 4px;
   right: 0%;
   top: 0%;
   border-bottom-left-radius: 5px;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 Badge.displayName = 'Badge';
 

x-pack/plugins/siem/public/components/header_page/index.tsx

@@ -52,9 +52,9 @@ const LinkBack = styled.div.attrs({
 `;
 LinkBack.displayName = 'LinkBack';
 
-const Badge = styled(EuiBadge)`
+const Badge = (styled(EuiBadge)`
   letter-spacing: 0;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 Badge.displayName = 'Badge';
 
 interface BackOptions {

x-pack/plugins/siem/public/components/header_page/title.tsx

@@ -17,9 +17,9 @@ const StyledEuiBetaBadge = styled(EuiBetaBadge)`
 
 StyledEuiBetaBadge.displayName = 'StyledEuiBetaBadge';
 
-const Badge = styled(EuiBadge)`
+const Badge = (styled(EuiBadge)`
   letter-spacing: 0;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 Badge.displayName = 'Badge';
 
 interface Props {

x-pack/plugins/siem/public/components/page/index.tsx

@@ -165,9 +165,9 @@ export const Pane1FlexContent = styled.div`
 
 Pane1FlexContent.displayName = 'Pane1FlexContent';
 
-export const CountBadge = styled(EuiBadge)`
+export const CountBadge = (styled(EuiBadge)`
   margin-left: 5px;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 CountBadge.displayName = 'CountBadge';
 
@@ -177,9 +177,9 @@ export const Spacer = styled.span`
 
 Spacer.displayName = 'Spacer';
 
-export const Badge = styled(EuiBadge)`
+export const Badge = (styled(EuiBadge)`
   vertical-align: top;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 Badge.displayName = 'Badge';
 

x-pack/plugins/siem/public/components/timeline/body/renderers/suricata/suricata_signature.tsx

@@ -28,9 +28,9 @@ const SignatureFlexItem = styled(EuiFlexItem)`
 
 SignatureFlexItem.displayName = 'SignatureFlexItem';
 
-const Badge = styled(EuiBadge)`
+const Badge = (styled(EuiBadge)`
   vertical-align: top;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 Badge.displayName = 'Badge';
 

x-pack/plugins/siem/public/components/timeline/body/renderers/zeek/zeek_signature.tsx

@@ -19,9 +19,9 @@ import { IS_OPERATOR } from '../../../data_providers/data_provider';
 
 import * as i18n from './translations';
 
-const Badge = styled(EuiBadge)`
+const Badge = (styled(EuiBadge)`
   vertical-align: top;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 Badge.displayName = 'Badge';
 

x-pack/plugins/siem/public/components/timeline/data_providers/empty.tsx

@@ -21,12 +21,12 @@ const Text = styled(EuiText)`
 
 Text.displayName = 'Text';
 
-const BadgeHighlighted = styled(EuiBadge)`
+const BadgeHighlighted = (styled(EuiBadge)`
   height: 20px;
   margin: 0 5px 0 5px;
   maxwidth: 85px;
   minwidth: 85px;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 BadgeHighlighted.displayName = 'BadgeHighlighted';
 

x-pack/plugins/siem/public/components/timeline/data_providers/provider_badge.tsx

@@ -18,7 +18,7 @@ import { EXISTS_OPERATOR, QueryOperator } from './data_provider';
 
 import * as i18n from './translations';
 
-const ProviderBadgeStyled = styled(EuiBadge)`
+const ProviderBadgeStyled = (styled(EuiBadge)`
   .euiToolTipAnchor {
     &::after {
       font-style: normal;
@@ -44,7 +44,7 @@ const ProviderBadgeStyled = styled(EuiBadge)`
     margin-right: 0;
     margin-left: 4px;
   }
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 ProviderBadgeStyled.displayName = 'ProviderBadgeStyled';
 

x-pack/plugins/siem/public/components/timeline/data_providers/provider_item_and_drag_drop.tsx

@@ -54,9 +54,9 @@ const DropAndTargetDataProviders = styled.div<{ hasAndItem: boolean }>`
 
 DropAndTargetDataProviders.displayName = 'DropAndTargetDataProviders';
 
-const NumberProviderAndBadge = styled(EuiBadge)`
+const NumberProviderAndBadge = (styled(EuiBadge)`
   margin: 0px 5px;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 NumberProviderAndBadge.displayName = 'NumberProviderAndBadge';
 

x-pack/plugins/siem/public/components/timeline/properties/helpers.tsx

@@ -37,9 +37,9 @@ export const historyToolTip = 'The chronological history of actions related to t
 export const streamLiveToolTip = 'Update the Timeline as new data arrives';
 export const newTimelineToolTip = 'Create a new timeline';
 
-const NotesCountBadge = styled(EuiBadge)`
+const NotesCountBadge = (styled(EuiBadge)`
   margin-left: 5px;
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 NotesCountBadge.displayName = 'NotesCountBadge';
 

x-pack/plugins/siem/public/pages/detection_engine/rules/components/description_step/helpers.tsx

@@ -37,11 +37,11 @@ const NoteDescriptionContainer = styled(EuiFlexItem)`
 
 export const isNotEmptyArray = (values: string[]) => !isEmpty(values.join(''));
 
-const EuiBadgeWrap = styled(EuiBadge)`
+const EuiBadgeWrap = (styled(EuiBadge)`
   .euiBadge__text {
     white-space: pre-wrap !important;
   }
-` as any; // eslint-disable-line @typescript-eslint/no-explicit-any
+` as unknown) as typeof EuiBadge;
 
 export const buildQueryBarDescription = ({
   field,