@elastic/eui 62.2.0 → 63.0.1

package/eui.d.ts

@@ -1613,10 +1613,13 @@ declare module '@elastic/eui/src/global_styling/mixins/_helpers' {
 	 *    Browser's supporting `:focus-visible` will still show outline on keyboard focus only.
 	 *    Others like Safari, won't show anything at all.
 	 */
-	export const euiYScroll: (euiTheme: UseEuiTheme) => string;
-	export const useEuiYScroll: () => string;
-	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme) => string;
-	export const useEuiYScrollWithShadows: () => string;
+	interface _EuiYScroll {
+	    height?: CSSProperties['height'];
+	}
+	export const euiYScroll: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScroll: ({ height }?: _EuiYScroll) => string;
+	export const euiYScrollWithShadows: (euiTheme: UseEuiTheme, { height }?: _EuiYScroll) => string;
+	export const useEuiYScrollWithShadows: ({ height }?: _EuiYScroll) => string;
 	export const euiXScroll: (euiTheme: UseEuiTheme) => string;
 	export const useEuiXScroll: () => string;
 	export const euiXScrollWithShadows: (euiTheme: UseEuiTheme) => string;
@@ -1720,7 +1723,7 @@ declare module '@elastic/eui/src/global_styling/functions/logicals' {
 	 * @returns `object` Returns the logical CSS property version for the given `property: value` pair
 	 */
 	export const logicalStyle: (property: LogicalProperties, value?: any) => {
-	    [x: string]: string;
+	    [x: string]: any;
 	};
 	/**
 	 *
@@ -6652,7 +6655,7 @@ 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/currentEuiBreakpoint' {
+declare module '@elastic/eui/src/services/breakpoint/current_breakpoint' {
 	import React, { FunctionComponent } from 'react';
 	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling/variables/breakpoint'; type CurrentEuiBreakpoint = _EuiThemeBreakpoint | undefined;
 	export const CurrentEuiBreakpointContext: React.Context<CurrentEuiBreakpoint>;
@@ -6661,11 +6664,17 @@ declare module '@elastic/eui/src/services/breakpoint/currentEuiBreakpoint' {
 	 * resize listener that returns the current breakpoint based on window width
 	 */
 	export const CurrentEuiBreakpointProvider: FunctionComponent;
+	export {};
+
+}
+declare module '@elastic/eui/src/services/breakpoint/current_breakpoint_hook' {
 	/**
-	 * Hook util / syntactical sugar
+	 * 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: () => CurrentEuiBreakpoint;
-	export {};
+	export const useCurrentEuiBreakpoint: () => "s" | "xs" | "m" | "l" | "xl" | undefined;
 
 }
 declare module '@elastic/eui/src/services/breakpoint/useIsWithinBreakpoints' {
@@ -6685,7 +6694,8 @@ declare module '@elastic/eui/src/services/breakpoint/useIsWithinBreakpoints' {
 }
 declare module '@elastic/eui/src/services/breakpoint' {
 	export * from '@elastic/eui/src/services/breakpoint/breakpoint';
-	export * from '@elastic/eui/src/services/breakpoint/currentEuiBreakpoint';
+	export * from '@elastic/eui/src/services/breakpoint/current_breakpoint';
+	export * from '@elastic/eui/src/services/breakpoint/current_breakpoint_hook';
 	export * from '@elastic/eui/src/services/breakpoint/useIsWithinBreakpoints';
 
 }
@@ -7720,7 +7730,8 @@ declare module '@elastic/eui/src/components/bottom_bar/bottom_bar.styles' {
 }
 declare module '@elastic/eui/src/components/bottom_bar/bottom_bar' {
 	import React, { CSSProperties, HTMLAttributes } from 'react';
-	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common'; type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
+	import { CommonProps, ExclusiveUnion } from '@elastic/eui/src/components/common';
+	import { EuiPortalProps } from '@elastic/eui/src/components/portal'; type BottomBarPaddingSize = 'none' | 's' | 'm' | 'l';
 	export const paddingSizeToClassNameMap: {
 	    [value in BottomBarPaddingSize]: string | null;
 	};
@@ -7731,7 +7742,7 @@ declare module '@elastic/eui/src/components/bottom_bar/bottom_bar' {
 	     * Whether to wrap in an EuiPortal which appends the component to the body element.
 	     * Only works if `position` is `fixed`.
 	     */
-	    usePortal?: boolean;
+	    usePortal?: boolean | EuiPortalProps;
 	    /**
 	     * Whether the component should apply padding on the document body element to afford for its own displacement height.
 	     * Only works if `usePortal` is true and `position` is `fixed`.
@@ -14847,25 +14858,51 @@ declare module '@elastic/eui/src/components/page/_restrict_width' {
 	 * This is file contains the type specific to that prop and a helper
 	 * function for creating the corresponding classNames and style tags
 	 * based on the consumer's configuration
-	 *
-	 * @param {restrictWidth} boolean | number | string The prop value
-	 * @param {style} CSSProperties An object of style attributes if provided
-	 * @returns {{widthClassName: string, newStyle: CSSProperties}} Returns an object with keys for the class name to append to the component's class and the updated style props
 	 */
 	import { CSSProperties } from 'react';
+	export const PAGE_MAX_WIDTH: CSSProperties['maxWidth'];
 	export type _EuiPageRestrictWidth = {
 	    /**
 	     * Sets the max-width of the page,
-	     * set to `true` to use the default size of `1000px (1200 for Amsterdam)`,
+	     * set to `true` to use the default size of `1200px`,
 	     * set to `false` to not restrict the width,
 	     * set to a number for a custom width in px,
 	     * set to a string for a custom width in custom measurement.
 	     */
 	    restrictWidth?: boolean | number | string;
 	};
+	/**
+	 * **DEPRECATED**
+	 * This function calculates the correct class name and combined styles
+	 * based on the `restrictWidth` value passed in
+	 *
+	 * @param restrictWidth `boolean | number | string` The prop value
+	 * @param style `CSSProperties` An object of style attributes if provided
+	 * @returns An object with keys for the `widthClassName` to append to the component's class and the updated `newStyle` props
+	 */
 	export function setPropsForRestrictedPageWidth(restrictWidth: _EuiPageRestrictWidth['restrictWidth'], style?: CSSProperties): {
 	    widthClassName?: string;
-	    newStyle?: CSSProperties;
+	    newStyle: CSSProperties;
+	};
+	/**
+	 * This function calculates the correct just the combined styles
+	 * based on the `restrictWidth` value passed in
+	 *
+	 * @param restrictWidth `boolean | number | string` The prop value
+	 * @param style `CSSProperties` An object of style attributes if provided
+	 * @returns An object of the updated `style` props
+	 */
+	export function setStyleForRestrictedPageWidth(restrictWidth: _EuiPageRestrictWidth['restrictWidth'], style?: CSSProperties): CSSProperties;
+
+}
+declare module '@elastic/eui/src/components/page/page.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiPage: import("@emotion/utils").SerializedStyles;
+	    grow: import("@emotion/utils").SerializedStyles;
+	    column: import("@emotion/utils").SerializedStyles;
+	    row: import("@emotion/utils").SerializedStyles;
+	    restrictWidth: import("@emotion/utils").SerializedStyles;
 	};
 
 }
