@elastic/eui 95.1.0 → 95.3.0

package/optimize/es/components/color_picker/color_picker_swatch.js

@@ -14,8 +14,10 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 
 import React, { forwardRef, useMemo } from 'react';
 import classNames from 'classnames';
-import { getChromaColor } from './utils';
+import { useEuiMemoizedStyles } from '../../services';
 import { useEuiI18n } from '../i18n';
+import { getChromaColor } from './utils';
+import { euiColorPickerSwatchStyles } from './color_picker_swatch.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiColorPickerSwatch = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var className = _ref.className,
@@ -23,6 +25,7 @@ export var EuiColorPickerSwatch = /*#__PURE__*/forwardRef(function (_ref, ref) {
     style = _ref.style,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiColorPickerSwatch', className);
+  var styles = useEuiMemoizedStyles(euiColorPickerSwatchStyles);
   var chromaColor = useMemo(function () {
     return getChromaColor(color, true);
   }, [color]);
@@ -34,6 +37,7 @@ export var EuiColorPickerSwatch = /*#__PURE__*/forwardRef(function (_ref, ref) {
   });
   return ___EmotionJSX("button", _extends({
     type: "button",
+    css: styles.euiColorPickerSwatch,
     className: classes,
     "aria-label": ariaLabel,
     ref: ref,

package/optimize/es/components/color_picker/color_picker_swatch.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';
+import { transparentize } from '../../services';
+import { logicalSizeCSS, mathWithUnits, euiOutline } from '../../global_styling';
+export var euiColorPickerSwatchStyles = function euiColorPickerSwatchStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiColorPickerSwatch: /*#__PURE__*/css("display:inline-block;", logicalSizeCSS(euiTheme.size.l), " border-radius:", mathWithUnits(euiTheme.border.radius.medium, function (x) {
+      return x / 2;
+    }), ";border:", euiTheme.border.width.thin, " solid ", transparentize(euiTheme.colors.fullShade, 0.1), ";box-shadow:inset 0 0 0 ", euiTheme.border.width.thin, " ", transparentize(euiTheme.colors.emptyShade, 0.05), ";cursor:pointer;&:disabled{cursor:default;}&:focus{", euiOutline(euiThemeContext, 'center'), ";};label:euiColorPickerSwatch;")
+  };
+};

package/optimize/es/components/color_picker/hue.js

@@ -11,8 +11,10 @@ var _excluded = ["className", "hex", "hue", "id", "onChange"];
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { EuiI18n } from '../i18n';
+import { euiHueStyles } from './hue.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var HUE_RANGE = 359;
 export var EuiHue = function EuiHue(_ref) {
@@ -23,27 +25,30 @@ export var EuiHue = function EuiHue(_ref) {
     id = _ref.id,
     onChange = _ref.onChange,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiHue', className);
+  var styles = useEuiMemoizedStyles(euiHueStyles);
   var handleChange = function handleChange(e) {
     onChange(Number(e.target.value));
   };
-  var classes = classNames('euiHue', className);
-  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("label", {
+  return ___EmotionJSX("div", {
+    css: styles.euiHue,
+    className: classes
+  }, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("label", {
     htmlFor: "".concat(id, "-hue")
   }, ___EmotionJSX(EuiI18n, {
     token: "euiHue.label",
     default: "Select the HSV color mode 'hue' value"
   }))), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("p", {
     "aria-live": "polite"
-  }, hex)), ___EmotionJSX("div", {
-    className: classes
-  }, ___EmotionJSX("input", _extends({
+  }, hex)), ___EmotionJSX("input", _extends({
     id: "".concat(id, "-hue"),
     min: 0,
     max: HUE_RANGE,
     step: 1,
     type: "range",
+    css: styles.euiHue__range,
     className: "euiHue__range",
     value: hue,
     onChange: handleChange
-  }, rest))));
+  }, rest)));
 };

package/optimize/es/components/color_picker/hue.styles.js

