@elastic/eui 107.0.0 → 108.0.0

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

@@ -33,7 +33,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { withEuiStylesMemoizer, htmlIdGenerator, RenderWithEuiTheme, isEuiThemeRefreshVariant } from '../../../services';
+import { withEuiStylesMemoizer, htmlIdGenerator } from '../../../services';
 import { EuiButtonEmpty } from '../../button';
 import { EuiProgress } from '../../progress';
 import { EuiIcon } from '../../icon';
@@ -114,117 +114,112 @@ export var EuiFilePickerClass = /*#__PURE__*/function (_Component) {
       var _this2 = this;
       var _ref = this.context,
         defaultFullWidth = _ref.defaultFullWidth;
-      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",
+      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,
               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 = null;
+            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"
+            }));
           }
-          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));
+        } else {
+          clearButton = null;
+        }
+        var loader = !normalFormControl && isLoading && ___EmotionJSX(EuiProgress, {
+          size: "xs",
+          color: "accent",
+          position: "absolute"
         });
+        var iconColor = isInvalid ? 'danger' : disabled ? 'disabled' : 'text';
+        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' : disabled ? 'minusInCircle' : 'importAction',
+          size: normalFormControl ? 'm' : 'l',
+          "aria-hidden": "true"
+        }), ___EmotionJSX("span", {
+          className: "euiFilePicker__promptText"
+        }, _this2.state.promptText || initialPromptText), clearButton, loader));
       });
     }
   }]);

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

@@ -8,7 +8,6 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-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" ? {
@@ -38,17 +37,16 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
   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;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, {
+    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:solid;}&: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;"),
+    isDroppingFile: /*#__PURE__*/css("--euiFormControlStateColor:", euiTheme.colors.borderStrongSuccess, ";--euiFormControlStateStyle:", highContrastMode === 'forced' ? 'solid' : 'dashed', ";background-color:", euiTheme.components.forms.backgroundDropping, ";;label:isDroppingFile;"),
     invalid: /*#__PURE__*/css("--euiFormControlStateColor:", formVariables.borderInvalid, ";&:hover{--euiFormControlStateColor:", formVariables.borderInvalidHovered, ";}", highContrastModeStyles(euiThemeContext, {
       forced: "\n          ".concat(euiFormControlShowBackgroundLine(euiThemeContext, formVariables.borderInvalid), "\n        ")
     }), ";;label:invalid;"),
@@ -60,11 +58,11 @@ export var euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
     // The input is an invisible dropzone / button
     input: {
       euiFilePicker__input: _ref3,
-      largeInteractive: /*#__PURE__*/css("&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{text-decoration:", isRefreshVariant ? '' : 'underline', ";", highContrastModeStyles(euiThemeContext, {
+      largeInteractive: /*#__PURE__*/css("&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{", highContrastModeStyles(euiThemeContext, {
         forced: "\n                  text-decoration: underline;\n                "
-      }), ";}.euiFilePicker__icon{transform:scale(", isRefreshVariant ? 1.05 : 1.1, ");}}};label:largeInteractive;")
+      }), ";}.euiFilePicker__icon{transform:scale(1.05);}}};label:largeInteractive;")
     },
