@elastic/eui 59.1.0-rc1 → 60.0.0

package/i18ntokens.json

@@ -181,11 +181,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 182,
+        "line": 181,
         "column": 8
       },
       "end": {
-        "line": 185,
+        "line": 184,
         "column": 9
       }
     },
@@ -197,11 +197,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 212,
+        "line": 211,
         "column": 14
       },
       "end": {
-        "line": 216,
+        "line": 215,
         "column": 16
       }
     },
@@ -213,11 +213,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 218,
+        "line": 217,
         "column": 14
       },
       "end": {
-        "line": 221,
+        "line": 220,
         "column": 16
       }
     },
@@ -3749,11 +3749,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 111,
+        "line": 107,
         "column": 10
       },
       "end": {
-        "line": 114,
+        "line": 110,
         "column": 12
       }
     },
@@ -3765,11 +3765,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 121,
+        "line": 117,
         "column": 20
       },
       "end": {
-        "line": 121,
+        "line": 117,
         "column": 77
       }
     },
@@ -3829,11 +3829,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 40,
+        "line": 37,
         "column": 27
       },
       "end": {
-        "line": 40,
+        "line": 37,
         "column": 77
       }
     },
@@ -4805,11 +4805,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 549,
+        "line": 568,
         "column": 16
       },
       "end": {
-        "line": 552,
+        "line": 571,
         "column": 18
       }
     },
@@ -4821,11 +4821,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 571,
+        "line": 590,
         "column": 14
       },
       "end": {
-        "line": 575,
+        "line": 594,
         "column": 16
       }
     },
@@ -4837,11 +4837,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 590,
+        "line": 609,
         "column": 14
       },
       "end": {
-        "line": 593,
+        "line": 612,
         "column": 16
       }
     },
@@ -4853,11 +4853,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 655,
+        "line": 674,
         "column": 6
       },
       "end": {
-        "line": 655,
+        "line": 674,
         "column": 78
       }
     },
@@ -4869,11 +4869,11 @@
     "highlighting": "code",
     "loc": {
       "start": {
-        "line": 682,
+        "line": 701,
         "column": 6
       },
       "end": {
-        "line": 688,
+        "line": 707,
         "column": 8
       }
     },
@@ -4885,11 +4885,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 700,
+        "line": 719,
         "column": 6
       },
       "end": {
-        "line": 709,
+        "line": 728,
         "column": 7
       }
     },
@@ -4901,11 +4901,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 700,
+        "line": 719,
         "column": 6
       },
       "end": {
-        "line": 709,
+        "line": 728,
         "column": 7
       }
     },
@@ -4917,11 +4917,11 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 148,
+        "line": 128,
         "column": 10
       },
       "end": {
-        "line": 148,
+        "line": 128,
         "column": 80
       }
     },

package/lib/components/accessibility/skip_link/skip_link.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiSkipLink = exports.POSITIONS = exports.EuiSkipLink = void 0;
+exports.POSITIONS = exports.EuiSkipLink = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,9 +11,9 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _button = require("../../button/button");
+var _services = require("../../../services");
 
-var _system = require("../../provider/system");
+var _button = require("../../button/button");
 
 var _screen_reader_only = require("../screen_reader_only");
 
