@elastic/eui 83.0.0 → 83.1.0

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

@@ -0,0 +1,33 @@
+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 EuiIconSparkles = function EuiIconSparkles(_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: "m5.016 4.383.035-.093a.492.492 0 0 1 .898 0l.035.093c.048.128.072.192.097.253a5.9 5.9 0 0 0 3.536 3.38l.093.035a.492.492 0 0 1 0 .898l-.093.035a5.9 5.9 0 0 0-3.536 3.38c-.025.06-.049.125-.097.253l-.035.093a.492.492 0 0 1-.898 0l-.035-.093c-.048-.128-.072-.192-.097-.253a5.9 5.9 0 0 0-3.536-3.38 2.175 2.175 0 0 1-.093-.035.492.492 0 0 1 0-.898l.093-.035c.128-.048.192-.072.253-.097a5.9 5.9 0 0 0 3.38-3.536Zm6.769-2.213a.968.968 0 0 1 .016-.041.219.219 0 0 1 .398 0 2.622 2.622 0 0 0 1.518 1.613l.113.043a.272.272 0 0 1 .04.016.219.219 0 0 1 0 .398.272.272 0 0 1-.04.016l-.113.043a2.622 2.622 0 0 0-1.502 1.572.968.968 0 0 1-.016.04.219.219 0 0 1-.398 0 2.622 2.622 0 0 0-1.518-1.613l-.113-.042a.272.272 0 0 1-.04-.016.219.219 0 0 1 0-.398.272.272 0 0 1 .04-.016l.113-.043a2.622 2.622 0 0 0 1.502-1.572Zm-.555 8.043.02-.052a.273.273 0 0 1 .5 0l.02.052.053.14a3.275 3.275 0 0 0 1.824 1.824l.14.054c.03.01.044.016.052.02a.273.273 0 0 1 0 .498 1.248 1.248 0 0 1-.052.02c-.07.027-.107.04-.14.054a3.279 3.279 0 0 0-1.824 1.824l-.054.14a.409.409 0 0 1-.02.052.273.273 0 0 1-.498 0 1.248 1.248 0 0 1-.02-.052c-.027-.07-.04-.107-.054-.14a3.279 3.279 0 0 0-1.824-1.824l-.14-.054a1.24 1.24 0 0 1-.052-.02.273.273 0 0 1 0-.498 1.24 1.24 0 0 1 .052-.02l.14-.054a3.279 3.279 0 0 0 1.824-1.824l.054-.14Z"
+  }));
+};
+export var icon = EuiIconSparkles;

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

