@elastic/eui 105.0.0 → 106.0.0

package/lib/components/flyout/sessions/use_eui_flyout.js

@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.useEuiFlyoutSession = useEuiFlyoutSession;
+var _react = require("react");
 var _flyout_provider = require("./flyout_provider");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -27,12 +28,24 @@ var _flyout_provider = require("./flyout_provider");
 
 /**
  * Hook for accessing the flyout API
+ * @public
  */
 function useEuiFlyoutSession() {
   var _state$activeFlyoutGr, _state$activeFlyoutGr2;
   var _useEuiFlyoutSessionC = (0, _flyout_provider.useEuiFlyoutSessionContext)(),
     state = _useEuiFlyoutSessionC.state,
-    dispatch = _useEuiFlyoutSessionC.dispatch;
+    dispatch = _useEuiFlyoutSessionC.dispatch,
+    onUnmount = _useEuiFlyoutSessionC.onUnmount;
+  var isInitialMount = (0, _react.useRef)(true);
+  (0, _react.useEffect)(function () {
+    // When there is no active flyout, we should call the onUnmount callback.
+    // Ensure this is not called on the initial render, only on subsequent state changes.
+    if (isInitialMount.current) {
+      isInitialMount.current = false;
+    } else if (state.activeFlyoutGroup === null) {
+      onUnmount === null || onUnmount === void 0 || onUnmount();
+    }
+  }, [state.activeFlyoutGroup, onUnmount]);
   var openFlyout = function openFlyout(options) {
     dispatch({
       type: 'OPEN_MAIN_FLYOUT',
@@ -55,13 +68,11 @@ function useEuiFlyoutSession() {
       payload: {
         main: {
           size: options.main.size,
-          flyoutProps: options.main.flyoutProps,
-          onUnmount: options.main.onUnmount
+          flyoutProps: options.main.flyoutProps
         },
         child: {
           size: options.child.size,
-          flyoutProps: options.child.flyoutProps,
-          onUnmount: options.child.onUnmount
+          flyoutProps: options.child.flyoutProps
         },
         meta: options.meta
       }
@@ -77,23 +88,23 @@ function useEuiFlyoutSession() {
       type: 'GO_BACK'
     });
   };
-  var canGoBack = !!state.activeFlyoutGroup;
-  var isFlyoutOpen = !!((_state$activeFlyoutGr = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr !== void 0 && _state$activeFlyoutGr.isMainOpen);
-  var isChildFlyoutOpen = !!((_state$activeFlyoutGr2 = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr2 !== void 0 && _state$activeFlyoutGr2.isChildOpen);
   var clearHistory = function clearHistory() {
     dispatch({
       type: 'CLEAR_HISTORY'
     });
   };
+  var isFlyoutOpen = !!((_state$activeFlyoutGr = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr !== void 0 && _state$activeFlyoutGr.isMainOpen);
+  var isChildFlyoutOpen = !!((_state$activeFlyoutGr2 = state.activeFlyoutGroup) !== null && _state$activeFlyoutGr2 !== void 0 && _state$activeFlyoutGr2.isChildOpen);
+  var canGoBack = !!state.history.length;
   return {
     openFlyout: openFlyout,
     openChildFlyout: openChildFlyout,
     openFlyoutGroup: openFlyoutGroup,
     closeChildFlyout: closeChildFlyout,
     goBack: goBack,
-    canGoBack: canGoBack,
+    clearHistory: clearHistory,
     isFlyoutOpen: isFlyoutOpen,
     isChildFlyoutOpen: isChildFlyoutOpen,
-    clearHistory: clearHistory
+    canGoBack: canGoBack
   };
 }

package/lib/components/form/field_number/field_number.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFieldNumberStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _form = require("../form.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -16,9 +17,11 @@ var _form = require("../form.styles");
 
 var euiFieldNumberStyles = exports.euiFieldNumberStyles = function euiFieldNumberStyles(euiThemeContext) {
   var colorMode = euiThemeContext.colorMode;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
+  var invalidStyles = isRefreshVariant ? "\n      &:is(:invalid, [aria-invalid='true']):not(\n        .euiFormControlLayoutDelimited__input, :focus\n      ) {\n          ".concat(formStyles.invalid, "\n        }\n    ") : "\n      /* Account for native validity detection as well via [aria-invalid=\"true\"] */\n      &:is(:invalid, [aria-invalid='true']) {\n        ".concat(formStyles.invalid, "\n      }\n    ");
   return {
-    euiFieldNumber: /*#__PURE__*/(0, _react.css)(formStyles.shared, "color-scheme:", colorMode === 'DARK' ? 'dark' : 'light', ";&:is(:invalid, [aria-invalid='true']){", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldNumber;"),
+    euiFieldNumber: /*#__PURE__*/(0, _react.css)(formStyles.shared, "color-scheme:", colorMode === 'DARK' ? 'dark' : 'light', ";", invalidStyles, " &:focus{", formStyles.focus, ";}&:disabled{", formStyles.disabled, ";}&[readOnly]{", formStyles.readOnly, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldNumber;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, ";label:compressed;"),

package/lib/components/form/field_text/field_text.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFieldTextStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _form = require("../form.styles");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -15,9 +16,11 @@ var _form = require("../form.styles");
  */
 
 var euiFieldTextStyles = exports.euiFieldTextStyles = function euiFieldTextStyles(euiThemeContext) {
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
+  var invalidStyles = isRefreshVariant ? "\n      &:is(:invalid, [aria-invalid='true']):not(\n        .euiFormControlLayoutDelimited__input, :focus\n      ) {\n          ".concat(formStyles.invalid, "\n        }\n    ") : "\n      &:is(:invalid){\n        ".concat(formStyles.invalid, "\n      }\n    ");
   return {
-    euiFieldText: /*#__PURE__*/(0, _react.css)(formStyles.shared, " &:invalid{", formStyles.invalid, ";}&:focus{", formStyles.focus, ";}&[readOnly]{", formStyles.readOnly, ";}&:disabled{", formStyles.disabled, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldText;"),
+    euiFieldText: /*#__PURE__*/(0, _react.css)(formStyles.shared, " ", invalidStyles, " &:focus{", formStyles.focus, ";}&[readOnly]{", formStyles.readOnly, ";}&:disabled{", formStyles.disabled, ";}&:autofill{", formStyles.autoFill, ";};label:euiFieldText;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,
     compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, ";label:compressed;"),

package/lib/components/form/file_picker/file_picker.js

@@ -121,111 +121,117 @@ var EuiFilePickerClass = exports.EuiFilePickerClass = /*#__PURE__*/function (_Co
       var _this2 = this;
       var _ref = this.context,
         defaultFullWidth = _ref.defaultFullWidth;
-      return (0, _react2.jsx)(_i18n.EuiI18n, {
-        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,
-          className = _this2$props.className,
-          disabled = _this2$props.disabled,
-          compressed = _this2$props.compressed,
-          onChange = _this2$props.onChange,
-          isInvalid = _this2$props.isInvalid,
-          _this2$props$fullWidt = _this2$props.fullWidth,
-          fullWidth = _this2$props$fullWidt === void 0 ? defaultFullWidth : _this2$props$fullWidt,
-          isLoading = _this2$props.isLoading,
-          display = _this2$props.display,
-          rest = _objectWithoutProperties(_this2$props, _excluded);
-        var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
-        var isOverridingInitialPrompt = _this2.state.promptText != null;
-        var normalFormControl = display === 'default';
-        var classes = (0, _classnames.default)('euiFilePicker', {
-          'euiFilePicker-isDroppingFile': _this2.state.isHoveringDrop,
-          'euiFilePicker-isInvalid': isInvalid,
-          'euiFilePicker-isLoading': isLoading,
-          'euiFilePicker-hasFiles': isOverridingInitialPrompt
-        }, className);
-        var styles = stylesMemoizer(_file_picker.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 = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-            css: rightIconStyles,
-            className: "euiFilePicker__loadingSpinner",
-            size: compressed ? 's' : 'm'
-          });
-        } else if (isOverridingInitialPrompt && !disabled) {
-          if (normalFormControl) {
-            clearButton = (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, {
-              "aria-label": removeSelectedAriaLabel,
-              css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
-              className: "euiFilePicker__clearButton",
-              onClick: _this2.removeFiles,
+      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
+        return (0, _react2.jsx)(_i18n.EuiI18n, {
+          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,
+            className = _this2$props.className,
+            disabled = _this2$props.disabled,
+            compressed = _this2$props.compressed,
+            onChange = _this2$props.onChange,
+            isInvalid = _this2$props.isInvalid,
+            _this2$props$fullWidt = _this2$props.fullWidth,
+            fullWidth = _this2$props$fullWidt === void 0 ? defaultFullWidth : _this2$props$fullWidt,
+            isLoading = _this2$props.isLoading,
+            display = _this2$props.display,
+            rest = _objectWithoutProperties(_this2$props, _excluded);
+          var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
+          var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
+          var isOverridingInitialPrompt = _this2.state.promptText != null;
+          var normalFormControl = display === 'default';
+          var classes = (0, _classnames.default)('euiFilePicker', {
+            'euiFilePicker-isDroppingFile': _this2.state.isHoveringDrop,
+            'euiFilePicker-isInvalid': isInvalid,
+            'euiFilePicker-isLoading': isLoading,
+            'euiFilePicker-hasFiles': isOverridingInitialPrompt
+          }, className);
+          var styles = stylesMemoizer(_file_picker.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 = (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
+              css: rightIconStyles,
+              className: "euiFilePicker__loadingSpinner",
               size: compressed ? 's' : 'm'
             });
+          } else if (isOverridingInitialPrompt && !disabled) {
+            if (normalFormControl) {
+              clearButton = (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, {
+                "aria-label": removeSelectedAriaLabel,
+                css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
+                className: "euiFilePicker__clearButton",
+                onClick: _this2.removeFiles,
+                size: compressed ? 's' : 'm'
+              });
+            } else {
+              clearButton = (0, _react2.jsx)(_button.EuiButtonEmpty, {
+                "aria-label": removeSelectedAriaLabel,
+                css: styles.euiFilePicker__clearButton,
+                className: "euiFilePicker__clearButton",
+                size: "xs",
+                onClick: _this2.removeFiles
+              }, (0, _react2.jsx)(_i18n.EuiI18n, {
+                token: "euiFilePicker.removeSelected",
+                default: "Remove"
+              }));
+            }
           } else {
-            clearButton = (0, _react2.jsx)(_button.EuiButtonEmpty, {
-              "aria-label": removeSelectedAriaLabel,
-              css: styles.euiFilePicker__clearButton,
-              className: "euiFilePicker__clearButton",
-              size: "xs",
-              onClick: _this2.removeFiles
-            }, (0, _react2.jsx)(_i18n.EuiI18n, {
-              token: "euiFilePicker.removeSelected",
-              default: "Remove"
-            }));
+            clearButton = null;
           }
-        } else {
-          clearButton = null;
-        }
-        var loader = !normalFormControl && isLoading && (0, _react2.jsx)(_progress.EuiProgress, {
-          size: "xs",
-          color: "accent",
-          position: "absolute"
+          var loader = !normalFormControl && isLoading && (0, _react2.jsx)(_progress.EuiProgress, {
+            size: "xs",
+            color: "accent",
+            position: "absolute"
+          });
+
+          // Currently this tenary is a little complex, it'll be simplified once we remove Amsterdam
+          var iconColor = isInvalid ? 'danger' : disabled ? isRefreshVariant ? 'disabled' : 'subdued' : isRefreshVariant ? 'text' : 'primary';
+          return (0, _react2.jsx)("div", {
+            css: cssStyles,
+            className: classes
+          }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
+            isInvalid: isInvalid
+          }, (0, _react2.jsx)("input", _extends({
+            type: "file",
+            id: id,
+            name: name,
+            css: inputStyles,
+            className: "euiFilePicker__input",
+            onChange: _this2.handleChange,
+            ref: function ref(input) {
+              _this2.fileInput = input;
+            },
+            onDragOver: _this2.showDrop,
+            onDragLeave: _this2.hideDrop,
+            onDrop: _this2.hideDrop,
+            disabled: disabled,
+            "aria-describedby": promptId
+          }, rest))), (0, _react2.jsx)("div", {
+            css: promptStyles,
+            className: "euiFilePicker__prompt",
+            id: promptId
+          }, (0, _react2.jsx)(_icon.EuiIcon, {
+            css: iconStyles,
+            className: "euiFilePicker__icon",
+            color: iconColor,
+            type: isInvalid ? 'alert' : isRefreshVariant && disabled ? 'minusInCircle' : 'importAction',
+            size: normalFormControl ? 'm' : 'l',
+            "aria-hidden": "true"
+          }), (0, _react2.jsx)("span", {
+            className: "euiFilePicker__promptText"
+          }, _this2.state.promptText || initialPromptText), clearButton, loader));
         });
-        return (0, _react2.jsx)("div", {
-          css: cssStyles,
-          className: classes
-        }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
-          isInvalid: isInvalid
-        }, (0, _react2.jsx)("input", _extends({
-          type: "file",
-          id: id,
-          name: name,
-          css: inputStyles,
-          className: "euiFilePicker__input",
-          onChange: _this2.handleChange,
-          ref: function ref(input) {
-            _this2.fileInput = input;
-          },
-          onDragOver: _this2.showDrop,
-          onDragLeave: _this2.hideDrop,
-          onDrop: _this2.hideDrop,
-          disabled: disabled,
-          "aria-describedby": promptId
-        }, rest))), (0, _react2.jsx)("div", {
-          css: promptStyles,
-          className: "euiFilePicker__prompt",
-          id: promptId
-        }, (0, _react2.jsx)(_icon.EuiIcon, {
-          css: iconStyles,
-          className: "euiFilePicker__icon",
-          color: isInvalid ? 'danger' : disabled ? 'subdued' : 'primary',
-          type: isInvalid ? 'alert' : 'importAction',
-          size: normalFormControl ? 'm' : 'l',
-          "aria-hidden": "true"
-        }), (0, _react2.jsx)("span", {
-          className: "euiFilePicker__promptText"
-        }, _this2.state.promptText || initialPromptText), clearButton, loader));
       });
     }
   }]);

package/lib/components/form/file_picker/file_picker.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFilePickerStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 var _form = require("../form.styles");
 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)."; } /*
@@ -31,14 +32,6 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   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;"
 } : {
@@ -47,16 +40,22 @@ var _ref4 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   var formVariables = (0, _form.euiFormVariables)(euiThemeContext);
   var _euiFontSize = (0, _global_styling.euiFontSize)(euiThemeContext, 's'),
     fontSize = _euiFontSize.fontSize,
     lineHeight = _euiFontSize.lineHeight;
   return {
-    euiFilePicker: /*#__PURE__*/(0, _react.css)("--euiFormControlLeftIconsCount:1;position:relative;&:has(input:focus){--euiFormControlStateColor:", euiTheme.colors.primary, ";};label:euiFilePicker;"),
-    isDroppingFile: /*#__PURE__*/(0, _react.css)("--euiFormControlStateColor:", euiTheme.colors.primary, ";;label:isDroppingFile;"),
-    invalid: /*#__PURE__*/(0, _react.css)("--euiFormControlStateColor:", euiTheme.colors.danger, ";;label:invalid;"),
+    euiFilePicker: /*#__PURE__*/(0, _react.css)("--euiFormControlLeftIconsCount:1;position:relative;border-radius:", formVariables.controlBorderRadius, ";&:has(input:focus){--euiFormControlStateColor:", formVariables.borderFocused, ";}&:hover{--euiFormControlStateColor:", highContrastMode ? euiTheme.border.color : formVariables.borderHovered, ";--euiFormControlStateStyle:", highContrastMode && isRefreshVariant ? 'solid' : 'dashed', ";}&:focus-within{", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+      forced: "\n              ".concat((0, _form.euiFormControlShowBackgroundLine)(euiThemeContext, formVariables.borderFocused), "\n            ")
+    }), ";};label:euiFilePicker;"),
+    isDroppingFile: /*#__PURE__*/(0, _react.css)("--euiFormControlStateColor:", isRefreshVariant ? euiTheme.colors.borderStrongSuccess : euiTheme.colors.primary, ";", isRefreshVariant && "  \n        --euiFormControlStateStyle: ".concat(highContrastMode === 'forced' ? 'solid' : 'dashed', ";\n        background-color: ").concat(euiTheme.components.forms.backgroundDropping, "\n      "), ";;label:isDroppingFile;"),
+    invalid: /*#__PURE__*/(0, _react.css)("--euiFormControlStateColor:", formVariables.borderInvalid, ";&:hover{--euiFormControlStateColor:", formVariables.borderInvalidHovered, ";}", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+      forced: "\n          ".concat((0, _form.euiFormControlShowBackgroundLine)(euiThemeContext, formVariables.borderInvalid), "\n        ")
+    }), ";;label:invalid;"),
     hasFiles: /*#__PURE__*/(0, _react.css)("--euiFormControlRightIconsCount:1;font-weight:", euiTheme.font.weight.bold, ";;label:hasFiles;"),
     loading: /*#__PURE__*/(0, _react.css)("--euiFormControlRightIconsCount:1;border-radius:", formVariables.controlCompressedBorderRadius, ";overflow:hidden;;label:loading;"),
     // Skip the css() on the default width to avoid generating a className
@@ -64,10 +63,12 @@ var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerSt
     fullWidth: /*#__PURE__*/(0, _react.css)(formStyles.fullWidth, ";label:fullWidth;"),
     // The input is an invisible dropzone / button
     input: {
-      euiFilePicker__input: _ref4,
-      largeInteractive: _ref3
+      euiFilePicker__input: _ref3,
+      largeInteractive: /*#__PURE__*/(0, _react.css)("&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:", isRefreshVariant ? '' : 'underline', ";", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+        forced: "\n                  text-decoration: underline;\n                "
+      }), ";}.euiFilePicker__icon{transform:scale(", isRefreshVariant ? 1.05 : 1.1, ");}}};label:largeInteractive;")
     },
-    euiFilePicker__prompt: /*#__PURE__*/(0, _react.css)("pointer-events:none;font-size:", fontSize, ";line-height:1;", (0, _global_styling.euiTextTruncate)(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.border.color, ");", _global_styling.euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
+    euiFilePicker__prompt: /*#__PURE__*/(0, _react.css)("pointer-events:none;font-size:", fontSize, ";line-height:1;", (0, _global_styling.euiTextTruncate)(), " color:", euiTheme.colors.textParagraph, ";border:", isRefreshVariant ? euiTheme.border.width.thin : euiTheme.border.width.thick, " var(--euiFormControlStateStyle, dashed) var(\n          --euiFormControlStateColor,\n          ", isRefreshVariant ? formVariables.borderColor : euiTheme.border.color, "\n        );", _global_styling.euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
     disabled: /*#__PURE__*/(0, _react.css)(formStyles.disabled, ";label:disabled;"),
     // Skip the css() on the default height to avoid generating a className
     uncompressed: formStyles.uncompressed,