@elastic/eui 82.0.0 → 82.2.0

package/es/components/button/button_group/button_group_button.js

@@ -1,4 +1,3 @@
-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); }
 var _excluded = ["className", "id", "isDisabled", "isIconOnly", "isSelected", "label", "name", "onChange", "size", "value", "color", "element", "type"];
 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(); }
@@ -7,11 +6,6 @@ function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o =
 function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
 function _iterableToArrayLimit(arr, i) { var _i = null == arr ? null : "undefined" != typeof Symbol && arr[Symbol.iterator] || arr["@@iterator"]; if (null != _i) { var _s, _e, _x, _r, _arr = [], _n = !0, _d = !1; try { if (_x = (_i = _i.call(arr)).next, 0 === i) { if (Object(_i) !== _i) return; _n = !1; } else for (; !(_n = (_s = _x.call(_i)).done) && (_arr.push(_s.value), _arr.length !== i); _n = !0); } catch (err) { _d = !0, _e = err; } finally { try { if (!_n && null != _i.return && (_r = _i.return(), Object(_r) !== _r)) return; } finally { if (_d) throw _e; } } return _arr; } }
 function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
-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); }
 function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
 function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
 /*
@@ -25,10 +19,11 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import classNames from 'classnames';
 import PropTypes from "prop-types";
 import React from 'react';
-import { EuiButtonDisplayDeprecated as EuiButtonDisplay } from '../button';
-import { useInnerText } from '../../inner_text';
-import { useGeneratedHtmlId } from '../../../services';
+import { useEuiTheme } from '../../../services';
 import { useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { useInnerText } from '../../inner_text';
+import { EuiButtonDisplay } from '../button_display/_button_display';
+import { euiButtonGroupButtonStyles, _compressedButtonFocusColor, _uncompressedButtonFocus } from './button_group_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
   var className = _ref.className,
@@ -45,21 +40,16 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     _ref$color = _ref.color,
     _color = _ref$color === void 0 ? 'primary' : _ref$color,
     _ref$element = _ref.element,
-    element = _ref$element === void 0 ? 'button' : _ref$element,
+    _element = _ref$element === void 0 ? 'button' : _ref$element,
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'button' : _ref$type,
     rest = _objectWithoutProperties(_ref, _excluded);
   // Force element to be a button if disabled
-  var el = isDisabled ? 'button' : element;
-  var newId = useGeneratedHtmlId();
+  var element = isDisabled ? 'button' : _element;
   var elementProps = {};
   var singleInput;
-  if (el === 'label') {
-    elementProps = _objectSpread(_objectSpread({}, elementProps), {}, {
-      htmlFor: newId
-    });
+  if (element === 'label') {
     singleInput = ___EmotionJSX("input", {
-      id: newId,
       className: "euiScreenReaderOnly",
       name: name,
       checked: isSelected,
@@ -72,22 +62,28 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
       "data-test-subj": id
     });
   } else {
-    elementProps = _objectSpread(_objectSpread({}, elementProps), {}, {
-      id: newId,
+    elementProps = {
       'data-test-subj': id,
       isSelected: isSelected,
       type: type,
       onClick: function onClick() {
         return _onChange(id);
       }
-    });
+    };
   }
+  var isCompressed = size === 'compressed';
   var color = isDisabled ? 'disabled' : _color;
-  var display = isSelected ? 'fill' : size === 'compressed' ? 'empty' : 'base';
+  var display = isSelected ? 'fill' : isCompressed ? 'empty' : 'base';
+  var euiTheme = useEuiTheme();
   var buttonColorStyles = useEuiButtonColorCSS({
     display: display
   })[color];
-  var buttonClasses = classNames({
+  var focusColorStyles = isCompressed ? _compressedButtonFocusColor(euiTheme, color) : _uncompressedButtonFocus(euiTheme);
+  var styles = euiButtonGroupButtonStyles(euiTheme);
+  var cssStyles = [styles.euiButtonGroupButton, isIconOnly && styles.iconOnly, styles[size], !isCompressed && styles.uncompressed, isDisabled && isSelected ? styles.disabledAndSelected : buttonColorStyles, !isDisabled && focusColorStyles];
+  var contentStyles = [styles.content.euiButtonGroupButton__content, isCompressed && styles.content.compressed];
+  var textStyles = [isIconOnly ? styles.text.euiButtonGroupButton__iconOnly : styles.text.euiButtonGroupButton__text];
+  var buttonClasses = classNames('euiButtonGroupButton', {
     'euiButtonGroupButton-isSelected': isSelected,
     'euiButtonGroupButton-isIconOnly': isIconOnly
   }, className);
@@ -102,14 +98,16 @@ export var EuiButtonGroupButton = function EuiButtonGroupButton(_ref) {
     buttonTextRef = _useInnerText2[0],
     innerText = _useInnerText2[1];
   return ___EmotionJSX(EuiButtonDisplay, _extends({
-    css: [buttonColorStyles, ";label:EuiButtonGroupButton;"],
-    baseClassName: "euiButtonGroupButton",
+    css: cssStyles,
     className: buttonClasses,
-    element: el,
+    element: element,
     isDisabled: isDisabled,
     size: size === 'compressed' ? 's' : size,
+    contentProps: {
+      css: contentStyles
+    },
     textProps: {
-      className: isIconOnly ? 'euiScreenReaderOnly' : 'euiButtonGroupButton__textShift',
+      css: textStyles,
       ref: buttonTextRef,
       'data-text': innerText
     },
@@ -144,11 +142,10 @@ EuiButtonGroupButton.propTypes = {
   /**
      * Can only be one side `left` or `right`
      */
