@elastic/eui 111.0.0 → 112.0.0

package/optimize/es/components/link/external_link_icon.js

@@ -31,7 +31,10 @@ export var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref2) {
     rest = _objectWithoutProperties(_ref2, _excluded);
   var iconCssStyle = useEuiMemoizedStyles(iconStyle);
   var showExternalLinkIcon = target === '_blank' && external !== false || external === true;
-  return ___EmotionJSX(React.Fragment, null, showExternalLinkIcon && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiIcon, _extends({
+  if (!showExternalLinkIcon) {
+    return null;
+  }
+  return ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiIcon, _extends({
     css: iconCssStyle,
     size: "s",
     type: "popout",
@@ -39,8 +42,8 @@ export var EuiExternalLinkIcon = function EuiExternalLinkIcon(_ref2) {
   }, rest)), target === '_blank' ? ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, ___EmotionJSX(EuiI18n, {
     token: "euiExternalLinkIcon.newTarget.screenReaderOnlyText",
     default: "(external, opens in a new tab or window)"
-  }))) : ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, ___EmotionJSX(EuiI18n, {
+  }))) : ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", null, ___EmotionJSX(EuiI18n, {
     token: "euiExternalLinkIcon.externalTarget.screenReaderOnlyText",
     default: "(external)"
-  }))))));
+  }))));
 };

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

@@ -140,7 +140,7 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
     })) === null || _tabs$find === void 0 ? void 0 : _tabs$find.label));
     tabsNode = ___EmotionJSX(React.Fragment, null, pageTitleNode && ___EmotionJSX(EuiSpacer, null), screenReaderPageTitle, ___EmotionJSX(EuiTabs, _extends({}, tabsProps, {
       bottomBorder: false,
-      size: "l"
+      size: "m"
     }), renderTabs()));
   }
   var childrenNode = children && ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiSpacer, null), children);

package/optimize/es/components/search_bar/search_bar.js

@@ -188,7 +188,7 @@ export var EuiSearchBar = /*#__PURE__*/function (_Component) {
       var isHintVisible = (_hint$popoverProps$is = hint === null || hint === void 0 || (_hint$popoverProps = hint.popoverProps) === null || _hint$popoverProps === void 0 ? void 0 : _hint$popoverProps.isOpen) !== null && _hint$popoverProps$is !== void 0 ? _hint$popoverProps$is : isHintVisibleState;
       return ___EmotionJSX(RenderWithEuiTheme, null, function (euiTheme) {
         return ___EmotionJSX(EuiFlexGroup, {
-          gutterSize: "m",
+          gutterSize: "s",
           alignItems: "center",
           wrap: true
         }, toolsLeftEl, ___EmotionJSX(EuiFlexItem, {

package/optimize/es/components/spacer/spacer.js

@@ -19,7 +19,7 @@ export var SIZES = ['xs', 's', 'm', 'l', 'xl', 'xxl'];
 export var EuiSpacer = function EuiSpacer(_ref) {
   var className = _ref.className,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 'l' : _ref$size,
+    size = _ref$size === void 0 ? 'm' : _ref$size,
     rest = _objectWithoutProperties(_ref, _excluded);
   var styles = useEuiMemoizedStyles(euiSpacerStyles);
   var classes = classNames('euiSpacer', _defineProperty({}, "euiSpacer--".concat(size), size), className);

package/optimize/es/components/tour/tour_step_indicator.js

@@ -13,6 +13,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
 import React from 'react';
 import classNames from 'classnames';
 import { css } from '@emotion/react';
+import { useEuiTheme } from '../../services';
 import { EuiIcon } from '../icon';
 import { EuiI18n } from '../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -29,7 +30,11 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
     number = _ref2.number,
     status = _ref2.status,
     rest = _objectWithoutProperties(_ref2, _excluded);
+  var _useEuiTheme = useEuiTheme(),
+    euiTheme = _useEuiTheme.euiTheme;
   var classes = classNames('euiTourStepIndicator', className);
+  var inactiveColor = euiTheme.components.tourStepIndicatorInactiveColor;
+  var activeColor = euiTheme.components.tourStepIndicatorActiveColor;
   var indicatorIcon;
   if (status === 'active') {
     indicatorIcon = ___EmotionJSX(EuiI18n, {
@@ -39,7 +44,7 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
         "aria-label": isActive,
-        color: "success",
+        color: activeColor,
         "aria-current": "step"
       });
     });
@@ -51,7 +56,7 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
         "aria-label": isComplete,
-        color: "subdued"
+        color: inactiveColor
       });
     });
   } else if (status === 'incomplete') {
@@ -62,7 +67,7 @@ export var EuiTourStepIndicator = function EuiTourStepIndicator(_ref2) {
       return ___EmotionJSX(EuiIcon, {
         type: "dot",
         "aria-label": isIncomplete,
-        color: "subdued"
+        color: inactiveColor
       });
     });
   }