-    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;"),
+    euiFilePicker__prompt: /*#__PURE__*/css("pointer-events:none;font-size:", fontSize, ";line-height:1;", euiTextTruncate(), " color:", euiTheme.colors.textParagraph, ";border:", euiTheme.border.width.thin, " var(--euiFormControlStateStyle, dashed) var(--euiFormControlStateColor, ", formVariables.borderColor, ");", 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/es/components/form/form.styles.js

@@ -12,7 +12,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
  * Side Public License, v 1.
  */
 
-import { isEuiThemeRefreshVariant, makeHighContrastColor } from '../../services';
+import { makeHighContrastColor } from '../../services';
 import { logicalCSS, mathWithUnits, euiCanAnimate, euiFontSize } from '../../global_styling';
 import { highContrastModeStyles } from '../../global_styling/functions/high_contrast';
 
@@ -31,7 +31,6 @@ export var euiFormPlaceholderStyles = function euiFormPlaceholderStyles(euiTheme
 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;
@@ -41,12 +40,12 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     controlCompressedHeight: controlCompressedHeight,
     controlPadding: euiTheme.size.m,
     controlCompressedPadding: euiTheme.size.s,
-    controlBorderRadius: isRefreshVariant ? euiTheme.border.radius.small : euiTheme.border.radius.medium,
+    controlBorderRadius: euiTheme.border.radius.small,
     controlCompressedBorderRadius: euiTheme.border.radius.small,
     iconAffordance: mathWithUnits(euiTheme.size.base, function (x) {
       return x * 1.5;
     }),
-    iconCompressedAffordance: mathWithUnits(isRefreshVariant ? euiTheme.size.base : euiTheme.size.m, function (x) {
+    iconCompressedAffordance: mathWithUnits(euiTheme.size.base, function (x) {
       return x * 1.5;
     }),
     stateUnderlineHeight: highContrastMode ? mathWithUnits(euiTheme.border.width.thick, function (x) {
@@ -66,7 +65,7 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
     borderInvalidHovered: euiTheme.components.forms.borderInvalidHovered,
     controlDisabledColor: euiTheme.components.forms.controlBackgroundDisabled,
     controlBoxShadow: '0 0 transparent',
-    controlPlaceholderText: isRefreshVariant ? highContrastMode ? makeHighContrastColor(euiTheme.components.forms.colorDisabled)(backgroundColor) : euiTheme.components.forms.colorDisabled : makeHighContrastColor(euiTheme.colors.textSubdued)(backgroundColor),
+    controlPlaceholderText: highContrastMode ? makeHighContrastColor(euiTheme.components.forms.colorDisabled)(backgroundColor) : euiTheme.components.forms.colorDisabled,
     appendPrependBackground: euiTheme.components.forms.prependBackground
   };
   var controlLayout = {
@@ -93,7 +92,6 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
 };
 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    "),
@@ -104,7 +102,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: ").concat(isRefreshVariant ? 'inherit' : '0', ";\n    "),
+    }), "\n      border-radius: inherit;\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    "),
@@ -130,29 +128,21 @@ export var euiFormControlDefaultShadow = function euiFormControlDefaultShadow(eu
     _ref2$withBackground = _ref2.withBackground,
     withBackground = _ref2$withBackground === void 0 ? true : _ref2$withBackground,
     _ref2$withBackgroundC = _ref2.withBackgroundColor,
-    withBackgroundColor = _ref2$withBackgroundC === void 0 ? withBackground : _ref2$withBackgroundC,
-    _ref2$withBackgroundA = _ref2.withBackgroundAnimation,
-    withBackgroundAnimation = _ref2$withBackgroundA === void 0 ? withBackground : _ref2$withBackgroundA;
+    withBackgroundColor = _ref2$withBackgroundC === void 0 ? withBackground : _ref2$withBackgroundC;
   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: 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    "),
+    none: "\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    "),
     // 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\n      ").concat(euiFormControlHoverStyles(euiThemeContext), "\n    ")
   });
   var backgroundColor = "\n    background-color: ".concat(form.backgroundColor, ";\n  ").trim();
   var backgroundGradient = highContrastModeStyles(euiThemeContext, {
-    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 = !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  ");
+  return "\n    ".concat(withBorder ? border : '', "\n    ").concat(withBackgroundColor ? backgroundColor : '', "\n    ").concat(withBackground ? backgroundGradient : '', "\n  ");
 };
 var hoverSelector = '&:hover:not(:disabled, :focus, input[readonly], [class*="readOnly"])';
 export var disableFormControlHoverStyles = function disableFormControlHoverStyles() {
@@ -167,43 +157,33 @@ export var euiFormControlHoverStyles = function euiFormControlHoverStyles(euiThe
 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 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, {
+  return "\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    ");
+  }), "\n    ");
 };
 export var euiFormControlInvalidStyles = function euiFormControlInvalidStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
   var invalidColor = euiTheme.colors.danger;
-  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    ");
+  return "\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    ");
 };
 export var euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
