@elastic/eui 93.2.0 → 93.3.0

package/es/components/page/page_header/page_header_content.js

@@ -300,12 +300,14 @@ EuiPageHeaderContent.propTypes = {
          */
     "aria-current": PropTypes.any,
     /**
-         * Creates a breadcrumb that toggles a popover dialog
+         * Creates a breadcrumb that toggles a popover dialog. Takes any rendered node(s),
+         * or a render function that will pass callback allowing you to close the
+         * breadcrumb popover from within your popover content.
          *
          * If passed, both `href` and `onClick` will be ignored - the breadcrumb's
          * click behavior should only trigger a popover.
          */
-    popoverContent: PropTypes.node,
+    popoverContent: PropTypes.oneOfType([PropTypes.node.isRequired, PropTypes.func.isRequired]),
     /**
          * Allows customizing the popover if necessary. Accepts any props that
          * [EuiPopover](/#/layout/popover) accepts, except for props that control state.

package/es/components/progress/progress.styles.js

@@ -10,7 +10,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css, keyframes } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS, euiCantAnimate, euiFontSize, euiTextTruncate } from '../../global_styling';
+import { logicalCSS, logicalTextAlignCSS, euiCanAnimate, euiCantAnimate, euiFontSize, euiTextTruncate } from '../../global_styling';
 import { euiPaletteColorBlind, makeHighContrastColor } from '../../services';
 import { euiText } from '../text/text.styles';
 
@@ -63,7 +63,7 @@ export var euiProgressStyles = function euiProgressStyles(_ref3, isNative) {
     // https://css-tricks.com/html5-progress-element/
     // Good resource if you need to work in here. There's some gotchas with
     // dealing with cross-browser progress bars.
-    native: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", crossBrowserProgressValue('transition: width ${euiTheme.animation.normal} linear;'), ";;label:native;"),
+    native: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), " appearance:none;border:none;border-radius:", euiTheme.size.s, ";&::-webkit-progress-bar{background-color:", euiTheme.colors.lightShade, ";}", euiCanAnimate, "{/* Note: FF/Mozilla doesn't actually support animating the native progress bar\n        @see https://bugzilla.mozilla.org/show_bug.cgi?id=662351 */", crossBrowserProgressValue("transition: width ".concat(euiTheme.animation.normal, " linear")), ";};label:native;"),
     // An indeterminate bar has an unreliable end time. Because of a Firefox animation issue,
     // we apply this style to a <div> instead of a <progress> element.
     // See https://css-tricks.com/html5-progress-element/ for more info.

package/es/components/skeleton/skeleton_circle.js

