@elastic/eui 94.3.0 → 94.4.1

package/optimize/es/components/collapsible_nav_beta/collapsible_nav_item/collapsed/collapsed_nav_button.js

@@ -16,6 +16,7 @@ import { EuiButtonIcon } from '../../../button/button_icon';
 import { EuiToolTip } from '../../../tool_tip';
 import { EuiCollapsibleNavContext } from '../../context';
 import { euiCollapsedNavButtonStyles, euiCollapsedNavItemTooltipStyles } from './collapsed_nav_button.styles';
+import { useEuiI18n } from '../../../i18n';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
   var href = _ref.href,
@@ -35,6 +36,9 @@ export var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
   var buttonClassName = classNames('euiCollapsedNavButton', linkProps === null || linkProps === void 0 ? void 0 : linkProps.className);
   var tooltipStyles = useEuiMemoizedStyles(euiCollapsedNavItemTooltipStyles);
   var tooltipCssStyles = [tooltipStyles.euiCollapsedNavItemTooltip, tooltipStyles[side], hideToolTip && tooltipStyles.hidden];
+  var buttonIconAriaLabel = useEuiI18n('euiCollapsedNavButton.ariaLabelButtonIcon', '{title}, quick navigation menu', {
+    title: title
+  });
   return ___EmotionJSX(EuiToolTip, {
     content: title,
     css: tooltipCssStyles,
@@ -47,7 +51,7 @@ export var EuiCollapsedNavButton = function EuiCollapsedNavButton(_ref) {
     color: "text",
     href: href,
     onClick: onClick,
-    "aria-label": title
+    "aria-label": buttonIconAriaLabel
   }, linkProps, {
     // Exclusive union shenanigans
     className: buttonClassName,

package/optimize/es/components/date_picker/super_date_picker/date_popover/absolute_tab.js

@@ -20,8 +20,9 @@ import React, { Component } from 'react';
 import moment from 'moment'; // eslint-disable-line import/named
 
 import dateMath from '@elastic/datemath';
-import { keys } from '../../../../services';
 import { EuiFormRow, EuiFieldText, EuiFormLabel } from '../../../form';
+import { EuiFlexGroup } from '../../../flex';
+import { EuiButtonIcon } from '../../../button';
 import { EuiCode } from '../../../code';
 import { EuiI18n } from '../../../i18n';
 import { EuiDatePicker } from '../../date_picker';
@@ -146,20 +147,29 @@ export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
         locale: locale,
         utcOffset: utcOffset
       }), ___EmotionJSX(EuiI18n, {
-        tokens: ['euiAbsoluteTab.dateFormatHint', 'euiAbsoluteTab.dateFormatError'],
-        defaults: ['Press the Enter key to parse as a date.', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.'],
+        tokens: ['euiAbsoluteTab.dateFormatButtonLabel', 'euiAbsoluteTab.dateFormatError'],
+        defaults: ['Parse date', 'Allowed formats: {dateFormat}, ISO 8601, RFC 2822, or Unix timestamp.'],
         values: {
           dateFormat: ___EmotionJSX(EuiCode, null, dateFormat)
         }
       }, function (_ref) {
         var _ref2 = _slicedToArray(_ref, 2),
-          dateFormatHint = _ref2[0],
+          dateFormatButtonLabel = _ref2[0],
           dateFormatError = _ref2[1];
-        return ___EmotionJSX(EuiFormRow, {
+        return ___EmotionJSX(EuiFlexGroup, {
+          component: "form",
+          onSubmit: function onSubmit(e) {
+            e.preventDefault(); // Prevents a page refresh/reload
+            _this2.parseUserDateInput(textInputValue);
+          },
+          className: "euiSuperDatePicker__absoluteDateForm",
+          gutterSize: "s",
+          responsive: false
+        }, ___EmotionJSX(EuiFormRow, {
           className: "euiSuperDatePicker__absoluteDateFormRow",
           isInvalid: isTextInvalid,
           error: isTextInvalid ? dateFormatError : undefined,
-          helpText: hasUnparsedText ? isTextInvalid ? dateFormatHint : [dateFormatHint, dateFormatError] : undefined
+          helpText: hasUnparsedText && !isTextInvalid ? dateFormatError : undefined
         }, ___EmotionJSX(EuiFieldText, {
           compressed: true,
           isInvalid: isTextInvalid,
@@ -168,13 +178,17 @@ export var EuiAbsoluteTab = /*#__PURE__*/function (_Component) {
           onPaste: function onPaste(event) {
             _this2.parseUserDateInput(event.clipboardData.getData('text'));
           },
-          onKeyDown: function onKeyDown(event) {
-            if (event.key === keys.ENTER) {
-              _this2.parseUserDateInput(textInputValue);
-            }
-          },
           "data-test-subj": "superDatePickerAbsoluteDateInput",
           prepend: ___EmotionJSX(EuiFormLabel, null, labelPrefix)
+        })), hasUnparsedText && ___EmotionJSX(EuiButtonIcon, {
+          type: "submit",
+          className: "euiSuperDatePicker__absoluteDateFormSubmit",
+          size: "s",
+          display: "base",
+          iconType: "check",
+          "aria-label": dateFormatButtonLabel,
+          title: dateFormatButtonLabel,
+          "data-test-subj": "parseAbsoluteDateFormat"
         }));
       }));
     }

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

@@ -10,7 +10,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
  */
 
 import { shade, tint, darken, transparentize, makeHighContrastColor } from '../../services';
-import { mathWithUnits, euiCanAnimate } from '../../global_styling';
+import { mathWithUnits, euiCanAnimate, euiFontSize } from '../../global_styling';
 export var euiFormVariables = function euiFormVariables(euiThemeContext) {
   var euiTheme = euiThemeContext.euiTheme,
     colorMode = euiThemeContext.colorMode;
@@ -65,7 +65,9 @@ export var euiFormVariables = function euiFormVariables(euiThemeContext) {
       xxl: euiTheme.size.xxl
     }
   };
-  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), customControlColors), iconSizes), controlLayout);
+  return _objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread(_objectSpread({}, sizes), colors), customControlColors), iconSizes), controlLayout), {}, {
+    animationTiming: "".concat(euiTheme.animation.fast, " ease-in")
+  });
 };
 export var euiFormControlSize = function euiFormControlSize(euiThemeContext) {
   var options = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
@@ -99,5 +101,26 @@ export var euiCustomControl = function euiCustomControl(euiThemeContext) {
   } else if (type === 'square') {
     borderRadiusStyle = "border-radius: ".concat(form.controlCompressedBorderRadius, ";");
   }
-  return "\n    ".concat(padddingStyle, "\n    ").concat(borderRadiusStyle, "\n    border: ").concat(euiTheme.border.width.thin, " solid ").concat(form.customControlBorderColor, ";\n    background: ").concat(euiTheme.colors.emptyShade, " no-repeat center;\n\n    ").concat(euiCanAnimate, " {\n      transition: background-color ").concat(euiTheme.animation.fast, " ease-in,\n              border-color ").concat(euiTheme.animation.fast, " ease-in;\n    }\n  ");
+  return "\n    ".concat(padddingStyle, "\n    ").concat(borderRadiusStyle, "\n    border: ").concat(euiTheme.border.width.thin, " solid ").concat(form.customControlBorderColor, ";\n    background: ").concat(euiTheme.colors.emptyShade, " no-repeat center;\n\n    ").concat(euiCanAnimate, " {\n      transition: background-color ").concat(form.animationTiming, ",\n        border-color ").concat(form.animationTiming, ";\n    }\n  ");
+};
+export var euiFormControlText = function euiFormControlText(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiFontSize = euiFontSize(euiThemeContext, 's'),
+    fontSize = _euiFontSize.fontSize;
+  var _euiFormVariables = euiFormVariables(euiThemeContext),
+    controlPlaceholderText = _euiFormVariables.controlPlaceholderText;
+  return "\n    font-family: ".concat(euiTheme.font.family, ";\n    font-size: ").concat(fontSize, ";\n    color: ").concat(euiTheme.colors.text, ";\n\n    ").concat(euiPlaceholderPerBrowser("color: ".concat(controlPlaceholderText)), "\n  ");
+};
+export var euiFormControlDefaultShadow = function euiFormControlDefaultShadow(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var form = euiFormVariables(euiThemeContext);
+  return "\n    box-shadow: inset 0 0 0 1px ".concat(form.borderColor, ";\n    background-color: ").concat(form.backgroundColor, ";\n\n    background-repeat: no-repeat;\n    background-size: 0% 100%;\n    background-image: linear-gradient(to top,\n      var(--euiFormStateColor),\n      var(--euiFormStateColor) ").concat(euiTheme.border.width.thick, ",\n      transparent ").concat(euiTheme.border.width.thick, ",\n      transparent 100%\n    );\n\n    ").concat(euiCanAnimate, " {\n      transition:\n        box-shadow ").concat(form.animationTiming, ",\n        background-image ").concat(form.animationTiming, ",\n        background-size ").concat(form.animationTiming, ",\n        background-color ").concat(form.animationTiming, ";\n    }\n  ");
+};
+export var euiFormControlFocusStyles = function euiFormControlFocusStyles(_ref) {
+  var euiTheme = _ref.euiTheme,
+    colorMode = _ref.colorMode;
+  return "\n  --euiFormStateColor: ".concat(euiTheme.colors.primary, ";\n  background-color: ").concat(colorMode === 'DARK' ? shade(euiTheme.colors.emptyShade, 0.4) : euiTheme.colors.emptyShade, ";\n  background-size: 100% 100%;\n  outline: none; /* Remove all outlines and rely on our own bottom border gradient */\n");
+};
+var euiPlaceholderPerBrowser = function euiPlaceholderPerBrowser(content) {
+  return "\n  &::-webkit-input-placeholder { ".concat(content, "; opacity: 1; }\n  &::-moz-placeholder { ").concat(content, "; opacity: 1; }\n  &:-ms-input-placeholder { ").concat(content, "; opacity: 1; }\n  &:-moz-placeholder { ").concat(content, "; opacity: 1; }\n  &::placeholder { ").concat(content, "; opacity: 1; }\n");
 };

