@elastic/eui 86.0.0 → 87.1.0

package/optimize/es/components/focus_trap/focus_trap.js

@@ -23,13 +23,18 @@ import React, { Component } from 'react';
 import { FocusOn } from 'react-focus-on';
 import { RemoveScrollBar } from 'react-remove-scroll-bar';
 import { findElementBySelectorOrRef } from '../../services';
+import { usePropsWithComponentDefaults } from '../provider/component_defaults';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
-  _inherits(EuiFocusTrap, _Component);
-  var _super = _createSuper(EuiFocusTrap);
-  function EuiFocusTrap() {
+export var EuiFocusTrap = function EuiFocusTrap(props) {
+  var propsWithDefaults = usePropsWithComponentDefaults('EuiFocusTrap', props);
+  return ___EmotionJSX(EuiFocusTrapClass, propsWithDefaults);
+};
+var EuiFocusTrapClass = /*#__PURE__*/function (_Component) {
+  _inherits(EuiFocusTrapClass, _Component);
+  var _super = _createSuper(EuiFocusTrapClass);
+  function EuiFocusTrapClass() {
     var _this;
-    _classCallCheck(this, EuiFocusTrap);
+    _classCallCheck(this, EuiFocusTrapClass);
     for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
       args[_key] = arguments[_key];
     }
@@ -80,7 +85,7 @@ export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
     });
     return _this;
   }
-  _createClass(EuiFocusTrap, [{
+  _createClass(EuiFocusTrapClass, [{
     key: "componentDidMount",
     value: function componentDidMount() {
       this.setInitialFocus(this.props.initialFocus);
@@ -130,9 +135,9 @@ export var EuiFocusTrap = /*#__PURE__*/function (_Component) {
       }));
     }
   }]);
-  return EuiFocusTrap;
+  return EuiFocusTrapClass;
 }(Component);
-_defineProperty(EuiFocusTrap, "defaultProps", {
+_defineProperty(EuiFocusTrapClass, "defaultProps", {
   clickOutsideDisables: false,
   disabled: false,
   returnFocus: true,

package/optimize/es/components/form/range/dual_range.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "isDraggable", "theme"];
+var _excluded = ["className", "css", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "onBlur", "onChange", "onFocus", "showRange", "value", "isInvalid", "append", "prepend", "minInputProps", "maxInputProps", "inputPopoverProps", "isDraggable", "theme"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
@@ -259,9 +259,11 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
       });
     });
     _defineProperty(_assertThisInitialized(_this), "onResize", function (width) {
+      var _this$props$inputPopo, _this$props$inputPopo2;
       _this.setState({
         rangeWidth: width
       });
+      (_this$props$inputPopo = _this.props.inputPopoverProps) === null || _this$props$inputPopo === void 0 ? void 0 : (_this$props$inputPopo2 = _this$props$inputPopo.onPanelResize) === null || _this$props$inputPopo2 === void 0 ? void 0 : _this$props$inputPopo2.call(_this$props$inputPopo, width);
     });
     _defineProperty(_assertThisInitialized(_this), "getNearestStep", function (value) {
       var min = _this.props.min;
@@ -378,6 +380,7 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         prepend = _this$props.prepend,
         minInputProps = _this$props.minInputProps,
         maxInputProps = _this$props.maxInputProps,
+        inputPopoverProps = _this$props.inputPopoverProps,
         isDraggable = _this$props.isDraggable,
         theme = _this$props.theme,
         rest = _objectWithoutProperties(_this$props, _excluded);
@@ -618,8 +621,8 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? rangeStyles.euiRange__slimHorizontalSpacer : rangeStyles.euiRange__horizontalSpacer
       }), maxInput));
-      var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, _extends({}, inputPopoverProps, {
+        className: classNames('euiDualRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: ___EmotionJSX(EuiFormControlLayoutDelimited, {
           startControl: minInput,
           endControl: maxInput,
@@ -638,7 +641,7 @@ export var EuiDualRangeClass = /*#__PURE__*/function (_Component) {
         disableFocusTrap: true,
         onPanelResize: this.onResize,
         popoverScreenReaderText: dualSliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover || theRange;
     }
   }]);

package/optimize/es/components/form/range/range.js

@@ -7,7 +7,7 @@ import _inherits from "@babel/runtime/helpers/inherits";
 import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
 import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
