@elastic/eui 94.2.1 → 94.4.0

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);
 };

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

@@ -7,6 +7,7 @@
  */
 
 import { css } from '@emotion/react';
+import { transparentize } from '../../services';
 import { logicalCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 
 /**
@@ -15,10 +16,7 @@ import { logicalCSS, euiFontSize, mathWithUnits } from '../../global_styling';
 // Internal utility for text scales/sizes
 var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, options) {
   var _euiFontSize = euiFontSize(euiTheme, 'm', options),
-    fontSize = _euiFontSize.fontSize,
-    lineHeight = _euiFontSize.lineHeight;
-  var unit = options.unit;
-  var lineHeightSize = unit === 'em' ? "".concat(lineHeight, "em") : lineHeight;
+    fontSize = _euiFontSize.fontSize;
 
   // Custom scales
   var tablePaddingVertical = mathWithUnits(fontSize, function (x) {
@@ -27,7 +25,14 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var tablePaddingHorizontal = mathWithUnits(fontSize, function (x) {
     return x / 2;
   });
-  return "\n    .euiCheckbox .euiCheckbox__input ~ .euiCheckbox__label { // Extra specificity necessary to override default checkbox CSS\n      font-size: ".concat(fontSize, ";\n      ").concat(logicalCSS('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat(logicalCSS('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(logicalCSS('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+  return "\n    .euiMarkdownFormat__codeblockWrapper {\n      ".concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat(logicalCSS('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('padding-vertical', tablePaddingVertical), "\n      ").concat(logicalCSS('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+};
+
+// Internal utility for generating border colors based on EuiText colors
+var euiMarkdownAdjustBorderColors = function euiMarkdownAdjustBorderColors(_ref, color) {
+  var euiTheme = _ref.euiTheme;
+  var border = "".concat(euiTheme.border.width.thin, " solid ").concat(color);
+  return "\n    .euiMarkdownFormat__blockquote {\n      ".concat(logicalCSS('border-left-color', color), "\n    }\n\n    .euiHorizontalRule {\n      background-color: ").concat(color, ";\n      color: ").concat(color, "; /* ensure that firefox gets the currentColor */\n    }\n\n    /* Tables */\n\n    .euiMarkdownFormat__table {\n      display: block;\n      ").concat(logicalCSS('width', '100%'), "\n      overflow: auto;\n      border-spacing: 0;\n      border-collapse: collapse;\n      ").concat(logicalCSS('border-left', border), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat(logicalCSS('border-vertical', border), "\n\n      &:last-child {\n        ").concat(logicalCSS('border-right', border), "\n      }\n    }\n\n    .euiMarkdownFormat__table tr {\n      ").concat(logicalCSS('border-top', border), "\n    }\n  ");
 };
 
 /**
@@ -35,20 +40,30 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
  */
 export var euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiTheme) {
   return {
-    // TODO: Remaining _markdown_format.scss styles
     euiMarkdownFormat: /*#__PURE__*/css(";label:euiMarkdownFormat;"),
     // Text sizes
     m: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 'm'
-    }), ";;label:m;"),
+    }), ";label:m;"),
     s: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 's'
-    }), ";;label:s;"),
+    }), ";label:s;"),
     xs: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 'xs'
-    }), ";;label:xs;"),
+    }), ";label:xs;"),
     relative: /*#__PURE__*/css(euiScaleMarkdownFormatText(euiTheme, {
       unit: 'em'
-    }), ";;label:relative;")
+    }), ";label:relative;"),
+    colors: {
+      default: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, transparentize(euiTheme.euiTheme.colors.fullShade, 0.15)), ";label:default;"),
+      subdued: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.subduedText), ";label:subdued;"),
+      success: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.success), ";label:success;"),
+      accent: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accent), ";label:accent;"),
+      warning: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.warning), ";label:warning;"),
+      danger: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.danger), ";label:danger;"),
+      ghost: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.ghost), ";label:ghost;"),
+      inherit: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:inherit;"),
+      custom: /*#__PURE__*/css(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:custom;")
+    }
   };
 };

package/optimize/es/components/markdown_editor/plugins/markdown_checkbox/renderer.js

@@ -7,6 +7,8 @@
  */
 
 import React, { useContext } from 'react';
+import { css } from '@emotion/react';
+import { logicalCSS } from '../../../../global_styling';
 import { EuiCheckbox } from '../../../form/checkbox';
 import { EuiMarkdownContext } from '../../markdown_context';
 import { useGeneratedHtmlId } from '../../../../services/accessibility';
