@elastic/eui 107.0.1 → 109.0.0

package/test-env/components/combo_box/combo_box_input/combo_box_input.js

@@ -245,70 +245,67 @@ var EuiComboBoxInput = exports.EuiComboBoxInput = /*#__PURE__*/function (_Compon
       var wrapClasses = (0, _classnames.default)('euiComboBox__inputWrap', {
         'euiComboBox__inputWrap--plainText': this.asPlainText
       });
-      return (0, _react2.jsx)(_services.RenderWithEuiTheme, null, function (euiThemeContext) {
-        return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
-          var styles = stylesMemoizer(_combo_box_input.euiComboBoxInputStyles);
-          var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
-          var stateCss = isRefreshVariant ? isListOpen ? styles.open : isInvalid ? styles.invalid : undefined : isInvalid ? styles.invalid : isListOpen ? styles.open : undefined;
-          var cssStyles = [styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed].concat((0, _toConsumableArray2.default)(_this2.asPlainText || showPlaceholder ? [styles.plainText.plainText, compressed ? styles.plainText.compressed : styles.plainText.uncompressed] : []), [isDisabled ? styles.disabled : stateCss, isInGroup && styles.inGroup]);
-          var formLayoutStyles = [styles.formLayout.euiComboBox__formControlLayout, !singleSelection && styles.formLayout.multiSelect];
-          return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, (0, _extends2.default)({
-            icon: icon
-          }, clickProps, {
-            inputId: id,
-            isLoading: isLoading,
-            isInvalid: isInvalid,
-            isDisabled: isDisabled,
-            compressed: compressed,
-            fullWidth: fullWidth,
-            prepend: prepend,
-            append: append,
-            css: formLayoutStyles
-          }), (0, _react2.jsx)("div", {
-            css: cssStyles,
-            className: wrapClasses,
-            "data-test-subj": "comboBoxInput",
-            onClick: onClick,
-            tabIndex: -1 // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
-          }, _this2.renderPills(), (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
-            option: _this2.asPlainText ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0] : undefined,
-            classNamePrefix: "euiComboBoxPlainTextSelection",
-            marginSize: "xxs"
-          }, (0, _react2.jsx)("input", {
-            "aria-activedescendant": focusedOptionId,
-            "aria-autocomplete": "list",
-            "aria-controls": isListOpen ? rootId('listbox') : '',
-            "aria-expanded": isListOpen,
-            "aria-label": ariaLabel,
-            "aria-labelledby": ariaLabelledby,
-            "aria-describedby": ariaDescribedby,
-            "aria-invalid": isInvalid,
-            "aria-haspopup": "listbox",
-            css: styles.euiComboBoxInput,
-            className: "euiComboBox__input",
-            "data-test-subj": "comboBoxSearchInput",
-            disabled: isDisabled,
-            id: id,
-            onBlur: _this2.onBlur,
-            onChange: function onChange(event) {
-              return _onChange(event.target.value);
-            },
-            onFocus: _this2.onFocus,
-            onKeyDown: _this2.onKeyDown,
-            ref: _this2.inputRefCallback,
-            role: "combobox",
-            style: {
-              inlineSize: _this2.asPlainText || showPlaceholder ? '100%' : _this2.state.inputWidth
-            },
-            placeholder: showPlaceholder ? placeholder : undefined,
-            value: _this2.searchValue,
-            autoFocus: autoFocus,
-            autoComplete: "off"
-            // Force the menu to re-open on every input click - only necessary when plain text
-            ,
-            onClick: _this2.asPlainText ? onFocus : undefined // Type shenanigans - event should be mostly the same
-          })), removeOptionMessage));
-        });
+      return (0, _react2.jsx)(_services.RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+        var styles = stylesMemoizer(_combo_box_input.euiComboBoxInputStyles);
+        var stateCss = isListOpen ? styles.open : isInvalid ? styles.invalid : undefined;
+        var cssStyles = [styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed].concat((0, _toConsumableArray2.default)(_this2.asPlainText || showPlaceholder ? [styles.plainText.plainText, compressed ? styles.plainText.compressed : styles.plainText.uncompressed] : []), [isDisabled ? styles.disabled : stateCss, isInGroup && styles.inGroup]);
+        var formLayoutStyles = [styles.formLayout.euiComboBox__formControlLayout, !singleSelection && styles.formLayout.multiSelect];
+        return (0, _react2.jsx)(_form_control_layout.EuiFormControlLayout, (0, _extends2.default)({
+          icon: icon
+        }, clickProps, {
+          inputId: id,
+          isLoading: isLoading,
+          isInvalid: isInvalid,
+          isDisabled: isDisabled,
+          compressed: compressed,
+          fullWidth: fullWidth,
+          prepend: prepend,
+          append: append,
+          css: formLayoutStyles
+        }), (0, _react2.jsx)("div", {
+          css: cssStyles,
+          className: wrapClasses,
+          "data-test-subj": "comboBoxInput",
+          onClick: onClick,
+          tabIndex: -1 // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
+        }, _this2.renderPills(), (0, _react2.jsx)(_utils.EuiComboBoxOptionAppendPrepend, {
+          option: _this2.asPlainText ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0] : undefined,
+          classNamePrefix: "euiComboBoxPlainTextSelection",
+          marginSize: "xxs"
+        }, (0, _react2.jsx)("input", {
+          "aria-activedescendant": focusedOptionId,
+          "aria-autocomplete": "list",
+          "aria-controls": isListOpen ? rootId('listbox') : '',
+          "aria-expanded": isListOpen,
+          "aria-label": ariaLabel,
+          "aria-labelledby": ariaLabelledby,
+          "aria-describedby": ariaDescribedby,
+          "aria-invalid": isInvalid,
+          "aria-haspopup": "listbox",
+          css: styles.euiComboBoxInput,
+          className: "euiComboBox__input",
+          "data-test-subj": "comboBoxSearchInput",
+          disabled: isDisabled,
+          id: id,
+          onBlur: _this2.onBlur,
+          onChange: function onChange(event) {
+            return _onChange(event.target.value);
+          },
+          onFocus: _this2.onFocus,
+          onKeyDown: _this2.onKeyDown,
+          ref: _this2.inputRefCallback,
+          role: "combobox",
+          style: {
+            inlineSize: _this2.asPlainText || showPlaceholder ? '100%' : _this2.state.inputWidth
+          },
+          placeholder: showPlaceholder ? placeholder : undefined,
+          value: _this2.searchValue,
+          autoFocus: autoFocus,
+          autoComplete: "off"
+          // Force the menu to re-open on every input click - only necessary when plain text
+          ,
+          onClick: _this2.asPlainText ? onFocus : undefined // Type shenanigans - event should be mostly the same
+        })), removeOptionMessage));
       });
     }
   }]);

