@elastic/eui 94.3.0 → 94.4.1

package/lib/components/markdown_editor/markdown_editor.js

@@ -9,17 +9,18 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
 var _unified = _interopRequireDefault(require("unified"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
+var _modal = require("../modal");
+var _resize_observer = require("../observer/resize_observer");
 var _markdown_actions = _interopRequireWildcard(require("./markdown_actions"));
 var _markdown_editor_toolbar = require("./markdown_editor_toolbar");
 var _markdown_editor_text_area = require("./markdown_editor_text_area");
 var _markdown_format = require("./markdown_format");
 var _markdown_editor_drop_zone = require("./markdown_editor_drop_zone");
-var _services = require("../../services");
 var _markdown_modes = require("./markdown_modes");
-var _modal = require("../modal");
 var _markdown_context = require("./markdown_context");
 var _markdown_default_plugins = require("./plugins/markdown_default_plugins");
-var _resize_observer = require("../observer/resize_observer");
+var _markdown_editor = require("./markdown_editor.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["className", "editorId", "value", "onChange", "height", "maxHeight", "autoExpandPreview", "parsingPluginList", "processingPluginList", "uiPlugins", "onParse", "errors", "aria-label", "aria-labelledby", "aria-describedby", "initialViewMode", "dropHandlers", "markdownFormatProps", "placeholder", "readOnly"];
 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); }
@@ -256,10 +257,10 @@ var EuiMarkdownEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     _useState12 = _slicedToArray(_useState11, 2),
     editorToolbarHeight = _useState12[0],
     setEditorToolbarHeight = _useState12[1];
+  var styles = (0, _services.useEuiMemoizedStyles)(_markdown_editor.euiMarkdownEditorStyles);
+  var cssStyles = [styles.euiMarkdownEditor, height === 'full' && styles.fullHeight];
   var classes = (0, _classnames.default)('euiMarkdownEditor', {
-    'euiMarkdownEditor--fullHeight': height === 'full'
-  }, {
-    'euiMarkdownEditor--isPreviewing': isPreviewing
+    'euiMarkdownEditor-isPreviewing': isPreviewing
   }, className);
   var classesPreview = (0, _classnames.default)('euiMarkdownEditorPreview', {
     'euiMarkdownEditorPreview-isReadOnly': readOnly
@@ -298,7 +299,8 @@ var EuiMarkdownEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   return (0, _react2.jsx)(_markdown_context.EuiMarkdownContext.Provider, {
     value: contextValue
   }, (0, _react2.jsx)("div", _extends({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), (0, _react2.jsx)(_markdown_editor_toolbar.EuiMarkdownEditorToolbar, {
     ref: editorToolbarRef,
     selectedNode: selectedNode,
@@ -311,6 +313,7 @@ var EuiMarkdownEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   }), isPreviewing && (0, _react2.jsx)("div", {
     ref: previewRef,
     className: classesPreview,
+    css: styles.euiMarkdownEditorPreview,
     style: {
       height: previewHeight
     }
@@ -320,7 +323,8 @@ var EuiMarkdownEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   }, markdownFormatProps), value)), (0, _react2.jsx)("div", {
     className: "euiMarkdownEditor__toggleContainer",
     style: {
-      height: editorToggleContainerHeight
+      height: editorToggleContainerHeight,
+      display: isPreviewing ? 'none' : undefined
     }
   }, (0, _react2.jsx)(_markdown_editor_drop_zone.EuiMarkdownEditorDropZone, {
     setEditorFooterHeight: setEditorFooterHeight,

package/lib/components/markdown_editor/markdown_editor.styles.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiMarkdownEditorVariables = exports.euiMarkdownEditorStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+/*
+ * 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 euiMarkdownEditorVariables = function euiMarkdownEditorVariables(_ref) {
+  var euiTheme = _ref.euiTheme;
+  return {
+    minHeight: '150px',
+    borderRadius: euiTheme.border.radius.medium,
+    barsBackgroundColor: euiTheme.colors.lightestShade
+  };
+};
+exports.euiMarkdownEditorVariables = euiMarkdownEditorVariables;
+var euiMarkdownEditorStyles = function euiMarkdownEditorStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = euiMarkdownEditorVariables(euiThemeContext),
+    minHeight = _euiMarkdownEditorVar.minHeight,
+    borderRadius = _euiMarkdownEditorVar.borderRadius;
+  return {
+    euiMarkdownEditor: /*#__PURE__*/(0, _react.css)("display:flex;flex-direction:column;.euiMarkdownEditorToolbar{", (0, _global_styling.logicalBorderRadiusCSS)("".concat(borderRadius, " ").concat(borderRadius, " 0 0"), true), ";}.euiMarkdownEditorPreview,.euiMarkdownEditorFooter{", (0, _global_styling.logicalBorderRadiusCSS)("0 0 ".concat(borderRadius, " ").concat(borderRadius), true), ";};label:euiMarkdownEditor;"),
+    fullHeight: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " .euiMarkdownEditorTextArea{resize:none;}.euiMarkdownEditorDropZone{", (0, _global_styling.logicalCSS)('height', '100%'), ";};label:fullHeight;"),
+    euiMarkdownEditorPreview: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('min-height', minHeight), " ", (0, _global_styling.logicalCSSWithFallback)('overflow-y', 'auto'), " ", (0, _global_styling.euiScrollBarStyles)(euiThemeContext), " padding:", euiTheme.size.m, ";border:", euiTheme.border.thin, ";background-color:", euiTheme.colors.emptyShade, ";;label:euiMarkdownEditorPreview;")
+  };
+};
+exports.euiMarkdownEditorStyles = euiMarkdownEditorStyles;

package/lib/components/markdown_editor/markdown_editor_drop_zone.js

@@ -9,13 +9,21 @@ var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _reactDropzone = require("react-dropzone");
-var _markdown_editor_footer = require("./markdown_editor_footer");
+var _services = require("../../services");
 var _resize_observer = require("../observer/resize_observer");
+var _markdown_context = require("./markdown_context");
+var _markdown_editor_footer = require("./markdown_editor_footer");
+var _markdown_editor_drop_zone = require("./markdown_editor_drop_zone.styles");
 var _react2 = require("@emotion/react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+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; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
 function _slicedToArray(arr, i) { return _arrayWithHoles(arr) || _iterableToArrayLimit(arr, i) || _unsupportedIterableToArray(arr, i) || _nonIterableRest(); }
 function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
 function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
@@ -46,6 +54,8 @@ var getUnacceptedItems = function getUnacceptedItems(items, dropHandlers) {
   return unacceptedItems;
 };
 var EuiMarkdownEditorDropZone = function EuiMarkdownEditorDropZone(props) {
+  var _useContext = (0, _react.useContext)(_markdown_context.EuiMarkdownContext),
+    readOnly = _useContext.readOnly;
   var _React$useState = _react.default.useState(false),
     _React$useState2 = _slicedToArray(_React$useState, 2),
     isDragging = _React$useState2[0],
@@ -67,11 +77,9 @@ var EuiMarkdownEditorDropZone = function EuiMarkdownEditorDropZone(props) {
     setHasUnacceptedItems = props.setHasUnacceptedItems,
     setEditorFooterHeight = props.setEditorFooterHeight,
     isEditing = props.isEditing;
-  var classes = (0, _classnames.default)('euiMarkdownEditorDropZone', {
-    'euiMarkdownEditorDropZone--isDragging': isDragging,
-    'euiMarkdownEditorDropZone--hasError': hasUnacceptedItems,
-    'euiMarkdownEditorDropZone--isDraggingError': isDraggingError
-  });
+  var classes = (0, _classnames.default)('euiMarkdownEditorDropZone');
+  var styles = (0, _services.useEuiMemoizedStyles)(_markdown_editor_drop_zone.euiMarkdownEditorDropZoneStyles);
+  var cssStyles = [styles.euiMarkdownEditorDropZone, isDragging && !isDraggingError && styles.isDragging, isDraggingError && styles.isDraggingError, (hasUnacceptedItems || errors.length > 0) && styles.hasError];
   var _React$useState7 = _react.default.useState(null),
     _React$useState8 = _slicedToArray(_React$useState7, 2),
     editorFooterRef = _React$useState8[0],
@@ -84,7 +92,7 @@ var EuiMarkdownEditorDropZone = function EuiMarkdownEditorDropZone(props) {
     }
   }, [setEditorFooterHeight, isEditing, editorFooterHeight]);
   var _useDropzone = (0, _reactDropzone.useDropzone)({
-      disabled: dropHandlers.length === 0,
+      disabled: dropHandlers.length === 0 || readOnly,
       // Disable click and keydown behavior
       noClick: true,
       noKeyboard: true,
@@ -169,7 +177,11 @@ var EuiMarkdownEditorDropZone = function EuiMarkdownEditorDropZone(props) {
     getRootProps = _useDropzone.getRootProps,
     getInputProps = _useDropzone.getInputProps,
     open = _useDropzone.open;
-  return (0, _react2.jsx)("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 (0, _react2.jsx)("div", _extends({}, rootProps, {
+    css: cssStyles,
     className: classes
   }), children, (0, _react2.jsx)(_markdown_editor_footer.EuiMarkdownEditorFooter, {
     ref: setEditorFooterRef,

package/lib/components/markdown_editor/markdown_editor_drop_zone.styles.js

@@ -0,0 +1,38 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiMarkdownEditorDropZoneStyles = void 0;
+var _react = require("@emotion/react");
+var _services = require("../../services");
+var _global_styling = require("../../global_styling");
+var _markdown_editor = require("./markdown_editor.styles");
+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.
+                                                                                                                                                                                                                                                                                           */
+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__
+};
+var euiMarkdownEditorDropZoneStyles = function euiMarkdownEditorDropZoneStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = (0, _markdown_editor.euiMarkdownEditorVariables)(euiThemeContext),
+    minHeight = _euiMarkdownEditorVar.minHeight;
+  return {
+    euiMarkdownEditorDropZone: /*#__PURE__*/(0, _react.css)("position:relative;display:flex;flex-direction:column;", (0, _global_styling.logicalCSS)('min-height', minHeight), ";;label:euiMarkdownEditorDropZone;"),
+    isDragging: /*#__PURE__*/(0, _react.css)(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", (0, _services.transparentize)(euiTheme.colors.primary, 0.1), "!important;};label:isDragging;"),
+    isDraggingError: /*#__PURE__*/(0, _react.css)(".euiMarkdownEditorFooter,.euiMarkdownEditorTextArea{background-color:", (0, _services.transparentize)(euiTheme.colors.danger, 0.1), "!important;};label:isDraggingError;"),
+    hasError: /*#__PURE__*/(0, _react.css)(".euiMarkdownEditorTextArea{--euiFormStateColor:", euiTheme.colors.danger, "!important;background-size:100% 100%;};label:hasError;"),
+    euiMarkdownEditorDropZone__input: _ref
+  };
+};
+exports.euiMarkdownEditorDropZoneStyles = euiMarkdownEditorDropZoneStyles;

package/lib/components/markdown_editor/markdown_editor_footer.js

@@ -7,6 +7,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiMarkdownEditorFooter = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _services = require("../../services");
 var _loading = require("../loading");
 var _button = require("../button");
 var _title = require("../title");
@@ -16,10 +17,11 @@ var _popover = require("../popover");
 var _text = require("../text");
 var _spacer = require("../spacer");
 var _tool_tip = require("../tool_tip");
-var _markdown_logo = _interopRequireDefault(require("./icons/markdown_logo"));
 var _horizontal_rule = require("../horizontal_rule");
 var _link = require("../link");
 var _markdown_context = require("./markdown_context");
+var _markdown_logo = _interopRequireDefault(require("./icons/markdown_logo"));
+var _markdown_editor_footer = require("./markdown_editor_footer.styles");
 var _react2 = require("@emotion/react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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); }
@@ -43,6 +45,7 @@ var EuiMarkdownEditorFooter = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     errors = props.errors,
     hasUnacceptedItems = props.hasUnacceptedItems,
     dropHandlers = props.dropHandlers;
+  var styles = (0, _services.useEuiMemoizedStyles)(_markdown_editor_footer.euiMarkdownEditorFooterStyles);
   var _useState = (0, _react.useState)(false),
     _useState2 = _slicedToArray(_useState, 2),
     isShowingHelpModal = _useState2[0],
@@ -94,6 +97,7 @@ var EuiMarkdownEditorFooter = /*#__PURE__*/(0, _react.forwardRef)(function (prop
     uploadButton = (0, _react2.jsx)(_tool_tip.EuiToolTip, {
       content: ariaLabels.supportedFileTypes
     }, (0, _react2.jsx)(_button.EuiButtonEmpty, {
+      css: styles.euiMarkdownEditorFooter__uploadError,
       className: "euiMarkdownEditorFooter__uploadError",
       autoFocus: true,
       size: "s",
@@ -129,6 +133,7 @@ var EuiMarkdownEditorFooter = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       panelPaddingSize: "s",
       anchorPosition: "upCenter"
     }, (0, _react2.jsx)("div", {
+      css: styles.euiMarkdownEditorFooter__popover,
       className: "euiMarkdownEditorFooter__popover"
     }, (0, _react2.jsx)(_popover.EuiPopoverTitle, null, (0, _react2.jsx)(_i18n.EuiI18n, {
       token: "euiMarkdownEditorFooter.errorsTitle",
@@ -159,6 +164,7 @@ var EuiMarkdownEditorFooter = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       content: syntaxTitle
     }, (0, _react2.jsx)(_button.EuiButtonIcon, {
       size: "s",
+      css: styles.euiMarkdownEditorFooter__helpButton,
       className: "euiMarkdownEditorFooter__helpButton",
       iconType: _markdown_logo.default,
       color: "text",
@@ -205,6 +211,7 @@ var EuiMarkdownEditorFooter = /*#__PURE__*/(0, _react.forwardRef)(function (prop
       button: (0, _react2.jsx)(_button.EuiButtonIcon, {
         title: syntaxTitle,
         size: "s",
+        css: styles.euiMarkdownEditorFooter__helpButton,
         className: "euiMarkdownEditorFooter__helpButton",
         iconType: _markdown_logo.default,
         color: "text",
@@ -230,8 +237,10 @@ var EuiMarkdownEditorFooter = /*#__PURE__*/(0, _react.forwardRef)(function (prop
   }
   return (0, _react2.jsx)("div", {
     ref: ref,
+    css: styles.euiMarkdownEditorFooter,
     className: "euiMarkdownEditorFooter"
   }, (0, _react2.jsx)("div", {
+    css: styles.euiMarkdownEditorFooter__actions,
     className: "euiMarkdownEditorFooter__actions"
   }, uploadButton, errorsButton), helpSyntaxButton);
 });

package/lib/components/markdown_editor/markdown_editor_footer.styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiMarkdownEditorFooterStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _markdown_editor = require("./markdown_editor.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 euiMarkdownEditorFooterStyles = function euiMarkdownEditorFooterStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = (0, _markdown_editor.euiMarkdownEditorVariables)(euiThemeContext),
+    borderRadius = _euiMarkdownEditorVar.borderRadius,
+    barsBackgroundColor = _euiMarkdownEditorVar.barsBackgroundColor;
+  return {
+    euiMarkdownEditorFooter: /*#__PURE__*/(0, _react.css)("display:inline-flex;align-items:center;padding:", euiTheme.size.xs, ";border:", euiTheme.border.thin, ";background-color:", barsBackgroundColor, ";;label:euiMarkdownEditorFooter;"),
+    euiMarkdownEditorFooter__actions: /*#__PURE__*/(0, _react.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__*/(0, _react.css)("border-radius:", borderRadius, ";;label:euiMarkdownEditorFooter__uploadError;"),
+    // Override the default button icon width size
+    euiMarkdownEditorFooter__helpButton: /*#__PURE__*/(0, _react.css)(".euiIcon{", (0, _global_styling.logicalCSS)('width', '26px'), ";};label:euiMarkdownEditorFooter__helpButton;"),
+    euiMarkdownEditorFooter__popover: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', '300px'), ";;label:euiMarkdownEditorFooter__popover;")
+  };
+};
+exports.euiMarkdownEditorFooterStyles = euiMarkdownEditorFooterStyles;

package/lib/components/markdown_editor/markdown_editor_text_area.js

@@ -8,7 +8,9 @@ exports.EuiMarkdownEditorTextArea = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _classnames = _interopRequireDefault(require("classnames"));
+var _services = require("../../services");
 var _markdown_context = require("./markdown_context");
+var _markdown_editor_text_area = require("./markdown_editor_text_area.styles");
 var _react2 = require("@emotion/react");
 var _excluded = ["children", "compressed", "id", "isInvalid", "name", "placeholder", "rows", "height", "maxHeight"];
 /*
@@ -40,6 +42,8 @@ var EuiMarkdownEditorTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (_r
   var classes = (0, _classnames.default)('euiMarkdownEditorTextArea', {
     'euiMarkdownEditorTextArea-isReadOnly': readOnly
   });
+  var styles = (0, _services.useEuiMemoizedStyles)(_markdown_editor_text_area.euiMarkdownEditorTextAreaStyles);
+  var cssStyles = [styles.euiMarkdownEditorTextArea, readOnly ? styles.readOnly : styles.editable];
 
   // Ignore invalid empty string style values
   var style = {};
@@ -53,7 +57,8 @@ var EuiMarkdownEditorTextArea = /*#__PURE__*/(0, _react.forwardRef)(function (_r
     ref: ref,
     "data-test-subj": "euiMarkdownEditorTextArea",
     style: style,
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest, {
     rows: 6,
     name: name,

package/lib/components/markdown_editor/markdown_editor_text_area.styles.js

@@ -0,0 +1,29 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiMarkdownEditorTextAreaStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _form = require("../form/form.styles");
+var _markdown_editor = require("./markdown_editor.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 euiMarkdownEditorTextAreaStyles = function euiMarkdownEditorTextAreaStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = (0, _markdown_editor.euiMarkdownEditorVariables)(euiThemeContext),
+    minHeight = _euiMarkdownEditorVar.minHeight;
+  return {
+    euiMarkdownEditorTextArea: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)('100%'), " ", (0, _global_styling.logicalCSS)('min-height', minHeight), " ", (0, _global_styling.euiScrollBarStyles)(euiThemeContext), " resize:vertical;margin:0;padding:", euiTheme.size.m, ";", (0, _form.euiFormControlText)(euiThemeContext), " line-height:", euiTheme.font.lineHeightMultiplier, ";border:", euiTheme.border.thin, ";", (0, _global_styling.logicalCSS)('border-bottom', 'none'), ";;label:euiMarkdownEditorTextArea;"),
+    readOnly: /*#__PURE__*/(0, _react.css)("background-color:", euiTheme.colors.emptyShade, ";cursor:default;&:focus{outline:none;};label:readOnly;"),
+    editable: /*#__PURE__*/(0, _react.css)((0, _form.euiFormControlDefaultShadow)(euiThemeContext), " box-shadow:none;&:focus,.euiMarkdownEditor:focus-within &{", (0, _form.euiFormControlFocusStyles)(euiThemeContext), ";};label:editable;")
+  };
+};
+exports.euiMarkdownEditorTextAreaStyles = euiMarkdownEditorTextAreaStyles;

package/lib/components/markdown_editor/markdown_editor_toolbar.js

@@ -7,11 +7,13 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiMarkdownEditorToolbar = void 0;
 var _propTypes = _interopRequireDefault(require("prop-types"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../services");
 var _button = require("../button");
 var _i18n = require("../i18n");
 var _tool_tip = require("../tool_tip");
 var _markdown_modes = require("./markdown_modes");
 var _markdown_context = require("./markdown_context");
+var _markdown_editor_toolbar = require("./markdown_editor_toolbar.styles");
 var _react2 = require("@emotion/react");
 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; }
@@ -107,11 +109,14 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
   };
   var isPreviewing = viewMode === _markdown_modes.MODE_VIEWING;
   var isEditable = !isPreviewing && !readOnly;
+  var styles = (0, _services.useEuiMemoizedStyles)(_markdown_editor_toolbar.euiMarkdownEditorToolbarStyles);
   return (0, _react2.jsx)("div", {
     ref: ref,
-    "data-test-subj": "euiMarkdownEditorToolbar",
-    className: "euiMarkdownEditorToolbar"
+    css: styles.euiMarkdownEditorToolbar,
+    className: "euiMarkdownEditorToolbar",
+    "data-test-subj": "euiMarkdownEditorToolbar"
   }, (0, _react2.jsx)("div", {
+    css: styles.euiMarkdownEditorToolbar__buttons,
     className: "euiMarkdownEditorToolbar__buttons"
   }, boldItalicButtons.map(function (item) {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
@@ -128,6 +133,7 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
       icon: item.iconType
     }));
   }), (0, _react2.jsx)("span", {
+    css: styles.euiMarkdownEditorToolbar__divider,
     className: "euiMarkdownEditorToolbar__divider"
   }), listButtons.map(function (item) {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
@@ -144,6 +150,7 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
       icon: item.iconType
     }));
   }), (0, _react2.jsx)("span", {
+    css: styles.euiMarkdownEditorToolbar__divider,
     className: "euiMarkdownEditorToolbar__divider"
   }), quoteCodeLinkButtons.map(function (item) {
     return (0, _react2.jsx)(_tool_tip.EuiToolTip, {
@@ -160,6 +167,7 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
       icon: item.iconType
     }));
   }), uiPlugins.length > 0 ? (0, _react2.jsx)(_react.default.Fragment, null, (0, _react2.jsx)("span", {
+    css: styles.euiMarkdownEditorToolbar__divider,
     className: "euiMarkdownEditorToolbar__divider"
   }), uiPlugins.map(function (_ref3) {
     var name = _ref3.name,

package/lib/components/markdown_editor/markdown_editor_toolbar.styles.js

@@ -0,0 +1,28 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.euiMarkdownEditorToolbarStyles = void 0;
+var _react = require("@emotion/react");
+var _global_styling = require("../../global_styling");
+var _markdown_editor = require("./markdown_editor.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 euiMarkdownEditorToolbarStyles = function euiMarkdownEditorToolbarStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  var _euiMarkdownEditorVar = (0, _markdown_editor.euiMarkdownEditorVariables)(euiThemeContext),
+    barsBackgroundColor = _euiMarkdownEditorVar.barsBackgroundColor;
+  return {
+    euiMarkdownEditorToolbar: /*#__PURE__*/(0, _react.css)("display:flex;flex-wrap:wrap;padding:", euiTheme.size.xs, ";background-color:", barsBackgroundColor, ";border:", euiTheme.border.thin, ";", (0, _global_styling.logicalCSS)('border-bottom', 'none'), ";;label:euiMarkdownEditorToolbar;"),
+    euiMarkdownEditorToolbar__buttons: /*#__PURE__*/(0, _react.css)("flex:1;display:flex;flex-wrap:wrap;align-items:center;column-gap:", euiTheme.size.xs, ";;label:euiMarkdownEditorToolbar__buttons;"),
+    euiMarkdownEditorToolbar__divider: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('height', euiTheme.size.l), " ", (0, _global_styling.logicalCSS)('margin-left', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('padding-right', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('border-left', "".concat(euiTheme.border.width.thin, " solid ").concat(euiTheme.border.color)), ";;label:euiMarkdownEditorToolbar__divider;")
+  };
+};
+exports.euiMarkdownEditorToolbarStyles = euiMarkdownEditorToolbarStyles;

package/lib/components/markdown_editor/markdown_format.js

@@ -10,11 +10,12 @@ var _propTypes = _interopRequireDefault(require("prop-types"));
 var _unified = _interopRequireDefault(require("unified"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _text = require("../text/text");
+var _text_color = require("../text/text_color");
 var _services = require("../../services");
 var _markdown_format = require("./markdown_format.styles");
 var _markdown_default_plugins = require("./plugins/markdown_default_plugins");
 var _react2 = require("@emotion/react");
-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
@@ -37,6 +38,8 @@ var EuiMarkdownFormat = function EuiMarkdownFormat(_ref) {
     processingPluginList = _ref$processingPlugin === void 0 ? _markdown_default_plugins.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 = (0, _react.useMemo)(function () {
     return (0, _unified.default)().use(parsingPluginList).use(processingPluginList);
@@ -52,14 +55,14 @@ var EuiMarkdownFormat = function EuiMarkdownFormat(_ref) {
       return children;
     }
   }, [children, processor]);
-  var euiTheme = (0, _services.useEuiTheme)();
-  var styles = (0, _markdown_format.euiMarkdownFormatStyles)(euiTheme);
-  var cssStyles = [styles.euiMarkdownFormat, styles[textSize]];
+  var styles = (0, _services.useEuiMemoizedStyles)(_markdown_format.euiMarkdownFormatStyles);
+  var cssStyles = [styles.euiMarkdownFormat, styles[textSize], (0, _text_color._isNamedColor)(color) ? styles.colors[color] : styles.colors.custom];
   var classes = (0, _classnames.default)('euiMarkdownFormat', className);
   return (0, _react2.jsx)(_text.EuiText, _extends({
     size: textSize,
     css: cssStyles,
-    className: classes
+    className: classes,
+    color: color
   }, rest), result);
 };
 exports.EuiMarkdownFormat = EuiMarkdownFormat;

package/lib/components/markdown_editor/markdown_format.styles.js

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.euiMarkdownFormatStyles = void 0;
 var _react = require("@emotion/react");
+var _services = require("../../services");
 var _global_styling = require("../../global_styling");
 /*
  * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
@@ -19,10 +20,7 @@ var _global_styling = require("../../global_styling");
  */ // Internal utility for text scales/sizes
 var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, options) {
   var _euiFontSize = (0, _global_styling.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 = (0, _global_styling.mathWithUnits)(fontSize, function (x) {
@@ -31,7 +29,14 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
   var tablePaddingHorizontal = (0, _global_styling.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((0, _global_styling.logicalCSS)('padding-left', lineHeightSize), "\n      line-height: ").concat(lineHeight, ";\n    }\n\n    .euiCheckbox + *:not(.euiCheckbox) {\n      ").concat((0, _global_styling.logicalCSS)('margin-top', fontSize), "\n    }\n\n    .euiMarkdownFormat__codeblockWrapper {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.logicalCSS)('padding-horizontal', tablePaddingHorizontal), "\n    }\n  ");
+  return "\n    .euiMarkdownFormat__codeblockWrapper {\n      ".concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table {\n      ").concat((0, _global_styling.logicalCSS)('margin-bottom', fontSize), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('padding-vertical', tablePaddingVertical), "\n      ").concat((0, _global_styling.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((0, _global_styling.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((0, _global_styling.logicalCSS)('width', '100%'), "\n      overflow: auto;\n      border-spacing: 0;\n      border-collapse: collapse;\n      ").concat((0, _global_styling.logicalCSS)('border-left', border), "\n    }\n\n    .euiMarkdownFormat__table th,\n    .euiMarkdownFormat__table td {\n      ").concat((0, _global_styling.logicalCSS)('border-vertical', border), "\n\n      &:last-child {\n        ").concat((0, _global_styling.logicalCSS)('border-right', border), "\n      }\n    }\n\n    .euiMarkdownFormat__table tr {\n      ").concat((0, _global_styling.logicalCSS)('border-top', border), "\n    }\n  ");
 };
 
 /**
@@ -39,21 +44,31 @@ var euiScaleMarkdownFormatText = function euiScaleMarkdownFormatText(euiTheme, o
  */
 var euiMarkdownFormatStyles = function euiMarkdownFormatStyles(euiTheme) {
   return {
-    // TODO: Remaining _markdown_format.scss styles
     euiMarkdownFormat: /*#__PURE__*/(0, _react.css)(";label:euiMarkdownFormat;"),
     // Text sizes
     m: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 'm'
-    }), ";;label:m;"),
+    }), ";label:m;"),
     s: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 's'
-    }), ";;label:s;"),
+    }), ";label:s;"),
     xs: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
       customScale: 'xs'
-    }), ";;label:xs;"),
+    }), ";label:xs;"),
     relative: /*#__PURE__*/(0, _react.css)(euiScaleMarkdownFormatText(euiTheme, {
       unit: 'em'
-    }), ";;label:relative;")
+    }), ";label:relative;"),
+    colors: {
+      default: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, (0, _services.transparentize)(euiTheme.euiTheme.colors.fullShade, 0.15)), ";label:default;"),
+      subdued: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.subduedText), ";label:subdued;"),
+      success: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.success), ";label:success;"),
+      accent: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.accent), ";label:accent;"),
+      warning: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.warning), ";label:warning;"),
+      danger: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.danger), ";label:danger;"),
+      ghost: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, euiTheme.euiTheme.colors.ghost), ";label:ghost;"),
+      inherit: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:inherit;"),
+      custom: /*#__PURE__*/(0, _react.css)(euiMarkdownAdjustBorderColors(euiTheme, 'currentColor'), ";label:custom;")
+    }
   };
 };
 exports.euiMarkdownFormatStyles = euiMarkdownFormatStyles;