package/optimize/es/global_styling/mixins/_button.js

@@ -36,7 +36,18 @@ var getButtonVariantTokenValues = function getButtonVariantTokenValues(_ref, col
     color: foreground,
     background: euiTheme.components.buttons[backgroundTokenName],
     backgroundHover: euiTheme.components.buttons[backgroundHoverTokenName],
-    backgroundActive: euiTheme.components.buttons[backgroundActiveTokenName]
+    backgroundActive: euiTheme.components.buttons[backgroundActiveTokenName],
+    borderColor: highContrastMode ? foreground : color === 'text' ? euiTheme.colors.borderBasePlain : 'transparent'
+  };
+};
+export var getEuiButtonColors = function getEuiButtonColors(euiThemeContext, color) {
+  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
+  var foreground = buttonColors.color;
+  var background = buttonColors.background;
+  return {
+    color: background === 'transparent' || color === 'disabled' ? foreground : makeHighContrastColor(foreground)(background),
+    backgroundColor: background,
+    borderColor: buttonColors.borderColor
   };
 };
 
@@ -47,13 +58,21 @@ var getButtonVariantTokenValues = function getButtonVariantTokenValues(_ref, col
  * @returns Style object `{ backgroundColor, color }`
  */
 export var euiButtonColor = function euiButtonColor(euiThemeContext, color) {
-  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'base');
+  var buttonColors = getEuiButtonColors(euiThemeContext, color);
+  return _objectSpread({
+    color: buttonColors.color,
+    backgroundColor: buttonColors.backgroundColor
+  }, _highContrastBorder(euiThemeContext, buttonColors.borderColor));
+};
+export var getEuiFilledButtonColors = function getEuiFilledButtonColors(euiThemeContext, color) {
+  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
   var foreground = buttonColors.color;
   var background = buttonColors.background;
-  return _objectSpread({
-    color: background === 'transparent' || color === 'disabled' ? foreground : makeHighContrastColor(foreground)(background),
-    backgroundColor: background
-  }, _highContrastBorder(euiThemeContext, foreground));
+  return {
+    color: foreground,
+    backgroundColor: background,
+    borderColor: color === 'disabled' ? foreground : background
+  };
 };
 
 /**
@@ -63,13 +82,13 @@ export var euiButtonColor = function euiButtonColor(euiThemeContext, color) {
  * @returns Style object `{ backgroundColor, color }`
  */
 export var euiButtonFillColor = function euiButtonFillColor(euiThemeContext, color) {
-  var buttonColors = getButtonVariantTokenValues(euiThemeContext, color, 'filled');
+  var buttonColors = getEuiFilledButtonColors(euiThemeContext, color);
   var foreground = buttonColors.color;
-  var background = buttonColors.background;
+  var background = buttonColors.backgroundColor;
   return _objectSpread({
     color: foreground,
     backgroundColor: background
-  }, _highContrastBorder(euiThemeContext, color === 'disabled' ? foreground : background // The border is necessary for Windows high contrast themes, which ignore background-color
+  }, _highContrastBorder(euiThemeContext, buttonColors.borderColor // The border is necessary for Windows high contrast themes, which ignore background-color
   ));
 };
 