package/test-env/components/combo_box/combo_box_input/combo_box_input.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiComboBoxInputStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../../services");
 var _global_styling = require("../../../global_styling");
 var _form = require("../../form/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)."; } /*
@@ -33,13 +32,12 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 var euiComboBoxInputStyles = exports.euiComboBoxInputStyles = function euiComboBoxInputStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var formStyles = (0, _form.euiFormControlStyles)(euiThemeContext);
   return {
     // Wrapper which visually mimics a form control
-    euiComboBoxInputWrapper: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDefaultShadow)(euiThemeContext), " display:flex;", isRefreshVariant && "\n        &:focus-within {\n          ".concat(formStyles.focus, "\n        }\n      "), ";;label:euiComboBoxInputWrapper;"),
+    euiComboBoxInputWrapper: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDefaultShadow)(euiThemeContext), " display:flex;&:focus-within{", formStyles.focus, ";};label:euiComboBoxInputWrapper;"),
     multiSelect: _ref2,
-    uncompressed: "\n      ".concat(formStyles.uncompressed, "\n      ").concat((0, _global_styling.logicalCSS)('height', 'auto'), "\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.s), "\n      ").concat((0, _global_styling.logicalCSS)('padding-left', isRefreshVariant ? euiTheme.size.m : euiTheme.size.s), "\n      column-gap: ").concat(euiTheme.size.s, ";\n      row-gap: ").concat(euiTheme.size.xs, ";\n    "),
+    uncompressed: "\n      ".concat(formStyles.uncompressed, "\n      ").concat((0, _global_styling.logicalCSS)('height', 'auto'), "\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.s), "\n      ").concat((0, _global_styling.logicalCSS)('padding-left', euiTheme.size.m), "\n      column-gap: ").concat(euiTheme.size.s, ";\n      row-gap: ").concat(euiTheme.size.xs, ";\n    "),
     compressed: /*#__PURE__*/(0, _react.css)(formStyles.compressed, " ", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.xs), " column-gap:", euiTheme.size.xs, ";row-gap:", euiTheme.size.xxs, ";;label:compressed;"),
     plainText: {
       plainText: _ref,

package/test-env/components/datagrid/body/header/column_actions.js

@@ -80,16 +80,6 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
   var closePopover = (0, _react.useCallback)(function () {
     setIsPopoverOpen(false);
   }, []);
-  var _useState3 = (0, _react.useState)(false),
-    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-    isActionsButtonFocused = _useState4[0],
-    setIsActionsButtonFocused = _useState4[1];
-  var onFocus = (0, _react.useCallback)(function () {
-    return setIsActionsButtonFocused(true);
-  }, []);
-  var onBlur = (0, _react.useCallback)(function () {
-    return setIsActionsButtonFocused(false);
-  }, []);
   var actionsButtonAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridHeaderCell.actionsButtonAriaLabel', '{title}. Click to view column header actions.', {
     title: title
   });
@@ -104,10 +94,10 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
   /**
    * Props to set on parent EuiDataGridHeaderCell
    */