@@ -21,12 +21,18 @@ var _skip_link = require("./skip_link.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["destinationId", "tabIndex", "position", "children", "className", "euiTheme"];
+var _excluded = ["destinationId", "overrideLinkBehavior", "tabIndex", "position", "children", "className"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
 
+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; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -34,16 +40,17 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var POSITIONS = ['static', 'fixed', 'absolute'];
 exports.POSITIONS = POSITIONS;
 
-var _EuiSkipLink = function _EuiSkipLink(_ref) {
+var EuiSkipLink = function EuiSkipLink(_ref) {
   var destinationId = _ref.destinationId,
+      overrideLinkBehavior = _ref.overrideLinkBehavior,
       tabIndex = _ref.tabIndex,
       _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'static' : _ref$position,
       children = _ref.children,
       className = _ref.className,
-      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _skip_link.euiSkipLinkStyles)(euiTheme);
   var classes = (0, _classnames.default)('euiSkipLink', className);
   var cssStyles = [styles.euiSkipLink, position !== 'static' ? styles[position] : undefined]; // Create the `href` from `destinationId`
@@ -56,6 +63,22 @@ var _EuiSkipLink = function _EuiSkipLink(_ref) {
     };
   }
 
+  if (overrideLinkBehavior) {
+    optionalProps = _objectSpread(_objectSpread({}, optionalProps), {}, {
+      onClick: function onClick(e) {
+        e.preventDefault();
+        var destinationEl = document.getElementById(destinationId);
+        if (!destinationEl) return;
+        destinationEl.scrollIntoView();
+        destinationEl.tabIndex = -1; // Ensure the destination content is focusable
+
+        destinationEl.focus({
+          preventScroll: true
+        }); // Scrolling is already handled above, and focus's autoscroll behaves oddly around fixed headers
+      }
+    });
+  }
+
   return (0, _react2.jsx)(_screen_reader_only.EuiScreenReaderOnly, {
     showOnFocus: true
   }, (0, _react2.jsx)(_button.EuiButton, _extends({
@@ -67,8 +90,8 @@ var _EuiSkipLink = function _EuiSkipLink(_ref) {
   }, optionalProps, rest), children));
 };
 
-exports._EuiSkipLink = _EuiSkipLink;
-_EuiSkipLink.propTypes = {
+exports.EuiSkipLink = EuiSkipLink;
+EuiSkipLink.propTypes = {
   href: _propTypes.default.string,
   onClick: _propTypes.default.func,
 
@@ -94,6 +117,19 @@ _EuiSkipLink.propTypes = {
      */
   destinationId: _propTypes.default.string.isRequired,
 
+  /**
+     * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),
+     * setting this flag to true will manually scroll to and focus the destination element
+     * without changing the browser URL's hash
+     */
+
+  /**
+     * If default HTML anchor link behavior is not desired (e.g. for SPAs with hash routing),
+     * setting this flag to true will manually scroll to and focus the destination element
+     * without changing the browser URL's hash
+     */
+  overrideLinkBehavior: _propTypes.default.bool,
+
   /**
      * When position is fixed, this is forced to `0`
      */
@@ -177,6 +213,4 @@ _EuiSkipLink.propTypes = {
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
   buttonRef: _propTypes.default.any
-};
-var EuiSkipLink = (0, _system.withEuiSystem)(_EuiSkipLink);
-exports.EuiSkipLink = EuiSkipLink;
+};

package/lib/components/accessibility/skip_link/skip_link.styles.js

@@ -35,7 +35,7 @@ var euiSkipLinkStyles = function euiSkipLinkStyles(_ref3) {
     // Set positions on focus only as to not override screenReaderOnly position
     // When positioned absolutely, consumers still need to tell it WHERE (top,left,etc...)
     absolute: _ref,
-    fixed: /*#__PURE__*/(0, _react.css)("&:focus{position:fixed;inset-block-start:", euiTheme.size.xs, ";inset-inline-start:", euiTheme.size.xs, ";z-index:", Number(euiTheme.levels.header) + 1, ";};label:fixed;")
+    fixed: /*#__PURE__*/(0, _react.css)("position:fixed!important;&:focus{inset-block-start:", euiTheme.size.xs, ";inset-inline-start:", euiTheme.size.xs, ";z-index:", Number(euiTheme.levels.header) + 1, ";};label:fixed;")
   };
 };
 

package/lib/components/avatar/avatar.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.checkValidColor = exports._EuiAvatar = exports.TYPES = exports.SIZES = exports.EuiAvatar = void 0;
+exports.checkValidColor = exports.TYPES = exports.SIZES = exports.EuiAvatar = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,8 +13,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _color = require("../../services/color");
 
-var _system = require("../provider/system");
-
 var _services = require("../../services");
 
 var _icon = require("../icon");
@@ -23,7 +21,7 @@ var _avatar = require("./avatar.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "color", "euiTheme", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
+var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -52,12 +50,11 @@ exports.SIZES = SIZES;
 var TYPES = ['space', 'user'];
 exports.TYPES = TYPES;
 
-var _EuiAvatar = function _EuiAvatar(_ref) {
+var EuiAvatar = function EuiAvatar(_ref) {
   var _classNames;
 
   var className = _ref.className,
       color = _ref.color,
-      euiTheme = _ref.euiTheme,
       imageUrl = _ref.imageUrl,
       initials = _ref.initials,
       initialsLength = _ref.initialsLength,
@@ -74,6 +71,7 @@ var _EuiAvatar = function _EuiAvatar(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _avatar.euiAvatarStyles)(euiTheme);
   var visColors = (0, _services.euiPaletteColorBlindBehindText)();
   var isPlain = color === 'plain';
@@ -126,10 +124,11 @@ var _EuiAvatar = function _EuiAvatar(_ref) {
     role: isDisabled ? 'presentation' : 'img',
     title: name
   }, rest), content);
-};
+}; // TODO: Migrate to a service
+
 
-exports._EuiAvatar = _EuiAvatar;
-_EuiAvatar.propTypes = {
+exports.EuiAvatar = EuiAvatar;
+EuiAvatar.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
@@ -190,9 +189,6 @@ _EuiAvatar.propTypes = {
        */
   isDisabled: _propTypes.default.bool
 };
-var EuiAvatar = (0, _system.withEuiSystem)(_EuiAvatar); // TODO: Migrate to a service
-
-exports.EuiAvatar = EuiAvatar;
 
 var checkValidColor = function checkValidColor(color) {
   var validHex = color && (0, _color.isValidHex)(color) || color === 'plain' || color === 'subdued';

package/lib/components/bottom_bar/bottom_bar.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.paddingSizeToClassNameMap = exports._EuiBottomBar = exports.POSITIONS = exports.EuiBottomBar = void 0;
+exports.paddingSizeToClassNameMap = exports.POSITIONS = exports.EuiBottomBar = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
@@ -23,15 +23,13 @@ var _resize_observer = require("../observer/resize_observer");
 
 var _portal = require("../portal");
 
-var _system = require("../provider/system");
+var _bottom_bar = require("./bottom_bar.styles");
 
 var _provider = require("../../services/theme/provider");
 
-var _bottom_bar = require("./bottom_bar.styles");
-
 var _react2 = require("@emotion/react");
 
-var _excluded = ["position", "paddingSize", "affordForDisplacement", "children", "className", "bodyClassName", "landmarkHeading", "usePortal", "left", "right", "bottom", "top", "style", "euiTheme"];
+var _excluded = ["position", "paddingSize", "affordForDisplacement", "children", "className", "bodyClassName", "landmarkHeading", "usePortal", "left", "right", "bottom", "top", "style"];
 
 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); }
 
@@ -95,9 +93,9 @@ var _EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       bottom = _ref$bottom === void 0 ? 0 : _ref$bottom,
       top = _ref.top,
       style = _ref.style,
-      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _bottom_bar.euiBottomBarStyles)(euiTheme); // Force some props if `fixed` position, but not if the user has supplied these
 
   affordForDisplacement = position !== 'fixed' ? false : affordForDisplacement;
@@ -171,7 +169,6 @@ var _EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return usePortal ? (0, _react2.jsx)(_portal.EuiPortal, null, bar) : bar;
 });
 
