@elastic/eui 109.2.0 → 110.0.0-snapshot.1764783610243

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

@@ -0,0 +1,113 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { addFlyout as addFlyoutAction, closeFlyout as closeFlyoutAction, setActiveFlyout as setActiveFlyoutAction, setFlyoutWidth as setFlyoutWidthAction, setPushPadding as setPushPaddingAction, goBack as goBackAction, goToFlyout as goToFlyoutAction, addUnmanagedFlyout as addUnmanagedFlyoutAction, closeUnmanagedFlyout as closeUnmanagedFlyoutAction } from './actions';
+import { flyoutManagerReducer, initialState } from './reducer';
+function createStore() {
+  var initial = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : initialState;
+  var currentState = initial;
+  var listeners = new Set();
+  var getState = function getState() {
+    return currentState;
+  };
+  var subscribe = function subscribe(listener) {
+    listeners.add(listener);
+    return function () {
+      listeners.delete(listener);
+    };
+  };
+
+  // The onClick handlers won't execute until after store is fully assigned.
+  // eslint-disable-next-line prefer-const -- Forward declaration requires 'let' not 'const'
+  var store;
+  var computeHistoryItems = function computeHistoryItems() {
+    var currentSessionIndex = currentState.sessions.length - 1;
+    var previousSessions = currentState.sessions.slice(0, currentSessionIndex);
+    return previousSessions.reverse().map(function (_ref) {
+      var title = _ref.title,
+        mainFlyoutId = _ref.mainFlyoutId;
+      return {
+        title: title,
+        onClick: function onClick() {
+          store.dispatch(goToFlyoutAction(mainFlyoutId));
+        }
+      };
+    });
+  };
+  var dispatch = function dispatch(action) {
+    var nextState = flyoutManagerReducer(currentState, action);
+    if (nextState !== currentState) {
+      var previousSessions = currentState.sessions;
+      currentState = nextState;
+
+      // Recompute history items eagerly if sessions changed
+      // This ensures stable references and avoids stale closures
+      if (nextState.sessions !== previousSessions) {
+        store.historyItems = computeHistoryItems();
+      }
+      listeners.forEach(function (l) {
+        l();
+      });
+    }
+  };
+  store = {
+    getState: getState,
+    subscribe: subscribe,
+    dispatch: dispatch,
+    addFlyout: function addFlyout(flyoutId, title, level, size) {
+      return dispatch(addFlyoutAction(flyoutId, title, level, size));
+    },
+    closeFlyout: function closeFlyout(flyoutId) {
+      return dispatch(closeFlyoutAction(flyoutId));
+    },
+    setActiveFlyout: function setActiveFlyout(flyoutId) {
+      return dispatch(setActiveFlyoutAction(flyoutId));
+    },
+    setFlyoutWidth: function setFlyoutWidth(flyoutId, width) {
+      return dispatch(setFlyoutWidthAction(flyoutId, width));
+    },
+    setPushPadding: function setPushPadding(side, width) {
+      return dispatch(setPushPaddingAction(side, width));
+    },
+    goBack: function goBack() {
+      return dispatch(goBackAction());
+    },
+    goToFlyout: function goToFlyout(flyoutId) {
+      return dispatch(goToFlyoutAction(flyoutId));
+    },
+    addUnmanagedFlyout: function addUnmanagedFlyout(flyoutId) {
+      return dispatch(addUnmanagedFlyoutAction(flyoutId));
+    },
+    closeUnmanagedFlyout: function closeUnmanagedFlyout(flyoutId) {
+      return dispatch(closeUnmanagedFlyoutAction(flyoutId));
+    },
+    historyItems: computeHistoryItems() // Initialize with current state
+  };
+  return store;
+}
+
+// Module-level singleton.  A necessary trade-off to avoid global namespace pollution or the need for a third-party library.
+var storeInstance = null;
+
+/**
+ * Returns a singleton store instance shared across all React roots within the same JS context.
+ * Uses module-level singleton to ensure deduplication even if modules are loaded twice.
+ */
+export function getFlyoutManagerStore() {
+  if (!storeInstance) {
+    storeInstance = createStore();
+  }
+  return storeInstance;
+}
+
+/**
+ * For testing purposes - allows resetting the store
+ */
+export function _resetFlyoutManagerStore() {
+  storeInstance = null;
+}

