@elastic/eui 112.3.0 → 113.0.0

package/optimize/lib/components/color_picker/hue.styles.js

@@ -37,10 +37,10 @@ var euiHueStyles = exports.euiHueStyles = function euiHueStyles(euiThemeContext)
     })), ";;label:euiHue__tooltip;"),
     euiHue__range: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), "appearance:none;background:transparent;&::-webkit-slider-thumb{-webkit-appearance:none;}", (0, _range.euiRangeThumbPerBrowser)("\n        ".concat((0, _range.euiRangeThumbStyle)(euiThemeContext), "\n        border-width: ").concat(thumbBorder, ";\n\n        ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: "\n            background-color: transparent;\n            box-shadow: ".concat(thumbBoxShadow, ";\n          "),
-      preferred: "\n            background-color: ".concat(euiTheme.colors.ghost, ";\n            border: ").concat(thumbBorder, " solid ").concat(euiTheme.colors.ink, ";\n            box-shadow: none;\n          ")
+      preferred: "\n            background-color: ".concat(euiTheme.colors.plainLight, ";\n            border: ").concat(thumbBorder, " solid ").concat(euiTheme.colors.plainDark, ";\n            box-shadow: none;\n          ")
     }), "\n      ")), "&:focus{outline:none;}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: "\n          &:focus-visible {\n            ".concat((0, _range.euiRangeThumbPerBrowser)((0, _range.euiRangeThumbFocusBoxShadow)(euiThemeContext)), "\n          }\n        "),
-      preferred: "\n          &:focus {\n            ".concat((0, _range.euiRangeThumbPerBrowser)("\n              outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.ink, ";\n              outline-offset: 0;\n            ")), "\n          }\n        ")
+      preferred: "\n          &:focus {\n            ".concat((0, _range.euiRangeThumbPerBrowser)("\n              outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.plainDark, ";\n              outline-offset: 0;\n            ")), "\n          }\n        ")
     }), ";;label:euiHue__range;")
   };
 };

package/optimize/lib/components/color_picker/saturation.styles.js

@@ -27,7 +27,7 @@ var euiSaturationStyles = exports.euiSaturationStyles = function euiSaturationSt
   return {
     euiSaturation: /*#__PURE__*/(0, _react.css)("z-index:3;position:relative;aspect-ratio:1/1;", (0, _global_styling.logicalCSS)('width', '100%'), " border-radius:", borderRadius, ";touch-action:none;&:focus,&:focus-within{outline:none;.euiSaturation__indicator{", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: "\n              outline: none; /* Standardize indicator focus ring */\n              box-shadow: 0 0 0 ".concat(euiTheme.focus.width, " ").concat(euiTheme.colors.primary, ";\n              border-color: ").concat(euiTheme.colors.primary, ";\n            "),
-      preferred: "\n              outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.ink, ";\n              outline-offset: 0;\n            ")
+      preferred: "\n              outline: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.plainDark, ";\n              outline-offset: 0;\n            ")
     }), ";}}", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       // The border must be in an overlaid pseudo element to not affect the
       // width/height/position of the indicator, or cause border-radius issues
@@ -39,7 +39,7 @@ var euiSaturationStyles = exports.euiSaturationStyles = function euiSaturationSt
     euiSaturation__tooltip: /*#__PURE__*/(0, _react.css)("z-index:2;position:absolute;", (0, _global_styling.logicalSizeCSS)(indicatorSize), " transform:translateX(-50%) translateY(-50%);border-radius:100%;;label:euiSaturation__tooltip;"),
     euiSaturation__indicator: /*#__PURE__*/(0, _react.css)("position:absolute;inset:0;", (0, _global_styling.logicalSizeCSS)(indicatorSize), " border-radius:100%;", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: "\n          border: ".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.colors.darkestShade, ";\n\n          &::before {\n            content: '';\n            position: absolute;\n            inset: 0;\n            border-radius: 100%;\n            border: ").concat(euiTheme.border.width.thin, " solid\n              ").concat(euiTheme.colors.lightestShade, ";\n          }\n        "),
-      preferred: "\n          border: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.ink, ";\n          background-color: ").concat(euiTheme.colors.ghost, ";\n        ")
+      preferred: "\n          border: ".concat(euiTheme.border.width.thick, " solid ").concat(euiTheme.colors.plainDark, ";\n          background-color: ").concat(euiTheme.colors.plainLight, ";\n        ")
     }), ";;label:euiSaturation__indicator;")
   };
 };

package/optimize/lib/components/date_picker/auto_refresh/auto_refresh.js