+var _excluded = ["className", "compressed", "disabled", "fullWidth", "isLoading", "readOnly", "id", "max", "min", "name", "step", "showLabels", "showInput", "inputPopoverProps", "showTicks", "tickInterval", "ticks", "levels", "showRange", "showValue", "valueAppend", "valuePrepend", "onBlur", "onChange", "onFocus", "value", "tabIndex", "isInvalid", "theme"];
 function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
 function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
 /*
@@ -114,6 +114,7 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         step = _this$props.step,
         showLabels = _this$props.showLabels,
         showInput = _this$props.showInput,
+        inputPopoverProps = _this$props.inputPopoverProps,
         showTicks = _this$props.showTicks,
         tickInterval = _this$props.tickInterval,
         ticks = _this$props.ticks,
@@ -226,8 +227,8 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         className: showTicks || ticks ? 'euiRange__slimHorizontalSpacer' : 'euiRange__horizontalSpacer',
         css: showTicks || ticks ? styles.euiRange__slimHorizontalSpacer : styles.euiRange__horizontalSpacer
       }), theInput));
-      var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, {
-        className: "euiRange__popover",
+      var thePopover = showInputOnly ? ___EmotionJSX(EuiInputPopover, _extends({}, inputPopoverProps, {
+        className: classNames('euiRange__popover', inputPopoverProps === null || inputPopoverProps === void 0 ? void 0 : inputPopoverProps.className),
         input: theInput // `showInputOnly` confirms existence
         ,
         fullWidth: fullWidth,
@@ -235,7 +236,7 @@ export var EuiRangeClass = /*#__PURE__*/function (_Component) {
         closePopover: this.closePopover,
         disableFocusTrap: true,
         popoverScreenReaderText: sliderScreenReaderInstructions
-      }, theRange) : undefined;
+      }), theRange) : undefined;
       return thePopover ? thePopover : theRange;
     }
   }]);

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

@@ -94,11 +94,7 @@ var Header = function Header() {
   });
   return ___EmotionJSX(EuiHeader, null, ___EmotionJSX(EuiHeaderSection, {
     grow: false
-  }, ___EmotionJSX(EuiHeaderSectionItem, {
-    border: "right"
-  }, renderLogo()), ___EmotionJSX(EuiHeaderSectionItem, {
-    border: "right"
-  }, ___EmotionJSX(HeaderSpacesMenu, null))), renderBreadcrumbs(), ___EmotionJSX(EuiHeaderSection, {
+  }, ___EmotionJSX(EuiHeaderSectionItem, null, renderLogo()), ___EmotionJSX(EuiHeaderSectionItem, null, ___EmotionJSX(HeaderSpacesMenu, null))), renderBreadcrumbs(), ___EmotionJSX(EuiHeaderSection, {
     side: "right"
   }, ___EmotionJSX(EuiHeaderSectionItem, null, search), ___EmotionJSX(EuiHeaderSectionItem, null, ___EmotionJSX(HeaderUserMenu, null)), ___EmotionJSX(EuiHeaderSectionItem, null, ___EmotionJSX(HeaderAppMenu, null))));
 };

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

@@ -16,14 +16,13 @@ import { EuiHeaderBreadcrumbs } from './header_breadcrumbs';
 import { EuiHeaderSectionItem, EuiHeaderSection } from './header_section';
 import { euiHeaderStyles } from './header.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-function createHeaderSection(sections, border) {
+var createHeaderSection = function createHeaderSection(sections) {
   return sections.map(function (section, index) {
     return ___EmotionJSX(EuiHeaderSectionItem, {
-      key: index,
-      border: border
+      key: index
     }, section);
   });
-}
+};
 // Start a counter to manage the total number of fixed headers that need the body class
 var euiHeaderFixedCounter = 0;
 export var EuiHeader = function EuiHeader(_ref) {
@@ -67,7 +66,7 @@ export var EuiHeader = function EuiHeader(_ref) {
         // Items get wrapped in EuiHeaderSection and each item in a EuiHeaderSectionItem
         content.push(___EmotionJSX(EuiHeaderSection, {
           key: "items-".concat(index)
-        }, createHeaderSection(section.items, section.borders)));
+        }, createHeaderSection(section.items)));
       }
       if (section.breadcrumbs) {
         content.push(

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

@@ -14,20 +14,22 @@ export var euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
   return {
     height: euiTheme.size.xxxl,
-    childHeight: euiTheme.size.xxl
+    childHeight: euiTheme.size.xxl,
+    padding: euiTheme.size.s
   };
 };
 export var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
   var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
-    height = _euiHeaderVariables.height;
+    height = _euiHeaderVariables.height,
+    padding = _euiHeaderVariables.padding;
 
   // Curated border color to fade into the shadow without looking too much like a border
   // It adds separation between the header and flyout
   var borderColor = colorMode === 'DARK' ? shade(euiTheme.colors.emptyShade, 0.35) : shade(euiTheme.border.color, 0.03);
   return {
-    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', euiTheme.size.s), " ", euiShadowSmall(euiThemeContext), ";;label:euiHeader;"),
+    euiHeader: /*#__PURE__*/css("display:flex;justify-content:space-between;", logicalCSS('height', height), " ", logicalCSS('padding-horizontal', padding), " ", euiShadowSmall(euiThemeContext), ";;label:euiHeader;"),
     // Position
     static: /*#__PURE__*/css("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
     fixed: /*#__PURE__*/css("z-index:", euiTheme.levels.header, ";position:fixed;", logicalCSS('top', 0), " ", logicalCSS('horizontal', 0), " &+[data-fixed-header]{", logicalCSS('top', height), ";};label:fixed;"),
@@ -54,5 +56,5 @@ var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext, defaultB
     controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
   var backgroundColor = colorMode === 'DARK' ? shade(euiTheme.colors.lightestShade, 0.5) : shade(euiTheme.colors.darkestShade, 0.28);
   var borderColor = colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
-  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat(logicalCSS('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderSectionItem {\n      &::after {\n        background-color: ").concat(colorMode === 'DARK' ? euiTheme.colors.lightestShade : euiTheme.colors.darkShade, ";\n      }\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group,\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n          ").concat(transparentize(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append {\n          background-color: transparent;\n          color: inherit;\n        }\n      }\n    }\n  ");
+  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat(logicalCSS('border-bottom-color', borderColor), "\n\n    .euiHeaderLogo__text,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      color: ").concat(euiTheme.colors.ghost, ";\n    }\n\n    .euiHeaderLink-isActive {\n      color: ").concat(makeHighContrastColor(euiTheme.colors.primary)(backgroundColor), ";\n    }\n\n    .euiHeaderLogo,\n    .euiHeaderLink,\n    .euiHeaderSectionItemButton {\n      &:focus {\n        background-color: ").concat(shade(euiTheme.colors.primary, 0.5), ";\n      }\n    }\n\n    .euiHeaderSectionItemButton__notification--badge {\n      box-shadow: 0 0 0 ").concat(euiTheme.border.width.thin, " ").concat(backgroundColor, ";\n    }\n\n    .euiHeaderSectionItemButton__notification--dot {\n      stroke: ").concat(backgroundColor, ";\n    }\n\n    .euiSelectableTemplateSitewide .euiFormControlLayout {\n      background-color: transparent;\n\n      &--group,\n      input {\n        box-shadow: inset 0 0 0 ").concat(euiTheme.border.width.thin, "\n          ").concat(transparentize(euiTheme.colors.ghost, 0.3), ";\n      }\n\n      &:not(:focus-within) {\n        /* Increase contrast of filled text to be more than placeholder text */\n        color: ").concat(euiTheme.colors.ghost, ";\n\n        input {\n          /* Increase contrast of placeholder text */\n          &::placeholder {\n            color: ").concat(makeHighContrastColor(controlPlaceholderText, 8)(backgroundColor), ";\n          }\n\n          /* Inherit color from form control layout */\n          color: inherit;\n          background-color: transparent;\n        }\n\n        .euiFormControlLayout__append {\n          background-color: transparent;\n          color: inherit;\n        }\n      }\n    }\n  ");
 };

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

@@ -12,7 +12,8 @@ var _excluded = ["action", "className", "date", "text", "title", "badge"];
 import React from 'react';
 import classNames from 'classnames';
 import { EuiFlexGroup, EuiFlexItem } from '../../flex';
-import { useGeneratedHtmlId } from '../../../services';
+import { useEuiTheme, useGeneratedHtmlId } from '../../../services';
+import { euiHeaderAlertStyles } from './header_alert.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHeaderAlert = function EuiHeaderAlert(_ref) {
   var action = _ref.action,
@@ -22,23 +23,30 @@ export var EuiHeaderAlert = function EuiHeaderAlert(_ref) {
     title = _ref.title,
     badge = _ref.badge,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var euiTheme = useEuiTheme();
+  var styles = euiHeaderAlertStyles(euiTheme);
   var classes = classNames('euiHeaderAlert', className);
   var ariaId = useGeneratedHtmlId();
   return ___EmotionJSX("article", _extends({
     "aria-labelledby": "".concat(ariaId, "-title"),
-    className: classes
+    className: classes,
+    css: styles.euiHeaderAlert
   }, rest), ___EmotionJSX(EuiFlexGroup, {
     justifyContent: "spaceBetween"
   }, ___EmotionJSX(EuiFlexItem, null, ___EmotionJSX("div", {
-    className: "euiHeaderAlert__date"
+    className: "euiHeaderAlert__date",
+    css: styles.euiHeaderAlert__date
   }, date)), badge && ___EmotionJSX(EuiFlexItem, {
     grow: false
   }, badge)), ___EmotionJSX("h3", {
     id: "".concat(ariaId, "-title"),
-    className: "euiHeaderAlert__title"
+    className: "euiHeaderAlert__title",
+    css: styles.euiHeaderAlert__title
   }, title), ___EmotionJSX("div", {
-    className: "euiHeaderAlert__text"
+    className: "euiHeaderAlert__text",
+    css: styles.euiHeaderAlert__text
   }, text), action && ___EmotionJSX("div", {
-    className: "euiHeaderAlert__action euiLink"
+    className: "euiHeaderAlert__action",
+    css: styles.euiHeaderAlert__action
   }, action));
 };

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

@@ -0,0 +1,21 @@
+/*
+ * 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';
+import { logicalCSS, euiFontSize } from '../../../global_styling';
+import { euiTitle } from '../../title/title.styles';
+export var euiHeaderAlertStyles = function euiHeaderAlertStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiHeaderAlert: /*#__PURE__*/css("position:relative;", logicalCSS('min-width', '300px'), " ", logicalCSS('padding-horizontal', euiTheme.size.s), " &:not(:last-child){", logicalCSS('margin-bottom', euiTheme.size.l), " ", logicalCSS('padding-bottom', euiTheme.size.l), " ", logicalCSS('border-bottom', euiTheme.border.thin), ";};label:euiHeaderAlert;"),
+    euiHeaderAlert__title: /*#__PURE__*/css(euiTitle(euiThemeContext, 'xs'), " ", logicalCSS('margin-bottom', euiTheme.size.s), ";;label:euiHeaderAlert__title;"),
+    euiHeaderAlert__text: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), " ", logicalCSS('margin-bottom', euiTheme.size.base), ";;label:euiHeaderAlert__text;"),
+    euiHeaderAlert__action: /*#__PURE__*/css(euiFontSize(euiThemeContext, 's'), ";;label:euiHeaderAlert__action;"),
+    euiHeaderAlert__date: /*#__PURE__*/css(euiFontSize(euiThemeContext, 'xs'), " color:", euiTheme.colors.darkShade, ";;label:euiHeaderAlert__date;")
+  };
+};

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

@@ -13,20 +13,15 @@ var _excluded = ["children", "className", "gutterSize", "popoverBreakpoints", "p
 
 import React, { useState, useEffect, useCallback } from 'react';
 import classNames from 'classnames';
-import { keysOf } from '../../common';
+import { useEuiTheme } from '../../../services';
 import { EuiIcon } from '../../icon';
 import { EuiPopover } from '../../popover';
 import { EuiI18n } from '../../i18n';
 import { EuiHeaderSectionItemButton } from '../header_section';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
+import { euiHeaderLinksStyles } from './header_links.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var gutterSizeToClassNameMap = {
-  xs: '--gutterXS',
-  s: '--gutterS',
-  m: '--gutterM',
-  l: '--gutterL'
-};
-export var GUTTER_SIZES = keysOf(gutterSizeToClassNameMap);
+export var GUTTER_SIZES = ['xs', 's', 'm', 'l'];
 export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   var children = _ref.children,
     className = _ref.className,
@@ -37,6 +32,8 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     popoverButtonProps = _ref.popoverButtonProps,
     popoverProps = _ref.popoverProps,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var euiTheme = useEuiTheme();
+  var styles = euiHeaderLinksStyles(euiTheme);
   var _ref2 = popoverButtonProps || {},
     onClick = _ref2.onClick,
     _ref2$iconType = _ref2.iconType,
@@ -60,7 +57,7 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
     return function () {
       window.removeEventListener('resize', closeMenu);
     };
-  });
+  }, [closeMenu]);
   var classes = classNames('euiHeaderLinks', className);
   var button = ___EmotionJSX(EuiI18n, {
     token: "euiHeaderLinks.openNavigationMenu",
@@ -80,11 +77,13 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
   }, function (appNavigation) {
     return ___EmotionJSX("nav", _extends({
       className: classes,
+      css: styles.euiHeaderLinks,
       "aria-label": appNavigation
     }, rest), ___EmotionJSX(EuiHideFor, {
       sizes: popoverBreakpoints
     }, ___EmotionJSX("div", {
-      className: classNames('euiHeaderLinks__list', ["euiHeaderLinks__list".concat(gutterSizeToClassNameMap[gutterSize])])
+      className: "euiHeaderLinks__list",
+      css: [styles.euiHeaderLinks__list, styles.gutterSizes[gutterSize], ";label:EuiHeaderLinks;"]
     }, children)), ___EmotionJSX(EuiShowFor, {
       sizes: popoverBreakpoints
     }, ___EmotionJSX(EuiPopover, _extends({
@@ -95,7 +94,8 @@ export var EuiHeaderLinks = function EuiHeaderLinks(_ref) {
       panelPaddingSize: "none",
       repositionOnScroll: true
     }, popoverProps), ___EmotionJSX("div", {
-      className: classNames('euiHeaderLinks__mobileList', ["euiHeaderLinks__mobileList".concat(gutterSizeToClassNameMap[gutterSize])])
+      className: "euiHeaderLinks__mobileList",
+      css: styles.euiHeaderLinks__mobileList
     }, children))));
   });
 };

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

@@ -0,0 +1,41 @@
+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
+ * 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';
+import { logicalCSS } from '../../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "1ta3k6d-euiHeaderLinks__list",
+  styles: "white-space:nowrap;display:flex;align-items:center;label:euiHeaderLinks__list;"
+} : {
+  name: "1ta3k6d-euiHeaderLinks__list",
+  styles: "white-space:nowrap;display:flex;align-items:center;label:euiHeaderLinks__list;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "wu4i6o-euiHeaderLinks",
+  styles: "display:flex;label:euiHeaderLinks;"
+} : {
+  name: "wu4i6o-euiHeaderLinks",
+  styles: "display:flex;label:euiHeaderLinks;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiHeaderLinksStyles = function euiHeaderLinksStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
+  return {
+    euiHeaderLinks: _ref2,
+    euiHeaderLinks__list: _ref,
+    gutterSizes: {
+      xs: /*#__PURE__*/css("gap:", euiTheme.size.s, ";;label:xs;"),
+      s: /*#__PURE__*/css("gap:", euiTheme.size.m, ";;label:s;"),
+      m: /*#__PURE__*/css("gap:", euiTheme.size.base, ";;label:m;"),
+      l: /*#__PURE__*/css("gap:", euiTheme.size.l, ";;label:l;")
+    },
+    euiHeaderLinks__mobileList: /*#__PURE__*/css(".euiHeaderLink{display:block;", logicalCSS('width', '100%'), " padding:", euiTheme.size.s, ";&>.euiButtonEmpty__content{justify-content:flex-start;}};label:euiHeaderLinks__mobileList;")
+  };
+};

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

@@ -11,24 +11,20 @@ var _excluded = ["side", "children", "className", "grow"];
 
 import React from 'react';
 import classNames from 'classnames';
+import { euiHeaderSectionStyles } from './header_section.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var sideToClassNameMap = {
-  left: 'euiHeaderSection--left',
-  right: 'euiHeaderSection--right'
-};
 export var EuiHeaderSection = function EuiHeaderSection(_ref) {
-  var _ref$side = _ref.side,
-    side = _ref$side === void 0 ? 'left' : _ref$side,
+  var side = _ref.side,
     children = _ref.children,
     className = _ref.className,
     _ref$grow = _ref.grow,
     grow = _ref$grow === void 0 ? false : _ref$grow,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiHeaderSection', {
-    'euiHeaderSection--grow': grow,
-    'euiHeaderSection--dontGrow': !grow
-  }, sideToClassNameMap[side], className);
+  var styles = euiHeaderSectionStyles();
+  var cssStyles = [styles.euiHeaderSection, grow && styles.grow, side && styles[side]];
+  var classes = classNames('euiHeaderSection', className);
   return ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), children);
 };

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

@@ -0,0 +1,38 @@
+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
+ * 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';
+import { logicalCSS } from '../../../global_styling';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "122lw0e-grow",
+  styles: "flex-grow:1;label:grow;"
+} : {
+  name: "122lw0e-grow",
+  styles: "flex-grow:1;label:grow;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1gl6paa-euiHeaderSection",
+  styles: "display:flex;flex-grow:0;flex-shrink:0;label:euiHeaderSection;"
+} : {
+  name: "1gl6paa-euiHeaderSection",
+  styles: "display:flex;flex-grow:0;flex-shrink:0;label:euiHeaderSection;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiHeaderSectionStyles = function euiHeaderSectionStyles() {
+  return {
+    euiHeaderSection: _ref2,
+    grow: _ref,
+    // By default, EuiHeader uses `justify-content: space-between`, which means
+    // sections are left-aligned by default (even when alone) with no extra CSS needed
+    left: /*#__PURE__*/css(";label:left;"),
+    // @see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_box_alignment/Box_alignment_in_flexbox#alignment_and_auto_margins
+    right: /*#__PURE__*/css(logicalCSS('margin-left', 'auto'), ";;label:right;")
+  };
+};

package/optimize/es/components/header/header_section/header_section_item.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["border", "children", "className"];
+var _excluded = ["children", "className"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -11,22 +11,23 @@ var _excluded = ["border", "children", "className"];
 
 import React from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
+import { euiHeaderSectionItemStyles } from './header_section_item.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
-var borderToClassNameMap = {
-  left: 'euiHeaderSectionItem--borderLeft',
-  right: 'euiHeaderSectionItem--borderRight',
-  none: undefined
-};
+/**
+ * Header items are small icon links that pop up menus
+ */
 export var EuiHeaderSectionItem = function EuiHeaderSectionItem(_ref) {
-  var _ref$border = _ref.border,
-    border = _ref$border === void 0 ? 'left' : _ref$border,
-    children = _ref.children,
+  var children = _ref.children,
     className = _ref.className,
     rest = _objectWithoutProperties(_ref, _excluded);
-  var classes = classNames('euiHeaderSectionItem', borderToClassNameMap[border], className);
+  var euiTheme = useEuiTheme();
+  var styles = euiHeaderSectionItemStyles(euiTheme);
+  var classes = classNames('euiHeaderSectionItem', className);
 
   // we check if there is any children and if not, we don't render anything
   return children ? ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: styles.euiHeaderSectionItem
   }, rest), children) : null;
 };

package/optimize/es/components/header/header_section/header_section_item.styles.js

@@ -0,0 +1,16 @@
+/*
+ * 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';
+import { logicalCSS, euiMaxBreakpoint } from '../../../global_styling';
+export var euiHeaderSectionItemStyles = function euiHeaderSectionItemStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiHeaderSectionItem: /*#__PURE__*/css("position:relative;display:flex;align-items:center;", euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalCSS('min-width', euiTheme.size.xl), ";};label:euiHeaderSectionItem;")
+  };
+};

package/optimize/es/components/header/header_section/header_section_item_button.js

@@ -11,10 +11,12 @@ var _excluded = ["children", "className", "notification", "notificationColor"];
 
 import React, { forwardRef, useImperativeHandle, useRef } from 'react';
 import classNames from 'classnames';
+import { useEuiTheme } from '../../../services';
 import { EuiNotificationBadge } from '../../badge/notification_badge/badge_notification';
 import { EuiIcon } from '../../icon';
 import { EuiButtonEmpty } from '../../button';
 import { EuiHideFor, EuiShowFor } from '../../responsive';
