@elastic/eui 107.0.1 → 108.0.0

package/lib/components/datagrid/controls/data_grid_toolbar_control.js

@@ -31,11 +31,8 @@ var EuiDataGridToolbarControl = exports.EuiDataGridToolbarControl = function Eui
     textProps = _ref.textProps,
     rest = _objectWithoutProperties(_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
   });
@@ -151,16 +148,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/lib/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/lib/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/lib/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/lib/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/lib/components/filter_group/filter_button.js

@@ -71,20 +71,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,
@@ -94,7 +91,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);
 
   /**
@@ -116,9 +113,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

package/lib/components/filter_group/filter_button.styles.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFilterButtonWrapperStyles = exports.euiFilterButtonStyles = exports.euiFilterButtonDisplay = exports.euiFilterButtonChildStyles = void 0;
 var _react = require("@emotion/react");
-var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 var _supports = require("../../global_styling/functions/supports");
 var _form = require("../form/form.styles");
@@ -18,15 +17,14 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 var euiFilterButtonDisplay = exports.euiFilterButtonDisplay = function euiFilterButtonDisplay(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   return {
     flex: '1 1 auto',
     minInlineSize: (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
-      return x * (isRefreshVariant ? 2.75 : 3);
+      return x * 2.75;
     })
   };
 };
-var _ref3 = process.env.NODE_ENV === "production" ? {
+var _ref4 = process.env.NODE_ENV === "production" ? {
   name: "jkp921-noGrow",
   styles: "flex-grow:0;label:noGrow;"
 } : {
@@ -36,46 +34,30 @@ var _ref3 = process.env.NODE_ENV === "production" ? {
 };
 var euiFilterButtonStyles = exports.euiFilterButtonStyles = function euiFilterButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
-  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
-    controlHeight = _euiFormVariables.controlHeight,
-    borderColor = _euiFormVariables.borderColor;
   var selectedSelector = '.euiFilterButton-isSelected';
-  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor);
-
-  // Pseudo elements create borders without affecting width. We also prefer them
-  // over box-shadow for Windows high contrast theme compatibility
-  var leftBorder = "\n    &::before {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('right', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('vertical', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-left', border), "\n    }\n  ");
-  // Bottom borders are needed for responsive flex-wrap behavior
-  var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      ".concat((0, _global_styling.logicalCSS)('top', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('horizontal', 0), "\n      ").concat((0, _global_styling.logicalCSS)('border-bottom', border), "\n    }\n  ");
-  var buttonStyles = isRefreshVariant ? "\n      ".concat((0, _global_styling.logicalCSS)('width', '100%'), "\n\n      &:not(").concat(selectedSelector, ") {\n        &:hover,\n        &:active {\n          .euiFilterButton__notification[class*=\"subdued\"] {\n            background-color: ").concat(euiTheme.components.filterButtonBadgeBackgroundHover, "\n          }\n        }\n      }\n    ") : "\n      ".concat((0, _global_styling.logicalCSS)('height', controlHeight), "\n      border-radius: 0;\n      ").concat(leftBorder, "\n      ").concat(bottomBorder, "\n\n      /* :not(:disabled) specificity needed to override EuiButtonEmpty styles */\n      &:hover:not(:disabled),\n      &:focus:not(:disabled) {\n        /* Remove underline from whole button so notifications don't get the underline */\n        text-decoration: none;\n\n        .euiFilterButton__text {\n          /* And put it only on the actual text part */\n          text-decoration: underline;\n        }\n      }\n    ");
-  var toggleTypeStyles = isRefreshVariant ? "\n      ".concat(euiFilterButtonDisplay(euiThemeContext), ";\n\n      ").concat((0, _global_styling.highContrastModeStyles)(euiThemeContext, {
-    forced: "\n          &:is(".concat(selectedSelector, ") {\n            ").concat((0, _global_styling.preventForcedColors)(euiThemeContext), "\n              color: ").concat(euiTheme.colors.emptyShade, ";\n              background-color: ").concat(euiTheme.colors.fullShade, ";\n          }\n        ")
-  }), "\n    ") : "\n      font-weight: ".concat(euiTheme.font.weight.medium, ";\n      padding: 0;\n\n      &:is(").concat(selectedSelector, ") {\n        color: ").concat((0, _global_styling.euiButtonEmptyColor)(euiThemeContext, 'text').color, ";\n        background-color: transparent;\n        font-weight: ").concat(euiTheme.font.weight.bold, ";\n      }\n    ");
-  var withNextSelector = isRefreshVariant ? '& + .euiFilterButton__wrapper' : '.euiFilterButton__wrapper:has(&) + .euiFilterButton__wrapper';
-  // handles display of borders between buttons
-  var withNextStyles = isRefreshVariant ? "\n      &::before {\n        border: none;\n      }\n\n      ".concat((0, _supports.cssSupportsHasWithNextSibling)("\n          &:has(+ :not(&)) {\n            ".concat((0, _global_styling.logicalCSS)('padding-right', '0'), "\n          }\n        ")), "\n    ") : "\n      .euiFilterButton {\n        &::before {\n          border: none;\n        }\n      }\n    ";
+  var withNextSelector = '& + .euiFilterButton__wrapper';
   return {
-    euiFilterButton: /*#__PURE__*/(0, _react.css)(!isRefreshVariant && euiFilterButtonDisplay(euiThemeContext), ";position:relative;", buttonStyles, ";;label:euiFilterButton;"),
+    euiFilterButton: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('width', '100%'), " &:not(", selectedSelector, "){&:hover,&:active{.euiFilterButton__notification[class*='subdued']{background-color:", euiTheme.components.filterButtonBadgeBackgroundHover, ";}}};label:euiFilterButton;"),
     buttonType: {
-      default: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "\n          border-radius: 0;\n\n          &:focus-visible {\n            z-index: 1;\n            outline-offset: -".concat(euiTheme.border.width.thick, ";\n            border-radius: ").concat(euiTheme.border.radius.small, ";\n            transition: none;\n          }\n        "), ";;label:default;"),
-      toggle: /*#__PURE__*/(0, _react.css)("&:focus-visible{outline-offset:", (0, _global_styling.mathWithUnits)(euiTheme.focus.width, function (x) {
-        return isRefreshVariant ? x / 2 : x * -1;
-      }), ";}", toggleTypeStyles, ";;label:toggle;")
+      default: /*#__PURE__*/(0, _react.css)("border-radius:0;&:focus-visible{z-index:1;outline-offset:-", euiTheme.border.width.thick, ";border-radius:", euiTheme.border.radius.small, ";transition:none;};label:default;"),
+      toggle: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " &:focus-visible{outline-offset:", (0, _global_styling.mathWithUnits)(euiTheme.focus.width, function (x) {
+        return x / 2;
+      }), ";}", (0, _global_styling.highContrastModeStyles)(euiThemeContext, {
+        forced: "\n            &:is(".concat(selectedSelector, ") {\n              ").concat((0, _global_styling.preventForcedColors)(euiThemeContext), "\n                color: ").concat(euiTheme.colors.emptyShade, ";\n                background-color: ").concat(euiTheme.colors.fullShade, ";\n            }\n          ")
+      }), ";;label:toggle;")
     },
