@elastic/eui 63.0.3 → 65.0.0

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

@@ -241,6 +241,7 @@ EuiPageHeaderContent.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * The only option is on/off
@@ -301,6 +302,7 @@ EuiPageHeaderContent.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     textTransform: _propTypes.default.any,
     id: _propTypes.default.string
   }),
@@ -322,6 +324,7 @@ EuiPageHeaderContent.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     href: _propTypes.default.string,
     rel: _propTypes.default.string,
     onClick: _propTypes.default.func,
@@ -371,6 +374,7 @@ EuiPageHeaderContent.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
          * ReactNode to render as this component's content

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

@@ -38,5 +38,6 @@ exports.EuiPageHeaderSection = EuiPageHeaderSection;
 EuiPageHeaderSection.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

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

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

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

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

package/lib/components/page/page_sidebar/page_sidebar.js

@@ -77,7 +77,9 @@ var EuiPageSidebar = function EuiPageSidebar(_ref) {
 
   (0, _react.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), (0, _global_styling.logicalStyle)('min-width', isResponding ? '100%' : minWidth)), (0, _global_styling.logicalStyle)('top', offset)), (0, _global_styling.logicalStyle)('max-height', "calc(100vh - ".concat(offset, "px)"))));
     }
@@ -120,5 +122,6 @@ EuiPageSidebar.propTypes = {
   responsive: _propTypes.default.arrayOf(_propTypes.default.any.isRequired),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

package/lib/components/page/page_template.js

@@ -82,7 +82,7 @@ var EuiPageTemplate_Deprecated = function EuiPageTemplate_Deprecated(_ref) {
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // BWC page header margin to match padding
-  var headerMargin = /*#__PURE__*/(0, _react2.css)("margin-bottom: ".concat((0, _global_styling.useEuiPaddingSize)(paddingSize)), ";label:headerMargin;");
+  var headerMargin = /*#__PURE__*/(0, _react2.css)((0, _global_styling.logicalCSS)('margin-bottom', (0, _global_styling.useEuiPaddingSize)(paddingSize)), ";label:headerMargin;");
   /**
    * Full height ~madness~ logic
    */
@@ -393,7 +393,8 @@ EuiPageTemplate_Deprecated.propTypes = {
     paddingSize: _propTypes.default.any,
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   }),
 
   /**
@@ -407,6 +408,7 @@ EuiPageTemplate_Deprecated.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Sets the max-width of the page,
@@ -431,6 +433,7 @@ EuiPageTemplate_Deprecated.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Sets the max-width of the page,
@@ -469,6 +472,7 @@ EuiPageTemplate_Deprecated.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Adds a medium shadow to the panel;
@@ -553,6 +557,7 @@ EuiPageTemplate_Deprecated.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Sets the max-width of the page,
@@ -577,6 +582,7 @@ EuiPageTemplate_Deprecated.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
          * How to position the bottom bar against its parent.

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

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

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

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

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

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

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

@@ -7,6 +7,8 @@ exports.euiPageOuterStyles = void 0;
 
 var _react = require("@emotion/react");
 
+var _global_styling = require("../../../global_styling");
+
 function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -39,7 +41,8 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 var euiPageOuterStyles = function euiPageOuterStyles(_ref4) {
   var euiTheme = _ref4.euiTheme;
   return {
-    euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;max-width:100%;;label:euiPageOuter;"),
+    euiPageOuter: /*#__PURE__*/(0, _react.css)("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", (0, _global_styling.logicalCSS)('max-width', '100%' // Ensures Firefox doesn't expand width beyond bounds
+    ), ";;label:euiPageOuter;"),
     // Grow
     grow: _ref3,
     // Direction

package/lib/components/page_template/page_template.js

@@ -109,7 +109,9 @@ var _EuiPageTemplate = function _EuiPageTemplate(_ref) {
   });
   (0, _react.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
@@ -227,6 +229,7 @@ _EuiPageTemplate.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Sets the max-width of the page,
@@ -267,7 +270,8 @@ _EuiPageTemplate.propTypes = {
   mainProps: _propTypes.default.shape({
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   })
 };
 
@@ -282,6 +286,7 @@ _EuiPageSection.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Sets the max-width of the page,
@@ -332,6 +337,7 @@ _EuiPageHeader.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Sets the max-width of the page,
@@ -358,6 +364,7 @@ _EuiPageEmptyPrompt.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   restrictWidth: _propTypes.default.oneOfType([_propTypes.default.bool.isRequired, _propTypes.default.number.isRequired, _propTypes.default.string.isRequired]),
   color: _propTypes.default.any,
   paddingSize: _propTypes.default.any,

package/lib/components/pagination/pagination.js

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

package/lib/components/panel/panel.js

@@ -17,7 +17,7 @@ var _global_styling = require("../../global_styling");
 
 var _common = require("../common");
 
-var _panel = require("./panel.style");
+var _panel = require("./panel.styles");
 
 var _react2 = require("@emotion/react");
 
@@ -159,5 +159,6 @@ EuiPanel.propTypes = {
   color: _propTypes.default.any,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

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

@@ -44,7 +44,7 @@ var euiPanelStyles = function euiPanelStyles(euiThemeContext) {
       m: /*#__PURE__*/(0, _react.css)("border-radius:", euiTheme.border.radius.medium, ";;label:m;")
     },
     // Setup interactive behavior
-    isClickable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;width:100%;", (0, _global_styling.logicalTextAlignCSS)('left'), ";}&:hover,&:focus{", (0, _mixins.euiShadow)(euiThemeContext, 'l'), ";transform:translateY(-2px);cursor:pointer;};label:isClickable;")
+    isClickable: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{transition:box-shadow ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ",transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";}&:enabled{display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalTextAlignCSS)('left'), ";}&:hover,&:focus{", (0, _mixins.euiShadow)(euiThemeContext, 'l'), ";transform:translateY(-2px);cursor:pointer;};label:isClickable;")
   };
 };
 

