@elastic/eui 105.0.0 → 106.0.0

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

@@ -20,7 +20,7 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
 
 import React, { Component } from 'react';
 import classNames from 'classnames';
-import { withEuiStylesMemoizer, htmlIdGenerator } from '../../../services';
+import { withEuiStylesMemoizer, htmlIdGenerator, RenderWithEuiTheme, isEuiThemeRefreshVariant } from '../../../services';
 import { EuiButtonEmpty } from '../../button';
 import { EuiProgress } from '../../progress';
 import { EuiIcon } from '../../icon';
@@ -101,111 +101,117 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
       var _this2 = this;
       var _ref = this.context,
         defaultFullWidth = _ref.defaultFullWidth;
-      return ___EmotionJSX(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 = 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, {
-            css: rightIconStyles,
-            className: "euiFilePicker__loadingSpinner",
-            size: compressed ? 's' : 'm'
-          });
-        } else if (isOverridingInitialPrompt && !disabled) {
-          if (normalFormControl) {
-            clearButton = ___EmotionJSX(EuiFormControlLayoutClearButton, {
-              "aria-label": removeSelectedAriaLabel,
-              css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
-              className: "euiFilePicker__clearButton",
-              onClick: _this2.removeFiles,
+      return ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
+        return ___EmotionJSX(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 = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
+          var promptId = "".concat(id || _this2.generatedId, "-filePicker__prompt");
+          var isOverridingInitialPrompt = _this2.state.promptText != null;
+          var normalFormControl = display === 'default';
+          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, {
+              css: rightIconStyles,
+              className: "euiFilePicker__loadingSpinner",
               size: compressed ? 's' : 'm'
             });
+          } else if (isOverridingInitialPrompt && !disabled) {
+            if (normalFormControl) {
+              clearButton = ___EmotionJSX(EuiFormControlLayoutClearButton, {
+                "aria-label": removeSelectedAriaLabel,
+                css: [styles.euiFilePicker__clearButton, rightIconStyles, ";label:clearButton;"],
+                className: "euiFilePicker__clearButton",
+                onClick: _this2.removeFiles,
+                size: compressed ? 's' : 'm'
+              });
+            } else {
+              clearButton = ___EmotionJSX(EuiButtonEmpty, {
+                "aria-label": removeSelectedAriaLabel,
+                css: styles.euiFilePicker__clearButton,
+                className: "euiFilePicker__clearButton",
+                size: "xs",
+                onClick: _this2.removeFiles
+              }, ___EmotionJSX(EuiI18n, {
+                token: "euiFilePicker.removeSelected",
+                default: "Remove"
+              }));
+            }
           } else {
-            clearButton = ___EmotionJSX(EuiButtonEmpty, {
-              "aria-label": removeSelectedAriaLabel,
-              css: styles.euiFilePicker__clearButton,
-              className: "euiFilePicker__clearButton",
-              size: "xs",
-              onClick: _this2.removeFiles
-            }, ___EmotionJSX(EuiI18n, {
-              token: "euiFilePicker.removeSelected",
-              default: "Remove"
-            }));
+            clearButton = null;
           }
-        } else {
-          clearButton = null;
-        }
-        var loader = !normalFormControl && isLoading && ___EmotionJSX(EuiProgress, {
-          size: "xs",
-          color: "accent",
-          position: "absolute"
+          var loader = !normalFormControl && isLoading && ___EmotionJSX(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 ___EmotionJSX("div", {
+            css: cssStyles,
+            className: classes
+          }, ___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) {
+              _this2.fileInput = input;
+            },
+            onDragOver: _this2.showDrop,
+            onDragLeave: _this2.hideDrop,
+            onDrop: _this2.hideDrop,
+            disabled: disabled,
+            "aria-describedby": promptId
+          }, rest))), ___EmotionJSX("div", {
+            css: promptStyles,
+            className: "euiFilePicker__prompt",
+            id: promptId
+          }, ___EmotionJSX(EuiIcon, {
+            css: iconStyles,
+            className: "euiFilePicker__icon",
+            color: iconColor,
+            type: isInvalid ? 'alert' : isRefreshVariant && disabled ? 'minusInCircle' : 'importAction',
+            size: normalFormControl ? 'm' : 'l',
+            "aria-hidden": "true"
+          }), ___EmotionJSX("span", {
+            className: "euiFilePicker__promptText"
+          }, _this2.state.promptText || initialPromptText), clearButton, loader));
         });
