@elastic/eui 94.2.1 → 94.4.0

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

@@ -0,0 +1,44 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "titleId"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconTokenDimension = function EuiIconTokenDimension(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    d: "M12 10.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1H12v-.5Z"
+  }), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M3 12h3.078c.728 0 1.37-.127 1.924-.383a3.5 3.5 0 1 0 2.053-3.306c.005-.101.008-.205.008-.311 0-.833-.165-1.548-.493-2.145A3.309 3.309 0 0 0 8.18 4.48C7.58 4.16 6.87 4 6.047 4H3v8Zm6.787-2.321A2.5 2.5 0 0 0 11.5 14a2.5 2.5 0 1 0-1.713-4.321ZM6 10.156h-.828V5.844h.766c.416 0 .768.064 1.054.191.29.128.508.348.656.66.151.313.227.748.227 1.305 0 .557-.074.992-.223 1.305a1.29 1.29 0 0 1-.64.66c-.279.127-.616.191-1.012.191Z"
+  }));
+};
+var icon = EuiIconTokenDimension;
+exports.icon = icon;

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

@@ -34,7 +34,10 @@ var EuiIconTokenMetricCounter = function EuiIconTokenMetricCounter(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    d: "M11 3a1 1 0 0 0-1 1v1H9a1 1 0 0 0 0 2h1v1a1 1 0 1 0 2 0V7h1a1 1 0 1 0 0-2h-1V4a1 1 0 0 0-1-1ZM5 7a1 1 0 0 0-1 1v1H3a1 1 0 0 0 0 2h1v1a1 1 0 1 0 2 0v-1h1a1 1 0 1 0 0-2H6V8a1 1 0 0 0-1-1Z"
+    d: "M12 10.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1H12v-.5Z"
+  }), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M8 3h4v5.035A3.5 3.5 0 1 1 8.337 13H2V9h3V6h3V3Zm1.05 9a2.5 2.5 0 1 1 4.902-1 2.5 2.5 0 0 1-4.902 1ZM11 8.035a3.49 3.49 0 0 0-2 1.016V4h2v4.035ZM8 12H6V7h2v5Zm-3 0v-2H3v2h2Z"
   }));
 };
 var icon = EuiIconTokenMetricCounter;

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

@@ -34,7 +34,10 @@ var EuiIconTokenMetricGauge = function EuiIconTokenMetricGauge(_ref) {
   }, props), title ? (0, _react2.jsx)("title", {
     id: titleId
   }, title) : null, (0, _react2.jsx)("path", {
-    d: "M5 4h-.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1 0-1H5v-2h-.5a.5.5 0 0 1 0-1H5V7h-.5a.5.5 0 0 1 0-1H5V4Zm3 1a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H8Z"
+    d: "M12 10.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1H12v-.5Z"
+  }), (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M6 3H2v10h6.337A3.5 3.5 0 1 0 12 8.035V5H8v2H6V3Zm5 5.035V6H9v3.05a3.49 3.49 0 0 1 2-1.015ZM9 11.5a2.5 2.5 0 1 1 5.002 0A2.5 2.5 0 0 1 9 11.5ZM8 8H6v4h2V8ZM5 4H3v8h2V4Z"
   }));
 };
 var icon = EuiIconTokenMetricGauge;

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

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.icon = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+var React = _interopRequireWildcard(require("react"));
+var _react2 = require("@emotion/react");
+var _excluded = ["title", "titleId"];
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+// THIS IS A GENERATED FILE. DO NOT MODIFY MANUALLY. @see scripts/compile-icons.js
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var EuiIconWarningFilled = function EuiIconWarningFilled(_ref) {
+  var title = _ref.title,
+    titleId = _ref.titleId,
+    props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
+  return (0, _react2.jsx)("svg", (0, _extends2.default)({
+    xmlns: "http://www.w3.org/2000/svg",
+    width: 16,
+    height: 16,
+    viewBox: "0 0 16 16",
+    "aria-labelledby": titleId
+  }, props), title ? (0, _react2.jsx)("title", {
+    id: titleId
+  }, title) : null, (0, _react2.jsx)("path", {
+    fillRule: "evenodd",
+    d: "M8 1a1 1 0 0 1 .864.496l7 12A1 1 0 0 1 15 15H1a1 1 0 0 1-.864-1.504l7-12A1 1 0 0 1 8 1Zm.9 4.995-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995a.905.905 0 1 1 1.8 0ZM8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"
+  }));
+};
+var icon = EuiIconWarningFilled;
+exports.icon = icon;

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

