@elastic/eui/eui.d.ts

Elastic UI Component Library

declare module '@elastic/eui/src/services/keys' {
	export const ENTER = "Enter";
	export const SPACE = " ";
	export const ESCAPE = "Escape";
	export const TAB = "Tab";
	export const BACKSPACE = "Backspace";
	export const F2 = "F2";
	export const ALT = "Alt";
	export const SHIFT = "Shift";
	export const CTRL = "Control";
	export const META = "Meta";
	export const ARROW_DOWN = "ArrowDown";
	export const ARROW_UP = "ArrowUp";
	export const ARROW_LEFT = "ArrowLeft";
	export const ARROW_RIGHT = "ArrowRight";
	export const PAGE_UP = "PageUp";
	export const PAGE_DOWN = "PageDown";
	export const END = "End";
	export const HOME = "Home";
	export enum keys {
	    ENTER = "Enter",
	    SPACE = " ",
	    ESCAPE = "Escape",
	    TAB = "Tab",
	    BACKSPACE = "Backspace",
	    F2 = "F2",
	    ALT = "Alt",
	    SHIFT = "Shift",
	    CTRL = "Control",
	    META = "Meta",// Windows, Command, Option
	    ARROW_DOWN = "ArrowDown",
	    ARROW_UP = "ArrowUp",
	    ARROW_LEFT = "ArrowLeft",
	    ARROW_RIGHT = "ArrowRight",
	    PAGE_UP = "PageUp",
	    PAGE_DOWN = "PageDown",
	    END = "End",
	    HOME = "Home"
	}

}
declare module '@elastic/eui/src/services/accessibility/html_id_generator' {
	/**
	 * This function returns a function to generate ids.
	 * This can be used to generate unique, but predictable ids to pair labels
	 * with their inputs. It takes an optional prefix as a parameter. If you don't
	 * specify it, it generates a random id prefix. If you specify a custom prefix
	 * it should begin with an letter to be HTML4 compliant.
	 */
	export function htmlIdGenerator(idPrefix?: string): (idSuffix?: string) => string;
	/**
	 * Generates a memoized ID that remains static until component unmount.
	 * This prevents IDs from being re-randomized on every component update.
	 */
	export type UseGeneratedHtmlIdOptions = {
	    /**
	     * Optional prefix to prepend to the generated ID
	     */
	    prefix?: string;
	    /**
	     * Optional suffix to append to the generated ID
	     */
	    suffix?: string;
	    /**
	     * Optional conditional ID to use instead of a randomly generated ID.
	     * Typically used by EUI components where IDs can be passed in as custom props
	     */
	    conditionalId?: string;
	};
	export const useGeneratedHtmlId: ({ prefix, suffix, conditionalId, }?: UseGeneratedHtmlIdOptions) => string;

}
declare module '@elastic/eui/src/services/accessibility' {
	export { htmlIdGenerator, useGeneratedHtmlId } from '@elastic/eui/src/services/accessibility/html_id_generator';

}
declare module '@elastic/eui/src/services/alignment' {
	export const LEFT_ALIGNMENT = "left";
	export const RIGHT_ALIGNMENT = "right";
	export const CENTER_ALIGNMENT = "center";
	export type HorizontalAlignment = 'left' | 'right' | 'center';

}
declare module '@elastic/eui/src/global_styling/variables/breakpoint' {
	export { EuiThemeBreakpoints, type _EuiThemeBreakpoint, type _EuiThemeBreakpoints, } from '@elastic/eui-theme-common';

}
declare module '@elastic/eui/src/components/common' {
	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 {
	    className?: string;
	    'aria-label'?: string;
	    'data-test-subj'?: string;
	    css?: Interpolation<Theme>;
	}
	export interface DataAttributeProps {
	    [key: `data-${string}`]: string | undefined;
	}
	export type NoArgCallback<T> = () => T;
	export const assertNever: (x: never) => never;
	/**
	 * XOR for some properties applied to a type
	 * (XOR is one of these but not both or neither)
	 *
	 * Usage: OneOf<typeToExtend, one | but | not | multiple | of | these | are | required>
	 *
	 * To require aria-label or aria-labelledby but not both
	 * Example: OneOf<Type, 'aria-label' | 'aria-labelledby'>
	 */
	export type OneOf<T, K extends keyof T> = Omit<T, K> & {
	    [k in K]: Pick<Required<T>, k> & {
	        [k1 in Exclude<K, k>]?: never;
	    };
	}[K];
	/**
	 * Wraps Object.keys with proper typescript definition of the resulting array
	 */
	export function keysOf<T extends object, K extends keyof T>(obj: T): K[];
	export type PropsOf<C> = C extends FunctionComponent<infer SFCProps> ? SFCProps : C extends FunctionComponent<infer FunctionProps> ? FunctionProps : C extends Component<infer ComponentProps> ? ComponentProps : never;
	export type PropsOfElement<C extends keyof JSX.IntrinsicElements | JSXElementConstructor<any>> = JSX.LibraryManagedAttributes<C, ComponentProps<C>>;
	type ExtractDefaultProps<T> = T extends {
	    defaultProps: infer D;
	} ? D : never;
	type ExtractProps<C extends new (...args: any) => any, IT = InstanceType<C>> = IT extends Component<infer P> ? P : never;
	/**
	 * Because of how TypeScript's LibraryManagedAttributes is designed to handle defaultProps (https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-0.html#support-for-defaultprops-in-jsx)
	 * we can't directly export the props definition as the defaulted values are not made optional,
	 * because it isn't processed by LibraryManagedAttributes. To get around this, we:
	 * - remove the props which have default values applied
	 * - export (Props - Defaults) & Partial<Defaults>
	 */
	export type ApplyClassComponentDefaults<C extends new (...args: any) => any, D = ExtractDefaultProps<C>, P = ExtractProps<C>> = Omit<P, keyof D> & {
	    [K in keyof D]?: K extends keyof P ? P[K] : never;
	};
	type UnionKeys<T> = T extends any ? keyof T : never;
	export type DistributivePick<T, K extends UnionKeys<T>> = T extends any ? Pick<T, Extract<keyof T, K>> : never;
	export type DistributiveOmit<T, K extends UnionKeys<T>> = T extends any ? Omit<T, Extract<keyof T, K>> : never;
	type RecursiveDistributiveOmit<T, K extends PropertyKey> = T extends any ? T extends object ? RecursiveOmit<T, K> : T : never;
	export type RecursiveOmit<T, K extends PropertyKey> = Omit<{
	    [P in keyof T]: RecursiveDistributiveOmit<T[P], K>;
	}, K>;
	/**
	 * Returns member keys in U not present in T set to never
	 * T = { 'one', 'two', 'three' }
	 * U = { 'three', 'four', 'five' }
	 * returns { 'four': never, 'five': never }
	 */
	export type DisambiguateSet<T, U> = {
	    [P in Exclude<keyof T, keyof U>]?: never;
	};
	/**
	 * Allow either T or U, preventing any additional keys of the other type from being present
	 */
	export type ExclusiveUnion<T, U> = T | U extends object ? (DisambiguateSet<T, U> & U) | (DisambiguateSet<U, T> & T) : T | U;
	/**
	 * For components that conditionally render <button> or <a>
	 * Convenience types for extending base props (T) and
	 * element-specific props (P) with standard clickable properties
	 *
	 * These will likely be used together, along with `ExclusiveUnion`:
	 *
	 * type AnchorLike = PropsForAnchor<BaseProps>
	 * type ButtonLike = PropsForButton<BaseProps>
	 * type ComponentProps = ExclusiveUnion<AnchorLike, ButtonLike>
	 * const Component: FunctionComponent<ComponentProps> ...
	 */
	export type PropsForAnchor<T, P = {}> = T & {
	    href?: string;
	    onClick?: MouseEventHandler<HTMLAnchorElement>;
	} & AnchorHTMLAttributes<HTMLAnchorElement> & P;
	export type PropsForButton<T, P = {}> = T & {
	    onClick?: MouseEventHandler<HTMLButtonElement>;
	} & ButtonHTMLAttributes<HTMLButtonElement> & P;

}
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, type EuiThemeHighContrastMode, type EuiThemeHighContrastModeProp, } from '@elastic/eui-theme-common';

}
declare module '@elastic/eui/src/services/theme/utils' {
	export { DEFAULT_COLOR_MODE, isInverseColorMode, getColorMode, getOn, setOn, Computed, computed, getComputed, buildTheme, mergeDeep, } from '@elastic/eui-theme-common';

}
declare module '@elastic/eui/src/services/theme/context' {
	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").EuiThemeShapeBase & {
	    overrides?: import("@elastic/eui-theme-common")._EuiThemeOverrides;
	}>>;
	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>;

}
declare module '@elastic/eui/src/services/theme/warning' {
	type LEVELS = 'log' | 'warn' | 'error';
	type ProviderCallback = (message: string | Error) => void; let providerWarning: LEVELS | ProviderCallback | undefined;
	export const setEuiDevProviderWarning: (warningType: typeof providerWarning) => LEVELS | ProviderCallback | undefined;
	export const getEuiDevProviderWarning: () => LEVELS | ProviderCallback | undefined;
	export const emitEuiProviderWarning: (providerMessage: string) => void;
	export {};

}
declare module '@elastic/eui/src/services/theme/hooks' {
	import React from 'react';
	import { type EuiThemeColorModeStandard, type EuiThemeHighContrastMode, type EuiThemeModifications, type 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>;
	/**
	 * HOC for class components
	 */
	export interface WithEuiThemeProps<P extends {} = {}> {
	    theme: UseEuiTheme<P>;
	}
	export const withEuiTheme: <T extends {} = {}, U extends {} = {}>(Component: React.ComponentType<T & WithEuiThemeProps<U>>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, "theme">> & React.RefAttributes<Omit<T, "theme">>>;
	/**
	 * Render prop alternative for complex class components
	 * Most useful for scenarios where a HOC may interfere with typing
	 */
	export const RenderWithEuiTheme: <T extends {} = {}>({ children, }: {
	    children: (theme: UseEuiTheme) => React.ReactElement;
	}) => React.ReactElement<any, string | React.JSXElementConstructor<any>>;
	/**
	 * Minor syntactical sugar hook for theme CSS variables.
	 * Primarily meant for internal EUI usage.
	 */
	export const useEuiThemeCSSVariables: () => {
	    setGlobalCSSVariables: Function;
	    globalCSSVariables: import("@emotion/serialize").CSSObject | undefined;
	    setNearestThemeCSSVariables: Function;
	    themeCSSVariables: import("@emotion/serialize").CSSObject | undefined;
	};
	/**
	 * Checks whether the current active `colorMode` is set to `DARK`;
	 * In case of nested providers this returns the value of the nearest provider context.
	 */
	export const useIsDarkMode: () => boolean;

}
declare module '@elastic/eui/src/services/throttle' {
	export const throttle: (fn: (...args: any[]) => void, wait?: number) => (...args: any[]) => void;

}
declare module '@elastic/eui/src/services/breakpoint/_sorting' {
	import { _EuiThemeBreakpoints } from '@elastic/eui/src/global_styling/variables/breakpoint';
	export const sortMapByLargeToSmallValues: (breakpointsMap: _EuiThemeBreakpoints) => _EuiThemeBreakpoints;
	export const sortMapBySmallToLargeValues: (breakpointsMap: _EuiThemeBreakpoints) => _EuiThemeBreakpoints;

}
declare module '@elastic/eui/src/services/breakpoint/current_breakpoint' {
	import React, { FunctionComponent, PropsWithChildren } from 'react';
	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling/variables/breakpoint';
	type CurrentEuiBreakpoint = _EuiThemeBreakpoint | undefined;
	export const CurrentEuiBreakpointContext: React.Context<CurrentEuiBreakpoint>;
	/**
	 * Returns the current breakpoint based on window width.
	 * Typically only called by the top-level `EuiProvider` (to reduce the number
	 * of window resize listeners on the page). Also conditionally called if a
	 * nested `EuiThemeProvider` defines a `modify.breakpoint` override
	 */
	export const CurrentEuiBreakpointProvider: FunctionComponent<PropsWithChildren>;
	export {};

}
declare module '@elastic/eui/src/services/breakpoint/current_breakpoint_hook' {
	/**
	 * Hook util / syntactical sugar for useContext()
	 *
	 * This hook is in its own separate file to make mocking it
	 * as a testenv easy for Jest unit tests
	 */
	export const useCurrentEuiBreakpoint: () => string | undefined;

}
declare module '@elastic/eui/src/services/emotion/clone_element' {
	import React from 'react';
	/**
	 * React.cloneElement does not work if the cloned element does not already have the
	 * `css` prop - as a result, we need to use `jsx()` to manually clone the element
	 * See https://github.com/emotion-js/emotion/issues/1404
	 */
	export const cloneElementWithCss: (element: any, props: any, cssOrder?: "before" | "after") => React.ReactElement;

}
declare module '@elastic/eui/src/services/emotion/prefixer' {
	import { type Element } from 'stylis';
	/**
	 * This is a stylis plugin which handles auto-prefixing CSS output by Emotion.
	 *
	 * *Please note*: EUI/Elastic targets latest evergreen browsers for support only.
	 * @see https://www.elastic.co/support/matrix#matrix_browsers
	 */
	export const euiStylisPrefixer: (element: Element) => void;

}
declare module '@elastic/eui/src/services/emotion' {
	export * from '@elastic/eui/src/services/emotion/clone_element';
	export * from '@elastic/eui/src/services/emotion/prefixer';

}
declare module '@elastic/eui/src/services/emotion/css' {
	/**
	 * This custom instance is needed for internal EUI components to call
	 * `@emotion/css` with EUI's custom prefixer plugin
	 * @see https://emotion.sh/docs/@emotion/css#custom-instances
	 *
	 * NOTE: Usage is currently being beta tested internally,
	 * and is not yet intended to be a public export
	 */
	export const css: {
	    (template: TemplateStringsArray, ...args: Array<import("@emotion/serialize").CSSInterpolation>): string;
	    (...args: Array<import("@emotion/serialize").CSSInterpolation>): string;
	}, cx: (...classNames: Array<import("@emotion/css/create-instance").ClassNamesArg>) => string, cache: import("@emotion/css/create-instance").EmotionCache;

}
declare module '@elastic/eui/src/services/theme/emotion' {
	import { FunctionComponent, PropsWithChildren } from 'react';
	/**
	 * @see https://emotion.sh/docs/theming
	 * This Emotion theme provider is added for *consumer usage* & convenience only.
	 *
	 * EUI should stick to using our own context/`useEuiTheme` internally
	 * instead of Emotion's shorthand `css={theme => {}}` API. If consumers
	 * set their own theme via <ThemeProvider>; EUI's styles should continue
	 * working as-is.
	 */
	export const EuiEmotionThemeProvider: FunctionComponent<PropsWithChildren<{}>>;

}
declare module '@elastic/eui/src/services/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';
	type Refs<T> = Array<Ref<T> | MutableRefObject<T | undefined> | undefined>;
	export const useCombinedRefs: <T>(refs: Refs<T>) => (node: T) => void;
	/**
	 * Non-hook util for setting multiple refs/ref types.
	 * Useful for non-functional components
	 */
	export const setMultipleRefs: <T>(refs: Refs<T>, node: T) => void;
	export {};

}
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/useDeepEqual' {
	/**
	 * This hook is mostly a performance concern for third-party objs/arrays that EUI
	 * has no control over and may not be correctly memoized (i.e., will create a new
	 * reference on every rerender unless passed through this hook).
	 */
	export const useDeepEqual: <T = Record<string, any> | any[] | undefined>(object: T) => T;

}
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/useIsPointerDown' {
	import { type MutableRefObject } from 'react';
	/**
	 * A hook that tracks whether the pointer is currently down/pressed.
	 * Useful for detecting text selection in progress.
	 */
	export function useIsPointerDown(container?: MutableRefObject<HTMLElement | null>): MutableRefObject<boolean>;

}
declare module '@elastic/eui/src/services/hooks/useEuiDisabledElement' {
	export type EuiDisabledProps = {
	    /**
	     * Controls the disabled behavior via the native `disabled` attribute.
	     */
	    isDisabled?: boolean;
	    /**
	     * NOTE: Beta feature, may be changed or removed in the future
	     *
	     * Changes the native `disabled` attribute to `aria-disabled` to preserve focusability.
	     * This results in a semantically disabled button without the default browser handling of the disabled state.
	     *
	     * Use e.g. when a disabled button should have a tooltip.
	     */
	    hasAriaDisabled?: boolean;
	};
	type DisabledElementKeyEventHandlers = {
	    onKeyDown?: React.KeyboardEventHandler<HTMLElement>;
	    onKeyUp?: React.KeyboardEventHandler<HTMLElement>;
	    onKeyPress?: React.KeyboardEventHandler<HTMLElement>;
	};
	export type DisabledElementEventHandlers = DisabledElementKeyEventHandlers & {
	    onClick?: React.MouseEventHandler<HTMLElement>;
	    onMouseDown?: React.MouseEventHandler<HTMLElement>;
	    onMouseUp?: React.MouseEventHandler<HTMLElement>;
	    onMouseEnter?: React.MouseEventHandler<HTMLElement>;
	    onMouseLeave?: React.MouseEventHandler<HTMLElement>;
	    onMouseOut?: React.MouseEventHandler<HTMLElement>;
	    onMouseMove?: React.MouseEventHandler<HTMLElement>;
	    onMouseOver?: React.MouseEventHandler<HTMLElement>;
	    onPointerDown?: React.PointerEventHandler<HTMLElement>;
	    onPointerUp?: React.PointerEventHandler<HTMLElement>;
	    onPointerEnter?: React.PointerEventHandler<HTMLElement>;
	    onPointerLeave?: React.PointerEventHandler<HTMLElement>;
	    onPointerMove?: React.PointerEventHandler<HTMLElement>;
	    onPointerOver?: React.PointerEventHandler<HTMLElement>;
	    onTouchStart?: React.TouchEventHandler<HTMLElement>;
	    onTouchEnd?: React.TouchEventHandler<HTMLElement>;
	    onTouchMove?: React.TouchEventHandler<HTMLElement>;
	    onSubmit?: React.FormEventHandler<HTMLElement>;
	};
	type DisabledElementProps<T extends HTMLElement> = {
	    ref: React.Ref<T>;
	    disabled?: boolean;
	};
	type AriaDisabledElementProps<T extends HTMLElement> = DisabledElementEventHandlers & DisabledElementProps<T> & {
	    ref: React.Ref<T>;
	    'aria-disabled'?: boolean;
	};
	type EuiDisabledElementArgs = EuiDisabledProps & DisabledElementKeyEventHandlers;
	/**
	 * NOTE: Beta feature, may be changed or removed in the future
	 *
	 * Utility to apply either the native or a custom semantic disabled state.
	 *
	 * It applies `aria-disabled` instead of `disabled`  when `hasAriaDisabled=true`
	 * to ensure the element is semantically disabled while still focusable.
	 *
	 * It mimics the native `disabled` behavior by removing any programmatic mouse, pointer, touch
	 * or keyboard event handler but it differs to the native `disabled` behavior in that it preserves
	 * the focus, blur and tabIndex behavior.
	 */
	export const useEuiDisabledElement: <T extends HTMLElement>({ isDisabled, hasAriaDisabled, onKeyDown, onKeyUp, onKeyPress, }: EuiDisabledElementArgs) => DisabledElementProps<T> | AriaDisabledElementProps<T>;
	export {};

}
declare module '@elastic/eui/src/services/hooks' {
	export { useDependentState } from '@elastic/eui/src/services/hooks/useDependentState';
	export { useCombinedRefs, setMultipleRefs } from '@elastic/eui/src/services/hooks/useCombinedRefs';
	export { useForceRender } from '@elastic/eui/src/services/hooks/useForceRender';
	export { useLatest } from '@elastic/eui/src/services/hooks/useLatest';
	export { useDeepEqual } from '@elastic/eui/src/services/hooks/useDeepEqual';
	export { isMouseEvent, useMouseMove } from '@elastic/eui/src/services/hooks/useMouseMove';
	export { useIsPointerDown } from '@elastic/eui/src/services/hooks/useIsPointerDown';
	export { useUpdateEffect } from '@elastic/eui/src/services/hooks/useUpdateEffect';
	export { type EuiDisabledProps, useEuiDisabledElement, } from '@elastic/eui/src/services/hooks/useEuiDisabledElement';

}
declare module '@elastic/eui/src/services/theme/style_memoization' {
	import React, { FunctionComponent, PropsWithChildren } from 'react';
	import { UseEuiTheme } from '@elastic/eui/src/services/theme/hooks';
	type StylesMap = Record<string, any>;
	type MemoizedStylesMap = WeakMap<Function, StylesMap>;
	export const EuiThemeMemoizedStylesContext: React.Context<MemoizedStylesMap>;
	export const EuiThemeMemoizedStylesProvider: FunctionComponent<PropsWithChildren>;
	/**
	 * Hook that memoizes the returned values of components style fns/generators
	 * per-theme
	 */
	export const useEuiMemoizedStyles: <T extends (theme: UseEuiTheme) => StylesMap>(stylesGenerator: T) => ReturnType<T>;
	/**
	 * HOC for class components
	 * Syntax is mostly copied from withEuiTheme HOC
	 */
	export interface WithEuiStylesMemoizerProps {
	    stylesMemoizer: typeof useEuiMemoizedStyles;
	}
	export const withEuiStylesMemoizer: <T extends {} = {}>(Component: React.ComponentType<T & WithEuiStylesMemoizerProps>) => React.ForwardRefExoticComponent<React.PropsWithoutRef<Omit<T, "stylesMemoizer">> & React.RefAttributes<Omit<T, "stylesMemoizer">>>;
	/**
	 * Render prop alternative for complex class components
	 * Most useful for scenarios where a HOC may interfere with typing
	 */
	export const RenderWithEuiStylesMemoizer: ({ children, }: {
	    children: (stylesMemoizer: typeof useEuiMemoizedStyles) => React.ReactElement;
	}) => 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").EuiThemeShapeBase & {
	    overrides?: import("@elastic/eui-theme-common")._EuiThemeOverrides;
	}> | {
	    colors: {
	        LIGHT: {
	            borderBasePrimary: string;
	            borderBaseAccent: string;
	            borderBaseAccentSecondary: string;
	            borderBaseNeutral: string;
	            borderBaseSuccess: string;
	            borderBaseWarning: string;
	            borderBaseRisk: string;
	            borderBaseDanger: string;
	            borderBasePlain: string;
	            borderBaseSubdued: string;
	            borderBaseProminent: string;
	            borderBaseDisabled: string;
	            borderBaseFloating: string;
	            borderStrongPrimary: string;
	            borderStrongAccent: string;
	            borderStrongAccentSecondary: string;
	            borderStrongNeutral: string;
	            borderStrongSuccess: string;
	            borderStrongWarning: string;
	            borderStrongRisk: string;
	            borderStrongDanger: string;
	        };
	        DARK: {
	            borderBasePrimary: string;
	            borderBaseAccent: string;
	            borderBaseAccentSecondary: string;
	            borderBaseNeutral: string;
	            borderBaseSuccess: string;
	            borderBaseWarning: string;
	            borderBaseRisk: string;
	            borderBaseDanger: string;
	            borderBasePlain: string;
	            borderBaseSubdued: string;
	            borderBaseProminent: string;
	            borderBaseDisabled: string;
	            borderBaseFloating: string;
	            borderStrongPrimary: string;
	            borderStrongAccent: string;
	            borderStrongAccentSecondary: string;
	            borderStrongNeutral: string;
	            borderStrongSuccess: string;
	            borderStrongWarning: string;
	            borderStrongRisk: 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;
	    shadows?: import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common")._EuiThemeShadows> | 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").EuiThemeVariantFlags> | undefined;
	    overrides?: import("@elastic/eui-theme-common").RecursivePartial<import("@elastic/eui-theme-common")._EuiThemeOverrides | undefined>;
	};

}
declare module '@elastic/eui/src/services/color/is_color_dark' {
	/**
	 * This function calculates if the specified color is "dark", which usually means
	 * you need light text if you use it as a background color to fulfill WCAG contrast
	 * requirement.
	 * The color must be specified via its red, green and blue value in the range of
	 * 0 to 255.
	 * The formula is based on this Stackoverflow answer: https://stackoverflow.com/a/3943023
	 * which itself is based upon the WCAG recommendation for color contrast.
	 *
	 * @param {number} red The red component in the range 0 to 255
	 * @param {number} green The green component in the range 0 to 255
	 * @param {number} blue The blue component in the range 0 to 255
	 * @returns {boolean} True if the color is dark, false otherwise.
	 */
	export function isColorDark(red: number, green: number, blue: number): boolean;

}
declare module '@elastic/eui/src/services/color/is_valid_hex' {
	export function isValidHex(hex: string): boolean;

}
declare module '@elastic/eui/src/services/color/color_types' {
	export type rgbDef = [number, number, number];
	export interface HSV {
	    h: number;
	    s: number;
	    v: number;
	}
	export interface RGB {
	    r: number;
	    g: number;
	    b: number;
	}
	export type HEX = string;

}
declare module '@elastic/eui/src/services/color/hex_to_rgb' {
	import { rgbDef } from '@elastic/eui/src/services/color/color_types';
	export function hexToRgb(hex: string): rgbDef;

}
declare module '@elastic/eui/src/services/color/rgb_to_hsv' {
	import { HSV, RGB } from '@elastic/eui/src/services/color/color_types';
	export function rgbToHsv({ r, g, b }: RGB): HSV;

}
declare module '@elastic/eui/src/services/color/hex_to_hsv' {
	import { HEX, HSV } from '@elastic/eui/src/services/color/color_types';
	export function hexToHsv(hex: HEX): HSV;

}
declare module '@elastic/eui/src/services/color/hsv_to_rgb' {
	import { HSV, RGB } from '@elastic/eui/src/services/color/color_types';
	export function hsvToRgb({ h, s, v }: HSV): RGB;

}
declare module '@elastic/eui/src/services/color/rgb_to_hex' {
	export function rgbToHex(rgb: string): string;

}
declare module '@elastic/eui/src/services/color/hsv_to_hex' {
	import { HEX, HSV } from '@elastic/eui/src/services/color/color_types';
	export function hsvToHex({ h, s, v }: HSV): HEX;

}
declare module '@elastic/eui/src/services/color/luminance_and_contrast' {
	import { rgbDef } from '@elastic/eui/src/services/color/color_types';
	export function calculateLuminance(r: number, g: number, b: number): number;
	export function calculateContrast(rgb1: rgbDef, rgb2: rgbDef): number;

}
declare module '@elastic/eui/src/services/color/color_palette' {
	export const MID_COLOR_STOP = "#EBEFF5";
	/**
	 * This function takes an array of colors and returns an array of interpolated
	 * colors based on the number of steps/len needed for use in UI elements such as charts.
	 * Derived from https://github.com/gka/palettes (Unlicensed)
	 */
	export function colorPalette(
	/**
	 * The main color code or array of codes
	 */
	colors: string[], 
	/**
	 * The number of colors in the resulting array (default 10)
	 */
	len?: number, 
	/**
	 * Forces color interpolation to be calculated separately for each half (default false)
	 */
	diverging?: boolean, 
	/**
	 * Uses a more static interpolation for non-continuous spectrums
	 */
	categorical?: boolean): string[];

}
declare module '@elastic/eui/src/services/color/vis_color_store' {
	import { _EuiVisColorStore } from '@elastic/eui-theme-common';
	export const EUI_VIS_COLOR_STORE: _EuiVisColorStore;

}
declare module '@elastic/eui/src/services/color/eui_palettes' {
	import { _EuiThemeVisColors } from '@elastic/eui-theme-common';
	export type EuiPalette = string[];
	export type EuiPaletteCommonProps = {
	    /**
	     * Defines the default set of colors the palette uses.
	     * Defaults to vis colors from `EUI_VIS_COLOR_STORE`.
	     * Use this to specify colors when you can't rely on the EuiProvider updates.
	     */
	    colors?: _EuiThemeVisColors;
	};
	export type EuiPaletteRotationProps = {
	    /**
	     * 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 type EuiPaletteColorBlindProps = EuiPaletteCommonProps & EuiPaletteRotationProps;
	/**
	 * For usage in React use the `useEuiPaletteColorBlind` hook instead.
	 *
	 * NOTE: These functions rely on base vis colors of the theme which are provided via a global
	 * singleton instance `EUI_VIS_COLOR_STORE` that's updated by the EuiProvider on theme change.
	 * Make sure the function is recalled on theme change to retrieve theme-related colors.
	 *
	 * Outside of a react component you can use the `subscibe()` method on the `EUI_VIS_COLOR_STORE`
	 * to subscribe to updates and update your usages to ensure latest colors are loaded.
	 */
	export const euiPaletteColorBlind: ({ rotations, order, direction, sortBy, sortShift, colors, }?: EuiPaletteColorBlindProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteColorBlindBehindText` hook instead.
	 *
	 * 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.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteColorBlindBehindText: (paletteProps?: EuiPaletteColorBlindProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteForStatus` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteForStatus: (steps: number, { colors }?: EuiPaletteCommonProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteForTemperature` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteForTemperature: (steps: any, { colors }?: EuiPaletteCommonProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteComplementary` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteComplementary: (steps: number, { colors }?: EuiPaletteCommonProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteRed` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteRed: (steps: number, { colors }?: EuiPaletteCommonProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteGreen` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteGreen: (steps: number, { colors }?: EuiPaletteCommonProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteSkyBlue` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteSkyBlue: (steps: number, { colors }?: EuiPaletteCommonProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteYellow` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteYellow: (steps: number, { colors }?: EuiPaletteCommonProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteOrange` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteOrange: (steps: number, { colors }?: EuiPaletteCommonProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteCool` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteCool: (steps: number, { colors }?: EuiPaletteCommonProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteWarm` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteWarm: (steps: number, { colors }?: EuiPaletteCommonProps) => EuiPalette;
	/**
	 * For usage in React use the `useEuiPaletteGray` hook instead.
	 *
	 * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
	 * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
	 */
	export const euiPaletteGray: (steps: number, { colors }?: EuiPaletteCommonProps) => EuiPalette;

}
declare module '@elastic/eui/src/services/color/visualization_colors' {
	/** @deprecated - use the data vis colors on `euiTheme.colors.vis` instead */
	export const VISUALIZATION_COLORS: import ("@elastic/eui/src/services/color/eui_palettes").EuiPalette;
	/** @deprecated - use the data vis colors on `euiTheme.colors.vis` instead */
	export const DEFAULT_VISUALIZATION_COLOR: string;

}
declare module '@elastic/eui/src/services/color/eui_palettes_hooks' {
	import { EuiPalette, EuiPaletteColorBlindProps } from '@elastic/eui/src/services/color/eui_palettes';
	export const useEuiPaletteColorBlind: (args?: EuiPaletteColorBlindProps) => EuiPalette;
	export const useEuiPaletteColorBlindBehindText: (args?: EuiPaletteColorBlindProps) => EuiPalette;
	export const useEuiPaletteForStatus: (steps: number) => EuiPalette;
	export const useEuiPaletteForTemperature: (steps: number) => EuiPalette;
	export const useEuiPaletteComplementary: (steps: number) => EuiPalette;
	export const useEuiPaletteRed: (steps: number) => EuiPalette;
	export const useEuiPaletteGreen: (steps: number) => EuiPalette;
	export const useEuiPaletteSkyBlue: (steps: number) => EuiPalette;
	export const useEuiPaletteYellow: (steps: number) => EuiPalette;
	export const useEuiPaletteOrange: (steps: number) => EuiPalette;
	export const useEuiPaletteCool: (steps: number) => EuiPalette;
	export const useEuiPaletteWarm: (steps: number) => EuiPalette;
	export const useEuiPaletteGray: (steps: number) => EuiPalette;

}
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';
	/**
	 * EUI utilizes logical CSS properties to enable directional writing-modes.
	 * To encourage use of logical properties, we provide a few helper utilities to
	 * convert certain directional properties to logical properties.
	 * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Logical_Properties
	 */
	export const logicalSide: {
	    left: string;
	    right: string;
	    top: string;
	    bottom: string;
	    horizontal: string;
	    vertical: string;
	};
	export const LOGICAL_SIDES: ("left" | "right" | "top" | "bottom" | "horizontal" | "vertical")[];
	export type LogicalSides = (typeof LOGICAL_SIDES)[number];
	export const logicals: {
	    height: string;
	    width: string;
	    "max-height": string;
	    "max-width": string;
	    "min-height": string;
	    "min-width": string;
	    top: string;
	    right: string;
	    bottom: string;
	    left: string;
	    horizontal: string;
	    vertical: string;
	    "margin-left": string;
	    "margin-right": string;
	    "margin-top": string;
	    "margin-bottom": string;
	    "margin-horizontal": string;
	    "margin-vertical": string;
	    "padding-left": string;
	    "padding-right": string;
	    "padding-top": string;
	    "padding-bottom": string;
	    "padding-horizontal": string;
	    "padding-vertical": string;
	    "overflow-x": string;
	    "overflow-y": string;
	    "border-horizontal": string;
	    "border-horizontal-color": string;
	    "border-horizontal-width": string;
	    "border-horizontal-style": string;
	    "border-vertical": string;
	    "border-vertical-color": string;
	    "border-vertical-width": string;
	    "border-vertical-style": string;
	    "border-bottom": string;
	    "border-bottom-color": string;
	    "border-bottom-style": string;
	    "border-bottom-width": string;
	    "border-top": string;
	    "border-top-color": string;
	    "border-top-style": string;
	    "border-top-width": string;
	    "border-right": string;
	    "border-right-color": string;
	    "border-right-style": string;
	    "border-right-width": string;
	    "border-left": string;
	    "border-left-color": string;
	    "border-left-style": string;
	    "border-left-width": string;
	    "border-top-left-radius": string;
	    "border-top-right-radius": string;
	    "border-bottom-left-radius": string;
	    "border-bottom-right-radius": string;
	    _shorthands: string[];
	};
	export const LOGICAL_PROPERTIES: ("left" | "right" | "width" | "top" | "bottom" | "horizontal" | "vertical" | "height" | "max-height" | "max-width" | "min-height" | "min-width" | "margin-left" | "margin-right" | "margin-top" | "margin-bottom" | "margin-horizontal" | "margin-vertical" | "padding-left" | "padding-right" | "padding-top" | "padding-bottom" | "padding-horizontal" | "padding-vertical" | "overflow-x" | "overflow-y" | "border-horizontal" | "border-horizontal-color" | "border-horizontal-width" | "border-horizontal-style" | "border-vertical" | "border-vertical-color" | "border-vertical-width" | "border-vertical-style" | "border-bottom" | "border-bottom-color" | "border-bottom-style" | "border-bottom-width" | "border-top" | "border-top-color" | "border-top-style" | "border-top-width" | "border-right" | "border-right-color" | "border-right-style" | "border-right-width" | "border-left" | "border-left-color" | "border-left-style" | "border-left-width" | "border-top-left-radius" | "border-top-right-radius" | "border-bottom-left-radius" | "border-bottom-right-radius")[];
	export type LogicalProperties = (typeof LOGICAL_PROPERTIES)[number];
	/**
	 *
	 * @param property A string that is a valid CSS logical property
	 * @param value String to output as the property value
	 * @returns `string` Returns the logical CSS property version for the given `property: value` pair
	 */
	export const logicalCSS: (property: LogicalProperties, value?: any) => string;
	/**
	 * Some logical properties are not yet fully supported by all browsers.
	 * For those cases, we should use the old property as a fallback for
	 * browsers missing support, while allowing supporting browsers to use
	 * the logical properties.
	 *
	 * Examples:
	 * https://caniuse.com/?search=overflow-block
	 * https://caniuse.com/mdn-css_properties_float_flow_relative_values
	 */
	export const logicalCSSWithFallback: (property: LogicalProperties, value?: any) => string;
	/**
	 *
	 * @param property A string that is a valid CSS logical property
	 * @param value String to output as the property value
	 * @returns `object` Returns the logical CSS property version for the given `property: value` pair
	 */
	export const logicalStyle: (property: LogicalProperties, value?: any) => {
	    [x: string]: any;
	};
	/**
	 * Given a style object with any amount of unknown CSS properties,
	 * find ones that can be converted to logical properties and convert them
	 *
	 * @param styleObject - A React object of camelCased styles
	 * @returns `object`
	 */
	export const logicalStyles: (styleObject: CSSProperties) => Record<string, string | number | undefined>;
	/**
	 *
	 * @param width A string value for the LTR width
	 * @param height A string value for the LTR height
	 * @returns `string` Returns the logical CSS properties for height and width
	 */
	export const logicalSizeCSS: (width: any, height?: any) => string;
	/**
	 *
	 * @param width A string value for the LTR width
	 * @param height A string value for the LTR height
	 * @returns `object` Returns the logical CSS properties for height and width
	 */
	export const logicalSizeStyle: (width: any, height: any) => {
	    [x: string]: any;
	};
	export const logicalText: {
	    'text-align': {
	        left: string;
	        center: string;
	        right: string;
	    };
	};
	export const LOGICAL_TEXT_ALIGNMENT: ("left" | "right" | "center")[];
	export type LogicalText = (typeof LOGICAL_TEXT_ALIGNMENT)[number];
	/**
	 *
	 * @param property A string that is a valid CSS logical property
	 * @param value String to output as the property value
	 * @returns `string` Returns the logical CSS property version for the given `property: value` pair
	 */
	export const logicalTextAlignCSS: (value: LogicalText) => string;
	/**
	 *
	 * @param property A string that is a valid CSS logical property
	 * @param value String to output as the property value
	 * @returns `object` Returns the logical CSS property version for the given `property: value` pair
	 */
	export const logicalTextAlignStyle: (value: LogicalText) => {
	    textAlign: string;
	};

}
declare module '@elastic/eui/src/global_styling/functions/logical_shorthands' {
	export const LOGICAL_SHORTHANDS: string[];
	export type LogicalShorthands = (typeof LOGICAL_SHORTHANDS)[number];
	/**
	 * Unfortunately, shorthand properties that describe boxes
	 * (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#edges_of_a_box)
	 * do not currently automatically respond to logical changes in display direction
	 * (@see https://github.com/w3c/csswg-drafts/issues/1282)
	 *
	 * This utility is essentially a stop-gap for those shorthand properties,
	 * converting them to corresponding longer logical `-inline` and `-block` properties
	 *
	 * 🗑 NOTE: This file is in a separate util file from logicals.ts due to its relatively
	 * convoluted logic, & to make deleting it easier when an official CSS spec is implemented.
	 */
	export const logicalShorthandCSS: (property: LogicalShorthands, value: string | number) => string;
	/**
	 * Logical border radius is unfortunately a very special case as it handles corners
	 * and not sides (@see https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties#corners_of_a_box)
	 * and does not have `-inline` or `-block` shorthands.
	 *
	 * It also needs to account for `/` syntax (horizontal vs vertical radii)
	 * @see https://www.sitepoint.com/setting-css3-border-radius-with-slash-syntax/
	 */
	export const logicalBorderRadiusCSS: (value: string, ignoreZeroes?: boolean) => string;

}
declare module '@elastic/eui/src/global_styling/functions/math' {
	export { mathWithUnits } from '@elastic/eui-theme-common';

}
declare module '@elastic/eui/src/global_styling/functions/size' {
	export { sizeToPixel } from '@elastic/eui-theme-common';

}
declare module '@elastic/eui/src/global_styling/variables/typography' {
	export { EuiThemeFontUnits, EuiThemeFontScales, EuiThemeFontWeights, type _EuiThemeFontUnit, type _EuiThemeFontScale, type _EuiThemeFontScales, type _EuiThemeFontBase, type _EuiThemeFontWeight, type _EuiThemeFontWeights, type _EuiThemeBody, type _EuiThemeTitle, type _EuiThemeFont, } from '@elastic/eui-theme-common';

}
declare module '@elastic/eui/src/global_styling/functions/typography' {
	import { _EuiThemeFontScale, _EuiThemeFontUnit, _EuiThemeFontWeights } from '@elastic/eui/src/global_styling/variables/typography';