-        return ___EmotionJSX("div", {
-          css: cssStyles,
-          className: classes
-        }, ___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) {
-            _this2.fileInput = input;
-          },
-          onDragOver: _this2.showDrop,
-          onDragLeave: _this2.hideDrop,
-          onDrop: _this2.hideDrop,
-          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("span", {
-          className: "euiFilePicker__promptText"
-        }, _this2.state.promptText || initialPromptText), clearButton, loader));
       });
     }
   }]);

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

@@ -8,8 +8,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { euiCanAnimate, euiFontSize, euiTextTruncate, logicalCSS, mathWithUnits } from '../../../global_styling';
-import { euiFormControlStyles, euiFormVariables } from '../form.styles';
+import { isEuiThemeRefreshVariant } from '../../../services';
+import { euiCanAnimate, euiFontSize, euiTextTruncate, highContrastModeStyles, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiFormControlShowBackgroundLine, 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;"
@@ -27,14 +28,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;"
 } : {
@@ -43,16 +36,22 @@ var _ref4 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   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;"),
+    euiFilePicker: /*#__PURE__*/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{", highContrastModeStyles(euiThemeContext, {
+      forced: "\n              ".concat(euiFormControlShowBackgroundLine(euiThemeContext, formVariables.borderFocused), "\n            ")
+    }), ";};label:euiFilePicker;"),
+    isDroppingFile: /*#__PURE__*/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__*/css("--euiFormControlStateColor:", formVariables.borderInvalid, ";&:hover{--euiFormControlStateColor:", formVariables.borderInvalidHovered, ";}", highContrastModeStyles(euiThemeContext, {
+      forced: "\n          ".concat(euiFormControlShowBackgroundLine(euiThemeContext, formVariables.borderInvalid), "\n        ")
+    }), ";;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
@@ -60,10 +59,12 @@ export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
     fullWidth: /*#__PURE__*/css(formStyles.fullWidth, ";label:fullWidth;"),
     // The input is an invisible dropzone / button
     input: {
-      euiFilePicker__input: _ref4,
-      largeInteractive: _ref3
+      euiFilePicker__input: _ref3,
+      largeInteractive: /*#__PURE__*/css("&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:", isRefreshVariant ? '' : 'underline', ";", highContrastModeStyles(euiThemeContext, {
+        forced: "\n                  text-decoration: underline;\n                "
+      }), ";}.euiFilePicker__icon{transform:scale(", isRefreshVariant ? 1.05 : 1.1, ");}}};label:largeInteractive;")
     },
-    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thick, " dashed var(--euiFormControlStateColor, ", euiTheme.border.color, ");", euiCanAnimate, "{transition:border-color ", euiTheme.animation.fast, " ease-in,background-color ", euiTheme.animation.fast, " ease-in;};label:euiFilePicker__prompt;"),
+    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", 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        );", 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,

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

@@ -9,7 +9,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Side Public License, v 1.
  */
 
-import { makeHighContrastColor } from '../../services';
+import { isEuiThemeRefreshVariant, makeHighContrastColor } from '../../services';
 import { logicalCSS, mathWithUnits, euiCanAnimate, euiFontSize } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
