@elastic/eui 82.2.1 → 83.1.0

package/optimize/es/components/pagination/pagination.js

@@ -21,7 +21,6 @@ import { EuiPaginationButtonArrow } from './pagination_button_arrow';
 import { useIsWithinBreakpoints, useEuiTheme } from '../../services';
 import { EuiScreenReaderOnly } from '../accessibility';
 import { euiPaginationStyles } from './pagination.styles';
-import { euiPaginationButtonStyles } from './pagination_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var MAX_VISIBLE_PAGES = 5;
 var NUMBER_SURROUNDING_PAGES = Math.floor(MAX_VISIBLE_PAGES * 0.5);
@@ -40,9 +39,7 @@ export var EuiPagination = function EuiPagination(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   var isResponsive = useIsWithinBreakpoints(responsive, !!responsive);
   var euiTheme = useEuiTheme();
-  var paginationStyles = euiPaginationStyles(euiTheme);
-  var _euiPaginationButtonS = euiPaginationButtonStyles(euiTheme),
-    isPlaceholder = _euiPaginationButtonS.isPlaceholder;
+  var styles = euiPaginationStyles(euiTheme);
 
   // Force to `compressed` version if specified or within the responsive breakpoints
   var compressed = _compressed || isResponsive;
@@ -100,7 +97,7 @@ export var EuiPagination = function EuiPagination(_ref) {
     if (compressed) {
       centerPageCount = ___EmotionJSX(EuiText, {
         size: "s",
-        css: paginationStyles.euiPagination__compressedText,
+        css: styles.euiPagination__compressedText,
         className: "euiPagination__compressedText"
       }, ___EmotionJSX(EuiI18n, {
         token: "euiPagination.pageOfTotalCompressed",
@@ -138,7 +135,7 @@ export var EuiPagination = function EuiPagination(_ref) {
             return ___EmotionJSX("li", {
               "aria-label": firstRangeAriaLabel,
               className: "euiPagination__item",
-              css: isPlaceholder
+              css: styles.euiPagination__ellipsis
             }, "\u2026");
           }));
         } else if (firstPageInRange === 2) {
@@ -168,7 +165,7 @@ export var EuiPagination = function EuiPagination(_ref) {
             return ___EmotionJSX("li", {
               "aria-label": lastRangeAriaLabel,
               className: "euiPagination__item",
-              css: isPlaceholder
+              css: styles.euiPagination__ellipsis
             }, "\u2026");
           }));
         }
@@ -185,7 +182,7 @@ export var EuiPagination = function EuiPagination(_ref) {
       });
       centerPageCount = ___EmotionJSX("ul", _extends({
         className: "euiPagination__list",
-        css: paginationStyles.euiPagination__list
+        css: styles.euiPagination__list
       }, accessibleName), firstPageButtons, selectablePages, lastPageButtons);
     }
   }