@@ -0,0 +1,29 @@
+/*
+ * 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 { transparentize } from '../../services';
+import { logicalCSS, mathWithUnits } from '../../global_styling';
+import { euiRangeThumbPerBrowser, euiRangeThumbStyle, euiRangeThumbFocusBoxShadow } from '../form/range/range.styles';
+export var euiHueStyles = function euiHueStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var height = euiTheme.size.m;
+  var thumbSize = euiTheme.size.l;
+  var thumbBorder = mathWithUnits(euiTheme.border.width.thick, function (x) {
+    return x * 1.5;
+  });
+  var thumbBoxShadow = "\n    0 2px 2px -1px ".concat(transparentize(euiTheme.colors.shadow, 0.2), ",\n    0 1px 5px -2px ").concat(transparentize(euiTheme.colors.shadow, 0.2));
+  return {
+    // This wraps the range and sets a rainbow gradient,
+    // which allows the range thumb to be larger than the visible track
+    euiHue: /*#__PURE__*/css(logicalCSS('height', height), " border-radius:", height, ";background:linear-gradient(\n        to right,\n        #ff3232 0%,\n        #fff130 20%,\n        #45ff30 35%,\n        #28fff0 52%,\n        #282cff 71%,\n        #ff28fb 88%,\n        #ff0094 100%\n      );;label:euiHue;"),
+    euiHue__range: /*#__PURE__*/css(logicalCSS('height', thumbSize), logicalCSS('width', "calc(100% + 2px)"), logicalCSS('margin-horizontal', '-1px'), " ", logicalCSS('margin-top', mathWithUnits(height, function (x) {
+      return x / -2;
+    })), "appearance:none;background:transparent;&::-webkit-slider-thumb{-webkit-appearance:none;}", euiRangeThumbPerBrowser([euiRangeThumbStyle(euiThemeContext), 'background-color: inherit', "border-width: ".concat(thumbBorder), 'border-radius: 100%', "box-shadow: ".concat(thumbBoxShadow)].join(';\n')), "&:focus{outline:none;}&:focus-visible{", euiRangeThumbPerBrowser(euiRangeThumbFocusBoxShadow(euiThemeContext)), ";};label:euiHue__range;")
+  };
+};