package/optimize/es/components/flyout/manager/types.js

@@ -0,0 +1 @@
+export {};

package/optimize/es/components/flyout/manager/validation.js

@@ -0,0 +1,85 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { FLYOUT_SIZES } from '../const';
+import { LEVEL_CHILD } from './const';
+/**
+ * Checks if a size is a named size (s, m, l)
+ */
+export function isNamedSize(size) {
+  return FLYOUT_SIZES.includes(size);
+}
+
+/**
+ * Validates that a managed flyout only uses named sizes
+ */
+export function validateManagedFlyoutSize(size, flyoutId, level) {
+  if (level === LEVEL_CHILD && !isNamedSize(size)) {
+    var namedSizes = FLYOUT_SIZES.join(', ');
+    return {
+      type: 'INVALID_SIZE_TYPE',
+      message: "Child flyout ".concat(flyoutId, " must use a named size (").concat(namedSizes, "). Received: ").concat(size),
+      flyoutId: flyoutId,
+      level: level,
+      size: size
+    };
+  }
+  return null;
+}
+
+/**
+ * Validates size combinations for parent-child flyouts
+ */
+export function validateSizeCombination(parentSize, childSize) {
+  var sizes = [parentSize, childSize];
+
+  // Parent and child can't both be 'm'
+  if (sizes.every(function (s) {
+    return s === 'm';
+  })) {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Parent and child flyouts cannot both be size "m"'
+    };
+  }
+
+  // Parent and child can't both be 'fill'
+  if (sizes.every(function (s) {
+    return s === 'fill';
+  })) {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Parent and child flyouts cannot both be size "fill"'
+    };
+  }
+
+  // Flyout can't be 'l' if the other in the pair is not "fill"
+  if (sizes.includes('l') && !sizes.includes('fill')) {
+    return {
+      type: 'INVALID_SIZE_COMBINATION',
+      message: 'Flyouts cannot be size "l" unless the other flyout is "fill"'
+    };
+  }
+  return null;
+}
+
+/**
+ * Creates a user-friendly error message for validation errors
+ */
+export function createValidationErrorMessage(error) {
+  console.error(error);
+  var prefix = "EuiFlyout validation error";
+  switch (error.type) {
+    case 'INVALID_SIZE_TYPE':
+    case 'INVALID_SIZE_COMBINATION':
+    case 'INVALID_FLYOUT_MENU_TITLE':
+      return "".concat(prefix, ": ").concat(error.message);
+    default:
+      return "".concat(prefix, ": Unknown validation error");
+  }
+}

package/optimize/es/components/flyout/types.js

@@ -0,0 +1 @@
+export {};

package/optimize/es/components/flyout/use_flyout_resizable.js