@@ -13,7 +13,7 @@ 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 { useEuiMemoizedStyles } from '../../services';
 import { EuiSkeletonLoading } from './skeleton_loading';
 import { euiSkeletonCircleStyles } from './skeleton_circle.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -31,8 +31,7 @@ export var EuiSkeletonCircle = function EuiSkeletonCircle(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiSkeletonCircleStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiSkeletonCircleStyles);
   var cssStyles = [styles.euiSkeletonCircle, styles[size]];
   return ___EmotionJSX(EuiSkeletonLoading, _extends({
     isLoading: isLoading,

package/es/components/skeleton/skeleton_rectangle.js

@@ -19,7 +19,7 @@ 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 { useEuiMemoizedStyles } from '../../services';
 import { logicalStyles } from '../../global_styling';
 import { EuiSkeletonLoading } from './skeleton_loading';
 import { euiSkeletonRectangleStyles } from './skeleton_rectangle.styles';
@@ -43,8 +43,7 @@ export var EuiSkeletonRectangle = function EuiSkeletonRectangle(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiSkeletonRectangleStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiSkeletonRectangleStyles);
   var cssStyles = [styles.euiSkeletonRectangle, styles[borderRadius]];
   return ___EmotionJSX(EuiSkeletonLoading, _extends({
     isLoading: isLoading,

package/es/components/skeleton/skeleton_text.js

@@ -10,10 +10,10 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
  * Side Public License, v 1.
  */
 
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiSkeletonLoading } from './skeleton_loading';
 import { euiSkeletonTextStyles } from './skeleton_text.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -33,16 +33,20 @@ export var EuiSkeletonText = function EuiSkeletonText(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiSkeletonTextStyles(euiTheme);
-  var lineCssStyles = [styles.euiSkeletonText, styles[size]];
-  var lineElements = [];
-  for (var i = 0; i < lines; i++) {
-    lineElements.push(___EmotionJSX("span", {
-      key: i,
-      css: lineCssStyles
-    }));
-  }
+  var styles = useEuiMemoizedStyles(euiSkeletonTextStyles);
+  var cssStyles = useMemo(function () {
+    return [styles.euiSkeletonText, styles[size]];
+  }, [styles, size]);
+  var lineElements = useMemo(function () {
+    var lineElements = [];
+    for (var i = 0; i < lines; i++) {
+      lineElements.push(___EmotionJSX("span", {
+        key: i,
+        css: cssStyles
+      }));
+    }
+    return lineElements;
+  }, [lines, cssStyles]);
   return ___EmotionJSX(EuiSkeletonLoading, _extends({
     isLoading: isLoading,
     loadingContent: ___EmotionJSX("span", _extends({

package/es/components/skeleton/skeleton_title.js

@@ -13,7 +13,7 @@ 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 { useEuiMemoizedStyles } from '../../services';
 import { EuiSkeletonLoading } from './skeleton_loading';
 import { euiSkeletonTitleStyles } from './skeleton_title.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -30,8 +30,7 @@ export var EuiSkeletonTitle = function EuiSkeletonTitle(_ref) {
     ariaWrapperProps = _ref.ariaWrapperProps,
     children = _ref.children,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiSkeletonTitleStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiSkeletonTitleStyles);
   var cssStyles = [styles.euiSkeletonTitle, styles[size]];
   return ___EmotionJSX(EuiSkeletonLoading, _extends({
     isLoading: isLoading,

package/es/components/text/text.js

@@ -13,7 +13,7 @@ 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 { useEuiMemoizedStyles } from '../../services';
 import { euiTextStyles } from './text.styles';
 import { EuiTextColor } from './text_color';
 import { EuiTextAlign } from './text_align';
@@ -29,8 +29,7 @@ export var EuiText = function EuiText(_ref) {
     children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiTextStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTextStyles);
   var cssStyles = [styles.euiText, !grow ? styles.constrainedWidth : undefined, styles[size]];
   var classes = classNames('euiText', className);
   var text = ___EmotionJSX("div", _extends({

package/es/components/text/text_align.js

@@ -18,7 +18,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { isValidElement } from 'react';
 import PropTypes from "prop-types";
 import { cloneElementWithCss } from '../../services';
-import { euiTextAlignStyles } from './text_align.styles';
+import { euiTextAlignStyles as styles } from './text_align.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var ALIGNMENTS = ['left', 'right', 'center'];
 export var EuiTextAlign = function EuiTextAlign(_ref) {
@@ -28,7 +28,6 @@ export var EuiTextAlign = function EuiTextAlign(_ref) {
     _ref$cloneElement = _ref.cloneElement,
     cloneElement = _ref$cloneElement === void 0 ? false : _ref$cloneElement,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var styles = euiTextAlignStyles();
   var cssStyles = [styles.euiTextAlign, styles[textAlign]];
   var props = _objectSpread({
     css: cssStyles

package/es/components/text/text_align.styles.js

@@ -8,11 +8,9 @@
 
 import { css } from '@emotion/react';
 import { logicalTextAlignCSS } from '../../global_styling';
-export var euiTextAlignStyles = function euiTextAlignStyles() {
-  return {
-    euiTextAlign: /*#__PURE__*/css(";label:euiTextAlign;"),
-    left: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";;label:left;"),
-    right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;"),
-    center: /*#__PURE__*/css(logicalTextAlignCSS('center'), ";;label:center;")
-  };
+export var euiTextAlignStyles = {
+  euiTextAlign: /*#__PURE__*/css(";label:euiTextAlign;"),
+  left: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";;label:left;"),
+  right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";;label:right;"),
+  center: /*#__PURE__*/css(logicalTextAlignCSS('center'), ";;label:center;")
 };

package/es/components/text/text_color.js

@@ -17,7 +17,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import React, { isValidElement } from 'react';
 import PropTypes from "prop-types";
-import { useEuiTheme, cloneElementWithCss } from '../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { euiTextColorStyles } from './text_color.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['default', 'subdued', 'success', 'accent', 'danger', 'warning', 'ghost', 'inherit'];
@@ -32,8 +32,7 @@ export var EuiTextColor = function EuiTextColor(_ref) {
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var isNamedColor = COLORS.includes(color);
-  var euiTheme = useEuiTheme();
-  var styles = euiTextColorStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTextColorStyles);
   var cssStyles = [styles.euiTextColor, isNamedColor ? styles[color] : styles.customColor];
 
   // We're checking if is a custom color.

package/es/components/title/title.js

@@ -17,7 +17,7 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 
 import classNames from 'classnames';
 import PropTypes from "prop-types";
-import { useEuiTheme, cloneElementWithCss } from '../../services';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../services';
 import { euiTitleStyles } from './title.styles';
 export var TITLE_SIZES = ['xxxs', 'xxs', 'xs', 's', 'm', 'l'];
 export var TEXT_TRANSFORM = ['uppercase'];
@@ -28,8 +28,7 @@ export var EuiTitle = function EuiTitle(_ref) {
     className = _ref.className,
     textTransform = _ref.textTransform,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var styles = euiTitleStyles(euiTheme);
+  var styles = useEuiMemoizedStyles(euiTitleStyles);
   var cssStyles = [styles.euiTitle, textTransform ? styles[textTransform] : undefined, styles[size]];
   var classes = classNames('euiTitle', className, children.props.className);
   var props = _objectSpread({

package/es/components/title/title.styles.js

@@ -14,7 +14,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { useEuiTheme } from '../../services';
 import { euiTextBreakWord, euiFontSize, logicalCSS } from '../../global_styling';
 
 /**
@@ -39,12 +38,6 @@ export var euiTitle = function euiTitle(euiThemeContext) {
   });
 };
 
-// Hook version
-export var useEuiTitle = function useEuiTitle(scale, options) {
-  var euiTheme = useEuiTheme();
-  return euiTitle(euiTheme, scale, options);
-};
-
 /**
  * Styles
  */

package/es/global_styling/mixins/_typography.js

@@ -1,3 +1,9 @@
+function _typeof(obj) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (obj) { return typeof obj; } : function (obj) { return obj && "function" == typeof Symbol && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj; }, _typeof(obj); }
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); 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 = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -7,7 +13,8 @@
  */
 
 import { euiLineHeightFromBaseline, euiFontSizeFromScale } from '../functions/typography';
-import { useEuiTheme } from '../../services/theme/hooks';
+import { useEuiMemoizedStyles, useEuiTheme } from '../../services/theme';
+import { EuiThemeFontScales } from '../variables/typography';
 import { logicalCSS } from '../functions';
 /**
  * Returns font-size and line-height
@@ -21,7 +28,15 @@ export var euiFontSize = function euiFontSize(_ref, scale, options) {
 };
 export var useEuiFontSize = function useEuiFontSize(scale, options) {
   var euiTheme = useEuiTheme();
-  return euiFontSize(euiTheme, scale, options);
+  var memoizedFontSizes = useEuiMemoizedStyles(euiFontSizes);
+  return !options ? memoizedFontSizes[scale] : euiFontSize(euiTheme, scale, options);
+};
+// Memomize a basic set of font sizes. We unfortunately can't
+// memoize all possible options, there's too many permutations
+var euiFontSizes = function euiFontSizes(euiThemeContext) {
+  return EuiThemeFontScales.reduce(function (map, scale) {
+    return _objectSpread(_objectSpread({}, map), {}, _defineProperty({}, scale, euiFontSize(euiThemeContext, scale)));
+  }, {});
 };
 
 /**
@@ -47,8 +62,4 @@ export var euiTextTruncate = function euiTextTruncate() {
 export var euiNumberFormat = function euiNumberFormat(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return "\n  font-feature-settings: ".concat(euiTheme.font.featureSettings, ", 'tnum' 1;\n");
-};
-export var useEuiNumberFormat = function useEuiNumberFormat() {
-  var euiTheme = useEuiTheme();
-  return euiNumberFormat(euiTheme);
 };

package/es/services/theme/index.js

@@ -9,7 +9,7 @@
 export { EuiSystemContext, EuiThemeContext, EuiNestedThemeContext, EuiModificationsContext, EuiColorModeContext } from './context';
 export { useEuiTheme, withEuiTheme, RenderWithEuiTheme, useEuiThemeCSSVariables } from './hooks';
 export { EuiThemeProvider } from './provider';
-export { useEuiMemoizedStyles } from './style_memoization';
+export { useEuiMemoizedStyles, withEuiStylesMemoizer } from './style_memoization';
 export { getEuiDevProviderWarning, setEuiDevProviderWarning } from './warning';
 export { buildTheme, computed, isInverseColorMode, getColorMode, getComputed, getOn, mergeDeep, setOn, Computed } from './utils';
 export { COLOR_MODES_STANDARD } from './types';

package/es/services/theme/style_memoization.js

@@ -1,3 +1,4 @@
+function _extends() { _extends = Object.assign ? Object.assign.bind() : 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 _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -12,7 +13,7 @@ function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
  * Side Public License, v 1.
  */
 
-import React, { createContext, useContext, useState, useMemo } from 'react';
+import React, { createContext, useContext, useState, useMemo, useCallback, forwardRef } from 'react';
 import { useUpdateEffect } from '../hooks';
 import { useEuiTheme } from './hooks';
 
@@ -41,25 +42,57 @@ export var EuiThemeMemoizedStylesProvider = function EuiThemeMemoizedStylesProvi
   }, children);
 };
 
+/**
+ * Internal util primarily responsible for getting the memoized styles (if they exist)
+ * and if not, generating and setting the styles. DRYed out to facilitate usage
+ * between both hook/function components and HOC/class components
+ */
+var getMemoizedStyles = function getMemoizedStyles(stylesGenerator, stylesMap, euiThemeContext) {
+  if (!stylesGenerator.name) {
+    throw new Error('Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.');
+  }
+  var existingStyles = stylesMap.get(stylesGenerator);
+  if (existingStyles) {
+    return existingStyles;
+  } else {
+    var generatedStyles = stylesGenerator(euiThemeContext);
+    stylesMap.set(stylesGenerator, generatedStyles);
+    return generatedStyles;
+  }
+};
+
 /**
  * Hook that memoizes the returned values of components style fns/generators
  * per-theme
  */
-export var useEuiMemoizedStyles = function useEuiMemoizedStyles(styleGenerator) {
+export var useEuiMemoizedStyles = function useEuiMemoizedStyles(stylesGenerator) {
   var memoizedStyles = useContext(EuiThemeMemoizedStylesContext);
   var euiThemeContext = useEuiTheme();
   var memoizedComponentStyles = useMemo(function () {
-    if (!styleGenerator.name) {
-      throw new Error('Styles are memoized per function. Your style functions must be statically defined in order to not create a new map entry every rerender.');
-    }
-    var existingStyles = memoizedStyles.get(styleGenerator);
-    if (existingStyles) {
-      return existingStyles;
-    } else {
-      var generatedStyles = styleGenerator(euiThemeContext);
-      memoizedStyles.set(styleGenerator, generatedStyles);
-      return generatedStyles;
-    }
-  }, [styleGenerator, memoizedStyles, euiThemeContext]);
+    return getMemoizedStyles(stylesGenerator, memoizedStyles, euiThemeContext);
+  }, [stylesGenerator, memoizedStyles, euiThemeContext]);
   return memoizedComponentStyles;
+};
+
+/**
+ * HOC for class components
+ * Syntax is mostly copied from withEuiTheme HOC
+ */
+
+export var withEuiStylesMemoizer = function withEuiStylesMemoizer(Component) {
+  var componentName = Component.displayName || Component.name || 'ComponentWithStylesMemoizer';
+  var Render = function Render(props, ref) {
+    var memoizedStyles = useContext(EuiThemeMemoizedStylesContext);
+    var euiThemeContext = useEuiTheme();
+    var stylesMemoizer = useCallback(function (stylesGenerator) {
+      return getMemoizedStyles(stylesGenerator, memoizedStyles, euiThemeContext);
+    }, [memoizedStyles, euiThemeContext]);
+    return ___EmotionJSX(Component, _extends({
+      stylesMemoizer: stylesMemoizer,
+      ref: ref
+    }, props));
+  };
+  var WithEuiStylesMemoizer = /*#__PURE__*/forwardRef(Render);
+  WithEuiStylesMemoizer.displayName = componentName;
+  return WithEuiStylesMemoizer;
 };

package/es/themes/amsterdam/global_styling/mixins/button.js

@@ -1,3 +1,5 @@
+var _templateObject;
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
 function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
 function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -12,10 +14,11 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
  * Side Public License, v 1.
  */
 
-import { css } from '@emotion/react';
+import { css, keyframes } from '@emotion/react';
 import { euiBackgroundColor, euiCanAnimate } from '../../../../global_styling';
-import { hexToRgb, isColorDark, makeHighContrastColor, shade, tint, transparentize, useEuiTheme } from '../../../../services';
+import { hexToRgb, isColorDark, makeHighContrastColor, shade, tint, transparentize, useEuiMemoizedStyles } from '../../../../services';
 export var BUTTON_COLORS = ['text', 'accent', 'primary', 'success', 'warning', 'danger'];
+export var BUTTON_DISPLAYS = ['base', 'fill', 'empty'];
 /**
  * Creates the `base` version of button styles with proper text contrast.
  * @param euiThemeContext
@@ -133,23 +136,35 @@ export var euiButtonEmptyColor = function euiButtonEmptyColor(euiThemeContext, c
  */
 export var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
   var options = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
-  var euiThemeContext = useEuiTheme();
-  function stylesByDisplay(color) {
-    return {
-      base: /*#__PURE__*/css(euiButtonColor(euiThemeContext, color), ";;label:base;"),
-      fill: /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";;label:fill;"),
-      empty: /*#__PURE__*/css("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";&:focus,&:active{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:empty;")
-    };
-  }
-  return {
-    text: /*#__PURE__*/css(stylesByDisplay('text')[options.display || 'base'], ";label:text;"),
-    accent: /*#__PURE__*/css(stylesByDisplay('accent')[options.display || 'base'], ";label:accent;"),
-    primary: /*#__PURE__*/css(stylesByDisplay('primary')[options.display || 'base'], ";label:primary;"),
-    success: /*#__PURE__*/css(stylesByDisplay('success')[options.display || 'base'], ";label:success;"),
-    warning: /*#__PURE__*/css(stylesByDisplay('warning')[options.display || 'base'], ";label:warning;"),
-    danger: /*#__PURE__*/css(stylesByDisplay('danger')[options.display || 'base'], ";label:danger;"),
-    disabled: /*#__PURE__*/css(stylesByDisplay('disabled')[options.display || 'base'], ";label:disabled;")
-  };
+  var _options$display = options.display,
+    display = _options$display === void 0 ? 'base' : _options$display;
+  var colorsDisplaysMap = useEuiMemoizedStyles(euiButtonDisplaysColors);
+  return colorsDisplaysMap[display];
+};
+var euiButtonDisplaysColors = function euiButtonDisplaysColors(euiThemeContext) {
+  var COLORS = [].concat(BUTTON_COLORS, ['disabled']);
+  var displaysColorsMap = {};
+  BUTTON_DISPLAYS.forEach(function (display) {
+    displaysColorsMap[display] = {};
+    COLORS.forEach(function (color) {
+      switch (display) {
+        case 'base':
+          displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonColor(euiThemeContext, color), ";;label:displaysColorsMap-display-color;");
+          break;
+        case 'fill':
+          displaysColorsMap[display][color] = /*#__PURE__*/css(euiButtonFillColor(euiThemeContext, color), "outline-color:", euiThemeContext.colorMode === 'DARK' && color === 'text' ? 'currentColor' : euiThemeContext.euiTheme.colors.fullShade, ";;label:displaysColorsMap-display-color;");
+          break;
+        case 'empty':
+          displaysColorsMap[display][color] = /*#__PURE__*/css("color:", euiButtonEmptyColor(euiThemeContext, color).color, ";&:focus,&:active{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:displaysColorsMap-display-color;");
+          break;
+      }
+
+      // Tweak auto-generated Emotion label/className output
+      var emotionOutput = displaysColorsMap[display][color];
+      emotionOutput.styles = emotionOutput.styles.replace('label:displaysColorsMap-display-color;', "label:".concat(display, "-").concat(color, ";"));
+    });
+  });
+  return displaysColorsMap;
 };
 
 /**
@@ -157,17 +172,25 @@ export var useEuiButtonColorCSS = function useEuiButtonColorCSS() {
  * @returns string
  */
 export var useEuiButtonFocusCSS = function useEuiButtonFocusCSS() {
-  var _useEuiTheme = useEuiTheme(),
-    euiTheme = _useEuiTheme.euiTheme;
-  return "\n    ".concat(euiCanAnimate, " {\n      transition: transform ").concat(euiTheme.animation.normal, " ease-in-out,\n        background-color ").concat(euiTheme.animation.normal, " ease-in-out;\n\n      &:hover:not(:disabled) {\n        transform: translateY(-1px);\n      }\n\n      &:focus {\n        animation: euiButtonActive ").concat(euiTheme.animation.normal, "\n          ").concat(euiTheme.animation.bounce, ";\n      }\n\n      &:active:not(:disabled) {\n        transform: translateY(1px);\n      }\n    }\n  ");
+  return useEuiMemoizedStyles(euiButtonFocusCSS);
+};
+var euiButtonFocusAnimation = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  50% {\n    transform: translateY(1px);\n  }\n"])));
+var euiButtonFocusCSS = function euiButtonFocusCSS(_ref) {
+  var euiTheme = _ref.euiTheme;
+  var focusCSS = /*#__PURE__*/css(euiCanAnimate, "{transition:transform ", euiTheme.animation.normal, " ease-in-out,background-color ", euiTheme.animation.normal, " ease-in-out;&:hover:not(:disabled){transform:translateY(-1px);}&:focus{animation:", euiButtonFocusAnimation, " ", euiTheme.animation.normal, " ", euiTheme.animation.bounce, ";}&:active:not(:disabled){transform:translateY(1px);}};label:focusCSS;");
+  // Remove the auto-generated label.
+  // We could typically avoid a label by using a plain string `` instead of css``,
+  // but we need css`` for keyframes`` to work for the focus animation
+  focusCSS.styles = focusCSS.styles.replace('label:focusCSS;', '');
+  return focusCSS;
 };
 
 /**
  * Map of `size` props to various sizings/scales
  * that should remain consistent across all buttons
  */
-export var euiButtonSizeMap = function euiButtonSizeMap(_ref) {
-  var euiTheme = _ref.euiTheme;
+export var euiButtonSizeMap = function euiButtonSizeMap(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
     xs: {
       height: euiTheme.size.l,