-  iconSide: PropTypes.oneOf(["left", "right"]),
+  iconSide: PropTypes.oneOfType([PropTypes.any.isRequired, PropTypes.oneOf([undefined])]),
   isLoading: PropTypes.bool,
   /**
-     * Object of props passed to the <span/> wrapping the content's text (only if the children is a `string`)
-     * It doesn't apply to the icon.
+     * Object of props passed to the <span/> wrapping the content's text/children only (not icon)
      */
   textProps: PropTypes.shape({
     className: PropTypes.string,
@@ -158,7 +155,7 @@ EuiButtonGroupButton.propTypes = {
     ref: PropTypes.any,
     "data-text": PropTypes.string
   }),
-  iconSize: PropTypes.oneOf(["s", "m"]),
+  iconSize: PropTypes.any,
   className: PropTypes.string,
   "aria-label": PropTypes.string,
   "data-test-subj": PropTypes.string,

package/es/components/button/button_group/button_group_button.styles.js

@@ -0,0 +1,71 @@
+/*
+ * 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 { makeDisabledContrastColor, transparentize } from '../../../services';
+import { mathWithUnits, logicalCSS, logicalShorthandCSS, euiTextShift, euiOutline, euiCanAnimate } from '../../../global_styling';
+import { euiButtonFillColor } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { euiScreenReaderOnly } from '../../accessibility';
+import { euiFormVariables } from '../../form/form.styles';
+export var euiButtonGroupButtonStyles = function euiButtonGroupButtonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    controlCompressedHeight = _euiFormVariables.controlCompressedHeight,
+    controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius;
+  var compressedButtonHeight = mathWithUnits([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+    return x - y * 2;
+  });
+  var uncompressedBorderRadii = function uncompressedBorderRadii(radiusSize) {
+    return "\n    border-radius: 0;\n\n    &:first-child {\n      ".concat(logicalShorthandCSS('border-radius', "".concat(radiusSize, " 0 0 ").concat(radiusSize)), "\n    }\n\n    &:last-child {\n      ").concat(logicalShorthandCSS('border-radius', "0 ".concat(radiusSize, " ").concat(radiusSize, " 0")), "\n    }\n  ");
+  };
+  return {
+    // Base
+    euiButtonGroupButton: /*#__PURE__*/css(logicalCSS('min-width', 0), " flex-shrink:1;flex-grow:0;", euiCanAnimate, "{transition:background-color ", euiTheme.animation.normal, " ease-in-out,color ", euiTheme.animation.normal, " ease-in-out;};label:euiButtonGroupButton;"),
+    iconOnly: /*#__PURE__*/css("padding-inline:", euiTheme.size.s, ";;label:iconOnly;"),
+    // Sizes
+    s: /*#__PURE__*/css(uncompressedBorderRadii(euiTheme.border.radius.small), ";;label:s;"),
+    m: /*#__PURE__*/css(uncompressedBorderRadii(euiTheme.border.radius.medium), ";;label:m;"),
+    uncompressed: /*#__PURE__*/css("&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.bold, ";}&:not(.euiButtonGroupButton-isSelected)+.euiButtonGroupButton:not(.euiButtonGroupButton-isSelected){box-shadow:-", euiTheme.border.width.thin, " 0 0 0 ", transparentize(euiTheme.colors.fullShade, 0.1), ";}&:is(.euiButtonGroupButton-isSelected)+.euiButtonGroupButton-isSelected{box-shadow:-", euiTheme.border.width.thin, " 0 0 0 ", transparentize(euiTheme.colors.emptyShade, 0.2), ";};label:uncompressed;"),
+    compressed: /*#__PURE__*/css(logicalCSS('height', compressedButtonHeight), " line-height:", compressedButtonHeight, ";padding:", mathWithUnits(euiTheme.border.width.thin, function (x) {
+      return x * 2;
+    }), ";background-clip:content-box;border-radius:", mathWithUnits([controlCompressedBorderRadius, euiTheme.border.width.thin], function (x, y) {
+      return x + y;
+    }), ";font-weight:", euiTheme.font.weight.regular, ";&:is(.euiButtonGroupButton-isSelected){font-weight:", euiTheme.font.weight.semiBold, ";};label:compressed;"),
+    // States
+    disabledAndSelected: /*#__PURE__*/css("color:", makeDisabledContrastColor(euiTheme.colors.disabledText)(euiTheme.colors.disabled), ";background-color:", euiTheme.colors.disabled, ";;label:disabledAndSelected;"),
+    // Content wrapper
+    content: {
+      euiButtonGroupButton__content: /*#__PURE__*/css(";label:euiButtonGroupButton__content;"),
+      compressed: /*#__PURE__*/css("padding-inline:", euiTheme.size.s, ";;label:compressed;")
+    },
+    // Text wrapper
+    text: {
+      euiButtonGroupButton__text: /*#__PURE__*/css(euiTextShift('bold', 'data-text', euiTheme), ";;label:euiButtonGroupButton__text;"),
+      euiButtonGroupButton__iconOnly: /*#__PURE__*/css(euiScreenReaderOnly(), ";;label:euiButtonGroupButton__iconOnly;")
+    }
+  };
+};
+
+/**
+ * Focus utilities - made complex by the two different button styles
+ * and the fact that `label`/`input` combos need :focus-within,
+ * but `button` does not
+ */
+var _outlineSelectors = function _outlineSelectors(outlineCss) {
+  return /*#__PURE__*/css("&:is(button){&:focus-visible{", outlineCss, ";}}&:is(label){&:focus-within{", outlineCss, ";}@supports selector(:has(*)){/* Once all evergreen browsers support :has, we can remove\n           @supports and the outline: none reset just use this selector */&:focus-within{outline:none;}&:has(:focus-visible){", outlineCss, ";}}}");
+};
+export var _compressedButtonFocusColor = function _compressedButtonFocusColor(euiThemeContext, color) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiButtonFillColor = euiButtonFillColor(euiThemeContext, color),
+    backgroundColor = _euiButtonFillColor.backgroundColor;
+  return _outlineSelectors("outline: ".concat(euiTheme.focus.width, " solid ").concat(backgroundColor, ";"));
+};
+export var _uncompressedButtonFocus = function _uncompressedButtonFocus(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return _outlineSelectors(euiOutline(euiThemeContext, 'inset', euiTheme.colors.fullShade));
+};

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

