@elastic/eui 62.0.0 → 62.1.0

package/eui.d.ts

@@ -301,986 +301,184 @@ declare module '@elastic/eui/src/components/common' {
 	export {};
 
 }
-declare module '@elastic/eui/src/services/breakpoint' {
-	export type EuiBreakpointSize = 'xs' | 's' | 'm' | 'l' | 'xl';
-	export type EuiBreakpoints = {
-	    [key in EuiBreakpointSize]: number;
+declare module '@elastic/eui/src/global_styling/variables/breakpoint' {
+	export const EuiThemeBreakpoints: readonly ["xs", "s", "m", "l", "xl"];
+	export type _EuiThemeBreakpoint = typeof EuiThemeBreakpoints[number];
+	export type _EuiThemeBreakpoints = {
+	    [key in _EuiThemeBreakpoint]: number;
 	};
-	export const BREAKPOINTS: EuiBreakpoints;
-	export const BREAKPOINT_KEYS: EuiBreakpointSize[];
-	/**
-	 * Given the current `width` and an object of `EuiBreakpoints`,
-	 * this function returns the string that is the name of the breakpoint key
-	 * that is less than or equal to the width
-	 *
-	 * @param {number} width Can either be the full window width or any width
-	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
-	 * @returns {string | undefined} Name of the breakpoint key or `undefined` if a key doesn't exist
-	 */
-	export function getBreakpoint(width: number, breakpoints?: EuiBreakpoints): EuiBreakpointSize | undefined;
-	/**
-	 * Given the current `width` and a max breakpoint key,
-	 * this function returns true or false if the `width` falls within the max
-	 * breakpoint or any breakpoints below
-	 *
-	 * @param {number} width Can either be the full window width or any width
-	 * @param {EuiBreakpointSize | number} max The named breakpoint or custom number to check against
-	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
-	 * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
-	 */
-	export function isWithinMaxBreakpoint(width: number, max: EuiBreakpointSize | number, breakpoints?: EuiBreakpoints): boolean;
-	/**
-	 * Given the current `width` and a min breakpoint key,
-	 * this function returns true or false if the `width` falls within the min
-	 * breakpoint or any breakpoints above
-	 *
-	 * @param {number} width Can either be the full window width or any width
-	 * @param {EuiBreakpointSize | number} min The named breakpoint or custom number to check against
-	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
-	 * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
-	 */
-	export function isWithinMinBreakpoint(width: number, min: EuiBreakpointSize | number, breakpoints?: EuiBreakpoints): boolean;
-	/**
-	 * Given the current `width` and an array of breakpoint keys,
-	 * this function returns true or false if the `width` falls within
-	 * any of the named breakpoints
-	 *
-	 * @param {number} width Can either be the full window width or any width
-	 * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
-	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
-	 * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
-	 */
-	export function isWithinBreakpoints(width: number, sizes: EuiBreakpointSize[], breakpoints?: EuiBreakpoints): boolean;
-
-}
-declare module '@elastic/eui/src/services/color/is_color_dark' {
-	/**
-	 * This function calculates if the specified color is "dark", which usually means
-	 * you need light text if you use it as a background color to fulfill WCAG contrast
-	 * requirement.
-	 * The color must be specified via its red, green and blue value in the range of
-	 * 0 to 255.
-	 * The formula is based on this Stackoverflow answer: https://stackoverflow.com/a/3943023
-	 * which itself is based upon the WCAG recommendation for color contrast.
-	 *
-	 * @param {number} red The red component in the range 0 to 255
-	 * @param {number} green The green component in the range 0 to 255
-	 * @param {number} blue The blue component in the range 0 to 255
-	 * @returns {boolean} True if the color is dark, false otherwise.
-	 */
-	export function isColorDark(red: number, green: number, blue: number): boolean;
-
-}
-declare module '@elastic/eui/src/services/color/is_valid_hex' {
-	export function isValidHex(hex: string): boolean;
-
-}
-declare module '@elastic/eui/src/services/color/color_types' {
-	export type rgbDef = [number, number, number];
-	export interface HSV {
-	    h: number;
-	    s: number;
-	    v: number;
-	}
-	export interface RGB {
-	    r: number;
-	    g: number;
-	    b: number;
-	}
-	export type HEX = string;
-
-}
-declare module '@elastic/eui/src/services/color/hex_to_rgb' {
-	import { rgbDef } from '@elastic/eui/src/services/color/color_types';
-	export function hexToRgb(hex: string): rgbDef;
-
-}
-declare module '@elastic/eui/src/services/color/rgb_to_hsv' {
-	import { HSV, RGB } from '@elastic/eui/src/services/color/color_types';
-	export function rgbToHsv({ r, g, b }: RGB): HSV;
 
 }
-declare module '@elastic/eui/src/services/color/hex_to_hsv' {
-	import { HEX, HSV } from '@elastic/eui/src/services/color/color_types';
-	export function hexToHsv(hex: HEX): HSV;
-
-}
-declare module '@elastic/eui/src/services/color/hsv_to_rgb' {
-	import { HSV, RGB } from '@elastic/eui/src/services/color/color_types';
-	export function hsvToRgb({ h, s, v }: HSV): RGB;
-
-}
-declare module '@elastic/eui/src/services/color/rgb_to_hex' {
-	export function rgbToHex(rgb: string): string;
-
-}
-declare module '@elastic/eui/src/services/color/hsv_to_hex' {
-	import { HEX, HSV } from '@elastic/eui/src/services/color/color_types';
-	export function hsvToHex({ h, s, v }: HSV): HEX;
-
-}
-declare module '@elastic/eui/src/services/color/luminance_and_contrast' {
-	import { rgbDef } from '@elastic/eui/src/services/color/color_types';
-	export function calculateLuminance(r: number, g: number, b: number): number;
-	export function calculateContrast(rgb1: rgbDef, rgb2: rgbDef): number;
-
-}
-declare module '@elastic/eui/src/services/color/color_palette' {
-	export const MID_COLOR_STOP = "#EBEFF5";
-	/**
-	 * This function takes an array of colors and returns an array of interpolated
-	 * colors based on the number of steps/len needed for use in UI elements such as charts.
-	 * Derived from https://github.com/gka/palettes (Unlicensed)
-	 */
-	export function colorPalette(
+declare module '@elastic/eui/src/global_styling/variables/animations' {
+	import { CSSProperties } from 'react';
 	/**
-	 * The main color code or array of codes
+	 * A constant storing the `prefers-reduced-motion` media query
+	 * so that when it is turned off, animations are not run.
 	 */
-	colors: string[], 
+	export const euiCanAnimate = "@media screen and (prefers-reduced-motion: no-preference)";
 	/**
-	 * The number of colors in the resulting array (default 10)
+	 * A constant storing the `prefers-reduced-motion` media query that will
+	 * only apply the content if the setting is off (reduce).
 	 */
-	len?: number, 
+	export const euiCantAnimate = "@media screen and (prefers-reduced-motion: reduce)";
 	/**
-	 * Forces color interpolation to be calculated separately for each half (default false)
+	 * Speeds / Durations / Delays
 	 */
-	diverging?: boolean, 
+	export const EuiThemeAnimationSpeeds: readonly ["extraFast", "fast", "normal", "slow", "extraSlow"];
+	export type _EuiThemeAnimationSpeed = typeof EuiThemeAnimationSpeeds[number];
+	export type _EuiThemeAnimationSpeeds = Record<_EuiThemeAnimationSpeed, CSSProperties['animationDuration']>;
 	/**
-	 * Uses a more static interpolation for non-continuous spectrums
+	 * Easings / Timing functions
 	 */
-	categorical?: boolean): string[];
+	export const EuiThemeAnimationEasings: readonly ["bounce", "resistance"];
+	export type _EuiThemeAnimationEasing = typeof EuiThemeAnimationEasings[number];
+	export type _EuiThemeAnimationEasings = Record<_EuiThemeAnimationEasing, CSSProperties['animationTimingFunction']>;
+	export type _EuiThemeAnimation = _EuiThemeAnimationEasings & _EuiThemeAnimationSpeeds;
 
 }
-declare module '@elastic/eui/src/services/color/eui_palettes' {
-	export type EuiPalette = string[];
-	export interface EuiPaletteColorBlindProps {
+declare module '@elastic/eui/src/global_styling/variables/colors' {
+	import { ColorModeSwitch, StrictColorModeSwitch } from '@elastic/eui/src/services/theme/types';
+	/**
+	 * Top 5 colors
+	 */
+	export type _EuiThemeBrandColors = {
 	    /**
-	     * How many variations of the series is needed
+	     * Main brand color and used for most **call to actions** like buttons and links.
 	     */
-	    rotations?: number;
+	    primary: ColorModeSwitch;
 	    /**
-	     * Order similar colors as `group`s or just `append` each variation
+	     * Pulls attention to key indicators like **notifications** or number of selections.
 	     */
-	    order?: 'append' | 'group';
+	    accent: ColorModeSwitch;
 	    /**
-	     * Specifies if the direction of the color variations
+	     * Used for **positive** messages/graphics and additive actions.
 	     */
-	    direction?: 'lighter' | 'darker' | 'both';
+	    success: ColorModeSwitch;
 	    /**
-	     * Use the default sort order, or re-sort them based on the color wheel (natural)
+	     * Used for **warnings** and actions that have a potential to be destructive.
 	     */
-	    sortBy?: 'default' | 'natural';
+	    warning: ColorModeSwitch;
 	    /**
-	     * Shift the sorting order by a certain number when used in conjunction with `'natural'` `sortBy`.
-	     * Defaults to a number close to green.
+	     * Used for **negative** messages/graphics like errors and destructive actions.
 	     */
-	    sortShift?: string;
-	}
-	export const euiPaletteColorBlind: ({ rotations, order, direction, sortBy, sortShift, }?: EuiPaletteColorBlindProps) => EuiPalette;
+	    danger: ColorModeSwitch;
+	};
 	/**
-	 * Color blind palette with text is meant for use when text is applied on top of the color.
-	 * It increases the brightness of the color to give the text more contrast.
+	 * Every brand color must have a contrast computed text equivelant
 	 */
-	export const euiPaletteColorBlindBehindText: (paletteProps?: EuiPaletteColorBlindProps) => string[];
-	export const euiPaletteForLightBackground: () => EuiPalette;
-	export const euiPaletteForDarkBackground: () => EuiPalette;
-	export const euiPaletteForStatus: (steps: number) => EuiPalette;
-	export const euiPaletteForTemperature: (steps: number) => EuiPalette;
-	export const euiPaletteComplimentary: (steps: number) => EuiPalette;
-	export const euiPaletteNegative: (steps: number) => EuiPalette;
-	export const euiPalettePositive: (steps: number) => EuiPalette;
-	export const euiPaletteCool: (steps: number) => EuiPalette;
-	export const euiPaletteWarm: (steps: number) => EuiPalette;
-	export const euiPaletteGray: (steps: number) => EuiPalette;
-
-}
-declare module '@elastic/eui/src/services/color/visualization_colors' {
-	export const VISUALIZATION_COLORS: import ("@elastic/eui/src/services/color/eui_palettes").EuiPalette;
-	export const DEFAULT_VISUALIZATION_COLOR: string;
-
-}
-declare module '@elastic/eui/src/components/color_picker/utils' {
-	import chroma, { ColorSpaces } from 'chroma-js';
-	import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops';
-	export const getEventPosition: (location: {
-	    x: number;
-	    y: number;
-	}, container: HTMLElement) => {
-	    left: number;
-	    top: number;
-	    width: number;
-	    height: number;
+	export type _EuiThemeBrandTextColors = {
+	    /**
+	     * Typically computed against `colors.primary`
+	     */
+	    primaryText: ColorModeSwitch;
+	    /**
+	     * Typically computed against `colors.accent`
+	     */
+	    accentText: ColorModeSwitch;
+	    /**
+	     * Typically computed against `colors.success`
+	     */
+	    successText: ColorModeSwitch;
+	    /**
+	     * Typically computed against `colors.warning`
+	     */
+	    warningText: ColorModeSwitch;
+	    /**
+	     * Typically computed against `colors.danger`
+	     */
+	    dangerText: ColorModeSwitch;
 	};
-	export const HEX_FALLBACK = "";
-	export const HSV_FALLBACK: ColorSpaces['hsv'];
-	export const RGB_FALLBACK: ColorSpaces['rgba'];
-	export const RGB_JOIN = ", ";
-	export const parseColor: (input?: string | null | undefined) => string | number[] | null;
-	export const chromaValid: (color: string | number[]) => boolean;
-	export const getChromaColor: (input?: string | null | undefined, allowOpacity?: boolean) => chroma.Color | null;
-	export const getLinearGradient: (palette: string[] | ColorStop[]) => string;
-	export const getFixedLinearGradient: (palette: string[] | ColorStop[]) => {
-	    color: string;
-	    width: string;
-	}[];
-
-}
-declare module '@elastic/eui/src/components/form/range/utils' {
-	export const EUI_THUMB_SIZE = 16;
-	export const calculateThumbPosition: (value: number, min: number, max: number, width: number, thumbSize?: number) => number;
+	export type _EuiThemeShadeColors = {
+	    /**
+	     * Used as the background color of primary **page content and panels** including modals and flyouts.
+	     */
+	    emptyShade: ColorModeSwitch;
+	    /**
+	     * Used to lightly shade areas that contain **secondary content** or contain panel-like components.
+	     */
+	    lightestShade: ColorModeSwitch;
+	    /**
+	     * Used for most **borders** and dividers (horizontal rules).
+	     */
+	    lightShade: ColorModeSwitch;
+	    /**
+	     * The middle gray for all themes; this is the base for `colors.subdued`.
+	     */
+	    mediumShade: ColorModeSwitch;
+	    /**
+	     * Slightly subtle graphic color
+	     */
+	    darkShade: ColorModeSwitch;
+	    /**
+	     * Used as the **text** color and the background color for **inverted components** like tooltips and the control bar.
+	     */
+	    darkestShade: ColorModeSwitch;
+	    /**
+	     * The opposite of `emptyShade`
+	     */
+	    fullShade: ColorModeSwitch;
+	};
+	export type _EuiThemeTextColors = {
+	    /**
+	     * Computed against `colors.darkestShade`
+	     */
+	    text: ColorModeSwitch;
+	    /**
+	     * Computed against `colors.text`
+	     */
+	    title: ColorModeSwitch;
+	    /**
+	     * Computed against `colors.mediumShade`
+	     */
+	    subduedText: ColorModeSwitch;
+	    /**
+	     * Computed against `colors.primaryText`
+	     */
+	    link: ColorModeSwitch;
+	};
+	export type _EuiThemeSpecialColors = {
+	    /**
+	     * The background color for the **whole window (body)** and is a computed value of `colors.lightestShade`.
+	     * Provides denominator (background) value for **contrast calculations**.
+	     */
+	    body: ColorModeSwitch;
+	    /**
+	     * Used to **highlight text** when matching against search strings
+	     */
+	    highlight: ColorModeSwitch;
+	    /**
+	     * Computed against `colors.darkestShade`
+	     */
+	    disabled: ColorModeSwitch;
+	    /**
+	     * Computed against `colors.disabled`
+	     */
+	    disabledText: ColorModeSwitch;
+	    /**
+	     * The base color for shadows that gets `transparentized`
+	     * at a value based on the `colorMode` and then layered.
+	     */
+	    shadow: ColorModeSwitch;
+	};
+	export type _EuiThemeConstantColors = {
+	    /**
+	     * Purest **white**
+	     */
+	    ghost: string;
+	    /**
+	     * Purest **black**
+	     */
+	    ink: string;
+	};
+	export type _EuiThemeColorsMode = _EuiThemeBrandColors & _EuiThemeBrandTextColors & _EuiThemeShadeColors & _EuiThemeSpecialColors & _EuiThemeTextColors;
+	export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> & _EuiThemeConstantColors;
 
 }
-declare module '@elastic/eui/src/components/color_picker/color_stops/utils' {
-	import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb';
-	export const removeStop: (colorStops: ColorStop[], index: number) => ColorStop[];
-	export const addDefinedStop: (colorStops: ColorStop[], stop: ColorStop['stop'], color?: ColorStop['color']) => ColorStop[];
-	export const addStop: (colorStops: ColorStop[], color: string | undefined, max: number) => ColorStop[];
-	export const isColorInvalid: (color: string, showAlpha?: boolean) => boolean;
-	export const isStopInvalid: (stop: ColorStop['stop']) => boolean;
-	export const isInvalid: (colorStops: ColorStop[], showAlpha?: boolean) => boolean;
-	export const calculateScale: (trackWidth: number) => number;
-	export const getStopFromMouseLocation: (location: {
-	    x: number;
-	    y: number;
-	}, ref: HTMLDivElement, min: number, max: number) => number;
-	export const getPositionFromStop: (stop: ColorStop['stop'], ref: HTMLDivElement, min: number, max: number) => number;
-
-}
-declare module '@elastic/eui/src/components/icon/icon_map' {
-	export const typeToPathMap: {
-	    accessibility: string;
-	    addDataApp: string;
-	    advancedSettingsApp: string;
-	    agentApp: string;
-	    aggregate: string;
-	    alert: string;
-	    analyzeEvent: string;
-	    annotation: string;
-	    apmApp: string;
-	    apmTrace: string;
-	    appSearchApp: string;
-	    apps: string;
-	    arrowDown: string;
-	    arrowLeft: string;
-	    arrowRight: string;
-	    arrowUp: string;
-	    arrowStart: string;
-	    arrowEnd: string;
-	    asterisk: string;
-	    auditbeatApp: string;
-	    beaker: string;
-	    bell: string;
-	    bellSlash: string;
-	    bolt: string;
-	    boxesHorizontal: string;
-	    boxesVertical: string;
-	    branch: string;
-	    branchUser: string;
-	    broom: string;
-	    brush: string;
-	    bug: string;
-	    bullseye: string;
-	    calendar: string;
-	    canvasApp: string;
-	    casesApp: string;
-	    check: string;
-	    checkInCircleFilled: string;
-	    cheer: string;
-	    classificationJob: string;
-	    clock: string;
-	    cloudDrizzle: string;
-	    cloudStormy: string;
-	    cloudSunny: string;
-	    cluster: string;
-	    codeApp: string;
-	    color: string;
-	    compute: string;
-	    console: string;
-	    consoleApp: string;
-	    container: string;
-	    continuityAbove: string;
-	    continuityAboveBelow: string;
-	    continuityBelow: string;
-	    continuityWithin: string;
-	    controlsHorizontal: string;
-	    controlsVertical: string;
-	    copy: string;
-	    copyClipboard: string;
-	    createAdvancedJob: string;
-	    createMultiMetricJob: string;
-	    createPopulationJob: string;
-	    createSingleMetricJob: string;
-	    cross: string;
-	    crossClusterReplicationApp: string;
-	    crossInACircleFilled: string;
-	    crosshairs: string;
-	    currency: string;
-	    cut: string;
-	    dashboardApp: string;
-	    dataVisualizer: string;
-	    database: string;
-	    desktop: string;
-	    devToolsApp: string;
-	    discoverApp: string;
-	    document: string;
-	    documentEdit: string;
-	    documentation: string;
-	    documents: string;
-	    dot: string;
-	    doubleArrowLeft: string;
-	    doubleArrowRight: string;
-	    download: string;
-	    editorAlignCenter: string;
-	    editorAlignLeft: string;
-	    editorAlignRight: string;
-	    editorBold: string;
-	    editorChecklist: string;
-	    editorCodeBlock: string;
-	    editorComment: string;
-	    editorDistributeHorizontal: string;
-	    editorDistributeVertical: string;
-	    editorHeading: string;
-	    editorItalic: string;
-	    editorItemAlignBottom: string;
-	    editorItemAlignCenter: string;
-	    editorItemAlignLeft: string;
-	    editorItemAlignMiddle: string;
-	    editorItemAlignRight: string;
-	    editorItemAlignTop: string;
-	    editorLink: string;
-	    editorOrderedList: string;
-	    editorPositionBottomLeft: string;
-	    editorPositionBottomRight: string;
-	    editorPositionTopLeft: string;
-	    editorPositionTopRight: string;
-	    editorRedo: string;
-	    editorStrike: string;
-	    editorTable: string;
-	    editorUnderline: string;
-	    editorUndo: string;
-	    editorUnorderedList: string;
-	    email: string;
-	    empty: string;
-	    emsApp: string;
-	    eql: string;
-	    eraser: string;
-	    exit: string;
-	    expand: string;
-	    expandMini: string;
-	    exportAction: string;
-	    eye: string;
-	    eyeClosed: string;
-	    faceHappy: string;
-	    faceNeutral: string;
-	    faceSad: string;
-	    filebeatApp: string;
-	    filter: string;
-	    flag: string;
-	    fleetApp: string;
-	    fold: string;
-	    folderCheck: string;
-	    folderClosed: string;
-	    folderExclamation: string;
-	    folderOpen: string;
-	    frameNext: string;
-	    framePrevious: string;
-	    fullScreen: string;
-	    fullScreenExit: string;
-	    function: string;
-	    gear: string;
-	    gisApp: string;
-	    glasses: string;
-	    globe: string;
-	    grab: string;
-	    grabHorizontal: string;
-	    graphApp: string;
-	    grid: string;
-	    grokApp: string;
-	    heart: string;
-	    heartbeatApp: string;
-	    heatmap: string;
-	    help: string;
-	    home: string;
-	    iInCircle: string;
-	    image: string;
-	    importAction: string;
-	    indexClose: string;
-	    indexEdit: string;
-	    indexFlush: string;
-	    indexManagementApp: string;
-	    indexMapping: string;
-	    indexOpen: string;
-	    indexPatternApp: string;
-	    indexRollupApp: string;
-	    indexRuntime: string;
-	    indexSettings: string;
-	    inputOutput: string;
-	    inspect: string;
-	    invert: string;
-	    ip: string;
-	    keyboard: string;
-	    kqlField: string;
-	    kqlFunction: string;
-	    kqlOperand: string;
-	    kqlSelector: string;
-	    kqlValue: string;
-	    kubernetesNode: string;
-	    kubernetesPod: string;
-	    layers: string;
-	    lensApp: string;
-	    lettering: string;
-	    lineDashed: string;
-	    lineDotted: string;
-	    lineSolid: string;
-	    link: string;
-	    list: string;
-	    listAdd: string;
-	    lock: string;
-	    lockOpen: string;
-	    logoAWS: string;
-	    logoAWSMono: string;
-	    logoAerospike: string;
-	    logoApache: string;
-	    logoAppSearch: string;
-	    logoAzure: string;
-	    logoAzureMono: string;
-	    logoBeats: string;
-	    logoBusinessAnalytics: string;
-	    logoCeph: string;
-	    logoCloud: string;
-	    logoCloudEnterprise: string;
-	    logoCode: string;
-	    logoCodesandbox: string;
-	    logoCouchbase: string;
-	    logoDocker: string;
-	    logoDropwizard: string;
-	    logoElastic: string;
-	    logoElasticStack: string;
-	    logoElasticsearch: string;
-	    logoEnterpriseSearch: string;
-	    logoEtcd: string;
-	    logoGCP: string;
-	    logoGCPMono: string;
-	    logoGithub: string;
-	    logoGmail: string;
-	    logoGolang: string;
-	    logoGoogleG: string;
-	    logoHAproxy: string;
-	    logoIBM: string;
-	    logoIBMMono: string;
-	    logoKafka: string;
-	    logoKibana: string;
-	    logoKubernetes: string;
-	    logoLogging: string;
-	    logoLogstash: string;
-	    logoMaps: string;
-	    logoMemcached: string;
-	    logoMetrics: string;
-	    logoMongodb: string;
-	    logoMySQL: string;
-	    logoNginx: string;
-	    logoObservability: string;
-	    logoOsquery: string;
-	    logoPhp: string;
-	    logoPostgres: string;
-	    logoPrometheus: string;
-	    logoRabbitmq: string;
-	    logoRedis: string;
-	    logoSecurity: string;
-	    logoSiteSearch: string;
-	    logoSketch: string;
-	    logoSlack: string;
-	    logoUptime: string;
-	    logoWebhook: string;
-	    logoWindows: string;
-	    logoWorkplaceSearch: string;
-	    logsApp: string;
-	    logstashFilter: string;
-	    logstashIf: string;
-	    logstashInput: string;
-	    logstashOutput: string;
-	    logstashQueue: string;
-	    machineLearningApp: string;
-	    magnet: string;
-	    magnifyWithExclamation: string;
-	    magnifyWithMinus: string;
-	    magnifyWithPlus: string;
-	    managementApp: string;
-	    mapMarker: string;
-	    memory: string;
-	    menu: string;
-	    menuDown: string;
-	    menuLeft: string;
-	    menuRight: string;
-	    menuUp: string;
-	    merge: string;
-	    metricbeatApp: string;
-	    metricsApp: string;
-	    minimize: string;
-	    minus: string;
-	    minusInCircle: string;
-	    minusInCircleFilled: string;
-	    mobile: string;
-	    monitoringApp: string;
-	    moon: string;
-	    namespace: string;
-	    nested: string;
-	    node: string;
-	    notebookApp: string;
-	    number: string;
-	    offline: string;
-	    online: string;
-	    outlierDetectionJob: string;
-	    package: string;
-	    packetbeatApp: string;
-	    pageSelect: string;
-	    pagesSelect: string;
-	    paperClip: string;
-	    partial: string;
-	    pause: string;
-	    payment: string;
-	    pencil: string;
-	    percent: string;
-	    pin: string;
-	    pinFilled: string;
-	    pipelineApp: string;
-	    play: string;
-	    playFilled: string;
-	    plus: string;
-	    plusInCircle: string;
-	    plusInCircleFilled: string;
-	    popout: string;
-	    push: string;
-	    questionInCircle: string;
-	    quote: string;
-	    recentlyViewedApp: string;
-	    refresh: string;
-	    regressionJob: string;
-	    reporter: string;
-	    reportingApp: string;
-	    returnKey: string;
-	    save: string;
-	    savedObjectsApp: string;
-	    scale: string;
-	    search: string;
-	    searchProfilerApp: string;
-	    securityAnalyticsApp: string;
-	    securityApp: string;
-	    securitySignal: string;
-	    securitySignalDetected: string;
-	    securitySignalResolved: string;
-	    sessionViewer: string;
-	    shard: string;
-	    share: string;
-	    snowflake: string;
-	    sortDown: string;
-	    sortLeft: string;
-	    sortRight: string;
-	    sortUp: string;
-	    sortable: string;
-	    spacesApp: string;
-	    sqlApp: string;
-	    starEmpty: string;
-	    starEmptySpace: string;
-	    starFilled: string;
-	    starFilledSpace: string;
-	    starMinusEmpty: string;
-	    starMinusFilled: string;
-	    starPlusEmpty: string;
-	    starPlusFilled: string;
-	    stats: string;
-	    stop: string;
-	    stopFilled: string;
-	    stopSlash: string;
-	    storage: string;
-	    string: string;
-	    submodule: string;
-	    sun: string;
-	    swatchInput: string;
-	    symlink: string;
-	    tableDensityCompact: string;
-	    tableDensityExpanded: string;
-	    tableDensityNormal: string;
-	    tableOfContents: string;
-	    tag: string;
-	    tear: string;
-	    temperature: string;
-	    timeline: string;
-	    timelionApp: string;
-	    timeRefresh: string;
-	    timeslider: string;
-	    training: string;
-	    trash: string;
-	    unfold: string;
-	    unlink: string;
-	    upgradeAssistantApp: string;
-	    uptimeApp: string;
-	    user: string;
-	    userAvatar: string;
-	    users: string;
-	    usersRolesApp: string;
-	    vector: string;
-	    videoPlayer: string;
-	    visArea: string;
-	    visAreaStacked: string;
-	    visBarHorizontal: string;
-	    visBarHorizontalStacked: string;
-	    visBarVertical: string;
-	    visBarVerticalStacked: string;
-	    visGauge: string;
-	    visGoal: string;
-	    visLine: string;
-	    visMapCoordinate: string;
-	    visMapRegion: string;
-	    visMetric: string;
-	    visPie: string;
-	    visTable: string;
-	    visTagCloud: string;
-	    visText: string;
-	    visTimelion: string;
-	    visVega: string;
-	    visVisualBuilder: string;
-	    visualizeApp: string;
-	    watchesApp: string;
-	    wordWrap: string;
-	    wordWrapDisabled: string;
-	    workplaceSearchApp: string;
-	    wrench: string;
-	    tokenAlias: string;
-	    tokenAnnotation: string;
-	    tokenArray: string;
-	    tokenBinary: string;
-	    tokenBoolean: string;
-	    tokenClass: string;
-	    tokenCompletionSuggester: string;
-	    tokenConstant: string;
-	    tokenDate: string;
-	    tokenDenseVector: string;
-	    tokenElement: string;
-	    tokenEnum: string;
-	    tokenEnumMember: string;
-	    tokenEvent: string;
-	    tokenException: string;
-	    tokenField: string;
-	    tokenFile: string;
-	    tokenFlattened: string;
-	    tokenFunction: string;
-	    tokenGeo: string;
-	    tokenHistogram: string;
-	    tokenInterface: string;
-	    tokenIP: string;
-	    tokenJoin: string;
-	    tokenKey: string;
-	    tokenKeyword: string;
-	    tokenMethod: string;
-	    tokenMetricCounter: string;
-	    tokenMetricGauge: string;
-	    tokenModule: string;
-	    tokenNamespace: string;
-	    tokenNested: string;
-	    tokenNull: string;
-	    tokenNumber: string;
-	    tokenObject: string;
-	    tokenOperator: string;
-	    tokenPackage: string;
-	    tokenParameter: string;
-	    tokenPercolator: string;
-	    tokenProperty: string;
-	    tokenRange: string;
-	    tokenRankFeature: string;
-	    tokenRankFeatures: string;
-	    tokenRepo: string;
-	    tokenSearchType: string;
-	    tokenShape: string;
-	    tokenString: string;
-	    tokenStruct: string;
-	    tokenSymbol: string;
-	    tokenTag: string;
-	    tokenText: string;
-	    tokenTokenCount: string;
-	    tokenVariable: string;
-	};
-
-}
-declare module '@elastic/eui/src/components/icon/assets/empty' {
-	import * as React from 'react';
-	interface SVGRProps {
-	    title?: string;
-	    titleId?: string;
-	}
-	export const icon: ({ title, titleId, ...props }: React.SVGProps<SVGSVGElement> & SVGRProps) => JSX.Element;
-	export {};
-
-}
-declare module '@elastic/eui/src/services/react' {
-	export function enqueueStateChange(fn: Function): void;
-
-}
-declare module '@elastic/eui/src/components/icon/named_colors' {
-	export const COLORS: readonly ["default", "primary", "success", "accent", "warning", "danger", "text", "subdued", "ghost", "inherit"];
-	export type NamedColor = typeof COLORS[number];
-	export function isNamedColor(name: string): boolean;
-
-}
-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/global_styling/variables/animations' {
-	import { CSSProperties } from 'react';
-	/**
-	 * A constant storing the `prefers-reduced-motion` media query
-	 * so that when it is turned off, animations are not run.
-	 */
-	export const euiCanAnimate = "@media screen and (prefers-reduced-motion: no-preference)";
-	/**
-	 * A constant storing the `prefers-reduced-motion` media query that will
-	 * only apply the content if the setting is off (reduce).
-	 */
-	export const euiCantAnimate = "@media screen and (prefers-reduced-motion: reduce)";
-	/**
-	 * Speeds / Durations / Delays
-	 */
-	export const EuiThemeAnimationSpeeds: readonly ["extraFast", "fast", "normal", "slow", "extraSlow"];
-	export type _EuiThemeAnimationSpeed = typeof EuiThemeAnimationSpeeds[number];
-	export type _EuiThemeAnimationSpeeds = Record<_EuiThemeAnimationSpeed, CSSProperties['animationDuration']>;
-	/**
-	 * Easings / Timing functions
-	 */
-	export const EuiThemeAnimationEasings: readonly ["bounce", "resistance"];
-	export type _EuiThemeAnimationEasing = typeof EuiThemeAnimationEasings[number];
-	export type _EuiThemeAnimationEasings = Record<_EuiThemeAnimationEasing, CSSProperties['animationTimingFunction']>;
-	export type _EuiThemeAnimation = _EuiThemeAnimationEasings & _EuiThemeAnimationSpeeds;
-
-}
-declare module '@elastic/eui/src/global_styling/variables/breakpoint' {
-	export const EuiThemeBreakpoints: readonly ["xs", "s", "m", "l", "xl"];
-	export type _EuiThemeBreakpoint = typeof EuiThemeBreakpoints[number];
-	export type _EuiThemeBreakpoints = {
-	    [key in _EuiThemeBreakpoint]: number;
-	};
-
-}
-declare module '@elastic/eui/src/global_styling/variables/borders' {
-	import { CSSProperties } from 'react';
-	import { ColorModeSwitch } from '@elastic/eui/src/services/theme/types';
-	export interface _EuiThemeBorderWidthValues {
-	    /**
-	     * Thinnest width for border
-	     */
-	    thin: CSSProperties['borderWidth'];
-	    /**
-	     * Thickest width for border
-	     */
-	    thick: CSSProperties['borderWidth'];
-	}
-	export interface _EuiThemeBorderRadiusValues {
-	    /**
-	     * Primary corner radius size
-	     */
-	    medium: CSSProperties['borderRadius'];
-	    /**
-	     * Small corner radius size
-	     */
-	    small: CSSProperties['borderRadius'];
-	}
-	export interface _EuiThemeBorderColorValues {
-	    /**
-	     * Color for all borders; Default is `colors.lightShade`
-	     */
-	    color: ColorModeSwitch;
-	}
-	export interface _EuiThemeBorderValues extends _EuiThemeBorderColorValues {
-	    /**
-	     * Varied thicknesses for borders
-	     */
-	    width: _EuiThemeBorderWidthValues;
-	    /**
-	     * Varied border radii
-	     */
-	    radius: _EuiThemeBorderRadiusValues;
-	}
-	export interface _EuiThemeBorderTypes {
-	    /**
-	     * Full `border` property string computed using `border.width.thin` and `border.color`
-	     */
-	    thin: CSSProperties['border'];
-	    /**
-	     * Full `border` property string computed using `border.width.thick` and `border.color`
-	     */
-	    thick: CSSProperties['border'];
-	    /**
-	     * Full editable style `border` property string computed using `border.width.thick` and `border.color`
-	     */
-	    editable: CSSProperties['border'];
-	}
-	export type _EuiThemeBorder = _EuiThemeBorderValues & _EuiThemeBorderTypes;
-
-}
-declare module '@elastic/eui/src/global_styling/variables/colors' {
-	import { ColorModeSwitch, StrictColorModeSwitch } from '@elastic/eui/src/services/theme/types';
-	/**
-	 * Top 5 colors
-	 */
-	export type _EuiThemeBrandColors = {
-	    /**
-	     * Main brand color and used for most **call to actions** like buttons and links.
-	     */
-	    primary: ColorModeSwitch;
-	    /**
-	     * Pulls attention to key indicators like **notifications** or number of selections.
-	     */
-	    accent: ColorModeSwitch;
-	    /**
-	     * Used for **positive** messages/graphics and additive actions.
-	     */
-	    success: ColorModeSwitch;
-	    /**
-	     * Used for **warnings** and actions that have a potential to be destructive.
-	     */
-	    warning: ColorModeSwitch;
-	    /**
-	     * Used for **negative** messages/graphics like errors and destructive actions.
-	     */
-	    danger: ColorModeSwitch;
-	};
-	/**
-	 * Every brand color must have a contrast computed text equivelant
-	 */
-	export type _EuiThemeBrandTextColors = {
-	    /**
-	     * Typically computed against `colors.primary`
-	     */
-	    primaryText: ColorModeSwitch;
-	    /**
-	     * Typically computed against `colors.accent`
-	     */
-	    accentText: ColorModeSwitch;
-	    /**
-	     * Typically computed against `colors.success`
-	     */
-	    successText: ColorModeSwitch;
-	    /**
-	     * Typically computed against `colors.warning`
-	     */
-	    warningText: ColorModeSwitch;
-	    /**
-	     * Typically computed against `colors.danger`
-	     */
-	    dangerText: ColorModeSwitch;
-	};
-	export type _EuiThemeShadeColors = {
-	    /**
-	     * Used as the background color of primary **page content and panels** including modals and flyouts.
-	     */
-	    emptyShade: ColorModeSwitch;
-	    /**
-	     * Used to lightly shade areas that contain **secondary content** or contain panel-like components.
-	     */
-	    lightestShade: ColorModeSwitch;
-	    /**
-	     * Used for most **borders** and dividers (horizontal rules).
-	     */
-	    lightShade: ColorModeSwitch;
-	    /**
-	     * The middle gray for all themes; this is the base for `colors.subdued`.
-	     */
-	    mediumShade: ColorModeSwitch;
-	    /**
-	     * Slightly subtle graphic color
-	     */
-	    darkShade: ColorModeSwitch;
-	    /**
-	     * Used as the **text** color and the background color for **inverted components** like tooltips and the control bar.
-	     */
-	    darkestShade: ColorModeSwitch;
-	    /**
-	     * The opposite of `emptyShade`
-	     */
-	    fullShade: ColorModeSwitch;
-	};
-	export type _EuiThemeTextColors = {
-	    /**
-	     * Computed against `colors.darkestShade`
-	     */
-	    text: ColorModeSwitch;
-	    /**
-	     * Computed against `colors.text`
-	     */
-	    title: ColorModeSwitch;
-	    /**
-	     * Computed against `colors.mediumShade`
-	     */
-	    subduedText: ColorModeSwitch;
-	    /**
-	     * Computed against `colors.primaryText`
-	     */
-	    link: ColorModeSwitch;
-	};
-	export type _EuiThemeSpecialColors = {
-	    /**
-	     * The background color for the **whole window (body)** and is a computed value of `colors.lightestShade`.
-	     * Provides denominator (background) value for **contrast calculations**.
-	     */
-	    body: ColorModeSwitch;
-	    /**
-	     * Used to **highlight text** when matching against search strings
-	     */
-	    highlight: ColorModeSwitch;
-	    /**
-	     * Computed against `colors.darkestShade`
-	     */
-	    disabled: ColorModeSwitch;
-	    /**
-	     * Computed against `colors.disabled`
-	     */
-	    disabledText: ColorModeSwitch;
-	    /**
-	     * The base color for shadows that gets `transparentized`
-	     * at a value based on the `colorMode` and then layered.
-	     */
-	    shadow: ColorModeSwitch;
-	};
-	export type _EuiThemeConstantColors = {
-	    /**
-	     * Purest **white**
-	     */
-	    ghost: string;
-	    /**
-	     * Purest **black**
-	     */
-	    ink: string;
-	};
-	export type _EuiThemeColorsMode = _EuiThemeBrandColors & _EuiThemeBrandTextColors & _EuiThemeShadeColors & _EuiThemeSpecialColors & _EuiThemeTextColors;
-	export type _EuiThemeColors = StrictColorModeSwitch<_EuiThemeColorsMode> & _EuiThemeConstantColors;
-
-}
-declare module '@elastic/eui/src/global_styling/variables/size' {
-	export type _EuiThemeBase = number;
-	export const EuiThemeSizes: readonly ["xxs", "xs", "s", "m", "base", "l", "xl", "xxl", "xxxl", "xxxxl"];
-	export type _EuiThemeSize = typeof EuiThemeSizes[number];
-	export type _EuiThemeSizes = Record<_EuiThemeSize, string>;
+declare module '@elastic/eui/src/global_styling/variables/size' {
+	export type _EuiThemeBase = number;
+	export const EuiThemeSizes: readonly ["xxs", "xs", "s", "m", "base", "l", "xl", "xxl", "xxxl", "xxxxl"];
+	export type _EuiThemeSize = typeof EuiThemeSizes[number];
+	export type _EuiThemeSizes = Record<_EuiThemeSize, string>;
 
 }
 declare module '@elastic/eui/src/global_styling/variables/typography' {
@@ -1379,77 +577,214 @@ declare module '@elastic/eui/src/global_styling/variables/states' {
 	}
 
 }
-declare module '@elastic/eui/src/global_styling/variables/levels' {
-	import { CSSProperties } from 'react';
+declare module '@elastic/eui/src/global_styling/variables/levels' {
+	import { CSSProperties } from 'react';
+	/**
+	 * Z-Index
+	 *
+	 * Remember that z-index is relative to parent and based on the stacking context.
+	 * z-indexes only compete against other z-indexes when they exist as children of
+	 * that shared parent.
+	 *
+	 * That means a popover with a settings of 2, will still show above a modal
+	 * with a setting of 100, if it is within that modal and not besides it.
+	 *
+	 * Generally that means it's a good idea to consider things added to this file
+	 * as competitive only as siblings.
+	 *
+	 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+	 */
+	export const EuiThemeLevels: readonly ["toast", "modal", "mask", "navigation", "menu", "header", "flyout", "maskBelowHeader", "content"];
+	export type _EuiThemeLevel = typeof EuiThemeLevels[number];
+	export type _EuiThemeLevels = Record<_EuiThemeLevel, NonNullable<CSSProperties['zIndex']>>;
+
+}
+declare module '@elastic/eui/src/services/theme/types' {
+	import { RecursivePartial, ValueOf } from '@elastic/eui/src/components/common';
+	import { _EuiThemeAnimation } from '@elastic/eui/src/global_styling/variables/animations';
+	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
+	import { _EuiThemeBorder } from '@elastic/eui/src/global_styling/variables/borders';
+	import { _EuiThemeColors } from '@elastic/eui/src/global_styling/variables/colors';
+	import { _EuiThemeBase, _EuiThemeSizes } from '@elastic/eui/src/global_styling/variables/size';
+	import { _EuiThemeFont } from '@elastic/eui/src/global_styling/variables/typography';
+	import { _EuiThemeFocus } from '@elastic/eui/src/global_styling/variables/states';
+	import { _EuiThemeLevels } from '@elastic/eui/src/global_styling/variables/levels';
+	export const COLOR_MODES_STANDARD: {
+	    readonly light: "LIGHT";
+	    readonly dark: "DARK";
+	};
+	export const COLOR_MODES_INVERSE: "INVERSE";
+	export type EuiThemeColorModeInverse = typeof COLOR_MODES_INVERSE;
+	export type EuiThemeColorModeStandard = ValueOf<typeof COLOR_MODES_STANDARD>;
+	export type EuiThemeColorMode = 'light' | 'dark' | EuiThemeColorModeStandard | 'inverse' | EuiThemeColorModeInverse;
+	export type ColorModeSwitch<T = string> = {
+	    [key in EuiThemeColorModeStandard]: T;
+	} | T;
+	export type StrictColorModeSwitch<T = string> = {
+	    [key in EuiThemeColorModeStandard]: T;
+	};
+	export type EuiThemeShape = {
+	    colors: _EuiThemeColors;
+	    base: _EuiThemeBase;
+	    size: _EuiThemeSizes;
+	    font: _EuiThemeFont;
+	    border: _EuiThemeBorder;
+	    focus: _EuiThemeFocus;
+	    animation: _EuiThemeAnimation;
+	    breakpoint: _EuiThemeBreakpoints;
+	    levels: _EuiThemeLevels;
+	};
+	export type EuiThemeSystem<T = {}> = {
+	    root: EuiThemeShape & T;
+	    model: EuiThemeShape & T;
+	    key: string;
+	};
+	export type EuiThemeModifications<T = {}> = RecursivePartial<EuiThemeShape & T>;
+	export type ComputedThemeShape<T, P = string | number | bigint | boolean | null | undefined> = T extends P | ColorModeSwitch<infer X> ? T extends ColorModeSwitch<X> ? X extends P ? X : {
+	    [K in keyof (X & Exclude<T, keyof X | keyof StrictColorModeSwitch>)]: ComputedThemeShape<(X & Exclude<T, keyof X | keyof StrictColorModeSwitch>)[K], P>;
+	} : T : {
+	    [K in keyof T]: ComputedThemeShape<T[K], P>;
+	};
+	export type EuiThemeComputed<T = {}> = ComputedThemeShape<EuiThemeShape & T> & {
+	    themeName: string;
+	};
+
+}
+declare module '@elastic/eui/src/global_styling/variables/borders' {
+	import { CSSProperties } from 'react';
+	import { ColorModeSwitch } from '@elastic/eui/src/services/theme/types';
+	export interface _EuiThemeBorderWidthValues {
+	    /**
+	     * Thinnest width for border
+	     */
+	    thin: CSSProperties['borderWidth'];
+	    /**
+	     * Thickest width for border
+	     */
+	    thick: CSSProperties['borderWidth'];
+	}
+	export interface _EuiThemeBorderRadiusValues {
+	    /**
+	     * Primary corner radius size
+	     */
+	    medium: CSSProperties['borderRadius'];
+	    /**
+	     * Small corner radius size
+	     */
+	    small: CSSProperties['borderRadius'];
+	}
+	export interface _EuiThemeBorderColorValues {
+	    /**
+	     * Color for all borders; Default is `colors.lightShade`
+	     */
+	    color: ColorModeSwitch;
+	}
+	export interface _EuiThemeBorderValues extends _EuiThemeBorderColorValues {
+	    /**
+	     * Varied thicknesses for borders
+	     */
+	    width: _EuiThemeBorderWidthValues;
+	    /**
+	     * Varied border radii
+	     */
+	    radius: _EuiThemeBorderRadiusValues;
+	}
+	export interface _EuiThemeBorderTypes {
+	    /**
+	     * Full `border` property string computed using `border.width.thin` and `border.color`
+	     */
+	    thin: CSSProperties['border'];
+	    /**
+	     * Full `border` property string computed using `border.width.thick` and `border.color`
+	     */
+	    thick: CSSProperties['border'];
+	    /**
+	     * Full editable style `border` property string computed using `border.width.thick` and `border.color`
+	     */
+	    editable: CSSProperties['border'];
+	}
+	export type _EuiThemeBorder = _EuiThemeBorderValues & _EuiThemeBorderTypes;
+
+}
+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/themes/amsterdam/global_styling/variables/_breakpoint' {
+	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables';
+	export const breakpoint: _EuiThemeBreakpoints;
+
+}
+declare module '@elastic/eui/src/services/breakpoint/breakpoint' {
+	import { _EuiThemeBreakpoint, _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
+	export type EuiBreakpointSize = _EuiThemeBreakpoint;
+	export type EuiBreakpoints = _EuiThemeBreakpoints;
+	export const BREAKPOINTS: _EuiThemeBreakpoints;
+	export const BREAKPOINT_KEYS: ("s" | "xs" | "m" | "l" | "xl")[];
 	/**
-	 * Z-Index
+	 * Given the current `width` and an object of `EuiBreakpoints`,
+	 * this function returns the string that is the name of the breakpoint key
+	 * that is less than or equal to the width
 	 *
-	 * Remember that z-index is relative to parent and based on the stacking context.
-	 * z-indexes only compete against other z-indexes when they exist as children of
-	 * that shared parent.
+	 * @param {number} width Can either be the full window width or any width
+	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
+	 * @returns {string | undefined} Name of the breakpoint key or `undefined` if a key doesn't exist
+	 */
+	export function getBreakpoint(width: number, breakpoints?: EuiBreakpoints): EuiBreakpointSize | undefined;
+	/**
+	 * Given the current `width` and a max breakpoint key,
+	 * this function returns true or false if the `width` falls within the max
+	 * breakpoint or any breakpoints below
 	 *
-	 * That means a popover with a settings of 2, will still show above a modal
-	 * with a setting of 100, if it is within that modal and not besides it.
+	 * @param {number} width Can either be the full window width or any width
+	 * @param {EuiBreakpointSize | number} max The named breakpoint or custom number to check against
+	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
+	 * @returns {boolean} Will return `false` if it can't find a value for the `max` breakpoint
+	 */
+	export function isWithinMaxBreakpoint(width: number, max: EuiBreakpointSize | number, breakpoints?: EuiBreakpoints): boolean;
+	/**
+	 * Given the current `width` and a min breakpoint key,
+	 * this function returns true or false if the `width` falls within the min
+	 * breakpoint or any breakpoints above
 	 *
-	 * Generally that means it's a good idea to consider things added to this file
-	 * as competitive only as siblings.
+	 * @param {number} width Can either be the full window width or any width
+	 * @param {EuiBreakpointSize | number} min The named breakpoint or custom number to check against
+	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
+	 * @returns {boolean} Will return `false` if it can't find a value for the `min` breakpoint
+	 */
+	export function isWithinMinBreakpoint(width: number, min: EuiBreakpointSize | number, breakpoints?: EuiBreakpoints): boolean;
+	/**
+	 * Given the current `width` and an array of breakpoint keys,
+	 * this function returns true or false if the `width` falls within
+	 * any of the named breakpoints
 	 *
-	 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context
+	 * @param {number} width Can either be the full window width or any width
+	 * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
+	 * @param {EuiBreakpoints} breakpoints An object with keys for sizing and values for minimum width
+	 * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
 	 */
-	export const EuiThemeLevels: readonly ["toast", "modal", "mask", "navigation", "menu", "header", "flyout", "maskBelowHeader", "content"];
-	export type _EuiThemeLevel = typeof EuiThemeLevels[number];
-	export type _EuiThemeLevels = Record<_EuiThemeLevel, NonNullable<CSSProperties['zIndex']>>;
-
-}
-declare module '@elastic/eui/src/services/theme/types' {
-	import { RecursivePartial, ValueOf } from '@elastic/eui/src/components/common';
-	import { _EuiThemeAnimation } from '@elastic/eui/src/global_styling/variables/animations';
-	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
-	import { _EuiThemeBorder } from '@elastic/eui/src/global_styling/variables/borders';
-	import { _EuiThemeColors } from '@elastic/eui/src/global_styling/variables/colors';
-	import { _EuiThemeBase, _EuiThemeSizes } from '@elastic/eui/src/global_styling/variables/size';
-	import { _EuiThemeFont } from '@elastic/eui/src/global_styling/variables/typography';
-	import { _EuiThemeFocus } from '@elastic/eui/src/global_styling/variables/states';
-	import { _EuiThemeLevels } from '@elastic/eui/src/global_styling/variables/levels';
-	export const COLOR_MODES_STANDARD: {
-	    readonly light: "LIGHT";
-	    readonly dark: "DARK";
-	};
-	export const COLOR_MODES_INVERSE: "INVERSE";
-	export type EuiThemeColorModeInverse = typeof COLOR_MODES_INVERSE;
-	export type EuiThemeColorModeStandard = ValueOf<typeof COLOR_MODES_STANDARD>;
-	export type EuiThemeColorMode = 'light' | 'dark' | EuiThemeColorModeStandard | 'inverse' | EuiThemeColorModeInverse;
-	export type ColorModeSwitch<T = string> = {
-	    [key in EuiThemeColorModeStandard]: T;
-	} | T;
-	export type StrictColorModeSwitch<T = string> = {
-	    [key in EuiThemeColorModeStandard]: T;
-	};
-	export type EuiThemeShape = {
-	    colors: _EuiThemeColors;
-	    base: _EuiThemeBase;
-	    size: _EuiThemeSizes;
-	    font: _EuiThemeFont;
-	    border: _EuiThemeBorder;
-	    focus: _EuiThemeFocus;
-	    animation: _EuiThemeAnimation;
-	    breakpoint: _EuiThemeBreakpoints;
-	    levels: _EuiThemeLevels;
-	};
-	export type EuiThemeSystem<T = {}> = {
-	    root: EuiThemeShape & T;
-	    model: EuiThemeShape & T;
-	    key: string;
-	};
-	export type EuiThemeModifications<T = {}> = RecursivePartial<EuiThemeShape & T>;
-	export type ComputedThemeShape<T, P = string | number | bigint | boolean | null | undefined> = T extends P | ColorModeSwitch<infer X> ? T extends ColorModeSwitch<X> ? X extends P ? X : {
-	    [K in keyof (X & Exclude<T, keyof X | keyof StrictColorModeSwitch>)]: ComputedThemeShape<(X & Exclude<T, keyof X | keyof StrictColorModeSwitch>)[K], P>;
-	} : T : {
-	    [K in keyof T]: ComputedThemeShape<T[K], P>;
-	};
-	export type EuiThemeComputed<T = {}> = ComputedThemeShape<EuiThemeShape & T> & {
-	    themeName: string;
-	};
+	export function isWithinBreakpoints(width: number, sizes: EuiBreakpointSize[], breakpoints?: EuiBreakpoints): boolean;
 
 }
 declare module '@elastic/eui/src/services/theme/utils' {
@@ -1489,201 +824,810 @@ declare module '@elastic/eui/src/services/theme/utils' {
 	    [key: string]: any;
 	}, _path: string, value: any) => boolean;
 	/**
-	 * Creates a class to store the `computer` method and its eventual parameters.
-	 * Allows for on-demand computation with up-to-date parameters via `getValue` method.
-	 * @constructor
-	 * @param {function} computer - Function to be computed
-	 * @param {string | array} dependencies - Dependencies passed to the `computer` as parameters
+	 * Creates a class to store the `computer` method and its eventual parameters.
+	 * Allows for on-demand computation with up-to-date parameters via `getValue` method.
+	 * @constructor
+	 * @param {function} computer - Function to be computed
+	 * @param {string | array} dependencies - Dependencies passed to the `computer` as parameters
+	 */
+	export class Computed<T> {
+	    computer: (...values: any[]) => T;
+	    dependencies: string | string[];
+	    constructor(computer: (...values: any[]) => T, dependencies?: string | string[]);
+	    /**
+	     * Executes the `computer` method with the current state of the theme
+	     * by taking into account previously computed values and modifications.
+	     * @param {Proxy | object} base - Computed or uncomputed theme
+	     * @param {Proxy | object} modifications - Theme value overrides
+	     * @param {object} working - Partially computed theme
+	     * @param {string} colorMode - `light` or `dark`
+	     */
+	    getValue(base: EuiThemeSystem | EuiThemeShape, modifications: import ("@elastic/eui").RecursivePartial<EuiThemeShape> | undefined, working: EuiThemeComputed, colorMode: EuiThemeColorModeStandard): T;
+	}
+	/**
+	 * Returns a Class (`Computed`) that stores the arbitrary computer method
+	 * and references to its optional dependecies.
+	 * @param {function} computer - Arbitrary method to be called at compute time.
+	 * @param {string | array} dependencies - Values that will be provided to `computer` at compute time.
+	 */
+	export function computed<T>(computer: (value: EuiThemeComputed) => T): T;
+	export function computed<T>(computer: (value: any[]) => T, dependencies: string[]): T;
+	export function computed<T>(computer: (value: any) => T, dependencies: string): T;
+	/**
+	 * Takes an uncomputed theme, and computes and returns all values taking
+	 * into consideration value overrides and configured color mode.
+	 * Overrides take precedence, and only values in the current color mode
+	 * are computed and returned.
+	 * @param {Proxy} base - Object to transform into Proxy
+	 * @param {Proxy | object} over - Unique identifier or name
+	 * @param {string} colorMode - `light` or `dark`
+	 */
+	export const getComputed: <T = EuiThemeShape>(base: EuiThemeSystem<T>, over: Partial<EuiThemeSystem<T>>, colorMode: EuiThemeColorModeStandard) => EuiThemeComputed<T>;
+	/**
+	 * Builds a Proxy with a custom `handler` designed to self-reference values
+	 * and prevent arbitrary value overrides.
+	 * @param {object} model - Object to transform into Proxy
+	 * @param {string} key - Unique identifier or name
+	 */
+	export const buildTheme: <T extends {}>(model: T, key: string) => {
+	    model: T;
+	    root: T;
+	    key: string;
+	};
+	/**
+	 * Deeply merges two objects, using `source` values whenever possible.
+	 * @param {object} _target - Object with fallback values
+	 * @param {object} source - Object with desired values
+	 */
+	export const mergeDeep: (_target: {
+	    [key: string]: any;
+	}, source?: {
+	    [key: string]: any;
+	}) => {
+	    [key: string]: any;
+	};
+
+}
+declare module '@elastic/eui/src/services/color/is_color_dark' {
+	/**
+	 * This function calculates if the specified color is "dark", which usually means
+	 * you need light text if you use it as a background color to fulfill WCAG contrast
+	 * requirement.
+	 * The color must be specified via its red, green and blue value in the range of
+	 * 0 to 255.
+	 * The formula is based on this Stackoverflow answer: https://stackoverflow.com/a/3943023
+	 * which itself is based upon the WCAG recommendation for color contrast.
+	 *
+	 * @param {number} red The red component in the range 0 to 255
+	 * @param {number} green The green component in the range 0 to 255
+	 * @param {number} blue The blue component in the range 0 to 255
+	 * @returns {boolean} True if the color is dark, false otherwise.
+	 */
+	export function isColorDark(red: number, green: number, blue: number): boolean;
+
+}
+declare module '@elastic/eui/src/services/color/is_valid_hex' {
+	export function isValidHex(hex: string): boolean;
+
+}
+declare module '@elastic/eui/src/services/color/color_types' {
+	export type rgbDef = [number, number, number];
+	export interface HSV {
+	    h: number;
+	    s: number;
+	    v: number;
+	}
+	export interface RGB {
+	    r: number;
+	    g: number;
+	    b: number;
+	}
+	export type HEX = string;
+
+}
+declare module '@elastic/eui/src/services/color/hex_to_rgb' {
+	import { rgbDef } from '@elastic/eui/src/services/color/color_types';
+	export function hexToRgb(hex: string): rgbDef;
+
+}
+declare module '@elastic/eui/src/services/color/rgb_to_hsv' {
+	import { HSV, RGB } from '@elastic/eui/src/services/color/color_types';
+	export function rgbToHsv({ r, g, b }: RGB): HSV;
+
+}
+declare module '@elastic/eui/src/services/color/hex_to_hsv' {
+	import { HEX, HSV } from '@elastic/eui/src/services/color/color_types';
+	export function hexToHsv(hex: HEX): HSV;
+
+}
+declare module '@elastic/eui/src/services/color/hsv_to_rgb' {
+	import { HSV, RGB } from '@elastic/eui/src/services/color/color_types';
+	export function hsvToRgb({ h, s, v }: HSV): RGB;
+
+}
+declare module '@elastic/eui/src/services/color/rgb_to_hex' {
+	export function rgbToHex(rgb: string): string;
+
+}
+declare module '@elastic/eui/src/services/color/hsv_to_hex' {
+	import { HEX, HSV } from '@elastic/eui/src/services/color/color_types';
+	export function hsvToHex({ h, s, v }: HSV): HEX;
+
+}
+declare module '@elastic/eui/src/services/color/luminance_and_contrast' {
+	import { rgbDef } from '@elastic/eui/src/services/color/color_types';
+	export function calculateLuminance(r: number, g: number, b: number): number;
+	export function calculateContrast(rgb1: rgbDef, rgb2: rgbDef): number;
+
+}
+declare module '@elastic/eui/src/services/color/color_palette' {
+	export const MID_COLOR_STOP = "#EBEFF5";
+	/**
+	 * This function takes an array of colors and returns an array of interpolated
+	 * colors based on the number of steps/len needed for use in UI elements such as charts.
+	 * Derived from https://github.com/gka/palettes (Unlicensed)
+	 */
+	export function colorPalette(
+	/**
+	 * The main color code or array of codes
 	 */
-	export class Computed<T> {
-	    computer: (...values: any[]) => T;
-	    dependencies: string | string[];
-	    constructor(computer: (...values: any[]) => T, dependencies?: string | string[]);
-	    /**
-	     * Executes the `computer` method with the current state of the theme
-	     * by taking into account previously computed values and modifications.
-	     * @param {Proxy | object} base - Computed or uncomputed theme
-	     * @param {Proxy | object} modifications - Theme value overrides
-	     * @param {object} working - Partially computed theme
-	     * @param {string} colorMode - `light` or `dark`
-	     */
-	    getValue(base: EuiThemeSystem | EuiThemeShape, modifications: import ("@elastic/eui").RecursivePartial<EuiThemeShape> | undefined, working: EuiThemeComputed, colorMode: EuiThemeColorModeStandard): T;
-	}
+	colors: string[], 
 	/**
-	 * Returns a Class (`Computed`) that stores the arbitrary computer method
-	 * and references to its optional dependecies.
-	 * @param {function} computer - Arbitrary method to be called at compute time.
-	 * @param {string | array} dependencies - Values that will be provided to `computer` at compute time.
+	 * The number of colors in the resulting array (default 10)
 	 */
-	export function computed<T>(computer: (value: EuiThemeComputed) => T): T;
-	export function computed<T>(computer: (value: any[]) => T, dependencies: string[]): T;
-	export function computed<T>(computer: (value: any) => T, dependencies: string): T;
+	len?: number, 
 	/**
-	 * Takes an uncomputed theme, and computes and returns all values taking
-	 * into consideration value overrides and configured color mode.
-	 * Overrides take precedence, and only values in the current color mode
-	 * are computed and returned.
-	 * @param {Proxy} base - Object to transform into Proxy
-	 * @param {Proxy | object} over - Unique identifier or name
-	 * @param {string} colorMode - `light` or `dark`
+	 * Forces color interpolation to be calculated separately for each half (default false)
 	 */
-	export const getComputed: <T = EuiThemeShape>(base: EuiThemeSystem<T>, over: Partial<EuiThemeSystem<T>>, colorMode: EuiThemeColorModeStandard) => EuiThemeComputed<T>;
+	diverging?: boolean, 
 	/**
-	 * Builds a Proxy with a custom `handler` designed to self-reference values
-	 * and prevent arbitrary value overrides.
-	 * @param {object} model - Object to transform into Proxy
-	 * @param {string} key - Unique identifier or name
+	 * Uses a more static interpolation for non-continuous spectrums
 	 */
-	export const buildTheme: <T extends {}>(model: T, key: string) => {
-	    model: T;
-	    root: T;
-	    key: string;
-	};
+	categorical?: boolean): string[];
+
+}
+declare module '@elastic/eui/src/services/color/eui_palettes' {
+	export type EuiPalette = string[];
+	export interface EuiPaletteColorBlindProps {
+	    /**
+	     * How many variations of the series is needed
+	     */
+	    rotations?: number;
+	    /**
+	     * Order similar colors as `group`s or just `append` each variation
+	     */
+	    order?: 'append' | 'group';
+	    /**
+	     * Specifies if the direction of the color variations
+	     */
+	    direction?: 'lighter' | 'darker' | 'both';
+	    /**
+	     * Use the default sort order, or re-sort them based on the color wheel (natural)
+	     */
+	    sortBy?: 'default' | 'natural';
+	    /**
+	     * Shift the sorting order by a certain number when used in conjunction with `'natural'` `sortBy`.
+	     * Defaults to a number close to green.
+	     */
+	    sortShift?: string;
+	}
+	export const euiPaletteColorBlind: ({ rotations, order, direction, sortBy, sortShift, }?: EuiPaletteColorBlindProps) => EuiPalette;
 	/**
-	 * Deeply merges two objects, using `source` values whenever possible.
-	 * @param {object} _target - Object with fallback values
-	 * @param {object} source - Object with desired values
+	 * Color blind palette with text is meant for use when text is applied on top of the color.
+	 * It increases the brightness of the color to give the text more contrast.
 	 */
-	export const mergeDeep: (_target: {
-	    [key: string]: any;
-	}, source?: {
-	    [key: string]: any;
-	}) => {
-	    [key: string]: any;
+	export const euiPaletteColorBlindBehindText: (paletteProps?: EuiPaletteColorBlindProps) => string[];
+	export const euiPaletteForLightBackground: () => EuiPalette;
+	export const euiPaletteForDarkBackground: () => EuiPalette;
+	export const euiPaletteForStatus: (steps: number) => EuiPalette;
+	export const euiPaletteForTemperature: (steps: number) => EuiPalette;
+	export const euiPaletteComplimentary: (steps: number) => EuiPalette;
+	export const euiPaletteNegative: (steps: number) => EuiPalette;
+	export const euiPalettePositive: (steps: number) => EuiPalette;
+	export const euiPaletteCool: (steps: number) => EuiPalette;
+	export const euiPaletteWarm: (steps: number) => EuiPalette;
+	export const euiPaletteGray: (steps: number) => EuiPalette;
+
+}
+declare module '@elastic/eui/src/services/color/visualization_colors' {
+	export const VISUALIZATION_COLORS: import ("@elastic/eui/src/services/color/eui_palettes").EuiPalette;
+	export const DEFAULT_VISUALIZATION_COLOR: string;
+
+}
+declare module '@elastic/eui/src/components/color_picker/utils' {
+	import chroma, { ColorSpaces } from 'chroma-js';
+	import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops';
+	export const getEventPosition: (location: {
+	    x: number;
+	    y: number;
+	}, container: HTMLElement) => {
+	    left: number;
+	    top: number;
+	    width: number;
+	    height: number;
+	};
+	export const HEX_FALLBACK = "";
+	export const HSV_FALLBACK: ColorSpaces['hsv'];
+	export const RGB_FALLBACK: ColorSpaces['rgba'];
+	export const RGB_JOIN = ", ";
+	export const parseColor: (input?: string | null | undefined) => string | number[] | null;
+	export const chromaValid: (color: string | number[]) => boolean;
+	export const getChromaColor: (input?: string | null | undefined, allowOpacity?: boolean) => chroma.Color | null;
+	export const getLinearGradient: (palette: string[] | ColorStop[]) => string;
+	export const getFixedLinearGradient: (palette: string[] | ColorStop[]) => {
+	    color: string;
+	    width: string;
+	}[];
+
+}
+declare module '@elastic/eui/src/components/form/range/utils' {
+	export const EUI_THUMB_SIZE = 16;
+	export const calculateThumbPosition: (value: number, min: number, max: number, width: number, thumbSize?: number) => number;
+
+}
+declare module '@elastic/eui/src/components/color_picker/color_stops/utils' {
+	import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb';
+	export const removeStop: (colorStops: ColorStop[], index: number) => ColorStop[];
+	export const addDefinedStop: (colorStops: ColorStop[], stop: ColorStop['stop'], color?: ColorStop['color']) => ColorStop[];
+	export const addStop: (colorStops: ColorStop[], color: string | undefined, max: number) => ColorStop[];
+	export const isColorInvalid: (color: string, showAlpha?: boolean) => boolean;
+	export const isStopInvalid: (stop: ColorStop['stop']) => boolean;
+	export const isInvalid: (colorStops: ColorStop[], showAlpha?: boolean) => boolean;
+	export const calculateScale: (trackWidth: number) => number;
+	export const getStopFromMouseLocation: (location: {
+	    x: number;
+	    y: number;
+	}, ref: HTMLDivElement, min: number, max: number) => number;
+	export const getPositionFromStop: (stop: ColorStop['stop'], ref: HTMLDivElement, min: number, max: number) => number;
+
+}
+declare module '@elastic/eui/src/components/icon/icon_map' {
+	export const typeToPathMap: {
+	    accessibility: string;
+	    addDataApp: string;
+	    advancedSettingsApp: string;
+	    agentApp: string;
+	    aggregate: string;
+	    alert: string;
+	    analyzeEvent: string;
+	    annotation: string;
+	    apmApp: string;
+	    apmTrace: string;
+	    appSearchApp: string;
+	    apps: string;
+	    arrowDown: string;
+	    arrowLeft: string;
+	    arrowRight: string;
+	    arrowUp: string;
+	    arrowStart: string;
+	    arrowEnd: string;
+	    asterisk: string;
+	    auditbeatApp: string;
+	    beaker: string;
+	    bell: string;
+	    bellSlash: string;
+	    bolt: string;
+	    boxesHorizontal: string;
+	    boxesVertical: string;
+	    branch: string;
+	    branchUser: string;
+	    broom: string;
+	    brush: string;
+	    bug: string;
+	    bullseye: string;
+	    calendar: string;
+	    canvasApp: string;
+	    casesApp: string;
+	    check: string;
+	    checkInCircleFilled: string;
+	    cheer: string;
+	    classificationJob: string;
+	    clock: string;
+	    cloudDrizzle: string;
+	    cloudStormy: string;
+	    cloudSunny: string;
+	    cluster: string;
+	    codeApp: string;
+	    color: string;
+	    compute: string;
+	    console: string;
+	    consoleApp: string;
+	    container: string;
+	    continuityAbove: string;
+	    continuityAboveBelow: string;
+	    continuityBelow: string;
+	    continuityWithin: string;
+	    controlsHorizontal: string;
+	    controlsVertical: string;
+	    copy: string;
+	    copyClipboard: string;
+	    createAdvancedJob: string;
+	    createMultiMetricJob: string;
+	    createPopulationJob: string;
+	    createSingleMetricJob: string;
+	    cross: string;
+	    crossClusterReplicationApp: string;
+	    crossInACircleFilled: string;
+	    crosshairs: string;
+	    currency: string;
+	    cut: string;
+	    dashboardApp: string;
+	    dataVisualizer: string;
+	    database: string;
+	    desktop: string;
+	    devToolsApp: string;
+	    discoverApp: string;
+	    document: string;
+	    documentEdit: string;
+	    documentation: string;
+	    documents: string;
+	    dot: string;
+	    doubleArrowLeft: string;
+	    doubleArrowRight: string;
+	    download: string;
+	    editorAlignCenter: string;
+	    editorAlignLeft: string;
+	    editorAlignRight: string;
+	    editorBold: string;
+	    editorChecklist: string;
+	    editorCodeBlock: string;
+	    editorComment: string;
+	    editorDistributeHorizontal: string;
+	    editorDistributeVertical: string;
+	    editorHeading: string;
+	    editorItalic: string;
+	    editorItemAlignBottom: string;
+	    editorItemAlignCenter: string;
+	    editorItemAlignLeft: string;
+	    editorItemAlignMiddle: string;
+	    editorItemAlignRight: string;
+	    editorItemAlignTop: string;
+	    editorLink: string;
+	    editorOrderedList: string;
+	    editorPositionBottomLeft: string;
+	    editorPositionBottomRight: string;
+	    editorPositionTopLeft: string;
+	    editorPositionTopRight: string;
+	    editorRedo: string;
+	    editorStrike: string;
+	    editorTable: string;
+	    editorUnderline: string;
+	    editorUndo: string;
+	    editorUnorderedList: string;
+	    email: string;
+	    empty: string;
+	    emsApp: string;
+	    eql: string;
+	    eraser: string;
+	    exit: string;
+	    expand: string;
+	    expandMini: string;
+	    exportAction: string;
+	    eye: string;
+	    eyeClosed: string;
+	    faceHappy: string;
+	    faceNeutral: string;
+	    faceSad: string;
+	    filebeatApp: string;
+	    filter: string;
+	    flag: string;
+	    fleetApp: string;
+	    fold: string;
+	    folderCheck: string;
+	    folderClosed: string;
+	    folderExclamation: string;
+	    folderOpen: string;
+	    frameNext: string;
+	    framePrevious: string;
+	    fullScreen: string;
+	    fullScreenExit: string;
+	    function: string;
+	    gear: string;
+	    gisApp: string;
+	    glasses: string;
+	    globe: string;
+	    grab: string;
+	    grabHorizontal: string;
+	    graphApp: string;
+	    grid: string;
+	    grokApp: string;
+	    heart: string;
+	    heartbeatApp: string;
+	    heatmap: string;
+	    help: string;
+	    home: string;
+	    iInCircle: string;
+	    image: string;
+	    importAction: string;
+	    indexClose: string;
+	    indexEdit: string;
+	    indexFlush: string;
+	    indexManagementApp: string;
+	    indexMapping: string;
+	    indexOpen: string;
+	    indexPatternApp: string;
+	    indexRollupApp: string;
+	    indexRuntime: string;
+	    indexSettings: string;
+	    inputOutput: string;
+	    inspect: string;
+	    invert: string;
+	    ip: string;
+	    keyboard: string;
+	    kqlField: string;
+	    kqlFunction: string;
+	    kqlOperand: string;
+	    kqlSelector: string;
+	    kqlValue: string;
+	    kubernetesNode: string;
+	    kubernetesPod: string;
+	    layers: string;
+	    lensApp: string;
+	    lettering: string;
+	    lineDashed: string;
+	    lineDotted: string;
+	    lineSolid: string;
+	    link: string;
+	    list: string;
+	    listAdd: string;
+	    lock: string;
+	    lockOpen: string;
+	    logoAWS: string;
+	    logoAWSMono: string;
+	    logoAerospike: string;
+	    logoApache: string;
+	    logoAppSearch: string;
+	    logoAzure: string;
+	    logoAzureMono: string;
+	    logoBeats: string;
+	    logoBusinessAnalytics: string;
+	    logoCeph: string;
+	    logoCloud: string;
+	    logoCloudEnterprise: string;
+	    logoCode: string;
+	    logoCodesandbox: string;
+	    logoCouchbase: string;
+	    logoDocker: string;
+	    logoDropwizard: string;
+	    logoElastic: string;
+	    logoElasticStack: string;
+	    logoElasticsearch: string;
+	    logoEnterpriseSearch: string;
+	    logoEtcd: string;
+	    logoGCP: string;
+	    logoGCPMono: string;
+	    logoGithub: string;
+	    logoGmail: string;
+	    logoGolang: string;
+	    logoGoogleG: string;
+	    logoHAproxy: string;
+	    logoIBM: string;
+	    logoIBMMono: string;
+	    logoKafka: string;
+	    logoKibana: string;
+	    logoKubernetes: string;
+	    logoLogging: string;
+	    logoLogstash: string;
+	    logoMaps: string;
+	    logoMemcached: string;
+	    logoMetrics: string;
+	    logoMongodb: string;
+	    logoMySQL: string;
+	    logoNginx: string;
+	    logoObservability: string;
+	    logoOsquery: string;
+	    logoPhp: string;
+	    logoPostgres: string;
+	    logoPrometheus: string;
+	    logoRabbitmq: string;
+	    logoRedis: string;
+	    logoSecurity: string;
+	    logoSiteSearch: string;
+	    logoSketch: string;
+	    logoSlack: string;
+	    logoUptime: string;
+	    logoWebhook: string;
+	    logoWindows: string;
+	    logoWorkplaceSearch: string;
+	    logsApp: string;
+	    logstashFilter: string;
+	    logstashIf: string;
+	    logstashInput: string;
+	    logstashOutput: string;
+	    logstashQueue: string;
+	    machineLearningApp: string;
+	    magnet: string;
+	    magnifyWithExclamation: string;
+	    magnifyWithMinus: string;
+	    magnifyWithPlus: string;
+	    managementApp: string;
+	    mapMarker: string;
+	    memory: string;
+	    menu: string;
+	    menuDown: string;
+	    menuLeft: string;
+	    menuRight: string;
+	    menuUp: string;
+	    merge: string;
+	    metricbeatApp: string;
+	    metricsApp: string;
+	    minimize: string;
+	    minus: string;
+	    minusInCircle: string;
+	    minusInCircleFilled: string;
+	    mobile: string;
+	    monitoringApp: string;
+	    moon: string;
+	    namespace: string;
+	    nested: string;
+	    node: string;
+	    notebookApp: string;
+	    number: string;
+	    offline: string;
+	    online: string;
+	    outlierDetectionJob: string;
+	    package: string;
+	    packetbeatApp: string;
+	    pageSelect: string;
+	    pagesSelect: string;
+	    paperClip: string;
+	    partial: string;
+	    pause: string;
+	    payment: string;
+	    pencil: string;
+	    percent: string;
+	    pin: string;
+	    pinFilled: string;
+	    pipelineApp: string;
+	    play: string;
+	    playFilled: string;
+	    plus: string;
+	    plusInCircle: string;
+	    plusInCircleFilled: string;
+	    popout: string;
+	    push: string;
+	    questionInCircle: string;
+	    quote: string;
+	    recentlyViewedApp: string;
+	    refresh: string;
+	    regressionJob: string;
+	    reporter: string;
+	    reportingApp: string;
+	    returnKey: string;
+	    save: string;
+	    savedObjectsApp: string;
+	    scale: string;
+	    search: string;
+	    searchProfilerApp: string;
+	    securityAnalyticsApp: string;
+	    securityApp: string;
+	    securitySignal: string;
+	    securitySignalDetected: string;
+	    securitySignalResolved: string;
+	    sessionViewer: string;
+	    shard: string;
+	    share: string;
+	    snowflake: string;
+	    sortDown: string;
+	    sortLeft: string;
+	    sortRight: string;
+	    sortUp: string;
+	    sortable: string;
+	    spacesApp: string;
+	    sqlApp: string;
+	    starEmpty: string;
+	    starEmptySpace: string;
+	    starFilled: string;
+	    starFilledSpace: string;
+	    starMinusEmpty: string;
+	    starMinusFilled: string;
+	    starPlusEmpty: string;
+	    starPlusFilled: string;
+	    stats: string;
+	    stop: string;
+	    stopFilled: string;
+	    stopSlash: string;
+	    storage: string;
+	    string: string;
+	    submodule: string;
+	    sun: string;
+	    swatchInput: string;
+	    symlink: string;
+	    tableDensityCompact: string;
+	    tableDensityExpanded: string;
+	    tableDensityNormal: string;
+	    tableOfContents: string;
+	    tag: string;
+	    tear: string;
+	    temperature: string;
+	    timeline: string;
+	    timelionApp: string;
+	    timeRefresh: string;
+	    timeslider: string;
+	    training: string;
+	    trash: string;
+	    unfold: string;
+	    unlink: string;
+	    upgradeAssistantApp: string;
+	    uptimeApp: string;
+	    user: string;
+	    userAvatar: string;
+	    users: string;
+	    usersRolesApp: string;
+	    vector: string;
+	    videoPlayer: string;
+	    visArea: string;
+	    visAreaStacked: string;
+	    visBarHorizontal: string;
+	    visBarHorizontalStacked: string;
+	    visBarVertical: string;
+	    visBarVerticalStacked: string;
+	    visGauge: string;
+	    visGoal: string;
+	    visLine: string;
+	    visMapCoordinate: string;
+	    visMapRegion: string;
+	    visMetric: string;
+	    visPie: string;
+	    visTable: string;
+	    visTagCloud: string;
+	    visText: string;
+	    visTimelion: string;
+	    visVega: string;
+	    visVisualBuilder: string;
+	    visualizeApp: string;
+	    watchesApp: string;
+	    wordWrap: string;
+	    wordWrapDisabled: string;
+	    workplaceSearchApp: string;
+	    wrench: string;
+	    tokenAlias: string;
+	    tokenAnnotation: string;
+	    tokenArray: string;
+	    tokenBinary: string;
+	    tokenBoolean: string;
+	    tokenClass: string;
+	    tokenCompletionSuggester: string;
+	    tokenConstant: string;
+	    tokenDate: string;
+	    tokenDenseVector: string;
+	    tokenElement: string;
+	    tokenEnum: string;
+	    tokenEnumMember: string;
+	    tokenEvent: string;
+	    tokenException: string;
+	    tokenField: string;
+	    tokenFile: string;
+	    tokenFlattened: string;
+	    tokenFunction: string;
+	    tokenGeo: string;
+	    tokenHistogram: string;
+	    tokenInterface: string;
+	    tokenIP: string;
+	    tokenJoin: string;
+	    tokenKey: string;
+	    tokenKeyword: string;
+	    tokenMethod: string;
+	    tokenMetricCounter: string;
+	    tokenMetricGauge: string;
+	    tokenModule: string;
+	    tokenNamespace: string;
+	    tokenNested: string;
+	    tokenNull: string;
+	    tokenNumber: string;
+	    tokenObject: string;
+	    tokenOperator: string;
+	    tokenPackage: string;
+	    tokenParameter: string;
+	    tokenPercolator: string;
+	    tokenProperty: string;
+	    tokenRange: string;
+	    tokenRankFeature: string;
+	    tokenRankFeatures: string;
+	    tokenRepo: string;
+	    tokenSearchType: string;
+	    tokenShape: string;
+	    tokenString: string;
+	    tokenStruct: string;
+	    tokenSymbol: string;
+	    tokenTag: string;
+	    tokenText: string;
+	    tokenTokenCount: string;
+	    tokenVariable: string;
 	};
 
 }
-declare module '@elastic/eui/src/services/color/manipulation' {
-	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services/theme';
-	/**
-	 * Makes a color more transparent.
-	 * @param color - Color to manipulate
-	 * @param alpha - alpha channel value. From 0-1.
-	 */
-	export const transparentize: (color: string, alpha: number) => string;
-	/**
-	 * Mixes a provided color with white.
-	 * @param color - Color to mix with white
-	 * @param ratio - Mix weight. From 0-1. Larger value indicates more white.
-	 */
-	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;
+declare module '@elastic/eui/src/components/icon/assets/empty' {
+	import * as React from 'react';
+	interface SVGRProps {
+	    title?: string;
+	    titleId?: string;
+	}
+	export const icon: ({ title, titleId, ...props }: React.SVGProps<SVGSVGElement> & SVGRProps) => JSX.Element;
+	export {};
 
 }
-declare module '@elastic/eui/src/services/color/contrast' {
-	/**
-	 * 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/react' {
+	export function enqueueStateChange(fn: Function): void;
 
 }
-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/components/icon/named_colors' {
+	export const COLORS: readonly ["default", "primary", "success", "accent", "warning", "danger", "text", "subdued", "ghost", "inherit"];
+	export type NamedColor = typeof COLORS[number];
+	export function isNamedColor(name: string): boolean;
 
 }
-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/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/global_styling/variables/shadow' {
-	export const EuiThemeShadowSizes: readonly ["xs", "s", "m", "l", "xl"];
-	export type _EuiThemeShadowSize = typeof EuiThemeShadowSizes[number];
+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;
 	/**
-	 * Shadow t-shirt sizes descriptions
+	 * 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.
 	 */
-	export const _EuiShadowSizesDescriptions: Record<_EuiThemeShadowSize, string>;
-	export interface _EuiThemeShadowCustomColor {
-	    color?: string;
-	    property?: 'box-shadow' | 'filter';
+	export const euiYScroll: (euiTheme: UseEuiTheme) => string;
+	export const useEuiYScroll: () => string;
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme) => string;
+	export const useEuiYScrollWithShadows: () => 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;
 	}
-
-}
-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;
+	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
+	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
+	export {};
 
 }
 declare module '@elastic/eui/src/global_styling/functions/logicals' {
@@ -1760,7 +1704,7 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	    'margin-horizontal': string;
 	    'margin-vertical': string;
 	};
-	export const LOGICAL_PROPERTIES: ("left" | "right" | "top" | "width" | "height" | "inset" | "bottom" | "horizontal" | "vertical" | "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" | "overflow-x" | "overflow-y" | "max-height" | "max-width" | "min-height" | "min-width" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical")[];
+	export const LOGICAL_PROPERTIES: ("left" | "right" | "inset" | "top" | "width" | "height" | "bottom" | "horizontal" | "vertical" | "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" | "overflow-x" | "overflow-y" | "max-height" | "max-width" | "min-height" | "min-width" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical")[];
 	export type LogicalProperties = typeof LOGICAL_PROPERTIES[number];
 	/**
 	 *
@@ -1893,7 +1837,7 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 	 * this mixin will ensure that the sizing is dependent on the boldest
 	 * weight so it doesn't shift sibling content.
 	 */
-	export const euiTextShift: (fontWeight: "bold" | "light" | "medium" | "regular" | "semiBold" | undefined, attribute: string | undefined, euiTheme: UseEuiTheme['euiTheme']) => string;
+	export const euiTextShift: (fontWeight: "bold" | "light" | "regular" | "medium" | "semiBold" | undefined, attribute: string | undefined, euiTheme: UseEuiTheme['euiTheme']) => string;
 
 }
 declare module '@elastic/eui/src/global_styling/functions' {
@@ -1901,126 +1845,6 @@ declare module '@elastic/eui/src/global_styling/functions' {
 	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/_size' {
-	import { _EuiThemeBase, _EuiThemeSizes } from '@elastic/eui/src/global_styling/variables';
-	export const base: _EuiThemeBase;
-	export const size: _EuiThemeSizes;
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_borders' {
-	import { _EuiThemeBorder } from '@elastic/eui/src/global_styling/variables';
-	export const border: _EuiThemeBorder;
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_levels' {
-	import { _EuiThemeLevels } from '@elastic/eui/src/global_styling/variables';
-	export const levels: _EuiThemeLevels;
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_typography' {
-	import { _EuiThemeFont, _EuiThemeFontBase, _EuiThemeFontScales, _EuiThemeFontWeights } from '@elastic/eui/src/global_styling/variables/typography';
-	export const fontScale: _EuiThemeFontScales;
-	export const fontBase: _EuiThemeFontBase;
-	export const fontWeight: _EuiThemeFontWeights;
-	export const font: _EuiThemeFont;
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_states' {
-	import { _EuiThemeFocus } from '@elastic/eui/src/global_styling/variables/states';
-	export const focus: _EuiThemeFocus;
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/theme' {
-	import { EuiThemeShape } from '@elastic/eui/src/services/theme/types';
-	export const AMSTERDAM_NAME_KEY = "EUI_THEME_AMSTERDAM";
-	export const euiThemeAmsterdam: EuiThemeShape;
-	export const EuiThemeAmsterdam: {
-	    model: EuiThemeShape;
-	    root: EuiThemeShape;
-	    key: string;
-	};
-
-}
-declare module '@elastic/eui/src/services/theme/context' {
-	
-	import { EuiThemeColorModeStandard, EuiThemeSystem, EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
-	export const EuiSystemContext: import("react").Context<EuiThemeSystem<{}>>;
-	export const EuiModificationsContext: import("react").Context<import ("@elastic/eui").RecursivePartial<import ("@elastic/eui/src/services/theme/types").EuiThemeShape>>;
-	export const EuiColorModeContext: import("react").Context<EuiThemeColorModeStandard>;
-	export const EuiThemeContext: import("react").Context<EuiThemeComputed<{}>>;
-
-}
-declare module '@elastic/eui/src/services/theme/provider' {
-	import React, { PropsWithChildren } from 'react';
-	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;
-	}
-	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, }: React.PropsWithChildren<EuiThemeProviderProps<T>>) => JSX.Element;
-
-}
-declare module '@elastic/eui/src/services/theme' {
-	export { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
-	export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
-	export { useEuiTheme, withEuiTheme } from '@elastic/eui/src/services/theme/hooks';
-	export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
-	export { EuiThemeProvider } from '@elastic/eui/src/services/theme/provider';
-	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';
-
-}
-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.
-	 */
-	export const euiYScroll: (euiTheme: UseEuiTheme) => string;
-	export const useEuiYScroll: () => string;
-	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme) => string;
-	export const useEuiYScrollWithShadows: () => 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;
-	export {};
-
 }
 declare module '@elastic/eui/src/global_styling/mixins/_padding' {
 	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
@@ -4134,106 +3958,39 @@ declare module '@elastic/eui/src/components/panel/panel' {
 	     * Only works when `color="plain"`
 	     */
 	    hasShadow?: boolean;
-	    /**
-	     * Adds a slight 1px border on all edges.
-	     * Only works when `color="plain | transparent"`
-	     */
-	    hasBorder?: boolean;
-	    /**
-	     * Padding for all four sides
-	     */
-	    paddingSize?: EuiPaddingSize;
-	    /**
-	     * Corner border radius
-	     */
-	    borderRadius?: PanelBorderRadius;
-	    /**
-	     * When true the panel will grow in height to match `EuiFlexItem`
-	     */
-	    grow?: boolean;
-	    panelRef?: Ref<HTMLDivElement>;
-	    /**
-	     * Background color of the panel;
-	     * Usually a lightened form of the brand colors
-	     */
-	    color?: PanelColor;
-	}
-	export interface _EuiPanelDivlike extends _EuiPanelProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
-	    element?: 'div';
-	}
-	export interface _EuiPanelButtonlike extends _EuiPanelProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
-	    element?: 'button';
-	}
-	export type EuiPanelProps = ExclusiveUnion<_EuiPanelButtonlike, _EuiPanelDivlike>;
-	export const EuiPanel: FunctionComponent<EuiPanelProps>;
-	export {};
-
-}
-declare module '@elastic/eui/src/services/hooks/useUpdateEffect' {
-	export const useUpdateEffect: (effect: Function, deps: unknown[]) => void;
-
-}
-declare module '@elastic/eui/src/services/hooks/useDependentState' {
-	
-	export function useDependentState<T>(valueFn: (previousState: undefined | T) => T, deps: unknown[]): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
-
-}
-declare module '@elastic/eui/src/services/hooks/useCombinedRefs' {
-	import { MutableRefObject, Ref } from 'react';
-	export const useCombinedRefs: <T>(refs: (Ref<T> | MutableRefObject<T | undefined> | undefined)[]) => (node: T) => void;
-
-}
-declare module '@elastic/eui/src/services/hooks/useForceRender' {
-	export const useForceRender: () => () => void;
-
-}
-declare module '@elastic/eui/src/services/hooks/useIsWithinBreakpoints' {
-	import { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
-	/**
-	 * Given the current window.innerWidth and an array of breakpoint keys,
-	 * this hook stores state and returns true or false if the window.innerWidth
-	 * falls within any of the named breakpoints.
-	 *
-	 * @param {EuiBreakpointSize[]} sizes An array of named breakpoints
-	 * @param {boolean} isActive Manages whether the resize handler should be active
-	 * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
-	 */
-	export function useIsWithinBreakpoints(sizes: EuiBreakpointSize[], isActive?: boolean): boolean;
-
-}
-declare module '@elastic/eui/src/services/hooks/useLatest' {
-	import { MutableRefObject } from 'react';
-	/**
-	 * Wraps the given `value` into a `MutableRefObject` and keeps the `current`
-	 * value up-to-date on every render cycle.
-	 */
-	export function useLatest<Value>(value: Value): MutableRefObject<Value | null>;
-
-}
-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/hooks/useMouseMove' {
-	import { MouseEvent, TouchEvent } from 'react';
-	export function isMouseEvent<T = HTMLDivElement>(event: MouseEvent<T> | TouchEvent<T>): event is MouseEvent<T>;
-	export function useMouseMove<T = HTMLDivElement>(handleChange: (location: {
-	    x: number;
-	    y: number;
-	}, isFirstInteraction?: boolean) => void, interactionConditional?: any): [
-	    (e: MouseEvent<T>) => void,
-	    (e: MouseEvent<T> | TouchEvent<T>, isFirstInteraction?: boolean) => void
-	];
-
-}
-declare module '@elastic/eui/src/services/hooks' {
-	export * from '@elastic/eui/src/services/hooks/useDependentState';
-	export * from '@elastic/eui/src/services/hooks/useCombinedRefs';
-	export * from '@elastic/eui/src/services/hooks/useForceRender';
-	export * from '@elastic/eui/src/services/hooks/useIsWithinBreakpoints';
-	export * from '@elastic/eui/src/services/hooks/useLatest';
-	export * from '@elastic/eui/src/services/hooks/useMouseMove';
-	export * from '@elastic/eui/src/services/hooks/useUpdateEffect';
+	    /**
+	     * Adds a slight 1px border on all edges.
+	     * Only works when `color="plain | transparent"`
+	     */
+	    hasBorder?: boolean;
+	    /**
+	     * Padding for all four sides
+	     */
+	    paddingSize?: EuiPaddingSize;
+	    /**
+	     * Corner border radius
+	     */
+	    borderRadius?: PanelBorderRadius;
+	    /**
+	     * When true the panel will grow in height to match `EuiFlexItem`
+	     */
+	    grow?: boolean;
+	    panelRef?: Ref<HTMLDivElement>;
+	    /**
+	     * Background color of the panel;
+	     * Usually a lightened form of the brand colors
+	     */
+	    color?: PanelColor;
+	}
+	export interface _EuiPanelDivlike extends _EuiPanelProps, Omit<HTMLAttributes<HTMLDivElement>, 'color'> {
+	    element?: 'div';
+	}
+	export interface _EuiPanelButtonlike extends _EuiPanelProps, Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'color'> {
+	    element?: 'button';
+	}
+	export type EuiPanelProps = ExclusiveUnion<_EuiPanelButtonlike, _EuiPanelDivlike>;
+	export const EuiPanel: FunctionComponent<EuiPanelProps>;
+	export {};
 
 }
 declare module '@elastic/eui/src/components/panel/split_panel/split_panel' {
@@ -4611,7 +4368,7 @@ declare module '@elastic/eui/src/components/portal/portal' {
 	 * NOTE: We can't test this component because Enzyme doesn't support rendering
 	 * into portals.
 	 */
-	import { Component, ReactNode } from 'react';
+	import { ReactNode } from 'react';
 	interface InsertPositionsMap {
 	    after: InsertPosition;
 	    before: InsertPosition;
@@ -4629,14 +4386,7 @@ declare module '@elastic/eui/src/components/portal/portal' {
 	    };
 	    portalRef?: (ref: HTMLDivElement | null) => void;
 	}
-	export class EuiPortal extends Component<EuiPortalProps> {
-	    portalNode: HTMLDivElement;
-	    constructor(props: EuiPortalProps);
-	    componentDidMount(): void;
-	    componentWillUnmount(): void;
-	    updatePortalRef(ref: HTMLDivElement | null): void;
-	    render(): import("react").ReactPortal;
-	}
+	export const EuiPortal: React.FC<EuiPortalProps>;
 	export {};
 
 }
@@ -5308,7 +5058,7 @@ declare module '@elastic/eui/src/components/popover/popover_footer' {
 
 }
 declare module '@elastic/eui/src/components/popover/wrapping_popover' {
-	import { Component } from 'react';
+	import { FunctionComponent } from 'react';
 	import { Props as EuiPopoverProps } from '@elastic/eui/src/components/popover/popover';
 	export interface EuiWrappingPopoverProps extends EuiPopoverProps {
 	    button: HTMLElement;
@@ -5318,15 +5068,7 @@ declare module '@elastic/eui/src/components/popover/wrapping_popover' {
 	 * then the button element is moved into the popover dom.
 	 * On unmount, the button is moved back to its original location.
 	 */
-	export class EuiWrappingPopover extends Component<EuiWrappingPopoverProps> {
-	    private portal;
-	    private anchor;
-	    componentDidMount(): void;
-	    componentWillUnmount(): void;
-	    setPortalRef: (node: HTMLElement | null) => void;
-	    setAnchorRef: (node: HTMLElement | null) => void;
-	    render(): JSX.Element;
-	}
+	export const EuiWrappingPopover: FunctionComponent<EuiWrappingPopoverProps>;
 
 }
 declare module '@elastic/eui/src/components/popover' {
@@ -6697,23 +6439,239 @@ declare module '@elastic/eui/src/services/color/stepped_gradient' {
 	export const getSteppedGradient: (colors: ColorStop[], steps: number) => 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/services/color/manipulation' {
+	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services/theme';
+	/**
+	 * Makes a color more transparent.
+	 * @param color - Color to manipulate
+	 * @param alpha - alpha channel value. From 0-1.
+	 */
+	export const transparentize: (color: string, alpha: number) => string;
+	/**
+	 * Mixes a provided color with white.
+	 * @param color - Color to mix with white
+	 * @param ratio - Mix weight. From 0-1. Larger value indicates more white.
+	 */
+	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;
+
+}
+declare module '@elastic/eui/src/services/color/contrast' {
+	/**
+	 * 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/themes/amsterdam/global_styling/variables/_size' {
+	import { _EuiThemeBase, _EuiThemeSizes } from '@elastic/eui/src/global_styling/variables';
+	export const base: _EuiThemeBase;
+	export const size: _EuiThemeSizes;
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_borders' {
+	import { _EuiThemeBorder } from '@elastic/eui/src/global_styling/variables';
+	export const border: _EuiThemeBorder;
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_levels' {
+	import { _EuiThemeLevels } from '@elastic/eui/src/global_styling/variables';
+	export const levels: _EuiThemeLevels;
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_typography' {
+	import { _EuiThemeFont, _EuiThemeFontBase, _EuiThemeFontScales, _EuiThemeFontWeights } from '@elastic/eui/src/global_styling/variables/typography';
+	export const fontScale: _EuiThemeFontScales;
+	export const fontBase: _EuiThemeFontBase;
+	export const fontWeight: _EuiThemeFontWeights;
+	export const font: _EuiThemeFont;
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/variables/_states' {
+	import { _EuiThemeFocus } from '@elastic/eui/src/global_styling/variables/states';
+	export const focus: _EuiThemeFocus;
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/theme' {
+	import { EuiThemeShape } from '@elastic/eui/src/services/theme/types';
+	export const AMSTERDAM_NAME_KEY = "EUI_THEME_AMSTERDAM";
+	export const euiThemeAmsterdam: EuiThemeShape;
+	export const EuiThemeAmsterdam: {
+	    model: EuiThemeShape;
+	    root: EuiThemeShape;
+	    key: string;
+	};
+
+}
+declare module '@elastic/eui/src/services/theme/context' {
+	
+	import { EuiThemeColorModeStandard, EuiThemeSystem, EuiThemeComputed } from '@elastic/eui/src/services/theme/types';
+	export const EuiSystemContext: import("react").Context<EuiThemeSystem<{}>>;
+	export const EuiModificationsContext: import("react").Context<import ("@elastic/eui").RecursivePartial<import ("@elastic/eui/src/services/theme/types").EuiThemeShape>>;
+	export const EuiColorModeContext: import("react").Context<EuiThemeColorModeStandard>;
+	export const EuiThemeContext: import("react").Context<EuiThemeComputed<{}>>;
+
+}
+declare module '@elastic/eui/src/services/theme/provider' {
+	import React, { PropsWithChildren } from 'react';
+	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;
+	}
+	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, }: React.PropsWithChildren<EuiThemeProviderProps<T>>) => JSX.Element;
+
+}
+declare module '@elastic/eui/src/services/theme' {
+	export { EuiSystemContext, EuiThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
+	export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
+	export { useEuiTheme, withEuiTheme } from '@elastic/eui/src/services/theme/hooks';
+	export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
+	export { EuiThemeProvider } from '@elastic/eui/src/services/theme/provider';
+	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';
+
+}
+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/currentEuiBreakpoint' {
+	import React, { FunctionComponent } from 'react';
+	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling/variables/breakpoint'; type CurrentEuiBreakpoint = _EuiThemeBreakpoint | undefined;
+	export const CurrentEuiBreakpointContext: React.Context<CurrentEuiBreakpoint>;
+	/**
+	 * Top level provider (nested within EuiProvider) which provides a single
+	 * resize listener that returns the current breakpoint based on window width
+	 */
+	export const CurrentEuiBreakpointProvider: FunctionComponent;
+	/**
+	 * Hook util / syntactical sugar
+	 */
+	export const useCurrentEuiBreakpoint: () => CurrentEuiBreakpoint;
+	export {};
+
+}
+declare module '@elastic/eui/src/services/breakpoint/useIsWithinBreakpoints' {
+	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling/variables/breakpoint';
+	/**
+	 * Given the current window.innerWidth and an array of breakpoint keys,
+	 * this hook stores state and returns true or false if the window.innerWidth
+	 * falls within any of the named breakpoints.
+	 *
+	 * @param {_EuiThemeBreakpoint[]} sizes An array of named EUI breakpoints
+	 * @param {boolean} isResponsive Some components have the option to turn off responsive behavior.
+	 *   Since hooks can't be called conditionally, it's easier to pass the condition into the hook
+	 * @returns {boolean} Returns `true` if current breakpoint name is included in `sizes`
+	 */
+	export const useIsWithinBreakpoints: (sizes: _EuiThemeBreakpoint[], isResponsive?: boolean) => boolean;
+
+}
+declare module '@elastic/eui/src/services/breakpoint' {
+	export * from '@elastic/eui/src/services/breakpoint/breakpoint';
+	export * from '@elastic/eui/src/services/breakpoint/currentEuiBreakpoint';
+	export * from '@elastic/eui/src/services/breakpoint/useIsWithinBreakpoints';
 
 }
 declare module '@elastic/eui/src/services/color_picker/color_picker' {
@@ -7094,6 +7052,54 @@ declare module '@elastic/eui/src/services/window_event/window_event' {
 declare module '@elastic/eui/src/services/window_event' {
 	export { EuiWindowEvent } from '@elastic/eui/src/services/window_event/window_event';
 
+}
+declare module '@elastic/eui/src/services/hooks/useUpdateEffect' {
+	export const useUpdateEffect: (effect: Function, deps: unknown[]) => void;
+
+}
+declare module '@elastic/eui/src/services/hooks/useDependentState' {
+	
+	export function useDependentState<T>(valueFn: (previousState: undefined | T) => T, deps: unknown[]): readonly [T, import("react").Dispatch<import("react").SetStateAction<T>>];
+
+}
+declare module '@elastic/eui/src/services/hooks/useCombinedRefs' {
+	import { MutableRefObject, Ref } from 'react';
+	export const useCombinedRefs: <T>(refs: (Ref<T> | MutableRefObject<T | undefined> | undefined)[]) => (node: T) => void;
+
+}
+declare module '@elastic/eui/src/services/hooks/useForceRender' {
+	export const useForceRender: () => () => void;
+
+}
+declare module '@elastic/eui/src/services/hooks/useLatest' {
+	import { MutableRefObject } from 'react';
+	/**
+	 * Wraps the given `value` into a `MutableRefObject` and keeps the `current`
+	 * value up-to-date on every render cycle.
+	 */
+	export function useLatest<Value>(value: Value): MutableRefObject<Value | null>;
+
+}
+declare module '@elastic/eui/src/services/hooks/useMouseMove' {
+	import { MouseEvent, TouchEvent } from 'react';
+	export function isMouseEvent<T = HTMLDivElement>(event: MouseEvent<T> | TouchEvent<T>): event is MouseEvent<T>;
+	export function useMouseMove<T = HTMLDivElement>(handleChange: (location: {
+	    x: number;
+	    y: number;
+	}, isFirstInteraction?: boolean) => void, interactionConditional?: any): [
+	    (e: MouseEvent<T>) => void,
+	    (e: MouseEvent<T> | TouchEvent<T>, isFirstInteraction?: boolean) => void
+	];
+
+}
+declare module '@elastic/eui/src/services/hooks' {
+	export * from '@elastic/eui/src/services/hooks/useDependentState';
+	export * from '@elastic/eui/src/services/hooks/useCombinedRefs';
+	export * from '@elastic/eui/src/services/hooks/useForceRender';
+	export * from '@elastic/eui/src/services/hooks/useLatest';
+	export * from '@elastic/eui/src/services/hooks/useMouseMove';
+	export * from '@elastic/eui/src/services/hooks/useUpdateEffect';
+
 }
 declare module '@elastic/eui/src/services' {
 	import * as keys from '@elastic/eui/src/services/keys';
@@ -7102,7 +7108,7 @@ declare module '@elastic/eui/src/services' {
 	export type { HorizontalAlignment } from '@elastic/eui/src/services/alignment';
 	export { LEFT_ALIGNMENT, RIGHT_ALIGNMENT, CENTER_ALIGNMENT } from '@elastic/eui/src/services/alignment';
 	export type { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
-	export { BREAKPOINTS, BREAKPOINT_KEYS, getBreakpoint, isWithinBreakpoints, isWithinMaxBreakpoint, isWithinMinBreakpoint, } from '@elastic/eui/src/services/breakpoint';
+	export { BREAKPOINTS, BREAKPOINT_KEYS, getBreakpoint, isWithinBreakpoints, useIsWithinBreakpoints, isWithinMaxBreakpoint, isWithinMinBreakpoint, CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, } from '@elastic/eui/src/services/breakpoint';
 	export type { HSV } from '@elastic/eui/src/services/color';
 	export { isColorDark, isValidHex, calculateContrast, calculateLuminance, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, rgbToHex, rgbToHsv, VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR, colorPalette, euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplimentary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray, getSteppedGradient, transparentize, tint, shade, tintOrShade, shadeOrTint, saturate, desaturate, lightness, makeHighContrastColor, makeDisabledContrastColor, } from '@elastic/eui/src/services/color';
 	export type { EuiSetColorMethod } from '@elastic/eui/src/services/color_picker';
@@ -7549,13 +7555,12 @@ declare module '@elastic/eui/src/components/badge/beta_badge/beta_badge' {
 	    title?: string;
 	}> & {
 	    label: ReactNode;
-	};
-	interface LabelAsString {
+	}; type LabelAsString = {
 	    /**
 	     * One word label like "Beta" or "Lab"
 	     */
 	    label: string;
-	} type BadgeProps = {
+	}; type BadgeProps = {
 	    /**
 	     * Supply an icon type if the badge should just be an icon
 	     */
@@ -7808,16 +7813,36 @@ declare module '@elastic/eui/src/components/link' {
 	export { EuiLink } from '@elastic/eui/src/components/link/link';
 
 }
-declare module '@elastic/eui/src/components/breadcrumbs/breadcrumbs' {
-	import { AriaAttributes, FunctionComponent, HTMLAttributes, MouseEventHandler, ReactNode } from 'react';
+declare module '@elastic/eui/src/components/breadcrumbs/breadcrumb.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiBreadcrumbStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiBreadcrumb: import("@emotion/utils").SerializedStyles;
+	    isTruncated: import("@emotion/utils").SerializedStyles;
+	    isCollapsed: import("@emotion/utils").SerializedStyles;
+	    page: import("@emotion/utils").SerializedStyles;
+	    application: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiBreadcrumbContentStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiBreadcrumb__content: import("@emotion/utils").SerializedStyles;
+	    isTruncated: import("@emotion/utils").SerializedStyles;
+	    isTruncatedLast: import("@emotion/utils").SerializedStyles;
+	    page: import("@emotion/utils").SerializedStyles;
+	    application: import("@emotion/utils").SerializedStyles;
+	    applicationStyles: {
+	        onlyChild: import("@emotion/utils").SerializedStyles;
+	        firstChild: import("@emotion/utils").SerializedStyles;
+	        lastChild: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
+}
+declare module '@elastic/eui/src/components/breadcrumbs/breadcrumb' {
+	import { FunctionComponent, HTMLAttributes, AriaAttributes, MouseEventHandler, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiLinkColor } from '@elastic/eui/src/components/link';
-	import { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
-	export type EuiBreadcrumbResponsiveMaxCount = {
-	    [key in EuiBreakpointSize]?: number;
-	};
-	export type EuiBreadcrumb = HTMLAttributes<HTMLElement> & CommonProps & {
+	export type EuiBreadcrumbProps = Omit<HTMLAttributes<HTMLElement>, 'color' | 'aria-current'> & CommonProps & {
 	    href?: string;
+	    rel?: string;
 	    onClick?: MouseEventHandler<HTMLAnchorElement>;
 	    /**
 	     * Visible label of the breadcrumb
@@ -7835,6 +7860,34 @@ declare module '@elastic/eui/src/components/breadcrumbs/breadcrumbs' {
 	     * Override the existing `aria-current` which defaults to `page` for the last breadcrumb
 	     */
 	    'aria-current'?: AriaAttributes['aria-current'];
+	}; type _EuiBreadcrumbProps = {
+	    type: 'page' | 'application';
+	    isFirstBreadcrumb?: boolean;
+	    isLastBreadcrumb?: boolean;
+	    isOnlyBreadcrumb?: boolean;
+	    highlightLastBreadcrumb?: boolean;
+	} & Pick<EuiBreadcrumbProps, 'truncate'>;
+	export const EuiBreadcrumb: FunctionComponent<HTMLAttributes<HTMLLIElement> & _EuiBreadcrumbProps>;
+	export const EuiBreadcrumbContent: FunctionComponent<EuiBreadcrumbProps & _EuiBreadcrumbProps>;
+	export const EuiBreadcrumbCollapsed: FunctionComponent<_EuiBreadcrumbProps>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/breadcrumbs/breadcrumbs.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiBreadcrumbsListStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiBreadcrumbs__list: import("@emotion/utils").SerializedStyles;
+	    isTruncated: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/breadcrumbs/breadcrumbs' {
+	import { FunctionComponent } from 'react';
+	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { EuiBreakpointSize } from '@elastic/eui/src/services';
+	import { EuiBreadcrumbProps } from '@elastic/eui/src/components/breadcrumbs/breadcrumb';
+	export type EuiBreadcrumbResponsiveMaxCount = {
+	    [key in EuiBreakpointSize]?: number;
 	};
 	export type EuiBreadcrumbsProps = CommonProps & {
 	    /**
@@ -7861,13 +7914,30 @@ declare module '@elastic/eui/src/components/breadcrumbs/breadcrumbs' {
 	    /**
 	     * The array of individual #EuiBreadcrumb items
 	     */
-	    breadcrumbs: EuiBreadcrumb[];
+	    breadcrumbs: EuiBreadcrumbProps[];
+	    /**
+	     * Determines breadcrumbs appearance, with `page` being the default styling.
+	     * Application breadcrumbs should only be once per page, in (e.g.) EuiHeader
+	     */
+	    type?: 'page' | 'application';
+	    /**
+	     * Whether the last breadcrumb should visually (and accessibly, to screen readers)
+	     * be highlighted as the current page. Defaults to true.
+	     */
+	    lastBreadcrumbIsCurrentPage?: boolean;
 	};
 	export const EuiBreadcrumbs: FunctionComponent<EuiBreadcrumbsProps>;
+	export const useResponsiveMax: (responsive: EuiBreadcrumbsProps['responsive'], max: EuiBreadcrumbsProps['max']) => number | null | undefined; type _EuiBreadcrumbCollapsedObj = {
+	    isCollapsedButton: true;
+	    overflowBreadcrumbs: EuiBreadcrumbProps[];
+	}; type _EuiBreadcrumbsObjs = Array<ExclusiveUnion<EuiBreadcrumbProps, _EuiBreadcrumbCollapsedObj>>;
+	export const limitBreadcrumbs: (breadcrumbs: EuiBreadcrumbsProps['breadcrumbs'], max: number) => _EuiBreadcrumbsObjs;
+	export {};
 
 }
 declare module '@elastic/eui/src/components/breadcrumbs' {
-	export type { EuiBreadcrumb, EuiBreadcrumbsProps, EuiBreadcrumbResponsiveMaxCount, } from '@elastic/eui/src/components/breadcrumbs/breadcrumbs';
+	export type { EuiBreadcrumbProps as EuiBreadcrumb } from '@elastic/eui/src/components/breadcrumbs/breadcrumb';
+	export type { EuiBreadcrumbsProps, EuiBreadcrumbResponsiveMaxCount, } from '@elastic/eui/src/components/breadcrumbs/breadcrumbs';
 	export { EuiBreadcrumbs } from '@elastic/eui/src/components/breadcrumbs/breadcrumbs';
 
 }
@@ -9285,16 +9355,14 @@ declare module '@elastic/eui/src/components/comment_list/comment_event.styles' {
 	};
 	export const euiCommentEventHeaderStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiCommentEvent__header: import("@emotion/utils").SerializedStyles;
-	    euiCommentEvent__headerPanel: import("@emotion/utils").SerializedStyles;
+	    regular: import("@emotion/utils").SerializedStyles;
+	    hasEventColor: import("@emotion/utils").SerializedStyles;
 	    euiCommentEvent__headerMain: import("@emotion/utils").SerializedStyles;
 	    euiCommentEvent__headerData: import("@emotion/utils").SerializedStyles;
 	    euiCommentEvent__headerEventIcon: import("@emotion/utils").SerializedStyles;
 	    euiCommentEvent__headerUsername: import("@emotion/utils").SerializedStyles;
 	    euiCommentEvent__headerEvent: import("@emotion/utils").SerializedStyles;
-	    euiCommentEvent__headerTimestamp: import("@emotion/utils").SerializedStyles;
 	    euiCommentEvent__headerActions: import("@emotion/utils").SerializedStyles;
-	    regular: import("@emotion/utils").SerializedStyles;
-	    hasEventColor: import("@emotion/utils").SerializedStyles;
 	};
 	export const euiCommentEventBodyStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiCommentEvent__body: import("@emotion/utils").SerializedStyles;
@@ -9846,27 +9914,18 @@ declare module '@elastic/eui/src/components/datagrid/utils/row_heights' {
 	};
 
 }
-declare module '@elastic/eui/src/components/token/token_map' {
-	import { TokenProps } from '@elastic/eui/src/components/token/token';
-	export type EuiTokenMapType = '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';
-	/**
-	 * Most of the style combinations for tokens are semi-arbitrary. However, there was an effort
-	 * to use the square shape for more common token types like string and number. Reserving the
-	 * circle shape for more uncommon token types so they grab attention.
-	 */
-	export const TOKEN_MAP: {
-	    [mapType in EuiTokenMapType]: Omit<TokenProps, 'iconType'>;
-	};
-
-}
-declare module '@elastic/eui/src/components/token/token' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+declare module '@elastic/eui/src/components/token/token_types' {
+	import { HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { IconType } from '@elastic/eui/src/components/icon'; type TokenSize = 'xs' | 's' | 'm' | 'l'; type TokenShape = 'circle' | 'square' | 'rectangle'; type TokenFill = 'dark' | 'light' | 'none'; type TokenColor = 'euiColorVis0' | 'euiColorVis1' | 'euiColorVis2' | 'euiColorVis3' | 'euiColorVis4' | 'euiColorVis5' | 'euiColorVis6' | 'euiColorVis7' | 'euiColorVis8' | 'euiColorVis9' | 'gray';
-	export const SIZES: TokenSize[];
-	export const SHAPES: TokenShape[];
-	export const FILLS: TokenFill[];
-	export const COLORS: TokenColor[];
+	import { IconType } from '@elastic/eui/src/components/icon';
+	export const SIZES: readonly ["xs", "s", "m", "l"];
+	export type TokenSize = typeof SIZES[number];
+	export const SHAPES: readonly ["circle", "square", "rectangle"];
+	export type TokenShape = typeof SHAPES[number];
+	export const FILLS: readonly ["light", "dark", "none"];
+	export type TokenFill = typeof FILLS[number];
+	export const COLORS: readonly ["euiColorVis0", "euiColorVis1", "euiColorVis2", "euiColorVis3", "euiColorVis4", "euiColorVis5", "euiColorVis6", "euiColorVis7", "euiColorVis8", "euiColorVis9", "gray"];
+	export type TokenColor = typeof COLORS[number];
 	export interface TokenProps {
 	    /**
 	     * An EUI icon type
@@ -9874,8 +9933,8 @@ declare module '@elastic/eui/src/components/token/token' {
 	    iconType: IconType;
 	    /**
 	     * For best results use one of the vis color names (or 'gray').
-	     * Or supply your own color (can be used with dark or no fill only).
-	     * Default: `gray`
+	     * Or supply your own HEX color. The `fill='light'` (lightened background) will always be overridden by `fill='dark'` (solid background).
+	     * Default: `gray` for glyphs or one of the vis colors for prefab token types
 	     */
 	    color?: TokenColor | string;
 	    /**
@@ -9901,13 +9960,61 @@ declare module '@elastic/eui/src/components/token/token' {
 	    'aria-describedby'?: string;
 	}
 	export type EuiTokenProps = CommonProps & TokenProps & Omit<HTMLAttributes<HTMLSpanElement>, 'title'>;
+
+}
+declare module '@elastic/eui/src/components/token/token_map' {
+	import type { TokenProps } from '@elastic/eui/src/components/token/token_types';
+	export type EuiTokenMapType = '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';
+	/**
+	 * Most of the style combinations for tokens are semi-arbitrary. However, there was an effort
+	 * to use the square shape for more common token types like string and number. Reserving the
+	 * circle shape for more uncommon token types so they grab attention.
+	 */
+	export const TOKEN_MAP: {
+	    [mapType in EuiTokenMapType]: Omit<TokenProps, 'iconType'>;
+	};
+
+}
+declare module '@elastic/eui/src/components/token/token.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	import type { TokenFill } from '@elastic/eui/src/components/token/token_types';
+	export const euiTokenStyles: ({ euiTheme, colorMode }: UseEuiTheme, fill: TokenFill) => {
+	    euiToken: import("@emotion/utils").SerializedStyles;
+	    circle: import("@emotion/utils").SerializedStyles;
+	    square: import("@emotion/utils").SerializedStyles;
+	    rectangle: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    euiColorVis0: import("@emotion/utils").SerializedStyles;
+	    euiColorVis1: import("@emotion/utils").SerializedStyles;
+	    euiColorVis2: import("@emotion/utils").SerializedStyles;
+	    euiColorVis3: import("@emotion/utils").SerializedStyles;
+	    euiColorVis4: import("@emotion/utils").SerializedStyles;
+	    euiColorVis5: import("@emotion/utils").SerializedStyles;
+	    euiColorVis6: import("@emotion/utils").SerializedStyles;
+	    euiColorVis7: import("@emotion/utils").SerializedStyles;
+	    euiColorVis8: import("@emotion/utils").SerializedStyles;
+	    euiColorVis9: import("@emotion/utils").SerializedStyles;
+	    gray: import("@emotion/utils").SerializedStyles;
+	    customColor: import("@emotion/utils").SerializedStyles;
+	    light: import("@emotion/utils").SerializedStyles;
+	    dark: import("@emotion/utils").SerializedStyles;
+	    none: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/token/token' {
+	import { FunctionComponent } from 'react';
+	import type { EuiTokenProps } from '@elastic/eui/src/components/token/token_types';
 	export const EuiToken: FunctionComponent<EuiTokenProps>;
-	export {};
 
 }
 declare module '@elastic/eui/src/components/token' {
-	export type { EuiTokenProps } from '@elastic/eui/src/components/token/token';
-	export { EuiToken, SIZES as TOKEN_SIZES, SHAPES as TOKEN_SHAPES, COLORS as TOKEN_COLORS, } from '@elastic/eui/src/components/token/token';
+	export type { EuiTokenProps } from '@elastic/eui/src/components/token/token_types';
+	export { SIZES as TOKEN_SIZES, SHAPES as TOKEN_SHAPES, COLORS as TOKEN_COLORS, } from '@elastic/eui/src/components/token/token_types';
+	export { EuiToken } from '@elastic/eui/src/components/token/token';
 
 }
 declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
@@ -12403,7 +12510,7 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 }
 declare module '@elastic/eui/src/components/responsive/hide_for' {
 	import { ReactNode, FunctionComponent } from 'react';
-	import { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
+	import { EuiBreakpointSize } from '@elastic/eui/src/services';
 	export type EuiHideForBreakpoints = EuiBreakpointSize;
 	export interface EuiHideForProps {
 	    /**
@@ -12421,7 +12528,7 @@ declare module '@elastic/eui/src/components/responsive/hide_for' {
 }
 declare module '@elastic/eui/src/components/responsive/show_for' {
 	import { ReactNode, FunctionComponent } from 'react';
-	import { EuiBreakpointSize } from '@elastic/eui/src/services/breakpoint';
+	import { EuiBreakpointSize } from '@elastic/eui/src/services';
 	export type EuiShowForBreakpoints = EuiBreakpointSize;
 	export interface EuiShowForProps {
 	    /**
@@ -12786,24 +12893,9 @@ declare module '@elastic/eui/src/components/delay_render' {
 	export { EuiDelayRender } from '@elastic/eui/src/components/delay_render/delay_render';
 
 }
-declare module '@elastic/eui/src/components/description_list/description_list_title' {
-	import { HTMLAttributes, FunctionComponent } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	export const EuiDescriptionListTitle: FunctionComponent<CommonProps & HTMLAttributes<HTMLElement>>;
-
-}
-declare module '@elastic/eui/src/components/description_list/description_list_description' {
-	import { HTMLAttributes, FunctionComponent } from 'react';
-	import { CommonProps } from '@elastic/eui/src/components/common';
-	export const EuiDescriptionListDescription: FunctionComponent<CommonProps & HTMLAttributes<HTMLElement>>;
-
-}
-declare module '@elastic/eui/src/components/description_list/description_list' {
-	import { HTMLAttributes, ReactNode, FunctionComponent } from 'react';
+declare module '@elastic/eui/src/components/description_list/description_list_types' {
+	import { HTMLAttributes, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	export type EuiDescriptionListType = keyof typeof typesToClassNameMap;
-	export type EuiDescriptionListAlignment = keyof typeof alignmentsToClassNameMap;
-	export type EuiDescriptionListTextStyle = keyof typeof textStylesToClassNameMap;
 	export interface EuiDescriptionListProps {
 	    listItems?: Array<{
 	        title: NonNullable<ReactNode>;
@@ -12821,7 +12913,7 @@ declare module '@elastic/eui/src/components/description_list/description_list' {
 	     * How should the content be styled, by default
 	     * this will emphasize the title
 	     */
-	    textStyle?: EuiDescriptionListTextStyle;
+	    textStyle?: 'normal' | 'reverse';
 	    /**
 	     * How each item should be laid out
 	     */
@@ -12834,27 +12926,107 @@ declare module '@elastic/eui/src/components/description_list/description_list' {
 	     * Props object to be passed to `EuiDescriptionListDescription`
 	     */
 	    descriptionProps?: HTMLAttributes<HTMLElement> & CommonProps;
-	} const typesToClassNameMap: {
-	    row: string;
-	    inline: string;
-	    column: string;
-	    responsiveColumn: string;
+	}
+	export const TYPES: readonly ["row", "inline", "column", "responsiveColumn"];
+	export type EuiDescriptionListType = typeof TYPES[number];
+	export const ALIGNMENTS: readonly ["center", "left"];
+	export type EuiDescriptionListAlignment = typeof ALIGNMENTS[number];
+	export const TEXT_STYLES: readonly ["normal", "reverse"];
+	export type EuiDescriptionListTextStyle = typeof TEXT_STYLES[number];
+
+}
+declare module '@elastic/eui/src/components/description_list/description_list_title.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiDescriptionListTitleStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiDescriptionList__title: import("@emotion/utils").SerializedStyles;
+	    row: import("@emotion/utils").SerializedStyles;
+	    column: import("@emotion/utils").SerializedStyles;
+	    responsiveColumn: import("@emotion/utils").SerializedStyles;
+	    inline: import("@emotion/utils").SerializedStyles;
+	    fontStyles: {
+	        normal: import("@emotion/utils").SerializedStyles;
+	        reverse: import("@emotion/utils").SerializedStyles;
+	        compressed: import("@emotion/utils").SerializedStyles;
+	    };
+	    inlineStyles: {
+	        normal: import("@emotion/utils").SerializedStyles;
+	        compressed: import("@emotion/utils").SerializedStyles;
+	    };
+	    right: import("@emotion/utils").SerializedStyles;
 	};
-	export const TYPES: ("row" | "inline" | "column" | "responsiveColumn")[]; const alignmentsToClassNameMap: {
-	    center: string;
-	    left: string;
+
+}
+declare module '@elastic/eui/src/components/description_list/description_list_context' {
+	
+	import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list_types'; type EuiDescriptionListContextValues = Required<Pick<EuiDescriptionListProps, 'type' | 'textStyle' | 'align'>> & {
+	    compressed?: EuiDescriptionListProps['compressed'];
 	};
-	export const ALIGNMENTS: ("left" | "center")[]; const textStylesToClassNameMap: {
-	    normal: string;
-	    reverse: string;
+	export const contextDefaults: EuiDescriptionListContextValues;
+	export const EuiDescriptionListContext: import("react").Context<EuiDescriptionListContextValues>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/description_list/description_list_title' {
+	import { HTMLAttributes, FunctionComponent } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	interface EuiDescriptionListTitleProps extends CommonProps, HTMLAttributes<HTMLElement> {
+	}
+	export const EuiDescriptionListTitle: FunctionComponent<EuiDescriptionListTitleProps>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/description_list/description_list_description.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiDescriptionListDescriptionStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiDescriptionList__description: import("@emotion/utils").SerializedStyles;
+	    row: import("@emotion/utils").SerializedStyles;
+	    column: import("@emotion/utils").SerializedStyles;
+	    responsiveColumn: import("@emotion/utils").SerializedStyles;
+	    inline: import("@emotion/utils").SerializedStyles;
+	    fontStyles: {
+	        normal: import("@emotion/utils").SerializedStyles;
+	        reverse: import("@emotion/utils").SerializedStyles;
+	        compressed: import("@emotion/utils").SerializedStyles;
+	    };
+	    inlineStyles: {
+	        compressed: import("@emotion/utils").SerializedStyles;
+	        normal: import("@emotion/utils").SerializedStyles;
+	    };
+	    left: import("@emotion/utils").SerializedStyles;
 	};
-	export const TEXT_STYLES: ("normal" | "reverse")[];
-	export const EuiDescriptionList: FunctionComponent<CommonProps & HTMLAttributes<HTMLDListElement> & EuiDescriptionListProps>;
+
+}
+declare module '@elastic/eui/src/components/description_list/description_list_description' {
+	import { HTMLAttributes, FunctionComponent } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	interface EuiDescriptionListDescriptionProps extends CommonProps, HTMLAttributes<HTMLElement> {
+	}
+	export const EuiDescriptionListDescription: FunctionComponent<EuiDescriptionListDescriptionProps>;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/description_list/description_list.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiDescriptionListStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiDescriptionList: import("@emotion/utils").SerializedStyles;
+	    row: import("@emotion/utils").SerializedStyles;
+	    inline: import("@emotion/utils").SerializedStyles;
+	    column: import("@emotion/utils").SerializedStyles;
+	    responsiveColumn: import("@emotion/utils").SerializedStyles;
+	    center: import("@emotion/utils").SerializedStyles;
+	    left: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/description_list/description_list' {
+	import { HTMLAttributes, FunctionComponent } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list_types';
+	export const EuiDescriptionList: FunctionComponent<CommonProps & HTMLAttributes<HTMLDListElement> & EuiDescriptionListProps>;
+
 }
 declare module '@elastic/eui/src/components/description_list' {
-	export type { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list';
+	export type { EuiDescriptionListProps } from '@elastic/eui/src/components/description_list/description_list_types';
 	export { EuiDescriptionList } from '@elastic/eui/src/components/description_list/description_list';
 	export { EuiDescriptionListTitle } from '@elastic/eui/src/components/description_list/description_list_title';
 	export { EuiDescriptionListDescription } from '@elastic/eui/src/components/description_list/description_list_description';
@@ -13333,6 +13505,13 @@ declare module '@elastic/eui/src/components/header/header_section' {
 	export type { EuiHeaderSectionItemButtonProps } from '@elastic/eui/src/components/header/header_section/header_section_item_button';
 	export { EuiHeaderSectionItemButton } from '@elastic/eui/src/components/header/header_section/header_section_item_button';
 
+}
+declare module '@elastic/eui/src/components/header/header_breadcrumbs/header_breadcrumbs.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiHeaderBreadcrumbsStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiHeaderBreadcrumbs: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/header/header_breadcrumbs/header_breadcrumbs' {
 	import { FunctionComponent } from 'react';
@@ -16104,7 +16283,8 @@ declare module '@elastic/eui/src/components/selectable/selectable' {
 	import { EuiSelectableOptionsListProps } from '@elastic/eui/src/components/selectable/selectable_list/selectable_list';
 	import { EuiSelectableSearchProps } from '@elastic/eui/src/components/selectable/selectable_search/selectable_search';
 	import { Align } from 'react-window';
-	export type EuiSelectableOnChangeEvent = KeyboardEvent | MouseEvent; type RequiredEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof typeof EuiSelectableList['defaultProps']>; type OptionalEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof RequiredEuiSelectableOptionsListProps>; type EuiSelectableOptionsListPropsWithDefaults = RequiredEuiSelectableOptionsListProps & Partial<OptionalEuiSelectableOptionsListProps>; type EuiSelectableSearchableProps<T> = ExclusiveUnion<{
+	export type EuiSelectableOnChangeEvent = KeyboardEvent | MouseEvent; type RequiredEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof typeof EuiSelectableList['defaultProps']>; type OptionalEuiSelectableOptionsListProps = Omit<EuiSelectableOptionsListProps, keyof RequiredEuiSelectableOptionsListProps>; type EuiSelectableOptionsListPropsWithDefaults = RequiredEuiSelectableOptionsListProps & Partial<OptionalEuiSelectableOptionsListProps>;
+	export type EuiSelectableSearchableProps<T> = ExclusiveUnion<{
 	    searchable: false;
 	}, {
 	    /**
@@ -16333,7 +16513,7 @@ declare module '@elastic/eui/src/components/selectable/selectable_templates' {
 
 }
 declare module '@elastic/eui/src/components/selectable' {
-	export type { EuiSelectableProps, EuiSelectableSearchableSearchProps, } from '@elastic/eui/src/components/selectable/selectable';
+	export type { EuiSelectableProps, EuiSelectableSearchableProps, EuiSelectableSearchableSearchProps, } from '@elastic/eui/src/components/selectable/selectable';
 	export { EuiSelectable } from '@elastic/eui/src/components/selectable/selectable';
 	export type { EuiSelectableListProps, EuiSelectableListItemProps, EuiSelectableOptionsListProps, } from '@elastic/eui/src/components/selectable/selectable_list';
 	export { EuiSelectableList, EuiSelectableListItem } from '@elastic/eui/src/components/selectable/selectable_list';
@@ -18288,12 +18468,33 @@ declare module '@elastic/eui/src/components/text_diff' {
 	export type { EuiTextDiffProps } from '@elastic/eui/src/components/text_diff/text_diff';
 	export { useEuiTextDiff } from '@elastic/eui/src/components/text_diff/text_diff';
 
+}
+declare module '@elastic/eui/src/components/toast/toast.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiToastStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiToast: import("@emotion/utils").SerializedStyles;
+	    euiToast__closeButton: import("@emotion/utils").SerializedStyles;
+	    primary: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiToastHeaderStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiToastHeader: import("@emotion/utils").SerializedStyles;
+	    euiToastHeader__icon: import("@emotion/utils").SerializedStyles;
+	    euiToastHeader__title: import("@emotion/utils").SerializedStyles;
+	    withBody: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiToastBodyStyles: () => {
+	    euiToastBody: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/toast/toast' {
 	import { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { IconType } from '@elastic/eui/src/components/icon'; type ToastColor = 'primary' | 'success' | 'warning' | 'danger';
-	export const COLORS: ToastColor[];
+	import { IconType } from '@elastic/eui/src/components/icon';
+	export const COLORS: readonly ["primary", "success", "warning", "danger"]; type ToastColor = typeof COLORS[number];
 	export interface EuiToastProps extends CommonProps, Omit<HTMLAttributes<HTMLDivElement>, 'title'> {
 	    title?: ReactNode;
 	    color?: ToastColor;
@@ -18321,6 +18522,23 @@ declare module '@elastic/eui/src/services/time/timer' {
 declare module '@elastic/eui/src/services/time' {
 	export { Timer } from '@elastic/eui/src/services/time/timer';
 
+}
+declare module '@elastic/eui/src/components/toast/global_toast_list.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiGlobalToastListStyles: (euiThemeContext: UseEuiTheme) => {
+	    /**
+	     * 1. Allow list to expand as items are added, but cap it at the screen height.
+	     * 2. Allow some padding for shadow
+	     */
+	    euiGlobalToastList: import("@emotion/utils").SerializedStyles;
+	    right: import("@emotion/utils").SerializedStyles;
+	    left: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiGlobalToastListItemStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiGlobalToastListItem: import("@emotion/utils").SerializedStyles;
+	    dismissed: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/toast/global_toast_list_item' {
 	import { FunctionComponent, ReactElement } from 'react';
@@ -18336,9 +18554,8 @@ declare module '@elastic/eui/src/components/toast/global_toast_list_item' {
 
 }
 declare module '@elastic/eui/src/components/toast/global_toast_list' {
-	import { Component, ReactChild } from 'react';
+	import { FunctionComponent, ReactChild } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { Timer } from '@elastic/eui/src/services/time';
 	import { EuiToastProps } from '@elastic/eui/src/components/toast/toast'; type ToastSide = 'right' | 'left';
 	export const SIDES: ToastSide[];
 	export const TOAST_FADE_OUT_MS = 250;
@@ -18348,47 +18565,15 @@ declare module '@elastic/eui/src/components/toast/global_toast_list' {
 	    toastLifeTimeMs?: number;
 	}
 	export interface EuiGlobalToastListProps extends CommonProps {
-	    toasts: Toast[];
-	    dismissToast: (this: EuiGlobalToastList, toast: Toast) => void;
+	    toasts?: Toast[];
+	    dismissToast: (toast: Toast) => void;
 	    toastLifeTimeMs: number;
 	    /**
 	     * Determines which side of the browser window the toasts should appear
 	     */
 	    side?: ToastSide;
 	}
-	interface State {
-	    toastIdToDismissedMap: {
-	        [toastId: string]: boolean;
-	    };
-	}
-	export class EuiGlobalToastList extends Component<EuiGlobalToastListProps, State> {
-	    state: State;
-	    dismissTimeoutIds: number[];
-	    toastIdToTimerMap: {
-	        [toastId: string]: Timer;
-	    };
-	    isScrollingToBottom: boolean;
-	    isScrolledToBottom: boolean;
-	    isUserInteracting: boolean;
-	    isScrollingAnimationFrame: number;
-	    startScrollingAnimationFrame: number;
-	    listElement: Element | null;
-	    static defaultProps: {
-	        toasts: never[];
-	        side: string;
-	    };
-	    startScrollingToBottom(): void;
-	    onMouseEnter: () => void;
-	    onMouseLeave: () => void;
-	    onScroll: () => void;
-	    scheduleAllToastsForDismissal: () => void;
-	    scheduleToastForDismissal: (toast: Toast) => void;
-	    dismissToast: (toast: Toast) => void;
-	    componentDidMount(): void;
-	    componentDidUpdate(prevProps: EuiGlobalToastListProps): void;
-	    componentWillUnmount(): void;
-	    render(): JSX.Element;
-	}
+	export const EuiGlobalToastList: FunctionComponent<EuiGlobalToastListProps>;
 	export {};
 
 }
@@ -23441,6 +23626,90 @@ declare module 'mdast-util-to-hast/lib/all' {
   const all: (h: H, node: Node) => Node[];
   export = all;
 }
+declare module '@elastic/eui/src/test/rtl/component_helpers' {
+	/**
+	 * Ensure the EuiPopover being tested is open/closed before contiuning
+	 * Note: Because EuiPopover is portalled, we want to query `document`
+	 * instead of the `container` returned by RTL's render()
+	 */
+	export const waitForEuiPopoverOpen: () => Promise<void>;
+	export const waitForEuiPopoverClose: () => Promise<void>;
+
+}
+declare module '@elastic/eui/src/test/rtl/data_test_subj_queries' {
+	import { queryHelpers, Matcher, MatcherOptions } from '@testing-library/react'; const queryAllByTestSubject: (container: HTMLElement, id: Matcher, options?: MatcherOptions | undefined) => HTMLElement[]; const queryByTestSubject: queryHelpers.QueryBy<[Matcher]>, getAllByTestSubject: queryHelpers.GetAllBy<[Matcher]>, getByTestSubject: queryHelpers.GetBy<[Matcher]>, findAllByTestSubject: queryHelpers.FindAllBy<[Matcher]>, findByTestSubject: queryHelpers.FindBy<[Matcher]>;
+	export { queryByTestSubject, queryAllByTestSubject, getByTestSubject, getAllByTestSubject, findAllByTestSubject, findByTestSubject, };
+
+}
+declare module '@elastic/eui/src/test/rtl/custom_render' {
+	import { ReactElement } from 'react';
+	import { queries, RenderOptions, Screen } from '@testing-library/react';
+	import * as dataTestSubjQueries from '@elastic/eui/src/test/rtl/data_test_subj_queries'; const customRender: (ui: ReactElement, { queries: renderQueries, ...options }?: RenderOptions) => import("@testing-library/react").RenderResult<{
+	    getByLabelText: typeof queries.getByLabelText;
+	    getAllByLabelText: typeof queries.getAllByLabelText;
+	    queryByLabelText: typeof queries.queryByLabelText;
+	    queryAllByLabelText: typeof queries.queryAllByLabelText;
+	    findByLabelText: typeof queries.findByLabelText;
+	    findAllByLabelText: typeof queries.findAllByLabelText;
+	    getByPlaceholderText: typeof queries.getByPlaceholderText;
+	    getAllByPlaceholderText: typeof queries.getAllByPlaceholderText;
+	    queryByPlaceholderText: typeof queries.queryByPlaceholderText;
+	    queryAllByPlaceholderText: typeof queries.queryAllByPlaceholderText;
+	    findByPlaceholderText: typeof queries.findByPlaceholderText;
+	    findAllByPlaceholderText: typeof queries.findAllByPlaceholderText;
+	    getByText: typeof queries.getByText;
+	    getAllByText: typeof queries.getAllByText;
+	    queryByText: typeof queries.queryByText;
+	    queryAllByText: typeof queries.queryAllByText;
+	    findByText: typeof queries.findByText;
+	    findAllByText: typeof queries.findAllByText;
+	    getByAltText: typeof queries.getByAltText;
+	    getAllByAltText: typeof queries.getAllByAltText;
+	    queryByAltText: typeof queries.queryByAltText;
+	    queryAllByAltText: typeof queries.queryAllByAltText;
+	    findByAltText: typeof queries.findByAltText;
+	    findAllByAltText: typeof queries.findAllByAltText;
+	    getByTitle: typeof queries.getByTitle;
+	    getAllByTitle: typeof queries.getAllByTitle;
+	    queryByTitle: typeof queries.queryByTitle;
+	    queryAllByTitle: typeof queries.queryAllByTitle;
+	    findByTitle: typeof queries.findByTitle;
+	    findAllByTitle: typeof queries.findAllByTitle;
+	    getByDisplayValue: typeof queries.getByDisplayValue;
+	    getAllByDisplayValue: typeof queries.getAllByDisplayValue;
+	    queryByDisplayValue: typeof queries.queryByDisplayValue;
+	    queryAllByDisplayValue: typeof queries.queryAllByDisplayValue;
+	    findByDisplayValue: typeof queries.findByDisplayValue;
+	    findAllByDisplayValue: typeof queries.findAllByDisplayValue;
+	    getByRole: typeof queries.getByRole;
+	    getAllByRole: typeof queries.getAllByRole;
+	    queryByRole: typeof queries.queryByRole;
+	    queryAllByRole: typeof queries.queryAllByRole;
+	    findByRole: typeof queries.findByRole;
+	    findAllByRole: typeof queries.findAllByRole;
+	    getByTestId: typeof queries.getByTestId;
+	    getAllByTestId: typeof queries.getAllByTestId;
+	    queryByTestId: typeof queries.queryByTestId;
+	    queryAllByTestId: typeof queries.queryAllByTestId;
+	    findByTestId: typeof queries.findByTestId;
+	    findAllByTestId: typeof queries.findAllByTestId;
+	    queryByTestSubject: import("@testing-library/react").QueryBy<[import("@testing-library/react").Matcher]>;
+	    queryAllByTestSubject: (container: HTMLElement, id: import("@testing-library/react").Matcher, options?: import("@testing-library/react").MatcherOptions | undefined) => HTMLElement[];
+	    getByTestSubject: import("@testing-library/react").GetBy<[import("@testing-library/react").Matcher]>;
+	    getAllByTestSubject: import("@testing-library/react").GetAllBy<[import("@testing-library/react").Matcher]>;
+	    findAllByTestSubject: import("@testing-library/react").FindAllBy<[import("@testing-library/react").Matcher]>;
+	    findByTestSubject: import("@testing-library/react").FindBy<[import("@testing-library/react").Matcher]>;
+	}, HTMLElement, HTMLElement>;
+	export { customRender as render }; const customScreen: Screen<typeof queries & typeof dataTestSubjQueries>;
+	export { customScreen as screen };
+
+}
+declare module '@elastic/eui/src/test/rtl' {
+	export * from '@elastic/eui/src/test/rtl/component_helpers';
+	export { queryByTestSubject, queryAllByTestSubject, getByTestSubject, getAllByTestSubject, findAllByTestSubject, findByTestSubject, } from '@elastic/eui/src/test/rtl/data_test_subj_queries';
+	export { render, screen } from '@elastic/eui/src/test/rtl/custom_render';
+
+}
 declare module '@elastic/eui/src/components/table/mobile' {
 	export { EuiTableHeaderMobile } from '@elastic/eui/src/components/table/mobile/table_header_mobile';
 	export type { EuiTableSortMobileProps } from '@elastic/eui/src/components/table/mobile/table_sort_mobile';
@@ -23503,7 +23772,7 @@ declare module '@elastic/eui' {
 "euiBottomBar.screenReaderHeading": any;
 "euiBottomBar.customScreenReaderAnnouncement": any;
 "euiBottomBar.screenReaderAnnouncement": any;
-"euiBreadcrumbs.collapsedBadge.ariaLabel": any;
+"euiBreadcrumb.collapsedBadge.ariaLabel": any;
 "euiBreadcrumbs.nav.ariaLabel": any;
 "euiCardSelect.selected": any;
 "euiCardSelect.unavailable": any;