@@ -211,7 +208,7 @@ export var EuiPagination = function EuiPagination(_ref) {
   // Create the whole string with total pageCount or `collection`
   var accessiblePageCount = "".concat(accessiblePageString(), " ").concat(ofLabel, " ").concat(accessibleCollectionString);
   return ___EmotionJSX("nav", _extends({
-    css: [paginationStyles.euiPagination, ";label:EuiPagination;"],
+    css: styles.euiPagination,
     className: classes
   }, rest), ___EmotionJSX(EuiScreenReaderOnly, null, ___EmotionJSX("span", {
     "aria-atomic": "true",

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

@@ -8,7 +8,7 @@ function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringif
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalCSSWithFallback, euiScrollBarStyles } from '../../global_styling';
+import { logicalCSS, logicalCSSWithFallback, euiScrollBarStyles, euiFontSize } from '../../global_styling';
 var _ref = process.env.NODE_ENV === "production" ? {
   name: "1dbd2rc-euiPagination__list",
   styles: "display:flex;align-items:baseline;label:euiPagination__list;"
@@ -23,7 +23,8 @@ export var euiPaginationStyles = function euiPaginationStyles(euiThemeContext) {
     // Base
     euiPagination: /*#__PURE__*/css(euiScrollBarStyles(euiThemeContext), " display:flex;align-items:center;", logicalCSSWithFallback('overflow-y', 'hidden'), " ", logicalCSSWithFallback('overflow-x', 'auto'), ";;label:euiPagination;"),
     // Elements
-    euiPagination__compressedText: /*#__PURE__*/css("display:inline-flex;align-items:center;line-height:1!important;>span{", logicalCSS('margin-horizontal', euiTheme.size.s), " font-weight:", euiTheme.font.weight.semiBold, ";&:first-of-type{color:", euiTheme.colors.primaryText, ";}};label:euiPagination__compressedText;"),
-    euiPagination__list: _ref
+    euiPagination__compressedText: /*#__PURE__*/css("display:inline-flex;align-items:center;line-height:1;>span{", logicalCSS('margin-horizontal', euiTheme.size.s), " font-weight:", euiTheme.font.weight.semiBold, ";&:first-of-type{color:", euiTheme.colors.primaryText, ";}};label:euiPagination__compressedText;"),
+    euiPagination__list: _ref,
+    euiPagination__ellipsis: /*#__PURE__*/css("color:", euiTheme.colors.disabledText, ";font-size:", euiFontSize(euiThemeContext, 's').fontSize, ";", logicalCSS('padding-horizontal', euiTheme.size.s), " ", logicalCSS('height', euiTheme.size.l), ";;label:euiPagination__ellipsis;")
   };
 };

package/optimize/es/components/pagination/pagination_button.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["className", "isActive", "isPlaceholder", "pageIndex", "totalPages"];
+var _excluded = ["className", "isActive", "pageIndex", "totalPages"];
 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; }
 /*
@@ -22,13 +22,12 @@ import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiPaginationButton = function EuiPaginationButton(_ref) {
   var className = _ref.className,
     isActive = _ref.isActive,
-    isPlaceholder = _ref.isPlaceholder,
     pageIndex = _ref.pageIndex,
     totalPages = _ref.totalPages,
     rest = _objectWithoutProperties(_ref, _excluded);
   var euiTheme = useEuiTheme();
   var styles = euiPaginationButtonStyles(euiTheme);
-  var paginationButtonCss = [styles.euiPaginationButton, isActive && styles.isActive, isPlaceholder && styles.isPlaceholder];
+  var paginationButtonCss = [styles.euiPaginationButton, isActive && styles.isActive];
   var classes = classNames('euiPaginationButton', className);
   var props = _objectSpread(_objectSpread(_objectSpread({
     css: paginationButtonCss,
@@ -36,7 +35,7 @@ export var EuiPaginationButton = function EuiPaginationButton(_ref) {
     size: 's',
     color: 'text',
     'data-test-subj': "pagination-button-".concat(pageIndex),
-    isDisabled: isPlaceholder || isActive
+    isDisabled: isActive
   }, isActive && {
     'aria-current': true
   }), rest['aria-controls'] && {

package/optimize/es/components/pagination/pagination_button.styles.js

@@ -7,29 +7,12 @@
  */
 
 import { css } from '@emotion/react';
-import { logicalCSS, logicalTextAlignCSS, mathWithUnits, euiFontSize } from '../../global_styling';
-import { euiButtonEmptyColor } from '../../themes/amsterdam/global_styling/mixins';
 export var euiPaginationButtonStyles = function euiPaginationButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var fontSizeS = euiFontSize(euiThemeContext, 's');
-  var halfSizeM = mathWithUnits(euiTheme.size.m, function (x) {
-    return x / 2;
-  });
-  var disabled = euiButtonEmptyColor(euiThemeContext, 'disabled');
-
-  // && to increase specificity. Can likely be removed once EuiButtonEmpty has been converted.
-
   return {
     // Base
-    euiPaginationButton: /*#__PURE__*/css("&&{", fontSizeS, " padding:0;", logicalTextAlignCSS('center'), " border-radius:", euiTheme.border.radius.medium, ";outline-offset:-", euiTheme.focus.width, ";};label:euiPaginationButton;"),
+    euiPaginationButton: /*#__PURE__*/css("outline-offset:-", euiTheme.focus.width, ";;label:euiPaginationButton;"),
     // States
-    isActive: /*#__PURE__*/css("&&{font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.primary, ";.euiButtonEmpty__content{cursor:default;}&&,&&:hover{text-decoration:underline;}};label:isActive;"),
-    isPlaceholder: /*#__PURE__*/css("&&{align-items:baseline;color:", disabled.color, ";", fontSizeS, " ", logicalCSS('padding-top', halfSizeM), " ", logicalCSS('padding-bottom', 0), " ", logicalCSS('padding-horizontal', euiTheme.size.s), " ", logicalCSS('height', euiTheme.size.l), ";};label:isPlaceholder;")
-  };
-};
-export var euiPaginationButtonArrowStyles = function euiPaginationButtonArrowStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return {
-    euiPaginationArrowButton: /*#__PURE__*/css("outline-offset:-", euiTheme.focus.width, ";;label:euiPaginationArrowButton;")
+    isActive: /*#__PURE__*/css("font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.primary, ";&,&:hover{cursor:default;text-decoration:underline;};label:isActive;")
   };
 };

package/optimize/es/components/pagination/pagination_button_arrow.js

@@ -13,7 +13,7 @@ import { EuiButtonIcon } from '../button/button_icon';
 import { keysOf } from '../common';
 import { useEuiI18n } from '../i18n';
 import { useEuiTheme } from '../../services';
-import { euiPaginationButtonArrowStyles } from './pagination_button.styles';
+import { euiPaginationButtonStyles } from './pagination_button.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var typeToIconTypeMap = {
   first: 'arrowStart',
@@ -29,7 +29,7 @@ export var EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {
     ariaControls = _ref.ariaControls,
     onClick = _ref.onClick;
   var euiTheme = useEuiTheme();
-  var styles = euiPaginationButtonArrowStyles(euiTheme);
+  var styles = euiPaginationButtonStyles(euiTheme);
   var labels = {
     first: useEuiI18n('euiPaginationButtonArrow.firstPage', 'First page'),
     previous: useEuiI18n('euiPaginationButtonArrow.previousPage', 'Previous page'),
@@ -42,7 +42,7 @@ export var EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {
     buttonProps['aria-controls'] = ariaControls;
   }
   return ___EmotionJSX(EuiButtonIcon, _extends({
-    css: styles.euiPaginationArrowButton,
+    css: styles.euiPaginationButton,
     className: classNames('euiPaginationArrowButton', className),
     color: "text",
     "aria-label": labels[type],

package/optimize/es/components/progress/progress.js

@@ -48,7 +48,7 @@ export var EuiProgress = function EuiProgress(_ref) {
   var cssStyles = [styles.euiProgress, determinate && styles.native, !determinate && styles.indeterminate, styles[size], styles[position], isNamedColor ? styles[color] : styles.customColor];
   var dataStyles = euiProgressDataStyles(euiTheme);
   var dataCssStyles = [dataStyles.euiProgress__data, size === 'l' && dataStyles[size]];
-  var labelCssStyles = [euiProgressLabelStyles.euiProgress__label];
+  var labelCssStyles = [euiProgressLabelStyles.euiProgress__label, labelProps === null || labelProps === void 0 ? void 0 : labelProps.css];
   var valueTextStyles = euiProgressValueTextStyles(euiTheme);
   var valueTextCssStyles = [valueTextStyles.euiProgress__valueText, isNamedColor ? valueTextStyles[color] : styles.customColor];
   var classes = classNames('euiProgress', className);
@@ -78,10 +78,10 @@ export var EuiProgress = function EuiProgress(_ref) {
     }, label && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX("span", _extends({
         title: innerText,
-        ref: ref,
-        css: labelCssStyles
+        ref: ref
       }, labelProps, {
-        className: labelClasses
+        className: labelClasses,
+        css: labelCssStyles
       }), label);
     }), valueRender && ___EmotionJSX(EuiInnerText, null, function (ref, innerText) {
       return ___EmotionJSX("span", {

package/optimize/es/components/resizable_container/resizable_panel.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _typeof from "@babel/runtime/helpers/typeof";
-var _excluded = ["children", "className", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
+var _excluded = ["children", "className", "css", "id", "isHorizontal", "size", "initialSize", "minSize", "scrollable", "mode", "registration", "onToggleCollapsed", "onToggleCollapsedInternal", "wrapperProps", "hasShadow", "borderRadius", "color", "paddingSize", "wrapperPadding"];
 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; }
 /*
@@ -46,6 +46,7 @@ var getPosition = function getPosition(ref) {
 export var EuiResizablePanel = function EuiResizablePanel(_ref) {
   var children = _ref.children,
     className = _ref.className,
+    css = _ref.css,
     id = _ref.id,
     isHorizontal = _ref.isHorizontal,
     size = _ref.size,
@@ -134,7 +135,7 @@ export var EuiResizablePanel = function EuiResizablePanel(_ref) {
   var axis = isHorizontal ? 'horizontal' : 'vertical';
   var euiTheme = useEuiTheme();
   var styles = euiResizablePanelStyles(euiTheme);
-  var cssStyles = [styles.euiResizablePanel, isCollapsed && styles.collapsed, styles.paddingSizes[wrapperPadding]];
+  var cssStyles = [styles.euiResizablePanel, isCollapsed && styles.collapsed, styles.paddingSizes[wrapperPadding], wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
   var contentStyles = euiResizablePanelContentStyles(euiTheme);
   var contentCssStyles = [contentStyles.euiResizablePanel__content, scrollable && contentStyles.scrollable, isCollapsed && contentStyles.collapsedChildren, isCollapsed && !isCollapsible && contentStyles[axis].collapsed, isCollapsible && contentStyles[axis].hasCollapsibleButton];
   var classes = classNames('euiResizablePanel', wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.className);
@@ -208,9 +209,8 @@ export var EuiResizablePanel = function EuiResizablePanel(_ref) {
       onClick: collapseLeft
     });
   }
-  return ___EmotionJSX("div", _extends({
-    css: cssStyles
-  }, wrapperProps, {
+  return ___EmotionJSX("div", _extends({}, wrapperProps, {
+    css: cssStyles,
     id: panelId,
     ref: divRef,
     style: inlineStyles,

package/optimize/es/global_styling/functions/logicals.json

@@ -9,8 +9,8 @@
   "right": "inset-inline-end",
   "bottom": "inset-block-end",
   "left": "inset-inline-start",
-  "horizontal": "inset-block",
-  "vertical": "inset-inline",
+  "horizontal": "inset-inline",
+  "vertical": "inset-block",
   "margin-left": "margin-inline-start",
   "margin-right": "margin-inline-end",
   "margin-top": "margin-block-start",

package/optimize/es/test/index.d.ts

@@ -3,6 +3,7 @@ declare module '@elastic/eui/optimize/es/test/required_props' {
 	    'aria-label': string;
 	    className: string;
 	    'data-test-subj': string;
+	    css: any;
 	};
 
 }

package/optimize/es/test/required_props.js

@@ -1,3 +1,4 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -6,10 +7,24 @@
  * Side Public License, v 1.
  */
 
+import { css } from '@emotion/react';
+
+// Using a variable name instead of inline causes Emotion to use `euiTestCss`
+// instead of the component name, which is easier to find in snapshots
+var euiTestCss = process.env.NODE_ENV === "production" ? {
+  name: "hzx95w-euiTestCss",
+  styles: "color:red;label:euiTestCss;"
+} : {
+  name: "hzx95w-euiTestCss",
+  styles: "color:red;label:euiTestCss;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+
 // We expect all React components to be able to support these props,
 // which will be rendered as HTML attributes.
 export var requiredProps = {
   'aria-label': 'aria-label',
   className: 'testClass1 testClass2',
-  'data-test-subj': 'test subject string'
+  'data-test-subj': 'test subject string',
+  css: euiTestCss
 };

package/optimize/lib/components/accordion/accordion.js

@@ -162,13 +162,13 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
 
       // Emotion styles
       var buttonStyles = (0, _accordion.euiAccordionButtonStyles)(theme);
-      var cssButtonStyles = [buttonStyles.euiAccordion__button, isDisabled && buttonStyles.disabled];
+      var cssButtonStyles = [buttonStyles.euiAccordion__button, isDisabled && buttonStyles.disabled, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.css];
       var childrenStyles = (0, _accordion.euiAccordionChildrenStyles)(theme);
       var cssChildrenStyles = [childrenStyles.euiAccordion__children, isLoading && childrenStyles.isLoading, paddingSize === 'none' ? undefined : childrenStyles[paddingSize]];
       var childWrapperStyles = (0, _accordion.euiAccordionChildWrapperStyles)(theme);
       var cssChildWrapperStyles = [childWrapperStyles.euiAccordion__childWrapper, isOpen && childWrapperStyles.isOpen];
       var iconButtonStyles = (0, _accordion.euiAccordionIconButtonStyles)(theme);
-      var cssIconButtonStyles = [iconButtonStyles.euiAccordion__iconButton, isOpen && iconButtonStyles.isOpen, _arrowDisplay === 'right' && iconButtonStyles.arrowRight];
+      var cssIconButtonStyles = [iconButtonStyles.euiAccordion__iconButton, isOpen && iconButtonStyles.isOpen, _arrowDisplay === 'right' && iconButtonStyles.arrowRight, arrowProps === null || arrowProps === void 0 ? void 0 : arrowProps.css];
       var optionalActionStyles = (0, _accordion.euiAccordionOptionalActionStyles)();
       var cssOptionalActionStyles = [optionalActionStyles.euiAccordion__optionalAction];
       var spinnerStyles = (0, _accordion.euiAccordionSpinnerStyles)(theme);
@@ -179,10 +179,10 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       var buttonId = (_buttonProps$id = buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.id) !== null && _buttonProps$id !== void 0 ? _buttonProps$id : this.generatedId;
       if (_arrowDisplay !== 'none') {
         iconButton = (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
-          color: "text",
-          css: cssIconButtonStyles
+          color: "text"
         }, arrowProps, {
           className: iconButtonClasses,
+          css: cssIconButtonStyles,
           iconType: "arrowRight",
           onClick: this.onToggle,
           "aria-controls": id,
@@ -213,11 +213,10 @@ var EuiAccordionClass = /*#__PURE__*/function (_Component) {
       } else {
         childrenContent = children;
       }
-      var button = (0, _react2.jsx)(ButtonElement, (0, _extends2.default)({
-        css: cssButtonStyles
-      }, buttonProps, {
+      var button = (0, _react2.jsx)(ButtonElement, (0, _extends2.default)({}, buttonProps, {
         id: buttonId,
         className: buttonClasses,
+        css: cssButtonStyles,
         "aria-controls": id
         // `aria-expanded` is only a valid attribute on interactive controls - axe-core throws a violation otherwise
         ,

package/optimize/lib/components/badge/badge.js

@@ -87,7 +87,7 @@ var EuiBadge = function EuiBadge(_ref) {
   var iconCssStyles = [styles.icon.euiBadge__icon, styles.icon[iconSide]];
   var iconButtonCssStyles = [styles.iconButton.euiBadge__iconButton, styles.iconButton[iconSide]];
   var classes = (0, _classnames.default)('euiBadge', className);
-  var closeClassNames = (0, _classnames.default)('euiBadge__icon', closeButtonProps && closeButtonProps.className);
+  var closeClassNames = (0, _classnames.default)('euiBadge__icon', closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.className);
   var Element = href && !isDisabled ? 'a' : 'button';
   var relObj = {};
   if (href && !isDisabled) {
@@ -120,10 +120,9 @@ var EuiBadge = function EuiBadge(_ref) {
         type: iconType,
         size: "s",
         color: "inherit" // forces the icon to inherit its parent color
-        ,
-        css: iconCssStyles
       }, closeButtonProps, {
-        className: closeClassNames
+        className: closeClassNames,
+        css: [].concat(iconCssStyles, [closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.css])
       })));
     } else {
       optionalIcon = (0, _react2.jsx)(_icon.EuiIcon, {

package/optimize/lib/components/button/button.js

@@ -9,11 +9,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
 var _button = require("../../themes/amsterdam/global_styling/mixins/button");
 var _button_display = require("./button_display/_button_display");
 var _services = require("../../services");
 var _react2 = require("@emotion/react");
-var _excluded = ["buttonRef", "color", "fill"];
+var _excluded = ["className", "buttonRef", "color", "fill"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -30,7 +31,8 @@ exports.SIZES = SIZES;
  * and the logic for element-specific attributes
  */
 var EuiButton = function EuiButton(props) {
-  var buttonRef = props.buttonRef,
+  var className = props.className,
+    buttonRef = props.buttonRef,
     _props$color = props.color,
     _color = _props$color === void 0 ? 'primary' : _props$color,
     fill = props.fill,
@@ -45,6 +47,7 @@ var EuiButton = function EuiButton(props) {
     display: fill ? 'fill' : 'base'
   })[color === 'ghost' ? 'text' : color];
   var buttonFocusStyle = (0, _button.useEuiButtonFocusCSS)();
+  var classes = (0, _classnames.default)('euiButton', className);
   var cssStyles = [buttonColorStyles, buttonFocusStyle];
   if (_color === 'ghost') {
     // INCEPTION: If `ghost`, re-implement with a wrapping dark mode theme provider
@@ -58,9 +61,9 @@ var EuiButton = function EuiButton(props) {
     })));
   }
   return (0, _react2.jsx)(_button_display.EuiButtonDisplay, (0, _extends2.default)({
-    className: "euiButton",
-    ref: buttonRef,
-    css: cssStyles
+    className: classes,
+    css: cssStyles,
+    ref: buttonRef
   }, rest));
 };
 exports.EuiButton = EuiButton;

package/optimize/lib/components/card/card.js

@@ -150,18 +150,18 @@ var EuiCard = function EuiCard(_ref) {
   if (betaBadgeProps !== null && betaBadgeProps !== void 0 && betaBadgeProps.label) {
     var betaStyles = (0, _card.euiCardBetaBadgeStyles)(euiThemeContext, paddingSize);
     optionalBetaCSS = betaStyles.hasBetaBadge;
-    var anchorCSS = [betaStyles.euiCard__betaBadgeAnchor];
-    var badgeCSS = [betaStyles.euiCard__betaBadge];
     var anchorProps = betaBadgeProps.anchorProps,
       cleanedBetaBadgeProps = (0, _objectWithoutProperties2.default)(betaBadgeProps, _excluded2);
+    var anchorCSS = [betaStyles.euiCard__betaBadgeAnchor, anchorProps === null || anchorProps === void 0 ? void 0 : anchorProps.css];
+    var badgeCSS = [betaStyles.euiCard__betaBadge, betaBadgeProps === null || betaBadgeProps === void 0 ? void 0 : betaBadgeProps.css];
     optionalBetaBadgeID = "".concat(ariaId, "BetaBadge");
     optionalBetaBadge = (0, _react2.jsx)(_beta_badge.EuiBetaBadge, (0, _extends2.default)({
-      css: badgeCSS,
       color: isDisabled && !betaBadgeProps.onClick && !betaBadgeProps.href ? 'subdued' : 'hollow'
     }, cleanedBetaBadgeProps, {
-      anchorProps: _objectSpread({
+      css: badgeCSS,
+      anchorProps: _objectSpread(_objectSpread({}, anchorProps), {}, {
         css: anchorCSS
-      }, anchorProps),
+      }),
       id: optionalBetaBadgeID
     }));
 

package/optimize/lib/components/expression/expression.js

@@ -60,10 +60,9 @@ var EuiExpression = function EuiExpression(_ref) {
   var cssIconStyles = [iconStyles.euiExpression__icon, display === 'columns' && iconStyles.columns];
   var classes = (0, _classnames.default)('euiExpression', className);
   var Component = onClick ? 'button' : 'span';
-  var descriptionStyle = descriptionProps && descriptionProps.style;
-  var customWidth = display === 'columns' && descriptionWidth ? _objectSpread({
+  var customWidth = display === 'columns' && descriptionWidth ? {
     flexBasis: descriptionWidth
-  }, descriptionStyle) : undefined;
+  } : undefined;
   var invalidIcon = isInvalid ? (0, _react2.jsx)(_icon.EuiIcon, {
     className: "euiExpression__icon",
     type: "warning",
@@ -74,13 +73,13 @@ var EuiExpression = function EuiExpression(_ref) {
     css: cssStyles,
     className: classes,
     onClick: onClick
-  }, rest), (0, _react2.jsx)("span", (0, _extends2.default)({
-    className: "euiExpression__description",
-    css: cssDescriptionStyles,
-    style: customWidth
-  }, descriptionProps), description), ' ', value && (0, _react2.jsx)("span", (0, _extends2.default)({
-    className: "euiExpression__value",
-    css: cssValueStyles
-  }, valueProps), value), invalidIcon);
+  }, rest), (0, _react2.jsx)("span", (0, _extends2.default)({}, descriptionProps, {
+    className: (0, _classnames.default)('euiExpression__description', descriptionProps === null || descriptionProps === void 0 ? void 0 : descriptionProps.className),
+    css: [].concat(cssDescriptionStyles, [descriptionProps === null || descriptionProps === void 0 ? void 0 : descriptionProps.css]),
+    style: _objectSpread(_objectSpread({}, customWidth), descriptionProps === null || descriptionProps === void 0 ? void 0 : descriptionProps.style)
+  }), description), ' ', value && (0, _react2.jsx)("span", (0, _extends2.default)({}, valueProps, {
+    className: (0, _classnames.default)('euiExpression__value', valueProps === null || valueProps === void 0 ? void 0 : valueProps.className),
+    css: [].concat(cssValueStyles, [valueProps === null || valueProps === void 0 ? void 0 : valueProps.css])
+  }), value), invalidIcon);
 };
 exports.EuiExpression = EuiExpression;

package/optimize/lib/components/flyout/flyout.js

@@ -156,13 +156,12 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
   if (onClose && !hideCloseButton) {
     var closeButtonClasses = (0, _classnames.default)('euiFlyout__closeButton', closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.className);
     var closeButtonStyles = (0, _flyout.euiFlyoutCloseButtonStyles)(euiTheme);
-    var closeButtonCssStyles = [closeButtonStyles.euiFlyout__closeButton, closeButtonStyles[closeButtonPosition], closeButtonPosition === 'outside' && closeButtonStyles.outsideSide[side]];
+    var closeButtonCssStyles = [closeButtonStyles.euiFlyout__closeButton, closeButtonStyles[closeButtonPosition], closeButtonPosition === 'outside' && closeButtonStyles.outsideSide[side], closeButtonProps === null || closeButtonProps === void 0 ? void 0 : closeButtonProps.css];
     closeButton = (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiFlyout.closeAriaLabel",
       default: "Close this dialog"
     }, function (closeAriaLabel) {
       return (0, _react2.jsx)(_button.EuiButtonIcon, (0, _extends2.default)({
-        css: closeButtonCssStyles,
         display: closeButtonPosition === 'outside' ? 'fill' : 'empty',
         iconType: "cross",
         color: "text",
@@ -170,6 +169,7 @@ var EuiFlyout = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref) {
         "data-test-subj": "euiFlyoutCloseButton"
       }, closeButtonProps, {
         className: closeButtonClasses,
+        css: closeButtonCssStyles,
         onClick: function onClick(e) {
           var _closeButtonProps$onC;
           onClose(e.nativeEvent);

package/optimize/lib/components/header/header.js

@@ -10,8 +10,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _header_section = require("./header_section");
+var _services = require("../../services");
 var _header_breadcrumbs = require("./header_breadcrumbs");
+var _header_section = require("./header_section");
+var _header = require("./header.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "className", "sections", "position", "theme"];
 /*
@@ -42,7 +44,10 @@ var EuiHeader = function EuiHeader(_ref) {
     _ref$theme = _ref.theme,
     theme = _ref$theme === void 0 ? 'default' : _ref$theme,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
-  var classes = (0, _classnames.default)('euiHeader', "euiHeader--".concat(theme), "euiHeader--".concat(position), className);
+  var classes = (0, _classnames.default)('euiHeader', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _header.euiHeaderStyles)(euiTheme);
+  var cssStyles = [styles.euiHeader, styles[position], styles[theme]];
   (0, _react.useEffect)(function () {
     if (position === 'fixed') {
       // Increment fixed header counter for each fixed header
@@ -88,6 +93,7 @@ var EuiHeader = function EuiHeader(_ref) {
     contents = children;
   }
   return (0, _react2.jsx)("div", (0, _extends2.default)({
+    css: cssStyles,
     className: classes,
     "data-fixed-header": position === 'fixed' || undefined // Used by EuiFlyouts as a query selector
   }, rest), contents);

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

@@ -0,0 +1,66 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiHeaderVariables = exports.euiHeaderStyles = void 0;
+var _react = require("@emotion/react");
+var _mixins = require("../../themes/amsterdam/global_styling/mixins");
+var _global_styling = require("../../global_styling");
+var _services = require("../../services");
+var _form = require("../form/form.styles");
+/*
+ * 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.
+ */
+
+var euiHeaderVariables = function euiHeaderVariables(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return {
+    height: euiTheme.size.xxxl,
+    childHeight: euiTheme.size.xxl
+  };
+};
+exports.euiHeaderVariables = euiHeaderVariables;
+var euiHeaderStyles = function euiHeaderStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var _euiHeaderVariables = euiHeaderVariables(euiThemeContext),
+    height = _euiHeaderVariables.height;
+
+  // 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' ? (0, _services.shade)(euiTheme.colors.emptyShade, 0.35) : (0, _services.shade)(euiTheme.border.color, 0.03);
+  return {
+    euiHeader: /*#__PURE__*/(0, _react.css)("display:flex;justify-content:space-between;", (0, _global_styling.logicalCSS)('height', height), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _mixins.euiShadowSmall)(euiThemeContext), ";;label:euiHeader;"),
+    // Position
+    static: /*#__PURE__*/(0, _react.css)("z-index:", Number(euiTheme.levels.header) - 1, ";position:relative;;label:static;"),
+    fixed: /*#__PURE__*/(0, _react.css)("z-index:", euiTheme.levels.header, ";position:fixed;", (0, _global_styling.logicalCSS)('top', 0), " ", (0, _global_styling.logicalCSS)('horizontal', 0), " &+[data-fixed-header]{", (0, _global_styling.logicalCSS)('top', height), ";};label:fixed;"),
+    // Theme
+    default: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";", (0, _global_styling.logicalCSS)('border-bottom', "".concat(euiTheme.border.width.thin, " solid ").concat(borderColor)), ";;label:default;"),
+    dark: /*#__PURE__*/(0, _react.css)(euiHeaderDarkStyles(euiThemeContext, borderColor), ";label:dark;")
+  };
+};
+
+/**
+ * The `dark` header is (currently) a bit of a special case. We don't
+ * actually want to use <EuiThemeProvider colorMode="dark"> inside it
+ * because that will affect popovers and `SelectableSitewideTemplate`
+ * as well, which we do not necessarily want to do (?)
+ *
+ * It's also possible that the dark header will go away or become unused
+ * by Kibana in the near future, at which point we can remove this
+ */
+exports.euiHeaderStyles = euiHeaderStyles;
+var euiHeaderDarkStyles = function euiHeaderDarkStyles(euiThemeContext, defaultBorderColor) {
+  var euiTheme = euiThemeContext.euiTheme,
+    colorMode = euiThemeContext.colorMode;
+  var _euiFormVariables = (0, _form.euiFormVariables)(euiThemeContext),
+    controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
+  var backgroundColor = colorMode === 'DARK' ? (0, _services.shade)(euiTheme.colors.lightestShade, 0.5) : (0, _services.shade)(euiTheme.colors.darkestShade, 0.28);
+  var borderColor = colorMode === 'DARK' ? defaultBorderColor : backgroundColor;
+  return "\n    background-color: ".concat(backgroundColor, ";\n    ").concat((0, _global_styling.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((0, _services.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((0, _services.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((0, _services.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((0, _services.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/lib/components/header/{header_logo.js → header_logo/header_logo.js}

@@ -9,9 +9,10 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
-var _icon = require("../icon");
-var _services = require("../../services");
-var _href_validator = require("../../services/security/href_validator");
+var _services = require("../../../services");
+var _href_validator = require("../../../services/security/href_validator");
+var _icon = require("../../icon");
+var _header_logo = require("./header_logo.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["iconType", "iconTitle", "href", "rel", "target", "children", "className"];
 /*
@@ -33,6 +34,8 @@ var EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     className = _ref.className,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var classes = (0, _classnames.default)('euiHeaderLogo', className);
+  var euiTheme = (0, _services.useEuiTheme)();
+  var styles = (0, _header_logo.euiHeaderLogoStyles)(euiTheme);
   var secureRel = (0, _services.getSecureRelForTarget)({
     href: href,
     rel: rel,
@@ -43,6 +46,7 @@ var EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     href: isHrefValid ? href : '',
     rel: secureRel,
     target: target,
+    css: styles.euiHeaderLogo,
     className: classes
   }, rest), (0, _react2.jsx)(_icon.EuiIcon, {
     "aria-label": iconTitle,
@@ -50,6 +54,7 @@ var EuiHeaderLogo = function EuiHeaderLogo(_ref) {
     size: "l",
     type: iconType
   }), children && (0, _react2.jsx)("span", {
+    css: styles.euiHeaderLogo__text,
     className: "euiHeaderLogo__text"
   }, children));
 };