@@ -59,18 +59,18 @@ var EuiAutoRefresh = exports.EuiAutoRefresh = function EuiAutoRefresh(_ref) {
           return !isOpen;
         });
       },
-      prepend: (0, _react2.jsx)(_button_empty.EuiButtonEmpty, {
+      prepend: (0, _react2.jsx)(_form.EuiFormPrepend, {
         className: "euiFormControlLayout__prepend",
+        element: "button",
+        label: (0, _react2.jsx)("strong", null, autoRefeshLabel),
+        iconLeft: "timeRefresh",
+        isDisabled: isDisabled,
         onClick: function onClick() {
           return setIsPopoverOpen(function (isOpen) {
             return !isOpen;
           });
-        },
-        size: "s",
-        color: "text",
-        iconType: "timeRefresh",
-        isDisabled: isDisabled
-      }, (0, _react2.jsx)("strong", null, (0, _react2.jsx)("small", null, autoRefeshLabel))),
+        }
+      }),
       readOnly: readOnly,
       disabled: isDisabled,
       value: (0, _pretty_interval.usePrettyInterval)(Boolean(isPaused), refreshInterval, {

package/optimize/lib/components/date_picker/date_picker_range.js

@@ -14,7 +14,7 @@ var _form = require("../form");
 var _services = require("../../services");
 var _date_picker_range = require("./date_picker_range.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "data-test-subj", "startDateControl", "endDateControl", "iconType", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend", "delimiter"];
+var _excluded = ["children", "className", "data-test-subj", "startDateControl", "endDateControl", "iconType", "iconSide", "inline", "shadow", "fullWidth", "compressed", "isCustom", "readOnly", "isLoading", "isInvalid", "disabled", "onFocus", "onBlur", "append", "prepend", "delimiter"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -32,6 +32,8 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
     endDateControl = _ref.endDateControl,
     _ref$iconType = _ref.iconType,
     iconType = _ref$iconType === void 0 ? true : _ref$iconType,
+    _ref$iconSide = _ref.iconSide,
+    iconSide = _ref$iconSide === void 0 ? 'left' : _ref$iconSide,
     inline = _ref.inline,
     _ref$shadow = _ref.shadow,
     shadow = _ref$shadow === void 0 ? true : _ref$shadow,
@@ -110,8 +112,12 @@ var EuiDatePickerRange = exports.EuiDatePickerRange = function EuiDatePickerRang
     if (inline) return undefined;
     if (iconType === false) return undefined;
     if (iconType === true) return 'calendar';
+    if (iconType && iconSide) return {
+      side: iconSide,
+      type: iconType
+    };
     return iconType;
-  }, [iconType, inline]);
+  }, [iconType, iconSide, inline]);
   return (0, _react2.jsx)("div", (0, _extends2.default)({
     className: classes,
     css: cssStyles,

package/optimize/lib/components/date_picker/date_picker_range.styles.js

@@ -17,7 +17,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 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;}.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;")
+    euiDatePickerRange: /*#__PURE__*/(0, _react.css)(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", (0, _global_styling.logicalCSS)('height', '100%'), ";}.euiPopover{flex:1;};label:euiDatePickerRange;")
   };
 };
 var _ref = process.env.NODE_ENV === "production" ? {

package/optimize/lib/components/date_picker/super_date_picker/date_popover/date_popover_button.styles.js

@@ -3,9 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiDatePopoverButtonStyles = void 0;
+exports.euiDatePopoverButtonStyles = exports._buttonStyles = void 0;
 var _react = require("@emotion/react");
-var _super_date_picker = require("../super_date_picker.styles");
+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)."; } /*
  * 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 +24,11 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 var euiDatePopoverButtonStyles = exports.euiDatePopoverButtonStyles = function euiDatePopoverButtonStyles(euiThemeContext) {
   return {
-    euiDatePopoverButton: /*#__PURE__*/(0, _react.css)((0, _super_date_picker._buttonStyles)(euiThemeContext), ";;label:euiDatePopoverButton;"),
+    euiDatePopoverButton: /*#__PURE__*/(0, _react.css)(_buttonStyles(euiThemeContext), ";;label:euiDatePopoverButton;"),
     now: _ref
   };
+};
+var _buttonStyles = exports._buttonStyles = function _buttonStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlHoverStyles)(euiThemeContext), " ", (0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:inherit;background-color:inherit;&:disabled{cursor:not-allowed;}");
 };

package/optimize/lib/components/date_picker/super_date_picker/quick_select_popover/quick_select_popover.js