-  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(euiFormPlaceholderStyles(euiThemeContext)), "\n  ");
+  return "\n    --euiFormControlStateColor: transparent;\n    --euiFormControlStateHoverColor: transparent;\n    --euiFormControlStateColor: ".concat(form.borderColor, ";\n\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    \n    ").concat(euiPlaceholderPerBrowser(euiFormPlaceholderStyles(euiThemeContext)), "\n  ");
 };
 export var euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(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, {
+  return "\n    --euiFormControlStateColor: ".concat(form.borderColor, ";\n    --euiFormControlStateHoverColor: ").concat(form.borderColor, ";\n    --euiFormControlStateWidth: ").concat(euiTheme.border.width.thin, ";\n\n    /* keep the input below wrapper borders */\n    position: relative;\n    z-index: 0;\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    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\n    ").concat(highContrastModeStyles(euiThemeContext, {
     preferred: 'box-shadow: none;'
-  }), "\n    ") : "\n      --euiFormControlStateColor: transparent;\n      ".concat(highContrastModeStyles(euiThemeContext, {
-    forced: 'background-image: none;'
-  }), "\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  ");
+  }), "\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;
   var tintedBackgroundColor = euiTheme.components.forms.backgroundAutofilled;
@@ -220,15 +200,13 @@ export var euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(
   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      ").concat(interactiveStyles, "\n    }\n  ");
+  return "\n    &:-webkit-autofill {\n      -webkit-text-fill-color: ".concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow(borderColor), ", ").concat(backgroundShadow, ";\n\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  ");
 };
 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%;';
   }
@@ -240,13 +218,12 @@ export var euiFormControlShowBackgroundLine = function euiFormControlShowBackgro
   // 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 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 "\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  ");
+  }), ");\n      background-position: ").concat(euiTheme.border.width.thin, ";\n      background-image: url(\"").concat(refreshInlineSVG, "\");\n    ");
 };
 var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
   return "\n  &::-webkit-input-placeholder { ".concat(content, " }\n  &::-moz-placeholder { ").concat(content, " }\n  &:-moz-placeholder { ").concat(content, " }\n  &::placeholder { ").concat(content, " }\n");

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

@@ -8,8 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { isEuiThemeRefreshVariant } from '../../../services';
-import { euiTextTruncate, logicalCSS, mathWithUnits } from '../../../global_styling';
+import { euiTextTruncate, logicalCSS } from '../../../global_styling';
 import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
 import { euiFormVariables } from '../form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -30,12 +29,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 export var euiFormControlLayoutStyles = function euiFormControlLayoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
