@elastic/eui 93.2.0 → 93.4.0

package/optimize/es/components/toast/toast.js

@@ -11,13 +11,13 @@ var _excluded = ["title", "color", "iconType", "onClose", "children", "className
 
 import React from 'react';
 import classNames from 'classnames';
-import { useEuiTheme } from '../../services';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { EuiIcon } from '../icon';
 import { EuiText } from '../text';
-import { euiToastStyles, euiToastBodyStyles, euiToastHeaderStyles } from './toast.styles';
+import { euiToastStyles, euiToastHeaderStyles } from './toast.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var COLORS = ['primary', 'success', 'warning', 'danger'];
 export var EuiToast = function EuiToast(_ref) {
@@ -28,47 +28,11 @@ export var EuiToast = function EuiToast(_ref) {
     children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var euiTheme = useEuiTheme();
-  var baseStyles = euiToastStyles(euiTheme);
+  var baseStyles = useEuiMemoizedStyles(euiToastStyles);
   var baseCss = [baseStyles.euiToast, color && baseStyles[color]];
-  var bodyStyles = euiToastBodyStyles();
-  var headerStyles = euiToastHeaderStyles(euiTheme);
+  var headerStyles = useEuiMemoizedStyles(euiToastHeaderStyles);
   var headerCss = [headerStyles.euiToastHeader, children && headerStyles.withBody];
   var classes = classNames('euiToast', className);
-  var headerIcon;
-  if (iconType) {
-    headerIcon = ___EmotionJSX(EuiIcon, {
-      css: headerStyles.euiToastHeader__icon,
-      type: iconType,
-      size: "m",
-      "aria-hidden": "true"
-    });
-  }
-  var closeButton;
-  if (onClose) {
-    closeButton = ___EmotionJSX(EuiI18n, {
-      token: "euiToast.dismissToast",
-      default: "Dismiss toast"
-    }, function (dismissToast) {
-      return ___EmotionJSX(EuiButtonIcon, {
-        css: baseStyles.euiToast__closeButton,
-        iconType: "cross",
-        color: "text",
-        size: "xs",
-        "aria-label": dismissToast,
-        onClick: onClose,
-        "data-test-subj": "toastCloseButton"
-      });
-    });
-  }
-  var optionalBody;
-  if (children) {
-    optionalBody = ___EmotionJSX(EuiText, {
-      css: bodyStyles.euiToastBody,
-      size: "s",
-      "data-test-subj": "euiToastBody"
-    }, children);
-  }
   return ___EmotionJSX("div", _extends({
     css: baseCss,
     className: classes
@@ -83,9 +47,30 @@ export var EuiToast = function EuiToast(_ref) {
       css: headerCss,
       "aria-label": notification,
       "data-test-subj": "euiToastHeader"
-    }, headerIcon, ___EmotionJSX("span", {
+    }, iconType && ___EmotionJSX(EuiIcon, {
+      css: headerStyles.euiToastHeader__icon,
+      type: iconType,
+      size: "m",
+      "aria-hidden": "true"
+    }), ___EmotionJSX("span", {
       css: headerStyles.euiToastHeader__title,
       "data-test-subj": "euiToastHeader__title"
     }, title));
-  }), closeButton, optionalBody);
+  }), onClose && ___EmotionJSX(EuiI18n, {
+    token: "euiToast.dismissToast",
+    default: "Dismiss toast"
+  }, function (dismissToast) {
+    return ___EmotionJSX(EuiButtonIcon, {
+      css: baseStyles.euiToast__closeButton,
+      iconType: "cross",
+      color: "text",
+      size: "xs",
+      "aria-label": dismissToast,
+      onClick: onClose,
+      "data-test-subj": "toastCloseButton"
+    });
+  }), children && ___EmotionJSX(EuiText, {
+    size: "s",
+    "data-test-subj": "euiToastBody"
+  }, children));
 };

package/optimize/es/components/toast/toast.styles.js

@@ -1,4 +1,3 @@
-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)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -8,14 +7,14 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS } from '../../global_styling';
+import { euiTextBreakWord, logicalCSS } from '../../global_styling';
 import { euiShadowLarge } from '../../themes/amsterdam';
 import { euiTitle } from '../title/title.styles';
 export var euiToastStyles = function euiToastStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " &:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