package/lib/components/markdown_editor/plugins/markdown_checkbox/renderer.js

@@ -7,10 +7,11 @@ Object.defineProperty(exports, "__esModule", {
 exports.CheckboxMarkdownRenderer = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _propTypes = _interopRequireDefault(require("prop-types"));
+var _react2 = require("@emotion/react");
+var _global_styling = require("../../../../global_styling");
 var _checkbox = require("../../../form/checkbox");
 var _markdown_context = require("../../markdown_context");
 var _accessibility = require("../../../../services/accessibility");
-var _react2 = require("@emotion/react");
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 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; }
@@ -29,14 +30,17 @@ var CheckboxMarkdownRenderer = function CheckboxMarkdownRenderer(_ref) {
     isChecked = _ref.isChecked,
     children = _ref.children;
   var _useContext = (0, _react.useContext)(_markdown_context.EuiMarkdownContext),
-    replaceNode = _useContext.replaceNode;
+    replaceNode = _useContext.replaceNode,
+    readOnly = _useContext.readOnly;
   return (0, _react2.jsx)(_checkbox.EuiCheckbox, {
     id: (0, _accessibility.useGeneratedHtmlId)(),
     checked: isChecked,
     label: children,
     onChange: function onChange() {
       replaceNode(position, "".concat(lead, "[").concat(isChecked ? ' ' : 'x', "]").concat(label));
-    }
+    },
+    css: markdownCheckboxStyles,
+    readOnly: readOnly
   });
 };
 exports.CheckboxMarkdownRenderer = CheckboxMarkdownRenderer;
@@ -57,4 +61,5 @@ CheckboxMarkdownRenderer.propTypes = {
       offset: _propTypes.default.number.isRequired
     }).isRequired
   }).isRequired
-};
+};
+var markdownCheckboxStyles = /*#__PURE__*/(0, _react2.css)("&&{.euiCheckbox__input~.euiCheckbox__label{font-size:inherit;line-height:inherit;", (0, _global_styling.logicalCSS)('padding-left', '1.5em'), ";}&:has(+ :not(.euiCheckbox)){", (0, _global_styling.logicalCSS)('margin-bottom', '1em'), ";}.euiCheckbox__input+.euiCheckbox__square{", (0, _global_styling.logicalCSS)('top', '50%'), " transform:translateY(-50%);}};label:markdownCheckboxStyles;");