package/lib/components/panel/split_panel/split_panel.js

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

package/lib/components/popover/input_popover.js

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

package/lib/components/popover/popover.js

@@ -42,7 +42,7 @@ var _popover2 = require("./popover.styles");
 
 var _popover_panel = require("./popover_panel");
 
-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 _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
@@ -318,6 +318,7 @@ 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,
@@ -472,6 +473,7 @@ 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'],
@@ -804,6 +806,12 @@ EuiPopover.propTypes = {
      * Usually takes the `id` of the popover title
      */
   "aria-labelledby": _propTypes.default.string,
+
+  /**
+     * Function callback for when the popover positon changes
+     */
+  onPositionChange: _propTypes.default.func,
   className: _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

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

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

package/lib/components/popover/popover_footer.js

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

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

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

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiPopoverPanelStyles = void 0;
+exports.openAnimationTiming = exports.euiPopoverPanelStyles = void 0;
 
 var _react = require("@emotion/react");
 
@@ -18,6 +18,8 @@ var _global_styling = require("../../../global_styling");
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var openAnimationTiming = 'slow';
+exports.openAnimationTiming = openAnimationTiming;
 var translateDistance = 's';
 /**
  * 1. Can expand further, but it looks weird if it's smaller than the originating button.
@@ -33,7 +35,7 @@ var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
       property: 'filter'
     }), " &:focus{outline-offset:0;};label:euiPopover__panel;"),
     // Is visible / open
-    isOpen: /*#__PURE__*/(0, _react.css)("opacity:1;pointer-events:auto;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation.slow, ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation.slow, " + 100ms);};label:isOpen;"),
+    isOpen: /*#__PURE__*/(0, _react.css)("opacity:1;pointer-events:auto;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ",transform ", euiTheme.animation.bounce, " calc(", euiTheme.animation[openAnimationTiming], " + 100ms);};label:isOpen;"),
     // Positions
     top: /*#__PURE__*/(0, _react.css)("transform:translateY(", euiTheme.size[translateDistance], ") translateZ(0);;label:top;"),
     bottom: /*#__PURE__*/(0, _react.css)("transform:translateY(-", euiTheme.size[translateDistance], ") translateZ(0);;label:bottom;"),
@@ -41,7 +43,7 @@ var euiPopoverPanelStyles = function euiPopoverPanelStyles(euiThemeContext) {
     right: /*#__PURE__*/(0, _react.css)("transform:translateX(-", euiTheme.size[translateDistance], ") translateZ(0);;label:right;"),
     // Attached version overrides
     attached: {
-      isOpen: /*#__PURE__*/(0, _react.css)("filter:none;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation.slow, ";};label:isOpen;"),
+      isOpen: /*#__PURE__*/(0, _react.css)("filter:none;", _global_styling.euiCanAnimate, "{transition:opacity ", euiTheme.animation.bounce, " ", euiTheme.animation[openAnimationTiming], ";};label:isOpen;"),
       top: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadowFlat)(euiThemeContext), ";;label:top;"),
       bottom: /*#__PURE__*/(0, _react.css)((0, _mixins.euiShadow)(euiThemeContext, 'm'), ";;label:bottom;"),
       // Satisfies TS

package/lib/components/popover/popover_title.js

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

package/lib/components/progress/progress.js

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

package/lib/components/progress/progress.styles.js