package/optimize/es/components/color_picker/saturation.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "color", "data-test-subj", "hex", "id", "onChange"];
+var _excluded = ["className", "color", "data-test-subj", "hex", "id", "onChange", "onKeyDown"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /*
@@ -13,12 +13,14 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import React, { forwardRef, useEffect, useRef, useState } from 'react';
+import React, { forwardRef, useEffect, useRef, useState, useCallback } from 'react';
 import classNames from 'classnames';
-import { keys, useMouseMove } from '../../services';
+import { keys, useMouseMove, useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
 import { isNil } from '../../services/predicate';
+import { logicalStyles } from '../../global_styling';
 import { useEuiI18n } from '../i18n';
 import { getEventPosition } from './utils';
+import { euiSaturationStyles } from './saturation.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var colorDefaultValue = [1, 0, 0];
 export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
@@ -28,9 +30,17 @@ export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _ref$dataTestSubj = _ref['data-test-subj'],
     dataTestSubj = _ref$dataTestSubj === void 0 ? 'euiSaturation' : _ref$dataTestSubj,
     hex = _ref.hex,
-    id = _ref.id,
+    _id = _ref.id,
     onChange = _ref.onChange,
+    onKeyDown = _ref.onKeyDown,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var classes = classNames('euiSaturation', className);
+  var styles = useEuiMemoizedStyles(euiSaturationStyles);
+  var id = useGeneratedHtmlId({
+    conditionalId: _id
+  });
+  var instructionsId = "".concat(id, "-instructions");
+  var indicatorId = "".concat(id, "-saturationIndicator");
   var _useEuiI18n = useEuiI18n(['euiSaturation.ariaLabel', 'euiSaturation.screenReaderInstructions'], ['HSV color mode saturation and value 2-axis slider', "Arrow keys to navigate the square color gradient. Coordinates will be used to calculate HSV color mode 'saturation' and 'value' numbers, in the range of 0 to 1. Left and right to change the saturation. Up and down change the value."]),
     _useEuiI18n2 = _slicedToArray(_useEuiI18n, 2),
     roleDescString = _useEuiI18n2[0],
@@ -62,7 +72,7 @@ export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
       });
     }
   }, [color, lastColor]);
-  var calculateColor = function calculateColor(_ref2) {
+  var calculateColor = useCallback(function (_ref2) {
     var top = _ref2.top,
       height = _ref2.height,
       left = _ref2.left,
@@ -72,8 +82,8 @@ export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var s = left / width;
     var v = 1 - top / height;
     return [h, s, v];
-  };
-  var handleUpdate = function handleUpdate(box) {
+  }, [color]);
+  var handleUpdate = useCallback(function (box) {
     var left = box.left,
       top = box.top;
     setIndicator({
@@ -83,17 +93,18 @@ export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
     var newColor = calculateColor(box);
     setLastColor(newColor);
     onChange(newColor);
-  };
-  var handleChange = function handleChange(location) {
+  }, [calculateColor, onChange]);
+  var handleChange = useCallback(function (location) {
     if (isNil(boxRef === null || boxRef === void 0 ? void 0 : boxRef.current)) return;
     var box = getEventPosition(location, boxRef.current);
     handleUpdate(box);
-  };
+  }, [handleUpdate]);
   var _useMouseMove = useMouseMove(handleChange, boxRef.current),
     _useMouseMove2 = _slicedToArray(_useMouseMove, 2),
     handleMouseDown = _useMouseMove2[0],
     handleInteraction = _useMouseMove2[1];
-  var handleKeyDown = function handleKeyDown(event) {
+  var handleKeyDown = useCallback(function (event) {
+    onKeyDown === null || onKeyDown === void 0 || onKeyDown(event);
     if (isNil(boxRef === null || boxRef === void 0 ? void 0 : boxRef.current)) return;
     var _boxRef$current$getBo2 = boxRef.current.getBoundingClientRect(),
       height = _boxRef$current$getBo2.height,
@@ -134,15 +145,14 @@ export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
       height: height
     }, newPosition));
     onChange(newColor);
-  };
-  var classes = classNames('euiSaturation', className);
-  var instructionsId = "".concat(id, "-instructions");
+  }, [calculateColor, indicator, onChange, onKeyDown]);
   return ___EmotionJSX("div", _extends({
     onMouseDown: handleMouseDown,
     onTouchStart: handleInteraction,
     onTouchMove: handleInteraction,
     onKeyDown: handleKeyDown,
     ref: ref,
+    css: styles.euiSaturation,
     className: classes,
     "data-test-subj": dataTestSubj,
     style: {
@@ -150,14 +160,17 @@ export var EuiSaturation = /*#__PURE__*/forwardRef(function (_ref, ref) {
     },
     tabIndex: -1
   }, rest), ___EmotionJSX("div", {
+    css: styles.euiSaturation__lightness,
     className: "euiSaturation__lightness",
     ref: boxRef
   }, ___EmotionJSX("div", {
+    css: styles.euiSaturation__saturation,
     className: "euiSaturation__saturation"
   })), ___EmotionJSX("button", {
-    id: "".concat(id, "-saturationIndicator"),
+    id: indicatorId,
+    css: styles.euiSaturation__indicator,
     className: "euiSaturation__indicator",
-    style: _objectSpread({}, indicator),
+    style: logicalStyles(indicator),
     "aria-roledescription": roleDescString,
     "aria-label": hex,
     "aria-describedby": instructionsId

package/optimize/es/components/color_picker/saturation.styles.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS, mathWithUnits } from '../../global_styling';
+export var euiSaturationStyles = function euiSaturationStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var indicatorSize = euiTheme.size.m;
+  var borderRadius = mathWithUnits(euiTheme.border.radius.medium, function (x) {
+    return x / 2;
+  });
+  return {
+    euiSaturation: /*#__PURE__*/css("z-index:3;position:relative;", logicalCSS('width', '100%'), " ", logicalCSS('padding-bottom', '100%'), " border-radius:", borderRadius, ";touch-action:none;&:focus,&:focus-within{outline:none;.euiSaturation__indicator{outline:none;box-shadow:0 0 0 ", euiTheme.focus.width, " ", euiTheme.colors.primary, ";border-color:", euiTheme.colors.primary, ";}};label:euiSaturation;"),
+    euiSaturation__lightness: /*#__PURE__*/css("position:absolute;inset:0;", logicalCSS('top', '-1px'), "border-radius:", borderRadius, ";background:linear-gradient(\n        to right,\n        rgba(255, 255, 255, 1),\n        rgba(255, 255, 255, 0)\n      );;label:euiSaturation__lightness;"),
+    euiSaturation__saturation: /*#__PURE__*/css("position:absolute;inset:0;", logicalCSS('top', '-1px'), "border-radius:", borderRadius, ";background:linear-gradient(to top, rgba(0, 0, 0, 1), rgba(0, 0, 0, 0));;label:euiSaturation__saturation;"),
+    euiSaturation__indicator: /*#__PURE__*/css("position:absolute;", logicalSizeCSS(indicatorSize), " transform:translateX(-50%) translateY(-50%);border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.darkestShade, ";border-radius:100%;&::before{content:'';position:absolute;inset:0;border-radius:100%;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.lightestShade, ";};label:euiSaturation__indicator;")
+  };
+};

package/optimize/es/components/combo_box/combo_box_input/combo_box_input.js

@@ -285,7 +285,8 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
         },
         placeholder: showPlaceholder ? placeholder : undefined,
         value: this.searchValue,
