@elastic/eui 59.1.0-rc1 → 60.0.0

package/lib/{components/provider/system → 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/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/optimize/es/components/accessibility/skip_link/skip_link.js

@@ -1,6 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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) { _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; }
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -11,22 +16,23 @@ var _excluded = ["destinationId", "tabIndex", "position", "children", "className
  */
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
 import { EuiButton } from '../../button/button';
-import { withEuiSystem } from '../../provider/system';
 import { EuiScreenReaderOnly } from '../screen_reader_only';
 import { euiSkipLinkStyles } from './skip_link.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var POSITIONS = ['static', 'fixed', 'absolute'];
-export var _EuiSkipLink = function _EuiSkipLink(_ref) {
+export 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 = useEuiTheme();
   var styles = euiSkipLinkStyles(euiTheme);
   var classes = classNames('euiSkipLink', className);
   var cssStyles = [styles.euiSkipLink, position !== 'static' ? styles[position] : undefined]; // Create the `href` from `destinationId`
@@ -39,6 +45,22 @@ export 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 ___EmotionJSX(EuiScreenReaderOnly, {
     showOnFocus: true
   }, ___EmotionJSX(EuiButton, _extends({
@@ -48,5 +70,4 @@ export var _EuiSkipLink = function _EuiSkipLink(_ref) {
     size: "s",
     fill: true
   }, optionalProps, rest), children));
-};
-export var EuiSkipLink = withEuiSystem(_EuiSkipLink);
+};

package/optimize/es/components/accessibility/skip_link/skip_link.styles.js

@@ -35,6 +35,6 @@ export 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__*/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__*/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/es/components/avatar/avatar.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,19 +14,17 @@ var _excluded = ["className", "color", "euiTheme", "imageUrl", "initials", "init
 import React from 'react';
 import classNames from 'classnames';
 import { isColorDark, hexToRgb, isValidHex } from '../../services/color';
-import { withEuiSystem } from '../provider/system';
-import { euiPaletteColorBlindBehindText, toInitials } from '../../services';
+import { euiPaletteColorBlindBehindText, toInitials, useEuiTheme } from '../../services';
 import { EuiIcon } from '../icon';
 import { euiAvatarStyles } from './avatar.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['s', 'm', 'l', 'xl'];
 export var TYPES = ['space', 'user'];
-export var _EuiAvatar = function _EuiAvatar(_ref) {
+export 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,
@@ -43,6 +41,7 @@ export var _EuiAvatar = function _EuiAvatar(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = useEuiTheme();
   var styles = euiAvatarStyles(euiTheme);
   var visColors = euiPaletteColorBlindBehindText();
   var isPlain = color === 'plain';
@@ -95,8 +94,7 @@ export var _EuiAvatar = function _EuiAvatar(_ref) {
     role: isDisabled ? 'presentation' : 'img',
     title: name
   }, rest), content);
-};
-export var EuiAvatar = withEuiSystem(_EuiAvatar); // TODO: Migrate to a service
+}; // TODO: Migrate to a service
 
 export var checkValidColor = function checkValidColor(color) {
   var validHex = color && isValidHex(color) || color === 'plain' || color === 'subdued';

package/optimize/es/components/bottom_bar/bottom_bar.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 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; }
 
@@ -17,14 +17,13 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import classNames from 'classnames';
 import React, { forwardRef, useEffect, useState } from 'react';
-import { useCombinedRefs } from '../../services';
+import { useCombinedRefs, useEuiTheme } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
-import { withEuiSystem } from '../provider/system';
-import { EuiThemeProvider } from '../../services/theme/provider';
 import { euiBottomBarStyles } from './bottom_bar.styles';
+import { EuiThemeProvider } from '../../services/theme/provider';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 // Exported for testing
 export var paddingSizeToClassNameMap = {
@@ -34,7 +33,8 @@ export var paddingSizeToClassNameMap = {
   l: 'euiBottomBar--paddingLarge'
 };
 export var POSITIONS = ['static', 'fixed', 'sticky'];
-export var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+
+var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var _ref$position = _ref.position,
       position = _ref$position === void 0 ? 'fixed' : _ref$position,
       _ref$paddingSize = _ref.paddingSize,
@@ -55,9 +55,9 @@ export var _EuiBottomBar = /*#__PURE__*/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 = useEuiTheme();
   var styles = euiBottomBarStyles(euiTheme); // Force some props if `fixed` position, but not if the user has supplied these
 
   affordForDisplacement = position !== 'fixed' ? false : affordForDisplacement;
@@ -131,10 +131,11 @@ export var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   return usePortal ? ___EmotionJSX(EuiPortal, null, bar) : bar;
 });
