@elastic/eui 83.1.1-rc1.0 → 85.0.0

package/eui.d.ts

@@ -1,15 +1,3 @@
-declare module '@elastic/eui/src/services/theme/clone_element' {
-	import React from 'react';
-	/**
-	 * React.cloneElement does not work if the cloned element does not already have the
-	 * `css` prop - as a result, we need to use `jsx()` to manually clone the element
-	 * See https://github.com/emotion-js/emotion/issues/1404
-	 *
-	 * NOTE: We're still using/testing this utility internally, so this is not yet a public API
-	 */
-	export const cloneElementWithCss: (element: any, props: any) => React.ReactElement;
-
-}
 declare module '@elastic/eui/src/services/keys' {
 	export const ENTER = "Enter";
 	export const SPACE = " ";
@@ -1029,153 +1017,697 @@ declare module '@elastic/eui/src/components/color_picker/color_stops/utils' {
 	export const getPositionFromStop: (stop: ColorStop['stop'], ref: HTMLDivElement, min: number, max: number) => number;
 
 }
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button' {
+declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const BUTTON_COLORS: readonly ["text", "accent", "primary", "success", "warning", "danger"];
-	export type _EuiButtonColor = (typeof BUTTON_COLORS)[number];
-	export type _EuiButtonDisplay = 'base' | 'fill' | 'empty';
-	export interface _EuiButtonOptions {
-	    display?: _EuiButtonDisplay;
+	export const BACKGROUND_COLORS: readonly ["transparent", "plain", "subdued", "accent", "primary", "success", "warning", "danger"];
+	export type _EuiBackgroundColor = (typeof BACKGROUND_COLORS)[number];
+	export interface _EuiBackgroundColorOptions {
+	    /**
+	     * Use `opaque` for containers of unknown content.
+	     * Use `transparent` for interactive states like hover and focus.
+	     */
+	    method?: 'opaque' | 'transparent';
 	}
-	/**
-	 * Creates the `base` version of button styles with proper text contrast.
-	 * @param euiThemeContext
-	 * @param color One of the named button colors or 'disabled'
-	 * @returns Style object `{ backgroundColor, color }`
-	 */
-	export const euiButtonColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
-	    color: string;
-	    backgroundColor: string;
-	};
-	/**
-	 * Creates the `fill` version of buttons styles with proper text contrast.
-	 * @param euiThemeContext
-	 * @param color One of the named button colors or 'disabled'
-	 * @returns Style object `{ backgroundColor, color }`
-	 */
-	export const euiButtonFillColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
-	    color: string;
-	    backgroundColor: string;
-	};
-	/**
-	 * Creates the `empty` version of button styles using the text-variant and adding interactive styles.
-	 * @param euiThemeContext
-	 * @param color One of the named button colors or 'disabled'
-	 * @returns Style object `{ backgroundColor, color }` where `background` is typically used for interactive states
-	 */
-	export const euiButtonEmptyColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
-	    color: string;
-	    backgroundColor: string;
-	};
-	/**
-	 * Given the button display type, returns the Emotion based color keys.
-	 * @param options Button display type
-	 * @returns An object of `_EuiButtonColor` keys including `disabled`
-	 */
-	export const useEuiButtonColorCSS: (options?: _EuiButtonOptions) => {
-	    text: import("@emotion/utils").SerializedStyles;
+	export const euiBackgroundColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
+	export const useEuiBackgroundColor: (color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
+	export const useEuiBackgroundColorCSS: () => {
+	    transparent: import("@emotion/utils").SerializedStyles;
+	    plain: import("@emotion/utils").SerializedStyles;
+	    subdued: import("@emotion/utils").SerializedStyles;
 	    accent: import("@emotion/utils").SerializedStyles;
 	    primary: import("@emotion/utils").SerializedStyles;
 	    success: import("@emotion/utils").SerializedStyles;
 	    warning: import("@emotion/utils").SerializedStyles;
 	    danger: import("@emotion/utils").SerializedStyles;
-	    disabled: import("@emotion/utils").SerializedStyles;
-	};
-	/**
-	 * Creates the translate animation when button is in focus.
-	 * @returns string
-	 */
-	export const useEuiButtonFocusCSS: () => string;
-	/**
-	 * Map of `size` props to various sizings/scales
-	 * that should remain consistent across all buttons
-	 */
-	export const euiButtonSizeMap: ({ euiTheme }: UseEuiTheme) => {
-	    xs: {
-	        height: string;
-	        radius: import("csstype").Property.BorderRadius<string | number> | undefined;
-	        fontScale: "xs";
-	    };
-	    s: {
-	        height: string;
-	        radius: import("csstype").Property.BorderRadius<string | number> | undefined;
-	        fontScale: "s";
-	    };
-	    m: {
-	        height: string;
-	        radius: import("csstype").Property.BorderRadius<string | number> | undefined;
-	        fontScale: "s";
-	    };
 	};
 
 }
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/functions/shadows' {
-	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services/theme/types';
-	export const getShadowColor: (color: string, opacity: number, colorMode: EuiThemeColorModeStandard) => string;
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/functions' {
-	export * from '@elastic/eui/src/themes/amsterdam/global_styling/functions/shadows';
-
-}
-declare module '@elastic/eui/src/global_styling/variables/shadow' {
-	export const EuiThemeShadowSizes: readonly ["xs", "s", "m", "l", "xl"];
-	export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number];
-	/**
-	 * Shadow t-shirt sizes descriptions
-	 */
-	export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string>;
-	export interface _EuiThemeShadowCustomColor {
-	    color?: string;
-	    property?: 'box-shadow' | 'filter';
-	}
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow' {
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
-	import { _EuiThemeShadowSize, _EuiThemeShadowCustomColor } from '@elastic/eui/src/global_styling/variables/shadow';
-	export interface EuiShadowCustomColor {
-	    color?: string;
-	}
+declare module '@elastic/eui/src/global_styling/functions/logicals' {
+	import { CSSProperties } from 'react';
 	/**
-	 * euiSlightShadow
+	 * EUI utilizes logical CSS properties to enable directional writing-modes.
+	 * To encourage use of logical properties, we provide a few helper utilities to
+	 * convert certain directional properties to logical properties.
+	 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
 	 */
-	export const euiShadowXSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const logicalSide: {
+	    left: string;
+	    right: string;
+	    top: string;
+	    bottom: string;
+	    horizontal: string;
+	    vertical: string;
+	};
+	export const LOGICAL_SIDES: ("left" | "right" | "top" | "bottom" | "horizontal" | "vertical")[];
+	export type LogicalSides = (typeof LOGICAL_SIDES)[number];
+	export const logicals: {
+	    height: string;
+	    width: string;
+	    "max-height": string;
+	    "max-width": string;
+	    "min-height": string;
+	    "min-width": string;
+	    top: string;
+	    right: string;
+	    bottom: string;
+	    left: string;
+	    horizontal: string;
+	    vertical: string;
+	    "margin-left": string;
+	    "margin-right": string;
+	    "margin-top": string;
+	    "margin-bottom": string;
+	    "margin-horizontal": string;
+	    "margin-vertical": string;
+	    "padding-left": string;
+	    "padding-right": string;
+	    "padding-top": string;
+	    "padding-bottom": string;
+	    "padding-horizontal": string;
+	    "padding-vertical": string;
+	    "overflow-x": string;
+	    "overflow-y": string;
+	    "border-horizontal": string;
+	    "border-horizontal-color": string;
+	    "border-horizontal-width": string;
+	    "border-horizontal-style": string;
+	    "border-vertical": string;
+	    "border-vertical-color": string;
+	    "border-vertical-width": string;
+	    "border-vertical-style": string;
+	    "border-bottom": string;
+	    "border-bottom-color": string;
+	    "border-bottom-style": string;
+	    "border-bottom-width": string;
+	    "border-top": string;
+	    "border-top-color": string;
+	    "border-top-style": string;
+	    "border-top-width": string;
+	    "border-right": string;
+	    "border-right-color": string;
+	    "border-right-style": string;
+	    "border-right-width": string;
+	    "border-left": string;
+	    "border-left-color": string;
+	    "border-left-style": string;
+	    "border-left-width": string;
+	    "border-top-left-radius": string;
+	    "border-top-right-radius": string;
+	    "border-bottom-left-radius": string;
+	    "border-bottom-right-radius": string;
+	    _shorthands: string[];
+	};
+	export const LOGICAL_PROPERTIES: ("left" | "right" | "top" | "width" | "height" | "bottom" | "horizontal" | "vertical" | "max-height" | "max-width" | "min-height" | "min-width" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "overflow-x" | "overflow-y" | "border-horizontal" | "border-horizontal-color" | "border-horizontal-width" | "border-horizontal-style" | "border-vertical" | "border-vertical-color" | "border-vertical-width" | "border-vertical-style" | "border-bottom" | "border-bottom-color" | "border-bottom-style" | "border-bottom-width" | "border-top" | "border-top-color" | "border-top-style" | "border-top-width" | "border-right" | "border-right-color" | "border-right-style" | "border-right-width" | "border-left" | "border-left-color" | "border-left-style" | "border-left-width" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius")[];
+	export type LogicalProperties = (typeof LOGICAL_PROPERTIES)[number];
 	/**
-	 * bottomShadowSmall
+	 *
+	 * @param property A string that is a valid CSS logical property
+	 * @param value String to output as the property value
+	 * @returns `string` Returns the logical CSS property version for the given `property: value` pair
 	 */
-	export const euiShadowSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const logicalCSS: (property: LogicalProperties, value?: any) => string;
 	/**
-	 * bottomShadowMedium
+	 * Some logical properties are not yet fully supported by all browsers.
+	 * For those cases, we should use the old property as a fallback for
+	 * browsers missing support, while allowing supporting browsers to use
+	 * the logical properties.
+	 *
+	 * Examples:
+	 * https://caniuse.com/?search=overflow-block
+	 * https://caniuse.com/mdn-css_properties_float_flow_relative_values
 	 */
-	export const euiShadowMedium: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, property }?: _EuiThemeShadowCustomColor) => string;
+	export const logicalCSSWithFallback: (property: LogicalProperties, value?: any) => string;
 	/**
-	 * bottomShadow
+	 *
+	 * @param property A string that is a valid CSS logical property
+	 * @param value String to output as the property value
+	 * @returns `object` Returns the logical CSS property version for the given `property: value` pair
 	 */
-	export const euiShadowLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const logicalStyle: (property: LogicalProperties, value?: any) => {
+	    [x: string]: any;
+	};
 	/**
-	 * bottomShadowLarge
+	 * Given a style object with any amount of unknown CSS properties,
+	 * find ones that can be converted to logical properties and convert them
+	 *
+	 * @param styleObject - A React object of camelCased styles
+	 * @returns `object`
 	 */
-	export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
-	    reverse?: boolean;
-	}
-	export const euiShadowXLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, reverse }?: EuiShadowXLarge) => string;
+	export const logicalStyles: (styleObject: CSSProperties) => Record<string, string | number | undefined>;
 	/**
-	 * slightShadowHover
-	 * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
+	 *
+	 * @param width A string value for the LTR width
+	 * @param height A string value for the LTR height
+	 * @returns `string` Returns the logical CSS properties for height and width
 	 */
-	export const euiSlightShadowHover: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
-	export const useEuiSlightShadowHover: (color?: _EuiThemeShadowCustomColor['color']) => string;
+	export const logicalSizeCSS: (width: any, height?: any) => string;
 	/**
-	 * bottomShadowFlat
 	 *
-	 * Similar to shadow medium but without the bottom depth.
-	 * Useful for popovers that drop UP rather than DOWN.
+	 * @param width A string value for the LTR width
+	 * @param height A string value for the LTR height
+	 * @returns `object` Returns the logical CSS properties for height and width
 	 */