@@ -23,6 +23,7 @@ export var euiFormMaxWidth = function euiFormMaxWidth(_ref) {
 export var euiFormVariables = function euiFormVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var backgroundColor = highContrastMode ? euiTheme.colors.emptyShade : euiTheme.components.forms.background;
   var controlHeight = euiTheme.size.xxl;
   var controlCompressedHeight = euiTheme.size.xl;
@@ -32,12 +33,12 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     controlCompressedHeight: controlCompressedHeight,
     controlPadding: euiTheme.size.m,
     controlCompressedPadding: euiTheme.size.s,
-    controlBorderRadius: euiTheme.border.radius.medium,
+    controlBorderRadius: isRefreshVariant ? euiTheme.border.radius.small : euiTheme.border.radius.medium,
     controlCompressedBorderRadius: euiTheme.border.radius.small,
     iconAffordance: mathWithUnits(euiTheme.size.base, function (x) {
       return x * 1.5;
     }),
-    iconCompressedAffordance: mathWithUnits(euiTheme.size.m, function (x) {
+    iconCompressedAffordance: mathWithUnits(isRefreshVariant ? euiTheme.size.base : euiTheme.size.m, function (x) {
       return x * 1.5;
     }),
     stateUnderlineHeight: highContrastMode ? mathWithUnits(euiTheme.border.width.thick, function (x) {
@@ -51,9 +52,13 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     backgroundDisabledColor: euiTheme.components.forms.backgroundDisabled,
     backgroundReadOnlyColor: euiTheme.components.forms.backgroundReadOnly,
     borderColor: highContrastMode ? euiTheme.border.color : euiTheme.components.forms.border,
+    borderHovered: euiTheme.components.forms.borderHovered,
+    borderFocused: euiTheme.components.forms.borderFocused,
+    borderInvalid: euiTheme.components.forms.borderInvalid,
+    borderInvalidHovered: euiTheme.components.forms.borderInvalidHovered,
     controlDisabledColor: euiTheme.components.forms.controlBackgroundDisabled,
     controlBoxShadow: '0 0 transparent',
-    controlPlaceholderText: makeHighContrastColor(euiTheme.colors.textSubdued)(backgroundColor),
+    controlPlaceholderText: isRefreshVariant ? highContrastMode ? makeHighContrastColor(euiTheme.components.forms.colorDisabled)(backgroundColor) : euiTheme.components.forms.colorDisabled : makeHighContrastColor(euiTheme.colors.textSubdued)(backgroundColor),
     appendPrependBackground: euiTheme.components.forms.prependBackground
   };
   var controlLayout = {
@@ -78,7 +83,9 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     animationTiming: "".concat(euiTheme.animation.fast, " ease-in")
   });
 };
+var formControlLayoutWrapperSelector = '.euiFormControlLayout__childrenWrapper';
 export var euiFormControlStyles = function euiFormControlStyles(euiThemeContext) {
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
   return {
     shared: "\n      ".concat(euiFormControlText(euiThemeContext), "\n      ").concat(euiFormControlDefaultShadow(euiThemeContext), "\n    "),
@@ -89,7 +96,7 @@ export var euiFormControlStyles = function euiFormControlStyles(euiThemeContext)
     inGroup: "\n      ".concat(logicalCSS('height', '100%'), "\n      ").concat(highContrastModeStyles(euiThemeContext, {
       none: 'box-shadow: none;',
       preferred: 'border: none;'
-    }), "\n      border-radius: 0;\n    "),
+    }), "\n      border-radius: ").concat(isRefreshVariant ? 'inherit' : '0', ";\n    "),
     // Widths
     formWidth: "\n      ".concat(logicalCSS('max-width', form.maxWidth), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
     fullWidth: "\n      ".concat(logicalCSS('max-width', '100%'), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
@@ -119,44 +126,75 @@ export var euiFormControlDefaultShadow = function euiFormControlDefaultShadow(eu
     _ref2$withBackgroundA = _ref2.withBackgroundAnimation,
     withBackgroundAnimation = _ref2$withBackgroundA === void 0 ? withBackground : _ref2$withBackgroundA;
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
   var border = highContrastModeStyles(euiThemeContext, {
     // We use inset box-shadow instead of border to skip extra height calculations
-    none: "\n      border: none;\n      box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n    "),
+    none: isRefreshVariant ? "\n      --euiFormControlStateColor: ".concat(form.borderColor, ";\n      border: none;\n      box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, " var(--euiFormControlStateColor);\n\n      ").concat(euiFormControlHoverStyles(euiThemeContext), "\n    ") : "\n      border: none;\n      box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(form.borderColor, ";\n    "),
     // In high contrast mode, this doesn't matter - we need to prioritize visibility
-    preferred: "\n      border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.border.color, ";\n    ")
+    preferred: "\n      border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.border.color, ";\n\n      ").concat(euiFormControlHoverStyles(euiThemeContext), "\n    ")
   });
   var backgroundColor = "\n    background-color: ".concat(form.backgroundColor, ";\n  ").trim();
   var backgroundGradient = highContrastModeStyles(euiThemeContext, {
-    none: "\n      background-repeat: no-repeat;\n      background-size: 0% 100%;\n      background-image: linear-gradient(to top,\n        var(--euiFormControlStateColor),\n        var(--euiFormControlStateColor) ".concat(form.stateUnderlineHeight, ",\n        transparent ").concat(form.stateUnderlineHeight, ",\n        transparent 100%\n      );\n    "),
+    none: !isRefreshVariant ? "\n      background-repeat: no-repeat;\n      background-size: 0% 100%;\n      background-image: linear-gradient(to top,\n        var(--euiFormControlStateColor),\n        var(--euiFormControlStateColor) ".concat(isRefreshVariant ? mathWithUnits([euiTheme.border.width.thick, euiTheme.border.width.thin], function (x, y) {
+      return x + y;
+    } // account for pseudo element border
+    ) : form.stateUnderlineHeight, ",\n        transparent ").concat(form.stateUnderlineHeight, ",\n        transparent 100%\n      );\n    ") : '',
     // Windows high contrast mode overrides/hides background gradients - we'll need another approach
     forced: "\n      background-repeat: no-repeat;\n      background-size: 0% ".concat(form.stateUnderlineHeight, ";\n      background-position: bottom left;\n      background-origin: border-box;\n    ")
   });
-  var backgroundAnimation = "\n    ".concat(euiCanAnimate, " {\n      transition:\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ").trim();
+  var backgroundAnimation = !isRefreshVariant ? "\n    ".concat(euiCanAnimate, " {\n      transition:\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ").trim() : '';
   return "\n    ".concat(withBorder ? border : '', "\n    ").concat(withBackgroundColor ? backgroundColor : '', "\n    ").concat(withBackground ? backgroundGradient : '', "\n    ").concat(withBackgroundAnimation ? backgroundAnimation : '', "\n  ");
 };
+var hoverSelector = '&:hover:not(:disabled, :focus, input[readonly], [class*="readOnly"])';
+export var disableFormControlHoverStyles = function disableFormControlHoverStyles() {
+  return "\n  ".concat(hoverSelector, " {\n    outline: none;\n  }\n");
+};
+export var euiFormControlHoverStyles = function euiFormControlHoverStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var form = euiFormVariables(euiThemeContext);
+  return "\n    ".concat(hoverSelector, " {\n      --borderWidthBase: var(--euiFormControlStateWidth, ").concat(euiTheme.border.width.thin, ");\n      --borderWidth: ").concat(highContrastMode ? euiTheme.border.width.thick : 'var(--borderWidthBase)', ";\n      --borderColor: var(--euiFormControlStateHoverColor, ").concat(highContrastMode ? euiTheme.border.color : form.borderHovered, ");\n      position: relative;\n      z-index: 1;\n      outline: var(--borderWidth) solid var(--borderColor);\n      outline-offset: calc(-1 * var(--borderWidth));\n    }\n  ");
+};
+export var euiFormControlHighlightBorderStyles = "\n  position: relative;\n  z-index: 1;\n  box-shadow: none;\n  outline: var(--euiFormControlStateWidth) solid var(--euiFormControlStateColor);\n  outline-offset: calc(-1 * var(--euiFormControlStateWidth));\n";
 export var euiFormControlFocusStyles = function euiFormControlFocusStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
+  var form = euiFormVariables(euiThemeContext);
   var focusColor = euiTheme.colors.primary;
-  return "\n    --euiFormControlStateColor: ".concat(focusColor, ";\n    background-color: ").concat(euiTheme.components.forms.backgroundFocused, ";\n    ").concat(euiFormControlShowBackgroundUnderline(euiThemeContext, focusColor), "\n    outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n  ");
+  return isRefreshVariant ? "\n      --euiFormControlStateColor: ".concat(form.borderFocused, ";\n      --euiFormControlStateHoverColor: ").concat(form.borderFocused, ";\n      --euiFormControlStateWidth: ").concat(euiTheme.border.width.thick, ";\n      ").concat(euiFormControlHighlightBorderStyles, "\n      ").concat(highContrastModeStyles(euiThemeContext, {
+    forced: "\n          ".concat(euiFormControlShowBackgroundLine(euiThemeContext, focusColor), "\n        ")
+  }), "\n    ") : "\n      --euiFormControlStateColor: ".concat(focusColor, ";\n      background-color: ").concat(euiTheme.components.forms.backgroundFocused, ";\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, focusColor), "\n      outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n    ");
 };
 export var euiFormControlInvalidStyles = function euiFormControlInvalidStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
+  var form = euiFormVariables(euiThemeContext);
   var invalidColor = euiTheme.colors.danger;
-  return "\n    --euiFormControlStateColor: ".concat(invalidColor, ";\n    ").concat(euiFormControlShowBackgroundUnderline(euiThemeContext, invalidColor), "\n  ");
+  return isRefreshVariant ? "\n      --euiFormControlStateColor: ".concat(form.borderInvalid, ";\n      --euiFormControlStateHoverColor: ").concat(form.borderInvalidHovered, ";\n      --euiFormControlStateWidth: ").concat(highContrastMode === 'preferred' ? euiTheme.border.width.thick : euiTheme.border.width.thin, ";\n      \n      ").concat(euiFormControlHighlightBorderStyles, "\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n    ") : "\n      --euiFormControlStateColor: ".concat(invalidColor, ";\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, invalidColor), "\n    ");
 };
 export var euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
-  return "\n    color: ".concat(form.textColorDisabled, ";\n    /* Required for Safari */\n    -webkit-text-fill-color: ").concat(form.textColorDisabled, ";\n    background-color: ").concat(form.backgroundDisabledColor, ";\n    cursor: not-allowed;\n    --euiFormControlStateColor: transparent;\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.textColorDisabled, ";\n      opacity: 1;\n    ")), "\n  ");
+  var refreshVariantStyles = "\n      --euiFormControlStateHoverColor: transparent;\n      --euiFormControlStateColor: ".concat(form.borderColor, ";\n    ");
+  return "\n    color: ".concat(form.textColorDisabled, ";\n    /* Required for Safari */\n    -webkit-text-fill-color: ").concat(form.textColorDisabled, ";\n    background-color: ").concat(form.backgroundDisabledColor, ";\n    cursor: not-allowed;\n    --euiFormControlStateColor: transparent;\n\n    ").concat(isRefreshVariant && refreshVariantStyles, "\n\n    ").concat(euiPlaceholderPerBrowser("\n      color: ".concat(form.textColorDisabled, ";\n      opacity: 1;\n    ")), "\n  ");
 };
 export var euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
-  return "\n    cursor: default;\n    color: ".concat(form.textColor, ";\n    -webkit-text-fill-color: ").concat(form.textColor, "; /* Required for Safari */\n\n    background-color: ").concat(form.backgroundReadOnlyColor, ";\n    --euiFormControlStateColor: transparent;\n    ").concat(highContrastModeStyles(euiThemeContext, {
+  var styles = isRefreshVariant ? "\n      --euiFormControlStateColor: ".concat(form.borderColor, ";\n      --euiFormControlStateHoverColor: ").concat(form.borderColor, ";\n      --euiFormControlStateWidth: ").concat(euiTheme.border.width.thin, ";\n      /* keep the input below wrapper borders */\n      position: relative;\n      z-index: 0;\n      outline: none;\n      box-shadow: inset 0 0 0 var(--euiFormControlStateWidth) var(--euiFormControlStateColor);\n\n      ").concat(formControlLayoutWrapperSelector, "[class*=inGroup] & {\n        box-shadow: none;\n      }\n      ").concat(highContrastModeStyles(euiThemeContext, {
+    preferred: 'box-shadow: none;'
+  }), "\n    ") : "\n      --euiFormControlStateColor: transparent;\n      ".concat(highContrastModeStyles(euiThemeContext, {
     forced: 'background-image: none;'
-  }), "\n  ");
+  }), "\n    ");
+  return "\n    background-color: ".concat(form.backgroundReadOnlyColor, ";\n    cursor: default;\n    color: ").concat(form.textColor, ";\n    -webkit-text-fill-color: ").concat(form.textColor, "; /* Required for Safari */\n\n    ").concat(styles, "\n  ");
 };
 export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
+  var form = euiFormVariables(euiThemeContext);
 
   // Make the text color slightly less prominent than the default colors.text
   var textColor = euiTheme.colors.darkestShade;
@@ -168,27 +206,39 @@ export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(
   // Re-create the border, since the above webkit box shadow overrides the default border box-shadow
   // + change the border color to match states, since the underline background gradient no longer works
   var borderColor = euiTheme.components.forms.borderAutofilled;
-  var invalidBorder = euiTheme.colors.danger;
+  var borderHovered = euiTheme.components.forms.borderAutofilledHovered;
+  var borderInvalid = form.borderInvalid;
+  var borderInvalidHovered = form.borderInvalidHovered;
   var borderShadow = function borderShadow(color) {
     return "inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(color);
   };
+  var interactiveStyles = isRefreshVariant ? "\n      &:hover,\n      &:focus {\n        -webkit-box-shadow: ".concat(borderShadow(borderHovered), ", ").concat(backgroundShadow, ";\n      }\n\n      &:invalid {\n        -webkit-box-shadow: ").concat(borderShadow(borderInvalid), ", ").concat(backgroundShadow, ";\n\n        &:hover {\n          -webkit-box-shadow: ").concat(borderShadow(borderInvalidHovered), ", ").concat(backgroundShadow, ";\n        }\n      }\n    ") : "\n      &:invalid {\n          -webkit-box-shadow: ".concat(borderShadow(borderInvalid), ", ").concat(backgroundShadow, ";\n      }\n    ");
 
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
-  return "\n    &:-webkit-autofill {\n      -webkit-text-fill-color: ".concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow(borderColor), ", ").concat(backgroundShadow, ";\n\n      &:invalid {\n        -webkit-box-shadow: ").concat(borderShadow(invalidBorder), ", ").concat(backgroundShadow, ";\n      }\n    }\n  ");
+  return "\n    &:-webkit-autofill {\n      -webkit-text-fill-color: ".concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow(borderColor), ", ").concat(backgroundShadow, ";\n\n      ").concat(interactiveStyles, "\n    }\n  ");
 };