@@ -46,7 +46,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((0, _global_styling.logicalCSS)('top', 0), "\n  ").concat((0, _global_styling.logicalCSS)('left', 0), "\n  ").concat((0, _global_styling.logicalCSS)('right', 0), "\n  background-color: transparent;\n  ").concat(isNative ? "\n      &::-webkit-progress-bar {\n        background-color: transparent;\n      }" : '', "\n");
 };
 /**
  * Animations
@@ -78,7 +78,7 @@ 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__*/(0, _react.css)("&:before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " top:0;bottom:0;left:0;transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
+    indeterminate: /*#__PURE__*/(0, _react.css)("&:before{position:absolute;content:'';", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('bottom', 0), " ", (0, _global_styling.logicalCSS)('left', 0), " transform:scaleX(0) translateX(0%);animation:", euiIndeterminateAnimation, " 1s ", euiTheme.animation.resistance, " infinite;", _global_styling.euiCantAnimate, "{animation-duration:2s;animation-timing-function:linear;}};label:indeterminate;"),
     // Sizes
     xs: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xxs), ";;label:xs;"),
     s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xs), ";;label:s;"),

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

@@ -7,6 +7,8 @@ exports.EuiCacheProvider = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
+var _cache = _interopRequireDefault(require("@emotion/cache"));
+
 var _react2 = require("@emotion/react");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -18,12 +20,18 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
+var defaultCache = (0, _cache.default)({
+  key: 'css'
+});
+defaultCache.compat = true;
+
 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 ? (0, _react2.jsx)(_react2.CacheProvider, {
+  return (0, _react2.jsx)(_react2.CacheProvider, {
     value: cache
-  }, children) : (0, _react2.jsx)(_react.default.Fragment, null, children);
+  }, children);
 };
 
 exports.EuiCacheProvider = EuiCacheProvider;

package/lib/components/resizable_container/resizable_button.js

@@ -133,7 +133,8 @@ exports.EuiResizableButton = EuiResizableButton;
 EuiResizableButton.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };
 
 function euiResizableButtonWithControls(controls) {

package/lib/components/resizable_container/resizable_container.js

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

package/lib/components/resizable_container/resizable_panel.js

@@ -398,7 +398,8 @@ EuiResizablePanel.propTypes = {
   color: _propTypes.default.any,
   className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
   "aria-label": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
-  "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string])
+  "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+  css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any])
 };
 
 function euiResizablePanelWithControls(controls) {

package/lib/components/search_bar/search_bar.js

@@ -346,6 +346,7 @@ EuiSearchBar.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.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.
@@ -454,5 +455,6 @@ EuiSearchBar.propTypes = {
   dateFormat: _propTypes.default.any,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

package/lib/components/selectable/selectable.js

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

package/lib/components/selectable/selectable_list/selectable_list.js

@@ -414,6 +414,7 @@ EuiSelectableList.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * The index of the option to be highlighted as pseudo-focused;
@@ -472,6 +473,7 @@ EuiSelectableList.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Will apply an onclick to icon within the badge
@@ -532,6 +534,7 @@ EuiSelectableList.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Visible label of option.
@@ -585,6 +588,7 @@ EuiSelectableList.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     label: _propTypes.default.string,
     searchableLabel: _propTypes.default.string,
     key: _propTypes.default.string,

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

@@ -253,6 +253,7 @@ EuiSelectableListItem.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   children: _propTypes.default.node,
 
   /**
@@ -307,6 +308,7 @@ EuiSelectableListItem.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Will apply an onclick to icon within the badge

package/lib/components/selectable/selectable_message/selectable_message.js

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

package/lib/components/selectable/selectable_templates/selectable_template_sitewide.js

@@ -285,6 +285,7 @@ EuiSelectableTemplateSitewide.propTypes = {
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any,
 
       /**
            * One of EUI's color palette or a valid CSS color value https://developer.mozilla.org/en-US/docs/Web/CSS/color_value.
@@ -321,6 +322,7 @@ EuiSelectableTemplateSitewide.propTypes = {
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any,
 
       /**
              * Custom initials (max 2 characters).
@@ -402,7 +404,8 @@ EuiSelectableTemplateSitewide.propTypes = {
       highlightSearchString: _propTypes.default.bool,
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
-      "data-test-subj": _propTypes.default.string
+      "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any
     }).isRequired),
 
     /**
@@ -413,6 +416,7 @@ EuiSelectableTemplateSitewide.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
        * Visible label of option.

package/lib/components/side_nav/side_nav.js

@@ -261,6 +261,7 @@ EuiSideNav.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Creates an associated heading element and uses the same node as default for `mobileTitle`