@@ -7,15 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiQuickSelectPopover = exports.EuiQuickSelectPanels = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _services = require("../../../../services");
 var _i18n = require("../../../i18n");
-var _button = require("../../../button");
-var _icon = require("../../../icon");
 var _popover = require("../../../popover");
+var _form = require("../../../form");
 var _quick_select_popover = require("./quick_select_popover.styles");
 var _quick_select_panel = require("./quick_select_panel");
 var _quick_select = require("./quick_select");
@@ -24,7 +22,7 @@ var _recently_used = require("./recently_used");
 var _refresh_interval = require("../../auto_refresh/refresh_interval");
 var _react2 = require("@emotion/react");
 var _excluded = ["applyTime", "buttonProps"],
-  _excluded2 = ["contentProps", "onClick"];
+  _excluded2 = ["onClick"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -34,15 +32,12 @@ var _excluded = ["applyTime", "buttonProps"],
  */
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
-function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 var EuiQuickSelectPopover = exports.EuiQuickSelectPopover = function EuiQuickSelectPopover(_ref) {
   var _applyTime = _ref.applyTime,
     _ref$buttonProps = _ref.buttonProps,
     buttonProps = _ref$buttonProps === void 0 ? {} : _ref$buttonProps,
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var buttonContentProps = buttonProps.contentProps,
-    buttonOnClick = buttonProps.onClick,
+  var buttonOnClick = buttonProps.onClick,
     quickSelectButtonProps = (0, _objectWithoutProperties2.default)(buttonProps, _excluded2);
   var _useState = (0, _react.useState)(),
     _useState2 = (0, _slicedToArray2.default)(_useState, 2),
@@ -78,27 +73,20 @@ var EuiQuickSelectPopover = exports.EuiQuickSelectPopover = function EuiQuickSel
     }
   }, [_applyTime, closePopover]);
   var buttonlabel = (0, _i18n.useEuiI18n)('euiQuickSelectPopover.buttonLabel', 'Date quick select');
-  var styles = (0, _services.useEuiMemoizedStyles)(_quick_select_popover.euiQuickSelectPopoverStyles);
   var quickSelectButtonOnClick = function quickSelectButtonOnClick(e) {
     togglePopover();
     buttonOnClick === null || buttonOnClick === void 0 || buttonOnClick(e);
   };
-  var quickSelectButton = (0, _react2.jsx)(_button.EuiButtonEmpty, (0, _extends2.default)({
-    css: styles.euiQuickSelectPopoverButton,
-    contentProps: _objectSpread({
-      css: styles.euiQuickSelectPopoverButton__content
-    }, buttonContentProps),
+  var quickSelectButton = (0, _react2.jsx)(_form.EuiFormPrepend, (0, _extends2.default)({
+    element: "button",
+    iconLeft: "calendar",
+    iconRight: "arrowDown",
+    isDisabled: props.isDisabled,
     onClick: quickSelectButtonOnClick,
     "aria-label": buttonlabel,
     title: buttonlabel,
-    size: "xs",
-    iconType: "arrowDown",
-    iconSide: "right",
-    isDisabled: props.isDisabled,
     "data-test-subj": "superDatePickerToggleQuickMenuButton"
-  }, quickSelectButtonProps), (0, _react2.jsx)(_icon.EuiIcon, {
-    type: "calendar"
-  }));
+  }, quickSelectButtonProps));
   return (0, _react2.jsx)(_popover.EuiPopover, {
     button: quickSelectButton,
     isOpen: isOpen,

package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.js

@@ -344,12 +344,14 @@ var EuiSuperDatePickerInternal = exports.EuiSuperDatePickerInternal = /*#__PURE_
       var rangeProps = _objectSpread(_objectSpread({}, _rangeProps), {}, {
         disabled: formControlLayoutProps.isDisabled
       });
+      var hasChangedIcon = hasChanged && !isInvalid;
       return (0, _react2.jsx)(_context.EuiI18nConsumer, null, function (_ref4) {
         var contextLocale = _ref4.locale;
         return (0, _react2.jsx)(_date_picker_range.EuiDatePickerRange, (0, _extends2.default)({}, rangeProps, {
           css: rangeCssStyles,
           isCustom: true,
-          iconType: false,
+          iconType: hasChangedIcon ? 'checkCircle' : false,
+          iconSide: hasChangedIcon ? 'right' : undefined,
           delimiter: isQuickSelectOnly ? '' : undefined,
           startDateControl: isQuickSelectOnly ? undefined : (0, _react2.jsx)(_date_popover_button.EuiDatePopoverButton, {
             css: styles.euiSuperDatePicker__rangeInput,

package/optimize/lib/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -3,9 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiSuperDatePickerStyles = exports._buttonStyles = void 0;
+exports.euiSuperDatePickerStyles = 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");
@@ -43,8 +42,7 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
   });
 
   // Needs updating colors
-  var needsUpdatingBackgroundColor = euiTheme.components.superDatePickerBackgroundSuccees;
-  var needsUpdatingTextColor = (0, _services.makeHighContrastColor)(euiTheme.colors.success)(needsUpdatingBackgroundColor);
+  var needsUpdatingTextColor = euiTheme.colors.textSuccess;
   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: {
@@ -72,21 +70,17 @@ var euiSuperDatePickerStyles = exports.euiSuperDatePickerStyles = function euiSu
     euiSuperDatePicker__prettyDurationTooltip: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('max-width', 'min(58ch, 90vw)'), ";;label:euiSuperDatePicker__prettyDurationTooltip;"),
     // Form states
     states: {
-      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            "),
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{", (0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
+        none: "\n              box-shadow: none;\n            ",
         preferred: 'border: none;'
-      }), ".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;"),
+      }), ".euiDatePopoverButton:not(.euiDatePopoverButton-isSelected):hover{outline:none;}.euiPopover{border-radius:", forms.controlBorderRadius, ";}.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, ";&: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, {
+      invalid: /*#__PURE__*/(0, _react.css)(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";&:has(.euiPopover-isOpen, .euiDatePopoverButton:focus){--euiFormControlStateColor:transparent;--euiFormControlStateHoverColor:transparent;}&: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, ";", _form.euiFormControlHighlightBorderStyles, " &:has(.euiPopover-isOpen, .euiDatePopoverButton:focus){--euiFormControlStateColor:transparent;--euiFormControlStateHoverColor:transparent;}&: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{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";};label:needsUpdating;")
     }
   };
-};
-var _buttonStyles = exports._buttonStyles = function _buttonStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
-  return /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " ", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";white-space:nowrap;text-overflow:ellipsis;overflow:hidden;color:inherit;background-color:inherit;&:disabled{cursor:not-allowed;}");
 };

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