-export var euiFormControlShowBackgroundUnderline = function euiFormControlShowBackgroundUnderline(euiThemeContext, color) {
-  if (euiThemeContext.highContrastMode !== 'forced') {
+export var euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {
+  var euiTheme = euiThemeContext.euiTheme,
+    highContrastMode = euiThemeContext.highContrastMode;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
+  if (highContrastMode !== 'forced') {
     return 'background-size: 100% 100%;';
   }
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    stateUnderlineHeight = _euiFormVariables.stateUnderlineHeight;
 
   // Windows high contrast themes ignore all background-images that aren't url-based,
   // so to restore the linear-gradient that provides important visual information, we're
   // using a static inline SVG workaround
   var fill = encodeURIComponent(color);
+  var strokeWidth = stateUnderlineHeight !== null && stateUnderlineHeight !== void 0 ? stateUnderlineHeight : '4px';
   var inlineSVG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' fill='".concat(fill, "' /%3E%3C/svg%3E");
-  var _euiFormVariables = euiFormVariables(euiThemeContext),
-    stateUnderlineHeight = _euiFormVariables.stateUnderlineHeight;
-  return "\n    background-size: 100% ".concat(stateUnderlineHeight, ";\n    background-image: url(\"").concat(inlineSVG, "\");\n  ");
+  var refreshInlineSVG = "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='100%25' height='100%25' style='fill:transparent;stroke-width:".concat(strokeWidth, ";stroke:").concat(fill, "' /%3E%3C/svg%3E");
+  return isRefreshVariant ? "\n      background-size: calc(100% - ".concat(mathWithUnits(strokeWidth, function (x) {
+    return x / 2;
+  }), ") calc(100% - ").concat(mathWithUnits(strokeWidth, function (x) {
+    return x / 2;
+  }), ");\n      background-position: ").concat(euiTheme.border.width.thin, ";\n      background-image: url(\"").concat(refreshInlineSVG, "\");\n    ") : "\n    background-size: 100% ".concat(stateUnderlineHeight, ";\n    background-image: url(\"").concat(inlineSVG, "\");\n  ");
 };
 var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
   return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-ms-input-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");