package/optimize/es/components/markdown_editor/markdown_editor.js

@@ -17,17 +17,18 @@ function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len
 import React, { createElement, useEffect, useImperativeHandle, useMemo, useState, useCallback, useRef, forwardRef } from 'react';
 import unified from 'unified';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles, useGeneratedHtmlId } from '../../services';
+import { EuiModal } from '../modal';
+import { EuiResizeObserver } from '../observer/resize_observer';
 import MarkdownActions, { insertText as _insertText } from './markdown_actions';
 import { EuiMarkdownEditorToolbar } from './markdown_editor_toolbar';
 import { EuiMarkdownEditorTextArea } from './markdown_editor_text_area';
 import { EuiMarkdownFormat } from './markdown_format';
 import { EuiMarkdownEditorDropZone } from './markdown_editor_drop_zone';
-import { useGeneratedHtmlId } from '../../services';
 import { MODE_EDITING, MODE_VIEWING } from './markdown_modes';
-import { EuiModal } from '../modal';
 import { EuiMarkdownContext } from './markdown_context';
 import { defaultParsingPlugins, defaultProcessingPlugins, defaultUiPlugins } from './plugins/markdown_default_plugins';
-import { EuiResizeObserver } from '../observer/resize_observer';
+import { euiMarkdownEditorStyles } from './markdown_editor.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 // TODO I wanted to use the useCombinedRefs
 // but I can't because it's not allowed to use react hooks
