@elastic/eui 59.1.0-rc1 → 59.1.0

package/optimize/lib/components/title/title.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiTitle = exports.TITLE_SIZES = exports.TEXT_TRANSFORM = exports.EuiTitle = void 0;
+exports.TITLE_SIZES = exports.TEXT_TRANSFORM = exports.EuiTitle = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
@@ -13,13 +13,13 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
+var _services = require("../../services");
+
 var _clone_element = require("../../services/theme/clone_element");
 
 var _title = require("./title.styles");
 
-var _system = require("../provider/system");
-
-var _excluded = ["size", "children", "className", "textTransform", "euiTheme"];
+var _excluded = ["size", "children", "className", "textTransform"];
 
 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; }
 
@@ -30,14 +30,14 @@ exports.TITLE_SIZES = TITLE_SIZES;
 var TEXT_TRANSFORM = ['uppercase'];
 exports.TEXT_TRANSFORM = TEXT_TRANSFORM;
 
-var _EuiTitle = function _EuiTitle(_ref) {
+var EuiTitle = function EuiTitle(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
       children = _ref.children,
       className = _ref.className,
       textTransform = _ref.textTransform,
-      euiTheme = _ref.euiTheme,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _title.euiTitleStyles)(euiTheme);
   var cssStyles = [styles.euiTitle, textTransform ? styles[textTransform] : undefined, styles[size]];
   var classes = (0, _classnames.default)('euiTitle', className, children.props.className);
@@ -50,6 +50,4 @@ var _EuiTitle = function _EuiTitle(_ref) {
   return (0, _clone_element.cloneElementWithCss)(children, props);
 };
 
-exports._EuiTitle = _EuiTitle;
-var EuiTitle = (0, _system.withEuiSystem)(_EuiTitle);
 exports.EuiTitle = EuiTitle;

package/optimize/lib/services/theme/hooks.js

@@ -42,7 +42,7 @@ var useEuiTheme = function useEuiTheme() {
 exports.useEuiTheme = useEuiTheme;
 
 var withEuiTheme = function withEuiTheme(Component) {
-  var componentName = Component.displayName || Component.name || 'ComponentWithTheme';
+  var componentName = Component.displayName || Component.name || 'Component';
 
   var Render = function Render(props, ref) {
     var _useEuiTheme = useEuiTheme(),
@@ -61,7 +61,7 @@ var withEuiTheme = function withEuiTheme(Component) {
   };
 
   var WithEuiTheme = /*#__PURE__*/(0, _react.forwardRef)(Render);
-  WithEuiTheme.displayName = componentName;
+  WithEuiTheme.displayName = "WithEuiTheme(".concat(componentName, ")");
   return WithEuiTheme;
 };
 

package/optimize/lib/services/theme/provider.js

@@ -13,14 +13,14 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 
 var _react = _interopRequireWildcard(require("react"));
 
+var _react2 = require("@emotion/react");
+
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 
 var _context = require("./context");
 
 var _utils = require("./utils");
 
-var _react2 = require("@emotion/react");
-
 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); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -36,6 +36,7 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
       _colorMode = _ref.colorMode,
       _modifications = _ref.modify,
+      cache = _ref.cache,
       children = _ref.children;
   var parentSystem = (0, _react.useContext)(_context.EuiSystemContext);
   var parentModifications = (0, _react.useContext)(_context.EuiModificationsContext);
@@ -109,7 +110,9 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: modifications
   }, (0, _react2.jsx)(_context.EuiThemeContext.Provider, {
     value: theme
-  }, children))));
+  }, cache ? (0, _react2.jsx)(_react2.CacheProvider, {
+    value: cache
+  }, children) : children))));
 };
 
 exports.EuiThemeProvider = EuiThemeProvider;

package/{lib/components/provider/system → optimize/lib/themes/amsterdam}/index.js

@@ -4,15 +4,15 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 
-var _system = require("./system");
+var _shadow = require("./global_styling/mixins/shadow");
 
-Object.keys(_system).forEach(function (key) {
+Object.keys(_shadow).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
-  if (key in exports && exports[key] === _system[key]) return;
+  if (key in exports && exports[key] === _shadow[key]) return;
   Object.defineProperty(exports, key, {
     enumerable: true,
     get: function get() {
-      return _system[key];
+      return _shadow[key];
     }
   });
 });

package/optimize/lib/themes/index.js