@@ -0,0 +1,144 @@
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { keys } from '../../services';
+import { getPosition } from '../resizable_container/helpers';
+/**
+ * @internal
+ */
+export var useEuiFlyoutResizable = function useEuiFlyoutResizable(_ref) {
+  var enabled = _ref.enabled,
+    _ref$minWidth = _ref.minWidth,
+    minWidth = _ref$minWidth === void 0 ? 0 : _ref$minWidth,
+    maxWidth = _ref.maxWidth,
+    onResize = _ref.onResize,
+    side = _ref.side,
+    _size = _ref.size;
+  var getFlyoutMinMaxWidth = useCallback(function (width) {
+    return Math.min(Math.max(width, minWidth), maxWidth || Infinity, window.innerWidth - 20 // Leave some offset
+    );
+  }, [minWidth, maxWidth]);
+  var _useState = useState(0),
+    _useState2 = _slicedToArray(_useState, 2),
+    flyoutWidth = _useState2[0],
+    setFlyoutWidth = _useState2[1];
+  var _useState3 = useState(false),
+    _useState4 = _slicedToArray(_useState3, 2),
+    callOnResize = _useState4[0],
+    setCallOnResize = _useState4[1];
+
+  // Must use state for the flyout ref in order for the useEffect to be correctly called after render
+  var _useState5 = useState(null),
+    _useState6 = _slicedToArray(_useState5, 2),
+    flyoutRef = _useState6[0],
+    setFlyoutRef = _useState6[1];
+  useEffect(function () {
+    if (!enabled) return; // Don't measure when resizing is disabled
+    if (!flyoutWidth && flyoutRef) {
+      setCallOnResize(false); // Don't call `onResize` for non-user width changes
+      setFlyoutWidth(getFlyoutMinMaxWidth(flyoutRef.offsetWidth));
+    }
+  }, [flyoutWidth, flyoutRef, getFlyoutMinMaxWidth, enabled]);
+
+  // Update flyout width when consumers pass in a new `size`
+  useEffect(function () {
+    if (!enabled) return; // Don't update width when resizing is disabled
+    setCallOnResize(false);
+    // For string `size`s, resetting flyoutWidth to 0 will trigger the above useEffect's recalculation
+    setFlyoutWidth(typeof _size === 'number' ? getFlyoutMinMaxWidth(_size) : 0);
+  }, [_size, getFlyoutMinMaxWidth, enabled]);
+
+  // Initial numbers to calculate from, on resize drag start
+  var initialWidth = useRef(0);
+  var initialMouseX = useRef(0);
+
+  // Account for flyout side and logical property direction
+  var direction = useMemo(function () {
+    var modifier = side === 'right' ? -1 : 1;
+    if (flyoutRef) {
+      var languageDirection = window.getComputedStyle(flyoutRef).direction;
+      if (languageDirection === 'rtl') modifier *= -1;
+    }
+    return modifier;
+  }, [side, flyoutRef]);
+  var onMouseMove = useCallback(function (e) {
+    if (!enabled) {
+      return;
+    }
+    var mouseOffset = getPosition(e, true) - initialMouseX.current;
+    var changedFlyoutWidth = initialWidth.current + mouseOffset * direction;
+    setFlyoutWidth(getFlyoutMinMaxWidth(changedFlyoutWidth));
+  }, [getFlyoutMinMaxWidth, direction, enabled]);
+  var onMouseUp = useCallback(function () {
+    setCallOnResize(true);
+    if (!enabled) {
+      return;
+    }
+    initialMouseX.current = 0;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    window.removeEventListener('touchmove', onMouseMove);
+    window.removeEventListener('touchend', onMouseUp);
+  }, [onMouseMove, enabled]);
+  var onMouseDown = useCallback(function (e) {
+    var _flyoutRef$offsetWidt;
+    setCallOnResize(false);
+    if (!enabled) {
+      return;
+    }
+    initialMouseX.current = getPosition(e, true);
+    initialWidth.current = (_flyoutRef$offsetWidt = flyoutRef === null || flyoutRef === void 0 ? void 0 : flyoutRef.offsetWidth) !== null && _flyoutRef$offsetWidt !== void 0 ? _flyoutRef$offsetWidt : 0;
+
+    // Window event listeners instead of React events are used
+    // in case the user's mouse leaves the component
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    window.addEventListener('touchmove', onMouseMove);
+    window.addEventListener('touchend', onMouseUp);
+  }, [flyoutRef, onMouseMove, onMouseUp, enabled]);
+  var onKeyDown = useCallback(function (e) {
+    setCallOnResize(true);
+    if (!enabled) {
+      return;
+    }
+    var KEYBOARD_OFFSET = 10;
+    switch (e.key) {
+      case keys.ARROW_RIGHT:
+        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
+        setFlyoutWidth(function (flyoutWidth) {
+          return getFlyoutMinMaxWidth(flyoutWidth + KEYBOARD_OFFSET * direction);
+        });
+        break;
+      case keys.ARROW_LEFT:
+        e.preventDefault(); // Safari+VO will screen reader navigate off the button otherwise
+        setFlyoutWidth(function (flyoutWidth) {
+          return getFlyoutMinMaxWidth(flyoutWidth - KEYBOARD_OFFSET * direction);
+        });
+    }
+  }, [getFlyoutMinMaxWidth, direction, enabled]);
+
+  // To reduce unnecessary calls, only fire onResize callback:
+  // 1. After initial mount / on user width change events only
+  // 2. If not currently mouse dragging
+  useEffect(function () {
+    if (callOnResize && enabled) {
+      onResize === null || onResize === void 0 || onResize(flyoutWidth);
+    }
+  }, [onResize, callOnResize, flyoutWidth, enabled]);
+  var size = useMemo(function () {
+    return enabled ? flyoutWidth || _size : _size;
+  }, [enabled, flyoutWidth, _size]);
+  return {
+    onKeyDown: onKeyDown,
+    onMouseDown: onMouseDown,
+    setFlyoutRef: setFlyoutRef,
+    size: size
+  };
+};

