@elastic/eui 100.0.0 → 101.0.0

package/eui.d.ts

@@ -86,7 +86,7 @@ declare module '@elastic/eui/src/global_styling/variables/breakpoint' {
 
 }
 declare module '@elastic/eui/src/components/common' {
-	import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentProps, Component, FunctionComponent, JSXElementConstructor, MouseEventHandler } from 'react';
+	import { AnchorHTMLAttributes, ButtonHTMLAttributes, ComponentProps, Component, FunctionComponent, JSXElementConstructor, MouseEventHandler, JSX } from 'react';
 	import { Interpolation, Theme } from '@emotion/react';
 	export type { RecursivePartial, ValueOf } from '@elastic/eui-theme-common';
 	export interface CommonProps {
@@ -169,7 +169,7 @@ declare module '@elastic/eui/src/components/common' {
 
 }
 declare module '@elastic/eui/src/services/theme/types' {
-	export { COLOR_MODES_STANDARD, COLOR_MODES_INVERSE, type EuiThemeColorModeInverse, type EuiThemeColorModeStandard, type EuiThemeColorMode, type ColorModeSwitch, type StrictColorModeSwitch, type EuiThemeShape, type EuiThemeSystem, type EuiThemeModifications, type ComputedThemeShape, type EuiThemeComputed, type EuiThemeNested, } from '@elastic/eui-theme-common';
+	export { COLOR_MODES_STANDARD, COLOR_MODES_INVERSE, type EuiThemeColorModeInverse, type EuiThemeColorModeStandard, type EuiThemeColorMode, type ColorModeSwitch, type StrictColorModeSwitch, type EuiThemeShape, type EuiThemeSystem, type EuiThemeModifications, type ComputedThemeShape, type EuiThemeComputed, type EuiThemeNested, type EuiThemeHighContrastMode, type EuiThemeHighContrastModeProp, } from '@elastic/eui-theme-common';
 
 }
 declare module '@elastic/eui/src/services/theme/utils' {
@@ -177,10 +177,21 @@ declare module '@elastic/eui/src/services/theme/utils' {
 
 }
 declare module '@elastic/eui/src/services/theme/context' {
-	import { EuiThemeColorModeStandard, EuiThemeSystem, EuiThemeComputed, EuiThemeNested } from '@elastic/eui/src/services/theme/types';
+	import { EuiThemeColorModeStandard, EuiThemeHighContrastMode, EuiThemeSystem, EuiThemeComputed, EuiThemeNested } from '@elastic/eui/src/services/theme/types';
+	export const DEFAULTS: {
+	    system: {
+	        model: import("@elastic/eui-theme-common/lib/cjs/services/theme/types").EuiThemeShape;
+	        root: import("@elastic/eui-theme-common/lib/cjs/services/theme/types").EuiThemeShape;
+	        key: string;
+	    };
+	    modifications: {};
+	    colorMode: "LIGHT";
+	    highContrastMode: false;
+	};
 	export const EuiSystemContext: import("react").Context<EuiThemeSystem<{}>>;
 	export const EuiModificationsContext: import("react").Context<import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common/lib/cjs/services/theme/types").EuiThemeShape>>;
 	export const EuiColorModeContext: import("react").Context<EuiThemeColorModeStandard>;
+	export const EuiHighContrastModeContext: import("react").Context<EuiThemeHighContrastMode>;
 	export const defaultComputedTheme: EuiThemeComputed<import("@elastic/eui-theme-common/lib/cjs/services/theme/types").EuiThemeShape>;
 	export const EuiThemeContext: import("react").Context<EuiThemeComputed<{}>>;
 	export const EuiNestedThemeContext: import("react").Context<EuiThemeNested>;
@@ -196,13 +207,14 @@ declare module '@elastic/eui/src/services/theme/warning' {
 }
 declare module '@elastic/eui/src/services/theme/hooks' {
 	import React from 'react';
-	import type { EuiThemeColorModeStandard, EuiThemeModifications, EuiThemeComputed } from '@elastic/eui-theme-common';
+	import type { EuiThemeColorModeStandard, EuiThemeHighContrastMode, EuiThemeModifications, EuiThemeComputed } from '@elastic/eui-theme-common';
 	/**
 	 * Hook for function components
 	 */
 	export interface UseEuiTheme<T extends {} = {}> {
 	    euiTheme: EuiThemeComputed<T>;
 	    colorMode: EuiThemeColorModeStandard;
+	    highContrastMode: EuiThemeHighContrastMode;
 	    modifications: EuiThemeModifications<T>;
 	}
 	export const useEuiTheme: <T extends {} = {}>() => UseEuiTheme<T>;
@@ -411,6 +423,71 @@ declare module '@elastic/eui/src/services/theme/style_memoization' {
 	}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
 	export {};
 
+}
+declare module '@elastic/eui/src/services/theme/high_contrast_overrides' {
+	import type { EuiThemeHighContrastMode, EuiThemeColorModeStandard, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types';
+	export const useHighContrastModifications: ({ highContrastMode, colorMode, system, modifications, }: {
+	    highContrastMode: EuiThemeHighContrastMode;
+	    colorMode: EuiThemeColorModeStandard;
+	    system: EuiThemeSystem;
+	    modifications: EuiThemeModifications;
+	}) => import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common").EuiThemeShape> | {
+	    colors: {
+	        LIGHT: {
+	            borderBasePrimary: string;
+	            borderBaseAccent: string;
+	            borderBaseAccentSecondary: string;
+	            borderBaseSuccess: string;
+	            borderBaseWarning: string;
+	            borderBaseDanger: string;
+	            borderBasePlain: string;
+	            borderBaseSubdued: string;
+	            borderBaseDisabled: string;
+	            borderBaseFloating: string;
+	            borderBaseFormsControl: string;
+	            borderStrongPrimary: string;
+	            borderStrongAccent: string;
+	            borderStrongAccentSecondary: string;
+	            borderStrongSuccess: string;
+	            borderStrongWarning: string;
+	            borderStrongDanger: string;
+	        };
+	        DARK: {
+	            borderBasePrimary: string;
+	            borderBaseAccent: string;
+	            borderBaseAccentSecondary: string;
+	            borderBaseSuccess: string;
+	            borderBaseWarning: string;
+	            borderBaseDanger: string;
+	            borderBasePlain: string;
+	            borderBaseSubdued: string;
+	            borderBaseDisabled: string;
+	            borderBaseFloating: string;
+	            borderBaseFormsControl: string;
+	            borderStrongPrimary: string;
+	            borderStrongAccent: string;
+	            borderStrongAccentSecondary: string;
+	            borderStrongSuccess: string;
+	            borderStrongWarning: string;
+	            borderStrongDanger: string;
+	        };
+	    };
+	    border: {
+	        color: string;
+	        thin: string;
+	        thick: string;
+	    };
+	    base?: number | undefined;
+	    size?: import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common")._EuiThemeSizes> | undefined;
+	    font?: import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common")._EuiThemeFont> | undefined;
+	    focus?: import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common")._EuiThemeFocus> | undefined;
+	    animation?: import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common")._EuiThemeAnimation> | undefined;
+	    breakpoint?: import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common")._EuiThemeBreakpoints> | undefined;
+	    levels?: import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common")._EuiThemeLevels> | undefined;
+	    components?: import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common")._EuiThemeComponents> | undefined;
+	    flags?: import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common")._EuiThemeFlags> | undefined;
+	};
+
 }
 declare module '@elastic/eui/src/services/color/is_color_dark' {
 	/**
@@ -683,6 +760,35 @@ declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	 */
 	export const useEuiBorderColorCSS: () => Record<"primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "transparent" | "plain" | "subdued" | "highlighted", SerializedStyles>;
 
+}
+declare module '@elastic/eui/src/global_styling/functions/high_contrast' {
+	import type { UseEuiTheme } from '@elastic/eui/src/services';
+	/**
+	 * Minor syntactical sugar for conditional high contrast styles.
+	 * Ternaries are otherwise somewhat ugly in css`` template literals,
+	 * and this makes life just a little more beautiful ✨
+	 */
+	export const highContrastModeStyles: (euiThemeContext: UseEuiTheme, options: {
+	    /** Default styles to render (no high contrast mode) */
+	    none?: string;
+	    /** Styles to render when high contrast mode is preferred or forced */
+	    preferred?: string;
+	    /** Styles to render when high contrast mode is being forced */
+	    forced?: string;
+	}) => string;
+	/**
+	 * Small uitility that allows component styles to ignore/override
+	 * forced colors modes (primarily Windows high contrast themes)
+	 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/forced-color-adjust
+	 *
+	 * WARNING: Do *not* use this utility unless:
+	 * 1. Colors/backgrounds are **essential** to the semantic meaning of the UI,
+	 *    and users will lose all meaning without them
+	 * 2. Tweaks have been made to existing styles to increase color contrast
+	 *    as necessary
+	 */
+	export const preventForcedColors: ({ highContrastMode }: UseEuiTheme) => "" | "forced-color-adjust: none;";
+
 }
 declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	import { CSSProperties } from 'react';
@@ -924,6 +1030,7 @@ declare module '@elastic/eui/src/global_styling/functions/typography' {
 
 }
 declare module '@elastic/eui/src/global_styling/functions' {
+	export * from '@elastic/eui/src/global_styling/functions/high_contrast';
 	export * from '@elastic/eui/src/global_styling/functions/logicals';
 	export * from '@elastic/eui/src/global_styling/functions/logical_shorthands';
 	export * from '@elastic/eui/src/global_styling/functions/math';
@@ -1145,6 +1252,11 @@ declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	 * @returns Style object `{ backgroundColor, color }`
 	 */
 	export const euiButtonColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
+	    border: string;
+	    color: string;
+	    backgroundColor: string;
+	} | {
+	    border?: undefined;
 	    color: string;
 	    backgroundColor: string;
 	};
@@ -1155,6 +1267,11 @@ declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	 * @returns Style object `{ backgroundColor, color }`
 	 */
 	export const euiButtonFillColor: (euiThemeContext: UseEuiTheme, color: _EuiButtonColor | 'disabled') => {
+	    border: string;
+	    color: string;
+	    backgroundColor: string;
+	} | {
+	    border?: undefined;
 	    color: string;
 	    backgroundColor: string;
 	};
@@ -1203,14 +1320,14 @@ declare module '@elastic/eui/src/global_styling/mixins/_button' {
 
 }
 declare module '@elastic/eui/src/global_styling/mixins/_shadow' {
-	import { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge, type _EuiThemeShadowSize, type _EuiThemeShadowCustomColor } from '@elastic/eui-theme-common';
+	import { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge, type _EuiThemeShadowSize, type EuiShadowOptions } from '@elastic/eui-theme-common';
 	export { euiShadowFlat, euiShadow, euiSlightShadowHover, euiShadowXSmall, euiShadowSmall, euiShadowMedium, euiShadowLarge, euiShadowXLarge, };
 	export interface EuiShadowCustomColor {
 	    color?: string;
 	}
-	export const useEuiSlightShadowHover: (color?: _EuiThemeShadowCustomColor['color']) => string;
-	export const useEuiShadowFlat: (color?: _EuiThemeShadowCustomColor['color']) => string;
-	export const useEuiShadow: (size?: _EuiThemeShadowSize, color?: _EuiThemeShadowCustomColor['color']) => string;
+	export const useEuiSlightShadowHover: (options?: EuiShadowOptions | undefined) => string;
+	export const useEuiShadowFlat: (options?: EuiShadowOptions | undefined) => string;
+	export const useEuiShadow: (size?: _EuiThemeShadowSize, options?: EuiShadowOptions | undefined) => string;
 
 }
 declare module '@elastic/eui/src/global_styling/mixins' {
@@ -1423,6 +1540,41 @@ declare module '@elastic/eui/src/components/title/title.styles' {
 	};
 	export {};
 
+}
+declare module '@elastic/eui/src/components/code/code_syntax.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiCodeTextColors: ({ euiTheme }: UseEuiTheme) => {
+	    backgroundColor: string;
+	    color: string;
+	};
+	export const euiCodeSyntaxVariables: (euiThemeContext: UseEuiTheme) => {
+	    backgroundColor: string;
+	    color: string;
+	    inlineCodeColor: string;
+	    selectedBackgroundColor: string;
+	    commentColor: string;
+	    selectorTagColor: string;
+	    stringColor: string;
+	    tagColor: string;
+	    nameColor: string;
+	    numberColor: string;
+	    keywordColor: string;
+	    inlineCodeKeywordColor: string;
+	    functionTitleColor: string;
+	    typeColor: string;
+	    attributeColor: string;
+	    symbolColor: string;
+	    paramsColor: string;
+	    metaColor: string;
+	    titleColor: string;
+	    sectionColor: string;
+	    additionColor: string;
+	    deletionColor: string;
+	    selectorClassColor: string;
+	    selectorIdColor: string;
+	    readonly tokensCss: string;
+	};
+
 }
 declare module '@elastic/eui/src/components/text/text.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -1475,11 +1627,11 @@ declare module '@elastic/eui/src/components/text' {
 
 }
 declare module '@elastic/eui/src/components/context/context' {
-	import React, { Context, FunctionComponent, ReactChild, ReactNode } from 'react';
+	import React, { Context, FunctionComponent, ReactNode } from 'react';
 	export interface RenderableValues {
-	    [key: string]: ReactChild | undefined;
+	    [key: string]: ReactNode | undefined;
 	}
-	export type Renderable<T> = ReactChild | ((values: T) => ReactChild);
+	export type Renderable<T> = ReactNode | ((values: T) => ReactNode);
 	export interface I18nShape {
 	    mapping?: {
 	        [key: string]: Renderable<object>;
@@ -1537,7 +1689,7 @@ declare module '@elastic/eui/src/services/predicate' {
 
 }
 declare module '@elastic/eui/src/components/i18n/i18n_util' {
-	import { ReactChild } from 'react';
+	import { ReactNode } from 'react';
 	import { RenderableValues } from '@elastic/eui/src/components/context/context';
 	/**
 	 * Replaces placeholder values in `input` with their matching value in `values`
@@ -1545,13 +1697,13 @@ declare module '@elastic/eui/src/components/i18n/i18n_util' {
 	 * @param {string} input
 	 * @param {RenderableValues} values
 	 * @param {Function} i18nMappingFunc
-	 * @returns {string | React.ReactChild[]}
+	 * @returns {string | ReactNode[]}
 	 */
-	export function processStringToChildren(input: string, values: RenderableValues, i18nMappingFunc?: (token: string) => string): string | ReactChild[];
+	export function processStringToChildren(input: string, values: RenderableValues, i18nMappingFunc?: (token: string) => string): string | ReactNode[];
 
 }
 declare module '@elastic/eui/src/components/i18n/i18n' {
-	import React, { ReactChild, ReactElement } from 'react';
+	import React, { ReactElement, ReactNode } from 'react';
 	import { ExclusiveUnion } from '@elastic/eui/src/components/common';
 	import { Renderable } from '@elastic/eui/src/components/context/context'; type ResolvedType<T> = T extends (...args: any[]) => any ? ReturnType<T> : T;
 	interface I18nTokenShape<T, DEFAULT extends Renderable<T>> {
@@ -1560,7 +1712,7 @@ declare module '@elastic/eui/src/components/i18n/i18n' {
 	    /**
 	     * Render function that returns a ReactElement
 	     */
-	    children?: (x: ResolvedType<DEFAULT>) => ReactChild;
+	    children?: (x: ResolvedType<DEFAULT>) => ReactNode;
 	    values?: T;
 	}
 	export interface I18nTokensShape<T extends any[]> {
@@ -1569,26 +1721,26 @@ declare module '@elastic/eui/src/components/i18n/i18n' {
 	    /**
 	     * Render function that returns a ReactElement
 	     */
-	    children: (x: Array<T[number]>) => ReactChild;
-	    values?: Record<string, ReactChild>;
+	    children: (x: Array<T[number]>) => ReactNode;
+	    values?: Record<string, ReactNode>;
 	}
-	export type EuiI18nProps<T, DEFAULT extends Renderable<T>, DEFAULTS extends any[]> = ExclusiveUnion<I18nTokenShape<T, DEFAULT>, I18nTokensShape<DEFAULTS>>; const EuiI18n: <T extends {}, DEFAULT extends Renderable<T>, DEFAULTS extends any[]>(props: (import ("@elastic/eui/src/components/common").DisambiguateSet<I18nTokenShape<T, DEFAULT>, I18nTokensShape<DEFAULTS>> & I18nTokensShape<DEFAULTS>) | (import ("@elastic/eui/src/components/common").DisambiguateSet<I18nTokensShape<DEFAULTS>, I18nTokenShape<T, DEFAULT>> & I18nTokenShape<T, DEFAULT>)) => React.JSX.Element; type DefaultRenderType<T, K extends Renderable<T>> = K extends ReactChild ? K : K extends () => infer RetValue ? RetValue : never; type DefaultsRenderType<K extends Array<string | ReactElement>> = K extends Array<infer Item> ? Item : never; function useEuiI18n<T extends {}, DEFAULT extends Renderable<T>>(token: string, defaultValue: DEFAULT, values?: T): DefaultRenderType<T, DEFAULT>; function useEuiI18n<DEFAULTS extends Array<string | ReactElement>>(tokens: string[], defaultValues: DEFAULTS): Array<DefaultsRenderType<DEFAULTS>>;
+	export type EuiI18nProps<T, DEFAULT extends Renderable<T>, DEFAULTS extends any[]> = ExclusiveUnion<I18nTokenShape<T, DEFAULT>, I18nTokensShape<DEFAULTS>>; const EuiI18n: <T extends {}, DEFAULT extends Renderable<T>, DEFAULTS extends any[]>(props: (import ("@elastic/eui/src/components/common").DisambiguateSet<I18nTokenShape<T, DEFAULT>, I18nTokensShape<DEFAULTS>> & I18nTokensShape<DEFAULTS>) | (import ("@elastic/eui/src/components/common").DisambiguateSet<I18nTokensShape<DEFAULTS>, I18nTokenShape<T, DEFAULT>> & I18nTokenShape<T, DEFAULT>)) => React.JSX.Element; type DefaultRenderType<T, K extends Renderable<T>> = K extends ReactNode ? K : K extends () => infer RetValue ? RetValue : never; type DefaultsRenderType<K extends Array<string | ReactElement>> = K extends Array<infer Item> ? Item : never; function useEuiI18n<T extends {}, DEFAULT extends Renderable<T>>(token: string, defaultValue: DEFAULT, values?: T): DefaultRenderType<T, DEFAULT>; function useEuiI18n<DEFAULTS extends Array<string | ReactElement>>(tokens: string[], defaultValues: DEFAULTS): Array<DefaultsRenderType<DEFAULTS>>;
 	export { EuiI18n, useEuiI18n };
 
 }
 declare module '@elastic/eui/src/components/i18n/i18n_number' {
-	import { FunctionComponent, ReactChild, ReactElement } from 'react';
+	import { FunctionComponent, ReactElement, ReactNode } from 'react';
 	import { ExclusiveUnion } from '@elastic/eui/src/components/common';
 	interface EuiI18nNumberValueShape {
 	    value: number;
-	    children?: (x: ReactChild) => ReactElement<any>;
+	    children?: (x: ReactNode) => ReactElement<any>;
 	}
 	interface EuiI18nNumberValuesShape {
 	    values: number[];
 	    /**
 	     * ReactNode to render as this component's content
 	     */
-	    children: (x: ReactChild[]) => ReactElement<any>;
+	    children: (x: ReactNode[]) => ReactElement<any>;
 	}
 	export type EuiI18nNumberProps = ExclusiveUnion<EuiI18nNumberValueShape, EuiI18nNumberValuesShape>; const EuiI18nNumber: FunctionComponent<EuiI18nNumberProps>;
 	export { EuiI18nNumber };
@@ -1895,7 +2047,8 @@ declare module '@elastic/eui/src/components/text_truncate/utils' {
 
 }
 declare module '@elastic/eui/src/components/text_truncate/text_truncate.styles' {
-	export const euiTextTruncateStyles: {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiTextTruncateStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiTextTruncate: import("@emotion/react").SerializedStyles;
 	    /**
 	     * The below CSS is a hack to get double clicking and selecting the *full* text
@@ -3060,7 +3213,7 @@ declare module '@elastic/eui/src/services/popover/popover_arrow.styles' {
 	/**
 	 * Arrow clipping/transform/positioning CSS shared between EuiPopover and EuiToolTip
 	 */
-	export const _popoverArrowStyles: ({ euiTheme }: UseEuiTheme, arrowSize: string) => {
+	export const _popoverArrowStyles: ({ euiTheme, colorMode, highContrastMode }: UseEuiTheme, arrowSize: string) => {
 	    _arrowStyles: string;
 	    positions: {
 	        top: import("@emotion/react").SerializedStyles;
@@ -3077,6 +3230,25 @@ declare module '@elastic/eui/src/services/popover' {
 	export { _popoverArrowStyles } from '@elastic/eui/src/services/popover/popover_arrow.styles';
 	export type { EuiPopoverPosition } from '@elastic/eui/src/services/popover/types';
 
+}
+declare module '@elastic/eui/src/components/panel/panel.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPanelBorderStyles: (euiThemeContext: UseEuiTheme, options?: {
+	    borderColor?: string | undefined;
+	    hasFloatingBorder?: boolean | undefined;
+	} | undefined) => string;
+	export const euiPanelStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiPanel: import("@emotion/react").SerializedStyles;
+	    grow: import("@emotion/react").SerializedStyles;
+	    hasShadow: import("@emotion/react").SerializedStyles;
+	    hasBorder: import("@emotion/react").SerializedStyles;
+	    radius: {
+	        none: import("@emotion/react").SerializedStyles;
+	        m: import("@emotion/react").SerializedStyles;
+	    };
+	    isClickable: import("@emotion/react").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/tool_tip/tool_tip.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -3344,10 +3516,8 @@ declare module '@elastic/eui/src/components/loading/loading_chart.styles' {
 	    xl: import("@emotion/react").SerializedStyles;
 	};
 	export const BARS_COUNT = 4;
-	export const euiLoadingChartBarStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiLoadingChartBarStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiLoadingChart__bar: import("@emotion/react").SerializedStyles;
-	    nonmono: import("@emotion/react").SerializedStyles;
-	    mono: import("@emotion/react").SerializedStyles;
 	    m: import("@emotion/react").SerializedStyles;
 	    l: import("@emotion/react").SerializedStyles;
 	    xl: import("@emotion/react").SerializedStyles;
@@ -3361,7 +3531,6 @@ declare module '@elastic/eui/src/components/loading/loading_chart' {
 	export type EuiLoadingChartSize = (typeof SIZES)[number];
 	export type EuiLoadingChartProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    size?: EuiLoadingChartSize;
-	    mono?: boolean;
 	};
 	export const EuiLoadingChart: FunctionComponent<EuiLoadingChartProps>;
 
@@ -3369,7 +3538,7 @@ declare module '@elastic/eui/src/components/loading/loading_chart' {
 declare module '@elastic/eui/src/components/loading/loading_spinner.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	import { EuiLoadingSpinnerColor } from '@elastic/eui/src/components/loading/loading_spinner';
-	export const euiSpinnerBorderColorsCSS: ({ euiTheme }: UseEuiTheme, colors?: EuiLoadingSpinnerColor) => string;
+	export const euiSpinnerBorderColorsCSS: ({ euiTheme, highContrastMode }: UseEuiTheme, colors?: EuiLoadingSpinnerColor) => string;
 	export const euiLoadingSpinnerStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiLoadingSpinner: import("@emotion/react").SerializedStyles;
 	    s: import("@emotion/react").SerializedStyles;
@@ -3785,6 +3954,7 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	    controlCompressedBorderRadius: import("csstype").Property.BorderRadius<string | number> | undefined;
 	    iconAffordance: string;
 	    iconCompressedAffordance: string;
+	    stateUnderlineHeight: string | number | undefined;
 	};
 	export const euiFormControlStyles: (euiThemeContext: UseEuiTheme) => {
 	    shared: string;
@@ -3806,11 +3976,12 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	    withBackgroundColor?: boolean | undefined;
 	    withBackgroundAnimation?: boolean | undefined;
 	}) => string;
-	export const euiFormControlFocusStyles: ({ euiTheme }: UseEuiTheme) => string;
-	export const euiFormControlInvalidStyles: ({ euiTheme }: UseEuiTheme) => string;
+	export const euiFormControlFocusStyles: (euiThemeContext: UseEuiTheme) => string;
+	export const euiFormControlInvalidStyles: (euiThemeContext: UseEuiTheme) => string;
 	export const euiFormControlDisabledStyles: (euiThemeContext: UseEuiTheme) => string;
 	export const euiFormControlReadOnlyStyles: (euiThemeContext: UseEuiTheme) => string;
 	export const euiFormControlAutoFillStyles: (euiThemeContext: UseEuiTheme) => string;
+	export const euiFormControlShowBackgroundUnderline: (euiThemeContext: UseEuiTheme, color: string) => string;
 	/**
 	 * Selection custom controls - checkboxes, radios, and switches
 	 */
@@ -3846,8 +4017,9 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	            unselected: string;
 	        };
 	        disabled: {
-	            selected: string;
-	            unselected: string;
+	            readonly shared: string;
+	            readonly selected: string;
+	            readonly unselected: string;
 	        };
 	        icon: string;
 	        hiddenInput: string;
@@ -4065,7 +4237,7 @@ declare module '@elastic/eui/src/components/button' {
 }
 declare module '@elastic/eui/src/components/horizontal_rule/horizontal_rule.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiHorizontalRuleStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiHorizontalRuleStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiHorizontalRule: import("@emotion/react").SerializedStyles;
 	    full: import("@emotion/react").SerializedStyles;
 	    half: import("@emotion/react").SerializedStyles;
@@ -5145,7 +5317,7 @@ declare module '@elastic/eui/src/components/table/table_header_cell' {
 	import type { EuiTableColumnNameTooltipProps } from '@elastic/eui/src/components/basic_table/table_types';
 	import { HEADER_CELL_SCOPE } from '@elastic/eui/src/components/table/table_header_cell_shared';
 	export type TableHeaderCellScope = (typeof HEADER_CELL_SCOPE)[number];
-	export type EuiTableHeaderCellProps = CommonProps & Omit<ThHTMLAttributes<HTMLTableHeaderCellElement>, 'align' | 'scope'> & {
+	export type EuiTableHeaderCellProps = CommonProps & Omit<ThHTMLAttributes<HTMLTableCellElement>, 'align' | 'scope'> & {
 	    align?: HorizontalAlignment;
 	    isSortAscending?: boolean;
 	    isSorted?: boolean;
@@ -5180,7 +5352,7 @@ declare module '@elastic/eui/src/components/table/table_header_cell_checkbox' {
 	    scope?: EuiTableHeaderCellCheckboxScope;
 	    append?: ReactNode;
 	}
-	export const EuiTableHeaderCellCheckbox: FunctionComponent<CommonProps & ThHTMLAttributes<HTMLTableHeaderCellElement> & EuiTableHeaderCellCheckboxProps>;
+	export const EuiTableHeaderCellCheckbox: FunctionComponent<CommonProps & ThHTMLAttributes<HTMLTableCellElement> & EuiTableHeaderCellCheckboxProps>;
 
 }
 declare module '@elastic/eui/src/components/table/mobile/table_header_mobile.styles' {
@@ -5390,6 +5562,12 @@ declare module '@elastic/eui/src/components/provider/component_defaults/componen
 	export const EuiComponentDefaultsProvider: FunctionComponent<EuiComponentDefaultsProviderProps>;
 	export const useComponentDefaults: () => EuiComponentDefaults;
 	export const usePropsWithComponentDefaults: <TComponentName extends keyof EuiComponentDefaults, TComponentProps>(componentName: TComponentName, props: TComponentProps) => TComponentProps;
+	/**
+	 * Used only to generate prop type definitions (via `@elastic/eui-docgen`) to document `EuiComponentDefaults` in a props table.
+	 *
+	 * @see https://github.com/elastic/eui/issues/8388
+	 */
+	export const EuiProviderComponentDefaultsProps: FunctionComponent<EuiComponentDefaults>;
 
 }
 declare module '@elastic/eui/src/components/provider/component_defaults' {
@@ -5552,21 +5730,6 @@ declare module '@elastic/eui/src/components/popover/popover.styles' {
 	    euiPopover: import("@emotion/react").SerializedStyles;
 	};
 
-}
-declare module '@elastic/eui/src/components/panel/panel.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiPanelStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiPanel: import("@emotion/react").SerializedStyles;
-	    grow: import("@emotion/react").SerializedStyles;
-	    hasShadow: import("@emotion/react").SerializedStyles;
-	    hasBorder: import("@emotion/react").SerializedStyles;
-	    radius: {
-	        none: import("@emotion/react").SerializedStyles;
-	        m: import("@emotion/react").SerializedStyles;
-	    };
-	    isClickable: import("@emotion/react").SerializedStyles;
-	};
-
 }
 declare module '@elastic/eui/src/components/panel/panel' {
 	import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, Ref } from 'react';
@@ -5616,6 +5779,7 @@ declare module '@elastic/eui/src/components/panel/panel' {
 	}
 	export type EuiPanelProps = ExclusiveUnion<_EuiPanelButtonlike, _EuiPanelDivlike>;
 	export const EuiPanel: FunctionComponent<EuiPanelProps>;
+	export const _canRenderHighContrastBorder: ({ color, hasBorder, }: Pick<_EuiPanelProps, 'color' | 'hasBorder'>) => boolean;
 	export {};
 
 }
@@ -6051,12 +6215,18 @@ declare module '@elastic/eui/src/components/form/eui_form_context' {
 }
 declare module '@elastic/eui/src/components/form/form_control_layout/form_control_layout_clear_button.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const EuiFormControlLayoutClearButtonStyles: ({ euiTheme, colorMode, }: UseEuiTheme) => {
+	export const EuiFormControlLayoutClearButtonStyles: ({ euiTheme, colorMode, highContrastMode, }: UseEuiTheme) => {
 	    euiFormControlLayoutClearButton: import("@emotion/react").SerializedStyles;
-	    euiFormControlLayoutClearButton__icon: import("@emotion/react").SerializedStyles;
 	    size: {
-	        s: import("@emotion/react").SerializedStyles;
-	        m: import("@emotion/react").SerializedStyles;
+	        s: string;
+	        m: string;
+	    };
+	    icon: {
+	        euiFormControlLayoutClearButton__icon: import("@emotion/react").SerializedStyles;
+	        size: {
+	            s: import("@emotion/react").SerializedStyles;
+	            m: import("@emotion/react").SerializedStyles;
+	        };
 	    };
 	};
 
@@ -6791,10 +6961,11 @@ declare module '@elastic/eui/src/services/color' {
 declare module '@elastic/eui/src/services/theme/provider' {
 	import React, { PropsWithChildren, HTMLAttributes } from 'react';
 	import type { CommonProps } from '@elastic/eui/src/components/common';
-	import { EuiThemeColorMode, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types';
+	import { EuiThemeColorMode, EuiThemeHighContrastModeProp, EuiThemeSystem, EuiThemeModifications } from '@elastic/eui/src/services/theme/types';
 	export interface EuiThemeProviderProps<T> extends PropsWithChildren {
 	    theme?: EuiThemeSystem<T>;
 	    colorMode?: EuiThemeColorMode;
+	    highContrastMode?: EuiThemeHighContrastModeProp;
 	    modify?: EuiThemeModifications<T>;
 	    children: any;
 	    /**
@@ -6811,11 +6982,11 @@ declare module '@elastic/eui/src/services/theme/provider' {
 	        cloneElement?: boolean;
 	    };
 	}
-	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, modify: _modifications, children, wrapperProps, }: EuiThemeProviderProps<T>) => React.JSX.Element;
+	export const EuiThemeProvider: <T extends {} = {}>({ theme: _system, colorMode: _colorMode, highContrastMode: _highContrastMode, modify: _modifications, children, wrapperProps, }: EuiThemeProviderProps<T>) => React.JSX.Element;
 
 }
 declare module '@elastic/eui/src/services/theme' {
-	export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, } from '@elastic/eui/src/services/theme/context';
+	export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext, EuiHighContrastModeContext, } from '@elastic/eui/src/services/theme/context';
 	export type { UseEuiTheme, WithEuiThemeProps } from '@elastic/eui/src/services/theme/hooks';
 	export { useEuiTheme, withEuiTheme, RenderWithEuiTheme, useEuiThemeCSSVariables, } from '@elastic/eui/src/services/theme/hooks';
 	export type { EuiThemeProviderProps } from '@elastic/eui/src/services/theme/provider';
@@ -6823,7 +6994,7 @@ declare module '@elastic/eui/src/services/theme' {
 	export { useEuiMemoizedStyles, withEuiStylesMemoizer, type WithEuiStylesMemoizerProps, RenderWithEuiStylesMemoizer, } from '@elastic/eui/src/services/theme/style_memoization';
 	export { getEuiDevProviderWarning, setEuiDevProviderWarning } from '@elastic/eui/src/services/theme/warning';
 	export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed, } from '@elastic/eui/src/services/theme/utils';
-	export type { ComputedThemeShape, EuiThemeColorMode, EuiThemeColorModeStandard, EuiThemeComputed, EuiThemeModifications, EuiThemeShape, EuiThemeSystem, } from '@elastic/eui/src/services/theme/types';
+	export type { ComputedThemeShape, EuiThemeColorMode, EuiThemeColorModeStandard, EuiThemeHighContrastMode, EuiThemeHighContrastModeProp, EuiThemeComputed, EuiThemeModifications, EuiThemeShape, EuiThemeSystem, } from '@elastic/eui/src/services/theme/types';
 	export { COLOR_MODES_STANDARD } from '@elastic/eui/src/services/theme/types';
 
 }
@@ -7770,30 +7941,65 @@ declare module '@elastic/eui/src/components/badge/color_utils' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiBadgeColors: (euiThemeContext: UseEuiTheme) => {
 	    primary: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    success: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    warning: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    danger: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    accent: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    accentSecondary: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
 	    disabled: {
+	        border: string;
+	        color: string;
+	        backgroundColor: string;
+	    } | {
+	        border?: undefined;
 	        color: string;
 	        backgroundColor: string;
 	    };
@@ -8103,7 +8309,7 @@ declare module '@elastic/eui/src/components/badge' {
 }
 declare module '@elastic/eui/src/components/beacon/beacon.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiBeaconStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiBeaconStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiBeacon: import("@emotion/react").SerializedStyles;
 	    subdued: import("@emotion/react").SerializedStyles;
 	    primary: import("@emotion/react").SerializedStyles;
@@ -8377,6 +8583,10 @@ declare module '@elastic/eui/src/components/breadcrumbs/types' {
 	    truncateLastBreadcrumb?: boolean;
 	};
 
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button' {
+	export { type _EuiButtonColor, type _EuiButtonDisplay, type _EuiButtonOptions, BUTTON_COLORS, BUTTON_DISPLAYS, euiButtonColor, euiButtonFillColor, euiButtonEmptyColor, useEuiButtonColorCSS, useEuiButtonFocusCSS, euiButtonSizeMap, } from '@elastic/eui/src/global_styling/mixins/_button';
+
 }
 declare module '@elastic/eui/src/components/breadcrumbs/_breadcrumb_content.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -8393,6 +8603,7 @@ declare module '@elastic/eui/src/components/breadcrumbs/_breadcrumb_content.styl
 	    applicationStyles: {
 	        onlyChild: import("@emotion/react").SerializedStyles;
 	        firstChild: import("@emotion/react").SerializedStyles;
+	        intermediateChild: string;
 	        lastChild: import("@emotion/react").SerializedStyles;
 	    };
 	};
@@ -8461,13 +8672,19 @@ declare module '@elastic/eui/src/components/breadcrumbs' {
 
 }
 declare module '@elastic/eui/src/components/panel/split_panel/split_panel.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiSplitPanelOuterStyles: {
 	    euiSplitPanelOuter: import("@emotion/react").SerializedStyles;
 	    column: import("@emotion/react").SerializedStyles;
 	    row: import("@emotion/react").SerializedStyles;
 	};
-	export const euiSplitPanelInnerStyles: {
+	export const euiSplitPanelInnerStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiSplitPanelInner: import("@emotion/react").SerializedStyles;
+	    highContrastBorders: {
+	        _renderBorder: (direction: 'right' | 'bottom') => string;
+	        readonly column: string;
+	        readonly row: string;
+	    };
 	};
 
 }
@@ -9332,14 +9549,15 @@ declare module '@elastic/eui/src/components/progress/progress.styles' {
 	/**
 	 * Emotion styles
 	 */
-	export const euiProgressStyles: ({ euiTheme }: UseEuiTheme, isNative: boolean) => {
+	export const euiProgressStyles: (euiThemeContext: UseEuiTheme, isNative: boolean) => {
 	    euiProgress: import("@emotion/react").SerializedStyles;
 	    native: import("@emotion/react").SerializedStyles;
 	    indeterminate: import("@emotion/react").SerializedStyles;
-	    xs: import("@emotion/react").SerializedStyles;
-	    s: import("@emotion/react").SerializedStyles;
-	    m: import("@emotion/react").SerializedStyles;
-	    l: import("@emotion/react").SerializedStyles;
+	    _sharedSizeCSS: (size: string) => string;
+	    readonly xs: import("@emotion/react").SerializedStyles;
+	    readonly s: import("@emotion/react").SerializedStyles;
+	    readonly m: import("@emotion/react").SerializedStyles;
+	    readonly l: import("@emotion/react").SerializedStyles;
 	    fixed: import("@emotion/react").SerializedStyles;
 	    absolute: import("@emotion/react").SerializedStyles;
 	    static: import("@emotion/react").SerializedStyles;
@@ -9793,8 +10011,8 @@ declare module '@elastic/eui/src/components/form/range/range_levels_colors' {
 	import type { EuiRangeLevel } from '@elastic/eui/src/components/form/range/types';
 	export const LEVEL_COLORS: readonly ["primary", "success", "warning", "danger"];
 	export type EuiRangeLevelColor = (typeof LEVEL_COLORS)[number];
-	export const isNamedLevelColor: (color?: string | undefined) => boolean;
-	export const euiRangeLevelColor: (color: EuiRangeLevelColor | string, euiTheme: UseEuiTheme['euiTheme']) => string;
+	export const isNamedLevelColor: (color?: string | undefined) => color is "primary" | "success" | "warning" | "danger";
+	export const euiRangeLevelColor: (color: EuiRangeLevelColor | string, { euiTheme }: UseEuiTheme) => string;
 	export const getLevelColor: (levels: EuiRangeLevel[], value: number) => "primary" | "success" | "warning" | "danger" | import("csstype").Property.Color | undefined;
 
 }
@@ -10002,14 +10220,15 @@ declare module '@elastic/eui/src/components/form/range/range.styles' {
 	    thumbWidth: string;
 	    thumbBorderWidth: import("csstype").Property.BorderWidth<string | number> | undefined;
 	    thumbBorderColor: string;
-	    thumbBackgroundColor: string;
+	    readonly thumbBackgroundColor: string;
 	    trackWidth: string;
 	    trackHeight: string;
 	    trackBorderWidth: string;
-	    trackBorderColor: string;
+	    readonly trackBorderColor: string;
 	    trackBorderRadius: import("csstype").Property.BorderRadius<string | number> | undefined;
 	    tickHeight: string;
 	    tickWidth: string;
+	    tickColor: string;
 	    disabledOpacity: number;
 	    highlightHeight: string;
 	    height: string;
@@ -10027,7 +10246,7 @@ declare module '@elastic/eui/src/components/form/range/range.styles' {
 	export const euiRangeThumbFocusBoxShadow: (euiThemeContext: UseEuiTheme) => string;
 	export const euiRangeThumbStyle: (euiThemeContext: UseEuiTheme) => string;
 	export const euiRangeThumbPerBrowser: (content: string) => string;
-	export const euiRangeThumbFocus: (euiThemeContext: UseEuiTheme, color?: string | undefined) => string;
+	export const euiRangeThumbFocus: (euiThemeContext: UseEuiTheme) => string;
 	export const euiRangeStyles: ({ euiTheme }: UseEuiTheme) => {
 	    euiRange: import("@emotion/react").SerializedStyles;
 	    hasInput: import("@emotion/react").SerializedStyles;
@@ -10154,9 +10373,6 @@ declare module '@elastic/eui/src/components/form/range/range_slider.styles' {
 	    hasRange: import("@emotion/react").SerializedStyles;
 	    hasLevels: import("@emotion/react").SerializedStyles;
 	};
-	export const euiRangeSliderThumbStyles: (euiThemeContext: UseEuiTheme) => {
-	    thumb: import("@emotion/react").SerializedStyles;
-	};
 
 }
 declare module '@elastic/eui/src/components/form/range/range_slider' {
@@ -10714,7 +10930,7 @@ declare module '@elastic/eui/src/components/card' {
 }
 declare module '@elastic/eui/src/components/code/code_block_annotations.style' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiCodeBlockAnnotationsStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiCodeBlockAnnotationsStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiCodeBlockAnnotation: import("@emotion/react").SerializedStyles;
 	    euiCodeBlockAnnotation__buttonIcon: import("@emotion/react").SerializedStyles;
 	};
@@ -10793,37 +11009,6 @@ declare module '@elastic/eui/src/components/code/utils' {
 	export const highlightByLine: (children: string, language: string, data: LineNumbersConfig, euiTheme: UseEuiTheme) => RefractorNode[];
 	export {};
 
-}
-declare module '@elastic/eui/src/components/code/code_syntax.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiCodeSyntaxVariables: ({ euiTheme }: UseEuiTheme) => {
-	    backgroundColor: string;
-	    color: string;
-	    inlineCodeColor: string;
-	    selectedBackgroundColor: string;
-	    commentColor: string;
-	    selectorTagColor: string;
-	    stringColor: string;
-	    tagColor: string;
-	    nameColor: string;
-	    numberColor: string;
-	    keywordColor: string;
-	    inlineCodeKeywordColor: string;
-	    functionTitleColor: string;
-	    typeColor: string;
-	    attributeColor: string;
-	    symbolColor: string;
-	    paramsColor: string;
-	    metaColor: string;
-	    titleColor: string;
-	    sectionColor: string;
-	    additionColor: string;
-	    deletionColor: string;
-	    selectorClassColor: string;
-	    selectorIdColor: string;
-	    readonly tokensCss: string;
-	};
-
 }
 declare module '@elastic/eui/src/components/code/code.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -10920,7 +11105,7 @@ declare module '@elastic/eui/src/components/code/code_block_copy' {
 }
 declare module '@elastic/eui/src/components/overlay_mask/overlay_mask.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiOverlayMaskStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiOverlayMaskStyles: ({ euiTheme, highContrastMode, }: UseEuiTheme) => {
 	    euiOverlayMask: string;
 	    aboveHeader: string;
 	    belowHeader: string;
@@ -11325,7 +11510,7 @@ declare module '@elastic/eui/src/components/flyout/_flyout_close_button' {
 
 }
 declare module '@elastic/eui/src/components/flyout/flyout' {
-	import React, { ComponentPropsWithRef, CSSProperties, ElementType } from 'react';
+	import React, { ComponentPropsWithRef, CSSProperties, ElementType, JSX } from 'react';
 	import { EuiBreakpointSize } from '@elastic/eui/src/services';
 	import { CommonProps, PropsOfElement } from '@elastic/eui/src/components/common';
 	import { EuiFocusTrapProps } from '@elastic/eui/src/components/focus_trap';
@@ -11434,7 +11619,7 @@ declare module '@elastic/eui/src/components/flyout/flyout' {
 	    as?: T;
 	} & _EuiFlyoutProps & Omit<PropsOfElement<T>, keyof _EuiFlyoutProps>;
 	export type EuiFlyoutProps<T extends ElementType = typeof defaultElement> = Props<T> & Omit<ComponentPropsWithRef<T>, keyof Props<T>>;
-	export const EuiFlyout: <T extends React.ElementType = "div">(props: EuiFlyoutProps<T>) => JSX.Element;
+	export const EuiFlyout: <T extends React.ElementType<any, keyof JSX.IntrinsicElements> = "div">(props: EuiFlyoutProps<T>) => JSX.Element;
 	export {};
 
 }
@@ -13125,7 +13310,7 @@ declare module '@elastic/eui/src/components/color_picker/saturation' {
 	import React, { HTMLAttributes } from 'react';
 	import { ColorSpaces } from 'chroma-js';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	export type SaturationClientRect = Pick<ClientRect, 'left' | 'top' | 'width' | 'height'>;
+	export type SaturationClientRect = Pick<DOMRect, 'left' | 'top' | 'width' | 'height'>;
 	export type SaturationPosition = Pick<SaturationClientRect, 'left' | 'top'>;
 	interface HTMLDivElementOverrides {
 	    color?: ColorSpaces['hsv'];
@@ -13466,7 +13651,7 @@ declare module '@elastic/eui/src/components/combo_box/combo_box_input/combo_box_
 }
 declare module '@elastic/eui/src/components/mark/mark.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiMarkStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiMarkStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiMark: import("@emotion/react").SerializedStyles;
 	};
 	export const euiMarkScreenReaderStyles: (highlightStart: string, highlightEnd: string) => {
@@ -13935,7 +14120,7 @@ declare module '@elastic/eui/src/components/timeline/timeline_item_event' {
 }
 declare module '@elastic/eui/src/components/timeline/timeline_item_icon.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiTimelineItemIconStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiTimelineItemIconStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiTimelineItemIcon: import("@emotion/react").SerializedStyles;
 	    euiTimelineItemIcon__content: import("@emotion/react").SerializedStyles;
 	    top: import("@emotion/react").SerializedStyles;
@@ -13988,7 +14173,7 @@ declare module '@elastic/eui/src/components/timeline/timeline_item' {
 }
 declare module '@elastic/eui/src/components/timeline/timeline.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiTimelineStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiTimelineStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiTimeline: import("@emotion/react").SerializedStyles;
 	    m: import("@emotion/react").SerializedStyles;
 	    l: import("@emotion/react").SerializedStyles;
@@ -14348,7 +14533,7 @@ declare module '@elastic/eui/src/components/token/token_map' {
 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) => {
+	export const euiTokenStyles: (euiThemeContext: UseEuiTheme, fill: TokenFill) => {
 	    euiToken: import("@emotion/react").SerializedStyles;
 	    circle: import("@emotion/react").SerializedStyles;
 	    square: import("@emotion/react").SerializedStyles;
@@ -14388,7 +14573,7 @@ declare module '@elastic/eui/src/components/token' {
 
 }
 declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
-	import { ComponentType, JSXElementConstructor, ReactNode, HTMLAttributes, CSSProperties, ReactElement, AriaAttributes, MutableRefObject, Ref, Component, ComponentClass, KeyboardEventHandler } from 'react';
+	import { ComponentType, JSXElementConstructor, ReactNode, HTMLAttributes, CSSProperties, ReactElement, AriaAttributes, MutableRefObject, Ref, Component, ComponentClass, KeyboardEventHandler, JSX } from 'react';
 	import { VariableSizeGridProps, VariableSizeGrid as Grid, GridOnItemsRenderedProps } from 'react-window';
 	import { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group';
 	import { EuiButtonEmpty, EuiButtonIcon } from '@elastic/eui/src/components/button';
@@ -14843,11 +15028,11 @@ declare module '@elastic/eui/src/components/datagrid/data_grid_types' {
 	    /**
 	     * Header row component to render by custom renderer
 	     * */
-	    headerRow: React.JSX.Element;
+	    headerRow: JSX.Element;
 	    /**
 	     * Footer row component to render by custom renderer
 	     * */
-	    footerRow: React.JSX.Element | null;
+	    footerRow: JSX.Element | null;
 	}
 	export type EuiDataGridSetCustomGridBodyProps = CommonProps & HTMLAttributes<HTMLDivElement> & {
 	    ref?: MutableRefObject<HTMLDivElement> | Ref<HTMLDivElement>;
@@ -16942,18 +17127,79 @@ declare module '@elastic/eui/src/components/date_picker/react-datepicker' {
 }
 declare module '@elastic/eui/src/components/date_picker/react_date_picker.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiDatePickerVariables: ({ euiTheme }: UseEuiTheme) => {
+	export const euiDatePickerVariables: (euiThemeContext: UseEuiTheme) => {
 	    gapSize: string;
 	    readonly paddingSize: string;
 	    headerButtonSize: string;
 	    readonly headerOffset: string;
+	    colors: {
+	        day: {
+	            inMonth: string;
+	            outsideMonth: string;
+	            header: string;
+	            today: string;
+	        };
+	        hover: {
+	            border?: undefined;
+	            color: string;
+	            backgroundColor: string;
+	        } & {
+	            border: undefined;
+	        };
+	        disabled: {
+	            border?: undefined;
+	            color: string;
+	            backgroundColor: string;
+	        } & {
+	            border: undefined;
+	        };
+	        readonly inRange: {
+	            border?: undefined;
+	            color: string;
+	            backgroundColor: string;
+	        } & {
+	            border: undefined;
+	        };
+	        inRangeAndDisabled: {
+	            backgroundColor: string;
+	        };
+	        selected: {
+	            border: string;
+	            color: string;
+	            backgroundColor: string;
+	        } | {
+	            border?: undefined;
+	            color: string;
+	            backgroundColor: string;
+	        } | {
+	            color: string;
+	            backgroundColor: string;
+	            forcedColorAdjust: string;
+	        };
+	        selectedAndDisabled: {
+	            border: string;
+	            color: string;
+	            backgroundColor: string;
+	        } | {
+	            border?: undefined;
+	            color: string;
+	            backgroundColor: string;
+	        };
+	        highlighted: {
+	            border: string;
+	            color: string;
+	            backgroundColor: string;
+	        } | {
+	            border?: undefined;
+	            color: string;
+	            backgroundColor: string;
+	        };
+	    };
+	    animationSpeed: import("csstype").Property.AnimationDuration<string & {}> | undefined;
 	};
 	export const euiReactDatePickerStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiReactDatePicker: string;
 	};
-	export const _monthYearDropdowns: (euiThemeContext: UseEuiTheme) => string;
-	export const _dayCalendarStyles: (euiThemeContext: UseEuiTheme) => string;
-	export const _timeSelectStyles: (euiThemeContext: UseEuiTheme) => string;
 
 }
 declare module '@elastic/eui/src/components/date_picker/date_picker.styles' {
@@ -17071,7 +17317,7 @@ declare module '@elastic/eui/src/components/date_picker/date_picker' {
 }
 declare module '@elastic/eui/src/components/tabs/tab.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiTabStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiTabStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiTab: import("@emotion/react").SerializedStyles;
 	    expanded: import("@emotion/react").SerializedStyles;
 	    selected: import("@emotion/react").SerializedStyles;
@@ -18388,7 +18634,7 @@ declare module '@elastic/eui/src/components/empty_prompt' {
 }
 declare module '@elastic/eui/src/components/error_boundary/error_boundary.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiErrorBoundaryStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiErrorBoundaryStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiErrorBoundary: import("@emotion/react").SerializedStyles;
 	};
 
@@ -19321,7 +19567,7 @@ declare module '@elastic/eui/src/components/skeleton/utils' {
 	    slideSize?: string;
 	    gradientSize?: string;
 	};
-	export const euiSkeletonGradientAnimation: ({ euiTheme }: UseEuiTheme, { slideSize, gradientSize }?: AnimationOptions) => import("@emotion/react").SerializedStyles;
+	export const euiSkeletonGradientAnimation: ({ euiTheme, highContrastMode }: UseEuiTheme, { slideSize, gradientSize }?: AnimationOptions) => import("@emotion/react").SerializedStyles;
 	export {};
 
 }
@@ -19486,7 +19732,7 @@ declare module '@elastic/eui/src/components/inline_edit/inline_edit_form' {
 	     * Multiple props objects that can be applied directly to various child components displayed in edit mode.
 	     * - `formRowProps` will be passed to `EuiFormRow`
 	     * - `inputProps` will be passed to `EuiFieldText`
-	     * - `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiIconButton`s
+	     * - `saveButtonProps` & `cancelButtonProps` will be passed to their respective `EuiButtonIcon`s
 	     */
 	    editModeProps?: {
 	        formRowProps?: Partial<EuiFormRowProps>;
@@ -20178,7 +20424,7 @@ declare module '@elastic/eui/src/components/markdown_editor/markdown_format.styl
 	/**
 	 * Styles
 	 */
-	export const euiMarkdownFormatStyles: (euiTheme: UseEuiTheme) => {
+	export const euiMarkdownFormatStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiMarkdownFormat: import("@emotion/react").SerializedStyles;
 	    m: import("@emotion/react").SerializedStyles;
 	    s: import("@emotion/react").SerializedStyles;
@@ -20664,7 +20910,7 @@ declare module '@elastic/eui/src/components/page/page_body/page_body.styles' {
 
 }
 declare module '@elastic/eui/src/components/page/page_body/page_body' {
-	import React, { PropsWithChildren, ComponentType, ComponentProps } from 'react';
+	import { PropsWithChildren, ComponentType, ComponentProps, JSX } 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';
@@ -20687,7 +20933,7 @@ declare module '@elastic/eui/src/components/page/page_body/page_body' {
 	     */
 	    paddingSize?: EuiPaddingSize;
 	};
-	export const EuiPageBody: <T extends ComponentTypes>({ children, restrictWidth, className, css, component: Component, panelled, panelProps, paddingSize, borderRadius, ...rest }: EuiPageBodyProps<T>) => React.JSX.Element;
+	export const EuiPageBody: <T extends ComponentTypes>({ children, restrictWidth, className, css, component: Component, panelled, panelProps, paddingSize, borderRadius, ...rest }: EuiPageBodyProps<T>) => JSX.Element;
 	export {};
 
 }
@@ -20897,7 +21143,7 @@ declare module '@elastic/eui/src/components/page/page_section/page_section.style
 
 }
 declare module '@elastic/eui/src/components/page/page_section/page_section' {
-	import { FunctionComponent, ComponentType, HTMLAttributes } from 'react';
+	import { FunctionComponent, ComponentType, HTMLAttributes, JSX } 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';
@@ -21055,7 +21301,7 @@ declare module '@elastic/eui/src/components/page_template/inner/page_inner.style
 
 }
 declare module '@elastic/eui/src/components/page_template/inner/page_inner' {
-	import React, { PropsWithChildren, ComponentType, ComponentProps } from 'react';
+	import { PropsWithChildren, ComponentType, ComponentProps, JSX } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { EuiPaddingSize, _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling';
 	export type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType;
@@ -21082,7 +21328,7 @@ declare module '@elastic/eui/src/components/page_template/inner/page_inner' {
 	     */
 	    responsive?: _EuiThemeBreakpoint[];
 	};
-	export const _EuiPageInner: <T extends ComponentTypes>({ children, component: Component, panelled, border, paddingSize, responsive, ...rest }: _EuiPageInnerProps<T>) => React.JSX.Element;
+	export const _EuiPageInner: <T extends ComponentTypes>({ children, component: Component, panelled, border, paddingSize, responsive, ...rest }: _EuiPageInnerProps<T>) => JSX.Element;
 
 }
 declare module '@elastic/eui/src/components/page_template/inner' {
@@ -21197,17 +21443,18 @@ declare module '@elastic/eui/src/components/provider/cache' {
 	export * from '@elastic/eui/src/components/provider/cache/cache_provider';
 
 }
-declare module '@elastic/eui/src/components/provider/system_color_mode/system_color_mode_provider' {
-	import { FunctionComponent, ReactElement } from 'react';
-	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services';
-	export const COLOR_MODE_MEDIA_QUERY = "(prefers-color-scheme: dark)";
-	export const EuiSystemColorModeProvider: FunctionComponent<{
-	    children: (systemColorMode: EuiThemeColorModeStandard) => ReactElement;
-	}>;
+declare module '@elastic/eui/src/components/provider/system_defaults/match_media_hook' {
+	export const useWindowMediaMatcher: (mediaQuery: string) => boolean;
+
+}
+declare module '@elastic/eui/src/components/provider/system_defaults/system_defaults_provider' {
+	import { FunctionComponent, PropsWithChildren } from 'react';
+	export const EuiSystemDefaultsProvider: FunctionComponent<PropsWithChildren>;
 
 }
-declare module '@elastic/eui/src/components/provider/system_color_mode' {
-	export { EuiSystemColorModeProvider } from '@elastic/eui/src/components/provider/system_color_mode/system_color_mode_provider';
+declare module '@elastic/eui/src/components/provider/system_defaults' {
+	export { EuiSystemDefaultsProvider } from '@elastic/eui/src/components/provider/system_defaults/system_defaults_provider';
+	export { useWindowMediaMatcher } from '@elastic/eui/src/components/provider/system_defaults/match_media_hook';
 
 }
 declare module '@elastic/eui/src/components/provider/nested/nested_context' {
@@ -21228,9 +21475,9 @@ declare module '@elastic/eui/src/components/provider/nested' {
 
 }
 declare module '@elastic/eui/src/components/provider/provider' {
-	import React, { PropsWithChildren } from 'react';
+	import React, { PropsWithChildren, JSX } from 'react';
 	import type { EmotionCache } from '@emotion/css';
-	import { EuiThemeProviderProps, EuiThemeSystem, EuiThemeColorMode } from '@elastic/eui/src/services';
+	import { EuiThemeProviderProps, EuiThemeSystem, EuiThemeColorMode, EuiThemeHighContrastModeProp } from '@elastic/eui/src/services';
 	import { EuiGlobalStylesProps } from '@elastic/eui/src/global_styling/reset/global_styles';
 	import { EuiComponentDefaults } from '@elastic/eui/src/components/provider/component_defaults';
 	export interface EuiProviderProps<T> extends PropsWithChildren, EuiGlobalStylesProps, Pick<EuiThemeProviderProps<T>, 'modify'> {
@@ -21244,6 +21491,14 @@ declare module '@elastic/eui/src/components/provider/provider' {
 	     * Defaults to the user's OS/system setting if undefined.
 	     */
 	    colorMode?: EuiThemeColorMode;
+	    /**
+	     * Allows enabling a high contrast mode preference for better accessibility.
+	     * Defaults to the user's OS/system setting if undefined.
+	     *
+	     * - @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast
+	     * - @see https://developer.mozilla.org/en-US/docs/Web/CSS/@media/forced-colors (system only, supercedes this prop)
+	     */
+	    highContrastMode?: EuiThemeHighContrastModeProp;
 	    /**
 	     * Provide global styles via `@emotion/react` `Global` for your custom theme.
 	     * Pass `false` to remove the default EUI global styles.
@@ -21279,7 +21534,7 @@ declare module '@elastic/eui/src/components/provider/provider' {
 	     */
 	    componentDefaults?: EuiComponentDefaults;
 	}
-	export const EuiProvider: <T extends {} = {}>({ cache, theme, globalStyles: Globals, utilityClasses: Utilities, colorMode, modify, componentDefaults, children, }: React.PropsWithChildren<EuiProviderProps<T>>) => any;
+	export const EuiProvider: <T extends {} = {}>({ cache, theme, globalStyles: Globals, utilityClasses: Utilities, colorMode, highContrastMode, modify, componentDefaults, children, }: React.PropsWithChildren<EuiProviderProps<T>>) => any;
 
 }
 declare module '@elastic/eui/src/components/provider' {
@@ -23433,7 +23688,7 @@ declare module '@elastic/eui/src/components/side_nav/side_nav_item.styles' {
 
 }
 declare module '@elastic/eui/src/components/side_nav/side_nav_item' {
-	import React, { HTMLAttributes, ReactNode, ReactElement, MouseEventHandler } from 'react';
+	import React, { HTMLAttributes, ReactNode, ReactElement, MouseEventHandler, JSX } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	/**
 	 * The props that are exposed to, or altered for, the consumer
@@ -23516,7 +23771,7 @@ declare module '@elastic/eui/src/components/side_nav/side_nav_item' {
 	    disabled?: boolean | undefined;
 	} & _EuiSideNavItemProps & {
 	    renderItem?: ((props: any) => JSX.Element) | undefined;
-	}>({ isOpen, isSelected, isParent, icon, onClick, href: _href, rel, target, items, children, renderItem: RenderItem, depth, className, css, style, truncate, emphasize, buttonClassName, childrenOnly, ...rest }: EuiSideNavItemProps<T>) => React.JSX.Element;
+	}>({ isOpen, isSelected, isParent, icon, onClick, href: _href, rel, target, items, children, renderItem: RenderItem, depth, className, css, style, truncate, emphasize, buttonClassName, childrenOnly, ...rest }: EuiSideNavItemProps<T>) => JSX.Element;
 	export {};
 
 }
@@ -23773,12 +24028,12 @@ declare module '@elastic/eui/src/components/steps/step_number.styles' {
 	    euiStepNumber__icon: import("@emotion/react").SerializedStyles;
 	    complete: import("@emotion/react").SerializedStyles;
 	    danger: import("@emotion/react").SerializedStyles;
-	    warning: import("@emotion/react").SerializedStyles;
-	    euiStepNumber__number: import("@emotion/react").SerializedStyles;
-	    incomplete: import("@emotion/react").SerializedStyles;
-	    loading: import("@emotion/react").SerializedStyles;
-	    disabled: import("@emotion/react").SerializedStyles;
-	    current: import("@emotion/react").SerializedStyles;
+	    warning: {
+	        m: string;
+	        s: string;
+	        xs: string;
+	        none: string;
+	    };
 	    none: import("@emotion/react").SerializedStyles;
 	};
 
@@ -23869,7 +24124,7 @@ declare module '@elastic/eui/src/components/steps/steps' {
 }
 declare module '@elastic/eui/src/components/steps/sub_steps.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiSubStepsStyles: ({ euiTheme }: UseEuiTheme) => {
+	export const euiSubStepsStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiSubSteps: import("@emotion/react").SerializedStyles;
 	};
 
@@ -24527,7 +24782,7 @@ declare module '@elastic/eui/src/components/text_diff/text_diff.styles' {
 
 }
 declare module '@elastic/eui/src/components/text_diff/text_diff' {
-	import { HTMLAttributes, ElementType } from 'react';
+	import { HTMLAttributes, ElementType, JSX } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	interface Props {
 	    /**
@@ -24573,10 +24828,13 @@ declare module '@elastic/eui/src/components/toast/toast.styles' {
 	export const euiToastStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiToast: import("@emotion/react").SerializedStyles;
 	    euiToast__closeButton: import("@emotion/react").SerializedStyles;
-	    primary: import("@emotion/react").SerializedStyles;
-	    success: import("@emotion/react").SerializedStyles;
-	    warning: import("@emotion/react").SerializedStyles;
-	    danger: import("@emotion/react").SerializedStyles;
+	    colors: {
+	        _getStyles: (color: string) => string;
+	        readonly primary: import("@emotion/react").SerializedStyles;
+	        readonly success: import("@emotion/react").SerializedStyles;
+	        readonly warning: import("@emotion/react").SerializedStyles;
+	        readonly danger: import("@emotion/react").SerializedStyles;
+	    };
 	};
 	export const euiToastHeaderStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiToastHeader: import("@emotion/react").SerializedStyles;
@@ -30884,10 +31142,6 @@ declare module '@elastic/eui/src/themes/amsterdam/global_styling/functions/shado
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/functions' {
 	export * from '@elastic/eui/src/themes/amsterdam/global_styling/functions/shadows';
 
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button' {
-	export { type _EuiButtonColor, type _EuiButtonDisplay, type _EuiButtonOptions, BUTTON_COLORS, BUTTON_DISPLAYS, euiButtonColor, euiButtonFillColor, euiButtonEmptyColor, useEuiButtonColorCSS, useEuiButtonFocusCSS, euiButtonSizeMap, } from '@elastic/eui/src/global_styling/mixins/_button';
-
 }
 declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins' {
 	export * from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/button';