-        autoFocus: autoFocus
+        autoFocus: autoFocus,
+        autoComplete: "off"
         // Force the menu to re-open on every input click - only necessary when plain text
         ,
         onClick: this.asPlainText ? onFocus : undefined // Type shenanigans - event should be mostly the same

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

@@ -1,4 +1,5 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 import _createClass from "@babel/runtime/helpers/createClass";
@@ -6,7 +7,7 @@ import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstruct
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _inherits from "@babel/runtime/helpers/inherits";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display"];
+var _excluded = ["stylesMemoizer", "id", "name", "initialPromptText", "className", "disabled", "compressed", "onChange", "isInvalid", "fullWidth", "isLoading", "display"];
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 /*
@@ -19,29 +20,25 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { keysOf } from '../../common';
-import { EuiValidatableControl } from '../validatable_control';
+import { withEuiStylesMemoizer, htmlIdGenerator } from '../../../services';
 import { EuiButtonEmpty } from '../../button';
 import { EuiProgress } from '../../progress';
 import { EuiIcon } from '../../icon';
 import { EuiI18n } from '../../i18n';
 import { EuiLoadingSpinner } from '../../loading';
-import { htmlIdGenerator } from '../../../services/accessibility';
 import { FormContext } from '../eui_form_context';
+import { EuiValidatableControl } from '../validatable_control';
+import { EuiFormControlLayoutClearButton } from '../form_control_layout/form_control_layout_clear_button';
+import { euiFilePickerStyles } from './file_picker.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var displayToClassNameMap = {
-  default: null,
-  large: 'euiFilePicker--large'
-};
-export var DISPLAYS = keysOf(displayToClassNameMap);
-export var EuiFilePicker = /*#__PURE__*/function (_Component) {
-  function EuiFilePicker() {
+export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
+  function EuiFilePickerClass() {
     var _this;
-    _classCallCheck(this, EuiFilePicker);
+    _classCallCheck(this, EuiFilePickerClass);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
-    _this = _callSuper(this, EuiFilePicker, [].concat(args));
+    _this = _callSuper(this, EuiFilePickerClass, [].concat(args));
     _defineProperty(_this, "state", {
       promptText: null,
       isHoveringDrop: false
@@ -97,18 +94,19 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _inherits(EuiFilePicker, _Component);
-  return _createClass(EuiFilePicker, [{
+  _inherits(EuiFilePickerClass, _Component);
+  return _createClass(EuiFilePickerClass, [{
     key: "render",
     value: function render() {
       var _this2 = this;
       var _ref = this.context,
         defaultFullWidth = _ref.defaultFullWidth;
       return ___EmotionJSX(EuiI18n, {
-        token: "euiFilePicker.clearSelectedFiles",
-        default: "Clear selected files"
-      }, function (clearSelectedFiles) {
+        token: "euiFilePicker.removeSelectedAriaLabel",
+        default: "Remove selected files"
+      }, function (removeSelectedAriaLabel) {
         var _this2$props = _this2.props,
+          stylesMemoizer = _this2$props.stylesMemoizer,
           id = _this2$props.id,
           name = _this2$props.name,
           initialPromptText = _this2$props.initialPromptText,
@@ -125,34 +123,39 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
         var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
         var isOverridingInitialPrompt = _this2.state.promptText != null;
         var normalFormControl = display === 'default';
-        var classes = classNames('euiFilePicker', displayToClassNameMap[display], {
-          euiFilePicker__showDrop: _this2.state.isHoveringDrop,
-          'euiFilePicker--compressed': compressed,
-          'euiFilePicker--fullWidth': fullWidth,
+        var classes = classNames('euiFilePicker', {
+          'euiFilePicker-isDroppingFile': _this2.state.isHoveringDrop,
           'euiFilePicker-isInvalid': isInvalid,
           'euiFilePicker-isLoading': isLoading,
           'euiFilePicker-hasFiles': isOverridingInitialPrompt
         }, className);
+        var styles = stylesMemoizer(euiFilePickerStyles);
+        var cssStyles = [styles.euiFilePicker, fullWidth ? styles.fullWidth : styles.formWidth, _this2.state.isHoveringDrop && styles.isDroppingFile, isInvalid && !disabled && styles.invalid, isOverridingInitialPrompt && !disabled && styles.hasFiles, isLoading && styles.loading];
+        var inputStyles = [styles.input.euiFilePicker__input, !normalFormControl && !disabled && styles.input.largeInteractive];
+        var promptStyles = [styles.euiFilePicker__prompt, disabled && styles.disabled].concat(_toConsumableArray(normalFormControl ? [compressed ? styles.compressed : styles.uncompressed] : [styles.large.large, compressed ? styles.large.compressed : styles.large.uncompressed]));
+        var iconStyles = [styles.icon.euiFilePicker__icon].concat(_toConsumableArray(normalFormControl ? [styles.icon.normal, compressed ? styles.icon.compresssed : styles.icon.uncompressed] : [styles.icon.large]));
+        var rightIconStyles = normalFormControl ? [styles.rightIcon.euiFilePicker__rightIcon, compressed ? styles.rightIcon.compressed : styles.rightIcon.uncompressed] : undefined;
         var clearButton;
         if (isLoading && normalFormControl) {
           // Override clear button with loading spinner if it is in loading state
           clearButton = ___EmotionJSX(EuiLoadingSpinner, {
-            className: "euiFilePicker__loadingSpinner"
+            css: rightIconStyles,
+            className: "euiFilePicker__loadingSpinner",
+            size: compressed ? 's' : 'm'
           });
         } else if (isOverridingInitialPrompt && !disabled) {
           if (normalFormControl) {
-            clearButton = ___EmotionJSX("button", {
-              type: "button",
-              "aria-label": clearSelectedFiles,
+            clearButton = ___EmotionJSX(EuiFormControlLayoutClearButton, {
+              "aria-label": removeSelectedAriaLabel,
+              css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
               className: "euiFilePicker__clearButton",
-              onClick: _this2.removeFiles
-            }, ___EmotionJSX(EuiIcon, {
-              className: "euiFilePicker__clearIcon",
-              type: "cross"
-            }));
+              onClick: _this2.removeFiles,
+              size: compressed ? 's' : 'm'
+            });
           } else {
             clearButton = ___EmotionJSX(EuiButtonEmpty, {
-              "aria-label": clearSelectedFiles,
+              "aria-label": removeSelectedAriaLabel,
+              css: styles.euiFilePicker__clearButton,
               className: "euiFilePicker__clearButton",
               size: "xs",
               onClick: _this2.removeFiles
@@ -170,15 +173,15 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
           position: "absolute"
         });
         return ___EmotionJSX("div", {
+          css: cssStyles,
           className: classes
-        }, ___EmotionJSX("div", {
-          className: "euiFilePicker__wrap"
         }, ___EmotionJSX(EuiValidatableControl, {
           isInvalid: isInvalid
         }, ___EmotionJSX("input", _extends({
           type: "file",
           id: id,
           name: name,
+          css: inputStyles,
           className: "euiFilePicker__input",
           onChange: _this2.handleChange,
           ref: function ref(input) {
@@ -190,27 +193,30 @@ export var EuiFilePicker = /*#__PURE__*/function (_Component) {
           disabled: disabled,
           "aria-describedby": promptId
         }, rest))), ___EmotionJSX("div", {
+          css: promptStyles,
           className: "euiFilePicker__prompt",
           id: promptId
         }, ___EmotionJSX(EuiIcon, {
+          css: iconStyles,
           className: "euiFilePicker__icon",
           color: isInvalid ? 'danger' : disabled ? 'subdued' : 'primary',
           type: isInvalid ? 'alert' : 'importAction',
           size: normalFormControl ? 'm' : 'l',
           "aria-hidden": "true"
-        }), ___EmotionJSX("div", {
+        }), ___EmotionJSX("span", {
           className: "euiFilePicker__promptText"
-        }, _this2.state.promptText || initialPromptText), clearButton, loader)));
+        }, _this2.state.promptText || initialPromptText), clearButton, loader));
       });
     }
   }]);
 }(Component);
-_defineProperty(EuiFilePicker, "contextType", FormContext);
-_defineProperty(EuiFilePicker, "defaultProps", {
+_defineProperty(EuiFilePickerClass, "contextType", FormContext);
+_defineProperty(EuiFilePickerClass, "defaultProps", {
   initialPromptText: ___EmotionJSX(EuiI18n, {
     token: "euiFilePicker.promptText",
     default: "Select or drag and drop a file"
   }),
   compressed: false,
   display: 'large'
-});
+});
+export var EuiFilePicker = withEuiStylesMemoizer(EuiFilePickerClass);

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

@@ -0,0 +1,98 @@
+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 { euiCanAnimate, euiFontSize, euiTextTruncate, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiFormControlStyles, euiFormVariables } from '../form.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "6h1iuq-euiFilePicker__clearButton",
+  styles: "pointer-events:auto;position:relative;label:euiFilePicker__clearButton;"
+} : {
+  name: "6h1iuq-euiFilePicker__clearButton",
+  styles: "pointer-events:auto;position:relative;label:euiFilePicker__clearButton;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "d8me89-euiFilePicker__rightIcon",
+  styles: "position:absolute;label:euiFilePicker__rightIcon;"
+} : {
+  name: "d8me89-euiFilePicker__rightIcon",
+  styles: "position:absolute;label:euiFilePicker__rightIcon;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "19x04ih-largeInteractive",
+  styles: "&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:underline;}.euiFilePicker__icon{transform:scale(1.1);}}};label:largeInteractive;"
+} : {
+  name: "19x04ih-largeInteractive",
+  styles: "&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:underline;}.euiFilePicker__icon{transform:scale(1.1);}}};label:largeInteractive;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref4 = process.env.NODE_ENV === "production" ? {
+  name: "1j9s7hu-euiFilePicker__input",
+  styles: "position:absolute;inset:0;opacity:0;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;}&:disabled{opacity:0;};label:euiFilePicker__input;"
+} : {
+  name: "1j9s7hu-euiFilePicker__input",
+  styles: "position:absolute;inset:0;opacity:0;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;}&:disabled{opacity:0;};label:euiFilePicker__input;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var formStyles = euiFormControlStyles(euiThemeContext);
+  var formVariables = euiFormVariables(euiThemeContext);
+  var _euiFontSize = euiFontSize(euiThemeContext, 's'),
+    fontSize = _euiFontSize.fontSize,
+    lineHeight = _euiFontSize.lineHeight;
+  return {
+    euiFilePicker: /*#__PURE__*/css("--euiFormControlLeftIconsCount:1;position:relative;&:has(input:focus){--euiFormControlStateColor:", euiTheme.colors.primary, ";};label:euiFilePicker;"),
+    isDroppingFile: /*#__PURE__*/css("--euiFormControlStateColor:", euiTheme.colors.primary, ";;label:isDroppingFile;"),
+    invalid: /*#__PURE__*/css("--euiFormControlStateColor:", euiTheme.colors.danger, ";;label:invalid;"),
+    hasFiles: /*#__PURE__*/css("--euiFormControlRightIconsCount:1;font-weight:", euiTheme.font.weight.bold, ";;label:hasFiles;"),
+    loading: /*#__PURE__*/css("--euiFormControlRightIconsCount:1;border-radius:", formVariables.controlCompressedBorderRadius, ";overflow:hidden;;label:loading;"),
+    // Skip the css() on the default width to avoid generating a className
+    formWidth: formStyles.formWidth,
+    fullWidth: /*#__PURE__*/css(formStyles.fullWidth, ";label:fullWidth;"),
+    // The input is an invisible dropzone / button
+    input: {
+      euiFilePicker__input: _ref4,
+      largeInteractive: _ref3
+    },
+    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.text, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.colors.lightShade, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
+    disabled: /*#__PURE__*/css(formStyles.disabled, ";label:disabled;"),
+    // Skip the css() on the default height to avoid generating a className
+    uncompressed: formStyles.uncompressed,
+    compressed: /*#__PURE__*/css(formStyles.compressed, ";label:compressed;"),
+    // Completely different rendering style from the normal form controls
+    large: {
+      large: /*#__PURE__*/css("padding-inline:", euiTheme.size.l, ";display:flex;flex-direction:column;align-items:center;justify-content:center;.euiFilePicker__promptText{", euiTextTruncate(), " line-height:", lineHeight, ";};label:large;"),
+      // Static heights so that surrounding contents don't shift around
+      uncompressed: "\n        ".concat(logicalCSS('height', mathWithUnits(euiTheme.size.base, function (x) {
+        return x * 8;
+      })), "\n        border-radius: ").concat(formVariables.controlBorderRadius, ";\n      "),
+      compressed: /*#__PURE__*/css(logicalCSS('height', mathWithUnits(euiTheme.size.base, function (x) {
+        return x * 6.5;
+      })), " border-radius:", formVariables.controlCompressedBorderRadius, ";;label:compressed;")
+    },
+    icon: {
+      euiFilePicker__icon: /*#__PURE__*/css(";label:euiFilePicker__icon;"),
+      normal: /*#__PURE__*/css("position:absolute;", logicalCSS('top', 0), " ", logicalCSS('height', '100%'), ";;label:normal;"),
+      uncompressed: "\n        ".concat(logicalCSS('left', euiTheme.size.m), "\n      "),
+      compresssed: /*#__PURE__*/css(logicalCSS('left', euiTheme.size.s), " ", logicalCSS('width', euiTheme.size.m), ";;label:compresssed;"),
+      large: /*#__PURE__*/css(logicalCSS('margin-bottom', euiTheme.size.base), " ", euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ", euiTheme.animation.resistance, ";};label:large;")
+    },
+    rightIcon: {
+      euiFilePicker__rightIcon: _ref2,
+      uncompressed: "\n        ".concat(logicalCSS('top', euiTheme.size.m), "\n        ").concat(logicalCSS('right', euiTheme.size.m), "\n      "),
+      compressed: /*#__PURE__*/css(logicalCSS('right', euiTheme.size.s), " ", logicalCSS('top', '50%'), " ", logicalCSS('margin-top', mathWithUnits(euiTheme.size.m, function (x) {
+        return x / -2;
+      })), ";;label:compressed;")
+    },
+    euiFilePicker__clearButton: _ref
+  };
+};

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

@@ -82,7 +82,7 @@ export var euiRangeThumbStyle = function euiRangeThumbStyle(euiThemeContext) {
   return "\n    ".concat(euiRangeThumbBoxShadow(euiThemeContext), ";\n    ").concat(euiRangeThumbBorder(euiThemeContext), ";\n    cursor: pointer;\n    background-color: ").concat(range.thumbBackgroundColor, ";\n    padding: 0;\n    block-size: ").concat(range.thumbHeight, ";\n    inline-size: ").concat(range.thumbWidth, ";\n    box-sizing: border-box;  // required for firefox or the border makes the width and height to increase\n  ");
 };
 export var euiRangeThumbPerBrowser = function euiRangeThumbPerBrowser(content) {
-  return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb  { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");
+  return "\n    &::-webkit-slider-thumb { ".concat(content, "; }\n    &::-moz-range-thumb { ").concat(content, "; }\n    &::-ms-thumb {").concat(content, "; }\n  ");
 };
 export var euiRangeThumbFocus = function euiRangeThumbFocus(euiThemeContext, color) {
   var range = euiRangeVariables(euiThemeContext);

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

@@ -21,21 +21,23 @@ var EuiIconAppCases = function EuiIconAppCases(_ref) {
     xmlns: "http://www.w3.org/2000/svg",
     width: 32,
     height: 32,
-    fill: "none",
     viewBox: "0 0 32 32",
     "aria-labelledby": titleId
   }, props), title ? ___EmotionJSX("title", {
     id: titleId
   }, title) : null, ___EmotionJSX("path", {
-    fillRule: "evenodd",
-    d: "M22.5 24a5.5 5.5 0 1 0 0-11 5.5 5.5 0 0 0 0 11Zm0 2a7.5 7.5 0 1 0 0-15 7.5 7.5 0 0 0 0 15Z"
+    d: "M4 6h22v7h-2V8H6v19H4V6Z",
+    className: "euiIcon__fillSecondary"
+  }), ___EmotionJSX("path", {
+    d: "M10 12H7v-2h3v2Zm1 0h12v-2H11v2Z",
+    className: "euiIcon__fillSecondary"
+  }), ___EmotionJSX("path", {
+    d: "M24 1H0v26h1l-1 .001v.026a2.256 2.256 0 0 0 .01.185 4.318 4.318 0 0 0 .563 1.792C1.194 30.064 2.399 31 4.5 31H17v-2H8.429a4.32 4.32 0 0 0 .57-1.927v-.062L9 27.005v-.003S9 27 8 27h1V16h21v3h2v-5H7v12.995l-.003.05a2.32 2.32 0 0 1-.298.95C6.442 28.436 5.898 29 4.5 29c-1.398 0-1.942-.564-2.199-1.004a2.32 2.32 0 0 1-.3-1.001L2 26.992V3h20v3h2V1Z"
   }), ___EmotionJSX("path", {
-    d: "m30.293 27.707-4-4 1.414-1.414 4 4-1.414 1.414ZM6 4H2v27h25v-3h-2v1H4V6h2V4Zm19 6h2V4h-4v2h2v4Z"
+    d: "M23 21v3h-3v2h3v3h2v-3h3v-2h-3v-3h-2Z"
   }), ___EmotionJSX("path", {
     fillRule: "evenodd",
-    d: "m16.381 3.024.538 1.158h2.274l.636 2.545H9.68l.637-2.545h2.558l.538-1.158c.292-.63.955-1.024 1.484-1.024.53 0 1.193.394 1.485 1.024Zm6.01 5.703-1.636-6.545h-2.56C17.6.898 16.262 0 14.897 0c-1.364 0-2.703.898-3.299 2.182H8.755L7.118 8.727h15.273ZM7 15h6v-2H7v2Zm6 5H7v-2h6v2Zm-6 5h6v-2H7v2Z",
-    className: "euiIcon__fillSecondary",
-    clipRule: "evenodd"
+    d: "M24 32a7 7 0 1 0 0-14 7 7 0 0 0 0 14Zm0-2a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z"
   }));
 };
 export var icon = EuiIconAppCases;