@@ -14873,14 +14910,13 @@ declare module '@elastic/eui/src/components/page/page' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
-	export const SIZES: ("s" | "none" | "m" | "l")[];
-	export const DIRECTIONS: ("row" | "column")[];
+	import { EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	export interface EuiPageProps extends CommonProps, HTMLAttributes<HTMLDivElement>, _EuiPageRestrictWidth {
 	    /**
 	     * Adjust the padding.
 	     * When using this setting it's best to be consistent throughout all similar usages
 	     */
-	    paddingSize?: typeof SIZES[number];
+	    paddingSize?: EuiPaddingSize;
 	    /**
 	     * Adds `flex-grow: 1` to the whole page for stretching to fit vertically.
 	     * Must be wrapped inside a flexbox, preferrably with `min-height: 100vh`
@@ -14894,13 +14930,20 @@ declare module '@elastic/eui/src/components/page/page' {
 	}
 	export const EuiPage: FunctionComponent<EuiPageProps>;
 
+}
+declare module '@elastic/eui/src/components/page/page_body/page_body.styles' {
+	export const euiPageBodyStyles: () => {
+	    euiPageBody: import("@emotion/utils").SerializedStyles;
+	    restrictWidth: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/page/page_body/page_body' {
 	import React, { PropsWithChildren, ComponentType, ComponentProps } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
 	import { EuiPanelProps } from '@elastic/eui/src/components/panel';
-	export const PADDING_SIZES: ("s" | "none" | "m" | "l")[]; type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType<any>;
+	import { EuiPaddingSize } from '@elastic/eui/src/global_styling'; type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType<any>;
 	export type EuiPageBodyProps<T extends ComponentTypes = 'main'> = CommonProps & ComponentProps<T> & _EuiPageRestrictWidth & {
 	    /**
 	     * Sets the HTML element for `EuiPageBody`.
@@ -14917,9 +14960,9 @@ declare module '@elastic/eui/src/components/page/page_body/page_body' {
 	    /**
 	     * Adjusts the padding
 	     */
-	    paddingSize?: typeof PADDING_SIZES[number];
+	    paddingSize?: EuiPaddingSize;
 	};
-	export const EuiPageBody: <T extends ComponentTypes>({ children, restrictWidth, style, className, component: Component, panelled, panelProps, paddingSize, borderRadius, ...rest }: React.PropsWithChildren<EuiPageBodyProps<T>>) => JSX.Element;
+	export const EuiPageBody: <T extends ComponentTypes>({ children, restrictWidth, className, component: Component, panelled, panelProps, paddingSize, borderRadius, ...rest }: React.PropsWithChildren<EuiPageBodyProps<T>>) => JSX.Element;
 	export {};
 
 }
