@elastic/eui 67.1.2 → 68.0.0

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

@@ -1,3 +1,9 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+
+function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) { symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); } keys.push.apply(keys, symbols); } return keys; }
+
+function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(Object(source), true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }
+
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -5,7 +11,97 @@
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-export var euiFormMaxWidth = function euiFormMaxWidth(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return "".concat(euiTheme.base * 25, "px");
+import { shade, tint, darken, transparentize, makeHighContrastColor } from '../../services';
+import { mathWithUnits, euiCanAnimate } from '../../global_styling';
+export var euiFormVariables = function euiFormVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+      colorMode = euiThemeContext.colorMode;
+  var isColorDark = colorMode === 'DARK';
+  var backgroundColor = isColorDark ? shade(euiTheme.colors.lightestShade, 0.4) : tint(euiTheme.colors.lightestShade, 0.6);
+  var controlHeight = euiTheme.size.xxl;
+  var controlCompressedHeight = euiTheme.size.xl;
+  var sizes = {
+    maxWidth: mathWithUnits(euiTheme.size.base, function (x) {
+      return x * 25;
+    }),
+    controlHeight: controlHeight,
+    controlCompressedHeight: controlCompressedHeight,
+    controlPadding: euiTheme.size.m,
+    controlCompressedPadding: euiTheme.size.s,
+    controlBorderRadius: euiTheme.border.radius.medium,
+    controlCompressedBorderRadius: euiTheme.border.radius.small
+  };
+  var colors = {
+    backgroundColor: backgroundColor,
+    backgroundDisabledColor: darken(euiTheme.colors.lightestShade, 0.1),
+    backgroundReadOnlyColor: euiTheme.colors.emptyShade,
+    borderColor: transparentize(euiTheme.border.color, 0.9),
+    borderDisabledColor: transparentize(euiTheme.border.color, 0.9),
+    controlDisabledColor: euiTheme.colors.mediumShade,
+    controlBoxShadow: '0 0 transparent',
+    controlPlaceholderText: makeHighContrastColor(euiTheme.colors.subduedText)(backgroundColor),
+    inputGroupLabelBackground: isColorDark ? shade(euiTheme.colors.lightShade, 0.15) : tint(euiTheme.colors.lightShade, 0.5),
+    inputGroupBorder: 'none'
+  }; // Colors - specific for checkboxes and radios
+
+  var customControlColors = {
+    customControlDisabledIconColor: isColorDark ? shade(euiTheme.colors.mediumShade, 0.38) : tint(euiTheme.colors.mediumShade, 0.485),
+    customControlBorderColor: isColorDark ? shade(euiTheme.colors.lightestShade, 0.18) : tint(euiTheme.colors.lightestShade, 0.3)
+  };
+  var controlLayout = {
+    controlLayoutGroupInputHeight: mathWithUnits(controlHeight, function (x) {
+      return x - 2;
+    }),
+    controlLayoutGroupInputCompressedHeight: mathWithUnits(controlCompressedHeight, function (x) {
+      return x - 2;
+    }),
+    controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.small
+  };
+  var iconSizes = {
+    controlIconSize: {
+      s: euiTheme.size.m,
+      m: euiTheme.size.base,
+      l: euiTheme.size.l,
+      xl: euiTheme.size.xl,
+      xxl: euiTheme.size.xxl
+    }
+  };
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), customControlColors), iconSizes), controlLayout);
+};
+export var euiFormControlSize = function euiFormControlSize(euiThemeContext) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var form = euiFormVariables(euiThemeContext);
+  var width = '100%';
+  var maxWidth = form.maxWidth;
+  if (options.fullWidth) maxWidth = '100%';
+  var height = options.height || form.controlHeight;
+  if (options.compressed) height = form.controlCompressedHeight;
+  if (options.inGroup) height = '100%';
+  return "\n    max-inline-size: ".concat(maxWidth, ";\n    inline-size: ").concat(width, ";\n    block-size: ").concat(height, ";\n  ");
+};
+export var euiCustomControl = function euiCustomControl(euiThemeContext) {
+  var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var euiTheme = euiThemeContext.euiTheme;
+  var form = euiFormVariables(euiThemeContext);
+  var type = options.type,
+      _options$size = options.size,
+      size = _options$size === void 0 ? euiTheme.size.base : _options$size;
+  var padddingStyle = '';
+  var borderRadiusStyle = '';
+
+  if (size) {
+    var borderSize = parseFloat(String(euiTheme.border.width.thin));
+    var paddingSize = mathWithUnits(size, function (x) {
+      return (x - borderSize * 2) / 2;
+    });
+    padddingStyle = "padding: ".concat(paddingSize, ";");
+  }
+
+  if (type === 'round') {
+    borderRadiusStyle = "border-radius: ".concat(size, ";");
+  } else if (type === 'square') {
+    borderRadiusStyle = "border-radius: ".concat(form.controlCompressedBorderRadius, ";");
+  }
+
+  return "\n    ".concat(padddingStyle, "\n    ").concat(borderRadiusStyle, "\n    border: ").concat(euiTheme.border.width.thin, " solid ").concat(form.customControlBorderColor, ";\n    background: ").concat(euiTheme.colors.emptyShade, " no-repeat center;\n\n    ").concat(euiCanAnimate, " {\n      transition: background-color ").concat(euiTheme.animation.fast, " ease-in,\n              border-color ").concat(euiTheme.animation.fast, " ease-in;\n    }\n  ");
 };

