@elastic/eui 105.0.0 → 106.0.0

package/dist/eui_theme_amsterdam_dark.json

@@ -413,6 +413,8 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255,0.1)",
   "euiColorBorderBaseFormsControl": "#69696f",
+  "euiColorBorderInteractiveFormsHoverPlain": "transparent",
+  "euiColorBorderInteractiveFormsHoverDanger": "transparent",
   "euiColorBorderStrongPrimary": "#36A2EF",
   "euiColorBorderStrongAccent": "#F68FBE",
   "euiColorBorderStrongAccentSecondary": "#7DDED8",

package/dist/eui_theme_amsterdam_dark.json.d.ts

@@ -414,6 +414,8 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_dark.json' {
     euiColorBorderBaseFloating: string;
     euiColorBorderBaseFormsColorSwatch: string;
     euiColorBorderBaseFormsControl: string;
+    euiColorBorderInteractiveFormsHoverPlain: string;
+    euiColorBorderInteractiveFormsHoverDanger: string;
     euiColorBorderStrongPrimary: string;
     euiColorBorderStrongAccent: string;
     euiColorBorderStrongAccentSecondary: string;

package/dist/eui_theme_amsterdam_light.json

@@ -413,6 +413,8 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(0,0,0,0.1)",
   "euiColorBorderBaseFormsControl": "#919296",
+  "euiColorBorderInteractiveFormsHoverPlain": "transparent",
+  "euiColorBorderInteractiveFormsHoverDanger": "transparent",
   "euiColorBorderStrongPrimary": "#0077CC",
   "euiColorBorderStrongAccent": "#F04E98",
   "euiColorBorderStrongAccentSecondary": "#00BFB3",

package/dist/eui_theme_amsterdam_light.json.d.ts