@@ -3,6 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+var _exportNames = {
+  EUI_THEMES: true,
+  isDefaultTheme: true,
+  AMSTERDAM_NAME_KEY: true,
+  EuiThemeAmsterdam: true
+};
 Object.defineProperty(exports, "AMSTERDAM_NAME_KEY", {
   enumerable: true,
   get: function get() {
@@ -30,4 +36,18 @@ Object.defineProperty(exports, "isDefaultTheme", {
 
 var _themes = require("./themes");
 
-var _theme = require("./amsterdam/theme");
+var _theme = require("./amsterdam/theme");
+
+var _amsterdam = require("./amsterdam");
+
+Object.keys(_amsterdam).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (Object.prototype.hasOwnProperty.call(_exportNames, key)) return;
+  if (key in exports && exports[key] === _amsterdam[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function get() {
+      return _amsterdam[key];
+    }
+  });
+});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@elastic/eui",
   "description": "Elastic UI Component Library",
-  "version": "59.1.0-rc1",
+  "version": "59.1.0",
   "license": "SEE LICENSE IN LICENSE.txt",
   "main": "lib",
   "module": "es",

package/test-env/components/accessibility/skip_link/skip_link.js

@@ -5,10 +5,12 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiSkipLink = exports.POSITIONS = exports.EuiSkipLink = void 0;
+exports.POSITIONS = exports.EuiSkipLink = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
 var _react = _interopRequireDefault(require("react"));
@@ -17,9 +19,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");
 
@@ -27,19 +29,25 @@ 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 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) { (0, _defineProperty2.default)(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; }
+
 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 = (0, _objectWithoutProperties2.default)(_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`
@@ -52,6 +60,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, (0, _extends2.default)({
@@ -63,8 +87,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,
 
@@ -90,6 +114,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`
      */
@@ -173,6 +210,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/test-env/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/test-env/components/avatar/avatar.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -23,8 +23,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _color = require("../../services/color");
 
-var _system = require("../provider/system");
-
 var _services = require("../../services");
 
 var _icon = require("../icon");
@@ -33,18 +31,17 @@ 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"];
 var SIZES = ['s', 'm', 'l', 'xl'];
 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,
@@ -60,6 +57,7 @@ var _EuiAvatar = function _EuiAvatar(_ref) {
       isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
       style = _ref.style,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _avatar.euiAvatarStyles)(euiTheme);
   var visColors = (0, _services.euiPaletteColorBlindBehindText)();
   var isPlain = color === 'plain';
@@ -112,10 +110,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,
@@ -176,9 +175,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/test-env/components/bottom_bar/bottom_bar.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -33,15 +33,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); }
 
@@ -83,8 +81,8 @@ 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 = (0, _objectWithoutProperties2.default)(_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;
@@ -158,7 +156,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,
@@ -223,9 +220,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, (0, _extends2.default)({
     ref: ref
   }, props)));

package/test-env/components/breadcrumbs/breadcrumbs.js

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

package/test-env/components/call_out/call_out.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 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 _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -25,7 +25,7 @@ var _icon = require("../icon");
 
 var _text = require("../text");
 
-var _system = require("../provider/system");
+var _services = require("../../services");
 
 var _panel = require("../panel");
 
@@ -35,7 +35,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 _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); }
 
@@ -45,8 +45,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,
@@ -57,13 +56,13 @@ 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 = (0, _objectWithoutProperties2.default)(_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', (0, _defineProperty2.default)({}, "euiCallOut--".concat(color), color), className);
   var headerIcon;
@@ -111,9 +110,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,
@@ -123,6 +121,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/test-env/components/expression/expression.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiExpression = exports.EuiExpression = exports.COLORS = void 0;
+exports.EuiExpression = exports.COLORS = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -21,13 +21,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 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; }
 
@@ -36,7 +36,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 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,
@@ -57,16 +57,16 @@ 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 = (0, _objectWithoutProperties2.default)(_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';
@@ -94,8 +94,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,
@@ -197,6 +197,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;
+};

package/test-env/components/facet/facet_button.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiFacetButton = exports.EuiFacetButton = void 0;
+exports.EuiFacetButton = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -25,7 +25,7 @@ var _inner_text = require("../inner_text");
 
 var _clone_element = require("../../services/theme/clone_element");
 
-var _system = require("../provider/system");
+var _services = require("../../services");
 
 var _facet_button = require("./facet_button.styles");
 
@@ -33,9 +33,9 @@ var _button_display = require("../button/button_display/_button_display");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "isSelected", "quantity", "buttonRef", "euiTheme"];
+var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "isSelected", "quantity", "buttonRef"];
 
-var _EuiFacetButton = function _EuiFacetButton(_ref) {
+var EuiFacetButton = function EuiFacetButton(_ref) {
   var children = _ref.children,
       className = _ref.className,
       icon = _ref.icon,
@@ -47,15 +47,15 @@ var _EuiFacetButton = function _EuiFacetButton(_ref) {
       isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
       quantity = _ref.quantity,
       buttonRef = _ref.buttonRef,
-      euiTheme = _ref.euiTheme,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // If in the loading state, force disabled to true
   isDisabled = isLoading ? true : isDisabled;
   var selection = isSelected ? 'isSelected' : 'unSelected';
   var classes = (0, _classnames.default)('euiFacetButton', className);
-  var styles = (0, _facet_button.euiFacetButtonStyles)(euiTheme);
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _facet_button.euiFacetButtonStyles)(theme);
   var cssStyles = [styles.euiFacetButton];
-  var textStyles = (0, _facet_button.euiFacetButtonTextStyles)(euiTheme);
+  var textStyles = (0, _facet_button.euiFacetButtonTextStyles)(theme);
   var cssTextStyles = [textStyles.euiFacetButton__text, textStyles[selection]];
   var quantityStyles = (0, _facet_button.euiFacetButtonQuantityStyles)();
   var cssQuantityStyles = [quantityStyles.euiFacetButton__quantity, isDisabled && quantityStyles.isDisabled];
@@ -108,8 +108,8 @@ var _EuiFacetButton = function _EuiFacetButton(_ref) {
   });
 };
 
-exports._EuiFacetButton = _EuiFacetButton;
-_EuiFacetButton.propTypes = {
+exports.EuiFacetButton = EuiFacetButton;
+EuiFacetButton.propTypes = {
   buttonRef: _propTypes.default.any,
 
   /**
@@ -141,6 +141,4 @@ _EuiFacetButton.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string
-};
-var EuiFacetButton = (0, _system.withEuiSystem)(_EuiFacetButton);
-exports.EuiFacetButton = EuiFacetButton;
+};