diff --git a/x-pack/plugins/infra/common/inventory_models/aws_ec2/layout.tsx b/x-pack/plugins/infra/common/inventory_models/aws_ec2/layout.tsx
index 17a22a316f2ef4..c8e0680287526f 100644
--- a/x-pack/plugins/infra/common/inventory_models/aws_ec2/layout.tsx
+++ b/x-pack/plugins/infra/common/inventory_models/aws_ec2/layout.tsx
@@ -16,7 +16,7 @@ import { LayoutContent } from '../../../public/pages/metrics/components/layout_c
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/components/chart_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../public/utils/eui_styled_components';
+import { withTheme } from '../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { MetadataDetails } from '../../../public/pages/metrics/components/metadata_details';
 
diff --git a/x-pack/plugins/infra/common/inventory_models/aws_rds/layout.tsx b/x-pack/plugins/infra/common/inventory_models/aws_rds/layout.tsx
index 8bb7478a99d435..4bc4562ab27606 100644
--- a/x-pack/plugins/infra/common/inventory_models/aws_rds/layout.tsx
+++ b/x-pack/plugins/infra/common/inventory_models/aws_rds/layout.tsx
@@ -14,7 +14,7 @@ import { SubSection } from '../../../public/pages/metrics/components/sub_section
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/components/chart_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../public/utils/eui_styled_components';
+import { withTheme } from '../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/components/layout_content';
 
diff --git a/x-pack/plugins/infra/common/inventory_models/aws_s3/layout.tsx b/x-pack/plugins/infra/common/inventory_models/aws_s3/layout.tsx
index 87a00db4dcd4a9..c40c8e7b8c6d30 100644
--- a/x-pack/plugins/infra/common/inventory_models/aws_s3/layout.tsx
+++ b/x-pack/plugins/infra/common/inventory_models/aws_s3/layout.tsx
@@ -14,7 +14,7 @@ import { SubSection } from '../../../public/pages/metrics/components/sub_section
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/components/chart_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../public/utils/eui_styled_components';
+import { withTheme } from '../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/components/layout_content';
 
diff --git a/x-pack/plugins/infra/common/inventory_models/aws_sqs/layout.tsx b/x-pack/plugins/infra/common/inventory_models/aws_sqs/layout.tsx
index c097fbd3e8524a..7f2dc92f422052 100644
--- a/x-pack/plugins/infra/common/inventory_models/aws_sqs/layout.tsx
+++ b/x-pack/plugins/infra/common/inventory_models/aws_sqs/layout.tsx
@@ -14,7 +14,7 @@ import { SubSection } from '../../../public/pages/metrics/components/sub_section
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/components/chart_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../public/utils/eui_styled_components';
+import { withTheme } from '../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/components/layout_content';
 
diff --git a/x-pack/plugins/infra/common/inventory_models/container/layout.tsx b/x-pack/plugins/infra/common/inventory_models/container/layout.tsx
index dfa5dd73c930d7..b61e8eed09cce4 100644
--- a/x-pack/plugins/infra/common/inventory_models/container/layout.tsx
+++ b/x-pack/plugins/infra/common/inventory_models/container/layout.tsx
@@ -16,7 +16,7 @@ import { GaugesSectionVis } from '../../../public/pages/metrics/components/gauge
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/components/chart_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../public/utils/eui_styled_components';
+import { withTheme } from '../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutContent } from '../../../public/pages/metrics/components/layout_content';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
diff --git a/x-pack/plugins/infra/common/inventory_models/host/layout.tsx b/x-pack/plugins/infra/common/inventory_models/host/layout.tsx
index b63479c573aebc..15e5530e8db536 100644
--- a/x-pack/plugins/infra/common/inventory_models/host/layout.tsx
+++ b/x-pack/plugins/infra/common/inventory_models/host/layout.tsx
@@ -6,7 +6,7 @@
 import React from 'react';
 import { i18n } from '@kbn/i18n';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../public/utils/eui_styled_components';
+import { withTheme } from '../../../../observability/public';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { LayoutPropsWithTheme } from '../../../public/pages/metrics/types';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
diff --git a/x-pack/plugins/infra/common/inventory_models/pod/layout.tsx b/x-pack/plugins/infra/common/inventory_models/pod/layout.tsx
index c6fb8db26fe06f..43b95d73f6d955 100644
--- a/x-pack/plugins/infra/common/inventory_models/pod/layout.tsx
+++ b/x-pack/plugins/infra/common/inventory_models/pod/layout.tsx
@@ -16,7 +16,7 @@ import { GaugesSectionVis } from '../../../public/pages/metrics/components/gauge
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../public/pages/metrics/components/chart_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../public/utils/eui_styled_components';
+import { withTheme } from '../../../../observability/public';
 import * as Nginx from '../shared/layouts/nginx';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { MetadataDetails } from '../../../public/pages/metrics/components/metadata_details';
diff --git a/x-pack/plugins/infra/common/inventory_models/shared/layouts/aws.tsx b/x-pack/plugins/infra/common/inventory_models/shared/layouts/aws.tsx
index 4cb35b2e615fd2..fba48c4224e6b2 100644
--- a/x-pack/plugins/infra/common/inventory_models/shared/layouts/aws.tsx
+++ b/x-pack/plugins/infra/common/inventory_models/shared/layouts/aws.tsx
@@ -16,7 +16,7 @@ import { GaugesSectionVis } from '../../../../public/pages/metrics/components/ga
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../../public/pages/metrics/components/chart_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../public/utils/eui_styled_components';
+import { withTheme } from '../../../../../observability/public';
 
 export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>