@@ -14,25 +14,14 @@ import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { EuiThemeProvider, getSecureRelForTarget, useEuiTheme } from '../../../services';
-import { keysOf } from '../../common';
 import { EuiIcon } from '../../icon';
 import { EuiLoadingSpinner } from '../../loading';
-import { euiButtonEmptyColor, useEuiButtonColorCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { useEuiButtonColorCSS, useEuiButtonFocusCSS } from '../../../themes/amsterdam/global_styling/mixins/button';
 import { isButtonDisabled } from '../button_display/_button_display';
-import { css } from '@emotion/react';
+import { euiButtonIconStyles, _emptyHoverStyles } from './button_icon.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var displayToClassNameMap = {
-  base: null,
-  empty: 'euiButtonIcon--empty',
-  fill: 'euiButtonIcon--fill'
-};
-export var DISPLAYS = keysOf(displayToClassNameMap);
-var sizeToClassNameMap = {
-  xs: 'euiButtonIcon--xSmall',
-  s: 'euiButtonIcon--small',
-  m: 'euiButtonIcon--medium'
-};
-export var SIZES = keysOf(sizeToClassNameMap);
+export var SIZES = ['xs', 's', 'm'];
+export var DISPLAYS = ['base', 'empty', 'fill'];
 export var EuiButtonIcon = function EuiButtonIcon(props) {
   var className = props.className,
     iconType = props.iconType,
@@ -67,16 +56,14 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
     console.warn("EuiButtonIcon requires aria-label or aria-labelledby to be specified because icon-only\n      buttons are screen-reader-inaccessible without them.");
   }
   var color = isDisabled ? 'disabled' : _color === 'ghost' ? 'text' : _color;