package/optimize/es/global_styling/mixins/_container_query.js

@@ -0,0 +1,106 @@
+/*
+ * 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 { css } from '@emotion/react';
+var CONTAINER_TYPES = ['normal', 'size', 'inline-size'];
+
+/**
+ * Type of container context used in container queries.
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/container-type}
+ */
+
+/**
+ * Establish element as a query container.
+ * The scroll state is applied through the `scrollState` argument
+ * and not the `type` argument.
+ *
+ * @example
+ * // Export container name to use across the application
+ * export const PAGE_CONTENT_CONTAINER_NAME = 'my-app-page-content';
+ * const pageContentStyles = css`
+ *   ${euiContainer('inline-size', PAGE_CONTENT_CONTAINER_NAME)}
+ *   margin: 0 auto;
+ * `;
+ *
+ * @returns A style string to be used inside Emotion's `css` template literal
+ * @beta
+ */
+export var euiContainer = function euiContainer(type, name, scrollState) {
+  var finalType = '';
+  if (type !== 'normal') {
+    finalType += type;
+  }
+  if (scrollState) {
+    if (finalType.length) {
+      finalType += ' ';
+    }
+    finalType += 'scroll-state';
+  }
+  return [!!name && "container-name: ".concat(name), !!finalType && "container-type: ".concat(finalType)].filter(Boolean).join(';');
+};
+
+/**
+ * Establish element as a query container.
+ * The scroll state is applied through the `scrollState` argument
+ * and not the `type` argument.
+ *
+ * @example
+ * // Export container name to use across the application
+ * export const PAGE_CONTENT_CONTAINER_NAME = 'my-app-page-content';
+ * const PageContent = ({ children }: PropsWithChildren) => (
+ *   <main css={euiContainerCSS('inline-size', PAGE_CONTENT_CONTAINER_NAME)}>
+ *     {children}
+ *   </main>
+ * );
+ * @returns Emotion's `SerializedStyles` object to be passed to the `css` prop
+ *   of a React component.
+ * @beta
+ */
+export var euiContainerCSS = function euiContainerCSS(type, name, scrollState) {
+  return /*#__PURE__*/css(euiContainer(type, name, scrollState), ";label:euiContainerCSS;");
+};
+
+/**
+ * Get a @container rule for given conditions and an optional container name.
+ *
+ * Container queries can be used to apply conditional styles based on container
+ * size, its scroll state or even its styles.
+ *
+ * It's hugely useful to conditionally show or hide information based
+ * on the **container** dimensions instead of the **viewport** dimensions.
+ *
+ * When container name is provided, it will be used to target the containment
+ * context. When skipped, it will target the nearest ancestor with containment.
+ *
+ * @example
+ * const itemDetailsStyles = css`
+ *   background: red;
+ *
+ *   ${euiContainerQuery('(width > 250px)')} {
+ *     background: blue;
+ *   }
+ * `;
+ *
+ * @param conditions one or many conditions to query the container with.
+ *   Similarly to media queries, you can use
+ *   size queries (e.g., `(width > 300px)`),
+ *   scroll state queries (e.g., `(scroll-state(scrollable: top))`),
+ *   or even style queries.
+ *   You can use the `and`, `or` and `not` logical keywords to define container
+ *   conditions. Note that all conditions must be wrapped in parentheses.
+ *
+ * @param containerName When provided, it will be used to target
+ *   the containment context and run queries against it. Otherwise, the nearest
+ *   ancestor with containment will be queried instead.
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container}
+ * @beta
+ */
+export var euiContainerQuery = function euiContainerQuery(conditions, containerName) {
+  return "@container ".concat(containerName !== null && containerName !== void 0 ? containerName : '').concat(containerName ? ' ' : '').concat(conditions);
+};

package/optimize/es/global_styling/mixins/index.js

@@ -7,6 +7,7 @@
  */
 
 export * from './_color';
+export * from './_container_query';
 export * from './_helpers';
 export * from './_padding';
 export * from './_states';