-    withNext: /*#__PURE__*/(0, _react.css)(withNextSelector, "{", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), withNextStyles, ";};label:withNext;"),
-    noGrow: _ref3,
+    withNext: /*#__PURE__*/(0, _react.css)(withNextSelector, "{", (0, _supports.cssSupportsHasWithNextSibling)("\n            &:has(+ :not(&)) {\n              ".concat((0, _global_styling.logicalCSS)('padding-right', '0'), "\n            }\n          ")), ";", (0, _global_styling.logicalCSS)('margin-left', "-".concat(euiTheme.size.xs)), "&::before{border:none;}};label:withNext;"),
+    noGrow: _ref4,
     hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
       return x * 6;
     })), ";;label:hasNotification;"),
-    hasActiveFilters: /*#__PURE__*/(0, _react.css)("font-weight:", isRefreshVariant ? euiTheme.font.weight.medium : euiTheme.font.weight.bold, ";;label:hasActiveFilters;")
+    hasActiveFilters: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.medium, ";;label:hasActiveFilters;")
   };
 };
 var euiFilterButtonWrapperStyles = exports.euiFilterButtonWrapperStyles = function euiFilterButtonWrapperStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
-  var _euiFormVariables2 = (0, _form.euiFormVariables)(euiThemeContext),
-    borderColor = _euiFormVariables2.borderColor;
+  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
+    borderColor = _euiFormVariables.borderColor;
   var border = "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor);
 
   // Pseudo elements create borders without affecting width. We also prefer them