package/optimize/es/components/form/range/dual_range.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "style", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable"];
+var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "style", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable"];
 
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 
@@ -21,6 +21,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
  * Side Public License, v 1.
  */
 import React, { Component } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 import { keys } from '../../../services';
 import { isWithinRange } from '../../../services/number';
@@ -439,6 +440,7 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
 
       var _this$props2 = this.props,
           className = _this$props2.className,
+          customCss = _this$props2.css,
           compressed = _this$props2.compressed,
           disabled = _this$props2.disabled,
           fullWidth = _this$props2.fullWidth,
@@ -536,8 +538,14 @@ export var EuiDualRange = /*#__PURE__*/function (_Component) {
       var rightThumbPosition = this.state.rangeSliderRefAvailable ? this.calculateThumbPositionStyle(Number(this.upperValue) || max, this.state.rangeWidth) : {
         left: '0'
       };
+      var styles = {
+        euiDualRange: /*#__PURE__*/css(";label:euiDualRange;")
+      }; // TODO: Emotion conversion
+
+      var cssStyles = [styles.euiDualRange, customCss];
 
       var theRange = ___EmotionJSX(EuiRangeWrapper, {
+        css: cssStyles,
         className: classes,
         fullWidth: fullWidth,
         compressed: compressed

package/optimize/es/components/form/switch/switch.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["label", "id", "checked", "disabled", "compressed", "onChange", "className", "showLabel", "type", "labelProps"];
+var _excluded = ["label", "id", "checked", "disabled", "compressed", "onChange", "className", "css", "showLabel", "type", "labelProps"];
 
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -10,6 +10,7 @@ var _excluded = ["label", "id", "checked", "disabled", "compressed", "onChange",
  * Side Public License, v 1.
  */
 import React, { useCallback } from 'react';
+import { css } from '@emotion/react';
 import classNames from 'classnames';
 import { useGeneratedHtmlId } from '../../../services/accessibility';
 import { EuiIcon } from '../../icon';
@@ -22,6 +23,7 @@ export var EuiSwitch = function EuiSwitch(_ref) {
       compressed = _ref.compressed,
       onChange = _ref.onChange,
       className = _ref.className,
+      customCss = _ref.css,
       _ref$showLabel = _ref.showLabel,
       showLabel = _ref$showLabel === void 0 ? true : _ref$showLabel,
       _ref$type = _ref.type,
@@ -53,7 +55,13 @@ export var EuiSwitch = function EuiSwitch(_ref) {
     console.warn('EuiSwitch `label` must be a string when `showLabel` is false.');
   }
 
+  var styles = {
+    euiSwitch: /*#__PURE__*/css(";label:euiSwitch;")
+  }; // TODO: Emotion conversion
+
+  var cssStyles = [styles.euiSwitch, customCss];
   return ___EmotionJSX("div", {
+    css: cssStyles,
     className: classes
   }, ___EmotionJSX("button", _extends({
     id: switchId,

package/optimize/es/components/icon/assets/beta.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconBeta = function EuiIconBeta(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    xmlns: "http://www.w3.org/2000/svg",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M8 6.394h1.03c.72 0 1.283.153 1.688.459a2.2 2.2 0 01.813 1.163c.138.47.165.952.083 1.447-.1.597-.33 1.135-.69 1.616a3.95 3.95 0 01-1.333 1.137 3.689 3.689 0 01-1.735.418c-.381 0-.747-.07-1.097-.212-.35-.144-.636-.417-.86-.818l-.082.041.33-2.018c-.055.337-.024.647.092.932.12.285.32.513.598.685.281.171.634.257 1.06.257a2.54 2.54 0 002.075-1.03c.226-.308.369-.645.427-1.008a1.929 1.929 0 00-.072-.973 1.524 1.524 0 00-.536-.752c-.25-.196-.57-.293-.957-.293H7.825L8 6.395zm1.359-4.591c.49 0 .913.079 1.266.237a2.258 2.258 0 011.303 1.528c.082.33.094.668.036 1.014-.069.433-.25.864-.54 1.293-.29.425-.684.78-1.185 1.065-.497.282-1.096.422-1.796.422h-.597l.175-1.05h.576a2.182 2.182 0 001.812-.89c.192-.265.312-.544.36-.84.08-.473-.036-.866-.344-1.178-.31-.313-.726-.469-1.251-.469-.35 0-.683.072-.999.216a2.256 2.256 0 00-.793.603 1.852 1.852 0 00-.412.89l-1.78 10.81H3.973l1.782-10.81a3.17 3.17 0 01.648-1.457c.34-.429.765-.767 1.277-1.014a3.827 3.827 0 011.678-.37z"
+  }));
+};
+
+export var icon = EuiIconBeta;

package/optimize/es/components/icon/assets/launch.js

@@ -0,0 +1,41 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconLaunch = function EuiIconLaunch(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M11 6a1 1 0 11-2 0 1 1 0 012 0z"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M10.355 1.791A3.5 3.5 0 0112.57 1H14a1 1 0 011 1v1.43a3.5 3.5 0 01-.791 2.215l-3.144 3.843a2.5 2.5 0 00-.565 1.583v1.636l-1.646 1.647a.5.5 0 01-.557.103l-.634-.282a11.5 11.5 0 01-5.838-5.838l-.282-.634a.5.5 0 01.103-.557L3.293 5.5h1.636a2.5 2.5 0 001.583-.565l3.843-3.144zM12.57 2a2.5 2.5 0 00-1.583.565L7.145 5.71a3.5 3.5 0 01-2.215.79H3.707l-1.11 1.11.142.32a10.498 10.498 0 001.825 2.799l2.082-2.083a.5.5 0 11.708.708L5.27 11.436a10.496 10.496 0 002.798 1.825l.32.143L9.5 12.293V11.07a3.5 3.5 0 01.791-2.216l3.144-3.843A2.5 2.5 0 0014 3.43V2h-1.43z"
+  }), ___EmotionJSX("path", {
+    d: "M1.9 10.7a.5.5 0 00-.88.163l-1 3.5A.5.5 0 000 14.5v1a.5.5 0 00.5.5h1a.502.502 0 00.137-.02l3.5-1a.5.5 0 00.163-.88l-1.314-.986a5.5 5.5 0 01-1.1-1.1L1.9 10.7z"
+  }));
+};
+
+export var icon = EuiIconLaunch;

package/optimize/es/components/icon/assets/spaces.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+
+/*
+ * 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.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+
+var EuiIconSpaces = function EuiIconSpaces(_ref) {
+  var title = _ref.title,
+      titleId = _ref.titleId,
+      props = _objectWithoutProperties(_ref, _excluded);
+
+  return ___EmotionJSX("svg", _extends({
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    clipRule: "evenodd",
+    d: "M6 3H3v3h3V3zM3 2a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V3a1 1 0 00-1-1H3zm3 8H3v3h3v-3zM3 9a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-3a1 1 0 00-1-1H3zm10-6h-3v3h3V3zm-3-1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1V3a1 1 0 00-1-1h-3zm3 8h-3v3h3v-3zm-3-1a1 1 0 00-1 1v3a1 1 0 001 1h3a1 1 0 001-1v-3a1 1 0 00-1-1h-3z"
+  }));
+};
+
+export var icon = EuiIconSpaces;

package/optimize/es/components/icon/icon_map.js

@@ -29,6 +29,7 @@ export var typeToPathMap = {
   beaker: 'beaker',
   bell: 'bell',
   bellSlash: 'bellSlash',
+  beta: 'beta',
   bolt: 'bolt',
   boxesHorizontal: 'boxes_horizontal',
   boxesVertical: 'boxes_vertical',
@@ -184,6 +185,7 @@ export var typeToPathMap = {
   kqlValue: 'kql_value',
   kubernetesNode: 'kubernetesNode',
   kubernetesPod: 'kubernetesPod',
+  launch: 'launch',
   layers: 'layers',
   lensApp: 'app_lens',
   lettering: 'lettering',
@@ -336,6 +338,7 @@ export var typeToPathMap = {
   sortRight: 'sortRight',
   sortUp: 'sort_up',
   sortable: 'sortable',
+  spaces: 'spaces',
   spacesApp: 'app_spaces',
   sqlApp: 'app_sql',
   starEmpty: 'star_empty',

package/optimize/es/components/list_group/list_group.js

@@ -17,13 +17,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 import React from 'react';
 import classNames from 'classnames';
 import { EuiListGroupItem } from './list_group_item';
+import { useEuiTheme } from '../../services';
+import { cloneElementWithCss } from '../../services/theme/clone_element';
+import { logicalStyle } from '../../global_styling';
+import { euiListGroupStyles } from './list_group.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var gutterSizeToClassNameMap = {
-  none: '',
-  s: 'euiListGroup--gutterSmall',
-  m: 'euiListGroup--gutterMedium'
-};
-export var GUTTER_SIZES = Object.keys(gutterSizeToClassNameMap);
+export var GUTTER_SIZES = ['none', 's', 'm'];
 export var EuiListGroup = function EuiListGroup(_ref) {
   var children = _ref.children,
       className = _ref.className,
@@ -46,29 +45,16 @@ export var EuiListGroup = function EuiListGroup(_ref) {
       ariaLabelledby = _ref.ariaLabelledby,
       rest = _objectWithoutProperties(_ref, _excluded);
 
-  var newStyle;
-  var widthClassName;
+  var newStyle = style;
 
-  if (maxWidth !== true) {
-    var value;
-
-    if (typeof maxWidth === 'number') {
-      value = "".concat(maxWidth, "px");
-    } else {
-      value = typeof maxWidth === 'string' ? maxWidth : undefined;
-    }
-
-    newStyle = _objectSpread(_objectSpread({}, style), {}, {
-      maxWidth: value
-    });
-  } else if (maxWidth === true) {
-    widthClassName = 'euiListGroup-maxWidthDefault';
+  if (maxWidth && maxWidth !== true) {
+    newStyle = _objectSpread(_objectSpread({}, newStyle), logicalStyle('max-width', maxWidth));
   }
 
-  var classes = classNames('euiListGroup', {
-    'euiListGroup-flush': flush,
-    'euiListGroup-bordered': bordered
-  }, gutterSizeToClassNameMap[gutterSize], widthClassName, className);
+  var classes = classNames('euiListGroup', className);
+  var euiTheme = useEuiTheme();
+  var styles = euiListGroupStyles(euiTheme);
+  var cssStyles = [styles.euiListGroup, styles[gutterSize], flush && styles.flush, bordered && styles.bordered, maxWidth === true && styles.maxWidthDefault];
   var childrenOrListItems = null;
 
   if (listItems) {
@@ -76,28 +62,33 @@ export var EuiListGroup = function EuiListGroup(_ref) {
       return [___EmotionJSX(EuiListGroupItem, _extends({
         key: "title-".concat(index),
         showToolTip: showToolTips,
-        wrapText: wrapText,
+        wrapText: wrapText // we're passing the parent `color` and `size` down to the children
+        // so that they can inherit it if they don't have one
+        ,
         color: color,
         size: size
       }, item))];
     });
   } else {
-    if (showToolTips) {
-      childrenOrListItems = React.Children.map(children, function (child) {
-        if ( /*#__PURE__*/React.isValidElement(child)) {
-          return /*#__PURE__*/React.cloneElement(child, {
-            showToolTip: true
-          });
-        }
-      });
-    } else {
-      childrenOrListItems = children;
-    }
+    var showToolTipObj = showToolTips && {
+      showToolTip: true
+    };
+    childrenOrListItems = React.Children.map(children, function (child) {
+      if ( /*#__PURE__*/React.isValidElement(child)) {
+        return cloneElementWithCss(child, _objectSpread(_objectSpread({
+          // we're passing the parent `color` and `size` down to the children
+          // so that they can inherit it if they don't have one
+          color: color,
+          size: size
+        }, showToolTipObj), child.props));
+      }
+    });
   }
 
   return ___EmotionJSX("ul", _extends({
     className: classes,
-    style: newStyle || style,
+    css: cssStyles,
+    style: newStyle,
     "aria-labelledby": ariaLabelledby
   }, rest), childrenOrListItems);
 };

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