@@ -414,6 +414,8 @@ declare module '@elastic/eui/dist/eui_theme_amsterdam_light.json' {
     euiColorBorderBaseFloating: string;
     euiColorBorderBaseFormsColorSwatch: string;
     euiColorBorderBaseFormsControl: string;
+    euiColorBorderInteractiveFormsHoverPlain: string;
+    euiColorBorderInteractiveFormsHoverDanger: string;
     euiColorBorderStrongPrimary: string;
     euiColorBorderStrongAccent: string;
     euiColorBorderStrongAccentSecondary: string;

package/dist/eui_theme_borealis_dark.json

@@ -413,6 +413,8 @@
   "euiColorBorderBaseFloating": "#2B394F",
   "euiColorBorderBaseFormsColorSwatch": "rgba(255,255,255, 0.32)",
   "euiColorBorderBaseFormsControl": "#6A7FA0",
+  "euiColorBorderInteractiveFormsHoverPlain": "#5A6D8C",
+  "euiColorBorderInteractiveFormsHoverDanger": "#EE4C48",
   "euiColorBorderStrongPrimary": "#61A2FF",
   "euiColorBorderStrongAccent": "#EE72A6",
   "euiColorBorderStrongAccentSecondary": "#16C5C0",

package/dist/eui_theme_borealis_dark.json.d.ts

@@ -414,6 +414,8 @@ declare module '@elastic/eui/dist/eui_theme_borealis_dark.json' {
     euiColorBorderBaseFloating: string;
     euiColorBorderBaseFormsColorSwatch: string;
     euiColorBorderBaseFormsControl: string;
+    euiColorBorderInteractiveFormsHoverPlain: string;
+    euiColorBorderInteractiveFormsHoverDanger: string;
     euiColorBorderStrongPrimary: string;
     euiColorBorderStrongAccent: string;
     euiColorBorderStrongAccentSecondary: string;

package/dist/eui_theme_borealis_light.json

@@ -413,13 +413,15 @@
   "euiColorBorderBaseFloating": "transparent",
   "euiColorBorderBaseFormsColorSwatch": "rgba(72,89,117, 0.24)",
   "euiColorBorderBaseFormsControl": "#8E9FBC",
-  "euiColorBorderStrongPrimary": "#1750BA",
-  "euiColorBorderStrongAccent": "#A11262",
-  "euiColorBorderStrongAccentSecondary": "#047471",
-  "euiColorBorderStrongNeutral": "#0F658A",
-  "euiColorBorderStrongSuccess": "#09724D",
-  "euiColorBorderStrongWarning": "#825803",
-  "euiColorBorderStrongRisk": "#9E3A16",
-  "euiColorBorderStrongDanger": "#A71627",
+  "euiColorBorderInteractiveFormsHoverPlain": "#B4C1D5",
+  "euiColorBorderInteractiveFormsHoverDanger": "#DA3737",
+  "euiColorBorderStrongPrimary": "#0B64DD",
+  "euiColorBorderStrongAccent": "#BC1E70",
+  "euiColorBorderStrongAccentSecondary": "#008B87",
+  "euiColorBorderStrongNeutral": "#19799F",
+  "euiColorBorderStrongSuccess": "#008A5E",
+  "euiColorBorderStrongWarning": "#966B03",
+  "euiColorBorderStrongRisk": "#C24411",
+  "euiColorBorderStrongDanger": "#C61E25",
   "euiColorBorderStrongText": "#5A6D8C"
 }

package/dist/eui_theme_borealis_light.json.d.ts

@@ -414,6 +414,8 @@ declare module '@elastic/eui/dist/eui_theme_borealis_light.json' {
     euiColorBorderBaseFloating: string;
     euiColorBorderBaseFormsColorSwatch: string;
     euiColorBorderBaseFormsControl: string;
+    euiColorBorderInteractiveFormsHoverPlain: string;
+    euiColorBorderInteractiveFormsHoverDanger: string;
     euiColorBorderStrongPrimary: string;
     euiColorBorderStrongAccent: string;
     euiColorBorderStrongAccentSecondary: string;

package/es/components/combo_box/combo_box_input/combo_box_input.js

@@ -33,7 +33,7 @@ function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e
 import React, { Component } from 'react';
 import PropTypes from "prop-types";
 import classNames from 'classnames';
-import { keys, CanvasTextUtils, RenderWithEuiStylesMemoizer } from '../../../services';
+import { keys, CanvasTextUtils, RenderWithEuiStylesMemoizer, isEuiThemeRefreshVariant, RenderWithEuiTheme } from '../../../services';
 import { EuiScreenReaderOnly } from '../../accessibility';
 import { EuiFormControlLayout } from '../../form/form_control_layout';
 import { EuiComboBoxOptionAppendPrepend } from '../utils';
@@ -248,66 +248,70 @@ export var EuiComboBoxInput = /*#__PURE__*/function (_Component) {
       var wrapClasses = classNames('euiComboBox__inputWrap', {
         'euiComboBox__inputWrap--plainText': this.asPlainText
       });
-      return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
-        var styles = stylesMemoizer(euiComboBoxInputStyles);
-        var cssStyles = [styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed].concat(_toConsumableArray(_this2.asPlainText || showPlaceholder ? [styles.plainText.plainText, compressed ? styles.plainText.compressed : styles.plainText.uncompressed] : []), [isDisabled ? styles.disabled : isInvalid ? styles.invalid : isListOpen ? styles.open : undefined, isInGroup && styles.inGroup]);
-        var formLayoutStyles = [styles.formLayout.euiComboBox__formControlLayout, !singleSelection && styles.formLayout.multiSelect];
-        return ___EmotionJSX(EuiFormControlLayout, _extends({
-          icon: icon
-        }, clickProps, {
-          inputId: id,
-          isLoading: isLoading,
-          isInvalid: isInvalid,
-          isDisabled: isDisabled,
-          compressed: compressed,
-          fullWidth: fullWidth,
-          prepend: prepend,
-          append: append,
-          css: formLayoutStyles
-        }), ___EmotionJSX("div", {
-          css: cssStyles,
-          className: wrapClasses,
-          "data-test-subj": "comboBoxInput",
-          onClick: onClick,
-          tabIndex: -1 // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
-        }, _this2.renderPills(), ___EmotionJSX(EuiComboBoxOptionAppendPrepend, {
-          option: _this2.asPlainText ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0] : undefined,
-          classNamePrefix: "euiComboBoxPlainTextSelection",
-          marginSize: "xxs"
-        }, ___EmotionJSX("input", {
-          "aria-activedescendant": focusedOptionId,
-          "aria-autocomplete": "list",
-          "aria-controls": isListOpen ? rootId('listbox') : '',
-          "aria-expanded": isListOpen,
-          "aria-label": ariaLabel,
-          "aria-labelledby": ariaLabelledby,
-          "aria-describedby": ariaDescribedby,
-          "aria-invalid": isInvalid,
-          "aria-haspopup": "listbox",
-          css: styles.euiComboBoxInput,
-          className: "euiComboBox__input",
-          "data-test-subj": "comboBoxSearchInput",
-          disabled: isDisabled,
-          id: id,
-          onBlur: _this2.onBlur,
-          onChange: function onChange(event) {
-            return _onChange(event.target.value);
-          },
-          onFocus: _this2.onFocus,
-          onKeyDown: _this2.onKeyDown,
-          ref: _this2.inputRefCallback,
-          role: "combobox",
-          style: {
-            inlineSize: _this2.asPlainText || showPlaceholder ? '100%' : _this2.state.inputWidth
-          },
-          placeholder: showPlaceholder ? placeholder : undefined,
-          value: _this2.searchValue,
-          autoFocus: autoFocus,
-          autoComplete: "off"
-          // Force the menu to re-open on every input click - only necessary when plain text
-          ,
-          onClick: _this2.asPlainText ? onFocus : undefined // Type shenanigans - event should be mostly the same
-        })), removeOptionMessage));
+      return ___EmotionJSX(RenderWithEuiTheme, null, function (euiThemeContext) {
+        return ___EmotionJSX(RenderWithEuiStylesMemoizer, null, function (stylesMemoizer) {
+          var styles = stylesMemoizer(euiComboBoxInputStyles);
+          var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
+          var stateCss = isRefreshVariant ? isListOpen ? styles.open : isInvalid ? styles.invalid : undefined : isInvalid ? styles.invalid : isListOpen ? styles.open : undefined;
+          var cssStyles = [styles.euiComboBoxInputWrapper, !singleSelection && styles.multiSelect, compressed ? styles.compressed : styles.uncompressed].concat(_toConsumableArray(_this2.asPlainText || showPlaceholder ? [styles.plainText.plainText, compressed ? styles.plainText.compressed : styles.plainText.uncompressed] : []), [isDisabled ? styles.disabled : stateCss, isInGroup && styles.inGroup]);
+          var formLayoutStyles = [styles.formLayout.euiComboBox__formControlLayout, !singleSelection && styles.formLayout.multiSelect];
+          return ___EmotionJSX(EuiFormControlLayout, _extends({
+            icon: icon
+          }, clickProps, {
+            inputId: id,
+            isLoading: isLoading,
+            isInvalid: isInvalid,
+            isDisabled: isDisabled,
+            compressed: compressed,
+            fullWidth: fullWidth,
+            prepend: prepend,
+            append: append,
+            css: formLayoutStyles
+          }), ___EmotionJSX("div", {
+            css: cssStyles,
+            className: wrapClasses,
+            "data-test-subj": "comboBoxInput",
+            onClick: onClick,
+            tabIndex: -1 // becomes onBlur event's relatedTarget, otherwise relatedTarget is null when clicking on this div
+          }, _this2.renderPills(), ___EmotionJSX(EuiComboBoxOptionAppendPrepend, {
+            option: _this2.asPlainText ? selectedOptions === null || selectedOptions === void 0 ? void 0 : selectedOptions[0] : undefined,
+            classNamePrefix: "euiComboBoxPlainTextSelection",
+            marginSize: "xxs"
+          }, ___EmotionJSX("input", {
+            "aria-activedescendant": focusedOptionId,
+            "aria-autocomplete": "list",
+            "aria-controls": isListOpen ? rootId('listbox') : '',
+            "aria-expanded": isListOpen,
+            "aria-label": ariaLabel,
+            "aria-labelledby": ariaLabelledby,
+            "aria-describedby": ariaDescribedby,
+            "aria-invalid": isInvalid,
+            "aria-haspopup": "listbox",
+            css: styles.euiComboBoxInput,
+            className: "euiComboBox__input",
+            "data-test-subj": "comboBoxSearchInput",
+            disabled: isDisabled,
+            id: id,
+            onBlur: _this2.onBlur,
+            onChange: function onChange(event) {
+              return _onChange(event.target.value);
+            },
+            onFocus: _this2.onFocus,
+            onKeyDown: _this2.onKeyDown,
+            ref: _this2.inputRefCallback,
+            role: "combobox",
+            style: {
+              inlineSize: _this2.asPlainText || showPlaceholder ? '100%' : _this2.state.inputWidth
+            },
+            placeholder: showPlaceholder ? placeholder : undefined,
+            value: _this2.searchValue,
+            autoFocus: autoFocus,
+            autoComplete: "off"
+            // Force the menu to re-open on every input click - only necessary when plain text
+            ,
+            onClick: _this2.asPlainText ? onFocus : undefined // Type shenanigans - event should be mostly the same
+          })), removeOptionMessage));
+        });
       });
     }
   }]);