-	export const euiShadowFlat: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
-	export const useEuiShadowFlat: (color?: _EuiThemeShadowCustomColor['color']) => string;
-	export const euiShadow: (euiThemeContext: UseEuiTheme, size?: _EuiThemeShadowSize, { color }?: _EuiThemeShadowCustomColor) => string;
-	export const useEuiShadow: (size?: _EuiThemeShadowSize, color?: _EuiThemeShadowCustomColor['color']) => string;
+	export const logicalSizeStyle: (width: any, height: any) => {
+	    [x: string]: any;
+	};
+	export const logicalText: {
+	    'text-align': {
+	        left: string;
+	        center: string;
+	        right: string;
+	    };
+	};
+	export const LOGICAL_TEXT_ALIGNMENT: ("left" | "right" | "center")[];
+	export type LogicalText = (typeof LOGICAL_TEXT_ALIGNMENT)[number];
+	/**
+	 *
+	 * @param property A string that is a valid CSS logical property
+	 * @param value String to output as the property value
+	 * @returns `string` Returns the logical CSS property version for the given `property: value` pair
+	 */
+	export const logicalTextAlignCSS: (value: LogicalText) => string;
+	/**
+	 *
+	 * @param property A string that is a valid CSS logical property
+	 * @param value String to output as the property value
+	 * @returns `object` Returns the logical CSS property version for the given `property: value` pair
+	 */
+	export const logicalTextAlignStyle: (value: LogicalText) => {
+	    textAlign: string;
+	};
+
+}
+declare module '@elastic/eui/src/global_styling/functions/logical_shorthands' {
+	export const LOGICAL_SHORTHANDS: string[];
+	export type LogicalShorthands = (typeof LOGICAL_SHORTHANDS)[number];
+	/**
+	 * Unfortunately, shorthand properties that describe boxes
+	 * (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box)
+	 * do not currently automatically respond to logical changes in display direction
+	 * (@see https://github.com/w3c/csswg-drafts/issues/1282)
+	 *
+	 * This utility is essentially a stop-gap for those shorthand properties,
+	 * converting them to corresponding longer logical `-inline` and `-block` properties
+	 *
+	 * 🗑 NOTE: This file is in a separate util file from logicals.ts due to its relatively
+	 * convoluted logic, & to make deleting it easier when an official CSS spec is implemented.
+	 */
+	export const logicalShorthandCSS: (property: LogicalShorthands, value: string | number) => string;
+	/**
+	 * Logical border radius is unfortunately a very special case as it handles corners
+	 * and not sides (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#corners_of_a_box)
+	 * and does not have `-inline` or `-block` shorthands.
+	 *
+	 * It also needs to account for `/` syntax (horizontal vs vertical radii)
+	 * @see https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
+	 */
+	export const logicalBorderRadiusCSS: (value: string, ignoreZeroes?: boolean) => string;
+
+}
+declare module '@elastic/eui/src/global_styling/functions/math' {
+	 type ValueTypes = string | number | undefined;
+	export const mathWithUnits: (values: ValueTypes | ValueTypes[], callback: (...args: number[]) => number, unit?: string) => string;
+	export {};
+
+}
+declare module '@elastic/eui/src/global_styling/functions/size' {
+	/**
+	 * Calculates the `px` value based on a scale multiplier
+	 * @param scale - The font scale multiplier
+	 * *
+	 * @param themeOrBase - Theme base value
+	 * *
+	 * @returns string - Rem unit aligned to baseline
+	 */
+	export const sizeToPixel: (scale?: number) => (themeOrBase: number | {
+	    [key: string]: any;
+	    base: number;
+	}) => string;
+
+}
+declare module '@elastic/eui/src/services/theme/warning' {
+	 type LEVELS = 'log' | 'warn' | 'error';
+	export const setEuiDevProviderWarning: (level: LEVELS | undefined) => LEVELS | undefined;
+	export const getEuiDevProviderWarning: () => LEVELS | undefined;
+	export const emitEuiProviderWarning: (providerMessage: string) => void;
+	export {};
+
+}
+declare module '@elastic/eui/src/services/theme/hooks' {
+	import React from 'react';
+	import { EuiThemeColorModeStandard, EuiThemeModifications, EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+	/**
+	 * Hook for function components
+	 */
+	export interface UseEuiTheme<T extends {} = {}> {
+	    euiTheme: EuiThemeComputed<T>;
+	    colorMode: EuiThemeColorModeStandard;
+	    modifications: EuiThemeModifications<T>;
+	}
+	export const useEuiTheme: <T extends {} = {}>() => UseEuiTheme<T>;
+	/**
+	 * HOC for class components
+	 */
+	export interface WithEuiThemeProps<P extends {} = {}> {
+	    theme: UseEuiTheme<P>;
+	}
+	export const withEuiTheme: <T extends {} = {}, U extends {} = {}>(Component: React.ComponentType<T & WithEuiThemeProps<U>>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, "theme">> & React.RefAttributes<Omit<T, "theme">>>;
+	/**
+	 * Render prop alternative for complex class components
+	 * Most useful for scenarios where a HOC may interfere with typing
+	 */
+	export const RenderWithEuiTheme: <T extends {} = {}>({ children, }: {
+	    children: (theme: UseEuiTheme) => React.ReactElement;
+	}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+
+}
+declare module '@elastic/eui/src/global_styling/functions/typography' {
+	import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement, _EuiThemeFontWeights } from '@elastic/eui/src/global_styling/variables/typography';
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	export interface _FontScaleOptions {
+	    /**
+	     * The returned string measurement
+	     */
+	    measurement?: _EuiThemeFontSizeMeasurement;
+	    /**
+	     * An additional custom scale multiplier to use against the current scale
+	     * This parameter can be used (e.g. by EuiText sizes) to get sizes of text smaller than the default
+	     */
+	    customScale?: _EuiThemeFontScale;
+	}
+	/**
+	 * Calculates the font-size value based on the provided scale key
+	 * @param scale - The font scale key
+	 * @param theme - Requires the `base` and `font` keys
+	 * @param options - Optional parameters - see _FontScaleOptions
+	 *
+	 * @returns string - Calculated font-size value
+	 */
+	export function euiFontSizeFromScale(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
+	/**
+	 * Calculates the line-height to the closest multiple of the baseline
+	 * EX: A proper line-height for text is 1.5 times the font-size.
+	 *     If our base font size (euiFontSize) is 16, and our baseline is 4. To ensure the
+	 *     text stays on the baseline, we pass a multiplier to calculate a line-height.
+	 * @param scale - The font scale key
+	 * @param theme - Requires the `base` and `font` keys
+	 * @param options - Optional parameters - see _FontScaleOptions
+	 *
+	 * @returns string - Calculated line-height value aligned to baseline
+	 */
+	export function euiLineHeightFromBaseline(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
+	/**
+	 * Text weight shifting
+	 *
+	 * When changing the font-weight based on the state of the component,
+	 * this mixin will ensure that the sizing is dependent on the boldest
+	 * weight so it doesn't shift sibling content.
+	 */
+	export const euiTextShift: (fontWeight: keyof _EuiThemeFontWeights | undefined, attribute: string | undefined, euiTheme: UseEuiTheme['euiTheme']) => string;
+
+}
+declare module '@elastic/eui/src/global_styling/functions' {
+	export * from '@elastic/eui/src/global_styling/functions/logicals';
+	export * from '@elastic/eui/src/global_styling/functions/logical_shorthands';
+	export * from '@elastic/eui/src/global_styling/functions/math';
+	export * from '@elastic/eui/src/global_styling/functions/size';
+	export * from '@elastic/eui/src/global_styling/functions/typography';
+
+}
+declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
+	import { CSSProperties } from 'react';
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
+	/**
+	 * Set scroll bar appearance on Chrome (and firefox).
+	 * All parameters are optional and default to specific global settings.
+	 */
+	export interface EuiScrollBarStyles {
+	    thumbColor?: CSSProperties['backgroundColor'];
+	    trackColor?: CSSProperties['backgroundColor'];
+	    /**
+	     * Defaults to `thin`. Use `auto` only for large page scrollbars
+	     */
+	    width?: CSSProperties['scrollbarWidth'];
+	    /**
+	     * Overall width (height for horizontal scrollbars)
+	     */
+	    size?: CSSProperties['width'];
+	    /**
+	     * Corner sizes are usually determined by `width` and
+	     * are used as an inset border and therefore a smaller corner size means a larger thumb
+	     */
+	    corner?: CSSProperties['borderWidth'];
+	}
+	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
+	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
+	/**
+	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
+	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
+	 *    Others like Safari, won't show anything at all.
+	 */
+	interface _EuiYScroll {
+	    height?: CSSProperties['height'];
+	}
+	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
+	interface _EuiYScrollWithShadows extends _EuiYScroll {
+	    side?: 'both' | 'start' | 'end';
+	}
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height, side }?: _EuiYScrollWithShadows) => string;
+	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
+	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScroll: () => string;
+	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScrollWithShadows: () => string;
+	interface EuiScrollOverflowStyles {
+	    direction?: 'y' | 'x';
+	    mask?: boolean;
+	}
+	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
+	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
+	/**
+	 * For quickly applying a full-height element whether using flex or not
+	 */
+	export const euiFullHeight: () => string;
+	/**
+	 * A constant storing the support for the `:has()` selector through a
+	 * media query that will only apply the content it is supported.
+	 */
+	export const euiSupportsHas = "@supports(selector(:has(p)))";
+	export {};
+
+}
+declare module '@elastic/eui/src/global_styling/mixins/_padding' {
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
+	export const PADDING_SIZES: readonly ["none", "xs", "s", "m", "l", "xl"];
+	export type EuiPaddingSize = (typeof PADDING_SIZES)[number];
+	export const euiPaddingSize: ({ euiTheme }: UseEuiTheme, size: EuiPaddingSize) => string | null;
+	export const euiPaddingSizeCSS: (euiThemeContext: UseEuiTheme, side?: "left" | "right" | "top" | "bottom" | "horizontal" | "vertical" | undefined) => {
+	    none: null;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    xl: import("@emotion/utils").SerializedStyles;
+	};
+	export const useEuiPaddingSize: (size: EuiPaddingSize) => string | null;
+	export const useEuiPaddingCSS: (side?: "left" | "right" | "top" | "bottom" | "horizontal" | "vertical" | undefined) => {
+	    none: null;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    xl: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/global_styling/mixins/_states' {
+	import { CSSProperties } from 'react';
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export type _EuiFocusRingOffset = 'inset' | 'outset' | 'center' | CSSProperties['outlineOffset'];
+	/**
+	 * It is best practice to utilize the browser's default `outline` property for handling focus rings.
+	 * However, some components need to be forced to have the same behavior, or adjust the display.
+	 * This function re-applies the same default outline with a couple parameters
+	 * @param euiTheme UseEuiTheme
+	 * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
+	 * @param color Accepts any CSS color
+	 */
+	export const euiOutline: ({ euiTheme }: UseEuiTheme, offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
+	export const euiFocusRing: (euiThemeContext: UseEuiTheme, offset?: _EuiFocusRingOffset, options?: {
+	    color?: CSSProperties['outlineColor'];
+	} | undefined) => string;
+	export const useEuiFocusRing: (offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
+
+}
+declare module '@elastic/eui/src/global_styling/mixins/_typography' {
+	import { CSSProperties } from 'react';
+	import { _FontScaleOptions } from '@elastic/eui/src/global_styling/functions/typography';
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	import { _EuiThemeFontScale } from '@elastic/eui/src/global_styling/variables/typography';
+	export type EuiThemeFontSize = {
+	    fontSize: CSSProperties['fontSize'];
+	    lineHeight: CSSProperties['lineHeight'];
+	};
+	/**
+	 * Returns font-size and line-height
+	 */
+	export const euiFontSize: ({ euiTheme }: UseEuiTheme, scale: _EuiThemeFontScale, options?: _FontScaleOptions | undefined) => EuiThemeFontSize;
+	export const useEuiFontSize: (scale: _EuiThemeFontScale, options?: _FontScaleOptions | undefined) => EuiThemeFontSize;
+	/**
+	 * Force text to wrap on natural word breaks (e.g. spaces & hyphens)
+	 * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
+	 */
+	export const euiTextBreakWord: () => string;
+	/**
+	 * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.
+	 */
+	export const euiTextTruncate: (maxWidth?: CSSProperties['maxWidth']) => string;
+	/**
+	 * Fixed-width numbers for tabular data
+	 */
+	export const euiNumberFormat: ({ euiTheme }: UseEuiTheme) => string;
+	export const useEuiNumberFormat: () => string;
+
+}
+declare module '@elastic/eui/src/services/breakpoint/_sorting' {
+	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
+	export const sortMapByLargeToSmallValues: (breakpointsMap: _EuiThemeBreakpoints) => _EuiThemeBreakpoints;
+	export const sortMapBySmallToLargeValues: (breakpointsMap: _EuiThemeBreakpoints) => _EuiThemeBreakpoints;
+
+}
+declare module '@elastic/eui/src/global_styling/variables/shadow' {
+	export const EuiThemeShadowSizes: readonly ["xs", "s", "m", "l", "xl"];
+	export type _EuiThemeShadowSize = (typeof EuiThemeShadowSizes)[number];
+	/**
+	 * Shadow t-shirt sizes descriptions
+	 */
+	export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string>;
+	export interface _EuiThemeShadowCustomColor {
+	    color?: string;
+	    property?: 'box-shadow' | 'filter';
+	}
+
+}
+declare module '@elastic/eui/src/global_styling/variables' {
+	export * from '@elastic/eui/src/global_styling/variables/animations';
+	export * from '@elastic/eui/src/global_styling/variables/borders';
+	export * from '@elastic/eui/src/global_styling/variables/breakpoint';
+	export * from '@elastic/eui/src/global_styling/variables/colors';
+	export * from '@elastic/eui/src/global_styling/variables/levels';
+	export * from '@elastic/eui/src/global_styling/variables/size';
+	export * from '@elastic/eui/src/global_styling/variables/shadow';
+	export * from '@elastic/eui/src/global_styling/variables/states';
+	export * from '@elastic/eui/src/global_styling/variables/typography';
+
+}
+declare module '@elastic/eui/src/global_styling/mixins/_responsive' {
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling/variables';
+	/**
+	 * Generates a CSS media query rule string based on the input breakpoint *ranges*.
+	 * Examples with default theme breakpoints:
+	 *
+	 * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
+	 * euiBreakpoint(['s', 'l']) becomes `@media only screen and (min-width: 575px) and (max-width: 1199px)`
+	 *
+	 * Use the smallest and largest sizes to generate media queries with only min/max-width.
+	 * Examples with default theme breakpoints:
+	 *
+	 * euiBreakpoint(['xs', 'm']) becomes `@media only screen and (max-width: 991px)`
+	 * euiBreakpoint(['l', 'xl']) becomes `@media only screen and (min-width: 992px)`
+	 */
+	export const euiBreakpoint: ({ euiTheme }: UseEuiTheme, sizes: [_EuiThemeBreakpoint, ..._EuiThemeBreakpoint[]]) => string;
+	export const useEuiBreakpoint: (sizes: [_EuiThemeBreakpoint, ..._EuiThemeBreakpoint[]]) => string;
+	/**
+	 * Min/Max width breakpoint utilities that generate only a single min/max query/bound
+	 *
+	 * *Unlike the above euiBreakpoint utility*, these utilities treat breakpoint
+	 * sizes as a one-dimensional point, rather than a two-dimensional *screen range*.
+	 * Examples with default theme breakpoints:
+	 *
+	 * euiMaxBreakpoint('m') becomes `@media only screen and (max-width: 767px)`
+	 * euiMinBreakpoint('m') becomes `@media only screen and (min-width: 768px)`
+	 *
+	 * This is safer and more intentional to use than euiBreakpoint(['xs', 's']) / euiBreakpoint(['m', 'xl'])
+	 * in the event that consumers add larger or smaller custom breakpoints (e.g 'xxs' or `xxl`)
+	 * and if the intention of the media query is actually "m and below/above" vs. "only screens m/l/xl".
+	 */
+	export const euiMinBreakpoint: ({ euiTheme }: UseEuiTheme, size: _EuiThemeBreakpoint) => string;
+	export const useEuiMinBreakpoint: (size: _EuiThemeBreakpoint) => string;
+	export const euiMaxBreakpoint: ({ euiTheme }: UseEuiTheme, size: _EuiThemeBreakpoint) => string;
+	export const useEuiMaxBreakpoint: (size: _EuiThemeBreakpoint) => string;
+
+}
+declare module '@elastic/eui/src/global_styling/mixins' {
+	export * from '@elastic/eui/src/global_styling/mixins/_color';
+	export * from '@elastic/eui/src/global_styling/mixins/_helpers';
+	export * from '@elastic/eui/src/global_styling/mixins/_padding';
+	export * from '@elastic/eui/src/global_styling/mixins/_states';
+	export * from '@elastic/eui/src/global_styling/mixins/_typography';
+	export * from '@elastic/eui/src/global_styling/mixins/_responsive';
+
+}
+declare module '@elastic/eui/src/global_styling/reset/reset' {
+	export const resetStyles = "\n/* // Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). */\n\n\n*, *:before, *:after {\n  box-sizing: border-box;\n}\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n  margin: 0;\n  padding: 0;\n  border: none;\n  vertical-align: baseline;\n}\n\nh1, h2, h3, h4, h5, h6, p {\n  font-family: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section {\n  display: block;\n}\n\na[href],\nbutton,\n[role='button'] {\n  cursor: pointer;\n}\n\nbutton {\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  color: inherit;\n  border-radius: 0;\n  font-size: inherit;\n}\n\ninput {\n  margin: 0;\n  padding: 0;\n}\n\ninput:disabled {\n  opacity: 1; /* required on iOS */\n}\n\nol,\nul {\n  list-style: none;\n}\n\nblockquote,\nq {\n  quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n  content: '';\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\nhr {\n  margin: 0;\n}\n\nfieldset {\n  min-inline-size: auto;\n}\n\n/* Chrome has an issue around RTL languages in SVGs when letter-spacing is negative\n * https://bugs.chromium.org/p/chromium/issues/detail?id=966480\n */\nsvg text {\n  letter-spacing: normal !important;\n}";
+
+}
+declare module '@elastic/eui/src/global_styling/reset/global_styles' {
+	
+	export interface EuiGlobalStylesProps {
+	}
+	export const EuiGlobalStyles: ({}: EuiGlobalStylesProps) => JSX.Element;
+
+}
+declare module '@elastic/eui/src/global_styling/utility/animations' {
+	export const euiAnimFadeIn: import("@emotion/serialize").Keyframes;
+	export const euiAnimSlideInUp: (size: string) => import("@emotion/serialize").Keyframes;
+	export const euiAnimSlideX: (size: string) => import("@emotion/serialize").Keyframes;
+	export const euiAnimScale: import("@emotion/serialize").Keyframes;
+
+}
+declare module '@elastic/eui/src/global_styling' {
+	export * from '@elastic/eui/src/global_styling/reset/global_styles';
+	export * from '@elastic/eui/src/global_styling/functions';
+	export * from '@elastic/eui/src/global_styling/variables';
+	export * from '@elastic/eui/src/global_styling/mixins';
+	export * from '@elastic/eui/src/global_styling/utility/animations';
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const BUTTON_COLORS: readonly ["text", "accent", "primary", "success", "warning", "danger"];
+	export type _EuiButtonColor = (typeof BUTTON_COLORS)[number];
+	export type _EuiButtonDisplay = 'base' | 'fill' | 'empty';
+	export interface _EuiButtonOptions {
+	    display?: _EuiButtonDisplay;
+	}
+	/**
+	 * Creates the `base` version of button styles with proper text contrast.
+	 * @param euiThemeContext
+	 * @param color One of the named button colors or 'disabled'
+	 * @returns Style object `{ backgroundColor, color }`
+	 */
+	export const euiButtonColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
+	    color: string;
+	    backgroundColor: string;
+	};
+	/**
+	 * Creates the `fill` version of buttons styles with proper text contrast.
+	 * @param euiThemeContext
+	 * @param color One of the named button colors or 'disabled'
+	 * @returns Style object `{ backgroundColor, color }`
+	 */
+	export const euiButtonFillColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
+	    color: string;
+	    backgroundColor: string;
+	};
+	/**
+	 * Creates the `empty` version of button styles using the text-variant and adding interactive styles.
+	 * @param euiThemeContext
+	 * @param color One of the named button colors or 'disabled'
+	 * @returns Style object `{ backgroundColor, color }` where `background` is typically used for interactive states
+	 */
+	export const euiButtonEmptyColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
+	    color: string;
+	    backgroundColor: string;
+	};
+	/**
+	 * Given the button display type, returns the Emotion based color keys.
+	 * @param options Button display type
+	 * @returns An object of `_EuiButtonColor` keys including `disabled`
+	 */
+	export const useEuiButtonColorCSS: (options?: _EuiButtonOptions) => {
+	    text: import("@emotion/utils").SerializedStyles;
+	    accent: import("@emotion/utils").SerializedStyles;
+	    primary: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	    disabled: import("@emotion/utils").SerializedStyles;
+	};
+	/**
+	 * Creates the translate animation when button is in focus.
+	 * @returns string
+	 */
+	export const useEuiButtonFocusCSS: () => string;
+	/**
+	 * Map of `size` props to various sizings/scales
+	 * that should remain consistent across all buttons
+	 */
+	export const euiButtonSizeMap: ({ euiTheme }: UseEuiTheme) => {
+	    xs: {
+	        height: string;
+	        radius: import("csstype").Property.BorderRadius<string | number> | undefined;
+	        fontScale: "xs";
+	    };
+	    s: {
+	        height: string;
+	        radius: import("csstype").Property.BorderRadius<string | number> | undefined;
+	        fontScale: "s";
+	    };
+	    m: {
+	        height: string;
+	        radius: import("csstype").Property.BorderRadius<string | number> | undefined;
+	        fontScale: "s";
+	    };
+	};
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/functions/shadows' {
+	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services/theme/types';
+	export const getShadowColor: (color: string, opacity: number, colorMode: EuiThemeColorModeStandard) => string;
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/functions' {
+	export * from '@elastic/eui/src/themes/amsterdam/global_styling/functions/shadows';
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow' {
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
+	import { _EuiThemeShadowSize, _EuiThemeShadowCustomColor } from '@elastic/eui/src/global_styling/variables/shadow';
+	export interface EuiShadowCustomColor {
+	    color?: string;
+	}
+	/**
+	 * euiSlightShadow
+	 */
+	export const euiShadowXSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	/**
+	 * bottomShadowSmall
+	 */
+	export const euiShadowSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	/**
+	 * bottomShadowMedium
+	 */
+	export const euiShadowMedium: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, property }?: _EuiThemeShadowCustomColor) => string;
+	/**
+	 * bottomShadow
+	 */
+	export const euiShadowLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	/**
+	 * bottomShadowLarge
+	 */
+	export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
+	    reverse?: boolean;
+	}
+	export const euiShadowXLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, reverse }?: EuiShadowXLarge) => string;
+	/**
+	 * slightShadowHover
+	 * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
+	 */
+	export const euiSlightShadowHover: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const useEuiSlightShadowHover: (color?: _EuiThemeShadowCustomColor['color']) => string;
+	/**
+	 * bottomShadowFlat
+	 *
+	 * Similar to shadow medium but without the bottom depth.
+	 * Useful for popovers that drop UP rather than DOWN.
+	 */
+	export const euiShadowFlat: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const useEuiShadowFlat: (color?: _EuiThemeShadowCustomColor['color']) => string;
+	export const euiShadow: (euiThemeContext: UseEuiTheme, size?: _EuiThemeShadowSize, { color }?: _EuiThemeShadowCustomColor) => string;
+	export const useEuiShadow: (size?: _EuiThemeShadowSize, color?: _EuiThemeShadowCustomColor['color']) => string;
 
 }
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins' {
@@ -1218,6 +1750,7 @@ declare module '@elastic/eui/src/components/icon/icon_map' {
 	    arrowEnd: string;
 	    article: string;
 	    asterisk: string;
+	    at: string;
 	    auditbeatApp: string;
 	    beaker: string;
 	    bell: string;
@@ -1378,6 +1911,7 @@ declare module '@elastic/eui/src/components/icon/icon_map' {
 	    inspect: string;
 	    invert: string;
 	    ip: string;
+	    key: string;
 	    keyboard: string;
 	    kqlField: string;
 	    kqlFunction: string;
@@ -1730,7 +2264,7 @@ declare module '@elastic/eui/src/components/icon/icon' {
 	import { WithEuiThemeProps } from '@elastic/eui/src/services';
 	export { COLORS } from '@elastic/eui/src/components/icon/named_colors';
 	import { NamedColor } from '@elastic/eui/src/components/icon/named_colors';
-	export const TYPES: ("string" | "number" | "function" | "article" | "link" | "menu" | "filter" | "image" | "stop" | "search" | "temperature" | "color" | "warning" | "empty" | "scale" | "wordWrap" | "grid" | "accessibility" | "aggregate" | "analyzeEvent" | "annotation" | "apps" | "arrowStart" | "arrowEnd" | "asterisk" | "beaker" | "bell" | "bellSlash" | "beta" | "bolt" | "branch" | "branchUser" | "broom" | "brush" | "bug" | "bullseye" | "calendar" | "check" | "checkInCircleFilled" | "cheer" | "clock" | "cloudDrizzle" | "cloudStormy" | "cloudSunny" | "cluster" | "compute" | "console" | "container" | "continuityAbove" | "continuityAboveBelow" | "continuityBelow" | "continuityWithin" | "copy" | "cross" | "crosshairs" | "currency" | "cut" | "database" | "desktop" | "discuss" | "document" | "documentEdit" | "documentation" | "documents" | "dot" | "dotInCircle" | "doubleArrowLeft" | "doubleArrowRight" | "download" | "editorDistributeHorizontal" | "editorDistributeVertical" | "editorItemAlignBottom" | "editorItemAlignCenter" | "editorItemAlignLeft" | "editorItemAlignMiddle" | "editorItemAlignRight" | "editorItemAlignTop" | "editorPositionBottomLeft" | "editorPositionBottomRight" | "editorPositionTopLeft" | "editorPositionTopRight" | "email" | "eql" | "eraser" | "error" | "exit" | "expand" | "expandMini" | "eye" | "filterExclude" | "filterIgnore" | "filterInclude" | "filterInCircle" | "flag" | "fold" | "frameNext" | "framePrevious" | "fullScreenExit" | "gear" | "glasses" | "globe" | "grab" | "heart" | "heatmap" | "help" | "home" | "iInCircle" | "indexTemporary" | "infinity" | "inputOutput" | "inspect" | "invert" | "ip" | "keyboard" | "kubernetesNode" | "kubernetesPod" | "launch" | "layers" | "lettering" | "lineDashed" | "lineDotted" | "lineSolid" | "list" | "lock" | "lockOpen" | "magnet" | "magnifyWithExclamation" | "magnifyWithMinus" | "magnifyWithPlus" | "memory" | "menuDown" | "menuLeft" | "menuRight" | "menuUp" | "merge" | "minimize" | "minus" | "mobile" | "moon" | "namespace" | "nested" | "node" | "offline" | "online" | "package" | "pageSelect" | "pagesSelect" | "partial" | "pause" | "payment" | "pencil" | "percent" | "pin" | "pivot" | "play" | "playFilled" | "plus" | "popout" | "push" | "quote" | "refresh" | "reporter" | "save" | "securitySignal" | "securitySignalDetected" | "securitySignalResolved" | "sessionViewer" | "shard" | "share" | "snowflake" | "sortAscending" | "sortDescending" | "sortLeft" | "sortRight" | "sortable" | "spaces" | "sparkles" | "starPlusEmpty" | "starPlusFilled" | "stats" | "storage" | "submodule" | "sun" | "symlink" | "tableOfContents" | "tag" | "tear" | "timeline" | "timelineWithArrow" | "timeRefresh" | "timeslider" | "training" | "trash" | "unfold" | "unlink" | "user" | "userAvatar" | "users" | "vector" | "videoPlayer" | "wordWrapDisabled" | "wrench" | "tokenAlias" | "tokenAnnotation" | "tokenArray" | "tokenBinary" | "tokenBoolean" | "tokenClass" | "tokenCompletionSuggester" | "tokenConstant" | "tokenDate" | "tokenDenseVector" | "tokenElement" | "tokenEnum" | "tokenEnumMember" | "tokenEvent" | "tokenException" | "tokenField" | "tokenFile" | "tokenFlattened" | "tokenFunction" | "tokenGeo" | "tokenHistogram" | "tokenInterface" | "tokenIP" | "tokenJoin" | "tokenKey" | "tokenKeyword" | "tokenMethod" | "tokenMetricCounter" | "tokenMetricGauge" | "tokenModule" | "tokenNamespace" | "tokenNested" | "tokenNull" | "tokenNumber" | "tokenObject" | "tokenOperator" | "tokenPackage" | "tokenParameter" | "tokenPercolator" | "tokenProperty" | "tokenRange" | "tokenRankFeature" | "tokenRankFeatures" | "tokenRepo" | "tokenSearchType" | "tokenShape" | "tokenString" | "tokenStruct" | "tokenSymbol" | "tokenTag" | "tokenText" | "tokenTokenCount" | "tokenVariable" | "alert" | "addDataApp" | "advancedSettingsApp" | "agentApp" | "apmApp" | "apmTrace" | "appSearchApp" | "arrowDown" | "arrowLeft" | "arrowRight" | "arrowUp" | "auditbeatApp" | "boxesHorizontal" | "boxesVertical" | "canvasApp" | "casesApp" | "classificationJob" | "codeApp" | "consoleApp" | "controlsHorizontal" | "controlsVertical" | "copyClipboard" | "createAdvancedJob" | "createMultiMetricJob" | "createPopulationJob" | "createSingleMetricJob" | "crossClusterReplicationApp" | "dashboardApp" | "dataVisualizer" | "devToolsApp" | "discoverApp" | "editorAlignCenter" | "editorAlignLeft" | "editorAlignRight" | "editorBold" | "editorChecklist" | "editorCodeBlock" | "editorComment" | "editorHeading" | "editorItalic" | "editorLink" | "editorOrderedList" | "editorRedo" | "editorStrike" | "editorTable" | "editorUnderline" | "editorUndo" | "editorUnorderedList" | "emsApp" | "exportAction" | "eyeClosed" | "faceHappy" | "faceNeutral" | "faceSad" | "filebeatApp" | "fleetApp" | "folderCheck" | "folderClosed" | "folderExclamation" | "folderOpen" | "fullScreen" | "gisApp" | "grabHorizontal" | "graphApp" | "grokApp" | "heartbeatApp" | "importAction" | "indexClose" | "indexEdit" | "indexFlush" | "indexManagementApp" | "indexMapping" | "indexOpen" | "indexPatternApp" | "indexRollupApp" | "indexRuntime" | "indexSettings" | "kqlField" | "kqlFunction" | "kqlOperand" | "kqlSelector" | "kqlValue" | "lensApp" | "listAdd" | "logoAWS" | "logoAWSMono" | "logoAerospike" | "logoApache" | "logoAppSearch" | "logoAzure" | "logoAzureMono" | "logoBeats" | "logoBusinessAnalytics" | "logoCeph" | "logoCloud" | "logoCloudEnterprise" | "logoCode" | "logoCodesandbox" | "logoCouchbase" | "logoDocker" | "logoDropwizard" | "logoElastic" | "logoElasticStack" | "logoElasticsearch" | "logoEnterpriseSearch" | "logoEtcd" | "logoGCP" | "logoGCPMono" | "logoGithub" | "logoGmail" | "logoGolang" | "logoGoogleG" | "logoHAproxy" | "logoIBM" | "logoIBMMono" | "logoKafka" | "logoKibana" | "logoKubernetes" | "logoLogging" | "logoLogstash" | "logoMaps" | "logoMemcached" | "logoMetrics" | "logoMongodb" | "logoMySQL" | "logoNginx" | "logoObservability" | "logoOsquery" | "logoPhp" | "logoPostgres" | "logoPrometheus" | "logoRabbitmq" | "logoRedis" | "logoSecurity" | "logoSiteSearch" | "logoSketch" | "logoSlack" | "logoUptime" | "logoVulnerabilityManagement" | "logoWebhook" | "logoWindows" | "logoWorkplaceSearch" | "logsApp" | "logstashFilter" | "logstashIf" | "logstashInput" | "logstashOutput" | "logstashQueue" | "machineLearningApp" | "managementApp" | "mapMarker" | "metricbeatApp" | "metricsApp" | "minusInCircle" | "minusInCircleFilled" | "monitoringApp" | "notebookApp" | "outlierDetectionJob" | "packetbeatApp" | "paperClip" | "pinFilled" | "pipelineApp" | "plusInCircle" | "plusInCircleFilled" | "questionInCircle" | "recentlyViewedApp" | "regressionJob" | "reportingApp" | "returnKey" | "savedObjectsApp" | "searchProfilerApp" | "securityAnalyticsApp" | "securityApp" | "sortDown" | "sortUp" | "spacesApp" | "sqlApp" | "starEmpty" | "starEmptySpace" | "starFilled" | "starFilledSpace" | "starMinusEmpty" | "starMinusFilled" | "stopFilled" | "stopSlash" | "swatchInput" | "tableDensityCompact" | "tableDensityExpanded" | "tableDensityNormal" | "timelionApp" | "upgradeAssistantApp" | "uptimeApp" | "usersRolesApp" | "visArea" | "visAreaStacked" | "visBarHorizontal" | "visBarHorizontalStacked" | "visBarVertical" | "visBarVerticalStacked" | "visGauge" | "visGoal" | "visLine" | "visMapCoordinate" | "visMapRegion" | "visMetric" | "visPie" | "visTable" | "visTagCloud" | "visText" | "visTimelion" | "visVega" | "visVisualBuilder" | "visualizeApp" | "vulnerabilityManagementApp" | "watchesApp" | "workplaceSearchApp")[];
+	export const TYPES: ("string" | "number" | "function" | "search" | "link" | "article" | "menu" | "filter" | "image" | "stop" | "key" | "temperature" | "color" | "warning" | "scale" | "wordWrap" | "grid" | "error" | "invert" | "empty" | "accessibility" | "aggregate" | "analyzeEvent" | "annotation" | "apps" | "arrowStart" | "arrowEnd" | "asterisk" | "at" | "beaker" | "bell" | "bellSlash" | "beta" | "bolt" | "branch" | "branchUser" | "broom" | "brush" | "bug" | "bullseye" | "calendar" | "check" | "checkInCircleFilled" | "cheer" | "clock" | "cloudDrizzle" | "cloudStormy" | "cloudSunny" | "cluster" | "compute" | "console" | "container" | "continuityAbove" | "continuityAboveBelow" | "continuityBelow" | "continuityWithin" | "copy" | "cross" | "crosshairs" | "currency" | "cut" | "database" | "desktop" | "discuss" | "document" | "documentEdit" | "documentation" | "documents" | "dot" | "dotInCircle" | "doubleArrowLeft" | "doubleArrowRight" | "download" | "editorDistributeHorizontal" | "editorDistributeVertical" | "editorItemAlignBottom" | "editorItemAlignCenter" | "editorItemAlignLeft" | "editorItemAlignMiddle" | "editorItemAlignRight" | "editorItemAlignTop" | "editorPositionBottomLeft" | "editorPositionBottomRight" | "editorPositionTopLeft" | "editorPositionTopRight" | "email" | "eql" | "eraser" | "exit" | "expand" | "expandMini" | "eye" | "filterExclude" | "filterIgnore" | "filterInclude" | "filterInCircle" | "flag" | "fold" | "frameNext" | "framePrevious" | "fullScreenExit" | "gear" | "glasses" | "globe" | "grab" | "heart" | "heatmap" | "help" | "home" | "iInCircle" | "indexTemporary" | "infinity" | "inputOutput" | "inspect" | "ip" | "keyboard" | "kubernetesNode" | "kubernetesPod" | "launch" | "layers" | "lettering" | "lineDashed" | "lineDotted" | "lineSolid" | "list" | "lock" | "lockOpen" | "magnet" | "magnifyWithExclamation" | "magnifyWithMinus" | "magnifyWithPlus" | "memory" | "menuDown" | "menuLeft" | "menuRight" | "menuUp" | "merge" | "minimize" | "minus" | "mobile" | "moon" | "namespace" | "nested" | "node" | "offline" | "online" | "package" | "pageSelect" | "pagesSelect" | "partial" | "pause" | "payment" | "pencil" | "percent" | "pin" | "pivot" | "play" | "playFilled" | "plus" | "popout" | "push" | "quote" | "refresh" | "reporter" | "save" | "securitySignal" | "securitySignalDetected" | "securitySignalResolved" | "sessionViewer" | "shard" | "share" | "snowflake" | "sortAscending" | "sortDescending" | "sortLeft" | "sortRight" | "sortable" | "spaces" | "sparkles" | "starPlusEmpty" | "starPlusFilled" | "stats" | "storage" | "submodule" | "sun" | "symlink" | "tableOfContents" | "tag" | "tear" | "timeline" | "timelineWithArrow" | "timeRefresh" | "timeslider" | "training" | "trash" | "unfold" | "unlink" | "user" | "userAvatar" | "users" | "vector" | "videoPlayer" | "wordWrapDisabled" | "wrench" | "tokenAlias" | "tokenAnnotation" | "tokenArray" | "tokenBinary" | "tokenBoolean" | "tokenClass" | "tokenCompletionSuggester" | "tokenConstant" | "tokenDate" | "tokenDenseVector" | "tokenElement" | "tokenEnum" | "tokenEnumMember" | "tokenEvent" | "tokenException" | "tokenField" | "tokenFile" | "tokenFlattened" | "tokenFunction" | "tokenGeo" | "tokenHistogram" | "tokenInterface" | "tokenIP" | "tokenJoin" | "tokenKey" | "tokenKeyword" | "tokenMethod" | "tokenMetricCounter" | "tokenMetricGauge" | "tokenModule" | "tokenNamespace" | "tokenNested" | "tokenNull" | "tokenNumber" | "tokenObject" | "tokenOperator" | "tokenPackage" | "tokenParameter" | "tokenPercolator" | "tokenProperty" | "tokenRange" | "tokenRankFeature" | "tokenRankFeatures" | "tokenRepo" | "tokenSearchType" | "tokenShape" | "tokenString" | "tokenStruct" | "tokenSymbol" | "tokenTag" | "tokenText" | "tokenTokenCount" | "tokenVariable" | "alert" | "addDataApp" | "advancedSettingsApp" | "agentApp" | "apmApp" | "apmTrace" | "appSearchApp" | "arrowDown" | "arrowLeft" | "arrowRight" | "arrowUp" | "auditbeatApp" | "boxesHorizontal" | "boxesVertical" | "canvasApp" | "casesApp" | "classificationJob" | "codeApp" | "consoleApp" | "controlsHorizontal" | "controlsVertical" | "copyClipboard" | "createAdvancedJob" | "createMultiMetricJob" | "createPopulationJob" | "createSingleMetricJob" | "crossClusterReplicationApp" | "dashboardApp" | "dataVisualizer" | "devToolsApp" | "discoverApp" | "editorAlignCenter" | "editorAlignLeft" | "editorAlignRight" | "editorBold" | "editorChecklist" | "editorCodeBlock" | "editorComment" | "editorHeading" | "editorItalic" | "editorLink" | "editorOrderedList" | "editorRedo" | "editorStrike" | "editorTable" | "editorUnderline" | "editorUndo" | "editorUnorderedList" | "emsApp" | "exportAction" | "eyeClosed" | "faceHappy" | "faceNeutral" | "faceSad" | "filebeatApp" | "fleetApp" | "folderCheck" | "folderClosed" | "folderExclamation" | "folderOpen" | "fullScreen" | "gisApp" | "grabHorizontal" | "graphApp" | "grokApp" | "heartbeatApp" | "importAction" | "indexClose" | "indexEdit" | "indexFlush" | "indexManagementApp" | "indexMapping" | "indexOpen" | "indexPatternApp" | "indexRollupApp" | "indexRuntime" | "indexSettings" | "kqlField" | "kqlFunction" | "kqlOperand" | "kqlSelector" | "kqlValue" | "lensApp" | "listAdd" | "logoAWS" | "logoAWSMono" | "logoAerospike" | "logoApache" | "logoAppSearch" | "logoAzure" | "logoAzureMono" | "logoBeats" | "logoBusinessAnalytics" | "logoCeph" | "logoCloud" | "logoCloudEnterprise" | "logoCode" | "logoCodesandbox" | "logoCouchbase" | "logoDocker" | "logoDropwizard" | "logoElastic" | "logoElasticStack" | "logoElasticsearch" | "logoEnterpriseSearch" | "logoEtcd" | "logoGCP" | "logoGCPMono" | "logoGithub" | "logoGmail" | "logoGolang" | "logoGoogleG" | "logoHAproxy" | "logoIBM" | "logoIBMMono" | "logoKafka" | "logoKibana" | "logoKubernetes" | "logoLogging" | "logoLogstash" | "logoMaps" | "logoMemcached" | "logoMetrics" | "logoMongodb" | "logoMySQL" | "logoNginx" | "logoObservability" | "logoOsquery" | "logoPhp" | "logoPostgres" | "logoPrometheus" | "logoRabbitmq" | "logoRedis" | "logoSecurity" | "logoSiteSearch" | "logoSketch" | "logoSlack" | "logoUptime" | "logoVulnerabilityManagement" | "logoWebhook" | "logoWindows" | "logoWorkplaceSearch" | "logsApp" | "logstashFilter" | "logstashIf" | "logstashInput" | "logstashOutput" | "logstashQueue" | "machineLearningApp" | "managementApp" | "mapMarker" | "metricbeatApp" | "metricsApp" | "minusInCircle" | "minusInCircleFilled" | "monitoringApp" | "notebookApp" | "outlierDetectionJob" | "packetbeatApp" | "paperClip" | "pinFilled" | "pipelineApp" | "plusInCircle" | "plusInCircleFilled" | "questionInCircle" | "recentlyViewedApp" | "regressionJob" | "reportingApp" | "returnKey" | "savedObjectsApp" | "searchProfilerApp" | "securityAnalyticsApp" | "securityApp" | "sortDown" | "sortUp" | "spacesApp" | "sqlApp" | "starEmpty" | "starEmptySpace" | "starFilled" | "starFilledSpace" | "starMinusEmpty" | "starMinusFilled" | "stopFilled" | "stopSlash" | "swatchInput" | "tableDensityCompact" | "tableDensityExpanded" | "tableDensityNormal" | "timelionApp" | "upgradeAssistantApp" | "uptimeApp" | "usersRolesApp" | "visArea" | "visAreaStacked" | "visBarHorizontal" | "visBarHorizontalStacked" | "visBarVertical" | "visBarVerticalStacked" | "visGauge" | "visGoal" | "visLine" | "visMapCoordinate" | "visMapRegion" | "visMetric" | "visPie" | "visTable" | "visTagCloud" | "visText" | "visTimelion" | "visVega" | "visVisualBuilder" | "visualizeApp" | "vulnerabilityManagementApp" | "watchesApp" | "workplaceSearchApp")[];
 	export type EuiIconType = keyof typeof typeToPathMap;
 	export type IconType = EuiIconType | string | ComponentType;
 	export type IconColor = string | NamedColor;
@@ -1773,7 +2307,7 @@ declare module '@elastic/eui/src/components/icon/icon' {
 	    isLoading: boolean;
 	    neededLoading: boolean;
 	}
-	export const clearIconComponentCache: (iconType?: "string" | "number" | "function" | "article" | "link" | "menu" | "filter" | "image" | "stop" | "search" | "temperature" | "color" | "warning" | "empty" | "scale" | "wordWrap" | "grid" | "accessibility" | "aggregate" | "analyzeEvent" | "annotation" | "apps" | "arrowStart" | "arrowEnd" | "asterisk" | "beaker" | "bell" | "bellSlash" | "beta" | "bolt" | "branch" | "branchUser" | "broom" | "brush" | "bug" | "bullseye" | "calendar" | "check" | "checkInCircleFilled" | "cheer" | "clock" | "cloudDrizzle" | "cloudStormy" | "cloudSunny" | "cluster" | "compute" | "console" | "container" | "continuityAbove" | "continuityAboveBelow" | "continuityBelow" | "continuityWithin" | "copy" | "cross" | "crosshairs" | "currency" | "cut" | "database" | "desktop" | "discuss" | "document" | "documentEdit" | "documentation" | "documents" | "dot" | "dotInCircle" | "doubleArrowLeft" | "doubleArrowRight" | "download" | "editorDistributeHorizontal" | "editorDistributeVertical" | "editorItemAlignBottom" | "editorItemAlignCenter" | "editorItemAlignLeft" | "editorItemAlignMiddle" | "editorItemAlignRight" | "editorItemAlignTop" | "editorPositionBottomLeft" | "editorPositionBottomRight" | "editorPositionTopLeft" | "editorPositionTopRight" | "email" | "eql" | "eraser" | "error" | "exit" | "expand" | "expandMini" | "eye" | "filterExclude" | "filterIgnore" | "filterInclude" | "filterInCircle" | "flag" | "fold" | "frameNext" | "framePrevious" | "fullScreenExit" | "gear" | "glasses" | "globe" | "grab" | "heart" | "heatmap" | "help" | "home" | "iInCircle" | "indexTemporary" | "infinity" | "inputOutput" | "inspect" | "invert" | "ip" | "keyboard" | "kubernetesNode" | "kubernetesPod" | "launch" | "layers" | "lettering" | "lineDashed" | "lineDotted" | "lineSolid" | "list" | "lock" | "lockOpen" | "magnet" | "magnifyWithExclamation" | "magnifyWithMinus" | "magnifyWithPlus" | "memory" | "menuDown" | "menuLeft" | "menuRight" | "menuUp" | "merge" | "minimize" | "minus" | "mobile" | "moon" | "namespace" | "nested" | "node" | "offline" | "online" | "package" | "pageSelect" | "pagesSelect" | "partial" | "pause" | "payment" | "pencil" | "percent" | "pin" | "pivot" | "play" | "playFilled" | "plus" | "popout" | "push" | "quote" | "refresh" | "reporter" | "save" | "securitySignal" | "securitySignalDetected" | "securitySignalResolved" | "sessionViewer" | "shard" | "share" | "snowflake" | "sortAscending" | "sortDescending" | "sortLeft" | "sortRight" | "sortable" | "spaces" | "sparkles" | "starPlusEmpty" | "starPlusFilled" | "stats" | "storage" | "submodule" | "sun" | "symlink" | "tableOfContents" | "tag" | "tear" | "timeline" | "timelineWithArrow" | "timeRefresh" | "timeslider" | "training" | "trash" | "unfold" | "unlink" | "user" | "userAvatar" | "users" | "vector" | "videoPlayer" | "wordWrapDisabled" | "wrench" | "tokenAlias" | "tokenAnnotation" | "tokenArray" | "tokenBinary" | "tokenBoolean" | "tokenClass" | "tokenCompletionSuggester" | "tokenConstant" | "tokenDate" | "tokenDenseVector" | "tokenElement" | "tokenEnum" | "tokenEnumMember" | "tokenEvent" | "tokenException" | "tokenField" | "tokenFile" | "tokenFlattened" | "tokenFunction" | "tokenGeo" | "tokenHistogram" | "tokenInterface" | "tokenIP" | "tokenJoin" | "tokenKey" | "tokenKeyword" | "tokenMethod" | "tokenMetricCounter" | "tokenMetricGauge" | "tokenModule" | "tokenNamespace" | "tokenNested" | "tokenNull" | "tokenNumber" | "tokenObject" | "tokenOperator" | "tokenPackage" | "tokenParameter" | "tokenPercolator" | "tokenProperty" | "tokenRange" | "tokenRankFeature" | "tokenRankFeatures" | "tokenRepo" | "tokenSearchType" | "tokenShape" | "tokenString" | "tokenStruct" | "tokenSymbol" | "tokenTag" | "tokenText" | "tokenTokenCount" | "tokenVariable" | "alert" | "addDataApp" | "advancedSettingsApp" | "agentApp" | "apmApp" | "apmTrace" | "appSearchApp" | "arrowDown" | "arrowLeft" | "arrowRight" | "arrowUp" | "auditbeatApp" | "boxesHorizontal" | "boxesVertical" | "canvasApp" | "casesApp" | "classificationJob" | "codeApp" | "consoleApp" | "controlsHorizontal" | "controlsVertical" | "copyClipboard" | "createAdvancedJob" | "createMultiMetricJob" | "createPopulationJob" | "createSingleMetricJob" | "crossClusterReplicationApp" | "dashboardApp" | "dataVisualizer" | "devToolsApp" | "discoverApp" | "editorAlignCenter" | "editorAlignLeft" | "editorAlignRight" | "editorBold" | "editorChecklist" | "editorCodeBlock" | "editorComment" | "editorHeading" | "editorItalic" | "editorLink" | "editorOrderedList" | "editorRedo" | "editorStrike" | "editorTable" | "editorUnderline" | "editorUndo" | "editorUnorderedList" | "emsApp" | "exportAction" | "eyeClosed" | "faceHappy" | "faceNeutral" | "faceSad" | "filebeatApp" | "fleetApp" | "folderCheck" | "folderClosed" | "folderExclamation" | "folderOpen" | "fullScreen" | "gisApp" | "grabHorizontal" | "graphApp" | "grokApp" | "heartbeatApp" | "importAction" | "indexClose" | "indexEdit" | "indexFlush" | "indexManagementApp" | "indexMapping" | "indexOpen" | "indexPatternApp" | "indexRollupApp" | "indexRuntime" | "indexSettings" | "kqlField" | "kqlFunction" | "kqlOperand" | "kqlSelector" | "kqlValue" | "lensApp" | "listAdd" | "logoAWS" | "logoAWSMono" | "logoAerospike" | "logoApache" | "logoAppSearch" | "logoAzure" | "logoAzureMono" | "logoBeats" | "logoBusinessAnalytics" | "logoCeph" | "logoCloud" | "logoCloudEnterprise" | "logoCode" | "logoCodesandbox" | "logoCouchbase" | "logoDocker" | "logoDropwizard" | "logoElastic" | "logoElasticStack" | "logoElasticsearch" | "logoEnterpriseSearch" | "logoEtcd" | "logoGCP" | "logoGCPMono" | "logoGithub" | "logoGmail" | "logoGolang" | "logoGoogleG" | "logoHAproxy" | "logoIBM" | "logoIBMMono" | "logoKafka" | "logoKibana" | "logoKubernetes" | "logoLogging" | "logoLogstash" | "logoMaps" | "logoMemcached" | "logoMetrics" | "logoMongodb" | "logoMySQL" | "logoNginx" | "logoObservability" | "logoOsquery" | "logoPhp" | "logoPostgres" | "logoPrometheus" | "logoRabbitmq" | "logoRedis" | "logoSecurity" | "logoSiteSearch" | "logoSketch" | "logoSlack" | "logoUptime" | "logoVulnerabilityManagement" | "logoWebhook" | "logoWindows" | "logoWorkplaceSearch" | "logsApp" | "logstashFilter" | "logstashIf" | "logstashInput" | "logstashOutput" | "logstashQueue" | "machineLearningApp" | "managementApp" | "mapMarker" | "metricbeatApp" | "metricsApp" | "minusInCircle" | "minusInCircleFilled" | "monitoringApp" | "notebookApp" | "outlierDetectionJob" | "packetbeatApp" | "paperClip" | "pinFilled" | "pipelineApp" | "plusInCircle" | "plusInCircleFilled" | "questionInCircle" | "recentlyViewedApp" | "regressionJob" | "reportingApp" | "returnKey" | "savedObjectsApp" | "searchProfilerApp" | "securityAnalyticsApp" | "securityApp" | "sortDown" | "sortUp" | "spacesApp" | "sqlApp" | "starEmpty" | "starEmptySpace" | "starFilled" | "starFilledSpace" | "starMinusEmpty" | "starMinusFilled" | "stopFilled" | "stopSlash" | "swatchInput" | "tableDensityCompact" | "tableDensityExpanded" | "tableDensityNormal" | "timelionApp" | "upgradeAssistantApp" | "uptimeApp" | "usersRolesApp" | "visArea" | "visAreaStacked" | "visBarHorizontal" | "visBarHorizontalStacked" | "visBarVertical" | "visBarVerticalStacked" | "visGauge" | "visGoal" | "visLine" | "visMapCoordinate" | "visMapRegion" | "visMetric" | "visPie" | "visTable" | "visTagCloud" | "visText" | "visTimelion" | "visVega" | "visVisualBuilder" | "visualizeApp" | "vulnerabilityManagementApp" | "watchesApp" | "workplaceSearchApp" | undefined) => void;
+	export const clearIconComponentCache: (iconType?: "string" | "number" | "function" | "search" | "link" | "article" | "menu" | "filter" | "image" | "stop" | "key" | "temperature" | "color" | "warning" | "scale" | "wordWrap" | "grid" | "error" | "invert" | "empty" | "accessibility" | "aggregate" | "analyzeEvent" | "annotation" | "apps" | "arrowStart" | "arrowEnd" | "asterisk" | "at" | "beaker" | "bell" | "bellSlash" | "beta" | "bolt" | "branch" | "branchUser" | "broom" | "brush" | "bug" | "bullseye" | "calendar" | "check" | "checkInCircleFilled" | "cheer" | "clock" | "cloudDrizzle" | "cloudStormy" | "cloudSunny" | "cluster" | "compute" | "console" | "container" | "continuityAbove" | "continuityAboveBelow" | "continuityBelow" | "continuityWithin" | "copy" | "cross" | "crosshairs" | "currency" | "cut" | "database" | "desktop" | "discuss" | "document" | "documentEdit" | "documentation" | "documents" | "dot" | "dotInCircle" | "doubleArrowLeft" | "doubleArrowRight" | "download" | "editorDistributeHorizontal" | "editorDistributeVertical" | "editorItemAlignBottom" | "editorItemAlignCenter" | "editorItemAlignLeft" | "editorItemAlignMiddle" | "editorItemAlignRight" | "editorItemAlignTop" | "editorPositionBottomLeft" | "editorPositionBottomRight" | "editorPositionTopLeft" | "editorPositionTopRight" | "email" | "eql" | "eraser" | "exit" | "expand" | "expandMini" | "eye" | "filterExclude" | "filterIgnore" | "filterInclude" | "filterInCircle" | "flag" | "fold" | "frameNext" | "framePrevious" | "fullScreenExit" | "gear" | "glasses" | "globe" | "grab" | "heart" | "heatmap" | "help" | "home" | "iInCircle" | "indexTemporary" | "infinity" | "inputOutput" | "inspect" | "ip" | "keyboard" | "kubernetesNode" | "kubernetesPod" | "launch" | "layers" | "lettering" | "lineDashed" | "lineDotted" | "lineSolid" | "list" | "lock" | "lockOpen" | "magnet" | "magnifyWithExclamation" | "magnifyWithMinus" | "magnifyWithPlus" | "memory" | "menuDown" | "menuLeft" | "menuRight" | "menuUp" | "merge" | "minimize" | "minus" | "mobile" | "moon" | "namespace" | "nested" | "node" | "offline" | "online" | "package" | "pageSelect" | "pagesSelect" | "partial" | "pause" | "payment" | "pencil" | "percent" | "pin" | "pivot" | "play" | "playFilled" | "plus" | "popout" | "push" | "quote" | "refresh" | "reporter" | "save" | "securitySignal" | "securitySignalDetected" | "securitySignalResolved" | "sessionViewer" | "shard" | "share" | "snowflake" | "sortAscending" | "sortDescending" | "sortLeft" | "sortRight" | "sortable" | "spaces" | "sparkles" | "starPlusEmpty" | "starPlusFilled" | "stats" | "storage" | "submodule" | "sun" | "symlink" | "tableOfContents" | "tag" | "tear" | "timeline" | "timelineWithArrow" | "timeRefresh" | "timeslider" | "training" | "trash" | "unfold" | "unlink" | "user" | "userAvatar" | "users" | "vector" | "videoPlayer" | "wordWrapDisabled" | "wrench" | "tokenAlias" | "tokenAnnotation" | "tokenArray" | "tokenBinary" | "tokenBoolean" | "tokenClass" | "tokenCompletionSuggester" | "tokenConstant" | "tokenDate" | "tokenDenseVector" | "tokenElement" | "tokenEnum" | "tokenEnumMember" | "tokenEvent" | "tokenException" | "tokenField" | "tokenFile" | "tokenFlattened" | "tokenFunction" | "tokenGeo" | "tokenHistogram" | "tokenInterface" | "tokenIP" | "tokenJoin" | "tokenKey" | "tokenKeyword" | "tokenMethod" | "tokenMetricCounter" | "tokenMetricGauge" | "tokenModule" | "tokenNamespace" | "tokenNested" | "tokenNull" | "tokenNumber" | "tokenObject" | "tokenOperator" | "tokenPackage" | "tokenParameter" | "tokenPercolator" | "tokenProperty" | "tokenRange" | "tokenRankFeature" | "tokenRankFeatures" | "tokenRepo" | "tokenSearchType" | "tokenShape" | "tokenString" | "tokenStruct" | "tokenSymbol" | "tokenTag" | "tokenText" | "tokenTokenCount" | "tokenVariable" | "alert" | "addDataApp" | "advancedSettingsApp" | "agentApp" | "apmApp" | "apmTrace" | "appSearchApp" | "arrowDown" | "arrowLeft" | "arrowRight" | "arrowUp" | "auditbeatApp" | "boxesHorizontal" | "boxesVertical" | "canvasApp" | "casesApp" | "classificationJob" | "codeApp" | "consoleApp" | "controlsHorizontal" | "controlsVertical" | "copyClipboard" | "createAdvancedJob" | "createMultiMetricJob" | "createPopulationJob" | "createSingleMetricJob" | "crossClusterReplicationApp" | "dashboardApp" | "dataVisualizer" | "devToolsApp" | "discoverApp" | "editorAlignCenter" | "editorAlignLeft" | "editorAlignRight" | "editorBold" | "editorChecklist" | "editorCodeBlock" | "editorComment" | "editorHeading" | "editorItalic" | "editorLink" | "editorOrderedList" | "editorRedo" | "editorStrike" | "editorTable" | "editorUnderline" | "editorUndo" | "editorUnorderedList" | "emsApp" | "exportAction" | "eyeClosed" | "faceHappy" | "faceNeutral" | "faceSad" | "filebeatApp" | "fleetApp" | "folderCheck" | "folderClosed" | "folderExclamation" | "folderOpen" | "fullScreen" | "gisApp" | "grabHorizontal" | "graphApp" | "grokApp" | "heartbeatApp" | "importAction" | "indexClose" | "indexEdit" | "indexFlush" | "indexManagementApp" | "indexMapping" | "indexOpen" | "indexPatternApp" | "indexRollupApp" | "indexRuntime" | "indexSettings" | "kqlField" | "kqlFunction" | "kqlOperand" | "kqlSelector" | "kqlValue" | "lensApp" | "listAdd" | "logoAWS" | "logoAWSMono" | "logoAerospike" | "logoApache" | "logoAppSearch" | "logoAzure" | "logoAzureMono" | "logoBeats" | "logoBusinessAnalytics" | "logoCeph" | "logoCloud" | "logoCloudEnterprise" | "logoCode" | "logoCodesandbox" | "logoCouchbase" | "logoDocker" | "logoDropwizard" | "logoElastic" | "logoElasticStack" | "logoElasticsearch" | "logoEnterpriseSearch" | "logoEtcd" | "logoGCP" | "logoGCPMono" | "logoGithub" | "logoGmail" | "logoGolang" | "logoGoogleG" | "logoHAproxy" | "logoIBM" | "logoIBMMono" | "logoKafka" | "logoKibana" | "logoKubernetes" | "logoLogging" | "logoLogstash" | "logoMaps" | "logoMemcached" | "logoMetrics" | "logoMongodb" | "logoMySQL" | "logoNginx" | "logoObservability" | "logoOsquery" | "logoPhp" | "logoPostgres" | "logoPrometheus" | "logoRabbitmq" | "logoRedis" | "logoSecurity" | "logoSiteSearch" | "logoSketch" | "logoSlack" | "logoUptime" | "logoVulnerabilityManagement" | "logoWebhook" | "logoWindows" | "logoWorkplaceSearch" | "logsApp" | "logstashFilter" | "logstashIf" | "logstashInput" | "logstashOutput" | "logstashQueue" | "machineLearningApp" | "managementApp" | "mapMarker" | "metricbeatApp" | "metricsApp" | "minusInCircle" | "minusInCircleFilled" | "monitoringApp" | "notebookApp" | "outlierDetectionJob" | "packetbeatApp" | "paperClip" | "pinFilled" | "pipelineApp" | "plusInCircle" | "plusInCircleFilled" | "questionInCircle" | "recentlyViewedApp" | "regressionJob" | "reportingApp" | "returnKey" | "savedObjectsApp" | "searchProfilerApp" | "securityAnalyticsApp" | "securityApp" | "sortDown" | "sortUp" | "spacesApp" | "sqlApp" | "starEmpty" | "starEmptySpace" | "starFilled" | "starFilledSpace" | "starMinusEmpty" | "starMinusFilled" | "stopFilled" | "stopSlash" | "swatchInput" | "tableDensityCompact" | "tableDensityExpanded" | "tableDensityNormal" | "timelionApp" | "upgradeAssistantApp" | "uptimeApp" | "usersRolesApp" | "visArea" | "visAreaStacked" | "visBarHorizontal" | "visBarHorizontalStacked" | "visBarVertical" | "visBarVerticalStacked" | "visGauge" | "visGoal" | "visLine" | "visMapCoordinate" | "visMapRegion" | "visMetric" | "visPie" | "visTable" | "visTagCloud" | "visText" | "visTimelion" | "visVega" | "visVisualBuilder" | "visualizeApp" | "vulnerabilityManagementApp" | "watchesApp" | "workplaceSearchApp" | undefined) => void;
 	export const appendIconComponentCache: (iconTypeToIconComponentMap: {
 	    [iconType: string]: React.ComponentType<{}>;
 	}) => void;
@@ -3830,7 +4364,7 @@ declare module '@elastic/eui/src/components/panel/panel' {
 	import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, Ref } from 'react';
 	import { _EuiBackgroundColor, EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
-	export const SIZES: readonly ["none", "xs", "s", "m", "l", "xl"]; const _SIZES: ("s" | "xs" | "m" | "l" | "xl" | "none")[];
+	export const SIZES: readonly ["none", "xs", "s", "m", "l", "xl"]; const _SIZES: ("xs" | "s" | "m" | "l" | "xl" | "none")[];
 	export type PanelPaddingSize = (typeof _SIZES)[number];
 	export const BORDER_RADII: readonly ["none", "m"];
 	export type PanelBorderRadius = (typeof BORDER_RADII)[number];
@@ -4692,7 +5226,6 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	import { Component, KeyboardEvent, CSSProperties, HTMLAttributes, ReactNode, Ref, RefCallback } from 'react';
 	import { CommonProps, NoArgCallback } from '@elastic/eui/src/components/common';
 	import { FocusTarget, EuiFocusTrapProps } from '@elastic/eui/src/components/focus_trap';
-	import { ReactFocusOnProps } from 'react-focus-on/dist/es5/types';
 	import { EuiPopoverPosition } from '@elastic/eui/src/services/popover';
 	import { EuiPopoverArrowPositions } from '@elastic/eui/src/components/popover/popover_arrow';
 	import { EuiPopoverPanelProps } from '@elastic/eui/src/components/popover/popover_panel/_popover_panel';
@@ -4734,7 +5267,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    /**
 	     * Object of props passed to EuiFocusTrap
 	     */
-	    focusTrapProps?: Pick<EuiFocusTrapProps, 'clickOutsideDisables' | 'onClickOutside' | 'noIsolation' | 'scrollLock' | 'shards'>;
+	    focusTrapProps?: Partial<EuiFocusTrapProps>;
 	    /**
 	     * Show arrow indicating to originating button
 	     */
@@ -4805,10 +5338,6 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	     * component; pass `zIndex` to override
 	     */
 	    zIndex?: number;
-	    /**
-	     * Function callback for when the focus trap is deactivated
-	     */
-	    onTrapDeactivation?: ReactFocusOnProps['onDeactivation'];
 	    /**
 	     * Distance away from the anchor that the popover will render
 	     */
@@ -5044,12 +5573,30 @@ declare module '@elastic/eui/src/components/form/range/range_levels_colors' {
 	export const euiRangeLevelColor: (color: EuiRangeLevelColor | string, euiTheme: UseEuiTheme['euiTheme']) => string;
 	export const getLevelColor: (levels: EuiRangeLevel[], value: number) => "primary" | "success" | "warning" | "danger" | import("csstype").Property.Color | undefined;
 
+}
+declare module '@elastic/eui/src/components/form/range/range_input.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiRangeInputStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiRangeInput: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/form/range/range_input' {
+	import { FunctionComponent } from 'react';
+	import { EuiFieldNumberProps } from '@elastic/eui/src/components/form/field_number';
+	import type { _SingleRangeValue, _SharedRangeInputSide } from '@elastic/eui/src/components/form/range/types';
+	export interface EuiRangeInputProps extends Omit<EuiFieldNumberProps, 'max' | 'min' | 'value' | 'step'>, Omit<_SingleRangeValue, 'onChange'>, _SharedRangeInputSide {
+	    autoSize?: boolean;
+	}
+	export const EuiRangeInput: FunctionComponent<EuiRangeInputProps>;
+
 }
 declare module '@elastic/eui/src/components/form/range/types' {
 	import type { ReactNode, CSSProperties, InputHTMLAttributes } from 'react';
 	import type { CommonProps } from '@elastic/eui/src/components/common';
 	import type { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout';
 	import type { EuiRangeLevelColor } from '@elastic/eui/src/components/form/range/range_levels_colors';
+	import { EuiRangeInputProps } from '@elastic/eui/src/components/form/range/range_input';
 	/**
 	 * Internal type atoms split up both for easier categorization
 	 * and for easier reusing/picking
@@ -5194,7 +5741,7 @@ declare module '@elastic/eui/src/components/form/range/types' {
 	    /**
 	     * Intended to be used with aria attributes. Some attributes may be overwritten.
 	     */
-	    minInputProps?: Omit<InputHTMLAttributes<HTMLInputElement>, 'max' | 'min' | 'value' | 'step' | 'disabled' | 'readonly' | 'name' | 'onChange' | 'onFocus' | 'onBlur' | 'onKeyDown' | 'onMouseDown'>;
+	    minInputProps?: Partial<Omit<EuiRangeInputProps, 'max' | 'min' | 'step' | 'compressed' | 'autoSize' | 'fullWidth' | 'controlOnly'>>;
 	    /**
 	     *  Intended to be used with aria attributes. Some attributes may be overwritten.
 	     */
@@ -5338,23 +5885,6 @@ declare module '@elastic/eui/src/components/form/range/range_highlight' {
 	}
 	export const EuiRangeHighlight: FunctionComponent<EuiRangeHighlightProps>;
 
-}
-declare module '@elastic/eui/src/components/form/range/range_input.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiRangeInputStyles: ({ euiTheme }: UseEuiTheme) => {
-	    euiRangeInput: import("@emotion/utils").SerializedStyles;
-	};
-
-}
-declare module '@elastic/eui/src/components/form/range/range_input' {
-	import { FunctionComponent } from 'react';
-	import { EuiFieldNumberProps } from '@elastic/eui/src/components/form/field_number';
-	import type { _SingleRangeValue, _SharedRangeInputSide } from '@elastic/eui/src/components/form/range/types';
-	export interface EuiRangeInputProps extends Omit<EuiFieldNumberProps, 'max' | 'min' | 'value' | 'step'>, Omit<_SingleRangeValue, 'onChange'>, _SharedRangeInputSide {
-	    autoSize?: boolean;
-	}
-	export const EuiRangeInput: FunctionComponent<EuiRangeInputProps>;
-
 }
 declare module '@elastic/eui/src/components/form/range/range_label.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -6722,453 +7252,128 @@ declare module '@elastic/eui/src/services/color/manipulation' {
 	export const tint: (color: string, ratio: number) => string;
 	/**
 	 * Mixes a provided color with black.
-	 * @param color - Color to mix with black
-	 * @param ratio - Mix weight. From 0-1. Larger value indicates more black.
-	 */
-	export const shade: (color: string, ratio: number) => string;
-	/**
-	 * Returns the tinted color for light mode and shaded color for dark mode
-	 * @param color - Color to mix with white
-	 * @param ratio - Mix weight. From 0-1. Larger value indicates more white.
-	 * @param colorMode - Light or dark only
-	 */
-	export const tintOrShade: (color: string, ratio: number, colorMode: EuiThemeColorModeStandard) => string;
-	/**
-	 * Returns the shaded color for light mode and tinted color for dark mode
-	 * @param color - Color to mix with white
-	 * @param ratio - Mix weight. From 0-1. Larger value indicates more white.
-	 * @param colorMode - Light or dark only
-	 */
-	export const shadeOrTint: (color: string, ratio: number, colorMode: EuiThemeColorModeStandard) => string;
-	/**
-	 * Increases the saturation of a color by manipulating the hsl saturation.
-	 * @param color - Color to manipulate
-	 * @param amount - Amount to change in absolute terms. 0-1.
-	 */
-	export const saturate: (color: string, amount: number) => string;
-	/**
-	 * Decreases the saturation of a color by manipulating the hsl saturation.
-	 * @param color - Color to manipulate
-	 * @param amount - Amount to change in absolute terms. 0-1.
-	 */
-	export const desaturate: (color: string, amount: number) => string;
-	/**
-	 * Returns the lightness value of a color. 0-100
-	 * @param color
-	 */
-	export const lightness: (color: string) => number;
-	/**
-	 * Returns the darken value of a color. 0-100
-	 * @param color - Color to manipulate
-	 * @param amount - Amount to change in absolute terms. 0-1.
-	 */
-	export const darken: (color: string, amount: number) => string;
-	/**
-	 * Returns the brighten value of a color. 0-100
-	 * @param color - Color to manipulate
-	 * @param amount - Amount to change in absolute terms. 0-1.
-	 */
-	export const brighten: (color: string, amount: number) => string;
-
-}
-declare module '@elastic/eui/src/services/color/contrast' {
-	export const wcagContrastMin = 4.5;
-	/**
-	 * Creates a new color that meets or exceeds WCAG level AA
-	 * @param foreground - Color to manipulate
-	 * @param ratio - Amount to change in absolute terms. 0-10.
-	 * *
-	 * @param themeOrBackground - Color to use as the contrast basis or just pass EuiTheme
-	 */
-	export const makeHighContrastColor: (_foreground: string, ratio?: number) => (themeOrBackground: string | {
-	    [key: string]: any;
-	    colors: {
-	        body: string;
-	    };
-	}) => string;
-	/**
-	 * Creates a new color with increased contrast
-	 * Disabled content only needs a contrast of at least 2 because there is no interaction available
-	 * @param foreground - Color to manipulate
-	 * @param ratio - Amount to change in absolute terms. 0-10.
-	 * *
-	 * @param themeOrBackground - Color to use as the contrast basis
-	 */
-	export const makeDisabledContrastColor: (color: string, ratio?: number) => (themeOrBackground: string | {
-	    [key: string]: any;
-	    colors: {
-	        body: string;
-	    };
-	}) => string;
-
-}
-declare module '@elastic/eui/src/services/color' {
-	export { isColorDark } from '@elastic/eui/src/services/color/is_color_dark';
-	export { isValidHex } from '@elastic/eui/src/services/color/is_valid_hex';
-	export { hexToHsv } from '@elastic/eui/src/services/color/hex_to_hsv';
-	export { hexToRgb } from '@elastic/eui/src/services/color/hex_to_rgb';
-	export { hsvToHex } from '@elastic/eui/src/services/color/hsv_to_hex';
-	export { hsvToRgb } from '@elastic/eui/src/services/color/hsv_to_rgb';
-	export { rgbToHex } from '@elastic/eui/src/services/color/rgb_to_hex';
-	export { rgbToHsv } from '@elastic/eui/src/services/color/rgb_to_hsv';
-	export { calculateContrast, calculateLuminance, } from '@elastic/eui/src/services/color/luminance_and_contrast';
-	export { VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, } from '@elastic/eui/src/services/color/visualization_colors';
-	export { colorPalette } from '@elastic/eui/src/services/color/color_palette';
-	export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, } from '@elastic/eui/src/services/color/eui_palettes';
-	export type { rgbDef, HSV, RGB } from '@elastic/eui/src/services/color/color_types';
-	export { getSteppedGradient } from '@elastic/eui/src/services/color/stepped_gradient';
-	export * from '@elastic/eui/src/services/color/manipulation';
-	export * from '@elastic/eui/src/services/color/contrast';
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_colors' {
-	import { _EuiThemeColors, _EuiThemeBrandColors, _EuiThemeBrandTextColors, _EuiThemeShadeColors, _EuiThemeSpecialColors, _EuiThemeTextColors, _EuiThemeColorsMode } from '@elastic/eui/src/global_styling/variables/colors';
-	export const brand_colors: _EuiThemeBrandColors;
-	export const brand_text_colors: _EuiThemeBrandTextColors;
-	export const shade_colors: _EuiThemeShadeColors;
-	export const special_colors: _EuiThemeSpecialColors;
-	export const text_colors: _EuiThemeTextColors;
-	export const light_colors: _EuiThemeColorsMode;
-	export const dark_shades: _EuiThemeShadeColors;
-	export const dark_colors_ams: _EuiThemeColorsMode;
-	export const colors: _EuiThemeColors;
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_animation' {
-	import { _EuiThemeAnimationSpeeds, _EuiThemeAnimationEasings, _EuiThemeAnimation } from '@elastic/eui/src/global_styling/variables/animations';
-	export const animation_speed: _EuiThemeAnimationSpeeds;
-	export const animation_ease: _EuiThemeAnimationEasings;
-	export const animation: _EuiThemeAnimation;
-
-}
-declare module '@elastic/eui/src/global_styling/variables' {
-	export * from '@elastic/eui/src/global_styling/variables/animations';
-	export * from '@elastic/eui/src/global_styling/variables/borders';
-	export * from '@elastic/eui/src/global_styling/variables/breakpoint';
-	export * from '@elastic/eui/src/global_styling/variables/colors';
-	export * from '@elastic/eui/src/global_styling/variables/levels';
-	export * from '@elastic/eui/src/global_styling/variables/size';
-	export * from '@elastic/eui/src/global_styling/variables/shadow';
-	export * from '@elastic/eui/src/global_styling/variables/states';
-	export * from '@elastic/eui/src/global_styling/variables/typography';
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_breakpoint' {
-	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables';
-	export const breakpoint: _EuiThemeBreakpoints;
-
-}
-declare module '@elastic/eui/src/global_styling/functions/logicals' {
-	import { CSSProperties } from 'react';
-	/**
-	 * EUI utilizes logical CSS properties to enable directional writing-modes.
-	 * To encourage use of logical properties, we provide a few helper utilities to
-	 * convert certain directional properties to logical properties.
-	 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
-	 */
-	export const logicalSide: {
-	    left: string;
-	    right: string;
-	    top: string;
-	    bottom: string;
-	    horizontal: string;
-	    vertical: string;
-	};
-	export const LOGICAL_SIDES: ("left" | "right" | "top" | "bottom" | "horizontal" | "vertical")[];
-	export type LogicalSides = (typeof LOGICAL_SIDES)[number];
-	export const logicals: {
-	    height: string;
-	    width: string;
-	    "max-height": string;
-	    "max-width": string;
-	    "min-height": string;
-	    "min-width": string;
-	    top: string;
-	    right: string;
-	    bottom: string;
-	    left: string;
-	    horizontal: string;
-	    vertical: string;
-	    "margin-left": string;
-	    "margin-right": string;
-	    "margin-top": string;
-	    "margin-bottom": string;
-	    "margin-horizontal": string;
-	    "margin-vertical": string;
-	    "padding-left": string;
-	    "padding-right": string;
-	    "padding-top": string;
-	    "padding-bottom": string;
-	    "padding-horizontal": string;
-	    "padding-vertical": string;
-	    "overflow-x": string;
-	    "overflow-y": string;
-	    "border-horizontal": string;
-	    "border-horizontal-color": string;
-	    "border-horizontal-width": string;
-	    "border-horizontal-style": string;
-	    "border-vertical": string;
-	    "border-vertical-color": string;
-	    "border-vertical-width": string;
-	    "border-vertical-style": string;
-	    "border-bottom": string;
-	    "border-bottom-color": string;
-	    "border-bottom-style": string;
-	    "border-bottom-width": string;
-	    "border-top": string;
-	    "border-top-color": string;
-	    "border-top-style": string;
-	    "border-top-width": string;
-	    "border-right": string;
-	    "border-right-color": string;
-	    "border-right-style": string;
-	    "border-right-width": string;
-	    "border-left": string;
-	    "border-left-color": string;
-	    "border-left-style": string;
-	    "border-left-width": string;
-	    "border-top-left-radius": string;
-	    "border-top-right-radius": string;
-	    "border-bottom-left-radius": string;
-	    "border-bottom-right-radius": string;
-	    _shorthands: string[];
-	};
-	export const LOGICAL_PROPERTIES: ("left" | "right" | "top" | "width" | "height" | "bottom" | "max-height" | "max-width" | "min-height" | "min-width" | "horizontal" | "vertical" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "overflow-x" | "overflow-y" | "border-horizontal" | "border-horizontal-color" | "border-horizontal-width" | "border-horizontal-style" | "border-vertical" | "border-vertical-color" | "border-vertical-width" | "border-vertical-style" | "border-bottom" | "border-bottom-color" | "border-bottom-style" | "border-bottom-width" | "border-top" | "border-top-color" | "border-top-style" | "border-top-width" | "border-right" | "border-right-color" | "border-right-style" | "border-right-width" | "border-left" | "border-left-color" | "border-left-style" | "border-left-width" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius")[];
-	export type LogicalProperties = (typeof LOGICAL_PROPERTIES)[number];
-	/**
-	 *
-	 * @param property A string that is a valid CSS logical property
-	 * @param value String to output as the property value
-	 * @returns `string` Returns the logical CSS property version for the given `property: value` pair
-	 */
-	export const logicalCSS: (property: LogicalProperties, value?: any) => string;
-	/**
-	 * Some logical properties are not yet fully supported by all browsers.
-	 * For those cases, we should use the old property as a fallback for
-	 * browsers missing support, while allowing supporting browsers to use
-	 * the logical properties.
-	 *
-	 * Examples:
-	 * https://caniuse.com/?search=overflow-block
-	 * https://caniuse.com/mdn-css_properties_float_flow_relative_values
-	 */
-	export const logicalCSSWithFallback: (property: LogicalProperties, value?: any) => string;
-	/**
-	 *
-	 * @param property A string that is a valid CSS logical property
-	 * @param value String to output as the property value
-	 * @returns `object` Returns the logical CSS property version for the given `property: value` pair
+	 * @param color - Color to mix with black
+	 * @param ratio - Mix weight. From 0-1. Larger value indicates more black.
 	 */
-	export const logicalStyle: (property: LogicalProperties, value?: any) => {
-	    [x: string]: any;
-	};
+	export const shade: (color: string, ratio: number) => string;
 	/**
-	 * Given a style object with any amount of unknown CSS properties,
-	 * find ones that can be converted to logical properties and convert them
-	 *
-	 * @param styleObject - A React object of camelCased styles
-	 * @returns `object`
+	 * Returns the tinted color for light mode and shaded color for dark mode
+	 * @param color - Color to mix with white
+	 * @param ratio - Mix weight. From 0-1. Larger value indicates more white.
+	 * @param colorMode - Light or dark only
 	 */
-	export const logicalStyles: (styleObject: CSSProperties) => Record<string, string | number | undefined>;
+	export const tintOrShade: (color: string, ratio: number, colorMode: EuiThemeColorModeStandard) => string;
 	/**
-	 *
-	 * @param width A string value for the LTR width
-	 * @param height A string value for the LTR height
-	 * @returns `string` Returns the logical CSS properties for height and width
+	 * Returns the shaded color for light mode and tinted color for dark mode
+	 * @param color - Color to mix with white
+	 * @param ratio - Mix weight. From 0-1. Larger value indicates more white.
+	 * @param colorMode - Light or dark only
 	 */
-	export const logicalSizeCSS: (width: any, height?: any) => string;
+	export const shadeOrTint: (color: string, ratio: number, colorMode: EuiThemeColorModeStandard) => string;
 	/**
-	 *
-	 * @param width A string value for the LTR width
-	 * @param height A string value for the LTR height
-	 * @returns `object` Returns the logical CSS properties for height and width
+	 * Increases the saturation of a color by manipulating the hsl saturation.
+	 * @param color - Color to manipulate
+	 * @param amount - Amount to change in absolute terms. 0-1.
 	 */
-	export const logicalSizeStyle: (width: any, height: any) => {
-	    [x: string]: any;
-	};
-	export const logicalText: {
-	    'text-align': {
-	        left: string;
-	        center: string;
-	        right: string;
-	    };
-	};
-	export const LOGICAL_TEXT_ALIGNMENT: ("left" | "right" | "center")[];
-	export type LogicalText = (typeof LOGICAL_TEXT_ALIGNMENT)[number];
+	export const saturate: (color: string, amount: number) => string;
 	/**
-	 *
-	 * @param property A string that is a valid CSS logical property
-	 * @param value String to output as the property value
-	 * @returns `string` Returns the logical CSS property version for the given `property: value` pair
+	 * Decreases the saturation of a color by manipulating the hsl saturation.
+	 * @param color - Color to manipulate
+	 * @param amount - Amount to change in absolute terms. 0-1.
 	 */
-	export const logicalTextAlignCSS: (value: LogicalText) => string;
+	export const desaturate: (color: string, amount: number) => string;
 	/**
-	 *
-	 * @param property A string that is a valid CSS logical property
-	 * @param value String to output as the property value
-	 * @returns `object` Returns the logical CSS property version for the given `property: value` pair
+	 * Returns the lightness value of a color. 0-100
+	 * @param color
 	 */
-	export const logicalTextAlignStyle: (value: LogicalText) => {
-	    textAlign: string;
-	};
-
-}
-declare module '@elastic/eui/src/global_styling/functions/logical_shorthands' {
-	export const LOGICAL_SHORTHANDS: string[];
-	export type LogicalShorthands = (typeof LOGICAL_SHORTHANDS)[number];
+	export const lightness: (color: string) => number;
 	/**
-	 * Unfortunately, shorthand properties that describe boxes
-	 * (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box)
-	 * do not currently automatically respond to logical changes in display direction
-	 * (@see https://github.com/w3c/csswg-drafts/issues/1282)
-	 *
-	 * This utility is essentially a stop-gap for those shorthand properties,
-	 * converting them to corresponding longer logical `-inline` and `-block` properties
-	 *
-	 * 🗑 NOTE: This file is in a separate util file from logicals.ts due to its relatively
-	 * convoluted logic, & to make deleting it easier when an official CSS spec is implemented.
+	 * Returns the darken value of a color. 0-100
+	 * @param color - Color to manipulate
+	 * @param amount - Amount to change in absolute terms. 0-1.
 	 */
-	export const logicalShorthandCSS: (property: LogicalShorthands, value: string | number) => string;
+	export const darken: (color: string, amount: number) => string;
 	/**
-	 * Logical border radius is unfortunately a very special case as it handles corners
-	 * and not sides (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#corners_of_a_box)
-	 * and does not have `-inline` or `-block` shorthands.
-	 *
-	 * It also needs to account for `/` syntax (horizontal vs vertical radii)
-	 * @see https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
+	 * Returns the brighten value of a color. 0-100
+	 * @param color - Color to manipulate
+	 * @param amount - Amount to change in absolute terms. 0-1.
 	 */
-	export const logicalBorderRadiusCSS: (value: string, ignoreZeroes?: boolean) => string;
-
-}
-declare module '@elastic/eui/src/global_styling/functions/math' {
-	 type ValueTypes = string | number | undefined;
-	export const mathWithUnits: (values: ValueTypes | ValueTypes[], callback: (...args: number[]) => number, unit?: string) => string;
-	export {};
+	export const brighten: (color: string, amount: number) => string;
 
 }
-declare module '@elastic/eui/src/global_styling/functions/size' {
+declare module '@elastic/eui/src/services/color/contrast' {
+	export const wcagContrastMin = 4.5;
 	/**
-	 * Calculates the `px` value based on a scale multiplier
-	 * @param scale - The font scale multiplier
-	 * *
-	 * @param themeOrBase - Theme base value
+	 * Creates a new color that meets or exceeds WCAG level AA
+	 * @param foreground - Color to manipulate
+	 * @param ratio - Amount to change in absolute terms. 0-10.
 	 * *
-	 * @returns string - Rem unit aligned to baseline
+	 * @param themeOrBackground - Color to use as the contrast basis or just pass EuiTheme
 	 */
-	export const sizeToPixel: (scale?: number) => (themeOrBase: number | {
+	export const makeHighContrastColor: (_foreground: string, ratio?: number) => (themeOrBackground: string | {
 	    [key: string]: any;
-	    base: number;
+	    colors: {
+	        body: string;
+	    };
 	}) => string;
-
-}
-declare module '@elastic/eui/src/services/theme/provider' {
-	import React, { PropsWithChildren, HTMLAttributes } from 'react';
-	import type { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiThemeColorMode, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types'; type LEVELS = 'log' | 'warn' | 'error';
-	export const setEuiDevProviderWarning: (level: LEVELS | undefined) => LEVELS | undefined;
-	export const getEuiDevProviderWarning: () => LEVELS | undefined;
-	export interface EuiThemeProviderProps<T> {
-	    theme?: EuiThemeSystem<T>;
-	    colorMode?: EuiThemeColorMode;
-	    modify?: EuiThemeModifications<T>;
-	    children: any;
-	    /**
-	     * Nested theme providers will receive a wrapping `span` tag in order to correctly
-	     * set the default text `color` that all nested children will inherit.
-	     *
-	     * If an extra wrapper is not desired, pass `{ cloneElement: true }`.
-	     * This requires a **single** child component that the correct color class can be passed to.
-	     *
-	     * The parent level `EuiProvider`/`EuiThemeProvider` will **not** render a wrapper element, as
-	     * the default inherited text color will be set on the page `body`.
-	     */
-	    wrapperProps?: HTMLAttributes<HTMLElement> & CommonProps & {
-	        cloneElement?: boolean;
+	/**
+	 * Creates a new color with increased contrast
+	 * Disabled content only needs a contrast of at least 2 because there is no interaction available
+	 * @param foreground - Color to manipulate
+	 * @param ratio - Amount to change in absolute terms. 0-10.
+	 * *
+	 * @param themeOrBackground - Color to use as the contrast basis
+	 */
+	export const makeDisabledContrastColor: (color: string, ratio?: number) => (themeOrBackground: string | {
+	    [key: string]: any;
+	    colors: {
+	        body: string;
 	    };
-	}
-	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, wrapperProps, }: React.PropsWithChildren<EuiThemeProviderProps<T>>) => JSX.Element;
-	export {};
+	}) => string;
 
 }
-declare module '@elastic/eui/src/services/theme/hooks' {
-	import React from 'react';
-	import { EuiThemeColorModeStandard, EuiThemeModifications, EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
-	/**
-	 * Hook for function components
-	 */
-	export interface UseEuiTheme<T extends {} = {}> {
-	    euiTheme: EuiThemeComputed<T>;
-	    colorMode: EuiThemeColorModeStandard;
-	    modifications: EuiThemeModifications<T>;
-	}
-	export const useEuiTheme: <T extends {} = {}>() => UseEuiTheme<T>;
-	/**
-	 * HOC for class components
-	 */
-	export interface WithEuiThemeProps<P extends {} = {}> {
-	    theme: UseEuiTheme<P>;
-	}
-	export const withEuiTheme: <T extends {} = {}, U extends {} = {}>(Component: React.ComponentType<T & WithEuiThemeProps<U>>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, "theme">> & React.RefAttributes<Omit<T, "theme">>>;
-	/**
-	 * Render prop alternative for complex class components
-	 * Most useful for scenarios where a HOC may interfere with typing
-	 */
-	export const RenderWithEuiTheme: <T extends {} = {}>({ children, }: {
-	    children: (theme: UseEuiTheme) => React.ReactElement;
-	}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
+declare module '@elastic/eui/src/services/color' {
+	export { isColorDark } from '@elastic/eui/src/services/color/is_color_dark';
+	export { isValidHex } from '@elastic/eui/src/services/color/is_valid_hex';
+	export { hexToHsv } from '@elastic/eui/src/services/color/hex_to_hsv';
+	export { hexToRgb } from '@elastic/eui/src/services/color/hex_to_rgb';
+	export { hsvToHex } from '@elastic/eui/src/services/color/hsv_to_hex';
+	export { hsvToRgb } from '@elastic/eui/src/services/color/hsv_to_rgb';
+	export { rgbToHex } from '@elastic/eui/src/services/color/rgb_to_hex';
+	export { rgbToHsv } from '@elastic/eui/src/services/color/rgb_to_hsv';
+	export { calculateContrast, calculateLuminance, } from '@elastic/eui/src/services/color/luminance_and_contrast';
+	export { VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, } from '@elastic/eui/src/services/color/visualization_colors';
+	export { colorPalette } from '@elastic/eui/src/services/color/color_palette';
+	export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, } from '@elastic/eui/src/services/color/eui_palettes';
+	export type { rgbDef, HSV, RGB } from '@elastic/eui/src/services/color/color_types';
+	export { getSteppedGradient } from '@elastic/eui/src/services/color/stepped_gradient';
+	export * from '@elastic/eui/src/services/color/manipulation';
+	export * from '@elastic/eui/src/services/color/contrast';
 
 }
-declare module '@elastic/eui/src/global_styling/functions/typography' {
-	import { _EuiThemeFontScale, _EuiThemeFontSizeMeasurement, _EuiThemeFontWeights } from '@elastic/eui/src/global_styling/variables/typography';
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
-	export interface _FontScaleOptions {
-	    /**
-	     * The returned string measurement
-	     */
-	    measurement?: _EuiThemeFontSizeMeasurement;
-	    /**
-	     * An additional custom scale multiplier to use against the current scale
-	     * This parameter can be used (e.g. by EuiText sizes) to get sizes of text smaller than the default
-	     */
-	    customScale?: _EuiThemeFontScale;
-	}
-	/**
-	 * Calculates the font-size value based on the provided scale key
-	 * @param scale - The font scale key
-	 * @param theme - Requires the `base` and `font` keys
-	 * @param options - Optional parameters - see _FontScaleOptions
-	 *
-	 * @returns string - Calculated font-size value
-	 */
-	export function euiFontSizeFromScale(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
-	/**
-	 * Calculates the line-height to the closest multiple of the baseline
-	 * EX: A proper line-height for text is 1.5 times the font-size.
-	 *     If our base font size (euiFontSize) is 16, and our baseline is 4. To ensure the
-	 *     text stays on the baseline, we pass a multiplier to calculate a line-height.
-	 * @param scale - The font scale key
-	 * @param theme - Requires the `base` and `font` keys
-	 * @param options - Optional parameters - see _FontScaleOptions
-	 *
-	 * @returns string - Calculated line-height value aligned to baseline
-	 */
-	export function euiLineHeightFromBaseline(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
-	/**
-	 * Text weight shifting
-	 *
-	 * When changing the font-weight based on the state of the component,
-	 * this mixin will ensure that the sizing is dependent on the boldest
-	 * weight so it doesn't shift sibling content.
-	 */
-	export const euiTextShift: (fontWeight: keyof _EuiThemeFontWeights | undefined, attribute: string | undefined, euiTheme: UseEuiTheme['euiTheme']) => string;
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_colors' {
+	import { _EuiThemeColors, _EuiThemeBrandColors, _EuiThemeBrandTextColors, _EuiThemeShadeColors, _EuiThemeSpecialColors, _EuiThemeTextColors, _EuiThemeColorsMode } from '@elastic/eui/src/global_styling/variables/colors';
+	export const brand_colors: _EuiThemeBrandColors;
+	export const brand_text_colors: _EuiThemeBrandTextColors;
+	export const shade_colors: _EuiThemeShadeColors;
+	export const special_colors: _EuiThemeSpecialColors;
+	export const text_colors: _EuiThemeTextColors;
+	export const light_colors: _EuiThemeColorsMode;
+	export const dark_shades: _EuiThemeShadeColors;
+	export const dark_colors_ams: _EuiThemeColorsMode;
+	export const colors: _EuiThemeColors;
 
 }
-declare module '@elastic/eui/src/global_styling/functions' {
-	export * from '@elastic/eui/src/global_styling/functions/logicals';
-	export * from '@elastic/eui/src/global_styling/functions/logical_shorthands';
-	export * from '@elastic/eui/src/global_styling/functions/math';
-	export * from '@elastic/eui/src/global_styling/functions/size';
-	export * from '@elastic/eui/src/global_styling/functions/typography';
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_animation' {
+	import { _EuiThemeAnimationSpeeds, _EuiThemeAnimationEasings, _EuiThemeAnimation } from '@elastic/eui/src/global_styling/variables/animations';
+	export const animation_speed: _EuiThemeAnimationSpeeds;
+	export const animation_ease: _EuiThemeAnimationEasings;
+	export const animation: _EuiThemeAnimation;
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_breakpoint' {
+	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables';
+	export const breakpoint: _EuiThemeBreakpoints;
 
 }
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_size' {
@@ -7221,13 +7426,54 @@ declare module '@elastic/eui/src/services/theme/context' {
 	export const EuiThemeContext: import("react").Context<EuiThemeComputed<{}>>;
 	export const EuiNestedThemeContext: import("react").Context<EuiThemeNested>;
 
+}
+declare module '@elastic/eui/src/services/theme/emotion' {
+	import { FunctionComponent, PropsWithChildren } from 'react';
+	/**
+	 * @see https://emotion.sh/docs/theming
+	 * This Emotion theme provider is added for *consumer usage* & convenience only.
+	 *
+	 * EUI should stick to using our own context/`useEuiTheme` internally
+	 * instead of Emotion's shorthand `css={theme => {}}` API. If consumers
+	 * set their own theme via <ThemeProvider>; EUI's styles should continue
+	 * working as-is.
+	 */
+	export const EuiEmotionThemeProvider: FunctionComponent<PropsWithChildren<{}>>;
+
+}
+declare module '@elastic/eui/src/services/theme/provider' {
+	import React, { PropsWithChildren, HTMLAttributes } from 'react';
+	import type { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiThemeColorMode, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types';
+	export interface EuiThemeProviderProps<T> {
+	    theme?: EuiThemeSystem<T>;
+	    colorMode?: EuiThemeColorMode;
+	    modify?: EuiThemeModifications<T>;
+	    children: any;
+	    /**
+	     * Nested theme providers will receive a wrapping `span` tag in order to correctly
+	     * set the default text `color` that all nested children will inherit.
+	     *
+	     * If an extra wrapper is not desired, pass `{ cloneElement: true }`.
+	     * This requires a **single** child component that the correct color class can be passed to.
+	     *
+	     * The parent level `EuiProvider`/`EuiThemeProvider` will **not** render a wrapper element, as
+	     * the default inherited text color will be set on the page `body`.
+	     */
+	    wrapperProps?: HTMLAttributes<HTMLElement> & CommonProps & {
+	        cloneElement?: boolean;
+	    };
+	}
+	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, wrapperProps, }: React.PropsWithChildren<EuiThemeProviderProps<T>>) => JSX.Element;
+
 }
 declare module '@elastic/eui/src/services/theme' {
 	export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
 	export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
 	export { useEuiTheme, withEuiTheme, RenderWithEuiTheme } from '@elastic/eui/src/services/theme/hooks';
 	export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
-	export { EuiThemeProvider, getEuiDevProviderWarning, setEuiDevProviderWarning, } from '@elastic/eui/src/services/theme/provider';
+	export { EuiThemeProvider } from '@elastic/eui/src/services/theme/provider';
+	export { getEuiDevProviderWarning, setEuiDevProviderWarning } from '@elastic/eui/src/services/theme/warning';
 	export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed, } from '@elastic/eui/src/services/theme/utils';
 	export type { ComputedThemeShape, EuiThemeColorMode, EuiThemeColorModeStandard, EuiThemeComputed, EuiThemeModifications, EuiThemeShape, EuiThemeSystem, } from '@elastic/eui/src/services/theme/types';
 	export { COLOR_MODES_STANDARD } from '@elastic/eui/src/services/theme/types';
@@ -7236,12 +7482,6 @@ declare module '@elastic/eui/src/services/theme' {
 declare module '@elastic/eui/src/services/throttle' {
 	export const throttle: (fn: (...args: any[]) => void, wait?: number) => (...args: any[]) => void;
 
-}
-declare module '@elastic/eui/src/services/breakpoint/_sorting' {
-	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
-	export const sortMapByLargeToSmallValues: (breakpointsMap: _EuiThemeBreakpoints) => _EuiThemeBreakpoints;
-	export const sortMapBySmallToLargeValues: (breakpointsMap: _EuiThemeBreakpoints) => _EuiThemeBreakpoints;
-
 }
 declare module '@elastic/eui/src/services/breakpoint/current_breakpoint' {
 	import React, { FunctionComponent } from 'react';
@@ -7335,6 +7575,20 @@ declare module '@elastic/eui/src/services/console' {
 declare module '@elastic/eui/src/services/copy_to_clipboard' {
 	export function copyToClipboard(text: string): boolean;
 
+}
+declare module '@elastic/eui/src/services/emotion/clone_element' {
+	import React from 'react';
+	/**
+	 * React.cloneElement does not work if the cloned element does not already have the
+	 * `css` prop - as a result, we need to use `jsx()` to manually clone the element
+	 * See https://github.com/emotion-js/emotion/issues/1404
+	 */
+	export const cloneElementWithCss: (element: any, props: any) => React.ReactElement;
+
+}
+declare module '@elastic/eui/src/services/emotion' {
+	export * from '@elastic/eui/src/services/emotion/clone_element';
+
 }
 declare module '@elastic/eui/src/services/findElement' {
 	/**
@@ -7539,462 +7793,229 @@ declare module '@elastic/eui/src/services/security/get_secure_rel_for_target' {
 
 }
 declare module '@elastic/eui/src/services/security' {
-	export { getSecureRelForTarget } from '@elastic/eui/src/services/security/get_secure_rel_for_target';
-
-}
-declare module '@elastic/eui/src/services/sort/sort_direction' {
-	import PropTypes from 'prop-types'; const ASC: "asc"; const DESC: "desc";
-	export type Direction = typeof ASC | typeof DESC;
-	export const SortDirection: Readonly<{
-	    ASC: "asc";
-	    DESC: "desc";
-	    isAsc(direction: Direction): boolean;
-	    reverse(direction: Direction): "desc" | "asc";
-	}>;
-	export const SortDirectionType: PropTypes.Requireable<"desc" | "asc">;
-	export {};
-
-}
-declare module '@elastic/eui/src/services/sort/comparators' {
-	export type Primitive = string | boolean | number | null | undefined; type Comparator<T = Primitive> = (a: T, b: T) => number;
-	export const Comparators: Readonly<{
-	    default: (direction?: 'asc' | 'desc') => (v1: Primitive, v2: Primitive) => number;
-	    reverse: <T>(comparator: Comparator<T>) => Comparator<T>;
-	    value<T_1>(valueCallback: (value: T_1) => Primitive, comparator?: Comparator<Primitive> | undefined): Comparator<T_1>;
-	    property<T_2>(prop: string, comparator?: Comparator<Primitive> | undefined): Comparator<T_2>;
-	}>;
-	export {};
-
-}
-declare module '@elastic/eui/src/services/sort/sortable_properties' {
-	import { Primitive } from '@elastic/eui/src/services/sort/comparators';
-	export interface SortableProperty<T> {
-	    name: string;
-	    getValue: (obj: T) => Primitive;
-	    isAscending: boolean;
-	}
-	/**
-	 * @typedef {Object} SortableProperty
-	 * @property {string} sortableProperty.name - Name of the property.
-	 * @property {function} sortableProperty.getValue - A function that takes in an object and returns a value to sort
-	 * by.
-	 * @property {boolean} sortableProperty.isAscending - The direction of the last sort by this property. Used to preserve
-	 * past sort orders.
-	 */
-	/**
-	 * Stores sort information for a set of SortableProperties, including which property is currently being sorted on, as
-	 * well as the last sort order for each property.
-	 */
-	export class SortableProperties<T> {
-	    sortableProperties: Array<SortableProperty<T>>;
-	    currentSortedProperty: SortableProperty<T>;
-	    /**
-	     * @param {Array<SortableProperty>} sortableProperties - a set of sortable properties.
-	     * @param {string} initialSortablePropertyName - Which sort property should be sorted on by default.
-	     */
-	    constructor(sortableProperties: Array<SortableProperty<T>>, initialSortablePropertyName: string);
-	    /**
-	     * @returns {SortableProperty} The current property that is being sorted on. Undefined if no sort order is applied.
-	     */
-	    getSortedProperty(): SortableProperty<T>;
-	    /**
-	     * Sorts the items passed in and returns a newly sorted array.
-	     * @param items {Array.<Object>}
-	     * @returns {Array.<Object>} sorted array of items, based off the sort properties.
-	     */
-	    sortItems(items: T[]): T[];
-	    /**
-	     * Returns the SortProperty with the given name, if found.
-	     * @param {String} propertyName
-	     * @returns {SortableProperty|undefined}
-	     */
-	    getSortablePropertyByName(propertyName: string): SortableProperty<T> | undefined;
-	    /**
-	     * Updates the sort property, potentially flipping the sort order based on whether the same
-	     * property was already being sorted.
-	     * @param propertyName {String}
-	     */
-	    sortOn(propertyName: string): void;
-	    /**
-	     * @returns {boolean} True if the current sortable property is sorted in ascending order.
-	     */
-	    isCurrentSortAscending(): boolean;
-	    /**
-	     * @param {string} propertyName
-	     * @returns {boolean} True if the given sort property is sorted in ascending order.
-	     */
-	    isAscendingByName(propertyName: string): boolean;
-	    /**
-	     * Flips the current sorted property sort order.
-	     */
-	    flipCurrentSortOrder(): void;
-	}
-
-}
-declare module '@elastic/eui/src/services/sort/property_sort' {
-	import PropTypes from 'prop-types';
-	import { Direction } from '@elastic/eui/src/services/sort/sort_direction';
-	export const PropertySortType: PropTypes.Requireable<PropTypes.InferProps<{
-	    field: PropTypes.Validator<string>;
-	    direction: PropTypes.Validator<"desc" | "asc">;
-	}>>;
-	export interface PropertySort {
-	    field: string;
-	    direction: Direction;
-	}
-
-}
-declare module '@elastic/eui/src/services/sort' {
-	export { SortableProperties } from '@elastic/eui/src/services/sort/sortable_properties';
-	export type { Direction } from '@elastic/eui/src/services/sort/sort_direction';
-	export { SortDirectionType, SortDirection } from '@elastic/eui/src/services/sort/sort_direction';
-	export type { PropertySort } from '@elastic/eui/src/services/sort/property_sort';
-	export { PropertySortType } from '@elastic/eui/src/services/sort/property_sort';
-	export { Comparators } from '@elastic/eui/src/services/sort/comparators';
-
-}
-declare module '@elastic/eui/src/services/string/to_initials' {
-	/**
-	 * This function calculates the initials/acronym for a given name.
-	 * It defaults to only 2 characters and will take the first character (of each word).
-	 * If only one word is supplied for the name, it will only pass back the first letter of the word,
-	 * unless forced to 2 letters by setting `initialsLength` to `2`.
-	 * It will pass back the characters with the same casing as the original string
-	 * unless otherwise specified.
-	 *
-	 * @param {string} name The full name of the item to turn into initials
-	 * @param {number} initialsLength (Optional) How many characters to show (max 2 allowed)
-	 * @param {string} initials (Optional) Custom initials (max 2 characters)
-	 * @returns {string} True if the color is dark, false otherwise.
-	 */
-	export const MAX_INITIALS = 2;
-	export function toInitials(name: string, initialsLength?: 1 | 2, initials?: string): string | null;
-
-}
-declare module '@elastic/eui/src/services/string/to_case' {
-	/**
-	 * This function returns the same string with the first letter of the first word capitalized.
-	 *
-	 * @param {string} string The input string
-	 */
-	export function toSentenceCase(string: string): string;
-
-}
-declare module '@elastic/eui/src/services/string/slugify' {
-	/**
-	 * Lowercases input and replaces spaces with hyphens:
-	 * e.g. 'GridView Example' -> 'gridview-example'
-	 *
-	 * @param {string} string The starting string
-	 * @returns {string} Lowercase, dashed version of the starting staring
-	 */
-	export function slugify(str: string): string;
-
-}
-declare module '@elastic/eui/src/services/string' {
-	export { toInitials } from '@elastic/eui/src/services/string/to_initials';
-	export { toSentenceCase } from '@elastic/eui/src/services/string/to_case';
-	export { slugify } from '@elastic/eui/src/services/string/slugify';
-
-}
-declare module '@elastic/eui/src/services/transition/transition' {
-	export const getTransitionTimings: (element: Element) => {
-	    durationMatch: number;
-	    delayMatch: number;
-	};
-	export const getWaitDuration: (records: MutationRecord[]) => number;
-	export const performOnFrame: (waitDuration: number, toPerform: () => void) => void;
-	export const getDurationAndPerformOnFrame: (records: MutationRecord[], toPerform: () => void) => void;
-
-}
-declare module '@elastic/eui/src/services/transition' {
-	export { getDurationAndPerformOnFrame, getTransitionTimings, getWaitDuration, performOnFrame, } from '@elastic/eui/src/services/transition/transition';
-
-}
-declare module '@elastic/eui/src/services/window_event/window_event' {
-	import { Component } from 'react'; type EventNames = keyof WindowEventMap;
-	interface Props<Ev extends EventNames> {
-	    event: Ev;
-	    handler: (this: Window, ev: WindowEventMap[Ev]) => any;
-	}
-	export class EuiWindowEvent<E extends EventNames> extends Component<Props<E>> {
-	    componentDidMount(): void;
-	    componentDidUpdate(prevProps: Props<E>): void;
-	    componentWillUnmount(): void;
-	    addEvent<Ev extends EventNames>({ event, handler }: Props<Ev>): void;
-	    removeEvent<Ev extends EventNames>({ event, handler }: Props<Ev>): void;
-	    render(): null;
-	}
-	export {};
-
-}
-declare module '@elastic/eui/src/services/window_event' {
-	export { EuiWindowEvent } from '@elastic/eui/src/services/window_event/window_event';
+	export { getSecureRelForTarget } from '@elastic/eui/src/services/security/get_secure_rel_for_target';
 
 }
-declare module '@elastic/eui/src/services' {
-	import * as keys from '@elastic/eui/src/services/keys';
-	export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId, } from '@elastic/eui/src/services/accessibility';
-	export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from '@elastic/eui/src/services/alignment';
-	export type { HorizontalAlignment } from '@elastic/eui/src/services/alignment';
-	export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, } from '@elastic/eui/src/services/breakpoint';
-	export type { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
-	export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin, } from '@elastic/eui/src/services/color';
-	export type { HSV } from '@elastic/eui/src/services/color';
-	export { useColorPickerState, useColorStopsState } from '@elastic/eui/src/services/color_picker';
-	export type { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker';
-	export * from '@elastic/eui/src/services/console';
-	export { copyToClipboard } from '@elastic/eui/src/services/copy_to_clipboard';
-	export * from '@elastic/eui/src/services/findElement';
-	export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText, } from '@elastic/eui/src/services/format';
-	export * from '@elastic/eui/src/services/hooks';
-	export { isEvenlyDivisibleBy, isWithinRange } from '@elastic/eui/src/services/number';
-	export { Pager } from '@elastic/eui/src/services/paging';
-	export { calculatePopoverPosition, findPopoverPosition } from '@elastic/eui/src/services/popover';
-	export { Random } from '@elastic/eui/src/services/random';
-	export { getSecureRelForTarget } from '@elastic/eui/src/services/security';
-	export { Comparators, PropertySortType, SortableProperties, SortDirection, SortDirectionType, } from '@elastic/eui/src/services/sort';
-	export type { Direction, PropertySort } from '@elastic/eui/src/services/sort';
-	export { slugify, toInitials, toSentenceCase } from '@elastic/eui/src/services/string';
-	export * from '@elastic/eui/src/services/theme';
-	export { throttle } from '@elastic/eui/src/services/throttle';
-	export { getDurationAndPerformOnFrame, getTransitionTimings, getWaitDuration, performOnFrame, } from '@elastic/eui/src/services/transition';
-	export { EuiWindowEvent } from '@elastic/eui/src/services/window_event';
-	export { keys };
+declare module '@elastic/eui/src/services/sort/sort_direction' {
+	import PropTypes from 'prop-types'; const ASC: "asc"; const DESC: "desc";
+	export type Direction = typeof ASC | typeof DESC;
+	export const SortDirection: Readonly<{
+	    ASC: "asc";
+	    DESC: "desc";
+	    isAsc(direction: Direction): boolean;
+	    reverse(direction: Direction): "desc" | "asc";
+	}>;
+	export const SortDirectionType: PropTypes.Requireable<"desc" | "asc">;
+	export {};
 
 }
-declare module '@elastic/eui/src/global_styling/mixins/_color' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const BACKGROUND_COLORS: readonly ["transparent", "plain", "subdued", "accent", "primary", "success", "warning", "danger"];
-	export type _EuiBackgroundColor = (typeof BACKGROUND_COLORS)[number];
-	export interface _EuiBackgroundColorOptions {
-	    /**
-	     * Use `opaque` for containers of unknown content.
-	     * Use `transparent` for interactive states like hover and focus.
-	     */
-	    method?: 'opaque' | 'transparent';
-	}
-	export const euiBackgroundColor: ({ euiTheme, colorMode }: UseEuiTheme, color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
-	export const useEuiBackgroundColor: (color: _EuiBackgroundColor, { method }?: _EuiBackgroundColorOptions) => string;
-	export const useEuiBackgroundColorCSS: () => {
-	    transparent: import("@emotion/utils").SerializedStyles;
-	    plain: import("@emotion/utils").SerializedStyles;
-	    subdued: import("@emotion/utils").SerializedStyles;
-	    accent: import("@emotion/utils").SerializedStyles;
-	    primary: import("@emotion/utils").SerializedStyles;
-	    success: import("@emotion/utils").SerializedStyles;
-	    warning: import("@emotion/utils").SerializedStyles;
-	    danger: import("@emotion/utils").SerializedStyles;
-	};
+declare module '@elastic/eui/src/services/sort/comparators' {
+	export type Primitive = string | boolean | number | null | undefined; type Comparator<T = Primitive> = (a: T, b: T) => number;
+	export const Comparators: Readonly<{
+	    default: (direction?: 'asc' | 'desc') => (v1: Primitive, v2: Primitive) => number;
+	    reverse: <T>(comparator: Comparator<T>) => Comparator<T>;
+	    value<T_1>(valueCallback: (value: T_1) => Primitive, comparator?: Comparator<Primitive> | undefined): Comparator<T_1>;
+	    property<T_2>(prop: string, comparator?: Comparator<Primitive> | undefined): Comparator<T_2>;
+	}>;
+	export {};
 
 }
-declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
-	import { CSSProperties } from 'react';
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
+declare module '@elastic/eui/src/services/sort/sortable_properties' {
+	import { Primitive } from '@elastic/eui/src/services/sort/comparators';
+	export interface SortableProperty<T> {
+	    name: string;
+	    getValue: (obj: T) => Primitive;
+	    isAscending: boolean;
+	}
 	/**
-	 * Set scroll bar appearance on Chrome (and firefox).
-	 * All parameters are optional and default to specific global settings.
+	 * @typedef {Object} SortableProperty
+	 * @property {string} sortableProperty.name - Name of the property.
+	 * @property {function} sortableProperty.getValue - A function that takes in an object and returns a value to sort
+	 * by.
+	 * @property {boolean} sortableProperty.isAscending - The direction of the last sort by this property. Used to preserve
+	 * past sort orders.
 	 */
-	export interface EuiScrollBarStyles {
-	    thumbColor?: CSSProperties['backgroundColor'];
-	    trackColor?: CSSProperties['backgroundColor'];
+	/**
+	 * Stores sort information for a set of SortableProperties, including which property is currently being sorted on, as
+	 * well as the last sort order for each property.
+	 */
+	export class SortableProperties<T> {
+	    sortableProperties: Array<SortableProperty<T>>;
+	    currentSortedProperty: SortableProperty<T>;
 	    /**
-	     * Defaults to `thin`. Use `auto` only for large page scrollbars
+	     * @param {Array<SortableProperty>} sortableProperties - a set of sortable properties.
+	     * @param {string} initialSortablePropertyName - Which sort property should be sorted on by default.
 	     */
-	    width?: CSSProperties['scrollbarWidth'];
+	    constructor(sortableProperties: Array<SortableProperty<T>>, initialSortablePropertyName: string);
 	    /**
-	     * Overall width (height for horizontal scrollbars)
+	     * @returns {SortableProperty} The current property that is being sorted on. Undefined if no sort order is applied.
 	     */
-	    size?: CSSProperties['width'];
+	    getSortedProperty(): SortableProperty<T>;
 	    /**
-	     * Corner sizes are usually determined by `width` and
-	     * are used as an inset border and therefore a smaller corner size means a larger thumb
+	     * Sorts the items passed in and returns a newly sorted array.
+	     * @param items {Array.<Object>}
+	     * @returns {Array.<Object>} sorted array of items, based off the sort properties.
 	     */
-	    corner?: CSSProperties['borderWidth'];
-	}
-	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
-	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
-	/**
-	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
-	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
-	 *    Others like Safari, won't show anything at all.
-	 */
-	interface _EuiYScroll {
-	    height?: CSSProperties['height'];
-	}
-	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
-	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
-	interface _EuiYScrollWithShadows extends _EuiYScroll {
-	    side?: 'both' | 'start' | 'end';
-	}
-	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height, side }?: _EuiYScrollWithShadows) => string;
-	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
-	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
-	export const useEuiXScroll: () => string;
-	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
-	export const useEuiXScrollWithShadows: () => string;
-	interface EuiScrollOverflowStyles {
-	    direction?: 'y' | 'x';
-	    mask?: boolean;
+	    sortItems(items: T[]): T[];
+	    /**
+	     * Returns the SortProperty with the given name, if found.
+	     * @param {String} propertyName
+	     * @returns {SortableProperty|undefined}
+	     */
+	    getSortablePropertyByName(propertyName: string): SortableProperty<T> | undefined;
+	    /**
+	     * Updates the sort property, potentially flipping the sort order based on whether the same
+	     * property was already being sorted.
+	     * @param propertyName {String}
+	     */
+	    sortOn(propertyName: string): void;
+	    /**
+	     * @returns {boolean} True if the current sortable property is sorted in ascending order.
+	     */
+	    isCurrentSortAscending(): boolean;
+	    /**
+	     * @param {string} propertyName
+	     * @returns {boolean} True if the given sort property is sorted in ascending order.
+	     */
+	    isAscendingByName(propertyName: string): boolean;
+	    /**
+	     * Flips the current sorted property sort order.
+	     */
+	    flipCurrentSortOrder(): void;
 	}
-	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
-	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
-	/**
-	 * For quickly applying a full-height element whether using flex or not
-	 */
-	export const euiFullHeight: () => string;
-	/**
-	 * A constant storing the support for the `:has()` selector through a
-	 * media query that will only apply the content it is supported.
-	 */
-	export const euiSupportsHas = "@supports(selector(:has(p)))";
-	export {};
-
-}
-declare module '@elastic/eui/src/global_styling/mixins/_padding' {
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
-	export const PADDING_SIZES: readonly ["none", "xs", "s", "m", "l", "xl"];
-	export type EuiPaddingSize = (typeof PADDING_SIZES)[number];
-	export const euiPaddingSize: ({ euiTheme }: UseEuiTheme, size: EuiPaddingSize) => string | null;
-	export const euiPaddingSizeCSS: (euiThemeContext: UseEuiTheme, side?: "left" | "right" | "top" | "bottom" | "horizontal" | "vertical" | undefined) => {
-	    none: null;
-	    xs: import("@emotion/utils").SerializedStyles;
-	    s: import("@emotion/utils").SerializedStyles;
-	    m: import("@emotion/utils").SerializedStyles;
-	    l: import("@emotion/utils").SerializedStyles;
-	    xl: import("@emotion/utils").SerializedStyles;
-	};
-	export const useEuiPaddingSize: (size: EuiPaddingSize) => string | null;
-	export const useEuiPaddingCSS: (side?: "left" | "right" | "top" | "bottom" | "horizontal" | "vertical" | undefined) => {
-	    none: null;
-	    xs: import("@emotion/utils").SerializedStyles;
-	    s: import("@emotion/utils").SerializedStyles;
-	    m: import("@emotion/utils").SerializedStyles;
-	    l: import("@emotion/utils").SerializedStyles;
-	    xl: import("@emotion/utils").SerializedStyles;
-	};
-
-}
-declare module '@elastic/eui/src/global_styling/mixins/_states' {
-	import { CSSProperties } from 'react';
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export type _EuiFocusRingOffset = 'inset' | 'outset' | 'center' | CSSProperties['outlineOffset'];
-	/**
-	 * It is best practice to utilize the browser's default `outline` property for handling focus rings.
-	 * However, some components need to be forced to have the same behavior, or adjust the display.
-	 * This function re-applies the same default outline with a couple parameters
-	 * @param euiTheme UseEuiTheme
-	 * @param offset Accepts a specific measurement or 'inset', 'outset' or 'center' to adjust outline position
-	 * @param color Accepts any CSS color
-	 */
-	export const euiOutline: ({ euiTheme }: UseEuiTheme, offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
-	export const euiFocusRing: (euiThemeContext: UseEuiTheme, offset?: _EuiFocusRingOffset, options?: {
-	    color?: CSSProperties['outlineColor'];
-	} | undefined) => string;
-	export const useEuiFocusRing: (offset?: _EuiFocusRingOffset, color?: CSSProperties['outlineColor']) => string;
 
 }
-declare module '@elastic/eui/src/global_styling/mixins/_typography' {
-	import { CSSProperties } from 'react';
-	import { _FontScaleOptions } from '@elastic/eui/src/global_styling/functions/typography';
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
-	import { _EuiThemeFontScale } from '@elastic/eui/src/global_styling/variables/typography';
-	export type EuiThemeFontSize = {
-	    fontSize: CSSProperties['fontSize'];
-	    lineHeight: CSSProperties['lineHeight'];
-	};
-	/**
-	 * Returns font-size and line-height
-	 */
-	export const euiFontSize: ({ euiTheme }: UseEuiTheme, scale: _EuiThemeFontScale, options?: _FontScaleOptions | undefined) => EuiThemeFontSize;
-	export const useEuiFontSize: (scale: _EuiThemeFontScale, options?: _FontScaleOptions | undefined) => EuiThemeFontSize;
-	/**
-	 * Force text to wrap on natural word breaks (e.g. spaces & hyphens)
-	 * https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
-	 */
-	export const euiTextBreakWord: () => string;
-	/**
-	 * Prevent text from wrapping onto multiple lines, and truncate with an ellipsis.
-	 */
-	export const euiTextTruncate: (maxWidth?: CSSProperties['maxWidth']) => string;
+declare module '@elastic/eui/src/services/sort/property_sort' {
+	import PropTypes from 'prop-types';
+	import { Direction } from '@elastic/eui/src/services/sort/sort_direction';
+	export const PropertySortType: PropTypes.Requireable<PropTypes.InferProps<{
+	    field: PropTypes.Validator<string>;
+	    direction: PropTypes.Validator<"desc" | "asc">;
+	}>>;
+	export interface PropertySort {
+	    field: string;
+	    direction: Direction;
+	}
+
+}
+declare module '@elastic/eui/src/services/sort' {
+	export { SortableProperties } from '@elastic/eui/src/services/sort/sortable_properties';
+	export type { Direction } from '@elastic/eui/src/services/sort/sort_direction';
+	export { SortDirectionType, SortDirection } from '@elastic/eui/src/services/sort/sort_direction';
+	export type { PropertySort } from '@elastic/eui/src/services/sort/property_sort';
+	export { PropertySortType } from '@elastic/eui/src/services/sort/property_sort';
+	export { Comparators } from '@elastic/eui/src/services/sort/comparators';
+
+}
+declare module '@elastic/eui/src/services/string/to_initials' {
 	/**
-	 * Fixed-width numbers for tabular data
+	 * This function calculates the initials/acronym for a given name.
+	 * It defaults to only 2 characters and will take the first character (of each word).
+	 * If only one word is supplied for the name, it will only pass back the first letter of the word,
+	 * unless forced to 2 letters by setting `initialsLength` to `2`.
+	 * It will pass back the characters with the same casing as the original string
+	 * unless otherwise specified.
+	 *
+	 * @param {string} name The full name of the item to turn into initials
+	 * @param {number} initialsLength (Optional) How many characters to show (max 2 allowed)
+	 * @param {string} initials (Optional) Custom initials (max 2 characters)
+	 * @returns {string} True if the color is dark, false otherwise.
 	 */
-	export const euiNumberFormat: ({ euiTheme }: UseEuiTheme) => string;
-	export const useEuiNumberFormat: () => string;
+	export const MAX_INITIALS = 2;
+	export function toInitials(name: string, initialsLength?: 1 | 2, initials?: string): string | null;
 
 }
-declare module '@elastic/eui/src/global_styling/mixins/_responsive' {
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
-	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling/variables';
+declare module '@elastic/eui/src/services/string/to_case' {
 	/**
-	 * Generates a CSS media query rule string based on the input breakpoint *ranges*.
-	 * Examples with default theme breakpoints:
-	 *
-	 * euiBreakpoint(['s']) becomes `@media only screen and (min-width: 575px) and (max-width: 767px)`
-	 * euiBreakpoint(['s', 'l']) becomes `@media only screen and (min-width: 575px) and (max-width: 1199px)`
-	 *
-	 * Use the smallest and largest sizes to generate media queries with only min/max-width.
-	 * Examples with default theme breakpoints:
+	 * This function returns the same string with the first letter of the first word capitalized.
 	 *
-	 * euiBreakpoint(['xs', 'm']) becomes `@media only screen and (max-width: 991px)`
-	 * euiBreakpoint(['l', 'xl']) becomes `@media only screen and (min-width: 992px)`
+	 * @param {string} string The input string
 	 */
-	export const euiBreakpoint: ({ euiTheme }: UseEuiTheme, sizes: [_EuiThemeBreakpoint, ..._EuiThemeBreakpoint[]]) => string;
-	export const useEuiBreakpoint: (sizes: [_EuiThemeBreakpoint, ..._EuiThemeBreakpoint[]]) => string;
+	export function toSentenceCase(string: string): string;
+
+}
+declare module '@elastic/eui/src/services/string/slugify' {
 	/**
-	 * Min/Max width breakpoint utilities that generate only a single min/max query/bound
-	 *
-	 * *Unlike the above euiBreakpoint utility*, these utilities treat breakpoint
-	 * sizes as a one-dimensional point, rather than a two-dimensional *screen range*.
-	 * Examples with default theme breakpoints:
-	 *
-	 * euiMaxBreakpoint('m') becomes `@media only screen and (max-width: 767px)`
-	 * euiMinBreakpoint('m') becomes `@media only screen and (min-width: 768px)`
+	 * Lowercases input and replaces spaces with hyphens:
+	 * e.g. 'GridView Example' -> 'gridview-example'
 	 *
-	 * This is safer and more intentional to use than euiBreakpoint(['xs', 's']) / euiBreakpoint(['m', 'xl'])
-	 * in the event that consumers add larger or smaller custom breakpoints (e.g 'xxs' or `xxl`)
-	 * and if the intention of the media query is actually "m and below/above" vs. "only screens m/l/xl".
+	 * @param {string} string The starting string
+	 * @returns {string} Lowercase, dashed version of the starting staring
 	 */
-	export const euiMinBreakpoint: ({ euiTheme }: UseEuiTheme, size: _EuiThemeBreakpoint) => string;
-	export const useEuiMinBreakpoint: (size: _EuiThemeBreakpoint) => string;
-	export const euiMaxBreakpoint: ({ euiTheme }: UseEuiTheme, size: _EuiThemeBreakpoint) => string;
-	export const useEuiMaxBreakpoint: (size: _EuiThemeBreakpoint) => string;
+	export function slugify(str: string): string;
 
 }
-declare module '@elastic/eui/src/global_styling/mixins' {
-	export * from '@elastic/eui/src/global_styling/mixins/_color';
-	export * from '@elastic/eui/src/global_styling/mixins/_helpers';
-	export * from '@elastic/eui/src/global_styling/mixins/_padding';
-	export * from '@elastic/eui/src/global_styling/mixins/_states';
-	export * from '@elastic/eui/src/global_styling/mixins/_typography';
-	export * from '@elastic/eui/src/global_styling/mixins/_responsive';
+declare module '@elastic/eui/src/services/string' {
+	export { toInitials } from '@elastic/eui/src/services/string/to_initials';
+	export { toSentenceCase } from '@elastic/eui/src/services/string/to_case';
+	export { slugify } from '@elastic/eui/src/services/string/slugify';
 
 }
-declare module '@elastic/eui/src/global_styling/reset/reset' {
-	export const resetStyles = "\n/* // Adapted from Eric Meyer's reset (http://meyerweb.com/eric/tools/css/reset/, v2.0 | 20110126). */\n\n\n*, *:before, *:after {\n  box-sizing: border-box;\n}\n\nhtml, body, div, span, applet, object, iframe,\nh1, h2, h3, h4, h5, h6, p, blockquote, pre,\na, abbr, acronym, address, big, cite, code,\ndel, dfn, em, img, ins, kbd, q, s, samp,\nsmall, strike, strong, sub, sup, tt, var,\nb, u, i, center,\ndl, dt, dd, ol, ul, li,\nfieldset, form, label, legend,\ntable, caption, tbody, tfoot, thead, tr, th, td,\narticle, aside, canvas, details, embed,\nfigure, figcaption, footer, header, hgroup,\nmenu, nav, output, ruby, section, summary,\ntime, mark, audio, video {\n  margin: 0;\n  padding: 0;\n  border: none;\n  vertical-align: baseline;\n}\n\nh1, h2, h3, h4, h5, h6, p {\n  font-family: inherit;\n  font-weight: inherit;\n  font-size: inherit;\n}\n\n/* HTML5 display-role reset for older browsers */\narticle, aside, details, figcaption, figure,\nfooter, header, hgroup, menu, nav, section {\n  display: block;\n}\n\na[href],\nbutton,\n[role='button'] {\n  cursor: pointer;\n}\n\nbutton {\n  background: none;\n  border: none;\n  padding: 0;\n  margin: 0;\n  color: inherit;\n  border-radius: 0;\n  font-size: inherit;\n}\n\ninput {\n  margin: 0;\n  padding: 0;\n}\n\ninput:disabled {\n  opacity: 1; /* required on iOS */\n}\n\nol,\nul {\n  list-style: none;\n}\n\nblockquote,\nq {\n  quotes: none;\n}\n\nblockquote:before,\nblockquote:after,\nq:before,\nq:after {\n  content: '';\n}\n\ntable {\n  border-collapse: collapse;\n  border-spacing: 0;\n}\n\nhr {\n  margin: 0;\n}\n\nfieldset {\n  min-inline-size: auto;\n}\n\n/* Chrome has an issue around RTL languages in SVGs when letter-spacing is negative\n * https://bugs.chromium.org/p/chromium/issues/detail?id=966480\n */\nsvg text {\n  letter-spacing: normal !important;\n}";
+declare module '@elastic/eui/src/services/transition/transition' {
+	export const getTransitionTimings: (element: Element) => {
+	    durationMatch: number;
+	    delayMatch: number;
+	};
+	export const getWaitDuration: (records: MutationRecord[]) => number;
+	export const performOnFrame: (waitDuration: number, toPerform: () => void) => void;
+	export const getDurationAndPerformOnFrame: (records: MutationRecord[], toPerform: () => void) => void;
 
 }
-declare module '@elastic/eui/src/global_styling/reset/global_styles' {
-	
-	export interface EuiGlobalStylesProps {
+declare module '@elastic/eui/src/services/transition' {
+	export { getDurationAndPerformOnFrame, getTransitionTimings, getWaitDuration, performOnFrame, } from '@elastic/eui/src/services/transition/transition';
+
+}
+declare module '@elastic/eui/src/services/window_event/window_event' {
+	import { Component } from 'react'; type EventNames = keyof WindowEventMap;
+	interface Props<Ev extends EventNames> {
+	    event: Ev;
+	    handler: (this: Window, ev: WindowEventMap[Ev]) => any;
 	}
-	export const EuiGlobalStyles: ({}: EuiGlobalStylesProps) => JSX.Element;
+	export class EuiWindowEvent<E extends EventNames> extends Component<Props<E>> {
+	    componentDidMount(): void;
+	    componentDidUpdate(prevProps: Props<E>): void;
+	    componentWillUnmount(): void;
+	    addEvent<Ev extends EventNames>({ event, handler }: Props<Ev>): void;
+	    removeEvent<Ev extends EventNames>({ event, handler }: Props<Ev>): void;
+	    render(): null;
+	}
+	export {};
 
 }
-declare module '@elastic/eui/src/global_styling/utility/animations' {
-	export const euiAnimFadeIn: import("@emotion/serialize").Keyframes;
-	export const euiAnimSlideInUp: (size: string) => import("@emotion/serialize").Keyframes;
-	export const euiAnimSlideX: (size: string) => import("@emotion/serialize").Keyframes;
-	export const euiAnimScale: import("@emotion/serialize").Keyframes;
+declare module '@elastic/eui/src/services/window_event' {
+	export { EuiWindowEvent } from '@elastic/eui/src/services/window_event/window_event';
 
 }
-declare module '@elastic/eui/src/global_styling' {
-	export * from '@elastic/eui/src/global_styling/reset/global_styles';
-	export * from '@elastic/eui/src/global_styling/functions';
-	export * from '@elastic/eui/src/global_styling/variables';
-	export * from '@elastic/eui/src/global_styling/mixins';
-	export * from '@elastic/eui/src/global_styling/utility/animations';
+declare module '@elastic/eui/src/services' {
+	import * as keys from '@elastic/eui/src/services/keys';
+	export { accessibleClickKeys, cascadingMenuKeys, comboBoxKeys, htmlIdGenerator, useGeneratedHtmlId, } from '@elastic/eui/src/services/accessibility';
+	export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from '@elastic/eui/src/services/alignment';
+	export type { HorizontalAlignment } from '@elastic/eui/src/services/alignment';
+	export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint, } from '@elastic/eui/src/services/breakpoint';
+	export type { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
+	export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplimentary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin, } from '@elastic/eui/src/services/color';
+	export type { HSV } from '@elastic/eui/src/services/color';
+	export { useColorPickerState, useColorStopsState } from '@elastic/eui/src/services/color_picker';
+	export type { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker';
+	export * from '@elastic/eui/src/services/console';
+	export { copyToClipboard } from '@elastic/eui/src/services/copy_to_clipboard';
+	export * from '@elastic/eui/src/services/emotion';
+	export * from '@elastic/eui/src/services/findElement';
+	export { dateFormatAliases, formatAuto, formatBoolean, formatDate, formatNumber, formatText, } from '@elastic/eui/src/services/format';
+	export * from '@elastic/eui/src/services/hooks';
+	export { isEvenlyDivisibleBy, isWithinRange } from '@elastic/eui/src/services/number';
+	export { Pager } from '@elastic/eui/src/services/paging';
+	export { calculatePopoverPosition, findPopoverPosition } from '@elastic/eui/src/services/popover';
+	export { Random } from '@elastic/eui/src/services/random';
+	export { getSecureRelForTarget } from '@elastic/eui/src/services/security';
+	export { Comparators, PropertySortType, SortableProperties, SortDirection, SortDirectionType, } from '@elastic/eui/src/services/sort';
+	export type { Direction, PropertySort } from '@elastic/eui/src/services/sort';
+	export { slugify, toInitials, toSentenceCase } from '@elastic/eui/src/services/string';
+	export * from '@elastic/eui/src/services/theme';
+	export { throttle } from '@elastic/eui/src/services/throttle';
+	export { getDurationAndPerformOnFrame, getTransitionTimings, getWaitDuration, performOnFrame, } from '@elastic/eui/src/services/transition';
+	export { EuiWindowEvent } from '@elastic/eui/src/services/window_event';
+	export { keys };
 
 }
 declare module '@elastic/eui/src/components/accessibility/screen_reader_only/screen_reader_only.styles' {
@@ -8169,16 +8190,9 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	import React, { Component, HTMLAttributes, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { WithEuiThemeProps } from '@elastic/eui/src/services';
-	import { EuiButtonIconProps } from '@elastic/eui/src/components/button'; const paddingSizeToClassNameMap: {
-	    none: string;
-	    xs: string;
-	    s: string;
-	    m: string;
-	    l: string;
-	    xl: string;
-	};
-	export const PADDING_SIZES: ("s" | "xs" | "m" | "l" | "xl" | "none")[];
-	export type EuiAccordionSize = keyof typeof paddingSizeToClassNameMap;
+	import { EuiButtonIconProps } from '@elastic/eui/src/components/button';
+	export const PADDING_SIZES: readonly ["none", "xs", "s", "m", "l", "xl"];
+	export type EuiAccordionPaddingSize = (typeof PADDING_SIZES)[number];
 	export type EuiAccordionProps = CommonProps & Omit<HTMLAttributes<HTMLElement>, 'id'> & {
 	    id: string;
 	    /**
@@ -8226,7 +8240,7 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	    /**
 	     * The padding around the exposed accordion content.
 	     */
-	    paddingSize?: EuiAccordionSize;
+	    paddingSize?: EuiAccordionPaddingSize;
 	    /**
 	     * Placement of the arrow indicator, or 'none' to hide it.
 	     */
@@ -8277,7 +8291,6 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	    render(): JSX.Element;
 	}
 	export const EuiAccordion: React.ForwardRefExoticComponent<Omit<EuiAccordionProps, "theme"> & React.RefAttributes<Omit<EuiAccordionProps, "theme">>>;
-	export {};
 
 }
 declare module '@elastic/eui/src/components/accordion' {
@@ -10073,7 +10086,7 @@ declare module '@elastic/eui/src/components/color_picker/color_palette_display/c
 	    s: string;
 	    m: string;
 	};
-	export const SIZES: ("s" | "xs" | "m")[];
+	export const SIZES: ("xs" | "s" | "m")[];
 	export type EuiColorPaletteDisplaySize = keyof typeof sizeToClassNameMap;
 	export interface EuiColorPaletteDisplayShared {
 	    /**
@@ -10523,6 +10536,52 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 	}
 	export {};
 
+}
+declare module '@elastic/eui/src/components/filter_group/filter_button.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFilterButtonDisplay: ({ euiTheme }: UseEuiTheme) => {
+	    flex: string;
+	    minInlineSize: string;
+	};
+	export const euiFilterButtonStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFilterButton: import("@emotion/utils").SerializedStyles;
+	    withNext: import("@emotion/utils").SerializedStyles;
+	    noGrow: import("@emotion/utils").SerializedStyles;
+	    hasNotification: import("@emotion/utils").SerializedStyles;
+	    hasActiveFilters: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiFilterButtonChildStyles: ({ euiTheme }: UseEuiTheme) => {
+	    content: {
+	        euiFilterButton__content: import("@emotion/utils").SerializedStyles;
+	        hasIcon: import("@emotion/utils").SerializedStyles;
+	    };
+	    text: {
+	        euiFilterButton__text: import("@emotion/utils").SerializedStyles;
+	        hasNotification: import("@emotion/utils").SerializedStyles;
+	        euiFilterButton__textShift: import("@emotion/utils").SerializedStyles;
+	    };
+	    notification: {
+	        euiFilterButton__notification: import("@emotion/utils").SerializedStyles;
+	        disabled: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
+}
+declare module '@elastic/eui/src/components/filter_group/filter_group.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiFilterGroupStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiFilterGroup: import("@emotion/utils").SerializedStyles;
+	    fullWidth: import("@emotion/utils").SerializedStyles;
+	    uncompressed: import("@emotion/utils").SerializedStyles;
+	    compressed: import("@emotion/utils").SerializedStyles;
+	    /**
+	     * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
+	     * A fixed width is required because of the shift in widths that can be caused
+	     * by the loading animation that precedes the results.
+	     */
+	    euiFilterGroup__popoverPanel: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/filter_group/filter_group' {
 	import { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
@@ -10543,9 +10602,9 @@ declare module '@elastic/eui/src/components/filter_group/filter_group' {
 }
 declare module '@elastic/eui/src/components/filter_group/filter_button' {
 	import { FunctionComponent } from 'react';
+	import { DistributiveOmit } from '@elastic/eui/src/components/common';
 	import { BadgeNotificationColor } from '@elastic/eui/src/components/badge/notification_badge/badge_notification';
 	import { EuiButtonEmptyProps } from '@elastic/eui/src/components/button/button_empty';
-	import { DistributiveOmit } from '@elastic/eui/src/components/common';
 	export type EuiFilterButtonProps = {
 	    /**
 	     * Bolds the button if true
@@ -13903,8 +13962,6 @@ declare module '@elastic/eui/src/components/tabs/tab.styles' {
 	    m: import("@emotion/utils").SerializedStyles;
 	    l: import("@emotion/utils").SerializedStyles;
 	    xl: import("@emotion/utils").SerializedStyles;
-	    selected: import("@emotion/utils").SerializedStyles;
-	    disabled: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -17874,13 +17931,30 @@ declare module '@elastic/eui/src/components/provider/cache/cache_provider' {
 declare module '@elastic/eui/src/components/provider/cache' {
 	export * from '@elastic/eui/src/components/provider/cache/cache_provider';
 
+}
+declare module '@elastic/eui/src/components/provider/nested/nested_context' {
+	import React, { PropsWithChildren } from 'react';
+	/**
+	 * This util creates a context for EuiProviders to use and determine if they're
+	 * the only (top-most) EuiProvider in the app. If they aren't (i.e., they're
+	 * nested within another EuiProvider) we should throw a warning and not
+	 * render instantiate the nested EuiProvider.
+	 */
+	export const EuiNestedProviderContext: React.Context<boolean>;
+	export const EuiProviderNestedCheck: ({ children }: PropsWithChildren<{}>) => JSX.Element;
+	export const useIsNestedEuiProvider: () => boolean;
+
+}
+declare module '@elastic/eui/src/components/provider/nested' {
+	export * from '@elastic/eui/src/components/provider/nested/nested_context';
+
 }
 declare module '@elastic/eui/src/components/provider/provider' {
 	import React, { PropsWithChildren } from 'react';
 	import { EmotionCache } from '@emotion/css';
 	import { EuiGlobalStylesProps } from '@elastic/eui/src/global_styling/reset/global_styles';
 	import { EuiThemeProviderProps, EuiThemeSystem } from '@elastic/eui/src/services';
-	export interface EuiProviderProps<T> extends Omit<EuiThemeProviderProps<T>, 'children' | 'theme'>, EuiGlobalStylesProps {
+	export interface EuiProviderProps<T> extends Pick<EuiThemeProviderProps<T>, 'colorMode' | 'modify'>, EuiGlobalStylesProps {
 	    /**
 	     * Provide a specific EuiTheme; Defaults to EuiThemeAmsterdam;
 	     * Pass `null` to remove all theming including global reset
@@ -17911,7 +17985,7 @@ declare module '@elastic/eui/src/components/provider/provider' {
 	        utility?: EmotionCache;
 	    };
 	}
-	export const EuiProvider: <T extends {} = {}>({ cache, theme, globalStyles: Globals, utilityClasses: Utilities, colorMode, modify, children, }: React.PropsWithChildren<EuiProviderProps<T>>) => JSX.Element;
+	export const EuiProvider: <T extends {} = {}>({ cache, theme, globalStyles: Globals, utilityClasses: Utilities, colorMode, modify, children, }: React.PropsWithChildren<EuiProviderProps<T>>) => any;
 
 }
 declare module '@elastic/eui/src/components/provider' {
@@ -19352,12 +19426,12 @@ declare module '@elastic/eui/src/components/search_bar/search_filters' {
 	import { SearchFilterConfig } from '@elastic/eui/src/components/search_bar/filters';
 	import { Query } from '@elastic/eui/src/components/search_bar/query';
 	export type { SearchFilterConfig } from '@elastic/eui/src/components/search_bar/filters';
-	interface EuiSearchFiltersProps {
+	interface EuiSearchBarFiltersProps {
 	    query: Query;
 	    onChange: (query: Query) => void;
 	    filters: SearchFilterConfig[];
-	} type DefaultProps = Pick<EuiSearchFiltersProps, 'filters'>;
-	export class EuiSearchFilters extends Component<EuiSearchFiltersProps> {
+	} type DefaultProps = Pick<EuiSearchBarFiltersProps, 'filters'>;
+	export class EuiSearchBarFilters extends Component<EuiSearchBarFiltersProps> {
 	    static defaultProps: DefaultProps;
 	    render(): JSX.Element;
 	}
@@ -19448,6 +19522,7 @@ declare module '@elastic/eui/src/components/search_bar/search_bar' {
 declare module '@elastic/eui/src/components/search_bar' {
 	export type { EuiSearchBarProps, EuiSearchBarOnChangeArgs, QueryType, } from '@elastic/eui/src/components/search_bar/search_bar';
 	export { EuiSearchBar, Query, Ast } from '@elastic/eui/src/components/search_bar/search_bar';
+	export { EuiSearchBarFilters } from '@elastic/eui/src/components/search_bar/search_filters';
 	export type { SearchFilterConfig } from '@elastic/eui/src/components/search_bar/search_filters';
 	export type { FieldValueOptionType } from '@elastic/eui/src/components/search_bar/filters/field_value_selection_filter';
 
@@ -19865,11 +19940,36 @@ declare module '@elastic/eui/src/components/steps/sub_steps' {
 	export type EuiSubStepsProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps>;
 	export const EuiSubSteps: EuiSubStepsProps;
 
+}
+declare module '@elastic/eui/src/components/steps/steps_horizontal.styles' {
+	export const euiStepsHorizontalStyles: () => {
+	    euiStepsHorizontal: import("@emotion/utils").SerializedStyles;
+	    euiStepsHorizontal__item: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/steps/steps_horizontal' {
+	import { FunctionComponent, OlHTMLAttributes } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiStepHorizontalProps } from '@elastic/eui/src/components/steps/step_horizontal';
+	export const SIZES: readonly ["s", "m"];
+	export type EuiStepsHorizontalSizes = (typeof SIZES)[number];
+	export interface EuiStepsHorizontalProps extends OlHTMLAttributes<HTMLOListElement>, CommonProps {
+	    /**
+	     * An array of `EuiStepHorizontal` objects excluding the `step` prop
+	     */
+	    steps: Array<Omit<EuiStepHorizontalProps, 'step'>>;
+	    size?: EuiStepsHorizontalSizes;
+	}
+	export const EuiStepsHorizontal: FunctionComponent<EuiStepsHorizontalProps>;
+
 }
 declare module '@elastic/eui/src/components/steps/step_horizontal.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiStepHorizontalStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiStepHorizontal: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
 	    enabled: import("@emotion/utils").SerializedStyles;
 	    disabled: import("@emotion/utils").SerializedStyles;
 	};
@@ -19886,6 +19986,7 @@ declare module '@elastic/eui/src/components/steps/step_horizontal' {
 	import { ButtonHTMLAttributes, FunctionComponent, MouseEventHandler } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiStepStatus } from '@elastic/eui/src/components/steps/step_number';
+	import { EuiStepsHorizontalSizes } from '@elastic/eui/src/components/steps/steps_horizontal';
 	export interface EuiStepHorizontalProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'>, CommonProps {
 	    onClick: MouseEventHandler<HTMLButtonElement>;
 	    /**
@@ -19903,29 +20004,10 @@ declare module '@elastic/eui/src/components/steps/step_horizontal' {
 	     * The `disabled` prop will override this.
 	     */
 	    status?: EuiStepStatus;
+	    size?: EuiStepsHorizontalSizes;
 	}
 	export const EuiStepHorizontal: FunctionComponent<EuiStepHorizontalProps>;
 
-}
-declare module '@elastic/eui/src/components/steps/steps_horizontal.styles' {
-	export const euiStepsHorizontalStyles: () => {
-	    euiStepsHorizontal: import("@emotion/utils").SerializedStyles;
-	    euiStepsHorizontal__item: import("@emotion/utils").SerializedStyles;
-	};
-
-}
-declare module '@elastic/eui/src/components/steps/steps_horizontal' {
-	import { FunctionComponent, OlHTMLAttributes } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiStepHorizontalProps } from '@elastic/eui/src/components/steps/step_horizontal';
-	export interface EuiStepsHorizontalProps extends OlHTMLAttributes<HTMLOListElement>, CommonProps {
-	    /**
-	     * An array of `EuiStepHorizontal` objects excluding the `step` prop
-	     */
-	    steps: Array<Omit<EuiStepHorizontalProps, 'step'>>;
-	}
-	export const EuiStepsHorizontal: FunctionComponent<EuiStepsHorizontalProps>;
-
 }
 declare module '@elastic/eui/src/components/steps' {
 	export type { EuiStepProps } from '@elastic/eui/src/components/steps/step';
@@ -19935,7 +20017,7 @@ declare module '@elastic/eui/src/components/steps' {
 	export type { EuiSubStepsProps } from '@elastic/eui/src/components/steps/sub_steps';
 	export { EuiSubSteps } from '@elastic/eui/src/components/steps/sub_steps';
 	export { EuiStepHorizontal } from '@elastic/eui/src/components/steps/step_horizontal';
-	export type { EuiStepsHorizontalProps } from '@elastic/eui/src/components/steps/steps_horizontal';
+	export type { EuiStepsHorizontalProps, EuiStepsHorizontalSizes, } from '@elastic/eui/src/components/steps/steps_horizontal';
 	export { EuiStepsHorizontal } from '@elastic/eui/src/components/steps/steps_horizontal';
 	export type { EuiStepStatus, EuiStepNumberProps } from '@elastic/eui/src/components/steps/step_number';
 	export { EuiStepNumber } from '@elastic/eui/src/components/steps/step_number';
@@ -22568,6 +22650,16 @@ declare module '@elastic/eui/src/components/icon/assets/asterisk' {
 	export const icon: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => JSX.Element;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/icon/assets/at' {
+	import type { SVGProps } from 'react';
+	interface SVGRProps {
+	    title?: string;
+	    titleId?: string;
+	}
+	export const icon: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => JSX.Element;
+	export {};
+
 }
 declare module '@elastic/eui/src/components/icon/assets/beaker' {
 	import type { SVGProps } from 'react';
@@ -23918,6 +24010,16 @@ declare module '@elastic/eui/src/components/icon/assets/issue' {
 	export const icon: ({ title, titleId, ...props }: React.SVGProps<SVGSVGElement> & SVGRProps) => JSX.Element;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/icon/assets/key' {
+	import type { SVGProps } from 'react';
+	interface SVGRProps {
+	    title?: string;
+	    titleId?: string;
+	}
+	export const icon: ({ title, titleId, ...props }: SVGProps<SVGSVGElement> & SVGRProps) => JSX.Element;
+	export {};
+
 }
 declare module '@elastic/eui/src/components/icon/assets/keyboard' {
 	import type { SVGProps } from 'react';