@elastic/eui 70.2.4 → 70.3.0

package/es/components/modal/modal_footer.js

@@ -16,6 +16,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classnames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiModalFooterStyles } from './modal_footer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalFooter = function EuiModalFooter(_ref) {
   var className = _ref.className,
@@ -23,7 +25,11 @@ export var EuiModalFooter = function EuiModalFooter(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalFooter', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalFooterStyles(euiTheme);
+  var cssStyles = [styles.euiModalFooter];
   return ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes
   }, rest), children);
 };

package/es/components/modal/modal_footer.styles.js

@@ -0,0 +1,15 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+import { euiBreakpoint } from '../../global_styling';
+export var euiModalFooterStyles = function euiModalFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalFooter: /*#__PURE__*/css("display:flex;justify-content:flex-end;padding-block:", euiTheme.size.base, " ", euiTheme.size.l, ";padding-inline:", euiTheme.size.l, ";flex-grow:0;flex-shrink:0;gap:", euiTheme.size.base, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{background:", euiTheme.colors.lightestShade, ";padding-block:", euiTheme.size.m, ";padding-inline:", euiTheme.size.l, ";justify-content:stretch;gap:", euiTheme.size.s, ";>*{flex:1;}};label:euiModalFooter;")
+  };
+};

package/es/components/modal/modal_header.js

@@ -16,6 +16,8 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classnames from 'classnames';
+import { useEuiTheme } from '../../services';
+import { euiModalHeaderStyles } from './modal_header.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalHeader = function EuiModalHeader(_ref) {
   var className = _ref.className,
@@ -23,7 +25,11 @@ export var EuiModalHeader = function EuiModalHeader(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalHeader', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiModalHeaderStyles(euiTheme);
+  var cssStyles = [styles.euiModalHeader];
   return ___EmotionJSX("div", _extends({
+    css: cssStyles,
     className: classes
   }, rest), children);
 };

package/es/components/modal/modal_header.styles.js

@@ -0,0 +1,14 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import { css } from '@emotion/react';
+export var euiModalHeaderStyles = function euiModalHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;align-items:center;padding-inline:", euiTheme.size.l, " ", euiTheme.size.xxl, ";padding-block:", euiTheme.size.l, " ", euiTheme.size.base, ";flex-grow:0;flex-shrink:0;&+.euiModalFooter{padding-block-start:", euiTheme.size.s, ";};label:euiModalHeader;")
+  };
+};

package/es/components/modal/modal_header_title.js