-  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);
+  var buttonColorStyles = useEuiButtonColorCSS({
+    display: display
+  });
+  var buttonFocusStyle = useEuiButtonFocusCSS();
+  var styles = euiButtonIconStyles(euiThemeContext);
+  var emptyHoverStyles = _emptyHoverStyles(euiThemeContext, color);
+  var cssStyles = [styles.euiButtonIcon, styles[size], buttonColorStyles[color], buttonFocusStyle, display === 'empty' && emptyHoverStyles, isDisabled && styles.isDisabled];
+  var classes = classNames('euiButtonIcon', className);
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
     return ___EmotionJSX(EuiThemeProvider, {
@@ -101,13 +88,23 @@ export var EuiButtonIcon = function EuiButtonIcon(props) {
     });
   }
 
-  // `original` size doesn't exist in `EuiLoadingSpinner`
-  // when the `iconSize` is `original` we don't pass any size to the `EuiLoadingSpinner`
-  // so it gets the default size
-  var loadingSize = iconSize === 'original' ? undefined : iconSize;
   if (iconType && isLoading) {
+    // `original` size doesn't exist in `EuiLoadingSpinner`
+    // when the `iconSize` is `original` we don't pass any size to the `EuiLoadingSpinner`
+    // so it gets the default size
+    var loadingSize = iconSize === 'original' ? undefined : iconSize;
+
+    // When the button is disabled the text gets gray
+    // and in some buttons the background gets a light gray
+    // for better contrast we want to change the border of the spinner
+    // to have the same color of the text. This way we ensure the borders
+    // are always visible. The default spinner color could be very light.
+    var loadingSpinnerColor = isDisabled ? {
+      border: 'currentcolor'
+    } : undefined;
     buttonIcon = ___EmotionJSX(EuiLoadingSpinner, {
-      size: loadingSize
+      size: loadingSize,
+      color: loadingSpinnerColor
     });
   }
 