-  var _useState5 = (0, _react.useState)(false),
-    _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-    isColumnMoving = _useState6[0],
-    setIsColumnMoving = _useState6[1];
+  var _useState3 = (0, _react.useState)(false),
+    _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+    isColumnMoving = _useState4[0],
+    setIsColumnMoving = _useState4[1];
   (0, _react.useEffect)(function () {
     setPropsFromColumnActions({
       className: isPopoverOpen ? 'euiDataGridHeaderCell--isActionsPopoverOpen' : '',
@@ -153,17 +143,11 @@ var ColumnActions = exports.ColumnActions = /*#__PURE__*/(0, _react.memo)(functi
       iconType: "boxesVertical",
       iconSize: "s",
       color: "text",
-      css: styles.euiDataGridHeaderCell__actions,
       className: "euiDataGridHeaderCell__button",
       onClick: togglePopover,
       buttonRef: actionsButtonRef,
-      onFocus: onFocus,
-      onBlur: onBlur,
-      tabIndex: 0 // Override EuiButtonIcon's conditional tabindex based on aria-hidden
-      ,
-      "aria-hidden": hasFocusTrap && !isActionsButtonFocused ? 'true' // prevent the actions button from being read on cell focus
-      : undefined,
       "aria-label": hasFocusTrap ? actionsButtonAriaLabel : actionsEnterKeyInstructions,
+      css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.end, ";label:ColumnActions;"],
       "data-test-subj": "dataGridHeaderCellActionButton-".concat(id)
     }),
     isOpen: isPopoverOpen,

package/test-env/components/datagrid/body/header/data_grid_header_cell.js

@@ -56,6 +56,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
   var width = columnWidths[id] || defaultColumnWidth;
   var columnType = schema[id] ? schema[id].columnType : null;
   var hasColumnActions = (0, _column_actions.useHasColumnActions)(actions);
+  var cellContentId = "dataGridHeaderCellContent-".concat(id);
   var classes = (0, _classnames2.default)((0, _defineProperty2.default)((0, _defineProperty2.default)({}, "euiDataGridHeaderCell--".concat(columnType), columnType), 'euiDataGridHeaderCell--hasColumnActions', hasColumnActions), displayHeaderCellProps === null || displayHeaderCellProps === void 0 ? void 0 : displayHeaderCellProps.className);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell.euiDataGridHeaderCellStyles);
   var contentStyles = [styles.euiDataGridHeaderCell__content, (columnType === 'numeric' || columnType === 'currency') && styles.right];
@@ -99,8 +100,7 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       isLastColumn: isLastColumn,
       width: width,
       "aria-sort": ariaSort,
-      "aria-label": displayAsText && "".concat(displayAsText, ", ") // ensure cell text content is read first, if available
-      ,
+      "aria-labelledby": cellContentId,
       "aria-describedby": (0, _classnames2.default)(sortingAriaId, dragProps === null || dragProps === void 0 ? void 0 : dragProps['aria-describedby']),
       "data-column-moving": propsFromColumnActions['data-column-moving'] || (dragProps === null || dragProps === void 0 ? void 0 : dragProps['data-column-moving']) || undefined
     }), function (hasFocusTrap) {
@@ -109,11 +109,13 @@ var EuiDataGridHeaderCell = exports.EuiDataGridHeaderCell = /*#__PURE__*/(0, _re
       }, (0, _react2.jsx)(_icon.EuiIcon, {
         type: "grabOmnidirectional",
         size: "s",
-        css: styles.euiDataGridHeaderCell__actions
+        css: [styles.euiDataGridHeaderCell__actions.action, styles.euiDataGridHeaderCell__actions.start, ";label:EuiDataGridHeaderCell;"]
       })), (0, _react2.jsx)("div", {
         css: contentStyles,
         className: "euiDataGridHeaderCell__content",
-        title: title
+        title: title,
+        id: cellContentId,
+        "aria-label": displayAsText ? displayAsText : typeof children === 'string' ? children : undefined
       }, children), sortingArrow, sortingScreenReaderText, hasColumnActions && (0, _react2.jsx)(_column_actions.ColumnActions, {
         index: index,
         id: id,

package/test-env/components/datagrid/body/header/data_grid_header_cell.styles.js

@@ -22,11 +22,18 @@ var euiDataGridHeaderCellStyles = exports.euiDataGridHeaderCellStyles = function
   var euiTheme = euiThemeContext.euiTheme;
   var _euiDataGridCellOutli = (0, _data_grid_cell.euiDataGridCellOutlineSelectors)('.euiDataGridHeaderCell'),
     header = _euiDataGridCellOutli.header;
+  var hideAnimation = function hideAnimation(margin, translateX) {
+    return "\n    ".concat(header.hideActions, " & {\n      ").concat((0, _global_styling.logicalCSS)('margin-left', margin), "\n      transform: translateX(").concat(translateX, ") scale(0.01);\n      opacity: 0;\n    }\n  ");
+  };
   return {
     euiDataGridHeaderCell__content: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.euiTextTruncate)(), ";;label:euiDataGridHeaderCell__content;"),
     // Numeric and currency schemas are aligned to the right
     right: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalTextAlignCSS)('right'), ";;label:right;"),
     euiDataGridHeaderCell__popover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('margin-left', 'auto'), "line-height:0;;label:euiDataGridHeaderCell__popover;"),
