@elastic/eui 58.0.0 → 58.1.0

package/eui.d.ts

@@ -14,13 +14,13 @@ declare module '@elastic/eui/src/components/accessibility/screen_reader_only/scr
 
 }
 declare module '@elastic/eui/src/components/accessibility/screen_reader_only/screen_reader_only.styles' {
-	export const euiScreenReaderOnlyStyles: () => import("@emotion/utils").SerializedStyles;
+	export const euiScreenReaderOnly: () => string;
 
 }
 declare module '@elastic/eui/src/components/accessibility/screen_reader_only' {
 	export type { EuiScreenReaderOnlyProps } from '@elastic/eui/src/components/accessibility/screen_reader_only/screen_reader_only';
 	export { EuiScreenReaderOnly } from '@elastic/eui/src/components/accessibility/screen_reader_only/screen_reader_only';
-	export { euiScreenReaderOnlyStyles } from '@elastic/eui/src/components/accessibility/screen_reader_only/screen_reader_only.styles';
+	export { euiScreenReaderOnly } from '@elastic/eui/src/components/accessibility/screen_reader_only/screen_reader_only.styles';
 
 }
 declare module '@elastic/eui/src/components/accessibility/screen_reader_live/screen_reader_live' {
@@ -1207,14 +1207,14 @@ declare module '@elastic/eui/src/global_styling/mixins/_color' {
 	export const euiBackgroundColor: (color: EuiBackgroundColor, { euiTheme, colorMode }: UseEuiTheme) => string;
 	export const useEuiBackgroundColor: (color: EuiBackgroundColor) => string;
 	export const useEuiBackgroundColorCSS: () => {
-	    transparent: string;
-	    plain: string;
-	    subdued: string;
-	    accent: string;
-	    primary: string;
-	    success: string;
-	    warning: string;
-	    danger: string;
+	    transparent: import("@emotion/utils").SerializedStyles;
+	    plain: import("@emotion/utils").SerializedStyles;
+	    subdued: import("@emotion/utils").SerializedStyles;
+	    accent: import("@emotion/utils").SerializedStyles;
+	    primary: import("@emotion/utils").SerializedStyles;
+	    success: import("@emotion/utils").SerializedStyles;
+	    warning: import("@emotion/utils").SerializedStyles;
+	    danger: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -2161,11 +2161,11 @@ declare module '@elastic/eui/src/global_styling/mixins/_padding' {
 	export const useEuiPaddingSize: (size: EuiPaddingSize) => string | null;
 	export const useEuiPaddingCSS: (side?: "left" | "right" | "top" | "horizontal" | "vertical" | "bottom" | undefined) => {
 	    none: null;
-	    xs: string;
-	    s: string;
-	    m: string;
-	    l: string;
-	    xl: string;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    xl: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -3803,22 +3803,95 @@ declare module '@elastic/eui/src/components/form/file_picker' {
 	export type { EuiFilePickerProps } from '@elastic/eui/src/components/form/file_picker/file_picker';
 	export { EuiFilePicker } from '@elastic/eui/src/components/form/file_picker/file_picker';
 
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/functions/shadows' {
+	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services/theme/types';
+	export const getShadowColor: (color: string, opacity: number, colorMode: EuiThemeColorModeStandard) => string;
+
+}
+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/shadow' {
+	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
+	import { _EuiThemeShadowSize, _EuiThemeShadowCustomColor } from '@elastic/eui/src/global_styling/variables/shadow';
+	export interface EuiShadowCustomColor {
+	    color?: string;
+	}
+	/**
+	 * euiSlightShadow
+	 */
+	export const euiShadowXSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	/**
+	 * bottomShadowSmall
+	 */
+	export const euiShadowSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	/**
+	 * bottomShadowMedium
+	 */
+	export const euiShadowMedium: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	/**
+	 * bottomShadow
+	 */
+	export const euiShadowLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	/**
+	 * bottomShadowLarge
+	 */
+	export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
+	    reverse?: boolean;
+	}
+	export const euiShadowXLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, reverse }?: EuiShadowXLarge) => string;
+	/**
+	 * slightShadowHover
+	 * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
+	 */
+	export const euiSlightShadowHover: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const useEuiSlightShadowHover: (color?: _EuiThemeShadowCustomColor['color']) => string;
+	/**
+	 * bottomShadowFlat
+	 *
+	 * Similar to shadow medium but without the bottom depth.
+	 * Useful for popovers that drop UP rather than DOWN.
+	 */
+	export const euiShadowFlat: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
+	export const useEuiShadowFlat: (color?: _EuiThemeShadowCustomColor['color']) => string;
+	export const euiShadow: (euiThemeContext: UseEuiTheme, size?: _EuiThemeShadowSize, { color }?: _EuiThemeShadowCustomColor) => string;
+	export const useEuiShadow: (size?: _EuiThemeShadowSize, color?: _EuiThemeShadowCustomColor['color']) => string;
+
+}
+declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins' {
+	export * from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow';
+
+}
+declare module '@elastic/eui/src/components/panel/panel.style' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPanelStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiPanel: import("@emotion/utils").SerializedStyles;
+	    grow: import("@emotion/utils").SerializedStyles;
+	    hasShadow: import("@emotion/utils").SerializedStyles;
+	    hasBorder: import("@emotion/utils").SerializedStyles;
+	    radius: {
+	        none: import("@emotion/utils").SerializedStyles;
+	        m: import("@emotion/utils").SerializedStyles;
+	    };
+	    isClickable: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/panel/panel' {
 	import { ButtonHTMLAttributes, FunctionComponent, HTMLAttributes, Ref } from 'react';