@@ -165,7 +162,7 @@ EuiButtonIcon.propTypes = {
      * Overall size of button.
      * Matches the sizes of other EuiButtons
      */
-  size: PropTypes.oneOf(["xs", "s", "m"]),
+  size: PropTypes.any,
   /**
      * Size of the icon only.
      * This will not affect the overall size of the button
@@ -192,7 +189,7 @@ EuiButtonIcon.propTypes = {
      * `fill` is equivalent to a filled EuiButton
      * `empty` (default) is equivalent to an EuiButtonEmpty
      */
-  display: PropTypes.oneOf(["base", "empty", "fill"]),
+  display: PropTypes.any,
   /**
      * Disables the button and changes the icon to a loading spinner
      */

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

@@ -0,0 +1,35 @@
+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 { logicalSizeCSS } from '../../../global_styling';
+import { euiButtonEmptyColor, euiButtonSizeMap } from '../../../themes/amsterdam/global_styling/mixins/button';
+import { euiButtonBaseCSS } from '../button_display/_button_display.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "8595p9-isDisabled",
+  styles: "cursor:not-allowed;label:isDisabled;"
+} : {
+  name: "8595p9-isDisabled",
+  styles: "cursor:not-allowed;label:isDisabled;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiButtonIconStyles = function euiButtonIconStyles(euiThemeContext) {
+  var sizes = euiButtonSizeMap(euiThemeContext);
+  return {
+    euiButtonIcon: /*#__PURE__*/css(euiButtonBaseCSS(), "display:inline-flex;align-items:center;justify-content:space-around;&>svg{pointer-events:none;};label:euiButtonIcon;"),
+    isDisabled: _ref,
+    // Sizes
+    xs: /*#__PURE__*/css(logicalSizeCSS(sizes.xs.height), " border-radius:", sizes.xs.radius, ";;label:xs;"),
+    s: /*#__PURE__*/css(logicalSizeCSS(sizes.s.height), " border-radius:", sizes.s.radius, ";;label:s;"),
+    m: /*#__PURE__*/css(logicalSizeCSS(sizes.m.height), " border-radius:", sizes.m.radius, ";;label:m;")
+  };
+};
+export var _emptyHoverStyles = function _emptyHoverStyles(euiThemeContext, color) {
+  return /*#__PURE__*/css("&:hover{background-color:", euiButtonEmptyColor(euiThemeContext, color).backgroundColor, ";}");
+};

package/es/components/call_out/call_out.styles.js

@@ -12,7 +12,7 @@ export var euiCallOutStyles = function euiCallOutStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
     euiCallOut: /*#__PURE__*/css(";label:euiCallOut;"),
-    euiCallOut__icon: /*#__PURE__*/css("position:relative;", logicalCSS('top', '-1px'), ";", logicalCSS('margin-right', euiTheme.size.s), ";;label:euiCallOut__icon;"),
+    euiCallOut__icon: /*#__PURE__*/css("position:relative;", logicalCSS('top', '-1px'), " ", logicalCSS('margin-right', euiTheme.size.s), ";;label:euiCallOut__icon;"),
     euiCallOut__description: /*#__PURE__*/css(":not(:only-child){", logicalCSS('margin-top', euiTheme.size.s), ";};label:euiCallOut__description;")
   };
 };

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

@@ -67,9 +67,9 @@ export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize)
     card: {
       euiCard: /*#__PURE__*/css("display:flex;align-items:flex-start;justify-content:space-between;flex-direction:column;&:has(\n            [class*='euiCard__text'][class*='-interactive']:focus:focus-visible\n          ){outline:", euiTheme.focus.width, " solid currentColor;};label:euiCard;"),
       aligned: {
-        center: /*#__PURE__*/css(logicalTextAlignCSS('center'), ";align-items:center;;label:center;"),
-        left: /*#__PURE__*/css(logicalTextAlignCSS('left'), ";align-items:flex-start;;label:left;"),
-        right: /*#__PURE__*/css(logicalTextAlignCSS('right'), ";align-items:flex-end;;label:right;")
+        center: /*#__PURE__*/css(logicalTextAlignCSS('center'), " align-items:center;;label:center;"),
+        left: /*#__PURE__*/css(logicalTextAlignCSS('left'), " align-items:flex-start;;label:left;"),
+        right: /*#__PURE__*/css(logicalTextAlignCSS('right'), " align-items:flex-end;;label:right;")
       },
       disabled: /*#__PURE__*/css("cursor:not-allowed;background-color:", euiButtonColor(euiThemeContext, 'disabled'), ";color:", euiTheme.colors.disabledText, ";;label:disabled;")
     },
@@ -89,7 +89,7 @@ export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize)
     },
     euiCard__children: /*#__PURE__*/css(logicalCSS('margin-top', halfSpacing), ";;label:euiCard__children;"),
     euiCard__description: /*#__PURE__*/css(logicalCSS('margin-top', halfSpacing), ";;label:euiCard__description;"),