-    euiDataGridHeaderCell__actions: /*#__PURE__*/(0, _react.css)("overflow:hidden;display:flex;", header.hideActions, " &{", (0, _global_styling.logicalCSS)('width', 0), " opacity:0;}", _global_styling.euiCanAnimate, "{transition:inline-size ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in;transform:none!important;animation:none!important;};label:euiDataGridHeaderCell__actions;")
+    euiDataGridHeaderCell__actions: {
+      action: /*#__PURE__*/(0, _react.css)("overflow:hidden;display:flex;max-inline-size:24px;", _global_styling.euiCanAnimate, "{transition:transform ", euiTheme.animation.fast, " ease-in,opacity ", euiTheme.animation.slow, " ease-in,margin-left ", euiTheme.animation.fast, " ease-in;animation:none!important;};label:action;"),
+      start: /*#__PURE__*/(0, _react.css)(hideAnimation("-".concat(euiTheme.size.m), '0%'), ";;label:start;"),
+      end: /*#__PURE__*/(0, _react.css)(hideAnimation("-".concat(euiTheme.size.l), '50%'), ";;label:end;")
+    }
   };
 };

package/test-env/components/datagrid/body/header/data_grid_header_cell_wrapper.js

@@ -17,7 +17,7 @@ var _focus = require("../../utils/focus");
 var _focus_utils = require("../cell/focus_utils");
 var _data_grid_header_cell_wrapper = require("./data_grid_header_cell_wrapper.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label"];