package/es/components/combo_box/combo_box_input/combo_box_input.styles.js

@@ -8,6 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
+import { isEuiThemeRefreshVariant } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 import { euiFormControlStyles, euiFormControlDefaultShadow, euiFormControlText } from '../../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -28,12 +29,13 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
 };
 export var euiComboBoxInputStyles = function euiComboBoxInputStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var formStyles = euiFormControlStyles(euiThemeContext);
   return {
     // Wrapper which visually mimics a form control
-    euiComboBoxInputWrapper: /*#__PURE__*/css(euiFormControlDefaultShadow(euiThemeContext), " display:flex;;label:euiComboBoxInputWrapper;"),
+    euiComboBoxInputWrapper: /*#__PURE__*/css(euiFormControlDefaultShadow(euiThemeContext), " display:flex;", isRefreshVariant && "\n        &:focus-within {\n          ".concat(formStyles.focus, "\n        }\n      "), ";;label:euiComboBoxInputWrapper;"),
     multiSelect: _ref2,
-    uncompressed: "\n      ".concat(formStyles.uncompressed, "\n      ").concat(logicalCSS('height', 'auto'), "\n      ").concat(logicalCSS('padding-vertical', euiTheme.size.s), "\n      ").concat(logicalCSS('padding-left', euiTheme.size.s), "\n      column-gap: ").concat(euiTheme.size.s, ";\n      row-gap: ").concat(euiTheme.size.xs, ";\n    "),
+    uncompressed: "\n      ".concat(formStyles.uncompressed, "\n      ").concat(logicalCSS('height', 'auto'), "\n      ").concat(logicalCSS('padding-vertical', euiTheme.size.s), "\n      ").concat(logicalCSS('padding-left', isRefreshVariant ? euiTheme.size.m : euiTheme.size.s), "\n      column-gap: ").concat(euiTheme.size.s, ";\n      row-gap: ").concat(euiTheme.size.xs, ";\n    "),
     compressed: /*#__PURE__*/css(formStyles.compressed, " ", logicalCSS('height', 'auto'), " ", logicalCSS('padding-vertical', euiTheme.size.xs), " ", logicalCSS('padding-left', euiTheme.size.xs), " column-gap:", euiTheme.size.xs, ";row-gap:", euiTheme.size.xxs, ";;label:compressed;"),
     plainText: {
       plainText: _ref,
@@ -42,10 +44,10 @@ export var euiComboBoxInputStyles = function euiComboBoxInputStyles(euiThemeCont
     },
     invalid: /*#__PURE__*/css(formStyles.invalid, ";label:invalid;"),
     disabled: /*#__PURE__*/css(formStyles.disabled, ";label:disabled;"),
-    open: /*#__PURE__*/css(formStyles.focus, ";label:open;"),
+    open: /*#__PURE__*/css(formStyles.focus, ";;label:open;"),
     inGroup: /*#__PURE__*/css(formStyles.inGroup, ";label:inGroup;"),
     // Actual input element, which has variable width depending on its value
-    euiComboBoxInput: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.l), " ", logicalCSS('min-width', '2px'), " ", logicalCSS('max-width', '100%'), euiFormControlText(euiThemeContext), " background:transparent;&:disabled{color:", euiTheme.colors.disabledText, ";}appearance:none!important;border:none!important;box-shadow:none!important;outline:none!important;;label:euiComboBoxInput;"),
+    euiComboBoxInput: /*#__PURE__*/css(logicalCSS('height', euiTheme.size.l), " ", logicalCSS('min-width', '2px'), " ", logicalCSS('max-width', '100%'), euiFormControlText(euiThemeContext), " background:transparent;&:disabled{color:", euiTheme.colors.textDisabled, ";}appearance:none!important;border:none!important;box-shadow:none!important;outline:none!important;;label:euiComboBoxInput;"),
     // EuiFormControlLayout overrides
     formLayout: {
       euiComboBox__formControlLayout: /*#__PURE__*/css(";label:euiComboBox__formControlLayout;"),

package/es/components/date_picker/date_picker.styles.js

@@ -9,6 +9,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 
 import { css } from '@emotion/react';
 import { euiShadowMedium } from '@elastic/eui-theme-common';
+import { isEuiThemeRefreshVariant } from '../../services';
 import { logicalCSS } from '../../global_styling';
 import { euiFormControlDisabledStyles, euiFormControlReadOnlyStyles, euiFormControlDefaultShadow, euiFormControlInvalidStyles } from '../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
@@ -21,10 +22,12 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiDatePickerStyles = function euiDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
+  var inlineStyles = "\n      /* removes form layout border */\n      &::after {\n        display: none;\n      }\n    ";
   return {
     euiDatePicker: _ref,
     inline: {
-      inline: /*#__PURE__*/css(".euiFormControlLayout{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " border:none;padding:0;}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", logicalCSS('padding-bottom', euiTheme.size.s), ";};label:inline;"),
+      inline: /*#__PURE__*/css(".euiFormControlLayout{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " border:none;padding:0;", isRefreshVariant && inlineStyles, ";}.euiFormControlLayout__childrenWrapper{flex-direction:column;}.euiFormControlLayoutIcons{justify-content:center;", 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__*/css(".euiFormControlLayout{background-color:", euiTheme.colors.emptyShade, ";", euiShadowMedium(euiThemeContext, {

package/es/components/date_picker/date_picker_range.js

@@ -15,7 +15,7 @@ import PropTypes from "prop-types";
 import classNames from 'classnames';
 import { EuiFormControlLayoutDelimited } from '../form';
 import { useEuiMemoizedStyles } from '../../services';
-import { euiDatePickerRangeStyles as styles, euiDatePickerRangeInlineStyles } from './date_picker_range.styles';
+import { euiDatePickerRangeStyles, euiDatePickerRangeInlineStyles } from './date_picker_range.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
   var children = _ref.children,
@@ -44,6 +44,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
   var fullWidth = _fullWidth && !inline;
   var compressed = _compressed && !inline;
   var classes = classNames('euiDatePickerRange', className);
+  var styles = useEuiMemoizedStyles(euiDatePickerRangeStyles);
   var inlineStyles = useEuiMemoizedStyles(euiDatePickerRangeInlineStyles);
   var cssStyles = !inline ? styles.euiDatePickerRange : [inlineStyles.euiDatePickerRangeInline,
   // Determine the inline container query to use based on the width of the react-datepicker
@@ -101,7 +102,7 @@ export var EuiDatePickerRange = function EuiDatePickerRange(_ref) {
     if (iconType === true) return 'calendar';
     return iconType;
   }, [iconType, inline]);
-  return ___EmotionJSX("span", _extends({
+  return ___EmotionJSX("div", _extends({
     className: classes,
     css: cssStyles
   }, rest), ___EmotionJSX(EuiFormControlLayoutDelimited, {

package/es/components/date_picker/date_picker_range.styles.js

@@ -10,8 +10,14 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import { css } from '@emotion/react';
 import { euiShadowMedium } from '@elastic/eui-theme-common';
 import { logicalCSS } from '../../global_styling';
-export var euiDatePickerRangeStyles = {
-  euiDatePickerRange: /*#__PURE__*/css(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", logicalCSS('height', '100%'), ";}.euiPopover{flex:1;};label:euiDatePickerRange;")
+import { isEuiThemeRefreshVariant } from '../../services';
+import { disableFormControlHoverStyles } from '../form/form.styles';
+export var euiDatePickerRangeStyles = function euiDatePickerRangeStyles(euiThemeContext) {
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
+  var refreshStyles = "\n      .euiPopover:last-child {\n        ".concat(logicalCSS('border-top-right-radius', 'inherit'), "\n        ").concat(logicalCSS('border-bottom-right-radius', 'inherit'), "\n\n        * {\n          ").concat(logicalCSS('border-top-right-radius', 'inherit'), "\n          ").concat(logicalCSS('border-bottom-right-radius', 'inherit'), "\n        }\n      }\n    ");
+  return {
+    euiDatePickerRange: /*#__PURE__*/css(".euiPopover,.react-datepicker__input-container,.euiDatePicker{", logicalCSS('height', '100%'), ";}.euiPopover{flex:1;}", isRefreshVariant && refreshStyles, ";;label:euiDatePickerRange;")
+  };
 };
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "bicgs9-noShadow",
@@ -23,6 +29,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = 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,
@@ -32,12 +39,12 @@ export var euiDatePickerRangeInlineStyles = function euiDatePickerRangeInlineSty
     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__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", 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;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
+    euiDatePickerRangeInline: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", logicalCSS('height', 'auto'), " ", logicalCSS('width', 'fit-content'), " ", 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;", logicalCSS('height', 'auto'), " ", logicalCSS('padding-bottom', euiTheme.size.s), ";}}.react-datepicker{position:relative;};label:euiDatePickerRangeInline;"),
     responsive: /*#__PURE__*/css(containerQuery(268), ";;label:responsive;"),
     responsiveWithTimeSelect: /*#__PURE__*/css(containerQuery(374), ";;label:responsiveWithTimeSelect;"),
     shadow: /*#__PURE__*/css(".euiFormControlLayoutDelimited{", euiShadowMedium(euiThemeContext, {
       borderAllInHighContrastMode: true
-    }), ";};label:shadow;"),
+    }), " ", isRefreshVariant && "\n          /* the form layout is not part of the interactive behavior but rather a container in this variant  */\n          ".concat(disableFormControlHoverStyles(), "\n\n          .euiFormControlLayout__childrenWrapper {\n            box-shadow: none;\n            ").concat(disableFormControlHoverStyles(), "\n          }\n        "), ";};label:shadow;"),
     // Applied directly to EuiFormControlLayout so we can check if `disabled`
     // and allow the disabled background-color to take precedence
     formLayout: {

package/es/components/date_picker/super_date_picker/super_date_picker.styles.js

@@ -8,10 +8,10 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { makeHighContrastColor } from '../../../services';
+import { isEuiThemeRefreshVariant, makeHighContrastColor } from '../../../services';
 import { euiFontSize, euiMaxBreakpoint, logicalCSS, mathWithUnits } from '../../../global_styling';
 import { highContrastModeStyles } from '../../../global_styling/functions/high_contrast';
-import { euiFormVariables, euiFormControlDefaultShadow, euiFormControlInvalidStyles, euiFormControlDisabledStyles, euiFormControlShowBackgroundUnderline } from '../../form/form.styles';
+import { euiFormVariables, euiFormControlDefaultShadow, euiFormControlInvalidStyles, euiFormControlDisabledStyles, euiFormControlShowBackgroundLine, euiFormControlFocusStyles, euiFormControlHighlightBorderStyles } from '../../form/form.styles';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1e4qgxg-euiSuperDatePicker__range",
   styles: "flex-grow:1;overflow:hidden;label:euiSuperDatePicker__range;"
@@ -22,6 +22,7 @@ var _ref = process.env.NODE_ENV === "production" ? {
 };
 export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
+  var isRefreshVariant = isEuiThemeRefreshVariant(euiThemeContext, 'formVariant');
   var forms = euiFormVariables(euiThemeContext);
   var inputWidth = euiTheme.base * 30;
   var buttonWidth = euiTheme.base * 7; // @see _button_display.styles.ts
@@ -41,6 +42,18 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
   // Needs updating colors
   var needsUpdatingBackgroundColor = euiTheme.components.superDatePickerBackgroundSuccees;
   var needsUpdatingTextColor = 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(logicalCSS('border-top-left-radius', 'inherit'), "\n          ").concat(logicalCSS('border-bottom-left-radius', 'inherit'), "\n        }\n\n        &:last-child {\n          ").concat(logicalCSS('border-top-right-radius', 'inherit'), "\n          ").concat(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(euiFormControlFocusStyles(euiThemeContext), "\n    ") : "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.primary, ";\n      ").concat(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(euiFormControlInvalidStyles(euiThemeContext), "\n      }\n\n      .euiDatePopoverButton:focus,\n      .euiPopover-isOpen .euiDatePopoverButton {\n        ").concat(euiFormControlFocusStyles(euiThemeContext), "\n      }\n    ") : "\n      ".concat(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(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(euiFormControlFocusStyles(euiThemeContext), "\n    ") : "\n      --euiFormControlStateColor: ".concat(euiTheme.colors.success, ";\n      ").concat(euiFormControlShowBackgroundLine(euiThemeContext, euiTheme.colors.success), "\n\n      ").concat(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(euiFormControlDefaultShadow(euiThemeContext), "\n      \n      ").concat(highContrastModeStyles(euiThemeContext, {
+    preferred: "\n          border: none;\n        "
+  }), "\n\n      &:focus {\n        ").concat(euiFormControlFocusStyles(euiThemeContext), "\n      }\n    ");
   return {
     euiSuperDatePicker: /*#__PURE__*/css("display:flex;gap:", gap, ";", logicalCSS('max-width', '100%'), " ", euiMaxBreakpoint(euiThemeContext, 'm'), "{", logicalCSS('width', '100%'), ";};label:euiSuperDatePicker;"),
     widths: {
@@ -65,27 +78,23 @@ export var euiSuperDatePickerStyles = function euiSuperDatePickerStyles(euiTheme
     isQuickSelectOnly: /*#__PURE__*/css(logicalCSS('min-width', 0), ".euiFormControlLayout__prepend{", logicalCSS('max-width', 'none'), ";};label:isQuickSelectOnly;"),
     euiSuperDatePicker__range: _ref,
     euiSuperDatePicker__rangeInput: /*#__PURE__*/css("flex-grow:1;", logicalCSS('width', 'auto'), " overflow:hidden;;label:euiSuperDatePicker__rangeInput;"),
-    euiSuperDatePicker__prettyFormat: /*#__PURE__*/css(_buttonStyles(euiThemeContext), " text-align:start;;label:euiSuperDatePicker__prettyFormat;"),
+    euiSuperDatePicker__prettyFormat: /*#__PURE__*/css(_buttonStyles(euiThemeContext), " text-align:start;", isRefreshVariant && prettyFormatStyles, ";;label:euiSuperDatePicker__prettyFormat;"),
     // Form states
     states: {
-      euiSuperDatePicker__formControlLayout: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", euiFormControlDefaultShadow(euiThemeContext), " ", highContrastModeStyles(euiThemeContext, {
+      euiSuperDatePicker__formControlLayout: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{--euiFormControlStateHoverColor:", forms.borderHovered, ";", euiFormControlDefaultShadow(euiThemeContext), " ", highContrastModeStyles(euiThemeContext, {
         none: 'box-shadow: none;',
         preferred: 'border: none;'
-      }), ";};label:euiSuperDatePicker__formControlLayout;"),
-      default: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext, {
+      }), " ", isRefreshVariant && formLayoutStyles, ";};label:euiSuperDatePicker__formControlLayout;"),
+      default: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", forms.textColor, ";background-color:", forms.backgroundColor, ";}.euiDatePopoverButton{--euiFormControlStateHoverColor:", forms.borderHovered, ";", !isRefreshVariant && euiFormControlDefaultShadow(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
-      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.primary, ";", euiFormControlShowBackgroundUnderline(euiThemeContext, euiTheme.colors.primary), ";};label:default;"),
+      }), " box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", popoverButtonFocusStyles, ";};label:default;"),
       disabled: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{", euiFormControlDisabledStyles(euiThemeContext), ";};label:disabled;"),
-      invalid: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";", euiFormControlInvalidStyles(euiThemeContext), ";};label:invalid;"),
-      needsUpdating: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext, {
+      invalid: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", euiTheme.colors.textDanger, ";background-color:", forms.backgroundColor, ";", invalidStyles, ";};label:invalid;"),
+      needsUpdating: /*#__PURE__*/css(".euiFormControlLayout__childrenWrapper{color:", needsUpdatingTextColor, ";background-color:", needsUpdatingBackgroundColor, ";", isRefreshVariant && needsUpdatingStyles, ";}.euiFormControlLayoutDelimited__delimiter{color:inherit;}.euiDatePopoverButton{", euiFormControlDefaultShadow(euiThemeContext, {
         withBorder: false,
         withBackgroundColor: false
-      }), ";}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{--euiFormControlStateColor:", euiTheme.colors.success, ";", euiFormControlShowBackgroundUnderline(euiThemeContext, euiTheme.colors.success), ";}", 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          ")
-      }), ";;label:needsUpdating;")
+      }), " background-color:inherit;box-shadow:none;}.euiDatePopoverButton:focus,.euiPopover-isOpen .euiDatePopoverButton{", needsUpdatingPopoverButtonFocusStyles, ";};label:needsUpdating;")
     }
   };
 };