@@ -16,6 +16,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classnames from 'classnames';
+import { EuiTitle } from '../title';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiModalHeaderTitle = function EuiModalHeaderTitle(_ref) {
   var className = _ref.className,
@@ -23,7 +24,8 @@ export var EuiModalHeaderTitle = function EuiModalHeaderTitle(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var classes = classnames('euiModalHeader__title', className);
-  return ___EmotionJSX("div", _extends({
+  return ___EmotionJSX(EuiTitle, _extends({
+    size: "m",
     className: classes
   }, rest), /*#__PURE__*/React.isValidElement(children) ? children : ___EmotionJSX("h1", null, children));
 };

package/es/components/page_template/outer/page_outer.js

@@ -50,7 +50,7 @@ _EuiPageOuter.propTypes = {
   direction: PropTypes.oneOf(["row", "column"]),
 
   /**
-     * When direction is `row`, it will flip to `column` when within these breakpoints
+     * When direction is `row`, it will flip to `column` when within these breakpoints.
      */
   responsive: PropTypes.arrayOf(PropTypes.any.isRequired),
   className: PropTypes.string,

package/es/components/page_template/page_template.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "restrictWidth", "paddingSize", "grow", "bottomBorder", "offset", "panelled", "contentBorder", "mainProps", "className", "minHeight", "responsive"];
+var _excluded = ["children", "responsive", "restrictWidth", "paddingSize", "grow", "bottomBorder", "offset", "panelled", "contentBorder", "component", "mainProps", "className", "minHeight"];
 
 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); }
 
@@ -55,6 +55,8 @@ export var TemplateContext = /*#__PURE__*/createContext({
  */
 export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   var children = _ref.children,
+      _ref$responsive = _ref.responsive,
+      responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
       _ref$restrictWidth = _ref.restrictWidth,
       restrictWidth = _ref$restrictWidth === void 0 ? true : _ref$restrictWidth,
       _ref$paddingSize = _ref.paddingSize,
@@ -65,12 +67,11 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
       _offset = _ref.offset,
       panelled = _ref.panelled,
       contentBorder = _ref.contentBorder,
+      component = _ref.component,
       mainProps = _ref.mainProps,
       className = _ref.className,
       _ref$minHeight = _ref.minHeight,
       minHeight = _ref$minHeight === void 0 ? '460px' : _ref$minHeight,
-      _ref$responsive = _ref.responsive,
-      responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var _useEuiTheme = useEuiTheme(),
@@ -178,6 +179,7 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
     style: pageStyle,
     className: classes
   }), sidebar, ___EmotionJSX(EuiPageInner, _extends({}, mainProps, {
+    component: component,
     id: pageInnerId,
     border: innerBordered(),
     panelled: innerPanelled(),
@@ -198,7 +200,11 @@ _EuiPageTemplate.propTypes = {
   direction: PropTypes.oneOf(["row", "column"]),
 
   /**
-     * When direction is `row`, it will flip to `column` when within these breakpoints
+       * Decides at which point the main content wrapper will be 100vw.
+       */
+
+  /**
+     * When direction is `row`, it will flip to `column` when within these breakpoints.
      */
   responsive: PropTypes.arrayOf(PropTypes.any.isRequired),
   className: PropTypes.string,
@@ -206,6 +212,16 @@ _EuiPageTemplate.propTypes = {
   "data-test-subj": PropTypes.string,
   css: PropTypes.any,
 
+  /**
+       * Adds a white background and shadow to define the area.
+       */
+  panelled: PropTypes.bool,
+
+  /**
+       * Adjust the overall padding.
+       */
+  paddingSize: PropTypes.any,
+
   /**
      * Sets the max-width of the page,
      * set to `true` to use the default size of `1200px`,
@@ -225,7 +241,7 @@ _EuiPageTemplate.propTypes = {
        * Applies a top or left border to the inner contents
        * to add separation between content and sidebar when a sidebar exists.
        */
-  contentBorder: PropTypes.bool,
+  contentBorder: PropTypes.any,
 
   /**
        * Minimum height in which to enforce scrolling
@@ -247,7 +263,13 @@ _EuiPageTemplate.propTypes = {
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
     css: PropTypes.any
-  })
+  }),
+
+  /**
+       * Sets which HTML element to render for the `main` content wrapper
+       * @default main
+       */
+  component: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.elementType.isRequired])
 };
 
 var _EuiPageSection = function _EuiPageSection(props) {

package/es/components/popover/popover.a11y.js

@@ -0,0 +1,83 @@
+function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
+
+function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) { arr2[i] = arr[i]; } return arr2; }
+
+function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Symbol !== "undefined" && arr[Symbol.iterator] || arr["@@iterator"]; if (_i == null) return; var _arr = []; var _n = true; var _d = false; var _s, _e; try { for (_i = _i.call(arr); !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"] != null) _i["return"](); } finally { if (_d) throw _e; } } return _arr; }
+
+function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../cypress/support"/>
+import React, { useState } from 'react';
+import { EuiPopover } from './popover';
+import { EuiButtonEmpty } from '../button';
+import { EuiText } from '../text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var Popover = function Popover() {
+  var _useState = useState(false),
+      _useState2 = _slicedToArray(_useState, 2),
+      isPopoverOpen = _useState2[0],
+      setIsPopoverOpen = _useState2[1];
+
+  var onButtonClick = function onButtonClick() {
+    return setIsPopoverOpen(function (isPopoverOpen) {
+      return !isPopoverOpen;
+    });
+  };
+
+  var closePopover = function closePopover() {
+    return setIsPopoverOpen(false);
+  };
+
+  var button = ___EmotionJSX(EuiButtonEmpty, {
+    iconType: "documentation",
+    iconSide: "right",
+    onClick: onButtonClick
+  }, "How it works");
+
+  var popoverProps = {
+    button: button,
+    isOpen: isPopoverOpen,
+    closePopover: closePopover
+  };
+  return ___EmotionJSX(EuiPopover, popoverProps, ___EmotionJSX(EuiText, {
+    style: {
+      width: 300
+    }
+  }, ___EmotionJSX("p", null, "Popover content that\u2019s wider than the default width")));
+};
+
+beforeEach(function () {
+  cy.mount(___EmotionJSX(Popover, null));
+  cy.get('div.euiPopover__panel').should('not.exist');
+});
+describe('EuiPopover', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on render', function () {
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is opened', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations when popover is closed', function () {
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('exist');
+      cy.get('button.euiButtonEmpty').click();
+      cy.get('div.euiPopover__panel').should('not.exist');
+      cy.checkAxe();
+    });
+  });
+});