+var _excluded = ["id", "index", "isLastColumn", "width", "className", "children", "hasColumnActions", "isDragging", "onKeyDown", "aria-label", "aria-labelledby"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -43,6 +43,7 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     isDragging = _ref.isDragging,
     _onKeyDown = _ref.onKeyDown,
     ariaLabel = _ref['aria-label'],
+    ariaLabelledby = _ref['aria-labelledby'],
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiDataGridHeaderCell', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_data_grid_header_cell_wrapper.euiDataGridHeaderCellWrapperStyles);
@@ -108,7 +109,8 @@ var EuiDataGridHeaderCellWrapper = exports.EuiDataGridHeaderCellWrapper = functi
     style: width != null ? {
       width: "".concat(width, "px")
     } : {},
-    "aria-label": renderFocusTrap ? ariaLabel : undefined
+    "aria-label": renderFocusTrap ? ariaLabel : undefined,
+    "aria-labelledby": renderFocusTrap ? ariaLabelledby : undefined
   }, rest), (0, _react2.jsx)(_focus_utils.HandleInteractiveChildren, {
     cellEl: isDragging ? null : headerEl,
     renderFocusTrap: isDragging ? false : renderFocusTrap,
@@ -124,6 +126,7 @@ EuiDataGridHeaderCellWrapper.propTypes = {
   width: _propTypes.default.oneOfType([_propTypes.default.number.isRequired, _propTypes.default.oneOf([null])]),
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.any,
+  "aria-labelledby": _propTypes.default.any,
   hasColumnActions: _propTypes.default.bool,
   isDragging: _propTypes.default.bool,
   onKeyDown: _propTypes.default.any

package/test-env/components/datagrid/controls/column_selector.styles.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiDataGridColumnSelectorStyles = void 0;
 var _react = require("@emotion/react");
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../../global_styling");
-var _themes = require("../../../themes");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -23,7 +23,7 @@ var euiDataGridColumnSelectorStyles = exports.euiDataGridColumnSelectorStyles =
   var maxResponsiveHeight = "min(".concat(maxStaticHeight, ", 50vh)");
   return {
     euiDataGridColumnSelector: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiYScrollWithShadows)(euiThemeContext), " ", (0, _global_styling.logicalCSS)('max-height', maxResponsiveHeight), " padding:", euiTheme.size.s, ";;label:euiDataGridColumnSelector;"),
-    euiDataGridColumnSelector__item: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.xs, ";&.euiDataGridColumnSelector__item-isDragging{", (0, _themes.euiShadowLarge)(euiThemeContext, {
+    euiDataGridColumnSelector__item: /*#__PURE__*/(0, _react.css)("padding:", euiTheme.size.xs, ";&.euiDataGridColumnSelector__item-isDragging{", (0, _euiThemeCommon.euiShadowLarge)(euiThemeContext, {
       borderAllInHighContrastMode: true
     }), " background-color:", euiTheme.colors.emptyShade, ";};label:euiDataGridColumnSelector__item;")
   };

package/test-env/components/datagrid/controls/column_sorting.styles.js

@@ -5,8 +5,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiDataGridColumnSortingStyles = void 0;
 var _react = require("@emotion/react");
+var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../../global_styling");
-var _themes = require("../../../themes");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,7 +26,7 @@ var euiDataGridColumnSortingStyles = exports.euiDataGridColumnSortingStyles = fu
      * Sorted fields
      */
     euiDataGridColumnSorting: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-height', maxResponsiveHeight), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.size.s), "margin:-", euiTheme.size.s, ";", (0, _global_styling.euiYScrollWithShadows)(euiThemeContext), ";;label:euiDataGridColumnSorting;"),
-    euiDataGridColumnSorting__item: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " &.euiDataGridColumnSorting__item-isDragging{", (0, _themes.euiShadowLarge)(euiThemeContext, {
+    euiDataGridColumnSorting__item: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " &.euiDataGridColumnSorting__item-isDragging{", (0, _euiThemeCommon.euiShadowLarge)(euiThemeContext, {
       borderAllInHighContrastMode: true
     }), " background-color:", euiTheme.colors.emptyShade, ";};label:euiDataGridColumnSorting__item;"),
     euiDataGridColumnSorting__name: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xs), " ", (0, _global_styling.euiMinBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.l), ";};label:euiDataGridColumnSorting__name;"),

package/test-env/components/datagrid/controls/data_grid_toolbar_control.js

@@ -30,11 +30,8 @@ var EuiDataGridToolbarControl = exports.EuiDataGridToolbarControl = function Eui
     textProps = _ref.textProps,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiThemeContext = (0, _services.useEuiTheme)();
-  var isRefreshVariant = (0, _services.useEuiThemeRefreshVariant)('buttonVariant');
   var classes = (0, _classnames.default)('euiDataGridToolbarControl', className);
-  var cssStyles = isRefreshVariant ?
-  // passes euiThemeContext here instead via `css` to ensure legacy Enzyme tests work
-  interactiveStyles(euiThemeContext) : underlineStyles;
+  var cssStyles = interactiveStyles(euiThemeContext);
   var badgeAriaLabel = (0, _i18n.useEuiI18n)('euiDataGridToolbarControl.badgeAriaLabel', 'Active: {count}', {
     count: typeof badgeContent === 'string' ? betterScreenReaderSlashes(badgeContent) : badgeContent
   });
@@ -150,16 +147,6 @@ EuiDataGridToolbarControl.propTypes = {
 var betterScreenReaderSlashes = function betterScreenReaderSlashes(badgeContent) {
   return badgeContent.replaceAll('/', ' out of ');
 };
-
-// Underline actual text, but not the badge
-var underlineStyles = process.env.NODE_ENV === "production" ? {
-  name: "128tp1b-underlineStyles",
-  styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:underlineStyles;"
-} : {
-  name: "128tp1b-underlineStyles",
-  styles: "&:focus,&:hover:not(:disabled){text-decoration:none;.euiDataGridToolbarControl__text{text-decoration:underline;}};label:underlineStyles;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
 var interactiveStyles = function interactiveStyles(_ref2) {
   var euiTheme = _ref2.euiTheme;
   return /*#__PURE__*/(0, _react2.css)("&:focus,&:hover:not(:disabled){.euiDataGridToolbarControl__badge{background-color:", euiTheme.components.filterButtonBadgeBackgroundHover, ";}};label:interactiveStyles;");

package/test-env/components/datagrid/data_grid.styles.js

@@ -93,7 +93,6 @@ var euiDataGridStyles = exports.euiDataGridStyles = function euiDataGridStyles(e
         return /*#__PURE__*/(0, _react.css)(this.fontSize('m'), ";label:m;");
       },
       get l() {
-        // On the Amsterdam theme, the l fontSize is the same as m
         return /*#__PURE__*/(0, _react.css)(this.fontSize('m'), ";label:l;");
       }
     },

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

@@ -6,7 +6,6 @@ Object.defineProperty(exports, "__esModule", {
 exports.euiDatePickerStyles = void 0;
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
-var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _form = require("../form/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)."; } /*
@@ -26,12 +25,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiDatePickerStyles = exports.euiDatePickerStyles = function euiDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
-  var inlineStyles = "\n      /* removes form layout border */\n      &::after {\n        display: none;\n      }\n    ";
   return {
     euiDatePicker: _ref,
     inline: {
-      inline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " border:none;padding:0;", isRefreshVariant && inlineStyles, ";}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";};label:inline;"),
+      inline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " border:none;padding:0;&::after{display:none;}}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";};label:inline;"),
       // Skip css`` to avoid generating an Emotion className
       noShadow: "\n        .euiFormControlLayout {\n          background-color: transparent;\n        }\n      ",
       shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout{background-color:", euiTheme.colors.emptyShade, ";", (0, _euiThemeCommon.euiShadowMedium)(euiThemeContext, {

package/test-env/components/date_picker/date_picker_range.styles.js

@@ -7,7 +7,6 @@ exports.euiDatePickerRangeStyles = exports.euiDatePickerRangeInlineStyles = void
 var _react = require("@emotion/react");
 var _euiThemeCommon = require("@elastic/eui-theme-common");
 var _global_styling = require("../../global_styling");
-var _services = require("../../services");
 var _form = require("../form/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)."; } /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -16,11 +15,9 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  * in compliance with, at your election, the Elastic License 2.0 or the Server
  * Side Public License, v 1.
  */
-var euiDatePickerRangeStyles = exports.euiDatePickerRangeStyles = function euiDatePickerRangeStyles(euiThemeContext) {
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
-  var refreshStyles = "\n      .euiPopover: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        * {\n          ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), "\n          ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), "\n        }\n      }\n    ");
+var euiDatePickerRangeStyles = exports.euiDatePickerRangeStyles = function euiDatePickerRangeStyles() {
   return {
-    euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";}.euiPopover{flex:1;}", isRefreshVariant && refreshStyles, ";;label:euiDatePickerRange;")
+    euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";}.euiPopover{flex:1;}.euiPopover:last-child{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), " *{", (0, _global_styling.logicalCSS)('border-top-right-radius', 'inherit'), " ", (0, _global_styling.logicalCSS)('border-bottom-right-radius', 'inherit'), ";}};label:euiDatePickerRange;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -33,7 +30,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
 
   // Use a container query to stack date pickers vertically if the container is
   // not wide enough to fit both. We need a fn for this to render two width queries,
@@ -43,12 +39,12 @@ var euiDatePickerRangeInlineStyles = exports.euiDatePickerRangeInlineStyles = fu
     return "\n    display: block;\n    container-type: inline-size;\n\n    .euiFormControlLayout__childrenWrapper {\n      /* Use static px widths for now, since render behavior comes from a third party library */\n      @container (max-width: ".concat(datePickerWidth * 2 + delimiterWidth, "px) {\n        /* Unset grid display */\n        display: block !important;\n\n        /* Center and point the default delimiter arrow downwards */\n        .euiFormControlLayoutDelimited__delimiter .euiIcon {\n          transform: rotate(90deg);\n          margin-inline: auto;\n        }\n      }\n    }");
   };
   return {
-    euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " border:none;padding:0;", isRefreshVariant && "\n          &::after {\n            display: none;\n          }\n        ", ";.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
+    euiDatePickerRangeInline: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('width', 'fit-content'), " ", (0, _global_styling.logicalCSS)('max-width', '100%'), " border:none;padding:0;.euiFormControlLayout__childrenWrapper{display:grid;grid-template-columns:1fr auto 1fr;grid-template-rows:auto;align-items:stretch;background-color:transparent;}.euiFormControlLayoutIcons{justify-content:center;grid-column:1/span 3;", (0, _global_styling.logicalCSS)('height', 'auto'), " ", (0, _global_styling.logicalCSS)('padding-bottom', euiTheme.size.s), ";}&::after{display:none;}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
     responsive: /*#__PURE__*/(0, _react.css)(containerQuery(268), ";;label:responsive;"),
     responsiveWithTimeSelect: /*#__PURE__*/(0, _react.css)(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
     shadow: /*#__PURE__*/(0, _react.css)(".euiFormControlLayoutDelimited{", (0, _euiThemeCommon.euiShadowMedium)(euiThemeContext, {
       borderAllInHighContrastMode: true
-    }), " ", isRefreshVariant && "\n          /* the form layout is not part of the interactive behavior but rather a container in this variant  */\n          ".concat((0, _form.disableFormControlHoverStyles)(), "\n\n          .euiFormControlLayout__childrenWrapper {\n            box-shadow: none;\n            ").concat((0, _form.disableFormControlHoverStyles)(), "\n          }\n        "), ";};label:shadow;"),
+    }), (0, _form.disableFormControlHoverStyles)(), " .euiFormControlLayout__childrenWrapper{box-shadow:none;", (0, _form.disableFormControlHoverStyles)(), ";}};label:shadow;"),
     // Applied directly to EuiFormControlLayout so we can check if `disabled`
     // and allow the disabled background-color to take precedence
     formLayout: {

package/test-env/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -26,7 +26,6 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'formVariant');
   var forms = (0, _form.euiFormVariables)(euiThemeContext);
   var inputWidth = euiTheme.base * 30;
   var buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts
@@ -46,18 +45,6 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
   // Needs updating colors
   var needsUpdatingBackgroundColor = euiTheme.components.superDatePickerBackgroundSuccees;
   var needsUpdatingTextColor = (0, _services.makeHighContrastColor)(euiTheme.colors.success)(needsUpdatingBackgroundColor);
-  var formLayoutStyles = "\n      /* using wrapper hover styles instead */\n      .euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover {\n        outline: none;\n      }\n\n      .euiPopover {\n        /* mimic input border-radius */\n        border-radius: ".concat(forms.controlBorderRadius, ";\n\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      }\n\n      .euiDatePopoverButton {\n        background-color: transparent;\n        border-radius: inherit;\n      }\n    ");
-  var popoverButtonFocusStyles = isRefreshVariant ? "\n       ".concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n    ") : "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n      ").concat((0, _form.euiFormControlShowBackgroundLine)(euiThemeContext, euiTheme.colors.primary), "\n    ");
-  var invalidStyles = isRefreshVariant ? "\n      &:has(.euiPopover-isOpen, .euiDatePopoverButton:focus) {\n        --euiFormControlStateColor: ".concat(forms.borderColor, ";\n        --euiFormControlStateHoverColor: ").concat(forms.borderHovered, ";\n      }\n\n      &:not(:has(.euiPopover-isOpen, .euiDatePopoverButton:focus)) {\n        ").concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), "\n      }\n\n      .euiDatePopoverButton:focus,\n      .euiPopover-isOpen .euiDatePopoverButton {\n        ").concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n      }\n    ") : "\n      ".concat((0, _form.euiFormControlInvalidStyles)(euiThemeContext), "\n    ");
-  var needsUpdatingStyles = "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.success, ";\n      --euiFormControlStateHoverColor: ").concat(euiTheme.colors.success, ";\n      --euiFormControlStateWidth: ").concat(euiTheme.border.width.thin, ";\n      ").concat(_form.euiFormControlHighlightBorderStyles, "\n  \n      &:has(.euiPopover-isOpen),\n      &:focus-within {\n        --euiFormControlStateColor: ").concat(forms.borderColor, ";\n        --euiFormControlStateHoverColor: ").concat(forms.borderHovered, ";\n      }\n    ");
-  var needsUpdatingPopoverButtonFocusStyles = isRefreshVariant ? "\n      ".concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n    ") : "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.success, ";\n      ").concat((0, _form.euiFormControlShowBackgroundLine)(euiThemeContext, euiTheme.colors.success), "\n\n      ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-    // Force the fill color of all icons/svgs to give a bit more indication of state,
-    // since Windows high contrast themes otherwise override background/text color
-    forced: "\n          svg,\n          & + * svg {\n            fill: ".concat(euiTheme.colors.success, ";\n          }\n        ")
-  }), "\n    ");
-  var prettyFormatStyles = "\n      --euiFormControlStateHoverColor: ".concat(forms.borderHovered, ";\n      ").concat((0, _form.euiFormControlDefaultShadow)(euiThemeContext), "\n      \n      ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-    preferred: "\n          border: none;\n        "
-  }), "\n\n      &:focus {\n        ").concat((0, _form.euiFormControlFocusStyles)(euiThemeContext), "\n      }\n    ");
   return {
     euiSuperDatePicker: /*#__PURE__*/(0, _react.css)("display:flex;gap:", gap, ";", (0, _global_styling.logicalCSS)('max-width', '100%'), " ", (0, _global_styling.euiMaxBreakpoint)(euiThemeContext, 'm'), "{", (0, _global_styling.logicalCSS)('width', '100%'), ";};label:euiSuperDatePicker;"),
     widths: {
@@ -82,23 +69,22 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
     isQuickSelectOnly: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', 0), ".euiFormControlLayout__prepend{", (0, _global_styling.logicalCSS)('max-width', 'none'), ";}.euiFormControlLayoutDelimited__delimiter:first-child{", (0, _global_styling.logicalCSS)('padding-horizontal', 0), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
     euiSuperDatePicker__rangeInput: /*#__PURE__*/(0, _react.css)("flex-grow:1;", (0, _global_styling.logicalCSS)('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
-    euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;", isRefreshVariant && prettyFormatStyles, ";;label:euiSuperDatePicker__prettyFormat;"),
+    euiSuperDatePicker__prettyFormat: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), " text-align:start;--euiFormControlStateHoverColor:", forms.borderHovered, ";", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " &:focus{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+      preferred: "\n          border: none;\n        "
+    }), ";;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {
-      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{--euiFormControlStateHoverColor:", forms.borderHovered, ";", (0, _form.euiFormControlDefaultShadow)(euiThemeContext), " ", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-        none: 'box-shadow: none;',
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{--euiFormControlStateHoverColor:", forms.borderHovered, ";", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+        none: "\n              ".concat((0, _form.euiFormControlDefaultShadow)(euiThemeContext), "\n              box-shadow: none;\n            "),
         preferred: 'border: none;'
-      }), " ", isRefreshVariant && formLayoutStyles, ";};label:euiSuperDatePicker__formControlLayout;"),
-      default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{--euiFormControlStateHoverColor:", forms.borderHovered, ";", !isRefreshVariant && (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
-        withBorder: false,
-        withBackgroundColor: false
-      }), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", popoverButtonFocusStyles, ";};label:default;"),
+      }), ".euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover{outline:none;}.euiPopover{border-radius:", forms.controlBorderRadius, ";&: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'), ";}}.euiDatePopoverButton{background-color:transparent;border-radius:inherit;}};label:euiSuperDatePicker__formControlLayout;"),
+      default: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{--euiFormControlStateHoverColor:", forms.borderHovered, ";box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";};label:default;"),
       disabled: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _form.euiFormControlDisabledStyles)(euiThemeContext), ";};label:disabled;"),