@@ -14944,7 +14987,11 @@ declare module '@elastic/eui/src/components/page/page_content/page_content' {
 	     */
 	    role?: HTMLAttributes['role'] | null;
 	};
-	export const EuiPageContent: FunctionComponent<EuiPageContentProps>;
+	/**
+	 * **DEPRECATED**
+	 * Use EuiPageSection instead
+	 */
+	export const EuiPageContent_Deprecated: FunctionComponent<EuiPageContentProps>;
 
 }
 declare module '@elastic/eui/src/components/page/page_content/page_content_body' {
@@ -14959,7 +15006,11 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_body'
 	     */
 	    paddingSize?: typeof PADDING_SIZES[number];
 	}
-	export const EuiPageContentBody: FunctionComponent<EuiPageContentBodyProps>;
+	/**
+	 * **DEPRECATED**
+	 * Use EuiPageSection instead
+	 */
+	export const EuiPageContentBody_Deprecated: FunctionComponent<EuiPageContentBodyProps>;
 
 }
 declare module '@elastic/eui/src/components/page/page_content/page_content_header' {
@@ -14972,7 +15023,11 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_heade
 	     */
 	    responsive?: boolean;
 	}
-	export const EuiPageContentHeader: FunctionComponent<EuiPageContentHeaderProps>;
+	/**
+	 * **DEPRECATED**
+	 * Use EuiPageHeader instead
+	 */
+	export const EuiPageContentHeader_Deprecated: FunctionComponent<EuiPageContentHeaderProps>;
 
 }
 declare module '@elastic/eui/src/components/page/page_content/page_content_header_section' {
@@ -14980,18 +15035,45 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_heade
 	import { CommonProps } from '@elastic/eui/src/components/common';
 	export interface EuiPageContentHeaderSectionProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
 	}
