@elastic/eui 59.1.0-rc1 → 59.1.0

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

@@ -1,7 +1,13 @@
-var _excluded = ["destinationId", "tabIndex", "position", "children", "className", "euiTheme"];
+var _excluded = ["destinationId", "overrideLinkBehavior", "tabIndex", "position", "children", "className"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
+function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
@@ -16,22 +22,23 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 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`
@@ -44,6 +51,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({
@@ -54,7 +77,7 @@ export var _EuiSkipLink = function _EuiSkipLink(_ref) {
     fill: true
   }, optionalProps, rest), children));
 };
-_EuiSkipLink.propTypes = {
+EuiSkipLink.propTypes = {
   href: PropTypes.string,
   onClick: PropTypes.func,
 
@@ -80,6 +103,19 @@ _EuiSkipLink.propTypes = {
      */
   destinationId: PropTypes.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.bool,
+
   /**
      * When position is fixed, this is forced to `0`
      */
@@ -163,5 +199,4 @@ _EuiSkipLink.propTypes = {
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
   buttonRef: PropTypes.any
-};
-export var EuiSkipLink = withEuiSystem(_EuiSkipLink);
+};

package/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/es/components/avatar/avatar.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "color", "euiTheme", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
+var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -31,19 +31,17 @@ import React from 'react';
 import PropTypes from "prop-types";
 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,
@@ -60,6 +58,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';
@@ -112,8 +111,9 @@ export var _EuiAvatar = function _EuiAvatar(_ref) {
     role: isDisabled ? 'presentation' : 'img',
     title: name
   }, rest), content);
-};
-_EuiAvatar.propTypes = {
+}; // TODO: Migrate to a service
+
+EuiAvatar.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
@@ -174,8 +174,6 @@ _EuiAvatar.propTypes = {
        */
   isDisabled: PropTypes.bool
 };
-export var EuiAvatar = withEuiSystem(_EuiAvatar); // TODO: Migrate to a service
-
 export var checkValidColor = function checkValidColor(color) {
   var validHex = color && isValidHex(color) || color === 'plain' || color === 'subdued';
 

package/es/components/bottom_bar/bottom_bar.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -34,14 +34,13 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import classNames from 'classnames';
 import PropTypes from "prop-types";
 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 = {
@@ -51,7 +50,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,
@@ -72,9 +72,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;
@@ -148,6 +148,7 @@ export var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   return usePortal ? ___EmotionJSX(EuiPortal, null, bar) : bar;
 });
+
 _EuiBottomBar.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
@@ -212,9 +213,9 @@ _EuiBottomBar.propTypes = {
   left: PropTypes.any
 };
 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/es/components/breadcrumbs/breadcrumbs.js

@@ -184,8 +184,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/es/components/call_out/call_out.js

@@ -1,4 +1,4 @@
-var _excluded = ["title", "color", "size", "iconType", "children", "className", "heading", "euiTheme"];
+var _excluded = ["title", "color", "size", "iconType", "children", "className", "heading"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -20,14 +20,14 @@ import PropTypes from "prop-types";
 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,
@@ -38,14 +38,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;
@@ -93,7 +93,7 @@ export var _EuiCallOut = /*#__PURE__*/forwardRef(function (_ref, ref) {
     grow: false
   }, rest), header, optionalChildren);
 });
-_EuiCallOut.propTypes = {
+EuiCallOut.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
@@ -103,5 +103,4 @@ _EuiCallOut.propTypes = {
   size: PropTypes.oneOf(["s", "m"]),
   heading: PropTypes.any
 };
-_EuiCallOut.displayName = 'EuiCallOut';
-export var EuiCallOut = withEuiSystem(_EuiCallOut);
+EuiCallOut.displayName = 'EuiCallOut';

package/es/components/expression/expression.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -23,11 +23,11 @@ import React from 'react';
 import PropTypes from "prop-types";
 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,
@@ -48,17 +48,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';
@@ -85,7 +85,7 @@ export var _EuiExpression = function _EuiExpression(_ref) {
     css: cssValueStyles
   }, valueProps), value), invalidIcon);
 };
-_EuiExpression.propTypes = {
+EuiExpression.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
@@ -187,5 +187,4 @@ _EuiExpression.propTypes = {
      * Sets how to handle the wrapping of long text.
      */
   textWrap: PropTypes.oneOf(["break-word", "truncate"])
-};
-export var EuiExpression = withEuiSystem(_EuiExpression);
+};

package/es/components/facet/facet_button.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "isSelected", "quantity", "buttonRef", "euiTheme"];
+var _excluded = ["children", "className", "icon", "isDisabled", "isLoading", "isSelected", "quantity", "buttonRef"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -20,11 +20,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,
@@ -36,16 +36,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];
@@ -97,7 +97,7 @@ export var _EuiFacetButton = function _EuiFacetButton(_ref) {
     }, children), buttonQuantity);
   });
 };
-_EuiFacetButton.propTypes = {
+EuiFacetButton.propTypes = {
   buttonRef: PropTypes.any,
 
   /**
@@ -129,5 +129,4 @@ _EuiFacetButton.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string
-};
-export var EuiFacetButton = withEuiSystem(_EuiFacetButton);
+};

package/es/components/facet/facet_group.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "layout", "gutterSize", "euiTheme"];
+var _excluded = ["children", "className", "layout", "gutterSize"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -16,22 +16,22 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 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({
@@ -39,7 +39,7 @@ export var _EuiFacetGroup = function _EuiFacetGroup(_ref) {
     css: cssStyles
   }, rest), children);
 };
-_EuiFacetGroup.propTypes = {
+EuiFacetGroup.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
@@ -54,5 +54,4 @@ _EuiFacetGroup.propTypes = {
        * Horizontal layout always adds more distance horizontally between buttons.
        */
   gutterSize: PropTypes.any
-};
-export var EuiFacetGroup = withEuiSystem(_EuiFacetGroup);
+};

package/es/components/health/health.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "color", "euiTheme", "textSize"];
+var _excluded = ["children", "className", "color", "textSize"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -16,21 +16,21 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 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);
@@ -50,7 +50,7 @@ export var _EuiHealth = function _EuiHealth(_ref) {
     grow: false
   }, children)));
 };
-_EuiHealth.propTypes = {
+EuiHealth.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
@@ -67,5 +67,4 @@ _EuiHealth.propTypes = {
        * The `inherit` style will get its font size from the parent element
        */
   textSize: PropTypes.any
-};
-export var EuiHealth = withEuiSystem(_EuiHealth);
+};

package/es/components/horizontal_rule/horizontal_rule.js

@@ -1,4 +1,4 @@
-var _excluded = ["className", "euiTheme", "size", "margin"];
+var _excluded = ["className", "size", "margin"];
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -18,7 +18,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 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'];
@@ -32,17 +32,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]];
@@ -51,7 +51,7 @@ export var _EuiHorizontalRule = function _EuiHorizontalRule(_ref) {
     className: classes
   }, rest));
 };
-_EuiHorizontalRule.propTypes = {
+EuiHorizontalRule.propTypes = {
   /**
      * Defines the width of the HR.
      */
@@ -60,5 +60,4 @@ _EuiHorizontalRule.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string
-};
-export var EuiHorizontalRule = withEuiSystem(_EuiHorizontalRule);
+};

package/es/components/link/link.js

@@ -1,4 +1,4 @@
-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 _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
@@ -22,8 +22,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { forwardRef } from 'react';
 import PropTypes from "prop-types";
 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';
@@ -31,7 +30,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,
@@ -44,9 +43,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];
@@ -102,7 +101,7 @@ export var _EuiLink = /*#__PURE__*/forwardRef(function (_ref, ref) {
     ref: ref
   }, anchorProps), children, showExternalLinkIcon && externalLinkIcon, target === '_blank' && newTargetScreenreaderText);
 });
-_EuiLink.propTypes = {
+EuiLink.propTypes = {
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,
@@ -124,5 +123,5 @@ _EuiLink.propTypes = {
      */
   external: PropTypes.bool
 };
-_EuiLink.displayName = 'EuiLink';
-export var EuiLink = withEuiSystem(_EuiLink);
+EuiLink.displayName = 'EuiLink';
+export { EuiLink };