diff --git a/x-pack/plugins/infra/common/inventory_models/shared/layouts/nginx.tsx b/x-pack/plugins/infra/common/inventory_models/shared/layouts/nginx.tsx
index 794a937dfd0b61..eff0a9bbca85a2 100644
--- a/x-pack/plugins/infra/common/inventory_models/shared/layouts/nginx.tsx
+++ b/x-pack/plugins/infra/common/inventory_models/shared/layouts/nginx.tsx
@@ -14,7 +14,7 @@ import { SubSection } from '../../../../public/pages/metrics/components/sub_sect
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
 import { ChartSectionVis } from '../../../../public/pages/metrics/components/chart_section_vis';
 // eslint-disable-next-line @kbn/eslint/no-restricted-paths
-import { withTheme } from '../../../../public/utils/eui_styled_components';
+import { withTheme } from '../../../../../observability/public';
 
 export const Layout = withTheme(({ metrics, theme }: LayoutPropsWithTheme) => (
   <React.Fragment>
diff --git a/x-pack/plugins/infra/public/apps/start_app.tsx b/x-pack/plugins/infra/public/apps/start_app.tsx
index e5b905e1ceb736..58df6066b534f0 100644
--- a/x-pack/plugins/infra/public/apps/start_app.tsx
+++ b/x-pack/plugins/infra/public/apps/start_app.tsx
@@ -15,7 +15,7 @@ import { CoreStart, AppMountParameters } from 'kibana/public';
 
 // TODO use theme provided from parentApp when kibana supports it
 import { EuiErrorBoundary } from '@elastic/eui';
-import { EuiThemeProvider } from '../utils/eui_styled_components';
+import { EuiThemeProvider } from '../../../observability/public';
 import { InfraFrontendLibs } from '../lib/lib';
 import { PageRouter } from '../routes';
 import { createStore } from '../store';
diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx
index a404943fceed1f..5eef35db2017e9 100644
--- a/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx
+++ b/x-pack/plugins/infra/public/components/autocomplete_field/autocomplete_field.tsx
@@ -14,7 +14,7 @@ import React from 'react';
 
 import { AutocompleteSuggestion } from '../../../../../../src/plugins/data/public';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import { composeStateUpdaters } from '../../utils/typed_react';
 import { SuggestionItem } from './suggestion_item';
 
diff --git a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx
index 65962e089d484b..f5b06412bb2bfd 100644
--- a/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx
+++ b/x-pack/plugins/infra/public/components/autocomplete_field/suggestion_item.tsx
@@ -9,7 +9,7 @@ import { transparentize } from 'polished';
 import React from 'react';
 
 import { AutocompleteSuggestion } from '../../../../../../src/plugins/data/public';
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 
 interface Props {
   isSelected?: boolean;
diff --git a/x-pack/plugins/infra/public/components/empty_states/no_data.tsx b/x-pack/plugins/infra/public/components/empty_states/no_data.tsx
index c05e42140e5f5d..97dc7ac1f85207 100644
--- a/x-pack/plugins/infra/public/components/empty_states/no_data.tsx
+++ b/x-pack/plugins/infra/public/components/empty_states/no_data.tsx
@@ -7,7 +7,7 @@
 import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 
 interface NoDataProps {
   titleText: string;
diff --git a/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx b/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx
index 88b1c072d976a9..b453a4f0bc342c 100644
--- a/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx
+++ b/x-pack/plugins/infra/public/components/empty_states/no_indices.tsx
@@ -7,7 +7,7 @@
 import { EuiEmptyPrompt } from '@elastic/eui';
 import React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 
 interface NoIndicesProps {
   message: string;
diff --git a/x-pack/plugins/infra/public/components/error_page.tsx b/x-pack/plugins/infra/public/components/error_page.tsx
index e8417353c152ac..5c8b576c161d7f 100644
--- a/x-pack/plugins/infra/public/components/error_page.tsx
+++ b/x-pack/plugins/infra/public/components/error_page.tsx
@@ -15,7 +15,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 
-import { euiStyled } from '../utils/eui_styled_components';
+import { euiStyled } from '../../../observability/public';
 import { FlexPage } from './page';
 
 interface Props {
diff --git a/x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx b/x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx
index 2cae0099b3ab0d..8446587e8671d0 100644
--- a/x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx
+++ b/x-pack/plugins/infra/public/components/eui/toolbar/toolbar.tsx
@@ -6,7 +6,7 @@
 
 import { EuiPanel } from '@elastic/eui';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 export const Toolbar = euiStyled(EuiPanel).attrs(() => ({
   grow: false,
diff --git a/x-pack/plugins/infra/public/components/fixed_datepicker.tsx b/x-pack/plugins/infra/public/components/fixed_datepicker.tsx
index 2e7d20498c35cc..fcebb895618261 100644
--- a/x-pack/plugins/infra/public/components/fixed_datepicker.tsx
+++ b/x-pack/plugins/infra/public/components/fixed_datepicker.tsx
@@ -7,7 +7,7 @@
 import React from 'react';
 
 import { EuiDatePicker, EuiDatePickerProps } from '@elastic/eui';
-import { euiStyled } from '../utils/eui_styled_components';
+import { euiStyled } from '../../../observability/public';
 
 export const FixedDatePicker = euiStyled(
   ({
diff --git a/x-pack/plugins/infra/public/components/loading/index.tsx b/x-pack/plugins/infra/public/components/loading/index.tsx
index c7c70286077992..8c25dfc2380f9d 100644
--- a/x-pack/plugins/infra/public/components/loading/index.tsx
+++ b/x-pack/plugins/infra/public/components/loading/index.tsx
@@ -7,7 +7,7 @@
 import { EuiLoadingChart, EuiPanel, EuiText } from '@elastic/eui';
 import * as React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 
 interface InfraLoadingProps {
   text: string | JSX.Element;
diff --git a/x-pack/plugins/infra/public/components/loading_overlay_wrapper.tsx b/x-pack/plugins/infra/public/components/loading_overlay_wrapper.tsx
index bd6886fc336ac5..599969d9b15a8d 100644
--- a/x-pack/plugins/infra/public/components/loading_overlay_wrapper.tsx
+++ b/x-pack/plugins/infra/public/components/loading_overlay_wrapper.tsx
@@ -8,7 +8,7 @@ import { EuiLoadingSpinner } from '@elastic/eui';
 import { transparentize } from 'polished';
 import React from 'react';
 
-import { euiStyled } from '../utils/eui_styled_components';
+import { euiStyled } from '../../../observability/public';
 
 export const LoadingOverlayWrapper: React.FC<React.HTMLAttributes<HTMLDivElement> & {
   isLoading: boolean;
diff --git a/x-pack/plugins/infra/public/components/logging/log_analysis_setup/ml_unavailable_prompt.tsx b/x-pack/plugins/infra/public/components/logging/log_analysis_setup/ml_unavailable_prompt.tsx
index 3c345acbbe912d..4b15ce19ef0965 100644
--- a/x-pack/plugins/infra/public/components/logging/log_analysis_setup/ml_unavailable_prompt.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_analysis_setup/ml_unavailable_prompt.tsx
@@ -9,7 +9,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 export const MlUnavailablePrompt: React.FunctionComponent<{}> = () => (
   <EmptyPrompt
diff --git a/x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_page.tsx b/x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_page.tsx
index b185601b53e8cf..b4e1b7448640cb 100644
--- a/x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_page.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_page.tsx
@@ -16,7 +16,7 @@ import {
 } from '@elastic/eui';
 import React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 export const LogAnalysisSetupPage: React.FunctionComponent<CommonProps> = ({
   children,
diff --git a/x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_status_unknown_prompt.tsx b/x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_status_unknown_prompt.tsx
index e0e3c85b3b23c8..334aaa251f524d 100644
--- a/x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_status_unknown_prompt.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_analysis_setup/setup_status_unknown_prompt.tsx
@@ -8,7 +8,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { EuiEmptyPrompt, EuiButton } from '@elastic/eui';
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 interface Props {
   retry: () => void;
diff --git a/x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx b/x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx
index d4c524b82a008e..febfdddfcfb0e4 100644
--- a/x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_customization_menu.tsx
@@ -8,7 +8,7 @@ import { EuiButtonEmpty, EuiPopover } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 
 interface LogCustomizationMenuState {
   isShown: boolean;
diff --git a/x-pack/plugins/infra/public/components/logging/log_entry_flyout/log_entry_flyout.tsx b/x-pack/plugins/infra/public/components/logging/log_entry_flyout/log_entry_flyout.tsx
index 0ec386789e173f..57f27ee76184b4 100644
--- a/x-pack/plugins/infra/public/components/logging/log_entry_flyout/log_entry_flyout.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_entry_flyout/log_entry_flyout.tsx
@@ -20,7 +20,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import moment from 'moment';
 import React, { useCallback, useMemo } from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { TimeKey } from '../../../../common/time';
 import { InfraLoadingPanel } from '../../loading';
 import { LogEntryActionsMenu } from './log_entry_actions_menu';
diff --git a/x-pack/plugins/infra/public/components/logging/log_highlights_menu.tsx b/x-pack/plugins/infra/public/components/logging/log_highlights_menu.tsx
index 3922e3cc4cc7ad..f51ed693e7d808 100644
--- a/x-pack/plugins/infra/public/components/logging/log_highlights_menu.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_highlights_menu.tsx
@@ -18,7 +18,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { debounce } from 'lodash';
 import React, { useCallback, useMemo, useState } from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import { useVisibilityState } from '../../utils/use_visibility_state';
 
 interface LogHighlightsMenuProps {
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx
index ec866e42b49b12..729689e65739ef 100644
--- a/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_minimap/density_chart.tsx
@@ -9,7 +9,7 @@ import { area, curveMonotoneY } from 'd3-shape';
 import { max } from 'lodash';
 import * as React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { SummaryBucket } from './types';
 
 interface DensityChartProps {
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx
index c787df37487a50..2e45bcea421094 100644
--- a/x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_minimap/highlighted_interval.tsx
@@ -6,7 +6,7 @@
 
 import * as React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 interface HighlightedIntervalProps {
   className?: string;
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx
index 56944e44f6f180..e3a7e5aa306336 100644
--- a/x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_minimap/log_minimap.tsx
@@ -7,7 +7,7 @@
 import { scaleLinear } from 'd3-scale';
 import * as React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { LogEntryTime } from '../../../../common/log_entry';
 import { DensityChart } from './density_chart';
 import { HighlightedInterval } from './highlighted_interval';
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx
index e288f3eff12c28..8b87aa15f16f03 100644
--- a/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_minimap/search_marker.tsx
@@ -7,7 +7,7 @@
 import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
 
-import { euiStyled, keyframes } from '../../../utils/eui_styled_components';
+import { euiStyled, keyframes } from '../../../../../observability/public';
 import { LogEntryTime } from '../../../../common/log_entry';
 import { SearchMarkerTooltip } from './search_marker_tooltip';
 import { SummaryHighlightBucket } from './types';
diff --git a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
index 3507d573813a67..b610737663e8db 100644
--- a/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_minimap/time_ruler.tsx
@@ -7,7 +7,7 @@
 import { scaleTime } from 'd3-scale';
 import * as React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 interface TimeRulerProps {
   end: number;
diff --git a/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx b/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx
index dec7fb44cf5c37..a5277260d56e0f 100644
--- a/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_search_controls/log_search_input.tsx
@@ -10,7 +10,7 @@ import { i18n } from '@kbn/i18n';
 import classNames from 'classnames';
 import * as React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 interface LogSearchInputProps {
   className?: string;
diff --git a/x-pack/plugins/infra/public/components/logging/log_statusbar.tsx b/x-pack/plugins/infra/public/components/logging/log_statusbar.tsx
index 5c41332c4edc6d..8a0f1290c2af3c 100644
--- a/x-pack/plugins/infra/public/components/logging/log_statusbar.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_statusbar.tsx
@@ -6,7 +6,7 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 
 export const LogStatusbar = euiStyled(EuiFlexGroup).attrs(() => ({
   alignItems: 'center',
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx
index 11fcf4da049152..72d6aea5ecfc6a 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/column_headers.tsx
@@ -7,7 +7,7 @@
 import React, { useContext } from 'react';
 import { transparentize } from 'polished';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import {
   LogColumnConfiguration,
   isTimestampLogColumnConfiguration,
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/highlighting.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/highlighting.tsx
index af3061f25223d6..a6cb8def4f6c48 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/highlighting.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/highlighting.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { chooseLightOrDarkColor, tintOrShade } from '../../../utils/styles';
 
 export const ActiveHighlightMarker = euiStyled.mark`
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/jump_to_tail.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/jump_to_tail.tsx
index 2c23bd66c44498..50595cfe971d86 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/jump_to_tail.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/jump_to_tail.tsx
@@ -10,7 +10,7 @@ import { EuiButtonEmpty, EuiText } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import * as React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 interface LogTextStreamJumpToTailProps {
   onClickJump?: () => void;
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
index 2c65abcb430459..8c48d9e176d3b3 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/loading_item_view.tsx
@@ -10,7 +10,7 @@ import { EuiButtonEmpty, EuiIcon, EuiProgress, EuiText } from '@elastic/eui';
 import { FormattedMessage, FormattedRelative } from '@kbn/i18n/react';
 import * as React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 interface LogTextStreamLoadingItemViewProps {
   alignment: 'top' | 'bottom';
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_column.tsx
index 9cf6ed038ddf97..bcb5400c72209f 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_column.tsx
@@ -4,7 +4,7 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import {
   LogColumnConfiguration,
   isMessageLogColumnConfiguration,
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx
index ca40f66c8a2d41..8589f82ba15ddc 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.test.tsx
@@ -7,7 +7,7 @@
 import { mount } from 'enzyme';
 import React from 'react';
 
-import { EuiThemeProvider } from '../../../utils/eui_styled_components';
+import { EuiThemeProvider } from '../../../../../observability/public';
 import { LogEntryColumn } from '../../../utils/log_entry';
 import { LogEntryFieldColumn } from './log_entry_field_column';
 
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
index 42090dae6da6ff..705a7f4c12de43 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_field_column.tsx
@@ -8,7 +8,7 @@ import stringify from 'json-stable-stringify';
 import { darken, transparentize } from 'polished';
 import React, { useMemo } from 'react';
 
-import { euiStyled, css } from '../../../utils/eui_styled_components';
+import { euiStyled, css } from '../../../../../observability/public';
 import {
   isFieldColumn,
   isHighlightFieldColumn,
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
index b177f19edd5f59..a4099cdf5a1fbb 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_icon_column.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 
 import { LogEntryColumnContent } from './log_entry_column';
 import { hoveredContentStyle } from './text_styles';
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 interface LogEntryIconColumnProps {
   isHighlighted: boolean;
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx
index 1a8a7c65b19634..10bc2a7b4597ae 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_message_column.tsx
@@ -6,7 +6,7 @@
 
 import React, { memo, useMemo } from 'react';
 
-import { euiStyled, css } from '../../../utils/eui_styled_components';
+import { euiStyled, css } from '../../../../../observability/public';
 import {
   isConstantSegment,
   isFieldSegment,
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
index f03b3fe3616a32..9c1a1bb5962e46 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_row.tsx
@@ -7,7 +7,7 @@
 // import { darken, transparentize } from 'polished';
 import React, { useState, useCallback, useMemo } from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import {
   LogEntry,
   LogEntryHighlight,
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx
index cc750a69e8dc54..e3c1e80a43a1a6 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx
@@ -7,7 +7,7 @@
 import { darken, transparentize } from 'polished';
 import React, { memo } from 'react';
 
-import { euiStyled, css } from '../../../utils/eui_styled_components';
+import { euiStyled, css } from '../../../../../observability/public';
 import { useFormattedTime } from '../../formatted_time';
 import { LogEntryColumnContent } from './log_entry_column';
 
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx
index a4468d8a294b05..c63601515888ea 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx
@@ -9,7 +9,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import React, { Fragment, useMemo } from 'react';
 import moment from 'moment';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { TextScale } from '../../../../common/log_text_scale';
 import { TimeKey, UniqueTimeKey } from '../../../../common/time';
 import { callWithoutRepeats } from '../../../utils/handlers';
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx
index 8271fccd7e1338..6857f94105dad4 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/text_styles.tsx
@@ -7,7 +7,7 @@
 import { darken, transparentize } from 'polished';
 import React, { useMemo, useState, useCallback } from 'react';
 
-import { euiStyled, css } from '../../../utils/eui_styled_components';
+import { euiStyled, css } from '../../../../../observability/public';
 import { TextScale } from '../../../../common/log_text_scale';
 
 export const monospaceTextStyle = (scale: TextScale) => css`
diff --git a/x-pack/plugins/infra/public/components/logging/log_text_stream/vertical_scroll_panel.tsx b/x-pack/plugins/infra/public/components/logging/log_text_stream/vertical_scroll_panel.tsx
index a022ae42ba348e..36799037b2dd1a 100644
--- a/x-pack/plugins/infra/public/components/logging/log_text_stream/vertical_scroll_panel.tsx
+++ b/x-pack/plugins/infra/public/components/logging/log_text_stream/vertical_scroll_panel.tsx
@@ -9,7 +9,7 @@ import { sortBy } from 'lodash';
 import { throttle } from 'lodash';
 import * as React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { Rect } from './measurable_item_view';
 
 interface VerticalScrollPanelProps<Child> {
diff --git a/x-pack/plugins/infra/public/components/metrics_explorer/chart.tsx b/x-pack/plugins/infra/public/components/metrics_explorer/chart.tsx
index 286eea09d56372..43b08f45eed34e 100644
--- a/x-pack/plugins/infra/public/components/metrics_explorer/chart.tsx
+++ b/x-pack/plugins/infra/public/components/metrics_explorer/chart.tsx
@@ -17,7 +17,7 @@ import {
   MetricsExplorerYAxisMode,
   MetricsExplorerChartOptions,
 } from '../../containers/metrics_explorer/use_metrics_explorer_options';
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import { createFormatterForMetric } from './helpers/create_formatter_for_metric';
 import { MetricExplorerSeriesChart } from './series_chart';
 import { MetricsExplorerChartContextMenu } from './chart_context_menu';
diff --git a/x-pack/plugins/infra/public/components/navigation/app_navigation.tsx b/x-pack/plugins/infra/public/components/navigation/app_navigation.tsx
index 4b7f010a3601a5..b229fb4a6b494a 100644
--- a/x-pack/plugins/infra/public/components/navigation/app_navigation.tsx
+++ b/x-pack/plugins/infra/public/components/navigation/app_navigation.tsx
@@ -6,7 +6,7 @@
 
 import { EuiFlexGroup, EuiFlexItem } from '@elastic/eui';
 import React from 'react';
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 
 interface AppNavigationProps {
   'aria-label': string;
diff --git a/x-pack/plugins/infra/public/components/navigation/routed_tabs.tsx b/x-pack/plugins/infra/public/components/navigation/routed_tabs.tsx
index eefc9dc70ad9a2..0ef73429c9a288 100644
--- a/x-pack/plugins/infra/public/components/navigation/routed_tabs.tsx
+++ b/x-pack/plugins/infra/public/components/navigation/routed_tabs.tsx
@@ -8,7 +8,7 @@ import { EuiLink, EuiTab, EuiTabs } from '@elastic/eui';
 import React from 'react';
 import { Route } from 'react-router-dom';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 
 interface TabConfiguration {
   title: string | React.ReactNode;
diff --git a/x-pack/plugins/infra/public/components/nodes_overview/index.tsx b/x-pack/plugins/infra/public/components/nodes_overview/index.tsx
index 66f5307973a1f8..8cd3faabd1e128 100644
--- a/x-pack/plugins/infra/public/components/nodes_overview/index.tsx
+++ b/x-pack/plugins/infra/public/components/nodes_overview/index.tsx
@@ -10,7 +10,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { get, max, min } from 'lodash';
 import React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import { InfraFormatterType, InfraWaffleMapBounds, InfraWaffleMapOptions } from '../../lib/lib';
 import { KueryFilterQuery } from '../../store/local/waffle_filter';
 import { createFormatter } from '../../utils/formatters';
diff --git a/x-pack/plugins/infra/public/components/page.tsx b/x-pack/plugins/infra/public/components/page.tsx
index f28e56f32a3f57..b51afdd8ca803c 100644
--- a/x-pack/plugins/infra/public/components/page.tsx
+++ b/x-pack/plugins/infra/public/components/page.tsx
@@ -6,7 +6,7 @@
 
 import { EuiPage } from '@elastic/eui';
 
-import { euiStyled } from '../utils/eui_styled_components';
+import { euiStyled } from '../../../observability/public';
 
 export const ColumnarPage = euiStyled.div`
   display: flex;
diff --git a/x-pack/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx b/x-pack/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx
index 8d035c69193cba..0835a904585edc 100644
--- a/x-pack/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx
+++ b/x-pack/plugins/infra/public/components/source_configuration/add_log_column_popover.tsx
@@ -12,7 +12,7 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { LogColumnConfiguration } from '../../utils/source_configuration';
 import { useVisibilityState } from '../../utils/use_visibility_state';
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 
 interface SelectableColumnOption {
   optionProps: Option;
diff --git a/x-pack/plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx b/x-pack/plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx
index e5eab053ef9635..9ccd28f149ec7c 100644
--- a/x-pack/plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx
+++ b/x-pack/plugins/infra/public/components/source_configuration/log_columns_configuration_panel.tsx
@@ -22,7 +22,7 @@ import {
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { useCallback } from 'react';
-import { DragHandleProps, DropResult } from '../../utils/eui_draggable';
+import { DragHandleProps, DropResult } from '../../../../observability/public';
 
 import { AddLogColumnButtonAndPopover } from './add_log_column_popover';
 import {
diff --git a/x-pack/plugins/infra/public/components/waffle/gradient_legend.tsx b/x-pack/plugins/infra/public/components/waffle/gradient_legend.tsx
index a6879830524445..6b0c4bb41dc980 100644
--- a/x-pack/plugins/infra/public/components/waffle/gradient_legend.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/gradient_legend.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import {
   InfraFormatter,
   InfraWaffleMapBounds,
diff --git a/x-pack/plugins/infra/public/components/waffle/group_name.tsx b/x-pack/plugins/infra/public/components/waffle/group_name.tsx
index 867e71fac3b069..01bd3600a1624e 100644
--- a/x-pack/plugins/infra/public/components/waffle/group_name.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/group_name.tsx
@@ -6,7 +6,7 @@
 import { EuiLink, EuiToolTip } from '@elastic/eui';
 import React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import { InfraWaffleMapGroup, InfraWaffleMapOptions } from '../../lib/lib';
 
 interface Props {
diff --git a/x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx b/x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx
index e7f5ef6b62f14a..9634293587d49b 100644
--- a/x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/group_of_groups.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import {
   InfraWaffleMapBounds,
   InfraWaffleMapGroupOfGroups,
diff --git a/x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx b/x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx
index 64cf66848e1285..6b82671617df7a 100644
--- a/x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/group_of_nodes.tsx
@@ -6,7 +6,7 @@
 
 import React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import {
   InfraWaffleMapBounds,
   InfraWaffleMapGroupOfNodes,
diff --git a/x-pack/plugins/infra/public/components/waffle/legend.tsx b/x-pack/plugins/infra/public/components/waffle/legend.tsx
index 7700f7c7d6a665..de070efb35a1f7 100644
--- a/x-pack/plugins/infra/public/components/waffle/legend.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/legend.tsx
@@ -5,7 +5,7 @@
  */
 import React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import { WithWaffleOptions } from '../../containers/waffle/with_waffle_options';
 import { InfraFormatter, InfraWaffleMapBounds, InfraWaffleMapLegend } from '../../lib/lib';
 import { GradientLegend } from './gradient_legend';
diff --git a/x-pack/plugins/infra/public/components/waffle/legend_controls.tsx b/x-pack/plugins/infra/public/components/waffle/legend_controls.tsx
index 96e5fbd16e533a..26b5b1c0af727d 100644
--- a/x-pack/plugins/infra/public/components/waffle/legend_controls.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/legend_controls.tsx
@@ -23,7 +23,7 @@ import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n/react';
 import React, { SyntheticEvent, useState } from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import { InfraWaffleMapBounds } from '../../lib/lib';
 
 interface Props {
diff --git a/x-pack/plugins/infra/public/components/waffle/map.tsx b/x-pack/plugins/infra/public/components/waffle/map.tsx
index d3873c438713e5..7cab2307dacfa1 100644
--- a/x-pack/plugins/infra/public/components/waffle/map.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/map.tsx
@@ -5,7 +5,7 @@
  */
 import React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import { nodesToWaffleMap } from '../../containers/waffle/nodes_to_wafflemap';
 import {
   isWaffleMapGroupWithGroups,
diff --git a/x-pack/plugins/infra/public/components/waffle/node.tsx b/x-pack/plugins/infra/public/components/waffle/node.tsx
index e0f9ea2f74bf03..4eb5ccb8c1b4d9 100644
--- a/x-pack/plugins/infra/public/components/waffle/node.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/node.tsx
@@ -10,7 +10,7 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 
 import { ConditionalToolTip } from './conditional_tooltip';
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import { InfraWaffleMapBounds, InfraWaffleMapNode, InfraWaffleMapOptions } from '../../lib/lib';
 import { colorFromValue } from './lib/color_from_value';
 import { NodeContextMenu } from './node_context_menu';
diff --git a/x-pack/plugins/infra/public/components/waffle/steps_legend.tsx b/x-pack/plugins/infra/public/components/waffle/steps_legend.tsx
index 0fca3bb0ba0a75..d2079d53dad71b 100644
--- a/x-pack/plugins/infra/public/components/waffle/steps_legend.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/steps_legend.tsx
@@ -7,7 +7,7 @@
 import { darken } from 'polished';
 import React from 'react';
 
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import {
   InfraFormatter,
   InfraWaffleMapRuleOperator,
diff --git a/x-pack/plugins/infra/public/components/waffle/waffle_group_by_controls.tsx b/x-pack/plugins/infra/public/components/waffle/waffle_group_by_controls.tsx
index 0904c69310d2c2..c921a16d831caa 100644
--- a/x-pack/plugins/infra/public/components/waffle/waffle_group_by_controls.tsx
+++ b/x-pack/plugins/infra/public/components/waffle/waffle_group_by_controls.tsx
@@ -19,7 +19,7 @@ import React from 'react';
 import { IFieldType } from 'src/plugins/data/public';
 import { InfraGroupByOptions } from '../../lib/lib';
 import { CustomFieldPanel } from './custom_field_panel';
-import { euiStyled } from '../../utils/eui_styled_components';
+import { euiStyled } from '../../../../observability/public';
 import { InventoryItemType } from '../../../common/inventory_models/types';
 import { SnapshotGroupBy } from '../../../common/http_api/snapshot_api';
 
diff --git a/x-pack/plugins/infra/public/pages/error.tsx b/x-pack/plugins/infra/public/pages/error.tsx
index b1117c7393d51b..b8b598ba1a98b8 100644
--- a/x-pack/plugins/infra/public/pages/error.tsx
+++ b/x-pack/plugins/infra/public/pages/error.tsx
@@ -15,7 +15,7 @@ import {
 import { FormattedMessage } from '@kbn/i18n/react';
 import React from 'react';
 
-import { euiStyled } from '../utils/eui_styled_components';
+import { euiStyled } from '../../../observability/public';
 import { Header } from '../components/header';
 import { ColumnarPage, PageContent } from '../components/page';
 
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_results_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_results_content.tsx
index 6cda252377f048..58264358783787 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_results_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/page_results_content.tsx
@@ -11,7 +11,7 @@ import moment from 'moment';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 
 import { useKibana } from '../../../../../../../src/plugins/kibana_react/public';
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { TimeRange } from '../../../../common/http_api/shared/time_range';
 import {
   LogAnalysisJobProblemIndicator,
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_expression.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_expression.tsx
index 9388ce32c2f412..f6cf62421e2d5a 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_expression.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_expression.tsx
@@ -7,7 +7,7 @@
 import { i18n } from '@kbn/i18n';
 import React, { memo } from 'react';
 
-import { euiStyled } from '../../../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../../../observability/public';
 
 export const RegularExpressionRepresentation: React.FunctionComponent<{
   maximumSegmentCount?: number;
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx
index 699530dd37e225..d73f9f33fe5dbe 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/single_metric_comparison.tsx
@@ -9,7 +9,7 @@ import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import React from 'react';
 
-import { euiStyled } from '../../../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../../../observability/public';
 
 export const SingleMetricComparison: React.FunctionComponent<{
   currentValue: number;
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_table.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_table.tsx
index fc8ff4d74fcd7b..a2bd2983092a07 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_table.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/top_categories_table.tsx
@@ -9,7 +9,7 @@ import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 
-import { euiStyled } from '../../../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../../../observability/public';
 import {
   LogEntryCategory,
   LogEntryCategoryHistogram,
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx
index ac823e48158851..50d58865e9746e 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/page_results_content.tsx
@@ -20,7 +20,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import moment from 'moment';
 import React, { useCallback, useMemo, useState, useEffect } from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { TimeRange } from '../../../../common/http_api/shared/time_range';
 import { bucketSpan } from '../../../../common/log_analysis';
 import { LoadingOverlayWrapper } from '../../../components/loading_overlay_wrapper';
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx
index 04f287f137b80f..2551170c44f4e1 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/index.tsx
@@ -17,7 +17,7 @@ import numeral from '@elastic/numeral';
 import { i18n } from '@kbn/i18n';
 import React, { useMemo } from 'react';
 
-import { euiStyled } from '../../../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../../../observability/public';
 import { LogEntryRateResults } from '../../use_log_entry_rate_results';
 import { TimeRange } from '../../../../../../common/http_api/shared/time_range';
 import { formatAnomalyScore, JobStatus, SetupStatus } from '../../../../../../common/log_analysis';
diff --git a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx
index 94376eab6cec4d..39d76c4afcffe5 100644
--- a/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/table.tsx
@@ -16,7 +16,7 @@ import {
 } from '../../../../../../common/log_analysis';
 import { LogEntryRateResults } from '../../use_log_entry_rate_results';
 import { AnomaliesTableExpandedRow } from './expanded_row';
-import { euiStyled } from '../../../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../../../observability/public';
 
 interface TableItem {
   id: string;
diff --git a/x-pack/plugins/infra/public/pages/logs/stream/page_logs_content.tsx b/x-pack/plugins/infra/public/pages/logs/stream/page_logs_content.tsx
index b2482e95dbb81f..a1d567face294d 100644
--- a/x-pack/plugins/infra/public/pages/logs/stream/page_logs_content.tsx
+++ b/x-pack/plugins/infra/public/pages/logs/stream/page_logs_content.tsx
@@ -6,7 +6,7 @@
 
 import React, { useContext } from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { AutoSizer } from '../../../components/auto_sizer';
 import { LogEntryFlyout } from '../../../components/logging/log_entry_flyout';
 import { LogMinimap } from '../../../components/logging/log_minimap';
diff --git a/x-pack/plugins/infra/public/pages/metrics/components/gauges_section_vis.tsx b/x-pack/plugins/infra/public/pages/metrics/components/gauges_section_vis.tsx
index 72e98f912767f9..e069b52be8be70 100644
--- a/x-pack/plugins/infra/public/pages/metrics/components/gauges_section_vis.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/components/gauges_section_vis.tsx
@@ -16,7 +16,7 @@ import {
 import { get, last, max } from 'lodash';
 import React, { ReactText } from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { createFormatter } from '../../../utils/formatters';
 import { InventoryFormatterType } from '../../../../common/inventory_models/types';
 import { SeriesOverrides, VisSectionProps } from '../types';
diff --git a/x-pack/plugins/infra/public/pages/metrics/components/invalid_node.tsx b/x-pack/plugins/infra/public/pages/metrics/components/invalid_node.tsx
index 8961ddaf358728..fde3b61de50b58 100644
--- a/x-pack/plugins/infra/public/pages/metrics/components/invalid_node.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/components/invalid_node.tsx
@@ -9,7 +9,7 @@ import { FormattedMessage } from '@kbn/i18n/react';
 import { identity } from 'fp-ts/lib/function';
 import React from 'react';
 
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import {
   ViewSourceConfigurationButton,
   ViewSourceConfigurationButtonHrefBase,
diff --git a/x-pack/plugins/infra/public/pages/metrics/components/layout_content.tsx b/x-pack/plugins/infra/public/pages/metrics/components/layout_content.tsx
index 49048f512e0258..4e10f245acdccc 100644
--- a/x-pack/plugins/infra/public/pages/metrics/components/layout_content.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/components/layout_content.tsx
@@ -5,7 +5,7 @@
  */
 
 import { EuiPageContent } from '@elastic/eui';
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 
 export const LayoutContent = euiStyled(EuiPageContent)`
   position: relative;
diff --git a/x-pack/plugins/infra/public/pages/metrics/components/metadata_details.tsx b/x-pack/plugins/infra/public/pages/metrics/components/metadata_details.tsx
index d1310a416cb25a..3bf492d398f2cf 100644
--- a/x-pack/plugins/infra/public/pages/metrics/components/metadata_details.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/components/metadata_details.tsx
@@ -9,7 +9,7 @@ import { EuiButtonIcon, EuiFlexGrid, EuiFlexItem, EuiTitle, EuiText } from '@ela
 import { i18n } from '@kbn/i18n';
 import { get } from 'lodash';
 import { InfraMetadata } from '../../../../common/http_api';
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { MetadataContext } from '../containers/metadata_context';
 
 interface FieldDef {
diff --git a/x-pack/plugins/infra/public/pages/metrics/components/node_details_page.tsx b/x-pack/plugins/infra/public/pages/metrics/components/node_details_page.tsx
index a27548c892ab99..ea91c53faf6757 100644
--- a/x-pack/plugins/infra/public/pages/metrics/components/node_details_page.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/components/node_details_page.tsx
@@ -21,7 +21,7 @@ import { AutoSizer } from '../../../components/auto_sizer';
 import { MetricsTimeControls } from './time_controls';
 import { SideNavContext, NavItem } from '../lib/side_nav_context';
 import { PageBody } from './page_body';
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { MetricsTimeInput } from '../containers/with_metrics_time';
 import { InfraMetadata } from '../../../../common/http_api/metadata_api';
 import { PageError } from './page_error';
diff --git a/x-pack/plugins/infra/public/pages/metrics/components/side_nav.tsx b/x-pack/plugins/infra/public/pages/metrics/components/side_nav.tsx
index 816afb8c6697ab..94f97c7f45e61f 100644
--- a/x-pack/plugins/infra/public/pages/metrics/components/side_nav.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/components/side_nav.tsx
@@ -6,7 +6,7 @@
 
 import { EuiHideFor, EuiPageSideBar, EuiShowFor, EuiSideNav } from '@elastic/eui';
 import React, { useState, useCallback } from 'react';
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { NavItem } from '../lib/side_nav_context';
 
 interface Props {
diff --git a/x-pack/plugins/infra/public/pages/metrics/components/time_controls.tsx b/x-pack/plugins/infra/public/pages/metrics/components/time_controls.tsx
index a697d7b00da8be..b530125bc9c280 100644
--- a/x-pack/plugins/infra/public/pages/metrics/components/time_controls.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/components/time_controls.tsx
@@ -6,7 +6,7 @@
 
 import { EuiSuperDatePicker, OnRefreshChangeProps, OnTimeChangeProps } from '@elastic/eui';
 import React from 'react';
-import { euiStyled } from '../../../utils/eui_styled_components';
+import { euiStyled } from '../../../../../observability/public';
 import { MetricsTimeInput } from '../containers/with_metrics_time';
 
 interface MetricsTimeControlsProps {
diff --git a/x-pack/plugins/infra/public/pages/metrics/index.tsx b/x-pack/plugins/infra/public/pages/metrics/index.tsx
index 59ce834f09b5c4..533e6a7b9a8f3b 100644
--- a/x-pack/plugins/infra/public/pages/metrics/index.tsx
+++ b/x-pack/plugins/infra/public/pages/metrics/index.tsx
@@ -5,7 +5,7 @@
  */
 import { i18n } from '@kbn/i18n';
 import React, { useContext, useState } from 'react';
-import { euiStyled, EuiTheme, withTheme } from '../../utils/eui_styled_components';
+import { euiStyled, EuiTheme, withTheme } from '../../../../observability/public';
 import { DocumentTitle } from '../../components/document_title';
 import { Header } from '../../components/header';
 import { ColumnarPage, PageContent } from '../../components/page';
diff --git a/x-pack/plugins/infra/public/pages/metrics/types.ts b/x-pack/plugins/infra/public/pages/metrics/types.ts
index 21a9542ba9c547..fd6243292ec07d 100644
--- a/x-pack/plugins/infra/public/pages/metrics/types.ts
+++ b/x-pack/plugins/infra/public/pages/metrics/types.ts
@@ -5,7 +5,7 @@
  */
 
 import rt from 'io-ts';
-import { EuiTheme } from '../../utils/eui_styled_components';
+import { EuiTheme } from '../../../../observability/public';
 import { InventoryFormatterTypeRT } from '../../../common/inventory_models/types';
 import { MetricsTimeInput } from './containers/with_metrics_time';
 import { NodeDetailsMetricData } from '../../../common/http_api/node_details_api';
diff --git a/x-pack/plugins/observability/public/index.ts b/x-pack/plugins/observability/public/index.ts
index d030156202a9ba..dd8bca90cff4f7 100644
--- a/x-pack/plugins/observability/public/index.ts
+++ b/x-pack/plugins/observability/public/index.ts
@@ -14,6 +14,7 @@ export const plugin: PluginInitializer<ClientSetup, ClientStart> = (
 };
 
 export * from './components/action_menu';
+
 export {
   useTrackPageview,
   useUiTracker,
@@ -21,3 +22,5 @@ export {
   TrackMetricOptions,
   METRIC_TYPE,
 } from './hooks/use_track_metric';
+
+export * from './typings';
diff --git a/x-pack/plugins/infra/public/utils/eui_draggable/index.d.ts b/x-pack/plugins/observability/public/typings/eui_draggable/index.d.ts
similarity index 100%
rename from x-pack/plugins/infra/public/utils/eui_draggable/index.d.ts
rename to x-pack/plugins/observability/public/typings/eui_draggable/index.d.ts
diff --git a/x-pack/plugins/infra/public/utils/eui_styled_components.tsx b/x-pack/plugins/observability/public/typings/eui_styled_components.tsx
similarity index 100%
rename from x-pack/plugins/infra/public/utils/eui_styled_components.tsx
rename to x-pack/plugins/observability/public/typings/eui_styled_components.tsx
diff --git a/x-pack/plugins/observability/public/typings/index.ts b/x-pack/plugins/observability/public/typings/index.ts
new file mode 100644
index 00000000000000..3da2febc73efd3
--- /dev/null
+++ b/x-pack/plugins/observability/public/typings/index.ts
@@ -0,0 +1,8 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export * from './eui_draggable';
+export * from './eui_styled_components';