@elastic/eui 63.0.3 → 65.0.0

package/es/components/page/page_header/page_header_content.js

@@ -220,6 +220,7 @@ EuiPageHeaderContent.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * The only option is on/off
@@ -280,6 +281,7 @@ EuiPageHeaderContent.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
     textTransform: PropTypes.any,
     id: PropTypes.string
   }),
@@ -301,6 +303,7 @@ EuiPageHeaderContent.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
     href: PropTypes.string,
     rel: PropTypes.string,
     onClick: PropTypes.func,
@@ -350,6 +353,7 @@ EuiPageHeaderContent.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
          * ReactNode to render as this component's content

package/es/components/page/page_header/page_header_section.js

@@ -30,5 +30,6 @@ export var EuiPageHeaderSection = function EuiPageHeaderSection(_ref) {
 EuiPageHeaderSection.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

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

@@ -58,6 +58,7 @@ EuiPageSection.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Sets the max-width of the page,

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

@@ -57,5 +57,6 @@ EuiPageSideBar_Deprecated.propTypes = {
   paddingSize: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/page/page_sidebar/page_sidebar.js

@@ -65,7 +65,9 @@ export var EuiPageSidebar = function EuiPageSidebar(_ref) {
 
   useEffect(function () {
     if (sticky) {
-      var euiHeaderFixedCounter = Number(document.body.dataset.fixedHeaders);
+      var _document$body$datase;
+
+      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       var offset = _typeof(sticky) === 'object' ? sticky === null || sticky === void 0 ? void 0 : sticky.offset : themeContext.euiTheme.base * 3 * euiHeaderFixedCounter;
       setInlineStyles(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, style), logicalStyle('min-width', isResponding ? '100%' : minWidth)), logicalStyle('top', offset)), logicalStyle('max-height', "calc(100vh - ".concat(offset, "px)"))));
     }
@@ -106,5 +108,6 @@ EuiPageSidebar.propTypes = {
   responsive: PropTypes.arrayOf(PropTypes.any.isRequired),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/page/page_template.js

@@ -31,7 +31,7 @@ import { EuiPageContent_Deprecated as EuiPageContent, EuiPageContentBody_Depreca
 import { EuiBottomBar } from '../bottom_bar';
 import { useIsWithinBreakpoints } from '../../services';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
-import { useEuiPaddingSize } from '../../global_styling';
+import { useEuiPaddingSize, logicalCSS } from '../../global_styling';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TEMPLATES = ['default', 'centeredBody', 'centeredContent', 'empty'];
 
@@ -67,7 +67,7 @@ export var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // BWC page header margin to match padding
-  var headerMargin = /*#__PURE__*/css("margin-bottom: ".concat(useEuiPaddingSize(paddingSize)), ";label:headerMargin;");
+  var headerMargin = /*#__PURE__*/css(logicalCSS('margin-bottom', useEuiPaddingSize(paddingSize)), ";label:headerMargin;");
   /**
    * Full height ~madness~ logic
    */
@@ -376,7 +376,8 @@ EuiPageTemplate_Deprecated.propTypes = {
     paddingSize: PropTypes.any,
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   }),
 
   /**
@@ -390,6 +391,7 @@ EuiPageTemplate_Deprecated.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
        * Sets the max-width of the page,
@@ -414,6 +416,7 @@ EuiPageTemplate_Deprecated.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
        * Sets the max-width of the page,
@@ -452,6 +455,7 @@ EuiPageTemplate_Deprecated.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
        * Adds a medium shadow to the panel;
@@ -536,6 +540,7 @@ EuiPageTemplate_Deprecated.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
        * Sets the max-width of the page,
@@ -560,6 +565,7 @@ EuiPageTemplate_Deprecated.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
          * How to position the bottom bar against its parent.

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

@@ -68,6 +68,7 @@ _EuiPageEmptyPrompt.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Sets the max-width of the page,

package/es/components/page_template/inner/page_inner.styles.js

@@ -15,8 +15,8 @@ export var euiPageInnerStyles = function euiPageInnerStyles(euiThemeContext) {
     euiPageInner: /*#__PURE__*/css("display:flex;flex-direction:column;align-items:stretch;flex:1 1 100%;", logicalCSS('max-width', '100%'), " ", logicalCSS('min-width', '0'), ";;label:euiPageInner;"),
     panelled: /*#__PURE__*/css("background:", euiBackgroundColor(euiThemeContext, 'plain'), ";", euiShadow(euiThemeContext, 'm'), ";;label:panelled;"),
     border: {
-      top: /*#__PURE__*/css("border-top:", euiThemeContext.euiTheme.border.width.thin, " solid ", borderColor, ";;label:top;"),
-      left: /*#__PURE__*/css("border-left:", euiThemeContext.euiTheme.border.width.thin, " solid ", borderColor, ";;label:left;")
+      top: /*#__PURE__*/css(logicalCSS('border-top', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:top;"),
+      left: /*#__PURE__*/css(logicalCSS('border-left', "".concat(euiThemeContext.euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:left;")
     }
   };
 };

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

@@ -55,5 +55,6 @@ _EuiPageOuter.propTypes = {
   responsive: PropTypes.arrayOf(PropTypes.any.isRequired),
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

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

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * Side Public License, v 1.
  */
 import { css } from '@emotion/react';
+import { logicalCSS } from '../../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "15mvjmo-row",
@@ -39,7 +40,8 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 export var euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
   var euiTheme = _ref4.euiTheme;
   return {
-    euiPageOuter: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;max-width:100%;;label:euiPageOuter;"),
+    euiPageOuter: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", logicalCSS('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
+    ), ";;label:euiPageOuter;"),
     // Grow
     grow: _ref3,
     // Direction

package/es/components/page_template/page_template.js

@@ -89,7 +89,9 @@ export var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   });
   useEffect(function () {
     if (_offset === undefined) {
-      var euiHeaderFixedCounter = Number(document.body.dataset.fixedHeaders);
+      var _document$body$datase;
+
+      var euiHeaderFixedCounter = Number((_document$body$datase = document.body.dataset.fixedHeaders) !== null && _document$body$datase !== void 0 ? _document$body$datase : 0);
       setOffset(euiTheme.base * 3 * euiHeaderFixedCounter);
     }
   }, [_offset, euiTheme.base]); // Sections include page header
@@ -205,6 +207,7 @@ _EuiPageTemplate.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Sets the max-width of the page,
@@ -245,7 +248,8 @@ _EuiPageTemplate.propTypes = {
   mainProps: PropTypes.shape({
     className: PropTypes.string,
     "aria-label": PropTypes.string,
-    "data-test-subj": PropTypes.string
+    "data-test-subj": PropTypes.string,
+    css: PropTypes.any
   })
 };
 
@@ -260,6 +264,7 @@ _EuiPageSection.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Sets the max-width of the page,
@@ -310,6 +315,7 @@ _EuiPageHeader.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * Sets the max-width of the page,
@@ -336,6 +342,7 @@ _EuiPageEmptyPrompt.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   restrictWidth: PropTypes.oneOfType([PropTypes.bool.isRequired, PropTypes.number.isRequired, PropTypes.string.isRequired]),
   color: PropTypes.any,
   paddingSize: PropTypes.any,

package/es/components/pagination/pagination.js

@@ -240,6 +240,7 @@ EuiPagination.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
      * The total number of pages.

package/es/components/pagination/pagination_button.js

@@ -77,13 +77,15 @@ EuiPaginationButton.propTypes = {
   onClick: PropTypes.func,
 
   /**
-     * Any of our named colors
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
 
   /**
-     * Any of our named colors
+     * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
-  color: PropTypes.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]),
+  color: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf(["ghost"])]),
   size: PropTypes.oneOf(["xs", "s", "m"]),
 
   /**
@@ -151,6 +153,7 @@ EuiPaginationButton.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
     ref: PropTypes.any,
     "data-text": PropTypes.string
   }),
@@ -158,6 +161,7 @@ EuiPaginationButton.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   isActive: PropTypes.bool,
 
   /**

package/es/components/panel/panel.js

@@ -21,7 +21,7 @@ import classNames from 'classnames';
 import { useEuiTheme } from '../../services';
 import { useEuiBackgroundColorCSS, useEuiPaddingCSS, BACKGROUND_COLORS, PADDING_SIZES } from '../../global_styling';
 import { keysOf } from '../common';
-import { euiPanelStyles } from './panel.style';
+import { euiPanelStyles } from './panel.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = PADDING_SIZES; // Exported padding sizes and class names necessary for EuiPopover and EuiCard.
 // Which currently will only maintain support for the original values until conversion.
@@ -143,5 +143,6 @@ EuiPanel.propTypes = {
   color: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/panel/{panel.style.js → panel.styles.js}

@@ -9,7 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { css } from '@emotion/react';
 import { euiShadow } from '../../themes/amsterdam/global_styling/mixins';
-import { euiCanAnimate, logicalTextAlignCSS } from '../../global_styling';
+import { euiCanAnimate, logicalCSS, logicalTextAlignCSS } from '../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "122lw0e-grow",
@@ -42,6 +42,6 @@ export var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
       m: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
     },
     // Setup interactive behavior
-    isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;width:100%;", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", euiShadow(euiThemeContext, 'l'), ";transform:translateY(-2px);cursor:pointer;};label:isClickable;")
+    isClickable: /*#__PURE__*/css(euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", logicalCSS('width', '100%'), " ", logicalTextAlignCSS('left'), ";}&:hover,&:focus{", euiShadow(euiThemeContext, 'l'), ";transform:translateY(-2px);cursor:pointer;};label:isClickable;")
   };
 };

package/es/components/panel/split_panel/split_panel.js

@@ -61,7 +61,8 @@ _EuiSplitPanelInner.propTypes = {
   color: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };
 
 /**

package/es/components/popover/input_popover.js

@@ -132,6 +132,7 @@ EuiInputPopover.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   disableFocusTrap: PropTypes.bool,
   fullWidth: PropTypes.bool,
   input: PropTypes.any.isRequired,

package/es/components/popover/popover.js

@@ -1,7 +1,7 @@
 function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "function" && typeof Symbol.iterator === "symbol") { _typeof = function _typeof(obj) { return typeof obj; }; } else { _typeof = function _typeof(obj) { return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }; } return _typeof(obj); }
 
 import { css as _css } from "@emotion/react";
-var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "attachToAnchor", "display", "offset", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
+var _excluded = ["anchorClassName", "anchorPosition", "button", "buttonRef", "insert", "isOpen", "ownFocus", "children", "className", "closePopover", "panelClassName", "panelPaddingSize", "panelProps", "panelRef", "panelStyle", "popoverScreenReaderText", "popoverRef", "hasArrow", "arrowChildren", "repositionOnScroll", "zIndex", "attachToAnchor", "display", "offset", "onPositionChange", "onTrapDeactivation", "buffer", "aria-label", "aria-labelledby", "container", "focusTrapProps", "initialFocus", "tabIndex"];
 
 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); }
 
@@ -291,6 +291,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
       var willRenderArrow = !_this.props.attachToAnchor && _this.props.hasArrow;
       var arrowStyles = willRenderArrow ? arrow : undefined;
       var arrowPosition = foundPosition;
+      _this.props.onPositionChange && _this.props.onPositionChange(arrowPosition);
 
       _this.setState({
         popoverStyles: popoverStyles,
@@ -445,6 +446,7 @@ export var EuiPopover = /*#__PURE__*/function (_Component) {
           attachToAnchor = _this$props.attachToAnchor,
           display = _this$props.display,
           offset = _this$props.offset,
+          onPositionChange = _this$props.onPositionChange,
           onTrapDeactivation = _this$props.onTrapDeactivation,
           buffer = _this$props.buffer,
           ariaLabel = _this$props['aria-label'],
@@ -775,6 +777,12 @@ EuiPopover.propTypes = {
      * Usually takes the `id` of the popover title
      */
   "aria-labelledby": PropTypes.string,
+
+  /**
+     * Function callback for when the popover positon changes
+     */
+  onPositionChange: PropTypes.func,
   className: PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/popover/popover_arrow/_popover_arrow.js

@@ -36,5 +36,6 @@ EuiPopoverArrow.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   position: PropTypes.any.isRequired
 };

package/es/components/popover/popover_footer.js

@@ -45,6 +45,7 @@ EuiPopoverFooter.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
          * Customize the all around padding of the popover footer.

package/es/components/popover/popover_panel/_popover_panel.js

@@ -108,6 +108,7 @@ EuiPopoverPanel.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   isOpen: PropTypes.bool,
   isAttached: PropTypes.bool,
   position: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([null])])

package/es/components/popover/popover_panel/_popover_panel.styles.js

@@ -8,6 +8,7 @@
 import { css } from '@emotion/react';
 import { euiShadow, euiShadowFlat, euiShadowMedium } from '../../../themes/amsterdam/global_styling/mixins';
 import { euiCanAnimate, logicalCSS } from '../../../global_styling';
+export var openAnimationTiming = 'slow';
 var translateDistance = 's';
 /**
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
@@ -23,7 +24,7 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
       property: 'filter'
     }), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
     // Is visible / open
-    isOpen: /*#__PURE__*/css("opacity:1;pointer-events:auto;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation.slow, ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation.slow, " + 100ms);};label:isOpen;"),
+    isOpen: /*#__PURE__*/css("opacity:1;pointer-events:auto;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation[openAnimationTiming], " + 100ms);};label:isOpen;"),
     // Positions
     top: /*#__PURE__*/css("transform:translateY(", euiTheme.size[translateDistance], ") translateZ(0);;label:top;"),
     bottom: /*#__PURE__*/css("transform:translateY(-", euiTheme.size[translateDistance], ") translateZ(0);;label:bottom;"),