@@ -18,13 +20,17 @@ export var CheckboxMarkdownRenderer = function CheckboxMarkdownRenderer(_ref) {
     isChecked = _ref.isChecked,
     children = _ref.children;
   var _useContext = useContext(EuiMarkdownContext),
-    replaceNode = _useContext.replaceNode;
+    replaceNode = _useContext.replaceNode,
+    readOnly = _useContext.readOnly;
   return ___EmotionJSX(EuiCheckbox, {
     id: useGeneratedHtmlId(),
     checked: isChecked,
     label: children,
     onChange: function onChange() {
       replaceNode(position, "".concat(lead, "[").concat(isChecked ? ' ' : 'x', "]").concat(label));
-    }
+    },
+    css: markdownCheckboxStyles,
+    readOnly: readOnly
   });
-};
+};
+var markdownCheckboxStyles = /*#__PURE__*/css("&&{.euiCheckbox__input~.euiCheckbox__label{font-size:inherit;line-height:inherit;", logicalCSS('padding-left', '1.5em'), ";}&:has(+ :not(.euiCheckbox)){", logicalCSS('margin-bottom', '1em'), ";}.euiCheckbox__input+.euiCheckbox__square{", logicalCSS('top', '50%'), " transform:translateY(-50%);}};label:markdownCheckboxStyles;");

package/optimize/es/components/markdown_editor/plugins/markdown_tooltip/renderer.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
@@ -10,13 +11,23 @@ import React from 'react';
 import { EuiToolTip } from '../../../tool_tip';
 import { EuiIcon } from '../../../icon';
 import { jsx as ___EmotionJSX } from "@emotion/react";
+var _ref2 = process.env.NODE_ENV === "production" ? {
+  name: "blrk0m-tooltipMarkdownRenderer",
+  styles: "transform:translateY(-1px);label:tooltipMarkdownRenderer;"
+} : {
+  name: "blrk0m-tooltipMarkdownRenderer",
+  styles: "transform:translateY(-1px);label:tooltipMarkdownRenderer;",
+  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
+};
 export var tooltipMarkdownRenderer = function tooltipMarkdownRenderer(_ref) {
   var content = _ref.content,
     children = _ref.children;
   return ___EmotionJSX("span", null, ___EmotionJSX(EuiToolTip, {
     content: content
   }, ___EmotionJSX("span", null, ___EmotionJSX("strong", null, children), ___EmotionJSX(EuiIcon, {
-    type: "questionInCircle",
-    className: "euiMarkdownTooltip__icon"
+    type: "questionInCircle"
+    // This is to offset the tooltip icon, which isn't perfectly centered
+    ,
+    css: _ref2
   }))));
 };

package/optimize/es/components/popover/input_popover.js

@@ -140,29 +140,35 @@ export var EuiInputPopover = function EuiInputPopover(_ref) {
   useEffect(function () {
     // When the popover opens, add a scroll listener to the page (& remove it after)
     if (closeOnScroll && panelEl) {
-      // Close the popover, but only if the scroll event occurs outside the input or the popover itself
       var closePopoverOnScroll = function closePopoverOnScroll(event) {
-        if (!panelEl || !inputEl || !event.target) return;
         var scrollTarget = event.target;
-        if (panelEl.contains(scrollTarget) === false && inputEl.contains(scrollTarget) === false) {
-          closePopover();
+
+        // Basic existence check
+        if (!panelEl || !inputEl || !scrollTarget) {
+          return;
+        }
+        // Do not close the popover if the input or popover itself was scrolled
+        if (panelEl.contains(scrollTarget) || inputEl.contains(scrollTarget)) {
+          return;
         }
+        // Firefox will trigger a scroll event in many common situations (e.g. docs side nav)
+        // when the options list div is appended to the DOM. To work around this, we should
+        // check if the element that scrolled actually contains/will affect the input
+        if (!scrollTarget.contains(inputEl)) {
+          return;
+        }
+        closePopover();
       };
+      window.addEventListener('scroll', closePopoverOnScroll, {
+        passive: true,
+        // for better performance as we won't call preventDefault
+        capture: true // scroll events don't bubble, they must be captured instead
+      });
 
-      // Firefox will trigger a scroll event in many common situations when the options list div is appended
-      // to the DOM; in testing it was always within 100ms, but setting a timeout here for 500ms to be safe
-      var timeoutId = setTimeout(function () {
-        window.addEventListener('scroll', closePopoverOnScroll, {
-          passive: true,
-          // for better performance as we won't call preventDefault
-          capture: true // scroll events don't bubble, they must be captured instead
-        });
-      }, 500);
       return function () {
         window.removeEventListener('scroll', closePopoverOnScroll, {
           capture: true
         });
-        clearTimeout(timeoutId);
       };
     }
   }, [closeOnScroll, closePopover, panelEl, inputEl]);