@@ -54,7 +54,10 @@ var typeToPathMap = {
   checkInCircleFilled: 'checkInCircleFilled',
   cheer: 'cheer',
   classificationJob: 'ml_classification_job',
+  clickLeft: 'clickLeft',
+  clickRight: 'clickRight',
   clock: 'clock',
+  clockCounter: 'clockCounter',
   cloudDrizzle: 'cloudDrizzle',
   cloudStormy: 'cloudStormy',
   cloudSunny: 'cloudSunny',
@@ -135,6 +138,7 @@ var typeToPathMap = {
   eql: 'eql',
   eraser: 'eraser',
   error: 'error',
+  errorFilled: 'errorFilled',
   esqlVis: 'esqlVis',
   exit: 'exit',
   expand: 'expand',
@@ -442,6 +446,7 @@ var typeToPathMap = {
   visualizeApp: 'app_visualize',
   vulnerabilityManagementApp: 'app_vulnerability_management',
   warning: 'warning',
+  warningFilled: 'warningFilled',
   alert: 'warning',
   // NOTE: This is an undocumented alias for `warning`, added for legacy compatability with Elastic Charts
   watchesApp: 'app_watches',
@@ -459,6 +464,7 @@ var typeToPathMap = {
   tokenCompletionSuggester: 'tokenCompletionSuggester',
   tokenConstant: 'tokenConstant',
   tokenDate: 'tokenDate',
+  tokenDimension: 'tokenDimension',
   tokenElement: 'tokenElement',
   tokenEnum: 'tokenEnum',
   tokenEnumMember: 'tokenEnumMember',

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

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M5 .5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 1 0v-1Zm-3.146.646a.5.5 0 1 0-.708.708l1 1a.5.5 0 1 0 .708-.708l-1-1Z"/>
+  <path fill-rule="evenodd" d="M13 7A5 5 0 0 0 3 7v4a5 5 0 0 0 10 0V7Zm-1 0a4 4 0 0 0-4-4v5a1 1 0 0 1-1 1H4v2a4 4 0 0 0 8 0V7Z"/>
+  <path d="M0 4.5A.5.5 0 0 1 .5 4h1a.5.5 0 0 1 0 1h-1a.5.5 0 0 1-.5-.5Z"/>
+</svg>

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

@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M11 .5a.5.5 0 0 1 1 0v1a.5.5 0 0 1-1 0v-1Zm3.146.646a.5.5 0 0 1 .708.708l-1 1a.5.5 0 0 1-.708-.708l1-1Z"/>
+  <path fill-rule="evenodd" d="M3 7a5 5 0 0 1 10 0v4a5 5 0 0 1-10 0V7Zm1 0a4 4 0 0 1 4-4v5a1 1 0 0 0 1 1h3v2a4 4 0 0 1-8 0V7Z"/>
+  <path d="M16 4.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0 0 1h1a.5.5 0 0 0 .5-.5Z"/>
+</svg>

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

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M11.39 3.61a5.5 5.5 0 0 0-7.78 7.78l.562.56v-1.622a.5.5 0 0 1 1 0v2.829a.5.5 0 0 1-.5.5H1.843a.5.5 0 0 1 0-1h1.621l-.56-.56A6.5 6.5 0 1 1 7.5 14a.5.5 0 0 1 0-1 5.5 5.5 0 0 0 3.89-9.39Z"/>
+  <path d="M7.5 3a.5.5 0 0 1 .5.5V7h2.5a.5.5 0 0 1 0 1h-3a.5.5 0 0 1-.5-.5v-4a.5.5 0 0 1 .5-.5Z"/>
+</svg>

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

@@ -1,3 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path fill-rule="evenodd" d="M10 1a1 1 0 0 1 .707.293l4 4A1 1 0 0 1 15 6v5a1 1 0 0 1-.293.707l-4 4A1 1 0 0 1 10 16H5a1 1 0 0 1-.707-.293l-4-4A1 1 0 0 1 0 11V6a1 1 0 0 1 .293-.707l4-4A1 1 0 0 1 5 1h5ZM4.146 5.146a.5.5 0 0 1 .708 0L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708.708L8.207 8.5l2.647 2.646a.5.5 0 0 1-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 0 1-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 0 1 0-.708Z"/>
+  <path d="M4.854 5.146a.5.5 0 1 0-.708.708L6.793 8.5l-2.647 2.646a.5.5 0 0 0 .708.708L7.5 9.207l2.646 2.647a.5.5 0 0 0 .708-.708L8.207 8.5l2.647-2.646a.5.5 0 0 0-.708-.708L7.5 7.793 4.854 5.146Z"/>
+  <path fill-rule="evenodd" d="M5 1a1 1 0 0 0-.707.293l-4 4A1 1 0 0 0 0 6v5a1 1 0 0 0 .293.707l4 4A1 1 0 0 0 5 16h5a1 1 0 0 0 .707-.293l4-4A1 1 0 0 0 15 11V6a1 1 0 0 0-.293-.707l-4-4A1 1 0 0 0 10 1H5Zm5 1H5L1 6v5l4 4h5l4-4V6l-4-4Z"/>
 </svg>

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M10 1a1 1 0 0 1 .707.293l4 4A1 1 0 0 1 15 6v5a1 1 0 0 1-.293.707l-4 4A1 1 0 0 1 10 16H5a1 1 0 0 1-.707-.293l-4-4A1 1 0 0 1 0 11V6a1 1 0 0 1 .293-.707l4-4A1 1 0 0 1 5 1h5ZM4.146 5.146a.5.5 0 0 1 .708 0L7.5 7.793l2.646-2.647a.5.5 0 0 1 .708.708L8.207 8.5l2.647 2.646a.5.5 0 0 1-.708.708L7.5 9.207l-2.646 2.647a.5.5 0 0 1-.708-.708L6.793 8.5 4.146 5.854a.5.5 0 0 1 0-.708Z"/>
+</svg>

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

@@ -1,5 +1,5 @@
-<svg fill="none" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M11 6a1 1 0 1 1-2 0 1 1 0 0 1 2 0Z"/>
-  <path fill-rule="evenodd" clip-rule="evenodd" d="M10.355 1.791A3.5 3.5 0 0 1 12.57 1H14a1 1 0 0 1 1 1v1.43a3.5 3.5 0 0 1-.791 2.215l-3.144 3.843a2.5 2.5 0 0 0-.565 1.583v1.636l-1.646 1.647a.5.5 0 0 1-.557.103l-.634-.282a11.5 11.5 0 0 1-5.838-5.838l-.282-.634a.5.5 0 0 1 .103-.557L3.293 5.5h1.636a2.5 2.5 0 0 0 1.583-.565l3.843-3.144ZM12.57 2a2.5 2.5 0 0 0-1.583.565L7.145 5.71A3.5 3.5 0 0 1 4.93 6.5H3.707l-1.11 1.11.142.32a10.498 10.498 0 0 0 1.825 2.799l2.082-2.083a.5.5 0 1 1 .708.708L5.27 11.436a10.496 10.496 0 0 0 2.798 1.825l.32.143L9.5 12.293V11.07a3.5 3.5 0 0 1 .791-2.216l3.144-3.843A2.5 2.5 0 0 0 14 3.43V2h-1.43Z"/>
-  <path d="M1.9 10.7a.5.5 0 0 0-.88.163l-1 3.5A.5.5 0 0 0 0 14.5v1a.5.5 0 0 0 .5.5h1a.502.502 0 0 0 .137-.02l3.5-1a.5.5 0 0 0 .163-.88l-1.314-.986a5.5 5.5 0 0 1-1.1-1.1L1.9 10.7Z"/>
-</svg>
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M10 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4ZM9 6a1 1 0 1 1 2 0 1 1 0 0 1-2 0Z" clip-rule="evenodd"/>
+  <path fill-rule="evenodd" d="M6.679 12.967c.353-.136.697-.3 1.033-.475l1.36 2.265a.5.5 0 0 0 .828.043l3-4a.5.5 0 0 0-.046-.654l-.886-.886C13.604 7.456 15 4.913 15 1.5a.5.5 0 0 0-.5-.5c-3.413 0-5.956 1.395-7.76 3.033l-.886-.887A.5.5 0 0 0 5.2 3.1l-4 3a.5.5 0 0 0 .043.829l2.264 1.358a9.59 9.59 0 0 0-.475 1.036v.001a.5.5 0 0 0 .114.53l3 3c.139.138.35.182.533.113ZM4.09 9.384l2.525 2.525a14.616 14.616 0 0 0 3.555-2.285c1.841-1.612 3.657-4.076 3.818-7.612-3.537.16-6.001 1.976-7.613 3.817A14.617 14.617 0 0 0 4.09 9.384Zm-.096-1.97a15.616 15.616 0 0 1 2.03-2.682l-.572-.572-3.058 2.294 1.6.96Zm5.551 6.191-.96-1.6a15.617 15.617 0 0 0 2.682-2.03l.572.572-2.294 3.058Z" clip-rule="evenodd"/>
+  <path d="M3.854 12.146a.5.5 0 0 1 0 .708l-2 2a.5.5 0 0 1-.708-.708l2-2a.5.5 0 0 1 .708 0Zm2 1.708a.5.5 0 0 0-.708-.708l-1 1a.5.5 0 0 0 .708.708l1-1Zm-3-3.708a.5.5 0 0 1 0 .708l-1 1a.5.5 0 0 1-.708-.708l1-1a.5.5 0 0 1 .708 0Z"/>
+</svg>

package/optimize/lib/components/icon/svgs/tokens/tokenDimension.svg

@@ -0,0 +1,4 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path d="M12 10.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1H12v-.5Z"/>
+  <path fill-rule="evenodd" d="M3 12h3.078c.728 0 1.37-.127 1.924-.383a3.5 3.5 0 1 0 2.053-3.306c.005-.101.008-.205.008-.311 0-.833-.165-1.548-.493-2.145A3.309 3.309 0 0 0 8.18 4.48C7.58 4.16 6.87 4 6.047 4H3v8Zm6.787-2.321A2.5 2.5 0 0 0 11.5 14a2.5 2.5 0 1 0-1.713-4.321ZM6 10.156h-.828V5.844h.766c.416 0 .768.064 1.054.191.29.128.508.348.656.66.151.313.227.748.227 1.305 0 .557-.074.992-.223 1.305a1.29 1.29 0 0 1-.64.66c-.279.127-.616.191-1.012.191Z"/>
+</svg>

package/optimize/lib/components/icon/svgs/tokens/tokenMetricCounter.svg

@@ -1,3 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M11 3a1 1 0 0 0-1 1v1H9a1 1 0 0 0 0 2h1v1a1 1 0 1 0 2 0V7h1a1 1 0 1 0 0-2h-1V4a1 1 0 0 0-1-1ZM5 7a1 1 0 0 0-1 1v1H3a1 1 0 0 0 0 2h1v1a1 1 0 1 0 2 0v-1h1a1 1 0 1 0 0-2H6V8a1 1 0 0 0-1-1Z"/>
+  <path d="M12 10.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1H12v-.5Z"/>
+  <path fill-rule="evenodd" d="M8 3h4v5.035A3.5 3.5 0 1 1 8.337 13H2V9h3V6h3V3Zm1.05 9a2.5 2.5 0 1 1 4.902-1 2.5 2.5 0 0 1-4.902 1ZM11 8.035a3.49 3.49 0 0 0-2 1.016V4h2v4.035ZM8 12H6V7h2v5Zm-3 0v-2H3v2h2Z"/>
 </svg>

package/optimize/lib/components/icon/svgs/tokens/tokenMetricGauge.svg

@@ -1,3 +1,4 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
-  <path d="M5 4h-.5a.5.5 0 0 1 0-1h1a.5.5 0 0 1 .5.5v9a.5.5 0 0 1-.5.5h-1a.5.5 0 0 1 0-1H5v-2h-.5a.5.5 0 0 1 0-1H5V7h-.5a.5.5 0 0 1 0-1H5V4Zm3 1a1 1 0 0 0-1 1v6a1 1 0 0 0 1 1h2a1 1 0 0 0 1-1V6a1 1 0 0 0-1-1H8Z"/>
+  <path d="M12 10.5a.5.5 0 0 0-1 0v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 0-1H12v-.5Z"/>
+  <path fill-rule="evenodd" d="M6 3H2v10h6.337A3.5 3.5 0 1 0 12 8.035V5H8v2H6V3Zm5 5.035V6H9v3.05a3.49 3.49 0 0 1 2-1.015ZM9 11.5a2.5 2.5 0 1 1 5.002 0A2.5 2.5 0 0 1 9 11.5ZM8 8H6v4h2V8ZM5 4H3v8h2V4Z"/>
 </svg>

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

@@ -0,0 +1,3 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
+  <path fill-rule="evenodd" d="M8 1a1 1 0 0 1 .864.496l7 12A1 1 0 0 1 15 15H1a1 1 0 0 1-.864-1.504l7-12A1 1 0 0 1 8 1Zm.9 4.995-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995a.905.905 0 1 1 1.8 0ZM8 13a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z"/>
+</svg>

package/optimize/lib/components/markdown_editor/markdown_editor.js

@@ -13,17 +13,18 @@ var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/h
 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); }
@@ -248,10 +249,10 @@ var EuiMarkdownEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
     _useState12 = (0, _slicedToArray2.default)(_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
@@ -290,7 +291,8 @@ var EuiMarkdownEditor = /*#__PURE__*/(0, _react.forwardRef)(function (_ref, ref)
   return (0, _react2.jsx)(_markdown_context.EuiMarkdownContext.Provider, {
     value: contextValue
   }, (0, _react2.jsx)("div", (0, _extends2.default)({
-    className: classes
+    className: classes,
+    css: cssStyles
   }, rest), (0, _react2.jsx)(_markdown_editor_toolbar.EuiMarkdownEditorToolbar, {
     ref: editorToolbarRef,
     selectedNode: selectedNode,
@@ -303,6 +305,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
     }
@@ -312,7 +315,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/optimize/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/optimize/lib/components/markdown_editor/markdown_editor_drop_zone.js

@@ -7,23 +7,27 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.EuiMarkdownEditorDropZone = void 0;
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 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 _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; }
-/*
- * 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.
- */
-
+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) { (0, _defineProperty2.default)(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
+                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          * 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 getUnacceptedItems = function getUnacceptedItems(items, dropHandlers) {
   var unacceptedItems = [];
   for (var i = 0; i < items.length; i++) {
@@ -42,6 +46,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 = (0, _slicedToArray2.default)(_React$useState, 2),
     isDragging = _React$useState2[0],
@@ -63,11 +69,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 = (0, _slicedToArray2.default)(_React$useState7, 2),
     editorFooterRef = _React$useState8[0],
@@ -80,7 +84,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,
@@ -165,7 +169,11 @@ var EuiMarkdownEditorDropZone = function EuiMarkdownEditorDropZone(props) {
     getRootProps = _useDropzone.getRootProps,
     getInputProps = _useDropzone.getInputProps,
     open = _useDropzone.open;
-  return (0, _react2.jsx)("div", (0, _extends2.default)({}, 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", (0, _extends2.default)({}, rootProps, {
+    css: cssStyles,
     className: classes
   }), children, (0, _react2.jsx)(_markdown_editor_footer.EuiMarkdownEditorFooter, {
     ref: setEditorFooterRef,

package/optimize/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/optimize/lib/components/markdown_editor/markdown_editor_footer.js

@@ -8,6 +8,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.EuiMarkdownEditorFooter = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
+var _services = require("../../services");
 var _loading = require("../loading");
 var _button = require("../button");
 var _title = require("../title");
@@ -17,10 +18,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 _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; }
@@ -41,6 +43,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 = (0, _slicedToArray2.default)(_useState, 2),
     isShowingHelpModal = _useState2[0],
@@ -92,6 +95,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",
@@ -127,6 +131,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",
@@ -157,6 +162,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",
@@ -203,6 +209,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",
@@ -228,8 +235,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/optimize/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/optimize/lib/components/markdown_editor/markdown_editor_text_area.js

@@ -10,7 +10,9 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireWildcard(require("react"));
 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"];
 /*
@@ -38,6 +40,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 = {};
@@ -51,7 +55,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,