-	export const EuiPageContentHeaderSection: FunctionComponent<EuiPageContentHeaderSectionProps>;
+	/**
+	 * **DEPRECATED**
+	 * Use EuiPageHeader instead
+	 */
+	export const EuiPageContentHeaderSection_Deprecated: FunctionComponent<EuiPageContentHeaderSectionProps>;
 
 }
 declare module '@elastic/eui/src/components/page/page_content' {
 	export type { EuiPageContentProps } from '@elastic/eui/src/components/page/page_content/page_content';
-	export { EuiPageContent } from '@elastic/eui/src/components/page/page_content/page_content';
+	export { EuiPageContent_Deprecated } from '@elastic/eui/src/components/page/page_content/page_content';
 	export type { EuiPageContentBodyProps } from '@elastic/eui/src/components/page/page_content/page_content_body';
-	export { EuiPageContentBody } from '@elastic/eui/src/components/page/page_content/page_content_body';
+	export { EuiPageContentBody_Deprecated } from '@elastic/eui/src/components/page/page_content/page_content_body';
 	export type { EuiPageContentHeaderProps } from '@elastic/eui/src/components/page/page_content/page_content_header';
-	export { EuiPageContentHeader } from '@elastic/eui/src/components/page/page_content/page_content_header';
+	export { EuiPageContentHeader_Deprecated } from '@elastic/eui/src/components/page/page_content/page_content_header';
 	export type { EuiPageContentHeaderSectionProps } from '@elastic/eui/src/components/page/page_content/page_content_header_section';
-	export { EuiPageContentHeaderSection } from '@elastic/eui/src/components/page/page_content/page_content_header_section';
+	export { EuiPageContentHeaderSection_Deprecated } from '@elastic/eui/src/components/page/page_content/page_content_header_section';
+
+}
+declare module '@elastic/eui/src/components/page/page_header/page_header.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageHeaderStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiPageHeader: import("@emotion/utils").SerializedStyles;
+	    border: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/page/page_header/page_header_content.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageHeaderContentStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiPageHeaderContent: import("@emotion/utils").SerializedStyles;
+	    top: import("@emotion/utils").SerializedStyles;
+	    bottom: import("@emotion/utils").SerializedStyles;
+	    center: import("@emotion/utils").SerializedStyles;
+	    stretch: import("@emotion/utils").SerializedStyles;
+	    flex: import("@emotion/utils").SerializedStyles;
+	    responsive: import("@emotion/utils").SerializedStyles;
+	    responsiveReverse: import("@emotion/utils").SerializedStyles;
+	    euiPageHeaderContent__titleIcon: import("@emotion/utils").SerializedStyles;
+	};
 
 }
 declare module '@elastic/eui/src/components/page/page_header/page_header_content' {
@@ -15003,6 +15085,8 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	import { EuiFlexGroupProps } from '@elastic/eui/src/components/flex';
 	import { EuiTitleProps } from '@elastic/eui/src/components/title';
 	import { EuiBreadcrumbsProps } from '@elastic/eui/src/components/breadcrumbs';
+	import { PADDING_SIZES } from '@elastic/eui/src/global_styling';
+	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
 	export const ALIGN_ITEMS: readonly ["top", "bottom", "center", "stretch"]; type Tab = EuiTabProps & {
 	    /**
 	     * Visible text of the tab
@@ -15060,7 +15144,16 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	     */
 	    description?: string | ReactNode;
 	}
-	export interface _EuiPageHeaderContentProps extends EuiPageHeaderContentLeft {
+	export interface _EuiPageHeaderContentProps extends EuiPageHeaderContentLeft, _EuiPageRestrictWidth {
+	    /**
+	     * The only option is on/off
+	     */
+	    bottomBorder?: boolean;
+	    /**
+	     * Adjust the padding.
+	     * When using this setting it's best to be consistent throughout all similar usages
+	     */
+	    paddingSize?: typeof PADDING_SIZES[number];
 	    /**
 	     * Set to false if you don't want the children to stack at small screen sizes.
 	     * Set to `reverse` to display the right side content first for the sake of hierarchy (like global time)
@@ -15068,7 +15161,7 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	    responsive?: boolean | 'reverse';
 	    /**
 	     * Vertical alignment of the left and right side content;
-	     * Default is `middle` for custom content, but `top` for when `pageTitle` or `tabs` are included
+	     * Default is `center` for custom content, but `top` for when `pageTitle` or `tabs` are included
 	     */
 	    alignItems?: typeof ALIGN_ITEMS[number];
 	    /**
@@ -15091,23 +15184,29 @@ declare module '@elastic/eui/src/components/page/page_header/page_header_content
 	export const EuiPageHeaderContent: FunctionComponent<EuiPageHeaderContentProps>;
 	export {};
 
+}
+declare module '@elastic/eui/src/components/page/_bottom_border' {
+	export type _EuiPageBottomBorder = {
+	    /**
+	     * Adds a bottom border to separate it from the content after;
+	     * Passing `extended` will ensure the border touches the sides of the parent container.
+	     */
+	    bottomBorder?: boolean | 'extended';
+	};
+
 }
 declare module '@elastic/eui/src/components/page/page_header/page_header' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
 	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiPaddingSize } from '@elastic/eui/src/global_styling';
 	import { _EuiPageHeaderContentProps } from '@elastic/eui/src/components/page/page_header/page_header_content';
 	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