-    euiCard__footer: /*#__PURE__*/css("flex-grow:0;", logicalCSS('width', '100%'), ";", logicalCSS('margin-top', spacing), ";;label:euiCard__footer;"),
+    euiCard__footer: /*#__PURE__*/css("flex-grow:0;", logicalCSS('width', '100%'), logicalCSS('margin-top', spacing), ";;label:euiCard__footer;"),
     top: {
       euiCard__top: /*#__PURE__*/css("flex-grow:0;font-size:0;position:relative;", logicalCSS('margin-bottom', spacing), ";;label:euiCard__top;"),
       layout: {
@@ -99,12 +99,12 @@ export var euiCardStyles = function euiCardStyles(euiThemeContext, paddingSize)
       disabled: _ref2
     },
     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;"),
+      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;"),
+      withImage: /*#__PURE__*/css("position:absolute;", logicalCSS('top', '50%'), " ", logicalCSS('left', '50%'), "transform:translate(\n          -50%,\n          calc(-50% + -", paddingAmount, ")\n        )!important;;label:withImage;"),
       layout: {
         vertical: /*#__PURE__*/css(logicalCSS('margin-top', halfSpacing), ";;label:vertical;"),
         horizontal: /*#__PURE__*/css(logicalCSS('margin-right', spacing), ";;label:horizontal;")
@@ -138,7 +138,7 @@ export var euiCardBetaBadgeStyles = function euiCardBetaBadgeStyles(euiThemeCont
   var padding = euiPaddingSize(euiThemeContext, paddingSize);
   return {
     hasBetaBadge: /*#__PURE__*/css("position:relative;overflow:visible;", logicalCSS('padding-top', "calc(".concat(padding, " + ").concat(euiTheme.size.s, ")")), ";;label:hasBetaBadge;"),
-    euiCard__betaBadgeAnchor: /*#__PURE__*/css("line-height:0;position:absolute;", logicalCSS('top', '0'), ";", logicalCSS('left', '50%'), ";transform:translateX(-50%) translateY(-50%);z-index:3;", logicalCSS('min-width', 'min(30%, 112px)'), ";", logicalCSS('max-width', "calc(100% - (".concat(padding, " * 2))")), ";;label:euiCard__betaBadgeAnchor;"),
+    euiCard__betaBadgeAnchor: /*#__PURE__*/css("line-height:0;position:absolute;", logicalCSS('top', '0'), " ", logicalCSS('left', '50%'), " transform:translateX(-50%) translateY(-50%);z-index:3;", logicalCSS('min-width', 'min(30%, 112px)'), " ", logicalCSS('max-width', "calc(100% - (".concat(padding, " * 2))")), ";;label:euiCard__betaBadgeAnchor;"),
     euiCard__betaBadge: /*#__PURE__*/css(logicalCSS('width', '100%'), ";;label:euiCard__betaBadge;")
   };
 };

package/es/components/collapsible_nav/collapsible_nav.js

@@ -25,8 +25,9 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React, { cloneElement, useRef } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useGeneratedHtmlId, useIsWithinMinBreakpoint, useCombinedRefs } from '../../services';
+import { useEuiTheme, useGeneratedHtmlId, useIsWithinMinBreakpoint, useCombinedRefs } from '../../services';
 import { EuiFlyout } from '../flyout';
+import { euiCollapsibleNavStyles } from './collapsible_nav.styles';
 
 // Extend all the flyout props except `onClose` because we handle this internally
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -71,7 +72,11 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
   });
   var windowIsLargeEnoughToPush = useIsWithinMinBreakpoint(dockedBreakpoint);
   var navIsDocked = isDocked && windowIsLargeEnoughToPush;