@@ -31,7 +32,7 @@ export var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContex
     right: /*#__PURE__*/css("transform:translateX(-", euiTheme.size[translateDistance], ") translateZ(0);;label:right;"),
     // Attached version overrides
     attached: {
-      isOpen: /*#__PURE__*/css("filter:none;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation.slow, ";};label:isOpen;"),
+      isOpen: /*#__PURE__*/css("filter:none;", euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ";};label:isOpen;"),
       top: /*#__PURE__*/css(euiShadowFlat(euiThemeContext), ";;label:top;"),
       bottom: /*#__PURE__*/css(euiShadow(euiThemeContext, 'm'), ";;label:bottom;"),
       // Satisfies TS

package/es/components/popover/popover_title.js

@@ -45,6 +45,7 @@ EuiPopoverTitle.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
          * Customize the all around padding of the popover title.

package/es/components/progress/progress.js

@@ -117,6 +117,7 @@ EuiProgress.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   size: PropTypes.any,
 
   /**

package/es/components/progress/progress.styles.js

@@ -43,7 +43,7 @@ var nativeVsIndeterminateColor = function nativeVsIndeterminateColor(color, isNa
 
 
 var nonStaticPositioning = function nonStaticPositioning(isNative) {
-  return "\n  top: 0;\n  left: 0;\n  right: 0;\n  background-color: transparent;\n  ".concat(isNative ? "\n      &::-webkit-progress-bar {\n        background-color: transparent;\n      }" : '', "\n");
+  return "\n  ".concat(logicalCSS('top', 0), "\n  ").concat(logicalCSS('left', 0), "\n  ").concat(logicalCSS('right', 0), "\n  background-color: transparent;\n  ").concat(isNative ? "\n      &::-webkit-progress-bar {\n        background-color: transparent;\n      }" : '', "\n");
 };
 /**
  * Animations
@@ -75,7 +75,7 @@ export var euiProgressStyles = function euiProgressStyles(_ref3, isNative) {
     // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
     // we apply this style to a <div> instead of a <progress> element.
     // See https://css-tricks.com/html5-progress-element/ for more info.
-    indeterminate: /*#__PURE__*/css("&:before{position:absolute;content:'';", logicalCSS('width', '100%'), " top:0;bottom:0;left:0;transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
+    indeterminate: /*#__PURE__*/css("&:before{position:absolute;content:'';", logicalCSS('width', '100%'), " ", logicalCSS('top', 0), " ", logicalCSS('bottom', 0), " ", logicalCSS('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
     // Sizes
     xs: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.xxs), ";;label:xs;"),
     s: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.xs), ";;label:s;"),

