@elastic/eui 62.0.3 → 63.0.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' {
@@ -1388,68 +586,205 @@ declare module '@elastic/eui/src/global_styling/variables/levels' {
 	 * 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.
+	 * 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")[];
+	/**
+	 * 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
 	 *
-	 * 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' {
@@ -1553,137 +888,749 @@ declare module '@elastic/eui/src/services/theme/utils' {
 	};
 
 }
-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;
+declare module '@elastic/eui/src/services/color/is_color_dark' {
 	/**
-	 * 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.
+	 * 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 const tint: (color: string, ratio: number) => string;
+	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";
 	/**
-	 * 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.
+	 * 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 const shade: (color: string, ratio: number) => string;
+	export function colorPalette(
 	/**
-	 * 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
+	 * The main color code or array of codes
 	 */
-	export const tintOrShade: (color: string, ratio: number, colorMode: EuiThemeColorModeStandard) => string;
+	colors: 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
+	 * The number of colors in the resulting array (default 10)
 	 */
-	export const shadeOrTint: (color: string, ratio: number, colorMode: EuiThemeColorModeStandard) => string;
+	len?: number, 
 	/**
-	 * 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.
+	 * Forces color interpolation to be calculated separately for each half (default false)
 	 */
-	export const saturate: (color: string, amount: number) => string;
+	diverging?: boolean, 
 	/**
-	 * 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.
+	 * Uses a more static interpolation for non-continuous spectrums
 	 */
-	export const desaturate: (color: string, amount: number) => 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;
 	/**
-	 * Returns the lightness value of a color. 0-100
-	 * @param color
+	 * 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 lightness: (color: string) => number;
+	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/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/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/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/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/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/services/react' {
+	export function enqueueStateChange(fn: Function): void;
 
 }
-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/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/variables' {
-	export * from '@elastic/eui/src/global_styling/variables/animations';
-	export * from '@elastic/eui/src/global_styling/variables/borders';
-	export * from '@elastic/eui/src/global_styling/variables/breakpoint';
-	export * from '@elastic/eui/src/global_styling/variables/colors';
-	export * from '@elastic/eui/src/global_styling/variables/levels';
-	export * from '@elastic/eui/src/global_styling/variables/size';
-	export * from '@elastic/eui/src/global_styling/variables/shadow';
-	export * from '@elastic/eui/src/global_styling/variables/states';
-	export * from '@elastic/eui/src/global_styling/variables/typography';
+declare module '@elastic/eui/src/global_styling/mixins/_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/themes/amsterdam/global_styling/variables/_breakpoint' {
-	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables';
-	export const breakpoint: _EuiThemeBreakpoints;
+declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
+	import { CSSProperties } from 'react';
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
+	/**
+	 * Set scroll bar appearance on Chrome (and firefox).
+	 * All parameters are optional and default to specific global settings.
+	 */
+	export interface EuiScrollBarStyles {
+	    thumbColor?: CSSProperties['backgroundColor'];
+	    trackColor?: CSSProperties['backgroundColor'];
+	    /**
+	     * Defaults to `thin`. Use `auto` only for large page scrollbars
+	     */
+	    width?: CSSProperties['scrollbarWidth'];
+	    /**
+	     * Overall width (height for horizontal scrollbars)
+	     */
+	    size?: CSSProperties['width'];
+	    /**
+	     * Corner sizes are usually determined by `width` and
+	     * are used as an inset border and therefore a smaller corner size means a larger thumb
+	     */
+	    corner?: CSSProperties['borderWidth'];
+	}
+	export const euiScrollBarStyles: ({ euiTheme: { colors, size } }: UseEuiTheme, { thumbColor: _thumbColor, trackColor, width, size: _size, corner: _corner, }?: EuiScrollBarStyles) => string;
+	export const useEuiScrollBar: (options?: EuiScrollBarStyles | undefined) => string;
+	/**
+	 * 1. Focus rings shouldn't be visible on scrollable regions, but a11y requires them to be focusable.
+	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
+	 *    Others like Safari, won't show anything at all.
+	 */
+	interface _EuiYScroll {
+	    height?: CSSProperties['height'];
+	}
+	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
+	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScroll: () => string;
+	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
+	export const useEuiXScrollWithShadows: () => string;
+	interface EuiScrollOverflowStyles {
+	    direction?: 'y' | 'x';
+	    mask?: boolean;
+	}
+	export const euiOverflowScroll: (euiTheme: UseEuiTheme, { direction, mask }?: EuiScrollOverflowStyles) => string;
+	export const useEuiOverflowScroll: (direction: EuiScrollOverflowStyles['direction'], mask?: EuiScrollOverflowStyles['mask']) => string;
+	export {};
 
 }
 declare module '@elastic/eui/src/global_styling/functions/logicals' {
@@ -1760,7 +1707,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];
 	/**
 	 *
@@ -1776,7 +1723,7 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	 * @returns `object` Returns the logical CSS property version for the given `property: value` pair
 	 */
 	export const logicalStyle: (property: LogicalProperties, value?: any) => {
-	    [x: string]: string;
+	    [x: string]: any;
 	};
 	/**
 	 *
@@ -1886,140 +1833,20 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 	 * @returns string - Calculated line-height value aligned to baseline
 	 */
 	export function euiLineHeightFromBaseline(scale: _EuiThemeFontScale, { base, font }: UseEuiTheme['euiTheme'], { measurement, customScale }?: _FontScaleOptions): string;