-	export const PADDING_SIZES: ("s" | "none" | "m" | "l")[];
-	export interface EuiPageHeaderProps extends CommonProps, HTMLAttributes<HTMLElement>, _EuiPageHeaderContentProps, _EuiPageRestrictWidth {
-	    /**
-	     * Adjust the padding.
-	     * When using this setting it's best to be consistent throughout all similar usages
-	     */
-	    paddingSize?: typeof PADDING_SIZES[number];
+	import { _EuiPageBottomBorder } from '@elastic/eui/src/components/page/_bottom_border';
+	export interface EuiPageHeaderProps extends CommonProps, HTMLAttributes<HTMLElement>, Omit<_EuiPageHeaderContentProps, 'bottomBorder'>, _EuiPageRestrictWidth, _EuiPageBottomBorder {
 	    /**
-	     * Adds a bottom border to separate it from the content after
+	     * Adjust the overall padding.
 	     */
-	    bottomBorder?: boolean;
+	    paddingSize?: EuiPaddingSize;
 	}
 	export const EuiPageHeader: FunctionComponent<EuiPageHeaderProps>;
 
@@ -15128,6 +15227,62 @@ declare module '@elastic/eui/src/components/page/page_header' {
 	export type { EuiPageHeaderSectionProps } from '@elastic/eui/src/components/page/page_header/page_header_section';
 	export { EuiPageHeaderSection } from '@elastic/eui/src/components/page/page_header/page_header_section';
 
+}
+declare module '@elastic/eui/src/components/page/page_section/page_section.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const ALIGNMENTS: readonly ["top", "center", "horizontalCenter"];
+	export const euiPageSectionStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiPageSection: import("@emotion/utils").SerializedStyles;
+	    grow: import("@emotion/utils").SerializedStyles;
+	    border: import("@emotion/utils").SerializedStyles;
+	    top: import("@emotion/utils").SerializedStyles;
+	    center: import("@emotion/utils").SerializedStyles;
+	    horizontalCenter: import("@emotion/utils").SerializedStyles;
+	};
+	export const euiPageSectionContentStyles: () => {
+	    euiPageSection__content: import("@emotion/utils").SerializedStyles;
+	    center: import("@emotion/utils").SerializedStyles;
+	    restrictWidth: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/page/page_section/page_section' {
+	import { FunctionComponent, HTMLAttributes } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
+	import { _EuiPageBottomBorder } from '@elastic/eui/src/components/page/_bottom_border';
+	import { ALIGNMENTS } from '@elastic/eui/src/components/page/page_section/page_section.styles';
+	import { EuiPaddingSize, _EuiBackgroundColor } from '@elastic/eui/src/global_styling';
+	export type EuiPageSectionProps = CommonProps & _EuiPageRestrictWidth & _EuiPageBottomBorder & {
+	    /**
+	     * Background color of the section;
+	     * Usually a lightened form of the brand colors
+	     */
+	    color?: _EuiBackgroundColor;
+	    /**
+	     * Padding for all four sides
+	     */
+	    paddingSize?: EuiPaddingSize;
+	    /**
+	     * Horizontal and/or vertical alignment of the section contents
+	     */
+	    alignment?: typeof ALIGNMENTS[number];
+	    /**
+	     * When true the panel will grow in height to fill container if parent is a flex group
+	     */
+	    grow?: boolean;
+	    /**
+	     * Passed down to the div wrapper of the section contents
+	     */
+	    contentProps?: HTMLAttributes<HTMLDivElement>;
+	} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+	export const EuiPageSection: FunctionComponent<EuiPageSectionProps>;
+
+}
+declare module '@elastic/eui/src/components/page/page_section' {
+	export type { EuiPageSectionProps } from '@elastic/eui/src/components/page/page_section/page_section';
+	export { EuiPageSection } from '@elastic/eui/src/components/page/page_section/page_section';
+
 }
 declare module '@elastic/eui/src/components/page/page_side_bar/page_side_bar' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -15135,7 +15290,7 @@ declare module '@elastic/eui/src/components/page/page_side_bar/page_side_bar' {
 	export const PADDING_SIZES: ("s" | "none" | "m" | "l")[];
 	export interface EuiPageSideBarProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
 	    /**
-	     * Adds `position: sticky` and affords for any fixed position headers
+	     * Adds `position: sticky`
 	     */
 	    sticky?: boolean;
 	    /**
@@ -15143,24 +15298,74 @@ declare module '@elastic/eui/src/components/page/page_side_bar/page_side_bar' {
 	     */
 	    paddingSize?: typeof PADDING_SIZES[number];
 	}