@@ -84,8 +66,8 @@ var euiFilterButtonWrapperStyles = exports.euiFilterButtonWrapperStyles = functi
   // Bottom borders are needed for responsive flex-wrap behavior
   var bottomBorder = "\n    &::after {\n      content: '';\n      position: absolute;\n      inset: 0;\n      ".concat((0, _global_styling.logicalCSS)('border-bottom', border), "\n      pointer-events: none;\n    }\n  ");
   return {
-    wrapper: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " position:relative;display:flex;align-items:center;", isRefreshVariant && "\n        ".concat(leftBorder, "\n        ").concat(bottomBorder, "\n      "), " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.border.width.thin), ";;label:wrapper;"),
-    hasToggle: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', isRefreshVariant ? euiTheme.border.width.thin : '0'), (0, _supports.cssSupportsHasWithNextSibling)("\n          &:not([class*=\"withNext\"]):has(+ :not(&)) {\n            ".concat((0, _global_styling.logicalCSS)('padding-right', '0'), "\n          }\n        ")), ";;label:hasToggle;")
+    wrapper: /*#__PURE__*/(0, _react.css)(euiFilterButtonDisplay(euiThemeContext), " position:relative;display:flex;align-items:center;", leftBorder, " ", bottomBorder, " ", (0, _global_styling.logicalCSS)('padding-vertical', euiTheme.border.width.thin), ";;label:wrapper;"),
+    hasToggle: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.border.width.thin), (0, _supports.cssSupportsHasWithNextSibling)("\n          &:not([class*=\"withNext\"]):has(+ :not(&)) {\n            ".concat((0, _global_styling.logicalCSS)('padding-right', '0'), "\n          }\n        ")), ";;label:hasToggle;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -104,18 +86,25 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   styles: "cursor:inherit;forced-color-adjust:auto;&{transition:none;};label:euiFilterButton__notification;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
+var _ref3 = process.env.NODE_ENV === "production" ? {
+  name: "kc7mgj-euiFilterButton__content",
+  styles: ".euiThemeProvider{display:inline-flex;};label:euiFilterButton__content;"
+} : {
+  name: "kc7mgj-euiFilterButton__content",
+  styles: ".euiThemeProvider{display:inline-flex;};label:euiFilterButton__content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 var euiFilterButtonChildStyles = exports.euiFilterButtonChildStyles = function euiFilterButtonChildStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   return {
     content: {
-      euiFilterButton__content: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "\n          .euiThemeProvider {\n            display: inline-flex;\n          }\n        ", ";;label:euiFilterButton__content;"),
+      euiFilterButton__content: _ref3,
       hasIcon: /*#__PURE__*/(0, _react.css)("&>.euiIcon:last-child{", (0, _global_styling.logicalCSS)('margin-left', 'auto'), ";};label:hasIcon;")
     },
     text: {
       euiFilterButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), ";;label:euiFilterButton__text;"),
       hasNotification: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-width', (0, _global_styling.mathWithUnits)(euiTheme.size.base, function (x) {
