@elastic/eui 112.3.0 → 113.0.0

package/eui.d.ts

@@ -1210,6 +1210,7 @@ declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	 * @returns An object of `_EuiExtendedButtonColor` keys including `disabled`
 	 */
 	export const useEuiButtonColorCSS: (options?: _EuiButtonOptions) => Record<"text" | "primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "disabled" | "neutral" | "risk", SerializedStyles>;
+	export const euiButtonDisplaysColors: (euiThemeContext: UseEuiTheme) => Record<"base" | "fill" | "empty", Record<"text" | "primary" | "accent" | "accentSecondary" | "success" | "warning" | "danger" | "disabled" | "neutral" | "risk", SerializedStyles>>;
 	/**
 	 * Creates the translate animation when button is in focus.
 	 * @returns string
@@ -1223,18 +1224,21 @@ declare module '@elastic/eui/src/global_styling/mixins/_button' {
 	    xs: {
 	        minWidth: number;
 	        height: string;
+	        padding: string;
 	        radius: import("csstype").Property.BorderRadius<string | number> | undefined;
 	        fontScale: "xs";
 	    };
 	    s: {
 	        minWidth: number;
 	        height: string;
+	        padding: string;
 	        radius: import("csstype").Property.BorderRadius<string | number> | undefined;
 	        fontScale: "s";
 	    };
 	    m: {
 	        minWidth: number;
 	        height: string;
+	        padding: string;
 	        radius: import("csstype").Property.BorderRadius<string | number> | undefined;
 	        fontScale: "s";
 	    };
@@ -10020,6 +10024,11 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	import { UseEuiTheme } from '@elastic/eui/src/services';
 	export const euiButtonDisplayContentStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiButtonDisplayContent: import("@emotion/react").SerializedStyles;
+	    content: {
+	        xs: import("@emotion/react").SerializedStyles;
+	        s: import("@emotion/react").SerializedStyles;
+	        m: import("@emotion/react").SerializedStyles;
+	    };
 	};
 
 }
@@ -10027,6 +10036,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	import { HTMLAttributes, FunctionComponent, Ref } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { IconType } from '@elastic/eui/src/components/icon';
+	import { EuiButtonDisplaySizes } from '@elastic/eui/src/components/button/button_display/_button_display';
 	export const ICON_SIZES: readonly ["s", "m"];
 	export type ButtonContentIconSize = (typeof ICON_SIZES)[number];
 	export const ICON_SIDES: readonly ["left", "right"];
@@ -10037,6 +10047,7 @@ declare module '@elastic/eui/src/components/button/button_display/_button_displa
 	 * This component is simply a helper component for reuse within other button components.
 	 */
 	export interface EuiButtonDisplayContentProps extends CommonProps {
+	    size?: EuiButtonDisplaySizes;
 	    /**
 	     * Any `type` accepted by EuiIcon
 	     */
@@ -10412,6 +10423,8 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	    controlLayoutGroupInputHeight: string;
 	    controlLayoutGroupInputCompressedHeight: string;
 	    controlLayoutGroupInputCompressedBorderRadius: import("csstype").Property.BorderRadius<string | number> | undefined;
+	    controlLayoutBorderRadius: import("csstype").Property.BorderRadius<string | number> | undefined;
+	    controlLayoutInnerBorderRadius: string;
 	    controlIconSize: {
 	        s: string;
 	        m: string;
@@ -10424,15 +10437,19 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	    backgroundColor: string;
 	    backgroundDisabledColor: string;
 	    backgroundReadOnlyColor: string;
+	    backgroundAutoFilled: string;
 	    borderColor: string;
 	    borderHovered: string;
 	    borderFocused: string;
 	    borderInvalid: string;
 	    borderInvalidHovered: string;
+	    borderAutofilled: string;
+	    borderAutofilledHovered: string;
 	    controlDisabledColor: string;
 	    controlBoxShadow: string;
 	    controlPlaceholderText: string;
 	    appendPrependBackground: string;
+	    labelColor: string;
 	    maxWidth: string;
 	    controlHeight: string;
 	    controlCompressedHeight: string;
@@ -10471,6 +10488,7 @@ declare module '@elastic/eui/src/components/form/form.styles' {
 	export const euiFormControlDisabledStyles: (euiThemeContext: UseEuiTheme) => string;
 	export const euiFormControlReadOnlyStyles: (euiThemeContext: UseEuiTheme) => string;
 	export const euiFormControlAutoFillStyles: (euiThemeContext: UseEuiTheme) => string;
+	export const euiFormControlAutofillUnsetStyles = "\n\n";
 	export const euiFormControlShowBackgroundLine: (euiThemeContext: UseEuiTheme, color: string) => string;
 	/**
 	 * Selection custom controls - checkboxes, radios, and switches
@@ -10544,7 +10562,7 @@ declare module '@elastic/eui/src/components/button/button_group/button_group' {
 	import { _EuiButtonColor } from '@elastic/eui/src/global_styling/mixins';
 	import { EuiToolTipProps } from '@elastic/eui/src/components/tool_tip';
 	import { EuiButtonDisplayContentProps } from '@elastic/eui/src/components/button/button_display/_button_display_content';
-	export interface EuiButtonGroupOptionProps extends EuiButtonDisplayContentProps, CommonProps, EuiDisabledProps {
+	export interface EuiButtonGroupOptionProps extends Omit<EuiButtonDisplayContentProps, 'size'>, CommonProps, EuiDisabledProps {
 	    /**
 	     * Each option must have a unique `id` for maintaining selection
 	     */
@@ -12134,6 +12152,7 @@ declare module '@elastic/eui/src/components/flyout/manager/types' {
 	    dispatch: (action: Action) => void;
 	    addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string) => void;
 	    closeFlyout: (flyoutId: string) => void;
+	    closeAllFlyouts: () => void;
 	    setActiveFlyout: (flyoutId: string | null) => void;
 	    setFlyoutWidth: (flyoutId: string, width: number) => void;
 	    setPushPadding: (side: 'left' | 'right', width: number) => void;
@@ -12157,6 +12176,8 @@ declare module '@elastic/eui/src/components/flyout/manager/actions' {
 	export const ACTION_ADD: "eui/flyoutManager/add";
 	/** Dispatched to remove a flyout from the manager (usually on close/unmount). */
 	export const ACTION_CLOSE: "eui/flyoutManager/close";
+	/** Dispatched to remove all flyouts from the manager. */
+	export const ACTION_CLOSE_ALL: "eui/flyoutManager/closeAll";
 	/** Dispatched to set which flyout is currently active within the session. */
 	export const ACTION_SET_ACTIVE: "eui/flyoutManager/setActive";
 	/** Dispatched when an active flyout's pixel width changes (for responsive layout). */
@@ -12189,6 +12210,10 @@ declare module '@elastic/eui/src/components/flyout/manager/actions' {
 	    type: typeof ACTION_CLOSE;
 	    flyoutId: string;
 	}
+	/** Remove all flyouts from manager state. */
+	export interface CloseAllFlyoutsAction extends BaseAction {
+	    type: typeof ACTION_CLOSE_ALL;
+	}
 	/** Set the active flyout within the current session (or clear with `null`). */
 	export interface SetActiveFlyoutAction extends BaseAction {
 	    type: typeof ACTION_SET_ACTIVE;
@@ -12235,7 +12260,7 @@ declare module '@elastic/eui/src/components/flyout/manager/actions' {
 	    flyoutId: string;
 	}
 	/** Union of all flyout manager actions. */
-	export type Action = AddFlyoutAction | CloseFlyoutAction | SetActiveFlyoutAction | SetWidthAction | SetLayoutModeAction | SetActivityStageAction | GoBackAction | GoToFlyoutAction | SetPushPaddingAction | AddUnmanagedFlyoutAction | CloseUnmanagedFlyoutAction;
+	export type Action = AddFlyoutAction | CloseFlyoutAction | CloseAllFlyoutsAction | SetActiveFlyoutAction | SetWidthAction | SetLayoutModeAction | SetActivityStageAction | GoBackAction | GoToFlyoutAction | SetPushPaddingAction | AddUnmanagedFlyoutAction | CloseUnmanagedFlyoutAction;
 	/**
 	 * Register a flyout with the manager.
 	 * - `title` is used for the flyout menu.
@@ -12245,6 +12270,8 @@ declare module '@elastic/eui/src/components/flyout/manager/actions' {
 	export const addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string) => AddFlyoutAction;
 	/** Unregister a flyout and update the session accordingly. */
 	export const closeFlyout: (flyoutId: string) => CloseFlyoutAction;
+	/** Unregister all flyouts. */
+	export const closeAllFlyouts: () => CloseAllFlyoutsAction;
 	/** Set or clear the active flyout for the current session. */
 	export const setActiveFlyout: (flyoutId: string | null) => SetActiveFlyoutAction;
 	/** Record a flyout's current width in pixels. */
@@ -12298,6 +12325,7 @@ declare module '@elastic/eui/src/components/flyout/manager/store' {
 	    dispatch: (action: Action) => void;
 	    addFlyout: (flyoutId: string, title: string, level?: EuiFlyoutLevel, size?: string) => void;
 	    closeFlyout: (flyoutId: string) => void;
+	    closeAllFlyouts: () => void;
 	    setActiveFlyout: (flyoutId: string | null) => void;
 	    setFlyoutWidth: (flyoutId: string, width: number) => void;
 	    setPushPadding: (side: 'left' | 'right', width: number) => void;
@@ -13109,7 +13137,7 @@ declare module '@elastic/eui/src/components/flyout/manager' {
 	/**
 	 * Convenience re-exports of bound action creators for external usage.
 	 */
-	export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPushPadding as setPushPaddingAction, setActivityStage as setActivityStageAction, } from '@elastic/eui/src/components/flyout/manager/actions';
+	export { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, closeAllFlyouts as closeAllFlyoutsAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPushPadding as setPushPaddingAction, setActivityStage as setActivityStageAction, } from '@elastic/eui/src/components/flyout/manager/actions';
 	/** Reducer and default state for the flyout manager. */
 	export { flyoutManagerReducer, initialState } from '@elastic/eui/src/components/flyout/manager/reducer';
 	/** Flyout manager store singleton and types. */
@@ -14141,7 +14169,7 @@ declare module '@elastic/eui/src/components/flyout/flyout_body.styles' {
 
 }
 declare module '@elastic/eui/src/components/flyout/flyout_body' {
-	import { FunctionComponent, HTMLAttributes, ReactNode } from 'react';
+	import { FunctionComponent, HTMLAttributes, ReactNode, Ref } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export type EuiFlyoutBodyProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps & {
 	    /**
@@ -14158,6 +14186,10 @@ declare module '@elastic/eui/src/components/flyout/flyout_body' {
 	     * to override this default.
 	     */
 	    scrollableTabIndex?: number;
+	    /**
+	     * Use to access the flyout's internal scrollable container.
+	     */
+	    scrollContainerRef?: Ref<HTMLDivElement>;
 	}>;
 	export const EuiFlyoutBody: EuiFlyoutBodyProps;
 
@@ -14845,7 +14877,7 @@ declare module '@elastic/eui/src/components/form/form_label/form_label' {
 	     * Default type is a `label` but can be changed to a `legend`
 	     * if using inside a `fieldset`.
 	     */
-	    type?: 'label' | 'legend';
+	    type?: 'label' | 'legend' | 'span';
 	}
 	export type _EuiFormLabelProps = {
 	    type?: 'label';
@@ -14853,7 +14885,10 @@ declare module '@elastic/eui/src/components/form/form_label/form_label' {
 	export type _EuiFormLegendProps = {
 	    type: 'legend';
 	} & EuiFormLabelCommonProps & CommonProps & HTMLAttributes<HTMLLegendElement>;
-	export type EuiFormLabelProps = ExclusiveUnion<_EuiFormLabelProps, _EuiFormLegendProps>;
+	export type _EuiFormLabelSpanProps = {
+	    type: 'span';
+	} & EuiFormLabelCommonProps & CommonProps & HTMLAttributes<HTMLSpanElement>;
+	export type EuiFormLabelProps = ExclusiveUnion<ExclusiveUnion<_EuiFormLabelProps, _EuiFormLegendProps>, _EuiFormLabelSpanProps>;
 	export const EuiFormLabel: FunctionComponent<EuiFormLabelProps>;
 	export {};
 
@@ -14990,6 +15025,9 @@ declare module '@elastic/eui/src/components/form/form_control_layout/_num_icons'
 }
 declare module '@elastic/eui/src/components/form/form_control_layout/form_control_layout.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const buttonSelector = "*:is(.euiButton, .euiButtonEmpty, .euiButtonIcon, .euiFormAppend, .euiFormPrepend)";
+	export const textSelector = "*:is(.euiFormLabel, .euiText)";
+	export const appendPrependSelector = "*:is(.euiFormAppend, .euiFormPrepend)";
 	export const euiFormControlLayoutStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiFormControlLayout: import("@emotion/react").SerializedStyles;
 	    uncompressed: string;
@@ -15004,17 +15042,104 @@ declare module '@elastic/eui/src/components/form/form_control_layout/form_contro
 	    children: {
 	        euiFormControlLayout__childrenWrapper: import("@emotion/react").SerializedStyles;
 	        inGroup: import("@emotion/react").SerializedStyles;
-	        prependOnly: import("@emotion/react").SerializedStyles;
-	        appendOnly: import("@emotion/react").SerializedStyles;
 	    };
 	};
 	export const euiFormControlLayoutSideNodeStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiFormControlLayout__side: import("@emotion/react").SerializedStyles;
-	    append: import("@emotion/react").SerializedStyles;
-	    prepend: import("@emotion/react").SerializedStyles;
-	    uncompressed: string;
+	    uncompressed: {
+	        uncompressed: string;
+	        append: string;
+	        prepend: string;
+	    };
+	    compressed: {
+	        compressed: import("@emotion/react").SerializedStyles;
+	        append: string;
+	        prepend: string;
+	    };
+	    disabled: import("@emotion/react").SerializedStyles;
+	    readOnly: import("@emotion/react").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles' {
+	import { UseEuiTheme } from '@elastic/eui-theme-common';
+	export const euiFormAppendPrependStyles: (euiThemeContext: UseEuiTheme) => {
+	    side: import("@emotion/react").SerializedStyles;
+	    uncompressed: import("@emotion/react").SerializedStyles;
 	    compressed: import("@emotion/react").SerializedStyles;
+	    wrapper: import("@emotion/react").SerializedStyles;
+	    isInteractive: import("@emotion/react").SerializedStyles;
+	    disabled: import("@emotion/react").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/form/form_control_layout/form_control_layout_context' {
+	import { EuiFormControlLayoutProps } from '@elastic/eui/src/components/form/form_control_layout/form_control_layout';
+	type FormControlLayoutContext = Pick<EuiFormControlLayoutProps, 'compressed' | 'inputId' | 'isDisabled' | 'isInvalid' | 'readOnly' | 'isLoading'>;
+	/**
+	 * Context to share props between `EuiFormControlLayout` and passed children like e.g. EuiFormAppend/Prepend
+	 */
+	export const EuiFormControlLayoutContext: import("react").Context<FormControlLayoutContext>;
+	export const EuiFormControlLayoutContextProvider: import("react").Provider<FormControlLayoutContext>;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend' {
+	import React, { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, ReactNode } from 'react';
+	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { IconType } from '@elastic/eui/src/components/icon';
+	export type EuiFormAppendProps = EuiFormAppendPrependBaseProps;
+	export const EuiFormAppend: ({ className, ...rest }: EuiFormAppendProps) => React.JSX.Element;
+	export type EuiFormPrependProps = EuiFormAppendPrependBaseProps;
+	export const EuiFormPrepend: ({ className, ...rest }: EuiFormPrependProps) => React.JSX.Element;
+	export type EuiFormAppendPrependCommonProps = CommonProps & {
+	    /**
+	     * Main content label
+	     */
+	    label?: ReactNode;
+	    /**
+	     * Left side icon
+	     */
+	    iconLeft?: IconType;
+	    /**
+	     * Right side icon
+	     */
+	    iconRight?: IconType;
+	    /**
+	     * Optional content that will be appended to `label` and icons
+	     */
+	    children?: ReactNode;
+	    /**
+	     * id of the input element that the form label is linked to via `htmlFor` attribute
+	     */
+	    inputId?: string;
+	    /**
+	     * Renders the element with smaller height and padding
+	     */
+	    compressed?: boolean;
 	};
+	export type EuiFormAppendPrependButtonProps = EuiFormAppendPrependCommonProps & {
+	    /**
+	     * Defines the rendered HTML element
+	     */
+	    element?: 'button';
+	    isDisabled?: boolean;
+	} & ButtonHTMLAttributes<HTMLButtonElement>;
+	export type EuiFormAppendPrependDivProps = EuiFormAppendPrependCommonProps & {
+	    /**
+	     * Defines the rendered HTML element
+	     */
+	    element?: 'div';
+	} & HTMLAttributes<HTMLDivElement>;
+	export type EuiFormAppendPrependBaseProps = ExclusiveUnion<EuiFormAppendPrependButtonProps, EuiFormAppendPrependDivProps>;
+	export type EuiFormAppendPrependProps = {
+	    side: 'append' | 'prepend';
+	} & EuiFormAppendPrependBaseProps;
+	export const EuiFormAppendPrepend: FunctionComponent<EuiFormAppendPrependProps>;
+
+}
+declare module '@elastic/eui/src/components/form/form_control_layout/append_prepend' {
+	export { EuiFormAppend, EuiFormPrepend, type EuiFormAppendProps, type EuiFormPrependProps, type EuiFormAppendPrependButtonProps, type EuiFormAppendPrependDivProps, } from '@elastic/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend';
 
 }
 declare module '@elastic/eui/src/components/form/form_control_layout/form_control_layout' {
@@ -15118,6 +15243,7 @@ declare module '@elastic/eui/src/components/form/form_control_layout' {
 	export type { EuiFormControlLayoutDelimitedProps } from '@elastic/eui/src/components/form/form_control_layout/form_control_layout_delimited';
 	export { EuiFormControlLayoutDelimited } from '@elastic/eui/src/components/form/form_control_layout/form_control_layout_delimited';
 	export { EuiFormControlLayoutIcons, type EuiFormControlLayoutIconsProps, } from '@elastic/eui/src/components/form/form_control_layout/form_control_layout_icons';
+	export * from '@elastic/eui/src/components/form/form_control_layout/append_prepend';
 
 }
 declare module '@elastic/eui/src/components/form/super_select/super_select.styles' {
@@ -18714,7 +18840,9 @@ declare module '@elastic/eui/src/components/form/form_control_button/form_contro
 	export const euiFormControlButtonStyles: (euiThemeContext: UseEuiTheme) => {
 	    euiFormControlButton: import("@emotion/react").SerializedStyles;
 	    isInvalid: import("@emotion/react").SerializedStyles;
+	    readOnly: import("@emotion/react").SerializedStyles;
 	    compressed: import("@emotion/react").SerializedStyles;
+	    isLoading: import("@emotion/react").SerializedStyles;
 	    formWidth: string;
 	    fullWidth: import("@emotion/react").SerializedStyles;
 	    euiFormControlButton__content: import("@emotion/react").SerializedStyles;
@@ -18747,7 +18875,7 @@ declare module '@elastic/eui/src/components/form/form_control_button/form_contro
 	     */
 	    fullWidth?: boolean;
 	};
-	export type EuiFormControlButtonProps = EuiFormControlButtonInputProps & Omit<EuiButtonEmptyProps, 'value' | 'color' | 'size' | 'flush' | 'isSelected' | 'isLoading'> & {
+	export type EuiFormControlButtonProps = EuiFormControlButtonInputProps & Omit<EuiButtonEmptyProps, 'value' | 'color' | 'size' | 'flush' | 'isSelected'> & {
 	    /**
 	     * Defines the button label when used like an input in combination with `placeholder`
 	     */
@@ -25581,40 +25709,6 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/pretty
 	export const showPrettyDuration: (timeFrom: ShortDate, timeTo: ShortDate, quickRanges: DurationRange[]) => boolean;
 	export {};
 
-}
-declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_date_picker.styles' {
-	import { UseEuiTheme } from '@elastic/eui/src/services';
-	export const euiSuperDatePickerStyles: (euiThemeContext: UseEuiTheme) => {
-	    euiSuperDatePicker: import("@emotion/react").SerializedStyles;
-	    widths: {
-	        restricted: import("@emotion/react").SerializedStyles;
-	        full: import("@emotion/react").SerializedStyles;
-	        auto: import("@emotion/react").SerializedStyles;
-	    };
-	    noUpdateButton: {
-	        restricted: string;
-	        auto: string;
-	        full: string;
-	    };
-	    isAutoRefreshOnly: {
-	        restricted: string;
-	        auto: string;
-	        full: string;
-	    };
-	    isQuickSelectOnly: import("@emotion/react").SerializedStyles;
-	    euiSuperDatePicker__range: import("@emotion/react").SerializedStyles;
-	    euiSuperDatePicker__rangeInput: import("@emotion/react").SerializedStyles;
-	    euiSuperDatePicker__prettyDurationTooltip: import("@emotion/react").SerializedStyles;
-	    states: {
-	        euiSuperDatePicker__formControlLayout: import("@emotion/react").SerializedStyles;
-	        default: import("@emotion/react").SerializedStyles;
-	        disabled: import("@emotion/react").SerializedStyles;
-	        invalid: import("@emotion/react").SerializedStyles;
-	        needsUpdating: import("@emotion/react").SerializedStyles;
-	    };
-	};
-	export const _buttonStyles: (euiThemeContext: UseEuiTheme) => import("@emotion/react").SerializedStyles;
-
 }
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -25622,6 +25716,7 @@ declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_p
 	    euiDatePopoverButton: import("@emotion/react").SerializedStyles;
 	    now: import("@emotion/react").SerializedStyles;
 	};
+	export const _buttonStyles: (euiThemeContext: UseEuiTheme) => import("@emotion/react").SerializedStyles;
 
 }
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/date_popover/date_popover_button' {
@@ -25831,14 +25926,14 @@ declare module '@elastic/eui/src/components/date_picker/auto_refresh/refresh_int
 }
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover' {
 	import { FunctionComponent, ReactNode, ReactElement } from 'react';
-	import { EuiButtonEmptyPropsForButton } from '@elastic/eui/src/components/button/button_empty/button_empty';
+	import { EuiFormAppendPrependButtonProps } from '@elastic/eui/src/components/form';
 	import { EuiQuickSelect } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/quick_select';
 	import { EuiCommonlyUsedTimeRanges } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/commonly_used_time_ranges';
 	import { EuiRecentlyUsed } from '@elastic/eui/src/components/date_picker/super_date_picker/quick_select_popover/recently_used';
 	import { EuiRefreshInterval } from '@elastic/eui/src/components/date_picker/auto_refresh/refresh_interval';
 	import { TimeOptions } from '@elastic/eui/src/components/date_picker/super_date_picker/time_options';
 	import { DurationRange, ApplyRefreshInterval, RefreshUnitsOptions, ApplyTime, QuickSelect, QuickSelectPanel, Milliseconds } from '@elastic/eui/src/components/date_picker/types';
-	export type EuiQuickSelectButtonProps = Partial<Omit<EuiButtonEmptyPropsForButton, 'children' | 'isDisabled' | 'isLoading'>>;
+	export type EuiQuickSelectButtonProps = Partial<Omit<EuiFormAppendPrependButtonProps, 'children' | 'isDisabled'>>;
 	export type CustomQuickSelectRenderOptions = {
 	    quickSelect: ReactElement<typeof EuiQuickSelect>;
 	    commonlyUsedRanges: ReactElement<typeof EuiCommonlyUsedTimeRanges>;
@@ -25933,6 +26028,10 @@ declare module '@elastic/eui/src/components/date_picker/date_picker_range' {
 	     * Pass either an icon type or set to `false` to remove icon entirely
 	     */
 	    iconType?: boolean | IconType;
+	    /**
+	     * Define the side the icon should be displayed on. Applies only if `iconType` is defined as `IconType`.
+	     */
+	    iconSide?: 'left' | 'right';
 	    /**
 	     * Won't apply any additional props to start and end date components
 	     */
@@ -26166,6 +26265,39 @@ declare module '@elastic/eui/src/components/date_picker/auto_refresh/auto_refres
 	} & Omit<CommonEuiButtonEmptyProps, 'isSelected' | 'iconType' | 'iconSide' | 'iconSize' | 'onClick' | 'type'>;
 	export const EuiAutoRefreshButton: FunctionComponent<EuiAutoRefreshButtonProps>;
 
+}
+declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_date_picker.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiSuperDatePickerStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiSuperDatePicker: import("@emotion/react").SerializedStyles;
+	    widths: {
+	        restricted: import("@emotion/react").SerializedStyles;
+	        full: import("@emotion/react").SerializedStyles;
+	        auto: import("@emotion/react").SerializedStyles;
+	    };
+	    noUpdateButton: {
+	        restricted: string;
+	        auto: string;
+	        full: string;
+	    };
+	    isAutoRefreshOnly: {
+	        restricted: string;
+	        auto: string;
+	        full: string;
+	    };
+	    isQuickSelectOnly: import("@emotion/react").SerializedStyles;
+	    euiSuperDatePicker__range: import("@emotion/react").SerializedStyles;
+	    euiSuperDatePicker__rangeInput: import("@emotion/react").SerializedStyles;
+	    euiSuperDatePicker__prettyDurationTooltip: import("@emotion/react").SerializedStyles;
+	    states: {
+	        euiSuperDatePicker__formControlLayout: import("@emotion/react").SerializedStyles;
+	        default: import("@emotion/react").SerializedStyles;
+	        disabled: import("@emotion/react").SerializedStyles;
+	        invalid: import("@emotion/react").SerializedStyles;
+	        needsUpdating: import("@emotion/react").SerializedStyles;
+	    };
+	};
+
 }
 declare module '@elastic/eui/src/components/date_picker/super_date_picker/super_date_picker' {
 	import React, { Component, FocusEventHandler, FunctionComponent, ReactNode } from 'react';

package/lib/components/badge/beta_badge/beta_badge.styles.js

@@ -50,7 +50,7 @@ var euiBetaBadgeStyles = exports.euiBetaBadgeStyles = function euiBetaBadgeStyle
   };
   return {
     euiBetaBadge: /*#__PURE__*/(0, _react.css)("display:inline-block;border-radius:", euiTheme.size.l, ";border:", euiTheme.border.width.thin, " solid transparent;cursor:default;font-weight:", euiTheme.font.weight.semiBold, ";text-transform:uppercase;letter-spacing:0.05em;text-align:center;", (0, _global_styling.euiTextTruncate)(), " &:focus{", (0, _global_styling.euiFocusRing)(euiThemeContext, 'outset', {
-      color: colorMode === 'DARK' ? euiTheme.colors.ghost : euiTheme.colors.ink
+      color: colorMode === 'DARK' ? euiTheme.colors.plainLight : euiTheme.colors.plainDark
     }), ";};label:euiBetaBadge;"),
     // Colors
     accent: /*#__PURE__*/(0, _react.css)(badgeColors.fill.accent, ";label:accent;"),

package/lib/components/badge/color_utils.js

@@ -85,7 +85,7 @@ var getBadgeColors = exports.getBadgeColors = function getBadgeColors(euiThemeCo
 };
 var getTextColor = exports.getTextColor = function getTextColor(_ref, bgColor) {
   var euiTheme = _ref.euiTheme;
-  var textColor = _services.isColorDark.apply(void 0, _toConsumableArray((0, _chromaJs.default)(bgColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
+  var textColor = _services.isColorDark.apply(void 0, _toConsumableArray((0, _chromaJs.default)(bgColor).rgb())) ? euiTheme.colors.textGhost : euiTheme.colors.textInk;
   return textColor;
 };
 var getIsValidColor = exports.getIsValidColor = function getIsValidColor(color) {

package/lib/components/badge/notification_badge/badge_notification.styles.js

@@ -25,7 +25,7 @@ var euiNotificationBadgeStyles = exports.euiNotificationBadgeStyles = function e
   return {
     euiNotificationBadge: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-flex;justify-content:center;align-items:center;vertical-align:middle;", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), " border-radius:", borderRadius, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       preferred: "\n          border: ".concat(euiTheme.border.thin, ";\n          overflow: hidden; /* Fix text clipping */\n        ")
-    }), " cursor:default;font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.euiNumberFormat)(euiThemeContext), " text-align:center;", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
+    }), " cursor:default;-webkit-text-fill-color:currentColor;font-size:", (0, _global_styling.euiFontSizeFromScale)('xs', euiTheme), ";font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.euiNumberFormat)(euiThemeContext), " text-align:center;", _global_styling.euiCanAnimate, "{transition:all ", euiTheme.animation.fast, " ease-in;};label:euiNotificationBadge;"),
     // Sizes
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.base), " ", (0, _global_styling.logicalCSS)('min-width', euiTheme.size.base), ";;label:s;"),
     m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)(euiTheme.size.xs, function (x) {

package/lib/components/button/button_display/_button_display.js

@@ -97,6 +97,7 @@ var EuiButtonDisplay = exports.EuiButtonDisplay = /*#__PURE__*/(0, _react.forwar
   var styles = (0, _services.useEuiMemoizedStyles)(_button_display.euiButtonDisplayStyles);
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, minWidth == null && [styles.defaultMinWidth.defaultMinWidth, styles.defaultMinWidth[size]], buttonIsDisabled && styles.isDisabled];
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, _extends({
+    size: size,
     isLoading: isLoading,
     isDisabled: buttonIsDisabled,
     iconType: iconType,

package/lib/components/button/button_display/_button_display.styles.js

@@ -32,11 +32,11 @@ var euiButtonDisplayStyles = exports.euiButtonDisplayStyles = function euiButton
   var sizes = (0, _mixins.euiButtonSizeMap)(euiThemeContext);
   var _buttonSize = function _buttonSize(sizeKey) {
     var size = sizes[sizeKey];
-    return /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', size.height), " line-height:", size.height, ";", (0, _global_styling.euiFontSize)(euiThemeContext, size.fontScale), " border-radius:", size.radius, ";");
+    return /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', size.height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', size.padding), " line-height:", size.height, ";", (0, _global_styling.euiFontSize)(euiThemeContext, size.fontScale), " border-radius:", size.radius, ";");
   };
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), " font-weight:", euiTheme.font.weight.medium, ";", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(euiTheme.size.m)), ";;label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/(0, _react.css)(euiButtonBaseCSS(), " font-weight:", euiTheme.font.weight.medium, ";;label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),

package/lib/components/button/button_display/_button_display_content.js

@@ -13,7 +13,7 @@ var _loading = require("../../loading");
 var _icon = require("../../icon");
 var _button_display_content = require("./_button_display_content.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "textProps", "isLoading", "isDisabled", "iconType", "iconSize", "iconSide"];
+var _excluded = ["children", "size", "textProps", "isLoading", "isDisabled", "iconType", "iconSize", "iconSide"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -37,6 +37,8 @@ var ICON_SIDES = exports.ICON_SIDES = ['left', 'right'];
 
 var EuiButtonDisplayContent = exports.EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var children = _ref.children,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
     textProps = _ref.textProps,
     _ref$isLoading = _ref.isLoading,
     isLoading = _ref$isLoading === void 0 ? false : _ref$isLoading,
@@ -77,13 +79,16 @@ var EuiButtonDisplayContent = exports.EuiButtonDisplayContent = function EuiButt
   var isText = typeof children === 'string';
   var doNotRenderTextWrapper = textProps === false;
   var renderTextWrapper = (isText || textProps) && !doNotRenderTextWrapper;
+  var textWrapperCss = [styles.content[size], textProps && textProps.css];
   return (0, _react2.jsx)("span", _extends({
     css: styles.euiButtonDisplayContent
   }, contentProps), iconSide === 'left' && icon, renderTextWrapper ? (0, _react2.jsx)("span", _extends({}, textProps, {
+    css: textWrapperCss,
     className: (0, _classnames.default)('eui-textTruncate', textProps === null || textProps === void 0 ? void 0 : textProps.className)
   }), children) : children, iconSide === 'right' && icon);
 };
 EuiButtonDisplayContent.propTypes = {
+  size: _propTypes.default.any,
   /**
      * Any `type` accepted by EuiIcon
      */

package/lib/components/button/button_display/_button_display_content.styles.js

@@ -18,6 +18,11 @@ var euiButtonDisplayContentStyles = exports.euiButtonDisplayContentStyles = func
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplayContent: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " display:flex;justify-content:center;align-items:center;vertical-align:middle;gap:", euiTheme.size.s, ";;label:euiButtonDisplayContent;")
+    euiButtonDisplayContent: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " display:flex;justify-content:center;align-items:center;vertical-align:middle;gap:", euiTheme.size.xs, ";;label:euiButtonDisplayContent;"),
+    content: {
+      xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xxs), ";;label:xs;"),
+      s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";;label:s;"),
+      m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";;label:m;")
+    }
   };
 };