+    euiToast: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";", euiShadowLarge(euiThemeContext), " position:relative;", logicalCSS('padding-horizontal', euiTheme.size.base), " ", logicalCSS('padding-vertical', euiTheme.size.base), " background-color:", euiTheme.colors.emptyShade, ";", logicalCSS('width', '100%'), " ", euiTextBreakWord(), "&:hover,&:focus{[class*='euiToast__closeButton']{opacity:1;}};label:euiToast;"),
     // Elements
     euiToast__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('top', euiTheme.size.base), " ", logicalCSS('right', euiTheme.size.base), ";;label:euiToast__closeButton;"),
     // Variants
@@ -36,18 +35,4 @@ export var euiToastHeaderStyles = function euiToastHeaderStyles(euiThemeContext)
     // Variants
     withBody: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.s), ";;label:withBody;")
   };
-};
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "1xv63y1-euiToastBody",
-  styles: "word-wrap:break-word;label:euiToastBody;"
-} : {
-  name: "1xv63y1-euiToastBody",
-  styles: "word-wrap:break-word;label:euiToastBody;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-export var euiToastBodyStyles = function euiToastBodyStyles() {
-  return {
-    // Base
-    euiToastBody: _ref
-  };
 };

package/optimize/es/global_styling/mixins/_typography.js

@@ -1,3 +1,6 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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; }
 /*
  * 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 +10,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 +25,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 +59,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/optimize/es/services/color/eui_palettes.js

@@ -118,19 +118,19 @@ export var euiPaletteForLightBackground = function euiPaletteForLightBackground(
 export var euiPaletteForDarkBackground = function euiPaletteForDarkBackground() {
   return ['#1BA9F5', '#7DE2D1', '#F990C0', '#F66', '#FFCE7A'];
 };
-var positiveColor = '#209280';
-var negativeColor = '#CC5642';
-var lightNegativeColor = euiPaletteColorBlind()[9];
+var greenColor = '#209280';
+var redColor = '#CC5642';
+var lightRedColor = euiPaletteColorBlind()[9];
 var coolArray = [euiPaletteColorBlind()[1], '#6092C0'];
 var warmArray = [euiPaletteColorBlind()[7], euiPaletteColorBlind()[9]];
 export var euiPaletteForStatus = function euiPaletteForStatus(steps) {
   if (steps === 1) {
-    return [positiveColor];
+    return [greenColor];
   }
   if (steps <= 3) {
-    return euiPalette([positiveColor, euiPaletteColorBlind()[5], negativeColor], steps, true);
+    return euiPalette([greenColor, euiPaletteColorBlind()[5], redColor], steps, true);
   }
-  return euiPalette([positiveColor, euiPaletteColorBlind()[0], euiPaletteColorBlind()[5], lightNegativeColor, negativeColor], steps, true);
+  return euiPalette([greenColor, euiPaletteColorBlind()[0], euiPaletteColorBlind()[5], lightRedColor, redColor], steps, true);
 };
 export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
   var cools = colorPalette([].concat(_toConsumableArray(coolArray.slice().reverse()), ['#EBEFF5']), 3);
@@ -138,7 +138,7 @@ export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
   if (steps === 1) {
     return [cools[0]];
   } else if (steps <= 3) {
-    return euiPalette([cools[0], lightNegativeColor], steps, true);
+    return euiPalette([cools[0], lightRedColor], steps, true);
   }
   return euiPalette([].concat(_toConsumableArray(cools), _toConsumableArray(warms)), steps, true);
 };
@@ -148,18 +148,26 @@ export var euiPaletteComplementary = function euiPaletteComplementary(steps) {
   }
   return euiPalette([euiPaletteColorBlind()[1], euiPaletteColorBlind()[7]], steps, true);
 };
-export var euiPaletteNegative = function euiPaletteNegative(steps) {
+export var euiPaletteRed = function euiPaletteRed(steps) {
   if (steps === 1) {
-    return [lightNegativeColor];
+    return [lightRedColor];
   }
-  return euiPalette(['white', negativeColor], steps);
+  return euiPalette(['white', redColor], steps);
 };
-export var euiPalettePositive = function euiPalettePositive(steps) {
+/**
+ * @deprecated - use `euiPaletteRed` instead
+ */
+export var euiPaletteNegative = euiPaletteRed;
+export var euiPaletteGreen = function euiPaletteGreen(steps) {
   if (steps === 1) {
     return [euiPaletteColorBlind()[0]];
   }
-  return euiPalette(['white', positiveColor], steps);
+  return euiPalette(['white', greenColor], steps);
 };
