@elastic/eui 82.2.1 → 83.1.0

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

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiHeaderLogoStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../../global_styling");
+var _title = require("../../title/title.styles");
+var _header = require("../header.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 euiHeaderLogoStyles = function euiHeaderLogoStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiHeaderVariables = (0, _header.euiHeaderVariables)(euiThemeContext),
+    childHeight = _euiHeaderVariables.childHeight;
+  return {
+    euiHeaderLogo: /*#__PURE__*/(0, _react.css)("position:relative;", (0, _global_styling.logicalCSS)('height', childHeight), " line-height:", childHeight, ";", (0, _global_styling.logicalCSS)('min-width', childHeight), " padding-inline:", euiTheme.size.s, ";display:inline-flex;align-items:center;white-space:nowrap;", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.xs), ";};label:euiHeaderLogo;"),
+    euiHeaderLogo__text: /*#__PURE__*/(0, _react.css)((0, _title.euiTitle)(euiThemeContext, 'xxs'), " ", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.base), " ", (0, _global_styling.euiBreakpoint)(euiThemeContext, ['xs']), "{", (0, _global_styling.logicalCSS)('padding-left', euiTheme.size.s), ";};label:euiHeaderLogo__text;")
+  };
+};
+exports.euiHeaderLogoStyles = euiHeaderLogoStyles;

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

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+Object.defineProperty(exports, "EuiHeaderLogo", {
+  enumerable: true,
+  get: function get() {
+    return _header_logo.EuiHeaderLogo;
+  }
+});
+var _header_logo = require("./header_logo");

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+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
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconSparkles = function EuiIconSparkles(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("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"
+  }));
+};
+var icon = EuiIconSparkles;
+exports.icon = icon;

package/optimize/lib/components/icon/icon.js

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

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

@@ -18,7 +18,7 @@ var _react2 = require("@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 (0, _react2.jsx)("div", null, GlyphIcons.map(function (glyph) {
         return (0, _react2.jsx)(_icon.EuiIcon, {

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

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

package/optimize/lib/components/icon/svgs/sparkles.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+  <path fill-rule="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"/>
+</svg>

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

@@ -39,7 +39,7 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
     onFullScreen = _ref.onFullScreen;
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _image_fullscreen_wrapper.euiImageFullscreenWrapperStyles)(euiTheme);
-  var cssStyles = [styles.euiImageFullscreenWrapper];
+  var cssStyles = [styles.euiImageFullscreenWrapper, wrapperProps === null || wrapperProps === void 0 ? void 0 : wrapperProps.css];
   var classes = (0, _classnames.default)('euiImageFullScreenWrapper', wrapperProps && wrapperProps.className);
   var onKeyDown = function onKeyDown(event) {
     if (event.key === _services.keys.ESCAPE) {
@@ -65,10 +65,10 @@ var EuiImageFullScreenWrapper = function EuiImageFullScreenWrapper(_ref) {
     preventScrollOnFocus: true,
     onClickOutside: closeFullScreen
   }, (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("figure", (0, _extends2.default)({
-    "aria-label": optionalCaptionText,
-    css: cssStyles
+    "aria-label": optionalCaptionText
   }, wrapperProps, {
-    className: classes
+    className: classes,
+    css: cssStyles
   }), (0, _react2.jsx)(_image_button.EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,

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

@@ -43,16 +43,16 @@ var EuiImageWrapper = function EuiImageWrapper(_ref) {
   var classes = (0, _classnames.default)('euiImageWrapper', wrapperProps && wrapperProps.className);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _image_wrapper.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 = (0, _inner_text.useInnerText)(),
     _useInnerText2 = (0, _slicedToArray2.default)(_useInnerText, 2),
     optionalCaptionRef = _useInnerText2[0],
     optionalCaptionText = _useInnerText2[1];
   return (0, _react2.jsx)("figure", (0, _extends2.default)({
-    "aria-label": optionalCaptionText,
-    css: cssFigureStyles
+    "aria-label": optionalCaptionText
   }, wrapperProps, {
-    className: classes
+    className: classes,
+    css: cssFigureStyles
   }), allowFullScreen ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)(_image_button.EuiImageButton, {
     hasAlt: !!alt,
     hasShadow: hasShadow,

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

@@ -54,6 +54,7 @@ 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,
@@ -65,8 +66,6 @@ var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     isReadOnly = _ref.isReadOnly;
   var classes = (0, _classnames.default)('euiInlineEdit', className);
   var euiTheme = (0, _services.useEuiTheme)();
-  var readModeStyles = (0, _inline_edit_form.euiInlineEditReadModeStyles)(euiTheme);
-  var readModeCssStyles = [readModeStyles.euiInlineEditReadMode, isReadOnly && readModeStyles.isReadOnly];
   var _euiFormVariables = (0, _form2.euiFormVariables)(euiTheme),
     controlHeight = _euiFormVariables.controlHeight,
     controlCompressedHeight = _euiFormVariables.controlCompressedHeight;
@@ -95,6 +94,8 @@ var EuiInlineEditForm = function EuiInlineEditForm(_ref) {
     _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
     readModeValue = _useState6[0],
     setReadModeValue = _useState6[1];
+  var readModeStyles = (0, _inline_edit_form.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
@@ -190,7 +191,8 @@ 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) {
@@ -277,7 +279,7 @@ 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)), (0, _react2.jsx)("span", {
+  }), children(readModeValue || placeholder)), (0, _react2.jsx)("span", {
     id: readModeDescribedById,
     hidden: true
   }, !isReadOnly && (0, _react2.jsx)(_i18n.EuiI18n, {

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiInlineEditReadModeStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -18,7 +19,8 @@ var euiInlineEditReadModeStyles = function euiInlineEditReadModeStyles(_ref) {
   return {
     euiInlineEditReadMode: /*#__PURE__*/(0, _react.css)(";label:euiInlineEditReadMode;"),
     // Override the cursor and allow users to highlight text when in the read only state
-    isReadOnly: /*#__PURE__*/(0, _react.css)("&:disabled{cursor:text;color:", euiTheme.colors.text, ";user-select:text;};label:isReadOnly;")
+    isReadOnly: /*#__PURE__*/(0, _react.css)("&:disabled{cursor:text;color:", euiTheme.colors.text, ";user-select:text;};label:isReadOnly;"),
+    hasPlaceholder: /*#__PURE__*/(0, _react.css)(".euiText,.euiTitle{color:", (0, _services.tint)(euiTheme.colors.subduedText, 0.08), ";};label:hasPlaceholder;")
   };
 };
 exports.euiInlineEditReadModeStyles = euiInlineEditReadModeStyles;

package/optimize/lib/components/inline_edit/inline_edit_text.js

@@ -16,7 +16,7 @@ var _inline_edit_form = require("./inline_edit_form");
 var _services = require("../../services");
 var _inline_edit_text = require("./inline_edit_text.styles");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -34,6 +34,7 @@ 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,
@@ -57,6 +58,7 @@ var EuiInlineEditText = function EuiInlineEditText(_ref) {
   var formProps = {
     sizes: sizes,
     defaultValue: defaultValue,
+    placeholder: placeholder,
     inputAriaLabel: inputAriaLabel,
     startWithEditOpen: startWithEditOpen,
     readModeProps: readModeProps,

package/optimize/lib/components/inline_edit/inline_edit_title.js

@@ -16,7 +16,7 @@ var _inline_edit_form = require("./inline_edit_form");
 var _services = require("../../services");
 var _inline_edit_title = require("./inline_edit_title.styles");
 var _react2 = require("@emotion/react");
-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"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -37,6 +37,7 @@ 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,
@@ -65,6 +66,7 @@ var EuiInlineEditTitle = function EuiInlineEditTitle(_ref) {
   var formProps = {
     sizes: sizes,
     defaultValue: defaultValue,
+    placeholder: placeholder,
     inputAriaLabel: inputAriaLabel,
     startWithEditOpen: startWithEditOpen,
     readModeProps: readModeProps,

package/optimize/lib/components/key_pad_menu/key_pad_menu.js

@@ -23,23 +23,25 @@ var _excluded = ["children", "className", "checkable"];
  * Side Public License, v 1.
  */
 var EuiKeyPadMenu = function EuiKeyPadMenu(_ref) {
+  var _checkable$legendProp;
   var children = _ref.children,
     className = _ref.className,
     checkable = _ref.checkable,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  var hasCheckableConfig = (0, _typeof2.default)(checkable) === 'object';
   var classes = (0, _classnames.default)('euiKeyPadMenu', className);
   var theme = (0, _services.useEuiTheme)();
   var styles = (0, _key_pad_menu.euiKeyPadMenuStyles)(theme);
   var cssStyles = [styles.euiKeyPadMenu];
-  var legend = (0, _typeof2.default)(checkable) === 'object' && checkable.legend ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({
-    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 ? (0, _react2.jsx)(_form_label.EuiFormLabel, (0, _extends2.default)({}, checkable.legendProps, {
+    css: legendCssStyles,
     type: "legend"
   }), checkable.legend) : undefined;
   return checkable ? (0, _react2.jsx)("fieldset", (0, _extends2.default)({
     css: cssStyles,
     className: classes,
-    "aria-label": (0, _typeof2.default)(checkable) === 'object' ? checkable.ariaLegend : undefined
+    "aria-label": hasCheckableConfig ? checkable.ariaLegend : undefined
   }, rest), legend, children) : (0, _react2.jsx)("ul", (0, _extends2.default)({
     css: cssStyles,
     className: classes

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

@@ -66,16 +66,15 @@ var EuiListGroupItem = function EuiListGroupItem(_ref) {
   var isDisabled = _isDisabled || !isHrefValid;
   var euiTheme = (0, _services.useEuiTheme)();
   var iconStyles = (0, _list_group_item.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 = (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
       color: "inherit" // forces the icon to inherit its parent color
-      ,
-      css: cssIconStyles
     }, iconProps, {
       type: iconType,
-      className: (0, _classnames.default)('euiListGroupItem__icon', iconProps === null || iconProps === void 0 ? void 0 : iconProps.className)
+      className: (0, _classnames.default)('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/lib/components/page/page_body/page_body.js

@@ -14,7 +14,7 @@ var _panel = require("../../panel");
 var _global_styling = require("../../../global_styling");
 var _page_body = require("./page_body.styles");
 var _react2 = require("@emotion/react");
-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
@@ -27,6 +27,7 @@ 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,
@@ -38,20 +39,28 @@ var EuiPageBody = function EuiPageBody(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   // Set max-width as a style prop
   var widthStyles = (0, _restrict_width.setStyleForRestrictedPageWidth)(restrictWidth, rest === null || rest === void 0 ? void 0 : rest.style);
+
+  // Shared
+  var classes = (0, _classnames.default)('euiPageBody', className);
   var styles = (0, _page_body.euiPageBodyStyles)();
+  var cssStyles = [styles.euiPageBody, restrictWidth && styles.restrictWidth];
+
+  // Panelled
+  var panelClasses = (0, _classnames.default)(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 = (0, _global_styling.useEuiPaddingCSS)()[paddingSize];
-  var classes = (0, _classnames.default)('euiPageBody', className);
-  var panelCSS = [styles.euiPageBody, restrictWidth && styles.restrictWidth];
-  var componentCSS = [].concat(panelCSS, [padding]);
+  var componentCssStyles = [].concat(cssStyles, [padding, css]);
   return panelled ? (0, _react2.jsx)(_panel.EuiPanel, (0, _extends2.default)({
-    className: classes,
-    css: panelCSS,
     borderRadius: borderRadius,
     paddingSize: paddingSize
-  }, panelProps, rest), children) : (0, _react2.jsx)(Component, (0, _extends2.default)({
+  }, panelProps, rest, {
+    className: panelClasses,
+    css: panelCssStyles
+  }), children) : (0, _react2.jsx)(Component, (0, _extends2.default)({}, rest, {
     className: classes,
-    css: componentCSS
-  }, rest, {
+    css: componentCssStyles,
     style: widthStyles
   }), children);
 };

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

@@ -116,10 +116,11 @@ 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 ? (0, _react2.jsx)(_icon.EuiIcon, (0, _extends2.default)({
-      size: "xl",
-      css: contentStyles.euiPageHeaderContent__titleIcon
+      size: "xl"
     }, iconProps, {
+      css: iconCssStyles,
       type: iconType
     })) : undefined;
     pageTitleNode = (0, _react2.jsx)(_title.EuiTitle, (0, _extends2.default)({}, pageTitleProps, {

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

@@ -47,7 +47,7 @@ var EuiPageSection = function EuiPageSection(_ref) {
   var colors = (0, _global_styling.useEuiBackgroundColorCSS)();
   var cssStyles = [styles.euiPageSection, grow && styles.grow, inlinePadding[paddingSize], bottomBorder === 'extended' && styles.border, alignment && styles[alignment], colors[color]];
   var contentStyles = (0, _page_section.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 (0, _react2.jsx)(Component, (0, _extends2.default)({
     css: cssStyles
   }, rest), (0, _react2.jsx)("div", (0, _extends2.default)({}, contentProps, {

package/optimize/lib/components/pagination/pagination.js

@@ -17,7 +17,6 @@ var _pagination_button_arrow = require("./pagination_button_arrow");
 var _services = require("../../services");
 var _accessibility = require("../accessibility");
 var _pagination = require("./pagination.styles");
-var _pagination_button2 = require("./pagination_button.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "pageCount", "activePage", "onPageClick", "compressed", "aria-controls", "responsive"];
 /*
@@ -46,9 +45,7 @@ var EuiPagination = function EuiPagination(_ref) {
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var isResponsive = (0, _services.useIsWithinBreakpoints)(responsive, !!responsive);
   var euiTheme = (0, _services.useEuiTheme)();
-  var paginationStyles = (0, _pagination.euiPaginationStyles)(euiTheme);
-  var _euiPaginationButtonS = (0, _pagination_button2.euiPaginationButtonStyles)(euiTheme),
-    isPlaceholder = _euiPaginationButtonS.isPlaceholder;
+  var styles = (0, _pagination.euiPaginationStyles)(euiTheme);
 
   // Force to `compressed` version if specified or within the responsive breakpoints
   var compressed = _compressed || isResponsive;
@@ -106,7 +103,7 @@ var EuiPagination = function EuiPagination(_ref) {
     if (compressed) {
       centerPageCount = (0, _react2.jsx)(_text.EuiText, {
         size: "s",
-        css: paginationStyles.euiPagination__compressedText,
+        css: styles.euiPagination__compressedText,
         className: "euiPagination__compressedText"
       }, (0, _react2.jsx)(_i18n.EuiI18n, {
         token: "euiPagination.pageOfTotalCompressed",
@@ -144,7 +141,7 @@ var EuiPagination = function EuiPagination(_ref) {
             return (0, _react2.jsx)("li", {
               "aria-label": firstRangeAriaLabel,
               className: "euiPagination__item",
-              css: isPlaceholder
+              css: styles.euiPagination__ellipsis
             }, "\u2026");
           }));
         } else if (firstPageInRange === 2) {
@@ -174,7 +171,7 @@ var EuiPagination = function EuiPagination(_ref) {
             return (0, _react2.jsx)("li", {
               "aria-label": lastRangeAriaLabel,
               className: "euiPagination__item",
-              css: isPlaceholder
+              css: styles.euiPagination__ellipsis
             }, "\u2026");
           }));
         }
@@ -191,7 +188,7 @@ var EuiPagination = function EuiPagination(_ref) {
       });
       centerPageCount = (0, _react2.jsx)("ul", (0, _extends2.default)({
         className: "euiPagination__list",
-        css: paginationStyles.euiPagination__list
+        css: styles.euiPagination__list
       }, accessibleName), firstPageButtons, selectablePages, lastPageButtons);
     }
   }
@@ -217,7 +214,7 @@ var EuiPagination = function EuiPagination(_ref) {
   // Create the whole string with total pageCount or `collection`
   var accessiblePageCount = "".concat(accessiblePageString(), " ").concat(ofLabel, " ").concat(accessibleCollectionString);
   return (0, _react2.jsx)("nav", (0, _extends2.default)({
-    css: [paginationStyles.euiPagination, ";label:EuiPagination;"],
+    css: styles.euiPagination,
     className: classes
   }, rest), (0, _react2.jsx)(_accessibility.EuiScreenReaderOnly, null, (0, _react2.jsx)("span", {
     "aria-atomic": "true",

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

@@ -27,8 +27,9 @@ var euiPaginationStyles = function euiPaginationStyles(euiThemeContext) {
     // Base
     euiPagination: /*#__PURE__*/(0, _react.css)((0, _global_styling.euiScrollBarStyles)(euiThemeContext), " display:flex;align-items:center;", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'hidden'), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-x', 'auto'), ";;label:euiPagination;"),
     // Elements
-    euiPagination__compressedText: /*#__PURE__*/(0, _react.css)("display:inline-flex;align-items:center;line-height:1!important;>span{", (0, _global_styling.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__*/(0, _react.css)("display:inline-flex;align-items:center;line-height:1;>span{", (0, _global_styling.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__*/(0, _react.css)("color:", euiTheme.colors.disabledText, ";font-size:", (0, _global_styling.euiFontSize)(euiThemeContext, 's').fontSize, ";", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), ";;label:euiPagination__ellipsis;")
   };
 };
 exports.euiPaginationStyles = euiPaginationStyles;

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

@@ -15,7 +15,7 @@ var _i18n = require("../i18n");
 var _services = require("../../services");
 var _pagination_button = require("./pagination_button.styles");
 var _react2 = require("@emotion/react");
-var _excluded = ["className", "isActive", "isPlaceholder", "pageIndex", "totalPages"];
+var _excluded = ["className", "isActive", "pageIndex", "totalPages"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -28,13 +28,12 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 var EuiPaginationButton = function EuiPaginationButton(_ref) {
   var className = _ref.className,
     isActive = _ref.isActive,
-    isPlaceholder = _ref.isPlaceholder,
     pageIndex = _ref.pageIndex,
     totalPages = _ref.totalPages,
     rest = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var euiTheme = (0, _services.useEuiTheme)();
   var styles = (0, _pagination_button.euiPaginationButtonStyles)(euiTheme);
-  var paginationButtonCss = [styles.euiPaginationButton, isActive && styles.isActive, isPlaceholder && styles.isPlaceholder];
+  var paginationButtonCss = [styles.euiPaginationButton, isActive && styles.isActive];
   var classes = (0, _classnames.default)('euiPaginationButton', className);
   var props = _objectSpread(_objectSpread(_objectSpread({
     css: paginationButtonCss,
@@ -42,7 +41,7 @@ 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/lib/components/pagination/pagination_button.styles.js

@@ -3,10 +3,8 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.euiPaginationButtonStyles = exports.euiPaginationButtonArrowStyles = void 0;
+exports.euiPaginationButtonStyles = void 0;
 var _react = require("@emotion/react");
-var _global_styling = require("../../global_styling");
-var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -17,27 +15,11 @@ var _mixins = require("../../themes/amsterdam/global_styling/mixins");
 
 var euiPaginationButtonStyles = function euiPaginationButtonStyles(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme;
-  var fontSizeS = (0, _global_styling.euiFontSize)(euiThemeContext, 's');
-  var halfSizeM = (0, _global_styling.mathWithUnits)(euiTheme.size.m, function (x) {
-    return x / 2;
-  });
-  var disabled = (0, _mixins.euiButtonEmptyColor)(euiThemeContext, 'disabled');
-
-  // && to increase specificity. Can likely be removed once EuiButtonEmpty has been converted.
-
   return {
     // Base
-    euiPaginationButton: /*#__PURE__*/(0, _react.css)("&&{", fontSizeS, " padding:0;", (0, _global_styling.logicalTextAlignCSS)('center'), " border-radius:", euiTheme.border.radius.medium, ";outline-offset:-", euiTheme.focus.width, ";};label:euiPaginationButton;"),
+    euiPaginationButton: /*#__PURE__*/(0, _react.css)("outline-offset:-", euiTheme.focus.width, ";;label:euiPaginationButton;"),
     // States
-    isActive: /*#__PURE__*/(0, _react.css)("&&{font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.primary, ";.euiButtonEmpty__content{cursor:default;}&&,&&:hover{text-decoration:underline;}};label:isActive;"),
-    isPlaceholder: /*#__PURE__*/(0, _react.css)("&&{align-items:baseline;color:", disabled.color, ";", fontSizeS, " ", (0, _global_styling.logicalCSS)('padding-top', halfSizeM), " ", (0, _global_styling.logicalCSS)('padding-bottom', 0), " ", (0, _global_styling.logicalCSS)('padding-horizontal', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), ";};label:isPlaceholder;")
-  };
-};
-exports.euiPaginationButtonStyles = euiPaginationButtonStyles;
-var euiPaginationButtonArrowStyles = function euiPaginationButtonArrowStyles(_ref) {
-  var euiTheme = _ref.euiTheme;
-  return {
-    euiPaginationArrowButton: /*#__PURE__*/(0, _react.css)("outline-offset:-", euiTheme.focus.width, ";;label:euiPaginationArrowButton;")
+    isActive: /*#__PURE__*/(0, _react.css)("font-weight:", euiTheme.font.weight.bold, ";color:", euiTheme.colors.primary, ";&,&:hover{cursor:default;text-decoration:underline;};label:isActive;")
   };
 };
-exports.euiPaginationButtonArrowStyles = euiPaginationButtonArrowStyles;
+exports.euiPaginationButtonStyles = euiPaginationButtonStyles;

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

@@ -37,7 +37,7 @@ var EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {
     ariaControls = _ref.ariaControls,
     onClick = _ref.onClick;
   var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _pagination_button.euiPaginationButtonArrowStyles)(euiTheme);
+  var styles = (0, _pagination_button.euiPaginationButtonStyles)(euiTheme);
   var labels = {
     first: (0, _i18n.useEuiI18n)('euiPaginationButtonArrow.firstPage', 'First page'),
     previous: (0, _i18n.useEuiI18n)('euiPaginationButtonArrow.previousPage', 'Previous page'),
@@ -50,7 +50,7 @@ var EuiPaginationButtonArrow = function EuiPaginationButtonArrow(_ref) {
     buttonProps['aria-controls'] = ariaControls;
   }
   return (0, _react2.jsx)(_button_icon.EuiButtonIcon, (0, _extends2.default)({
-    css: styles.euiPaginationArrowButton,
+    css: styles.euiPaginationButton,
     className: (0, _classnames.default)('euiPaginationArrowButton', className),
     color: "text",
     "aria-label": labels[type],