package/es/components/search_bar/query/default_syntax.js

@@ -3511,7 +3511,8 @@ var printValue = function printValue(value, options) {
     return value.toString();
   }
 
-  if (value.length === 0 || value.match(/\s/) || value.toLowerCase() === 'or') {
+  if (value.length === 0 || value.match(/[^\w\-_*:()"/\\]/) || // Escape spaces and special characters not used as syntax identifiers
+  value.toLowerCase() === 'or') {
     return "\"".concat(escapePhraseValue(value), "\"");
   }
 

package/es/components/tabs/tabs.a11y.js

@@ -0,0 +1,97 @@
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../cypress/support"/>
+import React from 'react';
+import { EuiTabbedContent } from './tabbed_content';
+import { EuiSpacer } from '../spacer';
+import { EuiText } from '../text';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var tabs = [{
+  id: 'cobalt--id',
+  name: 'Cobalt',
+  content: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), ___EmotionJSX(EuiText, null, ___EmotionJSX("p", null, "Cobalt is a chemical element with symbol Co and atomic number 27. Like nickel, cobalt is found in the Earth\u2019s crust only in chemically combined form, save for small deposits found in alloys of natural meteoric iron. The free element, produced by reductive smelting, is a hard, lustrous, silver-gray metal.")))
+}, {
+  id: 'dextrose--id',
+  name: 'Dextrose',
+  content: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), ___EmotionJSX(EuiText, null, ___EmotionJSX("p", null, "Intravenous sugar solution, also known as dextrose solution, is a mixture of dextrose (glucose) and water. It is used to treat low blood sugar or water loss without electrolyte loss.")))
+}, {
+  id: 'hydrogen--id',
+  name: 'Hydrogen',
+  content: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), ___EmotionJSX(EuiText, null, ___EmotionJSX("p", null, "Hydrogen is a chemical element with symbol H and atomic number 1. With a standard atomic weight of 1.008, hydrogen is the lightest element on the periodic table")))
+}, {
+  id: 'monosodium_glutammate--id',
+  name: 'Monosodium Glutamate',
+  content: ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), ___EmotionJSX(EuiText, null, ___EmotionJSX("p", null, "Monosodium glutamate (MSG, also known as sodium glutamate) is the sodium salt of glutamic acid, one of the most abundant naturally occurring non-essential amino acids. Monosodium glutamate is found naturally in tomatoes, cheese and other foods.")))
+}];
+var defaultTabProps = {
+  tabs: tabs,
+  initialSelectedTab: tabs[0],
+  autoFocus: 'selected',
+  onTabClick: function onTabClick() {}
+};
+describe('EuiTabs', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations with default props', function () {
+      cy.mount(___EmotionJSX(EuiTabbedContent, defaultTabProps));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with second tab open on render', function () {
+      var secondSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[1]
+      });
+
+      cy.mount(___EmotionJSX(EuiTabbedContent, secondSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with third tab open on render', function () {
+      var thirdSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[2]
+      });
+
+      cy.mount(___EmotionJSX(EuiTabbedContent, thirdSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with last tab open on render', function () {
+      var lastSelectedTab = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        initialSelectedTab: tabs[3]
+      });
+
+      cy.mount(___EmotionJSX(EuiTabbedContent, lastSelectedTab));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with all tabs disabled except first', function () {
+      var disabledTabs = tabs.map(function (tab, i) {
+        if (i === 0) {
+          return tab;
+        }
+
+        return _objectSpread(_objectSpread({}, tab), {}, {
+          disabled: true
+        });
+      });
+
+      var disabledTabProps = _objectSpread(_objectSpread({}, defaultTabProps), {}, {
+        tabs: disabledTabs
+      });
+
+      cy.mount(___EmotionJSX(EuiTabbedContent, disabledTabProps));
+      cy.get('div.euiTabs').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/es/components/tree_view/tree_view.a11y.js

@@ -0,0 +1,74 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+/// <reference types="../../../cypress/support"/>
+import React from 'react';
+import { EuiTreeView } from './tree_view';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var TreeView = function TreeView() {
+  var items = [{
+    label: 'Item One',
+    id: 'item_one',
+    isExpanded: true,
+    children: [{
+      label: 'Item A',
+      id: 'item_a'
+    }, {
+      label: 'Item B',
+      id: 'item_b',
+      children: [{
+        label: 'A Cloud',
+        id: 'item_cloud'
+      }, {
+        label: "I'm a Bug",
+        id: 'item_bug',
+        className: 'classForBug'
+      }]
+    }, {
+      label: 'Item C',
+      id: 'item_c',
+      children: [{
+        label: 'Another Cloud',
+        id: 'item_cloud2'
+      }, {
+        label: 'Another Bug',
+        id: 'item_bug2'
+      }]
+    }]
+  }, {
+    label: 'Item Two',
+    id: 'item_two'
+  }];
+  var defaultTreeViewProps = {
+    items: items,
+    'aria-label': 'Sample folder tree'
+  };
+  return ___EmotionJSX("div", {
+    style: {
+      width: '20rem'
+    }
+  }, ___EmotionJSX(EuiTreeView, defaultTreeViewProps));
+};
+
+describe('EuiTreeView', function () {
+  describe('Automated accessibility check', function () {
+    it('has zero violations on first render', function () {
+      cy.mount(___EmotionJSX(TreeView, null));
+      cy.get('div.euiTreeView__wrapper').should('exist');
+      cy.checkAxe();
+    });
+    it('has zero violations with a nested child expanded', function () {
+      cy.mount(___EmotionJSX(TreeView, null));
+      cy.get('div.euiTreeView__wrapper').should('exist');
+      cy.get('button#item_b').realClick();
+      cy.get('button#item_b').should('have.attr', 'aria-expanded', 'true');
+      cy.get('li.euiTreeView__node').contains('A Cloud').should('exist');
+      cy.checkAxe();
+    });
+  });
+});

package/es/global_styling/utility/animations.js

@@ -1,4 +1,4 @@
-var _templateObject;
+var _templateObject, _templateObject2;
 
 function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 
@@ -10,4 +10,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
  * Side Public License, v 1.
  */
 import { keyframes } from '@emotion/react';
-export var euiAnimFadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
+export var euiAnimFadeIn = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: 0;\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])));
+export var euiAnimSlideInUp = function euiAnimSlideInUp(size) {
+  return keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n   0% {\n    opacity: 0;\n    transform: translateY(", ");\n  }\n\n  100% {\n    opacity: 1;\n    transform: translateY(0);\n  }\n"])), size);
+};

package/eui.d.ts

@@ -7567,6 +7567,7 @@ declare module '@elastic/eui/src/global_styling/reset/global_styles' {
 }
 declare module '@elastic/eui/src/global_styling/utility/animations' {
 	export const euiAnimFadeIn: import("@emotion/serialize").Keyframes;
+	export const euiAnimSlideInUp: (size: string) => import("@emotion/serialize").Keyframes;
 
 }
 declare module '@elastic/eui/src/global_styling' {
@@ -8086,6 +8087,8 @@ declare module '@elastic/eui/src/components/badge/beta_badge/beta_badge.styles'
 	        };
 	    };
 	    euiBetaBadge__icon: import("@emotion/utils").SerializedStyles;