+  var flyoutType = navIsDocked ? 'push' : 'overlay';
   var classes = classNames('euiCollapsibleNav', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavStyles(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNav, styles[flyoutType]];
 
   // Show a trigger button if one was passed but
   // not if navIsDocked and showButtonIfDocked is false
@@ -90,6 +95,7 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
   });
   var flyout = ___EmotionJSX(EuiFlyout, _extends({
     id: flyoutID,
+    css: cssStyles,
     className: classes
     // Flyout props we set different defaults for
     ,
@@ -103,7 +109,7 @@ export var EuiCollapsibleNav = function EuiCollapsibleNav(_ref) {
     focusTrapProps: focusTrapProps
   }, rest, {
     // Props dependent on internal docked status
-    type: navIsDocked ? 'push' : 'overlay',
+    type: flyoutType,
     hideCloseButton: navIsDocked,
     pushMinBreakpoint: dockedBreakpoint
   }), children);

package/es/components/collapsible_nav/collapsible_nav.styles.js

@@ -0,0 +1,19 @@
+/*
+ * 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';
+export var euiCollapsibleNavStyles = function euiCollapsibleNavStyles(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    euiCollapsibleNav: /*#__PURE__*/css(";label:euiCollapsibleNav;"),
+    // The majority of styles extend from EuiFlyout
+    push: /*#__PURE__*/css(";label:push;"),
+    // No z-index needed
+    overlay: /*#__PURE__*/css("z-index:", euiTheme.levels.navigation, ";;label:overlay;")
+  };
+};

package/es/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.js

@@ -13,18 +13,14 @@ function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) r
 import React from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { useGeneratedHtmlId } from '../../../services';
+import { EuiThemeProvider, useEuiTheme, useGeneratedHtmlId } from '../../../services';
 import { EuiAccordion } from '../../accordion';
 import { EuiIcon } from '../../icon';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
 import { EuiTitle } from '../../title';
+import { euiCollapsibleNavGroupStyles } from './collapsible_nav_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var backgroundToClassNameMap = {
-  none: '',
-  light: 'euiCollapsibleNavGroup--light',
-  dark: 'euiCollapsibleNavGroup--dark'
-};
-export var BACKGROUNDS = Object.keys(backgroundToClassNameMap);
+export var BACKGROUNDS = ['none', 'light', 'dark'];
 export var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
   var className = _ref.className,
     children = _ref.children,
@@ -47,15 +43,18 @@ export var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
     conditionalId: id
   });
   var titleID = "".concat(groupID, "__title");
-  var classes = classNames('euiCollapsibleNavGroup', backgroundToClassNameMap[background], {
-    'euiCollapsibleNavGroup--withHeading': title
-  }, className);
+  var euiTheme = useEuiTheme();
+  var styles = euiCollapsibleNavGroupStyles(euiTheme);
+  var cssStyles = [styles.euiCollapsibleNavGroup, isCollapsible ? styles.isCollapsible : styles.notCollapsible, background && styles[background]];
+  var classes = classNames('euiCollapsibleNavGroup', className);
 
   // Warn if consumer passes an iconType without a title
   if (iconType && !title) {
     console.warn('EuiCollapsibleNavGroup will not render an icon without `title`.');
   }
+  var childrenStyles = [styles.childrenWrapper.euiCollapsibleNavGroup__children, title && styles.childrenWrapper.withHeading];
   var content = children && ___EmotionJSX("div", {
+    css: childrenStyles,
     className: "euiCollapsibleNavGroup__children"
   }, children);
   var headingClasses = 'euiCollapsibleNavGroup__heading';
@@ -75,26 +74,32 @@ export var EuiCollapsibleNavGroup = function EuiCollapsibleNavGroup(_ref) {
     id: titleID,
     className: "euiCollapsibleNavGroup__title"
   }, title)))) : undefined;