@@ -240,10 +241,10 @@ export var EuiMarkdownEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
     _useState12 = _slicedToArray(_useState11, 2),
     editorToolbarHeight = _useState12[0],
     setEditorToolbarHeight = _useState12[1];
+  var styles = useEuiMemoizedStyles(euiMarkdownEditorStyles);
+  var cssStyles = [styles.euiMarkdownEditor, height === 'full' && styles.fullHeight];
   var classes = classNames('euiMarkdownEditor', {
-    'euiMarkdownEditor--fullHeight': height === 'full'
-  }, {
-    'euiMarkdownEditor--isPreviewing': isPreviewing
+    'euiMarkdownEditor-isPreviewing': isPreviewing
   }, className);
   var classesPreview = classNames('euiMarkdownEditorPreview', {
     'euiMarkdownEditorPreview-isReadOnly': readOnly
@@ -282,7 +283,8 @@ export var EuiMarkdownEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   return ___EmotionJSX(EuiMarkdownContext.Provider, {
     value: contextValue
   }, ___EmotionJSX("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), ___EmotionJSX(EuiMarkdownEditorToolbar, {
     ref: editorToolbarRef,
     selectedNode: selectedNode,
@@ -295,6 +297,7 @@ export var EuiMarkdownEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }), isPreviewing && ___EmotionJSX("div", {
     ref: previewRef,
     className: classesPreview,
+    css: styles.euiMarkdownEditorPreview,
     style: {
       height: previewHeight
     }
@@ -304,7 +307,8 @@ export var EuiMarkdownEditor = /*#__PURE__*/forwardRef(function (_ref, ref) {
   }, markdownFormatProps), value)), ___EmotionJSX("div", {
     className: "euiMarkdownEditor__toggleContainer",
     style: {
-      height: editorToggleContainerHeight
+      height: editorToggleContainerHeight,
+      display: isPreviewing ? 'none' : undefined
     }
   }, ___EmotionJSX(EuiMarkdownEditorDropZone, {
     setEditorFooterHeight: setEditorFooterHeight,

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

@@ -0,0 +1,29 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, logicalCSSWithFallback, logicalBorderRadiusCSS, euiScrollBarStyles } from '../../global_styling';
+export var euiMarkdownEditorVariables = function euiMarkdownEditorVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    minHeight: '150px',
+    borderRadius: euiTheme.border.radius.medium,
+    barsBackgroundColor: euiTheme.colors.lightestShade
+  };
+};
+export var euiMarkdownEditorStyles = function euiMarkdownEditorStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = euiMarkdownEditorVariables(euiThemeContext),
+    minHeight = _euiMarkdownEditorVar.minHeight,
+    borderRadius = _euiMarkdownEditorVar.borderRadius;
+  return {
+    euiMarkdownEditor: /*#__PURE__*/css("display:flex;flex-direction:column;.euiMarkdownEditorToolbar{", logicalBorderRadiusCSS("".concat(borderRadius, " ").concat(borderRadius, " 0 0"), true), ";}.euiMarkdownEditorPreview,.euiMarkdownEditorFooter{", logicalBorderRadiusCSS("0 0 ".concat(borderRadius, " ").concat(borderRadius), true), ";};label:euiMarkdownEditor;"),
+    fullHeight: /*#__PURE__*/css(logicalCSS('height', '100%'), " .euiMarkdownEditorTextArea{resize:none;}.euiMarkdownEditorDropZone{", logicalCSS('height', '100%'), ";};label:fullHeight;"),
+    euiMarkdownEditorPreview: /*#__PURE__*/css(logicalCSS('min-height', minHeight), " ", logicalCSSWithFallback('overflow-y', 'auto'), " ", euiScrollBarStyles(euiThemeContext), " padding:", euiTheme.size.m, ";border:", euiTheme.border.thin, ";background-color:", euiTheme.colors.emptyShade, ";;label:euiMarkdownEditorPreview;")
+  };
+};

package/optimize/es/components/markdown_editor/markdown_editor_drop_zone.js

@@ -1,5 +1,8 @@
 import _extends from "@babel/runtime/helpers/extends";
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
+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; }
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -8,11 +11,14 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  * Side Public License, v 1.
  */
 