+
 export var EuiBottomBar = /*#__PURE__*/forwardRef(function (props, ref) {
-  var BottomBar = withEuiSystem(_EuiBottomBar);
+  var BottomBar = _EuiBottomBar;
   return ___EmotionJSX(EuiThemeProvider, {
-    colorMode: "dark"
+    colorMode: 'dark'
   }, ___EmotionJSX(BottomBar, _extends({
     ref: ref
   }, props)));

package/optimize/es/components/breadcrumbs/breadcrumbs.js

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

package/optimize/es/components/call_out/call_out.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["title", "color", "size", "iconType", "children", "className", "heading", "euiTheme"];
+var _excluded = ["title", "color", "size", "iconType", "children", "className", "heading"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -14,14 +14,14 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { EuiIcon } from '../icon';
 import { EuiText } from '../text';
-import { withEuiSystem } from '../provider/system';
+import { useEuiTheme } from '../../services';
 import { EuiPanel } from '../panel';
 import { EuiTitle } from '../title';
 import { euiCallOutStyles, euiCallOutHeadingStyles } from './call_out.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['primary', 'success', 'warning', 'danger'];
 export var HEADINGS = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'];
-export var _EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export var EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var title = _ref.title,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'primary' : _ref$color,
@@ -32,14 +32,14 @@ export var _EuiCallOut = /*#__PURE__*/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 = euiCallOutStyles(euiTheme);
+  var theme = useEuiTheme();
+  var styles = euiCallOutStyles(theme);
   var cssStyles = [styles.euiCallOut];
   var cssIconStyle = [styles.euiCallOut__icon];
   var cssDescriptionStyle = [styles.euiCallOut__description];
-  var headerStyles = euiCallOutHeadingStyles(euiTheme);
+  var headerStyles = euiCallOutHeadingStyles(theme);
   var cssHeaderStyles = [headerStyles.euiCallOutHeader, headerStyles[color]];
   var classes = classNames('euiCallOut', _defineProperty({}, "euiCallOut--".concat(color), color), className);
   var headerIcon;
@@ -87,5 +87,4 @@ export var _EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
     grow: false
   }, rest), header, optionalChildren);
 });
-_EuiCallOut.displayName = 'EuiCallOut';
-export var EuiCallOut = withEuiSystem(_EuiCallOut);
+EuiCallOut.displayName = 'EuiCallOut';

package/optimize/es/components/combo_box/matching_options.js

@@ -10,7 +10,7 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 export 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);
     }
@@ -68,8 +68,9 @@ export var getMatchingOptions = function getMatchingOptions(options, selectedOpt
           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/optimize/es/components/expression/expression.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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; }
 
@@ -17,11 +17,11 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import classNames from 'classnames';
 import { EuiIcon } from '../icon';
-import { withEuiSystem } from '../provider/system';
+import { useEuiTheme } from '../../services';
 import { euiExpressionStyles, euiExpressionDescriptionStyles, euiExpressionValueStyles, euiExpressionIconStyles } from './expression.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['subdued', 'primary', 'success', 'accent', 'warning', 'danger'];
-export var _EuiExpression = function _EuiExpression(_ref) {
+export var EuiExpression = function EuiExpression(_ref) {
   var className = _ref.className,
       description = _ref.description,
       descriptionProps = _ref.descriptionProps,
@@ -42,17 +42,17 @@ export 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 = euiExpressionStyles(euiTheme);
+  var theme = useEuiTheme();
+  var styles = 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 = euiExpressionDescriptionStyles(euiTheme);
+  var descriptionStyles = 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 = euiExpressionValueStyles(euiTheme);
+  var valueStyles = euiExpressionValueStyles(theme);
   var cssValueStyles = [valueStyles.euiExpression__value, textWrap === 'truncate' && valueStyles.truncate, display === 'columns' && valueStyles.columns];
-  var iconStyles = euiExpressionIconStyles(euiTheme);
+  var iconStyles = euiExpressionIconStyles(theme);
   var cssIconStyles = [iconStyles.euiExpression__icon, display === 'columns' && iconStyles.columns];
   var classes = classNames('euiExpression', className);
   var Component = onClick ? 'button' : 'span';
@@ -78,5 +78,4 @@ export var _EuiExpression = function _EuiExpression(_ref) {
     className: "euiExpression__value",
     css: cssValueStyles
   }, valueProps), value), invalidIcon);
-};
-export var EuiExpression = withEuiSystem(_EuiExpression);
+};