+  var render;
   if (isCollapsible && title) {
-    return ___EmotionJSX(EuiAccordion, _extends({
+    render = ___EmotionJSX(EuiAccordion, _extends({
       id: groupID,
+      css: cssStyles,
       className: classes,
       buttonClassName: headingClasses,
       buttonContent: titleContent,
       initialIsOpen: true,
-      arrowDisplay: "right",
-      arrowProps: {
-        color: background === 'dark' ? 'ghost' : 'text'
-      }
+      arrowDisplay: "right"
     }, rest), content);
   } else {
-    return ___EmotionJSX("div", _extends({
+    render = ___EmotionJSX("div", _extends({
       id: groupID,
+      css: cssStyles,
       className: classes
     }, rest), titleContent && ___EmotionJSX("div", {
       className: headingClasses
     }, titleContent), content);
   }
+  return background === 'dark' ? ___EmotionJSX(EuiThemeProvider, {
+    colorMode: "dark",
+    wrapperProps: {
+      cloneElement: true
+    }
+  }, render) : render;
 };
 EuiCollapsibleNavGroup.propTypes = {
   /**
@@ -157,7 +162,7 @@ EuiCollapsibleNavGroup.propTypes = {
      * Adds a background color to the entire group,
      * applying the correct text color to the `title` only
      */
-  background: PropTypes.oneOf(["none", "light", "dark"]),
+  background: PropTypes.any,
   /**
      * Determines the title's heading element
      */

package/es/components/collapsible_nav/collapsible_nav_group/collapsible_nav_group.styles.js

@@ -0,0 +1,30 @@
+/*
+ * 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 { shade } from '../../../services';
+import { logicalCSS } from '../../../global_styling';
+export var euiCollapsibleNavGroupStyles = function euiCollapsibleNavGroupStyles(_ref) {
+  var euiTheme = _ref.euiTheme,
+    colorMode = _ref.colorMode;
+  return {
+    euiCollapsibleNavGroup: /*#__PURE__*/css("&:not(:first-child){", logicalCSS('border-top', euiTheme.border.thin), ";};label:euiCollapsibleNavGroup;"),
+    // Background colors
+    none: /*#__PURE__*/css(";label:none;"),
+    light: /*#__PURE__*/css("background-color:", euiTheme.colors.body, ";;label:light;"),
+    dark: /*#__PURE__*/css("background-color:", colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.2), ";.euiCollapsibleNavGroup__title,.euiCollapsibleNavGroup__heading,.euiAccordion__iconButton{color:", euiTheme.colors.ghost, ";};label:dark;"),
+    // Header padding
+    isCollapsible: /*#__PURE__*/css(".euiAccordion__triggerWrapper{padding:", euiTheme.size.base, ";};label:isCollapsible;"),
+    notCollapsible: /*#__PURE__*/css(".euiCollapsibleNavGroup__heading{padding:", euiTheme.size.base, ";};label:notCollapsible;"),
+    // Children padding
+    childrenWrapper: {
+      euiCollapsibleNavGroup__children: /*#__PURE__*/css("padding:", euiTheme.size.s, ";;label:euiCollapsibleNavGroup__children;"),
+      withHeading: /*#__PURE__*/css(logicalCSS('padding-top', 0), ";;label:withHeading;")
+    }
+  };
+};

package/es/components/color_picker/color_stops/color_stops.styles.js

@@ -38,7 +38,7 @@ export var euiColorStopsStyles = function euiColorStopsStyles(euiThemeContext) {
     euiColorStops__track: /*#__PURE__*/css("&::after{background:", stripesBackground, ";background-size:", euiTheme.size.xs, " ", euiTheme.size.xs, ";};label:euiColorStops__track;"),
     euiColorStops__addTarget: /*#__PURE__*/css(euiCustomControl(euiThemeContext, {
       type: 'round'
-    }), ";", euiRangeThumbStyle(euiThemeContext), ";position:absolute;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbHeight, ";background-color:", euiTheme.colors.lightestShade, ";pointer-events:none;opacity:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.darkShade, ";box-shadow:none;z-index:", range.thumbZIndex, ";", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ease-in;};label:euiColorStops__addTarget;")
+    }), " ", euiRangeThumbStyle(euiThemeContext), " position:absolute;inset-block-start:0;block-size:", range.thumbHeight, ";inline-size:", range.thumbHeight, ";background-color:", euiTheme.colors.lightestShade, ";pointer-events:none;opacity:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.darkShade, ";box-shadow:none;z-index:", range.thumbZIndex, ";", euiCanAnimate, "{transition:opacity ", euiTheme.animation.fast, " ease-in;};label:euiColorStops__addTarget;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {