@elastic/eui 111.0.0 → 111.1.0

package/optimize/es/components/flex/flex_group.js

@@ -23,7 +23,7 @@ var EuiFlexGroupInternal = function EuiFlexGroupInternal(_ref, ref) {
     _ref$component = _ref.component,
     component = _ref$component === void 0 ? 'div' : _ref$component,
     _ref$gutterSize = _ref.gutterSize,
-    gutterSize = _ref$gutterSize === void 0 ? 'l' : _ref$gutterSize,
+    gutterSize = _ref$gutterSize === void 0 ? 'm' : _ref$gutterSize,
     _ref$alignItems = _ref.alignItems,
     alignItems = _ref$alignItems === void 0 ? 'stretch' : _ref$alignItems,
     _ref$responsive = _ref.responsive,

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

@@ -17,6 +17,7 @@ import { euiShadowXLarge } from '@elastic/eui-theme-common';
 import { isEuiFlyoutSizeNamed } from './const';
 import { euiCanAnimate, euiMaxBreakpoint, euiMinBreakpoint, logicalCSS, logicalStyles, mathWithUnits } from '../../global_styling';
 import { euiFormMaxWidth } from '../form/form.styles';
+export var EUI_FLYOUT_CONTAINER_NAME = 'euiFlyout';
 export var FLYOUT_BREAKPOINT = 'm';
 export var euiFlyoutSlideInRight = keyframes(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  from {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n  to {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n"])));
 export var euiFlyoutSlideOutRight = keyframes(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n  from {\n    opacity: 1;\n    transform: translateX(0%);\n  }\n  to {\n    opacity: 0;\n    transform: translateX(100%);\n  }\n"])));

package/optimize/es/components/horizontal_rule/horizontal_rule.js

@@ -21,7 +21,7 @@ export var EuiHorizontalRule = function EuiHorizontalRule(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'full' : _ref$size,
     _ref$margin = _ref.margin,
-    margin = _ref$margin === void 0 ? 'l' : _ref$margin,
+    margin = _ref$margin === void 0 ? 'm' : _ref$margin,
     rest = _objectWithoutProperties(_ref, _excluded);
   var classes = classNames('euiHorizontalRule', className);
   var styles = useEuiMemoizedStyles(euiHorizontalRuleStyles);

package/optimize/es/components/icon/assets/agentBuilderRobot.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconAgentBuilderRobot = function EuiIconAgentBuilderRobot(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M9.208 11.23a.446.446 0 0 1 .642.616l-.015.017a1.373 1.373 0 0 1-.127.11 2.326 2.326 0 0 1-.355.227c-.31.163-.763.319-1.353.319a2.89 2.89 0 0 1-1.352-.319 2.325 2.325 0 0 1-.452-.31l-.029-.027-.016-.017a.446.446 0 0 1 .643-.617l.005.005.045.039c.045.035.118.086.219.139.199.104.51.216.937.216.428 0 .74-.112.94-.216a1.417 1.417 0 0 0 .263-.179l.005-.004ZM5.964 8a1.019 1.019 0 1 1 0 2.038 1.019 1.019 0 0 1 0-2.038Zm4.073 0a1.018 1.018 0 1 1 0 2.037 1.018 1.018 0 0 1 0-2.037Z"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M8 1a1.4 1.4 0 0 1 .446 2.726V5h1.845C11.767 5 13 6.27 13 7.746V8h1.11c.491 0 .89.526.89 1.018v3.055c0 .492-.399.927-.89.927L13 12.99v1.11c0 .491-.435.9-.927.9H3.928C3.436 15 3 14.601 3 14.11V13H1.89c-.46 0-.84-.386-.886-.835L1 12.072V9.018C1 8.527 1.4 8 1.89 8H3v-.254C3 6.27 4.234 5 5.71 5h1.845V3.726A1.4 1.4 0 0 1 8 1ZM5.72 6C4.734 6 4 6.762 4 7.746V14h8V7.746C12 6.762 11.285 6 10.301 6H5.719ZM2 12h1V9H2v3Zm11 0h1l-.005-3h-1L13 12ZM8 1.89a.51.51 0 1 0 .001 1.02.51.51 0 0 0 0-1.02Z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconAgentBuilderRobot;

package/optimize/es/components/icon/assets/cross_project_search.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconCrossProjectSearch = function EuiIconCrossProjectSearch(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M8.5 9h4a1 1 0 0 1 1 1v2.065A1.999 1.999 0 1 1 11 14a2 2 0 0 1 1.5-1.935V10h-4v2.065A1.999 1.999 0 1 1 6 14a2 2 0 0 1 1.5-1.935V10h-4v2.065A1.999 1.999 0 1 1 1 14a2 2 0 0 1 1.5-1.935V10a1 1 0 0 1 1-1h4V7h1v2ZM3 13a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2Zm5 0a1 1 0 1 0 0 2 1 1 0 0 0 0-2ZM7 0a3 3 0 0 1 3 3c0 .648-.208 1.246-.557 1.736l1.91 1.91-.707.708-1.91-1.91A3 3 0 1 1 7 0Zm0 1a2 2 0 1 0 0 4 2 2 0 0 0 0-4Z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconCrossProjectSearch;

package/optimize/es/components/icon/assets/dashed_circle.js

@@ -0,0 +1,34 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconDashedCircle = function EuiIconDashedCircle(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M7.014 14.222c.06-.381.419-.638.805-.625.06.002.12.003.182.003V15c-.134 0-.268-.004-.4-.012-.386-.022-.647-.384-.587-.766Zm1.973 0c.06.382-.202.744-.587.766A6.944 6.944 0 0 1 8 15v-1.4c.061 0 .122-.001.182-.003.386-.012.745.244.805.626Zm-5.8-2.236c.123-.303.536-.357.762-.12.088.092.18.181.273.268.257.234.322.626.117.907l-.039.052-.274-.49c-.06-.108-.226-.065-.226.06 0 .098-.113.155-.194.1-.279-.192-.177-.091-.378-.382a.41.41 0 0 1-.045-.386l.004-.01Zm9.911-.284c.312.227.383.667.126.955-.178.2-.367.388-.566.566-.288.257-.727.186-.954-.126-.228-.312-.156-.746.126-1.01.089-.084.175-.17.258-.258.264-.282.698-.354 1.01-.127ZM1.012 7.601c.022-.387.383-.648.765-.588.382.06.64.42.628.806-.004.12-.004.24 0 .36.012.388-.246.747-.628.806-.382.06-.743-.201-.765-.587a7.278 7.278 0 0 1 0-.797Zm13.976.797c-.021.386-.382.647-.764.587-.382-.06-.639-.418-.627-.804.004-.121.004-.242 0-.363-.012-.386.245-.745.627-.805.381-.06.743.201.764.587.014.265.014.533 0 .798ZM4.298 2.901c.227.313.155.748-.127 1.012a5.656 5.656 0 0 0-.256.257c-.265.282-.7.354-1.012.126-.312-.227-.384-.667-.126-.956.177-.198.366-.387.565-.565.288-.257.728-.186.955.126Zm7.405 0c.228-.311.668-.383.956-.126.199.178.387.367.565.566.257.288.186.727-.126.955-.312.228-.747.156-1.01-.126a5.655 5.655 0 0 0-.258-.257c-.282-.264-.354-.699-.127-1.011ZM8.4 1.012c.386.021.647.383.588.764-.06.383-.42.64-.806.628a5.873 5.873 0 0 0-.361 0c-.387.012-.746-.245-.806-.627-.06-.382.202-.744.588-.765.265-.014.532-.014.797 0Z"
+  }), ___EmotionJSX("path", {
+    d: "M3.376 13.178a7.036 7.036 0 0 1-.566-.567c-.257-.287-.186-.727.126-.954.312-.227.746-.155 1.01.127.084.088.17.174.258.257.282.264.354.699.127 1.01-.227.312-.667.383-.955.127Z"
+  }));
+};
+export var icon = EuiIconDashedCircle;

package/optimize/es/components/icon/assets/product_robot.js

@@ -0,0 +1,36 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["title", "titleId"];
+/*
+ * 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.
+ */
+
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+
+import * as React from 'react';
+import { jsx as ___EmotionJSX } from "@emotion/react";
+var EuiIconProductRobot = function EuiIconProductRobot(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = _objectWithoutProperties(_ref, _excluded);
+  return ___EmotionJSX("svg", _extends({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? ___EmotionJSX("title", {
+    id: titleId
+  }, title) : null, ___EmotionJSX("path", {
+    d: "M9.208 11.23a.446.446 0 0 1 .642.616l-.015.017a1.373 1.373 0 0 1-.127.11 2.326 2.326 0 0 1-.355.227c-.31.163-.763.319-1.353.319a2.89 2.89 0 0 1-1.352-.319 2.325 2.325 0 0 1-.452-.31l-.029-.027-.016-.017a.446.446 0 0 1 .643-.617l.005.005.045.039c.045.035.118.086.219.139.199.104.51.216.937.216.428 0 .74-.112.94-.216a1.417 1.417 0 0 0 .263-.179l.005-.004ZM5.964 8a1.019 1.019 0 1 1 0 2.038 1.019 1.019 0 0 1 0-2.038Zm4.073 0a1.018 1.018 0 1 1 0 2.037 1.018 1.018 0 0 1 0-2.037Z"
+  }), ___EmotionJSX("path", {
+    fillRule: "evenodd",
+    d: "M8 1a1.4 1.4 0 0 1 .446 2.726V5h1.845C11.767 5 13 6.27 13 7.746V8h1.11c.491 0 .89.526.89 1.018v3.055c0 .492-.399.927-.89.927L13 12.99v1.11c0 .491-.435.9-.927.9H3.928C3.436 15 3 14.601 3 14.11V13H1.89c-.46 0-.84-.386-.886-.835L1 12.072V9.018C1 8.527 1.4 8 1.89 8H3v-.254C3 6.27 4.234 5 5.71 5h1.845V3.726A1.4 1.4 0 0 1 8 1ZM5.72 6C4.734 6 4 6.762 4 7.746V14h8V7.746C12 6.762 11.285 6 10.301 6H5.719ZM2 12h1V9H2v3Zm11 0h1l-.005-3h-1L13 12ZM8 1.89a.51.51 0 1 0 .001 1.02.51.51 0 0 0 0-1.02Z",
+    clipRule: "evenodd"
+  }));
+};
+export var icon = EuiIconProductRobot;

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

@@ -87,6 +87,7 @@ export var typeToPathMap = {
   copy: 'copy',
   copyClipboard: 'copy',
   // NOTE: To be deprecated in favor of `copy`
+  crossProjectSearch: 'cross_project_search',
   createAdvancedJob: 'ml_create_advanced_job',
   createGenericJob: 'ml_create_generic_job',
   createGeoJob: 'ml_create_geo_job',
@@ -100,6 +101,7 @@ export var typeToPathMap = {
   currency: 'currency',
   cut: 'cut',
   dashboardApp: 'app_dashboard',
+  dashedCircle: 'dashed_circle',
   dataVisualizer: 'ml_data_visualizer',
   database: 'database',
   desktop: 'desktop',
@@ -384,6 +386,7 @@ export var typeToPathMap = {
   // NOTE: To be deprecated in favor of `plus_in_circle`
   plusInSquare: 'plus_in_square',
   popout: 'popout',
+  productRobot: 'product_robot',
   push: 'push',
   question: 'question',
   quote: 'quote',

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/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 * from './container_query_hook';