@@ -0,0 +1,47 @@
+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 { logicalCSS } from '../../global_styling';
+import { euiFormVariables } from '../form/form.styles';
+
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1urrzow-flush",
+  styles: "padding:0;border:none;.euiListGroupItem{border-radius:0;};label:flush;"
+} : {
+  name: "1urrzow-flush",
+  styles: "padding:0;border:none;.euiListGroupItem{border-radius:0;};label:flush;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "2tmo78-euiListGroup",
+  styles: "display:flex;flex-direction:column;label:euiListGroup;"
+} : {
+  name: "2tmo78-euiListGroup",
+  styles: "display:flex;flex-direction:column;label:euiListGroup;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
+export var euiListGroupStyles = function euiListGroupStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var form = euiFormVariables(euiThemeContext);
+  return {
+    // Base
+    euiListGroup: _ref2,
+    // Variants
+    flush: _ref,
+    bordered: /*#__PURE__*/css("border-radius:", euiTheme.border.radius.medium, ";border:", euiTheme.border.thin, ";;label:bordered;"),
+    maxWidthDefault: /*#__PURE__*/css(logicalCSS('max-width', form.maxWidth), ";;label:maxWidthDefault;"),
+    // Gutter sizes
+    none: /*#__PURE__*/css(";label:none;"),
+    s: /*#__PURE__*/css("padding:", euiTheme.size.s, ";gap:", euiTheme.size.s, ";;label:s;"),
+    m: /*#__PURE__*/css("padding:", euiTheme.size.base, ";gap:", euiTheme.size.base, ";;label:m;")
+  };
+};