@elastic/eui 63.0.5 → 63.0.6

package/es/components/page/page_content/page_content.js

@@ -26,8 +26,7 @@ var horizontalPositionToClassNameMap = {
 };
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 export var EuiPageContent_Deprecated = function EuiPageContent_Deprecated(_ref) {
   var verticalPosition = _ref.verticalPosition,

package/es/components/page/page_content/page_content_body.js

@@ -30,8 +30,7 @@ var paddingSizeToClassNameMap = {
 export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 export var EuiPageContentBody_Deprecated = function EuiPageContentBody_Deprecated(_ref) {
   var children = _ref.children,

package/es/components/page/page_content/page_content_header.js

@@ -19,8 +19,7 @@ import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 export var EuiPageContentHeader_Deprecated = function EuiPageContentHeader_Deprecated(_ref) {
   var children = _ref.children,

package/es/components/page/page_content/page_content_header_section.js

@@ -19,8 +19,7 @@ import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 export var EuiPageContentHeaderSection_Deprecated = function EuiPageContentHeaderSection_Deprecated(_ref) {
   var children = _ref.children,

package/es/components/page/page_section/page_section.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps"];
+var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps", "component"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -34,6 +34,8 @@ export var EuiPageSection = function EuiPageSection(_ref) {
       _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? false : _ref$grow,
       contentProps = _ref.contentProps,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? 'section' : _ref$component,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // Set max-width as a style prop
@@ -46,7 +48,7 @@ export var EuiPageSection = function EuiPageSection(_ref) {
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = euiPageSectionContentStyles();
   var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
-  return ___EmotionJSX("div", _extends({
+  return ___EmotionJSX(Component, _extends({
     css: cssStyles
   }, rest), ___EmotionJSX("div", _extends({
     css: cssContentStyles
@@ -98,5 +100,10 @@ EuiPageSection.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: PropTypes.any
+  contentProps: PropTypes.any,
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired])
 };

package/es/components/page/page_side_bar/page_side_bar.js

@@ -27,8 +27,7 @@ var paddingSizeToClassNameMap = {
 export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
 /**
- * **DEPRECATED**
- * Use the new EuiPageSidebar instead
+ * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead
  */
 export var EuiPageSideBar_Deprecated = function EuiPageSideBar_Deprecated(_ref) {
   var children = _ref.children,

package/es/components/page/page_template.js

@@ -38,7 +38,9 @@ export var TEMPLATES = ['default', 'centeredBody', 'centeredContent', 'empty'];
 /**
  * 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`.
+ * until August 2023 by importing `as EuiPageTemplate`.
+ *
+ * @deprecated use EuiPageTemplate from page_template/page_template instead
  */
 export var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref) {
   var _pageBodyProps2;

package/es/components/page_template/empty_prompt/page_empty_prompt.js

@@ -103,5 +103,10 @@ _EuiPageEmptyPrompt.propTypes = {
        * Passed down to the div wrapper of the section contents
        */
   contentProps: PropTypes.any,
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired]),
   panelled: PropTypes.bool
 };

package/es/components/page_template/page_template.js

@@ -296,7 +296,12 @@ _EuiPageSection.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: PropTypes.any
+  contentProps: PropTypes.any,
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired])
 };
 
 var _EuiPageHeader = function _EuiPageHeader(props) {
@@ -344,6 +349,7 @@ _EuiPageEmptyPrompt.propTypes = {
   alignment: PropTypes.any,
   grow: PropTypes.bool,
   contentProps: PropTypes.any,
+  component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired]),
   panelled: PropTypes.bool
 };
 

package/eui.d.ts

@@ -14986,8 +14986,7 @@ declare module '@elastic/eui/src/components/page/page_content/page_content' {
 	    role?: HTMLAttributes['role'] | null;
 	};
 	/**
-	 * **DEPRECATED**
-	 * Use EuiPageSection instead
+	 * @deprecated Use EuiPageSection instead
 	 */
 	export const EuiPageContent_Deprecated: FunctionComponent<EuiPageContentProps>;
 
@@ -15005,8 +15004,7 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_body'
 	    paddingSize?: typeof PADDING_SIZES[number];
 	}
 	/**
-	 * **DEPRECATED**
-	 * Use EuiPageSection instead
+	 * @deprecated Use EuiPageSection instead
 	 */
 	export const EuiPageContentBody_Deprecated: FunctionComponent<EuiPageContentBodyProps>;
 
@@ -15022,8 +15020,7 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_heade
 	    responsive?: boolean;
 	}
 	/**
-	 * **DEPRECATED**
-	 * Use EuiPageHeader instead
+	 * @deprecated Use EuiPageHeader instead
 	 */
 	export const EuiPageContentHeader_Deprecated: FunctionComponent<EuiPageContentHeaderProps>;
 
@@ -15034,8 +15031,7 @@ declare module '@elastic/eui/src/components/page/page_content/page_content_heade
 	export interface EuiPageContentHeaderSectionProps extends CommonProps, HTMLAttributes<HTMLDivElement> {
 	}
 	/**
-	 * **DEPRECATED**
-	 * Use EuiPageHeader instead
+	 * @deprecated Use EuiPageHeader instead
 	 */
 	export const EuiPageContentHeaderSection_Deprecated: FunctionComponent<EuiPageContentHeaderSectionProps>;
 
@@ -15245,7 +15241,7 @@ declare module '@elastic/eui/src/components/page/page_section/page_section.style
 
 }
 declare module '@elastic/eui/src/components/page/page_section/page_section' {
-	import { FunctionComponent, HTMLAttributes } from 'react';
+	import { FunctionComponent, ComponentType, 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';
@@ -15273,7 +15269,11 @@ declare module '@elastic/eui/src/components/page/page_section/page_section' {
 	     * Passed down to the div wrapper of the section contents
 	     */
 	    contentProps?: HTMLAttributes<HTMLDivElement>;
-	} & Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+	    /**
+	     * Sets which HTML element to render.
+	     */
+	    component?: keyof JSX.IntrinsicElements | ComponentType;
+	} & Omit<HTMLAttributes<Element>, 'color'>;
 	export const EuiPageSection: FunctionComponent<EuiPageSectionProps>;
 
 }
@@ -15297,8 +15297,7 @@ declare module '@elastic/eui/src/components/page/page_side_bar/page_side_bar' {
 	    paddingSize?: typeof PADDING_SIZES[number];
 	}
 	/**
-	 * **DEPRECATED**
-	 * Use the new EuiPageSidebar instead
+	 * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead
 	 */
 	export const EuiPageSideBar_Deprecated: FunctionComponent<EuiPageSideBarProps>;
 
@@ -15426,7 +15425,9 @@ declare module '@elastic/eui/src/components/page/page_template' {
 	/**
 	 * 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`.
+	 * until August 2023 by importing `as EuiPageTemplate`.
+	 *
+	 * @deprecated use EuiPageTemplate from page_template/page_template instead
 	 */
 	export const EuiPageTemplate_Deprecated: FunctionComponent<EuiPageTemplateProps_Deprecated>;
 

package/lib/components/page/page_content/page_content.js

@@ -33,8 +33,7 @@ var horizontalPositionToClassNameMap = {
 };
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 var EuiPageContent_Deprecated = function EuiPageContent_Deprecated(_ref) {
   var verticalPosition = _ref.verticalPosition,

package/lib/components/page/page_content/page_content_body.js

@@ -39,8 +39,7 @@ var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
 exports.PADDING_SIZES = PADDING_SIZES;
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 var EuiPageContentBody_Deprecated = function EuiPageContentBody_Deprecated(_ref) {
   var children = _ref.children,

package/lib/components/page/page_content/page_content_header.js

@@ -24,8 +24,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 var EuiPageContentHeader_Deprecated = function EuiPageContentHeader_Deprecated(_ref) {
   var children = _ref.children,

package/lib/components/page/page_content/page_content_header_section.js

@@ -24,8 +24,7 @@ function _objectWithoutProperties(source, excluded) { if (source == null) return
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 var EuiPageContentHeaderSection_Deprecated = function EuiPageContentHeaderSection_Deprecated(_ref) {
   var children = _ref.children,

package/lib/components/page/page_section/page_section.js

@@ -19,7 +19,7 @@ var _global_styling = require("../../../global_styling");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps"];
+var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps", "component"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -43,6 +43,8 @@ var EuiPageSection = function EuiPageSection(_ref) {
       _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? false : _ref$grow,
       contentProps = _ref.contentProps,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? 'section' : _ref$component,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // Set max-width as a style prop
@@ -55,7 +57,7 @@ var EuiPageSection = function EuiPageSection(_ref) {
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = (0, _page_section.euiPageSectionContentStyles)();
   var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
-  return (0, _react2.jsx)("div", _extends({
+  return (0, _react2.jsx)(Component, _extends({
     css: cssStyles
   }, rest), (0, _react2.jsx)("div", _extends({
     css: cssContentStyles
@@ -109,5 +111,10 @@ EuiPageSection.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: _propTypes.default.any
+  contentProps: _propTypes.default.any,
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired])
 };

package/lib/components/page/page_side_bar/page_side_bar.js

@@ -35,8 +35,7 @@ var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
 exports.PADDING_SIZES = PADDING_SIZES;
 
 /**
- * **DEPRECATED**
- * Use the new EuiPageSidebar instead
+ * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead
  */
 var EuiPageSideBar_Deprecated = function EuiPageSideBar_Deprecated(_ref) {
   var children = _ref.children,

package/lib/components/page/page_template.js

@@ -53,7 +53,9 @@ exports.TEMPLATES = TEMPLATES;
 /**
  * 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`.
+ * until August 2023 by importing `as EuiPageTemplate`.
+ *
+ * @deprecated use EuiPageTemplate from page_template/page_template instead
  */
 var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref) {
   var _pageBodyProps2;

package/lib/components/page_template/empty_prompt/page_empty_prompt.js

@@ -112,5 +112,10 @@ _EuiPageEmptyPrompt.propTypes = {
        * Passed down to the div wrapper of the section contents
        */
   contentProps: _propTypes.default.any,
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired]),
   panelled: _propTypes.default.bool
 };

package/lib/components/page_template/page_template.js

@@ -318,7 +318,12 @@ _EuiPageSection.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: _propTypes.default.any
+  contentProps: _propTypes.default.any,
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired])
 };
 
 var _EuiPageHeader = function _EuiPageHeader(props) {
@@ -366,6 +371,7 @@ _EuiPageEmptyPrompt.propTypes = {
   alignment: _propTypes.default.any,
   grow: _propTypes.default.bool,
   contentProps: _propTypes.default.any,
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired]),
   panelled: _propTypes.default.bool
 };
 

package/optimize/es/components/page/page_content/page_content.js

@@ -21,8 +21,7 @@ var horizontalPositionToClassNameMap = {
 };
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 export var EuiPageContent_Deprecated = function EuiPageContent_Deprecated(_ref) {
   var verticalPosition = _ref.verticalPosition,

package/optimize/es/components/page/page_content/page_content_body.js

@@ -24,8 +24,7 @@ var paddingSizeToClassNameMap = {
 export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 export var EuiPageContentBody_Deprecated = function EuiPageContentBody_Deprecated(_ref) {
   var children = _ref.children,

package/optimize/es/components/page/page_content/page_content_header.js

@@ -14,8 +14,7 @@ import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 export var EuiPageContentHeader_Deprecated = function EuiPageContentHeader_Deprecated(_ref) {
   var children = _ref.children,

package/optimize/es/components/page/page_content/page_content_header_section.js

@@ -14,8 +14,7 @@ import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 export var EuiPageContentHeaderSection_Deprecated = function EuiPageContentHeaderSection_Deprecated(_ref) {
   var children = _ref.children,

package/optimize/es/components/page/page_section/page_section.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps"];
+var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps", "component"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -29,6 +29,8 @@ export var EuiPageSection = function EuiPageSection(_ref) {
       _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? false : _ref$grow,
       contentProps = _ref.contentProps,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? 'section' : _ref$component,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // Set max-width as a style prop
@@ -41,7 +43,7 @@ export var EuiPageSection = function EuiPageSection(_ref) {
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = euiPageSectionContentStyles();
   var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
-  return ___EmotionJSX("div", _extends({
+  return ___EmotionJSX(Component, _extends({
     css: cssStyles
   }, rest), ___EmotionJSX("div", _extends({
     css: cssContentStyles

package/optimize/es/components/page/page_side_bar/page_side_bar.js

@@ -22,8 +22,7 @@ var paddingSizeToClassNameMap = {
 export var PADDING_SIZES = keysOf(paddingSizeToClassNameMap);
 
 /**
- * **DEPRECATED**
- * Use the new EuiPageSidebar instead
+ * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead
  */
 export var EuiPageSideBar_Deprecated = function EuiPageSideBar_Deprecated(_ref) {
   var children = _ref.children,

package/optimize/es/components/page/page_template.js

@@ -32,7 +32,9 @@ export var TEMPLATES = ['default', 'centeredBody', 'centeredContent', 'empty'];
 /**
  * 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`.
+ * until August 2023 by importing `as EuiPageTemplate`.
+ *
+ * @deprecated use EuiPageTemplate from page_template/page_template instead
  */
 export var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref) {
   var _pageBodyProps2;

package/optimize/lib/components/page/page_content/page_content.js

@@ -28,8 +28,7 @@ var horizontalPositionToClassNameMap = {
 };
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 var EuiPageContent_Deprecated = function EuiPageContent_Deprecated(_ref) {
   var verticalPosition = _ref.verticalPosition,

package/optimize/lib/components/page/page_content/page_content_body.js

@@ -34,8 +34,7 @@ var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
 exports.PADDING_SIZES = PADDING_SIZES;
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 var EuiPageContentBody_Deprecated = function EuiPageContentBody_Deprecated(_ref) {
   var children = _ref.children,

package/optimize/lib/components/page/page_content/page_content_header.js

@@ -20,8 +20,7 @@ var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "responsive"];
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 var EuiPageContentHeader_Deprecated = function EuiPageContentHeader_Deprecated(_ref) {
   var children = _ref.children,

package/optimize/lib/components/page/page_content/page_content_header_section.js

@@ -20,8 +20,7 @@ var _react2 = require("@emotion/react");
 var _excluded = ["children", "className"];
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 var EuiPageContentHeaderSection_Deprecated = function EuiPageContentHeaderSection_Deprecated(_ref) {
   var children = _ref.children,

package/optimize/lib/components/page/page_section/page_section.js

@@ -23,7 +23,7 @@ var _global_styling = require("../../../global_styling");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps"];
+var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps", "component"];
 
 var EuiPageSection = function EuiPageSection(_ref) {
   var children = _ref.children,
@@ -39,6 +39,8 @@ var EuiPageSection = function EuiPageSection(_ref) {
       _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? false : _ref$grow,
       contentProps = _ref.contentProps,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? 'section' : _ref$component,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Set max-width as a style prop
   var widthStyles = (0, _restrict_width.setStyleForRestrictedPageWidth)(restrictWidth, contentProps === null || contentProps === void 0 ? void 0 : contentProps.style);
@@ -50,7 +52,7 @@ var EuiPageSection = function EuiPageSection(_ref) {
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = (0, _page_section.euiPageSectionContentStyles)();
   var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
+  return (0, _react2.jsx)(Component, (0, _extends2.default)({
     css: cssStyles
   }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({
     css: cssContentStyles

package/optimize/lib/components/page/page_side_bar/page_side_bar.js

@@ -30,8 +30,7 @@ var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
 exports.PADDING_SIZES = PADDING_SIZES;
 
 /**
- * **DEPRECATED**
- * Use the new EuiPageSidebar instead
+ * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead
  */
 var EuiPageSideBar_Deprecated = function EuiPageSideBar_Deprecated(_ref) {
   var children = _ref.children,

package/optimize/lib/components/page/page_template.js

@@ -49,7 +49,9 @@ exports.TEMPLATES = TEMPLATES;
 /**
  * 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`.
+ * until August 2023 by importing `as EuiPageTemplate`.
+ *
+ * @deprecated use EuiPageTemplate from page_template/page_template instead
  */
 var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref) {
   var _pageBodyProps2;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "63.0.5",
+  "version": "63.0.6",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/page/page_content/page_content.js

@@ -30,8 +30,7 @@ var horizontalPositionToClassNameMap = {
 };
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 var EuiPageContent_Deprecated = function EuiPageContent_Deprecated(_ref) {
   var verticalPosition = _ref.verticalPosition,

package/test-env/components/page/page_content/page_content_body.js

@@ -36,8 +36,7 @@ var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
 exports.PADDING_SIZES = PADDING_SIZES;
 
 /**
- * **DEPRECATED**
- * Use EuiPageSection instead
+ * @deprecated Use EuiPageSection instead
  */
 var EuiPageContentBody_Deprecated = function EuiPageContentBody_Deprecated(_ref) {
   var children = _ref.children,

package/test-env/components/page/page_content/page_content_header.js

@@ -22,8 +22,7 @@ var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "responsive"];
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 var EuiPageContentHeader_Deprecated = function EuiPageContentHeader_Deprecated(_ref) {
   var children = _ref.children,

package/test-env/components/page/page_content/page_content_header_section.js

@@ -22,8 +22,7 @@ var _react2 = require("@emotion/react");
 var _excluded = ["children", "className"];
 
 /**
- * **DEPRECATED**
- * Use EuiPageHeader instead
+ * @deprecated Use EuiPageHeader instead
  */
 var EuiPageContentHeaderSection_Deprecated = function EuiPageContentHeaderSection_Deprecated(_ref) {
   var children = _ref.children,

package/test-env/components/page/page_section/page_section.js

@@ -25,7 +25,7 @@ var _global_styling = require("../../../global_styling");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps"];
+var _excluded = ["children", "alignment", "restrictWidth", "bottomBorder", "paddingSize", "color", "grow", "contentProps", "component"];
 
 var EuiPageSection = function EuiPageSection(_ref) {
   var children = _ref.children,
@@ -41,6 +41,8 @@ var EuiPageSection = function EuiPageSection(_ref) {
       _ref$grow = _ref.grow,
       grow = _ref$grow === void 0 ? false : _ref$grow,
       contentProps = _ref.contentProps,
+      _ref$component = _ref.component,
+      Component = _ref$component === void 0 ? 'section' : _ref$component,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Set max-width as a style prop
   var widthStyles = (0, _restrict_width.setStyleForRestrictedPageWidth)(restrictWidth, contentProps === null || contentProps === void 0 ? void 0 : contentProps.style);
@@ -52,7 +54,7 @@ var EuiPageSection = function EuiPageSection(_ref) {
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = (0, _page_section.euiPageSectionContentStyles)();
   var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth];
-  return (0, _react2.jsx)("div", (0, _extends2.default)({
+  return (0, _react2.jsx)(Component, (0, _extends2.default)({
     css: cssStyles
   }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({
     css: cssContentStyles
@@ -106,5 +108,10 @@ EuiPageSection.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: _propTypes.default.any
+  contentProps: _propTypes.default.any,
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired])
 };

package/test-env/components/page/page_side_bar/page_side_bar.js

@@ -32,8 +32,7 @@ var PADDING_SIZES = (0, _common.keysOf)(paddingSizeToClassNameMap);
 exports.PADDING_SIZES = PADDING_SIZES;
 
 /**
- * **DEPRECATED**
- * Use the new EuiPageSidebar instead
+ * @deprecated Use the new EuiPageSidebar in page/page_sidebar instead
  */
 var EuiPageSideBar_Deprecated = function EuiPageSideBar_Deprecated(_ref) {
   var children = _ref.children,

package/test-env/components/page/page_template.js

@@ -51,7 +51,9 @@ exports.TEMPLATES = TEMPLATES;
 /**
  * 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`.
+ * until August 2023 by importing `as EuiPageTemplate`.
+ *
+ * @deprecated use EuiPageTemplate from page_template/page_template instead
  */
 var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref) {
   var _pageBodyProps2;

package/test-env/components/page_template/empty_prompt/page_empty_prompt.js

@@ -110,5 +110,10 @@ _EuiPageEmptyPrompt.propTypes = {
        * Passed down to the div wrapper of the section contents
        */
   contentProps: _propTypes.default.any,
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired]),
   panelled: _propTypes.default.bool
 };

package/test-env/components/page_template/page_template.js

@@ -306,7 +306,12 @@ _EuiPageSection.propTypes = {
   /**
        * Passed down to the div wrapper of the section contents
        */
-  contentProps: _propTypes.default.any
+  contentProps: _propTypes.default.any,
+
+  /**
+       * Sets which HTML element to render.
+       */
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired])
 };
 
 var _EuiPageHeader = function _EuiPageHeader(props) {
@@ -354,6 +359,7 @@ _EuiPageEmptyPrompt.propTypes = {
   alignment: _propTypes.default.any,
   grow: _propTypes.default.bool,
   contentProps: _propTypes.default.any,
+  component: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.elementType.isRequired]),
   panelled: _propTypes.default.bool
 };