-      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";", invalidStyles, ";};label:invalid;"),
-      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";", isRefreshVariant && needsUpdatingStyles, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
+      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";&:has(.euiPopover-isOpen, .euiDatePopoverButton:focus){--euiFormControlStateColor:", forms.borderColor, ";--euiFormControlStateHoverColor:", forms.borderHovered, ";}&:not(:has(.euiPopover-isOpen, .euiDatePopoverButton:focus)){", (0, _form.euiFormControlInvalidStyles)(euiThemeContext), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";}};label:invalid;"),
+      needsUpdating: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{--euiFormControlStateColor:", euiTheme.colors.success, ";--euiFormControlStateHoverColor:", euiTheme.colors.success, ";--euiFormControlStateWidth:", euiTheme.border.width.thin, ";color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";", _form.euiFormControlHighlightBorderStyles, " &:has(.euiPopover-isOpen),&:focus-within{--euiFormControlStateColor:", forms.borderColor, ";--euiFormControlStateHoverColor:", forms.borderHovered, ";}}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", (0, _form.euiFormControlDefaultShadow)(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
-      }), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", needsUpdatingPopoverButtonFocusStyles, ";};label:needsUpdating;")
+      }), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";};label:needsUpdating;")
     }
   };
 };

package/test-env/components/filter_group/filter_button.js