-  var groupStyles = "\n      /* use pseudo element for borders to prevent dimension changes and support nested elements better */\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        z-index: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n\n      /* the filter group will use the form layout border instead */\n      .euiFilterGroup {\n        border-radius: 0;\n        /* creating extra space to prevent the focus indicator being cut off */\n        ").concat(logicalCSS('padding-right', euiTheme.border.width.thin), "\n\n        &::after {\n          display: none;\n        }\n      }\n\n      .euiFilterButton__wrapper:first-of-type::before,\n      .euiFilterButton__wrapper::after {\n        display: none;\n      }\n  ");
-  var wrapperGroupStyles = "\n      > :first-child {\n        border-radius: inherit;\n        ".concat(logicalCSS('border-top-left-radius', '0'), "\n        ").concat(logicalCSS('border-bottom-left-radius', '0'), "\n      }\n\n      > :last-child {\n        border-radius: inherit;\n        ").concat(logicalCSS('border-top-right-radius', '0'), "\n        ").concat(logicalCSS('border-bottom-right-radius', '0'), "\n      }\n  ");
-  var prependOnlyStyles = "\n      > :last-child {\n        ".concat(logicalCSS('border-top-right-radius', 'inherit'), "\n        ").concat(logicalCSS('border-bottom-right-radius', 'inherit'), "\n      }\n  ");
-  var appendOnlyStyles = "\n      > :first-child {\n        ".concat(logicalCSS('border-top-left-radius', 'inherit'), "\n        ").concat(logicalCSS('border-bottom-left-radius', 'inherit'), "\n      }\n  ");
   return {
     euiFormControlLayout: _ref2,
     // Skip the css`` on the default height to avoid generating a className
@@ -45,41 +39,34 @@ export var euiFormControlLayoutStyles = function euiFormControlLayoutStyles(euiT
     formWidth: "\n      ".concat(logicalCSS('max-width', form.maxWidth), "\n      ").concat(logicalCSS('width', '100%'), "\n    "),
     fullWidth: /*#__PURE__*/css(logicalCSS('max-width', '100%'), " ", logicalCSS('width', '100%'), ";;label:fullWidth;"),
     group: {
-      group: /*#__PURE__*/css("position:relative;display:flex;align-items:stretch;border:", isRefreshVariant ? 'none' : "".concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor), ";background-color:", form.backgroundColor, ";overflow:hidden;", isRefreshVariant && groupStyles, " .euiFormControlButton{border-radius:inherit;box-shadow:none;}>*{", logicalCSS('height', '100%'), ";};label:group;"),
+      group: /*#__PURE__*/css("position:relative;display:flex;align-items:stretch;border:none;background-color:", form.backgroundColor, ";overflow:hidden;&::after{content:'';position:absolute;inset:0;z-index:0;border:", euiTheme.border.width.thin, " solid ", form.borderColor, ";border-radius:inherit;pointer-events:none;}.euiFilterGroup{border-radius:0;", logicalCSS('padding-right', euiTheme.border.width.thin), " &::after{display:none;}}.euiFilterButton__wrapper:first-of-type::before,.euiFilterButton__wrapper::after{display:none;}.euiFormControlButton{border-radius:inherit;box-shadow:none;}>*{", logicalCSS('height', '100%'), ";};label:group;"),
       // Skipping css`` to avoid repeated compressed/uncompressed classNames
       uncompressed: "\n        border-radius: ".concat(form.controlBorderRadius, ";\n      "),
       compressed: "\n        border-radius: ".concat(form.controlCompressedBorderRadius, ";\n      ")
     },
     children: {
       euiFormControlLayout__childrenWrapper: _ref,
-      inGroup: /*#__PURE__*/css("flex-grow:1;overflow:hidden;", isRefreshVariant && wrapperGroupStyles, ";;label:inGroup;"),
-      prependOnly: /*#__PURE__*/css(logicalCSS('border-top-right-radius', 'inherit'), " ", logicalCSS('border-bottom-right-radius', 'inherit'), " ", isRefreshVariant && prependOnlyStyles, ";;label:prependOnly;"),
-      appendOnly: /*#__PURE__*/css(logicalCSS('border-top-left-radius', 'inherit'), " ", logicalCSS('border-bottom-left-radius', 'inherit'), " ", isRefreshVariant && appendOnlyStyles, ";;label:appendOnly;")
+      inGroup: /*#__PURE__*/css("flex-grow:1;overflow:hidden;>:first-child{border-radius:inherit;", logicalCSS('border-top-left-radius', '0'), " ", logicalCSS('border-bottom-left-radius', '0'), ";}>:last-child{border-radius:inherit;", logicalCSS('border-top-right-radius', '0'), " ", logicalCSS('border-bottom-right-radius', '0'), ";};label:inGroup;"),
+      prependOnly: /*#__PURE__*/css(logicalCSS('border-top-right-radius', 'inherit'), " ", logicalCSS('border-bottom-right-radius', 'inherit'), ">:last-child{", logicalCSS('border-top-right-radius', 'inherit'), " ", logicalCSS('border-bottom-right-radius', 'inherit'), ";};label:prependOnly;"),
+      appendOnly: /*#__PURE__*/css(logicalCSS('border-top-left-radius', 'inherit'), " ", logicalCSS('border-bottom-left-radius', 'inherit'), ">:first-child{", logicalCSS('border-top-left-radius', 'inherit'), " ", logicalCSS('border-bottom-left-radius', 'inherit'), ";};label:appendOnly;")
     }
   };
 };
 export var euiFormControlLayoutSideNodeStyles = function euiFormControlLayoutSideNodeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
-  var uncompressedHeight = mathWithUnits([form.controlHeight, euiTheme.border.width.thin], function (x, y) {
-    return isRefreshVariant ? x : x - y * 2;
-  });
-  var compressedHeight = mathWithUnits([form.controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
-    return isRefreshVariant ? x : x - y * 2;
-  });
+  var uncompressedHeight = form.controlHeight;
+  var compressedHeight = form.controlCompressedHeight;
   var buttons = '*:is(.euiButton, .euiButtonEmpty, .euiButtonIcon)';
   var text = '*:is(.euiFormLabel, .euiText)';