package/es/components/flyout/_flyout_close_button.styles.js

@@ -1,3 +1,4 @@
+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
@@ -10,11 +11,19 @@ import { css } from '@emotion/react';
 import { euiShadowXLarge } from '@elastic/eui-theme-common';
 import { euiMaxBreakpoint, euiMinBreakpoint, logicalCSS } from '../../global_styling';
 import { FLYOUT_BREAKPOINT } from './flyout.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1ffeobd-inside",
+  styles: "background-color:transparent;label:inside;"
+} : {
+  name: "1ffeobd-inside",
+  styles: "background-color:transparent;label:inside;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var euiFlyoutCloseButtonStyles = function euiFlyoutCloseButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     euiFlyout__closeButton: /*#__PURE__*/css("position:absolute;", logicalCSS('right', euiTheme.size.s), " ", logicalCSS('top', euiTheme.size.s), " z-index:3;;label:euiFlyout__closeButton;"),
-    inside: /*#__PURE__*/css("background-color:", euiTheme.components.flyoutCloseButtonInsideBackground, ";;label:inside;"),
+    inside: _ref,
     outside: /*#__PURE__*/css(euiShadowXLarge(euiThemeContext, {
       borderAllInHighContrastMode: true
     }), "animation:none!important;;label:outside;"),

package/es/components/flyout/flyout_child.js

@@ -1,4 +1,4 @@
-var _excluded = ["children", "className", "banner", "hideCloseButton", "onClose", "scrollableTabIndex", "size"];
+var _excluded = ["children", "backgroundStyle", "className", "banner", "hideCloseButton", "onClose", "scrollableTabIndex", "size"];
 function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
 function _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], t.indexOf(o) >= 0 || {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }
 function _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (e.indexOf(n) >= 0) continue; t[n] = r[n]; } return t; }