+/**
+ * @deprecated - use `euiPaletteGreen` instead
+ */
+export var euiPalettePositive = euiPaletteGreen;
 export var euiPaletteCool = function euiPaletteCool(steps) {
   if (steps === 1) {
     return [coolArray[1]];
@@ -168,7 +176,7 @@ export var euiPaletteCool = function euiPaletteCool(steps) {
 };
 export var euiPaletteWarm = function euiPaletteWarm(steps) {
   if (steps === 1) {
-    return [lightNegativeColor];
+    return [lightRedColor];
   }
   return euiPalette(['#FBFBDC'].concat(warmArray), steps);
 };

package/optimize/es/services/color/index.js

@@ -17,7 +17,7 @@ export { rgbToHsv } from './rgb_to_hsv';
 export { calculateContrast, calculateLuminance } from './luminance_and_contrast';
 export { VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR } from './visualization_colors';
 export { colorPalette } from './color_palette';
-export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
+export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, euiPaletteRed, euiPaletteGreen, euiPaletteNegative, euiPalettePositive, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
 export { getSteppedGradient } from './stepped_gradient';
 export * from './manipulation';
 export * from './contrast';

package/optimize/es/services/hooks/index.js

@@ -10,5 +10,6 @@ export * from './useDependentState';
 export * from './useCombinedRefs';
 export * from './useForceRender';
 export * from './useLatest';
+export * from './useDeepEqual';
 export * from './useMouseMove';
 export * from './useUpdateEffect';

package/optimize/es/services/hooks/useDeepEqual.js

@@ -0,0 +1,23 @@
+/*
+ * 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 { useRef } from 'react';
+import isEqual from 'lodash/isEqual';
+
+/**
+ * This hook is mostly a performance concern for third-party objs/arrays that EUI
+ * has no control over and may not be correctly memoized (i.e., will create a new
+ * reference on every rerender unless passed through this hook).
+ */
+export var useDeepEqual = function useDeepEqual(object) {
+  var ref = useRef(object);
+  if (!isEqual(object, ref.current)) {
+    ref.current = object;
+  }
+  return ref.current;
+};

package/optimize/es/services/index.js

@@ -12,7 +12,7 @@ export { htmlIdGenerator, useGeneratedHtmlId } from './accessibility';
 export { CENTER_ALIGNMENT, LEFT_ALIGNMENT, RIGHT_ALIGNMENT } from './alignment';
 export { CurrentEuiBreakpointContext, CurrentEuiBreakpointProvider, useCurrentEuiBreakpoint, useIsWithinBreakpoints, useIsWithinMaxBreakpoint, useIsWithinMinBreakpoint } from './breakpoint';
 export { CanvasTextUtils } from './canvas';
-export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteNegative, euiPalettePositive, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
+export { brighten, calculateContrast, calculateLuminance, colorPalette, darken, DEFAULT_VISUALIZATION_COLOR, desaturate, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteComplementary, euiPaletteCool, euiPaletteForDarkBackground, euiPaletteForLightBackground, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteGray, euiPaletteRed, euiPaletteGreen, euiPalettePositive, euiPaletteNegative, euiPaletteWarm, getSteppedGradient, hexToHsv, hexToRgb, hsvToHex, hsvToRgb, isColorDark, isValidHex, lightness, makeDisabledContrastColor, makeHighContrastColor, rgbToHex, rgbToHsv, saturate, shade, shadeOrTint, tint, tintOrShade, transparentize, VISUALIZATION_COLORS, wcagContrastMin } from './color';
 export { useColorPickerState, useColorStopsState } from './color_picker';
 export * from './console';
 export { copyToClipboard } from './copy_to_clipboard';

package/optimize/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/optimize/es/services/theme/style_memoization.js

@@ -1,3 +1,4 @@
+import _extends from "@babel/runtime/helpers/extends";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -7,7 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * 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';
 
@@ -36,25 +37,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/optimize/es/themes/amsterdam/global_styling/mixins/button.js

@@ -1,4 +1,6 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
 import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
+var _templateObject;
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -7,10 +9,11 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
  * 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
@@ -128,23 +131,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;
 };
 
 /**
@@ -152,17 +167,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,