-  var appendStyles = "\n    position: relative;\n    ".concat(logicalCSS('margin-left', "-".concat(euiTheme.border.width.thin)), "\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      pointer-events: none;\n      border-inline-start: \n        ").concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n    }\n  ");
-  var prependStyles = "\n    position: relative;\n    ".concat(logicalCSS('margin-right', "-".concat(euiTheme.border.width.thin)), "\n\n    &::before {\n      content: '';\n      position: absolute;\n      inset: 0;\n      z-index: 1;\n      pointer-events: none;\n      border-inline-end: \n        ").concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n    }\n  ");
   return {
     euiFormControlLayout__side: /*#__PURE__*/css(logicalCSS('height', '100%'), " ", euiTextTruncate('50%'), " flex-shrink:0;display:flex;align-items:center;gap:", euiTheme.size.xs, ";background-color:", form.appendPrependBackground, ";", buttons, "{transform:none!important;&:focus-visible{outline-offset:-", euiTheme.focus.width, ";}}", text, "{cursor:default;overflow:hidden;text-overflow:ellipsis;}&:not(:has(> ", buttons, ":first-child, > *:first-child > ", buttons, ")){", logicalCSS('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", logicalCSS('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
     append: /*#__PURE__*/css(highContrastModeStyles(euiThemeContext, {
-      none: "\n          ".concat(isRefreshVariant && appendStyles, "\n        "),
+      none: "\n          position: relative;\n          ".concat(logicalCSS('margin-left', "-".concat(euiTheme.border.width.thin)), "\n\n          &::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            pointer-events: none;\n            border-inline-start: \n              ").concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n          }\n        "),
       preferred: logicalCSS('border-left', euiTheme.border.thin)
     }), ";label:append;"),
     prepend: /*#__PURE__*/css(highContrastModeStyles(euiThemeContext, {
-      none: "\n          ".concat(isRefreshVariant && prependStyles, "\n        "),
+      none: "\n          position: relative;\n          ".concat(logicalCSS('margin-right', "-".concat(euiTheme.border.width.thin)), "\n\n          &::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            z-index: 1;\n            pointer-events: none;\n            border-inline-end: \n              ").concat(euiTheme.border.width.thin, " solid ").concat(form.borderColor, ";\n          }\n        "),
       preferred: logicalCSS('border-right', euiTheme.border.thin)
     }), ";label:prepend;"),
     uncompressed: "\n      ".concat(text, " {\n        ").concat(logicalCSS('padding-horizontal', euiTheme.size.xs), "\n        line-height: ").concat(uncompressedHeight, ";\n      }\n\n      ").concat(buttons, " {\n        ").concat(logicalCSS('height', uncompressedHeight), "\n      }\n\n      .euiButtonIcon {\n        flex-shrink: 0;\n        ").concat(logicalCSS('width', euiTheme.size.xl), "\n      }\n    "),

package/es/components/form/form_control_layout/form_control_layout_clear_button.styles.js

@@ -8,14 +8,12 @@
 
 import { css } from '@emotion/react';
 import { logicalSizeCSS, mathWithUnits } from '../../../global_styling';
-import { isEuiThemeRefreshVariant } from '../../../services';
 export var EuiFormControlLayoutClearButtonStyles = function EuiFormControlLayoutClearButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
-  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var backgroundColor = highContrastMode ? euiTheme.colors.darkShade : euiTheme.components.forms.clearButtonBackground;
   return {
-    euiFormControlLayoutClearButton: /*#__PURE__*/css("pointer-events:all;display:flex;justify-content:center;align-items:center;border-radius:50%;border-style:solid;border-color:", backgroundColor, ";&:disabled{cursor:not-allowed;background-color:", isRefreshVariant ? euiTheme.colors.backgroundBaseDisabled : euiTheme.colors.disabled, ";};label:euiFormControlLayoutClearButton;"),
+    euiFormControlLayoutClearButton: /*#__PURE__*/css("pointer-events:all;display:flex;justify-content:center;align-items:center;border-radius:50%;border-style:solid;border-color:", backgroundColor, ";&:disabled{cursor:not-allowed;background-color:", euiTheme.colors.backgroundBaseDisabled, ";};label:euiFormControlLayoutClearButton;"),
     size: {
       s: "\n        ".concat(logicalSizeCSS(euiTheme.size.m), "\n        border-width: ").concat(mathWithUnits(euiTheme.size.m, function (x) {
         return x / 2;