@@ -102,7 +102,7 @@ var euiFilterButtonChildStyles = exports.euiFilterButtonChildStyles = function e
       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;"),
+      euiFilterButton__text: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiTextShift)('bold', 'data-text', euiTheme), " ", (0, _global_styling.euiTextTruncate)(), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.xs), ";;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 * 2;
       })), ";;label:hasNotification;")

package/optimize/lib/components/flyout/flyout_body.js

@@ -12,7 +12,7 @@ var _classnames = _interopRequireDefault(require("classnames"));
 var _services = require("../../services");
 var _flyout_body = require("./flyout_body.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["children", "className", "banner", "scrollableTabIndex"];
+var _excluded = ["children", "className", "banner", "scrollableTabIndex", "scrollContainerRef"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -26,6 +26,7 @@ var EuiFlyoutBody = exports.EuiFlyoutBody = function EuiFlyoutBody(_ref) {
     banner = _ref.banner,
     _ref$scrollableTabInd = _ref.scrollableTabIndex,
     scrollableTabIndex = _ref$scrollableTabInd === void 0 ? 0 : _ref$scrollableTabInd,
+    scrollContainerRef = _ref.scrollContainerRef,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiFlyoutBody', className);
   var styles = (0, _services.useEuiMemoizedStyles)(_flyout_body.euiFlyoutBodyStyles);
@@ -36,7 +37,9 @@ var EuiFlyoutBody = exports.EuiFlyoutBody = function EuiFlyoutBody(_ref) {
   }, rest), (0, _react2.jsx)("div", {
     tabIndex: scrollableTabIndex,
     className: "euiFlyoutBody__overflow",
-    css: overflowCssStyles
+    css: overflowCssStyles,
+    ref: scrollContainerRef,
+    "data-test-subj": "euiFlyoutBodyOverflow"
   }, banner && (0, _react2.jsx)("div", {
     className: "euiFlyoutBody__banner",
     css: styles.euiFlyoutBody__banner

package/optimize/lib/components/flyout/manager/actions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.setPushPadding = exports.setLayoutMode = exports.setFlyoutWidth = exports.setActivityStage = exports.setActiveFlyout = exports.goToFlyout = exports.goBack = exports.closeUnmanagedFlyout = exports.closeFlyout = exports.addUnmanagedFlyout = exports.addFlyout = exports.ACTION_SET_WIDTH = exports.ACTION_SET_PUSH_PADDING = exports.ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_ACTIVITY_STAGE = exports.ACTION_SET_ACTIVE = exports.ACTION_GO_TO_FLYOUT = exports.ACTION_GO_BACK = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE = exports.ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD = void 0;
+exports.setPushPadding = exports.setLayoutMode = exports.setFlyoutWidth = exports.setActivityStage = exports.setActiveFlyout = exports.goToFlyout = exports.goBack = exports.closeUnmanagedFlyout = exports.closeFlyout = exports.closeAllFlyouts = exports.addUnmanagedFlyout = exports.addFlyout = exports.ACTION_SET_WIDTH = exports.ACTION_SET_PUSH_PADDING = exports.ACTION_SET_LAYOUT_MODE = exports.ACTION_SET_ACTIVITY_STAGE = exports.ACTION_SET_ACTIVE = exports.ACTION_GO_TO_FLYOUT = exports.ACTION_GO_BACK = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_ALL = exports.ACTION_CLOSE = exports.ACTION_ADD_UNMANAGED_FLYOUT = exports.ACTION_ADD = void 0;
 var _const = require("./const");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -18,6 +18,8 @@ var PREFIX = 'eui/flyoutManager';
 var ACTION_ADD = exports.ACTION_ADD = "".concat(PREFIX, "/add");
 /** Dispatched to remove a flyout from the manager (usually on close/unmount). */
 var ACTION_CLOSE = exports.ACTION_CLOSE = "".concat(PREFIX, "/close");
+/** Dispatched to remove all flyouts from the manager. */
+var ACTION_CLOSE_ALL = exports.ACTION_CLOSE_ALL = "".concat(PREFIX, "/closeAll");
 /** Dispatched to set which flyout is currently active within the session. */
 var ACTION_SET_ACTIVE = exports.ACTION_SET_ACTIVE = "".concat(PREFIX, "/setActive");
 /** Dispatched when an active flyout's pixel width changes (for responsive layout). */
@@ -42,6 +44,8 @@ var ACTION_CLOSE_UNMANAGED_FLYOUT = exports.ACTION_CLOSE_UNMANAGED_FLYOUT = "".c
 
 /** Remove a flyout from manager state. Also updates the active session. */
 
+/** Remove all flyouts from manager state. */
+
 /** Set the active flyout within the current session (or clear with `null`). */
 
 /** Update a flyout's measured width in pixels. */
@@ -84,6 +88,13 @@ var closeFlyout = exports.closeFlyout = function closeFlyout(flyoutId) {
   };
 };
 
+/** Unregister all flyouts. */
+var closeAllFlyouts = exports.closeAllFlyouts = function closeAllFlyouts() {
+  return {
+    type: ACTION_CLOSE_ALL
+  };
+};
+
 /** Set or clear the active flyout for the current session. */
 var setActiveFlyout = exports.setActiveFlyout = function setActiveFlyout(flyoutId) {
   return {

package/optimize/lib/components/flyout/manager/flyout_managed.js

@@ -78,6 +78,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
   var _useFlyoutManager2 = useFlyoutManager(),
     addFlyout = _useFlyoutManager2.addFlyout,
     closeFlyout = _useFlyoutManager2.closeFlyout,
+    closeAllFlyouts = _useFlyoutManager2.closeAllFlyouts,
     setFlyoutWidth = _useFlyoutManager2.setFlyoutWidth,
     goBack = _useFlyoutManager2.goBack,
     _historyItems = _useFlyoutManager2.historyItems;
@@ -151,13 +152,13 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
       // Only call closeFlyout if it wasn't already called via onClose
       // This prevents duplicate removal when using Escape/X button
       if (flyoutExistsInManagerRef.current) {
-        closeFlyout(flyoutId);
+        level === _const.LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
       }
 
       // Reset navigation tracking when explicitly closed via isOpen=false
       wasRegisteredRef.current = false;
     };
-  }, [flyoutId, title, level, size, addFlyout, closeFlyout]);
+  }, [flyoutId, title, level, size, addFlyout, closeFlyout, closeAllFlyouts]);
 
   // Detect when flyout has been removed from manager state (e.g., via Back button)
   // and trigger onClose callback to notify the parent component
@@ -200,7 +201,7 @@ var EuiManagedFlyout = exports.EuiManagedFlyout = /*#__PURE__*/(0, _react.forwar
     // and ensures cascade close logic runs before DOM cleanup begins
     // Using flushSync to force synchronous state update completion
     (0, _reactDom.flushSync)(function () {
-      closeFlyout(flyoutId);
+      level === _const.LEVEL_MAIN ? closeAllFlyouts() : closeFlyout(flyoutId);
     });
 
     // trigger parent callback, unmounts the component

package/optimize/lib/components/flyout/manager/index.js

@@ -27,6 +27,12 @@ Object.defineProperty(exports, "addFlyoutAction", {
     return _actions.addFlyout;
   }
 });
+Object.defineProperty(exports, "closeAllFlyoutsAction", {
+  enumerable: true,
+  get: function get() {
+    return _actions.closeAllFlyouts;
+  }
+});
 Object.defineProperty(exports, "closeFlyoutAction", {
   enumerable: true,
   get: function get() {

package/optimize/lib/components/flyout/manager/reducer.js

@@ -188,6 +188,24 @@ function flyoutManagerReducer() {
         });
       }
 
+    // Unregister all flyouts.
+    case _actions.ACTION_CLOSE_ALL:
+      {
+        if (state.sessions.length === 0) {
+          return state;
+        }
+
+        // Reset current z-index to 0 only if no unmanaged flyouts remain.
+        var _newCurrentZIndex2 = state.currentZIndex;
+        if (state.unmanagedFlyouts.length === 0) {
+          _newCurrentZIndex2 = 0;
+        }
+        return _objectSpread(_objectSpread({}, initialState), {}, {
+          currentZIndex: _newCurrentZIndex2,
+          unmanagedFlyouts: state.unmanagedFlyouts
+        });
+      }
+
     // Mark the provided flyout ID as the active child for the latest session.
     case _actions.ACTION_SET_ACTIVE:
       {

package/optimize/lib/components/flyout/manager/store.js

@@ -102,6 +102,9 @@ function createStore() {
     closeFlyout: function closeFlyout(flyoutId) {
       return dispatch((0, _actions.closeFlyout)(flyoutId));
     },
+    closeAllFlyouts: function closeAllFlyouts() {
+      return dispatch((0, _actions.closeAllFlyouts)());
+    },
     setActiveFlyout: function setActiveFlyout(flyoutId) {
       return dispatch((0, _actions.setActiveFlyout)(flyoutId));
     },

package/optimize/lib/components/form/field_password/field_password.js

@@ -20,7 +20,7 @@ var _validatable_control = require("../validatable_control");
 var _eui_form_context = require("../eui_form_context");
 var _field_password = require("./field_password.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "id", "name", "placeholder", "value", "disabled", "isInvalid", "fullWidth", "isLoading", "compressed", "inputRef", "prepend", "append", "type", "dualToggleProps"];
+var _excluded = ["className", "id", "name", "placeholder", "value", "disabled", "isInvalid", "fullWidth", "isLoading", "compressed", "inputRef", "prepend", "append", "type", "dualToggleProps", "readOnly"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -52,6 +52,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     _props$type = props.type,
     type = _props$type === void 0 ? 'password' : _props$type,
     dualToggleProps = props.dualToggleProps,
+    readOnly = props.readOnly,
     rest = (0, _objectWithoutProperties2.default)(props, _excluded);
 
   // Set the initial input type to `password` if they want dual
@@ -118,7 +119,8 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     isDisabled: disabled,
     compressed: compressed,
     prepend: prepend,
-    append: finalAppend
+    append: finalAppend,
+    readOnly: readOnly
   }, (0, _react2.jsx)(_validatable_control.EuiValidatableControl, {
     isInvalid: isInvalid
   }, (0, _react2.jsx)("input", (0, _extends2.default)({
@@ -130,6 +132,7 @@ var EuiFieldPassword = exports.EuiFieldPassword = function EuiFieldPassword(prop
     css: cssStyles,
     value: value,
     disabled: disabled,
-    ref: setInputRef
+    ref: setInputRef,
+    readOnly: readOnly
   }, rest))));
 };

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiFormVariables = exports.euiFormPlaceholderStyles = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlShowBackgroundLine = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlHoverStyles = exports.euiFormControlHighlightBorderStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutoFillStyles = exports.disableFormControlHoverStyles = void 0;
+exports.euiFormVariables = exports.euiFormPlaceholderStyles = exports.euiFormMaxWidth = exports.euiFormCustomControlVariables = exports.euiFormCustomControlStyles = exports.euiFormControlText = exports.euiFormControlStyles = exports.euiFormControlShowBackgroundLine = exports.euiFormControlReadOnlyStyles = exports.euiFormControlInvalidStyles = exports.euiFormControlHoverStyles = exports.euiFormControlHighlightBorderStyles = exports.euiFormControlFocusStyles = exports.euiFormControlDisabledStyles = exports.euiFormControlDefaultShadow = exports.euiFormControlAutofillUnsetStyles = exports.euiFormControlAutoFillStyles = exports.disableFormControlHoverStyles = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _services = require("../../services");
 var _global_styling = require("../../global_styling");
@@ -59,15 +59,19 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     backgroundColor: backgroundColor,
     backgroundDisabledColor: euiTheme.components.forms.backgroundDisabled,
     backgroundReadOnlyColor: euiTheme.components.forms.backgroundReadOnly,
+    backgroundAutoFilled: euiTheme.components.forms.backgroundAutofilled,
     borderColor: highContrastMode ? euiTheme.border.color : euiTheme.components.forms.border,
     borderHovered: euiTheme.components.forms.borderHovered,
     borderFocused: euiTheme.components.forms.borderFocused,
     borderInvalid: euiTheme.components.forms.borderInvalid,
     borderInvalidHovered: euiTheme.components.forms.borderInvalidHovered,
+    borderAutofilled: euiTheme.components.forms.borderAutofilled,
+    borderAutofilledHovered: euiTheme.components.forms.borderAutofilledHovered,
     controlDisabledColor: euiTheme.components.forms.controlBackgroundDisabled,
     controlBoxShadow: '0 0 transparent',
     controlPlaceholderText: highContrastMode ? (0, _services.makeHighContrastColor)(euiTheme.components.forms.colorDisabled)(backgroundColor) : euiTheme.components.forms.colorDisabled,
-    appendPrependBackground: euiTheme.components.forms.prependBackground
+    appendPrependBackground: euiTheme.components.forms.prependBackground,
+    labelColor: euiTheme.colors.textHeading
   };
   var controlLayout = {
     controlLayoutGroupInputHeight: (0, _global_styling.mathWithUnits)(controlHeight, function (x) {
@@ -76,7 +80,11 @@ var euiFormVariables = exports.euiFormVariables = function euiFormVariables(euiT
     controlLayoutGroupInputCompressedHeight: (0, _global_styling.mathWithUnits)(controlCompressedHeight, function (x) {
       return x - 2;
     }),
-    controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.small
+    controlLayoutGroupInputCompressedBorderRadius: euiTheme.border.radius.small,
+    controlLayoutBorderRadius: euiTheme.border.radius.small,
+    controlLayoutInnerBorderRadius: (0, _global_styling.mathWithUnits)(euiTheme.border.radius.small, function (x) {
+      return x / 2;
+    })
   };
   var iconSizes = {
     controlIconSize: {
@@ -103,7 +111,7 @@ var euiFormControlStyles = exports.euiFormControlStyles = function euiFormContro
     inGroup: "\n      ".concat((0, _global_styling.logicalCSS)('height', '100%'), "\n      ").concat((0, _high_contrast.highContrastModeStyles)(euiThemeContext, {
       none: 'box-shadow: none;',
       preferred: 'border: none;'
-    }), "\n      border-radius: inherit;\n    "),
+    }), "\n    "),
     // Widths
     formWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', form.maxWidth), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
     fullWidth: "\n      ".concat((0, _global_styling.logicalCSS)('max-width', '100%'), "\n      ").concat((0, _global_styling.logicalCSS)('width', '100%'), "\n    "),
@@ -153,7 +161,7 @@ var euiFormControlHoverStyles = exports.euiFormControlHoverStyles = function eui
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;
   var form = euiFormVariables(euiThemeContext);
-  return "\n    ".concat(hoverSelector, " {\n      --borderWidthBase: var(--euiFormControlStateWidth, ").concat(euiTheme.border.width.thin, ");\n      --borderWidth: ").concat(highContrastMode ? euiTheme.border.width.thick : 'var(--borderWidthBase)', ";\n      --borderColor: var(--euiFormControlStateHoverColor, ").concat(highContrastMode ? euiTheme.border.color : form.borderHovered, ");\n      position: relative;\n      z-index: 1;\n      outline: var(--borderWidth) solid var(--borderColor);\n      outline-offset: calc(-1 * var(--borderWidth));\n    }\n  ");
+  return "\n    ".concat(hoverSelector, " {\n      --borderWidthBase: var(--euiFormControlStateWidth, ").concat(euiTheme.border.width.thin, ");\n      --borderWidth: ").concat(highContrastMode ? euiTheme.border.width.thick : 'var(--borderWidthBase)', ";\n      --borderColor: var(--euiFormControlStateHoverColor, ").concat(highContrastMode ? euiTheme.border.color : form.borderHovered, ");\n      position: relative;\n      outline: var(--borderWidth) solid var(--borderColor);\n      outline-offset: calc(-1 * var(--borderWidth));\n    }\n  ");
 };
 var euiFormControlHighlightBorderStyles = exports.euiFormControlHighlightBorderStyles = "\n  position: relative;\n  z-index: 1;\n  box-shadow: none;\n  outline: var(--euiFormControlStateWidth) solid var(--euiFormControlStateColor);\n  outline-offset: calc(-1 * var(--euiFormControlStateWidth));\n";
 var euiFormControlFocusStyles = exports.euiFormControlFocusStyles = function euiFormControlFocusStyles(euiThemeContext) {
@@ -187,24 +195,23 @@ var euiFormControlAutoFillStyles = exports.euiFormControlAutoFillStyles = functi
   var form = euiFormVariables(euiThemeContext);
   // Make the text color slightly less prominent than the default colors.text
   var textColor = euiTheme.colors.darkestShade;
-  var tintedBackgroundColor = euiTheme.components.forms.backgroundAutofilled;
+  var tintedBackgroundColor = form.backgroundAutoFilled;
   // Hacky workaround to background-color, since Chrome doesn't normally allow overriding its styles
   // @see https://developer.mozilla.org/en-US/docs/Web/CSS/:autofill#sect1
   var backgroundShadow = "inset 0 0 0 100vw ".concat(tintedBackgroundColor);
 
   // Re-create the border, since the above webkit box shadow overrides the default border box-shadow
   // + change the border color to match states, since the underline background gradient no longer works
-  var borderColor = euiTheme.components.forms.borderAutofilled;
-  var borderHovered = euiTheme.components.forms.borderAutofilledHovered;
+  var borderColor = form.borderAutofilled;
+  var borderHovered = form.borderAutofilledHovered;
   var borderInvalid = form.borderInvalid;
   var borderInvalidHovered = form.borderInvalidHovered;
-  var borderShadow = function borderShadow(color) {
-    return "inset 0 0 0 ".concat(euiTheme.border.width.thin, " ").concat(color);
-  };
+  var borderShadow = "inset 0 0 0 var(--euiFormControlStateAutofillWidth) var(--euiFormControlStateAutofillColor), ".concat(backgroundShadow);
 
   // These styles only apply/override Chrome/webkit browsers - Firefox does not set autofill styles
-  return "\n    &:-webkit-autofill {\n      -webkit-text-fill-color: ".concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow(borderColor), ", ").concat(backgroundShadow, ";\n\n      &:hover,\n      &:focus {\n        -webkit-box-shadow: ").concat(borderShadow(borderHovered), ", ").concat(backgroundShadow, ";\n      }\n\n      &:invalid {\n        -webkit-box-shadow: ").concat(borderShadow(borderInvalid), ", ").concat(backgroundShadow, ";\n\n        &:hover {\n          -webkit-box-shadow: ").concat(borderShadow(borderInvalidHovered), ", ").concat(backgroundShadow, ";\n        }\n      }\n    }\n  ");
+  return "\n    &:where(:-webkit-autofill) {\n      --euiFormControlStateAutofillWidth: ".concat(euiTheme.border.width.thin, ";\n      --euiFormControlStateAutofillColor: ").concat(borderColor, ";\n      \n      -webkit-text-fill-color: ").concat(textColor, ";\n      -webkit-box-shadow: ").concat(borderShadow, ";\n     \n\n      &:hover {\n        --euiFormControlStateAutofillColor: ").concat(borderHovered, ";\n      }\n\n      &:focus {\n        --euiFormControlStateAutofillWidth: ").concat(euiTheme.border.width.thick, ";\n      }\n\n      &:invalid {\n        --euiFormControlStateAutofillColor: ").concat(borderInvalid, ";\n\n        &:hover {\n          --euiFormControlStateAutofillColor: ").concat(borderInvalidHovered, ";\n        }\n      }\n    }\n  ");
 };
+var euiFormControlAutofillUnsetStyles = exports.euiFormControlAutofillUnsetStyles = "\n\n";
 var euiFormControlShowBackgroundLine = exports.euiFormControlShowBackgroundLine = function euiFormControlShowBackgroundLine(euiThemeContext, color) {
   var euiTheme = euiThemeContext.euiTheme,
     highContrastMode = euiThemeContext.highContrastMode;