-	/**
-	 * Text weight shifting
-	 *
-	 * When changing the font-weight based on the state of the component,
-	 * this mixin will ensure that the sizing is dependent on the boldest
-	 * weight so it doesn't shift sibling content.
-	 */
-	export const euiTextShift: (fontWeight: "bold" | "light" | "medium" | "regular" | "semiBold" | undefined, attribute: string | undefined, euiTheme: UseEuiTheme['euiTheme']) => string;
-
-}
-declare module '@elastic/eui/src/global_styling/functions' {
-	export * from '@elastic/eui/src/global_styling/functions/logicals';
-	export * from '@elastic/eui/src/global_styling/functions/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.
+	/**
+	 * Text weight shifting
+	 *
+	 * When changing the font-weight based on the state of the component,
+	 * this mixin will ensure that the sizing is dependent on the boldest
+	 * weight so it doesn't shift sibling content.
 	 */
-	export const 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 {};
+	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' {
+	export * from '@elastic/eui/src/global_styling/functions/logicals';
+	export * from '@elastic/eui/src/global_styling/functions/size';
+	export * from '@elastic/eui/src/global_styling/functions/typography';
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_padding' {
@@ -4168,73 +3995,6 @@ declare module '@elastic/eui/src/components/panel/panel' {
 	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';
-
 }
 declare module '@elastic/eui/src/components/panel/split_panel/split_panel' {
 	import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
@@ -6684,36 +6444,252 @@ declare module '@elastic/eui/src/components/color_picker/color_stops/color_stops
 	     */
 	    valueInputProps?: Partial<Omit<EuiFieldNumberProps, 'inputRef' | 'compressed' | 'readOnly' | 'min' | 'max' | 'value' | 'isInvalid' | 'onChange'>>;
 	}
-	export const EuiColorStops: FunctionComponent<EuiColorStopsProps>;
+	export const EuiColorStops: FunctionComponent<EuiColorStopsProps>;
+
+}
+declare module '@elastic/eui/src/components/color_picker/color_stops' {
+	export { EuiColorStops } from '@elastic/eui/src/components/color_picker/color_stops/color_stops';
+	export type { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb';
+
+}
+declare module '@elastic/eui/src/services/color/stepped_gradient' {
+	import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops';
+	export const getSteppedGradient: (colors: ColorStop[], steps: number) => 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/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/components/color_picker/color_stops' {
-	export { EuiColorStops } from '@elastic/eui/src/components/color_picker/color_stops/color_stops';
-	export type { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops/color_stop_thumb';
+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/color/stepped_gradient' {
-	import { ColorStop } from '@elastic/eui/src/components/color_picker/color_stops';
-	export const getSteppedGradient: (colors: ColorStop[], steps: number) => string[];
+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/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/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 +7070,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 +7126,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 +7573,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
 	     */
@@ -7700,7 +7723,8 @@ declare module '@elastic/eui/src/components/bottom_bar/bottom_bar.styles' {
 }
 declare module '@elastic/eui/src/components/bottom_bar/bottom_bar' {
 	import React, { CSSProperties, HTMLAttributes } from 'react';
-	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common'; type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
+	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { EuiPortalProps } from '@elastic/eui/src/components/portal'; type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
 	export const paddingSizeToClassNameMap: {
 	    [value in BottomBarPaddingSize]: string | null;
 	};
@@ -7711,7 +7735,7 @@ declare module '@elastic/eui/src/components/bottom_bar/bottom_bar' {
 	     * Whether to wrap in an EuiPortal which appends the component to the body element.
 	     * Only works if `position` is `fixed`.
 	     */
-	    usePortal?: boolean;
+	    usePortal?: boolean | EuiPortalProps;
 	    /**
 	     * Whether the component should apply padding on the document body element to afford for its own displacement height.
 	     * Only works if `usePortal` is true and `position` is `fixed`.
@@ -7808,16 +7832,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 +7879,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 +7933,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';
 
 }
@@ -9789,14 +9878,17 @@ declare module '@elastic/eui/src/components/datagrid/utils/sorting' {
 }
 declare module '@elastic/eui/src/components/datagrid/utils/row_heights' {
 	import { CSSProperties, MutableRefObject } from 'react';
-	import { EuiDataGridStyleCellPaddings, EuiDataGridStyle, EuiDataGridRowHeightOption, EuiDataGridRowHeightsOptions, EuiDataGridColumn, ImperativeGridApi } from '@elastic/eui/src/components/datagrid/data_grid_types';
+	import { GridOnItemsRenderedProps } from 'react-window';
+	import { EuiDataGridColumn, EuiDataGridRowHeightOption, EuiDataGridRowHeightsOptions, EuiDataGridScrollAnchorRow, EuiDataGridStyle, EuiDataGridStyleCellPaddings, ImperativeGridApi } from '@elastic/eui/src/components/datagrid/data_grid_types';
 	export const cellPaddingsMap: Record<EuiDataGridStyleCellPaddings, number>;
 	export const AUTO_HEIGHT = "auto";
 	export const DEFAULT_ROW_HEIGHT = 34;
 	export class RowHeightUtils {
 	    private gridRef;
+	    private outerGridElementRef;
+	    private gridItemsRenderedRef;
 	    private rerenderGridBodyRef;
-	    constructor(gridRef: MutableRefObject<ImperativeGridApi | null>, rerenderGridBodyRef: MutableRefObject<(() => void) | null>);
+	    constructor(gridRef: MutableRefObject<ImperativeGridApi | null>, outerGridElementRef: MutableRefObject<HTMLDivElement | null>, gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>, rerenderGridBodyRef: MutableRefObject<(() => void) | null>);
 	    getRowHeightOption(rowIndex: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions): EuiDataGridRowHeightOption | undefined;
 	    isRowHeightOverride(rowIndex: number, rowHeightsOptions?: EuiDataGridRowHeightsOptions): boolean;
 	    getCalculatedHeight(heightOption: EuiDataGridRowHeightOption, defaultHeight: number, rowIndex?: number, isRowHeightOverride?: boolean): number;
@@ -9823,13 +9915,16 @@ declare module '@elastic/eui/src/components/datagrid/utils/row_heights' {
 	    pruneHiddenColumnHeights(visibleColumns: EuiDataGridColumn[]): void;
 	    resetRow(visibleRowIndex: number): void;
 	    resetGrid(): void;
+	    compensateForLayoutShift(rowIndex: number, verticalLayoutShift: number, anchorRow: EuiDataGridScrollAnchorRow): void;
 	}
 	/**
 	 * Hook for instantiating RowHeightUtils, setting internal class vars,
 	 * and setting up various row-height-related side effects
 	 */
-	export const useRowHeightUtils: ({ gridRef, gridStyles, columns, rowHeightsOptions, }: {
+	export const useRowHeightUtils: ({ gridRef, outerGridElementRef, gridItemsRenderedRef, gridStyles, columns, rowHeightsOptions, }: {
 	    gridRef: MutableRefObject<ImperativeGridApi | null>;
+	    outerGridElementRef: MutableRefObject<HTMLDivElement | null>;
+	    gridItemsRenderedRef: MutableRefObject<GridOnItemsRenderedProps | null>;
 	    gridStyles: EuiDataGridStyle;
 	    columns: EuiDataGridColumn[];
 	    rowHeightsOptions?: EuiDataGridRowHeightsOptions | undefined;
@@ -9844,27 +9939,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
@@ -9872,8 +9958,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;
 	    /**
@@ -9899,13 +9985,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' {
@@ -10687,6 +10821,7 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    width: number;
 	}
 	export type EuiDataGridOnColumnResizeHandler = (data: EuiDataGridOnColumnResizeData) => void;
+	export type EuiDataGridScrollAnchorRow = 'start' | 'center' | undefined;
 	export type EuiDataGridRowHeightOption = number | 'auto' | ExclusiveUnion<{
 	    lineCount: number;
 	}, {
@@ -10713,6 +10848,13 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	     * Can be used for, e.g. storing user `rowHeightsOptions` in a local storage object.
 	     */
 	    onChange?: (rowHeightsOptions: EuiDataGridRowHeightsOptions) => void;
+	    /**
+	     * Optional indicator of the row that should be used as an anchor for vertical layout shift compensation.
+	     * When set to 'start' or 'center', the topmost or middle visible row will try
+	     * to compensate for changes in their top offsets by adjusting the grid's scroll
+	     * position.
+	     */
+	    scrollAnchorRow?: EuiDataGridScrollAnchorRow;
 	}
 	export interface EuiDataGridRowManager {
 	    getRow(args: {
@@ -12401,7 +12543,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 {
 	    /**
@@ -12419,7 +12561,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 {
 	    /**
@@ -12784,24 +12926,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>;
@@ -12819,7 +12946,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
 	     */
@@ -12832,27 +12959,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 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 ALIGNMENTS: ("left" | "center")[]; const textStylesToClassNameMap: {
-	    normal: string;
-	    reverse: string;
+
+}
+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;
 	};
-	export const TEXT_STYLES: ("normal" | "reverse")[];
+
+}
+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>;
-	export {};
 
 }
 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';
@@ -13331,6 +13538,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';
@@ -14637,25 +14851,51 @@ declare module '@elastic/eui/src/components/page/_restrict_width' {
 	 * This is file contains the type specific to that prop and a helper
 	 * function for creating the corresponding classNames and style tags
 	 * based on the consumer's configuration
-	 *
-	 * @param {restrictWidth} boolean | number | string The prop value
-	 * @param {style} CSSProperties An object of style attributes if provided
-	 * @returns {{widthClassName: string, newStyle: CSSProperties}} Returns an object with keys for the class name to append to the component's class and the updated style props
 	 */
 	import { CSSProperties } from 'react';
+	export const PAGE_MAX_WIDTH: CSSProperties['maxWidth'];
 	export type _EuiPageRestrictWidth = {
 	    /**
 	     * Sets the max-width of the page,
-	     * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,
+	     * set to `true` to use the default size of `1200px`,
 	     * set to `false` to not restrict the width,
 	     * set to a number for a custom width in px,
 	     * set to a string for a custom width in custom measurement.
 	     */
 	    restrictWidth?: boolean | number | string;
 	};
+	/**
+	 * **DEPRECATED**
+	 * This function calculates the correct class name and combined styles
+	 * based on the `restrictWidth` value passed in
+	 *
+	 * @param restrictWidth `boolean | number | string` The prop value
+	 * @param style `CSSProperties` An object of style attributes if provided
+	 * @returns An object with keys for the `widthClassName` to append to the component's class and the updated `newStyle` props
+	 */
 	export function setPropsForRestrictedPageWidth(restrictWidth: _EuiPageRestrictWidth['restrictWidth'], style?: CSSProperties): {
 	    widthClassName?: string;
-	    newStyle?: CSSProperties;
+	    newStyle: CSSProperties;
+	};
+	/**
+	 * This function calculates the correct just the combined styles
+	 * based on the `restrictWidth` value passed in
+	 *
+	 * @param restrictWidth `boolean | number | string` The prop value
+	 * @param style `CSSProperties` An object of style attributes if provided
+	 * @returns An object of the updated `style` props
+	 */
+	export function setStyleForRestrictedPageWidth(restrictWidth: _EuiPageRestrictWidth['restrictWidth'], style?: CSSProperties): CSSProperties;
+
+}
+declare module '@elastic/eui/src/components/page/page.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiPage: import("@emotion/utils").SerializedStyles;
+	    grow: import("@emotion/utils").SerializedStyles;
+	    column: import("@emotion/utils").SerializedStyles;
+	    row: import("@emotion/utils").SerializedStyles;
+	    restrictWidth: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -14663,14 +14903,13 @@ declare module '@elastic/eui/src/components/page/page' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
-	export const SIZES: ("s" | "none" | "m" | "l")[];
-	export const DIRECTIONS: ("row" | "column")[];
+	import { EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	export interface EuiPageProps extends CommonProps, HTMLAttributes<HTMLDivElement>, _EuiPageRestrictWidth {
 	    /**
 	     * Adjust the padding.
 	     * When using this setting it's best to be consistent throughout all similar usages
 	     */
-	    paddingSize?: typeof SIZES[number];
+	    paddingSize?: EuiPaddingSize;
 	    /**
 	     * Adds `flex-grow: 1` to the whole page for stretching to fit vertically.
 	     * Must be wrapped inside a flexbox, preferrably with `min-height: 100vh`
@@ -14684,13 +14923,20 @@ declare module '@elastic/eui/src/components/page/page' {
 	}
 	export const EuiPage: FunctionComponent<EuiPageProps>;
 
+}
+declare module '@elastic/eui/src/components/page/page_body/page_body.styles' {
+	export const euiPageBodyStyles: () => {
+	    euiPageBody: import("@emotion/utils").SerializedStyles;
+	    restrictWidth: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/page/page_body/page_body' {
 	import React, { PropsWithChildren, ComponentType, ComponentProps } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
 	import { EuiPanelProps } from '@elastic/eui/src/components/panel';
-	export const PADDING_SIZES: ("s" | "none" | "m" | "l")[]; type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType<any>;
+	import { EuiPaddingSize } from '@elastic/eui/src/global_styling'; type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType<any>;
 	export type EuiPageBodyProps<T extends ComponentTypes = 'main'> = CommonProps & ComponentProps<T> & _EuiPageRestrictWidth & {
 	    /**
 	     * Sets the HTML element for `EuiPageBody`.
@@ -14707,9 +14953,9 @@ declare module '@elastic/eui/src/components/page/page_body/page_body' {
 	    /**
 	     * Adjusts the padding
 	     */
-	    paddingSize?: typeof PADDING_SIZES[number];
+	    paddingSize?: EuiPaddingSize;
 	};
-	export const EuiPageBody: <T extends ComponentTypes>({ children, restrictWidth, style, className, component: Component, panelled, panelProps, paddingSize, borderRadius, ...rest }: React.PropsWithChildren<EuiPageBodyProps<T>>) => JSX.Element;
+	export const EuiPageBody: <T extends ComponentTypes>({ children, restrictWidth, className, component: Component, panelled, panelProps, paddingSize, borderRadius, ...rest }: React.PropsWithChildren<EuiPageBodyProps<T>>) => JSX.Element;
 	export {};
 
 }
@@ -14734,7 +14980,11 @@ declare module '@elastic/eui/src/components/page/page_content/page_content' {
 	     */
 	    role?: HTMLAttributes['role'] | null;
 	};
-	export const EuiPageContent: FunctionComponent<EuiPageContentProps>;
+	/**
+	 * **DEPRECATED**
+	 * Use EuiPageSection instead
+	 */
+	export const EuiPageContent_Deprecated: FunctionComponent<EuiPageContentProps>;
 
 }
 declare module '@elastic/eui/src/components/page/page_content/page_content_body' {
@@ -14749,7 +14999,11 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_body'
 	     */
 	    paddingSize?: typeof PADDING_SIZES[number];
 	}
-	export const EuiPageContentBody: FunctionComponent<EuiPageContentBodyProps>;
+	/**
+	 * **DEPRECATED**
+	 * Use EuiPageSection instead
+	 */
+	export const EuiPageContentBody_Deprecated: FunctionComponent<EuiPageContentBodyProps>;
 
 }
 declare module '@elastic/eui/src/components/page/page_content/page_content_header' {
@@ -14762,7 +15016,11 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_heade
 	     */
 	    responsive?: boolean;
 	}
-	export const EuiPageContentHeader: FunctionComponent<EuiPageContentHeaderProps>;
+	/**
+	 * **DEPRECATED**
+	 * Use EuiPageHeader instead
+	 */
+	export const EuiPageContentHeader_Deprecated: FunctionComponent<EuiPageContentHeaderProps>;
 
 }
 declare module '@elastic/eui/src/components/page/page_content/page_content_header_section' {
@@ -14770,18 +15028,45 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_heade
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export interface EuiPageContentHeaderSectionProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
 	}
-	export const EuiPageContentHeaderSection: FunctionComponent<EuiPageContentHeaderSectionProps>;
+	/**
+	 * **DEPRECATED**
+	 * Use EuiPageHeader instead
+	 */
+	export const EuiPageContentHeaderSection_Deprecated: FunctionComponent<EuiPageContentHeaderSectionProps>;
 
 }
 declare module '@elastic/eui/src/components/page/page_content' {
 	export type { EuiPageContentProps } from '@elastic/eui/src/components/page/page_content/page_content';
-	export { EuiPageContent } from '@elastic/eui/src/components/page/page_content/page_content';
+	export { EuiPageContent_Deprecated } from '@elastic/eui/src/components/page/page_content/page_content';
 	export type { EuiPageContentBodyProps } from '@elastic/eui/src/components/page/page_content/page_content_body';
-	export { EuiPageContentBody } from '@elastic/eui/src/components/page/page_content/page_content_body';
+	export { EuiPageContentBody_Deprecated } from '@elastic/eui/src/components/page/page_content/page_content_body';
 	export type { EuiPageContentHeaderProps } from '@elastic/eui/src/components/page/page_content/page_content_header';
-	export { EuiPageContentHeader } from '@elastic/eui/src/components/page/page_content/page_content_header';
+	export { EuiPageContentHeader_Deprecated } from '@elastic/eui/src/components/page/page_content/page_content_header';
 	export type { EuiPageContentHeaderSectionProps } from '@elastic/eui/src/components/page/page_content/page_content_header_section';
-	export { EuiPageContentHeaderSection } from '@elastic/eui/src/components/page/page_content/page_content_header_section';
+	export { EuiPageContentHeaderSection_Deprecated } from '@elastic/eui/src/components/page/page_content/page_content_header_section';
+
+}
+declare module '@elastic/eui/src/components/page/page_header/page_header.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageHeaderStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiPageHeader: import("@emotion/utils").SerializedStyles;
+	    border: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/page/page_header/page_header_content.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageHeaderContentStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiPageHeaderContent: import("@emotion/utils").SerializedStyles;
+	    top: import("@emotion/utils").SerializedStyles;
+	    bottom: import("@emotion/utils").SerializedStyles;
+	    center: import("@emotion/utils").SerializedStyles;
+	    stretch: import("@emotion/utils").SerializedStyles;
+	    flex: import("@emotion/utils").SerializedStyles;
+	    responsive: import("@emotion/utils").SerializedStyles;
+	    responsiveReverse: import("@emotion/utils").SerializedStyles;
+	    euiPageHeaderContent__titleIcon: import("@emotion/utils").SerializedStyles;
+	};
 
 }
 declare module '@elastic/eui/src/components/page/page_header/page_header_content' {
@@ -14793,6 +15078,8 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	import { EuiFlexGroupProps } from '@elastic/eui/src/components/flex';
 	import { EuiTitleProps } from '@elastic/eui/src/components/title';
 	import { EuiBreadcrumbsProps } from '@elastic/eui/src/components/breadcrumbs';
+	import { PADDING_SIZES } from '@elastic/eui/src/global_styling';
+	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
 	export const ALIGN_ITEMS: readonly ["top", "bottom", "center", "stretch"]; type Tab = EuiTabProps & {
 	    /**
 	     * Visible text of the tab
@@ -14850,7 +15137,16 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	     */
 	    description?: string | ReactNode;
 	}
-	export interface _EuiPageHeaderContentProps extends EuiPageHeaderContentLeft {
+	export interface _EuiPageHeaderContentProps extends EuiPageHeaderContentLeft, _EuiPageRestrictWidth {
+	    /**
+	     * The only option is on/off
+	     */
+	    bottomBorder?: boolean;
+	    /**
+	     * Adjust the padding.
+	     * When using this setting it's best to be consistent throughout all similar usages
+	     */
+	    paddingSize?: typeof PADDING_SIZES[number];
 	    /**
 	     * Set to false if you don't want the children to stack at small screen sizes.
 	     * Set to `reverse` to display the right side content first for the sake of hierarchy (like global time)
@@ -14858,7 +15154,7 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	    responsive?: boolean | 'reverse';
 	    /**
 	     * Vertical alignment of the left and right side content;
-	     * Default is `middle` for custom content, but `top` for when `pageTitle` or `tabs` are included
+	     * Default is `center` for custom content, but `top` for when `pageTitle` or `tabs` are included
 	     */
 	    alignItems?: typeof ALIGN_ITEMS[number];
 	    /**
@@ -14881,23 +15177,29 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	export const EuiPageHeaderContent: FunctionComponent<EuiPageHeaderContentProps>;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/page/_bottom_border' {
+	export type _EuiPageBottomBorder = {
+	    /**
+	     * Adds a bottom border to separate it from the content after;
+	     * Passing `extended` will ensure the border touches the sides of the parent container.
+	     */
+	    bottomBorder?: boolean | 'extended';
+	};
+
 }
 declare module '@elastic/eui/src/components/page/page_header/page_header' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	import { _EuiPageHeaderContentProps } from '@elastic/eui/src/components/page/page_header/page_header_content';
 	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
-	export const PADDING_SIZES: ("s" | "none" | "m" | "l")[];
-	export interface EuiPageHeaderProps extends CommonProps, HTMLAttributes<HTMLElement>, _EuiPageHeaderContentProps, _EuiPageRestrictWidth {
-	    /**
-	     * Adjust the padding.
-	     * When using this setting it's best to be consistent throughout all similar usages
-	     */
-	    paddingSize?: typeof PADDING_SIZES[number];
+	import { _EuiPageBottomBorder } from '@elastic/eui/src/components/page/_bottom_border';
+	export interface EuiPageHeaderProps extends CommonProps, HTMLAttributes<HTMLElement>, Omit<_EuiPageHeaderContentProps, 'bottomBorder'>, _EuiPageRestrictWidth, _EuiPageBottomBorder {
 	    /**
-	     * Adds a bottom border to separate it from the content after
+	     * Adjust the overall padding.
 	     */
-	    bottomBorder?: boolean;
+	    paddingSize?: EuiPaddingSize;
 	}
 	export const EuiPageHeader: FunctionComponent<EuiPageHeaderProps>;
 
@@ -14918,6 +15220,62 @@ declare module '@elastic/eui/src/components/page/page_header' {
 	export type { EuiPageHeaderSectionProps } from '@elastic/eui/src/components/page/page_header/page_header_section';
 	export { EuiPageHeaderSection } from '@elastic/eui/src/components/page/page_header/page_header_section';
 
+}
+declare module '@elastic/eui/src/components/page/page_section/page_section.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const ALIGNMENTS: readonly ["top", "center", "horizontalCenter"];
+	export const euiPageSectionStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiPageSection: import("@emotion/utils").SerializedStyles;
+	    grow: import("@emotion/utils").SerializedStyles;
+	    border: import("@emotion/utils").SerializedStyles;
+	    top: import("@emotion/utils").SerializedStyles;
+	    center: import("@emotion/utils").SerializedStyles;
+	    horizontalCenter: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiPageSectionContentStyles: () => {
+	    euiPageSection__content: import("@emotion/utils").SerializedStyles;
+	    center: import("@emotion/utils").SerializedStyles;
+	    restrictWidth: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/page/page_section/page_section' {
+	import { FunctionComponent, HTMLAttributes } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
+	import { _EuiPageBottomBorder } from '@elastic/eui/src/components/page/_bottom_border';
+	import { ALIGNMENTS } from '@elastic/eui/src/components/page/page_section/page_section.styles';
+	import { EuiPaddingSize, _EuiBackgroundColor } from '@elastic/eui/src/global_styling';
+	export type EuiPageSectionProps = CommonProps & _EuiPageRestrictWidth & _EuiPageBottomBorder & {
+	    /**
+	     * Background color of the section;
+	     * Usually a lightened form of the brand colors
+	     */
+	    color?: _EuiBackgroundColor;
+	    /**
+	     * Padding for all four sides
+	     */
+	    paddingSize?: EuiPaddingSize;
+	    /**
+	     * Horizontal and/or vertical alignment of the section contents
+	     */
+	    alignment?: typeof ALIGNMENTS[number];
+	    /**
+	     * When true the panel will grow in height to fill container if parent is a flex group
+	     */
+	    grow?: boolean;
+	    /**
+	     * Passed down to the div wrapper of the section contents
+	     */
+	    contentProps?: HTMLAttributes<HTMLDivElement>;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+	export const EuiPageSection: FunctionComponent<EuiPageSectionProps>;
+
+}
+declare module '@elastic/eui/src/components/page/page_section' {
+	export type { EuiPageSectionProps } from '@elastic/eui/src/components/page/page_section/page_section';
+	export { EuiPageSection } from '@elastic/eui/src/components/page/page_section/page_section';
+
 }
 declare module '@elastic/eui/src/components/page/page_side_bar/page_side_bar' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -14925,7 +15283,7 @@ declare module '@elastic/eui/src/components/page/page_side_bar/page_side_bar' {
 	export const PADDING_SIZES: ("s" | "none" | "m" | "l")[];
 	export interface EuiPageSideBarProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
 	    /**
-	     * Adds `position: sticky` and affords for any fixed position headers
+	     * Adds `position: sticky`
 	     */
 	    sticky?: boolean;
 	    /**
@@ -14933,24 +15291,74 @@ declare module '@elastic/eui/src/components/page/page_side_bar/page_side_bar' {
 	     */
 	    paddingSize?: typeof PADDING_SIZES[number];
 	}
-	export const EuiPageSideBar: FunctionComponent<EuiPageSideBarProps>;
+	/**
+	 * **DEPRECATED**
+	 * Use the new EuiPageSidebar instead
+	 */
+	export const EuiPageSideBar_Deprecated: FunctionComponent<EuiPageSideBarProps>;
 
 }
 declare module '@elastic/eui/src/components/page/page_side_bar' {
 	export type { EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar/page_side_bar';
-	export { EuiPageSideBar } from '@elastic/eui/src/components/page/page_side_bar/page_side_bar';
+	export { EuiPageSideBar_Deprecated } from '@elastic/eui/src/components/page/page_side_bar/page_side_bar';
+
+}
+declare module '@elastic/eui/src/components/page/page_sidebar/page_sidebar.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageSidebarStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiPageSidebar: import("@emotion/utils").SerializedStyles;
+	    sticky: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/page/page_sidebar/page_sidebar' {
+	import { CSSProperties, FunctionComponent, HTMLAttributes } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiPaddingSize, _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling';
+	export interface EuiPageSidebarProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
+	    /**
+	     * Adjust the padding.
+	     * When using this setting it's best to be consistent throughout all similar usages.
+	     */
+	    paddingSize?: EuiPaddingSize;
+	    /**
+	     * Adds `position: sticky` and affords for any fixed position headers.
+	     */
+	    sticky?: boolean | {
+	        /**
+	         * To account for any fixed elements like headers,
+	         * pass in the value of the total height of those fixed elements.
+	         */
+	        offset?: number;
+	    };
+	    /**
+	     * A minimum width is necessary to maintain size.
+	     * Be sure to take `paddingSize` into account.
+	     */
+	    minWidth?: CSSProperties['width'];
+	    /**
+	     * Sets the `minWidth` to 100% when within these breakpoints.
+	     */
+	    responsive?: _EuiThemeBreakpoint[];
+	}
+	export const EuiPageSidebar: FunctionComponent<EuiPageSidebarProps>;
+
+}
+declare module '@elastic/eui/src/components/page/page_sidebar' {
+	export type { EuiPageSidebarProps } from '@elastic/eui/src/components/page/page_sidebar/page_sidebar';
+	export { EuiPageSidebar } from '@elastic/eui/src/components/page/page_sidebar/page_sidebar';
 
 }
 declare module '@elastic/eui/src/components/page/page_template' {
 	import { CSSProperties, FunctionComponent, ReactNode } from 'react';
-	import { EuiPageProps, SIZES } from '@elastic/eui/src/components/page/page';
+	import { EuiPageProps } from '@elastic/eui/src/components/page/page';
 	import { EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar';
 	import { EuiPageBodyProps } from '@elastic/eui/src/components/page/page_body';
 	import { EuiPageHeaderProps } from '@elastic/eui/src/components/page/page_header';
 	import { EuiPageContentProps, EuiPageContentBodyProps } from '@elastic/eui/src/components/page/page_content';
 	import { EuiBottomBarProps } from '@elastic/eui/src/components/bottom_bar';
 	export const TEMPLATES: readonly ["default", "centeredBody", "centeredContent", "empty"];
-	export type EuiPageTemplateProps = Omit<EuiPageProps, 'paddingSize'> & {
+	export type EuiPageTemplateProps_Deprecated = Omit<EuiPageProps, 'paddingSize'> & {
 	    /**
 	     * Choose between 3 types of templates.
 	     * `default`: Typical layout with nothing centered
@@ -14963,7 +15371,7 @@ declare module '@elastic/eui/src/components/page/page_template' {
 	     * Padding size will not get applied to the over-arching #EuiPage,
 	     * but will propogate through all the components to keep them in sync
 	     */
-	    paddingSize?: typeof SIZES[number];
+	    paddingSize?: 'none' | 's' | 'm' | 'l';
 	    /**
 	     * Optionally include #EuiPageSideBar content.
 	     * The inclusion of this will affect the whole layout
@@ -15010,7 +15418,12 @@ declare module '@elastic/eui/src/components/page/page_template' {
 	     */
 	    minHeight?: CSSProperties['minHeight'];
 	};
-	export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps>;
+	/**
+	 * This component has been deprecated in favor of the new
+	 * namespaced version. You can still import this component
+	 * for a period of time by importing `as EuiPageTemplate`.
+	 */
+	export const EuiPageTemplate_Deprecated: FunctionComponent<EuiPageTemplateProps_Deprecated>;
 
 }
 declare module '@elastic/eui/src/components/page' {
@@ -15019,13 +15432,183 @@ declare module '@elastic/eui/src/components/page' {
 	export type { EuiPageBodyProps } from '@elastic/eui/src/components/page/page_body';
 	export { EuiPageBody } from '@elastic/eui/src/components/page/page_body';
 	export type { EuiPageContentProps, EuiPageContentBodyProps, EuiPageContentHeaderProps, EuiPageContentHeaderSectionProps, } from '@elastic/eui/src/components/page/page_content';
-	export { EuiPageContent, EuiPageContentBody, EuiPageContentHeader, EuiPageContentHeaderSection, } from '@elastic/eui/src/components/page/page_content';
+	export { EuiPageContent_Deprecated, EuiPageContentBody_Deprecated, EuiPageContentHeader_Deprecated, EuiPageContentHeaderSection_Deprecated, } from '@elastic/eui/src/components/page/page_content';
 	export type { EuiPageHeaderContentProps, EuiPageHeaderProps, EuiPageHeaderSectionProps, } from '@elastic/eui/src/components/page/page_header';
 	export { EuiPageHeader, EuiPageHeaderContent, EuiPageHeaderSection, } from '@elastic/eui/src/components/page/page_header';
+	export type { EuiPageSectionProps } from '@elastic/eui/src/components/page/page_section';
+	export { EuiPageSection } from '@elastic/eui/src/components/page/page_section';
 	export type { EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar';
-	export { EuiPageSideBar } from '@elastic/eui/src/components/page/page_side_bar';
-	export type { EuiPageTemplateProps } from '@elastic/eui/src/components/page/page_template';
-	export { EuiPageTemplate } from '@elastic/eui/src/components/page/page_template';
+	export { EuiPageSideBar_Deprecated } from '@elastic/eui/src/components/page/page_side_bar';
+	export type { EuiPageSidebarProps } from '@elastic/eui/src/components/page/page_sidebar';
+	export { EuiPageSidebar } from '@elastic/eui/src/components/page/page_sidebar';
+	export type { EuiPageTemplateProps_Deprecated } from '@elastic/eui/src/components/page/page_template';
+	export { EuiPageTemplate_Deprecated } from '@elastic/eui/src/components/page/page_template';
+
+}
+declare module '@elastic/eui/src/components/page_template/outer/page_outer.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageOuterStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiPageOuter: import("@emotion/utils").SerializedStyles;
+	    grow: import("@emotion/utils").SerializedStyles;
+	    column: import("@emotion/utils").SerializedStyles;
+	    row: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/page_template/outer/page_outer' {
+	import { FunctionComponent, HTMLAttributes } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling';
+	export interface _EuiPageOuterProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
+	    /**
+	     * Adds `flex-grow: 1` to the whole page for stretching to fit vertically.
+	     * Must be wrapped inside a flexbox, preferrably with `min-height: 100vh`
+	     */
+	    grow?: boolean;
+	    /**
+	     * Changes the `flex-direction` property.
+	     * Flip to `column` when not including a sidebar.
+	     */
+	    direction?: 'row' | 'column';
+	    /**
+	     * When direction is `row`, it will flip to `column` when within these breakpoints
+	     */
+	    responsive?: _EuiThemeBreakpoint[];
+	}
+	export const _EuiPageOuter: FunctionComponent<_EuiPageOuterProps>;
+
+}
+declare module '@elastic/eui/src/components/page_template/outer' {
+	export type { _EuiPageOuterProps } from '@elastic/eui/src/components/page_template/outer/page_outer';
+	export { _EuiPageOuter } from '@elastic/eui/src/components/page_template/outer/page_outer';
+
+}
+declare module '@elastic/eui/src/components/page_template/inner/page_inner.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageInnerStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiPageInner: import("@emotion/utils").SerializedStyles;
+	    panelled: import("@emotion/utils").SerializedStyles;
+	    border: {
+	        top: import("@emotion/utils").SerializedStyles;
+	        left: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
+}
+declare module '@elastic/eui/src/components/page_template/inner/page_inner' {
+	import React, { PropsWithChildren, ComponentType, ComponentProps } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiPaddingSize, _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling'; type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType;
+	export type _EuiPageInnerProps<T extends ComponentTypes = 'main'> = CommonProps & ComponentProps<T> & {
+	    /**
+	     * Sets which HTML element to render.
+	     */
+	    component?: T;
+	    /**
+	     * Adds a white background and shadow to define the area.
+	     */
+	    panelled?: boolean;
+	    /**
+	     * Adds a single side border, based on the `responsive` state.
+	     * Typically added when a side bar exists.
+	     */
+	    border?: boolean;
+	    /**
+	     * Adjust the overall padding.
+	     */
+	    paddingSize?: EuiPaddingSize;
+	    /**
+	     * Decides at which point the component will be 100vw.
+	     */
+	    responsive?: _EuiThemeBreakpoint[];
+	};
+	export const _EuiPageInner: <T extends ComponentTypes>({ children, component: Component, panelled, border, paddingSize, responsive, ...rest }: React.PropsWithChildren<_EuiPageInnerProps<T>>) => JSX.Element;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/page_template/inner' {
+	export type { _EuiPageInnerProps } from '@elastic/eui/src/components/page_template/inner/page_inner';
+	export { _EuiPageInner } from '@elastic/eui/src/components/page_template/inner/page_inner';
+
+}
+declare module '@elastic/eui/src/components/page_template/bottom_bar/page_bottom_bar' {
+	import { FunctionComponent } from 'react';
+	import { EuiBottomBarProps } from '@elastic/eui/src/components/bottom_bar';
+	import { EuiPageSectionProps } from '@elastic/eui/src/components/page/page_section';
+	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
+	export interface _EuiPageBottomBarProps extends Pick<EuiPageSectionProps, 'paddingSize'>, _EuiPageRestrictWidth, Omit<EuiBottomBarProps, 'paddingSize'> {
+	    /**
+	     * The reference id of the element to insert into
+	     */
+	    parent?: string;
+	}
+	export const _EuiPageBottomBar: FunctionComponent<_EuiPageBottomBarProps>;
+
+}
+declare module '@elastic/eui/src/components/page_template/empty_prompt/page_empty_prompt' {
+	import { FunctionComponent } from 'react';
+	import { EuiEmptyPromptProps } from '@elastic/eui/src/components/empty_prompt';
+	import { EuiPageSectionProps } from '@elastic/eui/src/components/page/page_section';
+	export type _EuiPageEmptyPromptProps = Omit<EuiPageSectionProps, 'title' | 'bottomBorder'> & Omit<EuiEmptyPromptProps, 'paddingSize'> & {
+	    panelled?: boolean;
+	};
+	export const _EuiPageEmptyPrompt: FunctionComponent<_EuiPageEmptyPromptProps>;
+
+}
+declare module '@elastic/eui/src/components/page_template/page_template' {
+	import React, { CSSProperties, FunctionComponent, HTMLAttributes } from 'react';
+	import { _EuiPageOuterProps } from '@elastic/eui/src/components/page_template/outer';
+	import { _EuiPageInnerProps } from '@elastic/eui/src/components/page_template/inner';
+	import { _EuiPageBottomBarProps } from '@elastic/eui/src/components/page_template/bottom_bar/page_bottom_bar';
+	import { _EuiPageEmptyPromptProps } from '@elastic/eui/src/components/page_template/empty_prompt/page_empty_prompt';
+	import { EuiPageHeaderProps, EuiPageSectionProps } from '@elastic/eui/src/components/page';
+	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
+	import { _EuiPageBottomBorder } from '@elastic/eui/src/components/page/_bottom_border';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export const TemplateContext: React.Context<{
+	    section: {};
+	    header: {};
+	    emptyPrompt: {};
+	    bottomBar: {};
+	}>;
+	export type EuiPageTemplateProps = _EuiPageOuterProps & Omit<_EuiPageInnerProps, 'border'> & _EuiPageRestrictWidth & _EuiPageBottomBorder & {
+	    /**
+	     * Applies a top or left border to the inner contents
+	     * to add separation between content and sidebar when a sidebar exists.
+	     */
+	    contentBorder?: _EuiPageInnerProps['border'];
+	    /**
+	     * Minimum height in which to enforce scrolling
+	     */
+	    minHeight?: CSSProperties['minHeight'];
+	    /**
+	     * To account for any fixed elements like headers,
+	     * pass in the value of the total height of those fixed elements.
+	     * Otherwise they will be calculated based on the data attributes on the body element.
+	     */
+	    offset?: number;
+	    /**
+	     * Passes through some common HTML attributes to the `main` content wrapper
+	     */
+	    mainProps?: CommonProps & HTMLAttributes<HTMLElement>;
+	};
+	/**
+	 * Consumed via `EuiPageTemplate`,
+	 * it controls and propogates most of the shared props per direct child
+	 */
+	export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps>;
+	export const EuiPageTemplate: React.FunctionComponent<EuiPageTemplateProps> & {
+	    Sidebar: React.FunctionComponent<import ("@elastic/eui/src/components/page").EuiPageSidebarProps>;
+	    Header: React.FunctionComponent<EuiPageHeaderProps>;
+	    Section: React.FunctionComponent<EuiPageSectionProps>;
+	    BottomBar: React.FunctionComponent<_EuiPageBottomBarProps>;
+	    EmptyPrompt: React.FunctionComponent<_EuiPageEmptyPromptProps>;
+	};
+
+}
+declare module '@elastic/eui/src/components/page_template' {
+	export type { EuiPageTemplateProps } from '@elastic/eui/src/components/page_template/page_template';
+	export { EuiPageTemplate } from '@elastic/eui/src/components/page_template/page_template';
 
 }
 declare module '@elastic/eui/src/global_styling/utility/utility' {
@@ -16102,7 +16685,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;
 	}, {
 	    /**
@@ -16331,7 +16915,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';
@@ -18286,12 +18870,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;
@@ -18319,6 +18924,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';
@@ -18334,9 +18956,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;
@@ -18346,47 +18967,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 {};
 
 }
@@ -18807,6 +19396,7 @@ declare module '@elastic/eui/src/components' {
 	export * from '@elastic/eui/src/components/outside_click_detector';
 	export * from '@elastic/eui/src/components/overlay_mask';
 	export * from '@elastic/eui/src/components/page';
+	export * from '@elastic/eui/src/components/page_template';
 	export * from '@elastic/eui/src/components/pagination';
 	export * from '@elastic/eui/src/components/panel';
 	export * from '@elastic/eui/src/components/popover';
@@ -23440,13 +24030,19 @@ declare module 'mdast-util-to-hast/lib/all' {
   export = all;
 }
 declare module '@elastic/eui/src/test/rtl/component_helpers' {
+	import '@testing-library/jest-dom';
 	/**
-	 * Ensure the EuiPopover being tested is open/closed before contiuning
+	 * Ensure the EuiPopover being tested is open/closed before continuing
 	 * 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>;
+	/**
+	 * Ensure the EuiToolTip being tested is open and visible before continuing
+	 */
+	export const waitForEuiToolTipVisible: () => Promise<void>;
+	export const waitForEuiToolTipHidden: () => Promise<void>;
 
 }
 declare module '@elastic/eui/src/test/rtl/data_test_subj_queries' {
@@ -23585,7 +24181,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;