package/lib/components/button/button_empty/button_empty.js

@@ -91,6 +91,7 @@ var EuiButtonEmpty = exports.EuiButtonEmpty = function EuiButtonEmpty(_ref) {
   var contentClassNames = (0, _classnames.default)('euiButtonEmpty__content', contentProps === null || contentProps === void 0 ? void 0 : contentProps.className);
   var textClassNames = (0, _classnames.default)('euiButtonEmpty__text', textProps && textProps.className);
   var innerNode = (0, _react2.jsx)(_button_display_content.EuiButtonDisplayContent, _extends({
+    size: size,
     isDisabled: isDisabled,
     isLoading: isLoading,
     iconType: iconType,
@@ -143,7 +144,7 @@ EuiButtonEmpty.propTypes = {
      *  - risk
      */
   color: _propTypes.default.any,
-  size: _propTypes.default.any,
+  size: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
   /**
      * Ensure the text of the button sits flush to the left, right, or both sides of its container
      */

package/lib/components/button/button_empty/button_empty.styles.js

@@ -23,7 +23,7 @@ var euiButtonEmptyStyles = exports.euiButtonEmptyStyles = function euiButtonEmpt
   // of using the actual component - so we'll reuse its styles instead
   var displayStyles = (0, _button_display.euiButtonDisplayStyles)(euiThemeContext);
   return {
-    euiButtonEmpty: /*#__PURE__*/(0, _react.css)(displayStyles.euiButtonDisplay, " ", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(euiTheme.size.s)), _global_styling.euiCanAnimate, "{transition-timing-function:ease-in;transition-duration:", euiTheme.animation.fast, ";};label:euiButtonEmpty;"),
+    euiButtonEmpty: /*#__PURE__*/(0, _react.css)(displayStyles.euiButtonDisplay, " ", (0, _global_styling.logicalShorthandCSS)('padding', "0 ".concat(euiTheme.size.s)), ";;label:euiButtonEmpty;"),
     isDisabled: displayStyles.isDisabled,
     // Sizes
     xs: displayStyles.xs,
@@ -33,7 +33,7 @@ var euiButtonEmptyStyles = exports.euiButtonEmptyStyles = function euiButtonEmpt
     // Flush sides
     flush: /*#__PURE__*/(0, _react.css)("padding-inline:0;&&:hover,&&:active{background-color:transparent;&::before{display:none;}}&:hover:not(:disabled),&:focus{text-decoration:underline;", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
       forced: "\n            /* hides HCM hover border, flush buttons use text-decoration */\n            &::after {\n              display: none;\n            }\n          "
-    }), ";};label:flush;"),
+    }), ";}.euiButtonEmpty__content{gap:", euiTheme.size.s, ";}.euiButtonEmpty__text{padding:0;};label:flush;"),
     left: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-right', euiTheme.size.s), ";;label:left;"),
     right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', euiTheme.size.s), ";;label:right;"),
     both: /*#__PURE__*/(0, _react.css)(";label:both;")