package/optimize/es/services/color/eui_palettes.js

@@ -107,43 +107,6 @@ export var euiPaletteColorBlindBehindText = function euiPaletteColorBlindBehindT
   var originalPalette = euiPaletteColorBlind(paletteProps);
   return originalPalette;
 };
-var _getVisColorsAsText = function _getVisColorsAsText(visColors, keys) {
-  return keys.reduce(function (colors, curr) {
-    return [].concat(_toConsumableArray(colors), [visColors[curr]]);
-  }, []);
-};
-
-/**
- * @deprecated - use `euiColorVisText{NUMBER}` tokens directly
- *
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
-export var euiPaletteForLightBackground = function euiPaletteForLightBackground() {
-  var _ref3 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    colors = _ref3.colors;
-  var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
-  var visColorsAsTextKeys = Object.keys(visColors).filter(function (color) {
-    return color.includes('euiColorVisText');
-  });
-  return _getVisColorsAsText(visColors, visColorsAsTextKeys);
-};
-
-/**
- * @deprecated - use `euiColorVisText{NUMBER}` tokens directly
- *
- * NOTE: This function is not pure. It relies on `EUI_VIS_COLOR_STORE` which is updated by the
- * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
- */
-export var euiPaletteForDarkBackground = function euiPaletteForDarkBackground() {
-  var _ref4 = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
-    colors = _ref4.colors;
-  var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
-  var visColorsAsTextKeys = Object.keys(visColors).filter(function (color) {
-    return color.includes('euiColorVisText');
-  });
-  return _getVisColorsAsText(visColors, visColorsAsTextKeys);
-};
 
 /**
  * For usage in React use the `useEuiPaletteForStatus` hook instead.
@@ -152,8 +115,8 @@ export var euiPaletteForDarkBackground = function euiPaletteForDarkBackground()
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteForStatus = function euiPaletteForStatus(steps) {
-  var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref5.colors;
+  var _ref3 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref3.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisSuccess0];
@@ -171,8 +134,8 @@ export var euiPaletteForStatus = function euiPaletteForStatus(steps) {
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
-  var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref6.colors;
+  var _ref4 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref4.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisCool2];
@@ -192,8 +155,8 @@ export var euiPaletteForTemperature = function euiPaletteForTemperature(steps) {
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteComplementary = function euiPaletteComplementary(steps) {
-  var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref7.colors;
+  var _ref5 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref5.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisComplementary0];
@@ -209,8 +172,8 @@ export var euiPaletteComplementary = function euiPaletteComplementary(steps) {
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteRed = function euiPaletteRed(steps) {
-  var _ref8 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref8.colors;
+  var _ref6 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref6.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisDanger1];
@@ -225,8 +188,8 @@ export var euiPaletteRed = function euiPaletteRed(steps) {
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteGreen = function euiPaletteGreen(steps) {
-  var _ref9 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref9.colors;
+  var _ref7 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref7.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisSuccess1];
@@ -241,8 +204,8 @@ export var euiPaletteGreen = function euiPaletteGreen(steps) {
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteSkyBlue = function euiPaletteSkyBlue(steps) {
-  var _ref10 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref10.colors;
+  var _ref8 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref8.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisNeutral1];
@@ -257,8 +220,8 @@ export var euiPaletteSkyBlue = function euiPaletteSkyBlue(steps) {
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteYellow = function euiPaletteYellow(steps) {
-  var _ref11 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref11.colors;
+  var _ref9 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref9.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisWarning1];
@@ -273,8 +236,8 @@ export var euiPaletteYellow = function euiPaletteYellow(steps) {
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteOrange = function euiPaletteOrange(steps) {
-  var _ref12 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref12.colors;
+  var _ref10 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref10.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisRisk1];
@@ -289,8 +252,8 @@ export var euiPaletteOrange = function euiPaletteOrange(steps) {
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteCool = function euiPaletteCool(steps) {
-  var _ref13 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref13.colors;
+  var _ref11 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref11.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisCool1];
@@ -305,8 +268,8 @@ export var euiPaletteCool = function euiPaletteCool(steps) {
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteWarm = function euiPaletteWarm(steps) {
-  var _ref14 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref14.colors;
+  var _ref12 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref12.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisWarm2];
@@ -321,8 +284,8 @@ export var euiPaletteWarm = function euiPaletteWarm(steps) {
  * EuiProvider on theme change. Ensure to recall the function on theme change or subscribe to the store.
  */
 export var euiPaletteGray = function euiPaletteGray(steps) {
-  var _ref15 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
-    colors = _ref15.colors;
+  var _ref13 = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {},
+    colors = _ref13.colors;
   var visColors = colors !== null && colors !== void 0 ? colors : EUI_VIS_COLOR_STORE.visColors;
   if (steps === 1) {
     return [visColors.euiColorVisGrey1];

package/optimize/es/services/color/index.js

@@ -18,7 +18,7 @@ export { calculateContrast, calculateLuminance } from './luminance_and_contrast'
 export { VISUALIZATION_COLORS, DEFAULT_VISUALIZATION_COLOR } from './visualization_colors';
 export { EUI_VIS_COLOR_STORE } from './vis_color_store';
 export { colorPalette } from './color_palette';
-export { euiPaletteForLightBackground, euiPaletteForDarkBackground, euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, euiPaletteRed, euiPaletteGreen, euiPaletteSkyBlue, euiPaletteYellow, euiPaletteOrange, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
+export { euiPaletteColorBlind, euiPaletteColorBlindBehindText, euiPaletteForStatus, euiPaletteForTemperature, euiPaletteComplementary, euiPaletteRed, euiPaletteGreen, euiPaletteSkyBlue, euiPaletteYellow, euiPaletteOrange, euiPaletteCool, euiPaletteWarm, euiPaletteGray } from './eui_palettes';
 export * from './eui_palettes_hooks';
 export { getSteppedGradient } from './stepped_gradient';
 export * from './manipulation';

package/optimize/es/services/container_query/container_query_hook.js

@@ -0,0 +1,59 @@
+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 { useEffect, useState, useRef } from 'react';
+import { matchContainer } from './match_container';
+
+/**
+ * React hook that subscribes to CSS container query changes.
+ *
+ * For this to work:
+ * - a proper container (an element with e.g. `container-type: inline-size`) is needed, and
+ * - the container MUST to be a parent of the element being observed
+ *
+ * @param containerCondition - A CSS `<container-condition>` string, e.g. `(width > 400px)` or `(min-width: 600px)`
+ * @param name - Optional container name, e.g. `sidebar`
+ * @returns An object containing:
+ *   - `ref`: A ref to attach to the container element
+ *   - `matches`: `true` if the container matches the condition, `false` otherwise
+ *
+ * @example
+ * ```tsx
+ * const { ref, matches } = useEuiContainerQuery('(width > 400px)');
+ * return <div ref={ref}>{matches ? 'Wide' : 'Narrow'}</div>;
+ * ```
+ *
+ * @see {@link https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/At-rules/@container | MDN: @container}
+ * @beta
+ */
+export function useEuiContainerQuery(containerCondition, name) {
+  var containerQueryString = name ? "".concat(name, " ").concat(containerCondition) : containerCondition;
+  var ref = useRef(null);
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    matches = _useState2[0],
+    setMatches = _useState2[1];
+  useEffect(function () {
+    if (!ref.current) return;
+    var queryList = matchContainer(ref.current, containerQueryString);
+    var handleChange = function handleChange() {
+      setMatches(queryList.matches);
+    };
+    setMatches(queryList.matches);
+    queryList.addEventListener('change', handleChange);
+    return function () {
+      queryList.removeEventListener('change', handleChange);
+      queryList.dispose();
+    };
+  }, [ref, containerQueryString]);
+  return {
+    ref: ref,
+    matches: matches
+  };
+}

package/optimize/es/services/container_query/index.js

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { useEuiContainerQuery } from './container_query_hook';