-import React, { useEffect } from 'react';
+import React, { useEffect, useContext } from 'react';
 import classNames from 'classnames';
 import { useDropzone } from 'react-dropzone';
-import { EuiMarkdownEditorFooter } from './markdown_editor_footer';
+import { useEuiMemoizedStyles } from '../../services';
 import { useResizeObserver } from '../observer/resize_observer';
+import { EuiMarkdownContext } from './markdown_context';
+import { EuiMarkdownEditorFooter } from './markdown_editor_footer';
+import { euiMarkdownEditorDropZoneStyles } from './markdown_editor_drop_zone.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var getUnacceptedItems = function getUnacceptedItems(items, dropHandlers) {
   var unacceptedItems = [];
@@ -32,6 +38,8 @@ var getUnacceptedItems = function getUnacceptedItems(items, dropHandlers) {
   return unacceptedItems;
 };
 export var EuiMarkdownEditorDropZone = function EuiMarkdownEditorDropZone(props) {
+  var _useContext = useContext(EuiMarkdownContext),
+    readOnly = _useContext.readOnly;
   var _React$useState = React.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isDragging = _React$useState2[0],
@@ -53,11 +61,9 @@ export var EuiMarkdownEditorDropZone = function EuiMarkdownEditorDropZone(props)
     setHasUnacceptedItems = props.setHasUnacceptedItems,
     setEditorFooterHeight = props.setEditorFooterHeight,
     isEditing = props.isEditing;
-  var classes = classNames('euiMarkdownEditorDropZone', {
-    'euiMarkdownEditorDropZone--isDragging': isDragging,
-    'euiMarkdownEditorDropZone--hasError': hasUnacceptedItems,
-    'euiMarkdownEditorDropZone--isDraggingError': isDraggingError
-  });
+  var classes = classNames('euiMarkdownEditorDropZone');
+  var styles = useEuiMemoizedStyles(euiMarkdownEditorDropZoneStyles);
+  var cssStyles = [styles.euiMarkdownEditorDropZone, isDragging && !isDraggingError && styles.isDragging, isDraggingError && styles.isDraggingError, (hasUnacceptedItems || errors.length > 0) && styles.hasError];
   var _React$useState7 = React.useState(null),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     editorFooterRef = _React$useState8[0],
@@ -70,7 +76,7 @@ export var EuiMarkdownEditorDropZone = function EuiMarkdownEditorDropZone(props)
     }
   }, [setEditorFooterHeight, isEditing, editorFooterHeight]);
   var _useDropzone = useDropzone({
-      disabled: dropHandlers.length === 0,
+      disabled: dropHandlers.length === 0 || readOnly,
       // Disable click and keydown behavior
       noClick: true,
       noKeyboard: true,
@@ -155,7 +161,11 @@ export var EuiMarkdownEditorDropZone = function EuiMarkdownEditorDropZone(props)
     getRootProps = _useDropzone.getRootProps,
     getInputProps = _useDropzone.getInputProps,
     open = _useDropzone.open;
-  return ___EmotionJSX("div", _extends({}, getRootProps(), {
+  var rootProps = _objectSpread({}, getRootProps());
+  if (readOnly) rootProps.role = undefined; // Unset the default `role="button"` attribute which sets a misleading pointer icon
+
+  return ___EmotionJSX("div", _extends({}, rootProps, {
+    css: cssStyles,
     className: classes
   }), children, ___EmotionJSX(EuiMarkdownEditorFooter, {
     ref: setEditorFooterRef,

package/optimize/es/components/markdown_editor/markdown_editor_drop_zone.styles.js

@@ -0,0 +1,33 @@
+function _EMOTION_STRINGIFIED_CSS_ERROR__() { return "You have tried to stringify object returned from `css` function. It isn't supposed to be used directly (e.g. as value of the `className` prop), but rather handed to emotion so it can handle it (e.g. as value of `css` prop)."; }
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { transparentize } from '../../services';
+import { logicalCSS } from '../../global_styling';
+import { euiMarkdownEditorVariables } from './markdown_editor.styles';
+var _ref = process.env.NODE_ENV === "production" ? {
+  name: "gwjnpv-euiMarkdownEditorDropZone__input",
+  styles: "position:absolute;inset:0;opacity:0;overflow:hidden;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;};label:euiMarkdownEditorDropZone__input;"
+} : {
+  name: "gwjnpv-euiMarkdownEditorDropZone__input",
+  styles: "position:absolute;inset:0;opacity:0;overflow:hidden;&:hover{cursor:pointer;}&:hover:disabled{cursor:not-allowed;};label:euiMarkdownEditorDropZone__input;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
+export var euiMarkdownEditorDropZoneStyles = function euiMarkdownEditorDropZoneStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = euiMarkdownEditorVariables(euiThemeContext),
+    minHeight = _euiMarkdownEditorVar.minHeight;
+  return {
+    euiMarkdownEditorDropZone: /*#__PURE__*/css("position:relative;display:flex;flex-direction:column;", logicalCSS('min-height', minHeight), ";;label:euiMarkdownEditorDropZone;"),
+    isDragging: /*#__PURE__*/css(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", transparentize(euiTheme.colors.primary, 0.1), "!important;};label:isDragging;"),
+    isDraggingError: /*#__PURE__*/css(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", transparentize(euiTheme.colors.danger, 0.1), "!important;};label:isDraggingError;"),
+    hasError: /*#__PURE__*/css(".euiMarkdownEditorTextArea{--euiFormStateColor:", euiTheme.colors.danger, "!important;background-size:100% 100%;};label:hasError;"),
+    euiMarkdownEditorDropZone__input: _ref
+  };
+};

package/optimize/es/components/markdown_editor/markdown_editor_footer.js

@@ -8,6 +8,7 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
  */
 
 import React, { useState, useMemo, Fragment, forwardRef, useContext } from 'react';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiLoadingSpinner } from '../loading';
 import { EuiButton, EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiTitle } from '../title';
@@ -17,11 +18,12 @@ import { EuiPopover, EuiPopoverTitle } from '../popover';
 import { EuiText } from '../text';
 import { EuiSpacer } from '../spacer';
 import { EuiToolTip } from '../tool_tip';
-// @ts-ignore a react svg
-import MarkdownLogo from './icons/markdown_logo';
 import { EuiHorizontalRule } from '../horizontal_rule';
 import { EuiLink } from '../link';
 import { EuiMarkdownContext } from './markdown_context';
+// @ts-ignore a react svg
+import MarkdownLogo from './icons/markdown_logo';
+import { euiMarkdownEditorFooterStyles } from './markdown_editor_footer.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, ref) {
   var uiPlugins = props.uiPlugins,
@@ -30,6 +32,7 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
     errors = props.errors,
     hasUnacceptedItems = props.hasUnacceptedItems,
     dropHandlers = props.dropHandlers;
+  var styles = useEuiMemoizedStyles(euiMarkdownEditorFooterStyles);
   var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
     isShowingHelpModal = _useState2[0],
@@ -81,6 +84,7 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
     uploadButton = ___EmotionJSX(EuiToolTip, {
       content: ariaLabels.supportedFileTypes
     }, ___EmotionJSX(EuiButtonEmpty, {
+      css: styles.euiMarkdownEditorFooter__uploadError,
       className: "euiMarkdownEditorFooter__uploadError",
       autoFocus: true,
       size: "s",
@@ -116,6 +120,7 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
       panelPaddingSize: "s",
       anchorPosition: "upCenter"
     }, ___EmotionJSX("div", {
+      css: styles.euiMarkdownEditorFooter__popover,
       className: "euiMarkdownEditorFooter__popover"
     }, ___EmotionJSX(EuiPopoverTitle, null, ___EmotionJSX(EuiI18n, {
       token: "euiMarkdownEditorFooter.errorsTitle",
@@ -146,6 +151,7 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
       content: syntaxTitle
     }, ___EmotionJSX(EuiButtonIcon, {
       size: "s",
+      css: styles.euiMarkdownEditorFooter__helpButton,
       className: "euiMarkdownEditorFooter__helpButton",
       iconType: MarkdownLogo,
       color: "text",
@@ -192,6 +198,7 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
       button: ___EmotionJSX(EuiButtonIcon, {
         title: syntaxTitle,
         size: "s",
+        css: styles.euiMarkdownEditorFooter__helpButton,
         className: "euiMarkdownEditorFooter__helpButton",
         iconType: MarkdownLogo,
         color: "text",
@@ -217,8 +224,10 @@ export var EuiMarkdownEditorFooter = /*#__PURE__*/forwardRef(function (props, re
   }
   return ___EmotionJSX("div", {
     ref: ref,
+    css: styles.euiMarkdownEditorFooter,
     className: "euiMarkdownEditorFooter"
   }, ___EmotionJSX("div", {
+    css: styles.euiMarkdownEditorFooter__actions,
     className: "euiMarkdownEditorFooter__actions"
   }, uploadButton, errorsButton), helpSyntaxButton);
 });

package/optimize/es/components/markdown_editor/markdown_editor_footer.styles.js

@@ -0,0 +1,26 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { euiMarkdownEditorVariables } from './markdown_editor.styles';
+export var euiMarkdownEditorFooterStyles = function euiMarkdownEditorFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = euiMarkdownEditorVariables(euiThemeContext),
+    borderRadius = _euiMarkdownEditorVar.borderRadius,
+    barsBackgroundColor = _euiMarkdownEditorVar.barsBackgroundColor;
+  return {
+    euiMarkdownEditorFooter: /*#__PURE__*/css("display:inline-flex;align-items:center;padding:", euiTheme.size.xs, ";border:", euiTheme.border.thin, ";background-color:", barsBackgroundColor, ";;label:euiMarkdownEditorFooter;"),
+    euiMarkdownEditorFooter__actions: /*#__PURE__*/css("flex:1;display:inline-flex;align-items:center;gap:", euiTheme.size.xs, ";;label:euiMarkdownEditorFooter__actions;"),
+    // Override default button border radius to match the overall markdown editor
+    euiMarkdownEditorFooter__uploadError: /*#__PURE__*/css("border-radius:", borderRadius, ";;label:euiMarkdownEditorFooter__uploadError;"),
+    // Override the default button icon width size
+    euiMarkdownEditorFooter__helpButton: /*#__PURE__*/css(".euiIcon{", logicalCSS('width', '26px'), ";};label:euiMarkdownEditorFooter__helpButton;"),
+    euiMarkdownEditorFooter__popover: /*#__PURE__*/css(logicalCSS('width', '300px'), ";;label:euiMarkdownEditorFooter__popover;")
+  };
+};

package/optimize/es/components/markdown_editor/markdown_editor_text_area.js

@@ -11,7 +11,9 @@ var _excluded = ["children", "compressed", "id", "isInvalid", "name", "placehold
 
 import React, { forwardRef, useContext } from 'react';
 import classNames from 'classnames';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiMarkdownContext } from './markdown_context';
+import { euiMarkdownEditorTextAreaStyles } from './markdown_editor_text_area.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 export var EuiMarkdownEditorTextArea = /*#__PURE__*/forwardRef(function (_ref, ref) {
   var children = _ref.children,
@@ -29,6 +31,8 @@ export var EuiMarkdownEditorTextArea = /*#__PURE__*/forwardRef(function (_ref, r
   var classes = classNames('euiMarkdownEditorTextArea', {
     'euiMarkdownEditorTextArea-isReadOnly': readOnly
   });
+  var styles = useEuiMemoizedStyles(euiMarkdownEditorTextAreaStyles);
+  var cssStyles = [styles.euiMarkdownEditorTextArea, readOnly ? styles.readOnly : styles.editable];
 
   // Ignore invalid empty string style values
   var style = {};
@@ -42,7 +46,8 @@ export var EuiMarkdownEditorTextArea = /*#__PURE__*/forwardRef(function (_ref, r
     ref: ref,
     "data-test-subj": "euiMarkdownEditorTextArea",
     style: style,
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest, {
     rows: 6,
     name: name,

package/optimize/es/components/markdown_editor/markdown_editor_text_area.styles.js

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS, logicalSizeCSS, euiScrollBarStyles } from '../../global_styling';
+import { euiFormControlText, euiFormControlDefaultShadow, euiFormControlFocusStyles } from '../form/form.styles';
+import { euiMarkdownEditorVariables } from './markdown_editor.styles';
+export var euiMarkdownEditorTextAreaStyles = function euiMarkdownEditorTextAreaStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = euiMarkdownEditorVariables(euiThemeContext),
+    minHeight = _euiMarkdownEditorVar.minHeight;
+  return {
+    euiMarkdownEditorTextArea: /*#__PURE__*/css(logicalSizeCSS('100%'), " ", logicalCSS('min-height', minHeight), " ", euiScrollBarStyles(euiThemeContext), " resize:vertical;margin:0;padding:", euiTheme.size.m, ";", euiFormControlText(euiThemeContext), " line-height:", euiTheme.font.lineHeightMultiplier, ";border:", euiTheme.border.thin, ";", logicalCSS('border-bottom', 'none'), ";;label:euiMarkdownEditorTextArea;"),
+    readOnly: /*#__PURE__*/css("background-color:", euiTheme.colors.emptyShade, ";cursor:default;&:focus{outline:none;};label:readOnly;"),
+    editable: /*#__PURE__*/css(euiFormControlDefaultShadow(euiThemeContext), " box-shadow:none;&:focus,.euiMarkdownEditor:focus-within &{", euiFormControlFocusStyles(euiThemeContext), ";};label:editable;")
+  };
+};

package/optimize/es/components/markdown_editor/markdown_editor_toolbar.js

@@ -8,11 +8,13 @@ import _extends from "@babel/runtime/helpers/extends";
  */
 
 import React, { useContext, forwardRef } from 'react';
+import { useEuiMemoizedStyles } from '../../services';
 import { EuiButtonEmpty, EuiButtonIcon } from '../button';
 import { EuiI18n } from '../i18n';
 import { EuiToolTip } from '../tool_tip';
 import { MODE_VIEWING } from './markdown_modes';
 import { EuiMarkdownContext } from './markdown_context';
+import { euiMarkdownEditorToolbarStyles } from './markdown_editor_toolbar.styles';
 import { jsx as ___EmotionJSX } from "@emotion/react";
 var boldItalicButtons = [{
   id: 'mdBold',
@@ -98,11 +100,14 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
   };
   var isPreviewing = viewMode === MODE_VIEWING;
   var isEditable = !isPreviewing && !readOnly;
+  var styles = useEuiMemoizedStyles(euiMarkdownEditorToolbarStyles);
   return ___EmotionJSX("div", {
     ref: ref,
-    "data-test-subj": "euiMarkdownEditorToolbar",
-    className: "euiMarkdownEditorToolbar"
+    css: styles.euiMarkdownEditorToolbar,
+    className: "euiMarkdownEditorToolbar",
+    "data-test-subj": "euiMarkdownEditorToolbar"
   }, ___EmotionJSX("div", {
+    css: styles.euiMarkdownEditorToolbar__buttons,
     className: "euiMarkdownEditorToolbar__buttons"
   }, boldItalicButtons.map(function (item) {
     return ___EmotionJSX(EuiToolTip, {
@@ -119,6 +124,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
       icon: item.iconType
     }));
   }), ___EmotionJSX("span", {
+    css: styles.euiMarkdownEditorToolbar__divider,
     className: "euiMarkdownEditorToolbar__divider"
   }), listButtons.map(function (item) {
     return ___EmotionJSX(EuiToolTip, {
@@ -135,6 +141,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
       icon: item.iconType
     }));
   }), ___EmotionJSX("span", {
+    css: styles.euiMarkdownEditorToolbar__divider,
     className: "euiMarkdownEditorToolbar__divider"
   }), quoteCodeLinkButtons.map(function (item) {
     return ___EmotionJSX(EuiToolTip, {
@@ -151,6 +158,7 @@ export var EuiMarkdownEditorToolbar = /*#__PURE__*/forwardRef(function (_ref2, r
       icon: item.iconType
     }));
   }), uiPlugins.length > 0 ? ___EmotionJSX(React.Fragment, null, ___EmotionJSX("span", {
+    css: styles.euiMarkdownEditorToolbar__divider,
     className: "euiMarkdownEditorToolbar__divider"
   }), uiPlugins.map(function (_ref3) {
     var name = _ref3.name,

package/optimize/es/components/markdown_editor/markdown_editor_toolbar.styles.js

@@ -0,0 +1,21 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../global_styling';
+import { euiMarkdownEditorVariables } from './markdown_editor.styles';
+export var euiMarkdownEditorToolbarStyles = function euiMarkdownEditorToolbarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = euiMarkdownEditorVariables(euiThemeContext),
+    barsBackgroundColor = _euiMarkdownEditorVar.barsBackgroundColor;
+  return {
+    euiMarkdownEditorToolbar: /*#__PURE__*/css("display:flex;flex-wrap:wrap;padding:", euiTheme.size.xs, ";background-color:", barsBackgroundColor, ";border:", euiTheme.border.thin, ";", logicalCSS('border-bottom', 'none'), ";;label:euiMarkdownEditorToolbar;"),
+    euiMarkdownEditorToolbar__buttons: /*#__PURE__*/css("flex:1;display:flex;flex-wrap:wrap;align-items:center;column-gap:", euiTheme.size.xs, ";;label:euiMarkdownEditorToolbar__buttons;"),
+    euiMarkdownEditorToolbar__divider: /*#__PURE__*/css("display:block;", logicalCSS('height', euiTheme.size.l), " ", logicalCSS('margin-left', euiTheme.size.xs), " ", logicalCSS('padding-right', euiTheme.size.xs), " ", logicalCSS('border-left', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.border.color)), ";;label:euiMarkdownEditorToolbar__divider;")
+  };
+};

package/optimize/es/components/markdown_editor/markdown_format.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["children", "className", "parsingPluginList", "processingPluginList", "textSize"];
+var _excluded = ["children", "className", "parsingPluginList", "processingPluginList", "textSize", "color"];
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
  * or more contributor license agreements. Licensed under the Elastic License
@@ -13,7 +13,8 @@ import React, { useMemo } from 'react';
 import unified from 'unified';
 import classNames from 'classnames';
 import { EuiText } from '../text/text';
-import { useEuiTheme } from '../../services';
+import { _isNamedColor } from '../text/text_color';
+import { useEuiMemoizedStyles } from '../../services';
 import { euiMarkdownFormatStyles } from './markdown_format.styles';
 import { defaultProcessingPlugins, defaultParsingPlugins } from './plugins/markdown_default_plugins';
 import { jsx as ___EmotionJSX } from "@emotion/react";
@@ -26,6 +27,8 @@ export var EuiMarkdownFormat = function EuiMarkdownFormat(_ref) {
     processingPluginList = _ref$processingPlugin === void 0 ? defaultProcessingPlugins : _ref$processingPlugin,
     _ref$textSize = _ref.textSize,
     textSize = _ref$textSize === void 0 ? 'm' : _ref$textSize,
+    _ref$color = _ref.color,
+    color = _ref$color === void 0 ? 'default' : _ref$color,
     rest = _objectWithoutProperties(_ref, _excluded);
   var processor = useMemo(function () {
     return unified().use(parsingPluginList).use(processingPluginList);
@@ -41,13 +44,13 @@ export var EuiMarkdownFormat = function EuiMarkdownFormat(_ref) {
       return children;
     }
   }, [children, processor]);
-  var euiTheme = useEuiTheme();
-  var styles = euiMarkdownFormatStyles(euiTheme);
-  var cssStyles = [styles.euiMarkdownFormat, styles[textSize]];
+  var styles = useEuiMemoizedStyles(euiMarkdownFormatStyles);
+  var cssStyles = [styles.euiMarkdownFormat, styles[textSize], _isNamedColor(color) ? styles.colors[color] : styles.colors.custom];
   var classes = classNames('euiMarkdownFormat', className);
   return ___EmotionJSX(EuiText, _extends({
     size: textSize,
     css: cssStyles,
-    className: classes
+    className: classes,
+    color: color
   }, rest), result);
 };