package/optimize/es/components/flyout/use_flyout_z_index.js

@@ -0,0 +1,46 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { useEuiTheme } from '../../services';
+
+/**
+ * @internal
+ */
+
+var calculateZIndex = function calculateZIndex(baseLevel, isChildFlyout) {
+  var level = Number(baseLevel);
+  return {
+    // Child flyouts slide in from below and need to have a lower z-index
+    flyoutZIndex: isChildFlyout ? level - 1 : level,
+    maskZIndex: level - 2
+  };
+};
+
+/**
+ * @internal
+ */
+export var useEuiFlyoutZIndex = function useEuiFlyoutZIndex(_ref) {
+  var maskProps = _ref.maskProps,
+    isPushed = _ref.isPushed,
+    managedFlyoutIndex = _ref.managedFlyoutIndex,
+    isChildFlyout = _ref.isChildFlyout;
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
+  var baseLevel = Number(euiTheme.levels.flyout);
+
+  // The default headerZindexLocation for EuiFlyout is "below"
+  // which is different from what EuiOverlayMask fallbacks to - see
+  // _flyout_overlay.tsx.
+  // We set z-index to mask level only when explicitly overridden
+  // via the maskProps prop
+  if (!isPushed && (maskProps === null || maskProps === void 0 ? void 0 : maskProps.headerZindexLocation) === 'above') {
+    baseLevel = Number(euiTheme.levels.mask);
+  }
+  baseLevel += managedFlyoutIndex;
+  return calculateZIndex(baseLevel, isChildFlyout);
+};

package/optimize/es/components/header/header_logo/header_logo.js

@@ -13,6 +13,7 @@ import React from 'react';
 import classNames from 'classnames';
 import { useEuiMemoizedStyles, getSecureRelForTarget } from '../../../services';
 import { validateHref } from '../../../services/security/href_validator';
+import { useEuiButtonColorCSS } from '../../../global_styling';
 import { EuiIcon } from '../../icon';
 import { euiHeaderLogoStyles } from './header_logo.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -29,6 +30,10 @@ export var EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiHeaderLogo', className);
   var styles = useEuiMemoizedStyles(euiHeaderLogoStyles);