@@ -62,20 +62,17 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
   var numActiveFiltersDefined = !!numActiveFilters;
   var euiThemeContext = (0, _services.useEuiTheme)();
   var colorMode = euiThemeContext.colorMode;
-  var isRefreshVariant = (0, _services.useEuiThemeRefreshVariant)('buttonVariant');
 
   // assumption about type of usage based on icon usage
   // requires manual override to apply correct aria attributes for more custom usages
   var isCollapsible = !isToggle && iconType === 'arrowDown';
-  // NOTE: in Amsterdam `hasActiveFilters` applies selected styling while `isSelected` does not.
-  // With Borealis this is more granular as EuiFilterButton now supports proper toggle buttons next to regular buttons
   var isExpanded = isCollapsible && (isSelected !== null && isSelected !== void 0 ? isSelected : hasActiveFilters);
   var styles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonStyles);
   var focusColorStyles = (0, _services.useEuiMemoizedStyles)(_button_group_button2._compressedButtonFocusColors);
-  var toggleVariantStyles = isRefreshVariant ? [isToggle && styles.buttonType.toggle, !isToggle && !isDisabled && focusColorStyles[color], !isToggle && styles.buttonType.default] : [isToggle && styles.buttonType.toggle];
-  var cssStyles = [styles.euiFilterButton, !isRefreshVariant && withNext && styles.withNext, hasActiveFilters && styles.hasActiveFilters].concat(toggleVariantStyles);
+  var toggleVariantStyles = [isToggle && styles.buttonType.toggle, !isToggle && !isDisabled && focusColorStyles[color], !isToggle && styles.buttonType.default];
+  var cssStyles = [styles.euiFilterButton, hasActiveFilters && styles.hasActiveFilters].concat(toggleVariantStyles);
   var wrapperStyles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonWrapperStyles);
