@elastic/eui 67.0.0 → 67.1.1

package/lib/services/theme/provider.js

@@ -5,7 +5,7 @@ function _typeof(obj) { "@babel/helpers - typeof"; if (typeof Symbol === "functi
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.EuiThemeProvider = void 0;
+exports.setEuiDevProviderWarning = exports.getEuiDevProviderWarning = exports.EuiThemeProvider = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -23,6 +23,12 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
+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 _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."); }
@@ -35,6 +41,20 @@ function _iterableToArrayLimit(arr, i) { var _i = arr == null ? null : typeof Sy
 
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
 
+var providerWarning = undefined;
+
+var setEuiDevProviderWarning = function setEuiDevProviderWarning(level) {
+  return providerWarning = level;
+};
+
+exports.setEuiDevProviderWarning = setEuiDevProviderWarning;
+
+var getEuiDevProviderWarning = function getEuiDevProviderWarning() {
+  return providerWarning;
+};
+
+exports.getEuiDevProviderWarning = getEuiDevProviderWarning;
+
 var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var _system = _ref.theme,
       _colorMode = _ref.colorMode,
@@ -67,7 +87,8 @@ var EuiThemeProvider = function EuiThemeProvider(_ref) {
   var prevColorMode = (0, _react.useRef)(colorMode);
   var isParentTheme = (0, _react.useRef)(prevSystemKey.current === parentSystem.key && colorMode === parentColorMode && (0, _isEqual.default)(parentModifications, modifications));
 
-  var _useState7 = (0, _react.useState)(isParentTheme.current && Object.keys(parentTheme).length ? parentTheme : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode)),
+  var _useState7 = (0, _react.useState)(isParentTheme.current && Object.keys(parentTheme).length ? _objectSpread({}, parentTheme) // Intentionally create a new object to break referential equality
+  : (0, _utils.getComputed)(system, (0, _utils.buildTheme)(modifications, "_".concat(system.key)), colorMode)),
       _useState8 = _slicedToArray(_useState7, 2),
       theme = _useState8[0],
       setTheme = _useState8[1];

package/optimize/es/components/accordion/accordion.js

@@ -190,10 +190,10 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 
       if (_arrowDisplay !== 'none') {
         iconButton = ___EmotionJSX(EuiButtonIcon, _extends({
-          color: "text"
+          color: "text",
+          css: cssIconButtonStyles
         }, arrowProps, {
           className: iconButtonClasses,
-          css: cssIconButtonStyles,
           iconType: "arrowRight",
           onClick: this.onToggle,
           "aria-controls": id,
@@ -229,10 +229,11 @@ export var EuiAccordionClass = /*#__PURE__*/function (_Component) {
         childrenContent = children;
       }
 
-      var button = ___EmotionJSX(ButtonElement, _extends({}, buttonProps, {
+      var button = ___EmotionJSX(ButtonElement, _extends({
+        css: cssButtonStyles
+      }, buttonProps, {
         id: buttonId,
         className: buttonClasses,
-        css: cssButtonStyles,
         "aria-controls": id,
         "aria-expanded": isOpen,
         onClick: isDisabled ? undefined : this.onToggle,

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

@@ -43,7 +43,7 @@ export var euiAccordionChildrenStyles = function euiAccordionChildrenStyles(_ref
 export var euiAccordionChildWrapperStyles = function euiAccordionChildWrapperStyles(_ref6) {
   var euiTheme = _ref6.euiTheme;
   return {
-    euiAccordion__childWrapper: /*#__PURE__*/css(logicalCSS('height', 0), " opacity:0;overflow:hidden;transition:", logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;will-change:opacity,visibility,", logicals.height, ";&:focus{outline:none;};label:euiAccordion__childWrapper;"),
+    euiAccordion__childWrapper: /*#__PURE__*/css(logicalCSS('height', 0), " opacity:0;overflow:hidden;transition:", logicals.height, " ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ",opacity ", euiTheme.animation.normal, " ", euiTheme.animation.resistance, ";visibility:hidden;&:focus{outline:none;};label:euiAccordion__childWrapper;"),
     isOpen: /*#__PURE__*/css(logicalCSS('height', 'auto'), " opacity:1;visibility:visible;;label:isOpen;")
   };
 };

package/optimize/es/components/badge/badge.js

@@ -15,38 +15,22 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-import React from 'react';
+import React, { useMemo } from 'react';
 import classNames from 'classnames';
 import chroma from 'chroma-js';
-import { keysOf } from '../common';
-import { euiPaletteColorBlindBehindText, getSecureRelForTarget, isColorDark } from '../../services';
+import { useEuiTheme, euiPaletteColorBlindBehindText, getSecureRelForTarget, isColorDark, wcagContrastMin } from '../../services';
 import { EuiInnerText } from '../inner_text';
 import { EuiIcon } from '../icon';
 import { chromaValid, parseColor } from '../color_picker/utils';
 import { validateHref } from '../../services/security/href_validator';
+import { euiBadgeStyles } from './badge.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-// TODO - replace with variables once https://github.com/elastic/eui/issues/2731 is closed
-var colorInk = '#000';
-var colorGhost = '#fff'; // The color blind palette has some stricter accessibility needs with regards to
+export var ICON_SIDES = ['left', 'right'];
+export var COLORS = ['default', 'hollow', 'primary', 'success', 'accent', 'warning', 'danger'];
+// The color blind palette has some stricter accessibility needs with regards to
 // charts and contrast. We use the euiPaletteColorBlindBehindText variant here since our
 // accessibility concerns pertain to foreground (text) and background contrast
-
 var visColors = euiPaletteColorBlindBehindText();
-var colorToHexMap = {
-  // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-  default: '#d3dae6',
-  primary: visColors[1],
-  success: visColors[0],
-  accent: visColors[2],
-  warning: visColors[5],
-  danger: visColors[9]
-};
-export var COLORS = keysOf(colorToHexMap);
-var iconSideToClassNameMap = {
-  left: 'euiBadge--iconLeft',
-  right: 'euiBadge--iconRight'
-};
-export var ICON_SIDES = keysOf(iconSideToClassNameMap);
 export var EuiBadge = function EuiBadge(_ref) {
   var children = _ref.children,
       _ref$color = _ref.color,
@@ -67,53 +51,63 @@ export var EuiBadge = function EuiBadge(_ref) {
       style = _ref.style,
       rest = _objectWithoutProperties(_ref, _excluded);
 
+  var euiTheme = useEuiTheme();
   var isHrefValid = !href || validateHref(href);
   var isDisabled = _isDisabled || !isHrefValid;
-  var optionalCustomStyles = style;
-  var textColor = null; // TODO - replace with variable once https://github.com/elastic/eui/issues/2731 is closed
-
-  var wcagContrastBase = 4.5; // WCAG AA contrast level
-
-  var wcagContrast = null;
-  var colorHex = null; // Check if a valid color name was provided
-
-  try {
-    if (COLORS.indexOf(color) > -1) {
-      // Get the hex equivalent for the provided color name
-      colorHex = colorToHexMap[color]; // Set dark or light text color based upon best contrast
-
-      textColor = setTextColor(colorHex);
-      optionalCustomStyles = _objectSpread({
-        backgroundColor: colorHex,
-        color: textColor
-      }, optionalCustomStyles);
-    } else if (color !== 'hollow') {
-      // This is a custom color that is neither from the base palette nor hollow
-      // Let's do our best to ensure that it provides sufficient contrast
-      // Set dark or light text color based upon best contrast
-      textColor = setTextColor(color); // Check the contrast
-
-      wcagContrast = getColorContrast(textColor, color);
-
-      if (wcagContrast < wcagContrastBase) {
-        // It's low contrast, so lets show a warning in the console
-        console.warn('Warning: ', color, ' badge has low contrast of ', wcagContrast.toFixed(2), '. Should be above ', wcagContrastBase, '.');
+  var optionalCustomStyles = useMemo(function () {
+    var colorToHexMap = {
+      default: euiTheme.euiTheme.colors.lightShade,
+      hollow: '',
+      primary: visColors[1],
+      success: visColors[0],
+      accent: visColors[2],
+      warning: visColors[5],
+      danger: visColors[9]
+    };
+    var textColor = null;
+    var contrastRatio = null;
+    var colorHex = null;
+
+    try {
+      // Check if a valid color name was provided
+      if (COLORS.includes(color)) {
+        if (color === 'hollow') return style; // hollow uses its own CSS class
+        // Get the hex equivalent for the provided color name
+
+        colorHex = colorToHexMap[color]; // Set dark or light text color based upon best contrast
+
+        textColor = setTextColor(euiTheme, colorHex);
+        return _objectSpread({
+          backgroundColor: colorHex,
+          color: textColor
+        }, style);
+      } else {
+        // This is a custom color- let's do our best to ensure that it provides sufficient contrast
+        // Set dark or light text color based upon best contrast
+        textColor = setTextColor(euiTheme, color); // Check the contrast
+
+        contrastRatio = getColorContrast(textColor, color);
+
+        if (contrastRatio < wcagContrastMin) {
+          // It's low contrast, so lets show a warning in the console
+          console.warn('Warning: ', color, ' badge has low contrast of ', contrastRatio.toFixed(2), '. Should be above ', wcagContrastMin, '.');
+        }
+
+        return _objectSpread({
+          backgroundColor: color,
+          color: textColor
+        }, style);
       }
-
-      optionalCustomStyles = _objectSpread({
-        backgroundColor: color,
-        color: textColor
-      }, optionalCustomStyles);
+    } catch (err) {
+      handleInvalidColor(color);
     }
-  } catch (err) {
-    handleInvalidColor(color);
-  }
-
-  var classes = classNames('euiBadge', {
-    'euiBadge-isClickable': (onClick || href) && !iconOnClick,
-    'euiBadge-isDisabled': isDisabled,
-    'euiBadge--hollow': color === 'hollow'
-  }, iconSideToClassNameMap[iconSide], className);
+  }, [color, style, euiTheme]);
+  var styles = euiBadgeStyles(euiTheme);
+  var cssStyles = [styles.euiBadge, (onClick || href) && !iconOnClick && styles.clickable, isDisabled && styles.disabled, color === 'hollow' && styles.hollow];
+  var textCssStyles = [styles.text.euiBadge__text, (onClick || href) && !isDisabled && styles.text.clickable];
+  var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
+  var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];
+  var classes = classNames('euiBadge', className);
   var closeClassNames = classNames('euiBadge__icon', closeButtonProps && closeButtonProps.className);
   var Element = href && !isDisabled ? 'a' : 'button';
   var relObj = {};
@@ -143,6 +137,7 @@ export var EuiBadge = function EuiBadge(_ref) {
       optionalIcon = ___EmotionJSX("button", {
         type: "button",
         className: "euiBadge__iconButton",
+        css: iconButtonCssStyles,
         "aria-label": iconOnClickAriaLabel,
         disabled: isDisabled,
         title: iconOnClickAriaLabel,
@@ -151,7 +146,8 @@ export var EuiBadge = function EuiBadge(_ref) {
         type: iconType,
         size: "s",
         color: "inherit" // forces the icon to inherit its parent color
-
+        ,
+        css: iconCssStyles
       }, closeButtonProps, {
         className: closeClassNames
       })));
@@ -160,6 +156,7 @@ export var EuiBadge = function EuiBadge(_ref) {
         type: iconType,
         size: children ? 's' : 'm',
         className: "euiBadge__icon",
+        css: iconCssStyles,
         color: "inherit" // forces the icon to inherit its parent color
 
       });
@@ -171,28 +168,34 @@ export var EuiBadge = function EuiBadge(_ref) {
   }
 
   var content = ___EmotionJSX("span", {
-    className: "euiBadge__content"
-  }, children && ___EmotionJSX("span", {
-    className: "euiBadge__text"
-  }, children), optionalIcon);
+    className: "euiBadge__content",
+    css: styles.euiBadge__content
+  }, iconSide === 'left' && optionalIcon, children && ___EmotionJSX("span", {
+    className: "euiBadge__text",
+    css: textCssStyles
+  }, children), iconSide === 'right' && optionalIcon);
 
   if (iconOnClick) {
     return onClick || href ? ___EmotionJSX("span", {
       className: classes,
+      css: cssStyles,
       style: optionalCustomStyles
     }, ___EmotionJSX("span", {
-      className: "euiBadge__content"
-    }, ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
+      className: "euiBadge__content",
+      css: styles.euiBadge__content
+    }, iconSide === 'left' && optionalIcon, ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX(Element, _extends({
         className: "euiBadge__childButton",
+        css: styles.euiBadge__childButton,
         disabled: isDisabled,
         "aria-label": onClickAriaLabel,
         ref: ref,
         title: innerText
       }, relObj, rest), children);
-    }), optionalIcon)) : ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
+    }), iconSide === 'right' && optionalIcon)) : ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX("span", _extends({
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -204,6 +207,7 @@ export var EuiBadge = function EuiBadge(_ref) {
         disabled: isDisabled,
         "aria-label": onClickAriaLabel,
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -213,6 +217,7 @@ export var EuiBadge = function EuiBadge(_ref) {
     return ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX("span", _extends({
         className: classes,
+        css: cssStyles,
         style: optionalCustomStyles,
         ref: ref,
         title: innerText
@@ -226,13 +231,14 @@ function getColorContrast(textColor, color) {
   return contrastValue;
 }
 
-function setTextColor(bgColor) {
-  var textColor = isColorDark.apply(void 0, _toConsumableArray(chroma(bgColor).rgb())) ? colorGhost : colorInk;
+function setTextColor(_ref2, bgColor) {
+  var euiTheme = _ref2.euiTheme;
+  var textColor = isColorDark.apply(void 0, _toConsumableArray(chroma(bgColor).rgb())) ? euiTheme.colors.ghost : euiTheme.colors.ink;
   return textColor;
 }
 
 function handleInvalidColor(color) {
-  var isNamedColor = color && COLORS.includes(color) || color === 'hollow';
+  var isNamedColor = COLORS.includes(color);
   var isValidColorString = color && chromaValid(parseColor(color) || '');
 
   if (!isNamedColor && !isValidColorString) {

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

@@ -0,0 +1,62 @@
+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
+ * 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 { css } from '@emotion/react';
+import { euiFontSize, euiFocusRing, euiTextTruncate, logicalCSS, logicalTextAlignCSS, mathWithUnits } from '../../global_styling';
+import { euiButtonColor } from '../../themes/amsterdam/global_styling/mixins';
+import { tint, transparentize } from '../../services';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1hw5vc4-clickable",
+  styles: "cursor:pointer;label:clickable;"
+} : {
+  name: "1hw5vc4-clickable",
+  styles: "cursor:pointer;label:clickable;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiBadgeStyles = function euiBadgeStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  return {
+    euiBadge: /*#__PURE__*/css("display:inline-block;vertical-align:middle;padding:0 ", euiTheme.size.s, ";", logicalCSS('max-width', '100%'), " font-size:", euiFontSize(euiThemeContext, 'xs').fontSize, ";line-height:", euiTheme.base + 2, "px;font-weight:", euiTheme.font.weight.medium, ";white-space:nowrap;text-decoration:none;cursor:default;background-color:transparent;border:", euiTheme.border.width.thin, " solid transparent;border-radius:", mathWithUnits(euiTheme.border.radius.medium, function (x) {
+      return x / 2;
+    }), ";", logicalTextAlignCSS('left'), " &:focus-within{", euiFocusRing(euiThemeContext), ";}&+.euiBadge{", logicalCSS('margin-left', euiTheme.size.xs), ";};label:euiBadge;"),
+    clickable: /*#__PURE__*/css("&:not(:disabled){&:hover,&:focus{text-decoration:underline;}}&:focus{", euiFocusRing(euiThemeContext), ";}&:disabled{cursor:not-allowed;};label:clickable;"),
+    disabled: /*#__PURE__*/css("color:", euiButtonColor(euiThemeContext, 'disabled').color, "!important;background-color:", euiButtonColor(euiThemeContext, 'disabled').backgroundColor, "!important;;label:disabled;"),
+    // Hollow has a border and is mostly used for autocompleters.
+    hollow: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";border-color:", colorMode === 'DARK' ? tint(euiTheme.border.color, 0.15) : euiTheme.border.color, ";color:", euiTheme.colors.text, ";;label:hollow;"),
+    // Content wrapper
+    euiBadge__content: /*#__PURE__*/css(logicalCSS( // Ensure proper height in case of just displaying an icon
+    'min-height', "".concat(mathWithUnits(euiTheme.border.width.thin, function (x) {
+      return euiTheme.base + x * 2;
+    }))), " display:flex;align-items:center;overflow:hidden;;label:euiBadge__content;"),
+    // Text
+    text: {
+      euiBadge__text: /*#__PURE__*/css(euiTextTruncate(), " cursor:inherit;;label:euiBadge__text;"),
+      clickable: _ref
+    },
+    // Icon
+    icon: {
+      euiBadge__icon: /*#__PURE__*/css(";label:euiBadge__icon;"),
+      right: /*#__PURE__*/css("&:not(:only-child){", logicalCSS('margin-left', euiTheme.size.xs), ";};label:right;"),
+      left: /*#__PURE__*/css("&:not(:only-child){", logicalCSS('margin-right', euiTheme.size.xs), ";};label:left;")
+    },
+    // Clickable icons (iconOnClick)
+    iconButton: {
+      euiBadge__iconButton: /*#__PURE__*/css("font-size:0;&:focus{background-color:", transparentize(euiTheme.colors.ghost, 0.8), ";color:", euiTheme.colors.ink, ";border-radius:", mathWithUnits(euiTheme.border.radius.small, function (x) {
+        return x / 2;
+      }), ";}&:disabled{cursor:not-allowed;}.euiBadge__icon{margin:0!important;};label:euiBadge__iconButton;"),
+      right: /*#__PURE__*/css(logicalCSS('margin-left', euiTheme.size.xs), ";;label:right;"),
+      left: /*#__PURE__*/css(logicalCSS('margin-right', euiTheme.size.xs), ";;label:left;")
+    },
+    // Used in badges with both onClick & iconOnClick
+    euiBadge__childButton: /*#__PURE__*/css(euiTextTruncate(), " text-align:inherit;font-weight:inherit;line-height:inherit;color:inherit;&:disabled{cursor:not-allowed;}&:not(:disabled){&:hover,&:focus{text-decoration:underline;}};label:euiBadge__childButton;")
+  };
+};

package/optimize/es/components/basic_table/in_memory_table.js

@@ -523,6 +523,10 @@ export var EuiInMemoryTable = /*#__PURE__*/function (_Component) {
 
       if (sortName !== prevState.prevProps.sortName || sortDirection !== prevState.prevProps.sortDirection) {
         updatedPrevState = _objectSpread(_objectSpread({}, updatedPrevState), {}, {
+          prevProps: _objectSpread(_objectSpread({}, updatedPrevState.prevProps), {}, {
+            sortName: sortName,
+            sortDirection: sortDirection
+          }),
           sortName: sortName,
           sortDirection: sortDirection
         });

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

@@ -9,7 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 import { css } from '@emotion/react';
 import { transparentize } from '../../services/color';
-import { euiFontSize, euiTextTruncate, euiFocusRing, logicalCSS } from '../../global_styling';
+import { euiFontSize, euiTextTruncate, euiFocusRing, logicalCSS, mathWithUnits } from '../../global_styling';
 
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1k7t4ns-isCollapsed",
@@ -47,7 +47,9 @@ export var euiBreadcrumbContentStyles = function euiBreadcrumbContentStyles(euiT
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiBreadcrumb__content: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.medium, ";text-align:center;vertical-align:baseline;;label:euiBreadcrumb__content;"),
-    isTruncated: /*#__PURE__*/css(euiTextTruncate("".concat(parseFloat(euiTheme.size.base) * 10, "px")), ";;label:isTruncated;"),
+    isTruncated: /*#__PURE__*/css(euiTextTruncate(mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 10;
+    })), ";;label:isTruncated;"),
     isTruncatedLast: /*#__PURE__*/css(euiTextTruncate('none'), ";;label:isTruncatedLast;"),
     // Types
     page: /*#__PURE__*/css("&:is(a):focus{", euiFocusRing(euiThemeContext, 'inset'), ";}&:is(button):focus{", euiFocusRing(euiThemeContext, 'center'), ";};label:page;"),

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

@@ -68,7 +68,6 @@ export var EuiButton = function EuiButton(props) {
 EuiButton.displayName = 'EuiButton'; // Use defaultProps for simple pass-through props
 
 EuiButton.defaultProps = {
-  minWidth: 112,
   size: 'm',
   color: 'primary'
 };

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

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "iconType", "iconSide", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type"];
+var _excluded = ["children", "iconType", "iconSide", "iconSize", "size", "isDisabled", "disabled", "isLoading", "isSelected", "fullWidth", "minWidth", "contentProps", "textProps", "href", "target", "rel", "type", "style"];
 
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
 
@@ -40,6 +40,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
   var children = _ref2.children,
       iconType = _ref2.iconType,
       iconSide = _ref2.iconSide,
+      iconSize = _ref2.iconSize,
       _ref2$size = _ref2.size,
       size = _ref2$size === void 0 ? 'm' : _ref2$size,
       isDisabled = _ref2.isDisabled,
@@ -55,6 +56,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
       rel = _ref2.rel,
       _ref2$type = _ref2.type,
       type = _ref2$type === void 0 ? 'button' : _ref2$type,
+      style = _ref2.style,
       rest = _objectWithoutProperties(_ref2, _excluded);
 
   var buttonIsDisabled = isButtonDisabled({
@@ -62,9 +64,8 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isDisabled: isDisabled || disabled,
     isLoading: isLoading
   });
-  var minWidthPx = typeof minWidth === 'number' ? "".concat(minWidth, "px") : minWidth;
   var theme = useEuiTheme();
-  var styles = euiButtonDisplayStyles(theme, minWidthPx);
+  var styles = euiButtonDisplayStyles(theme);
   var buttonRadiusStyle = useEuiButtonRadiusCSS()[size];
   var cssStyles = [styles.euiButtonDisplay, styles[size], fullWidth && styles.fullWidth, buttonIsDisabled && styles.isDisabled, buttonRadiusStyle];
 
@@ -73,6 +74,7 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
     isDisabled: buttonIsDisabled,
     iconType: iconType,
     iconSide: iconSide,
+    iconSize: iconSize,
     textProps: _objectSpread({}, textProps)
   }, contentProps), children);
 
@@ -102,6 +104,9 @@ export var EuiButtonDisplay = /*#__PURE__*/forwardRef(function (_ref2, ref) {
 
   return createElement(element, _objectSpread(_objectSpread(_objectSpread({
     css: cssStyles,
+    style: minWidth ? _objectSpread(_objectSpread({}, style), {}, {
+      minWidth: minWidth
+    }) : style,
     ref: ref
   }, elementProps), relObj), rest), innerNode);
 });

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

@@ -28,11 +28,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext, minWidth) {
+export var euiButtonDisplayStyles = function euiButtonDisplayStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base
-    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";", minWidth && logicalCSS('min-width', minWidth), ";font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
+    euiButtonDisplay: /*#__PURE__*/css(euiButtonBaseCSS(), ";", logicalCSS('min-width', "".concat(euiTheme.base * 7, "px")), " font-weight:", euiTheme.font.weight.medium, ";padding:0 ", euiTheme.size.m, ";&:hover:not(:disabled),&:focus{text-decoration:underline;};label:euiButtonDisplay;"),
     // States
     isDisabled: _ref,
     fullWidth: /*#__PURE__*/css("display:block;", logicalCSS('width', '100%'), ";;label:fullWidth;"),

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

@@ -16,6 +16,8 @@ import { EuiIcon } from '../../icon';
 import { euiButtonDisplayContentStyles } from './_button_display_content.styles';
 import classNames from 'classnames';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+export var ICON_SIZES = ['s', 'm'];
+export var ICON_SIDES = ['left', 'right'];
 export var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var children = _ref.children,
       textProps = _ref.textProps,
@@ -33,7 +35,7 @@ export var EuiButtonDisplayContent = function EuiButtonDisplayContent(_ref) {
   var styles = euiButtonDisplayContentStyles(theme);
   var cssStyles = [styles.euiButtonDisplayContent, iconSide && styles[iconSide]];
   var cssSpinnerStyles = [styles.euiButtonDisplayContent__spinner];
-  var cssIconStyles = [styles.euiButtonDisplayContent__icon]; // Add an icon to the button if one exists.
+  var cssIconStyles = [styles.euiButtonDisplayContent__icon, iconSize && styles[iconSize]]; // Add an icon to the button if one exists.
 
   var icon; // When the button is disabled the text gets gray
   // and in some buttons the background gets a light gray

package/optimize/es/components/button/button_display/_button_display_content.styles.js

@@ -46,6 +46,9 @@ export var euiButtonDisplayContentStyles = function euiButtonDisplayContentStyle
     left: /*#__PURE__*/css(";label:left;"),
     right: _ref3,
     euiButtonDisplayContent__spinner: _ref2,
-    euiButtonDisplayContent__icon: _ref
+    euiButtonDisplayContent__icon: _ref,
+    // Icon size
+    s: /*#__PURE__*/css(";label:s;"),
+    m: /*#__PURE__*/css(";label:m;")
   };
 };

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

@@ -69,11 +69,15 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
 
 
   var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
-  var buttonColorStyles = useEuiButtonColorCSS({
-    display: display
-  })[color]; // Temporary extra style for empty `:hover` state until we decide how to handle universally
-
-  var hoverStyles = display === 'empty' ? /*#__PURE__*/css("&:hover{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:hoverStyles;") : /*#__PURE__*/css(";label:hoverStyles;");
+  var styles = {
+    euiButtonIcon: /*#__PURE__*/css(";label:euiButtonIcon;"),
+    colors: useEuiButtonColorCSS({
+      display: display
+    }),
+    // Temporary extra style for empty `:hover` state until we decide how to handle universally
+    hoverStyles: /*#__PURE__*/css("&:hover{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";};label:hoverStyles;")
+  };
+  var cssStyles = [styles.euiButtonIcon, styles.colors[color], display === 'empty' && styles.hoverStyles];
   var classes = classNames('euiButtonIcon', size && sizeToClassNameMap[size], className);
 
   if (_color === 'ghost') {
@@ -119,7 +123,7 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
       rel: rel
     });
     return ___EmotionJSX("a", _extends({
-      css: [buttonColorStyles, hoverStyles, ";label:EuiButtonIcon;"],
+      css: cssStyles,
       tabIndex: isAriaHidden ? -1 : undefined,
       className: classes,
       href: href,
@@ -131,7 +135,7 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
 
   var buttonType;
   return ___EmotionJSX("button", _extends({
-    css: [buttonColorStyles, hoverStyles, ";label:EuiButtonIcon;"],
+    css: cssStyles,
     tabIndex: isAriaHidden ? -1 : undefined,
     disabled: isDisabled,
     className: classes,

package/optimize/es/components/card/card.js

@@ -76,7 +76,7 @@ export var EuiCard = function EuiCard(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var isClickable = !isDisabled && (onClick || href || selectable && !selectable.isDisabled);
   var euiThemeContext = useEuiTheme();
-  var styles = euiCardStyles(euiThemeContext, paddingSize, display);
+  var styles = euiCardStyles(euiThemeContext, paddingSize);
   var cardStyles = [styles.card.euiCard, // Text alignment should always be left when horizontal
   styles.card.aligned[layout === 'horizontal' ? 'left' : textAlign], styles.card.layout[layout], isDisabled && styles.card.disabled];
   var contentStyles = [styles.content.euiCard__content, styles.content.layout[layout]];
@@ -122,7 +122,7 @@ export var EuiCard = function EuiCard(_ref) {
 
   if (image && layout === 'vertical') {
     if ( /*#__PURE__*/isValidElement(image) || typeof image === 'string') {
-      var imageStyles = [styles.euiCard__image];
+      var imageStyles = [styles.image.euiCard__image, display === 'transparent' && styles.image.transparent];
       imageNode = ___EmotionJSX("div", {
         className: "euiCard__image",
         css: imageStyles

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

@@ -54,7 +54,7 @@ var _ref5 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize, color) {
+export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize) {
   var euiTheme = euiThemeContext.euiTheme;
   var paddingAmount = euiPaddingSize(euiThemeContext, paddingSize);
   var spacing = euiPaddingSize(euiThemeContext, paddingKey);
@@ -91,7 +91,10 @@ export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize,
       },
       disabled: _ref2
     },
-    euiCard__image: /*#__PURE__*/css("position:relative;overflow:hidden;", logicalCSS('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", logicalCSS('left', "-".concat(paddingAmount)), ";", logicalCSS('top', "-".concat(paddingAmount)), ";", logicalCSS('margin-bottom', "-".concat(paddingAmount)), ";", logicalCSS('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");", color === 'transparent' ? "border-radius: ".concat(euiTheme.border.radius.medium, ";") : undefined, " img{", logicalCSS('width', '100%'), ";};label:euiCard__image;"),
+    image: {
+      euiCard__image: /*#__PURE__*/css("position:relative;overflow:hidden;", logicalCSS('width', "calc(100% + (".concat(paddingAmount, " * 2))")), ";", logicalCSS('left', "-".concat(paddingAmount)), ";", logicalCSS('top', "-".concat(paddingAmount)), ";", logicalCSS('margin-bottom', "-".concat(paddingAmount)), ";", logicalCSS('border-top-left-radius', "calc(".concat(euiTheme.border.radius.medium, " - ").concat(euiTheme.border.width.thin, ")")), " ", logicals['border-top-right-radius'], ":calc(", euiTheme.border.radius.medium, " - ", euiTheme.border.width.thin, ");img{", logicalCSS('width', '100%'), ";};label:euiCard__image;"),
+      transparent: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";;label:transparent;")
+    },
     icon: {
       euiCard__icon: /*#__PURE__*/css(";label:euiCard__icon;"),
       withImage: /*#__PURE__*/css("position:absolute;", logicalCSS('top', '50%'), ";", logicalCSS('left', '50%'), ";transform:translate(-50%, calc(-50% + -", paddingAmount, "))!important;;label:withImage;"),