@elastic/eui 59.1.0-rc1 → 59.1.0

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

@@ -5,19 +5,21 @@ 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"));
 
 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");
 
@@ -25,19 +27,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`
@@ -50,6 +58,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)({
@@ -61,6 +85,4 @@ var _EuiSkipLink = function _EuiSkipLink(_ref) {
   }, optionalProps, rest), children));
 };
 
-exports._EuiSkipLink = _EuiSkipLink;
-var EuiSkipLink = (0, _system.withEuiSystem)(_EuiSkipLink);
 exports.EuiSkipLink = EuiSkipLink;

package/optimize/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/optimize/lib/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"));
 
@@ -21,8 +21,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _color = require("../../services/color");
 
-var _system = require("../provider/system");
-
 var _services = require("../../services");
 
 var _icon = require("../icon");
@@ -31,18 +29,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,
@@ -58,6 +55,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';
@@ -110,10 +108,8 @@ var _EuiAvatar = function _EuiAvatar(_ref) {
     role: isDisabled ? 'presentation' : 'img',
     title: name
   }, rest), content);
-};
+}; // TODO: Migrate to a service
 
-exports._EuiAvatar = _EuiAvatar;
-var EuiAvatar = (0, _system.withEuiSystem)(_EuiAvatar); // TODO: Migrate to a service
 
 exports.EuiAvatar = EuiAvatar;
 

package/optimize/lib/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"));
 
@@ -31,15 +31,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); }
 
@@ -81,8 +79,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;
@@ -156,11 +154,10 @@ var _EuiBottomBar = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   return usePortal ? (0, _react2.jsx)(_portal.EuiPortal, null, bar) : bar;
 });
 
-exports._EuiBottomBar = _EuiBottomBar;
 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/optimize/lib/components/breadcrumbs/breadcrumbs.js

@@ -183,8 +183,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/optimize/lib/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"));
 
@@ -23,7 +23,7 @@ var _icon = require("../icon");
 
 var _text = require("../text");
 
-var _system = require("../provider/system");
+var _services = require("../../services");
 
 var _panel = require("../panel");
 
@@ -33,7 +33,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); }
 
@@ -43,8 +43,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,
@@ -55,13 +54,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;
@@ -109,8 +108,5 @@ var _EuiCallOut = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     grow: false
   }, rest), header, optionalChildren);
 });
-
-exports._EuiCallOut = _EuiCallOut;
-_EuiCallOut.displayName = 'EuiCallOut';
-var EuiCallOut = (0, _system.withEuiSystem)(_EuiCallOut);
-exports.EuiCallOut = EuiCallOut;
+exports.EuiCallOut = EuiCallOut;
+EuiCallOut.displayName = 'EuiCallOut';

package/optimize/lib/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"));
 
@@ -19,13 +19,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; }
 
@@ -34,7 +34,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,
@@ -55,16 +55,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';
@@ -92,6 +92,4 @@ var _EuiExpression = function _EuiExpression(_ref) {
   }, valueProps), value), invalidIcon);
 };
 
-exports._EuiExpression = _EuiExpression;
-var EuiExpression = (0, _system.withEuiSystem)(_EuiExpression);
 exports.EuiExpression = EuiExpression;

package/optimize/lib/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"));
 
@@ -23,7 +23,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");
 
@@ -31,9 +31,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,
@@ -45,15 +45,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];
@@ -106,6 +106,4 @@ var _EuiFacetButton = function _EuiFacetButton(_ref) {
   });
 };
 
-exports._EuiFacetButton = _EuiFacetButton;
-var EuiFacetButton = (0, _system.withEuiSystem)(_EuiFacetButton);
 exports.EuiFacetButton = EuiFacetButton;

package/optimize/lib/components/facet/facet_group.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiFacetGroup = exports.LAYOUTS = exports.GUTTER_SIZES = exports.EuiFacetGroup = void 0;
+exports.LAYOUTS = exports.GUTTER_SIZES = exports.EuiFacetGroup = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,28 +15,28 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _system = require("../provider/system");
+var _services = require("../../services");
 
 var _facet_group = require("./facet_group.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "layout", "gutterSize", "euiTheme"];
+var _excluded = ["children", "className", "layout", "gutterSize"];
 var LAYOUTS = ['vertical', 'horizontal'];
 exports.LAYOUTS = LAYOUTS;
 var GUTTER_SIZES = ['none', 's', 'm', 'l'];
 exports.GUTTER_SIZES = GUTTER_SIZES;
 
-var _EuiFacetGroup = function _EuiFacetGroup(_ref) {
+var EuiFacetGroup = function EuiFacetGroup(_ref) {
   var children = _ref.children,
       className = _ref.className,
       _ref$layout = _ref.layout,
       layout = _ref$layout === void 0 ? 'vertical' : _ref$layout,
       _ref$gutterSize = _ref.gutterSize,
       gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
-      euiTheme = _ref.euiTheme,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var styles = (0, _facet_group.euiFacetGroupStyles)(euiTheme, layout);
+  var theme = (0, _services.useEuiTheme)();
+  var styles = (0, _facet_group.euiFacetGroupStyles)(theme, layout);
   var cssStyles = [styles.euiFacetGroup, styles[gutterSize], styles[layout]];
   var classes = (0, _classnames.default)('euiFacetGroup', className);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
@@ -45,6 +45,4 @@ var _EuiFacetGroup = function _EuiFacetGroup(_ref) {
   }, rest), children);
 };
 
-exports._EuiFacetGroup = _EuiFacetGroup;
-var EuiFacetGroup = (0, _system.withEuiSystem)(_EuiFacetGroup);
 exports.EuiFacetGroup = EuiFacetGroup;

package/optimize/lib/components/health/health.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiHealth = exports.TEXT_SIZES = exports.EuiHealth = void 0;
+exports.TEXT_SIZES = exports.EuiHealth = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _system = require("../provider/system");
+var _services = require("../../services");
 
 var _health = require("./health.styles");
 
@@ -25,18 +25,18 @@ var _flex = require("../flex");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "className", "color", "euiTheme", "textSize"];
+var _excluded = ["children", "className", "color", "textSize"];
 var TEXT_SIZES = ['xs', 's', 'm', 'inherit'];
 exports.TEXT_SIZES = TEXT_SIZES;
 
-var _EuiHealth = function _EuiHealth(_ref) {
+var EuiHealth = function EuiHealth(_ref) {
   var children = _ref.children,
       className = _ref.className,
       color = _ref.color,
-      euiTheme = _ref.euiTheme,
       _ref$textSize = _ref.textSize,
       textSize = _ref$textSize === void 0 ? 's' : _ref$textSize,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _health.euiHealthStyles)(euiTheme);
   var cssStyles = [styles.euiHealth, styles[textSize]];
   var classes = (0, _classnames.default)('euiHealth', className);
@@ -57,6 +57,4 @@ var _EuiHealth = function _EuiHealth(_ref) {
   }, children)));
 };
 
-exports._EuiHealth = _EuiHealth;
-var EuiHealth = (0, _system.withEuiSystem)(_EuiHealth);
 exports.EuiHealth = EuiHealth;

package/optimize/lib/components/horizontal_rule/horizontal_rule.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiHorizontalRule = exports.SIZES = exports.MARGINS = exports.EuiHorizontalRule = void 0;
+exports.SIZES = exports.MARGINS = exports.EuiHorizontalRule = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -17,13 +17,13 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _system = require("../provider/system");
+var _services = require("../../services");
 
 var _horizontal_rule = require("./horizontal_rule.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "euiTheme", "size", "margin"];
+var _excluded = ["className", "size", "margin"];
 var SIZES = ['full', 'half', 'quarter'];
 exports.SIZES = SIZES;
 var MARGINS = ['none', 'xs', 's', 'm', 'l', 'xl', 'xxl'];
@@ -38,16 +38,16 @@ var marginToClassNameMap = {
   xxl: 'marginXXLarge'
 };
 
-var _EuiHorizontalRule = function _EuiHorizontalRule(_ref) {
+var EuiHorizontalRule = function EuiHorizontalRule(_ref) {
   var _classNames;
 
   var className = _ref.className,
-      euiTheme = _ref.euiTheme,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'full' : _ref$size,
       _ref$margin = _ref.margin,
       margin = _ref$margin === void 0 ? 'l' : _ref$margin,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _horizontal_rule.euiHorizontalRuleStyles)(euiTheme);
   var classes = (0, _classnames.default)('euiHorizontalRule', (_classNames = {}, (0, _defineProperty2.default)(_classNames, "euiHorizontalRule--".concat(size), size), (0, _defineProperty2.default)(_classNames, "euiHorizontalRule--".concat(marginToClassNameMap[margin]), margin && margin !== 'none'), _classNames), className);
   var cssStyles = [styles.euiHorizontalRule, styles[size], styles[margin]];
@@ -57,6 +57,4 @@ var _EuiHorizontalRule = function _EuiHorizontalRule(_ref) {
   }, rest));
 };
 
-exports._EuiHorizontalRule = _EuiHorizontalRule;
-var EuiHorizontalRule = (0, _system.withEuiSystem)(_EuiHorizontalRule);
 exports.EuiHorizontalRule = EuiHorizontalRule;

package/optimize/lib/components/link/link.js

@@ -7,7 +7,7 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiLink = exports.EuiLink = exports.COLORS = void 0;
+exports.EuiLink = exports.COLORS = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -21,8 +21,6 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _services = require("../../services");
 
-var _system = require("../provider/system");
-
 var _link = require("./link.styles");
 
 var _icon = require("../icon");
@@ -35,7 +33,7 @@ var _href_validator = require("../../services/security/href_validator");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "color", "className", "href", "external", "target", "rel", "type", "onClick", "disabled", "euiTheme"];
+var _excluded = ["children", "color", "className", "href", "external", "target", "rel", "type", "onClick", "disabled"];
 
 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); }
 
@@ -47,8 +45,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 var COLORS = ['primary', 'subdued', 'success', 'accent', 'danger', 'warning', 'text', 'ghost'];
 exports.COLORS = COLORS;
-
-var _EuiLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
+var EuiLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'primary' : _ref$color,
@@ -61,8 +58,8 @@ var _EuiLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
       type = _ref$type === void 0 ? 'button' : _ref$type,
       onClick = _ref.onClick,
       _disabled = _ref.disabled,
-      euiTheme = _ref.euiTheme,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _link.euiLinkStyles)(euiTheme);
   var cssStyles = [styles.euiLink];
   var cssScreenReaderTextStyles = [styles.euiLink__screenReaderText];
@@ -116,8 +113,5 @@ var _EuiLink = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
     ref: ref
   }, anchorProps), children, showExternalLinkIcon && externalLinkIcon, target === '_blank' && newTargetScreenreaderText);
 });
-
-exports._EuiLink = _EuiLink;
-_EuiLink.displayName = 'EuiLink';
-var EuiLink = (0, _system.withEuiSystem)(_EuiLink);
-exports.EuiLink = EuiLink;
+exports.EuiLink = EuiLink;
+EuiLink.displayName = 'EuiLink';

package/optimize/lib/components/loading/loading_chart.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports._EuiLoadingChart = exports.SIZES = exports.EuiLoadingChart = void 0;
+exports.SIZES = exports.EuiLoadingChart = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -15,7 +15,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
-var _system = require("../provider/system");
+var _services = require("../../services");
 
 var _loading_chart = require("./loading_chart.styles");
 
@@ -23,20 +23,20 @@ var _i18n = require("../i18n");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["size", "mono", "className", "aria-label", "euiTheme"];
+var _excluded = ["size", "mono", "className", "aria-label"];
 var SIZES = ['m', 'l', 'xl'];
 exports.SIZES = SIZES;
 
-var _EuiLoadingChart = function _EuiLoadingChart(_ref) {
+var EuiLoadingChart = function EuiLoadingChart(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
       _ref$mono = _ref.mono,
       mono = _ref$mono === void 0 ? false : _ref$mono,
       className = _ref.className,
       ariaLabel = _ref['aria-label'],
-      euiTheme = _ref.euiTheme,
       rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var defaultAriaLabel = (0, _i18n.useEuiI18n)('euiLoadingChart.ariaLabel', 'Loading');
+  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _loading_chart.euiLoadingChartStyles)(euiTheme);
   var barStyles = (0, _loading_chart.euiLoadingChartBarStyles)(euiTheme);
   var classes = (0, _classnames.default)('euiLoadingChart', {
@@ -65,6 +65,4 @@ var _EuiLoadingChart = function _EuiLoadingChart(_ref) {
   }, rest), bars);
 };
 
-exports._EuiLoadingChart = _EuiLoadingChart;
-var EuiLoadingChart = (0, _system.withEuiSystem)(_EuiLoadingChart);
 exports.EuiLoadingChart = EuiLoadingChart;