@@ -210,6 +210,7 @@ export var EuiIconClass = /*#__PURE__*/function (_PureComponent) {
           src: icon,
           className: classes,
           css: cssStyles,
+          style: style,
           tabIndex: tabIndex
         }, rest));
       } else {

package/optimize/es/components/icon/icon_glyphs.a11y.js

@@ -15,7 +15,7 @@ import { EuiIcon } from './icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 describe('EuiIcons', function () {
   describe('Automated accessibility check for glyph icons', function () {
-    var GlyphIcons = ['accessibility', 'aggregate', 'analyzeEvent', 'annotation', 'apmTrace', 'apps', 'arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowStart', 'arrowEnd', 'article', 'asterisk', 'beaker', 'bell', 'bellSlash', 'beta', 'bolt', 'boxesHorizontal', 'boxesVertical', 'branch', 'branchUser', 'broom', 'brush', 'bug', 'bullseye', 'calendar', 'check', 'checkInCircleFilled', 'cheer', 'clock', 'cloudDrizzle', 'cloudStormy', 'cloudSunny', 'cluster', 'color', 'compute', 'console', 'container', 'continuityAbove', 'continuityAboveBelow', 'continuityBelow', 'continuityWithin', 'controlsHorizontal', 'controlsVertical', 'copy', 'copyClipboard', 'cross', 'crosshairs', 'currency', 'cut', 'database', 'desktop', 'discuss', 'document', 'documents', 'documentEdit', 'documentation', 'dot', 'dotInCircle', 'doubleArrowLeft', 'doubleArrowRight', 'download', 'email', 'empty', 'eql', 'eraser', 'exit', 'expand', 'expandMini', 'exportAction', 'eye', 'eyeClosed', 'faceHappy', 'faceNeutral', 'faceSad', 'filter', 'filterExclude', 'filterIgnore', 'filterInclude', 'filterInCircle', 'flag', 'fold', 'folderCheck', 'folderClosed', 'folderExclamation', 'folderOpen', 'frameNext', 'framePrevious', 'fullScreen', 'fullScreenExit', 'function', 'gear', 'glasses', 'globe', 'grab', 'grabHorizontal', 'grid', 'heart', 'heatmap', 'help', 'home', 'iInCircle', 'image', 'importAction', 'indexClose', 'indexEdit', 'indexFlush', 'indexMapping', 'indexOpen', 'indexRuntime', 'indexSettings', 'indexTemporary', 'infinity', 'inputOutput', 'inspect', 'invert', 'ip', 'keyboard', 'kqlField', 'kqlFunction', 'kqlOperand', 'kqlSelector', 'kqlValue', 'kubernetesNode', 'kubernetesPod', 'launch', 'layers', 'lettering', 'lineDashed', 'lineDotted', 'lineSolid', 'link', 'list', 'listAdd', 'lock', 'lockOpen', 'logstashFilter', 'logstashIf', 'logstashInput', 'logstashOutput', 'logstashQueue', 'magnifyWithExclamation', 'magnifyWithMinus', 'magnifyWithPlus', 'magnet', 'mapMarker', 'memory', 'merge', 'menu', 'menuDown', 'menuLeft', 'menuRight', 'menuUp', 'minimize', 'minus', 'minusInCircle', 'minusInCircleFilled', 'mobile', 'moon', 'namespace', 'nested', 'node', 'number', 'offline', 'online', 'package', 'pageSelect', 'pagesSelect', 'paperClip', 'partial', 'pause', 'payment', 'pencil', 'percent', 'pin', 'pinFilled', 'play', 'playFilled', 'plus', 'plusInCircle', 'plusInCircleFilled', 'popout', 'push', 'questionInCircle', 'quote', 'refresh', 'reporter', 'returnKey', 'save', 'scale', 'search', 'securitySignal', 'securitySignalDetected', 'securitySignalResolved', 'sessionViewer', 'shard', 'share', 'snowflake', 'sortable', 'sortAscending', 'sortDescending', 'sortDown', 'sortLeft', 'sortRight', 'sortUp', 'spaces', 'starEmpty', 'starEmptySpace', 'starFilled', 'starFilledSpace', 'starMinusEmpty', 'starMinusFilled', 'starPlusEmpty', 'starPlusFilled', 'stats', 'stop', 'stopFilled', 'stopSlash', 'storage', 'string', 'submodule', 'sun', 'symlink', 'tableOfContents', 'tableDensityExpanded', 'tableDensityCompact', 'tableDensityNormal', 'tag', 'tear', 'temperature', 'timeline', 'timelineWithArrow', 'timeRefresh', 'timeslider', 'training', 'trash', 'unfold', 'unlink', 'user', 'userAvatar', 'users', 'vector', 'videoPlayer', 'visArea', 'visAreaStacked', 'visBarHorizontal', 'visBarHorizontalStacked', 'visBarVertical', 'visBarVerticalStacked', 'visGauge', 'visGoal', 'visLine', 'visMapCoordinate', 'visMapRegion', 'visMetric', 'visPie', 'visTable', 'visTagCloud', 'visText', 'visTimelion', 'visVega', 'visVisualBuilder', 'warning', 'wordWrap', 'wordWrapDisabled', 'wrench'];
+    var GlyphIcons = ['accessibility', 'aggregate', 'analyzeEvent', 'annotation', 'apmTrace', 'apps', 'arrowDown', 'arrowLeft', 'arrowRight', 'arrowUp', 'arrowStart', 'arrowEnd', 'article', 'asterisk', 'beaker', 'bell', 'bellSlash', 'beta', 'bolt', 'boxesHorizontal', 'boxesVertical', 'branch', 'branchUser', 'broom', 'brush', 'bug', 'bullseye', 'calendar', 'check', 'checkInCircleFilled', 'cheer', 'clock', 'cloudDrizzle', 'cloudStormy', 'cloudSunny', 'cluster', 'color', 'compute', 'console', 'container', 'continuityAbove', 'continuityAboveBelow', 'continuityBelow', 'continuityWithin', 'controlsHorizontal', 'controlsVertical', 'copy', 'copyClipboard', 'cross', 'crosshairs', 'currency', 'cut', 'database', 'desktop', 'discuss', 'document', 'documents', 'documentEdit', 'documentation', 'dot', 'dotInCircle', 'doubleArrowLeft', 'doubleArrowRight', 'download', 'email', 'empty', 'eql', 'eraser', 'exit', 'expand', 'expandMini', 'exportAction', 'eye', 'eyeClosed', 'faceHappy', 'faceNeutral', 'faceSad', 'filter', 'filterExclude', 'filterIgnore', 'filterInclude', 'filterInCircle', 'flag', 'fold', 'folderCheck', 'folderClosed', 'folderExclamation', 'folderOpen', 'frameNext', 'framePrevious', 'fullScreen', 'fullScreenExit', 'function', 'gear', 'glasses', 'globe', 'grab', 'grabHorizontal', 'grid', 'heart', 'heatmap', 'help', 'home', 'iInCircle', 'image', 'importAction', 'indexClose', 'indexEdit', 'indexFlush', 'indexMapping', 'indexOpen', 'indexRuntime', 'indexSettings', 'indexTemporary', 'infinity', 'inputOutput', 'inspect', 'invert', 'ip', 'keyboard', 'kqlField', 'kqlFunction', 'kqlOperand', 'kqlSelector', 'kqlValue', 'kubernetesNode', 'kubernetesPod', 'launch', 'layers', 'lettering', 'lineDashed', 'lineDotted', 'lineSolid', 'link', 'list', 'listAdd', 'lock', 'lockOpen', 'logstashFilter', 'logstashIf', 'logstashInput', 'logstashOutput', 'logstashQueue', 'magnifyWithExclamation', 'magnifyWithMinus', 'magnifyWithPlus', 'magnet', 'mapMarker', 'memory', 'merge', 'menu', 'menuDown', 'menuLeft', 'menuRight', 'menuUp', 'minimize', 'minus', 'minusInCircle', 'minusInCircleFilled', 'mobile', 'moon', 'namespace', 'nested', 'node', 'number', 'offline', 'online', 'package', 'pageSelect', 'pagesSelect', 'paperClip', 'partial', 'pause', 'payment', 'pencil', 'percent', 'pin', 'pinFilled', 'play', 'playFilled', 'plus', 'plusInCircle', 'plusInCircleFilled', 'popout', 'push', 'questionInCircle', 'quote', 'refresh', 'reporter', 'returnKey', 'save', 'scale', 'search', 'securitySignal', 'securitySignalDetected', 'securitySignalResolved', 'sessionViewer', 'shard', 'share', 'snowflake', 'sortable', 'sortAscending', 'sortDescending', 'sortDown', 'sortLeft', 'sortRight', 'sortUp', 'spaces', 'sparkles', 'starEmpty', 'starEmptySpace', 'starFilled', 'starFilledSpace', 'starMinusEmpty', 'starMinusFilled', 'starPlusEmpty', 'starPlusFilled', 'stats', 'stop', 'stopFilled', 'stopSlash', 'storage', 'string', 'submodule', 'sun', 'symlink', 'tableOfContents', 'tableDensityExpanded', 'tableDensityCompact', 'tableDensityNormal', 'tag', 'tear', 'temperature', 'timeline', 'timelineWithArrow', 'timeRefresh', 'timeslider', 'training', 'trash', 'unfold', 'unlink', 'user', 'userAvatar', 'users', 'vector', 'videoPlayer', 'visArea', 'visAreaStacked', 'visBarHorizontal', 'visBarHorizontalStacked', 'visBarVertical', 'visBarVerticalStacked', 'visGauge', 'visGoal', 'visLine', 'visMapCoordinate', 'visMapRegion', 'visMetric', 'visPie', 'visTable', 'visTagCloud', 'visText', 'visTimelion', 'visVega', 'visVisualBuilder', 'warning', 'wordWrap', 'wordWrapDisabled', 'wrench'];
     var GlyphGrid = function GlyphGrid() {
       return ___EmotionJSX("div", null, GlyphIcons.map(function (glyph) {
         return ___EmotionJSX(EuiIcon, {

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

@@ -353,6 +353,7 @@ export var typeToPathMap = {
   sortable: 'sortable',
   spaces: 'spaces',
   spacesApp: 'app_spaces',
+  sparkles: 'sparkles',
   sqlApp: 'app_sql',
   starEmpty: 'star_empty',
   starEmptySpace: 'star_empty_space',

package/optimize/es/components/image/image_fullscreen_wrapper.js

@@ -32,7 +32,7 @@ export var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref)
     onFullScreen = _ref.onFullScreen;
   var euiTheme = useEuiTheme();
   var styles = euiImageFullscreenWrapperStyles(euiTheme);
-  var cssStyles = [styles.euiImageFullscreenWrapper];
+  var cssStyles = [styles.euiImageFullscreenWrapper, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
   var classes = classNames('euiImageFullScreenWrapper', wrapperProps && wrapperProps.className);
   var onKeyDown = function onKeyDown(event) {
     if (event.key === keys.ESCAPE) {
@@ -58,10 +58,10 @@ export var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref)
     preventScrollOnFocus: true,
     onClickOutside: closeFullScreen
   }, ___EmotionJSX(React.Fragment, null, ___EmotionJSX("figure", _extends({
-    "aria-label": optionalCaptionText,
-    css: cssStyles
+    "aria-label": optionalCaptionText
   }, wrapperProps, {
-    className: classes
+    className: classes,
+    css: cssStyles
   }), ___EmotionJSX(EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,

package/optimize/es/components/image/image_wrapper.js

@@ -36,16 +36,16 @@ export var EuiImageWrapper = function EuiImageWrapper(_ref) {
   var classes = classNames('euiImageWrapper', wrapperProps && wrapperProps.className);
   var euiTheme = useEuiTheme();
   var styles = euiImageWrapperStyles(euiTheme);
-  var cssFigureStyles = [styles.euiImageWrapper, float && styles[float], margin && styles[margin], allowFullScreen && styles.allowFullScreen, isFullWidth && styles.fullWidth];
+  var cssFigureStyles = [styles.euiImageWrapper, float && styles[float], margin && styles[margin], allowFullScreen && styles.allowFullScreen, isFullWidth && styles.fullWidth, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
   var _useInnerText = useInnerText(),
     _useInnerText2 = _slicedToArray(_useInnerText, 2),
     optionalCaptionRef = _useInnerText2[0],
     optionalCaptionText = _useInnerText2[1];
   return ___EmotionJSX("figure", _extends({
-    "aria-label": optionalCaptionText,
-    css: cssFigureStyles
+    "aria-label": optionalCaptionText
   }, wrapperProps, {
-    className: classes
+    className: classes,
+    css: cssFigureStyles
   }), allowFullScreen ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX(EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,

package/optimize/es/components/inline_edit/inline_edit_form.js

@@ -42,6 +42,7 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     children = _ref.children,
     sizes = _ref.sizes,
     defaultValue = _ref.defaultValue,
+    placeholder = _ref.placeholder,
     inputAriaLabel = _ref.inputAriaLabel,
     startWithEditOpen = _ref.startWithEditOpen,
     readModeProps = _ref.readModeProps,
@@ -53,8 +54,6 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     isReadOnly = _ref.isReadOnly;
   var classes = classNames('euiInlineEdit', className);
   var euiTheme = useEuiTheme();
-  var readModeStyles = euiInlineEditReadModeStyles(euiTheme);
-  var readModeCssStyles = [readModeStyles.euiInlineEditReadMode, isReadOnly && readModeStyles.isReadOnly];
   var _euiFormVariables = euiFormVariables(euiTheme),
     controlHeight = _euiFormVariables.controlHeight,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
@@ -83,6 +82,8 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     _useState6 = _slicedToArray(_useState5, 2),
     readModeValue = _useState6[0],
     setReadModeValue = _useState6[1];
+  var readModeStyles = euiInlineEditReadModeStyles(euiTheme);
+  var readModeCssStyles = [readModeStyles.euiInlineEditReadMode, isReadOnly && readModeStyles.isReadOnly, placeholder && !readModeValue && readModeStyles.hasPlaceholder];
   var activateEditMode = function activateEditMode() {
     setIsEditing(true);
     // Waits a tick for state to settle and the focus target to render
@@ -178,7 +179,8 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     compressed: sizes.compressed,
     isInvalid: isInvalid,
     isLoading: isLoading,
-    "data-test-subj": "euiInlineEditModeInput"
+    "data-test-subj": "euiInlineEditModeInput",
+    placeholder: placeholder
   }, editModeProps === null || editModeProps === void 0 ? void 0 : editModeProps.inputProps, {
     inputRef: setEditModeRefs,
     onChange: function onChange(e) {
@@ -265,7 +267,7 @@ export var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
       activateEditMode();
       readModeProps === null || readModeProps === void 0 ? void 0 : (_readModeProps$onClic = readModeProps.onClick) === null || _readModeProps$onClic === void 0 ? void 0 : _readModeProps$onClic.call(readModeProps, e);
     }
-  }), children(readModeValue)), ___EmotionJSX("span", {
+  }), children(readModeValue || placeholder)), ___EmotionJSX("span", {
     id: readModeDescribedById,
     hidden: true
   }, !isReadOnly && ___EmotionJSX(EuiI18n, {

package/optimize/es/components/inline_edit/inline_edit_form.styles.js

@@ -7,11 +7,13 @@
  */
 
 import { css } from '@emotion/react';
+import { tint } from '../../services';
 export var euiInlineEditReadModeStyles = function euiInlineEditReadModeStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
     euiInlineEditReadMode: /*#__PURE__*/css(";label:euiInlineEditReadMode;"),
     // Override the cursor and allow users to highlight text when in the read only state
-    isReadOnly: /*#__PURE__*/css("&:disabled{cursor:text;color:", euiTheme.colors.text, ";user-select:text;};label:isReadOnly;")
+    isReadOnly: /*#__PURE__*/css("&:disabled{cursor:text;color:", euiTheme.colors.text, ";user-select:text;};label:isReadOnly;"),
+    hasPlaceholder: /*#__PURE__*/css(".euiText,.euiTitle{color:", tint(euiTheme.colors.subduedText, 0.08), ";};label:hasPlaceholder;")
   };
 };

package/optimize/es/components/inline_edit/inline_edit_text.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 = ["children", "className", "size", "defaultValue", "inputAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps", "isLoading", "isInvalid", "isReadOnly"];
+var _excluded = ["children", "className", "size", "defaultValue", "placeholder", "inputAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps", "isLoading", "isInvalid", "isReadOnly"];
 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; }
 /*
@@ -25,6 +25,7 @@ export var EuiInlineEditText = function EuiInlineEditText(_ref) {
     _ref$size = _ref.size,
     size = _ref$size === void 0 ? 'm' : _ref$size,
     defaultValue = _ref.defaultValue,
+    placeholder = _ref.placeholder,
     inputAriaLabel = _ref.inputAriaLabel,
     startWithEditOpen = _ref.startWithEditOpen,
     _readModeProps = _ref.readModeProps,
@@ -48,6 +49,7 @@ export var EuiInlineEditText = function EuiInlineEditText(_ref) {
   var formProps = {
     sizes: sizes,
     defaultValue: defaultValue,
+    placeholder: placeholder,
     inputAriaLabel: inputAriaLabel,
     startWithEditOpen: startWithEditOpen,
     readModeProps: readModeProps,

package/optimize/es/components/inline_edit/inline_edit_title.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 = ["children", "className", "size", "heading", "defaultValue", "inputAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps", "isLoading", "isInvalid", "isReadOnly"];
+var _excluded = ["children", "className", "size", "heading", "defaultValue", "placeholder", "inputAriaLabel", "startWithEditOpen", "readModeProps", "editModeProps", "isLoading", "isInvalid", "isReadOnly"];
 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; }
 /*
@@ -27,6 +27,7 @@ export var EuiInlineEditTitle = function EuiInlineEditTitle(_ref) {
     size = _ref$size === void 0 ? 'm' : _ref$size,
     heading = _ref.heading,
     defaultValue = _ref.defaultValue,
+    placeholder = _ref.placeholder,
     inputAriaLabel = _ref.inputAriaLabel,
     startWithEditOpen = _ref.startWithEditOpen,
     _readModeProps = _ref.readModeProps,
@@ -55,6 +56,7 @@ export var EuiInlineEditTitle = function EuiInlineEditTitle(_ref) {
   var formProps = {
     sizes: sizes,
     defaultValue: defaultValue,
+    placeholder: placeholder,
     inputAriaLabel: inputAriaLabel,
     startWithEditOpen: startWithEditOpen,
     readModeProps: readModeProps,

package/optimize/es/components/key_pad_menu/key_pad_menu.js

@@ -17,23 +17,25 @@ import { useEuiTheme } from '../../services';
 import { euiKeyPadMenuStyles } from './key_pad_menu.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
+  var _checkable$legendProp;
   var children = _ref.children,
     className = _ref.className,
     checkable = _ref.checkable,
     rest = _objectWithoutProperties(_ref, _excluded);
+  var hasCheckableConfig = _typeof(checkable) === 'object';
   var classes = classNames('euiKeyPadMenu', className);
   var theme = useEuiTheme();
   var styles = euiKeyPadMenuStyles(theme);
   var cssStyles = [styles.euiKeyPadMenu];
-  var legend = _typeof(checkable) === 'object' && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({
-    css: styles.euiKeyPadMenu__legend
-  }, checkable.legendProps, {
+  var legendCssStyles = [styles.euiKeyPadMenu__legend, hasCheckableConfig && (checkable === null || checkable === void 0 ? void 0 : (_checkable$legendProp = checkable.legendProps) === null || _checkable$legendProp === void 0 ? void 0 : _checkable$legendProp.css)];
+  var legend = hasCheckableConfig && checkable.legend ? ___EmotionJSX(EuiFormLabel, _extends({}, checkable.legendProps, {
+    css: legendCssStyles,
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? ___EmotionJSX("fieldset", _extends({
     css: cssStyles,
     className: classes,
-    "aria-label": _typeof(checkable) === 'object' ? checkable.ariaLegend : undefined
+    "aria-label": hasCheckableConfig ? checkable.ariaLegend : undefined
   }, rest), legend, children) : ___EmotionJSX("ul", _extends({
     css: cssStyles,
     className: classes

package/optimize/es/components/list_group/list_group_item.js

@@ -55,16 +55,15 @@ export var EuiListGroupItem = function EuiListGroupItem(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var euiTheme = useEuiTheme();
   var iconStyles = euiListGroupItemIconStyles(euiTheme);
-  var cssIconStyles = [iconStyles.euiListGroupItem__icon];
+  var cssIconStyles = [iconStyles.euiListGroupItem__icon, iconProps === null || iconProps === void 0 ? void 0 : iconProps.css];
   var iconNode;
   if (iconType) {
     iconNode = ___EmotionJSX(EuiIcon, _extends({
       color: "inherit" // forces the icon to inherit its parent color
-      ,
-      css: cssIconStyles
     }, iconProps, {
       type: iconType,
-      className: classNames('euiListGroupItem__icon', iconProps === null || iconProps === void 0 ? void 0 : iconProps.className)
+      className: classNames('euiListGroupItem__icon', iconProps === null || iconProps === void 0 ? void 0 : iconProps.className),
+      css: cssIconStyles
     }));
     if (icon) {
       console.warn('Both `iconType` and `icon` were passed to EuiListGroupItem but only one can exist. The `iconType` was used.');

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "restrictWidth", "className", "component", "panelled", "panelProps", "paddingSize", "borderRadius"];
+var _excluded = ["children", "restrictWidth", "className", "css", "component", "panelled", "panelProps", "paddingSize", "borderRadius"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -21,6 +21,7 @@ export var EuiPageBody = function EuiPageBody(_ref) {
     _ref$restrictWidth = _ref.restrictWidth,
     restrictWidth = _ref$restrictWidth === void 0 ? false : _ref$restrictWidth,
     className = _ref.className,
+    css = _ref.css,
     _ref$component = _ref.component,
     Component = _ref$component === void 0 ? 'div' : _ref$component,
     panelled = _ref.panelled,
@@ -32,20 +33,28 @@ export var EuiPageBody = function EuiPageBody(_ref) {
     rest = _objectWithoutProperties(_ref, _excluded);
   // Set max-width as a style prop
   var widthStyles = setStyleForRestrictedPageWidth(restrictWidth, rest === null || rest === void 0 ? void 0 : rest.style);
+
+  // Shared
+  var classes = classNames('euiPageBody', className);
   var styles = euiPageBodyStyles();
+  var cssStyles = [styles.euiPageBody, restrictWidth && styles.restrictWidth];
+
+  // Panelled
+  var panelClasses = classNames(classes, panelProps === null || panelProps === void 0 ? void 0 : panelProps.className);
+  var panelCssStyles = [].concat(cssStyles, [panelProps === null || panelProps === void 0 ? void 0 : panelProps.css, css]);
+
+  // Non-panelled
   var padding = useEuiPaddingCSS()[paddingSize];
-  var classes = classNames('euiPageBody', className);
-  var panelCSS = [styles.euiPageBody, restrictWidth && styles.restrictWidth];
-  var componentCSS = [].concat(panelCSS, [padding]);
+  var componentCssStyles = [].concat(cssStyles, [padding, css]);
   return panelled ? ___EmotionJSX(EuiPanel, _extends({
-    className: classes,
-    css: panelCSS,
     borderRadius: borderRadius,
     paddingSize: paddingSize
-  }, panelProps, rest), children) : ___EmotionJSX(Component, _extends({
+  }, panelProps, rest, {
+    className: panelClasses,
+    css: panelCssStyles
+  }), children) : ___EmotionJSX(Component, _extends({}, rest, {
     className: classes,
-    css: componentCSS
-  }, rest, {
+    css: componentCssStyles,
     style: widthStyles
   }), children);
 };

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

@@ -110,10 +110,11 @@ export var EuiPageHeaderContent = function EuiPageHeaderContent(_ref) {
   })) : undefined;
   var pageTitleNode;
   if (pageTitle) {
+    var iconCssStyles = [contentStyles.euiPageHeaderContent__titleIcon, iconProps === null || iconProps === void 0 ? void 0 : iconProps.css];
     var icon = iconType ? ___EmotionJSX(EuiIcon, _extends({
-      size: "xl",
-      css: contentStyles.euiPageHeaderContent__titleIcon
+      size: "xl"
     }, iconProps, {
+      css: iconCssStyles,
       type: iconType
     })) : undefined;
     pageTitleNode = ___EmotionJSX(EuiTitle, _extends({}, pageTitleProps, {

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

@@ -41,7 +41,7 @@ export var EuiPageSection = function EuiPageSection(_ref) {
   var colors = useEuiBackgroundColorCSS();
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = euiPageSectionContentStyles();
-  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, (contentProps === null || contentProps === void 0 ? void 0 : contentProps.css) && contentProps.css];
+  var cssContentStyles = [contentStyles.euiPageSection__content, blockPadding[paddingSize], bottomBorder === true && styles.border, alignment.toLowerCase().includes('center') && contentStyles.center, restrictWidth && contentStyles.restrictWidth, contentProps === null || contentProps === void 0 ? void 0 : contentProps.css];
   return ___EmotionJSX(Component, _extends({
     css: cssStyles
   }, rest), ___EmotionJSX("div", _extends({}, contentProps, {

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;