-exports._EuiBottomBar = _EuiBottomBar;
 _EuiBottomBar.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
@@ -236,9 +233,9 @@ _EuiBottomBar.propTypes = {
   left: _propTypes.default.any
 };
 var EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
-  var BottomBar = (0, _system.withEuiSystem)(_EuiBottomBar);
+  var BottomBar = _EuiBottomBar;
   return (0, _react2.jsx)(_provider.EuiThemeProvider, {
-    colorMode: "dark"
+    colorMode: 'dark'
   }, (0, _react2.jsx)(BottomBar, _extends({
     ref: ref
   }, props)));

package/lib/components/breadcrumbs/breadcrumbs.js

@@ -197,8 +197,7 @@ var EuiBreadcrumbs = function EuiBreadcrumbs(_ref) {
         }, linkProps, breadcrumbRest), text);
       }
 
-      return (0, _react2.jsx)(_link.EuiLink // @ts-expect-error Ref forwarding type mismatch
-      , _extends({
+      return (0, _react2.jsx)(_link.EuiLink, _extends({
         ref: ref,
         color: isLastBreadcrumb ? 'text' : 'subdued',
         onClick: onClick,

package/lib/components/call_out/call_out.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiCallOut = exports.HEADINGS = exports.EuiCallOut = exports.COLORS = void 0;
+exports.HEADINGS = exports.EuiCallOut = exports.COLORS = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -17,7 +17,7 @@ var _icon = require("../icon");
 
 var _text = require("../text");
 
-var _system = require("../provider/system");
+var _services = require("../../services");
 
 var _panel = require("../panel");
 
@@ -27,7 +27,7 @@ var _call_out = require("./call_out.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["title", "color", "size", "iconType", "children", "className", "heading", "euiTheme"];
+var _excluded = ["title", "color", "size", "iconType", "children", "className", "heading"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -47,8 +47,7 @@ var COLORS = ['primary', 'success', 'warning', 'danger'];
 exports.COLORS = COLORS;
 var HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
 exports.HEADINGS = HEADINGS;
-
-var _EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var title = _ref.title,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'primary' : _ref$color,
@@ -59,14 +58,14 @@ var _EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       className = _ref.className,
       _ref$heading = _ref.heading,
       heading = _ref$heading === void 0 ? 'p' : _ref$heading,
-      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var styles = (0, _call_out.euiCallOutStyles)(euiTheme);
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _call_out.euiCallOutStyles)(theme);
   var cssStyles = [styles.euiCallOut];
   var cssIconStyle = [styles.euiCallOut__icon];
   var cssDescriptionStyle = [styles.euiCallOut__description];
-  var headerStyles = (0, _call_out.euiCallOutHeadingStyles)(euiTheme);
+  var headerStyles = (0, _call_out.euiCallOutHeadingStyles)(theme);
   var cssHeaderStyles = [headerStyles.euiCallOutHeader, headerStyles[color]];
   var classes = (0, _classnames.default)('euiCallOut', _defineProperty({}, "euiCallOut--".concat(color), color), className);
   var headerIcon;
@@ -114,9 +113,8 @@ var _EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     grow: false
   }, rest), header, optionalChildren);
 });
-
-exports._EuiCallOut = _EuiCallOut;
-_EuiCallOut.propTypes = {
+exports.EuiCallOut = EuiCallOut;
+EuiCallOut.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
@@ -126,6 +124,4 @@ _EuiCallOut.propTypes = {
   size: _propTypes.default.oneOf(["s", "m"]),
   heading: _propTypes.default.any
 };
-_EuiCallOut.displayName = 'EuiCallOut';
-var EuiCallOut = (0, _system.withEuiSystem)(_EuiCallOut);
-exports.EuiCallOut = EuiCallOut;
+EuiCallOut.displayName = 'EuiCallOut';

package/lib/components/combo_box/matching_options.js

@@ -27,7 +27,7 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 var flattenOptionGroups = function flattenOptionGroups(optionsOrGroups) {
   return optionsOrGroups.reduce(function (options, optionOrGroup) {
     if (optionOrGroup.options) {
-      options.push.apply(options, _toConsumableArray(optionOrGroup.options));
+      options = options.concat(optionOrGroup.options);
     } else {
       options.push(optionOrGroup);
     }
@@ -90,8 +90,9 @@ var getMatchingOptions = function getMatchingOptions(options, selectedOptions, s
           label: option.label,
           isGroupLabelOption: true
         }); // Add matching options for group
+        // use concat over spreading to support large arrays - https://mathiasbynens.be/demo/javascript-argument-count
 
-        matchingOptions.push.apply(matchingOptions, matchingOptionsForGroup);
+        matchingOptions = matchingOptions.concat(matchingOptionsForGroup);
       }
     } else {
       collectMatchingOption(matchingOptions, option, selectedOptions, normalizedSearchValue, isPreFiltered, showPrevSelected);

package/lib/components/expression/expression.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiExpression = exports.EuiExpression = exports.COLORS = void 0;
+exports.EuiExpression = exports.COLORS = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -13,13 +13,13 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _icon = require("../icon");
 
-var _system = require("../provider/system");
+var _services = require("../../services");
 
 var _expression = require("./expression.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "description", "descriptionProps", "value", "valueProps", "color", "uppercase", "isActive", "display", "descriptionWidth", "onClick", "isInvalid", "textWrap", "euiTheme"];
+var _excluded = ["className", "description", "descriptionProps", "value", "valueProps", "color", "uppercase", "isActive", "display", "descriptionWidth", "onClick", "isInvalid", "textWrap"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -38,7 +38,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var COLORS = ['subdued', 'primary', 'success', 'accent', 'warning', 'danger'];
 exports.COLORS = COLORS;
 
-var _EuiExpression = function _EuiExpression(_ref) {
+var EuiExpression = function EuiExpression(_ref) {
   var className = _ref.className,
       description = _ref.description,
       descriptionProps = _ref.descriptionProps,
@@ -59,17 +59,17 @@ var _EuiExpression = function _EuiExpression(_ref) {
       isInvalid = _ref$isInvalid === void 0 ? false : _ref$isInvalid,
       _ref$textWrap = _ref.textWrap,
       textWrap = _ref$textWrap === void 0 ? 'break-word' : _ref$textWrap,
-      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var calculatedColor = isInvalid ? 'danger' : color;
-  var styles = (0, _expression.euiExpressionStyles)(euiTheme);
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _expression.euiExpressionStyles)(theme);
   var cssStyles = [styles.euiExpression, onClick && styles.isClickable, styles[color], isActive && styles.isActive.base, isActive && styles.isActive[color], display === 'columns' && styles.columns, textWrap === 'truncate' && styles.truncate];
-  var descriptionStyles = (0, _expression.euiExpressionDescriptionStyles)(euiTheme);
+  var descriptionStyles = (0, _expression.euiExpressionDescriptionStyles)(theme);
   var cssDescriptionStyles = [descriptionStyles.euiExpression__description, isInvalid ? descriptionStyles.danger : descriptionStyles[color], uppercase && descriptionStyles.isUppercase, textWrap === 'truncate' && descriptionStyles.truncate, display === 'columns' && descriptionStyles.columns];
-  var valueStyles = (0, _expression.euiExpressionValueStyles)(euiTheme);
+  var valueStyles = (0, _expression.euiExpressionValueStyles)(theme);
   var cssValueStyles = [valueStyles.euiExpression__value, textWrap === 'truncate' && valueStyles.truncate, display === 'columns' && valueStyles.columns];
-  var iconStyles = (0, _expression.euiExpressionIconStyles)(euiTheme);
+  var iconStyles = (0, _expression.euiExpressionIconStyles)(theme);
   var cssIconStyles = [iconStyles.euiExpression__icon, display === 'columns' && iconStyles.columns];
   var classes = (0, _classnames.default)('euiExpression', className);
   var Component = onClick ? 'button' : 'span';
@@ -97,8 +97,8 @@ var _EuiExpression = function _EuiExpression(_ref) {
   }, valueProps), value), invalidIcon);
 };
 
-exports._EuiExpression = _EuiExpression;
-_EuiExpression.propTypes = {
+exports.EuiExpression = EuiExpression;
+EuiExpression.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
@@ -200,6 +200,4 @@ _EuiExpression.propTypes = {
      * Sets how to handle the wrapping of long text.
      */
   textWrap: _propTypes.default.oneOf(["break-word", "truncate"])
-};
-var EuiExpression = (0, _system.withEuiSystem)(_EuiExpression);
-exports.EuiExpression = EuiExpression;
+};