package/optimize/es/components/facet/facet_button.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "isSelected", "quantity", "buttonRef", "euiTheme"];
+var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "isSelected", "quantity", "buttonRef"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -15,11 +15,11 @@ import { EuiNotificationBadge } from '../badge';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiInnerText } from '../inner_text';
 import { cloneElementWithCss } from '../../services/theme/clone_element';
-import { withEuiSystem } from '../provider/system';
+import { useEuiTheme } from '../../services';
 import { euiFacetButtonStyles, euiFacetButtonTextStyles, euiFacetButtonIconStyles, euiFacetButtonQuantityStyles, euiFacetButtonLoadingSpinnerStyles } from './facet_button.styles';
 import { EuiButtonDisplay } from '../button/button_display/_button_display';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var _EuiFacetButton = function _EuiFacetButton(_ref) {
+export var EuiFacetButton = function EuiFacetButton(_ref) {
   var children = _ref.children,
       className = _ref.className,
       icon = _ref.icon,
@@ -31,16 +31,16 @@ export var _EuiFacetButton = function _EuiFacetButton(_ref) {
       isSelected = _ref$isSelected === void 0 ? false : _ref$isSelected,
       quantity = _ref.quantity,
       buttonRef = _ref.buttonRef,
-      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   // If in the loading state, force disabled to true
   isDisabled = isLoading ? true : isDisabled;
   var selection = isSelected ? 'isSelected' : 'unSelected';
   var classes = classNames('euiFacetButton', className);
-  var styles = euiFacetButtonStyles(euiTheme);
+  var theme = useEuiTheme();
+  var styles = euiFacetButtonStyles(theme);
   var cssStyles = [styles.euiFacetButton];
-  var textStyles = euiFacetButtonTextStyles(euiTheme);
+  var textStyles = euiFacetButtonTextStyles(theme);
   var cssTextStyles = [textStyles.euiFacetButton__text, textStyles[selection]];
   var quantityStyles = euiFacetButtonQuantityStyles();
   var cssQuantityStyles = [quantityStyles.euiFacetButton__quantity, isDisabled && quantityStyles.isDisabled];
@@ -91,5 +91,4 @@ export var _EuiFacetButton = function _EuiFacetButton(_ref) {
       ref: ref
     }, children), buttonQuantity);
   });
-};
-export var EuiFacetButton = withEuiSystem(_EuiFacetButton);
+};

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "layout", "gutterSize", "euiTheme"];
+var _excluded = ["children", "className", "layout", "gutterSize"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -11,27 +11,26 @@ var _excluded = ["children", "className", "layout", "gutterSize", "euiTheme"];
  */
 import React from 'react';
 import classNames from 'classnames';
-import { withEuiSystem } from '../provider/system';
+import { useEuiTheme } from '../../services';
 import { euiFacetGroupStyles } from './facet_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var LAYOUTS = ['vertical', 'horizontal'];
 export var GUTTER_SIZES = ['none', 's', 'm', 'l'];
-export var _EuiFacetGroup = function _EuiFacetGroup(_ref) {
+export 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 = _objectWithoutProperties(_ref, _excluded);
 
-  var styles = euiFacetGroupStyles(euiTheme, layout);
+  var theme = useEuiTheme();
+  var styles = euiFacetGroupStyles(theme, layout);
   var cssStyles = [styles.euiFacetGroup, styles[gutterSize], styles[layout]];
   var classes = classNames('euiFacetGroup', className);
   return ___EmotionJSX("div", _extends({
     className: classes,
     css: cssStyles
   }, rest), children);
-};
-export var EuiFacetGroup = withEuiSystem(_EuiFacetGroup);
+};

package/optimize/es/components/health/health.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "color", "euiTheme", "textSize"];
+var _excluded = ["children", "className", "color", "textSize"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -11,21 +11,21 @@ var _excluded = ["children", "className", "color", "euiTheme", "textSize"];
  */
 import React from 'react';
 import classNames from 'classnames';
-import { withEuiSystem } from '../provider/system';
+import { useEuiTheme } from '../../services';
 import { euiHealthStyles } from './health.styles';
 import { EuiIcon } from '../icon';
 import { EuiFlexGroup, EuiFlexItem } from '../flex';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var TEXT_SIZES = ['xs', 's', 'm', 'inherit'];
-export var _EuiHealth = function _EuiHealth(_ref) {
+export 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 = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = useEuiTheme();
   var styles = euiHealthStyles(euiTheme);
   var cssStyles = [styles.euiHealth, styles[textSize]];
   var classes = classNames('euiHealth', className);
@@ -44,5 +44,4 @@ export var _EuiHealth = function _EuiHealth(_ref) {
   })), ___EmotionJSX(EuiFlexItem, {
     grow: false
   }, children)));