-	export const EuiPageSideBar: FunctionComponent<EuiPageSideBarProps>;
+	/**
+	 * **DEPRECATED**
+	 * Use the new EuiPageSidebar instead
+	 */
+	export const EuiPageSideBar_Deprecated: FunctionComponent<EuiPageSideBarProps>;
 
 }
 declare module '@elastic/eui/src/components/page/page_side_bar' {
 	export type { EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar/page_side_bar';
-	export { EuiPageSideBar } from '@elastic/eui/src/components/page/page_side_bar/page_side_bar';
+	export { EuiPageSideBar_Deprecated } from '@elastic/eui/src/components/page/page_side_bar/page_side_bar';
+
+}
+declare module '@elastic/eui/src/components/page/page_sidebar/page_sidebar.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageSidebarStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiPageSidebar: import("@emotion/utils").SerializedStyles;
+	    sticky: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/page/page_sidebar/page_sidebar' {
+	import { CSSProperties, FunctionComponent, HTMLAttributes } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiPaddingSize, _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling';
+	export interface EuiPageSidebarProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
+	    /**
+	     * Adjust the padding.
+	     * When using this setting it's best to be consistent throughout all similar usages.
+	     */
+	    paddingSize?: EuiPaddingSize;
+	    /**
+	     * Adds `position: sticky` and affords for any fixed position headers.
+	     */
+	    sticky?: boolean | {
+	        /**
+	         * To account for any fixed elements like headers,
+	         * pass in the value of the total height of those fixed elements.
+	         */
+	        offset?: number;
+	    };
+	    /**
+	     * A minimum width is necessary to maintain size.
+	     * Be sure to take `paddingSize` into account.
+	     */
+	    minWidth?: CSSProperties['width'];
+	    /**
+	     * Sets the `minWidth` to 100% when within these breakpoints.
+	     */
+	    responsive?: _EuiThemeBreakpoint[];
+	}
+	export const EuiPageSidebar: FunctionComponent<EuiPageSidebarProps>;
+
+}
+declare module '@elastic/eui/src/components/page/page_sidebar' {
+	export type { EuiPageSidebarProps } from '@elastic/eui/src/components/page/page_sidebar/page_sidebar';
+	export { EuiPageSidebar } from '@elastic/eui/src/components/page/page_sidebar/page_sidebar';
 
 }
 declare module '@elastic/eui/src/components/page/page_template' {
 	import { CSSProperties, FunctionComponent, ReactNode } from 'react';
-	import { EuiPageProps, SIZES } from '@elastic/eui/src/components/page/page';
+	import { EuiPageProps } from '@elastic/eui/src/components/page/page';
 	import { EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar';
 	import { EuiPageBodyProps } from '@elastic/eui/src/components/page/page_body';
 	import { EuiPageHeaderProps } from '@elastic/eui/src/components/page/page_header';
 	import { EuiPageContentProps, EuiPageContentBodyProps } from '@elastic/eui/src/components/page/page_content';
 	import { EuiBottomBarProps } from '@elastic/eui/src/components/bottom_bar';
 	export const TEMPLATES: readonly ["default", "centeredBody", "centeredContent", "empty"];
-	export type EuiPageTemplateProps = Omit<EuiPageProps, 'paddingSize'> & {
+	export type EuiPageTemplateProps_Deprecated = Omit<EuiPageProps, 'paddingSize'> & {
 	    /**
 	     * Choose between 3 types of templates.
 	     * `default`: Typical layout with nothing centered
@@ -15173,7 +15378,7 @@ declare module '@elastic/eui/src/components/page/page_template' {
 	     * Padding size will not get applied to the over-arching #EuiPage,
 	     * but will propogate through all the components to keep them in sync
 	     */
-	    paddingSize?: typeof SIZES[number];
+	    paddingSize?: 'none' | 's' | 'm' | 'l';
 	    /**
 	     * Optionally include #EuiPageSideBar content.
 	     * The inclusion of this will affect the whole layout
@@ -15220,7 +15425,12 @@ declare module '@elastic/eui/src/components/page/page_template' {
 	     */
 	    minHeight?: CSSProperties['minHeight'];
 	};
-	export const EuiPageTemplate: FunctionComponent<EuiPageTemplateProps>;
+	/**
+	 * This component has been deprecated in favor of the new
+	 * namespaced version. You can still import this component
+	 * for a period of time by importing `as EuiPageTemplate`.
+	 */
+	export const EuiPageTemplate_Deprecated: FunctionComponent<EuiPageTemplateProps_Deprecated>;
 
 }
 declare module '@elastic/eui/src/components/page' {
@@ -15229,13 +15439,183 @@ declare module '@elastic/eui/src/components/page' {
 	export type { EuiPageBodyProps } from '@elastic/eui/src/components/page/page_body';
 	export { EuiPageBody } from '@elastic/eui/src/components/page/page_body';
 	export type { EuiPageContentProps, EuiPageContentBodyProps, EuiPageContentHeaderProps, EuiPageContentHeaderSectionProps, } from '@elastic/eui/src/components/page/page_content';
-	export { EuiPageContent, EuiPageContentBody, EuiPageContentHeader, EuiPageContentHeaderSection, } from '@elastic/eui/src/components/page/page_content';
+	export { EuiPageContent_Deprecated, EuiPageContentBody_Deprecated, EuiPageContentHeader_Deprecated, EuiPageContentHeaderSection_Deprecated, } from '@elastic/eui/src/components/page/page_content';
 	export type { EuiPageHeaderContentProps, EuiPageHeaderProps, EuiPageHeaderSectionProps, } from '@elastic/eui/src/components/page/page_header';
 	export { EuiPageHeader, EuiPageHeaderContent, EuiPageHeaderSection, } from '@elastic/eui/src/components/page/page_header';
+	export type { EuiPageSectionProps } from '@elastic/eui/src/components/page/page_section';
+	export { EuiPageSection } from '@elastic/eui/src/components/page/page_section';
 	export type { EuiPageSideBarProps } from '@elastic/eui/src/components/page/page_side_bar';
-	export { EuiPageSideBar } from '@elastic/eui/src/components/page/page_side_bar';
-	export type { EuiPageTemplateProps } from '@elastic/eui/src/components/page/page_template';
-	export { EuiPageTemplate } from '@elastic/eui/src/components/page/page_template';
+	export { EuiPageSideBar_Deprecated } from '@elastic/eui/src/components/page/page_side_bar';
+	export type { EuiPageSidebarProps } from '@elastic/eui/src/components/page/page_sidebar';
+	export { EuiPageSidebar } from '@elastic/eui/src/components/page/page_sidebar';
+	export type { EuiPageTemplateProps_Deprecated } from '@elastic/eui/src/components/page/page_template';
+	export { EuiPageTemplate_Deprecated } from '@elastic/eui/src/components/page/page_template';
+
+}
+declare module '@elastic/eui/src/components/page_template/outer/page_outer.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageOuterStyles: ({ euiTheme }: UseEuiTheme) => {
+	    euiPageOuter: import("@emotion/utils").SerializedStyles;
+	    grow: import("@emotion/utils").SerializedStyles;
+	    column: import("@emotion/utils").SerializedStyles;
+	    row: import("@emotion/utils").SerializedStyles;
+	};
+
+}
+declare module '@elastic/eui/src/components/page_template/outer/page_outer' {
+	import { FunctionComponent, HTMLAttributes } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling';
+	export interface _EuiPageOuterProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
+	    /**
+	     * Adds `flex-grow: 1` to the whole page for stretching to fit vertically.
+	     * Must be wrapped inside a flexbox, preferrably with `min-height: 100vh`
+	     */
+	    grow?: boolean;
+	    /**
+	     * Changes the `flex-direction` property.
+	     * Flip to `column` when not including a sidebar.
+	     */
+	    direction?: 'row' | 'column';
+	    /**
+	     * When direction is `row`, it will flip to `column` when within these breakpoints
+	     */
+	    responsive?: _EuiThemeBreakpoint[];
+	}
+	export const _EuiPageOuter: FunctionComponent<_EuiPageOuterProps>;
+
+}
+declare module '@elastic/eui/src/components/page_template/outer' {
+	export type { _EuiPageOuterProps } from '@elastic/eui/src/components/page_template/outer/page_outer';
+	export { _EuiPageOuter } from '@elastic/eui/src/components/page_template/outer/page_outer';
+
+}
+declare module '@elastic/eui/src/components/page_template/inner/page_inner.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiPageInnerStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiPageInner: import("@emotion/utils").SerializedStyles;
+	    panelled: import("@emotion/utils").SerializedStyles;
+	    border: {
+	        top: import("@emotion/utils").SerializedStyles;
+	        left: import("@emotion/utils").SerializedStyles;
+	    };
+	};
+
+}
+declare module '@elastic/eui/src/components/page_template/inner/page_inner' {
+	import React, { PropsWithChildren, ComponentType, ComponentProps } from 'react';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	import { EuiPaddingSize, _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling'; type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType;
+	export type _EuiPageInnerProps<T extends ComponentTypes = 'main'> = CommonProps & ComponentProps<T> & {
+	    /**
+	     * Sets which HTML element to render.
+	     */
+	    component?: T;
+	    /**
+	     * Adds a white background and shadow to define the area.
+	     */
+	    panelled?: boolean;
+	    /**
+	     * Adds a single side border, based on the `responsive` state.
+	     * Typically added when a side bar exists.
+	     */
+	    border?: boolean;
+	    /**
+	     * Adjust the overall padding.
+	     */
+	    paddingSize?: EuiPaddingSize;
+	    /**
+	     * Decides at which point the component will be 100vw.
+	     */
+	    responsive?: _EuiThemeBreakpoint[];
+	};
+	export const _EuiPageInner: <T extends ComponentTypes>({ children, component: Component, panelled, border, paddingSize, responsive, ...rest }: React.PropsWithChildren<_EuiPageInnerProps<T>>) => JSX.Element;
+	export {};
+
+}
+declare module '@elastic/eui/src/components/page_template/inner' {
+	export type { _EuiPageInnerProps } from '@elastic/eui/src/components/page_template/inner/page_inner';
+	export { _EuiPageInner } from '@elastic/eui/src/components/page_template/inner/page_inner';
+
+}
+declare module '@elastic/eui/src/components/page_template/bottom_bar/page_bottom_bar' {
+	import { FunctionComponent } from 'react';
+	import { EuiBottomBarProps } from '@elastic/eui/src/components/bottom_bar';
+	import { EuiPageSectionProps } from '@elastic/eui/src/components/page/page_section';
+	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
+	export interface _EuiPageBottomBarProps extends Pick<EuiPageSectionProps, 'paddingSize'>, _EuiPageRestrictWidth, Omit<EuiBottomBarProps, 'paddingSize'> {
+	    /**
+	     * The reference id of the element to insert into
+	     */
+	    parent?: string;
+	}
+	export const _EuiPageBottomBar: FunctionComponent<_EuiPageBottomBarProps>;
+
+}
+declare module '@elastic/eui/src/components/page_template/empty_prompt/page_empty_prompt' {
+	import { FunctionComponent } from 'react';
+	import { EuiEmptyPromptProps } from '@elastic/eui/src/components/empty_prompt';
+	import { EuiPageSectionProps } from '@elastic/eui/src/components/page/page_section';
+	export type _EuiPageEmptyPromptProps = Omit<EuiPageSectionProps, 'title' | 'bottomBorder'> & Omit<EuiEmptyPromptProps, 'paddingSize'> & {
+	    panelled?: boolean;
+	};
+	export const _EuiPageEmptyPrompt: FunctionComponent<_EuiPageEmptyPromptProps>;
+
+}
+declare module '@elastic/eui/src/components/page_template/page_template' {
+	import React, { CSSProperties, FunctionComponent, HTMLAttributes } from 'react';
+	import { _EuiPageOuterProps } from '@elastic/eui/src/components/page_template/outer';
+	import { _EuiPageInnerProps } from '@elastic/eui/src/components/page_template/inner';
+	import { _EuiPageBottomBarProps } from '@elastic/eui/src/components/page_template/bottom_bar/page_bottom_bar';
+	import { _EuiPageEmptyPromptProps } from '@elastic/eui/src/components/page_template/empty_prompt/page_empty_prompt';
+	import { EuiPageHeaderProps, EuiPageSectionProps } from '@elastic/eui/src/components/page';
+	import { _EuiPageRestrictWidth } from '@elastic/eui/src/components/page/_restrict_width';
+	import { _EuiPageBottomBorder } from '@elastic/eui/src/components/page/_bottom_border';
+	import { CommonProps } from '@elastic/eui/src/components/common';
+	export const TemplateContext: React.Context<{
+	    section: {};
+	    header: {};
+	    emptyPrompt: {};
+	    bottomBar: {};
+	}>;
+	export type EuiPageTemplateProps = _EuiPageOuterProps & Omit<_EuiPageInnerProps, 'border'> & _EuiPageRestrictWidth & _EuiPageBottomBorder & {
+	    /**
+	     * Applies a top or left border to the inner contents
+	     * to add separation between content and sidebar when a sidebar exists.
+	     */
+	    contentBorder?: _EuiPageInnerProps['border'];
+	    /**
+	     * Minimum height in which to enforce scrolling
+	     */
+	    minHeight?: CSSProperties['minHeight'];
+	    /**
+	     * To account for any fixed elements like headers,
+	     * pass in the value of the total height of those fixed elements.
+	     * Otherwise they will be calculated based on the data attributes on the body element.
+	     */
+	    offset?: number;
+	    /**
+	     * Passes through some common HTML attributes to the `main` content wrapper
+	     */
+	    mainProps?: CommonProps & HTMLAttributes<HTMLElement>;
+	};
+	/**
+	 * Consumed via `EuiPageTemplate`,
+	 * it controls and propogates most of the shared props per direct child
+	 */
+	export const _EuiPageTemplate: FunctionComponent<EuiPageTemplateProps>;
+	export const EuiPageTemplate: React.FunctionComponent<EuiPageTemplateProps> & {
+	    Sidebar: React.FunctionComponent<import ("@elastic/eui/src/components/page").EuiPageSidebarProps>;
+	    Header: React.FunctionComponent<EuiPageHeaderProps>;
+	    Section: React.FunctionComponent<EuiPageSectionProps>;
+	    BottomBar: React.FunctionComponent<_EuiPageBottomBarProps>;
+	    EmptyPrompt: React.FunctionComponent<_EuiPageEmptyPromptProps>;
+	};
+
+}
+declare module '@elastic/eui/src/components/page_template' {
+	export type { EuiPageTemplateProps } from '@elastic/eui/src/components/page_template/page_template';
+	export { EuiPageTemplate } from '@elastic/eui/src/components/page_template/page_template';
 
 }
 declare module '@elastic/eui/src/global_styling/utility/utility' {
@@ -19023,6 +19403,7 @@ declare module '@elastic/eui/src/components' {
 	export * from '@elastic/eui/src/components/outside_click_detector';
 	export * from '@elastic/eui/src/components/overlay_mask';
 	export * from '@elastic/eui/src/components/page';
+	export * from '@elastic/eui/src/components/page_template';
 	export * from '@elastic/eui/src/components/pagination';
 	export * from '@elastic/eui/src/components/panel';
 	export * from '@elastic/eui/src/components/popover';