@elastic/eui 107.0.0 → 108.0.0

package/test-env/components/form/file_picker/file_picker.styles.js

@@ -5,7 +5,6 @@ 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)."; } /*
@@ -42,17 +41,16 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerStyles(euiThemeContext) {
   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;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, {
+    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:solid;}&: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;"),
+    isDroppingFile: /*#__PURE__*/(0, _react.css)("--euiFormControlStateColor:", euiTheme.colors.borderStrongSuccess, ";--euiFormControlStateStyle:", highContrastMode === 'forced' ? 'solid' : 'dashed', ";background-color:", euiTheme.components.forms.backgroundDropping, ";;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;"),
@@ -64,11 +62,11 @@ var euiFilePickerStyles = exports.euiFilePickerStyles = function euiFilePickerSt
     // The input is an invisible dropzone / button
     input: {
       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, {
+      largeInteractive: /*#__PURE__*/(0, _react.css)("&:hover,&:focus,.euiFilePicker-isDroppingFile &{&+.euiFilePicker__prompt{.euiFilePicker__promptText{", (0, _global_styling.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__*/(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;"),
+    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.thin, " var(--euiFormControlStateStyle, dashed) var(--euiFormControlStateColor, ", formVariables.borderColor, ");", _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,

package/test-env/components/form/form.styles.js

@@ -32,7 +32,6 @@ var euiFormPlaceholderStyles = exports.euiFormPlaceholderStyles = function euiFo
 var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var backgroundColor = highContrastMode ? euiTheme.colors.emptyShade : euiTheme.components.forms.background;
   var controlHeight = euiTheme.size.xxl;
   var controlCompressedHeight = euiTheme.size.xl;
@@ -42,12 +41,12 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     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: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 1.5;
     }),
-    iconCompressedAffordance: (0, _global_styling.mathWithUnits)(isRefreshVariant ? euiTheme.size.base : euiTheme.size.m, function (x) {
+    iconCompressedAffordance: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 1.5;
     }),
     stateUnderlineHeight: highContrastMode ? (0, _global_styling.mathWithUnits)(euiTheme.border.width.thick, function (x) {
@@ -67,7 +66,7 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     borderInvalidHovered: euiTheme.components.forms.borderInvalidHovered,
     controlDisabledColor: euiTheme.components.forms.controlBackgroundDisabled,
     controlBoxShadow: '0 0 transparent',
-    controlPlaceholderText: isRefreshVariant ? highContrastMode ? (0, _services.makeHighContrastColor)(euiTheme.components.forms.colorDisabled)(backgroundColor) : euiTheme.components.forms.colorDisabled : (0, _services.makeHighContrastColor)(euiTheme.colors.textSubdued)(backgroundColor),
+    controlPlaceholderText: highContrastMode ? (0, _services.makeHighContrastColor)(euiTheme.components.forms.colorDisabled)(backgroundColor) : euiTheme.components.forms.colorDisabled,
     appendPrependBackground: euiTheme.components.forms.prependBackground
   };
   var controlLayout = {
@@ -94,7 +93,6 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
 };
 var formControlLayoutWrapperSelector = '.euiFormControlLayout__childrenWrapper';
 var euiFormControlStyles = exports.euiFormControlStyles = function euiFormControlStyles(euiThemeContext) {
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
   return {
     shared: "\n      ".concat(euiFormControlText(euiThemeContext), "\n      ").concat(euiFormControlDefaultShadow(euiThemeContext), "\n    "),
@@ -105,7 +103,7 @@ var euiFormControlStyles = exports.euiFormControlStyles = function euiFormContro
     inGroup: "\n      ".concat((0, _global_styling.logicalCSS)('height', '100%'), "\n      ").concat((0, _high_contrast.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((0, _global_styling.logicalCSS)('max-width', form.maxWidth), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
     fullWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
@@ -131,29 +129,21 @@ var euiFormControlDefaultShadow = exports.euiFormControlDefaultShadow = function
     _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 = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var form = euiFormVariables(euiThemeContext);
   var border = (0, _high_contrast.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 = (0, _high_contrast.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 ? (0, _global_styling.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(_global_styling.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"])';
 var disableFormControlHoverStyles = exports.disableFormControlHoverStyles = function disableFormControlHoverStyles() {
@@ -168,43 +158,33 @@ var euiFormControlHoverStyles = exports.euiFormControlHoverStyles = function eui
 var euiFormControlHighlightBorderStyles = exports.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";
 var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.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((0, _high_contrast.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((0, _high_contrast.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    ");
 };
 var euiFormControlInvalidStyles = exports.euiFormControlInvalidStyles = function euiFormControlInvalidStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
-  var isRefreshVariant = (0, _services.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    ");
 };
 var euiFormControlDisabledStyles = exports.euiFormControlDisabledStyles = function euiFormControlDisabledStyles(euiThemeContext) {
-  var isRefreshVariant = (0, _services.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  ");
 };
 var euiFormControlReadOnlyStyles = exports.euiFormControlReadOnlyStyles = function euiFormControlReadOnlyStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.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((0, _high_contrast.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((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
     preferred: 'box-shadow: none;'
-  }), "\n    ") : "\n      --euiFormControlStateColor: transparent;\n      ".concat((0, _high_contrast.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  ");
 };
 var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = function euiFormControlAutoFillStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.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;
@@ -221,15 +201,13 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
   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  ");
 };
 var euiFormControlShowBackgroundLine = exports.euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   if (highContrastMode !== 'forced') {
     return 'background-size: 100% 100%;';
   }
@@ -241,13 +219,12 @@ var euiFormControlShowBackgroundLine = exports.euiFormControlShowBackgroundLine
   // 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((0, _global_styling.mathWithUnits)(strokeWidth, function (x) {
+  return "\n      background-size: calc(100% - ".concat((0, _global_styling.mathWithUnits)(strokeWidth, function (x) {
     return x / 2;
   }), ") calc(100% - ").concat((0, _global_styling.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/test-env/components/form/form_control_layout/form_control_layout.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFormControlLayoutStyles = exports.euiFormControlLayoutSideNodeStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 var _high_contrast = require("../../../global_styling/functions/high_contrast");
 var _form = require("../form.styles");
@@ -34,12 +33,7 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var euiFormControlLayoutStyles = exports.euiFormControlLayoutStyles = function euiFormControlLayoutStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var form = (0, _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((0, _global_styling.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((0, _global_styling.logicalCSS)('border-top-left-radius', '0'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', '0'), "\n      }\n\n      > :last-child {\n        border-radius: inherit;\n        ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', '0'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', '0'), "\n      }\n  ");
-  var prependOnlyStyles = "\n      > :last-child {\n        ".concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n      }\n  ");
-  var appendOnlyStyles = "\n      > :first-child {\n        ".concat((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), "\n        ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), "\n      }\n  ");
   return {
     euiFormControlLayout: _ref2,
     // Skip the css`` on the default height to avoid generating a className
@@ -49,41 +43,34 @@ var euiFormControlLayoutStyles = exports.euiFormControlLayoutStyles = function e
     formWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', form.maxWidth), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
     fullWidth: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), ";;label:fullWidth;"),
     group: {
-      group: /*#__PURE__*/(0, _react.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;}>*{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:group;"),
+      group: /*#__PURE__*/(0, _react.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;", (0, _global_styling.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;}>*{", (0, _global_styling.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__*/(0, _react.css)("flex-grow:1;overflow:hidden;", isRefreshVariant && wrapperGroupStyles, ";;label:inGroup;"),
-      prependOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), " ", isRefreshVariant && prependOnlyStyles, ";;label:prependOnly;"),
-      appendOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), " ", isRefreshVariant && appendOnlyStyles, ";;label:appendOnly;")
+      inGroup: /*#__PURE__*/(0, _react.css)("flex-grow:1;overflow:hidden;>:first-child{border-radius:inherit;", (0, _global_styling.logicalCSS)('border-top-left-radius', '0'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', '0'), ";}>:last-child{border-radius:inherit;", (0, _global_styling.logicalCSS)('border-top-right-radius', '0'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', '0'), ";};label:inGroup;"),
+      prependOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ">:last-child{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";};label:prependOnly;"),
+      appendOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), ">:first-child{", (0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), ";};label:appendOnly;")
     }
   };
 };
 var euiFormControlLayoutSideNodeStyles = exports.euiFormControlLayoutSideNodeStyles = function euiFormControlLayoutSideNodeStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var form = (0, _form.euiFormVariables)(euiThemeContext);
-  var uncompressedHeight = (0, _global_styling.mathWithUnits)([form.controlHeight, euiTheme.border.width.thin], function (x, y) {
-    return isRefreshVariant ? x : x - y * 2;
-  });
-  var compressedHeight = (0, _global_styling.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((0, _global_styling.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((0, _global_styling.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__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.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, ")){", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";}&:not(:has(> ", buttons, ":last-child, > *:last-child > ", buttons, ")){", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.s), ";};label:euiFormControlLayout__side;"),
     append: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      none: "\n          ".concat(isRefreshVariant && appendStyles, "\n        "),
+      none: "\n          position: relative;\n          ".concat((0, _global_styling.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: (0, _global_styling.logicalCSS)('border-left', euiTheme.border.thin)
     }), ";label:append;"),
     prepend: /*#__PURE__*/(0, _react.css)((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-      none: "\n          ".concat(isRefreshVariant && prependStyles, "\n        "),
+      none: "\n          position: relative;\n          ".concat((0, _global_styling.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: (0, _global_styling.logicalCSS)('border-right', euiTheme.border.thin)
     }), ";label:prepend;"),
     uncompressed: "\n      ".concat(text, " {\n        ").concat((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), "\n        line-height: ").concat(uncompressedHeight, ";\n      }\n\n      ").concat(buttons, " {\n        ").concat((0, _global_styling.logicalCSS)('height', uncompressedHeight), "\n      }\n\n      .euiButtonIcon {\n        flex-shrink: 0;\n        ").concat((0, _global_styling.logicalCSS)('width', euiTheme.size.xl), "\n      }\n    "),

package/test-env/components/form/form_control_layout/form_control_layout_clear_button.styles.js

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiFormControlLayoutClearButtonStyles = void 0;
 var _react = require("@emotion/react");
 var _global_styling = require("../../../global_styling");
-var _services = require("../../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,10 +17,9 @@ var _services = require("../../../services");
 var EuiFormControlLayoutClearButtonStyles = exports.EuiFormControlLayoutClearButtonStyles = function EuiFormControlLayoutClearButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var backgroundColor = highContrastMode ? euiTheme.colors.darkShade : euiTheme.components.forms.clearButtonBackground;
   return {
-    euiFormControlLayoutClearButton: /*#__PURE__*/(0, _react.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__*/(0, _react.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((0, _global_styling.logicalSizeCSS)(euiTheme.size.m), "\n        border-width: ").concat((0, _global_styling.mathWithUnits)(euiTheme.size.m, function (x) {
         return x / 2;

package/test-env/components/form/form_control_layout/form_control_layout_delimited.js

@@ -37,8 +37,6 @@ var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = func
     className = _ref.className,
     _fullWidth = _ref.fullWidth,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var euiThemeContext = (0, _services.useEuiTheme)();
-  var isRefreshVariant = (0, _services.useEuiThemeRefreshVariant)('formVariant');
   var _useFormContext = (0, _eui_form_context.useFormContext)(),
     defaultFullWidth = _useFormContext.defaultFullWidth;
   var fullWidth = _fullWidth !== null && _fullWidth !== void 0 ? _fullWidth : defaultFullWidth;
@@ -51,7 +49,7 @@ var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = func
   });
   var styles = (0, _services.useEuiMemoizedStyles)(_form_control_layout_delimited.euiFormControlLayoutDelimitedStyles);
   var cssStyles = [styles.delimited, rest.isDisabled && styles.disabled, rest.readOnly && styles.readOnly];
-  var wrapperStyles = [styles.childrenWrapper.delimited, showInvalidState && styles.childrenWrapper.invalid, (_rest$wrapperProps = rest.wrapperProps) === null || _rest$wrapperProps === void 0 ? void 0 : _rest$wrapperProps.css, isRefreshVariant && rest.readOnly && styles.childrenWrapper.readOnly];
+  var wrapperStyles = [styles.childrenWrapper.delimited, showInvalidState && styles.childrenWrapper.invalid, (_rest$wrapperProps = rest.wrapperProps) === null || _rest$wrapperProps === void 0 ? void 0 : _rest$wrapperProps.css, rest.readOnly && styles.childrenWrapper.readOnly];
   return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, (0, _extends2.default)({
     isDelimited: true,
     css: cssStyles,
@@ -66,10 +64,10 @@ var EuiFormControlLayoutDelimited = exports.EuiFormControlLayoutDelimited = func
     value: {
       defaultFullWidth: fullWidth
     }
-  }, startControl && addClassesToControl(euiThemeContext, startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
+  }, startControl && addClassesToControl(startControl), (0, _react2.jsx)(EuiFormControlDelimiter, {
     delimiter: delimiter,
     isInvalid: showInvalidState
-  }), endControl && addClassesToControl(euiThemeContext, endControl)));
+  }), endControl && addClassesToControl(endControl)));
 };
 EuiFormControlLayoutDelimited.propTypes = {
   /**
@@ -87,9 +85,9 @@ EuiFormControlLayoutDelimited.propTypes = {
   delimiter: _propTypes.default.node,
   className: _propTypes.default.string
 };
-var addClassesToControl = function addClassesToControl(euiThemeContext, control) {
+var addClassesToControl = function addClassesToControl(control) {
   return (0, _services.cloneElementWithCss)(control, {
-    css: (0, _form_control_layout_delimited.euiFormControlLayoutDelimited__input)(euiThemeContext),
+    css: _form_control_layout_delimited.euiFormControlLayoutDelimited__input,
     className: (0, _classnames.default)(control.props.className, 'euiFormControlLayoutDelimited__input')
   }, 'before');
 };

package/test-env/components/form/form_control_layout/form_control_layout_delimited.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFormControlLayoutDelimited__input = exports.euiFormControlLayoutDelimited__delimiter = exports.euiFormControlLayoutDelimitedStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 var _form = require("../form.styles");
 /*
@@ -18,46 +17,34 @@ var _form = require("../form.styles");
 
 var euiFormControlLayoutDelimitedStyles = exports.euiFormControlLayoutDelimitedStyles = function euiFormControlLayoutDelimitedStyles(euiThemeContext) {
   var highContrastMode = euiThemeContext.highContrastMode;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var form = (0, _form.euiFormVariables)(euiThemeContext);
-  var invalidStyles = isRefreshVariant ? "\n    :not(.euiFormControlLayoutDelimited__input, .euiFormControlLayoutDelimited__delimiter) {\n      ".concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), "\n    }\n\n    &:focus-within {\n      --euiFormControlStateColor: ").concat(form.borderColor, ";\n      --euiFormControlStateHoverColor: ").concat(form.borderHovered, ";\n    }\n\n    .euiFormControlLayoutDelimited__input {\n      background-color: transparent;\n    }\n  ") : "\n    ".concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";\n  ");
-  var readOnlyStyles = "\n      & .euiFormControlLayoutDelimited__input {\n        outline: none;  \n        box-shadow: none;\n        --euiFormControlStateColor: transparent;\n      }\n    ";
   var delimitedStyles = "\n      /* Transition smoothly between disabled/readOnly background color changes */\n      ".concat((0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
-    withBorder: isRefreshVariant && !highContrastMode ? true : false,
-    withBackground: false,
-    withBackgroundAnimation: isRefreshVariant ? false : true
+    withBorder: !highContrastMode ? true : false,
+    withBackground: false
   }), "\n    ").trim();
-  var delimitedWrapperStyles = "\n    ".concat((0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
-    withBorder: !highContrastMode,
-    withBackground: false,
-    withBackgroundAnimation: true
-  }), "\n  \n    &:hover {\n      ").concat((0, _form.euiFormControlHoverStyles)(euiThemeContext), "\n      box-shadow: none;\n\n      /* using hover styling on wrapper instead of the children inputs */\n      .euiFormControlLayoutDelimited__input:not(:focus) {\n        outline: none;\n        background-color: transparent;\n      }\n    }\n\n    /* adjust for delimited behavior differing from default form layout */\n    > :first-child {\n      ").concat((0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), "\n      ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), "\n    }\n\n    > :last-child {\n      ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n      ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n    }\n  ");
   return {
     // Appended onto existing `euiFormControlLayout` styles
     delimited: /*#__PURE__*/(0, _react.css)(delimitedStyles, ";label:delimited;"),
     disabled: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";label:disabled;"),
-    readOnly: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlReadOnlyStyles)(euiThemeContext), " ", isRefreshVariant && readOnlyStyles, ";;label:readOnly;"),
+    readOnly: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlReadOnlyStyles)(euiThemeContext), " & .euiFormControlLayoutDelimited__input{--euiFormControlStateColor:transparent;outline:none;box-shadow:none;};label:readOnly;"),
     // Appended onto existing `euiFormControlLayout__childrenWrapper` styles
     childrenWrapper: {
-      delimited: /*#__PURE__*/(0, _react.css)("display:flex;", isRefreshVariant && delimitedWrapperStyles, ";;label:delimited;"),
+      delimited: /*#__PURE__*/(0, _react.css)("display:flex;", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+        withBorder: !highContrastMode,
+        withBackground: false
+      }), " &:hover{", (0, _form.euiFormControlHoverStyles)(euiThemeContext), " box-shadow:none;.euiFormControlLayoutDelimited__input:not(:focus){outline:none;background-color:transparent;}}>:first-child{", (0, _global_styling.logicalCSS)('border-top-left-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-left-radius', 'inherit'), ";}>:last-child{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";};label:delimited;"),
       invalid: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
         withBorder: false,
-        withBackgroundColor: false,
-        withBackgroundAnimation: false
-      }), "\n          ".concat(invalidStyles, "\n        "), ";label:invalid;"),
+        withBackgroundColor: false
+      }), "\n          :not(.euiFormControlLayoutDelimited__input, .euiFormControlLayoutDelimited__delimiter) {\n            ".concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), "\n          }\n\n          &:focus-within {\n            --euiFormControlStateColor: ").concat(form.borderColor, ";\n            --euiFormControlStateHoverColor: ").concat(form.borderHovered, ";\n          }\n\n          .euiFormControlLayoutDelimited__input {\n            background-color: transparent;\n          }\n        "), ";label:invalid;"),
       readOnly: /*#__PURE__*/(0, _react.css)(";label:readOnly;")
     }
   };
 };
 var euiFormControlLayoutDelimited__delimiter = exports.euiFormControlLayoutDelimited__delimiter = function euiFormControlLayoutDelimited__delimiter(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
-  var experimentalStyles = isRefreshVariant && "\n      ".concat((0, _global_styling.logicalCSS)('padding-horizontal', (0, _global_styling.mathWithUnits)([euiTheme.size.xs, euiTheme.size.xxs], function (x, y) {
+  return /*#__PURE__*/(0, _react.css)("display:flex;align-self:stretch;flex-grow:0;align-items:center;line-height:1;", (0, _global_styling.logicalCSS)('padding-horizontal', (0, _global_styling.mathWithUnits)([euiTheme.size.xs, euiTheme.size.xxs], function (x, y) {
     return x + y;
-  })), "\n  ");
-  return /*#__PURE__*/(0, _react.css)("display:flex;align-self:stretch;flex-grow:0;align-items:center;line-height:1;", experimentalStyles, ";;label:euiFormControlLayoutDelimited__delimiter;");
+  })), ";;label:euiFormControlLayoutDelimited__delimiter;");
 };
-var euiFormControlLayoutDelimited__input = exports.euiFormControlLayoutDelimited__input = function euiFormControlLayoutDelimited__input(euiThemeContext) {
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
-  return /*#__PURE__*/(0, _react.css)("box-shadow:none;border:none;border-radius:", isRefreshVariant ? '' : '0', ";text-align:center;", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");
-};
+var euiFormControlLayoutDelimited__input = exports.euiFormControlLayoutDelimited__input = /*#__PURE__*/(0, _react.css)("box-shadow:none;border:none;text-align:center;", (0, _global_styling.logicalCSS)('height', '100%'), ";;label:euiFormControlLayoutDelimited__input;");

package/test-env/components/form/form_control_layout/form_control_layout_icons.js

@@ -73,7 +73,6 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
     value: function renderCustomIcon() {
       var _this$props2 = this.props,
         icon = _this$props2.icon,
-        compressed = _this$props2.compressed,
         isDisabled = _this$props2.isDisabled;
       if (!icon) {
         return null;
@@ -86,84 +85,63 @@ var EuiFormControlLayoutIcons = exports.EuiFormControlLayoutIcons = /*#__PURE__*
       var iconRef = iconProps.ref,
         side = iconProps.side,
         iconRest = (0, _objectWithoutProperties2.default)(iconProps, _excluded);
-      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
-        var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
-        return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, (0, _extends2.default)({
-          size: compressed && !isRefreshVariant ? 's' : 'm',
-          disabled: isDisabled,
-          iconRef: iconRef
-        }, iconRest));
-      });
+      return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, (0, _extends2.default)({
+        size: "m",
+        disabled: isDisabled,
+        iconRef: iconRef
+      }, iconRest));
     }
   }, {
     key: "renderDropdownIcon",
     value: function renderDropdownIcon() {
       var _this$props3 = this.props,
         isDropdown = _this$props3.isDropdown,
-        compressed = _this$props3.compressed,
         isDisabled = _this$props3.isDisabled;
       if (!isDropdown) {
         return null;
       }
-      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
-        var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
-        return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, {
-          size: compressed && !isRefreshVariant ? 's' : 'm',
-          disabled: isDisabled,
-          type: "arrowDown"
-        });
+      return (0, _react2.jsx)(_form_control_layout_custom_icon.EuiFormControlLayoutCustomIcon, {
+        size: "m",
+        disabled: isDisabled,
+        type: "arrowDown"
       });
     }
   }, {
     key: "renderLoadingSpinner",
     value: function renderLoadingSpinner() {
-      var _this$props4 = this.props,
-        isLoading = _this$props4.isLoading,
-        compressed = _this$props4.compressed;
+      var isLoading = this.props.isLoading;
       if (!isLoading) {
         return null;
       }
-      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
-        var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
-        return (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
-          size: compressed && !isRefreshVariant ? 's' : 'm'
-        });
+      return (0, _react2.jsx)(_loading.EuiLoadingSpinner, {
+        size: "m"
       });
     }
   }, {
     key: "renderClearButton",
     value: function renderClearButton() {
-      var _this$props5 = this.props,
-        clear = _this$props5.clear,
-        compressed = _this$props5.compressed,
-        isDisabled = _this$props5.isDisabled;
+      var _this$props4 = this.props,
+        clear = _this$props4.clear,
+        isDisabled = _this$props4.isDisabled;
       if (!clear) {
         return null;
       }
-      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
-        var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
-        return (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, (0, _extends2.default)({
-          size: compressed && !isRefreshVariant ? 's' : 'm',
-          disabled: isDisabled
-        }, clear));
-      });
+      return (0, _react2.jsx)(_form_control_layout_clear_button.EuiFormControlLayoutClearButton, (0, _extends2.default)({
+        size: "m",
+        disabled: isDisabled
+      }, clear));
     }
   }, {
     key: "renderInvalidIcon",
     value: function renderInvalidIcon() {
-      var _this$props6 = this.props,
-        isInvalid = _this$props6.isInvalid,
-        compressed = _this$props6.compressed;
+      var isInvalid = this.props.isInvalid;
       if (!isInvalid) {
         return null;
       }
-      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
-        var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
-        return (0, _react2.jsx)(_icon.EuiIcon, {
-          size: compressed && !isRefreshVariant ? 's' : 'm',
-          color: "danger",
-          type: "warning"
-        });
+      return (0, _react2.jsx)(_icon.EuiIcon, {
+        size: "m",
+        color: "danger",
+        type: "warning"
       });
     }
   }]);

package/test-env/components/form/form_error_text/form_error_text.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFormErrorTextStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -17,8 +16,7 @@ var _global_styling = require("../../../global_styling");
 
 var euiFormErrorTextStyles = exports.euiFormErrorTextStyles = function euiFormErrorTextStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   return {
-    euiFormErrorText: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", isRefreshVariant ? euiTheme.colors.textDanger : euiTheme.colors.danger, ";;label:euiFormErrorText;")
+    euiFormErrorText: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-top', euiTheme.size.xs), " ", (0, _global_styling.euiFontSize)(euiThemeContext, 'xs'), " color:", euiTheme.colors.textDanger, ";;label:euiFormErrorText;")
   };
 };

package/test-env/components/form/form_label/form_label.js

@@ -31,7 +31,7 @@ var EuiFormLabel = exports.EuiFormLabel = function EuiFormLabel(_ref) {
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var styles = (0, _services.useEuiMemoizedStyles)(_form_label.euiFormLabelStyles);
-  var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid, isFocused && styles.focused];
+  var cssStyles = [styles.euiFormLabel, !isDisabled && styles.notDisabled, isInvalid && styles.invalid];
   var classes = (0, _classnames.default)('euiFormLabel', className, {
     'euiFormLabel-isFocused': isFocused,
     'euiFormLabel-isInvalid': isInvalid,