+import { euiHeaderSectionItemButtonStyles } from './header_section_item_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiHeaderSectionItemButton = /*#__PURE__*/forwardRef(function (_ref,
 /**
@@ -135,10 +137,12 @@ ref) {
     };
     return buttonRef.current;
   }, []);
+  var euiTheme = useEuiTheme();
+  var styles = euiHeaderSectionItemButtonStyles(euiTheme);
   var classes = classNames('euiHeaderSectionItemButton', className);
-  var animationClasses = classNames(['euiHeaderSectionItemButton__content']);
   var notificationDot = ___EmotionJSX(EuiIcon, {
     className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--dot",
+    css: [styles.notification.euiHeaderSectionItemButton__notification, styles.notification.dot, ";label:notificationDot;"],
     color: notificationColor,
     type: "dot",
     size: "l"
@@ -151,6 +155,7 @@ ref) {
       sizes: ['xs']
     }, ___EmotionJSX(EuiNotificationBadge, {
       className: "euiHeaderSectionItemButton__notification euiHeaderSectionItemButton__notification--badge",
+      css: [styles.notification.euiHeaderSectionItemButton__notification, styles.notification.badge, ";label:buttonNotification;"],
       color: notificationColor
     }, notification)), ___EmotionJSX(EuiShowFor, {
       sizes: ['xs']
@@ -158,11 +163,13 @@ ref) {
   }
   return ___EmotionJSX(EuiButtonEmpty, _extends({
     className: classes,
+    css: styles.euiHeaderSectionItemButton,
     color: "text",
     buttonRef: buttonRef
   }, rest), ___EmotionJSX("span", {
     ref: animationTargetRef,
-    className: animationClasses
+    className: "euiHeaderSectionItemButton__content",
+    css: styles.euiHeaderSectionItemButton__content
   }, children), buttonNotification);
 });
 EuiHeaderSectionItemButton.displayName = 'EuiHeaderSectionItemButton';

package/optimize/es/components/header/header_section/header_section_item_button.styles.js

@@ -0,0 +1,44 @@
+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
+ * 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';
+import { logicalCSS, logicalSizeCSS, mathWithUnits, euiMaxBreakpoint } from '../../../global_styling';
+import { euiHeaderVariables } from '../header.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "k09eot-euiHeaderSectionItemButton__notification",
+  styles: "position:absolute;label:euiHeaderSectionItemButton__notification;"
+} : {
+  name: "k09eot-euiHeaderSectionItemButton__notification",
+  styles: "position:absolute;label:euiHeaderSectionItemButton__notification;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "1f67s81-euiHeaderSectionItemButton__content",
+  styles: "display:inline-block;label:euiHeaderSectionItemButton__content;"
+} : {
+  name: "1f67s81-euiHeaderSectionItemButton__content",
+  styles: "display:inline-block;label:euiHeaderSectionItemButton__content;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiHeaderSectionItemButtonStyles = function euiHeaderSectionItemButtonStyles(euiThemeContext) {
+  var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
+    childHeight = _euiHeaderVariables.childHeight;
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    euiHeaderSectionItemButton: /*#__PURE__*/css("position:relative;", logicalCSS('height', childHeight), " ", logicalCSS('min-width', childHeight), " text-align:center;font-size:0;", euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalCSS('min-width', mathWithUnits(childHeight, function (x) {
+      return x * 0.75;
+    })), ";};label:euiHeaderSectionItemButton;"),
+    euiHeaderSectionItemButton__content: _ref2,
+    notification: {
+      euiHeaderSectionItemButton__notification: _ref,
+      dot: /*#__PURE__*/css(logicalCSS('top', 0), " ", logicalCSS('right', 0), " stroke:", euiTheme.colors.emptyShade, ";", euiMaxBreakpoint(euiThemeContext, 's'), "{", logicalSizeCSS(euiTheme.size.base), " ", logicalCSS('top', '9%'), ";};label:dot;"),
+      badge: /*#__PURE__*/css(logicalCSS('top', '9%'), " ", logicalCSS('right', '9%'), " box-shadow:0 0 0 ", euiTheme.border.width.thin, " ", euiTheme.colors.emptyShade, ";;label:badge;")
+    }
+  };
+};