@elastic/eui 70.2.3 → 70.3.0

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

@@ -0,0 +1,16 @@
+/*
+ * 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 { euiYScrollWithShadows, euiBreakpoint } from '../../global_styling';
+export var euiModalBodyStyles = function euiModalBodyStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiModalBody: /*#__PURE__*/css("flex-grow:1;overflow:hidden;display:flex;flex-direction:column;&:last-of-type .euiModalBody__overflow{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody;"),
+    euiModalBody__overflow: /*#__PURE__*/css(euiYScrollWithShadows(euiThemeContext), ";padding-inline:", euiTheme.size.l, ";padding-block:", euiTheme.size.s, ";", euiBreakpoint(euiThemeContext, ['xs', 's']), "{padding-block-end:", euiTheme.size.l, ";};label:euiModalBody__overflow;")
+  };
+};

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);
+};