+	    baseline: import("@emotion/utils").SerializedStyles;
+	    middle: import("@emotion/utils").SerializedStyles;
 	};
 	export const getBadgeColors: (backgroundColor: string, { euiTheme }: UseEuiTheme) => string;
 
@@ -8098,7 +8101,9 @@ declare module '@elastic/eui/src/components/badge/beta_badge/beta_badge' {
 	export const COLORS: readonly ["accent", "subdued", "hollow"];
 	export type BetaBadgeColor = typeof COLORS[number];
 	export const SIZES: readonly ["s", "m"];
-	export type BetaBadgeSize = typeof SIZES[number]; type WithButtonProps = {
+	export type BetaBadgeSize = typeof SIZES[number];
+	export const ALIGNMENTS: readonly ["baseline", "middle"];
+	export type BetaBadgeAlignment = typeof ALIGNMENTS[number]; type WithButtonProps = {
 	    /**
 	     * Will apply an onclick to the badge itself
 	     */
@@ -8155,6 +8160,10 @@ declare module '@elastic/eui/src/components/badge/beta_badge/beta_badge' {
 	     */
 	    color?: BetaBadgeColor;
 	    size?: BetaBadgeSize;
+	    /**
+	     * Sets the `vertical-align` CSS property
+	     */
+	    alignment?: BetaBadgeAlignment;
 	} & ExclusiveUnion<LabelAsNode, LabelAsString>;
 	export type EuiBetaBadgeProps = CommonProps & ExclusiveUnion<ExclusiveUnion<WithButtonProps, WithAnchorProps>, WithSpanProps> & BadgeProps;
 	export const EuiBetaBadge: FunctionComponent<EuiBetaBadgeProps>;
@@ -15487,6 +15496,16 @@ declare module '@elastic/eui/src/components/markdown_editor/markdown_format' {
 	};
 	export const EuiMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps>;
 
+}
+declare module '@elastic/eui/src/components/modal/modal.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiModalStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiModal: import("@emotion/utils").SerializedStyles;
+	    defaultMaxWidth: import("@emotion/utils").SerializedStyles;
+	    confirmation: import("@emotion/utils").SerializedStyles;
+	    euiModal__closeIcon: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/modal/modal' {
 	import React, { FunctionComponent, ReactNode, HTMLAttributes } from 'react';
@@ -15513,6 +15532,13 @@ declare module '@elastic/eui/src/components/modal/modal' {
 	}
 	export const EuiModal: FunctionComponent<EuiModalProps>;
 
+}
+declare module '@elastic/eui/src/components/modal/modal_footer.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiModalFooterStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiModalFooter: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/modal/modal_footer' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -15520,6 +15546,13 @@ declare module '@elastic/eui/src/components/modal/modal_footer' {
 	export type EuiModalFooterProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps>;
 	export const EuiModalFooter: EuiModalFooterProps;
 
+}
+declare module '@elastic/eui/src/components/modal/modal_header.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiModalHeaderStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiModalHeader: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/modal/modal_header' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -15534,6 +15567,14 @@ declare module '@elastic/eui/src/components/modal/modal_header_title' {
 	export type EuiModalHeaderTitleProps = FunctionComponent<HTMLAttributes<HTMLDivElement> & CommonProps>;
 	export const EuiModalHeaderTitle: EuiModalHeaderTitleProps;
 
+}
+declare module '@elastic/eui/src/components/modal/modal_body.styles' {
+	import { UseEuiTheme } from '@elastic/eui/src/services';
+	export const euiModalBodyStyles: (euiThemeContext: UseEuiTheme) => {
+	    euiModalBody: import("@emotion/utils").SerializedStyles;
+	    euiModalBody__overflow: import("@emotion/utils").SerializedStyles;
+	};
+
 }
 declare module '@elastic/eui/src/components/modal/modal_body' {
 	import { FunctionComponent, HTMLAttributes } from 'react';
@@ -15546,7 +15587,7 @@ declare module '@elastic/eui/src/components/modal/confirm_modal' {
 	import React, { FunctionComponent, ReactNode } from 'react';
 	import { EuiModalProps } from '@elastic/eui/src/components/modal/modal';
 	import { EuiButtonColor } from '@elastic/eui/src/components/button';
-	export interface EuiConfirmModalProps extends Omit<EuiModalProps, 'children' | 'initialFocus' | 'onClose' | 'title'> {
+	export interface EuiConfirmModalProps extends Omit<EuiModalProps, 'children' | 'onClose' | 'title'> {
 	    /**
 	     * ReactNode to render as this component's content
 	     */
@@ -15558,6 +15599,10 @@ declare module '@elastic/eui/src/components/modal/confirm_modal' {
 	    onConfirm?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 	    confirmButtonDisabled?: boolean;
 	    className?: string;
+	    /**
+	     * Allows focusing either the confirm or cancel button on modal initialization.
+	     * Will take precedence over `initialFocus`, if `initialFocus` is passed.
+	     */
 	    defaultFocusedButton?: typeof CONFIRM_BUTTON | typeof CANCEL_BUTTON;
 	    buttonColor?: EuiButtonColor;
 	    /**
@@ -16506,7 +16551,7 @@ declare module '@elastic/eui/src/components/page_template/outer/page_outer' {
 	     */
 	    direction?: 'row' | 'column';
 	    /**
-	     * When direction is `row`, it will flip to `column` when within these breakpoints
+	     * When direction is `row`, it will flip to `column` when within these breakpoints.
 	     */
 	    responsive?: _EuiThemeBreakpoint[];
 	}
@@ -16533,7 +16578,8 @@ declare module '@elastic/eui/src/components/page_template/inner/page_inner.style
 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;
+	import { EuiPaddingSize, _EuiThemeBreakpoint } from '@elastic/eui/src/global_styling';
+	export type ComponentTypes = keyof JSX.IntrinsicElements | ComponentType;
 	export type _EuiPageInnerProps<T extends ComponentTypes = 'main'> = CommonProps & ComponentProps<T> & {
 	    /**
 	     * Sets which HTML element to render.
@@ -16553,12 +16599,11 @@ declare module '@elastic/eui/src/components/page_template/inner/page_inner' {
 	     */
 	    paddingSize?: EuiPaddingSize;
 	    /**
-	     * Decides at which point the component will be 100vw.
+	     * Decides at which point the main content wrapper 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' {
@@ -16594,6 +16639,7 @@ 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 { ComponentTypes } from '@elastic/eui/src/components/page_template/inner/page_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';
@@ -16606,7 +16652,7 @@ declare module '@elastic/eui/src/components/page_template/page_template' {
 	    emptyPrompt: {};
 	    bottomBar: {};
 	}>;
-	export type EuiPageTemplateProps = _EuiPageOuterProps & Omit<_EuiPageInnerProps, 'border'> & _EuiPageRestrictWidth & _EuiPageBottomBorder & {
+	export type EuiPageTemplateProps = _EuiPageOuterProps & Omit<_EuiPageInnerProps, 'border' | 'component'> & _EuiPageRestrictWidth & _EuiPageBottomBorder & {
 	    /**
 	     * Applies a top or left border to the inner contents
 	     * to add separation between content and sidebar when a sidebar exists.
@@ -16626,6 +16672,11 @@ declare module '@elastic/eui/src/components/page_template/page_template' {
 	     * Passes through some common HTML attributes to the `main` content wrapper
 	     */
 	    mainProps?: CommonProps & HTMLAttributes<HTMLElement>;
+	    /**
+	     * Sets which HTML element to render for the `main` content wrapper
+	     * @default main
+	     */
+	    component?: ComponentTypes;
 	};
 	/**
 	 * Consumed via `EuiPageTemplate`,