-};
-export var EuiHealth = withEuiSystem(_EuiHealth);
+};

package/optimize/es/components/horizontal_rule/horizontal_rule.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "euiTheme", "size", "margin"];
+var _excluded = ["className", "size", "margin"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -12,7 +12,7 @@ var _excluded = ["className", "euiTheme", "size", "margin"];
  */
 import React from 'react';
 import classNames from 'classnames';
-import { withEuiSystem } from '../provider/system';
+import { useEuiTheme } from '../../services';
 import { euiHorizontalRuleStyles } from './horizontal_rule.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['full', 'half', 'quarter'];
@@ -26,17 +26,17 @@ var marginToClassNameMap = {
   xl: 'marginXLarge',
   xxl: 'marginXXLarge'
 };
-export var _EuiHorizontalRule = function _EuiHorizontalRule(_ref) {
+export 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 = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = useEuiTheme();
   var styles = euiHorizontalRuleStyles(euiTheme);
   var classes = classNames('euiHorizontalRule', (_classNames = {}, _defineProperty(_classNames, "euiHorizontalRule--".concat(size), size), _defineProperty(_classNames, "euiHorizontalRule--".concat(marginToClassNameMap[margin]), margin && margin !== 'none'), _classNames), className);
   var cssStyles = [styles.euiHorizontalRule, styles[size], styles[margin]];
@@ -44,5 +44,4 @@ export var _EuiHorizontalRule = function _EuiHorizontalRule(_ref) {
     css: cssStyles,
     className: classes
   }, rest));
-};
-export var EuiHorizontalRule = withEuiSystem(_EuiHorizontalRule);
+};

package/optimize/es/components/link/link.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-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 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; }
 
@@ -16,8 +16,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 import React, { forwardRef } from 'react';
 import classNames from 'classnames';
-import { getSecureRelForTarget } from '../../services';
-import { withEuiSystem } from '../provider/system';
+import { getSecureRelForTarget, useEuiTheme } from '../../services';
 import { euiLinkStyles } from './link.styles';
 import { EuiIcon } from '../icon';
 import { EuiI18n, useEuiI18n } from '../i18n';
@@ -25,7 +24,7 @@ import { EuiScreenReaderOnly } from '../accessibility';
 import { validateHref } from '../../services/security/href_validator';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['primary', 'subdued', 'success', 'accent', 'danger', 'warning', 'text', 'ghost'];
-export var _EuiLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
+var EuiLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'primary' : _ref$color,
@@ -38,9 +37,9 @@ export var _EuiLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
       type = _ref$type === void 0 ? 'button' : _ref$type,
       onClick = _ref.onClick,
       _disabled = _ref.disabled,
-      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = useEuiTheme();
   var styles = euiLinkStyles(euiTheme);
   var cssStyles = [styles.euiLink];
   var cssScreenReaderTextStyles = [styles.euiLink__screenReaderText];
@@ -96,5 +95,5 @@ export var _EuiLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, anchorProps), children, showExternalLinkIcon && externalLinkIcon, target === '_blank' && newTargetScreenreaderText);
 });
-_EuiLink.displayName = 'EuiLink';
-export var EuiLink = withEuiSystem(_EuiLink);
+EuiLink.displayName = 'EuiLink';
+export { EuiLink };

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["size", "mono", "className", "aria-label", "euiTheme"];
+var _excluded = ["size", "mono", "className", "aria-label"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -11,22 +11,22 @@ var _excluded = ["size", "mono", "className", "aria-label", "euiTheme"];
  */
 import React from 'react';
 import classNames from 'classnames';
-import { withEuiSystem } from '../provider/system';
+import { useEuiTheme } from '../../services';
 import { euiLoadingChartStyles, euiLoadingChartBarStyles, _barIndex } from './loading_chart.styles';
 import { useEuiI18n } from '../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var SIZES = ['m', 'l', 'xl'];
-export var _EuiLoadingChart = function _EuiLoadingChart(_ref) {
+export 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 = _objectWithoutProperties(_ref, _excluded);
 
   var defaultAriaLabel = useEuiI18n('euiLoadingChart.ariaLabel', 'Loading');
+  var euiTheme = useEuiTheme();
   var styles = euiLoadingChartStyles(euiTheme);
   var barStyles = euiLoadingChartBarStyles(euiTheme);
   var classes = classNames('euiLoadingChart', {
@@ -53,5 +53,4 @@ export var _EuiLoadingChart = function _EuiLoadingChart(_ref) {
     role: "progressbar",
     "aria-label": ariaLabel || defaultAriaLabel
   }, rest), bars);
-};
-export var EuiLoadingChart = withEuiSystem(_EuiLoadingChart);
+};