+  var buttonColorStyles = useEuiButtonColorCSS({
+    display: 'empty'
+  });
+  var cssStyles = [styles.euiHeaderLogo, buttonColorStyles.text];
   var secureRel = getSecureRelForTarget({
     href: href,
     rel: rel,
@@ -39,7 +44,7 @@ export var EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     href: isHrefValid ? href : '',
     rel: secureRel,
     target: target,
-    css: styles.euiHeaderLogo,
+    css: cssStyles,
     className: classes
   }, rest), ___EmotionJSX(EuiIcon, {
     "aria-label": iconTitle,

package/optimize/es/components/header/header_logo/header_logo.styles.js

@@ -15,7 +15,7 @@ export var euiHeaderLogoStyles = function euiHeaderLogoStyles(euiThemeContext) {
   var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
     childHeight = _euiHeaderVariables.childHeight;
   return {
-    euiHeaderLogo: /*#__PURE__*/css("position:relative;", logicalCSS('height', childHeight), " line-height:", childHeight, ";", logicalCSS('min-width', childHeight), " padding-inline:", euiTheme.size.s, ";display:inline-flex;align-items:center;white-space:nowrap;", euiBreakpoint(euiThemeContext, ['xs']), "{", logicalCSS('padding-left', euiTheme.size.xs), ";};label:euiHeaderLogo;"),
+    euiHeaderLogo: /*#__PURE__*/css("position:relative;", logicalCSS('height', childHeight), " line-height:", childHeight, ";", logicalCSS('min-width', childHeight), " padding-inline:", euiTheme.size.s, ";display:inline-flex;border-radius:", euiTheme.border.radius.small, ";align-items:center;white-space:nowrap;", euiBreakpoint(euiThemeContext, ['xs']), "{", logicalCSS('padding-left', euiTheme.size.xs), ";};label:euiHeaderLogo;"),
     euiHeaderLogo__text: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xxs'), " ", logicalCSS('padding-left', euiTheme.size.base), " ", euiBreakpoint(euiThemeContext, ['xs']), "{", logicalCSS('padding-left', euiTheme.size.s), ";};label:euiHeaderLogo__text;")
   };
 };

package/optimize/es/components/icon/icon.styles.js

@@ -14,11 +14,11 @@ import { logicalSizeCSS, euiCanAnimate } from '../../global_styling';
 export var iconLoadingOpacity = 0.05;
 var iconLoading = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    opacity: ", ";\n  }\n\n  100% {\n    opacity: 1;\n  }\n"])), iconLoadingOpacity);
 var _ref = process.env.NODE_ENV === "production" ? {
-  name: "njd749-logoElasticOutline",
-  styles: "*[fill]{fill:none!important;}.outline{fill:currentColor!important;};label:logoElasticOutline;"
+  name: "p0011s-logoElasticOutline",
+  styles: "*[fill]{fill:none!important;stroke:currentColor!important;};label:logoElasticOutline;"
 } : {
-  name: "njd749-logoElasticOutline",
-  styles: "*[fill]{fill:none!important;}.outline{fill:currentColor!important;};label:logoElasticOutline;",
+  name: "p0011s-logoElasticOutline",
+  styles: "*[fill]{fill:none!important;stroke:currentColor!important;};label:logoElasticOutline;",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 var _ref2 = process.env.NODE_ENV === "production" ? {

package/optimize/es/components/overlay_mask/overlay_mask.js

@@ -10,7 +10,7 @@ var _excluded = ["className", "children", "headerZindexLocation", "maskRef"];
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { cx } from '@emotion/css';
 import { Global } from '@emotion/react';
 import { keysOf } from '../common';
@@ -26,13 +26,17 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
     headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
     maskRef = _ref.maskRef,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasRendered = useRef(false);
   var _useState = useState(null),
     _useState2 = _slicedToArray(_useState, 2),
     overlayMaskNode = _useState2[0],
     setOverlayMaskNode = _useState2[1];
   var combinedMaskRef = useCombinedRefs([setOverlayMaskNode, maskRef]);
+  var handleAnimationEnd = useCallback(function () {
+    hasRendered.current = true;
+  }, []);
   var styles = useEuiMemoizedStyles(euiOverlayMaskStyles);
-  var cssStyles = cx([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")]]);
+  var cssStyles = cx([styles.euiOverlayMask, styles["".concat(headerZindexLocation, "Header")], hasRendered.current && styles.noAnimation]);
   useEffect(function () {
     if (!overlayMaskNode) return;
     keysOf(rest).forEach(function (key) {
@@ -43,7 +47,13 @@ export var EuiOverlayMask = function EuiOverlayMask(_ref) {
         overlayMaskNode.setAttribute(key, rest[key]);
       }
     });
-  }, [overlayMaskNode]); // eslint-disable-line react-hooks/exhaustive-deps
+    overlayMaskNode.addEventListener('animationend', handleAnimationEnd, {
+      once: true
+    });
+    return function () {
+      overlayMaskNode.removeEventListener('animationend', handleAnimationEnd);
+    };
+  }, [overlayMaskNode, handleAnimationEnd]); // eslint-disable-line react-hooks/exhaustive-deps
 
   // Note: Use `classList.add/remove` instead of setting the entire `className`
   // so as not to override any existing classes set by `EuiPortal`

package/optimize/es/components/overlay_mask/overlay_mask.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
@@ -12,8 +13,16 @@ export var euiOverlayMaskStyles = function euiOverlayMaskStyles(_ref) {
   var euiTheme = _ref.euiTheme,
     highContrastMode = _ref.highContrastMode;
   return {
-    euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
+    euiOverlayMask: /*#__PURE__*/css("position:fixed;", logicalCSS('top', 0), " ", logicalCSS('left', 0), " ", logicalCSS('right', 0), " ", logicalCSS('bottom', 0), " display:flex;align-items:center;justify-content:center;animation:", euiAnimFadeIn, " ", euiTheme.animation.fast, " ease-in forwards;animation-iteration-count:1;background:", highContrastMode ? euiTheme.components.overlayMaskBackgroundHighContrast : euiTheme.components.overlayMaskBackground, ";;label:euiOverlayMask;"),
     aboveHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.mask, ";;label:aboveHeader;"),
-    belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;")
+    belowHeader: /*#__PURE__*/css("z-index:", euiTheme.levels.maskBelowHeader, ";", logicalCSS('top', 'var(--euiFixedHeadersOffset, 0)'), ";;label:belowHeader;"),
+    noAnimation: /*#__PURE__*/css(process.env.NODE_ENV === "production" ? {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;"
+    } : {
+      name: "lqr4xc-noAnimation",
+      styles: "animation:none;label:noAnimation;",
+      toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+    })
   };
 };

package/optimize/es/components/page/page.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction"];
+var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow", "direction", "color"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,7 +12,7 @@ var _excluded = ["children", "restrictWidth", "className", "paddingSize", "grow"
 import React from 'react';
 import classNames from 'classnames';
 import { setStyleForRestrictedPageWidth } from './_restrict_width';
-import { useEuiPaddingCSS } from '../../global_styling';
+import { useEuiPaddingCSS, useEuiBackgroundColorCSS } from '../../global_styling';
 import { euiPageStyles } from './page.styles';
 import { useEuiTheme } from '../../services';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -27,13 +27,16 @@ export var EuiPage = function EuiPage(_ref) {
     grow = _ref$grow === void 0 ? true : _ref$grow,
     _ref$direction = _ref.direction,
     direction = _ref$direction === void 0 ? 'row' : _ref$direction,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'transparent' : _ref$color,
     rest = _objectWithoutProperties(_ref, _excluded);
   // Set max-width as a style prop
   var widthStyles = setStyleForRestrictedPageWidth(restrictWidth, rest === null || rest === void 0 ? void 0 : rest.style);
   var euiTheme = useEuiTheme();
   var styles = euiPageStyles(euiTheme);
   var padding = useEuiPaddingCSS()[paddingSize];
-  var stylesCSS = [styles.euiPage, styles[direction], grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
+  var backgroundColor = useEuiBackgroundColorCSS()[color];
+  var stylesCSS = [styles.euiPage, styles[direction], backgroundColor, grow && styles.grow, padding, restrictWidth && styles.restrictWidth];
   var classes = classNames('euiPage', className);
   return ___EmotionJSX("div", _extends({
     css: stylesCSS,

package/optimize/es/components/page/page.styles.js

@@ -26,9 +26,8 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 export var euiPageStyles = function euiPageStyles(euiThemeContext) {
-  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiPage: /*#__PURE__*/css("display:flex;background-color:", euiTheme.colors.body, ";flex-shrink:0;", logicalCSS('max-width', '100%'), ";;label:euiPage;"),
+    euiPage: /*#__PURE__*/css("display:flex;flex-shrink:0;", logicalCSS('max-width', '100%'), ";;label:euiPage;"),
     // Grow
     grow: _ref2,
     // Direction

package/optimize/es/components/page/page_header/page_header.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "alignItems", "responsive", "children", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "breadcrumbs", "breadcrumbProps", "description", "rightSideItems", "rightSideGroupProps"];
+var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "color", "alignItems", "responsive", "children", "pageTitle", "pageTitleProps", "iconType", "iconProps", "tabs", "tabsProps", "breadcrumbs", "breadcrumbProps", "description", "rightSideItems", "rightSideGroupProps"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -12,7 +12,7 @@ var _excluded = ["className", "restrictWidth", "paddingSize", "bottomBorder", "a
 import React from 'react';
 import classNames from 'classnames';
 import { useEuiTheme } from '../../../services';
-import { useEuiPaddingCSS } from '../../../global_styling';
+import { useEuiPaddingCSS, useEuiBackgroundColorCSS } from '../../../global_styling';
 import { EuiPageHeaderContent } from './page_header_content';
 import { euiPageHeaderStyles } from './page_header.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -23,6 +23,8 @@ export var EuiPageHeader = function EuiPageHeader(_ref) {
     _ref$paddingSize = _ref.paddingSize,
     paddingSize = _ref$paddingSize === void 0 ? 'none' : _ref$paddingSize,
     bottomBorder = _ref.bottomBorder,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'transparent' : _ref$color,
     alignItems = _ref.alignItems,
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? true : _ref$responsive,
@@ -42,7 +44,8 @@ export var EuiPageHeader = function EuiPageHeader(_ref) {
   var useTheme = useEuiTheme();
   var styles = euiPageHeaderStyles(useTheme);
   var inlinePadding = useEuiPaddingCSS('horizontal');
-  var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border];
+  var backgroundColor = useEuiBackgroundColorCSS()[color];
+  var cssStyles = [styles.euiPageHeader, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, backgroundColor];
   var classes = classNames('euiPageHeader', className);
   var contentProps = {
     restrictWidth: restrictWidth,

package/optimize/es/components/page_template/outer/page_outer.js

@@ -10,7 +10,7 @@ var _excluded = ["children", "grow", "direction", "responsive"];
  */
 
 import React from 'react';
-import { useEuiTheme, useIsWithinBreakpoints } from '../../../services';
+import { useIsWithinBreakpoints } from '../../../services';
 import { euiPageOuterStyles } from './page_outer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var PAGE_DIRECTIONS = ['row', 'column'];
@@ -23,8 +23,7 @@ export var _EuiPageOuter = function _EuiPageOuter(_ref) {
     _ref$responsive = _ref.responsive,
     responsive = _ref$responsive === void 0 ? ['xs', 's'] : _ref$responsive,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var themeContext = useEuiTheme();
-  var styles = euiPageOuterStyles(themeContext);
+  var styles = euiPageOuterStyles;
   var isResponding = useIsWithinBreakpoints(responsive);
   var cssStyles = [styles.euiPageOuter, styles[isResponding ? 'column' : direction], grow && styles.grow];
   return ___EmotionJSX("div", _extends({