@@ -30,6 +30,8 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
  */
 export var EuiFlyoutChild = function EuiFlyoutChild(_ref) {
   var children = _ref.children,
+    _ref$backgroundStyle = _ref.backgroundStyle,
+    backgroundStyle = _ref$backgroundStyle === void 0 ? 'default' : _ref$backgroundStyle,
     className = _ref.className,
     banner = _ref.banner,
     _ref$hideCloseButton = _ref.hideCloseButton,
@@ -122,7 +124,7 @@ export var EuiFlyoutChild = function EuiFlyoutChild(_ref) {
   var styles = useEuiMemoizedStyles(euiFlyoutChildStyles);
   var childLayoutMode = flyoutContext.childLayoutMode,
     parentFlyoutRef = flyoutContext.parentFlyoutRef;
-  var flyoutChildCss = [styles.euiFlyoutChild, size === 's' ? styles.s : styles.m, childLayoutMode === 'side-by-side' ? styles.sidePosition : styles.stackedPosition];
+  var flyoutChildCss = [styles.euiFlyoutChild, backgroundStyle === 'shaded' ? styles.backgroundShaded : styles.backgroundDefault, size === 's' ? styles.s : styles.m, childLayoutMode === 'side-by-side' ? styles.sidePosition : styles.stackedPosition];
   return ___EmotionJSX(EuiFocusTrap, {
     returnFocus: function returnFocus() {
       if (parentFlyoutRef !== null && parentFlyoutRef !== void 0 && parentFlyoutRef.current) {
@@ -149,7 +151,6 @@ export var EuiFlyoutChild = function EuiFlyoutChild(_ref) {
     className: "euiScreenReaderOnly"
   }, flyoutTitleText), !hideCloseButton && ___EmotionJSX(EuiFlyoutCloseButton, {
     className: "euiFlyoutChild__closeButton",
-    css: styles.closeButton,
     onClose: handleClose,
     side: "right",
     closeButtonPosition: "inside",
@@ -197,6 +198,10 @@ EuiFlyoutChild.propTypes = {
      * @default 's'
      */
   size: PropTypes.oneOf(["s", "m"]),
+  /*
+     * The background of the child flyout can be optionally shaded. Use `shaded` to add the shading.
+     */
+  backgroundStyle: PropTypes.oneOf(["shaded", "default"]),
   /**
      * Children are implicitly part of FunctionComponent, but good to have if props type is standalone.
      */

package/es/components/flyout/flyout_child.styles.js

@@ -13,13 +13,14 @@ export var euiFlyoutChildStyles = function euiFlyoutChildStyles(euiThemeContext)
   var euiTheme = euiThemeContext.euiTheme;
   return {
     // Base styles for the child flyout
-    euiFlyoutChild: /*#__PURE__*/css("position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;background:", euiTheme.colors.backgroundBaseSubdued, ";display:flex;flex-direction:column;", logicalCSSWithFallback('overflow-y', 'hidden'), " ", logicalCSS('height', '100%'), " z-index:", Number(euiTheme.levels.flyout) + 1, ";border-inline-start:", euiTheme.border.thin, ";", maxedFlyoutWidth(euiThemeContext), ";;label:euiFlyoutChild;"),
+    euiFlyoutChild: /*#__PURE__*/css("position:absolute;inset-block-start:0;inset-inline-start:0;block-size:100%;display:flex;flex-direction:column;", logicalCSSWithFallback('overflow-y', 'hidden'), " ", logicalCSS('height', '100%'), " z-index:", Number(euiTheme.levels.flyout) + 1, ";border-inline-start:", euiTheme.border.thin, ";", maxedFlyoutWidth(euiThemeContext), ";;label:euiFlyoutChild;"),
+    backgroundDefault: /*#__PURE__*/css("background:", euiTheme.colors.backgroundBasePlain, ";;label:backgroundDefault;"),
+    backgroundShaded: /*#__PURE__*/css("background:", euiTheme.colors.backgroundBaseSubdued, ";;label:backgroundShaded;"),
     // Position variants based on screen size
     sidePosition: /*#__PURE__*/css("transform:translateX(-100%);border-inline-end:", euiTheme.border.thin, ";;label:sidePosition;"),
     stackedPosition: /*#__PURE__*/css("inset-inline-end:0;inline-size:100%;border-block-end:", euiTheme.border.thin, ";;label:stackedPosition;"),
     s: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 's'), ";;label:s;"),
     m: /*#__PURE__*/css(composeFlyoutSizing(euiThemeContext, 'm'), ";;label:m;"),
-    closeButton: /*#__PURE__*/css("position:absolute;inset-block-start:", euiTheme.size.s, ";inset-inline-end:", euiTheme.size.s, ";z-index:1;;label:closeButton;"),
     overflow: {
       overflow: /*#__PURE__*/css("flex-grow:1;display:flex;flex-direction:column;", euiYScroll(euiThemeContext), ";;label:overflow;"),
       wrapper: /*#__PURE__*/css("display:flex;flex-direction:column;flex-grow:1;", logicalCSS('overflow-x', 'auto'), ";;label:wrapper;")

package/es/components/flyout/sessions/flyout_provider.js

@@ -44,7 +44,8 @@ export var useEuiFlyoutSessionContext = function useEuiFlyoutSessionContext() {
 export var EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
   var children = _ref.children,
     renderMainFlyoutContent = _ref.renderMainFlyoutContent,
-    renderChildFlyoutContent = _ref.renderChildFlyoutContent;
+    renderChildFlyoutContent = _ref.renderChildFlyoutContent,
+    onUnmount = _ref.onUnmount;
   var _useReducer = useReducer(flyoutReducer, initialFlyoutState),
     _useReducer2 = _slicedToArray(_useReducer, 2),
     state = _useReducer2[0],
@@ -63,29 +64,13 @@ export var EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
   var mainFlyoutContentNode = null;
   var childFlyoutContentNode = null;
   if (activeFlyoutGroup) {
-    var mainRenderContext = {
-      flyoutProps: activeFlyoutGroup.config.mainFlyoutProps || {},
-      flyoutSize: activeFlyoutGroup.config.mainSize,
-      flyoutType: 'main',
-      dispatch: dispatch,
+    var renderContext = {
       activeFlyoutGroup: activeFlyoutGroup,
-      onCloseFlyout: handleClose,
-      onCloseChildFlyout: handleCloseChild,
       meta: activeFlyoutGroup.meta
     };
-    mainFlyoutContentNode = renderMainFlyoutContent(mainRenderContext);
+    mainFlyoutContentNode = renderMainFlyoutContent(renderContext);
     if (activeFlyoutGroup.isChildOpen && renderChildFlyoutContent) {
-      var childRenderContext = {
-        flyoutProps: activeFlyoutGroup.config.childFlyoutProps || {},
-        flyoutSize: activeFlyoutGroup.config.childSize,
-        flyoutType: 'child',
-        dispatch: dispatch,
-        activeFlyoutGroup: activeFlyoutGroup,
-        onCloseFlyout: handleClose,
-        onCloseChildFlyout: handleCloseChild,
-        meta: activeFlyoutGroup.meta
-      };
-      childFlyoutContentNode = renderChildFlyoutContent(childRenderContext);
+      childFlyoutContentNode = renderChildFlyoutContent(renderContext);
     } else if (activeFlyoutGroup.isChildOpen && !renderChildFlyoutContent) {
       console.warn('EuiFlyoutSessionProvider: A child flyout is open, but renderChildFlyoutContent was not provided.');
     }
@@ -96,7 +81,8 @@ export var EuiFlyoutSessionProvider = function EuiFlyoutSessionProvider(_ref) {
   return ___EmotionJSX(EuiFlyoutSessionContext.Provider, {
     value: {
       state: state,
-      dispatch: dispatch
+      dispatch: dispatch,
+      onUnmount: onUnmount
     }
   }, children, (activeFlyoutGroup === null || activeFlyoutGroup === void 0 ? void 0 : activeFlyoutGroup.isMainOpen) && ___EmotionJSX(EuiFlyout, _extends({
     onClose: handleClose,