-        return x * (isRefreshVariant ? 2 : 3);
+        return x * 2;
       })), ";;label:hasNotification;")
     },
     notification: {

package/lib/components/filter_group/filter_group.styles.js

@@ -5,9 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiFilterGroupStyles = 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/form.styles");
 var _filter_button = require("./filter_button.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)."; } /*
@@ -27,31 +25,23 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiFilterGroupStyles = exports.euiFilterGroupStyles = function euiFilterGroupStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var isRefreshVariant = (0, _services.isEuiThemeRefreshVariant)(euiThemeContext, 'buttonVariant');
   var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
     backgroundColor = _euiFormVariables.backgroundColor,
-    borderColor = _euiFormVariables.borderColor,
-    controlBorderRadius = _euiFormVariables.controlBorderRadius,
     controlHeight = _euiFormVariables.controlHeight,
-    controlCompressedBorderRadius = _euiFormVariables.controlCompressedBorderRadius,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
-  var borderRadius = isRefreshVariant ? euiTheme.border.radius.small : controlBorderRadius;
-  var borderRadiusCompressed = isRefreshVariant ? euiTheme.border.radius.small : controlCompressedBorderRadius;
-  var borderStyle = isRefreshVariant ? "\n      /* Adds the border on a pseudo element to prevent height differences between wrapper and buttons.\n      Uses ::after to ensure overlap and prevents blocking by setting pointer-events: none */\n      &::after {\n        content: '';\n        position: absolute;\n        inset: 0;\n        border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.borderBasePlain, ";\n        border-radius: inherit;\n        pointer-events: none;\n      }\n    ") : "\n      ".concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
-    none: "box-shadow: inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(borderColor, ";"),
-    forced: "border: ".concat(euiTheme.border.thin, ";")
-  }), "\n    ");
+  var borderRadius = euiTheme.border.radius.small;
+  var borderRadiusCompressed = euiTheme.border.radius.small;
   return {
-    euiFilterGroup: /*#__PURE__*/(0, _react.css)(isRefreshVariant && "position: relative;", " display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";", borderStyle, ">*:not(.euiFilterButton__wrapper, .euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;", isRefreshVariant && "\n          .euiPopover:focus-within {\n            z-index: 1;\n          }\n            \n          .euiFilterButton__wrapper {\n            flex-grow: 1;\n          }\n        ", ";.euiFilterButton__wrapper{flex-grow:1;}};label:euiFilterGroup;"),
+    euiFilterGroup: /*#__PURE__*/(0, _react.css)("position:relative;display:inline-flex;", (0, _global_styling.logicalCSS)('max-width', '100%'), " overflow:hidden;background-color:", backgroundColor, ";&::after{content:'';position:absolute;inset:0;border:", euiTheme.border.width.thin, " solid ", euiTheme.colors.borderBasePlain, ";border-radius:inherit;pointer-events:none;}>*:not(.euiFilterButton__wrapper, .euiFilterButton){", (0, _filter_button.euiFilterButtonDisplay)(euiThemeContext), ";}.euiPopover>.euiFilterButton{", (0, _global_styling.logicalCSS)('width', '100%'), ";}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs', 's']), "{flex-wrap:wrap;}", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{display:flex;.euiPopover:focus-within{z-index:1;}.euiFilterButton__wrapper{flex-grow:1;}};label:euiFilterGroup;"),
     fullWidth: _ref,
-    uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius, ";.euiFilterButton__wrapper{", (0, _global_styling.logicalCSS)('height', controlHeight), ";}.euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlHeight), ";}", !isRefreshVariant && buttonChildrenBorderRadii(borderRadius), " ", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlHeight, euiTheme.size.xxs], function (x, y) {
+    uncompressed: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadius, ";.euiFilterButton__wrapper{", (0, _global_styling.logicalCSS)('height', controlHeight), ";}.euiFilterButton{", (0, _global_styling.logicalCSS)('height', controlHeight), ";}.euiFilterButton-isToggle{", (0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlHeight, euiTheme.size.xxs], function (x, y) {
       return x - 3 * y;
-    })), "\n        }\n      "), ";;label:uncompressed;"),
-    compressed: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadiusCompressed, ";", !isRefreshVariant && buttonChildrenBorderRadii(borderRadiusCompressed), " .euiFilterButton{", (0, _global_styling.logicalCSS)('height', isRefreshVariant ? (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
+    })), ";};label:uncompressed;"),
+    compressed: /*#__PURE__*/(0, _react.css)("border-radius:", borderRadiusCompressed, ";.euiFilterButton{", (0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.border.width.thin], function (x, y) {
       return x - 2 * y;
-    }) : controlCompressedHeight), ";}", isRefreshVariant && "\n        .euiFilterButton-isToggle {\n          ".concat((0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.size.xxs], function (x, y) {
+    })), ";}.euiFilterButton-isToggle{", (0, _global_styling.logicalCSS)('height', (0, _global_styling.mathWithUnits)([controlCompressedHeight, euiTheme.size.xxs], function (x, y) {
       return x - 3 * y;
-    })), "\n        }\n      "), ";;label:compressed;"),
+    })), ";};label:compressed;"),
     /**
      * Not used in EuiFilterGroup directly, but used by EuiSearchBar and consumers
      * A fixed width is required because of the shift in widths that can be caused
@@ -61,15 +51,4 @@ var euiFilterGroupStyles = exports.euiFilterGroupStyles = function euiFilterGrou
       return x * 18;
     })), ";;label:euiFilterGroup__popoverPanel;")
   };
-};
-
-/**
- * Small util for manually rounding the borders of the first and last EuiFilterButtons
- * - this makes their focus rings appear nicely instead of being cutt off.
- * 2nd selector accounts for EuiFilterButtons nested within popover/tooltip wrappers.
- *
- * NOTE: Do not use `logicalShorthandCSS()` here, as that will cause single buttons to not be rounded
- */
-var buttonChildrenBorderRadii = function buttonChildrenBorderRadii(radiusSize) {
-  return "\n  > :first-child,\n  > :first-child .euiFilterButton {\n    ".concat((0, _global_styling.logicalCSS)('border-top-left-radius', radiusSize), "\n    ").concat((0, _global_styling.logicalCSS)('border-bottom-left-radius', radiusSize), "\n  }\n\n  > :last-child,\n  > :last-child .euiFilterButton {\n    ").concat((0, _global_styling.logicalCSS)('border-top-right-radius', radiusSize), "\n    ").concat((0, _global_styling.logicalCSS)('border-bottom-right-radius', radiusSize), "\n  }\n");
 };

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

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

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

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