package/es/components/provider/cache/cache_provider.js

@@ -6,12 +6,18 @@
  * Side Public License, v 1.
  */
 import React from 'react';
+import createCache from '@emotion/cache';
 import { CacheProvider } from '@emotion/react';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var defaultCache = createCache({
+  key: 'css'
+});
+defaultCache.compat = true;
 export var EuiCacheProvider = function EuiCacheProvider(_ref) {
-  var cache = _ref.cache,
+  var _ref$cache = _ref.cache,
+      cache = _ref$cache === void 0 ? defaultCache : _ref$cache,
       children = _ref.children;
-  return children && cache ? ___EmotionJSX(CacheProvider, {
+  return ___EmotionJSX(CacheProvider, {
     value: cache
-  }, children) : ___EmotionJSX(React.Fragment, null, children);
+  }, children);
 };

package/es/components/resizable_container/resizable_button.js

@@ -115,7 +115,8 @@ export var EuiResizableButton = function EuiResizableButton(_ref) {
 EuiResizableButton.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };
 export function euiResizableButtonWithControls(controls) {
   return function (props) {

package/es/components/resizable_container/resizable_container.js

@@ -222,5 +222,6 @@ EuiResizableContainer.propTypes = {
   style: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/resizable_container/resizable_panel.js

@@ -374,7 +374,8 @@ EuiResizablePanel.propTypes = {
   color: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };
 export function euiResizablePanelWithControls(controls) {
   return function (props) {

package/es/components/search_bar/search_bar.js

@@ -321,6 +321,7 @@ EuiSearchBar.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
     // Boolean values are not meaningful to this EuiSearchBox, but are allowed so that other
     // components can use e.g. a true value to mean "auto-derive a schema". See EuiInMemoryTable.
     // Admittedly, this is a bit of a hack.
@@ -429,5 +430,6 @@ EuiSearchBar.propTypes = {
   dateFormat: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
-  "data-test-subj": PropTypes.string
+  "data-test-subj": PropTypes.string,
+  css: PropTypes.any
 };

package/es/components/selectable/selectable.js

@@ -641,6 +641,7 @@ EuiSelectable.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * Hooks up a search box to filter the list (boolean)
@@ -671,6 +672,7 @@ EuiSelectable.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
        * Visible label of option.

package/es/components/selectable/selectable_list/selectable_list.js

@@ -398,6 +398,7 @@ EuiSelectableList.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * The index of the option to be highlighted as pseudo-focused;
@@ -456,6 +457,7 @@ EuiSelectableList.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
        * Will apply an onclick to icon within the badge
@@ -516,6 +518,7 @@ EuiSelectableList.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
        * Visible label of option.
@@ -569,6 +572,7 @@ EuiSelectableList.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
     label: PropTypes.string,
     searchableLabel: PropTypes.string,
     key: PropTypes.string,

package/es/components/selectable/selectable_list/selectable_list_item.js

@@ -236,6 +236,7 @@ EuiSelectableListItem.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
   children: PropTypes.node,
 
   /**
@@ -290,6 +291,7 @@ EuiSelectableListItem.propTypes = {
     className: PropTypes.string,
     "aria-label": PropTypes.string,
     "data-test-subj": PropTypes.string,
+    css: PropTypes.any,
 
     /**
        * Will apply an onclick to icon within the badge

package/es/components/selectable/selectable_message/selectable_message.js

@@ -38,6 +38,7 @@ EuiSelectableMessage.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
+  css: PropTypes.any,
 
   /**
        * Match this to the `listProps.bordered` property of your `EuiSelectable` instance