-  var wrapperCssStyles = [wrapperStyles.wrapper, isRefreshVariant && withNext && styles.withNext, numFiltersDefined && styles.hasNotification, isToggle && wrapperStyles.hasToggle, !grow && styles.noGrow];
+  var wrapperCssStyles = [wrapperStyles.wrapper, withNext && styles.withNext, numFiltersDefined && styles.hasNotification, isToggle && wrapperStyles.hasToggle, !grow && styles.noGrow];
   var _useEuiMemoizedStyles = (0, _services.useEuiMemoizedStyles)(_filter_button.euiFilterButtonChildStyles),
     contentStyles = _useEuiMemoizedStyles.content,
     textStyles = _useEuiMemoizedStyles.text,
@@ -85,7 +82,7 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     'euiFilterButton-isSelected': isSelected,
     'euiFilterButton-hasActiveFilters': hasActiveFilters,
     'euiFilterButton-hasNotification': numFiltersDefined,
-    'euiFilterButton-isToggle': isRefreshVariant && isToggle
+    'euiFilterButton-isToggle': isToggle
   }, className);
 
   /**
@@ -107,9 +104,9 @@ var EuiFilterButton = exports.EuiFilterButton = function EuiFilterButton(_ref) {
     color: isDisabled || !hasActiveFilters ? 'subdued' : badgeColor,
     role: "marquee" // https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/marquee_role
   }, badgeCount);
-  var badgeElement = showBadge && (isRefreshVariant ? (0, _react2.jsx)(_services.EuiThemeProvider, {
+  var badgeElement = showBadge && (0, _react2.jsx)(_services.EuiThemeProvider, {
     colorMode: isToggle && isSelected ? 'INVERSE' : colorMode
-  }, badgeContent) : badgeContent);
+  }, badgeContent);
 
   /**
    * Text