@elastic/eui 63.0.3 → 65.0.0

package/lib/components/link/link.styles.js

@@ -27,8 +27,9 @@ var euiLinkFocusCSS = function euiLinkFocusCSS(euiTheme) {
 
 exports.euiLinkFocusCSS = euiLinkFocusCSS;
 
-var euiLinkCSS = function euiLinkCSS(euiTheme) {
-  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    text-align: left;\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiTheme, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
+var euiLinkCSS = function euiLinkCSS(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
+  return "\n    font-weight: ".concat(euiTheme.font.weight.medium, ";\n    ").concat((0, _global_styling.logicalTextAlignCSS)('left'), "\n\n    &:hover {\n      ").concat(euiLinkHoverCSS(), "\n    }\n\n    &:focus {\n      ").concat((0, _global_styling.euiFocusRing)(euiThemeContext, 'outset'), "\n      ").concat(euiLinkFocusCSS(euiTheme), "\n    }\n  ");
 };
 
 exports.euiLinkCSS = euiLinkCSS;
@@ -42,10 +43,10 @@ var _ref = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiLinkStyles = function euiLinkStyles(_ref2) {
-  var euiTheme = _ref2.euiTheme;
+var euiLinkStyles = function euiLinkStyles(euiThemeContext) {
+  var euiTheme = euiThemeContext.euiTheme;
   return {
-    euiLink: /*#__PURE__*/(0, _react.css)(euiLinkCSS(euiTheme), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
+    euiLink: /*#__PURE__*/(0, _react.css)(euiLinkCSS(euiThemeContext), " user-select:text;&[target='_blank']{position:relative;};label:euiLink;"),
     disabled: _ref,
     // Color styles
     primary: /*#__PURE__*/(0, _react.css)(_colorCSS(euiTheme.colors.primaryText), ";label:primary;"),

package/lib/components/list_group/list_group.js

@@ -122,6 +122,7 @@ EuiListGroup.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Add a border to the list container
@@ -145,6 +146,7 @@ EuiListGroup.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
          * Size of the label text
@@ -212,8 +214,9 @@ EuiListGroup.propTypes = {
 
       /**
          * Any of the named color palette options.
+         * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
          */
-      color: _propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+      color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
       "aria-label": _propTypes.default.string,
       "aria-labelledby": _propTypes.default.string,
       isDisabled: _propTypes.default.bool,
@@ -250,6 +253,7 @@ EuiListGroup.propTypes = {
       isLoading: _propTypes.default.bool,
       className: _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any,
       buttonRef: _propTypes.default.any,
       alwaysShow: _propTypes.default.bool
     }),

package/lib/components/list_group/list_group_item.js

@@ -214,6 +214,7 @@ EuiListGroupItem.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Size of the label text
@@ -281,8 +282,9 @@ EuiListGroupItem.propTypes = {
 
     /**
        * Any of the named color palette options.
+       * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
        */
-    color: _propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+    color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
     "aria-label": _propTypes.default.string,
     "aria-labelledby": _propTypes.default.string,
     isDisabled: _propTypes.default.bool,
@@ -319,6 +321,7 @@ EuiListGroupItem.propTypes = {
     isLoading: _propTypes.default.bool,
     className: _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
     buttonRef: _propTypes.default.any,
     alwaysShow: _propTypes.default.bool
   }),

package/lib/components/list_group/pinnable_list_group/pinnable_list_group.js

@@ -134,6 +134,7 @@ EuiPinnableListGroup.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
          * Size of the label text
@@ -201,8 +202,9 @@ EuiPinnableListGroup.propTypes = {
 
       /**
          * Any of the named color palette options.
+         * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
          */
-      color: _propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+      color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
       "aria-label": _propTypes.default.string,
       "aria-labelledby": _propTypes.default.string,
       isDisabled: _propTypes.default.bool,
@@ -239,6 +241,7 @@ EuiPinnableListGroup.propTypes = {
       isLoading: _propTypes.default.bool,
       className: _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any,
       buttonRef: _propTypes.default.any,
       alwaysShow: _propTypes.default.bool
     }),
@@ -274,6 +277,7 @@ EuiPinnableListGroup.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
          * Size of the label text
@@ -338,7 +342,7 @@ EuiPinnableListGroup.propTypes = {
       type: _propTypes.default.oneOf(["submit", "reset", "button"]),
       onClick: _propTypes.default.func,
       iconType: _propTypes.default.oneOfType([_propTypes.default.oneOf(["accessibility", "addDataApp", "advancedSettingsApp", "agentApp", "aggregate", "alert", "analyzeEvent", "annotation", "apmApp", "apmTrace", "appSearchApp", "apps", "arrowDown", "arrowLeft", "arrowRight", "arrowUp", "arrowStart", "arrowEnd", "asterisk", "auditbeatApp", "beaker", "bell", "bellSlash", "bolt", "boxesHorizontal", "boxesVertical", "branch", "branchUser", "broom", "brush", "bug", "bullseye", "calendar", "canvasApp", "casesApp", "check", "checkInCircleFilled", "cheer", "classificationJob", "clock", "cloudDrizzle", "cloudStormy", "cloudSunny", "cluster", "codeApp", "color", "compute", "console", "consoleApp", "container", "continuityAbove", "continuityAboveBelow", "continuityBelow", "continuityWithin", "controlsHorizontal", "controlsVertical", "copy", "copyClipboard", "createAdvancedJob", "createMultiMetricJob", "createPopulationJob", "createSingleMetricJob", "cross", "crossClusterReplicationApp", "crossInACircleFilled", "crosshairs", "currency", "cut", "dashboardApp", "dataVisualizer", "database", "desktop", "devToolsApp", "discoverApp", "document", "documentEdit", "documentation", "documents", "dot", "doubleArrowLeft", "doubleArrowRight", "download", "editorAlignCenter", "editorAlignLeft", "editorAlignRight", "editorBold", "editorChecklist", "editorCodeBlock", "editorComment", "editorDistributeHorizontal", "editorDistributeVertical", "editorHeading", "editorItalic", "editorItemAlignBottom", "editorItemAlignCenter", "editorItemAlignLeft", "editorItemAlignMiddle", "editorItemAlignRight", "editorItemAlignTop", "editorLink", "editorOrderedList", "editorPositionBottomLeft", "editorPositionBottomRight", "editorPositionTopLeft", "editorPositionTopRight", "editorRedo", "editorStrike", "editorTable", "editorUnderline", "editorUndo", "editorUnorderedList", "email", "empty", "emsApp", "eql", "eraser", "exit", "expand", "expandMini", "exportAction", "eye", "eyeClosed", "faceHappy", "faceNeutral", "faceSad", "filebeatApp", "filter", "flag", "fleetApp", "fold", "folderCheck", "folderClosed", "folderExclamation", "folderOpen", "frameNext", "framePrevious", "fullScreen", "fullScreenExit", "function", "gear", "gisApp", "glasses", "globe", "grab", "grabHorizontal", "graphApp", "grid", "grokApp", "heart", "heartbeatApp", "heatmap", "help", "home", "iInCircle", "image", "importAction", "indexClose", "indexEdit", "indexFlush", "indexManagementApp", "indexMapping", "indexOpen", "indexPatternApp", "indexRollupApp", "indexRuntime", "indexSettings", "inputOutput", "inspect", "invert", "ip", "keyboard", "kqlField", "kqlFunction", "kqlOperand", "kqlSelector", "kqlValue", "kubernetesNode", "kubernetesPod", "layers", "lensApp", "lettering", "lineDashed", "lineDotted", "lineSolid", "link", "list", "listAdd", "lock", "lockOpen", "logoAWS", "logoAWSMono", "logoAerospike", "logoApache", "logoAppSearch", "logoAzure", "logoAzureMono", "logoBeats", "logoBusinessAnalytics", "logoCeph", "logoCloud", "logoCloudEnterprise", "logoCode", "logoCodesandbox", "logoCouchbase", "logoDocker", "logoDropwizard", "logoElastic", "logoElasticStack", "logoElasticsearch", "logoEnterpriseSearch", "logoEtcd", "logoGCP", "logoGCPMono", "logoGithub", "logoGmail", "logoGolang", "logoGoogleG", "logoHAproxy", "logoIBM", "logoIBMMono", "logoKafka", "logoKibana", "logoKubernetes", "logoLogging", "logoLogstash", "logoMaps", "logoMemcached", "logoMetrics", "logoMongodb", "logoMySQL", "logoNginx", "logoObservability", "logoOsquery", "logoPhp", "logoPostgres", "logoPrometheus", "logoRabbitmq", "logoRedis", "logoSecurity", "logoSiteSearch", "logoSketch", "logoSlack", "logoUptime", "logoWebhook", "logoWindows", "logoWorkplaceSearch", "logsApp", "logstashFilter", "logstashIf", "logstashInput", "logstashOutput", "logstashQueue", "machineLearningApp", "magnet", "magnifyWithExclamation", "magnifyWithMinus", "magnifyWithPlus", "managementApp", "mapMarker", "memory", "menu", "menuDown", "menuLeft", "menuRight", "menuUp", "merge", "metricbeatApp", "metricsApp", "minimize", "minus", "minusInCircle", "minusInCircleFilled", "mobile", "monitoringApp", "moon", "namespace", "nested", "node", "notebookApp", "number", "offline", "online", "outlierDetectionJob", "package", "packetbeatApp", "pageSelect", "pagesSelect", "paperClip", "partial", "pause", "payment", "pencil", "percent", "pin", "pinFilled", "pipelineApp", "play", "playFilled", "plus", "plusInCircle", "plusInCircleFilled", "popout", "push", "questionInCircle", "quote", "recentlyViewedApp", "refresh", "regressionJob", "reporter", "reportingApp", "returnKey", "save", "savedObjectsApp", "scale", "search", "searchProfilerApp", "securityAnalyticsApp", "securityApp", "securitySignal", "securitySignalDetected", "securitySignalResolved", "sessionViewer", "shard", "share", "snowflake", "sortDown", "sortLeft", "sortRight", "sortUp", "sortable", "spacesApp", "sqlApp", "starEmpty", "starEmptySpace", "starFilled", "starFilledSpace", "starMinusEmpty", "starMinusFilled", "starPlusEmpty", "starPlusFilled", "stats", "stop", "stopFilled", "stopSlash", "storage", "string", "submodule", "sun", "swatchInput", "symlink", "tableDensityCompact", "tableDensityExpanded", "tableDensityNormal", "tableOfContents", "tag", "tear", "temperature", "timeline", "timelionApp", "timeRefresh", "timeslider", "training", "trash", "unfold", "unlink", "upgradeAssistantApp", "uptimeApp", "user", "userAvatar", "users", "usersRolesApp", "vector", "videoPlayer", "visArea", "visAreaStacked", "visBarHorizontal", "visBarHorizontalStacked", "visBarVertical", "visBarVerticalStacked", "visGauge", "visGoal", "visLine", "visMapCoordinate", "visMapRegion", "visMetric", "visPie", "visTable", "visTagCloud", "visText", "visTimelion", "visVega", "visVisualBuilder", "visualizeApp", "watchesApp", "wordWrap", "wordWrapDisabled", "workplaceSearchApp", "wrench", "tokenAlias", "tokenAnnotation", "tokenArray", "tokenBinary", "tokenBoolean", "tokenClass", "tokenCompletionSuggester", "tokenConstant", "tokenDate", "tokenDenseVector", "tokenElement", "tokenEnum", "tokenEnumMember", "tokenEvent", "tokenException", "tokenField", "tokenFile", "tokenFlattened", "tokenFunction", "tokenGeo", "tokenHistogram", "tokenInterface", "tokenIP", "tokenJoin", "tokenKey", "tokenKeyword", "tokenMethod", "tokenMetricCounter", "tokenMetricGauge", "tokenModule", "tokenNamespace", "tokenNested", "tokenNull", "tokenNumber", "tokenObject", "tokenOperator", "tokenPackage", "tokenParameter", "tokenPercolator", "tokenProperty", "tokenRange", "tokenRankFeature", "tokenRankFeatures", "tokenRepo", "tokenSearchType", "tokenShape", "tokenString", "tokenStruct", "tokenSymbol", "tokenTag", "tokenText", "tokenTokenCount", "tokenVariable"]).isRequired, _propTypes.default.string.isRequired, _propTypes.default.elementType.isRequired]).isRequired,
-      color: _propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+      color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
       "aria-label": _propTypes.default.string,
       "aria-labelledby": _propTypes.default.string,
       isDisabled: _propTypes.default.bool,
@@ -349,6 +353,7 @@ EuiPinnableListGroup.propTypes = {
       isLoading: _propTypes.default.bool,
       className: _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any,
       buttonRef: _propTypes.default.any,
       alwaysShow: _propTypes.default.bool
     }),
@@ -393,6 +398,7 @@ EuiPinnableListGroup.propTypes = {
   className: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
   "aria-label": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
   "data-test-subj": _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.string]),
+  css: _propTypes.default.oneOfType([_propTypes.default.any, _propTypes.default.any]),
 
   /**
        * Add a border to the list container

package/lib/components/loading/loading_chart.js

@@ -76,6 +76,7 @@ EuiLoadingChart.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   size: _propTypes.default.any,
   mono: _propTypes.default.bool
 };

package/lib/components/loading/loading_chart.styles.js

@@ -17,7 +17,7 @@ function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(
 
 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)."; }
 
-var _ref2 = process.env.NODE_ENV === "production" ? {
+var _ref = process.env.NODE_ENV === "production" ? {
   name: "yovxj7-euiLoadingChart",
   styles: "overflow:hidden;display:inline-flex;label:euiLoadingChart;"
 } : {
@@ -26,43 +26,34 @@ var _ref2 = process.env.NODE_ENV === "production" ? {
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 };
 
-var euiLoadingChartStyles = function euiLoadingChartStyles(_ref3) {
-  var euiTheme = _ref3.euiTheme;
+var euiLoadingChartStyles = function euiLoadingChartStyles(_ref2) {
+  var euiTheme = _ref2.euiTheme;
   return {
-    euiLoadingChart: _ref2,
-    m: /*#__PURE__*/(0, _react.css)("height:", euiTheme.size.base, ";gap:", euiTheme.size.xxs, ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)("height:", euiTheme.size.l, ";gap:", euiTheme.size.xxs, ";;label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)("height:", euiTheme.size.xl, ";gap:", euiTheme.size.xs, ";;label:xl;")
+    euiLoadingChart: _ref,
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.base), " gap:", euiTheme.size.xxs, ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.l), " gap:", euiTheme.size.xxs, ";;label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', euiTheme.size.xl), " gap:", euiTheme.size.xs, ";;label:xl;")
   };
 };
 
 exports.euiLoadingChartStyles = euiLoadingChartStyles;
 
-var _ref = process.env.NODE_ENV === "production" ? {
-  name: "decz5u-euiLoadingChart__bar",
-  styles: "height:100%;display:inline-block;label:euiLoadingChart__bar;"
-} : {
-  name: "decz5u-euiLoadingChart__bar",
-  styles: "height:100%;display:inline-block;label:euiLoadingChart__bar;",
-  toString: _EMOTION_STRINGIFIED_CSS_ERROR__
-};
-
-var euiLoadingChartBarStyles = function euiLoadingChartBarStyles(_ref4) {
-  var euiTheme = _ref4.euiTheme;
+var euiLoadingChartBarStyles = function euiLoadingChartBarStyles(_ref3) {
+  var euiTheme = _ref3.euiTheme;
   return {
-    euiLoadingChart__bar: _ref,
-    m: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size.xxs, ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size.xs, ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";;label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size.s, ";", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), ";;label:xl;")
+    euiLoadingChart__bar: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('height', '100%'), " display:inline-block;;label:euiLoadingChart__bar;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.xxs), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.xs), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.m), ";;label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalCSS)('width', euiTheme.size.s), " ", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.base), ";;label:xl;")
   };
 };
 
 exports.euiLoadingChartBarStyles = euiLoadingChartBarStyles;
 var barAnimation = (0, _react.keyframes)(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n  0% {\n    transform: translateY(0);\n  }\n\n  50% {\n    transform: translateY(66%);\n  }\n\n  100% {\n    transform: translateY(0);\n  }\n"])));
 
-var _barIndex = function _barIndex(index, mono, _ref5) {
-  var euiTheme = _ref5.euiTheme,
-      colorMode = _ref5.colorMode;
+var _barIndex = function _barIndex(index, mono, _ref4) {
+  var euiTheme = _ref4.euiTheme,
+      colorMode = _ref4.colorMode;
   var backgroundColor = mono ? (0, _services.shadeOrTint)(euiTheme.colors.lightShade, index * 0.04, colorMode) : (0, _services.euiPaletteColorBlind)()[index];
   return /*#__PURE__*/(0, _react.css)("background-color:", backgroundColor, ";transform:translateY(", 22 * index, "%);", _global_styling.euiCanAnimate, "{animation:", barAnimation, " 1s ", ".".concat(index, "s"), " infinite;}");
 };

package/lib/components/loading/loading_content.js

@@ -62,5 +62,6 @@ EuiLoadingContent.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   lines: _propTypes.default.oneOf([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
 };

package/lib/components/loading/loading_content.styles.js

@@ -23,7 +23,7 @@ var euiLoadingContentStyles = function euiLoadingContentStyles(_ref) {
   var gradientStartStop = colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.12) : (0, _services.tint)(euiTheme.colors.lightShade, 0.65);
   var gradientMiddle = colorMode === _services.COLOR_MODES_STANDARD.dark ? (0, _services.shade)(euiTheme.colors.lightShade, 0.24) : (0, _services.tint)(euiTheme.colors.lightShade, 0.8);
   return {
-    euiLoadingContent__singleLine: /*#__PURE__*/(0, _react.css)("display:block;width:100%;height:", euiTheme.size.base, ";border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){margin-block-end:", euiTheme.size.s, ";}&:last-child:not(:only-child){width:75%;}&::after{content:'';display:block;width:220%;height:100%;background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", _global_styling.euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
+    euiLoadingContent__singleLine: /*#__PURE__*/(0, _react.css)("display:block;", (0, _global_styling.logicalCSS)('width', '100%'), " ", (0, _global_styling.logicalCSS)('height', euiTheme.size.base), " border-radius:", euiTheme.border.radius.medium, ";background:", gradientStartStop, ";overflow:hidden;&:not(:last-child){", (0, _global_styling.logicalCSS)('margin-bottom', euiTheme.size.s), ";}&:last-child:not(:only-child){", (0, _global_styling.logicalCSS)('width', '75%'), ";}&::after{content:'';display:block;", (0, _global_styling.logicalCSS)('width', '220%'), " ", (0, _global_styling.logicalCSS)('height', '100%'), " background:linear-gradient(\n          137deg,\n          ", gradientStartStop, " 45%,\n          ", gradientMiddle, " 50%,\n          ", gradientStartStop, " 55%\n        );", _global_styling.euiCanAnimate, "{animation:", loadingContentGradient, " 1.5s ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingContent__singleLine;")
   };
 };
 

package/lib/components/loading/loading_elastic.js

@@ -59,5 +59,6 @@ EuiLoadingElastic.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   size: _propTypes.default.any
 };

package/lib/components/loading/loading_logo.js

@@ -68,6 +68,7 @@ EuiLoadingLogo.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   size: _propTypes.default.any,
 
   /**

package/lib/components/loading/loading_logo.styles.js

@@ -25,15 +25,15 @@ var loadingPadding = {
 var euiLoadingLogoStyles = function euiLoadingLogoStyles(_ref) {
   var euiTheme = _ref.euiTheme;
   return {
-    euiLoadingLogo: /*#__PURE__*/(0, _react.css)("position:relative;display:inline-block;", _global_styling.euiCanAnimate, "{&:before,&:after{position:absolute;content:'';width:90%;inset-inline-start:5%;border-radius:50%;opacity:0.2;z-index:1;}&:before{box-shadow:0 0 ", euiTheme.size.s, " ", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsateAndFade, " ", euiTheme.animation.resistance, " infinite;}&:after{background-color:", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsate, " ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingLogo;"),
+    euiLoadingLogo: /*#__PURE__*/(0, _react.css)("position:relative;display:inline-block;", _global_styling.euiCanAnimate, "{&:before,&:after{position:absolute;content:'';inline-size:90%;inset-inline-start:5%;border-radius:50%;opacity:0.2;z-index:1;}&:before{box-shadow:0 0 ", euiTheme.size.s, " ", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsateAndFade, " ", euiTheme.animation.resistance, " infinite;}&:after{background-color:", euiTheme.colors.fullShade, ";animation:1s ", loadingPulsate, " ", euiTheme.animation.resistance, " infinite;}};label:euiLoadingLogo;"),
 
     /**
      * 1. Requires pixel math for animation
      * 2. Add a half the amount of animation distance padding to the top to give it more room
      */
-    m: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.m], ";}&:before,&:after{height:", euiTheme.base * 0.25, "px;inset-block-end:-", euiTheme.size.xs, ";};label:m;"),
-    l: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.l], ";}&:before,&:after{height:", euiTheme.base * 0.375, "px;inset-block-end:-", euiTheme.size.s, ";};label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.xl], ";}&:before,&:after{height:", euiTheme.base * 0.5, "px;inset-block-end:-", euiTheme.size.m, ";};label:xl;")
+    m: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.m], ";}&:before,&:after{block-size:", euiTheme.base * 0.25, "px;inset-block-end:-", euiTheme.size.xs, ";};label:m;"),
+    l: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.l], ";}&:before,&:after{block-size:", euiTheme.base * 0.375, "px;inset-block-end:-", euiTheme.size.s, ";};label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)(_global_styling.euiCanAnimate, "{padding-block-start:", euiTheme.size[loadingPadding.xl], ";}&:before,&:after{block-size:", euiTheme.base * 0.5, "px;inset-block-end:-", euiTheme.size.m, ";};label:xl;")
   };
 };
 

package/lib/components/loading/loading_spinner.js

@@ -58,6 +58,7 @@ EuiLoadingSpinner.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   size: _propTypes.default.any,
 
   /**

package/lib/components/loading/loading_spinner.styles.js

@@ -32,11 +32,11 @@ var euiLoadingSpinnerStyles = function euiLoadingSpinnerStyles(_ref, color) {
   return {
     euiLoadingSpinner: /*#__PURE__*/(0, _react.css)("flex-shrink:0;display:inline-block;border-radius:50%;border:", euiTheme.border.thick, ";", spinnerColorsCSS((color === null || color === void 0 ? void 0 : color.border) || euiTheme.colors.lightShade, (color === null || color === void 0 ? void 0 : color.highlight) || euiTheme.colors.primary), ";", _global_styling.euiCanAnimate, "{animation:", _loadingSpinner, " 0.6s infinite linear;};label:euiLoadingSpinner;"),
     // Sizes
-    s: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.s], ";height:", euiTheme.size[spinnerSizes.s], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
-    m: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.m], ";height:", euiTheme.size[spinnerSizes.m], ";border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),
-    l: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.l], ";height:", euiTheme.size[spinnerSizes.l], ";;label:l;"),
-    xl: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.xl], ";height:", euiTheme.size[spinnerSizes.xl], ";;label:xl;"),
-    xxl: /*#__PURE__*/(0, _react.css)("width:", euiTheme.size[spinnerSizes.xxl], ";height:", euiTheme.size[spinnerSizes.xxl], ";;label:xxl;")
+    s: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.s], euiTheme.size[spinnerSizes.s]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:s;"),
+    m: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.m], euiTheme.size[spinnerSizes.m]), " border-width:calc(", euiTheme.border.width.thin, " * 1.5);;label:m;"),
+    l: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.l], euiTheme.size[spinnerSizes.l]), ";;label:l;"),
+    xl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xl], euiTheme.size[spinnerSizes.xl]), ";;label:xl;"),
+    xxl: /*#__PURE__*/(0, _react.css)((0, _global_styling.logicalSizeCSS)(euiTheme.size[spinnerSizes.xxl], euiTheme.size[spinnerSizes.xxl]), ";;label:xxl;")
   };
 };
 

package/lib/components/mark/mark.js

@@ -56,6 +56,7 @@ EuiMark.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * Set to `false` to remove the CSS :before and :after

package/lib/components/markdown_editor/markdown_editor.js

@@ -462,6 +462,7 @@ EuiMarkdownEditor.propTypes = {
   /** aria-label OR aria-labelledby must be set */
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /** aria-label OR aria-labelledby must be set */
   "aria-labelledby": _propTypes.default.string,
@@ -560,6 +561,7 @@ EuiMarkdownEditor.propTypes = {
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
     "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any,
 
     /**
          * Determines the text size. Choose `relative` to control the `font-size` based on the value of a parent container.

package/lib/components/markdown_editor/markdown_editor_text_area.js

@@ -70,6 +70,7 @@ EuiMarkdownEditorTextArea.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   isInvalid: _propTypes.default.bool,
   fullWidth: _propTypes.default.bool,
   compressed: _propTypes.default.bool,

package/lib/components/markdown_editor/markdown_editor_toolbar.js

@@ -190,6 +190,7 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
       icon: button.iconType
     }));
   })) : null), isPreviewing ? (0, _react2.jsx)(_button.EuiButtonEmpty, {
+    "data-test-subj": "markdown_editor_edit_button",
     iconType: "editorCodeBlock",
     color: "text",
     size: "s",
@@ -199,6 +200,7 @@ var EuiMarkdownEditorToolbar = /*#__PURE__*/(0, _react.forwardRef)(function (_re
     token: "euiMarkdownEditorToolbar.editor",
     default: "Editor"
   })) : (0, _react2.jsx)(_button.EuiButtonEmpty, {
+    "data-test-subj": "markdown_editor_preview_button",
     iconType: "eye",
     color: "text",
     size: "s",
@@ -214,6 +216,7 @@ EuiMarkdownEditorToolbar.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   selectedNode: _propTypes.default.oneOfType([_propTypes.default.oneOf([null]), _propTypes.default.any.isRequired]),
   markdownActions: _propTypes.default.any.isRequired,
   viewMode: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]).isRequired,

package/lib/components/markdown_editor/markdown_format.js

@@ -81,6 +81,7 @@ EuiMarkdownFormat.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   children: _propTypes.default.string.isRequired,
 
   /** array of unified plugins to parse content into an AST */

package/lib/components/modal/confirm_modal.js

@@ -158,7 +158,7 @@ EuiConfirmModal.propTypes = {
   confirmButtonDisabled: _propTypes.default.bool,
   className: _propTypes.default.string,
   defaultFocusedButton: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.any.isRequired]),
-  buttonColor: _propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+  buttonColor: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
   // For docs only, will get passed with ...rest
 
   /**

package/lib/components/modal/modal_body.js

@@ -40,5 +40,6 @@ exports.EuiModalBody = EuiModalBody;
 EuiModalBody.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

package/lib/components/modal/modal_footer.js

@@ -38,5 +38,6 @@ exports.EuiModalFooter = EuiModalFooter;
 EuiModalFooter.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

package/lib/components/modal/modal_header.js

@@ -38,5 +38,6 @@ exports.EuiModalHeader = EuiModalHeader;
 EuiModalHeader.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

package/lib/components/modal/modal_header_title.js

@@ -38,5 +38,6 @@ exports.EuiModalHeaderTitle = EuiModalHeaderTitle;
 EuiModalHeaderTitle.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

package/lib/components/notification/notification_event.js

@@ -174,6 +174,7 @@ EuiNotificationEvent.propTypes = {
   isLoading: _propTypes.default.bool,
   className: _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
        * A unique identifier
@@ -208,13 +209,15 @@ EuiNotificationEvent.propTypes = {
     onClick: _propTypes.default.func,
 
     /**
-       * Any of our named colors
+       * Any of the named color palette options.
+       * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
        */
 
     /**
-       * Any of our named colors
+       * Any of the named color palette options.
+       * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
        */
-    color: _propTypes.default.oneOf(["primary", "danger", "text", "ghost", "success", "warning"]),
+    color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
     size: _propTypes.default.oneOf(["xs", "s", "m"]),
 
     /**
@@ -282,13 +285,15 @@ EuiNotificationEvent.propTypes = {
       className: _propTypes.default.string,
       "aria-label": _propTypes.default.string,
       "data-test-subj": _propTypes.default.string,
+      css: _propTypes.default.any,
       ref: _propTypes.default.any,
       "data-text": _propTypes.default.string
     }),
     iconSize: _propTypes.default.oneOf(["s", "m"]),
     className: _propTypes.default.string,
     "aria-label": _propTypes.default.string,
-    "data-test-subj": _propTypes.default.string
+    "data-test-subj": _propTypes.default.string,
+    css: _propTypes.default.any
   }),
 
   /**

package/lib/components/notification/notification_event_read_button.js

@@ -61,8 +61,9 @@ exports.EuiNotificationEventReadButton = EuiNotificationEventReadButton;
 EuiNotificationEventReadButton.propTypes = {
   /**
      * Any of the named color palette options.
+     * **`'ghost'` is set for deprecation. Use EuiThemeProvide.colorMode = 'dark' instead.**
      */
-  color: _propTypes.default.oneOf(["primary", "accent", "success", "warning", "danger", "ghost", "text"]),
+  color: _propTypes.default.oneOfType([_propTypes.default.any.isRequired, _propTypes.default.oneOf(["ghost"])]),
   "aria-label": _propTypes.default.string,
   "aria-labelledby": _propTypes.default.string,
 
@@ -86,6 +87,7 @@ EuiNotificationEventReadButton.propTypes = {
   isLoading: _propTypes.default.bool,
   className: _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
   id: _propTypes.default.string.isRequired,
 
   /**

package/lib/components/overlay_mask/overlay_mask.js

@@ -21,7 +21,7 @@ var _services = require("../../services");
 
 var _react2 = require("@emotion/react");
 
-var _excluded = ["className", "children", "onClick", "headerZindexLocation", "maskRef"];
+var _excluded = ["className", "children", "onClick", "headerZindexLocation", "maskRef", "css"];
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
@@ -52,6 +52,7 @@ var EuiOverlayMask = function EuiOverlayMask(_ref) {
       _ref$headerZindexLoca = _ref.headerZindexLocation,
       headerZindexLocation = _ref$headerZindexLoca === void 0 ? 'above' : _ref$headerZindexLoca,
       maskRef = _ref.maskRef,
+      css = _ref.css,
       rest = _objectWithoutProperties(_ref, _excluded);
 
   var overlayMaskNode = (0, _react.useRef)();
@@ -128,6 +129,7 @@ EuiOverlayMask.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Function that applies to clicking the mask itself and not the children

package/lib/components/page/page.js

@@ -81,6 +81,7 @@ EuiPage.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Sets the max-width of the page,

package/lib/components/page/page_content/page_content.js

@@ -64,6 +64,7 @@ EuiPageContent_Deprecated.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Adds a medium shadow to the panel;

package/lib/components/page/page_content/page_content_body.js

@@ -73,6 +73,7 @@ EuiPageContentBody_Deprecated.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Sets the max-width of the page,

package/lib/components/page/page_content/page_content_header.js

@@ -51,5 +51,6 @@ EuiPageContentHeader_Deprecated.propTypes = {
   responsive: _propTypes.default.bool,
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

package/lib/components/page/page_content/page_content_header_section.js

@@ -42,5 +42,6 @@ exports.EuiPageContentHeaderSection_Deprecated = EuiPageContentHeaderSection_Dep
 EuiPageContentHeaderSection_Deprecated.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
-  "data-test-subj": _propTypes.default.string
+  "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any
 };

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

@@ -95,6 +95,7 @@ EuiPageHeader.propTypes = {
   className: _propTypes.default.string,
   "aria-label": _propTypes.default.string,
   "data-test-subj": _propTypes.default.string,
+  css: _propTypes.default.any,
 
   /**
      * Sets the max-width of the page,