+	import { EuiBackgroundColor, EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
-	export const panelPaddingValues: {
-	    none: number;
-	    s: number;
-	    m: number;
-	    l: number;
-	};
-	export const SIZES: ("s" | "none" | "m" | "l")[];
-	export const BORDER_RADII: ("none" | "m")[];
-	export const COLORS: readonly ["transparent", "plain", "subdued", "accent", "primary", "success", "warning", "danger"];
-	export type PanelColor = typeof COLORS[number];
-	export type PanelPaddingSize = typeof SIZES[number];
+	export const PANEL_SIZES: readonly ["none", "xs", "s", "m", "l", "xl"]; const _SIZES: readonly ["none", "s", "m", "l"];
+	/**
+	 * This export has been deprecated in favor of the global style `EuiPaddingSize`
+	 */
+	export type PanelPaddingSize_Deprecated = typeof _SIZES[number];
+	export const BORDER_RADII: readonly ["none", "m"];
 	export type PanelBorderRadius = typeof BORDER_RADII[number];
+	export const COLORS: readonly ["transparent", "plain", "subdued", "accent", "primary", "success", "warning", "danger"];
+	export type PanelColor = EuiBackgroundColor;
 	export interface _EuiPanelProps extends CommonProps {
 	    /**
 	     * Adds a medium shadow to the panel;
@@ -3828,13 +3901,12 @@ declare module '@elastic/eui/src/components/panel/panel' {
 	    /**
 	     * Adds a slight 1px border on all edges.
 	     * Only works when `color="plain | transparent"`
-	     * Default is `undefined` and will default to that theme's panel style
 	     */
 	    hasBorder?: boolean;
 	    /**
 	     * Padding for all four sides
 	     */
-	    paddingSize?: PanelPaddingSize;
+	    paddingSize?: EuiPaddingSize;
 	    /**
 	     * Corner border radius
 	     */
@@ -3858,6 +3930,7 @@ declare module '@elastic/eui/src/components/panel/panel' {
 	}
 	export type EuiPanelProps = ExclusiveUnion<_EuiPanelButtonlike, _EuiPanelDivlike>;
 	export const EuiPanel: FunctionComponent<EuiPanelProps>;
+	export {};
 
 }
 declare module '@elastic/eui/src/services/hooks/useUpdateEffect' {
@@ -3959,8 +4032,8 @@ declare module '@elastic/eui/src/components/panel/split_panel' {
 
 }
 declare module '@elastic/eui/src/components/panel' {
-	export type { EuiPanelProps, PanelPaddingSize } from '@elastic/eui/src/components/panel/panel';
-	export { EuiPanel, SIZES } from '@elastic/eui/src/components/panel/panel';
+	export type { EuiPanelProps } from '@elastic/eui/src/components/panel/panel';
+	export { EuiPanel } from '@elastic/eui/src/components/panel/panel';
 	export { EuiSplitPanel } from '@elastic/eui/src/components/panel/split_panel';
 
 }
@@ -4617,7 +4690,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	import { CommonProps, NoArgCallback } from '@elastic/eui/src/components/common';
 	import { FocusTarget, EuiFocusTrapProps } from '@elastic/eui/src/components/focus_trap';
 	import { ReactFocusOnProps } from 'react-focus-on/dist/es5/types';
-	import { PanelPaddingSize, EuiPanelProps } from '@elastic/eui/src/components/panel';
+	import { PanelPaddingSize_Deprecated, EuiPanelProps } from '@elastic/eui/src/components/panel/panel';
 	import { EuiPopoverPosition } from '@elastic/eui/src/services/popover';
 	export const popoverAnchorPosition: readonly ["upCenter", "upLeft", "upRight", "downCenter", "downLeft", "downRight", "leftCenter", "leftUp", "leftDown", "rightCenter", "rightUp", "rightDown"];
 	export type PopoverAnchorPosition = typeof popoverAnchorPosition[number];
@@ -4693,7 +4766,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    /**
 	     * EuiPanel padding on all sides
 	     */
-	    panelPaddingSize?: PanelPaddingSize;
+	    panelPaddingSize?: PanelPaddingSize_Deprecated;
 	    /**
 	     * Standard DOM `style` attribute. Passed to the EuiPanel
 	     */
@@ -4771,7 +4844,7 @@ declare module '@elastic/eui/src/components/popover/popover' {
 	    hasArrow: boolean;
 	    isOpen: boolean;
 	    ownFocus: boolean;
-	    panelPaddingSize: PanelPaddingSize;
+	    panelPaddingSize: PanelPaddingSize_Deprecated;
 	};
 	export class EuiPopover extends Component<Props, State> {
 	    static defaultProps: Partial<PropsWithDefaults>;
@@ -4859,13 +4932,13 @@ declare module '@elastic/eui/src/components/popover/input_popover' {
 declare module '@elastic/eui/src/components/popover/popover_title' {
 	import { HTMLAttributes, FunctionComponent } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { PanelPaddingSize } from '@elastic/eui/src/components/panel';
+	import { PanelPaddingSize_Deprecated } from '@elastic/eui/src/components/panel/panel';
 	export type EuiPopoverTitleProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps & {
 	    /**
 	     * Customize the all around padding of the popover title.
 	     * Leave `undefined` to inherit from the `panelPaddingSize` of the containing EuiPopover
 	     */
-	    paddingSize?: PanelPaddingSize;
+	    paddingSize?: PanelPaddingSize_Deprecated;
 	}>;
 	export const PADDING_SIZES: ("s" | "none" | "m" | "l")[];
 	export const EuiPopoverTitle: EuiPopoverTitleProps;
@@ -4874,13 +4947,13 @@ declare module '@elastic/eui/src/components/popover/popover_title' {
 declare module '@elastic/eui/src/components/popover/popover_footer' {
 	import { HTMLAttributes, FunctionComponent } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { PanelPaddingSize } from '@elastic/eui/src/components/panel';
+	import { PanelPaddingSize_Deprecated } from '@elastic/eui/src/components/panel/panel';
 	export type EuiPopoverFooterProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps & {
 	    /**
 	     * Customize the all around padding of the popover footer.
 	     * Leave `undefined` to inherit from the `panelPaddingSize` of the containing EuiPopover
 	     */
-	    paddingSize?: PanelPaddingSize;
+	    paddingSize?: PanelPaddingSize_Deprecated;
 	}>;
 	export const PADDING_SIZES: ("s" | "none" | "m" | "l")[];
 	export const EuiPopoverFooter: EuiPopoverFooterProps;
@@ -6752,15 +6825,50 @@ declare module '@elastic/eui/src/components/accessibility/skip_link' {
 declare module '@elastic/eui/src/components/accessibility' {
 	export { EuiScreenReaderLive } from '@elastic/eui/src/components/accessibility/screen_reader_live';
 	export type { EuiScreenReaderLiveProps } from '@elastic/eui/src/components/accessibility/screen_reader_live';
-	export { EuiScreenReaderOnly, euiScreenReaderOnlyStyles, } from '@elastic/eui/src/components/accessibility/screen_reader_only';
+	export { EuiScreenReaderOnly, euiScreenReaderOnly } from '@elastic/eui/src/components/accessibility/screen_reader_only';
 	export type { EuiScreenReaderOnlyProps } from '@elastic/eui/src/components/accessibility/screen_reader_only';
 	export { EuiSkipLink } from '@elastic/eui/src/components/accessibility/skip_link';
 	export type { EuiSkipLinkProps } from '@elastic/eui/src/components/accessibility/skip_link';
 
+}
+declare module '@elastic/eui/src/components/accordion/accordion.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiAccordionButtonStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiAccordion__button: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiAccordionChildrenStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiAccordion__children: import("@emotion/utils").SerializedStyles;
+	    isLoading: import("@emotion/utils").SerializedStyles;
+	    xs: import("@emotion/utils").SerializedStyles;
+	    s: import("@emotion/utils").SerializedStyles;
+	    m: import("@emotion/utils").SerializedStyles;
+	    l: import("@emotion/utils").SerializedStyles;
+	    xl: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiAccordionChildWrapperStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiAccordion__childWrapper: import("@emotion/utils").SerializedStyles;
+	    isOpen: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiAccordionIconButtonStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiAccordion__iconButton: import("@emotion/utils").SerializedStyles;
+	    isOpen: import("@emotion/utils").SerializedStyles;
+	    arrowRight: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiAccordionOptionalActionStyles: () => {
+	    euiAccordion__optionalAction: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiAccordionSpinnerStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiAccordion__spinner: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiAccordionTriggerWrapperStyles: () => {
+	    euiAccordion__triggerWrapper: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/accordion/accordion' {
-	import { Component, HTMLAttributes, ReactNode } from 'react';
+	import React, { Component, HTMLAttributes, ReactNode } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { WithEuiThemeProps } from '@elastic/eui/src/services';
 	import { EuiButtonIconProps } from '@elastic/eui/src/components/button'; const paddingSizeToClassNameMap: {
 	    none: string;
 	    xs: string;
@@ -6810,7 +6918,7 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	    /**
 	     * The accordion will start in the open state.
 	     */
-	    initialIsOpen: boolean;
+	    initialIsOpen?: boolean;
 	    /**
 	     * Optional callback method called on open and close with a single `isOpen` parameter
 	     */
@@ -6836,17 +6944,17 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	     */
 	    isLoadingMessage?: boolean | ReactNode;
 	};
-	export class EuiAccordion extends Component<EuiAccordionProps, {
+	export class EuiAccordionClass extends Component<WithEuiThemeProps & EuiAccordionProps, {
 	    isOpen: boolean;
 	}> {
 	    static defaultProps: {
 	        initialIsOpen: boolean;
-	        paddingSize: string;
-	        arrowDisplay: string;
+	        paddingSize: "none";
+	        arrowDisplay: "left";
 	        isLoading: boolean;
 	        isLoadingMessage: boolean;
-	        element: string;
-	        buttonElement: string;
+	        element: "div";
+	        buttonElement: "button";
 	    };
 	    childContent: HTMLDivElement | null;
 	    childWrapper: HTMLDivElement | null;
@@ -6861,6 +6969,135 @@ declare module '@elastic/eui/src/components/accordion/accordion' {
 	    generatedId: string;
 	    render(): JSX.Element;
 	}
+	export const EuiAccordion: React.ForwardRefExoticComponent<Omit<WithEuiThemeProps<{}> & CommonProps & Omit<React.HTMLAttributes<HTMLElement>, "id"> & {
+	    id: string;
+	    /**
+	     * Applied to the entire .euiAccordion wrapper.
+	     * When using `fieldset`, it will enforce `buttonElement = legend` as well.
+	     */
+	    element?: "div" | "fieldset" | undefined;
+	    /**
+	     * Class that will apply to the trigger for the accordion.
+	     */
+	    buttonClassName?: string | undefined;
+	    /**
+	     * Apply more props to the triggering button
+	     */
+	    buttonProps?: (CommonProps & React.HTMLAttributes<HTMLElement>) | undefined;
+	    /**
+	     * Class that will apply to the trigger content for the accordion.
+	     */
+	    buttonContentClassName?: string | undefined;
+	    /**
+	     * The content of the clickable trigger
+	     */
+	    buttonContent?: ReactNode;
+	    /**
+	     * Applied to the main button receiving the `onToggle` event.
+	     * Anything other than the default `button` does not support removing the arrow display (for accessibility of focus).
+	     */
+	    buttonElement?: "button" | "div" | "legend" | undefined;
+	    /**
+	     * Extra props to pass to the EuiButtonIcon containing the arrow.
+	     */
+	    arrowProps?: Partial<Omit<EuiButtonIconProps, "aria-labelledby" | "onClick" | "iconType">> | undefined;
+	    /**
+	     * Will appear right aligned against the button. Useful for separate actions like deletions.
+	     */
+	    extraAction?: ReactNode;
+	    /**
+	     * The accordion will start in the open state.
+	     */
+	    initialIsOpen?: boolean | undefined;
+	    /**
+	     * Optional callback method called on open and close with a single `isOpen` parameter
+	     */
+	    onToggle?: ((isOpen: boolean) => void) | undefined;
+	    /**
+	     * The padding around the exposed accordion content.
+	     */
+	    paddingSize?: "s" | "none" | "xs" | "m" | "l" | "xl" | undefined;
+	    /**
+	     * Placement of the arrow indicator, or 'none' to hide it.
+	     */
+	    arrowDisplay?: "none" | "left" | "right" | undefined;
+	    /**
+	     * Control the opening of accordion via prop
+	     */
+	    forceState?: "open" | "closed" | undefined;
+	    /**
+	     * Change `extraAction` and children into a loading spinner
+	     */
+	    isLoading?: boolean | undefined;
+	    /**
+	     * Choose whether the loading message replaces the content. Customize the message by passing a node
+	     */
+	    isLoadingMessage?: boolean | ReactNode;
+	}, "theme"> & React.RefAttributes<Omit<WithEuiThemeProps<{}> & CommonProps & Omit<React.HTMLAttributes<HTMLElement>, "id"> & {
+	    id: string;
+	    /**
+	     * Applied to the entire .euiAccordion wrapper.
+	     * When using `fieldset`, it will enforce `buttonElement = legend` as well.
+	     */
+	    element?: "div" | "fieldset" | undefined;
+	    /**
+	     * Class that will apply to the trigger for the accordion.
+	     */
+	    buttonClassName?: string | undefined;
+	    /**
+	     * Apply more props to the triggering button
+	     */
+	    buttonProps?: (CommonProps & React.HTMLAttributes<HTMLElement>) | undefined;
+	    /**
+	     * Class that will apply to the trigger content for the accordion.
+	     */
+	    buttonContentClassName?: string | undefined;
+	    /**
+	     * The content of the clickable trigger
+	     */
+	    buttonContent?: ReactNode;
+	    /**
+	     * Applied to the main button receiving the `onToggle` event.
+	     * Anything other than the default `button` does not support removing the arrow display (for accessibility of focus).
+	     */
+	    buttonElement?: "button" | "div" | "legend" | undefined;
+	    /**
+	     * Extra props to pass to the EuiButtonIcon containing the arrow.
+	     */
+	    arrowProps?: Partial<Omit<EuiButtonIconProps, "aria-labelledby" | "onClick" | "iconType">> | undefined;
+	    /**
+	     * Will appear right aligned against the button. Useful for separate actions like deletions.
+	     */
+	    extraAction?: ReactNode;
+	    /**
+	     * The accordion will start in the open state.
+	     */
+	    initialIsOpen?: boolean | undefined;
+	    /**
+	     * Optional callback method called on open and close with a single `isOpen` parameter
+	     */
+	    onToggle?: ((isOpen: boolean) => void) | undefined;
+	    /**
+	     * The padding around the exposed accordion content.
+	     */
+	    paddingSize?: "s" | "none" | "xs" | "m" | "l" | "xl" | undefined;
+	    /**
+	     * Placement of the arrow indicator, or 'none' to hide it.
+	     */
+	    arrowDisplay?: "none" | "left" | "right" | undefined;
+	    /**
+	     * Control the opening of accordion via prop
+	     */
+	    forceState?: "open" | "closed" | undefined;
+	    /**
+	     * Change `extraAction` and children into a loading spinner
+	     */
+	    isLoading?: boolean | undefined;
+	    /**
+	     * Choose whether the loading message replaces the content. Customize the message by passing a node
+	     */
+	    isLoadingMessage?: boolean | ReactNode;
+	}, "theme">>>;
 	export {};
 
 }
@@ -7218,66 +7455,6 @@ declare module '@elastic/eui/src/components/beacon' {
 	export type { EuiBeaconProps } from '@elastic/eui/src/components/beacon/beacon';
 	export { EuiBeacon } from '@elastic/eui/src/components/beacon/beacon';
 
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/functions/shadows' {
-	import { EuiThemeColorModeStandard } from '@elastic/eui/src/services/theme/types';
-	export const getShadowColor: (color: string, opacity: number, colorMode: EuiThemeColorModeStandard) => string;
-
-}
-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/shadow' {
-	import { UseEuiTheme } from '@elastic/eui/src/services/theme';
-	import { _EuiThemeShadowSize, _EuiThemeShadowCustomColor } from '@elastic/eui/src/global_styling/variables/shadow';
-	export interface EuiShadowCustomColor {
-	    color?: string;
-	}
-	/**
-	 * euiSlightShadow
-	 */
-	export const euiShadowXSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
-	/**
-	 * bottomShadowSmall
-	 */
-	export const euiShadowSmall: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
-	/**
-	 * bottomShadowMedium
-	 */
-	export const euiShadowMedium: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
-	/**
-	 * bottomShadow
-	 */
-	export const euiShadowLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
-	/**
-	 * bottomShadowLarge
-	 */
-	export interface EuiShadowXLarge extends _EuiThemeShadowCustomColor {
-	    reverse?: boolean;
-	}
-	export const euiShadowXLarge: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color, reverse }?: EuiShadowXLarge) => string;
-	/**
-	 * slightShadowHover
-	 * TODO: I think this is only used by panels/cards in the Amsterdam theme, move there
-	 */
-	export const euiSlightShadowHover: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
-	export const useEuiSlightShadowHover: (color?: _EuiThemeShadowCustomColor['color']) => string;
-	/**
-	 * bottomShadowFlat
-	 *
-	 * Similar to shadow medium but without the bottom depth.
-	 * Useful for popovers that drop UP rather than DOWN.
-	 */
-	export const euiShadowFlat: ({ euiTheme, colorMode }: UseEuiTheme, { color: _color }?: _EuiThemeShadowCustomColor) => string;
-	export const useEuiShadowFlat: (color?: _EuiThemeShadowCustomColor['color']) => string;
-	export const euiShadow: (euiThemeContext: UseEuiTheme, size?: _EuiThemeShadowSize, { color }?: _EuiThemeShadowCustomColor) => string;
-	export const useEuiShadow: (size?: _EuiThemeShadowSize, color?: _EuiThemeShadowCustomColor['color']) => string;
-
-}
-declare module '@elastic/eui/src/themes/amsterdam/global_styling/mixins' {
-	export * from '@elastic/eui/src/themes/amsterdam/global_styling/mixins/shadow';
-
 }
 declare module '@elastic/eui/src/components/bottom_bar/bottom_bar.styles' {
 	import { UseEuiTheme } from '@elastic/eui/src/services';
@@ -17740,7 +17917,7 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_collap
 declare module '@elastic/eui/src/components/resizable_container/resizable_panel' {
 	import { CSSProperties, ReactNode, FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
-	import { PanelPaddingSize, _EuiPanelProps } from '@elastic/eui/src/components/panel/panel';
+	import { PanelPaddingSize_Deprecated, _EuiPanelProps } from '@elastic/eui/src/components/panel/panel';
 	import { EuiResizablePanelController, ActionToggleOptions, PanelModeType } from '@elastic/eui/src/components/resizable_container/types';
 	export interface ToggleOptions {
 	    'data-test-subj'?: string;
@@ -17814,7 +17991,7 @@ declare module '@elastic/eui/src/components/resizable_container/resizable_panel'
 	     * Padding to add directly to the wrapping `.euiResizablePanel` div
 	     * Gives space around the actual panel.
 	     */
-	    wrapperPadding?: PanelPaddingSize;
+	    wrapperPadding?: PanelPaddingSize_Deprecated;
 	}
 	export const EuiResizablePanel: FunctionComponent<EuiResizablePanelProps>;
 	export function euiResizablePanelWithControls(controls: EuiResizablePanelControls): (props: EuiResizablePanelProps) => JSX.Element;
@@ -22613,6 +22790,7 @@ declare module '@elastic/eui' {
 "euiColumnSelector.hideAll": any;
 "euiColumnSortingDraggable.defaultSortAsc": any;
 "euiColumnSortingDraggable.defaultSortDesc": any;
+"euiColumnSortingDraggable.dragHandleAriaLabel": any;
 "euiColumnSortingDraggable.activeSortLabel": any;
 "euiColumnSortingDraggable.removeSortLabel": any;
 "euiColumnSortingDraggable.toggleLegend": any;

package/i18ntokens.json

@@ -5,12 +5,12 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 278,
-        "column": 14
+        "line": 338,
+        "column": 16
       },
       "end": {
-        "line": 278,
-        "column": 74
+        "line": 338,
+        "column": 76
       }
     },
     "filepath": "src/components/accordion/accordion.tsx"
@@ -1103,17 +1103,33 @@
     },
     "filepath": "src/components/datagrid/controls/column_sorting_draggable.tsx"
   },
+  {
+    "token": "euiColumnSortingDraggable.dragHandleAriaLabel",
+    "defString": "Drag handle",
+    "highlighting": "string",
+    "loc": {
+      "start": {
+        "line": 64,
+        "column": 30
+      },
+      "end": {
+        "line": 67,
+        "column": 3
+      }
+    },
+    "filepath": "src/components/datagrid/controls/column_sorting_draggable.tsx"
+  },
   {
     "token": "euiColumnSortingDraggable.activeSortLabel",
     "defString": "{display} is sorting this data grid",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 74,
+        "line": 79,
         "column": 14
       },
       "end": {
-        "line": 78,
+        "line": 83,
         "column": 15
       }
     },
@@ -1125,11 +1141,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 90,
+        "line": 95,
         "column": 14
       },
       "end": {
-        "line": 94,
+        "line": 99,
         "column": 15
       }
     },
@@ -1141,11 +1157,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 128,
+        "line": 133,
         "column": 14
       },
       "end": {
-        "line": 132,
+        "line": 137,
         "column": 15
       }
     },
@@ -4533,11 +4549,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 772,
+        "line": 776,
         "column": 14
       },
       "end": {
-        "line": 775,
+        "line": 779,
         "column": 16
       }
     },
@@ -4597,11 +4613,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 330,
+        "line": 335,
         "column": 32
       },
       "end": {
-        "line": 333,
+        "line": 338,
         "column": 3
       }
     },