@elastic/eui 59.0.1 → 59.1.0-rc1

package/lib/components/text/text_color.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiTextColor = exports.COLORS = void 0;
+exports._EuiTextColor = exports.EuiTextColor = exports.COLORS = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -13,13 +13,13 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _clone_element = require("../../services/theme/clone_element");
 
-var _services = require("../../services");
+var _system = require("../provider/system");
 
 var _text_color = require("./text_color.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "color", "component", "cloneElement", "style"];
+var _excluded = ["children", "color", "component", "cloneElement", "style", "euiTheme"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -40,7 +40,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];
 exports.COLORS = COLORS;
 
-var EuiTextColor = function EuiTextColor(_ref) {
+var _EuiTextColor = function _EuiTextColor(_ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
       color = _ref$color === void 0 ? 'default' : _ref$color,
@@ -49,10 +49,10 @@ var EuiTextColor = function EuiTextColor(_ref) {
       _ref$cloneElement = _ref.cloneElement,
       cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
       style = _ref.style,
+      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var isNamedColor = COLORS.includes(color);
-  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _text_color.euiTextColorStyles)(euiTheme);
   var cssStyles = [styles.euiTextColor, isNamedColor ? styles[color] : styles.customColor]; // We're checking if is a custom color.
   // If it is a custom color we set the `color` of the `.euiTextColor` div to that custom color.
@@ -79,8 +79,8 @@ var EuiTextColor = function EuiTextColor(_ref) {
   }
 };
 
-exports.EuiTextColor = EuiTextColor;
-EuiTextColor.propTypes = {
+exports._EuiTextColor = _EuiTextColor;
+_EuiTextColor.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
@@ -100,4 +100,6 @@ EuiTextColor.propTypes = {
        * Can only be used when wrapping a *single* child element/tag, and not raw text.
        */
   cloneElement: _propTypes.default.bool
-};
+};
+var EuiTextColor = (0, _system.withEuiSystem)(_EuiTextColor);
+exports.EuiTextColor = EuiTextColor;

package/lib/components/timeline/timeline_item.js

@@ -3,13 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.VERTICAL_ALIGN = exports.EuiTimelineItem = void 0;
+exports._EuiTimelineItem = exports.VERTICAL_ALIGN = exports.EuiTimelineItem = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _services = require("../../services");
+var _system = require("../provider/system");
 
 var _timeline_item_event = require("./timeline_item_event");
 
@@ -19,7 +19,7 @@ var _timeline_item = require("./timeline_item.styles");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["children", "verticalAlign", "icon", "iconAriaLabel", "className", "component"];
+var _excluded = ["children", "verticalAlign", "icon", "iconAriaLabel", "className", "component", "euiTheme"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -32,7 +32,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 var VERTICAL_ALIGN = ['top', 'center'];
 exports.VERTICAL_ALIGN = VERTICAL_ALIGN;
 
-var EuiTimelineItem = function EuiTimelineItem(_ref) {
+var _EuiTimelineItem = function _EuiTimelineItem(_ref) {
   var children = _ref.children,
       _ref$verticalAlign = _ref.verticalAlign,
       verticalAlign = _ref$verticalAlign === void 0 ? 'center' : _ref$verticalAlign,
@@ -41,9 +41,9 @@ var EuiTimelineItem = function EuiTimelineItem(_ref) {
       className = _ref.className,
       _ref$component = _ref.component,
       component = _ref$component === void 0 ? 'li' : _ref$component,
+      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _timeline_item.euiTimelineItemStyles)(euiTheme);
   var cssStyles = [styles.euiTimelineItem];
   var Element = component;
@@ -58,8 +58,8 @@ var EuiTimelineItem = function EuiTimelineItem(_ref) {
   }, children));
 };
 
-exports.EuiTimelineItem = EuiTimelineItem;
-EuiTimelineItem.propTypes = {
+exports._EuiTimelineItem = _EuiTimelineItem;
+_EuiTimelineItem.propTypes = {
   /**
      * Vertical alignment of the event with the icon
      */
@@ -74,4 +74,6 @@ EuiTimelineItem.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string
-};
+};
+var EuiTimelineItem = (0, _system.withEuiSystem)(_EuiTimelineItem);
+exports.EuiTimelineItem = EuiTimelineItem;

package/lib/components/timeline/timeline_item_icon.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiTimelineItemIcon = void 0;
+exports._EuiTimelineItemIcon = exports.EuiTimelineItemIcon = void 0;
 
 var _react = _interopRequireDefault(require("react"));
 
@@ -11,7 +11,7 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 
 var _avatar = require("../avatar");
 
-var _services = require("../../services");
+var _system = require("../provider/system");
 
 var _timeline_item_icon = require("./timeline_item_icon.styles");
 
@@ -26,12 +26,12 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var EuiTimelineItemIcon = function EuiTimelineItemIcon(_ref) {
+var _EuiTimelineItemIcon = function _EuiTimelineItemIcon(_ref) {
   var icon = _ref.icon,
       _ref$verticalAlign = _ref.verticalAlign,
       verticalAlign = _ref$verticalAlign === void 0 ? 'center' : _ref$verticalAlign,
-      iconAriaLabel = _ref.iconAriaLabel;
-  var euiTheme = (0, _services.useEuiTheme)();
+      iconAriaLabel = _ref.iconAriaLabel,
+      euiTheme = _ref.euiTheme;
   var styles = (0, _timeline_item_icon.euiTimelineItemIconStyles)(euiTheme);
   var cssStyles = [styles.euiTimelineItemIcon, styles[verticalAlign]];
   var cssContentStyles = styles.euiTimelineItemIcon__content;
@@ -48,8 +48,8 @@ var EuiTimelineItemIcon = function EuiTimelineItemIcon(_ref) {
   }, iconRender));
 };
 
-exports.EuiTimelineItemIcon = EuiTimelineItemIcon;
-EuiTimelineItemIcon.propTypes = {
+exports._EuiTimelineItemIcon = _EuiTimelineItemIcon;
+_EuiTimelineItemIcon.propTypes = {
   /**
      * Any `ReactNode`, but preferably `EuiAvatar`, or a `string` as an `EuiIcon['type']`.
      */
@@ -61,4 +61,6 @@ EuiTimelineItemIcon.propTypes = {
      * If no `aria-label` is passed we assume the icon is purely decorative.
      */
   iconAriaLabel: _propTypes.default.string
-};
+};
+var EuiTimelineItemIcon = (0, _system.withEuiSystem)(_EuiTimelineItemIcon);
+exports.EuiTimelineItemIcon = EuiTimelineItemIcon;

package/lib/components/title/title.js

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.TITLE_SIZES = exports.TEXT_TRANSFORM = exports.EuiTitle = void 0;
+exports._EuiTitle = exports.TITLE_SIZES = exports.TEXT_TRANSFORM = exports.EuiTitle = void 0;
 
 var _classnames = _interopRequireDefault(require("classnames"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _services = require("../../services");
-
 var _clone_element = require("../../services/theme/clone_element");
 
 var _title = require("./title.styles");
 
-var _excluded = ["size", "children", "className", "textTransform"];
+var _system = require("../provider/system");
+
+var _excluded = ["size", "children", "className", "textTransform", "euiTheme"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -34,15 +34,15 @@ exports.TITLE_SIZES = TITLE_SIZES;
 var TEXT_TRANSFORM = ['uppercase'];
 exports.TEXT_TRANSFORM = TEXT_TRANSFORM;
 
-var EuiTitle = function EuiTitle(_ref) {
+var _EuiTitle = function _EuiTitle(_ref) {
   var _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'm' : _ref$size,
       children = _ref.children,
       className = _ref.className,
       textTransform = _ref.textTransform,
+      euiTheme = _ref.euiTheme,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _title.euiTitleStyles)(euiTheme);
   var cssStyles = [styles.euiTitle, textTransform ? styles[textTransform] : undefined, styles[size]];
   var classes = (0, _classnames.default)('euiTitle', className, children.props.className);
@@ -55,8 +55,8 @@ var EuiTitle = function EuiTitle(_ref) {
   return (0, _clone_element.cloneElementWithCss)(children, props);
 };
 
-exports.EuiTitle = EuiTitle;
-EuiTitle.propTypes = {
+exports._EuiTitle = _EuiTitle;
+_EuiTitle.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
@@ -68,4 +68,6 @@ EuiTitle.propTypes = {
   size: _propTypes.default.any,
   textTransform: _propTypes.default.any,
   id: _propTypes.default.string
-};
+};
+var EuiTitle = (0, _system.withEuiSystem)(_EuiTitle);
+exports.EuiTitle = EuiTitle;

package/lib/global_styling/utility/utility.js

@@ -0,0 +1,31 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.EuiUtilityClasses = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@emotion/react");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "bd8dxy-EuiUtilityClasses",
+  styles: ".euiYolo{color:coral;};label:EuiUtilityClasses;"
+} : {
+  name: "bd8dxy-EuiUtilityClasses",
+  styles: ".euiYolo{color:coral;};label:EuiUtilityClasses;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var EuiUtilityClasses = function EuiUtilityClasses() {
+  return (0, _react2.jsx)(_react2.Global, {
+    styles: _ref
+  });
+};
+
+exports.EuiUtilityClasses = EuiUtilityClasses;

package/lib/services/theme/hooks.js

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

package/lib/services/theme/provider.js

@@ -9,14 +9,14 @@ exports.EuiThemeProvider = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
-var _react2 = require("@emotion/react");
-
 var _isEqual = _interopRequireDefault(require("lodash/isEqual"));
 
 var _context = require("./context");
 
 var _utils = require("./utils");
 
+var _react2 = require("@emotion/react");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 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); }
@@ -39,7 +39,6 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
       _colorMode = _ref.colorMode,
       _modifications = _ref.modify,
-      cache = _ref.cache,
       children = _ref.children;
   var parentSystem = (0, _react.useContext)(_context.EuiSystemContext);
   var parentModifications = (0, _react.useContext)(_context.EuiModificationsContext);
@@ -113,9 +112,7 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
     value: modifications
   }, (0, _react2.jsx)(_context.EuiThemeContext.Provider, {
     value: theme
-  }, cache ? (0, _react2.jsx)(_react2.CacheProvider, {
-    value: cache
-  }, children) : children))));
+  }, children))));
 };
 
 exports.EuiThemeProvider = EuiThemeProvider;

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["destinationId", "tabIndex", "position", "children", "className"];
+var _excluded = ["destinationId", "tabIndex", "position", "children", "className", "euiTheme"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -11,22 +11,22 @@ 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,
       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`
@@ -48,4 +48,5 @@ export var EuiSkipLink = function EuiSkipLink(_ref) {
     size: "s",
     fill: true
   }, optionalProps, rest), children));
-};
+};
+export var EuiSkipLink = withEuiSystem(_EuiSkipLink);

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", "imageUrl", "initials", "initialsLength", "iconType", "iconSize", "iconColor", "name", "size", "type", "isDisabled", "style"];
+var _excluded = ["className", "color", "euiTheme", "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,17 +14,19 @@ var _excluded = ["className", "color", "imageUrl", "initials", "initialsLength",
 import React from 'react';
 import classNames from 'classnames';
 import { isColorDark, hexToRgb, isValidHex } from '../../services/color';
-import { euiPaletteColorBlindBehindText, toInitials, useEuiTheme } from '../../services';
+import { withEuiSystem } from '../provider/system';
+import { euiPaletteColorBlindBehindText, toInitials } 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,
@@ -41,7 +43,6 @@ 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';
@@ -94,7 +95,8 @@ export var EuiAvatar = function EuiAvatar(_ref) {
     role: isDisabled ? 'presentation' : 'img',
     title: name
   }, rest), content);
-}; // TODO: Migrate to a service
+};
+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/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"];
+var _excluded = ["position", "paddingSize", "affordForDisplacement", "children", "className", "bodyClassName", "landmarkHeading", "usePortal", "left", "right", "bottom", "top", "style", "euiTheme"];
 
 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,13 +17,14 @@ 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, useEuiTheme } from '../../services';
+import { useCombinedRefs } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
 import { useResizeObserver } from '../observer/resize_observer';
 import { EuiPortal } from '../portal';
-import { euiBottomBarStyles } from './bottom_bar.styles';
+import { withEuiSystem } from '../provider/system';
 import { EuiThemeProvider } from '../../services/theme/provider';
+import { euiBottomBarStyles } from './bottom_bar.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 // Exported for testing
 export var paddingSizeToClassNameMap = {
@@ -33,8 +34,7 @@ export var paddingSizeToClassNameMap = {
   l: 'euiBottomBar--paddingLarge'
 };
 export var POSITIONS = ['static', 'fixed', 'sticky'];
-
-var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
+export 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 @@ 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,11 +131,10 @@ var _EuiBottomBar = /*#__PURE__*/forwardRef(function (_ref, ref) {
 
   return usePortal ? ___EmotionJSX(EuiPortal, null, bar) : bar;
 });
-
 export var EuiBottomBar = /*#__PURE__*/forwardRef(function (props, ref) {
-  var BottomBar = _EuiBottomBar;
+  var BottomBar = withEuiSystem(_EuiBottomBar);
   return ___EmotionJSX(EuiThemeProvider, {
-    colorMode: 'dark'
+    colorMode: "dark"
   }, ___EmotionJSX(BottomBar, _extends({
     ref: ref
   }, props)));

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

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

package/optimize/es/components/button/{button_content.js → _button_content_deprecated.js}

@@ -20,7 +20,7 @@ var iconSideToClassNameMap = {
   right: 'euiButtonContent--iconRight'
 };
 export var ICON_SIDES = keysOf(iconSideToClassNameMap);
-export var EuiButtonContent = function EuiButtonContent(_ref) {
+export var EuiButtonContentDeprecated = function EuiButtonContentDeprecated(_ref) {
   var children = _ref.children,
       textProps = _ref.textProps,
       _ref$isLoading = _ref.isLoading,

package/optimize/es/components/button/button.js

@@ -19,7 +19,7 @@ import React, { forwardRef } from 'react';
 import classNames from 'classnames';
 import { keysOf } from '../common';
 import { getSecureRelForTarget } from '../../services';
-import { EuiButtonContent } from './button_content';
+import { EuiButtonContentDeprecated as EuiButtonContent } from './_button_content_deprecated';
 import { validateHref } from '../../services/security/href_validator';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var colorToClassNameMap = {
@@ -88,22 +88,27 @@ export var EuiButton = function EuiButton(_ref) {
     relObj.type = type;
   }
 
-  return ___EmotionJSX(EuiButtonDisplay, _extends({
-    element: element,
-    baseClassName: "euiButton",
-    ref: buttonRef
-  }, elementProps, relObj, rest));
+  return (// eslint-disable-next-line react/jsx-pascal-case
+    ___EmotionJSX(EuiButtonDisplayDeprecated, _extends({
+      element: element,
+      baseClassName: "euiButton",
+      ref: buttonRef
+    }, elementProps, relObj, rest))
+  );
 };
 EuiButton.displayName = 'EuiButton';
 
 /**
+ * *DEPRECATED*
  * EuiButtonDisplay is an internal-only component used for displaying
  * any element as a button.
  * NOTE: This component *must* be below EuiButton in the file and
  * EuiButton must also set a displayName for react-docgen-typescript
  * to correctly set EuiButton's docgenInfo and display a props table.
+ * This component has been deprecated in favor of the new EuiButtonDisplay
+ * that can be found in `src/components/button/button_display/_button_display.tsx`
  */
-export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
+export var EuiButtonDisplayDeprecated = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var _ref2$element = _ref2.element,
       element = _ref2$element === void 0 ? 'button' : _ref2$element,
       baseClassName = _ref2.baseClassName,
@@ -166,4 +171,4 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     ref: ref
   }, rest), innerNode);
 });
-EuiButtonDisplay.displayName = 'EuiButtonDisplay';
+EuiButtonDisplayDeprecated.displayName = 'EuiButtonDisplay';

package/optimize/es/components/button/button_display/_button_display.js

@@ -0,0 +1,73 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["element", "children", "iconType", "iconSide", "size", "isDisabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps"];
+
+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
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+import React, { forwardRef } from 'react'; // @ts-ignore module doesn't export `createElement`
+
+import { createElement } from '@emotion/react';
+import { useEuiTheme } from '../../../services';
+import { euiButtonDisplayStyles } from './_button_display.styles';
+import { EuiButtonDisplayContent } from './_button_display_content';
+/**
+ * Extends EuiButtonDisplayContentProps which provides
+ * `iconType`, `iconSide`, and `textProps`
+ */
+
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+/**
+ * EuiButtonDisplay is an internal-only component used for displaying
+ * any element as a button.
+ */
+export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref, ref) {
+  var _ref$element = _ref.element,
+      element = _ref$element === void 0 ? 'button' : _ref$element,
+      children = _ref.children,
+      iconType = _ref.iconType,
+      iconSide = _ref.iconSide,
+      _ref$size = _ref.size,
+      size = _ref$size === void 0 ? 'm' : _ref$size,
+      _ref$isDisabled = _ref.isDisabled,
+      isDisabled = _ref$isDisabled === void 0 ? false : _ref$isDisabled,
+      isLoading = _ref.isLoading,
+      isSelected = _ref.isSelected,
+      fullWidth = _ref.fullWidth,
+      minWidth = _ref.minWidth,
+      contentProps = _ref.contentProps,
+      textProps = _ref.textProps,
+      rest = _objectWithoutProperties(_ref, _excluded);
+
+  var buttonIsDisabled = isLoading || isDisabled;
+  var minWidthPx = minWidth === 'number' ? "".concat(minWidth, "px") : minWidth;
+  var theme = useEuiTheme();
+  var styles = euiButtonDisplayStyles(theme, minWidthPx);
+  var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, isDisabled && styles.isDisabled];
+
+  var innerNode = ___EmotionJSX(EuiButtonDisplayContent, _extends({
+    isLoading: isLoading,
+    isDisabled: buttonIsDisabled,
+    iconType: iconType,
+    iconSide: iconSide,
+    textProps: _objectSpread({}, textProps)
+  }, contentProps), children);
+
+  return createElement(element, _objectSpread({
+    css: cssStyles,
+    disabled: element === 'button' && buttonIsDisabled,
+    'aria-pressed': element === 'button' ? isSelected : undefined,
+    ref: ref
+  }, rest), innerNode);
+});
+EuiButtonDisplay.displayName = 'EuiButtonDisplay';